/* VERA 2.0 page: content sections around the 3D demonstration (content update, Nov 2026).
   Scoped to .vx so it does not touch Reference 1's scene styles. Uses the shared --rh- tokens. */
.vx{position:relative;z-index:2;background:var(--rh-pale);color:var(--rh-navy);font-family:var(--rh-font);font-size:16px;line-height:1.4;padding-block:clamp(64px,7.5vw,120px)}
.vx *{box-sizing:border-box}
.vx.vx-dark{background:var(--rh-navy);color:var(--rh-pale);margin-inline:var(--v-gap);border-radius:var(--v-r)}
.vx.vx-band{background:#ECEAE3;margin-inline:var(--v-gap);border-radius:var(--v-r)}
.vx-dark+.vx,.vx-band+.vx,.vx+.vx-dark,.vx+.vx-band{margin-top:var(--v-gap)}
.vx.vx-hero{margin-top:var(--v-top);padding-block:clamp(72px,10vw,140px) clamp(56px,8vw,104px)}
.vx .vx-eye{display:flex;align-items:center;gap:8px;width:fit-content;padding:6px 12px 6px 10px;border-radius:999px;background:rgba(11,31,82,.06);color:var(--rh-ink-2);
  font:500 .75rem/1.3 var(--rh-mono);letter-spacing:.14em;text-transform:uppercase;margin-bottom:20px}
.vx .vx-eye::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.55}
.vx-dark .vx-eye{background:rgba(246,245,241,.08);color:var(--rh-on-2)}
.vx h1,.vx h2{font-family:var(--rh-font);font-stretch:normal;font-weight:500;letter-spacing:-.03em;line-height:.95;background:none;-webkit-text-fill-color:currentColor;color:inherit}
.vx h1{font-size:clamp(2.5rem,1.4rem + 4.4vw,6rem);max-width:12em}
.vx h2{font-size:clamp(2rem,1.2rem + 3vw,4rem);max-width:14em}
.vx h3{font-family:var(--rh-font);font-stretch:normal;font-size:1.375rem;font-weight:500;letter-spacing:-.025em;line-height:1.1;color:inherit}
.vx .vx-lead{margin-top:24px;font-size:clamp(1.0625rem,.95rem + .5vw,1.375rem);line-height:1.35;letter-spacing:-.01em;color:var(--rh-ink-2);max-width:36em}
.vx-dark .vx-lead{color:var(--rh-on-2)}
.vx .vx-head{display:grid;gap:20px;align-items:end;margin-bottom:clamp(40px,6vw,72px)}
@media (min-width:900px){.vx .vx-head{grid-template-columns:1.1fr 1fr;gap:48px}.vx .vx-head .vx-lead{justify-self:end;margin-top:0}}
.vx .vx-prose{display:grid;gap:28px 64px}
@media (min-width:960px){.vx .vx-prose{grid-template-columns:1fr 1.15fr}}
.vx .vx-prose p{font-size:1.0625rem;color:var(--rh-ink-2)}
.vx .vx-prose p+p{margin-top:16px}
.vx-dark .vx-prose p{color:var(--rh-on-2)}
.vx .vx-cards{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));list-style:none}
.vx .vx-card{border-radius:20px;background:#FBFAF7;box-shadow:inset 0 0 0 1px var(--rh-line);padding:clamp(22px,2.6vw,32px);display:flex;flex-direction:column;gap:12px;transition:transform .4s var(--rh-ease),box-shadow .4s var(--rh-ease)}
.vx .vx-card:hover{transform:translateY(-6px);box-shadow:inset 0 0 0 1px var(--rh-line),0 24px 48px -28px rgba(11,31,82,.35)}
.vx-band .vx-card{background:var(--rh-pale)}
.vx-dark .vx-card{background:var(--rh-navy-2);box-shadow:inset 0 0 0 1px var(--rh-line-d)}
.vx .vx-card p{color:var(--rh-ink-2);font-size:clamp(1rem,.95rem + .2vw,1.125rem);line-height:1.4}
.vx-dark .vx-card p{color:var(--rh-on-2)}
.vx .vx-n{font:500 .75rem var(--rh-mono);letter-spacing:.14em;color:#C4161C}
.vx-dark .vx-n{color:#FF4D4D}
.vx .vx-flow{list-style:none;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));counter-reset:vf;position:relative}
.vx .vx-flow li{position:relative;border-radius:20px;padding:24px;background:var(--rh-navy-2);box-shadow:inset 0 0 0 1px var(--rh-line-d);counter-increment:vf}
.vx .vx-flow li::before{content:counter(vf,decimal-leading-zero);display:block;font:500 .75rem var(--rh-mono);letter-spacing:.14em;color:#FF4D4D;margin-bottom:18px}
.vx .vx-flow li::after{content:"";position:absolute;top:31px;right:-12px;width:12px;height:2px;background:#FF4D4D;opacity:.7}
.vx .vx-flow li:last-child::after{content:"↻";top:20px;right:18px;width:auto;height:auto;background:none;color:#FF4D4D;font-size:1rem;opacity:.9}
.vx .vx-flow p{margin-top:10px;color:var(--rh-on-2);font-size:1rem;line-height:1.4}
.vx .vx-sys{display:grid;gap:24px;align-items:center}
@media (min-width:960px){.vx .vx-sys{grid-template-columns:1.2fr auto .9fr}}
.vx .vx-chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.vx .vx-chips li{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--rh-line);background:#FBFAF7;font-size:.9375rem}
.vx .vx-arrow{font:500 .75rem var(--rh-mono);letter-spacing:.14em;text-transform:uppercase;color:#C4161C;text-align:center}
.vx .vx-layer{border-radius:20px;background:var(--rh-navy);color:var(--rh-pale);padding:28px;display:grid;gap:10px}
.vx .vx-layer img{width:48px;height:48px}
.vx .vx-layer p{color:var(--rh-on-2)}
.vx .vx-note{margin-top:20px;font-size:.9375rem;color:var(--rh-ink-3);max-width:46em}
.vx-dark .vx-note{color:var(--rh-on-3)}
.vx .vx-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.vx .vx-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:.875rem 1.5rem;border-radius:12px;font:500 1rem/1.2 var(--rh-font);letter-spacing:-.01em;text-decoration:none;transition:transform .3s var(--rh-ease),background-color .2s}
.vx .vx-btn-p{background:var(--rh-pale);color:var(--rh-navy)}
.vx .vx-btn-d{background:var(--rh-navy);color:var(--rh-pale)}
.vx .vx-btn-l{box-shadow:inset 0 0 0 1px currentColor;color:inherit}
.vx .vx-btn:hover{transform:translateY(-2px)}
.vx .vx-btn:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.vx .vx-logo{width:clamp(72px,8vw,104px);height:auto;margin-bottom:28px;filter:drop-shadow(0 0 24px rgba(255,77,77,.25))}
.vx .vx-center{text-align:center}.vx .vx-center h2,.vx .vx-center .vx-lead,.vx .vx-center .vx-eye{margin-inline:auto}.vx .vx-center .vx-btns{justify-content:center}
.vx .vx-wrap{width:min(1320px,100% - 2 * var(--rh-gutter));margin-inline:auto}
.vx-demo-tag{display:inline-flex;align-items:center;gap:6px;font:500 .6875rem var(--rh-mono);letter-spacing:.12em;text-transform:uppercase;color:#C9CDDA}
@media (prefers-reduced-motion:reduce){.vx .vx-card,.vx .vx-btn{transition:none}.vx .vx-card:hover,.vx .vx-btn:hover{transform:none}}