/* =================================================================
   screens.css — PREMIUM VISUAL OVERHAUL (screens 0, 1, 3, 4, 5)

   Screen 2 was elevated in the first design pass (engine house + live
   dashboard). This file brings the remaining five screens up to the
   same bar using the SAME design tokens, so the whole tool reads as
   one product.

   RULES THIS FILE FOLLOWS
     · Presentation only. Not one id, class or element the JavaScript
       reaches for is renamed, removed or re-nested — see js/dom.js.
     · Every value resolves to a --fb-* token (css/framework/tokens.css).
       No new hard-coded colours.
     · Loaded AFTER components.css, so these rules win by order without
       needing !important or inflated specificity.
     · Nothing here changes pricing, copy, questions or flow.

   Load order in index.html:
     styles -> components -> animations -> responsive
     -> tokens -> typography -> cards -> dashboard -> house -> screens
   ================================================================= */


/* =================================================================
   1 · SHARED FOUNDATIONS — spacing rhythm + card elevation
   Applies to every screen so the vertical rhythm is finally uniform.
   ================================================================= */

/* Cards: deeper radius, softer tinted shadow, hairline edge. The old
   flat panels are the main reason the tool read as "unfinished". */
.card,
.quote,
.congrats{
  border-radius:var(--fb-radius-xl);
  box-shadow:var(--fb-shadow-md);
  border:1px solid rgba(255,255,255,.7);
}
.card,
.quote{
  padding:var(--fb-space-5);
  margin:0 0 var(--fb-space-4);
}

/* Card headings — one scale, one weight, everywhere. */
.card h2,
.quote h2{
  font-family:var(--fb-font-display);
  font-variation-settings:var(--fb-vf-heading);
  font-size:var(--fb-text-lg);
  letter-spacing:var(--fb-tracking-tight);
  color:var(--fb-secondary);
  margin:0 0 var(--fb-space-1);
}
.card p.note,
.quote p.note{
  color:var(--fb-text-muted);
  font-size:var(--fb-text-sm);
  line-height:var(--fb-leading-relaxed);
  margin:0 0 var(--fb-space-5);
}

/* Question blocks: consistent gaps instead of the old mixed margins. */
.q{ margin:0 0 var(--fb-space-6); }
.q:last-child{ margin-bottom:0; }
.q > label,
.q > .lbl,
.q > legend.lbl{
  font-size:var(--fb-text-base);
  font-weight:var(--fb-weight-bold);
  color:var(--fb-text);
  margin-bottom:var(--fb-space-3);
}
.hint{
  color:var(--fb-text-muted);
  font-size:var(--fb-text-sm);
  line-height:var(--fb-leading-relaxed);
  margin-top:var(--fb-space-2);
}

/* Back button — a real target, not floating text. */
.back{
  display:inline-flex; align-items:center; gap:var(--fb-space-1);
  min-height:var(--fb-tap-target);
  padding:var(--fb-space-2) var(--fb-space-3);
  margin:0 0 var(--fb-space-2) calc(var(--fb-space-3) * -1);
  border-radius:var(--fb-radius-pill);
  font-size:var(--fb-text-sm);
  font-weight:var(--fb-weight-bold);
  color:var(--fb-secondary);
  opacity:1;
  transition:var(--fb-transition-colors);
}
.back:hover{ background:rgba(255,255,255,.55); }

/* The dock is position:fixed, so the last content on every screen must
   clear it or it sits underneath unreadable. The dock is ~76px tall
   plus its safe-area inset; this reserves that plus a comfortable gap.
   (The old build clipped the access options and the Gold package.) */
main{ padding-bottom:calc(150px + env(safe-area-inset-bottom)); }

/* Anything scrolled to programmatically should stop above the dock. */
.screen [id]{ scroll-margin-bottom:160px; }


/* =================================================================
   2 · SCREEN 0 · HERO
   Problems fixed: cramped headline fighting the JP image, uneven
   rhythm, weak trust badges.
   ================================================================= */

.hero{ padding-top:var(--fb-space-2); }

.hero h1{
  font-size:var(--fb-text-3xl);
  line-height:1.12;                     /* 1.05 was too tight for a 3-line headline */
  letter-spacing:var(--fb-tracking-tight);
  color:var(--fb-secondary);
  margin:0 0 var(--fb-space-4);
  text-shadow:0 2px 0 rgba(255,255,255,.55);
}
.hero h1 .hl{ color:var(--fb-primary-active); }

.hero .sub{
  font-size:var(--fb-text-md);
  font-weight:var(--fb-weight-semi);
  color:var(--fb-secondary);
  opacity:.9;
  margin:0 0 var(--fb-space-5);
}

/* Perk chips: glassy pills with a consistent height. */
.hero .perks{ gap:var(--fb-space-2); margin:0 0 var(--fb-space-5); }
.hero .perks div{
  min-height:40px;
  padding:0 var(--fb-space-4);
  border-radius:var(--fb-radius-pill);
  background:var(--fb-glass-bg-strong);
  border:1px solid var(--fb-glass-border);
  box-shadow:var(--fb-shadow-xs);
  font-size:var(--fb-text-sm);
  font-weight:var(--fb-weight-bold);
  color:var(--fb-secondary);
}

.hero .script{
  font-family:var(--fb-font-hand);
  font-size:var(--fb-text-xl);
  color:var(--fb-secondary);
  margin:0 0 var(--fb-space-2);
}

/* JP hero image sits on the sky, not in a box — let it breathe. */
.jphero{ margin:0 0 var(--fb-space-4); }
.jphero img{ display:block; width:100%; height:auto; }

/* Trust badges: a 2-up grid of quiet glass tiles. */
.tbadges{
  display:grid; grid-template-columns:1fr 1fr;
  gap:var(--fb-space-2);
  margin:var(--fb-space-5) 0 var(--fb-space-4);
}
.tbadges div{
  min-height:var(--fb-tap-target);
  display:flex; align-items:center; justify-content:center;
  gap:var(--fb-space-2);
  padding:var(--fb-space-2) var(--fb-space-3);
  border-radius:var(--fb-radius-md);
  background:var(--fb-glass-bg-strong);
  border:1px solid var(--fb-glass-border);
  box-shadow:var(--fb-shadow-xs);
  font-size:var(--fb-text-sm);
  font-weight:var(--fb-weight-bold);
  color:var(--fb-secondary);
  text-align:center;
}

.hero .trust{
  font-size:var(--fb-text-sm);
  color:var(--fb-secondary);
  opacity:.8;
  margin-top:var(--fb-space-3);
}

/* Hero insulation toggle row */
.mhctl{
  display:flex; align-items:center; justify-content:center;
  gap:var(--fb-space-3);
  margin:var(--fb-space-3) 0 0;
  font-size:var(--fb-text-sm);
  font-weight:var(--fb-weight-bold);
  color:var(--fb-secondary);
}


/* =================================================================
   3 · JP CHROME (all screens)
   The speech bubble was clipping its own text.
   ================================================================= */

.jpbar{ gap:var(--fb-space-3); margin-bottom:var(--fb-space-3); }
.jpbub{
  background:var(--fb-surface);
  border-radius:var(--fb-radius-lg);
  box-shadow:var(--fb-shadow-sm);
  border:1px solid var(--fb-border);
  padding:var(--fb-space-3) var(--fb-space-4);
  font-size:var(--fb-text-sm);
  line-height:var(--fb-leading-normal);
  color:var(--fb-text);
  /* JP types his line in (jpSay's typewriter in js/ui.js), so the
     bubble must never clamp height or the last words vanish as the
     line grows. */
  max-height:none;
  overflow:visible;
}

/* Progress bar */
.steps i{ height:6px; border-radius:var(--fb-radius-pill); }
.steps i.done{ background:var(--fb-primary); }
.steps i.now{ background:var(--fb-surface); box-shadow:0 0 0 2px var(--fb-primary) inset; }
.steplabel{
  font-family:var(--fb-font-mono);
  font-size:var(--fb-text-3xs);
  letter-spacing:var(--fb-tracking-caps);
  color:var(--fb-secondary);
  opacity:.85;
}


/* =================================================================
   4 · SCREEN 1 · YOUR HOME
   Problems fixed: oversized bare number box, flat option chips,
   inconsistent block spacing.
   ================================================================= */

/* Home-type cards: clear selected state with an accent rail. */
.homecards label{
  border-radius:var(--fb-radius-lg);
  border:2px solid var(--fb-border);
  background:var(--fb-surface);
  padding:var(--fb-space-4);
  gap:var(--fb-space-3);
  transition:var(--fb-transition-all);
}
.homecards label:hover{ border-color:var(--fb-accent); }
.homecards label:has(input:checked){
  border-color:var(--fb-secondary);
  background:var(--fb-secondary-subtle);
  box-shadow:var(--fb-shadow-sm);
}
.homecards label:has(input:focus-visible){ box-shadow:var(--fb-ring); }
.homecards .t b{ font-size:var(--fb-text-base); color:var(--fb-text); }
.homecards .t small{ font-size:var(--fb-text-sm); color:var(--fb-text-muted); }

/* Square-footage: mono figure, tighter box, paired with its slider. */
#sqft{
  font-family:var(--fb-font-mono);
  font-variant-numeric:tabular-nums;
  font-size:var(--fb-text-xl);
  font-weight:var(--fb-weight-semi);
  text-align:center;
  color:var(--fb-secondary);
  border-radius:var(--fb-radius-md);
  border:2px solid var(--fb-border);
  background:var(--fb-surface-sunken);
  padding:var(--fb-space-3);
}
#sqft:focus{ border-color:var(--fb-accent); box-shadow:var(--fb-ring); }

/* Segmented option chips (access, material) */
.opts label{
  border-radius:var(--fb-radius-md);
  border:2px solid var(--fb-border);
  background:var(--fb-surface);
  padding:var(--fb-space-3);
  min-height:var(--fb-control-height);
  font-size:var(--fb-text-sm);
  transition:var(--fb-transition-all);
}
.opts label:hover{ border-color:var(--fb-accent); }
.opts label small{ font-size:var(--fb-text-2xs); color:var(--fb-text-muted); }
.opts label:has(input:checked){
  background:var(--fb-secondary);
  border-color:var(--fb-secondary);
  color:var(--fb-secondary-contrast);
  box-shadow:var(--fb-shadow-sm);
}
.opts label:has(input:checked) small{ color:var(--fb-text-inverse-muted); }
.opts label:has(input:focus-visible){ box-shadow:var(--fb-ring); }

/* Select + textarea consistency */
select, textarea,
input[type=text], input[type=tel], input[type=email]{
  border-radius:var(--fb-radius-md);
  border:2px solid var(--fb-border);
  background:var(--fb-surface-sunken);
  font-size:var(--fb-text-base);
  min-height:var(--fb-control-height);
}
select:focus, textarea:focus,
input[type=text]:focus, input[type=tel]:focus, input[type=email]:focus{
  border-color:var(--fb-accent);
  background:var(--fb-surface);
  box-shadow:var(--fb-ring);
}

/* "Your attic today" readout — an informational card, not a plain box. */
.todaybox{
  border-radius:var(--fb-radius-lg);
  background:var(--fb-accent-subtle);
  border:1px solid var(--fb-accent);
  border-left-width:4px;
  padding:var(--fb-space-4);
  margin-top:var(--fb-space-5);
}
.todaybox .tb1{
  font-weight:var(--fb-weight-bold);
  font-size:var(--fb-text-base);
  color:var(--fb-secondary);
  margin-bottom:var(--fb-space-1);
}
.todaybox .tb2{
  font-size:var(--fb-text-sm);
  line-height:var(--fb-leading-relaxed);
  color:var(--fb-text-muted);
}

/* Vermiculite warning — this one has to look serious. */
.alert{
  border-radius:var(--fb-radius-lg);
  background:var(--fb-warning-subtle);
  border:1px solid var(--fb-warning);
  border-left-width:4px;
  padding:var(--fb-space-4);
  font-size:var(--fb-text-sm);
  line-height:var(--fb-leading-relaxed);
  margin-top:var(--fb-space-4);
}
.alert b{ display:block; color:var(--fb-warning-strong); margin-bottom:var(--fb-space-1); }


/* =================================================================
   5 · SCREEN 3 · TROUBLE SPOTS
   Problems fixed: rows read as a flat list; added/priced state was
   easy to miss.
   ================================================================= */

.missions{ display:grid; gap:var(--fb-space-2); margin:0 0 var(--fb-space-4); }
.missions li{
  border-radius:var(--fb-radius-md);
  background:var(--fb-surface-sunken);
  border:1px solid transparent;
  padding:var(--fb-space-3) var(--fb-space-4);
  font-size:var(--fb-text-sm);
  gap:var(--fb-space-3);
}
.missions li.done{
  background:var(--fb-success-subtle);
  border-color:var(--fb-success);
  color:var(--fb-success-strong);
}
.missions .cnt{ font-family:var(--fb-font-mono); font-size:var(--fb-text-xs); }

.spotlist{ display:grid; gap:var(--fb-space-2); }
.spot{
  border-radius:var(--fb-radius-lg);
  border:2px solid var(--fb-border);
  background:var(--fb-surface);
  padding:var(--fb-space-4);
  gap:var(--fb-space-3);
  min-height:var(--fb-control-height);
  transition:var(--fb-transition-all);
}
.spot:hover{ border-color:var(--fb-accent); }
.spot.open{ border-color:var(--fb-secondary); box-shadow:var(--fb-shadow-sm); }
.spot.added{
  border-color:var(--fb-success);
  background:var(--fb-success-subtle);
}
.spot .t b{ font-size:var(--fb-text-base); }
.spot .t small{ font-size:var(--fb-text-sm); color:var(--fb-text-muted); }
.spot .chk{
  font-family:var(--fb-font-mono);
  font-size:var(--fb-text-xs);
  font-weight:var(--fb-weight-bold);
  color:var(--fb-text-muted);
}
.spot.added .chk{ color:var(--fb-success-strong); }

.spotbody{
  border-radius:var(--fb-radius-md);
  background:var(--fb-surface-sunken);
  border-left:4px solid var(--fb-primary);
  padding:var(--fb-space-4);
  font-size:var(--fb-text-sm);
  line-height:var(--fb-leading-relaxed);
  margin:0 0 var(--fb-space-1);
}


/* =================================================================
   6 · SCREEN 4 · PACKAGES  — the conversion screen
   Problems fixed: tiers were monotonous and hard to scan, the
   selected state barely registered, price hierarchy was weak, and
   the "MOST POPULAR" tier hid behind the dock.
   ================================================================= */

#pkgList{ display:grid; gap:var(--fb-space-3); }

.pkg{
  border-radius:var(--fb-radius-xl);
  border:2px solid var(--fb-border);
  background:var(--fb-surface);
  box-shadow:var(--fb-shadow-sm);
  padding:var(--fb-space-5);
  transition:var(--fb-transition-all);
  position:relative;
}
.pkg:hover{ border-color:var(--fb-accent); box-shadow:var(--fb-shadow-md); }

/* Selected tier: unmistakable. Accent rail + lift + ring. */
.pkg:has(input:checked){
  border-color:var(--fb-secondary);
  box-shadow:var(--fb-shadow-md), 0 0 0 3px var(--fb-secondary-subtle);
  transform:translateY(-2px);
}
.pkg:has(input:checked)::before{
  content:"";
  position:absolute; left:0; top:var(--fb-space-5); bottom:var(--fb-space-5);
  width:4px; border-radius:var(--fb-radius-pill);
  background:var(--fb-secondary);
}
.pkg:has(input:focus-visible){ box-shadow:var(--fb-ring); }

/* Tier name + price */
.pkg .nm{
  font-family:var(--fb-font-display);
  font-variation-settings:var(--fb-vf-label);
  font-size:var(--fb-text-sm);
  letter-spacing:var(--fb-tracking-wide);
  text-transform:uppercase;
  color:var(--fb-text-muted);
}
.pkg:has(input:checked) .nm{ color:var(--fb-secondary); }
.pkg .pr{
  font-family:var(--fb-font-mono);
  font-variant-numeric:tabular-nums;
  font-size:var(--fb-text-2xl);
  font-weight:var(--fb-weight-semi);
  color:var(--fb-secondary);
  line-height:1;
}
.pkg .step{
  font-family:var(--fb-font-mono);
  font-size:var(--fb-text-2xs);
  color:var(--fb-primary-active);
  margin-top:var(--fb-space-1);
}

/* Feature list */
.pkg ul{ margin:var(--fb-space-4) 0 0; display:grid; gap:var(--fb-space-2); }
.pkg li{
  font-size:var(--fb-text-sm);
  line-height:var(--fb-leading-snug);
  padding-left:var(--fb-space-6);
}
.pkg li.new{ color:var(--fb-primary-active); font-weight:var(--fb-weight-bold); }
.pkg li.new em{
  background:var(--fb-primary);
  color:var(--fb-text-on-primary);
  border-radius:var(--fb-radius-xs);
  font-size:var(--fb-text-3xs);
  letter-spacing:var(--fb-tracking-wide);
  padding:2px 6px;
}

/* Ribbon tags (MOST POPULAR / BEST VALUE).
   components.css renders these as a centred tab attached to the card's
   top edge (.tag.ribbon + .pkg.hasrib padding). That's a deliberate
   design, so this keeps the placement and only fixes legibility — the
   original 10px was below comfortable reading on every device tested.
   Matching .tag.ribbon specificity so it actually wins. */
.pkg .tag{
  background:var(--fb-primary);
  color:var(--fb-text-on-primary);
  font-family:var(--fb-font-mono);
}
.pkg .tag.ribbon{
  font-size:var(--fb-text-2xs);       /* 11px, was 10px */
  letter-spacing:.10em;
  padding:var(--fb-space-1) var(--fb-space-4);
  border-radius:0 0 var(--fb-radius-sm) var(--fb-radius-sm);
  box-shadow:var(--fb-shadow-sm);
}
/* Max Renewal's BEST VALUE reads as the premium tier */
.pkg:last-child .tag.ribbon{ background:var(--fb-secondary); }

.pkg .more{
  margin-top:var(--fb-space-3);
  font-size:var(--fb-text-sm);
  font-weight:var(--fb-weight-bold);
  color:var(--fb-accent);
  min-height:var(--fb-tap-target);
  display:inline-flex; align-items:center;
}


/* =================================================================
   7 · SCREEN 5 · RESULTS
   Problems fixed: the win panel was dense and dark-on-dark, the
   evaluation rows were cramped, the booking form read as a wall.
   ================================================================= */

/* Celebration panel */
.congrats{
  padding:var(--fb-space-6) var(--fb-space-5);
  background:linear-gradient(160deg, var(--fb-navy-500), var(--fb-navy-400));
}
.congrats h2{
  font-family:var(--fb-font-display);
  font-variation-settings:var(--fb-vf-display);
  font-size:var(--fb-text-2xl);
  letter-spacing:var(--fb-tracking-tight);
  color:var(--fb-text-inverse);
  margin:var(--fb-space-2) 0 var(--fb-space-1);
}
.congrats p{ color:var(--fb-text-inverse-muted); font-size:var(--fb-text-sm); }

/* The headline savings number — the single biggest thing on the page. */
.bigsave{
  margin:var(--fb-space-5) 0;
  padding:var(--fb-space-5);
  border-radius:var(--fb-radius-lg);
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
}
.bigsave .n{
  display:block;
  font-family:var(--fb-font-mono);
  font-variant-numeric:tabular-nums;
  font-size:var(--fb-text-metric);
  font-weight:var(--fb-weight-semi);
  line-height:1;
  color:var(--fb-success);
}
.bigsave small{
  display:block;
  margin-top:var(--fb-space-2);
  font-size:var(--fb-text-sm);
  color:var(--fb-text-inverse-muted);
}

/* Win rows */
.wins{ display:grid; gap:var(--fb-space-2); margin-top:var(--fb-space-4); }
.wins div{
  border-radius:var(--fb-radius-md);
  background:rgba(255,255,255,.12);
  padding:var(--fb-space-3) var(--fb-space-4);
  font-size:var(--fb-text-sm);
  gap:var(--fb-space-3);
}
.wins b{
  font-family:var(--fb-font-mono);
  color:#FFC79A;
  font-size:var(--fb-text-base);
}

/* Badge shelf */
.shelf{ gap:var(--fb-space-2); margin-top:var(--fb-space-5); }
.shelf div{
  border-radius:var(--fb-radius-md);
  background:rgba(255,255,255,.14);
  padding:var(--fb-space-3) var(--fb-space-2);
}
.shelf div .n{ font-size:var(--fb-text-2xs); }

/* Evaluation rows — give each graded line room to read. */
#evalRows > *{ padding:var(--fb-space-3) 0; }

/* Estimate line items */
.line{
  padding:var(--fb-space-3) 0;
  font-size:var(--fb-text-sm);
  gap:var(--fb-space-4);
  border-bottom:1px dashed var(--fb-divider);
}
.line span:last-child{ font-family:var(--fb-font-mono); font-variant-numeric:tabular-nums; }
.line.disc span{ color:var(--fb-primary-active); font-weight:var(--fb-weight-bold); }
.line.total{
  border-top:2px solid var(--fb-text);
  margin-top:var(--fb-space-3);
  padding-top:var(--fb-space-4);
  font-size:var(--fb-text-lg);
  font-weight:var(--fb-weight-black);
}

/* Member callout */
.member{
  border-radius:var(--fb-radius-lg);
  background:var(--fb-primary-subtle);
  border:1px solid var(--fb-primary);
  border-left-width:4px;
  padding:var(--fb-space-4);
  margin-top:var(--fb-space-4);
  font-size:var(--fb-text-sm);
  line-height:var(--fb-leading-relaxed);
}
.member b{ color:var(--fb-primary-active); }

.qid{
  font-family:var(--fb-font-mono);
  font-size:var(--fb-text-2xs);
  letter-spacing:var(--fb-tracking-wide);
  color:var(--fb-text-subtle);
  margin-top:var(--fb-space-4);
}

/* Booking form: label/field rhythm so it stops reading as a wall. */
.two{ display:grid; grid-template-columns:1fr 1fr; gap:var(--fb-space-3); }
@media (max-width:430px){ .two{ grid-template-columns:1fr; } }

.secure{
  font-size:var(--fb-text-sm);
  color:var(--fb-text-muted);
  text-align:center;
  margin:var(--fb-space-4) 0 var(--fb-space-3);
}
.contactrow{ display:grid; grid-template-columns:1fr 1fr; gap:var(--fb-space-3); margin-top:var(--fb-space-3); }
.fine{
  font-size:var(--fb-text-2xs);
  line-height:var(--fb-leading-relaxed);
  color:var(--fb-text-muted);
  margin-top:var(--fb-space-5);
}

/* Learn-more disclosures */
.learn{
  border-radius:var(--fb-radius-md);
  border:1px solid var(--fb-border);
  background:var(--fb-surface-sunken);
  padding:var(--fb-space-3) var(--fb-space-4);
  margin-top:var(--fb-space-4);
}
.learn summary{
  font-size:var(--fb-text-sm);
  font-weight:var(--fb-weight-bold);
  color:var(--fb-secondary);
  cursor:pointer;
  min-height:var(--fb-tap-target);
  display:flex; align-items:center;
}
.learn .body{
  font-size:var(--fb-text-sm);
  line-height:var(--fb-leading-relaxed);
  color:var(--fb-text-muted);
  padding-top:var(--fb-space-2);
}


/* =================================================================
   8 · BUTTONS + DOCK  (every screen)
   ================================================================= */

.btn{
  border-radius:var(--fb-radius-md);
  font-family:var(--fb-font-display);
  font-variation-settings:var(--fb-vf-label);
  font-size:var(--fb-text-md);
  min-height:var(--fb-control-height-lg);
  background:var(--fb-primary);
  color:var(--fb-text-on-primary);
  box-shadow:var(--fb-shadow-press);
  transition:var(--fb-transition-all);
}
.btn:hover{ background:var(--fb-primary-hover); box-shadow:var(--fb-shadow-press-hover); }
.btn:active{ transform:translateY(3px); box-shadow:var(--fb-shadow-press-active); }
.btn:focus-visible{ outline:none; box-shadow:var(--fb-ring), var(--fb-shadow-press); }

.btn.ghost{
  background:var(--fb-surface);
  color:var(--fb-secondary);
  box-shadow:0 4px 0 var(--fb-border-edge), var(--fb-shadow-sm);
}
.btn.ghost:hover{ background:var(--fb-surface-sunken); }
.btn.sm{ font-size:var(--fb-text-sm); min-height:var(--fb-control-height); }

/* Dock: a proper frosted bar instead of a hard band. */
.dock{
  padding:var(--fb-space-3) var(--fb-gutter) calc(var(--fb-space-3) + env(safe-area-inset-bottom));
  background:linear-gradient(180deg, rgba(234,247,255,0), rgba(234,247,255,.94) 38%, #EAF7FF 100%);
  backdrop-filter:blur(var(--fb-glass-blur)) saturate(var(--fb-glass-saturate));
}
.dock .in{ gap:var(--fb-space-3); }
.dock .price small{
  font-family:var(--fb-font-mono);
  font-size:var(--fb-text-3xs);
  letter-spacing:var(--fb-tracking-caps);
  color:var(--fb-secondary);
  opacity:.75;
}
.dock .price strong{
  font-family:var(--fb-font-mono);
  font-variant-numeric:tabular-nums;
  font-size:var(--fb-text-lg);
  color:var(--fb-secondary);
}


/* =================================================================
   9 · ACCESSIBILITY + MOTION
   ================================================================= */

/* One consistent, visible focus ring across the whole tool. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{
  outline:none;
  box-shadow:var(--fb-ring);
  border-radius:var(--fb-radius-sm);
}

@media (prefers-reduced-motion: reduce){
  .pkg, .spot, .homecards label, .btn{ transition:none; }
  .pkg:has(input:checked){ transform:none; }
}


/* =================================================================
   10 · SMALL SCREENS
   ================================================================= */

@media (max-width:380px){
  .card, .quote{ padding:var(--fb-space-4); }
  .pkg{ padding:var(--fb-space-4); }
  .tbadges{ grid-template-columns:1fr; }
  .hero h1{ font-size:var(--fb-text-2xl); }
}

/* Personalize gear: was 38px, below the comfortable tap minimum. */
.twgear{
  min-width:var(--fb-tap-target);
  min-height:var(--fb-tap-target);
  display:flex; align-items:center; justify-content:center;
}

/* =================================================================
   11 · TROPHY TOAST  (KNOWN_ISSUES 14)
   Was position:fixed at top:22% — dead centre over the house panel on
   screen 2, so the celebration covered the thing being celebrated.
   Moved to a top banner that clears the JP bar and the house, with a
   token treatment to match the rest of the tool.
   ================================================================= */
.trophy{
  top:auto;
  bottom:calc(96px + env(safe-area-inset-bottom));  /* above the dock */
  left:50%;
  transform:translate(-50%, 12px) scale(.94);
  width:calc(100% - (var(--fb-gutter) * 2));
  max-width:var(--fb-container-md);
  border-radius:var(--fb-radius-xl);
  box-shadow:var(--fb-shadow-lg);
  border:1px solid var(--fb-border);
  padding:var(--fb-space-4) var(--fb-space-5);
  display:flex; align-items:center; gap:var(--fb-space-3);
  text-align:left;
}
.trophy.on{ transform:translate(-50%, 0) scale(1); }
.trophy .e{ font-size:32px; flex:0 0 auto; }
.trophy b{
  font-size:var(--fb-text-base);
  color:var(--fb-secondary);
  margin-top:0;
}
.trophy span{
  font-size:var(--fb-text-sm);
  color:var(--fb-text-muted);
  margin-top:2px;
}

/* NEW badges on feature lines were 10px — bumped for legibility. */
.pkg li.new em{ font-size:var(--fb-text-2xs); letter-spacing:.10em; }

/* The dock CTA is the primary action on every screen, so its focus
   state has to be unmistakable. The .btn press-shadow was occupying
   box-shadow, so the ring never showed for keyboard users; use an
   outline instead, which composes rather than competes. */
.btn:focus-visible,
.dock .btn:focus-visible{
  outline:3px solid var(--fb-secondary);
  outline-offset:3px;
  box-shadow:var(--fb-shadow-press);
}
.btn.ghost:focus-visible{
  outline:3px solid var(--fb-accent);
  outline-offset:3px;
}