/* ============================================================
   SUGADUMP — tokens + base + components
   Swiss editorial × government form × archival filing system
   Corners: 0. Shadows: none. Gradients: none.
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  --bone:#F3EEE3; --ink:#262523; --ink-soft:#6C6861; /* darkened from #78746C: measured 4.02:1 on
    bone, below AA's 4.5:1 for normal-size text (used at 12-15px throughout) — now 4.79:1 */
  --neutral:#D9D4C7; --signal:#C9432E;
  /* ---- semantic website tokens (white canvas refinement) ----
     --bone stays a real BRAND color (workbook cover/page artwork, and a
     few pre-existing archival "index card" components that deliberately
     keep it as a decorative surface) — it is never redefined here. These
     four are the actual website-chrome roles, kept separate so intent is
     explicit at each call site: */
  --page-bg:#FFFFFF;      /* the site canvas: body, header, mobile nav panel */
  --surface:#FFFFFF;      /* a card/panel surface placed on the page — same
    value as --page-bg today, kept as its own token because a card still
    needs to read as an object on the page (via its own border), not
    "more page"; if the two ever need to diverge this is the seam. */
  --surface-muted:#F5F4F1; /* a very light neutral "stage" for preview
    chrome (the lightbox and rich viewer's own background, product-card
    cover mattes) — a half-step off pure white, never confused with the
    warmer --bone product artwork it's staging. */
  --border:var(--neutral); /* the one subtle-separator color, named for
    what it does rather than its hex, so "add a thin border" call sites
    read as intent, not a color pick. */
  --text-inverse:#FFFFFF; /* white text on ink/signal surfaces (buttons,
    the current-nav state, the ink "how it works" section, small ink-
    background controls) — replaces --bone in that specific role per the
    "white text" direction; --bone itself is untouched. */
  --font-display:"Big Shoulders Display","Big Shoulders",Impact,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;
  --font-body:"Work Sans",system-ui,sans-serif;
  --font-annot:"Nothing You Could Do",cursive;
  --rule-thin:1px; --rule-std:2px; --rule-heavy:3px;
  /* A11Y RULE: Signal Red (#C9432E) as TEXT only at >=19px bold or >=24px regular; smaller red text fails AA on both bone and ink */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px; --s8:144px;
  --measure:62ch; --maxw:1200px;
  --radius:0;
}

/* ---------- fonts (self-hosted subsets; see /assets/fonts) ---------- */
@font-face{font-family:"Big Shoulders Display";src:url(../assets/fonts/BigShoulders-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(../assets/fonts/IBMPlexMono-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(../assets/fonts/IBMPlexMono-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Work Sans";src:url(../assets/fonts/WorkSans-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Work Sans";src:url(../assets/fonts/WorkSans-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Nothing You Could Do";src:url(../assets/fonts/NothingYouCouldDo.woff2) format("woff2");font-weight:400;font-display:swap}

/* ---------- base ---------- */
*{box-sizing:border-box;border-radius:var(--radius)}
html{scroll-behavior:smooth;scroll-padding-top:84px} /* clears the sticky .site-head (~67px) on anchor/nav jumps */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{
  margin:0;background:var(--page-bg);color:var(--ink);
  font-family:var(--font-body);font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
a{color:var(--ink)}
a:hover{color:var(--signal)}
:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--text-inverse);
  padding:10px 16px;font-family:var(--font-mono);font-size:13px;z-index:100}
.skip-link:focus{left:8px;top:8px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
@media(min-width:768px){.wrap{padding:0 40px}}

/* ---------- archival chrome primitives ---------- */
.rule{border:0;border-top:var(--rule-std) solid var(--ink);margin:0}
.rule--thin{border-top-width:var(--rule-thin);border-top-color:var(--neutral)}
.ticks{display:flex;justify-content:space-between;height:12px}
.ticks i{width:1px;background:var(--neutral);height:6px}
.ticks i:nth-child(10n+1){height:12px}
/* administrative/reference labels — deliberately quiet: smaller and
   tighter-spaced than a heading, so a "REF WEB / 00X" line never competes
   with the actual section heading beneath it for attention */
.refmeta{display:flex;justify-content:space-between;gap:var(--s2);
  font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-soft)}
.refmeta strong{color:var(--ink);font-weight:700}
.annot{font-family:var(--font-annot);font-size:1.35rem;color:var(--ink-soft)}
.annot--red{color:var(--signal)}
.copy-required{font-family:var(--font-mono);font-size:13px;color:var(--signal);
  border:1px dashed var(--signal);padding:10px 12px;display:inline-block;margin:var(--s2) 0}

/* section chrome: every homepage section is a numbered form.
   Generous, consistent rhythm between major sections — the page should
   read as one calm sequence, not a stack of competing pitches. */
/* Section padding: was 64px mobile / 144px desktop (288px total gap
   between two adjacent sections) — cut roughly in half per the visual
   brief, then tuned: 36px mobile / 72px desktop, matching its "36-48px
   mobile, 56-80px desktop between sections" guidance once you account
   for both sides of the gap. */
.formsec{padding:36px 0}
.formsec__head{margin-bottom:var(--s4)}
.formsec__head .rule{margin-top:6px}
@media(min-width:768px){.formsec{padding:72px 0}}

/* ---------- typography ---------- */
.display{font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  line-height:.92;letter-spacing:.005em;margin:0}
.display--xl{font-size:clamp(34px,4.6vw,64px)}
.display--lg{font-size:clamp(38px,6.5vw,84px)}
.display--md{font-size:clamp(28px,4vw,48px)}
.display--sentence{text-transform:none} /* sentence-case display headline, e.g. "See inside the workbook." */
.display .red,.red{color:var(--signal)}
.mono{font-family:var(--font-mono)}
.mono--label{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.body-copy{max-width:var(--measure)}
.body-copy p{margin:0 0 1em}
h1,h2,h3{margin:0}

/* ---------- header / filing-tab nav ----------
   Nav now names one general shopping action ("Shop Workbooks") instead of
   the old LIFE-only red "Explore LIFE" link, and carries the SAME four
   items (Shop Workbooks, Guides, About, Help) on every page — no more
   per-page-type special casing. Below 481px it collapses into a real
   disclosure (button[aria-expanded] + a shown/hidden panel — see nav.js),
   never a display:none-but-still-focusable trick, never overflow-x:hidden,
   never shrunk-past-readable text: the root cause of the old 320px overflow
   was fitting 5 items (4 links + 1 emphasized) in a row with no fallback;
   the fix is a real narrow-width layout, not tighter padding on the same
   one. */
.site-head{border-bottom:var(--rule-std) solid var(--ink);background:var(--page-bg);
  position:sticky;top:0;z-index:50}
.site-head .wrap{position:relative;display:flex;align-items:stretch;justify-content:space-between;gap:var(--s3)}
.brand{display:flex;align-items:center;gap:14px;padding:14px 0;text-decoration:none}
.brand__mark{width:26px;height:26px;background:var(--ink);position:relative;flex:none}
.brand__mark::after{content:"";position:absolute;right:-6px;top:5px;width:6px;height:16px;background:var(--signal)}
.brand__name{font-family:var(--font-display);font-weight:700;font-size:24px;letter-spacing:.02em}
.brand__line{font-family:var(--font-mono);font-size:12px;color:var(--ink-soft);letter-spacing:.1em}
.tabs-nav{display:flex;align-items:stretch}
.tabs-nav a{display:flex;align-items:center;padding:0 18px;text-decoration:none;
  font-family:var(--font-mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  border-left:var(--rule-thin) solid var(--neutral)}
.tabs-nav a[aria-current="true"],.tabs-nav a.is-buy{background:var(--ink);color:var(--text-inverse)}
.tabs-nav a.is-buy .price{color:var(--signal);margin-left:10px;font-weight:700}
/* accessible narrow-width menu toggle — hidden entirely at normal widths,
   where the four nav links fit inline and this button plays no role */
.nav-toggle{display:none;align-items:center;gap:9px;background:none;cursor:pointer;
  border:var(--rule-thin) solid var(--ink);padding:0 14px;min-height:44px;min-width:44px;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.nav-toggle:hover{border-color:var(--signal);color:var(--signal)}
.nav-toggle__bars{width:16px;height:2px;background:currentColor;position:relative;flex:none}
.nav-toggle__bars::before,.nav-toggle__bars::after{content:"";position:absolute;left:0;width:16px;height:2px;background:currentColor}
.nav-toggle__bars::before{top:-5px}
.nav-toggle__bars::after{top:5px}
@media(max-width:481px){
  .nav-toggle{display:inline-flex}
  .nav-toggle__label{display:none} /* icon alone at the very narrowest widths — the aria-label still names it "Menu" */
  /* the collapsed panel: a real shown/hidden block (not clipped, not
     off-screen, not tiny text) anchored to .site-head, which is already
     position:sticky and so already establishes the containing block this
     needs — no extra wrapper required. */
  .tabs-nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;
    align-items:stretch;background:var(--page-bg);border-bottom:var(--rule-std) solid var(--ink)}
  .tabs-nav.is-open{display:flex}
  .tabs-nav a{border-left:0;border-top:var(--rule-thin) solid var(--neutral);padding:14px var(--s3);min-height:44px}
  .tabs-nav a[aria-current="true"]{border-top-color:var(--ink)}
}
@media(max-width:400px){
  .site-head .wrap{gap:var(--s2)}
  .brand{gap:8px}
  .brand__mark{width:20px;height:20px}
  .brand__mark::after{width:5px;height:12px;top:4px}
  .brand__name{font-size:19px}
  .brand__line{display:none} /* frees width at the very narrowest sizes; the toggle button is already visible by here */
}

/* ---------- CTA bar (the ad system's bar as a component) ---------- */
.cta-bar{display:flex;justify-content:space-between;align-items:center;gap:var(--s2);
  background:var(--ink);color:var(--text-inverse);text-decoration:none;
  padding:14px 22px;font-family:var(--font-mono);font-weight:700;font-size:15px;
  letter-spacing:.08em;text-transform:uppercase;border:0;width:100%;cursor:pointer;
  min-height:48px} /* ~48-52px target height, still clears the 44px touch-target minimum */
.cta-bar .price{color:var(--signal);white-space:nowrap;font-size:19px;font-weight:700} /* >=19px bold: AA large-text at 3.15:1 on ink */
.cta-bar:hover{color:var(--text-inverse)}
.cta-bar:hover .label{text-decoration:underline;text-underline-offset:4px}
.cta-bar[aria-busy="true"]{opacity:.7;cursor:progress}
.cta-inline{max-width:560px}

/* ---------- inline checkout error (replaces alert()) ---------- */
.checkout-error{color:var(--signal);margin-top:10px;display:flex;flex-wrap:wrap;
  align-items:center;gap:10px}
.checkout-error__retry{background:none;border:var(--rule-std) solid var(--signal);color:var(--signal);
  font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:6px 12px;cursor:pointer;min-height:32px}
.checkout-error__retry:hover{background:var(--signal);color:var(--text-inverse)}

/* ---------- checkbox primitive ---------- */
.cbx{display:inline-flex;align-items:center;gap:12px;font-family:var(--font-mono);font-size:14px}
.cbx i{width:20px;height:20px;border:var(--rule-std) solid var(--ink);flex:none;position:relative}
.cbx.is-checked i::after{content:"";position:absolute;left:3px;top:1px;width:9px;height:5px;
  border-left:3px solid var(--signal);border-bottom:3px solid var(--signal);transform:rotate(-50deg)}

/* ---------- hero ----------
   Mobile order (source order, single column): kicker -> head -> sub ->
   visual (real product) -> facts -> buy. Desktop: text column beside a
   sticky visual column, same reading order. */
.hero{padding:var(--s3) 0 var(--s5)}
@media(min-width:640px){.hero{padding:var(--s4) 0 var(--s5)}}
.hero__layout{display:grid;gap:18px;
  grid-template-columns:1fr;
  grid-template-areas:"kicker" "head" "sub" "visual" "facts" "buy"}
@media(min-width:900px){
  /* ~46% explanation / ~54% product evidence, per the visual brief */
  .hero__layout{gap:0 var(--s6);grid-template-columns:.85fr 1fr;align-items:start;
    grid-template-areas:
      "kicker visual"
      "head   visual"
      "sub    visual"
      "facts  visual"
      "buy    visual"}
}
.hero__kicker{grid-area:kicker}
.hero__head{grid-area:head;margin-top:6px}
.hero__head--sentence{text-transform:none} /* the one deliberately sentence-case headline */
.hero__sub{grid-area:sub;font-family:var(--font-mono);font-size:15px;max-width:52ch;margin:14px 0 0}
.hero__visual{grid-area:visual;display:flex;flex-direction:row;gap:12px;margin-top:var(--s3)}
@media(min-width:900px){.hero__visual{margin-top:0}}
.hero__cover{border:var(--rule-heavy) solid var(--ink);width:44%;min-width:130px;flex:none;align-self:start}
/* homepage hero shows LIFE's cover alone (no interior-crop sibling) — the
   44% width above assumes two side-by-side images and left a mostly-empty
   visual column when there's only one; give the solo cover real presence
   instead, centered in its column. */
.hero__visual--solo{justify-content:center}
.hero__visual--solo .hero__cover{width:100%;max-width:320px}
/* the interior crop: generously sized and legible, not a tiny illegible thumbnail */
.hero__interior{flex:1;min-width:0;position:relative;padding:0;border:var(--rule-heavy) solid var(--ink);
  background:none;cursor:zoom-in;display:block;align-self:start}
.hero__interior img{width:100%;display:block}
.hero__interior-tag{position:absolute;left:0;right:0;bottom:0;background:var(--ink);color:var(--text-inverse);
  font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:7px 10px;text-align:left}
.hero__facts{grid-area:facts;font-family:var(--font-mono);font-weight:700;font-size:14px;
  letter-spacing:.06em;text-transform:uppercase;margin-top:var(--s3);padding:12px 0;
  border-top:var(--rule-thin) solid var(--ink);border-bottom:var(--rule-thin) solid var(--ink)}
@media(min-width:520px){.hero__facts{font-size:15px}}
.hero__buy{grid-area:buy;max-width:560px;margin-top:var(--s3)}
/* secondary action: a quiet text link, never competing with the primary CTA */
.secondary-link{display:inline-block;margin-top:12px;font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;text-decoration:none;color:var(--ink-soft);border-bottom:1px solid var(--neutral)}
.secondary-link:hover{color:var(--signal);border-bottom-color:var(--signal)}
/* Etsy-style purchase-certainty block: format facts + reassurance, both quiet/small */
.format-strip{margin-top:14px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-soft)}
.hero__buy .fine-note{margin-top:8px}
.hero__title{margin-top:var(--s6);padding-top:var(--s4);border-top:var(--rule-thin) solid var(--neutral)}
@media(min-width:768px){.hero__title{margin-top:var(--s7)}}
/* generic scannable fact-chip row, reused in "what you get" and final sections */
.factchips{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s3)}
.factchips span{font-family:var(--font-mono);font-size:13px;letter-spacing:.08em;
  text-transform:uppercase;border:var(--rule-thin) solid var(--ink);padding:6px 10px}

/* ---------- homepage hero v2: "too much to remember" ----------
   A second, product-line-wide hero layout — problem/solution copy plus a
   filled-in fictional example, not just a cover. Scoped entirely under
   hh__* class names (and reuses a few standalone single-purpose rules from
   the ORIGINAL hero — .hero__kicker/.hero__head/.hero__buy/.hero__facts —
   which only ever set a grid-area plus their own typography, so they work
   unmodified inside this new grid too). Deliberately NOT touching
   .hero__layout itself: that grid still serves the LIFE/HOME/CARE
   product-page heroes untouched. Mobile source/visual order is identical
   (problem, solution, and the shopping action all come before the larger
   example) — desktop pulls the example into its own column via
   grid-template-areas alone, no JS/reordering needed. */
/* gap:0 on mobile too (matching the desktop row-gap below) — each child's
   own margin-top already sets its spacing (6/14/10/16/24/24/24px); a
   grid-gap on top of those margins was compounding into the "too much
   space between everything" mobile hero, since gap and margin both add,
   they don't collapse into each other. */
.hh__layout{display:grid;gap:0;grid-template-columns:1fr;
  grid-template-areas:"kicker" "head" "problem" "solution" "instr" "buy" "facts" "visual"}
@media(min-width:900px){
  .hh__layout{gap:0 var(--s6);grid-template-columns:.85fr 1fr;align-items:start;
    grid-template-areas:
      "kicker   visual"
      "head     visual"
      "problem  visual"
      "solution visual"
      "instr    visual"
      "buy      visual"
      "facts    visual"}
}
.hh__problem{grid-area:problem;font-size:17px;max-width:48ch;margin:14px 0 0}
.hh__solution{grid-area:solution;font-size:17px;max-width:48ch;margin:10px 0 0}
.hh__instr{grid-area:instr;margin-top:16px}
/* the "see inside" trigger is a <button> (it opens the lightbox in place,
   never a navigation), so it needs its own touch-target + UA-reset sizing;
   its color/underline/hover still come from the shared .secondary-link rule */
.hh__see-inside{background:none;border-width:0 0 1px 0;border-style:solid;
  border-color:var(--neutral);padding:2px 0;min-height:44px;display:inline-flex;
  align-items:center;cursor:pointer}
.hh__example{grid-area:visual;margin:var(--s3) 0 0}
@media(min-width:900px){.hh__example{margin-top:0}}
/* "a clean paper surface": a white --surface mat with a thin border, the
   page image itself getting its own thin ink border to read as a distinct
   document sitting on that mat — replaces the old heavy box-around-
   everything treatment. */
.hh__example-surface{background:var(--surface);border:var(--rule-thin) solid var(--neutral);
  padding:var(--s3);max-width:360px;margin:0 auto}
@media(min-width:900px){.hh__example-surface{max-width:400px}}
.hh__example-btn{display:block;width:100%;padding:0;background:none;border:0;cursor:zoom-in}
.hh__example-btn img{width:100%;display:block} /* no separate image border — the
  --surface mat's own border already frames it; a second border here was an
  unnecessary nested frame around a page image that already reads as a
  distinct object by its own (bone) color against the white mat */
.hh__example-cap{display:block;margin:10px 0 0;font-size:12px;letter-spacing:.04em;color:var(--ink-soft)}
/* at most two short callouts tied to real visible fields on the page — kept
   outside the image itself, never drawn over it */
.hh__example-notes{list-style:none;margin:var(--s3) 0 0;padding:0;max-width:360px}
@media(min-width:900px){.hh__example-notes{max-width:400px}}
.hh__example-notes li{position:relative;padding:0 0 0 20px;font-size:14px;line-height:1.5;color:var(--ink)}
.hh__example-notes li+li{margin-top:10px}
.hh__example-notes li::before{content:"";position:absolute;left:0;top:8px;width:10px;height:2px;background:var(--signal)}
.hh__example-notes strong{font-weight:700}

/* ============================================================
   V2 REBUILD (2026-10-06): "The Department of Having Your Life
   Together" — supersedes the flatter v1 sortdesk/chooser system.
   ============================================================ */

/* ---------- deskstage: the hero's dimensional desk ----------
   Layers (back to front): a real workbook page peeking behind, scattered
   decorative notes (aria-hidden, pointer-events:none so they can NEVER
   intercept a click meant for a folder underneath/behind them), and three
   always-real <a> folders in a native <ul><li><a> list (native link
   semantics — see the HTML comment in index.html for why this replaced
   role="listitem" divs). No raster/SVG assets: paper is plain HTML,
   layered with rotation/offset/borders only — brand tokens forbid blurred
   shadows, so depth reads through overlap and a crisp 1px ink edge.
   Folder links work identically whether the notes are scattered (initial,
   motion-ok state) or tucked in (post-"Sort this out", or the reduced-
   motion/no-JS default — see the two media blocks below). */
.deskstage{grid-area:visual;position:relative;margin:var(--s4) 0 0;
  min-height:760px;display:flex;flex-direction:column;justify-content:flex-end}
@media(min-width:420px){.deskstage{min-height:680px}}
@media(min-width:520px){.deskstage{min-height:600px}}
@media(min-width:900px){.deskstage{margin-top:0}}
.deskstage__pagepeek{position:absolute;top:0;right:0;width:21%;max-width:104px;
  border:var(--rule-std) solid var(--ink);transform:rotate(6deg);z-index:1;opacity:.92;
  transition:top .9s cubic-bezier(.3,.7,.3,1),right .9s cubic-bezier(.3,.7,.3,1),
    width .9s cubic-bezier(.3,.7,.3,1),transform .9s cubic-bezier(.3,.7,.3,1)}
/* Sorted: the cover moves down to sit just behind/above the LIFE folder
   instead of staying pinned alone in the top-right corner — one coherent
   arrangement (notes tucked near their folders + the cover behind LIFE's)
   rather than a settled scene with an unrelated floating leftover. */
.deskstage.is-sorting .deskstage__pagepeek,.deskstage.is-sorted .deskstage__pagepeek{
  top:34%;right:62%;width:17%;max-width:84px;transform:rotate(-4deg)}
.deskstage__notes{position:absolute;inset:0;margin:0;padding:0;list-style:none;z-index:2}
.deskstage__note{position:absolute;left:var(--x);top:var(--y);width:var(--w,38%);margin:0;
  background:var(--bone);border:var(--rule-thin) solid var(--ink);padding:8px 10px;
  font-family:var(--font-annot);font-size:.85rem;line-height:1.2;color:var(--ink);
  pointer-events:none;
  transform:rotate(var(--r)) scale(1);opacity:1;
  transition:left .9s cubic-bezier(.3,.7,.3,1),top .9s cubic-bezier(.3,.7,.3,1),
    opacity .6s ease,transform .9s cubic-bezier(.3,.7,.3,1);
  transition-delay:var(--delay,0s)}
@media(min-width:420px){.deskstage__note{font-size:1rem;padding:10px 12px}}
@media(min-width:520px){.deskstage__note{font-size:1.25rem;padding:12px 14px}}
/* Settled: notes shrink and tuck in just above their folder's tab —
   z-index keeps them behind the (opaque) folder body, so each reads as a
   page peeking out from under its tab rather than vanishing outright. */
.deskstage.is-sorting .deskstage__note,.deskstage.is-sorted .deskstage__note{
  left:var(--x2);top:var(--y2);transform:rotate(var(--r2,0deg)) scale(.55);opacity:.95}
/* Positioned at the stage's own top-left corner, out of the in-flow
   replay/folders flex column entirely — this is deliberate: the tucked-
   in sorted notes need the whole band just above the folders free of
   any other control, in both the scattered and settled states, at every
   viewport width. Any note it visually sits over is decorative and
   pointer-events:none, so there's no functional conflict either way. */
.deskstage__replay{position:absolute;top:0;left:0;z-index:4;margin:0;
  background:var(--surface);border:var(--rule-thin) solid var(--ink);
  cursor:pointer;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  padding:9px 14px;min-height:44px;color:var(--ink)}
.deskstage__replay:hover{border-color:var(--signal);color:var(--signal)}
.deskstage__folders{position:relative;z-index:3;display:grid;grid-template-columns:1fr;
  gap:var(--s3) 1px;list-style:none;margin:0;padding:12px 0 0}
@media(min-width:520px){.deskstage__folders{grid-template-columns:repeat(3,1fr);gap:0 1px;background:var(--ink);border:var(--rule-std) solid var(--ink)}}
.folder{position:relative;display:block;min-width:0;text-decoration:none;color:var(--ink);
  background:var(--bone);padding:26px var(--s3) var(--s3);min-height:44px;
  perspective:400px}
@media(min-width:520px){.folder{padding-top:30px}}
.folder:hover,.folder:focus-visible{color:var(--ink)}
.folder__tab{position:absolute;top:-1px;left:14px;transform:translateY(-100%);
  background:var(--ink);color:var(--text-inverse);font-family:var(--font-mono);
  font-size:12px;letter-spacing:.1em;padding:5px 12px 7px;
  clip-path:polygon(8% 0,92% 0,100% 100%,0 100%)}
.folder__front{display:block;transform-origin:bottom center;transition:transform .2s ease}
.folder:hover .folder__front,.folder:focus-visible .folder__front{transform:translateY(-4px)}
@media(prefers-reduced-motion:reduce){.folder:hover .folder__front,.folder:focus-visible .folder__front{transform:none}}
.deskstage.is-sorting .folder__front{animation:folder-flap .7s ease}
.deskstage.is-sorting .deskstage__folders>:nth-child(2) .folder__front{animation-delay:.12s}
.deskstage.is-sorting .deskstage__folders>:nth-child(3) .folder__front{animation-delay:.24s}
@keyframes folder-flap{0%{transform:rotateX(0)}35%{transform:rotateX(-16deg) translateY(-3px)}100%{transform:rotateX(0)}}
.folder__desc{display:block;font-size:14px;line-height:1.4;color:var(--ink);margin-top:2px}
.folder__peek{display:none}
.deskstage.is-sorted .folder__peek{display:block;position:absolute;top:-1px;left:14px;
  width:28px;height:5px;background:var(--signal);transform:translateY(-100%)}
.deskstage__disclaimer{margin:var(--s3) 0 0;max-width:46ch}

/* ---------- bonus interaction: "filed under" ----------
   Added by interactive.js (never in static markup — a no-JS visitor
   never sees an element that would otherwise do nothing). Hover- and
   focus-revealed only; the folder link itself is always fully usable
   without it, on every input type, including touch (which activates the
   link directly, same as any ordinary link). */
.folder__filedunder{position:absolute;bottom:100%;left:0;margin-bottom:6px;z-index:5;
  max-width:220px;background:var(--ink);color:var(--text-inverse);font-family:var(--font-mono);
  font-size:12px;line-height:1.3;padding:8px 10px;opacity:0;visibility:hidden;
  pointer-events:none;transition:opacity .15s ease}
.folder:hover .folder__filedunder,.folder:focus-visible .folder__filedunder{opacity:1;visibility:visible}
@media(prefers-reduced-motion:reduce){.folder__filedunder{transition:none}}
/* Reduced motion / no-JS: the scattered pile never renders at all — the
   folders alone, already carrying their own labels, read as "organized"
   without any animated travel being required to get there. */
@media(prefers-reduced-motion:reduce){
  .deskstage__pagepeek,.deskstage__notes,.deskstage__replay{display:none}
  .deskstage{min-height:0}
}
.no-js .deskstage__notes,.no-js .deskstage__pagepeek,.no-js .deskstage__replay{display:none}
.no-js .deskstage{min-height:0}

/* ---------- casefile: the "open case file" product selector ----------
   Three index tabs (role=tab) above one open folder whose content panel
   swaps. All three `.casefile__page` panels are REAL, UNHIDDEN markup by
   default (a no-JS visitor reads all three in sequence, each ending in an
   ordinary product link) — the script collapses to one-at-a-time and
   reveals the tabs only once it has actually wired them. */
.casefile{margin-top:var(--s4)}
.casefile__tabs{display:flex;gap:2px;list-style:none;margin:0;padding:0;background:var(--neutral)}
.casefile__tabs>li{flex:1;display:flex;min-width:0}
.casefile__tab{flex:1;width:100%;min-width:0;background:var(--surface);border:0;cursor:pointer;text-align:left;
  padding:14px var(--s3);min-height:44px;font-family:var(--font-mono);overflow-wrap:break-word}
.casefile__tab-name{display:block;font-size:12px;letter-spacing:.1em;color:var(--ink-soft)}
.casefile__tab-quote{display:block;font-family:var(--font-display);font-weight:700;
  font-size:clamp(15px,2vw,18px);line-height:1.2;color:var(--ink);margin-top:4px}
.casefile__tab[aria-selected="true"]{background:var(--ink)}
.casefile__tab[aria-selected="true"] .casefile__tab-name{color:var(--neutral)}
.casefile__tab[aria-selected="true"] .casefile__tab-quote{color:var(--text-inverse)}
.casefile__tab:hover:not([aria-selected="true"]){background:var(--surface-muted)}
.casefile__folder{border:var(--rule-std) solid var(--ink);border-top:0;padding:var(--s4)}
.casefile__page+.casefile__page{border-top:var(--rule-thin) solid var(--neutral);margin-top:var(--s4);padding-top:var(--s4)}
.casefile__grid{display:grid;grid-template-columns:1fr;gap:var(--s3)}
@media(min-width:700px){.casefile__grid{grid-template-columns:220px 1fr;gap:var(--s4);align-items:start}}
.casefile__pagewrap{display:flex;justify-content:center}
.casefile__pageimg{width:100%;max-width:220px;border:var(--rule-std) solid var(--ink);
  transform:rotate(-2deg)}
.casefile__tag{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft)}
.casefile__task{margin-top:10px}
.casefile__buy{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s3);flex-wrap:wrap}
.casefile__price{font-weight:700;color:var(--signal);font-size:19px;font-family:var(--font-mono)}
.display--sm{font-size:clamp(20px,3vw,27px);line-height:1.15}

/* ---------- pagedemo: "here's what one useful page can do" ----------
   One authentic page, up to three numbered hotspot buttons, and the SAME
   explanations always printed as ordinary text below (never hidden) —
   the hotspots highlight/scroll to a note, they never gate it. An
   optional Blank/Example toggle swaps the image only where an approved
   fictional-example counterpart already exists (passed via data-example
   on the component root); the "Fictional example" label stays visible
   whenever that image is showing. */
.pagedemo{margin-top:var(--s4);display:grid;grid-template-columns:1fr;gap:var(--s4)}
/* A bare [hidden]{display:none} only exists in the UA stylesheet, which
   author CSS always outranks regardless of selector specificity — so
   `.pagedemo{display:grid}` above was silently defeating `el.hidden=true`
   on the homepage's non-selected product variants (found via live
   testing 2026-10-06: switching to CARE still rendered LIFE's pagedemo
   underneath). This re-asserts it with higher specificity than the bare
   class rule. Same fix applied to `.downloads-tour__fan-btn` below for
   the identical reason. */
.pagedemo[hidden]{display:none}
@media(min-width:800px){.pagedemo{grid-template-columns:minmax(0,340px) 1fr;align-items:start}}
.pagedemo__stage{position:relative;border:var(--rule-heavy) solid var(--ink);background:var(--surface-muted)}
.pagedemo__stage img{width:100%;display:block}
.pagedemo__exampletag{position:absolute;left:0;top:0;background:var(--signal);color:var(--text-inverse);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  padding:6px 10px}
.pagedemo__hotspot{position:absolute;left:var(--hx);top:var(--hy);transform:translate(-50%,-50%);
  width:32px;height:32px;border-radius:50%;background:var(--signal);color:var(--text-inverse);
  border:var(--rule-std) solid var(--bone);font-family:var(--font-mono);font-weight:700;font-size:14px;
  cursor:pointer;display:flex;align-items:center;justify-content:center}
.pagedemo__hotspot:hover,.pagedemo__hotspot:focus-visible{background:var(--ink)}
.pagedemo__hotspot[aria-expanded="true"]{background:var(--ink);outline:2px solid var(--signal);outline-offset:2px}
.pagedemo__toggle{display:inline-flex;margin-top:var(--s3);border:var(--rule-thin) solid var(--neutral)}
.pagedemo__toggle-btn{background:none;border:0;border-left:var(--rule-thin) solid var(--neutral);
  cursor:pointer;padding:9px 16px;min-height:44px;font-family:var(--font-mono);font-size:13px;
  letter-spacing:.04em;text-transform:uppercase;color:inherit}
.pagedemo__toggle-btn:first-child{border-left:0}
.pagedemo__toggle-btn[aria-pressed="true"]{background:var(--signal);color:var(--text-inverse)}
.pagedemo__notes{display:flex;flex-direction:column;gap:var(--s3)}
.pagedemo__note{display:flex;gap:12px;padding:var(--s3);border:var(--rule-thin) solid var(--neutral);
  transition:border-color .15s ease,background .15s ease}
/* Explicit ink text here, never inherited: this component is used inside
   both an ink-background section (homepage) and a plain bone/white
   section (product pages) — the pale .is-active background must always
   pair with dark text regardless of which ancestor section it's in, or
   a homepage activation renders white-on-near-white. Confirmed fixed via
   a direct computed-style assertion in tests/pagedemo-contrast.test.mjs. */
.pagedemo__note.is-active{border-color:var(--signal);background:var(--surface-muted);color:var(--ink)}
.pagedemo__note-num{flex:none;width:28px;height:28px;border-radius:50%;background:var(--ink);
  color:var(--text-inverse);font-family:var(--font-mono);font-weight:700;font-size:13px;
  display:flex;align-items:center;justify-content:center}
.pagedemo__note p{margin:0;font-size:15px;line-height:1.5}
.pagedemo__note strong{display:block;margin-bottom:3px}

/* ---------- downloads-tour: "what lands in your downloads" ----------
   A verified file-by-file summary stays visible as plain text at all
   times (the `.filecards`-style grid below it); the fanned preview is a
   one-shot reveal on deliberate activation, not required to understand
   the list. */
.downloads-tour{margin-top:var(--s4)}
.downloads-tour__stage{display:flex;flex-direction:column;align-items:center;gap:var(--s3);
  margin-bottom:var(--s5);padding-top:var(--s2)}
.downloads-tour__cards{position:relative;min-height:190px;display:flex;align-items:flex-end;
  justify-content:center;flex-wrap:wrap}
.downloads-tour__card{position:relative;width:110px;border:var(--rule-std) solid var(--ink);
  background:var(--bone);text-align:center;padding:0 0 10px;font-family:var(--font-mono);
  font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);cursor:zoom-in;
  transition:transform .5s cubic-bezier(.3,.7,.3,1);transition-delay:var(--fandelay,0s)}
.downloads-tour__card:hover,.downloads-tour__card:focus-visible{z-index:2}
.downloads-tour__card+.downloads-tour__card{margin-left:-86px}
.downloads-tour__cards.is-fanned .downloads-tour__card{transform:translateX(var(--fanx,0)) rotate(var(--fanr,0))}
.downloads-tour__card-img{width:100%;aspect-ratio:2/3;object-fit:cover;object-position:top;
  display:block;border-bottom:var(--rule-thin) solid var(--ink)}
.downloads-tour__card-label{display:block;padding-top:8px}
.downloads-tour__card-fmt{display:block;margin-top:2px;color:var(--signal);font-weight:700}
.downloads-tour__fan-btn{position:relative;z-index:3;display:block;margin:var(--s3) auto 0;
  background:var(--surface);border:var(--rule-thin) solid var(--ink);cursor:pointer;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  padding:8px 14px;min-height:44px}
.downloads-tour__fan-btn[hidden]{display:none}
@media(prefers-reduced-motion:reduce){.downloads-tour__cards.is-fanned .downloads-tour__card{transition:none}}

/* ---------- filing shelf: /products/ catalog ---------- */
.filingshelf{display:grid;grid-template-columns:1fr;gap:var(--s4);margin-top:var(--s4);
  list-style:none;padding:0}
@media(min-width:760px){.filingshelf{grid-template-columns:repeat(3,1fr)}}
.shelfcard{border:var(--rule-std) solid var(--ink);display:flex;flex-direction:column;background:var(--bone)}
.shelfcard__tab{background:var(--ink);color:var(--text-inverse);font-family:var(--font-mono);
  font-size:12px;letter-spacing:.1em;padding:8px 14px;align-self:flex-start;
  clip-path:polygon(6% 0,94% 0,100% 100%,0 100%)}
.shelfcard__cover{padding:var(--s3);display:flex;justify-content:center;background:var(--surface-muted)}
.shelfcard__cover img{width:100%;max-width:150px;border:var(--rule-thin) solid var(--ink)}
.shelfcard__body{padding:0 var(--s3) var(--s3);display:flex;flex-direction:column;gap:8px;flex:1}
.shelfcard__kicker{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft)}
.shelfcard__name{font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:24px;line-height:1}
.shelfcard__case{font-size:15px;line-height:1.4;color:var(--ink)}
.shelfcard__footer{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);
  margin-top:auto;padding-top:12px;border-top:var(--rule-thin) solid var(--neutral)}
.shelfcard__price{font-family:var(--font-mono);font-weight:700;color:var(--signal);font-size:18px}

/* ---------- closing statement: oversized ink/bone close ---------- */
.closing{background:var(--ink);color:var(--text-inverse);padding:var(--s6) 0;text-align:center}
@media(min-width:768px){.closing{padding:var(--s7) 0}}
.closing__head{font-size:clamp(32px,6vw,72px);max-width:18ch;margin:0 auto}
.closing__sub{font-family:var(--font-mono);font-size:14px;letter-spacing:.04em;color:var(--neutral);
  margin:var(--s3) auto 0;max-width:48ch}
.closing .cta-inline{margin:var(--s4) auto 0;max-width:360px}
.closing .cta-bar{background:var(--surface);color:var(--ink)}
.closing .cta-bar:hover{background:var(--signal);color:var(--text-inverse)}
.closing .cta-bar .price{color:var(--signal)}

/* ---------- product-page hero folder chrome ----------
   Applied on LIFE/HOME/CARE product pages: frames the existing
   .hero__cover / .hero__interior pairing with the same folder-tab
   language as the homepage, so a visitor landing directly on a product
   page sees the same system immediately. */
.hero__visual--filed{position:relative;padding-top:22px}
.hero__visual--filed::before{content:attr(data-filed-label);position:absolute;top:-1px;left:0;
  background:var(--ink);color:var(--text-inverse);font-family:var(--font-mono);font-size:12px;
  letter-spacing:.1em;padding:5px 12px 7px;clip-path:polygon(8% 0,92% 0,100% 100%,0 100%);z-index:1}

/* ---------- "a closer look inside": LIFE/HOME/CARE tab selector +
   thumbnail grid, homepage only. Manual tab switch (see the inline script
   in index.html) — no autoplay, no duplicate of the hero's single filled
   example. Thumbnails open the same standalone lightbox as everywhere
   else on the page (data-lb-src, wired by main.js). ---------- */
.product-tabs{display:inline-flex;border:var(--rule-thin) solid var(--ink)}
.product-tabs__btn{background:none;border:0;border-left:var(--rule-thin) solid var(--ink);
  padding:0 22px;min-height:44px;cursor:pointer;font-family:var(--font-mono);font-size:13px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.product-tabs__btn:first-child{border-left:0}
.product-tabs__btn:hover{color:var(--signal)}
.product-tabs__btn.is-active{background:var(--ink);color:var(--text-inverse)}
.product-tabs__btn.is-active:hover{color:var(--text-inverse)}
.closer-look__panel{margin-top:var(--s4)}
.closer-look__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3)}
@media(min-width:640px){.closer-look__grid{grid-template-columns:repeat(4,1fr)}}
.closer-look__grid figure{margin:0}
.closer-look__thumb{display:block;width:100%;padding:8px;margin:0;background:var(--surface);
  border:var(--rule-thin) solid var(--neutral);cursor:zoom-in}
.closer-look__thumb img{width:100%;display:block} /* the thumb's own border already
  frames it — see the matching note on .hh__example-btn img */
.closer-look__grid figcaption{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-soft);text-align:center;padding-top:8px}

/* ---------- lightbox (standalone single-image, used by hero/demo/situations/access-diff) ---------- */
.lightbox{border:var(--rule-heavy) solid var(--ink);padding:0;background:var(--surface-muted);
  max-width:min(92vw,760px);max-height:92vh;margin:auto}
.lightbox::backdrop{background:rgba(38,37,35,.82)}
.lightbox img{max-height:calc(92vh - 96px);width:auto;max-width:100%;margin:0 auto}
.lightbox__bar{display:flex;justify-content:space-between;align-items:center;
  border-top:var(--rule-std) solid var(--ink);padding:10px 14px;font-family:var(--font-mono);font-size:13px}
.lightbox__bar{gap:var(--s2)}
.lightbox__bar button{background:none;border:var(--rule-std) solid var(--ink);cursor:pointer;
  font-family:var(--font-mono);min-height:44px;min-width:44px;padding:8px 14px;
  white-space:nowrap;flex:none} /* the visible "Close" label must not wrap onto a
  second line when the caption text beside it is long */

/* ---------- carousel: "see inside the workbook" (10-page, one page shown at
   a time — readable, not a filmstrip of tiny thumbnails) ---------- */
.carousel{margin-top:var(--s4)}
.carousel__stage{display:flex;align-items:center;gap:var(--s2)}
.carousel__arrow{background:var(--ink);color:var(--text-inverse);border:0;cursor:pointer;flex:none;
  font-family:var(--font-mono);font-size:17px;min-width:44px;min-height:44px}
.carousel__arrow:hover{color:var(--signal)}
.carousel__arrow:disabled{opacity:.35;cursor:default;color:var(--text-inverse)}
.carousel__viewport{flex:1;min-width:0;overflow:hidden}
.carousel__track{display:flex;list-style:none;margin:0;padding:0;touch-action:pan-y;
  transition:transform .32s ease}
@media(prefers-reduced-motion:reduce){.carousel__track{transition:none}}
.carousel__slide{flex:0 0 100%;min-width:0;margin:0}
.carousel__pagebtn{display:block;position:relative;width:100%;padding:0;margin:0 auto;
  border:var(--rule-heavy) solid var(--ink);background:none;cursor:zoom-in;max-width:520px}
.carousel__pagebtn img{width:100%;display:block;user-select:none;-webkit-user-drag:none}
.carousel__zoomtag{position:absolute;left:0;right:0;bottom:0;background:var(--ink);color:var(--text-inverse);
  font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:7px 10px;text-align:left}
.carousel__meta{display:flex;justify-content:space-between;align-items:center;gap:var(--s2);
  margin-top:var(--s3);flex-wrap:wrap}
.carousel__count{font-size:13px;color:var(--ink-soft);letter-spacing:.06em;text-transform:uppercase}
.carousel__play{background:none;border:var(--rule-std) solid var(--ink);cursor:pointer;
  font-family:var(--font-mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  padding:10px 14px;min-height:44px;min-width:44px}
.carousel__play:hover{color:var(--signal);border-color:var(--signal)}
.carousel__play[aria-pressed="true"]{background:var(--ink);color:var(--text-inverse)}
@media(prefers-reduced-motion:reduce){.carousel__play{display:none}} /* auto-advance never offered when motion is reduced */

/* ---------- viewer: rich zoom/pan enlargement modal for the carousel ---------- */
.viewer{border:0;padding:0;margin:0;background:var(--surface-muted);width:100%;height:100%;
  max-width:100vw;max-height:100vh;flex-direction:column} /* display intentionally left
  unset here — <dialog>'s UA stylesheet default (display:none unless [open]) must win, or
  a closed dialog stays in the layout and eats clicks meant for the page underneath */
.viewer[open]{display:flex}
.viewer::backdrop{background:rgba(38,37,35,.95)}
@media(min-width:900px){.viewer{max-width:min(96vw,1400px);max-height:96vh;margin:auto;
  border:var(--rule-heavy) solid var(--ink)}}
.viewer__bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s2);
  border-bottom:var(--rule-std) solid var(--ink);padding:10px 14px;font-family:var(--font-mono);
  font-size:13px;flex:none;background:var(--surface-muted)}
.viewer__caption{color:var(--ink);letter-spacing:.04em;text-transform:uppercase}
.viewer__count{color:var(--ink-soft)}
.viewer__controls{display:flex;gap:8px;flex-wrap:wrap}
.viewer__btn{background:none;border:var(--rule-std) solid var(--ink);cursor:pointer;
  font-family:var(--font-mono);min-height:44px;min-width:44px;padding:8px 14px;white-space:nowrap}
.viewer__btn:hover{color:var(--signal);border-color:var(--signal)}
.viewer__btn--close{font-weight:700}
.viewer__stage{flex:1;min-height:0;overflow:hidden;position:relative;touch-action:none;background:var(--neutral)}
.viewer__img{position:absolute;top:0;left:0;transform-origin:0 0;max-width:none;
  user-select:none;-webkit-user-drag:none;cursor:grab}
.viewer__stage.is-panning .viewer__img{cursor:grabbing}

/* ---------- five sections: filing cards ----------
   Borrowed idea: a scannable card grid instead of a tab you have to click
   through one-at-a-time. Kept archival, not SaaS: square corners, a single
   red "tab" accent, one line of description, no shadows. */
.filecards{display:grid;grid-template-columns:1fr;gap:1px;background:var(--ink);
  border:var(--rule-std) solid var(--ink);margin-top:var(--s4)}
@media(min-width:560px){.filecards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.filecards{grid-template-columns:repeat(5,1fr)}}
.filecard{background:var(--bone);padding:var(--s3);position:relative}
.filecard::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--signal)}
.filecard .ref{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);margin-top:8px}
.filecard h3{font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:26px;line-height:1;margin:8px 0 10px}
.filecard p{margin:0;font-size:14px;line-height:1.5}

/* ---------- desire: "somebody asks you where it is" ---------- */
.askwhere{list-style:none;margin:0;padding:0;max-width:640px}
.askwhere li{font-family:var(--font-annot);font-size:1.7rem;line-height:1.3;color:var(--ink);
  padding:10px 0;border-bottom:var(--rule-thin) solid var(--neutral)}
.askwhere li:first-child{padding-top:0}

/* ---------- hero low-effort microcopy: noticeable, subordinate to the CTA ---------- */
.hero__lowfx{font-family:var(--font-annot);font-size:1.3rem;color:var(--ink);margin-top:14px}

/* ---------- product demo (real UGC video; placeholder until the final
   edited asset exists — see the HTML comment at the section itself) ---------- */
.demo-frame{position:relative;border:var(--rule-heavy) solid var(--ink);aspect-ratio:9/16;
  max-width:380px;margin:0 auto;overflow:hidden;background:var(--ink)}
.demo-frame img{width:100%;height:100%;object-fit:cover;opacity:.5;display:block}
.demo-frame__note{position:absolute;inset:0;display:flex;flex-direction:column;gap:10px;
  align-items:center;justify-content:center;text-align:center;color:var(--bone);
  font-family:var(--font-mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;padding:0 24px}
.demo-frame__note .dot{width:10px;height:10px;background:var(--signal);flex:none}
.demo video{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- before / after: self-recognition, not melodrama ---------- */
.transition{display:grid;gap:var(--s4);margin-top:var(--s4)}
@media(min-width:768px){.transition{grid-template-columns:1fr auto 1fr;align-items:start}}
.transition__before ul,.transition__after ul{list-style:none;margin:var(--s3) 0 0;padding:0}
.transition__before li{padding:9px 0;color:var(--ink-soft);font-size:16px;
  border-bottom:var(--rule-thin) solid var(--neutral)}
.transition__after li{padding:9px 0 9px 30px;position:relative;font-weight:700;font-size:16px;
  border-bottom:var(--rule-thin) solid var(--neutral)}
.transition__after li::before{content:"";position:absolute;left:0;top:17px;width:18px;height:4px;background:var(--signal)}
.transition__arrow{font-family:var(--font-mono);font-size:22px;color:var(--ink-soft);
  text-align:center;align-self:center}
@media(min-width:768px){.transition__arrow{transform:rotate(-90deg)}}

/* ---------- access differentiator ---------- */
.access-diff__pages{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);margin-top:var(--s4);max-width:640px}
.access-diff__pages button{display:block;border:var(--rule-std) solid var(--ink);padding:0;
  background:none;cursor:zoom-in;width:100%}
.access-diff__pages img{width:100%}
.access-diff__pages figcaption{font-family:var(--font-mono);font-size:12px;color:var(--ink-soft);
  letter-spacing:.06em;text-transform:uppercase;padding:8px 2px 0}
.access-diff__list{list-style:none;padding:0;display:grid;grid-template-columns:1fr;gap:2px 24px;margin-top:var(--s3);
  max-width:640px;font-family:var(--font-mono);font-size:15px}
@media(min-width:560px){.access-diff__list{grid-template-columns:1fr 1fr}}
.access-diff__list li{padding:7px 0 7px 20px;position:relative;border-bottom:var(--rule-thin) solid var(--neutral)}
.access-diff__list li::before{content:"—";position:absolute;left:0;color:var(--ink-soft)}

/* ---------- privacy sub-block (inside security section) ---------- */
.privacy-block{border-top:var(--rule-std) solid var(--ink);padding-top:var(--s4);margin-top:var(--s5);max-width:640px}

/* ---------- accessible disclosure (detail lists kept out of the main
   reading path, matching the .faq +/- pattern) ---------- */
.disclosure{max-width:640px}
.disclosure summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;
  align-items:center;gap:var(--s2);padding:14px 0;font-family:var(--font-mono);font-size:14px;
  font-weight:700;letter-spacing:.04em;text-transform:uppercase;min-height:44px;
  border-top:var(--rule-thin) solid var(--neutral);border-bottom:var(--rule-thin) solid var(--neutral)}
.disclosure summary::-webkit-details-marker{display:none}
.disclosure__more{color:var(--ink-soft);font-weight:400}
.disclosure summary::after{content:"+";font-family:var(--font-mono);color:var(--signal);font-size:18px;margin-left:10px}
.disclosure[open] summary::after{content:"\2212"}


/* ---------- demo: real blank vs. completed-example comparison ---------- */
.demo-compare{display:grid;grid-template-columns:1fr;gap:var(--s3);margin-top:var(--s4);max-width:760px}
@media(min-width:640px){.demo-compare{grid-template-columns:1fr 1fr}}
.demo-compare figure{margin:0}
.demo-compare img{width:100%;border:var(--rule-heavy) solid var(--ink);display:block}
.demo-compare figcaption{font-family:var(--font-mono);font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-soft);padding:10px 2px 0}
.demo-compare figcaption b{color:var(--ink)}
.demo-outcomes{list-style:none;margin:var(--s4) 0 0;padding:0;max-width:640px}
/* Was display:flex;gap;align-items — fine while every li was a single
   <strong> + plain-text run (one flex item wraps internally just like a
   paragraph), but a li with a THIRD inline element (e.g. a citation
   <a> — see the guides' checklists) splits into 4+ separate flex items,
   and flex items in the default nowrap row don't reflow relative to
   each other, only shrink to their own min-content floor — the sum
   overflowed a 390px viewport by 44px, a real bug caught via a live
   Playwright sweep. Matching .never-box/.transition__after's existing
   absolute-positioned-marker pattern instead keeps the li as normal
   block/inline flow, so it wraps exactly like a real paragraph no
   matter how many inline elements it contains. */
.demo-outcomes li{position:relative;padding:10px 0 10px 30px;
  border-bottom:var(--rule-thin) solid var(--neutral);font-size:17px}
.demo-outcomes li::before{content:"✓";position:absolute;left:0;top:10px;color:var(--signal);font-weight:700}

/* ---------- three recognizable situations ---------- */
.situations{display:grid;gap:var(--s4);margin-top:var(--s4)}
@media(min-width:640px){.situations{grid-template-columns:repeat(3,1fr)}}
.situations__item{border-top:var(--rule-std) solid var(--ink);padding-top:14px}
.situations__item p.display{font-size:24px;line-height:1.15}
.situations__item .body-copy{margin-top:8px;font-size:16px}
.situations__link{display:inline-block;margin-top:12px;background:none;border:0;padding:0;
  cursor:pointer;font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-soft);border-bottom:1px solid var(--neutral);min-height:32px}
.situations__link:hover{color:var(--signal);border-bottom-color:var(--signal)}

/* ---------- value moment: "everything you get for $19" ---------- */
.valuemoment{border-top:var(--rule-std) solid var(--ink);padding-top:var(--s4)}
.valuemoment__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4) var(--s3)}
@media(min-width:640px){.valuemoment__grid{grid-template-columns:repeat(4,1fr)}}
.valuemoment__grid div{display:flex;flex-direction:column;gap:4px}
.valuemoment__grid .display{line-height:1}

/* ---------- proof: ratings + testimonials (editorial, understated —
   no giant quote marks, no colored cards, no carousel) ---------- */
.testimonials{list-style:none;margin:0;padding:0;max-width:var(--measure)}
.testimonials li{padding:var(--s3) 0;border-bottom:var(--rule-thin) solid var(--neutral)}
.testimonials li:first-child{padding-top:0}
.testimonials blockquote{margin:0;font-family:var(--font-body);font-size:18px;line-height:1.5;color:var(--ink)}
.testimonials .attribution{display:block;margin-top:10px;font-family:var(--font-mono);
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.testimonials .stars{color:var(--signal);letter-spacing:.1em;margin-right:8px}

/* ---------- objection-killer: "before you ask..." ---------- */
.objection-list{list-style:none;margin:0;padding:0;max-width:640px;
  font-family:var(--font-mono);font-size:17px}
.objection-list li{padding:12px 0;border-bottom:var(--rule-thin) solid var(--neutral)}
.objection-list li b{text-transform:uppercase;letter-spacing:.04em}
.objection-list__price{font-weight:700;font-size:22px;border-bottom:0!important}

/* ---------- security ---------- */
.never-box{border:var(--rule-heavy) solid var(--signal);padding:var(--s4);max-width:640px}
.never-box h3{font-family:var(--font-mono);font-size:19px;font-weight:700;letter-spacing:.08em;color:var(--signal); /* AA large-text on bone */
  text-transform:uppercase;margin:0 0 var(--s3)}
.never-box ul{list-style:none;margin:0;padding:0}
.never-box li{padding:8px 0 8px 34px;position:relative;font-size:16px}
.never-box li::before{content:"";position:absolute;left:0;top:18px;width:22px;height:5px;background:var(--signal)}

/* ---------- how it works ---------- */
.steps{counter-reset:step;list-style:none;margin:var(--s4) 0 0;padding:0;max-width:720px}
.steps li{counter-increment:step;display:grid;grid-template-columns:56px 1fr;gap:var(--s2);
  padding:var(--s3) 0;border-bottom:var(--rule-thin) solid var(--neutral)}
.steps li::before{content:counter(step,decimal-leading-zero);font-family:var(--font-mono);
  font-weight:700;color:var(--signal);font-size:18px}
/* the one restrained ink-background section on the homepage — a deliberate,
   sparingly-used high-contrast break in an otherwise light page. Localized
   overrides only (never a global dark-mode variant): every element that
   would otherwise assume the bone background gets its ink-section color
   re-pointed here, each still meeting the same contrast bar as its bone
   counterpart (bone/neutral on ink measure 13.2:1 / 10.3:1 — both far
   past AA; signal on ink measures 3.15:1, same "large bold text only"
   ceiling already documented for signal on bone, so .red/.steps counters
   stay exactly as readable here as everywhere else they appear). */
.formsec--ink{background:var(--ink);color:var(--text-inverse)}
.formsec--ink .refmeta{color:var(--neutral)}
.formsec--ink .refmeta strong{color:var(--text-inverse)}
.formsec--ink .rule{border-top-color:var(--neutral)}
.formsec--ink .steps li{border-bottom-color:var(--ink-soft)}
.formsec--ink .cta-bar{background:var(--surface);color:var(--ink)}
.formsec--ink .cta-bar:hover{background:var(--signal);color:var(--text-inverse)}
.formsec--ink .cta-bar .price{color:var(--signal)}

/* ---------- purchase ---------- */
.purchase{border:var(--rule-heavy) solid var(--ink);padding:var(--s4);display:grid;gap:var(--s4);
  grid-template-columns:minmax(0,1fr)} /* minmax(0,1fr): the single mobile column defaults to
  min-width:auto and sizes itself to its widest child's content (the cover image's own
  max-width, the spec list, ...) instead of the available space — minmax(0,1fr) caps it. */
.purchase>*{min-width:0}
@media(min-width:900px){.purchase{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center}}
.purchase .spec{list-style:none;margin:var(--s3) 0;padding:0}
.purchase .spec li{display:flex;justify-content:space-between;gap:var(--s2);
  font-family:var(--font-mono);font-size:14px;padding:9px 0;border-bottom:var(--rule-thin) solid var(--neutral)}
.purchase .spec li span:first-child{color:var(--ink-soft);letter-spacing:.06em;text-transform:uppercase;
  font-size:12px;flex:none}
.purchase .spec li span:last-child{text-align:right;min-width:0}
.purchase__cover{border:var(--rule-heavy) solid var(--ink);width:100%;max-width:340px;min-width:0;margin:0 auto}

/* ---------- FAQ ---------- */
.faq{max-width:760px}
.faq details{border-bottom:var(--rule-thin) solid var(--neutral)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:var(--s2);
  padding:18px 0;font-weight:700;min-height:44px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--font-mono);color:var(--signal);font-size:20px}
.faq details[open] summary::after{content:"\2212"}
.faq .a{padding:0 0 18px;max-width:var(--measure)}

/* ---------- footer ---------- */
.site-foot{border-top:var(--rule-std) solid var(--ink);margin-top:var(--s7);padding:var(--s5) 0}
.site-foot .cols{display:grid;gap:var(--s4)}
@media(min-width:768px){.site-foot .cols{grid-template-columns:2fr 1fr 1fr}}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li{padding:4px 0}
.site-foot a{text-decoration:none;font-family:var(--font-mono);font-size:14px}
.site-foot .fine{font-family:var(--font-mono);font-size:12px;color:var(--ink-soft);margin-top:var(--s4)}

/* ---------- storefront: brand homepage + product collection ----------
   Shared by / and /products/ so the two card grids never drift — same
   markup pattern, values sourced from public/content/products.json.
   Redesigned compact card: a small, complete, uncropped cover beside the
   name/purpose near the top (not a full-height cropped cover a visitor has
   to scroll past first), a --surface panel on the now-white page
   background (distinguished by its own border, not a color difference —
   see --surface's note in :root), and a thin border instead of the old
   heavy box. */
.product-cards{display:grid;grid-template-columns:1fr;gap:var(--s3);margin-top:var(--s4)}
@media(min-width:700px){.product-cards{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.product-cards{grid-template-columns:1fr 1fr 1fr}}
.product-card{border:var(--rule-thin) solid var(--border);display:flex;flex-direction:column;
  gap:12px;background:var(--surface);padding:var(--s3)}
.product-card__top{display:flex;gap:var(--s3);align-items:flex-start}
.product-card__media{width:84px;flex:none;aspect-ratio:2/3;overflow:hidden;
  border:var(--rule-thin) solid var(--border);background:var(--surface-muted)}
.product-card__media img{width:100%;height:100%;object-fit:contain;display:block} /* contain, not
  cover — the whole cover stays visible and uncropped at this smaller size */
.product-card__intro{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;padding-top:2px}
.product-card__status{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-soft);display:inline-flex;align-items:center;gap:6px} /* a secondary label, not a
  dominant red one — red text this small would fail the a11y rule above anyway; the small dot
  carries the "available now" accent instead of the text color */
.product-card__status--available::before{content:"";width:6px;height:6px;flex:none;background:var(--signal)}
.product-card__status--soon{color:var(--ink-soft)}
.product-card__name{font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(20px,3.2vw,26px);line-height:1;margin:2px 0 0}
.product-card__subtitle{font-size:14px;line-height:1.35;color:var(--ink);margin:2px 0 0}
.product-card__desc{font-size:14px;line-height:1.5;color:var(--ink-soft);margin:0}
.product-card__footer{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;
  gap:10px var(--s2);margin-top:auto;padding-top:12px;border-top:var(--rule-thin) solid var(--neutral)}
.product-card__price{font-family:var(--font-mono);font-weight:700;color:var(--signal);font-size:17px}
.product-card__actions{display:flex;align-items:center;gap:var(--s3);margin-left:auto}
.product-card__preview{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  text-decoration:none;color:var(--ink-soft);border-bottom:1px solid var(--neutral);min-height:44px;
  display:inline-flex;align-items:center}
.product-card__preview:hover{color:var(--signal);border-bottom-color:var(--signal)}
.product-card__link{display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font-family:var(--font-mono);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-inverse);background:var(--ink);padding:0 16px;min-height:44px}
.product-card__link:hover{color:var(--text-inverse);background:var(--signal)}
/* HOME: typographic cover in place of unapproved interior imagery */
.home-cover{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;background:var(--ink);color:var(--bone);text-align:center;padding:var(--s3)}
.home-cover__mark{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft)}
.home-cover__name{font-family:var(--font-display);font-weight:700;font-size:clamp(26px,4.6vw,40px);
  line-height:.95;text-transform:uppercase}
.home-cover__tag{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--bone);padding:4px 12px}
/* homepage "how it works" reuses .steps; brand statement reuses .display */

/* ---------- HOME coming-soon page ---------- */
.home-status{display:inline-block;font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);border:var(--rule-thin) solid var(--ink-soft);
  padding:6px 12px;margin-bottom:var(--s3)}
.home-sections{display:grid;grid-template-columns:1fr;gap:1px;background:var(--ink);
  border:var(--rule-std) solid var(--ink);margin-top:var(--s4)}
@media(min-width:560px){.home-sections{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.home-sections{grid-template-columns:repeat(3,1fr)}}
.home-section{background:var(--bone);padding:var(--s3);position:relative}
.home-section::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--signal)}
.home-section h3{font-family:var(--font-mono);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  font-size:15px;margin:8px 0 8px}
.home-section p{margin:0;font-size:14px;line-height:1.5;color:var(--ink)}

/* ---------- guides: index (category jump + card grid) ----------
   Archival editorial system, not a blog theme: same filecard-style grid
   language as the five/six section cards, no images required on cards
   (kept text-forward/scannable — the excerpt image lives inside each
   article instead). Category filtering is two in-page anchors, so it
   works with zero JavaScript. */
.guide-jump{display:flex;gap:var(--s2);margin-top:var(--s3);flex-wrap:wrap}
.guide-jump a{font-family:var(--font-mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none;color:var(--ink);border:var(--rule-thin) solid var(--ink);padding:8px 16px;
  min-height:44px;display:inline-flex;align-items:center}
.guide-jump a:hover{border-color:var(--signal);color:var(--signal)}
.guide-cards{display:grid;grid-template-columns:1fr;gap:1px;background:var(--ink);
  border:var(--rule-std) solid var(--ink);margin-top:var(--s4)}
@media(min-width:640px){.guide-cards{grid-template-columns:repeat(3,1fr)}}
.guide-card{background:var(--bone);padding:var(--s3);position:relative;display:flex;flex-direction:column;gap:10px}
.guide-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--signal)}
.guide-card .ref{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-top:8px}
.guide-card h3{font-family:var(--font-display);font-weight:700;text-transform:none;
  font-size:21px;line-height:1.1;margin:8px 0 0}
.guide-card h3 a{color:var(--ink);text-decoration:none}
.guide-card h3 a:hover{color:var(--signal)}
.guide-card p{margin:0;font-size:14px;line-height:1.5;color:var(--ink);flex:1}
.guide-card__link{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-soft);text-decoration:none;border-bottom:1px solid var(--neutral);align-self:flex-start}
.guide-card__link:hover{color:var(--signal);border-bottom-color:var(--signal)}

/* ---------- guides: article (editorial layout) ----------
   Readable measure, restrained sentence-case headline (NOT the sales
   pages' giant uppercase .display--xl), short paragraphs, real headings.
   Body copy stays inside --measure (62ch) even where the page itself is
   wider, so line length never gets sales-page-loud. */
.breadcrumb{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:var(--s3)}
.breadcrumb a{color:var(--ink-soft);text-decoration:none}
.breadcrumb a:hover{color:var(--signal)}
.breadcrumb .is-current{color:var(--ink)}
.article__title{font-family:var(--font-display);font-weight:700;text-transform:none;
  line-height:1.08;letter-spacing:.002em;font-size:clamp(28px,4.4vw,44px);margin:10px 0 0;max-width:20ch}
.article__meta{font-family:var(--font-mono);font-size:13px;letter-spacing:.04em;color:var(--ink-soft);
  margin-top:var(--s3);display:flex;flex-wrap:wrap;gap:6px 10px}
.article__meta a{color:var(--ink-soft)}
.article__meta a:hover{color:var(--signal)}
.article__dek{font-size:19px;line-height:1.5;color:var(--ink);max-width:var(--measure);margin:var(--s3) 0 0}
.article__body{max-width:var(--measure);margin-top:var(--s5)}
.article__body p{margin:0 0 1.1em;font-size:17px;line-height:1.65}
.article__body h2{font-family:var(--font-display);font-weight:700;text-transform:none;
  font-size:clamp(21px,2.8vw,28px);line-height:1.15;margin:var(--s6) 0 var(--s2)}
.article__body h2:first-child{margin-top:0}
.article__body h3{font-family:var(--font-mono);font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  font-size:14px;margin:var(--s4) 0 10px;color:var(--ink)}
.article__body ul,.article__body ol{margin:0 0 1.2em;padding-left:1.3em}
.article__body li{margin:0 0 .5em;line-height:1.55}
/* :not(.cta-bar) — without it, this rule's (class+element) specificity
   beats .cta-bar's own (class-only) color rule, so a .cta-bar button
   nested in body copy (the callout's product link) rendered its .label
   in --ink on an --ink background: invisible, only the separately-
   ruled .price span (.cta-bar .price, 2 classes, higher specificity
   than either side) stayed visible. Same fix on :hover below, where
   the un-scoped rule was similarly overriding .cta-bar:hover's own
   color. A real bug, caught from the reviewed screenshots. */
.article__body a:not(.cta-bar){color:var(--ink);text-decoration-color:var(--neutral);text-underline-offset:3px}
.article__body a:not(.cta-bar):hover{color:var(--signal)}
.article__body strong{font-weight:700}
.article__figure{margin:var(--s4) 0;max-width:420px}
.article__figure-btn{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.article__figure-btn img{width:100%;border:var(--rule-heavy) solid var(--ink);display:block}
.article__figure figcaption{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-soft);padding:10px 2px 0}
.article__example{border-left:var(--rule-heavy) solid var(--signal);padding:2px 0 2px 20px;
  margin:var(--s4) 0;max-width:640px}
.article__example p{margin:0 0 .8em;font-size:16px;line-height:1.55}
.article__example p:last-child{margin-bottom:0}
.article__callout{border:var(--rule-heavy) solid var(--ink);padding:var(--s4);margin:var(--s5) 0;
  display:flex;flex-direction:column;gap:10px;max-width:560px}
.article__callout h3{font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:21px;margin:2px 0 0}
.article__callout p{margin:0;font-size:15px;line-height:1.5;color:var(--ink)}
.article__related{border-top:var(--rule-std) solid var(--ink);margin-top:var(--s6);padding-top:var(--s4);
  max-width:var(--maxw)}
.article__related ul{list-style:none;margin:var(--s3) 0 0;padding:0;display:grid;gap:var(--s3)}
@media(min-width:640px){.article__related ul{grid-template-columns:1fr 1fr}}
.article__related li{border-top:var(--rule-thin) solid var(--neutral);padding-top:10px}
.article__related a{font-family:var(--font-display);font-weight:700;text-transform:none;
  font-size:18px;text-decoration:none;color:var(--ink);line-height:1.2;display:block}
.article__related a:hover{color:var(--signal)}
.article__related p{margin:6px 0 0;font-size:13px;color:var(--ink-soft)}
.article__byline-link{color:var(--ink);text-decoration-color:var(--neutral)}
.article__byline-link:hover{color:var(--signal)}

/* ---------- 404 / legal ---------- */
.legal-body{max-width:var(--measure);padding:var(--s5) 0}
.legal-body h1{margin-bottom:var(--s3)}

/* ---------- utilities ---------- */
.mt-2{margin-top:var(--s2)}.mt-3{margin-top:var(--s3)}.mt-4{margin-top:var(--s4)}.mt-5{margin-top:var(--s5)}
.mt-6{margin-top:var(--s6)}.mt-7{margin-top:var(--s7)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fine-note{font-family:var(--font-mono);font-size:13px;letter-spacing:.04em;color:var(--ink-soft)}
.fine-note .annot{font-family:var(--font-annot);font-size:1.1rem;color:var(--ink-soft);margin-left:4px}

/* ---------- social proof: archival filing slip ---------- */
.sp-slip{position:fixed;left:20px;bottom:20px;z-index:60;max-width:340px;width:calc(100vw - 40px);
  background:var(--surface);border:var(--rule-std) solid var(--ink);
  opacity:0;transform:translateY(8px);transition:opacity .2s linear,transform .2s linear}
.sp-slip.sp-in{opacity:1;transform:none}
.sp-slip.sp-out{opacity:0;transform:translateY(8px)}
@media (prefers-reduced-motion:reduce){.sp-slip{transition:none;transform:none}}
.sp-head{display:flex;align-items:center;gap:8px;border-bottom:var(--rule-thin) solid var(--neutral);
  padding:8px 10px;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:var(--ink-soft)}
.sp-mark{width:10px;height:10px;background:var(--signal);flex:none}
.sp-x{margin-left:auto;background:none;border:0;cursor:pointer;font-size:18px;line-height:1;
  color:var(--ink);min-width:32px;min-height:32px}
.sp-body{padding:10px 12px 12px;font-family:var(--font-body);font-size:14px}
.sp-title{display:block;margin-top:6px;font-family:var(--font-mono);font-weight:700;font-size:12px;letter-spacing:.04em}
.sp-title b{color:var(--signal)}
@media(max-width:640px){.sp-slip{bottom:calc(64px + env(safe-area-inset-bottom,0px) + 14px);left:14px;max-width:300px}}

/* ---------- sticky mobile CTA (optional, quiet) ----------
   Shown only after the hero CTA has scrolled out of view, and hidden
   again whenever another primary CTA is already visible — see the
   IntersectionObserver in main.js. Reserves layout space only once it's
   actually eligible to appear, so it never causes a layout jump on pages
   /states where it never shows (e.g. reduced-motion or JS disabled). */
.sticky-cta{display:none}
@media(max-width:640px){
  .sticky-cta{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:55;
    align-items:center;justify-content:space-between;gap:var(--s2);
    background:var(--ink);color:var(--text-inverse);text-decoration:none;
    border-top:var(--rule-std) solid var(--ink);
    padding:14px 16px calc(14px + env(safe-area-inset-bottom,0px));
    font-family:var(--font-mono);font-weight:700;font-size:13px;
    letter-spacing:.06em;text-transform:uppercase;cursor:pointer;
    opacity:0;transform:translateY(100%);pointer-events:none;
    transition:opacity .2s linear,transform .2s linear}
  .sticky-cta.is-visible{opacity:1;transform:none;pointer-events:auto}
  body.sticky-cta-armed{padding-bottom:calc(56px + env(safe-area-inset-bottom,0px))}
  .sticky-cta .price{color:var(--signal);font-size:15px;white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){.sticky-cta{transition:none}}

/* ---------- success page ---------- */
.dl-panel{border:var(--rule-heavy) solid var(--ink);padding:var(--s4);max-width:640px}
.dl-status{font-family:var(--font-mono);font-size:14px;letter-spacing:.06em;color:var(--ink-soft)}
.dl-status.is-ready{color:var(--ink)}