/* ==========================================================================
   AQTHEVISION — Home v2
   The front door in Apple's discipline and AQ's own brand: product tiles, one
   line under each name, two actions, and the product shown working. AQ has no
   phone or laptop to photograph, so every tile shows its team at work instead:
   a short commercial built from HTML rather than video. Real text, no image
   bytes, and it can be read in any language the page is.

   Loaded by public/home-v2.html only. Every colour, radius and curve comes
   from aq.css tokens; nothing here redefines a brand value.
   ========================================================================== */

/* ── 1. Type: nine sizes across every width ────────────────────────────────
   The layout gate (premium F2) counts distinct computed font sizes over
   360/390/768/1440 px TOGETHER and fails past ten. A clamp() headline alone
   yields four sizes, so nothing on this page is fluid: two tiers that share
   rungs, snapping at 735px. The union is 12 14 16 19 24 32 40 56 80. */
:root {
  --fs-micro: 12px;   /* labels, times, captions */
  --fs-ui: 14px;      /* reel text, nav, footer links */
  --fs-btn: 16px;     /* buttons, inputs, lists */
  --fs-body: 19px;    /* prose: AQ Noor is never set below 18px */
  --fs-line: 19px;    /* the line under a name */
  --fs-card: 24px;    /* card titles, at every width */
  --fs-h3: 24px;
  --fs-h2: 32px;
  --fs-h1: 40px;
}
@media (min-width: 735px) {
  :root { --fs-line: 24px; --fs-h3: 40px; --fs-h2: 56px; --fs-h1: 80px; }
}

/* Keyboard focus scrolled into view clears the fixed nav (65px on phones). */
html { scroll-padding-top: 80px; }

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
/* The drawer's 18px is off this page's scale; closed it is hidden anyway. */
.drawer a { font-size: var(--fs-body); }

/* ── 2. Frosted navigation ─────────────────────────────────────────────────
   Always glass, not only once stuck: content scrolls under a material, the
   way Apple's header works. The tint is heavy (80%) because a paper-white
   note scrolls beneath it in the evolution section; at 80% the links stay
   above 10:1 even over that. */
.nav {
  padding-top: 10px; padding-bottom: 10px;
  background: var(--bg);
  border-bottom: 1px solid var(--line-soft);
}
@supports ((backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))) {
  .nav, .nav.stuck {
    background: color-mix(in srgb, var(--bg) 80%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
  }
}
.nav.stuck { padding-top: 10px; padding-bottom: 10px; border-bottom-color: var(--line-soft); }
.nav-links a { color: var(--text); }
@media (hover: hover) and (pointer: fine) {
  .nav-links a:hover { color: var(--gold); }
}
@media (prefers-reduced-transparency: reduce) {
  .nav, .nav.stuck { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ── 3. Tiles ───────────────────────────────────────────────────────────────
   Two surfaces alternate: open tiles sit on the page itself, lifted tiles are
   panels one rung up. 12px seams between sections, like Apple's grid. */
/* minmax(0, 1fr): no section's content can widen the page's one column. */
main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }

.tile {
  position: relative;
  padding: 72px 20px 48px;
  text-align: center;
  background: var(--bg);
}
.tile-alt { background: var(--bg-2); }
@media (min-width: 735px) {
  .tile { padding: 104px 40px 72px; }
  .tile.tile-alt { margin: 0 12px; border-radius: var(--r-lg); }
}
.tile-hero { padding-top: 112px; }
@media (min-width: 735px) { .tile-hero { padding-top: 136px; } }

.tile-kicker {
  font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; line-height: 1.4;
  color: var(--gold);
  max-width: none; margin: 0 auto 16px;
}
/* The hero's line count must not depend on which font is showing: its lines
   are fixed (three below 1069px, two above), each kept whole, and the title
   is not trimmed to cap height, because the fallback serif's cap height is
   not AQ Noor's. Worst case measured for width: "your business." in Georgia
   at 40px is ~280px, inside the 320px a 360px phone leaves. */
.hero-title {
  font-weight: 400; line-height: 1.0; letter-spacing: -0.034em;
  max-width: none; margin: 0 auto;
  text-box: normal;
}
.hero-title .ln { display: block; white-space: nowrap; }
@media (min-width: 1069px) { .br-narrow { display: none; } }
.tile-name {
  font-weight: 450; line-height: 1.06; letter-spacing: -0.026em;
  max-width: 20ch; margin: 0 auto;
  text-wrap: balance;
}
.tile-line {
  font-size: var(--fs-line); line-height: 1.4; color: var(--text);
  max-width: 34ch; margin: 16px auto 0;
  text-wrap: balance;
}
.tile-meta {
  font-size: var(--fs-body); line-height: 1.5; color: var(--text-2);
  max-width: 40ch; margin: 8px auto 0;
  text-wrap: balance;
}
.tile-note {
  font-family: var(--font-mono); font-size: var(--fs-micro); line-height: 1.6;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2);
  max-width: 60ch; margin: 20px auto 0;
}
.tile-ctas {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 12px 16px; margin-top: 28px;
}
/* The hero's line: two set lines below 1069px, one line above, the way a
   product tagline reads. */
.tile-hero .tile-line { max-width: none; margin-top: 20px; }
.tile-hero .tile-line .ln { display: block; white-space: nowrap; }
@media (min-width: 735px) { .tile-hero .tile-line { margin-top: 28px; } }
@media (min-width: 1069px) { .tile-hero .tile-line .ln { display: inline; } }
/* Two pills on one row on every phone, whichever font is showing: at 14px
   the pair needs ~274px of the 320px a 360px phone leaves, so a wider
   fallback font cannot push it onto two rows before the web font lands. */
@media (max-width: 734px) {
  .tile-ctas { gap: 10px; }
  .tile-ctas .btn { font-size: var(--fs-ui); padding-inline: 16px; letter-spacing: 0.01em; }
}

/* ── 4. Buttons ─────────────────────────────────────────────────────────────
   The primary is aq.css's gold pill. Its partner is the same pill drawn in
   outline, so the pair reads as one family. Press feedback lands on
   pointer-down and stays under 150ms. */
.btn {
  transition: background-color var(--t-fast), border-color var(--t-fast),
              color var(--t-fast), transform 120ms var(--ease-move);
}
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn-line {
  --btn-text: var(--gold);
  --btn-border: var(--gold-25);
  --btn-bg-hover: var(--gold-08);
  --btn-text-hover: var(--gold-hover);
  --btn-border-hover: var(--gold);
  border-radius: var(--r-full);
  padding-inline: 28px;
  font-weight: 600; letter-spacing: 0.04em;
}

/* ── 5. Reels: the commercials ─────────────────────────────────────────────
   Markup ships on the FINAL frame. home-v2.js adds .is-live and then turns
   each [data-at] step .on at its moment; until then a live step is hidden.

   Hidden means clipped and lowered, never faded. The contrast gates sample
   the page at an arbitrary instant, and a half-faded line measures as a
   contrast failure that comes and goes between runs. clip-path and transform
   leave every glyph at full colour whenever it is drawn at all, so the
   measurement is the same at every moment of every loop. */
.reel {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: 12px 16px;
  max-width: 1040px; margin: 48px auto 0;
  text-align: left;
}
.reel-stage {
  --st: var(--bg-2);    /* stage surface */
  --cd: var(--bg-3);    /* card surface */
  grid-column: 1 / -1;
  position: relative;
  display: grid; gap: 12px; align-content: start;
  padding: 16px;
  background: var(--st);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  font-family: var(--font-body); font-size: var(--fs-ui); line-height: 1.45;
  color: var(--text);
}
.tile-alt .reel-stage { --st: var(--bg); --cd: var(--bg-2); }
@media (min-width: 735px) { .reel-stage { padding: 28px; gap: 16px; } }

/* 44px: the row the pause control takes once home-v2.js adds it. */
.reel-cap {
  grid-column: 1; grid-row: 2;
  display: flex; align-items: center; min-height: 44px;
  font-family: var(--font-body); font-size: var(--fs-micro); line-height: 1.4;
  color: var(--text-3);
}
/* The toggle's place is held from the first paint: without JS (or under
   reduced motion) it is invisible and unfocusable, not absent, so showing it
   later moves nothing. */
.reel-toggle[hidden] { display: grid; visibility: hidden; }
.reel-toggle {
  grid-column: 2; grid-row: 2;
  display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  border-radius: 50%; border: 1px solid var(--line-hover);
  background: var(--bg-2); color: var(--text);
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast), transform 120ms var(--ease-move);
}
.reel-toggle:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) {
  .reel-toggle:hover { border-color: var(--gold-25); color: var(--gold); }
}
.reel-toggle .i-play,
.reel-toggle.is-held .i-pause { display: none; }
.reel-toggle.is-held .i-play { display: block; }

/* The timeline mechanics. Three kinds of step:
   - a reveal (the default): rises into place behind a mask;
   - .w-lit: always drawn, only changes state (a stop lighting, a bar filling);
   - .w-swap: two layers in one cell, the second wiping over the first;
   - .w-type: its words stream in one after another (split by home-v2.js). */
.reel [data-at]:not(.w-lit, .w-type, .w-swap) {
  clip-path: inset(-16px);
  transition: transform var(--t-slow), clip-path var(--t-slow);
}
.reel.is-live [data-at]:not(.w-lit, .w-type, .w-swap):not(.on) {
  transform: translateY(12px);
  clip-path: inset(calc(100% + 16px) -16px -16px -16px);
}
/* End of a loop: every step retracts the way it came, together and quickly. */
.reel.rewind [data-at],
.reel.rewind [data-at] *,
.reel.rewind .w-meter i {
  transition-duration: 0.45s;
  transition-timing-function: var(--ease-move);
  transition-delay: 0s;
}
/* Boot below the fold: empty the reel without animating it. */
.reel.snap *, .reel.snap *::before, .reel.snap *::after { transition: none !important; }

/* Streaming words. */
.w-type .wd {
  display: inline-block;
  clip-path: inset(-4px);
  transition: transform var(--t-slow), clip-path var(--t-slow);
  transition-delay: var(--d, 0ms);
}
.reel.is-live .w-type:not(.on) .wd {
  transform: translateY(8px);
  clip-path: inset(calc(100% + 4px) -4px -4px -4px);
  transition-delay: 0ms;
}

/* Swaps: the final frame shows the after-state. */
.w-swap { display: inline-grid; justify-items: start; }
.w-swap > * {
  grid-area: 1 / 1;
  transition: clip-path var(--t-slow);
}
.w-swap > .s-a { clip-path: inset(0 0 0 100%); }
.w-swap > .s-b { clip-path: inset(-4px); }
.reel.is-live .w-swap:not(.on) > .s-a { clip-path: inset(-4px); }
.reel.is-live .w-swap:not(.on) > .s-b { clip-path: inset(0 100% 0 0); }

/* ── 6. Reel parts, shared ─────────────────────────────────────────────── */
.w-label {
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold);
}
.w-name {
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: 0.08em; color: var(--gold);
}
.w-role { font-size: var(--fs-micro); color: var(--text-2); }
.w-text { font-size: var(--fs-ui); color: var(--text); }
.w-text b { font-weight: 600; color: var(--gold); }
.w-who { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }

.w-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  min-width: 0;
  padding: 14px 16px;
  background: var(--cd);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.w-amount {
  font-family: var(--font-display); font-size: var(--fs-h3); line-height: 1.1;
  letter-spacing: -0.01em; color: var(--text);
}

.w-status { font-size: var(--fs-micro); line-height: 1.3; }
.w-status > span {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--line-hover); border-radius: var(--r-full);
  background: var(--cd); color: var(--text-2);
  white-space: nowrap;
}
.w-status > .s-b { color: var(--gold); border-color: var(--gold-25); }
.w-status > .s-need { color: var(--gold); border-color: var(--gold-25); border-style: dashed; }

/* A working pulse. Its ring is never text, so it may fade. */
.w-dot {
  position: relative; flex: none;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold);
}
.w-dot::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: var(--gold);
  animation: w-pulse 1.6s var(--ease-move) infinite;
}
@keyframes w-pulse {
  from { transform: scale(1); opacity: 0.6; }
  to   { transform: scale(2.8); opacity: 0; }
}
.reel:not(.is-playing) .w-dot::after { animation-play-state: paused; }

.w-chip {
  font-size: var(--fs-micro); line-height: 1.3;
  padding: 4px 10px;
  border: 1px solid var(--line-hover); border-radius: var(--r-full);
  background: var(--cd); color: var(--text);
  white-space: nowrap;
}
.w-chip.w-swap { padding: 0; border: 0; background: none; }
.w-chip.w-swap > span {
  padding: 4px 10px; border-radius: var(--r-full);
  border: 1px dashed var(--gold-25); background: var(--cd); color: var(--gold);
}
.w-chip.w-swap > .s-b { border-style: solid; }

/* Chat. The agent writes on the left in gold-tinted glass, the customer
   answers on the right, as on the current front door's samples. */
.w-thread { display: flex; flex-direction: column; gap: 10px; }
.w-bub {
  max-width: 88%;
  padding: 10px 14px;
  border-radius: var(--r-md);
  font-size: var(--fs-ui); line-height: 1.45; color: var(--text);
}
.w-bub.out {
  align-self: flex-start;
  background: var(--cd);
  background: color-mix(in srgb, var(--gold) 12%, var(--cd));
  border: 1px solid var(--gold-20);
  border-bottom-left-radius: var(--r-xs);
}
.w-bub.in {
  align-self: flex-end;
  background: var(--cd);
  border: 1px solid var(--line);
  border-bottom-right-radius: var(--r-xs);
}
.w-by { display: block; margin-bottom: 4px; font-size: var(--fs-micro); color: var(--text-2); }
.w-bub.out .w-by { color: var(--gold); }
/* Bubbles grow from their tail corner. */
.reel.is-live .w-bub.out[data-at]:not(.on) {
  transform: translateY(6px) scale(0.96); transform-origin: 0 100%;
  clip-path: inset(100% 100% 0 0 round 16px);
}
.reel.is-live .w-bub.in[data-at]:not(.on) {
  transform: translateY(6px) scale(0.96); transform-origin: 100% 100%;
  clip-path: inset(100% 0 0 100% round 16px);
}

/* Someone is typing: an overlay on the spot the next bubble will take, so
   it never moves the layout. The finished frame has no one typing. */
.w-hold { position: relative; display: flex; flex-direction: column; }
.w-typing {
  position: absolute; left: 0; top: 0;
  display: inline-flex; gap: 4px; align-items: center;
  padding: 14px 16px;
  background: var(--cd); border: 1px solid var(--line);
  border-radius: var(--r-md); border-bottom-left-radius: var(--r-xs);
}
.w-typing i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--text-2);
  animation: w-bounce 1s var(--ease-move) infinite;
}
.w-typing i:nth-child(2) { animation-delay: 0.15s; }
.w-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes w-bounce { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(-4px); } }
.reel:not(.is-live) .w-typing { visibility: hidden; }
.reel:not(.is-playing) .w-typing i { animation-play-state: paused; }

/* ── 7. The night (hero) ───────────────────────────────────────────────── */
.w-dawn {
  position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(90% 55% at 50% 100%, var(--gold-12), transparent 70%);
  transition: opacity 1.6s ease;
}
.reel.is-live .w-dawn:not(.on) { opacity: 0; }
.reel-stage > :not(.w-dawn) { position: relative; }

.w-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 12px; }
.w-live { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-micro); color: var(--text-2); }

.w-rail { position: relative; height: 40px; margin: 4px 0; }
.w-rail::before {
  content: ''; position: absolute; left: 4px; right: 4px; top: 4px; height: 1px;
  background: var(--line-hover);
}
.w-fill {
  position: absolute; left: 4px; right: 4px; top: 4px; height: 1px;
  background: var(--gold);
  transform-origin: 0 50%;
  transition: transform var(--dur, 0.6s) linear;
}
.reel.is-live .w-fill:not(.on) { transform: scaleX(0); }
.w-stop {
  position: absolute; top: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.w-stop.s1 { left: 0; align-items: flex-start; }
.w-stop.s2 { left: 33.333%; translate: -50% 0; align-items: center; }
.w-stop.s3 { left: 66.667%; translate: -50% 0; align-items: center; }
.w-stop.s4 { right: 0; align-items: flex-end; }
.w-stop i {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 12px var(--gold-25);
  transition: background-color 0.4s ease, box-shadow 0.4s ease;
}
.w-stop b {
  font-family: var(--font-mono); font-weight: 400; font-size: var(--fs-micro);
  white-space: nowrap; color: var(--gold);
  transition: color 0.4s ease;
}
.reel.is-live .w-stop:not(.on) i { background: var(--line-hover); box-shadow: none; }
.reel.is-live .w-stop:not(.on) b { color: var(--text-2); }

.w-cards { display: grid; gap: 12px; }
@media (min-width: 735px) { .w-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.w-cards .w-status { margin-top: auto; padding-top: 4px; }
.w-sub {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  width: 100%; padding-top: 8px; margin-top: 2px;
  border-top: 1px solid var(--line);
}
.w-brief {
  display: grid; gap: 6px;
  padding: 16px 18px;
  background: var(--cd);
  border: 1px solid var(--gold-20);
  border-radius: var(--r-md);
}
.w-brief .w-type {
  font-family: var(--font-display); font-size: var(--fs-body); line-height: 1.45;
  color: var(--text); max-width: 60ch;
}
.w-brief .w-lead { color: var(--gold); }

/* ── 8. The Finance Employee ─────────────────────────────────────────────── */
@media (min-width: 735px) {
  .reel-finance .reel-stage { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .reel-finance .w-report { grid-column: 1 / -1; }
}
.reel-finance .w-invoice { align-self: stretch; }
.w-invoice .w-status { margin-top: auto; padding-top: 12px; }
.w-hist { display: grid; width: 100%; margin-top: 8px; border-top: 1px solid var(--line); }
.w-histrow {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.w-histrow.is-paid .w-text { color: var(--gold); }
.w-mail { font-size: var(--fs-ui); color: var(--text); }
.w-mail .w-role { display: inline-block; min-width: 56px; }
.w-compose .w-type { font-size: var(--fs-ui); line-height: 1.55; color: var(--text); }
.w-compose .w-who { width: 100%; margin-bottom: 4px; }
.w-compose .w-who .w-status { margin-left: auto; }
.w-approve {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px; width: 100%;
  margin-top: 6px; padding-top: 12px;
  border-top: 1px solid var(--line);
}
.w-need { font-size: var(--fs-micro); color: var(--gold); }
.w-tap {
  position: relative;
  padding: 6px 18px;
  border-radius: var(--r-full);
  background: var(--gold); color: var(--bg);
  font-size: var(--fs-ui); font-weight: 600;
  transition: background-color var(--t-fast), transform 120ms var(--ease-move);
}
.w-tap::after {
  content: ''; position: absolute; inset: -6px; border-radius: inherit;
  border: 1px solid var(--gold);
  opacity: 0;
}
.w-tap.on { transform: scale(0.96); background: var(--gold-active); }
.w-tap.on::after { animation: w-tap 0.7s var(--ease-move) forwards; }
@keyframes w-tap {
  from { opacity: 0.9; transform: scale(0.9); }
  to   { opacity: 0; transform: scale(1.3); }
}
.w-sent { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-micro); color: var(--text-2); }
.w-sent svg { color: var(--gold); flex: none; }
.w-report { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }

/* ── 9. The Crew ────────────────────────────────────────────────────────── */
@media (min-width: 735px) {
  .reel-crew .reel-stage { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
}
.w-phone { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.w-call { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px; }
.w-callwho { display: flex; flex-direction: column; gap: 2px; flex: 1 1 160px; min-width: 0; }
.w-ring {
  position: relative; flex: none;
  display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--gold-25); color: var(--gold);
}
.w-ring::before {
  content: ''; position: absolute; inset: -1px; border-radius: 50%;
  border: 1px solid var(--gold);
  opacity: 0;
  animation: w-ring 1.4s var(--ease-move) infinite;
}
@keyframes w-ring {
  from { opacity: 0.7; transform: scale(1); }
  to   { opacity: 0; transform: scale(1.8); }
}
.reel:not(.is-live) .w-ring::before,
.w-call:has(.w-swap.on) .w-ring::before { animation: none; }
.reel:not(.is-playing) .w-ring::before { animation-play-state: paused; }

.w-week { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.w-weekhead { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.w-days { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.w-day { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.w-day > b {
  font-family: var(--font-mono); font-weight: 400; font-size: var(--fs-micro);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2);
}
.w-day.is-sat > b { color: var(--gold); }
.w-slot {
  display: block;
  padding: 8px 10px;
  border: 1px dashed var(--line-hover); border-radius: var(--r-sm);
  font-size: var(--fs-micro); line-height: 1.3; color: var(--text-2);
}
.w-slot.is-busy { border-style: solid; border-color: var(--line); background: var(--cd); }
.w-slot.w-swap { display: grid; padding: 0; border: 0; }
.w-slot.w-swap > span {
  padding: 8px 10px; border-radius: var(--r-sm);
  border: 1px dashed var(--line-hover); color: var(--text-2);
}
.w-slot.w-swap > .s-b {
  border: 1px solid var(--gold-25);
  background: var(--cd);
  background: color-mix(in srgb, var(--gold) 14%, var(--st));
  color: var(--text);
}
.w-stat { font-size: var(--fs-ui); color: var(--text-2); }
.w-stat b { font-weight: 600; color: var(--gold); }

/* ── 10. AQ Elite ─────────────────────────────────────────────────────────── */
@media (min-width: 735px) {
  .reel-elite .reel-stage { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
}
.w-pipe { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.w-pipehead { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.w-step {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 10px;
  padding: 10px 12px;
  background: var(--cd); border: 1px solid var(--line); border-radius: var(--r-sm);
}
.w-step .w-name { grid-column: 1; }
.w-step .w-text { grid-column: 1; }
/* Right-aligned, so every "Done" ends on the same edge whatever word it
   replaced ("Working", "Designing"...). */
.w-step .w-status { grid-column: 2; grid-row: 1 / span 2; justify-self: end; justify-items: end; }
.w-post { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.w-post .w-type { font-size: var(--fs-ui); line-height: 1.55; color: var(--text); }
.w-post .w-lead {
  font-family: var(--font-display); font-size: var(--fs-card); line-height: 1.2; color: var(--text);
}
.w-art {
  position: relative;
  display: grid; place-items: center; align-content: center; gap: 8px;
  min-height: 190px;
  background: var(--cd);
  border: 1px solid var(--gold-20); border-radius: var(--r-md);
}
.w-plate {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: 150px; height: 150px; border-radius: 50%;
  border: 1px solid var(--gold-25);
  background: radial-gradient(circle, var(--gold-08), transparent 70%);
}
.w-artlabel {
  position: relative;
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold);
}
.w-arttitle {
  position: relative;
  font-family: var(--font-display); font-size: var(--fs-card); line-height: 1.1; color: var(--text);
}
.w-meterbox { display: flex; flex-direction: column; gap: 8px; }
.w-meter { position: relative; height: 4px; border-radius: 2px; background: var(--line-hover); }
.w-meter i {
  position: absolute; inset: 0; border-radius: inherit;
  background: var(--gold);
  transform-origin: 0 50%;
  transition: transform var(--dur, 0.6s) linear;
}
.reel.is-live .w-meter:not(.on) i { transform: scaleX(0); }
.w-sched { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* ── 11. The small tiles ───────────────────────────────────────────────── */
.minis { display: grid; gap: 12px; margin-top: 48px; text-align: center; }
@media (min-width: 735px) {
  .minis { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1320px; margin-inline: auto; }
}
.mini { padding: 56px 16px 20px; }
@media (min-width: 735px) { .mini { padding: 64px 28px 28px; border-radius: var(--r-lg); } }
.mini-name {
  font-weight: 450; line-height: 1.1; letter-spacing: -0.02em;
  max-width: 16ch; margin: 0 auto;
  text-wrap: balance;
}
.mini .reel { margin-top: 32px; }

.w-stars { display: inline-flex; gap: 3px; color: var(--gold); }
.w-stars .off { color: var(--line-hover); }
.w-quote { font-size: var(--fs-ui); font-style: italic; color: var(--text); }
.reel-review .w-type { font-size: var(--fs-ui); line-height: 1.55; color: var(--text); }
.reel-review .w-status { margin-top: 6px; }

.w-callhead { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.w-wave { display: inline-flex; align-items: center; gap: 3px; height: 22px; }
.w-wave i {
  width: 3px; height: 100%; border-radius: 2px;
  background: var(--gold);
  transform: scaleY(0.3);
  animation: w-wave 0.9s var(--ease-move) infinite alternate;
}
.w-wave i:nth-child(3n)   { animation-duration: 1.1s; }
.w-wave i:nth-child(3n+1) { animation-duration: 0.7s; animation-delay: -0.2s; }
.w-wave i:nth-child(4n)   { animation-delay: -0.45s; }
@keyframes w-wave { from { transform: scaleY(0.25); } to { transform: scaleY(1); } }
.reel:not(.is-playing) .w-wave i { animation-play-state: paused; }
.reel:not(.is-live) .w-wave i,
.w-callhead:has(.w-swap.on) .w-wave i { animation: none; transform: scaleY(0.25); }
.w-callhead .w-status { margin-left: auto; }
.w-line { display: grid; gap: 2px; padding: 0 4px; }
.w-line .w-by { margin-bottom: 0; }
.w-line.is-ai .w-by { color: var(--gold); }
.w-booked { border-color: var(--gold-25); }

.w-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.w-field {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
  padding: 8px 10px;
  background: var(--cd); border: 1px solid var(--line); border-radius: var(--r-sm);
}

/* ── 12. Evolution: paper, software, a team ───────────────────────────────
   The eras are stacked layers, each opaque. Going forward a layer wipes on
   from the right (software) or opens as a circle from the centre (AQ);
   going back it leaves the same way it came. */
.evo-body {
  display: grid; gap: 24px;
  max-width: 1040px; margin: 48px auto 0;
  text-align: left;
}
.evo-stage {
  position: sticky; top: 72px; z-index: 2;
  height: 340px;
  background: var(--bg-2);
  border: 1px solid var(--line); border-radius: var(--r-lg);
}
/* After the base rule, or the base rule's top and height win on desktop. */
@media (min-width: 735px) {
  .evo-body { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: start; }
  .evo-steps { grid-column: 1; grid-row: 1; }
  .evo-stage { grid-column: 2; grid-row: 1; top: calc(50vh - 200px); height: 400px; }
}
.era {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: 20px;
  border-radius: inherit;
  background: var(--bg-2);
  transition: clip-path 0.8s var(--ease-move);
}
.era-soft { clip-path: inset(0 0 0 100%); }
.era-aq { clip-path: circle(72% at 50% 50%); }
.evo-stage[data-stage="2"] .era-soft,
.evo-stage[data-stage="3"] .era-soft { clip-path: inset(0); }
.evo-stage[data-stage="1"] .era-aq,
.evo-stage[data-stage="2"] .era-aq { clip-path: circle(0% at 50% 50%); }

/* Paper. The only warm-white on the page: it is an illustration of paper. */
.note {
  position: absolute;
  padding: 18px 16px;
  background: #EFE6CF; color: #2B2620;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4);
}
.note-a { top: 14%; left: 7%; width: 62%; rotate: -4deg; }
.note-b { bottom: 12%; right: 7%; width: 54%; rotate: 5deg; }
.note-big {
  display: block;
  font-family: var(--font-display); font-style: italic;
  font-size: var(--fs-card); line-height: 1.15;
}
.note-small { display: block; margin-top: 6px; font-family: var(--font-body); font-size: var(--fs-ui); line-height: 1.4; }
.note-b .note-small { margin-top: 0; }

/* Generic software, deliberately: a system font, grey chrome, hard edges,
   a notification count and a table that waits to be clicked. */
.soft {
  width: 100%; max-width: 460px;
  background: #F4F4F4; color: #222222;
  border: 1px solid #BDBDBD; border-radius: var(--r-xs);
  font-family: Arial, Helvetica, sans-serif; font-size: var(--fs-micro); line-height: 1.4;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}
.soft-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px;
  background: #E2E2E2; border-bottom: 1px solid #C4C4C4;
  color: #333333;
}
.soft-bar i { width: 10px; height: 10px; border-radius: 50%; background: #B5B5B5; }
.soft-bar span:first-of-type { margin-left: 6px; }
.soft-bell { margin-left: auto; padding: 0 7px; border-radius: 9px; background: #333333; color: #FFFFFF; }
.soft-tabs {
  display: flex; flex-wrap: wrap; gap: 2px 14px;
  padding: 8px 10px;
  border-bottom: 1px solid #C4C4C4; color: #444444;
}
.soft-tabs .is-on { color: #111111; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.soft-row {
  display: grid; grid-template-columns: 1fr 1.6fr 1fr 1fr; gap: 6px;
  padding: 7px 10px;
  border-bottom: 1px solid #DDDDDD;
}
.soft-th { background: #E9E9E9; color: #444444; font-weight: 700; }
.soft-flag { font-weight: 700; }
.soft-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px;
}
.soft-btn {
  padding: 5px 12px;
  background: #E0E0E0; border: 1px solid #A8A8A8; border-radius: 3px;
  color: #222222;
}
.soft-muted { color: #595959; }

/* The team. */
.aq-card {
  display: grid; gap: 10px;
  width: 100%; max-width: 420px;
  padding: 28px;
  background: var(--bg);
  border: 1px solid var(--gold-20); border-radius: var(--r-lg);
  box-shadow: 0 24px 64px var(--gold-08);
}
.aq-paid {
  font-family: var(--font-display); font-size: var(--fs-h2); line-height: 1;
  letter-spacing: -0.02em; color: var(--gold);
}
.aq-meta { font-size: var(--fs-ui); color: var(--text-2); }
.aq-rule { height: 1px; background: linear-gradient(90deg, var(--gold-25), transparent); }
.aq-note { font-family: var(--font-display); font-size: var(--fs-body); line-height: 1.45; color: var(--text); }

.evo-steps { display: grid; }
.evo-step {
  min-height: 72vh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 32px 0;
}
.evo-n {
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-2);
  transition: color var(--t-fast);
}
.evo-title { font-size: var(--fs-h2); font-weight: 450; line-height: 1.06; letter-spacing: -0.026em; margin: 14px 0; }
.evo-text {
  font-size: var(--fs-body); line-height: 1.6; color: var(--text-2);
  max-width: 34ch;
  transition: color var(--t-fast);
}
.evo-step.is-active .evo-n { color: var(--gold); }
.evo-step.is-active .evo-text { color: var(--text); }

/* ── 13. The team ─────────────────────────────────────────────────────── */
.depts {
  display: grid; gap: 32px;
  max-width: 1040px; margin: 48px auto 0;
  text-align: left;
}
@media (min-width: 735px) { .depts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; } }
.dept-name {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-bottom: 14px;
  font-size: var(--fs-body); font-weight: 500; line-height: 1.3; letter-spacing: 0;
}
.dept-tag {
  font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: 400;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold);
  padding: 2px 10px;
  border: 1px solid var(--gold-25); border-radius: var(--r-full);
}
.crew { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.crew li { display: flex; max-width: none; }   /* the tile fills its cell, so a row shares one height */
.agent {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  width: 100%; min-height: 64px;
  padding: 12px 14px;
  text-align: left;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color var(--t-fast), transform 120ms var(--ease-move);
}
.agent:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .agent:hover { border-color: var(--gold-25); } }
.agent-n { font-family: var(--font-mono); font-size: var(--fs-ui); letter-spacing: 0.06em; color: var(--gold); }
.agent-r { font-family: var(--font-body); font-size: var(--fs-ui); color: var(--text-2); }

/* ── 14. Plans ─────────────────────────────────────────────────────────── */
.plans {
  display: grid; gap: 12px;
  max-width: 1080px; margin: 48px auto 0;
  text-align: left;
}
@media (min-width: 1000px) { .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.plan {
  position: relative;
  display: flex; flex-direction: column; gap: 12px;
  padding: 32px 24px 20px;
  background: var(--bg-2);
  border: 1px solid var(--line); border-radius: var(--r-lg);
}
.plan.is-featured { border-color: var(--gold-25); }
.plan-tag {
  position: absolute; top: -11px; left: 24px;
  padding: 3px 12px; border-radius: var(--r-full);
  background: var(--gold); color: var(--bg);
  font-family: var(--font-body); font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.06em;
}
.plan-name { font-size: var(--fs-card); font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; }
.plan-sub { font-family: var(--font-body); font-size: var(--fs-ui); color: var(--text-2); }
.plan-dots { display: flex; flex-wrap: wrap; gap: 5px; max-width: 168px; }
.plan-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.plan-price { font-family: var(--font-display); font-size: var(--fs-h2); line-height: 1; color: var(--gold); }
.plan-price span { font-family: var(--font-body); font-size: var(--fs-btn); color: var(--text-2); }
.plan-price.is-talk { font-size: var(--fs-card); line-height: 1.2; padding: 8px 0; }
.plan-list { display: grid; gap: 8px; margin: 4px 0 12px; }
.plan-list li {
  position: relative; max-width: none;
  padding-left: 18px;
  font-family: var(--font-body); font-size: var(--fs-btn); line-height: 1.5; color: var(--text-2);
}
.plan-list li::before {
  content: ''; position: absolute; left: 0; top: 0.62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--gold-25);
}
.plan .btn { margin-top: auto; }
.plan-more {
  display: flex; align-items: center; justify-content: center; min-height: 44px;
  font-family: var(--font-body); font-size: var(--fs-ui); color: var(--text-2);
  transition: color var(--t-fast);
}
@media (hover: hover) and (pointer: fine) { .plan-more:hover { color: var(--gold); } }
.plans-free { margin: 28px auto 0; font-size: var(--fs-body); color: var(--text-2); }

/* ── 15. The verb ──────────────────────────────────────────────────────── */
.demo-form {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
  max-width: 760px; margin: 32px auto 0;
}
.demo-form input, .demo-form select {
  flex: 1 1 240px; min-width: 0; min-height: 52px;
  padding: 14px 16px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r-md);
  font-family: var(--font-body); font-size: var(--fs-btn);
  color-scheme: dark;
  transition: border-color var(--t-fast);
}
.demo-form select { flex: 0 1 220px; }
.demo-form input::placeholder { color: var(--text-2); }
.demo-form input:focus-visible, .demo-form select:focus-visible { border-color: var(--gold-25); }
.demo-form .btn { min-height: 52px; }

/* ── 16. Covenant, questions, close ────────────────────────────────────── */
.vows {
  display: grid; gap: 12px;
  max-width: 1040px; margin: 48px auto 0;
  text-align: left;
}
@media (min-width: 735px) { .vows { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vow { padding: 28px 24px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-lg); }
.vow-name { font-size: var(--fs-card); font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; margin-bottom: 12px; }
.vow-text { font-size: var(--fs-body); line-height: 1.6; color: var(--text-2); }

.faq-list { max-width: 760px; margin: 40px auto 0; text-align: left; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 64px; padding: 16px 0;
  list-style: none; cursor: pointer;
  font-family: var(--font-display); font-size: var(--fs-body); font-weight: 500; line-height: 1.35;
  color: var(--text);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+'; flex: none;
  font-family: var(--font-body); font-size: var(--fs-card); font-weight: 300; color: var(--gold);
  transition: transform var(--t-card);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { padding: 0 0 20px; font-size: var(--fs-body); line-height: 1.65; color: var(--text-2); }

.close .tile-name span { display: block; }
.refrain {
  margin: 36px auto 0;
  font-family: var(--font-display); font-style: italic; font-size: var(--fs-body); color: var(--text-2);
}

/* ── 17. Footer ─────────────────────────────────────────────────────────── */
.foot { padding: 48px 0 40px; border-top: 1px solid var(--line-soft); }
.foot-notes {
  display: grid; gap: 10px;
  padding-bottom: 28px; margin-bottom: 28px;
  border-bottom: 1px solid var(--line-soft);
}
.foot-notes p {
  font-family: var(--font-body); font-size: var(--fs-micro); line-height: 1.6;
  color: var(--text-2); max-width: 90ch;
}
.foot-brand .nav-logo { margin-bottom: 10px; }
.foot-tag { text-transform: none; letter-spacing: 0; }
.foot-copy { margin-top: 32px; }

/* ── 18. Hero light and the gold button's shine ────────────────────────────
   A slow gold light drifts behind the hero title: a pseudo-element under
   the text, moved by transform only, so no glyph ever changes colour. */
.tile-hero { overflow: hidden; isolation: isolate; }
.tile-hero::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: -120px; width: 960px; height: 720px; margin-left: -480px;
  background: radial-gradient(closest-side, var(--gold-12), transparent);
  animation: hero-drift 18s var(--ease-move) infinite alternate;
}
@keyframes hero-drift {
  from { transform: translate3d(-9%, 0, 0) scale(1); }
  to   { transform: translate3d(9%, 7%, 0) scale(1.14); }
}
.btn-gold { position: relative; overflow: hidden; isolation: isolate; }
.btn-gold::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.34) 50%, transparent 70%);
  transform: translateX(-120%);
}
@media (hover: hover) and (pointer: fine) {
  .btn-gold:hover::after { transform: translateX(120%); transition: transform 0.7s var(--ease-move); }
}

/* ── 19. The live deck ──────────────────────────────────────────────────────
   Six real agents working the visitor's business. A card is Ready, then
   Working (a shimmer where its output will land), then Done with the real
   summary streaming in word by word and the real time it took. */
.deck .demo-form { margin-top: 28px; }
.deck-board {
  max-width: 1040px; margin: 32px auto 0;
  padding: 16px;
  text-align: left;
  background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--r-lg);
}
@media (min-width: 735px) { .deck-board { padding: 28px; } }
.deck-head {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
  gap: 8px 16px; margin-bottom: 16px;
}
.deck-title { min-width: 0; overflow-wrap: anywhere; font-family: var(--font-display); font-size: var(--fs-card); line-height: 1.2; color: var(--text); }
.deck-meta {
  display: inline-flex; gap: 14px;
  font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.08em; color: var(--text-2);
}
.deck-clock { min-width: 6ch; text-align: right; color: var(--gold); font-variant-numeric: tabular-nums; }
.deck-grid { display: grid; gap: 12px; }
@media (min-width: 735px) {
  .deck-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dk-card { min-height: 140px; }
}
@media (min-width: 1000px) { .deck-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dk-card {
  display: flex; flex-direction: column; gap: 10px; min-width: 0;
  padding: 14px 16px;
  background: var(--bg-2);
  border: 1px solid var(--line); border-radius: var(--r-md);
  transition: border-color 0.4s ease, transform 0.4s var(--ease-move);
}
.dk-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.dk-status {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--line-hover); border-radius: var(--r-full);
  font-size: var(--fs-micro); line-height: 1.3; color: var(--text-2);
  white-space: nowrap;
}
.dk-card.is-working .dk-status { color: var(--gold); border-color: var(--gold-25); border-style: dashed; }
.dk-card.is-working .dk-status::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--gold);
  animation: dk-blink 0.9s ease-in-out infinite alternate;
}
@keyframes dk-blink { from { transform: scale(0.6); } to { transform: scale(1.2); } }
.dk-card.is-done { border-color: var(--gold-25); }
.dk-card.is-done .dk-status { color: var(--gold); border-color: var(--gold-25); }
.dk-card.just-in { transform: translateY(-4px); }
.dk-out { max-width: none; font-size: var(--fs-ui); line-height: 1.55; color: var(--text-2); }
.dk-card.is-done .dk-out { color: var(--text); }
.dk-card.is-working .dk-out {
  height: 62px;
  background: linear-gradient(90deg, var(--bg-3) 0%, var(--line-hover) 50%, var(--bg-3) 100%) 0 0 / 200% 100%;
  -webkit-mask: linear-gradient(#000 0 12px, transparent 12px 25px, #000 25px 37px, transparent 37px 50px, #000 50px 62px);
  mask: linear-gradient(#000 0 12px, transparent 12px 25px, #000 25px 37px, transparent 37px 50px, #000 50px 62px);
  animation: dk-shimmer 1.4s linear infinite;
}
@keyframes dk-shimmer { to { background-position: -200% 0; } }
.dk-out .wd {
  display: inline-block;
  clip-path: inset(-4px);
  transition: transform var(--t-slow), clip-path var(--t-slow);
  transition-delay: var(--d, 0ms);
}
.dk-out.is-stream:not(.on) .wd {
  transform: translateY(8px);
  clip-path: inset(calc(100% + 4px) -4px -4px -4px);
  transition-delay: 0ms;
}
.deck-msg { max-width: none; margin-top: 14px; font-size: var(--fs-ui); line-height: 1.5; color: var(--text); }
/* Rendered while empty: a live region that appears together with its text
   is often not announced. */
.deck-msg:empty { margin: 0; }
#deck-go[aria-disabled="true"] { cursor: progress; }
.deck-msg.is-err { padding-left: 12px; border-left: 2px solid var(--err); }
.deck-foot { margin-top: 20px; }
.deck-foot[hidden] { display: none; }

/* ── 20. Films: the owner's day ────────────────────────────────────────────
   A scene on the left, the phone's feed on the right (stacked on phones).
   The scene is an SVG line illustration coloured by tokens; its ambient
   loops (waves, steam, a buzzing phone) run only while the film plays. */
.films { display: grid; gap: 24px; max-width: 1180px; margin: 48px auto 0; }
.film { max-width: none; margin: 0; }
.film-stage { padding: 0; gap: 0; overflow: hidden; }
@media (min-width: 900px) {
  .film-stage { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}
.film-scene { position: relative; min-height: 240px; border-bottom: 1px solid var(--line); }
@media (min-width: 900px) { .film-scene { border-bottom: 0; border-right: 1px solid var(--line); } }
/* height:auto, not 100%: in the stage's grid a 100% height resolved against
   the stretched row and grew the scene over its own end card (measured). */
.film-art { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; background: var(--bg-2); }
.film-art svg { display: block; width: 100%; height: 100%; }
@media (min-width: 600px) { .film-art { aspect-ratio: 16 / 10; } }
@media (min-width: 900px) { .film-art { position: absolute; inset: 0; aspect-ratio: auto; } }
.film-time {
  position: absolute; left: 14px; top: 14px;
  padding: 4px 10px;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-full);
}
/* Below the scene on a phone, where an overlay would sit on the owner;
   over the foot of the scene once the scene has room. */
.film-end { display: grid; place-items: center; padding: 14px 12px 16px; }
@media (min-width: 900px) {
  .film-end { position: absolute; left: 50%; bottom: 18px; margin-left: -9rem; width: 18rem; padding: 0; }
}
.film-end span {
  padding: 10px 22px;
  background: var(--bg); border: 1px solid var(--gold-25); border-radius: var(--r-full);
  font-family: var(--font-display); font-size: var(--fs-card); line-height: 1.2; color: var(--text);
  white-space: nowrap;
}
.film-feed { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 16px; }
@media (min-width: 735px) { .film-feed { padding: 24px; } }
.toast {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 14px;
  background: var(--cd);
  border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--lift-1);
}
.toast-lead { border-color: var(--gold-20); }
.toast-act { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 6px; }
.film-total {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
  padding: 14px 16px;
  background: var(--cd);
  background: color-mix(in srgb, var(--gold) 8%, var(--cd));
  border: 1px solid var(--gold-25); border-radius: var(--r-md);
}
.film-count {
  min-width: 6ch;
  font-family: var(--font-display); font-size: var(--fs-h2); line-height: 1;
  color: var(--gold); font-variant-numeric: tabular-nums;
}
.bars { display: flex; align-items: flex-end; gap: 6px; width: 100%; height: 40px; margin-top: 6px; }
.bars i {
  flex: 1; border-radius: 3px 3px 0 0; background: var(--gold);
  transform-origin: 50% 100%;
  transition: transform var(--t-slow);
}
.bars i:nth-child(1) { height: 45%; }
.bars i:nth-child(2) { height: 62%; }
.bars i:nth-child(3) { height: 52%; }
.bars i:nth-child(4) { height: 80%; }
.bars i:nth-child(5) { height: 70%; }
.bars i:nth-child(6) { height: 100%; }
.bars i:nth-child(7) { height: 64%; }
.reel.is-live .bars i:not(.on) { transform: scaleY(0.04); }

/* The scenes. */
.st-night { stop-color: var(--bg); }
.st-dusk  { stop-color: color-mix(in srgb, var(--gold) 26%, var(--bg-3)); }
.st-dawn  { stop-color: color-mix(in srgb, var(--gold) 42%, var(--bg-3)); }
.st-gold-a { stop-color: var(--gold); stop-opacity: 0.36; }
.st-gold-0 { stop-color: var(--gold); stop-opacity: 0; }
.a-sun { fill: var(--gold); }
.a-sea { fill: var(--bg-2); }
.a-horizon { stroke: var(--gold-25); stroke-width: 1.5; }
.a-glint line { stroke: var(--gold); stroke-width: 2; stroke-linecap: round; }
.a-glint { animation: a-glint 3s ease-in-out infinite alternate; }
.a-waves path { fill: none; stroke: var(--line-hover); stroke-width: 2; }
.a-waves { animation: a-waves 7s linear infinite; }
.a-sand { fill: var(--bg-3); }
.a-pole { stroke: var(--text-2); stroke-width: 3; stroke-linecap: round; }
.a-canopy { fill: var(--gold); }
.a-chair { fill: none; stroke: var(--text-2); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.a-head { fill: var(--text); }
.a-body { fill: none; stroke: var(--text); stroke-width: 15; stroke-linecap: round; stroke-linejoin: round; }
.a-arm { fill: none; stroke: var(--text); stroke-width: 8; stroke-linecap: round; }
.a-phone { fill: var(--gold); animation: a-pulse 2.4s ease-in-out infinite; }
.a-room { fill: var(--bg-2); }
.a-cord { stroke: var(--text-2); stroke-width: 2; }
.a-shade { fill: var(--gold); }
.a-bulb { fill: var(--text); }
.a-fig { fill: var(--bg-3); stroke: color-mix(in srgb, var(--gold) 45%, transparent); stroke-width: 2; }
.a-table { fill: var(--text-2); }
.a-leg { stroke: var(--text-2); stroke-width: 6; stroke-linecap: round; }
.a-plate { fill: var(--text); }
.a-phone-down { fill: var(--line-hover); }
.a-buzz { fill: var(--gold); opacity: 0; animation: a-buzz 2.6s ease-in-out infinite; }
.a-wall { fill: var(--bg-2); }
.a-frame { fill: none; stroke: var(--line-hover); stroke-width: 6; }
.a-counter { fill: var(--bg-3); }
.a-cup { fill: var(--text); }
.a-handle { fill: none; stroke: var(--text); stroke-width: 7; stroke-linecap: round; }
.a-saucer { fill: var(--text-2); }
.a-steam path { fill: none; stroke: var(--text-2); stroke-width: 3; stroke-linecap: round; }
.a-steam { animation: a-steam 3.2s ease-in-out infinite; }
.a-rise { animation: a-rise 14s var(--ease-move) infinite alternate; }
@keyframes a-waves { to { transform: translateX(-80px); } }
@keyframes a-glint { from { opacity: 0.35; } to { opacity: 0.9; } }
@keyframes a-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@keyframes a-buzz { 0%, 55%, 100% { opacity: 0; } 18% { opacity: 0.6; } }
@keyframes a-steam {
  0%   { transform: translateY(8px); opacity: 0; }
  40%  { opacity: 0.8; }
  100% { transform: translateY(-16px); opacity: 0; }
}
@keyframes a-rise { from { transform: translateY(48px); } to { transform: translateY(-8px); } }
.film:not(.is-playing) :is(.a-waves, .a-steam, .a-buzz, .a-rise, .a-glint, .a-phone) { animation-play-state: paused; }

/* ── 21. Every seat. Filled. ──────────────────────────────────────────────── */
.reel-seats .reel-stage { gap: 16px; }
.seats-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px 16px; padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.seat-you {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 18px;
  background: var(--cd);
  background: color-mix(in srgb, var(--gold) 10%, var(--cd));
  border: 1px solid var(--gold-25); border-radius: var(--r-md);
}
.seat-you-n { font-family: var(--font-display); font-size: var(--fs-card); line-height: 1.1; color: var(--text); }
.seats-phase { display: grid; }
.seats-phase > * { grid-area: 1 / 1; }
.reel:not(.is-live) .is-transient { visibility: hidden; }
.seats-tally { font-size: var(--fs-ui); color: var(--text-2); }
/* Two digits' room from the start: "10" arriving mid-loop re-wrapped the
   header at 385–395px and dropped the grid 47px twice a loop (CLS). */
.seats-tally b {
  display: inline-block; min-width: 2ch; text-align: right;
  margin-right: 4px;
  font-family: var(--font-body); font-size: var(--fs-card); font-weight: 600;
  color: var(--gold); font-variant-numeric: tabular-nums;
}
.seats-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 735px) { .seats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .seats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.seat.w-swap { display: grid; justify-items: stretch; min-width: 0; }
.seat > span {
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
  min-height: 92px;
  padding: 12px 14px;
  border-radius: var(--r-md);
}
.seat b { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-ui); line-height: 1.3; color: var(--text); }
.seat-open { border: 1px dashed var(--line-hover); }
.seat-open i { font-style: normal; font-size: var(--fs-micro); color: var(--text-2); }
.seat-on {
  background: var(--cd);
  background: color-mix(in srgb, var(--gold) 9%, var(--cd));
  border: 1px solid var(--gold-25);
}
.seat-do { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-micro); color: var(--text-2); }

/* ── 22. Four words ─────────────────────────────────────────────────────── */
.words-title { max-width: 24ch; }
.words-title span { display: inline-block; }
.words .mini { background: var(--bg); }
@media (min-width: 735px) { .words .mini { border-radius: var(--r-lg); } }
.words .mini { padding-top: 44px; }
.words .reel-stage { --st: var(--bg-2); --cd: var(--bg-3); }
.fast-clock { display: flex; align-items: baseline; gap: 10px; }
.fast-n {
  font-family: var(--font-display); font-size: var(--fs-h2); line-height: 1;
  color: var(--gold);
}
.fast-u { font-size: var(--fs-ui); color: var(--text-2); }
.fast-steps { display: grid; gap: 8px; }
.fast-steps li {
  display: flex; align-items: baseline; gap: 12px; max-width: none;
  padding: 10px 12px;
  background: var(--cd); border: 1px solid var(--line); border-radius: var(--r-sm);
}
.fast-steps li:last-child { border-color: var(--gold-25); }
.fast-steps b { min-width: 5ch; font-family: var(--font-mono); font-weight: 400; font-size: var(--fs-micro); color: var(--gold); }
.lock {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 22px 12px 16px;
  background: var(--cd);
  border: 1px solid var(--line); border-radius: var(--r-lg);
}
.lock-time { font-family: var(--font-display); font-size: var(--fs-h2); line-height: 1; color: var(--text); }
.lock-day { margin-bottom: 12px; font-size: var(--fs-micro); color: var(--text-2); }
.lock-note {
  display: flex; flex-direction: column; gap: 4px;
  width: 100%; max-width: 340px;
  padding: 12px 14px;
  background: var(--st); border: 1px solid var(--line); border-radius: var(--r-md);
}
.lock-act { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; }
.care-in { position: relative; }
.w-heart {
  position: absolute; right: -8px; bottom: -10px;
  display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--st); border: 1px solid var(--gold-25); color: var(--gold);
}
.reel.is-live .w-heart[data-at]:not(.on) { transform: scale(0.2); clip-path: circle(0); }

/* ── 23. The team: on shift, and editable ─────────────────────────────── */
.shift {
  max-width: 1040px; margin: 40px auto 0;
  padding: 16px;
  text-align: left;
  background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--r-lg);
}
.shift-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-height: 44px; margin-bottom: 8px; }
.shift-toggle { margin-left: auto; }
/* Narrow: the live line takes its own row, and the label holds the 44px
   first row the pause control will share, so adding the control later
   moves nothing. */
@media (max-width: 599px) {
  .shift-head .w-live { order: 2; flex-basis: 100%; }
  .shift-toggle { order: 1; }
  .shift-head .w-label { display: inline-flex; align-items: center; min-height: 44px; }
}
.ticker-win { height: 240px; overflow: hidden; }
.ticker { transition: transform var(--t-slow); }
.ticker.snap { transition: none; }
.ticker li {
  display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 12px;
  height: 48px; max-width: none;
  padding: 0 4px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.t-do { font-size: var(--fs-ui); color: var(--text); }
.t-biz { display: none; font-size: var(--fs-micro); color: var(--text-2); }
@media (min-width: 600px) {
  .ticker li { grid-template-columns: 110px minmax(0, 1fr) auto; }
  .t-biz { display: block; }
}
.ticker li { transition: clip-path var(--t-slow); clip-path: inset(-4px); }
.ticker li.is-new { clip-path: inset(0 0 100% 0); }

.agent-n { display: inline-flex; align-items: center; gap: 8px; }
.crew li:nth-child(2n) .w-dot::after { animation-delay: -0.8s; }
.crew li:nth-child(3n) .w-dot::after { animation-delay: -0.4s; }
.agent.is-custom { border-color: var(--gold-25); }
.agent-x { max-width: 100%; overflow-wrap: anywhere; font-family: var(--font-body); font-size: var(--fs-micro); color: var(--gold); }

/* The sheet: a side panel on wide screens, a bottom sheet on phones.
   position is restated because aq.css's `body > * { position: relative }`
   outranks the browser's own `position: fixed` for a modal dialog; without
   it the page jumps to the top on open and the sheet scrolls away. */
.sheet {
  position: fixed;
  width: 520px; max-width: 100%; height: 100dvh; max-height: 100dvh;
  margin: 0 0 0 auto; padding: 0;
  background: var(--bg-2); color: var(--text);
  border: 0; border-left: 1px solid var(--line);
  overscroll-behavior: contain;
}
.sheet::backdrop { background: rgba(0, 0, 0, 0.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.sheet[open] { animation: sheet-side 0.45s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes sheet-side { from { transform: translateX(48px); } }
@media (max-width: 734px) {
  .sheet {
    width: 100%; height: auto; max-height: 92dvh;
    margin: auto 0 0;
    border-left: 0; border-top: 1px solid var(--line);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
  }
  .sheet[open] { animation-name: sheet-up; }
  @keyframes sheet-up { from { transform: translateY(48px); } }
}
.sheet-body { display: flex; flex-direction: column; gap: 22px; min-height: 100%; padding: 24px 20px 28px; }
.sheet-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.sheet-name {
  margin: 6px 0 2px;
  font-family: var(--font-mono); font-size: var(--fs-card); font-weight: 500;
  letter-spacing: 0.04em; color: var(--gold);
}
.sheet-role { font-size: var(--fs-btn); color: var(--text-2); }
.sheet-x {
  flex: none; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line-hover); background: var(--bg); color: var(--text);
  cursor: pointer;
}
.sheet-block { display: flex; flex-direction: column; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.sheet-label {
  margin-bottom: 2px; padding: 0;
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2);
}
.sheet-feed { display: grid; gap: 6px; }
.sheet-feed li {
  max-width: none; padding: 10px 12px;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm);
  font-size: var(--fs-ui); color: var(--text);
}
.sheet-feed li:first-child { border-color: var(--gold-25); }
.sheet-input {
  min-height: 48px; padding: 12px 14px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r-md);
  font-family: var(--font-body); font-size: var(--fs-btn);
}
.sheet-input::placeholder { color: var(--text-2); }
.sheet-input:focus-visible { border-color: var(--gold-25); }
.seg { flex-direction: row; flex-wrap: wrap; gap: 8px; }
.seg label { position: relative; }
.seg input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.seg span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  border: 1px solid var(--line-hover); border-radius: var(--r-full);
  font-size: var(--fs-ui); color: var(--text);
  transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.seg input:checked + span { background: var(--gold); border-color: var(--gold); color: var(--bg); }
.seg input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.sheet-jobs { display: grid; gap: 4px; }
.sw {
  position: relative;
  display: flex; align-items: center; gap: 12px; min-height: 44px;
  font-size: var(--fs-ui); line-height: 1.4; color: var(--text);
  cursor: pointer;
}
.sw input { position: absolute; left: 0; top: 50%; width: 44px; height: 26px; margin: -13px 0 0; opacity: 0; cursor: pointer; }
.sw-ui {
  position: relative; flex: none;
  width: 44px; height: 26px; border-radius: 13px;
  background: var(--line-hover);
  transition: background-color 0.2s ease;
}
.sw-ui::after {
  content: ''; position: absolute; left: 3px; top: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--text);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.sw input:checked + .sw-ui { background: var(--gold); }
.sw input:checked + .sw-ui::after { transform: translateX(18px); background: var(--bg); }
.sw input:focus-visible + .sw-ui { outline: 2px solid var(--gold); outline-offset: 2px; }
.sw.is-locked { color: var(--text-2); cursor: default; }
.sw.is-locked input { cursor: default; }
.sw.is-locked .sw-ui { background: var(--gold-3); }
.sheet-preview {
  padding: 14px 16px;
  background: var(--bg);
  background: color-mix(in srgb, var(--gold) 8%, var(--bg));
  border: 1px solid var(--gold-20); border-radius: var(--r-md);
}
.sheet-say { max-width: none; font-family: var(--font-display); font-size: var(--fs-body); line-height: 1.5; color: var(--text); }
.sheet-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }
.sheet-note { font-size: var(--fs-micro); color: var(--text-2); }

/* aq.css sets paragraphs and list items in AQ Noor, which is never set
   below 18px; the small working text in these new parts is Inter. */
.deck-board p, .deck-board li, .fast-steps li, .ticker li,
.sheet-body p:not(.sheet-say), .sheet-body li, .sheet-body .w-live, .shift .w-live { font-family: var(--font-body); }
.film-count { font-variant-numeric: normal; }
/* Secondary grey measures 4.17–4.48:1 on the gold-tinted cards (axe, F1);
   on those surfaces the small labels take the primary text colour. */
.film-total .w-role, .seat-on .seat-do, .seat-you .w-label { color: var(--text); }

/* ── 24. Reduced motion ───────────────────────────────────────────────────
   home-v2.js never starts a reel or the ticker under reduced motion, so
   every commercial stands on its finished frame. What remains here is the
   ambient loops and entrances. */
@media (prefers-reduced-motion: reduce) {
  .w-dot::after, .w-ring::before, .w-typing i, .w-wave i { animation: none; }
  .btn:active:not(:disabled), .agent:active, .reel-toggle:active { transform: none; }
  .tile-hero::before, .a-waves, .a-steam, .a-buzz, .a-rise, .a-glint, .a-phone,
  .dk-card.is-working .dk-status::before, .dk-card.is-working .dk-out, .sheet[open] { animation: none; }
  .btn-gold:hover::after { transform: translateX(-120%); transition: none; }
  .dk-card.just-in { transform: none; }
}