/* Case studies visual upgrade (MOCKUP, 20 Oct 2026). Loaded last on the four case pages (after cases.css); every rule is scoped to body.csv.
   One system: a night hero with a signature scene, a facts strip, numbered chapters with a sticky chapter rail, a results band,
   a night pull-quote chapter, a framed "real thing" and a full-bleed next-case teaser. Night colours are the Home hero's; the rest follows the theme.
   Motion: CSS keyframes gated by html.csv-run (set by csv.js only when reduced motion is off), paused by html.csv-paused or .off (offscreen). */

/* ---------------------------------------------------------------- 0. tokens */
body.csv {
  --cv-n0: var(--zc-000); --cv-n1: var(--zc-05070d); --cv-n2: var(--zc-0b1020);
  --cv-ink: var(--zc-f5f5f7); --cv-ink2: var(--zc-d2d2d7); --cv-mute: var(--zc-a9b1c0); --cv-faint: var(--zc-8a93a6);
  --cv-acc: var(--zc-a9beff); --cv-acc-f: var(--zc-8ea8ff); --cv-glow: 150 172 255; --cv-warm: var(--zc-e9b98c); --cv-ok: var(--zc-5ccf95);
  --cv-glass: rgb(12 16 30 / .62); --cv-edge: rgb(170 190 255 / .22);
  --cv-ease: cubic-bezier(.2, .8, .2, 1);
  --cv-rail: 0px;
}
body.csv [data-csv-night] {
  --bg: var(--cv-n1); --band: var(--cv-n1); --surface: var(--zc-12151f); --surface-2: var(--zc-1b2030);
  --ink: var(--cv-ink); --ink-2: var(--cv-ink2); --muted: var(--cv-mute); --line: rgb(255 255 255 / .1); --line-2: rgb(255 255 255 / .22);
  --accent: var(--cv-acc); --u7-acc: var(--cv-acc); --u7-line: rgb(255 255 255 / .14); --u7-line-2: rgb(255 255 255 / .28); --u7-stage: var(--zc-12151f);
  --btn: var(--zc-f5f5f7); --btn-ink: var(--zc-05070d); --btn-hover: var(--zc-fff);
  color: var(--ink); color-scheme: dark;
}
body.csv main { overflow-x: clip; }

/* header: night over the night chapters (csv.js sets data-tone; :has() covers the first paint) */
body.csv .nav[data-tone="night"], body.csv:has(.csv-hero) .nav:not(.scrolled):not([data-tone="day"]) {
  --ink: var(--zc-f5f5f7); --ink-2: var(--zc-d2d2d7); --muted: var(--zc-aab2c2); --bg: var(--zc-05070d); --surface: var(--zc-12151f); --surface-2: var(--zc-1b2030);
  --line: var(--zc-2a3142); --line-2: var(--zc-4a566b); --accent: var(--zc-a9beff); --btn: var(--zc-f5f5f7); --btn-ink: var(--zc-05070d); --btn-hover: var(--zc-fff); color: var(--ink); color-scheme: dark; }
body.csv .nav[data-tone="night"].scrolled, :root[data-theme="light"] body.csv .nav[data-tone="night"].scrolled { background: rgb(5 7 13 / .62); border-bottom-color: rgb(255 255 255 / .08); }
body.csv .nav[data-tone="night"] .theme-btn { border-color: rgb(255 255 255 / .28); }

/* ---------------------------------------------------------------- 1. hero */
body.csv .csv-hero { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; min-height: min(100svh, 940px);
  padding: calc(var(--nav-h, 56px) + clamp(36px, 4vw, 64px)) var(--gut) clamp(80px, 7vw, 120px); background: var(--cv-n1); color: var(--cv-ink);
  border-radius: 0 0 clamp(24px, 3vw, 44px) clamp(24px, 3vw, 44px); }
body.csv .csv-sky { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: radial-gradient(120% 80% at 50% 0%, var(--cv-n2), var(--cv-n1) 55%, var(--cv-n0)); }
body.csv .csv-glow { position: absolute; inset: -20%; opacity: .9;
  background: radial-gradient(38% 34% at 22% 18%, rgb(77 96 196 / .30), transparent 70%), radial-gradient(30% 26% at 70% 8%, rgb(46 120 160 / .16), transparent 70%),
    radial-gradient(42% 30% at 74% 70%, rgb(var(--cv-glow) / .16), transparent 70%), radial-gradient(60% 40% at 50% 120%, rgb(90 110 220 / .14), transparent 70%); }
body.csv .csv-glow::before, body.csv .csv-glow::after { content: ""; position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; }
body.csv .csv-glow::before { width: 50%; height: 45%; left: 4%; top: 20%; background: radial-gradient(closest-side, rgb(70 70 170 / .5), transparent); }
body.csv .csv-glow::after { width: 45%; height: 45%; right: 4%; top: 30%; background: radial-gradient(closest-side, rgb(var(--cv-glow) / .3), transparent); }
body.csv .csv-grat { position: absolute; inset: 0; opacity: .55; background-image: linear-gradient(rgb(170 195 255 / .07) 1px, transparent 1px), linear-gradient(90deg, rgb(170 195 255 / .07) 1px, transparent 1px);
  background-size: 96px 96px; background-position: center top; -webkit-mask: radial-gradient(70% 60% at 50% 0%, #000 10%, transparent 75%); mask: radial-gradient(70% 60% at 50% 0%, #000 10%, transparent 75%); }
body.csv .csv-grain { position: absolute; inset: 0; opacity: .08; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url%28%23n%29'/%3E%3C/svg%3E"); }
html.csv-run body.csv .csv-glow { animation: cv-drift 38s var(--cv-ease) infinite alternate; }
html.csv-run body.csv .csv-glow::before { animation: cv-smoke-a 46s ease-in-out infinite alternate; }
html.csv-run body.csv .csv-glow::after { animation: cv-smoke-b 58s ease-in-out infinite alternate; }
@keyframes cv-drift { 0% { transform: translate3d(-2%, -1%, 0) scale(1); } 100% { transform: translate3d(2%, 2%, 0) scale(1.06); } }
@keyframes cv-smoke-a { to { transform: translate3d(14%, 6%, 0) scale(1.18); } }
@keyframes cv-smoke-b { to { transform: translate3d(-12%, -8%, 0) scale(1.12); } }

body.csv .csv-hero-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: clamp(32px, 4vw, 80px); width: 100%; }
body.csv .csv-copy { min-width: 0; }
body.csv .csv-hero .crumbs { margin: 0 0 clamp(20px, 2vw, 32px); color: var(--cv-faint); }
body.csv .csv-hero .crumbs a { color: var(--cv-ink2); }
body.csv .csv-hero .m-eyebrow { margin: 0 0 16px; font: 600 clamp(var(--fs-4), 0.1879vw + 14.2953px, var(--fs-5))/1.3 var(--sans); letter-spacing: 0; text-transform: none; color: var(--cv-acc); }
body.csv .csv-hero .m-eyebrow::before { display: none; }
body.csv .csv-h1 { margin: 0; max-width: 14ch; padding-bottom: .06em; font-size: clamp(var(--fs-10), 1.5025vw + 38.3656px, var(--fs-11)); font-weight: 600; line-height: 1.02; letter-spacing: -.045em; text-wrap: balance;
  background: linear-gradient(180deg, var(--zc-fff) 30%, var(--zc-c9d0dc)); -webkit-background-clip: text; background-clip: text; color: transparent; }
body.csv .csv-hero .lede { margin: clamp(20px, 2vw, 28px) 0 0; max-width: 36em; font-size: clamp(var(--fs-5), 0.3757vw + 15.5911px, var(--fs-6)); line-height: 1.5; color: var(--cv-mute); text-wrap: pretty; }
body.csv .csv-hero .h-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
body.csv .csv-hero .btn.primary { background: var(--zc-f5f5f7); color: var(--zc-05070d); border-color: transparent; box-shadow: 0 0 0 1px rgb(255 255 255 / .5), 0 10px 40px -10px rgb(var(--cv-glow) / .7); }
body.csv .csv-hero .btn.ghost { color: var(--zc-f5f5f7); background: rgb(255 255 255 / .06); border-color: rgb(255 255 255 / .28); }
body.csv .csv-hero .btn.ghost:hover { background: rgb(255 255 255 / .12); }
body.csv .csv-cue { position: absolute; left: 50%; bottom: 22px; display: flex; flex-direction: column; align-items: center; gap: 10px; transform: translateX(-50%);
  font: 500 var(--fs-1)/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--cv-faint); }
body.csv .csv-cue::after { content: ""; width: 1px; height: 34px; background: linear-gradient(var(--cv-acc), transparent); transform-origin: top; }
html.csv-run body.csv .csv-cue::after { animation: cv-cue 2.4s var(--cv-ease) infinite; }
@keyframes cv-cue { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* ---------------------------------------------------------------- 2. the scene stage */
body.csv .csv-stage { position: relative; min-width: 0; }
body.csv .csv-vis { position: relative; display: block; width: 100%; aspect-ratio: 600 / 560; color: var(--cv-ink); }
body.csv .csv-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
body.csv .csv-chip { position: absolute; left: var(--x); top: var(--y); z-index: 2; display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px;
  font: 500 var(--fs-2)/1.25 var(--sans); white-space: nowrap; color: var(--cv-ink); background: var(--cv-glass); border: 1px solid var(--cv-edge);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
body.csv .csv-chip.mono { font: 500 var(--fs-1)/1.25 var(--mono); }
body.csv .csv-chip b { font-weight: 600; color: var(--cv-acc); }
body.csv .csv-chip.ill { color: var(--cv-mute); font-size: var(--fs-1); border-style: dashed; }
body.csv .csv-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cv-acc); }
body.csv .csv-chip .dot.warm { background: var(--cv-warm); box-shadow: 0 0 0 3px rgb(233 185 140 / .2); }
body.csv .c-c { transform: translateX(-50%); }
body.csv .c-r { transform: translateX(-100%); }
body.csv .c-b { transform: translateY(-100%); }
body.csv .c-r.c-b { transform: translate(-100%, -100%); }
body.csv .c-mid { transform: translateY(-50%); }
body.csv .csv-card { position: absolute; left: var(--x); top: var(--y); z-index: 2; display: flex; flex-direction: column; gap: 3px; padding: 13px 16px 14px; border-radius: 18px;
  background: linear-gradient(180deg, rgb(32 38 64 / .74), rgb(12 16 30 / .74)); border: 1px solid var(--cv-edge);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .06), 0 24px 60px -30px rgb(0 0 0 / .9), 0 0 48px -18px rgb(var(--cv-glow) / .45);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
body.csv .csv-card .k { font: 500 var(--fs-1)/1.3 var(--mono); letter-spacing: .02em; color: var(--cv-acc); }
body.csv .csv-card .big { font: 600 clamp(var(--fs-6), 0.6574vw + 18.5347px, var(--fs-8))/1.05 var(--sans); letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--cv-ink); }
body.csv .csv-card .s { max-width: 21ch; font: 400 var(--fs-2)/1.35 var(--sans); color: var(--cv-mute); white-space: normal; }

/* pause: same glyph as the rest of the site (u7-pz-i), night glass */
body.csv .csv-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; margin-top: 10px; }
body.csv .csv-ill { display: block; margin: 0; font: 500 var(--fs-1)/1.4 var(--mono); letter-spacing: .01em; color: var(--cv-faint); }
body.csv .nx-vis .csv-ill { margin-top: 10px; }
body.csv .csv-pz { position: relative; z-index: 5; flex: none; display: none; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgb(255 255 255 / .2);
  border-radius: 50%; background: rgb(255 255 255 / .1); color: var(--zc-f5f5f7); cursor: pointer; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background-color .24s; }
html.csv-run body.csv .csv-pz { display: grid; }
body.csv .csv-pz:hover { background: rgb(255 255 255 / .2); }
body.csv .csv-pz:focus-visible { outline: 2px solid var(--cv-acc); outline-offset: 3px; }

/* motion is paused offscreen, on Pause, and never runs under reduced motion (csv-run is not set) */
html.csv-paused body.csv .csv-vis *, body.csv .csv-vis.off *, html.csv-paused body.csv .csv-vis, body.csv .csv-vis.off,
html.csv-paused body.csv .csv-glow, html.csv-paused body.csv .csv-glow::before, html.csv-paused body.csv .csv-glow::after, html.csv-paused body.csv .csv-cue::after { animation-play-state: paused !important; }

/* ---- e-commerce: the weekly sweep */
body.csv .csv-eco .e-frame { fill: rgb(255 255 255 / .018); stroke: rgb(170 190 255 / .16); stroke-dasharray: 2 6; }
body.csv .csv-eco .d { fill: var(--cv-faint); opacity: .5; }
body.csv .csv-eco .d.lit { fill: var(--cv-acc); opacity: 1; }
body.csv .csv-eco .d.flag { fill: var(--cv-warm); opacity: 1; }
body.csv .csv-eco .e-ring { fill: none; stroke: var(--cv-warm); stroke-width: 1.2; opacity: .6; transform-box: fill-box; transform-origin: center; }
body.csv .csv-eco .e-rt { fill: none; stroke: var(--cv-acc); stroke-width: 1.3; stroke-dasharray: 3 5; opacity: .55; }
body.csv .csv-eco .e-cm { fill: none; stroke: var(--cv-acc); stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 10 4000; stroke-dashoffset: 10; }
body.csv .csv-eco .e-sl { stroke: var(--cv-acc); stroke-width: 1.6; }
body.csv .csv-eco .st0 { stop-color: var(--cv-acc); stop-opacity: 0; }
body.csv .csv-eco .st1 { stop-color: var(--cv-acc); stop-opacity: .24; }
body.csv .csv-eco .e-port { fill: var(--cv-acc); }
body.csv .csv-eco .e-card .big { color: var(--cv-ink); }
html.csv-run body.csv .csv-eco .e-sweep { animation: e-sweep 8s linear infinite; }
html.csv-run body.csv .csv-eco .e-mon { animation: e-mon 8s linear infinite; }
html.csv-run body.csv .csv-eco .d, html.csv-run body.csv .csv-eco .d.lit { fill: var(--cv-faint); opacity: .5; animation: e-lit 8s linear var(--dl) infinite; }
html.csv-run body.csv .csv-eco .d.flag { animation-name: e-flag; }
html.csv-run body.csv .csv-eco .d.flag.own { animation-name: e-own; }
html.csv-run body.csv .csv-eco .e-ring { opacity: 0; animation: e-ring 8s var(--cv-ease) var(--dl) infinite; }
html.csv-run body.csv .csv-eco .e-rt { opacity: 0; animation: e-rt 8s linear var(--dl) infinite; }
html.csv-run body.csv .csv-eco .e-cm { animation: e-cm 8s cubic-bezier(.5, 0, .3, 1) var(--dl) infinite; }
html.csv-run body.csv .csv-eco .e-card { animation: e-card 8s ease-in-out infinite; }
@keyframes e-sweep { 0% { transform: translateX(26px); opacity: 0; } 3% { opacity: 1; } 60% { transform: translateX(366px); opacity: 1; } 66%, 100% { transform: translateX(366px); opacity: 0; } }
@keyframes e-mon { 0% { left: 9%; opacity: 0; } 3% { opacity: 1; } 60% { left: 61%; opacity: 1; } 66%, 100% { left: 61%; opacity: 0; } }
@keyframes e-lit { 0% { fill: var(--cv-acc); opacity: 1; } 7%, 100% { fill: var(--cv-faint); opacity: .5; } }
@keyframes e-flag { 0% { fill: var(--cv-acc); opacity: 1; } 2%, 30% { fill: var(--cv-warm); opacity: 1; } 40%, 100% { fill: var(--cv-faint); opacity: .5; } }
@keyframes e-own { 0% { fill: var(--cv-acc); opacity: 1; } 2%, 62% { fill: var(--cv-warm); opacity: 1; } 72%, 100% { fill: var(--cv-faint); opacity: .5; } }
@keyframes e-ring { 0% { transform: scale(.3); opacity: 0; } 3% { opacity: .9; } 22% { transform: scale(1.9); opacity: 0; } 100% { opacity: 0; } }
@keyframes e-rt { 0% { opacity: 0; } 4%, 55% { opacity: .55; } 65%, 100% { opacity: 0; } }
@keyframes e-cm { 0% { stroke-dashoffset: 10; } 14%, 100% { stroke-dashoffset: calc(var(--L) * -1); } }
@keyframes e-card { 0%, 52% { box-shadow: inset 0 1px 0 rgb(255 255 255 / .06), 0 24px 60px -30px rgb(0 0 0 / .9), 0 0 48px -18px rgb(var(--cv-glow) / .35); border-color: var(--cv-edge); }
  64%, 78% { box-shadow: inset 0 1px 0 rgb(255 255 255 / .1), 0 24px 60px -30px rgb(0 0 0 / .9), 0 0 70px -10px rgb(var(--cv-glow) / .75); border-color: rgb(170 190 255 / .6); }
  100% { box-shadow: inset 0 1px 0 rgb(255 255 255 / .06), 0 24px 60px -30px rgb(0 0 0 / .9), 0 0 48px -18px rgb(var(--cv-glow) / .35); border-color: var(--cv-edge); } }

/* ---- Dasalla: routes to the named channels */
body.csv .csv-das .hs0 { stop-color: rgb(var(--cv-glow)); stop-opacity: .22; }
body.csv .csv-das .hs1 { stop-color: rgb(var(--cv-glow)); stop-opacity: 0; }
body.csv .csv-das .d-orbit { fill: none; stroke: rgb(170 190 255 / .2); stroke-dasharray: 2 7; transform-origin: 150px 300px; }
body.csv .csv-das .d-rt { fill: none; stroke: rgb(170 190 255 / .24); stroke-width: 1.2; }
body.csv .csv-das .d-fl { fill: none; stroke: var(--cv-acc); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 2 calc(var(--P) - 2); }
body.csv .csv-das .d-node { fill: var(--cv-acc); }
body.csv .csv-das .d-halo { fill: rgb(var(--cv-glow) / .16); stroke: rgb(var(--cv-glow) / .5); transform-box: fill-box; transform-origin: center; }
body.csv .csv-das .d-hub { fill: rgb(20 26 48 / .9); stroke: rgb(170 190 255 / .45); stroke-width: 1.2; }
body.csv .csv-das .d-core { fill: var(--cv-acc); transform-box: fill-box; transform-origin: center; }
body.csv .csv-das .d-find { border-color: rgb(233 185 140 / .35); box-shadow: inset 0 1px 0 rgb(255 255 255 / .06), 0 24px 60px -30px rgb(0 0 0 / .9); }
body.csv .csv-das .d-find .big { color: var(--zc-f3d2b0, #f3d2b0); }
html.csv-run body.csv .csv-das .d-fl { animation: d-flow var(--T) linear infinite; }
html.csv-run body.csv .csv-das .d-halo { animation: d-halo var(--T) ease-out var(--dl) infinite; }
html.csv-run body.csv .csv-das .d-core { animation: d-core 2.4s ease-in-out infinite; }
html.csv-run body.csv .csv-das .o1 { animation: d-spin 60s linear infinite; }
html.csv-run body.csv .csv-das .o2 { animation: d-spin 90s linear infinite reverse; }
@keyframes d-flow { from { stroke-dashoffset: 0; } to { stroke-dashoffset: calc(var(--P) * -1); } }
@keyframes d-halo { 0% { transform: scale(.5); opacity: .9; } 70%, 100% { transform: scale(1.5); opacity: 0; } }
@keyframes d-core { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }
@keyframes d-spin { to { transform: rotate(360deg); } }

/* ---- Green Solar: leads through five stages */
body.csv .csv-gs .g-in, body.csv .csv-gs .g-tr { fill: none; stroke: rgb(170 190 255 / .26); stroke-width: 1.3; }
body.csv .csv-gs .g-tr { stroke-width: 1.6; }
body.csv .csv-gs .g-fl { fill: none; stroke: var(--cv-acc); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 2 calc(var(--P) - 2); stroke-dashoffset: var(--o); }
body.csv .csv-gs .g-gate { fill: rgb(20 26 48 / .95); stroke: var(--cv-acc); stroke-width: 1.6; }
body.csv .csv-gs .g-gate.fin { fill: var(--cv-acc); }
body.csv .csv-gs .g-halo { fill: rgb(var(--cv-glow) / .14); stroke: rgb(var(--cv-glow) / .45); transform-box: fill-box; transform-origin: center; }
body.csv .csv-gs .g-st b { color: var(--cv-acc); }
body.csv .csv-gs .g-inl { color: var(--cv-ink2); }
html.csv-run body.csv .csv-gs .g-fl { animation: g-flow var(--T) linear infinite; }
html.csv-run body.csv .csv-gs .g-halo { animation: d-halo var(--T) ease-out var(--dl) infinite; }
html.csv-run body.csv .csv-gs .g-badge { animation: g-badge var(--T) ease-out var(--dl) infinite; }
@keyframes g-flow { from { stroke-dashoffset: var(--o); } to { stroke-dashoffset: calc(var(--o) - var(--P)); } }
@keyframes g-badge { 0% { box-shadow: inset 0 1px 0 rgb(255 255 255 / .1), 0 24px 60px -30px rgb(0 0 0 / .9), 0 0 70px -12px rgb(var(--cv-glow) / .7); }
  60%, 100% { box-shadow: inset 0 1px 0 rgb(255 255 255 / .06), 0 24px 60px -30px rgb(0 0 0 / .9), 0 0 48px -18px rgb(var(--cv-glow) / .35); } }

/* ---- Dashboard: the query types, the output draws */
body.csv .csv-vis.dp { aspect-ratio: auto; display: flex; flex-direction: column; gap: 14px; }
body.csv .dp-term, body.csv .dp-chart { display: block; border-radius: 18px; border: 1px solid var(--cv-edge); background: linear-gradient(180deg, rgb(24 30 52 / .7), rgb(10 14 26 / .72));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .06), 0 30px 70px -36px rgb(0 0 0 / .95); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
body.csv .dp-bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; border-bottom: 1px solid rgb(255 255 255 / .08); }
body.csv .dp-bar > i { width: 9px; height: 9px; border-radius: 50%; background: rgb(255 255 255 / .2); }
body.csv .dp-tab { margin-left: 10px; font: 500 var(--fs-1)/1.2 var(--mono); color: var(--cv-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.csv .dp-tab b { font-weight: 600; color: var(--cv-ink); }
body.csv .dp-code { display: block; padding: 14px 16px 16px; font: 400 var(--fs-2)/1.6 var(--mono); color: var(--cv-ink2); }
body.csv .dp-l { display: block; width: calc(var(--n) * 1ch); max-width: 100%; overflow: hidden; white-space: pre; }
body.csv .dp-code .k { color: var(--cv-acc); }
body.csv .dp-code .s { color: var(--cv-warm); }
body.csv .dp-chart { padding: 14px 16px 14px; }
body.csv .dp-h { display: flex; justify-content: space-between; padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid rgb(255 255 255 / .08); font: 500 var(--fs-1)/1.2 var(--mono); color: var(--cv-mute); }
body.csv .dp-r { display: grid; grid-template-columns: 9.5em minmax(0, 1fr) 3.2em; align-items: center; gap: 10px; padding: 3.5px 0; font: 400 var(--fs-1)/1.3 var(--mono); color: var(--cv-mute); }
body.csv .dp-r.hl { color: var(--cv-ink); }
body.csv .dp-b { display: block; height: 10px; border-radius: 5px; background: rgb(255 255 255 / .05); overflow: hidden; }
body.csv .dp-b i { display: block; width: calc(var(--v) * 100%); height: 100%; border-radius: 5px; background: rgb(170 190 255 / .42); transform-origin: left; }
body.csv .dp-r.hl .dp-b i { background: linear-gradient(90deg, var(--cv-acc-f), var(--cv-acc)); box-shadow: 0 0 14px -2px rgb(var(--cv-glow) / .6); }
body.csv .dp-v { text-align: right; font-variant-numeric: tabular-nums; }
body.csv .dp-cap { display: block; margin-top: 10px; font: 400 var(--fs-1)/1.45 var(--sans); color: var(--cv-faint); }
/* typing state, driven by csv.js (no JS: the full query and the bars are simply there) */
body.csv .csv-dp[data-ph] .dp-l { width: calc(var(--c, var(--n)) * 1ch); }
body.csv .csv-dp[data-ph] .dp-l.cur::after { content: ""; display: inline-block; width: .6ch; height: 1.1em; margin-left: 1px; vertical-align: -2px; background: var(--cv-acc); }
body.csv .csv-dp[data-ph] .dp-b i { transition: transform .5s var(--cv-ease) calc(var(--i) * 70ms); }
body.csv .csv-dp[data-ph] .dp-v { transition: opacity .3s calc(var(--i) * 70ms + .2s); }
body.csv .csv-dp[data-ph="type"] .dp-b i, body.csv .csv-dp[data-ph="clear"] .dp-b i { transform: scaleX(0); }
body.csv .csv-dp[data-ph="type"] .dp-v, body.csv .csv-dp[data-ph="clear"] .dp-v { opacity: 0; }
body.csv .csv-dp[data-ph="clear"] .dp-code { opacity: .25; transition: opacity .4s; }

/* ---------------------------------------------------------------- 3. facts strip (at a glance + manifest + note), overlapping the hero edge */
body.csv .csv-facts { position: relative; z-index: 2; padding: 0 var(--gut) clamp(40px, 4vw, 64px); background: transparent; }
body.csv .csv-facts .glance { margin-top: clamp(-64px, -4vw, -32px); }
body.csv .csv-facts .glance > div { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--u7-line);
  box-shadow: 0 1px 2px rgb(11 20 48 / .05), 0 24px 48px -28px rgb(11 20 48 / .35); }
:root[data-theme="dark"] body.csv .csv-facts .glance > div { background: rgb(20 24 38 / .82); border-color: rgb(255 255 255 / .12); box-shadow: 0 30px 60px -34px rgb(0 0 0 / .9);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
body.csv .csv-facts .glance > div::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg, var(--u7-acc), transparent 70%); }
body.csv .csv-facts .manifest { margin-top: clamp(28px, 3vw, 44px); }
body.csv .csv-facts .cs-note { margin-top: var(--space-5); }

/* ---------------------------------------------------------------- 4. chapters: a numeral and an accent line on every section */
body.csv .cs-main .tt-h .eyebrow { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
body.csv .cs-main .tt-h .eyebrow .n { display: block; margin: 0; padding: 0 0 .04em; font: 600 clamp(var(--fs-11), 1.8781vw + 52.9571px, var(--fs-12))/.9 var(--sans); letter-spacing: -.055em; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, var(--ink) 15%, color-mix(in srgb, var(--ink) 18%, transparent) 105%); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: 1; }
body.csv .cs-main .tt-h .eyebrow .n::after { content: ""; display: block; width: 56px; height: 2px; margin-top: 18px; border-radius: 1px; background: linear-gradient(90deg, var(--u7-acc), transparent);
  transform-origin: left; transition: transform .45s var(--cv-ease) .1s; }
html.csv-js body.csv .cs-main .tt-h .eyebrow:not(.in) .n::after { transform: scaleX(0); }
@media (min-width: 1024px) { body.csv .tt-h { top: calc(var(--nav-h, 56px) + 76px); } body.csv .cs-sec.tt:has(> .tt-wide) > .tt-h { position: static; } }

/* section tones: plain and band alternate (u1), the results band takes a glow, the takeaway is night */
body.csv .cs-sec.csv-results { position: relative; isolation: isolate; }
body.csv .cs-sec.csv-results::before { content: ""; position: absolute; z-index: -1; inset: 0 calc(50% - 50vw); pointer-events: none;
  background: radial-gradient(50% 60% at 18% 30%, color-mix(in srgb, var(--u7-acc) 14%, transparent), transparent 70%), radial-gradient(45% 55% at 85% 75%, color-mix(in srgb, var(--u7-acc) 10%, transparent), transparent 70%); }
@media (min-width: 1024px) {
  body.csv .cs-sec.csv-results .tt-h { grid-column: 1 / -1; position: static; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(32px, 4vw, 64px); align-items: end; }
  body.csv .cs-sec.csv-results .tt-h .h2 { max-width: 18ch; }
  body.csv .cs-sec.csv-results .tt-b { grid-column: 2; }
}

/* ---------------------------------------------------------------- 5. results band: one glass panel, large numbers */
body.csv .csv-panel { position: relative; padding: clamp(24px, 3vw, 48px); border-radius: 32px; overflow: hidden;
  background: linear-gradient(160deg, color-mix(in srgb, var(--surface) 82%, transparent), color-mix(in srgb, var(--surface) 62%, transparent));
  border: 1px solid var(--u7-line); box-shadow: inset 0 1px 0 rgb(255 255 255 / .5), 0 40px 80px -50px rgb(11 20 48 / .45); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
:root[data-theme="dark"] body.csv .csv-panel { background: linear-gradient(160deg, rgb(30 36 58 / .62), rgb(14 18 30 / .55)); border-color: rgb(255 255 255 / .12); box-shadow: inset 0 1px 0 rgb(255 255 255 / .07), 0 40px 90px -50px rgb(0 0 0 / .9); }
body.csv .csv-panel::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--u7-acc) 70%, transparent), transparent); }
body.csv .csv-panel > * + * { margin-top: var(--space-6); }
body.csv .csv-panel .cs-proof { margin: 0; border: 0; gap: clamp(20px, 3vw, 48px); }
body.csv .csv-panel .cs-proof > div { padding: 0 !important; border: 0 !important; }
body.csv .csv-panel .cs-proof > div + div { padding-left: clamp(20px, 3vw, 48px) !important; border-left: 1px solid var(--u7-line) !important; }
body.csv .csv-panel .cs-proof b { font: 600 clamp(var(--fs-10), 1.5025vw + 38.3656px, var(--fs-11))/.95 var(--sans); letter-spacing: -.05em; font-variant-numeric: tabular-nums; white-space: nowrap;
  background: linear-gradient(180deg, var(--ink) 35%, color-mix(in srgb, var(--ink) 62%, var(--u7-acc))); -webkit-background-clip: text; background-clip: text; color: transparent; }
body.csv .csv-panel .cs-proof span { margin-top: 14px; max-width: 30ch; font-size: clamp(var(--fs-4), 0.1879vw + 14.2953px, var(--fs-5)); }
body.csv .csv-panel .numpair { gap: clamp(16px, 2vw, 28px); }
body.csv .csv-panel .numpair figure { min-height: 0; background: color-mix(in srgb, var(--bg) 55%, transparent); }
body.csv .csv-panel .numpair b { font-size: clamp(var(--fs-10), 3.3804vw + 31.3235px, var(--fs-12)); background: linear-gradient(180deg, var(--ink) 35%, color-mix(in srgb, var(--ink) 62%, var(--u7-acc))); -webkit-background-clip: text; background-clip: text; color: transparent; }
body.csv .csv-panel .caption-m { margin-top: var(--space-4); }
body.csv .csv-panel .quota { margin-top: var(--space-7); }
body.csv .csv-panel .cs-src { margin-top: var(--space-4); }
body.csv .csv-panel .cfig { padding: 0; border: 0; background: transparent; }
body.csv .csv-panel .ledger .lg-n { font-size: clamp(var(--fs-8), 0.5635vw + 25.8868px, var(--fs-9)); letter-spacing: -.03em; }
/* the ledger lights row by row (csv.js adds .lit to each row in turn; without JS every row is lit) */
body.csv .csv-panel .ledger li { transition: opacity .4s var(--cv-ease), transform .4s var(--cv-ease); }
body.csv .csv-panel .ledger svg path { stroke-dasharray: 30; stroke-dashoffset: 0; transition: stroke-dashoffset .45s var(--cv-ease) .1s; }
html.csv-js body.csv .csv-panel .ledger.wait li:not(.lit) { opacity: .28; }
html.csv-js body.csv .csv-panel .ledger.wait li:not(.lit) svg path { stroke-dashoffset: 30; }
body.csv .csv-panel .ledger li.lit { animation: cv-row .9s var(--cv-ease); }
@keyframes cv-row { 0% { background: color-mix(in srgb, var(--u7-acc) 10%, transparent); } 100% { background: transparent; } }
@media (max-width: 700px) {
  body.csv .csv-panel { border-radius: 24px; padding: 20px; }
  body.csv .csv-panel .cs-proof { grid-template-columns: minmax(0, 1fr); }
  body.csv .csv-panel .cs-proof > div + div { padding-left: 0 !important; border-left: 0 !important; padding-top: 20px !important; border-top: 1px solid var(--u7-line) !important; }
  body.csv .csv-panel .cs-proof b, body.csv .csv-panel .cs-proof.txt b { font-size: clamp(var(--fs-10), 4.9232vw + 25.538px, var(--fs-11)); }
}

/* ---------------------------------------------------------------- 6. takeaway: a night chapter and a pull quote */
body.csv .cs-sec.csv-quote { position: relative; isolation: isolate; background: var(--cv-n1); box-shadow: 0 0 0 100vmax var(--cv-n1); clip-path: inset(0 -100vmax);
  padding-block: clamp(96px, 9vw, 168px); }
body.csv .cs-sec.csv-quote::before { content: ""; position: absolute; z-index: -1; inset: 0 calc(50% - 50vw); pointer-events: none;
  background: radial-gradient(40% 60% at 20% 20%, rgb(77 96 196 / .26), transparent 70%), radial-gradient(40% 50% at 85% 90%, rgb(var(--cv-glow) / .16), transparent 70%); }
body.csv .cs-sec.csv-quote::after { content: ""; position: absolute; z-index: -1; inset: 0 calc(50% - 50vw); opacity: .07; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url%28%23n%29'/%3E%3C/svg%3E"); }
body.csv .csv-quote .cs-learn { position: relative; max-width: 18ch; margin: 0; padding-top: .55em; font: 600 clamp(var(--fs-9), 2.4415vw + 24.8443px, var(--fs-11))/1.02 var(--sans); letter-spacing: -.045em; text-wrap: balance;
  background: linear-gradient(180deg, var(--zc-fff) 30%, var(--zc-c9d0dc)); -webkit-background-clip: text; background-clip: text; color: transparent; }
body.csv .csv-quote .cs-learn::before { content: "\201C"; position: absolute; top: -.05em; left: -.04em; font-size: clamp(var(--fs-10), 3.3804vw + 31.3235px, var(--fs-12)); line-height: 1; color: var(--cv-acc); -webkit-text-fill-color: var(--cv-acc); opacity: .9; }
body.csv .csv-quote .tt-b > .cs-p { color: var(--cv-mute); font-size: clamp(var(--fs-5), 0.3757vw + 15.5911px, var(--fs-6)); }
body.csv .csv-quote .tt-b > .cs-learn + .cs-p { margin-top: var(--space-6); }
@media (min-width: 1024px) { body.csv .csv-quote .tt-b { grid-column: 1 / -1; padding-left: calc((100% - 2 * clamp(32px, 4vw, 64px)) / 12 * 4 + clamp(32px, 4vw, 64px)); } body.csv .csv-quote .tt-h { position: static; } }
/* e-commerce: three lessons, set as the quote */
body.csv .csv-quote .learned { position: relative; list-style: none; margin: 0; padding: clamp(56px, 4vw, 72px) 0 0; border: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 56px); counter-reset: none; }
body.csv .csv-quote .learned li { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
body.csv .csv-quote .learned li::before { display: none; }
body.csv .csv-quote .learned h3 { margin: 0; font: 600 clamp(var(--fs-8), 1.5025vw + 22.3656px, var(--fs-10))/1.04 var(--sans); letter-spacing: -.04em; text-wrap: balance;
  background: linear-gradient(180deg, var(--zc-fff) 30%, var(--zc-c9d0dc)); -webkit-background-clip: text; background-clip: text; color: transparent; }
body.csv .csv-quote .learned::before { content: "\201C"; position: absolute; top: 0; left: -.04em; font: 600 clamp(var(--fs-11), 1.8781vw + 52.9571px, var(--fs-12))/.8 var(--sans); color: var(--cv-acc); }
body.csv .csv-quote .learned p { margin: 16px 0 0; font-size: var(--fs-5); line-height: 1.5; color: var(--cv-mute); }
@media (max-width: 860px) { body.csv .csv-quote .learned { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- 7. the real thing: a browser frame, a phone frame */
body.csv .real-fr { position: relative; box-shadow: 0 1px 2px rgb(11 20 48 / .06), 0 40px 80px -48px rgb(11 20 48 / .5); }
:root[data-theme="dark"] body.csv .real-fr { box-shadow: 0 40px 90px -50px rgb(0 0 0 / .95), 0 0 0 1px rgb(255 255 255 / .04); }
body.csv .real-fr:not(.ph)::before { content: ""; position: absolute; z-index: 2; inset: 0 0 auto; height: 40px; border-bottom: 1px solid var(--u7-line);
  background: radial-gradient(circle at 22px 20px, var(--u7-line-2) 0 5px, transparent 5.5px), radial-gradient(circle at 40px 20px, var(--u7-line-2) 0 5px, transparent 5.5px),
    radial-gradient(circle at 58px 20px, var(--u7-line-2) 0 5px, transparent 5.5px), color-mix(in srgb, var(--cs-fill) 92%, var(--ink)); }
body.csv .real-fr:not(.ph)::after { content: ""; position: absolute; z-index: 3; top: 10px; left: 50%; width: min(42%, 340px); height: 20px; transform: translateX(-50%); border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 70%, transparent); border: 1px solid var(--u7-line); }
body.csv .real-fr.empty { padding-top: calc(40px + clamp(18px, 3vw, 40px)); }
body.csv .real-fr.lap { padding-top: 40px; }
body.csv .real-fr.lap img { height: 100%; }
body.csv .real-fr.ph { border: 7px solid color-mix(in srgb, var(--ink) 88%, var(--bg)); border-radius: 34px; }
body.csv .real-fr.ph::before { content: ""; position: absolute; z-index: 2; top: 8px; left: 50%; width: 34%; height: 14px; transform: translateX(-50%); border-radius: 999px; background: color-mix(in srgb, var(--ink) 88%, var(--bg)); }
body.csv .real-fr.empty .real-chip { position: relative; z-index: 1; }

/* ---------------------------------------------------------------- 8. next case: a full-bleed night teaser with the next case's scene */
body.csv .cs-next.csv-next { position: relative; isolation: isolate; overflow: hidden; margin-top: clamp(24px, 3vw, 48px); padding: clamp(56px, 6vw, 112px) var(--gut) clamp(40px, 4vw, 72px); background: var(--cv-n1);
  border-radius: clamp(24px, 3vw, 44px) clamp(24px, 3vw, 44px) 0 0; }
body.csv .cs-next.csv-next::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background: radial-gradient(45% 70% at 80% 40%, rgb(var(--cv-glow) / .2), transparent 70%), radial-gradient(40% 60% at 10% 90%, rgb(77 96 196 / .22), transparent 70%), radial-gradient(120% 80% at 50% 0%, var(--cv-n2), var(--cv-n1) 60%); }
body.csv .csv-next .wrap { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; }
body.csv .csv-next .wrap > .next { flex: 1 0 100%; }
body.csv .csv-next .wrap > .back { flex: 1 1 auto; order: 1; }
body.csv .csv-next .wrap > .nx-pz { order: 2; margin-top: clamp(24px, 3vw, 40px); }
body.csv .csv-next .next { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: auto auto auto 1fr; align-items: start; gap: 10px clamp(32px, 4vw, 80px);
  padding: 0; border: 0; border-radius: 0; background: none !important; box-shadow: none !important; color: var(--cv-ink); text-decoration: none; transform: none !important; }
body.csv .csv-next .nx-vis { grid-column: 2; grid-row: 1 / span 4; display: block; transition: transform .6s var(--cv-ease); }
body.csv .csv-next .nx-k { grid-column: 1; grid-row: 1; align-self: end; margin-top: clamp(24px, 6vw, 96px); color: var(--cv-acc); font-weight: 600; }
body.csv .csv-next .nx-t { grid-column: 1; grid-row: 2; font: 600 clamp(var(--fs-9), 2.4415vw + 24.8443px, var(--fs-11))/1.02 var(--sans); letter-spacing: -.045em;
  background: linear-gradient(180deg, var(--zc-fff) 30%, var(--zc-c9d0dc)); -webkit-background-clip: text; background-clip: text; color: transparent; }
body.csv .csv-next .nx-d { grid-column: 1; grid-row: 3; max-width: 40ch; font-size: clamp(var(--fs-5), 0.3757vw + 15.5911px, var(--fs-6)); line-height: 1.5; color: var(--cv-mute); }
body.csv .csv-next .nx-a { grid-column: 1; grid-row: 4; justify-self: start; margin-top: 18px; color: var(--zc-05070d); background: var(--zc-f5f5f7); border-color: transparent; box-shadow: 0 10px 40px -12px rgb(var(--cv-glow) / .7); }
body.csv .csv-next .next:hover .nx-vis { transform: scale(1.015); }
body.csv .csv-next .next:focus-visible { outline: 2px solid var(--cv-acc); outline-offset: 8px; border-radius: 20px; }
body.csv .csv-next .back { margin-top: clamp(24px, 3vw, 40px); }
body.csv .csv-next .back a { color: var(--cv-ink2); }
body.csv .csv-next + .m-contact { padding-top: clamp(72px, 7vw, 120px); }

/* ---------------------------------------------------------------- 9. chapter rail (desktop): sticky under the header, with scroll progress */
body.csv .csv-rail { display: none; }
@media (min-width: 1024px) {
  body.csv .csv-rail { position: fixed; z-index: 39; top: var(--nav-h, 56px); left: 0; right: 0; display: block; padding: 8px var(--gut) 0; pointer-events: none;
    opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .3s var(--cv-ease), transform .3s var(--cv-ease), visibility 0s .3s; }
  body.csv .csv-rail.on { opacity: 1; visibility: visible; transform: none; transition: opacity .3s var(--cv-ease), transform .3s var(--cv-ease), visibility 0s; }
  body.csv .csv-rail-in { position: relative; display: flex; align-items: center; gap: 4px; width: fit-content; max-width: 100%; margin: 0 auto; padding: 4px; border-radius: 999px; pointer-events: auto;
    background: color-mix(in srgb, var(--bg) 78%, transparent); border: 1px solid color-mix(in srgb, var(--line-2) 50%, transparent);
    box-shadow: 0 10px 30px -18px rgb(11 20 48 / .35); -webkit-backdrop-filter: saturate(1.6) blur(22px); backdrop-filter: saturate(1.6) blur(22px); overflow: hidden; }
  body.csv .csv-rail ol { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
  body.csv .csv-rail a { display: flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 13px; border-radius: 999px; white-space: nowrap; text-decoration: none;
    font: 500 var(--fs-3)/1 var(--sans); color: var(--muted); transition: background-color .2s, color .2s; }
  body.csv .csv-rail a span { font: 500 var(--fs-1)/1 var(--mono); color: color-mix(in srgb, var(--muted) 80%, transparent); font-variant-numeric: tabular-nums; }
  body.csv .csv-rail a:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
  body.csv .csv-rail a[aria-current="true"] { color: var(--bg); background: var(--ink); }
  body.csv .csv-rail a[aria-current="true"] span { color: color-mix(in srgb, var(--bg) 70%, transparent); }
  body.csv .csv-rail a:focus-visible { outline: 2px solid var(--u7-acc); outline-offset: -2px; }
  body.csv .csv-prog { position: absolute; left: 18px; right: 18px; bottom: 0; height: 2px; border-radius: 1px; overflow: hidden; }
  body.csv .csv-prog i { display: block; height: 100%; background: linear-gradient(90deg, color-mix(in srgb, var(--u7-acc) 30%, transparent), var(--u7-acc)); transform-origin: left; transform: scaleX(var(--p, 0)); }
}

/* ---------------------------------------------------------------- 10. figures draw in on first view (csv.js adds .csv-pre only to figures below the fold) */
body.csv .cfig .sv-ln { transition: stroke-dashoffset .45s var(--cv-ease) calc(var(--i, 0) * 50ms); }
body.csv .cfig .sv-box, body.csv .cfig .sv-t, body.csv .cfig .sv-i, body.csv .cfig .sv-big, body.csv .cfig .sv-grp, body.csv .cfig text { transition: opacity .4s var(--cv-ease) calc(var(--i, 0) * 50ms), transform .4s var(--cv-ease) calc(var(--i, 0) * 50ms); }
body.csv .csv-pre .sv-ln { stroke-dasharray: 1; stroke-dashoffset: 1; }
body.csv .csv-pre .sv-box, body.csv .csv-pre .sv-grp, body.csv .csv-pre text { opacity: 0; transform: translateY(6px); }
body.csv .csv-pre .sv-ah { opacity: 0; }
body.csv .cfig .sv-ah { transition: opacity .3s .4s; }

/* ---------------------------------------------------------------- 11. tablets and phones */
@media (max-width: 1023px) {
  body.csv .csv-hero { min-height: 0; }
  body.csv .csv-hero-in { grid-template-columns: minmax(0, 1fr); }
  body.csv .csv-stage { max-width: 620px; }
  body.csv .csv-cue { display: none; }
  body.csv .csv-next .next { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  body.csv .csv-next .nx-vis { grid-column: 1; grid-row: auto; order: 5; max-width: 620px; margin-top: 24px; }
  body.csv .csv-next .nx-k, body.csv .csv-next .nx-t, body.csv .csv-next .nx-d, body.csv .csv-next .nx-a { grid-row: auto; }
  body.csv .csv-next .nx-k { margin-top: 0; }
}
@media (max-width: 600px) {
  body.csv .csv-hero { padding: calc(var(--nav-h, 56px) + 24px) var(--gut) 48px; border-radius: 0 0 24px 24px; }
  body.csv .csv-h1 { font-size: var(--fs-10); }
  body.csv .csv-hero .lede { font-size: var(--fs-5); }
  body.csv .csv-stage { margin-top: 8px; }
  body.csv .csv-chip { padding: 3px 8px; font-size: var(--fs-1); gap: 5px; }
  body.csv .csv-chip.mono { font-size: var(--fs-1); }
  body.csv .csv-chip.ill { font-size: var(--fs-1); }
  body.csv .csv-card { padding: 8px 10px 9px; border-radius: 12px; gap: 1px; }
  body.csv .csv-card .k { font-size: var(--fs-1); }
  body.csv .csv-card .big { font-size: var(--fs-6); }
  body.csv .csv-card .s { font-size: var(--fs-1); max-width: 17ch; }
  body.csv .csv-gs .g-badge .s { max-width: 27ch; }
  body.csv .csv-gs .g-badge .big { font-size: var(--fs-5); }
  body.csv .csv-vis.dp { gap: 10px; }
  body.csv .dp-code { padding: 10px 10px 12px; font-size: var(--fs-1); line-height: 1.55; }
  body.csv .dp-chart { padding: 10px; }
  body.csv .dp-r { grid-template-columns: 8.6em minmax(0, 1fr) 2.8em; gap: 6px; font-size: var(--fs-1); }
  body.csv .dp-tab { font-size: var(--fs-1); }
  body.csv .csv-facts .glance { margin-top: 24px; }
  body.csv .cs-main .tt-h .eyebrow .n::after { margin-top: 12px; }
  body.csv .real-fr:not(.ph)::before { height: 30px; background-size: auto; }
  body.csv .real-fr:not(.ph)::before { background: radial-gradient(circle at 16px 15px, var(--u7-line-2) 0 4px, transparent 4.5px), radial-gradient(circle at 30px 15px, var(--u7-line-2) 0 4px, transparent 4.5px),
    radial-gradient(circle at 44px 15px, var(--u7-line-2) 0 4px, transparent 4.5px), color-mix(in srgb, var(--cs-fill) 92%, var(--ink)); }
  body.csv .real-fr:not(.ph)::after { top: 7px; height: 16px; }
  body.csv .real-fr.empty { padding-top: 46px; }
  body.csv .real-fr.lap { padding-top: 30px; }
  body.csv .real-fr.ph { border-width: 5px; border-radius: 22px; }
  body.csv .csv-quote .cs-learn { font-size: clamp(var(--fs-9), 4.4446vw + 17.3327px, var(--fs-10)); }
}
@media (prefers-reduced-motion: reduce) {
  body.csv .csv-pz { display: none !important; }
  body.csv .cfig *, body.csv .cs-main .tt-h .eyebrow .n::after, body.csv .csv-next .nx-vis, body.csv .csv-rail { transition: none !important; }
}