/* The whole site's stylesheet. Shared by / and /demo so the two cannot
   drift apart; it was inline while there was only one page. */
/* ─────────────────────────────────────────────────────────
   KOOCH - light-committed marketing site.
   Type: Poppins (headings, echoes the geometric wordmark)
         Inter  (body, data, prices)
   Plum is brand. Never a status - status has its own hues.
   ───────────────────────────────────────────────────────── */
:root {
  /* The page is dark end to end. These are the page's tokens; the light
     values they replaced now live on .lit below, which the product mocks
     opt into - a phone screen and a browser console are lit surfaces, and
     inverting them would be drawing a product that does not exist. */
  --paper:      #16111A;
  --alt:        #1B1520;
  --alt-warm:   #1F1626;
  --card:       #1E1825;
  --ink:        #F6F1F4;
  --ink-soft:   #D6CBD2;
  --muted:      #A99BA3;
  --line:       rgba(255,255,255,.10);
  --line-firm:  rgba(255,255,255,.19);
  --black:      #0F0B12;

  --plum:       #8E2F5F;
  --plum-deep:  #6B2247;
  /* Plum as a FILL is still #8E2F5F. Plum as INK on this ground is not:
     #8E2F5F on #16111A is 2.7:1, under AA even at heading sizes. Every place
     plum was a text or edge colour now asks for --plum-ink, which the lit
     islands below hand back as ordinary plum. */
  --plum-ink:     var(--plum-lit);
  --plum-on-tint: var(--plum-lit);
  /* Was a pale tint to sit on white; on a dark ground the equivalent job is
     done by a raised plum, not a lighter one. */
  --plum-soft:  #381B2B;

  /* Status hues re-cut for a dark ground: the old #1F7A55 on near-black is
     3.1:1, under AA, so the text steps up and the fill steps down. */
  --live:       #5CD6A0;
  --live-bg:    #14312A;
  --pending:    #E8B75F;
  --pending-bg: #33260F;

  --shadow-sm:  0 1px 2px rgba(30,26,28,.06);
  --shadow:     0 1px 3px rgba(30,26,28,.06), 0 10px 28px -12px rgba(30,26,28,.16);
  --shadow-lg:  0 2px 6px rgba(30,26,28,.06), 0 24px 56px -20px rgba(30,26,28,.22);

  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Poppins", "Inter", ui-sans-serif, system-ui, sans-serif;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --measure: 62ch;
  /* easeOutQuint - slow to settle, which is most of what reads as classy */
  --ease: cubic-bezier(.22, 1, .36, 1);

  /* The two dark blocks at the top of the page - the hero and the in-action
     stage - and nothing else. Everything below them stays on paper, so these
     are namespaced rather than swapped into the tokens above. */
  --night:        #16111A;
  --night-lift:   #1F1825;
  --night-line:   rgba(255,255,255,.09);
  --night-firm:   rgba(255,255,255,.17);
  --on-night:     #F6F1F4;
  --on-night-mut: #A99BA3;
  /* Plum at 4.1:1 on near-black is under AA; this is the app's own brandOnDark,
     so the site and the phone agree on what plum looks like in the dark. */
  --plum-lit:     #D4699C;
  --live-lit:     #5CD6A0;
}

* { box-sizing: border-box; }

/* ── Lit islands ───────────────────────────────────────────
   The page is dark; these four are not. A phone screen and a browser
   console are lit surfaces, and drawing them dark would be drawing a
   product that does not exist. Rather than restyling their innards,
   each one re-declares the page tokens locally, so every rule inside
   keeps working and simply resolves to the light values. */
.phone, .console, .board, .queue {
  --paper:      #FFFFFF;
  --alt:        #F8F6F7;
  --alt-warm:   #FBF7F9;
  --card:       #FFFFFF;
  --ink:        #1E1A1C;
  --ink-soft:   #453C41;
  --muted:      #6B6067;
  --line:       #E7E1E4;
  --line-firm:  #D3C9CE;
  --plum-soft:  #F7EAF1;
  --plum-ink:     var(--plum);
  --plum-on-tint: var(--plum-deep);
  --live:       #1F7A55;
  --live-bg:    #E8F4EE;
  --pending:    #8A6010;
  --pending-bg: #FBF2E0;
  color: var(--ink);
  color-scheme: light;
}

/* The whole page is sized in rem, so the root is the one dial that moves
   every heading, label and caption together. 18px, not 16. */
html { font-size: 112.5%; color-scheme: dark; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0;
  line-height: 1.14;
  color: var(--ink);
}
p { margin: 0; }
a { color: inherit; }

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

.wrap { width: min(1180px, 100% - 3rem); margin-inline: auto; }
@media (max-width: 640px) { .wrap { width: min(1180px, 100% - 2rem); } }

.eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--plum-ink);
  margin: 0;
}
.lede { color: var(--muted); font-size: 1.125rem; max-width: var(--measure); }
.data { font-variant-numeric: tabular-nums; }

.flag {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pending);
  background: var(--pending-bg);
  border: 1px solid color-mix(in srgb, var(--pending) 30%, transparent);
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  vertical-align: 2px;
}

/* ── Brand lockup ─────────────────────────────────────────
   The reversed artwork carries its own near-black ground, so the lockup is
   one image on a rounded plaque rather than a mark and wordmark composed in
   CSS. 60px in the header is what the strapline needs to stay legible; below
   560px it drops to 46px, where the strapline goes decorative but the nav
   still fits. */
.lockup { display: inline-flex; text-decoration: none; }
.lockup img { display: block; height: 60px; width: auto; border-radius: 11px; }
.lockup--lg img { height: 68px; border-radius: 13px; }
@media (max-width: 560px) { .lockup img { height: 46px; } }

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: -0.005em;
  padding: 0.72rem 1.3rem;
  border-radius: 8px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn--primary { background: var(--plum); color: #fff; box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--plum-deep); }
.btn--ghost { border-color: var(--line-firm); color: var(--ink); background: var(--paper); }
.btn--ghost:hover { border-color: var(--plum-ink); color: var(--plum-ink); }
.btn--onplum { background: #fff; color: var(--plum-deep); }
.btn--onplum:hover { background: #F7EAF1; }
.btn--outline-light { border-color: rgba(255,255,255,.5); color: #fff; }
.btn--outline-light:hover { border-color: #fff; background: rgba(255,255,255,.1); }

/* ── Nav ───────────────────────────────────────────────────
   A capsule that floats over whatever is under it. It is dark on both
   grounds rather than inverting per section: one nav that never restyles
   is steadier than two that swap at a scroll position. Fixed, not sticky,
   so the hero can start behind it. */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 60; padding: 0.7rem 0; }
.nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.25rem;
  width: fit-content; max-width: 100%; margin-inline: auto;
  padding: 0.4rem 0.4rem 0.4rem 0.85rem;
  border-radius: 999px;
  background: rgba(22,17,26,.88);
  border: 1px solid var(--night-line);
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 34px -14px rgba(0,0,0,.7);
}
/* Small enough for a capsule, which puts the artwork's strapline below the
   size it stays legible at - in here it is the mark, not the lockup. */
.nav .lockup img { height: 34px; border-radius: 7px; }
.nav__links { display: flex; gap: 0.25rem; font-size: 0.88rem; font-weight: 500; color: var(--on-night-mut); }
.nav__links a { text-decoration: none; padding: 0.35rem 0.6rem; border-radius: 999px; transition: color .15s ease, background .15s ease; }
.nav__links a:hover { color: var(--on-night); background: rgba(255,255,255,.07); }
.nav__right { display: flex; align-items: center; gap: 0.85rem; }
.nav__signin { font-size: 0.88rem; font-weight: 500; color: var(--on-night-mut); text-decoration: none; }
.nav__signin:hover { color: var(--on-night); }
.nav .btn--primary { border-radius: 999px; padding: 0.55rem 1.1rem; font-size: 0.85rem; box-shadow: 0 0 0 1px rgba(212,105,156,.3), 0 8px 22px -8px rgba(142,47,95,.95); }
@media (max-width: 980px) { .nav__links { display: none; } }
@media (max-width: 520px) { .nav__signin { display: none; } }

/* The nav no longer takes up flow space, so anchors need to clear it. */
[id] { scroll-margin-top: 6.25rem; }

/* ── Scroll progress ─────────────────────────────────────── */
.progress {
  position: fixed; top: 0; left: 0; z-index: 90;
  height: 2px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--plum), var(--plum-lit));
  pointer-events: none;
}

/* ── Hero ──────────────────────────────────────────────────
   Centred and dark. The product is not in here: it is in the stage
   directly below, which the hero is sized to leave peeking above the
   fold rather than competing with. */
.hero {
  position: relative;
  background: var(--night);
  color: var(--on-night);
  text-align: center;
  padding: 9.5rem 0 4.5rem;
  overflow: hidden;
  isolation: isolate;
}
@media (max-width: 980px) { .hero { padding: 8rem 0 3.5rem; } }

/* Two aids, both decorative: a plum bloom behind the headline, and a faint
   grid that keeps a large black field from reading as an unpainted div. */
.hero__glow, .hero__grid { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero__glow { background: radial-gradient(62% 58% at 50% 8%, rgba(142,47,95,.55), transparent 68%); }
.hero__grid {
  background-image:
    linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(70% 60% at 50% 30%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000 30%, transparent 78%);
}

.hero__inner { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.hero h1 {
  font-size: clamp(2.5rem, 6.6vw, 4.6rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.04;
  color: var(--on-night);
  max-width: 16ch;
}
/* The one italic-serif line on the page. It carries the sentence the whole
   product answers, so it is the only place the voice changes. */
.hero h1 em {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--plum-lit);
  font-size: 1.08em;
}
.hero__lede { color: var(--on-night-mut); font-size: 1.06rem; max-width: 54ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }
.hero__reassure { display: flex; flex-wrap: wrap; gap: 1.25rem; justify-content: center; font-size: 0.82rem; color: var(--on-night-mut); }
.hero__reassure span { display: inline-flex; align-items: center; gap: 0.4rem; }
.hero__reassure span::before { content: "✓"; color: var(--live-lit); font-weight: 700; }

/* ── Micro-label ───────────────────────────────────────────
   Mono, uppercase, wide. Used for the labels that name a thing rather
   than say anything - the eyebrow, the stage caption, the run length. */
.mono-label {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--mono); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--on-night-mut); margin: 0;
}
.mono-label--pill {
  padding: 0.4rem 0.9rem; border-radius: 999px;
  border: 1px solid var(--night-line); background: rgba(255,255,255,.04);
  color: var(--plum-lit);
}
.mono-label .dot { background: var(--live-lit); }

/* ── Buttons on a dark ground ────────────────────────────── */
.btn--glow {
  background: var(--plum); color: #fff; border-radius: 999px;
  padding-left: 0.55rem;
  box-shadow: 0 0 0 1px rgba(212,105,156,.32), 0 12px 34px -10px rgba(142,47,95,.95);
}
.btn--glow:hover { background: #A03A6D; }
.btn__arrow {
  display: grid; place-items: center; flex: none;
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: rgba(0,0,0,.28); font-size: 0.8rem;
}
.btn--wire { border-radius: 999px; border-color: var(--night-firm); color: var(--on-night); background: transparent; }
.btn--wire:hover { border-color: var(--plum-lit); color: var(--plum-lit); background: rgba(255,255,255,.04); }

/* ── Console panel (field log) ───────────────────────────── */
.console { background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); overflow: hidden; }
.console__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.8rem 1rem; border-bottom: 1px solid var(--line); background: var(--plum-soft);
}
.console__who { font-family: var(--display); font-weight: 600; font-size: 0.9rem; }
.console__meta { font-size: 0.72rem; color: var(--muted); }
.pill-live {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--live); background: var(--live-bg);
  padding: 0.25rem 0.55rem; border-radius: 999px; white-space: nowrap;
}
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--live); animation: pulse 2.2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

.log { list-style: none; margin: 0; padding: 0.5rem 0 0.75rem; }
/* Rows are revealed by the scrubber, not by a fixed cascade, so the feed
   and the phone beside it are always describing the same minute. Authored
   visible: with no JS the whole day is simply there. */
.log__row {
  display: grid; grid-template-columns: 3.4rem 1px 1fr; gap: 0 0.8rem;
  align-items: start; padding: 0.42rem 1rem 0.42rem 0;
}
.js .log__row {
  opacity: 0; transform: translateY(10px); filter: blur(3px);
  transition: opacity .55s ease, transform .7s var(--ease), filter .55s ease;
}
.js .log__row.is-in { opacity: 1; transform: none; filter: none; }
/* The entry that just arrived gets one ring, then settles. Without it a new
   row and a row that has been there ten seconds look identical. */
.log__row.is-fresh .log__rail::before { animation: pip 1.1s var(--ease); }
@keyframes pip {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--plum) 60%, transparent); }
  70%  { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.scrub__say.is-fresh { animation: sayIn .5s var(--ease) both; }
@keyframes sayIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.log__time { font-size: 0.78rem; font-variant-numeric: tabular-nums; color: var(--muted); text-align: right; padding-top: 0.1rem; }
.log__rail { background: var(--line-firm); width: 1px; height: 100%; justify-self: center; position: relative; }
.log__rail::before {
  content: ""; position: absolute; top: 0.35rem; left: 50%; transform: translateX(-50%);
  width: 7px; height: 7px; border-radius: 50%; background: var(--card); border: 1.5px solid var(--plum);
}
.log__row--money .log__rail::before { background: var(--plum); }
.log__what { font-size: 0.875rem; font-weight: 600; }
.log__where { font-size: 0.8rem; color: var(--muted); }
.log__amt { font-variant-numeric: tabular-nums; color: var(--plum-ink); font-weight: 600; }
.tag {
  display: inline-block; font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase; padding: 0.1rem 0.42rem;
  border-radius: 4px; border: 1px solid var(--line-firm); color: var(--muted);
  margin-left: 0.4rem; vertical-align: 0;
}
.tag--pending { color: var(--pending); border-color: color-mix(in srgb, var(--pending) 35%, transparent); background: var(--pending-bg); }
.tag--won { color: var(--live); border-color: color-mix(in srgb, var(--live) 35%, transparent); background: var(--live-bg); }
.console__foot {
  border-top: 1px solid var(--line); padding: 0.7rem 1rem;
  display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--muted);
}
@media (prefers-reduced-motion: reduce) {
  .js .log__row { opacity: 1; transform: none; transition: none; }
  .dot { animation: none; }
  .pfunnel__bar i { transition: none; }
  .js .daystage__inner { opacity: 1; transform: none; transition: none; }
}

/* ── Section scaffolding ─────────────────────────────────── */
.section { padding: 4.75rem 0; }
.section--alt { background: var(--alt); }
.section--warm { background: var(--alt-warm); }
.section__head { display: flex; flex-direction: column; gap: 0.8rem; margin-bottom: 2.75rem; max-width: 46rem; }
.section__head h2 { font-size: clamp(1.75rem, 3.1vw, 2.4rem); }

/* ── Stat band ───────────────────────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
@media (max-width: 780px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stat { background: var(--paper); padding: 1.5rem 1.25rem; display: flex; flex-direction: column; gap: 0.3rem; }
.stat__n { font-family: var(--display); font-weight: 700; font-size: 2rem; color: var(--plum-ink); line-height: 1; }
.stat__l { font-size: 0.92rem; color: var(--muted); }

/* ── Logo strip (placeholder) ────────────────────────────── */
.logos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; margin-top: 1.5rem; }
@media (max-width: 780px) { .logos { grid-template-columns: repeat(2, 1fr); } }
.logo-slot {
  border: 1px dashed var(--line-firm); border-radius: 8px; height: 62px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.78rem; color: var(--muted); background: var(--paper);
}

/* ── Alternating feature rows ────────────────────────────── */
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; padding: 3.25rem 0; }
.row + .row { border-top: 1px solid var(--line); }
@media (max-width: 900px) { .row { grid-template-columns: 1fr; gap: 2.25rem; } }
.row__copy { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.row__copy h3 { font-size: clamp(1.4rem, 2.3vw, 1.85rem); }
.row--flip .row__media { order: -1; }
@media (max-width: 900px) { .row--flip .row__media { order: 0; } }

.ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; font-size: 0.95rem; }
.ticks li { position: relative; padding-left: 1.35rem; color: var(--muted); }
.ticks li::before { content: "→"; position: absolute; left: 0; top: 0; color: var(--plum-ink); font-size: 0.8rem; }
.ticks b { color: var(--ink); font-weight: 600; }

.link-more { font-family: var(--display); font-weight: 600; font-size: 0.9rem; color: var(--plum-ink); text-decoration: none; }
.link-more:hover { text-decoration: underline; }

/* ── Phone mock ──────────────────────────────────────────── */
.phone { width: min(19rem, 100%); margin-inline: auto; border: 1px solid var(--line-firm); border-radius: 26px; padding: 0.5rem; background: var(--card); box-shadow: var(--shadow-lg); }
.phone__screen { border-radius: 20px; background: var(--alt); overflow: hidden; border: 1px solid var(--line); }
.phone__top { padding: 1rem 1rem 0.75rem; display: flex; align-items: center; justify-content: space-between; background: var(--paper); }
.phone__hi { font-family: var(--display); font-weight: 800; font-size: 1.05rem; }
.phone__avatar { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line-firm); flex: none; }


/* The module grid: every tile is a destination, badges are what is waiting. */
.phone__grid { padding: 0 0.75rem 0.75rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; }
.ptile { position: relative; border: 1px solid var(--line); border-radius: 9px; background: var(--card); padding: 0.55rem 0.3rem; text-align: center; font-size: 0.7rem; font-weight: 600; color: var(--ink-soft); }
.ptile__badge { animation: badgeIn .45s var(--ease); position: absolute; top: -6px; right: -5px; min-width: 18px; height: 18px; border-radius: 999px; background: var(--plum); color: #fff; font-size: 0.7rem; font-weight: 700; line-height: 18px; }
.phone__tabs { display: flex; border-top: 1px solid var(--line); background: var(--card); }
.ptab { flex: 1; text-align: center; padding: 0.55rem 0.2rem; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); border-top: 2px solid transparent; }
.ptab--on { color: var(--plum-ink); border-top-color: var(--plum-ink); }

/* ── Pipeline board mock ─────────────────────────────────── */
.board { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); background: var(--card); }
.board__head { display: flex; justify-content: space-between; align-items: center; padding: 0.8rem 1rem; border-bottom: 1px solid var(--line); background: var(--alt); font-family: var(--display); font-weight: 600; font-size: 0.9rem; }
.board__total { font-size: 0.78rem; color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.brow { display: grid; grid-template-columns: 1fr auto; gap: 0.75rem; align-items: center; padding: 0.7rem 1rem; border-bottom: 1px solid var(--line); }
.brow:last-child { border-bottom: 0; }
.brow__name { font-size: 0.875rem; font-weight: 600; }
.brow__meta { font-size: 0.76rem; color: var(--muted); }
.brow__amt { font-size: 0.84rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.stage { display: inline-block; font-size: 0.6rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.14rem 0.45rem; border-radius: 4px; background: var(--plum-soft); color: var(--plum-on-tint); margin-left: 0.35rem; }
.kind { display: inline-block; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.12rem 0.4rem; border-radius: 3px; border: 1px solid var(--line-firm); color: var(--muted); margin-right: 0.4rem; }

/* ── Approvals mock ──────────────────────────────────────── */
.queue { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); background: var(--card); }
.queue__head { display: flex; justify-content: space-between; align-items: center; padding: 0.8rem 1rem; border-bottom: 1px solid var(--line); background: var(--alt); font-family: var(--display); font-weight: 600; font-size: 0.9rem; }
.queue__count { font-size: 0.78rem; color: var(--muted); font-weight: 500; }
.qrow { display: grid; grid-template-columns: 1fr auto; gap: 0.75rem; align-items: center; padding: 0.75rem 1rem; border-bottom: 1px solid var(--line); }
.qrow:last-child { border-bottom: 0; }
.qrow__who { font-size: 0.875rem; font-weight: 600; }
.qrow__what { font-size: 0.78rem; color: var(--muted); }
.qrow__amt { font-size: 0.84rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.qbtns { display: flex; gap: 0.35rem; }
.qbtn { font-size: 0.64rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.25rem 0.5rem; border-radius: 5px; border: 1px solid var(--line-firm); background: var(--paper); color: var(--muted); }
.qbtn--ok { color: var(--live); border-color: color-mix(in srgb, var(--live) 40%, transparent); background: var(--live-bg); }

/* ── Modules (interactive) ───────────────────────────────── */
.modules { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
@media (max-width: 900px) { .modules { grid-template-columns: 1fr; gap: 2.25rem; } }

.mod-group { border: 1px solid var(--line); border-radius: 10px; padding: 0.75rem; background: var(--paper); margin-bottom: 0.6rem; }
.mod-group__cap { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--plum-ink); margin-bottom: 0.6rem; display: flex; align-items: center; gap: 0.5rem; }
.mod-group__cap span { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted); font-size: 0.75rem; }
.toggle-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
@media (max-width: 560px) { .toggle-list { grid-template-columns: 1fr; } }
.toggle {
  display: flex; align-items: center; gap: 0.8rem; padding: 0.75rem 0.9rem;
  border: 1px solid var(--line); border-radius: 9px; background: var(--paper);
  cursor: pointer; text-align: left; font: inherit; color: inherit;
  transition: border-color .15s ease, background .15s ease;
}
.toggle:hover { border-color: var(--line-firm); }
.toggle[aria-pressed="true"] { border-color: color-mix(in srgb, var(--plum) 45%, transparent); background: var(--plum-soft); }
.switch { flex: none; width: 34px; height: 20px; border-radius: 999px; background: var(--line-firm); position: relative; transition: background .18s ease; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform .18s ease; }
.toggle[aria-pressed="true"] .switch { background: var(--plum); }
.toggle[aria-pressed="true"] .switch::after { transform: translateX(14px); }
.toggle__name { font-family: var(--display); font-weight: 600; font-size: 0.88rem; display: block; }
.toggle__flag { font-size: 0.66rem; color: var(--muted); letter-spacing: 0.02em; }

.always { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px dashed var(--line-firm); display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.chip { font-size: 0.76rem; font-weight: 500; padding: 0.3rem 0.65rem; border-radius: 999px; background: var(--plum-soft); color: var(--plum-on-tint); border: 1px solid color-mix(in srgb, var(--plum) 20%, transparent); }
.always__label { font-size: 0.8rem; color: var(--muted); margin-right: 0.25rem; }

.previews { display: flex; flex-direction: column; gap: 1rem; }
.mini { border: 1px solid var(--line); border-radius: 10px; background: var(--card); box-shadow: var(--shadow-sm); overflow: hidden; }
.mini__cap { padding: 0.55rem 0.85rem; border-bottom: 1px solid var(--line); background: var(--alt); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.mini__body { padding: 0.75rem 0.85rem; display: flex; flex-wrap: wrap; gap: 0.4rem; min-height: 76px; align-content: flex-start; }
.mchip { font-size: 0.76rem; font-weight: 500; padding: 0.28rem 0.6rem; border-radius: 6px; border: 1px solid var(--line-firm); color: var(--ink-soft); background: var(--paper); }
.mchip--fixed { background: var(--plum-soft); border-color: color-mix(in srgb, var(--plum) 20%, transparent); color: var(--plum-on-tint); }
.mchip[hidden] { display: none; }
.mini__note { padding: 0 0.85rem 0.7rem; font-size: 0.68rem; line-height: 1.45; color: var(--muted); }

/* ── Hierarchy ───────────────────────────────────────────── */
.tree { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm); }
.tier { display: flex; align-items: center; gap: 0.9rem; padding: 0.85rem 1rem; border-bottom: 1px solid var(--line); background: var(--card); }
.tier:last-child { border-bottom: 0; }
.tier__box { border: 1px solid var(--line-firm); border-radius: 7px; padding: 0.45rem 0.8rem; font-family: var(--display); font-weight: 600; font-size: 0.85rem; background: var(--paper); white-space: nowrap; }
.tier--reach { background: var(--alt-warm); }
.tier--reach .tier__box { border-color: var(--plum-ink); color: var(--plum-ink); }
.tier__note { font-size: 0.83rem; color: var(--muted); }
.note-plum { font-size: 0.82rem; color: var(--plum-ink); }

/* ── Testimonials ────────────────────────────────────────── */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
@media (max-width: 860px) { .quotes { grid-template-columns: 1fr; } }
.quote { border: 1px solid var(--line); border-radius: 12px; padding: 1.5rem; background: var(--card); display: flex; flex-direction: column; gap: 1rem; box-shadow: var(--shadow-sm); }
.quote p { font-size: 1.02rem; color: var(--ink-soft); }
.quote__by { display: flex; align-items: center; gap: 0.7rem; margin-top: auto; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--plum-soft); border: 1px solid color-mix(in srgb, var(--plum) 22%, transparent); display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 0.78rem; color: var(--plum-ink); flex: none; }
.quote__name { display: block; font-size: 0.85rem; font-weight: 600; }
.quote__role { display: block; font-size: 0.78rem; color: var(--muted); line-height: 1.35; }

/* ── Billing toggle ──────────────────────────────────────── */
.billing { display: inline-flex; align-self: flex-start; align-items: center; gap: 0.25rem; padding: 0.25rem; border: 1px solid var(--line-firm); border-radius: 999px; background: var(--paper); margin-top: 0.4rem; }
.billing__opt {
  font: inherit; font-family: var(--display); font-weight: 600; font-size: 0.85rem;
  padding: 0.45rem 1rem; border-radius: 999px; border: 0; background: transparent;
  color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem;
  transition: background .15s ease, color .15s ease;
}
.billing__opt[aria-pressed="true"] { background: var(--plum); color: #fff; }
.save { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.04em; padding: 0.1rem 0.4rem; border-radius: 4px; background: var(--live-bg); color: var(--live); }
.billing__opt[aria-pressed="true"] .save { background: rgba(255,255,255,.22); color: #fff; }

/* ── Plans ───────────────────────────────────────────────── */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; align-items: start; }
@media (max-width: 860px) { .plans { grid-template-columns: 1fr; } }
.plan { border: 1px solid var(--line); border-radius: 12px; padding: 1.6rem; background: var(--card); display: flex; flex-direction: column; gap: 1rem; box-shadow: var(--shadow-sm); }
.plan--mid { border-color: var(--plum-ink); box-shadow: var(--shadow); position: relative; }
.plan__badge { position: absolute; top: -0.7rem; left: 1.6rem; background: var(--plum); color: #fff; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.22rem 0.6rem; border-radius: 4px; }
.plan__name { font-family: var(--display); font-weight: 700; font-size: 1.2rem; }
.plan__for { font-size: 0.85rem; color: var(--muted); min-height: 2.6em; }
.plan__price { padding-bottom: 0.9rem; border-bottom: 1px solid var(--line); }
.plan__amt { font-family: var(--display); font-weight: 700; font-size: 2.1rem; color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; }
.plan__per { font-size: 0.82rem; color: var(--muted); margin-left: 0.25rem; }
.plan__note { display: block; font-size: 0.78rem; color: var(--muted); margin-top: 0.4rem; font-variant-numeric: tabular-nums; }
.plan__was { display: block; font-size: 0.76rem; color: var(--live); font-weight: 600; margin-top: 0.2rem; }
.plan__mods { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.92rem; }
.plan__mods li { display: flex; gap: 0.55rem; align-items: baseline; }
.plan__mods li[data-on="yes"]::before { content: "●"; color: var(--plum-ink); font-size: 0.6rem; }
.plan__mods li[data-on="no"]::before  { content: "○"; color: var(--line-firm); font-size: 0.6rem; }
.plan__mods li[data-on="no"] { color: var(--muted); }
.plan .btn { margin-top: auto; }
.plan__foot { font-size: 0.8rem; color: var(--muted); margin-top: 1.25rem; }

/* ── FAQ ─────────────────────────────────────────────────── */
.faq { max-width: 48rem; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: 1.1rem 2.5rem 1.1rem 0; position: relative;
  font-family: var(--display); font-weight: 600; font-size: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 0.4rem; top: 50%; transform: translateY(-50%);
  font-size: 1.2rem; color: var(--plum-ink); line-height: 1;
}
.faq details[open] summary::after { content: "−"; }
.faq summary:hover { color: var(--plum-ink); }
.faq__a { padding: 0 2.5rem 1.25rem 0; color: var(--muted); font-size: 1rem; max-width: var(--measure); }

/* ── CTA band ────────────────────────────────────────────── */
.cta { background: var(--plum); color: #fff; padding: 4rem 0; }
.cta__inner { display: grid; grid-template-columns: 1.1fr auto; gap: 2.5rem; align-items: center; }
@media (max-width: 800px) { .cta__inner { grid-template-columns: 1fr; } }
.cta h2 { color: #fff; font-size: clamp(1.75rem, 3.4vw, 2.5rem); }
.cta p { color: rgba(255,255,255,.85); margin-top: 0.85rem; max-width: 42ch; }
.cta__actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }

/* ── Demo request page ───────────────────────────────────
   A view of its own, not a section: opening it hides the marketing page so
   the form is the only thing on screen and nothing scrolls past it. */
.demo { padding: 2.5rem 0 4.5rem; }
.demo__bar { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 3rem; }
.demo__back { font-family: var(--display); font-weight: 600; font-size: 0.9rem; color: var(--muted); text-decoration: none; }
.demo__back:hover { color: var(--plum-ink); }
.demo__grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 4rem; align-items: start; }
@media (max-width: 900px) { .demo__grid { grid-template-columns: 1fr; gap: 2.5rem; } }
.demo__aside h1 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
.demo__aside .lede { margin-top: 1rem; }

.form { display: flex; flex-direction: column; gap: 1.1rem; border: 1px solid var(--line); border-radius: 14px; padding: 1.9rem; background: var(--card); box-shadow: var(--shadow); }
.field { display: flex; flex-direction: column; gap: 0.35rem; }
.field > label { font-family: var(--display); font-weight: 600; font-size: 0.82rem; }
.field .hint { font-size: 0.75rem; color: var(--muted); }
.field input, .field select, .field textarea {
  font: inherit; font-size: 0.92rem; color: var(--ink);
  padding: 0.62rem 0.75rem; border-radius: 8px;
  border: 1px solid var(--line-firm); background: var(--paper);
  width: 100%;
}
.field textarea { resize: vertical; min-height: 5.5rem; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--plum-ink); outline-offset: 1px; border-color: var(--plum-ink); }
.field--bad input, .field--bad select { border-color: #F2827A; }
.field__err { font-size: 0.75rem; color: #F2827A; }
.field__err[hidden] { display: none; }
.form__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 560px) { .form__pair { grid-template-columns: 1fr; } }
.req { color: var(--plum-ink); }

.picks { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.pick { position: relative; }
.pick input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pick span { display: block; font-size: 0.8rem; padding: 0.35rem 0.7rem; border-radius: 999px; border: 1px solid var(--line-firm); color: var(--ink-soft); background: var(--paper); }
.pick input:checked + span { background: var(--plum-soft); border-color: color-mix(in srgb, var(--plum) 45%, transparent); color: var(--plum-on-tint); font-weight: 600; }
.pick input:focus-visible + span { outline: 2px solid var(--plum); outline-offset: 2px; }

.form__foot { font-size: 0.78rem; color: var(--muted); }
/* Off-screen rather than display:none - some bots skip hidden inputs. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* What the visitor sees once the request is composed. */
.sent { border: 1px solid color-mix(in srgb, var(--live) 40%, transparent); background: var(--live-bg); border-radius: 12px; padding: 1.4rem; display: flex; flex-direction: column; gap: 0.9rem; }
.sent h3 { font-size: 1.05rem; }
.sent p { font-size: 0.88rem; color: var(--ink-soft); }
.sent__box { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.76rem; line-height: 1.55; white-space: pre-wrap; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 0.8rem; max-height: 15rem; overflow: auto; }
.sent__actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.sent--warn { border-color: color-mix(in srgb, var(--pending) 45%, transparent); background: var(--pending-bg); }
[hidden] { display: none !important; }

/* ── Footer ──────────────────────────────────────────────── */
.foot { background: var(--alt); border-top: 1px solid var(--line); padding: 3.25rem 0 2rem; color: var(--ink-soft); }
.foot__grid { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 2rem; }
@media (max-width: 900px) { .foot__grid { grid-template-columns: 1fr 1fr; } }
.foot h4 { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.9rem; font-weight: 600; font-family: var(--sans); }
.foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.95rem; }
.foot a { text-decoration: none; color: var(--ink-soft); }
.foot a:hover { color: var(--plum-ink); }
.foot__tag { font-size: 0.875rem; margin-top: 1rem; max-width: 32ch; color: var(--muted); }
.foot__base {
  margin-top: 2.5rem; padding-top: 1.4rem; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: 0.78rem; color: var(--muted);
}

/* ═══════════════════════════════════════════════════════════
   IN ACTION - one field day, played
   ═══════════════════════════════════════════════════════════
   The reference pins a screen recording and scrubs it with the wheel.
   There is no recording here, so the phone and the console are the real
   thing, built from the same numbers the app would hold at that minute.

   It is deliberately NOT scrubbed by the scroll. Pinning the section
   meant the page stopped moving while somebody was trying to move it;
   the day plays itself instead, and the scroll is left alone to do its
   one job. Authored showing the finished day, so with no JS it is all
   simply there. */
.action { position: relative; background: var(--night); color: var(--on-night); }
.action__body { position: relative; padding: 5rem 0 4rem; overflow: hidden; }

.action__wash, .action__grid { position: absolute; inset: 0; pointer-events: none; }
.action__wash { background: radial-gradient(64% 52% at 50% 58%, rgba(142,47,95,.42), transparent 70%); }
.action__grid {
  background-image:
    linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(72% 62% at 50% 50%, #000 25%, transparent 80%);
  -webkit-mask-image: radial-gradient(72% 62% at 50% 50%, #000 25%, transparent 80%);
}
.action__inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1.6rem; }

.action__head { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; text-align: center; }
.action__head h2 { font-size: clamp(1.5rem, 3vw, 2.15rem); color: var(--on-night); font-weight: 700; }
.action__head em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--plum-lit); font-size: 1.12em; }

/* ── The stage ─────────────────────────────────────────────
   Both panels stay light, because both products are light. Against the
   dark ground that reads as two lit screens rather than two more cards. */
.daystage { perspective: 1500px; width: 100%; }
.daystage__inner {
  display: grid;
  grid-template-columns: minmax(0, 19rem) minmax(0, 25rem);
  justify-content: center;
  gap: 1.4rem;
  align-items: start;
}
.js .daystage__inner {
  opacity: 0; transform: translateY(16px);
  transition: opacity .8s ease, transform .9s var(--ease);
}
.js .action.is-in .daystage__inner { opacity: 1; transform: none; }
@media (max-width: 900px) {
  .daystage__inner { grid-template-columns: minmax(0, 21rem); }
}

/* ── Phone: the app's own Home screen ──────────────────────
   Same blocks in the same order the phone draws them - duty panel,
   open pipeline, the tiles the tab bar could not afford. */
.daystage .phone { width: 100%; margin: 0; }

/* The duty panel is dark in the app and changes ground with the state,
   which is the whole reason it is legible from arm's length. The mock
   used to be a white card; it now matches. */
.duty {
  margin: 0 0.7rem 0.6rem; padding: 0.85rem 0.7rem;
  border-radius: 12px; border: 0; text-align: center;
  background: #111; color: #fff;
  transition: background .7s var(--ease);
}
.duty--live { background: #0e2a24; }
.duty--done { background: #2b2b2b; }
.duty__eyebrow { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #9a9a9a; }
.duty--live .duty__eyebrow { color: #8fb3aa; }
.duty--live .duty__eyebrow .dot { background: var(--live-lit); }

/* Off duty the panel is a dial you press; that is the state's whole UI. */
.duty__dial {
  width: 6.6rem; height: 6.6rem; border-radius: 50%;
  margin: 0.55rem auto 0.15rem;
  background: #fff; color: #111;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.1rem;
  font-family: var(--display); font-weight: 700; font-size: 0.82rem;
}
.duty__dial small { font-size: 0.67rem; font-weight: 700; letter-spacing: 0.09em; color: #555; }
.duty__clock { display: block; margin-top: 0.3rem; font-family: var(--display); font-weight: 700; font-size: 1.75rem; line-height: 1.1; color: #fff; font-variant-numeric: tabular-nums; }
.duty__metrics { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 0.55rem; }
.duty__metrics div { border-left: 1px solid rgba(255,255,255,.14); }
.duty__metrics div:first-child { border-left: 0; }
.duty__metrics b { display: block; font-family: var(--display); font-weight: 700; font-size: 0.92rem; color: #fff; font-variant-numeric: tabular-nums; }
.duty__metrics small { font-size: 0.67rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: #8fb3aa; }
.duty__end { display: inline-block; margin-top: 0.65rem; padding: 0.42rem 1.5rem; border-radius: 8px; border: 1.5px solid #6b7d76; color: #dfe8e5; font-family: var(--display); font-weight: 700; font-size: 0.75rem; }
.duty__times { display: block; margin-top: 0.35rem; font-size: 0.7rem; font-weight: 600; color: #c9c9c9; font-variant-numeric: tabular-nums; }
.duty [hidden] { display: none; }

/* ── Open pipeline ─────────────────────────────────────────
   A distribution, not a conversion funnel: the bands are where deals
   are sitting now, so a bulge is work waiting rather than a drop-off.
   Fills are the app's PIPELINE_STAGE_FILL ramp, unchanged. */
.pfunnel { margin: 0 0.7rem 0.6rem; padding: 0.6rem 0.65rem; border-radius: 11px; background: var(--alt); border: 1px solid var(--line); }
.pfunnel__top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.pfunnel__label { font-size: 0.7rem; font-weight: 600; color: var(--muted); }
.pfunnel__cap { font-size: 0.68rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.pfunnel__total { display: block; font-family: var(--display); font-weight: 800; font-size: 1.15rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.pfunnel__bar { display: flex; gap: 2px; height: 1.15rem; border-radius: 5px; overflow: hidden; margin: 0.3rem 0 0.4rem; }
/* The 2px gaps are the card showing through: with 8.7 dE between steps
   they are what marks one band off from the next. */
.pfunnel__bar i { flex-basis: 0; min-width: 5px; transition: flex-grow .85s var(--ease); }
.pfunnel__legend { display: flex; flex-wrap: wrap; gap: 0.12rem 0.6rem; }
.pfunnel__legend span { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.68rem; color: var(--muted); text-transform: capitalize; }
.pfunnel__legend span[hidden] { display: none; }
.pfunnel__legend b { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.sw { width: 7px; height: 7px; border-radius: 2px; flex: none; }
.pfunnel__won { margin-top: 0.35rem; font-size: 0.68rem; font-weight: 600; color: var(--live); font-variant-numeric: tabular-nums; }
.pfunnel__won[hidden] { display: none; }

.phone__grid { padding: 0 0.7rem 0.65rem; gap: 0.35rem; }
.ptile__badge { background: #c53030; transition: transform .3s cubic-bezier(.2,1.5,.4,1); }
.ptile__badge[hidden] { display: none; }

/* ── Console feed ──────────────────────────────────────────
   The same seven entries, arriving as the phone files them. */
.daystage .console { width: 100%; }
.log { position: relative; }
.log__empty {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: 1rem; font-size: 0.8rem; color: var(--muted); text-align: center;
}
.log__empty[hidden] { display: none; }
@keyframes badgeIn { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.log__what { font-size: 0.83rem; }
.log__where { font-size: 0.76rem; }
.log__time { font-size: 0.74rem; }

/* ── Scrubber ──────────────────────────────────────────────
   Every beat is a button, so the day is reachable without a scroll
   wheel and without waiting for an autoplay to come round again. */
.scrub { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; width: 100%; }
.scrub__rail { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem; list-style: none; margin: 0; padding: 0; }
.scrub__step {
  font-family: var(--mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.05em;
  padding: 0.32rem 0.64rem; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,.05); border: 1px solid var(--night-line); color: var(--on-night-mut);
  transition: color .18s ease, background .18s ease, border-color .18s ease;
}
.scrub__step:hover { color: var(--on-night); border-color: var(--night-firm); }
.scrub__step.is-done { color: var(--plum-lit); border-color: rgba(212,105,156,.32); }
.scrub__step[aria-current="true"] { background: var(--plum); border-color: var(--plum-lit); color: #fff; box-shadow: 0 0 0 1px rgba(212,105,156,.25), 0 6px 18px -6px rgba(142,47,95,.9); }
.scrub__say { font-size: 0.85rem; color: var(--on-night-mut); text-align: center; min-height: 1.4em; max-width: 52ch; }
.scrub__say b { color: var(--on-night); font-weight: 600; }

.scrub__foot { display: flex; align-items: center; justify-content: center; gap: 1rem; width: 100%; }
.scrub__play {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.44rem 0.92rem; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,.05); border: 1px solid var(--night-line); color: var(--on-night);
}
.scrub__play:hover { border-color: var(--plum-lit); color: var(--plum-lit); }
.scrub__play[hidden] { display: none; }

/* Off-screen but reachable: the day as prose, for anyone who is not
   going to see the stage animate. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ═══════════════════════════════════════════════════════════
   THE FILM - one field day, played on a stage
   ═══════════════════════════════════════════════════════════
   A product reel with no video in it. Seven scenes of the real
   product, drawn in HTML, cut on a clock.

   Three rules this section keeps:
     · It never touches the scroll. The page scrolls past at its
       own speed; the film plays itself, and pauses when it is
       nobody's business.
     · With no JS it is a storyboard - all seven scenes stacked
       down the page, each at its finished state. Nothing is
       hidden behind a script that may not arrive.
     · Every colour is a page token. Nothing new was invented
       for the sake of a stage.

   Contrast, checked against what the text actually sits on:
     --on-night     on --plum        6.9:1
     --on-night     on --plum-deep   9.7:1
     --on-night-mut on --night       7.0:1
     --on-night-mut on --night-lift  6.5:1
     --plum-lit     on --night       5.6:1
     --live-lit     on --night-lift  9.6:1
   --on-night-mut on plum is 2.9:1, so the plum stage carries
   full-strength ink only. --plum is a fill here, never a text
   colour: on night it is 2.3:1.
   ───────────────────────────────────────────────────────── */

.film { position: relative; background: var(--night); color: var(--on-night); }
.film *, .film *::before, .film *::after { box-sizing: border-box; }
.film :focus-visible { outline: 2px solid var(--plum-lit); outline-offset: 3px; border-radius: 4px; }

.film__body { position: relative; padding: 2.25rem 0 1.75rem; overflow: hidden; width: 100%; }
/* The film is meant to be taken in at a glance, so the section claims exactly
   one screen and centres itself in it. Below 1100px the head goes back above
   the stage and the section is allowed to grow - a phone is going to scroll
   whatever we do, and shrinking the reel to avoid that would take its labels
   under the legibility floor. */
.film { min-height: 100svh; display: flex; align-items: center; }
@media (min-width: 1100px) and (max-height: 820px) {
  .film__body { padding: 1.5rem 0 1.25rem; }
  .film__lede { display: none; }
}
/* A short laptop gives back the last of the chrome. Padding only - the reel's
   own type is already at the 12px floor and is not what gets squeezed. */
@media (min-width: 1100px) and (max-height: 760px) {
  .film__body { padding: .5rem 0 .4rem; }
  /* The bottom padding only has to clear the runtime row, which is 32px. */
  .film__stage { padding: .6rem clamp(.85rem, 2.4vw, 1.5rem) 2.2rem; }
  .film__scene { padding: .75rem; }
  .film__wrap { row-gap: .55rem; }
  .film__transport { margin-top: 0; }
}
@media (min-width: 1100px) {
  .film__wrap {
    display: grid;
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    column-gap: 2.2rem; row-gap: 1rem;
    align-items: center;
  }
  .film__head { margin: 0; align-self: center; }
  .film__stage { grid-column: 2; }
  /* Full width, or it lands in the 20rem column and wraps to three rows. */
  .film__transport { grid-column: 1 / -1; margin-top: 0; justify-content: center; }
}
.film__wash, .film__mesh { position: absolute; inset: 0; pointer-events: none; }
.film__wash { background: radial-gradient(62% 50% at 50% 40%, rgba(142,47,95,.42), transparent 72%); }
.film__mesh {
  background-image:
    linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(74% 64% at 50% 46%, #000 22%, transparent 82%);
  -webkit-mask-image: radial-gradient(74% 64% at 50% 46%, #000 22%, transparent 82%);
}
.film__wrap { position: relative; width: min(1180px, 100% - 3rem); margin-inline: auto; }
@media (max-width: 640px) { .film__wrap { width: min(1180px, 100% - 2rem); } }

/* ── Head ─────────────────────────────────────────────────── */
.film__head { display: flex; flex-direction: column; gap: .7rem; max-width: 44rem; margin: 0 0 1.6rem; }
.film__eyebrow {
  display: inline-flex; align-items: center; gap: .5rem; margin: 0;
  font-family: var(--mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--plum-lit);
}
.film__eyebrow i { width: 6px; height: 6px; border-radius: 50%; background: var(--live-lit); flex: none; }
.film__h {
  margin: 0; font-family: var(--display); font-weight: 700;
  font-size: clamp(1.6rem, 3.1vw, 2.3rem); line-height: 1.14;
  letter-spacing: -.02em; color: var(--on-night); text-wrap: balance;
}
.film__lede { margin: 0; color: var(--on-night-mut); font-size: .98rem; line-height: 1.55; max-width: 46ch; }

/* ── The stage ─────────────────────────────────────────────
   Saturated plum, the one loud surface on a dark page. The
   footage sits on it at a slight angle, the way a screen sits
   on a desk you are walking past. */
.film__stage {
  position: relative; overflow: hidden;
  border-radius: 20px; border: 1px solid var(--night-firm);
  padding: clamp(.8rem, 1.8vw, 1.3rem) clamp(.85rem, 3vw, 2.1rem) 3.1rem;
  background: radial-gradient(128% 108% at 12% -8%, var(--plum) 0%, var(--plum-deep) 58%, var(--night-lift) 132%);
  box-shadow: 0 44px 96px -46px rgba(0,0,0,.95);
  perspective: 1500px;
}
/* The angle belongs to the reel. A storyboard is a thing you read, so it
   lies flat - and so does a narrow stage, where the skew costs more than
   it earns. */
.film--js .film__tilt { transform: rotateY(-8deg) rotateX(3.5deg); transform-origin: 50% 50%; }
@media (max-width: 760px) { .film--js .film__tilt { transform: none; } }

.film__frame {
  position: relative; width: 100%; max-width: 43rem; margin-inline: auto;
  border-radius: 14px; border: 1px solid var(--night-firm);
  background: var(--night); overflow: hidden;
  box-shadow: 0 34px 64px -34px rgba(0,0,0,.9);
}

/* A real recording, when there is one, replaces the drawn footage
   without touching anything else. See the note in the markup. */
.film__reel { display: block; width: 100%; height: auto; }
.film__frame:has(.film__reel) .film__scenes { display: none; }

/* ── Scenes ────────────────────────────────────────────────
   Authored as a storyboard: in the document, one under another,
   each already at its last beat. .film--js - added only when a
   script runs and the reader has not asked for stillness - folds
   them into a single stacked cell and cuts between them. */
.film__scenes { display: grid; gap: 1px; background: var(--night-firm); }
.film__scene {
  background: var(--night); min-width: 0;
  padding: clamp(.85rem, 2.4vw, 1.35rem);
  display: grid; align-content: center;
}
.film--js .film__scenes { gap: 0; background: none; }
.film--js .film__scene {
  grid-area: 1 / 1; opacity: 0; visibility: hidden;
  transition: opacity .45s ease, visibility 0s linear .45s;
}
.film--js .film__scene.film-on { opacity: 1; visibility: visible; transition: opacity .45s ease, visibility 0s; }

.film__pair { display: grid; grid-template-columns: 12.5rem minmax(0, 19.5rem); gap: clamp(1rem, 3vw, 1.9rem); align-items: center; justify-content: center; }
@media (max-width: 620px) { .film__pair { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 1rem; } }

/* ── Note card: the reel's own caption ─────────────────────── */
.film__note { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.film__note-n { font-family: var(--mono); font-size: .68rem; letter-spacing: .16em; color: var(--plum-lit); margin: 0; }
.film__note-h { margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(1rem, 2.1vw, 1.3rem); line-height: 1.2; letter-spacing: -.01em; color: var(--on-night); }
.film__note-p { margin: 0; font-size: .82rem; line-height: 1.55; color: var(--on-night-mut); max-width: 34ch; }
@media (max-width: 620px) { .film__note { text-align: center; align-items: center; } .film__note-p { font-size: .78rem; } }

/* ── Phone ─────────────────────────────────────────────────── */
.film__phone {
  width: 12.5rem; aspect-ratio: 9 / 17.8; overflow: hidden;
  border-radius: 20px; border: 1px solid var(--night-firm);
  background: var(--night-lift);
  display: flex; flex-direction: column;
  box-shadow: 0 18px 40px -22px rgba(0,0,0,.9);
}
.film__ph-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: .4rem .65rem .25rem; font-family: var(--mono);
  font-size: .68rem; color: var(--on-night-mut);
}
.film__sig { display: inline-flex; align-items: flex-end; gap: 2px; }
.film__sig i { display: block; width: 2px; background: var(--on-night-mut); }
.film__sig i:nth-child(1) { height: 4px; } .film__sig i:nth-child(2) { height: 6px; } .film__sig i:nth-child(3) { height: 8px; }
.film__sig b { display: block; width: 11px; height: 7px; margin-left: 3px; border: 1px solid var(--on-night-mut); border-radius: 2px; }
.film__ph-body { flex: 1; min-height: 0; padding: .3rem .55rem .55rem; display: flex; flex-direction: column; gap: .4rem; }
.film__ph-h { margin: 0; font-family: var(--display); font-weight: 700; font-size: .82rem; color: var(--on-night); }
.film__ph-sub { margin: 0; font-size: .68rem; color: var(--on-night-mut); }
.film__tabs { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--night-line); }
.film__tabs span { padding: .35rem 0 .4rem; text-align: center; font-size: .68rem; color: var(--on-night-mut); }
.film__tabs span.film-sel { color: var(--plum-lit); }

/* ── Shared interior parts ─────────────────────────────────── */
.film__card { background: var(--night); border: 1px solid var(--night-line); border-radius: 9px; padding: .45rem .55rem; }
.film__k { display: block; font-size: .68rem; color: var(--on-night-mut); }
.film__v { display: block; font-size: .78rem; font-weight: 600; color: var(--on-night); font-variant-numeric: tabular-nums; }
.film__big { font-family: var(--display); font-weight: 800; font-size: 1.15rem; line-height: 1.15; color: var(--on-night); font-variant-numeric: tabular-nums; }
.film__chip {
  display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase;
  padding: .12rem .42rem; border-radius: 999px;
  border: 1px solid var(--night-firm); color: var(--on-night-mut);
}
.film__chip--ok { color: var(--live-lit); border-color: rgba(92,214,160,.42); background: rgba(92,214,160,.12); }
.film__chip--plum { color: var(--plum-lit); border-color: rgba(212,105,156,.45); background: rgba(212,105,156,.14); }
.film__dot { display: inline-block; vertical-align: baseline; width: 6px; height: 6px; border-radius: 50%; background: var(--live-lit); flex: none; }
.film--js .film__dot { animation: film-pulse 2.2s ease-in-out infinite; }
@keyframes film-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* ── Console window ────────────────────────────────────────── */
.film__win { height: 100%; min-height: 15rem; display: flex; flex-direction: column; border-radius: 10px; border: 1px solid var(--night-firm); background: var(--night-lift); overflow: hidden; }
.film__winbar { display: flex; align-items: center; gap: .45rem; padding: .4rem .6rem; border-bottom: 1px solid var(--night-line); }
.film__wdot { width: 7px; height: 7px; border-radius: 50%; background: var(--night-firm); flex: none; }
.film__wurl { margin-left: .35rem; font-family: var(--mono); font-size: .68rem; color: var(--on-night-mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.film__winbody { flex: 1; min-height: 0; padding: .65rem; display: flex; flex-direction: column; gap: .55rem; }
.film__winhead { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.film__winhead h3 { margin: 0; font-family: var(--display); font-weight: 700; font-size: .92rem; color: var(--on-night); }

/* ── S1 geofence ───────────────────────────────────────────── */
.film__geo { position: relative; height: 6.6rem; border-radius: 9px; border: 1px solid var(--night-line); background: var(--night); overflow: hidden; display: grid; place-items: center; }
.film__geo::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 22px 22px;
}
.film__ring { position: absolute; width: 4.6rem; height: 4.6rem; border-radius: 50%; border: 1px dashed rgba(212,105,156,.55); }
.film__ring--in { width: 2.6rem; height: 2.6rem; border-style: solid; border-color: rgba(212,105,156,.3); background: rgba(142,47,95,.28); }
.film--js .film__ring--in { animation: film-ping 2.6s ease-out infinite; }
@keyframes film-ping { 0% { transform: scale(.75); opacity: .95; } 70% { transform: scale(1.35); opacity: .1; } 100% { transform: scale(1.35); opacity: 0; } }
.film__pin { position: relative; width: 11px; height: 11px; border-radius: 50%; background: var(--plum-lit); border: 2px solid var(--night); }
.film__geo-tag { position: absolute; left: .4rem; bottom: .4rem; font-family: var(--mono); font-size: .68rem; color: var(--on-night); background: rgba(22,17,26,.86); border: 1px solid var(--night-firm); border-radius: 5px; padding: .1rem .35rem; }
.film__dial {
  width: 5.4rem; height: 5.4rem; border-radius: 50%; margin: .2rem auto 0;
  display: grid; place-items: center; text-align: center;
  background: var(--plum); color: var(--on-night);
  font-family: var(--display); font-weight: 700; font-size: .7rem; line-height: 1.25;
  box-shadow: 0 0 0 6px rgba(142,47,95,.22);
}
.film__duty { text-align: center; border-radius: 9px; border: 1px solid rgba(92,214,160,.35); background: rgba(92,214,160,.1); padding: .45rem; }
.film__clock { display: block; font-family: var(--display); font-weight: 800; font-size: 1.3rem; line-height: 1.2; color: var(--on-night); font-variant-numeric: tabular-nums; }
.film__mrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem; margin-top: .35rem; }
.film__mrow b { display: block; font-family: var(--display); font-weight: 700; font-size: .8rem; color: var(--on-night); }
.film__mrow small { display: block; font-size: .68rem; color: var(--on-night-mut); }

/* ── S2 visit ──────────────────────────────────────────────── */
.film__shot { position: relative; height: 3.5rem; border-radius: 8px; overflow: hidden; background: linear-gradient(160deg, var(--plum-deep), var(--night)); border: 1px solid var(--night-line); }
.film__shot::before { content: ""; position: absolute; left: 18%; right: 18%; bottom: 0; height: 55%; background: rgba(255,255,255,.14); border-radius: 3px 3px 0 0; }
.film__shot::after { content: ""; position: absolute; left: 30%; right: 30%; bottom: 0; height: 28%; background: rgba(22,17,26,.7); }
.film__shot span { position: absolute; left: .3rem; bottom: .3rem; z-index: 2; font-family: var(--mono); font-size: .68rem; color: var(--on-night); background: rgba(22,17,26,.86); border-radius: 4px; padding: .05rem .3rem; }
.film__cta { display: block; text-align: center; border-radius: 8px; padding: .4rem; font-family: var(--display); font-weight: 700; font-size: .75rem; color: var(--on-night); background: var(--night); border: 1px solid var(--night-firm); }
.film__toast { display: flex; align-items: center; gap: .4rem; border-radius: 8px; padding: .35rem .45rem; background: rgba(92,214,160,.12); border: 1px solid rgba(92,214,160,.35); font-size: .7rem; color: var(--on-night); }

/* ── S3 pipeline ───────────────────────────────────────────── */
.film__pb { display: flex; gap: 2px; height: 1.1rem; border-radius: 5px; overflow: hidden; }
.film__pb i { flex-basis: 0; min-width: 5px; transition: flex-grow .8s cubic-bezier(.2,.7,.3,1); }
.film__pb i:nth-child(1) { background: color-mix(in srgb, var(--plum-deep) 55%, var(--night)); flex-grow: 12; }
.film__pb i:nth-child(2) { background: var(--plum-deep); flex-grow: 1; }
.film__pb i:nth-child(3) { background: var(--plum); flex-grow: 36; }
.film__pb i:nth-child(4) { background: var(--plum-lit); flex-grow: 25; }
.film__scene.film-b2 .film__pb i:nth-child(2) { flex-grow: 42; }
.film__legend { display: flex; flex-wrap: wrap; gap: .1rem .55rem; }
.film__legend span { display: inline-flex; align-items: center; gap: .3rem; font-size: .68rem; color: var(--on-night-mut); }
.film__sw { width: 7px; height: 7px; border-radius: 2px; flex: none; }
.film__opp { display: flex; align-items: center; justify-content: space-between; gap: .4rem; }
.film--js .film__opp { opacity: 0; transform: translateY(7px); transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1); }
.film--js .film__scene.film-b1 .film__opp { opacity: 1; transform: none; }

/* ── S4 map ────────────────────────────────────────────────── */
.film__deck { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: .55rem; flex: 1; min-height: 0; }
@media (max-width: 560px) {
  .film__deck { grid-template-columns: minmax(0, 1fr); }
  /* stacked, the whole crew would make this the tallest scene in the reel and
     leave every other one floating in its own slack */
  .film__crew div:nth-child(n+4) { display: none; }
}
.film__map { position: relative; min-height: 10.5rem; border-radius: 8px; border: 1px solid var(--night-line); background: var(--night); overflow: hidden; }
.film__map::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 26px 26px;
}
.film__road { position: absolute; background: rgba(255,255,255,.07); }
.film__road--a { left: -10%; right: -10%; top: 42%; height: 8px; transform: rotate(-7deg); }
.film__road--b { top: -10%; bottom: -10%; left: 34%; width: 7px; transform: rotate(6deg); }
.film__mp { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--plum-lit); border: 2px solid var(--night); }
.film__mp--1 { left: 18%; top: 30%; } .film__mp--2 { left: 63%; top: 22%; } .film__mp--3 { left: 74%; top: 62%; }
.film__mp--4 { left: 30%; top: 70%; } .film__mp--5 { left: 47%; top: 47%; }
.film__mp--live { background: var(--live-lit); }
.film--js .film__scene.film-b1 .film__mp--live { box-shadow: 0 0 0 0 rgba(92,214,160,.6); animation: film-halo 2s ease-out infinite; }
@keyframes film-halo { 0% { box-shadow: 0 0 0 0 rgba(92,214,160,.55); } 100% { box-shadow: 0 0 0 16px rgba(92,214,160,0); } }
.film__callout { position: absolute; left: .4rem; bottom: .4rem; right: .4rem; border-radius: 7px; padding: .3rem .4rem; background: rgba(31,24,37,.94); border: 1px solid var(--night-firm); }
.film--js .film__callout { opacity: 0; transform: translateY(6px); transition: opacity .45s ease, transform .45s ease; }
.film--js .film__scene.film-b2 .film__callout { opacity: 1; transform: none; }
.film__crew { display: flex; flex-direction: column; gap: .3rem; }
.film__crew div { display: flex; align-items: center; justify-content: space-between; gap: .4rem; border-radius: 7px; border: 1px solid var(--night-line); background: var(--night); padding: .28rem .4rem; }
.film__crew div.film-hot { border-color: rgba(92,214,160,.42); background: rgba(92,214,160,.1); }
.film--js .film__crew div.film-hot { border-color: var(--night-line); background: var(--night); transition: border-color .4s ease, background .4s ease; }
.film--js .film__scene.film-b2 .film__crew div.film-hot { border-color: rgba(92,214,160,.42); background: rgba(92,214,160,.1); }

/* ── S5 approvals ──────────────────────────────────────────── */
.film__q { display: flex; flex-direction: column; gap: .35rem; }
.film__qrow { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; border-radius: 8px; border: 1px solid var(--night-line); background: var(--night); padding: .38rem .5rem; }
.film--js .film__qrow { transition: border-color .4s ease, background .4s ease; }
.film--js .film__scene.film-b1 .film__qrow--a,
.film--js .film__scene.film-b2 .film__qrow--b { border-color: rgba(212,105,156,.5); background: rgba(212,105,156,.09); }
.film--js .film__scene.film-b2 .film__qrow--a, .film__scene.film-b2 .film__qrow--a,
.film--js .film__scene.film-b3 .film__qrow--b, .film__scene.film-b3 .film__qrow--b { border-color: rgba(92,214,160,.42); background: rgba(92,214,160,.1); }
.film__q { flex: 1; justify-content: center; }
.film__qmain { min-width: 0; }
.film__qside { display: flex; align-items: center; gap: .45rem; }

/* ── Wide scenes: the console fills the frame, its caption sits under it ── */
.film__scene--wide { align-content: stretch; grid-template-rows: minmax(0, 1fr) auto; gap: .75rem; }
.film__note--strip { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: .25rem .7rem; }
.film__note--strip .film__note-p { max-width: 52ch; }
@media (max-width: 620px) { .film__note--strip { flex-direction: column; } }

.film__mono { font-family: var(--mono); }
.film__row2 { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.film__legend b { font-weight: 700; color: var(--on-night); font-variant-numeric: tabular-nums; }
.film__sw--1 { background: color-mix(in srgb, var(--plum-deep) 55%, var(--night)); }
.film__sw--2 { background: var(--plum-deep); }
.film__sw--3 { background: var(--plum); }
.film__sw--4 { background: var(--plum-lit); }

/* ── S6 month end ──────────────────────────────────────────── */
.film__exp { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: .55rem; }
.film__tiles .film__card { display: flex; flex-direction: column; justify-content: center; gap: .1rem; }
.film__cta--sm { display: inline-block; padding: .32rem .75rem; white-space: nowrap; }
.film__scene.film-b1 .film__cta--sm { background: var(--plum); border-color: var(--plum-lit); }
.film__file { align-self: flex-start; }
.film__tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; }
@media (max-width: 560px) { .film__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.film__bar { height: 5px; border-radius: 3px; background: var(--night); border: 1px solid var(--night-line); overflow: hidden; }
.film__bar b { display: block; height: 100%; width: 100%; background: var(--live-lit); }
.film--js .film__bar b { width: 0; transition: width 1.1s cubic-bezier(.3,.7,.3,1); }
.film--js .film__scene.film-b2 .film__bar b { width: 100%; }
.film__file { display: inline-flex; align-items: center; gap: .4rem; border-radius: 7px; border: 1px solid var(--night-firm); background: var(--night); padding: .3rem .45rem; font-family: var(--mono); font-size: .68rem; color: var(--on-night); }

/* ── S7 the point ──────────────────────────────────────────── */
.film__point { display: grid; place-items: center; text-align: center; gap: .7rem; padding: clamp(1.2rem, 5vw, 2.6rem) .5rem; }
.film__point h3 { margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(1.35rem, 4.4vw, 2.2rem); line-height: 1.16; letter-spacing: -.02em; color: var(--on-night); text-wrap: balance; }
.film__point em { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.12em; color: var(--plum-lit); }
.film__point p { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--on-night-mut); max-width: 42ch; }
.film--js .film__point > * { opacity: 0; transform: translateY(9px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1); }
.film--js .film__point > *:nth-child(2) { transition-delay: .12s; }
.film--js .film__point > *:nth-child(3) { transition-delay: .26s; }
.film--js .film__point > *:nth-child(4) { transition-delay: .42s; }
.film--js .film__scene.film-b1 .film__point > * { opacity: 1; transform: none; }

/* ── Beats ─────────────────────────────────────────────────
   Every scene is authored at its last beat, so the storyboard
   reads finished. The script strips the beat classes when a
   scene starts and hands them back on the clock. */
.film__beat { display: none; }
/* --film-display is a layout switch, not a colour: it hands an element back
   the display it needs, since `revert` would only ever give it `block`. */
.film__scene.film-b1 .film__beat--1,
.film__scene.film-b2 .film__beat--2,
.film__scene.film-b3 .film__beat--3 { display: var(--film-display, revert); }
.film__scene.film-b1 .film__beat--to1, .film__scene.film-b2 .film__beat--to2, .film__scene.film-b3 .film__beat--to3 { display: none; }
.film__mrow { --film-display: grid; }
.film__toast { --film-display: flex; }
.film__chip, .film__file { --film-display: inline-flex; }

/* ── Chrome on the stage ───────────────────────────────────── */
.film__rail { position: relative; max-width: 43rem; height: 2px; margin: 1.15rem auto 0; border-radius: 2px; background: rgba(255,255,255,.24); overflow: hidden; }
.film__railfill { display: block; height: 100%; width: 100%; background: var(--on-night); }
.film__chrome {
  position: absolute; bottom: 1.05rem;
  left: clamp(.85rem, 3vw, 2.1rem); right: clamp(.85rem, 3vw, 2.1rem);
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
}
.film__runtime { margin: 0; min-width: 0; font-family: var(--mono); font-size: .68rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--on-night); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* On a narrow stage the clock is the only part of the label worth the room. */
@media (max-width: 560px) { .film__runtime-name { display: none; } }
.film__play {
  display: none; flex: none; width: 2.3rem; height: 2.3rem; border-radius: 50%;
  align-items: center; justify-content: center; cursor: pointer;
  color: var(--on-night); background: rgba(0,0,0,.34); border: 1px solid rgba(255,255,255,.4);
}
.film--js .film__play { display: inline-flex; }
.film__play:hover { background: rgba(0,0,0,.55); }
.film__play svg { width: 13px; height: 13px; fill: currentColor; }
.film__ico--pause { display: none; }
.film--playing .film__ico--play { display: none; }
.film--playing .film__ico--pause { display: block; }

/* ── Chapters ──────────────────────────────────────────────── */
.film__transport { display: none; flex-wrap: wrap; gap: .4rem; margin-top: 1.15rem; }
.film--js .film__transport { display: flex; }
.film__chapter {
  font-family: var(--mono); font-size: .68rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--on-night-mut); background: transparent; border: 1px solid var(--night-line);
  border-radius: 999px; padding: .38rem .72rem; cursor: pointer; line-height: 1.3;
  transition: color .25s ease, border-color .25s ease, background .25s ease;
}
.film__chapter:hover { color: var(--on-night); border-color: var(--night-firm); }
.film__chapter[aria-current="true"] { color: var(--on-night); border-color: var(--plum-lit); background: rgba(212,105,156,.16); }
.film__chapter b { font-weight: 500; color: var(--plum-lit); margin-right: .4rem; }
.film__chapter[aria-current="true"] b { color: var(--on-night); }

.film__sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ── Stillness ─────────────────────────────────────────────
   No autoplay, no transitions, no cuts. The script never adds
   .film--js, so the storyboard stands as the finished state and
   the transport controls stay out of the way. */
@media (prefers-reduced-motion: reduce) {
  .film *, .film *::before, .film *::after { animation: none !important; transition: none !important; }
}