/* site.css v2: the shared design system for every Triage page.
   Loaded AFTER each page's inline <style>, so on equal specificity site.css
   wins. To adjust a component for one page, add one more class or an id in
   your page's <style> (e.g. "#principles .elist h3"), never edit this file.
   Direction "signal to sorted": paper and ink, one vermilion accent, serif
   (Newsreader) for what we say, sans (Inter) for reading, mono (JetBrains Mono)
   only for small labels, eyebrows and numbers. Self-hosted fonts, no CDN.
   Everything here reads the page tokens (--bg --surface --paper --fg --fg2
   --fg3 --border --hover --accent --accent-light --ink --red --green
   --button-text) and so works in light and dark mode without extra rules.

   ==========================================================================
   COMPONENT INDEX (class, then the markup to use)
   ==========================================================================
   Tokens added here: --font-sans --font-serif --font-mono, --lift (card
   shadow), --lift-lg (mockups, panels), --radius (14px) --radius-sm (8px),
   --section-y (vertical section padding), --head-gap (heading to content),
   --ease, --ease-draw, --header-h and --toc-h (set live by site.js),
   --icon-stroke (1.5px, every line icon), and the headline scale:
   --title-hero (the one hero headline per page), --title-section
   (.section-head .sec-title), --title-band (the title on the dark band).
   Use these sizes; do not set headline sizes per page.

   LAYOUT AND RHYTHM
   .section        Standard vertical rhythm for a section.
                   <section class="section" id="..."><div class="wrap">...</div></section>
                   Modifiers: .section--tight (60% padding), .section--flush-top.
   .wrap--narrow / .wrap--wide   Add to .wrap for a 760px / 1240px content column
                   (.wrap alone is 1032px of content).
   .section-head   Eyebrow -> serif title -> intro, in that order:
                   <div class="section-head">
                     <p class="eyebrow">Connect / How it works</p>
                     <h2 class="sec-title">First line.<br><em>Accent line.</em></h2>
                     <p class="sec-intro">One or two sentences.</p>
                   </div>
                   Modifiers: .section-head--split (title left, intro right;
                   stacks < 861px), .section-head--center. <em> in .sec-title
                   (or .display) = italic vermilion accent line.
   .display        Big serif headline for a section opener (h2 or h1).
   .hero-title     The page's hero headline (--title-hero). Existing heroes
                   already get it: .sorter-copy h1 (home), .connect-headline
                   (Connect, Build). <em>/.accent = the italic vermilion line.
   .hero .badges   A row of short mono labels over the hero headline, accent
                   coloured, separated by middots that never start a line:
                   <div class="badges"><span class="badge">Your context</span>...</div>
   .band           Quiet tinted section (paper, hairlines top and bottom):
                   <section class="section band">...</section>
   .band--dark     The dark accent band (use once per page at most). Redefines
                   the tokens inside it, so every component works on it:
                   <section class="section band--dark">...</section>
                   One recipe on every page, light and dark scheme: do not
                   recolour it per page. In the dark scheme it steps below the
                   page (#12100e), with vermilion hairlines top and bottom and
                   one soft accent glow; --band-glow-at (default "80% 30%")
                   moves the glow behind the band's own visual. Its title
                   (.sec-title or .display in its .section-head) is --title-band.
   .band--grid     Adds a faint hairline grid texture to .band / .band--dark.
   .split          Sticky heading column + content column (stacks < 861px):
                   <div class="split"><div class="split-aside">.section-head</div>
                   <div class="split-main">...</div></div>
   .rule           A hairline divider: <hr class="rule">
   .sr-only        Visually hidden, still read by screen readers (text
                   alternatives for diagrams).
   .card           Surface card with --lift: <div class="card">...</div>
                   .card--quiet = paper, no shadow.

   CONTENT COMPONENTS
   .elist          Editorial list: large serif numerals (01, 02...), hairlines.
                   <ol class="elist">
                     <li><p class="elist-k">Trust</p><h3>Heading.</h3><p>Body.</p></li>
                   </ol>
                   Modifiers: .elist--plain (1, 2, 3), .elist--2col (two columns
                   on desktop). Children of <li> may also be wrapped in one <div>.
   .steps          Stepper / timeline. Horizontal on desktop, vertical < 861px.
                   Numbered nodes on a line; if .steps is also .reveal the line
                   draws itself and the nodes pop in, step by step.
                   <ol class="steps reveal">
                     <li class="step"><p class="step-k">Step one</p><h3>Pick</h3><p>...</p></li>
                   </ol>
                   Modifiers: .steps--vertical (always vertical), .steps--dots
                   (small dots, no numbers; good for dated timelines).
                   .step.is-current fills that node with the accent.
   .compare        Two-column comparison, optional row labels. Stacks on phone,
                   where each cell shows its data-label.
                   <div class="compare">
                     <div class="compare-head" aria-hidden="true"><span></span>
                       <span>Done by software</span><span>Done by a person</span></div>
                     <div class="compare-row">
                       <h4 class="compare-label">Guides</h4>
                       <div class="compare-a" data-label="Software"><ul><li>...</li></ul></div>
                       <div class="compare-b" data-label="A person"><ul><li>...</li></ul></div>
                     </div>
                   </div>
                   Modifier: .compare--no-label (rows hold only a and b; the head
                   then has two spans). Column b is the tinted, emphasised one.
   .features       Grid of .feature rows (auto-fit, >= 260px each).
   .feature        Small line icon + text, hairline on top:
                   <div class="features features--3">
                     <div class="feature"><span class="icon" aria-hidden="true"><svg viewBox="0 0 24 24">...</svg></span>
                       <h3>Title</h3><p>Body.</p></div>
                   </div>
                   Modifiers: .features--2 / .features--3 (fixed columns),
                   .feature--stack (icon above the text).
   .icon           Wrapper for an inline 24x24 line icon. The wrapper sets
                   fill:none, stroke:currentColor, round caps, so the <svg>
                   only needs viewBox and shapes. Always aria-hidden.
                   <span class="icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="..."/></svg></span>
                   The default container is this rounded tile. Strokes do not
                   scale with the icon: every 24x24 line icon on the site (in a
                   tile or bare, inline in text) draws at --icon-stroke (1.5px)
                   whatever its size; shapes inside a .draw are left alone.
                   Modifiers: .icon--sm (32px) .icon--lg (60px) .icon--bare (no
                   tile) .icon--ink (fg instead of accent), and .icon--round only
                   for nodes on a timeline or a stepper.
                   Icon shapes (24x24), copy what you need:
                   key       <circle cx="8" cy="15" r="4"/><path d="M11 12l9-9M16.5 6.5l3 3M14 9l2 2"/>
                   lock      <rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3M12 15v2"/>
                   signature <path d="M3 16c2.5 0 3.5-9 6.5-9 2 0 .5 8 2.5 8 1.5 0 2.5-3 4-3 1.2 0 1 2.5 2.5 2.5H21M3 20h18"/>
                   shield    <path d="M12 3l7 3v5.5c0 4.6-3 8-7 9.5-4-1.5-7-4.9-7-9.5V6z"/><path d="M9 12l2.2 2.2L15.5 10"/>
                   check     <path d="M5 12.5l4.5 4.5L19 7.5"/>
                   eye       <path d="M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12z"/><circle cx="12" cy="12" r="3"/>
                   log       <path d="M9 6h11M9 12h11M9 18h11M4.5 6h.01M4.5 12h.01M4.5 18h.01"/>
                   server    <rect x="3.5" y="4" width="17" height="7" rx="2"/><rect x="3.5" y="13" width="17" height="7" rx="2"/><path d="M7.5 7.5h.01M7.5 16.5h.01"/>
                   cloud     <path d="M7 18.5h10a4 4 0 0 0 .6-8 6 6 0 0 0-11.4 1.6A3.5 3.5 0 0 0 7 18.5z"/>
                   home      <path d="M3.5 11L12 4l8.5 7M6 9.5V20h12V9.5M10 20v-5h4v5"/>
                   browser   <rect x="3" y="4.5" width="18" height="15" rx="2"/><path d="M3 9h18M6.5 6.8h.01M9 6.8h.01"/>
                   person    <circle cx="12" cy="8" r="4"/><path d="M4.5 20.5c0-4.1 3.4-7.5 7.5-7.5s7.5 3.4 7.5 7.5"/>
                   people    <circle cx="9" cy="8.5" r="3.5"/><path d="M2.5 20c0-3.6 2.9-6.5 6.5-6.5s6.5 2.9 6.5 6.5M15.5 5a3.5 3.5 0 0 1 0 7M17.5 13.8c2.3.7 4 3 4 6.2"/>
                   branch    <path d="M3 12h5c3.5 0 4.5-6 8-6h5M8 12h13M8 12c3.5 0 4.5 6 8 6h5"/>
                   merge     <path d="M3 6h5c3.5 0 4.5 6 8 6h5M3 12h18M3 18h5c3.5 0 4.5-6 8-6"/>
                   clock     <circle cx="12" cy="12" r="8.5"/><path d="M12 7.5V12l3 2"/>
                   question  <circle cx="12" cy="12" r="8.5"/><path d="M9.6 9.6a2.5 2.5 0 1 1 3.4 2.3c-.6.3-1 .8-1 1.5v.4M12 16.8h.01"/>
                   flag      <path d="M5.5 21V4M5.5 4.5h11l-2.2 4 2.2 4h-11"/>
                   book      <path d="M4.5 18.5V5.5a2 2 0 0 1 2-2h13v15h-13a2 2 0 0 0 0 4h13v-4"/>
                   wrench    <path d="M15 3.5a5 5 0 0 0-4.6 6.9L3.8 17a1.9 1.9 0 0 0 2.7 2.7l6.6-6.6A5 5 0 0 0 20.2 8l-3 3-3.2-.9-.9-3.2 3-3z"/>
                   pen       <path d="M4.5 19.5l1-4.2L15.8 5a2.1 2.1 0 0 1 3 3L8.7 18.5z"/><path d="M13.8 7l3 3"/>
                   trend     <path d="M3.5 17l5-5 4 3.5L20 8M15 8h5v5"/>
                   arrow     <path d="M5 12h14M13 6l6 6-6 6"/>
   .prices         Price cards in a grid (auto-fit, >= 250px each). Prices for
                   people and households include VAT; say so in a .price-note.
                   <div class="prices">
                     <article class="price-card"><p class="price-k">For yourself</p>
                       <p class="price"><span class="price-amount">&euro;290</span><span class="price-per">once</span></p>
                       <p class="price-sub">One sentence.</p>
                       <ul class="price-list"><li>Included item</li></ul>
                       <p class="price-cta"><a class="link-arrow" href="...">Label <span aria-hidden="true">&rarr;</span></a></p></article>
                   </div>
                   <p class="price-note">Prices include VAT.</p>
                   .price-card--accent: the emphasised card (accent tab on top).
                   .feature-price: a mono price line inside a .feature.
   .faq            Questions and answers, native <details> (works without JS):
                   <div class="faq"><details class="faq-item"><summary>Question?</summary>
                     <div class="faq-a"><p>Answer.</p></div></details></div>
   .pullquote      A quote from the page's own copy (never invent one):
                   <figure class="pullquote"><blockquote><p>Words.</p></blockquote>
                   <figcaption>Where it is from</figcaption></figure>
                   Modifier: .pullquote--center (big quote mark, centred).
   .mock           Product mockup frame: a calm window with chrome.
                   <figure class="mock-figure">
                     <div class="mock">
                       <div class="mock-bar" aria-hidden="true"><span class="mock-dots"><i></i><i></i><i></i></span>
                         <span class="mock-url">triage / queue</span></div>
                       <div class="mock-body">...</div>
                     </div>
                     <figcaption class="mock-cap">Example queue</figcaption>
                   </figure>
                   In the bar, .mock-title (left-aligned name) can replace .mock-url.
                   Modifiers: .mock--tilt (slight rotation on desktop), .mock--flat
                   (no shadow). Inside .mock-body you can use:
                   .mock-row (flex row with a hairline), .mock-label (mono label),
                   .mock-pill (+ .mock-pill--accent / --ok), .mock-avatar (initial
                   in a circle), .mock-line (skeleton text bar, width via
                   style="--w:60%", aria-hidden).
   .check          The self-check: the visitor ticks what applies, then opens
                   the room with it. A native GET form (no script, no data-*
                   hook): each ticked box adds p=<code> to room/?from=<page>,
                   and the room prefills its first message from them. Codes
                   and texts are the room's own list (room.js,
                   TriageRoom.PROBLEMS); use them word for word.
                   <form class="form check" action="__BASE__room/" method="get">
                     <input type="hidden" name="from" value="home">
                     <fieldset class="check-group"><legend class="check-k">Building with AI</legend>
                       <label class="check-item"><input type="checkbox" name="p" value="demo"><span>A prototype worked, and then it stayed a demo.</span></label>
                     </fieldset>
                     <p class="check-more"><a class="link-arrow" href="...">How ... handles this <span aria-hidden="true">&rarr;</span></a></p>
                     <div class="form-actions"><button class="btn btn-primary btn-block" type="submit">Write to the Triage team <span aria-hidden="true">&rarr;</span></button></div>
                     <p class="form-note">Opens the room with what you ticked.</p>
                   </form>
                   Keep links outside the labels. A ticked item takes the
                   accent tint. Modifier: .check--compact (a short list under
                   another form: hairline on top, p.check-title, p.check-intro,
                   div.check-items holding the labels, a .btn-ghost button).

   ACTIONS AND FORMS
   .btn            Button or link-button: <a class="btn" href="...">Label <span aria-hidden="true">&rarr;</span></a>
                   .btn-primary (vermilion; in the dark scheme a deeper
                   vermilion #c44c35 with white text, 4.7:1, on every page:
                   do not restyle it per page), .btn-ghost (transparent),
                   .btn-lg, .btn-sm, .btn-block. A trailing <span aria-hidden> arrow nudges on hover.
   .link-arrow     Text link with an animated underline and arrow:
                   <a class="link-arrow" href="...">Explore Connect <span aria-hidden="true">&rarr;</span></a>
   .form           A form layout (grid of fields). Add .form-grid for two columns.
                   <form class="form form-grid" data-inv>
                     <input class="hp" type="text" name="website" tabindex="-1" autocomplete="off" aria-hidden="true">
                     <div class="form-field"><label for="x">Your email <span class="form-opt">Optional</span></label>
                       <input id="x" type="email" name="email"></div>
                     <div class="form-field form-field--wide"><label for="y">Message</label><textarea id="y" name="message"></textarea></div>
                     <p class="form-note form-field--wide">Privacy note.</p>
                     <div class="form-actions form-field--wide"><button class="btn btn-primary" type="submit">Send</button></div>
                     <p class="msg form-field--wide" aria-live="polite"></p>
                   </form>
                   Inputs, selects and textareas inside .form (and inside the
                   existing .inv and .learn-form) get the refined field style;
                   .input does the same for a lone control. States: :focus ring,
                   :user-invalid, .msg.ok / .msg.err, and form.done hides the
                   fields and shows only the success message. .hp stays hidden.
                   The page scripts find forms by data-inv / data-learn /
                   data-build and read fields by name, so keep those; the old
                   .inv / .learn-form classes can go once .form replaces them.
   .closing        Closing call-to-action section: copy left, form panel right.
                   <section class="closing" id="invite"><div class="wrap closing-grid">
                     <div class="closing-copy"><p class="eyebrow">...</p>
                       <h2 class="sec-title">Line.<br><em>Accent line.</em></h2>
                       <p class="sec-intro">...</p><p class="closing-note">...</p></div>
                     <div class="closing-panel"><p class="closing-panel-title">Get started</p><form class="form">...</form></div>
                   </div></section>
                   .closing sets its own padding, the page background (--bg)
                   and a hairline on top, so every page ends the same way: the
                   form on the page colour, then the paper footer. Do not add
                   .section.
                   Links inside .closing-note are underlined, so they read as
                   links without relying on colour.

   MOTION (site.js; all of it shows the final state under reduced motion)
   .reveal         Fades and lifts in when scrolled into view (adds .in).
                   Variants: .reveal--fade (no lift), .reveal--scale.
   .stagger        On a parent: its .reveal children enter one after another.
                   data-stagger="0.12" sets the step in seconds (default .08).
   .draw           On an <svg>, <g> or shape: its strokes draw themselves when
                   the nearest .reveal ancestor (or the svg itself) comes into
                   view. data-draw-stagger="0.2" draws the shapes in sequence;
                   style="--draw-delay:.4s" / "--draw-dur:2s" per shape.
                   Put diagrams inside a .reveal. Avoid vector-effect on .draw shapes.
   .draw-dot       Shapes that fade and scale in after the lines (nodes, dots);
                   use style="--draw-delay:.8s".
   JS API          window.TriageSite.reveal(el) wires up .reveal / .draw added
                   later inside el; TriageSite.reducedMotion is true when the
                   visitor asked for less motion.

   SHARED CHROME (identical on every page; do not restyle per page)
   .site-header    Sticky header: .brand, a .nav-toggle button and nav.site-nav
                   (aria-current="page" marks the page). On phones the nav is a
                   native popover sheet (no JS needed) and the brand shows the part
                   you are in. Keep the header text exactly as it is: the content
                   check reads "Triage Triage:Connect Triage:Learn ..." as one run.
                   The bar is near opaque (95%, 97% once scrolled), so it stays
                   the page colour over the dark band too; no script needed.
   .group-heading  The part title bar under the header on Connect, Learn, Build:
                   <div class="wrap group-heading"><span class="group-number">01</span>
                     <h1>Triage:Connect</h1><span class="group-description">One-liner.</span></div>
                   Outlined numeral, serif title, one-liner on the right and a
                   hairline under it; below 781px the one-liner is hidden.
   .site-footer    Footer: brand + tagline, the three parts with one-liners,
                   principles/about. Same rule: the DOM order is fixed, the grid
                   places the pieces. The site footer is nav.foot-grid.foot-grid--home:
                   brand and tagline | "The three parts" | "Behind Triage"
                   (.foot-label-more, then .foot-more with Our principles and
                   About) with "The lines it holds to" (.foot-lines, 01 to 06)
                   under it. Mark the current part with aria-current="page".
   .toc            In-page contents bar under the header (learn.html).

   NOTE FOR PAGE DESIGNERS: content_check.py joins text that has no sentence
   punctuation between elements into one "sentence" (for example a row of
   labels, or a button label followed by the next heading). Moving such text
   is fine; putting new text in the middle of such a run makes it "missing".
   ========================================================================== */

/* Each family comes in two subsets: latin (always loaded) and latin-ext, fetched only when a
   page uses a character from it (Romanian ă, ș, ț in names and places). Newsreader has a real
   italic, so the italic headline lines are drawn, not slanted. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/inter.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('fonts/newsreader.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('fonts/newsreader-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 200 800; font-display: swap; src: url('fonts/newsreader-italic.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 200 800; font-display: swap; src: url('fonts/newsreader-italic-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap; src: url('fonts/jetbrains-mono.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap; src: url('fonts/jetbrains-mono-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --lift: 0 1px 0 var(--border), 0 18px 40px -26px #2929252e;
  --lift-lg: 0 0 0 1px color-mix(in srgb, var(--border) 70%, transparent), 0 2px 4px -2px #2929251a, 0 36px 70px -34px #29292547;
  --radius: 14px;
  --radius-sm: 8px;
  --section-y: clamp(76px, 10vw, 136px);
  --head-gap: clamp(36px, 4.6vw, 60px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-draw: cubic-bezier(.45, .05, .2, 1);
  --icon-stroke: 1.5px;
  /* the headline scale: one size per role, on every page */
  --title-hero: clamp(2.6rem, 5vw, 4.3rem);
  --title-section: clamp(2.2rem, 4.2vw, 3.3rem);
  /* the dark band's heading usually sits in a split (a narrower column), so it
     steps just under the section titles; never larger than they are */
  --title-band: clamp(2.2rem, 3.5vw, 3rem);
}
@media (max-width: 600px) { :root { --title-hero: clamp(2.2rem, 10.6vw, 2.7rem); } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --lift: 0 0 0 1px color-mix(in srgb, var(--border) 75%, transparent), 0 18px 40px -26px #000c;
  --lift-lg: 0 0 0 1px var(--border), 0 36px 70px -34px #000e;
} }
:root[data-theme="dark"] {
  --lift: 0 0 0 1px color-mix(in srgb, var(--border) 75%, transparent), 0 18px 40px -26px #000c;
  --lift-lg: 0 0 0 1px var(--border), 0 36px 70px -34px #000e;
}

/* ---- type ------------------------------------------------------------- */
/* overflow-x:hidden on body makes body a scroll container and silently breaks
   every position:sticky inside it; clip stops sideways scroll without that. */
body { overflow-x: clip; }
body { font-family: var(--font-sans); font-feature-settings: 'cv11', 'ss01'; letter-spacing: -0.005em; }
p, li, dd { text-wrap: pretty; }

h1, .sec-title, .connect-headline, .learn-headline, .offering-card h2,
.bridge h2, #principles .cell h4, .scales-head h3, .workshop-intro h3,
.learn-ownership h3, .about-name h3, .knowledge-contexts > h3,
.learning-people h3, .roles h3, .wdw-head h3, .knowledge-example-head h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: -0.018em;
}
h1, .connect-headline, .learn-headline { font-weight: 450; letter-spacing: -0.028em; line-height: 1.04; }
.sec-title { font-weight: 450; line-height: 1.12; }

/* The italic accent lines were Georgia; Newsreader carries them now. */
h1 em, h1 .accent, .connect-headline .accent, .learn-headline em, .learn-heading .learn-headline em, .bridge h2 em,
.invite-card .sec-title em, .hero-note span:last-child, #box .sec-title, .pillar-ico {
  font-family: var(--font-serif);
}

/* Labels stay mono, and only labels. */
.eyebrow, .tag, .cell .k, .queue-label, .queue-foot, .preview-caption, .source-label,
.offering-number, .course-audience, .knowledge-label, .group-number, .badge,
.roles span, .scales-grid span, .wdw-cols, .wdw-k, .about-list span, .learning-cycle article > span {
  font-family: var(--font-mono);
}

.lede, .sec-intro { line-height: 1.7; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ---- surfaces: fewer outlines, more depth ------------------------------ */
.offering-card, .pillar, .roles article, .scales-grid article, .learn-course,
.about-person, .knowledge-example, .learning-profile, .wdw, .invite-card form, .queue-card {
  border-color: transparent;
  box-shadow: var(--lift);
}
.offering-card:hover, .learn-course:hover { box-shadow: 0 1px 0 var(--accent), 0 24px 50px -28px #b9412e40; }

/* Anchors land below the sticky header (and the contents bar, where there is one). */
[id], section { scroll-margin-top: calc(var(--header-h, 60px) + var(--toc-h, 0px) + 20px); }

/* ==========================================================================
   LAYOUT AND RHYTHM
   ========================================================================== */
.wrap--narrow { max-width: 808px; }
.wrap--wide { max-width: 1288px; }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * .6); }
.section--flush-top { padding-top: 0; }

.section-head { max-width: 760px; margin-bottom: var(--head-gap); }
.section-head > .eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; font-size: 11px; letter-spacing: .16em; }
.section-head > .eyebrow::before { content: ''; flex: none; width: 20px; height: 1px; background: currentColor; }
.section-head .sec-title { margin: 0 0 20px; font-size: var(--title-section); line-height: 1.08; text-wrap: balance; }
.section-head .sec-intro { margin: 0; max-width: 620px; font-size: 1.03rem; color: var(--fg2); }
.section-head .sec-intro + .sec-intro { margin-top: 14px; }
.sec-title em, .display em { font-style: italic; font-weight: 400; color: var(--accent); }
.section-head--split { max-width: none; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 0 clamp(32px, 6vw, 80px); align-items: end; }
.section-head--split > .eyebrow { grid-column: 1 / -1; }
.section-head--split .sec-title { margin: 0; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center > .eyebrow { justify-content: center; }
.section-head--center > .eyebrow::after { content: ''; flex: none; width: 20px; height: 1px; background: currentColor; }
.section-head--center .sec-intro { margin-inline: auto; }
.display { font-family: var(--font-serif); font-weight: 450; font-size: clamp(2.6rem, 5.4vw, 4.4rem); line-height: 1.04; letter-spacing: -.028em; text-wrap: balance; }

/* ---- the hero: one headline size, one badge row -------------------------- */
/* The hero headline role. The list names the heroes already on the site, so a
   page never needs its own size (the phone size is in --title-hero). */
:is(.hero-title, .sorter-copy h1, .connect-headline) { font-size: var(--title-hero); }
/* Badges: accent mono labels with generated middots. Every badge carries its
   dot in front; the row reaches one dot-width into the gutter and clips that
   strip, so the dot at the start of each line is never seen, however the row
   wraps. The labels stay plain text (the dots are unspoken). */
.hero .badges {
  --badge-sep: 1.9em;
  display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 6px 0;
  margin: 0 0 26px calc(-1 * var(--badge-sep)); padding: 0;
  clip-path: inset(-6px 0 -6px var(--badge-sep));
  font: 500 11px/1.5 var(--font-mono);
}
.hero .badge {
  display: block; margin: 0 -.15em 0 0; padding: 0; border: 0; border-radius: 0; background: none;
  font: inherit; letter-spacing: .15em; text-transform: uppercase; white-space: nowrap; color: var(--accent);
}
.hero .badge::before {
  content: '\00b7' / ''; display: inline-block; width: var(--badge-sep); height: auto; margin: 0; border-radius: 0;
  background: none; opacity: 1; text-align: center; letter-spacing: 0; color: var(--fg3);
}
@media (max-width: 540px) { .hero .badges { font-size: 10.5px; } .hero .badge { letter-spacing: .13em; margin-right: -.13em; } }

.band { background: var(--paper); border-block: 1px solid var(--border); }
.band--dark {
  color-scheme: dark;
  --bg: #22211e; --surface: #2b2a26; --paper: #282723; --fg: #f4f0e7; --fg2: #cbc5b9; --fg3: #afa799;
  --border: #3f3d37; --hover: #34332d; --accent: #f0a089; --accent-light: #3c2b25; --ink: #f3c5b7;
  --red: #ffa08c; --green: #a9c99c; --button-text: #1e1e1c;
  --lift: 0 0 0 1px var(--border), 0 18px 40px -26px #000c;
  --lift-lg: 0 0 0 1px var(--border), 0 36px 70px -34px #000e;
  background: var(--bg); color: var(--fg); border: 0;
}
/* Dark scheme: the page is already dark (#1e1e1c), so the band gets a plane of
   its own. One recipe for every page: it steps well below the page, keeps the
   warm ink tone, is edged top and bottom by vermilion hairlines, and carries
   one soft accent glow (--band-glow-at moves it); its .band--grid lines are a
   touch stronger so the texture survives on the deeper ground. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .band--dark {
  --bg: #12100e; --surface: #1d1a17; --paper: #171512; --border: #34322c; --hover: #25221e;
  background: radial-gradient(ellipse 58% 72% at var(--band-glow-at, 80% 30%), color-mix(in srgb, var(--accent) 9%, transparent), transparent 72%), var(--bg);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--accent) 34%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--accent) 34%, transparent);
} }
:root[data-theme="dark"] .band--dark {
  --bg: #12100e; --surface: #1d1a17; --paper: #171512; --border: #34322c; --hover: #25221e;
  background: radial-gradient(ellipse 58% 72% at var(--band-glow-at, 80% 30%), color-mix(in srgb, var(--accent) 9%, transparent), transparent 72%), var(--bg);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--accent) 34%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--accent) 34%, transparent);
}
.band--dark ::selection { background: var(--accent); color: var(--button-text); }
/* The band's own title: one size on every page (see --title-band). */
.band--dark .section-head :is(.sec-title, .display) { font-size: var(--title-band); line-height: 1.08; }
.band--grid { position: relative; isolation: isolate; }
.band--grid::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(color-mix(in srgb, var(--fg) 6%, transparent) 1px, transparent 1px),
                    linear-gradient(90deg, color-mix(in srgb, var(--fg) 6%, transparent) 1px, transparent 1px);
  background-size: 56px 56px; background-position: center top;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 75%); mask-image: linear-gradient(to bottom, #000, transparent 75%);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .band--dark.band--grid::before {
  background-image: linear-gradient(color-mix(in srgb, var(--fg) 8%, transparent) 1px, transparent 1px),
                    linear-gradient(90deg, color-mix(in srgb, var(--fg) 8%, transparent) 1px, transparent 1px);
  -webkit-mask-image: linear-gradient(to bottom, #000 10%, transparent 80%); mask-image: linear-gradient(to bottom, #000 10%, transparent 80%);
} }
:root[data-theme="dark"] .band--dark.band--grid::before {
  background-image: linear-gradient(color-mix(in srgb, var(--fg) 8%, transparent) 1px, transparent 1px),
                    linear-gradient(90deg, color-mix(in srgb, var(--fg) 8%, transparent) 1px, transparent 1px);
  -webkit-mask-image: linear-gradient(to bottom, #000 10%, transparent 80%); mask-image: linear-gradient(to bottom, #000 10%, transparent 80%);
}

.split { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 36px clamp(40px, 6.5vw, 104px); align-items: start; }
.split-aside { position: sticky; top: calc(var(--header-h, 60px) + var(--toc-h, 0px) + 36px); }
.split-aside .section-head { margin-bottom: 0; }
.split-main { min-width: 0; }
@media (max-width: 860px) {
  .section-head--split { display: block; }
  .section-head--split .sec-title { margin-bottom: 20px; }
  .split { grid-template-columns: minmax(0, 1fr); }
  .split-aside { position: static; }
}

.rule { height: 0; border: 0; border-top: 1px solid var(--border); margin: 0; }

.card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--lift); padding: clamp(22px, 3vw, 32px); min-width: 0; }
.card--quiet { background: var(--paper); box-shadow: none; }

/* ==========================================================================
   CONTENT COMPONENTS
   ========================================================================== */

/* ---- .elist: editorial list with large serif numerals ----------------- */
.elist { list-style: none; margin: 0; padding: 0; counter-reset: elist; }
.elist > li {
  counter-increment: elist; display: grid; grid-template-columns: clamp(58px, 7.2vw, 96px) minmax(0, 1fr);
  column-gap: clamp(14px, 2.4vw, 30px); padding: clamp(24px, 3vw, 34px) 0; border-top: 1px solid var(--border);
}
.elist > li:last-child { border-bottom: 1px solid var(--border); }
.elist > li::before {
  content: counter(elist, decimal-leading-zero); grid-column: 1; grid-row: 1 / span 8;
  font-family: var(--font-serif); font-weight: 300; font-size: clamp(2.5rem, 4.4vw, 3.5rem); line-height: .86;
  letter-spacing: -.04em; color: var(--accent); font-variant-numeric: lining-nums;
}
.elist > li > * { grid-column: 2; min-width: 0; }
.elist--plain > li::before { content: counter(elist); }
.elist-k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg3); margin: 0 0 10px; }
.elist h3, .elist h4 { font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.35rem, 2.2vw, 1.7rem); line-height: 1.22; letter-spacing: -.015em; color: var(--fg); margin: 0 0 10px; text-wrap: balance; }
.elist p:not(.elist-k) { color: var(--fg2); font-size: .97rem; line-height: 1.72; max-width: 62ch; }
.elist--2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 5vw, 64px); }
.elist--2col > li:last-child { border-bottom: 0; }
@media (max-width: 760px) { .elist--2col { grid-template-columns: minmax(0, 1fr); } .elist--2col > li:last-child { border-bottom: 1px solid var(--border); } }
@media (max-width: 600px) {
  .elist > li { grid-template-columns: 46px minmax(0, 1fr); column-gap: 14px; }
  .elist > li::before { font-size: 2.2rem; }
}

/* ---- .steps: stepper / timeline ---------------------------------------- */
.steps { --steps-gap: clamp(20px, 3vw, 40px); list-style: none; margin: 0; padding: 0; counter-reset: step;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--steps-gap); }
.step { position: relative; counter-increment: step; padding-top: 50px; min-width: 0; }
.step::before {
  content: counter(step); position: absolute; left: 0; top: 0; z-index: 1; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; background: var(--bg); border: 1.5px solid var(--accent); color: var(--accent);
  font: 500 11.5px/1 var(--font-mono); transition: transform .5s var(--ease), opacity .5s var(--ease);
}
.step::after {
  content: ''; position: absolute; top: 15px; left: 40px; right: calc(-1 * var(--steps-gap) + 10px); height: 1px;
  background: color-mix(in srgb, var(--accent) 40%, var(--border)); transform-origin: left center;
  transition: transform .9s var(--ease-draw);
}
.step:last-child::after { display: none; }
.step.is-current::before { background: var(--accent); color: var(--button-text); }
.band .step::before { background: var(--paper); }
.steps--dots .step::before { content: ''; width: 13px; height: 13px; top: 9px; }
.steps--dots .step::after { left: 22px; }
.step-k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg3); margin: 0 0 10px; }
.step h3, .step h4 { font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.3rem, 2vw, 1.55rem); line-height: 1.22; letter-spacing: -.015em; color: var(--fg); margin: 0 0 10px; }
.step p:not(.step-k) { color: var(--fg2); font-size: .95rem; line-height: 1.7; }
/* When the stepper is revealed, the line draws and the nodes arrive in order. */
.steps.reveal .step::before { transform: scale(.5); opacity: 0; }
.steps.reveal .step::after { transform: scaleX(0); }
.steps.reveal.in .step::before { transform: none; opacity: 1; }
.steps.reveal.in .step::after { transform: none; }
.steps .step:nth-child(1)::before { transition-delay: .15s; } .steps .step:nth-child(1)::after { transition-delay: .3s; }
.steps .step:nth-child(2)::before { transition-delay: .55s; } .steps .step:nth-child(2)::after { transition-delay: .7s; }
.steps .step:nth-child(3)::before { transition-delay: .95s; } .steps .step:nth-child(3)::after { transition-delay: 1.1s; }
.steps .step:nth-child(4)::before { transition-delay: 1.35s; } .steps .step:nth-child(4)::after { transition-delay: 1.5s; }
.steps .step:nth-child(5)::before { transition-delay: 1.75s; } .steps .step:nth-child(5)::after { transition-delay: 1.9s; }
.steps .step:nth-child(n+6)::before { transition-delay: 2.1s; } .steps .step:nth-child(n+6)::after { transition-delay: 2.2s; }
/* vertical layout: always with --vertical, and for every stepper on narrow screens */
.steps--vertical { grid-auto-flow: row; gap: 0; }
.steps--vertical .step { padding: 0 0 36px 54px; }
.steps--vertical .step:last-child { padding-bottom: 0; }
.steps--vertical .step::after { top: 38px; bottom: 6px; left: 15px; right: auto; width: 1px; height: auto; transform-origin: center top; }
.steps--vertical.steps--dots .step { padding-left: 38px; }
.steps--vertical.steps--dots .step::before { top: 5px; left: 9px; }
.steps--vertical.steps--dots .step::after { top: 26px; left: 15px; }
.steps--vertical.reveal .step::after { transform: scaleY(0); }
.steps--vertical.reveal.in .step::after { transform: none; }
@media (max-width: 860px) {
  .steps { grid-auto-flow: row; gap: 0; }
  .steps .step { padding: 0 0 34px 52px; }
  .steps .step:last-child { padding-bottom: 0; }
  .steps .step::after { top: 38px; bottom: 6px; left: 15px; right: auto; width: 1px; height: auto; transform-origin: center top; }
  .steps--dots .step { padding-left: 38px; }
  .steps--dots .step::before { top: 5px; left: 9px; }
  .steps--dots .step::after { top: 26px; left: 15px; }
  .steps.reveal .step::after { transform: scaleY(0); }
  .steps.reveal.in .step::after { transform: none; }
}

/* ---- .compare: two-column comparison ----------------------------------- */
.compare { --compare-cols: minmax(110px, .55fr) minmax(0, 1fr) minmax(0, 1fr); min-width: 0; }
.compare--no-label { --compare-cols: minmax(0, 1fr) minmax(0, 1fr); }
.compare-head, .compare-row { display: grid; grid-template-columns: var(--compare-cols); }
.compare-head > span { padding: 0 clamp(16px, 2.4vw, 28px) 16px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg3); }
.compare-head > span:last-child { color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); border-radius: var(--radius-sm) var(--radius-sm) 0 0; padding-top: 16px; }
.compare-head > span:nth-last-child(2) { padding-top: 16px; }
.compare-row > * { padding: clamp(18px, 2.4vw, 26px) clamp(16px, 2.4vw, 28px); border-top: 1px solid var(--border); min-width: 0; }
.compare-row:last-child > * { border-bottom: 1px solid var(--border); }
.compare-label { padding-left: 0 !important; font-family: var(--font-serif); font-weight: 500; font-size: 1.25rem; line-height: 1.3; letter-spacing: -.01em; color: var(--fg); margin: 0; }
.compare-a { color: var(--fg2); }
.compare-b { color: var(--fg); background: color-mix(in srgb, var(--accent) 6%, transparent); }
.compare-row > [data-label]::before { display: none; }
.compare ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.compare li { position: relative; padding-left: 18px; font-size: .94rem; line-height: 1.6; }
.compare li::before { content: ''; position: absolute; left: 0; top: .8em; width: 8px; height: 1px; background: var(--fg3); }
.compare-b li::before { background: var(--accent); }
.compare-row:last-child .compare-b { border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
.compare p { font-size: .94rem; line-height: 1.65; }
@media (max-width: 700px) {
  .compare-head { display: none; }
  .compare-row { grid-template-columns: 1fr; gap: 10px; padding: 22px 0; border-top: 1px solid var(--border); }
  .compare-row:last-child { border-bottom: 1px solid var(--border); }
  .compare-row > *, .compare-row:last-child > * { border: 0; padding: 0; }
  .compare-a, .compare-b { padding: 16px 18px !important; border-radius: var(--radius-sm); }
  .compare-a { background: var(--paper); }
  .band .compare-a { background: var(--bg); }
  .compare-row > [data-label]::before { content: attr(data-label); display: block; margin-bottom: 10px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg3); }
  .compare-b[data-label]::before { color: var(--accent); }
}

/* ---- .features / .feature: small line icon + text ---------------------- */
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: clamp(28px, 4vw, 44px) clamp(24px, 4vw, 52px); }
.features--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.features--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.feature { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; align-content: start; padding-top: 26px; border-top: 1px solid var(--border); min-width: 0; }
.feature > .icon { grid-column: 1; grid-row: 1 / span 6; }
.feature > :not(.icon) { grid-column: 2; min-width: 0; }
.feature h3, .feature h4 { font-family: var(--font-serif); font-weight: 500; font-size: 1.32rem; line-height: 1.25; letter-spacing: -.012em; color: var(--fg); margin: 6px 0 8px; }
.feature p { color: var(--fg2); font-size: .95rem; line-height: 1.7; }
.feature ul { margin: 6px 0 0; padding-left: 1.1em; color: var(--fg2); font-size: .94rem; line-height: 1.65; display: grid; gap: 6px; }
.feature--stack { grid-template-columns: minmax(0, 1fr); }
.feature--stack > .icon { grid-row: auto; margin-bottom: 20px; }
.feature--stack > :not(.icon) { grid-column: 1; }
@media (max-width: 860px) { .features--3 { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .features--2 { grid-template-columns: 1fr; } }

/* ---- .icon: tile for inline SVG line icons ----------------------------- */
.icon { --icon-size: 44px; display: inline-grid; place-items: center; flex: none; width: var(--icon-size); height: var(--icon-size);
  border-radius: 12px; background: var(--paper); color: var(--accent); box-shadow: inset 0 0 0 1px var(--border); }
.icon svg { width: calc(var(--icon-size) * .52); height: calc(var(--icon-size) * .52); display: block; overflow: visible;
  fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round; }
/* One stroke weight for every line icon, whatever size it is drawn at: in a
   tile (.icon) or bare in running text (any 24x24 icon svg). Non-scaling
   strokes keep --icon-stroke in screen pixels. Shapes inside a .draw are left
   alone (the draw uses pathLength, which a non-scaling stroke would break). */
:is(.icon svg, svg[viewBox="0 0 24 24"]) :is(path, line, polyline, polygon, circle, rect, ellipse):not(.draw, .draw *) {
  vector-effect: non-scaling-stroke; stroke-width: var(--icon-stroke);
}
.band .icon { background: var(--surface); }
.icon--sm { --icon-size: 32px; border-radius: 9px; }
.icon--lg { --icon-size: 60px; border-radius: 16px; }
/* only for nodes on a timeline or a stepper; everywhere else the tile above */
.icon--round { border-radius: 50%; }
.icon--bare { background: none; box-shadow: none; }
.icon--bare svg { width: var(--icon-size); height: var(--icon-size); }
.icon--ink { color: var(--fg); }

/* ---- .pullquote -------------------------------------------------------- */
.pullquote { align-self: start; margin: 0; padding: 6px 0 6px clamp(20px, 3vw, 36px); border-left: 2px solid var(--accent); max-width: 860px; }
.pullquote blockquote { margin: 0; }
.pullquote blockquote p { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.5rem, 2.8vw, 2.2rem); line-height: 1.28; letter-spacing: -.016em; color: var(--fg); text-wrap: balance; }
.pullquote blockquote em { color: var(--accent); }
.pullquote figcaption { margin-top: 18px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg3); }
.pullquote--center { border: 0; padding: 0; margin-inline: auto; text-align: center; }
.pullquote--center blockquote::before { content: '\201C'; display: block; height: .5em; margin-bottom: 18px; font: 400 5rem/1 var(--font-serif); color: var(--accent); }

/* ---- .mock: product mockup frame --------------------------------------- */
.mock-figure { margin: 0; min-width: 0; }
.mock { position: relative; min-width: 0; border-radius: var(--radius); background: var(--surface); box-shadow: var(--lift-lg); overflow: hidden; text-align: left; }
.mock-bar { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 14px; background: var(--paper); border-bottom: 1px solid var(--border); }
.mock-dots { display: flex; gap: 6px; flex: none; width: 46px; }
.mock-dots i { width: 9px; height: 9px; border-radius: 50%; background: color-mix(in srgb, var(--fg3) 38%, transparent); }
.mock-bar::after { content: ''; flex: none; width: 46px; }
.mock-url { flex: 1 1 auto; min-width: 0; max-width: 340px; margin: 0 auto; height: 24px; padding: 0 12px; border-radius: 7px; background: var(--bg);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 60%, transparent);
  display: flex; align-items: center; justify-content: center; font: 400 11px/1 var(--font-mono); letter-spacing: .02em; color: var(--fg3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock-title { flex: 1 1 auto; min-width: 0; font-family: var(--font-serif); font-size: 1.02rem; font-weight: 500; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock-body { padding: clamp(16px, 2.4vw, 26px); }
.mock--tilt { transform: rotate(-1.2deg); }
.mock--flat { box-shadow: 0 0 0 1px var(--border); }
.mock-cap { margin-top: 16px; text-align: center; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; color: var(--fg3); }
.mock-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); min-width: 0; }
.mock-row:last-child { border-bottom: 0; }
.mock-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg3); }
.mock-pill { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 4px 9px; border-radius: 999px; background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--border); font: 500 10.5px/1.2 var(--font-mono); letter-spacing: .03em; color: var(--fg2); white-space: nowrap; }
.mock-pill--accent { background: var(--accent-light); box-shadow: none; color: var(--ink); }
.mock-pill--ok { background: color-mix(in srgb, var(--green) 14%, transparent); box-shadow: none; color: var(--green); }
.mock-avatar { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--border); font: italic 500 14px/1 var(--font-serif); color: var(--accent); }
.mock-line { display: block; height: 7px; width: var(--w, 70%); border-radius: 4px; background: var(--hover); }
.mock-line + .mock-line { margin-top: 8px; }
@media (max-width: 860px) { .mock--tilt { transform: none; } }
@media (max-width: 480px) { .mock-dots, .mock-bar::after { width: auto; } .mock-bar::after { display: none; } }

/* ==========================================================================
   ACTIONS AND FORMS
   ========================================================================== */
.btn {
  --btn-bg: var(--surface); --btn-fg: var(--fg); --btn-ring: var(--border);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 0 20px;
  border-radius: 10px; border: 1px solid var(--btn-ring); background: var(--btn-bg); color: var(--btn-fg);
  font: 600 14.5px/1.2 var(--font-sans); letter-spacing: -.006em; text-decoration: none; white-space: nowrap; cursor: pointer;
  box-shadow: 0 1px 1px color-mix(in srgb, var(--fg) 5%, transparent);
  transition: background-color .18s, border-color .18s, box-shadow .2s, color .18s, transform .18s;
}
.btn:hover { --btn-ring: color-mix(in srgb, var(--fg) 28%, var(--border)); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.btn-primary, .btn.primary {
  --btn-bg: var(--accent); --btn-fg: var(--button-text); --btn-ring: var(--accent);
  box-shadow: 0 1px 1px color-mix(in srgb, var(--fg) 8%, transparent), 0 10px 22px -14px color-mix(in srgb, var(--accent) 60%, transparent);
}
.btn-primary:hover, .btn.primary:hover { --btn-bg: color-mix(in srgb, var(--accent) 88%, var(--fg)); --btn-ring: var(--btn-bg); filter: none; transform: translateY(-1px); }
/* Dark scheme: the dark accent (salmon) stays for text and lines; a filled call
   to action keeps the brand vermilion, deepened, with white text (4.7:1). The
   same button on every page and on the dark band. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.btn-primary, .btn.primary) { --btn-bg: #c44c35; --btn-ring: #c44c35; --btn-fg: #fff; box-shadow: 0 1px 1px #0003, 0 12px 26px -14px #c44c3599; }
  :root:not([data-theme="light"]) :is(.btn-primary, .btn.primary):hover { --btn-bg: #b3432e; --btn-ring: #b3432e; }
}
:root[data-theme="dark"] :is(.btn-primary, .btn.primary) { --btn-bg: #c44c35; --btn-ring: #c44c35; --btn-fg: #fff; box-shadow: 0 1px 1px #0003, 0 12px 26px -14px #c44c3599; }
:root[data-theme="dark"] :is(.btn-primary, .btn.primary):hover { --btn-bg: #b3432e; --btn-ring: #b3432e; }
.btn-ghost { --btn-bg: transparent; --btn-fg: var(--fg2); box-shadow: none; }
.btn-ghost:hover { --btn-bg: var(--hover); --btn-fg: var(--fg); }
.btn-lg { min-height: 54px; padding: 0 26px; font-size: 15.5px; border-radius: 12px; }
.btn-sm { min-height: 36px; padding: 0 14px; font-size: 13px; border-radius: 8px; }
.btn-block { display: flex; width: 100%; }
.btn > span[aria-hidden], .btn > .arrow { display: inline-block; transition: transform .2s var(--ease); }
.btn:active { transform: translateY(1px); }
.btn:disabled { cursor: wait; opacity: .7; transform: none; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover > span[aria-hidden], .btn:hover > .arrow { transform: translateX(3px); }
}

.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14.5px; color: var(--accent); text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; padding-bottom: 2px; transition: background-size .3s var(--ease); }
.link-arrow > span[aria-hidden] { display: inline-block; transition: transform .2s var(--ease); }
.link-arrow:hover { background-size: 100% 1px; }
.link-arrow:hover > span[aria-hidden] { transform: translateX(3px); }
.link-arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; }

/* ---- forms ------------------------------------------------------------- */
.hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none; }
.form { display: grid; gap: 18px; min-width: 0; margin: 0; }
.form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; }
.form-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.form-field--wide { grid-column: 1 / -1; }
.form-field > label, .form-label { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13.5px; font-weight: 600; color: var(--fg); }
.form-opt { font: 400 10px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg3); }
.form-hint, .form-note { font-size: 12.5px; line-height: 1.6; color: var(--fg3); }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.form .btn { min-height: 50px; }

.input, :is(.form, .inv, .learn-form) :is(input:not([type=checkbox], [type=radio], [type=hidden], [type=submit], .hp), select, textarea) {
  width: 100%; min-width: 0; min-height: 48px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border);
  background-color: var(--bg); color: var(--fg); font: 400 15px/1.4 var(--font-sans); letter-spacing: -.004em;
  -webkit-appearance: none; appearance: none;
  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--fg) 5%, transparent);
  transition: border-color .15s, box-shadow .2s, background-color .15s;
}
:is(.form, .inv, .learn-form) select:not(.hp), select.input {
  padding-right: 42px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--fg2) 50%), linear-gradient(135deg, var(--fg2) 50%, transparent 50%);
  background-position: calc(100% - 21px) 52%, calc(100% - 16px) 52%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
:is(.form, .inv, .learn-form) textarea:not(.hp), textarea.input { min-height: 132px; line-height: 1.6; resize: vertical; }
:is(.form, .inv, .learn-form) ::placeholder, .input::placeholder { color: var(--fg3); opacity: .85; }
.input:hover, :is(.form, .inv, .learn-form) :is(input:not([type=checkbox], [type=radio], [type=hidden], [type=submit], .hp), select, textarea):hover {
  border-color: color-mix(in srgb, var(--fg) 22%, var(--border));
}
.input:focus, :is(.form, .inv, .learn-form) :is(input:not([type=checkbox], [type=radio], [type=hidden], [type=submit], .hp), select, textarea):focus {
  outline: 2px solid transparent; outline-offset: 2px; border-color: var(--accent); background-color: var(--surface);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent);
}
.input:user-invalid, :is(.form, .inv, .learn-form) :is(input, select, textarea):user-invalid { border-color: var(--red); }
.form .msg { font-size: 13.5px; line-height: 1.55; color: var(--fg2); min-height: 0; margin: 0; }
.form .msg:empty { display: none; }
.form .msg.ok { color: var(--green); }
.form .msg.err { color: var(--red); }
.form.done .form-field, .form.done .form-note, .form.done .form-actions, .form.done > button, .form.done > label,
.form.done > input, .form.done > select, .form.done > textarea { display: none; }
.form.done .msg.ok { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--fg); }
.form.done .msg.ok::before { content: '\2713'; flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  border: 1.5px solid var(--green); color: var(--green); font-size: 14px; line-height: 1; }
@media (max-width: 600px) {
  .form-grid { grid-template-columns: 1fr; }
  .input, :is(.form, .inv, .learn-form) :is(input:not([type=checkbox], [type=radio], [type=hidden], [type=submit], .hp), select, textarea) { font-size: 16px; }
}

/* ---- .closing: closing call-to-action section -------------------------- */
/* On the page colour, so every page ends the same way: the form, then the paper
   footer. No ornament behind it: the panel's vermilion tab is the accent. */
.closing { position: relative; isolation: isolate; padding-block: var(--section-y); background: var(--bg); border-top: 1px solid var(--border); }
.closing-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: clamp(36px, 6vw, 88px); align-items: center; }
.closing-copy > .eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; font-size: 11px; }
.closing-copy > .eyebrow::before { content: ''; flex: none; width: 20px; height: 1px; background: currentColor; }
.closing .sec-title { font-size: clamp(2.4rem, 4.8vw, 3.7rem); line-height: 1.06; letter-spacing: -.028em; margin: 0 0 24px; text-wrap: balance; }
.closing .sec-intro { font-size: 1.05rem; color: var(--fg2); max-width: 520px; margin: 0; }
.closing-note { margin-top: 22px; padding-left: 14px; border-left: 2px solid var(--border); font-size: 13.5px; line-height: 1.65; color: var(--fg3); max-width: 460px; }
.closing-panel { position: relative; min-width: 0; padding: clamp(24px, 3.4vw, 38px); border-radius: calc(var(--radius) + 4px); background: var(--surface); box-shadow: var(--lift-lg); }
.closing-panel::before { content: ''; position: absolute; top: -1px; left: clamp(24px, 3.4vw, 38px); width: 36px; height: 3px; border-radius: 0 0 2px 2px; background: var(--accent); }
.closing-panel-title { font-family: var(--font-serif); font-size: 1.45rem; font-weight: 500; letter-spacing: -.012em; color: var(--fg); margin: 0 0 22px; }
@media (max-width: 860px) {
  .closing-grid { grid-template-columns: 1fr; }
}
.closing-note a { color: var(--fg2); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent);
  text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .2s, text-decoration-color .2s; }
.closing-note a:hover { color: var(--accent); text-decoration-color: var(--accent); }

/* ---- .check: the self-check -------------------------------------------- */
/* A plain GET form to the room: it reads as a list with scripts off and needs
   none to work. The label is the whole target (at least 44px high); the
   checkbox inside it keeps its native behaviour and keyboard handling. */
.check { display: grid; gap: 0; min-width: 0; margin: 0; }
/* min-width: 0, or a fieldset refuses to shrink below its longest line on a phone */
.check-group { display: grid; gap: 6px; min-width: 0; margin: 0 0 18px; padding: 0; border: 0; }
.check-k { margin: 0 0 8px; padding: 0; font: 500 10.5px/1.4 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg3); }
.check-items { display: grid; gap: 6px; min-width: 0; }
.check-item { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 11px 14px; border-radius: var(--radius-sm);
  background: var(--bg); box-shadow: inset 0 0 0 1px var(--border); font-size: 14.5px; line-height: 1.5; color: var(--fg2); cursor: pointer;
  transition: background-color .15s, box-shadow .15s, color .15s; }
@media (hover: hover) { .check-item:hover { background: var(--hover); } }
.check-item:has(input:checked) { background: var(--accent-light); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent); color: var(--fg); }
.check-item:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.check-item input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent); cursor: pointer; }
/* the label carries the focus ring where :has() works; elsewhere the checkbox keeps its own */
@supports selector(:has(*)) { .check-item input:focus-visible { outline: none; } }
.check-more { margin: -6px 0 20px; font-size: 13px; }
.check-more .link-arrow { font-size: 13px; }
.check .form-actions { margin-top: 2px; }
.check .form-note { margin: 14px 0 0; }
.check--compact { padding-top: 24px; border-top: 1px solid var(--border); }
.check-title { margin: 0 0 6px; font-family: var(--font-serif); font-size: 1.2rem; font-weight: 500; line-height: 1.3; letter-spacing: -.01em; color: var(--fg); }
.check-intro { margin: 0 0 16px; font-size: 14px; line-height: 1.6; color: var(--fg2); }
.check--compact .check-item { font-size: 13.5px; }
.check--compact > .btn { justify-self: start; margin-top: 16px; }
@media (prefers-reduced-motion: reduce) { .check-item { transition: none; } }

/* ==========================================================================
   SHARED CHROME: header, footer, contents bar
   ========================================================================== */
/* Near opaque: at 86% the dark band showed through as a muddy grey. At 95% (97%
   once scrolled) the bar stays the page colour over anything, dark band
   included, with only a hint of what passes under it. No script needed. */
.site-header {
  position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 95%, transparent);
  -webkit-backdrop-filter: saturate(1.2) blur(8px); backdrop-filter: saturate(1.2) blur(8px);
  transition: box-shadow .3s ease, background-color .3s ease;
}
.site-header.is-scrolled { background: color-mix(in srgb, var(--bg) 97%, transparent); box-shadow: 0 14px 30px -26px #29292566; }
/* Keep the bar 60px and the mark where it was: h2.io shares these dimensions. */
.site-header .nav { display: flex; align-items: stretch; justify-content: space-between; gap: 20px; height: 60px; flex-wrap: nowrap; }
.site-header .brand { align-self: center; }
.brand { color: var(--fg); }
.brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; border-radius: 6px; }
/* The nav is a popover (the phone menu); on wider screens it is simply shown in the bar. */
.site-nav { position: static; inset: auto; width: auto; height: auto; margin: 0; padding: 0; border: 0; overflow: visible; background: none; color: var(--fg2);
  display: flex; align-items: stretch; gap: clamp(18px, 2.4vw, 30px); font-size: 14px; letter-spacing: -.004em; }
.site-nav a { position: relative; display: flex; align-items: center; color: var(--fg2); white-space: nowrap; text-decoration: none; transition: color .15s; }
.site-nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px 2px 0 0; background: var(--border);
  transform: scaleX(0); transform-origin: left center; transition: transform .28s var(--ease), background-color .2s; }
.site-nav a:hover { color: var(--fg); }
.site-nav a:hover::after { transform: scaleX(1); }
.site-nav a[aria-current="page"] { color: var(--accent); font-weight: 600; }
.site-nav a[aria-current="page"]::after { transform: scaleX(1); background: var(--accent); }
.site-nav a:focus-visible { outline: none; }
.site-nav a:focus-visible::before { content: ''; position: absolute; inset: 15px -8px; border-radius: 7px; box-shadow: 0 0 0 2px var(--accent); }
.nav-sep { align-self: center; width: 1px; height: 18px; background: var(--border); }
.nav-toggle { display: none; align-self: center; place-items: center; width: 42px; height: 42px; margin-right: -6px; padding: 0; border: 0; border-radius: 10px;
  background: transparent; color: var(--fg); cursor: pointer; transition: background-color .15s; }
.nav-toggle:hover { background: var(--hover); }
.nav-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.nav-toggle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.nav-toggle .nt-close { display: none; }
@media (max-width: 860px) { .site-nav .nav-sep, .site-nav .nav-aside { display: none; } }

/* Phone: brand (plus the part you are in) and a menu button; the nav opens as a sheet. */
@supports selector(:popover-open) {
  @media (max-width: 640px) {
    .nav-toggle { display: grid; }
    .site-nav:not(:popover-open) { display: none; }
    .site-nav:popover-open {
      position: fixed; inset: var(--header-h, 61px) 0 auto 0; width: auto; max-height: calc(100dvh - var(--header-h, 61px)); overflow: auto; margin: 0;
      display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 6px 24px 26px;
      background: var(--bg); color: var(--fg); border-bottom: 1px solid var(--border); box-shadow: 0 34px 60px -34px #0006;
    }
    .site-nav:popover-open::backdrop { top: 61px; background: #1e1e1c38; }
    .site-nav:popover-open a { padding: 17px 0 17px 26px; border-bottom: 1px solid var(--border);
      font-family: var(--font-serif); font-size: 1.55rem; font-weight: 450; letter-spacing: -.015em; color: var(--fg); }
    .site-nav:popover-open a::after { left: 1px; right: auto; top: 50%; bottom: auto; width: 10px; height: 10px; margin-top: -7px; border-radius: 50%;
      background: transparent; border: 1.5px solid color-mix(in srgb, var(--accent) 55%, var(--border)); transform: none; }
    .site-nav:popover-open a[aria-current="page"] { color: var(--accent); font-weight: 500; }
    .site-nav:popover-open a[aria-current="page"]::after { background: var(--accent); border-color: var(--accent); }
    .site-nav:popover-open .nav-aside { display: flex; border-bottom: 0; font-family: var(--font-sans); font-size: 15px; letter-spacing: 0; color: var(--fg2); }
    .site-nav:popover-open .nav-aside::after { display: none; }
    .site-nav:popover-open a:focus-visible::before { inset: 8px -8px; }
  }
}
@supports selector(:popover-open) and selector(:has(a)) {
  @media (max-width: 640px) {
    .site-header:has(.site-nav:popover-open) .nt-open { display: none; }
    .site-header:has(.site-nav:popover-open) .nt-close { display: block; }
    /* Name the part you are in next to the brand; the nav already says it, so no alt text. */
    .site-header:has(a[href$="connect/"][aria-current="page"]) .brand-name::after { content: ':Connect' / ''; color: var(--accent); }
    .site-header:has(a[href$="learn/"][aria-current="page"]) .brand-name::after { content: ':Learn' / ''; color: var(--accent); }
    .site-header:has(a[href$="build/"][aria-current="page"]) .brand-name::after { content: ':Build' / ''; color: var(--accent); }
  }
}
/* Without popover support the links wrap to a second row instead. */
@supports not selector(:popover-open) {
  @media (max-width: 640px) {
    .site-header .nav { flex-wrap: wrap; height: auto; min-height: 60px; row-gap: 0; }
    .site-header .brand { height: 60px; }
    .site-nav { width: 100%; height: 40px; gap: 18px; font-size: 13px; overflow-x: auto; }
  }
}

/* ---- part title bar (Connect 01, Learn 02, Build 03) ---------------------- */
/* The same on every part page and at every width: an outlined numeral, the part
   name in serif, its one-liner on the right, and a hairline on the content
   column (.group-heading is also the .wrap, hence the 24px insets). The rules
   are complete on purpose (a page's own variant of the bar does not survive). */
.group-heading { position: relative; display: flex; align-items: center; gap: 17px; padding-top: 44px; padding-bottom: 28px; border-bottom: 0; }
.group-heading::after { content: ''; display: block; position: absolute; left: 24px; right: 24px; bottom: 0; height: 1px; background: var(--border); }
.group-heading :is(h1, h2) { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal;
  margin: 0; font-family: var(--font-serif); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 600; line-height: 1.3;
  letter-spacing: -.03em; text-transform: none; color: var(--fg); }
.group-heading .group-number { display: grid; place-items: center; flex: none; width: 37px; height: 37px; border: 1px solid var(--accent); border-radius: 50%;
  font: 500 12px/1 var(--font-mono); letter-spacing: 0; color: var(--accent); }
.group-heading .group-number::after { content: none; }
.group-heading .group-description { display: block; margin-left: auto; font: 400 .82rem/1.5 var(--font-sans); letter-spacing: 0; color: var(--fg2); }
.group-heading .group-description::before { content: none; }
/* Phones and small tablets: the same bar, tighter; the one-liner is dropped (the
   hero under it says more). */
@media (max-width: 780px) {
  .group-heading { gap: 14px; padding-top: 32px; padding-bottom: 24px; }
  .group-heading :is(h1, h2) { font-size: 1.5rem; }
  .group-heading .group-number { width: 34px; height: 34px; font-size: 11.5px; }
  .group-heading .group-description { display: none; }
}

.site-footer { position: relative; padding: clamp(60px, 8vw, 96px) 0 clamp(40px, 5vw, 64px); background: var(--paper); border-top: 1px solid var(--border); color: var(--fg2); font-size: 14px; line-height: 1.6; }
.site-footer::before { content: ''; position: absolute; top: -1px; left: max(24px, calc(50% - 516px)); width: 36px; height: 2px; background: var(--accent); }
/* The columns are the same for both footers, so the three parts sit at the
   same x on every page. */
.foot-grid {
  display: grid; column-gap: clamp(32px, 5vw, 72px); row-gap: 0; align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr);
  grid-template-areas: "home lparts ." "tag p1 m1" "tag p2 m2" "tag p3 m3";
}
.foot-home { grid-area: home; display: inline-flex; justify-self: start; }
.foot-tagline { grid-area: tag; margin: 28px 0 0; font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.7rem, 2.7vw, 2.2rem); line-height: 1.12; letter-spacing: -.022em; color: var(--fg); }
.foot-tagline span, .foot-tagline em { display: block; }
.foot-tagline em { font-style: italic; color: var(--accent); }
.foot-label { grid-area: lparts; align-self: end; margin-bottom: 14px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg3); }
/* Each part: the link fills its cell (so the description is clickable too), the description sits under the name. */
.fp-1, .fd-1 { grid-area: p1; } .fp-2, .fd-2 { grid-area: p2; } .fp-3, .fd-3 { grid-area: p3; }
.fl-1 { grid-area: m1; } .fl-2 { grid-area: m2; } .fl-3 { grid-area: m3; }
.foot-part { position: relative; z-index: 1; align-self: stretch; padding: 10px 0 0 30px; color: var(--fg); text-decoration: none;
  font-family: var(--font-serif); font-size: 1.3rem; font-weight: 500; line-height: 1.3; letter-spacing: -.01em; transition: color .2s; }
.foot-part::before { content: ''; position: absolute; left: 0; top: 18px; width: 11px; height: 11px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--accent); transition: background-color .2s; }
.foot-desc { position: relative; margin: 0; padding: 43px 0 20px 30px; font-size: 13.5px; line-height: 1.55; color: var(--fg2); pointer-events: none; transition: color .2s; }
.foot-desc::before { content: ''; position: absolute; left: 5px; top: 29px; bottom: -19px; width: 1px; background: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.fd-3::before { display: none; }
.foot-part:hover { color: var(--accent); }
.foot-part:hover::before { background: var(--accent); }
.fp-1:hover ~ .fd-1, .fp-2:hover ~ .fd-2, .fp-3:hover ~ .fd-3 { color: var(--fg); }
.foot-link { justify-self: start; margin-top: 12px; color: var(--fg2); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: color .2s, background-size .3s var(--ease); }
.foot-link:hover { color: var(--accent); background-size: 100% 1px; }
.site-footer a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; margin-top: clamp(40px, 5.5vw, 64px); padding-top: 22px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--fg3); }
.foot-base p { margin: 0; }
.foot-base span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; }
/* The site footer (nav.foot-grid.foot-grid--home): the brand and tagline; the
   three parts; and a right column, "Behind Triage" (principles, about) with
   the six lines under it as a two-column index. On tablets and phones the
   lines drop to their own row. The grid places every item, so the DOM keeps
   its reading order. */
.foot-grid.foot-grid--home { grid-template-areas: "home lparts lmore" "tag p1 more" "tag p2 lines" "tag p3 lines"; }
.foot-grid--home .foot-label-more { grid-area: lmore; }
.foot-more { grid-area: more; align-self: start; display: grid; justify-items: start; gap: 11px; padding-top: 13px; }
.foot-more .foot-link { margin: 0; font-size: 15px; }
.foot-lines { grid-area: lines; align-self: start; margin-top: 24px; }
.foot-lines-k { flex: none; margin: 0 0 14px; font: 500 10.5px/1.2 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg3); }
.foot-lines ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, max-content); gap: 11px 34px; }
.foot-lines a { display: inline-flex; align-items: baseline; gap: 9px; color: var(--fg2); text-decoration: none; font-size: 14px; transition: color .2s; }
.foot-lines a span { font: 500 10px/1 var(--font-mono); letter-spacing: .06em; color: var(--fg3); transition: color .2s; }
.foot-lines a:hover, .foot-lines a:hover span { color: var(--accent); }
/* the part you are on */
.site-footer .foot-part[aria-current="page"]::before { background: var(--accent); }
/* the base row's right side may carry the three parts as real links, in the same small mono voice */
.foot-base .foot-base-parts { display: flex; align-items: center; gap: 10px; font: 500 10.5px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.foot-base-parts span { color: var(--fg3); }
.foot-base-parts a { padding: 4px 0; color: var(--fg2); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: color .2s, background-size .3s var(--ease); }
.foot-base-parts a:hover { color: var(--accent); background-size: 100% 1px; }
@media (max-width: 900px) {
  .foot-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); grid-template-areas: "home home" "tag tag" "lparts ." "p1 m1" "p2 m2" "p3 m3"; }
  .foot-tagline { margin: 22px 0 44px; }
  .foot-grid.foot-grid--home { grid-template-areas: "home home" "tag tag" "lparts lmore" "p1 more" "p2 more" "p3 more" "lines lines"; }
  .foot-lines { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: clamp(40px, 5.5vw, 56px); padding-top: 22px; border-top: 1px solid var(--border); }
  .foot-lines-k { margin: 0; }
  .foot-lines ul { display: flex; flex-wrap: wrap; gap: 10px 30px; }
  .foot-grid--home ~ .foot-base { margin-top: 22px; }
}
@media (max-width: 600px) {
  .foot-grid { grid-template-columns: auto auto 1fr; column-gap: 24px; grid-template-areas: "home home home" "tag tag tag" "lparts lparts lparts" "p1 p1 p1" "p2 p2 p2" "p3 p3 p3" "m1 m2 m3"; }
  .foot-link { margin-top: 26px; }
  .foot-grid.foot-grid--home { grid-template-columns: minmax(0, 1fr); grid-template-areas: "home" "tag" "lparts" "p1" "p2" "p3" "lmore" "more" "lines"; }
  .foot-grid--home .foot-label-more { margin-top: 34px; }
  .foot-more { display: flex; flex-wrap: wrap; gap: 10px 28px; padding-top: 0; }
  .foot-lines { margin-top: 40px; }
  .foot-lines ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; width: 100%; }
}

/* ---- in-page contents bar (long pages) ---------------------------------- */
/* Sits under the sticky header: site.js sets --header-h from the header's real height. */
.toc { position: sticky; top: var(--header-h, 60px); z-index: 20; background: color-mix(in srgb, var(--bg) 95%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); }
.toc .wrap { display: flex; gap: 24px; overflow-x: auto; scrollbar-width: none; padding-top: 11px; padding-bottom: 11px; }
.toc .wrap::-webkit-scrollbar { display: none; }
.toc a { position: relative; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .04em; color: var(--fg2); white-space: nowrap; transition: color .15s; }
.toc a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -11px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left center; transition: transform .28s var(--ease); }
.toc a:hover, .toc a[aria-current="true"] { color: var(--accent); }
.toc a[aria-current="true"]::after { transform: scaleX(1); }
.toc a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

/* ==========================================================================
   MOTION
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(18px);
  transition: opacity .8s var(--ease) var(--reveal-delay, 0s), transform .8s var(--ease) var(--reveal-delay, 0s); }
.reveal--fade { transform: none; }
.reveal--scale { transform: scale(.97); }
.reveal.in { opacity: 1; transform: none; }
/* Scripts off, or site.js never ran: nothing waits for an entrance. Each page's
   <head> marks <html> with .js and takes the mark off again if site.js did not load. */
html:not(.js) .reveal { opacity: 1; transform: none; }
html:not(.js) .steps.reveal .step::before { opacity: 1; transform: none; }
html:not(.js) .steps.reveal .step::after { transform: none; }

/* .draw: site.js adds .draw-path (and pathLength=1) to each stroke it animates,
   so without JavaScript every line is simply drawn. */
.draw-path { stroke-dasharray: 1 2; stroke-dashoffset: 1.001;
  transition: stroke-dashoffset var(--draw-dur, 1.5s) var(--ease-draw) var(--draw-delay, .1s); }
.in .draw-path, .draw-path.in { stroke-dashoffset: 0; }
.draw-armed .draw-dot { opacity: 0; transform: scale(.4); transform-box: fill-box; transform-origin: center;
  transition: opacity .5s var(--ease) var(--draw-delay, .6s), transform .6s var(--ease) var(--draw-delay, .6s); }
.draw-armed .in .draw-dot, .draw-armed .draw-dot.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal--scale { opacity: 1; transform: none; transition: none; }
  .draw-path { stroke-dasharray: none; stroke-dashoffset: 0; transition: none; }
  .draw-armed .draw-dot { opacity: 1; transform: none; transition: none; }
  .steps.reveal .step::before, .steps.reveal .step::after { transform: none; opacity: 1; transition: none; }
  .btn, .btn:hover, .btn:active, .btn > span[aria-hidden], .btn:hover > span[aria-hidden], .btn:hover > .arrow, .link-arrow > span[aria-hidden] { transform: none; transition: none; }
  .site-nav a::after, .toc a::after { transition: none; }
}
/* ---- .prices / .price-card: what it costs ------------------------------- */
.prices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: clamp(18px, 2.4vw, 26px); align-items: stretch; }
.price-card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 30px 28px 28px; min-width: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--lift); }
.price-card--accent { border-color: color-mix(in srgb, var(--accent) 42%, var(--border)); }
.price-card--accent::before { content: ""; position: absolute; top: -1px; left: 28px; width: 36px; height: 3px; border-radius: 0 0 2px 2px; background: var(--accent); }
.price-k { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 2px; }
.price-amount { font-family: var(--font-serif); font-weight: 500; font-size: clamp(2.5rem, 4.4vw, 3.1rem); line-height: 1; letter-spacing: -.02em; color: var(--fg); font-variant-numeric: lining-nums; }
.price-amount--word { font-size: clamp(2rem, 3.6vw, 2.4rem); }
.price-per { font-family: var(--font-mono); font-size: 12.5px; color: var(--fg3); }
.price-sub { color: var(--fg2); font-size: .95rem; line-height: 1.65; }
.price-list { list-style: none; margin: 6px 0 0; padding: 16px 0 0; border-top: 1px solid var(--border); display: grid; gap: 9px; flex: 1; align-content: start; }
.price-list li { position: relative; padding-left: 26px; color: var(--fg2); font-size: .93rem; line-height: 1.55; }
.price-list li::before { content: ""; position: absolute; left: 3px; top: .45em; width: 10px; height: 5px; border-left: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent); transform: rotate(-45deg); }
.price-cta { margin-top: 8px; }
.price-note { margin-top: clamp(18px, 2.4vw, 26px); color: var(--fg3); font-size: .9rem; line-height: 1.6; }
.price-note a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.price-sub-title { font-family: var(--font-serif); font-weight: 500; font-size: 1.45rem; line-height: 1.3; letter-spacing: -.012em; color: var(--fg); margin: clamp(48px, 6vw, 72px) 0 clamp(20px, 2.6vw, 28px); }
.feature-price { font-family: var(--font-mono); font-size: 13px; color: var(--accent); margin: -2px 0 8px; }
.feature .feature-price { color: var(--accent); font-size: 13px; line-height: 1.5; }

/* ---- .faq: questions and answers --------------------------------------- */
.faq { border-top: 1px solid var(--border); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 20px 0;
  font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.12rem, 1.9vw, 1.3rem); line-height: 1.35; letter-spacing: -.01em; color: var(--fg); }
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after { content: "+"; flex: none; font-family: var(--font-mono); font-size: 1.25rem; line-height: 1; color: var(--accent); transition: transform .2s var(--ease); }
.faq-item[open] > summary::after { transform: rotate(45deg); }
.faq-item > summary:hover { color: var(--accent); }
.faq-item > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.faq-a { padding: 0 44px 22px 0; }
.faq-a p { color: var(--fg2); font-size: .98rem; line-height: 1.7; max-width: 64ch; }
.faq-a p + p { margin-top: 10px; }
@media (prefers-reduced-motion: reduce) { .faq-item > summary::after { transition: none; } }

@media print {
  .reveal { opacity: 1 !important; transform: none !important; }
  .draw-path { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  .site-header, .toc { position: static; }
}