/* ============================================================================
   VERTICAL.CSS — shared system for the specialist showcase pages
   (defi-wallet, web3-commerce, game, ecommerce, ai-agent development).
   The instrument language, portable: dark stages with local token re-map,
   reticle ticks, rails, mono readouts, capability sheets, honest-proof
   cards, FAQ, closer. Page-specific demos style themselves per page.
   Tokens only · WCAG 2.2 AA aware · reduced-motion honored · print-safe.
   ============================================================================ */
:root{--pad-y:clamp(66px,9vw,118px)}
.vwrap{max-width:min(1180px,100% - 2*var(--pad-x));margin-inline:auto}
.vsection{padding-block:clamp(72px,10vw,140px)}
.vlabel{font-family:var(--mono);font-size:.66rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.vlabel--accent{color:var(--accent-2)}
.vhead{position:relative;max-width:66ch;margin:0 0 clamp(36px,5vw,60px)}
.vhead__no{font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.18em;color:var(--accent-2)}
.vhead__no::before{content:"§ "}
.vhead__title{font-size:clamp(1.9rem,4.2vw,3rem);font-weight:900;letter-spacing:-.036em;line-height:1.04;margin:clamp(12px,1.6vw,18px) 0 0}
.vhead__sub{color:var(--muted);font-size:clamp(1.02rem,1.45vw,1.16rem);line-height:1.62;margin:clamp(14px,1.8vw,20px) 0 0;max-width:60ch}
.vhead__sub b{color:var(--ink-2);font-weight:600}
.vdate{display:inline-flex;gap:8px;align-items:center;font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:5px 12px;background:var(--card);margin:0 0 clamp(16px,2vw,22px)}
.vdate .d{width:6px;height:6px;border-radius:50%;background:var(--good)}
.vanswer{border-left:3px solid var(--accent);background:var(--card);border-radius:0 14px 14px 0;padding:clamp(18px,2.4vw,28px) clamp(20px,2.8vw,32px);max-width:76ch;box-shadow:var(--shadow)}
.vanswer p{margin:0;color:var(--ink);font-size:clamp(1.04rem,1.45vw,1.18rem);line-height:1.66}
.vanswer p+p{margin-top:.9em;color:var(--ink-2);font-size:clamp(.96rem,1.28vw,1.06rem)}
.btn:active,.vchip:active{transform:scale(.975)}
@media(prefers-reduced-motion:reduce){.btn:active,.vchip:active{transform:none}}

/* ---- dark stage (local token re-map, Hidden-Lab lineage) ---- */
.v-stage{--paper:#0A0B10;--paper-2:#10121A;--card:rgba(255,255,255,.045);--ink:#EEF2FB;--ink-2:#C9D0E0;
  --muted:#B0B8CA;--faint:#8D95A7;--line:rgba(255,255,255,.10);--line-2:rgba(255,255,255,.17);
  --accent:#6E8CFF;--accent-2:#9DB2FF;--accent-ink:#071022;--accent-soft:rgba(110,140,255,.14);
  --shadow:0 22px 60px rgba(0,0,0,.55);background:var(--paper);color:var(--ink);color-scheme:dark;
  position:relative;overflow:hidden;isolation:isolate}
.v-stage ::selection{background:rgba(110,140,255,.35)}
.v-stage__aurora{position:absolute;inset:-18% -8%;z-index:0;pointer-events:none;opacity:.6;filter:blur(28px);
  background:radial-gradient(42vw 42vw at 14% 6%,rgba(110,140,255,.18),transparent 62%),
             radial-gradient(46vw 46vw at 88% 18%,rgba(45,212,191,.1),transparent 62%),
             radial-gradient(52vw 52vw at 50% 104%,rgba(157,178,255,.09),transparent 62%)}
@media(prefers-reduced-motion:no-preference){.v-stage__aurora{animation:vaur 30s cubic-bezier(.65,0,.35,1) infinite alternate}@keyframes vaur{to{transform:translate3d(0,-2.4%,0) scale(1.05)}}}
.v-stage__grid{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:64px 64px;-webkit-mask-image:radial-gradient(120% 100% at 50% 0%,#000 0%,transparent 76%);mask-image:radial-gradient(120% 100% at 50% 0%,#000 0%,transparent 76%)}
.v-stage__grain{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
.v-stage__rail{position:absolute;left:0;right:0;bottom:0;height:10px;z-index:2;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.2) 0 1px,transparent 1px 12px)}
.v-tick{position:absolute;width:13px;height:13px;color:rgba(255,255,255,.22);pointer-events:none;z-index:2}
.v-tick::before,.v-tick::after{content:"";position:absolute;background:currentColor}
.v-tick::before{left:0;top:0;width:13px;height:1px}
.v-tick::after{left:0;top:0;width:1px;height:13px}
.v-tick--tl{top:14px;left:14px}
.v-tick--tr{top:14px;right:14px;transform:scaleX(-1)}
.v-tick--bl{bottom:14px;left:14px;transform:scaleY(-1)}
.v-tick--br{bottom:14px;right:14px;transform:scale(-1,-1)}

/* ---- hero ---- */
.vhero__in{position:relative;z-index:3;padding-block:clamp(64px,10vw,150px)}
.vhero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,4.5vw,72px);align-items:center}
@media(max-width:960px){.vhero__grid{grid-template-columns:1fr;gap:clamp(34px,6vw,48px)}}
.vhero__title{font-size:clamp(2.6rem,6.6vw,5.4rem);font-weight:900;letter-spacing:-.048em;line-height:.98;margin:0}
.vhero__title .thin{display:block;color:var(--ink-2);font-weight:500;letter-spacing:-.026em;font-size:clamp(1.25rem,2.7vw,1.9rem);line-height:1.14;margin:0 0 clamp(10px,1.4vw,16px)}
.vhero__title .acc{color:var(--accent-2)}
.vhero__lede{color:var(--muted);font-size:clamp(1.06rem,1.5vw,1.26rem);line-height:1.62;margin:clamp(22px,2.6vw,30px) 0 0;max-width:46ch}
.vhero__lede b{color:var(--ink);font-weight:600}
.vhero__act{display:flex;gap:12px;flex-wrap:wrap;margin:clamp(26px,3.2vw,36px) 0 0}
.vchains{display:flex;flex-wrap:wrap;gap:8px;margin:clamp(26px,3.2vw,38px) 0 0;padding-top:clamp(16px,2vw,22px);border-top:1px solid var(--line)}
.vchains .k{width:100%;margin-bottom:2px}
.vchain{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);
  border:1px solid var(--line-2);border-radius:999px;padding:7px 13px;display:inline-flex;align-items:center;gap:8px}
.vchain .d{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.vfig{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));padding:clamp(18px,2.2vw,26px)}
.vfig svg{display:block;width:100%;height:auto}
.vfig__cap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:12px 2px 0;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.vfig__cap b{color:var(--muted);font-weight:500}

/* ---- controls ---- */
.vchip{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);
  border:1px solid var(--line-2);background:transparent;border-radius:999px;padding:8px 14px;cursor:pointer;
  transition:border-color .2s,color .2s,transform .2s}
.vchip:hover{border-color:var(--accent);transform:translateY(-1px)}
.vchip:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.vchip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
@media(prefers-reduced-motion:reduce){.vchip:hover{transform:none}}
html:not(.js) .v-jsonly{display:none}

/* ---- capability sheet ---- */
.vsheet{border-top:1px solid var(--line)}
.vsheet__row{position:relative;display:grid;grid-template-columns:auto 1fr;gap:clamp(14px,2.2vw,30px);align-items:baseline;
  padding:clamp(22px,3vw,36px) clamp(4px,1vw,14px);border-bottom:1px solid var(--line)}
.vsheet__row::before{content:"";position:absolute;left:-1px;top:0;bottom:0;width:3px;background:var(--accent);
  transform:scaleY(0);transform-origin:top center;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.vsheet__row:hover::before{transform:scaleY(1)}
@media(prefers-reduced-motion:reduce){.vsheet__row::before{transition:none}}
.vsheet__no{font-family:var(--mono);font-size:.8rem;font-weight:600;color:var(--faint);font-variant-numeric:tabular-nums}
.vsheet__t{font-size:clamp(1.3rem,2.6vw,2rem);font-weight:900;letter-spacing:-.028em;line-height:1.08;margin:0}
.vsheet__d{color:var(--muted);font-size:.95rem;line-height:1.56;margin:8px 0 0;max-width:62ch}
.vsheet__d b{color:var(--ink-2)}
.vsheet__d a{color:var(--accent-2);text-decoration:underline;text-underline-offset:2px}

/* ---- proof ---- */
.vvow{max-width:66ch;margin:0 0 clamp(28px,3.6vw,44px);padding:clamp(16px,2vw,22px) clamp(18px,2.4vw,26px);
  border:1px dashed var(--line-2);border-radius:var(--r-lg);background:var(--paper-2)}
.vvow p{margin:0;color:var(--ink-2);font-size:1rem;line-height:1.62}
.vvow b{color:var(--ink)}
.vproof{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(12px,1.8vw,20px)}
@media(max-width:760px){.vproof{grid-template-columns:1fr}}
.vproof__card{display:block;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);
  padding:clamp(18px,2.4vw,26px);color:inherit;text-decoration:none;transition:border-color .25s,transform .25s;box-shadow:var(--shadow)}
.vproof__card:hover{border-color:var(--accent);transform:translateY(-3px)}
@media(prefers-reduced-motion:reduce){.vproof__card:hover{transform:none}}
.vproof__k{font-family:var(--mono);font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2)}
.vproof__t{font-size:clamp(1.1rem,1.7vw,1.32rem);font-weight:800;letter-spacing:-.02em;margin:9px 0 0}
.vproof__d{color:var(--muted);font-size:.93rem;line-height:1.55;margin:7px 0 0}

/* ---- FAQ ---- */
.vfaq{max-width:76ch}
.vfaq details{border-top:1px solid var(--line)}
.vfaq details:last-of-type{border-bottom:1px solid var(--line)}
.vfaq summary{cursor:pointer;list-style:none;display:flex;gap:14px;align-items:baseline;padding:clamp(15px,1.9vw,19px) 2px;font-weight:700;font-size:clamp(1rem,1.35vw,1.1rem);color:var(--ink)}
.vfaq summary::-webkit-details-marker{display:none}
.vfaq summary .no{font-family:var(--mono);font-size:.7rem;font-weight:600;color:var(--accent-2);letter-spacing:.08em;flex:none}
.vfaq .a{padding:0 2px clamp(16px,2vw,20px) calc(14px + 2.2ch);margin:0;color:var(--ink-2);line-height:1.66}
.vfaq .a a{color:var(--accent-2);text-decoration:underline;text-underline-offset:2px}

/* ---- closer ---- */
.vclose__in{position:relative;z-index:3;text-align:center;padding-block:clamp(72px,10vw,150px)}
.vclose__t{font-size:clamp(2rem,4.6vw,3.4rem);font-weight:900;letter-spacing:-.04em;line-height:1.02;margin:clamp(16px,2vw,22px) auto 0;max-width:20ch}
.vclose__p{color:var(--muted);font-size:clamp(1rem,1.4vw,1.16rem);line-height:1.6;max-width:52ch;margin:clamp(14px,1.8vw,20px) auto 0}
.vclose__act{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin:clamp(24px,3vw,32px) 0 0}
.vclose__fine{font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;color:var(--faint);margin:clamp(20px,2.6vw,28px) 0 0;line-height:1.8}
.vclose__fine a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.vsib{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:clamp(18px,2.4vw,26px) 0 0}
.vsib a{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line-2);border-radius:999px;padding:7px 13px;text-decoration:none;transition:color .2s,border-color .2s}
.vsib a:hover{color:var(--ink);border-color:var(--accent)}
.vsec--alt{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* ---- print ---- */
@media print{
  .statusbar-top,.nav,.foot,.skip,.st-progress,.v-stage__aurora,.v-stage__grid,.v-stage__grain,.v-stage__rail{display:none !important}
  .v-stage{--paper:#fff;--ink:#111;--muted:#333;--faint:#555;--line:#ddd;background:#fff !important;color:#111 !important}
  *{box-shadow:none !important}
  .vproof__card,.vsheet__row{break-inside:avoid;page-break-inside:avoid}
  a{color:#111 !important;text-decoration:none}
  .st-fade,.st-anim,.reveal{opacity:1 !important;transform:none !important}
}

/* ---- USA credentials strip (hero + closer) ---- */
.vusa{font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-2);margin:clamp(18px,2.4vw,26px) 0 0;line-height:1.9}
/* ---- breathing band (per-vertical motif via modifier) ---- */
.vbreath{padding-block:clamp(80px,12vw,170px);border-top:1px solid var(--line);text-align:center}
.vbreath__orn{color:var(--accent);margin:0 auto clamp(16px,2vw,22px)}
.vbreath__orn svg{display:block;margin:0 auto;height:46px;width:auto}
.vbreath__t{font-weight:900;letter-spacing:-.042em;font-size:clamp(2rem,5.2vw,3.9rem);line-height:1.02;margin:0 auto;max-width:20ch}
.vbreath__p{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);
  margin:clamp(16px,2vw,24px) auto 0;line-height:1.9}
.vbreath__p b{color:var(--muted);font-weight:500}
/* ---- touch ergonomics on coarse pointers ---- */
@media(pointer:coarse){
  .vchip{padding:12px 18px}
  .vc{padding:15px 16px}
  .eco__range,.ex1__range{height:34px}
  .agt__task{padding:15px 16px}
}