/* v2.css — the v2 site set's single stylesheet (extracted verbatim from next.html 2026-08-30; next.html + the product pages all link it) */

:root{
  /* ── ONE DESIGN SYSTEM [2026-09-06, Ron: "I want a consistent design system for
     everything. It will evolve, but for now, apply my feedback and inputs and what
     we've discussed."] ──────────────────────────────────────────────────────────
     The v2 site ran a cool grey/peach palette (--ink #17191c, --paper #ffffff,
     --fog, --ash, --hair, --sienna) that shared nothing with the Sherpa brand, so
     the front door looked nothing like the documents behind it. The private names
     below are KEPT — 167 references across 891 lines still resolve — but each is
     now an alias onto the brand palette that `shared.css`, the vault design system
     and the engine's DOCUMENT_CSS all already agree on. Values are quoted, never
     invented. Reverting is this block; nothing else changed. */
  --ink:#1A1410;        /* ink-900   was #17191c (near-black, cool) */
  --paper:#FDFBF5;      /* cream-50  was #ffffff */
  --fog:#FDFBF5;        /* cream-50  was #fafafb */
  --mist:#F7F1E3;       /* cream-100 was #f2f2f3 */
  --hair:#E0D2B0;       /* cream-300 was #ececec — every rule and border on the site */
  --slate:#6B5E51;      /* ink-500   was #777b86 */
  /* ash/smoke carry SMALL label text (.tag 14px, .stage-n 13px, .wp .n 12px), and at
     ink-300 that measured 2.65:1 — an AA failure, and worse than the 2.92:1 they had.
     The document system uses ink-500 for exactly this role (eyebrows, meta), so this
     is more consistent, not less: 6.07:1, and the site's two muted greys collapse to
     the one muted ink the design system actually defines. ink-300 stays for the
     lightest decorative tier (citations), where DOCUMENT_CSS also puts it. */
  --ash:#6B5E51;        /* ink-500   was #979799 (2.92:1 → 6.07:1) */
  --smoke:#6B5E51;      /* ink-500   was #a3a6af (2.43:1 → 6.07:1) */
  --peach:#FCE6CC;      /* orange-100 was #fbe1d1 */
  --sienna:#9E4D0E;     /* orange-700 was #5d2a1a — the accent, now the brand's */
  /* the wash — the founder's note; warmed onto cream so it stops reading as a
     different product from the document it sits next to */
  --wash:#EFE6D0;       /* cream-200 was #e7eaef */
  --wash-ink:#3D332B;   /* ink-700   was #333b48 */

  /* The brand navy the DOCUMENTS lead with (cover, verdict head, close) had NO
     presence on the site at all — --ink is body text, so it could not simply become
     navy. This gives the one element that carries the most brand signal, the primary
     button, the same navy-900 a client sees on the cover of every Sherpa document. */
  --brand-dark:#0B1B30;   /* navy-900 */

  /* The document faces. Both were already shipped in site/fonts and declared
     nowhere, so the site rendered Inter/Source Serif while every document
     rendered Newsreader/Geist. Old values kept as the fallback chain. */
  --serif:'Newsreader','Source Serif 4',ui-serif,Georgia,'Times New Roman',serif;
  --sans:'Geist','Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  --t-caption:15px; --t-body:17px; --t-body-lg:20px; --t-sub:22px;
  --t-h-sm:26px; --t-h:44px; --t-h-lg:64px; --t-display:90px;

  --w:400; --w430:430; --w450:450; --w480:480; --w500:500;

  --s4:4px; --s8:8px; --s12:12px; --s16:16px; --s20:20px; --s24:24px;
  --s28:28px; --s32:32px; --s40:40px; --s64:64px; --s80:80px;
  --s96:96px; --s124:124px; --s128:128px; --s160:160px;

  --max:1200px; --gap:62px;
  --r-card:24px; --r-img:12px; --r-input:16px; --r-pill:9999px;
  --r-small:16px; --r-elev:20px;

  --elev:rgba(4,23,43,.05) 0 0 0 1px, rgba(0,0,0,.10) 0 20px 25px -5px, rgba(0,0,0,.10) 0 8px 10px -6px;
  --elev-lift:rgba(4,23,43,.06) 0 0 0 1px, rgba(0,0,0,.13) 0 34px 44px -10px, rgba(0,0,0,.09) 0 12px 16px -8px;

  --ease:cubic-bezier(.16,1,.3,1);

  --ease-arrive:cubic-bezier(.22,.61,.36,1);
}


*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:var(--t-body); font-weight:var(--w);
  line-height:1.35; -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
  caret-color:var(--sienna);
  overflow-x:hidden;
}
img{max-width:100%;display:block}
::selection{background:var(--peach);color:var(--sienna)}
:focus-visible{outline:2px solid var(--sienna);outline-offset:3px;border-radius:4px}
:where(a){color:inherit;text-decoration:none}
* {scrollbar-width:thin;scrollbar-color:#d6d6d9 transparent}
*::-webkit-scrollbar{width:11px;height:11px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:#d6d6d9;border-radius:9999px;border:3px solid var(--paper)}
*::-webkit-scrollbar-thumb:hover{background:#bcbcc2}
[id]{scroll-margin-top:96px}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--s32)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}


h1,h2,h3{font-weight:var(--w);letter-spacing:normal}
.display{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(38px,5.1vw,70px); line-height:1.14;
  letter-spacing:-.025em; text-wrap:balance;
}
.h-lg{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(28px,3vw,38px); line-height:1.18;
  letter-spacing:-.015em; text-wrap:balance;
}
.h{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(28px,3.4vw,var(--t-h)); line-height:1.2;
  letter-spacing:-.015em; text-wrap:balance;
}
.h-sm{
  font-family:var(--sans); font-weight:var(--w450);
  font-size:var(--t-h-sm); line-height:1.18; letter-spacing:-.009em;
}
.display em,.h-lg em,.h em{font-style:italic}
.lede{
  font-size:var(--t-body-lg); line-height:1.42; color:var(--slate);
  font-weight:var(--w430); max-width:34em; text-wrap:pretty;
}
.body{font-size:var(--t-body);line-height:1.5;max-width:36em;text-wrap:pretty}
.muted{color:var(--slate)}
.cap{font-size:var(--t-caption);line-height:1.5;color:var(--slate)}
.tag{font-size:14px;font-weight:var(--w);color:var(--ash);line-height:1}


.pill{
  display:inline-flex;align-items:center;gap:9px;
  height:48px;padding:0 var(--s24);border-radius:var(--r-pill);
  font-size:16px;font-weight:var(--w450);line-height:1;
  border:1px solid transparent;white-space:nowrap;
  transition:background .32s var(--ease),color .32s var(--ease),
             border-color .32s var(--ease),transform .32s var(--ease);
}
.pill--fill{background:var(--brand-dark);color:var(--paper);border-color:var(--brand-dark)}
.pill--fill:hover{background:#000;transform:translateY(-1px)}
.pill--ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.pill--ghost:hover{background:var(--brand-dark);color:var(--paper);transform:translateY(-1px)}
.pill svg{width:15px;height:15px;transition:transform .32s var(--ease)}
.pill:hover svg{transform:translateX(3px)}
.pill--sm{height:42px;padding:0 var(--s20);font-size:15px}
/* The specimen link — a third KIND, not a third button.
   Three rulings had to hold at once, and the first two attempts each broke one:
   a grey text link read as an afterthought (Ron 09-04: it "needs to look like a
   call to action"), then a quiet pill still read as a third door (Ron 09-06:
   "too similar to the main calls to action... a different kind of button").
   The fix is to stop conflating the two axes the pill was fusing:
     · HIERARCHY comes from SHAPE — the doors are pills, so anything without a
       pill container is categorically not a door, however legible it is.
     · PROMINENCE comes from CONTRAST — so this gets full ink and a standing
       underline. Dropping contrast is what made the last one look disabled.
   The leading glyph is `i-frame`, the site's own mark for a worked artifact
   (`.artifact-note` carries it): this points at a document to read, not an
   action to take, and says so in the vocabulary the rest of the page uses. */
.link{
  display:inline-flex;align-items:center;gap:7px;
  font-size:16px;font-weight:var(--w430);line-height:1;
  border-bottom:1px solid transparent;padding-bottom:2px;
  transition:border-color .3s var(--ease);
}
.link:hover{border-bottom-color:currentColor}
.link svg{width:14px;height:14px;transition:transform .3s var(--ease)}
.link:hover svg{transform:translateX(3px)}
.link--sample{
  font-size:15.5px;color:var(--ink);gap:9px;
  border-bottom:1px solid #c9cad1;padding-bottom:3px;
}
.link--sample .doc{width:15px;height:15px;color:var(--sienna,#5d2a1a);flex:none;transform:none}
.link--sample:hover{border-bottom-color:var(--ink)}
.link--sample:hover .doc{transform:none}

.actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s16)}


.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  transition:background .4s var(--ease),box-shadow .4s var(--ease);
}
.nav::before{
  content:'';position:absolute;inset:0;background:var(--paper);
  opacity:0;transition:opacity .4s var(--ease);
}
.nav.is-stuck::before{opacity:1}
.nav.is-stuck{box-shadow:0 1px 0 rgba(23,25,28,.07)}
.nav-in{
  position:relative;max-width:var(--max);margin:0 auto;
  padding:var(--s20) var(--s32);
  display:flex;align-items:center;gap:var(--s32);
}
.logo{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.logo svg{height:24px;width:auto;color:var(--ink)}
.logo span{font-family:var(--serif);font-size:21px;font-weight:500;letter-spacing:-.01em}
.nav-links{display:flex;align-items:center;gap:var(--s28);margin:0 auto}
.nav-links a{
  font-size:16px;font-weight:var(--w);padding:2px 0;color:var(--ink);
  position:relative;
}
.nav-links a::after{
  content:'';position:absolute;left:0;right:0;bottom:-3px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .34s var(--ease);
}
.nav-links a:hover::after,.nav-links a[aria-current="true"]::after{transform:scaleX(1)}
.nav-cta{display:flex;align-items:center;gap:var(--s20);flex:0 0 auto}
.nav-toggle{display:none}


.hero{padding:calc(var(--s64) + 60px) 0 0;position:relative}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:var(--s40);align-items:start}
.hero-copy{padding-top:var(--s24)}
.hero h1{margin-bottom:var(--s24);max-width:15ch}
.hero .lede{margin-bottom:var(--s16);max-width:29em}
.hero .body{max-width:29em}
.hero .actions{margin-top:var(--s32)}
.hero-fine{margin-top:var(--s20);max-width:36em}

.hero-art{position:relative;margin-right:calc(var(--s32) * -1)}
.artifact{
  background:var(--paper);border-radius:var(--r-elev);
  box-shadow:var(--elev);overflow:hidden;
  transition:box-shadow .5s var(--ease),transform .5s var(--ease);
}
.artifact img{width:100%;height:auto}
.hero-art .artifact{transform:rotate(-.5deg)}
.artifact-note{
  font-size:13px;color:var(--smoke);margin-top:var(--s12);
  display:flex;align-items:center;gap:7px;line-height:1.4;
}
.artifact-note svg{width:12px;height:12px;flex:0 0 12px;color:var(--smoke)}

/* floating small card overlapping the email */
.float-terrain{
  position:relative;z-index:3;width:262px;margin:-58px 0 0 -30px;
  background:var(--paper);border-radius:var(--r-small);
  box-shadow:var(--elev);padding:var(--s16) var(--s20) var(--s16);
}
.float-terrain b{display:block;font-size:13px;font-weight:var(--w500);letter-spacing:.02em;color:var(--ash);margin-bottom:9px}
.float-terrain dl{display:grid;gap:7px}
.float-terrain div{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;line-height:1.3}
.float-terrain dt{color:var(--slate)}
.float-terrain dd{font-weight:var(--w480);text-align:right}

/* ── the ridgeline ── */
.ridge{margin-top:var(--s40);position:relative}
.ridge svg{width:100%;height:auto;display:block}
.ridge-base{position:relative;
  -webkit-mask-image:linear-gradient(to bottom,#000 38%,rgba(0,0,0,0) 97%);
  mask-image:linear-gradient(to bottom,#000 38%,rgba(0,0,0,0) 97%)}
.ridge-over{position:absolute;inset:0;height:100%!important}
.ridge-marks{overflow:visible}
.ridge-far{fill:#f4f4f5}
.ridge-mid{fill:#eaeaec}
.ridge-line{fill:none;stroke:var(--ink);stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round}
.contour{fill:none;stroke:#e4e4e7;stroke-width:1}
.wp-dot{fill:var(--paper);stroke:var(--ink);stroke-width:1.6}
.wp-core{fill:var(--ink)}
.ridge-labels{
  position:absolute;inset:0;pointer-events:none;
}
.wp{
  position:absolute;transform:translate(-50%,0);pointer-events:auto;
  text-align:center;white-space:nowrap;
}
.wp a{display:block;padding:6px 4px 0}
.wp .n{
  font-size:12px;font-weight:var(--w500);color:var(--ash);
  letter-spacing:.1em;display:block;margin-bottom:3px;
}
.wp .l{
  font-family:var(--serif);font-size:20px;font-weight:400;
  letter-spacing:-.01em;color:var(--ink);display:block;
  border-bottom:1px solid transparent;transition:border-color .3s var(--ease);
}
.wp a:hover .l{border-bottom-color:var(--ink)}


section{padding:var(--gap) 0}
.band-fog{background:var(--fog)}
.band-mist{background:var(--mist)}
.sec-head{max-width:44ch;margin-bottom:var(--s40)}
.sec-head .h-lg{margin-bottom:var(--s20)}
.sec-head--wide{max-width:52ch}

/* the arithmetic */
.figs{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s64);align-items:start}
.fig-n{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(56px,7.4vw,104px);line-height:1;letter-spacing:-.035em;
  margin-bottom:var(--s16);
}
.fig-n i{font-style:normal;font-size:.42em;line-height:1;letter-spacing:-.01em;
  vertical-align:.42em;margin-left:.02em}
.fig > p:not(.fig-n){font-size:var(--t-body-lg);line-height:1.42;max-width:22em;font-weight:var(--w430)}
.src{margin-top:var(--s40);font-size:13.5px;color:var(--smoke);line-height:1.5;max-width:60ch}
.src em{font-style:italic}

/* stages */
.stage{
  display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:var(--s64);align-items:center;padding:var(--s64) 0;
  border-top:1px solid var(--hair);
}
.stage:first-of-type{border-top:0;padding-top:0}
.stage--tall{grid-template-columns:minmax(0,1fr) minmax(0,.76fr)}
.stage--flip{grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr)}
.stage--flip .stage-copy{order:2}
.stage--flip .stage-art{order:1}
.stage-n{
  display:flex;align-items:baseline;gap:12px;margin-bottom:var(--s20);
}
.stage-n b{font-size:13px;font-weight:var(--w500);color:var(--ash);letter-spacing:.1em}
.stage-n i{flex:1;height:1px;background:var(--hair);font-style:normal}
.stage h3{margin-bottom:var(--s16)}
.stage .body{margin-bottom:var(--s20);color:#33363b}
.replaces{
  font-size:15px;line-height:1.5;color:var(--slate);font-style:italic;
  padding-left:var(--s16);border-left:1px solid var(--hair);max-width:32em;
}
.stage-art .artifact-note{max-width:40em}

/* the three words — an editorial glossary, ruled like the stages */
.defs{display:grid}
.def{
  display:grid;grid-template-columns:minmax(0,.38fr) minmax(0,1fr);
  gap:var(--s64);align-items:baseline;
  padding:var(--s40) 0;border-top:1px solid var(--hair);
}
.def:last-child{border-bottom:1px solid var(--hair)}
.def dt{
  font-family:var(--serif);font-size:var(--t-h);line-height:1.14;
  letter-spacing:-.02em;font-weight:400;font-style:italic;
}
.def dd .body{max-width:34em;color:#33363b;margin-bottom:var(--s16)}
.def-tell{
  display:flex;gap:12px;align-items:baseline;
  font-size:15px;line-height:1.5;font-weight:var(--w480);max-width:34em;
}
.def-tell i{
  flex:0 0 18px;height:1px;background:var(--ink);
  font-style:normal;transform:translateY(-.42em);
}

/* inbox / promises */
.inbox-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:var(--s64);align-items:center}
.promises{list-style:none;margin-top:var(--s32);display:grid;gap:var(--s16)}
.promises li{display:flex;gap:12px;align-items:flex-start;font-size:var(--t-body);line-height:1.45}
.promises svg{width:16px;height:16px;flex:0 0 16px;margin-top:4px;color:var(--ink)}

/* compounding */
.compare{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s40);align-items:end}
.compare-col > .h-sm{margin-bottom:var(--s8)}
.compare-col > .cap{margin-bottom:var(--s24)}
.compare .artifact{border-radius:var(--r-img)}

.compare-mid{
  grid-column:1 / -1;text-align:center;padding:var(--s16) 0 0;
}

/* depth tiers */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s24)}
.tier{background:var(--mist);border-radius:var(--r-card);padding:var(--s32) var(--s24) var(--s28)}
.tier h3{margin-bottom:var(--s8)}
.tier > .cap{margin-bottom:var(--s24);min-height:3em}
.tier ul{list-style:none;display:grid;gap:10px}
.tier li{font-size:16px;line-height:1.35;padding-left:var(--s16);position:relative}
.tier li::before{
  content:'';position:absolute;left:0;top:.55em;width:5px;height:5px;
  border-radius:50%;background:var(--smoke);
}
.spine{
  margin-top:var(--s32);padding-top:var(--s24);
  border-top:1px solid var(--hair);font-size:var(--t-body);line-height:1.5;
  max-width:52ch;
}

/* the wash — the founder's note, the page's one cool surface */
.accent{
  background:var(--wash);color:var(--wash-ink);border-radius:var(--r-card);
  padding:var(--s64) var(--s40);
}
.accent blockquote{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(28px,3.3vw,44px);line-height:1.16;letter-spacing:-.02em;
  margin-bottom:var(--s28);text-wrap:balance;
}

/* the founder's note — a signed hand, not a monument */
.note{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:var(--s64);align-items:start}
.note-who img{
  width:104px;height:104px;border-radius:var(--r-img);
  object-fit:cover;margin-bottom:var(--s20);
  box-shadow:0 0 0 1px rgba(51,59,72,.16);
}
.note-who b{display:block;font-size:var(--t-body);font-weight:var(--w480);line-height:1.35}
.note-who span{display:block;font-size:15px;line-height:1.5;opacity:.74;margin-top:2px}
.note-who .link{margin-top:var(--s16);font-size:15px;color:var(--wash-ink);border-bottom-color:rgba(51,59,72,.34)}
.note-who .link:hover{border-bottom-color:var(--wash-ink)}
.note-body p{font-size:var(--t-body);line-height:1.55;max-width:40em}
.note-body p + p{margin-top:var(--s20)}
.note-body b{font-weight:var(--w480)}
.note-rule{
  width:32px;height:1px;background:currentColor;opacity:.28;
  margin:var(--s28) 0;
}

/* the one place he speaks for himself — set as correspondence, not copy */
.letter{
  background:var(--mist);border-radius:var(--r-card);
  max-width:760px;margin:0 auto;padding:var(--s40) var(--s64) var(--s64);
}
.letter-from{
  font-size:13px;font-weight:var(--w500);letter-spacing:.1em;color:var(--slate);
  padding-bottom:var(--s16);border-bottom:1px solid #e4e4e6;margin-bottom:var(--s32);
}
.letter h2{
  font-family:var(--serif);font-weight:400;font-size:30px;line-height:1.2;
  letter-spacing:-.015em;margin-bottom:var(--s24);
}
.letter blockquote p{
  font-family:var(--serif);font-size:var(--t-body-lg);line-height:1.55;
  letter-spacing:-.003em;
}
.letter blockquote p + p{margin-top:var(--s20)}
.letter figcaption{
  margin-top:var(--s32);font-family:var(--serif);font-style:italic;
  font-size:var(--t-body);color:var(--slate);
}

/* asked directly — the glossary's rule, turned to questions */
.qa{display:grid}
.qa-row{
  display:grid;grid-template-columns:minmax(0,.38fr) minmax(0,1fr);
  gap:var(--s64);align-items:baseline;
  padding:var(--s40) 0;border-top:1px solid #e7e7ea;
}
.qa-row:last-child{border-bottom:1px solid #e7e7ea}
.qa dt{
  font-family:var(--serif);font-weight:400;font-size:var(--t-h-sm);
  line-height:1.18;letter-spacing:-.015em;text-wrap:balance;
}
.qa dd{
  margin:0;font-size:var(--t-body);line-height:1.55;
  color:#33363b;max-width:38em;
}
.qa dd b{font-weight:var(--w480);color:var(--ink)}

/* the fair question — a ledger, ruled rather than boxed */
.ledger{width:100%;border-collapse:collapse;table-layout:fixed}
.ledger th,.ledger td{text-align:left;vertical-align:top}
.ledger th{padding:0 var(--s40) var(--s16) 0;border-bottom:1px solid var(--hair)}
.ledger th:first-child{width:40%}
.ledger th:last-child{border-bottom-color:var(--ink);padding-right:0}
.ledger-h{font-size:13px;font-weight:var(--w500);letter-spacing:.1em;color:var(--slate)}
.ledger th:last-child .ledger-h{color:var(--ink)}
.ledger td{
  padding:var(--s28) var(--s40) var(--s28) 0;
  font-size:var(--t-body);line-height:1.45;
  border-right:1px solid var(--hair);
}
.ledger td:last-child{
  padding-right:0;padding-left:var(--s40);
  border-right:0;color:#33363b;font-weight:var(--w430);
}
.ledger tbody tr + tr td{border-top:1px solid var(--hair)}
.ledger tbody tr:last-child td{border-bottom:1px solid var(--hair)}
.ledger td:first-child{color:var(--slate)}
.ledger-lbl{display:none}
.ledger-note{margin-top:var(--s32);max-width:52ch}

/* pricing */
/* --slate is 4.23:1 at 20px, and 20px is not WCAG "large text" (24px is). */
#pricing .lede{color:#666a75}

/* The free door, stated once above the four rooms. */
.prices-free{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s20);
  margin-bottom:var(--s32);padding-bottom:var(--s32);
  border-bottom:1px solid var(--hair);
}
.prices-free p{font-size:var(--t-body);line-height:1.45;max-width:34em}
.prices-free b{font-weight:var(--w480)}

/* minmax(0,1fr) — an auto floor lets one long price set the width of all four. */
.prices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s24)}
.price{
  background:var(--mist);border-radius:var(--r-card);
  padding:var(--s32) var(--s28) var(--s28);display:flex;flex-direction:column;
}
.price-top{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s20);margin-bottom:var(--s4)}
.price h3{font-family:var(--serif);font-size:26px;font-weight:400;letter-spacing:-.015em;line-height:1.2}
.price .amt{font-size:var(--t-body-lg);font-weight:var(--w480);line-height:1.3;text-align:right}
/* A3 2026-09-09: the founding box states the YEAR first, then its qualifiers small.
   One .amt line carrying price + per-person + firm seat wrapped to three lines on a
   phone and read as a paragraph, which is the verbosity the pricing steer forbids. */
.price .amt .amt-sub{display:block;font-size:var(--t-caption);font-weight:400;color:var(--wash-ink);line-height:1.4;margin-top:4px;opacity:.85}
/* status is load-bearing, so it clears AA rather than sitting at --ash's 2.9:1 */
.price .status{font-size:14px;color:#5b5f6a;line-height:1.35;margin-bottom:var(--s12)}
.price .said{font-size:16px;font-style:italic;color:#5b5f6a;margin-bottom:var(--s16)}
.price > p{font-size:16px;line-height:1.5;margin-bottom:var(--s20)}
.price ul{list-style:none;display:grid;gap:8px;margin-bottom:var(--s24)}
.price li{font-size:15px;line-height:1.4;padding-left:var(--s16);position:relative;color:#33363b}
.price li::before{content:'';position:absolute;left:0;top:.5em;width:4px;height:4px;border-radius:50%;background:#83879180}
.price-foot{margin-top:auto}
/* DESIGN.md's Text Link spec is padding 20px 0; 12px clears SC 2.5.8's 24px floor. */
.price-foot .link{padding:var(--s12) 0 calc(var(--s12) + 2px)}
.price-foot .actions{gap:var(--s12) var(--s16)}

/* The wide rows earn their width with a real second column, not dead grey. */
.price--wide{grid-column:1 / -1}
@media (min-width:821px){
  .price--wide{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);
    column-gap:var(--s64);align-items:start;
  }
  .price--wide > *{grid-column:1}
  /* the header keeps the full width, so all four prices hold one right edge */
  .price--wide .price-top{grid-column:1 / -1}
  .price--wide .price-aside{grid-column:2;grid-row:2 / span 99;margin:0}
}
.price-aside{display:flex;flex-direction:column;justify-content:center;gap:var(--s16)}

/* Twenty seats — the page's chromatic event, on the one thing buyable today. */
.price--accent{background:#faf7f0;border:1px solid #e6dfd2;color:var(--ink)}
.price--accent .said{color:#6f6a60}
.price--accent li{color:#3c3e44}
.price--accent li::before{background:#3c3e4466}
.price--accent .status{color:#6f6a60}
.price--accent .amt,.price--accent h3{color:var(--ink)}
.price--accent .pill--fill{background:var(--brand-dark);color:var(--paper);border-color:var(--brand-dark)}
.price--accent .pill--fill:hover{background:#000}
.price--accent .pill--ghost{color:var(--ink);border-color:#17191c47}
.price--accent .pill--ghost:hover{background:var(--brand-dark);color:var(--paper);border-color:var(--brand-dark)}


/* the rule runs full width; the content insets to the cards' own edge so all
   four prices keep one axis */
.summit{margin-top:var(--s40);padding:var(--s40) var(--s28) 0;border-top:1px solid var(--hair)}
.summit-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s20);margin-bottom:var(--s4)}
.summit-head h3{font-family:var(--serif);font-size:26px;font-weight:400;letter-spacing:-.015em;line-height:1.2}
.summit .amt{font-size:var(--t-body-lg);font-weight:var(--w480);line-height:1.3;text-align:right}
.summit .status{font-size:14px;color:#5b5f6a;line-height:1.35;margin-bottom:var(--s24)}
.summit .said{font-size:16px;font-style:italic;color:#5b5f6a;margin-bottom:var(--s16)}
.summit p{font-size:16px;line-height:1.5}
.summit ul{list-style:none;display:grid;gap:8px}
.summit li{font-size:15px;line-height:1.4;padding-left:var(--s16);position:relative;color:#33363b}
.summit li::before{content:'';position:absolute;left:0;top:.5em;width:4px;height:4px;border-radius:50%;background:#83879180}
.summit-foot{margin-top:var(--s24)}
@media (min-width:821px){
  .summit-body{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);
    column-gap:var(--s64);align-items:start;
  }
  .summit-body > *{grid-column:1}
  .summit-body > ul{grid-column:2;grid-row:1 / span 99}
}

/* spaced far enough apart to be counted, not read as a rule */
.seats{display:grid;grid-template-columns:repeat(20,1fr);gap:0;margin-bottom:var(--s20);max-width:420px}
.seats i{width:100%;max-width:11px;height:14px;display:block;color:#17191c8a}
.seats svg{width:100%;height:100%}

/* try him */
.try-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:var(--s64);align-items:center}
.steps{list-style:none;display:grid;gap:var(--s20);margin:var(--s32) 0 var(--s32);counter-reset:s}
.steps li{display:flex;gap:var(--s16);align-items:baseline;font-size:var(--t-body);line-height:1.45;max-width:34em}
.steps li::before{
  counter-increment:s;content:counter(s,decimal-leading-zero);
  font-size:13px;font-weight:var(--w500);color:var(--ash);letter-spacing:.08em;flex:0 0 auto;
}

/* trust */
.trust-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s64)}
.mech{list-style:none;display:grid;gap:var(--s20)}
.mech li{display:flex;gap:12px;align-items:flex-start}
.mech svg{width:16px;height:16px;flex:0 0 16px;margin-top:4px}
.mech b{font-weight:var(--w480)}
.mech span{color:var(--slate)}

/* close */
.close{text-align:center;padding:var(--s128) 0 var(--s96)}
.close .display{max-width:16ch;margin:0 auto var(--s24)}
.close .lede{margin:0 auto var(--s40);text-align:center}
.close .actions{justify-content:center}

/* footer */
.foot{border-top:1px solid var(--hair);padding:var(--s64) 0 var(--s40)}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:var(--s40)}
.foot h4{font-size:13px;font-weight:var(--w500);letter-spacing:.08em;color:var(--ash);margin-bottom:var(--s16)}
.foot ul{list-style:none;display:grid;gap:10px}
.foot a{font-size:16px;color:var(--ink);border-bottom:1px solid transparent;transition:border-color .3s var(--ease)}
.foot a:hover{border-bottom-color:var(--ink)}
.foot-brand p{font-size:16px;line-height:1.5;color:var(--slate);max-width:32em;margin-top:var(--s16)}
.foot-fine{
  margin-top:var(--s64);padding-top:var(--s24);border-top:1px solid var(--hair);
  font-size:13.5px;color:var(--smoke);line-height:1.6;
}



/* ── the overture ────────────────────────────────────────── */
.hero-copy > *{animation:settle .66s var(--ease-arrive) backwards}
.hero-copy > *:nth-child(1){animation-delay:.05s}
.hero-copy > *:nth-child(2){animation-delay:.13s}
.hero-copy > *:nth-child(3){animation-delay:.20s}
.hero-copy > *:nth-child(4){animation-delay:.27s}
.hero-copy > *:nth-child(5){animation-delay:.33s}
@keyframes settle{from{opacity:0;transform:translateY(9px)}}

.hero-art{animation:deliver .8s var(--ease-arrive) .24s backwards}
.float-terrain{animation:deliver .7s var(--ease-arrive) .52s backwards}
@keyframes deliver{from{opacity:0;transform:translateY(22px)}}


.ridge-line,.contour{stroke-dasharray:var(--len,2400);stroke-dashoffset:0}
.ridge-line{animation:draw 2.1s var(--ease) 1.2s backwards}
.contour{animation:draw 2.1s var(--ease) 1.34s backwards}
@keyframes draw{from{stroke-dashoffset:var(--len,2400)}}
.wp{animation:rise .8s var(--ease-arrive) backwards;animation-delay:calc(1.84s + var(--i) * .16s)}
.wp-mark{animation:pop .7s var(--ease) backwards;animation-delay:calc(1.7s + var(--i) * .16s)}
@keyframes rise{from{opacity:0;transform:translate(-50%,10px)}}
@keyframes pop{from{opacity:0}}

/* ── a waypoint and its point on the line are one thing ──── */
.wp a{transition:transform .38s var(--ease)}
.wp a:hover,.wp a:focus-visible{transform:translateY(-2px)}
.wp-halo{
  fill:none;stroke:var(--ink);stroke-width:1;opacity:0;
  transform-box:fill-box;transform-origin:center;transform:scale(.45);
  transition:opacity .38s var(--ease),transform .38s var(--ease);
}
.wp-core{transition:r .38s var(--ease)}
.wp-mark.is-live .wp-halo{opacity:.3;transform:scale(1)}
.wp-mark.is-live .wp-core{r:3.7}

/* ── arriving at the stage a waypoint pointed to ─────────── */
.stage-n i{transform-origin:left}
.stage.is-arrived .stage-n i{animation:rule .6s var(--ease) .4s backwards}
.stage.is-arrived .stage-n b{animation:named 1.1s var(--ease) .4s backwards}
@keyframes rule{from{transform:scaleX(0)}}
@keyframes named{from{color:var(--ink)}}

/* ── quiet arrivals ──────────────────────────────────────── */

@media (prefers-reduced-motion:no-preference){
  .obs .rev{
    opacity:0;transform:translate3d(0,14px,0);
    transition:opacity .6s var(--ease-arrive),transform .66s var(--ease-arrive);
    transition-delay:var(--rev-d,0ms);
  }
  .obs .rev.is-in{opacity:1;transform:none}
  /* twenty seats, planted the way the waypoints are */
  .seats.is-in i{animation:pop .5s var(--ease) backwards;animation-delay:calc(var(--i) * 18ms)}
}

/* ── a work product answers the pointer ──────────────────── */
.artifact:hover{box-shadow:var(--elev-lift);transform:translateY(-3px)}
.hero-art .artifact:hover{transform:rotate(-.5deg) translateY(-3px)}


@media (prefers-reduced-motion:reduce){
  .hero-copy > *,.hero-art,.float-terrain,.wp,.wp-mark,.seats.is-in i,
  .sheet[data-open] nav a,.sheet[data-open] .actions{animation:none}
  .ridge-line,.contour{animation:none;stroke-dashoffset:0}
  .stage.is-arrived .stage-n i,.stage.is-arrived .stage-n b{animation:none}
  .rev{opacity:1;transform:none}
  .pill--fill:hover,.pill--ghost:hover,.artifact:hover,
  .wp a:hover,.wp a:focus-visible{transform:none}
  .hero-art .artifact:hover{transform:rotate(-.5deg)}
  .pill:hover svg,.link:hover svg{transform:none}
  .sheet,.sheet[data-open]{transition-duration:.12s}
  html{scroll-behavior:auto}
}

/* Resting state, used by print and by screenshot capture (?still).
   Everything animated resolves to its finished appearance. */
.still *,.still *::before,.still *::after{animation:none !important;transition:none !important}
.still .rev,.still .wp,.still .wp-mark,.still .seats i,
.still .hero-copy > *,.still .hero-art,.still .float-terrain{opacity:1 !important}
.still .rev,.still .hero-copy > *,.still .hero-art,.still .float-terrain{transform:none !important}
.still .wp{transform:translate(-50%,0) !important}
.still .ridge-line,.still .contour{stroke-dashoffset:0 !important}
.still{scroll-behavior:auto}
@media print{
  .rev,.hero-copy > *,.hero-art,.float-terrain{opacity:1 !important;transform:none !important}
  .ridge-line,.contour{stroke-dashoffset:0 !important}
}


@media (max-width:1080px){
  .hero-grid{grid-template-columns:1fr;gap:var(--s64)}
  .hero-art{margin-right:0}
  .float-terrain{margin:-48px 0 0 0;width:250px}
  .stage,.inbox-grid,.try-grid{grid-template-columns:1fr;gap:var(--s40)}
  .stage--flip .stage-copy{order:1}
  .stage--flip .stage-art{order:2}
  .tiers{grid-template-columns:1fr;gap:var(--s16)}
  .tier > .cap{min-height:0}
  .foot-grid{grid-template-columns:1fr 1fr;gap:var(--s32)}
  .foot-brand{grid-column:1 / -1}
}
@media (max-width:820px){
  :root{--gap:48px}
  .nav-links,.nav-cta .link,.nav-cta .pill{display:none}
  .nav-toggle{
    display:inline-flex;align-items:center;justify-content:center;
    width:42px;height:42px;margin-left:auto;border-radius:var(--r-pill);
    border:1px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;
  }
  .nav-toggle svg{width:17px;height:17px}
  .nav-cta{margin-left:auto;gap:var(--s12)}
  .nav-in{gap:var(--s16);padding:var(--s16) var(--s24)}
  .wrap{padding:0 var(--s24)}
  .hero{padding-top:calc(var(--s80) + 40px)}
  .figs,.compare,.trust-grid{grid-template-columns:1fr;gap:var(--s40)}
  .prices{grid-template-columns:minmax(0,1fr);gap:var(--s24)}
  .price--wide{grid-column:auto}
  /* the price stops competing with the title for one row */
  .price-top,.summit-head{flex-direction:column;align-items:flex-start;gap:var(--s4)}
  .price .amt,.summit .amt{text-align:left}
  .price-aside{margin-top:var(--s8)}
  .summit-body > ul{margin-top:var(--s24)}
  /* single column: no card edge to align to, so the band meets the page edge */
  .summit{padding-left:0;padding-right:0}
  .compare{align-items:stretch}
  .accent{padding:var(--s40) var(--s24)}
  .note{grid-template-columns:1fr;gap:var(--s32)}
  .note-who img{width:88px;height:88px;margin-bottom:var(--s16)}
  .letter{padding:var(--s32) var(--s24) var(--s40)}
  .letter h2{font-size:26px}
  .letter blockquote p{font-size:18px}
  .def{grid-template-columns:1fr;gap:var(--s16);padding:var(--s32) 0}
  .def dt{font-size:34px}
  .qa-row{grid-template-columns:1fr;gap:var(--s16);padding:var(--s32) 0}
  .qa dt{font-size:23px}
  .ledger th{padding-right:var(--s20)}
  .ledger td{padding:var(--s20) var(--s20) var(--s20) 0;font-size:16px}
  .ledger td:last-child{padding-left:var(--s20)}
  .ridge{margin-top:var(--s40)}
  .ridge-labels{position:static;display:grid;grid-template-columns:repeat(4,1fr);
    gap:var(--s8);margin-top:var(--s16);padding-top:var(--s16);
    border-top:1px solid var(--hair)}
  .wp,.still .wp{position:static!important;left:auto!important;top:auto!important;transform:none!important}
  .wp a{padding:0}
  .wp .l{font-size:16px}
  .wp .n{font-size:10.5px;margin-bottom:1px}
  .sec-head{margin-bottom:var(--s40)}
  .stage{padding:var(--s40) 0}
  .close{padding:var(--s80) 0 var(--s64)}
  .foot-grid{grid-template-columns:1fr}
}
@media (max-width:600px){
  /* the ledger stops being a table and becomes four stacked exchanges */
  .ledger,.ledger tbody,.ledger tr,.ledger td{display:block;width:auto}
  .ledger thead{display:none}
  .ledger tr{padding:var(--s24) 0;border-top:1px solid var(--hair)}
  .ledger tbody tr:last-child{border-bottom:1px solid var(--hair)}
  .ledger td,.ledger tbody tr + tr td,.ledger tbody tr:last-child td{
    border:0;padding:0;font-size:16px;
  }
  .ledger td:first-child{margin-bottom:var(--s20)}
  .ledger td:last-child{padding-left:var(--s16);border-left:1px solid var(--ink)}
  .ledger-lbl{
    display:block;font-size:12px;font-weight:var(--w500);letter-spacing:.1em;
    color:var(--slate);margin-bottom:6px;
  }
  .ledger td:last-child .ledger-lbl{color:var(--ink)}

  .actions .pill{width:100%;justify-content:center}
  .wp .l{font-size:13px}
  .wp .n{font-size:9.5px;letter-spacing:.06em}
  .float-terrain{width:100%;margin:-40px 0 0 0}
}

/* mobile sheet */
.sheet{
  position:fixed;inset:0;z-index:70;background:var(--paper);
  padding:var(--s24);display:flex;flex-direction:column;
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px);
  transition:opacity .18s var(--ease),transform .18s var(--ease),visibility 0s linear .18s;
}
.sheet[data-open]{
  opacity:1;visibility:visible;pointer-events:auto;transform:none;
  transition:opacity .3s var(--ease),transform .34s var(--ease),visibility 0s;
}
.sheet[data-open] nav a{animation:settle .5s var(--ease) backwards;
  animation-delay:calc(70ms + var(--i,0) * 45ms)}
.sheet[data-open] .actions{animation:settle .5s var(--ease) .33s backwards}
.sheet-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s64)}
.sheet nav{display:grid;gap:var(--s20)}
.sheet nav a{font-family:var(--serif);font-size:32px;font-weight:400;letter-spacing:-.015em}
.sheet .actions{margin-top:auto;flex-direction:column;align-items:stretch}
.sheet .pill{width:100%;justify-content:center}
.sheet-close{
  width:42px;height:42px;border-radius:var(--r-pill);border:1px solid var(--ink);
  background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer;
}
.sheet-close svg{width:16px;height:16px}


.hero .display--lockup{font-size:clamp(25px,2.95vw,38px);line-height:1.2;max-width:none;text-wrap:unset}

/* v2: the stage rail — the four words carry fold one */
.stage-rail{display:grid;grid-template-columns:repeat(4,minmax(0,max-content));gap:14px 44px;margin:22px 0 6px;
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:16px 0 14px}
.stage-rail a{display:flex;flex-direction:column;text-decoration:none;color:inherit;border-bottom:2px solid transparent;padding-bottom:4px}
.stage-rail a:hover{border-color:var(--sienna,#5d2a1a)}
.stage-rail .n{font-size:12px;letter-spacing:.14em;color:var(--slate,#777b86)}
.stage-rail .w{font-family:var(--serif);font-size:21px;line-height:1.15}
.stage-rail .sub{font-size:13px;line-height:1.25;color:var(--slate,#777b86);margin-top:3px;white-space:nowrap}
@media(max-width:600px){.stage-rail{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}}
/* v2: CTA sublabels */
.cta-col{display:flex;flex-direction:column;gap:7px;align-items:flex-start;flex:0 1 auto;min-width:0;max-width:258px}
.cta-sub{font-size:13px;line-height:1.4;color:var(--slate,#777b86);max-width:100%;margin:0}
.hero .actions{align-items:flex-start;gap:24px}
/* v2: the definitions strip */
.send-defs{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:14px}
.def-card{background:var(--mist,#f2f2f3);border-radius:16px;padding:26px 28px}
.def-card h3{font-family:var(--serif);font-weight:400;font-size:25px;margin:0 0 8px}
.def-card p{margin:0;font-size:16px;line-height:1.5}
@media(max-width:820px){.send-defs{grid-template-columns:1fr}}
.def-card .pill{margin-top:16px}
.row2{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:center}
.row2 .sec-head{margin-bottom:0}
@media(max-width:820px){.row2{grid-template-columns:1fr;gap:28px}}
#who .defs{display:grid;grid-template-columns:repeat(3,1fr);gap:44px}
#who .def{display:flex;flex-direction:column;gap:10px}
@media(max-width:820px){#who .defs{grid-template-columns:1fr;gap:26px}}
.pstrip{border-top:1px solid #e8e8ea;border-bottom:1px solid #e8e8ea;padding:14px 0;background:#fafafb}
.pstrip-in{display:flex;gap:18px;align-items:baseline;justify-content:space-between;flex-wrap:wrap}
.pstrip-items{font-size:14px;color:#777b86;letter-spacing:.01em}
.pstrip-link{font-size:14px;white-space:nowrap}
.pstrip-seat{color:inherit;text-decoration:underline;text-decoration-color:#c9cbd2;text-underline-offset:3px}
.pstrip-seat:hover{color:var(--ink,#1c1e26)}
@media(max-width:600px){.lede{font-size:17px;line-height:1.5}.hero .lede{font-size:17.5px}}
.artifact-note{font-size:14px;color:var(--slate)}
.artifact-note svg{color:var(--slate)}
@media(max-width:820px){.float-terrain{margin:14px 0 0;width:100%;box-shadow:none;border:1px solid #e8e8ea}}
.stage-n b{font-size:17px;font-weight:var(--w480);color:var(--sienna,#5d2a1a);letter-spacing:.12em}
.cta-note{font-size:13.5px;color:var(--slate);margin-top:12px;max-width:38em;line-height:1.45}
.see-first{margin-top:20px}
@media(max-width:600px){
  .price{padding:20px 18px}.price li{font-size:15px}
  .price .amt{font-size:20px}
}

/* chipbar — the product chips under the hero (v2 set, 2026-08-30) */
.chipbar{border-top:1px solid #e3e3e6;border-bottom:1px solid #e3e3e6;background:#fafafb;padding:26px 0}
.chipbar-in{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.chipbar .lab{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:#6b6f7a;margin-right:6px}
.chip{display:inline-flex;align-items:baseline;gap:8px;border:1px solid #c9cad1;border-radius:999px;padding:9px 16px;background:#fff;font-size:14px;color:#17191c;text-decoration:none;transition:border-color .15s,background .15s}
.chip:hover{border-color:#a35634;background:#fffdfb}
.chip b{font-weight:600;font-size:14px}
.chip span{color:#5f6470;font-size:13px}
.chip--accent{border-color:#c8b49c;background:#faf5ee}
.chip--accent b{color:#5d2a1a}
.chip--accent span{color:#7a4a33}
@media (max-width:820px){
  .chipbar{padding:24px 0}
  .chipbar-in{gap:10px}
  .chipbar .lab{width:100%;margin:0 0 4px}
  .chip{padding:9px 15px}
}

/* mobile breathing pass (Ron red-pen 2026-08-30: spacing + visual weight on the phone) */
@media (max-width:820px){
  .hero{padding-top:calc(var(--s64) + 28px)}
  .hero h1{margin-bottom:var(--s20)}
  .hero .lede{line-height:1.62;margin-bottom:var(--s20)}
  .stage-rail{margin:26px 0 0;gap:16px 18px}
  .stage-rail .w{font-size:19px}
  .hero .body{margin-top:var(--s24);line-height:1.62}
  .hero .actions{margin-top:var(--s24)}
  .cta-note{line-height:1.6}
}

/* first-frame discipline on the phone (Ron 2026-08-31: the primary CTA must land inside frame one) */
@media (max-width:820px){
  .sm-hide{display:none}
  .hero .lede{margin-bottom:var(--s16)}
  .stage-rail{grid-template-columns:repeat(4,1fr);gap:0 6px;margin:20px 0 0;
    border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:13px 0 12px}
  .stage-rail .n{font-size:10.5px;letter-spacing:.1em}
  .stage-rail .w{font-size:18px}
  .stage-rail .sub{font-size:10.5px;margin-top:2px;letter-spacing:-.01em}
  .hero .body{margin-top:var(--s20)}
  .starts .s{display:block;margin-top:7px}
  .starts > strong:first-child{display:block;margin-bottom:2px}
  .hero .actions{margin-top:var(--s20)}
  .hero-fine,.cta-note{margin-top:var(--s16)}
}

/* the smallest phones (SE-class): both CTAs into frame one, nothing else changes */
@media (max-width:380px){
  .hero{padding-top:calc(var(--s64) + 8px)}
  .stage-rail{margin-top:16px;padding:11px 0 9px}
  .stage-rail .w{font-size:17px}
  .stage-rail .sub{font-size:9.8px}
  .hero .body{margin-top:var(--s16)}
  .starts .s{margin-top:6px}
}

/* short desktop/laptop viewports (1366x625-class): the hero compresses so the primary
   CTA stays in frame one. Tall screens keep the roomy layout untouched. */
@media (min-width:821px) and (max-height:780px){
  .hero{padding-top:84px}
  .hero-copy{padding-top:0}
  .hero .sm-hide{display:none}
  .hero .lede{margin-bottom:var(--s12)}
  .stage-rail{grid-template-columns:repeat(4,minmax(0,1fr));gap:0 18px;margin:18px 0 0;padding:13px 0 11px}
  .hero .body{margin-top:var(--s20)}
  .hero .actions{margin-top:var(--s24)}
  .hero-art{margin-top:-8px}
}

/* the memory triad — the differentiator named, not just shown (Ron 2026-08-31) */
.record-built{margin-top:var(--s40);font-size:var(--t-body);line-height:1.6;max-width:58ch}
.triad{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s40);margin-top:var(--s40)}
.triad > div{border-top:1px solid var(--ink);padding-top:var(--s16)}
.triad h3{font-size:17px;font-weight:var(--w480);margin-bottom:6px;letter-spacing:-.01em}
.triad p{font-size:15.5px;line-height:1.55;color:var(--slate)}
.record-close{
  margin-top:var(--s40);padding-top:var(--s24);border-top:1px solid var(--hair);
  font-family:var(--serif);font-size:clamp(21px,2.1vw,26px);line-height:1.34;
  letter-spacing:-.012em;max-width:34ch;margin-bottom:var(--s24);
}
@media (max-width:820px){.record-close{margin-top:var(--s32);padding-top:var(--s20);max-width:none}}
@media (max-width:820px){
  .record-built{margin-top:var(--s32)}
  .triad{grid-template-columns:1fr;gap:var(--s24);margin-top:var(--s32)}
  .triad > div{padding-top:var(--s12)}
}