:root{
  color-scheme: light;
  --paper:#FCFCFA; --panel:#F2F4F3; --panel-blue:#EAF1F8; --border:#E4E7E4; --border-2:#D6DBD8;
  --ink:#243530; --text:#36443C; --slate:#33425C; --navy:#2B3A52;
  --coral:#F26A4B; --coral-ink:#CE4A26; --grey-blue:#6B8DB2;
  --shadow: 0 1px 2px rgba(35,48,67,.05), 0 18px 44px rgba(35,48,67,.08);
  --radius:16px; --maxw:1140px;
  --disp:'Poppins',system-ui,sans-serif; --body:'Hanken Grotesk',system-ui,sans-serif;
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --paper:#141C27; --panel:#1C2735; --panel-blue:#1A2740; --border:#2A3A4D; --border-2:#35485E;
  --ink:#F1F4F8; --text:#D7DFE8; --slate:#AABBD0; --navy:#C4D2E6;
  --coral:#FF7C5E; --coral-ink:#FF9075; --grey-blue:#88A4C6;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 20px 50px rgba(0,0,0,.38);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--paper); color:var(--text); font-family:var(--body); font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
h1,h2,h3{font-family:var(--disp); color:var(--ink); font-weight:600; line-height:1.1; letter-spacing:-0.02em; margin:0; text-wrap:balance}
p{margin:0}
a{color:inherit; text-decoration:none}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.eyebrow{font-family:var(--disp); font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--coral-ink)}
.eyebrow.blue{color:var(--slate)}
section{padding:88px 0; border-top:1px solid var(--border)}
.sec-h{font-size:clamp(1.6rem,3.2vw,2.15rem); margin-top:14px; max-width:22ch}
.sec-l{color:var(--slate); font-size:1.1rem; max-width:60ch; margin-top:14px; line-height:1.55}

/* header */
header{position:sticky; top:0; z-index:60; background:var(--paper); border-bottom:1px solid var(--border)}
.hdr{display:flex; align-items:center; justify-content:space-between; gap:20px; height:70px; max-width:var(--maxw); margin:0 auto; padding:0 24px}
.lockup{display:flex; align-items:center; gap:10px; flex:none}
.lockup svg{flex:none}
.lockup .lk{display:flex; flex-direction:column; align-items:flex-start; line-height:1}
.lockup .wm{font-family:var(--disp); font-weight:600; font-size:1.02rem; color:var(--ink); line-height:1; letter-spacing:-.02em; white-space:nowrap}
.lockup .ce{font-family:var(--disp); font-weight:600; font-size:.58rem; text-transform:uppercase; color:var(--coral-ink); margin-top:4px; letter-spacing:.02em; white-space:nowrap; transform-origin:left center}
nav{min-width:0; display:flex; align-items:center; gap:26px}
nav a.link{font-size:.92rem; color:var(--slate)}
nav a.link:hover{color:var(--ink)}
@media(max-width:880px){nav a.link{display:none}}
@media(max-width:560px){nav .btn-primary{display:none}}
.btn{display:inline-flex; align-items:center; justify-content:center; font-family:var(--body); font-weight:600; font-size:.95rem; border-radius:12px; padding:11px 20px; cursor:pointer; border:1px solid transparent; white-space:nowrap; transition:opacity .15s, background .15s, border-color .15s}
.btn-primary{background:var(--navy); color:#FCFCFA}
:root[data-theme="dark"] .btn-primary{background:var(--grey-blue); color:#0F1621}
.btn-ghost{background:transparent; border-color:var(--border-2); color:var(--ink)}
.btn-ghost:hover{border-color:var(--grey-blue)}
.btn:hover{opacity:.92}
.btn-lg{padding:14px 26px; font-size:1rem; border-radius:13px}
.themebtn{border:1px solid var(--border-2); background:transparent; color:var(--slate); border-radius:999px; width:34px; height:34px; cursor:pointer; font-size:.9rem; display:grid; place-items:center}

/* hero */
.hero{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; padding:82px 0 74px}
@media(max-width:900px){.hero{grid-template-columns:1fr; gap:44px; padding:52px 0 56px}}
.hero h1{font-size:clamp(2.3rem,5.2vw,3.5rem); line-height:1.03; margin-top:20px; max-width:15ch}
.hero .sub{font-size:1.2rem; color:var(--slate); margin-top:22px; max-width:46ch; line-height:1.5}
.cta-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:32px}
.trust-line{margin-top:22px; font-size:.86rem; color:var(--slate)}
.hero-vis{position:relative}
.facepanel{background:var(--panel-blue); border-radius:24px; padding:26px; box-shadow:var(--shadow)}
.facegrid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.facegrid img{width:100%; aspect-ratio:1; object-fit:cover; border-radius:16px; display:block}
.facecap{margin-top:16px; font-size:.9rem; color:var(--slate); line-height:1.45}
.evcard{width:auto; margin:16px 0 0 auto; max-width:360px; background:var(--paper); border:1px solid var(--border); border-radius:16px; padding:16px 18px; box-shadow:var(--shadow)}
.evcard .tag{font-family:var(--disp); font-size:.62rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--coral-ink)}
.evcard p{font-size:.95rem; color:var(--ink); margin-top:8px; line-height:1.45}
.evcard .who{font-size:.8rem; color:var(--slate); margin-top:9px}
@media(max-width:900px){.evcard{position:static; width:100%; max-width:none; margin-top:14px}}

/* what you get, sample pack */
.sample-wrap{display:grid; grid-template-columns:.82fr 1.18fr; gap:48px; align-items:start; margin-top:30px}
@media(max-width:900px){.sample-wrap{grid-template-columns:1fr; gap:30px}}
.deflist{margin-top:8px}
.def{padding:16px 0; border-top:1px solid var(--border)}
.def:first-child{border-top:none}
.def h3{font-size:1.02rem; margin-bottom:5px}
.def p{color:var(--slate); font-size:.95rem; line-height:1.5}
.pack{background:var(--panel); border:1px solid var(--border); border-radius:20px; box-shadow:var(--shadow); overflow:hidden}
.pack-top{background:var(--navy); color:#EAF1F8; padding:16px 22px; display:flex; justify-content:space-between; align-items:baseline; font-family:var(--disp); font-weight:500; font-size:.98rem}
:root[data-theme="dark"] .pack-top{background:#0F1621}
.pack-top small{color:#9FB4CE; font-weight:400; font-size:.78rem}
.pack-body{padding:20px 22px}
.pack-sec{padding:16px 0; border-top:1px solid var(--border)}
.pack-sec:first-child{border-top:none; padding-top:2px}
.pack-label{font-family:var(--disp); font-size:.66rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--coral-ink); margin-bottom:11px}
.qitem{color:var(--ink); font-size:.96rem; padding:5px 0; display:flex; gap:10px; line-height:1.4}
.qitem i{color:var(--grey-blue); font-style:normal; font-variant-numeric:tabular-nums}
.cohort{display:grid; grid-template-columns:118px 1fr 40px; gap:12px; align-items:center; padding:5px 0; font-size:.88rem; color:var(--ink)}
.cohort .bar{height:8px; background:var(--panel-blue); border-radius:99px; overflow:hidden}
.cohort .bar i{display:block; height:100%; background:var(--grey-blue); border-radius:99px}
.cohort .pct{text-align:right; color:var(--slate); font-variant-numeric:tabular-nums}
.pack-quote{background:var(--paper); border:1px solid var(--border); border-radius:12px; padding:14px 16px}
.pack-quote p{color:var(--ink); font-size:.95rem; line-height:1.5}
.pack-quote .who{color:var(--slate); font-size:.8rem; margin-top:8px}
.theme-row{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:8px 0; font-size:.94rem; color:var(--ink); border-top:1px dashed var(--border)}
.theme-row:first-of-type{border-top:none}
.theme-row b{color:var(--coral-ink); font-variant-numeric:tabular-nums; font-weight:600}

/* how it works, numbered flow */
.flow{margin-top:16px}
.flow-row{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; padding:42px 0; border-top:1px solid var(--border)}
.flow-row:first-child{border-top:none}
@media(max-width:820px){.flow-row{grid-template-columns:1fr; gap:22px; padding:30px 0}.flow-row .flow-vis{order:2}}
.flow-n{font-family:var(--disp); font-weight:600; font-size:.78rem; color:var(--coral-ink); letter-spacing:.12em}
.flow-txt h3{font-size:1.32rem; margin:9px 0 10px}
.flow-txt p{color:var(--slate); font-size:1rem; line-height:1.55; max-width:44ch}
.flow-vis{background:var(--panel); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow); min-height:190px; padding:22px; display:flex; flex-direction:column; justify-content:center; gap:10px}
.mini{font-size:.85rem}
.mini .row{display:flex; align-items:center; gap:9px; padding:6px 10px; background:var(--paper); border:1px solid var(--border); border-radius:9px; color:var(--ink); margin-bottom:8px}
.mini .row:last-child{margin-bottom:0}
.mini .dot{width:8px; height:8px; border-radius:50%; background:var(--grey-blue); flex:none}
.mini .dot.on{background:var(--coral)}
.bubble{max-width:78%; padding:9px 13px; border-radius:14px; font-size:.86rem; line-height:1.4}
.bubble.them{background:var(--panel-blue); color:var(--ink); border-bottom-left-radius:4px}
.bubble.me{background:var(--navy); color:#EAF1F8; align-self:flex-end; border-bottom-right-radius:4px}
:root[data-theme="dark"] .bubble.me{background:var(--grey-blue); color:#0F1621}
.gauge{display:flex; align-items:center; gap:12px}
.gauge .track{flex:1; height:10px; background:var(--panel-blue); border-radius:99px; overflow:hidden}
.gauge .track i{display:block; height:100%; background:var(--coral); border-radius:99px}
.gauge b{font-family:var(--disp); font-variant-numeric:tabular-nums; color:var(--ink)}
.chip{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid var(--border); background:var(--paper); border-radius:10px; font-size:.85rem; color:var(--ink)}
.chip .tick{color:#2FA36B; font-weight:700}

/* pillars */
.tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:34px}
@media(max-width:760px){.tiles{grid-template-columns:1fr}}
.tile{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:24px}
.tile h3{font-size:1.08rem; margin-bottom:7px}
.tile p{color:var(--slate); font-size:.95rem; line-height:1.5}
.tile .k{font-family:var(--disp); font-weight:600; color:var(--coral-ink); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; display:block; margin-bottom:10px}

/* evidence cards */
.vgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:34px}
@media(max-width:760px){.vgrid{grid-template-columns:1fr}}
.vcard{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:24px}
.vcard h3{font-size:1.08rem; margin-bottom:8px}
.vcard p{color:var(--slate); font-size:.95rem; line-height:1.5}
.vlink{display:inline-flex; align-items:center; gap:7px; margin-top:14px; font-family:var(--disp); font-weight:600; font-size:.85rem; color:var(--coral-ink)}
.note{margin-top:26px; border-left:3px solid var(--grey-blue); padding:6px 0 6px 18px; color:var(--slate); font-size:.95rem; max-width:64ch}
.note b{color:var(--ink)}

/* integrity */
.sub-h{font-family:var(--disp); font-weight:600; color:var(--ink); font-size:1.24rem; letter-spacing:-.02em; margin-top:56px}
.sub-l{color:var(--slate); font-size:.98rem; max-width:62ch; margin-top:8px; line-height:1.55}
.tablewrap{overflow-x:auto; margin-top:18px; border:1px solid var(--border); border-radius:14px}
table{border-collapse:collapse; width:100%; min-width:640px; font-size:.9rem}
thead th{font-family:var(--disp); font-size:.64rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--slate); text-align:left; padding:11px 14px; background:var(--panel); border-bottom:1px solid var(--border); white-space:nowrap}
tbody td{padding:12px 14px; border-top:1px solid var(--border); vertical-align:top; color:var(--slate); line-height:1.5}
tbody td.no{color:var(--ink); font-weight:600; min-width:180px}
tbody td.yes{color:var(--ink)}
.gates{margin-top:16px}
.gate{display:grid; grid-template-columns:26px 1fr; gap:14px; padding:15px 0; border-top:1px solid var(--border)}
.gate:first-child{border-top:none}
.gate .n{font-family:var(--disp); font-weight:600; color:var(--coral-ink); font-size:.85rem; font-variant-numeric:tabular-nums; padding-top:2px}
.gate h4{font-family:var(--disp); font-weight:600; color:var(--ink); font-size:1rem; margin:0 0 4px; letter-spacing:-.01em}
.gate p{color:var(--slate); font-size:.94rem; line-height:1.5; max-width:76ch}
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:20px}
@media(max-width:760px){.stats{grid-template-columns:1fr}}
.stat{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:22px}
.stat b{display:block; font-family:var(--disp); font-weight:600; font-size:1.85rem; color:var(--ink); letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1}
.stat span{display:block; color:var(--slate); font-size:.9rem; margin-top:9px; line-height:1.45}

/* price */
.pricebox{margin-top:30px; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:34px; box-shadow:var(--shadow); max-width:660px}
.pr-total{font-family:var(--disp); font-weight:600; font-size:clamp(2.6rem,7vw,3.6rem); color:var(--ink); letter-spacing:-.02em; line-height:1; font-variant-numeric:tabular-nums}
.pr-meta{color:var(--slate); margin-top:10px; font-size:1.02rem}
.pr-meta b{color:var(--ink); font-variant-numeric:tabular-nums}
.pr-range{width:100%; margin-top:28px; accent-color:var(--coral); height:6px}
.pr-scale{display:flex; justify-content:space-between; color:var(--slate); font-size:.8rem; margin-top:8px; font-variant-numeric:tabular-nums}
.pr-disc{margin-top:16px; color:var(--coral-ink); font-weight:600; font-size:.92rem; min-height:1.2em}
.pr-real{margin-top:6px; color:var(--muted); font-size:.92rem; min-height:1.2em}

/* try it / final */
.final{background:var(--navy); border-radius:26px; padding:52px 44px; text-align:center; box-shadow:var(--shadow); margin:8px 0}
.final h2{color:#FCFCFA; font-size:clamp(1.7rem,3.4vw,2.3rem); max-width:22ch; margin:0 auto}
.final p{color:#C6D2E4; margin:16px auto 0; max-width:50ch; font-size:1.05rem}
.final .cta-row{justify-content:center; margin-top:30px}
.final .btn-primary{background:#FCFCFA; color:var(--navy)}
.final .btn-ghost{border-color:rgba(255,255,255,.28); color:#FCFCFA}
.faces-strip{display:flex; justify-content:center; margin-bottom:22px}
.faces-strip img{width:44px; height:44px; border-radius:50%; object-fit:cover; border:2px solid var(--navy); margin-left:-10px}
.faces-strip img:first-child{margin-left:0}
.try-steps{display:flex; justify-content:center; gap:26px; flex-wrap:wrap; margin-top:28px; color:#C6D2E4; font-size:.9rem}
.try-steps b{color:#FCFCFA; font-family:var(--disp); font-weight:600}
.freecred{margin-top:22px; font-family:var(--disp); font-weight:500; color:#FCFCFA; font-size:1.05rem}
.freecred b{color:#FFD9CE}
.try-note{margin-top:26px; padding-top:20px; border-top:1px solid rgba(252,252,250,.18); color:rgba(252,252,250,.72); font-size:.9rem; line-height:1.6; max-width:64ch; margin-left:auto; margin-right:auto}

/* footer */
footer{border-top:1px solid var(--border); padding:44px 0 60px; color:var(--slate); font-size:.9rem}
.foot{display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; align-items:flex-start}
.foot a{color:var(--slate)} .foot a:hover{color:var(--ink)}
.footlinks{display:flex; gap:22px; flex-wrap:wrap}

@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
a.btn:focus-visible, .themebtn:focus-visible{outline:2px solid var(--coral); outline-offset:3px}

/* the report: a guided walkthrough of the real document */
.rep-hero{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; padding:74px 0 66px}
@media(max-width:900px){.rep-hero{grid-template-columns:1fr; gap:38px; padding:48px 0 44px}}
.rep-hero h1{font-size:clamp(2.1rem,4.6vw,3.1rem); line-height:1.05; margin-top:18px; max-width:16ch}
.rep-hero .sub{font-size:1.15rem; color:var(--slate); margin-top:20px; max-width:48ch; line-height:1.5}
.rep-facts{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px}
.rep-fact{font-size:.85rem; color:var(--ink); background:var(--panel); border:1px solid var(--border); border-radius:99px; padding:7px 14px}
.rep-fact b{font-variant-numeric:tabular-nums}
.page-shot{display:block; width:100%; height:auto; border:1px solid var(--border-2); border-radius:10px; background:#fff; box-shadow:var(--shadow)}
.rep-hero .page-shot{max-width:430px; margin-left:auto}
/* A page image scaled to half a 1140px container is 620px wide and nearly 900
   tall, so a row became a wall of white either side of three lines of text.
   Capped, and aligned to the top, so a row is read rather than scrolled past. */
.walk-row .page-shot{max-width:400px}
@media(max-width:900px){.rep-hero .page-shot{margin:0 auto}}
.dl-note{margin-top:14px; font-size:.85rem; color:var(--slate)}

.deliv{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:32px}
@media(max-width:760px){.deliv{grid-template-columns:1fr}}
.deliv .d{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:24px}
.deliv .d h3{font-size:1.05rem; margin-bottom:7px}
.deliv .d p{color:var(--slate); font-size:.94rem; line-height:1.5}
.deliv .d .tag{display:block; font-family:var(--disp); font-weight:600; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--coral-ink); margin-bottom:10px}

.walk{margin-top:20px}
.walk-row{display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:start; padding:52px 0; border-top:1px solid var(--border)}
.walk-row .shot{display:flex; justify-content:center}
.walk-row:nth-child(even) .walk-txt{justify-self:end}
.walk-row:first-child{border-top:none}
@media(max-width:860px){.walk-row{grid-template-columns:1fr; gap:26px; padding:36px 0}.walk-row .shot{order:2}}
.walk-row:nth-child(even) .shot{order:-1}
@media(max-width:860px){.walk-row:nth-child(even) .shot{order:2}}
.walk-n{font-family:var(--disp); font-weight:600; font-size:.74rem; color:var(--coral-ink); letter-spacing:.12em}
.walk-txt h3{font-size:1.28rem; margin:9px 0 10px; max-width:20ch}
.walk-txt p{color:var(--slate); font-size:1rem; line-height:1.58; max-width:46ch}
.walk-txt p + p{margin-top:12px}
.walk-txt .why{margin-top:14px; border-left:3px solid var(--grey-blue); padding:2px 0 2px 16px; font-size:.94rem; color:var(--slate); max-width:46ch}
.walk-txt .why b{color:var(--ink)}

/* A prose section with nothing beside it: put the lede and its note side by
   side rather than leaving half the container empty. */
.two-col{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:start; margin-top:16px}
@media(max-width:860px){.two-col{grid-template-columns:1fr; gap:22px}}
.two-col .sec-l{margin-top:0}
.two-col .note{margin-top:0}

/* A band of dark, so eight pale rows do not run into one another. */
.band{background:var(--navy); border-top:none}
:root[data-theme="dark"] .band{background:#0F1621}
.band .eyebrow{color:#FF9075}
.band h2,.band .sec-h{color:#FCFCFA}
.band .sec-l,.band p{color:#C6D2E4}
.band .note{border-left-color:var(--grey-blue)}
.band .note b{color:#FCFCFA}
.band .btn-ghost{border-color:rgba(255,255,255,.3); color:#FCFCFA}

/* A second chance to download, where someone is convinced but eight screens
   from the bottom of the page. */
.midcta{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px;
        margin-top:44px; padding:26px 30px; background:var(--panel-blue); border:1px solid var(--border); border-radius:var(--radius)}
.midcta p{font-family:var(--disp); font-weight:600; color:var(--ink); font-size:1.05rem; max-width:34ch}