/* AI Brain design system - components - v1.1 (Stanley-adapted editorial, senior-ui-ux Taste pass)
   Requires tokens.css. Vanilla CSS, no framework. Square-edged, light page + marine feature bands.
   Display = contralto-big, all-caps, tracked, reserved for H1/H2 only (brand rule: used sparingly).
   Accent = ochre, locked page-wide, rationed to rules / single nodes / the download CTA.
   Dials: VARIANCE 7 (left-aligned splits, offset bands), MOTION 4 (scroll-reveal + hover only,
   reduced-motion gated), DENSITY 4 (generous, editorial). Light theme locked page-wide. */

/* ============================================================ base */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--off);color:var(--ink);
  font:400 var(--text-base)/1.62 var(--font-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden; /* belt-and-braces: no page-level horizontal scroll on any breakpoint */
}
img{max-width:100%;display:block}
/* the all-caps display face can produce very long unbreakable tokens (e.g. REMEMBERS) before the
   Typekit font loads or in a narrow column - let display headings wrap so nothing widens the page */
h1,h2{overflow-wrap:anywhere;word-break:normal}

/* contralto-big is an all-caps display face - reserve for H1/H2 (brand: sparingly), keep it tracked */
h1,h2{
  font-family:var(--font-display);font-weight:400;line-height:1.12;margin:0 0 var(--space-4);
  text-transform:uppercase;letter-spacing:var(--track-display);
}
h1{font-size:var(--text-2xl);font-weight:300}
h2{font-size:var(--text-xl)}
/* h3 stays in the body face - sub-labels are not display moments */
h3{font-family:var(--font-body);font-weight:600;font-size:var(--text-lg);line-height:1.25;margin:0 0 var(--space-3)}
p{margin:0 0 var(--space-3)}
a{color:var(--accent-deep);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--ink)}
b,strong{font-weight:600}
/* fix 7 (round 4): secondary body TEXT on the clay page routes through --stone-read (5.16:1 on
   --off, AA normal). --stone-60 (4.32:1) is kept for borders + on-white/on-dark contexts where it
   already clears AA. This lifts the <=17px lead/muted copy over the 4.5:1 floor. */
.muted{color:var(--stone-read)}
.lead{color:var(--stone-read);font-size:var(--text-md);max-width:52ch}

/* ---------- containers ---------- */
.wrap{max-width:var(--measure);margin:0 auto;padding:0 var(--space-4)}
.wrap-wide{max-width:var(--measure-wide);margin:0 auto;padding:0 var(--space-4)}
.wrap-max{max-width:var(--measure-max);margin:0 auto;padding:0 var(--space-5)}

.label{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:var(--track-wide);color:var(--stone-read)}
/* eyebrow with the single ochre tick - use at most 1 per 3 sections (Taste eyebrow restraint) */
.eyebrow{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-xs);
  text-transform:uppercase;letter-spacing:var(--track-wide);color:var(--stone-read);margin:0 0 var(--space-4)}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--accent);flex:none}

/* ============================================================ nav */
.nav{max-width:var(--measure-max);margin:0 auto;padding:var(--space-5) var(--space-5) 0;
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}
.nav .lockup{font-size:var(--text-xs);letter-spacing:var(--track-wide);text-transform:uppercase;
  color:var(--stone-read);text-decoration:none}
.nav .lockup b{color:var(--ink);font-weight:600}
.nav .lockup:hover{color:var(--stone-read)}
/* nav-cta on the clay page: the affordance is NOT the ochre underline alone (that is ~2.4:1 on clay
   and fails the 3:1 non-text floor). It is a bordered ink chip - weight + box carry the meaning; the
   ochre is a bottom accent only. On-clay accent that MUST be read routes through --accent-deep. */
.nav .nav-cta{font-size:var(--text-xs);letter-spacing:var(--track-med);text-transform:uppercase;
  color:var(--ink);text-decoration:none;font-weight:700;
  border:1px solid var(--ink);border-bottom:3px solid var(--accent-deep);padding:.5rem .85rem;
  transition:background .18s var(--ease),color .18s var(--ease)}
.nav .nav-cta:hover{background:var(--ink);color:var(--off)}
.nav .nav-cta:focus-visible{outline:2px solid var(--accent-deep);outline-offset:3px}
/* fix 2: keep the nav CTA VISIBLE on mobile as a compact chip (was display:none). Mobile now has a
   one-tap path to the form from the top bar AND the sticky bottom bar - no CTA-less dead zone. */
@media (max-width:560px){
  .nav{padding:var(--space-4) var(--space-4) 0}
  .nav .nav-cta{padding:.4rem .65rem;letter-spacing:.06em}
  .nav .lockup{font-size:.66rem}
}

/* skip link - long page + a form success state that moves focus; keyboard users get a jump to the form */
.skip{position:absolute;left:var(--space-4);top:-60px;z-index:20;background:var(--ink);color:var(--off);
  padding:.7rem 1.1rem;font:600 var(--text-sm)/1 var(--font-body);text-decoration:none;
  border-bottom:3px solid var(--accent);transition:top .16s var(--ease)}
.skip:focus{top:var(--space-4);color:var(--off)}

/* ============================================================ buttons (ONE primary intent: get the pack)
   fix 4 (round 4): the primary CTA is now an OCHRE FILL with ink text - the brief's one confident
   colour moment (--accent #B67A3D + --ink text = 5.1:1, AA normal). It is the loudest, warmest object
   on the clay page, so the download action is unmissable. Ochre stays rare everywhere else. On marine
   bands the button inverts to a clay fill so it still reads as the loudest object on a dark field. A
   deep-ink bottom rule anchors the ochre so it never floats as a flat swatch. */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;background:var(--accent);color:var(--ink);border:0;cursor:pointer;
  padding:1rem 1.9rem;font:700 var(--text-sm)/1 var(--font-body);
  letter-spacing:var(--track-med);text-transform:uppercase;text-decoration:none;
  border-bottom:3px solid var(--ink);transition:transform .18s var(--ease),background .18s var(--ease);
}
.btn:hover{background:var(--accent-hover);color:var(--ink);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.btn .arw{transition:transform .18s var(--ease)}
.btn:hover .arw{transform:translateX(3px)}
.btn--lg{padding:1.15rem 2.3rem;font-size:var(--text-base)}
/* ghost = the quiet secondary; ink text + border, ochre bottom accent only (never a fill) */
.btn--ghost{background:transparent;color:var(--ink);border:var(--border);border-bottom:3px solid var(--accent);font-weight:600}
.btn--ghost:hover{background:var(--surface);color:var(--ink)}
/* on a marine band the primary button inverts to clay so it stays the loudest object on the dark field */
.on-ink .btn{background:var(--off);color:var(--ink);border-bottom:3px solid var(--accent)}
.on-ink .btn:hover{background:var(--surface);color:var(--ink)}
.on-ink .btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ============================================================ HERO (asymmetric split - the CAPTURE FORM
   is the hero's centre of gravity, right column, above the fold. Left = offer + one-line lead + a slim
   motif strip for depth. This is the single biggest conversion lever: the form is reached with zero
   scroll. Item 8b: the motif is a SLIM cropped strip here, not the full square, so it reads distinct
   from the how-it-works motif and gives the fold more depth than a repeated paper-sheet composition. */
.hero{position:relative;background:var(--ink);color:var(--off);overflow:hidden}
/* fix 1: the FORM is first in the DOM (so it renders TOP on mobile), but grid-template-areas puts the
   copy on the LEFT and the form on the RIGHT on desktop regardless of source order. On mobile the grid
   collapses to a single "form then copy" column - the single most important element is thumbed first. */
.hero-grid{
  max-width:var(--measure-max);margin:0 auto;padding:var(--space-12) var(--space-5) var(--space-10);
  display:grid;grid-template-columns:1.02fr .98fr;grid-template-areas:"copy form";
  gap:var(--space-8) var(--space-10);align-items:center;
}
.hero-copy{grid-area:copy;max-width:38ch;align-self:center;min-width:0}
/* min-width:0 lets the 1fr grid track shrink below its content min-content on mobile (classic grid
   overflow fix) - without it the form card + button push the page wider than the phone viewport */
.hero-form{grid-area:form;min-width:0}
.hero h1{overflow-wrap:anywhere;word-break:normal;hyphens:none}
.hero .eyebrow{color:var(--stone-30)}
.hero .eyebrow::before{background:var(--accent)}
.hero h1{color:var(--off);font-size:clamp(2rem,5.2vw,3.7rem);margin-bottom:var(--space-4)}
.hero .lead{color:var(--stone-30);max-width:42ch;margin-bottom:var(--space-5);font-size:var(--text-md)}
.hero-note{font-size:var(--text-xs);color:var(--stone-30);letter-spacing:.02em;display:block;margin-top:var(--space-4)}
.hero-note b{color:var(--off);font-weight:600}
/* fix 5b (round 4): the fold strip is a PURPOSE-CROPPED focal, not a flat mid-sheet slice. The
   hero-motif's read is its floating paper sheets + the single ochre edge tracing the lowest sheet.
   object-fit:cover + object-position pins the crop to that lower-right focal region so the strip
   carries an intentional subject (sheet edge + ochre line), and a hairline ochre base rule ties it
   to the page accent. Taller (150px) so the sheet geometry reads, not a cream band. */
.hero-strip{position:relative;height:150px;margin-top:var(--space-5);border:var(--border-ink);
  border-bottom:3px solid var(--accent);background:var(--ink-80);overflow:hidden}
.hero-strip img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:78% 72%}
/* the .hero-copy__tail (strip + Pro-required note) is a plain wrapper on desktop; on mobile it
   reorders to sit BELOW the form (fix 1). */
.hero-copy__tail{display:block}
/* the single ochre reveal line under the hero band */
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--accent);opacity:.95}

/* HERO FORM CARD - clay surface floated on marine, the obvious action of the fold */
.hero-form{background:var(--off);color:var(--ink);border:var(--border);border-top:3px solid var(--accent);
  padding:var(--space-6);align-self:center}
/* fix 3 (round 4): the form-card heading is a FORM TITLE, not a page headline. Demoted to a small
   uppercase-tracked label so it never competes with the hero H1 at the fold. The H1 is now the only
   headline-weight line above the fold. */
.hero-form .hf-title{font-family:var(--font-body);font-weight:700;text-transform:uppercase;
  letter-spacing:var(--track-med);font-size:var(--text-xs);color:var(--stone-read);margin:0 0 var(--space-2)}
.hero-form .hf-sub{font-size:var(--text-sm);color:var(--stone-read);margin:0 0 var(--space-3)}
/* fix 7: a tiny ticked what-you-get list INSIDE the form card, so the offer is concrete at the point
   of action. Ochre ticks (graphic-only, on-clay routes through --accent-deep for the 3:1 floor). */
.hero-form .hf-gets{list-style:none;padding:0;margin:0 0 var(--space-4);display:grid;gap:var(--space-1)}
.hero-form .hf-gets li{position:relative;padding-left:1.55rem;font-size:var(--text-sm);color:var(--ink);line-height:1.4}
.hero-form .hf-gets li::before{content:"";position:absolute;left:0;top:.34em;width:9px;height:5px;
  border-left:2px solid var(--accent-deep);border-bottom:2px solid var(--accent-deep);transform:rotate(-45deg)}

@media (max-width:860px){
  /* fix 1 (round 4): the mobile order is VALUE BLOCK -> FORM -> fuller copy. A cold paid visitor sees
     the eyebrow, the H1 and the one-line lead (what this IS) BEFORE the bare firstname input, then the
     form with minimal scroll, then the motif strip + Pro-required note. The old order collapsed to
     "form then copy" and pushed the value prop below the fold, suppressing cold submit rate.
     Achieved with flex + order (no duplicated DOM): the H1 is the first thing thumbed, not the input. */
  .hero-grid{display:flex;flex-direction:column;
    grid-template-columns:none;grid-template-areas:none;
    padding:var(--space-8) var(--space-4) var(--space-8);gap:var(--space-5)}
  /* display:contents lets the value block (eyebrow/h1/lead) and the tail order independently around
     the form. Their own bottom margins are zeroed so the flex gap alone governs vertical rhythm and
     the value block reads as one tight unit above the form. */
  .hero-copy{max-width:none;display:contents}
  .hero-copy .eyebrow{order:0;margin:0}
  .hero-copy h1{order:1;margin:0}
  .hero-copy .lead{order:2;margin:0}
  .hero-form{order:3}
  .hero-copy__tail{order:4;display:flex;flex-direction:column;gap:var(--space-4)}
  .hero-copy__tail .hero-note{margin-top:0}
  .hero h1{font-size:clamp(1.75rem,6.6vw,2.4rem);letter-spacing:.05em}
}
@media (max-width:400px){
  .hero h1{font-size:1.42rem;letter-spacing:.01em;word-break:normal;overflow-wrap:anywhere}
  /* tighten the fold furniture so nothing crowds the 320px edge */
  .hero-form{padding:var(--space-5)}
  .btn--lg{padding:1rem 1.4rem;font-size:var(--text-sm)}
}

/* ============================================================ section rhythm */
.section{padding:var(--space-16) 0}
.section--tight{padding:var(--space-12) 0}
.section-head{margin:0 0 var(--space-8)}
.section-head .lead{margin-top:var(--space-3)}

/* ============================================================ SELF-SELECT ("this is for you if") - 2-col grouped */
.selfselect{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5) var(--space-8)}
.selfselect li{position:relative;padding-left:var(--space-5);font-size:var(--text-md);color:var(--ink);line-height:1.5}
.selfselect li::before{content:"";position:absolute;left:0;top:.55em;width:14px;height:2px;background:var(--accent)}
@media (max-width:640px){.selfselect{grid-template-columns:1fr;gap:var(--space-4)}}

/* ============================================================ VALUE (what's inside, effort-framed)
   fix 3: this is a SET, not a sequence - no 01-04 index numbers (that was the enumerated-slop tell).
   Each row is carried by an ochre-tinted top hairline + the h3. The first row's rule is the full ochre
   accent; the rest are quiet stone hairlines, so the block reads as one grouped set, not a ranked list. */
.value-list{list-style:none;padding:0;margin:0;display:grid;gap:0}
.value-list li{padding:var(--space-5) 0;border-top:var(--hairline)}
.value-list li:first-child{border-top:2px solid var(--accent);padding-top:var(--space-5)}
.value-list li h3{margin:0 0 var(--space-2)}
.value-list li p{margin:0;color:var(--stone-read)}
.value-list li p b{color:var(--ink)}
.value-list code{font-family:var(--font-mono);font-size:.92em;background:var(--ink);color:var(--off);
  padding:.12em .45em;letter-spacing:.02em}

/* ============================================================ NEED block (subtle inset panel) */
.need{margin:var(--space-8) 0 0;background:var(--surface);border:var(--border);
  border-left:3px solid var(--accent);padding:var(--space-6)}
.need h3{margin-bottom:var(--space-3)}
.need ul{list-style:none;padding:0;margin:0;display:grid;gap:var(--space-2);color:var(--stone-read)}
.need li{position:relative;padding-left:var(--space-4)}
.need li::before{content:"-";position:absolute;left:0;color:var(--accent-deep)}
.need li b{color:var(--ink)}

/* ============================================================ LAYERS section (real diagram image + labels) */
.layers{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--space-8);align-items:center}
.layers-figure{border:var(--border);background:var(--ink);padding:var(--space-4)}
.layers-figure img{width:100%;height:auto}
.layers-legend{list-style:none;padding:0;margin:0;display:grid;gap:var(--space-5)}
.layers-legend li{display:grid;grid-template-columns:auto 1fr;gap:var(--space-4);align-items:start}
.layers-legend .mk{width:14px;height:14px;margin-top:.35em;flex:none;border:1px solid var(--ink)}
.layers-legend li:nth-child(1) .mk{background:var(--off)}
.layers-legend li:nth-child(2) .mk{background:var(--stone-30)}
.layers-legend li:nth-child(3) .mk{background:var(--ink);border-color:var(--accent);box-shadow:inset 0 0 0 2px var(--accent)}
.layers-legend h3{margin:0 0 var(--space-1);font-size:var(--text-md);display:flex;align-items:baseline;gap:var(--space-2)}
/* the layer number is the ochre marker - no "Layer N ·" prefix (item 3) */
.layers-legend h3 .ln{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--accent-deep);font-weight:400}
.layers-legend p{margin:0;color:var(--stone-read);font-size:var(--text-sm)}
@media (max-width:820px){.layers{grid-template-columns:1fr;gap:var(--space-6)}}

/* ============================================================ PROOF band (real folder screenshot, marine) */
.proof-band{background:var(--ink);color:var(--off)}
.proof-band .eyebrow{color:var(--stone-30)}
.proof-band h2{color:var(--off)}
.proof-band .lead{color:var(--stone-30)}
.proof-shot{margin:var(--space-8) 0 0;border:var(--border-ink);background:#04121b}
.proof-shot img{width:100%;height:auto}
.proof-cap{margin:var(--space-3) 0 0;font-size:var(--text-sm);color:var(--stone-30)}
.proof-cap b{color:var(--off);font-weight:600}

/* ============================================================ HOW-IT-WORKS band (motif + 3 beats) */
.how{display:grid;grid-template-columns:1fr;gap:var(--space-8)}
.how-figure{border:var(--border);background:var(--ink);margin:0}
.how-figure img{width:100%;height:auto}
/* beats break symmetry (item 4: not 3-equal-1fr cards). First beat leads, the next two step down.
   fix 3: NO 01/02/03 index - the action headline (and the mono command where there is one) IS the
   label. The ochre top rule carries the beat; the first rule is heavier so the eye starts left. */
.how-beats{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1.25fr .875fr .875fr;gap:var(--space-6)}
.how-beats li{border-top:1px solid var(--stone-30);padding-top:var(--space-3)}
.how-beats li:first-child{border-top:2px solid var(--accent)}
.how-beats h3{margin:0 0 var(--space-1);font-size:var(--text-md)}
.how-beats p{margin:0;color:var(--stone-read);font-size:var(--text-sm)}
.how-beats code{font-family:var(--font-mono);font-size:.92em;background:var(--ink);color:var(--off);padding:.1em .4em;letter-spacing:.02em}
@media (max-width:720px){.how-beats{grid-template-columns:1fr;gap:var(--space-4)}}

/* ============================================================ KEITH block (person-who-built-it + photo slot) */
.builder{display:grid;grid-template-columns:300px 1fr;gap:var(--space-8);align-items:center;
  background:var(--surface);border:var(--border);border-left:3px solid var(--accent);padding:var(--space-8)}
/* item 8a: NOT a wireframe ghost-avatar. A designed marine tile with Keith's name set in Contralto,
   the ochre riser accent, and a small honest "photo to come" tag. Reads as intentional, not unfinished. */
.builder-photo{position:relative;aspect-ratio:4/5;background:var(--ink);color:var(--off);
  display:flex;flex-direction:column;justify-content:flex-end;text-align:left;
  padding:var(--space-5);overflow:hidden;border-bottom:3px solid var(--accent)}
.builder-photo::before{content:"";position:absolute;left:var(--space-5);top:var(--space-5);
  width:34px;height:3px;background:var(--accent)}
.builder-photo .ph-tag{position:absolute;top:var(--space-4);right:var(--space-4);font-size:var(--text-xs);
  letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--stone-30);
  border:var(--border-ink);padding:var(--space-1) var(--space-2)}
.builder-photo .ph-name{font-family:var(--font-display);font-weight:300;text-transform:uppercase;
  letter-spacing:var(--track-display);font-size:1.5rem;line-height:1.05;color:var(--off);margin:0}
.builder-photo .ph-note{font-size:var(--text-xs);color:var(--stone-30);margin-top:var(--space-2)}
.builder-body blockquote{margin:0;font-family:var(--font-body);font-size:var(--text-lg);line-height:1.4;color:var(--ink)}
.builder-body .attr{margin:var(--space-4) 0 0;font-size:var(--text-sm);color:var(--stone-read)}
.builder-body .attr b{color:var(--ink);font-weight:600}
@media (max-width:720px){
  .builder{grid-template-columns:1fr;padding:var(--space-6)}
  .builder-photo{max-width:240px}
}

/* ============================================================ FAQ accordion */
.faq{border-top:1px solid var(--stone-30)}
.faq details{border-bottom:1px solid var(--stone-30)}
.faq summary{cursor:pointer;list-style:none;padding:var(--space-4) 0;
  font-weight:600;font-size:var(--text-md);display:flex;justify-content:space-between;gap:var(--space-4);align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent-deep);font-size:var(--text-xl);line-height:1;font-weight:400;flex:none}
.faq details[open] summary::after{content:"\2212"} /* minus sign, not em/en dash */
.faq summary:focus-visible{outline:2px solid var(--accent-deep);outline-offset:3px}
.faq .faq-body{padding:0 0 var(--space-4);color:var(--stone-read);max-width:64ch}
.faq .faq-body a{color:var(--accent-deep)}

/* ============================================================ CAPTURE form (the conversion surface) */
.get{background:var(--surface);border:var(--border);border-top:3px solid var(--accent);padding:var(--space-8)}
.get h2{margin-bottom:var(--space-3)}
.gate{display:grid;gap:var(--space-4);margin-top:var(--space-6)}
.gate label{display:grid;gap:var(--space-2);font-size:var(--text-xs);text-transform:uppercase;
  letter-spacing:var(--track-wide);color:var(--stone-read);font-weight:600}
.gate input{border:var(--border);padding:.9rem 1rem;font:400 var(--text-base)/1.2 var(--font-body);
  width:100%;min-width:0;background:var(--surface);color:var(--ink)}
.gate input::placeholder{color:var(--stone-30)}
.gate input:focus{outline:2px solid var(--accent-deep);outline-offset:1px;border-color:var(--ink)}
.gate .hp{position:absolute;left:-9999px;top:-9999px}
.gate .fine{font-size:var(--text-sm);color:var(--stone-read);margin:0}
.gate .err{display:none;color:var(--alert);font-size:var(--text-sm);margin:0}
.gate .btn{width:100%;justify-content:center;margin-top:var(--space-1)}
.gate-ok{display:none;background:var(--surface);border:var(--border);border-top:3px solid var(--accent);padding:var(--space-8)}
.gate-ok h3{margin-bottom:var(--space-2);font-size:var(--text-lg)}
.gate-ok h3:focus{outline:none}
.gate-ok h3:focus-visible{outline:2px solid var(--accent-deep);outline-offset:3px}
/* the READ-NOW path (client contract): primary guide button appears when j.guide_url is returned */
.gate-ok .btn{margin-top:var(--space-5)}
/* the hero form reuses the same success block; give it a compact variant */
.hero-form .gate-ok{padding:var(--space-5)}

/* ============================================================ CTA band (marine, single intent) */
.cta-band{background:var(--ink);color:var(--off);text-align:center;position:relative}
.cta-band::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--accent)}
.cta-band .inner{max-width:var(--measure);margin:0 auto;padding:var(--space-12) var(--space-4)}
.cta-band h2{color:var(--off);margin-bottom:var(--space-3)}
.cta-band p{color:var(--stone-30);max-width:46ch;margin:0 auto var(--space-6)}

/* ============================================================ STICKY MOBILE CTA (fix 2)
   Slim bottom bar, MOBILE ONLY, persistent one-tap route to the form through the long warm-up middle.
   Hidden by default on desktop (display:none); on mobile it shows, then JS adds .is-hidden whenever a
   capture form is on screen so it never overlaps the actual form. Marine bar, ochre top rule, safe-area
   aware. Reveal is a short slide - motivated (a CTA arriving as you read), reduced-motion gated below. */
.sticky-cta{display:none}
@media (max-width:860px){
  .sticky-cta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;
    align-items:center;justify-content:space-between;gap:var(--space-3);
    padding:.6rem var(--space-4) calc(.6rem + env(safe-area-inset-bottom,0px));
    background:var(--ink);color:var(--off);border-top:3px solid var(--accent);
    box-shadow:0 -6px 20px rgba(0,23,34,.28);
    transition:transform .28s var(--ease),opacity .28s var(--ease)}
  .sticky-cta.is-hidden{transform:translateY(115%);opacity:0;pointer-events:none}
  .sticky-cta__label{font-size:var(--text-xs);color:var(--stone-30);letter-spacing:.02em;line-height:1.2;flex:none}
  .sticky-cta__label b{color:var(--off);font-weight:600}
  .sticky-cta .btn{background:var(--off);color:var(--ink);border-bottom-color:var(--accent);
    padding:.7rem 1.1rem;font-size:var(--text-xs)}
  .sticky-cta .btn:hover{background:var(--surface);color:var(--ink)}
  /* keep the last content clear of the fixed bar so nothing hides behind it */
  .footer{padding-bottom:calc(var(--space-12) + 3.5rem)}
}
@media (max-width:860px) and (prefers-reduced-motion: reduce){
  .sticky-cta{transition:none}
  .sticky-cta.is-hidden{transform:none;opacity:0}
}

/* ============================================================ footer */
.footer{border-top:var(--border);margin-top:0;padding:var(--space-8) 0 var(--space-10);
  font-size:var(--text-xs);color:var(--stone-read)}
.footer .lockup{letter-spacing:var(--track-wide);text-transform:uppercase;display:block;margin-bottom:var(--space-3)}
.footer .lockup b{color:var(--ink);font-weight:600}
.footer p{margin:0 0 var(--space-2);max-width:74ch;line-height:1.55}
.footer a{color:var(--stone-read);text-decoration:underline}

/* ============================================================ GUIDE-only components */
.callout{border:var(--border);border-left:3px solid var(--accent);background:var(--surface);
  padding:var(--space-5);margin:var(--space-5) 0;font-size:var(--text-sm)}
.callout--warn{border-left-color:var(--alert)}
.callout p:last-child{margin:0}

.loom-slot{position:relative;background:var(--ink);color:var(--stone-30);
  padding:var(--space-12) var(--space-6);text-align:center;margin:var(--space-6) 0;font-size:var(--text-sm);
  border:var(--border-ink);border-top:3px solid var(--accent)}
.loom-slot .label{color:var(--stone-30);display:block;margin-bottom:var(--space-2)}
.loom-slot .ph-tag{position:absolute;top:0;right:0;font-size:var(--text-xs);letter-spacing:var(--track-wide);
  text-transform:uppercase;color:var(--stone-30);border-left:var(--border-ink);border-bottom:var(--border-ink);
  padding:var(--space-1) var(--space-2)}

.switchbar{display:flex;gap:var(--space-3);flex-wrap:wrap;align-items:center;margin:0 0 var(--space-8)}
.tabs{display:inline-flex;border:var(--border);background:var(--surface)}
.tabs button{background:transparent;border:0;cursor:pointer;padding:.65rem 1.15rem;
  font:600 var(--text-sm)/1 var(--font-body);letter-spacing:.02em;color:var(--stone-60)}
.tabs button:focus-visible{outline:2px solid var(--accent-deep);outline-offset:-2px}
.tabs button[aria-pressed="true"]{background:var(--ink);color:var(--off);border-bottom:2px solid var(--accent)}
/* visibility driven by data-os / data-path on a container */
[data-os="mac"] .only-win{display:none}
[data-os="win"] .only-mac{display:none}
[data-path="vscode"] .only-terminal{display:none}
[data-path="terminal"] .only-vscode{display:none}

.step{background:var(--surface);border:var(--border);border-left:3px solid var(--accent);
  padding:var(--space-6);margin:0 0 var(--space-4);position:relative}
/* fix 6 (round 4): the step number is a QUIET inline mono marker sitting on the h3 line, not a large
   numeral floated top-right. That top-right numeral echoed the enumerated-card slop the landing kills.
   Setup IS sequential so the number stays (legitimate), but it now reads as a small tag on the title.
   step-no is a sibling of h3 in the markup; float it inline so both share one baseline row. */
.step .step-no{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--accent-deep);
  font-weight:400;line-height:1;float:left;margin-right:var(--space-3);margin-top:.15em}
.step h3{margin-bottom:var(--space-2);overflow:hidden} /* BFC so the floated number sits beside, not under */
.step .check{border-top:var(--hairline);margin-top:var(--space-4);padding-top:var(--space-3);
  font-size:var(--text-sm);color:var(--stone-60)}
.step .check b{color:var(--ink)}

.copyblock{display:flex;align-items:stretch;border:var(--border);background:var(--ink);margin:var(--space-3) 0}
.copyblock code{flex:1;font:400 var(--text-sm)/1.5 var(--font-mono);color:var(--off);
  padding:.8rem 1rem;overflow-x:auto;white-space:pre}
.copyblock button{background:transparent;border:0;border-left:1px solid rgba(244,242,238,.25);color:var(--stone-30);
  font:600 var(--text-xs)/1 var(--font-body);letter-spacing:var(--track-med);text-transform:uppercase;
  padding:0 1rem;cursor:pointer;flex-shrink:0}
.copyblock button:hover{color:var(--accent)}
.copyblock button:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}

.dl{display:flex;gap:var(--space-4);align-items:center;flex-wrap:wrap;margin:var(--space-4) 0}
.dl .fine{font-size:var(--text-sm);color:var(--stone-read);margin:0}

/* ============================================================ STYLEGUIDE (component library page) */
.sg-head{background:var(--ink);color:var(--off);padding:var(--space-10) 0;border-bottom:3px solid var(--accent)}
.sg-head h1{color:var(--off)}
.sg-head .lead{color:var(--stone-30)}
.sg-nav{position:sticky;top:0;z-index:5;background:var(--off);border-bottom:var(--border);
  padding:var(--space-3) 0}
.sg-nav ul{display:flex;flex-wrap:wrap;gap:var(--space-3);list-style:none;margin:0;padding:0}
.sg-nav a{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:var(--track-med);
  color:var(--stone-60);text-decoration:none}
.sg-nav a:hover{color:var(--ink)}
.sg-block{border-top:var(--border);padding:var(--space-8) 0}
.sg-block > .sg-meta{margin:0 0 var(--space-5)}
.sg-meta h2{font-size:var(--text-lg);font-family:var(--font-body);font-weight:600;
  text-transform:none;letter-spacing:0;margin:0 0 var(--space-1)}
.sg-meta p{margin:0;color:var(--stone-read);font-size:var(--text-sm)}
.sg-demo{background:var(--surface);border:var(--border);padding:var(--space-6)}
.sg-demo--ink{background:var(--ink)}
.sg-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--space-3)}
.sw{border:var(--hairline)}
.sw .chip{height:76px}
.sw .meta{padding:var(--space-2);font-size:var(--text-xs);background:var(--surface)}
.sw .meta b{display:block;color:var(--ink);text-transform:none;letter-spacing:0;font-weight:600}
.sw .meta span{color:var(--stone-60);font-family:var(--font-mono)}
.sg-type-row{border-top:var(--hairline);padding:var(--space-4) 0;display:grid;
  grid-template-columns:120px 1fr;gap:var(--space-4);align-items:baseline}
.sg-type-row:first-child{border-top:0}
.sg-type-row .k{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:var(--track-wide);color:var(--stone-60)}

/* ============================================================ MOTION (dial 4 - motivated, reduced-motion gated) */
@media (prefers-reduced-motion: no-preference){
  /* Only hide-for-reveal when JS is confirmed running (.js set on <html> by an inline head
     script). If JS fails/blocks/is slow, .js is never added and all content stays visible
     (a11y 1.3.1 + conversion: the fold-and-below, incl. the capture form, never goes blank). */
  .js .reveal{opacity:0;transform:translateY(20px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
  .js .reveal.is-in{opacity:1;transform:none}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
  .btn,.btn .arw{transition:none}
}

/* ============================================================ responsive tail */
@media (max-width:560px){
  .section{padding:var(--space-12) 0}
  .section--tight{padding:var(--space-10) 0}
  .get,.builder{padding:var(--space-5)}
  .sg-type-row{grid-template-columns:1fr;gap:var(--space-1)}
}