/* NoisePoise design system (approved 2026-10-04). docs/analysis/2026-10-04-design-system-proposal.md
   Colour = meaning: lime = go/action/good numbers (never on light grounds), coral = stop/warning only.
   Type: Anton = poster heads · Instrument Serif italic = one accent per heading · Plex Mono = labels/tags ·
   Archivo = sub-heads/buttons · Inter = body. Square edges. Five layouts: split hero, rail, timeline, band, compare. */
:root{
  --forest:#123D33; --deep:#0C2A23; --line-d:#2A5A48;
  --lime:#D7FF3F; --lime-hi:#E6FA8A; --coral:#FF6B4A; --coral-ink:#B8381A;
  --bone:#F4F5F0; --line-l:#D9DCD2; --ink:#0E1512;
  --text-d:#C9D8CF; --text-d2:#93AC9F; --text-l:#3D4A43;
  --poster:'Anton',Impact,sans-serif; --ui:'Archivo',system-ui,sans-serif; --body:'Inter',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace; --accent:'Instrument Serif',Georgia,serif;
  --h1:clamp(52px,8.2vw,104px); --h2:clamp(40px,5.4vw,64px); --h3:clamp(28px,3vw,40px);
  --num:clamp(88px,12vw,176px); --slice:5vw; --pad:clamp(72px,10vw,128px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bone);color:var(--ink);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%}
.w{max-width:1200px;margin:0 auto;padding:0 clamp(16px,3.4vw,40px)}

/* --- Type ------------------------------------------------------------------------------- */
.label{font:500 12px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--lime);margin:0 0 18px}
.on-light .label,.s-bone .label{color:var(--coral-ink)}
.s-lime .label{color:var(--deep)}
.h1,.h2,.h3{font-family:var(--poster);font-weight:400;text-transform:uppercase;line-height:.92;letter-spacing:.004em;margin:0}
.h1{font-size:var(--h1)}
.h2{font-size:var(--h2);max-width:18ch}
.h3{font-size:var(--h3)}
.h1 em,.h2 em,.h3 em{font-family:var(--accent);font-style:italic;text-transform:none;letter-spacing:0;color:var(--lime);font-size:.88em}
.s-bone .h1 em,.s-bone .h2 em,.s-bone .h3 em{color:var(--forest)}
.s-lime .h1 em,.s-lime .h2 em{color:var(--forest)}
.lead{font-size:clamp(18px,1.6vw,20px);line-height:1.6;max-width:58ch;margin:22px 0 0;color:var(--text-d)}
.s-bone .lead{color:var(--text-l)}
.s-lime .lead{color:var(--deep)}
.num{font-family:var(--poster);font-size:var(--num);line-height:.82;display:block}
.go{color:var(--lime)} .stop{color:var(--coral)} .ink{color:var(--ink)}

/* --- Sections ---------------------------------------------------------------------------- */
section{padding:var(--pad) 0;position:relative}
.s-dark{background:var(--forest);color:#EEF3EF}
.s-deep{background:var(--deep);color:#EEF3EF}
.s-bone{background:var(--bone);color:var(--ink)}
.s-lime{background:var(--lime);color:var(--deep)}
/* The diagonal cut at the end of a section, revealing the next one. */
.slice{clip-path:polygon(0 0,100% 0,100% calc(100% - var(--slice)),0 100%);z-index:2;padding-bottom:calc(var(--pad) + var(--slice))}
.slice.rev{clip-path:polygon(0 0,100% 0,100% 100%,0 calc(100% - var(--slice)))}
.slice + section{margin-top:calc(var(--slice) * -1);padding-top:calc(var(--pad) + var(--slice))}

/* --- Nav + buttons ------------------------------------------------------------------------ */
.nav{background:var(--deep);border-bottom:1px solid var(--line-d);position:sticky;top:0;z-index:20}
.nav .w{display:flex;align-items:center;justify-content:space-between;height:68px;gap:20px}
.mark{font-family:var(--poster);font-size:24px;text-transform:uppercase;text-decoration:none;color:#F2F6F3}
.mark i{font-style:normal;color:var(--lime)}
.mark::after{content:"Beta";display:inline-block;margin-left:.55em;padding:4px 8px;border-radius:999px;background:#D7FF3F;color:#0C2A23;font:700 10px/1 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;vertical-align:middle;align-self:center;white-space:nowrap} /* NoisePoise is in beta */
@media(max-width:480px){.mark{position:relative}.mark::after{position:absolute;right:-6px;top:-11px;margin:0;padding:2px 5px;font-size:8px}} /* phones: superscript, takes no width */
.mark{display:inline-flex;align-items:center}
.mark::before{content:"";display:inline-block;width:1.15em;height:1.15em;background:url(/brand/icon-512.png?v=2) center/contain no-repeat;vertical-align:-.22em;margin-right:.45em}
.nav-links{display:flex;align-items:center;gap:24px;font:600 15px var(--ui);color:#C9D8CF}
.nav-links a{text-decoration:none}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--lime)}
.btn{display:inline-flex;align-items:center;gap:10px;font:800 16px var(--ui);text-decoration:none;padding:16px 26px;border:2px solid var(--lime);background:var(--lime);color:var(--deep);cursor:pointer;border-radius:0}
.btn:hover{background:var(--lime-hi);border-color:var(--lime-hi)}
.btn.ghost{background:transparent;color:#EEF3EF;border-color:var(--line-d)}
.btn.ghost:hover{border-color:var(--lime);color:var(--lime)}
.btn.ink{background:var(--deep);border-color:var(--deep);color:var(--lime)}
.s-bone .btn.ghost{color:var(--ink);border-color:var(--ink)}
.nav .btn{padding:11px 18px;font-size:14px}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}

/* --- Pattern 1: split hero ----------------------------------------------------------------- */
.split{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(32px,5vw,72px);align-items:end}
.split .lead{margin-top:0}

/* --- Pattern 2: column rail ---------------------------------------------------------------- */
.rail{display:grid;grid-template-columns:repeat(var(--cols,4),1fr);border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d);margin-top:clamp(48px,6vw,80px)}
.rail > div{padding:28px 26px 34px;border-left:1px solid var(--line-d)}
.rail > div:first-child{border-left:0;padding-left:0}
.rail .tag{font:500 12px var(--mono);letter-spacing:.08em;color:var(--lime);text-transform:uppercase}
.rail .word{font-family:var(--poster);font-size:clamp(34px,3.4vw,46px);line-height:1;text-transform:uppercase;margin:26px 0 14px;color:#F2F6F3}
.rail p{margin:0;font-size:15px;line-height:1.55;color:var(--text-d)}
/* Wrapping rail: 3 per row, rows divided too. */
.rail.wrap{--cols:3}
.rail.wrap > div:nth-child(3n+1){border-left:0;padding-left:0}
.rail.wrap > div:nth-child(n+4){border-top:1px solid var(--line-d)}
.rail .num{font-size:clamp(72px,7vw,104px);margin-top:18px}
.s-bone .rail,.s-bone .rail > div{border-color:var(--line-l)}
.s-bone .rail .tag{color:var(--coral-ink)}
.s-bone .rail .word{color:var(--ink)}
.s-bone .rail p{color:var(--text-l)}

/* --- Pattern 3: timeline ------------------------------------------------------------------- */
.timeline{position:relative;margin-top:clamp(48px,6vw,80px)}
.timeline:before{content:"";position:absolute;left:calc(var(--numw,96px) / 2 - 2px);top:10px;bottom:10px;width:4px;background:var(--line-d);transform-origin:top;transform:scaleY(var(--drawn,1));transition:transform 1.4s ease}
.t-step{display:grid;grid-template-columns:var(--numw,96px) 1fr;gap:clamp(20px,3vw,40px);align-items:start;padding:22px 0;position:relative}
.t-step .num{font-size:clamp(64px,7vw,96px);text-align:center;background:var(--forest);line-height:.9;padding:4px 0}
.s-deep .t-step .num{background:var(--deep)}
.t-step h3{font:800 clamp(22px,2vw,26px)/1.2 var(--ui);margin:6px 0 8px;color:#F2F6F3}
.t-step p{margin:0;max-width:56ch;color:var(--text-d)}
.status{display:inline-block;margin-top:14px;font:600 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:6px 12px;border:1px solid currentColor}
.status.go{color:var(--lime)} .status.stop{color:var(--coral)} .status.dim{color:var(--text-d2)}
.gate-bar{background:var(--lime);color:var(--deep);font:700 13px var(--mono);letter-spacing:.16em;text-transform:uppercase;padding:18px 26px;margin:18px calc(clamp(16px,3.4vw,40px) * -1);position:relative;z-index:1}
.gate-bar.stop{background:var(--coral);color:#1A0904}

/* --- Pattern 4: number band (one per page, on lime) --------------------------------------- */
.band{display:grid;grid-template-columns:repeat(var(--cols,4),1fr);border:2px solid var(--deep);margin-top:clamp(40px,5vw,64px)}
.band > div{padding:30px 28px 34px;border-left:2px solid var(--deep)}
.band > div:first-child{border-left:0}
.band .num{font-size:clamp(72px,8vw,120px);color:var(--deep)}
.band .word{font-family:var(--poster);font-size:clamp(26px,2.4vw,34px);text-transform:uppercase;margin:24px 0 10px;line-height:1}
.band p{margin:0;font-size:15px;color:var(--deep)}

/* --- Pattern 5: compare -------------------------------------------------------------------- */
.compare{width:100%;border-collapse:collapse;margin-top:clamp(40px,5vw,64px);border:2px solid var(--ink);background:#fff}
.compare th,.compare td{text-align:left;vertical-align:top;padding:18px 20px;border-bottom:1px solid var(--line-l);font-size:16px}
.compare th{font:500 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-l);background:var(--bone)}
.compare td:first-child{font-weight:700;width:24%}
.compare th:last-child,.compare td:last-child{background:var(--forest);color:#F2F6F3;font-weight:600}
.compare th:last-child{color:var(--lime)}
.compare tr:last-child td{border-bottom:0}

/* --- Picker (chips) + result panel ---------------------------------------------------------
   Founder's pick (2026-10-04): selectable tags are soft pills on a rounded white card, the one
   place we round corners. Saved answer = YOU, changed answer = PAST → NEW, then a save bar. */
.picker{background:#fff;border:1px solid #DDE0D6;border-radius:12px;padding:22px}
.group{margin-bottom:18px}.group:last-of-type{margin-bottom:0}
.group h4{font:600 12px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:#5C6B63;margin:0 0 8px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid #DDE0D6;background:var(--bone);border-radius:999px;padding:7px 13px;font:600 14px var(--ui);cursor:pointer;color:var(--ink)}
.chip:hover{border-color:var(--forest)}
.chip[aria-pressed=true]{background:var(--forest);border-color:var(--forest);color:#fff}
.ctag{font:600 10px var(--mono);border-radius:4px;padding:1px 5px;margin-left:6px;vertical-align:1px}
.ctag.you,.ctag.new{background:var(--lime);color:var(--deep)}
.ctag.past{background:transparent;color:#5C6B63;border:1px dashed #9AA49E}
.savebar{display:none;margin-top:22px;padding-top:18px;border-top:1px solid var(--line-l);align-items:center;gap:10px;flex-wrap:wrap}
.savebar.show{display:flex}
.savebar .what{font:600 14px var(--ui);color:var(--text-l);margin-right:auto}
.savebar .what b{color:var(--ink)}
.savebar button{font:800 14px var(--ui);padding:10px 16px;border-radius:999px;cursor:pointer;border:1px solid var(--forest)}
.savebar [data-save]{background:var(--forest);color:#fff}
.savebar [data-undo]{background:#fff;color:var(--forest)}
.savebar [data-msg]{width:100%;font-size:13px;color:var(--coral-ink)}
.saved-note{display:none;margin-top:14px;font:700 13px var(--mono);letter-spacing:.06em;color:var(--forest)}
.saved-note.show{display:block}
.explorer{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(20px,3vw,36px);margin-top:clamp(40px,5vw,64px);align-items:start}
.panel{background:var(--deep);color:#EEF3EF;padding:clamp(24px,3vw,36px);position:sticky;top:88px}
.panel .k{font:500 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-d2)}
.p-row{display:grid;grid-template-columns:clamp(96px,10vw,140px) 1fr;gap:20px;padding:24px 0;border-top:1px solid var(--line-d)}
.p-row:first-child{border-top:0;padding-top:0}
.p-row .num{font-size:clamp(56px,6vw,84px);color:var(--lime)}
.p-row .num.stop{color:var(--coral)}
.p-row h3{font:800 22px/1.25 var(--ui);margin:6px 0;color:#fff}
.p-row p{margin:4px 0 0;color:var(--text-d);font-size:15px}
.p-row ul{margin:10px 0 0;padding-left:18px;color:var(--text-d);font-size:15px}
.verdict{margin-top:14px;font:600 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:9px 12px;border:1px solid}
.verdict.stop{color:var(--coral);border-color:var(--coral)} .verdict.go{color:var(--lime);border-color:var(--lime)}
.panel .btn{margin-top:22px}

/* --- Welcome bar ----------------------------------------------------------------------------- */
.welcome{display:none;background:var(--lime);color:var(--deep)}
.welcome.show{display:block}
.welcome .w{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;padding-top:14px;padding-bottom:14px;font:700 15px var(--ui)}
.welcome a{font:800 14px var(--ui);text-decoration:none;border:2px solid var(--deep);padding:7px 13px;margin-left:6px}
.welcome a.solid{background:var(--deep);color:var(--lime)}

/* --- FAQ + footer ---------------------------------------------------------------------------- */
.faq{margin-top:clamp(36px,4vw,56px);border-top:2px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line-l)}
.faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:56px 1fr 32px;gap:12px;align-items:baseline;padding:24px 0;font:800 clamp(19px,1.8vw,22px)/1.3 var(--ui)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .n{font:500 12px var(--mono);color:var(--coral-ink);letter-spacing:.08em}
.faq summary:after{content:"+";font:400 28px var(--mono);color:var(--forest);text-align:right}
.faq details[open] summary:after{content:"−"}
.faq p{margin:0 0 26px 68px;max-width:64ch;color:var(--text-l)}
.foot{background:var(--deep);color:var(--text-d2);padding:44px 0;font-size:14px;border-top:1px solid var(--line-d)}
.foot .w{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.foot a{text-decoration:none}.foot a:hover{color:var(--lime)}

/* --- Motion (off for reduced-motion) -------------------------------------------------------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.timeline:before{transition:none}}

@media(max-width:960px){
  .split,.explorer{grid-template-columns:1fr}
  .rail,.band{grid-template-columns:1fr 1fr}
  .rail > div:nth-child(odd){border-left:0;padding-left:0}
  .rail > div{border-top:1px solid var(--line-d)}
  .band > div:nth-child(odd){border-left:0}
  .band > div{border-top:2px solid var(--deep)}
  .panel{position:static}
}
@media(max-width:600px){
  .rail,.band{grid-template-columns:1fr}
  .rail > div{border-left:0;padding-left:0}
  .band > div{border-left:0}
  .nav-links a:not(.btn){display:none}
  .compare th:nth-child(2),.compare td:nth-child(2){display:none}
  .faq summary{grid-template-columns:36px 1fr 24px}.faq p{margin-left:48px}
  .t-step{--numw:64px}
}

/* Jump links (#how, #who, #situation...): land with the section label ~24px under the sticky 68px nav,
   not below the section's full top padding. Negative scroll margin skips that padding. */
section[id]{scroll-margin-top:calc(92px - var(--pad))}
/* The first section (the hero) sits close under the nav on every page, like the homepage. */
body > section:first-of-type{padding-top:clamp(40px,5vw,64px)}

/* Phones: logo, Get started and a menu button. The panel holds the same links as the desktop nav.
   <details> opens and closes without JavaScript. */
.nav-menu{display:none}
.nav-links a{white-space:nowrap}
.nav-menu summary{list-style:none;cursor:pointer;width:44px;height:44px;display:grid;place-items:center;border:1px solid #2A5A48}
.nav-menu summary::-webkit-details-marker{display:none}
.nav-menu summary span,.nav-menu summary span::before,.nav-menu summary span::after{content:"";display:block;width:20px;height:2px;background:#F2F6F3}
.nav-menu summary span{position:relative}
.nav-menu summary span::before,.nav-menu summary span::after{position:absolute;left:0;transition:transform .15s}
.nav-menu summary span::before{top:-6px}.nav-menu summary span::after{top:6px}
.nav-menu[open] summary span{background:transparent}
.nav-menu[open] summary span::before{top:0;transform:rotate(45deg)}.nav-menu[open] summary span::after{top:0;transform:rotate(-45deg)}
.nav-panel{position:absolute;left:0;right:0;top:100%;background:#0C2A23;border-bottom:1px solid #2A5A48;padding:4px 16px 12px;z-index:30}
.nav-panel a{display:block;padding:14px 4px;border-bottom:1px solid #2A5A48;font:700 17px 'Archivo',system-ui,sans-serif;color:#F2F6F3;text-decoration:none}
.nav-panel a:last-child{border-bottom:0}
.nav-panel .nav-group{margin:14px 4px 2px;font:500 11px/1.4 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;color:#93AC9F}
.nav-panel a[aria-current]{color:#D7FF3F}
@media(max-width:1040px){
  nav.nav{position:sticky}
  nav.nav .w{position:relative}
  .nav-links a:not(.btn){display:none}
  .nav-links{gap:10px}
  .nav-menu{display:block}
  .nav-panel a{display:block!important}
}

/* Desktop dropdown (Claude & ChatGPT): hover or keyboard focus opens it; padding keeps it open while moving down. */
.nav-drop{position:relative;display:inline-flex}
.nav-drop > button{all:unset;cursor:pointer;font:inherit;color:inherit;white-space:nowrap}
.nav-drop > button::after{content:" ▾";font-size:.8em}
.nav-drop > button.on,.nav-drop:hover > button,.nav-drop:focus-within > button{color:#D7FF3F}
.nav-drop-menu{display:none;position:absolute;top:100%;left:-14px;padding-top:12px;z-index:30}
.nav-drop:hover .nav-drop-menu,.nav-drop:focus-within .nav-drop-menu{display:block}
.nav-drop-menu a{display:block;min-width:160px;padding:12px 16px;background:#0C2A23;border:1px solid #2A5A48;border-top-width:0;color:#F2F6F3;text-decoration:none;font:700 15px 'Archivo',system-ui,sans-serif}
.nav-drop-menu a:first-child{border-top-width:1px}
.nav-drop-menu a:hover,.nav-drop-menu a[aria-current]{color:#D7FF3F}
@media(max-width:1040px){.nav-drop{display:none}}