/* BoyerScales · /tour — interactive walkthrough. Shares the Revenue OS type + color tokens. */

:root {
  --bg: #f5f6f9; --surface: #ffffff; --surface-2: #eef0f4;
  --text: #14161c; --text-soft: #5c616b; --text-faint: #9aa0aa; --line: #e7e9ee;
  --accent: #2f6bff; --accent-2: #5b8bff; --danger: #e5484d;
  --hero-bg: #1f3a86; --hero-edge: rgba(255,255,255,.14); --hero-shadow: 0 14px 34px rgba(24,48,120,.32);
  --s-new: #2f6bff; --s-notbooked: #e08600; --s-booked: #16a34a; --s-completed: #6b7280;
  --imsg: #1b8cff; --bezel: #0d0f14; --screen: #ffffff;
  --shadow-sm: 0 1px 2px rgba(20,22,28,.05);
  --shadow: 0 4px 16px rgba(20,22,28,.07), 0 1px 3px rgba(20,22,28,.05);
  --shadow-lg: 0 24px 60px rgba(20,22,28,.16), 0 4px 12px rgba(20,22,28,.06);
  --font: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --display: 'Bricolage Grotesque', var(--font);
  --top-h: 62px; --ctl-h: 78px;
  --ease: cubic-bezier(.2,.8,.2,1);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0b0d11; --surface: #15181e; --surface-2: #1d212a;
  --text: #f2f3f5; --text-soft: #9aa0aa; --text-faint: #656b73; --line: #232833;
  --accent: #5b8bff; --accent-2: #7ba0ff; --danger: #ff6369;
  --hero-bg: #14274e; --hero-edge: rgba(255,255,255,.06); --hero-shadow: 0 12px 30px rgba(0,0,0,.5);
  --s-new: #5b8bff; --s-notbooked: #f0a637; --s-booked: #3ec77f; --s-completed: #8b93a3;
  --imsg: #2a8cff; --bezel: #22262e; --screen: #0f1116;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
  --shadow: 0 4px 16px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.3);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.6), 0 4px 12px rgba(0,0,0,.4);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b0d11; --surface: #15181e; --surface-2: #1d212a;
    --text: #f2f3f5; --text-soft: #9aa0aa; --text-faint: #656b73; --line: #232833;
    --accent: #5b8bff; --accent-2: #7ba0ff; --danger: #ff6369;
    --hero-bg: #14274e; --hero-edge: rgba(255,255,255,.06); --hero-shadow: 0 12px 30px rgba(0,0,0,.5);
    --s-new: #5b8bff; --s-notbooked: #f0a637; --s-booked: #3ec77f; --s-completed: #8b93a3;
    --imsg: #2a8cff; --bezel: #22262e; --screen: #0f1116;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
    --shadow: 0 4px 16px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.3);
    --shadow-lg: 0 24px 60px rgba(0,0,0,.6), 0 4px 12px rgba(0,0,0,.4);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* when a screen fits the viewport there is nothing to scroll, so don't let it wobble */
html.lock, html.lock body { height: 100%; overflow: hidden; overscroll-behavior: none; }
/* each beat tints the stage */
body { --glow: var(--accent); }
body[data-beat="missed"] { --glow: #e5484d; }
body[data-beat="call"]   { --glow: #2f6bff; }
body[data-beat="quote"]  { --glow: #0ea5a4; }
body[data-beat="book"]   { --glow: #16a34a; }
body[data-beat="texts"]  { --glow: #1b8cff; }
body[data-beat="dash"]   { --glow: #4a7dff; }
body[data-beat="after"]  { --glow: #f5a524; }
body[data-beat="recap"]  { --glow: #16a34a; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(900px 520px at 82% -8%, color-mix(in srgb, var(--glow) 18%, transparent), transparent 62%),
              radial-gradient(700px 420px at -10% 100%, color-mix(in srgb, var(--glow) 9%, transparent), transparent 60%);
  transition: background 1.2s ease; }
.m-only { display: none; }
.tap-play { position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 3; display: inline-flex; align-items: center; gap: 8px;
  border: none; border-radius: 999px; padding: 11px 18px; background: var(--accent); color: #fff; font-family: var(--font); font-weight: 600; font-size: 13.5px;
  box-shadow: 0 10px 26px color-mix(in srgb, var(--accent) 40%, transparent); cursor: pointer; animation: pulse 1.8s ease-in-out infinite; white-space: nowrap; }
.tap-play svg { width: 16px; height: 16px; }
.tap-play[hidden] { display: none; }
body { background: var(--bg); color: var(--text); font-family: var(--font); -webkit-font-smoothing: antialiased;
  overflow-x: hidden; min-height: 100dvh; overscroll-behavior-x: none; }
button { font-family: inherit; -webkit-tap-highlight-color: transparent; }
svg use { pointer-events: none; }
.i-off, .i-moon, .i-play { display: none; }
:root[data-theme="dark"] .i-sun { display: none; }
:root[data-theme="dark"] .i-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .i-sun { display: none; }
  :root:not([data-theme="light"]) .i-moon { display: block; }
}
.muted .i-on { display: none; }
.muted .i-off { display: block; }
.paused .i-pause { display: none; }
.paused .i-play { display: block; }

/* ── top bar ───────────────────────────────────────────────────────────── */
.top { position: sticky; top: 0; z-index: 30; height: calc(var(--top-h) + env(safe-area-inset-top));
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 22px;
  padding-top: env(safe-area-inset-top);
  background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--text);
  font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: -.01em; }
.brand img { width: 26px; height: 26px; border-radius: 7px; }
.rail { display: flex; gap: 6px; list-style: none; align-items: center; }
.rail li { display: flex; align-items: center; gap: 7px; }
.rail button { border: none; background: none; cursor: pointer; display: flex; align-items: center; gap: 7px;
  color: var(--text-faint); font-size: 12.5px; font-weight: 500; padding: 6px 8px; border-radius: 999px; }
.rail button i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); border: 1.5px solid var(--text-faint); transition: all .25s; }
.rail li.done button i { background: var(--accent); border-color: var(--accent); }
.rail li.cur button { color: var(--text); background: var(--surface-2); }
.rail li.cur button i { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.rail li:not(.cur) button span { display: none; }
@media (min-width: 1100px) { .rail li button span { display: inline; } }
/* Persistent "this is a prepared example" label. Desktop gets the top-bar chip;
   below 900px the top bar is too tight, so the step label carries it instead. */
.demo-chip { flex: none; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-soft); background: var(--surface-2); border: 1px solid var(--line);
  padding: 5px 11px; border-radius: 999px; white-space: nowrap; }
.top-actions { display: flex; gap: 8px; }
.icon-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface);
  color: var(--text); cursor: pointer; display: grid; place-items: center; }
.icon-btn svg { width: 17px; height: 17px; }
.icon-btn:hover { background: var(--surface-2); }

/* ── stage + screens ───────────────────────────────────────────────────── */
.stage { max-width: 1160px; margin: 0 auto; padding: 22px 22px calc(var(--ctl-h) + 34px + env(safe-area-inset-bottom)); }
.screen { display: none; }
.screen.on { display: block; animation: rise .55s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.beat { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(0, 1.3fr); gap: 56px; align-items: center;
  min-height: calc(100vh - var(--top-h) - var(--ctl-h) - 90px); }
.beat-wide { grid-template-columns: minmax(260px, .8fr) minmax(0, 1.7fr); }
.beat-texts { grid-template-columns: minmax(300px, 1fr) minmax(0, 1.5fr); }
.beat-missed { grid-template-areas: "copy device" "compare device"; grid-template-rows: auto auto; row-gap: 22px; }
.beat-missed .copy { grid-area: copy; align-self: end; }
.beat-missed .compare { grid-area: compare; align-self: start; max-width: 460px; margin-top: 0; }
.beat-missed .device { grid-area: device; }
.copy { max-width: 460px; }
.eyebrow { font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
h1, h2 { font-family: var(--display); font-weight: 700; letter-spacing: -.025em; line-height: 1.04; }
h1 { font-size: clamp(38px, 6vw, 68px); }
h2 { font-size: clamp(30px, 3.6vw, 44px); }
.copy p { color: var(--text-soft); font-size: 17px; line-height: 1.55; margin-top: 18px; }
.hint { margin-top: 18px; font-size: 13px; color: var(--text-faint); }
.device { display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 14px; min-width: 0; }
.device.duo { flex-direction: row; align-items: flex-start; gap: 26px; flex-wrap: wrap; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; cursor: pointer;
  font-family: var(--font); font-weight: 600; font-size: 15px; padding: 12px 20px; border-radius: 999px; text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, background .15s; white-space: nowrap; }
.btn.primary { background: var(--accent); color: #fff; box-shadow: 0 10px 26px color-mix(in srgb, var(--accent) 34%, transparent); }
.btn.primary:hover { transform: translateY(-1px); box-shadow: 0 14px 30px color-mix(in srgb, var(--accent) 40%, transparent); }
.btn.primary:active { transform: translateY(1px) scale(.98); }
.btn.primary.pulse { animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 10px 26px color-mix(in srgb, var(--accent) 34%, transparent); } 50% { box-shadow: 0 10px 26px color-mix(in srgb, var(--accent) 34%, transparent), 0 0 0 8px color-mix(in srgb, var(--accent) 16%, transparent); } }
.btn.outline { background: var(--surface); border-color: var(--line); color: var(--text); }
.btn.outline:hover { background: var(--surface-2); }
.btn.ghost { background: none; color: var(--text-soft); }
.btn.ghost:hover { color: var(--text); background: var(--surface-2); }
.btn.lg { font-size: 16px; padding: 15px 26px; }
.btn .arrow { font-weight: 500; }
.link-btn { background: none; border: none; color: var(--text-faint); cursor: pointer; font-size: 14px; margin-top: 26px; text-decoration: underline; text-underline-offset: 3px; }
.link-btn:hover { color: var(--text); }

/* ── cover + recap ─────────────────────────────────────────────────────── */
.cover-inner { min-height: calc(100dvh - var(--top-h) - 60px); display: flex; flex-direction: column; justify-content: center; max-width: 760px; margin: 0 auto; text-align: center; align-items: center; }
.cover .eyebrow, .recap .eyebrow { margin-bottom: 18px; }
.lede { color: var(--text-soft); font-size: 18px; line-height: 1.55; margin-top: 20px; max-width: 600px; }
.demo-flag { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-soft);
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 15px; margin-bottom: 22px; box-shadow: var(--shadow-sm); }
.cover-actions { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 34px; }
/* Reassurance sits tight under the button, ahead of the sound choice. */
.btn-reassure { margin: -4px 0 0; font-size: 13.5px; color: var(--text-faint); }
.sound-choice { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-soft); cursor: pointer; }
.sound-choice input { width: 16px; height: 16px; accent-color: var(--accent); }
.cover-strip { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin-top: 56px; color: var(--text-faint); font-size: 13px; font-weight: 500; }
.cover-strip i { width: 4px; height: 4px; border-radius: 50%; background: var(--text-faint); opacity: .6; }
.tally { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 32px; width: 100%; max-width: 720px; }
.tally-item { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 22px 16px; box-shadow: var(--shadow); }
.tally-item b { display: block; font-family: var(--display); font-size: clamp(34px, 4.5vw, 48px); font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.tally-item b small { font-size: .6em; color: #f5a524; margin-left: 2px; }
.tally-item span { display: block; margin-top: 8px; font-size: 14px; color: var(--text-soft); line-height: 1.35; }
.recap .cover-actions { flex-direction: row; flex-wrap: wrap; justify-content: center; }

/* ── controls (bottom) ─────────────────────────────────────────────────── */
.controls { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; height: calc(var(--ctl-h) + env(safe-area-inset-bottom));
  padding: 0 22px env(safe-area-inset-bottom); display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line); }
.controls[hidden] { display: none; }
.step-label { font-size: 13px; color: var(--text-faint); font-weight: 500; text-align: center; }

/* ── avatars ───────────────────────────────────────────────────────────── */
.av { --h: 212; width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 12px; font-weight: 600; color: #fff;
  background: linear-gradient(145deg, hsl(var(--h) 72% 62%), hsl(calc(var(--h) + 28) 70% 44%));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 2px 6px rgba(0,0,0,.18); letter-spacing: .02em; }
.av svg { width: 60%; height: 60%; color: rgba(255,255,255,.92); }
.av.unknown { background: linear-gradient(145deg, #8f98a8, #5f6879); }
.av.sm { width: 22px; height: 22px; font-size: 9.5px; }
.av.md { width: 42px; height: 42px; font-size: 15px; }
.av.lg { width: 50px; height: 50px; font-size: 17px; margin: 0 auto 8px; }

/* ── compare list (missed call) ────────────────────────────────────────── */
.compare { list-style: none; margin-top: 26px; display: grid; gap: 10px; }
.compare li { display: grid; gap: 3px; padding: 14px 16px 14px 42px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); position: relative; }
.compare li b { font-size: 14.5px; }
.compare li span { font-size: 14px; color: var(--text-soft); line-height: 1.45; }
.compare li::before { content: ""; position: absolute; left: 16px; top: 18px; width: 12px; height: 12px; border-radius: 50%; }
.compare li.bad::before { background: var(--danger); box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 18%, transparent); }
.compare li.good { border-color: color-mix(in srgb, var(--s-booked) 40%, var(--line)); }
.compare li.good::before { background: var(--s-booked); box-shadow: 0 0 0 4px color-mix(in srgb, var(--s-booked) 18%, transparent); }

/* ── phone frame ───────────────────────────────────────────────────────── */
.phone { width: 300px; max-width: 100%; height: 570px; border-radius: 46px; background: var(--bezel); padding: 10px;
  box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(255,255,255,.08); position: relative; flex: none; }
.phone-notch { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 94px; height: 26px; background: var(--bezel); border-radius: 14px; z-index: 3; }
.phone-screen { height: 100%; border-radius: 37px; background: var(--screen); overflow: hidden; display: flex; flex-direction: column; position: relative; }

/* incoming call */
.incoming { background: linear-gradient(180deg, #1a2540 0%, #0f1526 100%); color: #fff; text-align: center; }
.inc-top { padding: 58px 18px 0; }
.inc-label { font-size: 13px; color: rgba(255,255,255,.6); letter-spacing: .04em; }
.inc-num { font-family: var(--display); font-size: 27px; font-weight: 600; margin-top: 6px; letter-spacing: -.01em; }
.inc-loc { font-size: 14px; color: rgba(255,255,255,.6); margin-top: 3px; }
.ring-wrap { flex: 1; display: grid; place-items: center; position: relative; }
.ring-wrap > * { grid-area: 1/1; }
.inc-avatar { width: 92px; height: 92px; border-radius: 50%; background: linear-gradient(145deg, #8f98a8, #5f6879); display: grid; place-items: center; z-index: 1;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); transition: background .5s ease, transform .5s var(--ease); }
.inc-avatar svg { width: 52px; height: 52px; color: rgba(255,255,255,.9); }
.ring { width: 92px; height: 92px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); animation: ring 2.1s ease-out infinite; }
.ring:nth-child(2) { animation-delay: .7s; } .ring:nth-child(3) { animation-delay: 1.4s; }
@keyframes ring { from { transform: scale(1); opacity: .8; } to { transform: scale(2.6); opacity: 0; } }
.answered .ring { animation: none; opacity: 0; transition: opacity .4s; }
.answered .inc-avatar { background: linear-gradient(145deg, #34c759, #1f9a44); transform: scale(1.04); }
.inc-actions { display: flex; justify-content: space-around; padding: 0 26px 70px; }
.inc-col { display: flex; flex-direction: column; align-items: center; gap: 9px; font-size: 12.5px; color: rgba(255,255,255,.7); }
.inc-btn { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; color: #fff; border: none; cursor: default; position: relative; }
.inc-btn svg { width: 28px; height: 28px; }
.inc-btn.decline { background: #e5484d; opacity: .55; }
.inc-btn.accept { background: #34c759; cursor: pointer; transition: transform .15s ease, box-shadow .2s; animation: bob 1.4s ease-in-out infinite; box-shadow: 0 8px 22px rgba(52,199,89,.45); }
.inc-btn.accept::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid rgba(52,199,89,.7); animation: halo 1.6s ease-out infinite; }
@keyframes halo { from { transform: scale(.9); opacity: .9; } to { transform: scale(1.5); opacity: 0; } }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.inc-btn.accept:hover { transform: scale(1.06); }
.inc-btn.accept:active { transform: scale(.94); }
.answered .inc-btn.accept { animation: none; }
.inc-col span { transition: color .3s; }
.answered #acceptLbl { color: #fff; font-weight: 600; }
/* banner slides up inside the phone — nothing outside moves */
.inc-banner { position: absolute; left: 12px; right: 12px; bottom: 14px; display: flex; align-items: center; gap: 9px; justify-content: center;
  padding: 11px 14px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(10px);
  color: #fff; font-size: 12.5px; font-weight: 500; transform: translateY(140%); opacity: 0; transition: transform .55s var(--ease), opacity .4s; }
.answered .inc-banner { transform: none; opacity: 1; }
.tap-hint { font-size: 13.5px; color: var(--text-faint); transition: opacity .4s, color .4s; }
.tap-hint.ready { color: var(--text); font-weight: 500; }
.pulse-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--s-booked); box-shadow: 0 0 0 0 color-mix(in srgb, var(--s-booked) 50%, transparent); animation: dot 1.6s ease-out infinite; flex: none; }
@keyframes dot { to { box-shadow: 0 0 0 9px transparent; } }

/* in-call */
.incall { color: var(--text); }
.call-head { text-align: center; padding: 52px 16px 10px; border-bottom: 1px solid var(--line); }
.call-name { font-family: var(--display); font-weight: 600; font-size: 17px; transition: opacity .3s; }
.call-sub { font-size: 11.5px; color: var(--text-faint); margin-top: 2px; }
.call-timer { font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--s-booked); font-weight: 600; margin-top: 6px; }
.wave { display: flex; justify-content: center; align-items: center; gap: 3px; height: 14px; margin-top: 6px; opacity: 0; transition: opacity .3s; }
.wave i { width: 3px; height: 4px; border-radius: 2px; background: var(--accent); }
.wave.on { opacity: 1; }
.wave.on i { animation: wave .9s ease-in-out infinite; }
.wave.on i:nth-child(2) { animation-delay: .12s; } .wave.on i:nth-child(3) { animation-delay: .24s; } .wave.on i:nth-child(4) { animation-delay: .36s; } .wave.on i:nth-child(5) { animation-delay: .48s; }
.wave.caller i { background: var(--text-faint); }
@keyframes wave { 0%,100% { height: 4px; } 50% { height: 14px; } }
.thread { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 12px; display: flex; flex-direction: column; gap: 9px; }
.bub { max-width: 84%; padding: 9px 12px; border-radius: 17px; font-size: 13.5px; line-height: 1.4; animation: pop .32s var(--ease) both; position: relative; }
.bub .who { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; opacity: .6; margin-bottom: 3px; }
.bub.r { align-self: flex-start; background: var(--accent); color: #fff; border-bottom-left-radius: 6px; }
.bub.c { align-self: flex-end; background: var(--surface-2); color: var(--text); border-bottom-right-radius: 6px; }
.bub.typing { padding: 11px 14px; display: flex; gap: 4px; }
.bub.typing i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .5; animation: blink 1s infinite; }
.bub.typing i:nth-child(2) { animation-delay: .2s; } .bub.typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%,100% { opacity: .25; } 50% { opacity: .9; } }
@keyframes pop { from { opacity: 0; transform: translateY(6px) scale(.97); } to { opacity: 1; transform: none; } }
.call-bar { display: flex; justify-content: center; gap: 14px; padding: 12px 12px 22px; border-top: 1px solid var(--line); }
.cb { width: 44px; height: 44px; border-radius: 50%; border: none; background: var(--surface-2); color: var(--text); cursor: pointer; display: grid; place-items: center; transition: background .15s, transform .12s; }
.cb svg { width: 20px; height: 20px; }
.cb:hover { background: color-mix(in srgb, var(--accent) 16%, var(--surface-2)); }
.cb:active { transform: scale(.92); }

/* capture card */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); }
.capture { width: 300px; max-width: 100%; padding: 20px 20px 16px; align-self: center; }
.card-head { display: flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-soft); }
.caps { display: grid; gap: 7px; margin-top: 16px; }
.cap { display: grid; grid-template-columns: 92px 1fr; gap: 10px; align-items: baseline; padding: 9px 10px; border-radius: 11px; border: 1px dashed var(--line); transition: border-color .35s, background .35s; }
.cap dt { font-size: 12px; color: var(--text-faint); font-weight: 500; }
.cap dd { font-size: 14px; color: var(--text-faint); font-weight: 500; transition: color .3s; }
.cap.got { border-style: solid; border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.cap.got dd { color: var(--text); font-weight: 600; }
.cap.flash { animation: flash .9s ease; }
@keyframes flash { 0% { background: color-mix(in srgb, var(--accent) 30%, var(--surface)); } 100% { } }
.card-foot { margin-top: 14px; font-size: 13px; color: var(--text-faint); display: flex; align-items: center; gap: 8px; min-height: 20px; transition: color .3s; }
.card-foot.ready { color: var(--s-booked); font-weight: 600; }

/* call strip (quote + booking screens) */
.callstrip { margin-top: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-sm); }
.cs-head { display: flex; align-items: center; gap: 8px; padding: 9px 14px; font-size: 12px; font-weight: 600; color: var(--text-soft); border-bottom: 1px solid var(--line); background: var(--surface-2); transition: color .3s; }
.cs-head.ended { color: var(--text-faint); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--s-booked); animation: dot 1.6s ease-out infinite; }
.cs-head.ended .live-dot { background: var(--text-faint); animation: none; }
.cs-timer { font-variant-numeric: tabular-nums; }
.cs-thread { padding: 12px; display: flex; flex-direction: column; gap: 8px; min-height: 72px; }
.cs-thread .bub { font-size: 13px; }

/* smooth height reveal for list inserts (nothing jumps) */
.expand { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.expand > div { min-height: 0; overflow: hidden; }
.expand > div > * { opacity: 0; transform: translateY(-6px); transition: opacity .4s ease .15s, transform .45s var(--ease) .15s; }
.expand.open { grid-template-rows: 1fr; }
.expand.open > div > * { opacity: 1; transform: none; }
.cal-list .expand > div > .appt { margin: 0; }
.cal-list .expand.open { margin-bottom: 0; }

/* quote card */
.quote { width: 400px; max-width: 100%; padding: 24px 24px 20px; }
.q-title { font-family: var(--display); font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.q-sub { color: var(--text-faint); font-size: 13.5px; margin-top: 2px; }
.q-lines { margin-top: 18px; display: grid; gap: 4px; }
.q-line, .q-total { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; border-radius: 10px; font-size: 14.5px; opacity: 0; transform: translateX(-8px); transition: opacity .4s ease, transform .4s var(--ease); }
.q-line.in, .q-total.in { opacity: 1; transform: none; }
.q-line span { color: var(--text-soft); }
.q-line b { font-weight: 600; font-variant-numeric: tabular-nums; }
.q-line b.incl { color: var(--s-booked); font-size: 13px; }
.q-total { margin-top: 10px; background: var(--hero-bg); color: #fff; padding: 16px 16px; border-radius: 14px; box-shadow: var(--hero-shadow); }
.q-total span { font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; color: rgba(255,255,255,.6); }
.q-total b { font-family: var(--display); font-size: 30px; font-weight: 700; letter-spacing: -.02em; }
.q-total.bump b { animation: bump .4s ease; }
@keyframes bump { 40% { transform: scale(1.1); } }
.pricebook { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line); }
.pb-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; }
.pb-head b { font-weight: 600; } .pb-head span { color: var(--text-faint); font-size: 12.5px; }
.pb-row { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; margin-top: 12px; font-size: 13.5px; }
.pb-row b { font-variant-numeric: tabular-nums; min-width: 44px; text-align: right; }
.pb-row input[type=range] { width: 100%; accent-color: var(--accent); }
.pb-note { font-size: 12px; color: var(--text-faint); margin-top: 10px; }

/* calendar card */
.cal { width: 400px; max-width: 100%; padding: 20px 20px 16px; }
.cal-top { display: flex; justify-content: space-between; align-items: baseline; }
.cal-top b { font-family: var(--display); font-size: 19px; font-weight: 600; }
.cal-top span { font-size: 12.5px; color: var(--text-faint); }
.cal-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 14px; }
.cal-d { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0 7px; border-radius: 12px; font-size: 14px; font-weight: 500; position: relative; }
.cal-d small { font-size: 11px; color: var(--text-faint); }
.cal-d i { width: 5px; height: 5px; border-radius: 50%; background: var(--text-faint); opacity: 0; }
.cal-d.has i { opacity: 1; background: var(--accent); }
.cal-d.sel { background: var(--accent); color: #fff; }
.cal-d.sel small { color: rgba(255,255,255,.8); }
.cal-d.sel i { background: #fff; }
.cal-day-title { margin-top: 16px; font-size: 13px; font-weight: 600; color: var(--text-soft); text-transform: uppercase; letter-spacing: .05em; }
.cal-list { margin-top: 8px; display: grid; gap: 6px; }
.appt { display: flex; gap: 12px; align-items: flex-start; padding: 11px 12px; border-radius: 13px; background: var(--surface-2); }
.appt-time { font-variant-numeric: tabular-nums; font-size: 12.5px; font-weight: 600; color: var(--text-soft); min-width: 60px; padding-top: 2px; }
.appt-main { display: grid; gap: 1px; min-width: 0; }
.appt-main b { font-size: 14.5px; } .appt-main small { font-size: 12.5px; color: var(--text-soft); }
.appt-main em { font-style: normal; font-size: 11.5px; color: var(--s-booked); font-weight: 600; margin-top: 2px; }
.appt.new { background: color-mix(in srgb, var(--s-booked) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--s-booked) 45%, var(--line)); }
.cal-list .expand.open > div > .appt { margin-bottom: 6px; }

/* messages (iMessage-style) */
.msgs { background: var(--screen); }
.msg-head { text-align: center; padding: 48px 12px 10px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: 5px; }
.msg-name { font-size: 12.5px; font-weight: 500; }
.msg-thread { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 12px; display: flex; flex-direction: column; gap: 6px; }
.msg-sep { align-self: center; font-size: 11px; color: var(--text-faint); font-weight: 500; margin: 8px 0 2px; animation: pop .3s ease both; }
.bubble { max-width: 82%; padding: 8px 12px; border-radius: 18px; font-size: 13.5px; line-height: 1.38; animation: pop .32s var(--ease) both; word-wrap: break-word; }
.bubble.blue { align-self: flex-end; background: var(--imsg); color: #fff; border-bottom-right-radius: 5px; }
.bubble.gray { align-self: flex-start; background: var(--surface-2); color: var(--text); border-bottom-left-radius: 5px; }
.bubble a { color: inherit; text-decoration: underline; }
.bubble.typing { display: flex; gap: 4px; padding: 10px 14px; }
.bubble.typing i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .5; animation: blink 1s infinite; }
.bubble.typing i:nth-child(2) { animation-delay: .2s; } .bubble.typing i:nth-child(3) { animation-delay: .4s; }
.delivered { align-self: flex-end; font-size: 10.5px; color: var(--text-faint); margin-top: -3px; margin-right: 4px; }
.msg-input { margin: 6px 10px 20px; border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; font-size: 13px; color: var(--text-faint); }
.timeline-tags { list-style: none; margin-top: 26px; display: grid; gap: 8px; }
.timeline-tags li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-faint); padding: 9px 12px; border-radius: 11px; border: 1px solid transparent; transition: all .3s; }
.timeline-tags li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--line); border: 1.5px solid var(--text-faint); flex: none; }
.timeline-tags li.done { color: var(--text-soft); }
.timeline-tags li.done::before { background: var(--accent); border-color: var(--accent); }
.timeline-tags li.cur { color: var(--text); background: var(--surface); border-color: var(--line); font-weight: 600; }
.timeline-tags li.cur::before { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }

/* delivery toggle (blue bubble vs green sms) */
.deliv { margin-top: 18px; }
.seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px; gap: 2px; }
.seg button { border: none; background: none; color: var(--text-soft); font-family: var(--font); font-size: 13px; font-weight: 600; padding: 7px 13px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; transition: background .25s, color .25s; }
.seg button i { width: 9px; height: 9px; border-radius: 50%; background: #1b8cff; }
.seg button[data-mode="green"] i { background: #34c759; }
.seg button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.deliv-note { font-size: 13px; color: var(--text-soft); margin-top: 10px; line-height: 1.45; min-height: 38px; transition: opacity .25s; }
.msgs.green { --imsg: #34c759; }
.msg-via { font-size: 10.5px; color: var(--text-faint); transition: color .3s; }

/* dashboard compose panel */
.compose { width: 300px; max-width: 100%; padding: 18px 18px 14px; align-self: center; display: flex; flex-direction: column; gap: 12px; transition: opacity .4s; }
.compose.waiting { opacity: .55; }
.compose.waiting .quick, .compose.waiting .cmp-form { pointer-events: none; }
.compose .card-head { gap: 8px; }
.cmp-thread { display: flex; flex-direction: column; gap: 6px; max-height: 200px; overflow-y: auto; padding: 2px 0; }
.cmp-thread:empty { display: none; }
.cm { max-width: 90%; padding: 7px 10px; border-radius: 12px; font-size: 12.5px; line-height: 1.35; animation: pop .3s var(--ease) both; }
.cm.out { align-self: flex-end; background: color-mix(in srgb, var(--accent) 14%, var(--surface-2)); border-bottom-right-radius: 4px; }
.cm.in { align-self: flex-start; background: var(--surface-2); border-bottom-left-radius: 4px; }
.cm small { display: block; font-size: 10.5px; color: var(--text-faint); margin-top: 3px; }
.cm small.ok { color: var(--s-booked); }
.quick { display: flex; flex-wrap: wrap; gap: 6px; }
.quick button { border: 1px solid var(--line); background: var(--surface); color: var(--text); font-family: var(--font); font-size: 12.5px; padding: 7px 11px; border-radius: 999px; cursor: pointer; text-align: left; transition: background .15s, border-color .15s, opacity .3s; }
.quick button:hover { background: var(--surface-2); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.quick button.used { opacity: .45; }
.cmp-form { display: flex; gap: 6px; }
.cmp-form input { flex: 1; min-width: 0; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font-family: var(--font); font-size: 14px; padding: 10px 13px; border-radius: 999px; outline: none; }
.cmp-form input:focus { border-color: var(--accent); }
.cmp-form button { width: 40px; height: 40px; border-radius: 50%; border: none; background: var(--accent); color: #fff; cursor: pointer; display: grid; place-items: center; flex: none; transition: transform .12s; }
.cmp-form button svg { width: 17px; height: 17px; margin-left: 2px; }
.cmp-form button:active { transform: scale(.92); }
.cmp-foot { font-size: 12px; color: var(--text-faint); min-height: 16px; transition: color .3s; }
.cmp-foot.ready { color: var(--accent); font-weight: 600; }

/* dashboard replica */
.dash { width: 420px; max-width: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: 26px; padding: 16px 16px 14px; box-shadow: var(--shadow-lg); }
.dash-brand { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-size: 13.5px; font-weight: 600; }
.dash-brand img { width: 20px; height: 20px; border-radius: 6px; }
.dash-brand em { font-style: normal; font-weight: 500; color: var(--text-faint); }
.dash-brand .sample { margin-left: auto; font-style: normal; font-size: 11px; color: var(--text-faint); border: 1px solid var(--line); padding: 3px 8px; border-radius: 999px; font-family: var(--font); font-weight: 500; }
.dash-h1 { font-size: 21px; font-weight: 600; letter-spacing: -.01em; margin-top: 14px; }
.dash-greet { font-size: 13.5px; color: var(--text-soft); margin-top: 2px; }
.hero { position: relative; border-radius: 18px; padding: 18px 18px 16px; color: #fff; margin-top: 12px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--hero-bg) 80%, #4a7dff), var(--hero-bg)); box-shadow: var(--hero-shadow); border: 1px solid var(--hero-edge); }
.hero-lbl { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.hero-num { font-family: var(--display); font-size: 36px; font-weight: 700; letter-spacing: -.02em; display: flex; align-items: center; gap: 8px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.hero-num svg { width: 24px; height: 24px; color: #34d399; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 12px 11px; }
.tile-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; margin-bottom: 9px; }
.tile-ic svg { width: 16px; height: 16px; }
.c-blue { background: color-mix(in srgb, #2f6bff 16%, transparent); color: #2f6bff; }
.c-teal { background: color-mix(in srgb, #0ea5a4 16%, transparent); color: #0ea5a4; }
.c-green { background: color-mix(in srgb, #16a34a 16%, transparent); color: #16a34a; }
.c-violet { background: color-mix(in srgb, #7c5cff 16%, transparent); color: #7c5cff; }
.tile-num { font-family: var(--display); font-size: 23px; font-weight: 600; letter-spacing: -.01em; }
.tile-lbl { font-size: 12px; color: var(--text-soft); margin-top: 1px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; margin-top: 12px; overflow: hidden; }
.panel-title { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-soft); padding: 12px 14px 8px; }
.rows { display: grid; }
.row, .mini-row { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-top: 1px solid var(--line); }
.row.hl { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.row-main b { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-main small { font-size: 12px; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.badge { flex: none; font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
.badge.s-new { background: color-mix(in srgb, var(--s-new) 15%, transparent); color: var(--s-new); }
.badge.s-notbooked { background: color-mix(in srgb, var(--s-notbooked) 17%, transparent); color: var(--s-notbooked); }
.badge.s-booked { background: color-mix(in srgb, var(--s-booked) 17%, transparent); color: var(--s-booked); }
.badge.s-completed { background: color-mix(in srgb, var(--s-completed) 18%, transparent); color: var(--s-completed); }
.amt { font-size: 12.5px; font-weight: 600; color: var(--s-booked); min-width: 46px; text-align: right; font-variant-numeric: tabular-nums; }

/* after-the-job timeline */
.tl { list-style: none; width: 420px; max-width: 100%; display: grid; gap: 8px; position: relative; padding-left: 22px; }
.tl::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; background: var(--line); border-radius: 2px; }
.tl-item { position: relative; opacity: 0; transform: translateY(8px); transition: opacity .45s ease, transform .45s var(--ease); }
.tl-item.in { opacity: 1; transform: none; }
.tl-item::before { content: ""; position: absolute; left: -20px; top: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--text-faint); border: 2px solid var(--bg); transition: background .3s; }
.tl-item.in::before { background: var(--accent); }
.tl-when { font-size: 12px; font-weight: 600; color: var(--text-faint); margin-bottom: 6px; }
.mini-row { background: var(--surface); border: 1px solid var(--line); border-radius: 13px; padding: 10px 12px; }
.tl .bubble { max-width: 88%; font-size: 13.5px; }
.tl .bubble.blue { margin-left: auto; }
.tl-item.sep { display: flex; align-items: center; gap: 10px; color: var(--text-faint); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; padding: 6px 0; }
.tl-item.sep::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.gcard { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; box-shadow: var(--shadow); }
.g-head { display: flex; align-items: center; gap: 9px; font-size: 13.5px; }
.g-logo { width: 22px; height: 22px; border-radius: 50%; background: #fff; color: #4285f4; font-weight: 700; font-size: 14px; display: grid; place-items: center; border: 1px solid var(--line); font-family: var(--display); }
.g-head i { margin-left: auto; font-style: normal; font-size: 11px; color: var(--text-faint); border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; }
.stars { margin-top: 8px; font-size: 19px; letter-spacing: 3px; color: var(--line); }
.stars span { transition: color .25s, transform .25s; display: inline-block; }
.stars span.lit { color: #f5a524; transform: scale(1.1); }
.g-body { margin-top: 6px; font-size: 14px; line-height: 1.45; }
.g-who { margin-top: 8px; font-size: 12px; color: var(--text-faint); display: flex; align-items: center; gap: 7px; }

/* ── short desktop viewports ───────────────────────────────────────────── */
@media (min-width: 900px) and (max-height: 880px) { .dash, .tl { zoom: .86; } .phone { height: 540px; } }

/* ── mobile: the screen IS the device ─────────────────────────────────── */
@media (max-width: 899px) {
  :root { --top-h: 56px; --ctl-h: 72px; }
  .top { padding: 0 12px 0 14px; padding-top: env(safe-area-inset-top); gap: 10px; }
  .brand span { display: none; }
  .demo-chip { display: none; }
  #themeBtn { display: none; }
  .icon-btn { width: 34px; height: 34px; }
  /* progress segments instead of dots */
  .rail { flex: 1; gap: 4px; }
  .rail li { flex: 1; }
  .rail button { width: 100%; padding: 8px 0; display: block; background: none !important; }
  .rail button span { display: none !important; }
  .rail button i { display: block; width: 100%; height: 3px; border-radius: 2px; border: none; background: var(--line); box-shadow: none !important; }
  .rail li.done button i, .rail li.cur button i { background: var(--accent); }
  .rail li.cur button i { box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 60%, transparent) !important; }
  .d-br { display: none; }
  .m-only { display: inline; }
  h1 { font-size: clamp(34px, 10.5vw, 44px); }
  h2 { font-size: clamp(22px, 6vw, 27px); line-height: 1.12; }
  .stage { padding: 14px 16px calc(var(--ctl-h) + 14px + env(safe-area-inset-bottom, 0px)); }
  .beat, .beat-wide, .beat-missed, .beat-texts { display: flex; flex-direction: column; gap: 14px; align-items: stretch;
    min-height: calc(100dvh - var(--top-h) - var(--ctl-h) - 28px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
  .beat:has(.phone) { height: calc(100dvh - var(--top-h) - var(--ctl-h) - 28px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); min-height: 0; }
  .beat:has(.phone) .copy { flex: none; }
  .copy { max-width: none; padding: 4px 4px 0; }
  .eyebrow { margin-bottom: 8px; font-size: 11px; }
  .demo-flag { font-size: 10.5px; padding: 6px 12px; margin-bottom: 14px; }
  .btn-reassure { font-size: 12.5px; }
  /* Stack the chip over the step count so the footer reads the same on every
     step — inline, it wrapped once the Next button's label got long. */
  .step-label { display: flex; flex-direction: column; align-items: center; gap: 4px; line-height: 1; }
  .step-label::before { content: "Demonstration";
    font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    color: var(--text-soft); background: var(--surface-2); border: 1px solid var(--line);
    padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
  .copy p { font-size: 14px; line-height: 1.45; margin-top: 8px; color: var(--text-soft); }
  .hint, .compare, .tap-hint, .timeline-tags, .callstrip .cs-thread .bub:not(:last-child) { display: none; }
  .device { flex: 1; min-height: 0; justify-content: stretch; gap: 12px; position: relative; }
  .device.duo { flex-direction: column; align-items: stretch; gap: 12px; }
  /* no bezel: the card is the screen */
  .phone { flex: 1 1 0; width: 100%; height: auto; min-height: 380px; padding: 0; background: none; border-radius: 28px; box-shadow: none; display: flex; flex-direction: column; }
  .phone-screen { flex: 1 1 0; min-height: 0; height: auto; }
  .phone-notch { display: none; }
  .phone-screen { border-radius: 28px; border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
  .inc-top { padding: 34px 18px 0; }
  .inc-num { font-size: 30px; }
  .inc-avatar { width: 104px; height: 104px; } .inc-avatar svg { width: 58px; height: 58px; } .ring { width: 104px; height: 104px; }
  .inc-btn { width: 70px; height: 70px; } .inc-btn svg { width: 30px; height: 30px; }
  .inc-actions { padding: 0 34px 78px; }
  .inc-banner { bottom: 16px; font-size: 13px; padding: 12px 14px; }
  .call-head { padding: 24px 16px 12px; }
  .call-name { font-size: 18px; }
  .thread { padding: 14px 14px 16px; gap: 9px; }
  .bub { font-size: 14px; max-width: 86%; }
  .call-bar { padding: 12px 12px 14px; }
  /* captured details ride inside the call screen, above the controls */
  .capture { position: static; flex: none; margin: 0 10px 10px; width: auto; padding: 10px 12px 8px;
    background: var(--surface-2); border: 1px solid var(--line); border-radius: 16px; box-shadow: none; align-self: auto; }
  .card-head { font-size: 10.5px; }
  .caps { display: flex; gap: 6px; margin-top: 6px; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .caps::-webkit-scrollbar { display: none; }
  .cap { flex: none; grid-template-columns: auto; gap: 0; padding: 5px 10px; border-radius: 999px; background: var(--surface); scroll-snap-align: start; }
  .cap dt { font-size: 10px; } .cap dd { font-size: 12.5px; white-space: nowrap; }
  .card-foot { margin-top: 5px; font-size: 11.5px; min-height: 0; }
  .tap-play { bottom: 190px; }
  /* quote + booking */
  .callstrip { margin-top: 2px; order: -1; }
  .cs-head { padding: 7px 12px; font-size: 11.5px; }
  .cs-thread { min-height: 0; padding: 8px 10px; }
  .cs-thread .bub { font-size: 12.5px; padding: 7px 10px; }
  .quote, .cal { width: 100%; padding: 20px 18px 16px; }
  .q-line, .q-total { font-size: 14px; }
  /* texts: compose docks at the bottom of the messages screen, like a real input */
  .msg-head { padding: 22px 12px 12px; }
  .msg-thread { padding: 12px 14px 12px; }
  .bubble { font-size: 14px; }
  .msg-input { display: none; }
  .compose { position: static; flex: none; margin: 0 10px 10px; width: auto; padding: 10px 10px 8px; gap: 8px; border-radius: 22px;
    background: var(--surface-2); border: 1px solid var(--line); box-shadow: none; }
  .compose .card-head { display: none; }
  .cmp-thread { display: none !important; }
  .quick { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 0 2px; }
  .quick::-webkit-scrollbar { display: none; }
  .quick button { flex: none; white-space: nowrap; font-size: 12px; padding: 6px 10px; }
  .cmp-form input { padding: 9px 12px; font-size: 14px; }
  .cmp-form button { width: 38px; height: 38px; }
  .cmp-foot { font-size: 11px; padding-left: 4px; }
  .deliv { margin-top: 10px; }
  .seg button { font-size: 12px; padding: 6px 11px; }
  .deliv-note { font-size: 12px; min-height: 0; margin-top: 6px; }
  .beat-texts .copy > p { display: none; }
  /* dashboard + timeline */
  .dash { width: 100%; zoom: .94; }
  .tl { width: 100%; }
  .cover-inner { min-height: calc(100dvh - var(--top-h) - 30px); }
  .cover-strip { display: none; }
  .tally { grid-template-columns: 1fr; gap: 10px; }
  .tally-item { display: flex; align-items: baseline; gap: 12px; padding: 16px 18px; text-align: left; }
  .tally-item span { margin-top: 0; }
  .btn.lg { width: 100%; }
  /* floating controls */
  .controls { padding: 0 16px env(safe-area-inset-bottom, 0px); gap: 12px; border-top: none;
    background: linear-gradient(to top, var(--bg) 55%, color-mix(in srgb, var(--bg) 0%, transparent)); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .step-label { font-size: 12px; min-width: 30px; }
  #backBtn { width: 46px; height: 46px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); justify-content: center; }
  #backBtn .lbl { display: none; }
  #nextBtn { flex: 1; padding: 14px 18px; font-size: 15.5px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}