/* ============================================================
   Landing — the shopfront rate board
   ============================================================ */

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--nav-bg);
  border-bottom: 1px solid var(--rule-dark);
}
/* A single gold hairline under the bar. Cheap, and it lifts the whole header. */
.nav::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--rule-gold) 22%, var(--rule-gold) 78%, transparent);
}
.nav__in { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 1rem; }

.brand { display: flex; align-items: baseline; gap: .55rem; text-decoration: none; flex: none; }
.brand__mark {
  font-family: var(--display); font-size: 1.32rem; font-weight: 600;
  color: var(--on-dark); letter-spacing: -.03em;
}
.brand__mark em { font-style: normal; color: var(--gold-lit); }
.brand__hall {
  font-family: var(--mono); font-size: .58rem; letter-spacing: .18em;
  color: rgba(240,220,168,.6); border: 1px solid var(--rule-gold);
  padding: .14rem .4rem; border-radius: 2px; text-transform: uppercase;
}

/* Nav links as buttons. An underline that only appears on hover gives no
   hint that a thing is clickable until the pointer is already on it, which
   is no use at all on a phone. A visible outline says so at rest. */
.nav__links { display: flex; align-items: center; gap: .4rem; }
.nav__links a {
  color: rgba(252,249,240,.72); text-decoration: none;
  font-size: .84rem; font-weight: 500; white-space: nowrap;
  padding: .5rem .85rem; border-radius: 100px;
  border: 1px solid rgba(240,220,168,.16);
  background: rgba(252,249,240,.04);
  transition: color .16s var(--ease), background .16s var(--ease), border-color .16s var(--ease);
}
.nav__links a:hover {
  color: var(--gold-lit);
  background: rgba(192,138,46,.16);
  border-color: var(--rule-gold);
}
.nav__links a:focus-visible { outline: 2px solid var(--gold-lit); outline-offset: 2px; }

.nav__cta { display: flex; gap: .55rem; align-items: center; flex: none; }

/* Below the desktop breakpoint the links drop to their own scrolling row
   rather than disappearing — otherwise a phone gets no navigation at all. */
@media (max-width: 900px) {
  .nav__in { flex-wrap: wrap; height: auto; padding: .7rem 0 0; row-gap: .55rem; }
  .nav__links {
    order: 3; width: 100%; gap: .4rem;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding: .1rem 0 .65rem;
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
            mask-image: linear-gradient(90deg, #000 88%, transparent);
  }
  .nav__links::-webkit-scrollbar { display: none; }
  .nav__links a { font-size: .82rem; }
}

/* ---------- Hero: the board ---------- */
.hero {
  background: radial-gradient(1200px 620px at 82% -12%, rgba(192,138,46,.24), transparent 58%),
    radial-gradient(900px 500px at 8% 100%, rgba(32,75,62,.55), transparent 62%),
    linear-gradient(178deg, var(--ink) 0%, var(--forest) 100%);
  color: var(--on-dark); padding: 5rem 0 4.5rem; position: relative; overflow: hidden;
}
/* Faint horizontal ruling, like a ledger page held up to the light. */
.hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(0deg, rgba(240,220,168,.022) 0 1px, transparent 1px 4px);
}
.hero__in {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.02fr .98fr; gap: 4rem; align-items: center;
}

.hero h1 {
  font-size: clamp(2.4rem, 5.4vw, 4.1rem);
  color: var(--on-dark); margin-bottom: 1.2rem;
  letter-spacing: -.035em;
  font-variation-settings: 'SOFT' 22, 'WONK' 1;
  animation: rise .7s var(--ease) both;
}
.hero h1 em {
  font-style: italic;
  background: linear-gradient(96deg, var(--gold-lit), var(--gold-pale) 55%, var(--gold-lit));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--gold-lit);
}
.hero__lede {
  font-size: 1.06rem; color: rgba(252,249,240,.74);
  max-width: 46ch; margin-bottom: 2rem; line-height: 1.68;
  animation: rise .7s .08s var(--ease) both;
}
.hero__actions {
  display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: 2.4rem;
  animation: rise .7s .16s var(--ease) both;
}

.hero__trust {
  display: flex; gap: 0; flex-wrap: wrap; margin: 0;
  border-top: 1px solid var(--rule-dark); padding-top: 1.5rem;
  animation: rise .7s .24s var(--ease) both;
}
.hero__trust > div { padding-right: 2.2rem; margin-right: 2.2rem; border-right: 1px solid var(--rule-dark); }
.hero__trust > div:last-child { border-right: 0; padding-right: 0; margin-right: 0; }
.hero__trust dt {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .17em;
  text-transform: uppercase; color: rgba(240,220,168,.58); margin-bottom: .35rem;
}
.hero__trust dd {
  margin: 0; font-family: var(--mono); font-size: 1.3rem;
  color: var(--on-dark); font-variant-numeric: tabular-nums; letter-spacing: -.03em;
}

/* The board — the shopfront slate, with every book raised on it as its own
   card. Depth comes from four stacked shadows plus a light inset line along
   the top edge, which is what makes a surface read as lit from above. */
.board {
  background: linear-gradient(172deg, #0D211B 0%, #071411 100%);
  border: 1px solid rgba(232,190,104,.30);
  border-radius: 18px;
  padding: 1.6rem 1.4rem 1.35rem;
  box-shadow:
    inset 0 1px 0 rgba(240,220,168,.20),
    inset 0 -2px 0 rgba(0,0,0,.55),
    0 2px 4px rgba(0,0,0,.42),
    0 20px 44px rgba(0,0,0,.46),
    0 44px 88px rgba(0,0,0,.32);
  position: relative;
  animation: rise .8s .12s var(--ease) both;
}
/* The bracket it hangs from. */
.board::before {
  content: ''; position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  width: 40%; height: 12px;
  background: linear-gradient(180deg, rgba(240,220,168,.46), rgba(240,220,168,.08));
  border-radius: 5px 5px 0 0;
  box-shadow: 0 3px 8px rgba(0,0,0,.4);
}
.board__top {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 0 .3rem 1.1rem;
  border-bottom: 1px solid rgba(232,190,104,.22);
  margin-bottom: 1.1rem;
}
.board__title {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .24em;
  text-transform: uppercase; color: var(--gold-lit); font-weight: 600;
}
.board__month {
  font-family: var(--mono); font-size: .78rem; color: rgba(252,249,240,.72);
  letter-spacing: .04em; font-weight: 500;
}

/* Each book: a raised tile, not a table row. */
.board__row {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem;
  align-items: center;
  padding: 1.15rem 1.3rem;
  margin-bottom: .7rem;
  border: 1px solid rgba(240,220,168,.17);
  border-radius: 13px;
  background: linear-gradient(176deg, rgba(32,75,62,.52) 0%, rgba(9,26,21,.9) 100%);
  box-shadow:
    inset 0 1px 0 rgba(240,220,168,.17),
    inset 0 -1px 0 rgba(0,0,0,.5),
    0 1px 2px rgba(0,0,0,.38),
    0 7px 16px rgba(0,0,0,.34);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
  animation: rise .55s var(--ease) both;
}
.board__row:nth-child(1) { animation-delay: .08s; }
.board__row:nth-child(2) { animation-delay: .13s; }
.board__row:nth-child(3) { animation-delay: .18s; }
.board__row:nth-child(4) { animation-delay: .23s; }
.board__row:nth-child(5) { animation-delay: .28s; }
.board__row:nth-child(6) { animation-delay: .33s; }
.board__row:last-of-type { margin-bottom: 0; }
.board__row:hover {
  transform: translateY(-3px);
  border-color: rgba(232,190,104,.42);
  box-shadow:
    inset 0 1px 0 rgba(240,220,168,.24),
    inset 0 -1px 0 rgba(0,0,0,.5),
    0 2px 4px rgba(0,0,0,.4),
    0 14px 30px rgba(0,0,0,.42);
}

.board__name {
  font-family: var(--display); font-size: 1.3rem; font-weight: 700;
  color: #FCF9F0; letter-spacing: -.028em; line-height: 1.15;
  text-shadow: 0 1px 3px rgba(0,0,0,.55);
}
/* The amount is the number people actually look for, so it gets the gold. */
.board__range {
  font-family: var(--mono); font-size: .92rem; font-weight: 600;
  color: var(--gold-lit); display: block; margin-top: .34rem;
  letter-spacing: .01em; text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
/* ---- the monthly return, centred in the row ---- */
.board__return { text-align: center; justify-self: center; }
.board__return-val {
  display: block;
  font-family: var(--mono); font-size: 2.05rem; font-weight: 600;
  color: var(--gold-lit); font-variant-numeric: tabular-nums;
  letter-spacing: -.05em; line-height: 1;
  /* Scales in once, then stops. The breathing glow used to run here, on every
     figure, for ever — an animated text-shadow cannot be composited, so it
     repainted six elements on every frame of the page's life. It now belongs
     to the declared rows only, and runs a few times before settling. */
  animation: return-in .55s var(--ease) both;
}
.board__return-val sup { font-size: .74rem; margin-left: .08em; opacity: .72; top: -.8em; }
.board__return-val--none {
  color: rgba(252,249,240,.4); font-size: 1.5rem; animation: return-in .55s var(--ease) both;
}
.board__return-lab {
  display: block; margin-top: .5rem;
  font-family: var(--mono); font-size: .88rem; font-weight: 500;
  letter-spacing: -.01em; color: rgba(252,249,240,.78);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* A posted rate gets the brighter treatment; an indicative one stays calm. */
.board__return--live .board__return-val {
  text-shadow: 0 0 34px rgba(232,190,104,.5);
  animation: return-in .55s var(--ease) both, return-glow 3.4s .55s ease-in-out 3;
}
.board__return--live .board__return-lab { color: var(--gold-pale); }

/* Opens and closes on the resting shadow above, so the last pulse settles
   into it instead of snapping. */
@keyframes return-glow {
  0%, 100% { text-shadow: 0 0 34px rgba(232,190,104,.5); }
  50%      { text-shadow: 0 0 46px rgba(232,190,104,.66); }
}

@keyframes return-in {
  from { opacity: 0; transform: scale(.82); }
  to   { opacity: 1; transform: none; }
}

/* ---- the flag on the right ---- */
.board__flag {
  justify-self: end;
  font-family: var(--mono);
  font-size: .58rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(252,249,240,.62);
  background: rgba(252,249,240,.06);
  border: 1px solid rgba(252,249,240,.2);
  padding: .4rem .72rem; border-radius: 100px; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}
.board__flag--live {
  color: #2A1A03;
  background: linear-gradient(178deg, var(--gold-lit), var(--gold));
  border-color: var(--gold-lit);
  box-shadow: inset 0 1px 0 rgba(255,244,214,.5), 0 0 18px rgba(232,190,104,.35);
}

.board__foot {
  margin: 1.2rem .3rem 0; padding-top: 1rem;
  border-top: 1px solid rgba(232,190,104,.22);
  font-size: .76rem; color: rgba(252,249,240,.56); line-height: 1.6;
}

@media (max-width: 980px) {
  .hero { padding: 3.5rem 0 3.5rem; }
  .hero__in { grid-template-columns: 1fr; gap: 3rem; }
  .board { padding: 1.6rem 1.35rem 1.2rem; }
}
@media (max-width: 560px) {
  .hero { padding: 2.75rem 0 3rem; }
  .hero h1 { margin-bottom: 1rem; }
  .hero__lede { font-size: 1rem; margin-bottom: 1.6rem; }
  .hero__actions { gap: .6rem; margin-bottom: 2rem; }
  .hero__actions .btn { flex: 1 1 100%; }

  .hero__trust {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 1.15rem 0; padding-top: 1.2rem;
  }
  .hero__trust > div { padding-right: 1rem; margin-right: 0; }
  .hero__trust > div:nth-child(2n),
  .hero__trust > div:last-child { border-right: 0; }
  .hero__trust dd { font-size: 1.12rem; }

  .board { padding: 1.3rem 1rem 1.1rem; border-radius: 15px; }
  .board__top { padding-bottom: .9rem; margin-bottom: .9rem; }
  .board__name { font-size: 1.1rem; }
  .board__range { font-size: .84rem; }

  /* Three columns will not fit a phone. Name and return sit side by side,
     and the flag drops to its own line beneath them. */
  .board__row {
    grid-template-columns: 1fr auto;
    grid-template-areas: 'name return' 'flag flag';
    row-gap: .75rem; column-gap: .7rem;
    padding: .95rem 1rem; margin-bottom: .6rem; border-radius: 11px;
  }
  .board__row > :first-child { grid-area: name; }
  .board__return { grid-area: return; justify-self: end; text-align: right; }
  .board__return-val { font-size: 1.7rem; }
  /* Restated after the base: same specificity, so the later rule wins. The
     em-dash placeholder must stay small even at phone width. */
  .board__return-val--none { font-size: 1.25rem; }
  .board__return-lab { font-size: .76rem; margin-top: .34rem; }
  .board__flag { grid-area: flag; justify-self: start; font-size: .54rem; padding: .34rem .6rem; }
}

/* ---------- Sections ---------- */
.sec { padding: 6rem 0; }
.sec--paper2 { background: var(--paper-2); }
.sec--forest {
  background: radial-gradient(800px 400px at 85% 0%, rgba(192,138,46,.1), transparent 60%),
    var(--forest);
  color: var(--on-dark);
}
.sec__head { max-width: 60ch; margin-bottom: 3rem; }
.sec__head h2 { font-size: clamp(1.85rem, 3.6vw, 2.7rem); margin-bottom: .9rem; letter-spacing: -.032em; }
.sec__head p { color: var(--text-2); font-size: 1.04rem; margin: 0; line-height: 1.68; }
.sec--forest .sec__head p { color: rgba(252,249,240,.7); }
.sec--forest .sec__head h2 { color: var(--on-dark); }
@media (max-width: 720px) {
  .sec { padding: 3.75rem 0; }
  .sec__head { margin-bottom: 2rem; }
}

/* ---------- Plan cards ---------- */
/* ---------- The stages: a list to pick from, a panel to read ----------
   Six full cards side by side forced every shared term to be printed six
   times, which is what made them tall and uneven. One panel at a time means
   each stage can be read in full without any of it being hidden or repeated. */
.picker { display: grid; grid-template-columns: 300px 1fr; gap: 1.3rem; align-items: stretch; }

.picker__list {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-lg);
  padding: .5rem; display: flex; flex-direction: column; gap: .2rem;
  box-shadow: inset 0 1px 0 var(--lift), 0 8px 20px rgba(7,20,17,.07);
}
/* Each row grows to share the panel's height, so the two columns end level
   and the rows get room to breathe rather than huddling at the top. */
.picker__item {
  flex: 1; min-height: 68px;
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: .2rem .8rem; width: 100%; text-align: left;
  background: transparent; border: 1px solid transparent; border-radius: 11px;
  padding: .8rem 1rem; cursor: pointer; font-family: var(--body);
  position: relative;
  transition: background .16s var(--ease), border-color .16s var(--ease), transform .16s var(--ease);
}
/* The pale wash suits the light rows only. The gold row keeps its own dark
   ground on hover — without this exclusion the wash wins on specificity and
   the light text is left sitting on a light background. */
.picker__item:not(.picker__item--flag):hover { background: rgba(192,138,46,.08); }
.picker__item:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.picker__no {
  grid-column: 1; font-family: var(--mono); font-size: .72rem; letter-spacing: .16em;
  color: var(--text-4); font-weight: 500;
}
.picker__nm {
  grid-column: 1; font-family: var(--display); font-weight: 700;
  font-size: 1.32rem; letter-spacing: -.025em; color: var(--text); line-height: 1.15;
}
.picker__amt {
  grid-column: 2; grid-row: 1 / span 2; align-self: center;
  font-family: var(--mono); font-size: .98rem; font-weight: 600;
  color: var(--text-3); white-space: nowrap;
}
.picker__item--on {
  background: linear-gradient(178deg, var(--paper-2), rgba(244,237,219,.55));
  border-color: var(--gold);
  box-shadow: inset 0 2px 5px rgba(7,20,17,.06);
}
.picker__item--on .picker__amt { color: var(--gold-deep); }
.picker__item--on:hover {
  background: linear-gradient(178deg, var(--paper-3), var(--paper-2));
}
/* A wedge on the selected row, pointing at the panel it opened. */
.picker__item--on::after {
  content: ''; position: absolute; right: -.5rem; top: 50%;
  width: 10px; height: 10px; transform: translateY(-50%) rotate(45deg);
  background: var(--paper-2); border-right: 1px solid var(--gold); border-top: 1px solid var(--gold);
}
/* The top stage keeps its gold whether or not it is the one being read. */
.picker__item--flag {
  background: linear-gradient(120deg, var(--forest-2), var(--ink));
  border-color: var(--rule-gold);
}
.picker__item--flag .picker__no { color: var(--gold-lit); }
.picker__item--flag .picker__nm { color: var(--on-dark); }
.picker__item--flag .picker__amt { color: var(--gold-lit); }
.picker__item--flag:hover {
  border-color: var(--gold);
  background: linear-gradient(120deg, var(--forest-3), var(--forest));
  box-shadow: 0 0 20px rgba(192,138,46,.18);
}
.picker__item--flag.picker__item--on {
  border-color: var(--gold);
  box-shadow: inset 0 1px 0 rgba(240,220,168,.24), 0 0 26px rgba(192,138,46,.26);
}
.picker__item--flag.picker__item--on::after {
  background: var(--ink); border-color: var(--gold);
}

/* The panel. Raised, with the same stack the calculator readout uses. */
.picker__detail {
  background: linear-gradient(178deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--paper-3); border-radius: var(--r-lg);
  padding: 2.1rem 2rem;
  display: flex; flex-direction: column;
  box-shadow:
    inset 0 1px 0 var(--lift),
    0 1px 2px rgba(7,20,17,.06),
    0 8px 18px rgba(7,20,17,.08),
    0 22px 46px rgba(7,20,17,.07);
}
.picker__detail--flag {
  background: radial-gradient(680px 340px at 82% -6%, rgba(192,138,46,.28), transparent 62%),
    linear-gradient(172deg, #17372E 0%, #071411 100%);
  border-color: var(--gold);
  box-shadow:
    inset 0 1px 0 rgba(240,220,168,.28),
    inset 0 -2px 0 rgba(0,0,0,.5),
    0 2px 4px rgba(0,0,0,.3),
    0 20px 42px rgba(7,20,17,.28),
    0 44px 88px rgba(7,20,17,.2),
    0 0 70px rgba(192,138,46,.14);
}

.picker__tier {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold-text); font-weight: 600;
}
.picker__title { font-size: 2.6rem; margin: .5rem 0 .35rem; letter-spacing: -.035em; }
.picker__tag { font-size: 1.08rem; color: var(--text-2); margin: 0 0 1.5rem; line-height: 1.55; }
.picker__detail--flag .picker__tier { color: var(--gold-lit); }
.picker__detail--flag .picker__title { color: var(--on-dark); }
.picker__detail--flag .picker__tag { color: rgba(252,249,240,.7); }

.picker__stats {
  display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; margin: 0 0 1.6rem;
  padding: 1.4rem 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.picker__stats dt {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--text-3); margin-bottom: .45rem; font-weight: 600;
}
.picker__stats dd {
  margin: 0; font-family: var(--mono); font-size: 1.75rem; font-weight: 600;
  color: var(--figure); font-variant-numeric: tabular-nums; letter-spacing: -.04em; line-height: 1;
}
/* The two figures are the point of the whole card, so they get room: the
   numeral large, the per-cent sign smaller and lifted so it reads as a unit
   rather than a third digit, and a wide gap either side of "to". */
.picker__band {
  color: var(--gold-deep) !important;
  display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap;
}
.picker__fig {
  display: inline-flex; align-items: baseline;
  font-size: 2.5rem; font-weight: 600; letter-spacing: -.045em; line-height: 1;
}
.picker__fig em {
  font-style: normal; font-size: .48em; font-weight: 500;
  opacity: .62; margin-left: .06em; transform: translateY(-.55em);
}
.picker__band i {
  font-style: normal; font-family: var(--body); font-size: .8rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; opacity: .5;
  align-self: center; padding: 0 .1rem;
}
.picker__detail--flag .picker__stats { border-color: var(--rule-gold); }
.picker__detail--flag .picker__stats dt { color: rgba(240,220,168,.62); }
.picker__detail--flag .picker__stats dd { color: var(--on-dark); }
.picker__detail--flag .picker__band {
  color: var(--gold-lit) !important; text-shadow: 0 0 34px rgba(232,190,104,.5);
}
.picker__detail--flag .picker__band i { color: var(--gold-pale); opacity: .65; text-shadow: none; }

.picker__perks { list-style: none; padding: 0; margin: 0 0 1.5rem; columns: 2; column-gap: 2.4rem; }
.picker__perks li {
  font-size: 1.02rem; color: var(--text-2); padding-left: 1.5rem;
  position: relative; margin-bottom: .78rem; line-height: 1.5; break-inside: avoid;
}
.picker__perks li::before {
  content: ''; position: absolute; left: .15rem; top: .55em;
  width: 7px; height: 7px; border-radius: 1px;
  background: linear-gradient(135deg, var(--gold-lit), var(--gold)); transform: rotate(45deg);
}
.picker__detail--flag .picker__perks li { color: rgba(252,249,240,.86); }
.picker__detail--flag .picker__perks li::before {
  background: linear-gradient(135deg, #FFEDBE, var(--gold-lit));
  box-shadow: 0 0 8px rgba(232,190,104,.5);
}

.picker__note {
  font-family: var(--mono); font-size: .82rem; color: var(--text-3);
  margin: 0 0 1.3rem;
}
.picker__detail--flag .picker__note { color: rgba(252,249,240,.52); }

/* The button settles to the bottom, so it lines up whichever stage is open. */
.picker__detail .btn { margin-top: auto; font-size: 1rem; padding: .95rem 1.4rem; }

@media (max-width: 980px) {
  .picker { grid-template-columns: 260px 1fr; gap: 1rem; }
  .picker__title { font-size: 2.15rem; }
  .picker__nm { font-size: 1.18rem; }
  .picker__stats dd { font-size: 1.45rem; }
  .picker__fig { font-size: 2.1rem; }
}

@media (max-width: 820px) {
  /* The list becomes a scrolling strip above the panel; a sidebar and a
     readable panel cannot both fit a phone. */
  .picker { grid-template-columns: 1fr; gap: .9rem; }
  .picker__list {
    flex-direction: row; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; gap: .45rem; padding: .45rem;
  }
  .picker__list::-webkit-scrollbar { display: none; }
  .picker__item {
    grid-template-columns: auto; flex: 0 0 auto; padding: .7rem 1rem;
    min-width: 122px; min-height: 0;
  }
  .picker__item--on::after { display: none; }
  .picker__amt { grid-column: 1; grid-row: auto; font-size: .9rem; }
  .picker__nm { font-size: 1.14rem; }
  .picker__perks { columns: 1; }
  .picker__perks li { font-size: .96rem; }
  .picker__detail { padding: 1.5rem 1.3rem; }
  .picker__title { font-size: 1.95rem; }
  .picker__tag { font-size: 1rem; }
  .picker__stats { gap: 1.2rem 2rem; padding: 1.15rem 0; }
  .picker__stats dd { font-size: 1.35rem; }
  .picker__fig { font-size: 1.9rem; }
  .picker__band { gap: .4rem; }
}

/* ---------- Calculator ----------
   Two cards facing each other: what you set on the left, what it works out to
   on the right. The left is raised and light, the right is raised and dark, so
   the pair reads as a control panel and its readout. */
.calc { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: stretch; }
@media (max-width: 900px) { .calc { grid-template-columns: 1fr; gap: 1.5rem; } }

.calc__panel {
  display: flex; flex-direction: column;
  background: linear-gradient(178deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--paper-3);
  border-radius: 16px;
  padding: 1.9rem 1.7rem;
  position: relative;
  box-shadow:
    inset 0 1px 0 var(--lift),
    0 1px 2px rgba(7,20,17,.06),
    0 8px 18px rgba(7,20,17,.08),
    0 22px 46px rgba(7,20,17,.07);
}
/* A gold hairline along the top, so the pair is visually bound together. */
.calc__panel::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-lit));
  border-radius: 16px 16px 0 0;
}

/* Controls sit pressed into the card — the opposite of the card's own lift. */
.calc__panel .input,
.calc__panel select.input {
  background: linear-gradient(178deg, var(--surface-2), var(--surface));
  box-shadow: inset 0 2px 4px rgba(7,20,17,.07), inset 0 -1px 0 var(--lift);
}
.calc__panel .input:focus {
  box-shadow: inset 0 2px 4px rgba(7,20,17,.06), 0 0 0 3px rgba(192,138,46,.16);
}
.calc__panel .field { margin-bottom: 1.5rem; }
.calc__panel .field:last-child { margin-bottom: 0; }

/* The readout. Deeper stack than any other card, because it is the answer. */
.calc__out {
  display: flex; flex-direction: column;
  background: radial-gradient(700px 340px at 82% -8%, rgba(192,138,46,.26), transparent 62%),
    linear-gradient(172deg, #17372E 0%, #071411 100%);
  color: var(--on-dark);
  border: 1px solid var(--gold);
  border-radius: 16px;
  padding: 1.9rem 1.7rem;
  position: relative; overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(240,220,168,.28),
    inset 0 -2px 0 rgba(0,0,0,.55),
    0 2px 4px rgba(0,0,0,.3),
    0 20px 42px rgba(7,20,17,.28),
    0 44px 88px rgba(7,20,17,.22),
    0 0 70px rgba(192,138,46,.14);
}
.calc__out::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-lit), var(--gold));
}
.calc__out .eyebrow { color: var(--gold-lit); margin-bottom: 1.1rem; }

.calc__big {
  font-family: var(--mono); font-size: clamp(2.3rem, 5.4vw, 3.4rem); font-weight: 600;
  color: var(--gold-lit); font-variant-numeric: tabular-nums;
  letter-spacing: -.055em; line-height: 1; margin: .3rem 0 .45rem;
  text-shadow: 0 0 40px rgba(232,190,104,.42), 0 2px 6px rgba(0,0,0,.5);
}
.calc__sub { font-size: .86rem; color: rgba(252,249,240,.66); margin-bottom: 1.7rem; line-height: 1.62; }

/* Each line is its own inset row, so the breakdown scans like an app readout
   rather than a paragraph of figures. */
.calc__lines { border-top: 1px solid var(--rule-gold); padding-top: 1.1rem; margin-top: auto; }
.calc__line {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .72rem .9rem; margin-bottom: .45rem;
  font-size: .88rem;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(240,220,168,.09);
  border-radius: 9px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.3);
}
.calc__line:last-child {
  margin-bottom: 0;
  background: rgba(192,138,46,.14);
  border-color: var(--rule-gold);
}
.calc__line span:first-child { color: rgba(252,249,240,.68); }
.calc__line span:last-child {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  letter-spacing: -.025em; font-weight: 600; color: var(--on-dark);
}
.calc__line:last-child span:last-child { color: var(--gold-lit); }

@media (max-width: 560px) {
  .calc__panel, .calc__out { padding: 1.45rem 1.25rem; border-radius: 14px; }
  .calc__line { padding: .65rem .8rem; font-size: .84rem; }
}

/* ---------- How it works ---------- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(218px, 1fr)); gap: 1.8rem; counter-reset: s; }
.step { counter-increment: s; padding-top: 1.4rem; border-top: 1px solid var(--rule-gold); position: relative; }
.step::after {
  content: ''; position: absolute; top: -1px; left: 0; width: 34px; height: 2px;
  background: var(--gold);
}
.step::before {
  content: counter(s, decimal-leading-zero);
  font-family: var(--mono); font-size: .74rem; letter-spacing: .14em;
  color: var(--gold-lit); display: block; margin-bottom: .85rem;
}
.step h3 { font-size: 1.14rem; color: var(--on-dark); margin-bottom: .5rem; letter-spacing: -.02em; }
.step p { font-size: .875rem; color: rgba(252,249,240,.66); margin: 0; line-height: 1.62; }

/* ---------- Rate history table ---------- */
.history-filters {
  display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap;
  margin-bottom: 1.4rem;
}
.history-filters .field { margin-bottom: 0; min-width: 150px; }
.history-count {
  margin: 0 0 .55rem auto;
  font-family: var(--mono); font-size: .74rem;
  color: var(--text-3); letter-spacing: .02em;
}
@media (max-width: 560px) {
  .history-filters { gap: .75rem; }
  .history-filters .field { flex: 1 1 44%; min-width: 0; }
  .history-count { margin: .2rem 0 0; flex: 1 1 100%; }
}
/* A month with nothing declared is left visibly empty rather than hidden. */
.history-blank { color: var(--text-4); font-family: var(--mono); }

.history-card {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.history-card th, .history-card td { padding: .85rem 1.1rem; }
.history-card thead { background: var(--paper-2); }
.rate-cell {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-weight: 600; color: var(--figure); letter-spacing: -.02em;
}

/* ---------- Disclosure ---------- */
.disclosure {
  background: linear-gradient(168deg, var(--paper-2), rgba(244,237,219,.55));
  border: 1px solid var(--paper-3);
  border-left: 3px solid var(--gold); border-radius: var(--r);
  padding: 1.6rem 1.8rem;
}
.disclosure h4 {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold-deep); margin-bottom: .9rem; font-weight: 600;
}
.disclosure p { font-size: .875rem; color: var(--text-2); line-height: 1.72; margin-bottom: .75rem; }
.disclosure p:last-child { margin-bottom: 0; }
@media (max-width: 560px) { .disclosure { padding: 1.25rem 1.3rem; } }

/* ---------- FAQ ---------- */
.faq details {
  border-bottom: 1px solid var(--rule); padding: 1.3rem 0;
  transition: background .2s var(--ease);
}
.faq summary {
  cursor: pointer; font-family: var(--display); font-size: 1.08rem;
  font-weight: 600; list-style: none; display: flex; justify-content: space-between;
  gap: 1rem; align-items: center; letter-spacing: -.02em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; color: var(--gold); font-family: var(--mono); font-size: 1.35rem;
  line-height: 1; flex: none; transition: transform .25s var(--ease);
}
.faq details[open] summary::after { content: '\2013'; transform: rotate(180deg); }
.faq details p { margin: .95rem 0 0; font-size: .92rem; color: var(--text-2); max-width: 68ch; line-height: 1.72; }

/* ---------- Footer ---------- */
.foot {
  background: var(--ink); color: rgba(252,249,240,.58);
  padding: 4rem 0 3.5rem; font-size: .875rem;
  border-top: 1px solid var(--rule-gold);
}
.foot__grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr; gap: 3rem; margin-bottom: 0; }
@media (max-width: 760px) { .foot__grid { grid-template-columns: 1fr; gap: 2.2rem; } }
.foot h5 {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold-lit); margin: 0 0 1rem; font-weight: 600;
}
.foot a { color: rgba(252,249,240,.58); text-decoration: none; transition: color .16s var(--ease); }
.foot a:hover { color: var(--gold-lit); }
.foot ul { list-style: none; padding: 0; margin: 0; }
.foot li { margin-bottom: .6rem; }

/* ---------- Auth pages ---------- */
.auth-page {
  min-height: 100vh; min-height: 100dvh;
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--paper);
}
@media (max-width: 900px) { .auth-page { grid-template-columns: 1fr; } .auth-aside { display: none; } }
.auth-aside {
  background: radial-gradient(760px 440px at 28% 8%, rgba(192,138,46,.24), transparent 60%),
    linear-gradient(168deg, var(--ink), var(--forest));
  color: var(--on-dark); padding: 3.5rem;
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
}
.auth-aside::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(0deg, rgba(240,220,168,.02) 0 1px, transparent 1px 4px);
}
.auth-aside > * { position: relative; z-index: 1; }
.auth-aside h2 { font-size: 2.15rem; color: var(--on-dark); margin-bottom: 1rem; letter-spacing: -.035em; }
.auth-aside p { color: rgba(252,249,240,.68); max-width: 40ch; line-height: 1.68; }
.auth-main { display: flex; align-items: center; justify-content: center; padding: 3rem 1.5rem; }
.auth-box { width: min(100%, 410px); }
.auth-box h1 { font-size: 2rem; margin-bottom: .5rem; letter-spacing: -.035em; }
.auth-box > p { color: var(--text-3); font-size: .93rem; margin-bottom: 2rem; line-height: 1.6; }
.auth-alt { text-align: center; margin-top: 1.6rem; font-size: .875rem; color: var(--text-3); }
.auth-alt a { color: var(--gold-deep); font-weight: 600; text-decoration: none; }
.auth-alt a:hover { text-decoration: underline; }

/* Mobile nav trims: keep the brand on one line, drop the greeting. */
@media (max-width: 620px) {
  .brand__mark { font-size: 1.06rem; white-space: nowrap; }
  .brand__hall { display: none; }
  .nav__hi { display: none !important; }
  .nav__cta .btn { padding: .52rem .82rem; font-size: .78rem; }
}
@media (max-width: 400px) {
  .brand__mark { font-size: .95rem; }
  .nav__cta { gap: .4rem; }
  .nav__cta .btn { padding: .5rem .68rem; font-size: .74rem; }
}