/*
 * GLACIS v2 — depth, dual register, and the strata spine.
 * ------------------------------------------------------
 * Layers on top of glacis-rebuild.css. Everything here is scoped to .gv2 so it
 * cannot leak into pages still on the campaign system.
 *
 * Two registers, one system. Glacis is aubergine ink; OVERT is parchment. The
 * same token names carry both, so a component is written once and reads correctly
 * in either. Light values are lifted verbatim from glacis-aubergine.css so the
 * rebuild system and the legacy system agree on what "light" means.
 *
 * Type is fixed by brand: Söhne upright, Domaine Display for italic accents only,
 * Tiempos Text for prose at 16px and up. Anything under 16px is Söhne.
 */

/* ============================================================
   1. REGISTER — dark is the default; light remaps the same names
   ============================================================ */

.gv2 {
  /* Depth planes. The dark register was previously one flat fill; these give
     the page a floor, a mid plane, and a raised plane to sit things on. */
  --plane-0: #14101b;
  --plane-1: #18141f;
  --plane-2: #1e1724;

  /* Glass. Tinted toward bone so panels read as lit from above, not as holes. */
  --glass-bg: rgba(237, 227, 208, 0.045);
  --glass-bg-hover: rgba(237, 227, 208, 0.072);
  --glass-edge: rgba(237, 227, 208, 0.14);
  --glass-edge-lit: rgba(237, 227, 208, 0.26);
  --glass-shadow: 0 1px 0 rgba(237, 227, 208, 0.03), 0 18px 46px -34px rgba(0, 0, 0, 0.7);
  --glass-blur: blur(16px) saturate(1.12);

  /* Ambient field — keeps large dark areas from going dead flat. */
  --aura-cyan: rgba(130, 196, 208, 0.10);
  --aura-violet: rgba(167, 139, 250, 0.10);
  --aura-brass: rgba(182, 161, 136, 0.07);

  --ink-on-accent: #14101b;
  --focus: var(--cyan);
}

/* Declared on the root as well as the body: <html> paints the viewport from
   --iris-0, and it is not a descendant of .gv2, so a body-only remap leaves the
   page ground dark no matter what the body does. */
html[data-theme="light"],
html[data-theme="light"] .gv2,
body.theme-light,
body.theme-light .gv2 {
  --plane-0: #fcf7ec;
  --plane-1: #f8f0e0;
  --plane-2: #f2e4cd;

  /* The campaign system paints the page from --iris-* (and does it with
     !important on body.aubergine). Remapping those here is what actually turns
     the page over to parchment — without it every surface stays aubergine and
     the dark ink type disappears against it. */
  --iris-0: #fcf7ec;
  --iris-1: #f8f0e0;
  --iris-2: #f2e4cd;
  --iris-3: #e6d1ac;
  --iris-4: #ddc29a;

  --bone: #31283a;
  --bone-strong: #17101e;
  --bone-mute: #665b66;
  --bone-dim: #877a7a;

  --cyan: #2f7f90;
  --cyan-mid: #226f81;
  --cyan-line: rgba(47, 127, 144, 0.30);
  --violet: #73509a;
  --violet-mid: #65468b;
  --violet-line: rgba(115, 80, 154, 0.28);
  --amber: #9a653a;
  --brass: #a88b65;
  /* Small brass small-caps (eyebrows, witness labels) set 11-12px on parchment;
     #927752 measured 3.94:1 there. Darkened to clear AA with margin. */
  --brass-lift: #7a6140;

  --rule: rgba(64, 48, 34, 0.13);
  --rule-strong: rgba(64, 48, 34, 0.24);

  /* On parchment, glass is a paper lift: warmer, tighter shadow, real edge. */
  --glass-bg: rgba(255, 252, 245, 0.66);
  --glass-bg-hover: rgba(255, 252, 245, 0.86);
  --glass-edge: rgba(64, 48, 34, 0.13);
  --glass-edge-lit: rgba(146, 119, 82, 0.34);
  --glass-shadow: 0 1px 0 rgba(255, 252, 245, 0.6), 0 14px 34px -30px rgba(64, 48, 34, 0.34);

  --aura-cyan: rgba(47, 127, 144, 0.11);
  --aura-violet: rgba(115, 80, 154, 0.09);
  --aura-brass: rgba(168, 139, 101, 0.12);

  --ink-on-accent: #fcf7ec;
}

/* ============================================================
   1b. REGISTER ISLANDS — surfaces that do not follow the theme
   ------------------------------------------------------------
   Some surfaces are a fixed material, not a themed one. The hero is a dark
   film and the OVERT band is parchment, in both registers. Their type has to
   be pinned to the material they sit on, or the global token flip turns them
   unreadable. This is what made the light theme unusable: the hero headline
   inherited ink (#17101e) over the dark video at 1.01:1, and the nav kept its
   hardcoded near-black fill while its links flipped to ink at 2.9:1.
   ============================================================ */

html[data-theme="light"] .home-hero,
body.theme-light .home-hero {
  --bone: #ede3d0;
  --bone-strong: #f5ecd9;
  --bone-mute: #b5a9a0;
  --bone-dim: #958996;
  --amber: #e0ae7c;
  --brass-lift: #cfbfa8;
  --cyan: #82c4d0;
  --cyan-mid: #5fb4c4;
  /* The film is the same footage in both registers, so the type over it must be
     the same too. Without these three the eyebrow dot and the full stop fall to
     the parchment violet (#65468b), which reads muddy against a hardcoded
     lavender glow and makes the light hero look softer than the dark one. */
  --violet: #c084fc;
  --violet-mid: #a78bfa;
  --violet-line: rgba(192, 132, 252, 0.4);
  --rule: rgba(237, 227, 208, 0.16);
  --rule-strong: rgba(237, 227, 208, 0.28);
  --ink-on-accent: #14101b;
  --glass-bg: rgba(237, 227, 208, 0.09);
  --glass-bg-hover: rgba(237, 227, 208, 0.14);
  --glass-edge: rgba(237, 227, 208, 0.20);
  --glass-edge-lit: rgba(237, 227, 208, 0.34);
}

/* .glacis-nav paints rgba(20,16,27,…) as a literal, so it cannot follow a token
   remap. Give it the parchment surface its type now assumes. */
html[data-theme="light"] .glacis-nav,
body.theme-light .glacis-nav {
  background: rgba(252, 247, 236, 0.82);
  border-bottom-color: rgba(64, 48, 34, 0.14);
}

html[data-theme="light"] .glacis-nav.is-scrolled,
body.theme-light .glacis-nav.is-scrolled {
  background: rgba(252, 247, 236, 0.96);
  border-bottom-color: rgba(64, 48, 34, 0.20);
}

/* The nav CTA is a dark chip with bone type; on parchment that inverts to ink
   on near-ink. Give it a filled treatment that clears 4.5:1 at 12px. */
/* Outspecifies `html body.aubergine .glacis-nav-cta` (0,2,2), which pins the
   colour to --bone-strong !important and otherwise leaves ink on teal. */
html[data-theme="light"] body.aubergine .glacis-nav-cta,
body.theme-light.aubergine .glacis-nav-cta {
  background: var(--cyan-mid);
  border-color: transparent;
  color: #fcf7ec !important;
}

/* ============================================================
   2. GROUND — a mesh, never a flat fill
   ============================================================ */

/* body.aubergine paints a flat fill with !important, so this needs equal
   specificity and the later source order to replace it with the mesh. */
body.gv2 {
  background:
    radial-gradient(ellipse 48% 20% at 12% 4%, var(--aura-cyan) 0%, transparent 66%),
    radial-gradient(ellipse 44% 18% at 88% 18%, var(--aura-violet) 0%, transparent 66%),
    radial-gradient(ellipse 50% 16% at 22% 52%, var(--aura-brass) 0%, transparent 64%),
    radial-gradient(ellipse 46% 16% at 82% 74%, var(--aura-cyan) 0%, transparent 66%),
    linear-gradient(180deg, var(--plane-0) 0%, var(--plane-1) 48%, var(--plane-0) 100%) !important;
  color: var(--bone-mute);
}

.gv2-shell {
  width: min(100% - (var(--gutter) * 2), var(--shell));
  margin-inline: auto;
}

.gv2-section {
  position: relative;
  padding-block: clamp(80px, 9vw, 132px);
}

.gv2-main {
  position: relative;
  z-index: 1;
}

.gv2-section > .gv2-shell {
  position: relative;
  z-index: 1;
}

/* ============================================================
   3. TYPE — brand-fixed roles, one scale
   ============================================================ */

.gv2-eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass-lift);
  margin: 0 0 18px;
}

.gv2-h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.018em;
  color: var(--bone-strong);
  margin: 0 0 20px;
  text-wrap: balance;
}

.gv2-h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(19px, 1.7vw, 23px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--bone-strong);
  margin: 0 0 10px;
}

/* Domaine italic is the only italic. Never faux-italic Söhne. */
.gv2 em,
.gv2-h2 em,
.gv2-h3 em {
  font-family: var(--italic-accent);
  font-style: italic;
  font-weight: 400;
  color: var(--amber);
}

.gv2-lede {
  font-family: var(--body);
  font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.62;
  color: var(--bone-mute);
  max-width: 62ch;
  margin: 0 0 8px;
}

.gv2-body {
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.66;
  color: var(--bone-mute);
  margin: 0;
}

/* Under 16px is Söhne — Domaine and Tiempos get fragile at caption size. */
.gv2-note,
.gv2-label,
.gv2-meta {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--bone-dim);
}

.gv2-label {
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--bone-dim);
}

/* ============================================================
   4. GLASS — the overlay system
   ============================================================ */

.gv2-glass {
  position: relative;
  background: var(--glass-bg);
  border: 1px solid var(--glass-edge);
  border-radius: 5px;
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  transition:
    background 240ms var(--ease),
    border-color 240ms var(--ease);
}

/* The lit top edge is what sells the material — a 1px specular highlight. */
.gv2-glass::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  border-radius: 5px 5px 0 0;
  background: linear-gradient(90deg, transparent, var(--glass-edge-lit) 22%, var(--glass-edge-lit) 78%, transparent);
  pointer-events: none;
}

.gv2-glass-interactive:hover,
.gv2-glass-interactive:focus-within {
  background: var(--glass-bg-hover);
  border-color: var(--glass-edge-lit);
}

/* ============================================================
   5. FEATURE → BENEFIT — the funnel's working unit
   ============================================================ */

.gv2-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
}

.gv2-card {
  padding: 26px 24px 24px;
}

/* The benefit line is the payoff — it gets the accent rule, the feature doesn't. */
.gv2-benefit {
  margin: 14px 0 0;
  padding-top: 13px;
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--cyan);
}

/* ============================================================
   6. PLANS
   ============================================================ */

.gv2-plans {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  align-items: stretch;
}

.gv2-plan {
  display: flex;
  flex-direction: column;
  padding: 28px 26px;
}

.gv2-plan-featured {
  border-color: var(--glass-edge-lit);
  background: var(--glass-bg-hover);
}

.gv2-plan-flag {
  position: absolute;
  top: -1px;
  right: 20px;
  transform: translateY(-50%);
  padding: 4px 11px;
  border-radius: 4px;
  background: var(--cyan);
  color: var(--ink-on-accent);
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.gv2-price {
  font-family: var(--display);
  font-weight: 500;
  font-size: 38px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--bone-strong);
  margin: 6px 0 4px;
}

.gv2-price-unit {
  font-size: 14px;
  color: var(--bone-dim);
  letter-spacing: 0;
}

.gv2-plan-list {
  list-style: none;
  margin: 20px 0 26px;
  padding: 0;
  display: grid;
  gap: 11px;
}

.gv2-plan-list li {
  position: relative;
  padding-left: 24px;
  font-family: var(--body);
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--bone-mute);
}

.gv2-plan-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 8px;
  width: 9px;
  height: 5px;
  border-left: 1.5px solid var(--cyan);
  border-bottom: 1.5px solid var(--cyan);
  transform: rotate(-45deg);
}

.gv2-plan-cta { margin-top: auto; }

/* Tier color code: cyan starts, amber carries the fleet, violet crosses
   the boundary. Accent rides the top edge + the tier label only. */
.gv2-plan { border-top: 3px solid var(--glass-edge); }
.gv2-plan-free { border-top-color: var(--cyan); }
.gv2-plan-free > .gv2-label { color: var(--cyan); }
.gv2-plan-featured { border-top-color: var(--amber); }
.gv2-plan-featured > .gv2-label { color: var(--amber); }
.gv2-plan-ent { border-top-color: var(--violet); }
.gv2-plan-ent > .gv2-label { color: var(--violet); }
.gv2-plan-featured .gv2-plan-flag {
  border-left-color: var(--amber);
  border-bottom-color: var(--amber);
}

/* ============================================================
   7. BUTTONS
   ============================================================ */

.gv2-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.gv2-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 4px;
  border: 1px solid transparent;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 200ms var(--ease), border-color 200ms var(--ease);
}

.gv2-btn-primary {
  background: var(--cyan);
  color: var(--ink-on-accent);
}

.gv2-btn-primary:hover { background: var(--cyan-mid); }

.gv2-btn-ghost {
  background: var(--glass-bg);
  border-color: var(--glass-edge-lit);
  color: var(--bone-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

.gv2-btn-ghost:hover { background: var(--glass-bg-hover); border-color: var(--cyan-line); }

.gv2-btn-full { width: 100%; }

.gv2-textlink {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--bone-strong);
  text-decoration: none;
  border-bottom: 1px solid var(--glass-edge-lit);
  padding-bottom: 2px;
}

.gv2-textlink:hover { color: var(--cyan); border-bottom-color: var(--cyan); }

/* ============================================================
   8. THE STRATA BAND — the signature
   The wave field crosses out of aubergine and into parchment here. It is the
   only place the page changes register, and it is where OVERT is introduced.
   ============================================================ */

.gv2-strata {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(180deg, #f6efe0 0%, #efe6d3 100%);
  color: #4a4038;
  padding-block: clamp(64px, 8vw, 104px);
}

.gv2-strata::before,
.gv2-strata::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 90px;
  pointer-events: none;
  z-index: 2;
}

/* Feathered seams so the band emerges from the ink rather than butting against it. */
.gv2-strata::before {
  top: 0;
  background: linear-gradient(180deg, var(--plane-0) 0%, transparent 100%);
  opacity: 0.5;
}

.gv2-strata::after {
  bottom: 0;
  background: linear-gradient(0deg, var(--plane-0) 0%, transparent 100%);
  opacity: 0.5;
}

/* The engine is tuned for a ~150-230px horizontal band (ampScale = h/230, and
   inkStrata's default viewBox is 1400x150). Stretching it to fill a tall box
   multiplies the amplitude and flattens the easing — the curve stops looking
   like the OVERT cover. So the strata stay a band along the bottom, at close to
   their native aspect, well clear of the text. */
.gv2-strata-lines {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 58%;
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 56%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 56%);
}

.gv2-strata-layer { position: absolute; inset: 0; }
.gv2-strata-layer svg { display: block; width: 100%; height: 100%; }

/* Three passes at different depths. Only the middle one is the canonical
   seed-7 field; the other two are out-of-focus texture behind and in front of
   it, so the band reads as air rather than as a single flat graphic. */
.gv2-strata-far {
  opacity: 0.34;
  filter: blur(3.5px);
  transform: scale(1.14) translateY(3%);
}

.gv2-strata-mid {
  opacity: 0.52;
  filter: blur(1px);
}

.gv2-strata-near {
  opacity: 0.26;
  filter: blur(0.4px);
  transform: scale(0.94) translateY(-2.5%);
}

/* inkStrata draws ink-on-cream. When the band inverts, those strokes vanish
   against it, so the polylines are restated in the bone register. */
html[data-theme="light"] .gv2-strata-lines polyline,
body.theme-light .gv2-strata-lines polyline {
  stroke: rgba(237, 227, 208, 0.20) !important;
}

html[data-theme="light"] .gv2-strata-lines polyline[stroke="#B8935E"],
body.theme-light .gv2-strata-lines polyline[stroke="#B8935E"] {
  stroke: rgba(207, 191, 168, 0.5) !important;
}

.gv2-strata > .gv2-shell { position: relative; z-index: 1; }

.gv2-strata .gv2-h2 { color: #1f1814; }
.gv2-strata .gv2-lede,
.gv2-strata .gv2-body { color: #5a4f43; }
.gv2-strata .gv2-eyebrow { color: #8e6d3e; }
.gv2-strata em { color: #8e6d3e; }

.gv2-strata .gv2-btn-ghost {
  background: rgba(255, 252, 245, 0.7);
  border-color: rgba(64, 48, 34, 0.2);
  color: #2b2119;
}

.gv2-strata .gv2-textlink {
  color: #226f81;
  border-bottom-color: rgba(34, 111, 129, 0.38);
}

/* In the light register the surrounding page is already parchment, so the band
   inverts instead — ink strata on aubergine — and the crossing still reads. */
html[data-theme="light"] .gv2-strata,
body.theme-light .gv2-strata {
  background: linear-gradient(180deg, #1a1521 0%, #14101b 100%);
  color: var(--bone-mute);
}

html[data-theme="light"] .gv2-strata::before,
body.theme-light .gv2-strata::before,
html[data-theme="light"] .gv2-strata::after,
body.theme-light .gv2-strata::after {
  background: linear-gradient(180deg, #fcf7ec 0%, transparent 100%);
}

html[data-theme="light"] .gv2-strata::after,
body.theme-light .gv2-strata::after {
  background: linear-gradient(0deg, #f2e4cd 0%, transparent 100%);
}

html[data-theme="light"] .gv2-strata .gv2-h2,
body.theme-light .gv2-strata .gv2-h2 { color: #f5ecd9; }

html[data-theme="light"] .gv2-strata .gv2-lede,
body.theme-light .gv2-strata .gv2-lede,
html[data-theme="light"] .gv2-strata .gv2-body,
body.theme-light .gv2-strata .gv2-body { color: #b5a9a0; }

html[data-theme="light"] .gv2-strata .gv2-eyebrow,
body.theme-light .gv2-strata .gv2-eyebrow,
html[data-theme="light"] .gv2-strata em,
body.theme-light .gv2-strata em { color: #cfbfa8; }

html[data-theme="light"] .gv2-strata .gv2-btn-ghost,
body.theme-light .gv2-strata .gv2-btn-ghost {
  background: rgba(237, 227, 208, 0.07);
  border-color: rgba(237, 227, 208, 0.26);
  color: #f5ecd9;
}

html[data-theme="light"] .gv2-strata .gv2-textlink,
body.theme-light .gv2-strata .gv2-textlink {
  color: #f5ecd9;
  border-bottom-color: rgba(237, 227, 208, 0.26);
}

/* ============================================================
   9. RECEIPT SPECIMEN — the proof object
   ============================================================ */

.gv2-receipt { padding: 0; overflow: hidden; }

.gv2-receipt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--rule);
  background: var(--glass-bg);
}

.gv2-receipt-row {
  display: grid;
  grid-template-columns: 132px 1fr auto;
  gap: 16px;
  align-items: baseline;
  padding: 13px 20px;
  border-bottom: 1px solid var(--rule);
}

.gv2-receipt-row:last-child { border-bottom: 0; }

.gv2-receipt-key {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-dim);
}

/* Machine-readable stays in Söhne — monospace is not our shorthand for technical. */
.gv2-receipt-val {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--bone);
}

.gv2-receipt-tag {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 4px;
  border: 1px solid var(--glass-edge-lit);
  color: var(--bone-dim);
  white-space: nowrap;
}

.gv2-receipt-tag-pass { color: var(--cyan); border-color: var(--cyan-line); }
.gv2-receipt-tag-block { color: var(--violet); border-color: var(--violet-line); }

/* ============================================================
   10. THEME TOGGLE
   ============================================================ */

.gv2-theme {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 4px;
  border: 1px solid var(--glass-edge);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

.gv2-theme button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--bone-dim);
  cursor: pointer;
  transition: background 180ms var(--ease), color 180ms var(--ease);
}

.gv2-theme button svg { width: 15px; height: 15px; }
.gv2-theme button:hover { color: var(--bone-strong); }

.gv2-theme button[aria-pressed="true"] {
  background: var(--glass-bg-hover);
  color: var(--cyan);
}

/* ============================================================
   11. TRUST STRIP
   ============================================================ */

.gv2-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 34px;
  align-items: center;
  justify-content: center;
  padding: 18px 24px;
}

.gv2-strip-item {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--bone-dim);
}

.gv2-strip-num {
  font-family: var(--display);
  font-weight: 500;
  font-size: 19px;
  color: var(--bone-strong);
  letter-spacing: -0.01em;
}

/* ============================================================
   12. MOTION + ACCESSIBILITY FLOOR
   ============================================================ */

/* The campaign system has no screen-reader utility, and an undefined class
   leaves the label text visible next to the icon. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

 /* Opacity-only, fast. A translate reveal leaves misplaced ghosts in every
   mid-scroll frame; a fade at this speed is done before the eye settles. */
.gv2-rise {
  opacity: 0;
  transition: opacity 240ms var(--ease);
}

.gv2-rise.is-in { opacity: 1; }

.gv2 :focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .gv2-rise { opacity: 1; transform: none; transition: none; }
  .gv2-glass-interactive:hover,
  .gv2-btn:hover { transform: none; }
}

/* backdrop-filter is broad but not universal; without it the tints alone are
   too thin to separate a panel from the ground, so opacity steps up. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .gv2 { --glass-bg: rgba(30, 23, 36, 0.86); --glass-bg-hover: rgba(36, 27, 44, 0.94); }
  html[data-theme="light"] .gv2,
  body.theme-light .gv2 { --glass-bg: rgba(255, 252, 245, 0.94); --glass-bg-hover: #fffdf8; }
}

@media (max-width: 720px) {
  .gv2-receipt-row { grid-template-columns: 1fr; gap: 4px; }
  .gv2-section { padding-block: clamp(56px, 12vw, 84px); }
}

/* ============================================================
   13. WORDMARK REGISTER
   glacis-wordmark-dark.svg is solid #FFFFFF — invisible on parchment. The
   repo already ships glacis-wordmark.svg in ink; swap them with the theme
   rather than filtering, so the mark keeps its drawn colours.
   ============================================================ */

.glacis-brand-word-lt { display: none; }

html[data-theme="light"] .glacis-brand-word-lt,
body.theme-light .glacis-brand-word-lt { display: inline-block; }

html[data-theme="light"] .glacis-brand-word:not(.glacis-brand-word-lt),
body.theme-light .glacis-brand-word:not(.glacis-brand-word-lt) { display: none; }

html[data-theme="light"] .glacis-footer-lockup .glacis-footer-word:not(.glacis-footer-word-lt),
body.theme-light .glacis-footer-lockup .glacis-footer-word:not(.glacis-footer-word-lt) { display: none; }
html[data-theme="light"] .glacis-footer-word-lt,
body.theme-light .glacis-footer-word-lt { display: inline-block; }

/* ============================================================
   14. ARCHITECTURE DIAGRAM
   The mechanism drawn once, instead of three cards restating it in prose.
   Everything is token-driven so it reads in both registers.
   ============================================================ */

.gv2-diagram {
  margin: 40px 0 0;
  padding: 26px 22px;
  border: 1px solid var(--glass-edge);
  border-radius: 5px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  overflow-x: auto;
}

.gv2-diagram svg { display: block; width: 100%; min-width: 660px; height: auto; }

.dg-boundary {
  fill: none;
  stroke: var(--rule-strong);
  stroke-width: 1;
  stroke-dasharray: 5 6;
}

.dg-box { fill: var(--glass-bg-hover); stroke: var(--glass-edge-lit); stroke-width: 1; }
.dg-box-accent { stroke: var(--cyan); }
.dg-box-open { fill: none; stroke: var(--glass-edge-lit); stroke-dasharray: 5 6; }

/* Diagram text is all below 16px, so all of it is Söhne. */
.dg-label {
  fill: var(--bone-strong);
  font-family: var(--sans);
  font-size: 15px;
  text-anchor: middle;
}

.dg-label-accent { fill: var(--cyan); }

.dg-sub,
.dg-zone,
.dg-note,
.dg-verdict {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  fill: var(--bone-dim);
  text-anchor: middle;
}

.dg-zone { text-anchor: start; fill: var(--brass-lift); }

.dg-note,
.dg-verdict {
  letter-spacing: 0.06em;
  font-size: 11.5px;
  fill: var(--cyan);
}

.dg-flow { stroke: var(--bone-dim); stroke-width: 1.2; fill: none; }
.dg-flow-accent { stroke: var(--cyan); }
.dg-arrowheads path { fill: var(--bone-dim); stroke: none; }
.dg-arrowheads .dg-flow-accent-fill { fill: var(--cyan); }

/* ============================================================
   15. STEPS — a numbered sequence, not another card grid
   ============================================================ */

.gv2-steps {
  list-style: none;
  counter-reset: step;
  margin: 34px 0 0;
  padding: 0;
  display: grid;
  gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.gv2-steps li {
  counter-increment: step;
  position: relative;
  padding: 22px 26px 4px;
  border-top: 1px solid var(--rule);
}

/* The order is real — govern happens before record happens before answer — so
   the numbering carries information rather than decorating. */
.gv2-steps li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  margin-bottom: 10px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--cyan);
}

@media (min-width: 760px) {
  .gv2-steps li + li { border-left: 1px solid var(--rule); }
}

/* ============================================================
   16. NUMBERS
   Figures already published on /about, restated where they do funnel work:
   immediately before the price. Set in the display face at scale so a skim
   reader picks them up without reading a line of prose.
   ============================================================ */

.gv2-section-tight { padding-block: clamp(56px, 6vw, 88px); }

.gv2-numbers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0;
  margin: 34px 0 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.gv2-numbers > div { padding: 22px 20px 6px; }

@media (min-width: 860px) {
  .gv2-numbers > div + div { border-left: 1px solid var(--rule); }
}

.gv2-num {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--bone-strong);
  margin: 0 0 10px;
}

.gv2-num-label {
  margin: 0;
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.45;
  letter-spacing: 0.04em;
  color: var(--bone-dim);
}

/* ============================================================
   17. MOBILE MENU + THEME CONTROL — light register
   The campaign system paints both from literal aubergine values, so neither
   followed the token remap: the drawer stayed near-black while its links
   turned to ink, and the toggle's chrome kept a dark edge on parchment.
   ============================================================ */

html[data-theme="light"] .glacis-mobile-menu,
body.theme-light .glacis-mobile-menu {
  background: #fcf7ec;
  color: var(--bone);
}

html[data-theme="light"] .glacis-mobile-links a,
body.theme-light .glacis-mobile-links a,
html[data-theme="light"] .glacis-mobile-close,
body.theme-light .glacis-mobile-close,
html[data-theme="light"] .glacis-nav-toggle,
body.theme-light .glacis-nav-toggle {
  color: var(--bone-strong);
}

html[data-theme="light"] .glacis-mobile-links a,
body.theme-light .glacis-mobile-links a {
  border-bottom-color: var(--rule);
}

/* The theme control is chrome, not content: it takes the nav's own surface in
   both registers rather than the page's glass tokens. */
.gv2-theme {
  border-color: var(--glass-edge);
  background: var(--glass-bg);
}

html[data-theme="light"] .gv2-theme,
body.theme-light .gv2-theme {
  border-color: rgba(64, 48, 34, 0.16);
  background: rgba(255, 252, 245, 0.72);
}

html[data-theme="light"] .gv2-theme button,
body.theme-light .gv2-theme button { color: #7d7268; }

html[data-theme="light"] .gv2-theme button:hover,
body.theme-light .gv2-theme button:hover { color: var(--bone-strong); }

html[data-theme="light"] .gv2-theme button[aria-pressed="true"],
body.theme-light .gv2-theme button[aria-pressed="true"] {
  background: rgba(47, 127, 144, 0.12);
  color: var(--cyan-mid);
}

/* Below the nav-links breakpoint the toggle moves into the drawer, so it is
   not competing with the hamburger for the same 40px of chrome. */
@media (max-width: 980px) {
  .glacis-nav .gv2-theme { display: none; }
  /* The drawer is a stretch-aligned flex column; without this the pill
     spans the full width and stops reading as a control. */
  .glacis-mobile-menu .gv2-theme {
    display: inline-flex;
    align-self: flex-start;
    width: fit-content;
    margin-top: 18px;
  }
}

/* Partner marks: DiMe joins the monochrome row without flattening the other
   badge assets; every backer mark is a full-size, keyboard-visible link. */
.gv2-partner-row img.gv2-mark-dime,
html[data-theme="light"] .gv2 .gv2-partner-row img.gv2-mark-dime,
body.theme-light .gv2 .gv2-partner-row img.gv2-mark-dime {
  filter: grayscale(1) contrast(1.08);
  opacity: 0.76;
}

.gv2-partner-row a {
  display: inline-flex;
  align-items: center;
  color: inherit;
  text-decoration: none;
}

.gv2-partner-row a:focus-visible {
  outline: 2px solid var(--cyan-mid);
  outline-offset: 7px;
}

body.gv2:not(.theme-light) .gv2-backers .gv2-partner-row img:not(.gv2-mark-badge) {
  filter: brightness(0) invert(1) !important;
  opacity: 0.62 !important;
}

/* The witness is the institutional actor in the diagram — brass, the register
   the OVERT band and the accent thread in the strata already own. */
.dg-box-witness { fill: var(--glass-bg-hover); stroke: var(--brass); stroke-width: 1.2; }
.dg-label-witness { fill: var(--brass-lift); }
.dg-flow-witness { stroke: var(--brass); stroke-width: 1.2; fill: none; }
.dg-flow-witness-fill { fill: var(--brass); }
.dg-note-witness { fill: var(--brass-lift); letter-spacing: 0.06em; font-size: 11px; }

html[data-theme="light"] .dg-label-witness,
body.theme-light .dg-label-witness,
html[data-theme="light"] .dg-note-witness,
body.theme-light .dg-note-witness { fill: var(--brass-lift); }

/* ============================================================
   18. EVIDENCE TIERS
   The two claims, verbatim from the product docs, as a ledger — the honesty
   about the self-signed tier's limits is what makes the witnessed tier sell.
   ============================================================ */

.gv2-tiers { margin-top: 18px; padding: 0; overflow: hidden; }

.gv2-tier-row {
  display: grid;
  grid-template-columns: 150px 1fr 232px;
  gap: 18px;
  align-items: baseline;
  padding: 18px 22px;
}

.gv2-tier-row + .gv2-tier-row { border-top: 1px solid var(--rule); }

.gv2-tier-badge {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid var(--glass-edge-lit);
  color: var(--bone-dim);
  justify-self: start;
  white-space: nowrap;
}

.gv2-tier-row-witnessed .gv2-tier-badge { color: var(--brass-lift); border-color: var(--brass); }

.gv2-tier-claim {
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--bone);
  margin: 0;
}

.gv2-tier-holds {
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--bone-dim);
  margin: 0;
}

.gv2-tier-row-witnessed .gv2-tier-holds { color: var(--cyan); }

@media (max-width: 720px) {
  .gv2-tier-row { grid-template-columns: 1fr; gap: 8px; }
}

.gv2-receipt-tag-witness { color: var(--brass-lift); border-color: var(--brass); }

.dg-sub-snug { letter-spacing: 0.07em; }

/* ============================================================
   19. THE LEDGER MOMENT
   The page's original promise line, kept struck-through with its amendment
   appended beneath — the marketing behaving like the append-only log it
   sells. By policy this block only ever gains rows.
   ============================================================ */

.gv2-section-ledger { padding-block: clamp(40px, 4vw, 64px) 0; }

.gv2-ledger { max-width: 760px; padding: 4px 0; }

.gv2-ledger-row {
  display: grid;
  gap: 8px;
  padding: 18px 24px;
}

.gv2-ledger-row + .gv2-ledger-row { border-top: 1px solid var(--rule); }

.gv2-ledger-line {
  margin: 0;
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--bone);
}

/* The dead sentence stays fully legible — a correction should look like a
   correction, not a design element. */
.gv2-ledger-struck .gv2-ledger-line { color: var(--bone-dim); }
.gv2-ledger-struck s { text-decoration-color: var(--brass); text-decoration-thickness: 1px; }

.gv2-ledger-amended { color: var(--brass-lift); }

/* ============================================================
   20. WITNESS PROOFS — hairline columns, no boxes
   ============================================================ */

.gv2-witness-proofs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  margin-top: 38px;
  border-top: 1px solid var(--rule);
}

.gv2-witness-proofs > div { padding: 22px 26px 6px; }

.gv2-witness-proofs .gv2-label { display: block; margin-bottom: 10px; color: var(--brass-lift); }

@media (min-width: 760px) {
  .gv2-witness-proofs > div + div { border-left: 1px solid var(--rule); }
}

/* ============================================================
   21. TIER CLAIMS + HORIZON — the two Domaine moments
   The doc claims and the boiler line are the only prose set in the italic
   accent face at display size; scarcity is what keeps them audible.
   ============================================================ */

.gv2-tier-claim {
  font-family: var(--italic-accent);
  font-style: italic;
  font-size: clamp(18px, 1.9vw, 22px);
  line-height: 1.45;
  color: var(--bone-strong);
}

.gv2-diagram-caption { margin-top: 14px; padding: 0 4px; }

.gv2-horizon {
  font-family: var(--body);
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.65;
  color: var(--bone-mute);
  max-width: 640px;
  margin: 0 auto 40px;
}

.gv2-horizon em { font-family: var(--italic-accent); font-style: italic; color: var(--amber); }

/* ============================================================
   22. WITNESS BAND — the living ridgeline behind the moment
   The animated field returns at its native band height, low in the section
   and masked, so the page's one moving element sits exactly where the
   countersignature happens. Texture, not spectacle.
   ============================================================ */

.gv2-witness-band {
  overflow: hidden;
  padding-bottom: clamp(120px, 12vw, 170px);
}

.gv2-witness-waves {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 190px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.7;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 55%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 55%);
}

/* The engineer's on-ramp: one command, visibly copyable. Söhne, per the
   machine-readable-is-not-terminal-styled rule. */
.gv2-cmd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
  padding: 10px 14px;
  border: 1px solid var(--glass-edge-lit);
  border-radius: 4px;
  background: var(--glass-bg);
  font-family: var(--sans);
  font-size: 14px;
  color: var(--bone-strong);
}

.gv2-copy {
  border: 0;
  padding: 3px 10px;
  border-radius: 4px;
  background: var(--glass-bg-hover);
  color: var(--cyan);
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

.gv2-copy:hover { color: var(--bone-strong); }


/* ============================================================
   23. SEAM STRIP
   ============================================================ */

.gv2-seam-strip {
  position: relative;
  z-index: 3;
  margin-top: -34px;
}

@media (max-width: 980px) {
  /* At narrow widths the hero crops unpredictably; overlapping its seam
     tears. The strip sits below it instead. */
  .gv2-seam-strip { margin-top: 18px; }
}

.dg-note-end { text-anchor: end; }

/* ============================================================
   16. PARTNERS + BACKERS — logo rows
   Marks flattened to one color so mixed source files read as a
   set: bone silhouettes on aubergine, ink on parchment. An org
   without a usable mark renders as a typeset name via
   .gv2-partner-text (currently unused; kept for that case).
   ============================================================ */

.gv2-partners { padding-block: clamp(30px, 4vw, 50px); }

.gv2-partners .gv2-label {
  display: block;
  text-align: center;
  margin: 0 0 18px;
}

.gv2-partner-row {
  list-style: none;
  margin: 0;
  padding: 20px 0 4px;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  column-gap: clamp(22px, 3vw, 40px);
  row-gap: 20px;
}

.gv2-partner-row li { display: inline-flex; align-items: center; }

.gv2-partner-row img {
  display: block;
  height: 28px;
  width: auto;
  max-width: 190px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.55;
  transition: opacity 0.2s ease;
}

.gv2-partner-row li:hover img { opacity: 0.85; }

/* Marks whose identity depends on knockouts or color overlaps
   (they collapse if flattened): grayscale keeps figure/ground. */
.gv2-partner-row img.gv2-mark-tonal {
  filter: grayscale(1) brightness(1.55) contrast(0.92);
  opacity: 0.72;
}

/* Two marks defeat the tonal pass for opposite reasons, and both lost their
   wordmark in the monochrome row:
   - DiMe is a sealed badge — white type knocked out of a dark tile. Lifting
     brightness raises the tile toward the type and the name washes out.
   - ScaleHealth is near-black ink (#241F20). Lifting it only to mid-grey
     leaves dark type on a dark ground.
   Neither wants more brightness; they want their own figure/ground back. */
.gv2-partner-row img.gv2-mark-badge {
  filter: none;
  opacity: 0.9;
}
.gv2-partner-row li:hover img.gv2-mark-badge { opacity: 1; }

.gv2-partner-row img.gv2-mark-ink {
  filter: grayscale(1) invert(1) brightness(1.12) contrast(1.1);
  opacity: 0.78;
}

html[data-theme="light"] .gv2 .gv2-partner-row img.gv2-mark-badge,
body.theme-light .gv2 .gv2-partner-row img.gv2-mark-badge {
  filter: none;
  opacity: 0.92;
}

/* On parchment the ink mark is already correct polarity — no invert. */
html[data-theme="light"] .gv2 .gv2-partner-row img.gv2-mark-ink,
body.theme-light .gv2 .gv2-partner-row img.gv2-mark-ink {
  filter: grayscale(1) brightness(0.5) contrast(1.1);
  opacity: 0.7;
}

/* Square/round/stacked badges read too small at wordmark height. */
.gv2-partner-row img.gv2-mark-sq { height: 38px; }

/* Investor row runs double the working-with scale. */
.gv2-backers .gv2-partner-row img { height: 44px; max-width: 300px; }
.gv2-backers .gv2-partner-row img.gv2-mark-sq { height: 60px; }

.gv2-partner-text {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: var(--bone-dim);
}

html[data-theme="light"] .gv2 .gv2-partner-row img,
body.theme-light .gv2 .gv2-partner-row img {
  filter: brightness(0);
  opacity: 0.5;
}

html[data-theme="light"] .gv2 .gv2-partner-row img.gv2-mark-tonal,
body.theme-light .gv2 .gv2-partner-row img.gv2-mark-tonal {
  /* Darkened so pale marks (tan Sourdough loaf) hold on parchment. */
  filter: grayscale(1) brightness(0.62) contrast(1.05);
  opacity: 0.68;
}

/* ============================================================
   17. QUOTE BAND — production testimonial
   One voice, one face, one full-color mark. No glass, no wave.
   ============================================================ */

.gv2-quote-band { padding-block: clamp(48px, 6vw, 84px); }

.gv2-quote { margin: 0 auto; max-width: 880px; }

.gv2-quote-text {
  margin: 0 0 30px;
  font-family: var(--body);
  /* Sized for a two-sentence quote — punchier quotes can go bigger. */
  font-size: clamp(19px, 2.1vw, 26px);
  line-height: 1.48;
  color: var(--bone-strong);
  text-wrap: balance;
}

.gv2-quote-attrib {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
}

.gv2-quote-face {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
}

.gv2-quote-who {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--bone-mute);
}

.gv2-quote-name { display: block; color: var(--bone-strong); }

.gv2-quote-mark { height: 120px; width: auto; margin-left: auto; }

@media (max-width: 560px) {
  .gv2-quote-attrib { flex-wrap: wrap; }
  .gv2-quote-mark { margin-left: 0; }
}

/* ============================================================
   18. THE WALK — how-it-works as a story
   Beats light as they enter; the receipt on the sticky rail
   assembles a row per beat. Reduced motion sees everything.
   ============================================================ */

.gv2-walk {
  display: grid;
  gap: 44px;
  margin-top: 30px;
}

@media (min-width: 940px) {
  .gv2-walk { grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: 60px; }
  .gv2-walk-sticky { position: sticky; top: 96px; align-self: start; }
}

.gv2-walk-beat {
  padding: 24px 0 18px;
  border-top: 1px solid var(--rule);
  opacity: 0.38;
  transition: opacity 320ms var(--ease);
}

.gv2-walk-beat.is-on { opacity: 1; }

.gv2-walk-num {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan);
  margin: 0 0 10px;
}

.gv2-walk-beat .gv2-body { max-width: 54ch; }

.gv2-walk-row { opacity: 0.22; transition: opacity 420ms var(--ease); }
.gv2-walk-row.is-on { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .gv2-walk-beat, .gv2-walk-row { opacity: 1; transition: none; }
}

/* ============================================================
   9. HOMEPAGE v3 — problem visual, credibility block, reveal band
   ============================================================ */

/* ---- The unwitnessed field -------------------------------------------------
   400 marks for 400 agent actions. A handful carry independent evidence; the
   rest are the status quo. The ratio is the argument, so it is drawn rather
   than asserted. Painted by JS so the lit positions scatter instead of
   striping — see glacis-waves.js's neighbours in assets/js. */
.gv2-unwit {
  margin: 40px 0 0;
  padding: 26px 26px 22px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--glass-bg);
}

.gv2-unwit-field {
  display: grid;
  grid-template-columns: repeat(40, 1fr);
  gap: 5px;
}

.gv2-unwit-cell {
  aspect-ratio: 1;
  border-radius: 1px;
  background: var(--bone-dim);
  opacity: 0.16;
}

.gv2-unwit-cell.is-lit {
  background: var(--cyan);
  opacity: 0.95;
  box-shadow: 0 0 9px var(--cyan-line);
}

.gv2-unwit-cap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}

.gv2-unwit-key {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--bone-mute);
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.5;
}

.gv2-unwit-swatch {
  flex-shrink: 0;
  width: 9px; height: 9px;
  border-radius: 1px;
  background: var(--bone-dim);
  opacity: 0.3;
}
.gv2-unwit-swatch.is-lit { background: var(--cyan); opacity: 1; box-shadow: 0 0 8px var(--cyan-line); }

@media (max-width: 760px) {
  .gv2-unwit { padding: 18px 18px 16px; }
  .gv2-unwit-field { grid-template-columns: repeat(25, 1fr); gap: 4px; }
}

/* ---- Credibility block: quote sized down, marks tucked underneath ---- */
.gv2-cred .gv2-quote-sm .gv2-quote-text {
  font-size: clamp(17px, 1.85vw, 22px);
  line-height: 1.52;
  max-width: 62ch;
}

.gv2-partners-inline { margin-top: 40px; }
.gv2-partners-inline .gv2-partner-row { border-top: 1px solid var(--rule); }
.gv2-partners-inline .gv2-label { margin-bottom: 4px; }

/* ---- The reveal band -------------------------------------------------------
   Joe asked for the walkthrough hand-off to land harder: full bleed, wide, more
   contrast, glossy. It is a darker plate than the sections either side of it in
   both registers, with a single specular sweep that runs once when the band
   scrolls in. The sweep is a transform on a pseudo-element, so it composites on
   the GPU and never touches layout. */
.gv2-reveal {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: clamp(60px, 9vh, 110px) 0;
  padding: clamp(58px, 8vw, 104px) 0;
  background:
    linear-gradient(180deg, #1b1526 0%, #14101b 52%, #191324 100%);
  border-top: 1px solid rgba(237, 227, 208, 0.10);
  border-bottom: 1px solid rgba(237, 227, 208, 0.10);
}

/* The plate is a material, not a themed surface — same island rule the hero
   uses, so light mode does not flip this type to ink on near-black. */
.gv2-reveal {
  --bone: #ede3d0;
  --bone-strong: #f5ecd9;
  --bone-mute: #b5a9a0;
  --bone-dim: #958996;
  --cyan: #82c4d0;
  --cyan-mid: #5fb4c4;
  --brass-lift: #cfbfa8;
  --violet-mid: #a78bfa;
  --rule: rgba(237, 227, 208, 0.16);
  --ink-on-accent: #14101b;
}

.gv2-reveal::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at 12% 8%, rgba(167, 139, 250, 0.16) 0%, transparent 56%),
    radial-gradient(ellipse at 88% 92%, rgba(130, 196, 208, 0.13) 0%, transparent 58%);
}

.gv2-reveal-gloss {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -35%;
  width: 32%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(237, 227, 208, 0.06) 34%,
    rgba(237, 227, 208, 0.17) 50%,
    rgba(237, 227, 208, 0.06) 66%,
    transparent 100%
  );
  transform: skewX(-14deg);
}

.gv2-reveal.is-in .gv2-reveal-gloss {
  animation: gv2-sweep 1450ms cubic-bezier(0.22, 0.6, 0.2, 1) 180ms both;
}

@keyframes gv2-sweep {
  from { left: -35%; opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  to   { left: 118%; opacity: 0; }
}

.gv2-reveal-inner { position: relative; }

.gv2-reveal-h2 {
  font-size: clamp(34px, 4.6vw, 62px);
  max-width: 17ch;
}

.gv2-reveal-beats {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2px;
  margin: 40px 0 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.gv2-reveal-beats li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 16px 18px 16px 0;
  border-bottom: 1px solid var(--rule);
  color: var(--bone);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.4;
}

.gv2-reveal-num {
  flex-shrink: 0;
  color: var(--cyan);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.14em;
}

@media (prefers-reduced-motion: reduce) {
  .gv2-reveal.is-in .gv2-reveal-gloss { animation: none; opacity: 0; }
}

/* ---- Interior page heads (how-it-works and siblings) ---- */
.gv2-page-head { padding-block: clamp(120px, 15vh, 180px) clamp(20px, 3vh, 40px); }

.gv2-h1-page {
  margin: 10px 0 18px;
  max-width: 18ch;
  color: var(--bone-strong);
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(40px, 5.6vw, 74px);
  line-height: 1.0;
  text-wrap: balance;
}

/* ---- Problem-visual caption, comparison table, contains/does-not ---- */
.gv2-unwit-cap { display: block; }

.gv2-unwit-note {
  margin: 0;
  max-width: 74ch;
  color: var(--bone-mute);
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.65;
}

.gv2-unwit-src {
  margin: 10px 0 0;
  color: var(--bone-dim);
  font-family: var(--sans);
  font-size: 12px;
  font-style: normal;
}

/* The single lit mark arrives late and deliberately — it is the only thing on
   the field that has evidence behind it, so it gets the whole eye. */
.gv2-unwit-cell.is-lit {
  animation: gv2-ignite 900ms cubic-bezier(0.2, 0, 0.2, 1) both;
}
@keyframes gv2-ignite {
  from { opacity: 0.16; transform: scale(1); }
  55%  { opacity: 1; transform: scale(2.4); }
  to   { opacity: 0.95; transform: scale(1.6); }
}
@media (prefers-reduced-motion: reduce) {
  .gv2-unwit-cell.is-lit { animation: none; }
}

.gv2-tablewrap { overflow-x: auto; margin-top: 34px; }

.gv2-compare {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.5;
}

.gv2-compare th,
.gv2-compare td {
  padding: 14px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--rule);
}

.gv2-compare thead th {
  color: var(--bone-mute);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-bottom-color: var(--rule-strong);
}

.gv2-compare tbody th {
  color: var(--bone);
  font-weight: 500;
  white-space: nowrap;
}

.gv2-compare td { color: var(--bone-mute); }

.gv2-compare .is-ours { color: var(--bone-strong); }
.gv2-compare thead .is-ours { color: var(--cyan); }
.gv2-compare tbody td.is-ours {
  background: var(--glass-bg);
  box-shadow: inset 1px 0 0 var(--cyan-line), inset -1px 0 0 var(--cyan-line);
}
.gv2-compare tbody tr:last-child td.is-ours { box-shadow: inset 1px 0 0 var(--cyan-line), inset -1px 0 0 var(--cyan-line), inset 0 -1px 0 var(--cyan-line); }
.gv2-compare thead .is-ours { box-shadow: inset 1px 0 0 var(--cyan-line), inset -1px 0 0 var(--cyan-line), inset 0 1px 0 var(--cyan-line); }

.gv2-contains {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2px;
  margin-top: 34px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  overflow: hidden;
}

.gv2-contains-col { padding: 24px 26px; background: var(--glass-bg); }
.gv2-contains-col + .gv2-contains-col { box-shadow: inset 1px 0 0 var(--rule); }

.gv2-contains-list { list-style: none; margin: 14px 0 0; padding: 0; }

.gv2-contains-list li {
  position: relative;
  padding: 7px 0 7px 26px;
  color: var(--bone);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
}

.gv2-contains-list li::before {
  position: absolute;
  left: 0;
  top: 7px;
  font-size: 13px;
  line-height: 1.5;
}
.gv2-contains-list.is-in li::before { content: "+"; color: var(--cyan); }
.gv2-contains-list.is-out li::before { content: "\2013"; color: var(--bone-dim); }
.gv2-contains-list.is-out li { color: var(--bone-mute); }

.gv2-strip-qual {
  display: block;
  margin-top: 3px;
  color: var(--bone-dim);
  font-size: 11.5px;
  letter-spacing: 0.01em;
}



/* ============================================================
   10. CRAFT PASS — measure, table, and the unwitnessed field
   ------------------------------------------------------------
   The page read as sloppy in the light register for three reasons: headlines
   ran the full shell width with nothing holding their measure, the comparison
   table had no column discipline and set its cells in Tiempos below 16px, and
   the unwitnessed field was a full-bleed swatch of dead grey. All three are
   craft problems, fixed here rather than by rewriting the sections.
   ============================================================ */

/* Headlines get a measure. Display type set to the full width of a 1200px
   shell breaks the eye's return sweep and reads as a banner, not a sentence. */
.gv2-h2 { max-width: 20ch; }
.gv2-section[style*="text-align:center"] .gv2-h2 { max-width: 24ch; }
.gv2-reveal-h2 { max-width: 17ch; }

/* ---- Stat strip: three even columns, qualifier demoted out of the rhythm ---- */
.gv2-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px 30px;
  align-items: baseline;
  justify-items: center;
  text-align: center;
  padding: 20px 26px;
}
.gv2-strip-item { font-size: 13.5px; line-height: 1.45; }

.gv2-strip-foot {
  margin: 10px 0 0;
  text-align: center;
  color: var(--bone-dim);
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: 0.01em;
}

@media (max-width: 780px) {
  .gv2-strip { grid-template-columns: 1fr; gap: 12px; }
}

/* ---- The comparison table --------------------------------------------------
   Fixed layout so the four columns cannot fight over width; row labels left-set
   in a narrow fixed column instead of centred and wrapping; every cell in Söhne
   because table cells are small text. The "ours" column is tinted and ruled in
   BOTH registers — previously the tint was invisible on parchment. */
.gv2-tablewrap {
  overflow-x: auto;
  margin-top: 34px;
  border-top: 1px solid var(--rule-strong);
}

.gv2-compare {
  width: 100%;
  min-width: 720px;
  table-layout: fixed;
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.45;
}

.gv2-compare col,
.gv2-compare th,
.gv2-compare td { text-align: left; vertical-align: top; }

.gv2-compare thead th:first-child,
.gv2-compare tbody th { width: 17%; }
.gv2-compare thead th:not(:first-child),
.gv2-compare tbody td { width: 27.6%; }

.gv2-compare th,
.gv2-compare td {
  padding: 15px 18px;
  border-bottom: 1px solid var(--rule);
}

.gv2-compare thead th {
  padding-top: 16px;
  padding-bottom: 12px;
  color: var(--bone-mute);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border-bottom-color: var(--rule-strong);
}

.gv2-compare tbody th {
  color: var(--bone-mute);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.02em;
  padding-left: 0;
}

.gv2-compare tbody td { color: var(--bone-mute); }
.gv2-compare tbody tr:last-child th,
.gv2-compare tbody tr:last-child td { border-bottom: 0; }

/* The column that is ours: tinted ground, ruled edges, brighter type. */
.gv2-compare thead th.is-ours { color: var(--cyan); }
.gv2-compare .is-ours {
  background: var(--aura-cyan);
  box-shadow: inset 1px 0 0 var(--cyan-line), inset -1px 0 0 var(--cyan-line);
}
.gv2-compare tbody td.is-ours { color: var(--bone-strong); }
.gv2-compare thead th.is-ours { box-shadow: inset 1px 0 0 var(--cyan-line), inset -1px 0 0 var(--cyan-line), inset 0 1px 0 var(--cyan-line); }
.gv2-compare tbody tr:last-child td.is-ours { box-shadow: inset 1px 0 0 var(--cyan-line), inset -1px 0 0 var(--cyan-line), inset 0 -1px 0 var(--cyan-line); }

/* Footnotes under a table or a band share one measure and never run full width. */
.gv2-table-foot { max-width: 74ch; margin-top: 18px; }

/* ---- The unwitnessed field -------------------------------------------------
   Was 40 columns of full-bleed grey reading as a texture swatch. Contained to a
   readable block, denser cells, so the ratio lands as a picture instead of a
   wall. */
.gv2-unwit {
  max-width: 720px;
  margin: 36px 0 0;
  padding: 22px 24px 18px;
}

.gv2-unwit-field {
  grid-template-columns: repeat(25, 1fr);
  gap: 4px;
}

.gv2-unwit-cell { border-radius: 0.5px; }

.gv2-unwit-cap {
  margin-top: 16px;
  padding-top: 14px;
}

.gv2-unwit-note {
  font-size: 13px;
  max-width: none;
  color: var(--bone-mute);
}

@media (max-width: 700px) {
  .gv2-unwit-field { grid-template-columns: repeat(20, 1fr); gap: 3px; }
}

/* ---- Contains / does-not columns: equal ground, no seam artefact ---- */
.gv2-contains-col + .gv2-contains-col { box-shadow: inset 1px 0 0 var(--rule); }
.gv2-contains-list li { font-size: 13.5px; }

/* ============================================================
   11. THE FIGURE BAR — the seam under the hero
   ------------------------------------------------------------
   Was three unweighted sentences floating in a pale glass wash, which gave the
   eye nothing to catch and read as filler directly under the strongest type on
   the page. Rebuilt as figures: three numerals carrying the whole thesis
   (two signatures, zero network calls, a million records), each with its claim
   set beneath it. Numerals do the work a glass rectangle could not.
   ============================================================ */

.gv2-figures {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
}

.gv2-figure {
  padding: 26px 30px 24px;
  position: relative;
}

/* Hairlines between, never on the outer edges — the band's own rules close it. */
.gv2-figure + .gv2-figure::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22px;
  bottom: 22px;
  width: 1px;
  background: var(--rule);
}

.gv2-figure-num {
  display: block;
  margin: 0 0 10px;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(38px, 4.4vw, 56px);
  line-height: 0.92;
  letter-spacing: -0.03em;
  color: var(--bone-strong);
  font-variant-numeric: lining-nums tabular-nums;
}

.gv2-figure-label {
  margin: 0;
  max-width: 30ch;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--bone-mute);
}

.gv2-figure-qual {
  display: block;
  margin-top: 7px;
  color: var(--bone-dim);
  font-size: 11.5px;
  line-height: 1.45;
}

@media (max-width: 860px) {
  .gv2-figures { grid-template-columns: 1fr; }
  .gv2-figure { padding: 20px 0; }
  .gv2-figure + .gv2-figure::before {
    left: 0; right: 0; top: 0; bottom: auto;
    width: auto; height: 1px;
  }
  .gv2-figure-num { font-size: 38px; }
  .gv2-figure-label { max-width: none; }
}

/* ============================================================
   12. ONE SPINE
   ------------------------------------------------------------
   The page was landing on four different left edges at 1440px: the nav brand at
   178, the hero at 48, body content at 130, and the figure numerals at 160.
   .gv2-shell is the correct spine — it subtracts the gutter from the width. The
   nav and the hero instead centred a full-width box and THEN added gutter
   padding, double-counting it. Everything below resolves to a single 130.
   ============================================================ */

.glacis-nav-inner,
.home-shell {
  width: min(100% - (var(--gutter) * 2), var(--shell));
  max-width: none;
  margin-inline: auto;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}

/* A ruled figure bar reads as a table: the outer cells sit flush to the spine,
   and the padding lives only between them. */
.gv2-figure:first-child { padding-left: 0; }
.gv2-figure:last-child { padding-right: 0; }

@media (max-width: 860px) {
  .gv2-figure:first-child,
  .gv2-figure:last-child { padding-left: 0; padding-right: 0; }
}

/* ---- The unwitnessed field, second pass -------------------------------------
   At 25 columns it came out 720x459 — a 1.57 slab that read as a texture swatch
   and swallowed the one lit mark. A wide, shallow band (ratio ~4) reads as a
   population rather than a fill, and gives the single lit mark somewhere to be
   conspicuous. */
.gv2-unwit { max-width: 780px; }

.gv2-unwit-field {
  grid-template-columns: repeat(40, 1fr);
  gap: 4px;
}

.gv2-unwit-cell { opacity: 0.2; }

/* The lit mark keeps a standing halo — it is the only thing in the picture with
   evidence behind it, so it does not fade back into the field after igniting. */
.gv2-unwit-cell.is-lit {
  opacity: 1;
  box-shadow: 0 0 0 3px var(--aura-cyan), 0 0 14px var(--cyan-line);
  z-index: 1;
}

@media (max-width: 700px) {
  .gv2-unwit-field { grid-template-columns: repeat(25, 1fr); gap: 3px; }
}

/* ============================================================
   13. THE HERO ARRIVES
   ------------------------------------------------------------
   The hero was static: a looping film with type parked on top of it. This gives
   it an entrance — the film settles out of a slow push-in while the type climbs
   in sequence and the brand stop ignites last. Everything is transform/opacity
   so it composites on the GPU and never reflows, and the whole thing is one
   ~1.6s event on load, not an ambient animation that keeps pulling focus.
   ============================================================ */

#home-film {
  transform: scale(1.08);
  transform-origin: 58% 42%;
  will-change: transform;
}
.home-hero.is-ready #home-film {
  transition: transform 9000ms cubic-bezier(0.16, 0.62, 0.24, 1);
  transform: scale(1);
}

/* The scrim lifts slightly as the film settles, so the type gains contrast
   exactly as it arrives rather than sitting on a fixed wash. */
.home-hero-scrim { opacity: 0.82; transition: opacity 1600ms ease 200ms; }
.home-hero.is-ready .home-hero-scrim { opacity: 1; }

.home-eyebrow,
.home-hero h1,
.home-hero-sub,
.home-actions {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
}

.home-hero.is-ready .home-eyebrow,
.home-hero.is-ready .home-hero h1,
.home-hero.is-ready h1,
.home-hero.is-ready .home-hero-sub,
.home-hero.is-ready .home-actions {
  opacity: 1;
  transform: none;
  transition:
    opacity 760ms cubic-bezier(0.2, 0, 0.15, 1),
    transform 860ms cubic-bezier(0.16, 0.7, 0.2, 1);
}

.home-hero.is-ready .home-eyebrow   { transition-delay: 60ms; }
.home-hero.is-ready h1              { transition-delay: 170ms; }
.home-hero.is-ready .home-hero-sub  { transition-delay: 360ms; }
.home-hero.is-ready .home-actions   { transition-delay: 480ms; }

/* The eyebrow's dot draws itself on, then holds its glow. */
.home-eyebrow::before { transform: scale(0); }
.home-hero.is-ready .home-eyebrow::before {
  transform: scale(1);
  transition: transform 620ms cubic-bezier(0.34, 1.56, 0.5, 1) 260ms;
}

/* The brand stop is the last thing to happen — it lands after the sentence has
   finished arriving, which is what makes it read as a full stop. */
.home-full-stop {
  display: inline-block;
  opacity: 0;
  transform: scale(0.4);
}
.home-hero.is-ready .home-full-stop {
  opacity: 1;
  transform: scale(1);
  transition:
    opacity 420ms ease 760ms,
    transform 640ms cubic-bezier(0.34, 1.7, 0.45, 1) 760ms;
}

@media (prefers-reduced-motion: reduce) {
  #home-film,
  .home-hero.is-ready #home-film { transform: none; transition: none; }
  .home-hero-scrim { opacity: 1; }
  .home-eyebrow, .home-hero h1, .home-hero-sub, .home-actions,
  .home-full-stop, .home-eyebrow::before {
    opacity: 1; transform: none; transition: none;
  }
}

/* ============================================================
   14. THE UNWITNESSED FIELD, ENGRAVED
   ------------------------------------------------------------
   The DOM-grid version read as a part-drawn placeholder: 400 identical grey
   squares stamped into a glass box, i.e. a skeleton loader. Redrawn as a
   plate in the site's own diagram language — ten ledger rows of fine ticks
   with seeded jitter, edges dissolving into the ground instead of hitting a
   border, and the single witnessed action annotated the way an engineering
   figure annotates: ignition, ring, hairline leader, small-caps label.
   The earlier .gv2-unwit-field / .gv2-unwit-cell rules are superseded and
   match nothing.
   ============================================================ */

.gv2-unwit {
  max-width: 900px;
  margin: 42px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.gv2-unwit-plate { position: relative; color: var(--bone-dim); }
.gv2-unwit-plate svg { display: block; width: 100%; height: auto; }

/* The field dissolves at its edges — a population extending past the frame,
   not a bounded swatch. */
.unwit-fieldsvg {
  -webkit-mask-image: radial-gradient(130% 120% at 50% 44%, #000 56%, transparent 99%);
          mask-image: radial-gradient(130% 120% at 50% 44%, #000 56%, transparent 99%);
}

.unwit-notesvg { position: absolute; inset: 0; pointer-events: none; }

.unwit-tick { fill: currentColor; opacity: 0; }
.gv2-unwit.is-in .unwit-tick { opacity: var(--o); transition: opacity 480ms ease var(--d); }

.unwit-tick.unwit-lit {
  fill: var(--cyan);
  transform-box: fill-box;
  transform-origin: center;
}
.gv2-unwit.is-in .unwit-lit {
  opacity: 1;
  transition: opacity 260ms ease 940ms;
  animation: unwit-ignite 820ms cubic-bezier(0.2, 0.9, 0.25, 1.2) 940ms both;
  filter: drop-shadow(0 0 7px var(--cyan-line));
}
@keyframes unwit-ignite {
  from { transform: scale(1); }
  55%  { transform: scale(2.15); }
  to   { transform: scale(1.6); }
}

.unwit-ring {
  fill: none;
  stroke: var(--cyan);
  stroke-width: 1.4;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.gv2-unwit.is-in .unwit-ring { animation: unwit-ring 950ms ease-out 1040ms both; }
@keyframes unwit-ring {
  from { opacity: 0.85; transform: scale(0.4); }
  to   { opacity: 0;    transform: scale(3.6); }
}

.unwit-leader {
  fill: none;
  stroke: var(--cyan-mid);
  stroke-width: 1;
  opacity: 0.65;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.gv2-unwit.is-in .unwit-leader { stroke-dashoffset: 0; transition: stroke-dashoffset 520ms ease 1320ms; }

.gv2-unwit-tag {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 3px;
  opacity: 0;
  transform: translate3d(0, 5px, 0);
}
.gv2-unwit.is-in .gv2-unwit-tag {
  opacity: 1;
  transform: none;
  transition: opacity 420ms ease 1580ms, transform 480ms cubic-bezier(0.2, 0, 0.15, 1) 1580ms;
}
.gv2-unwit-tag-k {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cyan-mid);
  white-space: nowrap;
}
.gv2-unwit-tag-s {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--bone-mute);
  white-space: nowrap;
}

/* Caption: one ruled line under the plate, note left, provenance right. */
.gv2-unwit-cap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 28px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
}
.gv2-unwit-note {
  margin: 0;
  max-width: 60ch;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.55;
  color: var(--bone-mute);
}
.gv2-unwit-src {
  margin: 0;
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--bone-dim);
}

/* Small screens: the plate scales to texture; the in-figure annotation would
   shrink past legibility, so the caption carries its meaning instead. */
@media (max-width: 700px) {
  .unwit-notesvg, .gv2-unwit-tag { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .unwit-tick, .gv2-unwit.is-in .unwit-tick { opacity: var(--o); transition: none; }
  .gv2-unwit.is-in .unwit-lit { animation: none; transform: scale(1.6); }
  .unwit-ring, .gv2-unwit.is-in .unwit-ring { animation: none; opacity: 0; }
  .unwit-leader, .gv2-unwit.is-in .unwit-leader { stroke-dashoffset: 0; transition: none; }
  .gv2-unwit-tag, .gv2-unwit.is-in .gv2-unwit-tag { opacity: 1; transform: none; transition: none; }
}

/* Annotation refinements after zoom review: the leader reads stronger, and the
   lit mark keeps a standing halo once the entrance ring has faded. */
.unwit-leader { opacity: 0.8; }
.unwit-halo {
  fill: var(--cyan);
  opacity: 0;
}
.gv2-unwit.is-in .unwit-halo {
  opacity: 0.09;
  transition: opacity 700ms ease 1200ms;
}

/* ============================================================
   19. PUNCH LIST — 2026-08-11
   ------------------------------------------------------------
   Append-only overrides. Each rule restates a single declaration that the
   craft review called wrong; the blocks above are left as written so the
   history of the page stays readable.
   ============================================================ */

/* 1. The brand stop is brass, and upright. It was violet Domaine italic — the
   banned decorative-italic-accent pattern, surviving in the most prominent
   sentence on the site. The h1's own Söhne now carries it; the entrance
   animation in §13 is untouched (it only moves opacity and scale).
   Overridden here rather than in glacis-rebuild.css because that sheet also
   dresses the production homepage, which is outside this rebuild. */
.home-full-stop {
  color: var(--brass-lift);
  font-family: inherit;
  font-style: normal;
}

/* 7. Six beats, locked to 3x2. At the 1180px shell, auto-fit resolved to four
   columns and the six beats ragged 4+2; a fixed three mirrors the six-beat
   walk and reads as composed. */
.gv2-reveal-beats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 860px) {
  .gv2-reveal-beats { grid-template-columns: 1fr; }
}

/* 10. The partner mark at 120px outweighed the 54px speaker portrait and the
   quote itself. At 64px it attributes rather than advertises. */
.gv2-quote-mark { height: 64px; }

/* 11. The featured flag matches its tier's amber top edge. The border-colour
   declarations it replaces are dead — the chip carries no left or bottom
   border — and are left in place above only because this sheet is append-only. */
.gv2-plan-featured .gv2-plan-flag {
  background: var(--amber);
}

/* ============================================================
   15. FOUNDER REVIEW PASS — spine, seams, and dead air
   ------------------------------------------------------------
   From the 11-screenshot review: the quote floated off the spine on auto
   margins; the witness band trailed ~400px of empty wave-field; the strata
   band's register crossing smeared over 90px instead of reading as a
   horizon; the nVoq quote-mark ran full colour above a monochrome row.
   ============================================================ */

/* The quote hangs on the spine like every other section — it is testimony,
   not an interstitial. */
.gv2-quote { margin: 0; }
.gv2-cred { padding-top: clamp(56px, 7vw, 96px); }

/* The attribution mark sits above a monochrome partner row; it matches it.
   The face stays in colour — people are not logos. */
.gv2-quote-mark { filter: grayscale(1); opacity: 0.78; }

/* The wave field under the witness columns was trailing dead height. */
.gv2-witness-band { padding-bottom: clamp(64px, 7vw, 100px); }

/* Team numbers -> investor row: one breath, not a chasm. */
.gv2-backers { padding-top: clamp(36px, 4vw, 56px); }

/* The strata band's edges are a material change, not a fog: tighter feather,
   in both registers. */
.gv2-strata::before,
.gv2-strata::after { height: 44px; opacity: 0.35; }

/* ============================================================
   16. THE REVEAL BAND CARRIES ITS OWN DRAWING
   ------------------------------------------------------------
   The band's right half was empty air. It now holds the append-only chain —
   three receipts, each sealing the one before — drawn in the plate language
   and staggered in when the band reveals. The band is a pinned-dark island,
   so the drawing uses the pinned tokens and holds in both registers.
   ============================================================ */

@media (min-width: 1000px) {
  .gv2-reveal-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(340px, 30vw, 420px);
    column-gap: clamp(48px, 6vw, 96px);
    align-items: center;
  }
}

.gv2-reveal-chain { margin: 34px 0 0; }
@media (min-width: 1000px) { .gv2-reveal-chain { margin: 0; } }
.gv2-reveal-chain svg { display: block; width: 100%; height: auto; max-width: 440px; }

.gv2-reveal-chain text {
  font-family: var(--sans);
  font-weight: 500;
}

.gvc-lab, .gvc-num, .gvc-sig {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.gvc-lab { fill: var(--bone-mute); }
.gvc-num { fill: var(--bone); }
.gvc-num-live { fill: var(--bone-strong); }
.gvc-prev { font-size: 10px; letter-spacing: 0.08em; fill: var(--bone-dim); }
.gvc-sig { fill: var(--cyan); }
.gvc-note { font-size: 11.5px; letter-spacing: 0.02em; fill: var(--bone-mute); }

.gvc-box { fill: rgba(237, 227, 208, 0.04); stroke: var(--rule); }
.gvc-box-live { stroke: var(--cyan-line); }
.gvc-rule { stroke: var(--rule); }
.gvc-skel { stroke: var(--bone-dim); stroke-width: 2; stroke-linecap: round; opacity: 0.4; }

.gvc-chit-1 { opacity: 0.55; }
.gvc-chit-2 { opacity: 0.8; }

.gvc-linkline, .gvc-leader { stroke: var(--cyan-mid); stroke-width: 1; fill: none; opacity: 0.7; }
.gvc-linkdot { fill: var(--plane-0, #14101b); stroke: var(--cyan-mid); stroke-width: 1; }
.gvc-seal-ring { fill: var(--plane-0, #14101b); stroke: var(--brass-lift); stroke-width: 1.4; }
.gvc-seal-check { fill: none; stroke: var(--brass-lift); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Entrance: chits arrive oldest-first, links draw between them, notes land
   last. One shot, keyed on the band's own reveal. */
.gvc-chit, .gvc-note, .gvc-lab { opacity: 0; transform: translate3d(0, 8px, 0); }
.gvc-chit-1 { opacity: 0; }
.gvc-link path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.gvc-link circle { opacity: 0; }

.gv2-reveal.is-in .gvc-lab { opacity: 1; transform: none; transition: opacity 400ms ease 150ms, transform 400ms ease 150ms; }
.gv2-reveal.is-in .gvc-chit-1 { opacity: 0.55; transform: none; transition: opacity 480ms ease 250ms, transform 480ms ease 250ms; }
.gv2-reveal.is-in .gvc-chit-2 { opacity: 0.8; transform: none; transition: opacity 480ms ease 450ms, transform 480ms ease 450ms; }
.gv2-reveal.is-in .gvc-chit-3 { opacity: 1; transform: none; transition: opacity 480ms ease 650ms, transform 480ms ease 650ms; }
.gv2-reveal.is-in .gvc-link-1 path { stroke-dashoffset: 0; transition: stroke-dashoffset 360ms ease 620ms; }
.gv2-reveal.is-in .gvc-link-2 path { stroke-dashoffset: 0; transition: stroke-dashoffset 360ms ease 820ms; }
.gv2-reveal.is-in .gvc-link circle { opacity: 1; transition: opacity 260ms ease 900ms; }
.gv2-reveal.is-in .gvc-note { opacity: 1; transform: none; transition: opacity 420ms ease 1050ms, transform 420ms ease 1050ms; }

@media (prefers-reduced-motion: reduce) {
  .gvc-chit, .gvc-note, .gvc-lab,
  .gv2-reveal.is-in .gvc-chit, .gv2-reveal.is-in .gvc-note, .gv2-reveal.is-in .gvc-lab {
    opacity: 1; transform: none; transition: none;
  }
  .gvc-chit-1, .gv2-reveal.is-in .gvc-chit-1 { opacity: 0.55; }
  .gvc-chit-2, .gv2-reveal.is-in .gvc-chit-2 { opacity: 0.8; }
  .gvc-link path, .gv2-reveal.is-in .gvc-link path { stroke-dashoffset: 0; transition: none; }
  .gvc-link circle, .gv2-reveal.is-in .gvc-link circle { opacity: 1; transition: none; }
}

/* ---- Interior-page components introduced by the /about port ---- */
.gv2-grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.gv2-founder-face {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 18px;
  border: 1px solid var(--glass-edge-lit);
}

/* ============================================================
   17. GV2 BEATS THE CAMPAIGN CASCADE
   ------------------------------------------------------------
   Interior pages ported to gv2 may still load glacis-aubergine.css, whose
   element selectors (body.aubergine.theme-light h1 { ... } at 0,2,2) outgun
   bare gv2 class rules (0,1,0) and wash the ported type grey. These
   selectors carry body.aubergine.gv2 (0,3,1) so the token system wins on any
   page that has opted into it — without touching the legacy pages.
   ============================================================ */

body.aubergine.gv2 .gv2-h1-page,
body.aubergine.gv2 .gv2-h2,
body.aubergine.gv2 .gv2-h3 { color: var(--bone-strong); }
/* The campaign sheet paints body.aubergine.theme-light p with !important, so
   the p-based gv2 roles need the same force. Scoped to opted-in pages only. */
body.aubergine.gv2 .gv2-eyebrow { color: var(--brass-lift) !important; font-family: var(--sans); }
body.aubergine.gv2 .gv2-lede { color: var(--bone-mute) !important; }
body.aubergine.gv2 .gv2-body { color: var(--bone) !important; }
body.aubergine.gv2 .gv2-label { color: var(--bone-dim) !important; font-family: var(--sans); }
body.aubergine.gv2 .gv2-note { color: var(--bone-mute) !important; }
body.aubergine.gv2 .gv2-witness-proofs .gv2-label { color: var(--brass-lift) !important; }

body.aubergine.gv2 .glacis-nav-inner,
body.aubergine.gv2 .home-shell {
  width: min(100% - (var(--gutter) * 2), var(--shell));
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* The campaign sheet also re-declares the light --brass-lift at higher
   specificity (its own 3.94:1 value). Re-pin the AA token on opted-in pages. */
html[data-theme="light"] body.aubergine.gv2,
body.aubergine.gv2.theme-light { --brass-lift: #7a6140; }

/* Founder verdict on the reveal band's specular wipe: gone. The band enters on
   its rise and the chain drawing's stagger — that is the whole show. The
   element stays in the markup but paints nothing. */
.gv2-reveal-gloss { display: none; }
.gv2-reveal.is-in .gv2-reveal-gloss { animation: none; }

/* ============================================================
   18. FOUNDER PASS — nav CTA, figure weight, cinematic ground
   ============================================================ */

/* The header CTA matches the hero primary instead of reading as a dark chip.
   The light register's own rule (§1b) is more specific and keeps its teal. */
html body.aubergine .glacis-nav-cta {
  background: var(--cyan);
  border: 1px solid transparent;
  color: var(--ink-on-accent) !important;
  border-radius: 3px;
  transition: background 180ms ease, transform 180ms ease;
}
html body.aubergine .glacis-nav-cta:hover {
  background: var(--cyan-mid);
  transform: translateY(-1px);
}

/* The three figures carry the argument — they get display weight. */
.gv2-figure-num {
  font-size: clamp(56px, 6.2vw, 84px);
  letter-spacing: -0.035em;
  line-height: 0.9;
}
.gv2-figure-label { font-size: 13.5px; max-width: 32ch; }

/* ---- Cinematic ground -------------------------------------------------
   The flat bone field read as dull. Two moves, both register-aware:
   1. Living film grain over the whole page — feTurbulence tile, jittered on
      a steps() loop like print grain. Multiply on parchment; the inverse,
      screen, in the dark register.
   2. Deeper ambient auras so the ground reads lit, not filled. */
html[data-theme="light"] body.gv2,
body.gv2.theme-light {
  --aura-cyan: rgba(47, 127, 144, 0.17);
  --aura-violet: rgba(115, 80, 154, 0.13);
  --aura-brass: rgba(168, 139, 101, 0.19);
}
body.gv2 {
  --aura-cyan: rgba(130, 196, 208, 0.15);
  --aura-violet: rgba(167, 139, 250, 0.14);
  --aura-brass: rgba(182, 161, 136, 0.11);
}

body.gv2::after {
  content: "";
  position: fixed;
  inset: -12%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 40;
  opacity: 0.05;
  mix-blend-mode: screen;
  animation: gv2-grain 1.1s steps(6) infinite;
}

html[data-theme="light"] body.gv2::after,
body.gv2.theme-light::after {
  mix-blend-mode: multiply;
  opacity: 0.038;
}

@keyframes gv2-grain {
  0%   { transform: translate3d(0, 0, 0); }
  20%  { transform: translate3d(-1.4%, 0.9%, 0); }
  40%  { transform: translate3d(0.8%, -1.2%, 0); }
  60%  { transform: translate3d(-0.6%, -0.7%, 0); }
  80%  { transform: translate3d(1.2%, 0.6%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* Once the entrance settles, anime.js owns tick opacity; the CSS transition
   would fight every frame of the wave. */
.gv2-unwit.is-anim .unwit-tick { transition: none; }

@media (prefers-reduced-motion: reduce) {
  body.gv2::after { animation: none; }
}

/* ============================================================
   19. FOUNDER PASS II — investor row, strata legibility, footer slogan
   ============================================================ */

/* One tonal family for every investor mark — no colour outliers — and the
   band sits tighter under the credibility block it now follows. */
.gv2-backers { padding-top: clamp(24px, 3vw, 40px); padding-bottom: clamp(48px, 6vw, 76px); }
.gv2-backers .gv2-partner-row img,
.gv2-backers .gv2-partner-row img.gv2-mark-badge {
  filter: grayscale(1) brightness(1.45) contrast(0.95) !important;
  opacity: 0.7 !important;
}
html[data-theme="light"] .gv2 .gv2-backers .gv2-partner-row img,
body.theme-light .gv2 .gv2-backers .gv2-partner-row img,
html[data-theme="light"] .gv2 .gv2-backers .gv2-partner-row img.gv2-mark-badge,
body.theme-light .gv2 .gv2-backers .gv2-partner-row img.gv2-mark-badge {
  filter: grayscale(1) brightness(0.52) contrast(1.06) !important;
  opacity: 0.74 !important;
}

/* §17's page-wide ink override outgunned the strata island's own light-mode
   type pins — black headline on the dark band. The island wins again. */
body.aubergine.gv2 .gv2-strata .gv2-h2 { color: #f5ecd9; }
body.aubergine.gv2.theme-light .gv2-strata .gv2-h2,
html[data-theme="light"] body.aubergine.gv2 .gv2-strata .gv2-h2 { color: #f5ecd9; }
body.aubergine.gv2 .gv2-strata .gv2-lede { color: #b5a9a0 !important; }
body.aubergine.gv2 .gv2-strata .gv2-eyebrow { color: #cfbfa8 !important; }

/* In the dark register the band is parchment — ink type there, both engines. */
body.aubergine.gv2:not(.theme-light) .gv2-strata .gv2-h2 { color: #1f1814; }
body.aubergine.gv2:not(.theme-light) .gv2-strata .gv2-lede { color: #4a3f35 !important; }
body.aubergine.gv2:not(.theme-light) .gv2-strata .gv2-eyebrow { color: #8e6d3e !important; }

/* Footer slogan: turquoise, slightly translucent, still Söhne, still hanging
   on the lockup's left edge. */
html body.aubergine .glacis-footer-statement {
  color: var(--cyan);
  opacity: 0.85;
}

/* ============================================================
   20. FINAL EDITORIAL CUT — hard hero seam, one footer signature
   ------------------------------------------------------------
   The film ends as film. No grey dissolve into the page ground. The footer
   lockup reads as a closing signature, not a second masthead.
   ============================================================ */

.home-hero {
  border-bottom: 7px solid var(--cyan-mid);
}

.home-hero-scrim,
.home-hero.is-ready .home-hero-scrim {
  background: rgba(20, 16, 27, 0.24);
  opacity: 1;
  transition: none;
}

.glacis-footer-brand {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.4vw, 34px);
}

html body.aubergine .glacis-footer-statement,
.glacis-footer-statement {
  margin: 0;
  padding: 4px 0 4px clamp(20px, 2.2vw, 30px);
  max-width: 15ch;
  border-left: 3px solid var(--cyan-mid);
  color: var(--bone) !important;
  font-size: 18px;
  line-height: 1.18;
  opacity: 1;
}

@media (max-width: 720px) {
  .glacis-footer-brand {
    display: block;
  }

  .glacis-footer-lockup {
    gap: 9px;
  }

  .glacis-footer-lockup img.glacis-footer-mark {
    width: 44px;
    height: 44px;
  }

  .glacis-footer-lockup img.glacis-footer-word {
    width: 106px;
  }

  html body.aubergine .glacis-footer-statement,
  .glacis-footer-statement {
    margin: 18px 0 0;
    padding: 0;
    max-width: 28ch;
    border-left: 0;
    font-size: 16px;
    line-height: 1.3;
  }
}