/* ═══════════════════════════════════════════════════════════════════════════
   VIRA Wealth — marketing site stylesheet
   Source of truth: docs/design/vira-website/README.md and the
   .dc.html prototypes beside it. Values are transcribed, not approximated; where
   a prototype used a literal that equals a token, the token is used.

   Order: fonts → tokens → surfaces → base → type → layout → components (one
   block each, in page order) → keyframes → motion → breakpoint → reduced motion.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Fonts (self-hosted; never a third-party font host) ──────────────────── */
@font-face { font-family: 'Season Sans'; src: url('../fonts/SeasonSans-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Season Sans'; src: url('../fonts/SeasonSans-SemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Serrif'; src: url('../fonts/Serrif-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Serrif'; src: url('../fonts/Serrif-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Serrif'; src: url('../fonts/Serrif-RegularItalic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }

/* ── Tokens ──────────────────────────────────────────────────────────────── */
:root {
    /* colour */
    --ink: #1B3557;
    --ink-deep: #142A47;
    --ink-mid: #152C4B;
    --ink-light: #264675;
    --ink-menu: #0F2140;
    --graphite: #1A2129;
    --bone: #F8F4EF;
    --bone-warm: #F0E8DE;
    --tan: #E8CFA6;
    --bronze: #8A6540;
    --white: #ffffff;
    --grey-text: #A7ABB0;
    --hair-light: #D9D4CB;
    --hair-dark: rgba(248, 244, 239, .15);
    --hair-dark-12: rgba(248, 244, 239, .12);
    --hair-dark-10: rgba(248, 244, 239, .1);
    --hair-dark-08: rgba(248, 244, 239, .08);
    --on-ink-body: rgba(248, 244, 239, .82);
    --on-ink-para: rgba(248, 244, 239, .8);
    --on-ink-2: rgba(248, 244, 239, .7);
    --on-ink-3: rgba(248, 244, 239, .6);
    --on-ink-legal: rgba(248, 244, 239, .5);
    --on-bone-body: rgba(27, 53, 87, .75);
    --on-bone-78: rgba(27, 53, 87, .78);
    --on-bone-80: rgba(27, 53, 87, .8);
    --on-bone-72: rgba(27, 53, 87, .72);
    --on-bone-2: rgba(27, 53, 87, .6);
    --on-bone-55: rgba(27, 53, 87, .55);
    --hero-gradient: radial-gradient(ellipse 90% 60% at 50% 30%, var(--ink-light) 0%, var(--ink) 55%, var(--ink-deep) 100%);
    --page-gradient: radial-gradient(ellipse 90% 60% at 50% 20%, var(--ink-light) 0%, var(--ink) 55%, var(--ink-deep) 100%);

    /* type */
    --font-sans: 'Season Sans', system-ui, sans-serif;
    --font-serif: 'Serrif', Georgia, serif;
    /* The one type scale (README 3). H1 and H2 are the only display sizes; no
       page or component sets a display size of its own. */
    --fs-h1: clamp(36px, 5.6vw, 58px);
    --fs-h2: clamp(29px, 4.2vw, 44px);
    --fs-h3: clamp(24px, 2.8vw, 32px);
    --fs-tile: clamp(20px, 2.1vw, 25px);
    --fs-ktr: clamp(22px, 2.2vw, 28px);
    --fs-count: clamp(56px, 7vw, 92px);
    --fs-lede: clamp(17px, 1.6vw, 19px);
    --fs-body: 16px;
    --fs-eyebrow: 12.5px;
    --fs-eyebrow-sm: 11px;

    /* space */
    --gutter: clamp(18px, 4vw, 40px);
    --gutter-nav: clamp(16px, 4vw, 40px);
    --max: 1240px;
    --sect-y: clamp(80px, 12vh, 140px);
    --cta-y: clamp(80px, 14vh, 160px);
    --col-gap: clamp(40px, 6vw, 90px);
    --col-gap-wide: clamp(32px, 5vw, 80px);
    --card-gap: 14px;
    --sticky-top: 84px;

    /* radius / shadow / motion */
    --r-control: 4px;  /* buttons, chips, small controls */
    --r-card: 20px;    /* cards and panels */
    --r-panel: 20px;
    --r-input: 12px;   /* form inputs */
    --r-rail: 4px;
    --r-assistant: 20px;
    --sh-device: 0 40px 90px -30px rgba(15, 18, 23, .9);
    --sh-form: 0 30px 70px -40px rgba(27, 53, 87, .35);
    --ease: cubic-bezier(.2, .8, .2, 1);
    --t-card: .35s;
    --t-chip: .2s;
}

/* ── Surfaces: sections alternate ink and bone; the contextual colours follow ─ */
[data-surface="ink"]  { background: var(--ink);       color: var(--bone); --eyebrow: var(--tan);    --body: var(--on-ink-para);  --lede: var(--on-ink-body); --hair: var(--hair-dark);  --focus: var(--tan); }
[data-surface="bone"] { background: var(--bone);      color: var(--ink);  --eyebrow: var(--bronze); --body: var(--on-bone-body); --lede: var(--on-bone-78); --hair: var(--hair-light); --focus: var(--bronze); }
[data-surface="warm"] { background: var(--bone-warm); color: var(--ink);  --eyebrow: var(--bronze); --body: var(--on-bone-80);   --lede: var(--on-bone-78); --hair: var(--hair-light); --focus: var(--bronze); }
[data-surface="tan"]  { background: var(--tan);       color: var(--ink);  --eyebrow: var(--bronze); --body: var(--on-bone-78);   --lede: var(--on-bone-78); --hair: rgba(27,53,87,.18); --focus: var(--ink); }

/* ── Base ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--ink);
    color: var(--bone);
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    --eyebrow: var(--tan); --body: var(--on-ink-para); --lede: var(--on-ink-body); --hair: var(--hair-dark); --focus: var(--tan);
}
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; }
h1, h2, h3, p { margin: 0; }
[hidden] { display: none !important; }

/* Visible focus on every interactive element (the prototype only had it on fields). */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--focus, var(--bronze));
    outline-offset: 2px;
}

/* FocusOnNavigate moves focus to each page's h1 after a navigation, which needs
   tabindex="-1" on it, and a ring round the headline reads as a box drawn round
   the design. This must SUPPRESS the outline, not merely opt the h1 out of the
   rule above: excluding it there stops us drawing a ring but leaves the
   browser's own default (Chrome's outline-style:auto), which is the box that
   shipped. Safe because nothing carrying tabindex="-1" is keyboard-reachable —
   no one can tab to it, so no one loses an affordance they could have used.
   The selector is exact so that genuinely keyboard-operable elements — anything
   carrying a non-negative tabindex — keep their ring. */
[tabindex="-1"]:focus { outline: none; }
.field :where(input, select, textarea):focus-visible { outline: 2px solid var(--bronze); outline-offset: 1px; }

/* ── Type ────────────────────────────────────────────────────────────────── */
.eyebrow {
    font-size: var(--fs-eyebrow);
    font-weight: 600;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--eyebrow);
    margin-bottom: 18px;
    line-height: 1.3;
}
.eyebrow-sm { font-size: var(--fs-eyebrow-sm); letter-spacing: .24em; margin-bottom: 14px; }
.eyebrow-step { letter-spacing: .24em; margin-bottom: 8px; }
.h3-step { font-size: var(--fs-h3); }

/* No italics on headlines anywhere, and every word inside one headline is the
   same colour: both were explicit client notes (README 3). There is
   deliberately no `.h1 em` rule here to reintroduce one. */
.h1, .h2, .h3 { font-family: var(--font-serif); font-weight: 500; text-wrap: balance; }
.h1 { font-size: var(--fs-h1); line-height: 1.06; letter-spacing: -.01em; }
.h1-page { font-size: var(--fs-h1); line-height: 1.06; }
.h2 { font-size: var(--fs-h2); line-height: 1.12; letter-spacing: -.01em; margin-bottom: 22px; text-wrap: pretty; }
.h2-sm { font-size: var(--fs-h2); }
/* Two headings sit at H1 size because the approved design puts them there:
   Home's "How it works" H2 and the How-it-works hero that echoes it. */
.h2-hero { font-size: var(--fs-h1); line-height: 1.06; }
.h2-15ch { max-width: 15ch; }
.h2-24ch { max-width: 24ch; }
.h2-tight { margin-bottom: 0; }
.h3 { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -.005em; margin-bottom: 10px; }

.lede { font-size: var(--fs-lede); line-height: 1.55; color: var(--lede); max-width: 520px; text-wrap: pretty; }
.lede-accent { color: var(--tan); }
.body { font-size: var(--fs-body); line-height: 1.55; color: var(--body); max-width: 460px; }
.body + .body { margin-top: 16px; }
.body-lg { font-size: 16.5px; line-height: 1.6; max-width: 560px; margin-bottom: 22px; }
.body-none { max-width: none; font-size: 16.5px; line-height: 1.6; }
.body-480 { max-width: 480px; }
.body-560 { max-width: 560px; }

.text-link { font-size: 15px; font-weight: 600; color: var(--bronze); min-height: 44px; display: flex; align-items: center; gap: 8px; transition: color var(--t-chip); }
.text-link:hover { color: var(--ink); }
.text-link-tan { color: var(--tan); }
.text-link-tan:hover { color: var(--bone); }
.inline-link { color: var(--bronze); font-weight: 600; border-bottom: 1px solid rgba(138, 101, 64, .4); transition: color var(--t-chip), border-color var(--t-chip); }
.inline-link:hover { color: var(--ink); border-bottom-color: var(--ink); }
/* A link inside an H1. Headlines stay one colour (README section 3), so this
   inherits the headline colour and only goes tan on hover. */
.headline-link { color: inherit; transition: color var(--t-chip); }
.headline-link:hover { color: var(--tan); }

/* ── Layout ──────────────────────────────────────────────────────────────── */
.wrap { max-width: var(--max); margin: 0 auto; width: 100%; }
.section { padding: var(--sect-y) var(--gutter); }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--col-gap); }
.grid-2-center { align-items: center; }
.grid-2-start { align-items: start; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.gap-wide { gap: var(--col-gap-wide); }
.section-lead { max-width: 760px; margin-bottom: clamp(36px, 5vh, 64px); }
.section-lead-wide { max-width: 900px; }
.section-lede { margin-top: 28px; max-width: 720px; }
.section-body { margin-top: clamp(32px, 5vh, 52px); }
.section-actions { margin-top: clamp(32px, 5vh, 52px); display: flex; }

/* Label-plus-content rows (About). The label column is inside the 1240px
   container, never an outdent, so the page keeps one left edge (README 4). */
.side-label-grid { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.side-label { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--eyebrow); line-height: 1.3; }
.rule { border: 0; border-top: 1px solid var(--hair); margin: 12px 0 2px; width: 100%; }
.rule-left { border-left: 1px solid var(--hair); padding-left: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.stack-col { display: flex; flex-direction: column; gap: 22px; }
.self-start { align-self: flex-start; }
.sticky-110 { position: sticky; top: 110px; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    border-radius: var(--r-control);
    white-space: nowrap;
    min-height: 44px;
    padding: 0 28px;
    transition: background var(--t-chip), color var(--t-chip), border-color var(--t-chip);
}
.btn-tan { background: var(--tan); color: var(--ink); }
.btn-tan:hover { background: var(--bone); color: var(--ink); }
.btn-ink { background: var(--ink); color: var(--bone); }
.btn-ink:hover { background: var(--bronze); color: var(--bone); }
.btn-ghost { color: var(--bone); border: 1px solid rgba(248, 244, 239, .3); padding: 0 22px; }
.btn-ghost:hover { border-color: var(--tan); color: var(--tan); }
.btn-outline-tan { color: var(--tan); border: 1px solid rgba(232, 207, 166, .45); background: transparent; }
.btn-outline-tan:hover { background: rgba(232, 207, 166, .1); }
.btn-sm { font-size: 13.5px; padding: 0 16px; }
.btn-lg { font-size: 15.5px; padding: 0 32px; min-height: 52px; }
.btn-nav { font-size: 13.5px; padding: 0 18px; }
.btn-hero-ghost { min-height: 52px; padding: 0 28px; border-color: rgba(248, 244, 239, .45); }
.btn-submit { font-size: 15.5px; padding: 0 32px; min-height: 52px; }
.btn-submit:disabled { cursor: default; opacity: .85; }
.icon-btn {
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(248, 244, 239, .25);
    display: grid; place-items: center;
    color: var(--bone);
}

/* ── Nav ─────────────────────────────────────────────────────────────────── */
.nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 50;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px var(--gutter-nav);
    border-bottom: 1px solid var(--hair-dark-08);
    color: var(--bone);
    isolation: isolate;
}
/* The blur lives on a pseudo-element, not the nav itself: backdrop-filter on an
   element makes it the containing block for position:fixed descendants, which
   would pin the mobile overlay inside the 64px bar. */
.nav::before { content: ""; position: absolute; inset: 0; z-index: -1; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); background: rgba(27, 53, 87, .6); }
.nav-lockup { display: flex; align-items: center; gap: 10px; min-height: 44px; min-width: 0; }
.nav-mark { width: 26px; height: 26px; object-fit: contain; }
.nav-wordmark { font-family: var(--font-serif); font-weight: 500; font-size: 22px; letter-spacing: .12em; color: var(--bone); }
.nav-byline { font-size: 13.5px; letter-spacing: .06em; color: var(--tan); margin-top: 5px; white-space: nowrap; }
.nav-byline b { font-weight: 600; }
.nav-right { display: flex; align-items: center; gap: 8px; flex: none; }
.menu-panel { display: flex; align-items: center; }
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 30px; }
.nav-link {
    display: inline-block;
    font-size: 14px;
    padding: 6px 0;
    border-bottom: 1px solid transparent;
    color: var(--on-ink-body);
    transition: color var(--t-chip), border-color var(--t-chip);
}
.nav-link:hover { color: var(--tan); }
.nav-link[aria-current="page"] { color: var(--tan); border-bottom-color: var(--tan); }
.burger { display: block; width: 18px; height: 2px; background: var(--bone); border-radius: 2px; box-shadow: 0 -6px 0 var(--bone), 0 6px 0 var(--bone); }
.menu-close { font-size: 24px; line-height: 1; }
.menu-head, .menu-cta, .menu-foot { display: none; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.footer { background: var(--ink-deep); color: var(--on-ink-2); padding: clamp(56px, 8vh, 88px) var(--gutter) 40px; --focus: var(--tan); }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 40px 32px; }
.footer-top {
    grid-column: 1 / -1;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 24px 48px; align-items: start;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--hair-dark-12);
}
.footer-lockup { max-width: min(90vw, 420px); }
.footer-blurb { font-size: 15px; line-height: 1.55; color: var(--on-ink-2); max-width: 460px; text-wrap: pretty; }
.footer-blurb a { color: var(--tan); }
.footer-heading { font-size: 11px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--tan); margin-bottom: 14px; }
.footer-links { display: flex; flex-direction: column; }
.footer-link { font-size: 15px; color: var(--on-ink-para); min-height: 44px; display: flex; align-items: center; gap: 8px; transition: color var(--t-chip); }
.footer-link:hover { color: var(--tan); }
.footer-ext { font-size: 13px; opacity: .6; }
.footer-bottom {
    grid-column: 1 / -1;
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
    padding-top: 24px;
    border-top: 1px solid var(--hair-dark-12);
    font-size: 12px; color: var(--on-ink-legal);
}

/* ── PoweredBy lockup (HTML rebuild of the brand SVG; sized by --lockup-h) ─ */
.lockup { --lockup-h: 64px; display: inline-flex; align-items: center; gap: calc(var(--lockup-h) * .16); height: var(--lockup-h); color: var(--bone); font-size: var(--lockup-h); line-height: 1; }
.lockup-mark { height: calc(var(--lockup-h) * .58); width: auto; object-fit: contain; }
.lockup-text { display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--lockup-h) * .06); }
.lockup-vira { font-family: var(--font-serif); font-weight: 500; font-size: calc(var(--lockup-h) * .46); letter-spacing: .19em; line-height: 1; }
.lockup-by { display: flex; align-items: baseline; gap: calc(var(--lockup-h) * .08); }
.lockup-powered { font-family: var(--font-sans); font-weight: 600; font-size: calc(var(--lockup-h) * .085); letter-spacing: .26em; text-transform: uppercase; }
.lockup-verapath { font-family: var(--font-serif); font-weight: 400; font-size: calc(var(--lockup-h) * .22); line-height: 1; }

/* ── Home: hero ──────────────────────────────────────────────────────────── */
.hero {
    position: relative;
    min-height: 100vh; min-height: 100svh;
    display: grid; align-items: end;
    overflow: hidden;
    background: var(--hero-gradient);
    color: var(--bone);
}
.hero-scene, .hero-scrim { position: absolute; inset: 0; }
.hero-scrim { background: linear-gradient(180deg, rgba(27, 53, 87, 0) 40%, rgba(27, 53, 87, .85) 100%); pointer-events: none; }
.hero-inner { position: relative; padding: 120px var(--gutter) clamp(40px, 7vh, 80px); }
.hero .eyebrow { margin-bottom: 22px; }
.hero-line { display: block; }
.hero-line-flex { display: flex; gap: .22em; align-items: baseline; flex-wrap: wrap; }
.hero-word { display: inline-block; perspective: 600px; min-width: 3ch; }
/* The rotating word is the one place a headline changes colour, and it is a
   whole word rather than an emphasis inside a phrase. */
.hero-word-item { display: inline-block; color: var(--tan); animation: wordin .7s var(--ease) both; }
.hero-row { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 28px; margin-top: clamp(28px, 5vh, 48px); }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
vira-hero { display: block; width: 100%; height: 100%; }

/* ── Home: marquee ───────────────────────────────────────────────────────── */
.marquee { overflow: hidden; border-top: 1px solid var(--hair-dark-10); border-bottom: 1px solid var(--hair-dark-10); padding: 18px 0; background: var(--ink-mid); }
.marquee-track { display: flex; width: max-content; animation: marquee 44s linear infinite; }
.marquee-item { display: flex; align-items: center; gap: 22px; padding: 0 22px; font-family: var(--font-serif); font-size: clamp(18px, 2vw, 24px); color: var(--on-ink-2); white-space: nowrap; }
.marquee-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--tan); display: inline-block; }

/* ── Home: Keep / Transform / Retire row ─────────────────────────────────── */
.ktr {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(24px, 4vw, 48px);
    margin-top: clamp(32px, 5vh, 52px);
    padding-top: 28px;
    border-top: 1px solid var(--hair);
}
.ktr-keyword { font-family: var(--font-serif); font-size: var(--fs-ktr); font-weight: 500; letter-spacing: .02em; text-transform: uppercase; color: var(--bronze); line-height: 1.05; margin-bottom: 12px; }
.ktr-body { font-size: var(--fs-body); line-height: 1.55; color: var(--body); max-width: 30ch; }

/* ── Capability tiles (Home's six and all fifteen on /capabilities) ──────── */
/* One spec, both pages (README 5). Deliberately NO min-height and NO
   justify-content: space-between — the tiles size to their content (~148px) and
   their contents stay together. Both were removed after the tiles read as too
   empty; do not add them back. */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--card-gap); }
.tile {
    border-radius: var(--r-card);
    padding: 22px 22px 24px;
    display: flex; flex-direction: column; gap: 12px;
    transition: transform var(--t-card) var(--ease), background var(--t-card);
}
.tile-index { font-family: var(--font-serif); font-size: 16px; line-height: 1; color: var(--bronze); }
.tile-title { font-size: var(--fs-tile); line-height: 1.18; margin-bottom: 6px; }
.tile-body { font-size: 14.5px; line-height: 1.5; opacity: .78; }
/* Cream tiles on Home's ink section; white tiles on the cream Capabilities
   page. The ground is the only difference between the two grids. */
[data-tile="cream"] .tile { background: var(--bone); color: var(--ink); border: 1px solid var(--hair-dark); }
[data-tile="cream"] .tile-index { color: var(--ink); opacity: .6; }
[data-tile="white"] .tile { background: var(--white); color: var(--ink); border: 1px solid var(--hair-light); }
a.tile:hover { transform: translateY(-6px); background: var(--white); }

.cap-lead { margin-bottom: clamp(36px, 5vh, 64px); }
.cap-lead-copy { display: flex; flex-direction: column; gap: 16px; padding-top: 44px; }

/* ── Closing CTA ─────────────────────────────────────────────────────────── */
.cta { position: relative; overflow: hidden; padding: var(--cta-y) var(--gutter); }
.cta-circle { position: absolute; aspect-ratio: 1; border-radius: 50%; pointer-events: none; }
.cta-circle-a { right: -8%; top: -20%; width: 60vw; max-width: 700px; border: 1px solid rgba(27, 53, 87, .18); }
.cta-inner { position: relative; }
/* The CTA eyebrow is ink, not bronze — both approved CTA bands set it so. */
.cta-eyebrow { margin-bottom: 24px; color: var(--ink); }
.cta-h2 { max-width: 14ch; margin-bottom: 20px; }
.cta-body { font-size: 16.5px; line-height: 1.6; color: var(--body); margin-bottom: 36px; max-width: 560px; }
/* Home's band: headline left, copy and button right, bottom-aligned, both
   running the full container — no max-width caps on the text. */
.cta-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: end; }
.cta-h2-wide { max-width: none; margin-bottom: 0; }
.cta-body-wide { max-width: none; margin-bottom: 32px; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.cta-aside { font-size: 15px; color: rgba(27, 53, 87, .7); }

/* ── Page hero (Products / Industries / How / About / Contact) ───────────── */
.page-hero { position: relative; padding: 150px var(--gutter) clamp(56px, 8vh, 96px); background: var(--page-gradient); overflow: hidden; color: var(--bone); }
.page-hero-contact { padding-bottom: clamp(40px, 6vh, 72px); }
.page-hero-tall { min-height: 88vh; min-height: 88svh; display: grid; align-items: end; }
.page-hero-inner { position: relative; }
.page-hero .eyebrow { margin-bottom: 22px; }
.page-hero-lede { margin-top: 28px; }
.page-hero-actions { margin-top: clamp(28px, 4vh, 40px); display: flex; flex-wrap: wrap; gap: 12px; }

/* ── Explorer (Products modules, Industries segments) ────────────────────── */
.section-explorer { padding: clamp(56px, 9vh, 110px) var(--gutter); }
.explorer { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(24px, 4vw, 64px); align-items: start; }
.rail { display: flex; flex-direction: column; gap: 6px; position: sticky; top: var(--sticky-top); }
.rail-item {
    text-align: left;
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 12px 18px;
    border-radius: var(--r-rail);
    border: 1px solid var(--hair-light);
    background: var(--white); color: var(--ink);
    min-height: 52px;
    transition: background .25s, color .25s, border-color .25s;
}
.rail-item-tall { padding: 14px 18px; min-height: 56px; }
.rail-item[aria-selected="true"] { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.rail-item:hover:not([aria-selected="true"]) { border-color: var(--ink); }
.rail-item-main { display: flex; align-items: center; gap: 12px; }
.rail-item-index { font-family: var(--font-serif); font-style: italic; opacity: .6; font-size: 15px; }
.rail-item-name { font-weight: 600; font-size: 16px; }
.rail-item-arrow { font-size: 16px; opacity: .6; }
.panes { min-height: 520px; }
.pane { display: flex; flex-direction: column; gap: 22px; }
.pane-segment { gap: 26px; }
.pane-title-sm { margin-bottom: 14px; }
/* ── Capabilities: Vira, on a phone ──────────────────────────────────────────
   The handoff draws this section as a device mockup rather than a floating card:
   an ink body with a notch around a bone screen, drifting slowly. Values are
   transcribed from `VIRA Products.dc.html`; the literals there that equal a
   token use the token. */
.assistant-wrap { display: flex; justify-content: center; }
.vira-phone {
    /* content-box on purpose. The handoff sets width:330px with 12px of padding on
       a page with no border-box reset, so 330px is the screen and the body comes
       out 354px. Under this site's reset the same numbers would squeeze the screen
       to 306px and the wordmark would collide with the chips. */
    box-sizing: content-box;
    position: relative; width: min(100%, 330px); aspect-ratio: 9 / 19;
    background: var(--ink-menu); border-radius: 44px; padding: 12px;
    box-shadow: 0 40px 90px rgba(0, 0, 0, .45), inset 0 0 0 2px var(--hair-dark-12);
    animation: drift 4s ease-in-out infinite alternate;
    --focus: var(--bronze);
}
/* Yes / Not now sit on the drifting body. Hold it still while someone is aiming
   at them — the resting frame is unchanged, the target stops moving. */
.vira-phone:hover, .vira-phone:focus-within { animation-play-state: paused; }
.vira-phone-notch {
    position: absolute; top: 22px; left: 50%; transform: translateX(-50%); z-index: 2;
    width: 96px; height: 28px; background: var(--ink-menu); border-radius: var(--r-control);
}
.vira-screen {
    height: 100%; overflow: hidden; box-sizing: border-box;
    display: flex; flex-direction: column;
    background: var(--bone); color: var(--ink);
    border-radius: 34px; padding: 58px 18px 22px; font-size: 13px;
}
/* space-between as the handoff has it. It wraps rather than collides once the
   screen is narrower than the phone's 330px — below about 360px of viewport the
   chips drop to their own line. */
.vira-screen-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 16px; }
.vira-screen-lockup { display: flex; align-items: center; gap: 8px; }
.vira-screen-lockup img { width: 20px; height: 20px; object-fit: contain; }
.vira-screen-word { font-family: var(--font-serif); font-size: 17px; font-weight: 500; letter-spacing: .1em; }
.vira-screen-chips { display: flex; gap: 6px; }
.vira-screen-chip {
    font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
    color: var(--bronze); border: 1px solid var(--hair-light);
    border-radius: var(--r-control); padding: 4px 8px; white-space: nowrap;
}
.vira-screen-label {
    font-size: var(--fs-eyebrow-sm); font-weight: 600; letter-spacing: .2em;
    text-transform: uppercase; color: var(--bronze); margin-bottom: 8px;
}
.vira-query {
    background: var(--white); border: 1px solid var(--hair-light); border-radius: var(--r-control);
    padding: 12px 14px; font-size: 14px; line-height: 1.4; min-height: 44px; box-sizing: border-box;
}
.vira-caret {
    display: inline-block; width: 2px; height: 15px; background: var(--ink);
    vertical-align: -3px; margin-left: 2px; animation: blink 1s steps(1) infinite;
}
.vira-answer { margin-top: 14px; animation: fadein .6s both; }
.vira-answer[hidden] { display: none; }
.vira-answer-head { font-size: 12px; color: rgba(27, 53, 87, .7); margin-bottom: 8px; }
.vira-rows { display: flex; flex-direction: column; gap: 6px; }
.vira-row {
    display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center;
    background: var(--white); border: 1px solid var(--hair-light); border-radius: 12px; padding: 9px 12px;
    animation: rise .5s both; animation-delay: var(--row-delay, 0ms);
}
.vira-row-label { font-size: 12.5px; font-weight: 600; }
.vira-row-value { font-family: var(--font-serif); font-size: 15px; color: var(--bronze); }
.vira-row-track { grid-column: 1 / -1; height: 4px; background: var(--bone-warm); border-radius: 2px; overflow: hidden; }
.vira-row-fill { display: block; height: 100%; background: var(--ink); border-radius: 2px; transform-origin: left; animation: bar 1s .3s both; }
.vira-confirm { margin-top: 12px; padding-top: 10px; border-top: 1px solid #E6E0D6; }
.vira-ask { font-family: var(--font-serif); font-size: 15px; line-height: 1.3; margin-bottom: 8px; }
.vira-confirm-actions { display: flex; gap: 6px; }
.vira-btn {
    font-family: inherit; font-size: 12.5px; font-weight: 600; border-radius: var(--r-control);
    padding: 0 14px; min-height: 44px; cursor: pointer;
}
.vira-btn-ink { background: var(--ink); color: var(--bone); border: 0; }
.vira-btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--hair-light); }
.vira-acted {
    font-size: 12.5px; font-weight: 600; color: var(--bronze);
    min-height: 40px; display: flex; align-items: center; animation: fadein .4s both;
}
.vira-answer[data-answer-state="pending"] .vira-acted { display: none; }
.vira-answer:not([data-answer-state="pending"]) .vira-confirm-actions { display: none; }
.vira-answer:not([data-answer-state="yes"]) [data-assistant-yes],
.vira-answer:not([data-answer-state="no"]) [data-assistant-no] { display: none; }
.vira-dots { margin-top: auto; display: flex; gap: 6px; justify-content: center; padding-top: 14px; }
.vira-dot { height: 4px; flex: 1; border-radius: 2px; background: var(--hair-light); }
.vira-dot.is-on { background: var(--ink); }

/* The prompts beside the panel. Picking one drives the screen. */
.vira-prompts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.vira-prompt {
    font-family: inherit; font-size: 13.5px; text-align: left; cursor: pointer;
    color: var(--bone); background: rgba(248, 244, 239, .06);
    border: 1px solid rgba(248, 244, 239, .22); border-radius: var(--r-control);
    padding: 11px 16px; min-height: 44px;
    transition: color var(--t-chip), border-color var(--t-chip);
}
.vira-prompt:hover { border-color: var(--tan); color: var(--tan); }

/* ── Capabilities: the tan wash under the Vira section ──────────────────── */
.section-glow { position: relative; overflow: hidden; }
.section-glow-wash { position: absolute; inset: auto -20% -30% -20%; height: 70%; background: radial-gradient(ellipse at 50% 100%, rgba(232, 207, 166, .18), transparent 70%); pointer-events: none; }
.section-glow > .wrap { position: relative; }

/* ── Guardrails: checks and numbered panel rows ──────────────────────────── */
.checks { display: flex; flex-direction: column; gap: 10px; }
.check { display: flex; align-items: flex-start; gap: 12px; font-size: 15.5px; line-height: 1.45; }
.check-mark { color: var(--bronze); font-weight: 600; }
.panel-list { display: flex; flex-direction: column; gap: 1px; background: var(--hair-dark); border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--hair-dark); }
.panel-row { background: var(--ink); display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: start; padding: 22px 24px; }
.panel-row-index { font-family: var(--font-serif); font-style: italic; font-size: 18px; color: var(--tan); }
.panel-row-text { font-family: var(--font-serif); font-size: clamp(20px, 2vw, 26px); line-height: 1.25; }

/* ── Panel grids (Industries "three things", How "Keep/Replicate/Retire") ── */
.panel-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 1px;
    background: var(--hair-dark); border: 1px solid var(--hair-dark); border-radius: var(--r-card); overflow: hidden;
    margin-top: clamp(40px, 6vh, 72px);
}
.panel { background: var(--ink); padding: 32px 28px 36px; }
.panel-title { font-family: var(--font-serif); font-size: var(--fs-h3); font-weight: 500; color: var(--tan); line-height: 1.2; margin-bottom: 18px; }
.panel-keyword { font-family: var(--font-serif); font-size: var(--fs-ktr); font-weight: 500; text-transform: uppercase; letter-spacing: .02em; color: var(--tan); line-height: 1.05; margin-bottom: 22px; }
.panel-body { font-size: 16px; line-height: 1.55; color: var(--on-ink-para); }

/* ── Industries ──────────────────────────────────────────────────────────── */
.segment-line { font-family: var(--font-serif); font-style: italic; font-size: clamp(20px, 2vw, 26px); line-height: 1.3; color: var(--bronze); max-width: 560px; }
.hair-list { display: flex; flex-direction: column; border-top: 1px solid var(--hair-light); }
.hair-row { display: grid; grid-template-columns: 44px 1fr; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--hair-light); font-size: 16.5px; line-height: 1.5; }
.hair-row-index { font-family: var(--font-serif); font-style: italic; color: var(--bronze); }
.fit-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fit-chip {
    font-size: 13.5px; font-weight: 600;
    border: 1px solid var(--hair-light); border-radius: var(--r-control);
    padding: 0 14px; min-height: 40px; display: flex; align-items: center;
    color: var(--ink); background: transparent; opacity: .55;
    transition: background .3s, color .3s, opacity .3s;
}
.fit-chip[data-on="true"] { background: var(--ink); color: var(--bone); border-color: var(--ink); opacity: 1; }

/* ── How it works: timeline ──────────────────────────────────────────────── */
.section-steps { padding: clamp(72px, 11vh, 130px) var(--gutter); }
.timeline { position: relative; padding-left: 36px; }
.timeline-track, .timeline-fill { position: absolute; left: 10px; top: 12px; bottom: 12px; width: 1px; }
.timeline-track { background: rgba(27, 53, 87, .14); }
.timeline-fill { background: var(--bronze); transform-origin: top; transform: scaleY(1); }
.timeline-items { display: flex; flex-direction: column; gap: clamp(36px, 6vh, 64px); }
.timeline-item { position: relative; }
.timeline-dot { position: absolute; left: -31px; top: 10px; width: 11px; height: 11px; border-radius: 50%; background: var(--bronze); box-shadow: 0 0 0 5px var(--bone); }
.timeline-body { font-size: 16.5px; line-height: 1.55; color: var(--on-bone-78); max-width: 520px; }

/* ── Contact ─────────────────────────────────────────────────────────────── */
.section-contact { padding: clamp(48px, 7vh, 90px) var(--gutter) var(--sect-y); }
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(32px, 5vw, 80px); align-items: start; }
.contact-side { display: flex; flex-direction: column; gap: 28px; order: 2; }
.contact-main { order: 1; }
.count-card { background: var(--ink); color: var(--bone); border-radius: var(--r-panel); padding: 26px 26px 24px; position: sticky; top: var(--sticky-top); --eyebrow: var(--tan); }
.count-row { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.count-n { font-family: var(--font-serif); font-size: var(--fs-count); line-height: .9; color: var(--bone); font-variant-numeric: tabular-nums; }
.count-label { font-size: 15px; color: var(--on-ink-2); }
.count-arrow { font-family: var(--font-serif); font-size: clamp(28px, 3vw, 40px); color: var(--on-ink-legal); margin-left: auto; }
.count-one { font-family: var(--font-serif); font-size: var(--fs-count); line-height: .9; color: var(--tan); font-style: italic; }
.count-summary { font-size: 14px; line-height: 1.5; color: var(--on-ink-2); margin-top: 18px; min-height: 42px; }
.what-row { display: grid; grid-template-columns: 52px 1fr; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--hair-light); }
.what-index { font-size: 12px; font-weight: 600; letter-spacing: .2em; color: var(--bronze); padding-top: 3px; }
.what-heading { font-weight: 600; font-size: 15.5px; margin-bottom: 4px; }
.what-body { font-size: 14.5px; line-height: 1.5; color: var(--on-bone-72); }

.form { background: var(--white); border: 1px solid var(--hair-light); border-radius: var(--r-panel); padding: clamp(20px, 3vw, 34px); display: flex; flex-direction: column; gap: 26px; box-shadow: var(--sh-form); }
.form-step { margin-bottom: 8px; }
.form-help { font-size: 15px; line-height: 1.5; color: var(--on-bone-72); margin-bottom: 14px; }
.form-fields { display: flex; flex-direction: column; gap: 14px; }
.form-fields .form-step { margin-bottom: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
    font-size: 14px; font-weight: 600;
    border: 1px solid var(--hair-light); border-radius: var(--r-control);
    padding: 0 16px; min-height: 44px;
    background: var(--white); color: var(--ink);
    transition: background var(--t-chip), color var(--t-chip), border-color var(--t-chip);
}
.chip[aria-pressed="true"] { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.chip-unsure { border: 1px dashed var(--bronze); background: transparent; color: var(--bronze); }
.chip-unsure[aria-pressed="true"] { background: var(--bronze); color: var(--bone); }
.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink); }
.field-optional { font-weight: 400; color: var(--on-bone-55); }
.field input, .field select, .field textarea {
    border: 1px solid var(--hair-light); border-radius: var(--r-input);
    padding: 0 14px; min-height: 48px;
    font-size: 15px; font-weight: 400;
    background: var(--bone); color: var(--ink);
    width: 100%;
}
.field textarea { padding: 12px 14px; resize: vertical; min-height: 0; }
.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-error { font-size: 14px; color: var(--bronze); font-weight: 600; animation: fadein .3s both; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.form-note { font-size: 13.5px; color: var(--on-bone-2); }
.success { background: var(--ink); color: var(--bone); border-radius: var(--r-panel); padding: clamp(36px, 5vw, 64px) clamp(24px, 4vw, 48px); text-align: center; animation: pop .6s var(--ease) both; }
.success-mark { width: 84px; height: 52px; object-fit: contain; margin: 0 auto 22px; filter: drop-shadow(0 0 30px rgba(232, 207, 166, .45)); }
.success-title { font-family: var(--font-serif); font-weight: 500; font-size: clamp(32px, 4vw, 48px); line-height: 1.05; margin-bottom: 14px; }
.success-body { font-size: 16px; line-height: 1.6; color: var(--on-ink-para); margin: 0 auto 22px; max-width: 460px; }
.success-chips { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 520px; }
.success-chip { font-size: 13px; border: 1px solid rgba(232, 207, 166, .45); color: var(--tan); border-radius: var(--r-control); padding: 6px 12px; }

/* ── Legal pages and Error ───────────────────────────────────────────────── */
.legal { max-width: 760px; margin: 0 auto; padding: 150px var(--gutter) var(--sect-y); color: var(--bone); }
.h1-legal { font-family: var(--font-serif); font-weight: 500; font-size: clamp(38px, 5vw, 60px); line-height: 1.02; letter-spacing: -.015em; margin-bottom: 12px; }
.legal-updated { font-size: 13px; color: var(--on-ink-3); margin-bottom: 40px; }
.legal-body { display: flex; flex-direction: column; gap: 28px; font-size: 16px; line-height: 1.65; color: var(--on-ink-body); }
.legal-body h2 { font-family: var(--font-serif); font-weight: 500; font-size: 24px; line-height: 1.2; color: var(--bone); margin-bottom: 10px; }
.legal-body p + p { margin-top: 12px; }
.legal-body a { color: var(--tan); }
.legal-body strong { color: var(--bone); font-weight: 600; }

/* ── Keyframes ───────────────────────────────────────────────────────────── */
@keyframes rise { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes heroin { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes dash { to { stroke-dashoffset: -40; } }
@keyframes wordin { 0% { opacity: 0; transform: translateY(.6em) rotateX(-40deg); filter: blur(6px); } 100% { opacity: 1; transform: none; filter: none; } }
@keyframes grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes pop { 0% { transform: scale(.7); opacity: 0; } 60% { transform: scale(1.08); } 100% { transform: none; opacity: 1; } }
@keyframes menuin { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes drift { from { transform: translateY(0); } to { transform: translateY(-14px); } }

/* ── Motion: entrances and scroll-driven reveals ─────────────────────────── */
.heroin-1 { animation: heroin .9s .1s both; }
.heroin-2 { animation: heroin 1s .25s both; }
.heroin-3 { animation: heroin 1s .45s both; }
.hero .heroin-3 { animation-delay: .5s; }
.heroin-4 { animation: heroin 1s .55s both; }
.heroin-5 { animation: heroin 1s .7s both; }

/* Where scroll-driven animations are unsupported the elements simply render in
   their final state — the accepted degradation. No script fallback. */
@supports (animation-timeline: view()) {
    .reveal { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 50%; }
    .reveal-40 { animation-range: entry 0% entry 40%; }
    .reveal-45 { animation-range: entry 0% entry 45%; }
    .reveal-55 { animation-range: entry 0% entry 55%; }
    .timeline-fill { animation: grow-y linear both; animation-timeline: view(); animation-range: entry 20% exit 60%; }
}

/* ── Breakpoints: 900 / 820 / 620 (README 6) ─────────────────────────────── */
@media (max-width: 900px) {
    [data-cols3] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
    /* Desktop-only chrome hides rather than reflows. [data-desk] marks the
       How-it-works sticky heading column and the Industries row arrows; the
       nav drops its "powered by Verapath" byline. The About quill is NOT in
       this list — it is sized in vw and scales down instead. */
    [data-desk] { display: none !important; }
    .nav-byline { display: none; }
    [data-2col] { grid-template-columns: 1fr; }
    .ktr { grid-template-columns: 1fr; }
    .cta-split { grid-template-columns: 1fr; }
    .side-label-grid { grid-template-columns: 1fr; }
    .rule-left { border-left: 0; border-top: 1px solid var(--hair); padding-left: 0; padding-top: 28px; }

    /* Nav → full-viewport overlay menu */
    .menu-panel {
        display: none;
        position: fixed; inset: 0; z-index: 60;
        background: var(--ink-menu); color: var(--bone);
        flex-direction: column; align-items: stretch;
        padding: 10px var(--gutter-nav) 28px;
        animation: fadein .25s both;
    }
    .menu-panel[data-open] { display: flex; }
    .menu-head { display: flex; justify-content: space-between; align-items: center; }
    /* The links sit under the lockup, not down at the fold: the free space in
       the panel goes to the CTA's auto margin below, so the list reads from the
       top and the tan button and byline stay anchored to the bottom edge. */
    .nav-list { margin: clamp(28px, 6vh, 56px) 0 28px; flex-direction: column; align-items: stretch; gap: 4px; }
    .nav-link {
        font-family: var(--font-serif); font-size: clamp(38px, 10vw, 60px); line-height: 1.05;
        padding: 6px 0; border-bottom: 0;
        color: var(--on-ink-body);
        animation: menuin .5s both; animation-delay: calc(.02s + var(--i, 0) * .06s);
    }
    .nav-link[aria-current="page"] { color: var(--tan); }
    .menu-cta { display: inline-flex; margin-top: auto; font-size: 16px; padding: 18px 24px; min-height: 0; animation: menuin .5s .35s both; }
    .menu-foot { display: block; margin-top: 18px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--on-ink-legal); text-align: center; animation: fadein .6s .4s both; }

    /* Explorer rails → horizontal snap chip rows */
    .rail {
        flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory; gap: 8px;
        margin: 0 -18px; padding: 0 18px 6px; position: static; scrollbar-width: none;
    }
    .rail::-webkit-scrollbar { display: none; }
    .rail > * { flex: 0 0 auto; scroll-snap-align: start; white-space: nowrap; }
    .panes { min-height: 0; }
    .sticky-110 { position: static; }
    .cap-lead-copy { padding-top: 0; }
}

@media (max-width: 620px) {
    [data-cols3] { grid-template-columns: 1fr; }
}

@media (min-width: 821px) {
    [data-mob] { display: none !important; }
}

/* ── Reduced motion: everything to its final state; the 3D hero holds a frame ─ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .reveal, .timeline-fill { animation: none !important; }
    .marquee-track { animation: none !important; }
    /* drift alternates and blink is a step function: shortening them lands on
       the wrong frame — a phone shifted 14px up, an invisible caret. Stop both. */
    .vira-phone, .vira-caret, .vira-answer, .vira-row, .vira-row-fill, .vira-acted { animation: none !important; }
}