/* ==========================================================================
   Marque & Heir — showroom prototype
   One stylesheet. No framework, no reset library, no utility classes.

   PALETTE DISCIPLINE (the rule that keeps this from becoming a casino):
     GOLD is light, not paint. It may appear in exactly three places:
       1. the hero light itself (WebGL),
       2. the maker's mark (a hallmark is stamped in gold — that is the brand),
       3. a hairline catching an edge.
     It is FORBIDDEN on body type, headings, CTAs, icons and card fills.
     BLUE is signal, not decoration: interactive things, and only those.
     WHITE is type and light. Everything else is ink.
   ========================================================================== */

/* ---------- fonts ---------------------------------------------------------
   Two files, 31.7 KB total, both preloaded, both same-origin.
   The metric-matched fallbacks below are what actually buy CLS 0: if the swap
   happens mid-paint, the fallback already occupies identical vertical space,
   so nothing reflows. font-display:swap is then safe.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Archivo';
  src: url('/assets/fonts/archivo.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-stretch: 78% 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo Fallback';
  src: local('Arial'), local('Helvetica'), local('Liberation Sans');
  size-adjust: 103%;
  ascent-override: 87.8%;
  descent-override: 21%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Plex Mono';
  src: url('/assets/fonts/plexmono.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plex Fallback';
  src: local('Consolas'), local('Menlo'), local('DejaVu Sans Mono');
  size-adjust: 98%;
  ascent-override: 102.5%;
  descent-override: 27.5%;
  line-gap-override: 0%;
}

/* ---------- tokens -------------------------------------------------------- */
:root {
  /* ink — TRUE-BLACK NEUTRAL LANE (#050506–#0e0e10 family, channel spread <= 2:
     no blue/teal cast). The prior ramp leaned navy (#080B11 / #0C1017 / #131922)
     which read blue-grey, not black — the v1 "bland" sin. Elevation now reads via
     lightness + hairline rules, not a coloured cast. */
  --ink-900: #060607;
  --ink-850: #0B0B0C;
  --ink-800: #100F11;
  --ink-700: #1A1A1B;
  --rule:    #282828;
  --rule-lit:#3B3B3B;

  /* type */
  --paper:     #EDF1F6;
  --paper-dim: #97A3B2;   /* 7.87:1 on ink-900 */
  /* Was #63707F, which measured 3.99:1 — under AA for the small labels that use
     it. Quiet is a legitimate design goal; illegible is not. 5.42:1. */
  --paper-mute:#788695;

  /* gold — light only */
  --gold:      #C9A227;
  --gold-lit:  #E8CC72;
  --gold-deep: #6E5A1E;

  /* blue — signal only */
  --signal:    #2E6BE6;
  --signal-lit:#7FB2FF;

  --display: 'Archivo', 'Archivo Fallback', Arial, sans-serif;
  --mono: 'Plex Mono', 'Plex Fallback', ui-monospace, Consolas, monospace;

  /* the one easing that carries the whole page: expo-out.
     Fast departure, long graceful settle — reads as weight, not as a slide. */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.30, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.50, 1);

  --gutter: clamp(20px, 5vw, 72px);
  --maxw: 1320px;

  /* Lining, tabular figures everywhere — never old-style. */
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: 'lnum' 1, 'tnum' 1;
}

/* ---------- base ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ink-900);
  color: var(--paper);
  font-family: var(--display);
  font-variation-settings: 'wdth' 100, 'wght' 400;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, p, dl, dd, dt { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }

.num {
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: 'lnum' 1, 'tnum' 1;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--signal); color: #fff; padding: 12px 18px;
  font: 400 13px/1 var(--mono);
}
.skip:focus { left: 12px; top: 12px; }

:focus-visible {
  outline: 2px solid var(--signal-lit);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ============================== NAV ====================================== */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  /* Glass. Used once on the page, deliberately. */
  background: rgba(5, 7, 11, 0.55);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border-bottom: 1px solid transparent;
  transition: background .4s var(--ease-out-quart), border-color .4s var(--ease-out-quart);
}
.nav[data-scrolled] {
  background: rgba(5, 7, 11, 0.82);
  border-bottom-color: var(--rule);
}
.nav__in {
  max-width: var(--maxw); margin: 0 auto;
  padding: 0 var(--gutter);
  height: 72px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
}

/* The maker's mark — the one place gold touches type, because a hallmark
   is literally a mark struck in gold. */
.mark {
  display: inline-flex; align-items: baseline; gap: 1px;
  font-family: var(--display);
  font-variation-settings: 'wdth' 86, 'wght' 700;
  font-size: 19px; letter-spacing: .04em;
  color: var(--gold);
  white-space: nowrap;
}
.mark__amp { color: var(--gold-deep); margin: 0 1px; }
.mark__full {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: .30em; text-transform: uppercase;
  color: var(--paper-mute);
  margin-left: 12px;
  padding-left: 12px;
  border-left: 1px solid var(--rule);
  align-self: center;
}
.nav__list { display: flex; gap: clamp(16px, 2.2vw, 34px); }
.nav__list a {
  font-family: var(--mono);
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--paper-dim);
  position: relative;
  padding: 6px 0;
  transition: color .3s var(--ease-out-quart);
}
/* Blue is signal: the underline is the affordance, and it is blue. */
.nav__list a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--signal-lit);
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease-out-expo);
}
.nav__list a:hover { color: var(--paper); }
.nav__list a:hover::after { transform: scaleX(1); }

@media (max-width: 720px) {
  .mark__full { display: none; }
  .nav__list { gap: 14px; }
  .nav__list a { font-size: 10px; letter-spacing: .10em; }
}
/* ============================== HERO ===================================== */
.hero {
  position: relative;
  min-height: 640px;
  height: 100svh;
  max-height: 940px;
  overflow: hidden;
  /* Isolation removed — the scrim/copy z-lift above the fixed
     one-context stage canvas (z30), so the ring paints between poster and text. */
  background: var(--ink-900);
  display: flex; flex-direction: column; justify-content: center;
}

.hero__canvas {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 1.1s var(--ease-out-quart);
}
.hero__canvas[data-ready] { opacity: 1; }

/* Legibility is art direction's job, not the shader's. */
.hero__scrim {
  position: absolute; inset: 0; z-index: 31; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(5,7,11,.94) 0%, rgba(5,7,11,.78) 30%, rgba(5,7,11,.18) 62%, transparent 82%),
    linear-gradient(180deg, rgba(5,7,11,.72) 0%, transparent 22%);
}
/* A diagonal scrim works at 1440 because the copy occupies the left third.
   On a phone the copy spans the full width and lands on the light — so the
   scrim turns vertical and the light is pushed below the text, not behind it. */
@media (max-width: 860px) {
  .hero__scrim {
    background:
      linear-gradient(180deg,
        rgba(5,7,11,.90) 0%,
        rgba(5,7,11,.80) 38%,
        rgba(5,7,11,.52) 58%,
        rgba(5,7,11,.30) 74%,
        rgba(5,7,11,.62) 100%),
      linear-gradient(90deg, rgba(5,7,11,.62) 0%, rgba(5,7,11,.22) 62%, transparent 100%);
  }
}

.hero__in {
  position: relative; z-index: 32;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.eyebrow {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .34em; text-transform: uppercase;
  color: var(--paper-mute);
  margin-bottom: 22px;
  display: flex; align-items: center; gap: 14px;
}
.eyebrow::after {
  content: ''; height: 1px; width: clamp(40px, 8vw, 96px);
  background: linear-gradient(90deg, var(--rule-lit), transparent);
}

.hero__sub {
  max-width: 44ch;
  font-size: clamp(15px, 1.15vw, 17.5px);
  line-height: 1.62;
  color: var(--paper-dim);
  margin-bottom: 38px;
}

/* ---------- the one CTA. Glass, and blue, because blue is signal. -------- */
.hero__cta { display: flex; }
.btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 15px 26px;
  font-family: var(--mono);
  font-size: 12px; letter-spacing: .17em; text-transform: uppercase;
  color: var(--paper);
  background: rgba(46, 107, 230, 0.10);
  border: 1px solid rgba(127, 178, 255, 0.34);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 2px;
  overflow: hidden;
  transition: border-color .45s var(--ease-out-quart),
              background .45s var(--ease-out-quart),
              transform .45s var(--ease-out-expo);
  /* will-change removed: surgical only — a page of buttons
     holding compositor layers is the anti-pattern. */
}
.btn::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(127,178,255,.20), transparent);
  transform: translateX(-101%);
  transition: transform .8s var(--ease-out-expo);
}
.btn:hover {
  border-color: var(--signal-lit);
  background: rgba(46, 107, 230, 0.20);
  transform: translateY(-1px);
}
.btn:hover::before { transform: translateX(101%); }
.btn__label, .btn__arrow { position: relative; }
.btn__arrow { transition: transform .45s var(--ease-out-expo); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* ---------- evidence strip ---------------------------------------------- */
.readout {
  position: relative; z-index: 32;
  width: 100%; max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
  margin-top: clamp(40px, 7vh, 88px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, auto));
  justify-content: start;
  gap: clamp(22px, 4vw, 64px);
}
.readout__cell {
  border-top: 1px solid var(--rule);
  padding-top: 12px;
  min-width: 0;
}
.readout dt {
  font-family: var(--mono);
  font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--paper-mute);
  margin-bottom: 5px;
  white-space: nowrap;
}
.readout dd {
  font-family: var(--display);
  font-variation-settings: 'wdth' 88, 'wght' 500;
  font-size: clamp(19px, 1.9vw, 25px);
  line-height: 1;
  color: var(--paper);
  white-space: nowrap;
}
.readout .unit {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: .10em;
  color: var(--paper-mute);
  margin-left: 2px;
}
.readout__note {
  position: relative; z-index: 32;
  width: 100%; max-width: var(--maxw);
  margin: 14px auto 0;
  padding: 0 var(--gutter);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .06em;
  line-height: 1.6;
  color: #6E7C8B;   /* 4.72:1 — a footnote still has to be readable */
}
@media (max-width: 640px) {
  .readout { grid-template-columns: repeat(2, 1fr); gap: 18px 20px; }
  .readout__note { display: none; }
}

/* ============================ WHAT WE DO ================================= */
/* The ink ramp is continuous across the whole page: each section starts on the
   exact ink the previous one ended on, so there is never a seam. This one ends
   at --ink-800 and Pricing picks it up there. */
.what {
  position: relative;
  padding: clamp(90px, 14vh, 170px) 0 clamp(90px, 13vh, 150px);
  background:
    linear-gradient(180deg, var(--ink-900) 0%, var(--ink-850) 40%, var(--ink-800) 100%);
}
.what__in { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

.sec-head { margin-bottom: clamp(44px, 6vh, 78px); }
.sec-label {
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .30em; text-transform: uppercase;
  color: var(--paper-mute);
  margin-bottom: 16px;
  display: flex; align-items: center; gap: 13px;
}
.sec-label::before {
  content: ''; width: 22px; height: 1px; background: var(--gold-deep);
}
.sec-h2 {
  font-family: var(--display);
  font-variation-settings: 'wdth' 84, 'wght' 600;
  font-size: clamp(30px, 3.6vw, 50px);
  line-height: 1.04;
  letter-spacing: -0.018em;
  color: var(--paper);
}

/* ---------- the row ------------------------------------------------------ */
/* Three cards, one object. The gutter is 1px and the container's own colour
   shows through it, so the joints read as machined seams rather than three
   tiles floating on a 24px gap. This is the whole argument against the
   benchmark's row: theirs is three things that arrive, ours is one thing
   that gets lit. */
.cards {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 3px;
  overflow: hidden;
}
@media (max-width: 900px) { .cards { grid-template-columns: 1fr; } }

/* RESTRAINT: the sweep is RETIRED. Two light-crossings lived in
   this one section — the entrance sweep and the golden thread's glint pass —
   and they competed. The thread is the signature move; it owns "light crosses
   the cards." The wake cascade below survives unchanged (edge → index → title
   → body), so the entrance still has its order — it just has ONE light. */
.sweep { display: none; }

/* ---------- card --------------------------------------------------------- */
.card {
  position: relative;
  padding: clamp(26px, 2.4vw, 38px) clamp(22px, 2vw, 32px) clamp(30px, 3vw, 44px);
  /* Opaque, so the 1px of container colour between cards reads as a seam. */
  background: linear-gradient(180deg, #0F141C 0%, #0A0E14 100%);
  overflow: hidden;
  /* Space is reserved by the grid before any animation runs => CLS 0. */
  transition: background .6s var(--ease-out-quart);
}
/* gold hairline: light catching the top edge. The third and last place gold lives. */
.card__edge {
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-deep) 28%, var(--gold) 50%, var(--gold-deep) 72%, transparent);
  transform: scaleX(0);
  transform-origin: left center;
  opacity: .85;
}
.card:hover { border-color: var(--rule-lit); background: linear-gradient(180deg, rgba(24,32,44,.70) 0%, rgba(14,19,27,.40) 100%); }

/* These numerals were gold, which broke our own rule twice over: gold is light,
   never type — and at 3.02:1 it was under AA anyway. The card's gold is the
   hairline on its top edge, where light belongs. */
.card__idx {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .18em;
  color: var(--paper-mute);
  margin-bottom: clamp(30px, 5vw, 54px);
}
.card__t {
  font-family: var(--display);
  font-variation-settings: 'wdth' 86, 'wght' 600;
  font-size: clamp(23px, 2.1vw, 30px);
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--paper);
  margin-bottom: 12px;
}
.card__b {
  font-size: 14.5px;
  line-height: 1.66;
  color: var(--paper-dim);
  max-width: 38ch;
}

/* ==========================================================================
   ENTRANCE CHOREOGRAPHY
   AOS moves a whole tile 30px and fades it, on a linear stagger. We do two
   things it cannot: (1) the card resolves in a legible causal order — edge
   lights, then index, then title, then body; (2) a single light crosses the
   row and the cards wake in its wake, so the stagger has a CAUSE.
   Everything below animates transform/opacity only => compositor-only, 60fps,
   and zero layout shift because the grid already reserved the space.
   ========================================================================== */
[data-rise] {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  /* LOAD-BEARING (investigated, closed as deliberate):
     this hold is load-bearing. Under it the risers' entrances run
     fully composited, so their fades never emit a main-thread paint record —
     which is what keeps home's LCP pinned to the first-paint scroll hint. ANY
     in-trace release (at data-in, or settled +1.9s — both were built and
     measured) forces a decomposition repaint that re-registers the large hero
     sub as a late LCP candidate: 96 → 85 home mobile, reproducibly. ~30 small
     held text layers is the priced cost of the measurement anchor. Do not
     "fix" this again without re-running Lighthouse mobile. */
  will-change: transform, opacity;
}
[data-rise][data-in] {
  opacity: 1;
  transform: none;
  transition:
    opacity .9s var(--ease-out-quart) var(--d, 0ms),
    transform 1.05s var(--ease-out-expo) var(--d, 0ms);
}

/* The BLOCK arrives as one object — a single rise, not three. AOS translates
   three tiles; translating three tiles is the thing we are beating. */
.cards { opacity: 0; transform: translate3d(0, 20px, 0); will-change: transform, opacity; }
.cards[data-lit] {
  opacity: 1;
  transform: none;
  transition:
    opacity .85s var(--ease-out-quart),
    transform 1.1s var(--ease-out-expo);
}
.card__idx, .card__t, .card__b { opacity: 0; transform: translate3d(0, 12px, 0); }
.cards[data-lit] .card__edge {
  transform: scaleX(1);
  transition: transform 1.25s var(--ease-out-expo) calc(var(--i) * 88ms + 200ms);
}
.cards[data-lit] .card__idx {
  opacity: 1; transform: none;
  transition: opacity .7s ease calc(var(--i) * 88ms + 330ms),
              transform .9s var(--ease-out-expo) calc(var(--i) * 88ms + 330ms);
}
.cards[data-lit] .card__t {
  opacity: 1; transform: none;
  transition: opacity .7s ease calc(var(--i) * 88ms + 400ms),
              transform .95s var(--ease-out-expo) calc(var(--i) * 88ms + 400ms);
}
.cards[data-lit] .card__b {
  opacity: 1; transform: none;
  transition: opacity .8s ease calc(var(--i) * 88ms + 470ms),
              transform 1s var(--ease-out-expo) calc(var(--i) * 88ms + 470ms);
}

/* Once the gesture is over, stop paying for layers we no longer animate. */
.cards[data-settled] { will-change: auto; }

/* ---------- reduced motion ----------------------------------------------
   Not "everything off" — everything ARRIVED. The composition is identical,
   it simply doesn't perform. The shader still paints one static frame. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-rise], .cards, .card__idx, .card__t, .card__b {
    opacity: 1 !important; transform: none !important;
  }
  .card__edge { transform: scaleX(1) !important; }
  .hero__canvas { transition: none; }
  /* v1 sections: everything arrives, nothing performs. */
  .foundation, .pricing__note, .caseslot, .step, .pullquote { opacity: 1 !important; transform: none !important; }
  .tier--flagship { transform: none !important; }
}

/* ==========================================================================
   v1 SECTIONS — Pricing · Proof · Process · Contact · Footer, plus the
   "way we work" foundation band under What we do. Extends the prototype;
   obeys the same laws: gold is light (hairlines only), blue is signal
   (interactive only), white is type, everything else is ink. Space for every
   element is reserved before paint => CLS stays 0.
   ========================================================================== */

/* shared: section intro under a sec-head */
.sec-intro {
  max-width: 62ch;
  margin-top: 18px;
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.62;
  color: var(--paper-dim);
}

/* ---------- the "way we work" band -------------------------------------- */
.foundation {
  margin-top: clamp(56px, 8vh, 104px);
  padding-top: clamp(40px, 6vh, 64px);
  border-top: 1px solid var(--rule);
}
.foundation__head { margin-bottom: clamp(28px, 4vh, 44px); }
.foundation__h3 {
  font-family: var(--display);
  font-variation-settings: 'wdth' 86, 'wght' 560;
  font-size: clamp(22px, 2.5vw, 34px);
  line-height: 1.08;
  letter-spacing: -0.014em;
  color: var(--paper);
}
.foundation__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 3px;
  overflow: hidden;
}
.foundation__item {
  background: linear-gradient(180deg, #0F141C 0%, #0A0E14 100%);
  padding: clamp(22px, 2vw, 30px) clamp(20px, 1.8vw, 26px) clamp(26px, 2.4vw, 34px);
}
.foundation__t {
  font-family: var(--display);
  font-variation-settings: 'wdth' 90, 'wght' 600;
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.2;
  color: var(--paper);
  margin-bottom: 10px;
}
.foundation__b {
  font-size: 13.5px;
  line-height: 1.62;
  color: var(--paper-dim);
}
@media (max-width: 900px) { .foundation__list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .foundation__list { grid-template-columns: 1fr; } }

/* ============================== PRICING ================================== */
.pricing {
  position: relative;
  padding: clamp(90px, 13vh, 160px) 0 clamp(90px, 13vh, 160px);
  background: linear-gradient(180deg, var(--ink-800) 0%, var(--ink-700) 100%);
}
.pricing__in { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

.tiers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 4px;
  /* reserve the row's height by aligning children to stretch => CLS 0 */
  align-items: stretch;
}
.tier {
  position: relative;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #0F141C 0%, #0A0E14 100%);
  padding: clamp(26px, 2.2vw, 34px) clamp(22px, 1.9vw, 28px) clamp(28px, 2.6vw, 38px);
}
/* The flagship is Market Leader — lifted, top edge catches a gold
   hairline (light on an edge, colour law permits). No gold paint, no casino star.
   The ★ Most Popular badge is Local Authority, rendered as a small mono label. */
.tier--flagship {
  background: linear-gradient(180deg, #131A24 0%, #0B0F16 100%);
  box-shadow: inset 0 0 0 1px var(--rule-lit);
  z-index: 1;
}
.tier__edge {
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-deep) 24%, var(--gold) 50%, var(--gold-deep) 76%, transparent);
  opacity: .9;
}
.tier__flag {
  font-family: var(--mono);
  font-size: 9.5px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--paper);
  margin-bottom: 12px;
}
.tier__top { min-height: 118px; }
.tier__name {
  font-family: var(--display);
  font-variation-settings: 'wdth' 90, 'wght' 640;
  font-size: clamp(20px, 1.7vw, 24px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--paper);
  margin-bottom: 10px;
}
.tier__tag {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--paper-dim);
}
.tier__price {
  margin: clamp(18px, 2.4vw, 26px) 0 clamp(18px, 2.4vw, 24px);
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}
.tier__mo {
  display: flex; align-items: baseline; gap: 4px;
  font-family: var(--display);
  color: var(--paper);
  line-height: 1;
}
.tier__mo .price {
  font-variation-settings: 'wdth' 88, 'wght' 560;
  font-size: clamp(30px, 3.2vw, 40px);
  letter-spacing: -0.01em;
}
.tier__per {
  font-family: var(--mono);
  font-size: 12px; letter-spacing: .04em;
  color: var(--paper-mute);
}
.tier__setup {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .03em; line-height: 1.5;
  color: var(--paper-mute);
}
.tier__list {
  display: flex; flex-direction: column; gap: 11px;
  margin-bottom: clamp(22px, 3vw, 30px);
  flex: 1 1 auto;
}
.tier__list li {
  position: relative;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--paper-dim);
}
/* the tick is a hairline mark, not a coloured icon — kept to ink/rule-lit */
.tier__list li::before {
  content: ''; position: absolute; left: 0; top: 8px;
  width: 9px; height: 1px; background: var(--rule-lit);
}
.tier__cta {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 18px;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--paper);
  background: rgba(46, 107, 230, 0.10);
  border: 1px solid rgba(127, 178, 255, 0.30);
  border-radius: 2px;
  transition: border-color .4s var(--ease-out-quart), background .4s var(--ease-out-quart), transform .4s var(--ease-out-expo);
}
.tier__cta:hover {
  border-color: var(--signal-lit);
  background: rgba(46, 107, 230, 0.18);
  transform: translateY(-1px);
}
.tier__cta .btn__arrow { transition: transform .4s var(--ease-out-expo); }
.tier__cta:hover .btn__arrow { transform: translateX(3px); }

.pricing__note {
  margin-top: clamp(28px, 4vh, 44px);
  max-width: 78ch;
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .04em; line-height: 1.7;
  color: var(--paper-mute);
}

@media (max-width: 1040px) {
  .tiers { grid-template-columns: repeat(2, 1fr); }
  .tier--flagship { box-shadow: inset 0 0 0 1px var(--rule-lit); }
}
@media (max-width: 560px) {
  .tiers { grid-template-columns: 1fr; }
  .tier__top { min-height: 0; }
}

/* =============================== PROOF ================================== */
.proof {
  position: relative;
  padding: clamp(90px, 13vh, 160px) 0 clamp(90px, 13vh, 160px);
  background: linear-gradient(180deg, var(--ink-700) 0%, var(--ink-800) 100%);
}
.proof__in { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

.metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 44px);
  margin-top: clamp(20px, 4vh, 40px);
}
.metric { border-top: 1px solid var(--rule); padding-top: 16px; }
.metric__k {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--paper-mute);
  margin-bottom: 12px;
  line-height: 1.4;
}
.metric__v {
  display: flex; align-items: baseline; gap: 3px;
  font-family: var(--display);
  font-variation-settings: 'wdth' 86, 'wght' 560;
  font-size: clamp(38px, 5vw, 60px);
  line-height: 0.95;
  color: var(--paper);
  margin-bottom: 14px;
}
.metric__u {
  font-family: var(--mono);
  font-size: clamp(12px, 1vw, 14px); letter-spacing: .04em;
  color: var(--paper-mute);
}
/* The conditions ALWAYS stay with the number — including on mobile. A number
   without its method is marketing, so this note never gets display:none'd. */
.metric__note {
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .02em; line-height: 1.62;
  color: #6E7C8B;   /* 4.72:1 — a footnote still has to be readable */
}
@media (max-width: 900px) { .metrics { grid-template-columns: repeat(2, 1fr); gap: 28px 24px; } }
@media (max-width: 480px) { .metrics { grid-template-columns: 1fr; } }

/* client-results honest empty state — a considered "not yet", not a broken box */
.caseslot {
  margin-top: clamp(44px, 7vh, 84px);
  padding: clamp(28px, 4vw, 48px);
  border: 1px dashed var(--rule-lit);
  border-radius: 4px;
  background: rgba(19, 25, 34, 0.35);
}
.caseslot__label {
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--paper-mute);
  margin-bottom: 14px;
}
.caseslot__body {
  max-width: 66ch;
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.6;
  color: var(--paper-dim);
  margin-bottom: 18px;
}
.caseslot__tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--paper-mute);
  padding: 6px 12px;
  border: 1px solid var(--rule);
  border-radius: 2px;
}

/* ============================== PROCESS ================================= */
.process {
  position: relative;
  padding: clamp(90px, 13vh, 160px) 0 clamp(90px, 13vh, 160px);
  background: linear-gradient(180deg, var(--ink-800) 0%, var(--ink-850) 100%);
}
.process__in { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

.steps {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;
}
.step {
  background: linear-gradient(180deg, #0F141C 0%, #0A0E14 100%);
  display: grid;
  grid-template-columns: minmax(140px, 200px) 1fr;
  gap: clamp(14px, 3vw, 48px);
  align-items: start;
  padding: clamp(24px, 3vw, 38px) clamp(22px, 2.4vw, 40px);
}
.step__k {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--paper-mute);
  padding-top: 4px;
}
.step__t {
  font-family: var(--display);
  font-variation-settings: 'wdth' 88, 'wght' 600;
  font-size: clamp(19px, 1.9vw, 26px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--paper);
  margin-bottom: 8px;
}
.step__b {
  max-width: 66ch;
  font-size: 14px;
  line-height: 1.6;
  color: var(--paper-dim);
}
@media (max-width: 620px) {
  .step { grid-template-columns: 1fr; gap: 8px; }
}

.pullquote {
  margin: clamp(40px, 6vh, 72px) 0 0;
  padding-left: clamp(18px, 2vw, 28px);
  /* Craft: the rule becomes a gold hairline catching the edge
     (the third lawful home of gold), fading out as the quote ends. */
  border-left: 2px solid;
  border-image: linear-gradient(180deg, var(--gold-deep), rgba(110,90,30,0)) 1;
  max-width: 60ch;
  font-family: var(--display);
  font-variation-settings: 'wdth' 92, 'wght' 480;
  font-size: clamp(19px, 2.2vw, 28px);
  line-height: 1.3;
  letter-spacing: -0.008em;
  color: var(--paper-dim);
  /* letterpress: struck into the ink, light catching the lower edge */
  text-shadow: 0 1px 0 rgba(237,241,246,.05), 0 -1px 0 rgba(0,0,0,.5);
}

/* ============================== CONTACT ================================= */
.contact {
  position: relative;
  padding: clamp(90px, 13vh, 160px) 0 clamp(90px, 13vh, 160px);
  background: linear-gradient(180deg, var(--ink-850) 0%, var(--ink-900) 100%);
}
.contact__in {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(36px, 5vw, 88px);
  align-items: start;
}
.contact__body {
  max-width: 52ch;
  margin: 8px 0 clamp(26px, 3vh, 36px);
  font-size: clamp(15px, 1.2vw, 17.5px);
  line-height: 1.62;
  color: var(--paper-dim);
}
.contact__direct { display: flex; flex-direction: column; gap: 14px; }
.contact__direct li {
  display: flex; align-items: baseline; gap: 16px;
  border-top: 1px solid var(--rule);
  padding-top: 12px;
}
.contact__label {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--paper-mute);
  min-width: 52px;
}
/* interactive => blue signal */
.contact__link {
  font-family: var(--mono);
  font-size: 14px; letter-spacing: .02em;
  color: var(--signal-lit);
  position: relative;
}
.contact__link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: var(--signal-lit);
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease-out-expo);
}
.contact__link:hover::after { transform: scaleX(1); }

.cform {
  background: linear-gradient(180deg, #0F141C 0%, #0A0E14 100%);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: clamp(24px, 2.6vw, 34px);
}
.cform__head {
  font-family: var(--display);
  font-variation-settings: 'wdth' 90, 'wght' 600;
  font-size: clamp(17px, 1.5vw, 21px);
  color: var(--paper);
  margin-bottom: clamp(18px, 2.4vw, 24px);
}
.cform__row { margin-bottom: 16px; }
.cform__label {
  display: block;
  font-family: var(--mono);
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--paper-mute);
  margin-bottom: 7px;
}
.cform__in {
  width: 100%;
  font-family: var(--display);
  font-size: 15px;
  color: var(--paper);
  background: var(--ink-900);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 11px 13px;
  transition: border-color .3s var(--ease-out-quart);
}
.cform__in::placeholder { color: var(--paper-mute); opacity: .7; }
.cform__in:focus { outline: none; border-color: var(--signal-lit); }
.cform__area { resize: vertical; min-height: 78px; line-height: 1.5; }
.cform__submit { margin-top: 6px; cursor: pointer; }
.cform__note {
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .02em; line-height: 1.6;
  color: var(--paper-mute);
}
.cform__note[data-live] { color: var(--signal-lit); }
@media (max-width: 780px) {
  .contact__in { grid-template-columns: 1fr; }
}

/* =============================== FOOTER ================================= */
.foot {
  background: var(--ink-900);
  border-top: 1px solid var(--rule);
  padding: clamp(48px, 7vh, 82px) 0 clamp(30px, 4vh, 44px);
}
.foot__in {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter);
  display: flex; flex-wrap: wrap; gap: 36px 64px;
  justify-content: space-between; align-items: flex-start;
}
.foot__brand { max-width: 42ch; }
.foot__brand .mark { margin-bottom: 16px; }
.foot__tag {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .04em; line-height: 1.7;
  color: var(--paper-mute);
}
.foot__nav ul { display: grid; gap: 10px; }
.foot__nav a {
  font-family: var(--mono);
  font-size: 11.5px; letter-spacing: .1em;
  color: var(--paper-dim);
  transition: color .3s var(--ease-out-quart);
}
.foot__nav a:hover { color: var(--signal-lit); }
.foot__base {
  max-width: var(--maxw); margin: clamp(36px, 5vh, 56px) auto 0;
  padding: 20px var(--gutter) 0;
  border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: 12px 28px;
  justify-content: space-between; align-items: center;
}
.foot__legal {
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .03em;
  color: var(--paper-mute);
}
.foot__seal {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--paper-mute);
}

/* ==========================================================================
   SUBPAGES — BLOG + FAQ. Extends the showroom; same laws:
   gold is light (hairlines only), blue is signal (interactive only),
   white is type, everything else is ink. Long-form reading typography:
   measure ~65–75ch, comfortable leading, body ≥16px, lining figures.
   Subpages have no WebGL hero — the fixed nav sits over the section's own
   top padding, and motion.js alone drives the entrances (no hero.js).
   ========================================================================== */

/* you-are-here in the nav: quiet, not an underline (underline = hover signal) */
.nav__list a[aria-current="page"] { color: var(--paper); }

/* ---------- blog index ---------------------------------------------------- */
.bloglist {
  /* 72px fixed nav + breathing room; ends on ink-850 like the section ramp */
  padding: calc(72px + clamp(48px, 8vh, 96px)) 0 clamp(90px, 13vh, 150px);
  background: linear-gradient(180deg, var(--ink-900) 0%, var(--ink-850) 100%);
}
.bloglist__in { max-width: 860px; margin: 0 auto; padding: 0 var(--gutter); }

.bloglist__list {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;
}
.bloglist__item {
  background: linear-gradient(180deg, #0F141C 0%, #0A0E14 100%);
  padding: clamp(24px, 3.4vw, 40px) clamp(22px, 3vw, 40px) clamp(28px, 3.6vw, 44px);
}
.bloglist__meta {
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--paper-mute);
  margin-bottom: 14px;
}
.bloglist__t {
  font-family: var(--display);
  font-variation-settings: 'wdth' 86, 'wght' 600;
  font-size: clamp(21px, 2.4vw, 29px);
  line-height: 1.14;
  letter-spacing: -0.014em;
  max-width: 30ch;
}
.bloglist__t a { color: var(--paper); transition: color .3s var(--ease-out-quart); }
.bloglist__t a:hover { color: var(--signal-lit); }
.bloglist__d {
  margin-top: 12px;
  max-width: 62ch;
  font-size: 15px; line-height: 1.65;
  color: var(--paper-dim);
}
.bloglist__read { margin-top: 16px; }
.bloglist__read a {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--signal-lit);
  position: relative;
}
.bloglist__read a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
  background: var(--signal-lit);
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease-out-expo);
}
.bloglist__read a:hover::after { transform: scaleX(1); }

/* ---------- post page ----------------------------------------------------- */
.post {
  padding: calc(72px + clamp(48px, 8vh, 96px)) 0 clamp(90px, 13vh, 150px);
  background: linear-gradient(180deg, var(--ink-900) 0%, var(--ink-850) 100%);
}
.post__in { max-width: 820px; margin: 0 auto; padding: 0 var(--gutter); }

.post__h1 {
  font-family: var(--display);
  font-variation-settings: 'wdth' 84, 'wght' 620;
  font-size: clamp(31px, 4.4vw, 54px);
  line-height: 1.04;
  letter-spacing: -0.018em;
  color: var(--paper);
  max-width: 24ch;
}
.post__meta {
  margin-top: 20px;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--paper-mute);
}

/* the reading column: ~68ch measure, 17px/1.75 — long-form, not card copy */
.post__body {
  margin-top: clamp(40px, 6vh, 64px);
  max-width: 68ch;
  font-size: 17px;
  line-height: 1.75;
  color: var(--paper-dim);
}
.post__body p { margin: 0 0 24px; }
.post__body strong { color: var(--paper); font-weight: 600; }
.post__body a {
  color: var(--signal-lit);
  border-bottom: 1px solid rgba(127, 178, 255, 0.35);
  transition: border-color .3s var(--ease-out-quart);
}
.post__body a:hover { border-bottom-color: var(--signal-lit); }
.post__body h2 {
  margin: clamp(38px, 5vh, 54px) 0 18px;
  padding-top: clamp(24px, 3vh, 32px);
  border-top: 1px solid var(--rule);
  font-family: var(--display);
  font-variation-settings: 'wdth' 86, 'wght' 600;
  font-size: clamp(22px, 2.5vw, 30px);
  line-height: 1.14;
  letter-spacing: -0.012em;
  color: var(--paper);
}
.post__body h3 {
  margin: 28px 0 10px;
  font-family: var(--display);
  font-variation-settings: 'wdth' 90, 'wght' 600;
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.3;
  color: var(--paper);
}
.post__body ol, .post__body ul {
  margin: 0 0 24px;
  padding-left: 24px;
}
.post__body ol { list-style: decimal; }
.post__body ul { list-style: disc; }
.post__body li { margin-bottom: 12px; padding-left: 6px; }
.post__body li::marker {
  color: var(--paper-mute);
  font-variant-numeric: lining-nums tabular-nums;
}

/* the numbers table — mono heads, lining figures, machined rules */
.post__tablewrap {
  margin: 0 0 24px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  overflow-x: auto;
}
.post__body table {
  width: 100%;
  min-width: 540px;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.5;
}
.post__body th {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--paper-mute);
  text-align: left;
  padding: 12px 16px;
  background: #0F141C;
  border-bottom: 1px solid var(--rule);
}
.post__body td {
  padding: 12px 16px;
  border-top: 1px solid var(--rule);
  color: var(--paper-dim);
}
.post__body td:first-child { color: var(--paper); }
.post__body tr > *:not(:first-child) { border-left: 1px solid var(--rule); }

/* the one CTA — glass + blue (signal), gold hairline on the top edge (light) */
.post__cta {
  position: relative;
  margin-top: clamp(48px, 7vh, 76px);
  padding: clamp(26px, 3.4vw, 42px);
  background: linear-gradient(180deg, #0F141C 0%, #0A0E14 100%);
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;
}
.post__cta::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-deep) 28%, var(--gold) 50%, var(--gold-deep) 72%, transparent);
  opacity: .85;
}
.post__cta-lead {
  font-family: var(--display);
  font-variation-settings: 'wdth' 88, 'wght' 580;
  font-size: clamp(19px, 2vw, 25px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--paper);
  margin-bottom: 22px;
  max-width: 30ch;
}
.post__cta-links {
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .06em;
  color: var(--paper-mute);
}
.post__cta-links a { color: var(--signal-lit); }
.post__cta-links a:hover { text-decoration: underline; text-underline-offset: 3px; }

.post__backline { margin-top: clamp(32px, 5vh, 48px); }
.post__back {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--signal-lit);
}
.post__back:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- FAQ — accordion v2 pattern, restyled to M&H tokens -----
   Same structure and behaviour as the proven component: real
   <button> + aria-expanded + labelled region; open/close is a grid-row
   transition (0fr -> 1fr) — no height math, no layout writes, CLS 0.
   Restyle: glass cards become the machined seam-list; the open state's gold
   border becomes a gold HAIRLINE on the top edge (gold is light, not paint);
   the "+" affordance is blue, because interactive = signal. */
.qa {
  padding: calc(72px + clamp(48px, 8vh, 96px)) 0 clamp(90px, 13vh, 150px);
  background: linear-gradient(180deg, var(--ink-900) 0%, var(--ink-850) 100%);
}
.qa__in { max-width: 860px; margin: 0 auto; padding: 0 var(--gutter); }

/* fixed 72px nav: anchor/deep-link targets must not land underneath it */
.qa, .qa__item, .qa__btn { scroll-margin-top: var(--qa-nav-offset, 96px); }

.qa__list {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;
}
.qa__item {
  position: relative;
  background: linear-gradient(180deg, #0F141C 0%, #0A0E14 100%);
}
/* open state: light catches the item's top edge (needs :has(); without it the
   item simply stays unlit — the closed look — which degrades gracefully) */
.qa__item::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-deep) 28%, var(--gold) 50%, var(--gold-deep) 72%, transparent);
  opacity: 0;
  transform: scaleX(0); transform-origin: left center;
  transition: transform .9s var(--ease-out-expo), opacity .4s var(--ease-out-quart);
  pointer-events: none;
}
.qa__item:has(.qa__btn[aria-expanded="true"])::before { opacity: .85; transform: scaleX(1); }

.qa__h3 { margin: 0; font-size: inherit; font-weight: inherit; }

.qa__btn {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px;
  padding: 20px 24px;             /* ≥44px tap target by construction */
  background: transparent;
  border: 0;
  color: var(--paper);
  font-family: var(--display);
  font-variation-settings: 'wdth' 90, 'wght' 560;
  font-size: 17px;
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
  transition: background-color .25s var(--ease-out-quart);
}
.qa__btn:hover { background: rgba(24, 32, 44, .5); }
/* the global ring's +3px offset would be clipped by the list's overflow:hidden */
.qa__btn:focus-visible { outline-offset: -3px; }

/* the draft numbers its questions (and Q6 cites "question 2") — print them */
.qa__idx {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .14em;
  color: var(--paper-mute);
  padding-top: 3px;
}
.qa__q { flex: 1 1 auto; min-width: 0; }

.qa__icon {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 24px; height: 24px;
  color: var(--signal-lit);
  font-family: var(--mono);
  font-size: 22px; font-weight: 400; line-height: 1;
  transition: transform .3s var(--ease-out-quart);
}
.qa__icon::before { content: '+'; display: block; margin-top: -1px; }
.qa__btn[aria-expanded="true"] .qa__icon { transform: rotate(45deg); }

.qa__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .36s var(--ease-out-quart);
}
.qa__panel[data-open] { grid-template-rows: 1fr; }
.qa__panel-in { overflow: hidden; min-height: 0; }
/* PADDING NOTE (load-bearing): panel padding lives on the
   <p> children, never on .qa__panel-in — padding on the grid item itself would
   leak a sliver of height when closed. */
.qa__panel-in > * { opacity: 0; transition: opacity .3s ease .06s; }
.qa__panel[data-open] .qa__panel-in > * { opacity: 1; }
.qa__panel p {
  margin: 0 0 14px;
  padding: 0 24px;
  max-width: 68ch;
  font-size: 16px;
  line-height: 1.7;
  color: var(--paper-dim);
}
.qa__panel p:first-child { padding-top: 6px; }
.qa__panel p:last-child { margin-bottom: 0; padding-bottom: 22px; }
.qa__panel strong { color: var(--paper); font-weight: 600; }

@media (max-width: 640px) {
  .qa__btn { padding: 17px 18px; font-size: 16px; }
  .qa__panel p { padding-left: 18px; padding-right: 18px; }
}

/* the FAQ outro: the one CTA + the bracketed contact slots (unresolved) */
.qa__outro {
  margin-top: clamp(40px, 6vh, 64px);
  padding-top: clamp(28px, 4vh, 40px);
  border-top: 1px solid var(--rule);
}
.qa__outro-lead {
  font-family: var(--display);
  font-variation-settings: 'wdth' 88, 'wght' 560;
  font-size: clamp(18px, 1.9vw, 24px);
  line-height: 1.3;
  color: var(--paper);
  margin-bottom: 20px;
  max-width: 40ch;
}
.qa__outro-contact {
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 12px; letter-spacing: .03em;
  color: var(--paper-mute);
}
.qa__outro-contact a { color: var(--signal-lit); }
.qa__seal {
  margin-top: clamp(32px, 5vh, 48px);
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .04em; line-height: 1.7;
  color: var(--paper-mute);
  max-width: 70ch;
}
.qa__seal-mark { text-transform: uppercase; letter-spacing: .3em; white-space: nowrap; }

/* reduced motion for the subpage components (mirrors the global rule) */
@media (prefers-reduced-motion: reduce) {
  .qa__panel, .qa__icon, .qa__btn, .qa__panel-in > *, .qa__item::before {
    transition: none !important;
  }
}

/* ---------- FREE AUDIT — the funnel page ------------------------
   The printed QRs' destination. Reuses the showroom's steps + cform
   patterns; same laws (gold = hairline light, blue = signal). */
.fa {
  padding: calc(72px + clamp(48px, 8vh, 96px)) 0 clamp(90px, 13vh, 150px);
  background: linear-gradient(180deg, var(--ink-900) 0%, var(--ink-850) 100%);
}
.fa__in { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

.fa__steps { margin-bottom: clamp(40px, 6vh, 64px); }

.fa__grid {
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
@media (max-width: 860px) { .fa__grid { grid-template-columns: 1fr; } }

.fa__aside { display: flex; flex-direction: column; gap: clamp(18px, 2.5vh, 28px); }
.fa__next, .fa__paid {
  position: relative;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: linear-gradient(180deg, #0F141C 0%, #0A0E14 100%);
  padding: clamp(20px, 2.4vw, 30px);
  overflow: hidden;
}
/* the honest-promise card catches the light on its top edge */
.fa__next::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-deep) 28%, var(--gold) 50%, var(--gold-deep) 72%, transparent);
  opacity: .85;
}
.fa__next-h {
  font-family: var(--display);
  font-variation-settings: 'wdth' 88, 'wght' 620;
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.25;
  color: var(--paper);
  margin-bottom: 10px;
}
.fa__next-b {
  font-size: 14.5px; line-height: 1.65;
  color: var(--paper-dim);
}
.fa__next-b + .fa__next-b { margin-top: 10px; }
.fa__next-b strong { color: var(--paper); font-weight: 600; }

.fa__thanks[data-live], .fa__thanks { color: var(--paper-dim); }
.fa__thanks strong { color: var(--signal-lit); }

/* 8-item nav: at phone widths the four primary labels need tighter tracking */
@media (max-width: 480px) {
  .nav__list { gap: 10px; }
  .nav__list a { font-size: 9px; letter-spacing: .06em; }
}

/* ==========================================================================
   "LARGE" RESTYLE  (pulse scrub hero · blue-bubble · seal chapter ·
   LA spotlight · founder · light reading bands · mobile-its-own-pretty)
   Laws kept: gold is light, blue is signal, white is type, black is ground.
   Everything animates transform/opacity; space reserved before paint (CLS 0).
   ========================================================================== */
:root {
  /* light reading band (long-form flips to white/blue for legibility) */
  --read-bg:    #EEF2F8;
  --read-bg2:   #E4EAF3;
  --read-ink:   #121822;   /* 15.6:1 on --read-bg */
  --read-dim:   #37424F;   /* 8.9:1  */
  --read-mute:  #5A6675;   /* 5.1:1  */
  --read-rule:  #CBD5E3;
  --read-signal:#1B54C4;   /* blue that still passes AA on light */
  /* sapphire accent zone (free-audit path) */
  --sapphire:   #1E64C8;
  --sapphire-lit:#5A96F0;
  --hero-scroll: 260vh;    /* DEFAULT; motion.js reads MH_DIALS and may override */
}

/* ---------- THE BLUE BUBBLE — sitewide -----------------
   Adapted from GLASS BUTTONS `.bubble-blue`: glossy blue pill, specular cap,
   shine sweep. backdrop-filter dropped (buttons sit on opaque ink) to protect
   the mobile perf budget; the gradient + insets carry the glass read. */
.btn, .tier__cta, .cform__submit {
  border-radius: 999px;
  color: #EAF1FF;
  background: linear-gradient(160deg, rgba(120,170,255,.34) 0%, rgba(56,108,200,.16) 40%, rgba(30,58,110,.14) 62%, rgba(120,170,255,.20) 100%);
  border: 1px solid rgba(140,180,255,.42);
  box-shadow: 0 10px 30px rgba(15,40,100,.45), 0 0 20px rgba(90,140,255,.14),
              inset 0 2px 6px rgba(190,215,255,.40), inset 0 -6px 14px rgba(10,25,60,.34);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.btn::after, .tier__cta::after {   /* the specular highlight that sells "bubble" */
  content: ""; position: absolute; top: 8%; left: 11%; width: 44%; height: 34%;
  background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0));
  border-radius: 999px; pointer-events: none;
}
.btn::before {   /* keep the existing shine-sweep, retinted brighter blue */
  background: linear-gradient(100deg, transparent, rgba(200,222,255,.32), transparent);
}
.btn:hover, .tier__cta:hover, .cform__submit:hover {
  border-color: rgba(150,190,255,.75);
  background: linear-gradient(160deg, rgba(140,185,255,.46) 0%, rgba(64,120,215,.24) 40%, rgba(34,66,120,.18) 62%, rgba(140,185,255,.28) 100%);
  box-shadow: 0 16px 40px rgba(15,40,100,.55), 0 0 34px rgba(100,150,255,.34),
              inset 0 2px 8px rgba(200,222,255,.55), inset 0 -6px 14px rgba(10,25,60,.34);
  transform: translateY(-2px);
}
.tier__cta { position: relative; overflow: hidden; border-radius: 999px; padding: 12px 20px; }

/* ---------- NAV: slim sticky bar + blue-bubble Free-Audit + burger --------- */
.nav__cta {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 20px; border-radius: 999px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .15em; text-transform: uppercase;
  color: #EAF1FF; white-space: nowrap;
  background: linear-gradient(160deg, rgba(120,170,255,.34), rgba(56,108,200,.16) 55%, rgba(120,170,255,.20));
  border: 1px solid rgba(140,180,255,.42);
  box-shadow: 0 8px 22px rgba(15,40,100,.4), inset 0 1px 4px rgba(190,215,255,.4), inset 0 -5px 12px rgba(10,25,60,.3);
  position: relative; overflow: hidden;
  transition: transform .4s var(--ease-out-expo), box-shadow .4s var(--ease-out-quart), border-color .4s var(--ease-out-quart);
}
.nav__cta:hover { transform: translateY(-1px); border-color: rgba(150,190,255,.8);
  box-shadow: 0 12px 30px rgba(15,40,100,.5), 0 0 26px rgba(100,150,255,.3), inset 0 1px 5px rgba(200,222,255,.55); }
.nav__right { display: flex; align-items: center; gap: clamp(14px, 2vw, 26px); }
.nav__burger {
  display: none; width: 42px; height: 42px; padding: 0;
  background: transparent; border: 1px solid var(--rule-lit); border-radius: 8px;
  cursor: pointer; align-items: center; justify-content: center; flex-direction: column; gap: 4px;
}
.nav__burger span { display: block; width: 18px; height: 1.5px; background: var(--paper); transition: transform .3s var(--ease-out-quart), opacity .2s; }
.nav[data-open] .nav__burger span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav[data-open] .nav__burger span:nth-child(2) { opacity: 0; }
.nav[data-open] .nav__burger span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

@media (max-width: 820px) {
  .nav__burger { display: inline-flex; }
  .nav nav[aria-label="Primary"] {
    position: fixed; inset: 72px 0 auto 0; z-index: 39;
    background: rgba(5,7,11,.97); border-bottom: 1px solid var(--rule);
    transform: translateY(-12px); opacity: 0; pointer-events: none; visibility: hidden;
    transition: transform .32s var(--ease-out-quart), opacity .28s, visibility 0s .3s;
  }
  .nav[data-open] nav[aria-label="Primary"] { transform: none; opacity: 1; pointer-events: auto; visibility: visible; transition-delay: 0s; }
  .nav__list { flex-direction: column; gap: 0; padding: 8px var(--gutter) 18px; }
  .nav__list li { border-top: 1px solid var(--rule); }
  .nav__list a { display: block; padding: 15px 0; font-size: 12px; letter-spacing: .16em; }
  .nav__list a::after { display: none; }
}

/* ==========================================================================
   HERO — pulse scroll-scrub.  Poster paints first (LCP); canvas of D2 frames
   composites on top and is driven by scroll; released after ~1.6 viewports.
   Reduced-motion / phone / no-JS => the poster stands alone (composed still).
   ========================================================================== */
/* UNPINNED: no sticky hold — the page scrolls normally and the
   frames scrub as the hero exits the viewport (mapping lives in hero-scrub.js). */
.hero-scrub { position: relative; height: auto; background: var(--ink-900); }
.hero-scrub .hero {
  position: relative; height: 100svh; min-height: 560px; max-height: none;
}
.hero__poster, .hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.hero__poster { object-fit: cover; object-position: center 62%; display: block; }
.hero__canvas { z-index: 1; opacity: 0; transition: opacity .8s var(--ease-out-quart); }
.hero__canvas[data-ready] { opacity: 1; }
/* brand-first hero wordmark: MARQUE & HEIR huge, real typeset */
.hero__brand {
  font-family: var(--display);
  font-variation-settings: 'wdth' 84, 'wght' 680;
  font-size: clamp(52px, 9.2vw, 132px);
  line-height: .92; letter-spacing: -0.02em;
  color: var(--paper); margin-bottom: 22px;
  text-wrap: balance;
}
.hero__brand .amp { color: var(--gold-lit); font-variation-settings: 'wght' 500; font-style: italic; padding: 0 .06em; }
.hero__value {
  font-family: var(--display);
  font-variation-settings: 'wdth' 90, 'wght' 500;
  font-size: clamp(19px, 2.4vw, 30px); line-height: 1.16; letter-spacing: -0.01em;
  color: var(--gold-lit); max-width: 22ch; margin-bottom: 20px;
}
.hero__cta { align-items: center; gap: 18px; flex-wrap: wrap; }
.hero__phone {
  font-family: var(--mono); font-size: 13px; letter-spacing: .04em; color: var(--signal-lit);
  display: inline-flex; align-items: center; gap: 8px;
}
.hero__phone::before { content: ''; width: 16px; height: 1px; background: var(--rule-lit); }
.hero__scrub-hint {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 3;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--paper-mute); opacity: .8;
}

/* ==========================================================================
   SEAL CHAPTER — full-width break between pricing & proof.
   Seal art is BACKGROUND ONLY, cropped to clean slate (no AI "&");
   the mark is a REAL typeset M&H + a CSS gold seal ring. "The Marque Endures."
   ========================================================================== */
.sealbreak {
  position: relative; overflow: hidden;
  padding: clamp(96px, 18vh, 200px) 0;
  background:
    radial-gradient(120% 90% at 50% 42%, rgba(201,162,39,.10), transparent 62%),
    linear-gradient(180deg, var(--ink-800), var(--ink-900) 70%);
  text-align: center; isolation: isolate;
}
.sealbreak::before {   /* slate texture as background only, heavily quieted */
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: url('/assets/img/seal-texture.webp') center/cover no-repeat;
  opacity: .16; mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 45%, #000 30%, transparent 78%);
          mask-image: radial-gradient(70% 70% at 50% 45%, #000 30%, transparent 78%);
}
.seal { position: relative; width: clamp(96px, 12vw, 132px); height: clamp(96px, 12vw, 132px); margin: 0 auto clamp(28px, 4vh, 40px); }
.seal__ring { position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid var(--gold); box-shadow: 0 0 40px rgba(201,162,39,.28), inset 0 0 24px rgba(201,162,39,.14); }
.seal__ring--in { inset: 12px; border-color: var(--gold-deep); opacity: .8; }
.seal__mono {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-variation-settings: 'wdth' 90, 'wght' 640;
  font-size: clamp(22px, 2.8vw, 34px); letter-spacing: .01em; line-height: 1;
  white-space: nowrap; color: var(--gold-lit);
}
.seal__mono .amp { color: var(--gold); font-style: italic; font-variation-settings: 'wght' 460; padding: 0 .02em; }
.sealbreak__h2 {
  font-family: var(--display); font-variation-settings: 'wdth' 82, 'wght' 620;
  font-size: clamp(34px, 5.2vw, 68px); line-height: 1.02; letter-spacing: -0.02em;
  color: var(--paper); margin-bottom: 18px;
}
.sealbreak__tag {
  font-family: var(--display); font-variation-settings: 'wdth' 88, 'wght' 520;
  font-size: clamp(15px, 1.5vw, 20px); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 14px;
}
.sealbreak__sub {
  max-width: 52ch; margin: 0 auto; font-size: clamp(15px, 1.3vw, 18px); line-height: 1.62; color: var(--paper-dim);
}

/* ==========================================================================
   PRICING 3+1 — spotlight Local Authority ★.  Three retainer
   cards (LA · GE · ML) + LaunchPad as an entry strip beside/below (never
   a 4th column). ML keeps the "Flagship" label; the ★ + gold spotlight
   is Local Authority.
   ========================================================================== */
.tiers { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1040px) { .tiers { grid-template-columns: 1fr; } }
/* Local Authority — the spotlight: gold-edged, lifted, slightly larger */
.tier--spotlight {
  background: linear-gradient(180deg, #14110A 0%, #0C0E13 62%, #0A0E14 100%);
  box-shadow: 0 0 0 1px var(--gold-deep), 0 20px 60px -30px rgba(201,162,39,.5);
  transform: translateY(-10px); z-index: 2;
}
.tier--spotlight .tier__edge {
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-deep) 18%, var(--gold-lit) 50%, var(--gold-deep) 82%, transparent);
  opacity: 1;
}
.tier--spotlight .tier__flag { color: var(--gold-lit); }
.tier--spotlight .tier__mo .price { font-size: clamp(34px, 3.6vw, 46px); }
@media (max-width: 1040px) { .tier--spotlight { transform: none; } }
/* LaunchPad entry strip — the "+1" of 3+1, printed beside/below the grid */
.tier-entry {
  margin-top: 1px;
  display: grid; grid-template-columns: 1.1fr 1.4fr auto; align-items: center; gap: clamp(16px, 3vw, 44px);
  background: linear-gradient(180deg, #0E1219 0%, #0A0E14 100%);
  border: 1px solid var(--rule); border-top: 0; border-radius: 0 0 4px 4px;
  padding: clamp(22px, 2.6vw, 32px) clamp(22px, 2.2vw, 34px);
}
.tier-entry__name { font-family: var(--display); font-variation-settings: 'wdth' 90, 'wght' 640; font-size: clamp(18px, 1.7vw, 22px); color: var(--paper); }
.tier-entry__name span { display: block; margin-top: 6px; font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--paper-mute); }
.tier-entry__tag { font-size: 13.5px; line-height: 1.55; color: var(--paper-dim); max-width: 46ch; }
.tier-entry__buy { display: flex; align-items: baseline; gap: 10px; justify-self: end; text-align: right; }
.tier-entry__price { font-family: var(--display); font-variation-settings: 'wdth' 88, 'wght' 560; font-size: clamp(26px, 2.8vw, 34px); color: var(--paper); }
.tier-entry__per { font-family: var(--mono); font-size: 11px; color: var(--paper-mute); }
.tier-entry__setup { font-family: var(--mono); font-size: 10px; letter-spacing: .03em; color: var(--paper-mute); margin-top: 4px; }
@media (max-width: 760px) { .tier-entry { grid-template-columns: 1fr; gap: 12px; text-align: left; } .tier-entry__buy { justify-self: start; } }

/* ==========================================================================
   FOUNDER — name + short story + reserved photo slot. A light
   reading band (legibility + human warmth); portrait empty for now.
   ========================================================================== */
.founder {
  background: linear-gradient(180deg, var(--read-bg) 0%, var(--read-bg2) 100%);
  color: var(--read-ink);
  padding: clamp(80px, 12vh, 150px) 0;
}
.founder__in {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: minmax(0, 300px) 1fr; gap: clamp(32px, 5vw, 80px); align-items: center;
}
.founder__photo {
  aspect-ratio: 4/5; border-radius: 6px; border: 1px solid var(--read-rule);
  background: linear-gradient(160deg, #DDE4EE, #C9D3E1);
  display: grid; place-items: center; position: relative; overflow: hidden;
}
.founder__photo::after {
  content: 'Portrait — reserved'; font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--read-mute);
}
.founder__label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .28em; text-transform: uppercase; color: var(--read-mute); margin-bottom: 14px; display: flex; align-items: center; gap: 12px; }
.founder__label::before { content: ''; width: 22px; height: 1px; background: var(--gold-deep); }
.founder__name { font-family: var(--display); font-variation-settings: 'wdth' 86, 'wght' 640; font-size: clamp(26px, 3.2vw, 42px); line-height: 1.06; letter-spacing: -0.016em; color: var(--read-ink); margin-bottom: 6px; }
.founder__role { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--read-mute); margin-bottom: 22px; }
.founder__story { max-width: 58ch; font-size: clamp(16px, 1.3vw, 18.5px); line-height: 1.7; color: var(--read-dim); }
.founder__story p + p { margin-top: 16px; }
.founder__story strong { color: var(--read-ink); font-weight: 600; }
@media (max-width: 760px) { .founder__in { grid-template-columns: 1fr; } .founder__photo { max-width: 240px; } }

/* ==========================================================================
   LIGHT READING BANDS — long-form flips to white/blue for
   legibility.  Opt-in via .reading on the section wrapper (blog post body,
   FAQ answers).  Keeps the same measure/leading; just inverts the field.
   ========================================================================== */
.reading {
  /* Flip the design tokens to the light palette — every var-based colour inside
     follows automatically (post bodies + FAQ answers), no per-element overrides. */
  --paper: #121822; --paper-dim: #37424F; --paper-mute: #5A6675;
  --rule: #CBD5E3; --rule-lit: #B8C4D4; --signal-lit: #1B54C4; --ink-900: #E4EAF3;
  background: linear-gradient(180deg, var(--read-bg) 0%, var(--read-bg2) 100%);
  color: var(--read-ink);
}
/* the few hardcoded-dark backgrounds still need flipping to white */
.reading .qa__item { background: #FFFFFF; }
.reading .post__cta { background: linear-gradient(180deg, #FFFFFF 0%, var(--read-bg) 100%); }
.reading .post__body th { background: var(--read-bg2); }
.reading .post__body a, .reading .qa__panel a { border-bottom-color: rgba(27,84,196,.38); }

/* sapphire accent zone — the free-audit path */
.audit-accent { position: relative; }
.audit-accent::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(80% 120% at 100% 0%, rgba(30,100,200,.16), transparent 55%);
}

/* ==========================================================================
   MOBILE = ITS OWN PRETTY + reduced-motion collapse of the scrub.
   Phone hero = composed still from the D-family portrait; no frame streaming.
   ========================================================================== */
@media (max-width: 820px) {
  .hero-scrub { height: auto; }               /* no scroll-scrub distance on phone */
  .hero-scrub .hero { position: relative; height: 100svh; }
  /* The live WebGL hero runs on phone too (its OWN 9:16 composition —
     one cheap quad, no frame streaming). Only the FRAME tier stays desktop-only. */
  .hero-scrub:not([data-gl]) .hero__canvas { display: none; }
  .hero__scrub-hint { display: none; }
  .hero__brand { font-size: clamp(46px, 15vw, 74px); }
  .hero__in { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scrub { height: 100svh; }
  .hero-scrub .hero { position: relative; }
  .hero__canvas { display: none; }
  .hero__scrub-hint { display: none; }
}
/* Height is set by media query (above), NEVER by JS — so there is no JS-driven
   reflow and CLS stays 0. Without JS, the poster simply pins for the section's
   length (a still hero — never broken).
   LOAD-BEARING: the hint paints from FIRST paint (no late reveal). Chrome's
   LCP heuristics exclude the full-viewport poster and the fading H1, so a
   late-shown hint was being scored as a 3.2s LCP. The hint is always true —
   the page always scrolls — and reduced-motion/phone still hide it above. */
.hero__scrub-hint { display: block; }

/* ==========================================================================
   Polish & integration: seal-wax composite · blog-card art · post hero.
   Laws hold: gold is light, blue is signal, CLS 0, budget is law.
   ========================================================================== */

/* ---------- SEAL WAX (blank wax + real composited M&H) ------------------ */
.sealbreak--wax::before { opacity: .07; }                 /* quiet the slate texture behind the wax */
.seal-wax {
  position: relative; width: min(440px, 78vw); margin: 0 auto clamp(26px, 4vh, 42px);
  aspect-ratio: 16 / 9;
}
.seal-wax__img { width: 100%; height: 100%; object-fit: contain; display: block;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.55)); }
/* the REAL typeset M&H, pressed into the blank gold wax face (engraved read) */
.seal-wax__mark {
  position: absolute; left: 51.5%; top: 50.5%; transform: translate(-50%, -50%);
  font-family: var(--display); font-variation-settings: 'wdth' 90, 'wght' 660;
  font-size: clamp(19px, 4.2vw, 30px); letter-spacing: .01em; line-height: 1; white-space: nowrap;
  color: #4A3A12;                                          /* deep bronze = stamped into gold */
  /* The deboss cut deeper — top edge in shadow, lower edge
     catching light, a breath of spread where the die pressed. */
  text-shadow: 0 1.5px 0 rgba(255,236,183,.55), 0 -1.5px 1.5px rgba(0,0,0,.5), 0 0 14px rgba(0,0,0,.16);
}
.seal-wax__mark .amp { font-style: italic; font-variation-settings: 'wght' 500; color: #5A4413; }
.seal--fallback { display: none; }                        /* wax is default; ring is the fallback */
/* reduced-data: skip the wax image, show the pure-CSS ring instead */
@media (prefers-reduced-data: reduce) {
  .seal-wax { display: none; }
  .seal--fallback { display: block; }
}

/* ---------- BLOG CARD ART (index) ----------------------------------------- */
.bloglist__item { padding: 0; overflow: hidden; }
.bloglist__art { display: block; position: relative; overflow: hidden; }
.bloglist__art img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block;
  transition: transform .6s var(--ease-out-quart);
}
.bloglist__item:hover .bloglist__art img { transform: scale(1.03); }
.bloglist__art::after {                                   /* gold hairline under the art */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-deep) 30%, var(--gold) 50%, var(--gold-deep) 70%, transparent);
  opacity: .7;
}
.bloglist__body { padding: clamp(22px, 3vw, 38px) clamp(22px, 3vw, 40px) clamp(26px, 3.4vw, 44px); }

/* ---------- POST HERO ART (post header) ----------------------------------- */
.post__hero {
  margin: clamp(22px, 3.5vh, 38px) 0 clamp(26px, 4vh, 44px);
  border-radius: 8px; overflow: hidden; aspect-ratio: 16 / 9;
  border: 1px solid var(--rule);
}
.post__hero img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- 404 + THANK-YOU pages ------------------ */
.pagemsg {
  position: relative; overflow: hidden;
  min-height: 100svh;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: clamp(120px, 20vh, 220px) var(--gutter) clamp(80px, 12vh, 140px);
  background:
    radial-gradient(120% 80% at 50% 30%, rgba(201,162,39,.10), transparent 60%),
    linear-gradient(180deg, var(--ink-900), var(--ink-850));
}
.pagemsg::before {                        /* gold-thread texture, quiet */
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: url('/assets/img/thread.webp') center/cover no-repeat;
  opacity: .10; mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(80% 70% at 50% 40%, #000 20%, transparent 80%);
          mask-image: radial-gradient(80% 70% at 50% 40%, #000 20%, transparent 80%);
}
.pagemsg__in { position: relative; z-index: 1; max-width: 620px; }
.pagemsg__code {
  font-family: var(--mono); font-size: 12px; letter-spacing: .32em; text-transform: uppercase;
  color: var(--gold-lit); margin-bottom: 18px;
}
.pagemsg__h1 {
  font-family: var(--display); font-variation-settings: 'wdth' 84, 'wght' 640;
  font-size: clamp(34px, 5.6vw, 62px); line-height: 1.03; letter-spacing: -0.02em;
  color: var(--paper); margin-bottom: 18px;
}
.pagemsg__sub {
  max-width: 52ch; margin: 0 auto clamp(28px, 4vh, 40px);
  font-size: clamp(15px, 1.3vw, 18px); line-height: 1.62; color: var(--paper-dim);
}
.pagemsg__cta { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
/* ghost (secondary) button — same pill, quieter, still blue on hover */
.btn--ghost { background: transparent; border-color: var(--rule-lit); color: var(--paper-dim); box-shadow: none; }
.btn--ghost::after { display: none; }
.btn--ghost:hover { background: rgba(127,178,255,.08); border-color: var(--signal-lit); color: var(--paper); box-shadow: none; transform: translateY(-2px); }

/* ==========================================================================
   THE FLEX: golden thread · live hero · depth · materials · micro.
   Everything below animates transform/opacity/stroke; CLS 0 by construction.
   ========================================================================== */

/* ---------- the thread layer ---------------------------------------------- */
.thread-layer {
  position: absolute; top: 0; left: 0; width: 100%;
  z-index: 30; pointer-events: none;
}
.thread-layer svg { display: block; }

/* card glint — the thread passes; the existing gold hairline catches it */
.card[data-th-glint] .card__edge {
  animation: th-glint 1s var(--ease-out-quart);
}
@keyframes th-glint {
  0% { opacity: .85; filter: none; }
  35% { opacity: 1; filter: drop-shadow(0 0 7px rgba(232,204,114,.9)) brightness(1.6); }
  100% { opacity: .85; filter: none; }
}
/* the ★ kiss on Local Authority */
.tier--spotlight[data-th-kiss] .tier__edge { animation: th-glint 1.1s var(--ease-out-quart); }
.tier--spotlight[data-th-kiss] .tier__flag { text-shadow: 0 0 14px rgba(232,204,114,.65); transition: text-shadow .6s var(--ease-out-quart); }

/* the coil-in climax — the traveled line becomes the ring around the mark */
.seal-wax::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 62%; aspect-ratio: 1; transform: translate(-51%, -50%) scale(.86);
  border-radius: 50%; border: 1.5px solid rgba(232,204,114,0);
  box-shadow: 0 0 0 rgba(232,204,114,0);
  transition: border-color 1s var(--ease-out-quart), box-shadow 1.2s var(--ease-out-quart), transform 1.2s var(--ease-out-expo);
  pointer-events: none;
}
.sealbreak[data-th-lit] .seal-wax::after {
  border-color: rgba(232,204,114,.75);
  box-shadow: 0 0 34px rgba(201,162,39,.45), inset 0 0 26px rgba(201,162,39,.22);
  transform: translate(-51%, -50%) scale(1);
}
.sealbreak[data-th-lit] .seal-wax__img { filter: drop-shadow(0 18px 40px rgba(0,0,0,.55)) drop-shadow(0 0 30px rgba(201,162,39,.30)); }
.seal-wax__img { transition: filter 1.1s var(--ease-out-quart); }

/* the arrow lands — the form acknowledges */
.cform { transition: box-shadow .9s var(--ease-out-quart), border-color .9s var(--ease-out-quart); }
.cform[data-th-arrow] { border-color: var(--gold-deep); box-shadow: 0 0 44px -18px rgba(201,162,39,.5); }

/* ---------- seal material: sheen + tilt ------------------------------------ */
.seal-wax { transform-style: preserve-3d; }
.seal-sheen {
  position: absolute; inset: -4% -30%;
  background: linear-gradient(105deg, transparent 42%, rgba(255,244,205,.16) 50%, transparent 58%);
  transform: translateX(-130%) skewX(-8deg);
  pointer-events: none; mix-blend-mode: screen;
}
/* Restraint: the sheen no longer fires on mere arrival — it belongs to
   the STRIKE. When the thread's coil completes (data-th-lit), the press lands
   and the light sweeps the wax as part of the same payoff. */
.sealbreak[data-th-lit] .seal-sheen { animation: seal-sweep 1.6s var(--ease-out-quart) .12s forwards; }
@keyframes seal-sweep { to { transform: translateX(130%) skewX(-8deg); } }

/* ---------- parallax planes ------------------------------------------------ */
.what, .pricing, .proof, .contact { overflow: hidden; }
.plx {
  position: absolute; left: 0; right: 0; top: -12%; bottom: -12%;
  pointer-events: none; will-change: transform;
}
/* The light bands become PLATES — a static print-grain tile
   rides inside each light pool (masked to it), and the raw glow is trimmed a
   step. Texture up, wattage down: craft over flash. The grain is one static
   SVG tile composited with the plane's transform — never recomputed per frame. */
.plx--goldlight {
  background:
    var(--grain-lit) repeat,
    radial-gradient(56% 42% at 18% 30%, rgba(201,162,39,.06), transparent 70%);
  background-size: 220px 220px, auto;
  -webkit-mask-image: radial-gradient(74% 58% at 18% 30%, #000 24%, transparent 82%);
          mask-image: radial-gradient(74% 58% at 18% 30%, #000 24%, transparent 82%);
}
.plx--goldlight.plx--low {
  background:
    var(--grain-lit) repeat,
    radial-gradient(60% 46% at 82% 72%, rgba(201,162,39,.05), transparent 70%);
  background-size: 220px 220px, auto;
  -webkit-mask-image: radial-gradient(78% 62% at 82% 72%, #000 24%, transparent 82%);
          mask-image: radial-gradient(78% 62% at 82% 72%, #000 24%, transparent 82%);
}
.plx--sapphire {
  background:
    var(--grain-lit) repeat,
    radial-gradient(52% 44% at 86% 18%, rgba(30,100,200,.085), transparent 70%);
  background-size: 220px 220px, auto;
  -webkit-mask-image: radial-gradient(70% 60% at 86% 18%, #000 24%, transparent 82%);
          mask-image: radial-gradient(70% 60% at 86% 18%, #000 24%, transparent 82%);
}
.plx--measure {
  background:
    linear-gradient(180deg, transparent 31.5%, rgba(127,178,255,.035) 32%, transparent 32.5%),
    linear-gradient(180deg, transparent 63.5%, rgba(201,162,39,.045) 64%, transparent 64.5%);
}

/* ---------- micro-interactions --------------------------------------------- */
.btn, .nav__cta, .tier__cta { transition-property: border-color, background, transform, box-shadow; }
.card, .tier, .foundation__item { position: relative; }
.card::after, .tier::after, .foundation__item::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(260px at var(--mx, 50%) var(--my, 50%), rgba(237,241,246,.05), rgba(232,204,114,.025) 45%, transparent 65%);
  opacity: 0; transition: opacity .35s var(--ease-out-quart);
}
.card[data-sheen-on]::after, .tier[data-sheen-on]::after { opacity: 1; }
/* The page-wide .cursor-glow is RETIRED — its
   replacement is the CTA gold sheen at the conversion moment (see the blend
   block at the end of this sheet). flex.js no longer creates the node. */

/* ---------- choreography: composed entrances ------------------------------- */
[data-rise] { transform: translate3d(0, 26px, 0) scale(.988); }
[data-rise][data-in] {
  transition:
    opacity 1s var(--ease-out-quart) var(--d, 0ms),
    transform 1.25s var(--ease-out-expo) var(--d, 0ms);
}
.sec-label[data-rise]::before { transform: scaleX(0); transform-origin: left center; transition: transform .9s var(--ease-out-expo) .18s; }
.sec-label[data-rise][data-in]::before { transform: scaleX(1); }
/* ring echo — a small pulse-ring beat at each section label */
.sec-label[data-rise]::after {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  border: 1px solid var(--gold-deep); opacity: 0; flex: 0 0 auto;
}
/* Restraint: the echo no longer PULSES — the dash draw is the label's
   one motion; the ring dot now simply arrives with it, a hallmark point set
   beside the rule (quieter, and more like something printed than performed). */
.sec-label[data-rise][data-in]::after { opacity: .5; transition: opacity .9s var(--ease-out-quart) .55s; }
body[data-th-echoes="off"] .sec-label::after { display: none; }

/* ==========================================================================
   THE STAGE — ONE WebGL context for hero + thread.
   Fixed 100dvh canvas at z30: above section backgrounds, below the nav (40)
   and the lifted hero copy (31/32). The route avoids body text by authoring.
   ========================================================================== */
.gl-stage {
  position: fixed; inset: 0 0 auto 0;
  width: 100%;
  height: 100vh; height: 100dvh;         /* iOS address-bar: dvh + debounced resize */
  z-index: 30; pointer-events: none;
  opacity: 0; transition: opacity .8s var(--ease-out-quart);
}
.gl-stage.is-ready { opacity: 1; }
.hero-scrub[data-stage] .hero__canvas { display: none; }  /* frame tier stands down */
/* stage mode: the scrim lives INSIDE the hero shader (identical grade), so the
   golden thread — drawn after the ring in the same context — rides above the
   water instead of dying under a 94%-opaque DOM gradient. */
.hero-scrub[data-stage] .hero__scrim { display: none; }
.hero__scrub-hint { z-index: 31; }
/* context lost + restore never came (Firefox): the tap-to-reload affordance */
.stage-reload {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  padding: 11px 20px; border-radius: 999px; cursor: pointer;
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: #EAF1FF; background: rgba(10, 16, 28, .88);
  border: 1px solid rgba(140,180,255,.45);
  box-shadow: 0 10px 30px rgba(15,40,100,.45);
}
.stage-reload:hover { border-color: var(--signal-lit); }

/* ---------- reduced motion: everything arrived, nothing performs ----------- */
@media (prefers-reduced-motion: reduce) {
  .thread-layer path { stroke-dashoffset: 0 !important; }
  .seal-sheen, .gl-stage { display: none; }
  .plx { transform: none !important; }
  .sec-label[data-rise]::before { transform: scaleX(1); }
  .sec-label[data-rise]::after { opacity: .5; animation: none; }
}

/* ==========================================================================
   THE BLEND: heraldic hand-craft over the restrained WebGL hero.
   Everything here is REAL typography and
   static texture — engraved, letterpressed, struck; nothing AI-rendered,
   nothing animated that doesn't already have a cause. The subtractions this
   pass made (sweep, cursor glow, echo pulse, wax drift, foundation sheen)
   live at their original sites above, each with its reason.
   ========================================================================== */

/* ---------- the plates: static print-grain tiles ---------------------------
   One SVG turbulence tile each, inlined (~0.4 KB), tiled and composited with
   whatever layer carries them. Never per-frame, never filtered at runtime.
   --grain-lit  = white speckle for light pools on ink  (plate grain)
   --grain-paper= dark speckle for the founder's paper band                    */
:root {
  --grain-lit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .93 0 0 0 0 .72 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");
  --grain-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .09 0 0 0 0 .12 0 0 0 0 .17 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23p)'/%3E%3C/svg%3E");
}

/* ---------- engraved section labels (T22) ----------------------------------
   Letterpress into the ink: top edge in shadow, a hair of light under the
   baseline — the label reads SET, not typed. The founder band gets the light-
   paper version (deboss into paper). */
.sec-label { text-shadow: 0 1px 0 rgba(237,241,246,.05), 0 -1px 0 rgba(0,0,0,.55); }
.founder__label { text-shadow: 0 1px 0 rgba(255,255,255,.75), 0 -1px 0 rgba(31,42,56,.22); }

/* ---------- the founder's band is PAPER ------------------------------------ */
.founder {
  background-image:
    var(--grain-paper),
    linear-gradient(180deg, var(--read-bg) 0%, var(--read-bg2) 100%);
  background-size: 220px 220px, auto;
}

/* ---------- the seal is a STRUCK object (T22) ------------------------------
   Ink-edge: a soft dark squeeze hugging the disc rim, the shadow a die leaves
   where it pressed. Sits above the wax image, below the mark and the ring. */
.seal-wax::before {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 70%; aspect-ratio: 1; transform: translate(-51%, -50%);
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, transparent 72%, rgba(0,0,0,.30) 87%, transparent 100%);
}
/* THE STRIKE — the coil completes and the press lands: a short, weighted dip.
   `scale` (the independent property) composes with the tilt's transform on the
   figure, so the two never fight. Replays whenever the thread re-lights. */
@keyframes seal-strike { 0% { scale: 1; } 34% { scale: .982; } 100% { scale: 1; } }
.sealbreak[data-th-lit] .seal-wax__img,
.sealbreak[data-th-lit] .seal-wax__mark { animation: seal-strike .7s var(--ease-out-expo); }

/* ---------- type in motion (T7): line mask-up heading reveals --------------
   The heading rises through its own line box — overflow does the masking,
   transform does the motion, the grid reserved the space => CLS 0. motion.js
   fires data-in; no-JS and reduced-motion force the settled state. */
[data-maskup] { overflow: hidden; }
[data-maskup] .maskline { display: block; transform: translate3d(0, 114%, 0); }
[data-maskup][data-in] .maskline {
  transform: none;
  transition: transform 1.05s var(--ease-out-expo) var(--d, 0ms);
}

/* ---------- the wordmark breathes (T6 — scoped by the CLS-0 + LCP laws) ----
   Three drafts died to measurement here, in order:
   · full-headline wght breathing — reflows glyphs every frame (CLS risk);
   · text-shadow breathing on the amp — repaints the H1 region in-trace, which
     re-registered the headline as a 2.5s LCP candidate AND cost ~65ms TBT
     (measured: hero text must NEVER repaint during the trace window).
   The survivor: a static radial glow rastered ONCE behind the glyph, breathing
   on compositor OPACITY only. Gradients are never LCP candidates; opacity
   composites; the text itself never repaints. The breath is identical to the
   eye and free to the meter. */
@keyframes amp-breath { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
.hero__brand .amp { position: relative; }
.hero__brand .amp::after {
  content: ''; position: absolute; inset: -0.34em -0.30em;
  background: radial-gradient(closest-side, rgba(232,204,114,.32), rgba(201,162,39,.10) 62%, transparent 78%);
  border-radius: 50%;
  opacity: 0; will-change: opacity;
  animation: amp-breath 7.5s ease-in-out 2.4s infinite;
  mix-blend-mode: screen; pointer-events: none; z-index: -1;
}
/* the variable-font swell stays hover-only: one glyph, user-initiated */
.hero__brand .amp { transition: font-variation-settings 1.1s var(--ease-out-quart); }
.hero__brand:hover .amp { font-variation-settings: 'wght' 560; }

/* ---------- CTA gold sheen at the conversion moment (T16) ------------------
   The one place the cursor's light turns gold: inside the free-audit submit.
   Light on glass, not paint — the fill stays blue, the law stays kept. */
.cform__submit::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(150px at var(--mx, 50%) var(--my, 50%), rgba(232,204,114,.18), rgba(232,204,114,.05) 45%, transparent 70%);
  opacity: 0; transition: opacity .4s var(--ease-out-quart);
  mix-blend-mode: screen;
}
.cform__submit[data-sheen-on]::after { opacity: 1; }

/* ---------- blend reduced motion ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  [data-maskup] .maskline { transform: none !important; }
  .hero__brand .amp { animation: none; }
}