/* ══════════════════════════════════════════════════════════════════════════
   NairaRate

   Three decisions carry this design, and everything else follows from them.

   1. The rate is the page. It is set enormous, in a real display face, and
      given room to breathe. Everything else is deliberately quiet so that one
      number lands. A page where the headline and the data are the same weight
      is a page nobody can read at a glance, and a glance is all most people
      give this.

   2. Warm black and gold, not blue grey. Blue grey with a blue accent is what
      every dashboard defaults to. Money in this part of the world is gold, and
      gold on near black reads as considered rather than generated.

   3. Figures are monospaced and tabular everywhere. Prices sit in a column and
      the decimal points line up, so two numbers can be compared by eye without
      reading either of them. That single detail is most of the difference
      between a finance tool that feels professional and one that does not.

   Phone first throughout. Most people checking a rate are standing up.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* warm near black, not the usual blue grey */
  --bg:      #0a0a0b;
  --raise:   #111113;
  --raise-2: #17171a;
  --hair:    #232327;
  --hair-2:  #2e2e34;

  --ink:     #f4f2ef;
  --ink-2:   #a3a09b;
  --ink-3:   #6c6a67;

  --gold:    #e8b04b;
  --gold-d:  #a97c26;
  --gold-t:  rgba(232, 176, 75, .09);

  --mint:    #4ade9b;
  --coral:   #ff7a6b;

  --r-s: 4px;
  --r-m: 10px;
  --r-l: 18px;

  --display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --body:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --wrap: 1160px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* a barely there wash behind the top of the page, so the hero does not sit
     on flat black */
  background-image: radial-gradient(90rem 40rem at 50% -18rem, rgba(232, 176, 75, .07), transparent 70%);
  background-repeat: no-repeat;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
p { margin: 0 0 1em; }
button, input { font-family: inherit; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

/* Every figure on the site. Tabular so columns of prices line up on the
   decimal point and can be compared without being read. */
.fig { font-family: var(--mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.wrap.narrow { max-width: 740px; }

/* Small caps labels, used everywhere a field needs naming without shouting. */
.eyebrow {
  font-family: var(--body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ── header ──────────────────────────────────────────────────────────────── */

.hd {
  position: sticky; top: 0; z-index: 40;
  border-bottom: 1px solid var(--hair);
  background: rgba(10, 10, 11, .82);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
}
.hd-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 62px; }

.brand { display: flex; align-items: center; gap: 10px; }
.brand img { max-height: 30px; width: auto; }
.brand .mark {
  width: 30px; height: 30px; flex: 0 0 30px;
  display: grid; place-items: center;
  border-radius: 8px;
  background: linear-gradient(150deg, var(--gold), var(--gold-d));
  color: #1a1204;
  font-family: var(--display); font-weight: 700; font-size: 17px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .22) inset;
}
.brand .bn {
  font-family: var(--display); font-weight: 600; font-size: 18px; letter-spacing: -.03em;
}

.hd-nav { display: flex; gap: 4px; }
.hd-nav a {
  position: relative;
  padding: 8px 12px;
  font-size: 14px; font-weight: 500;
  color: var(--ink-2);
  border-radius: var(--r-s);
}
.hd-nav a:hover { color: var(--ink); }
.hd-nav a.on { color: var(--ink); }
.hd-nav a.on::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px;
  height: 2px; background: var(--gold);
}

/* ── hero ────────────────────────────────────────────────────────────────── */

.hero { padding: 34px 0 4px; }
.hero h1 {
  font-size: clamp(27px, 6.4vw, 46px);
  line-height: 1.08;
  max-width: 17ch;
  margin-bottom: 12px;
}
.hero h1 em { font-style: normal; color: var(--gold); }
.hero .lede {
  color: var(--ink-2);
  font-size: 15.5px;
  max-width: 54ch;
  margin: 0 0 16px;
}

.stamp {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .01em;
  color: var(--ink-3);
  border: 1px solid var(--hair); border-radius: 999px;
  padding: 5px 13px;
}
.stamp .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--mint);
  box-shadow: 0 0 0 3px rgba(74, 222, 155, .13);
  animation: breathe 2.6s ease-in-out infinite;
}
@keyframes breathe { 50% { opacity: .3; transform: scale(.85); } }
.stamp .warn { color: var(--gold); }

/* ── the headline figure ─────────────────────────────────────────────────── */

/* The one number people came for, given the room it deserves. Everything else
   on the page is sized against this. */
.lead-rate {
  margin: 24px 0 12px;
  border: 1px solid var(--hair);
  border-radius: var(--r-l);
  background:
    linear-gradient(180deg, rgba(232, 176, 75, .06), transparent 42%),
    var(--raise);
  padding: 22px 22px 20px;
  position: relative;
  overflow: hidden;
}
.lead-rate::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232, 176, 75, .5), transparent);
}
.lr-k { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.lr-v {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: clamp(38px, 12vw, 68px);
  font-weight: 700; letter-spacing: -.045em; line-height: 1;
  color: var(--ink);
}
.lr-v small { font-size: .42em; font-weight: 500; color: var(--ink-3); letter-spacing: 0; margin-left: 6px; }
.lr-s { margin-top: 10px; font-size: 13.5px; color: var(--ink-2); }
.lr-s b { color: var(--gold); font-weight: 600; }

/* the three supporting figures */
/* Stacked rows on a phone, label on one side and figure on the other. Three
   columns across 390px left about a hundred pixels each, which is not enough
   for a naira price and broke every one of them onto two lines. */
.stats {
  display: grid; grid-template-columns: 1fr; gap: 1px;
  background: var(--hair); border: 1px solid var(--hair);
  border-radius: var(--r-m); overflow: hidden;
}
.stat {
  background: var(--raise); padding: 12px 15px; min-width: 0;
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 4px 14px;
}
.stat .k { grid-row: 1; }
.stat .v {
  grid-row: 1; grid-column: 2; text-align: right;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 17px; font-weight: 600; letter-spacing: -.03em;
  white-space: nowrap;
}
.stat .s { grid-row: 2; grid-column: 1 / -1; font-size: 11.5px; color: var(--ink-3); line-height: 1.4; }
.stat.sell .v { color: var(--mint); }
.stat.gap  .v { color: var(--gold); }

/* ── section heads, numbered ─────────────────────────────────────────────── */

/* The number, the heading and the aside. On a phone the aside drops to its own
   line rather than fighting the heading for width, which was breaking the
   heading into one word per line. */
.sec-h {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 4px 12px;
  margin: 44px 0 16px; padding-bottom: 12px;
  border-bottom: 1px solid var(--hair);
}
.sec-h .no {
  font-family: var(--mono); font-size: 11.5px; color: var(--gold-d);
  letter-spacing: .05em;
}
.sec-h h2 { font-size: 20px; min-width: 0; }
.sec-h > span:not(.no) {
  grid-column: 2;
  font-size: 12.5px; color: var(--ink-3); line-height: 1.5;
}

/* ── exchange board ──────────────────────────────────────────────────────── */

.board { display: grid; grid-template-columns: 1fr; gap: 10px; }

.ex {
  border: 1px solid var(--hair);
  border-radius: var(--r-m);
  background: var(--raise);
  overflow: hidden;
  transition: border-color .16s ease;
}
.ex:hover { border-color: var(--hair-2); }
.ex.is-best { border-color: rgba(232, 176, 75, .38); }

.ex-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 15px; }
.ex-h h3 { font-size: 16.5px; display: inline; margin-right: 9px; }
.tag {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); border: 1px solid var(--hair-2); border-radius: 3px; padding: 2px 6px;
}
.go {
  font-size: 12.5px; font-weight: 500; color: var(--ink-2);
  border: 1px solid var(--hair-2); border-radius: var(--r-s);
  padding: 6px 12px; white-space: nowrap; transition: all .16s ease;
}
.go:hover { color: #1a1204; background: var(--gold); border-color: var(--gold); }

.ex-p { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--hair); }
.ex-p .p { padding: 12px 15px 13px; position: relative; }
.ex-p .p + .p { border-left: 1px solid var(--hair); }
.ex-p .p b {
  display: block; margin-top: 4px;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 20px; font-weight: 600; letter-spacing: -.035em;
  overflow-wrap: anywhere;
}
.ex-p .p i {
  display: inline-block; margin-top: 6px; font-style: normal;
  font-family: var(--body); font-size: 9.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: #12180f; background: var(--mint); border-radius: 3px; padding: 2px 6px;
}
.ex-p .p.best { background: rgba(74, 222, 155, .045); }

.ex-more { border-top: 1px solid var(--hair); }
.ex-more summary {
  padding: 10px 15px; font-size: 12.5px; color: var(--ink-3);
  cursor: pointer; list-style: none; user-select: none;
}
.ex-more summary::-webkit-details-marker { display: none; }
.ex-more summary::after { content: "  ↓"; font-family: var(--mono); }
.ex-more[open] summary::after { content: "  ↑"; }
.ex-more summary:hover { color: var(--ink-2); }
.offers { display: grid; grid-template-columns: 1fr; gap: 16px; padding: 2px 15px 15px; }
.offers h4 { font-family: var(--body); font-size: 10.5px; font-weight: 600; letter-spacing: .14em;
             text-transform: uppercase; color: var(--ink-3); margin-bottom: 7px; }
.o { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
     padding: 6px 0; border-bottom: 1px solid var(--hair); font-size: 13px; }
.o:last-child { border-bottom: 0; }
.o-n { color: var(--ink-2); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.o-p { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600; }
.o-l { width: 100%; font-family: var(--mono); font-size: 11px; color: var(--ink-3); }

/* ── calculator ──────────────────────────────────────────────────────────── */

.calc { border: 1px solid var(--hair); border-radius: var(--r-l); background: var(--raise); padding: 16px; }
.calc.big { padding: 22px; }
.calc-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px;
             background: var(--bg); border: 1px solid var(--hair); border-radius: var(--r-m); margin-bottom: 18px; }
.calc-tabs button {
  background: none; border: 0; border-radius: var(--r-s);
  color: var(--ink-3); padding: 9px; font-size: 13.5px; font-weight: 500; cursor: pointer;
  transition: all .16s ease;
}
.calc-tabs button:hover { color: var(--ink-2); }
.calc-tabs button.on { background: var(--raise-2); color: var(--ink); box-shadow: 0 1px 0 rgba(255,255,255,.05) inset; }

.calc-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: end; }
.calc-row label { display: block; }
.calc-row label > span { display: block; margin-bottom: 7px; }
.calc-row input {
  width: 100%;
  background: var(--bg); border: 1px solid var(--hair-2); color: var(--ink);
  border-radius: var(--r-m); padding: 13px 14px;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 18px; font-weight: 600; letter-spacing: -.02em;
  transition: border-color .16s ease;
}
.calc-row input:focus { outline: none; border-color: var(--gold); }
.calc-row .eq { color: var(--ink-3); padding-bottom: 15px; font-family: var(--mono); }
.calc-n { font-size: 12.5px; color: var(--ink-3); margin: 14px 0 0; }
.calc-n b { color: var(--ink-2); font-weight: 500; }

.quick { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 16px; }
.quick button {
  background: none; border: 1px solid var(--hair-2); color: var(--ink-3);
  border-radius: 999px; padding: 6px 14px; cursor: pointer;
  font-family: var(--mono); font-size: 12px; transition: all .16s ease;
}
.quick button:hover { border-color: var(--gold); color: var(--gold); }

/* ── table ───────────────────────────────────────────────────────────────── */

.tbl-w { overflow-x: auto; border: 1px solid var(--hair); border-radius: var(--r-m); }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 480px; }
.tbl th {
  text-align: left; padding: 11px 15px; background: var(--raise-2);
  font-family: var(--body); font-size: 10.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
  border-bottom: 1px solid var(--hair); white-space: nowrap;
}
.tbl td { padding: 12px 15px; border-bottom: 1px solid var(--hair); background: var(--raise); }
.tbl tr:last-child td { border-bottom: 0; }
.tbl td.n { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.tbl td.muted { color: var(--ink-3); }

/* ── exchange guide ──────────────────────────────────────────────────────── */

.ex-list { display: grid; grid-template-columns: 1fr; gap: 12px; }
.exc { border: 1px solid var(--hair); border-radius: var(--r-m); background: var(--raise); overflow: hidden; }
.exc-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
         padding: 16px; flex-wrap: wrap; border-bottom: 1px solid var(--hair); }
.exc-h h2 { font-size: 19px; margin-bottom: 5px; }
.exc-p { display: flex; gap: 22px; }
.exc-p > div span { display: block; margin-bottom: 3px; }
.exc-p b { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 16px; font-weight: 600; }
.exc-b { padding: 16px; }
.exc-b p { font-size: 14px; margin: 0 0 10px; padding-left: 22px; position: relative; color: var(--ink-2); }
.exc-b p::before { position: absolute; left: 0; top: 0; font-family: var(--mono); font-weight: 700; }
.exc-b .good::before { content: "+"; color: var(--mint); }
.exc-b .bad::before  { content: "−"; color: var(--coral); }
.exc-b .go { display: inline-block; margin-top: 4px; }

/* ── prose ───────────────────────────────────────────────────────────────── */

.prose { color: var(--ink-2); font-size: 15.5px; max-width: 68ch; }
.prose h2 { color: var(--ink); font-size: 18px; margin: 30px 0 10px; }
.prose h2:first-child { margin-top: 0; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose em { color: var(--ink); font-style: italic; }
.prose a { color: var(--gold); border-bottom: 1px solid rgba(232, 176, 75, .3); }
.prose a:hover { border-bottom-color: var(--gold); }
.prose ul, .prose ol { padding-left: 20px; margin: 0 0 1em; }
.prose li { margin-bottom: .45em; }
.prose li::marker { color: var(--gold-d); }

.pg-h { padding: 40px 0 18px; border-bottom: 1px solid var(--hair); margin-bottom: 26px; }
.pg-h h1 { font-size: clamp(26px, 6vw, 38px); }
.upd { margin-top: 34px; padding-top: 16px; border-top: 1px solid var(--hair);
       font-family: var(--mono); font-size: 12px; color: var(--ink-3); }

.empty { text-align: center; padding: 60px 20px; color: var(--ink-2); }
.empty h2 { color: var(--ink); font-size: 20px; margin-bottom: 8px; }

/* ── ads ─────────────────────────────────────────────────────────────────── */

/* Labelled, because an advert dressed as content is the fastest way to lose
   the account that pays for it. Labelled very quietly, because the label is
   for honesty, not for attention. */
.ad { margin: 26px 0; text-align: center; min-width: 0; overflow: hidden; }
.ad .ad-l {
  display: block; margin-bottom: 6px;
  font-family: var(--body); font-size: 8.5px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-3); opacity: .35;
}
.ad > * { max-width: 100%; }

/* ── footer ──────────────────────────────────────────────────────────────── */

.ft { border-top: 1px solid var(--hair); margin-top: 56px; padding: 40px 0 30px; }
.ft-top { display: grid; grid-template-columns: 1fr; gap: 30px; }
.ft-d { font-size: 13.5px; color: var(--ink-3); margin: 14px 0 0; max-width: 40ch; line-height: 1.6; }
.ft-d a { color: var(--ink-2); border-bottom: 1px solid var(--hair-2); }
.ft-d a:hover { color: var(--gold); }
.ft h4 { font-family: var(--body); font-size: 10.5px; font-weight: 600; letter-spacing: .14em;
         text-transform: uppercase; color: var(--ink-3); margin-bottom: 13px; }
.ft ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
.ft li a { font-size: 13.5px; color: var(--ink-2); }
.ft li a:hover { color: var(--gold); }
.ft-bot {
  display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between;
  border-top: 1px solid var(--hair); margin-top: 34px; padding-top: 20px;
  font-size: 12px; color: var(--ink-3);
}

/* ── wider screens ───────────────────────────────────────────────────────── */

@media (min-width: 680px) {
  .hero { padding: 52px 0 4px; }
  .lead-rate { padding: 28px 30px 26px; }
  .board { grid-template-columns: 1fr 1fr; }
  .offers { grid-template-columns: 1fr 1fr; }
  .ft-top { grid-template-columns: 2fr 1fr 1fr; }
}

@media (min-width: 980px) {
  body { font-size: 15.5px; }
  .wrap { padding: 0 28px; }

  /* The headline rate and the three supporting figures sit side by side, with
     the rate given twice the room. Four equal boxes would say they matter
     equally, and they do not. */
  .headline { display: grid; grid-template-columns: 1.3fr 1fr; gap: 14px; align-items: stretch; }
  /* centred in its own height, so the figure sits with the three beside it
     rather than floating at the top of an empty box */
  .headline .lead-rate {
    margin: 0; display: flex; flex-direction: column; justify-content: center;
  }
  .stat { padding: 16px 20px; }

  .ex-list { grid-template-columns: 1fr 1fr; }
  .sec-h h2 { font-size: 22px; }
}