/* ============================================================================
   DoorVault - homepage cinematic ("The Portfolio Fills Itself")
   A scroll-driven data story: documents, intake channels, and three PM
   portals stream real numbers into one persistent Portfolio tearsheet.
   Default CSS renders the STACKED fallback (no JS, reduced motion).
   html.cine-on switches to the pinned experience.
   ============================================================================ */

/* ---------- shared copy typography (both modes) ---------- */
.cine-panel h2 {
  font-size: clamp(1.55rem, 2.3vw, 2.1rem);
  line-height: 1.1;
  margin-top: 16px;
}
.cine-panel h2 .em { color: var(--gold); font-style: italic; }
.cine-panel p {
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.6;
  margin-top: 12px;
  max-width: 52ch;
}
.cine-panel p b { color: var(--ink); font-weight: 600; }
.cine-chip {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 16px; padding: 7px 12px;
  border: 1px solid var(--rule); border-radius: 7px;
  background: color-mix(in srgb, var(--bg-raised) 86%, transparent);
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-soft);
  font-feature-settings: "tnum";
}
.cine-chip .bi { color: var(--gold); font-size: 12px; }
.cine-chip .fig { color: var(--gold); }
.cine-chip.alert .bi, .cine-chip.alert .fig { color: var(--neg); }
.cine-cta { display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; }

/* ============================================================================
   FALLBACK MODE (default) - stacked editorial sections, no stage
   ============================================================================ */
.cinema { position: relative; background: var(--bg); }
#cineThread, #cineRails, #flierLayer, #stageNight, .stage-panel, .stage-scene,
.cine-rail, .cine-cue, .cine-act-marker, #railFill { display: none; }

.cine-hero { padding: 158px 0 84px; border-bottom: 1px solid var(--rule); }
.cine-hero .wrap { max-width: 980px; }
.cine-hero h1 {
  font-size: clamp(2.4rem, 4.4vw, 3.7rem);
  line-height: 1.06;
  margin-top: 26px;
  max-width: 21ch;
}
.cine-hero h1 .em { color: var(--gold); font-style: italic; }
.cine-hero .hero-sub { max-width: 52ch; }

.cine-panel { padding: 84px 0; border-bottom: 1px solid var(--rule); }
.cine-panel .wrap > div { max-width: 560px; }

/* ============================================================================
   CINEMA MODE - html.cine-on
   z-order: thread/rails (1) < scenes (2) < night (3) < panel (4) < hero/copy (5)
            < chrome (6) < fliers (7)
   ============================================================================ */
html.cine-on .cinema { height: 760vh; }
/* dvh tracks iOS Safari's collapsing toolbar so the stage always fills
   exactly the visible viewport (svh would leave a gap once bars collapse) */
html.cine-on .cine-stick {
  position: sticky; top: 0; height: 100vh; height: 100svh; height: 100dvh;
  overflow: hidden;
}

html.cine-on #cineThread, html.cine-on #cineRails {
  display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none;
}
#cineThreadGlow { fill: none; stroke: var(--gold); stroke-width: 5; opacity: .10; stroke-linecap: round; }
#cineThreadPath {
  fill: none; stroke: var(--gold-bright); stroke-width: 1.4; opacity: .5; stroke-linecap: round;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--gold) 60%, transparent));
}
.thread-pulse { fill: var(--gold-bright); filter: drop-shadow(0 0 5px var(--gold)); opacity: 0; }
.rail-path { fill: none; stroke: var(--rule); stroke-width: 1; opacity: 0; }
.rail-pulse {
  fill: var(--gold-bright); opacity: 0;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--gold) 70%, transparent));
}

html.cine-on #stageNight {
  display: block; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
  background: radial-gradient(110% 100% at 72% 46%, rgba(6,6,9,.42) 0%, rgba(4,4,6,.86) 78%);
}

/* ---------- HERO: editorial split - copy left, live portfolio right ------- */
html.cine-on .cine-hero {
  position: absolute; inset: 0; z-index: 5; padding: 0; border: none;
  display: flex; align-items: center;
  pointer-events: none;
}
html.cine-on .cine-hero .wrap {
  pointer-events: auto; margin: 0;
  padding-left: clamp(28px, 6vw, 110px);
  max-width: none; width: min(50vw, 760px);
}
html.cine-on .cine-hero h1 { font-size: clamp(2.1rem, 3.4vw, 3.2rem); max-width: 18ch; }
html.cine-on .cine-hero .hero-sub { font-size: 1.08rem; max-width: 44ch; }

/* ---------- THE PORTFOLIO PANEL (persistent protagonist) ---------- */
html.cine-on .stage-panel {
  display: flex; flex-direction: column;
  position: absolute; z-index: 4;
  right: clamp(24px, 5vw, 90px); top: 50%; transform: translateY(-50%);
  width: clamp(350px, 29vw, 430px);
  border: 1px solid var(--rule-strong); border-radius: 13px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-raised) 92%, #fff 3%), var(--bg-raised));
  box-shadow: 0 28px 64px -24px rgba(0,0,0,.72), 0 1px 0 0 color-mix(in srgb, #fff 6%, transparent) inset;
  overflow: hidden;
  transition: box-shadow .6s ease;
}
html.cine-on .stage-panel.morning {
  box-shadow: 0 28px 70px -22px rgba(0,0,0,.7), 0 0 44px -8px color-mix(in srgb, var(--gold) 26%, transparent),
              0 1px 0 0 color-mix(in srgb, #fff 7%, transparent) inset;
}
.sp-bar {
  display: flex; align-items: center; gap: 5px; flex-shrink: 0;
  padding: 0 12px; height: 30px;
  border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, var(--bg-sunken) 80%, transparent);
}
.sp-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--rule-strong); }
.sp-url { margin-left: 7px; font-family: var(--font-mono); font-size: 10px; color: var(--ink-faint); display: inline-flex; gap: 5px; align-items: center; }
.sp-body { padding: 14px 14px 12px; display: flex; flex-direction: column; gap: 11px; flex: 1; min-height: 0; }
.sp-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sp-title { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 17px; color: var(--ink); }
.sp-sync { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-live { width: 6px; height: 6px; border-radius: 50%; background: var(--gold-bright); flex-shrink: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 16%, transparent); animation: spPulse 1.8s ease-in-out infinite; }
@keyframes spPulse { 0%,100% { opacity: .45; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sp-live { animation: none; } }

.sp-kpis {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--rule); border: 1px solid var(--rule); border-radius: 9px; overflow: hidden;
}
.sp-kpi { background: var(--bg-raised); padding: 9px 11px; }
.sp-kpi .l { font-family: var(--font-mono); font-size: 8.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); display: block; }
.sp-kpi .v { font-family: var(--font-mono); font-feature-settings: "tnum"; font-size: 17px; font-weight: 600; color: var(--ink-faint); margin-top: 3px; display: block; transition: color .4s ease; }
.sp-kpi .v.on { color: var(--ink); }
.sp-kpi .v.gold.on { color: var(--gold); }

.sp-meta {
  display: flex; justify-content: space-between; gap: 10px;
  font-family: var(--font-mono); font-size: 10px; color: var(--ink-faint);
  font-feature-settings: "tnum";
}
.sp-meta #spCoc { opacity: .35; }
.sp-meta #spCoc.on { opacity: 1; color: var(--gold); }

/* live activity feed - newest row slides in on top */
.sp-feed {
  position: relative; height: 116px; overflow: hidden; flex-shrink: 0;
  border-top: 1px solid var(--rule); padding-top: 6px;
}
.sp-row {
  position: absolute; left: 0; right: 0; top: 6px; height: 27px;
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-soft);
  font-feature-settings: "tnum";
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transform: translateY(420%);
  transition: transform .4s cubic-bezier(.2,.7,.2,1), opacity .4s ease;
}
.sp-row .bi { color: var(--gold); font-size: 11px; flex-shrink: 0; }
.sp-row .fig { color: var(--ink); }
.sp-row.warn .bi, .sp-row.warn .fig { color: var(--neg); }

/* Night Watch catch */
.sp-watch {
  display: flex; align-items: center; gap: 9px; flex-shrink: 0; opacity: 0;
  padding: 9px 11px; border: 1px solid color-mix(in srgb, var(--neg) 45%, var(--rule));
  border-radius: 8px; background: color-mix(in srgb, var(--neg) 9%, var(--bg-sunken));
}
.sp-watch .bi { color: var(--neg); font-size: 13px; flex-shrink: 0; }
.sp-watch span { font-size: 11.5px; line-height: 1.4; color: var(--ink-soft); }
.sp-watch b { color: var(--ink); font-weight: 600; }
.sp-watch .fig { font-family: var(--font-mono); color: var(--neg); }

/* income chart, drawn as PM data lands */
.sp-chart { margin-top: auto; flex-shrink: 0; }
.sp-chart-head { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 8.5px; color: var(--ink-faint); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .05em; }
.sp-chart svg { display: block; width: 100%; height: 72px; overflow: visible; }
#spGrad .g0 { stop-color: var(--gold-bright); stop-opacity: .28; }
#spGrad .g1 { stop-color: var(--gold-bright); stop-opacity: 0; }
#spChartArea { fill: url(#spGrad); opacity: 0; }
#spChartInc { fill: none; stroke: var(--gold-bright); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 2px color-mix(in srgb, var(--gold) 45%, transparent)); }
#spChartExp { fill: none; stroke: var(--rule-strong); stroke-width: 1.3; stroke-dasharray: 3 3; opacity: 0; }

.sp-night { position: absolute; inset: 0; pointer-events: none; opacity: 0; border-radius: 13px;
  background: linear-gradient(180deg, rgba(8,8,12,.55), rgba(8,8,12,.35)); }
.sp-verified {
  position: absolute; top: 41px; right: 14px; opacity: 0;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gold); border: 1px solid color-mix(in srgb, var(--gold) 50%, transparent);
  background: var(--gold-soft); border-radius: 5px; padding: 4px 8px;
}

/* ---------- SCENES (the data sources, left of the panel) ---------- */
html.cine-on .stage-scene {
  display: block; position: absolute; z-index: 2;
  left: clamp(28px, 6vw, 110px); top: 47%; transform: translateY(-58%);
  width: min(42vw, 560px);
  opacity: 0; visibility: hidden; pointer-events: none;
}

/* generic source card */
.s-card {
  border: 1px solid var(--rule); border-radius: 10px; overflow: hidden;
  background: var(--bg-raised); box-shadow: var(--shadow);
}
.s-card-top {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 12px; border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-soft);
}
.s-card-top .bi { color: var(--gold); margin-right: 6px; }
.s-badge { font-family: var(--font-mono); font-size: 9px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--gold); background: var(--gold-soft); border-radius: 4px; padding: 2px 7px; }

/* scene 1 - documents drop in */
#scene1 .s-docs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.s-doc {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 13px; border: 1px solid var(--rule); border-radius: 9px;
  background: var(--bg-raised); box-shadow: var(--shadow);
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.s-doc .bi { color: var(--gold); flex-shrink: 0; }
.s-doc small { display: block; font-size: 9px; color: var(--ink-faint); margin-top: 2px; }

/* scene 2 - closing disclosure being read */
#scene2 .drows { padding: 2px 0; }
#scene2 .drow {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 12px; border-bottom: 1px solid var(--rule);
  transition: background .3s ease;
}
#scene2 .drow:last-child { border-bottom: none; }
#scene2 .drow .dk { font-size: 12px; color: var(--ink-soft); }
#scene2 .drow .dv { font-family: var(--font-mono); font-feature-settings: "tnum"; font-size: 12px; color: var(--ink); }
#scene2 .drow.hot { background: var(--gold-soft); box-shadow: none; }
#scene2 .drow.read .dv::after { content: " ✓"; color: var(--pos); }

/* scene 3 - always-on channels */
#scene3 .s-chans { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.s-chan {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 13px; border: 1px solid var(--rule); border-radius: 9px;
  background: var(--bg-raised); box-shadow: var(--shadow);
}
.s-chan .bi { color: var(--gold); font-size: 14px; margin-top: 1px; }
.s-chan b { display: block; font-size: 12.5px; color: var(--ink); }
.s-chan span { font-size: 10.5px; color: var(--ink-faint); font-family: var(--font-mono); }

/* scene 4 - three PM portals streaming */
#scene4 .s-portals { display: flex; flex-direction: column; gap: 10px; }
.s-portal {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border: 1px solid var(--rule); border-radius: 10px;
  background: var(--bg-raised); box-shadow: var(--shadow);
}
.s-portal .s-logo {
  width: 30px; height: 30px; border-radius: 7px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 600; font-size: 13px;
  background: var(--gold-soft); color: var(--gold);
}
.s-portal .s-pname { font-size: 13px; font-weight: 600; color: var(--ink); }
.s-portal .s-pmeta { font-family: var(--font-mono); font-size: 10px; color: var(--ink-faint); margin-top: 1px; }
.s-portal .s-pcount { margin-left: auto; text-align: right; font-family: var(--font-mono); font-feature-settings: "tnum"; }
.s-portal .s-pcount b { display: block; font-size: 16px; font-weight: 600; color: var(--gold); }
.s-portal .s-pcount span { font-size: 8.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); }

/* scene 5 - reconciliation: statement ⇄ bank (stays lit through the night) */
html.cine-on #scene5 { z-index: 4; }
#scene5 .m-rows { padding: 2px 0; }
#scene5 .m-row {
  display: grid; grid-template-columns: 1fr auto 1fr auto;
  align-items: center; gap: 10px;
  padding: 8px 12px; border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono); font-feature-settings: "tnum"; font-size: 11.5px;
  color: var(--ink-faint); opacity: .35; transition: opacity .35s ease, color .35s ease;
}
#scene5 .m-row:last-child { border-bottom: none; }
#scene5 .m-row.on { opacity: 1; color: var(--ink-soft); }
#scene5 .m-row .m-arrow { color: var(--ink-faint); }
#scene5 .m-row .m-ok { color: transparent; transition: color .3s ease .1s; }
#scene5 .m-row.on .m-ok { color: var(--pos); }
#scene5 .m-row.gap .m-ok { font-size: 10px; }
#scene5 .m-row.gap.on .m-ok { color: var(--neg); }
#scene5 .m-row.gap.on { color: var(--ink); }
#scene5 .m-row.gap.on .m-bank { color: var(--neg); }

/* ---------- fliers: values traveling into the portfolio ---------- */
html.cine-on #flierLayer { display: block; position: absolute; inset: 0; z-index: 7; pointer-events: none; }
.fly {
  position: absolute; left: 0; top: 0; opacity: 0; will-change: transform;
  font-family: var(--font-mono); font-feature-settings: "tnum"; font-size: 11px;
  color: var(--ink); background: color-mix(in srgb, var(--bg-raised) 92%, transparent);
  border: 1px solid var(--rule-strong); border-radius: 6px; padding: 4px 9px;
  box-shadow: 0 8px 22px -8px rgba(0,0,0,.7);
  white-space: nowrap;
}
.fly.gold { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
.fly.warn { color: var(--neg); border-color: color-mix(in srgb, var(--neg) 45%, transparent); }

/* ---------- copy panels: lower-third ---------- */
html.cine-on .cine-panel {
  position: absolute; z-index: 5;
  left: clamp(28px, 6vw, 110px); bottom: 6.5%;
  width: min(46vw, 560px); padding: 0; border: none;
  transform: translateY(var(--ty, 16px));
  opacity: 0; visibility: hidden; pointer-events: none;
}
html.cine-on .cine-panel .wrap { padding: 0; }
html.cine-on .cine-panel.live { pointer-events: auto; visibility: visible; }
html.cine-on .cine-panel::before {
  content: ""; position: absolute; inset: -36px -50px; z-index: -1;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--bg) 85%, transparent), transparent 80%);
  filter: blur(6px);
}

/* ---------- chrome ---------- */
html.cine-on .cine-act-marker {
  display: block; position: absolute; z-index: 6;
  top: 90px; left: clamp(28px, 6vw, 110px);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-faint);
  opacity: 0; transition: opacity .4s ease;
}
html.cine-on .cine-act-marker b { color: var(--gold); font-weight: 500; }
html.cine-on .cine-act-marker.show { opacity: 1; }

html.cine-on .cine-cue {
  display: flex; align-items: center; gap: 12px;
  position: absolute; z-index: 6; bottom: 70px; left: clamp(28px, 6vw, 110px);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--ink-faint);
  transition: opacity .22s ease;
}
.cine-cue .cue-line { width: 56px; height: 1px; overflow: hidden; position: relative; background: color-mix(in srgb, var(--ink) 14%, transparent); }
.cine-cue .cue-line::after {
  content: ""; position: absolute; top: 0; left: -50%; width: 50%; height: 1px;
  background: var(--gold-bright);
  animation: cueSlide 1.9s cubic-bezier(.55,.06,.35,.95) infinite;
}
@keyframes cueSlide { to { left: 110%; } }
@media (prefers-reduced-motion: reduce) { .cine-cue .cue-line::after { animation: none; } }

/* progress rail - horizontal, bottom center */
html.cine-on .cine-rail {
  display: flex; align-items: center;
  position: absolute; z-index: 6; bottom: 24px; left: 50%; transform: translateX(-50%);
}
.cine-rail .rail-stop {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 26px; height: 30px; cursor: pointer; background: none; border: none; padding: 0;
}
.cine-rail .rail-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 22%, transparent);
  transition: background .3s ease, box-shadow .3s ease;
}
.cine-rail .rail-stop.passed .rail-dot { background: color-mix(in srgb, var(--gold) 55%, transparent); }
.cine-rail .rail-stop.on .rail-dot {
  background: var(--gold-bright);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 18%, transparent), 0 0 12px color-mix(in srgb, var(--gold) 60%, transparent);
}
.cine-rail .rail-label {
  position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(4px);
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint); white-space: nowrap; opacity: 0;
  transition: opacity .3s ease, transform .3s ease;
}
.cine-rail .rail-stop:hover .rail-label { opacity: 1; transform: translateX(-50%); }
.cine-rail .rail-stop.on .rail-label { opacity: 1; transform: translateX(-50%); color: var(--gold); }
.cine-rail .rail-line { width: 22px; height: 1px; background: color-mix(in srgb, var(--ink) 14%, transparent); }

/* ============================================================================
   RESPONSIVE - narrow: panel top, scenes mid, copy bottom sheet
   ============================================================================ */
@media (max-width: 880px) {
  /* hero: copy only - the panel enters with the story */
  html.cine-on .cine-hero { align-items: flex-start; padding-top: 104px; }
  html.cine-on .cine-hero .wrap { width: 100%; padding: 0 22px; }
  html.cine-on .cine-hero h1 { font-size: clamp(1.85rem, 7vw, 2.4rem); }
  html.cine-on .cine-hero .hero-sub { font-size: .98rem; }

  /* a much smaller portfolio card: every row tightened, the night alert
     overlays the feed instead of reserving its own height */
  html.cine-on .stage-panel {
    top: 64px; right: auto; left: 50%; transform: translateX(-50%);
    width: min(390px, 90vw); opacity: 0;
  }
  .sp-bar { height: 24px; }
  .sp-url { font-size: 8.5px; }
  .sp-body { padding: 8px 10px 8px; gap: 7px; }
  .sp-title { font-size: 14px; }
  .sp-sync { font-size: 8.5px; }
  .sp-kpi { padding: 6px 9px; }
  .sp-kpi .l { font-size: 7.5px; }
  .sp-kpi .v { font-size: 13px; margin-top: 2px; }
  .sp-feed { height: 56px; padding-top: 4px; border-top: none; }
  .sp-row { height: 26px; top: 4px; font-size: 9.5px; }
  .sp-chart, .sp-meta { display: none; }
  .sp-watch {
    position: absolute; left: 10px; right: 10px;
    bottom: 8px; padding: 6px 9px;
    background: color-mix(in srgb, var(--neg) 11%, var(--bg-raised));
  }
  .sp-watch span { font-size: 9.5px; }
  .sp-verified { top: 28px; right: 10px; font-size: 8px; padding: 3px 6px; }

  /* scenes are anchored below the measured panel and SCALED to the free
     band above the copy sheet by JS, so no device height can overlap */
  html.cine-on .stage-scene {
    top: auto; bottom: 24%; left: 50%; transform: translateX(-50%);
    transform-origin: top center;
    width: min(440px, 90vw);
  }
  #scene1 .s-docs, #scene3 .s-chans { grid-template-columns: 1fr 1fr; gap: 8px; }
  .s-doc, .s-chan { padding: 9px 11px; font-size: 10px; }
  .s-chan b { font-size: 11.5px; }
  .s-chan span { font-size: 9.5px; }
  #scene4 .s-portals { gap: 6px; }
  .s-portal { padding: 7px 11px; }
  .s-portal .s-logo { width: 22px; height: 22px; font-size: 10px; }
  .s-portal .s-pname { font-size: 12px; }
  .s-portal .s-pmeta { display: none; }
  .s-portal .s-pcount b { font-size: 13px; }
  .s-portal .s-pcount span { font-size: 7.5px; }
  #scene2 .drow { padding: 5px 11px; }
  #scene2 .drow .dk, #scene2 .drow .dv { font-size: 11px; }
  #scene2 .drow.m-hide, #scene5 .m-row.m-hide { display: none; }

  html.cine-on .cine-panel {
    left: 50%; bottom: max(16px, env(safe-area-inset-bottom));
    transform: translateX(-50%) translateY(var(--ty, 12px));
    width: min(560px, calc(100vw - 36px));
  }
  html.cine-on .cine-panel::before { inset: -20px -24px; background: radial-gradient(closest-side, color-mix(in srgb, var(--bg) 90%, transparent), transparent 88%); }
  html.cine-on .cine-panel h2 { font-size: clamp(1.1rem, 4.8vw, 1.4rem); margin-top: 8px; }
  html.cine-on .cine-panel p { font-size: 12px; margin-top: 7px; }
  .cine-chip { font-size: 9px; margin-top: 8px; padding: 4px 8px; }
  .cine-cta { margin-top: 12px; }
  .cine-cta .btn { padding: 11px 18px; font-size: 13px; }

  html.cine-on .cine-act-marker { display: none; }
  /* phones: the scroll cue would overlap the hero proof line, and the dot rail
     collides with the copy sheet. Hide both and use the thin bottom progress
     line as the sole scroll affordance. */
  html.cine-on .cine-cue { display: none; }
  html.cine-on .cine-rail { display: none; }
  html.cine-on #railFill {
    display: block; position: absolute; z-index: 6;
    left: 0; bottom: 0; height: 2px; width: 0;
    background: var(--gold-bright);
    box-shadow: 0 0 8px color-mix(in srgb, var(--gold) 55%, transparent);
  }
  .fly { font-size: 9.5px; padding: 3px 7px; }
}

/* short desktop windows: hide the chart so the panel never clips */
@media (min-width: 881px) and (max-height: 740px) {
  .sp-chart { display: none; }
  .sp-feed { height: 89px; }
}