/* The product's own address, the page everybody sees at / (card
   our-website-tells-a-stranger-what-maestro-is-and-how-to-start). Loaded
   after app.css and site.css. The film (the bar, the first screen, the
   release, the metrics, the check, the last call) stands on the brand's dark
   ground in both themes; the three acts of the promise each wear one voice
   of the mark (people decide in strategy green, agents execute in
   engineering blue, Maestro governs in management orange) while every
   callout on a screen keeps the one blue; the reading parts (the proof, the orchestra, the
   plans, the foot) follow the reader's theme. Two typefaces: the brand's sans
   and a mono for index numbers, credits and callouts. Every movement stops
   for a reader who asked for less motion, and the pause control stops it for
   anyone. */

/* ── Grounds and tokens ──────────────────────────────────────────────────── */
html {
  --s-page: #0e1b26;
  --sc-ground: #0e1b26;
  --sc-ground-2: #13222f;
  --sc-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --sc-blue: #42b0e4;
  --sc-green: #b6d42b;
  --sc-orange: #f0901f;
  --sc-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --sc-paper: var(--surface);
  scroll-padding-top: 72px;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) { --sc-paper: var(--sc-ground); }
}
html[data-theme="dark"] { --sc-paper: var(--sc-ground); }

/* The dark ground's own ink, whatever the theme. */
.site-score .sc-dark {
  --ink: #f3f6f9;
  --ink-soft: #c9d2da;
  --muted: #a3afba;
  --line: rgba(243, 246, 249, 0.12);
  --field-line: rgba(243, 246, 249, 0.34);
  --surface-2: rgba(243, 246, 249, 0.08);
  --accent: #42b0e4;
  --on-accent: #0e1b26;
  color: var(--ink);
  background-color: var(--sc-ground);
}
.site-score .sc-paper { background-color: var(--sc-paper); color: var(--ink); }
.site-score { background: var(--sc-ground); }

/* ── Shared type ─────────────────────────────────────────────────────────── */
.sc-index {
  margin: 0 0 1.25rem; font-family: var(--sc-mono); font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.sc-h2 {
  margin: 0; font-size: clamp(1.8rem, 1.1rem + 2.3vw, 3.2rem); font-weight: 500;
  letter-spacing: -0.028em; line-height: 1.08; text-wrap: balance; max-width: 22ch;
}
.sc-h3 { margin: 0 0 0.9rem; font-size: clamp(1.3rem, 1.05rem + 0.8vw, 1.85rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.18; text-wrap: balance; }
.sc-body { margin: 0; color: var(--ink-soft); font-size: 1.04rem; line-height: 1.65; max-width: 34rem; text-wrap: pretty; }
.sc-letter {
  display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; flex: none; border-radius: 50%;
  border: 1px solid currentColor; font-family: var(--sc-mono); font-size: 0.72rem; font-weight: 600; line-height: 1;
}

/* ── The bar, over the film ──────────────────────────────────────────────── */
.site-score .site-bar.sc-bar {
  position: fixed; left: 0; right: 0; top: 0;
  background: rgba(14, 27, 38, 0.62); border-bottom: 1px solid transparent;
  -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15);
  transition: background-color 300ms ease-out, border-color 300ms ease-out;
}
.site-score.is-scrolled .site-bar.sc-bar { background: rgba(14, 27, 38, 0.92); border-bottom-color: rgba(243, 246, 249, 0.08); }
.site-score .sc-bar .site-btn.is-primary { box-shadow: none; }

/* ── The first screen: the Conductor's stage over the metrics in flight ──── */
.sc-hero { position: relative; isolation: isolate; overflow: clip; min-height: max(100svh, 42rem); display: grid; align-items: center; }
.sc-film { position: absolute; inset: 0; z-index: -2; perspective: 1500px; perspective-origin: 50% 20%; pointer-events: none; }
/* The metrics page lies on a plane below the voices, tilted away like a stage floor seen from the stalls. */
.sc-camera {
  position: absolute; left: 50%; top: 61%; width: min(1500px, 118vw); aspect-ratio: 1280 / 800;
  transform-style: preserve-3d;
  transform: translate(-50%, -50%) rotateX(56deg) rotateZ(-16deg) scale(1);
}
.sc-plane {
  position: absolute; inset: 0; border-radius: 18px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(243, 246, 249, 0.07), 0 60px 120px -40px rgba(0, 0, 0, 0.8);
  /* Every edge fades into the page, the far one tilted towards the mark most of all: no edge of the recording ever cuts across the stage. */
  --sc-plane-far: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.3) 16%, #000 38%);
  --sc-plane-sides: linear-gradient(90deg, transparent 0%, #000 14%, #000 80%, transparent 100%);
  --sc-plane-pool: radial-gradient(75% 85% at 50% 58%, #000 40%, rgba(0, 0, 0, 0.6) 66%, transparent 92%);
  -webkit-mask-image: var(--sc-plane-far), var(--sc-plane-sides), var(--sc-plane-pool);
  -webkit-mask-composite: source-in, source-in;
  mask-image: var(--sc-plane-far), var(--sc-plane-sides), var(--sc-plane-pool);
  mask-composite: intersect;
}
.sc-plane-video { display: block; width: 100%; height: 100%; object-fit: cover; filter: blur(1.1px) saturate(1.05) brightness(0.64) contrast(1.06); }
/* The voices' light lying on the far edge of the plane, nearest the mark. */
.sc-plane-light {
  position: absolute; inset: 0; mix-blend-mode: screen;
  background:
    radial-gradient(34% 30% at 40% 0%, rgba(66, 176, 228, 0.34), transparent 72%),
    radial-gradient(22% 26% at 48% 0%, rgba(182, 212, 43, 0.26), transparent 72%),
    radial-gradient(22% 26% at 54% 0%, rgba(240, 144, 31, 0.24), transparent 72%),
    radial-gradient(34% 30% at 62% 0%, rgba(66, 176, 228, 0.3), transparent 72%);
}
/* The light from the voices, washing down from where they stand over the stage and the film. */
.sc-wash {
  --x: var(--sc-base-x, 50%); --y: var(--sc-base-y, 34%); --m: var(--sc-mark, 160px);
  position: absolute; inset: 0; mix-blend-mode: screen;
  background:
    radial-gradient(calc(var(--m) * 2.4) calc(var(--m) * 3.2) at calc(var(--x) - var(--m) * 0.33) calc(var(--y) + var(--m) * 0.6), rgba(66, 176, 228, 0.2), transparent 70%),
    radial-gradient(calc(var(--m) * 1.4) calc(var(--m) * 2.6) at calc(var(--x) - var(--m) * 0.11) calc(var(--y) + var(--m) * 0.5), rgba(182, 212, 43, 0.15), transparent 70%),
    radial-gradient(calc(var(--m) * 1.4) calc(var(--m) * 2.6) at calc(var(--x) + var(--m) * 0.11) calc(var(--y) + var(--m) * 0.5), rgba(240, 144, 31, 0.14), transparent 70%),
    radial-gradient(calc(var(--m) * 2.4) calc(var(--m) * 3.2) at calc(var(--x) + var(--m) * 0.33) calc(var(--y) + var(--m) * 0.6), rgba(66, 176, 228, 0.2), transparent 70%);
}
/* Depth: the edges of the stage fall away, and the words keep a calm ground. */
.sc-veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 50% 38%, transparent 52%, rgba(5, 12, 18, 0.62) 100%),
    radial-gradient(46% 30% at 50% 56%, rgba(14, 27, 38, 0.55), transparent 100%),
    linear-gradient(180deg, rgba(14, 27, 38, 0.96) 0%, rgba(14, 27, 38, 0.55) 22%, rgba(14, 27, 38, 0.12) 52%, rgba(14, 27, 38, 0.3) 82%, rgba(14, 27, 38, 0.9) 100%);
}
/* A fine grain sits on the light like film. */
.sc-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.045; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' 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 0.9 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* The baton's light and the voices, drawn over the whole first screen (site-score-baton.js). */
.sc-baton { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; display: block; }

.sc-hero-in { position: relative; display: grid; justify-items: center; text-align: center; padding-block: calc(64px + clamp(1.5rem, 6vh, 4.5rem)) clamp(5rem, 11vh, 7.5rem); width: 100%; }
.sc-mark-slot { width: clamp(116px, 17vh, 196px); height: clamp(116px, 17vh, 196px); margin-bottom: clamp(1.5rem, 4.2vh, 2.8rem); }
.sc-mark-still { width: 100%; height: 100%; display: block; }
.sc-eyebrow { margin: 0 0 clamp(0.9rem, 2.2vh, 1.4rem); font-family: var(--sc-mono); font-size: clamp(0.72rem, 0.68rem + 0.2vw, 0.84rem); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); text-shadow: 0 1px 14px rgba(14, 27, 38, 0.9); }
.sc-hero.has-baton .sc-mark-still { visibility: hidden; }
/* The words stand on a little shade of the ground, so the light behind never thins them. */
.sc-h1 { position: relative; margin: 0; font-weight: 600; font-size: clamp(2.15rem, 1rem + 3.3vw, 4.3rem); line-height: 1.04; letter-spacing: -0.035em; max-width: 18ch; text-wrap: balance; }
.sc-h1::before { content: ""; position: absolute; inset: -30% -18% -60%; z-index: -1; background: radial-gradient(closest-side, rgba(14, 27, 38, 0.82), rgba(14, 27, 38, 0)); pointer-events: none; }
.sc-line { display: inline; }
@media (min-width: 720px) { .sc-line { display: block; } }
.sc-lead { margin: clamp(1.1rem, 2.6vh, 1.6rem) 0 0; max-width: 40rem; font-size: clamp(1.05rem, 0.98rem + 0.32vw, 1.25rem); line-height: 1.55; color: var(--ink-soft); text-wrap: balance; text-shadow: 0 1px 18px rgba(14, 27, 38, 0.9); }
.sc-hero-actions { margin-top: clamp(1.6rem, 4vh, 2.4rem); }
.sc-hero-actions .site-btn { min-width: 9.5rem; }
.sc-hero .site-btn.is-primary { box-shadow: none; }
.sc-hero-foot { position: absolute; left: 0; right: 0; bottom: clamp(14px, 2.4vh, 24px); display: flex; align-items: flex-end; justify-content: flex-end; gap: 1rem; }
.sc-pause {
  flex: none; display: inline-flex; align-items: center; gap: 0.55rem; min-height: 36px; padding: 0 0.9rem 0 0.75rem;
  border: 1px solid var(--field-line); border-radius: 999px; background: rgba(14, 27, 38, 0.72); color: var(--ink);
  font-family: var(--sc-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
  transition: border-color 160ms ease-out, background-color 160ms ease-out;
}
.sc-pause:hover { border-color: var(--ink-soft); background: rgba(243, 246, 249, 0.06); }
.sc-pause-icon { width: 10px; height: 11px; display: inline-block; border-left: 3px solid currentColor; border-right: 3px solid currentColor; box-sizing: border-box; }
.sc-pause-icon.is-play { border: 0; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 10px solid currentColor; }

/* ── A screen in its frame, with its lettered callouts ───────────────────── */
.sc-shot, .sc-chart { margin: 0; }
.sc-shot-media {
  position: relative; width: 100%; border-radius: 12px; overflow: hidden; background: #10161d;
  box-shadow: 0 0 0 1px rgba(243, 246, 249, 0.1), 0 40px 80px -30px rgba(0, 0, 0, 0.75);
}
.sc-shot-video, .sc-shot-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-spot {
  position: absolute; z-index: 1; width: 2rem; height: 2rem; margin: -1rem 0 0 -1rem; display: grid; place-items: center; border-radius: 50%;
  background: var(--sc-blue); color: var(--sc-ground); font-family: var(--sc-mono); font-size: 0.8rem; font-weight: 700;
  box-shadow: 0 0 0 4px rgba(14, 27, 38, 0.55);
}
.sc-spot-ring { position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--sc-blue); opacity: 0; }
.sc-notes { display: grid; gap: 0.55rem; margin-top: 1rem; }
.sc-shot-note { margin: 0; display: flex; align-items: center; gap: 0.7rem; font-family: var(--sc-mono); font-size: 0.78rem; line-height: 1.45; letter-spacing: 0.02em; color: var(--ink-soft); }
.sc-shot-note .sc-letter { color: var(--sc-blue); }

/* ── The three acts: each headed by its beat of the promise, in its own voice ── */
.sc-act { position: relative; padding-top: clamp(5rem, 11vw, 9rem); border-top: 1px solid rgba(243, 246, 249, 0.06); }
.sc-act.is-decide { --act: var(--sc-green); }
.sc-act.is-execute { --act: var(--sc-blue); }
.sc-act.is-governs { --act: var(--sc-orange); }
.sc-act-index { display: flex; align-items: center; gap: 0.7rem; }
.sc-act-voice { width: 0.5rem; height: 1.15rem; border-radius: 999px; background: var(--act); flex: none; }
.sc-act-title { font-size: clamp(2.3rem, 1.2rem + 3.6vw, 4.4rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.02; }

/* ── The first two acts: their screens, pinned while the steps are read ──── */
.sc-score { position: relative; }
.sc-score-head { display: grid; gap: 1.1rem; padding-bottom: clamp(2rem, 5vw, 4rem); }
.sc-score-head .sc-index { margin: 0; }
.sc-track { display: grid; grid-template-columns: minmax(0, 3.3fr) minmax(0, 7.7fr); gap: 0 clamp(2rem, 4vw, 4.5rem); }
.sc-steps { list-style: none; margin: 0; padding: 0 0 18vh; }
.sc-step { min-height: 78vh; display: flex; flex-direction: column; justify-content: center; padding-left: 1.6rem; border-left: 1px solid var(--line); opacity: 0.42; transition: opacity 400ms ease-out; }
.sc-step.is-on { opacity: 1; border-left-color: var(--act, var(--sc-blue)); }
.sc-step-index { margin: 0 0 1.4rem; font-family: var(--sc-mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.sc-step.is-on .sc-step-index { color: var(--act, var(--sc-blue)); }
.sc-step-slot:empty { display: none; }
.sc-screen { position: sticky; top: 64px; height: calc(100vh - 64px); display: flex; flex-direction: column; justify-content: center; gap: 1rem; }
.sc-screen-stack { position: relative; height: min(72vh, 44rem); }
.sc-screen-index { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.4rem; flex-wrap: wrap; font-family: var(--sc-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.sc-screen-index li { padding-bottom: 0.45rem; border-bottom: 1px solid transparent; transition: color 300ms ease-out, border-color 300ms ease-out; }
.sc-screen-index li.is-on { color: var(--ink); border-bottom-color: var(--act, var(--sc-blue)); }
.sc-screen .sc-shot { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 500ms ease-out, visibility 0s linear 500ms; }
.sc-screen .sc-shot.is-on { opacity: 1; visibility: visible; transition: opacity 500ms ease-out, visibility 0s; }
.sc-screen .sc-shot-media { width: min(100%, calc((min(72vh, 44rem) - 3.4rem) * var(--ratio))); }

/* ── The third act: verified, once, then the metrics, one idea each ──────── */
.sc-governs { padding-bottom: clamp(5rem, 10vw, 8rem); }
.sc-metrics { padding-top: clamp(5rem, 10vw, 8rem); }
.sc-metrics-lead { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 2.5rem clamp(2.5rem, 6vw, 6rem); align-items: center; margin-bottom: clamp(4rem, 8vw, 6.5rem); }
.sc-metrics-text { display: grid; gap: 1.2rem; }
.sc-metrics-text .sc-index { margin: 0; }
.sc-chart.is-forecast { max-width: 30rem; justify-self: end; width: 100%; }
.sc-chart.is-cfd { margin-bottom: clamp(3.5rem, 7vw, 5.5rem); }

.sc-verified { padding-top: clamp(1.5rem, 4vw, 3rem); }
.sc-verified-in { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
.sc-verified-text { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 1.2rem clamp(2.5rem, 6vw, 6rem); align-items: end; }
.sc-verified-text .sc-index { grid-column: 1 / -1; }
.sc-verified-text .sc-index { margin: 0; }
.sc-chart.is-verify { max-width: 1142px; }

/* ── The proof ───────────────────────────────────────────────────────────── */
.sc-proof { padding-block: clamp(5rem, 11vw, 9rem); }
.sc-proof-row { display: flex; align-items: flex-end; gap: clamp(1.5rem, 4vw, 4rem); margin: clamp(2.5rem, 6vw, 4.5rem) 0 2rem; flex-wrap: wrap; }
.sc-figure { display: grid; gap: 0.5rem; }
.sc-figure-value { font-size: clamp(4.5rem, 2rem + 9vw, 10rem); line-height: 0.85; font-weight: 300; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; color: var(--muted); }
.sc-figure.is-delivered .sc-figure-value { color: var(--ink); font-weight: 400; }
.sc-figure-label { font-family: var(--sc-mono); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.sc-proof-arrow { width: clamp(3rem, 8vw, 7rem); height: 1px; background: var(--field-line); margin-bottom: 3.4rem; position: relative; }
.sc-proof-arrow::after { content: ""; position: absolute; right: 0; top: -4px; width: 8px; height: 8px; border-top: 1px solid var(--field-line); border-right: 1px solid var(--field-line); transform: rotate(45deg); }
.sc-release { display: block; width: 100%; height: clamp(3rem, 6vw, 4.5rem); margin: 0 0 2.4rem; overflow: visible; }
.sc-mark { fill: var(--lp-engineering); }
.sc-mark.is-committed { fill: var(--lp-strategy); }
.sc-proof-body { max-width: 40rem; }

/* ── The orchestra, once ─────────────────────────────────────────────────── */
.sc-orchestra { padding-block: clamp(4rem, 9vw, 7.5rem); border-top: 1px solid var(--line); }
.sc-quote { margin: 0; }
.sc-quote p { margin: 0; font-size: clamp(1.45rem, 1rem + 1.7vw, 2.45rem); line-height: 1.32; font-weight: 400; letter-spacing: -0.018em; max-width: 34ch; text-wrap: pretty; }

/* ── The plans ───────────────────────────────────────────────────────────── */
.sc-plans { border-top: 1px solid var(--line); }
.sc-plans .site-h2 { font-weight: 500; }

/* ── The last call ───────────────────────────────────────────────────────── */
.sc-end { position: relative; overflow: clip; padding-block: clamp(6rem, 13vw, 10rem); text-align: center; isolation: isolate; }
.sc-end::before {
  content: ""; position: absolute; left: 50%; top: 0; width: min(60rem, 120vw); height: 70%; transform: translateX(-50%); z-index: -1;
  background:
    radial-gradient(22% 46% at 41% 18%, rgba(66, 176, 228, 0.2), transparent 70%),
    radial-gradient(14% 40% at 48% 22%, rgba(182, 212, 43, 0.16), transparent 70%),
    radial-gradient(14% 40% at 52% 22%, rgba(240, 144, 31, 0.15), transparent 70%),
    radial-gradient(22% 46% at 59% 18%, rgba(66, 176, 228, 0.2), transparent 70%);
}
.sc-end-in { display: grid; justify-items: center; gap: 1.2rem; }
.sc-end-mark { width: 72px; height: 72px; margin-bottom: 0.8rem; filter: drop-shadow(0 0 22px rgba(66, 176, 228, 0.35)); }
.sc-end-title { max-width: 24ch; margin-inline: auto; }
.sc-end .site-actions { margin-top: 1rem; }

/* ── The foot ────────────────────────────────────────────────────────────── */
.sc-foot { border-top: 1px solid var(--line); }
.sc-foot-in { display: flex; justify-content: space-between; align-items: center; gap: 1rem 2rem; flex-wrap: wrap; }
.sc-foot p { margin: 0; }
.sc-foot-links { display: flex; gap: 1.4rem; }
.sc-foot-links a { color: var(--ink); text-decoration: none; font-weight: 600; }
.sc-foot-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.sc-foot-legal { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; font-size: 0.88rem; }
.sc-foot-legal a { color: var(--ink-soft, inherit); text-underline-offset: 3px; }

/* ── Motion, only for a reader who has not asked for less ────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .sc-camera { animation: sc-drift 34s ease-in-out infinite alternate; }
  /* While the baton beats, the stage waits in the dark; the downbeat brings the film and the voices' light up. */
  .sc-hero.has-baton:not(.is-landed) .sc-plane { opacity: 0.2; }
  .sc-hero.has-baton:not(.is-landed) .sc-wash, .sc-hero.has-baton:not(.is-landed) .sc-plane-light { opacity: 0; }
  .sc-hero.has-baton.is-landed .sc-plane { transition: opacity 1800ms ease-out; }
  .sc-hero.has-baton.is-landed .sc-wash, .sc-hero.has-baton.is-landed .sc-plane-light { transition: opacity 1600ms ease-out 120ms; }
  /* The words wait for the downbeat, then rise into place. */
  .sc-hero.is-waiting .sc-rise { opacity: 0; transform: translateY(14px); }
  .sc-hero.is-lit .sc-rise { opacity: 1; transform: none; transition: opacity 900ms var(--sc-ease), transform 1100ms var(--sc-ease); }
  .sc-hero.is-lit .sc-lead { transition-delay: 140ms; }
  .sc-hero.is-lit .sc-hero-actions { transition-delay: 260ms; }
  .sc-hero.is-lit .sc-hero-foot { transition-delay: 600ms; }
  .sc-shot.is-on .sc-spot-ring, .sc-chart.is-seen .sc-spot-ring { animation: sc-ping 2.4s ease-out infinite; }
  .sc-chart .sc-shot-media { opacity: 0.001; transform: perspective(1400px) rotateX(6deg) translateY(24px); transform-origin: 50% 100%; transition: opacity 900ms var(--sc-ease), transform 1200ms var(--sc-ease); }
  .sc-chart.is-seen .sc-shot-media { opacity: 1; transform: none; }
  .sc-release .sc-mark { transform-box: fill-box; transform-origin: bottom; transform: scaleY(0); }
  .sc-release.is-seen .sc-mark { animation: sc-note 700ms var(--sc-ease) both; animation-delay: calc(var(--i) * 14ms); }
  .site-score.is-paused *, .site-score.is-paused *::before, .site-score.is-paused *::after { animation-play-state: paused !important; }
  /* A pause finishes what was arriving, never freezes it half-way. */
  .site-score.is-paused .sc-chart .sc-shot-media { opacity: 1; transform: none; transition: none; }
  .site-score.is-paused .sc-release .sc-mark { animation: none; transform: none; }
  .site-score.is-paused .sc-hero .sc-rise { opacity: 1; transform: none; transition: none; }
  .site-score.is-paused .sc-hero .sc-plane, .site-score.is-paused .sc-hero .sc-wash, .site-score.is-paused .sc-hero .sc-plane-light { opacity: 1; transition: none; }
}
@keyframes sc-drift {
  from { transform: translate(-50%, -50%) rotateX(56deg) rotateZ(-16deg) scale(1); }
  to { transform: translate(-52%, -48%) rotateX(52deg) rotateZ(-11deg) scale(1.06); }
}
@keyframes sc-ping { 0% { opacity: 0.9; transform: scale(0.8); } 70%, 100% { opacity: 0; transform: scale(1.7); } }
@keyframes sc-note { to { transform: scaleY(1); } }

/* ── A phone, or a narrow window: no pinning, each screen under its step ─── */
@media (max-width: 959px) {
  .sc-metrics-lead, .sc-verified-text { grid-template-columns: minmax(0, 1fr); }
  .sc-chart.is-forecast { justify-self: start; }
}
@media (max-width: 899px) {
  .sc-track { grid-template-columns: minmax(0, 1fr); }
  .sc-screen { display: none; }
  .sc-steps { padding-bottom: 4rem; }
  .sc-step { min-height: 0; opacity: 1; padding: 2.6rem 0 0; border-left: 0; border-top: 1px solid var(--line); margin-top: 2.6rem; }
  .sc-step-slot { margin-top: 1.6rem; }
  .sc-proof-arrow { display: none; }
  .sc-foot-in { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 719px) {
  .sc-hero { min-height: max(100svh, 38rem); }
  .sc-camera { top: 70%; width: 210vw; }
  .sc-hero-in { padding-block: calc(64px + 2.2rem) 6rem; }
  .sc-hero-foot { align-items: center; }
  .sc-spot { width: 1.6rem; height: 1.6rem; margin: -0.8rem 0 0 -0.8rem; font-size: 0.7rem; }
  .sc-shot-media { border-radius: 10px; }
}
@media (max-width: 520px) {
  .site-score .site-bar-link { display: none; }
}