/* Screen Manager Studio player. Soft neutrals + one deep accent. No filters, no backdrop-filter,
   opacity fades only. Sizes come from --u (1% of the shorter side) so 60 px body text at 1080 holds
   in both orientations. */
:root {
  --bg: #ECE9E3; --surface: #F7F5F1; --ink: #2B2B2B; --soft: #6B6864; --accent: #1E3A5F; --champ: #C5BB96; --line: #DCD7CE;
  --u: 10.8px; --W: 1920px; --H: 1080px;
  --fade: 650ms;
}
html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: var(--bg); }
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--ink); -webkit-font-smoothing: antialiased; cursor: none; }
#root { position: fixed; inset: 0; background: var(--bg); }
#stage { position: absolute; overflow: hidden; background: var(--bg); }
#bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.layer, #overlay, #holding, #dark { position: absolute; inset: 0; opacity: 0; transition: opacity var(--fade) ease; pointer-events: none; }
.layer.in, #overlay.in, #holding.in, #dark.in { opacity: 1; }
#holding { display: flex; align-items: center; justify-content: center; background: var(--bg); }
#holding img { width: calc(var(--u) * 62); height: auto; }
#dark { background: #000; }
#debug { position: fixed; left: 0; bottom: 0; padding: 4px 8px; font: 14px/1.2 monospace; color: #fff; background: rgba(0,0,0,.6); display: none; z-index: 9; }
#debug.in { display: block; }

/* ---------- SafeFrame ---------- */
.card { position: absolute; inset: 0; background: var(--bg); }
.safe { position: absolute; left: 5%; top: 5%; right: 5%; bottom: 5%; display: flex; flex-direction: column; }
.fine { font-size: calc(var(--u) * 3.2); line-height: 1.3; color: var(--soft); font-weight: 500; }
.chip { display: inline-block; align-self: flex-start; padding: calc(var(--u) * 0.9) calc(var(--u) * 2.2); border-radius: calc(var(--u) * 4);
        background: var(--surface); border: calc(var(--u) * 0.25) solid var(--line); color: var(--accent); font-size: calc(var(--u) * 3.6); font-weight: 700; letter-spacing: 0.02em; }
.chip.accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.title { font-size: calc(var(--u) * 7); font-weight: 700; color: var(--accent); margin: auto; text-align: center; }

/* ---------- before_after ---------- */
.ba-head { display: flex; align-items: center; gap: calc(var(--u) * 3); margin-bottom: calc(var(--u) * 2.5); }
.ba-logo { height: calc(var(--u) * 7); width: auto; }
.ba-service { font-size: calc(var(--u) * 6.4); font-weight: 700; color: var(--accent); }
.ba-stage { position: relative; flex: 1; min-height: 0; }
.ba-pair { position: absolute; inset: 0; display: flex; gap: calc(var(--u) * 3); opacity: 0; transition: opacity var(--fade) ease; }
.ba-pair.in { opacity: 1; }
.ba-panel { position: relative; flex: 1; min-width: 0; background: var(--surface); border-radius: calc(var(--u) * 2.5); overflow: hidden; }
.ba-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba-tag { position: absolute; left: calc(var(--u) * 2.5); bottom: calc(var(--u) * 2.5); padding: calc(var(--u) * 1) calc(var(--u) * 2.4); border-radius: calc(var(--u) * 1.5);
          background: var(--accent); color: #fff; font-size: calc(var(--u) * 4); font-weight: 700; }
.ba-foot { margin-top: calc(var(--u) * 2.5); }
.ba-meta { display: flex; gap: calc(var(--u) * 4); font-size: calc(var(--u) * 5.6); font-weight: 700; color: var(--ink); margin-bottom: calc(var(--u) * 1.2); }
.ba-ins { color: var(--soft); font-weight: 600; }
.landscape .card-before_after .ba-stage { max-height: 62%; }

/* ---------- progression ---------- */
.pg-service { font-size: calc(var(--u) * 6.4); font-weight: 700; color: var(--accent); margin-bottom: calc(var(--u) * 2.5); }
.pg-grid { flex: 1; min-height: 0; display: grid; gap: calc(var(--u) * 2.5); }
.landscape .pg-grid { grid-template-columns: repeat(4, 1fr); }
.landscape .pg-grid.n3 { grid-template-columns: repeat(3, 1fr); }
.portrait .pg-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; }
.pg-step { position: relative; display: flex; flex-direction: column; min-height: 0; opacity: 0.18; transition: opacity var(--fade) ease; }
.pg-step.in { opacity: 0.55; }
.pg-step.now, .pg-grid.all .pg-step { opacity: 1; }
.pg-photo { flex: 1; min-height: 0; width: 100%; object-fit: cover; border-radius: calc(var(--u) * 2.5); background: var(--surface); }
.pg-label { margin-top: calc(var(--u) * 1.4); font-size: calc(var(--u) * 4.2); font-weight: 700; color: var(--ink); }
.pg-metric { font-size: calc(var(--u) * 5.6); font-weight: 800; color: var(--accent); line-height: 1.1; }
.card-progression .fine { margin-top: calc(var(--u) * 2.5); }

/* ---------- did_you_know (slide + overlay share .dyk-*) ---------- */
.dyk { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: calc(var(--u) * 2.5); }
.dyk-eyebrow { font-size: calc(var(--u) * 4); font-weight: 700; color: var(--champ); letter-spacing: 0.08em; text-transform: uppercase; }
.dyk-q { font-size: calc(var(--u) * 8); line-height: 1.12; font-weight: 800; color: var(--accent); }
.dyk-a { font-size: calc(var(--u) * 5.6); line-height: 1.3; font-weight: 600; color: var(--ink); opacity: 0; transition: opacity var(--fade) ease; }
.answered .dyk-a { opacity: 1; }
.landscape .dyk-q { max-width: 80%; }
#overlay { display: flex; align-items: flex-end; justify-content: center; padding: 5%; box-sizing: border-box; }
.ov { width: 100%; max-width: 90%; background: var(--surface); border: calc(var(--u) * 0.3) solid var(--line); border-radius: calc(var(--u) * 3);
      padding: calc(var(--u) * 4) calc(var(--u) * 5); box-sizing: border-box; display: flex; flex-direction: column; gap: calc(var(--u) * 2); }
.ov .dyk-q { font-size: calc(var(--u) * 6.4); }
.ov .dyk-a { font-size: calc(var(--u) * 5); }

/* ---------- promo ---------- */
.card-promo .safe { justify-content: center; gap: calc(var(--u) * 3); }
.promo-photo { border-radius: calc(var(--u) * 2.5); object-fit: cover; background: var(--surface); }
.landscape .card-promo.has-photo .safe { flex-direction: row; align-items: center; gap: calc(var(--u) * 5); }
.landscape .card-promo .promo-photo { width: 44%; height: 100%; }
.portrait .card-promo .promo-photo { width: 100%; height: 42%; }
.promo-text { display: flex; flex-direction: column; gap: calc(var(--u) * 2.2); min-width: 0; }
.promo-headline { font-size: calc(var(--u) * 9); line-height: 1.05; font-weight: 800; color: var(--accent); }
.promo-support { font-size: calc(var(--u) * 5.6); line-height: 1.3; font-weight: 600; color: var(--ink); }
.promo-ends { font-size: calc(var(--u) * 4); font-weight: 600; color: var(--soft); }

/* ---------- ambient ---------- */
.ambient-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card-ambient .safe { justify-content: flex-end; }
.ambient-caption { align-self: flex-start; padding: calc(var(--u) * 1.6) calc(var(--u) * 3); border-radius: calc(var(--u) * 2);
                   background: rgba(247, 245, 241, 0.92); color: var(--ink); font-size: calc(var(--u) * 5.6); font-weight: 600; }

/* ---------- meet_provider ---------- */
.card-meet_provider .safe { align-items: center; justify-content: center; gap: calc(var(--u) * 5); }
.landscape .card-meet_provider .safe { flex-direction: row; }
.mp-photo { flex: 0 0 auto; width: calc(var(--u) * 44); height: calc(var(--u) * 44); border-radius: 50%; overflow: hidden; background: var(--surface); border: calc(var(--u) * 0.8) solid var(--surface); }
.mp-photo img { width: 100%; height: 100%; object-fit: cover; }
.mp-text { display: flex; flex-direction: column; gap: calc(var(--u) * 1.6); min-width: 0; }
.portrait .mp-text { align-items: center; text-align: center; }
.mp-eyebrow { font-size: calc(var(--u) * 4); font-weight: 700; color: var(--champ); letter-spacing: 0.08em; text-transform: uppercase; }
.mp-name { font-size: calc(var(--u) * 9); line-height: 1; font-weight: 800; color: var(--accent); }
.mp-cred { font-size: calc(var(--u) * 4.2); font-weight: 600; color: var(--soft); }
.mp-line { margin-top: calc(var(--u) * 1.5); font-size: calc(var(--u) * 5.6); line-height: 1.3; font-weight: 600; color: var(--ink); }

/* ---------- stat ---------- */
.card-stat .safe { align-items: center; justify-content: center; text-align: center; gap: calc(var(--u) * 2); }
.card-stat .chip { align-self: center; }
.stat-number { display: flex; align-items: baseline; justify-content: center; gap: calc(var(--u) * 1.5); color: var(--accent); line-height: 1; }
.stat-value { font-size: calc(var(--u) * 30); font-weight: 800; letter-spacing: -0.02em; }
.stat-unit { font-size: calc(var(--u) * 12); font-weight: 700; }
.stat-context { max-width: 85%; font-size: calc(var(--u) * 5.6); line-height: 1.3; font-weight: 600; color: var(--ink); }