/* Growth Dudes - v3 design system.
   Shared by the homepage and every interior page.

   Everything above the INTERIOR PAGES divider is the v3 homepage system,
   lifted verbatim out of site/v3/index.html so there is one copy of it rather
   than two that drift. Read D-014 in DECISIONS.md before changing the scale,
   colour or motion rules - four of them moved with Asif's sign-off and the
   reasoning is recorded there.

   --fs-micro is 14px and is the floor. It is a token because it was broken by
   hand in three consecutive rounds. Do not inline a smaller size.

   The base body size is 16px on purpose (D-014). The large-screen ladder at
   1600/1700/1880px is where type and gutters grow - do not "fix" small type on
   an iMac by raising the base, which would push every phone up with it. */

:root{
  /* Palette follows brand/logo-v2. Ink / paper / accent are the kit's exact
     values; the greys are a neutral ramp derived from them. The previous ramp
     was warm (#3D3833, #EBE7DD and friends) to sit against a warm off-white
     paper - against pure white it read as dirty, so it is neutral now. */
  --paper:#FFFFFF;--paper-2:#F5F5F5;--paper-3:#E9E9E9;--white:#FFFFFF;
  --ink:#0A0A0A;--ink-700:#333333;--ink-600:#555555;--ink-500:#737373;
  --ink-400:#949494;--ink-300:#BDBDBD;--ink-200:#D9D9D9;--ink-100:#EDEDED;
  /* One green everywhere - the kit is explicit about not retinting per
     context. -deep is hover only, -wash is a background tint. */
  --accent:#00C747;--accent-deep:#00A23A;--accent-wash:#E3F9EB;
  /* Extrusion fold only. Deliberately far darker than -deep: the fold has
     to read as a different plane, not a blurred copy of the face. */
  --accent-fold:#00551E;
  --clay:#B8492A;--clay-deep:#8E3620;--clay-wash:#F7E7E1;
  --go:#1E6B3A;--warn:#8A5A00;--stop:#B3261E;--info:#1F4F8B;
  --fd:'Fraunces',Georgia,serif;--ft:'Schibsted Grotesk',system-ui,-apple-system,sans-serif;
  --fm:'JetBrains Mono',ui-monospace,monospace;
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;
  --sp-7:48px;--sp-8:64px;--sp-9:96px;--sp-10:128px;--sp-11:176px;
  --r-sm:4px;--r-md:6px;--r-lg:12px;--r-xl:24px;--border:2px solid var(--ink);
  --sh:5px 5px 0 var(--ink);--sh-h:8px 8px 0 var(--ink);
  --ease:cubic-bezier(.2,0,0,1);--container:1320px;--gut:20px;
  --fs-micro:.875rem;   
}
@media(min-width:1024px){:root{--gut:44px}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
img,canvas,svg{max-width:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--ft);
  font-size:1rem;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3,h4{font-family:var(--fd);font-variation-settings:'SOFT' 40,'WONK' 0;
  font-weight:700;margin:0;line-height:1.02;letter-spacing:-.04em}
p{margin:0 0 1em}
a{color:inherit}
.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--gut)}
code,.mono{font-family:var(--fm)}
:focus-visible{outline:3px solid var(--clay);outline-offset:3px;border-radius:var(--r-sm)}
.d1{font-size:clamp(2.75rem,8.6vw,7.5rem);line-height:.94;letter-spacing:-.045em}
.d2{font-size:clamp(2.4rem,6.6vw,5.25rem);line-height:1.0;letter-spacing:-.04em}
.d3{font-size:clamp(1.75rem,3.4vw,2.75rem);line-height:1.06;letter-spacing:-.03em}
.lead{font-size:1.0625rem;line-height:1.62;color:var(--ink-700)}
.small{font-size:.9375rem;color:var(--ink-600)}
.kicker{font-family:var(--fm);font-size:var(--fs-micro);font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-500)}
.num{font-family:var(--fm);font-size:var(--fs-micro);font-weight:700;letter-spacing:.09em;color:var(--clay)}
.extrude{text-shadow:
   0.0111em 0.0111em 0 var(--clay-deep),
   0.0221em 0.0221em 0 var(--clay-deep),
   0.0332em 0.0332em 0 var(--clay-deep),
   0.0443em 0.0443em 0 var(--clay-deep),
   0.0554em 0.0554em 0 var(--clay-deep),
   0.0664em 0.0664em 0 var(--clay-deep),
   0.0775em 0.0775em 0 var(--clay-deep),
   0.0886em 0.0886em 0 var(--clay-deep),
   0.0996em 0.0996em 0 var(--clay-deep),
   0.1107em 0.1107em 0 var(--clay-deep),
   0.1218em 0.1218em 0 var(--clay-deep),
   0.1329em 0.1329em 0 var(--clay-deep),
   0.1439em 0.1439em 0 var(--clay-deep),
   0.1550em 0.1550em 0 var(--clay-deep)}
/* Flat-plane extrusion (D-014): the fold is a much darker green so the two
   planes separate. An earlier pass used --accent-deep, which measured 1.49:1
   against the face and made two-digit figures like "12" read as one blob. */
.extrude-accent{text-shadow:
   0.0071em 0.0071em 0 var(--accent-fold),
   0.0143em 0.0143em 0 var(--accent-fold),
   0.0214em 0.0214em 0 var(--accent-fold),
   0.0286em 0.0286em 0 var(--accent-fold),
   0.0357em 0.0357em 0 var(--accent-fold),
   0.0429em 0.0429em 0 var(--accent-fold),
   0.0500em 0.0500em 0 var(--accent-fold),
   0.0571em 0.0571em 0 var(--accent-fold),
   0.0643em 0.0643em 0 var(--accent-fold),
   0.0714em 0.0714em 0 var(--accent-fold),
   0.0786em 0.0786em 0 var(--accent-fold),
   0.0857em 0.0857em 0 var(--accent-fold),
   0.0929em 0.0929em 0 var(--accent-fold),
   0.1000em 0.1000em 0 var(--accent-fold)}
.swipe{position:relative;display:inline-block;font-family:var(--ft);font-weight:800;
  text-transform:uppercase;font-size:.84em;letter-spacing:-.025em;padding:0 .14em}
.swipe>span{position:relative;z-index:1}
.swipe::before{content:'';position:absolute;left:0;right:0;top:.15em;bottom:.16em;
  background:var(--accent);border-radius:.05em;transform:scaleX(0);transform-origin:0 50%;
  animation:swipe .68s var(--ease) .45s forwards}
@keyframes swipe{to{transform:scaleX(1)}}
.hdr{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(140%) blur(12px);border-bottom:1px solid var(--ink-200)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);min-height:84px}
@media(min-width:768px){.hdr .wrap{min-height:92px}}
/* The brand is a single lockup image now, not a mark plus type. Height drives
   it and width:auto holds the 1085:336 ratio; the width/height attributes on
   the tag itself are what stop the header reflowing before the SVG loads. */
.brand{display:inline-flex;align-items:center;text-decoration:none}
.brand img{display:block;height:44px;width:auto}
@media(min-width:768px){.brand img{height:52px}}
footer .brand img{height:52px}
.hdr-r{display:flex;align-items:center;gap:var(--sp-3)}
.menu-btn{display:flex;align-items:center;gap:10px;background:none;border:0;cursor:pointer;
  font-family:var(--fm);font-size:var(--fs-micro);font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink);padding:8px 2px;min-height:44px}
.menu-btn .bars{width:36px;height:36px;border:2px solid var(--ink);border-radius:50%;
  display:grid;place-content:center;gap:4px;transition:background .16s var(--ease)}
.menu-btn:hover .bars{background:var(--accent)}
.menu-btn .bars i{display:block;width:14px;height:2px;background:var(--ink)}
.menu-btn .lbl{display:none}
@media(min-width:560px){.menu-btn .lbl{display:inline}}
.nav-cta{border:2px solid var(--ink);border-radius:var(--r-md);padding:9px 15px;
  background:var(--paper);color:var(--ink);text-decoration:none;font-weight:700;font-size:.875rem;
  min-height:42px;display:inline-flex;align-items:center;
  transition:box-shadow .16s var(--ease),transform .16s var(--ease)}
.nav-cta:hover{box-shadow:3px 3px 0 var(--ink);transform:translate(-1px,-1px)}
.sheet{position:fixed;inset:0;z-index:50;background:var(--ink);color:var(--paper);
  display:flex;flex-direction:column;padding:var(--sp-5) 0;
  opacity:0;visibility:hidden;transition:opacity .22s var(--ease),visibility .22s}
.sheet[data-open]{opacity:1;visibility:visible}
.sheet .wrap{width:100%}
.sheet-top{display:flex;justify-content:space-between;align-items:center;min-height:54px}
.sheet-x{background:none;border:0;color:var(--paper);font-size:1.75rem;line-height:1;
  cursor:pointer;min-height:44px;min-width:44px;font-family:var(--ft)}
.sheet nav{margin-top:var(--sp-8)}
.sheet ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-3)}
.sheet a{font-family:var(--fd);font-weight:700;font-size:clamp(2rem,7vw,3.75rem);
  text-decoration:none;color:var(--paper);line-height:1.05;letter-spacing:-.04em;display:inline-block}
.sheet a:hover{color:var(--accent)}
.sheet-foot{margin-top:auto;padding-top:var(--sp-7);color:var(--ink-400);font-size:.875rem}
.btn{font-family:var(--ft);font-size:1rem;font-weight:700;padding:15px 24px;
  border:var(--border);border-radius:var(--r-md);cursor:pointer;box-shadow:var(--sh);
  display:inline-flex;align-items:center;gap:var(--sp-2);min-height:52px;line-height:1;
  text-decoration:none;background:var(--paper);color:var(--ink);
  transition:box-shadow .16s var(--ease),transform .16s var(--ease),background .12s var(--ease)}
.btn:hover{box-shadow:var(--sh-h);transform:translate(-3px,-3px)}
.btn:active{box-shadow:2px 2px 0 var(--ink);transform:translate(2px,2px)}
.btn-accent{background:var(--accent)}
.btn-accent:hover{background:var(--accent-deep)}
.btn-clay{background:var(--clay);color:var(--white);border-color:var(--ink)}
.btn-clay:hover{background:var(--clay-deep)}
.btn-ghost{background:transparent}
.btn-onink{background:var(--paper);color:var(--ink);border-color:var(--paper);box-shadow:5px 5px 0 var(--clay)}
.btn-onink:hover{box-shadow:8px 8px 0 var(--clay)}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:center}
.hero{padding:var(--sp-8) 0 var(--sp-8);border-bottom:var(--border);position:relative;overflow:hidden}
@media(min-width:900px){.hero{padding:var(--sp-9) 0 var(--sp-8)}}
.hero-grid{display:grid;grid-template-columns:1fr;gap:var(--sp-7)}
.hero h1{margin:0}
@media(min-width:1140px){
  .hero-grid{grid-template-columns:minmax(0,1fr) 320px;column-gap:var(--sp-8);
    grid-template-rows:auto auto}
  .hero-grid>h1{grid-column:1/-1;grid-row:1/3}
  .hero-grid>.hero-side{grid-column:2;grid-row:1;align-self:start;z-index:2;
    padding-top:.45em}
}
.hero-side{max-width:44ch}
.hero-side .lead{font-size:1rem}
.hero-meta{margin-top:var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-2);
  font-size:.875rem;color:var(--ink-600);border-top:2px solid var(--ink);padding-top:var(--sp-4)}
.hero-meta span{display:flex;gap:9px}
.hero-meta b{color:var(--ink);font-family:var(--fm);font-size:var(--fs-micro);padding-top:.1em}
.ticker{background:var(--ink);color:var(--paper);overflow:hidden;padding:var(--sp-5) 0;
  border-bottom:var(--border);position:relative}
.tick-row{display:flex;width:max-content;animation:marquee 46s linear infinite}
.ticker:hover .tick-row{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.tick-item{display:flex;align-items:center;gap:var(--sp-4);padding:0 var(--sp-6);
  font-family:var(--fd);font-weight:700;font-size:clamp(1.5rem,3.2vw,2.5rem);
  letter-spacing:-.03em;white-space:nowrap;line-height:1}
.tick-item .t{font-family:var(--fm);font-size:max(var(--fs-micro),.5em);font-weight:700;letter-spacing:.02em;
  padding:5px 9px;border-radius:var(--r-sm)}
.t-go{background:#12341F;color:#9BE3B4}
.t-warn{background:#3A2A05;color:#F2CE74}
.t-info{background:#0E2440;color:#93BDF0}
.tick-item .dot{width:7px;height:7px;border-radius:50%;background:var(--clay);flex:none}
.statement{padding:var(--sp-10) 0;border-bottom:1px solid var(--ink-200)}
.statement .d2{max-width:16ch}
.statement-grid{display:grid;grid-template-columns:1fr;gap:var(--sp-7)}
@media(min-width:980px){
  .statement-grid{grid-template-columns:1fr 340px;gap:var(--sp-10);align-items:end}
}
.slab{background:var(--ink);color:var(--paper-3);padding:var(--sp-9) 0;overflow:hidden}
.slab-head{display:grid;grid-template-columns:1fr;gap:var(--sp-6)}
@media(min-width:1000px){
  .slab-head{grid-template-columns:1.5fr 1fr;gap:var(--sp-9);align-items:end}
  .slab-head>p{padding-bottom:.4em}
}
.slab h2{color:var(--paper)}
.slab .lead{color:var(--ink-300)}
.figs{display:grid;grid-template-columns:1fr;gap:var(--sp-8);margin-top:var(--sp-8)}
@media(min-width:820px){.figs{grid-template-columns:repeat(3,1fr);gap:var(--sp-7)}}
.fig .n{font-family:var(--fd);font-weight:900;font-size:clamp(4.5rem,11vw,8.5rem);
  line-height:.82;letter-spacing:.06em;color:var(--accent);display:block;margin-bottom:var(--sp-6)}
.fig .l{color:var(--ink-300);font-size:.9375rem;max-width:24ch;border-top:2px solid var(--ink-500);
  padding-top:var(--sp-4)}
.sec{padding:var(--sp-10) 0;border-bottom:1px solid var(--ink-200)}
.sec-top{display:flex;align-items:baseline;gap:var(--sp-4);margin-bottom:var(--sp-6);flex-wrap:wrap}
.offset{display:grid;grid-template-columns:1fr;gap:var(--sp-6)}
@media(min-width:1000px){
  .offset{grid-template-columns:1.65fr 1fr;gap:var(--sp-8);align-items:start}
  .offset>.pull{padding-top:var(--sp-9)}
}
.big-card{border:var(--border);border-radius:var(--r-lg);background:var(--white);
  padding:var(--sp-7);box-shadow:var(--sh);text-decoration:none;display:block;
  transition:box-shadow .16s var(--ease),transform .16s var(--ease)}
.big-card:hover{box-shadow:var(--sh-h);transform:translate(-3px,-3px)}
.big-card h3{font-size:clamp(2.25rem,5vw,3.5rem);margin:var(--sp-5) 0 var(--sp-4)}
.pull{font-family:var(--fd);font-size:clamp(1.375rem,2.4vw,1.75rem);line-height:1.28;
  letter-spacing:-.025em;color:var(--ink-700)}
.pull b{color:var(--ink)}
.rail{display:flex;gap:var(--sp-4);overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;scrollbar-width:none;margin-top:var(--sp-6);
  margin-right:calc(-1 * var(--gut));padding:3px var(--gut) var(--sp-5) 3px}
.rail::-webkit-scrollbar{display:none}
.rail>*{scroll-snap-align:start;flex:0 0 clamp(250px,72vw,300px)}
.card{border:var(--border);border-radius:var(--r-lg);background:var(--paper);padding:var(--sp-5);
  box-shadow:var(--sh);text-decoration:none;display:block;
  transition:box-shadow .16s var(--ease),transform .16s var(--ease)}
.card:hover{box-shadow:var(--sh-h);transform:translate(-3px,-3px)}
.card h3{font-size:1.5rem;margin:var(--sp-3) 0 var(--sp-2)}
.card p{font-size:.9375rem;color:var(--ink-700);margin:0}
.tag{display:inline-flex;align-items:center;gap:5px;font-family:var(--fm);font-size:var(--fs-micro);
  font-weight:700;letter-spacing:.04em;padding:5px 8px;border-radius:var(--r-sm);
  border:1px solid var(--ink-500);background:transparent;color:var(--ink-700)}
.st-go{background:#E7F4EA;border-color:#1E6B3A;color:#1E6B3A}
.st-warn{background:#FDF3DD;border-color:#8A5A00;color:#8A5A00}
.st-info{background:#E8F0FA;border-color:#1F4F8B;color:#1F4F8B}
.reality{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5);align-items:center;
  border-top:1px solid var(--ink-200);margin-top:var(--sp-5);padding-top:var(--sp-4);
  font-size:.875rem;color:var(--ink-600);font-family:var(--fm)}
.reality b{color:var(--ink)}
.threes{display:grid;grid-template-columns:1fr;gap:var(--sp-8)}
@media(min-width:860px){.threes{grid-template-columns:repeat(3,1fr);gap:var(--sp-7)}}
.three .n3{font-family:var(--fd);font-weight:900;font-size:clamp(3.5rem,7vw,5.5rem);
  line-height:.85;letter-spacing:-.05em;color:var(--clay);display:block;margin-bottom:var(--sp-5);
  border-bottom:3px solid var(--ink);padding-bottom:var(--sp-4)}
.three h3{font-size:1.5rem;margin-bottom:var(--sp-3)}
.three p{color:var(--ink-700);font-size:.9375rem;margin:0}
.ladder{display:grid;grid-template-columns:1fr;gap:var(--sp-3)}
@media(min-width:900px){.ladder{grid-template-columns:repeat(4,1fr)}}
.rung{border:var(--border);border-radius:var(--r-lg);padding:var(--sp-5);background:var(--paper)}
.rung-top{display:flex;align-items:center;gap:9px;margin-bottom:var(--sp-3)}
.rung-top b{font-size:1.0625rem}
.rung p{margin:0;font-size:.875rem;color:var(--ink-700);line-height:1.55}
.pip{width:12px;height:12px;border-radius:50%;flex:none;border:2px solid var(--ink)}
.r-info{background:#E8F0FA} .r-info .pip{background:#1F4F8B}
.r-warn{background:#FDF3DD} .r-warn .pip{background:#8A5A00}
.r-go{background:#E7F4EA}   .r-go   .pip{background:#1E6B3A}
.r-stop{background:#FBEAE8} .r-stop .pip{background:#B3261E}
.notice{border-radius:var(--r-sm);padding:var(--sp-4) var(--sp-5);margin-top:var(--sp-6);
  max-width:68ch;font-size:1rem;line-height:1.6;background:#FDF3DD;border-left:5px solid #8A5A00}
.notice b{display:block;margin-bottom:4px;color:#8A5A00}
.terms{display:grid;grid-template-columns:1fr;border:2px solid var(--paper);border-radius:var(--r-lg);
  overflow:hidden;margin-bottom:var(--sp-7)}
@media(min-width:760px){.terms{grid-template-columns:1fr 1fr}}
.term{padding:var(--sp-6);border-bottom:1px solid var(--ink-700)}
@media(min-width:760px){
  .term:nth-child(odd){border-right:1px solid var(--ink-700)}
  .term:nth-last-child(-n+2){border-bottom:0}
}
@media(max-width:759px){.term:last-child{border-bottom:0}}
.term dt{font-family:var(--fm);font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-400);margin-bottom:var(--sp-3)}
.term dd{margin:0;font-family:var(--fd);font-weight:700;font-size:clamp(1.75rem,3vw,2.375rem);
  line-height:1.05;letter-spacing:-.035em;color:var(--accent)}
.term .fine{display:block;font-family:var(--ft);font-weight:400;font-size:.9375rem;
  color:var(--ink-300);margin-top:var(--sp-4);line-height:1.55;letter-spacing:0}
.notes{display:grid;grid-template-columns:1fr;gap:var(--sp-5)}
@media(min-width:900px){.notes{grid-template-columns:1fr 1fr;gap:var(--sp-6)}}
.note{border:2px dashed var(--ink-300);border-radius:var(--r-lg);padding:var(--sp-7);background:var(--paper-2)}
.note .who{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-5)}
.note .dot{width:36px;height:36px;border-radius:50%;background:var(--ink-200);flex:none}
.note .bar{height:10px;border-radius:99px;background:var(--ink-200)}
.note .lines{display:flex;flex-direction:column;gap:10px;margin-bottom:var(--sp-6)}
.note h3{font-size:1.5rem;margin-bottom:var(--sp-3)}
.note p{color:var(--ink-700);font-size:.9375rem;margin:0}
.faq{border-top:2px solid var(--ink)}
.faq details{border-bottom:1px solid var(--ink-200)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:var(--sp-5);
  padding:var(--sp-6) 0;font-family:var(--fd);font-weight:700;
  font-size:clamp(1.375rem,3vw,2.125rem);letter-spacing:-.035em;line-height:1.14;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .q{font-family:var(--fm);font-size:.875rem;font-weight:700;color:var(--clay);
  padding-top:.55em;flex:none;width:2.4em;letter-spacing:.06em}
.faq summary .t{flex:1}
.faq summary .pm{flex:none;width:34px;height:34px;border:2px solid var(--ink);border-radius:50%;
  display:grid;place-content:center;font-family:var(--ft);font-size:1.25rem;line-height:1;
  color:var(--ink);margin-top:.22em;transition:background .16s var(--ease)}
.faq summary:hover .pm{background:var(--accent)}
.faq details[open] summary .pm{background:var(--ink);color:var(--paper)}
.faq details[open] summary{padding-bottom:var(--sp-3)}
.faq .a{padding:0 0 var(--sp-7) calc(2.4em + var(--sp-5));max-width:66ch;color:var(--ink-700)}
.faq .a p:last-child{margin-bottom:0}
.duo{display:flex;align-items:center;gap:var(--sp-5);flex-wrap:wrap;border:var(--border);
  border-radius:var(--r-lg);background:var(--white);padding:var(--sp-5) var(--sp-6);
  box-shadow:var(--sh);max-width:600px}
.avs{display:flex}
.av{width:56px;height:56px;border-radius:50%;border:2px solid var(--ink);background:var(--accent);
  display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-weight:700;font-size:1.25rem}
.av+.av{margin-left:-14px;background:var(--clay);color:var(--white)}
.signup{display:flex;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-5);max-width:520px}
.signup input{flex:1;min-width:210px;font-family:var(--ft);font-size:1rem;padding:14px 15px;
  min-height:52px;background:var(--white);border:2px solid var(--ink);border-radius:var(--r-sm);color:var(--ink)}
.signup input::placeholder{color:var(--ink-500)}
.hint{font-size:.875rem;color:var(--ink-600);margin-top:var(--sp-3)}
/* The homepage ends on a .slab, which is the same --ink as the footer. Without
   a rule the two just stack their padding into ~190px of unexplained black, so
   the footer needs to declare its own edge even against an identical ground. */
footer{background:var(--ink);color:var(--ink-300);border-top:1px solid var(--ink-700);
  padding:var(--sp-8) 0 var(--sp-7)}
footer a{color:var(--paper-3);text-decoration:none}
footer a:hover{color:var(--accent)}
.foot-grid{display:grid;grid-template-columns:1fr;gap:var(--sp-7)}
/* 2fr left a 400px hole between a 36ch paragraph and the nav column. */
@media(min-width:760px){.foot-grid{grid-template-columns:1.2fr 1fr 1fr}}
.foot-grid .btn{margin-top:var(--sp-5);font-size:.9375rem;padding:12px 20px;min-height:46px}
.foot-grid h5{font-family:var(--fm);font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-400);margin:0 0 var(--sp-4);font-weight:700}
.foot-grid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-3)}
.foot-bot{border-top:1px solid var(--ink-700);margin-top:var(--sp-8);padding-top:var(--sp-5);
  font-size:.875rem;display:flex;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap}
@media(min-width:1600px){
  :root{--container:1480px;--gut:56px}
  body{font-size:1.0625rem}
  .lead{font-size:1.125rem}
  .d1{font-size:8.5rem}
  .d2{font-size:6rem}
  .d3{font-size:3rem}
  .brand img{height:60px}
  footer .brand img{height:64px}
  .hdr .wrap{min-height:104px}
  .hero{padding:var(--sp-10) 0 var(--sp-9)}
  .hero-grid{grid-template-columns:minmax(0,1fr) 400px;column-gap:var(--sp-9)}
  .hero-side{max-width:none}
  .tick-item{font-size:2.75rem}
  .fig .n{font-size:10rem}
  .big-card h3{font-size:4rem}
  .three .n3{font-size:6.5rem}
  .faq summary{font-size:2.375rem}
  .term dd{font-size:2.75rem}
  .statement,.sec{padding:var(--sp-11) 0}
  .slab{padding:var(--sp-10) 0}
}
@media(min-width:1900px){
  :root{--container:1700px;--gut:72px}
  .d1{font-size:9.5rem}
  .d2{font-size:6.75rem}
  .hero-grid{grid-template-columns:minmax(0,1fr) 420px}
  .fig .n{font-size:11.5rem}
  .rail>*{flex:0 0 350px}
  .tick-item{font-size:3.25rem}
  .three .n3{font-size:7.5rem}
}
@media(min-width:2400px){
  :root{--container:1880px;--gut:88px}
  .d1{font-size:10.5rem}
  .d2{font-size:7.5rem}
  .hero-grid{grid-template-columns:minmax(0,1fr) 440px}
  .fig .n{font-size:13rem}
  .rail>*{flex:0 0 380px}
}
@media(min-width:2800px){
  :root{--container:2080px;--gut:104px}
  .d1{font-size:11.5rem}
  .d2{font-size:8.25rem}
  .hero-grid{grid-template-columns:minmax(0,1fr) 470px}
  .fig .n{font-size:14.5rem}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .swipe::before{transform:scaleX(1)}
  .tick-row{transform:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   INTERIOR PAGES
   Components the homepage doesn't use. Same idiom throughout: 2px ink borders,
   hard offset shadows, Fraunces for headings, mono for micro-labels. Nothing
   here introduces a new colour, radius or shadow - they all come from tokens.
   ══════════════════════════════════════════════════════════════════════════ */

/* Page head - the interior equivalent of the homepage hero. Shorter, because
   an interior page has already been chosen and doesn't need to argue for
   itself the way a front door does. */
.phead{padding:var(--sp-8) 0 var(--sp-7);border-bottom:var(--border)}
@media(min-width:900px){.phead{padding:var(--sp-9) 0 var(--sp-8)}}
.phead h1{margin:0}
.phead .lead{max-width:56ch;margin-top:var(--sp-6)}
.phead-grid{display:grid;grid-template-columns:1fr;gap:var(--sp-6)}
@media(min-width:1000px){
  .phead-grid{grid-template-columns:1.4fr 1fr;gap:var(--sp-9);align-items:end}
  .phead-grid .lead{margin-top:0;padding-bottom:.3em}
}
.crumb{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center;
  font-family:var(--fm);font-size:var(--fs-micro);color:var(--ink-500);margin-bottom:var(--sp-5)}
.crumb a{color:var(--ink-600)}
.crumb a:hover{color:var(--ink)}
.crumb .sep{color:var(--ink-300)}

/* Long-form copy. 66ch measure, 1.0625rem body inherited from :root. */
.prose{max-width:66ch}
.prose p{color:var(--ink-700);margin:0 0 1.15em}
.prose p b,.prose p strong{color:var(--ink)}
.prose h3{font-size:clamp(1.5rem,2.6vw,2rem);margin:var(--sp-8) 0 var(--sp-4)}
.prose ol,.prose ul{color:var(--ink-700);padding-left:1.3em;margin:0 0 1.15em}
.prose li{margin-bottom:.6em}
.prose li::marker{color:var(--clay);font-family:var(--fm);font-weight:700}
.prose a{font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* Card grid. The homepage bleeds its cards off the edge in a .rail because
   there the cut edge IS the affordance; a directory is a list you are meant to
   see all of, so it grids. */
.grid{display:grid;grid-template-columns:1fr;gap:var(--sp-5);margin-top:var(--sp-6)}
@media(min-width:680px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.grid{grid-template-columns:repeat(3,1fr)}}
.grid .card{display:flex;flex-direction:column}
/* Flex items stretch on the cross axis, which turns an inline chip into a
   full-width bar. Pin the tag to its own width and let the bar sink. */
.grid .card>.tag{align-self:flex-start}
.grid .card .reality{margin-top:auto}
.grid .card[hidden]{display:none}
.card-go{display:block;margin-top:var(--sp-4);font-family:var(--fm);font-size:var(--fs-micro);
  font-weight:700;letter-spacing:.06em;color:var(--clay)}

/* Category filter. Buttons, not a select - the set is small enough to show. */
.filters{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-3)}
.filter-row{margin-top:var(--sp-6)}
.filter-row>.kicker{display:block}
.filter-count{font-family:var(--fm);font-size:var(--fs-micro);color:var(--ink-600);
  margin-top:var(--sp-6);border-top:2px solid var(--ink);padding-top:var(--sp-4)}
.filter-none{display:none;padding:var(--sp-7) 0;color:var(--ink-600)}
.filter-none.show{display:block}
.filter-btn{font-family:var(--fm);font-size:var(--fs-micro);font-weight:700;letter-spacing:.04em;
  padding:9px 14px;min-height:42px;border:2px solid var(--ink);border-radius:var(--r-md);
  background:var(--paper);color:var(--ink);cursor:pointer;
  transition:background .12s var(--ease),box-shadow .16s var(--ease),transform .16s var(--ease)}
.filter-btn:hover{box-shadow:3px 3px 0 var(--ink);transform:translate(-1px,-1px)}
.filter-btn.active{background:var(--ink);color:var(--paper)}

/* Two-column teardown layout. Sidebar drops under the body on narrow screens. */
.tool-body{display:grid;grid-template-columns:1fr;gap:var(--sp-8)}
/* Grid items default to min-width:auto, so the code block's longest line sets
   the track width and the whole page grows a horizontal scrollbar on a phone.
   The pre scrolls itself; the track must not. */
.tool-body>*{min-width:0}
@media(min-width:1000px){
  .tool-body{grid-template-columns:minmax(0,1fr) 340px;gap:var(--sp-9);align-items:start}
  .tool-body .side{position:sticky;top:100px}
}
.side{display:flex;flex-direction:column;gap:var(--sp-5)}
.side-box{border:var(--border);border-radius:var(--r-lg);background:var(--white);
  padding:var(--sp-5) var(--sp-6);box-shadow:var(--sh)}
.side-box h3{font-size:1.25rem;margin-bottom:var(--sp-4)}
.side-box dl{margin:0;display:grid;grid-template-columns:1fr auto;gap:var(--sp-3) var(--sp-4);
  align-items:baseline;font-size:.9375rem}
.side-box dt{font-family:var(--fm);font-size:var(--fs-micro);letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-500)}
.side-box dd{margin:0;text-align:right;font-weight:700}
.side-box p{font-size:.9375rem;color:var(--ink-700);margin:0}

/* Code block. Same structure the generator already emits - what-it-does above
   the code, never below, and the lines you have to edit are highlighted. */
.cb{border:var(--border);border-radius:var(--r-lg);overflow:hidden;background:var(--paper-2);
  margin:var(--sp-6) 0;box-shadow:var(--sh)}
.cb-what{background:var(--paper-3);padding:var(--sp-4) var(--sp-5);border-bottom:var(--border);
  font-size:.9375rem;color:var(--ink-700);line-height:1.55}
.cb-what b{display:block;font-family:var(--fm);font-size:var(--fs-micro);letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-600);margin-bottom:5px;font-weight:700}
.cb-bar{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);
  padding:var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-5);background:var(--ink);color:var(--paper-3);
  font-family:var(--fm);font-size:var(--fs-micro)}
.cb-copy{font-family:var(--fm);font-size:var(--fs-micro);font-weight:700;background:var(--paper);
  color:var(--ink);border:2px solid var(--ink);border-radius:var(--r-sm);padding:6px 12px;
  min-height:36px;cursor:pointer;transition:background .12s var(--ease)}
.cb-copy:hover{background:var(--accent)}
.cb pre{margin:0;padding:var(--sp-4) 0;overflow-x:auto;font-family:var(--fm);
  font-size:.875rem;line-height:1.75;color:var(--ink)}
.cb .ln{display:block;padding:0 var(--sp-5) 0 0;white-space:pre}
.cb .ln::before{content:attr(data-n);display:inline-block;width:2.5em;padding-left:var(--sp-5);
  color:var(--ink-400);-webkit-user-select:none;user-select:none}
.cb .ln.hl{background:var(--accent-wash);box-shadow:inset 3px 0 0 var(--accent-deep)}
.cb .c{color:var(--ink-600)}

/* Notice variants. The warn version ships with the homepage; interior pages
   need a go (the survival note) and a stop (risk disclosure). */
.notice-go{background:#E7F4EA;border-left-color:#1E6B3A}
.notice-go b{color:#1E6B3A}
.notice-stop{background:#FBEAE8;border-left-color:#B3261E}
.notice-stop b{color:#B3261E}

/* Accept / reject columns. */
.dd{display:grid;grid-template-columns:1fr;gap:var(--sp-5);margin-top:var(--sp-6)}
@media(min-width:820px){.dd{grid-template-columns:1fr 1fr;gap:var(--sp-6)}}
.dd-col{border:var(--border);border-radius:var(--r-lg);overflow:hidden;background:var(--paper)}
.dd-col header{padding:var(--sp-4) var(--sp-5);font-family:var(--fm);font-size:var(--fs-micro);
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;border-bottom:var(--border)}
.dd-yes header{background:var(--accent)}
.dd-no header{background:var(--clay);color:var(--white)}
.dd-col ul{list-style:none;margin:0;padding:var(--sp-5)}
.dd-col li{position:relative;padding-left:var(--sp-6);margin-bottom:var(--sp-4);
  color:var(--ink-700);font-size:.9375rem;line-height:1.55}
.dd-col li:last-child{margin-bottom:0}
.dd-col li::before{position:absolute;left:0;top:-.05em;font-family:var(--fm);font-weight:700}
.dd-yes li::before{content:'✓';color:var(--go)}
.dd-no li::before{content:'✕';color:var(--stop)}

/* Forms. Inputs are 52px so they clear the touch target on a phone, and every
   field label is visible - no placeholder-as-label. */
.form-sec{border:var(--border);border-radius:var(--r-lg);background:var(--paper);
  padding:var(--sp-6);margin-bottom:var(--sp-5);box-shadow:var(--sh)}
.form-sec>h3{font-size:1.5rem;margin-bottom:var(--sp-5);padding-bottom:var(--sp-4);
  border-bottom:2px solid var(--ink)}
.form-grid{display:grid;grid-template-columns:1fr;gap:var(--sp-5)}
@media(min-width:700px){.form-grid{grid-template-columns:1fr 1fr}.field.full{grid-column:1/-1}}
.field{display:flex;flex-direction:column;gap:var(--sp-2)}
.field label{font-family:var(--fm);font-size:var(--fs-micro);font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-700)}
.field input,.field select,.field textarea{font-family:var(--ft);font-size:1rem;color:var(--ink);
  background:var(--white);border:2px solid var(--ink);border-radius:var(--r-sm);
  padding:14px 15px;min-height:52px;width:100%}
.field textarea{min-height:96px;line-height:1.55;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-400)}
.field .hint{font-size:.875rem;color:var(--ink-600);margin:0}
.form-msg{display:none;border-radius:var(--r-md);padding:var(--sp-5) var(--sp-6);
  margin-bottom:var(--sp-6);border:var(--border)}
.form-msg.show{display:block}
.form-err{background:#FBEAE8;border-color:#B3261E}
.form-ok{background:#E7F4EA;border-color:#1E6B3A}
.form-ok h3{font-size:1.5rem;margin-bottom:var(--sp-3)}

/* Empty state. Used where a component is real but has nothing in it yet -
   field notes, mostly. It says so rather than being filled with invented
   content, which is the whole point of the component. */
.empty{border:2px dashed var(--ink-300);border-radius:var(--r-lg);background:var(--paper-2);
  padding:var(--sp-7);text-align:center;color:var(--ink-600);max-width:60ch;margin-top:var(--sp-6)}
.empty h3{font-size:1.375rem;color:var(--ink);margin-bottom:var(--sp-3)}
.empty p{margin:0 auto;max-width:44ch;font-size:.9375rem}