/* ProForta — marketing landing page styles.
 *
 * Tokens mirror docs/design_handoff_proforta_pwa/colors_and_type.css (the
 * authoritative design system). Type is Cabinet Grotesk (display) + Satoshi
 * (body), self-hosted (FLAGS F11 — no CDN). Deep forest green leads; LifeCare
 * green is THE action accent; navy is reserved for data-rights surfaces.
 */

/* ─── Self-hosted brand fonts (Fontshare ITF Free License) ────────────── */
@font-face{font-family:"Cabinet Grotesk";src:url("/static/fonts/CabinetGrotesk-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Cabinet Grotesk";src:url("/static/fonts/CabinetGrotesk-Extrabold.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Cabinet Grotesk";src:url("/static/fonts/CabinetGrotesk-Black.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:"Satoshi";src:url("/static/fonts/Satoshi-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Satoshi";src:url("/static/fonts/Satoshi-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Satoshi";src:url("/static/fonts/Satoshi-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* ─── Tokens (mirror colors_and_type.css) ─────────────────────────── */
:root, [data-theme="light"]{
  --bg:#F5F0E8; --sur:#FAF8F4; --sur2:#FFFFFF; --suroff:#EDE9E0; --div:#D8D3C9; --bdr:#CCC7BB;
  --fg1:#1A1A18; --fg2:#6B6860; --fg3:#A8A49C; --fginv:#F5F0E8;
  --pri:#1A3A2A; --prih:#142E21; --pritint:#C8D8CF;
  --acc:#7CB045; --acch:#6CA035;
  --amber:#E8A930; --amberh:#D49520;
  --lc:#1F3F70; --lc-blue:#2E80B8; --lc-green:#7CB045;
  --suc:#2D7A4F; --warn:#E8A930; --err:#C44B37;
  --rsm:.375rem; --rmd:.625rem; --rlg:1rem; --rxl:1.5rem; --r2xl:2rem; --rfull:9999px;
  --tr:200ms cubic-bezier(.16,1,.3,1);
  --ssm:0 1px 3px rgba(26,26,24,.07);
  --smd:0 4px 16px rgba(26,26,24,.09), 0 2px 6px rgba(26,26,24,.05);
  --slg:0 16px 48px rgba(26,26,24,.12), 0 4px 12px rgba(26,26,24,.06);
  --sxl:0 32px 80px rgba(26,26,24,.16), 0 8px 24px rgba(26,26,24,.08);
  --txs:clamp(.75rem,.7rem + .25vw,.875rem);
  --tsm:clamp(.875rem,.8rem + .35vw,1rem);
  --tbase:clamp(1rem,.95rem + .25vw,1.125rem);
  --tlg:clamp(1.125rem,1rem + .75vw,1.5rem);
  --txl:clamp(1.5rem,1.2rem + 1.25vw,2.25rem);
  --t2xl:clamp(2rem,1.2rem + 2.5vw,3.5rem);
  --t3xl:clamp(2.5rem,1rem + 4vw,5rem);
  --thero:clamp(2.75rem,.5rem + 6vw,6rem);
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.25rem; --s6:1.5rem;
  --s7:1.75rem; --s8:2rem; --s10:2.5rem; --s12:3rem; --s16:4rem; --s20:5rem; --s24:6rem; --s32:8rem;
  --fd:"Cabinet Grotesk","Helvetica Neue",sans-serif;
  --fb:"Satoshi","Inter",system-ui,sans-serif;
  --cw:1120px;
}
[data-theme="dark"]{
  --bg:#0F1410; --sur:#151A16; --sur2:#1B221C; --suroff:#1E261F; --div:#2A342B; --bdr:#334035;
  --fg1:#E8E4DC; --fg2:#8A9188; --fg3:#56635A; --fginv:#1A1A18;
  --pri:#4A8B64; --prih:#5A9E74; --pritint:#1E3028;
  --acc:#9BCC65; --acch:#B5DC85;
  --amber:#F0B840; --amberh:#F5C855;
  --lc:#4A8BC4;
  --ssm:0 1px 3px rgba(0,0,0,.25);
  --smd:0 4px 16px rgba(0,0,0,.35);
  --slg:0 16px 48px rgba(0,0,0,.45);
  --sxl:0 32px 80px rgba(0,0,0,.55);
}
/* ─── Reset / base ────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth;scroll-padding-top:88px}
body{min-height:100dvh;font-family:var(--fb);font-size:var(--tbase);color:var(--fg1);background:var(--bg);line-height:1.6;overflow-x:hidden}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none;transition:color var(--tr)}
button{cursor:pointer;background:none;border:none;font:inherit;color:inherit}
h1,h2,h3{font-family:var(--fd);text-wrap:balance;line-height:1.05;letter-spacing:-.025em}
p{text-wrap:pretty}
input,button,textarea{font:inherit}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:var(--rsm)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.fi{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.fi.vis{opacity:1;transform:none}
.ctr{max-width:var(--cw);margin-inline:auto;padding-inline:var(--s6)}
.skip{position:fixed;top:var(--s3);left:var(--s3);padding:var(--s2) var(--s4);background:var(--acc);color:var(--fg1);font-weight:700;border-radius:var(--rmd);z-index:9999;transform:translateY(-200%);transition:transform var(--tr)}
.skip:focus{transform:none}

/* ─── Master lockup (LifeCare shield + ProForta wordmark) ─────────── */
.lockup{display:inline-flex;align-items:center;gap:var(--s3);line-height:1}
.lockup .shield{width:34px;height:34px;flex:none;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;border-radius:8px}
.lockup .shield img{width:132%;height:132%;margin:-7% -12% -25% -20%;max-width:none;display:block}
.lockup .word{display:flex;flex-direction:column;line-height:1}
.lockup .wmark{font-family:var(--fd);font-weight:800;font-size:22px;letter-spacing:-.025em;color:var(--lc)}
.lockup .tag{font-family:var(--fb);font-weight:600;font-size:9px;color:var(--lc);opacity:.65;letter-spacing:.12em;text-transform:uppercase;margin-top:3px}
.lockup .brand{display:inline-flex;align-items:baseline;gap:8px;line-height:1;white-space:nowrap}
.lockup .brand-name{font-family:var(--fd);font-weight:800;font-size:20px;letter-spacing:-.022em;color:var(--lc)}
.lockup .brand-sub{font-family:var(--fb);font-weight:500;font-size:15px;color:var(--fg2);letter-spacing:-.005em}
.lockup.on-dark .wmark{color:#fff}
.lockup.on-dark .tag{color:#fff;opacity:.7}
.lockup.on-dark .brand-name{color:#fff}
.lockup.on-dark .brand-sub{color:rgba(255,255,255,.7)}
/* On dark surfaces (dark mode + footer), put the shield in a clean white square
   and zoom the PNG so the shield silhouette fills the box edge-to-edge. */
[data-theme="dark"] .lockup .shield,
.lockup.on-dark .shield{
  background:#fff;
}
.lockup.lg .shield{width:48px;height:48px;border-radius:10px}
.lockup.lg .wmark{font-size:30px}
.lockup.lg .tag{font-size:11px;margin-top:4px}

/* ─── Utility ─────────────────────────────────────────────────────── */
.nbr{white-space:nowrap}

/* ─── Nav ─────────────────────────────────────────────────────────── */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:var(--s2) 0;background:var(--sur2);border-bottom:1px solid var(--div)}
.ni{display:flex;align-items:center;justify-content:space-between;max-width:var(--cw);margin-inline:auto;padding-inline:var(--s6);gap:var(--s4)}
.na{display:flex;align-items:center;gap:var(--s2)}
.nlnk{font-size:var(--tsm);font-weight:500;color:var(--fg2);padding:var(--s2) var(--s3);border-radius:var(--rmd);transition:color var(--tr),background var(--tr);white-space:nowrap}
.nlnk:hover{color:var(--fg1);background:var(--suroff)}
.bnav{font-size:var(--tsm);font-weight:700;padding:var(--s2) var(--s5);border-radius:var(--rfull);background:var(--acc);color:var(--fg1);transition:background var(--tr),transform var(--tr);white-space:nowrap}
.bnav:hover{background:var(--acch);transform:translateY(-1px)}
.ttog{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:var(--rfull);color:var(--fg2);transition:background var(--tr),color var(--tr)}
.ttog:hover{background:var(--suroff);color:var(--fg1)}

/* ─── Hero ────────────────────────────────────────────────────────── */
.hero{position:relative;background:var(--pri);color:#fff;padding-top:120px;padding-bottom:var(--s24);overflow:hidden;isolation:isolate}
.hero::before{content:'';position:absolute;inset:0;z-index:-2;background:
  radial-gradient(ellipse 80% 50% at 80% 20%, rgba(124,176,69,.22), transparent 60%),
  radial-gradient(ellipse 60% 40% at 10% 90%, rgba(46,128,184,.18), transparent 60%),
  linear-gradient(160deg,#1A3A2A 0%,#173324 60%,#102218 100%)}
.hero::after{content:'';position:absolute;inset:0;z-index:-1;background-image:
  linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:48px 48px;mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 30%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 30%,transparent 75%)}
.hin{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s12);align-items:center;max-width:var(--cw);margin-inline:auto;padding-inline:var(--s6)}
.hey{display:inline-flex;align-items:center;gap:var(--s2);background:rgba(124,176,69,.14);border:1px solid rgba(124,176,69,.32);color:var(--acc);font-size:var(--txs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:var(--s2) var(--s4);border-radius:var(--rfull);margin-bottom:var(--s6)}
.htitle{font-size:var(--thero);font-weight:900;letter-spacing:-.03em;color:#fff;line-height:.95;margin-bottom:var(--s6);max-width:14ch;text-wrap:balance}
.htitle .gx{color:var(--acc)}
.hsub{font-size:var(--tlg);color:rgba(255,255,255,.78);max-width:46ch;line-height:1.5;margin-bottom:var(--s8)}
.hcta{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;margin-bottom:var(--s10)}
.bpri{display:inline-flex;align-items:center;gap:var(--s2);font-family:var(--fd);font-size:var(--tbase);font-weight:800;padding:var(--s4) var(--s7);border-radius:var(--rfull);background:var(--acc);color:var(--fg1);box-shadow:0 4px 24px rgba(124,176,69,.35);transition:background var(--tr),transform var(--tr),box-shadow var(--tr)}
.bpri:hover{background:var(--acch);transform:translateY(-2px);box-shadow:0 8px 32px rgba(124,176,69,.5)}
.bgh{display:inline-flex;align-items:center;gap:var(--s2);font-size:var(--tsm);font-weight:600;color:rgba(255,255,255,.85);padding:var(--s3) var(--s6);border-radius:var(--rfull);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(8px);transition:background var(--tr)}
.bgh:hover{background:rgba(255,255,255,.08)}
.hstats{display:flex;gap:var(--s10);flex-wrap:wrap}
.hstn{font-family:var(--fd);font-size:var(--t2xl);font-weight:900;color:#fff;line-height:1}
.hstn span{color:var(--acc)}
.hstl{font-size:var(--txs);color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.06em;font-weight:600;margin-top:var(--s2);max-width:18ch}
.lcmicro{display:inline-flex;align-items:center;gap:var(--s2);background:var(--lc);color:#fff;font-size:11px;font-weight:700;letter-spacing:.04em;padding:5px 12px;border-radius:var(--rfull);margin-bottom:var(--s5)}
.lcmicro svg{width:11px;height:11px}

/* Hero phone mockup */
.hvis{position:relative;justify-self:end;width:100%;max-width:420px}
.phone{background:#0E1B14;border-radius:36px;padding:14px;box-shadow:var(--sxl),0 0 0 1px rgba(255,255,255,.06);position:relative}
.phone::before{content:'';position:absolute;top:18px;left:50%;transform:translateX(-50%);width:88px;height:24px;background:#000;border-radius:14px;z-index:2}
.pscr{background:var(--bg);border-radius:26px;padding:48px 18px 18px;min-height:580px;display:flex;flex-direction:column;gap:14px;position:relative;overflow:hidden}
.pgreet{font-family:var(--fd);font-weight:800;font-size:22px;color:var(--fg1);letter-spacing:-.02em;line-height:1.1;padding:0 4px}
.pgreet em{font-style:normal;color:var(--pri)}
.pmps{background:var(--pri);color:#fff;border-radius:18px;padding:16px;display:flex;align-items:center;gap:14px}
.mpsring{width:64px;height:64px;border-radius:50%;background:conic-gradient(var(--acc) 0% 78%,rgba(255,255,255,.14) 78% 100%);display:flex;align-items:center;justify-content:center;flex:none;position:relative}
.mpsring::after{content:'';position:absolute;inset:5px;background:var(--pri);border-radius:50%}
.mpsring span{position:relative;z-index:1;font-family:var(--fd);font-weight:900;font-size:20px;color:#fff;line-height:1}
.mpsl1{font-size:10px;color:rgba(255,255,255,.55);font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.mpsl2{font-family:var(--fd);font-weight:800;font-size:15px;margin-top:3px;letter-spacing:-.01em}
.mpstrend{font-size:11px;color:var(--acc);font-weight:600;margin-top:4px}
.pbubble{background:var(--sur2);border:1px solid var(--div);border-radius:14px;padding:12px 14px;font-size:12px;color:var(--fg1);line-height:1.55;box-shadow:var(--ssm)}
.pbubble strong{color:var(--pri);font-weight:700}
.pcite{display:flex;align-items:center;gap:5px;font-size:9.5px;color:var(--lc);font-weight:700;margin-top:6px;padding-top:6px;border-top:1px solid var(--div);letter-spacing:.02em}
.pcite svg{width:9px;height:9px;flex:none}
.pchips{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:8px}
.pchip{font-size:10px;font-weight:600;color:var(--pri);background:var(--pritint);padding:5px 10px;border-radius:var(--rfull);border:1px solid color-mix(in oklch,var(--pri) 18%,transparent)}
.pdock{display:flex;justify-content:space-around;padding:8px 4px 0;margin-top:6px;border-top:1px solid var(--div)}
.pdock svg{width:18px;height:18px;color:var(--fg3)}
.pdock .active{color:var(--pri)}

/* ─── Section base ────────────────────────────────────────────────── */
section{padding-block:clamp(var(--s16),8vw,var(--s32))}
.slbl{font-size:var(--txs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--pri);margin-bottom:var(--s4);display:inline-flex;align-items:center;gap:var(--s2)}
[data-theme=dark] .slbl{color:var(--acc)}
.slbl::before{content:'';width:20px;height:2px;background:var(--acc);border-radius:var(--rfull)}
.stitle{font-size:var(--t3xl);font-weight:900;letter-spacing:-.028em;line-height:1.02;color:var(--fg1);margin-bottom:var(--s5)}
.stitle .gx{color:var(--pri)}
[data-theme=dark] .stitle .gx{color:var(--acc)}
.sbody{font-size:var(--tlg);color:var(--fg2);max-width:54ch;line-height:1.6}

/* ─── Problem ─────────────────────────────────────────────────────── */
.psec{background:var(--pri)}
[data-theme=dark] .psec{background:var(--sur)}
.pin{display:grid;grid-template-columns:1fr 1fr;gap:var(--s16);align-items:center}
.ptxt .slbl{color:var(--acc)}
.ptxt .slbl::before{background:var(--acc)}
.ptitle{font-size:var(--t3xl);font-weight:900;letter-spacing:-.028em;line-height:1.02;color:#fff;margin-bottom:var(--s5)}
[data-theme=dark] .ptitle{color:var(--fg1)}
.ptitle em{font-style:normal;color:var(--acc)}
.pbody{color:rgba(255,255,255,.72);font-size:var(--tbase);line-height:1.7;max-width:46ch;margin-bottom:var(--s4)}
[data-theme=dark] .pbody{color:var(--fg2)}
.psc{display:grid;gap:var(--s4)}
.pcard{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:var(--rxl);padding:var(--s6)}
[data-theme=dark] .pcard{background:var(--sur2);border-color:var(--div)}
.pcnum{font-family:var(--fd);font-size:var(--t2xl);font-weight:900;color:var(--acc);letter-spacing:-.02em;line-height:1;margin-bottom:var(--s2)}
.pcdesc{font-size:var(--tsm);color:rgba(255,255,255,.62);line-height:1.55}
[data-theme=dark] .pcdesc{color:var(--fg2)}

/* ─── How ─────────────────────────────────────────────────────────── */
.hwsec{background:var(--bg)}
.hwhdr{margin-bottom:var(--s12)}
.hwgrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s12);align-items:start}
.hwicol{position:sticky;top:104px}
.hwpanel{background:var(--sur);border:1px solid var(--div);border-radius:var(--r2xl);padding:var(--s8);box-shadow:var(--sxl)}
.hwphdr{display:flex;align-items:center;justify-content:space-between;padding-bottom:var(--s5);border-bottom:1px solid var(--div);margin-bottom:var(--s6)}
.hwpttl{font-family:var(--fd);font-size:var(--tbase);font-weight:800;color:var(--fg1);letter-spacing:-.01em}
.hwpsub{font-size:11px;color:var(--fg3);font-weight:500}
.hwbig{font-family:var(--fd);font-size:64px;font-weight:900;color:var(--pri);letter-spacing:-.04em;line-height:1;display:flex;align-items:baseline;gap:8px}
.hwbig small{font-size:18px;font-weight:700;color:var(--fg2)}
.hwbar{height:8px;background:var(--suroff);border-radius:var(--rfull);overflow:hidden;margin-top:var(--s5)}
.hwbar > div{height:100%;width:78%;background:linear-gradient(90deg,var(--acc),#9CD065);border-radius:var(--rfull)}
.hwlegend{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);margin-top:var(--s6)}
.hwlg{padding:var(--s4);background:var(--sur2);border:1px solid var(--div);border-radius:var(--rlg)}
.hwlgn{font-family:var(--fd);font-weight:800;font-size:var(--tlg);color:var(--pri);letter-spacing:-.02em}
.hwlgl{font-size:10px;color:var(--fg2);font-weight:600;text-transform:uppercase;letter-spacing:.04em;margin-top:3px}
.hwspark{margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--div)}
.hwsplbl{font-size:10px;color:var(--fg3);font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:var(--s3)}
.hwsteps{display:flex;flex-direction:column;gap:var(--s4)}
.hwstep{display:flex;gap:var(--s5);padding:var(--s6);border-radius:var(--rxl);background:var(--sur);border:1px solid var(--div);transition:box-shadow var(--tr),transform var(--tr),background var(--tr)}
.hwstep:hover{box-shadow:var(--smd);transform:translateY(-2px);background:var(--sur2)}
.hwnum{width:40px;height:40px;min-width:40px;background:var(--pri);color:#fff;border-radius:var(--rlg);display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-weight:900;font-size:var(--tbase)}
.hwstitle{font-family:var(--fd);font-size:var(--tlg);font-weight:800;letter-spacing:-.02em;color:var(--fg1);margin-bottom:var(--s2)}
.hwsbody{font-size:var(--tsm);color:var(--fg2);line-height:1.6}

/* ─── Features ────────────────────────────────────────────────────── */
.ftsec{background:var(--sur)}
.fthdr{text-align:center;max-width:54ch;margin:0 auto var(--s16);display:flex;flex-direction:column;align-items:center}
.ftgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
.ftcard{padding:var(--s8);background:var(--sur2);border:1px solid var(--div);border-radius:var(--rxl);transition:box-shadow var(--tr),transform var(--tr);display:flex;flex-direction:column}
.ftcard:hover{box-shadow:var(--slg);transform:translateY(-3px)}
.ftcard.feat{background:var(--pri);border-color:transparent;grid-column:span 2}
.ftico{width:44px;height:44px;background:var(--pritint);border-radius:var(--rlg);display:flex;align-items:center;justify-content:center;margin-bottom:var(--s5);color:var(--pri)}
.ftcard.feat .ftico{background:rgba(255,255,255,.12);color:var(--acc)}
.fttitle{font-family:var(--fd);font-size:var(--tlg);font-weight:800;letter-spacing:-.02em;color:var(--fg1);margin-bottom:var(--s3)}
.ftcard.feat .fttitle{color:#fff}
.ftbody{font-size:var(--tsm);color:var(--fg2);line-height:1.65}
.ftcard.feat .ftbody{color:rgba(255,255,255,.72)}
.mpsbadge{display:inline-flex;align-items:center;gap:var(--s3);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:var(--rfull);padding:var(--s2) var(--s4);margin-top:var(--s6);align-self:flex-start}
.mpsc{width:34px;height:34px;border-radius:50%;background:conic-gradient(var(--acc) 0% 78%,rgba(255,255,255,.14) 78% 100%);display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-weight:900;font-size:11px;color:#fff;position:relative}
.mpsc::after{content:'';position:absolute;inset:3px;background:var(--pri);border-radius:50%}
.mpsc > span{position:relative;z-index:1}
.mpsl{font-size:var(--txs);color:rgba(255,255,255,.78);font-weight:600;letter-spacing:.02em}

/* ─── Data section ────────────────────────────────────────────────── */
.datasec{background:var(--bg)}
.datain{display:grid;grid-template-columns:1fr 1fr;gap:var(--s12);align-items:center}
.datav{background:var(--sur);border:1px solid var(--div);border-radius:var(--r2xl);padding:var(--s8);box-shadow:var(--slg)}
.dph{display:flex;align-items:center;gap:var(--s3);padding-bottom:var(--s5);border-bottom:1px solid var(--div);margin-bottom:var(--s5)}
.lcbadge{display:inline-flex;align-items:center;gap:var(--s2);background:var(--lc);color:#fff;font-size:var(--txs);font-weight:700;letter-spacing:.04em;padding:var(--s1) var(--s3);border-radius:var(--rfull)}
.lcbadge svg{width:10px;height:10px}
.dptitle{font-family:var(--fd);font-size:var(--tbase);font-weight:800;color:var(--fg1);letter-spacing:-.01em}
.dlist{list-style:none;display:flex;flex-direction:column}
.dai{display:flex;align-items:center;gap:var(--s4);padding:var(--s4) 0;border-bottom:1px solid var(--div)}
.dai:last-child{border-bottom:none}
.dadot{width:10px;height:10px;border-radius:50%;background:var(--suc);flex:none;position:relative}
.dadot.live::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--suc);opacity:.5;animation:pdot 2s ease-out infinite}
.daname{flex:1;font-size:var(--tsm);font-weight:600;color:var(--fg1)}
.dascope{font-size:11px;color:var(--fg3);font-weight:500;margin-top:1px}
.datime{font-size:var(--txs);color:var(--fg3);font-variant-numeric:tabular-nums}
.rbtn{font-size:11px;font-weight:700;color:var(--err);padding:var(--s1) var(--s3);border:1px solid color-mix(in oklch,var(--err) 40%,transparent);border-radius:var(--rfull);transition:background var(--tr);background:transparent;text-transform:uppercase;letter-spacing:.04em}
.rbtn:hover{background:color-mix(in oklch,var(--err) 10%,transparent)}
.dftr{margin-top:var(--s5);padding-top:var(--s5);border-top:1px solid var(--div);font-size:var(--txs);color:var(--fg2);display:flex;align-items:center;gap:var(--s2)}
.dftr svg{width:12px;height:12px;color:var(--suc)}
.dlearn{display:inline-flex;align-items:center;gap:6px;font-size:var(--tsm);font-weight:700;color:var(--lc);text-decoration:underline;text-decoration-color:color-mix(in oklch,var(--lc) 30%,transparent);margin-top:var(--s5)}

/* ─── How it works, under the hood (data flow) ────────────────────── */
.flowsec{background:var(--sur)}
.flowsteps{max-width:780px;margin-inline:auto;display:flex;flex-direction:column;gap:var(--s4)}
.flownote{max-width:780px;margin:var(--s8) auto 0;background:var(--pri);color:#fff;border-radius:var(--rxl);padding:var(--s6) var(--s7);display:flex;gap:var(--s4);align-items:flex-start}
[data-theme=dark] .flownote{background:var(--sur2);border:1px solid var(--div)}
.flownote svg{width:22px;height:22px;flex:none;color:var(--acc);margin-top:2px}
.flownote p{font-size:var(--tsm);line-height:1.6;color:rgba(255,255,255,.82)}
[data-theme=dark] .flownote p{color:var(--fg2)}
.flownote strong{color:#fff;font-weight:700}
[data-theme=dark] .flownote strong{color:var(--fg1)}

/* ─── CTA: newsletter subscribe ───────────────────────────────────── */
.ctasec{background:var(--pri);position:relative;overflow:hidden;isolation:isolate}
.ctasec::before{content:'';position:absolute;inset:0;z-index:-1;background:
  radial-gradient(ellipse 60% 50% at 80% 30%,rgba(124,176,69,.18),transparent 60%),
  radial-gradient(ellipse 50% 40% at 15% 80%,rgba(46,128,184,.12),transparent 60%)}
.ctain{text-align:center;max-width:60ch;margin-inline:auto;position:relative}
.ctaey{display:inline-flex;align-items:center;gap:var(--s2);background:rgba(124,176,69,.16);border:1px solid rgba(124,176,69,.32);color:var(--acc);font-size:var(--txs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:var(--s2) var(--s4);border-radius:var(--rfull);margin-bottom:var(--s6)}
.ctatitle{font-size:var(--t3xl);font-weight:900;color:#fff;letter-spacing:-.03em;line-height:1;margin-bottom:var(--s5)}
.ctatitle em{font-style:normal;color:var(--acc)}
.ctabody{font-size:var(--tbase);color:rgba(255,255,255,.72);line-height:1.7;margin-bottom:var(--s8);max-width:48ch;margin-inline:auto}
.ctawhat{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3) var(--s5);margin:0 auto var(--s10);text-align:left;max-width:44ch}
.ctawi{display:flex;align-items:flex-start;gap:var(--s3);font-size:var(--tsm);color:rgba(255,255,255,.82);line-height:1.45}
.ctachk{width:18px;height:18px;border-radius:50%;background:var(--acc);color:var(--fg1);display:flex;align-items:center;justify-content:center;flex:none;margin-top:1px}
.ctachk svg{width:10px;height:10px}
.ctaform{display:flex;gap:var(--s3);max-width:460px;margin-inline:auto;flex-wrap:wrap}
.ctainput{flex:1;min-width:220px;padding:var(--s4) var(--s5);border-radius:var(--rfull);border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff;font-size:var(--tsm);transition:border-color var(--tr),background var(--tr)}
.ctainput::placeholder{color:rgba(255,255,255,.42)}
.ctainput:focus{outline:none;border-color:rgba(124,176,69,.65);background:rgba(255,255,255,.1)}
.bsub{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);font-family:var(--fd);font-weight:800;font-size:var(--tbase);padding:var(--s4) var(--s7);border-radius:var(--rfull);background:var(--acc);color:var(--fg1);transition:background var(--tr),transform var(--tr),box-shadow var(--tr);box-shadow:0 4px 20px rgba(124,176,69,.35);white-space:nowrap}
.bsub:hover{background:var(--acch);transform:translateY(-2px);box-shadow:0 8px 28px rgba(124,176,69,.5)}
.bsub.ok{background:var(--suc)!important;color:#fff!important}
.ctanote{margin-top:var(--s5);font-size:var(--txs);color:rgba(255,255,255,.45);line-height:1.6}
.ctalink{color:rgba(255,255,255,.7);text-decoration:underline;text-decoration-color:rgba(255,255,255,.25);transition:color var(--tr)}
.ctalink:hover{color:#fff}
.ctaerr{margin-top:var(--s4);font-size:var(--txs);color:#FFB4A6;min-height:1em}

/* ─── Disclaimer + footer ─────────────────────────────────────────── */
.disc{background:color-mix(in oklch,var(--pri) 82%,#000);border-top:1px solid rgba(255,255,255,.06);padding:var(--s6) 0}
.disc p{font-size:var(--txs);color:rgba(255,255,255,.42);line-height:1.65;max-width:92ch}
.disc strong{color:rgba(255,255,255,.6);font-weight:700}
.ftr{background:color-mix(in oklch,var(--pri) 90%,#000);padding:var(--s10) 0}
.ftrin{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--s6)}
.ftrls{display:flex;gap:var(--s6);flex-wrap:wrap;align-items:center}
.ftrl{font-size:var(--tsm);color:rgba(255,255,255,.55);transition:color var(--tr)}
.ftrl:hover{color:#fff}
.ftrcopy{font-size:var(--txs);color:rgba(255,255,255,.32)}

@keyframes pdot{0%{transform:scale(1);opacity:.5}100%{transform:scale(2.2);opacity:0}}

/* ─── Responsive ──────────────────────────────────────────────────── */
@media(max-width:980px){
  .hin{grid-template-columns:1fr;gap:var(--s12)}
  .hvis{justify-self:center;max-width:380px}
  .pin,.hwgrid,.datain{grid-template-columns:1fr;gap:var(--s10)}
  .hwicol{position:static}
  .ftgrid{grid-template-columns:1fr 1fr}
  .ftcard.feat{grid-column:span 2}
  .nlnk{display:none}
}
@media(max-width:620px){
  .hero{padding-top:104px}
  .ftgrid,.ctawhat{grid-template-columns:1fr}
  .ftcard.feat{grid-column:span 1}
  .ctaform{flex-direction:column}
  .ctainput{min-width:100%}
  .hstats{gap:var(--s6)}
  .ftrin{justify-content:center;text-align:center}
  .lockup .brand-sub{display:none}
}