/* spillway.sh · the stylesheet
   One sheet for every page, served from /assets/ under its content hash (site.<hash>.css). /assets/**
   is cached for a year as immutable, so a change is a new file: edit this one in place, then run
   `python3 tools/fingerprint.py assets/site.<hash>.css` (README, "One stylesheet, fingerprinted").
   Rules the pages keep: no style="" attribute and no <style> element (the edge CSP is style-src 'self'),
   so every drawn state is a class here, the calculator's included (radio presets and :has()).
   The look: Figtree at light weights, warm paper, one deep purple accent ("vault", #33186b: the
   blue of trust, the purple of wealth, dark enough to read as strength), green only on money kept.
   Tokens are the :root block; the dark block below redefines the same names. */

@font-face{font-family:"Figtree";src:url("/assets/fonts/figtree-300.3a8ad337.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Figtree";src:url("/assets/fonts/figtree-400.8f98dd64.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Figtree";src:url("/assets/fonts/figtree-500.953a6a42.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}

:root{
  --paper:#fbfaf7;        /* the page */
  --plate:#f2efea;        /* a quieter band */
  --card:#ffffff;         /* a card on the page */
  --ink:#1e1b19;          /* headlines, and the meter before Spillway */
  --ink-2:#5f5853;        /* the sentence under a headline */
  --dim:#736b65;          /* captions, labels, small print */
  --hair:#ebe5df;         /* one-pixel rules */
  --hair-2:#f2ede8;       /* rules inside a card */
  --accent:#33186b;       /* vault: buttons, chosen presets, the cost after Spillway */
  --accent-hover:#46228a;
  --accent-ink:#ffffff;   /* words on the accent */
  --soft:#eeeaf5;         /* the second button */
  --soft-ink:#33186b;
  --panel-a:#fbfaf7;      /* the calculator's panel, top to bottom */
  --panel-b:#efebf5;
  --line-warm:#d9d1ea;
  --meter:#bdb5ae;        /* the bill before Spillway */
  --shadow-accent:rgba(51,24,107,.22);
  --kept:#0b7a35;         /* money kept, and nothing else */
  --kept-bg:#e3f1e7;
  --fine:#1e1b19;         /* the fine-print bar */
  --fine-ink:#d6cfc9;
  --mark-faint:#e8e1da;   /* the footer wordmark */
  --sans:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --r-card:14px;
  --wrap:1120px;
  --col:960px;            /* the front page's content column */
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#141210;--plate:#1c1916;--card:#1f1b18;--ink:#f4efea;--ink-2:#d3cbc4;--dim:#a69d95;
    --hair:#2e2925;--hair-2:#29241f;--accent:#7356e0;--accent-hover:#8269ea;--accent-ink:#ffffff;
    --soft:#272038;--soft-ink:#cfc3ff;--panel-a:#16141a;--panel-b:#221c30;--line-warm:#3a3150;
    --meter:#5a534d;--shadow-accent:rgba(0,0,0,.5);
    --kept:#46d17e;--kept-bg:#11291b;--fine:#2a2522;--fine-ink:#d3cbc4;--mark-faint:#26211d;
  }
}

/* ground */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;font-family:var(--sans);font-size:16px;line-height:1.55;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.site{min-height:50vh}
h1,h2,h3,p,figure,blockquote,ol,ul,fieldset{margin:0}
ol,ul{padding:0}
fieldset{border:0;padding:0;min-width:0}
legend{padding:0}
a{color:inherit}
img,svg{display:block}
img{max-width:100%;height:auto}
b,strong{font-weight:500}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 32px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* the headline voice: Figtree, light, a little tight */
.h1,.h2,.prose h1,.prose h2,.item h2{font-family:var(--sans);font-weight:300;text-wrap:balance;letter-spacing:-.025em}
.h1,.prose h1{font-size:clamp(44px,6.6vw,88px);line-height:1.02;max-width:16ch}
.h2,.prose h2{font-size:clamp(32px,4.2vw,52px);line-height:1.08;max-width:22ch}
.h3{font-size:20px;line-height:1.25;font-weight:400;letter-spacing:-.01em}
.kicker{font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-bottom:18px}
.kicker a{text-decoration:none}
.kicker a:hover{text-decoration:underline}
.sub,.standfirst{font-size:clamp(17px,1.5vw,19px);line-height:1.55;color:var(--ink-2);max-width:44ch;margin-top:20px}

/* buttons: pills */
.act{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:28px}
.btn,.btn-soft{display:inline-flex;align-items:center;min-height:46px;padding:0 24px;border-radius:999px;font-weight:500;text-decoration:none}
.btn{background:var(--accent);color:var(--accent-ink)}
.btn:hover{background:var(--accent-hover)}
.btn-soft{background:var(--soft);color:var(--soft-ink)}
.btn-soft:hover{box-shadow:inset 0 0 0 1px var(--line-warm)}
.link{color:var(--ink);text-underline-offset:4px}

/* the waitlist: one work-email field and its button in one pill, posting to /waitlist. The balancer
   sends that path to sites-infra's waitlist service, which answers with /waitlist/thanks or
   /waitlist/invalid. .hp is the honeypot, off-screen: a bot that fills it is thanked and dropped. */
.join{display:flex;align-items:center;gap:6px;flex:0 1 440px;min-width:0;padding:3px;border-radius:999px;background:var(--card);border:1px solid var(--hair);box-shadow:0 1px 2px rgba(30,27,25,.04),0 12px 32px -20px var(--shadow-accent)}
.join:focus-within{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 1px 2px rgba(30,27,25,.04),0 12px 32px -20px var(--shadow-accent)}
.join input{flex:1 1 auto;min-width:0;height:40px;padding:0 8px 0 18px;border:0;border-radius:999px;background:transparent;color:var(--ink);font:inherit;font-size:16px}
.join input::placeholder{color:var(--dim);opacity:1}
.join input:focus{outline:none}
.join input:-webkit-autofill{-webkit-text-fill-color:var(--ink);box-shadow:0 0 0 40px var(--card) inset}
.join .btn{flex:none;justify-content:center;min-height:40px;padding:0 20px;border:0;font:inherit;font-weight:500;cursor:pointer}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

/* the header: the mark and the name, then the links and the one button; aria-current marks the section */
.nav{background:var(--paper)}
.nav-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;min-height:68px;gap:10px 24px;padding-top:10px;padding-bottom:10px}
.nav-mark{display:inline-flex;align-items:center;gap:9px;font-weight:500;font-size:19px;letter-spacing:-.01em;text-decoration:none}
.nav-mark svg{fill:currentColor}
.nav-links{display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;list-style:none;font-size:15px}
.nav-links a{text-decoration:none;color:var(--ink-2)}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--ink)}
.nav-links a[aria-current="page"]{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.nav-links .nav-cta a{display:inline-flex;align-items:center;min-height:38px;padding:0 16px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-weight:500;font-size:14px}
.nav-links .nav-cta a:hover{background:var(--accent-hover);color:var(--accent-ink)}

/* the inner pages */
.hero{padding:96px 0 88px}
.sec{padding:80px 0;border-top:1px solid var(--hair)}
.plate{background:var(--plate)}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:40px}
.card{background:var(--card);border:1px solid var(--hair);border-radius:var(--r-card);padding:28px}
.card p{color:var(--ink-2);margin-top:10px}

/* questions: every answer is a <details>, mirrored in FAQPage markup */
.faq{margin-top:36px;max-width:780px;border-top:1px solid var(--hair)}
.faq details{border-bottom:1px solid var(--hair)}
.faq summary{cursor:pointer;list-style:none;padding:20px 36px 20px 4px;font-size:18px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:18px;color:var(--dim)}
.faq details[open] summary::after{content:"−"}
.faq details p{padding:0 4px 22px;color:var(--ink-2);max-width:62ch}

/* the blog index */
.list{margin-top:48px;max-width:780px}
.item{padding:28px 0;border-top:1px solid var(--hair)}
.item time,.by{font-size:14px;color:var(--dim)}
.item h2{font-size:30px;line-height:1.2;margin:8px 0 10px}
.item h2 a{text-decoration:none}
.item h2 a:hover{text-decoration:underline;text-underline-offset:4px}
.item p{color:var(--ink-2)}
.by{margin-top:10px}

/* a post */
.prose{max-width:720px;padding-top:72px;padding-bottom:96px}
.prose p{margin-top:20px;font-size:17px}
.prose .standfirst{margin-top:24px;margin-bottom:12px}
.prose h2{margin-top:48px;font-size:clamp(28px,3.4vw,40px)}
.prose a{text-underline-offset:3px}
.sources{margin-top:56px;padding-top:24px;border-top:1px solid var(--hair);font-size:15px;color:var(--dim)}
.sources h2{font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;margin:0}
.sources ol{padding-left:20px;margin-top:12px}

/* the foot: light, with the fine print on one dark bar, and the name as wide as the screen at the very bottom.
   The foot is a size container, so cqi below is its width (the screen, less any scrollbar); it clips, so nothing
   in it can scroll the page sideways. */
.foot{padding:64px 0 0;border-top:1px solid var(--hair);background:var(--paper);container-type:inline-size;overflow:hidden}
.foot .fine{margin:0 0 48px;padding:12px 18px;border-radius:10px;background:var(--fine);color:var(--fine-ink);font-size:12px;line-height:1.5;text-align:center}
.foot-cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px}
.foot h2{font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-bottom:14px}
.foot ul{list-style:none;display:grid;gap:8px}
.foot a{color:var(--ink-2);text-decoration:none}
.foot a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.foot p{color:var(--ink-2)}
.foot .legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:48px;padding-top:20px;border-top:1px solid var(--hair);font-size:14px;color:var(--dim)}
/* the name, gutter to gutter (32px, 20px on phones), one gutter off the bottom of the page. Measured in ems of
   Figtree 300 at -.04em: the ink of "Spillway" is 3.256 wide, starts .055 in (the S's bearing), and at
   line-height 1 runs .062 below the line box (the y's tail). vw is the fallback where cqi isn't known. */
.foot .foot-wordmark{font-weight:300;font-size:calc((100vw - 64px)/3.256);font-size:calc((100cqi - 64px)/3.256);line-height:1;letter-spacing:-.04em;color:var(--mark-faint);margin:24px 0 calc(32px + .062em);text-indent:calc(32px - .055em);white-space:nowrap}

/* the 404 page */
.missing{padding:120px 0}

/* ===== the front page: one column, every block on the same 960px measure ===== */
.home .col{max-width:var(--col);margin:0 auto}
.home .h1,.home .h2,.home .sub{margin-left:auto;margin-right:auto}
.home .act{justify-content:center}
.lead{padding:clamp(40px,6vw,88px) 0 0;text-align:center}
.lead .sub{max-width:52ch}
.block{padding:clamp(72px,8vw,112px) 0 0}
.block-head{text-align:center}

/* the punch line: what our CI cost before Spillway and after, bars drawn to scale */
.cost{margin-top:clamp(36px,5vw,56px);background:var(--card);border:1px solid var(--hair);border-radius:16px;box-shadow:0 1px 2px rgba(30,27,25,.04),0 24px 56px -32px rgba(30,27,25,.25);text-align:left}
.cost-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;padding:14px 24px;border-bottom:1px solid var(--hair-2);font-size:13px;color:var(--dim)}
.cost-head span:first-child{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.cost-rows{padding:8px 24px 4px}
.cost-row{display:grid;grid-template-columns:200px minmax(0,1fr) 128px;align-items:center;gap:8px 24px;padding:18px 0;border-bottom:1px solid var(--hair-2)}
.cost-row:last-child{border-bottom:0}
.cost-label b{display:block;font-size:17px;font-weight:500}
.cost-label span{display:block;margin-top:2px;font-size:13px;color:var(--dim)}
.cost-bar{position:relative;height:40px;border-radius:8px}
.cost-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:8px}
.cost-bar .before{width:100%;background:var(--meter)}
.cost-bar .after{width:10.72%;background:var(--accent)}
.cost-bar .kept-zone{position:absolute;left:calc(10.72% + 4px);right:0;top:0;bottom:0;display:flex;align-items:center;justify-content:center;border-radius:8px;border:1px dashed var(--kept);background:var(--kept-bg);color:var(--kept);font-size:14px;font-weight:500;white-space:nowrap}
.cost-amt{text-align:right;font-size:clamp(24px,2.4vw,30px);font-weight:300;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1}
.cost-amt span{display:block;font-size:13px;letter-spacing:0;color:var(--dim)}

/* the number, as wide as the screen: −89% gutter to gutter (32px, 20px on phones), set the way the foot sets the
   name, with the one line under it. The band is a size container, so cqi is its width (the screen, less any
   scrollbar), and it clips, so nothing in it can scroll the page sideways. The block after it adds no space of its
   own, and in a landscape window the band is the whole screen. Measured in ems of Figtree 300 at -.04em, with
   the minus pulled .08em toward the 8 so the three gaps read even (.06, .05, .058) and raised .052em from the math
   axis onto the middle of the figures: the ink of "−89%" is 2.2 wide and starts .12 in (the minus's bearing). At
   line-height .732 the line box is exactly the ink, top of the % to its foot. vw is the fallback where cqi isn't
   known. Green, because it's money kept. Under it, the label says what the number measures (it breaks only
   between its two halves, .nw), and the note gives the before and after it comes from. */
.pct{container-type:inline-size;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding:clamp(64px,8vw,120px) 0}
.pct+.block{padding-top:0}
.pct-h{font-weight:300}
.pct-num{display:block;font-size:calc((100vw - 64px)/2.2);font-size:calc((100cqi - 64px)/2.2);line-height:.732;letter-spacing:-.04em;text-indent:calc(32px - .12em);white-space:nowrap;color:var(--kept)}
.pct-minus{position:relative;top:-.052em;margin-right:-.08em}
.pct-line{display:block;margin-top:clamp(24px,3vw,44px);padding:0 32px;font-size:clamp(26px,3.6vw,56px);line-height:1.1;letter-spacing:-.025em;text-align:center;text-wrap:balance;color:var(--ink)}
.pct-note{margin:clamp(14px,1.8vw,24px) auto 0;padding:0 32px;max-width:calc(58ch + 64px);font-size:clamp(16px,1.5vw,19px);line-height:1.5;text-align:center;text-wrap:balance;color:var(--ink-2)}
@media (orientation:landscape){
  .pct{min-height:100vh;min-height:100svh}
}

/* the runway calculator: radio presets and :has(), no script. The cash in the bank is 12 months of the chosen
   burn and the card says so; one answer and one How line show per burn-and-bill pair */
.panel{margin-top:clamp(36px,5vw,56px);border-radius:16px;background:linear-gradient(180deg,var(--panel-a),var(--panel-b));display:flex;justify-content:center;padding:clamp(16px,4.4vw,56px);text-align:left}
.calc{flex:0 1 560px;min-width:0;background:var(--card);border-radius:14px;box-shadow:0 1px 2px rgba(30,27,25,.05),0 20px 48px -24px var(--shadow-accent);padding:clamp(18px,2.6vw,32px)}
.calc-q+.calc-q{margin-top:18px}
.calc-q legend{font-size:15px;color:var(--ink-2);margin-bottom:10px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips label{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--hair);background:var(--card);color:var(--ink);font-size:14px;font-variant-numeric:tabular-nums;cursor:pointer}
.chips label:hover{border-color:var(--accent)}
.chips input:checked+label{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.chips input:focus-visible+label{outline:2px solid var(--accent);outline-offset:2px}
.calc-cash{margin:18px 0 0}
.calc-cash dt{font-size:15px;color:var(--ink-2);margin-bottom:6px}
.calc-cash dd{margin:0;display:none;flex-wrap:wrap;align-items:baseline;gap:2px 12px}
.calc-cash dd.is-default{display:flex}
.calc-cash b{font-size:clamp(24px,2.4vw,28px);font-weight:300;line-height:1.15;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.calc-cash span{font-size:14px;color:var(--dim);text-wrap:pretty}
.calc-out{margin-top:22px;padding-top:18px;border-top:1px solid var(--hair-2)}
.calc-r{display:none}
.calc-r.is-default{display:block}
.days{font-size:clamp(52px,6vw,72px);font-weight:300;line-height:1;letter-spacing:-.04em;color:var(--kept);font-variant-numeric:tabular-nums}
.calc-r p+p{margin-top:8px;color:var(--ink-2);font-size:15px}
.kept{color:var(--kept)}
.calc-how{margin-top:18px;padding-top:14px;border-top:1px solid var(--hair-2);font-size:13px;color:var(--dim);text-wrap:pretty}
.calc-h{display:none}
.calc-h.is-default{display:block}
@supports selector(:has(a)){
  .calc .calc-r.is-default,.calc .calc-h.is-default,.calc .calc-cash dd.is-default{display:none}
  .calc:has(#b150:checked) .cash-b150,.calc:has(#b250:checked) .cash-b250,
  .calc:has(#b500:checked) .cash-b500,.calc:has(#b1m:checked) .cash-b1m{display:flex}
  .calc:has(#b150:checked):has(#g5:checked) .r-b150-g5,.calc:has(#b150:checked):has(#g10:checked) .r-b150-g10,
  .calc:has(#b150:checked):has(#g24:checked) .r-b150-g24,.calc:has(#b150:checked):has(#g50:checked) .r-b150-g50,
  .calc:has(#b250:checked):has(#g5:checked) .r-b250-g5,.calc:has(#b250:checked):has(#g10:checked) .r-b250-g10,
  .calc:has(#b250:checked):has(#g24:checked) .r-b250-g24,.calc:has(#b250:checked):has(#g50:checked) .r-b250-g50,
  .calc:has(#b500:checked):has(#g5:checked) .r-b500-g5,.calc:has(#b500:checked):has(#g10:checked) .r-b500-g10,
  .calc:has(#b500:checked):has(#g24:checked) .r-b500-g24,.calc:has(#b500:checked):has(#g50:checked) .r-b500-g50,
  .calc:has(#b1m:checked):has(#g5:checked) .r-b1m-g5,.calc:has(#b1m:checked):has(#g10:checked) .r-b1m-g10,
  .calc:has(#b1m:checked):has(#g24:checked) .r-b1m-g24,.calc:has(#b1m:checked):has(#g50:checked) .r-b1m-g50{display:block}
}

/* the routing order, drawn as the steps of a spillway: one step per channel, GitHub dashed */
.route{margin-top:clamp(36px,5vw,56px);text-align:left}
.route-line{width:100%;height:88px;overflow:visible}
.route-line path{fill:none;stroke:var(--ink);stroke-width:2;vector-effect:non-scaling-stroke}
.route-line .dash{stroke:var(--dim);stroke-dasharray:6 6}
.route-steps{list-style:none;margin-top:20px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.route-steps li{padding-right:20px}
.route .n{font-size:13px;color:var(--dim);font-variant-numeric:tabular-nums}
.route b{display:block;margin-top:8px;font-size:19px;font-weight:400;letter-spacing:-.01em}
.route .p{display:block;margin-top:4px;font-size:15px;color:var(--ink-2)}
.route-note{margin-top:32px;text-align:center;font-size:14px;color:var(--dim)}

/* start, and the promises under it */
.steps{list-style:none;margin-top:clamp(36px,5vw,56px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;text-align:left}
.step{background:var(--card);border:1px solid var(--hair);border-radius:14px;padding:24px}
.step .n{font-size:13px;color:var(--dim)}
.step b{display:block;margin-top:24px;font-size:20px;font-weight:400;letter-spacing:-.01em}
.step span:last-child{display:block;margin-top:6px;font-size:15px;color:var(--ink-2)}
.promises{list-style:none;margin-top:32px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px;text-align:left}
.promises li{padding:14px 0;border-top:1px solid var(--hair);font-size:15px;color:var(--ink-2)}
.promises b{font-weight:500;color:var(--ink)}

/* questions on the front page, and the closing line */
.home .faq{margin-left:auto;margin-right:auto;text-align:left}
.byline{margin:28px auto 0;max-width:56ch;text-align:center;color:var(--dim);font-size:14px}
.closing{padding:clamp(88px,10vw,144px) 0 clamp(72px,8vw,112px);text-align:center}
.closing .h2{max-width:14ch}
.closing .sub{margin-left:auto;margin-right:auto;text-wrap:balance}

/* ===== the about page: one 760px column. The founders' letter, who we are, the rules, questions ===== */
.about .col{max-width:760px;margin:0 auto}
.about-top{padding:clamp(48px,7vw,96px) 0 0}
.about .sub{max-width:54ch;text-wrap:pretty}
.about-photo{margin-top:clamp(36px,5vw,56px)}
.about-photo img{width:100%;border-radius:16px;background:var(--plate)}
.about-photo figcaption{margin-top:12px;font-size:14px;color:var(--dim)}
.story{padding-bottom:clamp(64px,7vw,96px)}
.story h2{font-family:var(--sans);font-weight:300;font-size:clamp(26px,2.8vw,34px);line-height:1.15;letter-spacing:-.02em;text-wrap:balance;margin-top:clamp(48px,6vw,72px)}
.story p{max-width:62ch;margin-top:18px;font-size:18px;line-height:1.65;text-wrap:pretty}
.story a,.about .sub a,.about .note a,.founder a{text-underline-offset:3px}
.story .sign{margin-top:28px;color:var(--ink-2)}
.nw{white-space:nowrap}
/* our own numbers, the way the portal shows them: green only on money kept */
.ledger{margin-top:28px;background:var(--card);border:1px solid var(--hair);border-radius:16px;box-shadow:0 1px 2px rgba(30,27,25,.04),0 24px 56px -32px rgba(30,27,25,.25)}
.ledger dl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0}
.ledger dl>div{padding:18px 20px 20px;border-left:1px solid var(--hair-2)}
.ledger dl>div:first-child{border-left:0}
.ledger dt{font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.ledger dd{margin:12px 0 0;font-size:14px;line-height:1.4;color:var(--ink-2)}
.ledger dd b{display:block;margin-bottom:6px;font-size:clamp(26px,2.8vw,32px);font-weight:300;line-height:1.05;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.ledger .after b{color:var(--accent)}
.ledger .kept b{color:var(--kept)}
.ledger figcaption{padding:12px 20px 14px;border-top:1px solid var(--hair-2);font-size:13px;color:var(--dim)}
/* who we are: one card each, the photo a small circle */
.founders{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:36px}
.founder{display:flex;align-items:flex-start;gap:18px;padding:24px;background:var(--card);border:1px solid var(--hair);border-radius:var(--r-card)}
.founder img{flex:none;width:72px;height:72px;border-radius:50%;background:var(--plate)}
.founder h3{font-size:20px;font-weight:400;line-height:1.25;letter-spacing:-.01em}
.founder .role{margin-top:2px;font-size:14px;color:var(--dim)}
.founder .bio{margin-top:12px;font-size:15px;color:var(--ink-2);text-wrap:pretty}
.founder .founder-links{margin-top:12px;font-size:14px}
.about .promises{margin-top:36px}
.about .note{margin-top:24px;font-size:14px;color:var(--dim)}
.about .closing{border-top:1px solid var(--hair);padding-top:clamp(72px,8vw,112px)}
.about .closing .h2{margin-left:auto;margin-right:auto}
.about .closing .act{justify-content:center}
@media (prefers-color-scheme:dark){
  .about-photo img,.founder img{filter:brightness(.88)}
}

/* phones */
@media (max-width:760px){
  .about-top .h1{font-size:clamp(40px,6.6vw,88px)}
  .story p{font-size:17px}
  .ledger dl{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ledger dl>div:nth-child(3){border-left:0}
  .ledger dl>div:nth-child(n+3){border-top:1px solid var(--hair-2)}
  .founders{grid-template-columns:1fr}
  .founder{padding:20px}
  .wrap{padding:0 20px}
  .hero{padding:64px 0 56px}
  .sec{padding:56px 0}
  .cards{grid-template-columns:1fr}
  .foot-cols{grid-template-columns:1fr}
  .foot .foot-wordmark{font-size:calc((100vw - 40px)/3.256);font-size:calc((100cqi - 40px)/3.256);margin-bottom:calc(20px + .062em);text-indent:calc(20px - .055em)}
  .pct-num{font-size:calc((100vw - 40px)/2.2);font-size:calc((100cqi - 40px)/2.2);text-indent:calc(20px - .12em)}
  .pct-line,.pct-note{padding:0 20px}
  .prose{padding-top:48px}
  .cost-head,.cost-rows{padding-left:16px;padding-right:16px}
  .cost-row{grid-template-columns:minmax(0,1fr) auto;padding:16px 0}
  .cost-bar{grid-column:1 / -1;grid-row:2;height:34px}
  .cost-bar .kept-zone{font-size:13px}
  .route-line{display:none}
  .route-steps{grid-template-columns:1fr;margin-top:0}
  .route-steps li{padding:14px 0;border-top:1px solid var(--hair)}
  .route-steps li:first-child{border-top:2px solid var(--ink)}
  .route-steps li:last-child{border-top:1px dashed var(--dim)}
  .steps,.promises{grid-template-columns:1fr}
  .nav-links li:not(.nav-cta){display:none}
  .lead .btn,.lead .btn-soft{padding:0 18px;font-size:15px}
}

/* the narrowest phones: the email field above its button */
@media (max-width:350px){
  .join{flex-wrap:wrap;border-radius:22px}
  .join input{flex-basis:100%}
  .join .btn{flex:1 1 100%}
}