/* Ported from OberBuilt-Website design/mockups-2026-09/assets/v2.css (frozen reference). */
/* ============================================================
   v2.css — the main direction (2026-09-18).
   Built from research/high-end-design/: surface ladder by white
   wash (linear.app), .5px hairline + dark ring, layered window
   shadows (Cursor/Attio), grain + restrained orbs, cyan only on
   the live element, yellow only on flagged evidence.
   Needs tokens.css for fonts and ramps. No framework.
   ============================================================ */
:root {
  --v-bg: #0B1620;
  --v-bg-deep: #07101A;
  --v-wash-1: rgba(255,255,255,.035);
  --v-wash-2: rgba(255,255,255,.06);
  --v-wash-3: rgba(255,255,255,.10);
  --v-line: rgba(255,255,255,.08);
  --v-line-2: rgba(255,255,255,.13);
  --v-ring: rgba(0,0,0,.28);
  --v-fg: #F3F5F7;
  --v-fg-2: #C2CEDA;
  --v-fg-3: #93A5B7;
  --v-cyan: #00B8D4;
  --v-cyan-2: #62E2EF;
  --v-flag: #F7D547;
  --v-ok: #3FCB8B;
  --v-radius: 12px;
  --v-max: 1240px;
  --v-g: clamp(16px, 4vw, 32px);
  --v-ease: cubic-bezier(.2,0,0,1);
  --v-card: 0 0 0 .5px var(--v-line) inset, 0 0 0 1px var(--v-ring), 0 18px 40px -24px rgba(0,0,0,.7);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.v2 { margin: 0; background: var(--v-bg); color: var(--v-fg-2); font-family: var(--font-sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
.v2 h1, .v2 h2, .v2 h3, .v2 p, .v2 figure, .v2 dl, .v2 dd, .v2 ol, .v2 ul { margin: 0; }
:where(.v2) a { color: var(--v-cyan-2); }
.v2 img { display: block; max-width: 100%; height: auto; }
.v-wrap { width: 100%; max-width: var(--v-max); margin: 0 auto; padding: 0 var(--v-g); }
.v-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- atmosphere: 3 orbs max, grain under content ---------- */
.v-atmo { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; contain: strict; }
.v-atmo i { position: absolute; border-radius: 50%; will-change: transform; }
.v-atmo i:nth-child(1) { width: 60vmax; height: 60vmax; left: -16vmax; top: -22vmax; background: radial-gradient(circle, rgba(0,184,212,.13), rgba(0,184,212,.03) 45%, transparent 68%); animation: v-o1 72s ease-in-out infinite alternate; }
.v-atmo i:nth-child(2) { width: 52vmax; height: 52vmax; right: -20vmax; top: 30%; background: radial-gradient(circle, rgba(14,95,179,.20), rgba(14,95,179,.05) 45%, transparent 70%); animation: v-o2 88s ease-in-out infinite alternate; }
.v-atmo i:nth-child(3) { width: 40vmax; height: 40vmax; left: 25%; bottom: -18vmax; background: radial-gradient(circle, rgba(0,143,165,.10), transparent 66%); animation: v-o3 61s ease-in-out infinite alternate; }
.v-atmo b { position: absolute; inset: 0; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); }
@keyframes v-o1 { to { transform: translate3d(12vw, 10vh, 0) scale(1.2); } }
@keyframes v-o2 { to { transform: translate3d(-10vw, -12vh, 0) scale(.88); } }
@keyframes v-o3 { to { transform: translate3d(8vw, -8vh, 0) scale(1.15); } }
body.v2 > header, body.v2 > main, body.v2 > footer, body.v2 > .v-bar { position: relative; z-index: 1; }
body.v2 > header { z-index: 50; }

/* ---------- mock bar ---------- */
.v-bar { background: #0E1A26; border-bottom: .5px solid var(--v-line); font-family: var(--font-mono); font-size: 12px; color: var(--v-fg-3); }
.v-bar .v-wrap { display: flex; flex-wrap: wrap; gap: 6px 18px; padding-top: 8px; padding-bottom: 8px; }
.v-bar b { color: var(--v-flag); font-weight: 400; }
.v-bar a { color: var(--v-cyan-2); text-decoration: none; display: inline-block; padding: 4px 0; }

/* ---------- header: one blurred element on the page ---------- */
.v-head { position: sticky; top: 0; background: rgba(11,22,32,.78); -webkit-backdrop-filter: saturate(1.5) blur(16px); backdrop-filter: saturate(1.5) blur(16px); border-bottom: .5px solid var(--v-line); }
.v-head .v-wrap { display: flex; align-items: center; gap: 24px; min-height: 64px; }
.v-logo { font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -.01em; color: var(--v-fg); text-decoration: none; }
.v-logo span { color: var(--v-cyan-2); }
.v-nav { display: flex; gap: 4px; margin-left: auto; }
.v-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 8px; color: var(--v-fg-2); text-decoration: none; font-size: 14px; }
.v-nav a:hover { color: var(--v-fg); background: var(--v-wash-1); }
.v-nav a:focus-visible, .v-btn:focus-visible, .v-card a:focus-visible, .v-foot a:focus-visible { outline: 2px solid var(--v-cyan-2); outline-offset: 2px; }
.v-head__cta { margin-left: 8px; }

/* ---------- buttons ---------- */
.v-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 10px; font: 600 15px/1 var(--font-sans); text-decoration: none; border: 0; cursor: pointer; transition: background .16s var(--v-ease), box-shadow .16s var(--v-ease), color .16s var(--v-ease); }
.v-btn--go { background: var(--v-cyan); color: #06131C; box-shadow: 0 0 0 1px rgba(255,255,255,.18) inset, 0 8px 24px -10px rgba(0,184,212,.7); }
.v-btn--go:hover { background: #2DD4E8; color: #06131C; }
.v-btn--line { background: var(--v-wash-1); color: var(--v-fg); box-shadow: 0 0 0 .5px var(--v-line-2) inset, 0 0 0 1px var(--v-ring); }
.v-btn--line:hover { background: var(--v-wash-2); color: var(--v-fg); }
.v-btn--text { background: none; color: var(--v-cyan-2); padding: 0 4px; }

/* ---------- type ---------- */
.v-eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--v-cyan-2); }
.v-h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(34px, 5vw, 60px); line-height: 1.04; letter-spacing: -.025em; color: var(--v-fg); }
.v-h1 em { font-style: normal; color: var(--v-cyan-2); background: linear-gradient(90deg, #F3F5F7 10%, #62E2EF 90%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.v-h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.1; letter-spacing: -.02em; color: var(--v-fg); }
.v-h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(21px, 2.1vw, 26px); line-height: 1.2; color: var(--v-fg); }
.v-lede { font-size: clamp(17px, 1.5vw, 19px); color: var(--v-fg-2); max-width: 56ch; }
.v-sec { padding: clamp(72px, 10vw, 128px) 0; position: relative; }
.v-sec__head { max-width: 720px; margin-bottom: clamp(36px, 5vw, 56px); display: grid; gap: 14px; }
.v-edge::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(98,226,239,.35) 25%, rgba(98,226,239,.08) 60%, transparent); }
.v-fade-top { position: relative; }
.v-fade-top::after { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 160px; background: linear-gradient(to bottom, var(--v-bg), transparent); pointer-events: none; z-index: -1; }

/* ============================================================
   HERO — the workbench
   ============================================================ */
.v-hero { padding: clamp(56px, 8vw, 104px) 0 clamp(64px, 9vw, 112px); position: relative; }
.v-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background-image: linear-gradient(to right, rgba(140,180,210,.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(140,180,210,.05) 1px, transparent 1px);
  background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 80% 70% at 70% 40%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 80% 70% at 70% 40%, #000 20%, transparent 75%); }
.v-hero__grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.v-hero__copy { display: grid; gap: 22px; }
.v-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.v-hero__note { font-family: var(--font-mono); font-size: 12px; color: var(--v-fg-3); }

.v-stack { position: relative; min-height: 540px; }
.v-stack::before { content: ""; position: absolute; inset: 8% 6% 4% 10%; background: radial-gradient(50% 50% at 55% 55%, rgba(0,184,212,.16), transparent 70%); filter: none; pointer-events: none; }
.v-win { position: absolute; border-radius: var(--v-radius); overflow: hidden; border: 1px solid transparent;
  background: linear-gradient(#0F1C28, #0F1C28) padding-box, linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.04) 45%, rgba(255,255,255,.08)) border-box; }
.v-win__bar { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 12px; background: linear-gradient(rgba(255,255,255,.04), rgba(255,255,255,.015)); border-bottom: .5px solid var(--v-line); }
.v-win__dots { display: flex; gap: 6px; }
.v-win__dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.14); display: block; }
.v-win__title { font-family: var(--font-mono); font-size: 11.5px; color: var(--v-fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v-win__fig { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; color: var(--v-fg-3); white-space: nowrap; }
.v-win picture, .v-win img { display: block; width: 100%; height: auto; }
.v-win--unit { width: 36%; right: 2%; top: 0; z-index: 1; transform: rotate(1.5deg);
  box-shadow: 0 0 0 1px var(--v-ring), 0 40px 90px -30px rgba(0,0,0,.7); }
.v-win--unit .v-win__body { background: #E9E5DF; }
.v-win--upload { width: 60%; left: 0; top: 56px; z-index: 2;
  box-shadow: 0 0 0 1px var(--v-ring), 0 28px 60px -24px rgba(0,0,0,.75); }
.v-win--read { width: 64%; right: 4%; top: 318px; z-index: 3; transform: rotate(-.6deg);
  box-shadow: 0 0 0 1px rgba(0,0,0,.35), 0 25px 60px -12px rgba(0,0,0,.8), 0 0 60px -20px rgba(0,184,212,.35); }
.v-win--read .v-win__body { position: relative; }
.v-scan { position: absolute; left: 1.5%; right: 1.5%; top: 15%; height: 24%; border-radius: 8px; pointer-events: none;
  box-shadow: 0 0 0 1.5px rgba(247,213,71,.0), 0 0 24px rgba(247,213,71,.0); animation: v-scan 4.2s var(--v-ease) infinite; }
@keyframes v-scan { 0%, 30% { box-shadow: 0 0 0 1.5px rgba(247,213,71,0), 0 0 24px rgba(247,213,71,0); } 45%, 80% { box-shadow: 0 0 0 1.5px rgba(247,213,71,.85), 0 0 28px rgba(247,213,71,.25); } 100% { box-shadow: 0 0 0 1.5px rgba(247,213,71,0), 0 0 24px rgba(247,213,71,0); } }
.v-stack.is-off .v-scan { animation-play-state: paused; }
.v-stack__caps { position: absolute; left: 0; bottom: -44px; display: flex; flex-wrap: wrap; gap: 6px 18px; font-family: var(--font-mono); font-size: 11.5px; color: var(--v-fg-3); }
.v-stack__caps b { color: var(--v-fg-2); font-weight: 400; }

/* ============================================================
   FORK — two ways in
   ============================================================ */
.v-fork { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.4vw, 28px); position: relative; }
.v-card { position: relative; display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: var(--v-wash-1); box-shadow: var(--v-card); transition: box-shadow .2s var(--v-ease), background .2s var(--v-ease); isolation: isolate; }
.v-card::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .25s var(--v-ease);
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 30%), rgba(98,226,239,.10), transparent 60%); }
.v-card:hover::after, .v-card:focus-within::after { opacity: 1; }
.v-card:hover, .v-card:focus-within { background: var(--v-wash-2); box-shadow: 0 0 0 .5px var(--v-line-2) inset, 0 0 0 1px var(--v-ring), 0 30px 60px -30px rgba(0,0,0,.8); }
.v-card__vis { aspect-ratio: 16 / 9; position: relative; overflow: hidden; background: var(--v-bg-deep); border-bottom: .5px solid var(--v-line); }
.v-card__vis img { width: 100%; height: 100%; object-fit: cover; }
.v-card__vis--photo img { object-position: 50% 45%; }
.v-card__vis--app { display: grid; place-items: center; padding: 18px; }
.v-card__vis--app img { height: auto; border-radius: 8px; box-shadow: 0 0 0 1px var(--v-ring), 0 18px 40px -20px rgba(0,0,0,.8); }
.v-card__tag { position: absolute; left: 14px; top: 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--v-fg); background: rgba(7,16,26,.72); border: .5px solid var(--v-line-2); border-radius: 999px; padding: 5px 10px; }
.v-card__body { display: grid; gap: 14px; padding: clamp(22px, 2.6vw, 32px); flex: 1; align-content: start; }
.v-card__who { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--v-fg-3); }
.v-card__facts { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.v-card__facts li { font-family: var(--font-mono); font-size: 12.5px; color: var(--v-fg); background: var(--v-wash-1); border: .5px solid var(--v-line-2); border-radius: 8px; padding: 6px 10px; }
.v-card__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 6px; }
.v-beam { position: absolute; left: 50%; top: 22%; width: 90px; height: 60px; transform: translateX(-50%); z-index: 2; pointer-events: none; }
.v-beam path { fill: none; stroke: url(#v-beam-g); stroke-width: 1.5; stroke-dasharray: 6 8; animation: v-beam 2.4s linear infinite; }
@keyframes v-beam { to { stroke-dashoffset: -28; } }
.v-beam span { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); white-space: nowrap; font-family: var(--font-mono); font-size: 11px; color: var(--v-fg-3); background: var(--v-bg); padding: 2px 8px; border-radius: 6px; border: .5px solid var(--v-line); }

/* ============================================================
   PROOF STRIP
   ============================================================ */
.v-proof { display: grid; grid-template-columns: repeat(4, 1fr); border-radius: 14px; background: var(--v-wash-1); box-shadow: var(--v-card); }
.v-proof > div { padding: 20px 22px; display: grid; gap: 6px; border-left: .5px solid var(--v-line); }
.v-proof > div:first-child { border-left: 0; }
.v-proof dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--v-fg-3); }
.v-proof dd { color: var(--v-fg); font-size: 15px; }
.v-proof a { display: inline-block; padding: 3px 0; }
.v-chip { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 13px; color: var(--v-fg); }
.v-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--v-ok); box-shadow: 0 0 0 3px rgba(63,203,139,.18); }
.v-tbd { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #F5A9A2; background: #2C1513; border: 1px dashed #7A332C; border-radius: 5px; padding: 1px 6px; }

/* ============================================================
   THE PULL — scroll story
   ============================================================ */
.story { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(28px, 4vw, 56px); }
.story__steps { list-style: none; padding: 0; position: relative; }
.story__step { min-height: 78svh; display: grid; align-content: center; gap: 12px; padding: 24px 0 24px 34px; position: relative; }
.story__step::before { content: ""; position: absolute; left: 7px; top: 0; bottom: 0; width: 1px; background: var(--v-line); }
.story__step::after { content: ""; position: absolute; left: 3px; top: calc(50% - 5px); width: 9px; height: 9px; border-radius: 50%; background: #1E3245; box-shadow: 0 0 0 1px var(--v-line-2); transition: background .25s var(--v-ease), box-shadow .25s var(--v-ease); }
.story__step[aria-current="step"]::after { background: var(--v-cyan); box-shadow: 0 0 0 4px rgba(0,184,212,.2); }
.story__n { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--v-cyan-2); }
.story__step p { max-width: 42ch; }
.story__fact { font-family: var(--font-mono); font-size: 13.5px; color: var(--v-fg); }
.story__fig { position: sticky; top: calc(64px + 4vh); align-self: start; margin: 0; }
.story__frame { border-radius: 16px; padding: 18px 18px 10px; background: linear-gradient(rgba(255,255,255,.03), rgba(255,255,255,.01)), var(--v-bg-deep); box-shadow: var(--v-card); }
.story__svg { display: block; width: 100%; height: auto; }
.story__grid { stroke: rgba(160,190,215,.09); stroke-width: 1; }
.story__ylab, .story__xlab, .story__lab, .story__bandlab, .story__stoichlab, .story__ticklab, .story__insetlab { font-family: var(--font-mono); font-size: 12px; fill: var(--v-fg-3); font-variant-numeric: tabular-nums; }
.story__ylab { text-anchor: end; }
.story__xlab { text-anchor: middle; }
.story__xunit { text-anchor: end; }
.story__ylab--stoich, .story__stoichlab { fill: var(--v-cyan-2); }
.story__stoich { stroke: var(--v-cyan); stroke-width: 1.4; stroke-dasharray: 5 5; filter: drop-shadow(0 0 4px rgba(0,184,212,.5)); }
.story__band { fill: rgba(247,213,71,.05); stroke: rgba(247,213,71,.18); stroke-dasharray: 3 4; }
.story__bandlab { fill: rgba(247,213,71,.75); font-size: 11px; }
.story__tr { fill: none; stroke: #8FA6B8; stroke-width: 1.3; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.story__tr--lean { stroke: var(--v-flag); stroke-width: 2.3; filter: drop-shadow(0 0 5px rgba(247,213,71,.45)); }
.story__lab { fill: var(--v-fg-3); font-size: 11px; }
.story__lab--lean { fill: var(--v-flag); }
.story__lens { opacity: 0; }
.story__lensring { fill: none; stroke: var(--v-cyan-2); stroke-width: 1.5; }
.story__lensline { stroke: rgba(98,226,239,.5); stroke-width: 1; stroke-dasharray: 3 3; }
.story__inset { fill: #0A1824; stroke: rgba(98,226,239,.45); }
.story__tick { stroke: rgba(98,226,239,.14); }
.story__ticklab { text-anchor: end; font-size: 10.5px; fill: var(--v-cyan-2); }
.story__zoomtr { fill: none; stroke: #C6D4E0; stroke-width: 1.8; }
.story__insetlab { font-size: 11px; }
.story__dock { position: relative; margin-top: 12px; min-height: 104px; }
.dock { position: absolute; inset: 0 0 auto 0; display: grid; gap: 8px; padding: 14px 16px; border-radius: 12px; background: var(--v-wash-1); box-shadow: var(--v-card); opacity: 0; transform: translateY(6px); transition: opacity .3s var(--v-ease), transform .3s var(--v-ease); }
.dock__k { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--v-fg-3); }
.dock__v { font-family: var(--font-mono); font-size: 13.5px; color: var(--v-fg); }
.dock__row { display: flex; flex-wrap: wrap; gap: 6px; }
.dock__row span { font-family: var(--font-mono); font-size: 11.5px; color: var(--v-fg); border: .5px solid var(--v-line-2); border-radius: 6px; padding: 3px 7px; background: var(--v-wash-1); }
.dock__can { height: 22px; border-radius: 6px; background: repeating-linear-gradient(90deg, rgba(0,184,212,.6) 0 2px, transparent 2px 12px); background-size: 12px 100%; animation: v-can 1s linear infinite; }
@keyframes v-can { to { background-position: 12px 0; } }
.dock pre { margin: 0; font-family: var(--font-mono); font-size: 11.5px; line-height: 1.6; color: var(--v-fg-2); white-space: pre; overflow: hidden; font-variant-numeric: tabular-nums; }
.dock pre b { color: var(--v-fg-3); font-weight: 400; }
.dock pre i { color: var(--v-flag); font-style: normal; }
.dock__verdict { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.v-badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: #1B1604; background: var(--v-flag); border-radius: 6px; padding: 4px 10px; box-shadow: 0 0 18px -4px rgba(247,213,71,.55); }
.story__cap { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px 14px; font-family: var(--font-mono); font-size: 11.5px; color: var(--v-fg-3); }
.v-sim { color: var(--v-flag); border: 1px solid rgba(247,213,71,.45); border-radius: 5px; padding: 1px 6px; letter-spacing: .06em; text-transform: uppercase; font-size: 10.5px; }

/* finished state (no JS, narrow screens, or stage 6–7): verdict dock shown */
.dock--6 { opacity: 1; transform: none; }

/* staged states — the script sets data-stage on .story__fig (desktop only) */
@media (min-width: 900px) {
  .story__fig[data-stage] .dock--6 { opacity: 0; transform: translateY(6px); }
  .story__fig[data-stage="1"] .dock--1, .story__fig[data-stage="2"] .dock--2, .story__fig[data-stage="3"] .dock--3,
  .story__fig[data-stage="4"] .dock--4, .story__fig[data-stage="5"] .dock--5,
  .story__fig[data-stage="6"] .dock--6, .story__fig[data-stage="7"] .dock--6 { opacity: 1; transform: none; }
  .story__fig[data-stage] .story__tr { transition: stroke-dashoffset 1.6s var(--v-ease) calc(var(--i) * 70ms), stroke .4s var(--v-ease), stroke-width .4s var(--v-ease); }
  .story__fig[data-stage="0"] .story__tr { stroke-dashoffset: 1; }
  .story__fig[data-stage]:not([data-stage="6"]):not([data-stage="7"]) .story__tr--lean { stroke: #8FA6B8; stroke-width: 1.3; filter: none; }
  .story__fig[data-stage]:not([data-stage="6"]):not([data-stage="7"]) .story__lab--lean { fill: var(--v-fg-3); }
  .story__fig[data-stage] .story__band, .story__fig[data-stage] .story__bandlab, .story__fig[data-stage] .story__lab { opacity: 0; transition: opacity .4s var(--v-ease); }
  .story__fig[data-stage="2"] .story__lab, .story__fig[data-stage="3"] .story__lab, .story__fig[data-stage="4"] .story__lab,
  .story__fig[data-stage="5"] .story__lab, .story__fig[data-stage="6"] .story__lab, .story__fig[data-stage="7"] .story__lab { opacity: 1; }
  .story__fig[data-stage="6"] .story__band, .story__fig[data-stage="6"] .story__bandlab,
  .story__fig[data-stage="7"] .story__band, .story__fig[data-stage="7"] .story__bandlab { opacity: 1; }
  .story__fig[data-stage] .story__lens { transition: opacity .4s var(--v-ease); }
  .story__fig[data-stage="3"] .story__lens { opacity: 1; }
}

/* ============================================================
   SPECS — numeral bento
   ============================================================ */
.v-bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.v-cell { border-radius: 14px; padding: 22px; background: var(--v-wash-1); box-shadow: var(--v-card); display: grid; gap: 10px; align-content: space-between; min-height: 150px; position: relative; overflow: hidden; }
.v-cell::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 80% at 100% 0%, rgba(98,226,239,.07), transparent 60%); pointer-events: none; }
.v-cell--2 { grid-column: span 2; } .v-cell--3 { grid-column: span 3; } .v-cell--4 { grid-column: span 4; }
.v-cell__n { font-family: var(--font-display); font-weight: 600; font-size: clamp(34px, 4vw, 52px); line-height: 1; letter-spacing: -.02em; color: var(--v-fg); font-variant-numeric: tabular-nums; }
.v-cell__n small { font-size: .45em; letter-spacing: 0; color: var(--v-fg-2); margin-left: 4px; }
.v-cell__k { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--v-fg-3); }
.v-cell__d { font-size: 14px; color: var(--v-fg-2); }
.v-cell--photo { padding: 0; min-height: 0; aspect-ratio: 16 / 10; }
.v-cell--photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.v-cell--photo figcaption { position: absolute; left: 14px; bottom: 12px; font-family: var(--font-mono); font-size: 11px; color: #1b1f24; background: rgba(255,255,255,.8); border-radius: 5px; padding: 2px 7px; }

/* ============================================================
   DEALERS, ABOUT, CTA, FOOTER
   ============================================================ */
.v-dealers { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.v-dealer { border-radius: 14px; padding: 22px; background: var(--v-wash-1); box-shadow: var(--v-card); display: grid; gap: 6px; }
.v-dealer h3 { font-family: var(--font-display); font-size: 18px; color: var(--v-fg); }
.v-dealer p { font-family: var(--font-mono); font-size: 13px; color: var(--v-fg-3); }
.v-dealer--join { background: transparent; box-shadow: 0 0 0 1px var(--v-line-2) inset; border: 0; }
.v-dealer a { display: inline-block; padding: 4px 0; }
.v-about { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.v-about p + p { margin-top: 14px; }
.v-cta { border-radius: 24px; padding: clamp(40px, 6vw, 72px); text-align: center; position: relative; overflow: hidden; background: radial-gradient(80% 120% at 50% 0%, rgba(0,184,212,.14), transparent 60%), var(--v-wash-1); box-shadow: var(--v-card); display: grid; gap: 18px; justify-items: center; }
.v-cta__row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.v-trust { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; font-family: var(--font-mono); font-size: 12.5px; color: var(--v-fg-3); }
.v-trust span::before { content: "— "; color: var(--v-line-2); }
.v-foot { padding: 72px 0 36px; border-top: .5px solid var(--v-line); background: linear-gradient(transparent, rgba(0,0,0,.25)); }
.v-foot__cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.v-foot h2 { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--v-fg-3); font-weight: 400; margin-bottom: 14px; }
.v-foot ul { list-style: none; padding: 0; display: grid; gap: 2px; }
.v-foot a { color: var(--v-fg-2); text-decoration: none; font-size: 14px; display: inline-block; padding: 6px 0; }
.v-foot a:hover { color: var(--v-fg); }
.v-foot address { font-style: normal; font-size: 14px; line-height: 1.8; }
.v-foot__legal { margin-top: 48px; padding-top: 20px; border-top: .5px solid var(--v-line); display: flex; flex-wrap: wrap; gap: 8px 22px; font-family: var(--font-mono); font-size: 12px; color: var(--v-fg-3); }
.v-foot__legal a { font-family: var(--font-mono); font-size: 12px; }
.v-foot__tm { margin: 12px 0 0; max-width: 72ch; font-size: 12px; line-height: 1.5; color: var(--v-fg-3); }

/* ---------- reveal (never from zero) ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .v-rise { animation: v-rise linear both; animation-timeline: view(); animation-range: entry 5% cover 24%; }
    @keyframes v-rise { from { opacity: .3; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: none; } }
  }
}

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .v-bento { grid-template-columns: repeat(4, 1fr); }
  .v-cell--3 { grid-column: span 2; } .v-cell--4 { grid-column: span 4; }
  .v-bento > .v-cell:last-child:nth-child(odd) { grid-column: span 4; } /* no lone last cell */
}
@media (max-width: 899px) {
  .v-nav { display: none; }
  .v-hero__grid, .story, .v-about { grid-template-columns: 1fr; }
  .v-stack { min-height: 0; display: grid; gap: 14px; margin-bottom: 36px; }
  .v-win { position: relative; left: auto; right: auto; top: auto; width: 100%; transform: none; }
  .v-win--unit { order: 3; } .v-win--upload { order: 2; } .v-win--read { order: 1; }
  .v-stack__caps { position: static; order: 4; }
  .v-fork { grid-template-columns: 1fr; }
  .v-beam { display: none; }
  .v-proof { grid-template-columns: 1fr 1fr; }
  .v-proof > div:nth-child(3) { border-left: 0; }
  .v-proof > div:nth-child(n+3) { border-top: .5px solid var(--v-line); }
  .story__fig { position: relative; top: auto; order: -1; }
  .story__step { min-height: 0; padding-top: 28px; padding-bottom: 28px; }
  .story__dock { min-height: 0; }
  .dock--6 { position: relative; }
  .v-dealers { grid-template-columns: 1fr 1fr; }
  .v-foot__cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .v-bento { grid-template-columns: 1fr 1fr; }
  .v-cell--2, .v-cell--3 { grid-column: span 2; } .v-cell--4 { grid-column: span 2; }
  .v-cell--half { grid-column: span 1; }
  .v-bento > .v-cell:last-child:nth-child(odd) { grid-column: span 2; }
  .v-proof { grid-template-columns: 1fr; }
  .v-proof > div { border-left: 0 !important; border-top: .5px solid var(--v-line); }
  .v-proof > div:first-child { border-top: 0; }
  .v-dealers, .v-foot__cols { grid-template-columns: 1fr; }
  .v-head__cta .v-hide-sm { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .v-atmo i, .v-scan, .v-beam path, .dock__can { animation: none !important; }
  .story__fig[data-stage] .story__tr, .dock, .v-card, .v-card::after { transition: none !important; }
}

/* ---------- hero: the pipeline arrives in order, once (demonstrates, not decorates) ---------- */
@media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
  .v-win { animation: v-arrive .7s var(--v-ease) both; }
  .v-win--unit { animation-delay: .05s; --r: 1.5deg; }
  .v-win--upload { animation-delay: .35s; --r: 0deg; }
  .v-win--read { animation-delay: .65s; --r: -.6deg; }
  @keyframes v-arrive { from { opacity: .35; transform: translate3d(0, 22px, 0) rotate(var(--r)); } to { opacity: 1; transform: rotate(var(--r)); } }
}

/* ============================================================
   SECTION LAB — variant chrome and the alternative sections
   ============================================================ */
.lab-intro { padding: 64px 0 24px; display: grid; gap: 14px; }
.lab-nav { position: sticky; top: 64px; z-index: 40; background: rgba(11,22,32,.9); border-bottom: .5px solid var(--v-line); }
.lab-nav .v-wrap { display: flex; flex-wrap: wrap; gap: 4px 6px; padding-top: 8px; padding-bottom: 8px; }
.lab-nav a { font-family: var(--font-mono); font-size: 12.5px; color: var(--v-fg-2); text-decoration: none; padding: 8px 10px; border-radius: 8px; }
.lab-nav a:hover { background: var(--v-wash-1); color: var(--v-fg); }
.lab-sec { padding: 56px 0 24px; scroll-margin-top: 120px; }
.lab-sec > .v-wrap > h2 { font-family: var(--font-display); font-size: 30px; color: var(--v-fg); margin-bottom: 6px; }
.lab-v { margin: 28px 0 56px; }
.lab-v__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; padding-bottom: 14px; margin-bottom: 26px; border-bottom: 1px dashed var(--v-line-2); }
.lab-v__id { font-family: var(--font-mono); font-size: 13px; color: #06131C; background: var(--v-cyan-2); border-radius: 6px; padding: 3px 8px; }
.lab-v__name { font-family: var(--font-display); font-size: 20px; color: var(--v-fg); font-weight: 600; }
.lab-v__main { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--v-ok); border: 1px solid rgba(63,203,139,.45); border-radius: 5px; padding: 2px 6px; }
.lab-v__note { flex-basis: 100%; font-size: 14.5px; color: var(--v-fg-3); max-width: 90ch; }
.lab-copy { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.lab-copy li { font-family: var(--font-display); font-size: 19px; color: var(--v-fg); padding: 14px 16px; border-radius: 10px; background: var(--v-wash-1); box-shadow: var(--v-card); }
.lab-copy li small { display: block; font-family: var(--font-mono); font-size: 11px; color: var(--v-fg-3); margin-top: 4px; }

/* hero B — annotated real screen */
.v-annot { position: relative; padding: 40px 236px 40px 0; min-height: 380px; display: grid; align-items: center; }
.v-annot .v-win, .v-plate .v-win { top: auto; right: auto; left: auto; }
.v-annot .v-win { position: relative; width: 100%; transform: none; animation: none; box-shadow: 0 0 0 1px rgba(0,0,0,.35), 0 30px 70px -20px rgba(0,0,0,.85), 0 0 80px -30px rgba(0,184,212,.4); }
.v-note { position: absolute; right: 0; width: 210px; transform: translateY(-50%); display: grid; gap: 4px; padding: 12px 14px; border-radius: 10px; background: rgba(15,28,40,.92); box-shadow: var(--v-card); font-size: 13px; color: var(--v-fg-2); }
.v-note b { font-family: var(--font-mono); font-weight: 400; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--v-cyan-2); }
.v-note::before { content: ""; position: absolute; left: -46px; top: 50%; width: 46px; height: 1px; background: linear-gradient(90deg, transparent, rgba(98,226,239,.7)); }
.v-note::after { content: ""; position: absolute; left: -50px; top: calc(50% - 3px); width: 7px; height: 7px; border-radius: 50%; background: var(--v-cyan-2); box-shadow: 0 0 0 4px rgba(98,226,239,.18); }

/* hero C — figure plate */
.v-plate { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 14px; align-items: center; }
.v-plate .v-win { position: relative; width: auto; transform: none; animation: none; box-shadow: 0 0 0 1px var(--v-ring), 0 24px 50px -24px rgba(0,0,0,.8); }
.v-plate__arrow { font-family: var(--font-mono); color: var(--v-cyan-2); font-size: 20px; }
.v-plate figcaption { font-family: var(--font-mono); font-size: 11.5px; color: var(--v-fg-3); padding: 10px 12px; border-top: .5px solid var(--v-line); }

/* fork B — the seam */
.v-seam { display: grid; grid-template-columns: 1fr 1fr; border-radius: 20px; overflow: hidden; box-shadow: var(--v-card); position: relative; min-height: 440px; }
.v-seam::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: linear-gradient(#0E5FB3, #62E2EF); box-shadow: 0 0 18px rgba(98,226,239,.5); }
.v-seam__half { position: relative; padding: clamp(28px, 4vw, 48px); display: grid; gap: 14px; align-content: end; isolation: isolate; transition: background .3s var(--v-ease); }
.v-seam__half:first-child { background: linear-gradient(160deg, #141F2A, #0B1620 70%); }
.v-seam__half:last-child { background: linear-gradient(200deg, #0B2230, #0B1620 70%); }
.v-seam__half:hover, .v-seam__half:focus-within { background-color: #10202C; }
.v-seam__motif { position: absolute; inset: 0; z-index: -1; opacity: .5; transition: opacity .3s var(--v-ease); }
.v-seam__half:hover .v-seam__motif, .v-seam__half:focus-within .v-seam__motif { opacity: .85; }
.v-seam__leds { position: absolute; right: 38px; top: 36px; display: grid; gap: 10px; }
.v-seam__leds i { width: 10px; height: 10px; border-radius: 50%; background: #3FCB8B; box-shadow: 0 0 12px rgba(63,203,139,.7); display: block; }

/* fork C — bento duo */
.v-duo { display: grid; grid-template-columns: 7fr 5fr; gap: 18px; }
.v-duo .v-card__vis { aspect-ratio: auto; height: 260px; }
.v-duo .v-card:first-child .v-card__vis img { object-position: 50% 40%; }
.v-duo__link { grid-column: 1 / -1; text-align: center; font-family: var(--font-mono); font-size: 12.5px; color: var(--v-fg-3); }
.v-duo__link span { color: var(--v-cyan-2); }

/* proof B — file cards */
.v-files { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.v-file { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 18px 20px; border-radius: 14px; background: var(--v-wash-1); box-shadow: var(--v-card); text-decoration: none; color: var(--v-fg-2); }
.v-file:hover { background: var(--v-wash-2); }
.v-file svg { width: 30px; height: 36px; }
.v-file b { display: block; font-family: var(--font-mono); font-weight: 400; font-size: 14px; color: var(--v-fg); }
.v-file small { font-family: var(--font-mono); font-size: 12px; color: var(--v-fg-3); }
.v-file__dl { font-family: var(--font-mono); font-size: 12px; color: var(--v-cyan-2); }

/* specs B — annotated photo */
.v-shot { position: relative; max-width: 760px; margin: 0 auto; border-radius: 18px; overflow: visible; }
.v-shot > picture img { border-radius: 18px; box-shadow: var(--v-card); }
.v-pin { position: absolute; transform: translate(-50%, -50%); width: 14px; height: 14px; border-radius: 50%; background: var(--v-cyan-2); box-shadow: 0 0 0 5px rgba(98,226,239,.25), 0 0 16px rgba(98,226,239,.7); }
.v-pin span { position: absolute; top: 50%; transform: translateY(-50%); white-space: nowrap; font-size: 13.5px; color: var(--v-fg); background: rgba(11,22,32,.9); border: .5px solid var(--v-line-2); border-radius: 8px; padding: 6px 10px; }
.v-pin--r span { left: 26px; } .v-pin--l span { right: 26px; }
.v-pin span b { display: block; font-family: var(--font-mono); font-weight: 400; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--v-cyan-2); }

/* dealers B — rows */
.v-rows { display: grid; grid-template-columns: 1.4fr .6fr; gap: 18px; align-items: start; }
.v-rows > ul { list-style: none; padding: 0; border-radius: 14px; background: var(--v-wash-1); box-shadow: var(--v-card); }


/* cta B — split */
.v-split2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; border-radius: 24px; padding: clamp(28px, 4vw, 48px); background: radial-gradient(70% 120% at 0% 0%, rgba(0,184,212,.12), transparent 60%), var(--v-wash-1); box-shadow: var(--v-card); align-items: center; }
.v-split2__rows { display: grid; gap: 10px; }
.v-split2__row { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; padding: 16px 18px; border-radius: 12px; background: var(--v-wash-1); box-shadow: 0 0 0 .5px var(--v-line-2) inset; }
.v-split2__row b { display: block; color: var(--v-fg); font-weight: 600; }
.v-split2__row span { font-size: 14px; }

@media (max-width: 899px) {
  .v-annot { padding: 0; }
  .v-note { position: relative; right: auto; top: auto !important; width: auto; margin-top: 10px; }
  .v-note::before, .v-note::after { display: none; }
  .v-plate { grid-template-columns: 1fr; }
  .v-plate__arrow { transform: rotate(90deg); justify-self: center; }
  .v-seam, .v-duo, .v-files, .v-rows, .v-split2, .lab-copy { grid-template-columns: 1fr; }
  .v-seam::after { left: 0; right: 0; top: 50%; bottom: auto; width: auto; height: 1px; }
  .v-pin span { display: none; }
}

/* gradient headline text: solid fallback where clipping or colours are overridden */
@media (forced-colors: active) { .v-h1 em { background: none; color: CanvasText; -webkit-text-fill-color: CanvasText; } }
.v-about a:not(.v-btn), .v-cell a:not(.v-btn) { display: inline-block; padding: 4px 0; }
@media (max-width: 899px) { .v-win--unit img { max-height: 300px; object-fit: cover; object-position: 50% 40%; } }

/* ---------- 2026-09-19 feedback ---------- */
/* dealers as rows (main) + a properly formatted "become a dealer" panel */
.v-rows { display: grid; grid-template-columns: 1.4fr .6fr; gap: 18px; align-items: start; }
.v-rows > ul { list-style: none; padding: 0; margin: 0; border-radius: 14px; background: var(--v-wash-1); box-shadow: var(--v-card); }
.v-rows > ul li { display: grid; grid-template-columns: 1.2fr 1fr auto; gap: 12px; align-items: center; padding: 16px 20px; border-top: .5px solid var(--v-line); }
.v-rows > ul li:first-child { border-top: 0; }
.v-rows__name { color: var(--v-fg); font-weight: 600; }
.v-rows__where { font-family: var(--font-mono); font-size: 13px; color: var(--v-fg-3); }
.v-rows > ul a { display: inline-block; padding: 6px 0; white-space: nowrap; }
.v-join { display: grid; gap: 12px; align-content: start; min-height: 0; }
.v-join__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.v-join__list li { padding-left: 18px; position: relative; font-size: 14.5px; color: var(--v-fg-2); }
.v-join__list li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; border-radius: 2px; background: var(--v-cyan); }
.v-join .v-btn { justify-self: start; margin-top: 4px; }
.v-join__mail { font-size: 13.5px; color: var(--v-fg-3); }
@media (max-width: 899px) { .v-rows { grid-template-columns: 1fr; } .v-rows > ul li { grid-template-columns: 1fr auto; } .v-rows__where { grid-column: 1; } }

/* the pointer light, now on every card-like surface (owner liked it on the product cards) */
.v-cell, .v-dealer, .v-file, .v-rows > ul, .v-shot { position: relative; isolation: isolate; }
.v-cell::after, .v-file::after, .v-rows > ul::after, .v-shot::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 0; opacity: 0; pointer-events: none;
  transition: opacity .25s var(--v-ease);
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 30%), rgba(98,226,239,.10), transparent 60%);
}
.v-cell:hover::after, .v-file:hover::after, .v-rows > ul:hover::after, .v-shot:hover::after,
.v-cell:focus-within::after, .v-file:focus-within::after { opacity: 1; }
.v-cell > *, .v-file > *, .v-rows > ul > *, .v-shot > * { position: relative; z-index: 1; }
.v-shot > .v-pin { position: absolute; z-index: 2; }
.v-file { transition: background .2s var(--v-ease); }
@media (prefers-reduced-motion: reduce) { .v-cell::after, .v-file::after, .v-rows > ul::after, .v-shot::after { transition: none; } }

/* ============================================================
   Page furniture (2026-09-22) — used by every page except the
   homepage: breadcrumb, page hero, numbered steps, spec table,
   FAQ, credit packs, contact/auth cards.
   ============================================================ */
.v-crumbs { font-family: var(--font-mono); font-size: 12px; color: var(--v-fg-3); }
.v-crumbs .v-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 18px; }
.v-crumbs a { color: var(--v-fg-3); text-decoration: none; padding: 6px 0; border-bottom: .5px solid transparent; }
.v-crumbs a:hover { color: var(--v-fg); border-bottom-color: var(--v-line-2); }
.v-crumbs b { color: var(--v-fg-2); font-weight: 400; }

.v-phero { padding: clamp(26px, 4vw, 48px) 0 clamp(28px, 4vw, 52px); }
.v-phero__grid { display: grid; gap: clamp(24px, 4vw, 52px); grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); align-items: center; }
.v-phero--wide .v-phero__grid { grid-template-columns: minmax(0, 1fr); max-width: 780px; }
.v-phero__copy { display: grid; gap: 16px; }
.v-phero .v-h1 { font-size: clamp(30px, 4.6vw, 52px); }
@media (max-width: 900px) { .v-phero__grid { grid-template-columns: minmax(0, 1fr); } }

/* numbered steps — one column of hairline rows */
.v-steps { display: grid; gap: 0; border-radius: var(--v-radius); overflow: hidden; box-shadow: var(--v-card); background: var(--v-wash-1); }
.v-steps > li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: clamp(12px, 2vw, 22px); padding: clamp(16px, 2.4vw, 22px) clamp(14px, 2.4vw, 24px); border-top: .5px solid var(--v-line); list-style: none; }
.v-steps > li:first-child { border-top: 0; }
.v-steps__n { font-family: var(--font-mono); font-size: 13px; color: var(--v-cyan-2); padding-top: 3px; }
.v-steps h3 { font-family: var(--font-sans); font-size: clamp(17px, 2vw, 20px); font-weight: 600; color: var(--v-fg); margin-bottom: 4px; }
.v-steps p { color: var(--v-fg-2); }
.v-steps__fact { font-family: var(--font-mono); font-size: 12px; color: var(--v-fg-3); margin-top: 6px; }

/* full specification table */
.v-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.v-table caption { text-align: left; font-family: var(--font-mono); font-size: 12px; color: var(--v-fg-3); padding-bottom: 10px; }
.v-table th, .v-table td { text-align: left; padding: 13px 14px; border-top: .5px solid var(--v-line); vertical-align: top; }
.v-table thead th { border-top: 0; font-family: var(--font-mono); font-weight: 400; font-size: 12px; color: var(--v-fg-3); text-transform: uppercase; letter-spacing: .06em; }
.v-table tbody th { font-weight: 600; color: var(--v-fg); width: 32%; }
.v-table td { color: var(--v-fg-2); }
.v-table tbody tr:hover { background: var(--v-wash-1); }
.v-tablewrap { border-radius: var(--v-radius); box-shadow: var(--v-card); background: var(--v-wash-1); padding: clamp(12px, 2vw, 20px); overflow-x: auto; }

/* FAQ — native disclosure, no script */
.v-faq { display: grid; border-radius: var(--v-radius); overflow: hidden; box-shadow: var(--v-card); background: var(--v-wash-1); }
.v-faq details { border-top: .5px solid var(--v-line); }
.v-faq details:first-of-type { border-top: 0; }
.v-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: clamp(15px, 2.2vw, 20px) clamp(14px, 2.4vw, 22px); min-height: 44px; cursor: pointer; color: var(--v-fg); font-weight: 600; list-style: none; }
.v-faq summary::-webkit-details-marker { display: none; }
.v-faq summary::after { content: "+"; font-family: var(--font-mono); font-size: 20px; color: var(--v-cyan-2); line-height: 1; }
.v-faq details[open] summary::after { content: "\2212"; }
.v-faq summary:hover { background: var(--v-wash-1); }
.v-faq p { padding: 0 clamp(14px, 2.4vw, 22px) clamp(16px, 2.2vw, 20px); color: var(--v-fg-2); max-width: 70ch; }

/* credit packs */
.v-packs { display: grid; gap: clamp(12px, 1.6vw, 18px); grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .v-packs { grid-template-columns: minmax(0, 1fr); } }
.v-pack { display: grid; gap: 10px; align-content: start; padding: clamp(18px, 2.4vw, 26px); border-radius: var(--v-radius); background: var(--v-wash-1); box-shadow: var(--v-card); }
.v-pack__n { font-family: var(--font-sans); font-size: clamp(28px, 4vw, 40px); font-weight: 600; color: var(--v-fg); line-height: 1; }
.v-pack__n small { font-size: 15px; font-weight: 400; color: var(--v-fg-3); margin-left: 6px; }
.v-pack ul { display: grid; gap: 6px; padding-left: 18px; color: var(--v-fg-2); font-size: 15px; }

/* form shell — auth and contact */
.v-formcard { max-width: 460px; padding: clamp(22px, 3vw, 32px); border-radius: var(--v-radius); background: var(--v-wash-1); box-shadow: var(--v-card); display: grid; gap: 18px; }
.v-formcard--wide { max-width: 640px; }
.v-field { display: grid; gap: 7px; }
.v-field label { font-size: 14px; color: var(--v-fg); font-weight: 600; }
.v-field input, .v-field select, .v-field textarea { font: inherit; font-size: 16px; color: var(--v-fg); background: rgba(0,0,0,.24); border: .5px solid var(--v-line-2); border-radius: 8px; padding: 12px 13px; min-height: 46px; width: 100%; }
.v-field textarea { min-height: 128px; resize: vertical; }
.v-field input:focus-visible, .v-field select:focus-visible, .v-field textarea:focus-visible { outline: 2px solid var(--v-cyan-2); outline-offset: 2px; }
.v-field__hint { font-size: 13px; color: var(--v-fg-3); }
.v-formcard__foot { font-size: 14px; color: var(--v-fg-3); border-top: .5px solid var(--v-line); padding-top: 16px; }

/* long-form legal / prose */
.v-prose { max-width: 72ch; display: grid; gap: 16px; }
.v-prose h2 { font-family: var(--font-sans); font-size: clamp(20px, 2.4vw, 25px); font-weight: 600; color: var(--v-fg); margin-top: 18px; }
.v-prose h3 { font-size: 17px; font-weight: 600; color: var(--v-fg); margin-top: 8px; }
.v-prose ul, .v-prose ol { display: grid; gap: 8px; padding-left: 20px; }
.v-prose__toc { position: sticky; top: 92px; align-self: start; display: grid; gap: 8px; font-size: 14px; padding: 18px; border-radius: var(--v-radius); background: var(--v-wash-1); box-shadow: var(--v-card); }
.v-prose__toc a { display: block; padding: 5px 0; color: var(--v-fg-2); text-decoration: none; }
.v-prose__toc a:hover { color: var(--v-cyan-2); }
.v-doc { display: grid; gap: clamp(24px, 4vw, 48px); grid-template-columns: 250px minmax(0, 1fr); }
@media (max-width: 900px) { .v-doc { grid-template-columns: minmax(0, 1fr); } .v-prose__toc { position: static; } }
.v-formcard__foot a, .v-phero__copy p > a:not(.v-btn), .v-prose a:not(.v-btn):not([class*="oae-"]) { display: inline-block; padding: 4px 0; }
.v-rows__name { display: grid; gap: 2px; }
.v-rows__name small { font-family: var(--font-mono); font-size: 12px; font-weight: 400; color: var(--v-fg-3); }
.v-rows__where { line-height: 1.7; }
.v-rows__where a { color: var(--v-fg-2); text-decoration: none; display: inline-block; padding: 3px 0; }
.v-rows__where a:hover { color: var(--v-cyan-2); }
.v-dealer p { margin-bottom: 6px; }
/* dealer rows carry real addresses now — nothing may push the page wide */
.v-rows > ul li > * { min-width: 0; }
.v-rows__name, .v-rows__where { overflow-wrap: anywhere; }
.v-rows > ul a { white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 599px) { .v-rows > ul li { grid-template-columns: minmax(0, 1fr); gap: 6px; } }
/* every row shares the same column widths, so the list reads as a table */
.v-rows > ul li { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, .95fr); }
.v-rows > ul li > :last-child { justify-self: end; text-align: right; }
@media (max-width: 899px) { .v-rows > ul li { grid-template-columns: minmax(0, 1fr) minmax(0, auto); } }
@media (max-width: 599px) { .v-rows > ul li { grid-template-columns: minmax(0, 1fr); }
  .v-rows > ul li > :last-child { justify-self: start; text-align: left; } }
/* .v-win is absolutely positioned for the hero cascade; --flow puts one in normal flow */
.v-win--flow { position: static; width: 100%; transform: none; animation: none; margin: 0; }
/* stacked page hero: copy, then one wide annotated figure */
.v-phero--stack .v-wrap { display: grid; gap: clamp(26px, 4vw, 44px); }
.v-phero__lead { max-width: 760px; }
.v-phero--stack .v-annot { padding-right: 268px; }
@media (max-width: 899px) {
  .v-phero--stack .v-annot { padding: 0; min-height: 0; gap: 12px; }
  .v-phero--stack .v-note { position: static; width: auto; transform: none; }
  .v-phero--stack .v-note::before, .v-phero--stack .v-note::after { display: none; }
}
.v-stat { font-family: var(--font-mono); font-size: 12px; color: var(--v-fg-3); }
.v-stat--ok { color: var(--v-ok); }

/* ============================================================
   Analysis Engine spikes (2026-09-22) — treatments for the
   sections that read as dead slabs on the pillar page.
   ============================================================ */
/* B: section head spans the width — title left, lede right */
.v-sec__head--split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); align-items: end; }
.v-sec__head--split .v-lede { margin: 0; max-width: 52ch; }
.v-sec__head--split > div { display: grid; gap: 12px; }
@media (max-width: 899px) { .v-sec__head--split { grid-template-columns: minmax(0, 1fr); align-items: start; } }

/* C: centred head */
.v-sec__head--mid { text-align: center; max-width: 760px; margin-inline: auto; }
.v-sec__head--mid .v-lede { margin-inline: auto; }

/* steps as cards across the full width */
.v-stepcards { display: grid; gap: clamp(12px, 1.6vw, 18px); grid-template-columns: repeat(4, minmax(0, 1fr)); counter-reset: sc; }
.v-stepcard { display: grid; gap: 8px; align-content: start; padding: clamp(18px, 2.2vw, 24px); border-radius: var(--v-radius); background: var(--v-wash-1); box-shadow: var(--v-card); position: relative; isolation: isolate; }
.v-stepcard__n { font-family: var(--font-mono); font-size: 12px; color: var(--v-cyan-2); }
.v-stepcard h3 { font-family: var(--font-sans); font-size: 18px; font-weight: 600; color: var(--v-fg); }
.v-stepcard p { font-size: 15px; }
.v-stepcard__fact { font-family: var(--font-mono); font-size: 12px; color: var(--v-fg-3); margin-top: 2px; }
@media (max-width: 1080px) { .v-stepcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .v-stepcards { grid-template-columns: minmax(0, 1fr); } }

/* steps beside a pinned screen */
.v-pinned { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(22px, 3vw, 44px); align-items: start; }
.v-pinned__aside { position: sticky; top: 96px; }
@media (max-width: 899px) { .v-pinned { grid-template-columns: minmax(0, 1fr); } .v-pinned__aside { position: static; } }

/* one-line compatibility strip */
.v-chiprow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: clamp(16px, 2vw, 22px); border-radius: var(--v-radius); background: var(--v-wash-1); box-shadow: var(--v-card); }
.v-chiprow__k { font-family: var(--font-mono); font-size: 12px; color: var(--v-fg-3); text-transform: uppercase; letter-spacing: .06em; margin-right: 4px; }
.v-chiprow b { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--v-fg); font-size: 15px; padding: 8px 13px; border-radius: 999px; background: var(--v-wash-2); box-shadow: 0 0 0 .5px var(--v-line) inset; }
.v-chiprow b::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--v-ok); }
.v-chiprow a { margin-left: auto; padding: 8px 0; }

/* three short beats in a row — for "how the pricing works" */
.v-beats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 26px); padding: clamp(20px, 2.6vw, 30px); border-radius: var(--v-radius); background: var(--v-wash-1); box-shadow: var(--v-card); }
.v-beat { display: grid; gap: 6px; align-content: start; }
.v-beat b { font-family: var(--font-sans); font-size: clamp(19px, 2.2vw, 23px); font-weight: 600; color: var(--v-fg); }
.v-beat span { font-size: 15px; color: var(--v-fg-2); }
@media (max-width: 799px) { .v-beats { grid-template-columns: minmax(0, 1fr); } }

/* head left, figure right */
.v-sidefig { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(24px, 4vw, 52px); align-items: center; }
@media (max-width: 899px) { .v-sidefig { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Review fixes (2026-09-23) ---------- */
/* Every page fills at least the viewport: footer sits at the bottom, never a bare strip below it. */
html { background: var(--v-bg); }
body.v2 { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body.v2 > main { flex: 1 0 auto; }
/* Selects: drop the native control so they use the site font and match the inputs' height. */
.v-field select { -webkit-appearance: none; appearance: none; padding-right: 42px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%239FB3C2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center; }
.v-field select option { background: var(--v-bg); color: var(--v-fg); }
/* Centred single-column pages (404, search). */
.v-solo .v-phero__grid { max-width: 760px; margin-inline: auto; }
.v-solo .v-phero__copy { text-align: center; justify-items: center; }
.v-solo .v-hero__cta { justify-content: center; }
.v-solo .v-field { width: 100%; max-width: 520px; text-align: left; }
.v-rows--solo { max-width: 760px; margin-inline: auto; }
.v-solo__k { max-width: 760px; margin: 0 auto 12px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--v-fg-3); }
.v-rows.v-rows--solo { grid-template-columns: minmax(0, 1fr); }
.v-rows--solo > ul li { grid-template-columns: minmax(0, .8fr) minmax(0, 1.7fr) auto; }
@media (max-width: 899px) { .v-rows--solo > ul li { grid-template-columns: 1fr auto; } }
body.v2 .v-solo__k { margin: 0 auto 12px; }

/* ---------- Controls and link states (2026-09-23) ---------- */
/* Native controls, scrollbars and autofill follow the dark theme. */
.v2 { color-scheme: dark; }
/* Link hover: stays in the cyan family. The old light token file's dark-blue hover is scoped out. */
:where(.v2) a:where(:not([class])):hover { color: #A6F1F8; }
:where(.v2) :where(p, dd, td, figcaption, .v-field__hint) > a:where(:not([class])):hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
:where(.v2) a:focus-visible, :where(.v2) button:focus-visible, :where(.v2) summary:focus-visible { outline: 2px solid var(--v-cyan-2); outline-offset: 2px; border-radius: 4px; }
.v-logo { transition: opacity .15s var(--v-ease); }
.v-logo:hover { color: #fff; }
.v-logo:hover span { color: #A6F1F8; }
.v-bar a:hover, .v-btn--text:hover { color: #A6F1F8; }
.v-file:hover { color: var(--v-fg); }
/* Checkbox and radio: same surface, line and cyan as the text fields. */
.v-check { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-size: 14px; color: var(--v-fg-2); cursor: pointer; }
.v-check:hover { color: var(--v-fg); }
.v2 input[type="checkbox"], .v2 input[type="radio"] {
  -webkit-appearance: none; appearance: none; flex: none; margin: 0; width: 20px; height: 20px; min-height: 0; padding: 0;
  border-radius: 6px; background: rgba(0,0,0,.24); border: .5px solid var(--v-line-2); box-shadow: 0 0 0 .5px rgba(0,0,0,.4);
  display: inline-grid; place-content: center; cursor: pointer; transition: background-color .15s var(--v-ease), border-color .15s var(--v-ease); }
.v2 input[type="radio"] { border-radius: 50%; }
.v2 input[type="checkbox"]::before { content: ""; width: 11px; height: 11px; transform: scale(0); transition: transform .12s var(--v-ease);
  clip-path: polygon(14% 44%, 0 58%, 40% 100%, 100% 22%, 86% 8%, 40% 70%); background: #06131C; }
.v2 input[type="radio"]::before { content: ""; width: 8px; height: 8px; border-radius: 50%; transform: scale(0); transition: transform .12s var(--v-ease); background: #06131C; }
.v2 input[type="checkbox"]:hover, .v2 input[type="radio"]:hover, .v-check:hover input { border-color: var(--v-cyan-2); }
.v2 input[type="checkbox"]:checked, .v2 input[type="radio"]:checked { background: var(--v-cyan); border-color: var(--v-cyan); }
.v2 input[type="checkbox"]:checked::before, .v2 input[type="radio"]:checked::before { transform: scale(1); }
.v2 input[type="checkbox"]:focus-visible, .v2 input[type="radio"]:focus-visible { outline: 2px solid var(--v-cyan-2); outline-offset: 2px; }
.v2 input:disabled, .v2 select:disabled, .v2 textarea:disabled { opacity: .5; cursor: not-allowed; }
/* Text fields: hover, placeholder, caret, autofill, search clear button. */
.v-field input:hover, .v-field select:hover, .v-field textarea:hover { border-color: rgba(255,255,255,.28); }
.v-field input::placeholder, .v-field textarea::placeholder { color: var(--v-fg-3); opacity: 1; }
.v2 input, .v2 textarea { caret-color: var(--v-cyan-2); }
.v2 input:-webkit-autofill, .v2 input:-webkit-autofill:hover, .v2 input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--v-fg); -webkit-box-shadow: 0 0 0 40px #0F1D29 inset; caret-color: var(--v-cyan-2); transition: background-color 9999s; }
.v2 input[type="search"]::-webkit-search-cancel-button { filter: invert(1) brightness(.8); cursor: pointer; }
.v2 ::selection { background: rgba(0,184,212,.35); color: #fff; }
@media (prefers-reduced-motion: reduce) { .v2 input[type="checkbox"]::before, .v2 input[type="radio"]::before, .v-logo { transition: none; } }
/* WCAG 1.4.11: form-control outlines need 3:1 against the card (#1b2733 ≈ 1.4% L). .40 white ≈ 3.5:1. */
.v-field input, .v-field select, .v-field textarea, .v2 input[type="checkbox"], .v2 input[type="radio"] { border-color: rgba(255,255,255,.40); }
.v-field input:hover, .v-field select:hover, .v-field textarea:hover { border-color: rgba(255,255,255,.58); }
/* Stacked checkboxes and radios sit as one group, not spaced like fields. Rows stay >= 32px, above the 24px minimum target. */
.v-formcard .v-check { min-height: 32px; }
.v-formcard .v-check + .v-check { margin-top: -10px; }
.v-check:has(input:disabled) { color: var(--v-fg-3); cursor: not-allowed; }
.v-check:has(input:disabled) input { opacity: .5; }
:where(.v2) p > a:where(:not([class])) { display: inline-block; padding: 4px 0; } /* every inline body link gets a 24px+ target */

/* The Pull, log-viewer conventions (research 11, 2026-09-25): rpm context trace and event markers. */
.story__rpm { fill: none; stroke: rgba(194,206,218,.38); stroke-width: 1.25; stroke-linejoin: round; }
.story__rpmlab { font-family: var(--font-mono); font-size: 11px; fill: rgba(194,206,218,.62); font-variant-numeric: tabular-nums; }
.story__event { stroke: rgba(194,206,218,.28); stroke-width: 1; stroke-dasharray: 2 4; }
.story__eventlab { font-family: var(--font-mono); font-size: 11px; fill: var(--v-fg-3); }
/* Callout label above its dot, for pins that sit close to another pin. */
.v-pin--up span { top: auto; bottom: 24px; transform: none; left: 50%; translate: -50% 0; }
.v-pin--down span { top: 24px; transform: none; left: 50%; translate: -50% 0; }

/* Audit fixes (2026-09-29) */
/* The CSV dock is the tallest; reserve its height so the caption below never collides with it. */
.story__dock { min-height: 150px; }
/* Small-screen menu: the primary nav hides under 900px, so the header needs its own way in. */
.v-menu { display: none; position: relative; }
.v-menu summary { list-style: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--v-fg); cursor: pointer; box-shadow: inset 0 0 0 .5px var(--v-line-2); background: var(--v-wash-1); }
.v-menu summary::-webkit-details-marker { display: none; }
.v-menu summary::after { content: ""; width: 8px; height: 8px; margin-left: 10px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .15s var(--v-ease); }
.v-menu[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.v-menu nav { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; display: grid; min-width: 240px; padding: 8px; border-radius: 12px; background: #0F1D29; box-shadow: 0 0 0 .5px var(--v-line-2), 0 24px 48px -16px rgba(0,0,0,.8); }
.v-menu nav a { display: block; padding: 12px 12px; border-radius: 8px; color: var(--v-fg-2); text-decoration: none; font-size: 15px; }
.v-menu nav a:hover { background: var(--v-wash-1); color: var(--v-fg); }
@media (max-width: 899px) { .v-menu { display: block; margin-left: 8px; } }
@media (max-width: 420px) { .v-head__cta { display: none; } }
@media (max-width: 899px) { .v-head__cta { margin-left: auto; } .v-menu { margin-left: 8px; } }
@media (max-width: 420px) { .v-menu { margin-left: auto; } }
/* Spec table on phones: stack each row (parameter, value, condition) instead of scrolling sideways. */
@media (max-width: 600px) {
  .v-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .v-table, .v-table tbody, .v-table tr, .v-table th, .v-table td { display: block; width: auto; }
  .v-table tr { border-top: .5px solid var(--v-line); padding: 10px 0; }
  .v-table th, .v-table td { border-top: 0; padding: 2px 0; }
  .v-table .v-tbd { white-space: normal; }
}