@font-face {
  font-family: Satoshi;
  src: url("fonts/satoshi-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Satoshi;
  src: url("fonts/satoshi-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: Satoshi;
  src: url("fonts/satoshi-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: Satoshi;
  src: url("fonts/satoshi-900.woff2") format("woff2");
  font-weight: 900;
  font-display: swap;
}

:root {
  color-scheme: light;

  --bg: #fff;
  --paper: #fff;
  --paper-2: #f7f7f8;
  --paper-3: #f0f1f2;

  --ink: #08090a;
  --ink-2: #2a2d31;
  --mute: #6d7278;
  --faint: #9ba1a7;
  --line: #e6e7e9;
  --line-2: #f0f1f2;

  --night: #08090a;
  --night-2: #101214;
  --night-3: #181b1f;
  --night-ink: #f4f5f6;
  --night-mute: #8d939a;
  --night-line: rgba(255, 255, 255, 0.09);

  --btn: #08090a;
  --tg: #3390ec;
  --tg-bubble: #e4f7c7;
  --accent: #0a64fa;

  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* film grain — the one texture that stops flat panels reading as vector art */
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);

  --e1: 0 1px 2px rgba(8,9,10,.04), 0 2px 8px -2px rgba(8,9,10,.05);
  --e2: 0 2px 4px rgba(8,9,10,.03), 0 12px 28px -10px rgba(8,9,10,.09);
  --e3: 0 4px 8px rgba(8,9,10,.03), 0 28px 56px -16px rgba(8,9,10,.13);
  --e4: 0 8px 16px rgba(8,9,10,.04), 0 56px 110px -28px rgba(8,9,10,.22);
  --e-night: 0 2px 8px rgba(0,0,0,.4), 0 40px 90px -24px rgba(0,0,0,.75);
  --shadow: var(--e3);

  --r-xs: 8px;
  --r-sm: 12px;
  --r: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-2xl: 42px;

  --t-hero: clamp(40px, 6.1vw, 80px);
  --t-h2: clamp(31px, 4.5vw, 56px);
  --t-h3: clamp(20px, 2.1vw, 27px);
  --t-lede: clamp(16.5px, 1.35vw, 20px);
  --t-body: 16px;
  --t-small: 14px;
  --t-micro: 11px;

  --gutter: 22px;
  --frame: 1240px;
  --inset: max(var(--gutter), calc((100% - var(--frame)) / 2));
  --slab: 12px;
  --act: 108px;
}

*, *::before, *::after { box-sizing: border-box; }

/* Labels, counters, timestamps and any technical read-out go mono with
   tabular figures. This is what separates a product surface from a poster. */
.eyebrow,
.cue,
.tag,
.stamp,
.trust,
.badge,
.scrollcue,
.side-search,
.ch-num,
.reel-eyebrow,
.mat-kicker,
.erow-note,
.workshop-kicker,
.ready,
.reel-bars li,
.lock-time,
.lock-date,
.stat-num,
.meta,
[data-mono] {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "ss01" off;
}

/* Mono glyphs already carry their own sidebearings, so the wide tracking
   these labels used for Satoshi now reads as gappy. Pull it back in. */
.eyebrow,
.cue,
.stamp,
.reel-eyebrow,
.mat-kicker,
.ch-num,
.reel-bars li,
.scrollcue {
  letter-spacing: 0.08em;
  font-weight: 400;
}

/* One grain plate, reused. Never interactive, never printed. */
.grain { position: relative; }
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  background-image: var(--grain);
  background-size: 160px 160px;
  opacity: 0.05;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.grain-strong::after { opacity: 0.09; }
html {
  scroll-behavior: auto;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Satoshi, ui-sans-serif, system-ui, sans-serif;
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3 { text-wrap: balance; }
img { display: block; max-width: 100%; }
button, input { font: inherit; }
button, a { cursor: pointer; }
a { color: inherit; }

.skip {
  position: absolute;
  left: 16px;
  top: -48px;
  z-index: 50;
  padding: 8px 14px;
  background: var(--ink);
  color: #fff;
  text-decoration: none;
  border-radius: 999px;
}
.skip:focus { top: 16px; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 50px;
  padding: 0 26px;
  background: linear-gradient(180deg, #25282c, #08090a);
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  font-size: 14.5px;
  letter-spacing: -0.013em;
  white-space: nowrap;
  border-radius: 999px;
  border: 0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 1px 2px rgba(8,9,10,.24),
    0 14px 30px -12px rgba(8,9,10,.55);
  transition: transform 300ms var(--ease), box-shadow 300ms var(--ease), background 300ms var(--ease);
}
@media (hover: hover) {
  .btn:hover {
    transform: translateY(-2px);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.2),
      0 1px 2px rgba(8,9,10,.24),
      0 22px 44px -14px rgba(8,9,10,.6);
  }
}
.btn:active { transform: translateY(0) scale(0.985); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line);
}
@media (hover: hover) {
  .btn-ghost:hover {
    background: var(--paper-2);
    box-shadow: inset 0 0 0 1px #d9dbde;
  }
}

.rv {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  filter: blur(7px);
}
.rv.rv-in {
  opacity: 1;
  transform: none;
  filter: blur(0);
  transition:
    opacity 900ms var(--ease) var(--d, 0ms),
    transform 1150ms var(--ease) var(--d, 0ms),
    filter 800ms var(--ease) var(--d, 0ms);
}

/* ---- scroll-linked depth -----------------------------------------------
   Elements tagged [data-depth] drift at their own rate as you scroll.
   Positive values rise faster than the page; negative lag behind.
   The page stops feeling like a stack of static cards. */
[data-depth] {
  will-change: transform;
  transform: translate3d(0, var(--dy, 0px), 0);
}

/* Section content rises slightly as it enters, then settles — a gentle
   parallax that makes the scroll feel alive without being dizzying. */
.rise {
  opacity: 0;
  transform: translate3d(0, 40px, 0) scale(0.985);
  transition:
    opacity 800ms var(--ease) var(--d, 0ms),
    transform 1100ms var(--ease) var(--d, 0ms);
}
.rise.rise-in {
  opacity: 1;
  transform: none;
}

/* Staggered children — each child arrives a beat after the last */
.rise-group > * {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition:
    opacity 700ms var(--ease) var(--d, 0ms),
    transform 900ms var(--ease) var(--d, 0ms);
}
.rise-group.rise-in > * {
  opacity: 1;
  transform: none;
}

/* ---- the acts: each scene has its own mechanic --------------------------
   Not one fade-up repeated. A camera, a chapter film, a split, a deal,
   a wipe, a curtain. Scroll advances the shot, it does not travel a list. */

/* Act · converge: two phones fly in from opposite wings and meet.
   With the split scene pinned, this plays out as a held shot, not a blink. */
.versus .night-cell {
  will-change: transform, opacity;
}
.versus .night-cell:first-child {
  transform:
    translate3d(calc((1 - var(--p, 0)) * -22vw), 0, 0)
    rotateY(calc((1 - var(--p, 0)) * 22deg))
    rotate(calc((1 - var(--p, 0)) * -3deg));
  opacity: calc(0.45 + var(--p, 0) * 0.55);
}
.versus .night-cell:last-child {
  transform:
    translate3d(calc((1 - var(--p, 0)) * 22vw), 0, 0)
    rotateY(calc((1 - var(--p, 0)) * -22deg))
    rotate(calc((1 - var(--p, 0)) * 3deg));
  opacity: calc(0.45 + var(--p, 0) * 0.55);
}

/* Act · deal: cards swing in on the Y axis, like being dealt onto glass */
.pair-mats {
  perspective: 1600px;
}
.pair-mats .mat {
  will-change: transform, opacity;
  transform-origin: 50% 100%;
  backface-visibility: hidden;
}
.pair-mats .mat:first-child {
  transform:
    translate3d(calc((1 - var(--p, 0)) * -18%), 0, 0)
    rotateY(calc((1 - var(--p, 0)) * 38deg))
    rotate(calc((1 - var(--p, 0)) * -3deg));
  opacity: calc(0.2 + var(--p, 0) * 0.8);
}
.pair-mats .mat:last-child {
  transform:
    translate3d(calc((1 - var(--p, 0)) * 18%), 0, 0)
    rotateY(calc((1 - var(--p, 0)) * -38deg))
    rotate(calc((1 - var(--p, 0)) * 3deg));
  opacity: calc(0.2 + var(--p, 0) * 0.8);
}

/* Act · push: the price card starts far away and docks into place */
.price .plan {
  will-change: transform, opacity;
  transform: scale(calc(0.78 + var(--p, 0) * 0.22)) translate3d(0, calc((1 - var(--p, 0)) * 80px), 0);
  opacity: calc(0.2 + var(--p, 0) * 0.8);
}

/* Act · wipe: the ledger is revealed from the centre, like a shutter */
.ledger {
  clip-path: inset(0 calc((1 - var(--p, 1)) * 48%) 0 calc((1 - var(--p, 1)) * 48%) round 16px);
}

/* Act · curtain: the finale rises as a dark drape, covering the light page */
.finale-slab {
  clip-path: inset(calc((1 - var(--p, 1)) * 72%) 0 0 0 round 42px);
  transform: translate3d(0, calc((1 - var(--p, 1)) * 48px), 0);
}

/* Act · portal: the dark reel iris-opens as you arrive */
.reel-slab {
  clip-path: inset(calc((1 - var(--enter, 1)) * 10%) round 42px);
  transform: scale(calc(0.94 + var(--enter, 1) * 0.06));
  transform-origin: 50% 40%;
}

/* Chapter film: rows stay visible; the open body is the changing shot */
.erow {
  border-bottom: 1px solid var(--line);
}

/* Pinned scenes — desktop only. Scroll now advances a shot, not a list. */
@media (min-width: 880px) {
  .scene-track[data-scene="chapters"] { height: 260vh; }
  .scene-track[data-scene="split"] { height: 190vh; }
  .scene-stick {
    position: sticky;
    top: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .offer { padding-block: 0; }
  .versus { padding-block: 0; }
  .offer .scene-stick { padding: 88px 0 48px; }
  .versus .scene-stick { padding: 72px 0 56px; }
}

/* scroll-velocity skew — the whole page leans into fast scrolls and
   settles back, the way a camera rig leans into a dolly move */
@media (prefers-reduced-motion: no-preference) {
  .sec-copy,
  .jobs-copy,
  .finale-in {
    transform: skewY(var(--skew, 0deg));
  }
}

/* headlines that rise word by word skip the generic block reveal */
.rv[data-lines] {
  opacity: 1;
  transform: none;
  filter: none;
}
/* the wrapper spans must not inherit the muted-clause colour rules */
[data-lines] span.w {
  color: inherit;
  font-weight: inherit;
}
/* word-by-word type reveal for statement headlines */
[data-lines] .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.06em;
  margin-bottom: -0.06em;
}
[data-lines] .w > i {
  display: inline-block;
  font-style: inherit;
  transform: translate3d(0, 108%, 0) rotate(2.5deg);
  transition: transform 1150ms var(--ease) var(--wd, 0ms);
}
[data-lines].is-lit .w > i { transform: none; }

[data-in] {
  opacity: 0;
  transform: translate3d(0, 40px, 0) scale(0.985);
}
[data-in].is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity 1000ms var(--ease) var(--d, 0ms),
    transform 1200ms var(--ease) var(--d, 0ms);
}

.hero {
  position: relative;
  display: grid;
  gap: 20px;
  padding: 104px var(--inset) 0;
  overflow: clip;
}
/* ambient light behind the opening — gives the page a lit room, not a blank sheet */
.hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: -34vh;
  width: 150vw;
  height: 116vh;
  margin-left: -75vw;
  pointer-events: none;
  background:
    radial-gradient(46% 40% at 68% 46%, rgba(10,100,250,.07), transparent 70%),
    radial-gradient(40% 34% at 24% 24%, rgba(8,9,10,.05), transparent 72%);
}
.hero-copy { max-width: 40rem; padding-top: 8px; position: relative; z-index: 3; }
.hero-visual {
  position: relative;
  z-index: 2;
  min-height: 340px;
  perspective: 1800px;
  perspective-origin: 60% 42%;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 26px;
  padding: 7px 14px 7px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  box-shadow: inset 0 0 0 1px var(--line), var(--e1);
  backdrop-filter: blur(12px);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -0.008em;
  color: var(--ink-2);
}
.badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34,197,94,.18);
}

.hero h1 {
  margin: 0;
  font-size: var(--t-hero);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.043em;
}
.hero h1 span {
  color: var(--faint);
  font-weight: 400;
}

.lede {
  margin: 24px 0 34px;
  max-width: 34rem;
  color: var(--mute);
  font-size: var(--t-lede);
  line-height: 1.55;
  letter-spacing: -0.014em;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 0;
  margin: 30px 0 0;
  color: var(--faint);
  font-size: 13px;
  letter-spacing: -0.005em;
}
.trust span {
  width: 3px;
  height: 3px;
  margin: 0 12px;
  border-radius: 50%;
  background: #d4d6d9;
}

/* The opening fan. Mostly product surfaces, one photo per subject, drifting
   up and off the right edge so the composition never feels boxed in. */
.fan {
  position: relative;
  height: 360px;
  margin: 0 calc(var(--gutter) * -1);
  transform-style: preserve-3d;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 9%, #000 82%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 9%, #000 82%, transparent 100%);
}
.fan-card {
  position: absolute;
  margin: 0;
  width: 46%;
  max-width: 224px;
  border-radius: 14px;
  overflow: hidden;
  background: #ddd;
  box-shadow:
    0 2px 6px rgba(8,9,10,.14),
    0 34px 80px -20px rgba(8,9,10,.5);
  transform-style: preserve-3d;
  will-change: transform;
}
.fan-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
  background: linear-gradient(200deg, rgba(255,255,255,.18), transparent 42%);
  pointer-events: none;
}
.fan-card img {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

/* the built surfaces */
.fan-card.is-ui {
  background: #fff;
  box-shadow:
    inset 0 0 0 1px rgba(8,9,10,.07),
    0 2px 6px rgba(8,9,10,.1),
    0 34px 80px -22px rgba(8,9,10,.42);
}
.fan-card.is-ui::after { background: linear-gradient(200deg, rgba(255,255,255,.5), transparent 40%); box-shadow: none; }
.fan-card.is-dark { background: #0c0f12; }
.fan-card.is-dark::after { box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); background: linear-gradient(200deg, rgba(255,255,255,.12), transparent 44%); }

.fc-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 9px;
  box-shadow: inset 0 -1px 0 rgba(8,9,10,.07);
}
.fc-bar i { width: 6px; height: 6px; border-radius: 50%; background: #d8dade; flex: none; }
.fc-bar i:first-child { background: #f05c50; }
.fc-bar i:nth-child(2) { background: #f4bd4f; }
.fc-bar i:nth-child(3) { background: #61c554; }
.fc-bar em {
  margin-left: 5px;
  font-family: var(--mono);
  font-size: 8px;
  font-style: normal;
  letter-spacing: 0.04em;
  color: var(--faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.is-dark .fc-bar { box-shadow: inset 0 -1px 0 rgba(255,255,255,.09); }
.is-dark .fc-bar i { background: #33383e; }
.is-dark .fc-bar em { color: rgba(255,255,255,.4); }

.fc { padding: 10px 10px 12px; }

.fc-thread { display: grid; gap: 5px; }
.fb {
  margin: 0;
  padding: 6px 8px;
  border-radius: 9px;
  font-size: 8.5px;
  line-height: 1.4;
  max-width: 88%;
}
.fb.them { background: var(--paper-3); color: var(--ink-2); border-bottom-left-radius: 3px; }
.fb.me { background: var(--tg-bubble); color: #17280c; justify-self: end; border-bottom-right-radius: 3px; }

.fc-term { display: grid; gap: 4px; }
.fc-term p {
  margin: 0;
  font-family: var(--mono);
  font-size: 8px;
  line-height: 1.5;
  color: rgba(255,255,255,.56);
}
.fc-term b { color: rgba(255,255,255,.34); font-weight: 400; margin-right: 5px; }
.fc-term p.hot { color: #f4bd4f; }
.fc-term p.hot b { color: #f4bd4f; }

.fc-ping { display: grid; align-content: center; gap: 10px; min-height: 132px; text-align: center; }
.fp-time {
  margin: 0;
  font-family: var(--mono);
  font-size: 30px;
  font-weight: 300;
  letter-spacing: -0.03em;
  color: #fff;
}
.fp-note {
  display: grid;
  gap: 1px;
  padding: 8px 10px;
  border-radius: 10px;
  text-align: left;
  background: rgba(255,255,255,.1);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
}
.fp-note span { font-family: var(--mono); font-size: 7px; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,.42); }
.fp-note b { font-size: 9.5px; font-weight: 500; color: #fff; }
.fp-note small { font-size: 8px; line-height: 1.35; color: rgba(255,255,255,.5); }

.fc-rows { display: grid; gap: 1px; }
.fc-rows p {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  padding: 6px 2px;
  font-size: 8.5px;
  color: var(--mute);
  box-shadow: inset 0 -1px 0 var(--line-2);
}
.fc-rows p:last-child { box-shadow: none; }
.fc-rows b {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 400;
  color: var(--ink);
}
.fc-rows b.ok { color: #2f9e46; }
.fc-rows b.warn { color: #c9821f; }

/* mobile keeps three; the rest join on wider screens */
.fan-a { left: 2%; top: 26px; transform: rotate(-9deg); }
.fan-b { left: 32%; top: 0; transform: rotate(2deg); z-index: 3; }
.fan-c { left: 60%; top: 40px; transform: rotate(8deg); z-index: 2; }
.fan-d, .fan-e, .fan-f, .fan-g { display: none; }

.cue {
  margin: 0 0 16px;
  text-align: center;
  color: var(--mute);
  font-size: 13px;
}

.stage {
  position: relative;
  z-index: 4;
  padding: 0 var(--inset) var(--act);
  margin-top: 4px;
}

.window {
  position: relative;
  max-width: none;
  width: 100%;
  margin: 0 auto;
  background: #fff;
  border: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px rgba(8,9,10,.07),
    0 2px 4px rgba(8,9,10,.04),
    0 40px 80px -28px rgba(8,9,10,.26);
}
.window-tilt {
  transform: perspective(2400px) rotateX(9deg) scale(0.965);
  transform-origin: center 14%;
  transition: transform 1200ms var(--ease), box-shadow 1200ms var(--ease);
}
.window-tilt.is-flat { transform: none; }
/* handed to the scroll scrubber — no transition, the scroll is the clock */
.window-tilt.is-scrubbed {
  transform:
    perspective(2400px)
    translate3d(0, var(--tilt-y, 26px), 0)
    rotateX(var(--tilt, 9deg))
    scale(var(--tilt-s, 0.962));
  transition: box-shadow 1200ms var(--ease);
  will-change: transform;
}
.jobs-window.is-playing.window-tilt { transform: none; }

.titlebar {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 46px;
  padding: 0 14px;
  background: linear-gradient(180deg, #fbfbfa, #f4f4f3);
  border-bottom: 1px solid rgba(0,0,0,.07);
}
.titlebar p {
  margin: 0;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  color: #6b6b6b;
}
.win-path {
  flex: 1;
  min-width: 0;
  font-family: var(--mono);
  font-size: 11.5px !important;
  font-weight: 400 !important;
  letter-spacing: 0;
  color: var(--faint) !important;
  text-align: left !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.win-tools { display: none; gap: 2px; flex: none; }
.wt {
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 4px 10px 3px;
  border-radius: 7px;
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--faint);
}
.wt.is-on { background: rgba(8,9,10,.07); color: var(--ink-2); }
.wt i {
  display: block;
  width: 13px;
  height: 13px;
  border-radius: 3px;
  border: 1.2px solid currentColor;
  opacity: 0.7;
}
.wt i.ti-rows { border-radius: 2px; border-width: 1.2px 0; height: 11px; }
.wt i.ti-dots {
  border: 0;
  height: 3px;
  width: 13px;
  border-radius: 3px;
  background:
    radial-gradient(circle 1.5px at 2px 50%, currentColor 100%, transparent),
    radial-gradient(circle 1.5px at 6.5px 50%, currentColor 100%, transparent),
    radial-gradient(circle 1.5px at 11px 50%, currentColor 100%, transparent);
}

/* status bar — a window without one never looks like software */
.win-foot {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  height: 32px;
  padding: 0 16px;
  background: #f4f4f3;
  border-top: 1px solid rgba(0,0,0,.07);
}
.win-foot p {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.02em;
  color: var(--faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wf-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: none;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34,197,94,.16);
}
.dots { display: flex; gap: 8px; padding-left: 4px; }
.dots i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.dots i:nth-child(1) { background: #ff5f57; }
.dots i:nth-child(2) { background: #febc2e; }
.dots i:nth-child(3) { background: #28c840; }

.desk {
  display: grid;
  min-height: 580px;
  background: #fff;
}
.desk-ops { background: #f7f7f5; }
.thread-ops {
  background-color: #fafaf8 !important;
  background-image: none !important;
}
.ops-mark {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #0a0a0a;
  flex: none;
}
.log-ops {
  gap: 10px;
  padding-top: 20px;
}
.log-ops .stamp {
  background: #ecece8;
  color: var(--mute);
}
.act {
  max-width: 46rem;
  padding: 13px 15px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--e1);
}
.act p { margin: 7px 0 0; font-size: 15px; line-height: 1.45; }
.tag {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--faint);
}
.tag time { flex: none; }
/* one tone per surface it touched — the log reads as a system, not a list */
.cat {
  flex: none;
  padding: 2px 7px;
  border-radius: 5px;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: #eceef0;
  color: #5a6068;
}
.cat.is-mail { background: #e4efff; color: #1f5fc0; }
.cat.is-cal { background: #eee7ff; color: #5b3fbe; }
.cat.is-res { background: #dff3ee; color: #17705e; }
.cat.is-exp { background: #fdf0d9; color: #8a5c10; }
.cat.is-form { background: #e7ecf6; color: #3c5083; }
.cat.is-file { background: #ecedef; color: #545a62; }
.cat.is-cron { background: #e2f4e3; color: #22683a; }
.cat.is-you { background: #101214; color: #fff; }
.cat.is-gate { background: #101214; color: #fff; }

.act.is-gate {
  border-color: rgba(8,9,10,.16);
  box-shadow: inset 3px 0 0 #0a0a0a, var(--e2);
}
.sidebar {
  display: none;
  padding: 10px 8px;
  background: #f4f4f4;
  border-right: 1px solid rgba(0,0,0,.06);
}
.side-search {
  margin: 0 8px 10px;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  color: #b0b0b0;
  font-size: 13px;
}
.side-h {
  margin: 14px 10px 5px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #a8adb3;
}
.chat-row {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  gap: 11px;
  align-items: center;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  text-align: left;
  border-radius: 9px;
  color: var(--ink);
  transition: background 260ms var(--ease);
}
.chat-row img, .ghost {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
}
.ghost { background: #ddd; }
.ghost.saved { background: #3390ec; }

/* typed glyphs — a queue of identical grey circles read as broken avatars */
.gl {
  position: relative;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: #e2e4e7;
  box-shadow: inset 0 0 0 1px rgba(8,9,10,.05);
}
.gl::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 11px;
  height: 9px;
  border-radius: 1.5px;
  background: #8d949c;
}
.gl-stack::after {
  height: 3px;
  border-radius: 2px;
  box-shadow: 0 3.5px 0 currentColor, 0 7px 0 currentColor;
  color: #b2b8bf;
  margin-top: 5px;
}
.gl-mail::after { width: 12px; }
.gl-mail::before {
  /* the flap: a corner rotated to point down, drawn in the tile colour */
  content: "";
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  margin: -5px 0 0 -3.5px;
  border-left: 1.4px solid #e2e4e7;
  border-top: 1.4px solid #e2e4e7;
  transform: rotate(-135deg);
}
.chat-row.is-on .gl-mail::before { border-color: var(--tg); }
.gl-send::after { clip-path: polygon(0 0, 100% 50%, 0 100%, 22% 50%); width: 12px; height: 11px; }
.gl-card::after { border-radius: 2px; box-shadow: inset 0 3px 0 rgba(255,255,255,.85); }
.gl-form::after { clip-path: polygon(0 0, 72% 0, 100% 26%, 100% 100%, 0 100%); height: 11px; width: 9px; }
.gl-clock::after { border-radius: 50%; width: 11px; height: 11px; }
.gl-clock::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  margin: auto;
  width: 1.4px;
  height: 4px;
  border-radius: 2px;
  background: #e2e4e7;
  margin-top: 6px;
}
.chat-row.is-on .gl { background: rgba(255,255,255,.24); box-shadow: none; }
.chat-row.is-on .gl::after { background: #fff; }
.chat-row.is-on .gl-stack::after { color: rgba(255,255,255,.6); }
.chat-row.is-on .gl-clock::before { background: var(--tg); }

.chat-row em {
  font-family: var(--mono);
  font-size: 10px;
  font-style: normal;
  color: #a8adb3;
}
.chat-row em.is-hot {
  padding: 1px 6px;
  border-radius: 999px;
  background: #f0b429;
  color: #3d2a00;
}
.chat-row.is-on em { color: rgba(255,255,255,.8); }
.chat-row b { display: block; font-size: 13.5px; font-weight: 500; }
.chat-row small {
  display: block;
  color: var(--mute);
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-row time { font-size: 11px; color: var(--mute); align-self: start; padding-top: 2px; }
.chat-row.is-on {
  background: var(--tg);
  color: #fff;
}
.chat-row.is-on small,
.chat-row.is-on time { color: rgba(255,255,255,.78); }
.chat-row.is-mute { opacity: 0.55; }

.thread {
  display: flex;
  flex-direction: column;
  min-height: 540px;
  background-color: #8eabc4;
  background-image: url("assets/tg-wall.svg");
  background-size: 280px 280px;
}
.thread-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.thread-head img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}
.thread-name { margin: 0; font-size: 14px; font-weight: 500; }
.thread-meta { margin: 0; font-size: 12px; color: var(--mute); }

.log {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 12px 8px;
  overflow-y: auto;
  min-height: 240px;
}
.stamp {
  align-self: center;
  margin: 4px 0 10px;
  padding: 3px 10px;
  background: rgba(0,0,0,.18);
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
}
.row { display: flex; max-width: 78%; }
.row.me { align-self: flex-end; }
.row.them { align-self: flex-start; }
.bubble {
  position: relative;
  margin: 0;
  padding: 7px 12px 16px 10px;
  border-radius: 12px;
  font-size: 15px;
  line-height: 1.35;
  box-shadow: 0 1px 1px rgba(0,0,0,.08);
}
.bubble time {
  position: absolute;
  right: 8px;
  bottom: 3px;
  font-size: 10px;
  color: rgba(0,0,0,.38);
}
.row.me .bubble {
  background: var(--tg-bubble);
  border-bottom-right-radius: 4px;
}
.row.them .bubble {
  background: #fff;
  border-bottom-left-radius: 4px;
}
.row.them.owner .bubble { box-shadow: inset 3px 0 0 #0a0a0a, 0 1px 1px rgba(0,0,0,.08); }
.row.typing .bubble {
  display: flex;
  gap: 4px;
  align-items: center;
  min-height: 36px;
  padding: 10px 14px;
}
.row.typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #8aa;
  animation: type 1s var(--ease) infinite;
}
.row.typing i:nth-child(2) { animation-delay: .12s; }
.row.typing i:nth-child(3) { animation-delay: .24s; }
@keyframes type {
  0%, 100% { opacity: .35; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-2px); }
}

.chips {
  display: flex;
  gap: 6px;
  padding: 0 12px 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.thread-ops .chips {
  padding-top: 8px;
  border-top: 1px solid var(--line);
  background: #fafaf8;
}
.chips button {
  flex: none;
  min-height: 34px;
  padding: 6px 12px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.94);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
  transition: transform 180ms var(--ease);
}

.composer {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 10px 10px;
  background: #fff;
  border-top: 1px solid rgba(0,0,0,.06);
}
.composer-ico {
  width: 36px;
  height: 36px;
  color: #8e8e8e;
  display: grid;
  place-items: center;
  flex: none;
}
.composer-ico svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.composer input {
  flex: 1;
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 20px;
  background: #f4f4f4;
  color: var(--ink);
}
.composer input::placeholder { color: #b0b0b0; }
.composer input:focus { outline: none; background: #eee; }
.composer button {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: var(--tg);
  color: #fff;
  display: grid;
  place-items: center;
  flex: none;
}
.composer button svg { width: 16px; height: 16px; fill: currentColor; }

.desk-ops .chat-row.is-on {
  background: rgba(0, 122, 255, 0.22);
  color: var(--ink);
}
.desk-ops .chat-row.is-on small { color: #525252; }

.day { padding: 24px 20px 72px; }
.day-copy, .catalog-copy { max-width: 36rem; margin-bottom: 28px; }
.day h2, .catalog h2 {
  margin: 0 0 12px;
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.08;
}
.day-copy p, .catalog-copy p { margin: 0; color: var(--mute); }
.day-log {
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 52rem;
  border-top: 1px solid var(--line);
}
.day-log li {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.45;
}
.day-log time {
  color: var(--mute);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  padding-top: 2px;
}


.jobs { padding: 32px var(--inset) 120px; }
.jobs-copy { max-width: none; width: 100%; margin: 0 0 20px; }
.jobs-copy h2, .day h2, .catalog h2 {
  margin: 0 0 14px;
  font-size: clamp(40px, 6.2vw, 68px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.02;
}
.jobs-copy h2 span { color: var(--mute); font-weight: 400; }
.jobs-copy p { margin: 0; color: var(--mute); max-width: 54ch; }
.jobs-caption {
  margin: 0 auto 10px;
  text-align: center;
  font-size: 13px;
  color: var(--mute);
  max-width: none;
  width: 100%;
}
.jobs-caption::before { content: "▶ "; font-size: 9px; }
.flow-tabs {
  display: flex;
  gap: 8px;
  margin: 0 0 16px;
  max-width: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.flow-tabs::-webkit-scrollbar { display: none; }
.flow-tabs button {
  flex: none;
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--mute);
  font-size: 13px;
  font-weight: 500;
}
.flow-tabs button.is-on {
  background: #111;
  color: #fff;
}
.agent-line {
  margin: 0 auto 18px;
  text-align: center;
  max-width: 56ch;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.03em;
  min-height: 1.4em;
}
.jobs-window {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  background: #fff;
  border-radius: 12px;
}
.titlebar.finder-bar {
  grid-template-columns: 72px 1fr auto;
  height: 52px;
  background: #ececec;
}
.finder-name {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
}
.finder-name p { margin: 0; }
.agent-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 3px 8px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.agent-live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #32d74b;
  box-shadow: 0 0 0 0 rgba(50, 215, 75, .55);
  animation: livePulse 1.6s ease-out infinite;
}
.jobs-window.is-manual .agent-live::before {
  background: #febc2e;
  animation: none;
}
@keyframes livePulse {
  0% { box-shadow: 0 0 0 0 rgba(50, 215, 75, .5); }
  100% { box-shadow: 0 0 0 7px rgba(50, 215, 75, 0); }
}
.agent-cursor {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 30;
  width: 22px;
  height: 26px;
  pointer-events: none;
}
.agent-cursor[hidden] { display: none; }
.agent-cursor svg { display: block; transform-origin: 4px 2px; }
.agent-cursor .ring {
  position: absolute;
  left: 0;
  top: 0;
  width: 12px;
  height: 12px;
  margin: -5px 0 0 -5px;
  border: 2px solid #0a64fa;
  border-radius: 50%;
  opacity: 0;
}
.agent-cursor.is-click .ring { animation: cursorPing 380ms ease-out; }
.agent-cursor.is-click svg { transform: translate(1px, 2px) scale(0.86); }
@keyframes cursorPing {
  from { transform: scale(0.35); opacity: 0.95; }
  to { transform: scale(3.4); opacity: 0; }
}
.msg em {
  font-style: normal;
  font-weight: 400;
}
.msg.typing {
  display: none;
  align-self: flex-start;
  min-width: 72px;
}
.msg.typing.is-in { display: block; }
.msg.typing i {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 6px 3px 0 0;
  border-radius: 50%;
  background: #c5c5c5;
  animation: typeDot 1s ease-in-out infinite;
}
.msg.typing i:nth-child(2) { animation-delay: .15s; }
.msg.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typeDot {
  0%, 80%, 100% { opacity: .25; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-2px); }
}
.has-caret::after {
  content: "";
  display: inline-block;
  width: 1.5px;
  height: 12px;
  margin-left: 2px;
  background: #111;
  vertical-align: -1px;
  animation: caret 1s step-end infinite;
}
.digest article {
  position: relative;
  opacity: 0;
  pointer-events: none;
}
.digest article.is-in {
  opacity: 1;
  pointer-events: auto;
}
.digest article.is-skip {
  opacity: .42;
}
.digest article.is-skip [data-chip] { color: #8e8e8e; }
.digest [data-chip],
.digest em[data-chip] {
  position: absolute;
  right: 12px;
  top: 12px;
  font-size: 10px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #c2410c;
}
.jobs-window.is-playing .brief-list li,
.jobs-window.is-playing .pair-grid article,
.jobs-window.is-playing .slide-cards article,
.jobs-window.is-playing .sheet tbody tr {
  opacity: 0;
}
.jobs-window.is-playing .brief-list li.is-in,
.jobs-window.is-playing .pair-grid article.is-in,
.jobs-window.is-playing .slide-cards article.is-in,
.jobs-window.is-playing .sheet tbody tr.is-in {
  opacity: 1;
  transition: opacity 200ms ease;
}
.jobs-window.is-playing .approve-bar {
  opacity: 0;
  transform: translateY(8px);
}
.jobs-window.is-playing .approve-bar.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 240ms ease, transform 240ms ease;
}
.jobs-window.is-manual .digest article,
.jobs-window.is-manual .brief-list li,
.jobs-window.is-manual .pair-grid article,
.jobs-window.is-manual .slide-cards article,
.jobs-window.is-manual .sheet tbody tr,
.jobs-window.is-manual .approve-bar {
  opacity: 1;
  transform: none;
}
@keyframes hitPulse {
  0% { transform: scale(0.97); }
  45% { transform: scale(1.035); }
  100% { transform: scale(1); }
}
.quicklook p.is-fresh { animation: lookFresh 420ms var(--ease); }
@keyframes lookFresh {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}
.jobs-window.is-playing.window-tilt { transform: none; }
.finder-tools {
  display: none;
  align-items: center;
  gap: 10px;
  padding-right: 10px;
  font-size: 12px;
  font-weight: 500;
  color: #6b6b6b;
}
.finder-search {
  min-width: 132px;
  padding: 5px 12px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 8px;
  color: #b0b0b0;
  font-weight: 400;
}
.jobs-desk {
  display: grid;
  background: #f6f6f6;
  min-height: 560px;
}
.jobs-nav {
  display: flex;
  gap: 4px;
  padding: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid rgba(0,0,0,.06);
  background: #e9e9e9;
}
.jobs-nav::-webkit-scrollbar { display: none; }
.jobs-nav > p {
  display: none;
  margin: 16px 8px 6px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8e8e8e;
}
.jobs-nav > p:first-child { margin-top: 6px; }
.jobs-nav button {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  min-width: max-content;
  padding: 7px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  text-align: left;
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
}
.jobs-nav button.is-on {
  background: rgba(0, 122, 255, 0.22);
  color: var(--ink);
}
.bot-row { width: 100%; }
.bot-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #cfcfcf;
  flex: none;
}
.bot-row.is-on .bot-dot { background: #32d74b; }
.fold {
  position: relative;
  width: 16px;
  height: 12px;
  flex: none;
  border-radius: 1px 2px 1px 1px;
  background: linear-gradient(#6ec3f5, #2f9fe8);
  box-shadow: 0 1px 1px rgba(0,0,0,.12);
}
.fold::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 0;
  width: 7px;
  height: 5px;
  border-radius: 2px 2px 0 0;
  background: #5bb7ef;
}
.fold.loc { background: linear-gradient(#cfcfcf, #a8a8a8); }
.fold.loc::before { background: #bdbdbd; }

.jobs-stage {
  position: relative;
  min-height: 520px;
  overflow: hidden;
  background: #fff;
}
.job-panel { display: none; min-height: 520px; }
.job-panel.is-on { display: block; animation: jobIn 420ms var(--ease) both; }
.job-panel[hidden] { display: none !important; }
@keyframes jobIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.tile.is-hit,
.jobs-nav button.is-hit,
.float-win.is-hit,
.alert.is-hit,
.mail-row.is-hit,
.brief-list li.is-hit,
.sheet tr.is-hit,
.slide-cards article.is-hit,
.deck-mods article.is-hit,
.tool-pills li.is-hit,
.digest article.is-hit,
.pair-grid article.is-hit,
.approve-bar.is-hit {
  animation: hitPulse 320ms ease-out;
}
.gtm-work {
  display: grid;
  grid-template-areas: "art" "chat";
  min-height: 520px;
  background: #f4f4f2;
}
.bot-chat { grid-area: chat; }
.bot-artifact { grid-area: art; }
.bot-chat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 14px 16px;
  max-height: 210px;
  overflow-y: auto;
  background: #ececec;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.msg {
  display: none;
  margin: 0;
  max-width: 92%;
  padding: 8px 10px 9px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
  font-size: 13px;
  line-height: 1.4;
}
.msg.is-in {
  display: block;
  animation: sceneIn 280ms var(--ease) both;
}
.msg span {
  display: block;
  margin-bottom: 3px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #8e8e8e;
}
.msg.you {
  align-self: flex-end;
  background: #111;
  color: #fff;
}
.msg.you span { color: rgba(255,255,255,.55); }
.bot-artifact {
  padding: 18px 16px 22px;
  background: #fff;
}
.scene-card[hidden] { display: none !important; }
.scene-card h3 {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.03em;
}
.scene-kicker {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mute);
}
.scene-note {
  margin: 0 0 14px;
  color: var(--mute);
  font-size: 13px;
  line-height: 1.45;
}
.tool-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}
.tool-pills li {
  padding: 6px 10px;
  border-radius: 999px;
  background: #f0f0ee;
  font-size: 12px;
  font-weight: 500;
  opacity: .28;
}
.tool-pills li.is-on {
  opacity: 1;
  background: #111;
  color: #fff;
}
.digest {
  display: grid;
  gap: 10px;
}
.digest article {
  padding: 12px 12px 10px;
  border-radius: 12px;
  background: #f6f6f4;
}
.digest article p { margin: 0 0 6px; font-size: 13px; }
.digest article p:first-child { font-size: 13px; }
.digest blockquote {
  margin: 8px 0;
  padding: 8px 10px;
  border-left: 2px solid #111;
  background: #fff;
  font-size: 13px;
  line-height: 1.4;
}
.digest span {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #0a64fa;
}
.pair-grid {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}
.pair-grid article {
  padding: 10px 12px;
  border-radius: 12px;
  background: #f6f6f4;
}
.pair-grid b { display: block; font-size: 12px; font-weight: 500; }
.pair-sub {
  margin: 2px 0 6px;
  font-size: 11px;
  color: var(--mute);
}
.pair-grid p { margin: 0; font-size: 13px; line-height: 1.4; }
.approve-bar {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: #111;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
}
.rundown {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}
.rundown li {
  padding: 10px 12px;
  border-radius: 12px;
  background: #f6f6f4;
  font-size: 13px;
  line-height: 1.4;
}
.rundown b { display: block; margin-bottom: 2px; font-weight: 500; }
.sf-note {
  margin: 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: #141414;
  color: #d4d4d4;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.65;
}
.product-ans {
  margin: 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: #f6f6f4;
  font-size: 14px;
  line-height: 1.45;
}
.scene-card.is-on .brief-list li,
.scene-card.is-on .digest article,
.scene-card.is-on .pair-grid article,
.scene-card.is-on .slide-cards article,
.scene-card.is-on .rundown li {
  animation: sceneIn 360ms var(--ease) both;
}
.scene-card.is-on .brief-list li:nth-child(2),
.scene-card.is-on .digest article:nth-child(2),
.scene-card.is-on .pair-grid article:nth-child(2),
.scene-card.is-on .slide-cards article:nth-child(2),
.scene-card.is-on .rundown li:nth-child(2) { animation-delay: 90ms; }
.scene-card.is-on .brief-list li:nth-child(3),
.scene-card.is-on .pair-grid article:nth-child(3),
.scene-card.is-on .slide-cards article:nth-child(3),
.scene-card.is-on .rundown li:nth-child(3) { animation-delay: 160ms; }
.scene-card.is-on .pair-grid article:nth-child(4) { animation-delay: 220ms; }
@keyframes sceneIn {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: none; }
}
.jobs-window.is-playing .scene-card.is-on .brief-list li,
.jobs-window.is-playing .scene-card.is-on .digest article,
.jobs-window.is-playing .scene-card.is-on .pair-grid article,
.jobs-window.is-playing .scene-card.is-on .slide-cards article,
.jobs-window.is-playing .scene-card.is-on .rundown li,
.jobs-window.is-playing .msg.is-in {
  animation: none;
}

.icon-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 10px;
  padding: 22px 16px 28px;
}
.tile {
  border: 0;
  background: transparent;
  padding: 8px 6px 10px;
  border-radius: 10px;
  text-align: center;
  color: inherit;
}
.tile.is-on { background: rgba(0, 122, 255, 0.14); }
.tile.is-dim { opacity: .55; }
.tile figure {
  position: relative;
  margin: 0 auto 8px;
  width: 100%;
  max-width: 148px;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
  background: #ececec;
  box-shadow: 0 10px 28px rgba(0,0,0,.12);
}
.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tile em {
  position: absolute;
  right: 6px;
  bottom: 6px;
  z-index: 2;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(10,10,10,.72);
  color: #fff;
  font-size: 9px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.tile b {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
}
.tile small {
  display: block;
  margin-top: 2px;
  color: var(--mute);
  font-size: 11.5px;
}
.mail-thumb, .cal-thumb, .wave, .folder-thumb, .sheet-thumb, .doc-thumb {
  display: grid;
  place-items: center;
  background: #f3f3f1;
}
.mail-thumb span {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #0a0a0a;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 500;
}
.mail-thumb.pale span { background: #d4d4d4; color: #0a0a0a; }
.cal-thumb { background: #fff; color: #c2410c; }
.cal-thumb span { font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.cal-thumb strong { display: block; font-size: 28px; font-weight: 500; color: var(--ink); line-height: 1; }
.wave { display: flex; align-items: end; justify-content: center; gap: 4px; padding-bottom: 18px; background: #141414; }
.wave i { width: 5px; border-radius: 2px; background: #fff; }
.wave i:nth-child(1) { height: 18px; }
.wave i:nth-child(2) { height: 32px; }
.wave i:nth-child(3) { height: 22px; }
.wave i:nth-child(4) { height: 38px; }
.wave i:nth-child(5) { height: 16px; }
.folder-thumb {
  background: transparent;
  box-shadow: none;
}
.folder-thumb::after {
  content: "";
  width: 72px;
  height: 54px;
  border-radius: 4px;
  background: linear-gradient(#6ec3f5, #2f9fe8);
  box-shadow: 0 8px 20px rgba(47,159,232,.35);
}
.sheet-thumb { gap: 6px; padding: 16px; align-content: center; }
.sheet-thumb span { display: block; height: 8px; width: 100%; background: #e5e5e5; border-radius: 4px; }
.sheet-thumb span:nth-child(2) { width: 70%; }
.doc-thumb { background: #fff; }
.doc-thumb::after {
  content: "";
  width: 54px;
  height: 70px;
  border-radius: 4px 10px 4px 4px;
  background:
    linear-gradient(135deg, transparent 50%, #d7e6f7 50%) no-repeat 100% 0 / 16px 16px,
    #f7f7f7;
  box-shadow: 0 2px 8px rgba(0,0,0,.1), inset 0 0 0 1px rgba(0,0,0,.06);
}

.quicklook {
  display: none;
  padding: 20px 18px 24px;
  background: #fafafa;
  border-top: 1px solid rgba(0,0,0,.06);
}
.quicklook figure[hidden] { display: none; }
.jobs-window.is-computer .quicklook { display: none; }
.jobs-window.is-computer .desktop { overflow: visible; min-height: 0; }
@media (min-width: 880px) {
  .jobs-window.is-computer .jobs-desk { grid-template-columns: 200px 1fr; }
  .gtm-work {
    grid-template-areas: "chat art";
    grid-template-columns: minmax(240px, 32%) 1fr;
    min-height: 560px;
  }
  .bot-chat {
    max-height: none;
    border-bottom: 0;
    border-right: 1px solid rgba(0,0,0,.06);
  }
  .bot-artifact { padding: 22px 22px 28px; }
  .pair-grid { grid-template-columns: 1fr 1fr; }
}
.quicklook figure {
  margin: 0 0 16px;
  border-radius: 12px;
  overflow: hidden;
  background: #ececec;
  box-shadow: 0 16px 40px rgba(0,0,0,.1);
}
.quicklook img { width: 100%; height: 180px; object-fit: cover; }
.look-kicker {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mute);
}
.quicklook h3 {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.03em;
}
.quicklook p { margin: 0; color: var(--mute); font-size: 14px; line-height: 1.5; }

.lock-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
}
.lock-bar i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #0a0a0a;
}

.desktop {
  position: relative;
  min-height: 520px;
  padding: 20px 16px 40px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.35), rgba(10,10,10,.28)),
    url("assets/fan-shop.jpg") center / cover;
}
.demo-desk { display: grid; gap: 12px; }
.app-win {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 22px 56px rgba(0,0,0,.24);
  color: var(--ink);
  text-align: left;
}
.app-win header {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 10px;
  background: #f0f0f0;
  font-size: 11px;
  color: #6b6b6b;
}
.app-win header i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d4d4d4;
}
.app-win header i:first-child { background: #ff5f57; }
.app-win header i:nth-child(2) { background: #febc2e; }
.app-win header i:nth-child(3) { background: #28c840; }
.app-win header span { margin-left: 6px; font-weight: 500; }
.app-win header em {
  margin-left: auto;
  font-style: normal;
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #8e8e8e;
}
.mail-list { padding: 6px; }
.mail-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  text-align: left;
  color: inherit;
}
.mail-row b { font-size: 13px; font-weight: 500; }
.mail-row small {
  grid-column: 1;
  color: var(--mute);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mail-row [data-chip] {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #8e8e8e;
}
.mail-row.is-on { background: rgba(0, 122, 255, 0.14); }
.mail-row.is-filed { opacity: .42; }
.mail-row.is-filed [data-chip] { color: #b0b0b0; }
.compose-meta {
  padding: 10px 14px 0;
  font-size: 12px;
}
.compose-meta p { margin: 0 0 6px; }
.compose-meta span {
  display: inline-block;
  width: 52px;
  color: #8e8e8e;
}
.compose-body {
  min-height: 88px;
  margin: 0;
  padding: 10px 14px 12px;
  font-size: 14px;
  line-height: 1.45;
}
.compose-body .caret {
  display: none;
  width: 1.5px;
  height: 13px;
  margin-left: 1px;
  background: #0a0a0a;
  vertical-align: -1px;
}
.compose-body.is-typing .caret { display: inline-block; animation: caret 1s step-end infinite; }
@keyframes caret { 50% { opacity: 0; } }
.lock-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(100% - 20px);
  margin: 0 10px 12px;
  padding: 9px 12px;
  border: 0;
  border-radius: 8px;
  background: #111;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
}
.lock-cta span {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.lock-cta.is-locked {
  background: #ececec;
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px #0a64fa;
}
.lock-cta.is-locked span { color: #0a64fa; }
.form-kicker {
  margin: 0;
  padding: 10px 14px 6px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mute);
}
.form-grid { padding: 0 10px 8px; }
.form-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 9px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font-size: 13px;
}
.form-row.is-filled { background: rgba(0, 122, 255, 0.1); }
.form-row [data-qty] {
  min-width: 48px;
  padding: 4px 8px;
  border-radius: 6px;
  background: #f3f3f3;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--mute);
}
.form-row.is-filled [data-qty] { background: #fff; color: var(--ink); font-weight: 500; }
.term-app { background: #141414; }
.term-app header { background: #1c1c1c; color: #9a9a9a; }
.term-app pre {
  margin: 0;
  padding: 12px 14px 16px;
  color: #d4d4d4;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  line-height: 1.7;
}
.term-app pre span { display: block; opacity: .2; }
.term-app pre span.is-in { opacity: 1; }
.compose-app, .form-app, .term-app,
.digest-app, .sheet-app, .slide-app { opacity: .38; }
.brief-app { opacity: .7; }
.demo-desk.is-prep .brief-app,
.demo-desk.is-cos .brief-app { opacity: 1; }
.demo-desk.is-inbox .digest-app,
.demo-desk.is-prospect .sheet-app,
.demo-desk.is-slides .slide-app,
.demo-desk.is-done .digest-app,
.demo-desk.is-done .slide-app { opacity: 1; }

.brief-list {
  margin: 0;
  padding: 8px 10px 14px;
  list-style: none;
}
.brief-list li {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 8px;
  padding: 10px 8px;
  border-radius: 8px;
}
.scene-card .brief-list li { background: #f6f6f4; margin-bottom: 6px; }
.scene-card .slide-cards article { opacity: 1; }
.figma {
  display: grid;
  gap: 8px;
}
.figma-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  background: #f0f0f0;
  font-size: 11px;
  color: #6b6b6b;
}
.figma-bar span {
  font-weight: 500;
  color: var(--ink);
}
.figma-bar b { font-weight: 500; color: var(--ink); }
.figma-bar em { margin-left: auto; font-style: normal; }
.figma-bar i { font-style: normal; color: #8e8e8e; }
.figma-stage {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 10px;
  align-items: stretch;
}
.figma-pages {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.figma-pages li {
  flex: 1;
  display: grid;
  place-items: center;
  border-radius: 4px;
  background: #ececec;
  color: #8e8e8e;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}
.figma-pages li.is-on {
  background: #fff;
  color: var(--ink);
  box-shadow: inset 0 0 0 2px #0a64fa;
}
.figma-pages li.is-dim { opacity: .4; }
.deck {
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 5% 5.5% 4.5%;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(0,0,0,.14), inset 0 0 0 1px rgba(0,0,0,.06);
  color: var(--ink);
}
.deck-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.deck-mark {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: #111;
}
.deck-brand strong {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.deck-brand strong.is-stale { color: #b0b0b0; text-decoration: line-through; }
.deck-brand span {
  margin-left: auto;
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #8e8e8e;
}
.deck-title {
  margin: 0 0 2px;
  font-size: clamp(18px, 2.4vw, 26px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.1;
}
.deck-sub {
  margin: 0 0 10px;
  font-size: 11px;
  color: #8e8e8e;
}
.deck-mods {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  flex: 1;
  min-height: 0;
}
.deck-mods article {
  display: flex;
  flex-direction: column;
  padding: 10px 10px 8px;
  border-radius: 6px;
  background: #f4f4f2;
}
.deck-mods b {
  display: block;
  margin-bottom: 6px;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8e8e8e;
}
.deck-mods p {
  margin: 0;
  font-size: clamp(11px, 1.15vw, 13.5px);
  line-height: 1.35;
  letter-spacing: -0.02em;
}
.deck-mods p.is-ph { color: #b0b0b0; }
.deck-mods article.is-on { box-shadow: inset 0 0 0 1.5px #0a64fa; background: #fff; }
.brief-list li.is-on { background: rgba(0, 122, 255, 0.12); }
.brief-list time {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--mute);
  padding-top: 2px;
}
.brief-list b { display: block; font-size: 13px; font-weight: 500; }
.brief-list small { color: var(--mute); font-size: 12px; }
.draft-card {
  display: none;
  padding: 0 10px 4px;
}
.draft-card.is-in { display: block; }
.sheet {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.sheet th {
  text-align: left;
  font-weight: 500;
  color: #8e8e8e;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.sheet td { padding: 9px 10px; border-bottom: 1px solid rgba(0,0,0,.04); }
.sheet tr.is-skip { opacity: .45; }
.sheet tr.is-on { background: rgba(0, 122, 255, 0.12); }
.slide-board { padding: 12px 14px 16px; }
.slide-kicker {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mute);
}
.slide-cards { display: grid; gap: 8px; }
.slide-cards article {
  padding: 10px 12px;
  border-radius: 10px;
  background: #f6f6f4;
  opacity: .2;
}
.slide-cards article.is-in { opacity: 1; }
.slide-cards b { display: block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); margin-bottom: 4px; }
.slide-cards p { margin: 0; font-size: 13px; line-height: 1.4; }

.float-win {
  position: relative;
  display: block;
  width: 100%;
  max-width: 340px;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  color: inherit;
  text-align: left;
  box-shadow: 0 24px 60px rgba(0,0,0,.28);
}
.float-win.is-on { outline: 2px solid rgba(0,122,255,.7); outline-offset: 2px; }
.float-win header {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  background: #f0f0f0;
  font-size: 11px;
  color: #6b6b6b;
}
.float-win header i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d4d4d4;
}
.float-win header i:first-child { background: #ff5f57; }
.float-win header i:nth-child(2) { background: #febc2e; }
.float-win header i:nth-child(3) { background: #28c840; }
.float-win header span { margin-left: 6px; }
.float-win img { width: 100%; height: 120px; object-fit: cover; }
.float-win p, .float-win pre {
  margin: 0;
  padding: 10px 12px 12px;
  font-size: 12px;
  color: var(--mute);
}
.float-win pre {
  margin: 0;
  background: #141414;
  color: #d4d4d4;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  line-height: 1.65;
  text-align: left;
}
.mini-files { display: flex; gap: 12px; padding: 16px 12px 0; }
.mini-files .file { opacity: 1; transform: none; }

.alerts {
  display: grid;
  gap: 12px;
  padding: 20px 16px 28px;
}
.alert {
  padding: 18px 16px;
  border: 0;
  border-radius: 16px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 12px 40px rgba(0,0,0,.08), inset 0 0 0 1px rgba(0,0,0,.06);
  text-align: left;
  color: inherit;
}
.alert.is-on { box-shadow: 0 12px 40px rgba(0,0,0,.08), inset 0 0 0 2px #0a64fa; }
.alert b { display: block; font-size: 16px; font-weight: 500; }
.alert p { margin: 6px 0 10px; color: var(--mute); font-size: 13px; }
.alert span {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mute);
}

.finder-status {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 14px;
  background: #f3f3f3;
  border-top: 1px solid rgba(0,0,0,.06);
  font-size: 11px;
  color: #6b6b6b;
}

.knows { padding: 24px 20px 80px; overflow: hidden; }
.knows-copy { max-width: 28rem; margin-bottom: 28px; }
.knows h2, .versus h2, .faq h2 {
  margin: 0 0 12px;
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.08;
}
.knows-copy p { margin: 0; color: var(--mute); }
.rail {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 20px;
  padding-bottom: 12px;
  cursor: grab;
  scrollbar-width: none;
}
.rail:active { cursor: grabbing; }
.rail::-webkit-scrollbar { display: none; }
.qa {
  flex: none;
  width: min(78vw, 320px);
  scroll-snap-align: start;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fafafa;
}
.qa-q {
  margin: 0 0 14px;
  padding: 8px 12px;
  background: var(--tg-bubble);
  border-radius: 12px 12px 4px 12px;
  font-size: 14px;
  font-weight: 500;
}
.qa-a {
  margin: 0;
  padding: 8px 12px;
  background: #fff;
  border-radius: 12px 12px 12px 4px;
  box-shadow: 0 1px 1px rgba(0,0,0,.06);
  font-size: 14px;
  color: var(--ink);
}
.qa-owner .qa-a { box-shadow: inset 3px 0 0 #0a0a0a, 0 1px 1px rgba(0,0,0,.06); }

.versus { padding: 72px var(--inset) 96px; }
.versus-grid {
  display: grid;
  gap: 20px;
  margin-top: 32px;
}
.panel-kicker {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
  opacity: 0;
  transform: translateY(8px);
}
.panel.rv-in .panel-kicker {
  opacity: 1;
  transform: none;
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}
.panel-ui {
  min-height: 240px;
  padding: 28px 20px;
  border-radius: 18px;
  text-align: center;
  margin-bottom: 14px;
  opacity: 0;
  transform: translateY(18px) scale(0.97);
}
.panel.rv-in .panel-ui {
  opacity: 1;
  transform: none;
  transition: opacity 600ms var(--ease) 120ms, transform 600ms var(--ease) 120ms;
}
.panel-ui.is-missed { background: #111; color: #f4f4f1; }
.panel-ui.is-live { background: #161616; color: #f4f4f1; }
.panel-time {
  margin: 0 0 20px;
  font-size: 48px;
  font-weight: 500;
  letter-spacing: -0.04em;
}
.panel-note {
  text-align: left;
  max-width: 280px;
  margin: 0 auto;
  padding: 14px 16px;
  background: rgba(255,255,255,.12);
  border-radius: 16px;
  opacity: 0;
  transform: translateY(12px);
}
.panel.rv-in .panel-note {
  opacity: 1;
  transform: none;
  transition: opacity 500ms var(--ease) 320ms, transform 500ms var(--ease) 320ms;
}
.panel-note.is-dim { opacity: 0.55; }
.panel.rv-in .panel-note.is-dim { opacity: 0.55; }
.panel-note p {
  margin: 0;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #c8c8c2;
}
.panel-note strong { display: block; margin: 4px 0 6px; font-size: 15px; font-weight: 500; }
.panel-note span { font-size: 13px; color: #c8c8c2; }
.panel-cap { margin: 0; color: var(--mute); max-width: 36ch; }

.faq { padding: 24px var(--inset) 96px; }
.faq-list { max-width: none; width: 100%; margin: 28px 0 0; }
.faq details {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  font-size: 17px;
  font-weight: 500;
  cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  width: 12px;
  height: 12px;
  flex: none;
  background:
    linear-gradient(var(--ink), var(--ink)) center / 12px 1.5px no-repeat,
    linear-gradient(var(--ink), var(--ink)) center / 1.5px 12px no-repeat;
  transition: transform 240ms var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p {
  margin: 0;
  padding: 0 0 20px;
  color: var(--mute);
  max-width: 52ch;
}
.faq details[open] p { padding-bottom: 20px; }

.btn-finale {
  min-width: 160px;
  transform: scale(0.96);
}
.btn-finale.rv-in { transform: none; }

.story { padding: 8px var(--inset) 96px; }
.story-copy {
  max-width: none;
  width: 100%;
  margin: 0 0 32px;
}
.story-copy h2 {
  margin: 0 0 14px;
  font-size: clamp(36px, 6vw, 56px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.05;
}
.story-copy p { margin: 0; color: var(--mute); max-width: 46ch; }
.offer { padding: 72px var(--inset) 120px; }
.offer h2, .stacks h2 {
  margin: 0 0 16px;
  font-size: clamp(36px, 6vw, 56px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.05;
  max-width: 16ch;
}
.sec-copy { max-width: none; width: 100%; margin: 0 0 28px; }
.sec-copy h2 {
  margin: 0 0 14px;
  font-size: clamp(36px, 6vw, 56px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.05;
}
.sec-copy h2 span,
.story-copy h2 span {
  color: var(--mute);
  font-weight: 400;
}
.sec-copy p { margin: 0; color: var(--mute); max-width: 46ch; }
.band {
  background: #f7f7f5;
}
.surface {
  padding: 24px 22px 22px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  box-shadow: 0 18px 48px rgba(0,0,0,.06);
  height: 100%;
}
.stage-card {
  padding: 22px 22px 26px;
  background: #f7f7f5;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  min-height: 360px;
  box-shadow: inset 0 1px 0 #fff, 0 24px 60px rgba(0,0,0,.06);
}
.buy { max-width: none; width: 100%; margin: 0; }
.buy-tabs {
  display: flex;
  gap: 22px;
  margin: 0 0 18px;
  border-bottom: 1px solid var(--line);
}
.buy-tabs button {
  padding: 0 0 12px;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: none;
  color: var(--mute);
  font-size: 15px;
  font-weight: 500;
  border-radius: 0;
}
.buy-tabs button.is-on {
  color: var(--ink);
  border-bottom-color: var(--ink);
  background: none;
  box-shadow: none;
}
.buy-now {
  margin: 0 0 18px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mute);
}
.buy-stage { min-height: 0; background: transparent; }
.buy-pane { display: none; padding: 0; }
.buy-pane.is-on { display: block; animation: sceneIn 640ms var(--ease) both; }
.buy-pane[hidden] { display: none !important; }
.day-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 16px;
  padding: 8px 0 0;
  list-style: none;
  position: relative;
}
.day-strip li {
  position: relative;
  padding: 16px 14px 14px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: #fff;
  opacity: .72;
  transform: translateY(16px);
  transition: opacity 400ms var(--ease), transform 400ms var(--ease), box-shadow 400ms var(--ease);
}
.day-strip li.is-on {
  opacity: 1;
  transform: none;
  box-shadow: 0 10px 28px rgba(0,0,0,.06);
  border-color: rgba(0,0,0,.06);
}
.day-strip li i {
  display: block;
  width: 8px;
  height: 8px;
  margin-bottom: 10px;
  border-radius: 50%;
  background: #d4d4d4;
}
.day-strip li.is-on i { background: var(--ink); }
.day-strip time {
  display: block;
  margin-bottom: 6px;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 500;
  letter-spacing: -0.06em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.day-strip b { display: block; font-size: 15px; font-weight: 500; }
.day-strip small { color: var(--mute); font-size: 13px; }
.buy-foot { margin: 12px 0 0; color: var(--mute); font-size: 14px; }
.chat-well {
  display: grid;
  gap: 8px;
  max-width: 480px;
  margin: 0;
  padding: 8px 4px 4px;
}
.ping-stack {
  display: grid;
  gap: 10px;
  max-width: 520px;
  margin: 0;
}
.ping {
  padding: 14px 16px 14px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.05);
  opacity: .45;
  transform: translateY(8px) scale(.98);
  transition: opacity 400ms var(--ease), transform 400ms var(--ease);
}
.ping.is-on {
  opacity: 1;
  transform: none;
  box-shadow: 0 16px 40px rgba(0,0,0,.08);
}
.ping header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
  font-size: 14px;
}
.ping b { font-weight: 500; }
.ping time { color: var(--mute); font-size: 12px; font-variant-numeric: tabular-nums; }
.ping p { margin: 0; color: var(--mute); font-size: 14px; line-height: 1.4; }
.board {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.board-kicker {
  margin: 0;
  padding: 14px 20px 8px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mute);
}
.pair-mats {
  display: grid;
  gap: 40px;
  width: 100%;
  max-width: none;
  margin: 0;
}
.mat-kicker {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mute);
}
.mat h3 {
  margin: 0 0 16px;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.03em;
}
.mat-cloud .cloud-lead { color: var(--ink); }
.mat-term .local-term { max-width: 420px; }
.ledger {
  max-width: none;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
.receipt {
  max-width: 400px;
  margin: 0;
  padding: 28px 24px 24px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  box-shadow: var(--shadow);
  font-size: 14px;
}
.receipt-shop {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mute);
}
.receipt-dash {
  margin: 12px 0;
  border: 0;
  border-top: 1px solid var(--line);
  height: 0;
}
.receipt .btn { width: 100%; text-align: center; margin-top: 12px; }
.receipt .slots { padding: 4px 0 12px; }
.receipt .bill th, .receipt .bill td { padding: 12px 0; }
.imsg {
  display: grid;
  gap: 8px;
  max-width: 420px;
}
/* inside the device the shared bubble scale is too heavy; and a real
   thread sits on the keyboard, not at the top of the screen */
.phone .imsg { gap: 6px; align-content: end; margin-top: auto; }
.phone .bubble { font-size: 12.5px; line-height: 1.38; padding: 8px 11px; border-radius: 15px; max-width: 86%; }
.bubble {
  margin: 0;
  padding: 9px 12px 10px;
  border-radius: 16px;
  background: #f0f0ee;
  font-size: 14px;
  line-height: 1.4;
  max-width: 92%;
}
.bubble span {
  display: block;
  margin-bottom: 3px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #8e8e8e;
}
.bubble.me {
  justify-self: end;
  background: #111;
  color: #fff;
}
.bubble.them { justify-self: start; }
.bubble.is-weak { opacity: .72; }
.script {
  display: grid;
  gap: 14px;
  max-width: 560px;
}
.script p {
  margin: 0;
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 16px;
  font-size: 15px;
  line-height: 1.45;
}
.script b {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mute);
  padding-top: 3px;
}
.pager { display: grid; max-width: 640px; }
.pager article {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.pager article.is-on { background: transparent; box-shadow: none; }
.pager article.is-on b { box-shadow: inset 0 -2px 0 var(--ink); }
.pager b { display: inline; font-size: 15px; font-weight: 500; }
.pager p { margin: 4px 0 0; color: #555; font-size: 14px; }
.pager time {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8e8e8e;
  padding-top: 4px;
}
.night-row {
  display: grid;
  gap: 20px;
  width: 100%;
  max-width: none;
  margin: 0;
  justify-items: stretch;
}
.night-cell { margin: 0; display: grid; gap: 20px; justify-items: center; }
.night-cell figcaption {
  max-width: 30ch;
  color: var(--mute);
  font-size: 14.5px;
  line-height: 1.55;
  text-align: center;
}

/* A real device: portrait, glass bezel, status bar, home indicator.
   Landscape boxes with a notch on top read as a mistake. */
.phone {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 292px;
  aspect-ratio: 9 / 18.2;
  margin-inline: auto;
  background: #fff;
  border-radius: 42px;
  padding: 12px 12px 12px;
  box-shadow:
    inset 0 0 0 1px rgba(8,9,10,.08),
    0 0 0 8px #d9dbde,
    0 0 0 9px rgba(8,9,10,.1),
    0 34px 70px -22px rgba(8,9,10,.42);
  overflow: hidden;
}
.island {
  position: absolute;
  z-index: 3;
  top: 11px;
  left: 50%;
  width: 78px;
  height: 21px;
  margin-left: -39px;
  border-radius: 12px;
  background: #111;
}
.phone::after {
  content: "";
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 7px;
  width: 104px;
  height: 4px;
  margin-left: -52px;
  border-radius: 4px;
  background: rgba(8,9,10,.26);
}

/* status bar */
.ph-stat {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 21px;
  padding: 0 6px;
  flex: none;
}
.ph-stat time {
  margin-right: auto;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink);
  padding-left: 4px;
}
.ph-ico { flex: none; opacity: 0.85; }
.ph-sig {
  width: 15px;
  height: 9px;
  background:
    linear-gradient(currentColor, currentColor) 0 100% / 2.5px 3px no-repeat,
    linear-gradient(currentColor, currentColor) 4.2px 100% / 2.5px 5px no-repeat,
    linear-gradient(currentColor, currentColor) 8.4px 100% / 2.5px 7px no-repeat,
    linear-gradient(currentColor, currentColor) 12.6px 100% / 2.5px 9px no-repeat;
}
.ph-wifi {
  width: 12px;
  height: 9px;
  border-radius: 50% 50% 0 0;
  border: 2px solid currentColor;
  border-bottom: 0;
  transform: translateY(1px);
}
.ph-bat {
  width: 20px;
  height: 10px;
  border-radius: 3px;
  border: 1px solid currentColor;
  padding: 1.4px;
  opacity: 0.55;
}
.ph-bat::after {
  content: "";
  display: block;
  width: 72%;
  height: 100%;
  border-radius: 1px;
  background: currentColor;
}

/* chat app */
.phone header {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0 9px;
  padding: 8px 4px 12px;
  border-bottom: 1px solid var(--line-2);
  margin-bottom: 12px;
}
.ph-av {
  grid-row: 1 / span 2;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(160deg, #c9ced4, #9ba1a8);
}
.phone header b { font-size: 13px; font-weight: 500; align-self: end; }
.phone header small {
  font-family: var(--mono);
  font-size: 9.5px;
  color: #4aa85c;
  align-self: start;
}
.ph-input {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 18px;
  padding: 9px 6px 9px 14px;
  border-radius: 999px;
  background: var(--paper-2);
  box-shadow: inset 0 0 0 1px var(--line);
}
.ph-input span { flex: 1; font-size: 12.5px; color: var(--faint); }
.ph-input i {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--line);
  flex: none;
}

/* lock screen */
.ph-lock { padding: 22px 0 20px; text-align: center; flex: none; }
.ph-time {
  margin: 0;
  font-family: var(--mono);
  font-size: 54px;
  font-weight: 200;
  line-height: 1;
  letter-spacing: -0.045em;
  color: #fff;
}
.ph-date {
  margin: 8px 0 0;
  font-size: 12.5px;
  color: rgba(255,255,255,.62);
}
.ph-swipe {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: auto 0 22px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.42);
}
.ph-swipe span {
  width: 22px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5));
}
.phone:not(.is-agent) .bubble.me { background: #0a64fa; }
.phone.is-agent {
  /* night wallpaper, not flat black — the screen should look switched on */
  background:
    radial-gradient(78% 46% at 26% 8%, rgba(58,86,140,.5), transparent 62%),
    radial-gradient(64% 40% at 84% 92%, rgba(96,72,120,.34), transparent 66%),
    linear-gradient(180deg, #10141a, #07090c);
  color: #f3f3f0;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 0 0 8px #22262b,
    0 0 0 9px rgba(0,0,0,.5),
    0 34px 70px -22px rgba(0,0,0,.55);
}
.phone.is-agent .island { background: #000; }
.phone.is-agent .ph-stat time { color: #fff; }
.phone.is-agent .ph-stat { color: #fff; }
.phone.is-agent .lock-card {
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(18px) saturate(150%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
}
.phone.is-agent .lock-card strong { color: #fff; }
.phone.is-agent .lock-card p,
.phone.is-agent .lock-card span { color: rgba(255,255,255,.66); }
.phone.is-agent::after { background: rgba(255,255,255,.32); }
.phone-cap { margin: auto 8px 0; color: var(--mute); font-size: 14px; max-width: 32ch; padding-top: 14px; }
.lock-card {
  margin: 0 0 8px;
  padding: 12px 13px 12px;
  border-radius: 17px;
  background: #f6f6f4;
  box-shadow: 0 10px 28px rgba(0,0,0,.06);
  flex: none;
}
.lock-card p {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 5px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8e8e8e;
}
.lock-card p em {
  margin-left: auto;
  font-style: normal;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.75;
}
.lc-mark {
  width: 15px;
  height: 15px;
  border-radius: 4px;
  flex: none;
  background: linear-gradient(160deg, #3b3f45, #16181b);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}
.lock-card strong { display: block; margin: 0 0 5px; font-size: 14.5px; font-weight: 500; letter-spacing: -0.024em; }
.lock-card span { display: block; color: var(--mute); font-size: 12px; line-height: 1.42; }
.lock-card.is-quiet { opacity: 0.6; transform: scale(0.965); transform-origin: 50% 0; }
.local-term {
  margin: 0 0 14px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #141414;
  color: #d4d4d4;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.7;
}
.local-term span { color: #8e8e8e; }
.tg {
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--tg-bubble);
  max-width: 360px;
}
.tg b { display: block; font-size: 12px; margin-bottom: 4px; }
.tg p { margin: 0; font-size: 14px; line-height: 1.4; }
.cloud-kicker {
  margin: 0 0 6px;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mute);
  font-weight: 500;
}
.cloud-lead {
  margin: 0 0 14px;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.03em;
  max-width: 22ch;
}
.bot-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}
.desk-mini {
  position: relative;
  padding: 4px 0 8px;
}
.desk-mini .tg {
  position: relative;
  margin-top: -10px;
  margin-left: 28px;
  box-shadow: 0 12px 32px rgba(0,0,0,.08);
}
.roster {
  margin: 0 0 14px;
  padding: 6px;
  list-style: none;
  background: #f7f7f5;
  border-radius: 14px;
}
.roster li {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14px;
  color: var(--mute);
}
.roster li.is-on {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 8px 20px rgba(0,0,0,.05);
}
.roster i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d4d4d4;
}
.roster li.is-on i { background: var(--ink); }
.roster b { font-weight: 500; }
.roster span { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.plan {
  display: grid;
  gap: 28px;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 32px 28px 28px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  box-shadow: var(--shadow);
}
.plan-kicker {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mute);
}
.plan-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin: 0 0 10px;
  line-height: 1;
}
.plan-price span { font-size: 28px; font-weight: 500; }
.plan-price b {
  font-size: clamp(56px, 8vw, 72px);
  font-weight: 500;
  letter-spacing: -0.05em;
}
.plan-price small { color: var(--mute); font-size: 16px; }
.plan-lead { margin: 0 0 20px; color: var(--mute); font-size: 14px; max-width: 36ch; }
.plan-list {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.plan-list li {
  position: relative;
  padding-left: 22px;
  font-size: 14px;
}
.plan-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink);
}
.plan .slots { padding: 0 0 16px; }
.plan .btn { width: 100%; }
.fit-desk {
  display: grid;
  gap: 1px;
  background: rgba(0,0,0,.06);
  min-height: 160px;
}
.tray {
  background: #fff;
  padding: 18px 18px 16px;
}
.tray > p {
  margin: 0 0 10px;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mute);
  font-weight: 500;
}
.tray > div { display: flex; flex-wrap: wrap; gap: 6px; min-height: 40px; }
.tray.is-no { background: #fafafa; }
.fit-chips { display: none; }
.fit-window .fit-chips button,
.tray button {
  padding: 8px 12px;
  border: 0;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease);
}
.tray.is-no button { background: #ecece8; color: var(--ink); }
.tray button.is-on { box-shadow: 0 0 0 2px #0a64fa; transform: scale(1.04); }
.fit-why {
  margin: 0;
  padding: 14px 18px 16px;
  border-top: 1px solid rgba(0,0,0,.06);
  font-size: 14px;
  color: var(--mute);
}
.bill { width: 100%; border-collapse: collapse; font-size: 14px; }
.bill th, .bill td { padding: 14px 16px; text-align: left; border-bottom: 1px solid rgba(0,0,0,.06); vertical-align: top; }
.bill th { font-weight: 500; width: 28%; }
.bill td { color: var(--mute); }
.bill td:last-child {
  text-align: right;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.slots {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
}
.slots p { margin: 0; font-size: 13px; color: var(--mute); }
.slots ol { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.slots li {
  min-width: 72px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #f6f6f4;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
}
.slots li.is-you { background: #111; color: #fff; }
.bill-cta { padding: 0 16px 20px; }
.notes-desk { display: grid; min-height: 280px; }
.notes-list {
  display: flex;
  gap: 4px;
  padding: 8px;
  overflow-x: auto;
  background: #f4f4f2;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.notes-list button {
  flex: none;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  text-align: left;
  font-size: 13px;
  font-weight: 500;
  color: var(--mute);
  white-space: nowrap;
}
.notes-list button.is-on { background: #fff; color: var(--ink); }
.notes-body { padding: 20px 18px 24px; }
.notes-body h3 {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.03em;
}
.notes-body p { margin: 0; color: var(--mute); max-width: 46ch; line-height: 1.5; }

.stacks { padding: 72px var(--inset) 96px; }
.stack {
  padding: 8px 0 0;
}
.stack h3 {
  margin: 8px 0 12px;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.03em;
}
.stack p { margin: 0; color: var(--mute); }
.stacks-note {
  margin: 28px 0 0;
  max-width: 46ch;
  color: var(--mute);
}

.workshop {
  max-width: 28rem;
  margin: 48px auto;
  padding: 0 20px;
}
.workshop .mini.me {
  justify-self: start;
  background: #fff;
  max-width: 100%;
}
.workshop .mini.them { max-width: 100%; }

.story-copy p, .fit .quiet, .anchor, .waiver, .risk p {
  color: var(--mute);
  font-size: 15px;
}

.film-stage { position: relative; min-height: 400px; background: #fafafa; overflow: hidden; }
.scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(56px) scale(0.96);
  transition: opacity 900ms var(--ease), transform 900ms var(--ease), visibility 900ms;
}
.scene.is-on {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}

.finder-side { display: none; }
.loose {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 24px 18px 8px;
}
.slip {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  align-items: start;
  padding: 14px 16px 16px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0,0,0,.06), inset 0 0 0 1px rgba(0,0,0,.04);
  opacity: 0;
  transform: translateY(48px);
}
.slip.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 900ms var(--ease), transform 900ms var(--ease);
}
.slip-icon {
  width: 36px;
  height: 44px;
  border-radius: 4px 10px 4px 4px;
  background:
    linear-gradient(135deg, transparent 50%, #e8e8e6 50%) no-repeat 100% 0 / 12px 12px,
    #fff;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}
.slip-icon.is-txt {
  background:
    linear-gradient(135deg, transparent 50%, #ecece8 50%) no-repeat 100% 0 / 12px 12px,
    #fff;
}
.slip span:not(.slip-icon) {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mute);
}
.slip p { margin: 0; font-size: 14px; line-height: 1.4; }
.ready {
  margin: 8px 18px 16px;
  font-size: 13px;
  color: var(--mute);
  opacity: 0;
}
.ready.is-in { opacity: 1; transition: opacity 640ms var(--ease); }

.mini-tg {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 28px 20px;
  min-height: 400px;
  background: #f4f4f2;
}
.workshop-kicker {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mute);
}
.mini {
  margin: 0;
  max-width: 80%;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 15px;
  opacity: 0;
  transform: translateY(22px);
  box-shadow: 0 1px 1px rgba(0,0,0,.08);
}
.mini.is-in { opacity: 1; transform: none; transition: opacity 640ms var(--ease), transform 640ms var(--ease); }
.mini.me { justify-self: end; background: var(--tg-bubble); }
.mini.them { justify-self: start; background: #fff; box-shadow: inset 3px 0 0 #0a0a0a, 0 1px 1px rgba(0,0,0,.08); }
.mini.typing {
  display: none;
  width: 52px;
  background: #fff;
  justify-self: start;
}
.mini.typing.is-in { display: flex; gap: 4px; align-items: center; }
.mini.typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #8aa;
  animation: type 1s var(--ease) infinite;
}

.lock {
  min-height: 400px;
  padding: 56px 24px;
  text-align: center;
  background: #111;
  color: #f4f4f1;
}
.lock-time {
  margin: 0;
  font-size: 76px;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
}
.lock-date { margin: 4px 0 32px; color: #9a9a94; }
.note {
  text-align: left;
  max-width: 320px;
  margin: 0 auto;
  padding: 14px 16px;
  background: rgba(255,255,255,.12);
  border-radius: 18px;
  opacity: 0;
  transform: translateY(28px);
}
.note.is-in { opacity: 1; transform: none; transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.note p { margin: 0; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #c8c8c2; }
.note strong { display: block; margin: 4px 0 6px; font-size: 15px; font-weight: 500; }
.note span { font-size: 13px; color: #c8c8c2; }

.film-bar {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  background: #f6f6f6;
  border-top: 1px solid rgba(0,0,0,.06);
  color: var(--mute);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.film-bar button {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--line);
  display: grid;
  place-items: center;
}
.film-bar svg { width: 12px; height: 12px; fill: currentColor; }
.window.is-paused .icon-pause, .window:not(.is-paused) .icon-play,
.board.is-paused .icon-pause, .board:not(.is-paused) .icon-play { display: none; }
.film-bar input { width: 100%; accent-color: var(--ink); height: 40px; cursor: pointer; }

.fit { padding: 8px var(--inset) 96px; }
.fit h2 { max-width: 16ch; margin-bottom: 36px; }
.split { display: grid; gap: 40px; }
.split h3 {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
}
.split ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.split li { padding-left: 16px; position: relative; }
.split li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink);
}
.split p { margin: 0 0 12px; max-width: 36ch; }

.price { padding: 8px var(--inset) 96px; }
.kicker {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
  font-weight: 500;
}
.amount {
  margin: 8px 0 16px;
  font-size: clamp(56px, 12vw, 80px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: .95;
}
.amount em {
  display: block;
  font-style: normal;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--mute);
  margin-bottom: 8px;
}
.amount span { font-size: 22px; font-weight: 400; color: var(--mute); }
.anchor, .waiver { margin: 0 0 12px; max-width: 40ch; }
.waiver { color: var(--ink); }
.price .btn { margin-top: 16px; }

.risk { padding: 24px 20px 96px; }
.risk p { margin: 12px 0 0; max-width: 32ch; }

.foot {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px var(--inset) calc(28px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
}
.who { display: flex; align-items: center; gap: 12px; }
.who img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}
.who-name { margin: 0; font-weight: 500; }
.who-tz { margin: 2px 0 0; font-size: 13px; color: var(--mute); font-variant-numeric: tabular-nums; }

/* ---- scroll-linked section atmosphere ----------------------------------
   As you move between sections, the page's ambient light shifts subtly.
   It's not a hard cut — it's a slow drift, like walking between rooms. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(90% 70% at var(--gx, 50%) var(--gy, 15%), rgba(10,100,250,.04), transparent 65%),
    radial-gradient(70% 60% at var(--gx2, 75%) var(--gy2, 85%), rgba(120,130,145,.025), transparent 70%);
  opacity: 1;
  transition: opacity 800ms var(--ease);
  pointer-events: none;
}

/* Each section's content rises slightly as it enters, creating a gentle
   parallax that makes the scroll feel alive without being dizzying. */
@media (prefers-reduced-motion: no-preference) {
  .sec-copy,
  .jobs-copy,
  .finale-in {
    will-change: transform, opacity;
  }
}

@media (min-width: 880px) {
  :root { --gutter: 56px; }
  .hero {
    grid-template-columns: minmax(280px, 36rem) 1fr;
    padding: 72px var(--inset) 48px;
    align-items: start;
    min-height: 0;
  }
  .hero-copy { padding-top: 36px; padding-bottom: 24px; }
  .hero-visual { min-height: 620px; }
  .fan {
    height: 620px;
    margin: 0;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 90%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 90%, transparent 100%);
  }
  .fan-card { max-width: 280px; width: 54%; }
  .fan-card img { height: 400px; }
  .fan-a { left: 4%; top: 150px; }
  .fan-b { left: 34%; top: 60px; }
  .fan-c { left: 62%; top: 120px; }

  .jobs-desk { grid-template-columns: 200px 1fr; }
  .jobs-nav {
    flex-direction: column;
    overflow: visible;
    border-bottom: 0;
    border-right: 1px solid rgba(0,0,0,.06);
    padding: 12px 8px;
  }
  .jobs-nav > p { display: block; }
  .jobs-nav button { min-width: 0; width: 100%; }
  .finder-tools { display: flex; }
  .icon-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 28px 24px; gap: 22px 16px; }
  .quicklook {
    display: block;
    border-top: 0;
    border-left: 1px solid rgba(0,0,0,.06);
  }
  .jobs-desk { grid-template-columns: 200px 1fr 280px; }
  .desktop { min-height: 560px; padding: 28px 24px 48px; }
  .jobs-window.is-computer .desktop { overflow: hidden; min-height: 560px; }
  .demo-desk {
    display: block;
    min-height: 560px;
  }
  .demo-desk .app-win { position: absolute; margin: 0; }
  .mail-app { left: 3%; top: 7%; width: 52%; z-index: 2; }
  .brief-app { left: 3%; top: 6%; width: 54%; z-index: 2; }
  .compose-app { right: 4%; top: 12%; width: 44%; z-index: 1; }
  .digest-app { right: 4%; top: 8%; width: 46%; z-index: 1; }
  .form-app { left: 8%; bottom: 7%; width: 46%; z-index: 1; }
  .sheet-app { left: 6%; bottom: 6%; width: 52%; z-index: 1; }
  .term-app { right: 5%; bottom: 7%; width: 40%; z-index: 1; }
  .slide-app { right: 4%; bottom: 6%; width: 44%; z-index: 1; }
  .demo-desk.is-draft .compose-app,
  .demo-desk.is-inbox .digest-app { z-index: 4; }
  .demo-desk.is-form .form-app,
  .demo-desk.is-prospect .sheet-app { z-index: 5; }
  .demo-desk.is-done .term-app,
  .demo-desk.is-slides .slide-app { z-index: 6; }
  .float-win { position: absolute; margin: 0; }
  .float-win.a { left: 6%; top: 10%; width: 48%; max-width: none; z-index: 2; }
  .float-win.b { right: 8%; top: 16%; width: 38%; max-width: none; }
  .float-win.c { left: 22%; bottom: 10%; width: 44%; max-width: none; z-index: 3; }
  .alerts { grid-template-columns: 1fr 1fr; padding: 28px; }
  .offer-list { grid-template-columns: 1fr 1fr 1fr; gap: 48px; max-width: none; }
  .stage { margin-top: -88px; }
  .versus-grid { grid-template-columns: 1fr 1fr; gap: 32px; max-width: none; }
  .night-row { grid-template-columns: 1fr 1fr; gap: 40px; align-items: stretch; }
  .day-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .loose { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; padding: 32px 24px 8px; }
  .fit-desk { grid-template-columns: 1fr 1fr; }
  .pair-mats { grid-template-columns: 1fr 1fr; gap: 28px; align-items: stretch; }
  .plan {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 48px;
    padding: 44px 48px;
  }
  .plan .btn { width: auto; min-width: 180px; }
  .plan-hero .plan-lead { margin-bottom: 0; }
  .plan-price b { font-size: clamp(64px, 7vw, 88px); }
  html.has-scrub .scrub { height: 340vh; }
  html.has-scrub .scrub-stick {
    position: sticky;
    top: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 0 24px;
  }
  html.has-scrub .story { padding-bottom: 0; }
  .desk { grid-template-columns: 264px 1fr; }
  .sidebar { display: block; }
  .win-tools { display: flex; }
  .win-foot { display: flex; }
  .finder-side {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 188px;
    padding: 16px 12px;
    background: #f4f4f4;
    font-size: 13px;
    color: var(--mute);
  }
  .scene.is-on[data-scene="docs"] { display: block; }
  .finder-side p {
    margin: 12px 0 4px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
  }
  .finder-side span { padding: 5px 8px; border-radius: 6px; }
  .finder-side .on { background: rgba(52,120,246,.18); color: var(--ink); font-weight: 500; }
  .split { grid-template-columns: 1.1fr .9fr; max-width: none; gap: 72px; }
  .foot {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

@media (min-width: 1200px) {
  :root { --gutter: 80px; }
}

/* ============================================================
   CINEMATIC LAYER
   Floating chrome, framed product stages, a dark pinned act,
   and rebuilt section components.
   ============================================================ */

/* ---- 1. Floating chrome ---------------------------------- */

.chrome {
  position: fixed;
  z-index: 60;
  left: 0;
  right: 0;
  top: 0;
  pointer-events: none;
}
.chrome-bar {
  display: block;
  height: 2px;
  transform: scaleX(var(--p, 0));
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--ink), #4b5158);
  opacity: 0;
  transition: opacity 400ms var(--ease);
}
.chrome.is-lifted .chrome-bar { opacity: 1; }
.chrome-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px var(--gutter);
}
.chrome-in > * { pointer-events: auto; }

.chrome-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.04em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 8px 20px -8px rgba(8,9,10,.5);
  transition: transform 300ms var(--ease);
}
@media (hover: hover) { .chrome-mark:hover { transform: scale(1.06); } }

.chrome-nav {
  display: none;
  align-items: center;
  gap: 2px;
  padding: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,.7);
  box-shadow: inset 0 0 0 1px rgba(8,9,10,.07), 0 8px 24px -12px rgba(8,9,10,.24);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
}
.chrome-nav a {
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--mute);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.012em;
  transition: color 240ms var(--ease), background 240ms var(--ease);
}
@media (hover: hover) { .chrome-nav a:hover { color: var(--ink); background: rgba(8,9,10,.045); } }
.chrome-nav a.is-here { color: var(--ink); background: rgba(8,9,10,.06); }

.chrome-cta {
  display: inline-flex;
  align-items: center;
  height: 42px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.012em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 10px 24px -10px rgba(8,9,10,.5);
  opacity: 0;
  transform: translateY(-6px) scale(0.94);
  pointer-events: none;
  transition: opacity 420ms var(--ease), transform 420ms var(--ease);
}
.chrome.is-lifted .chrome-cta {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* inverted while the chrome floats over a dark act */
.chrome.is-dark .chrome-bar { background: linear-gradient(90deg, #fff, rgba(255,255,255,.45)); }
.chrome.is-dark .chrome-mark {
  background: #fff;
  color: var(--ink);
  box-shadow: inset 0 -1px 0 rgba(8,9,10,.12), 0 8px 20px -8px rgba(0,0,0,.7);
}
.chrome.is-dark .chrome-nav {
  background: rgba(22,25,28,.6);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
}
.chrome.is-dark .chrome-nav a { color: rgba(255,255,255,.6); }
.chrome.is-dark .chrome-nav a.is-here { color: #fff; background: rgba(255,255,255,.12); }
@media (hover: hover) {
  .chrome.is-dark .chrome-nav a:hover { color: #fff; background: rgba(255,255,255,.09); }
}
.chrome.is-dark .chrome-cta {
  background: #fff;
  color: var(--ink);
  box-shadow: inset 0 -1px 0 rgba(8,9,10,.12), 0 10px 24px -10px rgba(0,0,0,.7);
}

/* ---- 2. Rhythm + section heads --------------------------- */

.jobs, .offer, .versus, .stacks, .fit, .price, .faq {
  padding-top: var(--act);
  padding-bottom: var(--act);
}
.band { background: linear-gradient(180deg, #fbfbfc, #f5f6f7); }

.sec-copy { max-width: none; width: 100%; margin: 0 0 46px; }
.sec-copy h2,
.jobs-copy h2 {
  margin: 0 0 18px;
  font-size: var(--t-h2);
  font-weight: 500;
  letter-spacing: -0.042em;
  line-height: 0.99;
  max-width: 22ch;
}
.sec-copy h2 span,
.jobs-copy h2 span { color: var(--faint); font-weight: 400; }
.sec-copy p,
.jobs-copy p {
  margin: 0;
  color: var(--mute);
  font-size: var(--t-lede);
  line-height: 1.55;
  letter-spacing: -0.014em;
  max-width: 46ch;
}

.eyebrow {
  display: block;
  margin: 0 0 20px;
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}
.is-centered { text-align: center; }
.is-centered h2, .is-centered p { margin-left: auto; margin-right: auto; }

/* ---- 3. Framed product stage (the depth trick) ----------- */

.stage-frame {
  position: relative;
  padding: 22px 16px 20px;
  border-radius: var(--r-xl);
  background:
    radial-gradient(130% 90% at 50% -10%, #fdfdfe, transparent 58%),
    linear-gradient(180deg, #eef0f2, #e2e5e8);
  box-shadow:
    inset 0 0 0 1px rgba(8,9,10,.07),
    inset 0 1px 0 rgba(255,255,255,.85);
  overflow: clip;
}
.stage-frame::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: -30%;
  width: 80%;
  height: 70%;
  margin-left: -40%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(10,100,250,.09), transparent);
  pointer-events: none;
}
/* grain rides over the whole plate, window included — that is what stops
   a flat panel of CSS gradients reading as vector art */
.stage-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  background-image: var(--grain);
  background-size: 160px 160px;
  opacity: 0.035;
  pointer-events: none;
}
.stage-frame > * { position: relative; z-index: 1; }

.cue {
  margin: 0 0 20px;
  text-align: center;
  color: var(--faint);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.cue::before { content: none; }

/* a tab strip with a single tab is not a control — drop it */
.flow-tabs:has(button:only-child) { display: none; }

.jobs-caption {
  margin: 0 auto 14px;
  color: var(--faint);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.jobs-caption::before { content: none; }
.agent-line {
  margin: 0 auto 34px;
  max-width: 46ch;
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.28;
  min-height: 2.5em;
  color: var(--ink);
}

.stage-cue {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: max-content;
  margin: 22px auto 2px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.76);
  box-shadow: inset 0 0 0 1px rgba(8,9,10,.07), var(--e1);
  backdrop-filter: blur(10px);
  color: var(--mute);
  text-decoration: none;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.stage-cue i {
  width: 8px;
  height: 8px;
  border-left: 1.4px solid currentColor;
  border-bottom: 1.4px solid currentColor;
  transform: rotate(-45deg) translate(-1px, -1px);
  animation: cueDrop 1.9s var(--ease) infinite;
}
@keyframes cueDrop {
  0%, 100% { transform: rotate(-45deg) translate(-1px, -1px); opacity: .5; }
  50% { transform: rotate(-45deg) translate(2px, 2px); opacity: 1; }
}

.scrollcue {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 14px;
  display: none;
  align-items: center;
  gap: 8px;
  transform: translateX(-50%);
  color: var(--faint);
  text-decoration: none;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ---- 4. Editorial numbered rows (what you buy) ----------- */

.erows {
  width: 100%;
  border-top: 1px solid var(--line);
}
.erow { border-bottom: 1px solid var(--line); }
.erow-head {
  display: grid;
  grid-template-columns: 2.6rem 1fr 22px;
  align-items: baseline;
  gap: 6px 18px;
  width: 100%;
  padding: 26px 0;
  border: 0;
  background: none;
  text-align: left;
  color: var(--ink);
  transition: opacity 500ms var(--ease);
}
.erows:not(:hover) .erow:not(.is-open) .erow-head { opacity: 0.46; }
@media (hover: hover) {
  .erows:hover .erow:not(.is-open) .erow-head { opacity: 0.62; }
  .erows .erow-head:hover { opacity: 1; }
}
.erow-num {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.erow-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  font-size: clamp(24px, 3.1vw, 40px);
  font-weight: 500;
  letter-spacing: -0.036em;
  line-height: 1.05;
}
.erow-title em {
  font-style: normal;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}
.erow-note {
  grid-column: 2;
  margin: 0;
  color: var(--mute);
  font-size: 14.5px;
  line-height: 1.5;
  max-width: 48ch;
}
.erow-sign {
  position: relative;
  grid-column: 3;
  grid-row: 1;
  align-self: center;
  width: 14px;
  height: 14px;
  justify-self: end;
}
.erow-sign::before,
.erow-sign::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 1.5px;
  background: var(--ink);
  transition: transform 420ms var(--ease), opacity 420ms var(--ease);
}
.erow-sign::after { transform: rotate(90deg); }
.erow.is-open .erow-sign::after { transform: rotate(90deg) scaleX(0); opacity: 0; }

.erow-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 700ms var(--ease);
}
.erow.is-open .erow-body { grid-template-rows: 1fr; }
.erow-inner {
  overflow: hidden;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 500ms var(--ease), transform 600ms var(--ease);
}
.erow.is-open .erow-inner {
  opacity: 1;
  transform: none;
  transition-delay: 140ms;
}
.erow-pad { padding: 4px 0 34px; }
@media (min-width: 880px) {
  .erow-pad { padding: 4px 0 40px; margin-left: calc(2.6rem + 18px); }
}

/* the four install days, as a proper stepped timeline */
.erow .day-strip {
  gap: 10px;
  margin-bottom: 20px;
  padding: 0;
}
.erow .day-strip li {
  padding: 20px 18px 18px;
  border: 0;
  border-radius: var(--r);
  background: linear-gradient(180deg, #fff, #fbfbfc);
  box-shadow: inset 0 0 0 1px rgba(8,9,10,.06);
  opacity: 1;
  transform: none;
  transition: box-shadow 600ms var(--ease), transform 600ms var(--ease), background 600ms var(--ease);
}
.erow .day-strip li i {
  width: 100%;
  height: 2px;
  margin-bottom: 18px;
  border-radius: 2px;
  background: rgba(8,9,10,.09);
  transition: background 600ms var(--ease);
}
.erow .day-strip li.is-on {
  background: linear-gradient(180deg, #fff, #f8f9fa);
  box-shadow:
    inset 0 0 0 1px rgba(8,9,10,.09),
    0 2px 4px rgba(8,9,10,.03),
    0 18px 40px -20px rgba(8,9,10,.28);
  transform: translateY(-3px);
}
.erow .day-strip li.is-on i { background: var(--ink); }
.erow .day-strip time {
  margin-bottom: 12px;
  font-size: clamp(26px, 3vw, 34px);
  letter-spacing: -0.05em;
  color: var(--faint);
  transition: color 600ms var(--ease);
}
.erow .day-strip li.is-on time { color: var(--ink); }
.erow .day-strip b { font-size: 14.5px; letter-spacing: -0.018em; }
.erow .day-strip small { font-size: 12.5px; color: var(--faint); }
.erow .buy-foot { margin: 0; color: var(--mute); font-size: 14px; }

.erow .chat-well { max-width: 560px; gap: 10px; padding: 0; }
.erow .chat-well .bubble {
  padding: 12px 15px 13px;
  border-radius: 18px;
  font-size: 14.5px;
  line-height: 1.45;
  max-width: 78%;
}
.erow .chat-well .bubble.them {
  background: #f4f5f6;
  box-shadow: inset 0 0 0 1px rgba(8,9,10,.04);
}
.erow .ping-stack { max-width: 560px; gap: 10px; }
.erow .ping {
  padding: 17px 19px 16px;
  border-radius: var(--r);
  background: linear-gradient(180deg, #fff, #fbfbfc);
  box-shadow: inset 0 0 0 1px rgba(8,9,10,.06);
}
.erow .ping.is-on {
  box-shadow:
    inset 0 0 0 1px rgba(8,9,10,.09),
    0 2px 4px rgba(8,9,10,.03),
    0 18px 40px -20px rgba(8,9,10,.26);
}

/* ---- 5. The dark pinned act (cinematic scroll) ----------- */

/* ---- 5. The act: one window, four beats ------------------
   The whole composition pins as a single frame. Head, chapter copy,
   product surface and rail all live inside the sticky box so nothing
   drifts into dead space while the track scrolls underneath. */

.reel {
  padding: 0 0 var(--act);
  background: var(--bg);
}
.reel-slab {
  position: relative;
  margin: 0 var(--slab);
  border-radius: var(--r-2xl);
  background:
    radial-gradient(78% 52% at 84% 6%, rgba(10,100,250,.16), transparent 64%),
    radial-gradient(64% 46% at 8% 96%, rgba(126,138,156,.11), transparent 68%),
    linear-gradient(180deg, #0a0c0e, #07080a 46%, #0a0c0e);
  color: var(--night-ink);
  overflow: clip;
  box-shadow: 0 40px 90px -40px rgba(8,9,10,.55);
  clip-path: inset(calc((1 - var(--enter, 1)) * 10%) round 42px);
  transform: scale(calc(0.94 + var(--enter, 1) * 0.06));
  transform-origin: 50% 40%;
  will-change: clip-path, transform;
}
.reel-slab::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  /* cinema vignette — corners fall off so the centre carries the eye */
  background: radial-gradient(120% 82% at 50% 42%, transparent 52%, rgba(0,0,0,.5));
  pointer-events: none;
}
.reel-track { position: relative; }
.reel-stick {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 26px;
  padding: 52px 22px 34px;
}
.reel-stick > * { position: relative; z-index: 1; }

.reel-head { max-width: 24ch; }
.reel-eyebrow {
  margin: 0 0 14px;
  font-size: var(--t-micro);
  text-transform: uppercase;
  color: rgba(255,255,255,.42);
}
.reel-head h2 {
  margin: 0;
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.02;
  color: #fff;
}
.reel-head h2 span { color: rgba(255,255,255,.38); font-weight: 400; }
.reel-sub {
  margin: 18px 0 0;
  max-width: 34ch;
  color: rgba(255,255,255,.44);
  font-size: 14px;
  line-height: 1.6;
}

.reel-body { display: grid; gap: 24px; align-content: center; }

.reel-copy { position: relative; min-height: 168px; }
.ch {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity 560ms var(--ease), transform 680ms var(--ease);
}
.ch.is-on { opacity: 1; transform: none; pointer-events: auto; }
.ch-num {
  margin: 0 0 14px;
  font-size: 11px;
  color: rgba(255,255,255,.34);
}
.ch h3 {
  margin: 0 0 12px;
  font-size: clamp(21px, 2.3vw, 29px);
  font-weight: 500;
  letter-spacing: -0.034em;
  line-height: 1.1;
  color: #fff;
}
.ch p {
  margin: 0;
  max-width: 38ch;
  color: rgba(255,255,255,.6);
  font-size: 15px;
  line-height: 1.6;
}

/* ---- the persistent product window --------------------- */

.reel-stage { position: relative; perspective: 1800px; }
.app {
  --app-lift: 0px;
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  border-radius: 14px;
  background: linear-gradient(180deg, #16191d, #0d1013);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.09),
    inset 0 1px 0 rgba(255,255,255,.07),
    0 2px 8px rgba(0,0,0,.4),
    0 48px 110px -30px rgba(0,0,0,.8);
  overflow: clip;
  transform: translate3d(0, var(--app-lift), 0);
  will-change: transform;
}

/* title bar */
.app-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 14px;
  height: 46px;
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.07);
}
.app-bar .dots { display: flex; gap: 6px; flex: none; }
.app-bar .dots i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #3a3f45;
}
.app-bar .dots i:first-child { background: #f05c50; }
.app-bar .dots i:nth-child(2) { background: #f4bd4f; }
.app-bar .dots i:nth-child(3) { background: #61c554; }
.app-nav { display: none; gap: 3px; flex: none; }
.app-chev {
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 5px;
}
.app-chev::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 5px;
  height: 5px;
  border-right: 1.4px solid rgba(255,255,255,.34);
  border-bottom: 1.4px solid rgba(255,255,255,.34);
  transform: rotate(-45deg);
}
.app-chev.is-back::after {
  border: 0;
  border-left: 1.4px solid rgba(255,255,255,.55);
  border-top: 1.4px solid rgba(255,255,255,.55);
}
.app-path {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0;
  color: rgba(255,255,255,.62);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 320ms var(--ease);
}
.app-tools { display: none; gap: 2px; flex: none; }
.app-tool {
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 4px 9px 3px;
  border-radius: 7px;
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255,255,255,.3);
}
.app-tool.is-on { background: rgba(255,255,255,.09); color: rgba(255,255,255,.62); }
.app-tool i {
  display: block;
  width: 13px;
  height: 13px;
  border-radius: 3px;
  border: 1.2px solid currentColor;
  opacity: 0.75;
}
.app-tool i.ti-rows { border-radius: 2px; border-width: 1.2px 0; height: 11px; }
.app-tool i.ti-up { border: 0; box-shadow: inset 0 0 0 1.2px currentColor; border-radius: 50%; }
.app-tool i.ti-dots {
  border: 0;
  height: 3px;
  width: 13px;
  border-radius: 3px;
  background:
    radial-gradient(circle 1.5px at 2px 50%, currentColor 100%, transparent),
    radial-gradient(circle 1.5px at 6.5px 50%, currentColor 100%, transparent),
    radial-gradient(circle 1.5px at 11px 50%, currentColor 100%, transparent);
}

/* body split */
.app-body { display: grid; min-height: 0; }
.app-side {
  display: none;
  align-content: start;
  gap: 1px;
  padding: 14px 10px;
  background: rgba(0,0,0,.22);
  box-shadow: inset -1px 0 0 rgba(255,255,255,.06);
}
.app-side-h {
  margin: 14px 0 6px;
  padding: 0 8px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.28);
}
.app-side-h:first-child { margin-top: 0; }
.app-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 8px;
  border-radius: 7px;
  font-size: 12.5px;
  color: rgba(255,255,255,.66);
  transition: background 380ms var(--ease), color 380ms var(--ease);
}
.app-item b {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  color: rgba(255,255,255,.3);
}
.app-item.is-on { background: rgba(255,255,255,.11); color: #fff; }
.app-item.is-on b { color: rgba(255,255,255,.6); }
.app-item.is-off { color: rgba(255,255,255,.26); }
.app-item i {
  flex: none;
  width: 13px;
  height: 11px;
  border-radius: 2px 2px 3px 3px;
  background: rgba(255,255,255,.3);
}
.app-item.is-on i { background: var(--accent); }
.app-item i.ai-folder { border-radius: 1px 3px 3px 3px; }
.app-item i.ai-folder::before {
  content: "";
  display: block;
  width: 6px;
  height: 2px;
  margin: -2px 0 0 1px;
  border-radius: 2px 2px 0 0;
  background: inherit;
}
.app-item i.ai-shield { border-radius: 3px 3px 6px 6px; }
.app-item i.ai-clock { border-radius: 50%; width: 12px; height: 12px; }
.app-item i.ai-inbox { border-radius: 2px 2px 4px 4px; }
.app-item i.ai-lock {
  width: 10px;
  height: 9px;
  border-radius: 2px;
  background: rgba(255,255,255,.22);
}
.app-item i.ai-lock::before {
  content: "";
  display: block;
  width: 6px;
  height: 4px;
  margin: -4px auto 0;
  border: 1.4px solid rgba(255,255,255,.22);
  border-bottom: 0;
  border-radius: 3px 3px 0 0;
}

/* the view stack — one grid cell, siblings layered */
.app-main {
  position: relative;
  display: grid;
  min-height: 0;
  min-width: 0;
}
.view {
  grid-area: 1 / 1;
  display: grid;
  align-content: start;
  min-height: 0;
  padding: 20px 18px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(0.985);
  pointer-events: none;
  transition: opacity 520ms var(--ease), transform 640ms var(--ease), visibility 520ms;
}
.view.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}

/* 01 — file grid */
.grid-files {
  display: grid;
  /* fixed three-up on narrow screens: auto-fill drops to two and makes the
     window twice as tall as the phone viewport */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px 2px;
}
.ff {
  display: grid;
  justify-items: center;
  gap: 7px;
  margin: 0;
  padding: 8px 4px 7px;
  border-radius: 8px;
  text-align: center;
  transition: background 300ms var(--ease);
}
.ff-ico {
  position: relative;
  width: 40px;
  height: 32px;
  border-radius: 2px 5px 5px 5px;
  background: linear-gradient(180deg, #4da2ff, #1f7ce8);
  box-shadow: 0 2px 5px rgba(0,0,0,.4);
}
.ff-ico.is-dir::before {
  content: "";
  position: absolute;
  left: 2px;
  top: -3px;
  width: 17px;
  height: 5px;
  border-radius: 2px 3px 0 0;
  background: #5fb0ff;
}
.ff-ico.is-doc {
  width: 31px;
  height: 39px;
  border-radius: 3px;
  background: linear-gradient(180deg, #f6f7f8, #d9dcdf);
  display: grid;
  align-items: end;
  justify-items: center;
  padding-bottom: 4px;
}
.ff-ico.is-doc::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 9px;
  height: 9px;
  background: linear-gradient(225deg, #0d1013 50%, transparent 50%);
}
.ff-ico.is-doc em {
  font-family: var(--mono);
  font-size: 7.5px;
  font-style: normal;
  letter-spacing: 0.04em;
  padding: 1px 3px;
  border-radius: 2px;
  background: #1f7ce8;
  color: #fff;
}
.ff-ico.is-txt em { background: #6b7280; }
.ff-ico.is-locked { background: linear-gradient(180deg, #3b4048, #2a2e34); }
.ff-ico.is-locked::after {
  content: "";
  position: absolute;
  inset: auto 0 -3px;
  margin: 0 auto;
  width: 13px;
  height: 11px;
  border-radius: 2px;
  background: #d7dade;
  box-shadow: 0 0 0 2px #0d1013;
}
.ff figcaption {
  display: grid;
  gap: 1px;
  font-size: 11px;
  line-height: 1.3;
  color: rgba(255,255,255,.82);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ff figcaption small {
  font-family: var(--mono);
  font-size: 9.5px;
  color: rgba(255,255,255,.36);
}
.ff.is-denied { opacity: 0.44; }
.ff.is-denied figcaption small { color: #e08b82; }
.ff.is-sel { background: rgba(10,100,250,.26); }

/* 02 — permission matrix */
.perm {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.perm th {
  padding: 0 0 9px;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(255,255,255,.3);
}
.perm th:first-child { text-align: left; }
.perm td {
  padding: 9px 0;
  text-align: center;
  color: rgba(255,255,255,.78);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055);
}
.perm td:first-child { text-align: left; }
.perm tbody tr { transition: opacity 400ms var(--ease); }
.perm tr.is-hard td { color: #e0938b; }
.perm td.y::after,
.perm td.n::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
}
.perm td.y::after {
  width: 9px;
  height: 5px;
  border-left: 1.6px solid #63c95a;
  border-bottom: 1.6px solid #63c95a;
  transform: rotate(-45deg) translateY(-2px);
}
.perm td.n::after {
  width: 9px;
  height: 1.6px;
  border-radius: 2px;
  background: rgba(255,255,255,.22);
}
.perm tr.is-hard td.n::after { background: #e0938b; }
.perm-note {
  margin: 16px 0 0;
  font-size: 12.5px;
  color: rgba(255,255,255,.5);
}
.pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(10,100,250,.9);
  color: #fff;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.02em;
}
.pill.is-hot { background: #1f7ce8; }

/* 03 — overnight log */
.term {
  display: grid;
  gap: 12px;
  align-content: start;
}
.term-h {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,.44);
}
.term-h span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #63c95a;
  box-shadow: 0 0 0 3px rgba(99,201,90,.16);
  animation: pulseDot 2.4s var(--ease-io) infinite;
}
@keyframes pulseDot {
  0%, 100% { box-shadow: 0 0 0 3px rgba(99,201,90,.16); }
  50% { box-shadow: 0 0 0 6px rgba(99,201,90,.05); }
}
.term-log {
  margin: 0;
  padding: 12px 14px;
  list-style: none;
  border-radius: 9px;
  background: rgba(0,0,0,.4);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 2.1;
  color: rgba(255,255,255,.6);
}
.term-log li {
  display: flex;
  gap: 12px;
  opacity: 0;
  transform: translateX(-6px);
}
.term-log li.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 420ms var(--ease), transform 420ms var(--ease);
}
.term-log time { color: rgba(255,255,255,.32); flex: none; }
.term-log b { color: #fff; font-weight: 400; flex: none; min-width: 62px; }
.term-log li.is-hold { color: #f4bd4f; }
.term-log li.is-hold b { color: #f4bd4f; }

/* 04 — approval queue + info panel */
.queue {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 3px;
}
.queue li {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 11px;
  border-radius: 9px;
  background: rgba(255,255,255,.03);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
.queue li.is-sel { background: rgba(10,100,250,.2); box-shadow: inset 0 0 0 1px rgba(10,100,250,.4); }
.q-ico {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(244,189,79,.18);
  box-shadow: inset 0 0 0 1px rgba(244,189,79,.35);
  position: relative;
}
.q-ico::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 2px;
  height: 8px;
  border-radius: 2px;
  background: #f4bd4f;
  box-shadow: 0 5px 0 #f4bd4f;
  height: 5px;
}
.queue div { display: grid; gap: 1px; min-width: 0; }
.queue b { font-size: 12.5px; font-weight: 500; color: rgba(255,255,255,.9); }
.queue small { font-size: 11px; color: rgba(255,255,255,.42); }
.q-state {
  margin-left: auto;
  flex: none;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #f4bd4f;
}
.info {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: min(280px, 78%);
  border-radius: 11px;
  background: rgba(20,23,27,.9);
  backdrop-filter: blur(20px) saturate(140%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.11),
    0 24px 60px -16px rgba(0,0,0,.9);
  opacity: 0;
  transform: translateY(14px) scale(0.97);
  transition: opacity 520ms var(--ease), transform 620ms var(--ease);
  pointer-events: none;
}
.info.is-in { opacity: 1; transform: none; }
.info-h {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 9px 12px;
  font-size: 11px;
  color: rgba(255,255,255,.7);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.08);
}
.info-h .dots { display: flex; gap: 5px; flex: none; }
.info-h .dots i { width: 9px; height: 9px; border-radius: 50%; background: #3a3f45; }
.info-h .dots i:first-child { background: #f05c50; }
.info-h .dots i:nth-child(2) { background: #f4bd4f; }
.info-h .dots i:nth-child(3) { background: #61c554; }
.info-body { padding: 11px 12px 13px; }
.info-body dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 12px;
  font-size: 11px;
}
.info-body dt { font-family: var(--mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255,255,255,.34); align-self: center; }
.info-body dd { margin: 0; color: rgba(255,255,255,.8); }

/* status bar */
.app-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 14px;
  height: 32px;
  background: rgba(0,0,0,.24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.app-foot p {
  margin: 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,.36);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 320ms var(--ease);
}
.app-foot p:last-child { display: none; }

/* the pointer — it does the looking so the reader does not have to */
.app-cursor {
  position: absolute;
  /* percentages must resolve against the window, so they ride left/top —
     translate percentages would resolve against the 15px arrow itself */
  left: var(--cx, 50%);
  top: var(--cy, 50%);
  z-index: 4;
  width: 15px;
  height: 21px;
  opacity: 0;
  pointer-events: none;
  background: no-repeat center/contain
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 21'><path d='M1 1l12.2 11.6-5.6.2 3 6.4-2.6 1.2-3-6.5-4 3.7z' fill='%23fff' stroke='%23000' stroke-width='1.1'/></svg>");
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.6));
  transition: left 1100ms var(--ease-io), top 1100ms var(--ease-io), opacity 400ms var(--ease);
}
.app-cursor.is-in { opacity: 1; }

/* chapter rail */
.reel-bars {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.reel-bars li {
  display: grid;
  gap: 9px;
  color: rgba(255,255,255,.28);
  font-size: 9.5px;
  text-transform: uppercase;
  transition: color 500ms var(--ease);
}
.reel-bars li.is-on { color: rgba(255,255,255,.92); }
.reel-bars li.is-done { color: rgba(255,255,255,.46); }
.reel-bars i {
  position: relative;
  display: block;
  height: 2px;
  border-radius: 2px;
  background: rgba(255,255,255,.12);
  overflow: hidden;
}
.reel-bars i::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #fff;
  transform: scaleX(var(--f, 0));
  transform-origin: 0 50%;
}
.reel-bars li span { display: none; }

/* ---- 6. Versus: two machines, one night ------------------ */

.versus .night-row {
  position: relative;
  gap: 18px;
  perspective: 2000px;
}
.versus .phone {
  border-radius: 34px;
  transition: transform 900ms var(--ease), box-shadow 900ms var(--ease);
}
.versus .phone:not(.is-agent) {
  background: linear-gradient(180deg, #fff, #f7f8f9);
  box-shadow:
    inset 0 0 0 1px rgba(8,9,10,.075),
    0 2px 4px rgba(8,9,10,.03),
    0 34px 70px -30px rgba(8,9,10,.28);
}
.versus .phone.is-agent {
  background: linear-gradient(180deg, #16191c, #0a0c0d);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.1),
    inset 0 1px 0 rgba(255,255,255,.08),
    0 34px 80px -28px rgba(8,9,10,.6);
}
.versus .phone-cap {
  font-size: 14px;
  line-height: 1.5;
  max-width: 34ch;
}

/* ---- 7. Stacks: paired cards ----------------------------- */

.stacks .pair-mats { gap: 18px; }
.mat.surface {
  padding: 30px 28px 28px;
  border: 0;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, #fff, #fafbfb);
  box-shadow:
    inset 0 0 0 1px rgba(8,9,10,.07),
    0 2px 4px rgba(8,9,10,.03),
    0 30px 60px -30px rgba(8,9,10,.2);
}
.mat h3 {
  margin: 0 0 20px;
  font-size: var(--t-h3);
  letter-spacing: -0.036em;
  line-height: 1.12;
}
.mat-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 14px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(8,9,10,.05);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--mute);
}
.mat-term.surface {
  background:
    radial-gradient(80% 60% at 80% 0%, rgba(10,100,250,.12), transparent 60%),
    linear-gradient(180deg, #14171a, #0a0c0d);
  color: var(--night-ink);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.09),
    inset 0 1px 0 rgba(255,255,255,.07),
    0 34px 70px -30px rgba(8,9,10,.55);
}
.mat-term.surface .mat-kicker { background: rgba(255,255,255,.08); color: rgba(255,255,255,.6); }
.mat-term.surface h3 { color: #fff; }
.mat-term .local-term {
  max-width: none;
  background: rgba(0,0,0,.42);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
  font-size: 12px;
  padding: 16px 18px;
}
.mat-term .tg { background: #e8f6cf; color: #12210a; }
.mat-cloud .cloud-lead {
  font-size: var(--t-h3);
  letter-spacing: -0.034em;
  line-height: 1.15;
  max-width: 24ch;
}
.mat-cloud .roster {
  padding: 8px;
  background: #f6f7f8;
  border-radius: var(--r);
  box-shadow: inset 0 0 0 1px rgba(8,9,10,.05);
}
.mat-cloud .roster li.is-on { box-shadow: 0 1px 2px rgba(8,9,10,.05), 0 10px 22px -10px rgba(8,9,10,.2); }

/* ---- 8. Fit: the sorting desk ---------------------------- */

.fit .ledger {
  border: 0;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, #fff, #fafbfb);
  box-shadow:
    inset 0 0 0 1px rgba(8,9,10,.07),
    0 2px 4px rgba(8,9,10,.03),
    0 30px 60px -30px rgba(8,9,10,.2);
}
.fit .fit-desk { background: rgba(8,9,10,.06); }
/* A ledger of rows, not a bar of pills. Each entry states the job and
   the outcome, so the column reads as evidence rather than tags. */
.fit .tray { padding: 26px 26px 24px; background: transparent; }
.fit .tray.is-no { background: rgba(8,9,10,.022); }
.fit .tray > p {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 4px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-2);
  font-size: 10px;
  letter-spacing: 0.13em;
  color: var(--faint);
}
.fit .tray > p em {
  margin-left: auto;
  font-family: var(--mono);
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0;
  color: #bfc4c9;
}
.tray-mark {
  position: relative;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex: none;
  background: var(--ink);
}
.tray-mark::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 7px;
  height: 3.5px;
  border-left: 1.5px solid #fff;
  border-bottom: 1.5px solid #fff;
  transform: rotate(-45deg) translate(0.5px, -1px);
}
.fit .tray.is-no .tray-mark { background: #d9dcdf; }
.fit .tray.is-no .tray-mark::after {
  width: 8px;
  height: 1.5px;
  border: 0;
  border-radius: 2px;
  background: #fff;
  transform: none;
}
.fit .tray > div { display: grid; gap: 0; }
.fit .tray button {
  display: grid;
  gap: 2px;
  width: 100%;
  padding: 14px 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  box-shadow: inset 0 -1px 0 var(--line-2);
  transition: background 240ms var(--ease), box-shadow 240ms var(--ease), padding 240ms var(--ease);
}
.fit .tray button:last-child { box-shadow: none; }
.fit .tray button b { font-size: 15px; font-weight: 500; letter-spacing: -0.018em; }
.fit .tray button small {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0;
  color: var(--faint);
}
.fit .tray.is-no button b { color: var(--mute); }
@media (hover: hover) {
  .fit .tray button:hover { padding-left: 10px; padding-right: 10px; background: rgba(8,9,10,.03); }
}
.fit .tray button.is-on {
  padding-left: 12px;
  padding-right: 10px;
  background: rgba(8,9,10,.045);
  box-shadow: inset 2px 0 0 var(--ink), inset 0 -1px 0 var(--line-2);
}
.fit .tray.is-no button.is-on { box-shadow: inset 2px 0 0 #c8ccd0, inset 0 -1px 0 var(--line-2); }
.fit .fit-why {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 26px 22px;
  border-top: 1px solid rgba(8,9,10,.07);
  background: var(--paper-2);
  font-size: 14.5px;
  color: var(--ink-2);
}
.fit .fit-why::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex: none;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(10,100,250,.14);
}

/* ---- 9. Price: one premium card -------------------------- */

.price .plan {
  gap: 34px;
  padding: 38px 30px 34px;
  border: 0;
  border-radius: var(--r-xl);
  background:
    radial-gradient(100% 70% at 82% 0%, rgba(10,100,250,.16), transparent 60%),
    linear-gradient(180deg, #15181b, #08090a);
  color: var(--night-ink);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.09),
    inset 0 1px 0 rgba(255,255,255,.08),
    0 50px 100px -40px rgba(8,9,10,.55);
  transform: scale(calc(0.78 + var(--p, 1) * 0.22)) translate3d(0, calc((1 - var(--p, 1)) * 80px), 0);
  opacity: calc(0.25 + var(--p, 1) * 0.75);
  will-change: transform, opacity;
}
.price .plan-kicker {
  display: inline-flex;
  align-items: center;
  margin: 0 0 18px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.62);
  font-size: 10.5px;
  letter-spacing: 0.13em;
}
.price .plan-price b {
  color: #fff;
  letter-spacing: -0.055em;
}
.price .plan-price span { color: rgba(255,255,255,.5); }
.price .plan-price small { color: rgba(255,255,255,.45); }
.price .plan-lead { color: var(--night-mute); font-size: 14.5px; line-height: 1.55; }
.price .plan-list { gap: 13px; }
.price .plan-list li {
  padding-left: 28px;
  font-size: 14.5px;
  color: rgba(255,255,255,.86);
}
.price .plan-list li::before {
  top: 5px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}
.price .plan-list li::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 10px;
  width: 6px;
  height: 3px;
  border-left: 1.4px solid #fff;
  border-bottom: 1.4px solid #fff;
  transform: rotate(-45deg);
}
.price .slots { padding: 0 0 22px; }
.price .slots p { color: var(--night-mute); }
.price .slots li {
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.62);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
}
.price .slots li.is-you {
  background: #fff;
  color: var(--ink);
  box-shadow: none;
}
.price .plan .btn {
  background: linear-gradient(180deg, #fff, #eef0f1);
  color: var(--ink);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 1px 2px rgba(0,0,0,.3),
    0 16px 34px -14px rgba(0,0,0,.6);
}
.price-foot {
  margin: 22px auto 0;
  max-width: 52ch;
  text-align: center;
  color: var(--faint);
  font-size: 13px;
}

/* ---- 10. FAQ: editorial two-column ---------------------- */

.faq { display: grid; gap: 34px; }
.faq .sec-copy { margin: 0; }
.faq-aside {
  margin: 18px 0 0;
  color: var(--mute);
  font-size: 14px;
  line-height: 1.55;
  max-width: 34ch;
}
.faq-aside a { color: var(--ink); text-decoration: none; box-shadow: inset 0 -1px 0 var(--line); }
@media (hover: hover) { .faq-aside a:hover { box-shadow: inset 0 -1px 0 var(--ink); } }

.faq .faq-list { margin: 0; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  min-height: 0;
  padding: 22px 0;
  gap: 24px;
  font-size: 16.5px;
  font-weight: 500;
  letter-spacing: -0.018em;
  color: var(--mute);
  transition: color 300ms var(--ease);
}
@media (hover: hover) { .faq summary:hover { color: var(--ink); } }
.faq details[open] summary { color: var(--ink); padding-bottom: 14px; }
.faq summary::after {
  width: 13px;
  height: 13px;
  background:
    linear-gradient(currentColor, currentColor) center / 13px 1.4px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.4px 13px no-repeat;
  transition: transform 420ms var(--ease);
}
.faq details p {
  padding: 0 44px 24px 0;
  color: var(--mute);
  font-size: 15px;
  line-height: 1.6;
  max-width: 62ch;
}

/* ---- 11. Finale ----------------------------------------- */

.finale {
  padding: 0 0 var(--slab);
  background: var(--bg);
}
.finale-slab {
  position: relative;
  margin: 0 var(--slab);
  padding: 92px 26px 26px;
  border-radius: var(--r-2xl);
  background:
    radial-gradient(80% 60% at 50% 4%, rgba(10,100,250,.16), transparent 62%),
    linear-gradient(180deg, #0c0e10, #08090a);
  color: var(--night-ink);
  overflow: clip;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  clip-path: inset(calc((1 - var(--p, 1)) * 72%) 0 0 0 round 42px);
  transform: translate3d(0, calc((1 - var(--p, 1)) * 48px), 0);
  will-change: clip-path, transform;
}
.finale-in { text-align: center; max-width: 860px; margin: 0 auto 76px; }
.finale-in h2 {
  margin: 0 auto 22px;
  max-width: 15ch;
  font-size: clamp(36px, 6.6vw, 84px);
  font-weight: 500;
  letter-spacing: -0.046em;
  line-height: 0.96;
  color: #fff;
}
.finale-in p {
  margin: 0 auto 34px;
  max-width: 42ch;
  color: var(--night-mute);
  font-size: var(--t-lede);
  line-height: 1.55;
}
.finale-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.finale-cta .btn {
  background: linear-gradient(180deg, #fff, #edeff0);
  color: var(--ink);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 1px 2px rgba(0,0,0,.3),
    0 18px 40px -16px rgba(0,0,0,.6);
}
.finale-cta .btn-ghost {
  background: transparent;
  color: rgba(255,255,255,.8);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
}
@media (hover: hover) {
  .finale-cta .btn-ghost:hover { background: rgba(255,255,255,.06); color: #fff; }
}

.foot {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 26px 4px calc(8px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255,255,255,.08);
}
.who img { box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.who-name { color: #fff; font-size: 14.5px; }
.who-tz { color: var(--night-mute); }
.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  color: var(--night-mute);
  font-size: 13px;
}
.foot-links a { text-decoration: none; transition: color 240ms var(--ease); }
@media (hover: hover) { .foot-links a:hover { color: #fff; } }

/* ---- 12. Desktop ---------------------------------------- */

@media (min-width: 880px) {
  :root { --slab: 20px; --act: 168px; }

  .chrome-in { padding: 18px 26px; }
  .chrome-nav { display: flex; }

  .hero {
    grid-template-columns: minmax(300px, 40rem) 1fr;
    padding: 168px var(--inset) 30px;
    align-items: center;
    gap: 0;
  }
  .hero-copy { padding: 0 0 40px; }
  .hero-visual { min-height: 660px; margin-right: calc(var(--inset) * -1); }
  .fan {
    height: 660px;
    margin: 0;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 7%, #000 88%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 7%, #000 88%, transparent 100%);
  }
  .fan-card { width: 40%; max-width: 300px; }
  .fan-card img { height: 400px; }
  .fan-a { left: -2%; top: 122px; transform: rotate(-10deg); }
  .fan-b { left: 22%; top: 6px; transform: rotate(2deg); }
  .fan-c { left: 50%; top: 158px; transform: rotate(7deg); }
  .fan-d, .fan-e { display: block; }
  /* A loose diagonal drifting up and off the right edge. Sizes and
     rotations all differ so it never reads as a template. */
  .fan { height: 672px; }
  .fan-card { width: 40%; max-width: 236px; }
  /* portrait sources cropped to landscape — bias off-centre so the crop
     lands on the subject rather than the middle of a wall */
  .fan-card img { height: 168px; object-position: 50% 34%; }
  .fan-c img { object-position: 50% 44%; }
  .fan-e img { object-position: 50% 74%; }

  .fan-a { left: -5%; top: 366px; transform: rotate(-11deg); z-index: 2; }
  .fan-b { left: 14%; top: 196px; transform: rotate(-5deg); z-index: 4; width: 43%; max-width: 250px; }
  .fan-c { left: 40%; top: 344px; transform: rotate(7deg); z-index: 3; }
  .fan-d { left: 43%; top: 104px; transform: rotate(-3deg); z-index: 5; width: 45%; max-width: 262px; }
  .fan-e { left: 76%; top: 18px; transform: rotate(5deg); z-index: 2; }
  .fan-f { left: 68%; top: 262px; transform: rotate(10deg); z-index: 4; width: 33%; max-width: 194px; }
  .fan-g { left: 88%; top: 452px; transform: rotate(-8deg); z-index: 3; }
  .fan-d, .fan-e, .fan-f, .fan-g { display: block; }
  .scrollcue { display: flex; }

  .stage { margin-top: 0; }
  .stage-frame { padding: 34px 34px 26px; border-radius: var(--r-2xl); }

  /* The act pins as one frame: head and chapter copy hold the left rail,
     the window holds the right, the chapter rail sits on the floor. */
  .reel-stick {
    position: sticky;
    top: 0;
    height: 100vh;
    grid-template-columns: minmax(270px, 31%) 1fr;
    grid-template-rows: auto 1fr auto;
    align-content: stretch;
    gap: 30px 54px;
    padding: 7vh 56px 5vh;
  }
  .reel-track { height: 460vh; }
  .reel-head { grid-column: 1; grid-row: 1; max-width: none; align-self: end; }
  .reel-copy { grid-column: 1; grid-row: 2; align-self: center; min-height: 200px; }
  .reel-stage {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    min-height: 0;
  }
  .reel-bars { grid-column: 1 / -1; grid-row: 3; align-self: end; }
  .reel-bars li span { display: block; }

  .reel-body { display: contents; }
  .app { height: min(62vh, 540px); }
  .app-body { grid-template-columns: 178px 1fr; }
  .app-side { display: grid; }
  .app-nav, .app-tools { display: flex; }
  .app-foot p:last-child { display: block; }
  .app-main { overflow: hidden; }
  .view { padding: 24px 22px; align-content: center; }
  .grid-files { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 6px; }
  .ff { padding: 10px 6px 8px; gap: 8px; }
  .ff-ico { width: 46px; height: 37px; }
  .ff-ico.is-doc { width: 31px; height: 39px; }

  .versus .night-row { grid-template-columns: 1fr 1fr; gap: 34px; }
  .versus .phone:not(.is-agent) { transform: perspective(2000px) rotateY(3.5deg) translateZ(-24px); }
  .versus .phone.is-agent { transform: perspective(2000px) rotateY(-3.5deg) translateZ(0); }
  @media (hover: hover) {
    .versus .phone:hover { transform: perspective(2000px) translateY(-6px); z-index: 2; }
  }

  .stacks .pair-mats { gap: 22px; }
  .mat.surface { padding: 38px 36px 34px; }

  .price { display: grid; }
  .price .plan {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
    gap: 64px;
    padding: 56px 56px 52px;
    max-width: 1000px;
    margin: 0 auto;
    align-items: center;
  }

  .faq { grid-template-columns: minmax(260px, 32%) 1fr; gap: 64px; align-items: start; }
  .faq .sec-copy { position: sticky; top: 120px; }

  .finale-slab { padding: 168px 56px 34px; }
  .finale-in { margin-bottom: 128px; }
  .foot { flex-direction: row; align-items: center; justify-content: space-between; padding: 30px 4px 12px; }
}

@media (min-width: 1200px) {
  :root { --gutter: 40px; --slab: 26px; --act: 196px; }
  .chrome-in { padding: 20px 34px; }
}

/* the slab stays full-bleed; its contents stop stretching */
@media (min-width: 1440px) {
  .reel-stick {
    width: min(1340px, 100% - 112px);
    margin-inline: auto;
    padding-left: 0;
    padding-right: 0;
  }
  .finale-slab { padding-inline: 0; }
  .finale-in, .foot { width: min(1300px, 100% - 112px); margin-inline: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-lines] .w > i { transform: none !important; }
  .reel-track { height: auto !important; }
  .reel-stick {
    position: static !important;
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
  }
  /* the acts sit already settled — no scrub without motion */
  [data-act] { --p: 1 !important; }
  .reel-slab { --enter: 1 !important; clip-path: none !important; transform: none !important; }
  .finale-slab, .ledger, .price .plan { clip-path: none !important; transform: none !important; opacity: 1 !important; }
  .scene-track { height: auto !important; }
  .scene-stick { position: static !important; min-height: 0 !important; display: block !important; padding-block: 48px !important; }
  .erow { opacity: 1 !important; transform: none !important; }
  .night-cell, .pair-mats .mat, .price .plan { opacity: 1 !important; transform: none !important; filter: none !important; }
  .reel-body { display: block !important; }
  .ch { position: relative; opacity: 1; transform: none; }
  /* every beat is laid out in flow, nothing waits on scroll */
  .app { height: auto !important; transform: none !important; }
  .app-main { display: block; }
  .view {
    display: block;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
  }
  .term-log li { opacity: 1 !important; transform: none !important; }
  .info { position: static; width: auto; opacity: 1 !important; transform: none !important; margin-top: 14px; }
  .app-cursor { display: none !important; }
  .erow-body { grid-template-rows: 1fr !important; }
  .erow-inner { opacity: 1 !important; transform: none !important; }
  .versus .phone { transform: none !important; }
  .file, .ready, .mini, .note, .rv, .panel-kicker, .panel-ui, .panel-note, .job-panel, [data-in], .hero-copy, .fan-card { opacity: 1 !important; transform: none !important; clip-path: none !important; filter: none !important; }
  .mini.typing { display: none !important; }
  .film-stage { display: grid; min-height: 0; }
  .scene { position: relative; opacity: 1; visibility: visible; transform: none; }
  .window-tilt { transform: none !important; }
}