/* =============================================================================
   AliceLoveGrowth — 7th phone screen. Staging mockup.

   Chrome, tokens and cqw sizing mirror rebuild/manychat-base, and the screen uses
   the site's existing dark feature treatment (base.css:8755) so this transplants
   into .feature-phone-stage with the selectors intact:
       .demo-phone-screen { border-radius: 34px; background: #050505; color: #fff }
       muted rgba(255,255,255,.58)   accent #c9a9f0   positive #5fd6a8
   The top bar stays WHITE on dark — it is browser chrome, not app.

   ⛔ THE RULE: the STATIC state of every element IS its finished state. Animations
      supply only the `from`. "No animation" == "finished", which is what makes
      freeze-on-screen and reduced-motion both correct. Never fill-mode `both` on a
      keyframe set whose last frame is not the finished state — use `backwards`.

   SCREEN 1 (Jase, 2026-08-10): the screen is COMPLETE ON LOAD. Nothing fades or
   slides in. Exactly three things move:
       0.35s  the switch goes OFF -> ON
       0.95s  four agents spawn into the four empty boxes
       2.25s  the competitor is typed in
   ⛔ No hand-pointer cue anywhere — it was removed on purpose, don't put it back.

   SCREEN 2 does not auto-advance — the lab buttons drive it, and each button
   restarts playback. Its grid is PRELOADED; only the published thumbnails arrive
   one by one, with the clicks chart growing on the same beat. Both screens share
   the 0 -> 4.6s window, which is harmless because only one panel is ever visible.
   ========================================================================== */

:root {
  --black: #000;
  --white: #fff;
  --yellow: #fff0b2;
  /* ⛔ The NAME is historical. Jase swapped the bright pink for green
     site-wide on 2026-08-19 ("too pink"); the variable is still called
     --magenta so the ~50 usages did not all have to be touched, and so
     going back is one line. Value = the green already used by the
     "PAID" toast. */
  --magenta: #00a63f;
  --purple: #7b34ce;
  --lav: #c9a9f0;
  --ok: #5fd6a8;
  --sky: #4aa8ff;
  --dim: rgba(255, 255, 255, .58);
  --faint: rgba(255, 255, 255, .4);
  --line: rgba(255, 255, 255, .14);
  /* The 21st.dev light theme: bgHex #f3f2ef, fallback ink #6e6e73. */
  --card: #f4f3f0;
  --card-ink: #6e6e73;
  --gsc: #4285f4;
  --display: "Figtree", Arial, sans-serif;
  --mono: "DM Mono", ui-monospace, monospace;

  --alg-total: 4.6s;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--yellow);
  background-image:
    linear-gradient(rgba(0, 0, 0, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, .045) 1px, transparent 1px);
  background-size: 46px 46px;
  color: var(--black);
  font-family: var(--display);
  -webkit-font-smoothing: antialiased;
}

/* ── lab chrome (not part of the site) ─────────────────────────────────── */

.lab-bar { position: sticky; z-index: 20; top: 0; border-bottom: 1px solid rgba(0, 0, 0, .12); background: rgba(255, 255, 255, .82); backdrop-filter: blur(10px); }
.lab-bar-in { display: flex; max-width: 1180px; margin: 0 auto; align-items: baseline; gap: 12px; padding: 13px 22px; }
.lab-bar strong { font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.lab-bar span { color: #6b6472; font: 500 11px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; }

.lab-dock { position: sticky; z-index: 20; bottom: 0; padding: 16px 22px 18px; border-top: 1px solid rgba(0, 0, 0, .12); background: rgba(255, 255, 255, .9); backdrop-filter: blur(10px); }
.lab-ruler { position: relative; max-width: 1180px; height: 26px; margin: 0 auto 12px; border-radius: 99em; background: rgba(0, 0, 0, .07); overflow: hidden; }
.lab-ruler-fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 99em; background: rgba(123, 52, 206, .22); }
.is-running .lab-ruler-fill { animation: alg-playhead var(--alg-total) linear both; }
.lab-mark { position: absolute; top: 50%; left: calc(var(--at) * 1%); padding-left: 9px; translate: 0 -50%; border-left: 1px solid rgba(0, 0, 0, .28); color: #6b6472; font: 500 10px/1.9 var(--mono); letter-spacing: .05em; text-transform: uppercase; pointer-events: none; }
@keyframes alg-playhead { from { width: 0; } to { width: 100%; } }

.lab-btns { display: flex; max-width: 1180px; margin: 0 auto; align-items: center; gap: 9px; flex-wrap: wrap; }
.lab-btns button { border: 1px solid rgba(0, 0, 0, .2); border-radius: 99em; padding: 9px 17px; background: var(--white); color: var(--black); cursor: pointer; font: 500 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.lab-btns button:hover { border-color: var(--black); }
.lab-btns button.is-primary { border-color: var(--black); background: var(--black); color: var(--white); }
.lab-btns button[aria-pressed="true"] { border-color: var(--purple); background: var(--purple); color: var(--white); }
.lab-time { margin-left: auto; color: #6b6472; font: 500 11px/1 var(--mono); }
.lab-note { max-width: 1180px; margin: 11px auto 0; color: #8a8394; font: 400 11.5px/1.5 var(--display); }
.lab-note code { font: 400 11px/1 var(--mono); }

/* ── the section, as it sits on the real page ──────────────────────────── */

.feature-story { padding: 54px 22px 42px; }
.feature-sticky { display: grid; max-width: 1180px; margin: 0 auto; align-items: center; gap: clamp(28px, 5vw, 76px); grid-template-columns: 1fr; }
/* The phone column must be DEFINITE — with `auto`, a child's `width:min(380px,100%)`
   resolves against an indefinite width, falls back to min-content and collapses. */
@media (min-width: 900px) { .feature-sticky { grid-template-columns: minmax(0, 1fr) 380px; } }

.feature-progress { display: flex; gap: 7px; margin-bottom: 26px; }
.feature-progress i { width: 30px; height: 3px; border-radius: 99em; background: rgba(0, 0, 0, .17); }
.feature-progress i.is-active { background: var(--black); }
.feature-slide h2 { margin: 0 0 16px; font: 900 clamp(40px, 6.4vw, 74px)/.94 var(--display); letter-spacing: -.035em; }
.feature-slide p { max-width: 32ch; margin: 0; font-size: clamp(15px, 1.5vw, 18.5px); line-height: 1.5; }
.feature-media { display: grid; justify-items: center; }

/* ── phone, dark ───────────────────────────────────────────────────────── */

.alice-demo-phone { position: relative; z-index: 1; width: 100%; max-width: 380px; aspect-ratio: 43 / 92; padding: 7px; border-radius: 44px; background: #0e0d11; box-shadow: 0 30px 80px rgba(0, 0, 0, .3); container-type: inline-size; }
/* The real site's MOBILE COVERFLOW geometry (base.css:9117) — 14% narrower but a
   third shorter, so a width-driven cqw layout cannot just scale into it. */
.alice-demo-phone.is-compact { max-width: 326px; aspect-ratio: 16 / 25; }
.phone-hardware { position: absolute; display: grid; gap: 8px; }
.phone-hardware i { display: block; width: 3px; border-radius: 99em; background: #26232b; }
.phone-hardware-left { top: 108px; left: -3px; }
.phone-hardware-left i:first-child { height: 26px; }
.phone-hardware-left i { height: 44px; }
.phone-hardware-right { top: 148px; right: -3px; }
.phone-hardware-right i { height: 68px; }

.demo-phone-screen {
  position: relative;
  z-index: 1;
  display: flex;
  height: 100%;
  flex-direction: column;
  /* ⛔ NO padding here. `overflow:hidden` clips at the PADDING box, so side padding
     becomes a 20px window onto the next panel. Panels own their gutters. */
  padding: 0;
  border-radius: 37px;
  background: #050505;
  color: var(--white);
  overflow: hidden;
}
.demo-phone-topline { display: flex; flex: none; padding: 2.5cqw 5.4cqw; align-items: center; justify-content: center; border-bottom: 1px solid rgba(0, 0, 0, .1); background: var(--white); color: #3d3a42; font: 500 2.8cqw/1 var(--mono); letter-spacing: .05em; }

/* ── the two-panel track ───────────────────────────────────────────────── */
/* No auto-advance while screen 1 is under review — the lab buttons drive it. */

.alg-track { display: flex; width: 200%; flex: 1 1 auto; min-height: 0; transform: translateX(var(--alg-x, 0)); }
.alg-panel { display: flex; width: 50%; flex: 0 0 50%; flex-direction: column; padding: 4.2cqw 5cqw 4.6cqw; }

@keyframes alg-pop { from { opacity: 0; scale: .55; } }
@keyframes alg-fade-in { from { opacity: 0; } }
@keyframes alg-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes demo-scene-reveal { from { opacity: 0; translate: 0 3cqw; scale: .985; } }

/* ── SCREEN 1 ──────────────────────────────────────────────────────────── */

/* 1 · the switch — the only control that moves */
.alg-toggle-row { display: flex; align-items: center; gap: 3cqw; padding: 3.4cqw; border: 1px solid var(--line); border-radius: 2.6cqw; background: rgba(255, 255, 255, .05); }
.alg-toggle-copy { flex: 1; }
.alg-toggle-copy strong { display: block; font-size: 3.4cqw; font-weight: 700; }
.alg-toggle-copy small { display: block; margin-top: .9cqw; color: var(--dim); font-size: 2.75cqw; }
.alg-switch { position: relative; width: 14.4cqw; height: 7.6cqw; flex: none; border-radius: 99em; background: #0f7a53; }
.alg-switch-knob { position: absolute; z-index: 2; top: .9cqw; left: .9cqw; width: 5.8cqw; height: 5.8cqw; border-radius: 50%; background: var(--white); translate: 6.8cqw 0; box-shadow: 0 .3cqw .8cqw rgba(0, 0, 0, .3); }
.alg-switch b { position: absolute; top: 50%; translate: 0 -50%; font: 500 2.1cqw/1 var(--mono); letter-spacing: .06em; }
.alg-switch-off { right: 1.9cqw; opacity: 0; color: rgba(255, 255, 255, .78); }
.alg-switch-on { left: 2.2cqw; opacity: 1; color: var(--white); }

/* 2 · four empty boxes; the agents land in them */
.alg-agents { margin-top: 4.2cqw; }
.alg-agents-label { display: block; color: var(--faint); font: 500 2.15cqw/1 var(--mono); letter-spacing: .13em; }
.alg-agents-row { display: flex; gap: 1.8cqw; margin-top: 2.4cqw; }
.alg-agents-row b {
  display: flex;
  /* The box is FIXED and present from the start — the agent spawns INTO it, so the
     box must not resize when its contents arrive. */
  height: 15.4cqw;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.2cqw;
  border: 1px solid var(--line);
  border-radius: 2.2cqw;
  background: rgba(255, 255, 255, .04);
}
.alg-agents-row svg { width: 7cqw; height: 8.1cqw; }
.alg-agents-row u { color: rgba(255, 255, 255, .84); font: 500 2.2cqw/1 var(--mono); text-decoration: none; }

/* 3 · the competitor, typed */
.alg-scan { display: flex; align-items: center; gap: 3cqw; margin-top: 4.2cqw; padding: 3cqw 3.2cqw 3cqw 3.6cqw; border: 1px solid var(--line); border-radius: 2.6cqw; background: rgba(255, 255, 255, .05); }
.alg-scan-field { flex: 1; min-width: 0; }
.alg-scan-field small { display: block; color: var(--faint); font: 500 2.15cqw/1 var(--mono); letter-spacing: .12em; }
/* ⛔ inline-block, NOT block. The caret rides `left: 0 -> 100%`, so the box has to be
   exactly as wide as the text or the caret runs off past the last character. */
.alg-typed { position: relative; display: inline-block; margin-top: 1.2cqw; font: 700 3.5cqw/1.2 var(--display); }
.alg-typed > span { display: inline-block; }
.alg-caret { position: absolute; top: 8%; left: 100%; width: .4cqw; height: 84%; margin-left: .3cqw; background: var(--magenta); opacity: 0; }
.alg-scan-go { position: relative; flex: none; padding: 2.1cqw 3cqw; border-radius: 1.8cqw; background: var(--white); color: var(--black); font: 500 2.4cqw/1 var(--mono); letter-spacing: .07em; }
.alg-scan-done { display: flex; align-items: center; gap: 2cqw; margin: 2.8cqw 0 0; color: rgba(255, 255, 255, .84); font: 600 3cqw/1 var(--display); }
.alg-scan-done i { display: grid; width: 5cqw; height: 5cqw; flex: none; place-items: center; border-radius: 50%; background: var(--ok); color: #04170f; font: 500 2.6cqw/1 var(--display); font-style: normal; }

/* 4 · the 21st.dev cloud, in a white card.
   Their light theme is bgHex #f3f2ef with the marks in their own brand colours and
   depth read as a fade TOWARD the background. On black that fade just turns things
   grey, which is why it looked wrong — the card is what makes the effect work. */
/* ⛔ The CARD takes all the leftover height; the circle centres inside it. Do NOT
   square the card off to hug the sphere — that pushes the slack out into the black
   above it, which reads as a hole. Slack inside a flat white card reads as padding,
   which is exactly what 21st.dev's containerProps paddingTop is. */
.alg-loop { display: flex; flex: 1; min-height: 0; flex-direction: column; margin-top: 4cqw; padding: 3.4cqw 3.4cqw 3cqw; border-radius: 4cqw; background: var(--card); }
.alg-cloud { position: relative; width: 100%; flex: 1; min-height: 0; }
.alg-orb { position: absolute; top: 0; left: 0; display: grid; width: 11.6cqw; height: 11.6cqw; place-items: center; will-change: transform, opacity; }
/* ⛔ No white circle tile. 21st.dev renders the bare mark — the tiles were the
   "sloppy" part. The marks carry their own brand hex in the SVG file. */
.alg-orb img,
.alg-orb svg { width: 100%; height: 100%; object-fit: contain; }
.alg-cloud-cap { margin: 1.6cqw 0 0; color: var(--card-ink); font: 500 2.4cqw/1 var(--mono); letter-spacing: .14em; text-align: center; }

/* ── SCREEN 2 — parked, renders complete ───────────────────────────────── */

.alg-month-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 3cqw; }
.alg-month-head small { display: block; color: var(--faint); font: 500 2.35cqw/1 var(--mono); letter-spacing: .12em; }
.alg-month-head strong { display: block; margin-top: 1.4cqw; font: 800 4.3cqw/1 var(--display); letter-spacing: -.025em; }
.alg-counter { text-align: right; }
.alg-count { display: block; height: 1em; font: 800 7cqw/1 var(--display); letter-spacing: -.03em; overflow: hidden; }
.alg-count i { display: block; height: 1em; font-style: normal; line-height: 1; translate: 0 -30em; }
.alg-counter small { display: block; margin-top: .7cqw; color: var(--faint); font: 500 2.1cqw/1 var(--mono); letter-spacing: .1em; }

.alg-week { display: grid; margin-top: 3.4cqw; grid-template-columns: repeat(7, 1fr); }
.alg-week span { color: var(--faint); font: 500 2.1cqw/1 var(--mono); text-align: center; }

/* A real content calendar: straight grid, hairline rules, curve only on the image.
   ⛔ Rows are FIXED. Letting them stretch made the cells long and weird. */
.alg-grid { display: grid; flex: none; margin-top: 1.8cqw; border-top: 1px solid var(--line); border-left: 1px solid var(--line); grid-auto-rows: 11.4cqw; grid-template-columns: repeat(7, 1fr); }
.alg-cell { display: flex; min-width: 0; padding: 1cqw 1cqw 1.1cqw; flex-direction: column; gap: .8cqw; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; }
.alg-cell.is-blank { background: rgba(255, 255, 255, .022); }
.alg-cell b { color: var(--faint); font: 500 1.9cqw/1 var(--mono); }
.alg-cell-img { display: block; flex: 1; border-radius: 1cqw; background: #14131a center/cover no-repeat; }
/* `line-clamp` only handles the VERTICAL overflow — a single word wider than the
   cell ("Transmission") still gets sliced off at the edge, so let it break. */
.alg-cell u { display: -webkit-box; flex: 1; color: rgba(255, 255, 255, .72); font: 500 1.9cqw/1.22 var(--display); text-decoration: none; overflow: hidden; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
/* Ring only, no tint — a wash over the cell greys out the thumbnail underneath. */
.alg-cell.is-today { box-shadow: inset 0 0 0 1px var(--lav); }
.alg-cell.is-today b { color: var(--lav); }

.alg-legend { display: flex; justify-content: center; gap: 3.6cqw; margin: 2.4cqw 0 0; }
.alg-legend b { display: flex; align-items: center; gap: 1.4cqw; color: var(--faint); font: 500 2cqw/1 var(--mono); }
.alg-legend i { width: 2.2cqw; height: 2.2cqw; border-radius: .5cqw; }
.alg-legend-live { background: #6d6a78; }
.alg-legend-draft { border: 1px dashed rgba(255, 255, 255, .45); }

.alg-stats { display: flex; gap: 2.4cqw; margin-top: 3.4cqw; }
.alg-stat { flex: 1; padding: 2.6cqw 3cqw; border: 1px solid var(--line); border-radius: 2.2cqw; background: rgba(255, 255, 255, .04); }
.alg-stat small { display: block; color: var(--faint); font: 500 2.05cqw/1 var(--mono); letter-spacing: .1em; }
.alg-stat strong { display: flex; align-items: baseline; gap: 1.4cqw; margin-top: 1.5cqw; font: 800 5.2cqw/1 var(--display); letter-spacing: -.02em; }
.alg-up { color: var(--ok); font: 500 2.5cqw/1 var(--display); font-style: normal; }

/* Clicks — a search-console chart on the SAME white card as the cloud, so the two
   screens share one "this is real reporting" surface. */
.alg-clicks { display: flex; flex: 1; min-height: 0; flex-direction: column; margin-top: 3.4cqw; padding: 2.8cqw 3.2cqw 2.4cqw; border-radius: 2.6cqw; background: var(--card); }
.alg-clicks-key { display: flex; align-items: center; gap: 1.5cqw; color: #5f6368; font: 500 2.35cqw/1 var(--display); }
.alg-clicks-key i { width: 2.6cqw; height: 2.6cqw; flex: none; border-radius: .4cqw; background: var(--gsc); }
.alg-clicks-plot { display: flex; flex: 1; min-height: 0; gap: 1.8cqw; margin-top: 2.4cqw; }
/* Zero-height labels so space-between lands each one exactly ON its gridline
   instead of half a line-height off it. */
.alg-clicks-y { display: flex; flex: none; flex-direction: column; justify-content: space-between; color: #9aa0a6; font: 400 1.85cqw/0 var(--display); text-align: right; }
.alg-clicks-y b { display: block; height: 0; font-weight: 400; }
.alg-clicks-bars { position: relative; display: flex; flex: 1; align-items: flex-end; gap: .85cqw; border-bottom: 1px solid rgba(0, 0, 0, .16); }
.alg-clicks-bars::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, .1) 0 1px, transparent 1px 25%); pointer-events: none; }
.alg-clicks-bars i { position: relative; height: calc(var(--h) * 1%); flex: 1; min-width: 0; background: var(--gsc); transform-origin: bottom; }
.alg-clicks-x { display: flex; justify-content: space-between; margin-top: 1.4cqw; padding-left: 7cqw; color: #9aa0a6; font: 400 1.85cqw/1 var(--display); }

.alg-outcome { margin-top: 3.4cqw; }
.demo-outcome { display: flex; min-height: 12.6cqw; align-items: center; justify-content: center; gap: 3cqw; border-radius: 2.6cqw; color: var(--white); }
.outcome-magenta { background: var(--magenta); }
.outcome-check { display: grid; width: 6.4cqw; height: 6.4cqw; place-items: center; border: 1px solid rgba(255, 255, 255, .7); border-radius: 50%; font-size: 3.1cqw; }
.demo-outcome strong { display: block; margin-bottom: .9cqw; font: 600 2.9cqw/1 var(--mono); }
.demo-outcome small { display: block; font: 500 2.3cqw/1 var(--mono); opacity: .74; }

/* =============================================================================
   THE BEAT SHEET — every delay lives here, nowhere else.
   Screen 1 only. Three moves, 4.6s, then it holds on the finished screen.
   ========================================================================== */

/* 0.35s · the switch */
.is-running .alg-switch      { animation: alg-switch-bg .36s ease .35s backwards; }
.is-running .alg-switch-knob { animation: alg-switch-knob .36s cubic-bezier(.4, 1.6, .5, 1) .35s backwards; }
.is-running .alg-switch-on   { animation: alg-fade-in .24s ease .5s backwards; }
.is-running .alg-switch-off  { animation: alg-fade-out .2s ease .35s both; }
@keyframes alg-switch-bg   { from { background: rgba(255, 255, 255, .18); } }
@keyframes alg-switch-knob { from { translate: 0 0; } }

/* 0.95s · the agents land in the boxes, one after another */
.is-running .alg-agents-row svg,
.is-running .alg-agents-row u {
  animation: alg-pop .44s cubic-bezier(.2, 1.5, .4, 1) backwards;
  animation-delay: calc(.95s + (var(--i) * .22s));
}

/* 2.25s · the competitor is typed */
.is-running .alg-scan         { animation: alg-field-focus 1.62s linear 2.25s backwards; }
.is-running .alg-typed > span { animation: alg-type 1.4s steps(19, end) 2.35s backwards; }
.is-running .alg-caret        { animation: alg-caret-travel 1.4s steps(19, end) 2.35s backwards,
                                           alg-caret-blink .35s steps(1) 2.05s 5 backwards; }
/* Reveal by clip-path, not width — no reflow, and the caret can ride the edge. */
@keyframes alg-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes alg-caret-travel { from { left: 0; } to { left: 100%; } }
@keyframes alg-caret-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .16; } }
/* The field reads as focused for exactly as long as something is being typed into
   it, then hands back to the static (unfocused) state. */
@keyframes alg-field-focus {
  0%, 92% { border-color: rgba(0, 166, 63, .55); background: rgba(255, 255, 255, .08); }
  100%    { border-color: var(--line); background: rgba(255, 255, 255, .05); }
}

/* screen 2 — the grid is PRELOADED. Only the published thumbnails arrive one by
   one, and the clicks chart grows on exactly the same beat. Nothing else moves:
   no cell cascade, no counter roll, no header reveal. */
.is-running .alg-cell-img {
  animation: alg-pop .46s cubic-bezier(.2, 1.4, .4, 1) backwards;
  animation-delay: calc(.45s + (var(--i) * .13s));
}
.is-running .alg-clicks-bars i {
  animation: alg-bar-grow .5s cubic-bezier(.3, .9, .3, 1) backwards;
  animation-delay: calc(.45s + (var(--i) * .13s));
}
@keyframes alg-bar-grow { from { transform: scaleY(0); } }

/* =============================================================================
   MOBILE COVERFLOW (.is-compact — the real site's .feature-mobile-phone-stage)

   The phone goes 380x813 -> 326x509. Width drops 14%, height drops 37%, so a
   cqw layout CANNOT simply scale into it: everything shrinks by width while the
   height budget collapses, and whatever is `flex:1` eats the whole shortfall.

   ⛔ THE CLOUD IS NEVER ADAPTED. One radius bounded by min(w,h) means a short box
      yields a SMALLER circle, never a squashed one — so the 21st.dev structure is
      safe by construction. Do not add a compact radius, a compact tile count, or a
      per-axis radius "to fill the short box". Everything else gives way instead.
   ========================================================================== */

/* Screen 1 — buy the cloud card its height back from the rhythm above it. */
.is-compact .alg-agents,
.is-compact .alg-scan     { margin-top: 3cqw; }
.is-compact .alg-agents-row b { height: 13cqw; }
.is-compact .alg-agents-row svg { width: 6cqw; height: 7cqw; }
.is-compact .alg-loop     { margin-top: 3cqw; }
/* The first thing to go: it is also the line that claims briefs exist before the
   competitor has been typed, so the short screen loses nothing true. */
.is-compact .alg-scan-done { display: none; }

/* Screen 2 — the calendar and the chart both need real estate; the legend does not. */
.is-compact .alg-legend { display: none; }
.is-compact .alg-grid { grid-auto-rows: 9.6cqw; }
.is-compact .alg-cell u { -webkit-line-clamp: 2; }
.is-compact .alg-stats { margin-top: 2.6cqw; }
.is-compact .alg-stat { padding: 2cqw 2.6cqw; }
.is-compact .alg-clicks { margin-top: 2.6cqw; }
/* Three gridline labels instead of five — the lines all stay, so the chart still
   reads at 5K resolution without stacking type on top of itself. */
.is-compact .alg-clicks-y b:nth-child(even) { visibility: hidden; }
.is-compact .alg-outcome { margin-top: 2.6cqw; }
.is-compact .demo-outcome { min-height: 10.5cqw; }

/* Reduced motion: nothing animates. Static == finished, so the screen is already
   the frame we would have animated to. This is the rule the real site is missing. */
@media (prefers-reduced-motion: reduce) {
  .is-running * { animation: none !important; }
}

/* =============================================================================
   WEBSITE EMBED (?embed=1) — the site loads this document in an iframe inside its
   own phone card, so this file drops the lab chrome and its own phone shell and
   lets the card be the phone. Nothing above this block changes.
   ⛔ The transform transition is what slides screen 1 -> screen 2 on the site. The
      lab keeps its buttons; the embed drives `--alg-x` (see alg.js).
   ========================================================================== */

html.is-embed,
html.is-embed body { width: 100%; height: 100%; overflow: hidden; }
html.is-embed body { background: #050505; background-image: none; }

.is-embed .lab-bar,
.is-embed .lab-dock,
.is-embed .feature-copy,
.is-embed .phone-hardware { display: none; }

.is-embed .feature-story,
.is-embed .feature-sticky,
.is-embed .feature-media,
.is-embed .alice-demo-phone { width: 100%; max-width: none; height: 100%; }

.is-embed .feature-story { padding: 0; }
.is-embed .feature-sticky,
.is-embed .feature-media { display: block; }

/* The site's card already draws the phone — this one must not draw a second one. */
.is-embed .alice-demo-phone { aspect-ratio: auto; padding: 0; border-radius: 0; background: #050505; box-shadow: none; }
.is-embed .demo-phone-screen { border-radius: 0; }

.is-embed .alg-track { transition: transform .9s cubic-bezier(.65, 0, .35, 1); }
@media (prefers-reduced-motion: reduce) { .is-embed .alg-track { transition: none; } }