/*
 * v5.css — website v5, "Orbit into Strata" (#222, docs/design/website-v5.md §11). A layer on the v4
 * system (v4.css): the same tokens, type, container and section rhythm. Every colour is a v4 alias of a
 * Hven 2.0 token. Every motion state exists only under `.v5-motion` (set in <head> when motion may run);
 * without it the markup is the final, still page.
 */

/* Metric-matched fallback for the display face (measured in Chromium, W5D): while Fraunces loads,
   the local face takes the same width and line box, so the swap moves nothing. */
@font-face { font-family: 'Fraunces Display Fallback'; src: local('Georgia'); size-adjust: 84.65%; ascent-override: 115.8%; descent-override: 30.7%; line-gap-override: 0%; }

/* ── Hero: the promise centred, then the question in its orbit ─────────────────────────────── */
.v5-hero { padding-top: clamp(20px, 3vw, 40px); text-align: center; }
.v5-hero h1 { font-family: 'Fraunces', 'Fraunces Display Fallback', Georgia, serif; font-size: clamp(40px, 5.8vw, 78px); line-height: 0.98; letter-spacing: -0.026em; max-width: 11em; margin-inline: auto; }
.v5-hero .v4-lede { margin: 20px auto 0; max-width: 36em; }
.v5-hero .v4-ctas { justify-content: center; }
.v5-hero .v4-free { margin-top: 14px; }

.v5-stage { position: relative; height: clamp(360px, 40vw, 540px); margin-top: clamp(-110px, -7vw, -12px); pointer-events: none; }
.v5-hero h1, .v5-hero .v4-lede, .v5-hero .v4-ctas, .v5-hero .v4-free { position: relative; z-index: 4; }
.v5-poster { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 900ms var(--v4-ease); }
.v5-poster .v5-ring { fill: none; stroke: var(--v4-ink); vector-effect: non-scaling-stroke; }
.v5-poster .v5-thread { fill: none; stroke: var(--v4-ink); stroke-opacity: 0.3; vector-effect: non-scaling-stroke; }
.v5-poster .v5-you { fill: var(--v4-amber); }
.v5-poster .v5-rival { fill: var(--v4-ink-2); }
.v5-poster .v5-none { fill: none; stroke: var(--v4-ink-2); stroke-width: 2; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.v5-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: none; opacity: 0; transition: opacity 900ms var(--v4-ease); }
.v5-motion .v5-stage canvas { display: block; }
.v5-stage.is-gl canvas { opacity: 1; }
.v5-stage.is-gl .v5-poster { opacity: 0; }
.v5-stage.is-gl.is-done .v5-poster { visibility: hidden; }

.v5-q { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); z-index: 4; width: min(440px, 80%); padding: 18px 22px 16px; border-radius: 18px; background: color-mix(in srgb, var(--v4-paper) 92%, transparent); border: 1px solid var(--v4-line-2); box-shadow: var(--v4-shadow); text-align: left; pointer-events: auto; }
.v5-q-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 12px; font-size: 13px; color: var(--v4-ink-3); }
.v5-q p { font: 400 clamp(17px, 1.7vw, 21px)/1.3 var(--font-display); letter-spacing: -0.01em; margin: 10px 0 0; color: var(--v4-ink); }

/* The tags follow a LIVE scene only: never in the still version, never after a lost context. */
.v5-tag { position: absolute; left: 0; top: 0; z-index: 1; display: none; align-items: center; gap: 8px; padding: 6px 8px 6px 12px; border-radius: 999px; background: var(--v4-paper); border: 1px solid var(--v4-line-2); font: 500 14px/1 var(--font-sans); white-space: nowrap; will-change: transform; transition: opacity 300ms var(--v4-ease); }
.v5-stage.is-gl .v5-tag { display: flex; }
.v5-stage.is-poster .v5-tag { display: none; }

/* The real content: what each tool answered, one row per tool. Its "Example data" label is inside it. */
/* The list sets its own line-height and spacing (the page's values today), so nothing an ancestor sets can make it
   taller (FX2 review 1, M-2: .v5-hero's line-height did, with the suite green). */
.v5-answers { margin: clamp(24px, 3vw, 40px) auto 0; max-width: 880px; text-align: left; background: var(--v4-paper); border: 1px solid var(--v4-line-2); border-radius: 20px; box-shadow: var(--v4-shadow); overflow: hidden; line-height: 1.62; letter-spacing: normal; word-spacing: normal; }
.v5-answers .v4-board-top { background: var(--v4-paper-2); }
.v5-hero .v4-note { margin: 16px auto 0; max-width: 880px; text-align: left; }

@media (max-width: 600px) {
  .v5-stage { height: 340px; margin-top: 8px; }
  .v5-q { padding: 12px 14px; width: 72%; }
  .v5-q p { font-size: 15px; }
  .v5-q-top span:first-child { display: none; }
  .v5-q-top { justify-content: flex-end; }
}
/* The tags only where there is room beside the card (§11.2): above 960px, as the bridge. */
@media (max-width: 960px) { .v5-stage.is-gl .v5-tag { display: none; } }

/* ── The bridge (W5B2): orbit and list pinned side by side on desktop while the answers land ──────── */
/* The LAYOUT is keyed on .v5-pin, which the head script sets before first paint and the 3-second fallback never
   removes (W5B2 review H1: a fallback that changed the layout shifted the page by 0.64). Only wide AND tall
   enough screens pin, so the last answer always lands in sight (review M3); landing-v5.js reads the same query.
   700px tall (W5B2 review 2, M-1): when the script fails, the lowered list (top 7vw + 24px, up to 584px tall at
   1100px wide) still ends above the bottom of the smallest pinned screen, so it never covers the Example-data note. */
@media (min-width: 1100px) and (min-height: 700px) {
  .v5-pin .v5-bridge { height: 250vh; margin-top: clamp(-110px, -7vw, -12px); }
  .v5-pin .v5-bridge-in { position: sticky; top: 0; height: 100vh; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px; align-items: start; padding-top: clamp(16px, 5vh, 56px); box-sizing: border-box; container-type: inline-size; }
  .v5-pin .v5-bridge .v5-stage { margin-top: 0; height: min(78vh, 560px); }
  .v5-pin .v5-bridge .v5-answers { margin: 0; perspective: 1200px; overflow: visible; }
  .v5-pin .v5-bridge [data-engine] { transform-origin: 50% 50%; will-change: transform, opacity; background: var(--v4-paper); }
  /* The first screen BEFORE the script (review H1): the orbit centred and the list not shown, in CSS, so a late
     script shows the same first screen. The shift is the centre of the grid minus the centre of its 1.2fr column
     ((100cqi - 32px) x 1.2 / 2.2), the same number introState measures, so the hand-over moves nothing. A
     transform and an opacity only: the fallback taking .v5-motion off moves nothing in layout. */
  .v5-motion:not(.v5-live) .v5-bridge .v5-stage { transform: translate3d(calc(22.72727cqi + 8.72727px), 0, 0); }
  .v5-motion:not(.v5-live) .v5-bridge .v5-answers { opacity: 0; }
  /* The script never came (the fallback took .v5-motion off): the list shows, settled, below the hero's last line
     rather than over it (the pinned frame tucks up under the hero by the bridge's negative margin). A transform:
     nothing moves in layout when the fallback fires. */
  .v5-pin:not(.v5-motion):not(.v5-live) .v5-bridge .v5-answers { transform: translateY(max(0px, calc(clamp(12px, 7vw, 110px) - clamp(16px, 5vh, 56px) + 24px))); }
  /* As the last answers land, the scene dims; the question card on it never does (review M4: contrast). */
  .v5-pin .v5-bridge .v5-stage canvas, .v5-pin .v5-bridge .v5-stage .v5-poster { filter: opacity(var(--v5-dim, 1)); }
}

/* ── The ambient field (W5B2): fixed behind the page, faint, never over the hero's headline ────────── */
.v5-field { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: none; opacity: 0; }
.v5-motion .v5-field { display: block; }
.v5-motion body > header, .v5-motion body > main, .v5-motion body > section, .v5-motion body > footer { position: relative; z-index: 1; }

/* The still version on a phone (W5B1 review L4): the poster in its own band, the question card under it. Only when
   the page never had motion (JS off, reduced motion: no .v5-pin). Once the head script has set .v5-pin the live
   layout holds whatever happens next (a late script, the fallback, no WebGL, a lost context), so the page never
   moves after first paint (batch 15: CLS 0.029 at 375; W5B2 review H1). */
@media (max-width: 600px) {
  html:not(.v5-pin) .v5-stage { height: auto; }
  html:not(.v5-pin) .v5-poster { position: relative; display: block; height: 200px; }
  html:not(.v5-pin) .v5-q { position: relative; left: auto; top: auto; transform: none; width: auto; margin: -36px 8px 0; }
}

/* Reduced motion, chosen after load too: the still version (the page reloads into it). */
@media (prefers-reduced-motion: reduce) {
  .v5-stage canvas, .v5-field { display: none !important; }
  .v5-bridge, .v5-bridge-in { height: auto !important; position: static !important; display: block !important; }
  .v5-bridge [data-engine], .v5-bridge .v5-answers { transform: none !important; opacity: 1 !important; }
  .v5-bridge .v5-stage { transform: none !important; opacity: 1 !important; }
  .v5-stage .v5-poster { opacity: 1 !important; visibility: visible !important; filter: none !important; }
  .v5-stage .v5-tag { display: none !important; }
}
@media print {
  .v5-stage canvas, .v5-stage .v5-tag, .v5-field { display: none !important; }
  .v5-bridge, .v5-bridge-in { height: auto !important; position: static !important; display: block !important; }
  .v5-bridge [data-engine], .v5-bridge .v5-answers { transform: none !important; opacity: 1 !important; }
  .v5-bridge .v5-stage { transform: none !important; opacity: 1 !important; }
  .v5-stage .v5-poster { opacity: 1 !important; visibility: visible !important; filter: none !important; }
}

/* ── What Hven shows you (W5B3a, decision 225) ─────────────────────────────────────────────────────── */
/* One feature per row: the words on one side, a product frame on EXAMPLE DATA on the other, alternating.
   The markup is the final state. Under .v5-motion only, each frame waits in a pre-play state and plays in
   once (landing-v5.js startFeatures adds .is-in); transforms and opacity only, so nothing moves in layout. */
.v5-feats .v5-feat { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 32px 64px; align-items: center; margin-top: clamp(56px, 8vw, 104px); }
.v5-feats .v5-feat:nth-of-type(even) .v5-feat-copy { order: 2; }
.v5-feat-copy h3 { font: 400 clamp(26px, 2.6vw, 34px)/1.15 var(--font-display); letter-spacing: -0.015em; color: var(--v4-ink); margin: 14px 0 0; max-width: 18ch; }
.v5-feat-copy > p { margin-top: 14px; color: var(--v4-ink-2); font-size: clamp(16px, 1.2vw, 17.5px); line-height: 1.55; max-width: 40ch; }
.v5-chip { display: inline-flex; align-items: center; gap: 7px; font: 500 11px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--v4-ink-2); padding: 6px 10px; border-radius: 999px; border: 1px solid var(--v4-line-2); background: var(--v4-paper); }
.v5-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--status-live); }
.v5-chip-soon { border-style: dashed; }
.v5-chip-soon::before { background: transparent; border: 1.5px solid var(--v4-ink-3); width: 5px; height: 5px; }
.v5-mini { margin-top: 24px; padding: 16px 18px; border: 1px dashed var(--v4-line-2); border-radius: 14px; max-width: 44ch; }
.v5-mini p { margin-top: 10px; font-size: 14.5px; line-height: 1.5; color: var(--v4-ink-3); }
.v5-mini b { color: var(--v4-ink-2); font-weight: 600; }

.v5-frame { margin: 0; background: var(--v4-paper); border: 1px solid var(--v4-line-2); border-radius: 18px; box-shadow: var(--v4-shadow); overflow: hidden; }
.v5-frame-foot { padding: 12px 22px 16px; font-size: 12.5px; color: var(--v4-ink-3); border-top: 1px solid var(--v4-line); }

/* Per tool: one bar per AI tool. */
.v5-bars { list-style: none; margin: 0; padding: 18px 22px 14px; display: grid; gap: 12px; }
.v5-bars li { display: grid; grid-template-columns: 84px minmax(0, 1fr) 40px; gap: 14px; align-items: center; font-size: 14px; color: var(--v4-ink-2); }
.v5-bar-name { font-weight: 600; color: var(--v4-ink); }
.v5-bar { height: 10px; border-radius: 999px; background: var(--v4-paper-2); overflow: hidden; }
.v5-bar i { display: block; height: 100%; width: var(--v); border-radius: inherit; background: var(--v4-ink); transform-origin: left center; }
.v5-bar-val { text-align: right; font: 500 13px/1 var(--font-mono); color: var(--v4-ink-2); }

/* Questions, grouped by topic, one dot per tool. */
.v5-qs { padding: 8px 22px 14px; }
.v5-qs-topic { margin: 14px 0 6px; font: 500 11px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--v4-ink-3); }
.v5-qrow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--v4-line); font-size: 14.5px; color: var(--v4-ink); }
.v5-tier { font-size: 12px; color: var(--v4-ink-2); border: 1px solid var(--v4-line-2); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.v5-dots { display: inline-flex; gap: 4px; }
.v5-dots i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--v4-ink-3); }
.v5-dots i.v5-you { background: var(--v4-amber); border-color: var(--v4-amber-ink); }

/* Tone: the split of the answers that named you, and two answers. */
.v5-tone { padding: 18px 22px 18px; }
.v5-tone-bar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; gap: 3px; }
.v5-tone-bar i { width: var(--v); transform-origin: left center; }
.v5-tone-bar .pos { background: var(--v4-ink); }
.v5-tone-bar .neu { background: var(--v4-ink-3); }
.v5-tone-bar .neg { background: var(--status-danger); }
.v5-tone-key { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 6px; font-size: 13.5px; color: var(--v4-ink-2); }
.v5-tone-key b { color: var(--v4-ink); }
.v5-tone-ans { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0 0; margin-top: 12px; border-top: 1px solid var(--v4-line); font-size: 14px; color: var(--v4-ink-2); }
.v5-tool { font-weight: 600; color: var(--v4-ink); }
.v5-tone-mk { font-size: 12.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--v4-line-2); white-space: nowrap; }
.v5-tone-mk.pos { color: var(--v4-ink); border-color: color-mix(in srgb, var(--status-live) 60%, transparent); }
.v5-tone-mk.neg { color: var(--status-danger-text); border-color: color-mix(in srgb, var(--status-danger) 45%, transparent); }

/* Cited sources: the mix by kind, and the most cited pages. */
.v5-src { padding: 18px 22px 16px; }
.v5-src-mix { display: flex; height: 14px; border-radius: 999px; overflow: hidden; gap: 3px; }
.v5-src-mix i { width: var(--v); transform-origin: left center; }
.v5-src .k1 { --k: var(--v4-ink); } .v5-src .k2 { --k: var(--v4-ink-2); } .v5-src .k3 { --k: var(--v4-ink-3); } .v5-src .k4 { --k: repeating-linear-gradient(135deg, var(--v4-ink-2) 0 3px, var(--v4-paper) 3px 5px); } .v5-src .k5 { --k: repeating-linear-gradient(135deg, var(--v4-ink-3) 0 2px, var(--v4-paper) 2px 6px); }
.v5-src-mix i { background: var(--k); }
.v5-src-key { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 12px 0 4px; font-size: 13px; color: var(--v4-ink-2); }
.v5-src-key span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; background: var(--k); }
.v5-src-list { list-style: none; margin: 10px 0 0; padding: 0; }
.v5-src-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto 32px; gap: 12px; padding: 10px 0; border-top: 1px solid var(--v4-line); font-size: 14px; color: var(--v4-ink-2); }
.v5-src-list li span:first-child { color: var(--v4-ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v5-src-list b { text-align: right; font: 500 13px/1.4 var(--font-mono); color: var(--v4-ink); }

/* You vs competitors: six weeks of how often each was named. */
.v5-vs { padding: 18px 22px 16px; }
.v5-vs svg { display: block; width: 100%; height: 150px; overflow: visible; }

/* The score (W5B3b): one number, then the line it has drawn over the weeks. The line reuses the competitors
   frame's "You" line and its draw-in; the number is ink, so amber still marks only "you". */
.v5-score { padding: 18px 22px 6px; }
.v5-score-head { display: flex; align-items: baseline; gap: 10px; }
.v5-score-n { font: 400 54px/1 var(--font-display); color: var(--v4-ink); font-variant-numeric: tabular-nums; }
.v5-score-of { font-size: 14px; color: var(--v4-ink-2); }
.v5-vs.v5-score-line { padding: 14px 0 6px; }
.v5-vs.v5-score-line svg { height: 110px; }
.v5-named li span:nth-child(2) { font-size: 12.5px; color: var(--v4-ink-2); }
.v5-src-list.v5-named { margin-top: 0; }
.v5-named li:first-child { border-top: 0; padding-top: 2px; }
.v5-vs .grid { stroke: var(--v4-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.v5-vs polyline { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.v5-vs polyline.v5-you { stroke: var(--v4-amber-ink); stroke-width: 4; } /* amber-ink: 3:1 or better on the frame (W5B3a review 2 L2; amber was 2.87:1); twice as thick as a competitor's line, so it differs by more than hue (FX review 1, L-2) */
.v5-vs polyline.them { stroke: var(--v4-ink-2); }
.v5-vs polyline.them.two { stroke: var(--v4-ink-3); stroke-dasharray: 6 5; }
.v5-vs-key { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; font-size: 13px; color: var(--v4-ink-2); }
.v5-vs-key span::before { content: ""; display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-right: 7px; vertical-align: middle; background: var(--v4-ink-2); }
.v5-vs-key .v5-you::before { background: var(--v4-amber-ink); height: 5px; }
.v5-vs-key .two::before { background: repeating-linear-gradient(90deg, var(--v4-ink-3) 0 4px, transparent 4px 7px); }

/* The action and its measured result. */
.v5-act { padding: 20px 22px 22px; }
.v5-act-title { font: 400 21px/1.25 var(--font-display); color: var(--v4-ink); }
.v5-act-why { margin-top: 8px; font-size: 14px; color: var(--v4-ink-2); }
.v5-act-steps { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-size: 13px; color: var(--v4-ink-2); }
.v5-act-steps .done { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--v4-line-2); color: var(--v4-ink); font-weight: 600; }
.v5-act-steps .arrow { width: 28px; height: 1px; background: var(--v4-line-2); }
.v5-lift { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 14px; align-items: center; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--v4-line); }
.v5-lift-from, .v5-lift-to { font: 400 34px/1 var(--font-display); color: var(--v4-ink-3); }
.v5-lift-to { color: var(--v4-ink); }
.v5-lift-line { height: 2px; background: var(--v4-line); position: relative; }
.v5-lift-line i { position: absolute; inset: 0; background: var(--v4-ink); transform-origin: left center; }
.v5-lift-tag { font-size: 12.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--v4-ink); color: var(--v4-ink); white-space: nowrap; }

/* Also in Hven: the smaller features, each with its own chip. */
.v5-also { list-style: none; margin: clamp(56px, 8vw, 104px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--v4-ink); }
.v5-also > li { padding: 22px 20px 0 0; }
.v5-also > li + li { padding-left: 20px; border-left: 1px solid var(--v4-line); }
/* Eight items (W5B3b): four to a row on wide screens, the second row ruled like the first (review L4). */
@media (min-width: 1101px) {
  .v5-also { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .v5-also > li:nth-child(4n+1) { padding-left: 0; border-left: 0; }
  .v5-also > li:nth-child(n+5) { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--v4-line); }
}
.v5-also h3 { margin-top: 14px; font-size: 16px; font-weight: 600; color: var(--v4-ink); }
.v5-also p { margin-top: 6px; font-size: 14.5px; line-height: 1.5; color: var(--v4-ink-2); }
.v5-also a { color: var(--v4-ink); text-decoration: underline; text-underline-offset: 3px; }
.v5-feats .v4-note { margin-top: 32px; }

@media (max-width: 1100px) {
  .v5-also { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .v5-also > li:nth-child(3n+1) { padding-left: 0; border-left: 0; }
  .v5-also > li:nth-child(n+4) { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--v4-line); }
}
@media (max-width: 820px) {
  .v5-feats .v5-feat { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .v5-feats .v5-feat:nth-of-type(even) .v5-feat-copy { order: 0; }
  .v5-also { grid-template-columns: minmax(0, 1fr); }
  .v5-also > li:nth-child(n) { padding: 20px 0; border-left: 0; margin: 0; }
  .v5-also > li:nth-child(n+2) { border-top: 1px solid var(--v4-line); }
}
@media (max-width: 420px) {
  .v5-bars li, .v5-tone-ans { grid-template-columns: 72px minmax(0, 1fr) auto; gap: 10px; }
  .v5-qrow { grid-template-columns: minmax(0, 1fr) auto; }
  .v5-qrow .v5-tier { display: none; }
  .v5-lift-from, .v5-lift-to { font-size: 28px; }
}

/* The play-in, under the motion class only. Bars and splits grow from the left, lines draw, rows rise,
   the lift fills: what the frame shows arriving the way a check fills it. */
.v5-motion [data-feature] .v5-bar i, .v5-motion [data-feature] .v5-tone-bar i, .v5-motion [data-feature] .v5-src-mix i,
.v5-motion [data-feature] .v5-lift-line i { transform: scaleX(0); transition: transform 900ms var(--v4-ease); }
.v5-motion [data-feature] .v5-bars li:nth-child(2) .v5-bar i { transition-delay: 70ms; }
.v5-motion [data-feature] .v5-bars li:nth-child(3) .v5-bar i { transition-delay: 140ms; }
.v5-motion [data-feature] .v5-bars li:nth-child(4) .v5-bar i { transition-delay: 210ms; }
.v5-motion [data-feature] .v5-bars li:nth-child(5) .v5-bar i { transition-delay: 280ms; }
.v5-motion [data-feature] .v5-bars li:nth-child(6) .v5-bar i { transition-delay: 350ms; }
.v5-motion [data-feature] .v5-vs polyline:not(.two) { stroke-dasharray: 2000; stroke-dashoffset: 2000; transition: stroke-dashoffset 1400ms var(--v4-ease); }
.v5-motion [data-feature] .v5-vs polyline.v5-you { transition-delay: 250ms; }
.v5-motion [data-feature] .v5-vs polyline.them.two { opacity: 0; transition: opacity 600ms var(--v4-ease) 500ms; }
.v5-motion [data-feature] .v5-qrow, .v5-motion [data-feature] .v5-tone-ans, .v5-motion [data-feature] .v5-src-list li { opacity: 0; transform: translateY(10px); transition: opacity 500ms var(--v4-ease), transform 500ms var(--v4-ease); }
.v5-motion [data-feature] .v5-qrow:nth-of-type(2), .v5-motion [data-feature] .v5-src-list li:nth-child(2) { transition-delay: 90ms; }
.v5-motion [data-feature] .v5-qrow:nth-of-type(3), .v5-motion [data-feature] .v5-src-list li:nth-child(3), .v5-motion [data-feature] .v5-tone-ans + .v5-tone-ans { transition-delay: 180ms; }
.v5-motion [data-feature] .v5-lift-line i { transition-delay: 300ms; }
.v5-motion [data-feature].is-in .v5-bar i, .v5-motion [data-feature].is-in .v5-tone-bar i, .v5-motion [data-feature].is-in .v5-src-mix i,
.v5-motion [data-feature].is-in .v5-lift-line i { transform: none; }
.v5-motion [data-feature].is-in .v5-vs polyline:not(.two) { stroke-dashoffset: 0; }
.v5-motion [data-feature].is-in .v5-vs polyline.them.two { opacity: 1; }
.v5-motion [data-feature].is-in .v5-qrow, .v5-motion [data-feature].is-in .v5-tone-ans, .v5-motion [data-feature].is-in .v5-src-list li { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .v5-motion [data-feature] *, .v5-motion [data-feature] { transition: none !important; }
  .v5-motion [data-feature] .v5-bar i, .v5-motion [data-feature] .v5-tone-bar i, .v5-motion [data-feature] .v5-src-mix i, .v5-motion [data-feature] .v5-lift-line i,
  .v5-motion [data-feature] .v5-qrow, .v5-motion [data-feature] .v5-tone-ans, .v5-motion [data-feature] .v5-src-list li { transform: none !important; opacity: 1 !important; }
  .v5-motion [data-feature] .v5-vs polyline { stroke-dashoffset: 0 !important; opacity: 1 !important; }
}
@media print {
  .v5-motion [data-feature] *, .v5-motion [data-feature] { transition: none !important; }
  .v5-motion [data-feature] .v5-bar i, .v5-motion [data-feature] .v5-tone-bar i, .v5-motion [data-feature] .v5-src-mix i, .v5-motion [data-feature] .v5-lift-line i,
  .v5-motion [data-feature] .v5-qrow, .v5-motion [data-feature] .v5-tone-ans, .v5-motion [data-feature] .v5-src-list li { transform: none !important; opacity: 1 !important; }
  .v5-motion [data-feature] .v5-vs polyline { stroke-dashoffset: 0 !important; opacity: 1 !important; }
}

/* Testimonials (W5B4): written at build time from the confirmed entries of docs/website/testimonials.json only;
   with none, the section is not in the page. Quotes in the display face, the person in ink, no photos or logos. */
.v5-voices-list { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); align-items: start; }
.v5-voice { border: 1px solid var(--v4-line); border-radius: 18px; background: var(--v4-paper); padding: 24px; overflow-wrap: anywhere; }
.v5-voice blockquote { margin: 0; }
.v5-voice blockquote p { font: 400 21px/1.4 var(--font-display); color: var(--v4-ink); }
.v5-voice-who { margin-top: 16px; font-size: 14px; color: var(--v4-ink-2); }
.v5-voice-who b { color: var(--v4-ink); font-weight: 600; }
.v5-voice blockquote p::before { content: "\201C"; }
.v5-voice blockquote p::after { content: "\201D"; }