/* ══════════════════════════════════════════════════════════════════════════
   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; }
}


/* ─────────────────────────────────────────────────────────────────────────
   AdSense-ready visual refresh
   Focus: readability, original utility content, clear navigation and
   comfortable spacing on mobile. This does not guarantee ad approval.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --bg: #f7f8fa;
  --raise: #ffffff;
  --raise-2: #f0f2f5;
  --hair: #e3e6eb;
  --hair-2: #d3d8df;
  --ink: #17202a;
  --ink-2: #5d6875;
  --ink-3: #7d8792;
  --gold: #a66a00;
  --gold-d: #7d4f00;
  --gold-t: rgba(166, 106, 0, .08);
  --mint: #16845a;
  --coral: #c34b3d;
  --r-s: 8px;
  --r-m: 14px;
  --r-l: 20px;
  --wrap: 1120px;
}

body {
  background: var(--bg);
  background-image: radial-gradient(70rem 28rem at 50% -16rem, rgba(166,106,0,.07), transparent 72%);
}

.hd {
  background: rgba(255,255,255,.94);
  border-bottom-color: var(--hair);
  box-shadow: 0 1px 8px rgba(23,32,42,.04);
}

.hd-in { height: 68px; }
.brand .mark {
  background: linear-gradient(150deg,#e5ad4b,#a66a00);
  color: #fff;
}
.brand .bn { color: var(--ink); }
.hd-nav { gap: 2px; }
.hd-nav a { color: var(--ink-2); padding: 9px 13px; }
.hd-nav a.on { color: var(--ink); background: #f4f5f7; }
.hd-nav a.on::after { bottom: 3px; left: 13px; right: 13px; border-radius: 99px; }

.hero { padding: 52px 0 14px; }
.hero h1 { max-width: 20ch; font-size: clamp(30px,5.5vw,50px); color: var(--ink); }
.hero h1 em { color: var(--gold); }
.hero .lede { color: var(--ink-2); font-size: 16px; max-width: 64ch; }
.stamp { background: rgba(255,255,255,.72); border-color: var(--hair); color: var(--ink-3); }

.lead-rate,
.stat,
.ex,
.calc,
.tbl-w,
.prose,
.empty,
.exc {
  background: var(--raise);
  border-color: var(--hair);
  box-shadow: 0 8px 28px rgba(23,32,42,.045);
}

.lead-rate {
  background: linear-gradient(180deg,rgba(166,106,0,.045),transparent 48%),#fff;
}
.lr-v { color: var(--ink); }
.lr-s, .stat .s, .prose { color: var(--ink-2); }

.sec-h {
  border-bottom-color: var(--hair);
  margin-top: 44px;
}
.sec-h h2 { color: var(--ink); }
.sec-h > span:last-child { color: var(--ink-3); }

.ex:hover, .exc:hover { border-color: #cbd1d8; box-shadow: 0 12px 34px rgba(23,32,42,.07); }
.ex.is-best { border-color: rgba(166,106,0,.42); }
.ex h3, .exc h2, .stat .v, .p b, .exc-p b { color: var(--ink); }
.tag { background: #f1f3f5; border-color: var(--hair); color: var(--ink-2); }
.go {
  background: #17202a;
  color: #fff;
  border-color: #17202a;
}
.go:hover { background: #2b3642; }
.p.best { background: #fbf5e9; border-color: #ead5ad; }
.p.best b, .p.best i { color: var(--gold-d); }
.good { color: var(--mint) !important; }
.bad { color: var(--coral) !important; }

.calc {
  background: #fff;
}
.calc-tabs { background: #f0f2f4; border-color: var(--hair); }
.calc-tabs button { color: var(--ink-2); }
.calc-tabs button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 4px rgba(23,32,42,.10); }
.calc-row input {
  background: #fbfcfd;
  color: var(--ink);
  border-color: var(--hair-2);
}
.calc-row input:focus { border-color: #c99a4c; box-shadow: 0 0 0 3px rgba(166,106,0,.10); }

.prose { line-height: 1.8; }
.prose h2 { color: var(--ink); margin-top: 2em; }
.prose a { color: var(--gold-d); text-decoration: underline; text-underline-offset: 3px; }

.ft {
  background: #17202a;
  color: #fff;
  border-top: 1px solid #2b3642;
  margin-top: 72px;
}
.ft-d, .ft-bot, .ft a { color: #b9c2cc; }
.ft h4 { color: #fff; }
.ft a:hover { color: #fff; }

.ad {
  margin: 28px auto;
  padding: 8px 0;
  min-height: 90px;
  text-align: center;
}
.ad-l {
  display: block;
  margin-bottom: 7px;
  color: var(--ink-3);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.pg-h { padding: 54px 0 18px; }
.pg-h h1 { color: var(--ink); font-size: clamp(30px,5vw,44px); }

@media (max-width: 700px) {
  .wrap { padding-left: 16px; padding-right: 16px; }
  .hd-in { height: auto; min-height: 64px; padding-top: 8px; padding-bottom: 8px; align-items: flex-start; }
  .hd-nav { flex-wrap: wrap; justify-content: flex-end; }
  .hd-nav a { padding: 7px 9px; font-size: 13px; }
  .hero { padding-top: 34px; }
  .hero h1 { font-size: 31px; }
  .lead-rate { padding: 20px 17px; }
  .lr-v { font-size: clamp(36px,11vw,58px); }
  .sec-h { align-items: flex-start; flex-wrap: wrap; gap: 7px; }
  .sec-h > span:last-child { width: 100%; margin-left: 34px; }
  .ft { margin-top: 48px; }
}

.ft-note{max-width:760px;padding:18px 0;border-top:1px solid #2b3642;color:#b9c2cc;font-size:13px;line-height:1.7}.ft-note strong{color:#fff}


/* FAQ cards — clean, rounded, screenshot-inspired accordion */
.faq-list{display:grid;gap:10px;margin:10px 0 0}
.faq-item{background:#fff;border:1px solid #e3e6eb;border-radius:14px;box-shadow:0 5px 18px rgba(23,32,42,.045);overflow:hidden;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
.faq-item:hover{border-color:#d0d6dd;box-shadow:0 8px 24px rgba(23,32,42,.065)}
.faq-item[open]{border-color:#d7dde3;box-shadow:0 8px 26px rgba(23,32,42,.065)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;min-height:58px;padding:17px 20px;font-size:16px;font-weight:700;color:#17202a;line-height:1.4}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::before{content:'›';width:22px;height:22px;display:grid;place-items:center;flex:0 0 22px;border-radius:50%;background:#f0f2f4;color:#5d6875;font-size:20px;line-height:1;transform:rotate(0deg);transition:transform .18s ease,background .18s ease,color .18s ease}
.faq-item[open] summary::before{content:'⌄';background:#e8f5ef;color:#008b5b;transform:none}
.faq-item summary:focus-visible{outline:3px solid rgba(0,139,91,.16);outline-offset:-3px}
.faq-a{padding:0 20px 19px 56px;color:#5d6875;font-size:15px;line-height:1.75}
.faq-a p{margin:0}
.faq-note{margin-top:28px;padding:18px 19px;background:#fff7f5;border:1px solid #f0b6ad;border-radius:14px;color:#17202a;font-size:14px;line-height:1.65}
.faq-note strong{font-weight:800}
@media(max-width:700px){
  .faq-item summary{padding:15px 16px;font-size:15px;min-height:54px}
  .faq-a{padding:0 16px 17px 52px;font-size:14px}
  .faq-note{padding:16px;font-size:13px}
}

.faq-heading{padding-bottom:16px}
.eyebrow{display:flex;align-items:center;gap:9px;margin-bottom:6px;color:#008b5b;font-size:12px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
.eyebrow-flag{width:24px;height:14px;border-radius:3px;display:inline-block;background:linear-gradient(90deg,#008b5b 0 33%,#fff 33% 66%,#008b5b 66% 100%);box-shadow:0 0 0 1px rgba(0,0,0,.05)}
.faq-heading h1{margin-top:0}

/* ── content-page polish ─────────────────────────────────────────────────── */
.wrap.narrow { max-width: 860px; }
.page-copy { max-width: none; padding: 30px 32px; background: var(--raise); border: 1px solid var(--hair); border-radius: var(--r-l); box-shadow: 0 8px 28px rgba(23,32,42,.045); }
.page-copy p { max-width: 72ch; }
.page-copy h2 { margin-top: 34px; }
.page-copy h2:first-child { margin-top: 0; }
.page-copy ul, .page-copy ol { max-width: 72ch; }
.page-copy.is-faq { padding: 0; background: transparent; border: 0; box-shadow: none; }
.page-copy.is-faq .faq-list { margin-top: 0; }
.faq-list { display: grid; gap: 12px; }
.faq-item { background: var(--raise); border: 1px solid var(--hair); border-radius: var(--r-m); box-shadow: 0 6px 20px rgba(23,32,42,.045); overflow: hidden; }
.faq-item:hover { border-color: var(--hair-2); box-shadow: 0 9px 26px rgba(23,32,42,.07); }
.faq-item[open] { border-color: rgba(166,106,0,.28); }
.faq-item summary { min-height: 62px; padding: 17px 20px; font-size: 16px; font-weight: 700; }
.faq-a { padding: 0 22px 21px 58px; max-width: 78ch; }
.faq-note { margin: 26px 0 0; }

/* Keep informational pages visually separate from ads and navigation. */
.page-copy + .upd { max-width: 860px; margin-left: auto; margin-right: auto; }

@media (max-width: 700px) {
  .wrap.narrow { max-width: 100%; }
  .page-copy { padding: 22px 18px; border-radius: var(--r-m); }
  .page-copy.is-faq { padding: 0; }
  .faq-item summary { padding: 15px 16px; font-size: 15px; }
  .faq-a { padding: 0 16px 18px 51px; font-size: 14px; }
}


/* v4 content-quality polish */
.page-copy { width: 100%; }
.page-copy p, .page-copy ul, .page-copy ol { max-width: 74ch; }
.page-copy h2 { font-size: 21px; line-height: 1.25; margin-bottom: 10px; }
.page-copy h2:not(:first-child) { padding-top: 8px; }
.page-copy li { line-height: 1.75; }
.page-copy::after { content: ""; display: block; clear: both; }

.guide-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.guide-card { display:block; background:#fff; border:1px solid var(--hair); border-radius:16px; padding:22px; box-shadow:0 7px 24px rgba(23,32,42,.045); transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; }
.guide-card:hover { transform:translateY(-2px); border-color:#cfd5dc; box-shadow:0 12px 30px rgba(23,32,42,.075); }
.guide-card .eyebrow { margin-bottom:9px; }
.guide-card h3 { color:var(--ink); font-size:19px; margin-bottom:9px; }
.guide-card p { color:var(--ink-2); font-size:14px; line-height:1.7; margin:0 0 16px; }
.guide-link { color:var(--gold-d); font-size:13px; font-weight:700; }

.page-intro { color:var(--ink-2); font-size:16px; max-width:70ch; margin:0 0 4px; }

@media(max-width:760px){
  .guide-grid { grid-template-columns:1fr; }
  .guide-card { padding:19px; }
}


/* v5 trust/contact polish */
.contact-email{display:inline-block;padding:12px 16px;border:1px solid var(--hair);border-radius:12px;background:#fbfcfd}.contact-email a{font-weight:700}.page-copy{width:100%;max-width:none;box-sizing:border-box;padding:34px 38px;border-radius:18px;background:#fff;border:1px solid var(--hair);box-shadow:0 8px 28px rgba(23,32,42,.045)}.page-copy p,.page-copy li{max-width:78ch}.page-copy h2{margin-top:2.1em}.faq-list{width:100%}.faq-item{border:1px solid var(--hair);border-radius:14px;background:#fff;margin:0 0 12px;overflow:hidden;box-shadow:0 4px 18px rgba(23,32,42,.035)}.faq-item summary{padding:19px 22px;font-weight:700;cursor:pointer;list-style:none}.faq-item summary::-webkit-details-marker{display:none}.faq-item summary:before{content:'›';display:inline-block;margin-right:12px;transform:rotate(0deg);font-size:20px;color:var(--gold)}.faq-item[open] summary:before{transform:rotate(90deg)}.faq-a{padding:0 22px 20px;color:var(--ink-2);line-height:1.8}.faq-note{margin-top:22px;padding:18px 20px;border:1px solid #efc5bf;border-radius:14px;background:#fff6f4;line-height:1.7}.faq-heading{padding-bottom:20px}.faq-heading h1{max-width:22ch}@media(max-width:700px){.page-copy{padding:24px 18px}.faq-item summary{padding:16px 17px}.faq-a{padding:0 17px 17px}}

.ft-note a{color:#fff;text-decoration:underline;text-underline-offset:2px}.ft-note a:hover{opacity:.85}