/* 9well him & her — 9wellclinic.com — style v3 (2026-09-17)
   Chuẩn trình bày kiểu Hims/Ro: ảnh người thật lớn, thẻ bento bo góc 20px, nút pill,
   thanh tin cậy, thẻ liệu trình kiểu sản phẩm, header tối giản, sticky CTA mobile.
   Palette 9well: indigo #1F183E · ember #EE4421 · violet #4F2780 · off-white #F6F4F4
   UX-LOG 2026-09-17: v3 thay toàn bộ lớp trình bày; nội dung, URL, canonical giữ nguyên. */
:root{
  --ink:#140E2B; --indigo:#1F183E; --ember:#EE4421; --violet:#4F2780;
  --bg:#F6F4F4; --bg-2:#FFFFFF; --bg-3:#ECE8E6; --bg-4:#E4DFDC;
  --line:#E3DEDA; --line-strong:#CFC8C3;
  --fg:#17122B; --fg-2:#4A4260; --fg-3:#6A6284;
  --accent:#E0421C; --accent-soft:#FBEBE6;
  --violet-fg:#5B2E92; --violet-soft:#EFE8F7;
  --ok:#2F7A66; --ok-soft:#E4F0EC;
  --warn:#9A6410; --warn-soft:#FAF0DD; --amber:#B7791F;
  --shadow:0 1px 2px rgba(20,14,43,.04), 0 10px 30px -14px rgba(20,14,43,.16);
  --r:20px; --r-sm:12px; --maxw:1200px;
  --f-body:"Be Vietnam Pro", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-display:"Be Vietnam Pro", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-mono:ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#120D25; --bg-2:#1B1435; --bg-3:#241C42; --bg-4:#2C2350; --line:#302748; --line-strong:#463A63;
    --fg:#F2EEF8; --fg-2:#C3BBD6; --fg-3:#9A92B3;
    --accent:#FF7A55; --accent-soft:#2E1A22;
    --violet-fg:#C4A0F0; --violet-soft:#241A3A;
    --ok:#6FCBB2; --ok-soft:#142A26;
    --warn:#E0B060; --warn-soft:#2A2113; --amber:#E0B060;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -16px rgba(0,0,0,.7);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#120D25; --bg-2:#1B1435; --bg-3:#241C42; --bg-4:#2C2350; --line:#302748; --line-strong:#463A63;
  --fg:#F2EEF8; --fg-2:#C3BBD6; --fg-3:#9A92B3;
  --accent:#FF7A55; --accent-soft:#2E1A22;
  --violet-fg:#C4A0F0; --violet-soft:#241A3A;
  --ok:#6FCBB2; --ok-soft:#142A26;
  --warn:#E0B060; --warn-soft:#2A2113; --amber:#E0B060;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -16px rgba(0,0,0,.7);
  color-scheme:dark;
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--fg); font-family:var(--f-body); font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased}
img{max-width:100%; height:auto; display:block}
h1,h2,h3,h4{font-family:var(--f-display); font-weight:600; line-height:1.12; letter-spacing:-.025em; text-wrap:balance; margin:0}
a{color:inherit}
button{font:inherit; color:inherit; cursor:pointer}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:6px}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important; scroll-behavior:auto!important}}
.skip{position:absolute; left:-9999px; top:0; background:var(--accent); color:#fff; padding:10px 16px; z-index:100; border-radius:0 0 8px 0}
.skip:focus{left:0}
.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:24px}
.mono{font-family:var(--f-mono); font-variant-numeric:tabular-nums}
.eyebrow{font-family:var(--f-body); font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-3); margin:0}

/* ---------- exit bar (privacy) ---------- */
#exitbar{position:sticky; top:0; z-index:60; background:var(--ink); color:#EDE7F5; font-size:12.5px; padding-top:env(safe-area-inset-top,0px)}
:root[data-theme="dark"] #exitbar{background:#0C0818}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) #exitbar{background:#0C0818}}
#exitbar .wrap{display:flex; align-items:center; gap:14px; justify-content:space-between; padding-block:6px; flex-wrap:nowrap}
#exitbar .privnote{display:flex; align-items:center; gap:7px; color:#C4BAD9; min-width:0}
#exitbar .privnote span{min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
.exitbtn{flex-shrink:0; background:var(--ember); color:#fff; border:0; border-radius:999px; padding:8px 14px; min-height:36px; font-size:12.5px; font-weight:600}
.exitbtn:hover{background:#ff5a33}

/* ---------- header ---------- */
header.site{position:sticky; top:48px; z-index:50; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:saturate(1.4) blur(10px); -webkit-backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--line)}
header.site .wrap{display:flex; align-items:center; gap:14px; padding-block:12px}
.brand{display:flex; align-items:baseline; gap:8px; text-decoration:none; flex-shrink:0}
.brand b{font-family:var(--f-display); font-size:26px; font-weight:700; letter-spacing:-.04em}
.brand .dot{width:10px; height:10px; border-radius:50%; background:linear-gradient(135deg,var(--ember),var(--violet)); align-self:center}
.brand span{font-size:10.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-3)}
nav.main{display:flex; gap:2px; margin-left:auto}
nav.main a{text-decoration:none; font-size:14.5px; font-weight:500; color:var(--fg-2); padding:10px 13px; border-radius:999px; white-space:nowrap}
nav.main a:hover{background:var(--bg-3); color:var(--fg)}
nav.main a[aria-current="page"]{color:var(--fg); background:var(--bg-3)}
.navtools{display:flex; gap:8px; align-items:center}
.icobtn{background:transparent; border:1px solid var(--line-strong); border-radius:999px; width:44px; height:44px; display:grid; place-items:center; color:var(--fg-2)}
.icobtn:hover{border-color:var(--fg-3); color:var(--fg)}
#menuBtn{display:none}
.menu{display:none}

/* ---------- buttons (pill) ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; border:1px solid transparent; border-radius:999px; padding:14px 22px; min-height:48px; font-size:15px; font-weight:600; background:var(--accent); color:#fff; transition:transform .12s, filter .12s, background .12s}
.btn:hover{filter:brightness(1.06); transform:translateY(-1px)}
.btn.ghost{background:var(--bg-2); border-color:var(--line-strong); color:var(--fg)}
.btn.ghost:hover{background:var(--bg-3); filter:none}
.btn.dark{background:var(--indigo); color:#fff}
.btn.sm{padding:10px 16px; min-height:44px; font-size:14px}
.btn.lg{padding:16px 28px; min-height:54px; font-size:16px}
.btn.wide{width:100%}

/* ---------- trust strip ---------- */
.trust{display:flex; flex-wrap:wrap; gap:8px 22px; margin:0; padding:0; list-style:none; font-size:13.5px; color:var(--fg-2)}
.trust li{display:flex; align-items:center; gap:7px}
.trust li::before{content:""; width:16px; height:16px; border-radius:50%; background:var(--ok-soft); border:1.5px solid var(--ok); flex-shrink:0; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F7A66' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 13l4 4L19 7'/></svg>"); background-size:10px; background-position:center; background-repeat:no-repeat}

/* ---------- hero (home) ---------- */
.hero{padding-block:36px 8px}
.hero-top{display:flex; align-items:flex-end; justify-content:space-between; gap:28px; margin-bottom:22px}
.hero h1{font-size:clamp(36px,5.2vw,64px); max-width:14ch}
.hero h1 em{font-style:normal; color:var(--violet-fg)}
.hero .lede{font-size:17px; color:var(--fg-2); margin:14px 0 0; max-width:54ch}
.hero .trust{max-width:300px; flex-direction:column; gap:8px; align-items:flex-start}
.bento{display:grid; grid-template-columns:1.25fr .75fr; gap:14px}
.tile{position:relative; display:block; text-decoration:none; color:#fff; border-radius:var(--r); overflow:hidden; min-height:380px; background:var(--indigo); isolation:isolate}
.tile img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 20%; z-index:-1; transition:transform .5s}
.tile:hover img{transform:scale(1.03)}
.tile::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,14,43,.15) 0%, rgba(20,14,43,.05) 40%, rgba(20,14,43,.78) 100%); z-index:0}
.tile .t{position:relative; z-index:1; padding:22px 24px; display:flex; flex-direction:column; height:100%; min-height:inherit; justify-content:space-between}
.tile .k{font-size:13px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; opacity:.9}
.tile h2{font-size:clamp(24px,2.6vw,34px); color:#fff; max-width:16ch; margin-top:6px}
.tile h2 em{font-style:normal; color:#FFB39B}
.tile p{margin:8px 0 0; font-size:14.5px; color:#E8E2F3; max-width:40ch}
.tile .go{display:inline-flex; align-items:center; gap:8px; background:#fff; color:var(--ink); border-radius:999px; padding:11px 18px; font-size:14px; font-weight:600; width:max-content; margin-top:16px}
.tile.sm{min-height:240px}
.bento-col{display:grid; gap:14px}
.symptoms{display:grid; gap:10px; grid-template-columns:repeat(4,1fr); margin-top:14px}
.symp{display:flex; align-items:center; justify-content:space-between; gap:12px; text-decoration:none; background:var(--bg-2); border:1px solid var(--line); border-radius:16px; padding:16px 18px; font-size:15px; font-weight:600; line-height:1.3; color:var(--fg); min-height:64px; transition:border-color .15s, transform .15s, box-shadow .15s}
.symp:hover{border-color:var(--fg-3); transform:translateY(-2px); box-shadow:var(--shadow)}
.symp span{display:block; font-size:12px; color:var(--fg-3); font-weight:500; margin-top:2px}
.symp::after{content:"→"; font-weight:600; color:var(--fg-3); flex-shrink:0}
.triage-head{display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-top:34px}
.triage-head h2{font-size:clamp(22px,2.4vw,30px)}
.triage-head a{font-size:14.5px; font-weight:600; color:var(--fg-2)}

/* ---------- sections ---------- */
section{padding-block:56px}
.sechead{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:28px; flex-wrap:wrap}
.sechead h1,.sechead h2{font-size:clamp(28px,3.6vw,44px); margin-top:10px; max-width:22ch}
.sechead p.sub{margin:12px 0 0; color:var(--fg-2); font-size:16px; max-width:64ch}
.band{background:var(--bg-2); border-block:1px solid var(--line)}
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.stat b{display:block; font-size:34px; font-weight:700; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.stat span{font-size:14px; color:var(--fg-2); line-height:1.4; display:block; margin-top:4px}

/* evidence badge */
.ev{display:inline-flex; align-items:center; gap:7px; font-family:var(--f-mono); font-size:11px; font-weight:600; letter-spacing:.06em; background:var(--bg-3); border-radius:999px; padding:4px 10px 4px 8px}
.ev .bars{display:flex; gap:2px}
.ev .bars i{width:4px; height:11px; border-radius:1px; background:var(--line-strong); display:block}
.ev.A .bars i:nth-child(-n+4){background:var(--ok)}
.ev.B .bars i:nth-child(-n+3){background:var(--ok)}
.ev.C .bars i:nth-child(-n+2){background:var(--amber)}
.ev.D .bars i:nth-child(-n+1){background:var(--accent)}
.ev.A,.ev.B{color:var(--ok)} .ev.C{color:var(--warn)} .ev.D{color:var(--accent)}
.track{font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:4px 10px; border-radius:999px; background:var(--bg-3); color:var(--fg-2)}
.track.him{background:var(--accent-soft); color:var(--accent)}
.track.her{background:var(--violet-soft); color:var(--violet-fg)}
.track.us{background:var(--ok-soft); color:var(--ok)}

/* ---------- cards ---------- */
.cards{display:grid; gap:16px; grid-template-columns:repeat(3,1fr)}
.card{background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r); padding:20px; display:flex; flex-direction:column; gap:10px; text-decoration:none; transition:border-color .15s, transform .15s, box-shadow .15s; overflow:hidden}
a.card:hover{border-color:var(--line-strong); transform:translateY(-2px); box-shadow:var(--shadow)}
.card .thumb{margin:-20px -20px 6px; aspect-ratio:16/10; overflow:hidden; background:var(--bg-3)}
.card .thumb img{width:100%; height:100%; object-fit:cover; transition:transform .5s}
a.card:hover .thumb img{transform:scale(1.04)}
.card .top{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap}
.card h3{font-size:19px; line-height:1.25}
.card p{margin:0; font-size:14.5px; color:var(--fg-2); line-height:1.55}
.card .foot{margin-top:auto; padding-top:12px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:12.5px; color:var(--fg-3)}
.card.soon{opacity:.72}
.card .num{font-size:13px; font-weight:700; color:var(--accent); letter-spacing:.08em}

/* steps (how it works) */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.step{background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column}
.step img{aspect-ratio:4/3; width:100%; object-fit:cover}
.step .b{padding:20px}
.step .n{font-size:12px; font-weight:700; letter-spacing:.12em; color:var(--accent)}
.step h3{font-size:20px; margin-top:6px}
.step p{margin:8px 0 0; font-size:14.5px; color:var(--fg-2); line-height:1.55}

/* ---------- library ---------- */
.libbar{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:6px}
.search{flex:1 1 280px; display:flex; align-items:center; gap:10px; background:var(--bg-2); border:1px solid var(--line-strong); border-radius:999px; padding:12px 18px}
.search input{border:0; background:transparent; outline:0; font:inherit; font-size:15px; color:var(--fg); width:100%}
.chips{display:flex; gap:8px; flex-wrap:wrap; margin:14px 0 0}
.chips:last-of-type{margin-bottom:24px}
.chip{background:var(--bg-2); border:1px solid var(--line-strong); border-radius:999px; padding:9px 16px; min-height:40px; font-size:13.5px; font-weight:500; color:var(--fg-2)}
.chip:hover{border-color:var(--fg-3); color:var(--fg)}
.chip[aria-pressed="true"]{background:var(--ink); color:#fff; border-color:var(--ink)}
.count{font-family:var(--f-mono); font-size:12.5px; color:var(--fg-3); margin:0 0 14px}

/* ---------- article ---------- */
.artwrap{display:grid; grid-template-columns:minmax(0,1fr) 250px; gap:56px; align-items:start}
article.post{max-width:70ch}
.arthero{border-radius:var(--r); overflow:hidden; aspect-ratio:16/8; margin:18px 0 22px; background:var(--bg-3)}
.arthero img{width:100%; height:100%; object-fit:cover}
.crumbs{font-size:12.5px; font-weight:500; letter-spacing:.04em; text-transform:uppercase; color:var(--fg-3); margin:0}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--fg)}
.post h1{font-size:clamp(30px,4vw,46px); margin:12px 0 0}
.byline{display:flex; gap:10px 18px; flex-wrap:wrap; align-items:center; font-size:13px; color:var(--fg-3); border-block:1px solid var(--line); padding-block:14px; margin-block:22px}
.byline b{color:var(--fg-2); font-weight:600}
.takeaway{background:var(--bg-2); border:1px solid var(--line); border-left:4px solid var(--violet-fg); border-radius:var(--r-sm); padding:20px 22px; margin-block:26px}
.takeaway h2{font-size:14px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin:0 0 10px}
.takeaway ul{margin:0; padding-left:19px; font-size:15px; color:var(--fg-2); display:grid; gap:8px}
.post h2{font-size:27px; margin:42px 0 12px; scroll-margin-top:130px}
.post h3{font-size:19px; margin:26px 0 8px}
.post p{margin:0 0 16px; color:var(--fg-2); font-size:16.5px}
.post p strong{color:var(--fg)}
.post ul,.post ol{color:var(--fg-2); padding-left:20px; margin:0 0 18px; display:grid; gap:8px}
sup a{color:var(--accent); text-decoration:none; font-family:var(--f-mono); font-size:11px; padding:0 1px}
.drill{background:var(--ok-soft); border:1px solid color-mix(in srgb, var(--ok) 45%, transparent); border-radius:var(--r); padding:22px; margin-block:26px}
.drill h3{margin:0; font-size:18px; color:var(--fg)}
.drill table{width:100%; border-collapse:collapse; font-size:14px; margin-top:12px; min-width:460px}
.drill th,.drill td{text-align:left; padding:9px 10px; border-bottom:1px solid color-mix(in srgb, var(--ok) 25%, transparent); vertical-align:top}
.drill th{font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--fg-3)}
.drill td.n{font-family:var(--f-mono); font-variant-numeric:tabular-nums; white-space:nowrap}
.scrollx{overflow-x:auto; max-width:100%; -webkit-overflow-scrolling:touch}
.redflag{background:var(--accent-soft); border:1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius:var(--r); padding:20px 22px; margin-block:26px}
.redflag h3{margin:0; font-size:17px}
.redflag ul{margin:10px 0 0; padding-left:19px; font-size:14.5px; color:var(--fg-2); display:grid; gap:6px}
.sources{margin-top:42px; padding-top:22px; border-top:1px solid var(--line)}
.sources h2{font-size:15px; font-weight:700; margin:0 0 12px}
.sources ol{font-size:13.5px; color:var(--fg-2); padding-left:20px; display:grid; gap:8px; line-height:1.5}
.faq{margin-top:38px}
.faq h2{font-size:27px; margin:0 0 14px}
.faq details{border:1px solid var(--line); border-radius:14px; padding:15px 18px; margin-bottom:8px; background:var(--bg-2)}
.faq summary{cursor:pointer; font-weight:600; font-size:15.5px; list-style:none; display:flex; justify-content:space-between; gap:12px; align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-size:20px; color:var(--fg-3); line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:10px 0 0; font-size:15px; color:var(--fg-2)}
aside.toc{position:sticky; top:140px; font-size:14px}
aside.toc .eyebrow{margin-bottom:10px; display:block}
aside.toc a{display:block; text-decoration:none; color:var(--fg-3); padding:6px 0 6px 12px; border-left:2px solid var(--line); line-height:1.4}
aside.toc a:hover{color:var(--fg)}
aside.toc a.on{color:var(--fg); border-left-color:var(--accent)}
.toc-cta{margin-top:22px; background:var(--indigo); color:#fff; border-radius:var(--r-sm); padding:18px}
.toc-cta b{display:block; font-size:15px}
.toc-cta p{margin:6px 0 12px; font-size:13px; color:#CFC4E4}
.progress{position:fixed; left:0; top:0; height:3px; background:var(--accent); width:0; z-index:70}

/* ---------- quiz ---------- */
.quiz{max-width:720px; margin-inline:auto}
.qcard{background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r); padding:28px; box-shadow:var(--shadow)}
.qsteps{display:flex; gap:4px; margin-bottom:22px}
.qsteps i{flex:1; height:4px; border-radius:2px; background:var(--line); display:block}
.qsteps i.on{background:var(--accent)}
.qcard h2{font-size:24px; margin:0 0 6px}
.qcard .qhint{font-size:14px; color:var(--fg-3); margin:0 0 20px; min-height:1px}
.opts{display:grid; gap:10px}
.opt{text-align:left; background:var(--bg); border:1.5px solid var(--line); border-radius:14px; padding:15px 18px; min-height:52px; font-size:15px; font-weight:500; line-height:1.4; transition:border-color .12s, background .12s}
.opt:hover{border-color:var(--ink); background:var(--bg-2)}
.qnav{display:flex; justify-content:space-between; align-items:center; margin-top:20px; font-size:13px; color:var(--fg-3); gap:10px}
.result h2{font-size:30px; margin:8px 0 0}
.plan{display:grid; gap:10px; margin-top:12px}
.plan .row{display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start; background:var(--bg); border:1px solid var(--line); border-radius:14px; padding:14px 16px}
.plan .row .n{font-family:var(--f-mono); font-size:12px; font-weight:700; color:var(--accent); padding-top:3px}
.plan .row b{display:block; font-size:15px}
.plan .row p{margin:3px 0 0; font-size:14px; color:var(--fg-2)}

/* ---------- tiers (product-style) ---------- */
.tiers{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:stretch}
.tier{background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r); padding:0; display:flex; flex-direction:column; overflow:hidden; position:relative}
.tier.feature{border-color:var(--ink); box-shadow:var(--shadow)}
.tier .thumb{aspect-ratio:16/10; overflow:hidden; background:var(--bg-3)}
.tier .thumb img{width:100%; height:100%; object-fit:cover}
.tier .body{padding:22px 22px 24px; display:flex; flex-direction:column; flex:1}
.tier .tag{position:absolute; top:14px; left:14px; background:#fff; color:var(--ink); font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:6px 11px; border-radius:999px; box-shadow:0 1px 3px rgba(0,0,0,.15)}
.tier.feature .tag{background:var(--ember); color:#fff}
.tier h3{font-size:24px; margin-top:0}
.tier .price{font-size:30px; font-weight:700; letter-spacing:-.03em; font-variant-numeric:tabular-nums; margin:10px 0 0}
.tier .per{font-size:13px; color:var(--fg-3); margin:2px 0 16px}
.tier ul{list-style:none; padding:0; margin:0 0 22px; display:grid; gap:9px; font-size:14.5px; color:var(--fg-2)}
.tier li{display:grid; grid-template-columns:18px 1fr; gap:9px; align-items:start}
.tier li::before{content:""; width:16px; height:16px; margin-top:4px; border-radius:50%; background:var(--ok-soft) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F7A66' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 13l4 4L19 7'/></svg>") center/10px no-repeat}
.tier .acts{margin-top:auto; display:grid; gap:8px}
.tier .safety{font-size:12.5px; color:var(--fg-3); text-align:center; margin:10px 0 0}
.tier .safety a{color:var(--fg-2)}

/* ---------- people ---------- */
.people{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.person{background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r); padding:22px}
.person .av{width:56px; height:56px; border-radius:50%; display:grid; place-items:center; font-size:19px; font-weight:700; color:#fff; background:linear-gradient(135deg,var(--ember),var(--violet)); margin-bottom:14px}
.person h3{font-size:18px}
.person .role{font-size:13px; color:var(--fg-3); margin:2px 0 10px}
.person p{margin:0; font-size:14.5px; color:var(--fg-2); line-height:1.55}

/* ---------- statement / CTA blocks ---------- */
.cta{background:var(--indigo); color:#F4F0FA; border-radius:var(--r); padding:40px 36px; display:grid; grid-template-columns:1fr auto; gap:26px; align-items:center}
.cta h2{font-size:clamp(24px,3vw,34px); color:#fff}
.cta p{margin:8px 0 0; color:#CFC4E4; font-size:15.5px; max-width:56ch}
.cta .btn{background:var(--ember); color:#fff}
.statement{position:relative; border-radius:var(--r); overflow:hidden; min-height:520px; color:#fff; isolation:isolate; display:flex; align-items:flex-end}
.statement img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-1}
.statement::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,14,43,.08), rgba(20,14,43,.82)); z-index:0}
.statement .t{position:relative; z-index:1; padding:40px}
.statement h2{font-size:clamp(32px,4.6vw,56px); color:#fff; max-width:16ch}
.statement p{margin:12px 0 0; font-size:16px; color:#E8E2F3; max-width:52ch}
.statement .acts{display:flex; gap:10px; flex-wrap:wrap; margin-top:22px}
.statement .btn.ghost{background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.4); color:#fff; backdrop-filter:blur(6px)}

/* ---------- footer ---------- */
footer.site{border-top:1px solid var(--line); padding-block:44px 48px; margin-top:20px; padding-bottom:calc(48px + env(safe-area-inset-bottom,0px)); background:var(--bg-2)}
.fgrid{display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:28px}
footer.site h4{font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-3); margin:0 0 12px}
footer.site ul{list-style:none; padding:0; margin:0; display:grid; gap:2px; font-size:14px}
footer.site a{color:var(--fg-2); text-decoration:none; display:inline-block; padding:6px 0}
footer.site a:hover{color:var(--fg)}
.disclaimer{margin-top:30px; padding-top:20px; border-top:1px solid var(--line); font-size:13px; color:var(--fg-3); line-height:1.6; max-width:84ch}

/* ---------- sticky CTA (mobile) ---------- */
.stickycta{display:none}

/* ---------- 404 ---------- */
.notfound{max-width:640px; margin-inline:auto; text-align:center; padding-block:40px}
.notfound h1{font-size:clamp(30px,4vw,44px)}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .bento{grid-template-columns:1fr 1fr}
  .symptoms{grid-template-columns:1fr 1fr}
  .cards,.tiers,.people,.steps{grid-template-columns:1fr 1fr}
  .artwrap{grid-template-columns:minmax(0,1fr); gap:0}
  aside.toc{display:none}
  .stats{grid-template-columns:1fr 1fr}
  .fgrid{grid-template-columns:1fr 1fr}
  .hero-top{flex-direction:column; align-items:flex-start}
  .hero .trust{max-width:none; flex-direction:row}
}
@media (max-width:700px){
  .wrap{padding-inline:16px}
  header.site{top:48px}
  header.site .wrap{padding-block:10px}
  nav.main{display:none}
  #menuBtn{display:grid}
  .menu{display:none; position:fixed; left:0; right:0; top:0; bottom:0; z-index:80; background:var(--bg); padding:calc(env(safe-area-inset-top,0px) + 20px) 20px 20px; flex-direction:column; gap:6px}
  .menu.open{display:flex}
  .menu a{font-size:24px; font-weight:600; text-decoration:none; padding:14px 6px; border-bottom:1px solid var(--line)}
  .menu .close{align-self:flex-end; margin-bottom:10px}
  .menu .btn{margin-top:18px}
  .navtools .btn.sm{padding:10px 14px}
  .hero{padding-block:26px 8px}
  .hero h1{font-size:clamp(32px,9vw,40px)}
  .bento{grid-template-columns:1fr}
  .tile{min-height:400px}
  .tile.sm{min-height:220px}
  .tile img{object-position:50% 12%}
  #exitbar .privnote{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:11.5px}
  #exitbar .privnote svg{vertical-align:-2px; margin-right:4px}
  .btn{white-space:nowrap}
  .navtools{gap:6px}
  .navtools .btn.sm{font-size:13px; padding:10px 12px}
  .triage-head{flex-direction:column; align-items:flex-start; gap:6px}
  .symptoms{grid-template-columns:1fr}
  .symp{min-height:56px}
  .cards,.tiers,.people,.steps{grid-template-columns:1fr}
  .cta{grid-template-columns:1fr; padding:28px 22px}
  .statement{min-height:440px}
  .statement .t{padding:24px}
  .fgrid{grid-template-columns:1fr}
  section{padding-block:40px}
  .stickycta{display:flex; position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom,0px)); z-index:55; background:var(--ink); color:#fff; border-radius:999px; padding:8px 8px 8px 18px; align-items:center; justify-content:space-between; gap:12px; box-shadow:0 10px 30px -10px rgba(0,0,0,.45)}
  .stickycta span{font-size:13.5px; font-weight:500; color:#DED7EC}
  .stickycta .btn{padding:11px 16px; min-height:44px; font-size:14px}
  body.has-sticky{padding-bottom:84px}
  footer.site a{padding:10px 0}
}