/* ============================================================================
   ViceForge static-preview stylesheet — "Monolith", instrument grade.
   Mirrors src/app/globals.css + Tailwind usage in the TSX pages.
   Previews are dark-only; the app is light-capable.

   BRAND LAW (unchanged): base tokens below. Derived tokens are computed from
   base tokens only (color-mix) — documented in CHANGES.md.
   Teal = measured/verified claims ONLY. Ember = action/emphasis, sparingly.
   ========================================================================== */

:root {
  /* --- base tokens (brand law — do not edit) --- */
  --vf-bg: #0b0e13;
  --vf-surface: #141a23;
  --vf-surface-2: #1b2330;
  --vf-accent: #ff5f3d;
  --vf-teal: #2ed3b7;
  --vf-text: #e8ecf1;
  --vf-text-2: #8a94a6;
  --vf-line: rgba(232, 236, 241, 0.08);
  --vf-line-strong: rgba(232, 236, 241, 0.16);
  --vf-danger: #ff4d5e;
  --vf-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* --- derived tokens (new; computed from base only) --- */
  --vf-line-hair: rgba(232, 236, 241, 0.05);          /* fainter than --vf-line */
  --vf-ember-06: color-mix(in srgb, var(--vf-accent) 6%, transparent);
  --vf-ember-14: color-mix(in srgb, var(--vf-accent) 14%, transparent);
  --vf-ember-45: color-mix(in srgb, var(--vf-accent) 45%, transparent);
  --vf-teal-12: color-mix(in srgb, var(--vf-teal) 12%, transparent);
  --vf-teal-40: color-mix(in srgb, var(--vf-teal) 40%, transparent);
  --vf-glass: color-mix(in srgb, var(--vf-bg) 78%, transparent);
  --vf-ink: color-mix(in srgb, var(--vf-bg) 45%, black);   /* hero depth floor */
  --vf-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --vf-ease-swift: cubic-bezier(0.65, 0.05, 0.36, 1);
}

/* ============================== base ==================================== */

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; color-scheme: dark; }
body {
  background: var(--vf-bg);
  color: var(--vf-text);
  font-family: "Inter", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
::selection { background: var(--vf-accent); color: var(--vf-bg); }
:focus-visible { outline: 2px solid var(--vf-accent); outline-offset: 3px; border-radius: 2px; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; color: inherit; background: none; border: 0; }
ul { list-style: none; }

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

/* ============================== header ================================== */

.vf-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: 72px;
  border-bottom: 1px solid transparent;
  transition: background-color .35s var(--vf-ease), border-color .35s var(--vf-ease);
}
.vf-header[data-scrolled="true"] {
  background: var(--vf-glass);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-bottom-color: var(--vf-line);
}
.vf-header .wrap { height: 72px; display: flex; align-items: center; justify-content: space-between; }
.nav { display: flex; align-items: center; gap: 28px; }
.nav a {
  position: relative;
  font-size: 13.5px; font-weight: 500; letter-spacing: .02em; color: var(--vf-text-2);
  padding: 6px 0;
  background: linear-gradient(currentColor, currentColor) left calc(100% - 2px) / 0% 1px no-repeat;
  transition: color .25s var(--vf-ease), background-size .35s var(--vf-ease);
}
.nav a:hover { color: var(--vf-text); background-size: 100% 1px; }
.nav a[aria-current="page"] { color: var(--vf-text); background-size: 100% 1px; background-image: linear-gradient(var(--vf-accent), var(--vf-accent)); }
.nav .cart {
  color: var(--vf-text); border: 1px solid var(--vf-line-strong);
  border-radius: 8px; padding: 9px 18px; background: none;
  transition: border-color .25s var(--vf-ease), color .25s var(--vf-ease), background-color .25s var(--vf-ease), transform .2s var(--vf-ease);
}
.nav .cart:hover { border-color: var(--vf-ember-45); color: var(--vf-accent); background: var(--vf-ember-06); }
.nav .cart:active { transform: scale(.97); }
main { padding-top: 72px; }

/* ============================ type system ================================ */

.wordmark { font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.wordmark .v { color: var(--vf-accent); }
.display {
  font-weight: 800; text-transform: uppercase; letter-spacing: -.02em;
  line-height: .95; text-wrap: balance;
}
.display-hero { font-size: clamp(46px, 9vw, 138px); letter-spacing: -.025em; }
.display-section { font-size: clamp(30px, 4.6vw, 66px); }
.kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--vf-text-2);
}
.kicker::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--vf-accent); flex: none; }
.index { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; color: var(--vf-text-2); }
.label {
  font-size: 11px; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: var(--vf-text-2);
}
.muted { color: var(--vf-text-2); }
.mono { font-family: var(--mono); }

/* struck anchor price — ceremonial sweep when revealed (fallback: plain strike) */
.strike { text-decoration: line-through; text-decoration-color: var(--vf-accent); text-decoration-thickness: 1px; color: var(--vf-text-2); }
.js .strike { text-decoration: none; position: relative; }
.js .strike::after {
  content: ""; position: absolute; left: -3px; right: -3px; top: calc(50% - .5px); height: 1px;
  background: var(--vf-accent);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .7s var(--vf-ease) calc(var(--rv-d, 0s) + .4s);
}
.js .is-in .strike::after, .js .strike.is-in::after { transform: scaleX(1); }

/* section header row: kicker — drawn hairline — index */
.krow { display: flex; align-items: center; gap: 20px; margin-bottom: 28px; }
.krow .kline { flex: 1; height: 1px; background: var(--vf-line); transform: scaleX(0); transform-origin: left center; transition: transform 1.1s var(--vf-ease) .15s; }
.krow.is-in .kline, html:not(.js) .krow .kline { transform: scaleX(1); }
.krow .kicker { flex: none; }
.krow .index { flex: none; }

/* ============================== sections ================================= */

section { border-bottom: 1px solid var(--vf-line); }
section:last-of-type { border-bottom: 0; }
.sec   { padding: clamp(64px, 9vw, 104px) 24px; }
.sec-t { padding: clamp(48px, 7vw, 72px) 24px; }   /* tight — clustered info */
.sec-x { padding: clamp(88px, 12vw, 152px) 24px; } /* expansive — the moments */

/* ============================== hero ===================================== */

.hero-sec { position: relative; overflow: clip; }
.sec-hero {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; justify-content: center;
  min-height: min(820px, calc(100vh - 72px));
  min-height: min(820px, calc(100svh - 72px));
  padding: clamp(72px, 10vw, 120px) 24px clamp(88px, 11vw, 136px);
}
.hero-atmo { position: absolute; inset: 0; pointer-events: none; }
.hero-atmo > * { position: absolute; }

/* blueprint grid, radially masked toward the type */
.atmo-grid {
  inset: 0;
  background:
    linear-gradient(var(--vf-line-hair) 1px, transparent 1px) 0 -1px / 100% 88px,
    linear-gradient(90deg, var(--vf-line-hair) 1px, transparent 1px) -1px 0 / 88px 100%,
    linear-gradient(90deg, var(--vf-line) 1px, transparent 1px) -1px 0 / 352px 100%;
  -webkit-mask-image: radial-gradient(1100px 700px at 68% 34%, rgba(0,0,0,.95), transparent 78%);
          mask-image: radial-gradient(1100px 700px at 68% 34%, rgba(0,0,0,.95), transparent 78%);
}
/* forge-ember bloom + tonal counterweight (drifts very slowly) */
.atmo-bloom {
  top: -22%; right: -12%; width: min(920px, 80vw); height: min(920px, 80vw); border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, var(--vf-ember-14), transparent 62%);
  animation: bloom-drift 44s var(--vf-ease-out) infinite alternate;
}
.atmo-depth {
  left: -18%; bottom: -34%; width: min(880px, 90vw); height: min(880px, 90vw); border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--vf-surface-2) 55%, transparent), transparent 66%);
}
@keyframes bloom-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-3.5%, 4%, 0) scale(1.07); }
}
/* calibration ruler along the top edge */
.atmo-ruler {
  top: 0; left: 0; right: 0; height: 14px; opacity: .85;
  background:
    repeating-linear-gradient(90deg, var(--vf-line) 0 1px, transparent 1px 22px) top / 100% 6px no-repeat,
    repeating-linear-gradient(90deg, var(--vf-line-strong) 0 1px, transparent 1px 176px) top / 100% 13px no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
/* registration crosshairs */
.atmo-cross { width: 22px; height: 22px; opacity: .55; }
.atmo-cross::before, .atmo-cross::after { content: ""; position: absolute; background: var(--vf-line-strong); }
.atmo-cross::before { left: 0; right: 0; top: 50%; height: 1px; }
.atmo-cross::after { top: 0; bottom: 0; left: 50%; width: 1px; }
.atmo-cross.c1 { left: 11%; top: 21%; }
.atmo-cross.c2 { right: 14%; bottom: 24%; }
/* one slow surveyor scanline */
.atmo-scan {
  top: 0; bottom: 0; left: 0; width: 1px; opacity: 0;
  background: linear-gradient(180deg, transparent 4%, var(--vf-ember-45) 38%, var(--vf-ember-45) 62%, transparent 96%);
  animation: scan-x 30s linear infinite;
}
@keyframes scan-x {
  0%   { transform: translateX(4vw); opacity: 0; }
  6%   { opacity: .5; }
  94%  { opacity: .5; }
  100% { transform: translateX(96vw); opacity: 0; }
}
/* hero settles into the page */
.atmo-fade { left: 0; right: 0; bottom: 0; height: 180px; background: linear-gradient(180deg, transparent, var(--vf-bg)); }

/* masked line reveal for the colossal type */
.rv-lines .hl { display: block; overflow: hidden; }
.rv-lines .hl-in { display: block; }
.js .rv-lines .hl-in { transform: translateY(112%); transition: transform 1s var(--vf-ease-out); }
.js .rv-lines .hl:nth-child(2) .hl-in { transition-delay: .1s; }
.js .rv-lines .hl:nth-child(3) .hl-in { transition-delay: .2s; }
.js .rv-lines.is-in .hl-in { transform: none; }
.dot-a { color: var(--vf-accent); }

/* proof strip under the hero CTAs */
.hero-strip {
  margin-top: clamp(56px, 8vw, 96px); overflow: hidden; padding: 13px 0;
  border-top: 1px solid var(--vf-line); border-bottom: 1px solid var(--vf-line);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.strip-track { display: flex; width: max-content; animation: strip-x 90s linear infinite; }
.hero-strip:hover .strip-track { animation-play-state: paused; }
.strip-track p, .hero-strip p {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .22em;
  color: var(--vf-text-2); text-transform: uppercase; white-space: nowrap; margin-right: 96px;
}
@keyframes strip-x { to { transform: translateX(calc(-100% / 3)); } }

/* ========================= buttons + links =============================== */

.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 8px; padding: 14px 26px;
  font-size: 14px; font-weight: 600; letter-spacing: .01em; border: 0;
  background: var(--vf-accent); color: var(--vf-bg);
  transition: background-color .25s var(--vf-ease), color .25s var(--vf-ease), transform .22s var(--vf-ease);
}
.btn:hover { background: var(--vf-text); transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-ghost { background: transparent; color: var(--vf-text); border: 1px solid var(--vf-line-strong); }
.btn-ghost:hover { border-color: var(--vf-ember-45); color: var(--vf-accent); background: var(--vf-ember-06); transform: translateY(-1px); }

/* inline text link — ember, underline slides in */
.tlink {
  color: var(--vf-accent); font-weight: 500;
  background: linear-gradient(currentColor, currentColor) left calc(100% - 1px) / 0% 1px no-repeat;
  transition: background-size .35s var(--vf-ease);
}
.tlink:hover { background-size: 100% 1px; }

/* quiet link (footer, body links) */
.qlink { color: var(--vf-text-2); transition: color .25s var(--vf-ease); }
.qlink:hover { color: var(--vf-text); }

/* ===================== badges · stamps · receipts ======================== */

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--vf-line-strong); border-radius: 8px;
  padding: 4px 9px; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--vf-text-2);
}
.badge.mono { font-family: var(--mono); }
.badge.verified { border-color: var(--vf-teal-40); color: var(--vf-teal); }
.badge.pending { border-color: var(--vf-line); color: var(--vf-text-2); }
.badge.accent { border-color: var(--vf-ember-45); color: var(--vf-accent); }

/* dated seal for measured claims — teal only, ceremonial */
.stamp {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--vf-teal); border: 1px solid var(--vf-teal-40); border-radius: 8px; padding: 3px 8px;
  background: var(--vf-teal-12);
}
.stamp::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--vf-teal); box-shadow: 0 0 8px var(--vf-teal-40); flex: none; }

/* stacked receipt list — replaces badges-in-a-row on product cards */
.rlist { margin-top: 22px; border-top: 1px solid var(--vf-line); }
.rrow {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 1px; border-bottom: 1px solid var(--vf-line);
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; color: var(--vf-text-2);
}
.rrow .rdot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: transparent; }
.rrow.ok { color: var(--vf-teal); }
.rrow.ok .rdot { background: var(--vf-teal); box-shadow: 0 0 8px var(--vf-teal-40); }
.rrow.pend .rdot { border: 1px solid var(--vf-text-2); }
.rrow.info .rdot { width: 8px; height: 1px; border-radius: 0; background: var(--vf-text-2); opacity: .7; }

/* ========================= cards · plates ================================ */

.card {
  position: relative;
  background: var(--vf-surface); border: 1px solid var(--vf-line);
  border-radius: 8px; padding: 28px;
}
.card.elevated { background: var(--vf-surface-2); }
.card.ghosted { background: transparent; border-style: dashed; }
.grid { display: grid; gap: 16px; }
@media (min-width: 768px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}

/* corner registration ticks for featured plates */
.ticks { position: relative; }
.ticks::before {
  content: ""; position: absolute; inset: 10px; pointer-events: none; opacity: .9;
  background:
    linear-gradient(var(--vf-line-strong), var(--vf-line-strong)) top left / 12px 1px,
    linear-gradient(var(--vf-line-strong), var(--vf-line-strong)) top left / 1px 12px,
    linear-gradient(var(--vf-line-strong), var(--vf-line-strong)) top right / 12px 1px,
    linear-gradient(var(--vf-line-strong), var(--vf-line-strong)) top right / 1px 12px,
    linear-gradient(var(--vf-line-strong), var(--vf-line-strong)) bottom left / 12px 1px,
    linear-gradient(var(--vf-line-strong), var(--vf-line-strong)) bottom left / 1px 12px,
    linear-gradient(var(--vf-line-strong), var(--vf-line-strong)) bottom right / 12px 1px,
    linear-gradient(var(--vf-line-strong), var(--vf-line-strong)) bottom right / 1px 12px;
  background-repeat: no-repeat;
}

/* ============================ product card =============================== */

.pcard {
  position: relative; display: flex; flex-direction: column; height: 100%;
  background: var(--vf-surface); border: 1px solid var(--vf-line); border-radius: 8px;
  padding: 26px 26px 22px; overflow: hidden;
  transition: border-color .3s var(--vf-ease), transform .35s var(--vf-ease-out);
}
.pcard:hover, .pcard:focus-visible { border-color: var(--vf-line-strong); transform: translateY(-3px); }
.pcard:focus-visible { outline-offset: 4px; }
/* ember glint along the top edge */
.pcard::before {
  content: ""; position: absolute; top: 0; left: 7%; right: 7%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--vf-ember-45), transparent);
  opacity: 0; transform: scaleX(.55);
  transition: opacity .4s var(--vf-ease), transform .5s var(--vf-ease);
}
.pcard:hover::before, .pcard:focus-visible::before { opacity: 1; transform: scaleX(1); }
/* pointer-tracked ember glow (positioned via transform only; JS sets --gx/--gy) */
.pcard .glow { position: absolute; inset: 0; overflow: hidden; opacity: 0; transition: opacity .45s var(--vf-ease); pointer-events: none; }
.pcard .glow::before {
  content: ""; position: absolute; left: -190px; top: -190px; width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(circle, var(--vf-ember-06) 0%, transparent 68%);
  transform: translate(var(--gx, 55%), var(--gy, 20%));
}
.pcard:hover .glow { opacity: 1; }
.pcard > * { position: relative; }
.pcard .top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pcard .ptitle { margin-top: 22px; font-size: 23px; letter-spacing: -.01em; }
.pcard .pitch { margin-top: 12px; font-size: 13.5px; line-height: 1.65; color: var(--vf-text-2); max-width: 42ch; }
.pcard .rlist { margin-top: auto; padding-top: 20px; border-top: 0; }
.pcard .rlist .rrow:first-child { border-top: 1px solid var(--vf-line); }
.pcard .foot {
  padding-top: 16px; display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
}
.pcard .price { font-family: var(--mono); font-size: 15px; color: var(--vf-text); }
.pcard .go {
  font-size: 13px; font-weight: 500; color: var(--vf-accent);
  transition: transform .3s var(--vf-ease);
}
.pcard:hover .go { transform: translateX(4px); }

/* ===================== trust triad — the instrument ====================== */

.instrument {
  position: relative; border: 1px solid var(--vf-line-strong); border-radius: 8px;
  background: var(--vf-surface); overflow: hidden;
}
/* calibrated ruler across the top of the panel */
.instrument .iruler {
  position: relative; overflow: hidden;
  height: 14px; border-bottom: 1px solid var(--vf-line);
  background:
    repeating-linear-gradient(90deg, var(--vf-line) 0 1px, transparent 1px 18px) bottom / 100% 6px no-repeat,
    repeating-linear-gradient(90deg, var(--vf-line-strong) 0 1px, transparent 1px 144px) bottom / 100% 11px no-repeat;
}
.icols { display: grid; }
@media (min-width: 960px) { .icols { grid-template-columns: 1.25fr 1fr 1fr; } }
.icol { padding: 26px 28px 30px; }
@media (min-width: 960px) { .icol + .icol { border-left: 1px solid var(--vf-line); } }
@media (max-width: 959.5px) { .icol + .icol { border-top: 1px solid var(--vf-line); } }
.ihead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.ihead .label { color: var(--vf-text); }
.iled { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.iled.ok { background: var(--vf-teal); box-shadow: 0 0 10px var(--vf-teal-40); }
.iled.dim { border: 1px solid var(--vf-text-2); }

/* readout rows */
.iro { padding: 12px 0 13px; border-top: 1px solid var(--vf-line); display: grid; gap: 6px; }
.iro:first-of-type { border-top: 0; margin-top: 8px; }
.iro-k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--vf-text-2); }
.iro-v { font-family: var(--mono); font-size: 13px; line-height: 1.6; color: var(--vf-text); }
.iro-d { margin-top: 2px; }
/* measured — teal, with a ceremonial sweep under the value */
.iro.ok .iro-v { color: var(--vf-teal); position: relative; padding-bottom: 7px; }
.iro.ok .iro-v::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; max-width: 210px; height: 1px;
  background: linear-gradient(90deg, var(--vf-teal-40), transparent);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .9s var(--vf-ease) .55s;
}
.is-in .iro.ok .iro-v::after, html:not(.js) .iro.ok .iro-v::after { transform: scaleX(1); }
/* pending — a reserved, deliberate slot. honesty by design */
.iro.pend .iro-v {
  display: inline-block; color: var(--vf-text-2); font-size: 12px; letter-spacing: .06em;
  border: 1px dashed var(--vf-line-strong); border-radius: 8px; padding: 6px 12px;
  background: repeating-linear-gradient(-45deg, transparent 0 7px, var(--vf-line-hair) 7px 8px);
}

/* compat ticks (inside instrument + compatibility section) */
.tickrow { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.tick {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .05em; color: var(--vf-teal);
}
.tick::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--vf-teal); box-shadow: 0 0 7px var(--vf-teal-40); flex: none; }

/* escrow manifest */
.mhead { margin: 18px 0 2px; }
.mhead:first-of-type { margin-top: 14px; }
.mrow {
  display: flex; gap: 12px; align-items: baseline;
  padding: 8px 0; border-top: 1px solid var(--vf-line);
  font-family: var(--mono); font-size: 12px; line-height: 1.55; color: var(--vf-text-2);
}
.mrow:first-of-type { border-top: 0; }
.mrow .mg { flex: none; width: 12px; text-align: center; font-size: 11px; color: var(--vf-text-2); }
.mrow.lock { color: var(--vf-text); }
.mrow.lock .mg { color: var(--vf-text); }

/* SLA readouts */
.sla-big { font-family: var(--mono); font-size: 27px; font-weight: 500; color: var(--vf-text); letter-spacing: -.01em; }
.iro .plain { font-family: "Inter", system-ui, sans-serif; font-size: 13.5px; color: var(--vf-text-2); line-height: 1.6; }

/* footnotes inside instrumentation */
.inote { margin-top: 16px; font-family: var(--mono); font-size: 11px; line-height: 1.8; color: var(--vf-text-2); }
.isub { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--vf-line); }

/* legacy triad support (pre-elevation markup) */
.triad { display: grid; gap: 16px; }
@media (min-width: 768px) { .triad { grid-template-columns: repeat(3, 1fr); } }
.triad .card .stack { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.triad .sub { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--vf-line); }
.triad ul { font-size: 14px; color: var(--vf-text-2); display: grid; gap: 8px; }

/* ==================== media slot — honest, instrumented ================== */

.media {
  position: relative; overflow: hidden; border: 1px solid var(--vf-line);
  border-radius: 8px; background: var(--vf-surface); aspect-ratio: 16/9;
  display: flex; align-items: center; justify-content: center;
  background-image: repeating-linear-gradient(-45deg, transparent 0 26px, var(--vf-line-hair) 26px 27px);
}
/* center reticle */
.media::before {
  content: ""; position: absolute; left: 50%; top: 34%; transform: translate(-50%, -50%);
  width: 64px; height: 64px; border-radius: 50%;
  border: 1px solid var(--vf-line-strong);
  background:
    linear-gradient(var(--vf-line-strong), var(--vf-line-strong)) center / 100% 1px,
    linear-gradient(var(--vf-line-strong), var(--vf-line-strong)) center / 1px 100%;
  background-repeat: no-repeat; opacity: .8;
}
/* corner ticks */
.media::after {
  content: ""; position: absolute; inset: 12px; pointer-events: none;
  background:
    linear-gradient(var(--vf-line-strong), var(--vf-line-strong)) top left / 10px 1px,
    linear-gradient(var(--vf-line-strong), var(--vf-line-strong)) top left / 1px 10px,
    linear-gradient(var(--vf-line-strong), var(--vf-line-strong)) bottom right / 10px 1px,
    linear-gradient(var(--vf-line-strong), var(--vf-line-strong)) bottom right / 1px 10px,
    linear-gradient(var(--vf-line-strong), var(--vf-line-strong)) bottom left / 10px 1px,
    linear-gradient(var(--vf-line-strong), var(--vf-line-strong)) bottom left / 1px 10px;
  background-repeat: no-repeat;
}
.media p {
  position: relative; z-index: 1; max-width: 340px; padding: 96px 24px 0; text-align: center;
  font-family: var(--mono); font-size: 11.5px; line-height: 1.8; color: var(--vf-text-2);
}
.media .credit {
  position: absolute; top: 14px; right: 16px; z-index: 1;
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--vf-text-2);
}

/* =========================== feature rows ================================ */

.frow {
  display: flex; gap: 18px; border-top: 1px solid var(--vf-line); padding: 18px 0 4px;
  transition: transform .35s var(--vf-ease-out);
}
.frow .index { padding-top: 4px; flex: none; width: 26px; transition: color .3s var(--vf-ease); }
.frow p { font-size: 15px; line-height: 1.6; }
.frow:hover { transform: translateX(6px); }
.frow:hover .index { color: var(--vf-accent); }

/* ================= bundle ledger — staged anchor economics =============== */

.ledger { display: grid; gap: 24px; align-items: stretch; }
@media (min-width: 920px) { .ledger { grid-template-columns: minmax(0, 1.08fr) 64px minmax(0, 1fr); gap: 0; } }

.litems { border: 1px solid var(--vf-line); border-radius: 8px; background: var(--vf-surface); overflow: hidden; align-self: center; }
.lrow { display: flex; align-items: center; gap: 16px; padding: 19px 24px; border-bottom: 1px solid var(--vf-line); }
.lrow:last-child { border-bottom: 0; }
.lrow .lidx { flex: none; font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; color: var(--vf-text-2); }
.lrow .lname { font-size: 14.5px; font-weight: 500; color: var(--vf-text); background: linear-gradient(var(--vf-accent), var(--vf-accent)) left calc(100% - 1px) / 0% 1px no-repeat; transition: color .25s var(--vf-ease), background-size .35s var(--vf-ease); }
.lrow .lname:hover { color: var(--vf-accent); background-size: 100% 1px; }
.lrow .leader { flex: 1; border-bottom: 1px dotted var(--vf-line-strong); transform: translateY(-4px); min-width: 24px; }
.lrow .strike { font-family: var(--mono); font-size: 13.5px; }

/* the physical bracket: three singles funnel into one grant */
.lbracket { position: relative; display: none; }
@media (min-width: 920px) {
  .lbracket { display: block; }
  .lbracket::before {
    content: ""; position: absolute; left: 0; right: 50%; top: 26px; bottom: 26px;
    border: 1px solid var(--vf-line-strong); border-left: 0; border-radius: 0 8px 8px 0;
  }
  .lbracket::after {
    content: ""; position: absolute; left: 50%; right: -1px; top: calc(50% - .5px); height: 1px;
    background: var(--vf-line-strong);
  }
  .lbracket .node {
    position: absolute; left: calc(50% - 3px); top: calc(50% - 3px); width: 6px; height: 6px;
    border-radius: 50%; background: var(--vf-accent);
  }
}
/* mobile connector */
.ljoin { display: flex; justify-content: center; }
.ljoin span { width: 1px; height: 32px; background: var(--vf-line-strong); display: block; }
@media (min-width: 920px) { .ljoin { display: none; } }

.ltotal {
  background: var(--vf-surface-2); border: 1px solid var(--vf-line-strong); border-radius: 8px;
  padding: clamp(28px, 4vw, 40px); display: flex; flex-direction: column; justify-content: center; gap: 6px;
}
.ltotal .lprice { font-family: var(--mono); font-size: clamp(30px, 3.4vw, 40px); color: var(--vf-text); letter-spacing: -.01em; margin-top: 10px; }
.ltotal .lsave { font-size: 13.5px; line-height: 1.6; color: var(--vf-text-2); }
.ltotal .btn { align-self: flex-start; margin-top: 22px; }

/* legacy anchor support (pre-elevation markup) */
.anchor { border: 1px solid var(--vf-line); border-radius: 8px; overflow: hidden; }
.anchor .row { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--vf-surface); padding: 16px 24px; border-bottom: 1px solid var(--vf-line); }
.anchor .total { background: var(--vf-surface-2); padding: 24px; border-bottom: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }

/* ========================= changelog rail ================================ */

.clog { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--vf-line); padding-top: 20px; }

/* ===================== signal console + forms ============================ */

.console { position: relative; overflow: hidden; }
.console .beam {
  position: absolute; top: 0; left: 8%; right: 8%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--vf-ember-45), transparent);
}
.field {
  width: 100%; border-radius: 8px; padding: 14px 16px; font-size: 14px;
  background: var(--vf-bg); border: 1px solid var(--vf-line-strong); color: var(--vf-text);
  transition: border-color .25s var(--vf-ease), box-shadow .25s var(--vf-ease);
}
.field::placeholder { color: var(--vf-text-2); font-family: var(--mono); font-size: 13px; letter-spacing: .02em; }
.field:focus { border-color: var(--vf-ember-45); outline: none; box-shadow: 0 0 0 3px var(--vf-ember-06); }
.formrow { display: flex; gap: 12px; flex-wrap: wrap; }
.status { min-height: 22px; margin-top: 10px; font-family: var(--mono); font-size: 12px; color: var(--vf-text-2); }
.status.err { color: var(--vf-danger); }

/* ============================== footer =================================== */

footer { border-top: 1px solid var(--vf-line); }
footer .inner { padding: clamp(56px, 8vw, 88px) 24px 40px; }
.foot-word { position: relative; display: inline-block; font-size: min(11vw, 132px); line-height: .95; }
.foot-word::after {
  content: ""; position: absolute; left: 3px; right: 6px; bottom: 2px; height: 2px;
  background: var(--vf-accent); transform: scaleX(0); transform-origin: left center;
  transition: transform .9s var(--vf-ease);
}
.foot-word:hover::after { transform: scaleX(1); }
.foot-cols { display: grid; gap: 32px; margin-top: 56px; font-size: 14px; }
@media (min-width: 640px) { .foot-cols { grid-template-columns: repeat(3, 1fr); } }
.foot-cols ul { display: grid; gap: 10px; color: var(--vf-text-2); }
.foot-cols a { color: var(--vf-text-2); background: linear-gradient(currentColor, currentColor) left calc(100% - 1px) / 0% 1px no-repeat; transition: color .25s var(--vf-ease), background-size .35s var(--vf-ease); }
.foot-cols a:hover { color: var(--vf-text); background-size: 100% 1px; }
.legal { margin-top: 56px; border-top: 1px solid var(--vf-line); padding-top: 24px; font-size: 12px; color: var(--vf-text-2); line-height: 1.8; max-width: 72ch; }

/* ================== film grain — static, never animates ================== */

.grain {
  position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}

/* ========================= filter chips (catalog) ======================== */

.fbtn {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid var(--vf-line-strong); border-radius: 8px; background: transparent;
  padding: 10px 18px; font-size: 13.5px; font-weight: 500; color: var(--vf-text-2);
  transition: color .22s var(--vf-ease), border-color .22s var(--vf-ease), background-color .22s var(--vf-ease), transform .2s var(--vf-ease);
}
.fbtn::before { content: ""; width: 5px; height: 5px; border-radius: 50%; border: 1px solid currentColor; background: transparent; flex: none; transition: background-color .2s var(--vf-ease); }
.fbtn:hover { color: var(--vf-text); border-color: var(--vf-text-2); }
.fbtn:active { transform: scale(.97); }
.fbtn[aria-pressed="true"] { color: var(--vf-accent); border-color: var(--vf-ember-45); background: var(--vf-ember-06); }
.fbtn[aria-pressed="true"]::before { background: var(--vf-accent); border-color: var(--vf-accent); }
.fhide { display: none !important; }

/* ========================= reveal choreography =========================== */
/* JS-gated so pages render complete without scripts. --rv-d staggers.       */

.js [data-rv] {
  opacity: 0; transform: translateY(18px);
  transition: opacity .8s var(--vf-ease) var(--rv-d, 0s), transform .8s var(--vf-ease) var(--rv-d, 0s);
}
.js [data-rv].is-in { opacity: 1; transform: none; }
.js [data-rv].rv-lines { opacity: 1; transform: none; } /* type masks its own lines */

/* ====================== preview ribbon (unchanged) ======================= */

.preview-note {
  position: fixed; bottom: 12px; left: 12px; z-index: 70;
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--vf-text-2); background: var(--vf-glass);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--vf-line); border-radius: 8px; padding: 6px 10px;
}

/* ===================== reduced motion — complete + calm ================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-rv] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .js .rv-lines .hl-in { transform: none !important; transition: none !important; }
  .krow .kline { transform: none !important; transition: none !important; }
  .js .strike::after { transform: scaleX(1) !important; transition: none !important; }
  .iro.ok .iro-v::after { transform: scaleX(1) !important; transition: none !important; }
  .atmo-bloom { animation: none !important; }
  .atmo-scan { display: none !important; }
  .pcard .glow { display: none !important; }
  .pcard, .pcard:hover, .frow, .frow:hover, .btn, .btn:hover, .go { transform: none !important; transition-duration: .01ms !important; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* ====================== small-viewport adjustments ======================= */

@media (max-width: 640px) {
  .krow { gap: 14px; }
  .icol { padding: 22px 20px 26px; }
  .lrow { padding: 16px 18px; }
  .nav { gap: 18px; }
  .hero-strip p { letter-spacing: .16em; }
}

/* ============================================================================
   ARTISTIC LAYER — calm instrumentation life. All token-derived, all
   transform/opacity, everything stilled under prefers-reduced-motion.
   ========================================================================== */

/* the hero is a survey field */
.hero-sec { cursor: crosshair; }
.atmo-px { position: absolute; inset: 0; will-change: transform; }
.atmo-px > * { position: absolute; }

/* surveyor dial — the home hero's signature instrument */
.dial { position: absolute; right: 3%; top: 6%; width: min(44vw, 520px); aspect-ratio: 1 / 1; opacity: .85; display: none; }
@media (min-width: 900px) { .dial { display: block; } }
.dial > * { position: absolute; }
.d-ring { border-radius: 50%; }
.d-ring.r1 { inset: 0; border: 1px solid var(--vf-line); }
.d-ring.r2 { inset: 11%; border: 1px dashed var(--vf-line-strong); animation: dial-spin-r 160s linear infinite; }
.d-ring.r3 { inset: 30%; border: 1px solid var(--vf-line); }
.d-ticks {
  inset: 4.5%; border-radius: 50%; opacity: .8;
  background: repeating-conic-gradient(var(--vf-line-strong) 0deg .5deg, transparent .5deg 6deg);
  -webkit-mask-image: radial-gradient(closest-side, transparent 90%, #000 91%, #000 98%, transparent 99%);
          mask-image: radial-gradient(closest-side, transparent 90%, #000 91%, #000 98%, transparent 99%);
  animation: dial-spin 240s linear infinite;
}
.d-arm { inset: 11%; border-radius: 50%; animation: dial-spin 90s linear infinite; }
.d-arm::before {
  content: ""; position: absolute; left: calc(50% - .5px); top: 0; width: 1px; height: 39%;
  background: linear-gradient(180deg, var(--vf-ember-45), transparent);
}
.d-arm i {
  position: absolute; left: calc(50% - 3px); top: -3px; width: 6px; height: 6px; border-radius: 50%;
  background: var(--vf-accent); box-shadow: 0 0 12px var(--vf-ember-45);
}
.d-core { left: calc(50% - 11px); top: calc(50% - 11px); width: 22px; height: 22px; }
.d-core::before, .d-core::after { content: ""; position: absolute; background: var(--vf-line-strong); }
.d-core::before { left: 0; right: 0; top: 50%; height: 1px; }
.d-core::after { top: 0; bottom: 0; left: 50%; width: 1px; }
@keyframes dial-spin { to { transform: rotate(360deg); } }
@keyframes dial-spin-r { to { transform: rotate(-360deg); } }

/* every kicker dot breathes — barely */
.kicker::before { animation: kdot 7s ease-in-out infinite; }
@keyframes kdot { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* ghost numerals on the protocol plates */
.gnum {
  position: absolute; top: 16px; right: 20px; pointer-events: none; user-select: none;
  font-family: var(--mono); font-weight: 500; font-size: 60px; line-height: 1; letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 1px var(--vf-line-strong);
}

/* half-bled geometric category watermarks on product cards */
.pcard .mark {
  position: absolute; right: -18px; top: 34%; width: 92px; height: 92px;
  border: 1px solid var(--vf-line-strong); opacity: .3; pointer-events: none;
  transition: opacity .5s var(--vf-ease), transform .9s var(--vf-ease);
}
.pcard .mark::before { content: ""; position: absolute; inset: 24%; border: 1px solid var(--vf-line-strong); }
.pcard .mark.crime { transform: rotate(45deg); }
.pcard .mark.free, .pcard .mark.free::before { border-radius: 50%; }
.pcard:hover .mark { opacity: .65; transform: rotate(10deg); }
.pcard:hover .mark.crime { transform: rotate(55deg); }
.pcard:hover .mark.free { transform: scale(1.1); }

/* instrument life: a sampling sweep along the panel ruler, LEDs breathe */
.instrument .iruler::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 130px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--vf-text) 7%, transparent), transparent);
  transform: translateX(-150px);
  animation: ruler-sweep 8s var(--vf-ease-swift) infinite;
}
@keyframes ruler-sweep { 0% { transform: translateX(-150px); } 60%, 100% { transform: translateX(1300px); } }
.iled.ok { animation: led 6s ease-in-out infinite; }
@keyframes led { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

/* bundle bracket node pings when the ledger reveals */
.lbracket .node::after {
  content: ""; position: absolute; inset: -7px; border: 1px solid var(--vf-accent);
  border-radius: 50%; opacity: 0; transform: scale(.35);
}
.ledger.is-in .lbracket .node::after { animation: ping 1.6s var(--vf-ease-out) .9s 3; }
@keyframes ping { 0% { opacity: .9; transform: scale(.35); } 100% { opacity: 0; transform: scale(1.7); } }

/* primary buttons carry a single forge-light pass on hover */
.btn::after {
  content: ""; position: absolute; top: -2px; bottom: -2px; left: -45%; width: 38%;
  background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--vf-text) 28%, transparent), transparent);
  transform: skewX(-14deg);
}
.btn:hover::after { transform: translateX(330%) skewX(-14deg); transition: transform .8s var(--vf-ease); }

/* media reticle turns to re-acquire on hover */
.media::before { transition: transform 1.1s var(--vf-ease); }
.media:hover::before { transform: translate(-50%, -50%) rotate(90deg); }

/* planned bundles materialize on hover */
.card.ghosted { transition: transform .35s var(--vf-ease-out); }
.card.ghosted::after {
  content: ""; position: absolute; inset: -1px; border: 1px solid var(--vf-line-strong);
  border-radius: 8px; opacity: 0; transition: opacity .4s var(--vf-ease); pointer-events: none;
}
.card.ghosted:hover { transform: translateY(-3px); }
.card.ghosted:hover::after { opacity: 1; }

/* fixed section rail — built by vf.js on pages with indexed sections */
.rail {
  position: fixed; right: 22px; top: 50%; transform: translateY(-50%); z-index: 55;
  display: none; flex-direction: column; gap: 14px;
}
@media (min-width: 1360px) { .rail { display: flex; } }
.rail a {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--vf-text-2);
  opacity: .6; transition: color .25s var(--vf-ease), opacity .25s var(--vf-ease);
}
.rail a::before { content: ""; width: 14px; height: 1px; background: currentColor; transition: width .3s var(--vf-ease); }
.rail a:hover { opacity: 1; color: var(--vf-text); }
.rail a.on { opacity: 1; color: var(--vf-accent); }
.rail a.on::before { width: 26px; }

/* artistic layer under reduced motion: still, single, complete */
@media (prefers-reduced-motion: reduce) {
  .strip-track { animation: none !important; }
  .strip-track p + p { display: none; }
  .hero-strip { -webkit-mask-image: none; mask-image: none; }
  .instrument .iruler::after, .lbracket .node::after { display: none !important; }
  .pcard .mark, .pcard:hover .mark { transition: none; transform: none; }
  .pcard:hover .mark.crime { transform: rotate(45deg); }
  .hero-sec { cursor: auto; }
}

/* ============================================================================
   CREATOR PROGRAM MODULES — signup, submission pipeline, social share
   ========================================================================== */

.btn-sm { padding: 10px 18px; font-size: 13px; }

/* submission pipeline — stages light in sequence */
.pipe { border: 1px solid var(--vf-line); border-radius: 8px; overflow: hidden; background: var(--vf-bg); }
.stage {
  display: flex; align-items: center; gap: 14px; padding: 13px 18px;
  border-bottom: 1px solid var(--vf-line);
  opacity: .38; transform: translateX(-6px);
  transition: opacity .45s var(--vf-ease), transform .45s var(--vf-ease);
}
.stage:last-child { border-bottom: 0; }
.stage.on { opacity: 1; transform: none; }
.stage .sdot { flex: none; width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--vf-text-2); transition: background-color .3s var(--vf-ease), border-color .3s var(--vf-ease); }
.stage.on .sdot { background: var(--vf-accent); border-color: var(--vf-accent); box-shadow: 0 0 10px var(--vf-ember-45); }
.stage .iro-k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--vf-text-2); }
.stage .sval { font-family: var(--mono); font-size: 12px; color: var(--vf-text); text-align: right; }
.slotv {
  display: inline-block; border: 1px dashed var(--vf-line-strong); border-radius: 8px;
  padding: 3px 9px; color: var(--vf-text-2); font-size: 11px; letter-spacing: .06em;
  background: repeating-linear-gradient(-45deg, transparent 0 7px, var(--vf-line-hair) 7px 8px);
}

/* the printed submission receipt */
.receipt {
  position: relative; border: 1px dashed var(--vf-line-strong); border-radius: 8px;
  padding: 24px 26px; background: var(--vf-bg);
  opacity: 0; transform: translateY(14px);
  transition: opacity .5s var(--vf-ease), transform .6s var(--vf-ease);
}
.receipt.on { opacity: 1; transform: none; }
.receipt .label { padding-right: 128px; }
.receipt .rr { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; border-bottom: 1px solid var(--vf-line-hair); }
.receipt .rr:last-child { border-bottom: 0; }
.receipt .rk { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--vf-text-2); }
.receipt .rv { font-family: var(--mono); font-size: 12px; color: var(--vf-text); text-align: right; overflow-wrap: anywhere; }
.rstamp {
  position: absolute; top: 16px; right: 16px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--vf-accent); border: 1px solid var(--vf-ember-45); border-radius: 8px; padding: 4px 10px;
  transform: rotate(-7deg) scale(1.35); opacity: 0;
  transition: opacity .35s var(--vf-ease-out) .55s, transform .35s var(--vf-ease-out) .55s;
}
.receipt.on .rstamp { opacity: 1; transform: rotate(-7deg) scale(1); }

/* drawn share-card preview */
.scard { border: 1px solid var(--vf-line-strong); border-radius: 8px; background: var(--vf-surface-2); padding: 26px; }

/* ============================================================================
   CATALOG PERSONALIZATION — product codes, taglines, storyboards, pillar marks
   ========================================================================== */

/* mono product code chip (vf_banking …) */
.code {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  color: var(--vf-text-2); border: 1px solid var(--vf-line); border-radius: 8px;
  padding: 4px 9px;
}

/* the selling line under each product name */
.tagline { margin-top: 10px; font-size: 14.5px; font-weight: 600; line-height: 1.45; color: var(--vf-text); max-width: 44ch; }
.pcard .tagline + .pitch { margin-top: 8px; }

/* storyboard strip — the planned trailer moment, honestly pending */
.sboard { margin-top: 16px; border: 1px dashed var(--vf-line); border-radius: 8px; padding: 11px 14px; }
.sboard .sb-k {
  display: block; font-family: var(--mono); font-size: 9px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--vf-text-2); opacity: .85; margin-bottom: 5px;
}
.sboard p { font-family: var(--mono); font-size: 11px; line-height: 1.65; color: var(--vf-text-2); }

/* pillar subtitle under the section krow */
.psub { margin: -10px 0 30px; font-size: 14px; line-height: 1.6; color: var(--vf-text-2); max-width: 60ch; }

/* pending price — same grammar as [measured-pending] */
.pending-price { color: var(--vf-text-2); font-size: 12.5px; letter-spacing: .06em; }

/* code chip inside bundle ledger rows */
.lcode { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; color: var(--vf-text-2); margin-left: 8px; }

/* pillar watermark variants (abstract geometry — original brand art) */
.pcard .mark.foundation { /* nested squares — base style */ }
.pcard .mark.pecon, .pcard .mark.pecon::before { border-radius: 50%; }
.pcard .mark.law::before { inset: 16%; transform: rotate(45deg); }
.pcard:hover .mark.law { transform: rotate(10deg); }
.pcard .mark.event { border-radius: 50%; }
.pcard .mark.event::before { inset: 40%; border-radius: 50%; background: var(--vf-line-strong); border: 0; }
.pcard .mark.maritime { border: 0; }
.pcard .mark.maritime::before, .pcard .mark.maritime::after {
  content: ""; position: absolute; left: 12%; right: 12%; height: 40%;
  border: 0; border-left: 1px solid var(--vf-line-strong); border-bottom: 1px solid var(--vf-line-strong);
  transform: rotate(-45deg);
}
.pcard .mark.maritime::before { top: 4%; }
.pcard .mark.maritime::after { top: 44%; }
.pcard:hover .mark.maritime { transform: translateY(-4px); }

/* ============================================================================
   AMBIENT PILLAR BACKDROPS — minimalist moving graphics behind the catalog.
   All hairline, token-derived, transform/opacity only; frozen (or hidden)
   under prefers-reduced-motion via the global animation kill.
   ========================================================================== */

section[data-group] { position: relative; overflow: clip; }
section[data-group] > .wrap { position: relative; z-index: 1; }
.pback { position: absolute; inset: 0; pointer-events: none; }

/* — maritime: ocean swell (repeating arc crests drifting) — */
.wavez { position: absolute; inset: 0; -webkit-mask-image: linear-gradient(90deg, transparent 3%, #000 28%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent 3%, #000 28%, #000 86%, transparent); }
.wavez .wv {
  position: absolute; left: -140px; right: -140px; height: 24px;
  background-image: radial-gradient(circle 16px at 28px 27px, transparent 12px, var(--vf-line-strong) 12.5px 13.5px, transparent 14.2px);
  background-size: 56px 24px; background-repeat: repeat-x;
  animation: wave-x linear infinite;
}
.wavez .w1 { bottom: 44px; opacity: .55; animation-duration: 30s; }
.wavez .w2 { bottom: 96px; opacity: .35; animation-duration: 44s; animation-direction: reverse; }
.wavez .w3 { bottom: 148px; opacity: .2; animation-duration: 60s; }
@keyframes wave-x { to { transform: translateX(-56px); } }

/* — player economy: value ripples (sonar rings expanding) — */
.ripple { position: absolute; width: min(540px, 62vw); aspect-ratio: 1 / 1; }
.pb-pecon .ripple { right: 4%; top: 50%; margin-top: calc(min(540px, 62vw) / -2); }
.ripple span {
  position: absolute; inset: 0; border: 1px solid var(--vf-line-strong); border-radius: 50%;
  opacity: 0; animation: ring-ping 11s linear infinite;
}
.ripple span:nth-child(2) { animation-delay: 3.6s; }
.ripple span:nth-child(3) { animation-delay: 7.2s; }
.ripple::after { content: ""; position: absolute; left: calc(50% - 3px); top: calc(50% - 3px); width: 6px; height: 6px; border-radius: 50%; background: var(--vf-line-strong); }
@keyframes ring-ping { 0% { transform: scale(.3); opacity: .5; } 70% { opacity: .16; } 100% { transform: scale(1.06); opacity: 0; } }

/* — crime: heat pulse (nested diamonds breathing) — */
.dpulse {
  position: absolute; right: 7%; top: 50%; width: min(360px, 46vw); aspect-ratio: 1 / 1;
  margin-top: calc(min(360px, 46vw) / -2);
  border: 1px solid var(--vf-line-strong); opacity: .4;
  transform: rotate(45deg); animation: dpulse 9s ease-in-out infinite alternate;
}
.dpulse::before { content: ""; position: absolute; inset: 18%; border: 1px solid var(--vf-line-strong); }
@keyframes dpulse { from { transform: rotate(45deg) scale(.96); } to { transform: rotate(45deg) scale(1.05); } }

/* — law & order: slow star rotor — */
.lstar {
  position: absolute; right: 6%; top: 50%; width: min(420px, 52vw); aspect-ratio: 1 / 1;
  margin-top: calc(min(420px, 52vw) / -2);
  border: 1px solid var(--vf-line); opacity: .5;
  animation: dial-spin 220s linear infinite;
}
.lstar::before { content: ""; position: absolute; inset: 0; border: 1px solid var(--vf-line); transform: rotate(45deg); }

/* — foundation: strata (structure lines rising, glacially) — */
.strata { position: absolute; left: 0; right: 0; bottom: 0; height: 58%; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent, #000 40%); mask-image: linear-gradient(180deg, transparent, #000 40%); }
.strata i {
  position: absolute; left: 0; right: 0; top: -32px; height: calc(100% + 64px);
  background: repeating-linear-gradient(180deg, var(--vf-line-hair) 0 1px, transparent 1px 32px);
  animation: strata-y 46s linear infinite;
}
@keyframes strata-y { to { transform: translateY(-32px); } }

/* — event: spark rise (restrained) — */
.sparks { position: absolute; inset: 0; }
.sparks span {
  position: absolute; bottom: 10%; width: 3px; height: 3px; border-radius: 50%;
  background: var(--vf-line-strong); opacity: 0; animation: spark-y linear infinite;
}
.sparks span:nth-child(1) { left: 58%; animation-duration: 11s; }
.sparks span:nth-child(2) { left: 67%; animation-duration: 14s; animation-delay: 3s; }
.sparks span:nth-child(3) { left: 75%; animation-duration: 9.5s; animation-delay: 6s; }
.sparks span:nth-child(4) { left: 84%; animation-duration: 13s; animation-delay: 1.5s; }
.sparks span:nth-child(5) { left: 91%; animation-duration: 10.5s; animation-delay: 8s; }
.sparks span.em { background: var(--vf-ember-45); }
@keyframes spark-y { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: .65; } 80% { opacity: .2; } 100% { transform: translateY(-260px); opacity: 0; } }

/* ============================================================================
   HERO AMBIENTS — catalog: drifting calibration tapes · creators: broadcast rings
   ========================================================================== */

.tape {
  position: absolute; left: 40%; right: 0; height: 9px; overflow: hidden; opacity: .85;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 82%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 22%, #000 82%, transparent);
}
.tape i {
  position: absolute; top: 0; bottom: 0; left: 0; width: calc(100% + 176px);
  background:
    repeating-linear-gradient(90deg, var(--vf-line-strong) 0 1px, transparent 1px 22px) bottom / 100% 5px no-repeat,
    repeating-linear-gradient(90deg, var(--vf-line) 0 1px, transparent 1px 88px) bottom / 100% 9px no-repeat;
  animation: tape-x linear infinite;
}
.tape.t1 { top: 36%; } .tape.t1 i { animation-duration: 80s; }
.tape.t2 { top: 47%; opacity: .5; } .tape.t2 i { animation-duration: 120s; animation-direction: reverse; }
@keyframes tape-x { to { transform: translateX(-88px); } }

.hero-ripple { right: 1%; top: 6%; width: min(560px, 56vw); display: none; }
@media (min-width: 760px) { .hero-ripple { display: block; } }
.hero-ripple::after { background: var(--vf-accent); box-shadow: 0 0 12px var(--vf-ember-45); }

@media (prefers-reduced-motion: reduce) {
  .stage, .receipt, .rstamp { transition: none !important; transform: none !important; }
  .receipt.on .rstamp, .rstamp { transform: rotate(-7deg) scale(1) !important; }
}

/* ==== VICE DRIP NEON OVERLAY (vd-theme.css) ==== */
/* ============================================================
   vd-theme.css — VICE DRIP brand overlay (operator-locked 2026-07-09).
   Additions layer: vf.css is never edited. Palette sampled from the
   supplied mascot/wordmark art (Concept A). SEMANTICS PRESERVED:
   --vf-teal (#2ED3B7) still marks MEASURED claims only — the Vice Drip
   cyan (#38D4FF) is a brand accent and is never used on receipt rows.
   ============================================================ */

:root {
  --vd-cyan: #38d4ff;
  --vd-blue: #4f8dff;
  --vd-violet: #8a7bff;
  --vd-mag: #ff4fd2;
  --vd-grad: linear-gradient(98deg, var(--vd-cyan) 0%, var(--vd-violet) 48%, var(--vd-mag) 100%);
  --vd-cyan-14: rgba(56, 212, 255, 0.14);
  --vd-cyan-45: rgba(56, 212, 255, 0.45);
  --vd-mag-14: rgba(255, 79, 210, 0.14);
  --vd-mag-40: rgba(255, 79, 210, 0.4);
}

/* ---------- gradient display text (the DRIP energy) ---------- */
.vd-grad-text {
  background: var(--vd-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- the Drip mark: vector mascot glyph (droplet + halo + eyes),
     drawn from the supplied character — usable in badges/chips/stamps ---------- */
.vd-mark {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.12em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cdefs%3E%3ClinearGradient id='d' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%2338D4FF'/%3E%3Cstop offset='1' stop-color='%234F8DFF'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cellipse cx='24' cy='7' rx='12' ry='3.4' fill='none' stroke='%23FF4FD2' stroke-width='1.6' opacity='.9'/%3E%3Cpath d='M24 6 C30 16 38 23 38 32 a14 14 0 0 1 -28 0 C10 23 18 16 24 6 Z' fill='url(%23d)'/%3E%3Cpath d='M17 25 a4.5 4.5 0 0 1 6 -2' stroke='%23070A0F' stroke-width='2.6' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='19' cy='30' r='3.4' fill='%23070A0F'/%3E%3Ccircle cx='30' cy='30' r='3.4' fill='%23070A0F'/%3E%3Ccircle cx='20' cy='29' r='1.1' fill='%23E8ECF1'/%3E%3Ccircle cx='31' cy='29' r='1.1' fill='%23E8ECF1'/%3E%3Cpath d='M19 37 q5 3.4 10 0' stroke='%23070A0F' stroke-width='2.2' fill='none' stroke-linecap='round'/%3E%3Cpath d='M20 12 q-4 6 -4 10' stroke='rgba(232,236,241,.55)' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* ---------- mascot slots (pre-sized for the supplied PNGs) ---------- */
.mascot {
  position: relative;
  display: block;
  filter: drop-shadow(0 22px 44px rgba(56, 212, 255, 0.16)) drop-shadow(0 10px 60px rgba(255, 79, 210, 0.12));
}
.mascot img {
  display: block;
  width: 100%;
  height: auto;
}
/* glow puddle under the character */
.mascot::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -6px;
  height: 26px;
  background: radial-gradient(50% 100% at 50% 0%, rgba(56, 212, 255, 0.28), rgba(255, 79, 210, 0.1) 55%, transparent 75%);
  filter: blur(6px);
  pointer-events: none;
}
.mascot-hero { width: clamp(280px, 34vw, 470px); }
.mascot-side { width: clamp(210px, 25vw, 330px); }
.mascot-stamp { width: clamp(140px, 16vw, 200px); }
.mascot-lounge { width: clamp(260px, 30vw, 400px); }
@media (max-width: 899px) {
  .mascot-hero { width: min(70vw, 340px); margin: 40px auto 0; }
  .mascot-side { width: min(52vw, 250px); }
  .mascot-lounge { width: min(70vw, 320px); margin: 0 auto; }
}

/* ---------- hero art stage: layered glow + floor + halo echo ---------- */
.vd-stage {
  position: relative;
  display: block;
  padding: clamp(16px, 2vw, 28px) clamp(20px, 3vw, 44px) 26px;
}
.vd-stage::before {
  /* atmosphere behind the character */
  content: "";
  position: absolute;
  inset: -14% -18%;
  background:
    radial-gradient(46% 42% at 50% 30%, rgba(56, 212, 255, 0.17), transparent 68%),
    radial-gradient(52% 46% at 54% 74%, rgba(255, 79, 210, 0.12), transparent 70%);
  pointer-events: none;
}
.vd-stage::after {
  /* gradient floor line the character stands on */
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 10px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--vd-cyan-45) 30%, var(--vd-mag-40) 70%, transparent);
  pointer-events: none;
}
.vd-stage .mascot { position: relative; z-index: 1; }

/* gentle idle float — transform-only, parity off under reduced motion */
@keyframes vd-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.js .vd-stage .mascot img { animation: vd-float 7s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .js .vd-stage .mascot img { animation: none; }
}

/* ---------- DRIP wordmark art (supplied brush lettering) ---------- */
.vd-wordmark-h1 {
  display: block;
  height: clamp(58px, 8.6vw, 136px);
  width: auto;
  margin-top: clamp(6px, 1vw, 14px);
  filter: drop-shadow(0 10px 44px rgba(255, 79, 210, 0.28)) drop-shadow(0 4px 22px rgba(56, 212, 255, 0.22));
}
.vd-wm-ghost {
  /* giant background watermark — pure texture, never content */
  position: absolute;
  width: min(56vw, 760px);
  opacity: 0.05;
  transform: rotate(-9deg);
  pointer-events: none;
  user-select: none;
}
.vd-wm-stamp {
  display: inline-block;
  height: 16px;
  width: auto;
  vertical-align: -3px;
  opacity: 0.8;
}

/* hero two-column stage */
.vd-hero-grid {
  display: flex;
  align-items: flex-end;
  gap: clamp(24px, 5vw, 72px);
  flex-wrap: wrap;
}
.vd-hero-copy { flex: 1 1 520px; min-width: 0; }
.vd-hero-art { flex: 0 1 auto; margin-left: auto; }

/* magenta counterpart to the ember bloom in the hero atmosphere */
.vd-bloom {
  position: absolute;
  width: min(560px, 64vw);
  height: min(560px, 64vw);
  left: -12%;
  bottom: -30%;
  background: radial-gradient(circle, rgba(255, 79, 210, 0.14), transparent 62%);
  pointer-events: none;
}

/* ---------- Vice Drip buttons ---------- */
.btn-vd {
  background: var(--vd-grad);
  color: #070a0f;
  border: 0;
}
.btn-vd:hover, .btn-vd:focus-visible { filter: brightness(1.12); color: #070a0f; }

/* ---------- category strip ---------- */
.catstrip {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.catstrip a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: 8px;
  border: 1px solid var(--vf-line-strong);
  background: var(--vf-surface);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vf-text-2);
  transition: color 0.25s ease, border-color 0.25s ease, transform 0.3s var(--vf-ease-out);
}
.catstrip a::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--vd-grad);
  flex: none;
}
.catstrip a:hover, .catstrip a:focus-visible {
  color: var(--vf-text);
  border-color: var(--vd-cyan-45);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .catstrip a, .catstrip a:hover { transform: none; transition: none; }
}

/* ---------- product state badges (Vice Drip states) ---------- */
.badge.free { border-color: var(--vd-cyan-45); color: var(--vd-cyan); }
.badge.nd { /* Next Drop — the gradient moment */
  border: 0;
  background: var(--vd-grad);
  color: #070a0f;
  font-weight: 700;
}
.badge.dev { border-color: var(--vd-mag-40); color: var(--vd-mag); }

/* ---------- price labels: Launch / Intro / Planned ---------- */
.price .plab {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 7px;
  border-radius: 6px;
  border: 1px solid var(--vd-cyan-45);
  color: var(--vd-cyan);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.price .plab.intro { border-color: var(--vd-mag-40); color: var(--vd-mag); }
.price .plab.plan { border-color: var(--vf-line-strong); color: var(--vf-text-2); }

/* card CTA reads as a real control */
.pcard .go {
  padding: 8px 14px;
  border: 1px solid var(--vf-line-strong);
  border-radius: 8px;
  transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}
.pcard:hover .go { border-color: var(--vd-cyan-45); color: var(--vd-cyan); }
.pcard:hover .cover::after {
  background: linear-gradient(150deg, var(--vd-cyan-14), var(--vd-mag-14) 70%);
}

/* Next Drop spotlight plate */
.nd-spot {
  position: relative;
  border: 1px solid var(--vf-line-strong);
  border-radius: 8px;
  background:
    radial-gradient(720px 300px at 88% 0%, var(--vd-mag-14), transparent 60%),
    radial-gradient(680px 320px at 8% 100%, var(--vd-cyan-14), transparent 62%),
    var(--vf-surface);
  overflow: hidden;
}
.nd-spot::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--vd-grad);
}
.nd-spot .vd-wm-ghost { right: -6%; bottom: -12%; width: min(44vw, 520px); opacity: 0.04; }

/* ---------- Concept A poster card (collectible brand moment) ---------- */
.vd-poster {
  display: block;
  border-radius: 10px;
  border: 1px solid var(--vf-line-strong);
  overflow: hidden;
  transform: rotate(2.5deg);
  box-shadow: 0 24px 64px rgba(7, 10, 15, 0.7), 0 0 0 1px rgba(56, 212, 255, 0.08);
  transition: transform 0.35s var(--vf-ease-out);
}
.vd-poster img { display: block; width: 100%; height: auto; }
.vd-poster:hover { transform: rotate(0.5deg) translateY(-4px); }
@media (prefers-reduced-motion: reduce) {
  .vd-poster, .vd-poster:hover { transform: none; transition: none; }
}


/* ===== PCARD OVERLAY (poster cover + mascot fallback + neon accents) ===== */
.pcard .cover{position:relative;margin:-26px -26px 20px;height:158px;flex:none;border-bottom:1px solid var(--vf-line);background-color:var(--vf-ink,#070A0F);overflow:hidden;display:block}
.pcard .cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--vf-ease-out,cubic-bezier(.16,1,.3,1))}
.pcard .cover::after{content:"";position:absolute;inset:0;background:linear-gradient(150deg,var(--vd-cyan-14),var(--vd-mag-14) 70%);opacity:0;transition:opacity .35s ease;pointer-events:none}
@media (hover:hover) and (pointer:fine){.pcard:hover .cover img,.pcard:focus-visible .cover img{transform:scale(1.05)}.pcard:hover .cover::after,.pcard:focus-visible .cover::after{opacity:1}}
@media (prefers-reduced-motion:reduce){.pcard .cover img,.pcard:hover .cover img{transform:none;transition:none}}
.pcard:has(.cover) .mark{opacity:.3}
@media (max-width:520px){.pcard .cover{height:132px}}
.pcard .cover.fb{background-color:var(--vf-surface-2)}
.cover.fb .fb-glow{position:absolute;inset:0}
.cover.fb .fb-cap{position:absolute;left:16px;top:14px;z-index:3;max-width:60%}
.cover.fb .fb-kick{display:block;font:700 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.cover.fb .fb-line{display:block;margin-top:8px;font-weight:700;font-size:14px;line-height:1.2;color:var(--vf-text)}
.cover.fb .fb-mascot{position:absolute;right:2px;bottom:0;height:98%;width:auto;max-width:56%;object-fit:contain;object-position:right bottom;z-index:2}
.cover.fb .fb-underline{position:absolute;left:0;bottom:0;height:3px;width:100%;z-index:3}
.cover.merch-ph{display:flex;align-items:center;justify-content:center;background:radial-gradient(120% 140% at 80% 10%,var(--vd-mag-14),transparent 60%),radial-gradient(120% 140% at 10% 100%,var(--vd-cyan-14),transparent 62%),var(--vf-surface-2)}
.cover.merch-ph span{font:700 12px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--vf-text-2);text-align:center;padding:0 16px}
.pcard.merch .foot{margin-top:auto;border-top:1px solid var(--vf-line)}
.kicker.vd::before{background:var(--vd-grad)}
.price.free{color:var(--vd-cyan)}


/* ===== CONTENT OVERLAY (editorial · hub · article) ===== */
.card.lnk{text-decoration:none;color:inherit;transition:border-color .3s ease,transform .3s var(--vf-ease-out,cubic-bezier(.16,1,.3,1)),background-color .3s ease}
@media (hover:hover) and (pointer:fine){.card.lnk:hover{border-color:var(--vd-cyan-45);transform:translateY(-3px)}}
.card.lnk:focus-visible{border-color:var(--vd-cyan-45)}
.gcard-min{margin-top:auto;padding-top:16px;font:600 11px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--vf-text-2)}
.gcard-min b{color:var(--vd-cyan);font-weight:700}
.hub-blurb{margin-top:14px;max-width:62ch;font-size:15px;line-height:1.7;color:var(--vf-text-2)}
.article{max-width:760px;margin:0 auto}
.article .lede{font-size:clamp(16px,2.1vw,19px);line-height:1.72;color:var(--vf-text-2);max-width:62ch}
.article .meta{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-top:22px;font:600 12px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--vf-text-2)}
.article .meta .m-cluster{color:var(--vd-cyan)}
.article .meta .dot{width:4px;height:4px;border-radius:50%;background:var(--vf-text-2);opacity:.5}
.answer{position:relative;margin:36px 0 8px;padding:26px 30px;background:var(--vf-surface-2);border:1px solid var(--vf-line);border-radius:14px;overflow:hidden}
.answer::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--vd-grad)}
.answer .a-kick{display:block;font:700 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--vd-cyan);margin-bottom:12px}
.answer p{font-size:16px;line-height:1.72;color:var(--vf-text);margin:0}
.gsec{margin-top:52px}
.gsec>h2{font-size:clamp(22px,3vw,30px);line-height:1.15;letter-spacing:-.01em}
.gsec p{margin-top:16px;font-size:16px;line-height:1.78;color:var(--vf-text-2);max-width:70ch}
.gsec p strong{color:var(--vf-text);font-weight:700}
.gbul{margin:22px 0 0;padding:0;list-style:none;display:grid;gap:12px;max-width:70ch}
.gbul li{position:relative;padding-left:26px;font-size:15px;line-height:1.7;color:var(--vf-text-2)}
.gbul li::before{content:"";position:absolute;left:2px;top:11px;width:10px;height:1px;background:var(--vd-cyan);opacity:.85}
code.ic{font:500 .88em/1.4 var(--mono);background:var(--vf-surface-2);border:1px solid var(--vf-line);border-radius:5px;padding:.08em .4em;color:var(--vf-text)}
.faq{margin-top:24px;border-top:1px solid var(--vf-line)}
.faq-item{padding:24px 0;border-bottom:1px solid var(--vf-line)}
.faq-item h3{font-size:17px;line-height:1.42;color:var(--vf-text);display:flex;gap:12px;margin:0}
.faq-item h3 .qm{font:700 13px/1.5 var(--mono);color:var(--vd-cyan);flex:none}
.faq-item p{margin:10px 0 0;font-size:15px;line-height:1.75;color:var(--vf-text-2);max-width:72ch;padding-left:25px}
.qa-list{margin-top:28px;border-top:1px solid var(--vf-line)}
.qa{padding:20px 0;border-bottom:1px solid var(--vf-line)}
.qa>summary{cursor:pointer;list-style:none;display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.45;font-weight:600;color:var(--vf-text)}
.qa>summary::-webkit-details-marker{display:none}
.qa>summary::marker{content:""}
.qa>summary .qm{font:700 12px/1.55 var(--mono);color:var(--vd-cyan);flex:none}
.qa>summary .chev{margin-left:auto;flex:none;color:var(--vf-text-2);transition:transform .25s ease}
.qa[open]>summary{color:var(--vd-cyan)}
.qa[open]>summary .chev{transform:rotate(45deg)}
.qa .qa-a{margin-top:12px;padding-left:27px;font-size:15px;line-height:1.75;color:var(--vf-text-2);max-width:76ch}
.qa .qa-a p{margin:0}
.qa .qa-src{display:block;margin-top:14px;font:600 11px/1.4 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--vf-text-2)}
.qa .qa-src a{color:var(--vd-cyan);text-decoration:none}
.qa .qa-src a:hover{text-decoration:underline}
.gloss-term{font-size:19px;line-height:1.2;color:var(--vf-text);margin:0 0 12px}
.gloss-short{margin:0;font-size:15px;line-height:1.62;color:var(--vf-text);font-weight:700}
.gloss-long{margin:12px 0 0;font-size:14px;line-height:1.72;color:var(--vf-text-2)}
.gloss-same{display:inline-flex;align-items:center;gap:6px;margin-top:18px;font:700 12px/1 var(--mono);letter-spacing:.03em;color:var(--vd-cyan);text-decoration:none}
.gloss-same:hover{text-decoration:underline}
.rn-card{display:flex;flex-direction:column}
.rn-card .rn-cluster{font:700 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--vd-cyan)}
.rn-card h3{margin:12px 0 0;font-size:16px;line-height:1.35;color:var(--vf-text)}
.rn-card p{margin:10px 0 0;font-size:13px;line-height:1.65;color:var(--vf-text-2)}


/* ===== BACKEND OVERLAY (demo banners, ticket table, concierge form, diagnosis) ===== */
.demo-banner{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:baseline;border:1px solid var(--vf-ember-45,rgba(255,122,69,.45));border-radius:8px;background:var(--vf-surface);padding:14px 18px;margin:26px 0 0;font-family:var(--mono);font-size:11.5px;line-height:1.7;color:var(--vf-text-2)}
.demo-banner b{color:var(--vf-text);font-weight:600}
.tag{display:inline-block;padding:2px 8px;border-radius:6px;border:1px solid var(--vf-line-strong);font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--vf-text-2);vertical-align:2px}
.tag.demo{border-color:var(--vf-ember-45,rgba(255,122,69,.45));color:var(--vf-accent)}
.tag.real{border-color:var(--vf-line-strong);color:var(--vf-text)}
.trow{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 20px;border-bottom:1px solid var(--vf-line);background:var(--vf-surface)}
.trow:last-child{border-bottom:0}
.trow .t-main{min-width:0}
.trow .t-name{font-size:14px;color:var(--vf-text)}
.trow .t-sub{font-family:var(--mono);font-size:11px;color:var(--vf-text-2);margin-top:3px}
.tbox{border:1px solid var(--vf-line);border-radius:8px;overflow:hidden}
.tbox .thead{display:flex;justify-content:space-between;gap:16px;padding:11px 20px;border-bottom:1px solid var(--vf-line-strong);background:var(--vf-surface-2)}
.delta{font-family:var(--mono);font-size:13px;white-space:nowrap}
.delta.neg{color:var(--vf-text-2)}
.pts-big{font-family:var(--mono);font-size:clamp(30px,3.4vw,40px);color:var(--vf-text);letter-spacing:-.01em}
.login-panel{max-width:440px;border:1px solid var(--vf-line-strong);border-radius:10px;background:var(--vf-surface);padding:clamp(28px,4vw,40px);position:relative;overflow:hidden}
.login-panel::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:var(--vd-grad)}
.login-panel .field{width:100%}
.sel{width:100%;padding:13px 16px;border:1px solid var(--vf-line-strong);border-radius:8px;background:var(--vf-surface);color:var(--vf-text);font-size:14px;font-family:"Inter",system-ui,sans-serif}
.chip{padding:9px 16px;border:1px solid var(--vf-line);border-radius:8px;background:transparent;color:var(--vf-text-2);font-size:13.5px;font-family:"Inter",system-ui,sans-serif;cursor:pointer;transition:color .2s ease,border-color .2s ease}
.chip[aria-pressed="true"]{border-color:var(--vf-accent);color:var(--vf-accent)}
.chip:hover{border-color:var(--vf-line-strong);color:var(--vf-text)}
.stagebtn{display:block;width:100%;text-align:left;padding:12px 14px;border:1px solid var(--vf-line);border-radius:8px;background:transparent;cursor:pointer;font-family:"Inter",system-ui,sans-serif}
.stagebtn[aria-pressed="true"]{border-color:var(--vf-accent);background:var(--vf-surface-2)}
.stagebtn .s-l{display:block;font-size:13.5px;color:var(--vf-text)}
.stagebtn .s-h{display:block;font-size:11.5px;color:var(--vf-text-2);margin-top:2px}
.pastebox{width:100%;min-height:190px;padding:14px 16px;border:1px solid var(--vf-line-strong);border-radius:8px;background:var(--vf-surface);color:var(--vf-text);font-family:var(--mono);font-size:11.5px;line-height:1.7;resize:vertical}
.redact-warn{border:1px solid var(--vf-ember-45,rgba(255,122,69,.45));border-radius:8px;background:var(--vf-surface-2);padding:16px 18px}
.notouch{border:1px solid var(--vf-danger,#ff5d5d);border-radius:8px;padding:16px 18px}
.notouch .label{color:var(--vf-danger,#ff5d5d)}
.fixstep{display:flex;gap:12px;font-size:13.5px;line-height:1.65;color:var(--vf-text-2)}
.fixstep .index{flex:none;padding-top:2px}
.conf{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.conf .bar{width:26px;height:11px;border-radius:2px;background:var(--vf-line-strong);display:inline-block}
.conf .bar.on{background:var(--vf-text)}
.cite{display:flex;gap:10px;align-items:baseline;font-size:13px;padding:5px 0}
.cite .index{flex:none}
.cite a{color:var(--vf-text-2);text-decoration:underline;text-decoration-color:var(--vf-line-strong);text-underline-offset:4px}
.cite a:hover{color:var(--vf-accent)}
.filechip{display:inline-block;padding:4px 8px;border:1px solid var(--vf-line);border-radius:6px;font-family:var(--mono);font-size:11px;color:var(--vf-text-2)}
.cmd{display:block;font-family:var(--mono);font-size:12px;color:var(--vf-text);padding:6px 12px;border-bottom:1px solid var(--vf-line-hair,var(--vf-line))}
.cmd:last-child{border-bottom:0}
.cmdbox{border:1px solid var(--vf-line);border-radius:8px;background:var(--vf-surface-2);overflow:hidden}
.acct-grid{display:grid;gap:24px}
@media(min-width:960px){.acct-grid{grid-template-columns:1.15fr 1fr}}
.con-grid{display:grid;gap:32px}
@media(min-width:1024px){.con-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}}


/* ===== STATIC-SITE OVERLAY (pdp · preview · bundle · merch · legal · shells) ===== */
.pdp-grid{display:grid;gap:clamp(28px,5vw,56px);align-items:center}
@media(min-width:900px){.pdp-grid{grid-template-columns:1.05fr .95fr}}
.pdp-media{position:relative;border:1px solid var(--vf-line);border-radius:16px;overflow:hidden;background:var(--vf-surface-2);aspect-ratio:16/10}
.pdp-media img{width:100%;height:100%;object-fit:cover;display:block}
.pdp-media.fb{display:flex;align-items:flex-end;justify-content:center;background:radial-gradient(120% 140% at 82% 8%,var(--vd-mag-14),transparent 60%),radial-gradient(120% 140% at 8% 100%,var(--vd-cyan-14),transparent 62%),var(--vf-surface-2)}
.pdp-media.fb img{width:auto;height:88%;object-fit:contain}
.pdp-media .fb-kick{position:absolute;left:18px;top:16px;z-index:2;font:700 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.buybox{border:1px solid var(--vf-line-strong);border-radius:14px;background:var(--vf-surface);padding:clamp(22px,3vw,30px)}
.buybox .bb-price{font-family:var(--mono);font-size:clamp(22px,2.6vw,30px);color:var(--vf-text);display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.soon{display:inline-flex;align-items:center;gap:9px;padding:13px 22px;border-radius:10px;border:1px solid var(--vf-line-strong);background:var(--vf-surface-2);color:var(--vf-text-2);font:600 14px/1 "Inter",system-ui,sans-serif;cursor:not-allowed}
.soon .dotmark{width:7px;height:7px;border-radius:50%;background:var(--vd-cyan);flex:none}
.memberchip{display:inline-block;padding:6px 12px;border:1px solid var(--vf-line);border-radius:999px;font:600 11px/1 var(--mono);letter-spacing:.03em;color:var(--vf-text-2);text-decoration:none}
a.memberchip:hover{border-color:var(--vd-cyan-45);color:var(--vf-text)}
.savings{color:var(--vd-cyan);font-family:var(--mono)}
.strike-mono{font-family:var(--mono);text-decoration:line-through;color:var(--vf-text-2)}
.detail-note{border-top:1px solid var(--vf-line);padding-top:24px;font:500 11.5px/1.9 var(--mono);color:var(--vf-text-2);max-width:82ch}
.legal-doc{max-width:820px;margin:0 auto}
.legal-doc .lsec{margin-top:40px}
.legal-doc .lsec h2{font-size:clamp(18px,2.2vw,23px);line-height:1.3;color:var(--vf-text)}
.legal-doc .lsec p{margin-top:14px;font-size:15px;line-height:1.78;color:var(--vf-text-2);max-width:76ch}
.shell-panel{max-width:560px;border:1px solid var(--vf-line-strong);border-radius:12px;background:var(--vf-surface);padding:clamp(24px,4vw,36px);position:relative;overflow:hidden}
.shell-panel::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:var(--vd-grad)}
.shell-panel .field{width:100%}