/* Greenwake site. Ink and Lime (Oct 20, 2026), light since Oct 25 to match the app: a paper page with white cards,
   black header and footer like the app's bar, and Sadie's interactive panels kept dark. Headline accents are an ink
   knockout (the teal-to-lime gradient on a black block, .ko), since vivid greens can't be read as text on white.
   The rules below were written dark-first; the light layer at the end of the file remaps the tokens and the few
   hard-coded colors. Token names are older still: --cream is the page, --paper the cards, --forest the dark blocks. */
@font-face{font-family:"Archivo Black";src:url(/assets/fonts/archivo-black.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Figtree;src:url(/assets/fonts/figtree-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Figtree;src:url(/assets/fonts/figtree-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Figtree;src:url(/assets/fonts/figtree-700.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --cream:#0B0B0C; --paper:#08170F; --forest:#08170F; --deep:#0F2419; --green:#9BF26B; --mint:#9BF26B;
  --ink:#FAFAFA; --muted:#98AE9F; --line:rgba(250,250,250,.12); --on-dark:#FAFAFA; --on-dark-muted:#98AE9F;
  --teal:#2EE59D; --highlight:#E6FF6E; --grad:linear-gradient(90deg,#2EE59D 0%,#9BF26B 55%,#E6FF6E 100%);
  --display:"Archivo Black","Arial Black",system-ui,sans-serif;
  --body:Figtree,system-ui,-apple-system,"Segoe UI",sans-serif;
  --wrap:1360px; color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--cream);color:var(--ink);font:18px/1.55 var(--body);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
[hidden]{display:none!important}
a{color:var(--green)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--mint);outline-offset:2px}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:24px}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.02;letter-spacing:-.01em;margin:0;text-wrap:balance}
p,li,.lead{text-wrap:pretty}  /* no single word left alone on the last line (Matt, Oct 28) */
h1{font-size:clamp(42px,6.4vw,84px)}
h2{font-size:clamp(32px,4.2vw,54px)}
h3{font-size:24px;line-height:1.1}
p{margin:0}
.eyebrow{font:700 13px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
.lead{font-size:clamp(19px,1.8vw,23px);color:var(--muted);max-width:60ch}
.muted{color:var(--muted)}
.stack{display:flex;flex-direction:column;gap:18px}
.btns{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;gap:8px;font:700 17px var(--body);text-decoration:none;padding:14px 22px;border-radius:999px;border:2px solid rgba(250,250,250,.28);color:var(--ink);background:transparent;cursor:pointer}
.btn.primary{background:var(--grad);border-color:transparent;color:#0B0B0C}
.btn.primary:hover{filter:brightness(1.08)}
.btn:not(.primary):hover{background:rgba(250,250,250,.06)}
.dark .btn{border-color:var(--mint);color:var(--mint)}
.dark .btn.primary{background:var(--grad);border-color:transparent;color:#0B0B0C}

/* Header */
.site-head{position:sticky;top:0;z-index:20;background:rgba(11,11,12,.92);backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px}
.logo img{height:30px;width:auto}
.nav{display:flex;align-items:center;gap:26px}
.nav a{color:var(--ink);text-decoration:none;font-weight:600;font-size:16px}
.nav a[aria-current=page]{color:var(--green)}
.nav .btn{padding:10px 18px;font-size:15px}
.menu{display:none;background:none;border:0;padding:8px;cursor:pointer;color:var(--ink);font:700 15px var(--body)}
@media (max-width:820px){
  .menu{display:block}
  .nav{display:none;position:absolute;top:72px;left:0;right:0;flex-direction:column;align-items:flex-start;gap:4px;background:var(--cream);padding:12px 24px 22px;border-bottom:1px solid var(--line)}
  .nav.open{display:flex}
  .nav a{padding:8px 0}
}

/* Sections */
section{padding-block:clamp(64px,9vw,112px)}
.dark{background:var(--forest);color:var(--on-dark)}
.dark .eyebrow{color:var(--mint)}
.dark .lead,.dark .muted{color:var(--on-dark-muted)}
.paper{background:var(--paper)}
.head{display:flex;flex-direction:column;gap:14px;margin-bottom:44px;max-width:780px}

/* Hero */
.hero{padding-block:clamp(56px,8vw,104px) clamp(56px,7vw,88px)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:48px;align-items:center}
.hero-shot{border-radius:20px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.45);max-height:560px;background:var(--paper)}
@media (max-width:900px){.hero .wrap{grid-template-columns:minmax(0,1fr)}.hero-shot{max-height:420px}}

/* Stat strip */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 28px}
.stat{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:10px}  /* headlines bottom-aligned, so the text below starts on one line (Matt, Oct 23) */
.stat b{align-self:end}
.stat b{display:block;font:400 clamp(30px,3.4vw,44px)/1.05 var(--display);color:var(--mint)}
.stat b.big{font-size:clamp(44px,5.4vw,64px)}
.stat span{display:block;color:var(--on-dark-muted);max-width:32ch}
@media (max-width:760px){.stats{grid-template-columns:minmax(0,1fr);row-gap:28px}.stat{grid-row:auto;grid-template-rows:auto auto}}
.src{font-size:13px;color:var(--on-dark-muted);margin-top:26px}
.src a{color:var(--on-dark-muted)}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;counter-reset:s}
.step{background:var(--paper);border-radius:20px;padding:28px;display:flex;flex-direction:column;gap:10px}
.step .when{font:700 13px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--green)}
@media (max-width:900px){.steps{grid-template-columns:minmax(0,1fr)}}

/* Areas */
.areas{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.area{background:var(--cream);border-radius:18px;padding:22px;display:flex;flex-direction:column;gap:10px}
.area{position:relative;overflow:hidden;transition:transform .2s,border-color .2s}
.area::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--grad)}
.area:hover{transform:translateY(-3px);border-color:rgba(155,242,107,.45)}
.area-art{height:118px;margin:-4px -6px 4px;display:grid;place-items:center;background:radial-gradient(circle at 50% 55%,rgba(155,242,107,.16),transparent 68%)}
.area-art img{max-height:108px;max-width:100%;width:auto;filter:drop-shadow(0 0 14px rgba(155,242,107,.25))}
.area-role{font:700 11px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--teal)}
.area h3{margin:0}
@media (prefers-reduced-motion:reduce){.area{transition:none}.area:hover{transform:none}}
.area p{font-size:16px;color:var(--muted)}
@media (max-width:1000px){.areas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.areas{grid-template-columns:minmax(0,1fr)}}

/* Sadie split */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.split .shot{border-radius:18px;overflow:hidden;max-height:620px;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.ticks{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.ticks li{padding-left:30px;position:relative}
.ticks li:before{content:"";position:absolute;left:0;top:9px;width:14px;height:14px;border-radius:50%;background:var(--green)}
.dark .ticks li:before{background:var(--mint)}
.sadie-id{display:flex;align-items:center;gap:14px}
.sadie-id img{width:56px;height:56px;border-radius:50%}
.tabs{display:flex;gap:8px;flex-wrap:wrap}
.tab{font:700 14px var(--body);padding:8px 14px;border-radius:999px;border:1.5px solid var(--mint);background:transparent;color:var(--mint);cursor:pointer}
.tab[aria-selected=true]{background:var(--mint);color:#0B0B0C}
@media (max-width:900px){.split{grid-template-columns:minmax(0,1fr)}}

/* Who table */
.who{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.who div{background:var(--paper);border-radius:18px;padding:22px 24px}
.who b{display:block;font:700 13px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--green);margin-bottom:6px}
@media (max-width:760px){.who{grid-template-columns:minmax(0,1fr)}}

/* CTA band */
.cta{background:var(--deep);color:var(--on-dark);border-radius:24px;padding:clamp(32px,5vw,56px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center}
.cta .lead{color:var(--on-dark-muted)}
@media (max-width:760px){.cta{grid-template-columns:minmax(0,1fr)}}

/* Pricing */
.plans{display:grid;grid-template-columns:1fr 1.06fr 1fr;gap:20px;align-items:stretch}
.plan{background:var(--paper);border-radius:22px;padding:30px;display:flex;flex-direction:column;gap:6px;position:relative}
.plan.hot{background:var(--deep);color:var(--on-dark);box-shadow:0 0 0 1.5px var(--mint),0 0 40px -12px rgba(155,242,107,.45)}
.plan .flag{position:absolute;top:-14px;left:30px;background:var(--grad);color:#0B0B0C;font:700 12px var(--body);letter-spacing:.1em;text-transform:uppercase;padding:6px 12px;border-radius:999px}
.plan .verb{font:400 40px/1.05 var(--display)}
.plan .tag{color:var(--muted)} .plan.hot .tag{color:var(--on-dark-muted)}
.plan .eyebrow{color:var(--green)} .plan.hot .eyebrow{color:var(--mint)}
.plan ul{margin:18px 0 0;flex:1}
.plan.hot .ticks li:before{background:var(--mint)}
.plan .price{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);display:flex;align-items:baseline;gap:8px}
.plan.hot .price{border-top-color:rgba(250,250,250,.14)}
.plan .price b{font:400 44px/1 var(--display)}
.plan .up{font-size:15px;margin-top:6px}
.plan .up span{display:block;color:var(--green);font-weight:600}
.plan.hot .up span{color:var(--mint)}
.soon{font:700 11px var(--body);letter-spacing:.08em;text-transform:uppercase;padding:2px 8px;border-radius:999px;border:1px solid currentColor;margin-left:6px;opacity:.75;white-space:nowrap}
.terms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:28px}
.terms div{background:var(--paper);border-radius:16px;padding:20px 22px;font-size:16px}
@media (max-width:960px){.plans,.terms{grid-template-columns:minmax(0,1fr)}}

/* Forms */
form.lead-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
form.lead-form .full{grid-column:1/-1}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-weight:600;font-size:15px}
input[type=text],input[type=email],input[type=number],select,textarea{width:100%;font:500 16px var(--body);color:var(--ink);background:var(--cream);border:1px solid rgba(250,250,250,.18);border-radius:12px;padding:11px 12px;font-variant-numeric:tabular-nums}
textarea{min-height:110px;resize:vertical}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--muted)}
.check input{margin-top:4px}
.form-msg{font-weight:600}
.booking{display:grid;gap:12px;min-width:0}
.booking iframe{width:100%;height:720px;border:0;border-radius:14px;background:#fff}
.booking-msg{font-weight:600;margin:0}
.booking-alt{margin:0;font-size:14px}
@media (max-width:600px){.booking iframe{height:900px}}
.hp{position:absolute;left:-5000px}
@media (max-width:600px){form.lead-form{grid-template-columns:minmax(0,1fr)}}

/* Prose pages */
.prose{max-width:var(--wrap)} .prose>*{max-width:760px}  /* lines up with the nav's left edge; text keeps a readable width */
/* About (Matt, Oct 28): headings in a left column, text beside them, the page as wide as the nav */
@media (min-width:901px){
  .prose.editorial{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);column-gap:64px;align-items:start}
  .prose.editorial>*{grid-column:2;max-width:760px}
  .prose.editorial>:is(.eyebrow,h1,.lead){grid-column:1/-1;max-width:none}
  .prose.editorial>.lead{max-width:1000px;margin-bottom:24px}
  .prose.editorial>h2{grid-column:1;margin:42px 0 0}
  .prose.editorial>h2+*{margin-top:46px}
}
.prose h2{font-size:32px;margin:42px 0 12px}
.prose p,.prose li{margin:0 0 14px}

/* Footer */
.site-foot{background:var(--cream);border-top:1px solid var(--line);color:var(--on-dark-muted);padding-block:56px 40px;font-size:15px}
.site-foot .wrap{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));gap:32px}
.site-foot img{height:28px;width:auto;margin-bottom:14px}
.site-foot a{color:var(--on-dark);text-decoration:none;display:block;padding:3px 0}
.site-foot .fine{grid-column:1/-1;border-top:1px solid rgba(250,250,250,.12);padding-top:20px;font-size:13px}
@media (max-width:760px){.site-foot .wrap{grid-template-columns:minmax(0,1fr)}}

/* RORO calculator */
.calc{display:grid;grid-template-columns:300px minmax(0,1fr);gap:22px;align-items:start}
@media (max-width:900px){.calc{grid-template-columns:minmax(0,1fr)}}
.rail{background:var(--paper);border-radius:18px;padding:20px;display:flex;flex-direction:column;gap:14px}
.rail .field label{font-size:14px}
.rail small{font-size:12.5px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.trio{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
input[type=range]{width:100%;accent-color:var(--green)}
.calc .main{display:flex;flex-direction:column;gap:18px;min-width:0}
.pcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:640px){.pcards{grid-template-columns:minmax(0,1fr)}}
.pcard{all:unset;cursor:pointer;background:var(--paper);border-radius:18px;padding:18px 20px;display:flex;flex-direction:column;gap:6px;border:2px solid transparent}
.pcard:focus-visible{outline:3px solid var(--mint)}
.pcard[aria-pressed=true]{border-color:var(--green)}
.pcard.hot{background:var(--deep);color:var(--on-dark)}
.pcard.hot .muted{color:var(--on-dark-muted)} .pcard.hot .eyebrow{color:var(--mint)}
.pcard.hot[aria-pressed=true]{border-color:var(--mint)}
.pverb{font:400 22px var(--display)}
.pnet{font:400 40px/1 var(--display);margin-top:6px}
.pcard.hot .pnet{color:var(--mint)}
.pcard .muted{font-size:14px}
.kv{display:flex;justify-content:space-between;gap:10px;font-size:14px;font-variant-numeric:tabular-nums;border-top:1px solid var(--line);padding-top:6px}
.pcard.hot .kv{border-top-color:rgba(250,250,250,.14)}
.detail{background:var(--paper);border-radius:18px;padding:20px;display:grid;grid-template-columns:1fr 1fr;gap:24px}
.detail h3{font-size:20px;margin-bottom:8px}
@media (max-width:700px){.detail{grid-template-columns:minmax(0,1fr)}}
.calc table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:15px}
.calc th,.calc td{text-align:right;padding:7px 6px;border-bottom:1px solid var(--line)}
.calc th:first-child,.calc td:first-child{text-align:left}
.calc th{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700}
.calc tfoot td{font-weight:700;border-bottom:none}
.asm{background:var(--paper);border-radius:18px;padding:16px 20px}
.asm summary{cursor:pointer;font-weight:700}
.scroll{overflow-x:auto;margin-top:12px}
.scroll input{width:84px;padding:5px 7px;font-size:14px;text-align:right}
.note{font-size:13px;margin-top:12px;max-width:90ch}
.kv.up b{color:var(--green)}
.pcard.hot .kv.up b{color:var(--mint)}

/* Hero: the sample audit scrolling slowly (pauses on hover; still for reduced motion) */
.audit-scroll{position:relative;height:660px;max-height:none}
.audit-scroll img{width:100%;height:auto;animation:auditscroll 190s linear infinite;will-change:transform}
.audit-scroll:hover img{animation-play-state:paused}
@keyframes auditscroll{0%{transform:translateY(0)}96%,100%{transform:translateY(calc(-100% + 660px))}}
.scroll-tag{position:absolute;left:14px;bottom:14px;background:var(--forest);color:var(--mint);font:700 12px var(--body);letter-spacing:.1em;text-transform:uppercase;padding:7px 12px;border-radius:999px}
@media (max-width:900px){.audit-scroll{height:420px}@keyframes auditscroll{0%{transform:translateY(0)}96%,100%{transform:translateY(calc(-100% + 420px))}}}
@media (prefers-reduced-motion:reduce){.audit-scroll img{animation:none}}
.step{position:relative}
.step-sadie{position:absolute;top:22px;right:22px;width:44px;height:44px;border-radius:50%}
.founder{display:flex;align-items:center;gap:18px;margin:6px 0 20px}
.founder img{width:112px;height:112px;border-radius:50%;object-fit:cover}
.founder b{display:block;font:400 24px var(--display)}
.founder span{color:var(--muted)}
.works{margin-top:22px;color:var(--muted);font-size:16px}
.works b{color:var(--ink)}
/* Works with your CRM tile (names only; add logos once the attorney or partner programs allow) */
.crm{margin-top:20px;background:var(--paper);border-radius:18px;padding:18px 22px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.crm .lbl{font:700 13px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--green);margin-right:6px}
.crm .pill{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:1.5px solid var(--line);border-radius:999px;background:transparent;font:700 16px var(--body);color:var(--ink)}
.crm .pill svg{width:16px;height:16px;color:var(--green)}
.crm .note{color:var(--muted);font-size:15px;margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
@media (max-width:760px){.crm .note{margin-left:0}}
.step.has-sadie h3,.step.has-sadie .when{padding-right:56px}

/* Header on ink (gradient logo) */
.site-head{background:rgba(11,11,12,.92);border-bottom-color:rgba(250,250,250,.10)}
.nav a{color:var(--on-dark)}
.nav a:hover{color:var(--mint)}
.nav a[aria-current=page]{color:var(--mint)}
.nav .btn.primary{background:var(--grad);border-color:transparent;color:#0B0B0C}
.nav .btn.primary:hover{filter:brightness(1.08)}
.menu{color:var(--on-dark)}
@media (max-width:820px){.nav{background:var(--cream);border-bottom-color:rgba(250,250,250,.10)}}

/* Holding page (until launch) */
.hold{min-height:100vh;display:flex;align-items:center;padding-block:56px}
.hold-in{display:flex;flex-direction:column;gap:22px}
.hold-in>h1,.hold-in>.lead,.hold-form{max-width:760px}
.hold-areas{margin-top:12px}
.hold-areas .areas{margin-top:14px}
.hold .area h3{color:var(--ink);margin:0}
.hold h1{font:400 clamp(44px,7vw,84px)/1 var(--display);margin:12px 0 0;color:var(--ink);text-transform:uppercase}
.hold h1 span,.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.tagline{font:700 clamp(18px,2vw,22px) var(--body);letter-spacing:.01em}
.hold .lead{max-width:44ch}
.hold-form{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:26px;margin-top:8px}
.hold-form .lead-form{margin-top:12px}
.hold .fine{opacity:.75;font-size:14px}
.hold .fine a{color:inherit}
.hold .check span,.hold .form-msg{color:var(--on-dark)}
.hold .check a{color:var(--mint)}

/* Ink and Lime: dark sections are the page itself; give the light-era .dark/.paper bands a subtle edge so sections still separate */
.dark,.paper{border-block:1px solid rgba(250,250,250,.06)}
.area{border:1px solid var(--line)}
.hero h1{text-transform:uppercase}

/* Revenue ecosystem (home page): Sadie at the root, the org in rings, a panel for each role */
#ecosystem{--eco-ink:#0B0B0C;--eco-forest:#08170F;--eco-raised:#0F2419;--eco-line:#15301F;--eco-line-2:#24452F;--eco-text:#FAFAFA;--eco-muted:#98AE9F;--eco-lime:#9BF26B;--eco-teal:#2EE59D;--eco-high:#E6FF6E;--eco-amber:#F2B45A}
.eco-modes{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:20px}
.eco-modes .lbl{font:700 11px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-right:4px}
.eco-mode{font:700 14px var(--body);padding:8px 14px;border-radius:999px;border:1.5px solid var(--eco-line-2);background:transparent;color:var(--eco-text);cursor:pointer;display:inline-flex;gap:8px;align-items:center}
.eco-mode i{width:9px;height:9px;border-radius:50%;background:var(--c)}
.eco-mode[aria-pressed=true]{border-color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent)}
.eco-stage{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:24px;align-items:stretch}
@media (max-width:900px){.eco-stage{grid-template-columns:minmax(0,1fr)}}
@media (min-width:901px){.eco-stage{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}.eco-viz{order:2}}  /* mirrors the Growth System: panel left, Sadie right */
.eco-viz{background:var(--eco-forest);border:1px solid var(--eco-line);border-radius:24px;padding:12px;min-width:0;display:flex;align-items:center;justify-content:center}
.eco-viz svg{flex:1}
.eco-viz svg{display:block;width:100%;height:auto}
.eco-node{cursor:pointer}
.eco-node:focus-visible{outline:3px solid var(--eco-lime);outline-offset:3px}
.eco-node .eco-dot{transition:r .2s ease}
.eco-node:hover .eco-dot{r:var(--rh)}
.eco-panel{background:var(--eco-forest);border:1px solid var(--eco-line);border-radius:24px;padding:26px;display:flex;flex-direction:column;gap:16px;min-width:0}
.eco-panel .eco-layer{font:700 11px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.eco-panel h3{font:400 30px/1.05 var(--display);margin:4px 0 0}
.eco-panel .eco-sum{color:var(--muted);margin:6px 0 0}
.eco-beat{display:grid;grid-template-columns:84px minmax(0,1fr);gap:12px;border-top:1px solid var(--eco-line);padding-top:12px;font-size:16px}
.eco-beat b{font:700 11px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--c);padding-top:4px}
.eco-hours{display:flex;align-items:baseline;gap:10px;background:var(--eco-raised);border-radius:14px;padding:14px 16px}
.eco-hours strong{font:400 34px/1 var(--display);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.eco-hours span{color:var(--muted);font-size:14px}
.eco-chips{display:flex;flex-wrap:wrap;gap:8px}
.eco-chip{font:600 13px var(--body);padding:6px 11px;border-radius:999px;border:1px solid var(--eco-line-2);background:transparent;color:var(--eco-text);cursor:pointer}
.eco-chip[aria-current=true]{background:var(--eco-lime);border-color:var(--eco-lime);color:var(--eco-ink)}
.eco-mode:focus-visible,.eco-chip:focus-visible{outline:3px solid var(--eco-lime);outline-offset:2px}
.eco-fine{font-size:13px;color:var(--muted)}
.eco-legend{display:flex;flex-wrap:wrap;gap:16px;font-size:13px;color:var(--muted);margin-top:18px}
.eco-legend span{display:inline-flex;align-items:center;gap:7px}
.eco-legend i{width:14px;height:3px;border-radius:2px;background:var(--c)}
@media (prefers-reduced-motion:reduce){.eco-pulse{display:none}}
.hold-eco{margin-top:28px;padding-top:36px;border-top:1px solid var(--line)}
.hold-eco .head{margin-bottom:24px}
.hold-eco h2{font-size:clamp(28px,3.6vw,44px)}
.hold .hold-eco .lead{max-width:62ch}
/* Sign-up and contact fields: white, with a soft teal-to-lime glow spilling outside each box */
form.lead-form :is(input[type=text],input[type=email],select,textarea){color:#0B0B0C;background:#F6F7F4;border:1px solid rgba(255,255,255,.75);border-radius:14px;
  box-shadow:-8px 0 17px -6px rgba(46,229,157,.8),8px 0 17px -6px rgba(230,255,110,.7),0 0 12px -4px rgba(155,242,107,.6);transition:box-shadow .25s ease}
form.lead-form :is(input,select,textarea)::placeholder{color:#5E6661}
form.lead-form :is(input[type=text],input[type=email],select,textarea):focus{outline:none;box-shadow:-10px 0 22px -5px rgba(46,229,157,.95),10px 0 22px -5px rgba(230,255,110,.85),0 0 16px -3px rgba(155,242,107,.75)}
form.lead-form select{color-scheme:light}
form.lead-form{row-gap:20px;column-gap:22px}
/* Holding headline: GROWTH sized so it spans the same width as THE CEILING. (1.52x in Archivo Black) */
.hold h1.hold-h1{font-size:min(clamp(44px,7vw,84px),calc((100vw - 48px) / 7.7));line-height:.98}
.hold h1.hold-h1 .g{display:block;font-size:1.52em;line-height:.86;letter-spacing:-.012em}
.hold h1.hold-h1 i{display:block;font-style:normal;white-space:nowrap}
/* Holding hero art: the etched growth sprout as a dark watermark, bleeding off the right edge */
.hold{position:relative;overflow:hidden;align-items:flex-start}
.hold-in{position:relative;z-index:1}
.hold-art{position:absolute;z-index:0;top:56px;right:-40px;width:min(46vw,640px);height:auto;opacity:.09;filter:saturate(.35) brightness(.9);pointer-events:none;user-select:none}
@media (max-width:760px){.hold-art{top:60px;right:-120px;width:110vw;opacity:.06}}
/* The Greenwake Growth System (home and holding): the loop in orbit, with a detail panel; stacks on phones */
#growth-system{--gs-ink:#0B0B0C;--gs-forest:#08170F;--gs-raised:#0F2419;--gs-line:#15301F;--gs-line-2:#24452F;--gs-text:#FAFAFA;--gs-muted:#98AE9F;--gs-lime:#9BF26B;--gs-teal:#2EE59D;--gs-high:#E6FF6E;--gs-red:#E06464;
  --ink:#0B0B0C;--line-2:#24452F;--raised:#0F2419;--text:#FAFAFA;--lime:#9BF26B;--teal:#2EE59D;--high:#E6FF6E;--red:#E06464}
#growth-system .head{margin-bottom:24px}
#growth-system .lead b{color:var(--gs-text);font-weight:600}
.gs-stage{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px;align-items:stretch}
@media (max-width:900px){.gs-stage{grid-template-columns:minmax(0,1fr)}}
.gs-viz{background:var(--gs-forest);border:1px solid var(--gs-line);border-radius:24px;padding:10px;min-width:0;display:flex;align-items:center}
.gs-viz svg{display:block;width:100%;height:auto}
.gs-hit{cursor:pointer}
.gs-hit:focus-visible{outline:none}
.gs-hit:focus-visible .gs-ring-shape,.gs-hit:focus-visible .gs-node-shape{stroke:var(--gs-high);stroke-width:3}
.gs-panel{container-type:inline-size;background:var(--gs-forest);border:1px solid var(--gs-line);border-radius:24px;padding:26px;display:flex;flex-direction:column;gap:14px;min-width:0;font-size:16px}
.gs-k{font:700 11px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--gs-muted)}
.gs-panel h3{font:400 30px/1.05 var(--display);margin:4px 0 0;color:var(--gs-text)}
.gs-role{color:var(--gs-lime);font-weight:600;margin:4px 0 0}
.gs-sum{color:var(--gs-muted);margin:0}
.gs-beat{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;border-top:1px solid var(--gs-line);padding-top:12px}
.gs-beat b{font:700 11px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--c);padding-top:4px}
.gs-beat p{margin:0}
.gs-chips{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
@container (max-width:420px){.gs-chips{display:flex;flex-wrap:wrap}}
.gs-chips .lbl{grid-column:1/-1;font:700 11px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--gs-muted);width:100%}
.gs-chip{font:600 13px var(--body);white-space:nowrap;text-align:center;padding:6px 4px;font-size:12.5px;border-radius:999px;border:1px solid var(--gs-line-2);background:transparent;color:var(--gs-text);cursor:pointer}
.gs-chip[aria-current=true]{background:var(--gs-lime);border-color:var(--gs-lime);color:var(--gs-ink)}
.gs-chip:focus-visible{outline:3px solid var(--gs-lime);outline-offset:2px}
.gs-controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:13px;color:var(--gs-muted)}
@media (prefers-reduced-motion:reduce){.gs-pulse{display:none}}

/* Ask Sadie (home page, first section at launch): the same client as the app (assets/js/ask.js, copied from
   tenancy/static), styled here for the site. ACME answers stream in under the box, newest first. */
.ask-hero{padding-block:clamp(40px,6vw,80px) clamp(48px,6vw,80px)}
.ask-hero .wrap{max-width:860px;display:flex;flex-direction:column;gap:20px}
.ask-head{display:flex;align-items:center;gap:20px}
.ask-sadie{width:72px;height:72px;border-radius:50%;border:2px solid var(--mint);background:var(--forest);flex:none}
.ask-hero h1{text-transform:uppercase;font-size:clamp(36px,5.4vw,68px)}
@media (max-width:560px){.ask-head{flex-direction:column;align-items:flex-start;gap:14px}.ask-sadie{width:56px;height:56px}}
.fetch{display:flex;gap:10px;align-items:stretch;background:#F6F7F4;border-radius:18px;padding:8px;margin-top:6px;
  box-shadow:-8px 0 17px -6px rgba(46,229,157,.8),8px 0 17px -6px rgba(230,255,110,.7),0 0 12px -4px rgba(155,242,107,.6)}
.fetch textarea{flex:1;min-width:0;resize:none;border:0;background:transparent;color:#0B0B0C;font:500 18px/1.4 var(--body);padding:10px 12px;outline:none;overflow:hidden;align-self:center;min-height:0;height:auto;max-height:160px}
.fetch textarea::placeholder{color:#5D6B62}
.fetch button{border:0;border-radius:12px;background:#0B0B0C;color:var(--mint);font:700 17px var(--body);padding:12px 24px;align-self:stretch;cursor:pointer;letter-spacing:.02em}
.fetch button:disabled{opacity:.5;cursor:wait}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font:600 15px var(--body);padding:8px 14px;border-radius:999px;border:1px solid rgba(250,250,250,.2);background:transparent;color:var(--ink);cursor:pointer;text-align:left}
.chip:hover{border-color:var(--mint)}
.chip:focus-visible{outline:3px solid var(--mint);outline-offset:2px}
.human:empty{display:none}
.thread{display:flex;flex-direction:column;gap:18px}
.thread:empty{display:none}
.turn{display:flex;flex-direction:column;gap:10px}
.turn .q{align-self:flex-end;max-width:85%;background:var(--deep);border:1px solid #24452F;border-radius:16px 16px 4px 16px;padding:10px 14px;font-size:17px}
.turn .a{background:var(--forest);border:1px solid #15301F;border-radius:16px;padding:18px 20px;min-width:0;overflow-wrap:anywhere;font-size:17px}
.turn .a p{margin:0 0 10px}.turn .a p:last-child{margin:0}
.turn .a ul,.turn .a ol{margin:0 0 10px;padding-left:22px}.turn .a li{margin:3px 0}
.turn .a strong{color:var(--highlight)}
.turn .a .tbl{overflow-x:auto;margin:6px 0 12px}
.turn .a table{border-collapse:collapse;font-size:15px;font-variant-numeric:tabular-nums;overflow-wrap:normal}
.turn .a th,.turn .a td{text-align:left;padding:6px 12px 6px 0;border-bottom:1px solid color-mix(in srgb,currentColor 15%,transparent);white-space:nowrap;vertical-align:top}
.turn .a th{font-weight:700}
.turn .a .who{display:flex;align-items:center;gap:8px;font:700 12px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--mint);margin-bottom:8px}
.turn .a .who img{width:22px;height:22px;border-radius:50%}
.turn .used{margin-top:10px;font-size:14px;color:var(--muted)}
.turn .err{color:#FFB4A2}
.turn .status{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:16px;margin:0}
.dots{display:inline-flex;gap:5px}.dots i{width:7px;height:7px;border-radius:50%;background:var(--teal);animation:ask-b 1s infinite}
.dots i:nth-child(2){animation-delay:.15s;background:var(--mint)}.dots i:nth-child(3){animation-delay:.3s;background:var(--highlight)}
@keyframes ask-b{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.dots i{animation:none;opacity:.8}}
.ask-note{font-size:14px;color:var(--muted)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Where Sadie works (touchpoints; website/touchpoints.py) */
.tp-stage{overflow-x:auto;border:1px solid var(--line);border-radius:22px;background:radial-gradient(circle at 50% 50%,#0F2419 0,#0B0B0C 70%)}
.tp-svg{display:block;width:100%;min-width:720px;height:auto}
.tp-svg .side{font:700 15px var(--body);letter-spacing:.18em;fill:var(--muted)}
.tp-svg .grp{font:700 11px var(--body);letter-spacing:.14em;fill:var(--teal)}
.tp-svg .lbl{font:600 15px var(--body);fill:var(--ink)}
.tp-svg .core{font:400 26px var(--display);fill:var(--ink);letter-spacing:.04em}
.tp-svg .coresub{font:600 13px var(--body);fill:var(--muted)}
.tp-svg .orbit{fill:none;stroke:#24452F;stroke-width:1.2;stroke-dasharray:3 7}
.tp-svg .o2{stroke:#1D3A27}
.tp-svg .disc{fill:#FFFFFF;stroke:var(--green);stroke-width:2.5}
.tp-svg .link{fill:none;stroke-width:2;stroke-linecap:round;stroke-dasharray:6 10;animation:tp-flow 1.6s linear infinite}
.tp-svg .link.L{stroke:#2EE59D}.tp-svg .link.R{stroke:#9BF26B}
@keyframes tp-flow{to{stroke-dashoffset:-32}}
@media (prefers-reduced-motion:reduce){.tp-svg .link{animation:none}.tp-svg .pulse{display:none}}
.tp-svg .pulse{fill:#E6FF6E;filter:drop-shadow(0 0 4px rgba(230,255,110,.8))}
.tp-legend{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:18px;font:500 15px var(--body);color:var(--muted)}
.tp-legend span{display:flex;align-items:center;gap:8px}
.tp-legend i{width:28px;height:0;border-top:2px dashed #2EE59D}
.tp-legend .two i{border-color:#9BF26B} .tp-legend b{width:9px;height:9px;border-radius:50%;background:#E6FF6E;margin-left:-6px;box-shadow:0 0 6px rgba(230,255,110,.8)}
#growth-system .head{max-width:none}#growth-system .head h2{max-width:780px}
.gs-why{color:var(--muted);font-size:17px;line-height:1.6;margin:0}  /* runs the full width, flush with the panel below (Matt, Oct 23) */
.ask-intro{display:flex;gap:14px;align-items:center;margin-top:10px}
.ask-intro .ask-sadie{width:52px;height:52px}
.ask-intro p{margin:0;color:var(--muted);font-size:17px;line-height:1.5}
.ask-intro b{color:var(--ink)}
#where .head{max-width:none}#where .head .lead{max-width:none}  /* intro runs flush with the visual below (Matt, Oct 23) */
.checklist{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-direction:column;gap:10px;flex:1}
.checklist li{position:relative;padding-left:32px;font-size:16px;line-height:1.4}
.checklist li::before{content:"";position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:50%}
.checklist li.yes::before{background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0B0C' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/13px no-repeat}
.checklist li.no{color:rgba(250,250,250,.32)}
.checklist li.no::before{border:1.5px solid rgba(250,250,250,.18);width:17px;height:17px;top:2px;left:1px}
.checklist li.no .soon{opacity:.5}
.plans{grid-template-columns:repeat(3,minmax(0,1fr))}
/* Section intros run the full width of the content, flush with what's below them (Matt, Oct 24: every section).
   Headings keep a readable measure; the holding page and the hero keep their own widths. */
main:not(.hold) section:not(.hero) .head{max-width:none}
main:not(.hold) section:not(.hero) .head .lead{max-width:none}
main:not(.hold) section:not(.hero) .head h2{max-width:780px}

/* ---- Light (Oct 25, 2026): the app's paper look. Dark islands get the dark tokens back. ---- */
:root{
  --cream:#F3F5F0; --paper:#FFFFFF; --forest:#0B0B0C; --deep:#0F1E16; --green:#0A7A56; --mint:#0A7A56;
  --ink:#0B0B0C; --muted:#5A625D; --line:#DCE3DB; --teal:#0C9A6C; --highlight:#0A7A56; color-scheme:light;
}
.cta,.plan.hot,.pcard.hot,.site-head,.site-foot,.gs-viz,.gs-panel,.eco-viz,.eco-panel{
  --ink:#FAFAFA; --muted:#98AE9F; --line:rgba(250,250,250,.12); --green:#9BF26B; --mint:#9BF26B; --teal:#2EE59D;
  --paper:#0F2419; --cream:#0B0B0C; --highlight:#E6FF6E; color-scheme:dark}
.gs-panel,.eco-panel,.gs-viz,.eco-viz,.eco-panel h3,.gs-panel h3{color:#FAFAFA}
.site-head{background:rgba(11,11,12,.96)} .site-foot{background:#0B0B0C}
@media (max-width:820px){.nav{background:#0B0B0C}}

/* headline accents: the ink knockout */
.ko{background:#0B0B0C;padding:0 .14em;border-radius:.045em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.ko i{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hold h1 span.ko{background:#0B0B0C;-webkit-background-clip:border-box;background-clip:border-box}
.hold h1.hold-h1 .g.ko{display:inline-block;padding:0 .1em;margin:.02em 0 .06em}

/* buttons, bands and cards */
.btn{border-color:rgba(11,11,12,.22)} .btn:not(.primary):hover{background:rgba(11,11,12,.05)}
.cta .btn{border-color:var(--mint)}
.dark{background:#FFFFFF;color:var(--ink);border-block:1px solid #DCE3DB}
.dark .eyebrow{color:var(--green)} .dark .lead,.dark .muted{color:var(--muted)}
.dark .btn{border-color:rgba(11,11,12,.22);color:var(--ink)}
.paper{background:#FFFFFF;border-block:1px solid #DCE3DB}
.stat span,.src,.src a{color:var(--muted)}
.step,.who div,.plan,.terms div,.rail,.pcard,.detail,.asm,.crm,.hold-form{border:1px solid var(--line)}
.area,.dark .area{background:#FFFFFF}
.area-art{background:radial-gradient(circle at 50% 55%,#E6F6DC,transparent 68%)}
.area-art img{filter:brightness(.42) saturate(1.3)}  /* the area etchings are lime: deep green on white */
.hero-shot,.split .shot{box-shadow:0 18px 44px rgba(8,23,15,.18)}
.scroll-tag{background:#0B0B0C;color:#9BF26B}
.checklist li.yes::before{background-color:#9BF26B}
.checklist li.no{color:rgba(11,11,12,.35)} .checklist li.no::before{border-color:rgba(11,11,12,.2)}
.plan.hot .checklist li.no{color:rgba(250,250,250,.32)} .plan.hot .checklist li.no::before{border-color:rgba(250,250,250,.18)}

/* forms and Ask Sadie */
input[type=text],input[type=email],input[type=number],select,textarea{background:#FFFFFF;border-color:#C8D2C9}
form.lead-form :is(input[type=text],input[type=email],select,textarea){background:#FFFFFF;border-color:#DCE3DB}
.hold .check span,.hold .form-msg{color:var(--ink)} .hold .check a{color:var(--green)}
.fetch{background:#FFFFFF;border:1px solid #DCE3DB}
.chip{border-color:#C8D2C9;background:#FFFFFF}
.ask-sadie{background:#E6F6DC;border-color:#0A7A56}
.turn .q{background:#E6F6DC;border-color:#CFEABD;color:#0B0B0C}
.turn .a{background:#FFFFFF;border-color:#DCE3DB}
.turn .a strong{color:#0B0B0C} .turn .a .who{color:#0A7A56} .turn .err{color:#9A2B21}

/* where Sadie works; the Growth System and ecosystem sections (light section, dark panels) */
#growth-system .lead b{color:var(--ink)}
.eco-mode{color:var(--ink);border-color:#C8D2C9;background:#FFFFFF}
.eco-mode[aria-pressed=true]{background:color-mix(in srgb,var(--c) 18%,#FFFFFF)}
.gs-viz,.eco-viz,.gs-panel,.eco-panel{box-shadow:0 18px 44px rgba(8,23,15,.16)}

/* holding page on light: the black bar on top; the ceiling tree drawn deep green so it reads on paper */
body.holding{border:0}
.hold{min-height:calc(100vh - 72px);padding-block:44px 56px}

/* holding hero: the headline beside a dark Ask Sadie panel (like her side panel in the app) */
.hold-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:start}
@media (max-width:960px){.hold-hero{grid-template-columns:minmax(0,1fr);gap:32px}}
.hold-copy{display:flex;flex-direction:column;gap:22px;min-width:0}
.sadie-panel{--ink:#FAFAFA;--muted:#9DB5A4;--line:rgba(250,250,250,.12);--mint:#9BF26B;--green:#9BF26B;color-scheme:dark;
  background:linear-gradient(180deg,#0F1E16 0%,#0B0B0C 100%);color:#EEF1EC;border-radius:24px;padding:24px;display:flex;flex-direction:column;gap:14px;
  min-width:0;box-shadow:0 24px 60px rgba(8,23,15,.28);margin-top:6px}
.sp-id{display:flex;gap:12px;align-items:center}
.sp-id img{width:52px;height:52px;border-radius:50%;border:2px solid #9BF26B;flex:none}
.sp-id b{display:block;font-size:18px} .sp-id span{display:block;font-size:13.5px;color:#9DB5A4}
.sadie-panel .fetch{margin:0;background:linear-gradient(#101A14,#101A14) padding-box,linear-gradient(120deg,#2E5A40 0%,#2EE59D 60%,#9BF26B 100%) border-box;
  border:2px solid transparent;box-shadow:0 0 26px rgba(46,229,157,.22)}
.sadie-panel .fetch textarea{color:#F4F6F2;font-size:16px} .sadie-panel .fetch textarea::placeholder{color:#8FA596}
.sadie-panel .fetch button{background:#9BF26B;color:#0B0B0C}
.sadie-panel .chips{gap:6px}
.sadie-panel .chip{font-size:14px;background:#18241D;border-color:#2C3B31;color:#DDE5DF}
.sadie-panel .chip:hover{border-color:#9BF26B}
.sadie-panel .thread{max-height:380px;overflow-y:auto}
.sadie-panel .turn .q{background:#1D3A28;border-color:#24452F;color:#F4F6F2;font-size:15px}
.sadie-panel .turn .a{background:#101A14;border-color:#1F2B23;color:#DDE5DF;font-size:15px}
.sadie-panel .turn .a strong{color:#E6FF6E} .sadie-panel .turn .a .who{color:#9BF26B}
.sp-note{font-size:13px;color:#8FA596}
.hold-hero h1.hold-h1{font-size:clamp(40px,5.2vw,70px)}
@media (max-width:960px){.hold-hero h1.hold-h1{font-size:min(clamp(44px,7vw,84px),calc((100vw - 48px) / 7.7))}}
.fetch button{color:#9BF26B}  /* lime on ink, like the app's Fetch */
.btn.primary,.dark .btn.primary,.nav .btn.primary{background-origin:border-box}  /* the gradient runs under the 2px border too, so the edges don't repeat its other end */
/* the Sample Growth Diagnostic section sits on ink, so the light report scrolling in it stands out */
.diag-sample{--ink:#FAFAFA;--muted:#98AE9F;--green:#9BF26B;--mint:#9BF26B;color-scheme:dark;background:#0B0B0C;color:#FAFAFA}
.diag-sample .btn:not(.primary){border-color:rgba(250,250,250,.32);color:#FAFAFA}
.diag-sample .btn:not(.primary):hover{background:rgba(250,250,250,.08)}
.diag-sample .hero-shot{box-shadow:0 24px 60px rgba(0,0,0,.5),0 0 0 1px rgba(250,250,250,.08)}
.diag-sample .scroll-tag{background:#9BF26B;color:#0B0B0C}
/* where Sadie works: the connectors diagram on ink, like her other panels, so the lines and logos read */
.tp-stage{--ink:#FAFAFA;--muted:#98AE9F;--teal:#2EE59D;--green:#9BF26B;--line:rgba(250,250,250,.12);color-scheme:dark;
  background:radial-gradient(circle at 50% 50%,#0F2419 0,#0B0B0C 70%);border-color:#15301F;box-shadow:0 18px 44px rgba(8,23,15,.16)}
/* the Ask Sadie hero lines up with every other section's left edge; its content keeps a readable width */
.ask-hero .wrap{max-width:var(--wrap)}
.ask-hero .wrap>*{max-width:900px}
/* the five areas as black tiles: the etchings back in lime, so the section reads like Sadie's panels */
.area,.dark .area{--ink:#FAFAFA;--muted:#98AE9F;--teal:#2EE59D;color-scheme:dark;background:#0B0B0C;color:#FAFAFA;border-color:#15301F;
  box-shadow:0 14px 34px rgba(8,23,15,.14)}
.area-art,.dark .area-art{background:radial-gradient(circle at 50% 55%,rgba(155,242,107,.16),transparent 68%)}
.area-art img{filter:drop-shadow(0 0 14px rgba(155,242,107,.25))}
.area:hover{border-color:rgba(155,242,107,.45)}
.hold .area h3{color:#FAFAFA}
/* the problem: four inputs, word headlines */
.stats.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.stats.four .stat b{font-size:clamp(24px,2.4vw,32px)}
@media (max-width:1000px){.stats.four{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}.stats.four .stat{grid-row:auto;grid-template-rows:auto auto}}
@media (max-width:560px){.stats.four{grid-template-columns:minmax(0,1fr)}}
main:not(.hold) section .head h2.wide{max-width:none}
.stats.four .stat b{align-self:start;white-space:nowrap;font-size:clamp(20px,1.9vw,28px)}  /* one line each, so the four subheads share a baseline */
/* the interactive panels as text (for readers and crawlers that don't run scripts), and the FAQ */
.as-text{margin-top:18px;border:1px solid var(--line);border-radius:16px;background:#FFFFFF;padding:4px 18px}
.as-text summary{cursor:pointer;font-weight:700;padding:12px 0;color:var(--ink)}
.as-text-in{padding:4px 0 16px;max-width:900px;font-size:16px}
.as-text h3{font:400 22px var(--display);margin:18px 0 6px} .as-text h4{font:700 17px var(--body);margin:16px 0 4px}
.as-text h4 span{font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--green);margin-left:8px}
.as-text p{margin:0 0 6px;color:var(--muted)} .as-text p b{color:var(--ink)}
.faq{display:flex;flex-direction:column;gap:10px;max-width:900px}
.faq-q{background:#FFFFFF;border:1px solid var(--line);border-radius:14px;padding:4px 20px}
.faq-q summary{cursor:pointer;list-style:none;padding:14px 0;display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq-q summary::-webkit-details-marker{display:none}
.faq-q summary::after{content:"+";font:400 24px var(--body);color:var(--green)} .faq-q[open] summary::after{content:"–"}
.faq-q h3{font:700 18px/1.3 var(--body);margin:0} .faq-q p{color:var(--muted);padding:0 0 16px;max-width:75ch}
/* revenue funnel calculator (/revenue-funnel): RORO's calc layout, a table of every step, the top three levers marked */
.fcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:760px){.fcards{grid-template-columns:minmax(0,1fr)}}
.fcard{background:var(--paper);border-radius:18px;padding:18px 20px;display:flex;flex-direction:column;gap:6px;min-width:0}
.fcard b{font:400 36px/1.05 var(--display);font-variant-numeric:tabular-nums}
.fcard b.small{font-size:22px;line-height:1.15}
.fcard span:not(.eyebrow){font-size:14px}
.fcard.hot{background:#0B0B0C;color:#FAFAFA}
.fcard.hot .eyebrow,.fcard.hot b{color:#9BF26B}
.ftable{background:var(--paper);border-radius:18px;padding:12px 18px 16px}
.ftable table{min-width:640px}
.ftable td{vertical-align:middle}
.ftable td small.play{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.ftable td{white-space:nowrap} .ftable td:first-child{white-space:normal} .ftable .u{font-size:13px;color:var(--muted);margin-left:3px}
.ftable input[id$=_t]{border-color:#2EE59D;border-width:2px}
.ftable td input{width:76px;padding:5px 7px;font-size:14px;text-align:right}
.ftable thead:not(:first-child) th{padding-top:22px}
.ftable tr.sum td{font-weight:700}
.ftable tr.top td:first-child{box-shadow:inset 3px 0 0 #2EE59D;padding-left:10px}
.ftable .worth{white-space:nowrap;font-weight:700}
.ftable .rank{display:inline-block;font:700 11px var(--body);background:#0B0B0C;color:#9BF26B;border-radius:999px;padding:2px 7px;margin-left:4px}
.fsizes{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.fsizes button{font:700 15px var(--body);padding:9px 0;border-radius:999px;border:1.5px solid var(--line);background:#FFFFFF;color:var(--ink);cursor:pointer}
.fsizes button[aria-pressed=true]{background:#0B0B0C;color:#9BF26B;border-color:#0B0B0C}
.rail #freset{align-self:flex-start;font-size:15px;padding:10px 16px}
.fwarn{margin:0;background:#FFF4D6;border:1px solid #E8C35A;color:#5A4300;border-radius:12px;padding:10px 14px;font-size:14.5px}
.fnudge{font-size:13.5px;font-weight:600;color:#0B0B0C;text-decoration:underline;text-decoration-color:#2EE59D;text-underline-offset:3px;text-decoration-thickness:2px;margin-top:auto;padding-top:6px}

/* the funnel (one band per stage, width = volume) and the three-streams bridge under the table */
.ffun,.fbridge{background:var(--paper);border-radius:18px;padding:16px 18px;display:flex;flex-direction:column;gap:6px}
.ffun-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.ffun .legend,.fbridge .legend{display:flex;gap:14px;font-size:13px;color:var(--muted)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.legend i.lk{background:#0B0B0C} .legend i.tg{border:1.5px dashed #0B0B0C;background:transparent}
.legend i.t0{background:#C9D3CC} .legend i.t1{background:#0B0B0C}
.fr{all:unset;box-sizing:border-box;width:100%;display:grid;grid-template-columns:30% minmax(0,1fr) 34%;align-items:center;gap:12px;
  cursor:pointer;padding:0 8px;border-radius:10px;min-height:34px}
.fr:hover{background:rgba(11,11,12,.04)} .fr:focus-visible{outline:3px solid #2EE59D}
.fl{display:flex;justify-content:space-between;gap:8px;font-size:14px;font-variant-numeric:tabular-nums}
.fl b{font-weight:600} .fl span{color:var(--muted)}
.fb{position:relative;height:30px}
.fb i{position:absolute;inset:0}
.fb u{position:absolute;top:-2px;bottom:-2px;left:50%;transform:translateX(-50%);border:1.5px dashed rgba(11,11,12,.55);border-radius:4px;text-decoration:none}
.fr-head .fb i{left:0;right:0;border-radius:6px}
.fo{font-size:13.5px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-variant-numeric:tabular-nums}
.fo-r{color:var(--muted)} .fo b{font-weight:700}
.fr.lit .fo b{background:#0B0B0C;color:#9BF26B;padding:2px 8px;border-radius:999px}
.fo .rank{display:inline-block;font:700 11px var(--body);background:#9BF26B;color:#0B0B0C;border-radius:999px;padding:2px 7px}
.fnote{font-size:12.5px;margin-top:4px}
.ftable tr.flash td{background:rgba(155,242,107,.35);transition:background .3s}
.br{display:grid;grid-template-columns:24% minmax(0,1fr) 26%;gap:12px;align-items:center;min-height:44px;border-top:1px solid var(--line)}
.br:first-child{border-top:none}
.bl{font-size:14px;font-weight:600}
.bb{position:relative;height:30px}
.bb i{position:absolute;border-radius:3px}
.bb i.t0{top:2px;height:16px} .bb i.t1{top:21px;height:7px}
.bb i.t0.tot{background:#C9D3CC} .bb i.t0.pos{background:#2EE59D} .bb i.t0.neg{background:#E8907E}
.bb i.t1{background:#0B0B0C}
.bv{display:flex;flex-direction:column;font-size:14px;font-variant-numeric:tabular-nums;text-align:right}
.bv span{font-size:12.5px;color:var(--muted)}
@media (max-width:640px){.fr{grid-template-columns:50% minmax(0,1fr);row-gap:2px;padding:6px 4px}.fr .fo{grid-column:1/-1}
  .br{grid-template-columns:50% minmax(0,1fr)}.br .bb{grid-column:1/-1;grid-row:2}}
/* the funnel calculator's call to action: an ink band so it breaks from the light page; white fields with the glow */
.cta-ink{background:#0B0B0C;color:#FAFAFA;border-block:none;--ink:#FAFAFA;--muted:#A9BCAF;color-scheme:dark}
.cta-ink .eyebrow{color:#9BF26B} .cta-ink h2{color:#FAFAFA} .cta-ink .lead{color:#C9D6CD} .cta-ink .muted{color:#98AE9F}
.cta-ink .field label{color:#FAFAFA}
.cta-ink form.lead-form :is(input[type=text],input[type=email]){background:#FFFFFF;color:#0B0B0C;border-color:transparent}
.cta-ink .check span{color:#C9D6CD} .cta-ink .check a{color:#9BF26B}
.cta-ink .form-msg{color:#9BF26B} .cta-ink .form-msg a{color:#9BF26B}
.cta-ink .check input{accent-color:#9BF26B}
/* the nav's Tools menu: opens on hover, focus or click; on phones it's a short indented list inside the open menu */
.tools{position:relative}
.tools-btn{all:unset;cursor:pointer;color:var(--on-dark);font-weight:600;font-size:16px;display:inline-flex;align-items:center;gap:6px}
.tools-btn::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.tools-btn:hover,.tools-btn[data-current]{color:var(--mint)} .tools-btn:focus-visible{outline:3px solid var(--mint);outline-offset:4px;border-radius:4px}
.tools-menu{position:absolute;top:calc(100% + 14px);left:-18px;min-width:280px;background:#0B0B0C;border:1px solid rgba(250,250,250,.12);border-radius:14px;
  padding:8px;display:none;flex-direction:column;box-shadow:0 18px 40px rgba(0,0,0,.35)}
.tools-menu::before{content:"";position:absolute;top:-16px;left:0;right:0;height:16px}
.tools:hover .tools-menu,.tools:focus-within .tools-menu,.tools.open .tools-menu{display:flex}
.tools.open .tools-btn::after,.tools:hover .tools-btn::after{transform:rotate(225deg) translateY(-2px)}
.nav .tools-menu a{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:10px}
.nav .tools-menu a:hover{background:rgba(155,242,107,.08)}
.tools-menu b{font-weight:700;color:#FAFAFA} .tools-menu span{font-size:13.5px;font-weight:400;color:#98AE9F}
.tools-menu a[aria-current=page] b{color:var(--mint)}
@media (max-width:820px){.tools-btn{padding:8px 0;pointer-events:none}.tools-btn::after{display:none}
  .tools-menu{display:flex;position:static;min-width:0;background:none;border:0;box-shadow:none;padding:0 0 0 14px}
  .nav .tools-menu a{padding:6px 0}.tools-menu span{display:none}}

/* ---- Home hero (Oct 28, v2): the headline over the five-area spider chart; Ask Sadie on the right (wide screens) ---- */
.hero-lead,.ask-main{display:flex;flex-direction:column;gap:20px;min-width:0}
@media (min-width:1100px){
  .ask-hero .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:64px;align-items:stretch}
  .ask-hero .wrap>*{max-width:none}
  .ask-hero{padding-block:clamp(28px,3.5vw,48px) clamp(48px,6vw,80px)}
  .ask-hero h1{font-size:clamp(34px,3.6vw,54px)}
  .hero-lead{gap:16px}
  /* the card matches the left column's height (contain:size keeps it from setting the row); answers scroll inside */
  .ask-main{contain:size;min-height:0;background:#FFFFFF;border:1px solid #DCE3DB;border-radius:24px;padding:28px;box-shadow:0 18px 44px rgba(8,23,15,.16)}  /* same shadow as the spider card, so the two bottoms read as one line */
  .hero-lead .spider{max-width:none}
  .ask-main .ask-note{margin-top:auto}
  .ask-main .thread{flex:1 1 auto;min-height:0;overflow-y:auto}
  .ask-main .chips{flex:none}
  .ask-main:has(.thread:not(:empty)) .chips{display:none}  /* once she is talking, the answer gets the room */
}
.spider{margin:6px 0 0;max-width:640px;background:radial-gradient(circle at 50% 50%,#0F2419 0,#0B0B0C 72%);border-radius:24px;
  padding:14px 16px 20px;box-shadow:0 18px 44px rgba(8,23,15,.16)}
.spider svg{display:block;width:100%;height:auto}
.sp-ring,.sp-spoke{fill:none;stroke:rgba(250,250,250,.12)}
.sp-target{fill:none;stroke:#9BF26B;stroke-width:1.5;stroke-dasharray:6 6;opacity:.75}
.sp-tlabel{fill:#9BF26B;font:700 12px var(--body);letter-spacing:.12em;text-transform:uppercase}
.sp-shape{fill:url(#sp-g);fill-opacity:.26;stroke:url(#sp-g);stroke-width:2.5;stroke-linejoin:round;transition:fill-opacity .6s}
.spider[data-act=lift] .sp-shape{fill-opacity:.42}
.sp-dot{fill:#9BF26B;stroke:#0B0B0C;stroke-width:2}
.sp-label{fill:#D9E2DC;font:600 17px var(--body);transition:fill .4s}
.sp-num{fill:#9BF26B;font-family:var(--display);font-weight:400;transition:fill .4s}
.sp-label.low,.sp-label.low .sp-num{fill:#FF8A70}  /* the area slipping right now */
.spider figcaption{position:relative;min-height:1.5em;margin-top:4px;text-align:center;color:#D9E2DC;font:500 17px/1.4 var(--body)}
.spider figcaption span{transition:opacity .5s} .spider figcaption .sp-b{position:absolute;inset:0}
.spider figcaption b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.spider[data-act=vol] .sp-b,.spider[data-act=lift] .sp-a{opacity:0}
/* What Sadie delivers (v2, Oct 28): one framed scene per bullet, in step with the list (assets/js/delivers.js) */
.hero-stage{display:none}
@media (min-width:1100px){
  .delivers .wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:64px;align-items:stretch}
  .hero-stage{display:block;position:relative;min-height:560px;border-radius:24px;overflow:hidden;
    background:radial-gradient(circle at 50% 40%,#0F2419 0,#0B0B0C 75%);box-shadow:0 18px 44px rgba(8,23,15,.16)}
  .delivers .ticks li{cursor:pointer;opacity:.5;transition:opacity .35s}
  .delivers .ticks li:hover,.delivers .ticks li.on{opacity:1}
  .delivers .ticks li:before{transition:background .35s,box-shadow .35s}
  .delivers .ticks li.on:before{background:#9BF26B;box-shadow:0 0 0 5px rgba(155,242,107,.22)}
  .delivers .ticks li:focus-visible{outline:2px solid var(--green);outline-offset:4px;border-radius:6px}
}
.hs-scene{position:absolute;inset:0;margin:0;padding:24px 28px 28px;display:flex;flex-direction:column;gap:18px;
  opacity:0;transform:translateX(-16px);pointer-events:none;transition:opacity .3s,transform .3s}
.hs-scene.on{opacity:1;transform:none;pointer-events:auto;transition:opacity .45s .3s,transform .45s .3s}  /* the old scene leaves before the new one arrives */
.hs-tag{align-self:flex-start;font:700 12px var(--body);letter-spacing:.12em;text-transform:uppercase;
  color:#9BF26B;background:rgba(155,242,107,.1);border:1px solid rgba(155,242,107,.35);padding:7px 12px;border-radius:999px}
.hs-body{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:16px}
.hs-shot{display:block;width:100%;height:auto;border-radius:14px;background:#FFFFFF;box-shadow:0 0 0 1px rgba(250,250,250,.08)}
.hs-media{flex:1 1 auto;min-height:0;overflow:hidden;border-radius:14px;
  -webkit-mask-image:linear-gradient(#000 80%,transparent);mask-image:linear-gradient(#000 80%,transparent)}
/* the row under each scene: who it's for, or the number that matters */
.hs-call{margin:0;display:flex;flex-wrap:wrap;gap:8px}
.hs-call span{font:600 14px var(--body);color:#D9E2DC;border:1px solid rgba(250,250,250,.16);padding:6px 12px;border-radius:999px}
.hs-chip{margin:0;color:#D9E2DC;font:500 16px/1.35 var(--body)}
.hs-chip b{font:400 26px/1 var(--display);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin-right:6px}
/* Slack and Teams; plays as CRM tasks: white cards, stacked flush */
.hs-chat,.hs-task,.hs-tile{background:#FFFFFF;border-radius:14px;color:#0B0B0C;box-shadow:0 14px 34px rgba(0,0,0,.35)}
.hs-chat{padding:16px 18px;font:400 15px/1.45 var(--body)}
.hs-chat-h{display:flex;align-items:center;gap:8px;font-size:14px;padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid #E6EAE4}
.hs-q,.hs-a{margin:0} .hs-q{color:#2E3530;margin-bottom:10px} .hs-q b,.hs-a b{display:block;font-weight:700;color:#0B0B0C}
.hs-a{display:flex;gap:10px;align-items:flex-start} .hs-a img{border-radius:50%;flex:none}
.hs-task{padding:16px 18px;font:400 15px/1.45 var(--body)}
.hs-task-h{display:flex;align-items:center;gap:8px;font-size:14px;margin-bottom:8px} .hs-task-h span{margin-left:auto;color:#5A625D;font-size:13px}
.hs-task h4{margin:0 0 4px;font:400 19px/1.2 var(--display)} .hs-task p{margin:0;color:#2E3530}
.hs-task .hs-ask{margin-top:8px} .hs-task .hs-ask b{font-weight:700;color:#0A7A56;letter-spacing:.1em;text-transform:uppercase;font-size:12px;margin-right:8px}
.hs-task .hs-own{margin-top:8px;font-size:13px;color:#5A625D}
/* meeting prep: a 2 x 2 board */
.hs-board{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hs-tile{padding:16px;font:400 14px/1.45 var(--body)}
.hs-tile span{display:block;font:700 11px var(--body);letter-spacing:.12em;text-transform:uppercase;color:#0A7A56;margin-bottom:6px}
.hs-tile b{display:block;font:400 17px/1.2 var(--display);margin-bottom:6px} .hs-tile p{margin:0;color:#2E3530}
@media (prefers-reduced-motion:reduce){.hs-scene{transition:none;transform:none}}
@media (prefers-reduced-motion:reduce){.hs-scene,.hs-chip,.hs-call{animation:none}.hs-scene:first-child,.hs-scene:first-child .hs-chip{opacity:1}}

/* ---- The problem we're addressing (Oct 28): moved above Sadie's diagram; headings as ink knockouts, not green text ---- */
.problem .stat b{color:var(--ink);font-size:clamp(24px,2.4vw,32px);line-height:1.3}
.problem .stat b .ko{display:inline;max-width:none;color:inherit}  /* .stat span is a block for the body text; the knockout hugs its words */
/* phones: the spider chart's labels scale down with the drawing, so set them larger; the Ask box gives its question room */
@media (max-width:600px){
  .sp-label{font-size:25px} .sp-tlabel{font-size:16px} .spider figcaption{font-size:16px}
  .fetch textarea{font-size:16px;padding:10px 8px} .fetch button{padding:12px 16px;font-size:16px}
}

/* the Growth System diagram runs straight on from the five areas (Matt, Oct 28) */
.paper.gs-follow{border-top:0;padding-top:0}

/* How it works: from day one to every Monday (Oct 28, from the cadence slide) */
.cadence .head{margin-bottom:36px}
.cad-block{display:flex;flex-direction:column;gap:18px}
.cad-block+.cad-block{margin-top:48px}
.cad-k{font:700 12px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
.cad-track{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;position:relative}
.cad-track:before{content:"";position:absolute;left:25px;right:calc((100% - 80px) / 5 - 25px);top:24px;height:3px;border-radius:3px;background:var(--green)}  /* first circle to last, solid so it reads on the light page */
.cad-track li{position:relative;display:flex;flex-direction:column;gap:6px;min-width:0}
.cad-track b{position:relative;width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:#0B0B0C;color:#9BF26B;
  font:400 20px var(--display);box-shadow:0 0 0 5px #F3F5F0;margin-bottom:10px}
.cad-track .go b{background:var(--green);color:#FFFFFF;box-shadow:0 0 0 5px #F3F5F0,0 0 0 8px rgba(10,122,86,.28)}  /* live: brand green with a halo */
.cad-track h3{margin:0;font:400 20px/1.2 var(--display);color:var(--ink)}
.cad-track span{font:700 12px var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--green)}
.cad-track p{margin:0;color:var(--muted);font-size:16px;line-height:1.5}
.cad-rhythm{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.cad-rhythm>div{background:#0B0B0C;border-radius:18px;padding:22px;display:flex;flex-direction:column;gap:8px;min-width:0}
.cad-rhythm span{align-self:flex-start;font:700 12px var(--body);letter-spacing:.12em;text-transform:uppercase;color:#9BF26B;
  border:1px solid rgba(155,242,107,.35);background:rgba(155,242,107,.1);padding:5px 10px;border-radius:999px}
.cad-rhythm h3{margin:6px 0 0;font:400 20px/1.2 var(--display);color:#FAFAFA}
.cad-rhythm p{margin:0;color:#B9C7BE;font-size:15px;line-height:1.5}
@media (max-width:900px){
  .cad-track{grid-template-columns:minmax(0,1fr);gap:22px;padding-left:66px}
  .cad-track:before{left:24px;right:auto;top:24px;bottom:24px;width:3px;height:auto;background:var(--green)}
  .cad-track b{position:absolute;left:-66px;top:0;margin:0}
  .cad-track li.go:after{content:"";position:absolute;left:-48px;width:14px;top:58px;bottom:-24px;background:#F3F5F0}  /* the line stops at the last step */
  .cad-rhythm{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:520px){.cad-rhythm{grid-template-columns:minmax(0,1fr)}}
/* closing: the two calculators */
.calc-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.calc-card{display:flex;flex-direction:column;gap:8px;padding:28px;border-radius:20px;background:#FFFFFF;border:1px solid #DCE3DB;color:var(--ink);text-decoration:none;
  box-shadow:0 14px 34px rgba(8,23,15,.06);transition:transform .2s,box-shadow .2s}
.calc-card:hover{transform:translateY(-3px);box-shadow:0 20px 44px rgba(8,23,15,.12)}
.calc-card span{font:700 12px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--green)}
.calc-card h3{margin:0;font:400 24px/1.2 var(--display)} .calc-card p{margin:0;color:var(--muted);line-height:1.55}
.calc-card b{margin-top:8px;color:var(--green);font-weight:700}
.calc-go{margin-top:28px;display:flex;justify-content:center}
@media (max-width:700px){.calc-cards{grid-template-columns:minmax(0,1fr)}}
.cad-track p a{color:var(--green);font-weight:600;text-decoration:none;white-space:nowrap} .cad-track p a:hover{text-decoration:underline}
/* How it works on a dark ground (Matt, Oct 28): a page break between the light sections around it */
.cadence.night{background:radial-gradient(120% 80% at 50% 0%,#12301F 0,#0B0B0C 70%);color:#FAFAFA}
.night .head h2{color:#FAFAFA} .night .eyebrow,.night .cad-k,.night .cad-track span{color:#9BF26B}
.night .lead{color:#B9C7BE}
.night .ko{background:transparent;padding:0}
.night .cad-track:before{background:linear-gradient(90deg,#2EE59D,#9BF26B)}
.night .cad-track b{background:#0B0B0C;color:#9BF26B;box-shadow:0 0 0 2px #2E5A40}
.night .cad-track .go b{background:#9BF26B;color:#0B0B0C;box-shadow:0 0 0 5px #0B0B0C,0 0 0 8px rgba(155,242,107,.35)}
.night .cad-track h3{color:#FAFAFA} .night .cad-track p{color:#B9C7BE} .night .cad-track p a{color:#9BF26B}
.night .cad-rhythm>div{background:#121C16;border:1px solid #22362A}
.cadence.night+section{padding-top:clamp(64px,9vw,112px)!important}  /* the FAQ after it gets its top space back */
@media (max-width:900px){
  .cadence.night{background:#0B0B0C}  /* flat, so the mask that ends the line at the last step matches it */
  .night .cad-track:before{background:linear-gradient(180deg,#2EE59D,#9BF26B)}
  .night .cad-track li.go:after{background:#0B0B0C}
}