/* A morning with Kres: hero figure prototype.
   SKIN: every color, font, radius, and shadow lives in :root below.
   The current values are a placeholder that follows the R3 logo direction
   (dark, glass, cool light, no red). Reskin here once the logo is picked. */

.mrn {
  /* SKIN: R7-A glow. The scene is art, so its light (stage, gate glow, ad creatives) may glow;
     the figure's own chrome (list, chips, steps, buttons) stays flat. Kres = violet, Sebastian = blue. */
  --font-sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-ui: -apple-system, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-hand: "Bradley Hand", "Segoe Print", "Chalkboard SE", "Comic Neue", cursive;

  /* page and stage */
  --page-bg: #03060B;
  --stage-bg: radial-gradient(70% 85% at 82% -6%, rgba(132,100,255,.22) 0%, rgba(37,99,255,.09) 42%, rgba(3,6,11,0) 72%), radial-gradient(60% 60% at 8% 110%, rgba(34,211,238,.06), rgba(3,6,11,0) 70%), #060A12;
  --stage-line: rgba(170, 190, 255, .12);
  --ink: #EEF2F8;
  --ink-2: #B4BDCD;
  --muted: #8A94A8;
  --line: rgba(170, 190, 255, .13);

  /* accent: Kres's violet (the hot core of the mark); Sebastian's decision is blue */
  --accent: #8B6CFF;
  --accent-hi: #C9BBFF;
  --accent-glow: rgba(139, 108, 255, .40);
  --seb: #2563FF;
  --seb-hi: #7AA2FF;

  /* windows: dark glass */
  --win-bg: #0A0F1A;
  --win-bg-2: #111829;
  --win-bar: #0D1322;
  --win-dot: #263049;
  --win-line: rgba(170, 190, 255, .10);
  --win-shadow: 0 30px 80px -24px rgba(0, 0, 0, .8), 0 0 0 1px rgba(170, 190, 255, .10);

  /* the gate: the one bright card in the story, lit from behind by the brand light */
  --gate-bg: #F5F7FC;
  --gate-ink: #0A1022;
  --gate-muted: #59627A;
  --gate-line: rgba(10, 16, 34, .10);
  --gate-glow: 0 0 0 1px rgba(255, 255, 255, .7), 0 0 90px -12px rgba(150, 128, 255, .75), 0 30px 80px -20px rgba(0, 0, 0, .8);
  --gate-ok: #1b9e6b;

  /* paper for the sketches (mid-value warm gray, so the gate stays the brightest card) */
  --paper: #b9b4a8;
  --paper-line: rgba(40, 45, 70, .1);
  --pencil: #3b3a40;
  --pencil-mark: #5a3ce0;

  /* status */
  --live: #3ccf8e;
  --off: #59627c;

  --client-av: #c9a27a;

  /* illustration content: competitor ads and the product */
  --ad-1: #c9b8f0; --ad-2: #f0d2b8; --ad-3: #a9d8d1; --ad-4: #e9e2c6; --ad-5: #b8c8f0; --ad-6: #e6c4cf;
  --ad-ink: #1a1b26;
  --mock-bg: radial-gradient(60% 45% at 50% 42%, rgba(255,226,170,.22), transparent 70%), radial-gradient(120% 60% at 50% 100%, #8a6fae 0%, transparent 60%), linear-gradient(170deg, #141a38 0%, #2e3368 60%, #5b4f8e 100%);
  --mock-ink: #fff;
  --bottle-v1: linear-gradient(90deg, #8a4f1e, #d08a3e 45%, #a9632a);
  --bottle-v2: linear-gradient(90deg, #2f5b3a, #6fae7a 45%, #3f7a4c);
  --bottle-cap: #191b22;

  /* shape */
  --stage-pad-top: 50px;
  --win-h: 432px;
  --r-stage: 16px;
  --r-win: 12px;
  --r-sm: 8px;
  --r-xs: 5px;
  --r-pill: 999px;

  /* timing */
  --t-win: .6s;
  --ease: cubic-bezier(.2, .8, .2, 1);
}


/* ---------- figure frame ---------- */
.mrn { margin: 0; display: grid; grid-template-columns: 290px minmax(0, 1fr); column-gap: 36px; row-gap: 18px; }
.mrn__head { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.mrn__fig { font-size: 14px; color: var(--ink-2); letter-spacing: .01em; }
.mrn__fig b { color: var(--ink); font-weight: 600; margin-right: 6px; }
.mrn__clockwrap { display: flex; align-items: center; gap: 14px; }
.mrn__clock { white-space: nowrap; font-family: var(--font-display); font-size: 26px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.mrn__pp { min-height: 28px; font: 500 12px/1 var(--font-sans); color: var(--ink-2); background: transparent; border: 1px solid var(--line); border-radius: var(--r-pill); padding: 7px 12px; cursor: pointer; }
.pp__ic { display: none; width: 10px; height: 11px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.mrn__pp.is-paused .pp__ic { width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; border-right: 0; }
.mrn__pp:hover { color: var(--ink); border-color: var(--accent); }
.mrn__pp:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; }

/* the story as text */
.mrn__side { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; align-self: start; }
.mrn__side li { cursor: pointer; }
.mrn__side li:hover { color: var(--ink); }
.mrn__side li:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: -2px; }
.mrn__side li { display: grid; grid-template-columns: 64px 1fr; column-gap: 10px; padding: 8px 10px; border-radius: var(--r-sm); color: var(--muted); transition: background .4s, color .4s; position: relative; }
.mrn__side time { grid-row: span 2; font: 500 12px/1.6 var(--font-mono); font-variant-numeric: tabular-nums; }
.mrn__side b { font-size: 14px; font-weight: 600; line-height: 1.35; }
.mrn__side li > span { grid-column: 2; font-size: 12.5px; line-height: 1.4; display: block; max-height: 0; overflow: hidden; opacity: 0; transition: max-height var(--t-win) var(--ease), opacity var(--t-win); }
.mrn__side li.is-past { color: var(--ink-2); }
.mrn__side li.is-now { color: var(--ink); background: linear-gradient(90deg, rgba(139,108,255,.16), rgba(139,108,255,0)); }
.mrn__side li.is-now::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.mrn__side li.is-now > span { max-height: 3em; opacity: 1; color: var(--ink); font-size: 14px; }
.mrn__side li.is-gate b::after { content: "Gate"; margin-left: 8px; font: 600 10px/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; padding: 3px 6px; border-radius: var(--r-pill); border: 1px solid currentColor; vertical-align: 2px; }
.mrn__side li.is-pay span { display: none !important; }

.mrn__main { min-width: 0; }
.mrn__premise { grid-column: 1 / -1; margin: -6px 0 0; font-size: 15px; color: var(--ink-2); }
.mrn__now { display: none; }
.mrn__swipe { display: none; }

/* ---------- stage ---------- */
.mrn__stage { position: relative; height: 560px; border-radius: var(--r-stage); background: var(--stage-bg); box-shadow: inset 0 0 0 1px var(--stage-line); overflow: hidden; }
.mrn__stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 30%); border-radius: inherit; }

.beat { position: absolute; inset: 0; display: grid; place-items: start center; padding: var(--stage-pad-top) 30px 20px; opacity: 0; visibility: hidden; transition: opacity var(--t-win) var(--ease), transform var(--t-win) var(--ease), filter var(--t-win); }
.beat.is-on { opacity: 1; visibility: visible; z-index: 3; }
.beat[data-depth] { visibility: visible; transform: none; }
.beat[data-depth] > .win { transform-origin: 50% 0; clip-path: inset(0 0 calc(100% - 34px) 0 round var(--r-win) var(--r-win) 0 0); transition: transform var(--t-win) var(--ease); }
.beat[data-depth] .win__bar { opacity: .55; }
.beat[data-depth="1"] { opacity: 1; z-index: 2; }
.beat[data-depth="1"] > .win { filter: saturate(.6); }
.beat[data-under] { visibility: visible; opacity: 1; z-index: 2; }
.beat[data-under] > .win { clip-path: none; transform: none; filter: brightness(.45) blur(2.5px); }
.beat[data-under] .win__bar { opacity: 1; }
.beat[data-win="gate"] { place-content: center; justify-items: center; padding-top: 16px; }
.beat[data-depth="2"] > .win { filter: brightness(.38) saturate(.5); }
.beat[data-depth="2"] { opacity: 1; z-index: 1; }
.beat[data-depth] .win.gate { box-shadow: var(--win-shadow); }
.beat__cap { display: none; }
.seb { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; white-space: nowrap; margin-right: 6px; color: var(--ink-2); padding: 4px 11px 4px 4px; border-radius: var(--r-pill); background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px var(--line); }
.seb .av.av--s { width: 24px; height: 24px; font-size: 12px; border-radius: 50%; background: #fff; color: var(--gate-ink); }
.seb [data-seb] { color: var(--ink); font-weight: 600; display: inline-block; }
.mrn.is-gate-now .seb { background: var(--accent); color: rgba(255,255,255,.8); box-shadow: 0 0 20px -4px var(--accent); }
.mrn.is-gate-now .seb [data-seb] { color: #fff; }
.beat.is-on > .win { animation: winIn var(--t-win) var(--ease) both; }
.beat.is-on.cont > .win { animation: none; }
.mrn.is-reset .beat { opacity: 0 !important; transition-duration: .5s; }

@keyframes winIn { from { opacity: 0; transform: translateY(26px); } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* staggered reveals inside the current beat */
.beat.is-on .a { animation: rise .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 110ms + 350ms); }
.beat.is-on .new { animation: rise .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 260ms + 300ms); }

/* ---------- window chrome ---------- */
.win { display: flex; flex-direction: column; min-height: var(--win-h); max-height: var(--win-h); width: min(680px, 100%); background: var(--win-bg); border-radius: var(--r-win); box-shadow: var(--win-shadow); overflow: hidden; color: var(--ink); }
.win__bar { flex: none; display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; background: var(--win-bar); border-bottom: 1px solid var(--win-line); font-size: 12px; }
.win__bar > i { width: 9px; height: 9px; border-radius: 50%; background: var(--win-dot); flex: none; }
.win__title { margin-left: 10px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.win__meta { margin-left: auto; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.win__body { padding: 16px; flex: 1; }

.pill { font-size: 11px; color: var(--ink-2); border: 1px solid var(--win-line); border-radius: var(--r-pill); padding: 4px 9px; white-space: nowrap; }
.note { margin: 14px 0 0; font-size: 13px; line-height: 1.45; color: var(--ink-2); padding: 10px 12px; border-radius: var(--r-sm); background: rgba(139,108,255,.1); box-shadow: inset 0 0 0 1px rgba(139,108,255,.25); }
.note b { color: var(--accent-hi); font-weight: 600; }
.note em { font-style: normal; color: var(--ink); font-weight: 600; }

/* ---------- 1. ad library ---------- */
.adlib__top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.adlib__search { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 11px; border-radius: var(--r-sm); background: var(--win-bg-2); font-size: 12.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; }
.adlib__search svg { width: 14px; height: 14px; fill: none; stroke: var(--muted); stroke-width: 1.6; flex: none; }
.adlib__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.adc { background: var(--win-bg-2); border-radius: var(--r-sm); padding: 8px; box-shadow: inset 0 0 0 1px var(--win-line); }
.adc.is-hit { box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 18px -6px var(--accent-glow); }
.adc__hd { display: flex; gap: 7px; align-items: center; margin-bottom: 7px; }
.adc__hd b { width: 20px; height: 20px; border-radius: 50%; background: var(--c); color: var(--ad-ink); font-size: 10px; display: grid; place-items: center; flex: none; }
.adc__hd span { font-size: 11.5px; font-weight: 600; line-height: 1.15; }
.adc__hd small { display: block; font-weight: 400; color: var(--muted); font-size: 10.5px; }
.adc__img { position: relative; overflow: hidden; height: 64px; border-radius: var(--r-xs); background: radial-gradient(80% 120% at 85% 20%, rgba(255,255,255,.55), rgba(255,255,255,0) 60%), linear-gradient(160deg, rgba(255,255,255,.2), rgba(0,0,0,.12)), var(--c); color: var(--ad-ink); display: flex; align-items: flex-end; padding: 7px; font-family: var(--font-display); font-weight: 700; font-size: 12.5px; line-height: 1.1; letter-spacing: -.01em; }
.adc__img > span { position: relative; z-index: 1; max-width: 68%; }
.adc__img::after { content: ""; position: absolute; right: 12%; bottom: -4px; width: 17px; height: 44px; border-radius: 4px 4px 3px 3px; background: linear-gradient(180deg, var(--ad-ink) 0 9px, transparent 9px), linear-gradient(90deg, rgba(0,0,0,.25), rgba(255,255,255,.5) 45%, rgba(0,0,0,.18)); box-shadow: 0 6px 12px -4px rgba(0,0,0,.35); }
.adc:nth-child(3n) .adc__img::after { width: 12px; height: 40px; border-radius: 6px 6px 2px 2px; }
.adc:nth-child(5) .adc__img::after { width: 30px; height: 20px; border-radius: 8px 8px 4px 4px; }
.adc:nth-child(2n) .adc__img::after { width: 26px; height: 26px; border-radius: 6px; background: linear-gradient(180deg, var(--ad-ink) 0 7px, transparent 7px), linear-gradient(90deg, rgba(0,0,0,.2), rgba(255,255,255,.55) 45%, rgba(0,0,0,.15)); }
.adc__img--split::after { display: none; }
.adc__img--split { padding: 0; overflow: hidden; }
.adc__img--split > span { max-width: none; }
.adc__img--split > span { flex: 1; height: 100%; display: flex; align-items: flex-end; padding: 7px; }
.adc__img--split > span + span { background: rgba(255,255,255,.45); }
.adc__tag { margin: 7px 0 0; font-size: 11px; color: var(--ink-2); }
.adc.is-hit .adc__tag { color: var(--accent-hi); font-weight: 600; }

/* ---------- 2. sketches ---------- */
.win--paper .win__body { background: var(--paper); background-image: linear-gradient(var(--paper-line) 1px, transparent 1px); background-size: 100% 22px; color: var(--pencil); }
.sketch { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding: 22px 22px 26px; position: relative; }
.sk { position: relative; text-align: center; }
.sk svg { width: 100%; height: auto; display: block; fill: none; stroke: var(--pencil); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sk p { margin: 8px 0 0; font: 400 17px/1.1 var(--font-hand); color: var(--pencil); }
.sk__ring { position: absolute; left: -12%; top: -8%; width: 124% !important; height: 122% !important; stroke: var(--pencil-mark) !important; stroke-width: 2.2 !important; }
.sketch__note { grid-column: 2; margin: 4px 0 0; font: 400 17px/1.1 var(--font-hand); color: var(--pencil-mark); text-align: center; }
.beat.is-on .sk path { stroke-dasharray: 1; animation: draw 1.1s ease-out both; animation-delay: calc(var(--i, 0) * 700ms + 300ms); }
.beat.is-on .sk__ring path { animation-delay: 2.5s; animation-duration: .7s; }

/* ---------- product mockup (sized in em; set font-size to scale) ---------- */
.mock { --bottle: var(--bottle-v1); position: relative; display: block; width: 20em; aspect-ratio: 4 / 5; border-radius: .9em; background: var(--mock-bg); color: var(--mock-ink); overflow: hidden; font-size: 12px; flex: none; box-shadow: 0 .8em 2.4em -0.8em rgba(0,0,0,.6); }
.mock--v2 { --bottle: var(--bottle-v2); }
.mock__brand { position: absolute; top: 1.2em; left: 1.4em; font-family: var(--font-display); font-weight: 700; font-size: 1.05em; letter-spacing: .14em; text-transform: uppercase; opacity: .9; }
.mock__moon { position: absolute; top: 2.6em; right: 2.4em; width: 3.2em; height: 3.2em; border-radius: 50%; box-shadow: inset -0.9em .2em 0 0 #f5ecc9; transform: rotate(-20deg); }
.bottle { position: absolute; left: 50%; top: 4.4em; width: 5.2em; transform: translateX(-50%); display: block; }
.bottle__cap { display: block; position: relative; width: 1.5em; height: 2.4em; margin: 0 auto; background: var(--bottle-cap); border-radius: .75em .75em .15em .15em; }
.bottle__cap::after { content: ""; position: absolute; left: -0.45em; right: -0.45em; bottom: 0; height: .8em; background: var(--bottle-cap); border-radius: .15em; }
.bottle__body { position: relative; overflow: hidden; display: grid; place-items: center; height: 7.2em; border-radius: 1.6em 1.6em .7em .7em; background: var(--bottle); box-shadow: inset .5em 0 .5em -0.1em rgba(255,255,255,.35), inset -0.4em 0 .6em rgba(0,0,0,.25), 0 1.2em 2em -0.8em rgba(0,0,0,.6); }
.bottle__body::before { content: ""; position: absolute; left: 18%; top: 10%; width: 14%; height: 70%; border-radius: 1em; background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,0)); }
.bottle__body::after { content: ""; position: absolute; left: 0; right: 0; top: 22%; height: 2px; background: rgba(255,255,255,.35); }
.bottle::after { content: ""; position: absolute; left: -20%; right: -20%; bottom: -0.6em; height: 1.2em; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.55), transparent); z-index: -1; }
.bottle__body b { font: 600 .8em/1.15 var(--font-display); text-align: center; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.92); background: rgba(255,255,255,.14); padding: .5em .6em; border-radius: .3em; }
.mock__h { position: absolute; left: 1.1em; right: 1.1em; bottom: 3.6em; font: 800 1.95em/.95 var(--font-display); letter-spacing: -.035em !important; letter-spacing: -.02em; }
.mock__cta { position: absolute; left: 1.4em; bottom: 1.3em; font-size: .95em; font-weight: 600; background: #fff; color: #111; padding: .45em .9em; border-radius: var(--r-pill); }
.mock--thumb { font-size: 4px; border-radius: .9em; }
.mock--thumb .mock__h { font-size: 2.2em; bottom: 1.6em; }
.mock--tiny { font-size: 1.7px; }
.mock--tiny .bottle { top: 5em; }

.mockup { display: flex; gap: 24px; align-items: center; justify-content: center; padding: 22px; }
.mockup .mock { font-size: 14.5px; }
.mockup { justify-content: flex-start; align-items: flex-start; padding: 18px 30px; gap: 30px; }
.mockup .spec { margin-top: 4px; flex: 1; max-width: none; }
.spec__from { display: flex; align-items: center; gap: 8px; }
.skthumb--sm { width: 36px !important; height: 45px !important; padding: 3px !important; flex: none; }
.brief { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 6; margin: 0; display: flex; align-items: center; gap: 9px; width: min(560px, calc(100% - 40px)); padding: 7px 12px 7px 7px; border-radius: var(--r-sm); background: var(--win-bg-2); box-shadow: var(--win-shadow); font-size: 12.5px; color: var(--ink-2); }
.beat:not(.is-on) .brief { opacity: 0; }
.brief { top: 8px !important; transition: opacity .3s; }
.brief .av { width: 24px; height: 24px; font-size: 11px; flex: none; }
.brief b { color: var(--ink); font-weight: 600; }
.spec { margin: 0; display: grid; gap: 12px; max-width: 250px; }
.spec div { border-top: 1px solid var(--win-line); padding-top: 9px; }
.spec dt { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.spec dd { margin: 3px 0 0; font-size: 13.5px; color: var(--ink); line-height: 1.35; }

/* ---------- 4 to 6. slack ---------- */
.slack { display: flex; flex-direction: column; gap: 14px; padding: 18px; }
.slack { overflow: hidden; position: relative; padding-bottom: 66px !important; }
.slack__feed { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; overflow: hidden; }
.slack__feed { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 46px); mask-image: linear-gradient(180deg, transparent 0, #000 46px); padding-top: 10px; }
.slack::after { position: absolute; left: 18px; right: 18px; bottom: 14px; content: "Message #ferngrove-ads"; padding: 10px 12px; border-radius: var(--r-sm); box-shadow: inset 0 0 0 1px var(--win-line); font-size: 13px; color: var(--muted); }
.msg { display: grid; grid-template-columns: 34px 1fr; gap: 10px; font-size: 14px; line-height: 1.45; }
.msg p { margin: 0; color: var(--ink-2); }
.msg .msg__who { color: var(--ink); font-weight: 700; font-size: 13.5px; margin-bottom: 2px; }
.msg__who time { font-weight: 400; color: var(--muted); font-size: 11.5px; margin-left: 6px; }
.msg--old { opacity: .6; }
.msg--old p:not(.msg__who) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg, .msg > div { min-width: 0; }
.mock__h u { text-decoration-color: var(--accent-hi); text-decoration-thickness: .12em; text-underline-offset: .12em; }
.av { width: 34px; height: 34px; border-radius: var(--r-sm); display: grid; place-items: center; font-size: 15px; font-weight: 700; color: #fff; }
.av--k { background: #070B14; box-shadow: 0 0 16px -4px var(--accent-glow); }
.av--c { background: var(--client-av); color: #2a1d10; }
.att { vertical-align: top; margin-top: 8px; display: inline-flex; align-items: flex-end; gap: 10px; padding: 7px; border-radius: var(--r-sm); background: var(--win-bg-2); box-shadow: inset 0 0 0 1px var(--win-line); }
.att .mock { font-size: 4.2px; }
.att--sk { margin-left: 6px; }
.beat[data-t="07:51"] .att .mock--old, .beat[data-t="07:51"] .att .mock--new { font-size: 4.6px !important; }
.beat[data-t="07:51"] .att--rev .att__n { display: none; }

.beat[data-t="07:51"] .thread { display: none; }
.beat[data-t="07:51"] .slack .msg.new[style*="--i"] { margin-left: 0; }
.beat[data-t="07:51"] .msg--old { display: none; }
.att--rev { gap: 8px; flex-wrap: wrap; max-width: max-content; }
.att--rev .att__n { flex-basis: 100%; padding: 0; text-align: right; }
.att .mock--old { font-size: 6.4px; opacity: .75; }
.att__arrow { align-self: center; font-size: 16px; color: var(--accent-hi); }
.att .mock--new { font-size: 6.4px; box-shadow: 0 0 0 1.5px var(--accent-hi), 0 8px 20px -6px rgba(0,0,0,.6); }
.vtag { position: absolute; top: .9em; right: 1em; font: 700 2.6em/1 var(--font-sans); color: #fff; background: rgba(0,0,0,.45); padding: .3em .45em; border-radius: .4em; }
.mock--old .vtag { font-size: 2.6em; }
.vtag--new { background: var(--accent); }
.mock--new .mock__moon { display: none; }
.mock--old .mock__moon { display: none; }
.skthumb { display: block; width: 48px; height: 60px; border-radius: 4px; background: var(--paper); padding: 4px; }
.skthumb svg { width: 100%; height: 100%; fill: none; stroke: var(--pencil); stroke-width: 4; stroke-linecap: round; }
.att__n { font-size: 12px; color: var(--ink-2); padding-bottom: 2px; }
.thread { margin: -4px 0 -6px 44px; font-size: 11.5px; font-weight: 600; color: var(--accent-hi); border-left: 2px solid var(--accent); padding-left: 8px; }
.slack .msg.new[style*="--i"] { margin-left: 44px; }

/* ---------- 7. the gate ---------- */
.win.gate { min-height: 0; max-height: none; display: block; width: min(460px, 100%); background: var(--gate-bg); color: var(--gate-ink); box-shadow: var(--gate-glow); padding: 20px 22px 20px; }
.gate__hd { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.gate__hd svg { width: 18px; height: 18px; fill: none; stroke: var(--gate-ink); stroke-width: 1.7; }
.gate__who { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--gate-ink) !important; letter-spacing: 0; text-transform: none; color: var(--gate-muted); font-size: 12.5px; }
.av--s { width: 22px; height: 22px; font-size: 11px; border-radius: 50%; background: var(--gate-ink); color: #fff; }
.gate__sub { margin: -6px 0 14px; font-size: 14.5px; line-height: 1.4; font-weight: 600; color: var(--gate-ink); }
.gate__ask { display: flex; align-items: center; gap: 9px; margin: 0 0 14px; padding: 9px 10px; border-radius: var(--r-sm); background: rgba(139,108,255,.08); box-shadow: inset 0 0 0 1px rgba(139,108,255,.2); font-size: 13px; line-height: 1.35; color: var(--gate-ink); }
.gate__ask .av { width: 24px; height: 24px; font-size: 11px; flex: none; }
.gate__ask b { font-weight: 700; }
.gate__act { margin-top: 12px !important; }
.gate__t { position: relative; height: 1.15em; }
.gt { position: absolute; left: 0; top: 0; white-space: nowrap; }
.gt--wait { opacity: 0; }
@keyframes gtOut { 0%, 82% { opacity: 1; } 90%, 100% { opacity: 0; } }
@keyframes gtIn { 0%, 84% { opacity: 0; transform: translateY(4px); } 94%, 100% { opacity: 1; transform: none; } }
.beat.is-on .gt--wait { animation: gtOut 4.8s ease both .2s; }
.beat.is-on .gt--done { animation: gtIn 4.8s ease both .2s; }
.gate__t { margin: 14px 0 12px; font: 700 22px/1.15 var(--font-display); letter-spacing: -.02em; }
.gate__row { display: flex; gap: 16px; align-items: center; }
.gate__row .mock { font-size: 5.4px; }
.gate dl { margin: 0; flex: 1; display: grid; gap: 7px; }
.gate dl div { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; border-bottom: 1px solid var(--gate-line); padding-bottom: 6px; }
.gate dt { color: var(--gate-muted); }
.gate dd { margin: 0; font-weight: 600; text-align: right; }
.gate__act { position: relative; margin-top: 16px; height: 42px; }
.gate__btn, .gate__done { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--r-sm); font-size: 14px; font-weight: 600; }
.gate__btn { background: var(--gate-ink); color: #fff; opacity: 0; }
.gate__tap { position: absolute; left: 68%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: rgba(255,255,255,.18); box-shadow: 0 0 0 2px rgba(255,255,255,.8), 0 0 0 8px rgba(255,255,255,.15); opacity: 0; pointer-events: none; }
.gate__done { background: var(--accent); color: #fff; box-shadow: 0 0 0 0 rgba(139,108,255,.5), 0 10px 30px -8px var(--accent); }
@keyframes donePulse { 0%, 84% { box-shadow: 0 0 0 0 rgba(139,108,255,.6), 0 10px 30px -8px var(--accent); } 100% { box-shadow: 0 0 0 14px rgba(139,108,255,0), 0 10px 30px -8px var(--accent); } }
.gate__lock { position: relative; width: 22px; height: 22px; }
.gate__hd .lk { width: 22px !important; height: 22px !important; }
.gate__lock .lk { position: absolute; inset: 0; }
.lk--shut { opacity: 0; }
@keyframes lkShut { 0%, 80% { opacity: 1; } 86%, 100% { opacity: 0; } }
@keyframes lkOpen { 0%, 80% { opacity: 0; } 86%, 100% { opacity: 1; } }
.beat.is-on .gate__lock--rule .lk--shut { animation: lkShut 4.8s ease both .2s; }
.beat.is-on .gate__lock--rule .lk--open { animation: lkOpen 4.8s ease both .2s; }
.lk--open { stroke: var(--accent) !important; stroke-width: 2.2 !important; }
@keyframes cardGlow { 0%, 84% { box-shadow: var(--gate-glow); } 92% { box-shadow: 0 0 0 2px var(--accent), 0 0 90px -6px rgba(139,108,255,.9), 0 30px 80px -20px rgba(0,0,0,.7); } 100% { box-shadow: var(--gate-glow); } }
.beat.is-on > .win.gate { animation: winIn var(--t-win) var(--ease) both, cardGlow 5.1s ease both .2s; }
.gate__done svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.gate__from { margin: 8px 0 0; text-align: center; font-size: 12px; color: var(--gate-muted); opacity: 0; }
@keyframes fromIn { 0%, 86% { opacity: 0; } 100% { opacity: 1; } }
.beat.is-on .gate__from { animation: fromIn 4.8s ease both .2s; }
.gw { position: relative; display: inline-grid; }
.gw > span { grid-area: 1 / 1; white-space: nowrap; text-align: left; }
.gw--a { opacity: 0; color: var(--gate-muted); }
.gw--b { color: var(--accent); font-weight: 700; }
.beat.is-on .gw--a { animation: gtOut 4.8s ease both .2s; }
.beat.is-on .gw--b { animation: gtIn 4.8s ease both .2s; }
.gate__rule { display: flex; align-items: center; gap: 7px; margin: 12px 0 0; font-size: 13px; font-weight: 600; color: var(--gate-ink); }
.gate__lock--rule { width: 18px !important; height: 18px !important; flex: none; }
.gate__rule .lk { width: 18px; height: 18px; fill: none; stroke: var(--gate-ink); stroke-width: 1.8; }
.gate__hdic { width: 18px; height: 18px; fill: none; stroke: var(--gate-ink); stroke-width: 1.7; }
.gate__hd { flex-wrap: wrap; row-gap: 2px; }
.gate__where { order: 9; flex-basis: 100%; padding-left: 26px; font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--gate-muted); }
.gate__fine { margin: 12px 0 0; font-size: 12px; color: var(--gate-muted); text-align: center; }
@keyframes btnPress { 0% { opacity: 1; box-shadow: 0 0 0 0 rgba(11,18,48,.4); } 25% { box-shadow: 0 0 0 8px rgba(11,18,48,0); } 26% { box-shadow: 0 0 0 0 rgba(11,18,48,.4); } 50% { box-shadow: 0 0 0 8px rgba(11,18,48,0); } 62% { opacity: 1; transform: scale(1); filter: none; } 66%, 72% { opacity: 1; transform: scale(.98); filter: brightness(.8); } 76% { opacity: 1; transform: scale(1); } 84%, 100% { opacity: 0; } }
@keyframes doneIn { 0%, 84% { opacity: 0; transform: scale(.96); } 100% { opacity: 1; transform: none; } }
@keyframes tap { 0%, 52% { opacity: 0; transform: translate(40px, 30px) scale(.6); } 62% { opacity: 1; transform: none; } 70% { opacity: .9; transform: scale(.75); } 82%, 100% { opacity: 0; transform: scale(1.8); } }
.beat.is-on .gate__btn { animation: btnPress 4.8s ease both .2s; }
.beat.is-on .gate__done { animation: doneIn 4.8s ease both .2s, donePulse 5.3s ease-out both .2s; }
.beat.is-on .gate__tap { animation: tap 4.8s ease both .2s; }

/* ---------- 8. ads manager ---------- */
.ads { display: flex; flex-direction: column; padding: 6px 16px 16px; font-size: 13px; }
.ads > .ads__tr:last-of-type { margin-bottom: 14px; }
.ads__tr { display: grid; grid-template-columns: 44px minmax(0, 1fr) 110px 88px; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--win-line); }
.ads__th { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; padding: 10px 0 8px; }
.ads__new { background: linear-gradient(90deg, rgba(139,108,255,.12), rgba(139,108,255,0)); margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
.ads__name { font-weight: 600; display: flex; flex-wrap: wrap; align-items: center; column-gap: 9px; min-width: 0; }
.ads__name small, .ads__bud small { flex-basis: 100%; display: block; font-weight: 400; font-size: 12px; color: var(--muted); }
.ads__name .mock { font-size: 1.7px; border-radius: 1.6em; }
.ads__new .ads__name { display: grid; grid-template-columns: auto 1fr; }
.ads__new .ads__name .mock { grid-row: span 2; }
.ads__new .ads__name small { grid-column: 2; }
.chip-ok { display: inline-flex; align-items: center; gap: 4px; font: 600 10.5px/1 var(--font-sans); font-style: normal; color: var(--ink); background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); padding: 3px 7px 3px 5px; border-radius: var(--r-pill); }
.chip-ok svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2; }
.ads__new .ads__name > .chip-ok { justify-self: start; }
.beat.is-on .chip-ok { animation: rise .4s var(--ease) both .1s; }
.ads__bud { text-align: right; font-variant-numeric: tabular-nums; }
.ads__offrow { color: var(--muted); }
.ads__del { position: relative; height: 20px; }
.st { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.st--rev { color: var(--ink-2); opacity: 0; }
.st--on { color: var(--live); }
.st--on::before { box-shadow: 0 0 8px var(--live); }
.st--off { color: var(--off); }
.tog { display: block; width: 32px; height: 18px; border-radius: var(--r-pill); background: var(--accent); position: relative; box-shadow: 0 0 12px -2px var(--accent-glow); }
.tog::after { content: ""; position: absolute; top: 2px; left: 16px; width: 14px; height: 14px; border-radius: 50%; background: #fff; }
.tog--off { background: var(--win-dot); box-shadow: none; }
.tog--off::after { left: 2px; background: #aab2c8; }
@keyframes togBg { 0%, 62% { background: var(--win-dot); box-shadow: none; } }
@keyframes togKnob { 0%, 62% { left: 2px; } }
@keyframes stOut { 0%, 70% { opacity: 1; } 80%, 100% { opacity: 0; } }
@keyframes stIn { 0%, 76% { opacity: 0; } 100% { opacity: 1; } }
.st--rev { color: #e0b25a !important; }
.beat.is-on .ads__new .tog { animation: togBg 2.6s ease both .2s; }
.beat.is-on .ads__new .tog::after { animation: togKnob 2.6s var(--ease) both .2s; }
.beat.is-on .ads__new .st--rev { animation: stOut 2.6s ease both .2s; }
.beat.is-on .ads__new .st--on { animation: stIn 2.6s ease both .2s; }

/* ---------- 9. mail ---------- */
.mail { display: grid; grid-template-columns: 210px 1fr; padding: 0; min-height: 360px; }
.mail__list { list-style: none; margin: 0; padding: 6px 0; border-right: 1px solid var(--win-line); background: var(--win-bar); }
.mail__list li { display: grid; grid-template-columns: 1fr auto; padding: 9px 12px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--win-line); row-gap: 2px; }
.mail__list b { font-weight: 600; color: var(--ink-2); }
.mail__list span { grid-column: 1 / -1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail__list time { grid-row: 1; grid-column: 2; font-size: 11px; }
.mail__new { background: rgba(139,108,255,.14); box-shadow: inset 2px 0 0 var(--accent); }
.mail__new, .mail__new b, .mail__new span { color: var(--ink) !important; font-weight: 600; }
.beat.is-on .mail__new { animation: rise .5s var(--ease) both .3s; }
.rep { padding: 18px 20px; min-width: 0; }
.rep__s { margin: 0; font: 700 17px/1.25 var(--font-display); letter-spacing: -.01em; }
.rep__f { margin: 4px 0 14px; font-size: 12px; color: var(--muted); }
.rep__k { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rep__k div { background: var(--win-bg-2); border-radius: var(--r-sm); padding: 10px; box-shadow: inset 0 0 0 1px var(--win-line); }
.rep__k small { display: block; font-size: 11.5px; color: var(--muted); line-height: 1.2; }
.rep__k b { display: block; font: 700 20px/1.2 var(--font-display); font-variant-numeric: tabular-nums; margin-top: 4px; }
.rep__k em { display: block; font-style: normal; font-size: 11.5px; color: var(--live); margin-top: 2px; line-height: 1.25; }
.trig { display: flex; flex-direction: column; gap: 14px; }
.pin { flex: none; margin: 0 0 4px; padding: 8px 12px; border-radius: var(--r-sm); background: rgba(201,162,122,.12); box-shadow: inset 2px 0 0 var(--client-av); font-size: 13px; color: var(--ink-2); }
.pin b { color: var(--ink); font-weight: 600; }
.sjoin { margin: -6px 0 0; text-align: center; font-size: 11.5px; color: var(--muted); }
.sjoin.show-sm { display: none; }
.sdiv { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.sdiv::before, .sdiv::after { content: ""; flex: 1; height: 1px; background: var(--win-line); }
.ads__tot { display: flex; justify-content: space-between; margin: 0 0 4px; padding: 10px 0; font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cap__seb { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--muted); }
.rep__rec { margin: 12px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--ink-2); }
.rep__rec b { color: var(--accent-hi); }
.chip-wait { margin-left: 6px; vertical-align: 1px; background: rgba(0,0,0,.35) !important; color: var(--ink-2) !important; }
.rep__lbl { margin: 14px 0 0; font-size: 11.5px; color: var(--muted); }
.rep__bars i { position: relative; }
.rep__bars i b { position: absolute; top: -16px; left: 0; right: 0; text-align: center; font: 600 11px/1 var(--font-sans); color: var(--ink); }
.rep__bars { margin-top: 18px !important; }
.rep__bars i.is-last { background: linear-gradient(180deg, #fff, var(--accent-hi)); opacity: 1; }
.rep__bars { display: flex; align-items: flex-end; gap: 6px; height: 48px; margin: 6px 0 0; padding-bottom: 1px; border-bottom: 1px solid var(--win-line); }
.rep__bars i { flex: 1; height: calc(var(--h) * 100%); border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--accent-hi), var(--accent)); opacity: .85; }
.rep__days { display: flex; gap: 6px; margin: 4px 0 0; }
.rep__days span { flex: 1; text-align: center; font: 500 10.5px/1 var(--font-mono); color: var(--muted); }
.rep__n { margin: 12px 0 0; font-size: 13px; color: var(--ink-2); line-height: 1.4; }
.rep__n b { color: var(--ink); }
.rep__n { display: flex; align-items: center; gap: 10px; margin: 0 0 14px !important; padding: 9px 11px; border-radius: var(--r-sm); background: rgba(139,108,255,.1); box-shadow: inset 0 0 0 1px rgba(139,108,255,.25); }
.rep__n > span:not(.mock) { flex: 1; min-width: 0; }
.chip-ok--dark { flex: none; }
.rep__k em { white-space: nowrap; }
.rep__th { display: block !important; flex: none; margin: 0; font-size: 1.8px !important; width: 20em; border-radius: 1.6em; }
.rep__th .bottle { top: 5em; }

/* ---------- 10. payoff ---------- */
.pay { text-align: center; width: 100%; max-width: 720px; }
.beat--pay { place-items: center; padding-top: 22px; grid-template-columns: minmax(0, 1fr); }
.pay { min-width: 0; }
.pay__rc { display: none; }
.mrn__side time { white-space: nowrap; }
.mrn.is-pay .mrn__side li:not(.is-pay) { color: var(--ink-2); }
.mrn.is-pay .mrn__side li:not(.is-pay)::after { content: "\2713"; position: absolute; left: -10px; top: 8px; font-size: 13px; font-weight: 700; color: var(--accent-hi); animation: rise .3s var(--ease) both; animation-delay: calc(var(--k) * 100ms); }
.mrn.is-still.is-pay .mrn__side li::after { animation: none; }
.mrn.is-pay .mrn__side li.is-gate b::after { background: #fff; color: var(--gate-ink); border-color: #fff; box-shadow: 0 0 10px rgba(255,255,255,.6); }
.pay__pile { display: grid; grid-template-columns: 200px auto 200px; grid-template-rows: repeat(3, auto); gap: 10px 22px; align-items: center; justify-content: center; margin: 0 auto 22px; }
.pile__c { position: relative; display: block; width: 200px; height: 92px; overflow: hidden; border-radius: 9px; box-shadow: 0 0 0 1px var(--line), 0 10px 24px -10px rgba(0,0,0,.7); }
.pile__c:nth-child(1) { grid-column: 1; grid-row: 1; }
.pile__c:nth-child(2) { grid-column: 1; grid-row: 2; }
.pile__c:nth-child(3) { grid-column: 1; grid-row: 3; }
.pile__c:nth-child(4) { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
.pile__c:nth-child(5) { grid-column: 3; grid-row: 2 / span 2; align-self: center; }
.pile__c.is-gate { grid-column: 2; grid-row: 1 / span 3; width: auto; height: auto; overflow: visible; border-radius: 0; box-shadow: none; }
.pile__c > .win { width: 680px; zoom: .3; animation: none !important; filter: none; border-radius: 0; box-shadow: none; }
.pile__c::after { content: attr(data-time); position: absolute; bottom: 6px; font: 600 10.5px/1 var(--font-mono); color: #fff; background: rgba(5,6,11,.8); padding: 4px 6px; border-radius: 4px; }
.pile__c.is-gate::after { display: none; }
.pile__c:nth-child(-n+3)::after { right: 6px; }
.pile__c:nth-child(n+4)::after { left: 6px; }
.pile__c:nth-child(4), .pile__c:nth-child(5) { height: 139px; }
.pile__c:nth-child(4) { grid-row: 1 / span 2 !important; align-self: start !important; }
.pile__c:nth-child(5) { grid-row: 2 / span 2 !important; align-self: end !important; }
.pile__c.is-gate > .win { width: 460px; zoom: .62; }
.beat.is-on .pile__c { animation: pileIn .5s var(--ease) both; animation-delay: calc(var(--k) * 90ms + 100ms); }
@keyframes pileIn { from { opacity: 0; transform: translateY(14px); } }
.pay__k { margin: 0; font: 600 13px/1 var(--font-mono); letter-spacing: .14em; color: var(--accent-hi); }
.pay__h { margin: 0; font: 700 clamp(34px, 4vw, 54px)/1 var(--font-display); letter-spacing: -.035em; color: #fff; position: relative; z-index: 30; }
.pay__ok { display: none; }
.nw { white-space: nowrap; }
.show-xs { display: none; }
.pay__s { margin: 14px auto 0; font-size: 16px; line-height: 1.5; color: var(--ink-2); max-width: 500px; }
.pay__ticks { list-style: none; margin: 26px 0 0; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; }
.pay__ticks li { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 64px; font: 600 12px/1.1 var(--font-sans); color: var(--ink); padding: 8px 8px 7px; border-radius: var(--r-sm); box-shadow: inset 0 0 0 1px var(--line); background: rgba(255,255,255,.03); }
.pay__ticks time { font: 500 10.5px/1 var(--font-mono); color: var(--ink-2); }
.pay__tag { margin: 14px 0 0; font: 600 24px/1.2 var(--font-display); letter-spacing: -.015em; color: #fff; }
.pay__ticks li::before { content: "\2713"; color: var(--accent-hi); font-size: 11px; }
.pay__ticks li.is-gate { color: var(--gate-ink); background: var(--gate-bg); box-shadow: 0 0 24px -4px rgba(170,150,255,.8); }
.pay__ticks li.is-gate time { color: var(--gate-muted); }
.pay__ticks li.is-gate::before { color: var(--accent); }

/* ---------- rail and caption ---------- */
.mrn__rail { display: flex; align-items: center; gap: 12px; margin-top: 14px; font: 500 11px/1 var(--font-mono); color: var(--muted); white-space: nowrap; }
.mrn__track { position: relative; flex: 1; height: 2px; background: var(--line); border-radius: 2px; }
.mrn__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent-hi)); box-shadow: 0 0 10px var(--accent); border-radius: 2px; transition: width .8s var(--ease); }
.mrn__track b { position: absolute; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--page-bg); box-shadow: inset 0 0 0 1.5px var(--muted); transition: box-shadow .4s, background .4s; }
@media (min-width: 960px) { .mrn__track b:not(.is-gate) { opacity: 0; } }
.mrn__track b.is-done { background: var(--accent-hi); box-shadow: 0 0 8px var(--accent); }
.mrn__track b.is-gate { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 2px; box-shadow: inset 0 0 0 1.5px #fff; }
.mrn__track b.is-gate::after { content: attr(data-label); position: absolute; top: 12px; left: 50%; transform: translateX(-50%); font: 600 9.5px/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.mrn__track b.is-gate.is-done { background: #fff; box-shadow: 0 0 10px #fff; }
.hide-xs, .hide-sm { display: inline; }
.show-sm { display: none; }
.mrn__rail { padding-bottom: 12px; }
.mrn__cap { grid-column: 1 / -1; margin: 4px 0 0; font-size: 13px; color: var(--muted); }

.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- still frames for thumbnails (?beat=N) ---------- */
.mrn.is-still .beat, .mrn.is-still .beat *, .mrn.is-still .beat *::after, .mrn.is-still .mrn__fill, .mrn.is-still .mrn__track b { animation: none !important; transition: none !important; }

/* ---------- large screens: let the artifacts fill the stage ---------- */
@media (min-width: 1200px) {
  .mrn__stage { height: 572px; }
  .beat > .win { zoom: 1.16; }
  .beat > .win.gate { zoom: 1.1; }
}

/* ---------- tablet and phone ---------- */
@media (max-width: 959px) {
    .mrn { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
  .mrn__side { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .mrn__now { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 10px; row-gap: 2px; margin: 0 0 10px; min-height: 42px; font-size: 15px; }
  .mrn__now span { grid-column: 2; font-size: 12.5px; color: var(--ink-2); line-height: 1.35; }
  .mrn__now time { font: 500 12px/1 var(--font-mono); color: var(--accent-hi); }
  .mrn__now b { font-weight: 600; }
  .mrn__head { padding-bottom: 10px; }
  .mrn__fig { font-size: 13px; white-space: nowrap; }
  .mrn__fig b { display: none; }
  .mrn__clockwrap { gap: 10px; }
  .adc__img > span { max-width: 60%; }
  .mrn__clock { font-size: 24px; }
  .mrn__stage { height: 506px; border-radius: 18px; }
  .mrn { --stage-pad-top: 50px; --win-h: 440px; }
  .mrn__pp { width: 30px; height: 30px; min-height: 30px; padding: 0; display: grid; place-items: center; }
  .pp__ic { display: block; }
  .pp__t { display: none; }
  .seb { font-size: 12.5px; }
  .mrn__premise { font-size: 13px; margin: -4px 0 2px; }
  .msg--trig { display: none; }
  .beat[data-t="07:02"] .msg--trig { display: flex; }
  .beat[data-t="07:02"] .att, .beat[data-t="07:02"] .att--sk { margin-top: 6px; }
  .beat[data-t="07:02"] .att .mock { font-size: 3.2px; }
  .beat[data-t="07:02"] .att__n { display: none; }
  .beat[data-t="07:02"] .skthumb { width: 52px; height: 64px; }
  .rep__k em { white-space: normal; }
  .msg--old p:not(.msg__who) { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .mrn__now span { min-height: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sjoin.show-sm { display: block; }
  .ads__xs { display: none; }
  .att--rev .att__n { display: none; }
  .att .mock--new, .att .mock--old { font-size: 4.5px; }
  .att__arrow { font-size: 13px; }
  .beat[data-t="07:48"] .att .mock { font-size: 3.2px; }
  .beat[data-t="07:48"] .att__n { display: none; }
  .beat[data-under] > .win { filter: brightness(.5) blur(1.5px) !important; }

  .beat[data-under] .slack::after { visibility: hidden; }
  .mrn__fig { display: none; }
  .mrn__clockwrap { width: 100%; }
  .seb { font-size: 13px; margin-right: auto; padding: 3px 10px 3px 3px; }

  .pay__pile { height: 210px; margin-bottom: 12px; }
  .pile__c > .win { zoom: .24; }
  .pile__c.is-gate > .win { zoom: .42; }
  .pile__c { display: none !important; }
  .pay__pile { display: none; }
  .beat--pay { place-items: start center; padding-top: 18px !important; }
  .pay__ok .mock { display: block !important; font-size: 3.2px !important; }
  .pay__ok { padding: 0 16px; }
  .pay__ok { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 0 18px; }
  .pay__ok .mock { font-size: 2.8px; }
  .pay__ok { gap: 0; padding-right: 0 !important; justify-content: center; }
  .pay__ok .mock { position: relative; z-index: 0; }
  .pay__okb { position: relative; z-index: 1; }
  .pay__okb { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 9px; margin-left: 10px; margin-top: 0; border-radius: 6px; background: #fff; color: var(--gate-ink); box-shadow: 0 6px 18px -6px rgba(0,0,0,.6); transform: rotate(-3deg); line-height: 1.2; text-align: left; font-size: 13.5px; white-space: nowrap; font-weight: 600; }
  .pay__okb small { display: block; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
  .pay__okb svg { width: 16px; height: 16px; fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; }
  .pay__s { margin-top: 10px; }
  .pay__ok { margin: 0 0 16px; }
  .pile__c.is-gate { top: 0 !important; }
  .pay__rc { display: flex; flex-direction: column; gap: 5px; list-style: none; margin: 0 0 16px; padding: 0 6px; text-align: left; }
  .pay__rc li { display: flex; align-items: center; gap: 10px; height: 44px; padding-left: 5px !important; padding: 0 10px; border-radius: 8px; background: var(--win-bar); box-shadow: inset 0 0 0 1px var(--win-line); font-size: 12px; }
  .pay__rc li::after { content: "\2713"; order: 9; color: var(--accent-hi); font-weight: 700; margin-left: 8px; }
  .pay__rc li::before { content: none; }
  .pay__rc .rc-gate span { color: var(--accent-hi); }
  .rc--lock { background: rgba(139,108,255,.2) !important; }
  .rc--lock svg { stroke: var(--accent-hi) !important; }
  .rc--lock { background: var(--gate-ink) !important; }
  .rc--lock { display: grid !important; place-items: center; }
  .rc--lock svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 1.8; }
  .pay__rc li { height: 38px !important; }
  .mrn.is-pay .mrn__stage { margin-top: 0; }
  .rc { width: 26px; height: 26px; border-radius: 5px; flex: none; background: var(--win-bg-2); box-shadow: inset 0 0 0 1px var(--win-line); position: relative; overflow: hidden; }
  .rc { width: 40px !important; height: 34px !important; background: var(--win-bg) !important; }
  .rc::after { display: none !important; }
  .rc__win { position: absolute; left: 0; top: 0; width: 680px !important; min-height: 432px; zoom: .16; transform-origin: 0 0; box-shadow: none !important; animation: none !important; }
  .rc--ads { background: linear-gradient(90deg, var(--ad-1) 0 48%, transparent 48% 52%, var(--ad-3) 52%); }
  .rc--sk { background: var(--paper); }
  .rc--sk::after { content: ""; position: absolute; inset: 6px 9px; border: 1.5px solid var(--pencil); border-radius: 3px 3px 2px 2px; }
  .rc--v2 { background: var(--mock-bg); }
  .rc--v2::after { content: ""; position: absolute; left: 10px; top: 6px; width: 6px; height: 14px; border-radius: 3px; background: var(--bottle-v2); }
  .rc--on::after { content: ""; position: absolute; left: 4px; top: 8px; width: 18px; height: 10px; border-radius: 6px; background: var(--accent); box-shadow: inset -9px 0 0 -1px var(--accent), inset -10px 0 0 -2px #fff; }
  .rc--rep { background: linear-gradient(0deg, var(--accent) 0 40%, transparent 40%) 4px 100%/4px 100% no-repeat, linear-gradient(0deg, var(--accent) 0 60%, transparent 60%) 11px 100%/4px 100% no-repeat, linear-gradient(0deg, var(--accent-hi) 0 85%, transparent 85%) 18px 100%/4px 100% no-repeat, var(--win-bg-2); }
  .pay__rc b { font-weight: 600; color: var(--ink); }
  .pay__rc span { margin-left: auto; color: var(--muted); font-size: 11.5px; }
  .pay__pile { height: 200px; }
  .ads__tot { font-size: 11.5px; }
  .pay__tag { font-size: 19px; }
  .beat { padding: var(--stage-pad-top) 10px 10px; }
  .win__body { padding: 12px; }
  .adlib__grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .adlib__grid .adc:nth-child(n+5) { display: none; }
  .adc__img { height: 56px; font-size: 12px; }
  .note { font-size: 12.5px; margin-top: 10px; padding: 9px 10px; }
  .sketch { grid-template-columns: 1fr 1fr; padding: 16px 16px 20px; gap: 14px 16px; }
  .sk:nth-child(3) { display: none; }
  .sk p { font-size: 15px; }
  .sketch__note { grid-column: 1 / -1; font-size: 16px; }
  .mockup { flex-direction: column; gap: 14px; padding: 16px; }
  .mockup .mock { font-size: 10.5px; }
  .mockup { align-items: center; padding: 16px; gap: 14px; }
  .brief { top: 8px; font-size: 11.5px; width: calc(100% - 20px); }
  .brief { align-items: flex-start; }
  .spec { grid-template-columns: 1fr 1fr; gap: 8px 14px; max-width: none; width: 100%; }
  .spec div:nth-child(n+3) { display: none; }
  .slack { padding: 14px; gap: 12px; }
  .slack__feed { gap: 12px; }
  .msg { font-size: 13.5px; grid-template-columns: 30px 1fr; gap: 9px; }
  .av { width: 30px; height: 30px; font-size: 13px; }
  .slack .msg.new[style*="--i"] { margin-left: 22px; }
  .thread { margin-left: 22px; }
  .win.gate { padding: 16px 16px 14px; }
  .gate__t { font-size: 19px; }
  .gate__from { display: none; }
  .gate__tap { left: 92%; width: 26px; height: 26px; margin: -13px 0 0 -13px; }
  .gate__ask { margin-bottom: 10px; }
  .gate__sub { margin-bottom: 10px; }
  .gw { position: relative; display: inline-grid; }
.gw > span { grid-area: 1 / 1; white-space: nowrap; text-align: left; }
.gw--a { opacity: 0; color: var(--gate-muted); }
.gw--b { color: var(--accent); font-weight: 700; }
.beat.is-on .gw--a { animation: gtOut 4.8s ease both .2s; }
.beat.is-on .gw--b { animation: gtIn 4.8s ease both .2s; }
.gate__rule { margin-top: 8px; }
  .gate__act { margin-top: 10px !important; }
  .gate__row .mock { font-size: 4.4px; }
  .gate dl div { font-size: 12.5px; }
  .ads { padding: 4px 12px 12px; font-size: 12.5px; }
  .ads__tr { grid-template-columns: 38px minmax(0, 1fr) 72px; gap: 8px; }
  .ads__bud { display: none; }
  .ads__new { margin: 0 -12px; padding-left: 12px; padding-right: 12px; }
  .ads__name .mock { display: none; }
  .ads__new .ads__name { display: flex; }
  .mail { grid-template-columns: 1fr; min-height: 0; }
  .mail__list { border-right: 0; padding: 0; }
  .mail__list li:nth-child(n+2) { display: none; }
  .rep { padding: 14px; }
  .rep__s { font-size: 15px; }
  .rep__bars { height: 40px !important; }
  .msg--older { display: none !important; }
  .beat[data-t="07:48"] .trig { display: none !important; }
  .rep__n { flex-wrap: wrap; row-gap: 6px; margin-bottom: 10px !important; }
  .rep__n > span:not(.mock) { flex-basis: 100%; }
  .rep__n .chip-ok { display: inline-flex; }
  .rep__lbl { display: none; }
  .rep__rec { font-size: 12px; margin-top: 8px; }
  .rep__bars { height: 44px !important; margin-top: 16px !important; }
  .mail__list { display: none; }
  .rep__k div { padding: 7px 8px; }
  .rep__n { padding: 7px 9px; font-size: 12.5px; }
  .rep__th { display: none !important; }
  .trig { display: flex; flex-direction: column; gap: 14px; }
.pin { flex: none; margin: 0 0 4px; padding: 8px 12px; border-radius: var(--r-sm); background: rgba(201,162,122,.12); box-shadow: inset 2px 0 0 var(--client-av); font-size: 13px; color: var(--ink-2); }
.pin b { color: var(--ink); font-weight: 600; }
.sjoin { margin: -6px 0 0; text-align: center; font-size: 11.5px; color: var(--muted); }
.sjoin.show-sm { display: none; }
.sdiv { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.sdiv::before, .sdiv::after { content: ""; flex: 1; height: 1px; background: var(--win-line); }
.ads__tot { display: flex; justify-content: space-between; margin: 0 0 4px; padding: 10px 0; font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cap__seb { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--muted); }
.rep__lbl { margin-top: 10px; }
  .rep__f { margin-bottom: 10px; }
  .rep__n { margin-top: 8px; }
  .rep__k { gap: 6px; }
  .rep__k div { padding: 8px; }
  .rep__k b { font-size: 16px; }
  .trig { display: flex; flex-direction: column; gap: 14px; }
.pin { flex: none; margin: 0 0 4px; padding: 8px 12px; border-radius: var(--r-sm); background: rgba(201,162,122,.12); box-shadow: inset 2px 0 0 var(--client-av); font-size: 13px; color: var(--ink-2); }
.pin b { color: var(--ink); font-weight: 600; }
.sjoin { margin: -6px 0 0; text-align: center; font-size: 11.5px; color: var(--muted); }
.sjoin.show-sm { display: none; }
.sdiv { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.sdiv::before, .sdiv::after { content: ""; flex: 1; height: 1px; background: var(--win-line); }
.ads__tot { display: flex; justify-content: space-between; margin: 0 0 4px; padding: 10px 0; font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cap__seb { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--muted); }
.rep__lbl { margin: 14px 0 0; font-size: 11.5px; color: var(--muted); }
.rep__bars i { position: relative; }
.rep__bars i b { position: absolute; top: -16px; left: 0; right: 0; text-align: center; font: 600 11px/1 var(--font-sans); color: var(--ink); }
.rep__bars { margin-top: 18px !important; }
.rep__bars i.is-last { background: linear-gradient(180deg, #fff, var(--accent-hi)); opacity: 1; }
.rep__bars { height: 48px; }
  .pay__h { font-size: 38px; }
  .pay__s { font-size: 14.5px; }
  .pay__ticks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .pay__ticks li { min-width: 0; font-size: 11.5px; padding: 7px 4px 6px; }
  .pay__tag { font-size: 14px; margin-top: 20px; }
  .hide-sm { display: none; }
  .show-sm { display: inline; }
}
@media (max-width: 380px) {
  .hide-xs, .win__meta--wide { display: none; }
  .show-xs { display: inline; }
  .pay__ok .mock { font-size: 2.8px !important; }
  .pay__okb { font-size: 12.5px; padding: 0 10px; }
  .mrn__clock { font-size: 21px; }
  .mrn__pp { padding: 6px 10px; }
  .msg { font-size: 13px; }
  .pay__h { font-size: 40px; }
}

/* ---------- reduced motion: six key frames and the payoff, nothing moves ---------- */
@media (prefers-reduced-motion: reduce) {
  .mrn { grid-template-columns: minmax(0, 1fr); }
  .mrn__side { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .mrn__now, .mrn__rail, .mrn__pp, .seb { display: none !important; }
  .mrn__fig { display: inline !important; }
  .mrn__stage { height: auto; overflow: visible; background: none; box-shadow: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; }
  .mrn__stage::after { display: none; }
  .beat { position: relative; inset: auto; min-width: 0; opacity: 1 !important; visibility: visible !important; transform: none !important; filter: none !important; padding: 0; }
  .beat:not([data-key]):not(.beat--pay) { display: none; }
  .beat[data-key] { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 10px; place-items: start; align-content: start; }
  .beat *, .beat *::after { animation: none !important; transition: none !important; }
  .beat > .win { transform: none !important; }
  .beat__cap { display: block; grid-row: 2; margin: 0 0 22px; font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.3; }
  .beat__cap time { display: block; font: 500 11.5px/1.5 var(--font-mono); color: var(--accent-hi); }
  .beat > .win { width: 680px; zoom: .86; }
  .beat > .win.gate { width: 680px; zoom: .86; }
  .beat > .win { min-height: 0; }
  .beat[data-key] > .win { align-self: stretch; justify-self: stretch; }
  .beat[data-key] .slack { flex: 1; }
  .beat[data-key] > .win { max-height: none !important; }
  .beat[data-t="07:51"] > .win { align-self: stretch; }
  .beat[data-t="07:51"] .msg--old { display: grid !important; opacity: .75; }
  .beat[data-t="07:51"] .pin { display: none; }
  .beat[data-t="08:15"] > .win.gate { width: 550px; zoom: 1; justify-self: center; }
  .win.gate { box-shadow: 0 0 0 1px rgba(255,255,255,.6), 0 0 24px -6px rgba(150,128,255,.6); }
  .pay__rc { display: none !important; }
  .brief { display: none; }
  .beat__cap small { display: block; font-size: 12.5px; font-weight: 400; color: var(--ink-2); margin-top: 2px; }
  .beat--pay { grid-column: 1 / -1; display: grid; place-items: center; padding: 30px 0 6px; border-top: 1px solid var(--line); }
  .pay__pile { display: none; }
  .beat--pay { place-items: start center; padding-top: 18px !important; }
  .pay__ok .mock { display: block !important; font-size: 3.2px !important; }
  .pay__ok { padding: 0 16px; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 1180px) and (min-width: 960px) {
  .beat > .win { zoom: .6; }
  .beat > .win.gate { zoom: .6; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 959px) {
  .mrn__clock { font-size: 20px; }
  .mrn__head { flex-wrap: wrap; row-gap: 4px; }
  .mrn__stage { display: grid; grid-template-columns: repeat(6, 78%); grid-template-rows: auto auto; gap: 0 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -14px; padding: 0 14px 6px; scroll-padding: 14px; }
  .beat[data-key] { grid-row: 1; align-self: start; scroll-snap-align: start; display: flex; flex-direction: column; gap: 8px; }
  .beat__cap { order: -1; margin: 0; }
  .beat[data-t="05:30"] { grid-column: 1; } .beat[data-t="06:05"] { grid-column: 2; } .beat[data-t="07:51"] { grid-column: 3; }
  .beat[data-t="08:15"] { grid-column: 4; } .beat[data-t="08:31"] { grid-column: 5; } .beat[data-t="08:52"] { grid-column: 6; }
  .beat > .win, .beat > .win.gate { width: 100%; zoom: 1; }
  .beat--pay { grid-row: 2; grid-column: 1; position: sticky; left: 0; width: calc(100vw - 28px); border-top: 0; padding: 26px 0 4px; display: grid; place-items: center; }
  .pay__h { font-size: 38px; }
  .beat--pay .pay__pile { display: flex; justify-content: center; height: auto; margin: 0 0 18px; }
  .beat--pay .pile__c:not(.is-gate) { display: none; }
  .beat--pay .pile__c.is-gate { position: static; transform: none; filter: none; }
  .beat--pay .pay__ok { display: flex !important; margin: 0 0 18px; }
  .beat.beat--pay { padding-top: 22px !important; }
  .beat--pay .pile__c.is-gate { width: 100%; }
  .beat--pay .pile__c.is-gate > .win { zoom: 1; width: 100%; }
  .beat[data-t="08:15"] { display: none !important; }
  .beat[data-t="08:31"] { grid-column: 4; } .beat[data-t="08:52"] { grid-column: 5; }
  .beat__cap { min-height: 5.6em; }
  .mrn__swipe { display: block; margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--accent-hi); }
  .mrn__fig { display: inline !important; }
  .mrn__fig b { display: inline !important; }
}
.pile__c > .win { text-align: left; }
.beat[data-t="07:51"] .slack__feed { justify-content: flex-start; -webkit-mask-image: none; mask-image: none; padding-top: 0; }
.beat[data-t="07:51"] .slack { gap: 10px; }
.beat[data-t="07:51"] .slack__feed { gap: 10px; }
.beat[data-t="07:51"] .slack { padding: 12px 18px 14px; gap: 8px; }
.beat[data-t="07:51"] .slack__feed { gap: 8px; }
.beat[data-t="07:51"] .att { margin-top: 5px; padding: 5px; }
.beat[data-t="07:51"] .pin { margin-bottom: 2px; padding: 6px 12px; }

@media (max-width: 959px) {
  .beat[data-t="07:51"] .att .mock--old, .beat[data-t="07:51"] .att .mock--new { font-size: 3.7px !important; }
  .beat[data-t="07:51"] .att--rev { flex-wrap: nowrap; }
}

@media (prefers-reduced-motion: reduce) and (max-width: 959px) {
  .adc__img { font-size: 11px; }
  .adc__img > span { max-width: 64%; }
  .adc__tag { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

@media (prefers-reduced-motion: reduce) and (max-width: 959px) {
  .mrn__stage { align-items: start; }
  .beat[data-key] > .win { height: 446px; min-height: 446px !important; max-height: 446px !important; overflow: hidden; }
  .beat[data-key] > .win.gate { height: auto; max-height: none !important; overflow: visible; }
  .beat[data-key] .win__meta { display: none; }
  .beat__cap { min-height: 6.4em; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 960px) {
  .beat[data-t="07:51"] .trig, .beat[data-t="07:51"] .sdiv { display: none; }
  .beat[data-t="07:51"] .slack__feed { justify-content: flex-start; }
  .beat[data-t="07:51"] .slack__feed::before { content: "Kres, 7:02 AM: three concepts, my pick attached."; display: block; font-size: 13px; color: var(--muted); padding: 0 0 10px 44px; border-bottom: 1px solid var(--win-line); margin-bottom: 4px; }
}

@media (max-width: 420px) {
  .gate__hd { flex-wrap: wrap; }
  .gate__who .av--s { display: none; }
  .gate__who { margin-left: auto; font-size: 12px; }
  .gate__where { padding-left: 26px; text-align: left; }
}
.slack__feed { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 36px) !important; mask-image: linear-gradient(180deg, transparent 0, #000 36px) !important; }
.beat[data-t="07:51"] .slack__feed { -webkit-mask-image: none !important; mask-image: none !important; }

.beat[data-t="07:51"] .slack::after { content: "Reply in thread"; }

.msg.new .msg__who + p { }
.beat[data-t="07:48"] .msg.new > div > p:not(.msg__who) { padding: 6px 10px; border-radius: var(--r-sm); background: rgba(201,162,122,.12); box-shadow: inset 2px 0 0 var(--client-av); color: var(--ink); }

@media (max-width: 959px) {
  .rep__bars { height: 34px !important; }
  .rep__rec { margin-top: 6px; }
  .adc__tag { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 380px) { .adc__tag { font-size: 10px; } }

/* =====================================================================
   brand-1107: R7-A glow skin, the loop chapter nav, and motion upgrades
   ===================================================================== */
.mrn { font-family: var(--font-sans); color: var(--ink); grid-template-columns: 300px minmax(0, 1fr); column-gap: 40px; row-gap: 16px; }
.mrn .win, .mrn .brief, .mrn .pay__rc { font-family: var(--font-ui); }
:where(.mrn) p { margin: 0; }
.mrn__head { border-bottom-color: var(--line); padding-bottom: 12px; align-items: center; }
.mrn__fig { font-size: 14px; color: var(--ink-2); }
.mrn__fig b { font-weight: 700; }
.mrn__clock { font-family: var(--font-display); font-weight: 650; letter-spacing: -.03em; font-size: 28px; }
.mrn__premise { font-size: 15px; color: var(--ink-2); margin: -4px 0 0; }
.mrn__side time, .mrn__now time { font-family: var(--font-mono); }
.mrn__side li { border-radius: 6px; }
.mrn__side li.is-now { background: rgba(139,108,255,.10); }
.mrn__side li.is-now::before { background: var(--accent); box-shadow: none; }
.mrn__side li.is-gate b::after { border-color: var(--seb-hi); color: var(--seb-hi); }
.mrn.is-pay .mrn__side li.is-gate b::after { background: var(--ink); color: var(--gate-ink); border-color: var(--ink); box-shadow: none; }
.mrn.is-pay .mrn__side li:not(.is-pay)::after { color: var(--accent-hi); }
.mrn__pp { border-color: var(--line); }
.mrn__pp:hover { border-color: var(--accent-hi); }
.cap__step { display: none; }

/* Sebastian's chip turns his color (blue) at the gate; flat, no glow */
.seb { background: rgba(255,255,255,.05); }
.mrn.is-gate-now .seb { background: var(--seb); color: rgba(255,255,255,.85); box-shadow: none; }

/* the loop, as the figure's chapter nav */
.mrn__steps { grid-column: 1 / -1; list-style: none; margin: 4px 0 6px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 20px; }
.mrn__steps button { position: relative; display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; align-items: baseline; column-gap: 10px; row-gap: 5px; width: 100%; text-align: left; padding: 14px 0 4px; color: var(--muted); font: inherit; background: none; border: 0; cursor: pointer; transition: color .35s; }
.mrn__steps button:hover { color: var(--ink-2); }
.mrn__steps button:focus-visible { outline: 2px solid #67E8F9; outline-offset: 4px; border-radius: 2px; }
.stp__bar { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--line); overflow: hidden; border-radius: 2px; }
.stp__bar > i { position: absolute; inset: 0; background: var(--ink-2); transform: scaleX(0); transform-origin: 0 50%; will-change: transform; }
.stp__n { grid-column: 1; grid-row: 1; font: 500 11.5px/1 var(--font-mono); letter-spacing: .04em; }
.mrn__steps b { grid-column: 2; grid-row: 1; font-weight: 750; font-size: 18px; letter-spacing: -.025em; line-height: 1.1; }
.stp__t { grid-column: 3; grid-row: 1; font: 500 11px/1 var(--font-mono); white-space: nowrap; justify-self: end; }
.stp__d { grid-column: 2 / -1; grid-row: 2; font-size: 13.5px; line-height: 1.38; max-width: 34ch; }
.mrn__steps li.is-now button { color: var(--ink); }
.mrn__steps li.is-now .stp__n { color: var(--accent-hi); }
.mrn__steps li.is-now .stp__bar > i, .mrn__steps li.is-past .stp__bar > i { background: var(--accent-hi); }
.mrn__steps li.is-past button { color: var(--ink-2); }
.mrn__steps li.stp--gate.is-now .stp__bar > i { background: var(--seb-hi); }
.mrn__steps li.stp--gate.is-now .stp__n { color: var(--seb-hi); }

/* Kres's avatar is the mark itself */
.mrn .av--k { font-size: 0; color: transparent; }

/* flat chrome inside the scene (glow stays in the light, not on the UI) */
.ads__new { background: rgba(139,108,255,.09); }
.rep__bars i { background: var(--seb-hi); opacity: .8; }
.rep__bars i.is-last { background: #fff; opacity: 1; }
.note { background: rgba(139,108,255,.10); box-shadow: inset 0 0 0 1px rgba(139,108,255,.26); }
.tog { background: var(--seb); box-shadow: none; }
.vtag--new { background: var(--accent); }

/* the stage: one light source, top right, like the mark's glow */
.mrn__stage { background: var(--stage-bg); }
.mrn__stage::after { background: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }

/* ---------- motion graphics ---------- */
/* windows slide in from the right and settle; the last one lifts away and peeks above */
@keyframes winIn { from { opacity: 0; transform: translate3d(56px, 14px, 0) scale(.965); } 55% { opacity: 1; } }
.beat.is-on > .win { animation: winIn .75s cubic-bezier(.16, .84, .24, 1) both; }
.beat[data-depth] > .win { transition: transform .75s cubic-bezier(.16, .84, .24, 1), filter .6s; }
/* research: the three "overnight" ads light up one by one after the grid lands */
@keyframes hitOn { from { box-shadow: inset 0 0 0 1px var(--win-line); } 60% { box-shadow: inset 0 0 0 2px var(--accent-hi), 0 0 26px -4px var(--accent-glow); } to { box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 18px -6px var(--accent-glow); } }
@keyframes tagOn { from { color: var(--ink-2); } }
/* Chromium drops paint on some cards when each card runs its own opacity/transform animation inside this grid
   (seen in playback, in the original prototype too), so the grid lands as one piece, then a scan light
   sweeps it left to right and each "overnight" ad lights up as the scan passes its column. */
.adlib__grid { position: relative; }
.beat.is-on .adlib__grid { animation: rise .6s var(--ease) both .32s; }
.beat.is-on .adlib__grid .adc { animation: none; }
.adlib__grid::after { content: ""; position: absolute; inset: -6px -4px; pointer-events: none; border-radius: var(--r-sm); background: linear-gradient(90deg, rgba(201,187,255,0), rgba(201,187,255,.16) 50%, rgba(201,187,255,0)) no-repeat; background-size: 24% 100%; background-position: -40% 0; opacity: 0; }
@keyframes scan { 0% { opacity: 0; background-position: -40% 0; } 12%, 86% { opacity: 1; } 100% { opacity: 0; background-position: 140% 0; } }
.beat.is-on .adlib__grid::after { animation: scan 1.3s cubic-bezier(.45, 0, .25, 1) both .95s; }
.beat.is-on .adlib__grid .adc.is-hit { animation: hitOn .7s ease both 1.25s; }
.beat.is-on .adlib__grid .adc.is-hit:nth-child(4) { animation-delay: 1.32s; }
.beat.is-on .adlib__grid .adc.is-hit:nth-child(3) { animation-delay: 1.85s; }
.beat.is-on .adlib__grid .adc.is-hit .adc__tag { animation: tagOn .7s ease both 1.25s; }
.beat.is-on .adlib__grid .adc.is-hit:nth-child(3) .adc__tag { animation-delay: 1.85s; }
.mrn.is-still .adlib__grid::after { display: none; }
/* report: the week's bars grow in order, Friday last and brightest */
@keyframes grow { from { transform: scaleY(0); } }
.rep__bars i { transform-origin: 50% 100%; }
.beat.is-on .rep__bars i { animation: grow .6s cubic-bezier(.2, .8, .2, 1) both; }
.beat.is-on .rep__bars i:nth-child(1) { animation-delay: 1.15s; } .beat.is-on .rep__bars i:nth-child(2) { animation-delay: 1.22s; }
.beat.is-on .rep__bars i:nth-child(3) { animation-delay: 1.29s; } .beat.is-on .rep__bars i:nth-child(4) { animation-delay: 1.36s; }
.beat.is-on .rep__bars i:nth-child(5) { animation-delay: 1.43s; } .beat.is-on .rep__bars i:nth-child(6) { animation-delay: 1.5s; }
.beat.is-on .rep__bars i:nth-child(7) { animation-delay: 1.62s; }
/* the gate drops in like a modal over the dimmed thread */
@keyframes gateIn { from { opacity: 0; transform: translate3d(0, -22px, 0) scale(.94); } 60% { opacity: 1; } }
.beat.is-on > .win.gate { animation: gateIn .7s cubic-bezier(.16, .84, .24, 1) both, cardGlow 5.1s ease both .2s; }
@keyframes cardGlow { 0%, 84% { box-shadow: var(--gate-glow); } 92% { box-shadow: 0 0 0 2px var(--seb-hi), 0 0 100px -4px rgba(120, 140, 255, .95), 0 30px 80px -20px rgba(0,0,0,.8); } 100% { box-shadow: var(--gate-glow); } }
/* his decision is blue */
.gate__done { background: var(--seb); box-shadow: 0 10px 30px -8px rgba(37, 99, 255, .7); }
@keyframes donePulse { 0%, 84% { box-shadow: 0 0 0 0 rgba(37,99,255,.6), 0 10px 30px -8px rgba(37,99,255,.7); } 100% { box-shadow: 0 0 0 14px rgba(37,99,255,0), 0 10px 30px -8px rgba(37,99,255,.7); } }
.gw--b { color: var(--seb); }
.gate__where { padding-left: 0; }
.gate__hd { letter-spacing: .12em; }
.gate__ask { background: rgba(139,108,255,.08); box-shadow: inset 0 0 0 1px rgba(139,108,255,.22); }
/* the lock: the shackle lifts and swings open on his tap */
.gate__lock--rule { width: 24px !important; height: 24px !important; }
.lk--live { width: 24px; height: 24px; overflow: visible; fill: none; stroke: var(--gate-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lk--live .lk__sh { transform-box: fill-box; transform-origin: 100% 100%; }
.lk--live .lk__kh { fill: var(--gate-ink); stroke: none; }
@keyframes shOpen { 0%, 79% { transform: none; } 84% { transform: translateY(-3.4px); } 92%, 100% { transform: translateY(-3.4px) rotate(-38deg); } }
@keyframes lkTint { 0%, 80% { stroke: var(--gate-ink); } 88%, 100% { stroke: var(--seb); } }
@keyframes khTint { 0%, 80% { fill: var(--gate-ink); } 88%, 100% { fill: var(--seb); } }
.beat.is-on .lk--live .lk__sh { animation: shOpen 4.8s cubic-bezier(.3, .7, .2, 1.2) both .2s, lkTint 4.8s ease both .2s; }
.beat.is-on .lk--live .lk__bd { animation: lkTint 4.8s ease both .2s; }
.beat.is-on .lk--live .lk__kh { animation: khTint 4.8s ease both .2s; }
.mrn.is-still .lk--live .lk__sh, .pile__c .lk--live .lk__sh, .mrn .rc__win .lk--live .lk__sh { transform: translateY(-3.4px) rotate(-38deg); stroke: var(--seb); }
.mrn.is-still .lk--live .lk__bd, .pile__c .lk--live .lk__bd { stroke: var(--seb); }
.mrn.is-still .lk--live .lk__kh, .pile__c .lk--live .lk__kh { fill: var(--seb); }
/* the fingertip */
.gate__tap { background: rgba(37,99,255,.18); box-shadow: 0 0 0 2px rgba(255,255,255,.9), 0 0 0 9px rgba(37,99,255,.18); }
/* payoff: the receipts fly in to frame the gate card */
@keyframes pileIn { from { opacity: 0; transform: translate3d(0, 18px, 0) scale(.92); } }

/* AD-15 #1: the v2 filename sits under the v2 thumbnail */
.beat[data-t="07:51"] .att--rev { display: inline-grid; grid-template-columns: auto auto auto; column-gap: 8px; row-gap: 4px; align-items: center; }
.beat[data-t="07:51"] .att--rev .att__n--v2 { display: block !important; grid-column: 3; grid-row: 2; font-size: 11px; text-align: center; color: var(--ink-2); padding: 0; }
.beat[data-t="07:51"] .att--rev .mock--old { grid-column: 1; grid-row: 1; }
.beat[data-t="07:51"] .att--rev .att__arrow { grid-column: 2; grid-row: 1; }
.beat[data-t="07:51"] .att--rev .mock--new { grid-column: 3; grid-row: 1; }
.beat[data-t="07:51"] .att .mock--old, .beat[data-t="07:51"] .att .mock--new { font-size: 4.1px !important; }

/* ---------- desktop sizing inside the site's 12-column grid ---------- */
@media (min-width: 1200px) {
  .mrn__stage { height: 600px; }
  .beat > .win { zoom: 1.22; }
  .beat > .win.gate { zoom: 1.14; }
}

/* ---------- phones ---------- */
@media (max-width: 959px) {
  .mrn { grid-template-columns: minmax(0, 1fr); }
  .mrn__steps { gap: 0 8px; margin: 2px 0 2px; }
  .mrn__steps button { grid-template-columns: 1fr; padding: 10px 0 2px; row-gap: 3px; }
  .mrn__steps b { font-size: 13.5px; letter-spacing: -.01em; }
  .stp__n { font-size: 10.5px; }
  .stp__d, .stp__t { display: none; }
  .stp__n { grid-column: 1; grid-row: 1; }
  .mrn__steps b { grid-column: 1; grid-row: 2; }
  .mrn__clock { font-size: 24px; }
}

/* ---------- reduced motion: the loop is a static legend above the key frames ---------- */
@media (prefers-reduced-motion: reduce) {
  .mrn__steps button { cursor: default; pointer-events: none; color: var(--ink-2); }
  .stp__bar > i { transform: scaleX(1) !important; background: var(--ink-2); }
  .mrn__steps li .stp__n { color: var(--accent-hi); }
  .cap__step { display: block; font: 500 10.5px/1.5 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
}

/* payoff receipts: bigger crops on desktop, the gate card as live */
@media (min-width: 960px) {
  .pay { max-width: 860px; }
  .pay__pile { grid-template-columns: 250px auto 250px; gap: 10px 26px; }
  .pile__c { width: 250px; height: 112px; }
  .pile__c:nth-child(4), .pile__c:nth-child(5) { height: 170px; }
  .pile__c > .win { zoom: .37; }
  .pile__c.is-gate > .win { zoom: .7; }
}
.pile__c.is-gate > .win.gate { border-radius: var(--r-win); box-shadow: var(--gate-glow); }
.mrn.is-pay .mrn__side li:not(.is-pay)::after { left: auto; right: 10px; }

@media (max-width: 959px) {
  /* AD-28 #4: on phones the gate sits low so the dimmed thread (and Maya's ask) stays visible above it */
  .beat[data-win="gate"] { place-content: end center; padding-bottom: 12px; }
  .beat[data-under] > .win { filter: brightness(.6) blur(1px) !important; }
  .beat[data-t="07:51"] .att .mock--old, .beat[data-t="07:51"] .att .mock--new { font-size: 3.4px !important; }
  .beat[data-t="07:51"] .att--rev .att__n--v2 { font-size: 10px; }
  .beat[data-t="07:51"] .pin { padding: 5px 10px; font-size: 12.5px; }
}

/* receipts are finished artifacts: nothing inside a payoff crop replays (only the crop itself flies in) */
.pile__c *, .pile__c *::before, .pile__c *::after, .rc__win *, .rc__win *::before, .rc__win *::after { animation: none !important; transition: none !important; }
.pile__c .adlib__grid::after, .rc__win .adlib__grid::after { display: none; }
/* Ads Manager: tighter rows so Kres's note fits at desktop zoom */
.ads__tr { padding: 10px 0; }
.ads__th { padding: 8px 0 6px; }
.ads > .ads__tr:last-of-type { margin-bottom: 6px; }
.ads .note { margin-top: 8px; }
.tog.tog--off { background: var(--win-dot); }

/* reduced motion wins over the desktop sizing above */
@media (prefers-reduced-motion: reduce) {
  .mrn { grid-template-columns: minmax(0, 1fr); }
  .mrn__stage { height: auto; background: none; }
  .beat > .win { zoom: .86; }
  .beat > .win.gate { zoom: .86; }
  .beat[data-t="08:15"] > .win.gate { zoom: 1; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 1180px) and (min-width: 960px) {
  .beat > .win, .beat > .win.gate { zoom: .6; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 959px) {
  .beat > .win, .beat > .win.gate { zoom: 1; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 959px) {
  /* AD-28 #3: the swipe card leads with the circled #2, the point of the beat */
  .beat[data-t="06:05"] .sk:first-child { display: none; }
  .beat[data-t="06:05"] .sk:nth-child(3) { display: block; }
  .beat[data-t="06:05"] .sketch__note { grid-column: 1; }
}
@media (max-width: 959px) {
  /* AD-28 #2: no dead band above the thread on phones; Slack shows the last older message */
  .beat[data-t="07:02"] .trig .msg--older:nth-child(3) { display: grid !important; }
}

/* the unlock gets a small ring of his blue as the shackle swings */
.gate__lock--rule { position: relative; }
.gate__lock--rule::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(37,99,255,.55); opacity: 0; transform: scale(.6); pointer-events: none; }
@keyframes lkRing { 0%, 82% { opacity: 0; transform: scale(.6); } 88% { opacity: 1; } 100% { opacity: 0; transform: scale(1.5); } }
.beat.is-on .gate__lock--rule::after { animation: lkRing 4.8s ease-out both .2s; }

/* =====================================================================
   round 2 (fresh-eyes AD): the gate is the only bright surface, cleaner flip, earlier go-live
   ===================================================================== */
/* the stage is nearly flat all morning; the brand light comes up behind the gate card, then dims */
.mrn { --stage-bg: #060A12; }
.mrn__stage::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  background: radial-gradient(60% 75% at 50% 46%, rgba(132,100,255,.30) 0%, rgba(37,99,255,.12) 45%, rgba(3,6,11,0) 75%);
  opacity: .22; transition: opacity .6s ease; }
.mrn:has(.beat[data-win="gate"].is-on) .mrn__stage::before { opacity: .75; }
.mrn.is-gate-now .mrn__stage::before { opacity: 1; }
/* the sketchbook stays paper, but a darker sheet, so it never rivals the gate card */
.mrn { --paper: #8c877d; --paper-line: rgba(20, 22, 34, .12); --pencil: #23222a; --pencil-mark: #4a2fd0; }
/* competitor creatives sit back a little */
.adc__img { filter: brightness(.86) saturate(.92); }
/* the week's last bar is Kres's lavender, not white */
.rep__bars i.is-last { background: var(--accent-hi); }

/* the flip: old words slide out, new words slide in, never both at once */
.gate__t { overflow: hidden; }
@keyframes gtOut { 0%, 82% { opacity: 1; transform: none; } 85%, 100% { opacity: 0; transform: translateY(-.7em); } }
@keyframes gtIn { 0%, 85% { opacity: 0; transform: translateY(.7em); } 89%, 100% { opacity: 1; transform: none; } }
/* the button snaps from ink to his blue in one step, label and all */
@keyframes btnPress { 0% { opacity: 1; box-shadow: 0 0 0 0 rgba(11,18,48,.4); } 25% { box-shadow: 0 0 0 8px rgba(11,18,48,0); } 26% { box-shadow: 0 0 0 0 rgba(11,18,48,.4); } 50% { box-shadow: 0 0 0 8px rgba(11,18,48,0); } 62% { opacity: 1; transform: scale(1); filter: none; } 66%, 72% { opacity: 1; transform: scale(.98); filter: brightness(.8); } 76%, 83.5% { opacity: 1; transform: scale(1); } 84%, 100% { opacity: 0; } }
@keyframes doneIn { 0%, 83.5% { opacity: 0; } 84%, 100% { opacity: 1; } }
/* the fingertip lands on the right third, clear of the label */
.gate__tap { left: 86%; }

/* go-live reads in the first second: the toggle flips, In review turns Active */
@keyframes togBg { 0%, 34% { background: var(--win-dot); box-shadow: none; } }
@keyframes togKnob { 0%, 34% { left: 2px; } }
@keyframes stOut { 0%, 36% { opacity: 1; } 44%, 100% { opacity: 0; } }
@keyframes stIn { 0%, 40% { opacity: 0; } 54%, 100% { opacity: 1; } }

@media (max-width: 959px) {
  .gate__where { font-size: 12px; }
  .gate dl div { font-size: 13px; }
  .gate__ask { font-size: 13px; }
}

/* =====================================================================
   round 3 (master copy): one navigation. The four steps own the left column, each step holds its beats,
   and the premise joins the header row, so the first window starts one band lower than the label.
   Type follows the site scale: 12 mono, 14, 16, 20.
   ===================================================================== */
.mrn { grid-template-columns: 300px minmax(0, 1fr); column-gap: 48px; row-gap: 24px; --font-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif; }
.mrn__head { grid-column: 1 / -1; align-items: flex-end; padding-bottom: 18px; }
.mrn__lab { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mrn__fig { font: 500 12px/1.4 var(--font-mono); letter-spacing: .04em; color: var(--muted); }
.mrn__fig b { font-weight: 500; color: var(--accent-hi); margin-right: 4px; }
.mrn__premise { margin: 0; font-size: 20px; font-weight: 520; letter-spacing: -.015em; line-height: 1.3; color: var(--ink); }
.mrn__clock { font-weight: 520; font-size: 32px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }

/* the steps: a vertical index with the beats nested under each */
.mrn__steps { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; gap: 22px; margin: 2px 0 0; align-self: start; }
.mrn__steps > li { display: block; min-width: 0; }
.mrn__steps button { grid-template-columns: 30px minmax(0, 1fr) auto; grid-template-rows: auto auto auto; column-gap: 0; row-gap: 0; padding: 0; align-items: baseline; transition: color .2s cubic-bezier(.25,.46,.45,.94); }
.stp__n { grid-column: 1; grid-row: 1; font: 500 12px/1 var(--font-mono); letter-spacing: .04em; }
.mrn__steps b { grid-column: 2; grid-row: 1; font-weight: 560; font-size: 20px; letter-spacing: -.015em; line-height: 1.15; }
.stp__t { grid-column: 3; grid-row: 1; font: 500 12px/1 var(--font-mono); letter-spacing: .02em; justify-self: end; padding-left: 10px; }
/* only the playing step shows its line, so the index stays as tall as the stage */
.stp__d { grid-column: 2 / -1; grid-row: 2; font-size: 14px; line-height: 1.45; max-width: 36ch; max-height: 0; padding-top: 0; opacity: 0; overflow: hidden; transition: max-height .6s cubic-bezier(.16,1,.3,1), padding-top .6s cubic-bezier(.16,1,.3,1), opacity .5s cubic-bezier(.16,1,.3,1); }
.mrn__steps li.is-now .stp__d { max-height: 3em; padding-top: 6px; opacity: 1; }
.stp__bar { position: relative; inset: auto; grid-column: 2 / -1; grid-row: 3; height: 2px; margin-top: 8px; }
.stp__beats { list-style: none; margin: 10px 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 0; }
.stp__beats li { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 6px; padding: 4px 8px; border-radius: 6px; color: var(--muted); cursor: pointer; transition: background .3s cubic-bezier(.25,.46,.45,.94), color .3s cubic-bezier(.25,.46,.45,.94); }
.stp__beats li:hover { color: var(--ink); }
.stp__beats li:focus-visible { outline: 2px solid #67E8F9; outline-offset: -2px; }
.stp__beats time { grid-row: span 2; font: 500 12px/1.75 var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stp__beats b { font-size: 14px; font-weight: 500; line-height: 1.5; }
.stp__beats li > span { grid-column: 2; font-size: 14px; line-height: 1.45; display: block; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .5s cubic-bezier(.16,1,.3,1), opacity .4s cubic-bezier(.16,1,.3,1); }
.stp__beats li.is-past { color: var(--ink-2); }
.stp__beats li.is-now { color: var(--ink); background: rgba(139,108,255,.10); }
.stp__beats li.is-now::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 2px; border-radius: 2px; background: var(--accent); }
.stp__beats li.is-now > span { max-height: 3em; opacity: 1; color: var(--ink-2); }
.stp__beats li.is-gate b::after { content: "Gate"; margin-left: 8px; font: 500 10px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; padding: 3px 6px; border-radius: 999px; border: 1px solid var(--seb-hi); color: var(--seb-hi); vertical-align: 2px; }
.stp__beats li.is-pay > span { display: none !important; }
.mrn.is-pay .stp__beats li:not(.is-pay) { color: var(--ink-2); }
.mrn.is-pay .stp__beats li:not(.is-pay)::after { content: "\2713"; position: absolute; right: 10px; top: 5px; font-size: 13px; font-weight: 600; color: var(--accent-hi); animation: rise .3s var(--ease) both; animation-delay: calc(var(--k) * 90ms); }
.mrn.is-still.is-pay .stp__beats li::after { animation: none; }
.mrn.is-pay .stp__beats li.is-gate b::after { background: var(--ink); color: var(--gate-ink); border-color: var(--ink); }
.mrn__main { grid-column: 2; grid-row: 2; min-width: 0; }
@media (min-width: 1200px) { .mrn__stage { height: 640px; } }

/* phones and narrow tablets: the steps go back to a four-part bar above the stage; the beats stay for screen readers */
@media (max-width: 959px) {
  .mrn { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
  .mrn__head { align-items: flex-start; flex-wrap: wrap; row-gap: 10px; padding-bottom: 12px; }
  .mrn__premise { font-size: 17px; }
  .mrn__clock { font-size: 24px; }
  .mrn__steps { grid-column: 1; grid-row: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 8px; margin: 2px 0; }
  .mrn__steps button { grid-template-columns: 1fr; grid-template-rows: auto auto; padding: 12px 0 2px; row-gap: 3px; }
  .stp__bar { position: absolute; left: 0; right: 0; top: 0; margin: 0; grid-column: auto; grid-row: auto; }
  .stp__n { grid-column: 1; grid-row: 1; font-size: 11px; }
  .mrn__steps b { grid-column: 1; grid-row: 2; font-size: 14px; letter-spacing: -.01em; font-weight: 560; }
  .stp__d, .stp__t { display: none; }
  .stp__beats { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0; }
  .mrn__main { grid-column: 1; grid-row: auto; }
}

/* reduced motion: one column, the loop as a static legend above the key frames */
@media (prefers-reduced-motion: reduce) {
  .mrn { grid-template-columns: minmax(0, 1fr); }
  .mrn__steps { grid-column: 1; grid-row: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 20px; }
  .mrn__steps button { grid-template-columns: 30px minmax(0, 1fr) auto; padding: 14px 0 2px; }
  .stp__bar { position: absolute; left: 0; right: 0; top: 0; margin: 0; grid-column: auto; grid-row: auto; }
  .stp__beats { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0; }
  .mrn__main { grid-column: 1; grid-row: auto; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 960px) {
  .stp__d { max-height: none; padding-top: 6px; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 959px) {
  .mrn__steps { gap: 0 8px; }
  .mrn__steps button { grid-template-columns: 1fr; padding: 12px 0 2px; }
}

/* =====================================================================
   round 3: compositor-only motion. Measured in playback (props.py): every glow, ring, sweep, and knob
   below used to repaint or relayout each frame. Each now moves on transform or opacity only.
   ===================================================================== */
/* the gate's flash: a fixed glow layer that fades, instead of repainting a 100 px shadow for 5 s */
.win.gate { position: relative; overflow: visible; }
.win.gate::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: 0 0 0 2px var(--seb-hi), 0 0 100px -4px rgba(120, 140, 255, .95); opacity: 0; }
.beat.is-on > .win.gate { animation: gateIn .7s cubic-bezier(.16, .84, .24, 1) both; }
.beat.is-on > .win.gate::after { animation: glowFlash 5.1s cubic-bezier(.25, .46, .45, .94) both .2s; }
@keyframes glowFlash { 0%, 84% { opacity: 0; } 92% { opacity: 1; } 100% { opacity: 0; } }
.pile__c .win.gate::after, .rc__win.gate::after, .mrn.is-still .win.gate::after { animation: none !important; opacity: 0; }

/* the button's two "waiting" pulses: a ring that scales out and fades */
.gate__btn::after, .gate__done::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; }
.gate__btn::after { box-shadow: 0 0 0 3px rgba(11, 18, 48, .35); }
.gate__done::after { box-shadow: 0 0 0 3px rgba(37, 99, 255, .55); }
@keyframes btnPress { 0% { opacity: 1; } 62% { opacity: 1; transform: scale(1); filter: none; } 66%, 72% { opacity: 1; transform: scale(.98); filter: brightness(.8); } 76%, 83.5% { opacity: 1; transform: scale(1); } 84%, 100% { opacity: 0; } }
@keyframes waitRing { 0% { opacity: .9; transform: none; } 24% { opacity: 0; transform: scale(1.04, 1.4); } 25% { opacity: .9; transform: none; } 49% { opacity: 0; transform: scale(1.04, 1.4); } 50%, 100% { opacity: 0; transform: none; } }
@keyframes doneRing { 0%, 84% { opacity: 0; transform: none; } 86% { opacity: .9; transform: none; } 100% { opacity: 0; transform: scale(1.05, 1.6); } }
.beat.is-on .gate__btn::after { animation: waitRing 4.8s cubic-bezier(.16, 1, .3, 1) both .2s; }
.beat.is-on .gate__done { animation: doneIn 4.8s ease both .2s; }
.beat.is-on .gate__done::after { animation: doneRing 5.3s cubic-bezier(.16, 1, .3, 1) both .2s; }
.pile__c .gate__btn::after, .pile__c .gate__done::after, .rc__win .gate__btn::after, .rc__win .gate__done::after { animation: none !important; opacity: 0; }

/* the three "overnight" ads light up: a ring layer fades in, the card itself never repaints */
.adc { position: relative; }
.adc::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1.5px var(--accent-hi), 0 0 18px -6px var(--accent-glow); opacity: 0; }
.beat.is-on .adlib__grid .adc.is-hit { animation: none; }
.beat.is-on .adlib__grid .adc.is-hit::after { animation: hitRing .7s cubic-bezier(.16, 1, .3, 1) both 1.25s; }
@keyframes hitRing { 0% { opacity: 0; } 55% { opacity: 1; } 100% { opacity: .8; } }
.mrn.is-still .adc.is-hit::after, .pile__c .adc.is-hit::after, .rc__win .adc.is-hit::after { animation: none !important; opacity: .8; }

/* the scan light: a band that translates across a clipped strip, instead of a moving background */
.adlib__grid::after { display: none !important; }
.adlib__scan { position: absolute; inset: -6px -4px; overflow: hidden; pointer-events: none; border-radius: var(--r-sm); list-style: none; }
.adlib__scan::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 24%; background: linear-gradient(90deg, rgba(201, 187, 255, 0), rgba(201, 187, 255, .16) 50%, rgba(201, 187, 255, 0)); transform: translate3d(-100%, 0, 0); opacity: 0; }
.beat.is-on .adlib__scan::before { animation: scanX 1.3s cubic-bezier(.45, 0, .25, 1) both .95s; }
@keyframes scanX { 0% { opacity: 0; transform: translate3d(-100%, 0, 0); } 12%, 86% { opacity: 1; } 100% { opacity: 0; transform: translate3d(417%, 0, 0); } }
.mrn.is-still .adlib__scan, .pile__c .adlib__scan, .rc__win .adlib__scan { display: none; }

/* the go-live toggle: the knob snaps across on a spring (transform), the track's color is a fading overlay */
.tog { position: relative; }
.tog::after { left: 2px; transform: translate3d(14px, 0, 0); }
.tog.tog--off::after { transform: none; }
.ads__new .tog::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--win-dot); opacity: 0; }
.beat.is-on .ads__new .tog { animation: none; }
.beat.is-on .ads__new .tog::before { animation: togOff 2.6s cubic-bezier(.25, .46, .45, .94) both .2s; }
.beat.is-on .ads__new .tog::after { animation: togSnap 2.6s both .2s; }
@keyframes togOff { 0%, 34% { opacity: 1; } 42%, 100% { opacity: 0; } }
@keyframes togSnap { 0%, 34% { transform: none; animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); } 44%, 100% { transform: translate3d(14px, 0, 0); } }
.pile__c .tog::before, .rc__win .tog::before { animation: none !important; opacity: 0; }

/* each "overnight" ad lights the moment the scan band crosses its column (computed off the scan curve: 1.31 s, 1.64 s) */
.beat.is-on .adlib__grid .adc.is-hit:nth-child(3n+1)::after { animation-delay: 1.28s; }
.beat.is-on .adlib__grid .adc.is-hit:nth-child(3n)::after { animation-delay: 1.6s; }

/* =====================================================================
   round 3: the gate, retimed from the frame-by-frame sheet. Before, the button turned blue 570 ms after
   his finger lifted, which read as lag. Now each event causes the next within a frame or two:
   finger lifts 3.75 s, shackle lifts with it, button flips 3.90 s, title and header flip 3.90 to 4.23 s,
   the card flashes once, then "Tapped from Sebastian's phone".
   ===================================================================== */
@keyframes tap { 0%, 52% { opacity: 0; transform: translate(40px, 30px) scale(.6); } 62% { opacity: 1; transform: none; } 70% { opacity: .9; transform: scale(.75); } 78%, 100% { opacity: 0; transform: scale(1.8); } }
@keyframes btnPress { 0% { opacity: 1; } 62% { opacity: 1; transform: scale(1); filter: none; } 66%, 72% { opacity: 1; transform: scale(.98); filter: brightness(.8); } 74%, 77% { opacity: 1; transform: scale(1); filter: none; } 77.5%, 100% { opacity: 0; } }
@keyframes doneIn { 0%, 77% { opacity: 0; } 77.5%, 100% { opacity: 1; } }
@keyframes gtOut { 0%, 77.5% { opacity: 1; transform: none; } 80.5%, 100% { opacity: 0; transform: translateY(-.7em); } }
@keyframes gtIn { 0%, 80.5% { opacity: 0; transform: translateY(.7em); } 84.5%, 100% { opacity: 1; transform: none; } }
@keyframes shOpen { 0%, 74% { transform: none; } 77% { transform: translateY(-3.4px); } 83%, 100% { transform: translateY(-3.4px) rotate(-38deg); } }
@keyframes lkTint { 0%, 76% { stroke: var(--gate-ink); } 82%, 100% { stroke: var(--seb); } }
@keyframes khTint { 0%, 76% { fill: var(--gate-ink); } 82%, 100% { fill: var(--seb); } }
@keyframes lkRing { 0%, 77% { opacity: 0; transform: scale(.6); } 83% { opacity: 1; } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes fromIn { 0%, 82% { opacity: 0; } 92%, 100% { opacity: 1; } }
@keyframes glowFlash { 0%, 73.5% { opacity: 0; } 79.5% { opacity: 1; } 89%, 100% { opacity: 0; } }
@keyframes doneRing { 0%, 70% { opacity: 0; transform: none; } 72% { opacity: .9; transform: none; } 100% { opacity: 0; transform: scale(1.05, 1.6); } }

/* the resting card has no ring; the ::after layer carries it (and holds .8 after its fade) */
.adc.is-hit { box-shadow: inset 0 0 0 1px var(--win-line); }
.beat.is-on .adlib__grid .adc.is-hit:nth-child(3n+1) .adc__tag { animation-delay: 1.28s; }
.beat.is-on .adlib__grid .adc.is-hit:nth-child(3n) .adc__tag { animation-delay: 1.6s; }
/* the title hand-off: the new line starts rising as the old one clears, so the row is never blank for more than a frame */
@keyframes gtOut { 0%, 77.5% { opacity: 1; transform: none; } 80%, 100% { opacity: 0; transform: translateY(-.7em); } }
@keyframes gtIn { 0%, 79.5% { opacity: 0; transform: translateY(.7em); } 83%, 100% { opacity: 1; transform: none; } }

/* =====================================================================
   round 4 (AD review: "8:15 lands near 25 s, beats carry 2 to 3 s of dead hold").
   Beat lengths now come from each beat's measured last animation plus a read, and the two long scenes
   are tightened: the sketches draw 40% faster, and the gate plays in 2.8 s instead of 4.8 s
   (finger at 1.66 s, press 2.05 s, flip 2.37 s). 8:15 now lands at 16.9 s; the loop is 33 s, was 46.
   ===================================================================== */
.beat.is-on .sk path { animation-duration: .8s; animation-delay: calc(var(--i, 0) * 420ms + 250ms); }
.beat.is-on .sk__ring path { animation-delay: 1.75s; animation-duration: .6s; }
.beat.is-on .sketch__note { animation-delay: 2.2s; }
.beat.is-on .gt--wait, .beat.is-on .gt--done, .beat.is-on .gate__from, .beat.is-on .gw--a, .beat.is-on .gw--b,
.beat.is-on .gate__tap, .beat.is-on .gate__btn, .beat.is-on .gate__btn::after, .beat.is-on .gate__done,
.beat.is-on .lk--live .lk__bd, .beat.is-on .lk--live .lk__kh, .beat.is-on .gate__lock--rule::after { animation-duration: 2.8s; }
.beat.is-on .lk--live .lk__sh { animation-duration: 2.8s, 2.8s; }
.beat.is-on .gate__done::after { animation-duration: 3.1s; }
.beat.is-on > .win.gate::after { animation-duration: 3s; }
/* the step line clears the progress bar (desktop player only; the phone bar and the reduced legend sit at top 0) */
@media (min-width: 960px) and (prefers-reduced-motion: no-preference) { .stp__bar { margin-top: 12px; } }

/* reduced motion: the stage is a static grid again (the 640 px player height must not apply), and on desktop
   it is a clean 2 by 2 of the four key frames: research, sketches, the approved gate, and live on Meta */
@media (prefers-reduced-motion: reduce) {
  .mrn__stage { height: auto !important; }
  .beat[data-depth] > .win { clip-path: none !important; transform: none !important; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 960px) {
  .beat[data-t="07:51"], .beat[data-t="08:52"] { display: none !important; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 960px) {
  .beat[data-t="08:15"] > .win.gate { justify-self: start; width: min(560px, 100%); }
  .mrn .beat > .win { min-height: 0; }
}

/* round 5: the lifted Ads Manager row keeps the same inner edges as the rows under it */
.ads__tr.ads__new { padding-left: 16px; padding-right: 16px; }
@media (max-width: 959px) { .ads__tr.ads__new { padding-left: 12px; padding-right: 12px; } }

/* =====================================================================
   round 5 (second art director pass)
   ===================================================================== */

/* 5:30: the rivals' ads are finished little ads, made of the same parts as the Ferngrove mockup */
.adc__img { height: 76px; padding: 8px 9px; color: #fff; background: var(--adbg); filter: none; font-size: 12.5px; line-height: 1.05; align-items: flex-end; --bottle-cap: #1b1d26; }
.adc__img::after { display: none; }
.adc__img > span:not(.bottle) { max-width: 60%; text-shadow: 0 1px 10px rgba(0, 0, 0, .25); }
.adc__br { position: absolute; top: 8px; left: 9px; z-index: 1; font: 700 7.5px/1 var(--font-display); font-style: normal; letter-spacing: .16em; text-transform: uppercase; opacity: .86; }
.adc__img .bottle { font-size: 3.7px; top: auto; bottom: 5px; left: auto; right: 13%; transform: none; }
.adc__img .bottle::after { bottom: -0.4em; }
.adi--1 { --adbg: radial-gradient(70% 90% at 78% 30%, rgba(255,255,255,.28), transparent 60%), linear-gradient(160deg, #31285e 0%, #6f5cb3 58%, #b9a6ec 100%); --bottle: linear-gradient(90deg, #a892dc, #f1e9ff 45%, #8f7acb); }
.adi--3 { --adbg: radial-gradient(70% 90% at 78% 30%, rgba(255,255,255,.22), transparent 60%), linear-gradient(160deg, #0f2d2c 0%, #2c6964 58%, #87c4b8 100%); --bottle: linear-gradient(90deg, #c4cfcc, #ffffff 45%, #a9b8b4); }
.adi--5 { --adbg: radial-gradient(70% 90% at 78% 30%, rgba(255,255,255,.22), transparent 60%), linear-gradient(160deg, #141b3d 0%, #3a4c8f 58%, #9eb0e8 100%); --bottle: linear-gradient(90deg, #d7dcef, #ffffff 45%, #b9c1de); }
.adi--4 { --adbg: radial-gradient(70% 90% at 78% 30%, rgba(255,255,255,.5), transparent 60%), linear-gradient(160deg, #f1e9d6 0%, #d5c4a0 100%); --bottle: linear-gradient(90deg, #8a4f1e, #d08a3e 45%, #a9632a); color: #2a2418; }
.adi--4 > span:not(.bottle) { text-shadow: none; }
.adi--6 { --adbg: radial-gradient(70% 90% at 78% 30%, rgba(255,255,255,.22), transparent 60%), linear-gradient(160deg, #3a1c2a 0%, #8b4761 58%, #e0abbd 100%); --bottle: linear-gradient(90deg, #e9c9d4, #fff4f7 45%, #cfa6b4); }
.adi--2 { --adbg: none; background: linear-gradient(90deg, #8f6248 0 50%, #e2c2a8 50%); }
.adi--2 > span { color: #fff; }
.adi--2 > span + span { background: none !important; color: #3a2a1f; }
.adi--2::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1.5px; background: rgba(255, 255, 255, .8); z-index: 1; }
.adi--2 .adc__br { color: #fff; }
/* product shapes */
.bottle--jar { width: 8.4em; }
.bottle--jar .bottle__cap { width: 6.8em; height: 1.8em; border-radius: .5em .5em .2em .2em; }
.bottle--jar .bottle__cap::after { display: none; }
.bottle--jar .bottle__body { height: 4.6em; border-radius: .9em; }
.bottle--tube { width: 4em; }
.bottle--tube .bottle__cap { width: 2.6em; height: 1.6em; border-radius: .3em .3em .2em .2em; }
.bottle--tube .bottle__cap::after { display: none; }
.bottle--tube .bottle__body { height: 8.6em; border-radius: 2em 2em .5em .5em; }
.bottle--pump .bottle__cap { width: 1.3em; height: 2.6em; }
.bottle--pump .bottle__cap::before { content: ""; position: absolute; top: .2em; left: 50%; width: 2.2em; height: .7em; border-radius: .3em; background: var(--bottle-cap); }
.bottle--pump .bottle__body { height: 6.8em; border-radius: 1em 1em .6em .6em; }
@media (max-width: 959px) {
  .adc__img { height: 60px; padding: 7px 8px; font-size: 11.5px; }
  .adc__img .bottle { font-size: 3px; }
  .adc__br { font-size: 6.5px; top: 6px; left: 8px; }
}

/* 6:05: the sketches draw a little faster so the beat can be shorter */
.beat.is-on .sk path { animation-duration: .7s; animation-delay: calc(var(--i, 0) * 360ms + 200ms); }
.beat.is-on .sk__ring path { animation-delay: 1.45s; animation-duration: .55s; }
.beat.is-on .sketch__note { animation-delay: 1.8s; }

/* 8:15, the tap: a soft fingertip lands, the button presses to .94, and it flips 0.38 s after the finger appears.
   Same 2.8 s clock as every other gate track, so the flip stays at 77.5% (2.37 s into the beat). */
.gate__tap { width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.96) 0 36%, rgba(255,255,255,.62) 50%, rgba(255,255,255,0) 70%); box-shadow: none; z-index: 3; }
@keyframes tap5 {
  0%, 64% { opacity: 0; transform: translate3d(26px, 22px, 0) scale(.7); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  70% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(.5, 0, .75, 0); }
  73%, 77.5% { opacity: 1; transform: scale(.82); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  88%, 100% { opacity: 0; transform: scale(1.5); }
}
@keyframes btnPress5 {
  0%, 70% { opacity: 1; transform: none; filter: none; animation-timing-function: cubic-bezier(.5, 0, .75, 0); }
  73%, 77.4% { opacity: 1; transform: scale(.94); filter: brightness(.8); }
  77.5%, 100% { opacity: 0; transform: scale(.94); }
}
@keyframes doneIn5 {
  0%, 77.4% { opacity: 0; transform: scale(.94); }
  77.5% { opacity: 1; transform: scale(.94); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
  90%, 100% { opacity: 1; transform: none; }
}
.beat.is-on .gate__tap { animation: tap5 2.8s both .2s; }
.beat.is-on .gate__btn { animation: btnPress5 2.8s both .2s; }
.beat.is-on .gate__done { animation: doneIn5 2.8s both .2s; }

/* the rail: nothing below the playing step moves. Every step keeps its line (dim until it plays), and only the gate
   beat carries a second line, always, so no height changes while the morning plays */
@media (min-width: 960px) and (prefers-reduced-motion: no-preference) {
  .mrn__steps { gap: 18px; }
  .stp__d { max-height: none !important; padding-top: 4px !important; opacity: 1 !important; overflow: visible; color: var(--muted); transition: color .3s cubic-bezier(.25,.46,.45,.94); }
  .mrn__steps li.is-now .stp__d { color: var(--ink-2); }
  .stp__beats { margin-top: 8px; }
  .stp__beats li { padding: 3px 8px; }
  .stp__beats li > span { display: none; }
  .stp__beats li.is-gate > span { display: block; max-height: none; opacity: 1; overflow: visible; color: var(--ink-2); }
}
.adc__img > .bottle { position: absolute; max-width: none; z-index: 1; }
.beat[data-t="05:30"] > .win { max-height: none; }
@media (min-width: 960px) and (prefers-reduced-motion: no-preference) {
  .mrn__steps { gap: 12px; }
  .stp__beats { margin-top: 6px; }
  .stp__beats li { padding: 2px 8px; }
  .stp__bar { margin-top: 8px; }
}
@media (max-width: 959px) { .adlib__search { gap: 6px; padding: 0 9px; font-size: 11.5px; } }
@media (prefers-reduced-motion: reduce) and (max-width: 959px) { .mrn__stage { grid-template-columns: repeat(6, 86%); } .adlib__top .pill { padding: 4px 7px; } }
@media (max-width: 380px) { .adlib__top { gap: 6px; } .adlib__search { font-size: 11px; padding: 0 8px; } .adlib__top .pill { font-size: 10.5px; padding: 4px 6px; } }
/* still frames and reduced motion show the line under the approved button */
.mrn.is-still .gate__from, .pile__c .gate__from { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .gate__from { opacity: 1; } }

/* ======================= round 5b: a faster morning ======================= */
/* content lands sooner in every beat */
.beat.is-on .a { animation-delay: calc(var(--i, 0) * 80ms + 180ms); }
.beat.is-on .new { animation-delay: calc(var(--i, 0) * 170ms + 150ms); }
/* 5:30: the scan crosses in 1 s, starting at 0.55 s; the overnight ads light at 0.80 s and 1.05 s */
.beat.is-on .adlib__scan::before { animation: scanX 1s cubic-bezier(.45, 0, .25, 1) both .55s; }
.beat.is-on .adlib__grid .adc.is-hit:nth-child(3n+1)::after, .beat.is-on .adlib__grid .adc.is-hit:nth-child(3n+1) .adc__tag { animation-delay: .8s; }
.beat.is-on .adlib__grid .adc.is-hit:nth-child(3n)::after, .beat.is-on .adlib__grid .adc.is-hit:nth-child(3n) .adc__tag { animation-delay: 1.05s; }
/* 6:05: the three sketches draw in 1.35 s, #2 is circled at 1.1 s */
.beat.is-on .sk path { animation-duration: .6s; animation-delay: calc(var(--i, 0) * 300ms + 150ms); }
.beat.is-on .sk__ring path { animation-delay: 1.1s; animation-duration: .5s; }
.beat.is-on .sketch__note { animation-delay: 1.3s; }
/* 8:15: the whole gate runs on a 2.0 s clock (it was 2.8 s), so the flip lands 1.75 s into the beat.
   The fingertip appears at 1.48 s, lands at 1.60 s, presses at 1.66 s, and the card flips at 1.75 s. */
.beat.is-on .gt--wait, .beat.is-on .gt--done, .beat.is-on .gate__from, .beat.is-on .gw--a, .beat.is-on .gw--b,
.beat.is-on .gate__tap, .beat.is-on .gate__btn, .beat.is-on .gate__btn::after, .beat.is-on .gate__done,
.beat.is-on .lk--live .lk__bd, .beat.is-on .lk--live .lk__kh, .beat.is-on .gate__lock--rule::after { animation-duration: 2s; }
.beat.is-on .lk--live .lk__sh { animation-duration: 2s, 2s; }
.beat.is-on .gate__done::after { animation-duration: 2.3s; }
.beat.is-on > .win.gate::after { animation-duration: 2.2s; }
/* the unlock ring stays inside the lock column, clear of the line beside it */
.gate__lock--rule::after { inset: -3px; }
@keyframes lkRing5 { 0%, 77% { opacity: 0; transform: scale(.7); } 83% { opacity: 1; } 100% { opacity: 0; transform: scale(1.18); } }
.beat.is-on .gate__lock--rule::after { animation-name: lkRing5; }

/* 9:00 on desktop: the phone's payoff, larger. The approved ad and stamp, then five receipts in time order */
@media (min-width: 960px) and (prefers-reduced-motion: no-preference) {
  .beat--pay .pay__pile { display: none !important; }
  .pay { max-width: 520px; }
  .pay__ok { display: flex; align-items: center; justify-content: center; margin: 0 0 20px; }
  .pay__ok .mock { display: block !important; position: relative; z-index: 0; font-size: 4.2px !important; }
  .pay__okb { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 11px; margin-left: 12px; border-radius: 8px; background: #fff; color: var(--gate-ink); box-shadow: 0 8px 22px -8px rgba(0,0,0,.6); transform: rotate(-3deg); line-height: 1.2; text-align: left; font-size: 15px; white-space: nowrap; font-weight: 600; }
  .pay__okb small { display: block; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
  .pay__okb svg { width: 18px; height: 18px; fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; }
  .pay__rc { display: flex; flex-direction: column; gap: 6px; list-style: none; margin: 0 0 20px; padding: 0; text-align: left; }
  .pay__rc li { display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 14px 0 6px; border-radius: 9px; background: var(--win-bar); box-shadow: inset 0 0 0 1px var(--win-line); font-size: 14px; }
  .pay__rc li::after { content: "\2713"; order: 9; color: var(--accent-hi); font-weight: 700; margin-left: 10px; }
  .pay__rc b { font-weight: 600; color: var(--ink); }
  .pay__rc span { margin-left: auto; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
  .rc { width: 50px; height: 36px; border-radius: 6px; flex: none; background: var(--win-bg); box-shadow: inset 0 0 0 1px var(--win-line); position: relative; overflow: hidden; }
  .rc::after { display: none; }
  .rc__win { position: absolute; left: 0; top: 0; width: 680px !important; min-height: 432px; zoom: .2; transform-origin: 0 0; box-shadow: none !important; animation: none !important; }
  .beat.is-on .pay__rc li { animation: rise .45s var(--ease) both; }
  .beat.is-on .pay__rc li:nth-child(1) { animation-delay: .25s; } .beat.is-on .pay__rc li:nth-child(2) { animation-delay: .35s; }
  .beat.is-on .pay__rc li:nth-child(3) { animation-delay: .45s; } .beat.is-on .pay__rc li:nth-child(4) { animation-delay: .55s; }
  .beat.is-on .pay__rc li:nth-child(5) { animation-delay: .65s; }
}
/* the rail: only the playing chapter opens; the others are a title and a time range */
@media (min-width: 960px) and (prefers-reduced-motion: no-preference) {
  .mrn__steps > li .stp__d, .mrn__steps > li .stp__beats { display: none; }
  .mrn__steps > li.is-now .stp__d { display: block; }
  .mrn__steps > li.is-now .stp__beats { display: flex; animation: railOpen .45s cubic-bezier(.16, 1, .3, 1) both; }
  .mrn__steps { gap: 18px; }
  .mrn.is-still .mrn__steps > li.is-now .stp__beats { animation: none; }
}
@keyframes railOpen { from { opacity: 0; transform: translate3d(0, -6px, 0); } to { opacity: 1; transform: none; } }
/* phone: the figure label shows, like every other figure on the page; the brief chip clears the window bar */
@media (max-width: 959px) {
  .mrn__fig { display: block; }
  .mrn { --stage-pad-top: 70px; }
}

/* ---------- round 7 ---------- */
/* 8:15 title swap: one line, masked. The old title leaves upward in 140 ms, then the new one rises in over 180 ms, no overlap */
.gate__t { overflow: hidden; height: 1.15em; }
@keyframes gtOut7 { 0%, 77.5% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(.5, 0, .75, 0); } 84.5%, 100% { opacity: 0; transform: translateY(-105%); } }
@keyframes gtIn7 { 0%, 84.5% { opacity: 0; transform: translateY(105%); animation-timing-function: cubic-bezier(.16, 1, .3, 1); } 93.5%, 100% { opacity: 1; transform: none; } }
.beat.is-on .gt--wait { animation-name: gtOut7; }
.beat.is-on .gt--done { animation-name: gtIn7; }
.mrn.is-still .gt--wait, .pile__c .gt--wait, .rc__win .gt--wait { opacity: 0; }
/* the touch: a thin ring that lands and opens, 270 ms, instead of a white dot */
.gate__tap { background: none; box-shadow: 0 0 0 2px rgba(255, 255, 255, .9), 0 0 0 6px rgba(255, 255, 255, .12); }
@keyframes tap7 {
  0%, 66% { opacity: 0; transform: scale(.6); }
  67% { opacity: 1; transform: scale(.6); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  79.5%, 100% { opacity: 0; transform: scale(1); }
}
.beat.is-on .gate__tap { animation-name: tap7; }
/* blue belongs to the decision: toggles go lavender, the report bars go neutral with the last bar lit */
.tog { background: var(--accent); }
.rep__bars i { background: #3A4466; opacity: 1; }
.rep__bars i.is-last { background: var(--accent-hi); opacity: 1; }
/* the rail at the gate: the open chapter drops its range (its rows carry the times), and the rows already played step back */
@media (min-width: 960px) {
  .mrn__steps > li.is-now .stp__t { visibility: hidden; }
  .mrn.is-gate-now .stp__beats li.is-past { opacity: .5; }
}
/* Replay: a circular arrow in the control once the morning has ended */
.mrn__pp.is-replay .pp__ic { width: 11px; height: 11px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; position: relative; }
.mrn__pp.is-replay .pp__ic::after { content: ""; position: absolute; right: -3px; top: -3px; border: 3.5px solid transparent; border-left-color: currentColor; transform: rotate(-30deg); }
.mrn.is-reset .mrn__stage .beat { opacity: 0; transition: opacity .25s ease; }

/* the status pill at the gate: white text on the approval blue (4.98:1) */
.mrn.is-gate-now .seb { color: #fff; }

/* phone: the label keeps its "Fig. 1", like every other figure */
@media (max-width: 959px) { .mrn__fig b { display: inline !important; } }

/* ---------- round 8 ---------- */
/* the approval runs on a 3.2 s clock: the question reads for about 1.7 s before the touch, the flip lands 2.68 s in */
.beat.is-on .gt--wait, .beat.is-on .gt--done, .beat.is-on .gate__from, .beat.is-on .gw--a, .beat.is-on .gw--b,
.beat.is-on .gate__tap, .beat.is-on .gate__btn, .beat.is-on .gate__btn::after, .beat.is-on .gate__done,
.beat.is-on .lk--live .lk__bd, .beat.is-on .lk--live .lk__kh, .beat.is-on .gate__lock--rule::after { animation-duration: 3.2s; }
.beat.is-on .lk--live .lk__sh { animation-duration: 3.2s, 3.2s; }
.beat.is-on .gate__done::after { animation-duration: 3.68s; }
.beat.is-on > .win.gate::after { animation-duration: 3.52s; }
/* the two titles cross for about 60 ms instead of leaving a blank frame */
@keyframes gtIn7 { 0%, 82.5% { opacity: 0; transform: translateY(105%); animation-timing-function: cubic-bezier(.16, 1, .3, 1); } 91.5%, 100% { opacity: 1; transform: none; } }
/* the ending: a contact sheet in time order; the approval is the one white row */
@media (min-width: 960px) and (prefers-reduced-motion: no-preference) {
  .beat--pay .pay__ok { display: none !important; }
  .pay__rc .rc { display: none; }
  .pay__rc li { gap: 16px; padding: 0 16px; }
  .pay__rc li b { flex: 1; }
  .pay__rc li span { order: -1; margin-left: 0; width: 64px; font: 500 12px/1 var(--font-mono); color: var(--muted); }
  .pay__rc li.rc--gate { background: #F5F7FC; box-shadow: none; }
  .pay__rc li.rc--gate b { color: #0A1022; }
  .pay__rc li.rc--gate span { color: #3B4560; }
  .pay__rc li.rc--gate::after { color: #2563FF; }
  .beat.is-on .pay__rc li:nth-child(6) { animation-delay: .75s; }
  .pay__rc { margin-bottom: 28px; }
}
.pay__h { font-weight: 520; }
/* while it plays, only the active chapter is lit */
@media (min-width: 960px) {
  .mrn:not(.is-ended):not(.is-still) .mrn__steps > li:not(.is-now) { opacity: .6; transition: opacity .3s ease; }
}
/* the rivals' ads sit back in one muted range, so the approval blue is the only saturated note */
.adlib .adc__img { filter: saturate(.4); }

/* ---------- round 9 ---------- */
/* the status chip stays out of the approval blue; lavender marks the moment, the card owns the light */
.mrn.is-gate-now .seb { background: var(--accent-hi); color: #0A1022; box-shadow: none; }
.mrn.is-gate-now .seb [data-seb] { color: #0A1022; }
/* the sketchbook in slate and pencil, so it never competes with the white approval card */
.win__body.sketch { background-color: #121826 !important; background-image: repeating-linear-gradient(180deg, transparent 0 27px, #1C2335 27px 28px) !important; }
.sk svg path { stroke: #C9D2E3; }
.sk__lab, .sk p, .sk span { color: #C9D2E3; }
.sketch__note { color: var(--accent-hi) !important; }
/* the thread fades in under the window bar instead of slicing a line in half */
.win__body.slack { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 36px); mask-image: linear-gradient(180deg, transparent 0, #000 36px); }
/* the ending: the approved ad and its flat stamp beside the morning's record */
@media (min-width: 960px) and (prefers-reduced-motion: no-preference) {
  .beat--pay .pay { max-width: 720px; display: grid; grid-template-columns: 190px minmax(0, 1fr); column-gap: 36px; align-items: center; }
  .beat--pay .pay__ok { display: flex !important; flex-direction: column; align-items: flex-start; gap: 12px; margin: 0; grid-column: 1; grid-row: 1; }
  .beat--pay .pay__ok .mock { font-size: 9px !important; }
  .pay__okb { transform: none; margin-left: 0; box-shadow: none; font-size: 13px; padding: 7px 12px 7px 9px; }
  .pay__rc { grid-column: 2; grid-row: 1; margin: 0; }
  .pay__h, .pay__s { grid-column: 1 / -1; }
  .pay__h { margin-top: 32px; }
}
.sk .sk__ring path { stroke: var(--accent-hi) !important; }

/* ---------- round 9b ---------- */
/* the rail at the gate: played rows step back in color, not opacity, so they keep 5.8:1 */
@media (min-width: 960px) {
  .mrn.is-gate-now .stp__beats li.is-past { opacity: 1; color: var(--muted); }
  .mrn:not(.is-ended):not(.is-still) .mrn__steps > li:not(.is-now) { opacity: 1; }
  .mrn:not(.is-ended):not(.is-still) .mrn__steps > li:not(.is-now) b { color: var(--muted); }
}
/* the status chip stays ink at 8:15; only its word changes, so the card is the one bright thing */
.mrn.is-gate-now .seb { background: rgba(255, 255, 255, .05); color: var(--ink-2); box-shadow: none; }
.mrn.is-gate-now .seb [data-seb] { color: var(--ink); }
/* the header's "Approved" lands just after the new title, never before it */
.beat.is-on .gw--a, .beat.is-on .gw--b { animation-delay: .45s; }
/* a deeper fade under the Slack window bar */
.win__body.slack { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 64px); mask-image: linear-gradient(180deg, transparent 0, #000 64px); }
/* the stamp lies flat everywhere */
.pay__okb { transform: none; }
/* phone payoff: the approval row is white here too, and lines up with the rows that carry thumbnails */
.pay__rc li.rc--gate { background: #F5F7FC; box-shadow: none; }
.pay__rc li.rc--gate b { color: #0A1022; }
.pay__rc li.rc--gate span { color: #3B4560; }
.pay__rc li.rc--gate::after { color: #2563FF; }
@media (max-width: 959px) {
  .pay__rc li.rc--gate::before { content: ""; flex: none; width: 40px; height: 1px; }
}

/* ---------- round 10: one shot ---------- */
/* windows crossfade in place; the leaving window keeps its finished state while it fades */
.beat { transition: opacity .45s ease, visibility 0s linear .45s; }
.beat.is-on { transition: opacity .45s ease .06s, visibility 0s; }
.beat.is-on.is-out { opacity: 0; z-index: 2; transition: opacity .42s ease, visibility 0s; }
@keyframes winFade { from { opacity: 0; transform: scale(.985); } }
.beat.is-on:not([data-win="gate"]) > .win { animation: winFade .55s cubic-bezier(.16, 1, .3, 1) both; }
.beat.is-on.cont > .win { animation: none; }
/* the traveller */
.trv { position: absolute; left: 0; top: 0; width: 200px; height: 250px; z-index: 30; pointer-events: none; transform-origin: 0 0; opacity: 0; will-change: transform; }
.trv.is-on { opacity: 1; }
.trv__l { position: absolute; inset: 0; opacity: 0; transition: opacity .38s ease; }
.trv[data-look="sk"] .trv__sk, .trv[data-look="v1"] .trv__v1, .trv[data-look="v2"] .trv__v2 { opacity: 1; }
.trv .mock { position: absolute; inset: 0; width: 200px; font-size: 10px !important; box-shadow: 0 24px 44px -20px rgba(0, 0, 0, .85); }
.trv__sk { border-radius: 9px; background: #121826; box-shadow: inset 0 0 0 1px #2A3348; }
.trv__sk svg { display: block; width: 100%; height: 100%; fill: none; stroke: #C9D2E3; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.mrn .is-slot { visibility: hidden !important; }
.mrn.is-still .trv, .mrn.is-reset .trv { opacity: 0 !important; }
@media (prefers-reduced-motion: reduce) { .trv { display: none; } }
/* phone: the ad stays in sight at 8:31 and 8:52 too, so the one object never drops out of the story */
@media (max-width: 959px) {
  .ads__new .ads__name { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; row-gap: 3px; }
  .ads__new .ads__name .mock { display: block; grid-row: 1 / span 3; align-self: center; font-size: 1.5px; }
  .ads__new .ads__name > .chip-ok, .ads__new .ads__name small { grid-column: 2; }
  .rep__n { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; }
  .rep__n .rep__th { display: block !important; grid-row: 1 / span 2; align-self: center; font-size: 1.5px !important; }
  .rep__n > span:not(.mock), .rep__n > .chip-ok { grid-column: 2; justify-self: start; }
}
.chip-ok { white-space: nowrap; }
@media (max-width: 380px) {
  .ads__tr { grid-template-columns: 34px minmax(0, 1fr) 64px; gap: 6px; }
  .ads__new .ads__name { column-gap: 8px; }
  .ads__new .ads__name .mock { font-size: 1.3px; }
}

/* ---------- round 11: clean hand-offs ---------- */
/* measuring where a slot will rest: entrances off for one synchronous read */
.mrn .beat.is-measure * { animation: none !important; transition: none !important; }
/* the old window is gone in a fifth of a second; the new one arrives while the ad finishes its flight */
.beat { transition: opacity .2s ease, visibility 0s linear .2s; }
.beat.is-on { transition: opacity .36s ease .26s, visibility 0s; }
.beat.is-on.cont { transition: opacity .2s ease, visibility 0s; }
.beat.is-on.is-out { opacity: 0; z-index: 2; transition: opacity .2s ease, visibility 0s; }
@keyframes winFade { from { transform: scale(.985); } }
.beat.is-on:not([data-win="gate"]) > .win { animation: winFade .5s cubic-bezier(.2, .7, .2, 1) .26s both; }
.beat.is-on.cont > .win { animation: none; }
.beat.is-on > .win.gate { animation: gateIn .62s cubic-bezier(.16, .84, .24, 1) .2s both; }
/* in flight, the ad lifts a little off the page */
.trv .mock { transition: box-shadow .3s ease; }
.trv.is-fly .mock { box-shadow: 0 36px 64px -22px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .1); }

/* the rail stands still: every step and beat is always listed, dim until it plays; only the highlight moves */
@media (min-width: 960px) and (prefers-reduced-motion: no-preference) {
  .mrn__steps > li .stp__beats { display: flex !important; animation: none !important; }
  .mrn__steps > li .stp__d { display: none !important; }
  .mrn__steps { gap: 14px; }
}

/* the same ad, big enough to recognize: about 64 by 80 in Ads Manager and in the report */
.ads__new .ads__name .mock { font-size: 3.2px !important; border-radius: 1.2em; }
.rep__th { font-size: 3.2px !important; width: 20em; }
.rep__n { align-items: center; }

/* the ending: the ad that made the trip, and the line; the rail beside it is already the record */
@media (min-width: 960px) and (prefers-reduced-motion: no-preference) {
  .beat--pay .pay { max-width: 780px; grid-template-columns: 220px minmax(0, 1fr); column-gap: 56px; row-gap: 0; align-items: center; }
  .beat--pay .pay__rc { display: none !important; }
  .beat--pay .pay__ok { grid-column: 1; grid-row: 1 / span 2; }
  .beat--pay .pay__ok .mock { font-size: 11px !important; }
  .beat--pay .pay__h { grid-column: 2; grid-row: 1; margin-top: 0; align-self: end; text-align: left; }
  .beat--pay .pay__s { grid-column: 2; grid-row: 2; align-self: start; text-align: left; margin-left: 0; }
}
/* the stamp's small label clears 4.5:1 on white */
.pay__okb small { color: #4B32C3; }

/* phone fit */
@media (max-width: 959px) {
  .ads__new .ads__name .mock { font-size: 2.4px !important; }
  .rep__n .rep__th { font-size: 2.4px !important; }
  .beat[data-t="07:02"] .msg--older { display: none !important; }
  .beat[data-t="07:51"] .slack::after { display: none; }
  .beat[data-t="07:51"] .slack { padding-bottom: 14px !important; }
  .ads__offrow:has(+ .ads__tot) { display: none; }
}
/* desktop fit with the bigger ad: Ads Manager keeps its note, the report keeps its chart */
@media (min-width: 960px) {
  .ads__offrow:has(+ .ads__tot) { display: none; }
  .rep__th { font-size: 2.8px !important; }
  .rep__lbl { display: none; }
  .rep__bars { margin-top: 14px !important; }
  .rep__n { padding-top: 8px !important; padding-bottom: 8px !important; }
}
@media (min-width: 960px) and (max-width: 1199px) {
  .rep__th { font-size: 2.2px !important; }
  .rep__n .chip-ok { display: none; }
  .rep__k em { white-space: normal; }
  .rep__bars { height: 36px !important; }
}
@media (min-width: 960px) and (max-width: 1199px) { .rep__bars { height: 26px !important; margin-top: 10px !important; } }
@media (max-width: 959px) { .mrn .beat[data-t="07:02"] .trig .msg--older:nth-child(n) { display: none !important; } }

/* the figure's note, on the label scale */
.mrn__cap { font: 500 12px/1.4 var(--font-mono); }

/* ---------- round 12: one shot, no gaps ---------- */
/* the pre-start still is 5:30's first frame: no lit cards, no note yet */
.mrn.is-pre .adc.is-hit::after { opacity: 0 !important; }
.mrn.is-pre .beat[data-t="05:30"] .note { opacity: 0 !important; }
/* a warm start keeps the window and the grid where they are; only the scan, the hits, and the note play */
.mrn .beat.is-warm *:not(.note):not(.adc__tag) { animation: none !important; }
.mrn .beat.is-warm { transition: none !important; }
/* 5:30 runs sooner: the scan at 0.6 s, the three hits by 1.9 s */
.beat.is-on .adlib__scan::before { animation-delay: .6s !important; animation-duration: 1.1s !important; }
.beat.is-on .adlib__grid .adc.is-hit::after { animation-delay: .9s; }
.beat.is-on .adlib__grid .adc.is-hit:nth-child(4)::after { animation-delay: .97s; }
.beat.is-on .adlib__grid .adc.is-hit:nth-child(3)::after { animation-delay: 1.3s; }
.beat.is-on .adlib__grid .adc.is-hit .adc__tag { animation-delay: .9s !important; }
.beat.is-on .adlib__grid .adc.is-hit:nth-child(3) .adc__tag { animation-delay: 1.3s !important; }

/* hand-off: the leaving window drops back, dimmed and blurred; the new one rises over it; the ad crosses between */
.beat.is-on.is-out { opacity: .3; filter: blur(6px); z-index: 1; transition: opacity .3s ease, filter .3s ease, visibility 0s; }
.beat.is-on:not(.is-out) { z-index: 2; }
.beat.is-on { transition: opacity .32s ease .08s, visibility 0s; }
.beat { transition: opacity .26s ease, filter .26s ease, visibility 0s linear .26s; }
@keyframes winRise { from { transform: translate3d(0, 16px, 0) scale(.985); } }
.beat.is-on:not([data-win="gate"]) > .win { animation: winRise .55s cubic-bezier(.2, .7, .2, 1) .08s both; }
.beat.is-on.cont > .win { animation: none; }
.beat.is-cut, .beat.is-on.cont { transition: none !important; }
/* the morph shows in flight */
.trv__l { transition: opacity .5s ease; }

/* the tap comes half a second sooner: the gate's clock starts 0.3 s in, the header roll stays just after the title */
.mrn .beat[data-win="gate"].is-on .win.gate *, .mrn .beat[data-win="gate"].is-on .win.gate *::after,
.mrn .beat[data-win="gate"].is-on .win.gate *::before, .mrn .beat[data-win="gate"].is-on > .win.gate::after { animation-delay: -.3s !important; }
.mrn .beat[data-win="gate"].is-on .gw--a, .mrn .beat[data-win="gate"].is-on .gw--b { animation-delay: -.05s !important; }
/* swaps never overlap: the old word leaves, then the new one rolls in */
@keyframes gtOut { 0%, 77.5% { opacity: 1; transform: none; } 79.5%, 100% { opacity: 0; transform: translateY(-.7em); } }
@keyframes gtIn { 0%, 80% { opacity: 0; transform: translateY(.7em); } 83.5%, 100% { opacity: 1; transform: none; } }
@keyframes stOut { 0%, 36% { opacity: 1; transform: none; } 41%, 100% { opacity: 0; transform: translateY(-.6em); } }
@keyframes stIn { 0%, 42% { opacity: 0; transform: translateY(.6em); } 50%, 100% { opacity: 1; transform: none; } }

/* the ending on desktop: the receipts of the morning beside the approved ad, then the line */
@media (min-width: 960px) and (prefers-reduced-motion: no-preference) {
  .beat--pay .pay { max-width: 820px; display: grid; grid-template-columns: minmax(0, 1fr) 190px; column-gap: 40px; row-gap: 0; align-items: center; }
  .beat--pay .pay__rc { display: flex !important; grid-column: 1; grid-row: 1; margin: 0; }
  .beat--pay .pay__rc .rc { display: block; }
  .beat--pay .pay__rc li { gap: 14px; padding: 0 14px 0 6px; }
  .beat--pay .pay__rc li span { order: 0; margin-left: auto; width: auto; }
  .beat--pay .pay__rc li.rc--gate::before { content: ""; flex: none; width: 50px; height: 1px; }
  .beat--pay .pay__ok { grid-column: 2; grid-row: 1; flex-direction: column; align-items: center; }
  .beat--pay .pay__ok .mock { font-size: 9px !important; }
  .beat--pay .pay__h { grid-column: 1 / -1; grid-row: 2; margin-top: 26px; text-align: left; align-self: start; }
  .beat--pay .pay__s { grid-column: 1 / -1; grid-row: 3; text-align: left; margin-left: 0; }
}
/* the new window is opaque almost at once, so the one under it never shows through; the gate's light drops fastest */
.beat.is-on { transition: opacity .14s ease .04s, visibility 0s; }
.beat.is-on.is-out { opacity: .28; filter: blur(6px); transition: opacity .24s ease, filter .24s ease, visibility 0s; }
.beat[data-win="gate"].is-on.is-out { opacity: .1; }
.beat.is-on.is-out > .win.gate::after { animation: none !important; opacity: 0 !important; }
/* phone: only 5:30 carries the brief chip, so only 5:30 keeps the tall top pad; the other windows sit higher */
@media (max-width: 959px) {
  .beat:not([data-t="05:30"]) { padding-top: 26px; }
}

/* ---------- round 13 ---------- */
/* one mono everywhere, the figure included */
.mrn { --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
/* the leaving window drops almost out of sight; the arriving window shows its frame, and its content as the ad lands */
.beat.is-on.is-out { opacity: .1; }
.beat.is-arriving > .win > .win__body { opacity: 0; }
.beat > .win > .win__body { transition: opacity .26s ease; }
.beat.is-arriving > .win.gate > * { opacity: 0; }
.beat > .win.gate > * { transition: opacity .26s ease; }
.beat.is-arriving > .win.gate > .gate__row, .beat.is-arriving > .win.gate .gate__row { opacity: 1; }
/* a small settle when the ad lands */
@keyframes trvLand { 0% { transform: scale(1.04); } 100% { transform: none; } }
.trv.is-land .trv__l { animation: trvLand .2s cubic-bezier(.2, .7, .2, 1) both; transform-origin: 50% 50%; }
/* the gate title: the question leaves, then the answer rolls in, inside a mask, never both at once */
.gate__t { overflow: hidden; }
@keyframes gtOut7 { 0%, 77.5% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(.5, 0, .75, 0); } 82.5%, 100% { opacity: 0; transform: translateY(-105%); } }
@keyframes gtIn7 { 0%, 83% { opacity: 0; transform: translateY(105%); animation-timing-function: cubic-bezier(.16, 1, .3, 1); } 91%, 100% { opacity: 1; transform: none; } }
/* fewer time signals: no progress bars, the playing chapter keeps its time range */
@media (min-width: 960px) {
  .mrn__steps .stp__bar { display: none !important; }
  .mrn__steps > li.is-now .stp__t { visibility: visible !important; }
}
/* the control appears once the morning starts */
.mrn.is-pre .mrn__pp { visibility: hidden; }
/* the payoff: the rail folds to its four chapters, so the receipts are the only record; the ending sits centered */
@media (min-width: 960px) and (prefers-reduced-motion: no-preference) {
  .mrn.is-pay .stp__beats { display: none !important; }
  .beat--pay { place-items: center; padding-top: 20px; padding-bottom: 20px; }
}

/* ---------- round 14 ---------- */
/* hand-off: the old window is gone in 0.16 s; the new one arrives just after, dim, and lights up as the ad lands */
.beat.is-on.is-out, .beat[data-win="gate"].is-on.is-out { opacity: 0; filter: none; transition: opacity .16s ease, visibility 0s; }
.beat.is-on { transition: opacity .22s ease .12s, visibility 0s; }
.beat.is-arriving > .win > .win__body, .beat.is-arriving > .win.gate > * { opacity: 1; }
.beat > .win > .win__body, .beat > .win.gate > * { transition: opacity .32s ease; }
.beat.is-dim > .win > .win__body, .beat.is-dim > .win.gate > * { opacity: .22; transition: none; }
/* the morph is visible in flight */
.trv__l { transition: opacity .42s ease; }
/* the ending: the ad that made the trip, large, beside the line; the rail beside it is the record, every step checked */
@media (min-width: 960px) and (prefers-reduced-motion: no-preference) {
  .mrn.is-pay .stp__beats { display: flex !important; }
  .beat--pay .pay { max-width: 760px; display: grid; grid-template-columns: 236px minmax(0, 1fr); column-gap: 56px; row-gap: 0; align-items: center; }
  .beat--pay .pay__rc { display: none !important; }
  .beat--pay .pay__ok { grid-column: 1; grid-row: 1 / span 2; flex-direction: column; align-items: flex-start; margin: 0; }
  .beat--pay .pay__ok .mock { font-size: 11.8px !important; }
  .beat--pay .pay__h { grid-column: 2; grid-row: 1; margin: 0; align-self: end; text-align: left; }
  .beat--pay .pay__s { grid-column: 2; grid-row: 2; align-self: start; margin: 14px 0 0; text-align: left; max-width: 34ch; }
}
/* the report's chart keeps its top label inside the window */
@media (min-width: 960px) { .rep__bars { margin-top: 24px !important; } }
/* phone: all three sketches, so the circle picks one of three */
@media (max-width: 959px) and (prefers-reduced-motion: no-preference) {
  .sketch { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 10px; padding: 14px 12px 18px; }
  .sk:nth-child(3) { display: block; }
  .sk p { font-size: 12.5px; }
}
/* short page: the destination window waits at 55%, so the ad always has a visible place to land */
.beat.is-dim > .win > .win__body, .beat.is-dim > .win.gate > * { opacity: .55; }

/* Kres speaks with the glow tile */
.mrn .av--k { background: #03060B url(img/kres-glow-tile-144.webp) 50% 50% / cover no-repeat; box-shadow: 0 0 0 1px rgba(170,190,255,.14), 0 0 16px -4px rgba(139,108,255,.6); }

/* phones: the stage height follows the beat on screen */
@media (max-width: 959px) and (prefers-reduced-motion: no-preference) { .mrn__stage { transition: height .32s cubic-bezier(.4, 0, .2, 1); } }

/* ---------- AD1 ---------- */
/* M4: the sketches start drawing as the beat begins */
.beat.is-on .sk path { animation-delay: calc(var(--i, 0) * 300ms + 40ms); }
/* M2: 9:00 on desktop: the approved ad beside the six receipts of the morning, then the line */
@media (min-width: 960px) and (prefers-reduced-motion: no-preference) {
  .beat--pay .pay { max-width: 820px; grid-template-columns: 200px minmax(0, 1fr); column-gap: 48px; row-gap: 0; align-items: center; }
  .beat--pay .pay__ok { grid-column: 1; grid-row: 1; align-items: flex-start; }
  .beat--pay .pay__ok .mock { font-size: 10px !important; }
  .beat--pay .pay__rc { display: flex !important; grid-column: 2; grid-row: 1; margin: 0; }
  .beat--pay .pay__rc .rc { display: block; }
  .beat--pay .pay__rc li { gap: 14px; padding: 0 14px 0 6px; }
  .beat--pay .pay__rc li span { order: 0; margin-left: auto; width: auto; }
  .beat--pay .pay__rc li.rc--gate::before { content: ""; flex: none; width: 50px; height: 1px; }
  .beat--pay .pay__h { grid-column: 1 / -1; grid-row: 2; margin: 28px 0 0; align-self: start; text-align: left; }
  .beat--pay .pay__s { grid-column: 1 / -1; grid-row: 3; align-self: start; margin: 12px 0 0; text-align: left; max-width: 60ch; }
}

/* ---------- AD2 ---------- */
/* phones: the clock row pins under the nav, so the clock and the window's bottom always share a screen */
@media (max-width: 959px) and (prefers-reduced-motion: no-preference) {
  .mrn__head { display: contents; }
  .mrn__lab { grid-column: 1 / -1; }
  .mrn__clockwrap { grid-column: 1 / -1; position: sticky; top: calc(var(--nav) + 1px); z-index: 35; padding: 9px 0; border-bottom: 1px solid var(--line); background: #070B15; box-shadow: 0 0 0 100vmax #070B15; clip-path: inset(0 -100vmax); }
}

/* ---------- AD4 ---------- */
/* phones: the caption hangs below the figure, so the figure ends at the window and the clock row unpins with it */
@media (max-width: 959px) and (prefers-reduced-motion: no-preference) {
  .mrn { position: relative; margin-bottom: 36px; }
  .mrn__cap { position: absolute; left: 0; right: 0; top: calc(100% + 14px); margin: 0; }
}