/* ==================================================================
   Balancer, direction D. B's design system and token contract,
   carrying the manifesto argument at much higher contrast.

   Same three theme states as B, per the theme rules: bare :root is the
   complete light palette; the media query redefines tokens only, guarded
   so an explicit light choice beats a dark OS; [data-theme="dark"] wins
   in the other direction.

   Where D differs from B on purpose:
     - the hero and the closing statement are dark BANDS in both themes,
       so the argument lands the same way whichever theme the reader has
     - a much steeper type scale, and shorter measures
     - the manifesto is set as verse, one clause per line
   ================================================================== */
:root{
  --paper:#F6F4EF; --card:#FFFFFF; --ink:#15171B; --ink2:#3E444D;
  --mut:#6E747E; --line:#E4DFD5; --line2:#EFEBE3;
  --amber:#E8B33C; --accent:#8A5A05; --onaccent:#241A03;
  --band:#0D0F12; --bandink:#F7F5F1; --bandmut:#9DA3AC; --bandline:#262B33;
  --art:#D8D2C6; --artlit:#B8860B;
  --pad:20px; --maxw:1200px; --r:10px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0D0F12; --card:#14171B; --ink:#F1EFEB; --ink2:#C3C8D0;
    --mut:#8B919B; --line:#242830; --line2:#1B1F25;
    --amber:#E8B33C; --accent:#E8B33C; --onaccent:#241A03;
    --band:#08090B; --bandink:#F1EFEB; --bandmut:#9AA0A9; --bandline:#20242B;
    --art:#232830; --artlit:#E8B33C;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#0D0F12; --card:#14171B; --ink:#F1EFEB; --ink2:#C3C8D0;
  --mut:#8B919B; --line:#242830; --line2:#1B1F25;
  --amber:#E8B33C; --accent:#E8B33C; --onaccent:#241A03;
  --band:#08090B; --bandink:#F1EFEB; --bandmut:#9AA0A9; --bandline:#20242B;
  --art:#232830; --artlit:#E8B33C;
  color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:'Manrope',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:16.5px;line-height:1.66;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  transition:background .25s ease,color .25s ease;
}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%}
.shell{width:100%;max-width:var(--maxw);margin:0 auto;
  padding-left:max(var(--pad),env(safe-area-inset-left));
  padding-right:max(var(--pad),env(safe-area-inset-right))}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:var(--amber);color:var(--onaccent);padding:12px 16px;z-index:99;border-radius:6px}

.eyebrow{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0 0 14px}
.eyebrow--band{color:var(--amber)}

/* header, carried from B unchanged so the two directions feel like one company */
.hdr{position:sticky;top:0;z-index:40;background:color-mix(in oklab,var(--paper) 88%,transparent);
  backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.hdr .shell{display:flex;align-items:center;gap:12px;min-height:64px}
.logo{width:120px;height:auto;aspect-ratio:376.3/53.08;color:var(--ink);display:block}
.nav{display:none;gap:22px;margin-left:26px;font-size:14.5px;font-weight:600;color:var(--ink2)}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink)}
@media (min-width:860px){.nav{display:flex}}
.hdrtools{margin-left:auto;display:flex;align-items:center;gap:10px}
.tt{all:unset;cursor:pointer;width:36px;height:36px;border-radius:8px;border:1px solid var(--line);
  display:grid;place-items:center;color:var(--ink2)}
.tt:hover{color:var(--ink);border-color:var(--ink)}
.tt svg{width:17px;height:17px}
.tt .moon{display:none}
:root[data-theme="dark"] .tt .sun{display:none}
:root[data-theme="dark"] .tt .moon{display:block}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 20px;border-radius:9px;font-weight:700;font-size:15px;letter-spacing:-.01em;
  border:1px solid transparent;cursor:pointer;transition:transform .12s ease,filter .18s ease}
.btn:hover{transform:translateY(-1px)}
.btn--solid{background:var(--ink);color:var(--paper)}
.btn--amber{background:var(--amber);color:var(--onaccent)}
.btn--amber:hover{filter:brightness(1.06)}
.btn--ghost{border-color:var(--line);color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink)}
.btn--onband{border-color:var(--bandline);color:var(--bandink)}
.btn--onband:hover{border-color:var(--bandink)}
/* A ghost button on a dark band must not inherit the light theme's --ink and --line,
   or it renders near-black on near-black and reads as a disabled control. Scoped by
   container rather than by remembering to add .btn--onband at every call site, which
   is how the hero button was invisible in the first render. */
.hero .btn--ghost,.close .btn--ghost,.manifesto .btn--ghost{
  border-color:var(--bandline);color:var(--bandink)}
.hero .btn--ghost:hover,.close .btn--ghost:hover,.manifesto .btn--ghost:hover{
  border-color:var(--bandink)}
@media (max-width:640px){.hdrtools .btn--solid{display:none}}

/* ---------- hero: a dark band in BOTH themes, which is the whole point of D ---------- */
.hero{background:var(--band);color:var(--bandink);padding:64px 0 60px;
  border-bottom:1px solid var(--bandline);position:relative;overflow:hidden}
.hero .shell{position:relative;z-index:1}
.hero h1{
  font-size:clamp(40px,10.5vw,92px);line-height:.98;letter-spacing:-.04em;font-weight:800;
  margin:0;text-wrap:balance;color:var(--bandink)
}
.hero h1 span{color:var(--amber);display:block}
.hero .sub{color:var(--bandmut);font-size:clamp(16px,2.1vw,19px);line-height:1.58;
  margin:22px 0 0;max-width:54ch}
.actions{display:flex;flex-wrap:wrap;gap:11px;margin:30px 0 0}
.actions--center{justify-content:center}
.trust{display:flex;flex-wrap:wrap;gap:8px 20px;margin:30px 0 0;padding:0;
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--bandmut)}
.trust b{color:var(--amber);font-weight:500}

/* ---------- the wall section ---------- */
.wall{padding:58px 0;background:var(--paper);border-bottom:1px solid var(--line)}
.wall h2{font-size:clamp(28px,6.4vw,46px);line-height:1.06;letter-spacing:-.03em;
  font-weight:800;margin:0 0 14px;text-wrap:balance}
.wall .lede{color:var(--ink2);font-size:17px;line-height:1.6;margin:0;max-width:56ch}
.walls{list-style:none;margin:30px 0 0;padding:0;border-top:1px solid var(--line)}
.walls li{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:baseline;
  padding:17px 0;border-bottom:1px solid var(--line);font-size:16.5px;line-height:1.5;color:var(--ink2)}
.walls .wt{display:block}
.walls b{color:var(--ink);font-weight:700}
.wn{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;letter-spacing:.14em;
  color:var(--accent)}
.wallkick{margin:22px 0 0;font-size:clamp(18px,3.2vw,24px);line-height:1.34;
  font-weight:700;letter-spacing:-.02em;color:var(--ink);max-width:40ch}

/* ---------- the manifesto, set as verse ---------- */
.manifesto{background:var(--band);color:var(--bandink);padding:66px 0}
.mline{
  margin:0 0 14px;max-width:26ch;
  font-size:clamp(23px,5.2vw,40px);line-height:1.16;letter-spacing:-.03em;font-weight:800;
  color:var(--bandink);text-wrap:balance
}
.mline--mut{color:var(--bandmut);font-weight:600;font-size:clamp(17px,3.3vw,25px);
  letter-spacing:-.02em;max-width:34ch}
.mline--hit{color:var(--amber)}
.mline:last-child{margin-bottom:0}

/* ---------- sections ---------- */
.sec{padding:58px 0}
.sec--alt{background:var(--card);border-block:1px solid var(--line)}
.sec h2{font-size:clamp(28px,6.4vw,46px);line-height:1.06;letter-spacing:-.03em;
  font-weight:800;margin:0 0 14px;text-wrap:balance}
/* direct-child scoping, per docs/process/visual-change-gate.md step 2: a bare
   `.sec p` also matches the paragraphs inside .free and .tgrid */
.sec .shell > .lede{color:var(--ink2);font-size:17px;line-height:1.6;margin:0;max-width:56ch}
/* consecutive ledes ran together into one block of grey on the About page, because the
   single-paragraph case sets margin:0. Space only BETWEEN them, so the first still sits
   tight under its heading. */
.sec .shell > .lede + .lede{margin-top:15px}

.free{display:grid;grid-template-columns:1fr;margin:30px 0 0;border-top:1px solid var(--line)}
.frow{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:baseline;
  padding:17px 0;border-bottom:1px solid var(--line)}
.frow .fk{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);min-width:104px}
.frow .fv{font-size:17px;font-weight:700;color:var(--ink);letter-spacing:-.015em}
.frow .fv small{display:block;font-weight:400;font-size:15px;color:var(--mut);margin-top:5px;
  letter-spacing:0;line-height:1.5}

.tgrid{display:grid;grid-template-columns:1fr;margin:30px 0 0;border-top:1px solid var(--line)}
.trow{display:grid;grid-template-columns:1fr;gap:4px;padding:16px 0;border-bottom:1px solid var(--line)}
.trow .tw{font-size:17px;font-weight:700;color:var(--ink);letter-spacing:-.015em;line-height:1.35}
.trow .tn{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.06em;
  color:var(--mut)}
@media (min-width:820px){
  .trow{grid-template-columns:1.25fr 1fr;gap:20px;align-items:baseline}
  .trow .tn{text-align:right}
}

/* ---------- the closing statement ---------- */
.close{background:var(--band);color:var(--bandink);padding:72px 0;text-align:center}
.closeline{margin:0;font-size:clamp(30px,7.2vw,62px);line-height:1.02;letter-spacing:-.04em;
  font-weight:800;color:var(--bandink);text-wrap:balance}
.billkick{margin:16px 0 0;font-size:clamp(20px,4.4vw,36px);line-height:1.12;letter-spacing:-.03em;
  font-weight:800;color:var(--amber);text-wrap:balance}
.closesub{margin:26px auto 0;max-width:40ch;color:var(--bandmut);font-size:16.5px;line-height:1.55}

/* ---------- footer ---------- */
.ftr{padding:40px 0 56px;border-top:1px solid var(--line);background:var(--paper)}
.flogo{width:34px;height:auto;aspect-ratio:110.4/78.2;color:var(--mut);display:block;margin:0 0 14px}
.ftr p{margin:0;color:var(--mut);font-size:14.5px;line-height:1.55;max-width:52ch}

@media (min-width:860px){
  .hero{padding:96px 0 88px}
  .wall,.sec{padding:80px 0}
  .manifesto{padding:96px 0}
  .free{grid-template-columns:1fr}
}

/* ==================================================================
   Sub pages. D carries the same five pages as B and C, so the two
   directions can be compared like for like rather than a homepage
   against a site.
   ================================================================== */

/* page head, the quieter counterpart to the home hero */
.phead{padding:52px 0 8px}
.phead h1{font-size:clamp(32px,7.4vw,58px);line-height:1.04;letter-spacing:-.035em;
  font-weight:800;margin:0;text-wrap:balance}
.phead .sub{color:var(--ink2);font-size:17.5px;line-height:1.6;margin:18px 0 0;max-width:56ch}

/* capability cards. Four, not six, per docs/05-copy-review.md standing
   recommendation 6: "Six is a taxonomy, four is a story." */
.vgrid{display:grid;grid-template-columns:1fr;gap:12px;margin:28px 0 0}
.vcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px 20px}
.vcard h3{margin:0 0 8px;font-size:19px;font-weight:800;letter-spacing:-.015em;color:var(--ink)}
.vcard .vlead{margin:0 0 8px;font-size:16.5px;font-weight:700;color:var(--ink);
  letter-spacing:-.012em;line-height:1.35}
.vcard p{margin:0;font-size:15.5px;line-height:1.55;color:var(--mut);max-width:none}
@media (min-width:760px){.vgrid{grid-template-columns:1fr 1fr}}
.pfoot{margin:18px 0 0;font-size:14.5px;color:var(--mut);max-width:58ch}

/* the comparison. Scoped rows so .sec styles cannot reach inside. */
.cmp{margin:28px 0 0;border-top:1px solid var(--line)}
.crow{display:grid;grid-template-columns:1fr;gap:4px;padding:16px 0;border-bottom:1px solid var(--line)}
.crow .ck{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent)}
.crow .cold{color:var(--mut);font-size:15.5px;line-height:1.45;text-decoration:line-through;
  text-decoration-color:color-mix(in oklab,var(--mut) 55%,transparent)}
.crow .cnew{color:var(--ink);font-size:16.5px;font-weight:700;letter-spacing:-.015em;line-height:1.4}
@media (min-width:820px){
  .crow{grid-template-columns:120px 1fr 1fr;gap:18px;align-items:baseline}
}

.wallsub{margin:10px 0 0;color:var(--ink2);font-size:16.5px;line-height:1.55;max-width:52ch}
.closeline span{color:var(--amber);display:inline-block}

/* footer nav */
.fnav{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0 0 14px;font-size:14.5px;
  font-weight:600;color:var(--ink2)}
.fnav a:hover{color:var(--ink)}

/* the invitation form, lifted from the live site so the handler contract
   and /assets/site.js behaviour are unchanged */
.form{margin-top:28px;display:flex;flex-direction:column;gap:18px;max-width:36rem}
.form label{display:block;font-size:14px;font-weight:700;letter-spacing:-.01em;
  color:var(--ink);margin:0 0 7px}
.form input,.form textarea{width:100%;padding:13px 14px;border-radius:9px;
  border:1px solid var(--line);background:var(--card);color:var(--ink);
  font-family:inherit;font-size:16px;line-height:1.5}
.form textarea{min-height:120px;resize:vertical}
.form input:focus-visible,.form textarea:focus-visible{outline:2px solid var(--accent);
  outline-offset:1px;border-color:var(--accent)}
.hint{display:block;margin:7px 0 0;font-size:13.5px;color:var(--mut);font-weight:400}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formnote{margin:0;font-size:14px;color:var(--mut);max-width:44ch}
.failnote,.err{margin:0;font-size:14.5px;color:#B3261E;font-weight:600}
:root[data-theme="dark"] .failnote,:root[data-theme="dark"] .err{color:#F2B8B5}
.cta{align-self:flex-start}

/* ==================================================================
   Mobile menu. Below 860px the .nav is display:none and there was no
   alternative, so a phone had no navigation at all: every page was a
   dead end apart from the logo and the CTA.
   ================================================================== */
.burger{all:unset;cursor:pointer;width:36px;height:36px;border-radius:8px;
  border:1px solid var(--line);display:grid;place-items:center;color:var(--ink2)}
.burger:hover{color:var(--ink);border-color:var(--ink)}
.burger svg{width:19px;height:19px}
@media (min-width:860px){.burger{display:none}}

.mnav{
  position:fixed;left:0;right:0;top:64px;bottom:0;z-index:39;
  background:var(--paper);border-top:1px solid var(--line);
  padding:14px max(var(--pad),env(safe-area-inset-left))
          calc(20px + env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;gap:4px;overflow-y:auto
}
.mnav[hidden]{display:none}
.mnav__links{display:flex;flex-direction:column}
.mnav__links a{
  padding:15px 2px;border-bottom:1px solid var(--line2);
  font-size:19px;font-weight:700;letter-spacing:-.02em;color:var(--ink)
}
.mnav__links a[aria-current="page"]{color:var(--accent)}
.mnav__cta{margin:18px 0 0;align-self:flex-start}
/* Lock the page behind the panel, otherwise the body scrolls under it on iOS. */
:root.navopen,:root.navopen body{overflow:hidden}
@media (min-width:860px){.mnav{display:none}}

/* ==================================================================
   Line art, carried from B and C so the three directions share one
   visual language.

   D's hero is a dark band in BOTH themes, so the art cannot use --art
   and --artlit: those are tuned against the paper background and go
   near-invisible on the band in light theme, which is the same mistake
   the ghost button made. Band-specific strokes instead.
   ================================================================== */
/* On MOBILE the art sits in the flow, under the hero copy and centred. It used to be
   display:none below 1000px, carried over from B without asking whether it suited D. The
   consequence was that the home page was the ONLY page with no graphic on a phone, while
   every sub page showed its signal wave, and the home page is the one that matters most.
   Bleeding it off the right edge only works where there is desktop whitespace to bleed into,
   so the narrow treatment is a different layout rather than the same one scaled down. */
.art{display:block;position:relative;width:min(300px,76%);height:auto;margin:34px auto 0;
     opacity:.65;pointer-events:none}
@media (min-width:1000px){
  .art{position:absolute;right:-120px;top:50%;transform:translateY(-50%);
       width:640px;margin:0;opacity:.5;z-index:0}
}
.art .grid{stroke:var(--bandline)}
.art .spiral{stroke:var(--amber)}
.art .node{fill:var(--amber)}
#bpulse{offset-path:path("M20 200 L220 0 L420 200 L220 400 Z");offset-distance:0%;
  animation:orbit 22s linear infinite}
@keyframes orbit{to{offset-distance:100%}}
@media (prefers-reduced-motion:reduce){#bpulse{animation:none;offset-distance:12%}}

/* the signal line that closes each sub page head */
.phead{position:relative;overflow:hidden}
.phead .shell{position:relative;z-index:1}
/* Each sub page carries its OWN drawing in this slot, not a shared wave: platform converges
   many lines into one, connect brings four in to a junction, about is a route with waypoints,
   invitation is a line reaching a door. Same box, same strokes, different argument.
   preserveAspectRatio is "none", so the art stretches on x. Every node is therefore a short
   vertical tick drawn as a path; a <circle> would stretch into an ellipse. */
.sigline{width:100%;height:56px;display:block;margin:28px 0 0}
.sigline .base{stroke:var(--line)}
.sigline .lit{stroke:var(--accent)}
.sigline .tick{stroke:var(--accent);opacity:.55}