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


/* ==========================================================================
   NairaRate Pro UI Upgrade
   Visual-only enhancement layer. Existing PHP/JS functionality is unchanged.
   ========================================================================== */

:root{
  --pro-shadow: 0 18px 55px rgba(0,0,0,.24);
  --pro-shadow-soft: 0 8px 28px rgba(0,0,0,.18);
  --pro-gold-glow: 0 0 0 1px rgba(232,176,75,.10), 0 18px 50px rgba(232,176,75,.06);
}

html{scroll-behavior:smooth}
body{
  min-height:100vh;
  background:
    radial-gradient(70rem 34rem at 50% -12rem,rgba(232,176,75,.095),transparent 68%),
    radial-gradient(35rem 22rem at 100% 35%,rgba(74,222,155,.035),transparent 70%),
    var(--bg);
}
::selection{background:rgba(232,176,75,.25);color:var(--ink)}

.hd{
  background:rgba(10,10,11,.72);
  box-shadow:0 8px 30px rgba(0,0,0,.16);
}
.hd-in{height:68px}
.brand .mark{
  width:34px;height:34px;flex-basis:34px;border-radius:10px;
  box-shadow:0 8px 22px rgba(232,176,75,.16),inset 0 1px 0 rgba(255,255,255,.3);
}
.brand .bn{font-size:19px}
.hd-nav{gap:5px}
.hd-nav a{
  padding:9px 13px;
  border:1px solid transparent;
  transition:all .18s ease;
}
.hd-nav a:hover{
  color:var(--ink);
  background:rgba(255,255,255,.035);
  border-color:var(--hair);
}
.hd-nav a.on{
  color:var(--ink);
  background:rgba(232,176,75,.075);
  border-color:rgba(232,176,75,.18);
}
.hd-nav a.on::after{display:none}

.hero{padding:54px 0 12px}
.hero h1{
  font-size:clamp(32px,5.4vw,58px);
  letter-spacing:-.045em;
  text-wrap:balance;
}
.hero h1 em{
  background:linear-gradient(100deg,#f3c86b,var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero .lede{font-size:16px;line-height:1.7;color:#aaa6a0}

.stamp{
  background:rgba(255,255,255,.025);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}

.headline{gap:18px}
.lead-rate{
  box-shadow:var(--pro-gold-glow);
  background:
    radial-gradient(34rem 15rem at 90% 0,rgba(232,176,75,.11),transparent 68%),
    linear-gradient(180deg,rgba(255,255,255,.025),transparent 55%),
    var(--raise);
  border-color:rgba(232,176,75,.20);
  padding:28px 28px 25px;
}
.lead-rate::after{
  content:"";
  position:absolute;right:-90px;bottom:-120px;width:250px;height:250px;
  border:1px solid rgba(232,176,75,.07);border-radius:50%;
  box-shadow:0 0 0 34px rgba(232,176,75,.018),0 0 0 68px rgba(232,176,75,.012);
}
.lr-v{
  font-size:clamp(44px,7vw,76px);
  text-shadow:0 5px 35px rgba(255,255,255,.055);
}
.lr-s{max-width:54ch;line-height:1.6}

.stats{
  border-radius:var(--r-l);
  box-shadow:var(--pro-shadow-soft);
}
.stat{
  padding:18px 20px;
  background:linear-gradient(180deg,rgba(255,255,255,.018),transparent),var(--raise);
}
.stat .v{font-size:18px}

.sec-h{
  margin-top:52px;
  padding-bottom:14px;
}
.sec-h .no{
  background:rgba(232,176,75,.08);
  border:1px solid rgba(232,176,75,.13);
  padding:3px 6px;border-radius:6px;
}
.sec-h h2{letter-spacing:-.035em}

.board{gap:12px}
.ex{
  border-radius:14px;
  box-shadow:0 8px 25px rgba(0,0,0,.11);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.ex:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.13);
  box-shadow:0 14px 35px rgba(0,0,0,.20);
}
.ex.is-best{
  border-color:rgba(232,176,75,.40);
  box-shadow:0 10px 32px rgba(232,176,75,.045);
}
.ex-h{padding:16px 17px}
.ex-h h3{font-size:17px}
.ex-p .p{padding:15px 17px 16px}
.ex-p .p b{font-size:21px}
.ex-p .p.best{
  background:linear-gradient(180deg,rgba(232,176,75,.075),transparent);
}
.ex-p .p.best b{color:#f1d18c}
.ex-more summary{padding:12px 17px}
.offers{padding:0 17px 17px}

.go{
  border-radius:8px;
  transition:all .18s ease;
}
.go:hover{box-shadow:0 7px 20px rgba(232,176,75,.13)}

.calc{
  border-radius:16px;
  padding:20px;
  background:
    radial-gradient(30rem 12rem at 50% 0,rgba(232,176,75,.055),transparent 70%),
    var(--raise);
  box-shadow:var(--pro-shadow-soft);
}
.calc.big{padding:28px}
.calc-tabs{
  border-radius:12px;
  padding:5px;
  background:rgba(0,0,0,.25);
}
.calc-tabs button{
  border-radius:9px;
  padding:11px 12px;
  transition:all .18s ease;
}
.calc-tabs button.on{
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035));
  box-shadow:0 4px 16px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.06);
}
.calc-row input{
  min-height:58px;
  border-radius:11px;
  background:#0c0c0e;
  border-color:var(--hair-2);
  font-size:19px;
  padding:13px 15px;
  transition:border-color .18s,box-shadow .18s;
}
.calc-row input:focus{
  border-color:rgba(232,176,75,.65);
  box-shadow:0 0 0 4px rgba(232,176,75,.08);
}
.eq{font-family:var(--mono);color:var(--gold);font-size:18px}
.quick{gap:7px}
.quick button{
  border-radius:999px;
  transition:all .18s ease;
}
.quick button:hover{
  transform:translateY(-1px);
  border-color:rgba(232,176,75,.45);
  color:var(--gold);
  background:rgba(232,176,75,.06);
}

.tbl-w{
  border-radius:14px;
  box-shadow:var(--pro-shadow-soft);
  background:var(--raise);
}
.tbl th{background:rgba(255,255,255,.025)}
.tbl tbody tr{transition:background .16s ease}
.tbl tbody tr:hover td{background:rgba(232,176,75,.035)}
.tbl td{padding:14px 15px}

.ex-list{gap:14px}
.exc{
  border-radius:14px;
  box-shadow:var(--pro-shadow-soft);
  transition:transform .2s,border-color .2s,box-shadow .2s;
}
.exc:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.13);
  box-shadow:var(--pro-shadow);
}
.exc-h{padding:18px}
.exc-b{padding:18px}
.exc-p b{font-size:17px}

.prose{
  color:#9f9b95;
  font-size:15px;
  line-height:1.82;
}
.prose h2{color:var(--ink);font-size:22px;margin-top:30px}
.prose strong{color:#d9d5ce}

.ft{
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.012));
}
.ft-top{gap:36px}
.ft-bot{color:var(--ink-3)}

@media (max-width:759px){
  .hd-in{height:62px;padding-left:14px;padding-right:14px}
  .brand .bn{font-size:17px}
  .hd-nav{
    max-width:52vw;
    overflow-x:auto;
    scrollbar-width:none;
    padding-bottom:1px;
  }
  .hd-nav::-webkit-scrollbar{display:none}
  .hd-nav a{font-size:12.5px;padding:8px 10px}
  .hero{padding-top:38px}
  .headline{gap:12px}
  .lead-rate{padding:23px 20px}
  .stat{padding:15px 16px}
  .calc.big{padding:18px}
  .calc-row{gap:8px}
  .calc-row input{min-height:54px;font-size:17px}
  .eq{font-size:15px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}