/* Larkspur — shared stylesheet. Editorial serif + soft painterly fintech.
   Sections: tokens, base, type, buttons, header/nav, hero, modules, footer, badge. */

/* ---------- tokens ---------- */
:root{
  --ink:#1B1917;
  --ink-2:#443E37;
  --ink-3:#7C746A;
  --ink-4:#A79E92;
  --paper:#FBF8F3;
  --paper-2:#F4EFE6;
  --paper-3:#EDE6D9;
  --card:#FFFDF9;
  --sage:#6E8570;
  --sage-deep:#3F5340;
  --sage-soft:#D5DFD2;
  --rose:#C0908A;
  --rose-soft:#EBD8D2;
  --sand:#E3D5BC;
  --sky:#BACCD5;
  --line:rgba(27,25,23,.10);
  --line-2:rgba(27,25,23,.06);
  --line-3:rgba(27,25,23,.18);

  --sh-1:0 1px 2px rgba(27,25,23,.04), 0 4px 12px rgba(27,25,23,.05);
  --sh-2:0 1px 2px rgba(27,25,23,.05), 0 8px 20px -6px rgba(27,25,23,.08), 0 24px 48px -18px rgba(27,25,23,.13);
  --sh-3:0 2px 4px rgba(27,25,23,.05), 0 18px 40px -10px rgba(27,25,23,.12), 0 48px 88px -32px rgba(63,83,64,.22);

  --r-s:10px; --r-m:16px; --r-l:24px; --r-xl:34px;
  --pad:clamp(1.15rem,4.5vw,2.5rem);
  --gap:clamp(2rem,5vw,4rem);
  --sec:clamp(4.5rem,9vw,8.5rem);
  --max:1180px;

  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Instrument Sans","Helvetica Neue",Helvetica,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
  --ease-2:cubic-bezier(.65,.05,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:1.0125rem; line-height:1.65;
  font-weight:400; letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* film grain */
body::after{
  content:""; position:fixed; inset:0; z-index:8000; pointer-events:none; opacity:.35;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
img{max-width:100%; display:block}
figure{margin:0}
h1,h2,h3,.tst__q,.pull,.worked__lead,.divider__q p{text-wrap:balance}
.lede,p{text-wrap:pretty}
a{color:inherit}
button,input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--sage-deep); outline-offset:3px; border-radius:4px}
::selection{background:var(--sage-soft); color:var(--ink)}

.wrap{width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--pad)}
.wrap--wide{max-width:1340px}
.wrap--narrow{max-width:760px}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:10000;background:var(--ink);color:var(--paper);padding:.75rem 1.25rem;border-radius:0 0 var(--r-s) 0}
.skip:focus{left:0}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--serif); font-weight:400; margin:0;
  font-variation-settings:"SOFT" 40,"WONK" 1; letter-spacing:-.025em; line-height:1.06}
h1{font-size:clamp(2.7rem,7.2vw,5.35rem); font-weight:400}
h2{font-size:clamp(2.05rem,4.6vw,3.5rem); line-height:1.08}
h3{font-size:clamp(1.35rem,2.2vw,1.75rem); line-height:1.2; letter-spacing:-.02em}
h4{font-size:1.1rem; letter-spacing:-.015em}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
.lede{font-size:clamp(1.06rem,1.55vw,1.26rem); line-height:1.6; color:var(--ink-2); letter-spacing:-.008em}
.dim{color:var(--ink-3)}
.eyebrow{font-family:var(--mono); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--sage-deep); margin:0 0 1.1rem; display:flex; align-items:center; gap:.6rem}
.eyebrow::before{content:""; width:16px; height:1px; background:currentColor; opacity:.55; flex:none}
.eyebrow--center{justify-content:center}
.num{font-variant-numeric:tabular-nums lining-nums}
em.q{font-style:italic; font-variation-settings:"SOFT" 60,"WONK" 1}

.mark-line{background:linear-gradient(to top,var(--sage-soft) 0 .34em,transparent .34em);
  padding-inline:.06em; border-radius:2px}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.92rem 1.6rem; min-height:48px; border-radius:999px; text-decoration:none;
  font-size:.945rem; font-weight:500; letter-spacing:-.008em; cursor:pointer;
  border:1px solid transparent; background:none; white-space:nowrap;
  transition:transform .45s var(--ease), background-color .35s var(--ease),
    color .35s var(--ease), border-color .35s var(--ease), box-shadow .45s var(--ease)}
.btn svg{flex:none; transition:transform .45s var(--ease)}
.btn--solid{background:var(--ink); color:var(--paper); box-shadow:var(--sh-2)}
.btn--solid:hover{background:#2C2A26; transform:translateY(-2px); box-shadow:var(--sh-3)}
.btn--solid:hover svg{transform:translateX(3px)}
.btn--ghost{border-color:var(--line-3); color:var(--ink); background:rgba(255,253,249,.62); backdrop-filter:blur(6px)}
.btn--ghost:hover{border-color:var(--ink); background:var(--card); transform:translateY(-2px); box-shadow:var(--sh-1)}
.btn--sage{background:var(--sage-deep); color:#F6F3EC; box-shadow:var(--sh-2)}
.btn--sage:hover{background:#33452F; transform:translateY(-2px)}
.btn--sm{padding:.62rem 1.15rem; min-height:40px; font-size:.86rem}
.btn--wide{width:100%}

.tlink{display:inline-flex; align-items:center; gap:.45rem; text-decoration:none; min-height:44px;
  font-weight:500; font-size:.94rem; color:var(--sage-deep); position:relative; padding-bottom:2px}
.tlink::after{content:""; position:absolute; left:0; right:0; bottom:9px; height:1px;
  background:currentColor; opacity:.35; transform-origin:right; transform:scaleX(1);
  transition:transform .5s var(--ease)}
.tlink:hover::after{transform-origin:left; transform:scaleX(0)}
.tlink svg{transition:transform .45s var(--ease)}
.tlink:hover svg{transform:translateX(4px)}

.chip{display:inline-flex; align-items:center; gap:.55rem; padding:.42rem .95rem .42rem .5rem;
  border-radius:999px; background:rgba(255,253,249,.78); border:1px solid var(--line);
  font-size:.83rem; color:var(--ink-2); text-decoration:none; backdrop-filter:blur(10px); min-height:44px;
  box-shadow:0 1px 2px rgba(27,25,23,.04); letter-spacing:-.005em;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .35s var(--ease)}
.chip:hover{transform:translateY(-1px); border-color:var(--line-3); box-shadow:var(--sh-1)}
.chip b{font-family:var(--mono); font-size:.68rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  background:var(--sage-soft); color:var(--sage-deep); padding:.28rem .55rem; border-radius:999px}
.chip svg{opacity:.5; transition:transform .45s var(--ease)}
.chip:hover svg{transform:translateX(3px); opacity:.9}

/* ---------- header ---------- */
.hdr{position:sticky; top:0; z-index:900; transition:background-color .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
  border-bottom:1px solid transparent}
.hdr__in{display:flex; align-items:center; gap:1.5rem; height:74px}
.hdr.is-stuck{background:rgba(251,248,243,.82); backdrop-filter:blur(16px) saturate(1.2);
  border-bottom-color:var(--line-2); box-shadow:0 1px 24px -12px rgba(27,25,23,.3)}
.brand{display:inline-flex; align-items:center; gap:.6rem; text-decoration:none; margin-right:auto;
  flex:none; padding-block:.45rem}
.brand__mark{width:21px; height:25px; color:var(--sage-deep); transition:transform .6s var(--ease)}
.brand:hover .brand__mark{transform:rotate(-6deg) translateY(-1px)}
.brand__name{font-family:var(--serif); font-size:1.38rem; letter-spacing:-.03em;
  font-variation-settings:"SOFT" 40,"WONK" 1}
.nav{display:flex; align-items:center; gap:.35rem}
.nav a{text-decoration:none; font-size:.92rem; color:var(--ink-2); padding:.5rem .8rem; border-radius:999px;
  transition:color .3s var(--ease), background-color .3s var(--ease)}
.nav a:hover{color:var(--ink); background:rgba(27,25,23,.045)}
.nav a[aria-current=page]{color:var(--ink); font-weight:500}
.nav a[aria-current=page]::after{content:""; display:block; height:1px; margin-top:2px;
  background:var(--sage-deep); opacity:.6}
.hdr__cta{display:flex; align-items:center; gap:.5rem; margin-left:1rem}
.burger{display:none; width:46px; height:46px; border:1px solid var(--line); border-radius:999px;
  background:rgba(255,253,249,.6); flex-direction:column; align-items:center; justify-content:center; cursor:pointer;
  transition:border-color .3s var(--ease), background-color .3s var(--ease)}
.burger:hover{border-color:var(--line-3)}
.burger span{display:block; width:17px; height:1.5px; background:var(--ink); border-radius:2px;
  transition:transform .45s var(--ease), opacity .3s var(--ease)}
.burger span+span{margin-top:4.5px}
body.nav-open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.nav-open .burger span:nth-child(2){opacity:0}
body.nav-open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* drawer */
.scrim{position:fixed; inset:0; z-index:940; background:rgba(27,25,23,.34); backdrop-filter:blur(3px);
  opacity:0; pointer-events:none; transition:opacity .5s var(--ease)}
body.nav-open .scrim{opacity:1; pointer-events:auto}
.drawer{position:fixed; top:0; right:0; bottom:0; width:min(88vw,360px); z-index:950;
  background:var(--paper); border-left:1px solid var(--line); padding:1.15rem var(--pad) 2rem;
  transform:translateX(102%); transition:transform .6s var(--ease); display:flex; flex-direction:column;
  box-shadow:-30px 0 70px -30px rgba(27,25,23,.35); overflow-y:auto}
body.nav-open .drawer{transform:translateX(0)}
.drawer__top{display:flex; align-items:center; justify-content:space-between; height:52px; margin-bottom:1.5rem}
.drawer__close{width:44px;height:44px;border:1px solid var(--line);border-radius:999px;background:none;
  cursor:pointer;display:grid;place-items:center; transition:border-color .3s var(--ease), transform .4s var(--ease)}
.drawer__close:hover{border-color:var(--ink); transform:rotate(90deg)}
.drawer__nav{display:flex; flex-direction:column; gap:.15rem; border-top:1px solid var(--line-2)}
.drawer__nav a{font-family:var(--serif); font-size:1.75rem; letter-spacing:-.03em; text-decoration:none;
  padding:.85rem 0; border-bottom:1px solid var(--line-2); display:flex; align-items:baseline; gap:.7rem;
  opacity:0; transform:translateY(14px); font-variation-settings:"SOFT" 40,"WONK" 1;
  transition:color .3s var(--ease)}
.drawer__nav a i{font-family:var(--mono); font-style:normal; font-size:.66rem; color:var(--ink-4); letter-spacing:.12em}
.drawer__nav a:hover{color:var(--sage-deep)}
body.nav-open .drawer__nav a{animation:drawerIn .6s var(--ease) forwards}
body.nav-open .drawer__nav a:nth-child(1){animation-delay:.10s}
body.nav-open .drawer__nav a:nth-child(2){animation-delay:.16s}
body.nav-open .drawer__nav a:nth-child(3){animation-delay:.22s}
body.nav-open .drawer__nav a:nth-child(4){animation-delay:.28s}
@keyframes drawerIn{to{opacity:1; transform:none}}
.drawer__foot{margin-top:auto; padding-top:2rem; display:grid; gap:.6rem}
.drawer__foot p{font-size:.83rem; color:var(--ink-3)}
body.nav-open{overflow:hidden}

@media (max-width:900px){
  .nav,.hdr__cta .btn--solid{display:none}
  .burger{display:flex}
  .hdr__in{height:66px}
}
@media (min-width:901px){ .drawer,.scrim{display:none} }

/* ---------- hero ---------- */
.hero{position:relative; isolation:isolate; margin-top:-74px; padding-top:74px;
  min-height:clamp(660px,94vh,940px); display:flex; align-items:center; overflow:hidden}
.hero__art{position:absolute; inset:0; z-index:-2}
.hero__art img{width:100%; height:100%; object-fit:cover; object-position:50% 50%}
.hero__art::after{content:""; position:absolute; inset:0;
  background:
    radial-gradient(62% 56% at 50% 44%, rgba(251,248,243,.96) 0%, rgba(251,248,243,.9) 34%,
      rgba(251,248,243,.6) 56%, rgba(251,248,243,.16) 76%, rgba(251,248,243,0) 92%),
    linear-gradient(to bottom, rgba(251,248,243,.92) 0%, rgba(251,248,243,.25) 14%, rgba(251,248,243,0) 30%),
    linear-gradient(to top, var(--paper) 0%, rgba(251,248,243,.72) 8%, rgba(251,248,243,0) 26%);
}
.hero__in{position:relative; text-align:center; padding-block:clamp(3rem,7vw,5rem) clamp(2.5rem,5vw,4rem);
  width:100%}
.hero h1{max-width:15ch; margin-inline:auto; margin-block:1.35rem 0}
.hero h1 .l2{display:block}
.hero__sub{max-width:53ch; margin:1.5rem auto 0; color:var(--ink-2)}
.hero__cta{display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap; margin-top:2.1rem}
.hero__note{margin-top:1.05rem; font-size:.83rem; color:var(--ink-3); font-family:var(--mono); letter-spacing:.02em}

/* trusted band */
.trusted{margin-top:clamp(3rem,6vw,4.5rem)}
.trusted__label{font-family:var(--mono); font-size:.68rem; letter-spacing:.19em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 1.25rem}
.trusted__row{display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:clamp(1.4rem,3.4vw,2.9rem)}
.trusted__row svg{height:22px; width:auto; color:var(--ink-2); opacity:.72;
  transition:opacity .5s var(--ease), color .5s var(--ease)}
.trusted__row a,.trusted__row span{display:inline-flex}
.trusted__row svg:hover{opacity:.9; color:var(--sage-deep)}
@media (max-width:600px){ .trusted__row svg{height:18px} }

/* page-load stagger */
.rise{opacity:0; transform:translateY(20px); animation:rise .95s var(--ease) forwards}
@keyframes rise{to{opacity:1; transform:none}}
.d1{animation-delay:.05s}.d2{animation-delay:.16s}.d3{animation-delay:.27s}
.d4{animation-delay:.38s}.d5{animation-delay:.49s}.d6{animation-delay:.62s}.d7{animation-delay:.78s}

/* scroll reveal */
.rv{opacity:0; transform:translateY(26px); transition:opacity 1s var(--ease), transform 1s var(--ease)}
.rv.in{opacity:1; transform:none}
.rv-s>*{opacity:0; transform:translateY(22px); transition:opacity .9s var(--ease), transform .9s var(--ease)}
.rv-s.in>*{opacity:1; transform:none}
.rv-s.in>*:nth-child(1){transition-delay:.02s}
.rv-s.in>*:nth-child(2){transition-delay:.10s}
.rv-s.in>*:nth-child(3){transition-delay:.18s}
.rv-s.in>*:nth-child(4){transition-delay:.26s}
.rv-s.in>*:nth-child(5){transition-delay:.34s}
.rv-s.in>*:nth-child(6){transition-delay:.42s}

@media (prefers-reduced-motion:reduce){
  .rise,.rv,.rv-s>*,.drawer__nav a{animation:none!important; opacity:1!important; transform:none!important;
    transition-duration:.01ms!important}
  *{scroll-behavior:auto!important}
}

/* ---------- generic sections ---------- */
.sec{padding-block:var(--sec); position:relative}
.sec--tight{padding-block:clamp(3rem,6vw,5rem)}
.sec--paper2{background:var(--paper-2)}
.sec--ink{background:var(--sage-deep); color:#EFEBE1}
.sec--ink h2,.sec--ink h3{color:#F7F4EC}
.sec--ink .eyebrow{color:#A9BCA5}
.sec--ink .dim{color:#BFC8B8}
.hr{height:1px; background:var(--line-2); border:0; margin:0}

.head{max-width:640px; margin-bottom:clamp(2.5rem,5vw,4rem)}
.head--center{margin-inline:auto; text-align:center}
.head--center .eyebrow{justify-content:center}
.head p{margin-top:1.1rem}

/* worked-example editorial strip */
.worked{padding-block:clamp(3.5rem,7vw,6rem); border-block:1px solid var(--line-2)}
.worked__grid{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(1.75rem,5vw,4.5rem); align-items:start}
.worked__lead{font-family:var(--serif); font-size:clamp(1.6rem,3.1vw,2.35rem); line-height:1.24;
  letter-spacing:-.025em; font-variation-settings:"SOFT" 50,"WONK" 1; margin:0}
.worked__lead b{font-weight:400; color:var(--sage-deep); font-variation-settings:"SOFT" 60,"WONK" 1;
  font-style:italic}
.months{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--line-2);
  border:1px solid var(--line-2); border-radius:var(--r-m); overflow:hidden; margin-top:1.9rem}
.months div{background:var(--paper); padding:.95rem 1rem}
.months dt{font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-4); margin:0 0 .3rem}
.months dd{margin:0; font-family:var(--serif); font-size:clamp(1.15rem,2.4vw,1.5rem); letter-spacing:-.03em}
.months div:last-child{background:var(--sage-soft)}
.months div:last-child dd{color:var(--sage-deep)}
@media (max-width:760px){ .worked__grid{grid-template-columns:1fr} }

/* ---------- calculator ---------- */
.calc{display:grid; grid-template-columns:minmax(0,340px) minmax(0,1fr); gap:clamp(1.5rem,3vw,2.75rem);
  align-items:stretch}
.panel{background:var(--card); border:1px solid var(--line); border-radius:var(--r-l);
  box-shadow:var(--sh-2); padding:clamp(1.35rem,2.4vw,1.85rem)}
.panel__hd{display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding-bottom:1rem; margin-bottom:1.1rem; border-bottom:1px solid var(--line-2)}
.panel__hd h3{font-size:1.18rem}
.panel__hd span{font-family:var(--mono); font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-4)}

.presets{display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:1.35rem}
.presets button{border:1px solid var(--line); background:var(--paper); border-radius:999px;
  padding:.44rem .8rem; font-size:.79rem; cursor:pointer; color:var(--ink-2); min-height:36px;
  transition:all .35s var(--ease)}
.presets button:hover{border-color:var(--line-3); background:var(--paper-2)}
.presets button[aria-pressed=true]{background:var(--ink); color:var(--paper); border-color:var(--ink)}

.slider{margin-bottom:.55rem}
.slider__top{display:flex; justify-content:space-between; align-items:baseline; gap:.75rem; margin-bottom:.3rem}
.slider__top label{font-size:.85rem; color:var(--ink-2)}
.slider__top output{font-family:var(--mono); font-size:.86rem; font-weight:500; color:var(--ink);
  font-variant-numeric:tabular-nums}
input[type=range]{-webkit-appearance:none; appearance:none; width:100%; background:transparent; margin:0;
  height:44px; cursor:grab; display:block; touch-action:pan-y}
input[type=range]:active{cursor:grabbing}
input[type=range]::-webkit-slider-runnable-track{height:5px; border-radius:999px;
  background:linear-gradient(to right,var(--sage-deep) var(--pct,50%),var(--paper-3) var(--pct,50%))}
input[type=range]::-moz-range-track{height:5px; border-radius:999px; background:var(--paper-3)}
input[type=range]::-moz-range-progress{height:5px; border-radius:999px; background:var(--sage-deep)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:24px; height:24px; border-radius:50%;
  background:var(--card); border:1.5px solid var(--sage-deep); margin-top:-9.5px;
  box-shadow:0 1px 2px rgba(27,25,23,.12),0 4px 10px -2px rgba(27,25,23,.18);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease)}
input[type=range]::-moz-range-thumb{width:22px; height:22px; border-radius:50%; background:var(--card);
  border:1.5px solid var(--sage-deep); box-shadow:0 2px 6px rgba(27,25,23,.16)}
input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.14)}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.02); box-shadow:0 0 0 6px rgba(63,83,64,.14)}

.seg{display:inline-flex; padding:3px; background:var(--paper-2); border-radius:999px;
  border:1px solid var(--line-2); position:relative; isolation:isolate}
.seg button{border:0; background:none; padding:.42rem .8rem; border-radius:999px; cursor:pointer;
  font-size:.8rem; color:var(--ink-3); min-height:34px; position:relative; z-index:1;
  transition:color .35s var(--ease)}
.seg button[aria-pressed=true]{color:var(--ink)}
.seg__pill{position:absolute; z-index:0; top:3px; bottom:3px; left:0; width:0; border-radius:999px;
  background:var(--card); box-shadow:var(--sh-1);
  transition:transform .55s var(--ease), width .55s var(--ease)}

.calc__out{display:grid; grid-template-rows:auto 1fr auto; gap:1.25rem}
.chartbox{background:var(--card); border:1px solid var(--line); border-radius:var(--r-l);
  box-shadow:var(--sh-2); padding:clamp(1.1rem,2.2vw,1.6rem); overflow:hidden}
.chartbox svg{width:100%; height:auto; display:block; overflow:visible}
.legend{display:flex; flex-wrap:wrap; gap:1.15rem; margin-top:.9rem; padding-top:.9rem;
  border-top:1px solid var(--line-2); font-size:.8rem; color:var(--ink-3)}
.legend i{display:inline-block; width:14px; height:3px; border-radius:2px; margin-right:.45rem;
  vertical-align:middle; font-style:normal}
.legend .k-bar i{background:var(--rose); height:9px; width:9px; border-radius:2px}
.legend .k-pay i{background:var(--sage-deep)}
.legend .k-tax i{background:var(--sand); height:9px; width:9px; border-radius:2px}

.stats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--line-2);
  border:1px solid var(--line-2); border-radius:var(--r-l); overflow:hidden}
.stat{background:var(--card); padding:clamp(.95rem,1.8vw,1.35rem)}
.stat dt{font-family:var(--mono); font-size:.64rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-4); margin:0 0 .4rem; line-height:1.4}
.stat dd{margin:0; font-family:var(--serif); font-size:clamp(1.5rem,3.1vw,2.1rem); letter-spacing:-.035em;
  line-height:1; font-variant-numeric:tabular-nums}
.stat--hero{background:var(--sage-soft)}
.stat--hero dd{color:var(--sage-deep)}
.stat small{display:block; font-family:var(--sans); font-size:.75rem; color:var(--ink-3);
  letter-spacing:0; margin-top:.45rem; line-height:1.4}
.calc__note{font-size:.83rem; color:var(--ink-3); margin-top:1rem; display:flex; gap:.55rem; align-items:flex-start}
.calc__note svg{flex:none; margin-top:3px; color:var(--sage)}
@media (max-width:940px){
  .calc{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
}

/* ---------- runway what-if ---------- */
.runway{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(1.75rem,4vw,3.5rem);
  align-items:center}
.runway__viz{background:var(--card); border:1px solid var(--line); border-radius:var(--r-l);
  padding:clamp(1.3rem,2.6vw,2rem); box-shadow:var(--sh-2)}
.runway__big{font-family:var(--serif); font-size:clamp(3.2rem,8vw,5rem); letter-spacing:-.045em;
  line-height:.95; font-variant-numeric:tabular-nums; margin:0}
.runway__big .u{font-size:.34em; letter-spacing:-.02em; color:var(--ink-3); margin-left:.35rem}
.runway__date{font-family:var(--mono); font-size:.8rem; color:var(--ink-3); margin:.7rem 0 1.4rem;
  letter-spacing:.02em}
.bars{display:flex; gap:4px; height:64px; align-items:flex-end}
.bars i{flex:1; background:var(--paper-3); border-radius:3px; height:26%; transition:height .6s var(--ease),
  background-color .6s var(--ease)}
.bars i.on{background:var(--sage-deep); height:100%}
.bars i.warn{background:var(--rose)}
.bars__scale{display:flex; justify-content:space-between; font-family:var(--mono); font-size:.64rem;
  color:var(--ink-4); margin-top:.55rem; letter-spacing:.1em}
@media (max-width:860px){ .runway{grid-template-columns:1fr} }

/* ---------- editorial feature spread ---------- */
.spread{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2rem,5vw,4.5rem);
  align-items:center}
.spread--flip .spread__art{order:2}
.spread__art{position:relative; border-radius:var(--r-l); overflow:hidden; box-shadow:var(--sh-3)}
.spread__art img{width:100%; height:100%; aspect-ratio:4/5; object-fit:cover}
.spread__art figcaption{position:absolute; left:0; right:0; bottom:0; padding:2.4rem 1.4rem 1.15rem;
  font-size:.8rem; color:#FDFBF7; letter-spacing:-.005em;
  background:linear-gradient(to top,rgba(27,25,23,.62),rgba(27,25,23,0))}
.spread__body h2{margin-bottom:1.1rem}
.steps{list-style:none; margin:2rem 0 0; padding:0; counter-reset:s}
.steps li{counter-increment:s; padding:1.15rem 0 1.15rem 3.1rem; border-top:1px solid var(--line-2);
  position:relative}
.steps li::before{content:counter(s,decimal-leading-zero); position:absolute; left:0; top:1.25rem;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; color:var(--sage-deep);
  border:1px solid var(--sage-soft); border-radius:999px; width:30px; height:30px; display:grid; place-items:center}
.steps h4{margin-bottom:.3rem}
.steps p{font-size:.93rem; color:var(--ink-3); margin:0}
@media (max-width:820px){
  .spread{grid-template-columns:1fr}
  .spread--flip .spread__art{order:0}
  .spread__art img{aspect-ratio:16/11}
}

/* ---------- numeric proof band ---------- */
.proof{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px;
  background:rgba(247,244,236,.16); border-radius:var(--r-l); overflow:hidden}
.proof>div{background:var(--sage-deep); padding:clamp(1.4rem,3vw,2.2rem)}
.proof dt{font-family:var(--mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase;
  color:#A9BCA5; margin:0 0 .8rem}
.proof dd{margin:0; font-family:var(--serif); font-size:clamp(2.2rem,4.6vw,3.4rem); letter-spacing:-.04em;
  line-height:.95; color:#F7F4EC; font-variant-numeric:tabular-nums}
.proof p{font-size:.83rem; color:#BFC8B8; margin:.65rem 0 0; line-height:1.5}
@media (max-width:900px){ .proof{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:460px){ .proof{grid-template-columns:1fr} }

/* ---------- illustrated divider ---------- */
.divider{position:relative; height:clamp(240px,32vw,420px); overflow:hidden; isolation:isolate}
.divider img{width:100%; height:100%; object-fit:cover; object-position:50% 55%}
.divider::after{content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom,var(--paper) 0%,rgba(251,248,243,0) 26%,rgba(251,248,243,0) 70%,var(--paper) 100%)}
.divider__q{position:absolute; inset:0; z-index:2; display:grid; place-items:center; text-align:center;
  padding:var(--pad)}
.divider__q p{font-family:var(--serif); font-size:clamp(1.4rem,3.1vw,2.35rem); line-height:1.28;
  letter-spacing:-.028em; max-width:19ch; margin:0; font-variation-settings:"SOFT" 60,"WONK" 1;
  text-shadow:0 1px 30px rgba(251,248,243,.95),0 1px 6px rgba(251,248,243,.9)}
.divider--plain .divider__q{display:none}

/* ---------- cards / grids ---------- */
.trio{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1rem,2vw,1.5rem)}
@media (max-width:860px){ .trio{grid-template-columns:1fr} }
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r-l);
  padding:clamp(1.4rem,2.4vw,1.9rem); box-shadow:var(--sh-1);
  transition:transform .55s var(--ease), box-shadow .55s var(--ease), border-color .5s var(--ease)}
.card:hover{transform:translateY(-3px); box-shadow:var(--sh-2); border-color:var(--line-3)}
.card h3{margin-bottom:.6rem}
.card p{font-size:.95rem; color:var(--ink-3); margin:0}
.card__ico{width:38px; height:38px; border-radius:11px; display:grid; place-items:center; margin-bottom:1.1rem;
  background:var(--sage-soft); color:var(--sage-deep)}

/* not-a-bank / limits */
.limits{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--line-2);
  border:1px solid var(--line-2); border-radius:var(--r-l); overflow:hidden}
.limits>div{background:var(--paper); padding:clamp(1.3rem,2.6vw,1.9rem)}
.limits h4{display:flex; gap:.6rem; align-items:center; margin-bottom:.55rem}
.limits h4 svg{flex:none; color:var(--sage)}
.limits--no h4 svg{color:var(--rose)}
.limits p{font-size:.92rem; color:var(--ink-3); margin:0}
@media (max-width:720px){ .limits{grid-template-columns:1fr} }

/* ---------- testimonials ---------- */
.tst{position:relative}
.tst__win{overflow:hidden}
.tst__track{display:flex; transition:transform .8s var(--ease)}
.tst__slide{flex:0 0 100%; padding-inline:2px}
.tst__q{font-family:var(--serif); font-size:clamp(1.45rem,3vw,2.15rem); line-height:1.32;
  letter-spacing:-.025em; font-variation-settings:"SOFT" 55,"WONK" 1; margin:0 0 1.9rem; max-width:22ch}
.tst__who{display:flex; align-items:center; gap:.9rem}
.av{width:46px; height:46px; border-radius:50%; flex:none; display:inline-flex;
  align-items:center; justify-content:center; text-align:center; line-height:1;
  font-family:var(--mono); font-size:.78rem; letter-spacing:.04em; font-weight:500}
.tst__who>div>b{display:block; font-weight:500; font-size:.95rem}
.tst__who>div>span{display:block; font-size:.85rem; color:var(--ink-3)}
.tst__ctl{display:flex; align-items:center; gap:.6rem; margin-top:2.2rem}
.tst__btn{width:44px; height:44px; border-radius:999px; border:1px solid var(--line-3); background:var(--card);
  cursor:pointer; display:grid; place-items:center;
  transition:background-color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease)}
.tst__btn:hover{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.tst__btn:active{transform:scale(.94)}
.tst__dots{display:flex; gap:.45rem; margin-left:.7rem}
.tst__dots button{width:34px; height:44px; border:0; background:none; cursor:pointer; padding:0;
  display:grid; place-items:center}
.tst__dots button::before{content:""; width:100%; height:2px; background:var(--line-3); border-radius:2px;
  transition:background-color .4s var(--ease)}
.tst__dots button[aria-selected=true]::before{background:var(--sage-deep)}
.tst__grid{display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr); gap:clamp(1.5rem,4vw,3.5rem);
  align-items:center}
@media (max-width:820px){ .tst__grid{grid-template-columns:1fr} }

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{width:100%; text-align:left; background:none; border:0; cursor:pointer; padding:1.35rem 3rem 1.35rem 0;
  font-family:var(--serif); font-size:clamp(1.05rem,1.9vw,1.32rem); letter-spacing:-.02em; line-height:1.35;
  position:relative; color:var(--ink); font-variation-settings:"SOFT" 40,"WONK" 1;
  transition:color .35s var(--ease)}
.faq__q:hover{color:var(--sage-deep)}
.faq__q::before,.faq__q::after{content:""; position:absolute; right:6px; top:50%; background:var(--sage-deep);
  border-radius:2px; transition:transform .5s var(--ease), opacity .4s var(--ease)}
.faq__q::before{width:14px; height:1.5px; transform:translateY(-50%)}
.faq__q::after{width:1.5px; height:14px; right:12px; transform:translateY(-50%)}
.faq__q[aria-expanded=true]::after{transform:translateY(-50%) rotate(90deg); opacity:0}
.faq__a{display:grid; grid-template-rows:0fr; transition:grid-template-rows .55s var(--ease)}
.faq__item.open .faq__a{grid-template-rows:1fr}
.faq__a>div{overflow:hidden}
.faq__a p{padding-bottom:1.5rem; padding-right:clamp(0rem,6vw,4rem); color:var(--ink-3); font-size:.97rem; margin:0}
.faq__a p+p{padding-bottom:1.5rem}

/* ---------- pricing ---------- */
.plans{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1rem,2vw,1.4rem);
  align-items:start}
.plan{background:var(--card); border:1px solid var(--line); border-radius:var(--r-l);
  padding:clamp(1.5rem,2.6vw,2rem); box-shadow:var(--sh-1); display:flex; flex-direction:column; height:100%;
  transition:transform .55s var(--ease), box-shadow .55s var(--ease)}
.plan:hover{transform:translateY(-3px); box-shadow:var(--sh-2)}
.plan--feat{background:var(--sage-deep); color:#E9E6DC; border-color:var(--sage-deep); box-shadow:var(--sh-3);
  position:relative}
.plan--feat h3{color:#F7F4EC}
.plan--feat .plan__desc,.plan--feat .plan__per{color:#B9C4B2}
.plan--feat .plan__feat li{color:#DDE0D3}
.plan--feat .plan__feat li svg{color:#A9BCA5}
.plan__tag{position:absolute; top:-11px; left:clamp(1.5rem,2.6vw,2rem); background:var(--sand); color:#4A3F2C;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  padding:.32rem .7rem; border-radius:999px}
.plan h3{font-size:1.4rem; margin-bottom:.4rem}
.plan__desc{font-size:.89rem; color:var(--ink-3); margin:0 0 1.5rem; min-height:2.6em; line-height:1.45}
.plan__price{display:flex; align-items:baseline; gap:.06em; margin:0; font-family:var(--serif);
  font-size:clamp(2.6rem,5vw,3.4rem); letter-spacing:-.045em; line-height:1; font-variant-numeric:tabular-nums}
.plan__per{font-family:var(--sans); font-size:.85rem; letter-spacing:0; color:var(--ink-3); margin-left:.35rem}
.plan__save{font-family:var(--mono); font-size:.7rem; letter-spacing:.06em; color:var(--sage-deep);
  background:var(--sage-soft); padding:.25rem .55rem; border-radius:999px; display:inline-block;
  margin-top:.85rem; opacity:0; transform:translateY(-4px); transition:opacity .5s var(--ease), transform .5s var(--ease)}
.plan__save.show{opacity:1; transform:none}
.plan--feat .plan__save{background:rgba(247,244,236,.16); color:#D9E0D2}
.plan__feat{list-style:none; padding:0; margin:1.6rem 0 1.9rem; display:grid; gap:.62rem; flex:1}
.plan__feat li{display:flex; gap:.6rem; font-size:.92rem; color:var(--ink-2); line-height:1.45}
.plan__feat li svg{flex:none; margin-top:5px; color:var(--sage)}
@media (max-width:900px){ .plans{grid-template-columns:1fr; max-width:460px; margin-inline:auto} }

/* comparison table */
.cmp{width:100%; border-collapse:collapse; font-size:.92rem}
.cmp caption{text-align:left; font-family:var(--mono); font-size:.68rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-4); padding-bottom:1.1rem}
.cmp th,.cmp td{padding:.95rem 1rem; text-align:left; border-bottom:1px solid var(--line-2); vertical-align:top}
.cmp thead th{font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3); font-weight:500; border-bottom:1px solid var(--line-3)}
.cmp tbody th{font-weight:400; color:var(--ink); width:34%}
.cmp td{color:var(--ink-3)}
.cmp td b{font-weight:500; color:var(--ink)}
.cmp .yes{color:var(--sage-deep)}
.cmp .no{color:var(--ink-3); opacity:.75}
.cmp tbody tr:hover td,.cmp tbody tr:hover th{background:rgba(213,223,210,.24)}
.cmp__wrap{overflow-x:auto}
@media (max-width:820px){
  .cmp,.cmp tbody,.cmp tr,.cmp th,.cmp td{display:block; width:auto}
  .cmp thead{position:absolute; left:-9999px}
  .cmp tbody tr{background:var(--card); border:1px solid var(--line); border-radius:var(--r-m);
    padding:1.1rem 1.15rem; margin-bottom:.75rem; box-shadow:var(--sh-1)}
  .cmp tbody th{width:auto; padding:0 0 .75rem; border:0; font-family:var(--serif); font-size:1.1rem;
    letter-spacing:-.02em}
  .cmp tbody td{padding:.42rem 0; border:0; display:flex; justify-content:space-between; gap:1rem;
    border-top:1px solid var(--line-2); font-size:.88rem}
  .cmp tbody td::before{content:attr(data-plan); font-family:var(--mono); font-size:.64rem;
    letter-spacing:.12em; text-transform:uppercase; color:var(--ink-4); flex:none; padding-top:2px}
  .cmp tbody td>span{display:inline-flex; align-items:baseline; gap:.4rem; text-align:right; justify-content:flex-end}
  .cmp tbody td svg{align-self:center}
  .cmp tbody tr:hover td,.cmp tbody tr:hover th{background:none}
}

/* ---------- timeline spine (how-it-works) ---------- */
.spine{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); gap:clamp(2rem,6vw,5rem);
  align-items:start}
.spine__sticky{position:sticky; top:120px}
.spine__list{list-style:none; margin:0; padding:0}
.spine__list li{position:relative; padding:0 0 clamp(2.5rem,5vw,3.5rem) 3.4rem}
.spine__list li::before{content:""; position:absolute; left:14px; top:26px; bottom:-4px; width:1px;
  background:linear-gradient(to bottom,var(--sage-soft),var(--line-2))}
.spine__list li:last-child::before{display:none}
.spine__list li::after{content:""; position:absolute; left:9px; top:11px; width:11px; height:11px;
  border-radius:50%; background:var(--paper); border:1.5px solid var(--sage-deep)}
.spine__k{font-family:var(--mono); font-size:.66rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink-4); display:block; margin-bottom:.5rem}
.spine__list h3{margin-bottom:.6rem}
.spine__list p{color:var(--ink-3); font-size:.97rem; margin:0}
.spine__list .fig{margin-top:1.1rem; background:var(--paper-2); border:1px solid var(--line-2);
  border-radius:var(--r-m); padding:.95rem 1.1rem; font-family:var(--mono); font-size:.82rem;
  color:var(--ink-2); display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap}
.spine__list .fig b{color:var(--sage-deep); font-weight:500}
@media (max-width:900px){ .spine{grid-template-columns:1fr} .spine__sticky{position:static} }

/* ---------- story ---------- */
.letter{max-width:62ch}
.letter p{font-size:clamp(1.02rem,1.4vw,1.13rem); line-height:1.75; color:var(--ink-2)}
.letter p:first-of-type::first-letter{float:left; font-family:var(--serif); font-size:3.4em; line-height:.82;
  padding:.04em .14em 0 0; color:var(--sage-deep); font-variation-settings:"SOFT" 50,"WONK" 1}
.pull{font-family:var(--serif); font-size:clamp(1.6rem,3.4vw,2.5rem); line-height:1.26; letter-spacing:-.028em;
  font-variation-settings:"SOFT" 60,"WONK" 1; border-left:2px solid var(--sage-soft);
  padding-left:clamp(1.2rem,3vw,2.2rem); margin:clamp(2.5rem,5vw,3.5rem) 0; color:var(--ink)}
.pull cite{display:block; font-family:var(--sans); font-style:normal; font-size:.85rem; color:var(--ink-3);
  letter-spacing:0; margin-top:1.1rem}
.people{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(1rem,2vw,1.5rem)}
.person{background:var(--card); border:1px solid var(--line); border-radius:var(--r-l); padding:1.5rem;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease)}
.person:hover{transform:translateY(-3px); box-shadow:var(--sh-2)}
.person .av{width:52px; height:52px; margin-bottom:1.1rem; font-size:.85rem}
.person b{display:block; font-weight:500; font-size:1rem}
.person span:not(.av){display:block; font-size:.83rem; color:var(--ink-3); margin-bottom:.7rem}
.person p{font-size:.88rem; color:var(--ink-3); margin:0; line-height:1.55}
@media (max-width:900px){ .people{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .people{grid-template-columns:1fr} }

/* ---------- CTA + footer ---------- */
.cta{position:relative; overflow:hidden; text-align:center; border-radius:var(--r-xl);
  background:var(--sage-deep); color:#EFEBE1; padding:clamp(3rem,7vw,5.5rem) var(--pad)}
.cta::before{content:""; position:absolute; inset:0;
  background:radial-gradient(60% 90% at 50% 0%,rgba(227,213,188,.22),transparent 70%)}
.cta>*{position:relative}
.cta h2{color:#F9F6EF; max-width:16ch; margin-inline:auto}
.cta p{color:#C6CFBE; max-width:48ch; margin:1.2rem auto 0}
.cta__row{display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap; margin-top:2.1rem}
.cta .btn--solid{background:#FBF8F3; color:var(--ink)}
.cta .btn--solid:hover{background:#fff}
.cta .btn--ghost{border-color:rgba(247,244,236,.35); color:#EFEBE1; background:transparent}
.cta .btn--ghost:hover{border-color:#EFEBE1; background:rgba(247,244,236,.09); color:#fff}
.cta small{display:block; margin-top:1.3rem; font-size:.8rem; color:#A9BCA5; font-family:var(--mono);
  letter-spacing:.02em}

.ftr{border-top:1px solid var(--line); padding-block:clamp(3rem,6vw,4.5rem) 2rem; margin-top:var(--sec)}
.ftr__grid{display:grid; grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
  gap:clamp(1.75rem,4vw,3rem)}
.ftr__brand .brand{margin-bottom:1rem}
.ftr__brand p{font-size:.9rem; color:var(--ink-3); max-width:34ch}
.ftr h5{font-family:var(--mono); font-size:.66rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink-4); margin:0 0 1rem; font-weight:500}
.ftr ul{list-style:none; margin:0; padding:0; display:grid; gap:.6rem}
.ftr ul a{font-size:.91rem; color:var(--ink-2); text-decoration:none; transition:color .3s var(--ease)}
.ftr ul a:hover{color:var(--sage-deep)}
.ftr__bot{display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; align-items:center;
  margin-top:clamp(2.5rem,5vw,3.5rem); padding-top:1.5rem; border-top:1px solid var(--line-2);
  font-size:.8rem; color:var(--ink-4)}
.ftr__bot p{margin:0}
.ftr__legal{max-width:62ch; line-height:1.6}
@media (max-width:820px){ .ftr__grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:480px){ .ftr__grid{grid-template-columns:1fr} }

/* ---------- newsletter / inline form ---------- */
.nl{display:flex; gap:.5rem; margin-top:1.3rem; flex-wrap:wrap; max-width:400px}
.nl input{flex:1 1 190px; min-width:0; padding:.8rem 1.05rem; border-radius:999px; min-height:46px;
  border:1px solid var(--line-3); background:var(--card); font-size:.9rem;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease)}
.nl input:focus{outline:none; border-color:var(--sage-deep); box-shadow:0 0 0 4px rgba(63,83,64,.11)}
.nl input[aria-invalid=true]{border-color:var(--rose); box-shadow:0 0 0 4px rgba(192,144,138,.14)}
.nl__msg{flex-basis:100%; font-size:.8rem; margin:.2rem 0 0; min-height:1.2em; color:var(--ink-3)}
.nl__msg.err{color:#9B5E58}
.nl__msg.ok{color:var(--sage-deep)}

/* ---------- badge ---------- */
.sf-badge{position:fixed;right:16px;bottom:16px;z-index:9999;display:inline-flex;align-items:center;
  gap:.5rem;padding:.6rem .95rem;border-radius:999px;font-size:.78rem;letter-spacing:.01em;
  text-decoration:none;line-height:1;backdrop-filter:blur(12px);
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s;
  background:rgba(255,253,249,.8); color:var(--ink-2); border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(27,25,23,.05),0 10px 26px -12px rgba(27,25,23,.3)}
.sf-badge:hover{transform:translateY(-2px); box-shadow:0 2px 4px rgba(27,25,23,.06),0 16px 34px -14px rgba(27,25,23,.36)}
.sf-badge strong{font-weight:600; color:var(--ink)}
.sf-badge__dot{width:6px;height:6px;border-radius:50%;flex:none; background:var(--sage);
  box-shadow:0 0 0 0 rgba(110,133,112,.6); animation:sfPulse 2.6s var(--ease) infinite}
@keyframes sfPulse{0%{box-shadow:0 0 0 0 rgba(110,133,112,.55)}
  70%{box-shadow:0 0 0 7px rgba(110,133,112,0)} 100%{box-shadow:0 0 0 0 rgba(110,133,112,0)}}
body.nav-open .sf-badge{opacity:0; pointer-events:none; transform:translateY(10px)}
@media(max-width:600px){.sf-badge{right:12px;bottom:12px;padding:.5rem .8rem;font-size:.72rem}}
@media (prefers-reduced-motion:reduce){.sf-badge__dot{animation:none}}

/* ---------- page-specific hero variants ---------- */
.hero--split{min-height:0; align-items:center; background:var(--paper-2);
  padding-top:calc(74px + clamp(3rem,6vw,5rem)); padding-bottom:clamp(3rem,6vw,5rem);
  border-bottom:1px solid var(--line-2)}
.hero--split__grid{display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(2rem,5vw,4rem); align-items:center; width:100%}
.hero--split h1{font-size:clamp(2.35rem,5.1vw,3.95rem); max-width:15ch; margin:1.15rem 0 0}
.hero--split .lede{max-width:48ch; margin-top:1.35rem; color:var(--ink-2)}
.hero--split__art{margin:0; border-radius:var(--r-l); overflow:hidden; box-shadow:var(--sh-3)}
.hero--split__art img{width:100%; aspect-ratio:5/4; object-fit:cover; height:auto}
@media (max-width:860px){
  .hero--split__grid{grid-template-columns:1fr}
  .hero--split__art{order:-1}
  .hero--split__art img{aspect-ratio:16/10}
  .hero--split{padding-top:calc(66px + 1.5rem); padding-bottom:2.5rem}
  .hero--split__grid{gap:1.5rem}
  .hero--split h1{margin-top:.85rem}
  .hero--split .lede{margin-top:1rem; font-size:1rem}
}

.hero--plain{min-height:0; align-items:flex-start; overflow:visible;
  padding-top:calc(74px + clamp(3rem,6vw,5rem)); padding-bottom:clamp(1.5rem,3vw,2.5rem);
  background:radial-gradient(72% 78% at 50% -10%,var(--paper-2) 0%,var(--paper) 72%)}
.hero--plain .hero__in{padding-block:0}
.hero--plain h1{font-size:clamp(2.4rem,5.5vw,4.15rem); max-width:18ch}

.hero--story{min-height:clamp(520px,74vh,720px); align-items:flex-end}
.hero--story .hero__in{text-align:left; padding-block:0 clamp(3rem,6vw,4.5rem)}
.hero--story .eyebrow{justify-content:flex-start}
.hero--story h1{margin-inline:0; max-width:20ch; font-size:clamp(2.3rem,5.3vw,4.2rem)}
.hero--story .hero__sub{margin:1.3rem 0 0; max-width:44ch}
.hero--story .hero__art::after{
  background:
    linear-gradient(to top, var(--paper) 0%, rgba(251,248,243,.93) 26%, rgba(251,248,243,.62) 46%,
      rgba(251,248,243,.18) 72%, rgba(251,248,243,0) 92%),
    linear-gradient(to bottom, rgba(251,248,243,.88) 0%, rgba(251,248,243,.2) 14%, rgba(251,248,243,0) 30%)}

/* ---------- arithmetic panel ---------- */
.math{background:var(--card); border:1px solid var(--line); border-radius:var(--r-l);
  padding:clamp(1.35rem,2.4vw,1.9rem); box-shadow:var(--sh-2)}
.math__cap{font-family:var(--mono); font-size:.68rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink-4); margin:0 0 1.05rem; padding-bottom:.9rem; border-bottom:1px solid var(--line-2)}
.math__row{display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding:.62rem 0;
  font-family:var(--mono); font-size:.83rem; color:var(--ink-3); border-bottom:1px dashed var(--line-2)}
.math__row b{font-weight:500; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap}
.math__row--tot{border-bottom:0; border-top:1px solid var(--line-3); margin-top:.5rem; padding-top:.95rem}
.math__row--tot b{color:var(--sage-deep); font-size:1.35rem; font-family:var(--serif); letter-spacing:-.035em;
  font-variation-settings:"SOFT" 40,"WONK" 1}
.math__note{font-family:var(--sans); font-size:.85rem; color:var(--ink-3); margin:1.25rem 0 0; line-height:1.55}
.panel .math__row:first-of-type{padding-top:0}

.seg--lg button{padding:.66rem 1.2rem; font-size:.88rem; min-height:44px}
.spine__list--flat{max-width:760px}
.sched tbody th{white-space:nowrap; width:20%; font-family:var(--mono); font-size:.82rem}
.divider--plain{height:clamp(200px,26vw,340px)}
.card__ico svg{width:16px; height:16px}
.calc__note a{color:inherit}

/* =========================================================
   MOBILE PASS — 390px is a first-class canvas, not a fallback
   ========================================================= */
@media (max-width:760px){
  /* hero: illustration becomes a horizon band UNDER the type, never behind it */
  .hero{min-height:0; align-items:flex-start; padding-bottom:clamp(140px,38vw,190px)}
  .hero__art{top:auto; left:0; right:0; bottom:0; height:clamp(350px,92vw,450px)}
  .hero__art img{object-position:50% 74%}
  .hero__art::after{
    background:linear-gradient(to bottom,
      var(--paper) 0%, rgba(251,248,243,.97) 16%, rgba(251,248,243,.86) 30%,
      rgba(251,248,243,.42) 48%, rgba(251,248,243,.06) 70%,
      rgba(251,248,243,.24) 88%, rgba(251,248,243,.6) 100%)}
  .hero__in{padding-block:clamp(2.25rem,7vw,3.25rem) clamp(1.25rem,4vw,2rem)}
  .hero h1{max-width:none}
  .hero__sub{font-size:1rem; max-width:33ch; margin-top:1.15rem}
  .hero__cta{flex-direction:column; align-items:stretch; gap:.6rem; max-width:320px;
    margin-inline:auto; margin-top:1.7rem}
  .hero--story .hero__cta{margin-inline:0}
  .hero__note{font-size:.76rem; letter-spacing:0}
  .trusted{margin-top:2.1rem}
  .trusted__row{gap:1.15rem 1.6rem}
  .trusted__row svg{height:16px; opacity:.66}
  .chip{font-size:.79rem; padding:.5rem .8rem .5rem .42rem; min-height:46px}

  .hero--story{min-height:0; align-items:flex-start}
  .hero--story .hero__in{padding-block:clamp(2.5rem,8vw,3.5rem) clamp(1.25rem,4vw,2rem)}
  .hero--story .hero__art::after{
    background:linear-gradient(to bottom,
      var(--paper) 0%, rgba(251,248,243,.97) 16%, rgba(251,248,243,.86) 30%,
      rgba(251,248,243,.42) 48%, rgba(251,248,243,.06) 70%,
      rgba(251,248,243,.24) 88%, rgba(251,248,243,.6) 100%)}
  .hero--plain{padding-bottom:0}
  .hero--plain .hero__in{padding-block:0}

  /* rhythm: editorial columns collapse — tighten, don't strand */
  :root{--sec:clamp(3.4rem,11vw,4.6rem)}
  .head{margin-bottom:2rem}
  .worked{padding-block:3rem}
  .worked__grid{gap:1.5rem}
  .worked__lead{font-size:1.45rem}
  .months{margin-top:1.4rem; grid-template-columns:1fr; }
  .months div{display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
    padding:.8rem 1rem}
  .months dd{font-size:1.25rem}
  .spread{gap:1.75rem}
  .spread__art img{aspect-ratio:5/4}
  .steps{margin-top:1.4rem}
  .steps li{padding:1rem 0 1rem 2.7rem}
  .steps li::before{top:1.1rem; width:26px; height:26px; font-size:.62rem}
  .divider{height:clamp(190px,50vw,240px)}
  .divider__q p{font-size:1.35rem}
  .proof>div{padding:1.3rem 1.35rem}
  .cta{border-radius:var(--r-l); padding:2.6rem 1.35rem}
  .cta__row{flex-direction:column; align-items:stretch; gap:.6rem}
  .tst__ctl{margin-top:1.5rem; margin-bottom:1.9rem}
  .tst__q{font-size:1.42rem; max-width:none; margin-bottom:1.5rem}
  .spine__list li{padding-bottom:2rem}
  .spine__sticky{margin-bottom:2.5rem}
  .pull{margin-block:2.2rem}
  .letter p:first-of-type::first-letter{font-size:3em}

  /* calculator + runway: thumb-sized controls, readable while dragging */
  .panel{padding:1.15rem 1.1rem; border-radius:var(--r-m)}
  .calc{gap:1rem}
  .calc__out{gap:1rem}
  .slider__top label,.slider__top span{font-size:.9rem}
  .slider__top output{font-size:.95rem}
  input[type=range]{height:48px}
  input[type=range]::-webkit-slider-thumb{width:28px; height:28px; margin-top:-11.5px}
  input[type=range]::-moz-range-thumb{width:26px; height:26px}
  .presets{gap:.35rem; margin-bottom:1.1rem}
  .presets button{min-height:44px; font-size:.82rem; padding:.5rem .85rem}
  .seg{width:100%}
  .seg button{flex:1; min-height:44px; font-size:.84rem; padding:.5rem .4rem}
  .chartbox{padding:.9rem .75rem; border-radius:var(--r-m)}
  .legend{gap:.5rem 1rem; font-size:.78rem; margin-top:.75rem; padding-top:.75rem}
  .stats{border-radius:var(--r-m)}
  .stat{padding:1rem 1.1rem; display:flex; align-items:baseline; justify-content:space-between;
    flex-wrap:wrap; gap:.35rem 1rem}
  .stat dt{flex:1 1 100%; margin-bottom:.15rem}
  .stat dd{font-size:1.75rem}
  .stat small{flex:1 1 100%; margin-top:.2rem}
  .runway{gap:1rem}
  .runway__viz{padding:1.3rem 1.15rem; border-radius:var(--r-m)}
  .runway__big{font-size:3.4rem}
  .bars{height:52px}
  .bars i{border-radius:2px}

  /* iOS refuses to not zoom below 16px */
  .nl input{font-size:16px}
  .nl{max-width:none}
  .nl button{width:100%}

  /* stacked comparison cards get real hierarchy */
  .cmp tbody tr{padding:1.1rem 1.15rem 1.15rem}
  .cmp tbody td{padding:.6rem 0; align-items:baseline}
  .cmp tbody td::before{min-width:5.5rem}

  /* accordion + link tap targets */
  .faq__q{padding:1.25rem 2.6rem 1.25rem 0; min-height:56px}
  .ftr ul{gap:.15rem}
  .ftr ul a{display:inline-block; padding:.62rem 0}
  .ftr__grid{gap:2rem 1.5rem}
  .plans{gap:1rem}

  /* keep a clear zone under the fixed badge */
  .ftr{padding-bottom:5.5rem}
  .drawer{padding-bottom:5.5rem}
}
@media (max-width:420px){
  .trusted__row{gap:1rem 1.25rem}
  .trusted__row svg{height:15px}
  .hero h1{font-size:clamp(2.35rem,9.6vw,3rem)}
  .stat dd{font-size:1.6rem}
}
@media (max-width:480px){
  .hero--split__art img{aspect-ratio:16/9}
  .hero--split h1{font-size:clamp(2.1rem,8.8vw,2.6rem)}
}