/* mobile.css — SuppleGut on phones (320–767px): the home, quiz and results views in index.html.
   Loaded after style.css and home.css. Everything sits inside one max-width media query so tablets
   and desktop never see a rule from here. Contract: build-scripts/design-system-mobile.md.
   Mobile UX pass, 20 Sep 2026. */
@media (max-width:767px){
:root{--m-paper:#F9F5EC;--m-paper-2:#F0E8D9;--m-surface:#FFFCF6;--m-ink:#1D130E;--m-ink-60:#6E6259;--m-rule:rgba(29,19,14,.25);--m-divider:#E9E1D3;--m-accent:#8C381E;--m-accent-press:#74301A;--m-accent-hi:#DE5829;--m-accent-soft:#F5E3D9;--m-butter:#E7CD97;--m-alert:#B3261E;--m-gutter:20px;--m-radius:3px;--m-tap:48px;--m-ease:cubic-bezier(.2,.8,.2,1)}

/* ---- touch: no grey flash, no tap delay, a designed press instead of hover ---- */
html{scroll-behavior:auto}
body{-webkit-tap-highlight-color:transparent}
a,button,summary,.opt{touch-action:manipulation}

/* ---- one button family: the pill ---- */
.btn{border-radius:999px;min-height:var(--m-tap);font-size:14px;letter-spacing:.14em;font-weight:700;padding:14px 24px;transition:transform .12s var(--m-ease),background .15s,color .15s,border-color .15s}
.btn-primary,.btn-primary:hover{background:var(--m-accent);border-color:var(--m-accent);color:var(--m-paper);box-shadow:none;transform:none}
.btn-primary:active{background:var(--m-accent-press);transform:scale(.98)}
.btn-ghost,.btn-ghost:hover{border:2px solid var(--m-ink);background:transparent;color:var(--m-ink)}
.btn-ghost:active{background:var(--m-ink);color:var(--m-paper);transform:scale(.98)}
.btn:disabled,.btn:disabled:active{opacity:.4;transform:none;background:var(--m-accent)}
.capsule,.capsule:hover,.capsule:focus-visible{background:var(--m-accent);border-color:var(--m-accent);filter:none;min-height:var(--m-tap);letter-spacing:.14em;transition:transform .12s var(--m-ease),background .15s}
.capsule::before,.capsule::after{display:none}
.capsule>span{text-shadow:none}
.capsule:active{transform:scale(.98);background:var(--m-accent-press)}
.capsule--xs{min-height:0;font-size:10px;padding:7px 11px;letter-spacing:.08em}
.capsule--lg{min-height:56px}
.capsule--on-dark,.capsule--on-dark:hover{border-color:var(--m-paper)}

/* ============ home ============ */
/* the header: brand, a small Take the quiz, the menu button; the nav strip moves into the menu sheet */
#header nav{display:none}
#header .md\:contents{gap:8px}
#header .capsule--xs{padding:7px 10px}
.m-menu-btn{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;flex:0 0 44px;margin-right:-10px;color:var(--m-ink)}
@media (max-width:374px){#header .brand-word{font-size:1.375rem}#header .brand-dot{font-size:1.25rem}#header .brand-logo{width:36px;height:36px}}
@media (max-width:339px){#header .capsule--xs{display:none}}
.m-menu-btn:active{background:var(--m-paper-2)}
.m-menu-btn svg{width:22px;height:22px}
.m-menu{position:fixed;inset:0;z-index:80;background:var(--m-paper);color:var(--m-ink);padding:0 var(--m-gutter) calc(20px + env(safe-area-inset-bottom));display:flex;flex-direction:column;animation:m-fade .22s var(--m-ease)}
.m-menu[hidden]{display:none}
.m-menu-top{display:flex;align-items:center;justify-content:space-between;height:56px;border-bottom:2px solid var(--m-ink);margin:0 calc(-1 * var(--m-gutter));padding:0 12px 0 var(--m-gutter)}
.m-menu-title{font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--m-ink-60)}
.m-menu nav{display:flex;flex-direction:column;padding-top:8px}
.m-menu nav a{display:flex;align-items:center;justify-content:space-between;min-height:60px;font-family:'Newsreader','Times New Roman',serif;font-size:26px;font-weight:500;letter-spacing:-.01em;text-decoration:none;color:var(--m-ink);border-bottom:1px solid var(--m-divider)}
.m-menu nav a span{color:var(--m-accent);font-size:20px}
.m-menu nav a:active{color:var(--m-accent)}
.m-menu .capsule{margin-top:auto}
body.m-menu-open{overflow:hidden}
@keyframes m-fade{from{opacity:0}to{opacity:1}}

/* the first screen: headline beside the photo, the intro, one Find my match pill, the Free · Private line */
#hero-section .hero-head{grid-template-columns:1fr 38%;gap:14px;margin-bottom:16px}
#hero-section .hero-head h1{font-size:2.125rem;line-height:1.08;letter-spacing:-.02em}
#hero-section .hero-photo{border-width:1.5px}
#hero-section .hero-head+div{border:0;padding:0;margin:0}
#hero-section .hero-intro{font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:16px;line-height:1.6;color:var(--m-ink-60);margin:0 0 20px}
#hero-section .hero-cta-row{gap:12px;margin:0;padding:0}
#hero-cta-phone{display:flex;width:100%;min-height:56px;font-size:15px}
#hero-section .hero-cta-row>div{margin-bottom:6px}

/* the phone block: section order (how it works before the formula, the guides row after it) */
#m-how{order:1}#m-formula{order:2}#m-reads{order:3}#m-why{order:4}#m-faq{order:5}#m-band{order:6}#home-mobile>footer{order:7}#mobile-cta-bar{order:8}
/* the guides: one row that scrolls sideways and snaps, instead of a two-column wall */
#m-reads .grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:0 -16px;padding:0 16px 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
#m-reads .grid::-webkit-scrollbar{display:none}
#m-reads .grid>div{flex:0 0 250px;scroll-snap-align:start}
/* the pinned bar shows once the hero's own button has scrolled away (home.js) */
#mobile-cta-bar{transition:transform .2s var(--m-ease),opacity .2s var(--m-ease)}
#mobile-cta-bar.is-off{transform:translateY(110%);opacity:0;pointer-events:none}

/* ============ quiz ============ */
.progress{padding-block:0}
.progress-row{min-height:56px;gap:12px}
.back-btn{min-height:48px;margin-block:0;padding:0 8px 0 0;font-size:11px;letter-spacing:.14em;border-radius:999px}
.back-btn:active{color:var(--m-accent)}
.progress-label{font-size:11px;letter-spacing:.14em}
.seg{height:4px}
#quiz-body{display:flex;flex-direction:column;flex:1}
.step{flex:1;display:flex;flex-direction:column;padding-block:24px 0;animation:m-enter .22s var(--m-ease)}
@keyframes m-enter{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
.step .eyebrow{font-size:11px;letter-spacing:.18em;margin-bottom:10px}
.step h2{font-size:26px;line-height:1.15;letter-spacing:-.01em;margin:0 0 10px;padding-bottom:12px}
.step-help{font-size:15px;margin-bottom:16px}
.options{gap:10px}
.opt{min-height:60px;font-size:16px;font-weight:500;line-height:1.35;border:1.5px solid var(--m-rule);border-radius:var(--m-radius);padding:12px 16px;transition:transform .12s var(--m-ease),background .15s,border-color .15s}
.opt:hover{border-color:var(--m-rule);background:var(--color-surface)}
.opt:active{transform:scale(.98);background:var(--m-paper-2)}
.opt[aria-pressed="true"],.opt[aria-pressed="true"]:hover{border-color:var(--m-ink);background:var(--m-accent-soft);font-weight:500}
.opt .tick{width:22px;height:22px;flex:0 0 22px;border-radius:var(--m-radius);border:1.5px solid var(--m-rule);order:2;margin-left:auto}
.opt-card .card-label{font-size:16px;letter-spacing:0;text-transform:none;font-weight:500;line-height:1.3}
.options.cards-grid{gap:10px}
.options.cards-grid .opt-card{align-items:flex-start;text-align:left;gap:8px;padding:14px 14px 12px;min-height:104px;justify-content:flex-start;border:1.5px solid var(--m-rule)}
.options.cards-grid .opt-card .card-icon svg{width:40px;height:30px}
.options.cards-grid .opt-card--wide{min-height:60px;padding:12px 16px;flex-direction:row;align-items:center;gap:14px}
.opt-card .card-check{width:22px;height:22px;top:10px;right:10px}
.opt-card[aria-pressed="true"],.opt-card[aria-pressed="true"]:hover{border-color:var(--m-ink);background:var(--m-ink);color:var(--color-text-inverse);box-shadow:3px 3px 0 0 var(--m-ink)}
.options.cards-row .opt-card,.options.cards-quiet .opt-card{min-height:60px;padding:12px 16px;gap:14px}
/* the express / deep step: title, one line under it, the time as a tag */
.opt-card--split{position:relative;flex-direction:column;align-items:flex-start;gap:4px;padding:16px 108px 16px 16px}
.opt-card--split .card-label{font-size:17px;font-weight:600}
.opt-card--split .card-sub{font-size:14px}
.opt-card .card-tag{position:absolute;right:16px;top:17px;font-family:var(--font-ui);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--m-accent)}
.opt-card[aria-pressed="true"] .card-tag{color:var(--m-accent-hi)}
.options.cards-scale{gap:3px}
.opt-scale{min-height:48px;padding:0;min-width:0;font-size:14px;justify-content:center}
/* Continue sits at the foot of the screen, above the home indicator; short steps still put it there */
.step-actions{order:10;position:sticky;bottom:0;z-index:5;margin:auto calc(-1 * var(--space-5)) 0;padding:12px var(--space-5) calc(12px + env(safe-area-inset-bottom));background:var(--m-paper);border-top:2px solid var(--m-ink);gap:10px}
.step .safety-note{margin-top:16px;margin-bottom:16px;font-size:13px;border-radius:var(--m-radius)}
.step .caution-panel{margin-bottom:16px}
#rf-continue{min-height:56px}
.free-text{font-size:16px;border:1.5px solid var(--m-ink);border-radius:var(--m-radius)}
.loading{min-height:60dvh}
.stop{padding-block:32px}

/* ============ results ============ */
#view-results .header-inner{min-height:56px;padding:0 20px}
#view-results .brand{gap:10px}
#view-results .brand-mark{width:36px;height:36px;flex-basis:36px;box-shadow:none;border-width:1.5px}
#view-results .brand-name{font-size:1.5rem}
.m-edit[hidden]{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;margin-left:auto;font-family:var(--font-ui);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--m-ink-60);background:none;border:0}
.m-edit:active{color:var(--m-accent)}
.results-head{padding-top:20px}
.results-head .display{font-size:32px;line-height:1.08}
.results-heard{font-size:15px}
/* the top match: Buy and the price chips first, then why it won */
.match--hero{box-shadow:3px 3px 0 0 var(--m-ink)}
.match--hero .match-top{padding:16px 16px 18px}
.match--hero .match-top h3{font-size:24px}
.match--hero .match-photo{width:72px;height:72px;flex-basis:72px;border:1.5px solid var(--m-ink);background:#fff}
.match-body{display:flex;flex-direction:column;padding:16px}
.match-cta{order:-2;margin:0 0 12px}
.match-cta .btn{min-height:56px;font-size:15px;letter-spacing:.16em}
.pillrow{order:-1;margin:0 0 16px;padding-bottom:16px;border-bottom:1px solid var(--m-divider)}
.pill{font-size:13px;font-weight:600;padding:8px 12px}
.core-item{border:1.5px solid var(--m-rule);border-radius:var(--m-radius)}
.rev{border:1.5px solid var(--m-rule);border-radius:var(--m-radius)}
.rev-body{background:var(--m-paper-2)}
.rev-body ul{gap:8px}
.rev-body li{background:var(--m-surface);border:1.5px solid var(--m-rule);border-radius:var(--m-radius);padding:10px 12px;font-size:15px}
.more{border:1.5px solid var(--m-rule);border-radius:var(--m-radius)}
.more>summary{min-height:56px;font-size:16px;font-weight:600}
.deep-link{font-size:15px}
/* runners-up: photo, the reason, See it */
.alts{margin-top:28px;gap:10px}
.alt-pick{grid-template-columns:auto 1fr auto;gap:12px;padding:12px;min-height:80px;border:1.5px solid var(--m-rule);border-radius:var(--m-radius)}
.alt-pick .alt-photo{width:56px;height:56px;border:1.5px solid var(--m-rule);background:#fff;object-fit:cover}
.alt-pick b{font-size:15px;line-height:1.3}
.alt-pick small{font-size:13px}
.alt-pick .go{font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.alt-pick:active{background:var(--m-paper-2)}
.results-context,.save{margin-top:28px}
.trust,.save{border:1.5px solid var(--m-rule);box-shadow:none;border-radius:var(--m-radius)}
.save h2{font-size:22px}
.mailme-row{flex-direction:column}
.mailme-row input{flex:0 0 auto;width:100%;font-size:16px;min-height:52px;border:1.5px solid var(--m-ink);border-radius:var(--m-radius)}
.mailme-row .btn,.mailme-row .btn:hover{background:transparent;border:2px solid var(--m-ink);color:var(--m-ink);flex:1 1 auto;box-shadow:none;transform:none}
.mailme-row .btn:active{background:var(--m-ink);color:var(--m-paper)}
.mailme-status.is-bad{color:var(--m-alert)}
.results-actions{display:grid!important;grid-template-columns:1fr 1fr;gap:10px}
.results-actions>:last-child{grid-column:1 / -1}
.results-actions .btn{font-size:12px;padding:12px 10px;letter-spacing:.12em}
/* the sticky buy bar: appears once the card's Buy button has scrolled off (app.js) */
#m-buybar{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--m-paper);border-top:2px solid var(--m-ink);padding:10px var(--m-gutter) calc(12px + env(safe-area-inset-bottom));transition:transform .2s var(--m-ease),opacity .2s var(--m-ease)}
#m-buybar.is-off{transform:translateY(110%);opacity:0;pointer-events:none}
#m-buybar .m-buyline{display:flex;justify-content:space-between;gap:12px;font-family:var(--font-ui);font-size:14px;color:var(--m-ink-60);margin:0 0 8px}
#m-buybar .m-buyline span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#m-buybar .m-buyline span:last-child{white-space:nowrap}
#m-buybar .m-buyline b{color:var(--m-ink);font-weight:600}
#m-buybar .btn{width:100%}
#view-results.m-has-bar #results-body{padding-bottom:calc(110px + env(safe-area-inset-bottom))}

/* ---- motion off when asked ---- */
@media (prefers-reduced-motion:reduce){
  .step,.m-menu{animation:none}
  .btn,.capsule,.opt,#mobile-cta-bar,#m-buybar{transition:none}
  .btn:active,.capsule:active,.opt:active{transform:none}
}
}

/* ============ Botanical Spruce & Deep Forest Sage theme, on white (Nick, 21 Sep: a white ground rather than shades of green) (Nick's Stitch export, 21 Sep 2026: build-scripts/stitch-spruce-home.html) ============
   Phones only. Replaces the Sage & Herbal Wash block from earlier the same day. The export is a home screen; its palette,
   surfaces and type carry across the quiz and results. Cool mint paper, blackened spruce ink, deep evergreen buttons, a
   subdued sage wash on alternate sections, white cards with botanical hairlines and rounder corners. The three photos are
   the ones chosen in the previous round (sage-hero, sage-botanical, sage-clinician), not the export's new ones. */
@media (max-width:767px){
:root{
  --m-paper:#FFFFFF;--m-paper-2:#F4F6F4;--m-surface:#FFFFFF;--m-ink:#111E17;--m-ink-60:#4E6155;
  --m-rule:#E1E7E2;--m-divider:#E6EBE7;--m-accent:#1E3528;--m-accent-press:#16271E;--m-accent-hi:#8FB59B;--m-accent-soft:#F4F6F4;
  --m-butter:#8FB59B;--m-radius:8px;--m-shadow-press:none;
  --s-link:#2F5A44;--s-wash:#F4F6F4;--s-wash-b:#E1E7E2;--s-card-b:#E1E7E2;--s-dark:#16271E;--s-faint:#7A8E81;
  /* style.css tokens (quiz, results, shared pieces) */
  --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:#FFFFFF;
  --color-primary:#2F5A44;--color-primary-hover:#1E3528;--color-primary-soft:#F4F6F4;--color-peach:#8FB59B;--color-peach-soft:#F4F6F4;--color-butter:#BFD4C6;
  --radius-md:6px;--radius-lg:8px;--radius-xl:12px;--shadow-md:0 1px 2px rgba(0,0,0,.03);--shadow-lg:0 1px 3px rgba(0,0,0,.04)
}
body{background:#FFFFFF!important;color:#111E17;border-top:0}
#view-home,#home-mobile{background:#FFFFFF;color:#111E17}
#view-home main.bg-custard,#hero-section{background:#FFFFFF}
#home-mobile{padding-top:0}
::selection{background:#1E3528;color:#fff}

/* buttons: one pill, deep evergreen */
.btn,.btn-primary,.btn-primary:hover{font-weight:700;letter-spacing:.08em;font-size:12px}
.btn-primary,.btn-primary:hover{background:#1E3528;border-color:#1E3528;color:#FFFFFF}
.btn-primary:active{background:#16271E}
.btn-ghost,.btn-ghost:hover{border:1px solid #E1E7E2;background:#fff;color:#111E17;font-weight:600;letter-spacing:.04em}
.btn-ghost:active{background:#F4F6F4;color:#111E17}
.capsule,.capsule:hover,.capsule:focus-visible{background:#1E3528;border-color:#1E3528;color:#FFFFFF;font-weight:700;letter-spacing:.08em;font-size:12px}
.capsule:active{background:#16271E}
.capsule--on-dark,.capsule--on-dark:hover{border-color:#2B4938}

/* ---- header: wordmark, a text link, the menu ---- */
#header{background:rgba(255,255,255,.95);border-bottom:1px solid #E6EBE7}
#header .md\:contents{min-height:60px;gap:12px;padding:0}
#header .brand-logo{display:none}
#header .brand-word{font-family:'Newsreader','Times New Roman',serif;font-size:1.375rem;font-style:normal;font-weight:700;letter-spacing:-.02em;color:#111E17}
#header .brand-dot{font-style:normal;color:#2F5A44;font-size:1.25rem}
#header .capsule--xs,#header .capsule--xs:hover{background:none;border:0;color:#2F5A44;padding:6px 10px;font-size:11px;font-weight:700;letter-spacing:.12em;border-radius:4px;margin-left:auto}
#header .capsule--xs:active{background:rgba(244,246,244,.9)}
@media (max-width:339px){#header .capsule--xs{display:inline-flex}}
@media (max-width:374px){#header .brand-word{font-size:1.25rem}}
.m-menu-btn{margin-right:-6px}
.m-menu{background:#FFFFFF}
.m-menu-top{border-bottom:1px solid #E1E7E2}
.m-menu nav a{border-bottom:1px solid #E6EBE7;font-weight:400}
.m-menu nav a span{color:#2F5A44}

/* ---- hero: headline, the photo, intro, pill, badge line ---- */
#hero-section{padding:28px 20px 24px;border-bottom:0}
#hero-section .hero-head{display:block;margin-bottom:0}
#hero-section .hero-head h1{font-size:32px;line-height:1.18;letter-spacing:-.015em;font-weight:400;margin-bottom:20px}
#hero-section .hero-head h1 .text-terracotta{color:#111E17;font-weight:400}
#hero-section .hero-photo{width:100%;aspect-ratio:16/9;object-fit:cover;border:0;border-radius:16px;background:#F4F6F4;margin-bottom:16px}
#hero-section .hero-intro{font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:14px;line-height:1.55;color:#4E6155;margin:0 0 20px}
#hero-cta-phone{min-height:48px;font-size:12px;letter-spacing:.08em;font-weight:700;text-transform:uppercase}
#hero-section .hero-cta-row{gap:12px}
#hero-section .hero-cta-row>div{justify-content:center;gap:0 12px;font-size:10px;letter-spacing:.14em;font-weight:600;color:#697D70;margin:0}
#hero-section .hero-cta-row>div span[aria-hidden]{display:inline;color:#A9BBAF}

/* ---- the shared surfaces used below ---- */
#home-mobile section{padding-left:20px;padding-right:20px}
#home-mobile .shadow-\[3px_3px_0px_\#1D130E\],#home-mobile .shadow-\[2px_2px_0px_\#1D130E\],#home-mobile .shadow-\[4px_4px_0px_\#1D130E\],#home-mobile .shadow-\[2px_2px_0px_\#8C381E\]{box-shadow:none}
#home-mobile .text-\[\#8C381E\]{color:#2F5A44}
#home-mobile .text-\[\#1D130E\]{color:#111E17}
#home-mobile .text-\[\#6F5F55\]{color:#4E6155}
#home-mobile .bg-\[\#8C381E\]{background:#1E3528}
#home-mobile .bg-\[\#F9F5EC\]{background:#fff}
#home-mobile .bg-\[\#1D130E\]{background:#16271E}
#home-mobile .border-\[\#1D130E\]{border-color:#E1E7E2}
#home-mobile .border-2{border-width:1px}
#home-mobile .font-headline-md,#home-mobile .font-headline-sm{font-family:'Newsreader','Times New Roman',serif;font-weight:400}
#home-mobile .text-headline-md{font-size:24px;line-height:1.22;font-weight:400}
#home-mobile .text-headline-sm{font-size:24px;line-height:1.2;font-weight:400}

/* where's the trouble: a sage wash, white tiles */
#trouble-box{background:#F4F6F4;border-top:1px solid #E1E7E2;padding:24px 16px 12px}
#trouble-box>div{background:none;border:0;box-shadow:none;padding:0 4px}
#trouble-box h2{font-size:24px;font-weight:400}
#trouble-box>div>p{font-size:10px;font-weight:700;letter-spacing:.12em;color:#4E6155;margin:4px 0 14px}
#mobile-quizbox .options,#mobile-quizbox .options.cards-grid{gap:8px}
#mobile-quizbox .opt-card,#mobile-quizbox .options.cards-grid .opt-card,#mobile-quizbox .options.cards-grid .opt-card--wide{min-height:82px;padding:12px;background:#fff;border:1px solid #E1E7E2;border-radius:8px;box-shadow:none;grid-template-columns:auto 1fr;gap:8px}
#mobile-quizbox .opt-card:before{grid-column:2;justify-self:end;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:9px;letter-spacing:0;font-weight:500;color:#7A8E81}
#mobile-quizbox .card-icon{grid-column:1;width:18px;height:18px;color:#4E6155}
#mobile-quizbox .card-icon svg{width:26px;height:20px}
#mobile-quizbox .card-label{font-size:14px;font-weight:500;line-height:1.3}
#mobile-quizbox .opt-card:hover{background:#fff;color:#111E17;border-color:#2F5A44}
#mobile-quizbox .opt-card:active{background:#F4F6F4}
#mobile-quizbox .opt-card[aria-pressed=true],#mobile-quizbox .opt-card[aria-pressed=true]:hover{background:#1E3528;color:#FFFFFF;border-color:#1E3528;box-shadow:none}
#mobile-quizbox .opt-card[aria-pressed=true] .card-icon,#mobile-quizbox .opt-card[aria-pressed=true]:before{color:#FFFFFF}
/* don't fancy the quiz: a white card inside the same wash */
#trouble-box+section{background:#F4F6F4;border-bottom:1px solid #E1E7E2;padding:8px 16px 24px}
#trouble-box+section>div{background:#fff;border:1px solid #E1E7E2;border-radius:12px;box-shadow:none;padding:16px}
#trouble-box+section h3{font-size:20px;font-weight:400}
#trouble-box+section p{font-size:13px;color:#4E6155;margin:2px 0 12px}
#trouble-box+section textarea{background:#FAFBFA;border:1px solid #E1E7E2;border-radius:8px;font-size:14px;padding:10px 12px;min-height:76px}
#trouble-box+section textarea:focus{border-color:#2F5A44;background:#fff;box-shadow:0 0 0 1px #2F5A44}
#trouble-box+section button{background:#111E17;color:#FFFFFF;border:1px solid #111E17;border-radius:8px;font-size:11px;font-weight:700;letter-spacing:.08em;padding:12px 14px;box-shadow:none}
#trouble-box+section button:active{background:#1E3528;border-color:#1E3528;transform:none}

/* how it works: separate white cards on the paper */
#m-how{background:#FFFFFF;border-bottom:0;padding-top:32px;padding-bottom:16px;margin-top:0}
#m-how>div,#m-how>div.bg-\[\#8C381E\]{background:none;border:0;box-shadow:none;padding:0;color:#111E17}
#m-how>div>span{display:none}
#m-how h2{color:#111E17;font-size:26px;line-height:1.22;margin-bottom:24px}
#m-how h2 em{color:#111E17;font-weight:400}
#m-how .border-l-2{border:0;border-radius:0;background:none;padding:0;margin:0;box-shadow:none;display:grid;gap:14px}
#m-how .border-l-2>*{margin-top:0!important}
#m-how .border-l-2>div{background:#fff;border:1px solid #E1E7E2;border-radius:12px;box-shadow:none;padding:16px;display:grid;grid-template-columns:auto 1fr;gap:8px 8px;align-items:center}
#m-how .border-l-2>div>span.absolute{display:none}
#m-how .border-l-2>div>div{display:contents}
#m-how .border-l-2>div>div>span{grid-column:1;grid-row:1;padding:2px 6px;border-radius:4px;background:#F4F6F4;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10px;font-weight:700;color:#2F5A44;line-height:1.4}
#m-how .border-l-2>div>div>h3{grid-column:2;grid-row:1;align-self:center;font-size:11px;font-weight:700;letter-spacing:.06em;color:#111E17}
#m-how .border-l-2>div>p{grid-column:1 / -1;grid-row:2;font-size:13.5px;line-height:1.6;color:#4E6155;margin-top:4px}

/* the formula: a sage wash, the dark evergreen card, white pillar cards, the photo, a white safety note */
#m-formula{padding-top:24px;padding-bottom:28px;border-top:1px solid #E1E7E2;border-bottom:0;background:#F4F6F4}
#m-formula>span{display:none}
#m-formula h2{font-size:24px;line-height:1.22;margin-bottom:16px}
#m-formula>div.bg-\[\#8C381E\]{background:#16271E;border:1px solid #0D1812;border-radius:12px;box-shadow:none;padding:16px;overflow:hidden;margin-bottom:12px}
#m-formula>div.bg-\[\#8C381E\]::before{content:"The formula";display:block;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#8FB59B;margin-bottom:8px}
#m-formula>div.bg-\[\#8C381E\]>p:first-of-type{font-family:'Newsreader','Times New Roman',serif;font-size:18px;line-height:1.35;font-weight:400;color:#FFFFFF;margin-bottom:12px}
#m-formula>div.bg-\[\#8C381E\]>div{display:none}
#m-formula>div.bg-\[\#8C381E\]>p:last-of-type{margin:0;padding:12px 0 0;background:none;border-top:1px solid #233C2E;color:#ABC4B4;font-size:12.5px;line-height:1.55}
#m-formula .grid{gap:12px;margin-bottom:16px}
#m-formula .grid>div{background:#fff;border:1px solid #E1E7E2;border-radius:8px;box-shadow:none;padding:12px}
#m-formula .grid h3{font-size:12px;font-weight:700;color:#111E17;text-transform:none;letter-spacing:0;margin-bottom:4px}
#m-formula .grid p{font-size:12.5px;line-height:1.5;color:#4E6155}
#m-formula .overflow-hidden{border:0;border-radius:12px;box-shadow:none;background:#F4F6F4;margin-bottom:12px}
#m-formula .overflow-hidden img{height:auto;aspect-ratio:16/9;object-fit:cover}
#m-formula>div.flex{background:#fff;border:1px solid #E1E7E2;border-radius:8px;box-shadow:none;padding:14px}
#m-formula>div.flex .material-symbols-outlined{color:#2F5A44;font-size:18px}
#m-formula>div.flex p{font-size:12.5px;line-height:1.55;color:#4E6155}
#m-formula>div.flex strong{display:block;color:#111E17;font-weight:700;margin-bottom:2px}

/* the pages people read most: white cards in the snap row on the paper */
#m-reads{background:#FFFFFF;border-bottom:0;padding-top:32px;padding-bottom:24px}
#m-reads>span{display:none}
#m-reads h2{font-size:24px;line-height:1.22;margin-bottom:16px}
#m-reads .grid{margin:0 -20px;padding:0 20px 6px}
#m-reads .grid>div{background:#fff;border:1px solid #E1E7E2;border-radius:8px;box-shadow:none;padding:14px;min-height:160px}
#m-reads .grid span{font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:9px;font-weight:700;letter-spacing:.1em;color:#5E7265}
#m-reads .grid h3{font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:14px;font-weight:700;line-height:1.3;color:#111E17}
#m-reads .grid p{font-size:12.5px;line-height:1.5;color:#4E6155}
#m-reads .grid a{font-size:12px;font-weight:600;color:#111E17}
#m-reads>div.flex{font-size:12px;font-weight:600;color:#2F5A44;padding-top:12px}

/* why we're different: a sage wash, quote, photo, white micro-cards, plain link rows */
#m-why{background:#F4F6F4;border-top:1px solid #E1E7E2;border-bottom:0;padding-top:24px;padding-bottom:24px}
#m-why>span{display:none}
#m-why blockquote{font-size:25px;line-height:1.25;font-weight:400;margin-bottom:16px}
#m-why .overflow-hidden{border:0;border-radius:12px;box-shadow:none;margin-bottom:16px}
#m-why .overflow-hidden img{height:auto;aspect-ratio:16/9;object-fit:cover}
#m-why>div.divide-y-2{background:none;border:0;box-shadow:none;margin-bottom:16px}
#m-why>div.divide-y-2>*{border:0!important}
#m-why>div.divide-y-2>div.p-3\.5{background:#fff;border:1px solid #E1E7E2!important;border-radius:8px;box-shadow:none;padding:12px;margin-bottom:10px}
#m-why>div.divide-y-2>div.grid{grid-template-columns:1fr;gap:10px}
#m-why>div.divide-y-2>div.grid>div{background:#fff;border:1px solid #E1E7E2!important;border-radius:8px;box-shadow:none;padding:12px}
#m-why h3{font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:15px;font-weight:600;letter-spacing:0;text-transform:none;line-height:1.3;color:#111E17;gap:8px;margin-bottom:4px}
#m-why h3 span{width:6px;height:6px;flex:0 0 6px;background:#1E3528;border-radius:1px;display:inline-block}
#m-why div.divide-y-2 p{font-size:13.5px;line-height:1.5;color:#4E6155}
#m-why>div.flex{gap:10px;border-top:1px solid #E1E7E2;padding-top:12px;font-size:12.5px;font-weight:600;color:#111E17}
#m-why>div.flex a{padding:4px 0;border-bottom:0;min-height:36px}

/* the questions: white cards on the paper */
#m-faq{background:#FFFFFF;border-bottom:0;padding-top:32px;padding-bottom:24px}
#m-faq>span{display:none}
#m-faq h2{font-size:24px;line-height:1.22;margin-bottom:20px}
#m-faq>div.flex{border-top:0;gap:8px}
#m-faq>div.flex>div,#m-faq>div.flex>div:nth-child(odd){border:1px solid #E1E7E2;border-radius:8px;background:#fff;padding:0 12px;box-shadow:none}
#m-faq .faq-btn{padding:12px 0;min-height:48px}
#m-faq .faq-btn>span:first-child{font-size:13.5px;font-weight:600;color:#111E17}
#m-faq .faq-icon{font-size:15px;font-weight:300;color:#7A8E81}
#m-faq .faq-body{font-size:13px;line-height:1.6;color:#4E6155;padding:8px 0 12px;border-top:1px solid #FFFFFF}
#m-faq .faq-body a{color:#2F5A44}

/* the closing band */
#m-band{background:#16271E;color:#FFFFFF;padding:40px 20px}
#m-band h2{font-size:26px;line-height:1.2;max-width:300px}
#m-band h2 em{color:#FFFFFF;font-weight:400}
#m-band p:first-of-type{font-size:13px;color:#A6BFB0;margin:12px 0 24px;max-width:280px}
#m-band .capsule{background:#1E3528;border:1px solid #2B4938;font-size:12px;letter-spacing:.08em;font-weight:700;box-shadow:0 1px 3px rgba(0,0,0,.3)}
#m-band .capsule:active{background:#254232}
#m-band p:last-of-type{font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:9.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#7A9886;margin-top:16px}

/* footer */
#home-mobile>footer{background:#FFFFFF;border-top:1px solid #E6EBE7;padding:32px 20px 40px;gap:16px}
#home-mobile>footer .font-headline-sm{font-size:18px;font-style:normal;font-weight:700;letter-spacing:-.01em}
#home-mobile>footer>div:first-child p{font-size:11.5px;line-height:1.6;color:#6B7F72;max-width:340px}
#home-mobile>footer>div.gap-5{display:grid;grid-template-columns:1fr 1fr;gap:12px;border-top:0;padding-top:0}
#home-mobile>footer>div.gap-5>div>span{display:none}
#home-mobile>footer>div.gap-5>div>div{font-size:12.5px;font-weight:400;color:#33463B;gap:10px}
#home-mobile>footer>div:last-child{border-top:1px solid #E6EBE7;font-size:11px;color:#7A8E81}

/* the pinned bar: the floating pill, in the new colours */
#mobile-cta-bar{left:16px;right:16px;bottom:12px;padding:8px 8px 8px 20px;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border:1px solid #E1E7E2;border-radius:999px;box-shadow:0 10px 24px rgba(17,30,23,.14),0 2px 6px rgba(17,30,23,.08);display:flex;align-items:center;justify-content:space-between;gap:12px}
@supports (padding:max(0px)){#mobile-cta-bar{bottom:max(12px,env(safe-area-inset-bottom))}}
#mobile-cta-bar .m-bar-text{display:flex;flex-direction:column;line-height:1.2;min-width:0}
#mobile-cta-bar .m-bar-text b{font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:10px;font-weight:700;letter-spacing:.08em;word-spacing:0;text-transform:uppercase;color:#2F5A44}
#mobile-cta-bar .m-bar-text small{font-size:11px;color:#4E6155}
#mobile-cta-bar .capsule{display:inline-flex;width:auto;min-height:40px;padding:10px 20px;font-size:12px;flex:0 0 auto}
#mobile-cta-bar.is-off{transform:translateY(140%)}
#home-mobile{padding-bottom:calc(96px + env(safe-area-inset-bottom))}

/* ---- quiz and results: the same surfaces ---- */
.progress{border-bottom:1px solid #E1E7E2;background:rgba(255,255,255,.95)}
.seg{border-radius:2px;background:#E1E7E2}
.step h2{border-bottom:1px solid #E1E7E2;font-weight:500}
.opt,.opt:hover{border:1px solid #E1E7E2;background:#fff;border-radius:8px}
.opt:active{background:#F4F6F4}
.opt[aria-pressed="true"],.opt[aria-pressed="true"]:hover{border-color:#2F5A44;background:#F4F6F4}
.opt-card[aria-pressed="true"],.opt-card[aria-pressed="true"]:hover{background:#1E3528;border-color:#1E3528;color:#FFFFFF;box-shadow:none}
.opt-card[aria-pressed="true"] .card-icon{color:#8FB59B}
.opt-card .card-check{background:#2F5A44;color:#fff}
.opt-card[aria-pressed="true"] .card-check{background:#8FB59B;color:#111E17}
.step-actions{border-top:1px solid #E1E7E2;background:#FFFFFF}
.caution-panel{border-radius:12px}
.free-text{border:1px solid #E1E7E2;border-radius:8px;background:#FAFBFA}
.results-head .display{font-weight:500}
.match--hero{border:1px solid #E1E7E2;border-radius:12px;box-shadow:none;overflow:hidden}
.match--hero .match-top{background:#16271E}
.match--hero .match-photo{border-color:rgba(255,255,255,.4)}
.winner-flag{background:#8FB59B;color:#111E17}
.ledger,.core-item,.rev,.alt-pick,.trust,.save,.pricebox{border:1px solid #E1E7E2;border-radius:8px;box-shadow:none;background:#fff}
.ledger .ledger-head,.rev-head{background:#F4F6F4}
.rev-body{background:#FFFFFF}
.rev-body li{border-color:#E1E7E2;background:#fff}
.pill{background:#F4F6F4;color:#2F5A44}
.match-cta .btn{font-size:13px;letter-spacing:.08em}
.mailme-row input{border:1px solid #E1E7E2;border-radius:8px;background:#FAFBFA}
.mailme-row .btn,.mailme-row .btn:hover{border:1px solid #1E3528;color:#1E3528;background:#fff}
.mailme-row .btn:active{background:#1E3528;color:#fff}
.results-actions .btn{font-size:11px;letter-spacing:.06em}
#m-buybar{background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-top:1px solid #E1E7E2}
#view-results .header{background:rgba(255,255,255,.95);border-bottom:1px solid #E6EBE7}
#view-results .brand-mark{display:none}
#view-results .brand-name{font-style:normal;font-weight:700;letter-spacing:-.02em;font-size:1.375rem}
#view-results .brand-name::after{color:#2F5A44}
.loading .spinner{border-color:#E1E7E2;border-top-color:#2F5A44}
}

/* /quiz/ landing (build-quiz-page.js): its three phone sections take How it works' slot, in the board's order scale above */
#m-steps{order:1}
#m-decides{order:2}
#m-read-first{order:3}