/* Base reset */
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
img{max-width:100%}
[hidden]{display:none!important}

/* Layout: 1100px centered column, generous section rhythm, zig-zag feature rows,
   floating white product cards. ~80% ink/paper, 15% sage/mist, ≤5% freedom green. */
:root{
  --ink:#000000; --paper:#FAFAFA; --surface:#FFFFFF;
  --green:#429E59; --green-deep:#2F7A43; --green-text:#2F7A43;
  --sage:#DDE2DE; --mist:#E7F3F8; --muted:#6B6B6B; --line:#E5E5E5;
  --red:#D24842; --teal:#42A89C;
  --on-ink:#FFFFFF; --shadow:0 8px 24px rgba(0,0,0,.06); --shadow-lg:0 18px 48px rgba(0,0,0,.10);
  --chart-fill:rgba(0,0,0,.06); --green-fill:rgba(66,158,89,.16);
  --hero-bg:#000000; --hero-fg:#FFFFFF; --hero-green:#5BBE74; --hero-line:transparent;
  --f-display:"Archivo","Arial Black",Impact,system-ui,sans-serif;
  --f-body:"Newsreader",Georgia,"Times New Roman",serif;
  --f-ui:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --fronds:url("/assets/img/fronds.jpg");
  --pill:#2E7340; --pill-hover:#255E34;
  --max:1100px; --r:6px; --r-card:8px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#F5F5F3; --paper:#0E0F0E; --surface:#171917;
    --green:#5BBE74; --green-deep:#4AA862; --green-text:#6FCB86;
    --sage:#1C211D; --mist:#152227; --muted:#A3A8A4; --line:#2A2E2B;
    --red:#E8706A; --teal:#5BC2B5;
    --on-ink:#0E0F0E; --shadow:0 8px 24px rgba(0,0,0,.4); --shadow-lg:0 18px 48px rgba(0,0,0,.5);
    --chart-fill:rgba(245,245,243,.07); --green-fill:rgba(91,190,116,.18);
    --hero-bg:#050605; --hero-fg:#F5F5F3; --hero-green:#6FCB86; --hero-line:#2A2E2B;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ink:#F5F5F3; --paper:#0E0F0E; --surface:#171917;
  --green:#5BBE74; --green-deep:#4AA862; --green-text:#6FCB86;
  --sage:#1C211D; --mist:#152227; --muted:#A3A8A4; --line:#2A2E2B;
  --red:#E8706A; --teal:#5BC2B5;
  --on-ink:#0E0F0E; --shadow:0 8px 24px rgba(0,0,0,.4); --shadow-lg:0 18px 48px rgba(0,0,0,.5);
  --chart-fill:rgba(245,245,243,.07); --green-fill:rgba(91,190,116,.18);
  --hero-bg:#050605; --hero-fg:#F5F5F3; --hero-green:#6FCB86; --hero-line:#2A2E2B;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:18px;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(--paper)}
a{color:inherit}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:3px}
.wrap{max-width:var(--max);margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.num,.tab-num{font-variant-numeric:tabular-nums}

/* ---------- type ---------- */
.display{font-family:var(--f-display);font-stretch:125%;font-weight:800;text-transform:uppercase;letter-spacing:-.01em;line-height:1.05;text-wrap:balance;margin:0}
h1.display{font-size:clamp(34px,6.4vw,72px)}
h2.display{font-size:clamp(26px,4.2vw,46px)}
h3.display{font-size:clamp(17px,2vw,21px);line-height:1.15}
.hl{color:var(--green)}
.eyebrow{font-family:var(--f-display);font-stretch:125%;font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--green-text);margin:0 0 14px}
.lede{font-size:clamp(18px,2vw,21px);line-height:1.55;max-width:34em;margin:18px 0 0;text-wrap:pretty}
.muted{color:var(--muted)}
p{margin:0 0 1em;text-wrap:pretty}
.prose{max-width:38em}
.prose p:last-child{margin-bottom:0}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:14px 28px;border-radius:var(--r);border:1.5px solid var(--ink);background:var(--ink);color:var(--on-ink);font-family:var(--f-display);font-stretch:125%;font-weight:700;font-size:13px;letter-spacing:.07em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background .15s,color .15s,transform .15s}
.btn:hover{background:var(--green-deep);border-color:var(--green-deep);color:#fff}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.btn.sm{min-height:38px;padding:9px 16px;font-size:11.5px}
.btn:disabled{opacity:.5;cursor:default}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.textlink{font-family:var(--f-display);font-stretch:125%;font-weight:700;font-size:12px;letter-spacing:.07em;text-transform:uppercase;text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:2px;background:none;border-top:0;border-left:0;border-right:0;cursor:pointer}

/* ---------- header ---------- */
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:saturate(1.2) blur(10px);-webkit-backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid var(--line)}
.head-row{display:flex;align-items:center;gap:20px;height:68px}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.logo svg{width:34px;height:34px;flex:none}
.logo span{font-family:var(--f-display);font-stretch:125%;font-weight:900;font-size:17px;letter-spacing:-.01em;text-transform:uppercase;white-space:nowrap}
.mainnav{display:flex;gap:4px;margin-left:auto;align-items:center}
.mainnav a{font-family:var(--f-display);font-stretch:125%;font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;padding:10px 15px;border-radius:99px;transition:background .15s,color .15s}
.mainnav a:hover{background:var(--sage)}
.mainnav a[aria-current="page"]{background:var(--pill);color:#fff}
.mainnav a[aria-current="page"]:hover{background:var(--pill-hover);color:#fff}
.mainnav{position:relative}
.nav-pill{display:none}
.mobile-nav a[aria-current="page"]{background:var(--pill);color:#fff;border-radius:6px;padding-inline:14px;border-bottom-color:transparent}
.head-cta{margin-left:10px}
.menu-btn{display:none;margin-left:auto;width:44px;height:44px;border:1.5px solid var(--ink);border-radius:var(--r);background:transparent;align-items:center;justify-content:center;cursor:pointer}
.mobile-nav{display:none;border-top:1px solid var(--line);padding-block:8px 18px}
.mobile-nav a{display:block;font-family:var(--f-display);font-stretch:125%;font-weight:800;font-size:22px;text-transform:uppercase;text-decoration:none;padding:12px 0;border-bottom:1px solid var(--line)}
.mobile-nav .btn{margin-top:16px;width:100%}
@media (max-width:860px){
  .mainnav,.head-cta{display:none}
  .menu-btn{display:inline-flex}
  .site-head.open .mobile-nav{display:block}
}

/* ---------- views ---------- */
.view{display:none}
.view.on{display:block}
#signup,#coachForm{scroll-margin-top:96px}
section.band{padding-block:clamp(64px,10vw,140px)}
section.band.tight{padding-block:clamp(48px,7vw,96px)}
.band.sage{background:var(--sage)}
.band.surface{background:var(--surface);border-block:1px solid var(--line)}

/* ---------- hero ---------- */
.hero{padding-block:clamp(48px,8vw,104px) clamp(56px,8vw,112px);position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,5vw,64px);align-items:center}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}}
.hero .btn-row{margin-top:32px}
.hero-art{position:relative;min-height:420px}
@media (max-width:900px){.hero-art{min-height:0}}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow)}
.float-stack{position:relative;display:grid;gap:18px}
.float-stack .card:nth-child(1){transform:rotate(-1.2deg)}
.float-stack .card:nth-child(2){transform:rotate(1deg) translateX(8%);margin-top:-6px}
@media (max-width:900px){.float-stack .card:nth-child(2){transform:rotate(.6deg) translateX(3%)}}

.fn-card{padding:22px 22px 20px;font-family:var(--f-ui)}
.fn-card .lab{font-size:12px;font-weight:600;color:var(--muted);display:block;margin-bottom:6px}
.money-in{display:flex;align-items:center;border:1.5px solid var(--ink);border-radius:var(--r);background:var(--paper);padding:0 12px;height:52px}
.money-in span{font-weight:600;color:var(--muted)}
.money-in input{border:0;background:transparent;outline:none;width:100%;font-size:22px;font-weight:700;padding:0 6px;font-variant-numeric:tabular-nums}
.money-in:focus-within{outline:2px solid var(--green);outline-offset:2px}
.fn-out{margin-top:16px;display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.fn-out .big{font-family:var(--f-display);font-stretch:125%;font-weight:900;font-size:clamp(30px,4.6vw,44px);line-height:1;color:var(--green);font-variant-numeric:tabular-nums}
.fn-math{font-size:12.5px;color:var(--muted);margin-top:12px;border-top:1px dashed var(--line);padding-top:10px;font-variant-numeric:tabular-nums}

.mini-card{padding:16px 18px;font-family:var(--f-ui)}
.mini-card .top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:12px;color:var(--muted);font-weight:600}
.mini-card .v{font-size:22px;font-weight:700;margin-top:2px;font-variant-numeric:tabular-nums}

.starburst{position:absolute;width:128px;height:128px;display:grid;place-items:center;text-align:center;transform:rotate(-15deg);z-index:3;text-decoration:none;color:#000}
.starburst svg{position:absolute;inset:0;width:100%;height:100%}
.starburst b{position:relative;font-family:var(--f-display);font-stretch:125%;font-weight:900;font-size:11.5px;line-height:1.15;letter-spacing:.03em;text-transform:uppercase;max-width:84px}
.starburst:hover{transform:rotate(-8deg) scale(1.04)}
.hero .starburst{top:-34px;right:-10px}
@media (max-width:900px){.hero .starburst{top:-72px;right:-2px;width:96px;height:96px}.hero .starburst b{font-size:10px;max-width:64px}.hero-art{margin-top:40px}}

.doodle{position:absolute;pointer-events:none;color:var(--ink)}

/* ---------- features ---------- */
.feat{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,6vw,88px);align-items:center;padding-block:clamp(40px,6vw,72px)}
.feat + .feat{border-top:1px solid var(--line)}
.feat.flip .feat-vis{order:2}
@media (max-width:800px){.feat{grid-template-columns:1fr}.feat.flip .feat-vis{order:0}}
.feat h3{margin-bottom:14px}
.feat .btn{margin-top:20px}
.feat-vis{position:relative}
.ui-card{padding:18px;font-family:var(--f-ui);font-size:14px}
.ui-card h4{font-size:15px;font-weight:700;margin:0 0 12px;display:flex;gap:8px;align-items:center}
.ui-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:8px 0;border-top:1px solid var(--line);font-variant-numeric:tabular-nums}
.ui-row .neg{color:var(--red)}
.ui-row .pos{color:var(--green-text);font-weight:600}
.bar{height:6px;background:var(--line);border-radius:3px;overflow:hidden;margin-top:6px}
.bar i{display:block;height:100%;background:var(--ink);border-radius:3px}
.goal{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.goal .ic{width:36px;height:36px;border-radius:8px;display:grid;place-items:center;background:var(--mist);color:var(--teal)}
.goal .meta{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.demo-tag{font-family:var(--f-ui);font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:99px;padding:2px 8px;margin-left:auto}

/* ---------- tool cards ---------- */
.tool-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:16px;margin-top:40px}
.tool-card{container-type:inline-size;min-width:0;display:flex;flex-direction:column;gap:10px;padding:22px;text-decoration:none;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);transition:transform .15s,box-shadow .15s,border-color .15s}
.tool-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--ink)}
.tool-card .ic{width:40px;height:40px;border-radius:8px;background:var(--paper);border:1px solid var(--line);display:grid;place-items:center}
.tool-card h3.display{font-size:clamp(14px,12.4cqi,21px);max-width:100%}
.tool-card h3.display.squeeze{overflow-wrap:anywhere}
.tool-card .q{font-family:var(--f-body);font-style:italic;color:var(--muted);font-size:17px;line-height:1.35}
.tool-card .go{margin-top:auto;padding-top:8px;font-family:var(--f-display);font-stretch:125%;font-weight:700;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase}

/* ---------- math strip ---------- */
.mathstrip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-block:1.5px solid var(--ink);margin-top:40px}
.mathstrip > div{padding:24px 22px;border-right:1px solid var(--line)}
.mathstrip > div:last-child{border-right:0}
.mathstrip .yrs{font-family:var(--f-ui);font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.mathstrip .val{font-family:var(--f-display);font-stretch:125%;font-weight:900;font-size:clamp(28px,4vw,44px);line-height:1.05;margin-top:6px;font-variant-numeric:tabular-nums}
.mathstrip > div:last-child .val{color:var(--green)}
@media (max-width:640px){.mathstrip{grid-template-columns:1fr}.mathstrip > div{border-right:0;border-bottom:1px solid var(--line)}.mathstrip > div:last-child{border-bottom:0}}
blockquote.formula{margin:28px 0 0;padding:18px 20px;border-left:3px solid var(--ink);background:var(--surface);font-family:var(--f-ui);font-size:15px;max-width:40em}

/* ---------- work forever ---------- */
/* A two-way switch. Idle, a ghost thumb drifts between the answers; picking one snaps the thumb over,
   scribbles on the headline, warms the photo and opens the reveal below. */
.forever{text-align:center;overflow:hidden}
.forever-bg{position:absolute;inset:-3%;z-index:-2;background:var(--fronds) center 45%/cover;scale:1.1;transition:scale 1.8s cubic-bezier(.2,.8,.2,1),filter 1.8s cubic-bezier(.2,.8,.2,1)}
.motion .forever-bg{animation:bg-drift 26s ease-in-out infinite alternate}
@keyframes bg-drift{from{translate:-1.5% 0}to{translate:1.5% -1.5%}}
.forever[data-state="yes"] .forever-bg{scale:1.04}
.forever[data-state="no"] .forever-bg{scale:1;filter:brightness(1.08) saturate(1.3)}
.forever::after{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity 1.4s;background:radial-gradient(ellipse 70% 60% at 50% 72%,rgba(91,190,116,.55),transparent 70%)}
.forever[data-state="yes"]::after{opacity:1;background:radial-gradient(ellipse 70% 60% at 50% 72%,rgba(255,255,255,.16),transparent 70%)}
.forever[data-state="no"]::after{opacity:1}
.forever .eyebrow{color:#7CD794;transition:opacity .4s}
.forever[data-state] .forever-hint{opacity:.55}
.forever-word{position:relative;display:inline-block;transition:opacity .6s .3s}
.forever[data-state="no"] .forever-word{opacity:.7}
.scribble{position:absolute;left:-3%;top:0;width:106%;height:100%;overflow:visible;pointer-events:none;fill:none;stroke:#fff;stroke-linecap:round}
.scribble path{stroke-dasharray:1 1;stroke-dashoffset:1;opacity:0}
.scribble .strike{stroke-width:5}
.scribble .under{stroke-width:4;stroke:#7CD794}
.forever[data-state="no"] .strike{stroke-dashoffset:0;opacity:1;animation:draw .5s .2s cubic-bezier(.6,0,.3,1) both}
.forever[data-state="yes"] .under{stroke-dashoffset:0;opacity:1;animation:draw .7s .2s cubic-bezier(.6,0,.3,1) both}

.switch{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;margin-top:34px;padding:6px;border:2px solid rgba(255,255,255,.9);border-radius:99px;background:rgba(0,0,0,.3);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.switch button{position:relative;z-index:1;border:0;background:transparent;color:#fff;cursor:pointer;min-height:58px;padding:14px 32px;border-radius:99px;font-family:var(--f-display);font-stretch:125%;font-weight:800;font-size:14px;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;transition:color .35s}
.switch button:focus-visible{outline:2px solid #fff;outline-offset:3px}
.switch button[aria-checked="true"]{color:#000}
.switch.chosen button:not([aria-checked="true"]):hover{color:#7CD794}
.switch-thumb{position:absolute;top:6px;bottom:6px;left:6px;width:calc(50% - 6px);border-radius:99px;background:rgba(255,255,255,.14);border:1.5px dashed rgba(255,255,255,.6);transition:translate .65s cubic-bezier(.34,1.56,.64,1),background .35s,border-color .35s,box-shadow .5s}
.motion .switch:not(.chosen) .switch-thumb{animation:nudge 3.4s ease-in-out infinite}
@keyframes nudge{0%,28%{translate:0 0}50%,78%{translate:100% 0}100%{translate:0 0}}
.switch:not(.chosen):hover .switch-thumb{animation:none}
.switch:not(.chosen):has([data-forever="no"]:hover) .switch-thumb{translate:100% 0}
.forever[data-state] .switch-thumb{background:#fff;border:1.5px solid #fff;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.forever[data-state="no"] .switch-thumb{translate:100% 0;background:#7CD794;border-color:#7CD794;box-shadow:0 0 44px rgba(124,215,148,.65)}
.switch::after{content:"";position:absolute;inset:-2px;border-radius:99px;pointer-events:none}
.switch.pulse::after{animation:ring .9s ease-out}
@keyframes ring{from{box-shadow:0 0 0 0 rgba(124,215,148,.75)}to{box-shadow:0 0 0 30px rgba(124,215,148,0)}}
@media (max-width:560px){.switch{display:grid;width:100%}.switch button{padding:12px 8px;font-size:12px;min-height:52px;white-space:normal}}

.forever-reveal{display:grid;grid-template-rows:0fr;transition:grid-template-rows .9s cubic-bezier(.2,.8,.2,1)}
.forever-reveal.open{grid-template-rows:1fr}
.forever-reveal-inner{min-height:0;overflow:hidden}
.fr-kicker{font-style:italic;font-size:clamp(20px,2.4vw,26px);line-height:1.4;margin:44px auto 0;max-width:26em}
.fr-kicker em{color:#7CD794}
.fr-stat{display:grid;justify-items:center;gap:8px;margin-top:22px}
.fr-label{font-family:var(--f-display);font-stretch:125%;font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#7CD794}
.fr-num{font-family:var(--f-display);font-stretch:125%;font-weight:900;font-size:clamp(46px,10vw,112px);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.fr-sub{font-family:var(--f-ui);font-size:14px;line-height:1.5;color:rgba(255,255,255,.88);max-width:34em}
.forever-reveal-inner{text-shadow:0 1px 18px rgba(0,0,0,.45)}
.fr-curve{display:block;width:min(560px,100%);height:auto;margin:26px auto 0;overflow:visible}
.fr-area{fill:rgba(124,215,148,.2)}
.fr-line{fill:none;stroke:#7CD794;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1}
.forever .btn-row{justify-content:center;margin-top:30px}
.motion .forever-reveal.open .fr-kicker{animation:rv-in .8s cubic-bezier(.2,.8,.2,1) .15s both}
.motion .forever-reveal.open .fr-stat{animation:rv-in .9s cubic-bezier(.2,.8,.2,1) .35s both}
.motion .forever-reveal.open .fr-num{animation:num-pop .9s cubic-bezier(.34,1.56,.64,1) .45s both}
.motion .forever-reveal.open .fr-area{animation:fade-in 1s 1.2s both}
.motion .forever-reveal.open .fr-line{animation:draw 1.5s cubic-bezier(.6,0,.2,1) .6s both}
.motion .forever-reveal.open .btn-row{animation:rv-in .8s cubic-bezier(.2,.8,.2,1) 1s both}
@keyframes num-pop{from{opacity:0;scale:.6;filter:blur(8px)}}

/* ---------- signup ---------- */
.signup{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center}
@media (max-width:800px){.signup{grid-template-columns:1fr}}
/* beehiiv embed (an iframe styled in beehiiv): always on a light panel so its black button reads in dark mode too */
.bh-form{margin-top:18px;min-height:64px;padding:12px;background:#FFFFFF;border:1px solid var(--line);border-radius:var(--r);color-scheme:light}
.form-note{font-family:var(--f-ui);font-size:13px;color:var(--muted);margin-top:10px;min-height:1.4em}
.form-note.ok{color:var(--green-text);font-weight:600}
.checks{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:10px;font-size:17px}
.checks li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px}
.checks svg{margin-top:5px;color:var(--green)}

/* ---------- page header (inner pages) ---------- */
.page-head{position:relative;isolation:isolate;overflow:hidden;color:#fff;background:#0b120c var(--fronds) center 35%/cover;padding-block:clamp(64px,9vw,128px) clamp(52px,6.5vw,96px)}
.page-head::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.62) 48%,rgba(0,0,0,.28) 100%)}
.page-head .eyebrow{color:#7CD794}
.page-head .hl{color:#7CD794}
.page-head .lede{color:rgba(255,255,255,.88)}
.page-head :focus-visible{outline-color:#fff}
#v-learn .page-head{background-position:center 30%}#v-grow .page-head{background-position:70% 60%}#v-about .page-head{background-position:20% 45%}#v-tools .page-head{background-position:center 75%}
.page-head .lede{max-width:36em}

/* ---------- posts ---------- */
.post-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:0;margin-top:36px;border-top:1px solid var(--line)}
.post{padding:26px 22px 26px 0;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.post[hidden]{display:none}
.post .cat{font-family:var(--f-ui);font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.post h3{font-family:var(--f-body);font-weight:500;font-size:23px;line-height:1.25;margin:0;text-wrap:balance}
.post p{font-size:16.5px;color:var(--muted);margin:0}
.post .textlink{align-self:flex-start;margin-top:8px}
.post .soon{font-family:var(--f-ui);font-size:12px;color:var(--muted);margin-top:8px}

.topic-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:28px 40px;margin-top:40px}
.topic h3{margin-bottom:8px}
.topic p{font-size:17px;margin:0}

/* ---------- offers ---------- */
.offer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:20px;margin-top:40px}
.offer{padding:28px;display:flex;flex-direction:column;gap:12px}
.offer .price{font-family:var(--f-display);font-stretch:125%;font-weight:900;font-size:32px;line-height:1;font-variant-numeric:tabular-nums}
.offer .price small{font-family:var(--f-ui);font-size:13px;font-weight:600;color:var(--muted);letter-spacing:0;margin-left:6px}
.offer ul{margin:0;padding-left:20px;font-size:17px}
.offer .btn{margin-top:auto;align-self:flex-start}
.status{display:inline-block;font-family:var(--f-ui);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--ink);border-radius:99px;padding:3px 10px;align-self:flex-start}
.callout{background:var(--mist);border-radius:var(--r-card);padding:18px 20px;font-family:var(--f-ui);font-size:14.5px;line-height:1.55;margin-top:28px;display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px}
.callout svg{margin-top:2px}

.story{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,6vw,80px);align-items:start}
@media (max-width:800px){.story{grid-template-columns:1fr}}
.portrait{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:var(--r-card);background:var(--sage);filter:grayscale(.15)}
.beliefs{counter-reset:b;list-style:none;padding:0;margin:32px 0 0;display:grid;gap:18px}
.beliefs li{display:grid;grid-template-columns:56px minmax(0,1fr);gap:14px;padding-top:18px;border-top:1px solid var(--line)}
.beliefs li::before{counter-increment:b;content:counter(b,decimal-leading-zero);font-family:var(--f-display);font-stretch:125%;font-weight:900;font-size:20px}
.beliefs b{display:block;font-family:var(--f-display);font-stretch:125%;font-weight:800;text-transform:uppercase;font-size:15px;letter-spacing:.01em;margin-bottom:2px}

/* ---------- footer ---------- */
.site-foot{--fp:clamp(20px,3.6vw,48px);position:relative;background:#0b120c var(--fronds) center 40%/cover;padding:var(--fp);padding-left:max(var(--fp),env(safe-area-inset-left,0px));padding-right:max(var(--fp),env(safe-area-inset-right,0px))}
.site-foot > .wrap{max-width:none;margin:0;padding:var(--fp);background:color-mix(in srgb,var(--paper) 98%,transparent);color:var(--ink);border-radius:var(--r);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.site-foot .foot-grid,.site-foot .disclaimer{max-width:var(--max);margin-inline:auto}
.foot-photo{display:none}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:32px;padding-block:0 32px;position:relative}
@media (max-width:800px){.foot-grid{grid-template-columns:1fr 1fr}.foot-grid > :first-child{grid-column:1/-1}}
.foot-grid h4{font-family:var(--f-display);font-stretch:125%;font-weight:800;font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin:0 0 14px}
.foot-grid ul{list-style:none;padding:0;margin:0;display:grid;gap:8px;font-family:var(--f-ui);font-size:14.5px}
.foot-grid ul a{text-decoration:none}
.foot-grid ul a:hover{text-decoration:underline}
/* The seal is a paper medallion centered on the footer's top edge, half over the page above.
   The card below gets enough top padding that its content always clears the medallion's lower half. */
.site-foot{--seal:clamp(136px,15vw,200px)}
.site-foot > .wrap{padding-top:max(var(--fp),calc(var(--seal) / 2 - var(--fp) + 28px))}
.foot-seal{position:absolute;z-index:2;top:0;left:50%;translate:-50% -50%;width:var(--seal);height:var(--seal);padding:calc(var(--seal) * .12);border-radius:50%;background:var(--paper);color:var(--ink);box-shadow:0 0 0 1px var(--line),var(--shadow-lg)}
.foot-seal svg{display:block;width:100%;height:100%}
.disclaimer{border-top:1px solid color-mix(in srgb,var(--ink) 18%,transparent);padding-block:22px 0;font-family:var(--f-ui);font-size:12.5px;line-height:1.6;color:var(--muted);position:relative;display:grid;gap:8px}

/* ======================= TOOLS ======================= */
.tools-shell{padding-block:28px 96px}
.tool-tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;margin-bottom:28px;scrollbar-width:thin}
.tool-tabs a{flex:none;display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border:1.5px solid var(--line);border-radius:var(--r);font-family:var(--f-display);font-stretch:125%;font-weight:700;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;text-decoration:none;background:var(--surface)}
.tool-tabs a:hover{border-color:var(--ink)}
.tool-tabs a[aria-current="page"]{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.tool-tabs .count{font-family:var(--f-ui);font-size:10.5px;background:var(--pill);color:#fff;border-radius:99px;padding:1px 7px;letter-spacing:0}

.calc{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:clamp(24px,4vw,48px);align-items:start}
@media (max-width:900px){.calc{grid-template-columns:1fr}}
.calc-inputs{position:sticky;top:calc(env(safe-area-inset-top,0px) + 92px)}
@media (max-width:900px){.calc-inputs{position:static}}
.calc-title{margin-bottom:6px}
.calc-q{font-style:italic;color:var(--muted);margin:0 0 22px;font-size:18px}
.steps{display:grid;gap:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:6px 18px}
.step{padding:16px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:26px minmax(0,1fr);gap:12px}
.step:first-child{border-top:0}
.step .n{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--ink);display:grid;place-items:center;font-family:var(--f-ui);font-size:11.5px;font-weight:700;margin-top:1px}
.step .t{font-family:var(--f-ui);font-weight:600;font-size:14.5px;line-height:1.35}
.step .d{font-size:15px;color:var(--muted);line-height:1.45;margin:3px 0 10px}
.step .opt{font-weight:500;color:var(--muted);font-size:12px;margin-left:6px}
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.fld label{display:block;font-family:var(--f-ui);font-size:12px;font-weight:600;color:var(--muted);margin-bottom:4px}
.fld .box{display:flex;align-items:center;height:44px;border:1.5px solid var(--line);border-radius:var(--r);background:var(--paper);padding:0 10px;font-family:var(--f-ui);transition:border-color .15s}
.fld .box:focus-within{border-color:var(--ink)}
.fld .box span{color:var(--muted);font-size:14px;white-space:nowrap}
.fld input{border:0;outline:none;background:transparent;width:100%;min-width:0;font-size:16px;font-weight:600;padding:0 6px;font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.fld input::-webkit-outer-spin-button,.fld input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r);padding:3px}
.seg button{border:0;line-height:1.25;min-height:40px;background:transparent;border-radius:4px;padding:8px 10px;font-family:var(--f-ui);font-size:13px;font-weight:500;cursor:pointer;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--on-ink);font-weight:600}

.result-hero{background:var(--hero-bg);color:var(--hero-fg);border:1px solid var(--hero-line);border-radius:var(--r-card);padding:24px 24px 22px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:flex-start}
.result-hero .eb{font-family:var(--f-display);font-stretch:125%;font-weight:700;font-size:11px;letter-spacing:.09em;text-transform:uppercase;opacity:.65}
.result-hero .main{font-family:var(--f-display);font-stretch:125%;font-weight:900;font-size:clamp(34px,5.4vw,54px);line-height:1;margin-top:8px;color:var(--hero-green);font-variant-numeric:tabular-nums}
.result-hero .sub{font-family:var(--f-ui);font-size:13px;opacity:.7;margin-top:10px}
.result-hero .side{text-align:right;font-family:var(--f-ui)}
.result-hero .side .l{font-size:11.5px;opacity:.6}
.result-hero .side .v{font-size:24px;font-weight:800;margin-top:2px;font-variant-numeric:tabular-nums}
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:99px;padding:5px 11px;font-family:var(--f-ui);font-size:12px;font-weight:700;border:1.5px solid currentColor}
.pill.good{color:var(--green-text)} .pill.warn{color:#B07A12} .pill.bad{color:var(--red)}
.result-hero .pill.good{color:var(--hero-green)} .result-hero .pill.warn{color:#E7B455} .result-hero .pill.bad{color:#F08A84}

.out-sec{margin-top:30px}
.out-sec > h3{font-family:var(--f-display);font-stretch:125%;font-weight:800;font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin:0 0 12px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));gap:10px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:14px 16px;font-family:var(--f-ui)}
.stat .l{font-size:12px;font-weight:600;color:var(--muted)}
.stat .v{font-size:22px;font-weight:700;margin-top:3px;line-height:1.15;font-variant-numeric:tabular-nums}
.stat .n{font-size:12px;color:var(--muted);margin-top:3px}
.stat .v.good{color:var(--green-text)} .stat .v.bad{color:var(--red)} .stat .v.warn{color:#B07A12}
.chart-box{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:14px 12px 8px;position:relative}
.chart-box svg{width:100%;height:auto;display:block;touch-action:pan-y}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-family:var(--f-ui);font-size:12.5px;color:var(--muted);padding:6px 6px 4px}
.legend i{display:inline-block;width:16px;height:3px;border-radius:2px;vertical-align:middle;margin-right:6px}
.legend i.dash{background:repeating-linear-gradient(90deg,currentColor 0 4px,transparent 4px 7px)!important;height:2px}
.tip{position:absolute;pointer-events:none;background:var(--ink);color:var(--on-ink);font-family:var(--f-ui);font-size:12px;border-radius:6px;padding:8px 10px;min-width:150px;box-shadow:var(--shadow-lg);z-index:5;font-variant-numeric:tabular-nums}
.tip b{display:block;margin-bottom:4px;font-size:11.5px;opacity:.7;font-weight:600}
.tip div{display:flex;justify-content:space-between;gap:14px}
.goals4{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:10px}
.gchip{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-card);padding:12px 14px;font-family:var(--f-ui)}
.gchip.ok{border-color:var(--ink)}
.gchip .t{font-size:13px;font-weight:700;display:flex;gap:6px;align-items:center}
.gchip.ok .t svg{color:var(--green)}
.gchip .s{font-size:12px;color:var(--muted);margin-top:2px;font-variant-numeric:tabular-nums}
.insights{display:grid;gap:10px}
.insight{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:14px 16px;font-size:16.5px;line-height:1.5}
.insight svg{margin-top:3px}
.insight.good svg{color:var(--green)} .insight.bad svg{color:var(--red)} .insight.info svg{color:var(--ink)}
.meter{height:6px;background:var(--line);border-radius:3px;overflow:hidden;margin:10px 0 6px}
.meter i{display:block;height:100%;border-radius:3px;transition:width .3s}
.yt{border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;background:var(--surface)}
.yt-scroll{max-height:260px;overflow:auto}
.yt table{width:100%;border-collapse:collapse;font-family:var(--f-ui);font-size:13px;font-variant-numeric:tabular-nums}
.yt th{position:sticky;top:0;background:var(--paper);text-align:right;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:9px 12px;border-bottom:1px solid var(--line)}
.yt td{text-align:right;padding:8px 12px;border-bottom:1px solid var(--line)}
.yt th:first-child,.yt td:first-child{text-align:left}
.yt tr.out td{color:var(--red)}
.assume{font-family:var(--f-ui);font-size:12.5px;color:var(--muted);line-height:1.6;margin-top:22px;padding-top:14px;border-top:1px dashed var(--line)}
.save-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:24px}
.save-row .note{font-family:var(--f-ui);font-size:13px;color:var(--green-text);font-weight:600}

.saved-list{display:grid;gap:14px;max-width:760px}
.saved-item{padding:18px;font-family:var(--f-ui)}
.saved-item .hd{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);font-weight:600;margin-bottom:12px}
.saved-item .hd b{color:var(--ink);font-size:13.5px}
.saved-item .hd span{margin-left:auto;font-weight:500}
.saved-item .vals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.saved-item .vals .l{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.saved-item .vals .v{font-size:15px;font-weight:700;margin-top:2px;font-variant-numeric:tabular-nums}
.saved-item .in{font-size:12.5px;color:var(--muted);border-top:1px solid var(--line);margin-top:12px;padding-top:10px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center}
.empty{font-size:15px;line-height:1.55;padding:56px 20px;text-align:center;border:1.5px dashed var(--line);border-radius:var(--r-card);font-family:var(--f-ui);color:var(--muted)}
.empty .mark{display:block;width:60px;height:60px;margin:0 auto 14px;color:var(--ink)}
.empty b{display:block;color:var(--ink);font-size:16px;margin-bottom:6px}
.confirm{display:inline-flex;gap:8px;align-items:center;font-family:var(--f-ui);font-size:13px}

/* ======================= SCENARIO LAB ======================= */
.lab-tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:8px 0 24px;overflow-x:auto}
.lab-tabs button{flex:none;background:none;border:0;border-bottom:2px solid transparent;padding:10px 14px;font-family:var(--f-ui);font-size:14px;font-weight:500;color:var(--muted);cursor:pointer}
.lab-tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--green);font-weight:700}
.lab-sec{display:none}
.lab-sec.on{display:block}
.lab-cols{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:28px;align-items:start}
@media (max-width:900px){.lab-cols{grid-template-columns:1fr}}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:18px;font-family:var(--f-ui);font-size:14px}
.panel + .panel{margin-top:14px}
.panel h4{font-size:15px;font-weight:700;margin:0 0 3px}
.panel .hint{color:var(--muted);font-size:13px;margin:0 0 12px;line-height:1.5}
.lf{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:5px 0}
.lf label{font-size:13.5px}
.lf input,.lf select{width:122px;background:var(--paper);border:1.5px solid var(--line);border-radius:5px;padding:6px 8px;font-size:14px;text-align:right;font-variant-numeric:tabular-nums}
.lf input[type=text]{text-align:left}
.lf input:focus,.lf select:focus{border-color:var(--ink);outline:none}
.chk{display:flex;gap:10px;align-items:flex-start;padding:8px 0;cursor:pointer;border-top:1px solid var(--line)}
.chk:first-of-type{border-top:0}
.chk input{margin-top:3px;accent-color:var(--green-deep);width:16px;height:16px}
.chk .t{font-size:14px;font-weight:600}
.chk .d{display:block;font-size:12.5px;color:var(--muted)}
.whatif-sub{margin:0 0 8px 26px;padding-left:12px;border-left:2px solid var(--line)}
.lab-table{width:100%;border-collapse:collapse;font-size:13.5px;font-variant-numeric:tabular-nums}
.lab-table th{text-align:right;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:700;padding:7px 8px;border-bottom:1px solid var(--line)}
.lab-table td{text-align:right;padding:6px 8px;border-bottom:1px solid var(--line)}
.lab-table th:first-child,.lab-table td:first-child{text-align:left}
.lab-table tfoot td{font-weight:700;border-top:1.5px solid var(--ink);border-bottom:0}
.lab-table input,.lab-table select{width:100%;min-width:90px;background:transparent;border:1px solid transparent;border-radius:4px;padding:4px 6px;font-size:13.5px;text-align:right}
.lab-table td:first-child input{text-align:left;min-width:120px}
.lab-table input:hover,.lab-table select:hover{border-color:var(--line)}
.scroll-x{overflow-x:auto}
.allocbar{display:flex;height:12px;border-radius:6px;overflow:hidden;margin:10px 0 8px;border:1px solid var(--line)}
.allocleg{display:flex;flex-wrap:wrap;gap:12px;font-size:12.5px;color:var(--muted)}
.allocleg i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px}
.timeline{list-style:none;margin:10px 0 0;padding:0 0 0 18px;border-left:2px solid var(--line)}
.timeline li{position:relative;padding:0 0 12px 14px;font-size:14px}
.timeline li::before{content:"";position:absolute;left:-23px;top:6px;width:8px;height:8px;border-radius:50%;background:var(--ink)}
.timeline .when{color:var(--muted);font-size:12px}
.lab-note{font-family:var(--f-ui);font-size:12.5px;color:var(--muted);margin-top:14px;line-height:1.6;max-width:72ch}
.demo-banner{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;background:var(--mist);border-radius:var(--r-card);padding:14px 16px;font-family:var(--f-ui);font-size:14px;line-height:1.5;margin-bottom:20px}
.textin{background:var(--paper);border:1.5px solid var(--line);border-radius:5px;padding:8px 10px;font-size:14px;font-family:var(--f-ui)}
.textin:focus{border-color:var(--ink);outline:none}

/* ---------- brand marks & photography ---------- */
.photo-band{position:relative;color:#fff;background:#0b120c var(--fronds) center 45%/cover;isolation:isolate}
.photo-band::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.50),rgba(0,0,0,.68));z-index:-1}
.photo-band .hl{color:#7CD794}
.photo-band .btn{background:#fff;color:#000;border-color:#fff}
.photo-band .btn:hover{background:#7CD794;border-color:#7CD794;color:#000}
.photo-band .btn.ghost{background:transparent;color:#fff;border-color:#fff}
.photo-band .btn.ghost:hover{background:#fff;color:#000}
.photo-band :focus-visible{outline-color:#fff}
.page-head .wrap{position:relative}
.head-badge{position:absolute;right:max(16px,env(safe-area-inset-right,0px));top:50%;width:190px;height:190px;transform:translateY(-58%) rotate(-8deg);color:#fff}
.page-head.has-badge h1,.page-head.has-badge .lede{position:relative;max-width:min(36em,calc(100% - 220px))}
@media (max-width:820px){.head-badge{display:none}.page-head.has-badge h1,.page-head.has-badge .lede{max-width:none}}
.byline{display:flex;align-items:center;gap:12px;margin-top:24px;font-family:var(--f-ui);font-size:14px;line-height:1.45;color:var(--muted)}
.byline img{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:none;border:2px solid var(--surface);box-shadow:0 0 0 1px var(--line)}
.byline a{color:var(--ink);font-weight:600}
.result-hero{position:relative;overflow:hidden}
.result-hero > div{position:relative;z-index:1}
.hero-mark{position:absolute;right:-34px;bottom:-46px;width:170px;height:170px;color:var(--hero-fg);opacity:.08;pointer-events:none}
.logo svg{color:var(--ink)}

/* ---------- blog ---------- */
.post{position:relative}
.post h3 a.post-link{text-decoration:none;color:inherit}
.post h3 a.post-link::after{content:"";position:absolute;inset:0}
.post:hover h3{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.post .textlink{align-self:flex-start;margin-top:8px}
.blog-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:8px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1.5px solid var(--line);background:var(--surface);border-radius:99px;padding:8px 14px;font-family:var(--f-display);font-stretch:125%;font-weight:700;font-size:11px;letter-spacing:.07em;text-transform:uppercase;cursor:pointer}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--pill);border-color:var(--pill);color:#fff}
.post-head h1.display{font-size:clamp(30px,5vw,58px);max-width:18em}
.post-head .eyebrow a{color:inherit;text-decoration:none;border-bottom:1px solid currentColor}
.post-head .byline{color:rgba(255,255,255,.8)}
.post-head .byline b{color:#fff}
.post-head .byline img{border-color:transparent;box-shadow:0 0 0 2px rgba(255,255,255,.5)}
.article-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:clamp(32px,6vw,80px);align-items:start}
@media (max-width:900px){.article-grid{grid-template-columns:1fr}}
.article{max-width:38em;font-size:clamp(18px,1.6vw,20px);line-height:1.68}
.article p{margin:0 0 1.05em}
.article h2{font-family:var(--f-display);font-stretch:125%;font-weight:800;text-transform:uppercase;font-size:clamp(19px,2.2vw,24px);line-height:1.15;letter-spacing:-.005em;margin:1.8em 0 .6em;text-wrap:balance}
.article h3{font-family:var(--f-display);font-stretch:125%;font-weight:700;text-transform:uppercase;font-size:15px;letter-spacing:.02em;margin:1.4em 0 .4em}
.article ul{padding-left:1.2em;margin:0 0 1.1em}
.article li{margin-bottom:.45em}
.article blockquote{margin:1.4em 0;padding:16px 20px;border-left:3px solid var(--green);background:var(--surface);font-family:var(--f-ui);font-size:16px;line-height:1.55;font-weight:500}
.article hr{border:0;border-top:1px solid var(--line);margin:2em 0}
.article .thesis{font-family:var(--f-display);font-stretch:125%;font-weight:800;font-size:clamp(19px,2vw,23px);line-height:1.3;text-transform:uppercase;margin:1.2em 0}
.article .post-note{font-family:var(--f-ui);font-size:13px;line-height:1.6;color:var(--muted);margin-top:1.6em}
.article sup{font-size:.65em}
.article-disclaimer{margin-top:2.2em;padding:16px 18px;background:var(--mist);border-radius:var(--r-card);font-family:var(--f-ui);font-size:13.5px;line-height:1.6;font-style:italic}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:28px}
.pager a{display:block;padding:14px 16px;border:1.5px solid var(--line);border-radius:var(--r-card);text-decoration:none;font-family:var(--f-ui);font-size:14.5px;font-weight:600;line-height:1.35;background:var(--surface)}
.pager a:hover{border-color:var(--ink)}
.pager a:last-child{text-align:right}
.pager span{display:block;font-family:var(--f-display);font-stretch:125%;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.article-aside{position:sticky;top:calc(env(safe-area-inset-top,0px) + 92px);display:grid;gap:16px}
@media (max-width:900px){.article-aside{position:static}}
.aside-card{padding:22px;font-size:16px}
.aside-card h3{margin-bottom:8px}
.aside-card p{font-size:16px;color:var(--muted)}
.aside-card .btn{width:100%;margin-top:4px}
.mobile-nav a.btn{padding:14px 20px;font-size:13px;border-bottom:1.5px solid var(--ink)}

/* ---------- icons (Heroicons outline) ---------- */
.hi{display:inline-block;flex:none;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.hi[width="15"],.hi[width="16"]{stroke-width:1.9}
.hi[width="18"]{stroke-width:1.75}
.menu-btn .ic-close{display:none}
.site-head.open .menu-btn .ic-open{display:none}
.site-head.open .menu-btn .ic-close{display:inline}
.tool-card .ic{width:44px;height:44px;border-radius:10px;color:var(--ink)}
.tool-card:hover .ic{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.tool-card .ic{transition:background .15s,color .15s}
.tool-card .go{display:inline-flex;align-items:center;gap:6px}
.tool-card:hover .go .hi{transform:translateX(3px)}
.tool-card .go .hi,.readmore .hi{transition:transform .15s}
.readmore{display:inline-flex;align-items:center;gap:6px}
.post:hover .readmore .hi{transform:translateX(3px)}
.tool-tabs a{gap:9px}
.insight .hi{margin-top:1px}
.insight.info .hi{color:var(--green-text)}
.pill .hi{margin-right:-1px}
.gchip .t .hi{color:var(--green-text)}
.checks .hi{color:var(--green);margin-top:3px}
.callout .hi,.demo-banner .hi{color:var(--ink)}
.goal .ic .hi{color:var(--teal)}
.btn .hi{margin-inline:-2px}
.saved-item .hd .hi{color:var(--ink)}
.lab-table .btn.sm.ghost,#goalList .btn.sm.ghost{min-height:32px;padding:6px 8px}

/* ======================= MOTION =======================
   Everything below is scoped to html.motion (set by boot.js unless reduced motion is on).
   Final states are the normal styles; animations only describe where things come from. */
:root{--ease-out:cubic-bezier(.2,.8,.2,1);--ease-spring:cubic-bezier(.34,1.56,.64,1)}
@keyframes rv-in{from{opacity:0;translate:0 26px}}
@keyframes fade-in{from{opacity:0}}
@keyframes word-up{from{translate:0 108%}}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes grow-x{from{transform:scaleX(0)}}
@keyframes pop{from{scale:0}}

/* ---- load intro: logo, wordmark, a loading line, then two panels wipe up ---- */
.intro{display:none}
.motion.intro-on .intro{display:block;position:fixed;inset:0;z-index:200;pointer-events:none;animation:intro-failsafe 0s 4s forwards}
@keyframes intro-failsafe{to{visibility:hidden}}
.intro-panel{position:absolute;inset:0;clip-path:inset(0 0 0 0)}
.intro-green{background:#429E59}
.intro-ink{background:#000;color:#fff;display:grid;place-items:center}
.intro-stack{display:grid;justify-items:center;gap:18px}
.intro-logo{width:88px;height:88px;color:#fff;animation:intro-logo 1s var(--ease-spring) both}
@keyframes intro-logo{from{opacity:0;scale:.4;rotate:-50deg}}
.intro-word{display:flex;gap:.32em;overflow:hidden;padding-bottom:.1em;font-family:var(--f-display);font-stretch:125%;font-weight:900;font-size:22px;letter-spacing:.01em;text-transform:uppercase}
.intro-word span{display:inline-block;animation:word-up .8s var(--ease-out) .25s both}
.intro-word span + span{animation-delay:.36s;color:#5BBE74}
.intro-bar{display:block;width:150px;height:2px;border-radius:2px;background:rgba(255,255,255,.16);overflow:hidden}
.intro-bar i{display:block;height:100%;background:#5BBE74;transform-origin:left;animation:grow-x 1.15s cubic-bezier(.6,0,.2,1) .2s both}
.intro-out .intro-ink{animation:wipe-up .8s cubic-bezier(.76,0,.24,1) forwards}
.intro-out .intro-green{animation:wipe-up .8s cubic-bezier(.76,0,.24,1) .12s forwards}
.intro-out .intro-stack{animation:stack-out .45s ease-in forwards}
@keyframes wipe-up{to{clip-path:inset(0 0 100% 0)}}
@keyframes stack-out{to{opacity:0;translate:0 -36px}}

/* ---- home hero: plays in after the intro, and again when you return home ---- */
/* If the script never runs, the failsafe shows the hero anyway after a moment. */
.motion .hero:not(.play) :is(.eyebrow,.lede,.btn-row,.card,.starburst){opacity:0;animation:failsafe-show 0s 3.5s forwards}
.motion .hero:not(.play) .split .w > span{translate:0 108%}
@keyframes failsafe-show{to{opacity:1}}
.motion .hero.play .eyebrow{animation:rv-in .8s var(--ease-out) both}
.motion .hero.play .split .w > span{animation:word-up .95s var(--ease-out) both;animation-delay:calc(90ms + var(--wi) * 60ms)}
.motion .hero.play .lede{animation:rv-in .9s var(--ease-out) .45s both}
.motion .hero.play .btn-row{animation:rv-in .9s var(--ease-out) .58s both}
.motion .hero.play .fn-card{animation:card-in 1.1s var(--ease-out) .3s both}
.motion .hero.play .mini-card{animation:card-in 1.1s var(--ease-out) .48s both}
.motion .hero.play .starburst{animation:burst-in .9s var(--ease-spring) .95s both}
.motion .hero.play .draw{animation:draw 1.6s cubic-bezier(.6,0,.2,1) .9s both}
.motion .hero.play .spark-fill{animation:fade-in 1s 1.7s both}
@keyframes card-in{from{opacity:0;translate:60px 30px;rotate:4deg}}
@keyframes burst-in{from{opacity:0;scale:.2;rotate:-120deg}}
.motion .starburst svg{animation:spin 40s linear infinite}
@keyframes spin{to{rotate:360deg}}

/* ---- split headlines: words rise out of a mask ---- */
.motion .split .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.12em;margin-bottom:-.12em}
.motion .split .w > span{display:inline-block}
.motion .rv.split{opacity:1!important;animation:none!important}
.motion .rv.split:not(.in) .w > span{translate:0 108%}
.motion .rv.split.in .w > span{animation:word-up .9s var(--ease-out) both;animation-delay:calc(var(--rv-d,0ms) + var(--wi) * 50ms)}

/* ---- scroll reveals ---- */
.motion .rv:not(.in){opacity:0}
.motion .rv.in{animation:rv-in .85s var(--ease-out) var(--rv-d,0ms) both}
.motion .rv .bar i{transform-origin:left}
.motion .rv.in .bar i{animation:grow-x 1.2s var(--ease-out) calc(var(--rv-d,0ms) + .35s) both}
.motion .draw{stroke-dasharray:1 1}
.motion .rv.in .draw{animation:draw 1.5s cubic-bezier(.6,0,.2,1) calc(var(--rv-d,0ms) + .3s) both}
.motion .rv.in .spark-fill{animation:fade-in 1s calc(var(--rv-d,0ms) + 1.1s) both}
.motion .foot-seal.rv.in{animation:seal-in 1.1s var(--ease-spring) both}
@keyframes seal-in{from{opacity:0;scale:.6;rotate:-90deg}}
.motion .rv.in .pop{transform-box:fill-box;transform-origin:center;animation:pop .5s var(--ease-spring) calc(var(--rv-d,0ms) + 1.6s) both}

/* ---- moving between pages ---- */
.motion .nav-pill{display:block;position:absolute;left:0;top:0;width:0;height:0;border-radius:99px;background:var(--pill);opacity:0;pointer-events:none}
.motion .nav-pill.live{transition:transform .55s var(--ease-spring),width .55s var(--ease-spring),height .55s var(--ease-spring),opacity .25s,background .15s}
.motion .mainnav a{position:relative;z-index:1}
.motion .mainnav a[aria-current="page"]{background:transparent}
.motion .mainnav:has(a[aria-current="page"]:hover) .nav-pill{background:var(--pill-hover)}
@media (prefers-reduced-motion:no-preference){@view-transition{navigation:auto}}
.motion .site-head{view-transition-name:site-head}
::view-transition-old(site-head){display:none}
::view-transition-new(site-head){animation:none}
::view-transition-old(root){animation:vt-out .3s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:vt-in .55s var(--ease-out) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-12px) scale(.99)}}
@keyframes vt-in{from{opacity:0;transform:translateY(20px)}}