/* ==========================================================================
   USARateHub - style.css
   Mobile-first. min-width queries only. max-width queries are a fail.

   STRUCTURAL RULE, load-bearing:
   The page is ONE continuous white surface, broken exactly twice by a
   full-bleed dark band (the rate stats, and the footer). Sections are
   separated by whitespace, heading scale and 1px hairlines. Nothing else.
   Do not add a background colour to a section. That is what made every
   earlier draft read as a stack of rectangular slabs.

   CONTAINER BUDGET: 1. The quote form. Nothing else gets a box.
   KEYFRAME BUDGET: 7, all spent (uh-rise, uh-draw, uh-fade, spin,
   uh-drift, uh-bob, uh-flap). New keyframes are budget-negative:
   adding one requires deleting one.
   ========================================================================== */

/* --- base ----------------------------------------------------------------*/

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--card);
  color: var(--text);
  font-family: var(--fb);
  font-size: var(--t-body);
  line-height: 1.65;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--fd);
  font-weight: 600;
  color: var(--ink);
}
h1 { font-size: var(--t-h1); line-height: 1.04; letter-spacing: -.03em; }
h2 { font-size: var(--t-h2); line-height: 1.12; letter-spacing: -.025em; }
h3 { font-size: var(--t-h3); line-height: 1.20; letter-spacing: -.02em; }

p  { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* Every numeral on the site is the display face with tabular figures.
   Numbers are the product. If tnum is dropped from the font subset this
   silently no-ops and every rate column goes ragged. */
.num {
  font-family: var(--fd);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  color: var(--ink);
}

.eyebrow {
  font-family: var(--fb);
  font-size: var(--t-eyebrow);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: var(--gut); top: -100px; z-index: 100;
  background: var(--card); color: var(--accent-deep);
  padding: var(--s3) var(--s4); border-radius: var(--r);
  box-shadow: var(--sh-sm);
}
.skip:focus { top: var(--s2); }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}
.band--navy :focus-visible,
.band--ink  :focus-visible { outline-color: var(--focus-dark); }

/* --- layout --------------------------------------------------------------*/

.wrap {
  width: 100%;
  max-width: var(--w);
  margin-inline: auto;
  padding-inline: var(--gut);
}

/* A section. No background. Ever. Separation is whitespace + type. */
.sec { padding-block: var(--sec-y); }

/* Density contrast is what separates sections when colour cannot.
   The list sections are deliberately tighter than the airy ones. */
.sec--tight { padding-block: var(--s6) var(--s5); }
@media (min-width: 900px) { .sec--tight { padding-block: var(--s7) var(--s6); } }

.sec__head { margin-bottom: var(--s5); }
.sec__head p { margin-top: var(--s2); color: var(--muted); max-width: var(--w-narrow); }

/* The two exceptions to the one-surface rule. Full-bleed, never inset,
   never rounded, never with a gap above them. */
.band { padding-block: var(--sec-y); }
.band--navy { background: var(--navy); }
.band--ink  { background: var(--ink); }
.band--navy h2, .band--ink h2 { color: #fff; }

/* --- header --------------------------------------------------------------*/

.hdr {
  position: sticky; top: 0; z-index: 40;
  height: var(--hdr-h);
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
.hdr .wrap { display: flex; align-items: center; justify-content: space-between; height: 100%; }

.brand {
  font-family: var(--fd); font-weight: 600; font-size: 1.125rem;
  letter-spacing: -.02em; color: var(--ink); text-decoration: none;
}
.brand b { color: var(--accent); font-weight: 600; }

/* header lockup: the D4 keyhole mark + live-text wordmark */
.brand--mark { display: inline-flex; align-items: center; gap: 10px; }
.brand--mark img { display: block; border-radius: 8px; }

.hdr__nav { display: none; }
@media (min-width: 900px) {
  .hdr__nav { display: flex; gap: var(--s5); align-items: center; }
  .hdr__nav a {
    color: var(--ink-soft); text-decoration: none; font-size: .9375rem;
    transition: color 160ms var(--ease);
  }
}
@media (hover: hover) and (pointer: fine) {
  .hdr__nav a:hover { color: var(--accent); }
}

/* Mobile menu: a zero-JS <details> disclosure. Never ship a button that
   announces expandable state it cannot deliver - <details> manages the
   expanded state natively for keyboard and screen readers. */
.hdr__dd { position: relative; }
.hdr__dd summary {
  display: grid; place-items: center; list-style: none;
  width: 40px; height: 40px; margin-right: calc(var(--s2) * -1);
  cursor: pointer; color: var(--ink); border-radius: var(--r);
}
.hdr__dd summary::-webkit-details-marker { display: none; }
.hdr__dd svg { display: block; }
.hdr__dd nav {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 50;
  min-width: 220px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  padding: var(--s3);
}
.hdr__dd nav a {
  display: block; padding: var(--s3) var(--s4);
  color: var(--ink-soft); text-decoration: none;
  font-size: .9375rem; border-radius: var(--r);
}
.hdr__dd nav a:active { background: var(--paper); }
@media (hover: hover) and (pointer: fine) {
  .hdr__dd nav a:hover { background: var(--paper); color: var(--accent-deep); }
}
@media (min-width: 900px) { .hdr__dd { display: none; } }

/* --- hero ----------------------------------------------------------------*/
/* Left-aligned on purpose. Centred hero copy plus centred everything else
   is a major contributor to the stacked-slab read. */

.hero { padding-block: var(--s7) var(--s6); }

.hero h1 { margin-block: var(--s3) 0; max-width: 15ch; }

.hero__lead {
  margin-top: var(--s4);
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--text);
  max-width: 46ch;
}

/* One inline row, not three boxes. */
.hero__trust {
  display: flex; flex-wrap: wrap;
  gap: var(--s3) var(--s5);
  margin-top: var(--s5);
}
.hero__trust li {
  display: flex; align-items: center; gap: var(--s2);
  font-size: var(--t-small); color: var(--muted);
}
.hero__trust svg { flex: none; color: var(--accent); }

@media (min-width: 900px) {
  .hero .wrap {
    display: grid; grid-template-columns: 1fr 420px;
    gap: var(--s9); align-items: start;
  }
  .hero { padding-block: var(--s8) var(--s7); }
}

/* --- the one container: the quote form -----------------------------------*/
/* Defined by its outline alone, sitting on the white page. No shadow. */

.quote {
  margin-top: var(--s6);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s5);
}
@media (min-width: 900px) {
  .quote { margin-top: 0; padding: var(--s6); position: sticky; top: calc(var(--hdr-h) + var(--s5)); }
}

.quote h2 { font-size: 1.125rem; letter-spacing: -.02em; }
.quote__sub { margin-top: var(--s1); font-size: var(--t-small); color: var(--muted); }

.field { margin-top: var(--s5); }
.field > label { display: block; margin-bottom: var(--s1); }

/* Fields are not boxed. Label above a value with one hairline under it,
   like a paper form. Fewer paint layers than three bordered inputs. */
.field__ctl { position: relative; }
.field__ctl select,
.field__ctl input {
  width: 100%;
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: var(--s2) 0;
  font-family: var(--fb);
  font-size: 1.0625rem;
  color: var(--ink);
  transition: border-color 160ms var(--ease);
}
.field__ctl select { padding-right: var(--s5); cursor: pointer; }
.field__ctl input::placeholder { color: var(--muted); }
.field__ctl select:focus,
.field__ctl input:focus { outline: 0; border-bottom-color: var(--accent); }
.field__ctl select:focus-visible,
.field__ctl input:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }

.field__ctl svg {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  pointer-events: none; color: var(--muted);
}

.quote__note {
  margin-top: var(--s4);
  font-size: var(--t-small);
  color: var(--muted);
  text-align: center;
}

/* --- buttons -------------------------------------------------------------*/

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding-inline: var(--s5);
  border: 0; border-radius: var(--pill);
  font-family: var(--fb); font-size: .9375rem; font-weight: 700;
  letter-spacing: .01em; text-decoration: none; cursor: pointer;
  transition: background-color 160ms var(--ease),
              box-shadow 160ms var(--ease),
              transform 160ms var(--ease);
}
.btn--primary { background: var(--accent); color: #fff; box-shadow: var(--sh-sm); }
.btn--block   { width: 100%; }
.btn--lg      { min-height: 56px; padding-inline: var(--s6); }

@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: var(--accent-deep); transform: translateY(-1px); box-shadow: var(--sh-btn-hover); }
}
.btn--primary:active { transform: translateY(0); box-shadow: none; }

/* Text link with a chevron. Used instead of a button inside list rows,
   so an offer row stays a row and never becomes a card. */
.link-cta {
  display: inline-flex; align-items: center; gap: var(--s1);
  font-weight: 700; font-size: .9375rem; color: var(--accent);
  text-decoration: none; white-space: nowrap;
}
.link-cta svg { transition: transform 160ms var(--ease); }

/* --- the Row: illustrated band -------------------------------------------*/
/* Full-bleed. Background is the page white, no border, no tint, no radius,
   so the drawing sits ON the page rather than inside a panel.
   Decorative only: aria-hidden, pointer-events none, zero focusable children. */

.row {
  position: relative;
  width: 100%;
  height: clamp(132px, 42vw, 200px);
  overflow: hidden;
  background: var(--card);
  pointer-events: none;
  animation: uh-rise 900ms var(--ease) 120ms both;
}
@media (min-width: 768px) {
  .row { height: clamp(180px, 20vw, 288px); }
}

/* The ground rule the actors stand on. Draws once, left to right. */
.row__ground {
  position: absolute; left: 0; right: 0; bottom: 14%;
  height: 1px; background: var(--line);
  transform-origin: left center;
  animation: uh-draw 520ms var(--ease) 50ms both;
}

/* PLACEHOLDER ONLY. Replaced by row-left/centre/right.svg once the art
   lands. Sized to the final geometry so nothing reflows on swap:
   master space 1440x380 (3.79:1), panels at 0/480/960. */
.row__slot {
  position: absolute; inset: 0 0 14% 0;
  display: grid; place-items: center;
  border: 1px dashed var(--line);
  border-bottom: 0;
  margin-inline: var(--gut);
}
.row__slot span {
  font-size: var(--t-eyebrow); font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--line);
}

/* --- hairline row lists --------------------------------------------------*/
/* The core pattern of this page. A list of rows separated by 1px hairlines,
   with no cards, no gaps, no per-row borders and no background change.
   Reads like a well-set index. Used for both categories and offers. */

.list { border-top: 1px solid var(--line); }

.row-item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--s4);
  min-height: 88px;
  padding-block: var(--s4);
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  transition: background-color 120ms var(--ease);
}
@media (min-width: 768px) {
  .row-item { min-height: 104px; }
}
@media (hover: hover) and (pointer: fine) {
  .row-item:hover { background: var(--paper); }
  .row-item:hover .row-item__name { color: var(--accent-deep); }
  .row-item:hover .link-cta svg { transform: translateX(2px); }
}
.row-item:focus-visible { outline-offset: -2px; }

.row-item__name {
  font-family: var(--fd); font-weight: 600;
  font-size: 1.0625rem; letter-spacing: -.02em; color: var(--ink);
  transition: color 160ms var(--ease);
}
@media (min-width: 768px) { .row-item__name { font-size: 1.1875rem; } }

.row-item__note {
  margin-top: 2px;
  font-size: var(--t-small); color: var(--muted);
}

.row-item__val { text-align: right; }
.row-item__val .eyebrow { display: block; margin-bottom: 2px; }
.row-item__val .num { font-size: 1.25rem; }
@media (min-width: 768px) { .row-item__val .num { font-size: 1.5rem; } }

/* Offer rows carry more columns on wide screens but stay rows. */
.row-item--offer { grid-template-columns: 1fr auto; }
.row-item--offer .row-item__specs {
  display: flex; gap: var(--s5); margin-top: var(--s2);
}
.row-item--offer .row-item__specs .num { font-size: 1rem; }
@media (min-width: 768px) {
  .row-item--offer {
    grid-template-columns: minmax(0, 1.3fr) auto auto;
    gap: var(--s7);
  }
  .row-item--offer .row-item__specs { margin-top: 0; gap: var(--s7); }
}

/* --- how it works --------------------------------------------------------*/
/* No containers. A large thin numeral, a heading, two lines. Whitespace only. */

.steps { display: grid; gap: var(--s7); }
@media (min-width: 768px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: var(--s6); }
}
.step__n {
  font-family: var(--fd); font-weight: 600; font-size: 2.5rem;
  line-height: 1; letter-spacing: -.03em; color: var(--line);
  font-variant-numeric: tabular-nums;
}
.step h3 { margin-top: var(--s3); }
.step p  { margin-top: var(--s2); color: var(--text); max-width: 40ch; }

/* --- vertical tiles: the homepage router ---------------------------------*/
/* Ruled, not floated. Each tile is one real <a>. */

.tiles { display: grid; gap: var(--s3); grid-template-columns: 1fr 1fr; }
@media (min-width: 900px) { .tiles { grid-template-columns: repeat(5, 1fr); } }
.tile {
  display: flex; flex-direction: column; justify-content: space-between;
  gap: var(--s4); min-height: 104px;
  padding: var(--s4);
  background: rgba(255, 255, 255, .72);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  text-decoration: none;
  transition: border-color 160ms var(--ease), background-color 160ms var(--ease);
}
.tile b { font-family: var(--fd); font-weight: 600; color: var(--ink); line-height: 1.25; }
.tile span { font-size: var(--t-small); color: var(--accent-deep); }
.tile span::after { content: " \203A"; }
@media (hover: hover) and (pointer: fine) {
  .tile:hover { border-color: var(--accent); background: #fff; }
}

/* --- rate stats: dark band 1 of 2 ----------------------------------------*/
/* No containers. Cells divided by faint hairlines forming a cross. */

.stats { display: grid; grid-template-columns: 1fr 1fr; margin-top: var(--s5); }
@media (min-width: 768px) { .stats { grid-template-columns: repeat(4, 1fr); } }

.stat { padding: var(--s5) var(--s4); }
.stat:nth-child(odd)  { border-right: 1px solid var(--on-navy-line); }
.stat:nth-child(-n+2) { border-bottom: 1px solid var(--on-navy-line); }
.stat:first-child, .stat:nth-child(3) { padding-left: 0; }

@media (min-width: 768px) {
  .stat { border-bottom: 0 !important; border-right: 1px solid var(--on-navy-line); }
  .stat:last-child { border-right: 0; }
  .stat:nth-child(3) { padding-left: var(--s4); }
}

.stat .eyebrow { color: var(--on-navy-mute); }
.stat .num { display: block; margin-top: var(--s2); font-size: 2rem; color: #fff; }
@media (min-width: 768px) { .stat .num { font-size: 2.25rem; } }

/* The page's ONE gold moment. Gold on navy is 9.10:1. */
.stat .num--gold { color: var(--gold); }

.band--navy .band__note {
  margin-top: var(--s5); font-size: var(--t-small); color: var(--on-navy-mute);
}

/* --- FAQ -----------------------------------------------------------------*/

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); padding-block: var(--s5);
  font-family: var(--fd); font-weight: 600; font-size: 1.0625rem;
  letter-spacing: -.02em; color: var(--ink); cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { flex: none; color: var(--muted); transition: transform 160ms var(--ease); }
.faq details[open] summary svg { transform: rotate(180deg); }
.faq details > div { padding-bottom: var(--s5); max-width: var(--w-narrow); }

/* --- footer: dark band 2 of 2 --------------------------------------------*/

.ftr { padding-block: var(--sec-y) var(--s6); }
.ftr .brand { color: #fff; }
.ftr .brand b { color: var(--accent-on-navy); }

.ftr__trust {
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5);
  margin-top: var(--s5); padding-bottom: var(--s5);
  border-bottom: 1px solid var(--on-navy-line);
}
.ftr__trust li {
  display: flex; align-items: center; gap: var(--s2);
  font-size: var(--t-small); color: var(--on-navy-soft);
}
.ftr__trust svg { flex: none; color: var(--accent-on-navy); }

/* Advertiser disclosure is a compliance surface. Visible body text,
   never a modal, tooltip or <details>. Legal links stay underlined. */
.disclose {
  margin-top: var(--s5);
  max-width: var(--w-narrow);
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--on-navy-soft);
}
.disclose a { color: var(--accent-on-navy); text-decoration: underline; }

.ftr__cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6) var(--s5);
  margin-top: var(--s7);
}
@media (min-width: 768px) { .ftr__cols { grid-template-columns: repeat(4, 1fr); } }
.ftr__cols h3 { font-size: var(--t-eyebrow); font-family: var(--fb); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--on-navy-mute); }
.ftr__cols ul { margin-top: var(--s3); display: grid; gap: var(--s2); }
.ftr__cols a { color: var(--on-navy-soft); text-decoration: none; font-size: var(--t-small); }
@media (hover: hover) and (pointer: fine) {
  .ftr__cols a:hover { color: #fff; text-decoration: underline; }
}

.ftr__base {
  margin-top: var(--s7); padding-top: var(--s5);
  border-top: 1px solid var(--on-navy-line);
  font-size: var(--t-small); color: var(--on-navy-mute);
}

/* --- sticky mobile CTA ---------------------------------------------------*/

.sticky {
  position: fixed; inset: auto 0 0 0; z-index: 50;
  display: none;
  padding: 10px var(--gut) calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
}
.sticky p { margin-top: var(--s1); text-align: center; font-size: .75rem; color: var(--muted); }
@media (max-width: 767.98px) {
  .sticky { display: block; }
  body { padding-bottom: 92px; }
}

/* --- nbscene: raster state-crossfade scene rig ---------------------------*/
/* For Nano Banana (or any raster) art. The story is told by dissolving
   between two consistent STATES of the same scene, not by rigging parts:
   state 1 = door closed, unlit; state 2 = door open, windows warm.
   The walker is an overlay (two poses, opacity-flipped), the signboard
   text is live HTML - both unchanged from the SVG rig.
   Timeline (same beats as ever): walk 0-2.4s, sign takes the name at
   2.4s, states dissolve 2.8-3.6s, then stillness. */

.nbscene {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  max-width: 520px;
  pointer-events: none;
}
.nbscene img { user-select: none; }

.nbscene__state {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
}
.nbscene__state--2 {
  opacity: 0;
  animation: uh-fade .8s var(--ease) 2.8s forwards;
}

/* the walker: positioned by --walk-x/--walk-y (% of scene box, feet point),
   height by --walk-h (% of scene height). Walks in from off-canvas left. */
.nbscene__person {
  position: absolute;
  left: var(--walk-x, 39%); bottom: var(--walk-y, 8%);
  height: var(--walk-h, 18%);
  transform: translateX(-50%);
  animation: nb-walk 2.4s cubic-bezier(.3, 0, .55, 1) both;
}
.nbscene__person img {
  position: absolute; bottom: 0; left: 50%;
  height: 100%; transform: translateX(-50%);
}
.nbscene__person img:first-child { animation: nb-pa 2.4s linear forwards; }
.nbscene__person img:last-child  { opacity: 0; animation: nb-pb 2.4s linear forwards; }

@keyframes nb-walk { from { transform: translateX(-50%) translateX(-340px); }
                     to   { transform: translateX(-50%); } }
@keyframes nb-pa {
  0%,12.4% { opacity:1; } 12.5%,24.9% { opacity:0; }
  25%,37.4% { opacity:1; } 37.5%,49.9% { opacity:0; }
  50%,62.4% { opacity:1; } 62.5%,74.9% { opacity:0; }
  75%,87.4% { opacity:1; } 87.5%,100% { opacity:0; }
}
@keyframes nb-pb {
  0%,12.4% { opacity:0; } 12.5%,24.9% { opacity:1; }
  25%,37.4% { opacity:0; } 37.5%,49.9% { opacity:1; }
  50%,62.4% { opacity:0; } 62.5%,74.9% { opacity:1; }
  75%,87.4% { opacity:0; } 87.5%,100% { opacity:1; }
}

@media (prefers-reduced-motion: reduce) {
  .nbscene__state--2, .nbscene__person,
  .nbscene__person img:first-child, .nbscene__person img:last-child { animation: none; }
  .nbscene__state--2 { opacity: 1; }
  .nbscene__person { transform: translateX(-50%); }
  .nbscene__person img:first-child { opacity: 0; }
  .nbscene__person img:last-child { opacity: 1; }
}

/* --- funnel hero: centred brand + hook, card column over a band ----------*/
.hero--funnel { padding-block: var(--s3) 0; text-align: center; }
/* the brand lives in the header lockup (mark + wordmark) at every width -
   the hero opens straight on the h1 */
@media (min-width: 900px) {
  .funnel__sub { margin-bottom: var(--s7); }
}
.hero--funnel h1 {
  font-size: var(--t-h2);
  max-width: 26ch; margin-inline: auto;
}
.funnel__sub {
  margin: var(--s2) auto var(--s5);
  font-size: var(--t-lead);
  color: var(--ink-soft);
  max-width: 40ch;
}
.funnel__sub b { font-family: var(--fd); color: var(--ink); }

/* The stage for the scene art. NO background - the mockup's tan was a
   placeholder meaning "illustration goes here", not a colour. When the
   generated scenes land they flank/back this band as positioned layers;
   until then the cards sit on the plain page. */
.funnel-band {
  position: relative;
  /* mobile: the 225px foot is the house's stage - the scene sits in
     clear space below the last card, sign readable, door animating */
  padding: 0 var(--gut) 225px;
  overflow-x: clip;          /* crop the horizontal bleed only */
  overflow-y: visible;
}
/* generated flank scenes: bottom-anchored, bleeding off the edges, always
   behind the cards, never clickable */
/* mobile: the house sits faint behind the card column - the illustration
   is present without competing with the offers. Sign text hidden there
   (the surname already lives in the sub-hook). */
.fk { position: absolute; z-index: 0; pointer-events: none; }
.fk--l {
  /* mobile: the house peeks from behind the LAST card onto its own
     stage (the band's 225px foot) - crisp art, no frosted smudge */
  display: block;
  right: -8%; bottom: -1%;
  width: min(72vw, 330px);
  opacity: 1;
}
.fk > * { animation: uh-rise 900ms var(--ease) 150ms both; }
.fk--r { display: none; }
.fk .scene__sign { display: grid; }
.fkscene { position: relative; container-type: inline-size; }
.fkscene img, .fk > img { display: block; width: 100%; height: auto; }
/* the sky: warm clouds drifting at unlike speeds (slower = further = depth),
   birds crossing with a wing bob. Decorative, never clickable. Depth stays
   in the fills - two cloud tones, no CSS filters. */
.sky { display: none; }

@media (min-width: 1100px) {
  .funnel-band { padding-bottom: var(--s7); }
  .fk { bottom: 4%; }   /* raised - the scenes live beside the cards, not below them */
  /* bleed via inset offsets, NOT transform - uh-rise's end state
     (transform: none) would stomp a static translateX. */
  .fk--l { top: auto; left: -3vw; right: auto; margin-inline: 0; width: clamp(300px, 30vw, 470px); opacity: 1; }
  .fk--r { display: block; right: -3vw; width: clamp(280px, 28vw, 440px); }

  .sky {
    /* stays inside the band, below the heading block - the band is
       position:relative, so anything reaching up past the sub-hook would
       paint OVER the h1 text (positioned beats in-flow, z-index -1 or not) */
    display: block; position: absolute;
    left: 0; right: 0; top: -16px; height: 230px;
    z-index: -1; pointer-events: none;
  }
  .sky__cloud, .sky__bird {
    position: absolute; left: 0;
    animation: uh-drift var(--d) linear var(--delay) infinite;
  }
  .sky__bird svg { display: block; animation: uh-bob 2.8s ease-in-out infinite alternate; }
  /* the flap is what stops the glide reading as a flat horizontal slide */
  .sky__wings {
    transform-box: fill-box; transform-origin: 50% 55%;
    animation: uh-flap var(--f, .9s) ease-in-out infinite alternate;
  }
}

@media (min-width: 1100px) and (prefers-reduced-motion: reduce) {
  .sky__cloud { animation: none; left: auto; }
  .sky__cloud:nth-of-type(1) { right: 12%; }
  .sky__cloud:nth-of-type(2) { right: 58%; }
  .sky__cloud:nth-of-type(3) { right: 34%; }
  .sky__cloud:nth-of-type(4) { right: 76%; }
  .sky__bird { display: none; }
}

@keyframes uh-drift { from { translate: -18vw 0; } to { translate: 112vw 0; } }
@keyframes uh-bob   { from { translate: 0 0; } to { translate: 0 -9px; } }
@keyframes uh-flap  { from { transform: scaleY(1); } to { transform: scaleY(-.4); } }
.funnel-cards { position: relative; z-index: 1; }
.funnel-cards {
  max-width: 920px;
  margin-inline: auto;
  display: grid; gap: var(--s4);
}
@media (min-width: 680px) { .funnel-cards { gap: var(--s5); } }
.funnel-cards .hoffer { gap: var(--s4); padding-block: var(--s6); }
.funnel-cards .advdisc { margin-top: var(--s5); color: var(--ink-soft); }
.funnel-cards .advdisc a { color: var(--ink-soft); }

.link-cta--center { justify-content: center; text-align: center; margin-top: auto; }
.link-cta--center:focus-visible { outline-offset: 4px; }

@media (min-width: 900px) {
  /* the base .hero .wrap grid belongs to the copy+form variant only */
  .hero--funnel .wrap { display: block; }
}

/* --- pcard: the explainable offer card (capepath anatomy, our system) ----*/
/* Every data field has a labelled home: best-for headline, credit pill,
   padlock CTA, a real fact row with dividers, the "why" strip. */

.pcard {
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  text-align: left;
}
.pcard--top { border-left: 3px solid var(--gold); }

.pcard__ribbon {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  background: rgba(220, 233, 246, .65);
  padding: var(--s2) var(--s5);
  font-size: var(--t-small); color: var(--accent-deep);
  border-bottom: 1px solid var(--line-soft);
}
.pcard__ribbonbadge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent); color: #fff;
  font-size: .75rem; font-weight: 700;
  padding: 3px 12px; border-radius: var(--pill);
}

.pcard__main { padding: var(--s4); }
@media (min-width: 640px) { .pcard__main { padding: var(--s4) var(--s5); } }

.pcard__bestfor {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  font-weight: 700; font-size: .9375rem; color: var(--accent-deep);
  margin-bottom: var(--s3);
}
.pcard__bestfor span:not(.pcard__flag) { font-weight: 400; color: var(--accent); }
.pcard__flag {
  margin-left: auto;
  font-size: var(--t-eyebrow); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--gold); color: var(--navy);
  padding: 3px 10px; border-radius: var(--pill);
}

.pcard__grid { display: grid; gap: var(--s5); }
@media (min-width: 640px) {
  .pcard__grid { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}

.pcard__id { display: flex; align-items: center; gap: var(--s4); min-width: 0; }
.pcard__id h3 { font-size: 1.25rem; line-height: 1.2; }

.pcard__logo {
  position: relative; flex: none;
  width: 56px; height: 56px; border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--bc, var(--ink-soft));
  display: grid; place-items: center; overflow: hidden;
}
.pcard__logo b { color: #fff; font-family: var(--fd); font-weight: 600; font-size: 1.5rem; }
.pcard__logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #fff; }

.pcard__score {
  display: flex; align-items: center; gap: var(--s2);
  margin-top: var(--s1);
  font-size: var(--t-small); font-weight: 700; color: var(--ink-soft);
}
.pcard__stars {
  position: relative; width: 74px; height: 13px; flex: none;
  /* five outlined stars via mask-free layering: base row in line colour,
     fill row clipped to the score width in gold */
  background:
    radial-gradient(circle at 7px 7px, transparent 0, transparent 100%);
}
.pcard__stars::before, .pcard__stars i {
  content: "★★★★★";
  position: absolute; inset: 0;
  font-size: 13px; line-height: 13px; letter-spacing: 1.6px;
  color: var(--line);
}
.pcard__stars i {
  right: auto;                      /* width (inline, = score %) wins over inset */
  overflow: hidden; display: block; white-space: nowrap;
}
.pcard__stars i::before {
  content: "★★★★★";
  color: var(--gold-deep);
  font-size: 13px; line-height: 13px; letter-spacing: 1.6px;
}

.pcard__act { display: grid; gap: var(--s2); justify-items: center; }
@media (min-width: 640px) { .pcard__act { min-width: 230px; } }
.pcard__act .btn { width: 100%; gap: 8px; }
.pcard__cred {
  background: var(--accent-tint); color: var(--accent-deep);
  font-size: var(--t-small);
  padding: 5px 14px; border-radius: var(--pill);
  white-space: nowrap;
}
.pcard__cred .num { color: var(--accent-deep); }
.pcard__secure { font-size: .75rem; color: var(--muted); }

.pcard__facts {
  display: grid; grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line);
}
@media (min-width: 640px) { .pcard__facts { grid-template-columns: repeat(4, 1fr); } }
.pcard__facts li { padding: var(--s2) var(--s5); border-left: 1px solid var(--line-soft); }
.pcard__facts li:first-child { border-left: 0; }
@media (max-width: 639.98px) { .pcard__facts li:nth-child(3) { border-left: 0; }
  .pcard__facts li:nth-child(n+3) { border-top: 1px solid var(--line-soft); } }
.pcard__facts span { display: block; font-size: var(--t-small); color: var(--muted); }
.pcard__facts b { font-size: 1.0625rem; }

.pcard__why {
  background: rgba(245, 248, 251, .55);
  border-top: 1px solid var(--line-soft);
  padding: var(--s2) var(--s5);
  font-size: var(--t-small); line-height: 1.55; color: var(--ink-soft);
}
.pcard__why strong { color: var(--ink); }

/* --- plain hero: offer cards + illustration, nothing else ----------------*/
.hero--plain h1 {
  font-size: var(--t-h2);          /* present for SEO/a11y, modest on the eye */
  max-width: 24ch;
  margin-bottom: var(--s5);
}
.hero--plain .hoffers--stack { grid-template-columns: 1fr; margin-top: 0; }
.hero--plain .advdisc { margin-top: var(--s4); }
.hero--plain .scene { margin-top: var(--s6); margin-inline: auto; }
@media (min-width: 900px) {
  .hero--plain .wrap {
    display: grid; grid-template-columns: minmax(0, 1fr) 480px;
    gap: var(--s8); align-items: center;
  }
  .hero--plain .scene { margin-top: 0; }
}

/* --- Lemonade hero: centred copy, flanking art, framed CTA ---------------*/
/* The art is an environment, not an exhibit: both houses bleed off the
   viewport edges and frame an empty centre where the CTA is the only
   saturated element. Art is bottom-anchored and behind the copy. */

.hero--flank {
  position: relative;
  text-align: center;
  overflow: clip;
  padding-block: var(--s7) 0;
}
.hero--flank .hero__copy {
  position: relative; z-index: 2;
  max-width: 680px; margin-inline: auto;
  padding-bottom: var(--s7);
}
.hero--flank h1 { max-width: none; margin-inline: auto; }
.hero--flank .answer { margin-inline: auto; }
.hero--flank .hero__trust { justify-content: center; }
.hero--flank .advdisc { max-width: 560px; margin-inline: auto; }

/* Converting offers inside the hero centre. These ARE the CTA: compact
   cards, each with one direct partner click-out. Offers earn boxes - they
   are the discrete comparable objects. */
.hoffers {
  display: grid; gap: var(--s4);
  margin-top: var(--s5);
  text-align: left;
}
/* deliberately asymmetric: the featured offer is wider, gold-railed and
   gold-actioned; the secondary is slimmer. Uniform twin cards read as
   wallpaper - hierarchy is what makes a pair catchy. */
@media (min-width: 680px) { .hoffers { grid-template-columns: 1.3fr 1fr; align-items: stretch; } }

.hoffer {
  position: relative; overflow: hidden;   /* clips the corner art to the radius */
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s5);
  display: flex; flex-direction: column; gap: var(--s3);
}
/* corner motif: pale line art bleeding out of the bottom-right, always
   behind the content, never intercepting a click */
.hoffer__art {
  position: absolute; right: -18px; bottom: -16px;
  z-index: 0; pointer-events: none;
}
/* narrow cards: the centred secure-site line reaches into the corner, so
   push the motif further out and smaller to keep 12px text on clean white */
@media (max-width: 679.98px) {
  .hoffer__art { right: -34px; bottom: -30px; transform: scale(.8); transform-origin: bottom right; }
  .hoffer__secure { text-align: left; padding-right: 72px; }  /* corner belongs to the art */
}
.hoffer > :not(.hoffer__art) { position: relative; z-index: 1; }
.hoffer--fea {
  border-left: 3px solid var(--gold);
  padding: var(--s5) var(--s6);
}
.hoffer__head { display: flex; align-items: center; gap: var(--s3); }
.hoffer__head h3 { font-size: 1.0625rem; line-height: 1.2; }
.hoffer--fea .hoffer__head h3 { font-size: 1.1875rem; }
.hoffer__head > div { flex: 1; min-width: 0; }

.hoffer__logo {
  position: relative; flex: none;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--bc, var(--ink-soft));
  display: grid; place-items: center; overflow: hidden;
}
.hoffer__logo b {
  color: #fff; font-family: var(--fd); font-weight: 600; font-size: 1.25rem;
}
.hoffer__logo img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; background: #fff;
}

.hoffer__flag {
  flex: none; align-self: flex-start;
  font-size: var(--t-eyebrow); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--gold); color: var(--navy);
  padding: 3px 10px; border-radius: var(--pill);
  white-space: nowrap;
}

.hoffer__chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.hoffer__chips li {
  display: flex; align-items: baseline; gap: 5px;
  font-size: var(--t-small); color: var(--muted);
  background: var(--paper);
  border-radius: var(--pill);
  padding: 4px 12px;
}
.hoffer__chips .num { font-size: .9375rem; }

.hoffer__best { font-size: var(--t-small); color: var(--ink-soft); font-weight: 500; margin-top: 2px; }
.hoffer__ribbon { font-size: var(--t-small); color: var(--muted); }
.hoffer .btn { margin-top: auto; }
.hoffer__secure { font-size: .75rem; color: var(--muted); text-align: center; }

.flank {
  position: relative; z-index: 1;
  pointer-events: none;
  margin-top: calc(var(--s6) * -1);
}
.flank--l { display: none; }
.flank--r .scene { max-width: none; }

.flankband { position: relative; }

@media (min-width: 900px) {
  /* the base .hero .wrap grid is for the copy+form variant; the flank
     hero is a single centred column with art in its own band below */
  .hero--flank .wrap { display: block; }
  .hero--flank .hero__copy { margin-inline: auto; padding-bottom: var(--s5); }
  .flankband { height: clamp(250px, 27vw, 350px); }
  .flank {
    position: absolute; bottom: 0; margin-top: 0;
  }
  /* left house: static, cropped by the viewport edge */
  .flank--l {
    display: block; left: 0;
    width: clamp(240px, 27vw, 430px);
    transform: translateX(-16%);
  }
  .flank--l img { display: block; width: 100%; height: auto; }
  /* right house: the story scene, cropped at the right edge */
  .flank--r {
    right: 0;
    width: clamp(280px, 32vw, 500px);
    transform: translateX(10%);
  }
}

/* --- the scene: house + personalised signboard ---------------------------*/
/* The listicle/hub hero illustration. The SVG carries its own motion
   (person walks in, door opens) in in-file keyframes. The signboard text
   is LIVE HTML positioned over a blank drawn board - Firefly cannot
   spell, and an <img>-loaded SVG cannot be personalised from outside.
   Both sign states are absolutely positioned at percentage offsets from
   the artwork's 480x360 box so they track the image at every width.
   Board geometry comes from GetBounds once the art exists; the two
   custom properties below are the only numbers that change. */

.scene {
  position: relative;
  aspect-ratio: 4 / 3;              /* 480x360 artwork; reserves the box, CLS 0 */
  width: 100%;                      /* NOT auto: in a grid, auto margins absorb the
                                       free space and the box collapses to its
                                       content width, which is 0 because every
                                       child is absolutely positioned */
  max-width: 480px;
  margin-inline: auto;
  pointer-events: none;
  /* board centre + inner width, % of artwork box. PLACEHOLDER until
     measured from the generated art with GetBounds. */
  --sign-x: 22%;
  --sign-y: 78%;
  --sign-w: 30%;
}

.scene__art { display: block; width: 100%; height: 100%; }

.scene__slot {                       /* placeholder until the SVG lands */
  position: absolute; inset: 0;
  display: grid; place-items: center;
  border: 1px dashed var(--line);
}
.scene__slot span {
  font-size: var(--t-eyebrow); font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--line);
}

.scene__sign {
  position: absolute;
  left: var(--sign-x); top: var(--sign-y);
  width: var(--sign-w);
  transform: translate(-50%, -50%);
  text-align: center;
  font-family: var(--fd);
  font-weight: 600;
  font-size: .75rem;   /* fallback: engines without cqw drop the clamp() line entirely */
  font-size: clamp(.5rem, 4.2cqw, .8125rem);
  line-height: 1.1;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.scene { container-type: inline-size; }   /* cqw units in the sign resolve against the scene box */

/* No default text - the drawn board stays blank until a ?ln= arrival
   writes "{Name}'s residence" onto it. */
.scene__sign b {
  display: grid; place-items: center;
  font-style: normal; font-weight: 600; opacity: 0;
}
.scene.is-named .scene__sign b,
.fkscene.is-named .scene__sign b { animation: uh-fade 220ms var(--ease) 2.2s both; }

/* Name length tiers - set by sign.js, never overflow the board.
   Sized against the drawn board (33px tall at 420px render): a 3-line
   name at 74% x 1.1 line-height = 31.7px, inside the board face. */
.scene__sign[data-fit="mid"]  b { font-size: 74%; }
.scene__sign[data-fit="long"] b { font-size: 58%; }

@media (prefers-reduced-motion: reduce) {
  .scene.is-named .scene__sign b,
  .fkscene.is-named .scene__sign b { opacity: 1; animation: none; }
}

/* --- listicle components -------------------------------------------------*/
/* The money page. Offers here ARE cards - the one place they earn a box,
   because each is a discrete object compared against its siblings.
   (The homepage teaser stays hairline rows. Do not converge the two.) */

.pick {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s5);
  margin-top: var(--s5);
}
.pick--editor { border-left: 3px solid var(--gold); }

.pick__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); }
.pick__rank {
  font-family: var(--fd); font-weight: 600; font-size: .9375rem;
  color: var(--muted); font-variant-numeric: tabular-nums;
}
.pick h3 { font-size: 1.25rem; }
.pick__badge {
  font-size: var(--t-eyebrow); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-soft); white-space: nowrap;
}
.pick--editor .pick__badge {
  background: var(--gold); color: var(--navy);
  padding: 3px 10px; border-radius: var(--pill);
}

.pick__specs {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--s4); margin-top: var(--s4);
  padding-top: var(--s4); border-top: 1px solid var(--line-soft);
}
@media (min-width: 768px) { .pick__specs { grid-template-columns: repeat(4, 1fr); } }
.pick__specs .eyebrow { display: block; margin-bottom: 2px; }
.pick__specs .num { font-size: 1.125rem; }

.pick__body { margin-top: var(--s4); }
.pick__body h4 {
  margin: var(--s4) 0 var(--s1);
  font-family: var(--fb); font-weight: 700; font-size: var(--t-small);
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.pick__body ul { padding-left: 1.1em; }
.pick__body li { list-style: disc; margin-top: var(--s1); font-size: var(--t-small); }
.pick__notfor { margin-top: var(--s4); font-size: var(--t-small); color: var(--muted); }
.pick__notfor strong { color: var(--ink-soft); }

.pick__cta {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); margin-top: var(--s5);
}
.pick__cta small { font-size: .75rem; color: var(--muted); }

/* Comparison table - real <table>, two presentations from one markup */
.cmp-scroll { overflow-x: auto; overscroll-behavior-x: contain; margin-top: var(--s5); }
table.cmp { width: 100%; border-collapse: collapse; }
.cmp caption {
  text-align: left; font-size: var(--t-small); color: var(--muted);
  padding-bottom: var(--s3);
}
.cmp th, .cmp td { text-align: left; padding: var(--s4) var(--s4) var(--s4) 0; }
.cmp thead th {
  font-family: var(--fb); font-size: var(--t-eyebrow); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.cmp tbody tr { border-bottom: 1px solid var(--line-soft); }
.cmp tbody th { font-family: var(--fd); font-weight: 600; color: var(--ink); }
.cmp td { font-size: var(--t-small); }
.cmp .num { font-size: .9375rem; }

@media (max-width: 767.98px) {
  .cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cmp tbody tr { display: block; padding-block: var(--s4); }
  .cmp tbody th { display: block; padding: 0 0 var(--s2); }
  .cmp td {
    display: grid; grid-template-columns: 11ch 1fr; gap: var(--s3);
    padding: var(--s1) 0; border: 0;
  }
  .cmp td::before {
    content: attr(data-label);
    font-size: var(--t-eyebrow); font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--muted); align-self: center;
  }
}

/* Answer block - the AEO direct-answer paragraph under the h1 */
.answer {
  margin-top: var(--s4);
  font-size: var(--t-lead); line-height: 1.55;
  color: var(--ink-soft); font-weight: 500;
  max-width: var(--w-narrow);
}

/* Advertiser disclosure strip above the picks */
.advdisc {
  margin-top: var(--s4);
  font-size: .75rem; color: var(--muted);
}
.advdisc a { color: var(--muted); }

/* --- motion --------------------------------------------------------------*/
/* Budget: 4. No scroll reveals anywhere. No animated counters on rate
   figures: numbers are facts, animating them reads as a slot machine.
   The h1 is never animated so it stays the LCP element. */

@keyframes uh-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes uh-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes uh-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes spin    { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .row { opacity: 1; transform: none; }
  .row__ground { transform: scaleX(1); }
}

@media (prefers-contrast: more) {
  .row-item, .faq details, .list { border-color: var(--ink-soft); }
  :focus-visible { outline-width: 3px; }
}