/* Layout: warm donker voor de momenten die indruk maken (hero, uren vs werk, check), crème voor alles wat gelezen wordt. Amber alleen op donker. */
:root{
  --night:#1D1B18;
  --night-2:#28241F;
  --line-dark:#3A352F;
  --cream:#F3EEE4;
  --cream-2:#EAE3D6;
  --paper:#FBF8F2;
  --ink:#1D1B18;
  --body:#45403A;
  --soft:#6A6257;
  --rule:#D9D0C1;
  --amber:#E9A23B;
  --navy:#1D1B18;
  --on-dark:#F3EEE4;
  --on-dark-soft:#BDB4A6;
  --ok:#2F6B4F; --err:#A12F1C; --on-dark-mute:#8C8378; --rule-soft:#E7E0D3;
  --f-head:'Bricolage Grotesque','DM Sans',system-ui,Arial,sans-serif;
  --f-body:'DM Sans',system-ui,Arial,sans-serif;
  --f-mono:'DM Mono',ui-monospace,Menlo,Consolas,monospace;
  --r-card:16px; --r-btn:999px;
  --ease-out:cubic-bezier(.16,1,.3,1); --ease-std:cubic-bezier(.4,0,.2,1);
  --dur-fast:.15s; --dur-base:.25s; --dur-reveal:.6s;
  --wrap:1200px;
  color-scheme:light;
  /* typografische schaal (5 nov): alle vaste lettergroottes komen hieruit */
  --fs-2xs:12px; --fs-xs:13px; --fs-sm:14px; --fs-md:15px; --fs-ui:16px; --fs-base:17px; --fs-lg:19px; --fs-xl:20px; --fs-2xl:24px; --fs-3xl:28px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition-duration:.01ms!important;transition-delay:0s!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
body{margin:0;background:var(--cream);color:var(--body);font-family:var(--f-body);font-size:var(--fs-base);line-height:1.6;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--night)}
h1,h2,h3{font-family:var(--f-head);color:var(--ink);margin:0;text-wrap:balance;letter-spacing:-.025em}
h1{font-size:clamp(44px,6.6vw,92px);line-height:.98;font-weight:800;letter-spacing:-.045em}
h2{font-size:clamp(32px,3.8vw,50px);line-height:1.05;font-weight:800;letter-spacing:-.035em}
h3{font-size:clamp(20px,1.8vw,24px);line-height:1.2;font-weight:700}
p{margin:0}
a{color:var(--ink)}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.band{padding-block:clamp(72px,9vw,128px);background:var(--cream)}
.band.mist{background:var(--cream-2)}
.band.dark{background:var(--night);color:var(--on-dark-soft)}
.band.dark h2,.band.dark h3{color:var(--on-dark)}
.band.dark .lede{color:var(--on-dark-soft)}
.lede{font-size:clamp(18px,1.6vw,20px);line-height:1.55;color:var(--body);max-width:60ch}
.small{font-size:var(--fs-sm);color:var(--soft)}
.hl{color:var(--amber)}

/* knoppen */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-body);font-weight:600;font-size:var(--fs-ui);padding:15px 24px;border-radius:var(--r-btn);text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:background .15s,border-color .15s,color .15s,transform .1s var(--ease-std)}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--ink);color:var(--cream)}
.btn-primary:hover{background:var(--navy)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn-ghost:hover{border-color:var(--ink)}
.on-dark .btn-primary,.band.dark .btn-primary,.check .btn-primary{background:var(--amber);color:var(--night)}
.on-dark .btn-primary:hover,.band.dark .btn-primary:hover,.check .btn-primary:hover{background:#F2B65A}
.on-dark .btn-ghost{color:var(--on-dark);border-color:var(--line-dark)}
.on-dark .btn-ghost:hover{border-color:var(--on-dark-soft)}
.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
.arrow{transition:transform .15s}
.btn:hover .arrow{transform:translateX(3px)}

/* header */
header.site{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(29,27,24,.92);backdrop-filter:saturate(1.3) blur(10px);border-bottom:1px solid var(--line-dark)}
.nav{display:flex;align-items:center;gap:32px;height:76px}
.nav img{height:32px;width:auto;display:block}
.nav ul{display:flex;gap:28px;list-style:none;margin:0 0 0 auto;padding:0}
.nav ul a{color:var(--on-dark-soft);text-decoration:none;font-size:var(--fs-md);font-weight:500}
.nav ul a:hover{color:var(--on-dark)}
.nav .btn{padding:11px 18px;font-size:var(--fs-md);background:var(--cream);color:var(--night)}
.nav .btn:hover{background:var(--amber)}
@media (max-width:900px){.nav ul{display:none}.nav .btn{margin-left:auto}}
@media (max-width:460px){.nav img{height:24px}.nav .btn{padding:10px 14px;font-size:var(--fs-sm)}}

/* hero */
.hero{background:var(--night);color:var(--on-dark-soft);padding-block:clamp(56px,7vw,104px) 0;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(40px,6vw,80px);align-items:center;padding-bottom:clamp(64px,7vw,104px)}
.hero-copy{display:flex;flex-direction:column;gap:28px;min-width:0}
.hero .kicker{font-family:var(--f-mono);font-size:var(--fs-sm);color:var(--amber);letter-spacing:.03em}
.hero h1{color:var(--on-dark)}
.hero .lede{color:var(--on-dark-soft)}
.hero .cta{display:flex;flex-wrap:wrap;gap:12px}
.hero .from{font-size:var(--fs-sm);color:var(--on-dark-soft)}
.hero .from b{color:var(--on-dark);font-weight:600}
.promise-bar{border-top:1px solid var(--line-dark)}
.promise-bar ul{display:flex;flex-wrap:wrap;gap:10px 40px;list-style:none;margin:0 auto;padding-block:22px;font-size:var(--fs-md);color:var(--on-dark-soft)}
.promise-bar li{display:flex;align-items:center;gap:10px}
.promise-bar li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--amber)}
@media (max-width:960px){.hero-grid{grid-template-columns:1fr}}

/* het maandoverzicht als document */
.sheet-wrap{position:relative;transform:rotate(-2deg);margin:16px 8px 0}
.sheet{background:var(--paper);color:var(--ink);border-radius:6px;padding:34px 34px 28px;box-shadow:0 40px 80px -30px rgba(0,0,0,.65);font-variant-numeric:tabular-nums}
.sheet-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-bottom:16px;border-bottom:1px dashed #C9BFAE}
.sheet-head h3{font-size:var(--fs-2xl);color:var(--ink)}
.sheet-head .meta{font-family:var(--f-mono);font-size:var(--fs-2xs);color:var(--soft);text-align:right}
.sheet ul{list-style:none;margin:0;padding:4px 0}
.sheet li{display:grid;grid-template-columns:22px 1fr auto;gap:10px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--rule-soft);font-size:var(--fs-md)}
.sheet li:last-child{border-bottom:0}
.sheet li .chk{color:var(--ok);font-weight:700;font-family:var(--f-mono)}
.sheet li .q{font-family:var(--f-mono);font-size:var(--fs-xs);color:var(--soft)}
.sheet-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;border-top:2px solid var(--ink);padding-top:18px;margin-top:4px}
.sheet-foot .price{font-family:var(--f-head);font-weight:800;font-size:42px;letter-spacing:-.03em;line-height:1}
.sheet-foot .when{font-size:var(--fs-xs);color:var(--soft);text-align:right;line-height:1.45}
.stamp{position:absolute;top:-18px;right:26px;transform:rotate(6deg);border:2px solid var(--navy);color:var(--ink);background:var(--paper);font-family:var(--f-mono);font-size:var(--fs-2xs);letter-spacing:.1em;text-transform:uppercase;padding:7px 12px;border-radius:6px}
@media (max-width:460px){.sheet-wrap{transform:rotate(-1deg);margin:12px 0 0}.sheet{padding:24px 18px 20px}.sheet li{grid-template-columns:18px 1fr auto;font-size:var(--fs-md)}.sheet-head{flex-direction:column;gap:4px}.sheet-head .meta{text-align:left}}

/* probleem */
.problem{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:start}
.problem .scatter{display:flex;flex-direction:column;gap:12px;margin-top:32px}
.problem .scatter div{display:flex;justify-content:space-between;gap:16px;padding:14px 18px;background:var(--paper);border:1px solid var(--rule);border-radius:10px;font-size:var(--fs-md);color:var(--ink)}
.problem .scatter span{font-family:var(--f-mono);font-size:var(--fs-xs);color:var(--soft);white-space:nowrap}
.problem .scatter div:nth-child(2){margin-left:24px;transform:rotate(.6deg)}
.problem .scatter div:nth-child(3){margin-left:8px;transform:rotate(-.8deg)}
.problem .scatter div:nth-child(4){margin-left:36px;transform:rotate(.4deg)}
.problem .scatter div:nth-child(5){transform:rotate(-.5deg)}
.problem-text{display:flex;flex-direction:column;gap:20px;min-width:0}
.problem-text .turn{font-family:var(--f-head);font-weight:800;font-size:var(--fs-3xl);color:var(--ink);line-height:1.2;letter-spacing:-.02em}
@media (max-width:860px){.problem{grid-template-columns:1fr}.problem .scatter div{margin-left:0!important}}

/* uren vs werk (donker) */
.sec-head{display:flex;flex-direction:column;gap:16px;margin-bottom:48px;max-width:720px}
.vs-head{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end;margin-bottom:48px}
.quote{max-width:32ch;border-left:3px solid var(--amber);padding-left:20px}
.quote p{font-family:var(--f-head);font-weight:700;font-size:var(--fs-2xl);color:var(--on-dark);line-height:1.3;letter-spacing:-.01em}
.quote cite{display:block;margin-top:8px;font-style:normal;font-size:var(--fs-sm);color:var(--on-dark-soft)}
.vs{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.col{border-radius:var(--r-card);padding:30px;display:flex;flex-direction:column;gap:18px;min-width:0}
.col.hours{background:var(--night-2);border:1px solid var(--line-dark);color:var(--on-dark-soft)}
.col.work{background:var(--paper);color:var(--ink)}
.col h3{font-size:var(--fs-xl)}
.band.dark .col.work h3{color:var(--ink)}
.col ul{list-style:none;margin:0;padding:0;font-variant-numeric:tabular-nums}
.col li{display:flex;justify-content:space-between;gap:16px;padding:12px 0;font-size:var(--fs-md)}
.col.hours li{border-bottom:1px solid var(--line-dark)}
.col.work li{border-bottom:1px solid var(--rule-soft)}
.col li span:last-child{font-family:var(--f-mono);font-size:var(--fs-xs);white-space:nowrap}
.col.hours li span:last-child{color:var(--on-dark-mute)}
.col.work li span:last-child{color:var(--ink);font-weight:500}
.col .verdict{font-size:var(--fs-md);line-height:1.5}
.col.work .verdict{color:var(--body)}
@media (max-width:860px){.vs,.vs-head{grid-template-columns:1fr}}

/* AI */
.ai{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,6vw,96px);align-items:start}
.ai-copy{display:flex;flex-direction:column;gap:20px;min-width:0}
.split{display:grid;border-top:2px solid var(--ink)}
.split > div{padding:24px 0;display:grid;grid-template-columns:170px 1fr;gap:24px;border-bottom:1px solid var(--rule)}
.split h4{margin:0;font-family:var(--f-head);font-size:var(--fs-base);font-weight:700;color:var(--ink);line-height:1.3}
.split p{font-size:var(--fs-ui);line-height:1.55}
.split > div.human h4{color:var(--ink)}
@media (max-width:860px){.ai{grid-template-columns:1fr}}
@media (max-width:520px){.split > div{grid-template-columns:1fr;gap:6px}}

/* pakketten */
.plans{display:grid;grid-template-columns:1.25fr 1fr;gap:20px;align-items:stretch}
.plan{border:1px solid var(--rule);border-radius:var(--r-card);padding:34px;display:flex;flex-direction:column;gap:20px;background:var(--paper);min-width:0}
.plan.main{background:var(--night);border-color:var(--night);color:var(--on-dark-soft)}
.plan.main h3,.plan.main .amount{color:var(--on-dark)}
.plan.main li{color:var(--on-dark)}
.plan.main .fine{color:var(--on-dark-soft);border-top-color:var(--line-dark)}
.plan.main .fine a{color:var(--amber)}
.plan.main .btn-primary{background:var(--amber);color:var(--night)}
.plan .top{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.plan .badge{font-size:var(--fs-2xs);font-weight:600;color:var(--ink);background:var(--cream-2);padding:5px 11px;border-radius:99px}
.plan.main .badge{background:var(--amber);color:var(--night)}
.plan .amount{font-family:var(--f-head);font-weight:800;font-size:52px;color:var(--ink);letter-spacing:-.04em;line-height:1}
.plan .amount small{font-family:var(--f-body);font-size:var(--fs-md);font-weight:500;color:var(--soft);letter-spacing:0;margin-left:6px}
.plan.main .amount small{color:var(--on-dark-soft)}
.plan .who{font-size:var(--fs-md)}
.plan ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.plan li{display:grid;grid-template-columns:18px 1fr;gap:10px;font-size:var(--fs-md);color:var(--ink);line-height:1.45}
.plan li::before{content:"✓";color:var(--ok);font-weight:700;font-family:var(--f-mono)}
.plan.main li::before{color:var(--amber)}
.plan .fine{font-size:var(--fs-xs);color:var(--soft);border-top:1px solid var(--rule);padding-top:16px;margin-top:auto}
.plan .btn{align-self:flex-start}
.singles{margin-top:20px;border:1px solid var(--rule);border-radius:var(--r-card);overflow:hidden;background:var(--paper)}
.singles-head{padding:22px 30px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:baseline;border-bottom:1px solid var(--rule)}
.singles-head h3{font-size:var(--fs-xl)}
.single{display:grid;grid-template-columns:200px 1fr auto;gap:24px;align-items:baseline;padding:18px 30px;border-bottom:1px solid var(--rule)}
.single:last-child{border-bottom:0}
.single strong{font-family:var(--f-head);color:var(--ink);font-size:var(--fs-base)}
.single p{font-size:var(--fs-md)}
.single .p{font-family:var(--f-head);font-weight:800;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums;font-size:var(--fs-lg)}
.single .p small{font-family:var(--f-body);font-weight:500;color:var(--soft);font-size:var(--fs-xs)}
.always{margin-top:32px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.always p{font-size:var(--fs-md);border-top:2px solid var(--ink);padding-top:14px}
.always strong{display:block;color:var(--ink);font-family:var(--f-head);font-size:var(--fs-base);margin-bottom:4px}
@media (max-width:900px){.plans{grid-template-columns:1fr}.always{grid-template-columns:1fr}}
@media (max-width:640px){.single{grid-template-columns:1fr auto;gap:4px 16px;padding:18px 20px}.single p{grid-column:1 / -1;grid-row:2}.plan{padding:24px}.singles-head{padding:20px}}

/* klantreis */
.toggle{display:inline-flex;background:var(--paper);border:1px solid var(--rule);border-radius:999px;padding:4px;gap:4px;margin-bottom:36px;max-width:100%;flex-wrap:wrap}
.toggle button{font:600 var(--fs-md) var(--f-body);border:0;background:transparent;color:var(--body);padding:11px 20px;border-radius:999px;cursor:pointer}
.toggle button[aria-selected="true"]{background:var(--night);color:var(--cream)}
.journey{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(32px,5vw,72px);align-items:start}
.journey-intro{display:flex;flex-direction:column;gap:16px;min-width:0}
.journey-intro .fict{font-size:var(--fs-xs);color:var(--soft);border:1px dashed var(--rule);border-radius:8px;padding:10px 14px;align-self:flex-start}
.steps{list-style:none;margin:0;counter-reset:s;background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-card);padding:8px 28px}
.steps li{counter-increment:s;display:grid;grid-template-columns:36px 1fr;gap:16px;padding:18px 0;border-bottom:1px solid var(--rule-soft)}
.steps li:last-child{border-bottom:0}
.steps li::before{content:counter(s);font-family:var(--f-mono);font-size:var(--fs-xs);color:var(--night);background:var(--amber);border-radius:50%;width:30px;height:30px;display:grid;place-items:center}
.steps strong{display:block;color:var(--ink);font-family:var(--f-head);font-size:var(--fs-base);margin-bottom:2px}
.steps p{font-size:var(--fs-md)}
.measure{margin-top:16px;font-size:var(--fs-sm);color:var(--ink)}
.measure code{font-family:var(--f-mono);font-size:var(--fs-2xs);background:var(--paper);border:1px solid var(--rule);border-radius:5px;padding:2px 6px;margin:3px 2px;display:inline-block;color:var(--ink)}
@media (max-width:860px){.journey{grid-template-columns:1fr}.steps{padding:4px 18px}}

/* eerste drie maanden */
.months{display:grid;grid-template-columns:repeat(3,1fr);border-top:2px solid var(--ink);margin-top:48px}
.month{padding:24px 24px 0 0;display:flex;flex-direction:column;gap:12px;min-width:0}
.month + .month{padding-left:24px;border-left:1px solid var(--rule)}
.month .m{font-family:var(--f-mono);font-size:var(--fs-xs);color:var(--ink)}
.month ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;font-size:var(--fs-md)}
.month li{display:flex;justify-content:space-between;gap:12px;border-bottom:1px dotted var(--rule);padding-bottom:6px}
.month li b{font-family:var(--f-mono);font-weight:500;color:var(--ink)}
.bar{height:6px;border-radius:3px;background:var(--cream-2);overflow:hidden;margin-top:4px}
.bar i{display:block;height:100%;background:var(--amber)}
.months-note{margin-top:32px;display:grid;grid-template-columns:1fr 1fr;gap:24px}
.months-note p{font-size:var(--fs-md);background:var(--cream-2);border-radius:10px;padding:18px 20px}
.months-note strong{color:var(--ink)}
@media (max-width:820px){.months{grid-template-columns:1fr}.month,.month + .month{padding:22px 0;border-left:0;border-bottom:1px solid var(--rule)}.months-note{grid-template-columns:1fr}}

/* niet beloven + faq */
.nots{display:grid;grid-template-columns:repeat(2,1fr);gap:16px 40px;margin-top:40px;padding:0;list-style:none}
.nots li{font-size:var(--fs-ui);padding:18px 0;border-top:1px solid var(--rule)}
.nots strong{display:block;color:var(--ink);font-family:var(--f-head);font-size:var(--fs-lg);margin-bottom:4px}
@media (max-width:760px){.nots{grid-template-columns:1fr}}
.faq{max-width:820px;margin-top:40px}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;padding:22px 40px 22px 0;font-family:var(--f-head);font-weight:700;font-size:var(--fs-lg);color:var(--ink);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:17px;font-size:var(--fs-3xl);font-weight:400;color:var(--ink);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 22px;max-width:68ch;font-size:var(--fs-ui)}

/* check */
.check{background:var(--night);color:var(--on-dark-soft)}
.check h2{color:var(--on-dark)}
.check-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(32px,6vw,88px);align-items:start}
.check-copy{display:flex;flex-direction:column;gap:20px;min-width:0}
.check-copy ol{margin:0;padding-left:20px;color:var(--on-dark);display:flex;flex-direction:column;gap:8px;font-size:var(--fs-ui)}
.check-copy ol li::marker{color:var(--amber);font-family:var(--f-mono)}
form.f{background:var(--paper);color:var(--body);border-radius:var(--r-card);padding:32px;display:grid;grid-template-columns:1fr 1fr;gap:18px 16px;min-width:0}
.f .full{grid-column:1 / -1}
.f label{display:flex;flex-direction:column;gap:6px;font-size:var(--fs-sm);font-weight:600;color:var(--ink)}
.f input,.f select{font:400 var(--fs-ui) var(--f-body);color:var(--ink);background:#FFFFFF;border:1px solid var(--rule);border-radius:10px;padding:12px 14px;width:100%;min-width:0}
.f .seg{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.f .seg label{flex-direction:row;align-items:center;gap:10px;border:1px solid var(--rule);border-radius:10px;padding:12px 14px;font-weight:500;cursor:pointer;background:#FFFFFF}
.f .seg label:has(input:checked){border-color:var(--ink);background:var(--cream)}
.f .seg input{width:auto;accent-color:var(--navy)}
.f fieldset{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.f legend{font-size:var(--fs-sm);font-weight:600;color:var(--ink);margin-bottom:6px}
.f .priv{font-size:var(--fs-xs);color:var(--soft)}
.f .hp{position:absolute;left:-9999px}
.f .btn{justify-self:start;background:var(--ink);color:var(--cream)}
.f .btn:hover{background:var(--navy)}
.done{grid-column:1 / -1;background:#EEF4F0;border:1px solid #CFE0D6;border-radius:10px;padding:16px 18px;color:var(--ink);font-size:var(--fs-md)}
@media (max-width:900px){.check-grid{grid-template-columns:1fr}}
@media (max-width:560px){form.f{grid-template-columns:1fr;padding:22px}.f .seg{grid-template-columns:1fr}}

/* case */
.case-top{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,88px);align-items:end;margin-bottom:56px}
.case-label{font-family:var(--f-mono);font-size:var(--fs-xs);color:var(--amber);margin-bottom:18px;display:block}
.case-big{display:flex;align-items:flex-end;gap:28px;flex-wrap:wrap;font-variant-numeric:tabular-nums}
.case-big div{display:flex;flex-direction:column;gap:6px}
.case-big .n{font-family:var(--f-head);font-weight:800;font-size:clamp(48px,6vw,84px);line-height:.9;letter-spacing:-.04em;color:var(--on-dark)}
.case-big .n.then{color:var(--on-dark-mute)}
.case-big .n.now{color:var(--amber)}
.case-big .l{font-size:var(--fs-sm);color:var(--on-dark-soft)}
.case-big .to{font-family:var(--f-head);font-size:40px;color:var(--on-dark-mute);padding-bottom:22px}
.chart{--k:1;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px;align-items:end;height:224px;border-bottom:1px solid var(--line-dark);margin-top:24px}
.chart .b{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px;min-width:0}
.chart .b i{display:block;width:100%;max-width:56px;background:#4A453E;border-radius:4px 4px 0 0}
.chart .b.last i{background:var(--amber)}
.chart .b.first i{background:#5E574E}
.chart .b span{font-family:var(--f-mono);font-size:var(--fs-2xs);color:var(--on-dark-soft)}
.chart .gap{display:flex;align-items:center;justify-content:center;height:100%;color:var(--soft);font-family:var(--f-mono);font-size:var(--fs-xs)}
.chart-x{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px;margin-top:10px;font-size:var(--fs-2xs);color:var(--on-dark-mute);text-align:center;font-family:var(--f-mono)}
.case-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:56px}
.case-points div{border-top:2px solid var(--amber);padding-top:16px;display:flex;flex-direction:column;gap:6px}
.case-points strong{font-family:var(--f-head);font-weight:800;font-size:var(--fs-3xl);letter-spacing:-.02em;color:var(--on-dark);line-height:1.1}
.case-points p{font-size:var(--fs-md);color:var(--on-dark-soft)}
.case-src{margin-top:36px;font-size:var(--fs-xs);color:var(--on-dark-mute);max-width:80ch}
@media (max-width:860px){.case-top,.case-points{grid-template-columns:1fr}.chart{--k:.75;height:176px;gap:6px}.chart-x{gap:6px;font-size:var(--fs-2xs)}}
.case-sub{border-top:1px solid var(--line-dark);padding-top:40px;margin-top:8px}
.case-sub + .case-sub{margin-top:64px}
.case-sub h3{font-size:clamp(22px,2.2vw,28px);margin-bottom:28px;color:var(--on-dark)}
.case-sub .case-points{margin-top:32px}
.case-sub > .case-points:first-of-type{margin-top:0}
.case-points strong.big{font-size:clamp(44px,4.6vw,64px);color:var(--amber);letter-spacing:-.04em;line-height:1}
.case-quote{margin-top:32px;font-family:var(--f-head);font-weight:700;font-size:clamp(19px,1.8vw,23px);line-height:1.35;color:var(--on-dark);max-width:52ch;border-left:3px solid var(--amber);padding-left:20px}

.hero .kicker{font-family:var(--f-body);font-size:var(--fs-md);font-weight:600;color:var(--amber);letter-spacing:0}
.case-label{font-family:var(--f-body)!important;font-size:var(--fs-sm)!important;font-weight:600;letter-spacing:0}
.problem-text .turn{color:var(--ink)}
.plans-more{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px 28px;align-items:baseline;justify-content:space-between;border-top:1px solid var(--rule);padding-top:22px}
.plans-more p{font-size:var(--fs-ui);color:var(--body)}
.plans-more p b{color:var(--ink)}
.plans-more a{font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.page-hero{background:var(--night);color:var(--on-dark-soft);padding-block:clamp(56px,7vw,96px)}
.page-hero h1{color:var(--on-dark);font-size:clamp(40px,5.4vw,72px)}
.page-hero .lede{color:var(--on-dark-soft);margin-top:20px}
.page-hero nav{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.page-hero nav a{color:var(--on-dark);text-decoration:none;border:1px solid var(--line-dark);border-radius:999px;padding:9px 16px;font-size:var(--fs-md);font-weight:500}
.page-hero nav a:hover{border-color:var(--amber);color:var(--amber)}
.nav ul a[aria-current="page"]{color:var(--on-dark)}
footer{background:var(--night);color:var(--on-dark-soft);border-top:1px solid var(--line-dark);padding-block:40px;font-size:var(--fs-sm)}
.foot{display:flex;flex-wrap:wrap;gap:16px 32px;justify-content:space-between;align-items:center}
.foot img{height:26px;width:auto;display:block}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 22px}
.foot a{color:var(--on-dark);text-decoration:none}
.foot a:hover{text-decoration:underline}
.foot button{font:inherit;color:var(--on-dark);background:none;border:1px solid var(--line-dark);border-radius:999px;padding:6px 14px;cursor:pointer}