/* =====================================================================================
   Dental BEE v5 · site.css
   One file. First half: the document. Tokens, base, layout, components, every mock in its
   finished state, and the static, no-JS, reduced-motion and print layouts for desktop,
   tablet and phone. Second half (MOTION, at the end): every .motion rule. Nothing in the
   first half depends on JavaScript, so a script error can never break the page.
   Breakpoints: phone < 760px · tablet 760 to 1099px · desktop 1100px and up.
   ===================================================================================== */


/* ---------------------------------------------------------------- 1. Fonts */

@font-face { font-family: 'Inter'; src: url('../fonts/Inter-400.woff2') format('woff2');
             font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/Inter-600.woff2') format('woff2');
             font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter Fallback'; src: local('Arial'); size-adjust: 107.12%;
             ascent-override: 90.44%; descent-override: 22.52%; line-gap-override: 0%; }


/* ---------------------------------------------------------------- 2. Tokens */

:root {
  --black: #000; --white: #fff;
  --gray-50: #fafafa; --gray-100: #f4f4f4; --gray-200: #e6e6e6; --gray-300: #d4d4d4;
  --gray-400: #9e9e9e; --gray-500: #6b6b6b; --gray-600: #4d4d4d; --gray-700: #383838;
  --gray-800: #1f1f1f; --gray-900: #121212;
  --amber-400: #fbbf24; --amber-500: #f59e0b;

  /* roles, white ground (default) */
  --ground: var(--white); --ink: var(--black); --ink-2: var(--gray-600); --ink-3: var(--gray-500);
  --rule: var(--gray-200); --line: var(--amber-400); --focus: var(--black);

  --font: 'Inter', 'Inter Fallback', system-ui, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* type */
  --fs-display: clamp(2.5rem, 1.2rem + 5.2vw, 5.75rem);
  --fs-h2: clamp(2rem, 1.3rem + 2.6vw, 3.5rem);
  --fs-h3: clamp(1.25rem, 1.05rem + .7vw, 1.625rem);
  --fs-lead: clamp(1.125rem, 1.02rem + .45vw, 1.375rem);
  --fs-body: 1.0625rem;
  --fs-small: .9375rem;
  --fs-label: .75rem;

  /* space */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --gutter: clamp(16px, 4vw, 32px);
  --read-w: 1200px;
  --frame-w: 1360px;
  --section-y: clamp(64px, 10vw, 128px);
  --nav-h: 80px;

  /* radii and shadows */
  --r-1: 4px; --r-2: 8px; --r-3: 12px; --r-pill: 999px;
  --sh-1: 0 1px 3px rgba(0,0,0,.06);
  --sh-2: 0 1px 3px rgba(0,0,0,.06), 0 12px 32px rgba(0,0,0,.08);

  /* motion tokens (used by the second half) */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --d-micro: 160ms; --d-small: 240ms; --d-reveal: 420ms; --d-large: 700ms;
}
.on-black { --ground: var(--black); --ink: var(--white); --ink-2: var(--gray-300);
            --ink-3: var(--gray-400); --rule: var(--gray-800); --focus: var(--amber-400); }
.on-gray  { --ground: var(--gray-50); }
.on-white { --ground: var(--white); }

@media (max-width: 759px) {
  :root { --nav-h: 68px; }
}


/* ---------------------------------------------------------------- 3. Base */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 8px); }
body {
  margin: 0; background: var(--white); color: var(--ink);
  font-family: var(--font); font-size: var(--fs-body); line-height: 1.55; letter-spacing: -.005em;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
h1, h2, h3, h4, p, ol, ul, dl, dd, figure, blockquote, pre { margin: 0; }
ol, ul { padding: 0; list-style: none; }
h1, h2, h3, h4 { font-weight: 600; text-wrap: balance; }
p { text-wrap: pretty; }
b, strong { font-weight: 600; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
table { border-collapse: collapse; border-spacing: 0; }
th { font-weight: 600; text-align: left; }
s { text-decoration-thickness: 2px; }
.num, .mock { font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }

.nowrap { white-space: nowrap; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 16px; top: -100px; z-index: 300;
  background: var(--black); color: var(--white); padding: 10px 16px; border-radius: var(--r-2);
  font-weight: 600; text-decoration: none;
}
.ro__scroll:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.skip:focus { top: 16px; outline: 2px solid var(--amber-400); outline-offset: 3px; }

/* Elements that exist only for the motion layer. Shown by the MOTION half under .motion. */
.actor, .handoffs, .pile, .noise, .tools__next, .fu__pre, .svh-probe { display: none; }
.pf { display: none; }
.svh-probe { position: fixed; top: 0; left: 0; width: 1px; height: 100svh; visibility: hidden; pointer-events: none; }
.motion .svh-probe { display: block; }

/* Controls that need JavaScript are hidden without it; their no-JS stand-ins hide with it. */
.no-js [data-motion-toggle], .no-js .wd-toggle { display: none; }
html:not(.no-js) .wd-details { display: none; }
.mock--email .wd--good { display: none; }
.mock--email.is-good .wd--bad { display: none; }
.mock--email.is-good .wd--good { display: grid; }

/* screenshots */
html.test *, html.test *::before, html.test *::after { transition: none !important; animation: none !important; }


/* ---------------------------------------------------------------- 4. Layout primitives */

.frame { width: 100%; max-width: var(--frame-w); margin-inline: auto; padding-inline: var(--gutter); }
.wrap  { width: 100%; max-width: calc(var(--read-w) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.scene { position: relative; background: var(--ground); color: var(--ink); }
.stage { position: relative; background: var(--ground); color: var(--ink); }
.read  { position: relative; padding-block: var(--section-y); background: var(--ground); color: var(--ink); }
.read--gray { --ground: var(--gray-50); }
.read__head { max-width: 760px; margin-bottom: var(--s-8); }
.read__head .lead { margin-top: var(--s-4); }


/* ---------------------------------------------------------------- 5. Type roles */

h1 { font-size: var(--fs-display); line-height: 1.02; letter-spacing: -.035em; }
h2 { font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -.03em; }
h3 { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -.015em; }
h4 { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -.015em; }
.lead { font-size: var(--fs-lead); line-height: 1.45; letter-spacing: -.01em; color: var(--ink-2); }
.small { font-size: var(--fs-small); line-height: 1.5; letter-spacing: 0; }
.eyebrow, .role, .label, .ix__k, .fam, .tray__k, .kpi__k, .tile__s, .sop__k {
  font-size: var(--fs-label); line-height: 1.3; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}


/* ---------------------------------------------------------------- 6. Components */

/* 6.1 B mark */
.bmark { width: 28px; height: 28px; flex: none; }
.bmark__tile { fill: var(--black); }
.bmark__b { fill: var(--white); }
.bmark__line { fill: var(--amber-400); }
.on-black .bmark__tile { fill: var(--white); }
.on-black .bmark__b { fill: var(--black); }

/* 6.2 Nav pill: always white, always black ink */
.nav {
  --ink: var(--black); --ink-2: var(--gray-600); --focus: var(--black);
  position: fixed; top: 12px; left: 50%; z-index: 200; transform: translateX(-50%);
  width: min(1120px, 100% - 32px); height: 56px;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: 0 8px 0 16px;
  background: var(--white); color: var(--black);
  border: 1px solid var(--gray-200); border-radius: var(--r-pill); box-shadow: var(--sh-1);
}
.nav__brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; font-size: 1rem; letter-spacing: -.01em; border-radius: var(--r-2); }
.nav__links { display: flex; align-items: center; gap: 4px; }
.nav__links a:not(.btn) {
  padding: 8px 12px; border-radius: var(--r-pill); text-decoration: none; font-size: .9375rem; color: var(--gray-700);
  transition: background-color var(--d-micro) var(--ease-out), color var(--d-micro) var(--ease-out);
}
@media (hover: hover) { .nav__links a:not(.btn):hover { background: var(--gray-100); color: var(--black); } }
.nav__links .btn { margin-left: 8px; border-radius: var(--r-pill); }

.menu { display: none; position: relative; }
.menu > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px;
  border-radius: var(--r-pill); border: 1px solid var(--gray-300); font-weight: 600; font-size: .9375rem;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary::before {
  content: ""; width: 14px; height: 8px;
  border-top: 2px solid currentColor; border-bottom: 2px solid currentColor;
}
.menu[open] > summary { background: var(--gray-100); }
.menu__panel {
  position: absolute; right: -8px; top: calc(100% + 14px); width: min(320px, calc(100vw - 32px));
  display: grid; gap: 2px; padding: 8px;
  background: var(--white); border: 1px solid var(--gray-200); border-radius: 16px; box-shadow: var(--sh-2);
}
.menu__panel a:not(.btn) { padding: 12px 14px; border-radius: var(--r-2); text-decoration: none; font-size: 1rem; }
@media (hover: hover) { .menu__panel a:not(.btn):hover { background: var(--gray-100); } }
.menu__panel .btn { margin-top: 6px; }
.menu__panel .motion-toggle { margin-top: 6px; justify-self: start; }

@media (max-width: 959px) {
  .nav__links { display: none; }
  .menu { display: block; }
}
@media (max-width: 759px) {
  .nav { height: 52px; }
}

/* 6.3 Buttons and links */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 20px; border-radius: var(--r-2); border: 1px solid transparent;
  font-weight: 600; font-size: 1rem; letter-spacing: -.005em; line-height: 1; text-decoration: none; white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--d-micro) var(--ease-out), transform var(--d-micro) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--black); color: var(--white); }
@media (hover: hover) { .btn--primary:hover { background: var(--gray-800); } }
.on-black .btn--primary { background: var(--white); color: var(--black); }
@media (hover: hover) { .on-black .btn--primary:hover { background: var(--gray-100); } }
.btn--secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
@media (hover: hover) { .btn--secondary:hover { background: var(--gray-100); } }
@media (hover: hover) { .on-black .btn--secondary:hover { background: var(--gray-800); } }
.btn--sm { height: 40px; padding: 0 16px; font-size: .9375rem; }
.btn--lg { height: 56px; padding: 0 28px; font-size: 1.0625rem; }
.link { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; font-weight: 600; }
@media (hover: hover) { .link:hover { text-decoration-thickness: 2px; } }

.motion-toggle {
  height: 36px; padding: 0 14px; border-radius: var(--r-pill);
  border: 1px solid var(--gray-300); background: var(--white); color: var(--gray-700);
  font-size: .875rem; font-weight: 600; cursor: pointer;
}
@media (hover: hover) { .motion-toggle:hover { background: var(--gray-100); } }

/* 6.4 Status chips (no amber) */
.status {
  display: inline-flex; align-items: center; white-space: nowrap;
  font-size: 12px; line-height: 1.2; font-weight: 600; letter-spacing: 0;
  padding: 2px 10px; border-radius: var(--r-pill); border: 1px solid transparent;
}
.status--daily { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.status--use   { border-color: var(--ink); color: var(--ink); }
.status--live  { border-color: var(--gray-400); color: var(--ink-2); }
.on-black .status--live { border-color: var(--gray-500); }
.status--built { border: 1px dashed var(--ink-2); color: var(--ink-2); }

/* 6.5 Sample chip, tags, stamp */
.chip-sample {
  display: inline-flex; align-items: center; flex: none; white-space: nowrap;
  font-size: 11px; line-height: 1.2; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  padding: 3px 6px; border-radius: var(--r-1);
  background: var(--gray-100); border: 1px solid var(--gray-300); color: var(--gray-700);
}
.tag-person, .tag-supplier {
  display: inline-block; white-space: nowrap;
  background: var(--gray-100); color: var(--gray-900); font-weight: 600;
  border-radius: var(--r-1); padding: 2px 6px; line-height: 1.3;
}

/* 6.6 Honeycomb edge */
.honey { position: absolute; left: 0; width: 100%; height: 14px; z-index: 3; pointer-events: none; }
.honey path { fill: var(--white); }
.honey--down { bottom: -14px; }
.honey--up { top: -14px; }

/* 6.7 Local lines: the amber 2px line, drawn (static is the finished state) */
.lline { display: block; height: 2px; background: var(--amber-400); }

/* 6.8 Icon */
.ico { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }


/* ---------------------------------------------------------------- 7. Mock frame */

/* The card surface is a pseudo-element behind the bar and body, so the caption can sit
   under the card on any ground while the card keeps one shadow. */
figure.mock {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto;
  color: var(--gray-900); --ink: var(--gray-900); --ink-2: var(--gray-600); --ink-3: var(--gray-500); --rule: var(--gray-200); --focus: var(--black);
}
figure.mock::before {
  content: ""; grid-row: 1 / 3; grid-column: 1; background: var(--white);
  border-radius: var(--r-3); box-shadow: var(--sh-2);
}
.on-black figure.mock::before { box-shadow: none; }
.mock__bar, .mock__body { grid-column: 1; position: relative; z-index: 1; min-width: 0; }
.mock__bar {
  grid-row: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  padding: 11px 16px; border-bottom: 1px solid var(--gray-200);
  font-size: 12px; line-height: 1.35; letter-spacing: 0;
}
.mock__title { font-weight: 600; color: var(--gray-900); min-width: 0; }
.mock__stamp { margin-left: auto; color: var(--gray-500); white-space: nowrap; }
.mock__body {
  grid-row: 2; container-type: inline-size; padding: 16px;
  border-radius: 0 0 var(--r-3) var(--r-3);
  font-size: 12px; line-height: 1.35; letter-spacing: 0;
}
.mock__body > * { font-size: clamp(11px, 1.5cqw, 14px); }
figure.mock > figcaption {
  grid-row: 3; margin-top: 12px; font-size: 13px; line-height: 1.45; letter-spacing: 0;
  color: var(--gray-600);
}
.on-black figure.mock > figcaption { color: var(--gray-400); }

/* A mock drawn directly on black (the night's report list): outlined, not filled. */
figure.mock--onblack { color: var(--white); --ink: var(--white); --ink-2: var(--gray-300); --ink-3: var(--gray-400); --rule: var(--gray-800); --focus: var(--amber-400); }
figure.mock--onblack::before { background: transparent; border: 1px solid var(--gray-800); }
.mock--onblack .mock__bar { border-bottom-color: var(--gray-800); }
.mock--onblack .mock__title { color: var(--gray-300); }

/* Buttons inside mocks are spans: no focus, no hover, default cursor. */
.ans, .ph__btn, .btn-span { cursor: default; user-select: none; }


/* ---------------------------------------------------------------- 8. Hero */

.scene--hero { padding: calc(var(--nav-h) + clamp(32px, 5vw, 72px)) 0 clamp(64px, 8vw, 112px); z-index: 2; }
.scene--hero > .stage { position: static; }
.hero {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr auto;
  column-gap: 24px; row-gap: var(--s-6); align-items: start;
}
.hero__text { grid-column: 1 / span 6; grid-row: 1 / span 2; padding-top: 0; }
.hero .eyebrow { color: var(--ink-3); max-width: 30em; margin-bottom: var(--s-5); }
.hero h1 { max-width: 7em; }
.hero__caps { margin-top: var(--s-6); max-width: 31rem; }
.hero .cap--1 { display: grid; gap: var(--s-4); }
.hero .lead { color: var(--gray-900); }
.hero .safety { color: var(--ink-2); font-size: var(--fs-body); }
.hero .proof { color: var(--ink-3); font-size: var(--fs-small); }
.hero :is(.proof, .lead) a { color: var(--gray-900); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5); margin-top: var(--s-6); }
.mock--huddle { grid-column: 7 / span 6; grid-row: 1; width: 100%; max-width: 680px; justify-self: end; margin-top: var(--s-2); }
.hero__after { grid-column: 7 / span 6; grid-row: 2; justify-self: end; width: 100%; max-width: 680px; color: var(--ink-2); font-size: var(--fs-body); display: grid; gap: 6px; }
.hero__after .fam { color: var(--ink-3); }
.hero__after .cap--5 { color: var(--gray-900); font-weight: 600; margin-top: 6px; }

/* The sheet */
.mock--huddle .mock__body { padding: 18px 18px 20px; }
.sheet { display: grid; grid-template-columns: 1fr 1.05fr .95fr; gap: 0; }
.sheet__col { display: grid; align-content: start; gap: 18px; padding: 0 16px; border-left: 1px solid var(--gray-200); }
.sheet__col:first-child { padding-left: 0; border-left: 0; }
.sheet__col:last-child { padding-right: 0; }
.blk { display: grid; gap: 6px; }
.blk__h {
  font-size: max(11px, .82em); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--gray-600);
  padding-bottom: 6px; border-bottom: 1px solid var(--gray-200); margin-bottom: 2px;
}
.blk__h .num { color: var(--gray-900); }
.it { color: var(--gray-700); line-height: 1.4; }
.it b { color: var(--gray-900); }
.it__t { color: var(--gray-500); }
.it--jamie { position: relative; padding-left: 10px; }
.it--jamie::before { content: ""; position: absolute; left: 0; top: 1px; bottom: 1px; width: 2px; background: var(--amber-400); }
.it--more { color: var(--gray-500); }
.act { font-weight: 600; color: var(--gray-900); }
.act::before { content: "→ "; color: var(--gray-500); font-weight: 400; }
.mo, .wk { display: flex; justify-content: space-between; gap: 8px; color: var(--gray-700); }
.mo .num, .wk .num { color: var(--gray-900); font-weight: 600; }
.mo--total { padding-top: 6px; border-top: 1px solid var(--gray-200); color: var(--gray-900); font-weight: 600; }
.wk span:first-child { min-width: 0; }
.sum { display: grid; gap: 6px; margin-top: 6px; justify-items: end; }
.sum__rule { width: 100%; }
.sum__total { font-size: 2.15em; font-weight: 600; letter-spacing: -.03em; line-height: 1.05; color: var(--black); }
.sum__ok { display: inline-flex; align-items: center; gap: 5px; color: var(--gray-600); font-weight: 600; }
.foot { color: var(--gray-600); font-size: .9em; line-height: 1.4; }

@media (max-width: 1099px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero__text, .mock--huddle, .hero__after { grid-column: 1; grid-row: auto; justify-self: stretch; max-width: none; }
  .hero__text { padding-top: 0; }
  .hero h1 { max-width: 10em; }
  .hero__caps { max-width: 36rem; }
  .mock--huddle { max-width: 760px; }
  .hero__after { max-width: 760px; }
}
@media (max-width: 759px) {
  .hero h1 { font-size: clamp(2.25rem, 9vw, 3rem); }
  .hero .eyebrow { margin-bottom: var(--s-4); }
  .hero__caps { margin-top: var(--s-5); }
  .hero__cta { margin-top: var(--s-6); gap: var(--s-4) var(--s-5); }
  .mock--huddle .mock__body { padding: 14px; }
  .sheet { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .sheet__col { padding: 0; border-left: 0; }
  .sheet__col--work { padding-top: 14px; border-top: 1px solid var(--gray-200); }
  .mock__bar { padding: 10px 14px; }
  .mock__stamp { margin-left: 0; width: 100%; }
}


/* ---------------------------------------------------------------- 9. Tools */

.scene--tools { --ground: var(--black); background: var(--black); color: var(--white); padding: calc(var(--s-10) + 14px) 0 var(--s-10); z-index: 1; }
.tools__head { max-width: 880px; }
.tools__head h2 { color: var(--white); }

.tools__index {
  display: flex; flex-wrap: wrap; gap: var(--s-5) var(--s-7);
  margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--gray-800);
}
.ix { display: grid; gap: 10px; align-content: start; }
.ix__k { color: var(--gray-400); }
.ix__pain { font-size: .8125rem; color: var(--gray-500); margin: -4px 0 2px; }
.motion .ix__pain { display: none; }
.ix ul { display: flex; flex-wrap: wrap; gap: 8px; }
.ix a {
  display: inline-flex; align-items: center; height: 34px; padding: 0 14px;
  border: 1px solid var(--gray-700); border-radius: var(--r-pill);
  color: var(--white); text-decoration: none; font-size: .9375rem; font-weight: 600;
  transition: background-color var(--d-micro) var(--ease-out), border-color var(--d-micro) var(--ease-out);
}
@media (hover: hover) { .ix a:hover { background: var(--gray-900); border-color: var(--gray-500); } }

.track { display: grid; gap: var(--s-10); margin-top: var(--s-9); }
.panel { display: grid; gap: var(--s-9); padding-top: var(--s-8); border-top: 1px solid var(--gray-800); scroll-margin-top: calc(var(--nav-h) + 16px); }
.panel__a, .panel__b {
  display: grid; grid-template-columns: minmax(0, 36fr) minmax(0, 64fr); column-gap: clamp(32px, 4.5vw, 72px); align-items: start;
}
.panel__b { scroll-margin-top: calc(var(--nav-h) + 16px); }
.panel__copy { display: grid; gap: var(--s-4); max-width: 30rem; }
.panel:not(.panel--exp) .panel__a .panel__copy .before,
.panel--exp .panel__b .panel__copy .before { order: 3; }
.panel__title { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.panel__title h3, .panel__title h4 { color: var(--white); }
.panel__copy h4 { color: var(--white); }
.before { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--gray-400); font-size: var(--fs-small); }
.before__k { font-weight: 600; }
.tool-ref { color: var(--gray-200); font-weight: 500; }
.strike {
  text-decoration-line: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--amber-400);
  color: var(--gray-400);
}
.job { color: var(--white); font-size: var(--fs-lead); line-height: 1.4; letter-spacing: -.01em; }
.line { color: var(--gray-300); }

@media (max-width: 1099px) {
  .panel__a, .panel__b { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-7); }
  .panel__copy { max-width: 40rem; }
}
@media (max-width: 759px) {
  .scene--tools { padding: calc(var(--s-9) + 14px) 0 var(--s-9); }
  .track { gap: var(--s-9); margin-top: var(--s-8); }
  .panel { gap: var(--s-8); padding-top: var(--s-7); }
  .tools__index { flex-direction: column; gap: var(--s-5); }
  /* the pinned index's chip size (D101): Front desk has three chips and wraps to three rows on a narrow phone,
     and at this size the index stays as tall as it was with two */
  .ix { gap: 6px; }
  .ix ul { gap: 6px; }
  .ix a { height: 30px; padding: 0 12px; font-size: .875rem; }
  .mock__body { padding: 14px; }
}

/* 9.1 Follow-ups */
.fu__head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--gray-200); }
.fu__post { font-weight: 600; font-size: 1.15em; color: var(--gray-900); letter-spacing: -.01em; }
.fu__post .num { color: var(--black); }
.fu__list { display: grid; gap: 8px; }
.card {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who ans" "line ans" "out out";
  align-items: center; column-gap: 16px; row-gap: 4px;
  min-height: 72px; padding: 12px 14px; border: 1px solid var(--gray-200); border-radius: 10px; background: var(--white);
}
.card__who { grid-area: who; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.card__meta { color: var(--gray-500); }
.card__line { grid-area: line; color: var(--gray-800); }
.card__ans { grid-area: ans; display: flex; gap: 6px; align-self: center; }
.ans {
  display: inline-flex; align-items: center; height: 2.3em; padding: 0 .8em; white-space: nowrap;
  border: 1px solid var(--gray-300); border-radius: 6px; color: var(--gray-700); font-weight: 600; font-size: .92em;
}
.ans.is-on { background: var(--black); border-color: var(--black); color: var(--white); }
.card__out { grid-area: out; display: flex; align-items: center; gap: 6px; margin-top: 6px; padding-top: 8px; border-top: 1px dashed var(--gray-200); color: var(--gray-900); font-weight: 600; }
.card--done { background: var(--gray-50); }
.fu__end { margin-top: 12px; color: var(--gray-500); text-align: center; }

@container (max-width: 560px) {
  .card { grid-template-columns: minmax(0, 1fr); grid-template-areas: "who" "line" "ans" "out"; }
  .card__ans { flex-wrap: wrap; margin-top: 6px; }
}

/* 9.2 Treatment Plan Coordinator */
.board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.bcol { display: grid; align-content: start; gap: 8px; padding: 10px; background: var(--gray-50); border-radius: 10px; min-height: 100%; }
.bcol__h { display: flex; justify-content: space-between; align-items: center; font-weight: 600; color: var(--gray-700); padding: 2px 2px 4px; }
.bcol__h .num {
  display: inline-grid; place-items: center; min-width: 1.7em; height: 1.7em; padding: 0 .4em;
  border-radius: var(--r-pill); background: var(--white); border: 1px solid var(--gray-200); color: var(--gray-900); font-size: .9em;
}
.pcard { display: grid; gap: 4px; padding: 10px; background: var(--white); border: 1px solid var(--gray-200); border-radius: 8px; }
.pcard__who { margin-bottom: 2px; }
.pcard__t { color: var(--gray-800); font-weight: 600; }
.pcard__d { color: var(--gray-500); }
.pcard__n { color: var(--gray-700); }
.pchip {
  justify-self: start; margin-top: 2px; padding: 3px 7px; border-radius: var(--r-1);
  border: 1px solid var(--gray-300); color: var(--gray-800); font-weight: 600; font-size: .92em; line-height: 1.3;
}
.pcard--fin { background: var(--gray-50); }
.pcard--fin, .pcard--fin :is(.pcard__t, .pcard__d, .tag-person) { color: var(--gray-600); }

@container (max-width: 560px) {
  .board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.mock--agree { max-width: 600px; }
.agr { display: grid; gap: 14px; padding: 6px 6px 4px; }
.agr__k { font-weight: 600; font-size: 1.35em; letter-spacing: -.015em; color: var(--black); }
.agr__list { display: grid; }
.agr__r { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--gray-200); }
.agr__r dt { color: var(--gray-700); }
.agr__r dd { color: var(--gray-900); font-weight: 600; text-align: right; white-space: nowrap; }
.agr__r--by dd { white-space: normal; font-weight: 400; }
.agr__r--gap { border-bottom: 2px solid var(--amber-400); }
.agr__r--gap dt, .agr__r--gap dd { color: var(--black); font-weight: 600; font-size: 1.1em; }
.agr__foot { color: var(--gray-600); }
.agr__foot .num { color: var(--gray-900); font-weight: 600; }

/* 9.3 BeeProfitable */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.kpi { display: grid; align-content: space-between; gap: 14px; min-height: 7.5em; padding: 14px; border: 1px solid var(--gray-200); border-radius: 10px; }
.kpi__k { color: var(--gray-500); font-size: max(11px, .8em); }
.kpi__v { font-size: 2.1em; font-weight: 600; letter-spacing: -.03em; line-height: 1; color: var(--black); }
.kpi--spare { grid-column: 1 / -1; align-content: start; gap: 10px; }
.tiles > .kpi:nth-child(5) { grid-column: span 2; }
.sb { display: grid; grid-template-columns: 7em minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.sb__k { color: var(--gray-700); font-weight: 600; }
.sb__bar { height: 10px; border-radius: 2px; background: linear-gradient(var(--gray-900), var(--gray-900)) no-repeat 0 0 / calc(var(--v) * 1%) 100%, var(--gray-100); }
.sb--n { --v: 8; }
.sb--r { --v: 28; }
.sb--p { --v: 7; }
.sb__v {
  display: inline-grid; place-items: center; width: 6.9em; height: 2.9em;
  font-weight: 600; font-size: 1em; color: var(--gray-900); border-radius: 6px; background: var(--gray-50);
}
.sb--r .sb__v { box-shadow: inset 0 0 0 2px var(--amber-400); background: var(--white); }

@container (max-width: 560px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi__v { font-size: 1.8em; }
  .sb { grid-template-columns: 6.5em minmax(0, 1fr) auto; gap: 8px; }
  .sb__v { width: 4.6em; height: 2.4em; }
}

/* 9.4 Master roster */
.swipe { display: none; }
.ro__scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.ro { width: 100%; min-width: 620px; table-layout: fixed; }
.ro th, .ro td { padding: 7px 8px; vertical-align: top; border: 1px solid var(--gray-200); }
.ro thead th { font-weight: 600; color: var(--gray-500); font-size: max(11px, .85em); letter-spacing: .02em; border-top: 0; background: var(--white); }
.ro thead th:first-child { border-left: 0; }
.ro tr > :last-child { border-right: 0; }
.ro tbody th[scope="row"] { width: 5.6em; padding-left: 0; color: var(--gray-500); font-weight: 600; border-left: 0; white-space: nowrap; }
.ro thead th:first-child { width: 5.6em; }
.ro__band th {
  padding: 8px 8px 6px; background: var(--gray-50); color: var(--gray-900); font-weight: 600;
  font-size: .82em; letter-spacing: .06em; text-transform: uppercase; border-left: 0;
}
.ro td { color: var(--gray-600); line-height: 1.4; height: 3.6em; }
/* the provider and the assistant are marked, not told apart by a line break: a wrapped name stays one person */
.ro__p { display: block; }
.ro__p { font-weight: 600; color: var(--gray-900); }
.ro td.is-empty { background: repeating-linear-gradient(135deg, var(--gray-50) 0 6px, var(--white) 6px 12px); }
.ro td.is-swap { background: var(--gray-100); }
.ro td.is-open { vertical-align: middle; text-align: center; color: var(--gray-900); font-weight: 600; background: var(--white); outline: 1px dashed var(--gray-500); outline-offset: -5px; }
.ro__note { margin-top: 12px; color: var(--gray-600); }
.ro__note::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px; vertical-align: -.05em; background: var(--gray-100); border: 1px solid var(--gray-300); border-radius: 2px; }

@media (max-width: 759px) {
  .swipe { display: block; margin-bottom: 8px; color: var(--gray-500); font-weight: 600; }
  .swipe::after { content: " →"; }
}

/* 9.5 Stock and ordering */
.mock--stock { max-width: 540px; }
.mock--stock .mock__body { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; padding: 32px 16px; background: var(--gray-50); }
.phone {
  position: relative; width: min(300px, 100%); aspect-ratio: 300 / 620;
  padding: 10px; border-radius: 40px; background: var(--gray-900);
  box-shadow: 0 0 0 1px var(--gray-700), 0 18px 40px rgba(0,0,0,.18);
}
.phone::before { content: ""; position: absolute; top: 18px; left: 50%; width: 76px; height: 20px; transform: translateX(-50%); border-radius: var(--r-pill); background: var(--gray-900); z-index: 2; }
.phone__screen {
  height: 100%; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 10px;
  padding: 48px 16px 26px; position: relative; border-radius: 30px; background: var(--white);
  font-size: 12px; line-height: 1.35;
}
.ph__h { font-weight: 600; font-size: 13px; color: var(--black); padding-bottom: 8px; border-bottom: 1px solid var(--gray-200); }
.ph__card { display: grid; gap: 6px; padding: 12px; border: 1px solid var(--gray-200); border-radius: 12px; }
.glove { width: 100%; height: 92px; margin: 4px 0 6px; fill: none; stroke: var(--gray-700); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ph__item { font-weight: 600; color: var(--gray-900); }
.ph__sup { font-size: 11px; }
.ph__card .tag-supplier { white-space: normal; max-width: 100%; justify-self: start; }
.ph__rows { display: grid; }
.ph__rows > div { display: flex; justify-content: space-between; padding: 6px 2px; border-bottom: 1px solid var(--gray-100); }
.ph__rows dt { color: var(--gray-600); }
.ph__rows dd { font-weight: 600; color: var(--gray-900); }
.ph__order dt, .ph__order dd { color: var(--black); font-weight: 600; }
.ph__eq { text-align: center; font-weight: 600; font-size: 15px; letter-spacing: .01em; color: var(--black); }
.ph__rule { width: 72%; margin: -8px auto 0; }
.ph__btn {
  display: grid; place-items: center; height: 38px; border-radius: 10px; font-weight: 600; font-size: 13px;
  background: var(--white); color: var(--black); border: 1px solid var(--black);
}
.ph__btn.is-on { background: var(--black); color: var(--white); box-shadow: inset 0 2px 0 rgba(255,255,255,.08); transform: translateY(1px); }
.ph__foot { color: var(--gray-500); font-size: 11px; line-height: 1.4; }
.phone__screen::after { content: ""; position: absolute; left: 50%; bottom: 8px; width: 96px; height: 4px; transform: translateX(-50%); border-radius: var(--r-pill); background: var(--gray-900); }
/* nothing on the screen ever shrinks; on a narrow phone the handset grows to what it holds (engineering-3-6) */
.phone__screen > * { flex-shrink: 0; }
@media (max-width: 359px) { .phone { aspect-ratio: auto; } .phone__screen { height: auto; min-height: 509px; } }

/* 9.6 Expenses and payroll */
.pl { width: 100%; table-layout: fixed; }
.pl thead th:nth-child(2) { width: 7.5em; }
.drill__scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.drill__scroll.is-scrolls { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
.drill__scroll.is-scrolls.at-end { -webkit-mask-image: none; mask-image: none; }
.pl th, .pl td { padding: 9px 10px; border-bottom: 1px solid var(--gray-200); text-align: right; vertical-align: middle; }
.pl thead th { color: var(--gray-500); font-size: .82em; letter-spacing: .05em; text-transform: uppercase; padding-top: 2px; }
.pl th[scope="row"], .pl thead th:first-child { text-align: left; padding-left: 0; }
.pl tbody th[scope="row"] { font-weight: 600; color: var(--gray-900); }
.pl td { color: var(--gray-700); }
.pl tr > :last-child { padding-right: 0; }
.pl thead th:last-child { width: 8.5em; }
.pl > tbody > tr:first-child > th, .pl > tbody > tr:first-child > td { color: var(--black); font-weight: 600; }
.pl__sup th[scope="row"] { padding-left: 20px; position: relative; }
.pl__sup th[scope="row"]::before {
  content: ""; position: absolute; left: 4px; top: 50%; width: 0; height: 0; margin-top: -2px;
  border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--gray-700);
}
.pl__sup td { color: var(--gray-900); font-weight: 600; }
.pl__sup .tag-supplier { white-space: normal; }
.pl__sup th, .pl__sup td { border-bottom: 0; background: var(--gray-50); }
.pl__sup th { border-radius: 8px 0 0 0; }
.pl__sup td:last-child { border-radius: 0 8px 0 0; }
.pl__drill > td { padding: 2px 12px 14px 20px; background: var(--gray-50); text-align: left; border-radius: 0 0 8px 8px; }
.drill { width: 100%; font-size: .92em; }
.drill th, .drill td { padding: 6px 6px; border-bottom: 1px solid var(--gray-200); text-align: left; white-space: nowrap; }
.drill .num, .drill .r { text-align: right; }
.drill thead th { color: var(--gray-500); font-weight: 600; font-size: .9em; }
.drill td.os { color: var(--gray-500); padding-left: 14px; }
.drill thead th.os { padding-left: 14px; }
.drill tr > :first-child { padding-left: 0; }
.drill tfoot th, .drill tfoot td { border-bottom: 0; font-weight: 600; color: var(--gray-900); padding-top: 8px; }
.drill tfoot th { padding-left: 0; }
.drill tfoot .drill__net { box-shadow: inset 0 2px 0 var(--amber-400); }
.drill__ok { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 8px; color: var(--gray-700); font-weight: 600; }
.btn-span {
  margin-left: auto; display: inline-flex; align-items: center; height: 2.2em; padding: 0 .8em;
  border: 1px solid var(--gray-300); border-radius: 6px; background: var(--white); color: var(--gray-800); font-weight: 600;
}

@container (max-width: 520px) {
  .pl__drill > td { padding-left: 8px; padding-right: 8px; }
  .drill th, .drill td { padding: 5px 3px; white-space: normal; }
  .drill .num { white-space: nowrap; }
  .drill td.os, .drill thead th.os { padding-left: 6px; }
  /* in a pinned or carded scene, narrow: Net, GST and Gross always fit; the other side waits for a wider
     screen (the static page keeps every word, and its scroller says it scrolls) */
  .motion .scene--tools:not(.unpinned) .drill :is(td.os, thead th.os) { display: none; }
  .pl th, .pl td { padding-left: 6px; padding-right: 6px; }
}
@container (max-width: 400px) {
  .drill { min-width: 0; font-size: .86em; }
  .drill th, .drill td { padding: 4px 2px; }
  .pl thead th:nth-child(2) { width: 6.5em; }
  .pl thead th:last-child { width: 5.2em; }
}

.mock--pay { max-width: 640px; }
.pay { display: grid; gap: 14px; padding: 4px 4px 2px; }
.pay__h { font-weight: 600; color: var(--gray-900); }
.split { display: flex; gap: 8px; height: 2.9em; }
.split > span { display: flex; align-items: center; padding: 0 12px; border-radius: 6px; font-weight: 600; white-space: nowrap; overflow: hidden; }
.split__a { flex: 50 1 0; background: var(--gray-900); color: var(--white); }
.split__b { flex: 30 1 0; background: var(--gray-200); color: var(--gray-900); }
.pay__cost { color: var(--gray-700); }
.pay__cost .num { color: var(--gray-900); font-weight: 600; }
.pay__fig { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 4px; }
.pay__fig > div { display: grid; gap: 4px; padding: 12px; border: 1px solid var(--gray-200); border-radius: 8px; }
.pay__fig dt { color: var(--gray-500); font-size: .85em; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.pay__fig dd { font-size: 1.7em; font-weight: 600; letter-spacing: -.02em; color: var(--black); line-height: 1.1; }
.pay__rule { margin-top: -4px; }
.pay__un { color: var(--gray-500); font-weight: 600; }


/* ---------------------------------------------------------------- 10. Night */

.scene--night { --ground: var(--black); background: var(--black); color: var(--white); padding: var(--s-10) 0; }
.night {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: var(--s-8);
  align-items: start;
}
.night__text { grid-column: 1 / span 5; grid-row: 1 / span 2; }
.night__text h2 { color: var(--white); }
.night__caps { display: grid; gap: var(--s-5); margin-top: var(--s-7); color: var(--gray-300); max-width: 32rem; }
.night__caps .cap--s5 { color: var(--white); font-weight: 600; }
.night__caps .cap--s2 { color: var(--white); }

.mock--gate { grid-column: 7 / span 6; grid-row: 1; }
.night__email { grid-column: 7 / span 6; grid-row: 2; display: grid; gap: var(--s-4); justify-items: start; }
.night__email .mock--email { width: 100%; }

.gate { display: grid; grid-template-columns: 2px minmax(0, 1fr); column-gap: 20px; padding: 4px 4px 4px 8px; }
.gate__line { grid-column: 1; grid-row: 1 / span 2; height: auto; width: 2px; }
.gate__list { grid-column: 2; display: grid; }
.rrow {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--gray-700); color: var(--white); font-weight: 600;
}
.rrow__s { color: var(--gray-400); font-weight: 400; }
.tray { grid-column: 2; display: grid; gap: 8px; margin-top: 18px; padding: 12px 14px 14px; border: 1px dashed var(--gray-700); border-radius: 10px; }
.tray__k { color: var(--gray-400); font-size: .8em; }
.rrow--held { color: var(--gray-400); padding: 9px 12px; border: 1px dashed var(--gray-700); border-radius: 6px; }
.rrow--held .rrow__s { color: var(--gray-300); }
.tray__l { color: var(--gray-300); }

.wd { display: grid; gap: 10px; padding: 2px; }
.wd__head { display: grid; gap: 2px; color: var(--gray-600); padding-bottom: 10px; border-bottom: 1px solid var(--gray-200); }
.wd__head > div { display: flex; gap: 6px; }
.wd__head dt { color: var(--gray-500); min-width: 3.4em; }
.wd__head dd { color: var(--gray-900); }
.wd__subj { font-weight: 600; font-size: 1.2em; letter-spacing: -.01em; line-height: 1.3; color: var(--black); }
.wd__body { color: var(--gray-700); line-height: 1.5; }
.wd__none { color: var(--gray-700); font-weight: 600; }
.wd-details { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--gray-300); }
.wd-details > summary { cursor: pointer; font-weight: 600; color: var(--gray-900); width: fit-content; border-radius: 4px; }
.wd-details[open] > summary { margin-bottom: 8px; }
.wd--good .wd__none { padding: 1.5em 0; }

.rail {
  grid-column: 1 / -1; grid-row: 3; position: relative;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--s-5); padding-top: 18px;
}
.rail::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--gray-800); }
.rail__k { position: relative; color: var(--gray-300); font-size: var(--fs-small); }
.rail__k::before { content: ""; position: absolute; left: 0; top: -22px; width: 1px; height: 9px; background: var(--gray-600); }
.rail__t { display: block; color: var(--white); font-weight: 600; font-variant-numeric: tabular-nums; }
.rail__k--am, .rail__k--am .rail__t { color: var(--gray-400); }
.rail__k--am::after { content: ""; position: absolute; left: -2.5px; top: -21px; width: 6px; height: 6px; border-radius: 50%; background: var(--white); }

@media (max-width: 1099px) {
  .night { grid-template-columns: minmax(0, 1fr); }
  .night__text, .mock--gate, .night__email, .rail { grid-column: 1; grid-row: auto; }
  .night__email .mock--email { max-width: 600px; }
}
@media (max-width: 759px) {
  .scene--night { padding: var(--s-9) 0; }
  .night { row-gap: var(--s-7); }
  .rail { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-5); column-gap: 16px; padding-top: 0; }
  .rail::before { display: none; }
  .rail__k { padding-top: 14px; border-top: 1px solid var(--gray-800); }
  .rail__k::before { display: none; }
  .rail__k--am::after { top: -3.5px; left: 0; }
}


/* ---------------------------------------------------------------- 11. Platform */

.scene--platform { --ground: var(--black); background: var(--black); color: var(--white); }
.platform { padding-top: var(--s-10); padding-bottom: calc(var(--s-10) + 14px); display: grid; justify-items: center; text-align: center; }
.platform h2 { color: var(--white); max-width: 14em; }
.fused { width: 100%; max-width: 964px; margin-top: var(--s-8); }
.grid12 {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  background: var(--gray-700); border: 1px solid var(--gray-700); border-radius: var(--r-3); overflow: hidden;
  text-align: left;
}
.tile {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr auto; column-gap: 8px; row-gap: 6px;
  min-height: 116px; padding: 13px 14px 12px; background: var(--black);
}
.tile__n { grid-column: 1; color: var(--white); font-weight: 600; font-size: 14px; line-height: 1.25; letter-spacing: -.005em; }
.tile .status { grid-column: 2; grid-row: 1; align-self: start; font-size: 10.5px; padding: 1px 7px; }
.tile__l { grid-column: 1 / -1; color: var(--gray-300); font-size: 12.5px; line-height: 1.4; }
.tile__s { grid-column: 1 / -1; color: var(--gray-400); font-size: 10.5px; }
.tile__s::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border: 1px solid var(--gray-500); border-radius: 1px; vertical-align: .05em; }
.fused > figcaption { margin-top: 14px; color: var(--gray-400); font-size: 13px; }
.sub { max-width: 34rem; color: var(--gray-300); font-size: var(--fs-lead); line-height: 1.45; letter-spacing: -.01em; }
.platform__sop { width: 100%; max-width: 760px; margin-top: var(--s-10); display: grid; justify-items: center; gap: var(--s-7); }
.sub--2 { color: var(--white); }
.mock--sop { width: 100%; text-align: left; }
.sop { display: grid; grid-template-columns: minmax(0, 1fr) 13em; gap: 22px; }
.sop__main { display: grid; gap: 10px; align-content: start; }
.ask {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--gray-300); border-radius: 10px;
  color: var(--gray-900); font-weight: 600;
}
.ask::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 2px; background: var(--gray-900); }
.ans1 { margin-top: 6px; font-size: 1.55em; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; color: var(--black); }
.sop__steps, .proc__steps { list-style: decimal; padding-left: 1.3em; display: grid; gap: 4px; }
.sop__steps { color: var(--gray-900); }
.src__rule { width: 100%; max-width: 20em; }
.src { color: var(--gray-600); margin-top: -4px; }
.query { margin-top: 4px; }
.query > summary { cursor: pointer; width: fit-content; font-weight: 600; color: var(--gray-900); border-radius: 4px; }
.proc { margin-top: 8px; padding: 10px 12px; border-radius: 8px; border-left: 2px solid var(--gray-900); background: var(--gray-50); color: var(--gray-800); display: grid; gap: 6px; }
.proc__h { font-weight: 600; color: var(--gray-900); }
.proc__u { color: var(--gray-600); font-size: .9em; }
.sop__note { padding-left: 18px; border-left: 1px solid var(--gray-200); color: var(--gray-600); line-height: 1.5; display: grid; gap: 6px; align-content: start; }
.sop__k { color: var(--gray-500); }
.sop__q { color: var(--gray-900); font-weight: 600; }

.dawn {
  position: relative; background: var(--white); color: var(--black);
  --ground: var(--white); --ink: var(--black); --focus: var(--black);
  padding: clamp(80px, 11vw, 152px) var(--gutter) clamp(24px, 4vw, 48px); text-align: center;
}
.dawn__line { font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -.03em; font-weight: 600; max-width: 14em; margin-inline: auto; text-wrap: balance; }

@media (max-width: 899px) {
  .grid12 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 759px) {
  .platform { padding-top: var(--s-9); text-align: left; justify-items: stretch; }
  .platform__sop { margin-top: var(--s-9); justify-items: stretch; gap: var(--s-6); }
  .tile { min-height: 80px; padding: 11px 12px; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; align-content: start; }
  .tile__s { margin-top: 2px; }
  .tile .status { grid-column: 1; grid-row: auto; justify-self: start; }
  .tile__n { font-size: 13.5px; }
  .tile__l { font-size: 12px; }
  .sop { grid-template-columns: minmax(0, 1fr); }
  .sop__note { padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--gray-200); }
}


/* ---------------------------------------------------------------- 12. Touch: small controls get a 44px hit area */

@media (pointer: coarse) {
  :is(.footer__links a, .query > summary, .wd-details > summary, .ix a, .motion-toggle, .hero .lead a, .nav__brand) { position: relative; }
  :is(.footer__links a, .query > summary, .wd-details > summary, .ix a, .motion-toggle, .hero .lead a, .nav__brand)::before { content: ""; position: absolute; left: -6px; right: -6px; top: 50%; height: 44px; transform: translateY(-50%); }
}


/* ---------------------------------------------------------------- 14. People */

.scene--people { padding: var(--s-10) 0; }
.people {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 2fr) minmax(0, 5fr); column-gap: 24px; row-gap: var(--s-8);
  align-items: start;
}
.people h2 { grid-column: 1 / -1; max-width: 13em; }
.people__builds { grid-column: 1; grid-row: 2; }
.people__line { grid-column: 1 / 3; grid-row: 2; justify-self: stretch; width: auto; height: 18px; margin: 0 -14px 0 4.6rem; overflow: visible; }
.people__line path { fill: none; stroke: var(--amber-400); stroke-width: 2px; stroke-linecap: butt; vector-effect: non-scaling-stroke; }
.people__desk { grid-column: 3; grid-row: 2; }
.people__builds, .people__desk { display: grid; gap: var(--s-3); }
.role { color: var(--ink-3); height: 18px; display: flex; align-items: center; }
.people h3 { margin-top: var(--s-3); }
.people .title { color: var(--ink-3); font-weight: 600; margin-top: -4px; }
.bio, .desk { color: var(--gray-600); margin-top: var(--s-2); }
.mock--mini { margin-top: var(--s-5); max-width: 420px; }
.mock--mini .mock__bar { padding: 9px 12px; }
.mock--mini .mock__body { padding: 12px; }
.mini { display: grid; gap: 6px; }
.mini__h { font-size: .82em; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--gray-500); margin-top: 4px; }
.mini__h:first-child { margin-top: 0; }
.mini__r { color: var(--gray-700); }
.mini__r b { color: var(--gray-900); }
.mini__r--more { color: var(--gray-500); }
.mini__r--marked { text-decoration: underline; text-decoration-color: var(--amber-400); text-decoration-thickness: 2px; text-underline-offset: 4px; }

@media (max-width: 1099px) {
  .people { grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr); column-gap: 16px; }
}
@media (max-width: 759px) {
  .scene--people { padding: var(--s-9) 0; }
  .people { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-6); }
  .people__builds, .people__desk { grid-column: 1; grid-row: auto; }
  .people__line { display: none; }
  .people__desk { position: relative; padding-top: 64px; }
  .people__desk::before { content: ""; position: absolute; left: 0; top: 0; width: 2px; height: 48px; background: var(--amber-400); }
}


/* ---------------------------------------------------------------- 15. How we work, and questions */

.read--gray { background: var(--gray-50); }
.steps { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-4); }
.steps::before { content: ""; position: absolute; left: 24px; right: 24px; top: 43px; height: 2px; background: var(--amber-400); }
.step {
  position: relative; display: grid; align-content: start; gap: var(--s-3);
  padding: var(--s-5) 20px; background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-3);
}
.step h3 { font-size: 1.1875rem; line-height: 1.25; }
.step__n {
  display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: var(--s-3);
  border-radius: 50%; background: var(--black); color: var(--white); font-weight: 600; font-size: 1rem;
}
.step > p:last-child { color: var(--gray-600); }

.faq { max-width: 820px; border-top: 1px solid var(--gray-300); }
.faq__q { border-bottom: 1px solid var(--gray-300); }
.faq__q { padding: 22px 0; }
.faq__q > h3 { font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -.015em; }
.faq__q > p { max-width: 40em; margin-top: 8px; color: var(--gray-600); font-size: var(--fs-body); line-height: 1.5; }

@media (max-width: 1099px) {
  .steps { grid-template-columns: minmax(0, 1fr); max-width: 40rem; }
  .steps::before { left: 43px; right: auto; top: 24px; bottom: 24px; width: 2px; height: auto; }
}


/* ---------------------------------------------------------------- 16. Closing */

.scene--closing { padding: clamp(112px, 16vw, 200px) 0; }
.closing { display: grid; justify-items: center; text-align: center; gap: var(--s-5); }
.closing h2 { font-size: clamp(2.5rem, 1.4rem + 4.2vw, 4.75rem); line-height: 1.04; letter-spacing: -.035em; max-width: 12em; margin-top: var(--s-2); }
.closing h2 .ul {
  background: linear-gradient(var(--amber-400), var(--amber-400)) no-repeat 0 100% / 100% 2px;
  padding-bottom: .1em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.closing__body { text-wrap: balance; max-width: 34rem; color: var(--gray-600); font-size: var(--fs-lead); line-height: 1.45; letter-spacing: -.01em; margin-top: var(--s-3); }
.closing .btn { margin-top: var(--s-5); }


/* ---------------------------------------------------------------- 17. Contact and form */

.read--contact { border-top: 1px solid var(--gray-200); }
.contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); align-items: start; }
.contact__intro h2 { max-width: 9em; }
.contact__intro .lead { margin-top: var(--s-4); max-width: 24em; }
.contact-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
.contact-form > * { grid-column: 1 / -1; }
.contact-form > .field--half { grid-column: auto; }
.field { display: grid; gap: 8px; }
.field label { font-weight: 600; font-size: 15px; }
.opt { color: var(--gray-500); font-weight: 400; }
.field input, .field textarea, .field select {
  width: 100%; min-height: 48px; padding: 0 14px; font-size: 16px; line-height: 1.4;
  border: 1px solid var(--gray-300); border-radius: var(--r-2); background: var(--white); color: var(--black);
  transition: border-color var(--d-micro) var(--ease-out);
}
.field textarea { padding: 12px 14px; resize: vertical; min-height: 140px; }
.field input, .field textarea, .field select { scroll-margin-top: 40px; }
.field select { appearance: none; background: var(--white) url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%278%27%3E%3Cpath d=%27M1 1l5 5 5-5%27 fill=%27none%27 stroke=%27%23111827%27 stroke-width=%272%27/%3E%3C/svg%3E") no-repeat right 14px center; padding-right: 40px; }
@media (hover: hover) { .field input:hover, .field textarea:hover, .field select:hover { border-color: var(--gray-500); } }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { outline: 2px solid var(--black); outline-offset: 3px; border-color: var(--black); }
.contact-form .btn { justify-self: start; min-width: 140px; }
.notice { color: var(--gray-600); font-size: var(--fs-small); }
.notice a { color: var(--black); font-weight: 600; text-underline-offset: 3px; }
.status-line {
  padding: 12px 14px; border-left: 2px solid var(--black); background: var(--gray-50);
  color: var(--gray-900); font-size: var(--fs-small);
}
.status-line:empty { display: none; }
.field-error { padding-left: 10px; border-left: 2px solid var(--black); color: var(--gray-900); font-size: 14px; }

@media (max-width: 899px) {
  .contact { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
}
@media (max-width: 479px) { .contact-form > .field--half { grid-column: 1 / -1; } }


/* ---------------------------------------------------------------- 18. Footer */

.footer { background: var(--gray-50); color: var(--black); border-top: 1px solid var(--gray-200); padding: var(--s-8) 0 var(--s-6); font-size: var(--fs-small); }
.footer__in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-6) var(--s-8); }
.footer__brand { display: grid; gap: 6px; color: var(--gray-600); }
.footer__name { display: flex; align-items: center; gap: 10px; color: var(--black); font-weight: 600; font-size: 1rem; }
.footer__links { display: flex; flex-wrap: wrap; align-content: start; gap: 6px 22px; }
.footer__links a { text-decoration: none; color: var(--gray-700); font-weight: 600; }
@media (hover: hover) { .footer__links a:hover { color: var(--black); text-decoration: underline; text-underline-offset: 3px; } }
.footer__notes { grid-column: 1 / -1; display: grid; gap: 4px; padding-top: var(--s-5); border-top: 1px solid var(--gray-200); color: var(--gray-600); }
.footer__base { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); color: var(--gray-500); }

@media (max-width: 759px) {
  .footer__in { grid-template-columns: minmax(0, 1fr); }
}


/* ---------------------------------------------------------------- 19. Privacy page */

.page-privacy main { padding: calc(var(--nav-h) + var(--s-9)) 0 var(--s-10); }
.legal { max-width: 720px; }
.legal h1 { font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -.03em; }
.legal p { margin-top: var(--s-5); color: var(--gray-600); font-size: var(--fs-lead); line-height: 1.5; letter-spacing: -.01em; }
.legal p:first-of-type { color: var(--black); }
.legal h2 { margin-top: var(--s-7); font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -.015em; }
.legal .back { display: inline-block; margin-top: var(--s-8); }


/* ---------------------------------------------------------------- 20. Forced colours and print */

@media (forced-colors: active) {
  .lline, .it--jamie::before, .steps::before, .people__desk::before { background: CanvasText; forced-color-adjust: none; }
  .status, .chip-sample, .tag-person, .tag-supplier { border: 1px solid CanvasText; }
}

@media print {
  @page { margin: 14mm; }
  body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .nav, .skip, .motion-toggle, .wd-toggle, .actor, .handoffs, .svh-probe { display: none !important; }
  .rv { opacity: 1 !important; transform: none !important; }
  .scene--hero { padding-top: 24px; }
  figure.mock, .step, .faq__q, .tile, .card, .panel__a, .panel__b { break-inside: avoid; }
  .panel { break-before: auto; }
  .ro__scroll { overflow: visible; }
  a[href^="#"] { text-decoration: none; }
}


/* =====================================================================================
   MOTION
   Second half. Every rule here is scoped under .motion (or .motion.lite) and is written in
   the motion phase from SPEC sections 3 and 5. Nothing above may depend on it.
   ===================================================================================== */

/* Elements that only the motion layer creates or shows. */
.platform__prev, .clock, .ul-l { display: none; }

@property --p { syntax: '<number>'; inherits: true; initial-value: 0; }

/* Print uses the static rules (SPEC 5.9): every motion rule below is for screens only. */
@media screen {

/* ---------------------------------------------------------------- M1. Layers and the beat */

.motion {
  & .actor {
    display: block; position: fixed; left: 0; top: 0; z-index: 201; width: 1px; height: 1px;
    background: var(--amber-400); transform-origin: 0 0; will-change: transform; pointer-events: none; opacity: 0;
  }
  & .handoffs { display: block; position: fixed; inset: 0; z-index: 150; pointer-events: none; overflow: clip; }
  & .ho { position: absolute; left: 0; top: 0; margin: 0; opacity: 0; transform-origin: 0 0; }
  & .ho.is-on { opacity: 1; will-change: transform; }
  & .ho.is-lifted { box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 6px 14px rgba(0,0,0,.18); }
  & .ho--swap { display: grid; place-items: center; }
  & .ho__a, & .ho__b { grid-area: 1 / 1; white-space: nowrap; }
  & .ho__b { opacity: 0; }
  & .is-handed, & .is-awaited { opacity: 0 !important; }
  & .ho-fade { transition: opacity var(--d-small) var(--ease-out); }
  /* a faded control takes no pointer, its 44px hit area included (scenes.js writes .is-ghost; D41) */
  & .is-ghost, & .is-ghost *, & .is-ghost::before, & .is-ghost *::before { pointer-events: none !important; }

  /* The beat (SPEC 3.0.1): rise at --in (48px, out3, over --rd), exit at --out (24px up, smooth). */
  & .scene:not(.unpinned) :is(
      .hero .cap, .hero .fam, .tools__next,
      .night h2, .night .cap, .tray__l, .tray__k,
      .platform h2, .platform__prev, .fused > figcaption, .sub, .ask, .ans1, .sop__steps, .query, .sop__note, .dawn__line,
      .closing__body, .closing .btn,
      .panel__a .job, .panel__b .panel__copy > *, .fu__end, .agr__k, .agr__r, .agr__foot,
      .ph__rows > div, .ph__foot, .pay__h, .pay__cost, .pay__fig > div, .pay__un) {
    --bi: clamp(0, (var(--p) - var(--in, -1)) / var(--rd, .06), 1);
    --bo: clamp(0, (var(--p) - var(--out, 9)) / var(--od, .05), 1);
    --br: calc((1 - var(--bi)) * (1 - var(--bi)) * (1 - var(--bi)));
    --bx: calc(var(--bo) * var(--bo) * (3 - 2 * var(--bo)));
    opacity: calc(1 - var(--br) - var(--bx));
    transform: translate3d(0, calc(var(--br) * var(--rise, 48px) - var(--bx) * var(--ox, 24px)), 0);
  }
  /* will-change only on what is in flight, never on resting text (SPEC 5.8) */
  & .scene.is-active :is(.pc.fly, .fr.fly) { will-change: transform, opacity; }
  @media (min-width: 760px) { & .scene--platform.is-active .tile { will-change: transform, opacity; } }
  /* counters: the true figure stays in the DOM; the counting digits are drawn over it */
  & [data-v] { position: relative; -webkit-text-fill-color: transparent; }
  & [data-v]::after { content: attr(data-v) / ""; position: absolute; inset: 0; -webkit-text-fill-color: currentColor; white-space: nowrap; }
  & .sum__total[data-v]::after { text-align: right; }
}

/* ---------------------------------------------------------------- M2. Pinned scenes */

.motion .scene:not(.unpinned) {
  &:not([data-phone="flow"]) {
    height: var(--h, max(100lvh, calc(var(--len) * 1svh))); padding: 0;
    & > .stage { position: sticky; top: 0; height: 100lvh; overflow: clip; }
    & > .stage > .frame { position: relative; height: 100svh; }
  }
  @media (min-width: 760px) {
    &[data-phone="flow"] {
      height: var(--h, max(100lvh, calc(var(--len) * 1svh))); padding: 0;
      & > .stage { position: sticky; top: 0; height: 100lvh; overflow: clip; }
      & > .stage > .frame { position: relative; height: 100svh; }
    }
  }
}
.motion .scene--hero { --len: 220; }
.motion .scene--night { --len: 250; }
.motion .scene--platform { --len: 245; }
.motion .scene--people { --len: 140; }
.motion .scene--closing { --len: 150; }
@media (max-width: 759px) {
  .motion .scene--hero { --len: 170; }
  .motion .scene--night { --len: 210; }
  .motion .scene--platform { --len: 180; }
  .motion .scene--closing { --len: 140; }
}
@media (min-width: 760px) {
  .motion .scene--tools:not(.unpinned) { --h: calc(200lvh + 480svh); margin-top: -100lvh; }
}
/* Match cuts (SPEC 3.4, 3.5): the incoming scene overlaps the outgoing scene's last screen, so the
   outgoing p = 1 and the incoming p = 0 are the same scroll position and the same frame: a cut, not a
   screen of scrolling. Until the cut the incoming stage is hidden (.pre-cut, written by the engine). */
@media (min-width: 760px) { .motion .scene--tools:not(.unpinned) + .scene--night:not(.unpinned) { margin-top: -100lvh; background: none; z-index: 2; } }
.motion .scene--night:not(.unpinned) + .scene--platform:not(.unpinned) { margin-top: -100lvh; background: none; z-index: 3; }
/* the engine keeps the reader's place itself (measure restores it): the browser's scroll anchoring would
   move it again whenever measure() swaps a scene between its pinned and static layouts */
html.motion { overflow-anchor: none; }
/* hidden by opacity, never by visibility: the stage stays in the accessibility tree and in the Tab order */
.motion .scene > .stage.pre-cut { opacity: 0; pointer-events: none !important; }
.motion .scene[data-seam="match"]:not(.unpinned) { pointer-events: none; }
.motion .scene[data-seam="match"]:not(.unpinned) > .stage { pointer-events: auto; }
.motion .scene--platform:not(.unpinned) + .scene--people { padding-top: clamp(32px, 4vw, 56px); }
.motion .scene--people:not(.unpinned) + .read { padding-top: clamp(32px, 4vw, 56px); }

/* ---------------------------------------------------------------- M3. Hero */

.motion .scene--hero:not(.unpinned) {
  & > .stage.stage { overflow: visible; }
  & .frame.hero {
    --top: clamp(80px, 14.5svh, 176px);
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 0;
    grid-template-rows: var(--top) auto auto auto auto auto minmax(0, 1fr);
    align-content: stretch; padding-top: 0; overflow: clip;
  }
  & .hero__text { display: contents; }
  & .eyebrow { grid-area: 2 / 1 / 3 / 7; margin-bottom: 2.2svh; }
  & h1 { grid-area: 3 / 1 / 4 / 7; font-size: min(var(--fs-display), 10.4svh); max-width: 7.2em; position: relative; z-index: 2; }
  & .hero__caps { grid-area: 4 / 1 / 5 / 7; margin-top: 3svh; position: relative; z-index: 2; }
  & .hero__after { grid-area: 4 / 1 / 5 / 7; justify-self: start; width: 100%; margin-top: 3svh; position: relative; z-index: 2; max-width: 31rem; }
  & .hero__after .cap {
    display: block; position: absolute; left: 0; right: 0; top: 0;
    font-size: var(--fs-lead); line-height: 1.45; letter-spacing: -.01em; color: var(--gray-900);
  }
  & .hero__after .cap--5 { font-weight: 600; }
  /* swaps cut, as in night (D26): the outgoing line is fully gone (.03) when the next one starts */
  & .hero__caps > .cap, & .hero__after :is(.cap, .fam) { --od: .03; --ox: 12px; }
  & .cap--1 { --out: .17; }
  /* Sound familiar? stays while three pains swap under it, then the promise (round 4) */
  & .hero__after .fam { display: block; position: absolute; left: 0; top: 0; --in: .20; --out: .71; color: var(--gray-500); }
  & .hero__after :is(.cap--2, .cap--3, .cap--4) { top: calc(var(--fs-label) * 1.3 + 10px); }
  & .cap--2 { --in: .20; --out: .35; }
  & .cap--3 { --in: .38; --out: .53; }
  & .cap--4 { --in: .56; --out: .71; }
  & .cap--5 { --in: .74; }
  & .hero__cta { grid-area: 5 / 1 / 6 / 7; margin-top: 3svh; position: relative; z-index: 2; opacity: calc(1 - clamp(0, (var(--p) - .08) / .06, 1)); }

  /* the sheet: centred under the nav, a fixed box so its pieces can use cqw and cqh */
  & .mock--huddle {
    grid-area: 1 / 7 / -1 / 13; align-self: center; justify-self: end; margin-top: var(--nav-h);
    width: 100%; max-width: 680px; position: relative;
  }
  /* layers (SPEC 3.1): surface < fragments < pieces < title bar, chip and caption. The figure is
     not a stacking context, so the frame's noise (z 1) sits between the surface and the body. */
  & .mock--huddle .mock__bar { z-index: 3; background: var(--white); border-radius: var(--r-3) var(--r-3) 0 0; }
  & .mock--huddle .mock__body { container-type: size; height: max(var(--bmin, 0px), clamp(300px, 43svh, 400px)); z-index: 2; }
  & .mock--huddle figcaption { position: relative; z-index: 3; }
  /* the finished sheet closes up to its content (--close, D45) */
  & .mock--huddle { --ce: clamp(0, (var(--p) - .86) / .08, 1); --cee: calc(var(--ce) * var(--ce) * (3 - 2 * var(--ce))); }
  & .mock--huddle::before { margin-bottom: calc(var(--close, 0px) * var(--cee)); }
  & .mock--huddle figcaption { transform: translate3d(0, calc(var(--close, 0px) * var(--cee) * -1), 0); }

  /* pieces at their chaos offsets on the first frame; the scan writes --t on pieces in flight */
  & .pc {
    --e: calc(var(--t, 0) * var(--t, 0) * (3 - 2 * var(--t, 0)));
    transform:
      translate(calc(var(--mx, 0) * 1cqw * (1 - var(--e))), calc(var(--my, 0) * var(--uy, 1cqh) * (1 - var(--e))))
      rotate(calc(var(--mr, 0) * var(--rf, 1) * 1deg * (1 - var(--e))))
      scale(calc(1 + (var(--ms, 1) - 1) * (1 - var(--e))));
    opacity: calc(.55 + .45 * var(--e));
  }
  & .pc.is-set { transform: none; opacity: 1; }

  /* the local lines: the sum rule takes over from the actor at .86 and settles to ink */
  & .sum__rule { position: relative; opacity: clamp(0, (var(--p) - .8599) * 100000, 1); }
  & .sum__rule::after { content: ""; position: absolute; inset: 0; background: var(--gray-900); opacity: clamp(0, (var(--p) - .86) / .06, 1); }
  & .sum__ok { opacity: clamp(0, (var(--p) - .82) / .04, 1); }
  & .sum__total { display: block; height: 1.1em; min-width: 7.2ch; text-align: right; opacity: clamp(0, (var(--p) - .75) / .02, 1); }
  & .it--jamie::before { transform: scaleY(clamp(0, (var(--p) - .86) / .06, 1)); transform-origin: 50% 0; }

  /* the noise: recognisable paperwork, three depths */
  & .noise { display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
  & .d { position: absolute; inset: 0; transform: translate3d(0, calc(var(--dd) * -1px * (1 - (1 - clamp(0, (var(--p) - .05) / .13, 1)) * (1 - clamp(0, (var(--p) - .05) / .13, 1)) * (1 - clamp(0, (var(--p) - .05) / .13, 1)))), 0); }
  & .d1 { --dd: 16; } & .d2 { --dd: 32; } & .d3 { --dd: 48; }
  & .fr {
    position: absolute; left: var(--fx); top: var(--fy); white-space: nowrap;
    font-size: 12px; line-height: 1.3; letter-spacing: 0; color: var(--gray-700);
    transform: translate3d(var(--px, 0px), calc(var(--py, 0px) + var(--t, 0) * 16px), 0) rotate(calc(var(--fr, 0) * var(--rf, 1) * 1deg)) scale(calc(1 - .4 * var(--t, 0)));
    opacity: calc(.4 * (1 - var(--t, 0)));
  }
  & .fr.is-set { opacity: 0; visibility: hidden; }
}
.motion.lite .scene--hero:not(.unpinned) { --rf: 0; & .d2, & .d3 { display: none; } & .d1 { --dd: 24; } }

@media (max-width: 1099px) {
  .motion .scene--hero:not(.unpinned) {
    & .frame.hero { grid-template-columns: minmax(0, 1fr); grid-template-rows: calc(var(--nav-h) + 3svh) auto auto auto auto auto minmax(0, 1fr); }
    & :is(.eyebrow, h1, .hero__caps, .hero__after, .hero__cta) { grid-column: 1; }
    & h1 { font-size: min(clamp(2.25rem, 1rem + 4.6vw, 4rem), 8svh); max-width: 11em; }
    & .eyebrow { margin-bottom: 1.4svh; }
    & .hero__caps, & .hero__after { margin-top: 2svh; max-width: 36rem; }
    & .hero__cta { margin-top: 2svh; }
    & .mock--huddle { grid-area: 7 / 1 / 8 / 2; align-self: start; justify-self: stretch; margin-top: 2.4svh; max-width: none;
      transform: translate3d(0, calc(var(--lift, 0px) * -1 * clamp(0, (var(--p) - .14) / .08, 1)), 0); }
    & .cap--1 { --out: .09; }
    & .hero__caps > .cap, & .hero__after :is(.cap, .fam) { --ox: 0px; --rise: 16px; }
    /* the sheet is sized by its content here, so nothing can hang out of the card; offsets in cqw */
    & .mock--huddle .mock__body { height: auto; container-type: inline-size; --uy: 1cqw; }
    /* the three blocks a front desk reads first: calls due, lab work, work booked */
    & .sheet { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 0; }
    & .sheet__col:nth-child(2) { order: -1; }
    & .sheet__col:nth-child(1) > .blk:nth-child(2), & .sheet__col:nth-child(2) > .blk:nth-child(n+2), & .act { display: none; }
    & .sheet__col { padding: 0 14px; border-left: 1px solid var(--gray-200); }
    & .sheet__col:nth-child(2) { padding-left: 0; border-left: 0; }
  }
}
/* D106 review: the hero lines got shorter, so on a tablet the block keeps its old height (about 10em, measured) and
   the sheet's caption stays below the paperwork placed along the bottom edge, as before */
@media (min-width: 760px) and (max-width: 1099px) {
  .motion .scene--hero:not(.unpinned) .hero__caps { min-height: 10em; }
}
/* portrait tablet: larger sheet type, group centred once the sheet has risen (--hpad, D45) */
@media (min-width: 760px) and (max-width: 1099px) and (min-height: 900px) {
  .motion .scene--hero:not(.unpinned) {
    & .frame.hero { transform: translate3d(0, calc(var(--hpad, 0px) * clamp(0, (var(--p) - .14) / .08, 1)), 0); }   /* moves down as the sheet rises */
    & .mock--huddle .mock__body > * { font-size: clamp(12px, 1.9cqw, 15px); }
    & .mock--huddle .mock__body { padding: 22px 22px 24px; }
    & .mock--huddle .mock__bar { font-size: 14px; }
  }
}
@media (max-width: 759px) {
  .motion .scene--hero:not(.unpinned) {
    & .frame.hero { grid-template-rows: calc(var(--nav-h) + 2svh) auto auto auto auto auto minmax(0, 1fr); }
    & h1 { font-size: min(clamp(1.75rem, 9vw, 3rem), 6.4svh); }
    & .eyebrow, & .hero__after .fam { font-size: 11px; margin-bottom: 1svh; }
    & .hero__after :is(.cap--2, .cap--3, .cap--4) { top: 19px; }   /* the label's line, tight: a 320x640 hero stays pinned */
    & .hero__caps, & .hero__after { margin-top: 1.3svh; }
    & .cap--1 { gap: 1svh; }
    & .lead, & .hero__after .cap { font-size: min(var(--fs-lead), 2.15svh); }
    & .safety, & .proof { font-size: min(.9375rem, 1.9svh); }
    & .hero__cta { margin-top: 1.8svh; gap: 14px; flex-wrap: nowrap; }
    & .hero__cta .btn { height: 48px; padding: 0 14px; font-size: .9375rem; }
    & .hero__cta .link { font-size: .9375rem; white-space: nowrap; }
    & .mock--huddle { margin-top: 1.2svh; }
    & .mock--huddle .mock__stamp { display: none; }
    & .mock--huddle .mock__body { padding: 12px 14px; }
    & .mock--huddle figcaption { margin-top: 6px; font-size: 12px; }
    /* three blocks only: calls due, lab work, work booked */
    & .sheet { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    & .sheet__col, & .sheet__col:nth-child(2) { gap: 10px; padding: 0; border-left: 0; }
    & .sheet__col--work { padding-top: 10px; }
    & .blk { gap: 3px; }
    & .blk--work { grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: end; }
    & .blk--work .blk__h, & .blk--work .foot { grid-column: 1 / -1; }
    & .blk--work .wk { grid-column: 1; }
    & .blk--work .sum { grid-column: 2; grid-row: 2 / span 3; margin: 0; align-self: end; }
    & .blk--work .sum__total { font-size: 1.6em; }
    & .blk--work .foot { display: none; }
    /* the paperwork a phone has room for: it arrives in the band the sheet's rise opens (bottom to top),
       then each piece is drawn up towards the sheet and gone, one after another, while the scan runs */
    & .noise:not(.no-pf) .pf {
      display: block; position: absolute; white-space: nowrap; left: var(--x); top: calc(var(--bt, 9999px) + var(--row) * 46px);
      font-size: 12px; line-height: 1.3;
      --a: clamp(0, (var(--p) - .22) / .06, 1);
      --g: clamp(0, (var(--p) - .32 - var(--k) * .07) / .10, 1); --ge: calc(var(--g) * var(--g) * (3 - 2 * var(--g)));
      opacity: calc(.55 * var(--a) * (1 - var(--ge)));
      transform: translate3d(0, calc((1 - var(--a)) * 28px - var(--ge) * (var(--row) * 46px + 10px)), 0) rotate(calc(var(--r) * (1 - var(--ge)) * 1deg)) scale(calc(1 - .45 * var(--ge)));
    }
    & .pf1 { --x: 4%; --row: 0; --k: 0; --r: -3; }
    & .pf2 { --x: 76%; --row: 0; --k: 2; --r: 4; }
    & .pf3 { --x: 6%; --row: 1; --k: 1; --r: 2; }
    & .pf4 { --x: 55%; --row: 1; --k: 3; --r: -4; }
  }
}
@media (max-width: 759px) and (max-height: 680px) {
  .motion .scene--hero:not(.unpinned) {
    & .frame.hero { grid-template-rows: calc(var(--nav-h) + 1svh) auto auto auto auto auto minmax(0, 1fr); }
    & .eyebrow { margin-bottom: 0.5svh; }
    & .hero__caps, & .hero__after { margin-top: 1svh; }
    & .mock--huddle { margin-top: 1svh; }
  }
  .tools__index { margin-top: var(--s-5); padding-top: var(--s-4); gap: var(--s-4); }
  .track { margin-top: var(--s-5) !important; }
  .panel { padding-top: var(--s-5) !important; }
}

/* ---------------------------------------------------------------- M4. Tools: the track */

@media (min-width: 760px) {
  .motion .scene--tools:not(.unpinned) {
    & .frame.tools {
      /* during the curtain the frame rides up under the hero's edge, H2 first (D46) */
      transform: translate3d(0, max(0px, calc((1 - var(--c, 1)) * 100svh + 32px - var(--nav-h) - 3svh)), 0);
      --panel: min(76vw, 1040px);
      display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; row-gap: 2.6svh;
      padding-top: calc(var(--nav-h) + 3svh); padding-bottom: 3svh;
    }
    & .tools__head {
      grid-row: 1; max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 40px;
      opacity: calc(1 - clamp(0, (var(--ex, 0) - .44) / .06, 1)); transform: translate3d(0, calc(clamp(0, (var(--ex, 0) - .44) / .06, 1) * -24px), 0);
    }
    & .tools__head h2 { max-width: 15.5em; font-size: min(var(--fs-h2), 6svh); }
    & .tools__index {
      grid-row: 3; margin: 0; padding-top: 1.6svh; gap: 10px 28px;
      position: relative; z-index: 2;
      opacity: calc(1 - clamp(0, (var(--ex, 0) - .44) / .06, 1)); transform: translate3d(0, calc(clamp(0, (var(--ex, 0) - .44) / .06, 1) * -24px), 0);
    }
    & .ix { gap: 6px; }
    & .ix a { height: 30px; padding: 0 12px; font-size: .875rem; position: relative; }
    & .ix ul { gap: 6px; }
    & .ix a.is-current { border-color: var(--gray-500); }
    & .ix a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -7px; height: 2px; background: var(--white); transform: scaleX(0); transition: transform var(--d-small) var(--ease-out); }
    & .ix a.is-current::after { transform: scaleX(1); }
    & .track {
      /* the neighbours peek about 8vw at any width (a wide screen widens the gap, not the peek) */
      grid-row: 2; display: flex; align-items: flex-start; gap: max(4vw, (100vw - var(--panel)) / 2 - 8vw); margin: 0; width: max-content; position: relative;
      padding-top: var(--tpad, 0px);
      transform: translate3d(calc((100vw - var(--panel)) / 2 - var(--gutter) - max(0px, (100vw - var(--frame-w)) / 2)), 0, 0);
    }
    &.is-active .track { will-change: transform; }
    & .panel {
      flex: none; width: var(--panel); display: grid; position: relative;
      padding: 0; border: 0; gap: 0; align-items: start;
    }
    & .panel--exp { opacity: calc(1 - clamp(0, var(--ex, 0) / .3, 1)); }
    & .panel__b { align-self: stretch; align-items: stretch; }
    & .panel__b > .panel__copy { align-self: start; }
    & .panel__a, & .panel__b {
      grid-area: 1 / 1; position: relative; transform: scale(var(--fit, 1)); transform-origin: 50% 0;
      grid-template-columns: minmax(0, 36fr) minmax(0, 64fr); column-gap: clamp(28px, 3.4vw, 56px);
    }
    & .panel__copy { gap: 1.5svh; }
    & .panel__copy .job { font-size: min(var(--fs-lead), 2.6svh); }
    & .panel__copy .before { font-size: min(var(--fs-small), 1.9svh); }
    & .panel__copy .line { font-size: min(var(--fs-body), 2svh); }
    & .panel .mock__body { opacity: calc(.35 + .65 * var(--near, 1)); }
    & .panel .mock__body > * { font-size: clamp(10.5px, 1.45cqw, 13px); }
    @media (max-width: 1099px) {
      & .frame.tools { --panel: 88vw; }
      & .panel__a, & .panel__b { grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); column-gap: 24px; }
      & .panel__copy { gap: 1svh; }
      & .panel__copy .job { font-size: min(1.0625rem, 2.3svh); }
      & .panel__copy :is(.line, .before) { font-size: min(.875rem, 1.8svh); }
      & .panel__copy h3 { font-size: 1.25rem; }
      & .tools__head h2 { font-size: min(var(--fs-h2), 4.6svh); }
    }
    /* a laptop screen: the chrome and the copy get tighter so the panels keep their size */
    @media (max-height: 880px) {
      & .frame.tools { padding-top: calc(var(--nav-h) + 1.2svh); padding-bottom: 1.6svh; row-gap: 1.4svh; }
      & .tools__head h2 { font-size: min(var(--fs-h2), 4.4svh); max-width: none; }
      & .tools__index { padding-top: .8svh; }
      & .ix__k { display: none; }
      & .panel__copy { gap: 1.1svh; }
      & .panel--fu { --ch: calc(3.7em + 28px) !important; }
      & .panel--fu .card { padding: 8px 12px; }
      & .panel.panel--stock .glove { height: 30px; }
      & .panel.panel--stock .phone__screen { padding-top: 34px; gap: 3px; }
    }
    & .tools__next {
      display: block; position: absolute; pointer-events: none; left: var(--x, var(--gutter)); top: var(--y, calc(var(--nav-h) + 6svh)); width: var(--w, calc((100% - 2 * var(--gutter) - 11 * 24px) / 12 * 4 + 3 * 24px));
      margin: 0; color: var(--white); font-size: min(var(--fs-h2), 6svh); line-height: 1.08; letter-spacing: -.03em; font-weight: 600; text-wrap: balance;
      --p: var(--ex, 0); --in: .5; --rd: .1;
    }
  }
}
.motion .scene--tools:not(.unpinned) {
  & .panel, & .panel__a, & .panel__b { --p: var(--u, 0); }
  & .panel__b { --p: var(--u, 0); }
  & .pile { display: block; }
  /* the before-line's strike draws over u .85 to 1 (drawn in static) */
  & .strike {
    --sk: clamp(0, (var(--p) - var(--sa, .85)) / var(--sd, .15), 1);
    text-decoration: none; color: var(--gray-400);
    background: linear-gradient(var(--amber-400), var(--amber-400)) no-repeat 0 58% / calc(var(--sk) * 100%) 2px;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
  }
  & .lline { position: relative; }
  & .lline::after { content: ""; position: absolute; inset: 0; background: var(--gray-900); opacity: var(--settle, 0); }
}

/* ---------------------------------------------------------------- M5. Tools: the six panels (u) */

.motion .scene--tools:not(.unpinned) {

  /* 5.1 Follow-ups: rows straighten, duplicates fuse, rows become cards, one call is answered */
  & .panel--fu {
    --lt: calc(2.6em + 8px); --r1: calc(1.35em + 20px); --rh: calc(1.35em + 14px); --ch: calc(4.05em + 34px);
    & .fu { position: relative; }
    & .mock__body { overflow: clip; }
    & .fu__head { position: relative; height: 2.6em; margin-bottom: 8px; padding: 0; border: 0; }
    & .fu__head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gray-200); }
    & :is(.fu__pre, .fu__post, .pile__h) { position: absolute; left: 0; top: 0; margin: 0; line-height: 2.2em; white-space: nowrap; }
    /* the header is a different sentence, so it cuts (D26's rule): the old one is gone before the new one comes */
    & .fu__pre { display: block; font-weight: 600; font-size: 1.15em; letter-spacing: -.01em; color: var(--gray-900);
                 opacity: calc(clamp(0, (var(--p) - .42) / .1, 1) - clamp(0, (var(--p) - .76) / .04, 1)); }
    & .fu__post { line-height: 1.9em; opacity: clamp(0, (var(--p) - .80) / .06, 1); }
    & .mock__body { padding: 16px; }
    & .pile--fu { position: absolute; inset: 16px; z-index: 2; pointer-events: none; }
    & .pile__h { font-weight: 600; color: var(--gray-600); opacity: calc(1 - clamp(0, (var(--p) - .33) / .07, 1)); }
    & .pile__h::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 8px; border: 1.5px solid var(--gray-400); vertical-align: -.05em; }
    & .pr {
      --s: clamp(0, var(--p) / .25, 1);
      --m: clamp(0, (var(--p) - .22) / .18, 1); --mm: calc(var(--m) * var(--m) * (3 - 2 * var(--m)));
      position: absolute; left: 0; right: 0; top: calc(var(--lt) + var(--r1) + (var(--n) - 2) * var(--rh)); height: var(--rh);
      padding: 7px 13px 0; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      color: var(--gray-700); border-bottom: 1px solid var(--gray-200);
      transform: translate3d(calc(var(--ox, 0px) * (1 - var(--s)) + var(--dx, 0px) * var(--mm)), calc(var(--dy, 0px) * var(--mm)), 0) rotate(calc(var(--or, 0) * (1 - var(--s)) * 1deg));
      opacity: calc(1 - clamp(0, (var(--p) - .35) / .2, 1));
    }
    /* the five kept rows land word on word on their cards (D44) */
    & .pr.is-keep { overflow: visible; }
    & .pr__mt { display: inline-block; transform: translate3d(calc(var(--mdx, 0px) * var(--mm)), calc(var(--mdy, 0px) * var(--mm)), 0); }
    & .pr__sep { opacity: calc(1 - clamp(0, (var(--p) - .30) / .06, 1)); }
    @media (min-width: 760px) {
      /* a kept row drops to its line first, then slides along it, so it never crosses another word */
      & .pr.is-keep {
        --y: clamp(0, (var(--p) - .22) / .09, 1); --yy: calc(var(--y) * var(--y) * (3 - 2 * var(--y)));
        --x: clamp(0, (var(--p) - .30) / .10, 1); --xx: calc(var(--x) * var(--x) * (3 - 2 * var(--x)));
        transform: translate3d(calc(var(--ox, 0px) * (1 - var(--s)) + var(--dx, 0px) * var(--xx)), calc(var(--dy, 0px) * var(--yy)), 0) rotate(calc(var(--or, 0) * (1 - var(--s)) * 1deg));
        opacity: 1; border-bottom-color: rgb(229 231 235 / calc(1 - clamp(0, (var(--p) - .33) / .06, 1)));
      }
      & .pr6.is-keep { --y: clamp(0, (var(--p) - .33) / .07, 1); --x: clamp(0, (var(--p) - .37) / .05, 1); }
      & .pr.is-keep .pr__mt { transform: translate3d(calc(var(--mdx, 0px) * var(--xx)), calc(var(--mdy, 0px) * var(--yy)), 0); }
      /* the words swap in place, briefly, while the card's skin takes its time (.35 to .55) */
      & .pr.is-keep :is(.pr__nm, .pr__mt) { opacity: calc(1 - clamp(0, (var(--p) - .43) / .04, 1)); }
      & .card { --kt: clamp(0, (var(--p) - .43) / .04, 1); }
      & .pr.is-keep.is-wrap .pr__mt { opacity: calc(1 - clamp(0, (var(--p) - .38) / .04, 1)); }
    }
    & .pr1 { top: var(--lt); height: var(--r1); padding-top: 10px; }
    & .pr__slot { display: inline-block; width: 8.9em; height: 1em; }
    & .pr.is-dup { opacity: calc(1 - clamp(0, (var(--p) - .22) / .07, 1)); }   /* gone before it crosses another row */
    & .pr.is-notdue, & .pr7 {
      --dp: clamp(0, (var(--p) - var(--da, .22)) / .06, 1);
      transform: translate3d(calc(var(--ox, 0px) * (1 - var(--s))), calc(var(--dp) * 16px), 0) rotate(calc(var(--or, 0) * (1 - var(--s)) * 1deg)) scale(calc(1 - .4 * var(--dp)));
      opacity: calc(1 - var(--dp));
    }
    & .pr.is-notdue { color: var(--gray-500); }
    & .pr7 { --da: .30; }
    & .pr__note { margin-left: 10px; color: var(--gray-900); font-weight: 600; opacity: clamp(0, (var(--p) - .25) / .03, 1); }
    & .card {
      --k: clamp(0, (var(--p) - .35) / .2, 1);
      position: relative; z-index: 0; height: var(--ch); align-content: start; padding: 10px 12px; row-gap: 2px;
      border-color: transparent; background: none;
    }
    & .card::before { content: ""; position: absolute; inset: 0; z-index: -1; border: 1px solid var(--gray-200); border-radius: 10px; background: var(--white); opacity: var(--k); }
    & .card--done::before { background: var(--gray-50); }
    & .card > :not(.card__who) { opacity: var(--k); }
    & .card__meta, & .card:not(:first-child) .tag-person { opacity: var(--kt, var(--k)); }
    & .card__out { margin-top: 4px; padding-top: 5px; opacity: clamp(0, (var(--p) - .60) / .08, 1) !important; }
    & .ans.is-on {
      --on: clamp(0, (var(--p) - .585) * 1000, 1);
      position: relative; z-index: 0; background: none; border-color: var(--gray-300);
      color: rgb(calc(55 + 200 * var(--on)) calc(65 + 190 * var(--on)) calc(81 + 174 * var(--on)));
    }
    & .ans.is-on::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: 6px; background: var(--black); opacity: clamp(0, (var(--p) - .55) / .07, 1); }
    & .fu__list { --c: clamp(0, (var(--p) - .76) / .16, 1); --cs: calc(var(--c) * var(--c) * (3 - 2 * var(--c))); }
    /* the answered card folds to a slim slot, so Jamie's lifted tag waits in its own row, on nobody */
    & .card--done { transform: scaleY(calc(1 - .66 * var(--cs))); transform-origin: 50% 0; opacity: calc(1 - var(--c) * 1.4); }
    & .card:not(.card--done) { transform: translate3d(0, calc(var(--ch) * -.66 * var(--cs)), 0); }
    & .fu__end { position: absolute; left: 0; right: 0; top: calc(var(--lt) + .34 * var(--ch) + 4 * (var(--ch) + 8px) + 12px); margin: 0; --in: .84; --rd: .08; }
    & .strike { --sa: .85; }
  }

  /* 5.2 Treatment Plan Coordinator: sheets fly into columns, notes become chips, the agreement opens */
  & .panel--tpc {
    & .mock--tpc .mock__body { position: relative; }
    & .board { opacity: calc(1 - .7 * clamp(0, (var(--p) - .58) / .06, 1)); }
    & .pcard { position: relative; z-index: var(--z, 1); }
    & .pcard:not(.pcard--jamie) {
      --t: clamp(0, (var(--p) - .05 - var(--j) * .06) / .17, 1); --e: calc(var(--t) * var(--t) * (3 - 2 * var(--t)));
      transform: translate3d(calc(var(--sx) * (1 - var(--e))), calc(var(--sy) * (1 - var(--e))), 0) rotate(calc(var(--sr) * (1 - var(--e)) * 1deg));
      box-shadow: 0 6px 18px rgba(0,0,0, calc(.12 * (1 - var(--e))));
    }
    & .pcard--jamie { --k: clamp(0, var(--p) / .08, 1); border-color: transparent; background: none; z-index: 0; }
    & .pcard--jamie::before { content: ""; position: absolute; inset: 0; z-index: -1; border: 1px solid var(--gray-200); border-radius: 8px; background: var(--white); opacity: var(--k); }
    & .pcard--jamie > :not(.pcard__who) { opacity: var(--k); }
    & .pchip { opacity: clamp(0, (var(--p) - .47 - var(--ci, 0) * .02) / .06, 1); }
    & .pile--tpc { position: absolute; inset: 16px; z-index: 6; pointer-events: none; }
    & .note {
      --t: clamp(0, (var(--p) - .35 - var(--ci) * .02) / .13, 1); --e: calc(var(--t) * var(--t) * (3 - 2 * var(--t)));
      position: absolute; left: var(--nx); top: var(--ny); padding: 6px 9px; white-space: nowrap;
      background: var(--gray-100); border: 1px solid var(--gray-200); color: var(--gray-800); font-weight: 600; font-size: .95em;
      box-shadow: var(--sh-1);
      transform: translate3d(calc(var(--tx) * var(--e)), calc(var(--ty) * var(--e)), 0) rotate(calc(var(--nr) * (1 - var(--e)) * 1deg)) scale(calc(1 - .15 * var(--e)));
      opacity: calc(1 - clamp(0, (var(--p) - .45 - var(--ci) * .02) / .06, 1));
    }
    & .panel__a .job { --out: .56; --od: .04; }
    & .panel__b .panel__copy { padding-top: var(--btop, 0px); align-content: start; }
    & .panel__b .panel__copy > * { --in: .605; }
    & .panel__b .panel__copy > .line { --in: .625; }
    & .mock--agree {
      --mo: clamp(0, (var(--p) - .58) / .12, 1); --me: calc(var(--mo) * var(--mo) * (3 - 2 * var(--mo)));
      justify-self: stretch; width: 100%; max-width: none; margin-top: 0; grid-template-rows: auto minmax(0, 1fr) auto;   /* covers the board exactly */
      opacity: clamp(0, (var(--p) - .5799) * 100000, 1);
      clip-path: inset(calc(var(--ct, 0px) * (1 - var(--me))) calc(var(--cr, 0px) * (1 - var(--me))) calc(var(--cb, 0px) * (1 - var(--me))) calc(var(--cl, 0px) * (1 - var(--me))) round 12px);
    }
    & .mock--agree .mock__bar, & .mock--agree figcaption { opacity: clamp(0, (var(--p) - .66) / .04, 1); }
    & .agr { --rd: .04; gap: 8px; }
    & .agr__r { padding: 9px 0; }
    & .mock--agree .mock__body { display: grid; align-content: center; }   /* the agreement fills its card */
    & .mock--agree figcaption { position: relative; z-index: 2; background: var(--black); padding-bottom: 4px; }

    & .agr__k { --in: .70; }
    & .agr__r:nth-child(1) { --in: .72; } & .agr__r:nth-child(2) { --in: .745; } & .agr__r:nth-child(3) { --in: .77; }
    & .agr__r:nth-child(4) { --in: .795; } & .agr__r:nth-child(5) { --in: .82; } & .agr__r:nth-child(6) { --in: .845; }
    & .agr__foot { --in: .86; --rd: .06; }
    & .agr__r--gap { position: relative; border-bottom-color: var(--gray-200); }
    & .agr__r--gap::after, & .agr__r--gap::before { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; transform-origin: 0 50%; }
    & .agr__r--gap::after { background: var(--amber-400); transform: scaleX(clamp(0, (var(--p) - .86) / .06, 1)); }
    & .agr__r--gap::before { z-index: 1; background: var(--gray-900); opacity: clamp(0, (var(--p) - .92) / .03, 1); }
    & .strike { --sa: .92; --sd: .08; }
  }

  /* 5.3 BeeProfitable: five reports fly into five tiles, counters count, the bars grow */
  & .panel--bp {
    & .mock__body { position: relative; }
    & .pile--bp { position: absolute; inset: 16px; z-index: 3; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-content: start; pointer-events: none; }
    & .rp {
      --t: clamp(0, (var(--p) - var(--a)) / .14, 1); --e: calc(var(--t) * var(--t) * (3 - 2 * var(--t)));
      display: block; min-height: 7.5em; padding: 12px 12px 0; background: var(--white); border: 1px solid var(--gray-300); border-radius: 8px;
      font-weight: 600; color: var(--gray-800); font-size: .92em; box-shadow: 0 4px 14px rgba(0,0,0,.08);
      background-image: repeating-linear-gradient(var(--gray-200) 0 1px, transparent 1px 9px);
      background-size: calc(100% - 24px) 3.2em; background-position: 12px 2.6em; background-repeat: no-repeat;
      transform: translate3d(calc(var(--fx) * (1 - var(--e))), calc(var(--fy) * (1 - var(--e))), 0) rotate(calc(var(--fr) * (1 - var(--e)) * 1deg));
      opacity: calc(1 - clamp(0, (var(--p) - var(--a) - .11) / .04, 1));
    }
    & .tiles > .kpi:nth-child(-n+5) { opacity: clamp(0, (var(--p) - var(--a) - .10) / .04, 1); }
    & .kpi--spare { opacity: clamp(0, (var(--p) - .25) / .08, 1); transform: translate3d(0, calc((1 - clamp(0, (var(--p) - .25) / .08, 1)) * 24px), 0); }
    & .sb__bar { position: relative; background: var(--gray-100); }
    & .sb__bar::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--v) * 1%); border-radius: 2px; background: var(--gray-900);
                        transform: scaleX(clamp(0, (var(--p) - .60) / .25, 1)); transform-origin: 0 50%; }
    & .sb__v { opacity: clamp(0, (var(--p) - .60) / .10, 1); }
    & .sb--r .sb__v { box-shadow: none; position: relative; }
    & .sb--r .sb__v::before, & .sb--r .sb__v::after { content: ""; position: absolute; inset: 0; border-radius: 6px; --o: clamp(0, (var(--p) - .66) / .19, 1); }
    & .sb--r .sb__v::before { border-top: 2px solid var(--amber-400); border-bottom: 2px solid var(--amber-400); transform: scaleX(var(--o)); }
    & .sb--r .sb__v::after { border-left: 2px solid var(--amber-400); border-right: 2px solid var(--amber-400); transform: scaleY(var(--o)); }
    & .strike { --sa: .85; }
  }

  /* 5.4 Master roster: entries fly out of two scheduler windows into one grid */
  & .panel--roster {
    & .mock__body { position: relative; }
    & .ro__scroll { position: relative; z-index: 2; overflow: visible; }
    & .ro { min-width: 0; border-collapse: separate; border-spacing: 0; }
    & .ro th, & .ro td { border: 0; border-bottom: 1px solid var(--gray-200); border-right: 1px solid var(--gray-200); }
    & .ro tr > :last-child { border-right: 0; }
    & .ro td { height: auto; padding: 6px 7px; line-height: 1.35; }
    & .ro td:not(.is-empty):not(.is-open) {
      --t: clamp(0, (var(--p) - var(--a, 0)) / .2, 1); --e: calc(var(--t) * var(--t) * (3 - 2 * var(--t)));
      position: relative; z-index: 1; background: var(--white);
      transform: translate3d(calc(var(--rx, 0px) * (1 - var(--e))), calc(var(--ry, 0px) * (1 - var(--e))), 0) rotate(calc(var(--rr, 0) * (1 - var(--e)) * 1deg)) scale(calc(1 - .2 * (1 - var(--e))));
      box-shadow: inset 0 0 0 1px rgba(209, 213, 219, calc(1 - var(--e)));
    }
    & .ro thead th, & .ro__band th, & .ro tbody th[scope="row"], & .ro td.is-empty { opacity: clamp(0, (var(--p) - .45) / .2, 1); }
    & .ro td.is-swap { background: var(--white); }
    & .ro td.is-swap::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--gray-100); opacity: clamp(0, (var(--p) - .65) / .25, 1); }
    & .sw-new { display: block; opacity: clamp(0, (var(--p) - .77) / .1, 1); }
    & .sw-old { position: absolute; left: 7px; top: 6px; right: 7px; opacity: calc(1 - clamp(0, (var(--p) - .65) / .1, 1)); }
    & .ro__note { --in: .70; --rd: .1; opacity: clamp(0, (var(--p) - .70) / .1, 1); }
    & .pile--roster { position: absolute; inset: 16px; z-index: 1; pointer-events: none; opacity: calc(1 - clamp(0, (var(--p) - .25) / .2, 1)); }
    @media (min-width: 760px) and (max-width: 1099px) {
      & .ro td { padding-inline: 3px; }
      & .ro tbody th[scope="row"], & .ro thead th:first-child { width: 4.1em; padding-right: 4px; }
      & .ro td { font-size: .96em; } & .ro__p { letter-spacing: -.02em; }
    }
    & .win {
      position: absolute; top: 0; width: 50%; height: 92%; padding: 9px 12px; background: var(--gray-50);
      border: 1px solid var(--gray-300); border-radius: 8px; font-weight: 600; color: var(--gray-700); box-shadow: 0 6px 18px rgba(0,0,0,.10);
    }
    & .win::before { content: ""; position: absolute; left: 0; right: 0; top: 2.4em; height: 1px; background: var(--gray-300); }
    & .win1 { left: 0; transform: rotate(-2.5deg); }
    & .win2 { left: 48%; top: 6%; transform: rotate(2deg); }
    & .ro__scroll::after { content: ""; position: absolute; inset: -6px; border: 1px solid var(--gray-300); border-radius: 8px; pointer-events: none; opacity: clamp(0, (var(--p) - .45) / .2, 1); }
    & .strike { --sa: .85; }
  }

  /* 5.5 Stock and ordering: a paper count flies into a phone, the order works itself out */
  & .panel--stock {
    & .mock__body { position: relative; overflow: clip; padding: 12px 16px; }
    /* the screen is as tall as what it holds, so the footer line is never under the home bar */
    & .phone { width: 216px; position: relative; z-index: 2; aspect-ratio: auto; }
    & .phone__screen { height: auto; padding: 40px 12px 26px; gap: 6px; font-size: 11.5px; }
    & .glove { height: 40px; margin: 0; }
    & .ph__card { padding: 9px; gap: 4px; --c: clamp(0, (var(--p) - .40) / .22, 1); transform: scaleY(calc(.3 + .7 * var(--c))); transform-origin: 50% 0; opacity: var(--c); }
    & .ph__card > * { opacity: clamp(0, (var(--p) - .52) / .1, 1); }
    & .ph__rows > div { --rd: .06; --rise: 14px; padding: 3px 2px; }
    & .ph__rows > div:nth-child(1) { --in: .14; } & .ph__rows > div:nth-child(2) { --in: .21; }
    & .ph__rows > div:nth-child(3) { --in: .28; } & .ph__rows > div:nth-child(4) { --in: .35; }
    & .ph__eq { position: relative; }
    & .ph__eq::after { content: ""; position: absolute; inset: -2px -4px; background: var(--white); transform: scaleX(calc(1 - clamp(0, (var(--p) - .60) / .16, 1))); transform-origin: 100% 50%; }
    & .ph__rule { margin-top: -4px; transform: scaleX(clamp(0, (var(--p) - .70) / .1, 1)); transform-origin: 0 50%; --settle: clamp(0, (var(--p) - .85) / .03, 1); }
    & .ph__btn { height: 32px; font-size: 12px; opacity: clamp(0, (var(--p) - .58) / .08, 1); }
    & .ph__btn.is-on {
      --on: clamp(0, (var(--p) - .83) * 1000, 1);
      position: relative; z-index: 0; background: var(--white); transform: translate3d(0, calc(var(--on) * 1px), 0);
      color: rgb(calc(255 * var(--on)) calc(255 * var(--on)) calc(255 * var(--on)));
    }
    & .ph__btn.is-on::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: 10px; background: var(--black); opacity: clamp(0, (var(--p) - .80) / .06, 1); }
    & .ph__foot { --in: .86; --rd: .08; --rise: 12px; font-size: 10.5px; }
    & .pile--stock {
      position: absolute; left: 1.5%; top: 14%; width: 27%; height: 44%; z-index: 3; pointer-events: none; font-size: .94em;
      padding: 18px 16px; background: var(--white); border: 1px solid var(--gray-300); border-radius: 4px; box-shadow: 0 8px 22px rgba(0,0,0,.10);
      background-image: repeating-linear-gradient(transparent 0 2.25em, var(--gray-200) 2.25em calc(2.25em + 1px));
      transform: rotate(-4deg); opacity: calc(1 - clamp(0, (var(--p) - .30) / .1, 1));
    }
    & .pp {
      --t: clamp(0, (var(--p) - var(--a)) / .1, 1); --e: calc(var(--t) * var(--t) * (3 - 2 * var(--t)));
      display: block; height: 2.3em; padding-top: .9em; color: var(--gray-800); font-weight: 600; white-space: nowrap;
      transform: translate3d(calc(var(--e) * 48cqw), calc(var(--e) * var(--ty, 0em)), 0) rotate(calc(var(--e) * 4deg));
      opacity: calc(1 - clamp(0, (var(--p) - var(--a) - .06) / .04, 1));
    }
    & .pp1 { --a: .06; --ty: 6em; } & .pp2 { --a: .13; --ty: 5em; } & .pp3 { --a: .20; --ty: 4em; }
    & .pp4 { --a: .27; --ty: 3em; color: var(--gray-500); font-weight: 400; text-decoration: line-through; text-decoration-color: var(--gray-400); }
    & .strike { --sa: .85; }
    /* tablet: the phone stands right, the paper keeps clear of it (D46) */
    @media (min-width: 760px) and (max-width: 1099px) {
      & .mock__body { justify-items: end; }
      & .pile--stock { left: 2%; width: calc(100% - 216px - 48px); max-width: 27%; }
      & .pp { transform: translate3d(calc(var(--e) * (98cqw - 190px)), calc(var(--e) * var(--ty, 0em)), 0) rotate(calc(var(--e) * 4deg)); }
    }
  }

  /* 5.6 Expenses, then Payroll by clinic */
  & .panel--exp {
    & .mock--pl .mock__body { position: relative; }
    & :is(.pl, .drill) { border-collapse: separate; border-spacing: 0; }
    & .pile--ledger { position: absolute; left: 16px; right: 16px; top: 16px; z-index: 3; pointer-events: none; }
    & .lg {
      --t: clamp(0, (var(--p) - var(--a)) / .1, 1); --e: calc(var(--t) * var(--t) * (3 - 2 * var(--t)));
      position: absolute; left: 0; right: 0; top: calc(var(--n) * 2.3em); padding: 3px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      font-family: var(--mono); font-size: .9em; color: var(--gray-700); background: var(--white); border-bottom: 1px dashed var(--gray-300);
      transform: translate3d(calc(var(--lx, 0px) * (1 - var(--e))), calc(var(--ly) * var(--e)), 0) rotate(calc(var(--lr, 0) * (1 - var(--e)) * 1deg));
      opacity: calc(1 - clamp(0, (var(--p) - var(--a) - .07) / .04, 1));
    }
    & .pl thead th { opacity: clamp(0, var(--p) / .08, 1); }
    & .pl > tbody > tr:not(.pl__drill) > * { opacity: clamp(0, (var(--p) - var(--ra, 0)) / .05, 1); }
    /* the share of income arrives whole, after its row: never a ratio that is not true (rules-2-5) */
    & .pl > tbody > tr:not(.pl__drill) > td:nth-child(3) { opacity: calc(clamp(0, (var(--p) - var(--ra, 0)) / .05, 1) * clamp(0, (var(--p) - .28) / .08, 1)); }
    & .pl__sup .tag-supplier { opacity: 1; position: relative; z-index: 4; }   /* lands above the ledger pile (H4) */
    & .pl__sup > th { opacity: 1 !important; }
    & .pl__sup > th::before { opacity: clamp(0, (var(--p) - .40) / .05, 1); }
    & .pl > tbody > tr:last-child { --dr: clamp(0, (var(--p) - .40) / .10, 1); transform: translate3d(0, calc(var(--dh, 0px) * -1 * (1 - var(--dr) * var(--dr) * (3 - 2 * var(--dr)))), 0); }
    & .pl__drill > td { position: relative; z-index: 0; background: none; }
    & .pl__drill > td::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--gray-50); border-radius: 0 0 8px 8px; transform: scaleY(clamp(0, (var(--p) - .40) / .10, 1)); transform-origin: 50% 0; }
    & .drill thead { opacity: clamp(0, (var(--p) - .41) / .04, 1); }
    & .drill tbody tr { --t: clamp(0, (var(--p) - .42 - var(--i) * .02) / .06, 1); opacity: var(--t); transform: scaleY(var(--t)); transform-origin: 50% 0; }
    & .drill tbody tr:nth-child(1) { --i: 0; } & .drill tbody tr:nth-child(2) { --i: 1; }
    & .drill tbody tr:nth-child(3) { --i: 2; } & .drill tbody tr:nth-child(4) { --i: 3; }
    & .drill tfoot { opacity: clamp(0, (var(--p) - .50) / .05, 1); }
    & .drill tfoot .drill__net { box-shadow: none; position: relative; }
    & .drill tfoot .drill__net::before, & .drill tfoot .drill__net::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; transform-origin: 0 50%; }
    & .drill tfoot .drill__net::before { background: var(--amber-400); transform: scaleX(clamp(0, (var(--p) - .50) / .06, 1)); }
    & .drill tfoot .drill__net::after { background: var(--gray-900); opacity: clamp(0, (var(--p) - .78) / .04, 1); }
    & .drill__ok { opacity: clamp(0, (var(--p) - .54) / .04, 1); }
    & .pl { opacity: calc(1 - .7 * clamp(0, (var(--p) - .60) / .06, 1)); }
    & .panel__a .job { --out: .58; --od: .04; }
    & .panel__b .panel__copy { padding-top: var(--btop, 0px); align-content: start; }
    & .panel__b .panel__copy > * { --in: .62; }
    & .panel__b .panel__copy > .line:last-child { --in: .64; }
    & .mock--pay {
      --mo: clamp(0, (var(--p) - .60) / .06, 1);
      justify-self: end; align-self: start; width: 70%; margin-top: 4.2em; z-index: 2;
      opacity: var(--mo); transform: translate3d(0, calc((1 - var(--mo)) * (1 - var(--mo)) * (1 - var(--mo)) * 48px), 0);
    }
    & .mock--pay::before { box-shadow: 0 0 0 1px var(--gray-300), 0 18px 40px rgba(0,0,0,.28); }
    & .mock--pay > figcaption { background: var(--white); color: var(--gray-600); margin-top: 0; padding: 8px 4px 6px; border-radius: 0 0 8px 8px; }
    @media (max-width: 1099px) { & .pay__fig > div { padding: 10px 8px; } & .pay__fig dd { font-size: 1.45em; } }
    & .pay__h { --in: .62; --rd: .04; }
    & .split { --sp: clamp(0, (var(--p) - .66) / .12, 1); --se: calc(var(--sp) * var(--sp) * (3 - 2 * var(--sp))); --on: clamp(0, (var(--p) - .76) * 1000, 1); }
    & .split > span { position: relative; z-index: 0; background: none; }
    & .split > span::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 6px; transform-origin: 0 50%; }
    & .split__a { color: rgba(255, 255, 255, var(--on)); }
    & .split__a::before { background: var(--gray-900); transform: scaleX(calc(1.63 - .63 * var(--se))); }
    & .split__b { color: rgba(17, 24, 39, var(--on)); }
    & .split__b::before { background: var(--gray-200); transform: scaleX(var(--se)); opacity: var(--se); }
    & .pay__cost { --in: .74; --rd: .06; }
    & .pay__fig > div:nth-child(1) { --in: .76; } & .pay__fig > div:nth-child(2) { --in: .78; } & .pay__fig > div:nth-child(3) { --in: .80; }
    & .pay__fig > div { --rd: .05; }
    & .pay__rule { transform: scaleX(clamp(0, (var(--p) - .80) / .06, 1)); transform-origin: 0 50%; --settle: clamp(0, (var(--p) - .86) / .04, 1); }
    & .pay__un { --in: .86; --rd: .06; }
    & .strike { --sa: .86; --sd: .14; }
  }
}

/* ---------------------------------------------------------------- M6. Tools on a phone: a sticky card stack */

@media (max-width: 759px) {
  .motion .scene--tools:not(.unpinned) {
    & .track { display: grid; gap: 28px; margin-top: var(--s-7); }
    & .panel { display: contents; }
    & .panel__a, & .panel__b {
      /* sized by what it holds; a card taller than the screen sticks by its bottom edge, so all of it is read */
      position: sticky; top: min(calc(var(--nav-h) + 8px), calc(100svh - var(--hh, 0px) - 8px)); min-height: min(var(--mh, 100svh), calc(100svh - var(--nav-h) - 16px)); z-index: 0;
      display: flex; flex-direction: column; gap: 12px; padding: 16px 14px 14px; overflow: clip;
      background: var(--black); border: 1px solid var(--gray-800); border-radius: 16px;
      transform: scale(calc(1 - .04 * var(--cover, 0))); transform-origin: 50% 0;
    }
    & .panel__a::after, & .panel__b::after { content: ""; position: absolute; inset: 0; background: var(--black); opacity: calc(.4 * var(--cover, 0)); pointer-events: none; z-index: 5; }
    /* the last card is not covered by another: it is as tall as what it holds (D14), never an empty frame */
    & #tool-payroll { --mh: 0px; }
    /* a mock taller than the screen keeps its title bar and Sample data chip in view while it is read (phone-3-1) */
    & .panel .mock__bar { position: sticky; top: calc(var(--nav-h) + 8px); z-index: 4; background: var(--white); border-radius: var(--r-3) var(--r-3) 0 0; }
    & .panel__copy { gap: 6px; flex: none; max-width: none; }
    & .panel__copy h3, & .panel__copy h4 { font-size: 1.2rem; }
    & .panel__copy .job { font-size: 1rem; line-height: 1.35; }
    & .panel__copy :is(.line, .before) { font-size: .8125rem; line-height: 1.4; }
    & .panel .mock { flex: none; }
    & .panel .mock__body { overflow: clip; padding: 12px; }
    /* a phone card carries its problem line and its result line */
    & .panel .mock > figcaption { margin-top: 8px; }
    & .panel__b .panel__copy { padding-top: 0; }
    & .panel__b .panel__copy > * { --in: -1; }
    /* simplified mocks */
    & .panel--fu .card:nth-child(3), & .panel--fu .card:nth-child(5),
    & .panel--fu .pr:not(.pr1):not(.pr3):not(.pr10) { display: none; }
    & .panel--fu .pr, & .panel--fu .pr.is-dup { transform: none; }
    & .panel--fu .pr3 { top: calc(var(--lt) + (var(--ch) + 8px)); }
    & .panel--fu .pr10 { top: calc(var(--lt) + 2 * (var(--ch) + 8px)); }
    & .panel--fu .panel__a { --p: var(--u, 0); }
    & .panel--fu .fu__list { --c: 0; }
    & .panel--fu .card:not(.card--done) { transform: none; }
    & .panel--fu .fu__end { display: none; }
    & .panel--fu .mock__body { padding: 12px; }
    & .panel--fu .pile--fu { inset: 12px; }
    & .panel--tpc .panel__a { --p: min(var(--u, 0), .4); }
    & .panel--tpc .bcol:nth-child(n+3) { display: none; }
    & .panel--tpc .board { grid-template-columns: repeat(2, minmax(0, 1fr)); opacity: 1; }
    & .panel--tpc .pile--tpc { display: none; }
    & .panel--tpc .pchip { opacity: 1; }
    & .panel--tpc .pcard:not(.pcard--jamie) { --sx: 0px; --sy: 3em; --sr: 0; }
    & .panel--tpc .panel__b { --p: calc(.66 + .34 * var(--u, 0)); }
    & .panel--tpc .mock--agree { clip-path: none; opacity: 1; margin-top: 0; max-width: none; }
    & .panel--bp .pile--bp { display: none; }
    & .panel--bp .tiles > .kpi { opacity: 1; }
    & .panel--roster .pile--roster, & .panel--roster .ro__scroll::after { display: none; }
    & .panel--roster .ro td:not(.is-empty):not(.is-open) { transform: none; box-shadow: none; }
    & .panel--roster .ro :is(thead th, .ro__band th, tbody th[scope="row"], td.is-empty) { opacity: 1; }
    & .panel--roster .ro__scroll { overflow-x: auto; }
    & .panel--roster .ro { min-width: 560px; }

    & .panel--stock .mock__body { padding: 10px; }
    & .panel--stock .phone { width: 196px; aspect-ratio: auto; }
    & .panel--stock .phone__screen { height: auto; padding: 32px 10px 24px; font-size: 11px; gap: 4px; }
    & .panel--stock .glove { height: 40px; }
    & .panel--stock .pile--stock { width: 40%; left: 2%; }
    & .panel--exp .panel__a { --p: max(var(--u, 0), min(var(--u, 0) * 1.2, .58)); }
    & .panel--exp .pile--ledger { display: none; }
    & .panel--exp .pl > tbody > tr:not(.pl__drill) > *, & .panel--exp .pl thead th { opacity: 1; }
    & .panel--exp .pl { opacity: 1; }
    & .panel--exp .panel__a .job { --out: 9; }
    & .panel--exp .panel__b { --p: calc(.6 + .4 * var(--u, 0)); }
    & .panel--exp .mock--pay { width: 100%; margin-top: 0; }
    & .panel--exp .mock--pay > figcaption { background: none; padding: 0; margin-top: 8px; }
    & .panel--fu .card { height: auto; min-height: 0; --k: clamp(0, (var(--p) - .37) / .12, 1); }
    & .panel--fu :is(.pr, .pr.is-dup, .pile__h) { opacity: calc(1 - clamp(0, (var(--p) - .27) / .08, 1)); }
    & .panel--tpc .pcard { padding: 7px; gap: 2px; }
    & .panel--tpc .bcol { padding: 7px; gap: 6px; }
    & .panel--bp .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
    & .panel--bp .kpi { min-height: 0; padding: 8px; gap: 6px; }
    & .panel--bp .kpi__v { font-size: 1.25em; }
    & .panel--bp .kpi--spare { gap: 4px; }
    & .panel--bp .sb { grid-template-columns: 5.6em minmax(0, 1fr) auto; gap: 6px; }
    & .panel--bp .sb__v { width: 3.6em; height: 1.9em; }
    & .panel--exp .pl th, & .panel--exp .pl td { padding-top: 5px; padding-bottom: 5px; }
    & .panel--exp .drill th, & .panel--exp .drill td { padding-top: 3px; padding-bottom: 3px; }
    & .panel--exp .drill .os, & .panel--exp .pl thead { display: none; }
    & .panel--exp .drill { min-width: 0; }
  }
}

/* ---------------------------------------------------------------- M7. Night */

.motion .scene--night:not(.unpinned) {
  & .frame.night {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); column-gap: 24px; row-gap: 0;
    padding-top: calc(var(--nav-h) + 6svh); padding-bottom: calc(156px + 3svh); align-items: start;
  }
  & .night__text { grid-area: 1 / 1 / 2 / 5; }
  & h2 { font-size: min(var(--fs-h2), 6svh); text-wrap: balance; --out: .88; --od: .04; }
  & .night__caps { display: grid; margin-top: 4svh; gap: 0; max-width: none; }
  & .night__caps > .cap { grid-area: 1 / 1; align-self: start; --od: .03; }
  & .cap--s1 { --in: .08; --out: .37; }
  & .cap--s2 { --in: .40; --out: .73; }
  & .cap--s5 { --in: .76; }
  & .mock--gate {
    --xo: clamp(0, (var(--p) - .84) / .04, 1); --xi: clamp(0, (var(--p) - .02) / .05, 1);
    grid-area: 1 / 5 / 2 / 13; margin-top: 1svh;
    transform: translate3d(calc((1 - (1 - var(--xo)) * (1 - var(--xo))) * 70vw + (1 - var(--xi)) * (1 - var(--xi)) * (1 - var(--xi)) * 70vw), 0, 0);
  }
  & .mock--gate .mock__body { overflow: clip; }
  & .gate { grid-template-columns: minmax(0, 1fr) 2px 40%; grid-template-rows: auto auto; column-gap: 18px; padding: 2px 0; }
  & .gate__line { grid-column: 2; grid-row: 1 / 3; opacity: clamp(0, (var(--p) - .8399) * 100000, 1); }
  & .gate__list { grid-column: 3; grid-row: 1; }
  & .rrow {
    --t: clamp(0, (var(--p) - var(--a)) / .12, 1); --m: calc(1 - (1 - var(--t)) * (1 - var(--t)) * (1 - var(--t)));
    --k: clamp(0, (var(--t) - .55) / .3, 1);
    position: relative; z-index: 0; padding: 8px 10px; border-bottom-color: transparent; white-space: nowrap;
    transform: translate3d(calc((1 - var(--m)) * (-100cqw - 24px)), 0, 0) rotate(calc(var(--r, 0) * (1 - var(--k)) * 1deg));
  }
  & .rrow::before { content: ""; position: absolute; inset: 2px 0; z-index: -1; border-radius: 4px; background: var(--gray-800); opacity: calc(1 - var(--k)); }
  & .rrow::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--gray-700); opacity: var(--k); }
  & .rrow__s { opacity: var(--k); }
  & .tray { grid-column: 1; grid-row: 1 / 3; align-self: end; justify-self: end; width: 72%; margin: 0; border-color: transparent; position: relative; z-index: 0; }
  & .tray::before { content: ""; position: absolute; inset: 0; z-index: -1; border: 1px dashed var(--gray-700); border-radius: 10px; opacity: clamp(0, (var(--p) - .34) / .04, 1); }
  & .tray__k { --in: .355; --rd: .04; --rise: 12px; }
  & .tray__l { --in: .37; --rd: .05; --rise: 16px; }
  & .rrow--held {
    --t: clamp(0, (var(--p) - .31) / .045, 1); --dr: clamp(0, (var(--p) - .355) / .025, 1); --k: clamp(0, (var(--p) - .35) / .01, 1);
    border-color: transparent;
    transform: translate3d(calc((1 - var(--m)) * (-100cqw - 24px)), calc((1 - var(--dr)) * -64px), 0) rotate(calc(var(--r, 0) * (1 - var(--dr)) * 1deg));
  }
  & .rrow--held::after { inset: 0; height: auto; bottom: 0; border: 1px dashed var(--gray-700); border-radius: 6px; background: none; }
  /* the email rises a short way into its place (never through the rail) and leaves after the apparatus */
  & .night__email {
    --bi: clamp(0, (var(--p) - .53) / .08, 1); --br: calc((1 - var(--bi)) * (1 - var(--bi)) * (1 - var(--bi)));
    --xo: clamp(0, (var(--p) - .86) / .03, 1);
    grid-area: 1 / 1 / 2 / 5; align-self: end; position: relative; z-index: 2; gap: 10px;
    opacity: calc(clamp(0, (var(--p) - .5299) * 100000, 1) - var(--xo));
    /* uncovered from the top down, so its title bar and Sample data chip arrive before any line of it */
    clip-path: inset(-40px -40px calc(var(--br) * 100%) -40px);
    transform: translate3d(0, calc(var(--br) * 24px - var(--xo) * 24px), 0);
  }
  /* a short screen: the captions keep the text column and the email lands in the apparatus's empty half,
     over the held-back tray it reports on, and leaves with the apparatus (scenes.js measures --ex/--ey/--ew) */
  & .frame.night--tight .night__email {
    position: absolute; left: var(--ex); top: var(--ey); width: var(--ew); grid-area: auto; align-self: auto; display: block;
    opacity: calc(clamp(0, (var(--p) - .5299) * 100000, 1));
    transform: translate3d(calc((1 - (1 - clamp(0, (var(--p) - .84) / .04, 1)) * (1 - clamp(0, (var(--p) - .84) / .04, 1))) * 70vw), calc(var(--br) * 24px), 0);
  }
  & .frame.night--tight .mock--email { box-shadow: 0 18px 40px rgba(0,0,0,.5); }
  & .frame.night--tight .mock--email > figcaption { min-height: 48px; display: flex; align-items: center; margin-top: 8px; padding-right: 13.5rem; }
  & .frame.night--tight .wd-toggle { position: absolute; right: 0; bottom: 0; }
  & .frame.night--tight .tray { opacity: calc(1 - clamp(0, (var(--p) - .53) / .03, 1)); }
  & .mock--email .mock__body { display: grid; }
  & .mock--email .wd { grid-area: 1 / 1; }
  & .rail {
    position: absolute; left: var(--gutter); right: var(--gutter); bottom: 72px; margin: 0; padding-top: 18px;
    opacity: calc(clamp(0, (var(--p) - .03) / .05, 1) - clamp(0, (var(--p) - .88) / .04, 1));
  }
  & .rail__k--am::after { display: none; }
  & .rail::after {
    content: ""; position: absolute; left: 0; top: -3px; width: 100%; height: 7px;
    background: radial-gradient(circle at 3px 3.5px, var(--white) 2.7px, transparent 3.3px) 0 0 / 7px 7px no-repeat;
    transform: translate3d(calc(var(--dot, 0) * 1%), 0, 0);
  }
}
/* the watchdog card cross-fades between nights whenever JS runs (any mode) */
html:not(.no-js) .mock--email .mock__body { display: grid; }
html:not(.no-js) .mock--email .wd { grid-area: 1 / 1; transition: opacity var(--d-small) var(--ease-in-out); }
html:not(.no-js) .mock--email .wd--good { display: grid; opacity: 0; visibility: hidden; }
html:not(.no-js) .mock--email.is-good .wd--bad { display: grid; opacity: 0; visibility: hidden; }
html:not(.no-js) .mock--email.is-good .wd--good { opacity: 1; visibility: visible; }
html:not(.no-js) .mock--email .wd { transition: opacity var(--d-small) var(--ease-in-out), visibility var(--d-small); }

@media (max-width: 1099px) {
  .motion .scene--night:not(.unpinned) {
    & .frame.night { grid-template-columns: minmax(0, 1fr); padding-top: calc(var(--nav-h) + 3svh); padding-bottom: 3svh; }
    & .night__text { grid-area: 1 / 1; }
    & h2 { font-size: min(clamp(1.75rem, 1rem + 3vw, 2.6rem), 5svh); }
    & .night__caps { margin-top: 2svh; font-size: min(var(--fs-body), 2svh); }
    & .mock--gate { grid-area: 1 / 1; align-self: end; margin: 0; }
    & .night__email { grid-area: 1 / 1; max-width: 560px; justify-self: center; width: 100%; }
    & .rail { display: none; }
    & .clock {
      display: block; position: absolute; right: var(--gutter); top: calc(var(--nav-h) + 3svh); margin: 0;
      font-weight: 600; font-size: 13px; color: var(--gray-300); font-variant-numeric: tabular-nums; width: 6.4em; text-align: center;
      padding: 3px 9px; border: 1px solid var(--gray-700); border-radius: var(--r-pill);
      opacity: calc(1 - clamp(0, (var(--p) - .84) / .04, 1));
    }
    & .mock--gate .mock__body { opacity: calc(1 - .6 * clamp(0, (var(--p) - .48) / .08, 1)); padding: 10px 12px; }

    & .gate { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 2px auto; row-gap: 10px; column-gap: 0; }
    & .gate__list { grid-column: 1; grid-row: 1; }
    & .gate__line { grid-column: 1; grid-row: 2; width: auto; height: 2px; }
    & .tray { grid-column: 1; grid-row: 3; width: 100%; justify-self: stretch; padding: 8px 10px; gap: 4px; }
    & .rrow { padding: 4px 8px; font-size: 12.5px; transform: translate3d(0, calc((1 - var(--m)) * (100% + 38svh)), 0) rotate(calc(var(--r, 0) * (1 - var(--k)) * 1deg)); }
    & .rrow--held { padding: 4px 8px; transform: translate3d(0, calc((1 - var(--t)) * (100% + 24svh)), 0);
      --t: clamp(0, (var(--p) - .37) / .04, 1); --k: clamp(0, (var(--p) - .405) / .01, 1); }
    & .gate .gate__list > .rrow:nth-child(8) { --a: .30; }
    & .tray::before { opacity: clamp(0, (var(--p) - .37) / .04, 1); }
    & .tray__k { --in: .41; }
    & .tray__l { --in: .42; }
    & .tray__l { font-size: 12px; }
    & .mock--gate { transform: translate3d(0, calc((1 - (1 - var(--xo)) * (1 - var(--xo))) * 100svh + (1 - var(--xi)) * (1 - var(--xi)) * (1 - var(--xi)) * 100svh), 0); }
    /* the email overlays the lower half on a black ground of its own; the list's caption steps aside */
    & .night__email { background: var(--black); padding-top: 12px; box-shadow: 0 -24px 24px -8px var(--black), 0 48px 0 0 var(--black);
      opacity: calc(1 - var(--xo)); clip-path: none; transform: translate3d(0, calc(var(--br) * 70svh + var(--xo) * 24px), 0); }
    /* D106: the black ground runs the full width, so no word of the list underneath is cut at the email's edge */
    & .night__email::before { content: ""; position: absolute; z-index: -1; inset: -24px -100vw -48px; background: linear-gradient(to bottom, transparent, var(--black) 24px); pointer-events: none; }
    /* the gate steps down by what each caption needs (measured, scenes.js writes --sv in px) */
    & .mock--gate { transform: translate3d(0, calc((1 - (1 - var(--xo)) * (1 - var(--xo))) * 100svh + (1 - var(--xi)) * (1 - var(--xi)) * (1 - var(--xi)) * 100svh + var(--sv, 0px)), 0); }
    & .night__caps > .cap { --ox: 0px; --rise: 16px; }
  }
}
@media (max-width: 759px) {
  .motion .scene--night:not(.unpinned) {
    /* the clock gets its own row above the H2, so it never sits on a word */
    & .frame.night { padding-top: calc(var(--nav-h) + 2svh + 30px); }
    & .clock { top: calc(var(--nav-h) + 1.5svh); }
    & h2 { font-size: min(clamp(1.6rem, 7.4vw, 2.2rem), 4.6svh); }
    & .night__caps { margin-top: 1.4svh; }
    & .cap--s1, & .cap--s2, & .cap--s5 { font-size: min(var(--fs-body), 2.1svh); }
  }
}
@media (max-width: 759px) and (max-height: 760px) {
  .motion .scene--night:not(.unpinned) {
    & .rrow, & .rrow--held { padding-block: 2px; }
    & .tray { padding: 6px 8px; }
  }
}

/* ---------------------------------------------------------------- M8. Platform */

.motion .scene--platform:not(.unpinned) {
  & .frame.platform {
    display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto;
    justify-items: center; align-items: center; row-gap: 2svh; text-align: center;
    padding-top: calc(var(--nav-h) + 5svh); padding-bottom: 4svh;
  }
  & h2 { grid-row: 1; grid-column: 1; font-size: min(var(--fs-h2), 6svh); --in: .05; --rd: .05; --out: .90; --od: .04; pointer-events: none; }
  & .platform__prev { display: block; position: absolute; pointer-events: none; left: var(--x, var(--gutter)); top: var(--y, 40%); width: var(--w, auto); margin: 0; text-align: left;
                      color: var(--white); font-weight: 600; --out: .055; --od: .015; }
  /* the grid takes the room its row has and never more, so it cannot reach up into the H2 */
  & .fused { grid-row: 2; grid-column: 1; margin: 0; width: min(964px, 100%); max-width: none; align-self: stretch; display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; }
  & .grid12 { grid-template-rows: repeat(3, minmax(0, 1fr)); min-height: 0; }
  & .tile { min-height: 0; overflow: hidden; }
  & .frame.plat--compact .tile__l { display: none; }
  @media (min-width: 760px) and (max-height: 880px) {
    & .grid12 { gap: 8px; }
    & .tile { padding: 9px 12px 8px; row-gap: 3px; }
    & .tile__l { line-height: 1.3; }
  }
  & .grid12 { gap: 12px; background: none; border: 0; border-radius: 0; overflow: visible; position: relative; }
  & .grid12::after {
    --sm: clamp(0, (var(--p) - .36) / .08, 1);
    content: ""; position: absolute; inset: -6px; pointer-events: none; border: 1px solid var(--gray-700); border-radius: 14px;
    background:
      linear-gradient(var(--gray-700), var(--gray-700)) 25% 0 / 1px 100% no-repeat,
      linear-gradient(var(--gray-700), var(--gray-700)) 50% 0 / 1px 100% no-repeat,
      linear-gradient(var(--gray-700), var(--gray-700)) 75% 0 / 1px 100% no-repeat,
      linear-gradient(var(--gray-700), var(--gray-700)) 0 33.333% / 100% 1px no-repeat,
      linear-gradient(var(--gray-700), var(--gray-700)) 0 66.667% / 100% 1px no-repeat;
    opacity: calc(var(--sm) * (1 - .7 * clamp(0, (var(--p) - .50) / .06, 1)));
  }
  & .tile {
    --ti: clamp(0, (var(--p) - .07 - var(--i) * .006) / .05, 1);
    --tf: clamp(0, (var(--p) - .12 - var(--i) * .012) / .14, 1);
    --ef: calc(var(--tf) * var(--tf) * var(--tf) * (var(--tf) * (var(--tf) * 6 - 15) + 10));
    --dim: clamp(0, (var(--p) - .50) / .06, 1);
    position: relative; z-index: calc(20 - var(--i)); background: var(--black);
    transform: translate3d(calc(var(--sx) * var(--sf, 1) * (1 - var(--ef)) * 1px), calc(var(--sy) * var(--sf, 1) * (1 - var(--ef)) * 1px + (1 - var(--ti)) * 24px), 0) rotate(calc(var(--sr) * var(--rf, 1) * (1 - var(--ef)) * 1deg));
    opacity: calc(var(--ti) * (1 - .7 * var(--dim)));
  }
  & .tile::before { content: ""; position: absolute; inset: 0; border: 1px solid var(--gray-600); border-radius: 8px; pointer-events: none; opacity: calc(1 - clamp(0, (var(--p) - .36) / .08, 1)); }
  & .tile--sop { opacity: calc(var(--ti) * (1 - .7 * clamp(0, (var(--p) - .88) / .02, 1))); }
  /* the cells' small print steps back while the SOP assistant is open, so its panel and caption never sit on words */
  & .tile { --under: calc(clamp(0, (var(--p) - .54) / .04, 1) - clamp(0, (var(--p) - .88) / .04, 1)); }
  & .tile__s { opacity: calc(clamp(0, (var(--p) - .42) / .08, 1) * (1 - var(--under))); }
  & .tile__l { opacity: calc(1 - var(--under)); }
  & .tile.is-under :is(.tile__n, .status) { opacity: calc(1 - var(--under)); }
  & .fused { pointer-events: none; }
  & .fused > figcaption { --in: .42; }
  & .platform__sop { display: contents; }
  & .sub { grid-row: 4; grid-column: 1; margin: 0; font-size: min(var(--fs-lead), 2.4svh); }
  & .sub--2 { --in: .56; --out: .84; --od: .03; }
  & .mock--sop {
    /* opens out of its tile, and at the end folds back into it before the daylight arrives */
    --mo: calc(clamp(0, (var(--p) - .54) / .08, 1) - clamp(0, (var(--p) - .845) / .04, 1)); --me: calc(var(--mo) * var(--mo) * (3 - 2 * var(--mo)));
    grid-row: 2; grid-column: 1; position: relative; z-index: 30; width: min(760px, 100%);
    opacity: calc(clamp(0, (var(--p) - .5399) * 100000, 1) - clamp(0, (var(--p) - .8849) * 100000, 1));
    clip-path: inset(calc(var(--ct, 0px) * (1 - var(--me))) calc(var(--cr, 0px) * (1 - var(--me))) calc(var(--cb, 0px) * (1 - var(--me))) calc(var(--cl, 0px) * (1 - var(--me))) round 12px);
  }
  & .mock--sop > figcaption { background: var(--black); justify-self: center; padding: 6px 12px; border-radius: 8px; }   /* never on a tile's words */
  /* the payoff at its own scale (D47) */
  @media (min-width: 1100px) and (min-height: 760px) {
    & .mock--sop .mock__body { padding: 22px 24px 24px; }
    & .mock--sop .sop__main > * { font-size: 15px; }
    & .mock--sop .sop__main { gap: 12px; }
    & .mock--sop .ask { padding: 11px 14px; }
    & .mock--sop .ans1 { font-size: 28px; margin-top: 4px; }
    & .mock--sop .sop__steps { font-size: 16px; }
    & .mock--sop .sop__note { font-size: 14px; }
  }
  /* the question, the answer, its three steps; the amber line joins the steps to the section they came from;
     a still hold (.76 to .84); then the contents fade before the fold reaches the title bar, so the card that
     folds back is empty and its chip is never cut off a line */
  & .mock--sop :is(.ask, .ans1, .sop__steps, .query, .sop__note) { --rd: .04; --out: .835; --od: .012; --ox: 0px; }
  & .ask { --in: .60; } & .ans1 { --in: .615; } & .sop__steps { --in: .625; }
  & .query { --in: .655; } & .sop__note { --in: .64; }
  & .src__rule { position: relative; opacity: calc(clamp(0, (var(--p) - .7399) * 100000, 1) - clamp(0, (var(--p) - .835) / .012, 1)); }
  & .src__rule::after { content: ""; position: absolute; inset: 0; background: var(--gray-900); opacity: clamp(0, (var(--p) - .76) / .04, 1); }   /* settles to ink as the hold begins */
  & .src { opacity: calc(clamp(0, (var(--p) - .735) / .025, 1) - clamp(0, (var(--p) - .835) / .012, 1)); }
  & .dawn {
    --dw: clamp(0, (var(--p) - .86) / .10, 1);
    --de: calc(var(--dw) * var(--dw) * var(--dw) * (var(--dw) * (var(--dw) * 6 - 15) + 10));
    position: absolute; inset: 0; z-index: 40; padding: 0; display: grid; place-items: center;
    transform: translate3d(0, calc((1 - var(--de)) * (100% + 18px)), 0);
  }
  & .dawn__line { --in: .88; --rd: .04; }
}
@media (max-width: 899px) {
  .motion .scene--platform:not(.unpinned) {
    --sf: .55;
    & .grid12::after {
      background:
        linear-gradient(var(--gray-700), var(--gray-700)) 50% 0 / 1px 100% no-repeat,
        linear-gradient(var(--gray-700), var(--gray-700)) 0 16.667% / 100% 1px no-repeat,
        linear-gradient(var(--gray-700), var(--gray-700)) 0 33.333% / 100% 1px no-repeat,
        linear-gradient(var(--gray-700), var(--gray-700)) 0 50% / 100% 1px no-repeat,
        linear-gradient(var(--gray-700), var(--gray-700)) 0 66.667% / 100% 1px no-repeat,
        linear-gradient(var(--gray-700), var(--gray-700)) 0 83.333% / 100% 1px no-repeat;
    }
  }
}
@media (min-width: 760px) and (max-width: 1099px) {
  .motion .scene--platform:not(.unpinned) {
    & .frame.platform { padding-top: calc(var(--nav-h) + 3svh); padding-bottom: 3svh; row-gap: 1.4svh; }
    & h2 { font-size: min(var(--fs-h2), 4.6svh); }
    & .grid12 { gap: 8px; }
    & .tile { min-height: 0; padding: 8px 12px; row-gap: 2px; }
    & .fused > figcaption { margin-top: 8px; }
    & .sub { font-size: min(var(--fs-body), 2.1svh); }
  }
}
@media (max-width: 759px) {
  .motion .scene--platform:not(.unpinned) {
    --sf: .32; --rf: .6;
    & .frame.platform { padding-top: calc(var(--nav-h) + 2svh); padding-bottom: 2svh; row-gap: 1.2svh; text-align: left; justify-items: stretch; }
    & h2 { font-size: min(2rem, 4.6svh); }
    & .grid12 { gap: 8px; }
    /* the grid takes the room the H2 and the lines under it leave, never more: it can no longer rise
       into the H2. scenes.js checks that every cell's words fit; if not, the status pills go, and if
       that is still not enough the scene is read static (platform.slack) */
    & .fused { align-self: stretch; display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; }
    & .grid12 { grid-template-rows: repeat(6, minmax(0, 1fr)); min-height: 0; }
    & .tile { min-height: 0; height: auto; padding: 6px 9px; row-gap: 2px; overflow: hidden; grid-template-rows: auto auto; align-content: start; }
    & .tile__s { line-height: 1.25; }
    & .frame.plat--compact .tile .status { display: none; }
    & .frame.plat--compact .grid12 { gap: 6px; }
    & .frame.plat--compact .tile { padding: 5px 8px; row-gap: 1px; }
    & .frame.plat--compact .tile__n { line-height: 1.15; font-size: 12px; }
    & .frame.plat--compact .tile__s { line-height: 1.15; }
    & .tile__l { display: none; }
    & .tile .status { font-size: 9.5px; }
    & .tile__n { font-size: 12.5px; }
    & .tile__s { font-size: 9.5px; }
    & .fused > figcaption { margin-top: 8px; font-size: 12px; }
    & .sub { font-size: min(1rem, 2.2svh); }
    & .mock--sop .mock__body { padding: 10px 12px; }
    & .sop { gap: 8px; }
    & .sop__note { display: none; }
    & .ans1 { font-size: 1.25em; }
  }
}

/* ---------------------------------------------------------------- M9. People */

@media (min-width: 760px) {
  .motion .scene--people:not(.unpinned) {
    & .frame.people { padding-top: calc(var(--nav-h) + 5svh); align-content: start; row-gap: 4.5svh; }
    & h2 { font-size: min(var(--fs-h2), 6svh); }
    /* the two columns are already arriving (faint, at their offsets) while the H2 rides up to its pin,
       so the approach never shows half a screen of white; they finish by p .22 */
    & :is(.people__builds, .people__desk) { --pe: clamp(0, var(--p) / .22, 1); }
    & :is(.people__builds, .people__desk > :not(figure)) { opacity: calc(.32 + .68 * (1 - (1 - var(--pe)) * (1 - var(--pe)) * (1 - var(--pe)))); }
    & :is(.people__builds, .people__desk) {
      transform: translate3d(calc((1 - var(--pe)) * (1 - var(--pe)) * (1 - var(--pe)) * var(--from)), 0, 0);
    }
    & .people__builds { --from: calc(-1 * min(4vw, var(--gutter) - 8px)); }   /* never cut off by the screen edge */
    & .people__desk { --from: 4vw; }
    & .people__desk > figure { transform: translate3d(calc((1 - var(--pe)) * (1 - var(--pe)) * (1 - var(--pe)) * 100vw), 0, 0); }
    & .bio, & .desk { font-size: min(var(--fs-body), 2.1svh); }
    & .people__line { align-self: start; clip-path: inset(-4px calc((1 - clamp(0, (var(--p) - .30) / .28, 1)) * 100%) -4px 0); }
    & .people__line path {
      stroke: color-mix(in srgb, var(--amber-400), var(--gray-900) calc(clamp(0, (var(--p) - .56) / .05, 1) * 100%));
    }
    & .mini__r--marked {
      text-decoration: none; padding-bottom: 3px;
      background: linear-gradient(var(--amber-400), var(--amber-400)) no-repeat 0 100% / calc(clamp(0, (var(--p) - .52) / .08, 1) * 100%) 2px;
      -webkit-box-decoration-break: clone; box-decoration-break: clone;
    }
    & .mock--mini { margin-top: 1svh; }
  }
}
@media (max-width: 759px) {
  .motion .people__desk::before { transform: scaleY(0); transform-origin: 50% 0; transition: transform var(--d-large) var(--ease-out); }
  .motion .people__desk.in::before { transform: none; }
}

/* ---------------------------------------------------------------- M10. Closing */

.motion .scene--closing:not(.unpinned) {
  & .frame.closing { align-content: center; padding-top: var(--nav-h); }
  & h2 .ul { background-size: 0 2px; }
  & .ul-l { display: block; position: absolute; left: var(--x); top: var(--y); width: var(--w); height: 2px; background: var(--amber-400); opacity: 0; }
  & .ul-l.is-on { opacity: 1; }
  & .closing__body { --in: .55; }
  & .btn { --in: .60; }
  & .noise--closing { display: block; position: absolute; inset: 0; pointer-events: none; z-index: 0; }
  & .noise--closing .fr {
    --dr: clamp(0, (var(--p) - .10) / .14, 1); --dd: calc(var(--dr) * var(--dr) * (3 - 2 * var(--dr)));
    --dp: clamp(0, (var(--p) - .22) / .08, 1);
    position: absolute; left: var(--fx); top: var(--fy); white-space: nowrap;
    transform: translate3d(calc(var(--vx) * var(--dd) * 1px), calc(var(--vy) * var(--dd) * 1px + var(--dp) * 16px), 0) rotate(calc(var(--fr, 0) * 1deg)) scale(calc(1 - .4 * var(--dp)));
    opacity: calc(.4 * (1 - var(--dp)));
  }
  @media (max-width: 759px) {
    & .noise--closing .fr:not([data-ph]) { display: none; }
    /* two fragments only, in the bands above and below the text, drifting away from it (phone-2-4) */
    & .noise--closing .fr.cf1 { --fx: 4%; --fy: calc(var(--nav-h) + 1svh); --vx: 6; --vy: -10; --fr: -3; }
    & .noise--closing .fr.cf8 { --fx: 66%; --fy: calc(100% - 3svh - 28px); --vx: -6; --vy: 12; --fr: 3; }
    @media (max-width: 359px) { & .noise--closing .fr.cf8 { display: none; } }
    & .closing__body { --in: .08; } & .btn { --in: .12; }
  }
}

/* fragment skins, shared by the hero and the closing */
.motion .scene:not(.unpinned) {
  & .fr { font-size: 12px; line-height: 1.3; letter-spacing: 0; color: var(--gray-700); }
  & .fr--mail { padding: 7px 10px 7px 30px; background: var(--white); border: 1px solid var(--gray-300); border-radius: 6px; font-weight: 600; color: var(--gray-900); box-shadow: var(--sh-1); }
  & .fr--mail::before { content: ""; position: absolute; left: 10px; top: 50%; width: 13px; height: 9px; margin-top: -5px; border: 1.5px solid var(--gray-500); border-radius: 1.5px; }
  & .fr--mail::after { content: ""; position: absolute; left: 13px; top: 50%; width: 7px; height: 7px; margin-top: -7px; border-right: 1.5px solid var(--gray-500); border-bottom: 1.5px solid var(--gray-500); transform: rotate(45deg); }
  & .fr--file { padding: 6px 10px 6px 26px; background: var(--white); border: 1px solid var(--gray-200); border-radius: 4px; }
  & .fr--file::before { content: ""; position: absolute; left: 9px; top: 50%; width: 10px; height: 12px; margin-top: -6px; border: 1.5px solid var(--gray-500); border-radius: 1px 4px 1px 1px; }
  & .fr--note { width: 98px; min-height: 76px; padding: 10px; white-space: normal; background: var(--gray-100); border: 1px solid var(--gray-200); font-size: 12.5px; line-height: 1.35; color: var(--gray-800); }
  & .fr--cell { padding: 5px 10px; font-family: var(--mono); font-size: 12px; color: var(--gray-500); background: var(--white); border: 1px solid var(--gray-300); }
}

/* ---------------------------------------------------------------- M11. Reading sections */

/* .rv-on is added by the script that reveals them, so a page whose scripts failed never hides text */
.motion.rv-on {
  & .rv.rv-now { transition: none; }
  & .rv { opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity var(--d-reveal) var(--ease-out), transform var(--d-large) var(--ease-out); transition-delay: calc(var(--k, 0) * 40ms); }
  & .rv.in { opacity: 1; transform: none; }

  /* How we work: the hairline draws once */
  & .steps::before { transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--d-large) var(--ease-out) 200ms; }
  & .steps.in::before { transform: none; }
}
@media (max-width: 1099px) {
  .motion.rv-on .steps::before { transform: scaleY(0); transform-origin: 50% 0; }
  .motion.rv-on .steps.in::before { transform: none; }
}

/* ---------------------------------------------------------------- M12. Unpinned, print, forced colours */

@media print {
  .actor, .handoffs, .pile, .noise, .tools__next, .platform__prev, .clock, .ul-l { display: none !important; }
}
/* ---------------------------------------------------------------- M13. Seeded offsets (generated once, then edited by hand) */
/*HERO-SEEDS*/
/* M13. Hero chaos: offsets and fragment rings written by a solver that keeps every text box clear of
   every other one, of the title bar, the chip, the caption and the headline column (one set per width). */
.motion .scene--hero:not(.unpinned) {
  & .q1 { --mx: 2.5; --my: -1.9; --mr: 1.5; --ms: 1.02; }
  & .q2 { --mx: -2.2; --my: 4.9; --mr: -2.9; --ms: .99; }
  & .q3 { --mx: -1.8; --my: 8; --mr: 4.1; --ms: .94; }
  & .q4 { --mx: -2.8; --my: 8; --mr: -2.5; --ms: .94; }
  & .q5 { --mx: -1.1; --my: 10; --mr: 3.6; --ms: .95; }
  & .q6 { --mx: -2.9; --my: 10; --mr: -2.8; --ms: .94; }
  & .q7 { --mx: -2.3; --my: -2.2; --mr: 1.4; --ms: .94; }
  & .q8 { --mx: -11.1; --my: -.7; --mr: 2.6; --ms: .98; }
  & .q9 { --mx: 9.1; --my: -6.6; --mr: -2.1; --ms: .94; }
  & .q10 { --mx: -4.1; --my: -8.5; --mr: 1.6; --ms: 1.03; }
  & .q11 { --mx: -5; --my: -7.1; --mr: -1.7; --ms: 1.03; }
  & .q12 { --mx: -8.7; --my: -8.8; --mr: 1.7; --ms: .95; }
  & .q13 { --mx: 5.2; --my: -6.9; --mr: 2.5; --ms: .99; }
  & .q14 { --mx: -8.4; --my: -4.3; --mr: 2.1; --ms: .96; }
  & .q15 { --mx: 9.7; --my: -.8; --mr: -2.5; --ms: 1; }
  & .q16 { --mx: -8; --my: -2.2; --mr: 0; --ms: .97; }
  & .q17 { --mx: -10.5; --my: -.7; --mr: -3.5; --ms: .98; }
  & .q18 { --mx: -1; --my: 7.2; --mr: -4.4; --ms: 1.05; }
  & .q19 { --mx: -1.2; --my: 10; --mr: -2.2; --ms: .94; }
  & .q20 { --mx: 12; --my: 2; --mr: 2.9; --ms: 1.02; }
  & .q21 { --mx: 1.9; --my: 8.7; --mr: -2; --ms: 1.01; }
  & .fr3 { --fx: 89.1%; --fy: 11.3%; --fr: -5.6; }
  & .fr4 { --fx: 65.3%; --fy: 88.2%; --fr: -3.9; }
  & .fr7 { --fx: 67.9%; --fy: 12.1%; --fr: -3; }
  & .fr11 { --fx: 90.8%; --fy: 86%; --fr: 2.7; }
  & .fr15 { --fx: 78.5%; --fy: 13.5%; --fr: 3.1; }
  & .fr16 { --fx: 51.2%; --fy: 91.4%; --fr: -1.1; }
  & .fr17 { --fx: 50.7%; --fy: 16.1%; --fr: 4.3; }
  & .fr21 { --fx: 75.4%; --fy: 91.4%; --fr: -4.7; }
  & .fr22 { --fx: 91.4%; --fy: 72.1%; --fr: -2; }
  & .fr23 { --fx: 55.2%; --fy: 22.5%; --fr: -2.4; }
  & .fr24 { --fx: 63.2%; --fy: 93.4%; --fr: 1.2; }
  & :is(.fr1, .fr2, .fr5, .fr6, .fr8, .fr9, .fr10, .fr12, .fr13, .fr14, .fr18, .fr19, .fr20) { display: none; }
  @media (max-width: 1099px) {
    & .q1 { --mx: 6; --my: 4.7; --mr: 1.8; --ms: .94; }
    & .q2 { --mx: .1; --my: 6.5; --mr: -3.1; --ms: .94; }
    & .q7 { --mx: 5.7; --my: .3; --mr: 2; --ms: .96; }
    & .q8 { --mx: 10; --my: 3.4; --mr: -2.4; --ms: .98; }
    & .q9 { --mx: .2; --my: 5.8; --mr: 3; --ms: .98; }
    & .q16 { --mx: -7.7; --my: -.1; --mr: -2.7; --ms: .98; }
    & .q17 { --mx: 3.3; --my: 2.5; --mr: .6; --ms: .96; }
    & .q18 { --mx: -3.1; --my: 3.8; --mr: -2.5; --ms: .96; }
    & .q19 { --mx: 2.1; --my: 6.6; --mr: 2.4; --ms: 1.03; }
    & .q20 { --mx: 4; --my: 2.5; --mr: -4.4; --ms: .95; }
    & .q21 { --mx: -7.1; --my: .4; --mr: 3.6; --ms: .94; }
    & .fr1 { --fx: 26.8%; --fy: 94.8%; --fr: -1.2; }
    & .fr2 { --fx: 21.5%; --fy: 89.7%; --fr: -1.2; }
    & .fr4 { --fx: 61.8%; --fy: 44.4%; --fr: -.7; }
    & .fr5 { --fx: 83.1%; --fy: 10.9%; --fr: -5.3; }
    & .fr7 { --fx: 86%; --fy: 23.7%; --fr: -5.8; }
    & .fr15 { --fx: 82%; --fy: 39.8%; --fr: -1; }
    & .fr16 { --fx: 3.4%; --fy: 95%; --fr: -1.2; }
    & .fr24 { --fx: 80.2%; --fy: 17.6%; --fr: 1.4; }
    & .fr { display: none; }
    & :is(.fr1, .fr2, .fr4, .fr5, .fr7, .fr15, .fr16, .fr24) { display: block; }
  }
  @media (max-width: 759px) {
    & .q1 { --mx: -4.9; --my: 2; --mr: -1.7; --ms: .94; }
    & .q2 { --mx: 6.5; --my: 3.5; --mr: .1; --ms: .95; }
    & .q7 { --mx: -2.7; --my: -.6; --mr: .4; --ms: .97; }
    & .q8 { --mx: -5.8; --my: .1; --mr: .4; --ms: .94; }
    & .q9 { --mx: 5.2; --my: .3; --mr: -2.4; --ms: .96; }
    & .q16 { --mx: -2; --my: -1; --mr: -.3; --ms: .94; }
    & .q17 { --mx: -1.9; --my: -.2; --mr: .4; --ms: 1.02; }
    & .q18 { --mx: -3; --my: 1; --mr: .3; --ms: 1; }
    & .q19 { --mx: 7.2; --my: 2.1; --mr: -.1; --ms: .94; }
    & .q20 { --mx: -4.5; --my: 3.7; --mr: 2.2; --ms: .98; }
    & .fr { display: none; }
  }
}
.motion .scene--tools:not(.unpinned) .pile--fu {
  & .pr1 { --n: 1; --ox: 0px; --or: 0; }
  & .pr2 { --n: 2; --ox: -1.6px; --or: 0.13; --dy: calc(-1 * var(--r1)); }
  & .pr3 { --n: 3; --ox: 5.4px; --or: 0.38; --dy: calc((var(--ch) + 8px) - var(--r1) - var(--rh)); }
  & .pr4 { --n: 4; --ox: 0.2px; --or: 0.24; }
  & .pr5 { --n: 5; --ox: 2.1px; --or: -0.89; --dy: calc(-1 * var(--r1) - 3 * var(--rh)); }
  & .pr6 { --n: 6; --ox: 4.8px; --or: 0.56; --dy: calc(2 * (var(--ch) + 8px) - var(--r1) - 4 * var(--rh)); }
  & .pr7 { --n: 7; --ox: 4.5px; --or: 0.6; }
  & .pr8 { --n: 8; --ox: -1.3px; --or: -0.2; }
  & .pr9 { --n: 9; --ox: -4.8px; --or: 0.27; --dy: calc((var(--ch) + 8px) - var(--r1) - 7 * var(--rh)); }
  & .pr10 { --n: 10; --ox: -5.3px; --or: -0.87; --dy: calc(3 * (var(--ch) + 8px) - var(--r1) - 8 * var(--rh)); }
  & .pr11 { --n: 11; --ox: -3.5px; --or: -0.68; }
  & .pr12 { --n: 12; --ox: -1.9px; --or: -0.89; --dy: calc(4 * (var(--ch) + 8px) - var(--r1) - 10 * var(--rh)); }
}
.motion .scene--tools:not(.unpinned) .panel--tpc {
  & .bcol:nth-child(1) > .pcard:nth-child(2) { --j: 0; --sx: calc(38.5cqw + 4px); --sy: .7em; --sr: -6; --z: 5; }
  & .bcol:nth-child(1) > .pcard:nth-child(3) { --j: 1; --sx: calc(36cqw + 4px); --sy: -10em; --sr: 4; --z: 6; }
  & .bcol:nth-child(3) > .pcard { --j: 2; --sx: calc(-10.5cqw - 1px); --sy: 1em; --sr: -3; --z: 7; }
  & .bcol:nth-child(4) > .pcard { --j: 3; --sx: calc(-38.5cqw - 4px); --sy: 2em; --sr: 6; --z: 8; }
  & .bcol:nth-child(1) > .pcard:nth-child(2) .pchip { --ci: 0; }
  & .bcol:nth-child(1) > .pcard:nth-child(3) .pchip { --ci: 1; }
  & .bcol:nth-child(3) .pchip { --ci: 2; }
  & .n1 { --ci: 2; --nx: 57cqw; --ny: 3.5em; --tx: calc(-7cqw + 25px); --ty: 4.7em; --nr: 6; }
  & .n2 { --ci: 0; --nx: 30cqw; --ny: 12.5em; --tx: calc(-30cqw + 20px); --ty: -2.6em; --nr: -5; }
  & .n3 { --ci: 1; --nx: 48cqw; --ny: 16em; --tx: calc(-48cqw + 20px); --ty: 4.4em; --nr: 3; }
}
.motion .scene--tools:not(.unpinned) .panel--bp {
  & .rp1 { --a: 0; --fx: calc(28.33cqw + 3.3px); --fy: calc(1.2em - 0px); --fr: -14; }
  & .tiles > .kpi:nth-child(1) { --a: 0; }
  & .rp2 { --a: 0.045; --fx: calc(-2.5cqw + 0px); --fy: calc(1.8em - 0px); --fr: -7; }
  & .tiles > .kpi:nth-child(2) { --a: 0.045; }
  & .rp3 { --a: 0.09; --fx: calc(-33.33cqw + -3.3px); --fy: calc(1.2em - 0px); --fr: 0; }
  & .tiles > .kpi:nth-child(3) { --a: 0.09; }
  & .rp4 { --a: 0.135; --fx: calc(35.83cqw + 3.3px); --fy: calc(-5.7em - 10px); --fr: 7; }
  & .tiles > .kpi:nth-child(4) { --a: 0.135; }
  & .rp5 { --a: 0.18; --fx: calc(5cqw + 0px); --fy: calc(-6.3em - 10px); --fr: 14; }
  & .tiles > .kpi:nth-child(5) { --a: 0.18; }
}
.motion .scene--tools:not(.unpinned) .panel--roster {
  & tbody:nth-of-type(1) > tr:nth-child(2) > td:nth-of-type(1) { --rx: calc(2cqw - 5.04em); --ry: -1.4em; --rr: -2; --a: 0; }
  & tbody:nth-of-type(1) > tr:nth-child(2) > td:nth-of-type(2) { --rx: calc(5cqw - 3.92em); --ry: -1.4em; --rr: -1.4; --a: 0.018; }
  & tbody:nth-of-type(1) > tr:nth-child(2) > td:nth-of-type(3) { --rx: calc(-38cqw - 2.8em); --ry: 2.3em; --rr: -1.6; --a: 0.036; }
  & tbody:nth-of-type(1) > tr:nth-child(2) > td:nth-of-type(4) { --rx: calc(-35cqw - 1.68em); --ry: 2.3em; --rr: -0.5; --a: 0.054; }
  & tbody:nth-of-type(1) > tr:nth-child(2) > td:nth-of-type(5) { --rx: calc(-78cqw - 0.56em); --ry: 6em; --rr: -1.9; --a: 0.072; }
  & tbody:nth-of-type(1) > tr:nth-child(3) > td:nth-of-type(1) { --rx: calc(25cqw - 5.04em); --ry: 2.3em; --rr: 1.5; --a: 0.09; }
  & tbody:nth-of-type(1) > tr:nth-child(3) > td:nth-of-type(2) { --rx: calc(-18cqw - 3.92em); --ry: 6em; --rr: 0.5; --a: 0.108; }
  & tbody:nth-of-type(1) > tr:nth-child(3) > td:nth-of-type(4) { --rx: calc(-35cqw - 1.68em); --ry: 6em; --rr: -1.4; --a: 0.126; }
  & tbody:nth-of-type(1) > tr:nth-child(4) > td:nth-of-type(2) { --rx: calc(-18cqw - 3.92em); --ry: 5.9em; --rr: -1; --a: 0.144; }
  & tbody:nth-of-type(1) > tr:nth-child(4) > td:nth-of-type(4) { --rx: calc(-35cqw - 1.68em); --ry: 5.9em; --rr: -0.6; --a: 0.162; }
  & tbody:nth-of-type(2) > tr:nth-child(2) > td:nth-of-type(1) { --rx: calc(47cqw - 5.04em); --ry: -11.7em; --rr: -0.8; --a: 0.04; }
  & tbody:nth-of-type(2) > tr:nth-child(2) > td:nth-of-type(2) { --rx: calc(35.4cqw - 3.92em); --ry: -6.1em; --rr: -2.3; --a: 0.07; }
  & tbody:nth-of-type(2) > tr:nth-child(2) > td:nth-of-type(4) { --rx: calc(3.8cqw - 1.68em); --ry: -11.7em; --rr: 2.1; --a: 0.1; }
  & tbody:nth-of-type(2) > tr:nth-child(2) > td:nth-of-type(5) { --rx: calc(-7.8cqw - 0.56em); --ry: -6.1em; --rr: 3; --a: 0.13; }
  & tbody:nth-of-type(2) > tr:nth-child(3) > td:nth-of-type(3) { --rx: calc(40.6cqw - 2.8em); --ry: -15.5em; --rr: -0.2; --a: 0.16; }
}
.motion .scene--tools:not(.unpinned) .panel--exp {
  & .lg:nth-child(1) { --n: 0; --a: 0.02; --ly: calc(7.85em + 107px); --lx: -0.2px; --lr: -0.37; }
  & .lg:nth-child(2) { --n: 1; --a: 0.036; --ly: calc(4.2em + 88px); --lx: -5.6px; --lr: -0.14; }
  & .lg:nth-child(3) { --n: 2; --a: 0.052; --ly: calc(-2.15em + 31px); --lx: -3.3px; --lr: 0.3; }
  & .lg:nth-child(4) { --n: 3; --a: 0.068; --ly: calc(-0.4em + 88px); --lx: -4.7px; --lr: -0.43; }
  & .lg:nth-child(5) { --n: 4; --a: 0.084; --ly: calc(-5.4em + 50px); --lx: 6.3px; --lr: 0.02; }
  & .lg:nth-child(6) { --n: 5; --a: 0.1; --ly: calc(-5em + 88px); --lx: -4.9px; --lr: 0.04; }
  & .lg:nth-child(7) { --n: 6; --a: 0.116; --ly: calc(-8.65em + 69px); --lx: -6.6px; --lr: 0.02; }
  & .lg:nth-child(8) { --n: 7; --a: 0.132; --ly: calc(-13.65em + 31px); --lx: 6.7px; --lr: 0.33; }
  & .lg:nth-child(9) { --n: 8; --a: 0.148; --ly: calc(-11.9em + 88px); --lx: 2.7px; --lr: -0.22; }
  & .lg:nth-child(10) { --n: 9; --a: 0.164; --ly: calc(-16.9em + 50px); --lx: -1.9px; --lr: -0.3; }
  & .lg:nth-child(11) { --n: 10; --a: 0.18; --ly: calc(-17.85em + 69px); --lx: 3.8px; --lr: 0.03; }
  & .lg:nth-child(12) { --n: 11; --a: 0.196; --ly: calc(-24.2em + 12px); --lx: 3.9px; --lr: -0.15; }
  & .pl > tbody > tr:nth-child(1) { --ra: 0.276; }
  & .pl > tbody > tr:nth-child(2) { --ra: 0.132; }
  & .pl > tbody > tr:nth-child(3) { --ra: 0.164; }
  & .pl > tbody > tr:nth-child(4) { --ra: 0.196; }
  & .pl > tbody > tr.pl__sup { --ra: .116; }
  & .pl > tbody > tr:last-child { --ra: .10; }
}
.motion .scene--night:not(.unpinned) {
  & .gate__list > .rrow:nth-child(1) { --a: 0.1; --r: 2.4; }
  & .gate__list > .rrow:nth-child(2) { --a: 0.13; --r: -3.6; }
  & .gate__list > .rrow:nth-child(3) { --a: 0.16; --r: 4; }
  & .gate__list > .rrow:nth-child(4) { --a: 0.19; --r: -3.7; }
  & .gate__list > .rrow:nth-child(5) { --a: 0.22; --r: 3.6; }
  & .gate__list > .rrow:nth-child(6) { --a: 0.25; --r: -3.6; }
  & .gate__list > .rrow:nth-child(7) { --a: 0.28; --r: 3.5; }
  & .gate__list > .rrow:nth-child(8) { --a: 0.34; --r: -2.5; }
  & .rrow--held { --r: -3; }
}
.motion .scene--platform:not(.unpinned) .grid12 {
  & .tile:nth-child(1) { --i: 0; --sx: 275; --sy: 184; --sr: 1.6; }
  & .tile:nth-child(2) { --i: 1; --sx: 260; --sy: 310; --sr: 4.1; }
  & .tile:nth-child(3) { --i: 2; --sx: -540; --sy: -24; --sr: 2.8; }
  & .tile:nth-child(4) { --i: 3; --sx: 27; --sy: 124; --sr: 2.5; }
  & .tile:nth-child(5) { --i: 4; --sx: 484; --sy: -159; --sr: -0.2; }
  & .tile:nth-child(6) { --i: 5; --sx: 572; --sy: 137; --sr: -3.2; }
  & .tile:nth-child(7) { --i: 6; --sx: -547; --sy: 55; --sr: 2.9; }
  & .tile:nth-child(8) { --i: 7; --sx: -466; --sy: 197; --sr: -1.7; }
  & .tile:nth-child(9) { --i: 8; --sx: 179; --sy: -306; --sr: 3; }
  & .tile:nth-child(10) { --i: 9; --sx: 248; --sy: -130; --sr: 4.7; }
  & .tile:nth-child(11) { --i: 10; --sx: 317; --sy: -231; --sr: -1; }
  & .tile:nth-child(12) { --i: 11; --sx: -816; --sy: 52; --sr: -1; }
}
.motion .scene--closing:not(.unpinned) .noise--closing {
  & .cf1 { --fx: 7%; --fy: 20%; --vx: 32.8; --vy: 22.9; --fr: 5.4; }
  & .cf2 { --fx: 74%; --fy: 14%; --vx: -22.2; --vy: 33.3; --fr: 2.7; }
  & .cf3 { --fx: 9%; --fy: 66%; --vx: 37.3; --vy: -14.5; --fr: -4; }
  & .cf4 { --fx: 86%; --fy: 34%; --vx: -36.6; --vy: 16.2; --fr: -4.5; }
  & .cf5 { --fx: 66%; --fy: 84%; --vx: -17; --vy: -36.2; --fr: -4.2; }
  & .cf6 { --fx: 14%; --fy: 86%; --vx: 28.3; --vy: -28.3; --fr: 4.9; }
  & .cf7 { --fx: 84%; --fy: 66%; --vx: -36.2; --vy: -17; --fr: 3.7; }
  & .cf8 { --fx: 30%; --fy: 10%; --vx: 17.9; --vy: 35.8; --fr: -4.2; }
}
}
@media print {
  .track, .panel__a, .panel__b, .mock--huddle { transform: none !important; }   /* inline transforms the engine wrote */
}