:root {
  --ink: oklch(0.22 0.04 300);
  --ink-soft: oklch(0.42 0.035 300);
  --mist: oklch(0.97 0.01 300);
  --white: #fff;
  --orchid: oklch(0.7 0.18 340);
  --iris: oklch(0.7 0.16 250);
  --mint: oklch(0.7 0.16 160);
  --line: oklch(0.9 0.02 300);
  --serif: "Instrument Serif", Georgia, serif;
  --sans: "Bricolage Grotesque", Inter, sans-serif;
  --shadow: 0 24px 80px rgba(28, 17, 45, .12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--mist); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
.skip-link { position: fixed; z-index: 1000; left: 16px; top: -60px; padding: 12px 18px; background: var(--ink); color: white; border-radius: 999px; transition: top .2s; }
.skip-link:focus { top: 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
/* clip-path duplicates the border-radius because Safari does not reliably
   clip filtered/composited children (the blurred orbs, ::after glows) to a
   rounded overflow:hidden box — the square corners of those layers poke past
   the radius as coloured points. inset(0 round r) clips them for real. */
.section-shell { width: calc(100% - 32px); max-width: 1440px; margin-inline: auto; border-radius: 30px; clip-path: inset(0 round 30px); }
.section-space { max-width: 1200px; margin: 0 auto; padding: 130px 32px; }
.eyebrow { margin: 0 0 18px; font: 600 11px/1 var(--sans); letter-spacing: .15em; text-transform: uppercase; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 18px; min-height: 52px; padding: 0 24px; border: 1px solid transparent; border-radius: 999px; font-weight: 700; font-size: 14px; transition: transform .25s, box-shadow .25s, background .25s; }
.button:hover { transform: translateY(-2px); }
.button span { font-size: 17px; }
.button-dark { background: var(--ink); color: white; box-shadow: 0 8px 24px rgba(27, 16, 44, .18); }
.button-dark:hover { box-shadow: 0 13px 30px rgba(27, 16, 44, .28); }
.button-light { background: white; color: var(--ink); box-shadow: 0 12px 34px rgba(38, 27, 60, .15); }
.button-outline { border-color: var(--line); background: white; }
.button-small { min-height: 42px; padding-inline: 18px; font-size: 12px; gap: 12px; }

.site-header { position: fixed; z-index: 100; top: 18px; left: 50%; transform: translateX(-50%); width: min(1120px, calc(100% - 40px)); min-height: 66px; padding: 10px 12px 10px 20px; display: flex; align-items: center; justify-content: space-between; border: 1px solid rgba(255,255,255,.7); border-radius: 999px; background: rgba(255,255,255,.64); backdrop-filter: blur(20px) saturate(140%); box-shadow: 0 10px 40px rgba(29, 15, 48, .08); transition: background .3s, box-shadow .3s; }
.site-header.scrolled { background: rgba(255,255,255,.9); box-shadow: 0 12px 44px rgba(29, 15, 48, .14); }
.brand { display: inline-flex; align-items: center; gap: 8px; font-size: 21px; font-weight: 800; letter-spacing: -.04em; }
.brand svg { width: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.desktop-nav { display: flex; gap: 30px; font-size: 13px; font-weight: 600; }
.desktop-nav a { position: relative; }
.desktop-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -6px; height: 1px; background: var(--ink); transition: right .2s; }
.desktop-nav a:hover::after { right: 0; }
.header-actions { display: flex; align-items: center; gap: 18px; }
.login-link { font-size: 13px; font-weight: 600; }
.menu-button, .mobile-menu { display: none; }

.hero { position: relative; min-height: 860px; overflow: hidden; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; padding: 142px clamp(30px, 6vw, 90px) 100px; background: linear-gradient(140deg, oklch(.87 .09 310), oklch(.84 .12 250) 46%, oklch(.86 .11 190)); isolation: isolate; }
.hero-mesh, .support-mesh { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; }
.orb { position: absolute; border-radius: 50%; filter: blur(60px); animation: float 11s ease-in-out infinite; }
.orb-one { width: 700px; height: 700px; left: -190px; bottom: -380px; background: radial-gradient(circle, oklch(.8 .16 340 / .88), transparent 65%); }
.orb-two { width: 620px; height: 620px; right: -110px; top: -330px; background: radial-gradient(circle, oklch(.86 .15 160 / .8), transparent 65%); animation-duration: 14s; animation-direction: reverse; }
.shine { position: absolute; inset: -15%; background: linear-gradient(112deg, transparent 40%, rgba(255,255,255,.38) 47%, transparent 54%); transform: translateX(-35%); animation: shine 10s ease-in-out infinite; }
.grain { position: absolute; inset: 0; opacity: .12; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; }
.hero-content { position: relative; z-index: 2; max-width: 690px; }
.hero-content .eyebrow { display: flex; align-items: center; gap: 9px; }
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: oklch(.45 .16 160); box-shadow: 0 0 0 5px oklch(.7 .16 160 / .22); }
.hero h1 { margin: 0; font-size: clamp(58px, 6vw, 88px); line-height: .89; letter-spacing: -.035em; font-weight: 800; }
.hero h1 > span { white-space: nowrap; }
h1 em, h2 em, footer em { font-family: var(--serif); font-weight: 400; letter-spacing: 0; }
.hero-copy { max-width: 590px; margin: 30px 0 32px; font-size: 18px; font-weight: 500; line-height: 1.55; }
.hero-actions { display: flex; align-items: center; gap: 28px; }
.text-link { font-size: 14px; font-weight: 700; display: inline-flex; gap: 12px; border-bottom: 1px solid rgba(34, 23, 51, .5); padding-bottom: 3px; }
.trust-row { margin-top: 50px; padding-top: 22px; display: flex; gap: 28px; border-top: 1px solid rgba(34,23,51,.2); font-size: 12px; font-weight: 600; }
.trust-row span:not(:first-child)::before { content: "✓"; margin-right: 7px; }
.hero-product { position: relative; height: 600px; }
.product-aura { display: none; }
.product-card { position: absolute; z-index: 2; width: 330px; height: 425px; left: 50%; top: 49%; transform: translate(-50%,-50%) rotate(7deg); padding: 30px; border: 1px solid rgba(255,255,255,.85); border-radius: 24px; color: white; background: linear-gradient(145deg, oklch(.28 .06 300), oklch(.18 .04 300)); box-shadow: 0 45px 80px rgba(29, 16, 46, .38), inset 0 1px 0 rgba(255,255,255,.25); overflow: hidden; }
.product-card::after { content: ""; position: absolute; inset: -40%; background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.28) 49%, transparent 55%); transform: translateX(-30%); }
.floating-card { animation: productFloat 6s ease-in-out infinite; }
/* Generic placeholder while final product imagery is decided — a quiet glass
   panel that makes no product claims. */
.product-placeholder { position: absolute; z-index: 2; left: 50%; top: 47%; transform: translate(-50%,-50%); width: min(400px, 78%); aspect-ratio: 4 / 5; display: grid; place-content: center; justify-items: center; gap: 14px; border: 1.5px dashed rgba(255,255,255,.85); border-radius: 26px; background: rgba(255,255,255,.3); backdrop-filter: blur(14px); color: var(--ink-soft); box-shadow: 0 25px 60px rgba(34, 20, 55, .12); }
.product-placeholder svg { width: 44px; height: 44px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; opacity: .55; }
.product-placeholder span { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .6; }
.product-card-top, .product-card-bottom { position: relative; z-index: 1; display: flex; justify-content: space-between; font-size: 10px; font-weight: 700; letter-spacing: .15em; }
.product-card-top svg { width: 24px; fill: none; stroke: white; }
.product-card-center { position: relative; z-index: 1; margin-top: 105px; }
.product-card-center p { margin: 0 0 6px; font: italic 20px var(--serif); }
.product-card-center h2 { margin: 0; font-size: 40px; letter-spacing: -.05em; }
.product-card-center span { font-size: 12px; opacity: .68; }
.product-card-bottom { position: absolute; left: 30px; right: 30px; bottom: 28px; letter-spacing: 0; opacity: .65; }
.vial { position: absolute; z-index: 3; width: 78px; height: 138px; border-radius: 12px 12px 20px 20px; background: linear-gradient(90deg, rgba(255,255,255,.75), rgba(235,224,249,.82) 45%, rgba(255,255,255,.55)); border: 1px solid rgba(255,255,255,.9); box-shadow: 0 25px 45px rgba(41,24,61,.25), inset 8px 0 15px rgba(255,255,255,.7); backdrop-filter: blur(12px); }
.vial::before { content: ""; position: absolute; height: 30px; left: -3px; right: -3px; top: -20px; border-radius: 8px 8px 4px 4px; background: linear-gradient(#cdc3d4, #8e8398); border-top: 7px solid #eee8f3; }
.vial::after { content: "WEEKLY"; position: absolute; left: 8px; right: 8px; top: 48px; padding: 17px 0; text-align: center; background: rgba(255,255,255,.75); font-size: 7px; font-weight: 800; letter-spacing: .12em; }
.vial span { position: absolute; z-index: 2; top: 58px; left: 0; right: 0; text-align: center; font: italic 20px var(--serif); }
.vial-left { left: 8%; bottom: 50px; transform: rotate(-12deg); }
.vial-right { right: 7%; top: 65px; transform: rotate(13deg) scale(.82); }
.glass-stat { position: absolute; z-index: 4; display: flex; flex-direction: column; padding: 15px 20px; border-radius: 16px; border: 1px solid rgba(255,255,255,.7); background: rgba(255,255,255,.32); backdrop-filter: blur(18px); box-shadow: 0 15px 30px rgba(34,20,55,.1); }
.glass-stat strong { font-size: 18px; }
.glass-stat span { font-size: 10px; font-weight: 600; }
.glass-stat-one { right: 4%; bottom: 110px; }
.glass-stat-two { left: 3%; top: 100px; }
.hero-footnote { position: absolute; bottom: 28px; left: clamp(30px, 6vw, 90px); font-size: 9px; max-width: 590px; opacity: .6; }

.proof-strip { max-width: 1200px; margin: 0 auto; min-height: 190px; padding: 52px 32px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.proof-strip > div { font-size: 26px; font-weight: 700; letter-spacing: -.03em; }
.proof-strip em { font: italic 30px var(--serif); }
.proof-strip ul { display: flex; gap: 34px; list-style: none; margin: 0; padding: 0; font-size: 12px; font-weight: 600; }
.proof-strip li { white-space: nowrap; }
.proof-strip li span { color: oklch(.58 .08 300); margin-right: 8px; font: 10px ui-monospace, monospace; }

.section-heading { max-width: 760px; margin-bottom: 64px; }
.section-heading h2, .process h2, .support-copy h2, .eligibility-copy h2, .faq-heading h2 { margin: 0; font-size: clamp(48px, 6vw, 82px); line-height: .96; letter-spacing: -.04em; }
.section-heading > p:last-child { max-width: 570px; margin: 22px 0 0; font-size: 16px; line-height: 1.6; color: var(--ink-soft); }
.treatment-layout { display: grid; grid-template-columns: .8fr 1.4fr; gap: 24px; }
.treatment-tabs { display: flex; flex-direction: column; gap: 10px; }
.treatment-tab { width: 100%; min-height: 115px; padding: 22px; display: grid; grid-template-columns: 38px 1fr auto; gap: 10px; align-items: center; text-align: left; border: 1px solid var(--line); border-radius: 20px; background: rgba(255,255,255,.8); transition: .3s; }
.treatment-tab.active { color: white; border-color: var(--ink); background: var(--ink); box-shadow: var(--shadow); }
.tab-index { align-self: start; font: 10px ui-monospace, monospace; opacity: .6; }
.tab-copy { display: flex; flex-direction: column; gap: 7px; }
.tab-copy strong { font-size: 17px; }
.tab-copy small { opacity: .65; }
.tab-arrow { font-size: 20px; }
.treatment-note { margin-top: auto; display: flex; gap: 14px; padding: 18px; font-size: 12px; }
.treatment-note p { margin: 0; line-height: 1.5; }
.mini-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: oklch(.7 .16 250 / .14); color: oklch(.48 .16 250); }
.treatment-visual { min-height: 580px; }
.treatment-panel { position: relative; height: 100%; min-height: 580px; border-radius: 26px; overflow: hidden; background: white; border: 1px solid var(--line); }
.treatment-panel[hidden] { display: none; }
.panel-gradient { position: absolute; inset: 0 45% 0 0; }
.panel-orchid { background: linear-gradient(155deg, oklch(.86 .07 310), oklch(.79 .16 340)); }
.panel-mint { background: linear-gradient(155deg, oklch(.88 .07 200), oklch(.75 .15 160)); }
.treatment-bottle { position: absolute; z-index: 2; width: 150px; height: 330px; left: 22%; top: 50%; transform: translate(-50%,-50%) rotate(-5deg); border-radius: 25px 25px 34px 34px; background: linear-gradient(90deg, rgba(255,255,255,.7), rgba(246,241,250,.95) 48%, rgba(222,208,236,.72)); border: 1px solid rgba(255,255,255,.9); box-shadow: 0 35px 65px rgba(50,26,73,.25), inset 12px 0 20px rgba(255,255,255,.8); }
.bottle-cap { position: absolute; top: -70px; left: 9px; right: 9px; height: 80px; border-radius: 17px 17px 7px 7px; background: repeating-linear-gradient(90deg, #cac2ce 0 5px, #aaa0b2 5px 8px); border-top: 12px solid #ebe7ee; }
.bottle-label { position: absolute; left: 9px; right: 9px; top: 82px; padding: 22px 12px 18px; display: flex; flex-direction: column; text-align: center; border: 1px solid rgba(255,255,255,.8); background: rgba(255,255,255,.67); backdrop-filter: blur(8px); }
.bottle-label span { font-size: 8px; font-weight: 800; letter-spacing: .18em; }
.bottle-label strong { margin: 10px 0; font-size: 24px; letter-spacing: -.05em; }
.bottle-label small { font-size: 7px; line-height: 1.5; opacity: .6; }
.panel-copy { position: absolute; left: 55%; right: 7%; top: 50%; transform: translateY(-50%); }
.pill { display: inline-flex; padding: 7px 12px; border-radius: 99px; background: oklch(.7 .18 340 / .13); color: oklch(.48 .15 340); font-size: 10px; font-weight: 700; }
.panel-copy h3 { margin: 22px 0 15px; font-size: 32px; line-height: 1.05; letter-spacing: -.04em; }
.panel-copy p { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.6; }
.panel-meta { margin-top: 48px; padding-top: 18px; display: flex; justify-content: space-between; border-top: 1px solid var(--line); font-size: 11px; }
.panel-meta strong { font-size: 16px; }

.process { display: grid; grid-template-columns: .75fr 1.25fr; gap: 90px; }
.process-intro { position: sticky; top: 130px; align-self: start; }
.process-intro p:not(.eyebrow) { max-width: 420px; margin: 24px 0 28px; line-height: 1.6; color: var(--ink-soft); }
.process-steps { display: grid; gap: 22px; }
.step-card { position: relative; padding: 24px; border-radius: 26px; border: 1px solid var(--line); background: white; }
.step-number { position: absolute; z-index: 2; top: 38px; left: 38px; font: 10px ui-monospace, monospace; }
.step-visual { height: 300px; margin-bottom: 25px; border-radius: 18px; overflow: hidden; }
.step-card h3 { margin: 0 0 8px; font-size: 23px; letter-spacing: -.03em; }
.step-card > p { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.55; }
.quiz-visual { padding: 72px 42px 30px; background: linear-gradient(145deg, oklch(.94 .03 300), oklch(.89 .09 250)); }
.mock-label { display: block; font-size: 9px; text-transform: uppercase; letter-spacing: .14em; opacity: .55; }
.mock-question { display: block; margin: 12px 0 22px; font-size: 22px; font-weight: 700; }
.quiz-visual div { display: flex; align-items: center; gap: 12px; margin: 8px 0; padding: 13px; border-radius: 11px; background: rgba(255,255,255,.65); font-size: 12px; }
.quiz-visual i { width: 14px; height: 14px; border: 1px solid var(--ink); border-radius: 50%; }
.quiz-visual i.selected { box-shadow: inset 0 0 0 3px white; background: var(--ink); }
.clinician-visual { position: relative; background: linear-gradient(145deg, oklch(.91 .05 190), oklch(.8 .11 160)); }
.clinician-portrait { position: absolute; width: 180px; height: 220px; left: 50%; bottom: 0; transform: translateX(-50%); border-radius: 100px 100px 0 0; background: linear-gradient(160deg, #e5c6bb, #b8837b); box-shadow: inset 0 -75px 0 #5c5374; display: grid; place-items: start center; padding-top: 80px; color: rgba(255,255,255,.8); font: italic 28px var(--serif); }
.clinician-portrait::before { content: ""; position: absolute; width: 76px; height: 92px; top: 26px; border-radius: 50% 50% 45% 45%; background: #d7a294; box-shadow: 0 -20px 0 8px #583c3b; }
.online-badge { position: absolute; right: 24px; top: 24px; padding: 8px 12px; border-radius: 99px; background: rgba(255,255,255,.65); backdrop-filter: blur(10px); font-size: 9px; font-weight: 700; }
.online-badge i, .phone-head small i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #31a36e; }
.clinician-info { position: absolute; left: 20px; right: 20px; bottom: 18px; padding: 14px; display: flex; flex-direction: column; border-radius: 14px; background: rgba(255,255,255,.7); backdrop-filter: blur(14px); }
.clinician-info small { opacity: .6; font-size: 10px; }
.delivery-visual { position: relative; background: linear-gradient(145deg, oklch(.92 .04 340), oklch(.84 .1 310)); display: grid; place-items: center; }
.delivery-box { position: relative; width: 210px; height: 150px; display: grid; place-items: center; background: linear-gradient(145deg, #fbf9fd, #ddd4e6); box-shadow: 0 30px 45px rgba(49,28,67,.18); transform: rotate(-6deg) skewY(2deg); font-weight: 800; letter-spacing: .18em; }
.delivery-box::before { content: ""; position: absolute; top: 0; bottom: 0; width: 38px; background: linear-gradient(oklch(.7 .18 340), oklch(.7 .16 250)); opacity: .8; }
.delivery-box span { position: relative; z-index: 2; padding: 6px; background: rgba(255,255,255,.8); }
.delivery-tag { position: absolute; bottom: 23px; right: 22px; padding: 9px 12px; border-radius: 99px; background: var(--ink); color: white; font-size: 9px; font-weight: 700; }

.support-band { position: relative; min-height: 760px; padding: 95px clamp(28px, 7vw, 100px); overflow: hidden; display: grid; grid-template-columns: .9fr .8fr .8fr; align-items: center; gap: 50px; background: linear-gradient(140deg, oklch(.86 .1 310), oklch(.81 .13 250) 48%, oklch(.85 .11 190)); isolation: isolate; }
.support-mesh { background: radial-gradient(circle at 20% 100%, oklch(.8 .15 340 / .65), transparent 42%), radial-gradient(circle at 90% 0, oklch(.82 .14 160 / .55), transparent 40%); }
.support-copy p:not(.eyebrow) { max-width: 430px; margin-top: 24px; font-size: 16px; line-height: 1.6; }
.phone-wrap { display: flex; justify-content: center; }
.phone { width: 310px; height: 590px; padding: 16px; border: 8px solid var(--ink); border-radius: 42px; background: oklch(.985 .005 300); box-shadow: 0 40px 90px rgba(29,17,44,.3); transform: rotate(3deg); }
.phone-bar { display: flex; justify-content: space-between; padding: 4px 8px 12px; font-size: 9px; }
.phone-bar i { width: 66px; height: 17px; margin-right: 80px; margin-top: -5px; border-radius: 20px; background: var(--ink); }
.phone-head { margin: 0 -2px 22px; padding: 10px; display: grid; grid-template-columns: 36px 1fr auto; gap: 8px; align-items: center; border-bottom: 1px solid var(--line); }
.avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: white; background: linear-gradient(145deg, #6f4f54, #d69b8f); font-size: 10px; }
.phone-head strong, .phone-head small { display: block; font-size: 10px; }
.phone-head small { margin-top: 2px; opacity: .6; }
.message { max-width: 82%; margin: 12px 0; padding: 12px; border-radius: 14px; font-size: 10px; line-height: 1.45; }
.received { background: white; box-shadow: 0 5px 18px rgba(38,20,57,.07); border-bottom-left-radius: 4px; }
.sent { margin-left: auto; color: white; background: var(--ink); border-bottom-right-radius: 4px; }
.phone-input { margin-top: 120px; padding: 7px 7px 7px 12px; display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--line); border-radius: 99px; color: var(--ink-soft); font-size: 9px; }
.phone-input button { border: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: white; }
.support-points { display: grid; gap: 20px; }
.support-points > div { padding: 20px; display: grid; grid-template-columns: 34px 1fr; gap: 14px; border-radius: 17px; border: 1px solid rgba(255,255,255,.6); background: rgba(255,255,255,.28); backdrop-filter: blur(18px); }
.support-points > div > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.55); }
.support-points p { margin: 0; font-size: 12px; line-height: 1.5; }

.pricing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.price-card { position: relative; overflow: hidden; padding: 38px; border-radius: 26px; clip-path: inset(0 round 26px); border: 1px solid var(--line); background: white; }
.price-card.featured { color: white; background: var(--ink); border-color: var(--ink); }
.featured-glow { position: absolute; width: 380px; height: 380px; right: -180px; top: -220px; border-radius: 50%; background: radial-gradient(circle, oklch(.7 .16 250 / .7), transparent 65%); filter: blur(20px); }
.price-top { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; font-size: 11px; }
.price-tag { padding: 7px 11px; border-radius: 99px; font-weight: 700; }
.price-tag.orchid { color: oklch(.48 .16 340); background: oklch(.7 .18 340 / .15); }
.price-tag.iris { color: white; background: oklch(.7 .16 250 / .3); }
.price { position: relative; z-index: 1; margin: 45px 0 16px; display: flex; align-items: flex-start; }
.price sup { font-size: 24px; font-weight: 700; margin-top: 12px; }
.price strong { font-size: 76px; line-height: .9; letter-spacing: -.065em; }
.price > span { align-self: flex-end; margin-left: 8px; font-size: 12px; opacity: .6; }
.price-card > p { max-width: 420px; min-height: 45px; font-size: 14px; line-height: 1.5; opacity: .7; }
.price-card ul { margin: 30px 0; padding: 26px 0; list-style: none; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; gap: 15px; font-size: 11px; }
.featured ul { border-color: rgba(255,255,255,.18); }
.price-card li::before { content: "✓"; margin-right: 8px; }
.price-card .button { width: 100%; }
.pricing-note { margin: 18px 8px 0; font-size: 10px; color: var(--ink-soft); }

.eligibility { position: relative; overflow: hidden; padding: 95px clamp(28px, 7vw, 100px); display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: center; background: linear-gradient(145deg, oklch(.23 .05 300), oklch(.17 .035 300)); color: white; }
.eligibility::after { content: ""; position: absolute; width: 700px; height: 700px; left: -280px; bottom: -430px; border-radius: 50%; background: radial-gradient(circle, oklch(.7 .18 340 / .45), transparent 68%); filter: blur(25px); }
.eligibility-copy { position: relative; z-index: 1; }
.eligibility-copy > p:not(.eyebrow) { margin: 25px 0; max-width: 400px; line-height: 1.6; opacity: .72; }
.privacy-note { display: flex; align-items: center; gap: 10px; font-size: 11px; opacity: .7; }
.quiz-card { position: relative; z-index: 1; min-height: 500px; padding: 35px; border-radius: 25px; background: white; color: var(--ink); }
.quiz-progress { display: grid; grid-template-columns: auto 120px; justify-content: space-between; align-items: center; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.quiz-progress > div { height: 3px; background: var(--line); }
.quiz-progress i { display: block; height: 100%; width: 33.333%; background: linear-gradient(90deg, var(--orchid), var(--iris)); transition: width .35s; }
.quiz-step { display: none; border: 0; padding: 48px 0 0; margin: 0; }
.quiz-step.active { display: block; }
.quiz-step legend { margin-bottom: 25px; font-size: 27px; font-weight: 700; line-height: 1.1; letter-spacing: -.035em; }
.quiz-step label:not(.select-label) { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; min-height: 62px; margin: 9px 0; padding: 0 18px; border: 1px solid var(--line); border-radius: 14px; font-size: 13px; font-weight: 600; transition: .2s; }
.quiz-step label:hover, .quiz-step label:has(input:checked) { border-color: var(--iris); background: oklch(.7 .16 250 / .06); }
.quiz-step input { position: absolute; opacity: 0; }
.quiz-step label i { font-style: normal; font-size: 17px; }
.select-label { position: relative; display: block; margin-bottom: 16px; }
.select-label select { width: 100%; height: 62px; padding: 0 18px; appearance: none; border: 1px solid var(--line); border-radius: 14px; background: var(--mist); }
.select-label i { position: absolute; right: 18px; top: 20px; }
.quiz-submit { width: 100%; }
.quiz-back { position: absolute; left: 35px; bottom: 25px; border: 0; background: transparent; font-size: 11px; font-weight: 700; }
.quiz-result { display: none; padding-top: 70px; text-align: center; }
.quiz-result.active { display: block; }
.result-icon { width: 56px; height: 56px; margin: 0 auto 20px; display: grid; place-items: center; border-radius: 50%; background: oklch(.7 .16 160 / .18); color: oklch(.45 .15 160); font-size: 24px; }
.quiz-result h3 { font-size: 28px; margin: 0; }
.quiz-result p { margin: 15px auto 25px; max-width: 360px; color: var(--ink-soft); font-size: 13px; line-height: 1.5; }

.faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: 90px; }
.faq-heading { position: sticky; top: 130px; align-self: start; }
.accordion article { border-bottom: 1px solid var(--line); }
.accordion button { width: 100%; min-height: 86px; padding: 0; border: 0; background: none; display: flex; justify-content: space-between; align-items: center; text-align: left; font-size: 16px; font-weight: 700; }
.accordion button i { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; font-style: normal; font-size: 18px; transition: transform .3s; }
.accordion button[aria-expanded="true"] i { transform: rotate(45deg); }
.accordion article > div { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s; }
.accordion article > div > p { overflow: hidden; margin: 0; max-width: 620px; color: var(--ink-soft); font-size: 13px; line-height: 1.65; }
.accordion article.open > div { grid-template-rows: 1fr; }
.accordion article.open > div > p { padding-bottom: 28px; }

footer { margin-top: 20px; padding: 80px max(32px, calc((100vw - 1200px)/2)) 26px; background: var(--ink); color: white; }
.footer-main { display: grid; grid-template-columns: 1fr 1.5fr; gap: 80px; padding-bottom: 70px; }
.footer-brand p { margin: 28px 0 0; font-size: 35px; line-height: 1; font-weight: 700; letter-spacing: -.04em; }
.footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.footer-links div { display: flex; flex-direction: column; gap: 12px; }
.footer-links strong { margin-bottom: 8px; font-size: 10px; text-transform: uppercase; letter-spacing: .14em; opacity: .45; }
.footer-links a { font-size: 12px; opacity: .8; }
.footer-links a:hover { opacity: 1; }
.medical-disclaimer { padding: 28px 0; border-top: 1px solid rgba(255,255,255,.14); border-bottom: 1px solid rgba(255,255,255,.14); }
.medical-disclaimer strong { display: block; margin-bottom: 7px; font-size: 10px; text-transform: uppercase; letter-spacing: .12em; }
.medical-disclaimer p { margin: 0; max-width: 1000px; font-size: 9px; line-height: 1.65; opacity: .5; }
.footer-bottom { padding-top: 25px; display: flex; justify-content: space-between; font-size: 10px; opacity: .45; }

.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: none; }
@keyframes float { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(35px,-22px) scale(1.12); } }
@keyframes shine { 0%,55%,100% { transform: translateX(-40%); } 75% { transform: translateX(40%); } }
@keyframes productFloat { 0%,100% { transform: translate(-50%,-50%) rotate(7deg) translateY(0); } 50% { transform: translate(-50%,-50%) rotate(5deg) translateY(-12px); } }

@media (max-width: 1000px) {
  .desktop-nav, .login-link { display: none; }
  .menu-button { display: grid; gap: 5px; width: 40px; height: 40px; place-content: center; border: 0; border-radius: 50%; background: var(--mist); }
  .menu-button span { display: block; width: 17px; height: 1px; background: var(--ink); transition: .2s; }
  .menu-button[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
  .menu-button[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }
  .mobile-menu { position: fixed; top: 78px; left: 0; right: 0; padding: 25px; border-radius: 22px; background: rgba(255,255,255,.96); box-shadow: var(--shadow); }
  .mobile-menu.open { display: flex; flex-direction: column; gap: 20px; }
  .hero { grid-template-columns: 1fr; min-height: auto; padding-top: 145px; }
  .hero-content { max-width: 760px; }
  .hero-product { margin-top: 30px; }
  .trust-row { max-width: 650px; }
  .proof-strip { flex-direction: column; gap: 30px; align-items: flex-start; }
  .process { grid-template-columns: 1fr; }
  .process-intro, .faq-heading { position: static; }
  .process-steps { grid-template-columns: repeat(3, 1fr); }
  .step-visual { height: 220px; }
  .quiz-visual { padding: 55px 18px 20px; }
  .mock-question { font-size: 17px; }
  .clinician-portrait { transform: translateX(-50%) scale(.8); transform-origin: bottom; }
  .support-band { grid-template-columns: 1fr 1fr; }
  .support-points { grid-column: 1 / -1; grid-template-columns: repeat(3,1fr); }
  .eligibility { gap: 40px; }
}

@media (max-width: 760px) {
  .section-shell { width: calc(100% - 16px); border-radius: 24px; clip-path: inset(0 round 24px); }
  .section-space { padding: 90px 20px; }
  .site-header { top: 9px; width: calc(100% - 20px); }
  .site-header .button-small { display: none; }
  .hero { padding: 125px 24px 85px; }
  .hero h1 { font-size: clamp(54px, 17vw, 78px); }
  .hero h1 > span { white-space: normal; }
  .hero-copy { font-size: 16px; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 20px; }
  .trust-row { flex-wrap: wrap; gap: 12px 18px; }
  .hero-product { height: 500px; transform: scale(.9); margin-inline: -30px; }
  .product-placeholder { width: min(300px, 80%); }
  .product-card-center { margin-top: 88px; }
  .hero-footnote { left: 24px; right: 24px; bottom: 20px; }
  .proof-strip { padding: 45px 22px; }
  .proof-strip ul { flex-direction: column; gap: 12px; }
  .section-heading h2, .process h2, .support-copy h2, .eligibility-copy h2, .faq-heading h2 { font-size: 48px; }
  .treatment-layout, .process, .pricing-grid, .eligibility, .faq { grid-template-columns: 1fr; }
  .treatment-visual { min-height: 650px; }
  .treatment-panel { min-height: 650px; }
  .panel-gradient { inset: 0 0 48% 0; }
  .treatment-bottle { left: 50%; top: 27%; transform: translate(-50%,-50%) rotate(-5deg) scale(.8); }
  .panel-copy { left: 24px; right: 24px; top: auto; bottom: 30px; transform: none; }
  .process-steps { grid-template-columns: 1fr; }
  .step-visual { height: 280px; }
  .support-band { padding: 80px 24px; grid-template-columns: 1fr; }
  .phone { transform: none; }
  .support-points { grid-column: auto; grid-template-columns: 1fr; }
  .price-card { padding: 28px; }
  .price-card ul { grid-template-columns: 1fr; }
  .eligibility { padding: 75px 24px; }
  .quiz-card { min-height: 520px; padding: 26px; }
  .quiz-back { left: 26px; }
  .footer-main { grid-template-columns: 1fr; gap: 60px; }
  .footer-links { grid-template-columns: 1fr 1fr; }
  .footer-bottom { flex-direction: column; gap: 8px; }
}

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

/* Chat bubble theming (meridian-widget.js reads these, falling back to its
   own blue when a site sets nothing). The gradient is oversized and its
   position animated, which moves colour through the bubble without ever
   re-rasterising it — cheaper and smoother than animating the stops. The
   widget also hard-disables this under prefers-reduced-motion. */
:root {
  --mw-bubble-grad: linear-gradient(120deg, var(--orchid), var(--iris), var(--mint), var(--iris), var(--orchid));
  --mw-bubble-grad-size: 320% 320%;
  --mw-bubble-anim: mwBubbleDrift 14s ease-in-out infinite;
  --mw-bubble-shadow: 0 10px 30px oklch(.7 .16 250 / .38);
}

/* Split-section headings live in ~390-560px columns; at the shared 82px they
   wrapped to 3-4 broken lines ("From first click" / "click" alone). 50px is
   the largest size at which each heading's intended <br> break fits its
   column (Bricolage ~0.37em/char; worst line "to feeling different." = 21ch
   x 0.37 x 50px = 388px in a 392px column). Full-width .section-heading h2
   keeps the 82px display scale — the size step IS the hierarchy. */
.process-intro h2, .support-copy h2, .eligibility-copy h2, .faq-heading h2 { font-size: clamp(38px, 3.6vw, 50px); }

/* Phone-width sizes are set per heading so every intended <br> break holds in
   a ~311-335px column (measured nowrap widths at 375px, scaled as vw so the
   fit survives down to 320px). The flat 48px above broke "One monthly price."
   and "could be right for you." mid-phrase. */
@media (max-width: 760px) {
  .section-heading h2 { font-size: min(48px, 10.5vw); }
  .process-intro h2 { font-size: min(48px, 12.5vw); }
  .support-copy h2 { font-size: min(44px, 10vw); }
  .eligibility-copy h2 { font-size: min(44px, 9.2vw); }
  .faq-heading h2 { font-size: min(48px, 11.5vw); }
}