/* ============ fonts (self-hosted; nothing is fetched from Google or Fontshare) ============
   Newsreader (headlines, numerals, italic accents) and Plus Jakarta Sans (body
   and UI) are variable files: one file per style covers every weight. woff2, latin. */
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400 800;font-display:swap;src:url('/assets/fonts/newsreader.woff2') format('woff2')}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:400 800;font-display:swap;src:url('/assets/fonts/newsreader-italic.woff2') format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:200 800;font-display:swap;src:url('/assets/fonts/plus-jakarta-sans.woff2') format('woff2')}
/* Metric-matched fallback so paragraphs do not reflow when Plus Jakarta Sans arrives: Arial is 4.7% narrower (measured on the live guide lede, 28 September 2026). */
@font-face{font-family:'Plus Jakarta Sans Fallback';src:local('Arial');size-adjust:104.7%}

/* ============ SuppleGut design system ============ */
:root, [data-theme="light"] {
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --text-3xl: clamp(2.5rem, 1rem + 4vw, 4.5rem);

  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem;
  --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem;

  /* The Broadsheet — custard paper, espresso ink, terracotta for the one thing
     to press. From the Stitch redesign Nick chose on 10 September 2026. */
  /* Botanical Spruce & Deep Forest Sage on white: Nick's Stitch pick of 21 September 2026, first on phones,
     then rolled out here so desktop matches. Colour values only; nothing else in the sheet moved. */
  --color-bg: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-surface-2: #F4F6F4;
  --color-surface-offset: #E1E7E2;
  --color-border: #E1E7E2;
  --color-divider: #E6EBE7;
  --color-ink: #111E17;

  --color-text: #111E17;
  --color-text-muted: #4E6155;
  --color-text-faint: #7A8E81;
  --color-text-inverse: #F2F6F3;

  --color-primary: #2F5A44;
  --color-primary-hover: #16271E;
  --color-primary-soft: #E2ECE4;
  --color-peach: #8FB59B;
  --color-peach-soft: #E2ECE4;
  --color-butter: #C9D6BF;
  --color-lilac: #AEBFA2;
  --color-caution-bg: color-mix(in srgb, var(--color-butter) 26%, var(--color-surface));
  --color-caution-border: color-mix(in srgb, var(--color-butter) 65%, var(--color-peach));
  --color-caution-ink: #6B5312;
  --color-alert: #B3261E;
  --color-alert-soft: #F9DEDB;

  /* Print corners: square. Pills keep their full radius. */
  --radius-md: 2px; --radius-lg: 3px; --radius-xl: 4px; --radius-full: 9999px;
  --transition-interactive: 200ms cubic-bezier(.16,1,.3,1);
  /* Offset "printed" shadows in ink, never a blur. */
  --shadow-sm: 0 1px 0 rgba(17,30,23,.12);
  --shadow-md: 4px 4px 0 0 var(--color-ink);
  --shadow-lg: 6px 6px 0 0 var(--color-ink);

  --content-narrow: 640px; --content-default: 980px; --content-wide: 1200px;

  --font-display: 'Newsreader', 'Times New Roman', Times, serif;
  --font-body: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', system-ui, sans-serif;
  --font-ui: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', system-ui, sans-serif;
}

/* ============ base ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:none;text-size-adjust:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth;scroll-padding-top:var(--space-16)}
body{min-height:100dvh;line-height:1.6;font-family:var(--font-body);font-size:var(--text-base);color:var(--color-text);background:var(--color-bg);border-top:8px solid var(--color-primary)}
img,svg{display:block;max-width:100%;height:auto}
input,button,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none}
h1,h2,h3,h4{text-wrap:balance;line-height:1.08;font-weight:500;font-family:var(--font-display);letter-spacing:-.01em}
h1 em,h2 em,.display em{font-style:italic;font-weight:400;color:var(--color-primary)}
p,li{text-wrap:pretty;max-width:64ch}
a{color:inherit}
ul[role="list"]{list-style:none}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px;border-radius:var(--radius-md)}
a,button,input{transition:color var(--transition-interactive),background var(--transition-interactive),border-color var(--transition-interactive),box-shadow var(--transition-interactive),transform var(--transition-interactive)}
.skip-link{position:absolute;top:0;left:0;z-index:300;background:var(--color-primary);color:#fff;font-weight:600;padding:12px 16px;border-radius:0 0 var(--radius-md) 0;transform:translateY(-200%)}
.skip-link:focus{transform:none;outline-offset:-3px;outline-color:#fff}
.display:focus:not(:focus-visible),main:focus{outline:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* ============ primitives ============ */
.wrap{width:100%;max-width:var(--content-wide);margin-inline:auto;padding-inline:var(--space-5)}
.wrap-narrow{max-width:var(--content-narrow)}
.wrap-default{max-width:var(--content-default)}
.eyebrow{font-family:var(--font-ui);font-size:var(--text-xs);letter-spacing:.22em;text-transform:uppercase;color:var(--color-primary);font-weight:700}
.display{font-family:var(--font-display);font-weight:500;letter-spacing:-.02em;line-height:1}
.muted{color:var(--color-text-muted)}
.tiny{font-size:var(--text-xs);color:var(--color-text-muted);line-height:1.55}
section{padding-block:clamp(var(--space-12),8vw,var(--space-24))}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-family:var(--font-ui);font-size:.82rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:var(--space-4) var(--space-6);border-radius:var(--radius-md);text-decoration:none;min-height:52px}
.btn-primary{background:#1E3528;color:var(--color-text-inverse);border:1.5px solid #1E3528}
.btn-primary:hover{background:var(--color-primary-hover);border-color:var(--color-primary-hover);box-shadow:var(--shadow-md);transform:translate(-2px,-2px)}
.btn-ghost{border:1.5px solid var(--color-ink);background:transparent;color:var(--color-ink)}
.btn-ghost:hover{background:var(--color-ink);color:var(--color-text-inverse)}
.btn-block{width:100%}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}

.pill{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-xs);font-weight:500;padding:var(--space-2) var(--space-3);border-radius:var(--radius-full);background:var(--color-primary-soft);color:var(--color-primary)}
[data-theme="dark"] .pill{color:var(--color-primary)}
.pill-peach{background:var(--color-peach-soft);color:#8A4B2E}
[data-theme="dark"] .pill-peach{color:var(--color-peach)}
.pill-lilac{background:color-mix(in srgb, var(--color-lilac) 42%, var(--color-surface));color:#4A3D5C}
[data-theme="dark"] .pill-lilac{background:#2C2735;color:var(--color-lilac)}
.pill-butter{background:color-mix(in srgb, var(--color-butter) 45%, var(--color-surface));color:#6B5312}
[data-theme="dark"] .pill-butter{background:#302A1C;color:var(--color-butter)}

/* ============ masthead ============ */
.header{position:sticky;top:0;z-index:60;background:color-mix(in srgb, var(--color-bg) 94%, transparent);backdrop-filter:blur(10px);border-bottom:2px solid var(--color-ink)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);min-height:88px}
.header .btn-primary{background:var(--color-ink);border-color:var(--color-ink)}
.header .btn-primary:hover{background:var(--color-primary);border-color:var(--color-primary);box-shadow:none;transform:none}
.brand{display:flex;align-items:center;gap:var(--space-3);text-decoration:none}
.brand{gap:var(--space-5)}
.brand-name{font-family:var(--font-display);font-size:clamp(2rem, 3.2vw, 2.9rem);font-weight:800;font-style:italic;letter-spacing:-.03em;line-height:1}
.brand-name::after{content:".";color:var(--color-primary);font-style:normal}
.brand-mark{width:88px;height:88px;border-radius:50%;flex:0 0 88px;object-fit:contain;border:2px solid var(--color-ink);box-shadow:3px 3px 0 0 var(--color-ink);background:var(--color-bg)}
.header-inner{min-height:112px}
@media (max-width:599px){.brand{gap:var(--space-3)}.brand-mark{width:56px;height:56px;flex-basis:56px}.brand-name{font-size:1.7rem}.header-inner{min-height:0}}
.header-actions{display:flex;align-items:center;gap:var(--space-2)}
.icon-btn{width:40px;height:40px;display:grid;place-items:center;border-radius:var(--radius-full);border:1px solid var(--color-border);color:var(--color-text-muted)}
.icon-btn:hover{color:var(--color-primary);border-color:var(--color-primary)}
.header .btn{padding:var(--space-3) var(--space-5);min-height:44px}
.header-cta{display:inline-flex}
@media (max-width:599px){.header .header-cta{padding:var(--space-2) var(--space-4);min-height:44px;font-size:var(--text-sm)}}
.site-nav{display:flex;align-items:center;gap:var(--space-4);font-family:var(--font-ui);font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.site-nav a{color:color-mix(in srgb, var(--color-ink) 80%, transparent);text-decoration:none;display:inline-flex;align-items:center;min-height:44px;white-space:nowrap}
.site-nav a{border-bottom:2px solid transparent;padding-top:2px}
.site-nav a+a::before{content:"|";color:color-mix(in srgb, var(--color-ink) 30%, transparent);margin-right:var(--space-4);font-weight:400}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--color-primary);border-bottom-color:var(--color-primary)}
/* Tablets, landscape phones and narrow desktops (600–1279): brand, the six-link nav and the button do not fit
   on one row, so the nav takes a second row under them */
@media (min-width:600px) and (max-width:1279px){
  .header-inner{flex-wrap:wrap;row-gap:0;min-height:0;padding-top:var(--space-3)}
  .site-nav{order:3;flex-basis:100%;padding-bottom:var(--space-3)}
}
/* Short viewports (a phone on its side): a pinned masthead would cover most of
   the screen, so it scrolls with the page */
@media (max-height:500px){.header,#header{position:static}}
@media (max-width:599px){
  .header-inner{flex-wrap:wrap;row-gap:0;min-height:0;padding-top:var(--space-4)}
  .brand{min-height:44px}
  .site-nav{order:3;flex-basis:100%;min-height:0;margin-top:var(--space-2);padding:var(--space-1) 0 var(--space-2);border-top:1px solid var(--color-border);gap:var(--space-3);font-size:.62rem;letter-spacing:.1em;flex-wrap:nowrap;white-space:nowrap;justify-content:space-between;min-width:0;width:100%;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .site-nav::-webkit-scrollbar{display:none}
  .site-nav a+a::before{margin-right:var(--space-3)}
  .site-nav a{min-height:44px;padding-top:var(--space-1)}
}
.match-photo{width:72px;height:72px;flex:0 0 72px;object-fit:contain;border-radius:var(--radius-md);background:var(--color-surface);border:1px solid var(--color-border)}
.product-photo{display:block;width:min(100%,260px);height:auto;margin:0 0 var(--space-6);border-radius:0;background:#fff;border:2px solid var(--color-ink);box-shadow:var(--shadow-md)}

/* ============ hero ============ */
.hero{padding-top:var(--space-8);padding-bottom:0;overflow:hidden}
.hero-grid{display:grid;gap:var(--space-8);align-items:center}
@media (min-width:900px){
  .hero{padding-top:var(--space-12)}
  .hero-grid{grid-template-columns:1.02fr .98fr;column-gap:var(--space-16);row-gap:0}
  .hero-copy{grid-column:1;align-self:end}
  .hero-quizbox{grid-column:2;grid-row:1 / span 2}
  .alt-inline{grid-column:1;grid-row:2;align-self:start}
}
.hero .eyebrow{display:block;padding-bottom:var(--space-4);border-bottom:2px solid var(--color-ink);font-size:.7rem}
.hero h1{font-family:var(--font-display);font-weight:400;font-size:clamp(2.75rem, 6.2vw, 5.6rem);line-height:.98;letter-spacing:-.025em;margin-block:var(--space-6) var(--space-5)}
.hero-sub{font-size:var(--text-base);line-height:1.6;color:color-mix(in srgb, var(--color-ink) 85%, transparent);max-width:40ch;padding-block:var(--space-4);border-top:1px solid color-mix(in srgb, var(--color-ink) 15%, transparent);border-bottom:1px solid color-mix(in srgb, var(--color-ink) 15%, transparent)}
.hero-built{margin-top:var(--space-5);font-size:var(--text-sm);color:var(--color-text-muted);max-width:44ch}
.hero-cta{margin-top:var(--space-8);display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--space-4) var(--space-6);align-items:center}
.alt-inline{margin-top:var(--space-6);max-width:34rem;background:var(--color-surface);border:2px solid var(--color-ink);border-radius:0;padding:var(--space-6);box-shadow:var(--shadow-lg);position:relative}
.alt-inline h2{font-size:var(--text-xl);font-style:italic;font-weight:700;margin-bottom:var(--space-1)}
@media (max-width:400px){.alt-inline{padding:var(--space-5) var(--space-4)}}
/* Phone and tablet: the hero stacks, so the copy block dissolves into the grid
   and its pieces are reordered — headline, sub, trust line, then the
   "Where's the trouble?" tiles, then the free-text box. The button lives in
   the header on these widths. */
@media (max-width:899px){
  .hero-grid{gap:0}
  .hero-copy{display:contents}
  .hero-grid .eyebrow{order:1}.hero-grid h1{order:2}.hero-sub{order:3}.hero-built{order:4}.hero-cta{order:5}.hero-quizbox{order:6}.alt-inline{order:7}
  .hero-cta{margin-top:var(--space-4)}
  .hero-cta>.btn{display:none}
  .hero-quizbox{margin-top:var(--space-6);min-height:0}
  .alt-inline{margin-top:var(--space-6);max-width:none}
}
.alt-row{display:flex;gap:var(--space-2);align-items:stretch}
.alt-row input{flex:1;min-width:0;font:inherit;font-size:max(16px, var(--text-sm));line-height:1.4;color:var(--color-text);background:var(--color-bg);border:1px solid var(--color-ink);border-radius:0;padding:var(--space-3) var(--space-4)}
.alt-row .btn{background:var(--color-ink);border-color:var(--color-ink);color:var(--color-text-inverse)}
.alt-row .btn:hover{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-text-inverse)}
.alt-row input::placeholder{color:var(--color-text-faint)}
.alt-row input:focus{outline:2px solid var(--color-primary);outline-offset:1px}
.alt-row .btn{flex:0 0 auto;min-height:0;padding-block:var(--space-2)}
@media (max-width:420px){.alt-row{flex-direction:column}.alt-row .btn{width:100%}}
.friction{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3);font-family:var(--font-ui);font-size:.8rem;font-weight:400;letter-spacing:.01em;color:var(--color-text-muted)}
.friction span{display:inline-flex;align-items:center;gap:var(--space-2)}
.friction span:not(:last-child)::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--color-primary);margin-left:var(--space-2)}
.friction{font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
@media (max-width:420px){.friction{flex-wrap:nowrap;white-space:nowrap;font-size:.72rem;gap:var(--space-2)}.friction span{gap:var(--space-1)}.friction span:not(:last-child)::after{margin-left:var(--space-1)}}
.hero-media{position:relative}
.hero-media img{border-radius:var(--radius-xl) var(--radius-xl) 0 0;object-fit:cover;width:100%;aspect-ratio:4/4.2;box-shadow:var(--shadow-lg)}
@media (min-width:900px){.hero-media img{border-radius:var(--radius-xl);aspect-ratio:4/4.6}.hero-badge{left:calc(-1 * var(--space-8));max-width:260px}}
@media (max-width:899px){.hero-badge{left:var(--space-4)}}
.hero-badge{position:absolute;left:calc(-1 * var(--space-4));bottom:var(--space-8);background:var(--color-surface);border-radius:var(--radius-lg);padding:var(--space-4);box-shadow:var(--shadow-md);max-width:240px}
.hero-badge strong{display:block;font-family:var(--font-display);font-size:1.05rem}


/* ---- the hero quiz box: question 1 in the hero, photo retired ---- */
/* Space is reserved before app.js injects the card, so nothing below shifts. */
.hero-quizbox{min-height:540px}
@media (min-width:900px){.hero-quizbox{min-height:560px}}
.hero-quiz-card{background:var(--color-surface);border:2px solid var(--color-ink);border-radius:0;padding:var(--space-6);box-shadow:var(--shadow-lg)}
.hero-quiz-card h2{font-size:var(--text-xl);font-style:italic;font-weight:800;margin-bottom:var(--space-1)}
.hero-quiz-sub{font-family:var(--font-ui);font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb, var(--color-ink) 70%, transparent);margin-bottom:var(--space-5);padding-bottom:var(--space-4);border-bottom:2px solid var(--color-ink)}
.hero-quiz-card h2{position:relative;padding-right:5.5rem}
.hero-quiz-card h2::after{content:"Step 1 of 4";position:absolute;right:0;top:.2em;font-family:var(--font-ui);font-style:normal;font-weight:700;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;background:var(--color-ink);color:var(--color-text-inverse);padding:4px 9px}
/* Symptom rows: numbered index strips instead of pictogram cards. */
.hero-quiz-card .options.cards-grid{grid-template-columns:1fr;gap:8px;counter-reset:tile}
.hero-quiz-card .options.cards-grid .opt-card,.hero-quiz-card .options.cards-grid .opt-card--wide{flex-direction:row;align-items:center;justify-content:flex-start;text-align:left;gap:var(--space-3);min-height:52px;padding:10px 14px;border:1px solid color-mix(in srgb, var(--color-ink) 30%, transparent);background:var(--color-surface)}
.hero-quiz-card .opt-card .card-text{flex:1;order:1}
.hero-quiz-card .opt-card .card-sub{display:none}
.hero-quiz-card .opt-card .card-icon{order:2;margin-left:auto;width:26px;height:26px;flex:0 0 26px;border:1px solid color-mix(in srgb, var(--color-ink) 30%, transparent);display:grid;place-items:center;color:var(--color-ink)}
.hero-quiz-card .opt-card .card-icon svg{width:16px;height:16px;transform:none}
.hero-quiz-card .opt-card .card-check{display:none}
.hero-quiz-card .opt-card:hover{background:var(--color-primary);color:var(--color-text-inverse);border-color:var(--color-primary)}
.hero-quiz-card .opt-card:hover .card-icon{color:var(--color-text-inverse);border-color:var(--color-text-inverse)}
.hero-quiz-card .opt-card[aria-pressed="true"]{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-text-inverse);box-shadow:none}
.hero-quiz-card .opt-card[aria-pressed="true"] .card-icon{color:var(--color-text-inverse);border-color:var(--color-text-inverse)}
.hero-quiz-card .opt-card[aria-pressed="true"] .card-check{display:none}
.hero-quiz-note{text-align:left;font-family:var(--font-ui);font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;border-top:2px solid var(--color-ink);padding-top:var(--space-4)}
.hero-quiz-note{margin-top:var(--space-4);font-size:var(--text-xs);color:var(--color-text-faint);text-align:center;max-width:none}

@media (max-width:400px){.hero-quiz-card{padding:var(--space-5) var(--space-4)}}

/* ============ generic layouts ============ */
.section-head{max-width:none;margin-bottom:var(--space-10);padding-bottom:var(--space-6);border-bottom:2px solid var(--color-ink)}
.section-head h2{font-family:var(--font-display);font-weight:400;font-size:var(--text-2xl);line-height:1;letter-spacing:-.025em;margin-top:var(--space-3);max-width:26ch;text-wrap:pretty}
.cards{display:grid;gap:var(--space-4)}
@media (min-width:760px){.cards-3{grid-template-columns:repeat(3,1fr)}.cards-2{grid-template-columns:repeat(2,1fr)}}
.card{background:var(--color-surface);border:1px solid color-mix(in srgb, var(--color-ink) 22%, transparent);border-radius:0;padding:var(--space-6);transition:border-color var(--transition-interactive),box-shadow var(--transition-interactive)}
a.card:hover{border-color:var(--color-ink);box-shadow:var(--shadow-md)}
.card h3{font-size:var(--text-lg);font-weight:700;margin-bottom:var(--space-2)}
.card p{font-size:var(--text-sm);color:color-mix(in srgb, var(--color-ink) 80%, transparent)}
.step-num{font-family:var(--font-display);font-style:italic;font-weight:900;font-size:3.2rem;line-height:1;color:color-mix(in srgb, var(--color-ink) 30%, transparent);margin-bottom:var(--space-4);padding-bottom:var(--space-3);border-bottom:1px solid color-mix(in srgb, var(--color-ink) 20%, transparent)}
.card:hover .step-num{color:var(--color-primary)}
#how .cards{gap:0;border:2px solid var(--color-ink);background:var(--color-bg)}
#how .card{border:0;background:transparent;padding:var(--space-8)}
#how .card:hover{background:color-mix(in srgb, var(--color-surface-2) 50%, transparent);box-shadow:none}
@media (min-width:760px){#how .card+.card{border-left:1px solid var(--color-ink)}}
@media (max-width:759px){#how .card+.card{border-top:1px solid var(--color-ink)}}

.split{display:grid;gap:var(--space-8);align-items:center}
@media (min-width:900px){.split{grid-template-columns:1fr 1fr;gap:var(--space-16)}}
.split img{border-radius:var(--radius-xl);object-fit:cover;width:100%;aspect-ratio:4/3.4}

.band{background:var(--color-bg);border-top:2px solid var(--color-ink)}
.band.band-ink{background:var(--color-ink);color:var(--color-text-inverse)}
.band.band-ink .muted{color:color-mix(in srgb, var(--color-text-inverse) 75%, transparent)}
.band.band-ink h2 em{color:var(--color-peach)}
.band.band-ink .friction{color:color-mix(in srgb, var(--color-text-inverse) 70%, transparent)}
.band.band-ink .btn-primary{background:var(--color-peach);border-color:var(--color-peach);color:var(--color-ink)}
.band.band-ink .btn-primary:hover{background:var(--color-text-inverse);border-color:var(--color-text-inverse);box-shadow:4px 4px 0 0 var(--color-peach)}
.quote{font-family:var(--font-display);font-style:italic;font-weight:400;font-size:var(--text-xl);line-height:1.15;max-width:26ch}
.split img{border-radius:0;border:2px solid var(--color-ink);box-shadow:var(--shadow-lg)}

/* ============ footer ============ */
.footer{background:var(--color-bg);border-top:2px solid var(--color-ink);padding-block:var(--space-10)}
.footer-links{text-transform:uppercase;letter-spacing:.12em;font-weight:700}
.footer-top{display:flex;flex-wrap:wrap;gap:var(--space-6);justify-content:space-between;align-items:flex-start}
.footer-links{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);font-size:var(--text-xs);font-weight:500}
.footer-links a,.footer-links button{text-decoration:underline;text-underline-offset:3px;color:var(--color-text-muted)}
@media (max-width:599px){.footer-links a,.footer-links button,.legal-nav a,.crumb a,.deep-link-inline{display:inline-flex;align-items:center;min-height:44px}}
.footer-links a:hover,.footer-links button:hover{color:var(--color-primary)}
.footer-legal{margin-top:var(--space-8);padding-top:var(--space-5);border-top:1px solid var(--color-divider);font-size:var(--text-xs);color:var(--color-text-muted);line-height:1.55;max-width:78ch}

/* ============ quiz ============ */
.view[hidden]{display:none}
.quiz-shell{min-height:100dvh;display:flex;flex-direction:column}
.progress{position:sticky;top:0;z-index:50;background:color-mix(in srgb, var(--color-bg) 94%, transparent);backdrop-filter:blur(12px);padding-block:var(--space-4);border-bottom:2px solid var(--color-ink)}
.progress-label,.back-btn{font-family:var(--font-ui);font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.progress-row{display:flex;align-items:center;gap:var(--space-4)}
/* One segment per named section, so the indicator only ever moves forward.
   The branch changes how many taps sit inside a section, never how many
   sections there are — which is why the old "4 / 15" counter jumped. */
.progress-track{flex:1;display:flex;gap:4px}
.seg{flex:1;height:4px;border-radius:0;background:var(--color-surface-offset);transition:background 350ms cubic-bezier(.16,1,.3,1),opacity 350ms cubic-bezier(.16,1,.3,1)}
.seg.done,.seg.active{background:var(--color-primary)}
.seg.active{opacity:.6}
.progress-label{font-size:var(--text-xs);color:var(--color-text-muted);white-space:nowrap}
.back-btn{font-size:var(--text-xs);color:var(--color-text-muted);display:inline-flex;align-items:center;gap:var(--space-1);min-height:44px;margin-block:-12px}
.back-btn:hover{color:var(--color-primary)}

.step{padding-block:var(--space-10) var(--space-16);animation:rise 420ms cubic-bezier(.16,1,.3,1)}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.step h2{font-family:var(--font-display);font-style:italic;font-weight:700;font-size:var(--text-xl);margin-block:var(--space-3) var(--space-3);padding-bottom:var(--space-3);border-bottom:2px solid var(--color-ink)}
.step-help{font-size:var(--text-sm);color:var(--color-text-muted);margin-bottom:var(--space-6)}
.options{display:grid;gap:var(--space-3)}
@media (min-width:620px){.options.two-col{grid-template-columns:1fr 1fr}}
.opt{display:flex;align-items:center;gap:var(--space-3);width:100%;text-align:left;background:var(--color-surface);border:1px solid color-mix(in srgb, var(--color-ink) 25%, transparent);border-radius:0;padding:var(--space-4) var(--space-5);font-size:var(--text-sm);font-weight:600;min-height:56px;line-height:1.35}
.opt:hover{border-color:var(--color-primary);background:color-mix(in srgb,var(--color-primary-soft) 45%,var(--color-surface))}
.opt .tick{width:20px;height:20px;flex:0 0 20px;border-radius:50%;border:1.5px solid var(--color-border);display:grid;place-items:center;color:transparent}
.opt[aria-pressed="true"]{border-color:var(--color-primary);background:var(--color-primary-soft);font-weight:500}
.opt[aria-pressed="true"] .tick{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-surface)}
[data-theme="dark"] .opt[aria-pressed="true"] .tick{color:#12150F}
/* exclusive options ('None of these apply', 'Prefer not to say') are styled
   identically to every other option — no italics, no muted colour */

/* ---- illustrated option cards ----
   Pictogram + label + short muted sub-label. The pictogram aids recognition;
   the label is always the accessible name. Safety screens deliberately stay
   plain chips. Colors are CSS variables so any theme carries them. */
.options.cards-grid{grid-template-columns:1fr 1fr;gap:10px}
.options.cards-row{gap:10px}
.opt-card{position:relative;border-radius:0;border-width:1.5px;min-width:0}
.opt-card .card-label{font-family:var(--font-ui);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700}
.options.cards-grid .opt-card{flex-direction:column;align-items:center;text-align:center;gap:var(--space-2);padding:var(--space-5) var(--space-3) var(--space-4);min-height:132px;justify-content:flex-start}
.options.cards-grid .opt-card--wide{grid-column:1 / -1;flex-direction:row;text-align:left;min-height:0;padding:var(--space-4) var(--space-5);gap:var(--space-4);justify-content:flex-start}
.options.cards-row .opt-card{flex-direction:row;text-align:left;gap:var(--space-4);padding:var(--space-4) var(--space-5)}
.opt-card .card-icon{flex:0 0 auto;display:grid;place-items:center}
.opt-card .card-icon svg{display:block;max-width:100%}
.opt-card .card-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.opt-card .card-label{font-weight:600;line-height:1.3}
.opt-card .card-sub{font-size:var(--text-xs);color:var(--color-text-muted);line-height:1.35}
.opt-card .card-check{position:absolute;top:8px;right:8px;width:20px;height:20px;border-radius:50%;background:var(--color-primary);color:var(--color-surface);display:none;place-items:center}
.opt-card[aria-pressed="true"]{border-color:var(--color-ink);background:var(--color-ink);color:var(--color-text-inverse);box-shadow:var(--shadow-md)}
.opt-card[aria-pressed="true"] .card-sub{color:color-mix(in srgb, var(--color-text-inverse) 75%, transparent)}
.opt-card[aria-pressed="true"] .card-icon{color:var(--color-peach)}
.opt-card[aria-pressed="true"] .card-check{background:var(--color-peach);color:var(--color-ink)}
.opt-card[aria-pressed="true"] .card-check{display:grid}
@media (max-width:340px){.options.cards-grid .opt-card{padding:var(--space-4) var(--space-2) var(--space-3);min-height:120px}.opt-card .card-icon svg{transform:scale(.85)}}

/* Text-only cards: same chrome as the illustrated ones, shorter, centred. An
   empty icon slot collapses rather than leaving a hole. */
.opt-card .card-icon:empty{display:none}
.options.cards-grid .opt-card--text{min-height:76px;justify-content:center;padding:var(--space-4) var(--space-3)}
.opt-card--row.opt-card--text,.opt-card--quiet.opt-card--text{min-height:0}


/* Quiet cards: the clinical screens. Smaller pictograms, calmer spacing, and a
   sub-label that says what happens next — declaring should feel like it
   improves the match, not risks it. */
.options.cards-quiet{gap:8px}
.opt-card--quiet{flex-direction:row;text-align:left;gap:var(--space-3);padding:var(--space-3) var(--space-4);min-height:0;align-items:center}
.opt-card--quiet .card-label{font-size:var(--text-sm)}
.opt-card--quiet .card-sub{font-size:var(--text-xs)}

/* Red-flag screen: continue lives at the top; the flags sit in a warm amber
   caution panel and are ALWAYS fully visible — tighten spacing before ever
   hiding one. One tap on a flag goes straight to guidance. */
.caution-panel{margin-top:var(--space-4);background:var(--color-caution-bg);border:1.5px solid var(--color-caution-border);border-radius:var(--radius-lg);padding:var(--space-4) var(--space-4) var(--space-3)}
.caution-panel h3{font-size:var(--text-sm);font-weight:600;color:var(--color-caution-ink)}
.caution-panel > p{font-size:var(--text-xs);color:var(--color-text-muted);margin:var(--space-1) 0 var(--space-3)}
.caution-row{display:block;width:100%;text-align:left;background:var(--color-surface);border:1px solid var(--color-caution-border);border-radius:var(--radius-lg);padding:11px 13px;min-height:44px;font-size:var(--text-sm);line-height:1.35;margin-bottom:6px}
@media (hover:hover){.caution-row:hover{border-color:var(--color-alert);color:var(--color-alert)}}

/* Guidance page, restyled to match the card look. */
.stop-panel{background:var(--color-surface);border:1.5px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-6)}


.step-actions{margin-top:var(--space-8);display:flex;flex-direction:column;gap:var(--space-3)}
.free-text{width:100%;box-sizing:border-box;font:inherit;font-size:var(--text-base);line-height:1.55;color:var(--color-text-primary);background:var(--color-surface);border:1px solid var(--color-border);border-radius:12px;padding:var(--space-4);resize:vertical;min-height:7.5rem}
.free-text::placeholder{color:var(--color-text-faint)}
.free-text:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-soft)}
.safety-note{margin-top:var(--space-6);background:var(--color-surface-2);border-radius:var(--radius-lg);padding:var(--space-4);font-size:var(--text-xs);color:var(--color-text-muted)}

/* stop screen */
.stop{max-width:var(--content-narrow);margin-inline:auto;text-align:left;padding-block:var(--space-16)}
.stop-icon{width:52px;height:52px;border-radius:var(--radius-full);background:var(--color-alert-soft);color:var(--color-alert);display:grid;place-items:center;margin-bottom:var(--space-6)}
.stop h2{font-family:var(--font-display);font-size:var(--text-xl);margin-bottom:var(--space-4)}
.stop p{font-size:var(--text-sm);color:var(--color-text-muted);margin-bottom:var(--space-4)}
.stop ul{margin:var(--space-4) 0 var(--space-6) var(--space-5);font-size:var(--text-sm);color:var(--color-text-muted)}

/* loader */
.loading{min-height:70dvh;display:grid;place-items:center;text-align:center}
.loading-inner{max-width:34ch}
.loading h2{font-family:var(--font-display);font-size:var(--text-xl);margin-bottom:var(--space-3)}
.loading-steps{margin-top:var(--space-6);display:grid;gap:var(--space-3);text-align:left;font-size:var(--text-sm);color:var(--color-text-faint)}
.loading-steps li{display:flex;gap:var(--space-3);align-items:center;transition:color 300ms}
.loading-steps li.active{color:var(--color-text)}
.loading-steps li.done{color:var(--color-text-muted)}
.dot{width:8px;height:8px;border-radius:50%;background:currentColor;flex:0 0 8px}
.spinner{width:38px;height:38px;border-radius:50%;border:2px solid var(--color-border);border-top-color:var(--color-primary);animation:spin 900ms linear infinite;margin:0 auto var(--space-6)}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============ results ============ */
.results-head{padding-block:var(--space-10) var(--space-6)}
.results-context{margin-top:var(--space-5)}
.results-head h1{font-family:var(--font-display);font-weight:400;font-size:var(--text-2xl);line-height:1;letter-spacing:-.025em;margin-block:var(--space-3)}
.results-heard{font-size:var(--text-sm);color:var(--color-text-muted);max-width:52ch;line-height:1.55}
.trust{background:var(--color-surface-2);border:1px solid color-mix(in srgb, var(--color-ink) 20%, transparent);border-left:4px solid var(--color-primary);border-radius:0;padding:var(--space-5);margin-top:var(--space-4)}
.trust h2{font-family:var(--font-display);font-size:var(--text-lg);margin-bottom:var(--space-2)}
.trust p{font-size:var(--text-sm);color:var(--color-text-muted)}
[data-theme="dark"] .trust p{color:var(--color-text-muted)}
.trust em{font-style:normal;font-weight:600;color:var(--color-text)}
.disclose-toggle{margin-top:var(--space-2);display:inline-flex;align-items:center;min-height:44px;font-size:var(--text-xs);font-weight:600;color:var(--color-primary);text-decoration:underline;text-underline-offset:3px}

.match{background:var(--color-surface);border:2px solid var(--color-ink);border-radius:0;overflow:hidden;margin-bottom:var(--space-5)}
.match-top{display:flex;gap:var(--space-4);align-items:flex-start;padding:var(--space-5) var(--space-5) 0}
.match-rank{font-family:var(--font-display);font-size:1.5rem;color:var(--color-peach);line-height:1}
.match-body{padding:var(--space-4) var(--space-5) var(--space-5)}
.match h3{font-size:var(--text-lg);font-weight:600}
.match-brand{font-size:var(--text-xs);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:var(--space-1)}
.match-tagline{font-size:var(--text-sm);color:var(--color-text-muted);font-style:italic;margin-top:var(--space-1)}
.match-block{margin-top:var(--space-4)}
.match-block h4{font-size:var(--text-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:var(--space-2);font-weight:600}
.match-block ul{margin-left:var(--space-4);font-size:var(--text-sm);color:var(--color-text-muted);display:grid;gap:var(--space-1)}
.match-block p{font-size:var(--text-sm);color:var(--color-text-muted)}
.stars{display:flex;align-items:center;gap:var(--space-2);font-weight:600}
.stars svg{color:var(--color-butter)}
[data-theme="dark"] .stars svg{color:var(--color-butter)}
.stars-meta{font-size:var(--text-xs);color:var(--color-text-muted);font-weight:400}
.match-cta{margin-top:var(--space-5)}
.affil{font-size:var(--text-xs);color:var(--color-text-muted);margin-top:var(--space-3);line-height:1.5}
.no-affil{color:var(--color-primary);font-weight:600}

.conf-pill{background:var(--color-surface);color:var(--color-text);padding:.15rem .5rem;border-radius:var(--radius-full);font-size:var(--text-xs);letter-spacing:.06em;text-transform:none;margin-left:var(--space-2)}
   should not have to read 600 words to find out what this costs. */
/* Visible in the collapsed runner summary, so the runners have a reason to exist. */
.save-lead{margin-top:var(--space-6)}
.save-tail{background:none;padding:0;margin-top:var(--space-8)}
.save{background:var(--color-surface);border:2px solid var(--color-ink);border-radius:0;padding:var(--space-6);margin-top:var(--space-8);box-shadow:var(--shadow-md)}
.save h2{font-family:var(--font-display);font-size:var(--text-lg);margin-bottom:var(--space-2)}
.save p{font-size:var(--text-sm);color:var(--color-text-muted)}


.demo-note{border:1px dashed var(--color-border);border-radius:var(--radius-lg);padding:var(--space-4);font-size:var(--text-xs);color:var(--color-text-muted);margin-block:var(--space-6)}

/* ============ modal ============ */
.modal{position:fixed;inset:0;z-index:200;display:grid;place-items:end center;background:rgba(25,22,16,.45);padding:0}
.modal[hidden]{display:none}
.modal-panel{background:var(--color-surface);width:100%;max-width:640px;max-height:88dvh;overflow-y:auto;border:2px solid var(--color-ink);border-radius:0;padding:var(--space-6);animation:up 320ms cubic-bezier(.16,1,.3,1)}
@media (min-width:700px){.modal{place-items:center}.modal-panel{border-radius:var(--radius-xl)}}
@keyframes up{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.modal-panel h2{font-family:var(--font-display);font-size:var(--text-lg);margin-bottom:var(--space-4)}
.modal-panel h3{font-size:var(--text-sm);font-weight:600;margin-top:var(--space-5);margin-bottom:var(--space-2)}
.modal-panel p, .modal-panel li{font-size:var(--text-sm);color:var(--color-text-muted)}
.modal-panel ul{margin-left:var(--space-5);display:grid;gap:var(--space-2);margin-top:var(--space-2)}
.modal-close{position:sticky;top:0;margin-left:auto;display:flex;align-items:center;min-height:44px;padding:0 var(--space-2);margin-right:calc(-1 * var(--space-2));font-size:var(--text-xs);font-weight:600;color:var(--color-text-muted)}


/* ============ formula ============ */
.equation{font-family:var(--font-display);font-style:italic;font-size:var(--text-lg);line-height:1.35;margin-bottom:var(--space-5);background:var(--color-primary);color:var(--color-text-inverse);border:2px solid var(--color-ink);padding:var(--space-6);box-shadow:var(--shadow-lg)}
.equation .eq-out{font-style:normal;font-weight:700;border-bottom:2px solid var(--color-text-inverse);padding-bottom:2px}
.equation .eq-op{opacity:.7;padding-inline:2px}
.equation .eq-1,.equation .eq-2,.equation .eq-3,.equation .eq-4{color:inherit}
.term{padding-block:var(--space-4);border-top:1px solid var(--color-divider)}
.term-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4)}
.term h3{font-size:var(--text-base);font-weight:600}
.term-weight{font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-faint);white-space:nowrap}
.weight-bar{height:6px;border-radius:var(--radius-full);background:var(--color-surface-offset);margin-block:var(--space-3) var(--space-3);overflow:hidden}
.weight-bar i{display:block;height:100%;border-radius:var(--radius-full);background:var(--color-primary)}
.term p{font-size:var(--text-sm);color:var(--color-text-muted)}
.gate-note{margin-top:var(--space-6);padding:var(--space-5);border-radius:0;background:var(--color-ink);border:2px solid var(--color-ink);font-size:var(--text-sm);color:color-mix(in srgb, var(--color-text-inverse) 85%, transparent)}
.gate-note strong{color:var(--color-text-inverse)}
.term{border:1px solid color-mix(in srgb, var(--color-ink) 20%, transparent);background:var(--color-surface-2);padding:var(--space-4) var(--space-5);margin-top:var(--space-3)}
.term h3{font-size:var(--text-lg)}
.split .cards .card{border-left:4px solid var(--color-primary);background:var(--color-bg)}
.faq{border:1px solid color-mix(in srgb, var(--color-ink) 30%, transparent);background:var(--color-surface);padding-inline:var(--space-5)}
.faq-item:last-child{border-bottom:0}
.faq-item:first-child{border-top:0}
.band.band-ink .btn-primary{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-text-inverse);box-shadow:6px 6px 0 0 var(--color-text-inverse)}
.band.band-ink .btn-primary:hover{background:var(--color-text-inverse);border-color:var(--color-text-inverse);color:var(--color-ink)}

/* ============ single-match results ============ */
.match--hero{border-color:var(--color-ink);box-shadow:var(--shadow-lg)}
.match--hero .match-top{background:var(--color-primary);color:var(--color-text-inverse);display:grid;grid-template-columns:auto 1fr;gap:var(--space-3) var(--space-4);align-items:center;padding-bottom:var(--space-5)}
.match--hero .winner-flag{grid-column:1 / -1;justify-self:start;margin-bottom:var(--space-1)}
.match--hero .match-photo{width:64px;height:64px;flex:0 0 64px}
.match-title{min-width:0}
.match--hero .match-top .match-brand,.match--hero .match-top .match-tagline{color:var(--color-text-inverse);opacity:.82}
.match--hero .match-top h3{font-size:var(--text-xl);font-family:var(--font-display);font-weight:400;line-height:1.15;text-wrap:balance}
.winner-flag{display:inline-flex;align-items:center;gap:var(--space-2);white-space:nowrap;font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;background:#8FB59B;color:#111E17;padding:.3rem .6rem;border-radius:var(--radius-full);margin-bottom:var(--space-3)}




/* ============ results: boxes, not paragraphs ============ */
.h4{font-family:var(--font-ui);font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--color-text-muted);font-weight:600;margin:0 0 var(--space-3)}
.match-body .h4{margin-top:0}
.pricebox{border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;margin:var(--space-3) 0 var(--space-4);font-family:var(--font-ui)}
.pricebox .pc-head,.pricebox .pc-row{display:grid;grid-template-columns:1.2fr 1fr auto;gap:var(--space-2);align-items:center;padding:var(--space-3) var(--space-4);border-top:1px solid var(--color-divider);font-size:var(--text-sm);line-height:1.4}
.pricebox .pc-head{border-top:0;background:var(--color-surface-2);font-size:var(--text-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-muted);font-weight:600;padding-block:var(--space-2)}
.pricebox .pc-row{color:var(--color-text);text-decoration:none;min-height:44px}
.pricebox .pc-row:hover .pc-shop{color:var(--color-primary)}
.pricebox .pc-shop{font-weight:600}
.pricebox .pc-shop small{display:block;font-weight:400;font-size:var(--text-xs);color:var(--color-text-muted)}
.pricebox .pc-pack{color:var(--color-text-muted)}
.pricebox .pc-price{font-weight:600;white-space:nowrap}
.pricebox .pc-own{background:var(--color-surface-2)}
/* Phones: the pack size sits under the shop name instead of squeezing a third column */
@media (max-width:520px){.pricebox .pc-head,.pricebox .pc-row{grid-template-columns:1fr auto;row-gap:0}.pricebox .pc-head span:nth-child(2){display:none}.pricebox .pc-row{grid-template-areas:"shop price" "pack price"}.pricebox .pc-shop{grid-area:shop}.pricebox .pc-pack{grid-area:pack;font-size:var(--text-xs)}.pricebox .pc-price{grid-area:price}}
.ledger{border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:var(--space-4);font-family:var(--font-ui)}
.ledger>div{display:grid;grid-template-columns:1fr 24px 1.3fr;gap:var(--space-2);align-items:start;line-height:1.5;padding:var(--space-3) var(--space-4);border-top:1px solid var(--color-divider);font-size:var(--text-sm)}
.ledger>div:first-child{border-top:0}
.ledger-head{background:var(--color-surface-2);font-size:var(--text-xs)!important;letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-muted);font-weight:600;padding-block:var(--space-2)!important}
.ledger .you{color:var(--color-text-muted)}
.ledger .you b{color:var(--color-text);font-weight:600}
.ledger .arr{color:var(--color-primary);text-align:center;line-height:1.5}
.ledger .so{font-weight:500;display:flex;gap:var(--space-2);align-items:flex-start;color:var(--color-text);line-height:1.5}
.ck{display:inline-grid;place-items:center;width:18px;height:18px;flex:0 0 18px;border-radius:50%;background:var(--color-primary);color:var(--color-text-inverse);margin-top:2px}
.ledger-none{font-size:var(--text-sm);color:var(--color-text-muted);margin-bottom:var(--space-4)}
@media (max-width:520px){.ledger>div{grid-template-columns:1fr 16px 1.15fr;gap:var(--space-1);padding:var(--space-3) var(--space-3);font-size:var(--text-xs)}.ledger .arr{font-size:var(--text-xs)}.ledger .so{gap:var(--space-1)}.ck{width:16px;height:16px;flex-basis:16px;margin-top:1px}.ck svg{width:9px;height:9px}}
.sharpen{margin:0 0 var(--space-4);font-family:var(--font-ui)}
.sh-lead{font-size:var(--text-xs);letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--color-text-muted);margin:0 0 var(--space-2)}
.sh-list{display:grid;gap:6px}
.sh-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);width:100%;text-align:left;font-size:var(--text-sm);font-weight:500;color:var(--color-primary);background:var(--color-surface);border:1.5px solid var(--color-primary);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);min-height:44px}
.sh-row .sh-arrow{opacity:.7}
@media (hover:hover){.sh-row:hover{background:var(--color-primary-soft)}}
.core{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2);margin:0 0 var(--space-3)}
.core-item{background:var(--color-surface);border:1.5px solid var(--color-border);border-radius:var(--radius-lg);min-width:0}
.core-item>summary{list-style:none;cursor:pointer;position:relative;padding:var(--space-3) var(--space-5) var(--space-3) var(--space-2);text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--space-1);min-width:0}
.core-item>summary::-webkit-details-marker{display:none}
.core-item>summary::after{content:'›';position:absolute;right:var(--space-3);top:50%;transform:translateY(-50%) rotate(90deg);color:var(--color-primary);font-size:1.1rem;transition:transform var(--transition-interactive)}
.core-item[open]>summary::after{transform:translateY(-50%) rotate(-90deg)}
.core-item[open]{grid-column:1 / -1}
.core-note{padding:0 var(--space-4) var(--space-4);border-top:1px solid var(--color-divider);margin:0 var(--space-3)}
.core-note p{font-family:var(--font-body);font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.55;padding-top:var(--space-3);text-align:left;max-width:none}
.core small{font-family:var(--font-ui);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-muted);font-weight:600}
.core b{font-family:var(--font-ui);font-weight:600;font-size:var(--text-base);line-height:1.1}
.core .sub{font-family:var(--font-ui);font-size:var(--text-xs);color:var(--color-text-muted);line-height:1.3}
.core .stars{gap:var(--space-1)}
/* Phones: three columns squeeze every word onto its own line, so each metric becomes one row with its label on the left */
@media (max-width:520px){.core{grid-template-columns:1fr;gap:var(--space-1)}.core-item>summary{display:grid;grid-template-columns:6.5rem 1fr;column-gap:var(--space-3);row-gap:2px;align-items:center;text-align:left;padding:var(--space-2) var(--space-6) var(--space-2) var(--space-3)}.core-item>summary>small{grid-column:1;grid-row:1/4;align-self:center;line-height:1.3}.core-item>summary>:not(small){grid-column:2;justify-self:start}}
.dots{display:inline-flex;gap:3px;margin:var(--space-1) 0}
.dots i{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--color-border)}
.dots i.f{background:var(--color-primary)}
.rev{border:1.5px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;margin:0 0 var(--space-3);background:var(--color-surface);font-family:var(--font-ui)}
.rev-head{display:flex;justify-content:space-between;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);background:var(--color-surface-2);flex-wrap:wrap}
.rev-head .h4{margin:0}
.rev-head .meta{font-size:var(--text-xs);color:var(--color-text-muted);display:inline-flex;align-items:center;gap:var(--space-1)}
.rev-head .meta b{color:var(--color-text);font-weight:600}
.rev-body{padding:var(--space-3) var(--space-4) var(--space-4)}
.rev-body h5{margin:0 0 var(--space-2);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--color-primary)}
.rev-body ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2)}
.rev-body li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-2);font-size:var(--text-sm);line-height:1.35;color:var(--color-text);background:var(--color-surface-2);border-radius:var(--radius-md);padding:var(--space-3) var(--space-2)}
.rev-body li i{display:inline-grid;place-items:center;width:18px;height:18px;flex:0 0 18px;border-radius:50%;background:var(--color-primary);color:var(--color-text-inverse)}
.rev-body li i.bang{font-style:normal;font-weight:700;font-size:11px;font-family:var(--font-ui)}
.rev--worth .rev-body ul{grid-template-columns:1fr}
.rev--worth .rev-body li{flex-direction:row;text-align:left;align-items:flex-start}
@media (max-width:520px){.rev-body ul{grid-template-columns:1fr}.rev-body li{flex-direction:row;text-align:left;align-items:flex-start}}
.pillrow{display:flex;gap:var(--space-2);flex-wrap:wrap;margin:0 0 var(--space-4)}
.tiny.centered{text-align:center;margin-top:var(--space-2)}
.more{margin-top:var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface);font-family:var(--font-ui)}
.more>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);font-size:var(--text-sm);font-weight:500}
.more-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.more>summary::-webkit-details-marker{display:none}
.more>summary::after{content:'›';color:var(--color-primary);font-size:1.1rem;transition:transform var(--transition-interactive)}
.more[open]>summary::after{transform:rotate(90deg)}
.more-sub{color:var(--color-text-faint);font-weight:400;font-size:var(--text-xs)}
.more-body{padding:0 var(--space-4) var(--space-4);font-family:var(--font-body)}
.more-body .h4{margin:var(--space-4) 0 var(--space-1)}
.more-body p{font-size:var(--text-sm);color:var(--color-text-muted)}
.alts{margin-top:var(--space-5);padding-block:0;display:grid;gap:var(--space-2)}
.alts .h4{margin:0 0 var(--space-1)}
.alt-pick{display:grid;grid-template-columns:1fr auto;gap:var(--space-3);align-items:center;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-3) var(--space-4);text-decoration:none;color:var(--color-text);font-family:var(--font-ui);font-size:var(--text-sm);transition:border-color var(--transition-interactive)}
.alt-pick:hover{border-color:var(--color-primary)}
.alt-pick b{font-weight:600;display:block}
.alt-pick small{color:var(--color-text-muted);font-size:var(--text-xs)}
.alt-pick .go{color:var(--color-primary);font-weight:600;white-space:nowrap}

/* ============ faq ============ */
.faq{max-width:760px}
.faq-item{border-top:1px solid var(--color-border)}
.faq-item:last-child{border-bottom:1px solid var(--color-border)}
.faq-item > summary{list-style:none;cursor:pointer;padding-block:var(--space-5);display:flex;gap:var(--space-4);align-items:baseline;justify-content:space-between;font-family:var(--font-display);font-weight:700;font-size:1.15rem}
.faq-item{border-top-color:color-mix(in srgb, var(--color-ink) 25%, transparent)}
.faq-item > summary::-webkit-details-marker{display:none}
.faq-item .mark{color:var(--color-primary);font-size:1.4rem;line-height:1;transition:transform var(--transition-interactive)}
.faq-item[open] .mark{transform:rotate(45deg)}
.faq-item p{font-size:var(--text-sm);color:var(--color-text-muted);padding-bottom:var(--space-5);max-width:64ch}

/* ---- links out to the static research pages ---- */
.deep-link{margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--color-divider)}
.deep-link a,.deep-link-inline{font-family:var(--font-ui);font-weight:600;font-size:var(--text-sm);color:var(--color-primary);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.deep-link a:hover,.deep-link-inline:hover{color:var(--color-primary-hover)}

/* ---- email-me-my-match, inside .save on the results page ---- */
.mailme{margin-top:var(--space-4);display:flex;flex-direction:column;gap:var(--space-2)}
.mailme-label{font-family:var(--font-ui);font-weight:600;font-size:var(--text-sm);color:var(--color-text)}
.mailme-row{display:flex;gap:var(--space-2);flex-wrap:wrap}
.mailme-row input{flex:1 1 15rem;min-width:0;font-family:var(--font-ui);font-size:var(--text-base);padding:var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text)}
.mailme-row input:focus-visible{outline:2px solid var(--color-primary);outline-offset:1px}
.mailme-row .btn{flex:0 0 auto}
@media (max-width:480px){.mailme-row .btn{flex:1 1 100%}}
.safety-reminder{margin-top:var(--space-6);padding:var(--space-3) var(--space-4);border-left:3px solid var(--color-border);color:var(--color-text-muted)}
.mailme-opt{display:flex;gap:var(--space-2);align-items:flex-start;font-family:var(--font-ui);font-size:var(--text-sm);color:var(--color-text);line-height:1.5;cursor:pointer}
.mailme-opt input{margin-top:.3em;width:18px;height:18px;flex:0 0 auto;accent-color:var(--color-primary)}
.mailme-note{font-size:var(--text-xs);color:var(--color-text-faint);line-height:1.55}
.mailme-note a{color:var(--color-text-muted);text-decoration:underline;text-underline-offset:2px}
/* The 0–10 scale: one row of eleven, the same in the quiz and on the check-in page */
.options.cards-scale{grid-template-columns:repeat(11,minmax(0,1fr));gap:4px}
.opt-scale{justify-content:center;padding:0;min-width:0;min-height:48px;font-family:var(--font-ui);font-size:var(--text-sm);font-weight:600;text-align:center;border-width:1.5px}
.opt-scale[aria-pressed="true"]{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-text-inverse)}
.scale-ends{display:flex;justify-content:space-between;margin-top:var(--space-2);font-family:var(--font-ui);font-size:var(--text-xs);color:var(--color-text-muted)}
@media (max-width:420px){.options.cards-scale{gap:3px}.opt-scale{min-height:44px;font-size:var(--text-xs)}}
/* Check-in box on the results page: the same box as Save your match, one field */
.checkin .mailme-note{margin-top:var(--space-1)}
/* /check-in page */
.checkin-page{max-width:40rem;margin-inline:auto;padding-block:var(--space-10) var(--space-12)}
.checkin-page .eyebrow{font-family:var(--font-ui);font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--color-primary);font-weight:600}
.checkin-page h1{font-family:var(--font-display);font-size:var(--text-2xl);line-height:1.05;margin-block:var(--space-3) var(--space-4);text-wrap:balance}
.checkin-page .q{margin-top:var(--space-8)}
.checkin-page .q h2{font-family:var(--font-display);font-size:var(--text-lg);margin-bottom:var(--space-3);text-wrap:balance}
.checkin-page .q .step-help{margin-bottom:var(--space-3)}
.checkin-page .options.cards-grid{grid-template-columns:1fr 1fr}
.checkin-page .options .opt{min-height:52px;padding:var(--space-3) var(--space-4)}
.checkin-page input[type="number"],.checkin-page input[type="text"],.checkin-page textarea{width:100%;font-family:var(--font-ui);font-size:var(--text-base);padding:var(--space-3);border:1px solid var(--color-border);border-radius:0;background:var(--color-surface);color:var(--color-text)}
.checkin-page textarea{min-height:5.5rem;resize:vertical}
.checkin-page .saved{font-family:var(--font-ui);font-size:var(--text-xs);color:var(--color-text-faint);min-height:1.2em;margin-top:var(--space-2)}
.checkin-page .done{background:var(--color-surface);border:2px solid var(--color-ink);padding:var(--space-6);box-shadow:var(--shadow-md);margin-top:var(--space-8)}
.checkin-page .done h2{font-family:var(--font-display);font-size:var(--text-lg);margin-bottom:var(--space-2)}
@media (max-width:480px){.checkin-page .options.cards-grid{grid-template-columns:1fr}}
.mailme-status{font-size:var(--text-sm);color:var(--color-text-muted);min-height:1.2em}
.mailme-status.is-bad{color:var(--color-alert)}
.mailme-status.is-good{color:var(--color-text)}

/* ---- the capsule: every Find my match button, styled as a two-tone supplement capsule (Nick, 20 Sep 2026) ---- */
/* (21 Sep 2026: the capsule is a solid evergreen pill on every screen now; the two-tone fill, seam and gloss are gone) */
.capsule{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;box-sizing:border-box;font-family:var(--font-ui,'Plus Jakarta Sans',system-ui,sans-serif);font-weight:800;font-size:14px;line-height:1;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;color:#F2F6F3;text-decoration:none;cursor:pointer;border:2px solid #1E3528;border-radius:999px;padding:15px 30px;min-height:0;overflow:hidden;background:#1E3528;transition:transform .15s,background .15s}
.capsule::before,.capsule::after{display:none}
.capsule>span{position:relative;z-index:1}
.capsule:hover,.capsule:focus-visible{color:#F2F6F3;background:#2B4938;border-color:#2B4938}
.capsule:active{transform:translate(1px,1px)}
.capsule--sm{font-size:13px;padding:12px 22px}
.capsule--xs{font-size:11px;padding:8px 12px;letter-spacing:.08em}
.capsule--lg{font-size:15px;padding:17px 36px;letter-spacing:.18em}
.capsule--block{display:flex;width:100%}
.capsule--on-dark{border-color:#2B4938}
@media (prefers-reduced-motion:reduce){.capsule,.capsule:hover,.capsule:active{transition:none;transform:none}}

/* ---- /track: the symptom tracker (22 Sep 2026) ---- */
.track-page .q h2{font-family:var(--font-display);font-size:var(--text-lg);margin:var(--space-6) 0 var(--space-2)}
.track-form{background:var(--color-surface);border:1.5px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-5) var(--space-5) var(--space-6)}
.track-form .q,.track-form h2:first-of-type{margin-top:var(--space-2)}
.track-date{display:flex;align-items:center;gap:var(--space-3);font-family:var(--font-ui);font-size:var(--text-sm);font-weight:600}
.track-date input{font:inherit;padding:var(--space-2) var(--space-3);border:1.5px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text);min-height:44px}
.track-chips{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.track-chip{width:auto;min-height:44px;padding:var(--space-2) var(--space-4);border-radius:var(--radius-full);font-size:var(--text-sm)}
.track-chip[aria-pressed="true"]{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-text-inverse)}
.track-notes-label{display:block;margin:var(--space-5) 0 var(--space-2)}
#track-notes{width:100%;font:inherit;font-size:16px;padding:var(--space-3);border:1.5px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text)}
.track-form .step-actions{margin-top:var(--space-5)}
.track-form .saved{margin-top:var(--space-3);font-family:var(--font-ui);font-size:var(--text-sm);color:var(--color-text-muted);min-height:1.2em}
.track-form .saved.is-bad{color:var(--color-alert)}
.track-trend{font-size:var(--text-base);color:var(--color-text-muted);margin-bottom:var(--space-3)}
.track-chart{display:block;width:100%;height:auto;background:var(--color-surface);border:1.5px solid var(--color-border);border-radius:var(--radius-lg);margin-bottom:var(--space-4)}
.track-grid{stroke:var(--color-divider);stroke-width:1}
.track-tick{font-family:var(--font-ui);font-size:11px;fill:var(--color-text-faint)}
.track-line{fill:none;stroke:var(--color-primary);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.track-dot{fill:var(--color-primary);stroke:var(--color-surface);stroke-width:2}
.track-dot--quiz{fill:var(--color-surface);stroke:var(--color-primary);stroke-width:3}
.track-empty{font-size:var(--text-sm);color:var(--color-text-muted);padding:var(--space-4);border:1.5px dashed var(--color-border);border-radius:var(--radius-lg)}
.track-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--color-divider)}
.track-list li{display:grid;grid-template-columns:7.5rem 3.5rem 1fr auto;gap:var(--space-3);align-items:baseline;padding:var(--space-3) 0;border-bottom:1px solid var(--color-divider);font-family:var(--font-ui);font-size:var(--text-sm)}
.track-list-date{font-weight:600}
.track-list-score{font-weight:700;font-size:var(--text-lg);line-height:1}
.track-list-score small{font-size:var(--text-xs);font-weight:400;color:var(--color-text-faint)}
.track-list-sym{color:var(--color-text-muted)}
.track-list-sym em{display:block;font-style:italic;color:var(--color-text-faint);margin-top:2px}
.track-edit{font-family:var(--font-ui);font-size:var(--text-xs);font-weight:600;color:var(--color-primary);text-decoration:underline;text-underline-offset:2px;min-height:44px;padding:0 var(--space-2)}
.track-note{margin-top:var(--space-8)}
@media (max-width:520px){.track-list li{grid-template-columns:1fr auto auto;grid-template-areas:"date score edit" "sym sym sym"}.track-list-date{grid-area:date}.track-list-score{grid-area:score}.track-list-sym{grid-area:sym}.track-edit{grid-area:edit}}

/* ---- phones: the built pages' header as one row, matching the homepage's (22 Sep 2026) ----
   wordmark left, Take the quiz as a text link right, the nav as a slim strip beneath */
@media (max-width:767px){
  .header{border-bottom:1px solid var(--color-divider)}
  .header-inner{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:var(--space-3);row-gap:0;min-height:56px;padding-top:0;padding-bottom:0}
  .brand{gap:var(--space-2);min-height:56px}
  .brand-mark{display:none}
  .brand-name{font-size:1.375rem;font-style:normal;font-weight:700;letter-spacing:-.02em}
  .header .btn,.header .btn-sm,.header .header-cta{background:none;border:0;box-shadow:none;color:var(--color-primary);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:var(--space-2) var(--space-2);min-height:44px;border-radius:var(--radius-md)}
  .header .btn:hover,.header .btn-sm:hover{background:var(--color-surface-2);color:var(--color-primary);transform:none;box-shadow:none}
  .site-nav{grid-column:1 / -1;order:3;margin:0 calc(-1 * var(--space-5));padding:0 var(--space-5);border-top:1px solid var(--color-divider);min-height:40px;gap:var(--space-5);justify-content:flex-start;font-size:.66rem;letter-spacing:.12em}
  .site-nav a{min-height:40px;padding-top:0;border-bottom:0}
  .site-nav a+a::before{display:none}
  .site-nav a[aria-current="page"]{color:var(--color-primary)}
  /* the results view's header (index.html) keeps its own rules in mobile.css */
  .checkin-page{padding-block:var(--space-8) var(--space-12)}
  .checkin-page h1{font-size:2rem}
  .track-form{padding:var(--space-4) var(--space-4) var(--space-5)}
}
/* the page's sections carry the site-wide section padding otherwise (96px top and bottom) */
.checkin-page section.q{padding-block:0}