/*
 * Scene library styles (lib/scenes.js). Every size is in --su: 1% of the
 * stage's short side times the scene's fit factor --k, which scenes.js lowers
 * until nothing overflows the frame. Colours and fonts come from the theme.
 * Portrait scenes keep clear of the Reels / Shorts / TikTok overlays.
 */
.sc {
  --su: calc(var(--u) * var(--k, 1));
  display: flex; align-items: center; justify-content: center;
  padding: calc(var(--u) * 7) calc(var(--u) * 9);
}
[data-orient="portrait"] .sc { padding: calc(var(--u) * 15) calc(var(--u) * 7) calc(var(--u) * 24); }
[data-orient="square"] .sc { padding: calc(var(--u) * 8); }
[data-ar="4:5"] .sc { padding: calc(var(--u) * 9) calc(var(--u) * 7); }
.sc-in { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; }

/* ---------- type ---------- */
.sc .kicker {
  font: 600 calc(var(--su) * 2.1) / 1.2 var(--font-body);
  letter-spacing: .2em; text-transform: uppercase; color: var(--accent);
  margin-bottom: calc(var(--su) * 3);
}
.sc .head {
  font-family: var(--font-head); font-weight: var(--head-weight);
  letter-spacing: var(--head-tracking); line-height: 1.06; color: var(--text);
  overflow-wrap: normal;
}
.sc em { font-family: var(--font-accent); font-style: italic; font-weight: var(--accent-weight); color: var(--accent); }
.sc .h-xl { font-size: calc(var(--su) * 9.5); max-width: 15ch; }
.sc .h-lg { font-size: calc(var(--su) * 6.2); max-width: 20ch; }
.sc .h-md { font-size: calc(var(--su) * 4.6); max-width: 26ch; line-height: 1.2; }
.sc .sub { font-size: calc(var(--su) * 3.4); line-height: 1.4; color: var(--muted); max-width: 36ch; margin-top: calc(var(--su) * 2.6); }
.sc .st-line + .st-line { margin-top: calc(var(--su) * 1); }
[data-orient="portrait"] .sc .h-xl { font-size: calc(var(--su) * 11.5); max-width: 9.5ch; }
[data-orient="portrait"] .sc .h-lg { font-size: calc(var(--su) * 7.6); max-width: 12ch; }
[data-orient="portrait"] .sc .h-md { font-size: calc(var(--su) * 5.8); max-width: 16ch; }
[data-orient="portrait"] .sc .sub { font-size: calc(var(--su) * 4); max-width: 24ch; }
[data-orient="portrait"] .sc .kicker { font-size: calc(var(--su) * 2.8); }
[data-orient="square"] .sc .h-xl { font-size: calc(var(--su) * 9); max-width: 12ch; }
[data-orient="square"] .sc .h-lg { font-size: calc(var(--su) * 6); max-width: 15ch; }

/* ---------- feature cards ---------- */
.sc .cards {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: calc(var(--su) * 3); margin-top: calc(var(--su) * 6);
  width: min(100%, calc(var(--su) * 46 * var(--n)));
}
.sc .card {
  padding: calc(var(--su) * 3.4); text-align: left;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.sc .card .ic { font-size: calc(var(--su) * 7); }
.sc .card h3 { font: var(--head-weight) calc(var(--su) * 3.7) / 1.15 var(--font-head); letter-spacing: var(--head-tracking); margin-top: calc(var(--su) * 2.6); }
.sc .card p { color: var(--muted); font-size: calc(var(--su) * 2.7); line-height: 1.45; margin-top: calc(var(--su) * 1.1); }
[data-orient="portrait"] .sc .cards, [data-orient="square"] .sc .cards { grid-auto-flow: row; width: 100%; gap: calc(var(--su) * 2.4); }
[data-orient="portrait"] .sc .card, [data-orient="square"] .sc .card { display: flex; align-items: center; gap: calc(var(--su) * 3); padding: calc(var(--su) * 3); }
[data-orient="portrait"] .sc .card h3, [data-orient="square"] .sc .card h3 { margin-top: 0; }
[data-orient="portrait"] .sc .card h3 { font-size: calc(var(--su) * 4.2); }
[data-orient="portrait"] .sc .card p { font-size: calc(var(--su) * 3); }
[data-orient="portrait"] .sc .card .ic { font-size: calc(var(--su) * 8); }
[data-orient="square"] .sc .cards { margin-top: calc(var(--su) * 4); }

/* ---------- checklist ---------- */
.sc .checks { list-style: none; display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--su) * 2.2); margin-top: calc(var(--su) * 5); text-align: left; }
.sc .checks li { display: flex; align-items: center; gap: calc(var(--su) * 2.4); font-size: calc(var(--su) * 4.4); line-height: 1.25; }
.sc .ck {
  flex: none; display: grid; place-items: center;
  width: calc(var(--su) * 5.6); height: calc(var(--su) * 5.6); border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent);
}
.sc .ck svg { width: 58%; height: 58%; }
[data-orient="portrait"] .sc .checks li { font-size: calc(var(--su) * 4.6); }
[data-orient="portrait"] .sc .ck { width: calc(var(--su) * 6); height: calc(var(--su) * 6); }

/* ---------- steps ---------- */
.sc .steps {
  position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: calc(var(--su) * 3); margin-top: calc(var(--su) * 6);
  width: min(100%, calc(var(--su) * 44 * var(--n)));
}
.sc .steps-line {
  position: absolute; height: 2px; top: calc(var(--su) * 3.7 - 1px);
  left: calc(100% / var(--n) / 2); right: calc(100% / var(--n) / 2);
  background: var(--line);
}
.sc .steps-fill { position: absolute; inset: 0; background: var(--accent); transform-origin: 0 0; }
.sc .step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.sc .num {
  position: relative; z-index: 1; display: grid; place-items: center;
  width: calc(var(--su) * 7.4); height: calc(var(--su) * 7.4); border-radius: 50%;
  background: var(--bg); border: 2px solid var(--accent); color: var(--accent);
  font: var(--head-weight) calc(var(--su) * 3.2) / 1 var(--font-head);
}
.sc .step h3 { font: var(--head-weight) calc(var(--su) * 3.8) / 1.15 var(--font-head); letter-spacing: var(--head-tracking); margin-top: calc(var(--su) * 2.4); }
.sc .step p { color: var(--muted); font-size: calc(var(--su) * 2.8); line-height: 1.4; margin-top: calc(var(--su) * .8); }
[data-orient="portrait"] .sc .steps, [data-orient="square"] .sc .steps { grid-auto-flow: row; width: 100%; gap: calc(var(--su) * 4); }
[data-orient="portrait"] .sc .steps-line, [data-orient="square"] .sc .steps-line {
  width: 2px; height: auto; left: calc(var(--su) * 3.7 - 1px); right: auto;
  top: calc(100% / var(--n) / 2); bottom: calc(100% / var(--n) / 2);
}
[data-orient="portrait"] .sc .step, [data-orient="square"] .sc .step { flex-direction: row; align-items: center; text-align: left; gap: calc(var(--su) * 3); }
[data-orient="portrait"] .sc .step h3, [data-orient="square"] .sc .step h3 { margin-top: 0; }
[data-orient="portrait"] .sc .step h3 { font-size: calc(var(--su) * 4.4); }
[data-orient="portrait"] .sc .step p { font-size: calc(var(--su) * 3.2); }

/* ---------- big number ---------- */
.sc .stat {
  display: flex; align-items: baseline; justify-content: center;
  font-family: var(--font-head); font-weight: var(--head-weight);
  font-size: calc(var(--su) * 22); line-height: 1; letter-spacing: -.045em;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.sc .stat .val { display: inline-block; text-align: right; }
.sc .stat .pre, .sc .stat .suf { font-size: .72em; }
.sc .cap { max-width: 30ch; }
[data-orient="portrait"] .sc .stat { font-size: calc(var(--su) * 26); }

/* ---------- quote ---------- */
.sc .qmark { font: 400 calc(var(--su) * 16) / .8 var(--font-accent); color: var(--accent); height: calc(var(--su) * 8); }
.sc blockquote.head { font-size: calc(var(--su) * 6); max-width: 24ch; line-height: 1.2; }
.sc .who { display: flex; flex-direction: column; gap: calc(var(--su) * .6); margin-top: calc(var(--su) * 4); font-size: calc(var(--su) * 3); }
.sc .who b { color: var(--text); font-weight: 600; }
.sc .who span { color: var(--muted); }
[data-orient="portrait"] .sc blockquote.head { font-size: calc(var(--su) * 6.4); max-width: 14ch; }
[data-orient="portrait"] .sc .who { font-size: calc(var(--su) * 3.4); }

/* ---------- before / after ---------- */
.sc .split { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--su) * 3); margin-top: calc(var(--su) * 5); width: min(100%, calc(var(--su) * 128)); text-align: left; }
.sc .sc-in > .split:first-child { margin-top: 0; }
.sc .side { padding: calc(var(--su) * 4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.sc .side .lbl { font: 600 calc(var(--su) * 2.3) / 1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.sc .side p { font: var(--head-weight) calc(var(--su) * 4.8) / 1.2 var(--font-head); letter-spacing: var(--head-tracking); margin-top: calc(var(--su) * 2); }
.sc .side.b { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 calc(var(--su) * 2) calc(var(--su) * 8) color-mix(in srgb, var(--accent) 22%, transparent); }
.sc .side.b .lbl { color: var(--accent); }
[data-orient="portrait"] .sc .split, [data-orient="square"] .sc .split { grid-template-columns: 1fr; }
[data-orient="portrait"] .sc .side p { font-size: calc(var(--su) * 5); }
[data-orient="portrait"] .sc .side .lbl { font-size: calc(var(--su) * 2.6); }

/* ---------- product screenshot ---------- */
.sc .device {
  margin-top: calc(var(--su) * 4); width: min(100%, calc(var(--su) * 104));
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: 0 calc(var(--su) * 3) calc(var(--su) * 10) rgba(0, 0, 0, .3);
}
.sc .sc-in > .device:first-child { margin-top: 0; }
.sc .device .bar { height: calc(var(--su) * 4.2); display: flex; align-items: center; gap: calc(var(--su) * 1.1); padding: 0 calc(var(--su) * 1.8); border-bottom: 1px solid var(--line); }
.sc .device .bar i { width: calc(var(--su) * 1.3); height: calc(var(--su) * 1.3); border-radius: 50%; background: var(--line); }
.sc .shot { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg2); }
.sc .shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; transform-origin: 50% 0; }
.sc .device.phone { width: calc(var(--su) * 34); padding: calc(var(--su) * 1.6); border-radius: calc(var(--su) * 5); }
.sc .device.phone .bar, .sc .device.plain .bar { display: none; }
.sc .device.phone .shot { aspect-ratio: 9 / 19.5; border-radius: calc(var(--su) * 3.4); }
.sc .device.plain { border: 0; background: none; }
.sc .shot .ph {
  position: absolute; inset: calc(var(--su) * 2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--su) * 1.5);
  border: 2px dashed var(--line); border-radius: var(--radius); color: var(--muted); font-size: calc(var(--su) * 2.3); text-align: center; padding: calc(var(--su) * 2);
}
.sc .shot .ph .ic { font-size: calc(var(--su) * 5); }
[data-orient="portrait"] .sc .device { width: 100%; }
[data-orient="portrait"] .sc .device.phone { width: calc(var(--su) * 52); }

/* ---------- chat ---------- */
.sc .chat { display: flex; flex-direction: column; gap: calc(var(--su) * 3); width: min(100%, calc(var(--su) * 110)); text-align: left; }
.sc .msg { position: relative; max-width: 80%; padding: calc(var(--su) * 2.2) calc(var(--su) * 2.8); border-radius: calc(var(--su) * 3.4); font-size: calc(var(--su) * 3.6); line-height: 1.45; }
.sc .msg.user { align-self: flex-end; background: var(--accent); color: var(--bg); border-bottom-right-radius: calc(var(--su) * 1); }
.sc .msg.user .ghost { visibility: hidden; }
.sc .msg.user .typed { position: absolute; left: calc(var(--su) * 2.8); right: calc(var(--su) * 2.8); top: calc(var(--su) * 2.2); }
.sc .msg.bot { align-self: flex-start; background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: calc(var(--su) * 1); }
.sc .msg.bot .who { display: flex; flex-direction: row; align-items: center; gap: calc(var(--su) * 1.2); margin: 0 0 calc(var(--su) * 1.2); font-size: calc(var(--su) * 2.6); color: var(--muted); }
.sc .msg.bot .who .ic { font-size: calc(var(--su) * 2.6); }
.sc .msg.bot .dots { position: absolute; left: calc(var(--su) * 2.8); bottom: calc(var(--su) * 2.6); display: flex; gap: calc(var(--su) * .9); }
.sc .msg.bot .dots i { width: calc(var(--su) * 1.2); height: calc(var(--su) * 1.2); border-radius: 50%; background: var(--muted); }
[data-orient="portrait"] .sc .chat { width: 100%; }
[data-orient="portrait"] .sc .msg { font-size: calc(var(--su) * 4); max-width: 88%; }
[data-orient="portrait"] .sc .msg.bot .who { font-size: calc(var(--su) * 3); }

/* ---------- works-with chips ---------- */
.sc .chips { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--su) * 1.8); margin-top: calc(var(--su) * 5); max-width: calc(var(--su) * 120); }
.sc .chip { padding: calc(var(--su) * 1.9) calc(var(--su) * 3.2); border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font: 600 calc(var(--su) * 3.3) / 1 var(--font-body); color: var(--text); white-space: nowrap; }
[data-orient="portrait"] .sc .chip { font-size: calc(var(--su) * 3.6); }

/* ---------- end card ---------- */
.sc .mark { font-size: calc(var(--su) * 10); line-height: 0; }
.sc .brand { font-size: calc(var(--su) * 9); margin-top: calc(var(--su) * 2.5); }
.sc .tagline { margin-top: calc(var(--su) * 1.6); }
.sc .cta {
  display: inline-flex; align-items: center; gap: calc(var(--su) * 1.2);
  margin-top: calc(var(--su) * 5); padding: calc(var(--su) * 1.8) calc(var(--su) * 3.6);
  border-radius: 999px; background: var(--accent); color: var(--bg);
  font: 600 calc(var(--su) * 3) / 1 var(--font-body);
}
.sc .cta .ic { color: var(--bg); background: none; padding: 0; border: 0; font-size: calc(var(--su) * 2.8); }
.sc .url { margin-top: calc(var(--su) * 2.4); color: var(--muted); font-size: calc(var(--su) * 2.6); letter-spacing: .02em; }
[data-orient="portrait"] .sc .brand { font-size: calc(var(--su) * 12); }
[data-orient="portrait"] .sc .cta { font-size: calc(var(--su) * 3.6); }
[data-orient="portrait"] .sc .url { font-size: calc(var(--su) * 3); }

/* colour wipe between scenes */
#wipe { position: absolute; inset: 0; z-index: 30; background: var(--accent); pointer-events: none; }