/* ============================================================
   Sub-page primitives. Loaded after site.css on every page except
   the home. Reuse it, do not edit it; report gaps instead.

   THEMES
   Sections already carry a colour block from site.css
   (.s-sea .s-paper .s-signal .s-night, and .final for coral).
   Everything below reads these custom properties, set once per
   block, so every component works on dark and on light:
     --p-ink     body text            --p-dim    secondary text
     --p-strong  emphasis             --p-rule   hairlines
     --p-accent  names, markers       --p-link   links in prose
     --p-bad / --p-good  problem and success colours
     --p-fill    quiet panel fill     --p-field  input fill
     --p-edge    input border (3:1)   --p-ph     placeholder
     --p-focus   focus ring
   Retune one block with .acc-mint, .acc-flag or .acc-signal.

   COMPONENTS (class names, markup in the comment above each)
     1  Page hero ............ .phero .phero-grid .phero-main .phero-side .phero-art
     1b Jump list ............ .jump
     2  Section helpers ...... .sec-top .sec-body .prob (use with .split from site.css)
     3  Ruled feature rows ... .frows .frow (.why .frows--2 .frows--tint .frows--soon)
     3b Callout panel ........ .callout (--signal --mint --ink)
     3c Three voices ......... .vs .vs-us
     4  Soon block ........... .frows--soon + .more to changelog.html#next
     5  FAQ .................. .faqs .faq .faq-a
     6  Next question ........ .nextq (inside .final-act)
     7  Prose ................ .prose (.pmeta .tablewrap)
     8  Forms ................ .form .field .help .err .ok .form-banner .form-success
     9  Doodle helpers ....... .doodle--s/m/l .doodle--live (chalk on dark is automatic)
   ============================================================ */

:root{
  --p-ink:var(--chalk); --p-dim:var(--chalk-dim); --p-strong:var(--chalk);
  --p-rule:var(--rule); --p-accent:var(--signal); --p-link:var(--signal);
  --p-bad:var(--flag-text); --p-good:var(--mint);
  --p-fill:rgba(238,242,234,.06); --p-field:var(--ink); --p-edge:#5E8A92;
  --p-ph:#8FB0B0; --p-focus:var(--signal);
  --p-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M9 2.5V15M3.5 9.5L9 15l5.5-5.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --p-plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M11 3v16M3 11h16' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
  --p-minus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M3 11h16' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
}
.s-paper{
  --p-ink:var(--sea); --p-dim:#2E4247; --p-strong:var(--sea);
  --p-rule:var(--paper-rule); --p-accent:var(--flag-deep); --p-link:var(--flag-deep);
  --p-bad:var(--flag-deep); --p-good:var(--mint-deep);
  --p-fill:rgba(13,43,51,.06); --p-field:#FCFAF2; --p-edge:#5C7377;
  --p-ph:#5E6F70; --p-focus:var(--sea);
}
.s-signal{
  --p-ink:var(--sea); --p-dim:#2B3A33; --p-strong:var(--sea);
  --p-rule:rgba(13,43,51,.28); --p-accent:var(--sea); --p-link:var(--sea);
  --p-bad:#8A2B1B; --p-good:var(--mint-deep);
  --p-fill:rgba(13,43,51,.08); --p-field:#FFF7DA; --p-edge:rgba(13,43,51,.72);
  --p-ph:#5B5A3C; --p-focus:var(--sea);
}
.final{
  --p-ink:var(--sea); --p-dim:var(--sea); --p-strong:var(--sea);
  --p-rule:rgba(13,43,51,.3); --p-accent:var(--sea); --p-link:var(--sea);
  --p-focus:var(--sea);
}
.acc-mint{--p-accent:var(--mint)}
.acc-flag{--p-accent:var(--flag-text)}
.acc-signal{--p-accent:var(--signal)}
.s-paper.acc-mint{--p-accent:var(--mint-deep)}
.s-paper.acc-flag{--p-accent:var(--flag-deep)}

section[id]{scroll-margin-top:8px}

/* ---------- 1. page hero ----------
   <header class="phero"><div class="wrap phero-grid">
     <div class="phero-main"><h1>…</h1> [<p class="lede">…</p>]</div>
     <div class="phero-side"> [<p class="lede">…</p>] [<nav class="jump">…</nav>] [<svg class="doodle phero-art">] </div>
   </div></header>
   H1 left, one lede, one right-hand element. Columns bottom-align; add .phero-grid--top when the side column is the taller one. Put the lede under the H1 or in the
   side column, whichever the page needs. Stacks under 1000px. */
.phero{padding:56px 0 76px}
.phero-grid{display:grid;gap:30px 56px;align-items:end}
@media(min-width:1000px){.phero-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}
.phero-grid--top{align-items:start}
.phero h1{font-size:clamp(40px,6vw,80px);max-width:13ch}
.phero .lede{margin-top:0;max-width:44ch;font-size:clamp(18px,1.5vw,21px);line-height:1.5}
.phero-main .lede{margin-top:26px}
.phero-side{min-width:0}
.phero-art{width:min(320px,100%);margin-left:auto}
@media(max-width:999px){.phero-art{margin-left:0}}

/* 1b. jump list: a ruled index of in-page anchors.
   <nav class="jump" aria-label="On this page"><a href="#x">Label</a>…</nav> */
nav.jump{display:grid;border-top:2px solid var(--p-ink)}
.jump a{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:50px;padding:6px 2px;border-bottom:1px solid var(--p-rule);text-decoration:none;font-weight:700;font-size:17px;letter-spacing:-.01em;transition:color .18s}
.jump a::after{content:"";flex:none;width:18px;height:18px;background:currentColor;-webkit-mask:var(--p-arrow) center/contain no-repeat;mask:var(--p-arrow) center/contain no-repeat;transition:transform .2s var(--ease)}
.jump a:hover{color:var(--p-accent)}
.jump a:hover::after{transform:translateY(3px)}

/* ---------- 2. section helpers ----------
   Split section (head left, content right) is site.css's .split + .sec-head.
   .prob is the problem the visitor has, set under an H2 in the head. It reads as the
   thing the rows below make go away.
   Stacked section: <div class="wrap"><div class="sec-top"><h2>…</h2><p class="lede">…</p></div> …content… </div> */
.sec-top{margin-bottom:44px}
.sec-top h2{max-width:20ch}
.sec-body{min-width:0}
.prob{margin-top:18px;max-width:34ch;font-weight:700;font-size:clamp(18px,1.45vw,21px);line-height:1.4;letter-spacing:-.012em;color:var(--p-bad)}
.split .prob{max-width:30ch}
@media(max-width:980px){.split .prob{max-width:46ch}}

/* ---------- 3. ruled feature rows ----------
   <ul class="frows"><li class="frow"><h3>Name.</h3><p>What it does for you.</p></li>…</ul>
   Several paragraphs: <div class="frow-body"><p>…</p><p class="why">The punchline.</p></div>
   The name cell can be a problem ("It forgets.") and the text its fix.
   Wrapper may be a div with article rows. Modifiers:
     .frows--2     two columns, name above text (like the home's eight ways)
     .frows--tint  dark blocks only: names cycle chalk, signal, mint
     .frows--big   large names, for three or four short rows
     .frows--soon  dashed rules, for things not built yet */
.frows{list-style:none;border-top:2px solid var(--p-ink)}
.frow{display:grid;grid-template-columns:minmax(150px,.38fr) minmax(0,1fr);gap:6px 28px;align-items:baseline;padding:18px 0 20px;border-bottom:1px solid var(--p-rule)}
.frow h3{font-weight:800;font-size:clamp(18px,1.6vw,21px);letter-spacing:-.025em;line-height:1.25;color:var(--p-accent)}
.frow p,.frow-body{font-size:16px;line-height:1.5;color:var(--p-dim);max-width:58ch}
.frow-body p+p{margin-top:9px}
.frow .why{font-weight:700;color:var(--p-strong)}
.frow code{white-space:nowrap}

.frows--2{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;border-top:0}
.frows--2 .frow{display:block;border-top:1px solid var(--p-rule);border-bottom:0}
.frows--2 .frow:nth-child(-n+2){border-top:2px solid var(--p-ink)}
.frows--2 .frow p{margin-top:5px}
@media(max-width:700px){.frows--2{grid-template-columns:1fr}.frows--2 .frow:nth-child(2){border-top:1px solid var(--p-rule)}}

.frows--tint .frow:nth-child(1) h3{color:var(--chalk)}
.frows--tint .frow:nth-child(2) h3{color:var(--signal)}
.frows--tint .frow:nth-child(3) h3{color:var(--mint)}
.frows--tint .frow:nth-child(4) h3{color:var(--flag-text)}

.frows--big .frow{grid-template-columns:minmax(200px,.5fr) minmax(0,1fr);align-items:center;padding:26px 0 28px}
.frows--big .frow h3{font-size:clamp(24px,2.6vw,34px);letter-spacing:-.035em;line-height:1.1}
.frows--big .frow p{font-size:clamp(17px,1.4vw,19px)}
@media(max-width:640px){.frow,.frows--big .frow{grid-template-columns:1fr;gap:4px}}

.frows--soon{border-top-style:dashed}
.frows--soon .frow{border-bottom-style:dashed;padding:14px 0 16px}
.frows--soon .frow h3{color:var(--p-ink)}

/* 3b. callout: a filled panel inside a flow. Coral by default (needs you).
   <aside class="callout"><p>One bold statement.</p><svg class="doodle">…</svg></aside> */
.callout{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 36px;align-items:center;padding:28px 30px;margin:22px 0;background:var(--flag);color:var(--sea)}
.callout p{max-width:20ch;font-weight:800;font-size:clamp(21px,2.1vw,28px);line-height:1.18;letter-spacing:-.03em;color:inherit}
.callout .doodle{width:min(300px,100%);color:var(--sea)}
.callout--signal{background:var(--signal)}
.callout--mint{background:var(--mint)}
.callout--ink{background:var(--ink);color:var(--chalk)}
.callout--ink .doodle{color:var(--chalk)}
@media(max-width:700px){.callout{grid-template-columns:1fr;padding:22px 20px}.callout .doodle{width:min(240px,100%)}}

/* 3c. three voices: two plain columns and one filled "us" panel.
   <div class="vs"><p><b>Them</b> sentence.</p><p><b>Them too</b> sentence.</p><p class="vs-us"><b>ShipItFam</b> sentence.</p></div> */
.vs{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:0 36px;align-items:stretch}
.vs>*{padding:20px 0 0;border-top:2px solid var(--p-ink);font-size:clamp(17px,1.4vw,19.5px);line-height:1.45;color:var(--p-ink);max-width:none}
.vs b{font-weight:800;letter-spacing:-.02em}
.vs>.vs-us{padding:24px 28px 30px;border-top:0;background:var(--sea);color:var(--chalk);font-size:clamp(18px,1.55vw,21px)}
.vs>.vs-us b{color:var(--signal)}
@media(max-width:900px){.vs{grid-template-columns:1fr;gap:26px}}

/* ---------- 4. soon block ----------
   One block per site, on Features: a night section holding
   <ul class="frows frows--soon"> and <a class="more" href="changelog.html#next">See the roadmap …</a>. */

/* ---------- 5. FAQ ----------
   <div class="faqs"><details class="faq"><summary>Question?</summary><div class="faq-a"><p>Answer.</p></div></details>…</div>
   Native details: keyboard and screen reader behaviour come free. */
.faqs{border-top:2px solid var(--p-ink)}
.faq{border-bottom:1px solid var(--p-rule)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:58px;padding:14px 2px;font-weight:800;font-size:clamp(17px,1.5vw,20px);letter-spacing:-.02em;line-height:1.3;transition:color .18s}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:22px;height:22px;background:currentColor;-webkit-mask:var(--p-plus) center/contain no-repeat;mask:var(--p-plus) center/contain no-repeat;transition:transform .25s var(--ease)}
.faq[open] summary::after{-webkit-mask-image:var(--p-minus);mask-image:var(--p-minus)}
.faq summary:hover{color:var(--p-accent)}
.faq-a{padding:0 2px 22px;max-width:62ch;color:var(--p-dim);font-size:16.5px;line-height:1.6}
.faq-a p+p{margin-top:10px}
.faq-a a{color:var(--p-link)}

/* ---------- 6. next question ----------
   <div class="final-act"><a class="btn" href="waitlist.html">Join waitlist</a>
   <a class="nextq" href="x.html"><span>Next question: …?</span> <b>Page <i aria-hidden="true">&rarr;</i></b></a></div>
   Sits under the button in the closing band; also fine at the end of a text page. */
@media(min-width:821px){.final .wrap{grid-template-columns:minmax(0,1fr) minmax(0,390px)}}
/* site.js drops the rope through the text once the band is one column, so it rests below 821px */
.final-act{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.nextq{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;min-height:44px;padding:6px 0;max-width:42ch;color:inherit;text-decoration:none;font-size:16px;line-height:1.4;font-weight:500}
.nextq b{font-weight:800;white-space:nowrap;border-bottom:2px solid currentColor}
.nextq i{font-style:normal;display:inline-block;transition:transform .2s var(--ease)}
.nextq:hover i{transform:translateX(4px)}

/* ---------- 7. prose: text pages ----------
   <div class="prose"><h2>…</h2><p>…</p><ul>…</ul></div> inside any colour block.
   Measure is 68ch. Wide tables sit in <div class="tablewrap">. Byline: <p class="pmeta">12 October 2026</p> */
.prose{max-width:68ch;color:var(--p-ink)}
.prose>*+*{margin-top:1.1em}
.prose h2{max-width:none;margin-top:2.2em;font-size:clamp(26px,2.7vw,36px);line-height:1.1;letter-spacing:-.035em}
.prose h3{margin-top:1.9em;font-weight:800;font-size:clamp(19px,1.8vw,22px);letter-spacing:-.025em;line-height:1.25}
.prose h2+*,.prose h3+*{margin-top:.6em}
.prose>:first-child{margin-top:0}
.prose p,.prose li{font-size:clamp(16.5px,1.25vw,18px);line-height:1.65}
.prose strong,.prose b{font-weight:800;color:var(--p-strong)}
.prose a{color:var(--p-link);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.prose a:hover{text-decoration-color:var(--p-accent)}
.prose ul,.prose ol{padding-left:1.4em}
.prose li+li{margin-top:.5em}
.prose ul>li::marker{color:var(--p-accent)}
.prose ol>li::marker{color:var(--p-accent);font-family:var(--mono);font-weight:700;font-size:.9em}
.prose code{padding:.08em .38em;background:var(--p-fill);border-radius:2px;overflow-wrap:anywhere}
.prose pre{padding:16px 18px;overflow-x:auto;background:var(--ink);color:var(--chalk);font-family:var(--mono);font-size:14px;line-height:1.55;border-radius:3px}
.prose pre code{padding:0;background:none}
.prose blockquote{padding:20px 24px;background:var(--p-fill);font-weight:700;font-size:1.12em;line-height:1.45;letter-spacing:-.012em}
.prose blockquote p{font-size:inherit;line-height:inherit}
.prose hr{height:0;border:0;border-top:2px solid var(--p-rule);margin:2.4em 0}
.prose .tablewrap{overflow-x:auto}
.prose table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.45}
.prose th{font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;text-align:left;padding:10px 14px 10px 0;border-bottom:2px solid var(--p-ink);vertical-align:bottom}
.prose td{padding:12px 14px 12px 0;border-bottom:1px solid var(--p-rule);vertical-align:top;font-variant-numeric:tabular-nums}
.pmeta{font-family:var(--mono);font-size:13px;color:var(--p-dim);letter-spacing:.02em}
.prose .pmeta{font-size:13px}

/* ---------- 8. forms ----------
   <form class="form" novalidate>
     <div class="field is-error"><label for="e">Email</label>
       <input id="e" type="email" aria-invalid="true" aria-describedby="e-h e-err">
       <p class="help" id="e-h">Why we ask.</p><p class="err" id="e-err">What to change.</p></div>
     <p class="form-banner" role="alert">Failure line.</p>
     <div class="form-actions"><button class="btn" type="submit">Join waitlist</button></div>
   </form>
   States: .is-error (or aria-invalid), .is-ok, :disabled, button [aria-busy="true"].
   Success replaces the form: <div class="form-success" tabindex="-1"><h2>…</h2><p>…</p></div> */
.form{max-width:560px}
.field{display:grid;gap:7px;margin-top:20px}
.field:first-child{margin-top:0}
.field label,.field legend{font-weight:700;font-size:16px;letter-spacing:-.01em;color:var(--p-strong)}
.field .opt{font-weight:500;color:var(--p-dim)}
.field input:not([type=checkbox]):not([type=radio]),.field textarea,.field select{width:100%;min-height:48px;padding:11px 14px;font:inherit;font-size:16px;line-height:1.4;color:var(--p-ink);background:var(--p-field);border:2px solid var(--p-edge);border-radius:3px;caret-color:var(--p-focus);transition:border-color .18s,background .18s}
.field textarea{min-height:140px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--p-ph);opacity:1}
.field input:not([type=checkbox]):not([type=radio]):hover,.field textarea:hover,.field select:hover{border-color:var(--p-ink)}
.field input:not([type=checkbox]):not([type=radio]):focus,.field textarea:focus,.field select:focus{border-color:var(--p-focus);outline:3px solid var(--p-focus);outline-offset:2px}
.field select{appearance:none;-webkit-appearance:none;padding-right:44px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M3.5 6.5L9 12l5.5-5.5' fill='none' stroke='%23EEF2EA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.s-paper .field select,.s-signal .field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M3.5 6.5L9 12l5.5-5.5' fill='none' stroke='%230D2B33' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.field input,.field textarea,.field select{color-scheme:dark}
.s-paper .field input,.s-paper .field textarea,.s-paper .field select,.s-signal .field input,.s-signal .field textarea,.s-signal .field select{color-scheme:light}
.field input:-webkit-autofill{-webkit-text-fill-color:var(--p-ink);-webkit-box-shadow:0 0 0 100px var(--p-field) inset}
.field .help,.field .count{font-size:14px;line-height:1.45;color:var(--p-dim)}
.field .count{font-family:var(--mono);font-size:13px}
.field .err,.field .ok{display:flex;align-items:flex-start;gap:9px;font-size:14.5px;font-weight:700;line-height:1.4}
.field .err{color:var(--p-bad)}
.field .ok{color:var(--p-good)}
.field .err::before,.field .ok::before{flex:none;width:19px;height:19px;display:grid;place-items:center;margin-top:0;border:2px solid currentColor;font-family:var(--mono);font-weight:700;font-size:12px;line-height:1}
.field .err::before{content:"!"}
.field .ok::before{content:"\2713"}
.field.is-error input:not([type=checkbox]):not([type=radio]),.field.is-error textarea,.field.is-error select,.field [aria-invalid="true"]{border-color:var(--p-bad)}
.field.is-ok input:not([type=checkbox]):not([type=radio]),.field.is-ok textarea,.field.is-ok select{border-color:var(--p-good)}
.field input:disabled,.field textarea:disabled,.field select:disabled,.field input[readonly]{opacity:.62;border-style:dashed;cursor:not-allowed}
.field--check{display:flex;align-items:flex-start;gap:12px}
.field--check input{flex:none;width:22px;height:22px;margin-top:2px;accent-color:var(--p-accent);cursor:pointer}
.field--check label{font-weight:500;cursor:pointer}
.form-actions{display:flex;align-items:center;gap:12px 20px;flex-wrap:wrap;margin-top:26px}
.form-note{font-size:14px;color:var(--p-dim);max-width:44ch}
.form-banner{display:flex;gap:10px;align-items:flex-start;margin-top:22px;padding:14px 16px;background:var(--flag);color:var(--sea);font-weight:700;font-size:15.5px;line-height:1.45}
.form-banner a{color:inherit}
.form-banner--ok{background:var(--mint)}
.btn[disabled],.btn[aria-busy="true"]{opacity:.7;cursor:progress;pointer-events:none}
.btn[aria-busy="true"]::after{content:"";width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:p-spin .8s linear infinite}
@keyframes p-spin{to{transform:rotate(360deg)}}
.form-success{max-width:560px;padding:28px 30px;background:var(--mint);color:var(--sea)}
.form-success:focus{outline:3px solid var(--sea);outline-offset:3px}
.form-success h2{max-width:none;font-size:clamp(26px,3vw,36px)}
.form-success p{margin-top:10px;font-size:17px;font-weight:500}
.form-success a{color:inherit;font-weight:700}

/* ---------- 9. doodle helpers ----------
   Ink on light blocks, chalk on dark blocks, automatically. Size with a modifier, not a width attribute. */
.doodle--s{width:min(190px,100%)}
.doodle--m{width:min(280px,100%)}
.doodle--l{width:min(380px,100%)}
.sec-head .doodle{margin-top:28px}
.doodle text{fill:currentColor;stroke:none;font-family:var(--mono);font-weight:700;filter:url(#rough)}
@media(prefers-reduced-motion:no-preference){
  .doodle--live:hover{animation:peck .5s var(--ease)}
  .doodle--bob:hover{animation:bob 1.2s var(--ease)}
}