.zv-rows{background:var(--black-hero);color:var(--text-on-dark);position:relative;container:rows / inline-size}
.zv-rows .runway{position:relative}
.zv-rows .stage{position:relative;padding:clamp(56px,8vw,96px) clamp(20px,4vw,64px);box-sizing:border-box}
.zv-rows .stage-in{width:100%;max-width:var(--maxw,1344px);margin:0 auto;display:grid;position:relative;
  grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,4vw,64px);align-items:center}

/* copy column */
.zv-rows .row-copy{position:relative;transform:translate3d(0,calc(var(--p,0) * -22px),0)}
.zv-rows .row-eyebrow{margin:0}
.zv-rows .row-copy h2{font-family:var(--font-display);font-weight:800;letter-spacing:-0.03em;line-height:1.06;
  font-size:var(--type-display-md);margin:14px 0 14px;text-wrap:balance;color:var(--text-on-dark)}
.zv-rows .row-p{color:var(--text-on-dark-muted);font-size:17px;line-height:1.55;margin:0;max-width:36ch}

/* the card */
.zv-rows .fit{position:relative;overflow:clip;background:rgba(255,255,255,.045);border:1px solid var(--border-dark);border-radius:var(--radius-lg);
  padding:15px 20px 13px;display:grid;gap:8px}
.zv-rows .bar{position:absolute;z-index:3;left:0;right:0;top:0;height:3px;background:rgba(255,255,255,.12)}
.zv-rows .bar i{display:block;height:100%;background:rgba(255,255,255,.88);transform-origin:0 50%;transform:scaleX(1);
  transition:transform var(--motion-slow) var(--ease)}
.zv-rows .fit-top{display:flex;justify-content:space-between;align-items:center;gap:12px;
  margin:-15px -20px 0;padding:13px 20px 6px;background:color-mix(in srgb,var(--black-hero) 95.5%,#fff)}
/* in flow layout (live, not pinned) the kind label and the state chip stay in view under the site header */
.zv-rows[data-live] .runway:not([data-pin="on"]) .fit-top{position:sticky;top:var(--hdr,0px);z-index:2}
.zv-rows .kind{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-on-dark-muted)}
.zv-rows .chip{font-size:12px;font-weight:700;padding:3px 11px;border-radius:999px;border:1px solid rgba(255,255,255,.3);
  color:#fff;white-space:nowrap;transition:background var(--motion-base) var(--ease),color var(--motion-base) var(--ease),border-color var(--motion-base) var(--ease)}
.zv-rows .runway[data-state="decided"] .chip{background:#fff;color:var(--black-hero);border-color:#fff}
.zv-rows .fit-id{font-family:var(--font-display);font-size:21px;font-weight:700;letter-spacing:-0.01em;line-height:1.2;margin:0;color:#fff}
.zv-rows .steps{margin:0;padding:0;list-style:none;display:grid;gap:3px;font-size:14px;line-height:1.4;color:rgba(255,255,255,.86)}
.zv-rows .steps li{display:grid;grid-template-columns:22px 1fr;gap:8px;align-items:baseline}
.zv-rows .steps b{color:var(--text-on-dark-faint);font-weight:700;transition:color var(--motion-base) var(--ease)}
.zv-rows .steps li[data-on] b{color:var(--tertiary-500)}

/* the school-size band (Row 1) and who answers */
.zv-rows .bands{display:grid;gap:5px}
.zv-rows .bands-l{font-size:12px;color:var(--text-on-dark-faint);letter-spacing:.02em}
.zv-rows .bands-b{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.zv-rows .who{margin:0;font-size:13.5px;color:var(--text-on-dark-muted)}
.zv-rows .who b{color:#fff;font-weight:700}

/* buttons: the marketing skin's .btn .btn-ghost-dark, sized for a card */
.zv-rows .fit .btn{font-size:14px;letter-spacing:0;padding:7px 8px;min-height:40px;line-height:1.2;border-radius:var(--radius-md)}
.zv-rows .fit .btn[aria-pressed="true"]{background:#fff;color:var(--black-hero);border-color:#fff}
.zv-rows .fit .btn:disabled{opacity:.38;cursor:default;transform:none}
.zv-rows:not([data-js]) .fit .btn:disabled{opacity:1}   /* no script: the stamped controls are an illustration, not live */
.zv-rows .fit .btn:focus-visible{outline:2px solid var(--tertiary-500);outline-offset:2px}

/* the test's setting: plain text since 0.5.1 (owner ruling 2026-10-16, "dial, honest"); the sample run has one setting */
.zv-rows .dial{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 6px;font-size:14px;line-height:1.4;
  padding:8px 12px;border-radius:var(--radius-md);background:rgba(255,255,255,.06);color:var(--text-on-dark-muted)}
.zv-rows .dial-v{color:#fff;font-weight:800}
.zv-rows .sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* chart */
.zv-rows .chart-block{margin:0;display:grid;gap:4px}
.zv-rows .chart{width:100%;height:auto;display:block;overflow:visible}
.zv-rows .chart .base{stroke:rgba(255,255,255,.22);stroke-width:1;stroke-dasharray:3 4}
.zv-rows .chart .line{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0;
  transition:stroke-dashoffset var(--motion-slow) var(--ease)}
.zv-rows .chart .dot{fill:var(--tertiary-500);transition:transform var(--motion-slow) var(--ease),opacity var(--motion-base) var(--ease)}
.zv-rows .chart-cap{font-size:12.5px;color:var(--text-on-dark-muted);display:flex;justify-content:space-between;gap:10px}
.zv-rows .chart-cap .now{color:#fff}
.zv-rows .chart-cap .was{white-space:nowrap}

/* verdict and the decision slot (its height is reserved, so the card never jumps) */
.zv-rows .verdict{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.zv-rows .slot{font-size:13.5px;line-height:1.4;color:rgba(255,255,255,.88);padding:8px 12px;border-left:2px solid #fff;
  background:rgba(255,255,255,.05);box-sizing:border-box;min-height:calc(2 * 1.4em + 16px);transition:opacity var(--motion-base) var(--ease)}
.zv-rows .slot b{color:#fff}
.zv-rows .runway:not([data-state="decided"]) .slot{border-left-color:rgba(255,255,255,.28);color:var(--text-on-dark-muted)}
.zv-rows .fine{margin:0;font-size:12px;line-height:1.4;color:var(--text-on-dark-faint)}
.zv-rows .fine em{font-style:normal;color:rgba(255,255,255,.78)}

/* emergence: .rise from the marketing skin, staggered. Static rows show everything. */
.zv-rows .rise{transition-delay:calc(var(--i,0) * 90ms)}
.zv-rows:not([data-live]) .rise{opacity:1;transform:none;transition:none}

/* ---- live ---- */
.zv-rows[data-live] .runway[data-state="draft"] .chart .line{stroke-dashoffset:1}
.zv-rows[data-live] .runway[data-state="draft"] .chart .dot{opacity:0}
.zv-rows[data-live] .runway[data-state="draft"] .bar i{transform:scaleX(0)}
.zv-rows[data-live] .runway[data-state="draft"] .chart-cap .was{visibility:hidden}
/* pinned: the card fits the scroller */
.zv-rows .runway[data-pin="on"]{height:200svh;height:200cqh}
.zv-rows .runway[data-pin="on"] .stage{position:sticky;top:0;height:100svh;height:100cqh;overflow:hidden;display:flex;align-items:center;
  padding-top:calc(var(--hdr,80px) + 8px);padding-bottom:10px}

/* ---- phone: the copy flows past, only the card pins ---- */
@container rows (max-width: 767px){
  .zv-rows .stage{padding:36px 16px 36px}
  .zv-rows .stage-in{display:block}
  .zv-rows .row-copy{margin-bottom:18px;transform:none}
  .zv-rows .row-copy h2{font-size:28px;margin:10px 0 10px}
  .zv-rows .row-p{font-size:15px;line-height:1.5;max-width:none}
  .zv-rows .fit{padding:12px 14px 11px;gap:7px}
  .zv-rows .fit-top{margin:-12px -14px 0;padding:11px 14px 6px}
  .zv-rows .fit-id{font-size:18px}
  .zv-rows .steps{font-size:13.5px;gap:2px}
  .zv-rows .dial{padding:6px 10px;font-size:13.5px}
  .zv-rows .who{font-size:13px}
  .zv-rows .chart-cap{font-size:12px}
  .zv-rows .slot{font-size:12.5px;padding:6px 10px;min-height:calc(3 * 1.4em + 12px)}
  .zv-rows .fine{font-size:11.5px}
  .zv-rows .fit .btn{font-size:13px;padding:6px 4px;min-height:44px}
  .zv-rows .runway[data-pin="on"]{height:auto}
  .zv-rows .runway[data-pin="on"] .stage{position:static;height:auto;display:block;overflow:visible;padding-block:36px}
  .zv-rows .runway[data-pin="on"] .stage-in{display:block;min-height:220svh;min-height:220cqh}
  .zv-rows .runway[data-pin="on"] .fit{position:sticky;top:calc(var(--hdr,64px) + 6px)}
}
@container rows (max-width: 300px){
  .zv-rows .stage{padding-inline:12px}
  .zv-rows .bands-b,.zv-rows .verdict{grid-template-columns:minmax(0,1fr)}
}
.zv-rows[data-live] .runway[data-dense] .fit{gap:4px;padding-top:10px;padding-bottom:9px}
.zv-rows[data-live] .runway[data-dense] .fit-top{padding-bottom:4px}
.zv-rows[data-live] .runway[data-dense] .fit-id{font-size:16px;line-height:1.2}
.zv-rows[data-live] .runway[data-dense] .steps{font-size:13px;line-height:1.3;gap:0}
.zv-rows[data-live] .runway[data-dense] .bands{gap:3px}
.zv-rows[data-live] .runway[data-dense] .bands-l{font-size:11.5px}
.zv-rows[data-live] .runway[data-dense] .who{font-size:12.5px;line-height:1.3}
.zv-rows[data-live] .runway[data-dense] .chart-block{gap:2px}
.zv-rows[data-live] .runway[data-dense] .chart-cap{font-size:11.5px;line-height:1.3}
.zv-rows[data-live] .runway[data-dense] .slot{font-size:12px;line-height:1.35;padding:4px 10px}
.zv-rows[data-live] .runway[data-dense] .fine{font-size:11px;line-height:1.35}
@media (prefers-reduced-motion:reduce){
  .zv-rows .line,.zv-rows .bar i,.zv-rows .dot,.zv-rows .chip{transition:none}
}

/* ---- v0.6.0: the Scan line (stamped hidden; scenes/rows.js shows it after the Scan's reveal). It does not move: it appears in
   place, so prefers-reduced-motion and window.__rows.setReduced have nothing to turn off here; the message row is static too. ---- */
.zv-rows .zv-scanline{position:relative;z-index:4;background:var(--black-hero);border-bottom:1px solid var(--border-dark);
  padding:clamp(28px,4vw,44px) clamp(20px,4vw,64px) clamp(24px,3vw,36px);box-sizing:border-box}
.zv-rows .zv-scanline[hidden]{display:none}
.zv-rows .scanline-in{max-width:var(--maxw,1344px);margin:0 auto;display:grid;gap:8px}
.zv-rows .scanline-eyebrow{margin:0}
.zv-rows .scanline-fig{margin:0;font-family:var(--font-display);font-weight:800;letter-spacing:-0.02em;line-height:1.1;
  font-size:clamp(28px,3.4vw,44px);color:#fff;font-variant-numeric:tabular-nums}
.zv-rows .scanline-note{margin:0;font-size:15px;line-height:1.5;color:var(--text-on-dark-muted);max-width:52ch}

/* ---- v0.6.0: the message row between Row 1 and Row 2. Not a runway: its own background, stacked above Row 1's sticky stage. ---- */
.zv-rows .zv-msg{position:relative;z-index:4;background:color-mix(in srgb,var(--black-hero) 90%,#fff);
  border-top:1px solid var(--border-dark);border-bottom:1px solid var(--border-dark);
  padding:clamp(56px,7vw,88px) clamp(20px,4vw,64px);box-sizing:border-box}
.zv-rows .msg-in{max-width:var(--maxw,1344px);margin:0 auto}
.zv-rows .msg-line{margin:0 0 14px;font-family:var(--font-display);font-weight:800;letter-spacing:-0.03em;line-height:1.08;
  font-size:var(--type-display-md);color:#fff;max-width:20ch;text-wrap:balance}
.zv-rows .msg-p{margin:0;font-size:18px;line-height:1.55;color:var(--text-on-dark-muted);max-width:44ch}

@container rows (max-width: 767px){
  .zv-rows .zv-scanline{padding:24px 16px 20px}
  .zv-rows .scanline-fig{font-size:30px}
  .zv-rows .scanline-note{font-size:14px;max-width:none}
  .zv-rows .zv-msg{padding:44px 16px}
  .zv-rows .msg-line{font-size:28px;margin-bottom:10px}
  .zv-rows .msg-p{font-size:15px;line-height:1.5;max-width:none}
}