/* ═══════════════════════════════════════════════════════════
   VALTRIN — SITE STYLES v2 · "We build the specific."
   Built on tokens.css. Light-first; .theme-dark is a deliberate
   mode for nav, signature sequence, vision and CTA only.
   Radius 0 everywhere — the mark is mitred. No drop shadows:
   elevation = surface value + hairline.
   ═══════════════════════════════════════════════════════════ */

/* v3 UI language — Tesla-inspired soft surfaces, owner-directed 2026-08-15:
   filled controls over outlines, 4px radius, sentence case, fewer hairlines.
   Bronze + Archivo + mono-for-data remain the brand constants. */
:root{
  --ui-radius:4px;
  --ui-surface:#F4F2ED;
  --ui-surface-2:#ECE9E2;
  --ui-dark:#131C33;
  --ui-dark-2:#1B2A4A;
  /* single unified palette — navy · black · white · beige.
     Navy is the one accent; bronze survives only in the logo. */
  --accent:#24407C;
  --accent-bright:#3B5BA5;
  --accent-soft:#EDF1F8;
}
/* dark navy content sections — components restyle via token overrides */
.theme-dark{
  --ui-surface:#16223D;
  --ui-surface-2:#1B2A4A;
  --accent:#9DB8F5;
  --accent-bright:#C0D2FA;
  --accent-soft:#1B2A4A;
}
.theme-dark .fchip,
.theme-dark .inc__col,
.theme-dark .addons tr,
.theme-dark .rung,
.theme-dark .nextlink,
.theme-dark .case{
  background:var(--vt-panel);
  box-shadow:0 1px 2px rgba(0,0,0,.3), 0 0 0 1px rgba(58,76,110,.65);
}
.theme-dark .fchip--accent{background:#0C1424}
.theme-dark .farrow{color:var(--vt-bronze)}
.theme-dark .stat b{color:var(--vt-ink-max)}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{
  margin:0; background:var(--vt-paper); color:var(--vt-ink);
  font-family:var(--vt-font-display); font-size:var(--vt-t-body); line-height:1.6;
  font-variant-numeric:tabular-nums; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0; color:var(--vt-ink-max); letter-spacing:-.025em; text-wrap:balance}
p{margin:0 0 var(--vt-s-4)}
a{color:inherit}
img,video{max-width:100%; display:block}
button,input,select,textarea{font:inherit; color:inherit}
::selection{background:var(--vt-bronze-dim); color:var(--vt-ink-max)}
:focus-visible{outline:2px solid var(--vt-bronze-bright); outline-offset:2px}

.shell{max-width:var(--vt-grid-max); margin:0 auto; padding:0 var(--vt-grid-margin)}
.shell--narrow{max-width:900px}
.mono-i{font-family:var(--vt-font-mono); font-size:.92em}
.nt{text-transform:none; font-style:normal}
.micro{
  font-family:var(--vt-font-mono); font-size:var(--vt-t-micro);
  letter-spacing:.14em; text-transform:uppercase; color:var(--vt-ink-faint);
}
.eyebrow{
  display:flex; align-items:center; gap:12px;
  font-family:var(--vt-font-mono); font-size:var(--vt-t-micro);
  letter-spacing:.2em; text-transform:uppercase; color:var(--vt-ink-muted);
  margin:0 0 var(--vt-s-5);
}
.eyebrow::before{content:""; width:22px; height:1px; background:var(--vt-bronze-bright); flex:none}
.eyebrow b{color:var(--vt-bronze); font-weight:500}
.lede{font-size:var(--vt-t-body-lg); line-height:1.55; max-width:58ch; color:var(--vt-ink-bright)}
.h2{font-size:var(--vt-t-h2); font-weight:700; line-height:1.12; max-width:24ch; margin-bottom:var(--vt-s-5)}
.h2--wide{max-width:30ch}

.sec{padding:var(--vt-s-11) 0}
.sec--tint{background:var(--vt-ground); border-top:var(--vt-border-hair); border-bottom:var(--vt-border-hair)}
@media (max-width:767px){ .sec{padding:var(--vt-s-9) 0} }

/* ── reveal (fail-safe; .js-anim opts in) ─────────────────── */
.reveal{opacity:1; transform:none}
.js-anim .reveal{
  opacity:0; transform:translateY(14px);
  transition:opacity var(--vt-d-deliberate) var(--vt-e-mechanical) var(--d,0ms),
             transform var(--vt-d-deliberate) var(--vt-e-mechanical) var(--d,0ms);
}
.js-anim .reveal.is-in{opacity:1; transform:none}

/* ── buttons — filled, quiet, Tesla-weight ─────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--vt-font-display); font-size:var(--vt-t-small); font-weight:500;
  letter-spacing:.01em; text-decoration:none;
  color:#FFFFFF; background:var(--ui-dark);
  border:0; padding:13px 26px; border-radius:var(--ui-radius);
  transition:background var(--vt-d-quick) var(--vt-e-mechanical),
             color var(--vt-d-quick) var(--vt-e-mechanical),
             transform var(--vt-d-instant) var(--vt-e-mechanical);
  cursor:pointer;
}
.btn:active{transform:scale(.975)}
@media (hover:hover) and (pointer:fine){
  .btn:hover{background:var(--ui-dark-2)}
}
.btn__pip{font-family:var(--vt-font-display)}
.btn--lg{padding:15px 32px; min-width:220px}
.btn--ghost{background:var(--ui-surface-2); color:var(--vt-ink-max)}
@media (hover:hover) and (pointer:fine){
  .btn--ghost:hover{background:var(--vt-line); color:var(--vt-ink-max)}
}
.theme-dark .btn{background:#F2F4F6; color:#16171A}
@media (hover:hover) and (pointer:fine){
  .theme-dark .btn:hover{background:#FFFFFF}
}
.theme-dark .btn--ghost,.theme-dark .btn--nav{background:rgba(242,244,246,.14); color:#F2F4F6}
@media (hover:hover) and (pointer:fine){
  .theme-dark .btn--ghost:hover,.theme-dark .btn--nav:hover{background:rgba(242,244,246,.24)}
}

/* ═══════════ NAV ═══════════ */
.nav{
  position:sticky; top:0; z-index:40;
  transition:box-shadow var(--vt-d-base) var(--vt-e-mechanical);
}
.nav[data-solid="1"]{box-shadow:0 6px 24px rgba(12,20,36,.10)}
.nav__in{
  max-width:var(--vt-grid-max); margin:0 auto; padding:0 var(--vt-grid-margin);
  height:64px; display:flex; align-items:center; gap:var(--vt-s-6);
}
.mark{display:flex; align-items:center; gap:12px; text-decoration:none}
.mark__glyph{
  width:46px; height:31px; flex:none;
  background-image:url("assets/valtrin-lockup-cut.webp");
  background-size:119px; background-position:-37px -35px; background-repeat:no-repeat;
}
/* Tesla-style wordmark: the real glyph + the full name on one line. */
.mark__lock{display:flex; flex-direction:row; align-items:baseline; gap:.5em; line-height:1}
.mark__type{
  font-weight:700; font-size:.9375rem; letter-spacing:.34em;
  text-transform:uppercase; color:var(--vt-ink-max);
}
.mark__sub{
  font-weight:400; font-size:.9375rem; letter-spacing:.34em;
  text-transform:uppercase; color:var(--vt-ink-max); opacity:.85;
}
/* phones: full name as a two-line stack so the Discuss button keeps its
   place — VALTRIN on top, TECHNOLOGIES tucked beneath at matching width */
@media (max-width:767px){
  .mark{gap:10px}
  .mark__lock{flex-direction:column; align-items:flex-start; gap:3px}
  .mark__type{font-size:.78rem; letter-spacing:.2em}
  .mark__sub{font-size:.52rem; letter-spacing:.12em; opacity:.8}
}
.nav__links{margin-left:auto; display:flex; gap:var(--vt-s-6)}
.nav__links a{
  font-size:var(--vt-t-small); text-decoration:none; color:var(--vt-ink);
  transition:color var(--vt-d-quick) var(--vt-e-mechanical);
}
@media (hover:hover) and (pointer:fine){ .nav__links a:hover{color:var(--vt-ink-max)} }
.btn--nav{padding:9px 18px; font-size:var(--vt-t-small); white-space:nowrap}
.btn__short{display:none}
@media (max-width:1279px){ .nav__links{display:none} }
@media (max-width:767px){
  .btn__long{display:none}
  .btn__short{display:inline}
  .btn--nav{padding:9px 13px}
}

/* ═══════════ HERO ═══════════ */
.hero{position:relative; padding:var(--vt-s-10) 0 var(--vt-s-9); overflow:hidden}
.draft{
  position:absolute; inset:0; width:100%; height:100%;
  color:var(--vt-line-strong); opacity:.5; pointer-events:none;
  transform:translate(var(--px,0),var(--py,0));
}
.draft .dp{
  stroke-width:1;
  stroke-dasharray:var(--len,1000);
  stroke-dashoffset:calc(var(--len,1000) * (1 - var(--p,0)));
}
.draft .dp--dash{stroke-dasharray:6 8; stroke-dashoffset:0; opacity:var(--p,0)}
html:not(.js-anim) .draft .dp{stroke-dashoffset:0; opacity:1}
.hero .shell{position:relative}
.hero__h{
  font-size:var(--vt-t-display); font-weight:800; letter-spacing:-.04em;
  line-height:.98; margin:0 0 var(--vt-s-6);
}
.hero__h em{font-style:normal; color:var(--vt-bronze)}
.hero__foot{display:flex; gap:var(--vt-s-8); align-items:flex-end; flex-wrap:wrap}
.hero__lede{max-width:52ch; font-size:var(--vt-t-body-lg); line-height:1.55; color:var(--vt-ink-bright)}
.hero__act{display:flex; flex-direction:column; gap:var(--vt-s-4)}
.hero__cred{line-height:1.7}

/* full-bleed product plate */
.plate{margin:var(--vt-s-9) 0 0}
.plate__tray{
  border:0; border-radius:var(--ui-radius); overflow:hidden; background:var(--vt-panel);
  padding:0;
}
.plate__tray img{width:100%; height:auto}
.plate__cap{display:flex; justify-content:flex-end; padding-top:var(--vt-s-2)}
.plate--inset{margin:var(--vt-s-7) 0}

/* ═══════════ THESIS ═══════════ */
.thesis{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:var(--vt-s-8); align-items:start}
@media (max-width:1023px){ .thesis{grid-template-columns:1fr} }
.thesis__chart{border:var(--vt-border); background:var(--vt-panel); padding:var(--vt-s-5)}
.chart .cp{
  stroke-dasharray:var(--len,1000);
  stroke-dashoffset:calc(var(--len,1000) * (1 - var(--p,0)));
}
html:not(.js-anim) .chart .cp{stroke-dashoffset:0}
.pull{
  border-left:2px solid var(--vt-bronze-bright);
  padding:var(--vt-s-2) 0 var(--vt-s-2) var(--vt-s-5);
  margin:var(--vt-s-6) 0; max-width:52ch;
  font-size:var(--vt-t-body-lg); line-height:1.5; color:var(--vt-ink-max);
}

/* ═══════════ METHOD STRIP ═══════════ */
.method{display:flex; align-items:stretch; gap:var(--vt-s-4); border:0; background:transparent; flex-wrap:wrap}
.method__step{
  flex:1 1 200px; padding:var(--vt-s-5) var(--vt-s-5);
  background:var(--ui-surface); border-radius:var(--ui-radius); min-width:180px;
}
.method__k{
  font-family:var(--vt-font-mono); font-size:var(--vt-t-micro); letter-spacing:.18em;
  text-transform:uppercase; color:var(--vt-bronze); display:block; margin-bottom:6px;
}
.method__step p{margin:0; font-size:var(--vt-t-small); color:var(--vt-ink-muted); max-width:30ch}
@media (max-width:767px){ .method__step{border-right:0; border-bottom:var(--vt-border)} .method__step:last-child{border-bottom:0} }

/* ═══════════ THE FOUR LINES ═══════════ */
.line{
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:var(--vt-s-8); padding:var(--vt-s-9) 0; border-top:var(--vt-border-hair);
  align-items:start;
}
.line:first-of-type{border-top:0}
@media (max-width:1023px){ .line{grid-template-columns:1fr; gap:var(--vt-s-6)} }
.line__no{
  font-family:var(--vt-font-mono); font-size:var(--vt-t-micro);
  letter-spacing:.18em; color:var(--vt-bronze); display:block; margin-bottom:var(--vt-s-3);
}
.line__h{font-size:var(--vt-t-h2); font-weight:700; line-height:1.1; margin-bottom:var(--vt-s-4)}
.line__role{
  font-family:var(--vt-font-mono); font-size:var(--vt-t-small); color:var(--vt-ink-muted);
  border-top:var(--vt-border-hair); padding-top:var(--vt-s-4); margin-top:var(--vt-s-5);
  max-width:44ch; line-height:1.65;
}
.line__price{margin-top:var(--vt-s-4)}
.line__price b{
  font-family:var(--vt-font-mono); font-size:var(--vt-t-body-lg);
  color:var(--vt-bronze); font-weight:600;
}
.line__price span{display:block; font-size:var(--vt-t-micro); font-family:var(--vt-font-mono);
  letter-spacing:.1em; text-transform:uppercase; color:var(--vt-ink-faint); margin-top:4px}

.menu{display:flex; flex-wrap:wrap; gap:8px; background:transparent; border:0}
.menu li{
  list-style:none; background:var(--ui-surface); border-radius:var(--ui-radius); padding:9px 14px;
  font-family:var(--vt-font-mono); font-size:var(--vt-t-micro); letter-spacing:.06em;
  text-transform:uppercase; color:var(--vt-ink);
}
ul.menu{margin:0; padding:0}

.band{position:relative; border:var(--vt-border); overflow:hidden}
.band img{width:100%; height:auto; display:block}
.band__cap{
  position:absolute; right:12px; bottom:10px;
  font-family:var(--vt-font-mono); font-size:.625rem; letter-spacing:.1em;
  text-transform:uppercase; color:rgba(242,244,246,.65);
}

/* mini portal — live DOM, never a screenshot */
.portal{border:0; border-radius:var(--ui-radius); overflow:hidden; background:var(--vt-panel); box-shadow:0 1px 0 rgba(22,23,26,.06), 0 0 0 1px rgba(222,218,210,.7)}
.portal__bar{
  height:36px; display:flex; align-items:center; gap:10px; padding:0 14px;
  background:var(--vt-panel-alt); border-bottom:var(--vt-border);
}
.portal__tabs{display:flex; gap:2px; margin-left:auto}
.portal__tab{
  font-family:var(--vt-font-mono); font-size:.625rem; letter-spacing:.1em; text-transform:uppercase;
  padding:5px 10px; border:1px solid transparent; background:transparent; cursor:pointer; color:var(--vt-ink-muted);
  transition:color var(--vt-d-quick) var(--vt-e-mechanical), border-color var(--vt-d-quick) var(--vt-e-mechanical);
}
.portal__tab[aria-selected="true"]{border-color:var(--vt-bronze-bright); color:var(--vt-bronze)}
.portal__body{padding:0}
.portal__row{
  display:flex; align-items:center; gap:12px; height:34px; padding:0 14px;
  border-bottom:var(--vt-border-hair);
  font-family:var(--vt-font-mono); font-size:.75rem; color:var(--vt-ink-bright);
}
.portal__row[data-active="1"]{border-left:1px solid var(--vt-bronze-bright); background:var(--vt-ground)}
.portal__row .r{margin-left:auto; color:var(--vt-ink-muted)}
.portal__row .ok{color:var(--vt-validated)}
.portal__row .warn{color:var(--vt-flag)}
.portal__foot{
  display:flex; justify-content:space-between; padding:10px 14px;
  font-family:var(--vt-font-mono); font-size:.625rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--vt-ink-faint);
}

.flag{
  border:0; border-radius:var(--ui-radius);
  background:var(--ui-surface); padding:var(--vt-s-5); margin-top:var(--vt-s-5); max-width:60ch;
}
.flag .micro{display:block; color:var(--vt-bronze); margin-bottom:6px}
.flag p{margin:0; font-size:var(--vt-t-small); line-height:1.6}

/* ═══════════ SIGNATURE SEQUENCE (dark) ═══════════ */
.seq{position:relative; height:420vh}
.seq__stage{
  position:sticky; top:0; height:100vh; display:flex; flex-direction:column;
  justify-content:center; gap:var(--vt-s-5); z-index:1; overflow:hidden;
}
.seq__head{display:flex; justify-content:space-between; align-items:flex-end; width:100%}
.seq__title{font-size:var(--vt-t-h2); font-weight:700; min-height:1.2em}
.seq__counter{font-family:var(--vt-font-mono); font-size:var(--vt-t-small); color:var(--vt-ink-muted)}
.seq__counter b{color:var(--vt-bronze)}
.rail{display:flex; gap:2px; width:100%}
.rail__seg{
  flex:1; height:26px; display:flex; align-items:center; padding:0 10px;
  border-bottom:1px solid var(--vt-line);
  font-family:var(--vt-font-mono); font-size:.625rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--vt-ink-faint); white-space:nowrap; overflow:hidden;
  transition:border-color var(--vt-d-base) var(--vt-e-mechanical), color var(--vt-d-base) var(--vt-e-mechanical);
}
.rail__seg[data-on="1"]{border-color:var(--vt-bronze); color:var(--vt-ink)}
@media (max-width:600px){
  /* labels can't fit at 5-up — the stage title carries the words, the rail becomes pure progress */
  .rail__seg{height:0; padding:0; border-bottom-width:3px}
  .rail__seg span{display:none}
}
.canvas{width:100%; flex:0 1 56vh; min-height:340px}
.canvas__inner{position:relative; height:100%; border:var(--vt-border-hair); background:color-mix(in srgb, var(--vt-paper) 72%, transparent)}
.wires{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
.wires path{fill:none; stroke:var(--vt-line-strong); stroke-width:1}
.wires .wire--flag{stroke:var(--vt-flag)}
.frag{
  position:absolute; display:flex; flex-direction:column; gap:2px;
  border:var(--vt-border-hair); background:var(--vt-panel); padding:10px 12px;
  font-family:var(--vt-font-mono); font-size:.6875rem; color:var(--vt-ink-bright);
  max-width:240px; will-change:transform,opacity;
}
.frag__src{font-size:.5625rem; letter-spacing:.14em; color:var(--vt-ink-faint)}
.frag__no{color:var(--vt-bronze)}
.frag__qty{color:var(--vt-ink-muted)}
.frag[data-dupe]{border-color:var(--vt-flag)}
.rule{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  text-align:center; opacity:0; background:var(--vt-panel);
  border:1px solid var(--vt-bronze-dim); padding:var(--vt-s-5) var(--vt-s-7);
}
.rule__eq{font-family:var(--vt-font-mono); font-size:1.5rem; color:var(--vt-ink-max); margin:0 0 6px}
.rule__eq b{color:var(--vt-bronze)}
.rule__cap{margin:0}
.panel{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(460px,86%); opacity:0;
  border:var(--vt-border); background:var(--vt-panel);
}
.panel__bar{
  height:34px; display:flex; align-items:center; justify-content:space-between;
  padding:0 14px; background:var(--vt-panel-alt); border-bottom:var(--vt-border-hair);
}
.prow{
  display:flex; gap:12px; align-items:center; height:30px; padding:0 14px;
  border-bottom:var(--vt-border-hair);
  font-family:var(--vt-font-mono); font-size:.6875rem; color:var(--vt-ink-bright);
  opacity:0; transition:opacity var(--vt-d-quick) linear;
}
.prow[data-active="1"]{border-left:1px solid var(--vt-bronze-bright)}
.prow__no{color:var(--vt-bronze)}
.prow__desc{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.prow__val{margin-left:auto; white-space:nowrap}
.panel__foot{
  display:flex; justify-content:space-between; align-items:center; padding:10px 14px;
}
.panel__stamp{
  font-family:var(--vt-font-mono); font-size:.625rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--vt-validated); opacity:0;
}
.panel__total{font-family:var(--vt-font-mono); font-size:1.125rem; color:var(--vt-ink-max)}

/* ═══════════ SCRUB BAND ═══════════ */
.scrub{position:relative; height:300vh; background:#0B0B0C}
.scrub__stage{position:sticky; top:0; height:100vh; overflow:hidden; display:flex; align-items:flex-end}
.scrub__media{position:absolute; inset:0}
.scrub__media video,.scrub__media img{width:100%; height:100%; object-fit:cover; opacity:.6}
.scrub__in{position:relative; z-index:1; padding-bottom:var(--vt-s-8); width:100%}
.scrub__k{color:rgba(242,244,246,.6); margin-bottom:var(--vt-s-3)}
.scrub__h{color:#F2F4F6; font-size:var(--vt-t-h2); line-height:1.12; margin-bottom:var(--vt-s-5)}
.scrub__rail{display:flex; gap:var(--vt-s-5); flex-wrap:wrap; margin-bottom:var(--vt-s-3)}
.scrub__rail [data-step]{color:rgba(242,244,246,.4); transition:color var(--vt-d-base) var(--vt-e-mechanical)}
.scrub__rail [data-step][data-on]{color:#D9A468}
.scrub__track{height:1px; background:rgba(242,244,246,.18); margin-bottom:var(--vt-s-3)}
.scrub__track span{display:block; height:100%; width:0; background:#C08343}
.scrub__cap{color:rgba(242,244,246,.4)}

/* ═══════════ ESTIMATOR ═══════════ */
.try{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:var(--vt-s-8); align-items:center}
@media (max-width:1023px){ .try{grid-template-columns:1fr} }
.try__note{margin-top:var(--vt-s-4)}
.calc{border:0; border-radius:var(--ui-radius); overflow:hidden; background:var(--vt-panel); box-shadow:0 1px 0 rgba(22,23,26,.06), 0 0 0 1px rgba(222,218,210,.7)}
.calc__bar{
  height:36px; display:flex; align-items:center; justify-content:space-between;
  padding:0 14px; background:var(--vt-panel-alt); border-bottom:var(--vt-border);
}
.calc__body{padding:var(--vt-s-5); display:grid; gap:var(--vt-s-4)}
.ctl{display:block}
.ctl__k{
  display:flex; justify-content:space-between; font-family:var(--vt-font-mono);
  font-size:var(--vt-t-small); color:var(--vt-ink-muted); margin-bottom:6px;
}
.ctl__k b{color:var(--vt-ink-max); font-weight:500}
.ctl input[type=range]{
  width:100%; height:28px; -webkit-appearance:none; appearance:none; background:transparent; cursor:pointer;
}
.ctl input[type=range]::-webkit-slider-runnable-track{height:2px; background:var(--vt-line-strong)}
.ctl input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:14px; height:14px; margin-top:-6px;
  background:var(--vt-bronze-bright); border:none; border-radius:0;
}
.ctl input[type=range]::-moz-range-track{height:2px; background:var(--vt-line-strong)}
.ctl input[type=range]::-moz-range-thumb{width:14px; height:14px; background:var(--vt-bronze-bright); border:none; border-radius:0}
.calc__out{display:grid; grid-template-columns:1fr 1fr 1.4fr; border-top:var(--vt-border)}
.calc__cell{padding:14px; border-right:var(--vt-border)}
.calc__cell:last-child{border-right:0}
.calc__cell b{display:block; font-family:var(--vt-font-mono); font-size:1.25rem; color:var(--vt-ink-max); margin:4px 0 2px}
.calc__cell--lead b{color:var(--vt-bronze)}
.calc__cell .u{font-family:var(--vt-font-mono); font-size:var(--vt-t-micro); color:var(--vt-ink-faint)}
.calc__foot{
  display:flex; justify-content:space-between; padding:10px 14px;
  border-top:var(--vt-border); background:var(--vt-panel-alt);
}
.calc__stamp[data-busy]{color:var(--vt-bronze)}

/* ═══════════ LADDER ═══════════ */
.ladder{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--vt-s-5); align-items:stretch}
@media (max-width:1023px){ .ladder{grid-template-columns:1fr} }
.rung{border:0; border-radius:var(--ui-radius); background:var(--ui-surface); padding:var(--vt-s-6); display:flex; flex-direction:column}
.rung--star{background:var(--vt-panel); box-shadow:inset 0 0 0 1px var(--vt-bronze-bright)}
.rung__k{font-family:var(--vt-font-mono); font-size:var(--vt-t-micro); letter-spacing:.16em;
  text-transform:uppercase; color:var(--vt-ink-faint); margin-bottom:var(--vt-s-3)}
.rung h3{font-size:var(--vt-t-h3); margin-bottom:var(--vt-s-3)}
.rung p{font-size:var(--vt-t-small); color:var(--vt-ink-muted); line-height:1.6}
.rung ul{margin:0 0 var(--vt-s-5); padding:0; list-style:none}
.rung li{
  font-size:var(--vt-t-small); color:var(--vt-ink); padding:7px 0;
  border-bottom:var(--vt-border-hair); line-height:1.5;
}
.rung li:last-child{border-bottom:0}
.rung__price{margin-top:auto; padding-top:var(--vt-s-4)}
.rung__price b{font-family:var(--vt-font-mono); font-size:1.375rem; color:var(--vt-bronze); font-weight:600}
.rung__price span{display:block; font-family:var(--vt-font-mono); font-size:var(--vt-t-micro);
  letter-spacing:.1em; text-transform:uppercase; color:var(--vt-ink-faint); margin-top:4px}

/* ═══════════ PROOF ═══════════ */
.proof{display:grid; grid-template-columns:1fr 1fr; gap:var(--vt-s-5)}
@media (max-width:1023px){ .proof{grid-template-columns:1fr} }
.case{border:0; border-radius:var(--ui-radius); background:var(--ui-surface); padding:var(--vt-s-6)}
.case__k{font-family:var(--vt-font-mono); font-size:var(--vt-t-micro); letter-spacing:.16em;
  text-transform:uppercase; color:var(--vt-bronze); display:block; margin-bottom:var(--vt-s-3)}
.case h3{font-size:var(--vt-t-h3); margin-bottom:var(--vt-s-3)}
.case p{font-size:var(--vt-t-small); color:var(--vt-ink-muted); line-height:1.65; margin-bottom:var(--vt-s-3)}
.case .spec{
  display:flex; gap:var(--vt-s-4); flex-wrap:wrap; border-top:var(--vt-border-hair);
  padding-top:var(--vt-s-4); margin-top:var(--vt-s-2);
}
.case .spec span{font-family:var(--vt-font-mono); font-size:var(--vt-t-micro);
  letter-spacing:.08em; text-transform:uppercase; color:var(--vt-ink-faint)}
.case .spec b{color:var(--vt-ink-bright); font-weight:500}
.honest{max-width:56ch; margin-top:var(--vt-s-6); font-size:var(--vt-t-small); color:var(--vt-ink-muted)}

/* ═══════════ VISION (dark) ═══════════ */
.vision{position:relative; overflow:hidden}
.vision__bg{position:absolute; inset:0}
.vision__bg img{width:100%; height:100%; object-fit:cover; opacity:.5}
.vision .shell{position:relative; z-index:1; padding-top:var(--vt-s-11); padding-bottom:var(--vt-s-11)}
.vision__h{font-size:var(--vt-t-h1); font-weight:800; letter-spacing:-.035em; line-height:1.05; max-width:20ch; margin-bottom:var(--vt-s-5)}
.vision p{max-width:52ch}
.vision__cap{margin-top:var(--vt-s-6)}

/* ═══════════ ENGAGE (dark) ═══════════ */
.engage{border-top:.5px solid var(--vt-line)}
.engage .shell{padding-top:var(--vt-s-10); padding-bottom:var(--vt-s-10)}
.engage__grid{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:var(--vt-s-9)}
@media (max-width:1023px){ .engage__grid{grid-template-columns:1fr} }
.engage__h{font-size:var(--vt-t-h1); font-weight:800; letter-spacing:-.035em; line-height:1.05; margin-bottom:var(--vt-s-5)}
.form{display:grid; gap:var(--vt-s-4)}
.field{display:grid; gap:6px}
.field span{font-family:var(--vt-font-mono); font-size:var(--vt-t-micro);
  letter-spacing:.12em; text-transform:uppercase; color:var(--vt-ink-muted)}
.field input,.field select,.field textarea{
  background:rgba(242,244,246,.1); border:1px solid transparent; color:var(--vt-ink-max);
  padding:13px 16px; border-radius:var(--ui-radius); font-size:var(--vt-t-body);
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--vt-bronze-bright); background:rgba(242,244,246,.14)}
.field textarea{min-height:96px; resize:vertical}
.field [aria-invalid="true"]{border-color:var(--vt-flag)}
.form__msg{font-size:var(--vt-t-small); min-height:1.4em; margin:0}
.form__msg[data-ok]{color:var(--vt-validated)}
.form__msg[data-err]{color:var(--vt-flag)}

/* ═══════════ FOOTER ═══════════ */
.footer{border-top:.5px solid var(--vt-line)}
.footer .shell{
  padding-top:var(--vt-s-7); padding-bottom:var(--vt-s-7);
  display:flex; gap:var(--vt-s-7); flex-wrap:wrap; align-items:flex-start;
}
.footer__col{display:flex; flex-direction:column; gap:8px; font-size:var(--vt-t-small); color:var(--vt-ink-muted)}
.footer__col a{color:var(--vt-ink); text-decoration:none}
@media (hover:hover) and (pointer:fine){ .footer__col a:hover{color:var(--vt-ink-max)} }
.footer__legal{margin-left:auto; text-align:right; max-width:40ch}
@media (max-width:767px){ .footer__legal{margin-left:0; text-align:left} }

/* ═══════════ MULTI-PAGE COMPONENTS ═══════════ */
.nav__links a[aria-current="page"]{color:var(--accent); font-weight:600}
.nav--light{background:#FFFFFF}
.nav--light .btn--nav{background:var(--ui-dark); color:#FFFFFF}
@media (hover:hover) and (pointer:fine){ .nav--light .btn--nav:hover{background:var(--ui-dark-2)} }
.crumb{display:flex; gap:10px; align-items:center; font-family:var(--vt-font-mono);
  font-size:var(--vt-t-micro); letter-spacing:.14em; text-transform:uppercase;
  color:var(--vt-ink-faint); margin-bottom:var(--vt-s-5)}
.crumb a{color:var(--vt-ink-muted); text-decoration:none}
@media (hover:hover) and (pointer:fine){ .crumb a:hover{color:var(--vt-bronze)} }
.crumb::before{content:""; width:22px; height:1px; background:var(--vt-bronze-bright)}

.phero{padding:var(--vt-s-9) 0 var(--vt-s-8)}
.phero__h{font-size:var(--vt-t-h1); font-weight:800; letter-spacing:-.035em; line-height:1.03; max-width:18ch; margin-bottom:var(--vt-s-5)}
.phero__grid{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:var(--vt-s-8); align-items:end}
@media (max-width:1023px){ .phero__grid{grid-template-columns:1fr} }
.phero__facts{display:grid; gap:0; border:0; border-radius:var(--ui-radius); overflow:hidden; background:var(--ui-surface)}
.fact{display:flex; justify-content:space-between; gap:var(--vt-s-4); padding:13px 18px; border-bottom:1px solid rgba(190,184,173,.35)}
.fact:last-child{border-bottom:0}
.fact span{font-family:var(--vt-font-mono); font-size:var(--vt-t-micro); letter-spacing:.12em; text-transform:uppercase; color:var(--vt-ink-faint); padding-top:3px}
.fact b{font-family:var(--vt-font-mono); font-size:var(--vt-t-small); color:var(--vt-ink-max); font-weight:500; text-align:right}
.fact b.bronze{color:var(--vt-bronze)}

/* add-on "tables" render as a card grid — the markup stays a table for
   semantics and the PDF, the presentation is Tesla-card */
.addons{width:100%; display:block; border:0; background:transparent; font-size:var(--vt-t-small)}
.addons thead{display:none}
.addons tbody{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:var(--vt-s-4);
}
.addons tr{
  display:flex; flex-direction:column; gap:6px;
  background:var(--vt-panel); border-radius:var(--ui-radius); padding:var(--vt-s-5);
  box-shadow:0 1px 2px rgba(22,23,26,.05), 0 0 0 1px rgba(222,218,210,.55);
}
.addons td{display:block; padding:0; border:0; color:var(--vt-ink)}
.addons td.thumb{
  margin:calc(var(--vt-s-5)*-1) calc(var(--vt-s-5)*-1) var(--vt-s-3);
  font-weight:400;
}
.addons td.thumb img{
  width:100%; height:150px; object-fit:cover; display:block;
  border-radius:calc(var(--ui-radius)*2) calc(var(--ui-radius)*2) 0 0;
}
.addons td:first-child:not(.thumb),
.addons td.thumb + td{font-weight:600; color:var(--vt-ink-max); white-space:normal; font-size:var(--vt-t-body)}
.addons td:nth-last-child(2){font-size:var(--vt-t-micro);
  letter-spacing:.02em; text-transform:none; color:var(--vt-ink-faint); font-weight:400}
.addons td:last-child{
  font-family:var(--vt-font-mono); white-space:nowrap; text-align:left; color:var(--vt-bronze);
  font-size:1.125rem; font-weight:600; margin-top:auto; padding-top:var(--vt-s-3);
}
.addons .d{display:block; font-size:var(--vt-t-small); color:var(--vt-ink-muted); font-weight:400; margin-top:4px; white-space:normal; line-height:1.5}
.scroll-x{overflow-x:auto; -webkit-overflow-scrolling:touch}

.inc{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--vt-s-4)}
.inc__col{border:0; border-radius:calc(var(--ui-radius)*2); background:var(--vt-panel); padding:var(--vt-s-6);
  box-shadow:0 1px 2px rgba(22,23,26,.05), 0 0 0 1px rgba(222,218,210,.55)}
.inc__col h3{font-size:var(--vt-t-h3); margin-bottom:var(--vt-s-4)}
.inc__col ul{margin:0; padding:0; list-style:none}
.inc__col li{padding:7px 0 7px 22px; border:0; font-size:var(--vt-t-small); line-height:1.55; position:relative}
.inc__col li::before{content:""; position:absolute; left:2px; top:14px; width:8px; height:8px;
  background:var(--vt-bronze-bright); border-radius:2px}
.inc__col li b{color:var(--vt-ink-max); font-weight:600}

.cta-band{border-top:var(--vt-border-hair); background:var(--vt-ground)}
.cta-band .shell{padding-top:var(--vt-s-8); padding-bottom:var(--vt-s-8);
  display:flex; align-items:center; justify-content:space-between; gap:var(--vt-s-6); flex-wrap:wrap}
.cta-band__h{font-size:var(--vt-t-h2); font-weight:700; letter-spacing:-.03em; max-width:26ch}

.nextlinks{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--vt-s-4); margin-top:var(--vt-s-6)}
.nextlink{border:0; border-radius:var(--ui-radius); background:var(--ui-surface); padding:var(--vt-s-5);
  text-decoration:none; display:flex; flex-direction:column; gap:6px;
  transition:background var(--vt-d-quick) var(--vt-e-mechanical)}
@media (hover:hover) and (pointer:fine){ .nextlink:hover{background:var(--ui-surface-2)} }
.nextlink .micro{color:var(--vt-bronze)}
.nextlink b{color:var(--vt-ink-max); font-size:var(--vt-t-body-lg); font-weight:700; letter-spacing:-.02em}
.nextlink span:last-child{font-size:var(--vt-t-small); color:var(--vt-ink-muted)}

.foot-nav{display:flex; flex-direction:column; gap:8px}

/* ═══════════ FULL-VIEWPORT PANEL SYSTEM (home) ═══════════
   One idea per viewport: full-bleed 4K image, headline high,
   actions low. Scroll-snap on capable devices, off for
   reduced motion. Corners stay mitred — the composition is
   what changed, not the brand. */
html:has(body.snap){scroll-snap-type:y proximity}
@media (prefers-reduced-motion:reduce){ html:has(body.snap){scroll-snap-type:none} }

.tp{
  position:relative; min-height:100svh; scroll-snap-align:start;
  display:flex; flex-direction:column; align-items:center;
  justify-content:space-between; overflow:hidden;
  padding:calc(64px + var(--vt-s-8)) var(--vt-grid-margin) var(--vt-s-9);
}
.tp__bg{position:absolute; inset:0; z-index:0}
.tp__bg img{width:100%; height:100%; object-fit:cover}
.tp__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(12,20,36,.84) 0%, rgba(12,20,36,.42) 40%,
             rgba(12,20,36,.30) 60%, rgba(12,20,36,.86) 100%);
}
.tp--light .tp__bg::after{
  background:linear-gradient(180deg, rgba(251,250,247,.66) 0%, rgba(251,250,247,.12) 38%,
             rgba(251,250,247,.10) 62%, rgba(251,250,247,.72) 100%);
}
.tp__head{position:relative; z-index:1; text-align:center; max-width:900px}
.tp__head{position:relative; text-shadow:0 1px 18px rgba(12,20,36,.8); padding:var(--vt-s-5) var(--vt-s-6)}
.tp__head::before{
  content:""; position:absolute; inset:-30px -60px; z-index:-1; border-radius:50%;
  background:radial-gradient(ellipse closest-side, rgba(12,20,36,.78) 0%,
             rgba(12,20,36,.5) 58%, rgba(12,20,36,0) 100%);
}
.tp__foot{position:relative}
.tp__foot::before{
  content:""; position:absolute; inset:-24px -70px; z-index:-1; border-radius:50%;
  background:radial-gradient(ellipse closest-side, rgba(12,20,36,.7) 0%,
             rgba(12,20,36,.42) 60%, rgba(12,20,36,0) 100%);
}
.tp__eyebrow{
  font-family:var(--vt-font-mono); font-size:var(--vt-t-micro); letter-spacing:.2em;
  text-transform:uppercase; color:#F2D8B4; margin:0 0 var(--vt-s-3);
}
.tp--light .tp__eyebrow{color:var(--vt-bronze)}
.tp__h{
  font-size:clamp(2.2rem,5.4vw,4.4rem); font-weight:800; letter-spacing:-.04em;
  line-height:1.02; color:#F2F4F6; margin:0 0 var(--vt-s-3); text-wrap:balance;
}
.tp--light .tp__h{color:var(--vt-ink-max)}
.tp__sub{
  font-size:clamp(1rem,1.6vw,1.1875rem); line-height:1.5; color:rgba(242,244,246,.88);
  max-width:52ch; margin:0 auto;
}
.tp--light .tp__sub{color:var(--vt-ink-bright)}
.tp__foot{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:var(--vt-s-4)}
.tp__cta{display:flex; gap:var(--vt-s-4); flex-wrap:wrap; justify-content:center}
.tpbtn{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:240px; padding:13px 24px; border-radius:var(--ui-radius); text-decoration:none;
  font-family:var(--vt-font-display); font-size:var(--vt-t-small); font-weight:500;
  letter-spacing:.01em; border:1px solid transparent;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:background var(--vt-d-quick) var(--vt-e-mechanical),
             color var(--vt-d-quick) var(--vt-e-mechanical),
             transform var(--vt-d-instant) var(--vt-e-mechanical);
}
.tpbtn:active{transform:scale(.975)}
.tpbtn--solid{background:rgba(19,28,51,.85); color:#F2F4F6}
.tpbtn--frost{background:rgba(244,242,237,.68); color:#16171A}
@media (hover:hover) and (pointer:fine){
  .tpbtn--solid:hover{background:#0F1830}
  .tpbtn--frost:hover{background:rgba(251,250,247,.92)}
}
.tp__note{
  font-family:var(--vt-font-mono); font-size:.625rem; letter-spacing:.12em;
  text-transform:uppercase; color:rgba(242,244,246,.85);
  text-shadow:0 1px 12px rgba(12,20,36,.8);
}
.tp--light .tp__note{color:var(--vt-ink-faint)}
.tp__hint{
  position:absolute; bottom:14px; left:50%; transform:translateX(-50%); z-index:1;
  color:rgba(242,244,246,.6); font-size:1rem; line-height:1;
}
.tp--light .tp__hint{color:var(--vt-ink-faint)}
@media (max-width:600px){
  .tp{padding-top:calc(64px + var(--vt-s-6))}
  .tpbtn{min-width:0; width:100%; max-width:340px}
  .tp__cta{width:100%; flex-direction:column; align-items:center}
}

/* full-bleed image band — edge to edge, no frame */
.fullbleed{position:relative; width:100%; overflow:hidden}
.fullbleed img{width:100%; height:min(78vh,720px); object-fit:cover; display:block}
.fullbleed figcaption{
  position:absolute; right:18px; bottom:14px; font-size:.6875rem; letter-spacing:.08em;
  text-transform:uppercase; color:rgba(255,255,255,.75); text-shadow:0 1px 8px rgba(0,0,0,.5);
}

/* big stat row — replaces fact tables everywhere */
.bigstats{display:flex; gap:var(--vt-s-8); flex-wrap:wrap; margin-top:var(--vt-s-6)}
.bigstats .stat b{font-size:clamp(1.9rem,3.6vw,3rem)}

/* flow chips — replaces boxed diagrams */
.flowchips{display:flex; align-items:stretch; gap:0; flex-wrap:wrap; margin-top:var(--vt-s-6)}
.fchip{
  flex:1 1 200px; min-width:200px; background:var(--vt-panel); border-radius:calc(var(--ui-radius)*2);
  padding:var(--vt-s-6); box-shadow:0 1px 2px rgba(22,23,26,.05), 0 0 0 1px rgba(222,218,210,.55);
  display:flex; flex-direction:column; gap:6px;
}
.fchip--accent{background:var(--ui-dark)}
.fchip--accent .fchip__h{color:#FFFFFF}
.fchip--accent .fchip__s{color:rgba(242,244,246,.75)}
.fchip__k{font-size:var(--vt-t-micro); font-family:var(--vt-font-mono); letter-spacing:.16em;
  text-transform:uppercase; color:var(--vt-bronze)}
.fchip__h{font-size:1.25rem; font-weight:700; letter-spacing:-.02em; color:var(--vt-ink-max)}
.fchip__s{font-size:var(--vt-t-small); color:var(--vt-ink-muted); line-height:1.5}
.farrow{
  align-self:center; padding:0 10px; color:var(--vt-bronze-bright);
  font-size:1.5rem; font-weight:700; flex:0 0 auto;
}
@media (max-width:767px){
  .flowchips{flex-direction:column}
  .farrow{transform:rotate(90deg); padding:2px 0; align-self:center}
}

/* ── Tesla content grammar: stats on white · 2-up image cards · split sections ── */
.stat-strip{background:var(--vt-paper); padding:var(--vt-s-10) 0}
.stat-strip__grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:var(--vt-s-6); margin-top:var(--vt-s-6)}
.stat b{display:block; font-size:clamp(2.2rem,4.6vw,3.6rem); font-weight:800; letter-spacing:-.04em; color:var(--vt-ink-max); line-height:1}
.stat b em{font-style:normal; color:var(--vt-bronze)}
.stat span{display:block; margin-top:8px; font-size:var(--vt-t-small); color:var(--vt-ink-muted); max-width:24ch}

/* Tesla carousel: horizontal snap, next card peeking, arrows + dots injected by JS */
.tgrid{
  display:flex; gap:var(--vt-s-5); padding:0 var(--vt-s-5) var(--vt-s-3);
  overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.tgrid::-webkit-scrollbar{display:none}
.tgrid .tcard{flex:0 0 min(84%, 1100px); scroll-snap-align:center}
@media (max-width:600px){ .tgrid .tcard{flex-basis:92%} }
.carousel{position:relative}
.car__btn{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:44px; height:44px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(255,255,255,.88); color:#16171A; font-size:1.1rem;
  box-shadow:0 4px 16px rgba(12,20,36,.22);
  transition:background var(--vt-d-quick) var(--vt-e-mechanical), transform var(--vt-d-instant) var(--vt-e-mechanical);
}
.car__btn:active{transform:translateY(-50%) scale(.94)}
@media (hover:hover) and (pointer:fine){ .car__btn:hover{background:#FFFFFF} }
.car__btn--prev{left:calc(var(--vt-s-5) + 10px)}
.car__btn--next{right:calc(var(--vt-s-5) + 10px)}
.car__dots{display:flex; justify-content:center; gap:9px; padding:var(--vt-s-4) 0 var(--vt-s-6)}
.car__dot{width:8px; height:8px; border-radius:50%; border:0; padding:0; cursor:pointer;
  background:var(--vt-line-strong); transition:background var(--vt-d-quick) var(--vt-e-mechanical)}
.car__dot[aria-current="true"]{background:var(--ui-dark)}
.tcard{
  position:relative; min-height:64vh; border-radius:calc(var(--ui-radius)*2); overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end; padding:var(--vt-s-7);
  text-decoration:none;
}
@media (max-width:600px){ .tcard{min-height:70vw; padding:var(--vt-s-5)} }
.tcard__bg{position:absolute; inset:0; z-index:0}
.tcard__bg img{width:100%; height:100%; object-fit:cover; transition:transform var(--vt-d-deliberate) var(--vt-e-settle)}
@media (hover:hover) and (pointer:fine){ .tcard:hover .tcard__bg img{transform:scale(1.03)} }
.tcard__bg::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(12,20,36,0) 42%, rgba(12,20,36,.66) 100%)}
.tcard__in{position:relative; z-index:1}
/* Tesla card grammar: category top-left · name + price text bottom-left · blue/white CTAs */
.tcard__k{
  position:absolute; top:var(--vt-s-5); left:var(--vt-s-7); z-index:1;
  font-size:var(--vt-t-small); font-weight:600; color:#FFFFFF;
  text-shadow:0 1px 10px rgba(12,20,36,.7);
}
@media (max-width:600px){ .tcard__k{left:var(--vt-s-5)} }
.tcard__h{font-size:clamp(1.7rem,2.8vw,2.6rem); font-weight:700; letter-spacing:-.03em; color:#FFFFFF; margin:0 0 2px}
.tcard__s{font-size:var(--vt-t-body); color:rgba(242,244,246,.9); margin:0 0 var(--vt-s-5); max-width:44ch}
.tcard__cta{display:flex; gap:12px; flex-wrap:wrap}
.tcard__cta .tpbtn{min-width:150px; padding:11px 18px}
.tpbtn--white{background:rgba(255,255,255,.92); color:#16171A; backdrop-filter:none}
@media (hover:hover) and (pointer:fine){ .tpbtn--white:hover{background:#FFFFFF} }

.tsplit{background:var(--vt-paper); padding:var(--vt-s-11) 0}
.tsplit__grid{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:var(--vt-s-8); align-items:center}
@media (max-width:1023px){ .tsplit__grid{grid-template-columns:1fr} }
.tsplit__img{border-radius:calc(var(--ui-radius)*2); overflow:hidden}
.tsplit__img img{width:100%; height:auto; display:block}
.tsplit__stats{display:flex; gap:var(--vt-s-7); flex-wrap:wrap; margin:var(--vt-s-5) 0 var(--vt-s-6)}

/* overlay nav for the panel home */
.nav--overlay{
  position:fixed; top:0; left:0; right:0;
  background:linear-gradient(180deg, rgba(12,20,36,.8) 0%, rgba(12,20,36,0) 100%);
}
.nav--overlay[data-solid="1"]{background:rgba(12,20,36,.88); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:0 6px 24px rgba(0,0,0,.22)}

/* ═══════════ print — used only to capture review PDFs ═══════════ */
@media print{
  *{-webkit-print-color-adjust:exact !important; print-color-adjust:exact !important}
  .nav{position:static}
  .plate__tray img,.band img{max-height:90vh; object-fit:contain}
}

/* ═══════════ v6 EDITORIAL LAYER — serif display, light hero, problem grid ═══════════ */
.serif{font-family:var(--vt-font-serif); font-weight:600; letter-spacing:-.015em}
h1.serif,h2.serif{font-weight:600}
.ehero{background:var(--vt-paper); padding:calc(64px + var(--vt-s-9)) 0 var(--vt-s-9)}
.ehero__grid{display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:var(--vt-s-9); align-items:center}
@media (max-width:1023px){ .ehero__grid{grid-template-columns:1fr} }
.ehero__h{font-family:var(--vt-font-serif); font-weight:600; letter-spacing:-.02em;
  font-size:clamp(2.6rem,5.6vw,4.6rem); line-height:1.04; color:var(--vt-ink-max)}
.ehero__p{font-size:var(--vt-t-body-lg); color:var(--vt-ink); max-width:50ch; margin:var(--vt-s-5) 0 var(--vt-s-6)}

/* animated system diagram (hero) */
.sysd{display:flex; flex-direction:column; gap:10px}
.sysd__node{
  display:flex; align-items:center; gap:14px; background:var(--vt-panel);
  border-radius:var(--ui-radius); padding:13px 16px;
  box-shadow:0 1px 2px rgba(22,23,26,.05), 0 0 0 1px rgba(222,218,210,.6);
  opacity:0; transform:translateX(-10px);
}
.js-anim .sysd__node{animation:sysin .5s var(--vt-e-mechanical) forwards}
@keyframes sysin{to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){ .sysd__node{opacity:1; transform:none; animation:none!important} }
.sysd__ic{width:34px; height:34px; border-radius:8px; flex:none; display:flex; align-items:center;
  justify-content:center; font-size:.95rem; background:var(--ui-surface); color:var(--accent)}
.sysd__node b{font-size:var(--vt-t-body); color:var(--vt-ink-max); font-weight:600}
.sysd__node span{font-size:var(--vt-t-small); color:var(--vt-ink-muted)}
.sysd__node .ok{margin-left:auto; color:var(--vt-validated); font-size:.8rem; opacity:0}
.js-anim .sysd__node .ok{animation:sysin .3s var(--vt-e-mechanical) forwards; animation-delay:inherit}
.sysd__link{width:2px; height:14px; margin-left:32px; background:var(--vt-line-strong)}

/* problem grid (“does this sound familiar?”) */
.probs{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:var(--vt-s-4); margin-top:var(--vt-s-6)}
.prob{background:var(--vt-panel); border-radius:calc(var(--ui-radius)*2); padding:var(--vt-s-6);
  box-shadow:0 1px 2px rgba(22,23,26,.05), 0 0 0 1px rgba(222,218,210,.55)}
.prob__ic{font-size:1.3rem; margin-bottom:var(--vt-s-3); display:block}
.prob h3{font-size:var(--vt-t-h3); font-weight:700; margin-bottom:6px}
.prob p{font-size:var(--vt-t-body); color:var(--vt-ink-muted); margin:0; line-height:1.6}
.prob em{font-style:normal; color:var(--accent); font-weight:600}

/* before/with-valtrin workflow transform */
.wfba{display:grid; grid-template-columns:1fr auto 1fr; gap:var(--vt-s-6); align-items:start; margin-top:var(--vt-s-7)}
@media (max-width:900px){ .wfba{grid-template-columns:1fr} .wfba__mid{display:none} }
.wfba__col{display:flex; flex-direction:column; gap:8px}
.wfba__col .k{font-size:var(--vt-t-micro); font-weight:700; letter-spacing:.14em; text-transform:uppercase; margin-bottom:6px}
.wfba__col--a .k{color:var(--vt-flag)}
.wfba__col--b .k{color:var(--vt-validated)}
.wfstep{background:var(--vt-panel); border-radius:var(--ui-radius); padding:11px 15px;
  font-size:var(--vt-t-body); color:var(--vt-ink-bright);
  box-shadow:0 0 0 1px rgba(222,218,210,.6)}
.wfba__col--a .wfstep{color:var(--vt-ink-muted)}
.wfba__col--b .wfstep{box-shadow:0 0 0 1px rgba(78,107,46,.3); background:#FAFCF7}
.wfarrow{text-align:center; color:var(--vt-line-strong); font-size:.8rem; line-height:1}
.wfba__mid{align-self:center; font-size:1.6rem; color:var(--accent); font-weight:700}
.wfba__count{font-size:var(--vt-t-small); color:var(--vt-ink-faint); margin-top:8px}

/* mini quote demo */
.qdemo{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); border-radius:calc(var(--ui-radius)*2);
  overflow:hidden; box-shadow:0 1px 2px rgba(22,23,26,.06), 0 0 0 1px rgba(222,218,210,.6); background:var(--vt-panel)}
@media (max-width:900px){ .qdemo{grid-template-columns:1fr} }
.qdemo__in{padding:var(--vt-s-6); display:grid; gap:var(--vt-s-4); align-content:start; background:var(--ui-surface)}
.qdemo__doc{padding:var(--vt-s-6); font-size:var(--vt-t-small)}
.qdoc{border:1px solid var(--vt-line); border-radius:var(--ui-radius); padding:var(--vt-s-5); max-width:430px; margin:0 auto;
  background:#FFFFFF; transition:opacity var(--vt-d-quick) var(--vt-e-mechanical)}
.qdoc.calc{opacity:.45}
.qdoc__head{display:flex; justify-content:space-between; border-bottom:2px solid var(--vt-ink-max); padding-bottom:8px; margin-bottom:12px}
.qdoc__head b{font-family:var(--vt-font-serif); font-size:1.05rem}
.qdoc__row{display:flex; justify-content:space-between; padding:5px 0; border-bottom:1px solid var(--vt-line)}
.qdoc__row span:first-child{color:var(--vt-ink-muted)}
.qdoc__total{display:flex; justify-content:space-between; padding-top:10px; font-weight:700; font-size:1.05rem; color:var(--vt-ink-max)}
.qdoc__stamp{margin-top:12px; display:inline-block; padding:4px 10px; border:1.5px solid var(--vt-validated);
  color:var(--vt-validated); border-radius:var(--ui-radius); font-size:.6875rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700}

/* AI / CODE philosophy split */
.aicode{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:#22304F; border-radius:calc(var(--ui-radius)*2); overflow:hidden}
@media (max-width:700px){ .aicode{grid-template-columns:1fr} }
.aicode__col{background:var(--ui-dark); padding:var(--vt-s-7)}
.aicode__col h3{color:#FFFFFF; font-size:var(--vt-t-h3); letter-spacing:.08em; margin-bottom:var(--vt-s-4)}
.aicode__col--ai h3{color:#F2D8B4}
.aicode__col--code h3{color:#9DB8F5}
.aicode__col li{list-style:none; padding:7px 0; color:#C9D4E8; font-size:var(--vt-t-body); border-bottom:1px solid #1B2A4A}
.aicode__col ul{margin:0; padding:0}
.aicode__state{grid-column:1/-1; background:#0C1424; padding:var(--vt-s-6); text-align:center;
  font-family:var(--vt-font-serif); font-size:clamp(1.3rem,2.6vw,1.9rem); color:#FFFFFF}
@media (max-width:700px){ .aicode__state{grid-column:1} }

/* pricing tiles (start small) */
.ptiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--vt-s-4); margin-top:var(--vt-s-6)}
.ptile{background:var(--vt-panel); border-radius:calc(var(--ui-radius)*2); padding:var(--vt-s-6);
  box-shadow:0 1px 2px rgba(22,23,26,.05), 0 0 0 1px rgba(222,218,210,.55); display:flex; flex-direction:column}
.ptile--free{background:var(--ui-dark)}
.ptile--free h3,.ptile--free .ptile__p{color:#FFFFFF}
.ptile--free p{color:#B9C6DE}
.ptile h3{font-size:var(--vt-t-body-lg); font-weight:700; margin-bottom:4px}
.ptile p{font-size:var(--vt-t-small); color:var(--vt-ink-muted); margin:0 0 var(--vt-s-4); line-height:1.55}
.ptile__p{margin-top:auto; font-weight:700; font-size:1.15rem; color:var(--vt-ink-max)}
.ptile__p small{display:block; font-weight:400; font-size:var(--vt-t-micro); color:var(--vt-ink-faint); margin-top:2px}

/* insights editorial */
.ins{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:var(--vt-s-7); margin-top:var(--vt-s-6)}
.ins a{text-decoration:none; display:block; border-top:1px solid var(--vt-ink-max); padding-top:var(--vt-s-4)}
.ins .k{font-size:var(--vt-t-micro); letter-spacing:.12em; text-transform:uppercase; color:var(--vt-ink-faint)}
.ins h3{font-family:var(--vt-font-serif); font-weight:600; font-size:1.4rem; line-height:1.25; margin:8px 0; color:var(--vt-ink-max)}
.ins p{font-size:var(--vt-t-small); color:var(--vt-ink-muted); margin:0}
@media (hover:hover) and (pointer:fine){ .ins a:hover h3{color:var(--accent)} }

/* industries grid */
.inds{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--vt-s-4); margin-top:var(--vt-s-6)}
.ind{position:relative; border-radius:calc(var(--ui-radius)*2); overflow:hidden; min-height:300px;
  display:flex; align-items:flex-end; text-decoration:none; padding:var(--vt-s-5)}
.ind img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.ind::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(12,20,36,.05) 30%, rgba(12,20,36,.72) 100%)}
.ind__in{position:relative; z-index:1}
.ind__in b{display:block; color:#FFFFFF; font-size:var(--vt-t-h3); font-weight:700; margin-bottom:2px}
.ind__in span{color:rgba(242,244,246,.85); font-size:var(--vt-t-small)}
@media (hover:hover) and (pointer:fine){
  .ind img{transition:transform var(--vt-d-deliberate) var(--vt-e-settle)}
  .ind:hover img{transform:scale(1.04)}
}

/* bridge chain (navy cinematic) */
.chain{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--vt-s-4); margin-top:var(--vt-s-7)}
@media (max-width:900px){ .chain{grid-template-columns:1fr} }
.chain__stage{background:rgba(22,34,61,.85); border-radius:calc(var(--ui-radius)*2); padding:var(--vt-s-5);
  box-shadow:0 0 0 1px rgba(58,76,110,.6)}
.chain__stage .k{font-size:var(--vt-t-micro); letter-spacing:.16em; text-transform:uppercase; color:#F2D8B4; font-weight:700}
.chain__stage ul{margin:10px 0 0; padding:0; list-style:none}
.chain__stage li{padding:5px 0; color:#C9D4E8; font-size:var(--vt-t-small); border-bottom:1px solid #1B2A4A}
.chain__stage li:last-child{border-bottom:0}

/* ═══════════ HOVER PACK — everything touchable answers ═══════════ */
@media (hover:hover) and (pointer:fine){
  .addons tr, .inc__col, .fchip, .rung, .nextlink, .case, .method__step{
    transition:transform var(--vt-d-quick) var(--vt-e-mechanical),
               box-shadow var(--vt-d-quick) var(--vt-e-mechanical);
  }
  .addons tr:hover, .inc__col:hover, .fchip:hover, .rung:hover, .case:hover, .method__step:hover{
    transform:translateY(-4px);
    box-shadow:0 10px 28px rgba(22,23,26,.12), 0 0 0 1px var(--accent-bright);
  }
  .theme-dark .addons tr:hover, .theme-dark .inc__col:hover, .theme-dark .fchip:hover,
  .theme-dark .rung:hover, .theme-dark .case:hover{
    box-shadow:0 10px 28px rgba(0,0,0,.4), 0 0 0 1px var(--accent-bright);
  }
  .addons td.thumb img{transition:transform var(--vt-d-considered) var(--vt-e-settle)}
  .addons tr:hover td.thumb img{transform:scale(1.05)}
  .tcard{transition:transform var(--vt-d-quick) var(--vt-e-mechanical)}
  .tcard:hover{transform:translateY(-5px)}
  .nav__links a{position:relative}
  .nav__links a::after{
    content:""; position:absolute; left:0; right:100%; bottom:-6px; height:2px;
    background:var(--accent-bright); transition:right var(--vt-d-base) var(--vt-e-mechanical);
  }
  .nav__links a:hover::after, .nav__links a[aria-current="page"]::after{right:0}
  .fullbleed img{transition:transform 1.2s var(--vt-e-settle)}
  .fullbleed:hover img{transform:scale(1.02)}
}

/* ═══════════ MINI DASHBOARD — live DOM, sample data ═══════════ */
.mdash{border-radius:calc(var(--ui-radius)*2); overflow:hidden; background:var(--ui-dark);
  color:#E8ECF4; box-shadow:0 18px 44px rgba(12,20,36,.28)}
.mdash__bar{display:flex; justify-content:space-between; align-items:center;
  padding:12px 18px; background:#0C1424; font-size:var(--vt-t-micro);
  letter-spacing:.1em; text-transform:uppercase; color:#8FA3C8}
.mdash__live{display:flex; align-items:center; gap:6px; color:#7BE0A2}
.mdash__live::before{content:""; width:7px; height:7px; border-radius:50%; background:#7BE0A2;
  animation:mpulse 2s infinite}
@keyframes mpulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){ .mdash__live::before{animation:none} }
.mdash__tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#22304F}
.mdash__tile{background:var(--ui-dark); padding:16px 18px}
.mdash__tile b{display:block; font-size:1.6rem; font-weight:800; letter-spacing:-.03em; color:#FFFFFF}
.mdash__tile span{font-size:.6875rem; color:#8FA3C8; letter-spacing:.06em; text-transform:uppercase}
.mdash__spark{padding:8px 18px 4px; display:block}
.mdash__rows{padding:6px 0 10px}
.mdash__row{display:flex; gap:12px; align-items:center; padding:8px 18px; font-size:var(--vt-t-small)}
.mdash__row + .mdash__row{border-top:1px solid #1B2A4A}
.mdash__dot{width:8px; height:8px; border-radius:50%; flex:none}
.mdash__row .r{margin-left:auto; color:#8FA3C8; font-size:.6875rem; letter-spacing:.06em; text-transform:uppercase}

/* ═══════════ LIVE LOG TICKER ═══════════ */
.ticker{border-radius:calc(var(--ui-radius)*2); overflow:hidden; background:#0C1424;
  box-shadow:0 0 0 1px rgba(58,76,110,.6); margin-top:var(--vt-s-6)}
.ticker__bar{display:flex; justify-content:space-between; padding:11px 18px; background:#101B33;
  font-size:var(--vt-t-micro); letter-spacing:.1em; text-transform:uppercase; color:#8FA3C8}
.ticker__body{padding:4px 0 8px; min-height:172px}
.ticker__row{display:flex; gap:12px; align-items:baseline; padding:7px 18px;
  font-size:var(--vt-t-small); color:#C9D4E8; opacity:0; transform:translateY(6px);
  animation:tin var(--vt-d-considered) var(--vt-e-mechanical) forwards}
@keyframes tin{to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){ .ticker__row{animation:none; opacity:1; transform:none} }
.ticker__t{color:#5C7099; font-size:.6875rem; flex:none; width:52px}
.ticker__ok{margin-left:auto; color:#7BE0A2; font-size:.6875rem; letter-spacing:.08em}
.ticker__hold{color:#F0B45C}

/* ═══════════ SHOWCASE — Tesla tab switcher: click a tab, the stage changes ═══════════ */
.showcase{padding:var(--vt-s-10) 0}
.showcase__stage{
  position:relative; border-radius:calc(var(--ui-radius)*2); overflow:hidden;
  background:var(--ui-dark);
}
.showcase__stage img{
  width:100%; height:auto; display:block;
  transition:opacity var(--vt-d-base) var(--vt-e-mechanical);
}
.showcase__stage img[data-fading]{opacity:0}
.showcase__cap{
  position:absolute; left:18px; bottom:14px; font-size:.6875rem; letter-spacing:.08em;
  text-transform:uppercase; color:rgba(255,255,255,.8); text-shadow:0 1px 8px rgba(0,0,0,.5);
}
.show__tabs{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:var(--vt-s-6); margin-top:var(--vt-s-6);
}
.show__tab{
  text-align:left; background:none; border:0; padding:14px 0 0; cursor:pointer;
  border-top:2px solid var(--vt-line); color:var(--vt-ink-muted);
  transition:border-color var(--vt-d-quick) var(--vt-e-mechanical), color var(--vt-d-quick) var(--vt-e-mechanical);
}
.show__tab b{display:block; font-size:var(--vt-t-body-lg); font-weight:600; color:inherit; margin-bottom:4px}
.show__tab span{display:block; font-size:var(--vt-t-small); line-height:1.5; color:var(--vt-ink-muted)}
.show__tab[aria-selected="true"]{border-top-color:var(--ui-dark); color:var(--vt-ink-max)}
.show__tab[aria-selected="true"] span{color:var(--vt-ink)}
@media (hover:hover) and (pointer:fine){
  .show__tab:hover{border-top-color:var(--vt-line-strong); color:var(--vt-ink-bright)}
}

/* ═══════════ HERO LIFE — slow drift, staggered entrance, typing rotator ═══════════ */
.tp--hero{overflow:hidden}
.tp--hero .tp__bg img{transform-origin:52% 42%}
.js-anim.mode-rich .tp--hero .tp__bg img{animation:kenburns 30s var(--vt-e-settle) both}
@keyframes kenburns{
  from{transform:scale(1.1) translateY(1.5%)}
  to{transform:scale(1) translateY(0)}
}
.js-anim .tp--hero .tp__eyebrow,
.js-anim .tp--hero .tp__h,
.js-anim .tp--hero .tp__sub,
.js-anim .tp--hero .tp__rot,
.js-anim .tp--hero .tp__foot{animation:heroIn .9s var(--vt-e-mechanical) backwards}
.js-anim .tp--hero .tp__h{animation-delay:.12s}
.js-anim .tp--hero .tp__sub{animation-delay:.26s}
.js-anim .tp--hero .tp__rot{animation-delay:.4s}
.js-anim .tp--hero .tp__foot{animation-delay:.52s}
@keyframes heroIn{
  from{opacity:0; transform:translateY(18px)}
  to{opacity:1; transform:none}
}
@media (prefers-reduced-motion:reduce){
  .tp--hero .tp__bg img{animation:none !important}
  .js-anim .tp--hero .tp__eyebrow,.js-anim .tp--hero .tp__h,.js-anim .tp--hero .tp__sub,
  .js-anim .tp--hero .tp__rot,.js-anim .tp--hero .tp__foot{animation:none !important}
}
.tp__rot{
  margin:var(--vt-s-4) 0 0; font-size:var(--vt-t-body-lg); color:#F2D8B4;
  min-height:1.6em; font-weight:500;
}
.tp__rot .lead-in{color:rgba(242,244,246,.75); font-weight:400}
.tp__rot .caret{
  display:inline-block; width:2px; height:1.05em; background:#F2D8B4;
  vertical-align:-.15em; margin-left:3px; animation:caret 1.1s steps(1) infinite;
}
@keyframes caret{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){ .tp__rot .caret{animation:none} }

/* workflow marquee under the hero */
.mq{background:var(--ui-dark); overflow:hidden; padding:15px 0; border-top:1px solid #1B2A4A}
.mq__track{display:flex; gap:56px; width:max-content; animation:mq 34s linear infinite}
.mq span,.mq a{white-space:nowrap; color:#8FA3C8; font-size:var(--vt-t-small); letter-spacing:.04em}
.mq a{text-decoration:none; transition:color var(--vt-d-quick) var(--vt-e-mechanical)}
.mq b{color:#C0D2FA; font-weight:500; transition:color var(--vt-d-quick) var(--vt-e-mechanical)}
@media (hover:hover) and (pointer:fine){
  .mq:hover .mq__track{animation-play-state:paused}
  .mq a:hover{color:#E8ECF4}
  .mq a:hover b{color:#F2D8B4}
}
.mq:focus-within .mq__track{animation-play-state:paused}
.mq a:focus-visible{outline:2px solid #F2D8B4; outline-offset:4px}
@keyframes mq{from{transform:translateX(0)} to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){ .mq__track{animation:none} }

/* ═══════════ SERVICES MEGA-MENU ═══════════ */
.nav__dd{position:relative}
.nav__ddbtn{
  background:none; border:0; cursor:pointer; font-size:var(--vt-t-small);
  color:var(--vt-ink); padding:6px 2px; display:inline-flex; align-items:center; gap:6px;
}
.nav__ddbtn::after{content:"▾"; font-size:.7em; transition:transform var(--vt-d-quick) var(--vt-e-mechanical)}
.nav__dd[data-open="1"] .nav__ddbtn::after{transform:rotate(180deg)}
@media (hover:hover) and (pointer:fine){ .nav__ddbtn:hover{color:var(--vt-ink-max)} }
.nav__panel{
  position:fixed; left:0; right:0; top:64px; z-index:39;
  background:rgba(255,255,255,.96); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--vt-line);
  box-shadow:0 30px 60px rgba(12,20,36,.14);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity var(--vt-d-base) var(--vt-e-mechanical),
             transform var(--vt-d-base) var(--vt-e-mechanical),
             visibility 0s linear var(--vt-d-base);
}
.nav__dd[data-open="1"] .nav__panel{
  opacity:1; visibility:visible; transform:none; transition-delay:0s;
}
@media (hover:hover) and (pointer:fine){
  .nav__dd:hover .nav__panel{opacity:1; visibility:visible; transform:none; transition-delay:0s}
}
.nav__panel-in{
  max-width:var(--vt-grid-max); margin:0 auto; padding:var(--vt-s-7) var(--vt-grid-margin);
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--vt-s-6);
}
.nav__pl{display:flex; flex-direction:column; gap:4px; text-decoration:none; padding:var(--vt-s-3);
  border-radius:var(--ui-radius); transition:background var(--vt-d-quick) var(--vt-e-mechanical)}
@media (hover:hover) and (pointer:fine){ .nav__pl:hover{background:var(--ui-surface)} }
.nav__pl b{color:var(--vt-ink-max); font-size:var(--vt-t-body); font-weight:600}
.nav__pl span{color:var(--vt-ink-muted); font-size:var(--vt-t-small); line-height:1.45}
.nav__pl .k{color:var(--accent); font-size:var(--vt-t-micro); font-weight:600; letter-spacing:.06em; text-transform:uppercase}
/* dark overlay nav (home) gets a navy panel */
.nav--overlay .nav__panel{background:rgba(12,20,36,.94); border-bottom-color:#263553}
.nav--overlay .nav__pl b{color:#F2F4F6}
.nav--overlay .nav__pl span{color:#9CA9C4}
@media (hover:hover) and (pointer:fine){ .nav--overlay .nav__pl:hover{background:rgba(38,53,83,.5)} }
.nav--overlay .nav__ddbtn{color:var(--vt-ink)}

/* ═══════════ EDITORIAL SPLIT — wide image (stats on it) + narrow text column ═══════════ */
.esplit{display:grid; grid-template-columns:minmax(0,7.4fr) minmax(0,4.6fr); min-height:560px}
.esplit--rev{grid-template-columns:minmax(0,4.6fr) minmax(0,7.4fr)}
.esplit--rev .esplit__media{order:2}
.esplit--rev .esplit__text{order:1}
@media (max-width:1023px){
  .esplit,.esplit--rev{grid-template-columns:1fr; min-height:0}
  .esplit--rev .esplit__media{order:1}
  .esplit--rev .esplit__text{order:2}
}
.esplit__media{position:relative; overflow:hidden}
.esplit__media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
@media (max-width:1023px){ .esplit__media{aspect-ratio:16/10} .esplit__media img{position:static; height:100%} }
.esplit__media::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(12,20,36,0) 55%, rgba(12,20,36,.6) 100%)}
.esplit__stats{
  position:absolute; left:0; right:0; bottom:26px; z-index:1;
  display:flex; justify-content:center; gap:clamp(24px,6vw,90px); text-align:center;
}
.esplit__stats div b{display:block; font-size:clamp(1.3rem,2.2vw,1.9rem); font-weight:700;
  letter-spacing:-.02em; color:#FFFFFF}
.esplit__stats div span{font-size:.75rem; color:rgba(255,255,255,.85)}
.esplit__text{
  display:flex; flex-direction:column; justify-content:center; gap:var(--vt-s-3);
  padding:var(--vt-s-9) var(--vt-s-8);
}
.esplit__text .k{font-size:var(--vt-t-small); color:var(--vt-ink-muted)}
.esplit__text h3{font-size:var(--vt-t-h2); font-weight:700; letter-spacing:-.03em}
.esplit__text p{font-size:var(--vt-t-body); color:var(--vt-ink); max-width:44ch}
.esplit__text .btn{align-self:flex-start; margin-top:var(--vt-s-5)}

/* ═══════════ ROI CALCULATOR ═══════════ */
.roi{border-radius:calc(var(--ui-radius)*2); background:var(--vt-panel);
  box-shadow:0 1px 2px rgba(22,23,26,.05), 0 0 0 1px rgba(222,218,210,.55);
  display:grid; grid-template-columns:1fr 1fr; overflow:hidden}
@media (max-width:900px){ .roi{grid-template-columns:1fr} }
.roi__in{padding:var(--vt-s-7); display:grid; gap:var(--vt-s-5); align-content:start}
.roi__out{background:var(--ui-dark); color:#E8ECF4; padding:var(--vt-s-7);
  display:flex; flex-direction:column; justify-content:center; gap:var(--vt-s-4)}
.roi__big{font-size:clamp(2rem,4vw,3.2rem); font-weight:800; letter-spacing:-.03em; color:#FFFFFF; line-height:1}
.roi__big small{font-size:.45em; font-weight:600; color:#8FA3C8}
.roi__line{color:#B9C6DE; font-size:var(--vt-t-body)}
.roi__line b{color:#F2D8B4}
.roi label .ctl__k{margin-bottom:8px}

/* ═══════════ GUARANTEE SPOTLIGHT ═══════════ */
.gband{background:var(--ui-dark); color:#E8ECF4; position:relative; overflow:hidden}
.gband::before{content:""; position:absolute; right:-120px; top:50%; transform:translateY(-50%);
  width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle, rgba(91,134,229,.22) 0%, transparent 65%)}
.gband .shell{padding-top:var(--vt-s-10); padding-bottom:var(--vt-s-10); position:relative}
.gband__seal{
  width:64px; height:64px; border-radius:50%; border:2px solid #7BE0A2;
  display:flex; align-items:center; justify-content:center; font-size:1.6rem; color:#7BE0A2;
  margin-bottom:var(--vt-s-5);
}
.gband__h{font-size:var(--vt-t-h1); font-weight:800; letter-spacing:-.035em; color:#FFFFFF; max-width:22ch; line-height:1.08}
.gband__p{color:#B9C6DE; max-width:52ch; font-size:var(--vt-t-body-lg); margin-top:var(--vt-s-4)}

/* ═══════════ VS COMPARISON ═══════════ */
.vs{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--vt-s-4)}
.vs__col{border-radius:calc(var(--ui-radius)*2); padding:var(--vt-s-6); background:var(--ui-surface)}
.vs__col--star{background:var(--ui-dark); color:#E8ECF4; box-shadow:0 16px 40px rgba(12,20,36,.25)}
.vs__col h3{font-size:var(--vt-t-h3); margin-bottom:2px}
.vs__col--star h3{color:#FFFFFF}
.vs__col .sub{font-size:var(--vt-t-small); color:var(--vt-ink-muted); margin-bottom:var(--vt-s-4)}
.vs__col--star .sub{color:#8FA3C8}
.vs__col ul{margin:0; padding:0; list-style:none}
.vs__col li{display:flex; gap:10px; padding:7px 0; font-size:var(--vt-t-small); line-height:1.5}
.vs__col li::before{content:"✕"; color:var(--vt-flag); font-weight:700; flex:none}
.vs__col li.y::before{content:"✓"; color:var(--vt-validated)}
.vs__col--star li.y::before{color:#7BE0A2}
.vs__col--star li{color:#C9D4E8}

/* ═══════════ GRANT CALLOUT ═══════════ */
.grant{border-radius:calc(var(--ui-radius)*2); overflow:hidden; display:grid;
  grid-template-columns:auto 1fr; background:linear-gradient(120deg,#0C7A5E,#0A5C47); color:#EAF7F1}
@media (max-width:700px){ .grant{grid-template-columns:1fr} }
.grant__pct{display:flex; align-items:center; padding:var(--vt-s-6) var(--vt-s-7);
  font-size:clamp(2.4rem,5vw,3.6rem); font-weight:800; letter-spacing:-.03em; background:rgba(0,0,0,.16)}
.grant__body{padding:var(--vt-s-6) var(--vt-s-7)}
.grant__body b{color:#FFFFFF}
.grant__body p{margin:0; font-size:var(--vt-t-body); line-height:1.6; max-width:64ch}
.grant__note{display:block; margin-top:8px; font-size:var(--vt-t-micro); color:rgba(234,247,241,.7)}

/* ═══════════ DELIVERY TIMELINE ═══════════ */
.tl{display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; margin-top:var(--vt-s-7)}
@media (max-width:900px){ .tl{grid-template-columns:1fr; gap:var(--vt-s-5)} }
.tl::before{content:""; position:absolute; left:0; right:0; top:11px; height:2px; background:var(--vt-line)}
@media (max-width:900px){ .tl::before{display:none} }
.tl__step{padding-right:var(--vt-s-5); position:relative}
.tl__dot{width:22px; height:22px; border-radius:50%; background:var(--vt-paper);
  border:2px solid var(--accent); position:relative; z-index:1; margin-bottom:var(--vt-s-3)}
.tl__step.done .tl__dot{background:var(--accent)}
.tl__wk{font-size:var(--vt-t-micro); font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--accent)}
.tl__step h4{font-size:var(--vt-t-body-lg); font-weight:700; margin:2px 0 4px; color:var(--vt-ink-max)}
.tl__step p{font-size:var(--vt-t-small); color:var(--vt-ink-muted); margin:0; max-width:30ch}

/* ═══════════ SCROLLYTELLING METHOD ═══════════ */
.scrolly{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:var(--vt-s-8)}
@media (max-width:1023px){ .scrolly{grid-template-columns:1fr} }
.scrolly__media{position:sticky; top:96px; align-self:start; border-radius:calc(var(--ui-radius)*2);
  overflow:hidden; aspect-ratio:16/11; background:var(--ui-dark)}
@media (max-width:1023px){ .scrolly__media{position:static} }
.scrolly__media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity var(--vt-d-considered) var(--vt-e-mechanical)}
.scrolly__media img.on{opacity:1}
.scrolly__steps{display:grid; gap:var(--vt-s-7); padding:var(--vt-s-5) 0 var(--vt-s-9)}
.scrolly__step{border-left:3px solid var(--vt-line); padding-left:var(--vt-s-5);
  opacity:.45; transition:opacity var(--vt-d-base) var(--vt-e-mechanical), border-color var(--vt-d-base) var(--vt-e-mechanical)}
.scrolly__step.on{opacity:1; border-left-color:var(--accent)}
.scrolly__step .k{font-size:var(--vt-t-micro); font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--accent)}
.scrolly__step h3{font-size:var(--vt-t-h2); font-weight:700; letter-spacing:-.03em; margin:4px 0 8px}
.scrolly__step p{font-size:var(--vt-t-body); color:var(--vt-ink); max-width:46ch; margin:0}

/* ═══════════ BEFORE/AFTER COMPARATOR ═══════════ */
.ba2{position:relative; border-radius:calc(var(--ui-radius)*2); overflow:hidden; aspect-ratio:16/9;
  background:var(--ui-dark); user-select:none}
.ba2 img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none}
.ba2__after{clip-path:inset(0 0 0 var(--cut,50%))}
.ba2__bar{position:absolute; top:0; bottom:0; left:var(--cut,50%); width:3px; background:#FFFFFF;
  box-shadow:0 0 14px rgba(0,0,0,.5); pointer-events:none}
.ba2__knob{position:absolute; top:50%; left:var(--cut,50%); transform:translate(-50%,-50%);
  width:46px; height:46px; border-radius:50%; background:#FFFFFF; color:#16171A;
  display:flex; align-items:center; justify-content:center; font-weight:700;
  box-shadow:0 4px 18px rgba(0,0,0,.4); pointer-events:none}
.ba2__tag{position:absolute; top:14px; padding:6px 12px; border-radius:var(--ui-radius);
  font-size:var(--vt-t-micro); font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  background:rgba(12,20,36,.72); color:#FFFFFF; pointer-events:none}
.ba2__tag--l{left:14px}
.ba2__tag--r{right:14px}
.ba2 input[type=range]{position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:ew-resize; margin:0}

/* ═══════════ STICKY PRODUCT SUB-NAV (Apple/Tesla chin bar) ═══════════ */
.subnav{
  position:sticky; top:64px; z-index:30;
  background:rgba(251,250,247,.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--vt-line);
}
.subnav__in{
  max-width:var(--vt-grid-max); margin:0 auto; padding:0 var(--vt-grid-margin);
  height:52px; display:flex; align-items:center; gap:var(--vt-s-5);
}
.subnav__name{font-weight:700; font-size:var(--vt-t-body); color:var(--vt-ink-max); letter-spacing:-.01em}
.subnav__links{display:flex; gap:var(--vt-s-5); margin-left:auto}
.subnav__links a{font-size:var(--vt-t-small); color:var(--vt-ink-muted); text-decoration:none}
@media (hover:hover) and (pointer:fine){ .subnav__links a:hover{color:var(--vt-ink-max)} }
.subnav .btn{padding:8px 18px; font-size:var(--vt-t-small)}
@media (max-width:700px){ .subnav__links{display:none} .subnav .btn{margin-left:auto} }

/* ═══════════ HOTSPOT PRODUCT TOUR ═══════════ */
.tour{position:relative; border-radius:calc(var(--ui-radius)*2); overflow:hidden}
.tour img{width:100%; height:auto; display:block}
.tour__hs{
  position:absolute; width:34px; height:34px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(37,87,196,.92); color:#FFFFFF; font-weight:700; font-size:.9rem;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 6px rgba(37,87,196,.25);
  transition:transform var(--vt-d-quick) var(--vt-e-mechanical);
}
.js-anim .tour__hs{animation:hspulse 2.4s infinite}
@keyframes hspulse{0%,100%{box-shadow:0 0 0 6px rgba(37,87,196,.25)}50%{box-shadow:0 0 0 12px rgba(37,87,196,.12)}}
@media (prefers-reduced-motion:reduce){ .js-anim .tour__hs{animation:none} }
.tour__hs:active{transform:scale(.9)}
.tour__hs[aria-expanded="true"]{background:#16171A; animation:none}
.tour__tip{
  position:absolute; z-index:2; max-width:300px; padding:var(--vt-s-4) var(--vt-s-5);
  background:#FFFFFF; border-radius:calc(var(--ui-radius)*2);
  box-shadow:0 18px 44px rgba(12,20,36,.3);
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity var(--vt-d-quick) var(--vt-e-mechanical), transform var(--vt-d-quick) var(--vt-e-mechanical);
}
.tour__tip.on{opacity:1; visibility:visible; transform:none}
.tour__tip b{display:block; color:var(--vt-ink-max); margin-bottom:4px; font-size:var(--vt-t-body)}
.tour__tip p{margin:0; font-size:var(--vt-t-small); color:var(--vt-ink); line-height:1.55}
.tour__hint{position:absolute; left:14px; bottom:12px; padding:6px 12px; border-radius:var(--ui-radius);
  background:rgba(12,20,36,.72); color:#FFFFFF; font-size:var(--vt-t-micro);
  letter-spacing:.08em; text-transform:uppercase; pointer-events:none}

/* ═══════════ ACCORDION ═══════════ */
.acc{display:grid; gap:var(--vt-s-3); margin-top:var(--vt-s-6)}
.acc__item{background:var(--vt-panel); border-radius:calc(var(--ui-radius)*2);
  box-shadow:0 1px 2px rgba(22,23,26,.05), 0 0 0 1px rgba(222,218,210,.55); overflow:hidden}
.acc__item summary{
  list-style:none; cursor:pointer; padding:var(--vt-s-5) var(--vt-s-6);
  font-size:var(--vt-t-body-lg); font-weight:600; color:var(--vt-ink-max);
  display:flex; justify-content:space-between; align-items:center; gap:var(--vt-s-4);
}
.acc__item summary::-webkit-details-marker{display:none}
.acc__item summary::after{content:"+"; font-size:1.4rem; font-weight:400; color:var(--accent);
  transition:transform var(--vt-d-quick) var(--vt-e-mechanical)}
.acc__item[open] summary::after{transform:rotate(45deg)}
.acc__item p{margin:0; padding:0 var(--vt-s-6) var(--vt-s-5); font-size:var(--vt-t-body);
  color:var(--vt-ink); max-width:70ch; line-height:1.65}
@media (hover:hover) and (pointer:fine){ .acc__item summary:hover{color:var(--accent)} }

/* ═══════════ FOUNDER NOTE ═══════════ */
.fnote{border-left:2px solid var(--accent); padding:var(--vt-s-2) 0 var(--vt-s-2) var(--vt-s-6); max-width:60ch}
.fnote p{font-size:var(--vt-t-body-lg); line-height:1.65; color:var(--vt-ink-bright); font-style:italic}
.fnote .sig{font-style:normal; font-weight:700; color:var(--vt-ink-max); margin-top:var(--vt-s-3); display:block}
.fnote .sig span{display:block; font-weight:400; font-size:var(--vt-t-small); color:var(--vt-ink-muted)}

/* ════════════════════════════════════════════════════════════
   V7 — ART-DIRECTED HOMEPAGE SCENES
   One engine philosophy: each scrub scene = tall section +
   sticky stage + one 0→1 progress. Rarity: every technique once.
   ════════════════════════════════════════════════════════════ */

/* shared scrub scaffolding */
.scene{position:relative}
.scene__stage{position:sticky; top:0; height:100vh; overflow:hidden; display:flex; flex-direction:column; justify-content:center}
.mode-still .scene{height:auto !important}
.mode-still .scene__stage{position:static; height:auto; min-height:0; padding:var(--vt-s-9) 0}

/* ── SCENE 1 · HERO — fragments → system ── */
.v7hero{height:240vh; background:var(--vt-paper)}
.v7hero .scene__stage{align-items:center}
.v7frag{
  position:absolute; padding:10px 14px; border-radius:var(--ui-radius);
  background:#FFFFFF; box-shadow:0 2px 10px rgba(22,23,26,.08), 0 0 0 1px rgba(222,218,210,.7);
  font-size:.8125rem; color:var(--vt-ink-bright); will-change:transform,opacity;
  display:flex; align-items:center; gap:8px; white-space:nowrap;
}
.v7frag .fico{font-size:.9rem}
.v7frag small{color:var(--vt-ink-faint); font-size:.6875rem}
.v7frag--dupe{box-shadow:0 2px 10px rgba(22,23,26,.08), 0 0 0 1px rgba(168,73,42,.35)}
.v7wires{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
.v7wires path{fill:none; stroke:var(--vt-bronze-bright); stroke-width:1.2; opacity:.7}
.v7plate{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(420px,84vw); border-radius:calc(var(--ui-radius)*2); overflow:hidden;
  background:var(--ui-dark); box-shadow:0 30px 80px rgba(12,20,36,.35); opacity:0;
}
.v7plate__bar{display:flex; justify-content:space-between; padding:10px 16px; background:#0C1424;
  font-size:.6875rem; letter-spacing:.1em; text-transform:uppercase; color:#8FA3C8}
.v7plate__row{display:flex; justify-content:space-between; padding:9px 16px; font-size:.8125rem;
  color:#C9D4E8; border-top:1px solid #1B2A4A}
.v7plate__row b{color:#FFFFFF}
.v7hero__type{position:relative; z-index:2; text-align:center; pointer-events:none}
.v7hero__type .l1,.v7hero__type .l2{
  display:block; font-family:var(--vt-font-serif); font-weight:600; letter-spacing:-.02em;
  font-size:clamp(2.6rem,7vw,5.6rem); line-height:1.02; color:var(--vt-ink-max);
}
.v7hero__type .l2{color:var(--vt-bronze)}
.v7hero__sub{margin-top:var(--vt-s-4); font-size:var(--vt-t-body-lg); color:var(--vt-ink); opacity:0}
.v7hero__cta{margin-top:var(--vt-s-5); display:flex; gap:12px; justify-content:center; opacity:0; pointer-events:auto}
.v7hero__hint{position:absolute; bottom:16px; left:50%; transform:translateX(-50%);
  color:var(--vt-ink-faint); font-size:.9rem}

/* ── SCENE 2 / 5 / rest statements ── */
.v7line{background:var(--vt-ground); padding:var(--vt-s-11) 0}
.v7line p{font-family:var(--vt-font-serif); font-weight:600; letter-spacing:-.015em;
  font-size:clamp(1.5rem,3vw,2.4rem); line-height:1.3; color:var(--vt-ink-max); max-width:26ch; margin:0}
.v7line .links{margin-top:var(--vt-s-6); display:flex; gap:var(--vt-s-6); flex-wrap:wrap}
.v7line .links a{font-size:var(--vt-t-body); color:var(--vt-ink); text-decoration:none;
  border-bottom:1px solid var(--vt-bronze-bright); padding-bottom:2px}
@media (hover:hover) and (pointer:fine){ .v7line .links a:hover{color:var(--vt-bronze)} }

/* ── SCENES 3–4 · 09:14 pin ── */
.v7pin{height:560vh; background:var(--pinbg,#EDECEA); transition:none}
.v7pin .scene__stage{padding:0 var(--vt-grid-margin)}
.v7desk{position:relative; width:min(880px,92vw); height:min(58vh,480px); margin:0 auto}
.v7win{
  position:absolute; border-radius:var(--ui-radius); overflow:hidden; background:#FFFFFF;
  box-shadow:0 8px 30px rgba(22,23,26,.16), 0 0 0 1px rgba(190,184,173,.5);
  opacity:0; transform:translateY(14px) scale(.98); will-change:transform,opacity;
  font-size:.75rem; color:var(--vt-ink-bright);
}
.v7win__bar{display:flex; align-items:center; gap:6px; padding:7px 10px; background:var(--ui-surface);
  border-bottom:1px solid var(--vt-line); font-size:.6875rem; color:var(--vt-ink-muted)}
.v7win__dot{width:8px; height:8px; border-radius:50%; background:var(--vt-line-strong)}
.v7win__body{padding:10px 12px; line-height:1.55}
.v7win--excel .v7win__body{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--vt-line); padding:1px}
.v7win--excel .cell{background:#FFFFFF; padding:4px 6px; font-size:.6875rem; overflow:hidden; white-space:nowrap}
.v7win--excel .cell.hot{background:#FDF2E3}
.v7wa{position:absolute; right:0; bottom:0; background:#0C1424; color:#E8ECF4; border-radius:var(--ui-radius);
  padding:10px 14px; font-size:.75rem; opacity:0; box-shadow:0 8px 30px rgba(12,20,36,.4)}
.v7wa b{color:#7BE0A2}
.v7rail{position:absolute; right:var(--vt-grid-margin); top:50%; transform:translateY(-50%);
  text-align:right; z-index:2}
.v7rail__n{font-size:clamp(3rem,7vw,5.5rem); font-weight:800; letter-spacing:-.04em;
  color:var(--vt-ink-max); line-height:1; font-variant-numeric:tabular-nums}
.v7rail__k{font-size:var(--vt-t-micro); letter-spacing:.16em; text-transform:uppercase; color:var(--vt-ink-muted)}
.v7rail__clock{font-size:var(--vt-t-body); color:var(--vt-ink-faint); margin-top:6px; font-variant-numeric:tabular-nums}
.v7pin--navy .v7rail__n{color:#FFFFFF}
.v7pin--navy .v7rail__k,.v7pin--navy .v7rail__clock{color:#8FA3C8}
.v7freeze{position:absolute; left:0; right:0; bottom:8vh; text-align:center; opacity:0}
.v7freeze b{display:block; font-family:var(--vt-font-serif); font-size:clamp(1.6rem,3.4vw,2.6rem);
  color:var(--vt-ink-max)}
.v7pin--navy .v7freeze b{color:#FFFFFF}
.v7freeze span{font-size:var(--vt-t-small); color:var(--vt-ink-muted)}
.v7pin--navy .v7freeze span{color:#8FA3C8}
.v7one{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(.9);
  width:min(460px,88vw); border-radius:calc(var(--ui-radius)*2); overflow:hidden;
  background:var(--ui-dark); box-shadow:0 30px 80px rgba(0,0,0,.4); opacity:0;
}
@media (max-width:900px){
  .v7rail{position:static; transform:none; text-align:center; margin-top:var(--vt-s-4)}
}

/* ── SCENE 6 · real tool ── */
.v7tool{background:#E9E8E4; padding:var(--vt-s-11) 0;
  background-image:linear-gradient(rgba(190,184,173,.18) 1px, transparent 1px);
  background-size:100% 56px}

/* ── SCENE 7 · document → data ── */
.v7doc{height:420vh; background:var(--vt-paper)}
.v7doc__grid{display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:var(--vt-s-8);
  width:100%; max-width:var(--vt-grid-max); margin:0 auto; padding:0 var(--vt-grid-margin); align-items:center}
@media (max-width:900px){ .v7doc__grid{grid-template-columns:1fr; gap:var(--vt-s-5)} }
.v7mail{background:#FFFFFF; border-radius:var(--ui-radius); box-shadow:0 8px 30px rgba(22,23,26,.1),
  0 0 0 1px rgba(222,218,210,.7); padding:var(--vt-s-6); font-size:var(--vt-t-body); line-height:1.8}
.v7mail__meta{font-size:.75rem; color:var(--vt-ink-faint); border-bottom:1px solid var(--vt-line);
  padding-bottom:8px; margin-bottom:12px}
.v7hl{border-radius:3px; padding:0 3px; transition:background var(--vt-d-base) var(--vt-e-mechanical),
  color var(--vt-d-base) var(--vt-e-mechanical)}
.v7hl.on{background:#F5E4C8; color:var(--vt-ink-max)}
.v7slots{display:grid; gap:10px}
.v7slot{display:flex; justify-content:space-between; align-items:center; padding:11px 15px;
  border-radius:var(--ui-radius); background:var(--ui-surface); font-size:var(--vt-t-small);
  color:var(--vt-ink-muted)}
.v7slot b{color:var(--vt-ink-max); opacity:0; transform:translateX(-8px);
  transition:opacity var(--vt-d-base) var(--vt-e-mechanical), transform var(--vt-d-base) var(--vt-e-mechanical)}
.v7slot.on b{opacity:1; transform:none}
.v7doc--code .v7slots .v7slot{background:#16223D; color:#8FA3C8}
.v7doc--code .v7slots .v7slot b{color:#FFFFFF}
.v7calc{margin-top:14px; border-radius:var(--ui-radius); overflow:hidden; opacity:0;
  transition:opacity var(--vt-d-considered) var(--vt-e-mechanical)}
.v7doc--code .v7calc{opacity:1}
.v7calc__row{display:flex; justify-content:space-between; padding:9px 15px; background:#0F1830;
  color:#C9D4E8; font-size:.8125rem; border-top:1px solid #1B2A4A; font-variant-numeric:tabular-nums}
.v7calc__row b{color:#9DB8F5}
.v7phil{margin-top:var(--vt-s-5); min-height:2.4em}
.v7phil .ai{font-family:var(--vt-font-serif); font-size:clamp(1.2rem,2.4vw,1.7rem); color:var(--vt-bronze)}
.v7phil .code{font-weight:700; font-size:clamp(1.2rem,2.4vw,1.7rem); color:#24407C; opacity:0;
  transition:opacity var(--vt-d-considered) var(--vt-e-mechanical)}
.v7doc--code .v7phil .code{opacity:1}

/* ── SCENE 8 · horizontal work gallery ── */
.v7work{background:var(--ui-dark)}
.v7work .scene__stage{justify-content:center}
.v7track{display:flex; will-change:transform}
.v7panel{flex:0 0 100vw; height:100vh; display:flex; align-items:center; padding:0 var(--vt-grid-margin)}
.v7panel__in{max-width:1100px; margin:0 auto; display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:var(--vt-s-8); align-items:center; width:100%}
@media (max-width:900px){ .v7panel__in{grid-template-columns:1fr; gap:var(--vt-s-5)} }
.v7panel .k{font-size:var(--vt-t-micro); letter-spacing:.18em; text-transform:uppercase; color:#F2D8B4}
.v7panel h3{font-family:var(--vt-font-serif); font-weight:600; font-size:clamp(1.8rem,3.6vw,3rem);
  color:#FFFFFF; margin:6px 0 10px}
.v7panel p{color:#B9C6DE; font-size:var(--vt-t-body); max-width:44ch}
.v7panel .media{border-radius:calc(var(--ui-radius)*2); overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.4)}
.v7panel .media img{width:100%; height:auto; display:block}
.v7qsvg{background:#0F1830; padding:var(--vt-s-5)}
.v7qsvg svg{width:100%; height:auto; display:block}
.v7qsvg .qp{stroke-dasharray:var(--len,800); stroke-dashoffset:calc(var(--len,800)*(1 - var(--p,0)))}
.v7workdots{position:absolute; bottom:22px; left:50%; transform:translateX(-50%); display:flex; gap:8px}
.v7workdots span{width:7px; height:7px; border-radius:50%; background:#3A4C6E;
  transition:background var(--vt-d-quick) var(--vt-e-mechanical)}
.v7workdots span.on{background:#F2D8B4}
@media (max-width:900px){
  /* mobile: native swipe */
  .v7work{height:auto !important}
  .v7work .scene__stage{position:static; height:auto; display:block}
  .v7track{overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none}
  .v7track::-webkit-scrollbar{display:none}
  .v7panel{flex:0 0 92vw; height:auto; scroll-snap-align:center; padding:var(--vt-s-8) var(--vt-s-4)}
  .v7workdots{display:none}
}

/* ── SCENE 9 · exploded software assembly ── */
.v7x{height:380vh;
  background:#F6F4EF;
  background-image:linear-gradient(rgba(36,64,124,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(36,64,124,.05) 1px, transparent 1px);
  background-size:48px 48px}
.v7x__wrap{position:relative; width:min(560px,90vw); margin:0 auto; perspective:1200px; height:min(60vh,460px)}
.v7xp{
  position:absolute; left:0; right:0; top:50%; margin-top:-70px; height:140px;
  border-radius:calc(var(--ui-radius)*2); background:#FFFFFF;
  box-shadow:0 14px 40px rgba(12,20,36,.14), 0 0 0 1px rgba(190,184,173,.5);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:4px;
  will-change:transform; backface-visibility:hidden;
}
.v7xp b{font-size:var(--vt-t-body-lg); color:var(--vt-ink-max)}
.v7xp span{font-size:var(--vt-t-small); color:var(--vt-ink-muted)}
.v7xp--data{background:#16223D}
.v7xp--data b{color:#FFFFFF}
.v7xp--data span{color:#8FA3C8}
.v7xlbl{position:absolute; right:-10px; font-size:.6875rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent); opacity:0; transition:opacity var(--vt-d-base) var(--vt-e-mechanical)}
.v7xtick{position:absolute; left:50%; bottom:6vh; transform:translateX(-50%); font-size:1.5rem;
  color:var(--vt-validated); opacity:0}

/* ── SCENE 10 · physical video ── */
.v7phys{height:320vh; background:#0A1120}
.v7phys video,.v7phys .v7phys__poster{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.85}
.v7phys .scene__stage{justify-content:flex-end; padding-bottom:8vh}
.v7chips{position:absolute; top:14vh; right:var(--vt-grid-margin); display:grid; gap:10px; z-index:2}
.v7chip{
  display:flex; gap:14px; justify-content:space-between; min-width:210px;
  background:rgba(10,17,32,.72); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-radius:var(--ui-radius); padding:10px 14px; color:#C9D4E8; font-size:.8125rem;
  box-shadow:0 0 0 1px rgba(58,76,110,.5); opacity:0; transform:translateY(8px);
  transition:opacity var(--vt-d-base) var(--vt-e-mechanical), transform var(--vt-d-base) var(--vt-e-mechanical);
}
.v7chip.on{opacity:1; transform:none}
.v7chip b{color:#7BE0A2; font-variant-numeric:tabular-nums}
.v7phys__line{position:relative; z-index:2; text-align:left; max-width:var(--vt-grid-max);
  margin:0 auto; width:100%; padding:0 var(--vt-grid-margin)}
.v7phys__line h2{font-family:var(--vt-font-serif); font-weight:600; color:#FFFFFF;
  font-size:clamp(1.8rem,3.6vw,3rem); text-shadow:0 2px 24px rgba(0,0,0,.6)}

/* ── SCENE 12 · honest tables ── */
.v7table{width:100%; border-collapse:collapse; font-size:var(--vt-t-body)}
.v7table th{font-family:var(--vt-font-serif); font-weight:600; font-size:var(--vt-t-body-lg);
  text-align:left; color:var(--vt-ink-max); padding:14px 16px; border-bottom:2px solid var(--vt-ink-max)}
.v7table td{padding:13px 16px; border-bottom:1px solid var(--vt-line); color:var(--vt-ink); vertical-align:top}
.v7table td:first-child{color:var(--vt-ink-muted); width:26%}
.v7table tr td b{color:var(--vt-ink-max)}
.v7price td:last-child{text-align:right; font-weight:700; color:var(--vt-ink-max); white-space:nowrap}
.v7price td:last-child small{display:block; font-weight:400; color:var(--vt-ink-faint); font-size:.6875rem}

/* ── SCENE 14 · final CTA + magnetic ── */
.v7cta{background:var(--vt-paper); padding:var(--vt-s-12) 0; text-align:left}
.v7cta::before{content:""; display:block; width:64px; height:2px; background:var(--vt-bronze-bright);
  margin:0 auto var(--vt-s-7); margin-left:var(--vt-grid-margin)}
.v7cta h2{font-family:var(--vt-font-serif); font-weight:600; letter-spacing:-.02em;
  font-size:clamp(2.2rem,5.4vw,4.2rem); color:var(--vt-ink-max); max-width:16ch}
.v7cta p{margin:var(--vt-s-5) 0 var(--vt-s-6); color:var(--vt-ink); max-width:46ch; font-size:var(--vt-t-body-lg)}
.v7mag{display:inline-block; will-change:transform}

/* ═══════════ reduced-motion / still mode ═══════════ */
@media (prefers-reduced-motion:reduce){
  .seq{height:auto}
  .seq__stage{position:static; height:auto; padding:var(--vt-s-9) 0}
  .scrub{height:auto}
  .scrub__stage{position:static; height:auto; min-height:60vh}
  .draft{transform:none}
}
.mode-still .seq{height:auto}
.mode-still .seq__stage{position:static; height:auto; padding:var(--vt-s-9) 0}
.mode-still .scrub{height:auto}
.mode-still .scrub__stage{position:static; height:auto; min-height:60vh}

/* ═══════════ CLIENT PORTAL LINK (nav, before the CTA) ═══════════ */
.nav__portal{
  font-size:var(--vt-t-small); color:var(--vt-ink); text-decoration:none;
  margin-left:var(--vt-s-6); padding:6px 2px; white-space:nowrap;
}
@media (hover:hover) and (pointer:fine){ .nav__portal:hover{color:var(--vt-ink-max)} }
@media (max-width:1279px){ .nav__portal{display:none} }

/* ═══════════ PORTAL GUIDE (/portal-guide/) ═══════════ */
.gd-toc{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:var(--vt-s-6)}
@media (max-width:820px){ .gd-toc{grid-template-columns:1fr} }
.gd-toc a{display:block; background:#fff; border:1px solid var(--vt-line); border-radius:var(--ui-radius);
  padding:18px 20px; text-decoration:none; transition:border-color var(--vt-d-quick) var(--vt-e-mechanical)}
@media (hover:hover) and (pointer:fine){ .gd-toc a:hover{border-color:var(--vt-bronze)} }
.gd-toc .k{font-family:var(--vt-font-mono); font-size:var(--vt-t-micro); letter-spacing:.12em;
  text-transform:uppercase; color:var(--vt-bronze)}
.gd-toc b{display:block; margin-top:4px; color:var(--vt-ink-max); font-size:var(--vt-t-body-lg)}
.gd-toc span{display:block; margin-top:3px; color:var(--vt-ink-muted); font-size:var(--vt-t-small)}
.gd-part{margin-top:var(--vt-s-9); padding-top:var(--vt-s-6); border-top:2px solid var(--vt-ink-max)}
.gd-part>h2{font-size:var(--vt-t-h3); font-weight:800; letter-spacing:-.02em; margin:0}
.gd-part>.gd-aud{font-family:var(--vt-font-mono); font-size:var(--vt-t-micro); letter-spacing:.12em;
  text-transform:uppercase; color:var(--vt-bronze); display:block; margin-bottom:8px}
.gd-recipe{margin-top:var(--vt-s-7)}
.gd-recipe h3{font-size:var(--vt-t-h5); font-weight:700; margin:0 0 4px}
.gd-recipe h3 .n{font-family:var(--vt-font-mono); font-size:.72em; color:var(--vt-bronze); margin-right:10px}
.gd-lead{color:var(--vt-ink-muted); font-size:var(--vt-t-small); max-width:64ch; margin:0 0 10px}
.gd-steps{list-style:none; margin:12px 0 0; padding:0; counter-reset:gd; display:grid; gap:10px}
.gd-steps>li{counter-increment:gd; position:relative; background:#fff; border:1px solid var(--vt-line);
  border-radius:var(--ui-radius); padding:13px 18px 13px 54px; max-width:76ch; font-size:var(--vt-t-body)}
.gd-steps>li::before{content:counter(gd); position:absolute; left:14px; top:12px; width:26px; height:26px;
  display:grid; place-items:center; background:var(--vt-navy-ink,#0C1424); color:#FBFAF7;
  font-size:12px; font-weight:700; border-radius:7px}
.gd-steps ul{margin:8px 0 0; padding-left:18px}
.gd-steps ul li{margin-top:4px}
.gd-v1c{display:inline-block; background:rgba(192,131,67,.15); color:#8F5A1C; font-family:var(--vt-font-mono);
  font-size:10px; letter-spacing:.1em; border-radius:5px; padding:2px 7px; vertical-align:1px}
.gd-callout{background:rgba(192,131,67,.12); border-radius:var(--ui-radius); padding:14px 18px;
  margin-top:14px; max-width:72ch; font-size:var(--vt-t-small)}
.gd-tbl{overflow-x:auto; margin-top:12px}
.gd-tbl table{border-collapse:collapse; font-size:var(--vt-t-small); min-width:440px}
.gd-tbl th,.gd-tbl td{text-align:left; padding:9px 16px; border-bottom:1px solid var(--vt-line)}
.gd-tbl th{font-family:var(--vt-font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--vt-ink-muted)}
.gd-yes{color:#4E6B2E; font-weight:700}
.gd-no{color:var(--vt-ink-muted)}
.gd-grant{color:#96660A; font-weight:600}
.gd-steps pre{background:#F1EFE8; border-radius:8px; padding:12px 14px; overflow-x:auto;
  font-size:13px; margin:8px 0 0}
.gd-steps kbd,.gd-recipe code{font-family:var(--vt-font-mono); font-size:.85em; background:#F1EFE8;
  border-radius:5px; padding:1px 6px}

/* ═══════════ MOBILE MENU ═══════════ */
.nav__burger{display:none; margin-left:10px; width:44px; height:44px; flex:none;
  background:none; border:0; cursor:pointer; padding:10px;
  flex-direction:column; justify-content:center; gap:5px; border-radius:8px}
.nav__burger span{display:block; height:2px; width:100%; background:var(--vt-ink-max);
  border-radius:2px; transition:transform .22s var(--vt-e-mechanical), opacity .18s}
.nav--overlay .nav__burger span{background:#F2F4F6}
.nav__burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__burger.is-open span:nth-child(2){opacity:0}
.nav__burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:1279px){ .nav__burger{display:flex} }

.mnav{position:fixed; inset:0; top:64px; z-index:60; background:#0C1424;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  opacity:0; transform:translateY(-6px);
  transition:opacity .22s var(--vt-e-mechanical), transform .22s var(--vt-e-mechanical)}
.mnav.is-open{opacity:1; transform:none}
.mnav__links{display:flex; flex-direction:column; padding:18px 22px 40px}
.mnav__links a{color:#F2F4F6; text-decoration:none; font-size:19px; font-weight:600;
  padding:13px 6px; border-bottom:1px solid rgba(157,184,245,.12)}
.mnav__links a:active{color:#F2D8B4}
.mnav__group{font-family:var(--vt-font-mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:#C08343; padding:18px 6px 6px}
.mnav__links a.mnav__sub{font-size:16px; font-weight:500; color:#9DB8F5; padding-left:18px}
.mnav__links a.mnav__cta{margin-top:22px; border:0; background:#F2F4F6; color:#0C1424;
  text-align:center; border-radius:8px; padding:15px 18px; font-size:17px}
html.mnav-lock, html.mnav-lock body{overflow:hidden}
@media (min-width:1280px){ .mnav{display:none} }
@media (prefers-reduced-motion:reduce){ .mnav{transition:none} .nav__burger span{transition:none} }

/* ═══════════ MOBILE HARDENING ═══════════ */
@media (max-width:1023px){
  html,body{overflow-x:clip}
  .nav__in{gap:10px}
  .btn--nav{margin-left:auto}
  .tp__bg{overflow:clip}
}
@media (max-width:900px){
  /* inline grid-template-columns on .tl instances must not win on phones */
  .tl{grid-template-columns:1fr !important; gap:var(--vt-s-5)}
}

/* the row breathes a little tighter on smaller desktops */
@media (max-width:1439px){ .nav__in{gap:18px} }
@media (max-width:359px){ .mark__type{font-size:.7rem} .mark__sub{font-size:.48rem} .nav__in{padding:0 12px; gap:6px} .btn--nav{padding:8px 12px} }

/* phones: clear air between the navy stat band and the carousel cards */
@media (max-width:767px){
  .stat-strip{padding:var(--vt-s-8) 0}
  .carousel{margin-top:42px; margin-bottom:14px}
}