/* Visual layer: gradients, dark bands, washes, hover-lift cards, charts, carousel, capability explorer, CTA band.
   Reads tokens.css (see "Depth" tokens). Loaded on every page after pages.css. Motion is transform/opacity only and is switched off for reduced motion. */

/* ---- footer copyright: .am-footer p reset removed the auto margins ---- */
.am-footer p.am-wrap { margin-inline: auto; }

/* ---- washes (alternating with white) ---- */
.sec-alt { background: var(--grad-wash-a); }
.sec-alt.is-sky { background: var(--grad-wash-b); }
.hm-evidence { background: var(--surface); }

/* ---- dark hero (every page) ---- */
.page-hero, .hm-hero, .vz-hero { background: var(--grad-hero); color: #fff; position: relative; overflow: hidden; }
.page-hero h1, .hm-hero h1, .vz-hero h1 { color: #fff; }
.page-hero .lede, .hm-copy .lede, .vz-hero .lede { color: var(--on-dark); }
.page-hero .eyebrow, .hm-hero .eyebrow, .vz-hero .eyebrow { color: var(--accent); }
.hm-copy .fine { color: var(--on-dark); }
.page-hero .c-crumbs li, .page-hero .c-crumbs [aria-current] { color: #fff; }
.page-hero .c-crumbs a { color: var(--accent); }
.page-hero .c-crumbs li + li::before { color: var(--on-dark); }
.page-hero a:not(.btn):not(.chip) { color: var(--accent); }
.page-hero .btn-ghost, .hm-hero .btn-ghost, .vz-hero .btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.55); }
.page-hero .btn-ghost:hover, .hm-hero .btn-ghost:hover, .vz-hero .btn-ghost:hover { border-color: var(--accent); color: var(--accent); background: rgba(255, 255, 255, 0.06); }
.vz-hero { padding: var(--sp-8) 0 var(--sp-6); }
.vz-hero h1 { font-size: clamp(var(--fs-5), 5vw, var(--fs-7)); margin: var(--sp-1) 0 var(--sp-2); letter-spacing: -0.035em; max-width: 18ch; }
.vz-hero .lede { font-size: var(--fs-1); max-width: 46ch; margin: 0 0 var(--sp-3); }
.vz-hero .row { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.vz-hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--sp-6); align-items: center; }
@media (max-width: 900px) { .vz-hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); } .vz-hero { padding-top: var(--sp-5); } }

/* ---- dark band (at most one per screenful) ---- */
.sec-dark { background: var(--grad-band); color: #fff; }
.sec-dark h2, .sec-dark h3 { color: #fff; }
.sec-dark .eyebrow { color: var(--accent); }
.sec-dark .sec-head p, .sec-dark p { color: var(--on-dark); }
.term-band { background: var(--grad-band); }

/* ---- gradient edge on cards, icon chips, hover lift and glow ---- */
.c-card, .vz-card { position: relative; transition: transform var(--d-base) var(--ease), box-shadow var(--d-base) var(--ease), border-color var(--d-base) var(--ease); }
.c-card::before, .vz-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; border-radius: var(--r-2) var(--r-2) 0 0; background: var(--grad-line); opacity: 0.85; }
.c-card.is-link:hover, .vz-card:hover, .vz-card:focus-within { transform: translateY(-4px); box-shadow: var(--glow); border-color: var(--accent-ink); }
.c-lesson-art, .ac-card-art, .vz-ic { background: var(--grad-chip); color: #fff; }
.vz-ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; box-shadow: var(--glow); }
.vz-card { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-3); background: var(--surface); border: var(--bd); border-radius: var(--r-2); color: var(--ink); text-decoration: none; }
.vz-card h3 { margin: 0; font-size: var(--fs-1); }
.vz-card p { margin: 0; color: var(--ink-2); font-size: 0.95rem; }
.vz-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: var(--sp-2); }
.vz-grid.is-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.c-stat { border-left: 3px solid transparent; border-image: linear-gradient(180deg, var(--accent), var(--azure)) 1; }
.btn-primary { background: var(--accent); box-shadow: 0 6px 18px rgba(10, 191, 188, 0.35); }
.btn-primary:hover { transform: translateY(-1px); }

/* ---- counters ---- */
.vz-counters { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--sp-2); }
.vz-counter { padding: var(--sp-3); border-radius: var(--r-2); background: var(--surface); border: var(--bd); box-shadow: var(--e-1); transition: transform var(--d-base) var(--ease), box-shadow var(--d-base) var(--ease); }
.vz-counter:hover { transform: translateY(-3px); box-shadow: var(--glow); }
.vz-counter b { display: block; font: var(--w-head) var(--fs-5)/1.1 var(--font-head); letter-spacing: -0.04em; background: var(--grad-chip); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vz-counter span { display: block; margin-top: 6px; color: var(--ink-2); font-size: 0.95rem; }
.sec-dark .vz-counter, .vz-hero .vz-counter { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.16); box-shadow: none; }
.sec-dark .vz-counter b, .vz-hero .vz-counter b { background: linear-gradient(135deg, #5CE1E6, #fff); -webkit-background-clip: text; background-clip: text; }
.sec-dark .vz-counter span, .vz-hero .vz-counter span { color: var(--on-dark); }

/* ---- charts: bars, timeline, ring ---- */
.vz-chart { padding: var(--sp-3); border-radius: var(--r-3); background: var(--surface); border: var(--bd); box-shadow: var(--e-2); }
.vz-chart h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-1); }
.vz-note { margin: var(--sp-2) 0 0; color: var(--ink-3); font-size: var(--fs--1); }
.vz-bars { display: grid; gap: 12px; }
.vz-bar { display: grid; grid-template-columns: minmax(84px, 150px) minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: 0.92rem; color: var(--ink-2); }
.vz-bar-t { height: 22px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.vz-bar-t i { display: block; height: 100%; width: var(--w, 50%); border-radius: 999px; background: var(--grad-chip); transform-origin: left; transition: transform 900ms var(--ease); }
.vz-bar.is-warn .vz-bar-t i { background: linear-gradient(90deg, #C98A1E, #8A5200); }
.vz-bar b { font: var(--w-head) 0.95rem var(--font-head); color: var(--ink); min-width: 4.5ch; text-align: right; }
.js .vz-bars:not(.is-in) .vz-bar-t i { transform: scaleX(0); }
.vz-tl { position: relative; display: grid; gap: 14px; }
.vz-tl-row { display: grid; grid-template-columns: minmax(84px, 150px) minmax(0, 1fr); gap: 12px; align-items: center; font-size: 0.92rem; color: var(--ink-2); }
.vz-tl-track { position: relative; height: 26px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.vz-tl-track i { position: absolute; inset: 0 auto 0 0; width: var(--w, 40%); border-radius: 999px; background: var(--grad-chip); display: flex; align-items: center; justify-content: flex-end; padding-right: 10px; color: #fff; font: var(--w-strong) 0.78rem var(--font-body); font-style: normal; white-space: nowrap; transition: transform 1100ms var(--ease); transform-origin: left; }
.vz-tl-row.is-slow .vz-tl-track i { background: repeating-linear-gradient(135deg, #8A5200 0 10px, #6F4200 10px 20px); }
.js .vz-tl:not(.is-in) .vz-tl-track i { transform: scaleX(0); }
.vz-ring-wrap { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: var(--sp-4); align-items: center; }
@media (max-width: 640px) { .vz-ring-wrap { grid-template-columns: minmax(0, 1fr); justify-items: center; } }
.vz-ring { width: 100%; max-width: 240px; height: auto; display: block; }
.vz-ring .seg { fill: none; stroke-width: 22; stroke: var(--accent); cursor: pointer; transition: stroke-width var(--d-base) var(--ease), opacity var(--d-base) var(--ease); outline: none; }
.vz-ring .seg.s2 { stroke: var(--teal-mid); } .vz-ring .seg.s3 { stroke: var(--azure); }
.vz-ring .seg:hover, .vz-ring .seg:focus-visible { stroke-width: 30; }
.vz-ring.has-pick .seg:not(.is-pick) { opacity: 0.35; }
.vz-ring text { font-family: var(--font-head); font-weight: 700; fill: var(--ink); text-anchor: middle; }
.vz-ring-legend { display: grid; gap: 6px; list-style: none; margin: 0; padding: 0; }
.vz-ring-legend li { padding: 8px 12px; border-radius: 10px; border: 1px solid transparent; color: var(--ink-2); transition: background var(--d-base) var(--ease), border-color var(--d-base) var(--ease); }
.vz-ring-legend li.is-pick { background: var(--wash-teal); border-color: var(--accent); color: var(--ink); }

/* ---- chain diagrams (nodes joined by animated connectors) ---- */
.vz-chain { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; }
.vz-node { flex: 1 1 120px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 14px 10px; border-radius: var(--r-2); background: var(--surface); border: var(--bd); color: var(--ink); box-shadow: var(--e-1); transition: transform var(--d-base) var(--ease), box-shadow var(--d-base) var(--ease), border-color var(--d-base) var(--ease); }
.vz-node:hover { transform: translateY(-3px); box-shadow: var(--glow); border-color: var(--accent-ink); }
.vz-node .vz-ic { width: 38px; height: 38px; }
.vz-node strong { font: var(--w-head) 0.92rem var(--font-head); }
.vz-node span { font-size: 0.8rem; color: var(--ink-2); }
.vz-node.is-core { background: var(--grad-chip); color: #fff; border-color: transparent; }
.vz-node.is-core span { color: #fff; }
.vz-node.is-core .vz-ic { background: rgba(255, 255, 255, 0.2); box-shadow: none; }
.vz-link { flex: 0 0 34px; position: relative; align-self: center; height: 2px; background: repeating-linear-gradient(90deg, var(--accent-ink) 0 6px, transparent 6px 10px); background-size: 20px 2px; animation: vz-dash 1.2s linear infinite; }
.vz-link::after { content: ""; position: absolute; right: -1px; top: -4px; border: 5px solid transparent; border-left: 7px solid var(--accent-ink); border-right: 0; }
@keyframes vz-dash { to { background-position: 20px 0; } }
@media (max-width: 640px) {
  .vz-chain { flex-direction: column; }
  .vz-link { flex-basis: 26px; width: 2px; height: 26px; background: repeating-linear-gradient(180deg, var(--accent-ink) 0 6px, transparent 6px 10px); background-size: 2px 20px; animation-name: vz-dash-v; }
  .vz-link::after { right: auto; left: -4px; top: auto; bottom: -1px; border: 5px solid transparent; border-top: 7px solid var(--accent-ink); border-bottom: 0; }
}
@keyframes vz-dash-v { to { background-position: 0 20px; } }
.vz-live { position: relative; padding: var(--sp-3); border-radius: var(--r-3); background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.2); }
.vz-live-k { margin: 0 0 var(--sp-2); color: var(--on-dark); font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; display: flex; align-items: center; gap: 8px; }
.vz-live-k::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: xp-pulse 1.8s var(--ease) infinite; }
.vz-live-log { margin: var(--sp-2) 0 0; padding: 0; list-style: none; font: 0.8rem var(--font-mono); color: #9FF0C9; display: grid; gap: 2px; }
.vz-live-log li { opacity: 0.35; transition: opacity var(--d-slow) var(--ease); }
.vz-live-log li.is-on { opacity: 1; }

/* ---- carousel of product views ---- */
.vz-car { position: relative; }
.vz-slide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-5); align-items: center; }
@media (max-width: 800px) { .vz-slide { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); } }
/* every slide sits in the same grid cell, so the box is always as tall as the tallest slide and nothing jumps */
.vz-car.is-js .vz-car-view { display: grid; }
.vz-car.is-js .vz-slide { grid-area: 1 / 1; visibility: hidden; opacity: 0; pointer-events: none; }
.vz-car.is-js .vz-slide.is-on { visibility: visible; opacity: 1; pointer-events: auto; }
.vz-car.is-js .vz-slide.is-on { animation: xp-in var(--d-slow) var(--ease); }
.vz-slide h3 { margin: 4px 0 8px; font-size: var(--fs-3); }
.vz-slide p { margin: 0; color: var(--ink-2); font-size: var(--fs-1); max-width: 34ch; }
.vz-car:not(.is-js) .vz-slide { margin-bottom: var(--sp-5); }
.vz-car-ctl { display: none; align-items: center; gap: var(--sp-1); margin-top: var(--sp-3); }
.vz-car.is-js .vz-car-ctl { display: flex; }
.vz-car-ctl button { min-width: 44px; min-height: 44px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); cursor: pointer; display: grid; place-items: center; transition: transform var(--d-base) var(--ease), box-shadow var(--d-base) var(--ease); }
.vz-car-ctl button:hover { box-shadow: var(--glow); transform: translateY(-2px); border-color: var(--accent-ink); }
.vz-car-ctl button:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.vz-dots { display: flex; gap: 2px; margin-inline: auto 0; }
.vz-dots button { border: 0; background: none; border-radius: 0; min-width: 28px; min-height: 44px; }
.vz-dots button i { display: block; width: 10px; height: 10px; margin: auto; border-radius: 50%; background: var(--line-strong); transition: transform var(--d-base) var(--ease), background var(--d-base) var(--ease); }
.vz-dots button[aria-current="true"] i { background: var(--accent-ink); transform: scale(1.5); }
.vz-dots button:hover { box-shadow: none; transform: none; }
/* mock product screens (drawn in HTML/CSS, product behaviours only) */
.mk { background: var(--surface); border: var(--bd); border-radius: var(--r-3); box-shadow: var(--e-3); overflow: hidden; font-size: 0.85rem; color: var(--ink); }
.mk-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--surface-2); border-bottom: var(--bd); }
.mk-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); opacity: 0.6; }
.mk-bar b { margin-left: 8px; font: var(--w-head) 0.8rem var(--font-head); color: var(--ink-2); }
.mk-body { padding: 16px; display: grid; gap: 10px; }
.mk-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mk-tile { display: grid; gap: 6px; justify-items: center; padding: 14px 6px; border-radius: 12px; background: var(--surface-2); border: var(--bd); text-align: center; font-weight: var(--w-strong); transition: transform var(--d-base) var(--ease), box-shadow var(--d-base) var(--ease); }
.mk-tile:hover { transform: translateY(-3px); box-shadow: var(--glow); background: var(--surface); }
.mk-tile .vz-ic { width: 36px; height: 36px; }
.mk-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 9px 12px; border-radius: 10px; background: var(--surface-2); }
.mk-row small { color: var(--ink-3); display: block; font-size: 0.75rem; }
.mk-ok, .mk-wait { font: var(--w-strong) 0.75rem var(--font-body); padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.mk-ok { background: var(--success-soft); color: var(--success); } .mk-wait { background: var(--warning-soft); color: var(--warning); }
.mk-center { display: grid; justify-items: center; gap: 10px; padding: 18px 8px; text-align: center; }
.mk-center .vz-ic { width: 56px; height: 56px; border-radius: 50%; }
.mk-btn { display: inline-block; padding: 8px 16px; border-radius: 999px; background: var(--accent); color: var(--navy); font-weight: var(--w-strong); }
.mk-log { font: 0.76rem var(--font-mono); background: var(--t-bg); color: var(--t-green); padding: 12px 14px; border-radius: 10px; display: grid; gap: 3px; overflow: hidden; }
.mk-log span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-log .k { color: var(--t-cyan); }

/* ---- capability explorer (tabs with a diagram and three bullets) ---- */
.vz-cap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-4); align-items: center; padding-block: var(--sp-2); }
@media (max-width: 860px) { .vz-cap { grid-template-columns: minmax(0, 1fr); } }
.vz-cap-fig { padding: var(--sp-3); border-radius: var(--r-3); background: var(--grad-wash-b); border: var(--bd); }
.vz-bullets { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.vz-bullets li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 12px; color: var(--ink); font-size: 1.02rem; }
.vz-bullets li::before { content: ""; width: 12px; height: 12px; margin-top: 8px; border-radius: 50%; background: var(--grad-chip); }
.vz-tabs-wrap .c-tablist { border-bottom: 0; gap: 8px; padding-bottom: 4px; }
.vz-tabs-wrap .c-tab { border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); margin: 0; }
.vz-tabs-wrap .c-tab:hover { border-color: var(--accent-ink); box-shadow: var(--glow); }
.vz-tabs-wrap .c-tab[aria-selected="true"] { background: var(--accent-ink); color: #fff; border-color: transparent; }
.vz-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--sp-2); }
.vz-pill { padding: 6px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line-strong); font-size: 0.85rem; font-weight: var(--w-strong); color: var(--ink); }

/* ---- architecture strip, tile wall, badges ---- */
.vz-arch { position: relative; padding: var(--sp-4) var(--sp-3) var(--sp-3); border-radius: var(--r-3); border: 2px dashed rgba(255, 255, 255, 0.35); }
.vz-arch-tag { position: absolute; top: -14px; left: 20px; padding: 3px 12px; border-radius: 999px; background: var(--accent); color: var(--navy); font: var(--w-head) 0.78rem var(--font-head); }
.vz-arch-cols { display: grid; grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1.1fr) 44px minmax(0, 1fr); align-items: center; }
@media (max-width: 800px) { .vz-arch-cols { grid-template-columns: minmax(0, 1fr); } .vz-arch .vz-link { margin: 8px auto; flex: none; width: 2px; height: 26px; background: repeating-linear-gradient(180deg, var(--accent) 0 6px, transparent 6px 10px); background-size: 2px 20px; animation-name: vz-dash-v; } .vz-arch .vz-link::after { right: auto; left: -4px; top: auto; bottom: -1px; border: 5px solid transparent; border-top: 7px solid var(--accent); border-bottom: 0; } }
.vz-arch-col { display: grid; gap: 8px; align-content: center; }
.vz-arch-col .vz-node { flex-direction: row; justify-content: flex-start; text-align: left; padding: 10px 12px; flex: none; gap: 10px; }
.vz-arch-col .vz-node > span { display: grid; }
.vz-arch-col .vz-node .vz-ic { width: 34px; height: 34px; flex: none; }
.vz-arch-col h3 { margin: 0 0 4px; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-dark); }
.vz-arch .vz-link { background-image: repeating-linear-gradient(90deg, var(--accent) 0 6px, transparent 6px 10px); }
.vz-arch .vz-link::after { border-left-color: var(--accent); }
.vz-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 10px; }
.vz-tile { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--r-2); background: var(--surface); border: var(--bd); font-weight: var(--w-strong); color: var(--ink); transition: transform var(--d-base) var(--ease), box-shadow var(--d-base) var(--ease), border-color var(--d-base) var(--ease); }
.vz-tile:hover { transform: translateY(-3px); box-shadow: var(--glow); border-color: var(--accent-ink); }
.vz-tile .vz-ic { width: 34px; height: 34px; border-radius: 10px; box-shadow: none; }
.vz-tile.is-std { background: var(--grad-chip); color: #fff; border-color: transparent; }
.vz-tile.is-std .vz-ic { background: rgba(255, 255, 255, 0.2); }
.vz-badges { display: flex; flex-wrap: wrap; gap: 10px; }
.vz-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--accent-ink); color: var(--ink); font-weight: var(--w-strong); font-size: 0.92rem; transition: transform var(--d-base) var(--ease), box-shadow var(--d-base) var(--ease); }
.vz-badge:hover { transform: translateY(-2px); box-shadow: var(--glow); }
.vz-badge .ic { color: var(--success); }

/* ---- CTA band ---- */
.ct-cta { background: var(--grad-cta); position: relative; overflow: hidden; }
.ct-cta::before { content: ""; position: absolute; width: 520px; height: 520px; right: -120px; top: -260px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.22), transparent 65%); pointer-events: none; }
.ct-cta p { color: #fff; }
.ct-cta .btn-primary { background: #fff; color: var(--navy); box-shadow: 0 8px 22px rgba(14, 22, 34, 0.35); }
.ct-cta .btn-primary:hover { background: var(--wash-teal); }
.ct-cta .btn-ghost { border-color: rgba(255, 255, 255, 0.7); }

/* ---- Praxis doors ---- */
.px-doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--sp-3); margin-top: calc(-1 * var(--sp-6)); position: relative; z-index: 2; }
.px-door { display: flex; flex-direction: column; gap: 6px; padding: var(--sp-3); border-radius: var(--r-3); background: var(--surface); border: var(--bd); box-shadow: var(--e-3); color: var(--ink); text-decoration: none; position: relative; overflow: hidden; transition: transform var(--d-base) var(--ease), box-shadow var(--d-base) var(--ease), border-color var(--d-base) var(--ease); }
.px-door::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--grad-line); }
.px-door:hover, .px-door:focus-visible { transform: translateY(-5px); box-shadow: var(--glow); border-color: var(--accent-ink); }
.px-door-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--grad-chip); color: #fff; box-shadow: var(--glow); }
.px-door-k { color: var(--accent-ink); font: var(--w-strong) var(--fs--1) var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; }
.px-door-t { font: var(--w-head) var(--fs-4)/1.1 var(--font-head); letter-spacing: -0.03em; }
.px-door-d { color: var(--ink-2); }
.px-door-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.px-door-chips i { font-style: normal; padding: 3px 10px; border-radius: 999px; background: var(--wash-teal); color: var(--ink); font-size: 0.8rem; font-weight: var(--w-strong); }
.px-door-go { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--accent-ink); font-weight: var(--w-strong); }
.px-doors-wrap { padding-block: 0; }

/* ---- price calculator ---- */
.vz-calc { display: grid; gap: var(--sp-2); }
.vz-calc input[type="range"] { width: 100%; accent-color: var(--accent-ink); min-height: 32px; }
.vz-calc-out { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; }
.vz-calc-out b { font: var(--w-head) var(--fs-5)/1.1 var(--font-head); letter-spacing: -0.04em; background: var(--grad-chip); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vz-calc-out span { color: var(--ink-2); }

/* ---- price cards ---- */
.price { position: relative; transition: transform var(--d-base) var(--ease), box-shadow var(--d-base) var(--ease); }
.price:hover { transform: translateY(-5px); box-shadow: var(--glow); }
.price.is-main { background: var(--grad-band); }

@media (prefers-reduced-motion: reduce) {
  .vz-link, .vz-live-k::before { animation: none; }
  .vz-bar-t i, .vz-tl-track i, .c-card, .vz-card, .px-door, .vz-node, .vz-tile, .price { transition: none; }
  .vz-car.is-js .vz-slide.is-on { animation: none; }
  .c-card.is-link:hover, .vz-card:hover, .px-door:hover, .vz-node:hover, .vz-tile:hover, .price:hover { transform: none; }
}
@media print { .vz-car-ctl { display: none !important; } .page-hero, .hm-hero, .vz-hero { background: none; color: #000; } .page-hero h1, .hm-copy h1 { color: #000; } }

/* ---- versus rows (Why page) ---- */
.vz-vs { display: grid; gap: 10px; }
.vz-vs-head, .vz-vs-row { display: grid; grid-template-columns: minmax(110px, 1fr) minmax(0, 2fr) minmax(0, 2fr); gap: 12px; align-items: stretch; }
.vz-vs-head { color: var(--ink-2); font: var(--w-strong) var(--fs--1) var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; }
.vz-vs-row > * { padding: 14px 16px; border-radius: var(--r-2); }
.vz-vs-q { font: var(--w-head) 0.95rem var(--font-head); display: flex; align-items: center; gap: 10px; }
.vz-vs-a { background: var(--grad-chip); color: #fff; font-weight: var(--w-strong); box-shadow: var(--glow); transition: transform var(--d-base) var(--ease); }
.vz-vs-b { background: var(--surface-2); color: var(--ink-2); border: var(--bd); }
.vz-vs-row:hover .vz-vs-a { transform: translateX(4px); }
@media (max-width: 720px) { .vz-vs-head { display: none; } .vz-vs-row { grid-template-columns: minmax(0, 1fr); gap: 6px; } .vz-vs-row:hover .vz-vs-a { transform: none; } }
.vz-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: var(--sp-3); align-items: stretch; }
.vz-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--sp-3); }
.vz-plans .price { padding: var(--sp-3); border-radius: var(--r-3); border: var(--bd); background: var(--surface); box-shadow: var(--e-2); }
.vz-plans .price.is-main { color: #fff; border-color: transparent; background: var(--grad-band); }
.vz-plans .price.is-main::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--grad-line); border-radius: var(--r-3) var(--r-3) 0 0; }
.vz-plans .amount { color: var(--ink); } .vz-plans .is-main .amount { color: #fff; }
.vz-plans .btn-ghost { background: var(--surface); }
.vz-hero .vz-chart { color: var(--ink); }
.vz-hero .vz-chart h3 { color: var(--ink); }
.vz-ic { color: #fff !important; }
@media (min-width: 641px) {
  .vz-live .vz-chain { flex-wrap: nowrap; }
  .vz-live .vz-link { flex-basis: 14px; }
  .vz-live .vz-node { flex: 1 1 0; padding: 10px 4px; }
  .vz-live .vz-node span:not(.vz-ic) { display: none; }
}
.px-doors-wrap { margin-top: 0; } .ac-hero:has(+ .px-doors-wrap) { padding-bottom: calc(var(--sp-8) + var(--sp-4)); }

/* ---- fixes from browser testing ---- */
.vz-ring-box { position: relative; width: 100%; max-width: 240px; }
.ring-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 50%; display: grid; justify-items: center; text-align: center; pointer-events: none; }
.ring-label { font: var(--w-head) 2.4rem/1 var(--font-head); color: var(--ink); }
.ring-label.is-word { font-size: 0.82rem; line-height: 1.2; overflow-wrap: anywhere; }
.ring-sub { font-size: 0.78rem; color: var(--ink-2); }
.vz-car-ctl button span { display: grid; place-items: center; }
.vz-car-ctl button svg { display: block; }
.vz-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: var(--sp-2); }
.vz-wall + .vz-note + .vz-wall { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.vz-tile span:not(.vz-ic) { text-wrap: balance; min-width: 0; }
@media (max-width: 899px) { .vz-wall + .vz-note + .vz-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .vz-wall, .vz-wall + .vz-note + .vz-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vz-wall > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.px-doors { margin-top: 0; padding-top: var(--sp-5); }
.px-doors-wrap { background: var(--surface); padding-bottom: var(--sp-2); }
.ac-top { padding-top: var(--sp-4); }
.ac-hero:has(+ .px-doors-wrap) { padding-bottom: var(--sp-6); }
.vz-tl-cell { display: grid; gap: 4px; min-width: 0; }
.vz-tl-cap { color: var(--ink-3); font-size: 0.8rem; }
.vz-tl-row { align-items: start; }
.vz-tl-track i { padding: 0; }
.vz-tl-row.is-slow .vz-tl-track i { background: linear-gradient(90deg, #C98A1E, #8A5200); }

/* pricing ladder */
.vz-plans-6 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); align-items: stretch; }
.vz-plans-6 .price-wide { grid-column: span 2; }
@media (max-width: 1100px) { .vz-plans-6 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .vz-plans-6 { grid-template-columns: 1fr; } .vz-plans-6 .price-wide { grid-column: auto; } }
.price .tagline { margin: 0; font-weight: 600; color: var(--ink-2); }
.price.is-main .tagline { color: rgba(255,255,255,0.9); }
.price .chip-soon { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; font-size: 0.72rem; font-weight: 600; vertical-align: middle; background: var(--warning-soft); color: var(--warning); }
.price.price-wide { background: linear-gradient(135deg, #1A2332, #0f5a63); color: #fff; border-color: transparent; }
.price.price-wide h2, .price.price-wide .amount, .price.price-wide .tagline { color: #fff; }
.price.price-wide li, .price.price-wide p { color: rgba(255,255,255,0.85); }
.price.price-wide .btn { background: #fff; color: var(--navy); }
.vz-calc select { width: 100%; padding: 10px 12px; margin: 6px 0 14px; border: 1px solid var(--line-strong); border-radius: 10px; font: inherit; background: #fff; color: var(--ink); }
/* timeline captions must stay inside their row on narrow screens */
.vz-tl-cell, .vz-tl-track { min-width: 0; }
.vz-tl-cap { overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .vz-tl-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}
.plat-xp { max-width: 1120px; margin-inline: auto; color: var(--ink); } .xp { color: var(--ink); } .hm-hero .hm-copy { margin-bottom: 0; }
.c-grid.c-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .c-grid.c-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .c-grid.c-grid-3 { grid-template-columns: minmax(0, 1fr); } }