/* Semax Homepage v2 — production stylesheet
   Consolidates design tokens (colors / typography / spacing) and the
   homepage layer into a single render-blocking-minimised stylesheet.
   Source of truth: Claude Design handoff, Home Page Design Brief v1.0. */

/* ===================== TOKENS: COLOR ===================== */
:root {
  --ink: #081326;
  --ink-2: #13233d;
  --paper: #f5f8fc;
  --paper-2: #eef4fb;
  --white: #ffffff;

  --blue: #1f6feb;
  --blue-deep: #0b3a8c;
  --blue-glow: #3b8bff;
  --teal: #16b8a6;
  --amber: #f5a700;

  --line: #dbe5f1;
  --line-dk: rgba(94, 140, 200, 0.22);
  --muted: #5b6b82;
  --muted-lt: #9fb6d6;

  --rose: #e0506a;
  --green-ok: #0f9c68;
}

/* ===================== TOKENS: TYPE ===================== */
:root {
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* ===================== HOMEPAGE LAYER ===================== */
:root{
  --good:#13B87B;
  --bad:#E0506A;
  --meh:#F5A700;
  --grad-hero:radial-gradient(1100px 520px at 78% -8%, rgba(59,139,255,.20), transparent 60%), radial-gradient(800px 500px at 5% 110%, rgba(22,184,166,.12), transparent 55%), linear-gradient(180deg,#06101F,#0A1A30 60%,#0C2545);
  --grad-offer:radial-gradient(800px 400px at 80% 0%, rgba(59,139,255,.16), transparent 60%), linear-gradient(180deg,#0A1A30,#06101F);
  --grad-final:radial-gradient(900px 500px at 50% -20%, rgba(59,139,255,.22), transparent 60%), linear-gradient(180deg,#06101F,#0A1A30);
  --grad-light-down:linear-gradient(180deg,#FFFFFF,#EEF4FB);
  --grad-light-up:linear-gradient(180deg,#EEF4FB,#FFFFFF);
  --grad-cta-blue:linear-gradient(180deg,#2A7BFF,#1659C9);
  --grad-cta-amber:linear-gradient(180deg,#FBB733,#F0A500);
  --e1:0 8px 24px rgba(15,40,85,.05);
  --e2:0 16px 44px rgba(15,40,85,.10);
  --e3-light:0 26px 60px rgba(8,19,38,.22);
  --e3-dark:0 30px 70px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font-sans);background:var(--paper);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
section{padding:80px 0}
@media(max-width:860px){section{padding:72px 0}}
@media(max-width:680px){section{padding:56px 0}.wrap{padding:0 20px}}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--amber);color:#2A1C00;padding:10px 16px;border-radius:0 0 8px 0;font-weight:700;z-index:200}
.skip-link:focus{left:0}

/* ---------- type roles ---------- */
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--blue);display:block}
.eyebrow--glow{color:var(--blue-glow)}
.eyebrow--teal{color:var(--teal)}
h1,h2,h3{font-family:var(--font-display);font-weight:600;margin:0}
.h2{font-size:clamp(28px,3.4vw,40px);line-height:1.12;letter-spacing:-.012em;color:var(--ink);margin:14px 0}
.lede{font-size:19px;line-height:1.5;color:var(--muted);margin:0}
.sechead{text-align:center;max-width:680px;margin:0 auto 40px}
.sechead .lede{font-size:17.5px;color:var(--muted)}
@media(max-width:680px){.sechead{margin-bottom:28px}}
.hl-amber{background:linear-gradient(180deg,transparent 60%, rgba(245,167,0,.28) 60%)}
.hl-blue{background:linear-gradient(180deg,transparent 60%, rgba(31,111,235,.16) 60%)}

/* ---------- buttons ---------- */
.hpbtn{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:none;cursor:pointer;border-radius:13px;font-family:var(--font-sans);font-weight:700;font-size:17px;letter-spacing:.01em;color:#fff;padding:18px 34px;background:var(--grad-cta-blue);box-shadow:0 10px 26px rgba(22,89,201,.34);text-decoration:none;transition:transform 120ms ease,box-shadow 120ms ease;line-height:1;white-space:nowrap}
.hpbtn:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(22,89,201,.45)}
.hpbtn:focus-visible{outline:3px solid rgba(31,111,235,.5);outline-offset:2px}
.hpbtn--lg{font-size:19px;padding:21px 46px}
.hpbtn--amber{background:var(--grad-cta-amber);color:#2A1C00;box-shadow:0 10px 26px rgba(240,165,0,.40)}
.hpbtn--amber:hover{box-shadow:0 14px 32px rgba(240,165,0,.5)}
.hpbtn--block{display:flex;width:100%}
.hpbtn--nav{font-size:14px;padding:11px 20px;border-radius:10px}
.hpbtn .sub{font-weight:500;font-size:12.5px;opacity:.85}
.reassure{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--muted);margin-top:16px}
.reassure span:before{content:"✓ ";color:var(--good);font-weight:800}
.reassure--dark{color:var(--muted-lt)}
.cta-center{text-align:center;margin-top:38px}

/* ---------- announcement / nav / sticky ---------- */
.annc{background:var(--ink);color:#CFE0F5;font-size:13px;font-weight:600;letter-spacing:.04em;text-align:center;padding:9px 16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.annc b{color:var(--amber);font-weight:700}
.hpnav{position:sticky;top:0;z-index:50;background:rgba(245,248,252,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hpnav__in{max-width:1080px;margin:0 auto;padding:0 24px;height:62px;display:flex;align-items:center;gap:24px}
.lockup{display:flex;align-items:center;gap:9px;text-decoration:none}
.lockup .dot{width:11px;height:11px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px rgba(22,184,166,.2)}
.lockup .wm{font-family:var(--font-display);font-weight:600;font-size:23px;letter-spacing:-.02em;color:var(--ink)}
.lockup .sfx{font-size:15px;color:var(--muted);font-weight:400}
.hpnav__links{display:flex;gap:26px;margin:0 auto}
.hpnav__links a{font-size:14px;font-weight:600;color:var(--muted);text-decoration:none;transition:color 120ms ease;white-space:nowrap}
.hpnav__links a:hover{color:var(--blue)}
@media(max-width:820px){.hpnav__links{display:none}.hpnav__in{justify-content:space-between}}
.mcta{display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;background:rgba(8,19,38,.96);backdrop-filter:blur(8px);border-top:1px solid var(--line-dk);padding:11px 16px;align-items:center;gap:12px;justify-content:space-between}
.mcta .p{font-size:13px;font-weight:600;color:#fff;line-height:1.4}
.mcta .p s{color:var(--muted-lt);font-weight:500}
.mcta .hpbtn{font-size:15px;padding:13px 20px;border-radius:10px}
@media(max-width:820px){.mcta{display:flex}body{padding-bottom:74px}}

/* ---------- hero ---------- */
.hero{background:var(--grad-hero);position:relative;padding:58px 0 66px;color:#fff}
.hero:after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;background:linear-gradient(180deg,transparent,rgba(8,19,38,.9));pointer-events:none}
.hero .wrap{position:relative;z-index:1}
.hero__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
.stars{color:var(--amber);font-size:15px;letter-spacing:2px}
.rating{display:flex;align-items:center;gap:10px;margin-bottom:8px;font-size:14px;color:var(--muted-lt)}
.hero h1{font-size:clamp(34px,4.6vw,56px);line-height:1.04;letter-spacing:-.03em;color:#fff;margin:16px 0 18px}
.hero h1 em{font-style:italic;color:var(--blue-glow)}
.hero .lede{color:#B9CCE6;max-width:540px}
.hero .lede b{color:#fff}
.promise{font-size:15px;color:#9FB6D6;border-left:3px solid var(--teal);padding-left:16px;margin:22px 0 28px;line-height:1.6;max-width:500px}
.promise em{font-style:italic;color:#cfe0f5}
.ctanote{font-size:13px;color:#8BA3C4;margin-top:14px}
.pcard{background:linear-gradient(165deg,#10243F,#0A1830);border:1px solid rgba(94,140,200,.28);border-radius:22px;padding:30px;box-shadow:var(--e3-dark);max-width:330px;margin:0 auto;text-align:center;display:grid;gap:14px}
.pcard h3{font-size:22px;line-height:1.15;letter-spacing:-.01em;color:#fff}
.pcard .cap{font-size:13.5px;color:#9FB6D6;line-height:1.5}
.chips{display:flex;justify-content:center;gap:7px;flex-wrap:wrap}
.chip{font-size:11px;font-weight:700;color:var(--muted-lt);background:rgba(59,139,255,.12);border:1px solid rgba(59,139,255,.28);border-radius:999px;padding:6px 10px;line-height:1}
.img-ph{border:1.5px dashed rgba(94,140,200,.4);border-radius:16px;background:repeating-linear-gradient(45deg,rgba(159,182,214,.1) 0 12px,transparent 12px 26px);display:flex;align-items:center;justify-content:center;text-align:center;padding:16px}
.img-ph span{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;color:#7E95B7;letter-spacing:.04em;line-height:1.6}
@media(max-width:860px){.hero__grid{grid-template-columns:1fr}.hero__copy{order:2}.hero__card{order:1}.pcard{max-width:280px}}

/* ---------- authority strip ---------- */
.authority{background:#fff;border-bottom:1px solid var(--line);padding:18px 0}
.authority__row{display:flex;justify-content:center;align-items:center;gap:34px;flex-wrap:wrap;font-size:13px;font-weight:600;color:var(--muted);text-align:center}
.authority__row b{color:var(--ink)}
.authority__row .sep{width:1px;height:18px;background:var(--line)}
@media(max-width:680px){.authority__row .sep{display:none}}

/* ---------- how it works ---------- */
.how{background:var(--grad-light-down)}
.problead{max-width:760px;margin:0 auto 40px;text-align:center}
.problead .h2{font-size:clamp(28px,3.6vw,42px)}
.problead .intro{font-size:19px;line-height:1.65;color:var(--ink-2);margin:0}
.trap{background:var(--ink);border-radius:20px;padding:38px 34px;max-width:860px;margin:36px auto 0;box-shadow:var(--e3-light);color:#fff}
.trap h3{font-size:22px;color:#fff;margin:0 0 6px;text-align:center}
.trap .sub{font-size:14.5px;color:var(--muted-lt);text-align:center;margin:0 0 28px}
.cycle{display:grid;grid-template-columns:1fr 24px 1fr 24px 1fr 24px 1fr;gap:6px;align-items:start}
.cstep{text-align:center;padding:0 4px}
.cstep .n{width:42px;height:42px;border-radius:50%;background:rgba(224,80,106,.16);border:1px solid rgba(224,80,106,.5);color:#FF9AAC;font-family:var(--font-display);font-weight:600;font-size:18px;display:flex;align-items:center;justify-content:center;margin:0 auto 10px}
.cstep h4{font-family:var(--font-sans);font-size:15px;font-weight:700;color:#fff;margin:0 0 5px}
.cstep p{font-size:12.5px;color:#93A8C6;margin:0;line-height:1.5}
.carrow{color:#42597C;font-size:20px;text-align:center;padding-top:10px}
.trap .punch{border-top:1px solid rgba(255,255,255,.1);margin-top:26px;padding-top:22px;font-size:16px;color:#CDDDF2;line-height:1.65;text-align:center}
.trap .punch b{color:var(--amber)}
@media(max-width:720px){.cycle{grid-template-columns:1fr 1fr}.carrow{display:none}}
.mechgrid{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:46px}
@media(max-width:720px){.mechgrid{grid-template-columns:1fr}}
.mcard{background:#fff;border:1px solid var(--line);border-radius:16px;padding:30px;box-shadow:var(--e1)}
.mcard .tile{width:48px;height:48px;border-radius:13px;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.tile--blue{background:rgba(31,111,235,.12)}
.tile--teal{background:rgba(22,184,166,.14)}
.mcard h3{font-size:22px;line-height:1.15;margin:0 0 10px}
.mcard p{font-size:15px;color:var(--muted);line-height:1.65;margin:0}
.mcard p b{color:var(--blue)}

/* ---------- timeline ---------- */
.tl{max-width:820px;margin:50px auto 0;display:grid;gap:14px}
.tlrow{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 24px;display:grid;grid-template-columns:120px 1fr;gap:20px;align-items:center;box-shadow:var(--e1)}
.tlrow .when{font-family:var(--font-display);font-weight:600;font-size:18px;color:var(--blue-deep)}
.tlrow .whensub{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:700;font-family:var(--font-sans);margin-top:3px}
.tlrow .body{font-size:15px;color:var(--ink-2);line-height:1.6}
.tlrow .body b{color:var(--ink)}
@media(max-width:560px){.tlrow{grid-template-columns:1fr;gap:8px}}

/* ---------- research ---------- */
.research{background:var(--ink);color:#fff}
.research .h2{color:#fff}
.research .sechead .lede{color:var(--muted-lt)}
.statgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:22px;margin-bottom:36px}
@media(max-width:760px){.statgrid{grid-template-columns:1fr}}
.statcard{background:rgba(255,255,255,.04);border:1px solid var(--line-dk);border-radius:16px;padding:26px}
.statcard .tag{font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--blue-glow);font-weight:700;margin-bottom:10px}
.statcard .fig{font-family:var(--font-display);font-weight:600;font-size:38px;color:#fff;line-height:1;margin-bottom:10px}
.statcard p{font-size:14px;color:#A9BEDD;line-height:1.6;margin:0 0 10px}
.statcard cite{font-style:normal;font-size:12px;color:#6F86A8}
.abt{background:rgba(31,111,235,.08);border:1px solid rgba(59,139,255,.28);border-radius:16px;padding:28px 30px;max-width:840px;margin:0 auto}
.abt p{font-size:16px;line-height:1.7;color:#CDDDF2;margin:0}
.abt p b{color:#fff}
.abt .src{font-size:12.5px;color:#7E95B7;margin-top:14px}
.research .disc{font-size:12px;color:#6F86A8;text-align:center;max-width:760px;margin:30px auto 0;line-height:1.7}

/* ---------- comparison ---------- */
.compare{background:var(--grad-light-up)}
.tablewrap{max-width:920px;margin:0 auto;border-radius:18px;overflow:auto;box-shadow:var(--e2)}
.cmp{width:100%;min-width:680px;border-collapse:collapse;font-size:14px;background:#fff}
.cmp th{padding:16px;font-size:14px;font-weight:700;color:#fff;text-align:center}
.cmp thead th:first-child{background:var(--ink-2);text-align:left}
.cmp thead th{background:var(--ink)}
.cmp thead th.hero-col{background:var(--grad-cta-blue)}
.cmp thead .subpill{display:block;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;background:rgba(255,255,255,.18);border-radius:999px;padding:3px 8px;margin:6px auto 0;width:fit-content}
.cmp td{padding:16px;text-align:center;border-top:1px solid var(--line);color:var(--muted)}
.cmp td:first-child{text-align:left;font-weight:700;color:var(--ink);background:#F7FAFE}
.cmp td.hero-col{background:rgba(31,111,235,.06);font-weight:700;color:var(--blue-deep)}
.cmp .y{color:var(--good);font-weight:800}
.cmp .n{color:var(--bad);font-weight:800}
.cmp .m{color:var(--meh);font-weight:800}
.tablefoot{font-size:13px;color:var(--muted);text-align:center;max-width:720px;margin:18px auto 0}
.selank{background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px;box-shadow:var(--e1);max-width:840px;margin:30px auto 0}
.selank .lead{font-family:var(--font-display);font-weight:600;font-size:20px;color:var(--ink);margin:0 0 10px}
.selank p{font-size:15px;color:var(--muted);line-height:1.65;margin:0}
.selank p b{color:var(--ink)}

/* ---------- reviews ---------- */
.reviews{background:#fff}
.revgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:22px}
@media(max-width:820px){.revgrid{grid-template-columns:1fr}}
.rev{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px;box-shadow:var(--e1);display:flex;flex-direction:column}
.rev .q{font-size:15.5px;line-height:1.6;color:var(--ink-2);margin:12px 0 18px;flex:1}
.rev .foot{border-top:1px solid var(--line);padding-top:18px;display:flex;gap:12px;align-items:center}
.rev .av{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--teal));color:#fff;font-family:var(--font-display);font-weight:600;font-size:18px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.rev .nm{font-size:14px;font-weight:700;color:var(--ink)}
.rev .meta{font-size:12px;color:var(--muted)}
.rev .ver{font-size:11px;font-weight:700;color:var(--good);margin-top:2px}
.revfoot{font-size:12.5px;color:var(--muted);text-align:center;margin-top:24px}

/* ---------- dosage ---------- */
.dosage{background:#fff;border-top:1px solid var(--line)}

/* ---------- offer ---------- */
.offer{background:var(--grad-offer);color:#fff}
.offer .h2{color:#fff}
.offer .sechead .lede{color:var(--muted-lt)}
.ocard-outer{background:linear-gradient(180deg,#fff,#F3F8FF);border-radius:24px;padding:8px;max-width:560px;margin:0 auto;box-shadow:var(--e3-dark)}
.ocard{background:#fff;border-radius:18px;padding:34px;color:var(--ink)}
.obadge{display:inline-block;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#2A1C00;background:var(--amber);border-radius:999px;padding:6px 14px;margin-bottom:14px;white-space:nowrap}
.ocard h3{font-size:22px;margin:0 0 4px}
.ocard .tag{font-size:13.5px;color:var(--muted);margin:0 0 22px}
.vstack{display:grid}
.vrow{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px dashed var(--line);font-size:14px}
.vrow .it{color:var(--ink-2);font-weight:600}
.vrow .val{color:var(--muted);white-space:nowrap}
.vrow .val s{color:var(--muted-lt);margin-right:6px}
.vrow .val .free{color:var(--good);font-weight:700}
.pricebox{background:#F3F8FF;border:1px solid var(--line);border-radius:14px;padding:22px;text-align:center;margin:22px 0}
.pricebox .tv{font-size:14px;color:var(--muted)}
.pricebox .tv s{font-weight:600}
.pricebox .pr{font-family:var(--font-display);font-weight:600;font-size:46px;color:var(--blue-deep);line-height:1.1}
.pricebox .pr span{font-family:var(--font-sans);font-size:18px;color:var(--muted);font-weight:400}
.pricebox .terms{font-size:12.5px;color:var(--muted);margin-top:6px}
.gstrip{background:rgba(19,184,123,.08);border:1px solid rgba(19,184,123,.3);border-radius:16px;padding:18px 20px;max-width:560px;margin:22px auto 0;display:flex;gap:16px;align-items:center}
.gseal{width:58px;height:58px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#1ad492,#0e9362);color:#fff;font-size:8.5px;font-weight:800;letter-spacing:.06em;display:flex;align-items:center;justify-content:center;text-align:center;flex-shrink:0;line-height:1.3;text-transform:uppercase}
.gstrip p{font-size:14px;color:#CDDDF2;margin:0;line-height:1.55}
.gstrip p b{color:#fff}

/* ---------- close ---------- */
.close-sec{background:#fff}
.opts{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;max-width:920px;margin:36px auto;text-align:left}
@media(max-width:720px){.opts{grid-template-columns:1fr}}
.opt{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:22px}
.opt .lab{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:700;margin-bottom:8px}
.opt h4{font-family:var(--font-sans);font-size:16px;font-weight:700;color:var(--ink);margin:0 0 8px}
.opt p{font-size:13.5px;color:var(--muted);line-height:1.6;margin:0}
.opt--best{border:2px solid var(--blue);background:rgba(31,111,235,.05)}
.opt--best .lab{color:var(--blue)}
.urgency{font-size:17px;color:var(--ink-2);max-width:600px;margin:0 auto;line-height:1.6}

/* ---------- FAQ ---------- */
.faq{background:var(--grad-light-down)}
.faqlist{max-width:760px;margin:0 auto}
.fitem{background:#fff;border:1px solid var(--line);border-radius:13px;margin-bottom:12px;overflow:hidden;transition:border-color 120ms ease,box-shadow 120ms ease}
.fitem.open{box-shadow:var(--e1);border-color:#BCD2EE}
.fitem .qrow{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;background:none;border:none;cursor:pointer;padding:21px 24px;font-family:var(--font-sans);font-size:16.5px;font-weight:700;color:var(--ink);text-align:left}
.fitem .tgl{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:rgba(31,111,235,.1);color:var(--blue);font-size:17px;font-weight:600;display:flex;align-items:center;justify-content:center;transition:transform 200ms ease;line-height:1}
.fitem.open .tgl{transform:rotate(45deg)}
.fitem .ans{max-height:0;overflow:hidden;transition:max-height 280ms ease}
.fitem.open .ans{max-height:400px}
.fitem .ans p{padding:0 24px 22px;margin:0;font-size:15.5px;line-height:1.65;color:var(--muted)}
.fitem .ans b{color:var(--ink-2)}

/* ---------- final CTA ---------- */
.final{background:var(--grad-final);color:#fff;text-align:center}
.final .h2{color:#fff;font-size:clamp(30px,4vw,48px);max-width:760px;margin:14px auto 16px}
.final .sub{font-size:18px;color:#A9BEDD;max-width:560px;margin:0 auto 30px;line-height:1.6}
.final .reassure{color:#8BA3C4}

/* ---------- footer ---------- */
.hpfoot{background:#040A14;padding:64px 0 40px;color:#7E95B7;font-size:13px}
.hpfoot .lockup .wm{color:#fff;font-size:20px}
.hpfoot__top{display:grid;grid-template-columns:1.5fr 2fr;gap:48px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.08)}
.hpfoot__brand{max-width:320px}
.hpfoot__brand p{font-size:13px;color:#5F7596;line-height:1.65;margin:14px 0 0}
.hpfoot__contact{display:inline-block;margin-top:16px;color:#8BA3C4;text-decoration:none;font-weight:600;transition:color .15s ease}
.hpfoot__contact:hover{color:#fff}
.hpfoot__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.hpfoot__col h4{font-family:var(--font-sans);font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted-lt);font-weight:700;margin:0 0 16px}
.hpfoot__col a{display:block;color:#8BA3C4;text-decoration:none;font-size:13.5px;margin-bottom:11px;transition:color .15s ease}
.hpfoot__col a:hover{color:#fff}
.hpfoot .legal{font-size:12px;line-height:1.7;max-width:980px;color:#5F7596;margin:32px 0 0}
.hpfoot .legal b{color:var(--muted-lt)}
.hpfoot__bar{display:flex;justify-content:space-between;align-items:center;gap:16px 28px;flex-wrap:wrap;margin-top:28px;padding-top:24px;border-top:1px solid rgba(255,255,255,.08)}
.hpfoot .copy{font-size:12px;color:#46587A;margin:0}
.hpfoot__mini{display:flex;gap:20px;flex-wrap:wrap}
.hpfoot__mini a{color:#7E95B7;text-decoration:none;font-size:12px;transition:color .15s ease}
.hpfoot__mini a:hover{color:#fff}
@media(max-width:860px){.hpfoot__top{grid-template-columns:1fr;gap:36px}}
@media(max-width:520px){.hpfoot__cols{grid-template-columns:1fr 1fr;gap:24px}.hpfoot__bar{flex-direction:column;align-items:flex-start;gap:14px}}

/* ---------- content / legal pages ---------- */
.page-hero{background:var(--grad-hero);color:#fff;padding:54px 0 46px;position:relative}
.page-hero:after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;background:linear-gradient(180deg,transparent,rgba(8,19,38,.55));pointer-events:none}
.page-hero .wrap{position:relative;z-index:1;max-width:820px}
.page-hero h1{font-size:clamp(30px,4vw,46px);line-height:1.08;letter-spacing:-.02em;color:#fff;margin:14px 0 12px}
.page-hero .lede{color:#B9CCE6;max-width:660px}
.page-hero .lede b{color:#fff}
.page-hero .updated{font-size:13px;color:#8BA3C4;margin-top:18px}
.crumbs{font-size:13px;color:#8BA3C4;margin-bottom:6px}
.crumbs a{color:#B9CCE6;text-decoration:none}
.crumbs a:hover{color:#fff}
.crumbs span{margin:0 7px;color:#46587A}

.doc{background:#fff;padding:60px 0}
.doc .wrap{max-width:820px}
.doc__lead{font-size:18px;line-height:1.7;color:var(--ink-2);margin:0 0 8px}
.doc h2{font-family:var(--font-display);font-weight:600;font-size:clamp(22px,2.6vw,28px);color:var(--ink);margin:44px 0 12px;letter-spacing:-.01em;scroll-margin-top:80px}
.doc h2:first-child{margin-top:0}
.doc h3{font-family:var(--font-sans);font-size:17px;font-weight:700;color:var(--ink);margin:26px 0 8px}
.doc p,.doc li{font-size:16px;line-height:1.72;color:var(--ink-2)}
.doc p{margin:0 0 16px}
.doc ul,.doc ol{margin:0 0 18px;padding-left:22px}
.doc li{margin-bottom:9px}
.doc li::marker{color:var(--blue)}
.doc a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.doc a:hover{color:var(--blue-deep)}
.doc strong{color:var(--ink);font-weight:700}
.doc hr{border:none;border-top:1px solid var(--line);margin:42px 0}
.doc address{font-style:normal;color:var(--ink-2);line-height:1.7;font-size:16px}

/* table of contents */
.toc{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:22px 26px;margin:0 0 40px}
.toc h2{font-family:var(--font-sans);font-size:13px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin:0 0 12px}
.toc ol{margin:0;padding-left:20px;columns:2;column-gap:32px}
.toc li{margin-bottom:7px;font-size:14.5px}
.toc a{color:var(--ink-2);text-decoration:none}
.toc a:hover{color:var(--blue);text-decoration:underline}
@media(max-width:620px){.toc ol{columns:1}}

/* callout / note box */
.note{background:rgba(31,111,235,.06);border:1px solid rgba(59,139,255,.28);border-left:4px solid var(--blue);border-radius:12px;padding:18px 22px;margin:0 0 24px}
.note p{margin:0;font-size:15px;color:var(--ink-2)}
.note p+p{margin-top:10px}
.note--amber{background:rgba(245,167,0,.08);border-color:rgba(245,167,0,.4);border-left-color:var(--amber)}
.note--teal{background:rgba(22,184,166,.08);border-color:rgba(22,184,166,.35);border-left-color:var(--teal)}

/* meta / data rows (contact, definitions) */
.dl{display:grid;grid-template-columns:200px 1fr;gap:6px 24px;margin:0 0 22px}
.dl dt{font-weight:700;color:var(--ink);font-size:15px}
.dl dd{margin:0;color:var(--ink-2);font-size:15px;line-height:1.6}
@media(max-width:560px){.dl{grid-template-columns:1fr;gap:2px 0}.dl dd{margin-bottom:12px}}

/* contact cards */
.ccards{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:0 0 36px}
@media(max-width:680px){.ccards{grid-template-columns:1fr}}
.ccard{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px;box-shadow:var(--e1)}
.ccard h3{font-family:var(--font-display);font-weight:600;font-size:19px;color:var(--ink);margin:0 0 6px}
.ccard p{font-size:14.5px;color:var(--muted);line-height:1.6;margin:0 0 12px}
.ccard a.email{font-size:16px;font-weight:700;color:var(--blue);text-decoration:none}
.ccard a.email:hover{text-decoration:underline}
.ccard .hrs{font-size:13px;color:var(--muted);margin-top:8px}

/* team / author cards (EEAT) */
.team{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:8px 0 28px}
@media(max-width:680px){.team{grid-template-columns:1fr}}
.person{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px;box-shadow:var(--e1);display:flex;gap:16px;align-items:flex-start}
.person .av{width:54px;height:54px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--teal));color:#fff;font-family:var(--font-display);font-weight:600;font-size:22px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.person .nm{font-size:16px;font-weight:700;color:var(--ink);margin:0}
.person .role{font-size:13px;color:var(--blue);font-weight:600;margin:2px 0 8px}
.person .bio{font-size:14px;color:var(--muted);line-height:1.6;margin:0}

/* value / principle grid (about, EEAT) */
.vgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:8px 0 28px}
@media(max-width:680px){.vgrid{grid-template-columns:1fr}}
.vcard{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:24px}
.vcard h3{font-family:var(--font-display);font-weight:600;font-size:18px;color:var(--ink);margin:0 0 8px}
.vcard p{font-size:14.5px;color:var(--muted);line-height:1.65;margin:0}

/* small contact CTA band */
.helpband{background:var(--grad-light-up);border-top:1px solid var(--line);padding:48px 0;text-align:center}
.helpband h2{font-size:clamp(24px,3vw,32px);margin:0 0 10px}
.helpband p{font-size:16px;color:var(--muted);max-width:540px;margin:0 auto 22px;line-height:1.6}

/* ---------- motion ----------
   Base state is VISIBLE. JS adds .reveal-init + .is-hidden, then removes the
   hide class to transition in — so no-JS, print/capture and reduced-motion
   always see the final state. */
@media(prefers-reduced-motion:no-preference){
  .reveal-init{transition:opacity 480ms ease,transform 480ms ease}
  .is-hidden{opacity:0;transform:translateY(16px)}
  .st.reveal-init.is-hidden{transform:translateY(12px)}
}