:root {
  /* ---------- Dark redesign (Oct 2026) — see DESIGN_SYSTEM.md Section U.
     Token NAMES are unchanged on purpose: every existing rule that already
     reads var(--surface-warm), var(--plum), var(--text-primary) etc. picks
     up the new dark palette automatically. Only the values below changed. */

  /* Surfaces (exact values per the Oct 2026 navigation/hero/shelf spec) */
  --white: #ffffff;
  --bg-page: #08080c;
  --bg-elevated: #111116;
  --bg-secondary: #1d1c26;
  --bg-card: #17171f;
  --surface-warm: var(--bg-page);
  --surface-warm-2: var(--bg-secondary);

  /* Brand — purple system */
  --plum: #7c3aed; /* primary purple */
  --plum-dark: #8b5cf6; /* hover purple (lighter, not darker, on dark bg) */
  --plum-bright: #a78bfa; /* bright accent (existing components) */
  --plum-vivid: #9d6cff; /* "bright purple" — active nav icon/indicator */
  --plum-pale: #b9a0ff; /* "soft purple" — hero eyebrow, card category labels */
  --plum-deep: #3b1d5a; /* deep plum — tinted surfaces, Local Tip */
  --plum-soft: #241530; /* subtle purple-tinted card bg (Best Value, selected) */
  --plum-light: #1c1226; /* even subtler purple tint (ghost states) */

  /* Neutral text */
  --text-primary: #f7f7f8;
  --text-secondary: #a4a4af;
  --text-muted: #8a8a94;
  --nav-inactive: #777782; /* mobile bottom-nav inactive icon/label only */

  /* Lines */
  --border: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.06);

  /* Spacing scale */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* Radius */
  --r-btn: 10px;
  --r-tile: 16px;
  --r-card-sm: 14px;
  --r-card-lg: 20px;
  --r-hero: 22px;
  --r-input: 12px;
  --r-pill: 999px;

  --page-pad: 20px;
  --nav-h: 64px;
  --top-nav-h: 64px;

  /* ---------- Shared aliases ---------- */
  /* Additive only: every token above is untouched, so every rule that
     already reads var(--plum), var(--sp-*), var(--r-*) etc. directly still
     works. These back the onboarding-shell screens and the dark redesign's
     new components alike — see DESIGN_SYSTEM.md Section K/U. */

  /* Brand (aliases onto the existing plum family — no new hues introduced) */
  --brand-primary: var(--plum);
  --brand-deep: var(--plum-dark);
  --brand-muted: var(--plum-soft);
  --brand-soft: var(--plum-light);

  /* Background layers */
  --bg-alt: var(--bg-secondary);
  --bg-surface: var(--bg-elevated);

  /* Borders */
  --line-subtle: var(--divider);
  --line-default: var(--border);
  --line-strong: rgba(255, 255, 255, 0.14);

  /* Status — brightened for dark-background legibility. --status-danger
     refines the inline #a33 previously hardcoded on .auth-error into a
     documented, reusable value of the same hue family. */
  --status-success: #34d399;
  --status-success-soft: rgba(52, 211, 153, 0.12);
  --status-danger: #f87171;
  --status-danger-soft: rgba(248, 113, 113, 0.1);
  --status-danger-border: rgba(248, 113, 113, 0.28);
  --status-info: var(--brand-primary);
  --status-info-soft: var(--brand-muted);

  /* Interaction — hover/active go BRIGHTER on a dark surface, not darker */
  --interactive-hover: var(--plum-dark);
  --interactive-active: var(--plum-bright);

  /* Typography scale */
  --font-display: "Familjen Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  --fs-eyebrow: 12.5px;
  --fs-caption: 13px;
  --fs-label: 13px;
  --fs-body-sm: 14px;
  --fs-body: 15.5px;
  --fs-body-lg: 17px;
  --fs-card-title: 19px;
  --fs-section-title: 26px;
  --fs-h4: 19px;
  --fs-h3: 22px;
  --fs-h2: 27px;
  --fs-h1: 38px;
  --fs-display: 52px;
  --fs-display-mobile: 34px;
  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-normal: 1.55;
  --lh-relaxed: 1.65;
  --tracking-tight: -0.01em;
  --tracking-wide: 0.03em;

  /* Motion */
  --ease-out-warm: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-fast: 150ms;
  --motion-base: 220ms;

  /* Shadow — soft only, no purple glow except where noted in component CSS */
  --shadow-soft: 0 8px 30px rgba(0, 0, 0, 0.25);
  --shadow-card-hover: 0 12px 36px rgba(0, 0, 0, 0.35);
}

/* Familjen Grotesk — self-hosted, per Phase 3.7 (DESIGN_SYSTEM.md Section T).
   Single variable-font file (wght 400-700), ~18.4KB, SIL OFL 1.1 licensed
   (see assets/fonts/OFL.txt) — no Google Fonts CDN request in production.
   Used only for brand/display headings (see the ".app.onboarding" rules
   further down); Inter remains the only font for functional UI, forms, and
   all 31 guides. font-display:swap avoids a render-blocking wait; no
   preload — display headings aren't the LCP element on any of these
   screens, so a preload isn't justified (see Section T for the measurement
   that backs this). */
@font-face {
  font-family: "Familjen Grotesk";
  src: url("assets/fonts/familjen-grotesk-variable.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* Inter — self-hosted too, as of the Stage 7 QA pass. Previously pulled from
   the Google Fonts CDN (fonts.googleapis.com / fonts.gstatic.com), which is
   an external request DESIGN_SYSTEM.md Section T rules out and a privacy /
   offline-resilience concern. Two variable subsets: latin (~48KB, the LCP
   text) and latin-ext (~85KB, only fetched when macron / accented text is on
   screen — matters for te reo Māori place names). SIL OFL 1.1, see
   assets/fonts/inter-OFL.txt. */
@font-face {
  font-family: "Inter";
  src: url("assets/fonts/inter-variable-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  src: url("assets/fonts/inter-variable-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  line-height: 1.6;
}

button {
  font-family: inherit;
}

a {
  color: inherit;
}

/* Visually hidden but available to screen readers (Stage 7). */
.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;
}

/* One consistent keyboard-focus treatment for every interactive control —
   subtle, brand-coloured, never relies on color alone since it's a visible
   ring, not a color swap.
   Stage 7: the old ring was var(--plum) on a 2px offset. On the primary
   CTAs (which are themselves var(--plum)) that outline was effectively
   invisible — a WCAG 2.4.7 failure. Now: a deep-plum outline PLUS a 2px
   white halo hugging the element, so the ring reads on both the light
   surfaces and the plum/stage-coloured buttons. */
button:focus-visible,
a:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--plum-dark);
  outline-offset: 3px;
  box-shadow: 0 0 0 2px var(--white);
  border-radius: 4px;
}

.app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  position: relative;
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + var(--sp-4));
}
@media (min-width: 768px) {
  .app { padding-bottom: 0; padding-top: var(--top-nav-h); }
}

#view-root {
  padding: var(--sp-6) var(--page-pad) var(--sp-8);
}

/* ---------- Typography ---------- */
h1,
h2,
h3 {
  font-weight: 600;
  margin: 0;
  color: var(--text-primary);
}

.page-heading {
  font-size: 26px;
  font-weight: 600;
  margin: 0 0 var(--sp-1);
}

.page-sub {
  font-size: 15px;
  color: var(--text-secondary);
  margin: 0 0 var(--sp-6);
}

.section-heading {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 var(--sp-3);
}

/* ---------- Page header (back + title) ---------- */
.page-header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}

.back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-btn);
  border: none;
  background: var(--surface-warm);
  color: var(--text-primary);
  cursor: pointer;
  flex-shrink: 0;
}

.back-btn:hover {
  background: var(--surface-warm-2);
}

.page-header h1 {
  font-size: 22px;
}

/* ---------- Home header ---------- */
.home-brand-mark {
  height: 20px;
  width: auto;
  display: block;
  margin: 0 0 var(--sp-3);
}

.home-header {
  margin-bottom: var(--sp-6);
}

.greeting {
  font-size: 26px;
  font-weight: 600;
  margin: 0 0 2px;
}

.greeting-sub {
  font-size: 15px;
  color: var(--text-secondary);
  margin: 0;
}

/* ---------- Progress ---------- */
.progress-block {
  margin: var(--sp-6) 0;
}

.progress-block .row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--sp-2);
}

.progress-block .label {
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: 500;
}

.progress-block .pct {
  font-size: 14px;
  font-weight: 600;
  color: var(--plum);
}

.progress-track {
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--plum-soft);
  overflow: hidden;
}

.progress-track > .fill {
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--plum);
  transition: width 0.4s ease;
}

/* ---------- Featured task ---------- */
.featured-task {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--plum-light);
  border: none;
  border-radius: var(--r-tile);
  padding: var(--sp-6);
  cursor: pointer;
  margin-bottom: var(--sp-6);
}

.featured-task .eyebrow {
  font-size: 13px;
  font-weight: 600;
  color: var(--plum);
  margin: 0 0 var(--sp-2);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.featured-task h3 {
  font-size: 19px;
  margin: 0 0 var(--sp-2);
}

.featured-task p {
  font-size: 14.5px;
  color: var(--text-secondary);
  margin: 0 0 var(--sp-4);
  line-height: 1.55;
}

.featured-task .foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.time-chip {
  font-size: 13px;
  color: var(--plum-dark);
  background: var(--plum-soft);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-weight: 500;
}

.cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--plum);
  color: var(--white);
  font-size: 14px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: var(--r-btn);
  border: none;
}

.all-caught-up {
  background: var(--surface-warm);
  border-radius: var(--r-tile);
  padding: var(--sp-6);
  margin-bottom: var(--sp-6);
  text-align: center;
}

.all-caught-up h3 {
  font-size: 18px;
  margin-bottom: var(--sp-1);
}

.all-caught-up p {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
}

/* ---------- Secondary next steps (rows) ---------- */
.next-steps {
  margin-bottom: var(--sp-8);
}

.step-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid var(--divider);
  padding: var(--sp-4) 0;
  text-align: left;
  cursor: pointer;
}

.step-row:last-child {
  border-bottom: none;
}

.step-row .icon-wrap {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--surface-warm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--plum);
  flex-shrink: 0;
}

.step-row .txt {
  flex: 1;
  min-width: 0;
}

.step-row .txt .t {
  font-size: 15px;
  font-weight: 500;
  margin: 0;
}

.step-row .txt .m {
  font-size: 13px;
  color: var(--text-muted);
  margin: 2px 0 0;
}

.step-row .chev {
  color: var(--text-muted);
  flex-shrink: 0;
}

/* ---------- Big tiles (Explore by area) ---------- */
.tile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}

.tile {
  display: block;
  text-align: left;
  border: none;
  border-radius: var(--r-tile);
  padding: var(--sp-4);
  cursor: pointer;
  min-height: 128px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.tile.v-white {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
}

.tile.v-warm {
  background: var(--surface-warm);
}

.tile.v-plum {
  background: var(--plum-light);
}

.tile .icon-wrap {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--plum);
  margin-bottom: var(--sp-6);
}

.tile.v-white .icon-wrap {
  background: var(--surface-warm);
}

.tile .name {
  font-size: 15.5px;
  font-weight: 600;
  margin: 0 0 3px;
}

.tile .desc {
  font-size: 12.5px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.4;
}

.tile .tile-progress {
  margin-top: var(--sp-3);
  height: 4px;
  border-radius: var(--r-pill);
  background: rgba(91, 54, 93, 0.12);
  overflow: hidden;
}

.tile .tile-progress > .fill {
  height: 100%;
  background: var(--plum);
  border-radius: var(--r-pill);
}

/* Reference-only categories (no tracked tasks) show a neutral count instead
   of a progress bar — a 0% bar would falsely read as unfinished. */
.tile .tile-meta {
  margin-top: var(--sp-3);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-muted);
}

/* ---------- Category detail: item rows ---------- */
.item-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--divider);
}

.item-row:last-child {
  border-bottom: none;
}

.item-row input[type="checkbox"] {
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  flex-shrink: 0;
  margin-top: 1px;
  cursor: pointer;
  display: grid;
  place-content: center;
  background: var(--bg-elevated);
  transition: background 0.15s ease, border-color 0.15s ease;
}

.item-row input[type="checkbox"]::after {
  content: "";
  width: 12px;
  height: 12px;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  background: var(--bg-elevated);
  transform: scale(0);
  transition: transform 0.12s ease;
}

.item-row input[type="checkbox"]:checked {
  background: var(--plum);
  border-color: var(--plum);
}

.item-row input[type="checkbox"]:checked::after {
  transform: scale(1);
}

.item-row .txt {
  flex: 1;
  min-width: 0;
  text-align: left;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
}

.item-row .txt h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

.item-row.done .txt h3 {
  color: var(--text-muted);
  text-decoration: line-through;
  font-weight: 500;
}

.item-row .txt p {
  font-size: 14px;
  color: var(--text-secondary);
  margin: var(--sp-1) 0 0;
  line-height: 1.5;
}

.item-row .txt .meta-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
}

.item-row .txt .meta-row .mins {
  font-size: 12.5px;
  color: var(--text-muted);
}

.item-row .txt .view-steps {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 12.5px;
  color: var(--plum);
  font-weight: 600;
}

.category-blurb {
  font-size: 14.5px;
  color: var(--text-secondary);
  margin: 0 0 var(--sp-6);
}

/* ---------- Item detail (guide) ---------- */
.item-eyebrow {
  font-size: 13px;
  font-weight: 600;
  color: var(--plum);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0 0 var(--sp-2);
}

/* Journey-stage eyebrow. Stage 7: was inline-styled with the raw stage
   colour (e.g. #c9622b ~3.4:1 on white — fails AA). Uses the deep plum
   instead; stage identity is still carried by the trail, step numbers and
   the "Stage N · name" text itself. */
.item-eyebrow--stage {
  color: var(--plum-dark);
}

.item-title {
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 var(--sp-3);
  line-height: 1.3;
}

.item-intro {
  font-size: 15.5px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0 0 var(--sp-8);
}

.step-list {
  margin-bottom: var(--sp-6);
}

.step {
  display: flex;
  gap: var(--sp-3);
  padding-bottom: var(--sp-6);
  position: relative;
}

.step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 30px;
  bottom: 4px;
  width: 1px;
  background: var(--divider);
}

.step-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--stage-soft, var(--plum-soft));
  /* Stage 7: was var(--stage-color) — the raw stage hue on the pale
     stage-soft tint fell below 4.5:1. Deep plum on the tint is ~8:1. */
  color: var(--plum-dark);
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.step-body h2 {
  font-size: 15.5px;
  font-weight: 600;
  margin: 2px 0 4px;
}

.step-body p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0;
}

.step-body ul {
  margin: var(--sp-2) 0 0;
  padding-left: 18px;
}

.step-body ul li {
  font-size: 13.5px;
  color: var(--text-secondary);
  margin-bottom: 3px;
}

.fact-list {
  margin-bottom: var(--sp-6);
}

.fact-row {
  padding: 10px 0;
  border-bottom: 1px solid var(--divider);
  font-size: 14px;
}

.fact-row:last-child {
  border-bottom: none;
}

.fact-row .fact-label {
  display: block;
  color: var(--text-muted);
  font-size: 12.5px;
  margin-bottom: 3px;
}

.fact-row > span:last-child {
  color: var(--text-primary);
  font-weight: 500;
  line-height: 1.5;
}

.trust-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--surface-warm);
  border-radius: var(--r-input);
  padding: var(--sp-3) var(--sp-4);
  color: var(--text-secondary);
  font-size: 13px;
  margin-bottom: var(--sp-6);
}

.trust-row.verified {
  background: var(--plum-light);
}

.trust-row svg {
  color: var(--text-muted);
  flex-shrink: 0;
}

.trust-row.verified svg {
  color: var(--plum);
}

.trust-row a {
  color: var(--plum-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  /* Stage 7: was undecorated and the same colour as the body text — not
     clearly a link. Deep plum + underline reads as interactive; the small
     vertical padding gives it a taller tap target (it also sits inline in
     the "Verified information: …" sentence, so the WCAG 2.5.8 inline
     exception applies regardless). */
  display: inline-block;
  padding: 3px 0;
}

.mark-complete-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: var(--plum);
  color: var(--white);
  border: none;
  font-size: 15px;
  font-weight: 600;
  padding: 14px;
  border-radius: var(--r-btn);
  cursor: pointer;
}

.mark-complete-btn.done {
  background: var(--plum-soft);
  color: var(--plum-dark);
}

/* ---------- Plan view rows ---------- */
.plan-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid var(--divider);
  padding: var(--sp-4) 0;
  text-align: left;
  cursor: pointer;
}

.plan-row:last-child {
  border-bottom: none;
}

.plan-row .icon-wrap {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--surface-warm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--plum);
  flex-shrink: 0;
}

.plan-row.complete .icon-wrap {
  background: var(--plum-soft);
}

.plan-row .txt {
  flex: 1;
  min-width: 0;
}

.plan-row .txt .t {
  font-size: 15.5px;
  font-weight: 600;
  margin: 0 0 5px;
}

.plan-row .txt .track {
  height: 5px;
  border-radius: var(--r-pill);
  background: var(--surface-warm-2);
  overflow: hidden;
}

.plan-row .txt .track > .fill {
  height: 100%;
  background: var(--plum);
  border-radius: var(--r-pill);
}

.plan-row .frac {
  font-size: 13px;
  color: var(--text-muted);
  flex-shrink: 0;
  min-width: 30px;
  text-align: right;
}

/* ---------- Ask view ---------- */
.ask-input {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--surface-warm);
  border-radius: var(--r-input);
  padding: var(--sp-3) var(--sp-4);
  color: var(--text-muted);
  margin-bottom: var(--sp-6);
}

.ask-input input {
  border: none;
  background: none;
  outline: none;
  font-size: 15px;
  flex: 1;
  color: var(--text-primary);
  font-family: inherit;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-6);
}

.chip {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  /* Stage 7: min tap target (was ~34px tall). */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 16px;
  font-size: 13.5px;
  color: var(--text-primary);
  cursor: pointer;
}

/* ---------- Account / auth ---------- */
.auth-input {
  width: 100%;
  max-width: 320px;
  margin-bottom: var(--sp-4);
}

.auth-input input {
  border: none;
  background: none;
  outline: none;
  font-size: 15px;
  flex: 1;
  min-width: 0;
  color: var(--text-primary);
  font-family: inherit;
}

.auth-hint {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: var(--sp-2) 0 var(--sp-4);
  max-width: 320px;
}

.auth-error {
  font-size: 13.5px;
  color: #a33;
  margin: 0 0 var(--sp-3);
  max-width: 320px;
}

.account-block {
  background: var(--surface-warm);
  border-radius: var(--r-tile);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
}

.account-label {
  font-size: 12.5px;
  color: var(--text-muted);
  margin: 0 0 2px;
}

.account-email {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 var(--sp-2);
  word-break: break-word;
}

.account-status {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--plum);
  margin: 0;
  line-height: 1.5;
}

.account-status.muted {
  color: var(--text-secondary);
  font-weight: 400;
}

/* ---------- Search results ---------- */
.step-row.search-result {
  align-items: flex-start;
  padding: var(--sp-4) 0;
}

.step-row.search-result .icon-wrap {
  margin-top: 2px;
}

.result-eyebrow {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0 0 3px;
}

.step-row.search-result .txt .t {
  font-size: 15.5px;
  font-weight: 600;
  margin: 0;
}

.result-desc {
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.45;
  margin: 3px 0 0;
}

#search-popular .section-label {
  margin-bottom: var(--sp-3);
}

.ask-note {
  background: var(--surface-warm);
  border-radius: var(--r-tile);
  padding: var(--sp-4);
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ---------- Profile view ---------- */
.profile-summary {
  background: var(--surface-warm);
  border-radius: var(--r-tile);
  padding: var(--sp-6);
  margin-bottom: var(--sp-6);
  text-align: center;
}

.profile-summary .big-pct {
  font-size: 36px;
  font-weight: 600;
  color: var(--plum);
  margin: 0;
}

.profile-summary .lbl {
  font-size: 14px;
  color: var(--text-secondary);
  margin: var(--sp-1) 0 0;
}

.profile-note {
  background: var(--plum-light);
  border-radius: var(--r-tile);
  padding: var(--sp-4);
  font-size: 14px;
  color: var(--plum-dark);
  line-height: 1.6;
  margin-bottom: var(--sp-6);
}

.text-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 14px;
  text-decoration: underline;
  cursor: pointer;
  /* Stage 7: give standalone text buttons a real ~44px tap target
     (they were ~17px tall). Inline-flex keeps them sitting like text. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
}

/* ---------- Bottom nav ---------- */
.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--bg-elevated);
  border-top: 1px solid var(--divider);
  display: flex;
  max-width: 480px;
  margin: 0 auto;
  z-index: 20;
}

.nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 8px 0 12px;
}

.nav-btn .label {
  font-size: 11px;
  font-weight: 500;
}

.nav-btn.active {
  color: var(--plum);
}

/* Home uses the real AfterLanding brand mark (raster, true colors) instead of
   the outline icon set. Sized by height only so its natural aspect ratio
   (~0.79) is preserved — never stretched to a square like the other icons. */
.brand-home-icon {
  height: 29px;
  width: auto;
  display: block;
  filter: grayscale(1) opacity(0.55);
}

.nav-btn.active .brand-home-icon {
  filter: none;
}

/* ---------- Onboarding shell ---------- */
.app.onboarding {
  padding-bottom: var(--sp-6);
}

.onboard-shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: var(--sp-8);
  min-height: calc(100vh - var(--sp-12));
}

.brand-mark {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--plum-soft);
  color: var(--plum);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-6);
}

/* ---------- Consistent small AfterLanding branding ---------- */
/* Centred-column screens (onboarding/payoff/paywall/auth/checkout): a tiny
   mark above the screen's own status icon. Deliberately small — see
   brandTopmark() in app.js. Sits above .brand-mark, which had its own
   bottom margin trimmed slightly so this doesn't add much net height on
   space-tight screens (paywall, OTP entry). */
.brand-topmark {
  height: 18px;
  width: auto;
  display: block;
  margin: 0 auto var(--sp-2);
}

/* Row-header screens (Journey/category/guide/Search/Profile, via
   renderHomeBtn()): sits beside the existing "Home" pill at the top-right,
   adding no new row/height at all. */
.topbar-brand-group {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.topbar-brand-mark {
  height: 20px;
  width: auto;
  flex-shrink: 0;
}

.brand-mark.done-mark {
  background: var(--plum);
  color: var(--white);
}

.welcome-logo {
  width: min(72%, 260px);
  height: auto;
  margin-bottom: var(--sp-8);
}

.onboard-illustration {
  margin-bottom: var(--sp-8);
}

.onboard-heading {
  font-size: 30px;
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 var(--sp-3);
  max-width: 320px;
}

.onboard-sub {
  font-size: 16px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0 0 var(--sp-8);
  max-width: 320px;
}

.cta-full {
  display: block;
  width: 100%;
  background: var(--plum);
  color: var(--white);
  border: none;
  font-size: 16px;
  font-weight: 600;
  padding: 15px;
  border-radius: var(--r-btn);
  cursor: pointer;
  margin-bottom: var(--sp-3);
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
  transition: opacity 0.15s ease;
}

.cta-full:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.action-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: var(--sp-2);
}

/* ---------- Guide detail sections ---------- */
.who-block {
  margin-bottom: var(--sp-4);
}

.who-block p {
  font-size: 14.5px;
  color: var(--text-secondary);
  margin: 0 0 4px;
  line-height: 1.55;
}

.who-block .eligibility {
  color: var(--text-muted);
  font-size: 13.5px;
}

.need-list {
  list-style: none;
  margin: 0 0 var(--sp-6);
  padding: 0;
}

.need-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  font-size: 14.5px;
  color: var(--text-primary);
  padding: 7px 0;
}

.need-list li svg {
  color: var(--plum);
  flex-shrink: 0;
  margin-top: 2px;
}

.where-block {
  font-size: 14.5px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0 0 var(--sp-6);
}

.section-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0 0 var(--sp-2);
}

.other-actions {
  margin-bottom: var(--sp-6);
}

.action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-btn);
  margin-bottom: 8px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
}

.action-row svg {
  color: var(--text-muted);
  flex-shrink: 0;
}

.trouble-list {
  margin-bottom: var(--sp-2);
}

.trouble-row {
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--divider);
}

.trouble-row:last-child {
  border-bottom: none;
}

.trouble-row .q {
  font-size: 14.5px;
  font-weight: 600;
  margin: 0 0 4px;
}

.trouble-row .a {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0;
}

.next-note {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0 0 var(--sp-6);
}

.next-note .fact-label {
  display: block;
  font-size: 12.5px;
  color: var(--text-muted);
  margin-bottom: 3px;
}

/* ---------- Questionnaire ---------- */
.q-header {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-8);
}

.q-progress {
  flex: 1;
}

.q-count {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
  display: block;
  margin-bottom: 6px;
}

.q-track {
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--divider);
  overflow: hidden;
}

.q-track > .fill {
  height: 100%;
  background: var(--plum);
  border-radius: var(--r-pill);
  transition: width 0.3s ease;
}

.q-prompt {
  font-size: 26px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 var(--sp-2);
}

.q-sub {
  font-size: 15px;
  color: var(--text-secondary);
  margin: 0 0 var(--sp-6);
}

.option-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  /* Generous bottom clearance so the fixed .q-cta-bar (~100px + safe-area)
     never covers the last option — better a little extra whitespace than a
     hidden choice. */
  margin: var(--sp-6) 0 140px;
}

.option-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: var(--bg-elevated);
  border: 1.5px solid var(--border);
  border-radius: var(--r-btn);
  padding: 16px 18px;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.option-row.selected {
  border-color: var(--plum);
  background: var(--plum-light);
  color: var(--plum-dark);
}

.option-row.selected svg {
  color: var(--plum);
}

/* Reveals the less-common options on a long question — deliberately plainer
   than .option-row so it doesn't read as a selectable choice itself. */
.option-more-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  background: none;
  border: 1.5px dashed var(--border);
  border-radius: var(--r-btn);
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
}

.option-more-btn svg {
  transform: rotate(90deg);
}

/* Continue stays fixed to the viewport bottom so it's never something the
   user has to scroll to discover — the question/options above scroll
   normally underneath it if they don't fit. Same fixed+max-width+centred
   technique as .bottom-nav, so it lines up identically on wide screens. */
.q-cta-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 480px;
  margin: 0 auto;
  background: var(--bg-elevated);
  border-top: 1px solid var(--divider);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
  padding: var(--sp-4) var(--page-pad) calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
  /* Above .bottom-nav's z-index (20): that element stays in the DOM with its
     own solid background even when emptied out during onboarding/paywall
     screens (render() sets its innerHTML to "", not display:none), so
     without this these bars would be covered by it. */
  z-index: 25;
}

.q-cta-bar .cta-full {
  margin-bottom: 0;
}

/* ---------- Generating ---------- */
.spinner {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid var(--plum-soft);
  border-top-color: var(--plum);
  animation: spin 0.8s linear infinite;
  margin-bottom: var(--sp-4);
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.generating-text {
  font-size: 15px;
  color: var(--text-secondary);
}

/* ---------- Payoff ---------- */
.payoff-section {
  width: 100%;
  max-width: 320px;
  text-align: left;
  margin-bottom: var(--sp-6);
}

.payoff-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0 0 var(--sp-3);
}

.payoff-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: 15px;
  font-weight: 500;
  padding: 10px 0;
  border-bottom: 1px solid var(--divider);
}

.payoff-row:last-child {
  border-bottom: none;
}

.payoff-row.done {
  color: var(--text-muted);
  font-weight: 400;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dot.todo {
  background: var(--plum);
}

.dot.done {
  background: var(--border);
}

.profile-divider {
  height: 1px;
  background: var(--divider);
  margin: var(--sp-4) 0;
}

/* ---------- Paywall / preview / locked guide ---------- */
.unlock-shell .mini-trail {
  margin: var(--sp-2) 0 var(--sp-6);
}

/* The purchase block now lives in normal flow, right under the headline/
   context line (see renderUnlockScreen in app.js), so price + CTA are
   visible on a normal mobile screen without scrolling at all — no fixed/
   sticky positioning needed. Reuses the plain .unlock-card styling already
   defined below (shared with the locked-guide inline prompt). */

/* "Already purchased?" — a plain-language nudge toward sign-in, not a scary
   account-recovery message. Visible, but clearly secondary to the purchase
   CTA above it. */
.returning-customer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 14px;
  color: var(--text-secondary);
}

.returning-customer .text-btn {
  font-weight: 600;
  color: var(--plum-dark);
}

.unlock-benefits {
  text-align: left;
}

.locked-highlight-list {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
}

.locked-highlight-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  font-size: 14.5px;
  color: var(--text-primary);
  padding: 7px 0;
  line-height: 1.4;
}

.locked-highlight-list li svg {
  color: var(--plum);
  flex-shrink: 0;
  margin-top: 2px;
}

.locked-guide-card {
  background: var(--surface-warm);
  border-radius: var(--r-tile);
  padding: var(--sp-4) var(--sp-4) var(--sp-2);
  margin-bottom: var(--sp-6);
}

.unlock-card {
  /* Calm hairline card, not a filled block — matches the paywall screen's
     Phase 3.7 treatment, now applied everywhere .unlock-card appears
     (including the locked-guide preview), per Phase 4 §H "use the same
     premium paywall language already approved." */
  background: var(--bg-surface);
  border: 1px solid var(--line-default);
  border-radius: var(--r-tile);
  padding: var(--sp-6) var(--sp-6) var(--sp-4);
  margin: var(--sp-2) 0 var(--sp-3);
  text-align: center;
}

.unlock-card-price {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--plum-dark);
  margin: 0 0 2px;
}

.unlock-card-sub {
  font-size: 13.5px;
  color: var(--text-secondary);
  margin: 0 0 var(--sp-4);
}

.unlock-card .cta-full {
  margin-bottom: var(--sp-3);
}

.unlock-card-note {
  font-size: 12.5px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

.unlock-trust-line {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  color: var(--text-secondary);
  margin: var(--sp-2) 0 0;
}

.unlock-trust-line a {
  color: var(--text-secondary);
  text-decoration: underline;
}

/* Home's single, subtle unlock prompt for preview users */
.preview-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  width: 100%;
  background: var(--plum-light);
  border: none;
  border-radius: var(--r-input);
  padding: 12px 14px;
  margin-bottom: var(--sp-3);
  cursor: pointer;
  text-align: left;
}

.preview-banner-txt {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--plum-dark);
}

.preview-badge {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--white);
  background: var(--plum);
  border-radius: var(--r-pill);
  padding: 3px 8px;
}

.preview-banner-price {
  flex-shrink: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--plum-dark);
}

/* Sparing lock indicator on category rows — never a large overlay */
.lock-indicator {
  display: flex;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* ==================================================
   The settlement journey — stage hero, path, nodes
   ================================================== */

.stage-hero {
  background: linear-gradient(180deg, var(--stage-soft) 0%, var(--bg-page) 100%);
  border-radius: 0 0 28px 28px;
  margin: calc(-1 * var(--sp-6)) calc(-1 * var(--page-pad)) var(--sp-6);
  padding: var(--sp-6) var(--page-pad) var(--sp-6);
}

.stage-hero-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
}

.stage-eyebrow {
  font-size: 13px;
  font-weight: 600;
  /* Stage 7: stage-hue label text failed AA on the hero tint. Stage identity
     is carried by the hero gradient, the trail nodes and the "Stage N" text
     itself; the label reads in deep plum. */
  color: var(--plum-dark);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 6px;
}

.stage-name {
  font-size: 30px;
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 6px;
}

.stage-tagline {
  font-size: 15px;
  color: var(--text-secondary);
  margin: 0;
  max-width: 92%;
  line-height: 1.5;
}

.stage-illus {
  flex-shrink: 0;
  margin-left: var(--sp-3);
}

.stage-progress-row {
  margin-top: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stage-dashes {
  display: flex;
  gap: 4px;
}

.dash {
  flex: 1;
  height: 5px;
  border-radius: var(--r-pill);
  background: rgba(0, 0, 0, 0.08);
}

.dash.completed {
  background: var(--stage-color);
}

.dash.current {
  background: var(--stage-color);
  height: 7px;
}

.dash.doLater {
  background: var(--text-muted);
  opacity: 0.35;
}

.stage-progress-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
}

.deferred-note {
  font-size: 13.5px;
  color: var(--text-secondary);
  background: var(--surface-warm);
  padding: 10px 14px;
  border-radius: var(--r-input);
  margin: 0 0 var(--sp-3);
}

/* ---------- Primary next action ---------- */
.primary-task {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--stage-soft);
  border: none;
  border-radius: 20px;
  padding: var(--sp-6);
  margin: var(--sp-2) 0 4px;
  cursor: pointer;
}

.primary-task .you-here {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  /* Stage 7: was var(--stage-color) on the stage-soft card (~3.4:1). */
  color: var(--plum-dark);
  margin-bottom: 8px;
}

.primary-task h2 {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 6px;
}

.primary-task p {
  font-size: 14.5px;
  color: var(--text-secondary);
  margin: 0 0 var(--sp-4);
  line-height: 1.55;
}

.primary-task-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.primary-task .time-chip {
  background: var(--bg-elevated);
  /* Stage 7: was var(--stage-color) on white (~4:1). */
  color: var(--plum-dark);
}

.primary-task .cta {
  /* Stage 7: white CTA text on the raw stage hue measured ~4:1. Same
     darkening overlay as .done-btn keeps the stage colour, clears AA. */
  background: linear-gradient(0deg, rgba(28, 12, 20, 0.26), rgba(28, 12, 20, 0.26)),
    var(--stage-color);
}

.arrival-note {
  font-size: 12.5px;
  font-style: italic;
  color: var(--text-muted);
  margin: 0 0 var(--sp-3);
}

.do-later-link {
  display: block;
  width: 100%;
  text-align: center;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 14px;
  padding: var(--sp-2) 0 var(--sp-8);
  cursor: pointer;
  text-decoration: underline;
}

/* ---------- Journey path ---------- */
.path-heading {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0 0 var(--sp-3);
}

.journey-path {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--sp-6);
}

.journey-path.compact {
  margin: var(--sp-2) 0 var(--sp-4);
}

.path-node {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: none;
  border: none;
  text-align: left;
  width: 100%;
  padding: 9px 0;
  cursor: pointer;
  position: relative;
}

.path-node:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 26px;
  bottom: -5px;
  width: 1.5px;
  background: var(--divider);
}

.node-dot {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  flex-shrink: 0;
  margin-top: 2px;
  transition: all 0.2s ease;
}

.path-node.completed .node-dot {
  background: var(--stage-color);
  border-color: var(--stage-color);
}

.path-node.current .node-dot {
  width: 21px;
  height: 21px;
  border-color: var(--stage-color);
  background: var(--stage-soft);
  box-shadow: 0 0 0 3px var(--stage-soft);
  margin-top: 0;
}

.path-node.doLater .node-dot {
  border-style: dashed;
  border-color: var(--text-muted);
}

.node-label {
  flex: 1;
  min-width: 0;
  padding-top: 1px;
}

.node-title {
  display: block;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
}

.path-node.completed .node-title {
  color: var(--text-muted);
  text-decoration: line-through;
  font-weight: 400;
}

.path-node.current .node-title {
  font-size: 15.5px;
  font-weight: 600;
}

.path-node.doLater .node-title {
  color: var(--text-muted);
}

.node-tag {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-top: 2px;
}

.path-node.current .node-tag {
  /* Stage 7: was var(--stage-color) (~3.4:1 on white). */
  color: var(--plum-dark);
}

.path-node.doLater .node-tag {
  color: var(--text-muted);
}

/* ---------- Other stages ---------- */
.other-stages {
  margin: var(--sp-6) 0;
}

.stage-row-block {
  margin-bottom: 2px;
}

.stage-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: none;
  border: none;
  border-top: 1px solid var(--divider);
  padding: 14px 0;
  cursor: pointer;
  text-align: left;
}

.stage-row-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface-warm);
  /* Stage 7: was var(--stage-color) on the warm surface (~3.3:1). */
  color: var(--plum-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
}

.stage-row-txt {
  flex: 1;
  min-width: 0;
}

.stage-row-name {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.stage-row-meta {
  display: block;
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: 2px;
}

.stage-row-chev {
  display: flex;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.stage-row.expanded .stage-row-chev {
  transform: rotate(90deg);
}

.browse-footer {
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--divider);
}

.all-caught-up-hero {
  text-align: center;
  padding: var(--sp-12) 0 var(--sp-8);
}

.all-caught-up-hero h1 {
  font-size: 26px;
  font-weight: 600;
  margin: var(--sp-4) 0 var(--sp-2);
}

.all-caught-up-hero p {
  font-size: 15px;
  color: var(--text-secondary);
  margin: 0;
}

/* ---------- Guide page: meta + tri-state rows ---------- */
.item-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--text-muted);
  font-weight: 500;
  margin: 4px 0 var(--sp-4);
}

.dot-sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--text-muted);
}

.item-row-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid var(--divider);
  padding: 14px 0;
  cursor: pointer;
  text-align: left;
}

.item-row-btn:last-child {
  border-bottom: none;
}

.status-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  flex-shrink: 0;
}

.status-dot.completed {
  background: var(--plum);
  border-color: var(--plum);
}

.status-dot.doLater {
  border-style: dashed;
  border-color: var(--text-muted);
}

/* Reference guides aren't tracked — a plain label, not a progress dot. */
.ref-badge {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  background: var(--surface-warm);
  border-radius: var(--r-pill);
  padding: 5px 10px;
}

.item-row-btn .txt {
  flex: 1;
  min-width: 0;
}

.item-row-btn .txt h2 {
  font-size: 15.5px;
  font-weight: 600;
  margin: 0;
}

.item-row-btn.completed .txt h2 {
  color: var(--text-muted);
  text-decoration: line-through;
  font-weight: 500;
}

.item-row-btn .txt p {
  font-size: 13.5px;
  color: var(--text-secondary);
  margin: 3px 0 0;
  line-height: 1.45;
}

.item-row-btn .chev {
  color: var(--text-muted);
  flex-shrink: 0;
}

.already-done-note {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-warm);
  border-radius: var(--r-input);
  padding: 12px 14px;
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: var(--sp-3);
}

.already-done-note svg {
  color: var(--plum);
  flex-shrink: 0;
}

.already-done-note #undo-complete-btn {
  margin-left: auto;
  font-size: 13px;
  flex-shrink: 0;
}

.cta-full.done-btn {
  /* Stage hue kept, but darkened with an overlay so white button text clears
     WCAG AA (4.5:1) for every stage colour — the raw stage-1 orange measured
     ~4:1 (Stage 7 QA). */
  background: linear-gradient(0deg, rgba(28, 12, 20, 0.26), rgba(28, 12, 20, 0.26)),
    var(--stage-color, var(--plum));
}

.do-later-btn {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: var(--sp-2);
}

/* ---------- Completion moments ---------- */
.task-complete-view,
.stage-complete-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.task-complete-view .back-btn,
.stage-complete-view .back-btn {
  align-self: flex-start;
  margin-bottom: var(--sp-6);
}

.task-complete-check {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--stage-color, var(--plum));
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: var(--sp-6) 0 var(--sp-6);
}

.stage-complete-illus {
  margin: var(--sp-4) 0 var(--sp-4);
}

.stage-complete-view .onboard-heading {
  max-width: 300px;
}

.next-stage-name {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 var(--sp-4);
}

/* ==================================================
   Home (light front door) — search entry + mini trail
   ================================================== */

.home-search {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: var(--surface-warm);
  border: none;
  border-radius: var(--r-input);
  padding: 13px 16px;
  color: var(--text-muted);
  font-size: 14.5px;
  cursor: pointer;
  margin-bottom: var(--sp-6);
}

.home-search svg {
  flex-shrink: 0;
}

.mini-trail {
  display: block;
  margin: 0 0 4px;
  overflow: visible;
}

.trail-node {
  cursor: pointer;
}

.trail-label {
  font-family: "Inter", sans-serif;
  font-size: 10.5px;
  font-weight: 500;
}

.trail-label.current {
  fill: var(--text-primary);
  font-weight: 600;
}

.trail-label.completed {
  fill: var(--text-secondary);
}

.trail-label.upcoming {
  fill: var(--text-muted);
}

.trail-progress-label {
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  margin: 0 0 var(--sp-6);
}

.view-journey-link {
  display: block;
  width: 100%;
  text-align: center;
  margin: 4px 0 var(--sp-8);
}

.quick-help {
  padding-top: var(--sp-4);
  border-top: 1px solid var(--divider);
}

.all-done-mini {
  text-align: center;
  padding: var(--sp-8) 0 var(--sp-4);
  color: var(--text-secondary);
}

.all-done-mini svg {
  color: var(--plum);
  margin-bottom: var(--sp-3);
}

.all-done-mini p {
  font-size: 15px;
  margin: 0 0 var(--sp-4);
}

/* ---------- Global Home control (top of every non-Home screen) ---------- */
.home-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  background: var(--surface-warm);
  border: none;
  border-radius: var(--r-pill);
  padding: 0 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  flex-shrink: 0;
}

.home-btn svg {
  color: var(--plum);
  flex-shrink: 0;
}

.journey-topbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--sp-4);
}

/* =====================================================================
   PHASE 3 — WARM EDITORIAL JOURNEY
   Scoped entirely under ".app.onboarding" (set by render() in app.js
   whenever nav.view is one of TOP_LEVEL_VIEWS: welcome, question,
   generating, payoff, unlock, auth, checkout). This is a pre-existing hook
   already in the codebase — it covers exactly the onboarding-shell family
   of screens and NONE of Home / Journey / Search / Profile / Category /
   Guide, which live outside it. Every rule below is scoped this way
   deliberately, so this redesign cannot bleed into screens this phase was
   not approved to touch, even though several classes here (.cta-full,
   .text-btn, .onboard-heading, .payoff-row, .unlock-card, .ask-input,
   .auth-error) are also used by those other screens elsewhere in the file.
   See AFTERLANDING_UPGRADE.md / DESIGN_SYSTEM.md Phase 3 for the approved
   direction and scope. Only Welcome, Questionnaire, Payoff, Paywall, and
   Auth (email + OTP) were redesigned; "generating" and "checkout" inherit
   this base shell/typography/button refinement as a disclosed side effect
   of sharing the same shell classes, not as a separate redesign pass.
   ===================================================================== */

.app.onboarding {
  background: var(--bg-page);
}

.app.onboarding #view-root {
  animation: onboardFadeIn var(--motion-base) var(--ease-out-warm);
}

@keyframes onboardFadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Shell rhythm ---------- */
.app.onboarding .onboard-shell {
  padding-top: var(--sp-8);
  padding-bottom: var(--sp-6);
  justify-content: center;
}

/* Welcome specifically gets the tallest, most deliberate composition — its
   own modifier so Payoff/Paywall/Auth (also ".onboard-shell") aren't
   affected by this specific rule. */
.app.onboarding .onboard-shell.welcome-shell {
  justify-content: center;
  min-height: calc(100vh - var(--sp-8));
}

/* ---------- Brand lockup (Welcome) ---------- */
/* Composition-only treatment of the EXISTING logo asset — no new logo file
   is introduced here (see DESIGN_SYSTEM.md Section J: logo evolution is
   separate, future, approved work). This gives the existing mark more
   deliberate presence via spacing/rhythm rather than a new asset. */
.app.onboarding .welcome-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: var(--sp-8);
}

.app.onboarding .welcome-logo {
  width: min(58%, 220px);
  margin-bottom: 0;
}

.app.onboarding .welcome-illustration-wrap {
  margin: var(--sp-6) 0 var(--sp-8);
  opacity: 0.9;
}

/* ---------- Typography ---------- */
.app.onboarding .onboard-heading {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 650;
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
  max-width: 340px;
  margin: 0 0 var(--sp-4);
}

.app.onboarding .onboard-heading.display {
  font-size: var(--fs-display);
  max-width: 320px;
}

.app.onboarding .onboard-sub {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--ink-secondary, var(--text-secondary));
  max-width: 300px;
  margin: 0 0 var(--sp-8);
}

.app.onboarding .eyebrow-label {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--ink-muted, var(--text-muted));
  margin: 0 0 var(--sp-2);
}

/* Small, quiet commercial line under the Welcome CTA — states the actual
   price/terms plainly (trust through specificity, DESIGN_SYSTEM.md
   Principle 5), not a marketing flourish. */
.app.onboarding .welcome-price-note {
  /* text-secondary, not text-muted: at this font size text-muted falls
     below 4.5:1 contrast on --bg-page (measured ~3.1:1) — see
     AFTERLANDING_UPGRADE.md accessibility checks. */
  font-size: var(--fs-caption);
  color: var(--text-secondary);
  margin: 0 0 var(--sp-6);
  letter-spacing: 0.01em;
}

/* ---------- Buttons ---------- */
.app.onboarding .cta-full {
  border-radius: var(--r-btn);
  font-size: var(--fs-body);
  font-weight: 600;
  letter-spacing: 0.005em;
  padding: 16px;
  transition: background var(--motion-fast) ease, opacity var(--motion-fast) ease,
    transform var(--motion-fast) ease;
}

.app.onboarding .cta-full:hover:not(:disabled) {
  background: var(--interactive-hover);
}

.app.onboarding .cta-full:active:not(:disabled) {
  background: var(--interactive-active);
  transform: scale(0.99);
}

.app.onboarding .text-btn {
  font-size: var(--fs-body-sm);
  font-weight: 600;
  color: var(--brand-deep);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--sp-2) 0;
}

/* ---------- Questionnaire ---------- */
.app.onboarding .q-header {
  margin-bottom: var(--sp-6);
}

.app.onboarding .q-count {
  /* text-secondary, not the base rule's text-muted — same contrast fix as
     the other captions in this block. */
  color: var(--text-secondary);
}

.app.onboarding .q-prompt {
  font-size: var(--fs-h2);
  font-weight: 650;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}

.app.onboarding .q-sub {
  font-size: var(--fs-body);
  color: var(--text-secondary);
  line-height: var(--lh-normal);
}

.app.onboarding .option-row {
  border-radius: var(--r-btn);
  padding: 17px 18px;
  font-size: var(--fs-body);
  transition: border-color var(--motion-fast) ease, background var(--motion-fast) ease,
    color var(--motion-fast) ease;
}

.app.onboarding .option-row:hover:not(.selected) {
  border-color: var(--line-strong);
  background: var(--bg-alt);
}

.app.onboarding .option-row.selected {
  border-color: var(--brand-primary);
  background: var(--brand-soft);
  color: var(--brand-deep);
}

/* ---------- Payoff facts row ---------- */
/* Surfaces only what onboarding actually collected (city, stage) as a
   quiet proof-of-personalisation moment — no invented recommendation
   intelligence, per the approved Payoff spec. */
.app.onboarding .payoff-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: center;
  margin: 0 0 var(--sp-6);
}

.app.onboarding .payoff-fact-chip {
  font-size: var(--fs-label);
  font-weight: 600;
  color: var(--brand-deep);
  background: var(--brand-muted);
  border-radius: var(--r-pill);
  padding: 7px 14px;
}

/* The journey/progress motif on Payoff — a quiet visual bridge between "here's
   what we learned about you" (the facts chips above) and "here's your plan"
   (the priority list below). See DESIGN_SYSTEM.md's motif-usage audit for
   why this is one of only two places this motif appears. */
.app.onboarding .payoff-motif {
  margin: 0 0 var(--sp-6);
  opacity: 0.92;
}

.app.onboarding .payoff-label {
  /* text-secondary, not the base rule's text-muted: measured ~3.1:1 on
     bg-page, below 4.5:1 AA at this size. */
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-wide);
  color: var(--text-secondary);
}

.app.onboarding .payoff-row {
  font-size: var(--fs-body);
}

/* ---------- Paywall ---------- */
.app.onboarding .unlock-card {
  background: var(--bg-surface);
  border: 1px solid var(--line-default);
  box-shadow: none;
  border-radius: var(--r-tile);
  padding: var(--sp-6) var(--sp-6) var(--sp-4);
}

.app.onboarding .unlock-card-price {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.app.onboarding .unlock-card-sub {
  font-size: var(--fs-body-sm);
  color: var(--text-secondary);
}

/* New, factual trust line — only claims actually true today: Stripe is
   the real checkout processor, and the refund policy links to the real
   policy in legal.html. No invented guarantees (DESIGN_SYSTEM.md
   Principle 5 / the explicit instruction not to fabricate trust copy). */
.app.onboarding .unlock-trust-line {
  /* text-secondary, not text-muted: text-muted measures ~3.3:1 on white at
     this size, below the 4.5:1 AA floor — see AFTERLANDING_UPGRADE.md
     accessibility checks. */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-caption);
  color: var(--text-secondary);
  margin: 0 0 var(--sp-2);
}

.app.onboarding .unlock-trust-line a {
  color: var(--text-secondary);
  text-decoration: underline;
}

/* ---------- Auth (email + OTP) ---------- */
.app.onboarding .ask-input.auth-input {
  background: var(--bg-surface);
  border: 1px solid var(--line-default);
  border-radius: var(--r-input);
  padding: 14px var(--sp-4);
  transition: border-color var(--motion-fast) ease;
}

.app.onboarding .ask-input.auth-input:focus-within {
  border-color: var(--brand-primary);
}

.app.onboarding .ask-input.auth-input input {
  font-size: var(--fs-body-lg);
}

/* OTP field reads more like a code entry surface, generously
   letter-spaced, rather than a plain text input. */
.app.onboarding #auth-otp-field {
  letter-spacing: 0.3em;
  font-weight: 600;
  font-size: 20px;
  text-align: center;
}

.app.onboarding .auth-error {
  color: var(--status-danger);
  background: var(--status-danger-soft);
  border-radius: var(--r-input);
  padding: var(--sp-2) var(--sp-3);
  max-width: 320px;
}

.app.onboarding .auth-hint {
  /* text-secondary, not the base rule's text-muted: same contrast fix as
     .payoff-label/.welcome-price-note/.unlock-trust-line above. */
  font-size: var(--fs-caption);
  color: var(--text-secondary);
}

/* ---------- Wider viewports (tablet/desktop) ---------- */
/* Scoped to the onboarding shell only (Phase 3.7 §10) — Home/Journey/Search/
   Profile/Category/Guide are untouched and still just centre-column at any
   width. This is deliberately light-touch: a soft radial wash behind the
   centred column so wide viewports read as "composed" rather than "a phone
   screen stranded in a big empty page" — not a desktop redesign. */
@media (min-width: 768px) {
  .app.onboarding {
    background: radial-gradient(ellipse 900px 700px at 50% 38%, rgba(201, 98, 43, 0.05), transparent 60%),
      radial-gradient(ellipse 700px 900px at 50% 65%, rgba(62, 37, 65, 0.05), transparent 65%),
      var(--bg-page);
    min-height: 100vh;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  /* Stage 7: the earlier block only covered the onboarding shell. This
     global rule also neutralises the Phase 4 product-screen animations
     and transitions (view fades, mini-trail, hover states, etc.). */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .app.onboarding #view-root {
    animation: none;
  }
}

/* =====================================================================
   PHASE 4 — PRODUCT SCREENS (Home, Journey, Search, Profile, Category,
   Guide, locked-guide, bottom nav)
   Unlike the Phase 3 block above, these rules are NOT scoped under
   ".app.onboarding" — the classes touched here (.greeting, .page-header h1,
   .primary-task, .stage-name, .item-title, .item-row-btn, .profile-summary,
   .nav-btn, etc.) are exclusively used by these product screens and never
   appear inside the onboarding-shell family, so there is no shared-class
   bleed risk to guard against the way Phase 3 had to. Reuses the same
   :root tokens (colour/spacing/radius/motion) introduced in Phase 3 — no
   new arbitrary values were introduced (Phase 4 §N).
   ===================================================================== */

/* ---------- Typography: Familjen reserved for genuine brand/title
   moments only (screen titles, Home's greeting and next-step headline,
   Journey's stage name, a guide's own title, Profile's big percentage).
   Deliberately NOT applied to .item-row-btn h3 or .step-body h3 — those
   are repeated, functional list/step text, not brand moments (Phase 4 §P
   audit — see DESIGN_SYSTEM.md Section U for the full list of what was
   deliberately left in Inter and why). ---------- */
.page-header h1,
.page-heading,
.greeting,
.primary-task h2,
.stage-name,
.item-title,
.profile-summary .big-pct,
.onboard-heading {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}

/* ---------- Bottom navigation ---------- */
.nav-btn {
  /* text-secondary, not text-muted: measured ~3.3:1 on white, below the
     4.5:1 AA floor at this size — same fix as the Phase 3 captions. */
  color: var(--text-secondary);
  transition: color var(--motion-fast) ease;
  min-height: 44px;
}

.nav-btn.active {
  color: var(--brand-primary);
}

.nav-btn .label {
  font-weight: 600;
}

/* ---------- Home: next-step card ---------- */
.primary-task {
  border-radius: var(--r-tile);
  transition: transform var(--motion-fast) ease;
}

.primary-task:active {
  transform: scale(0.99);
}

.primary-task .you-here {
  font-family: "Inter", sans-serif;
  letter-spacing: var(--tracking-wide);
}

.home-search {
  transition: border-color var(--motion-fast) ease, background var(--motion-fast) ease;
}

.home-search:hover {
  background: var(--bg-alt);
}

/* ---------- List rows (Category / Journey stage lists / Search results):
   already divider-separated rather than individually boxed — refined here,
   not restructured (Phase 4 card-soup audit, DESIGN_SYSTEM.md Section U). ---------- */
.item-row-btn {
  transition: background var(--motion-fast) ease;
  border-radius: var(--r-btn);
  padding-left: var(--sp-2);
  padding-right: var(--sp-2);
  margin: 0 calc(var(--sp-2) * -1);
}

.item-row-btn:hover {
  background: var(--bg-alt);
}

.item-row-btn:last-child {
  border-bottom: none;
}

/* ---------- Chips (Home quick-help) ---------- */
.chip {
  transition: background var(--motion-fast) ease, border-color var(--motion-fast) ease;
}

.chip:hover {
  background: var(--bg-alt);
  border-color: var(--line-strong);
}

/* ---------- Profile: real onboarding facts, row-based (not another
   boxed card) per the Phase 4 "no card-soup" discipline. ---------- */
.profile-facts {
  margin-bottom: var(--sp-6);
}

.profile-fact-row {
  display: flex;
  justify-content: space-between;
  font-size: 14.5px;
  padding: 10px 0;
  border-bottom: 1px solid var(--divider);
}

.profile-fact-row span:first-child {
  color: var(--text-secondary);
}

.profile-fact-row .v {
  font-weight: 600;
  color: var(--text-primary);
}

/* ---------- Wider viewports for the product screens (Home/Journey/Search/
   Profile/Category/Guide) — same restrained treatment as the onboarding
   shell (Phase 3.7 §10), extended here per Phase 4 §S: "desktop must begin
   feeling deliberately designed... do not merely scale a narrow mobile
   shell." Still not a desktop redesign — no new layout, just the same soft
   wash so the centred column doesn't sit in a flat empty page. ---------- */
@media (min-width: 768px) {
  .app:not(.onboarding) {
    background: radial-gradient(ellipse 900px 700px at 50% 30%, rgba(201, 98, 43, 0.04), transparent 60%),
      radial-gradient(ellipse 700px 900px at 50% 70%, rgba(62, 37, 65, 0.04), transparent 65%),
      var(--bg-page);
    min-height: 100vh;
  }
}

/* ---------- Journey: the strongest expression of the journey/progress
   motif in the product, per Phase 4 §B — the stage colour system already
   in .path-heading/.stage-name/mini-trail IS that expression; no new
   Concept-C illustration was added here (see the motif-usage audit —
   duplicating the step icon next to a screen that already visualises
   stages as a trail would be decoration, not function). ---------- */
.stage-tagline {
  max-width: 100%;
}

/* =====================================================================
   SECTION W — EDITORIAL FIELD GUIDE
   Approved design direction (see DESIGN_SYSTEM.md Section V + W and
   prototypes/sophistication-direction.html). An EVOLUTION of the Phase 3/4
   system: same mark, same Familjen + Inter, same plum/cream, same
   Home/Journey/Search/Profile nav. What changes is composition —
   hairline rules, tonal bands, hanging numerals, a horizontal progress
   datum, a controlled reading measure, and a real desktop layout —
   in place of a stack of tinted rounded cards. Containers are kept only
   where they carry real product meaning (a tappable object, the paywall
   action, locked content, a grouped selection).
   This block is last in the file, so equal-specificity rules win.
   ===================================================================== */

:root {
  /* Dark redesign (Oct 2026) — this block is last in the file on purpose
     (equal-specificity rules win), so it's the authoritative source for
     these tokens; the --surface-warm etc. set near the top of the file
     stay in sync but these are the values that actually render. */
  --surface-warm: var(--bg-page);
  --surface-warm-2: var(--bg-secondary);
  --band: var(--bg-card);
  --rule: var(--divider);
  --rule-strong: var(--line-strong);
  --ink-ed: rgba(255, 255, 255, 0.16);
  /* Purple is now THE accent — current datum position, "here" row
     highlight, focal-card border, progress fill. Never used as a button
     fill by itself at this exact value; see --plum-dark for hover. */
  --marker: var(--plum);
  --reading: 40rem;      /* ~64 char measure for guide/marketing body */
  --fg-pad: 16px; /* mobile page padding; 24px tablet / 32px desktop below */
}
@media (min-width: 768px) {
  :root { --fg-pad: 24px; }
}
@media (min-width: 960px) {
  :root { --fg-pad: 32px; }
}

/* ---------- shell + masthead ---------- */
.app { background: var(--surface-warm); }
#view-root { padding: 0 0 var(--sp-8); }
.fg-page { padding: 0 var(--fg-pad); }

.fg-masthead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 15px var(--fg-pad) 12px;
  border-bottom: 1px solid var(--ink-ed);
  margin-bottom: 22px;
}
.fg-masthead .fg-brand {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  letter-spacing: -0.01em; color: var(--text-primary);
  background: none; border: none; padding: 0; cursor: pointer;
}
.fg-masthead .fg-brand img { width: 17px; height: 19px; display: block; }
.fg-masthead .fg-running {
  font-size: 12.5px; color: var(--text-muted); letter-spacing: .01em;
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer; font-family: inherit;
}
.fg-masthead .fg-running.link { color: var(--plum); font-weight: 600; }

/* ---------- homepage hero (Welcome screen) — a real photo (see
   HERO_IMAGE in app.js), inset card with its own radius, dark gradient +
   a subtle plum tint so it reads as AfterLanding rather than a stock
   travel photo. Mobile: image upper, text anchored to the bottom.
   Desktop: text is a fixed-width column on the left, image subject
   (set per-photo via object-position) favours the right side. ---------- */
.fg-hero {
  position: relative; overflow: hidden; border-radius: var(--r-hero);
  height: 420px; margin-top: 20px;
}
.fg-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.fg-hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(0deg, rgba(8, 8, 12, .9) 0%, rgba(8, 8, 12, .55) 38%, rgba(8, 8, 12, .15) 70%),
    linear-gradient(0deg, rgba(124, 58, 237, .12) 0%, rgba(124, 58, 237, 0) 55%);
}
.fg-hero-content {
  position: absolute; z-index: 1; left: 20px; right: 20px; bottom: 24px; top: auto;
}
.fg-hero-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--plum-pale); margin: 0 0 10px;
}
.fg-hero-headline {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em;
  font-size: 32px; line-height: 1.08; margin: 0; color: #fff; text-wrap: balance;
}
.fg-hero-standfirst {
  font-size: 15px; line-height: 1.45; color: #d0d0d6; margin: 14px 0 0; max-width: 46ch;
}
.fg-hero-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.fg-hero-actions .fg-btn { height: 46px; padding: 0 22px; width: 100%; }
.fg-btn.fg-hero-secondary {
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .12); color: #fff;
}
.fg-btn.fg-hero-secondary:hover { background: rgba(255, 255, 255, .16); }

@media (min-width: 560px) {
  .fg-hero-actions { flex-direction: row; }
  .fg-hero-actions .fg-btn { width: auto; }
}
@media (min-width: 768px) {
  .fg-hero {
    height: 470px; margin-top: 24px;
  }
  .fg-hero-scrim {
    background:
      linear-gradient(90deg, rgba(8, 8, 12, .98) 0%, rgba(8, 8, 12, .92) 24%, rgba(8, 8, 12, .65) 48%, rgba(8, 8, 12, .18) 72%, rgba(8, 8, 12, .05) 100%),
      linear-gradient(0deg, rgba(8, 8, 12, .65) 0%, rgba(8, 8, 12, 0) 35%),
      linear-gradient(0deg, rgba(124, 58, 237, .1) 0%, rgba(124, 58, 237, 0) 45%);
  }
  .fg-hero-content {
    left: 48px; right: auto; top: 50%; bottom: auto; transform: translateY(-50%); width: 500px;
  }
  .fg-hero-eyebrow { font-size: 12px; margin-bottom: 12px; }
  .fg-hero-headline { font-size: 48px; line-height: 1.06; max-width: 540px; }
  .fg-hero-standfirst { font-size: 17px; line-height: 1.5; max-width: 470px; margin-top: 18px; }
  .fg-hero-actions { flex-direction: row; gap: 12px; margin-top: 24px; }
  .fg-hero-actions .fg-btn { height: 48px; width: auto; }
}
@media (min-width: 1200px) {
  .fg-hero-headline { font-size: 54px; }
}

/* ---------- Home dashboard hero — distinct from the Welcome hero above
   (different photo, different copy, exactly one CTA, no price/progress/
   badges). This is the first thing a signed-in user sees. ---------- */
.fg-home-hero {
  position: relative; overflow: hidden; border-radius: 18px;
  height: 400px; margin-top: 16px;
}
.fg-home-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.fg-home-hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(8, 8, 12, .96) 0%, rgba(8, 8, 12, .78) 32%, rgba(8, 8, 12, .35) 60%, rgba(8, 8, 12, .08) 100%);
}
.fg-home-hero-content { position: absolute; z-index: 1; left: 20px; right: 20px; bottom: 22px; top: auto; }
.fg-home-hero-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--plum-pale); margin: 0 0 8px;
}
.fg-home-hero-headline {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em;
  font-size: 32px; line-height: 1.08; margin: 0; color: #fff; max-width: 310px; text-wrap: balance;
}
.fg-home-hero-sub {
  font-size: 15px; line-height: 1.45; color: #d0d0d6; margin: 10px 0 0; max-width: 300px;
}
.fg-home-hero-cta { height: 45px; padding: 0 18px; margin-top: 16px; }
@media (min-width: 768px) {
  .fg-home-hero { height: 480px; margin-top: 24px; }
  .fg-home-hero-scrim {
    background: linear-gradient(90deg, rgba(8, 8, 12, .98) 0%, rgba(8, 8, 12, .9) 28%, rgba(8, 8, 12, .5) 52%, rgba(8, 8, 12, .08) 100%);
  }
  .fg-home-hero-content {
    left: 48px; right: auto; top: 50%; bottom: auto; transform: translateY(-50%); width: 500px;
  }
  .fg-home-hero-headline { font-size: 48px; line-height: 1.06; max-width: 480px; }
  .fg-home-hero-sub { font-size: 16px; max-width: 440px; margin-top: 14px; }
  .fg-home-hero-cta { height: 48px; margin-top: 22px; }
}
@media (min-width: 1200px) {
  .fg-home-hero-headline { font-size: 52px; }
}

/* ---------- "Next for you" — the focal recommendation as a large visual
   card (see renderNextForYouCard in app.js). Falls back to a plain
   gradient card, never a stretched unrelated photo, when neither the
   guide nor its category has an image. ---------- */
.fg-next-card {
  position: relative; display: block; width: 100%; height: 205px;
  margin: 10px 0 0; padding: 0; border: 0; border-radius: 16px; overflow: hidden;
  cursor: pointer; background: var(--bg-card); -webkit-appearance: none; appearance: none;
}
.fg-next-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.fg-next-card-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(8, 8, 12, .94) 0%, rgba(8, 8, 12, .62) 42%, rgba(8, 8, 12, .1) 75%);
}
.fg-next-card.no-image {
  background:
    radial-gradient(circle at 80% 15%, rgba(124, 58, 237, .28), transparent 45%),
    var(--bg-card);
}
.fg-next-card-text {
  position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 1;
  display: flex; flex-direction: column; gap: 4px; text-align: left;
}
.fg-next-card-title {
  font-family: var(--font-display); font-weight: 700; font-size: 21px; line-height: 1.18; color: #fff;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.fg-next-card-desc {
  font-size: 14px; line-height: 1.4; color: rgba(255, 255, 255, .82); margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.fg-next-card-foot { display: flex; align-items: center; gap: 14px; margin-top: 8px; font-size: 13px; }
.fg-next-card-foot .fg-mins { color: rgba(255, 255, 255, .65); font-variant-numeric: tabular-nums; }
.fg-next-card-go { color: var(--plum-pale); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
@media (min-width: 768px) {
  .fg-next-card { height: 230px; }
  .fg-next-card-title { font-size: 23px; }
}

/* ---------- rules + eyebrows ---------- */
.fg-rule { height: 1px; background: var(--rule); border: 0; margin: 22px 0; }
.fg-rule.ink { background: var(--ink-ed); }
.fg-eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-size: 12.5px; font-weight: 600; color: var(--plum);
  letter-spacing: .01em; margin: 0 0 10px;
}
.fg-eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--plum); flex-shrink: 0; }
.fg-eyebrow.plain::before { display: none; }
/* Quieter than an eyebrow: groups a short list under a "Do now" / "Prepare
   now" style label without competing with section eyebrows. */
.fg-subhead {
  font-family: var(--font-display); font-weight: 600; font-size: 13px;
  color: var(--text-primary); margin: 0 0 4px; letter-spacing: -0.005em;
}

/* ---------- editorial openers ---------- */
.fg-opener {
  font-family: var(--font-display); font-weight: 600; letter-spacing: -0.022em;
  font-size: clamp(29px, 8.4vw, 34px); line-height: 1.06; margin: 24px 0 0;
  max-width: 13ch; text-wrap: balance; color: var(--text-primary);
}
.fg-standfirst {
  font-size: 16px; color: var(--text-secondary); line-height: 1.5;
  margin: 16px 0 0; max-width: 34ch;
}
.fg-greet {
  font-family: var(--font-display); font-weight: 600; font-size: 30px;
  letter-spacing: -0.02em; margin: 22px 0 4px; color: var(--text-primary);
}
.fg-progress-line { font-size: 14.5px; color: var(--text-secondary); margin: 0; }
.fg-progress-line b {
  font-family: var(--font-display); font-weight: 600; color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* ---------- tonal band — "the one thing" ---------- */
.fg-band {
  display: block; width: calc(100% + 2 * var(--fg-pad));
  margin: 22px calc(-1 * var(--fg-pad)); padding: 20px var(--fg-pad) 22px;
  background: var(--band);
  border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule-strong);
  text-align: left; color: inherit; border-left: 0; border-right: 0;
  cursor: pointer;
}
button.fg-band { -webkit-appearance: none; appearance: none; font: inherit; }
.fg-band .fg-band-lbl {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 600; font-size: 13px;
  color: var(--text-secondary); margin: 0 0 10px;
}
.fg-band .fg-band-lbl::before { content: ""; width: 16px; height: 1px; background: var(--text-secondary); }
.fg-band h2, .fg-band .fg-band-title {
  font-family: var(--font-display); font-weight: 600; font-size: 21px;
  line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 6px; color: var(--text-primary);
}
.fg-band p { font-size: 14.5px; color: var(--text-secondary); margin: 0 0 16px; }
.fg-band .fg-band-foot {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.fg-band .fg-mins {
  font-family: var(--font-display); font-weight: 600; font-size: 14px;
  font-variant-numeric: tabular-nums; color: var(--text-primary);
}
.fg-band .fg-band-go {
  color: var(--plum); font-weight: 600; font-size: 14px;
  display: inline-flex; align-items: center; gap: 6px;
}

/* ---------- horizontal datum ---------- */
.fg-datum { margin: 6px 0 2px; }
.fg-datum .fg-track {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--ink-ed);
}
.fg-datum .fg-stage {
  appearance: none; background: none; border: 0; cursor: pointer; text-align: left;
  padding: 13px 6px 0 0; font-family: var(--font-display); font-weight: 500;
  font-size: 12px; color: var(--text-muted); position: relative;
}
.fg-datum .fg-stage::before {
  content: ""; position: absolute; top: -4px; left: 0; width: 7px; height: 7px;
  border-radius: 50%; border: 1.5px solid var(--rule-strong); background: var(--surface-warm);
}
.fg-datum .fg-stage.done { color: var(--text-secondary); }
.fg-datum .fg-stage.done::before { background: var(--text-muted); border-color: var(--text-muted); }
.fg-datum .fg-stage.here { color: var(--text-primary); font-weight: 600; }
.fg-datum .fg-stage.here::before {
  width: 9px; height: 9px; border-radius: 2px; top: -5px;
  background: var(--marker); border-color: var(--marker);
}
.fg-datum .fg-stage:focus-visible { outline-offset: -2px; }
.fg-datum .fg-datum-cnt {
  margin: 12px 0 0; font-size: 12.5px; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.fg-datum .fg-datum-cnt b { font-family: var(--font-display); font-weight: 600; color: var(--text-primary); }
.fg-datum .fg-datum-cnt a { color: inherit; }

/* ---------- chapter heading (Journey) ---------- */
.fg-chapter { display: grid; grid-template-columns: 2.1rem 1fr; gap: 0 14px; margin: 22px 0 0; }
.fg-chapter .fg-chapter-n {
  font-family: var(--font-display); font-weight: 600; font-size: 1rem;
  color: var(--marker); font-variant-numeric: tabular-nums;
}
.fg-chapter h1 {
  grid-column: 2; font-family: var(--font-display); font-weight: 600;
  font-size: 27px; line-height: 1.08; letter-spacing: -0.02em; margin: 0;
  color: var(--text-primary);
}
.fg-chapter .fg-chapter-tag { grid-column: 2; font-size: 14.5px; color: var(--text-secondary); margin: 8px 0 0; }

/* ---------- editorial list rows (path / other stages / category / search / actions) ---------- */
.fg-list { margin: 6px 0 0; }
.fg-row {
  display: grid; grid-template-columns: 1.7rem 1fr auto; gap: 0 12px; align-items: baseline;
  width: 100%; text-align: left; background: none; border: 0;
  border-top: 1px solid var(--rule); padding: 13px 0; cursor: pointer; font: inherit;
  color: var(--text-primary);
}
.fg-list > .fg-row:first-child { border-top: 1px solid var(--ink-ed); }
.fg-row .fg-mk {
  font-size: 13px; color: var(--text-muted); font-variant-numeric: tabular-nums;
  font-family: var(--font-display); font-weight: 600;
}
.fg-row .fg-ttl { font-size: 15px; line-height: 1.35; }
.fg-row .fg-hint { display: block; font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.fg-row .fg-aside { font-size: 12.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fg-row.done .fg-ttl { color: var(--text-muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.fg-row.done .fg-mk { color: var(--text-muted); }
.fg-row.here .fg-mk { color: var(--marker); }
.fg-row.here .fg-mk::after { content: " ▪"; }
.fg-row.locked .fg-ttl { color: var(--text-secondary); }
/* A task that stays in the Journey but doesn't apply to this user's status. */
.fg-row.na .fg-ttl { color: var(--text-secondary); }
.fg-row.na .fg-mk { color: var(--text-muted); }
.fg-row .fg-lock { font-size: 12px; color: var(--text-muted); }

/* ---------- category image card (Browse / Journey "all guides" / Home
   Explore shelf) — only rendered for a category that has a real, inspected
   photo (see CATEGORY_IMAGES in app.js); every other category keeps the
   plain .fg-row above, which is the fallback so the list still looks
   intentional when some rows have photos and others don't. ---------- */
.fg-cat-card {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9;
  margin: 0 0 12px; padding: 0; border: 0; border-radius: 16px;
  overflow: hidden; cursor: pointer; background: var(--bg-card);
  -webkit-appearance: none; appearance: none;
}
.fg-list > .fg-cat-card:first-child { margin-top: 6px; }
.fg-cat-card img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.fg-cat-card-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(0deg, rgba(11, 11, 15, .92) 0%, rgba(11, 11, 15, .55) 42%, rgba(11, 11, 15, .08) 72%),
    linear-gradient(0deg, rgba(124, 58, 237, .16) 0%, rgba(124, 58, 237, 0) 60%);
}
.fg-cat-card-text {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 16px 15px;
  display: flex; flex-direction: column; gap: 2px; text-align: left;
}
.fg-cat-card-title {
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-card-title, 18px);
  color: #fff; letter-spacing: -0.01em;
}
.fg-cat-card-desc { font-size: 13px; color: rgba(255, 255, 255, .82); line-height: 1.35; }
.fg-cat-card-meta { font-size: 11.5px; color: rgba(255, 255, 255, .62); margin-top: 3px; font-variant-numeric: tabular-nums; }
@media (hover: hover) {
  .fg-cat-card { transition: transform var(--motion-fast) ease, box-shadow var(--motion-fast) ease; }
  .fg-cat-card:hover, .fg-cat-card:focus-visible {
    transform: translateY(-2px); box-shadow: var(--shadow-card-hover);
  }
}
@media (prefers-reduced-motion: reduce) {
  .fg-cat-card { transition: none; }
}

/* Fixed-width variant for the Home "Save money now" horizontal shelf — the
   app's lead content block (Oct 2026 hierarchy correction), so these cards
   read as actionable money-saving destinations, not small secondary tiles.
   Width/aspect sized so the next card stays partially visible at the
   mobile viewport, making horizontal scroll obvious without a hint. */
.fg-shelf-sub {
  font-size: 14px; line-height: 1.45; color: var(--text-secondary);
  margin: -4px 0 14px; max-width: 42ch;
}
.fg-shelf {
  display: flex; gap: 12px; margin: 0 calc(var(--fg-pad) * -1) 0; padding: 0 var(--fg-pad) 4px;
  overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.fg-shelf::-webkit-scrollbar { height: 0; }
.fg-cat-card--shelf {
  flex: 0 0 auto; width: 250px; aspect-ratio: 8 / 5; margin: 0; scroll-snap-align: start;
}
.fg-cat-card--shelf .fg-cat-card-text { padding: 12px 14px 13px; }
.fg-cat-card--shelf .fg-cat-card-title { font-size: 16px; line-height: 1.2; }
.fg-cat-card--shelf .fg-cat-card-desc { font-size: 12.5px; margin-top: 2px; }
@media (min-width: 560px) {
  .fg-cat-card--shelf { width: 270px; }
}

/* No-photo fallback for a shelf card — same plum radial-gradient + dot
   pattern used for rich-category hero panels elsewhere, scaled to card
   size, so a category without a photo still reads as an intentional
   destination card rather than a broken or generic placeholder. */
.fg-cat-card--noimg {
  background:
    radial-gradient(ellipse at 80% 10%, rgba(167, 139, 250, .30), transparent 60%),
    radial-gradient(ellipse at 10% 100%, rgba(124, 58, 237, .22), transparent 55%),
    linear-gradient(135deg, #1b1527 0%, #141019 100%);
}
.fg-cat-card-noimg-pattern {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
}
.fg-cat-card-noimg-icon {
  position: absolute; top: 14px; right: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 12px;
  background: rgba(167, 139, 250, .16); color: var(--plum-pale);
  border: 1px solid rgba(167, 139, 250, .22);
}

/* ---------- guide ---------- */
/* Guide header photo — only the handful of guides with their own genuinely
   specific image (see GUIDE_IMAGES in app.js) get one; everything else
   keeps the guide reading page text-only, per the "don't decorate every
   guide" rule. */
.fg-guide-hero {
  width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-card-lg);
  overflow: hidden; margin: 12px 0 18px; background: var(--bg-card);
}
.fg-guide-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fg-byline {
  font-size: 13px; color: var(--text-muted); padding: 0 0 14px;
  border-bottom: 1px solid var(--ink-ed); margin: 0 0 18px;
}
.fg-byline b { font-family: var(--font-display); font-weight: 600; color: var(--text-secondary); }
.fg-byline a { color: var(--plum); }
.fg-lede {
  font-size: 17px; line-height: 1.5; color: var(--text-primary);
  border-left: 2px solid var(--rule-strong); padding-left: 16px; margin: 0 0 22px;
  max-width: var(--reading);
}
.fg-checklist { list-style: none; margin: 0 0 22px; padding: 0; max-width: var(--reading); }
.fg-checklist li {
  display: grid; grid-template-columns: 1.3rem 1fr; gap: 0 4px;
  padding: 9px 0; border-top: 1px solid var(--rule); font-size: 14.5px; line-height: 1.45;
}
.fg-checklist li:first-child { border-top: 1px solid var(--rule-strong); }
.fg-checklist li .fg-ck { color: var(--plum); font-weight: 700; }
.fg-steps { counter-reset: fgstep; margin: 4px 0 10px; max-width: var(--reading); }
.fg-step {
  display: grid; grid-template-columns: 2rem 1fr; gap: 0 14px;
  padding: 16px 0; border-top: 1px solid var(--rule);
}
.fg-step:first-child { border-top: 1px solid var(--ink-ed); }
.fg-step::before {
  counter-increment: fgstep; content: counter(fgstep);
  font-family: var(--font-display); font-weight: 600; font-size: 1rem;
  color: var(--ink-ed); font-variant-numeric: tabular-nums;
}
.fg-step h2, .fg-step h3 {
  grid-column: 2; font-family: var(--font-display); font-weight: 600;
  font-size: 15.5px; margin: 1px 0 5px; color: var(--text-primary);
}
.fg-step p { grid-column: 2; font-size: 14px; color: var(--text-secondary); margin: 0; line-height: 1.5; }
.fg-step ul { grid-column: 2; margin: 8px 0 0; padding-left: 18px; font-size: 13.5px; color: var(--text-secondary); }
.fg-deflist { margin: 20px 0; max-width: var(--reading); }
.fg-def {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 10px 0; border-top: 1px solid var(--rule); font-size: 14px; line-height: 1.45;
}
.fg-def:first-child { border-top: 1px solid var(--rule-strong); }
.fg-def .fg-term { color: var(--text-muted); flex-shrink: 0; }
.fg-def .fg-val { text-align: right; font-variant-numeric: tabular-nums; }
.fg-where { font-size: 15px; line-height: 1.55; margin: 0 0 14px; max-width: var(--reading); }
.fg-trouble { max-width: var(--reading); }
.fg-trouble .fg-q {
  font-family: var(--font-display); font-weight: 600; font-size: 14.5px;
  margin: 14px 0 4px; padding-top: 14px; border-top: 1px solid var(--rule);
}
.fg-trouble .fg-q:first-child { border-top: 1px solid var(--rule-strong); }
.fg-trouble .fg-a { font-size: 14px; color: var(--text-secondary); margin: 0; line-height: 1.5; }
.fg-next-note {
  font-size: 14px; color: var(--text-secondary); margin: 18px 0 0;
  padding-top: 14px; border-top: 1px solid var(--rule); max-width: var(--reading);
}
.fg-next-note b { font-family: var(--font-display); font-weight: 600; color: var(--text-primary); display: block; margin-bottom: 2px; }
.fg-source {
  margin-top: 22px; padding-top: 12px; border-top: 1px solid var(--ink-ed);
  font-size: 12.5px; color: var(--text-muted); max-width: var(--reading);
}
.fg-source a { color: var(--plum); }

/* ---------- links list (other useful actions / lookups) ---------- */
.fg-links { list-style: none; margin: 6px 0 0; padding: 0; }
.fg-links li { padding: 9px 0; border-top: 1px solid var(--rule); font-size: 14.5px; }
.fg-links li:first-child { border-top: 1px solid var(--rule-strong); }
.fg-links li a {
  color: var(--plum); text-decoration: underline; text-underline-offset: 2px;
  display: inline-flex; align-items: baseline; gap: 6px;
}
.fg-search-field {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--border); border-radius: var(--r-input);
  background: var(--bg-elevated); padding: 0 16px; width: 100%; height: 50px;
  font-size: 15px; color: var(--text-primary); font-family: inherit;
  transition: border-color var(--motion-fast) ease;
}
.fg-search-field:hover { border-color: var(--line-strong); }
.fg-search-field::placeholder { color: var(--text-muted); }

/* The actual Search-page input (as opposed to the Home button styled to
   look like one, above) — a real <input>, so it gets a real focus state. */
.fg-search-box {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--border); border-radius: var(--r-input);
  background: var(--bg-elevated); padding: 0 16px; height: 50px;
  color: var(--text-muted); transition: border-color var(--motion-fast) ease;
}
.fg-search-box:focus-within { border-color: var(--plum); }
.fg-search-box input {
  flex: 1; border: 0; background: none; font-size: 16px; height: 100%;
  color: var(--text-primary); font-family: inherit;
}
.fg-search-box input::placeholder { color: var(--text-muted); }
.fg-search-box button {
  display: flex; background: none; border: 0; color: var(--text-muted);
  cursor: pointer; padding: 4px;
}
.fg-search-box button:hover { color: var(--text-primary); }

/* ---------- buttons ---------- */
.fg-btn {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  background: var(--plum); color: #fff; border: none;
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  padding: 14px 22px; border-radius: var(--r-btn); cursor: pointer; text-decoration: none;
  transition: background var(--motion-fast) ease;
}
.fg-btn:hover { background: var(--plum-dark); }
.fg-btn.block { display: flex; width: 100%; }
.fg-btn.ghost { background: none; color: var(--plum); border: 1px solid var(--rule-strong); }
.fg-tlink {
  background: none; border: 0; color: var(--plum); font-weight: 600; font-size: 14px;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer; padding: 8px 0;
}
.fg-quiet { font-size: 13px; color: var(--text-muted); }
.fg-quiet a { color: var(--plum); }

/* ---------- paywall ---------- */
.fg-price-hero { display: flex; align-items: baseline; gap: 10px; margin: 18px 0 2px; }
.fg-price-hero .fg-price-big {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(46px, 14vw, 54px);
  letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--text-primary);
}
.fg-price-hero .fg-price-unit {
  font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--text-secondary);
}
.fg-price-sub { font-size: 13.5px; color: var(--text-muted); margin: 6px 0 0; }

/* ---------- OTP / auth (task screens — quieter) ---------- */
.fg-task-shell { padding: 0 var(--fg-pad) var(--sp-8); max-width: 420px; }
.fg-task-shell .fg-opener { font-size: 26px; max-width: none; }
.fg-otp-input, .fg-email-input {
  width: 100%; border: 0; border-bottom: 2px solid var(--ink-ed); background: none;
  font-family: var(--font-display); font-size: 22px; padding: 12px 2px; letter-spacing: .12em;
  color: var(--text-primary); font-variant-numeric: tabular-nums;
}
.fg-email-input { font-family: "Inter", sans-serif; font-size: 17px; letter-spacing: 0; }
.fg-otp-input:focus, .fg-email-input:focus { outline: none; border-bottom-color: var(--plum); }

/* ---------- questionnaire ---------- */
.fg-q-head { padding: 15px var(--fg-pad) 0; }
.fg-q-progress { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.fg-q-count {
  font-family: var(--font-display); font-weight: 600; font-size: 13px;
  color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.fg-q-track { flex: 1; height: 2px; background: var(--rule); position: relative; }
.fg-q-track > i { position: absolute; inset: 0 auto 0 0; background: var(--marker); }
.fg-q-prompt {
  font-family: var(--font-display); font-weight: 600; font-size: 25px;
  line-height: 1.12; letter-spacing: -0.02em; margin: 26px 0 6px; text-wrap: balance;
  max-width: 18ch; color: var(--text-primary);
}
.fg-q-sub { font-size: 14.5px; color: var(--text-secondary); margin: 0 0 4px; }
.fg-options { margin: 18px 0 0; }
.fg-option {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; text-align: left; background: none; cursor: pointer; font: inherit;
  border: 0; border-top: 1px solid var(--rule);
  padding: 15px 4px 15px 0; font-size: 16px; color: var(--text-primary);
}
.fg-options .fg-option:first-child { border-top: 1px solid var(--ink-ed); }
.fg-options .fg-option:last-of-type { border-bottom: 1px solid var(--rule); }
.fg-option .fg-opt-mark {
  width: 20px; height: 20px; border: 1.5px solid var(--rule-strong); border-radius: 50%;
  flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff;
}
.fg-option.selected { color: var(--text-primary); font-weight: 600; }
.fg-option.selected .fg-opt-mark { background: var(--plum); border-color: var(--plum); }
.fg-option-more {
  display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: 0;
  border-top: 1px solid var(--rule); padding: 14px 0; cursor: pointer;
  font: inherit; font-size: 14px; color: var(--plum); font-weight: 600;
}
.fg-q-cta { position: fixed; left: 0; right: 0; bottom: 0; padding: 14px var(--fg-pad); }
.fg-q-cta .fg-btn { max-width: 480px; margin: 0 auto; }

/* ---------- payoff ---------- */
.fg-payoff-facts { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0 0; }
.fg-fact-chip {
  font-family: var(--font-display); font-weight: 500; font-size: 12.5px;
  color: var(--text-secondary); border: 1px solid var(--rule-strong); padding: 4px 10px; border-radius: 3px;
}
.fg-payoff-sec { margin: 22px 0 0; }
.fg-payoff-sec .fg-payoff-lbl {
  font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--text-secondary);
  margin: 0 0 6px; display: flex; align-items: center; gap: 10px;
}
.fg-payoff-sec .fg-payoff-lbl::before { content: ""; width: 16px; height: 1px; background: var(--text-secondary); }
.fg-payoff-item {
  display: grid; grid-template-columns: 1.2rem 1fr; gap: 8px; padding: 8px 0;
  border-top: 1px solid var(--rule); font-size: 15px;
}
.fg-payoff-item:first-of-type { border-top: 1px solid var(--rule-strong); }
.fg-payoff-item.done .fg-pmark { color: var(--text-muted); }
.fg-payoff-item.done span:last-child { color: var(--text-secondary); }
.fg-payoff-item .fg-pmark { color: var(--text-muted); font-family: var(--font-display); font-weight: 600; }

/* ---------- completion ---------- */
.fg-complete {
  padding: 0 var(--fg-pad) var(--sp-8);
}
.fg-complete .fg-complete-mark {
  width: 40px; height: 40px; border-radius: 3px; background: var(--plum); color: #fff;
  display: flex; align-items: center; justify-content: center; margin: 20px 0 18px;
}
.fg-complete h1 {
  font-family: var(--font-display); font-weight: 600; font-size: 28px;
  letter-spacing: -0.02em; margin: 0 0 8px; color: var(--text-primary);
}
.fg-complete .fg-complete-sub { font-size: 15px; color: var(--text-secondary); margin: 0 0 20px; max-width: 36ch; }

/* ---------- locked guide ---------- */
.fg-locked-preview { margin: 0 0 4px; }
.fg-locked-card {
  border: 1px solid var(--rule-strong); border-radius: 6px; padding: 18px 18px 8px;
  margin: 16px 0;
}
.fg-locked-card .fg-locked-lbl {
  font-family: var(--font-display); font-weight: 600; font-size: 13px;
  color: var(--text-secondary); margin: 0 0 6px;
}
.fg-locked-card ul { list-style: none; margin: 0; padding: 0; }
.fg-locked-card li {
  display: grid; grid-template-columns: 1.2rem 1fr; padding: 7px 0;
  border-top: 1px solid var(--rule); font-size: 14px;
}
.fg-locked-card li:first-child { border-top: none; }
.fg-locked-card li .fg-ck { color: var(--plum); font-weight: 700; }
/* the paywall action IS a real product object — it keeps a container */
.fg-buy {
  border: 1px solid var(--plum); border-radius: 8px; padding: 20px; margin: 16px 0;
}
.fg-buy .fg-price-hero { margin-top: 0; }
.fg-buy .fg-btn { margin-top: 14px; }

/* ---------- trust rows ---------- */
.fg-trust {
  display: flex; align-items: baseline; gap: 8px; font-size: 12.5px;
  color: var(--status-success); margin: 12px 0;
}
.fg-trust.info { color: var(--text-secondary); }
.fg-trust a { color: var(--plum); }

/* ---------- bottom nav (mobile, < 768px) — Home / Browse / Search /
   Profile, exactly 4 items, hidden at 768px+ in favour of .top-nav. ---------- */
.bottom-nav.fg-nav {
  background: #0b0b10; border-top: 1px solid var(--border);
  height: calc(68px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.bottom-nav.fg-nav .nav-btn {
  flex-direction: column; gap: 4px; background: none; border: 0;
  font-family: var(--font-display); font-weight: 500; font-size: 11.5px;
  color: var(--nav-inactive); min-height: 44px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.bottom-nav.fg-nav .nav-btn svg,
.bottom-nav.fg-nav .nav-btn img { width: 22px; height: 22px; }
.bottom-nav.fg-nav .nav-btn.active { color: #fff; }
.bottom-nav.fg-nav .nav-btn.active svg,
.bottom-nav.fg-nav .nav-btn.active img { color: var(--plum-vivid); }
.bottom-nav.fg-nav .nav-btn .label { font-family: inherit; }
@media (min-width: 768px) {
  .bottom-nav.fg-nav { display: none; }
}

/* ---------- top nav (tablet/desktop, >= 768px) — fixed, full-width,
   logo far left, Home/Browse/Search left-aligned next to it, Profile far
   right. Hidden below 768px in favour of .bottom-nav. ---------- */
.top-nav {
  display: none;
}
@media (min-width: 768px) {
  .top-nav {
    display: flex; align-items: center; position: fixed; top: 0; left: 0; right: 0;
    height: var(--top-nav-h); z-index: 30;
    background: rgba(8, 8, 12, 0.96); backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }
  .top-nav:empty { display: none; }
  .top-nav-inner {
    width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 var(--fg-pad);
    display: flex; align-items: center; height: 100%;
  }
  .top-nav-brand {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-display); font-weight: 600; font-size: 15px;
    color: var(--text-primary); background: none; border: 0; cursor: pointer;
    flex-shrink: 0;
  }
  .top-nav-brand img { width: 18px; height: 20px; display: block; }
  .top-nav-links { display: flex; align-items: center; gap: 36px; margin-left: 36px; }
  .top-nav-link {
    position: relative; height: var(--top-nav-h); display: flex; align-items: center;
    font-size: 15px; font-weight: 500; color: var(--text-secondary);
    background: none; border: 0; cursor: pointer; padding: 0;
  }
  .top-nav-link.active { color: #fff; }
  .top-nav-link.active::after {
    content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
    width: 22px; height: 3px; border-radius: 3px; background: var(--plum-dark);
  }
  .top-nav-profile { margin-left: auto; flex-shrink: 0; }
  .top-nav-profile .nav-btn {
    background: none; border: 0; cursor: pointer; color: var(--text-secondary);
    display: flex; align-items: center; justify-content: center; width: 36px; height: 36px;
    border-radius: 50%;
  }
  .top-nav-profile .nav-btn.active { color: #fff; background: var(--bg-elevated); }
}

/* ---------- reading measure for guide/marketing body text ---------- */
.fg-page .fg-body { max-width: var(--reading); }
.fg-page > p, .fg-page .who-block p { max-width: var(--reading); }

/* ---------- eligibility / who block ---------- */
.fg-who {
  font-size: 14px; color: var(--text-secondary); line-height: 1.55;
  padding: 12px 0 12px 14px; border-left: 2px solid var(--rule-strong);
  margin: 0 0 20px; max-width: var(--reading);
}
.fg-who p { margin: 0 0 8px; }
.fg-who p:last-child { margin: 0; }

/* ---------- smart-choice cards (cheapest / best value / free / avoid) ----------
   Additive component for the "smartest, cheapest safe way" content model —
   see data.js's schema comment (smartChoice/localTip). Reuses existing
   tokens only: no new hues, no new radii. */
/* ================================================================
   comparison page (pageType === "comparison", Groceries pilot) · Oct 2026
   Visual-pass v2. Scoped tightly to this one page type until proven.
   =============================================================== */

/* Stabilization pass (Oct 2026, after Batch 1) — these values were
   hardcoded identically across 9+ rich-category cards (Groceries through
   Gyms & Fitness). Tokenizing them changes nothing visually (same values)
   but gives the now-proven card/badge/surface pattern one source of truth.
   Card radius and pill radius reuse the SITE'S EXISTING --r-card-sm/--r-tile/
   --r-pill tokens (defined in the top :root block) rather than inventing new
   ones. Only the two padding shorthands below are new — they were identical
   literals in 4+ places each with no existing token to reuse. */
:root {
  --cmp-card-pad: 18px 20px 16px;
  --cmp-card-pad-compact: 16px 18px;
}

.cmp-page { padding-bottom: 64px; }

/* ---- HERO (image-less for now — flagged as needing a real NZ grocery
   image). Big, textured plum-tinted panel so the page opens with weight. */
.cmp-hero {
  position: relative; overflow: hidden;
  min-height: 220px;
  border-radius: 20px; margin: 10px 0 24px;
  padding: 32px 28px; display: flex; align-items: flex-end;
  background:
    radial-gradient(ellipse at 85% 15%, rgba(167, 139, 250, .32), transparent 60%),
    radial-gradient(ellipse at 15% 110%, rgba(124, 58, 237, .22), transparent 55%),
    linear-gradient(135deg, #1b1527 0%, #141019 100%);
  border: 1px solid rgba(167, 139, 250, .14);
}
.cmp-hero-pattern {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}

/* Photo hero (P0 image pass, Oct 2026) — rich-page categories on
   RICH_HERO_PHOTO_CATEGORIES. Same .cmp-hero box (dimensions/radius/padding
   untouched); the gradient background becomes a fallback colour behind the
   photo while it loads, and .cmp-hero-pattern is swapped for an <img> +
   scrim. Text stays bottom-left (unchanged layout), so the scrim is darkest
   there and lightens toward the top-right where the photo itself should
   read through — not a flat purple wash over the whole image. */
.cmp-hero--photo { background: #141019; }
.cmp-hero-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.cmp-hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(8, 8, 12, .78) 0%, rgba(8, 8, 12, .42) 42%, rgba(8, 8, 12, .1) 78%),
    linear-gradient(0deg, rgba(8, 8, 12, .92) 0%, rgba(8, 8, 12, .5) 40%, rgba(8, 8, 12, .06) 72%);
}
@media (min-width: 720px) {
  .cmp-hero-scrim {
    background:
      linear-gradient(100deg, rgba(8, 8, 12, .72) 0%, rgba(8, 8, 12, .36) 38%, rgba(8, 8, 12, .06) 72%),
      linear-gradient(0deg, rgba(8, 8, 12, .85) 0%, rgba(8, 8, 12, .42) 38%, rgba(8, 8, 12, .04) 68%);
  }
}
.cmp-hero-icon {
  position: absolute; top: 28px; right: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 18px;
  background: rgba(167, 139, 250, .18); color: var(--plum-pale);
  border: 1px solid rgba(167, 139, 250, .24);
}
.cmp-hero-text { position: relative; z-index: 1; max-width: 36ch; }
.cmp-hero-eyebrow {
  font-family: var(--font-display); font-weight: 700; font-size: 11.5px;
  letter-spacing: .14em; color: var(--plum-pale);
  margin: 0 0 10px; text-transform: uppercase;
}
.cmp-hero-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 26px; line-height: 1.15; letter-spacing: -0.015em;
  margin: 0; color: #fff; text-wrap: balance;
}
@media (min-width: 720px) {
  .cmp-hero { min-height: 300px; padding: 40px 36px; }
  .cmp-hero-icon { width: 72px; height: 72px; top: 36px; right: 36px; }
  .cmp-hero-title { font-size: 36px; line-height: 1.1; max-width: 20ch; }
}
@media (min-width: 1080px) {
  .cmp-hero { min-height: 340px; padding: 48px 48px; }
  .cmp-hero-title { font-size: 42px; max-width: 22ch; }
}

/* ---- QUICK ANSWER — a labelled "Short answer" callout, not just a lede. */
.cmp-quick {
  position: relative;
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-left: 4px solid var(--plum);
  border-radius: var(--r-card-sm); padding: 18px 20px 20px;
  margin: 0 0 36px; max-width: 72ch;
}
.cmp-quick-lbl {
  display: block;
  font-family: var(--font-display); font-weight: 600; font-size: 11px;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--plum-pale); margin-bottom: 6px;
}
.cmp-quick p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--text-primary); }
.cmp-quick strong { color: var(--plum-pale); font-weight: 650; }

/* ---- SECTIONS ---- */
.cmp-section { margin: 0 0 44px; }
.cmp-section-title {
  font-family: var(--font-display); font-weight: 700; font-size: 22px;
  letter-spacing: -0.01em; margin: 0 0 6px; color: var(--text-primary);
}
.cmp-section-sub { font-size: 14.5px; color: var(--text-secondary); line-height: 1.5; margin: 0 0 18px; max-width: 60ch; }

/* ---- FIELD LABEL (shared "BEST FOR / PROS / PRICE POSITION" markers) ---- */
.cmp-field-label {
  display: block;
  font-family: var(--font-display); font-weight: 700; font-size: 10.5px;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 6px;
}
.cmp-field-label--pros { color: var(--status-success); }
.cmp-field-label--cons { color: var(--text-muted); }

/* ================================================================
   MAJOR SUPERMARKET CARDS
   Grid: 3-col desktop (≥1080) · 2-col tablet (≥720) · 1-col mobile
   Each card: branded visual header + body
   =============================================================== */
.cmp-grid {
  display: grid; grid-template-columns: 1fr; gap: 18px;
}
@media (min-width: 720px) { .cmp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .cmp-grid { grid-template-columns: repeat(3, 1fr); } }

.cmp-card {
  display: flex; flex-direction: column;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-tile); overflow: hidden;
}

/* Branded visual header — brand-colored band with the wordmark as display
   text. NO scraped logos; publicly known brand accent colors used sparingly.
   Each brand variant below overrides the band color + wordmark style. */
.cmp-card-visual {
  position: relative;
  height: 130px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #2a2434 0%, #1a1620 100%);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.cmp-card-visual::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 20px 20px; pointer-events: none;
}
.cmp-card-wordmark {
  position: relative;
  font-family: var(--font-display); font-weight: 800;
  font-size: 32px; letter-spacing: -0.02em;
  color: #fff;
}

/* Brand accent bands — publicly known identity colors, used only to make
   each option visually distinct. Not fabricated logos. */
.cmp-card--paknsave .cmp-card-visual {
  background: linear-gradient(135deg, #f4b324 0%, #c48900 100%);
}
.cmp-card--paknsave .cmp-card-wordmark { color: #1a1200; }
.cmp-card--paknsave .cmp-card-visual::before { background-image: radial-gradient(circle at 1px 1px, rgba(0, 0, 0, .08) 1px, transparent 1px); }

.cmp-card--woolworths .cmp-card-visual {
  background: linear-gradient(135deg, #2d8a3e 0%, #176527 100%);
}
.cmp-card--newworld .cmp-card-visual {
  background: linear-gradient(135deg, #d4001b 0%, #88000f 100%);
}
.cmp-card--costco .cmp-card-visual {
  background: linear-gradient(135deg, #004c91 0%, #001f3d 100%);
}

/* Restricted-availability cards get a visible warning stripe. */
.cmp-card--restricted .cmp-card-visual {
  border-bottom: 2px solid var(--status-danger-border);
}

.cmp-card-body {
  flex: 1 1 auto;
  padding: 18px 20px 18px;
  display: flex; flex-direction: column; gap: 14px;
}

/* Top row of tags: availability pill + optional restriction badge */
.cmp-card-tags {
  display: flex; flex-wrap: wrap; gap: 6px 8px; margin: -4px 0 2px;
}
.cmp-avail-pill {
  display: inline-flex; align-items: center;
  font-family: var(--font-display); font-weight: 600; font-size: 11px;
  letter-spacing: .04em;
  padding: 4px 10px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .06); color: var(--text-primary);
  border: 1px solid var(--border);
}
.cmp-card-badge-warn {
  display: inline-flex; align-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 10.5px;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 9px; border-radius: var(--r-pill);
  background: rgba(248, 113, 113, .12); color: var(--status-danger);
  border: 1px solid var(--status-danger-border);
}

/* PRICE POSITION — visually prominent, immediately after tags */
.cmp-price-block {
  padding: 12px 14px; border-radius: 10px;
  background: var(--plum-light); border: 1px solid rgba(167, 139, 250, .18);
}
.cmp-price-headline {
  font-family: var(--font-display); font-weight: 650; font-size: 15px;
  line-height: 1.35; color: var(--plum-pale);
  margin: 0;
}
.cmp-price-metric {
  font-size: 12.5px; color: var(--text-muted); margin: 4px 0 0;
  font-variant-numeric: tabular-nums;
}

/* BEST FOR — single highlighted line, distinct from pros/cons */
.cmp-bestfor-block { padding: 0; }
.cmp-bestfor-headline {
  font-family: var(--font-display); font-weight: 650; font-size: 15px;
  line-height: 1.35; color: var(--text-primary); margin: 0;
}

/* Pros / Cons blocks */
.cmp-pc-block { padding: 0; }
.cmp-pros, .cmp-cons { list-style: none; padding: 0; margin: 0; }
.cmp-pros li, .cmp-cons li {
  position: relative; padding-left: 20px; font-size: 13.5px; line-height: 1.5;
  color: var(--text-secondary); margin: 0 0 6px;
}
.cmp-pros li:last-child, .cmp-cons li:last-child { margin-bottom: 0; }
.cmp-pros li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--status-success); font-weight: 700; font-size: 14px;
}
.cmp-cons li::before {
  content: "−"; position: absolute; left: 0; top: -1px;
  color: var(--text-muted); font-weight: 700; font-size: 16px;
}

.cmp-bestif {
  font-size: 13.5px; line-height: 1.5; color: var(--text-secondary);
  margin: 0; padding: 0;
}
.cmp-bestif .cmp-field-label { display: block; }

/* Money tip — plum-tinted callout */
.cmp-card-tip {
  display: block;
  padding: 10px 12px; border-radius: 10px;
  background: var(--plum-light); border: 1px solid rgba(167, 139, 250, .22);
  font-size: 13.5px; line-height: 1.45; color: var(--text-primary);
}
.cmp-tip-lbl {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-display); font-weight: 650; font-size: 10.5px;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--plum-pale); margin-bottom: 4px;
}
.cmp-tip-lbl svg { color: var(--plum-pale); }
.cmp-tip-body { display: block; }

.cmp-avail-footnote {
  font-size: 12px; color: var(--text-muted); line-height: 1.45;
  margin: 0; padding-top: 4px;
}

.cmp-card-foot {
  margin-top: auto; padding-top: 12px;
  border-top: 1px solid var(--divider);
}
.cmp-source {
  font-size: 12px; color: var(--plum-pale); text-decoration: none;
  display: inline-flex; align-items: center; gap: 4px;
}
.cmp-source:hover { color: var(--plum-bright); text-decoration: underline; }

/* ================================================================
   SUB-CARDS (specialist / discount / community) — smaller, compact.
   Each category gets its own visual signature.
   =============================================================== */
.cmp-sub-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 720px) { .cmp-sub-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .cmp-sub-grid { grid-template-columns: repeat(3, 1fr); } }

.cmp-sub {
  display: flex; flex-direction: column;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-card-sm); padding: 16px 18px 14px;
  gap: 10px;
}
.cmp-sub-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; flex-wrap: wrap;
}
.cmp-sub-name {
  font-family: var(--font-display); font-weight: 700; font-size: 16px;
  margin: 0; color: var(--text-primary); letter-spacing: -0.005em;
}
.cmp-sub-note {
  font-size: 13.5px; line-height: 1.5; color: var(--text-secondary);
  margin: 0;
}
.cmp-sub-note .cmp-field-label { display: block; margin-bottom: 2px; }
.cmp-sub-row {
  font-size: 13.5px; line-height: 1.5; color: var(--text-secondary); margin: 0;
}

/* Specialist signature: subtle green rim (not shouty) */
.cmp-sub--specialist { border-top: 2px solid rgba(52, 211, 153, .35); }

/* Discount signature: subtle amber rim */
.cmp-sub--discount { border-top: 2px solid rgba(234, 179, 8, .4); }
.cmp-discount-what {
  font-size: 13.5px; line-height: 1.5; color: var(--text-primary); margin: 0;
}

/* Community signature: plum tint, no amber/clearance language */
.cmp-sub--community {
  background: linear-gradient(135deg, rgba(59, 29, 90, .25) 0%, var(--bg-card) 100%);
  border: 1px solid rgba(167, 139, 250, .22);
}
.cmp-community-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-display); font-weight: 700; font-size: 10px;
  letter-spacing: .09em; text-transform: uppercase;
  padding: 4px 9px; border-radius: var(--r-pill);
  background: rgba(167, 139, 250, .14); color: var(--plum-pale);
  border: 1px solid rgba(167, 139, 250, .22);
}
.cmp-community-tag svg { color: var(--plum-pale); }
.cmp-community-row { font-size: 13.5px; line-height: 1.5; color: var(--text-secondary); margin: 0; }
.cmp-community-row .cmp-field-label { display: inline-block; margin: 0 6px 0 0; }

.cmp-pill-row { display: flex; flex-wrap: wrap; gap: 5px 6px; margin-top: 4px; }
.cmp-pill {
  display: inline-block; padding: 3px 10px;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-pill);
  font-size: 12px; color: var(--text-primary); letter-spacing: .005em;
}

.cmp-examples-block { margin: 0; padding: 10px 0 2px; border-top: 1px solid var(--divider); }
.cmp-examples { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 6px; }
.cmp-examples li {
  font-size: 13px; line-height: 1.4; color: var(--text-secondary); margin: 0;
}
.cmp-examples li b { color: var(--text-primary); font-weight: 650; font-size: 13.5px; display: block; }
.cmp-sub-loc { color: var(--text-muted); font-size: 12px; }

.cmp-sub-foot {
  margin-top: auto; padding-top: 10px;
  border-top: 1px solid var(--divider);
}

/* ================================================================
   RECOMMENDATION — the final answer. Visually weighted.
   =============================================================== */
.cmp-rec-section {
  background:
    radial-gradient(ellipse at 90% 10%, rgba(167, 139, 250, .18), transparent 60%),
    var(--bg-elevated);
  border: 1px solid rgba(167, 139, 250, .22);
  border-radius: 20px; padding: 26px 28px;
}
.cmp-rec-section .cmp-section-title {
  display: flex; align-items: center; gap: 10px;
}
.cmp-rec-section .cmp-section-title::before {
  content: ""; display: inline-block;
  width: 4px; height: 20px; border-radius: 2px; background: var(--plum);
}
.cmp-rec-list {
  list-style: none; padding: 0; margin: 18px 0 0;
  display: grid; gap: 0;
}
.cmp-rec {
  display: grid; grid-template-columns: 1fr; gap: 2px;
  padding: 14px 0; border-bottom: 1px solid var(--divider);
}
.cmp-rec:first-child { padding-top: 2px; }
.cmp-rec:last-child { border-bottom: 0; padding-bottom: 0; }
.cmp-rec-scenario {
  font-family: var(--font-display); font-weight: 600; font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-muted);
}
.cmp-rec-pick {
  font-family: var(--font-display); font-weight: 700; font-size: 17px;
  color: #fff; letter-spacing: -0.005em;
}
.cmp-rec-why { font-size: 13.5px; color: var(--text-secondary); line-height: 1.5; margin-top: 2px; }
@media (min-width: 720px) {
  .cmp-rec { grid-template-columns: 220px 1fr; grid-template-rows: auto auto; gap: 2px 20px; align-items: baseline; }
  .cmp-rec-scenario { grid-row: 1 / span 2; align-self: start; padding-top: 4px; }
  .cmp-rec-pick { grid-column: 2; }
  .cmp-rec-why { grid-column: 2; }
}

/* ---- Tools + verified footer ---- */
.cmp-tools { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 8px; }
.cmp-tools li { font-size: 14px; color: var(--text-secondary); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.cmp-tools a {
  color: var(--plum-pale); text-decoration: none; font-weight: 600;
  display: inline-flex; align-items: center; gap: 4px;
}
.cmp-tools a:hover { color: var(--plum-bright); text-decoration: underline; }
.cmp-tool-note { color: var(--text-muted); font-size: 13px; }

.cmp-verified {
  margin: 24px 0 0; padding-top: 14px; border-top: 1px solid var(--divider);
  font-size: 12.5px; color: var(--text-muted); font-variant-numeric: tabular-nums;
}

/* ================================================================
   FURNITURE PILOT (buying-channel decision pattern) — Oct 2026
   Narrowly scoped to Furniture; do not reuse these classes until
   another category genuinely needs the same shape.
   =============================================================== */

/* "Best ways to buy" — 2x2 big cards on desktop, 1 col on mobile.
   channelType drives the accent color (secondhand/community/new/avoid).
   2-col doesn't kick in until the app itself widens (at ≥960px): below
   that the .app max-width stays at 480px, which is too narrow for 2 of
   these dense channel cards side by side. */
.cmp-channel-grid {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px;
}
@media (min-width: 960px) {
  .cmp-channel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.cmp-channel {
  background: var(--bg-card); border: 1px solid var(--border);
  border-top: 3px solid var(--border);
  border-radius: var(--r-tile); padding: 20px 22px 18px;
  display: flex; flex-direction: column; gap: 12px;
}
.cmp-channel--secondhand { border-top-color: rgba(52, 211, 153, .55); }
.cmp-channel--community {
  border-top-color: rgba(167, 139, 250, .5);
  background: linear-gradient(135deg, rgba(59, 29, 90, .18) 0%, var(--bg-card) 100%);
}
.cmp-channel--new { border-top-color: rgba(167, 139, 250, .5); }
.cmp-channel--avoid { border-top-color: var(--status-danger-border); }

.cmp-channel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
}
.cmp-channel-name {
  font-family: var(--font-display); font-weight: 700; font-size: 18px;
  letter-spacing: -0.005em; margin: 0; color: var(--text-primary);
}
.cmp-channel-tag {
  font-family: var(--font-display); font-weight: 700; font-size: 10.5px;
  letter-spacing: .07em; text-transform: uppercase;
  padding: 4px 9px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .06); color: var(--text-secondary);
  border: 1px solid var(--border);
}
.cmp-channel-tag--secondhand { background: rgba(52, 211, 153, .14); color: #86efac; border-color: rgba(52, 211, 153, .3); }
.cmp-channel-tag--community { background: rgba(167, 139, 250, .14); color: var(--plum-pale); border-color: rgba(167, 139, 250, .3); }
.cmp-channel-tag--new { background: rgba(167, 139, 250, .14); color: var(--plum-pale); border-color: rgba(167, 139, 250, .3); }
.cmp-channel-tag--avoid { background: rgba(248, 113, 113, .12); color: var(--status-danger); border-color: var(--status-danger-border); }

.cmp-channel-summary {
  font-size: 14.5px; line-height: 1.5; color: var(--text-secondary); margin: 0;
}
.cmp-channel-row { font-size: 14px; line-height: 1.5; color: var(--text-secondary); margin: 0; }
.cmp-channel-row .cmp-field-label { display: block; }

.cmp-channel-pc {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px;
  padding: 12px 14px; border-radius: 10px;
  background: var(--bg-elevated); border: 1px solid var(--border);
}
@media (min-width: 1080px) {
  .cmp-channel-pc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.cmp-channel-foot {
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--divider);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
}

/* New-retail sub-card — purple rim signature (distinct from specialist's
   green and discount's amber). */
.cmp-sub--retail { border-top: 2px solid rgba(167, 139, 250, .45); }

/* Triple-column "Buy SH / Buy new / Avoid" list block. 3-col kicks in at
   960 (when .app widens past its mobile max-width). */
.cmp-triple-grid {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px;
}
@media (min-width: 960px) {
  .cmp-triple-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.cmp-list-col {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-card-sm); padding: var(--cmp-card-pad-compact);
}
.cmp-list-col--sh { border-top: 2px solid rgba(52, 211, 153, .45); }
.cmp-list-col--new { border-top: 2px solid rgba(167, 139, 250, .45); }
.cmp-list-col--avoid { border-top: 2px solid var(--status-danger-border); }

.cmp-list-col-title {
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  letter-spacing: .07em; text-transform: uppercase;
  margin: 0 0 12px; color: var(--text-primary);
}
.cmp-list-col--sh .cmp-list-col-title { color: #86efac; }
.cmp-list-col--new .cmp-list-col-title { color: var(--plum-pale); }
.cmp-list-col--avoid .cmp-list-col-title { color: var(--status-danger); }

.cmp-list-stack { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.cmp-list-card {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 0; border-bottom: 1px solid var(--divider);
}
.cmp-list-card:last-child { border-bottom: 0; padding-bottom: 0; }
.cmp-list-item {
  font-family: var(--font-display); font-weight: 650; font-size: 14.5px;
  color: var(--text-primary);
}
.cmp-list-why {
  font-size: 13px; line-height: 1.45; color: var(--text-secondary);
}

/* Delivery & hidden-cost mini-cards — a compact row/grid. */
.cmp-delivery-grid {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px;
}
@media (min-width: 960px) { .cmp-delivery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .cmp-delivery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.cmp-delivery {
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px 16px;
}
.cmp-delivery-opt {
  font-family: var(--font-display); font-weight: 650; font-size: 14.5px;
  margin: 0 0 6px; color: var(--text-primary);
}
.cmp-delivery-cost {
  font-family: var(--font-display); font-weight: 650; font-size: 13.5px;
  color: var(--plum-pale); margin: 0 0 6px;
  font-variant-numeric: tabular-nums;
}
.cmp-delivery-note {
  font-size: 12.5px; line-height: 1.45; color: var(--text-secondary); margin: 0;
}

/* ================================================================
   CLOTHES PILOT (budget retail + outlets + resale + winter) — Oct 2026
   Narrowly scoped to Clothes; do not reuse these classes until
   another category genuinely needs the same shape.
   =============================================================== */

/* Price tier badge ($/$$/$$$) — small, neutral styling. */
.cmp-pricetier {
  display: inline-flex; align-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 11px;
  letter-spacing: .05em;
  padding: 4px 9px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .06); color: var(--text-primary);
  border: 1px solid var(--border);
}

/* Compact pros/cons block (used inside budgetRetailerCard — smaller than
   the main channel-card's pc grid). */
.cmp-pc-mini {
  margin: 0;
}
.cmp-pc-mini .cmp-pros, .cmp-pc-mini .cmp-cons { margin: 4px 0 0; }
.cmp-pc-mini .cmp-pros li, .cmp-pc-mini .cmp-cons li {
  padding-left: 18px; font-size: 13px; line-height: 1.45; margin-bottom: 4px;
}

/* Outlet sub-card: amber/gold rim signature — distinct from the green
   specialist and purple retail cards. */
.cmp-sub--outlet {
  border-top: 2px solid rgba(234, 179, 8, .5);
}
.cmp-outlet-tag {
  display: inline-flex; align-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 10.5px;
  letter-spacing: .07em; text-transform: uppercase;
  padding: 3px 8px; border-radius: var(--r-pill);
  background: rgba(234, 179, 8, .14); color: #fde047;
  border: 1px solid rgba(234, 179, 8, .3);
}

/* Online-resale sub-card: teal rim. */
.cmp-sub--resale {
  border-top: 2px solid rgba(14, 165, 164, .5);
}

/* NZ winter layer block: 3-up on desktop, stacked on mobile. */
.cmp-winter-grid {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px;
}
@media (min-width: 960px) {
  .cmp-winter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.cmp-winter-card {
  position: relative;
  background: var(--bg-card); border: 1px solid var(--border);
  border-top: 2px solid var(--plum);
  border-radius: var(--r-card-sm); padding: 20px 20px 18px;
  display: flex; flex-direction: column; gap: 10px;
}
.cmp-winter-step {
  position: absolute; top: 14px; right: 18px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; font-weight: 700; letter-spacing: .05em;
  color: var(--text-muted);
}
.cmp-winter-layer-name {
  font-family: var(--font-display); font-weight: 700; font-size: 17px;
  margin: 0; color: var(--text-primary); letter-spacing: -0.005em;
}
.cmp-winter-row { font-size: 13.5px; line-height: 1.55; color: var(--text-secondary); margin: 0; }
.cmp-winter-row .cmp-field-label { display: block; }

/* ================================================================
   PHONE PLANS PILOT (numeric plan comparison) — Oct 2026
   Narrowly scoped to Phone Plans; do not reuse these classes until
   another category genuinely needs the same shape.
   =============================================================== */

/* Scenario card: "Best plans by use case" — compact decision-oriented
   cards at the top of the page. Price/data/billing stat tiles. */
.cmp-scenario-grid {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px;
}
@media (min-width: 720px) { .cmp-scenario-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .cmp-scenario-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.cmp-scenario {
  background: var(--bg-card); border: 1px solid var(--border);
  border-top: 2px solid rgba(167, 139, 250, .5);
  border-radius: var(--r-card-sm); padding: var(--cmp-card-pad);
  display: flex; flex-direction: column; gap: 10px;
}
.cmp-scenario-label {
  font-family: var(--font-display); font-weight: 700; font-size: 10.5px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--plum-pale);
}
.cmp-scenario-pick {
  font-family: var(--font-display); font-weight: 700; font-size: 17px;
  letter-spacing: -0.005em; margin: 0; color: var(--text-primary); line-height: 1.25;
}
.cmp-scenario-stats {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;
  padding: 10px 12px; margin: 4px 0 2px;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 10px;
}
.cmp-scenario-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cmp-scenario-stat-val {
  font-family: var(--font-display); font-weight: 700; font-size: 13.5px;
  color: var(--text-primary); line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis;
}
.cmp-scenario-stat-key {
  font-family: var(--font-display); font-weight: 600; font-size: 10px;
  letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted);
}
.cmp-scenario-why, .cmp-scenario-caveat { font-size: 13.5px; line-height: 1.5; color: var(--text-secondary); margin: 0; }
.cmp-scenario-why .cmp-field-label, .cmp-scenario-caveat .cmp-field-label { display: block; }
.cmp-scenario-caveat { color: var(--text-muted); }

/* Provider plan card: full numeric breakdown. */
.cmp-plan-grid {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px;
}
@media (min-width: 720px) { .cmp-plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .cmp-plan-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.cmp-plan {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-card-sm); padding: var(--cmp-card-pad);
  display: flex; flex-direction: column; gap: 10px;
}
.cmp-plan--major { border-top: 2px solid rgba(167, 139, 250, .5); }
.cmp-plan--value { border-top: 2px solid rgba(52, 211, 153, .5); }

.cmp-plan-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; flex-wrap: wrap;
}
.cmp-plan-provider {
  font-family: var(--font-display); font-weight: 700; font-size: 12px;
  letter-spacing: .07em; text-transform: uppercase; color: var(--plum-pale);
}
.cmp-plan--value .cmp-plan-provider { color: #86efac; }
.cmp-plan-type {
  font-family: var(--font-display); font-weight: 600; font-size: 10.5px;
  letter-spacing: .05em; padding: 3px 8px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .06); color: var(--text-secondary);
  border: 1px solid var(--border);
}
.cmp-plan-name {
  font-family: var(--font-display); font-weight: 700; font-size: 17px;
  margin: 0; color: var(--text-primary); letter-spacing: -0.005em;
}

/* Price + data: side-by-side big stat tiles */
.cmp-plan-numbers {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding: 12px 14px; margin: 4px 0;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 10px;
}
.cmp-plan-num { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cmp-plan-num-val {
  font-family: var(--font-display); font-weight: 700; font-size: 20px;
  letter-spacing: -0.01em; color: var(--text-primary); line-height: 1.1;
  overflow-wrap: anywhere;
}
.cmp-plan-num--price .cmp-plan-num-val { color: var(--plum-pale); }
.cmp-plan--value .cmp-plan-num--price .cmp-plan-num-val { color: #86efac; }
.cmp-plan-num-key {
  font-family: var(--font-display); font-weight: 600; font-size: 10.5px;
  letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted);
}

.cmp-plan-row { font-size: 13.5px; line-height: 1.5; color: var(--text-secondary); margin: 0; }
.cmp-plan-row .cmp-field-label { display: inline-block; margin: 0 6px 0 0; }

.cmp-plan-foot {
  margin-top: auto; padding-top: 10px; border-top: 1px solid var(--divider);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px;
}

/* Temporary / first-week options */
.cmp-sub--temp { border-top: 2px solid rgba(167, 139, 250, .5); }
.cmp-sub--temp-dataonly { border-top: 2px solid rgba(14, 165, 164, .5); }
.cmp-temp-tag {
  font-family: var(--font-display); font-weight: 700; font-size: 10.5px;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 9px; border-radius: var(--r-pill);
  background: rgba(167, 139, 250, .14); color: var(--plum-pale);
  border: 1px solid rgba(167, 139, 250, .3);
}
.cmp-temp-tag--dataonly {
  background: rgba(14, 165, 164, .14); color: #5eead4;
  border-color: rgba(14, 165, 164, .3);
}

/* Networks block */
.cmp-networks {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-card-sm); padding: 18px 20px;
}
.cmp-networks-intro {
  font-size: 14px; line-height: 1.55; color: var(--text-secondary); margin: 0 0 14px;
}
.cmp-networks-list {
  list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px;
}
.cmp-networks-row {
  display: grid; grid-template-columns: 1fr; gap: 6px;
  padding: 12px 14px; background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: 10px;
}
@media (min-width: 720px) {
  .cmp-networks-row { grid-template-columns: 140px 1fr 1fr; gap: 6px 16px; align-items: baseline; }
}
.cmp-networks-name {
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  color: var(--text-primary); letter-spacing: -0.005em;
}
.cmp-networks-rsl, .cmp-networks-cov { font-size: 13.5px; line-height: 1.5; color: var(--text-secondary); }
.cmp-networks-rsl .cmp-field-label, .cmp-networks-cov .cmp-field-label { display: block; margin-bottom: 4px; }

/* Prepaid vs monthly side-by-side */
.cmp-pvm {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px;
}
@media (min-width: 720px) {
  .cmp-pvm { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.cmp-pvm-col {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-card-sm); padding: var(--cmp-card-pad);
  display: flex; flex-direction: column; gap: 12px;
}
.cmp-pvm-col--prepaid { border-top: 2px solid rgba(167, 139, 250, .5); }
.cmp-pvm-col--monthly { border-top: 2px solid rgba(14, 165, 164, .5); }
.cmp-pvm-title {
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  margin: 0; color: var(--text-primary); letter-spacing: -0.005em;
}
.cmp-pvm-col .cmp-pros li, .cmp-pvm-col .cmp-cons li { font-size: 13.5px; line-height: 1.5; }

/* HOME INTERNET PILOT (numeric-comparison) — Oct 2026
   Rental-tenancy consent block. Compact structured card: label + detail per
   rule, plus an optional action link. Teal rim to signal "legal/process"
   information (distinct from warning red). Shared component — any category
   with a short list of RTA-style rules can reuse it. */
.cmp-renting {
  background: var(--bg-card); border: 1px solid var(--border);
  border-left: 3px solid rgba(14, 165, 164, .55);
  border-radius: var(--r-card-sm); padding: var(--cmp-card-pad);
}
.cmp-renting-intro {
  font-size: 14px; line-height: 1.55; color: var(--text-secondary); margin: 0 0 14px;
}
.cmp-renting-list {
  list-style: none; padding: 0; margin: 0 0 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.cmp-renting-row {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px;
  padding: 10px 12px; background: var(--bg-elevated);
  border: 1px solid var(--border); border-radius: 10px;
}
@media (min-width: 720px) {
  .cmp-renting-row { grid-template-columns: 180px minmax(0, 1fr); gap: 4px 18px; align-items: baseline; }
}
.cmp-renting-rule {
  font-family: var(--font-display); font-weight: 650; font-size: 14px;
  color: var(--text-primary); letter-spacing: -0.005em;
}
.cmp-renting-detail {
  font-size: 13.5px; line-height: 1.55; color: var(--text-secondary);
}
.cmp-renting-action {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; font-weight: 600;
  color: var(--accent); text-decoration: none;
  padding: 8px 12px; border-radius: 8px;
  background: rgba(14, 165, 164, .08); border: 1px solid rgba(14, 165, 164, .2);
}
.cmp-renting-action:hover { background: rgba(14, 165, 164, .14); }

/* Speed as the second numeric cell on a plan card (Home Internet). Uses
   the same layout as cmp-plan-num--data; separate class so it can be
   restyled per category if needed later. */
.cmp-plan-num--speed { }

/* Warnings list */
.cmp-warnings {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.cmp-warning {
  display: grid; grid-template-columns: 1fr; gap: 2px;
  padding: 14px 16px;
  background: rgba(248, 113, 113, .06); border: 1px solid rgba(248, 113, 113, .18);
  border-radius: 12px;
}
.cmp-warning-item {
  font-family: var(--font-display); font-weight: 650; font-size: 14.5px;
  color: var(--text-primary);
}
.cmp-warning-why {
  font-size: 13.5px; line-height: 1.5; color: var(--text-secondary);
}

/* ================================================================
   POWER PILOT (cost-optimization path) — Oct 2026
   Narrowly scoped to Power; do not reuse these classes until another
   category genuinely needs the same shape.
   =============================================================== */

/* Primary tool action card — strongly featured for Powerswitch. */
.cmp-primary {
  position: relative;
  background:
    radial-gradient(ellipse at 100% 0%, rgba(167, 139, 250, .22), transparent 60%),
    linear-gradient(135deg, rgba(124, 58, 237, .14) 0%, var(--bg-card) 55%);
  border: 1px solid rgba(167, 139, 250, .3);
  border-radius: 20px; padding: 24px 26px 22px;
  display: flex; flex-direction: column; gap: 14px;
}
.cmp-primary-label {
  font-family: var(--font-display); font-weight: 700; font-size: 11px;
  letter-spacing: .09em; text-transform: uppercase; color: var(--plum-pale);
}
.cmp-primary-name {
  font-family: var(--font-display); font-weight: 700; font-size: 28px;
  letter-spacing: -0.015em; line-height: 1.1; margin: 0; color: #fff;
}
.cmp-primary-tagline {
  font-size: 15px; line-height: 1.5; color: var(--text-primary); margin: 0;
  max-width: 56ch;
}
.cmp-primary-row { font-size: 14px; line-height: 1.5; color: var(--text-secondary); margin: 0; }
.cmp-primary-row .cmp-field-label { display: inline-block; margin: 0 6px 0 0; }
.cmp-primary-inputs {
  margin: 0;
}
.cmp-primary-inputs .cmp-field-label { display: block; margin-bottom: 6px; }
.cmp-primary-inputs ul {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 16px;
}
@media (min-width: 720px) {
  .cmp-primary-inputs ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.cmp-primary-inputs li {
  position: relative; padding-left: 20px;
  font-size: 13.5px; line-height: 1.5; color: var(--text-secondary);
}
.cmp-primary-inputs li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--plum-pale); font-weight: 700;
}

.cmp-primary-saving {
  background: rgba(0, 0, 0, .25); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 6px;
}
.cmp-saving-figure {
  font-family: var(--font-display); font-weight: 700; font-size: 22px;
  color: var(--plum-pale); letter-spacing: -0.01em;
}
.cmp-saving-scope {
  font-size: 13.5px; line-height: 1.5; color: var(--text-primary);
}
.cmp-saving-disclaimer {
  font-size: 12.5px; line-height: 1.5; color: var(--text-muted);
}

.cmp-primary-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: 10px;
  background: var(--plum); color: #fff; text-decoration: none;
  font-family: var(--font-display); font-weight: 650; font-size: 15px;
  align-self: flex-start;
  transition: background var(--motion-fast) ease;
}
.cmp-primary-cta:hover { background: var(--plum-dark); }

/* Pricing-basics cards (4-up on desktop, 2-up at tablet, 1-up mobile) */
.cmp-basic-grid {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px;
}
@media (min-width: 720px) { .cmp-basic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .cmp-basic-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.cmp-basic {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.cmp-basic-name {
  font-family: var(--font-display); font-weight: 700; font-size: 14.5px;
  margin: 0; color: var(--text-primary);
}
.cmp-basic-what { font-size: 13px; line-height: 1.5; color: var(--text-secondary); margin: 0; }
.cmp-basic-what strong { color: var(--plum-pale); font-weight: 650; }
.cmp-basic-watch {
  font-size: 12.5px; line-height: 1.45; color: var(--text-muted); margin: 0;
  padding-top: 6px; border-top: 1px solid var(--divider);
}
.cmp-basic-watch .cmp-field-label { display: block; margin-bottom: 2px; }

/* Plan-type card: teal rim (differentiates from Clothes retailer/outlet). */
.cmp-sub--plantype { border-top: 2px solid rgba(14, 165, 164, .5); }

/* Provider example card: compact row-focused layout. */
.cmp-provider-grid {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px;
}
@media (min-width: 720px) { .cmp-provider-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.cmp-provider {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.cmp-provider-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; flex-wrap: wrap;
}
.cmp-provider-name {
  font-family: var(--font-display); font-weight: 700; font-size: 15.5px;
  margin: 0; color: var(--text-primary);
}
.cmp-provider-note { font-size: 13.5px; line-height: 1.5; color: var(--text-secondary); margin: 0; }
.cmp-provider-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.cmp-provider-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; padding: 4px 9px;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-pill);
  color: var(--text-primary);
}
.cmp-provider-tag-key {
  font-family: var(--font-display); font-weight: 700; font-size: 10px;
  letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted);
}
.cmp-provider-row { font-size: 13px; line-height: 1.45; color: var(--text-secondary); margin: 0; }
.cmp-provider-row .cmp-field-label { display: inline-block; margin: 0 6px 0 0; }
.cmp-provider-foot {
  margin-top: auto; padding-top: 8px; border-top: 1px solid var(--divider);
}

/* Prepay options: plum tint — these serve hardship cases, not cost-saving. */
.cmp-sub--prepay {
  background: linear-gradient(135deg, rgba(59, 29, 90, .18) 0%, var(--bg-card) 100%);
  border: 1px solid rgba(167, 139, 250, .22);
  border-top: 2px solid rgba(167, 139, 250, .45);
}

/* TOU guidance: side-by-side helps/doesn't */
.cmp-tou {
  display: flex; flex-direction: column; gap: 14px;
}
.cmp-tou-intro {
  font-size: 14.5px; line-height: 1.55; color: var(--text-secondary); margin: 0;
  max-width: 72ch;
}
.cmp-tou-cols {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px;
}
@media (min-width: 720px) { .cmp-tou-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cmp-tou-col {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-card-sm); padding: var(--cmp-card-pad-compact);
}
.cmp-tou-col--yes { border-top: 2px solid rgba(52, 211, 153, .45); }
.cmp-tou-col--no { border-top: 2px solid var(--status-danger-border); }
.cmp-tou-title {
  font-family: var(--font-display); font-weight: 700; font-size: 14.5px;
  margin: 0 0 10px; color: var(--text-primary);
}

/* ---------- options table (preferred shape, Oct 2026 content pass) ----------
   A named-option-per-row comparison. Each row shows the provider/place and
   a one-line price pro + price con. Rendered above the older abstract
   smartChoice block when both are present. */
.fg-opts {
  display: grid; grid-template-columns: 1fr; gap: 10px; margin: 2px 0 16px;
  max-width: var(--reading);
}
.fg-opt {
  display: grid; grid-template-columns: minmax(130px, 180px) 1fr; gap: 6px 18px;
  padding: 14px 16px; border-radius: var(--r-card-sm);
  background: var(--bg-card); border: 1px solid var(--border);
  align-items: baseline;
}
.fg-opt-name {
  grid-row: 1 / span 2;
  font-family: var(--font-display); font-weight: 650; font-size: 15.5px;
  color: var(--text-primary); line-height: 1.25;
}
.fg-opt-pro, .fg-opt-con {
  font-size: 14px; line-height: 1.4; color: var(--text-secondary);
  display: flex; gap: 8px; align-items: baseline;
}
.fg-opt-mark {
  flex: 0 0 auto; font-family: var(--font-display); font-weight: 700; font-size: 15px;
  width: 12px; text-align: center;
}
.fg-opt-pro .fg-opt-mark { color: var(--status-success); }
.fg-opt-con .fg-opt-mark { color: var(--text-muted); }
@media (max-width: 560px) {
  .fg-opt { grid-template-columns: 1fr; }
  .fg-opt-name { grid-row: auto; }
}

.fg-alts {
  margin: 0 0 20px; padding: 12px 16px; border-radius: var(--r-card-sm);
  background: var(--plum-light); border: 1px solid var(--border);
  font-size: 14px; line-height: 1.5; color: var(--text-secondary);
  max-width: var(--reading);
}
.fg-alts-lbl {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--plum-bright); margin-bottom: 4px;
}

.fg-opts-avoid {
  margin: 0 0 20px; padding: 14px 16px; border-radius: var(--r-card-sm);
  background: var(--status-danger-soft); border: 1px solid var(--status-danger-border);
  max-width: var(--reading);
}
.fg-opts-avoid-lbl {
  font-family: var(--font-display); font-weight: 600;
  font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--status-danger); margin-bottom: 6px;
}
.fg-opts-avoid ul {
  margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.5; color: var(--text-secondary);
}

.fg-smart { display: flex; flex-direction: column; gap: 10px; margin: 0 0 20px; max-width: var(--reading); }
.fg-smart-row {
  display: grid; grid-template-columns: 116px 1fr; gap: 4px 14px;
  padding: 14px 16px; border-radius: var(--r-card-sm);
  background: var(--bg-card); border: 1px solid var(--border);
  align-items: start;
}
.fg-smart-row p, .fg-smart-row ul { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-secondary); }
.fg-smart-row ul { padding-left: 16px; }
.fg-smart-row li { margin-bottom: 4px; }
.fg-smart-row li:last-child { margin-bottom: 0; }
.fg-smart-tag {
  font-family: var(--font-display); font-weight: 600; font-size: 11.5px;
  letter-spacing: .03em; text-transform: uppercase; color: var(--text-secondary); padding-top: 1px;
}
/* Only two rows get a distinct colour: "Best value" (the default pick, when
   present) in brand plum with a stronger border, and "Avoid" (caution) in
   red with a subtle red border. Free/Cheapest/Worth paying more share one
   neutral card — five different colours per guide reads as a rainbow
   rather than a recommendation, and most guides don't show all five at once. */
.fg-smart-row.avoid { background: var(--status-danger-soft); border-color: var(--status-danger-border); }
.fg-smart-row.avoid .fg-smart-tag { color: var(--status-danger); }
.fg-smart-row.value { background: var(--plum-soft); border-color: var(--plum); }
.fg-smart-row.value .fg-smart-tag { color: var(--plum-bright); }
@media (max-width: 480px) {
  .fg-smart-row { grid-template-columns: 1fr; gap: 3px; }
}

/* ---------- local tip callout ---------- */
.fg-tip {
  display: grid; grid-template-columns: 116px 1fr; gap: 4px 14px; align-items: start;
  padding: 12px 14px; border-radius: var(--r-input); border: 1px dashed var(--line-strong);
  margin: 0 0 20px; max-width: var(--reading);
}
.fg-tip-label {
  font-family: var(--font-display); font-weight: 600; font-size: 11.5px;
  letter-spacing: .03em; text-transform: uppercase; color: var(--plum); padding-top: 1px;
}
.fg-tip p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-secondary); }
@media (max-width: 480px) {
  .fg-tip { grid-template-columns: 1fr; gap: 3px; }
}

/* ---------- preview line (Home) ---------- */
.fg-preview-line {
  display: flex; align-items: baseline; gap: 8px; font-size: 13px;
  color: var(--text-secondary); margin: 10px 0 0;
  background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit;
}
.fg-preview-line .fg-preview-badge {
  font-family: var(--font-display); font-weight: 600; font-size: 11px;
  letter-spacing: .04em; text-transform: uppercase; color: var(--plum);
}
.fg-preview-line .fg-preview-price { color: var(--plum); font-weight: 600; margin-left: auto; }

/* =====================================================================
   DESKTOP — real composition (≥ 960px)
   Guide + Home + Journey get a reading column + context rail.
   Everything else stays a comfortably-wide single column.
   ===================================================================== */
@media (min-width: 960px) {
  .app { max-width: 1320px; }
  #view-root { padding-bottom: var(--sp-12); }
  .bottom-nav.fg-nav { max-width: 1320px; }

  /* two-column spread: rail + reading column */
  .fg-spread { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 0; }
  .fg-spread .fg-rail {
    border-right: 1px solid var(--rule-strong); padding: 8px 32px 32px 0;
    position: sticky; top: 20px; align-self: start;
  }
  .fg-spread .fg-main { padding: 8px 0 0 40px; max-width: 680px; }
  .fg-spread .fg-rail .fg-band {
    width: auto; margin: 16px 0; padding: 16px 16px 18px; border-radius: 4px;
    border-left: 1px solid var(--rule-strong); border-right: 1px solid var(--rule-strong);
  }
  .fg-spread .fg-rail .fg-opener,
  .fg-spread .fg-rail .fg-greet { font-size: 24px; max-width: none; }

  /* guide: reading column + margin notes */
  .fg-guide-spread { display: grid; grid-template-columns: minmax(0, 640px) 240px; gap: 0 40px; }
  .fg-guide-spread .fg-notes {
    border-left: 1px solid var(--rule-strong); padding-left: 24px; font-size: 13px;
    position: sticky; top: 20px; align-self: start;
  }
  .fg-guide-spread .fg-notes .fg-notes-h {
    font-family: var(--font-display); font-weight: 600; color: var(--text-primary);
    font-size: 13px; margin: 2px 0 10px;
  }
  .fg-guide-spread .fg-notes .fg-def { padding: 8px 0; }
  .fg-guide-spread .fg-main-narrow { max-width: 640px; }

  .fg-opener { font-size: 40px; max-width: 16ch; }
  .fg-greet { font-size: 34px; }
  .fg-chapter h1 { font-size: 34px; }
  .fg-band { width: auto; margin-left: 0; margin-right: 0; border-radius: 4px;
    border-left: 1px solid var(--rule-strong); border-right: 1px solid var(--rule-strong); }
}

/* small-height phones — tighten the editorial rhythm so nothing needs a long scroll */
@media (max-height: 700px) {
  .fg-opener { font-size: 27px; margin-top: 16px; }
  .fg-greet { font-size: 26px; margin-top: 16px; }
  .fg-band { margin-top: 16px; margin-bottom: 16px; padding-top: 16px; padding-bottom: 18px; }
  .fg-rule { margin: 16px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .fg-datum .fg-stage::before, .fg-row, .fg-band { transition: none !important; }
}

/* inline link-buttons (internal navigation styled as links) */
.fg-inline-link, .fg-link-btn {
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  color: var(--plum); text-decoration: underline; text-underline-offset: 2px;
}
.fg-inline-link { font-size: inherit; color: inherit; }
.fg-links li .fg-link-btn { font-size: 14.5px; }

/* ---------- Home quick-access grid — big tappable boxes straight to the
   most common newcomer needs, skipping the category screen. ---------- */
.fg-qgrid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
  margin-top: 14px;
}
.fg-qbox {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  background: var(--surface-warm-2); border: 0; border-radius: var(--r-tile);
  padding: 16px 14px; cursor: pointer; font: inherit; text-align: left;
  color: var(--text-primary); transition: background .12s ease;
}
.fg-qbox svg { color: var(--plum); flex-shrink: 0; }
.fg-qbox span { font-size: 14px; font-weight: 600; line-height: 1.25; }
.fg-qbox:hover, .fg-qbox:focus-visible { background: var(--plum-soft); }
.fg-qbox--all { background: var(--plum-light); }
.fg-qbox--all:hover, .fg-qbox--all:focus-visible { background: var(--plum-soft); }
@media (min-width: 560px) {
  .fg-qgrid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 960px) {
  .fg-qgrid { grid-template-columns: repeat(4, 1fr); }
}
.fg-complete-mini { display: flex; align-items: baseline; gap: 10px; color: var(--status-success); }
.fg-complete-mini svg { flex-shrink: 0; }

/* arrival hint — editorial aside grammar (small, hairline-marked, not a pill) */
.fg-main-narrow .arrival-note,
.fg-guide-spread .arrival-note,
.arrival-note {
  font-size: 13px;
  font-style: normal;
  color: var(--text-secondary);
  margin: 0 0 var(--sp-4);
  padding-left: 12px;
  border-left: 2px solid var(--rule-strong);
  line-height: 1.5;
}

/* fg-spread: on narrow screens the rail + main simply stack — give the main
   column air so its first eyebrow doesn't collide with the rail's last link.
   On desktop the rule border does the separating and the columns align at top. */
.fg-spread .fg-main { margin-top: 22px; }
.fg-guide-spread { justify-content: center; }
@media (min-width: 960px) {
  .fg-spread .fg-main { margin-top: 0; }
  .fg-spread .fg-main > :first-child { margin-top: 0; }
  .fg-spread .fg-rail > .fg-greet:first-child,
  .fg-spread .fg-rail > .fg-chapter:first-child { margin-top: 0; }
}

/* content that only earns its place in the desktop two-column composition */
.fg-deskonly { display: none; }
@media (min-width: 960px) { .fg-deskonly { display: block; } }
.fg-mobonly { display: block; }
@media (min-width: 960px) { .fg-mobonly { display: none; } }

/* The bottom nav element stays in the DOM on onboarding / paywall / checkout
   screens (render() empties its innerHTML rather than removing it). Left
   visible it paints an empty white bar over the bottom of those screens — on
   Welcome it clipped the "Explore first / Sign in" row. Hide it when empty. */
.bottom-nav:empty { display: none; }

/* Art-direction gate fixes (2026-09-09) */

/* 1. A disabled primary CTA was rendering as full plum with a pointer cursor —
      indistinguishable from an enabled one. The questionnaire's Continue is
      disabled until an answer is chosen, so this was actively misleading. */
.fg-btn:disabled,
.fg-btn[disabled] {
  background: var(--surface-warm-2);
  color: var(--text-muted);
  border-color: var(--rule-strong);
  cursor: not-allowed;
}
.fg-btn:disabled:hover,
.fg-btn[disabled]:hover { background: var(--surface-warm-2); }

/* 2. Questionnaire: with only 3–5 short options the block sat at the top and
      left a ~330–430px void above the anchored CTA. Auto margins centre the
      question in the space between the progress head and the CTA, and collapse
      to 0 when a long option list needs the room, so nothing ever clips. */
.fg-q-head + .fg-page {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 200px);
  min-height: calc(100dvh - 200px);
}
.fg-q-head + .fg-page > .fg-q-prompt { margin-top: auto; }
.fg-q-head + .fg-page > .fg-options { margin-bottom: auto; }

/* 3. body is the ground behind .app — keep it the page colour so a short page,
      an overscroll bounce or a safe-area gap never flashes white. */
body { background: var(--surface-warm); }

/* 4. Payoff: the two onboarding facts rendered as bordered pills — the last
      generic-SaaS chip left in the product. Set them as an editorial metadata
      line instead. */
.fg-payoff-facts {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px;
  margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--rule);
}
.fg-fact-chip {
  border: 0; background: none; border-radius: 0; padding: 0;
  font-size: 13.5px; color: var(--text-secondary); letter-spacing: 0;
}
.fg-fact-chip + .fg-fact-chip::before { content: "·"; margin-right: 8px; color: var(--text-muted); }

/* 5. Guide header + lede. .fg-g-title had no rule of its own and inherited the
      page-opener h1 size, so at 390px a long guide title ran to three ~34px
      lines. The byline's source link was full plum and wrapped to two lines,
      shouting louder than the title. And .fg-lede — which is the guide's ANSWER,
      not an aside — was enclosed in a rule + indent, so a long quick answer read
      as a 14-line pull-quote wall before any structure appeared. Size and
      leading now carry the lede's role instead of enclosure. */
.fg-g-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(25px, 6.6vw, 29px); line-height: 1.1; letter-spacing: -0.02em;
  margin: 8px 0 10px; max-width: 20ch; text-wrap: balance; color: var(--text-primary);
}
.fg-byline a {
  color: var(--text-secondary);
  text-decoration: underline;
  text-decoration-color: var(--rule-strong);
  text-underline-offset: 2px;
}
.fg-byline a:hover, .fg-byline a:focus-visible { color: var(--plum); text-decoration-color: currentColor; }
.fg-lede {
  font-size: 16.5px; line-height: 1.55; color: var(--text-primary);
  border-left: 0; padding-left: 0; margin: 0 0 24px;
  max-width: var(--reading);
}
@media (min-width: 960px) {
  .fg-g-title { font-size: 34px; }
  .fg-lede { font-size: 17px; }
}

/* 6. "Other useful actions" kept the pre-editorial .action-row pill styling
      (1px border + radius, shrink-wrapped to the label) — card-soup remnants
      sitting in the highest-value screen, with ragged right edges. Set them as
      full-width editorial rows like every other list in the product. */
.fg-links li .action-row,
.fg-links .action-row {
  display: flex; width: 100%; align-items: baseline; justify-content: space-between;
  gap: 12px; border: 0; border-radius: 0;
  margin: 0; padding: 13px 0; font-size: 14.5px; font-weight: 400;
  color: var(--text-primary); text-decoration: none;
}
.fg-links .action-row:hover, .fg-links .action-row:focus-visible { color: var(--plum); }
.fg-links .action-row svg { color: var(--text-muted); flex-shrink: 0; }

/* 7. Definition rows right-aligned their value. Fine for "10 min" or a price;
      for a six-line Cost note it produced a ragged-left paragraph. Keep the
      value block flush right, but set its text left so long values read. */
.fg-def .fg-val { text-align: left; }
.fg-def .fg-val.num { text-align: right; }

/* 8. "At a glance" is a DESKTOP margin note. On mobile it stacked underneath
      the completion CTA and repeated stage / read time / cost / source that the
      guide had already stated inline — ~150px of duplicate content after the
      call to action. */
.fg-guide-spread .fg-notes { display: none; }
@media (min-width: 960px) { .fg-guide-spread .fg-notes { display: block; } }

/* 9. Match the closing source citation to the byline: a source is metadata,
      not a call to action. Still a real, clickable, visible link. */
.fg-source a {
  color: var(--text-secondary);
  text-decoration: underline;
  text-decoration-color: var(--rule-strong);
  text-underline-offset: 2px;
}
.fg-source a:hover, .fg-source a:focus-visible { color: var(--plum); text-decoration-color: currentColor; }

/* 10. Locked guide preview stacked two bordered, rounded containers — the
       "Inside this guide" teaser directly above the purchase object. Two
       enclosed boxes in a row is the one place this design still read as card
       soup, and it split the eye's attention away from the thing being bought.
       The teaser becomes a tonal band (an existing primitive); the purchase
       object stays the only enclosed thing on the screen. */
.fg-locked-card {
  border: 0; border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule-strong);
  border-radius: 0; background: var(--band);
  padding: 16px var(--fg-pad) 6px;
  width: calc(100% + 2 * var(--fg-pad));
  margin: 18px calc(-1 * var(--fg-pad));
}
@media (min-width: 960px) {
  .fg-locked-card { width: auto; margin-left: 0; margin-right: 0; border-radius: 4px;
    border-left: 1px solid var(--rule-strong); border-right: 1px solid var(--rule-strong); }
}

/* 11. Desktop rail was 300px. At 960–1040 — right where the two-column
       composition first activates — that left the "next step" band a 267px
       measure (description wrapping to five choppy lines) and squeezed the
       datum's four stage labels to 67px each, so "Find your feet" and
       "Work & build" wrapped onto two lines. The datum is a core proprietary
       element; it must never break. Wider rail + a rail-specific datum size. */
@media (min-width: 960px) {
  .fg-spread { grid-template-columns: 340px minmax(0, 1fr); }
  .fg-spread .fg-rail .fg-band { padding: 15px 14px 17px; }
  .fg-spread .fg-rail .fg-datum .fg-stage {
    font-size: 11px; letter-spacing: -0.005em; hyphens: none; padding-right: 4px;
  }
  .fg-spread .fg-rail .fg-datum-cnt { font-size: 14px; }
}

/* 12. Journey's chapter heading kept the full-width 34px h1 after it moved into
       the 340px rail, so the stage name filled the rail edge-to-edge and the
       11px datum directly beneath it read as a caption rather than its own
       element. Match the rail's own display scale (as .fg-greet already does)
       and give the datum room to be a separate beat. */
@media (min-width: 960px) {
  .fg-spread .fg-rail .fg-chapter h1 { font-size: 24px; }
  .fg-spread .fg-rail .fg-chapter { margin-top: 0; }
  .fg-spread .fg-rail .fg-datum { margin-top: 20px; }
}

/* 13. The completion mark was a filled orange square. Orange in this system
       means one thing — "your current position" — and the datum sits directly
       below it saying exactly that about a different stage. Two meanings for
       one colour on one screen. The mark is plum (brand confirmation); the
       check glyph carries "done". Orange is now unambiguous everywhere. */

/* Master-audit fix (P3): on Home in the entitled state, "Do this later" sat
   directly against the datum below it and read as a label for the track rather
   than an action on the band above. Give the datum its own beat when it follows
   that link. */
.fg-tlink + .fg-datum { margin-top: 22px; }

/* Personalised "For you" line inside a guide's who/eligibility panel. Sits
   inside .fg-who, marked by the plum rule so it reads as this reader's own
   situation rather than more general text. */
.fg-who .fg-foryou { border-left: 2px solid var(--plum); padding-left: 12px; margin-top: 12px; }
.fg-who .fg-foryou b { display: block; font-family: var(--font-display); font-weight: 600;
  color: var(--plum); font-size: 12.5px; letter-spacing: .01em; margin-bottom: 3px; }

/* Trader identity / support line. Deliberately quiet — it is there to be
   found at the point of sale and in Profile, not to compete with content. */
.fg-trader { font-size: 12.5px; line-height: 1.55; color: var(--text-muted);
  margin: 18px 0 0; padding-top: 12px; border-top: 1px solid var(--rule); }
.fg-trader a { color: var(--text-secondary); text-decoration: underline;
  text-decoration-color: var(--rule-strong); text-underline-offset: 2px; }
.fg-trader a:hover, .fg-trader a:focus-visible { color: var(--plum); }

/* =====================================================================
   Section W2 — Journey screen polish (2026-09-10)
   Presentation only: one clearly dominant focal task, quieter completed
   tasks, and fewer structural rules. Existing Editorial Field Guide
   tokens only — no new colour, type family or component.
   ===================================================================== */

/* -- Focal task: the loudest element on the screen. The 3px orange edge is
      the system's "your current position" marker, used at the one place it
      most literally means that. -- */
.fg-band { border-left: 3px solid var(--marker); }
.fg-band .fg-band-lbl {
  color: var(--marker); text-transform: uppercase;
  letter-spacing: .07em; font-size: 11px; margin-bottom: 12px;
}
.fg-band .fg-band-lbl::before { background: var(--marker); width: 14px; }
.fg-band .fg-band-title { font-size: 22px; line-height: 1.2; margin-bottom: 8px; }
.fg-band p { font-size: 15px; line-height: 1.55; margin-bottom: 18px; }
.fg-band .fg-band-foot { gap: 0; }
.fg-band .fg-mins {
  font-size: 13px; color: var(--text-secondary);
  padding-right: 14px; margin-right: 14px;
  border-right: 1px solid var(--rule-strong);
}
.fg-band .fg-band-go {
  text-decoration: underline; text-decoration-color: var(--rule-strong);
  text-decoration-thickness: 1.5px; text-underline-offset: 3px;
}
.fg-band:hover .fg-band-go,
.fg-band:focus-visible .fg-band-go { text-decoration-color: var(--plum); }

/* -- Completed tasks recede: no strikethrough, just a quiet colour. -- */
.fg-row.done .fg-ttl { text-decoration: none; }

/* -- Stage path list: grouped by spacing, not a rule between every task. -- */
.fg-list--plain { margin-top: 2px; }
.fg-list--plain > .fg-row,
.fg-list--plain > .fg-row:first-child { border-top: 0; padding: 7px 0; }
.fg-list--plain > .fg-row .fg-ttl { font-size: 14.5px; }
.fg-list--plain > .fg-row.here .fg-ttl { font-weight: 600; color: var(--text-primary); }
.fg-list--plain > .fg-row.here .fg-hint { color: var(--marker); }

/* -- The move from "your journey" to "the whole library" is the one place
      on this screen a rule still earns its keep. -- */
.fg-eyebrow.section-shift {
  margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--rule);
}
.fg-journey .fg-datum-cnt {
  margin: 12px 0 0; font-size: 12.5px; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.fg-journey .fg-datum-cnt b {
  font-family: var(--font-display); font-weight: 600; color: var(--text-secondary);
}

/* -- Desktop: the rail should read as an intentional panel, not a sidebar. -- */
@media (min-width: 960px) {
  .fg-journey .fg-spread .fg-rail .fg-band {
    margin: 20px 0 6px; padding: 18px 16px 20px;
    border-left: 3px solid var(--marker);
    border-right: 1px solid var(--rule-strong);
    border-radius: 0 3px 3px 0;
  }
  .fg-journey .fg-spread .fg-rail .fg-band .fg-band-title { font-size: 20px; }
  .fg-journey .fg-spread .fg-rail .fg-band p { font-size: 13.5px; line-height: 1.5; }
  .fg-journey .fg-spread .fg-main { padding-left: 48px; }
}

/* =====================================================================
   Section W3 — Search zero-result state (Step 4, 2026-09-11)
   Category chips for the honest empty state. No new tokens.
   ===================================================================== */
.fg-cat-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fg-cat-chips .fg-chip {
  font: inherit; font-size: 13px; font-weight: 500;
  color: var(--text-primary); background: var(--surface-warm-2);
  border: 1px solid var(--rule-strong); border-radius: 999px;
  padding: 6px 13px; cursor: pointer; line-height: 1.3;
}
.fg-cat-chips .fg-chip:hover,
.fg-cat-chips .fg-chip:focus-visible { border-color: var(--plum); color: var(--plum); }

/* =====================================================================
   Section W4 — Analytics consent notice (2026-09-15)
   A slim strip, not a modal: normal document flow at the very top of
   .app (see index.html — #analytics-consent sits before #view-root), so
   it simply pushes the masthead down a little while shown and takes no
   space at all once answered. Deliberately NOT position:fixed — the app
   already has two different fixed-to-viewport-bottom bars (.bottom-nav,
   .fg-q-cta) depending on the screen, and stacking a third one at the
   bottom would either overlap them or need per-screen height math. A
   top-of-flow strip has no such collision, on any screen, at any width.
   ===================================================================== */
.consent-notice {
  background: var(--surface-warm-2);
  border-bottom: 1px solid var(--divider);
  padding: 14px var(--page-pad);
  padding-top: calc(14px + env(safe-area-inset-top, 0px));
}
.consent-notice-text {
  margin: 0 0 12px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-secondary);
  max-width: 62ch;
}
.consent-notice-actions {
  display: flex;
  gap: 10px;
}
.consent-notice-actions .fg-btn {
  flex: 1;
  padding: 10px 16px;
  font-size: 14px;
  border-radius: var(--r-btn);
}

@media (min-width: 960px) {
  .consent-notice {
    padding-left: 40px;
    padding-right: 40px;
  }
  .consent-notice-actions {
    justify-content: flex-end;
  }
  .consent-notice-actions .fg-btn {
    flex: none;
    min-width: 160px;
  }
}