/* ================================================================
   Chipper — shared design system
   One stylesheet for every page: tokens, type, layout, components
   and motion. Page-family extras live in journey.css and intake.css.
   ================================================================ */

/* ---------- Tokens ---------- */
/* Colour. Light's values, set on the page and again on each light island: the cards and panels that keep Light's colours
   when the page is Dark (below), so the treatment cards, the price card, the intake and checkout and the quiz look the
   same in both. */
:root, .hp-card, .door, .lineup-card, .treatment-card, .related-card, .stage, .peptide-structure, .reason, .price-card, .disclaimer-box, .journey-panel, .quiz-dialog, .quiz-bubble {
    /* Brand palette. Sand, terracotta and forest carry over; the greens now lead. */
    --sand: #FBF8F4;
    --linen: #F3EDE4;
    --warm-white: #FFFFFF;
    --mist: #E3ECE5;
    --sage: #C6D8CB;
    --blush: #E8D5CC;
    --blush-mist: #F6EAE3;
    --terracotta: #C4836A;        /* art and decoration only */
    --terracotta-text: #9B573B;   /* small accents and focus rings; AA on sand */
    --forest: #3D5A4C;
    --deep-green: #2A3F34;
    --ink: #1D2F26;
    --text: #26302B;
    --text-muted: #5C6560;
    --on-dark: #F4F1EA;
    --on-dark-muted: rgba(244, 241, 234, .78);
    --line: rgba(42, 63, 52, .13);
    --line-strong: rgba(42, 63, 52, .24);
    /* Roles whose colour differs from the palette's in Dark (in Light they are the palette's own) */
    --band: var(--deep-green);              /* the dark bands: the treatment lineup and the quiz strip */
    --band-deep: var(--ink);                /* the closing band; dark text on the cream buttons */
    --btn-primary-bg: var(--forest);
    --btn-primary-fg: #FFFFFF;
    --btn-primary-hover: var(--deep-green);
    --fill: var(--forest);                  /* the numbered step circles */
    --on-fill: #FFFFFF;
    --shadow-float: 0 1px 2px rgba(29, 47, 38, .06), 0 18px 40px -16px rgba(29, 47, 38, .28);
    --shadow-card: 0 1px 2px rgba(29, 47, 38, .05);
    --shadow-hover: 0 1px 2px rgba(29, 47, 38, .06), 0 16px 36px -18px rgba(29, 47, 38, .34);
}

/* Dark (the founders' ruling of November 5): a deep forest green page, warm cream text and softer terracotta. It applies when the device
   asks for dark and the visitor hasn't picked Light (Auto, the default), or when the visitor picked Dark
   (assets/appearance.js marks <html data-theme>). The two blocks are the same, line for line (scripts/check-site.mjs). Both are
   for the screen only, so a page printed in Dark keeps Light’s colours (dark text on the white paper). */
@media screen and (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --sand: #16251E;
        --linen: #1B2D25;
        --warm-white: #1F3129;
        --mist: #253B30;
        --sage: #3A5647;
        --blush: #5B4238;
        --blush-mist: #3A2D27;
        --terracotta: #CF9277;
        --terracotta-text: #E3A98F;
        --forest: #A9C8B5;
        --deep-green: #F4F1EA;
        --ink: #F7F4EE;
        --text: #E8E4DA;
        --text-muted: #B4BAB2;
        --on-dark: #F4F1EA;
        --on-dark-muted: rgba(244, 241, 234, .78);
        --line: rgba(244, 241, 234, .14);
        --line-strong: rgba(244, 241, 234, .26);
        --band: #0F1C16;
        --band-deep: #0C1712;
        --btn-primary-bg: #F4F1EA;
        --btn-primary-fg: #16251E;
        --btn-primary-hover: #FFFFFF;
        --fill: #A9C8B5;
        --on-fill: #16251E;
        --shadow-float: 0 1px 2px rgba(0, 0, 0, .3), 0 18px 40px -16px rgba(0, 0, 0, .6);
        --shadow-card: 0 1px 2px rgba(0, 0, 0, .3);
        --shadow-hover: 0 1px 2px rgba(0, 0, 0, .3), 0 16px 36px -18px rgba(0, 0, 0, .7);
    }
}
@media screen {
    :root[data-theme="dark"] {
        color-scheme: dark;
        --sand: #16251E;
        --linen: #1B2D25;
        --warm-white: #1F3129;
        --mist: #253B30;
        --sage: #3A5647;
        --blush: #5B4238;
        --blush-mist: #3A2D27;
        --terracotta: #CF9277;
        --terracotta-text: #E3A98F;
        --forest: #A9C8B5;
        --deep-green: #F4F1EA;
        --ink: #F7F4EE;
        --text: #E8E4DA;
        --text-muted: #B4BAB2;
        --on-dark: #F4F1EA;
        --on-dark-muted: rgba(244, 241, 234, .78);
        --line: rgba(244, 241, 234, .14);
        --line-strong: rgba(244, 241, 234, .26);
        --band: #0F1C16;
        --band-deep: #0C1712;
        --btn-primary-bg: #F4F1EA;
        --btn-primary-fg: #16251E;
        --btn-primary-hover: #FFFFFF;
        --fill: #A9C8B5;
        --on-fill: #16251E;
        --shadow-float: 0 1px 2px rgba(0, 0, 0, .3), 0 18px 40px -16px rgba(0, 0, 0, .6);
        --shadow-card: 0 1px 2px rgba(0, 0, 0, .3);
        --shadow-hover: 0 1px 2px rgba(0, 0, 0, .3), 0 16px 36px -18px rgba(0, 0, 0, .7);
    }
}
:root {
    /* Type */
    --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --step-display: clamp(2.5rem, 1.6rem + 4.6vw, 5.25rem);
    --step-1: clamp(2.125rem, 1.5rem + 3.2vw, 3.75rem);
    --step-2: clamp(1.75rem, 1.35rem + 2vw, 2.75rem);
    --step-3: clamp(1.3rem, 1.15rem + .6vw, 1.6rem);
    --lede: clamp(1.0625rem, 1rem + .35vw, 1.25rem);

    /* Shape */
    --r-stage: clamp(24px, 3vw, 36px);
    --r-card: 22px;
    --r-control: 14px;
    --r-pill: 999px;
    --radius-card: var(--r-card);
    --radius-button: var(--r-pill);

    /* Space */
    --gutter: clamp(16px, 4vw, 32px);
    --section: clamp(64px, 9vw, 128px);
    --bar-h: 64px;                /* the header bar */
    --strip-h: 36px;              /* the quiz strip above it, folded away once the page scrolls */
    --nav-h: calc(var(--bar-h) + var(--strip-h));
    --nav-offset: var(--nav-h);   /* what anchors and sticky parts clear; see the scripting query below */

    /* Motion */
    --ease-out: cubic-bezier(.22, 1, .36, 1);
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);
    --dur-fast: 160ms;
    --dur: 280ms;
    --dur-slow: 700ms;
    --transition: color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}

/* Form controls and scrollbars follow the appearance; the islands draw in Light, with its text colour. */
:root { color-scheme: light dark; }
:root[data-theme="light"] { color-scheme: light; }
.hp-card, .door, .lineup-card, .treatment-card, .related-card, .stage, .peptide-structure, .reason, .price-card, .disclaimer-box, .journey-panel, .quiz-dialog, .quiz-bubble { color-scheme: light; color: var(--text); }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Safari can style a cold-cache page once before this sheet applies, which would fire every
   transition on load (a sliding skip link, a grey menu button). Transitions wait for js-ready,
   which navigation.js sets on window load; the intake page doesn't load it and is left as it was. */
html:not(.js-ready):not(:has(.intake-main)) *, html:not(.js-ready):not(:has(.intake-main)) *::before, html:not(.js-ready):not(:has(.intake-main)) *::after { transition: none !important; }
[hidden] { display: none !important; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    background: var(--sand);
}

body {
    font-family: var(--font-body);
    background: var(--sand);
    color: var(--text);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 400;
    color: var(--deep-green);
    line-height: 1.12;
    letter-spacing: -.012em;
    overflow-wrap: break-word;
    hyphens: manual;
    text-wrap: balance;
}
h1 em, h2 em, h3 em { font-style: italic; color: inherit; }
p { text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; height: auto; }
button { font: inherit; }
strong { font-weight: 600; }
::selection { background: var(--sage); color: var(--ink); }

.lineup :focus-visible, .final-cta :focus-visible { outline-color: var(--on-dark) !important; }
:where(a, button, summary, [tabindex], .related-grid):focus-visible {
    outline: 3px solid var(--terracotta-text);
    outline-offset: 3px;
    border-radius: 6px;
}

.container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[id] { scroll-margin-top: calc(var(--nav-offset) + 24px); }

.skip-link {
    position: fixed; top: 10px; left: 10px; z-index: 10000;
    padding: 12px 20px; border-radius: var(--r-pill);
    background: var(--warm-white); color: var(--deep-green); border: 2px solid var(--forest);
    font-weight: 600; transform: translateY(-180%); transition: transform var(--dur) var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

/* Tags: sentence case, carry real information (compounded vs branded, category). */
.eyebrow, .tag {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 600; letter-spacing: .01em; line-height: 1.3;
    color: var(--terracotta-text);
}
.tag--pill, .badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 14px; border-radius: var(--r-pill);
    background: var(--warm-white); border: 1px solid var(--line);
    font-size: 13px; font-weight: 600; color: var(--deep-green); line-height: 1.3;
}
.badge svg { width: 16px; height: 16px; color: var(--forest); flex-shrink: 0; }

.lede { font-size: var(--lede); line-height: 1.6; color: var(--text-muted); max-width: 60ch; }
.fine, .journey-fine { font-size: 14px; line-height: 1.65; color: var(--text-muted); }

/* ---------- Buttons ---------- */
.btn {
    --btn-bg: var(--btn-primary-bg); --btn-fg: var(--btn-primary-fg); --btn-bd: transparent;
    position: relative;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 52px; padding: 14px 26px;
    border-radius: var(--r-pill); border: 1.5px solid var(--btn-bd);
    background: var(--btn-bg); color: var(--btn-fg);
    font-size: 15.5px; font-weight: 600; line-height: 1.2; letter-spacing: .005em; text-align: center;
    cursor: pointer; isolation: isolate; overflow: hidden;
    transition: var(--transition);
    -webkit-tap-highlight-color: transparent;
}
.btn svg { width: 18px; height: 18px; flex-shrink: 0; transition: transform var(--dur) var(--ease-out); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: scale(.97); transition-duration: 90ms; }
.btn-primary { --btn-bg: var(--btn-primary-bg); --btn-fg: var(--btn-primary-fg); }
.btn-primary:hover { --btn-bg: var(--btn-primary-hover); box-shadow: var(--shadow-hover); }
.btn-secondary { --btn-bg: transparent; --btn-fg: var(--deep-green); --btn-bd: var(--line-strong); }
.btn-secondary:hover { --btn-bg: var(--warm-white); --btn-bd: var(--forest); }
.btn-white { --btn-bg: var(--on-dark); --btn-fg: var(--band-deep); }
.btn-white:hover { --btn-bg: #FFFFFF; box-shadow: 0 16px 36px -18px rgba(0, 0, 0, .5); }
.btn-block { width: 100%; }

.text-link {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--forest); font-weight: 600;
    text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px;
    text-decoration-color: rgba(61, 90, 76, .4);
    text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
    transition: text-decoration-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.text-link:hover { text-decoration-color: currentColor; color: var(--deep-green); }

/* ---------- Navigation ---------- */
.nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    background: rgba(251, 248, 244, .86);
    background: color-mix(in srgb, var(--sand) 82%, transparent);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    backdrop-filter: saturate(1.4) blur(14px);
    border-bottom: 1px solid transparent;
    transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
    view-transition-name: site-nav;
}
.nav.is-scrolled, .nav:has(.nav-links.is-open) {
    background: rgba(251, 248, 244, .95);
    background: color-mix(in srgb, var(--sand) 94%, transparent);
    border-bottom-color: var(--line);
}
.nav-inner {
    display: flex; align-items: center; gap: 12px;
    max-width: 1240px; min-height: var(--bar-h); margin: 0 auto; padding: 0 var(--gutter);
}
.logo {
    display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0; margin-right: auto;
    font-family: var(--font-display); font-size: 23px; font-weight: 500; letter-spacing: -.01em;
    color: var(--deep-green); white-space: nowrap;
}
.logo-mark { width: 26px; height: 26px; flex-shrink: 0; }
.nav-links { display: flex; align-items: center; gap: 4px; list-style: none; }
.nav-links a {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
    border-radius: var(--r-pill);
    font-size: 15px; font-weight: 500; color: var(--text); white-space: nowrap;
    transition: var(--transition);
}
.nav-links a:hover { background: rgba(61, 90, 76, .08); background: color-mix(in srgb, var(--forest) 8%, transparent); color: var(--deep-green); }
.nav-links a[aria-current="page"] { color: var(--deep-green); box-shadow: inset 0 -2px 0 var(--terracotta); border-radius: 0; }
.nav .nav-cta { min-height: 44px; padding: 10px 20px; font-size: 14.5px; white-space: nowrap; flex-shrink: 0; }
.nav-links .nav-sheet-cta, .nav-links .nav-sheet-meta { display: none; }
.nav-links .nav-login a { border: 1.5px solid var(--line-strong); padding: 0 18px; font-weight: 600; color: var(--deep-green); }
.nav-links .nav-login a:hover { border-color: var(--forest); }

.mobile-menu-btn {
    display: none; align-items: center; justify-content: center; gap: 10px;
    min-width: 44px; min-height: 44px; padding: 0 14px;
    border: 1.5px solid var(--line-strong); border-radius: var(--r-pill);
    background: transparent; color: var(--deep-green);
    font-size: 14px; font-weight: 600; cursor: pointer;
    transition: var(--transition);
    -webkit-tap-highlight-color: transparent;
}
.mobile-menu-btn:active { transform: scale(.95); }
.menu-icon { position: relative; width: 16px; height: 10px; flex-shrink: 0; }
.menu-icon::before, .menu-icon::after {
    content: ''; position: absolute; left: 0; right: 0; height: 1.75px; border-radius: 2px; background: currentColor;
    transition: transform var(--dur) var(--ease-out), top var(--dur) var(--ease-out);
}
.menu-icon::before { top: 0; }
.menu-icon::after { top: 8px; }
.mobile-menu-btn[aria-expanded="true"] .menu-icon::before { top: 4px; transform: rotate(45deg); }
.mobile-menu-btn[aria-expanded="true"] .menu-icon::after { top: 4px; transform: rotate(-45deg); }

@media (max-width: 1023px) {
    .mobile-menu-btn { display: inline-flex; }
    .nav-links {
        position: absolute; top: 100%; left: 0; right: 0;
        display: grid; gap: 0; padding: 8px var(--gutter) 28px;
        max-height: calc(100dvh - var(--nav-h)); overflow-y: auto; overscroll-behavior: contain;
        background: var(--sand); border-bottom: 1px solid var(--line);
        box-shadow: 0 30px 40px -30px rgba(29, 47, 38, .35);
    }
    .nav-links li { border-bottom: 1px solid var(--line); }
    .nav-links a {
        display: flex; justify-content: space-between; min-height: 60px; padding: 0 2px; border-radius: 0;
        font-family: var(--font-display); font-size: 24px; font-weight: 400; color: var(--deep-green);
    }
    .nav-links a:hover { background: none; }
    .nav-links a[aria-current="page"] { box-shadow: none; color: var(--terracotta-text); }
    .nav-links .nav-login a { border: 0; padding: 0 2px; font-weight: 400; }
    .nav-links li.nav-sheet-cta, .nav-links li.nav-sheet-meta { display: block; border: 0; }
    .nav-links .nav-sheet-cta { padding-top: 22px; }
    .nav-links .nav-sheet-cta a { justify-content: center; min-height: 52px; border-radius: var(--r-pill); font-family: var(--font-body); font-size: 16px; font-weight: 600; color: var(--btn-primary-fg); }
    .nav-links .nav-sheet-meta a { min-height: 44px; justify-content: flex-start; font-family: var(--font-body); font-size: 15px; color: var(--text-muted); text-decoration: underline; text-underline-offset: 4px; }
    .nav-links:not(.is-open) { display: none; }
    /* The second shadow dims the page below the open sheet without covering the header. */
    .navigation-ready .nav-links.is-open { animation: sheet-in var(--dur) var(--ease-out) both; box-shadow: 0 30px 40px -30px rgba(29, 47, 38, .35), 0 100vh 0 100vh rgba(29, 47, 38, .28); }
    .navigation-ready .nav-links.is-open li { animation: sheet-item var(--dur-slow) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 40ms + 40ms); }
    .nav-links li:nth-child(2) { --i: 1; } .nav-links li:nth-child(3) { --i: 2; } .nav-links li:nth-child(4) { --i: 3; }
    .nav-links li:nth-child(5) { --i: 4; } .nav-links li:nth-child(6) { --i: 5; }
}
/* Without scripting the links stay listed and the header scrolls with the page. Gated on the media
   feature, not on a class, so the header never jumps while the script is still loading. */
@media (max-width: 1023px) and (scripting: none) {
    .nav { position: relative; }
    .nav-inner { flex-wrap: wrap; }
    .nav-links, .nav-links:not(.is-open) { display: grid; position: static; width: 100%; padding: 0 0 12px; box-shadow: none; border: 0; }
    .mobile-menu-btn { display: none; }
}
@keyframes sheet-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes sheet-item { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (max-width: 479px) { .nav .nav-cta { display: none; } }
@media (max-width: 359px) {
    .logo { font-size: 20px; gap: 7px; }
    .logo-mark { width: 22px; height: 22px; }
    .mobile-menu-btn .menu-label { display: none; }
    .mobile-menu-btn { padding: 0; width: 44px; }
}
@media (max-width: 219px) {
    :root { --gutter: 10px; }
    .nav-inner { gap: 6px; }
    .logo { font-size: 16px; }
    .logo-mark { display: none; }
}

/* ---------- Sections and shared headings ---------- */
.section { padding: var(--section) 0; }
.section--linen { background: var(--linen); }
.section--white { background: var(--warm-white); }
.section-head { max-width: 720px; margin-bottom: clamp(32px, 5vw, 56px); }
.section-head h2 { font-size: var(--step-2); }
.section-head p { margin-top: 14px; font-size: var(--lede); color: var(--text-muted); }
.section-head--split { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; max-width: none; }
.section-head--split > div { max-width: 640px; }

/* ---------- The stage: our product-render substitute ---------- */
.stage {
    --stage-a: #F2F6F2; --stage-b: var(--mist); --stage-c: var(--sage);
    position: relative; isolation: isolate; overflow: hidden;
    border-radius: var(--r-stage);
    background:
        radial-gradient(120% 90% at 22% 12%, var(--stage-a) 0%, transparent 55%),
        radial-gradient(90% 80% at 90% 100%, var(--stage-c) 0%, transparent 70%),
        var(--stage-b);
}
.stage--blush { --stage-a: #FCF4F0; --stage-b: var(--blush-mist); --stage-c: #E2C3B4; }
.stage--linen { --stage-a: #FFFDF9; --stage-b: var(--linen); --stage-c: #E4D9CA; }
.stage--forest { --stage-a: #4E6F5E; --stage-b: var(--deep-green); --stage-c: var(--ink); }
.stage::before, .stage::after {
    content: ''; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none;
}
/* soft orbs */
.stage::before {
    width: 46%; aspect-ratio: 1; right: -8%; top: -10%;
    background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0) 68%);
}
.stage::after {
    width: 30%; aspect-ratio: 1; left: 6%; bottom: 10%;
    background: radial-gradient(circle at 40% 40%, color-mix(in srgb, var(--stage-c) 70%, #FFFFFF), transparent 70%);
    opacity: .7;
}
.stage-art {
    position: absolute; inset: 0;
    display: flex; align-items: flex-end; justify-content: center; gap: 4%;
    padding: 8% 10% 12%;
}
/* Orbs scale with the stage's width. */
.stage-art img { width: auto; min-width: 0; filter: drop-shadow(0 22px 22px rgba(29, 47, 38, .18)); }
.stage-art .art-orbs { width: 66%; height: auto; align-self: center; }
/* The Peptide Guide's illustration (the founders, November 3), centred and sized by height. */
.stage-art .art-scene { width: auto; height: 84%; max-width: 92%; align-self: center; }
.stage-art:has(.art-scene) ~ .stage-floor { display: none; }
.stage-floor {
    position: absolute; left: 18%; right: 18%; bottom: 9%; height: 7%;
    border-radius: 50%; background: radial-gradient(closest-side, rgba(29, 47, 38, .2), transparent);
    z-index: -1;
}
.stage--forest .stage-floor { background: radial-gradient(closest-side, rgba(0, 0, 0, .35), transparent); }
/* one light sweep on load */
.stage-sheen {
    position: absolute; inset: 0; pointer-events: none; z-index: 2;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%);
    transform: translateX(-100%);
}
/* Photography in a stage (the founders' AI images): fills the field, cropped to each slot's shape. */
.stage.has-photo { background: var(--stage-b); }
.stage.has-photo::before, .stage.has-photo::after, .stage.has-photo .stage-floor, .stage.has-photo .stage-sheen { display: none; }
.stage-photo, .stage-photo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage-photo img { object-fit: cover; object-position: var(--focus, 50% 50%); transition: scale var(--dur-slow) var(--ease-out); }
[data-image-slot="path-weight-care"], [data-image-slot="reshape-hero"] { --focus: 28% 20%; }
[data-image-slot="path-wellness"], [data-image-slot="reignite-hero"] { --focus: 44% 68%; }
[data-image-slot$="-card"][data-image-slot*="ozempic"] { --focus: 55% 60%; }
[data-image-slot*="mounjaro"] { --focus: 55% 50%; }
[data-image-slot*="wegovy"] { --focus: 52% 55%; }
.hp-card:hover .stage-photo img, .door:hover .stage-photo img, .lineup-card:hover .stage-photo img, a.treatment-card:hover .stage-photo img { scale: 1.04; }

[data-image-slot] { position: relative; }

/* ---------- Home ---------- */
.home-hero {
    --hp-radius: clamp(24px, 2.6vw, 32px);
    --hp-step-gap: clamp(40px, 12vw - 80px, 80px);
    padding: calc(var(--nav-h) + clamp(16px, 1.2vw, 18px)) 0 clamp(48px, 7vw, 96px); position: relative;
}

/* Home hero (the founders' design, November 3): the promise, three trust points, the two care paths as cards, the three steps.
   Its type is the site's own (the founders, November 4: the mockup's sizes ran too large on a desktop): the headline is set like
   every page's h1, the subhead like their intros, the chips like the badges and the cards' buttons like the site's buttons.
   The text lines up with the logo and the cards. On a 1440 by 900 screen the cards fit, buttons included. Spacing is padding
   and gap throughout. */
.hp-wrap { display: grid; gap: clamp(22px, 1.8vw, 24px); }
.hp-head { display: grid; gap: 12px; }
.hp-head h1 { font-size: var(--step-1); font-weight: 300; line-height: 1.04; letter-spacing: -.025em; }
.hp-head h1 em { display: block; color: var(--terracotta-text); }
.hp-sub { max-width: 42em; font-size: var(--lede); line-height: 1.55; color: var(--text-muted); text-wrap: balance; }

/* Trust row: an icon over its words, three across, a thin rule between; one row of icon and words from 860px */
.hp-trust { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding-top: 8px; }
.hp-trust li { display: grid; justify-items: center; align-content: start; gap: 8px; padding: 2px 6px; text-align: center; font-size: .8125rem; font-weight: 500; line-height: 1.3; color: var(--ink); }
.hp-trust li + li { border-left: 1px solid var(--line-strong); }
.hp-trust svg { width: 26px; height: 26px; color: var(--deep-green); }

/* The two care-path cards: photo across the top, title, one line, three chips, a full-width button that links the whole card */
.hp-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.hp-card {
    position: relative; isolation: isolate; display: grid; grid-template-rows: auto 1fr; overflow: hidden;
    border-radius: var(--hp-radius); border: 1px solid var(--line); background: var(--warm-white); box-shadow: var(--shadow-float);
    transition: var(--transition); -webkit-tap-highlight-color: transparent;
}
.hp-photo { border-radius: 0; aspect-ratio: 16 / 11; }
.hp-body { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; padding: clamp(18px, 1.4vw, 20px) clamp(16px, 2vw, 24px) clamp(18px, 1.4vw, 20px); }
.hp-body h2 { padding: 0 4px; font-size: clamp(1.625rem, 1.2rem + .9vw, 2.125rem); line-height: 1.12; }
.hp-body p { padding: 6px 4px 0; font-size: 1rem; line-height: 1.55; color: var(--text-muted); text-wrap: balance; }
.hp-chips { list-style: none; display: flex; flex-wrap: wrap; align-content: start; gap: 8px; padding: 12px 4px 16px; }
.hp-chips li { padding: 6px 14px; border-radius: var(--r-pill); font-size: 13.5px; font-weight: 500; line-height: 1.3; color: var(--ink); background: #E8E8DE; background: color-mix(in srgb, var(--sage) 25%, var(--linen)); }
.hp-go {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    min-height: 52px; padding: 14px 22px 14px 26px;
    border-radius: var(--r-pill); background: var(--deep-green); color: #FFFFFF;
    font-size: 15.5px; font-weight: 600; line-height: 1.2; letter-spacing: .005em;
    transition: var(--transition); -webkit-tap-highlight-color: transparent;
}
/* The link stays the button, so its name is "Explore Weight Care"; this lays it over the whole card. */
.hp-go::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.hp-go svg { width: 20px; height: auto; aspect-ratio: 1; flex-shrink: 0; transition: transform var(--dur) var(--ease-out); }
.hp-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: var(--line-strong); }
.hp-card:has(.hp-go:focus-visible) { box-shadow: var(--shadow-hover); border-color: var(--line-strong); }
.hp-card:hover .hp-go { background: var(--ink); }
.hp-card:hover .hp-go svg { transform: translateX(4px); }
.hp-card:active { transform: scale(.985); transition-duration: 90ms; }

/* The three steps: icon and words, a chevron between them from 860px */
.hp-steps { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; padding-top: 4px; }
.hp-steps li { --hp-icon: 40px; position: relative; display: grid; grid-template-columns: var(--hp-icon) minmax(0, 1fr); align-items: start; gap: 0 14px; }
.hp-steps li > svg:first-child { width: var(--hp-icon); height: var(--hp-icon); color: var(--deep-green); }
.hp-steps li > div { display: grid; gap: 2px; }
.hp-steps strong { font-size: 1rem; font-weight: 600; line-height: 1.35; color: var(--ink); }
.hp-steps span { font-size: .9375rem; line-height: 1.45; color: var(--text-muted); text-wrap: balance; }
.hp-chev { display: none; }

@media (min-width: 700px) {
    .hp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
    .hp-photo { aspect-ratio: 5 / 3; }
    /* Two lines' room for each card's line, so the chips and buttons of the two cards line up */
    .hp-body p { font-size: 1.0625rem; min-height: calc(2lh + 6px); }
}
@media (min-width: 860px) {
    .hp-trust { display: flex; flex-wrap: wrap; padding-top: 10px; }
    .hp-trust li { display: inline-flex; align-items: center; gap: 10px; padding: 3px 24px; text-align: left; font-size: .9375rem; white-space: nowrap; }
    .hp-trust li:first-child { padding-left: 0; }
    .hp-trust svg { width: 22px; height: 22px; }
    .hp-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--hp-step-gap); }
    .hp-steps li { --hp-icon: 44px; gap: 0 16px; }
    .hp-steps strong { font-size: 1.0625rem; }
    .hp-chev { display: block; position: absolute; left: calc(100% + var(--hp-step-gap) / 2); top: calc(var(--hp-icon) / 2 - 17px); width: 16px; height: 34px; transform: translateX(-50%); color: var(--text-muted); opacity: .75; }
}
/* From 1000px the headline sets on one line, and the photos take the height the screen leaves (between 200 and 320px), so the
   whole hero, steps included, fits the first screen of a laptop (the founders, November 4: the steps were cut off midway). Each crop
   keeps its subject at the shortest height: the woman's head, the bottles and the shelf edge (the plant's top may be cut). */
@media (min-width: 1000px) {
    .hp-head h1 em { display: inline; }
    .hp-photo { aspect-ratio: auto; height: clamp(200px, 100svh - 660px, 320px); }
    .hp-photo[data-image-slot="path-weight-care"] { --focus: 28% 12%; }
    .hp-photo[data-image-slot="path-wellness"] { --focus: 44% 82%; }
}


/* Care-path doors (/treatments and the home care-path section) */
.doors { display: grid; gap: 14px; }
.door {
    position: relative; display: grid; grid-template-rows: auto 1fr; min-height: 100%;
    border-radius: var(--r-stage); overflow: hidden; isolation: isolate;
    background: var(--warm-white); border: 1px solid var(--line);
    transition: var(--transition);
    -webkit-tap-highlight-color: transparent;
}
.door .stage { border-radius: 0; aspect-ratio: 16 / 10; }
.door-body { display: grid; gap: 8px; align-content: start; padding: 22px 22px 24px; }
.door-body h2, .door-body h3 { font-size: var(--step-3); }
.door-body p { color: var(--text-muted); font-size: 15px; }
.door-go {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 8px;
    font-weight: 600; font-size: 15px; color: var(--forest);
}
.door-go svg { width: 18px; height: 18px; transition: transform var(--dur) var(--ease-out); }
.door:hover { border-color: var(--line-strong); box-shadow: var(--shadow-hover); transform: translateY(-3px); }
.door:hover .door-go svg { transform: translateX(4px); }
.door:active { transform: scale(.985); transition-duration: 90ms; }
.door:hover .stage-art img { transform: translateY(-4px); }
.door .stage-art img { transition: transform var(--dur-slow) var(--ease-out); }
@media (min-width: 700px) { .doors { grid-template-columns: 1fr 1fr; gap: 20px; } }

/* Treatment lineup: a swipe row of product cards on a forest band */
.lineup { background: var(--band); color: var(--on-dark); overflow: hidden; }
.lineup .section-head h2 { color: var(--on-dark); }
.lineup .section-head p { color: var(--on-dark-muted); }
.lineup .text-link { color: var(--on-dark); }
.lineup .text-link:hover { color: #FFFFFF; }
.lineup-controls { display: flex; align-items: center; gap: 10px; }
.lineup-controls .text-link { margin-right: 8px; }
.carousel-btn {
    display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
    border: 1.5px solid rgba(244, 241, 234, .35); background: transparent; color: var(--on-dark); cursor: pointer;
    transition: var(--transition);
}
.carousel-btn svg { width: 18px; height: 18px; }
.carousel-btn:hover:not([aria-disabled="true"]) { background: var(--on-dark); color: var(--band-deep); border-color: var(--on-dark); }
.carousel-btn:active:not([aria-disabled="true"]) { transform: scale(.94); }
.carousel-btn[aria-disabled="true"] { opacity: .35; cursor: default; }
/* The founders, November 3: every treatment at once, grouped by care path, instead of a swipe row. */
.lineup-groups { display: grid; gap: clamp(32px, 4vw, 48px); }
.lineup-group__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 16px; }
.lineup-group__head h3 { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.2; color: var(--on-dark); }
/* The founders, November 6 (direction A, "polish the grid"): weight care in two labelled rows, the four compounded options and
   then the three brand-name ones, with wellness below. On a desktop every card is one size and one height, so a row of
   three sits centred under the row of four (no slot left empty) and every photo keeps its frame (the pens show whole);
   "Explore treatment" sits at each card's foot. Below 1000 px the cards' type is the phone's; from 700 to 859 px the
   compounded options go two by two and a row of three fills the width; on a phone each row is a swipe row of cards laid
   on their side. November 7: every frame shows its product whole, with room above it; the phone's cards are shorter. */
.lineup-rows { display: grid; gap: clamp(28px, 3vw, 36px); }
.lineup-row { display: grid; gap: 14px; }
.lineup-row__label {
    display: flex; align-items: center; gap: 14px;
    font-size: 14px; font-weight: 600; letter-spacing: .02em; line-height: 1.3; color: var(--on-dark-muted);
}
.lineup-row__label::after { content: ''; flex: 1; height: 1px; background: color-mix(in srgb, var(--on-dark) 20%, transparent); }
.lineup-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.lineup-grid--3 { grid-template-columns: repeat(3, calc((100% - 3 * 18px) / 4)); justify-content: center; }   /* a four-row's cards */
/* The height of a card body whose name takes two lines, so every card is one height wherever a row of three is centred. */
@media (min-width: 1000px) { .lineup-body { min-height: 176px; } }
@media (min-width: 860px) and (max-width: 999px) { .lineup-body { min-height: 150px; } }
@media (max-width: 999px) {
    .lineup-grid .lineup-body { padding: 12px 14px 16px; }
    .lineup-grid .lineup-body h4 { font-size: 18px; }
    .lineup-grid .lineup-body .eyebrow { font-size: 11.5px; }
    .lineup-grid .lineup-how { font-size: 13px; }
    .lineup-grid .lineup-body .door-go { font-size: 13.5px; white-space: nowrap; gap: 6px; }
}
@media (max-width: 859px) {
    .lineup-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lineup-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lineup-grid--4 .lineup-card .stage { aspect-ratio: 1 / .92; }   /* square photos: each bottle's cap clear of the frame */
}
/* A phone: each row slides sideways, edge to edge, a card at a time, with the next card showing at the edge. */
@media (max-width: 699px) {
    .lineup-groups { padding-inline: 0; }
    .lineup-group__head, .lineup-row__label { padding-inline: var(--gutter); }
    .lineup-rows { gap: 20px; }
    .lineup-group .lineup-grid {
        grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(84%, 340px); gap: 12px; justify-content: start;
        overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
        padding: 6px var(--gutter) 10px;
        scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--on-dark) 30%, transparent) transparent;
        /* The snap area is the first card's slot, so a card that takes keyboard focus, even the half-shown next one, is
           scrolled to its own snap point and shows whole (the browser would align its edge, and snapping undo it). */
        scroll-padding-inline: var(--gutter) calc(100% - var(--gutter) - min(84% - 1.68 * var(--gutter), 340px));
    }
    /* A card on its side: the photo, in a tall frame that shows each product whole, beside the card's words, so a row is
       only as tall as the words. */
    .lineup-group .lineup-card { grid-template-columns: 38% minmax(0, 1fr); grid-template-rows: none; }
    .lineup-group .lineup-card .stage { aspect-ratio: auto; }
}
/* The narrowest phones: a narrower photo, so "Explore treatment" keeps to one line inside the card. */
@media (max-width: 359px) { .lineup-group .lineup-card { grid-template-columns: 32% minmax(0, 1fr); } }
@media (max-width: 699px) and (prefers-reduced-motion: no-preference) { .lineup-group .lineup-grid { scroll-behavior: smooth; } }
.lineup-card {
    scroll-snap-align: start; display: grid; grid-template-rows: auto 1fr;
    border-radius: var(--r-card); overflow: hidden; background: var(--sand); color: var(--text);
    transition: var(--transition); -webkit-tap-highlight-color: transparent;
}
.lineup-card .stage { border-radius: 0; aspect-ratio: 1 / 1.04; }
/* The pens are tall in their photos: each sits so its cap has room above it (the wider frames from 700 px up). */
.lineup-card .stage[data-image-slot="mounjaro-card"] { --focus: 55% 46%; }
.lineup-card .stage[data-image-slot="wegovy-card"] { --focus: 52% 40%; }
.lineup-card .stage-art .art-orbs { width: 74%; }
.lineup-body { display: grid; align-content: start; gap: 4px; padding: 18px 20px 22px; }
.lineup-body h4 { font-size: 22px; line-height: 1.2; }
.lineup-body .door-go { margin-top: 10px; }
/* How it's taken, in its product page's own words; it takes the row's spare height, so "Explore treatment" sits at the foot. */
.lineup-body { grid-template-rows: auto auto 1fr; }
.lineup-body .door-go { align-self: end; }
.lineup-how { font-size: 14px; line-height: 1.45; color: var(--text-muted); }
.lineup-card:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -24px rgba(0, 0, 0, .6); }
.lineup-card:hover .door-go svg { transform: translateX(4px); }
.lineup-card:active { transform: scale(.98); transition-duration: 90ms; }
.lineup-card .stage-art img { transition: transform var(--dur-slow) var(--ease-out); }
.lineup-card:hover .stage-art img { transform: translateY(-5px); }
.lineup-notes { margin-top: 26px; display: grid; gap: 8px; max-width: 900px; }
.lineup-notes p { margin: 0 auto 0 0; font-size: 13px; line-height: 1.6; color: var(--on-dark-muted); }

/* Care journey (numbered, because it is a sequence) */
.journey-line { list-style: none; display: grid; gap: 0; position: relative; counter-reset: step; }
.journey-line > li {
    counter-increment: step; position: relative;
    display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 0 18px;
    padding-bottom: 34px;
}
.journey-line > li:last-child { padding-bottom: 0; }
.journey-line > li::before {
    content: counter(step); grid-row: span 2;
    display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
    background: var(--fill); color: var(--on-fill);
    font-family: var(--font-display); font-size: 20px; font-weight: 500;
    position: relative; z-index: 1;
}
.journey-line > li::after {
    content: ''; position: absolute; left: 23px; top: 52px; bottom: 4px; width: 2px;
    background: var(--line-strong); transform-origin: top;
}
.journey-line > li:last-child::after { display: none; }
.journey-line h3 { font-size: var(--step-3); margin: 8px 0 8px; }
.journey-line p { color: var(--text-muted); max-width: 58ch; }
@media (min-width: 960px) {
    .journey-line { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
    .journey-line > li { grid-template-columns: 1fr; padding-bottom: 0; align-content: start; }
    .journey-line > li::before { grid-row: auto; margin-bottom: 18px; }
    .journey-line > li::after { left: 60px; right: -24px; top: 23px; bottom: auto; width: auto; height: 2px; transform-origin: left; }
    .journey-line h3 { margin-top: 0; }
}

/* Reasons */
.reasons { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.reason { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding: 24px 22px; background: var(--warm-white); }
.reason-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--mist); color: var(--forest); }
.reason-icon svg { width: 20px; height: 20px; }
.reason h3 { font-size: 19px; margin: 6px 0 6px; }
.reason p { font-size: 15px; color: var(--text-muted); }
@media (min-width: 700px) { .reasons { grid-template-columns: 1fr 1fr; } .reason:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (min-width: 1100px) {
    .reasons { grid-template-columns: repeat(6, 1fr); }
    .reason { grid-column: span 2; padding: 30px 28px; }
    .reason:nth-child(4):nth-last-child(2), .reason:nth-child(5):last-child { grid-column: span 3; }
}

/* Feature band (peptide guide promo and similar) */
.feature-band { display: grid; gap: 28px; align-items: center; }
.feature-band .stage { aspect-ratio: 16 / 11; }
.feature-band h2 { font-size: var(--step-2); }
.feature-band p { margin-top: 14px; color: var(--text-muted); font-size: var(--lede); max-width: 52ch; }
.feature-band .btn { margin-top: 26px; }
@media (min-width: 900px) { .feature-band { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; } }

/* ---------- Product pages ---------- */
.breadcrumb { padding: calc(var(--nav-h) + 20px) 0 0; }
.breadcrumb-list { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; list-style: none; font-size: 13.5px; color: var(--text-muted); }
.breadcrumb-list a { display: inline-block; padding: 4px 0; color: var(--text-muted); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: var(--transition); }
.breadcrumb-list a:hover { color: var(--forest); text-decoration-color: currentColor; }
.breadcrumb-list li[aria-current] { color: var(--deep-green); font-weight: 600; }

.product-hero { padding: 22px 0 clamp(48px, 7vw, 96px); position: relative; }
.product-hero-grid { display: grid; gap: 28px; align-items: start; }
.product-hero-grid > * { min-width: 0; }
.product-hero h1 { font-size: var(--step-1); font-weight: 300; line-height: 1.04; letter-spacing: -.025em; margin: 18px 0 18px; -webkit-hyphens: auto; hyphens: auto; }
.product-hero h1 em { color: var(--terracotta-text); }
.product-hero .lede { margin-bottom: 28px; }
.product-hero .stage { aspect-ratio: 16 / 11; margin-bottom: 4px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.hero-actions .btn svg { width: 18px; height: 18px; }
.handoff-note { max-width: 56ch; margin-top: 16px; font-size: 14px; line-height: 1.65; color: var(--text-muted); }
@media (max-width: 559px) {
    .hero-actions { flex-direction: column; align-items: stretch; }
    .hero-actions .btn { width: 100%; }
}
.product-head .badge { margin-bottom: 2px; }
@media (min-width: 560px) and (max-width: 959px) { .product-hero .stage { aspect-ratio: 2 / 1; } }
.product-aside { margin-top: 8px; }
.product-stage .stage-art { padding: 5% 10% 8%; }
.product-stage .art-orbs { width: 58%; }
@media (min-width: 960px) {
    .product-hero { padding-top: 28px; }
    .product-hero-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(40px, 5vw, 80px); row-gap: 0;
        /* The price and its button sit right under the name, as on a phone; the description follows. */
        grid-template-areas: "stage head" "stage aside" "stage body";
        grid-template-rows: auto auto 1fr;
    }
    .product-head { grid-area: head; }
    .product-body { grid-area: body; margin-top: 32px; }
    .product-aside { grid-area: aside; margin-top: 8px; }
    .product-hero .product-stage { grid-area: stage; align-self: start; position: sticky; top: calc(var(--nav-offset) + 20px); aspect-ratio: 4 / 5; margin: 0; }
    .product-hero h1 { margin-top: 20px; }
}

/* Offer module */
/* The form switch (November 3): the injection and the oral form are separate products on separate pages; this pair of
   links at the top of the price card jumps between them, the current one marked. */
.form-switch { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 20px; background: var(--mist); border-radius: 999px; }
.form-switch a { min-height: 40px; display: inline-flex; align-items: center; padding: 8px 20px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--text-muted); text-decoration: none; transition: var(--transition); }
.form-switch a[aria-current="page"] { background: var(--warm-white); color: var(--deep-green); box-shadow: var(--shadow-card); }
.form-switch a:not([aria-current]):hover { color: var(--forest); }
.price-card {
    position: relative;
    background: var(--warm-white); border: 1px solid var(--line); border-radius: var(--r-card);
    padding: clamp(24px, 3vw, 34px); box-shadow: var(--shadow-float);
}
.price-card__label { font-size: 13px; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; }
.price-card__price { font-family: var(--font-display); font-size: clamp(40px, 5vw, 52px); font-weight: 400; letter-spacing: -.02em; line-height: 1.05; color: var(--deep-green); margin-bottom: 8px; }
.price-card__price span { font-family: var(--font-body); font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--text-muted); }
.price-card__note { font-size: 13.5px; line-height: 1.6; color: var(--text-muted); margin-bottom: 22px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.price-card ul { list-style: none; display: grid; gap: 12px; margin-bottom: 26px; }
.price-card li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; font-size: 14.5px; line-height: 1.5; }
.price-card li svg { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--mist); color: var(--forest); }
.price-card .btn { width: 100%; }
/* Offer row: the page's price and its own button, together, so the offer shows in the first phone screen. */
.offer-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; }
.offer-row .price-card__price { margin-bottom: 0; }
.offer-row .btn { width: auto; min-height: 48px; padding: 12px 22px; }
.offer-fine { grid-column: 1 / -1; margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--text-muted); }
/* The price's own qualifying note stays with the price at every width. */
.offer-row .price-card__note { grid-column: 1 / -1; margin: 8px 0 0; padding: 0; border: 0; font-size: 13px; line-height: 1.5; }
.offer-row .price-card__note + .offer-fine { margin-top: 4px; }
.offer-cue { grid-column: 1 / -1; margin-top: 12px; font-size: 13.5px; font-weight: 600; line-height: 1.45; color: var(--forest); }
.offer-row .offer-cue + .price-card__note { margin-top: 4px; }
.offer-cue span { white-space: nowrap; }
/* On a phone the plan lines need the card's full width, so the button goes under the price, full width. */
@media (max-width: 479px) {
    .offer-row { grid-template-columns: minmax(0, 1fr); }
    .offer-row .btn { width: 100%; margin-top: 12px; }
}
.offer-details { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line); }
.offer-details ul { margin-bottom: 0; }
/* The plans' saving (3 and 6 months), one short line under the monthly price. */
.price-card__plans { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--text); }
.price-card__plans + .price-card__plans { margin-top: 0; }
/* The plans side by side (the founders, November 3): the monthly figure, the dollar saving, "Best value" on the longest. */
.plan-options { grid-column: 1 / -1; list-style: none; display: grid; gap: 8px; margin: 16px 0 0; padding: 0; }
.price-card .plan-options { margin-bottom: 0; grid-auto-rows: 1fr; }
.plan-option { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 4px 14px;
    padding: 10px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--warm-white); font-size: 14.5px; line-height: 1.35; }
.price-card .plan-option { grid-template-columns: minmax(0, 1fr) auto auto; gap: 4px 14px; font-size: 14.5px; line-height: 1.35; }
.plan-option--best { border-color: var(--forest); box-shadow: inset 0 0 0 1px var(--forest); }
/* "Most popular" (the founders, November 3): the same pill and outline as "Best value", in the brand's orange. The pill takes the
   darker orange so its white label stays readable (AA). */
.plan-option--popular { border-color: var(--terracotta); box-shadow: inset 0 0 0 1px var(--terracotta); }
.plan-option__term { font-weight: 600; color: var(--deep-green); }
.plan-option__term small { display: block; font-size: 12.5px; font-weight: 400; color: var(--text-muted); }
.plan-option__badge { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: var(--r-pill); background: var(--forest);
    color: var(--warm-white); font-size: 11.5px; font-weight: 600; letter-spacing: .02em; vertical-align: 1px; }
.plan-option__badge--popular { background: var(--terracotta-text); }
.plan-option__price { font-weight: 600; color: var(--deep-green); white-space: nowrap; }
.plan-option__save { padding: 3px 9px; border-radius: var(--r-pill); background: var(--mist); color: var(--forest);
    font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.plan-option:not(:has(.plan-option__save)) .plan-option__price { grid-column: 2 / -1; justify-self: end; }
@media (max-width: 479px) { .plan-option__badge { display: table; margin: 3px 0 2px; } }
@media (max-width: 379px) { .price-card .plan-option { grid-template-columns: minmax(0, 1fr) auto; } .plan-option__save { grid-column: 2; justify-self: end; } }
/* A second option in the same card (the daily capsules): its price, plan line and its own button. */
.offer-alt { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line); }
.offer-alt__price { font-family: var(--font-display); font-size: clamp(28px, 3.2vw, 34px); font-weight: 400; letter-spacing: -.02em; line-height: 1.15; color: var(--deep-green); }
.offer-alt__price span { font-family: var(--font-body); font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--text-muted); }
.offer-alt .price-card__plans { margin-bottom: 16px; }
@media (max-width: 959px) {
    .offer-alt { order: 2; margin: 0; padding: 14px 16px; background: var(--warm-white); border: 1px solid var(--line); border-radius: var(--r-card); }
}
@media (max-width: 959px) {
    .product-hero-grid { gap: 20px; }
    .product-aside, .product-aside .price-card { display: contents; }
    .product-head { order: 1; }
    .form-switch { order: 2; justify-self: start; margin-bottom: 0; }
    .offer-row { order: 2; }
    .product-hero .product-stage { order: 3; }
    .product-body { order: 4; }
    .offer-details { order: 5; }
    .offer-row, .offer-details { background: var(--warm-white); border: 1px solid var(--line); border-radius: var(--r-card); }
    .offer-row { padding: 14px 16px; box-shadow: var(--shadow-float); }
    .offer-row .price-card__price { font-size: clamp(30px, 8vw, 40px); }
    .offer-details { margin: 0; padding: 22px 20px; }
}
@media (max-width: 559px) { .product-hero .product-stage { aspect-ratio: 16 / 10; } }

/* Editorial info sections */
.info-section { padding: clamp(56px, 8vw, 112px) 0; }
.info-section.alt { background: var(--linen); }
.info-section .section-inner { max-width: 1240px; }
.info-section .section-inner > h2 { max-width: 16ch; }
.info-section h2 { font-size: var(--step-2); margin-bottom: 22px; }
.info-section p { font-size: 16.5px; color: var(--text-muted); margin-bottom: 16px; max-width: 64ch; }
.info-section p:last-child { margin-bottom: 0; }
@media (min-width: 960px) {
    .info-section .section-inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 64px; align-items: start; }
    .info-section .section-inner > h2 { grid-column: 1; grid-row: 1 / span 20; margin-bottom: 0; position: sticky; top: calc(var(--nav-offset) + 32px); }
    .info-section .section-inner > :not(h2) { grid-column: 2; }
}
.check-list { list-style: none; display: grid; gap: 14px; margin: 24px 0 8px; }
.check-list li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; font-size: 16px; color: var(--text); }
.check-list li svg { width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: var(--mist); color: var(--forest); }

/* Steps (product pages reuse the journey line styling) */
.steps { list-style: none; display: grid; position: relative; margin-top: 8px; }
.step { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 0 18px; padding-bottom: 34px; }
.step:last-child { padding-bottom: 0; }
.step:not(:last-child)::before { content: ''; position: absolute; left: 23px; top: 52px; bottom: 4px; width: 2px; background: var(--line-strong); transform-origin: top; }
.step-number {
    display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
    background: var(--fill); color: var(--on-fill); font-family: var(--font-display); font-size: 20px; font-weight: 500;
    position: relative; z-index: 1;
}
.step-content h3 { font-size: var(--step-3); margin: 8px 0 8px; }
.step-content p { color: var(--text-muted); font-size: 16px; margin: 0; max-width: 58ch; }
@media (min-width: 960px) {
    #how-it-works .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
    #how-it-works .step { grid-template-columns: 1fr; padding-bottom: 0; align-content: start; }
    #how-it-works .step:not(:last-child)::before { left: 60px; right: -24px; top: 23px; bottom: auto; width: auto; height: 2px; transform-origin: left; }
    #how-it-works .step-number { margin-bottom: 18px; }
    #how-it-works .step-content h3 { margin-top: 0; }
    #how-it-works > .container > h2 { margin-bottom: 44px; }
}

/* FAQ */
.faq-list { display: grid; gap: 0; max-width: 820px; border-top: 1px solid var(--line-strong); }
.faq-item { border-bottom: 1px solid var(--line-strong); }
.faq-item summary {
    display: flex; justify-content: space-between; align-items: center; gap: 20px;
    min-height: 64px; padding: 18px 0; list-style: none; cursor: pointer;
    font-family: var(--font-display); font-size: clamp(18px, 1rem + .4vw, 21px); line-height: 1.3; color: var(--deep-green);
    -webkit-tap-highlight-color: transparent;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: ''; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
    background:
        linear-gradient(var(--forest), var(--forest)) center / 12px 1.75px no-repeat,
        linear-gradient(var(--forest), var(--forest)) center / 1.75px 12px no-repeat,
        var(--mist);
    transition: transform var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}
.faq-item[open] summary::after { transform: rotate(135deg); }
.faq-item summary:hover::after { background-color: var(--sage); }
.faq-item p { color: var(--text-muted); font-size: 16px; padding: 0 48px 24px 0; max-width: 68ch; }
.faq-item::details-content {
    block-size: 0; overflow: clip; opacity: 0;
    transition: block-size var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out), content-visibility var(--dur) allow-discrete;
}
.faq-item[open]::details-content { block-size: auto; block-size: calc-size(auto, size); opacity: 1; }

/* Important information */
.disclaimer-box {
    max-width: 820px; margin-top: 40px; padding: 24px 26px;
    border-radius: var(--r-card); background: var(--warm-white);
    border: 1px solid var(--line); border-left: 4px solid var(--terracotta);
}
.disclaimer-box p { font-size: 14px; line-height: 1.7; color: var(--text-muted); margin-bottom: 12px; }
.disclaimer-box p:last-child { margin-bottom: 0; }

/* Related treatments: swipe row on phones, grid above */
.related-grid {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 78%); gap: 14px;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin: 0 calc(var(--gutter) * -1); padding: 8px var(--gutter) 18px; scroll-padding: 0 var(--gutter);
    scrollbar-width: none;
}
.related-grid::-webkit-scrollbar { display: none; }
.related-card {
    scroll-snap-align: start;
    display: grid; align-content: start; gap: 6px; min-height: 170px;
    padding: 22px; border-radius: var(--r-card);
    background: var(--warm-white); border: 1px solid var(--line);
    transition: var(--transition);
    -webkit-tap-highlight-color: transparent;
}
.related-card:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: var(--shadow-hover); }
.related-card:active { transform: scale(.98); transition-duration: 90ms; }
.related-card .eyebrow { margin-bottom: 4px; }
.related-card h3 { font-size: 21px; margin-bottom: 2px; }
.related-card p { font-size: 14px; color: var(--text-muted); margin: 0; }
@media (min-width: 700px) {
    .related-grid { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); overflow: visible; margin: 0; padding: 0; }
}

/* Final call to action band */
.final-cta {
    position: relative; overflow: hidden; isolation: isolate;
    padding: clamp(72px, 10vw, 136px) 0; text-align: center;
    background: var(--band-deep); color: var(--on-dark);
}
.final-cta::before {
    content: ''; position: absolute; inset: -30% -10% auto; height: 120%; z-index: -1;
    background:
        radial-gradient(40% 50% at 20% 30%, rgba(78, 111, 94, .55), transparent 70%),
        radial-gradient(35% 45% at 85% 70%, rgba(196, 131, 106, .28), transparent 70%);
}
.final-cta h2 { color: var(--on-dark); font-size: var(--step-1); font-weight: 300; letter-spacing: -.02em; max-width: 18ch; margin: 0 auto 18px; }
.final-cta p { color: var(--on-dark-muted); font-size: var(--lede); max-width: 560px; margin: 0 auto 32px; }
.final-cta .btn { margin-bottom: 20px; }
.no-commitment { font-size: 14px !important; color: var(--on-dark-muted) !important; margin-bottom: 0 !important; }

/* ---------- Footer ---------- */
.footer { background: var(--sand); border-top: 1px solid var(--line); padding: clamp(48px, 7vw, 80px) 0 calc(28px + env(safe-area-inset-bottom)); }
.footer-grid { display: grid; gap: 36px; }
.footer-brand .logo { margin: 0; }
.footer-brand p { margin-top: 12px; max-width: 34ch; font-size: 14.5px; color: var(--text-muted); }
.footer-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
.footer-col h2 { font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: .01em; color: var(--text-muted); margin-bottom: 10px; }
.footer-col ul { list-style: none; display: grid; gap: 2px; }
.footer-col a { display: inline-flex; align-items: center; min-height: 36px; font-size: 15px; color: var(--deep-green); transition: var(--transition); }
.footer-col a:hover { color: var(--terracotta-text); }
.footer-col li > span { display: inline-flex; align-items: center; min-height: 36px; font-size: 15px; color: var(--deep-green); }
.footer-col a, .footer-col li > span { overflow-wrap: break-word; }
.footer-legal { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line); display: grid; gap: 8px; font-size: 13px; color: var(--text-muted); }
/* Four columns from 800px (Support and Legal hold the longer lines); the brand moves beside them from 1100px. */
@media (min-width: 800px) {
    .footer-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1.4fr); }
    .footer-legal { grid-template-columns: 1fr auto; }
}
@media (min-width: 1100px) { .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 48px; } }
/* The appearance selector (the founders' ruling of November 5): Auto, Light and Dark, small, under the brand line. It shows only once
   assets/appearance.js has run (it marks <html class="appearance-ready">), so it never sits there unable to work. */
.appearance { display: none; }
.appearance-ready .appearance { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-top: 20px; }
.appearance-label { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.appearance-options { display: inline-flex; flex-wrap: wrap; max-width: 100%; gap: 2px; padding: 3px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); }
.appearance button {
    display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 12px;
    border: 0; border-radius: var(--r-pill); background: transparent; color: var(--text-muted);
    font-size: 13px; font-weight: 600; line-height: 1.2; cursor: pointer; transition: var(--transition);
    -webkit-tap-highlight-color: transparent;
}
.appearance button svg { width: 14px; height: 14px; flex-shrink: 0; }
.appearance button:hover { color: var(--deep-green); }
.appearance button[aria-pressed="true"] { background: var(--mist); color: var(--deep-green); }
@media (forced-colors: active) { .appearance button[aria-pressed="true"] { outline: 2px solid Highlight; } }
/* While the appearance switches, every colour changes at once. */
html.appearance-switching, .appearance-switching *, .appearance-switching *::before, .appearance-switching *::after { transition: none !important; }

/* ---------- Sticky phone call to action ---------- */
.sticky-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
    background: rgba(251, 248, 244, .94);
    background: color-mix(in srgb, var(--sand) 92%, transparent);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    backdrop-filter: saturate(1.4) blur(14px);
    border-top: 1px solid var(--line);
    transform: translateY(110%); visibility: hidden;
    transition: transform var(--dur) var(--ease-out), visibility 0s linear var(--dur);
}
.sticky-cta.is-shown { transform: none; visibility: visible; transition: transform var(--dur) var(--ease-out), visibility 0s; }
.sticky-cta-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; max-width: 560px; margin: 0 auto; }
.sticky-cta .btn { flex: 1 1 150px; min-height: 50px; }
.sticky-cta small { flex: 0 1 46%; font-size: 12px; line-height: 1.4; color: var(--text-muted); }
.sticky-cta small span { display: block; }
/* The prescription line never hides: on narrow screens it wraps under the button. */
@media (min-width: 960px) { .sticky-cta { display: none; } }
@media (max-width: 359px) { .sticky-cta small { flex: 1 1 100%; text-align: center; } }

/* ---------- Very narrow viewports (a small phone at 200% zoom is about 160px wide) ---------- */
@media (max-width: 259px) {
    :root { --step-display: 1.9rem; --step-1: 1.7rem; --step-2: 1.4rem; --step-3: 1.12rem; --lede: 1rem; --r-stage: 18px; }
    body { font-size: 15px; overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; }
    .badge, .tag--pill { flex-wrap: wrap; white-space: normal; }
    .btn { padding: 12px 14px; font-size: 14px; }
    .hp-trust { grid-template-columns: minmax(0, 1fr); }
    .hp-trust li + li { border-left: 0; border-top: 1px solid var(--line-strong); }
    .hp-body { padding: 14px 10px 16px; }
    .hp-body h2 { padding: 0 2px; font-size: 1.5rem; }
    .hp-body p { padding: 6px 2px 0; }
    .hp-chips { padding-left: 2px; padding-right: 2px; }
    .hp-go { gap: 6px; padding: 10px 12px; font-size: 14px; }
    .hp-go svg { width: 16px; }
    .hp-steps li { --hp-icon: 32px; gap: 0 10px; }
    .price-card { padding: 18px 14px; }
    .price-card__price { font-size: 28px; overflow-wrap: anywhere; }
    .offer-row { grid-template-columns: 1fr; }
    .offer-row .btn { width: 100%; }
    .faq-item summary { gap: 10px; font-size: 16px; overflow-wrap: anywhere; }
    .faq-item summary::after { width: 24px; height: 24px; }
    .faq-item p { padding-right: 0; }
    .disclaimer-box { padding: 16px 14px; }
    .related-grid { grid-auto-columns: 86%; }
    .reason { grid-template-columns: 1fr; }
    .journey-line > li, .step { grid-template-columns: 36px minmax(0, 1fr); gap: 0 10px; }
    .journey-line > li::before, .step-number { width: 36px; height: 36px; font-size: 16px; }
    .journey-line > li::after, .step:not(:last-child)::before { left: 17px; top: 40px; }
    .footer-cols { grid-template-columns: 1fr; }
    .sticky-cta .btn { font-size: 14px; }
    /* The appearance buttons wrap without their icons (a 320 px phone at 200% zoom). */
    .appearance-options { border-radius: var(--r-control); }
    .appearance button svg { display: none; }
}

/* ---------- Treatment-finder quiz: header strip, homepage band, price-box link, bubble, pop-over ---------- */
/* The strip: "Take the quiz" (with its lead) and "Ask a question", side by side. */
.quiz-strip {
    display: flex; align-items: center; justify-content: center; gap: 8px; height: var(--strip-h); padding: 0 var(--gutter);
    overflow: hidden; background: var(--band);
}
.quiz-strip a {
    display: flex; align-items: center; gap: 6px; height: var(--strip-h); padding: 0 6px;
    color: var(--on-dark); font-size: 13.5px; font-weight: 500; white-space: nowrap;
}
.quiz-strip-cta { font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.quiz-strip a:hover .quiz-strip-cta { color: #FFFFFF; }
.quiz-strip a:focus-visible { outline: 2px solid var(--on-dark); outline-offset: -4px; }
.nav.is-scrolled .quiz-strip { height: 0; visibility: hidden; }
/* With scripting the strip folds once the page scrolls, so anchors and sticky parts clear only the bar. */
@media (scripting: enabled) { :root { --nav-offset: var(--bar-h); } }
/* Phones: the two links alone (the lead returns where all three fit on one line). */
@media (max-width: 499px) { .quiz-strip-lead { display: none; } }
/* Very narrow screens (or heavy zoom): smaller text, and anything that still overflows is cut at the end, not both ends. */
@media (max-width: 259px) {
    .quiz-strip { justify-content: flex-start; gap: 0; padding: 0 4px; }
    .quiz-strip a { font-size: 12px; padding: 0 4px; }
}
@media (prefers-reduced-motion: no-preference) {
    .js-ready .quiz-strip { transition: height var(--dur) var(--ease-out), visibility 0s; }
    .js-ready .nav.is-scrolled .quiz-strip { transition: height var(--dur) var(--ease-out), visibility 0s linear var(--dur); }
}

/* Sits between the dark lineup section and How It Works, which brings its own top spacing. */
.quiz-band { padding: clamp(28px, 4.5vw, 56px) 0 0; }
.quiz-band-inner {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px;
    padding: clamp(22px, 3.2vw, 34px) clamp(20px, 3.6vw, 40px);
    background: var(--mist); border-radius: var(--r-card);
}
.quiz-band-copy { flex: 1 1 320px; }
.quiz-band h2 { font-family: var(--font-display); font-size: clamp(1.45rem, 1.2rem + 1vw, 2rem); font-weight: 400; line-height: 1.15; color: var(--deep-green); }
.quiz-band p { margin-top: 6px; color: var(--text-muted); font-size: 15px; line-height: 1.6; max-width: 58ch; }
.quiz-band .btn { flex-shrink: 0; }
@media (max-width: 559px) { .quiz-band .btn { width: 100%; } }

.offer-quiz { grid-column: 1 / -1; margin-top: 6px; font-size: 13.5px; line-height: 1.5; color: var(--text-muted); }
.offer-quiz a { color: var(--forest); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }

.quiz-bubble {
    --quiz-bubble-lift: 0px;
    position: fixed; right: 16px; bottom: calc(16px + var(--quiz-bubble-lift) + env(safe-area-inset-bottom)); z-index: 950;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 8px;
    width: min(300px, calc(100vw - 32px)); padding: 14px 12px 14px 18px;
    background: var(--warm-white); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-float);
}
.quiz-bubble p { font-family: var(--font-display); font-size: 18px; line-height: 1.25; color: var(--deep-green); }
.quiz-bubble .btn { grid-column: 1 / -1; min-height: 46px; padding: 11px 20px; }
.quiz-bubble-close {
    grid-column: 2; grid-row: 1; align-self: start;
    display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%;
    border: 0; background: transparent; color: var(--text-muted); font-size: 15px; cursor: pointer;
}
.quiz-bubble-close:hover { background: var(--mist); color: var(--deep-green); }
@media (prefers-reduced-motion: no-preference) {
    .quiz-bubble { opacity: 0; transform: translateY(12px); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), bottom var(--dur) var(--ease-out); }
    .quiz-bubble.is-shown { opacity: 1; transform: none; }
}

html.quiz-is-open { overflow: hidden; scrollbar-gutter: stable; }
.quiz-dialog {
    width: min(640px, calc(100vw - 32px)); max-width: none; max-height: min(820px, calc(100dvh - 48px));
    margin: auto; padding: 0; border: 0; border-radius: var(--r-card);
    background: var(--sand); color: var(--text); box-shadow: var(--shadow-float); overflow: auto; overflow-x: hidden; overscroll-behavior: contain;
}
.quiz-dialog::backdrop { background: rgba(29, 47, 38, .45); }
@media (max-width: 639px) {
    .quiz-dialog { width: 100%; height: 100%; max-height: none; border-radius: 0; }
}
.quiz-dialog-bar {
    position: sticky; top: 0; z-index: 1;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 12px 10px clamp(20px, 4vw, 36px); background: var(--sand); border-bottom: 1px solid var(--line);
}
.quiz-dialog-title { font-family: var(--font-display); font-size: 20px; color: var(--deep-green); }
.quiz-close {
    display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%;
    border: 1.5px solid var(--line-strong); background: transparent; color: var(--deep-green); font-size: 16px; cursor: pointer;
}
.quiz-close:hover { background: var(--warm-white); border-color: var(--forest); }
.quiz-dialog .quiz { padding: clamp(20px, 4vw, 36px); }
.quiz-count { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--terracotta-text); }
.quiz-q { margin: 8px 0 0; font-family: var(--font-display); font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.15rem); font-weight: 400; line-height: 1.15; color: var(--deep-green); }
.quiz-q:focus { outline: none; }
.quiz-note { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--text-muted); }
.quiz-options { display: grid; gap: 10px; margin-top: 22px; }
.quiz-option {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 58px; padding: 14px 18px;
    border: 1.5px solid var(--line-strong); border-radius: var(--r-control); background: var(--warm-white);
    color: var(--deep-green); font: 600 16px/1.3 var(--font-body); text-align: left; cursor: pointer; transition: var(--transition);
}
.quiz-option:hover { border-color: var(--forest); box-shadow: var(--shadow-card); }
.quiz-option:focus-visible, .quiz-back:focus-visible, .quiz-close:focus-visible, .quiz-bubble-close:focus-visible { outline: 2px solid var(--terracotta-text); outline-offset: 2px; }
.quiz-option-go { color: var(--forest); transition: transform var(--dur) var(--ease-out); }
.quiz-option:hover .quiz-option-go { transform: translateX(3px); }
/* The answer just chosen fills in (with a check) for a moment before the next step arrives. */
.quiz-option.is-chosen { background: var(--fill); border-color: var(--fill); color: var(--on-fill); transition-duration: 90ms; }
.quiz-option.is-chosen .quiz-option-go { color: var(--on-fill); transform: none; }
.quiz.is-moving { pointer-events: none; }
.quiz-back { margin-top: 18px; padding: 10px 0; border: 0; background: none; color: var(--forest); font: 600 15px/1.2 var(--font-body); cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.quiz-results { display: grid; gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; }
.quiz-card { padding: 18px 20px; background: var(--warm-white); border: 1px solid var(--line); border-radius: var(--r-card); }
.quiz-card h3 { margin: 4px 0 6px; font-family: var(--font-display); font-size: 22px; font-weight: 400; color: var(--deep-green); }
.quiz-card p { font-size: 14.5px; line-height: 1.55; color: var(--text-muted); }
.quiz-card .quiz-price { margin-top: 8px; color: var(--text); }
.quiz-card .quiz-price-note { margin-top: 2px; font-size: 13px; }
.quiz-price strong { font-family: var(--font-display); font-size: 20px; font-weight: 500; color: var(--deep-green); }
.quiz-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: 14px; }
.quiz-card-actions .btn { min-height: 46px; padding: 11px 22px; }
.quiz-t2d-note { margin-top: 16px; font-size: 14.5px; line-height: 1.55; color: var(--text); }
.quiz-fine { margin-top: 12px; font-size: 13px; line-height: 1.55; color: var(--text-muted); }
.quiz-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
.quiz-end .quiz-back { margin-top: 0; }
.quiz-panel .quiz { margin-top: 24px; }

/* "Ask a question" in the pop-over: a two-way switch in the bar, then chips over the site's own answers. */
.quiz-modes { display: flex; flex: 1 1 auto; max-width: 440px; gap: 4px; padding: 4px; border-radius: var(--r-pill); background: var(--linen); }
.quiz-mode {
    flex: 1 1 0; min-width: 0; min-height: 40px; padding: 6px 10px; border: 0; border-radius: var(--r-pill); background: transparent;
    color: var(--deep-green); font: 600 15px/1.25 var(--font-body); cursor: pointer; overflow-wrap: anywhere;
    transition: background var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.quiz-mode[aria-pressed="true"] { background: var(--warm-white); box-shadow: var(--shadow-card); }
.quiz-mode:focus-visible { outline: 2px solid var(--terracotta-text); outline-offset: 2px; }
.ask-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ask-chip {
    max-width: 100%; min-height: 44px; padding: 9px 16px; border: 1.5px solid var(--forest); border-radius: 22px; background: var(--warm-white);
    color: var(--deep-green); font: 600 14.5px/1.35 var(--font-body); text-align: left; cursor: pointer; overflow-wrap: anywhere;
    transition: background var(--dur-fast) ease;
}
.ask-chip:hover { background: var(--mist); }
.ask-chip:focus-visible { outline: 2px solid var(--terracotta-text); outline-offset: 2px; }
.ask-answer { margin-top: 14px; font-size: 16px; line-height: 1.6; color: var(--text); }
.ask-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-size: 15px; }
.ask-source { margin-top: 10px; font-size: 14px; color: var(--text-muted); }
.ask-start { margin-top: 18px; }
.ask-start .btn { min-height: 46px; padding: 11px 22px; }
.ask-more-title { margin-top: 22px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--terracotta-text); }
.ask-more-title + .ask-chips { margin-top: 10px; }
@media (max-width: 359px) { .quiz-mode { font-size: 14px; padding: 6px 8px; } }
@media (max-width: 259px) {
    .quiz-modes { flex-direction: column; border-radius: var(--r-control); }
    .quiz-mode { border-radius: 10px; }
}

/* Opening and closing the pop-over: it rises and fades in over a fading backdrop (on phones it slides up as a
   sheet), and leaves the same way. With "reduce motion" it only fades. quiz.js closes it after the animation. */
@keyframes quiz-dialog-in { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes quiz-dialog-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(10px) scale(.98); } }
@keyframes quiz-sheet-in { from { transform: translateY(100%); } to { transform: none; } }
@keyframes quiz-sheet-out { from { transform: none; } to { transform: translateY(100%); } }
@keyframes quiz-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes quiz-fade-out { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
    .quiz-dialog[open]:not(.is-closing) { animation: quiz-dialog-in 320ms var(--ease-out); }
    .quiz-dialog[open]:not(.is-closing)::backdrop { animation: quiz-fade-in 320ms var(--ease-out); }
    .quiz-dialog.is-closing { animation: quiz-dialog-out 220ms cubic-bezier(.4, 0, 1, 1) forwards; }
    .quiz-dialog.is-closing::backdrop { animation: quiz-fade-out 220ms ease forwards; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 639px) {
    .quiz-dialog[open]:not(.is-closing) { animation: quiz-sheet-in 380ms var(--ease-out); }
    .quiz-dialog.is-closing { animation: quiz-sheet-out 260ms cubic-bezier(.4, 0, 1, 1) forwards; }
}
@media (prefers-reduced-motion: reduce) {
    .quiz-dialog[open]:not(.is-closing), .quiz-dialog[open]:not(.is-closing)::backdrop { animation: quiz-fade-in 160ms ease; }
    .quiz-dialog.is-closing, .quiz-dialog.is-closing::backdrop { animation: quiz-fade-out 140ms ease forwards; }
}

/* ---------- Motion ---------- */
/* Movement only: art is visible even if a browser pauses the animation (hidden tabs, snapshots). */
@keyframes sheen { to { transform: translateX(100%); } }
@keyframes photo-in { from { transform: scale(1.05); } to { transform: none; } }
@keyframes orb-drift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-4%, 5%); } }

@media (prefers-reduced-motion: no-preference) {
    .stage--live::before { animation: orb-drift 14s var(--ease-in-out) infinite; }
    .stage--live .stage-sheen { animation: sheen 1.6s var(--ease-in-out) .5s both; }
    .stage--live.has-photo .stage-photo img { animation: photo-in 1.6s var(--ease-out) both; }

    /* Scroll reveals: only once JS confirms it can reveal them again. */
    .motion-ready [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
    .motion-ready [data-reveal].is-in { opacity: 1; transform: none; }
    .motion-ready [data-reveal]:focus-within { opacity: 1; transform: none; transition: none; }

    /* The journey line draws itself as it scrolls into view where supported. */
    @supports (animation-timeline: view()) {
        .journey-line > li::after, .step:not(:last-child)::before {
            animation: draw-line linear both; animation-timeline: view(); animation-range: entry 20% cover 45%;
        }
    }
}
@keyframes draw-line { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@media (min-width: 960px) { @keyframes draw-line { from { transform: scaleX(0); } to { transform: scaleX(1); } } }

/* Cross-page transitions where the browser supports them. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out 180ms var(--ease-in-out) both; }
::view-transition-new(root) { animation: vt-in 320ms var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }

@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Print: everything visible, nothing fixed. */
@media print {
    .motion-ready [data-reveal] { opacity: 1 !important; transform: none !important; }
    .sticky-cta, .mobile-menu-btn, .carousel-btn, .skip-link, .stage-sheen { display: none !important; }
    .nav { position: static; }
    .related-grid { overflow: visible; grid-auto-flow: row; flex-wrap: wrap; }
}

/* Forced colours: keep structure visible. */
@media (forced-colors: active) {
    .btn, .door, .hp-card, .hp-go, .related-card, .price-card, .faq-item summary::after { border: 1px solid CanvasText; }
    .stage { forced-color-adjust: none; }
}