/* film.css: the services film's look as a design system (ART.md). Values are the film's own; the section of ART.md
   is named beside each block. Two modes: a plain document (script off: every scene a readable block), and the film
   (html.film-on: one pinned viewport, the scenes stacked in it, the scroller only an input).

   The shared pieces a scene draws with, each with its contract in README.md ("How to add a scene"):
     the stage and its light · type (.name, .benefit, .peak, .numeral, .small) · .badge · .pill (.example, .day)
     · .btn · the phone (.device > .phone-box > .phone) · the chat (.wa) · the lifted input field (.lift)
     · the name list (.nl: icon or seal, name, the line a tap opens, +N) · .seal (a stamped seal) · the family
     (.fams) · the ticket (.ticket) and the stepper · the price's steps (.pr-steps) · the dot (#dot)
     · .lit and .bloom (a card that sits on the stage) · chrome: .mark, .progress, .bar-cta, .review. */

/* ------------------------------------------------------------------ tokens (ART 2.3, 3.5, 5.1) */
:root {
  --ink: #0B1F33; --ink2: #33475B; --ink3: #5B6B7C;
  --navy: #0C447C; --navy2: #185FA5; --blue: #378ADD; --sky: #85B7EB;
  --mist: #E8F1FB; --mist2: #F3F7FC; --paper: #FBFCFE; --line: #DCE6F2; --line2: #C6D6E8;
  --ok: #0F6E56; --danger: #A32D2D; --danger-bg: #FCEBEB; --red-glow: #E06A6A;
  --deep: #06172B; --mid: #0B2A4D; --glow: #16508F;
  --e-out: cubic-bezier(0.16, 1, 0.3, 1); --e-in: cubic-bezier(0.7, 0, 0.84, 0);
  --e-io: cubic-bezier(0.65, 0, 0.35, 1); --e-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ui: "IBM Plex Sans Arabic", "Segoe UI", system-ui, sans-serif;
  --logo-font: "Tajawal", "IBM Plex Sans Arabic", sans-serif;

  --cw: min(100vw, 480px);                 /* the column: the film's frame in the hand */
  --gut: 20px;
  --ps: 0.658;                             /* chapter phone scale (film.js sets it from the column and the height) */
  --hs: 0.8;                               /* hook phone scale */
  --t-peak: clamp(104px, calc(var(--cw) * 0.315), 136px);     /* a one-word peak */
  --t-logo: clamp(96px, calc(var(--cw) * 0.30), 130px);
  --t-end1: clamp(40px, calc(var(--cw) * 0.123), 54px);
  --t-hook: clamp(36px, calc(var(--cw) * 0.117), 52px);
  --t-name: clamp(34px, calc(var(--cw) * 0.107), 48px);       /* a name on two lines (ART 3.5) */
  --t-name-max: clamp(44px, calc(var(--cw) * 0.139), 60px);   /* a chapter's name starts here; FILM.fitLines brings it down until it stands on two lines */
  --t-title: clamp(44px, calc(var(--cw) * 0.152), 72px);      /* a one-line title (a group, an offer scene): FILM.fit brings it to the column */
  --t-benefit: clamp(18px, calc(var(--cw) * 0.052), 22px);   /* the small line under a name: truly small beside it */
  --t-line: clamp(18px, calc(var(--cw) * 0.053), 22px);       /* a line that is the scene's statement */
  --t-small: 15px;                                            /* the page's floor for anything read */
  --badge-d: 44px; --t-badge: 24px;
  --head-top: 56px;
  --dev-gap: 20px;
  --bar-h: 44px; --bar-b: 16px;            /* the fixed button: its height and its distance from the foot */
  --sab: env(safe-area-inset-bottom, 0px); /* the phone's own inset at the foot (?inset=34 simulates one) */
  --safe-b: calc(84px + var(--sab));       /* the fixed bar's zone at the foot of a scene, with the phone's own inset: nothing read lies in it */
}
@media (max-height: 700px) {
  :root {
    --t-name: clamp(32px, calc(var(--cw) * 0.098), 44px);
    --t-name-max: clamp(38px, calc(var(--cw) * 0.118), 50px);
    --t-benefit: clamp(16px, calc(var(--cw) * 0.045), 19px);
    --head-top: 52px; --badge-d: 38px; --t-badge: 21px; --dev-gap: 14px;
  }
}
/* a short screen (an iPhone SE or a 360 x 640 phone with the browser's own bars up: 548 to 600 px): every shared
   size steps down once more, so a heading, its piece and the fixed button all stand (html.is-short in film.js) */
@media (max-height: 600px) {
  :root {
    --t-name: clamp(28px, calc(var(--cw) * 0.086), 38px);
    --t-name-max: clamp(32px, calc(var(--cw) * 0.1), 42px);
    --t-title: clamp(36px, calc(var(--cw) * 0.118), 52px);
    --t-benefit: clamp(15px, calc(var(--cw) * 0.042), 17px);
    --t-line: clamp(16px, calc(var(--cw) * 0.047), 19px);
    --t-peak: clamp(72px, calc(var(--cw) * 0.24), 104px);
    --head-top: 48px; --badge-d: 32px; --t-badge: 18px; --dev-gap: 10px;
    --bar-h: 44px; --bar-b: 10px;
    --safe-b: calc(70px + var(--sab));
  }
}

*, *::before, *::after { box-sizing: border-box; }
/* a computer's window (film.js, deskFrame): the page in a frame of its own, magnified to fill the window; the outer
   document is only its holder */
.desk-frame { position: fixed; left: 0; top: 0; z-index: 2147483000; border: 0; transform-origin: 0 0; background: #06172B; }
html.is-framed, html.is-framed body { overflow: hidden; height: 100%; background: #06172B; }
html.is-framed body > :not(.desk-frame) { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--deep); color: var(--ink); font-family: var(--ui); -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility; -webkit-tap-highlight-color: transparent; }
p, h1, h2, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
bdi, [dir="ltr"] { unicode-bidi: isolate; }
[hidden] { display: none !important; }
.skip { position: absolute; top: -60px; right: 12px; z-index: 20; background: #fff; color: var(--navy); padding: 8px 14px;
  border-radius: 10px; font: 600 14px/1 var(--ui); }
.skip:focus { top: 12px; }

/* ------------------------------------------------------------------ the two worlds (ART 2.1, 2.2) */
.scene[data-world="dark"] { --fg: #fff; --fg2: rgba(255,255,255,0.82); --fg3: rgba(255,255,255,0.64); --key: var(--sky);
  --badge: #fff; --badge-n: var(--navy); --rule: rgba(255,255,255,0.24); --chip: rgba(255,255,255,0.12); --chip-fg: #fff;
  --tile: rgba(255,255,255,0.12); --tile-fg: #fff; --tile-on: #fff; --tile-on-fg: var(--navy); --ground: #0B2A4D;
  --card: #fff; --bloom: rgba(55,138,221,0.34);
  --sh-dev: 0 60px 120px -30px rgba(0,8,20,0.75), 0 30px 60px -20px rgba(0,8,20,0.55);
  --sh-card: 0 30px 60px -20px rgba(0,8,20,0.72), 0 12px 24px -12px rgba(0,8,20,0.5);
  --sh-chip: 0 14px 26px -12px rgba(0,8,20,0.7), 0 4px 10px -6px rgba(0,8,20,0.45);
  color: #fff; background: radial-gradient(120% 90% at 50% 38%, #16508F 0%, #0B2A4D 42%, #06172B 100%); }
.scene[data-world="light"] { --fg: var(--ink); --fg2: var(--ink2); --fg3: var(--ink3); --key: var(--navy);
  --badge: var(--navy); --badge-n: #fff; --rule: var(--line2); --chip: var(--mist); --chip-fg: var(--navy);
  --tile: var(--mist); --tile-fg: var(--navy); --tile-on: var(--navy); --tile-on-fg: #fff; --ground: #fff;
  /* the film's two ink shadows (ART 4.1) and a soft one under them, for everything that sits on paper */
  --card: #fff; --bloom: rgba(55,138,221,0.26);
  --sh-dev: 0 60px 120px -30px rgba(11,31,51,0.35), 0 30px 60px -20px rgba(11,31,51,0.25), 0 22px 64px 0 rgba(11,31,51,0.17);
  --sh-card: 0 30px 60px -22px rgba(11,31,51,0.32), 0 12px 24px -14px rgba(11,31,51,0.22), 0 0 0 1px rgba(198,214,232,0.55);
  --sh-chip: 0 14px 26px -14px rgba(11,31,51,0.34), 0 4px 10px -6px rgba(11,31,51,0.16);
  color: var(--ink); background: radial-gradient(120% 100% at 50% 38%, #FFFFFF 0%, #FBFCFE 50%, #E8F1FB 100%); }

.world, .vignette, .progress, .snaps, .review, .mark, .dot, .dot-box { display: none; }
.scene { position: relative; overflow: hidden; padding-bottom: 96px; }
.content { position: relative; width: var(--cw); max-width: 100%; margin: 0 auto; padding: 0 var(--gut); }

html.film-on, html.film-on body { height: 100%; overflow: hidden; overscroll-behavior: none; }
.film-on .film { position: fixed; inset: 0; overflow-x: hidden; overflow-y: scroll; scroll-snap-type: y mandatory;
  overscroll-behavior: none; scrollbar-width: none; outline: 0; }
.film-on .film::-webkit-scrollbar { display: none; }
.film-on .track { position: relative; height: calc(var(--n, 1) * 100%); }
.film-on .viewport { position: sticky; top: 0; height: calc(100% / var(--n, 1)); overflow: hidden; isolation: isolate;
  background: var(--deep); }
.film-on .snaps { display: grid; grid-auto-rows: 1fr; position: absolute; inset: 0; pointer-events: none; }
.film-on .snaps > i { scroll-snap-align: start; scroll-snap-stop: always; }

.film-on .world { display: block; position: absolute; inset: 0; z-index: 0; visibility: hidden; overflow: hidden; }
.viewport[data-world="dark"] .world.dark, .viewport[data-world="light"] .world.light { visibility: visible; }
.world.dark { background: radial-gradient(120% 90% at 50% 38%, #16508F 0%, #0B2A4D 42%, #06172B 100%); }
/* paper and mist with light (decision 7): lit from the film's point, mist gathering at the foot and the edges */
.world.light { background: radial-gradient(120% 100% at 50% 38%, #FFFFFF 0%, #FBFCFE 42%, #DFEBF9 100%); }
.world.light::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(95% 40% at 50% 106%, rgba(133,183,235,0.46) 0%, rgba(133,183,235,0) 72%),
  radial-gradient(70% 30% at 50% -8%, #fff 0%, rgba(255,255,255,0) 74%); }
.world.dark .grid { position: absolute; inset: 0; overflow: hidden; }
.world.dark .grid::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(80% 70% at 50% 45%, rgba(8,30,56,0) 30%, rgba(7,25,46,0.86) 100%); }
.world.dark .grid::before { content: ""; position: absolute; inset: -72px -120px;
  background-image: radial-gradient(rgba(133,183,235,0.16) 1px, transparent 1.3px); background-size: 24px 24px;
  animation: grid-drift 18s linear infinite; will-change: transform; }
@keyframes grid-drift { to { transform: translate3d(-120px, 72px, 0); } }
.world .orb { position: absolute; border-radius: 50%; }
.viewport[data-world="dark"] .world.dark .orb, .viewport[data-world="light"] .world.light .orb { will-change: transform; }
.world.dark .orb.a { width: 83vmin; height: 83vmin; left: -14vmin; top: -24vmin; animation: orb-a 15s ease-in-out infinite alternate;
  background: radial-gradient(circle, rgba(55,138,221,0.35) 0%, rgba(55,138,221,0.12) 40%, transparent 68%); }
.world.dark .orb.b { width: 70vmin; height: 70vmin; right: -18vmin; bottom: -26vmin;
  background: radial-gradient(circle, rgba(133,183,235,0.22) 0%, rgba(133,183,235,0.08) 40%, transparent 68%);
  animation: orb-b 13s ease-in-out infinite alternate; }
/* the danger: the stage's light turns red BEHIND the device and stays red while the alert is held (ART 2.1, 5.6) */
.world.dark .orb.red { display: none; width: 150vmin; height: 150vmin; left: calc(50% - 75vmin); top: calc(60% - 75vmin);
  background: radial-gradient(circle, rgba(222,60,60,0.56) 0%, rgba(176,46,46,0.27) 34%, transparent 66%); }
.world.dark.danger .orb.red { display: block; animation: red-in 0.3s var(--e-out) both, orb-b 11s ease-in-out infinite alternate; }
@keyframes red-in { from { opacity: 0; } to { opacity: 1; } }
.world.dark.danger .orb.a { opacity: 0.3; }
/* the second light of the stage turns red too, at the phone's foot */
.world.dark.danger .orb.b { background: radial-gradient(circle, rgba(206,58,58,0.30) 0%, rgba(176,46,46,0.10) 40%, transparent 68%); }
/* paper is lit too: a soft sky orb low on the left and a faint one high on the right drift behind what stands on it
   (PROMPT: the stage is never a flat colour) */
.world.light .orb.a { width: 120vmin; height: 120vmin; left: -56vmin; bottom: -44vmin; animation: orb-a 17s ease-in-out infinite alternate;
  background: radial-gradient(circle, rgba(133,183,235,0.40) 0%, rgba(133,183,235,0.16) 38%, transparent 68%); }
.world.light .orb.b { width: 96vmin; height: 96vmin; right: -48vmin; top: -30vmin; animation: orb-b 14s ease-in-out infinite alternate;
  background: radial-gradient(circle, rgba(55,138,221,0.20) 0%, rgba(133,183,235,0.09) 42%, transparent 68%); }
/* the light behind what stands on paper: a blue bloom at the middle of the stage, breathing */
.world.light .orb.c { width: 124vmin; height: 124vmin; left: calc(50% - 62vmin); top: calc(46% - 62vmin); animation: orb-c 11s ease-in-out infinite alternate;
  background: radial-gradient(circle, rgba(55,138,221,0.17) 0%, rgba(133,183,235,0.08) 36%, transparent 64%); }
/* the orbs drift and breathe (a slow swell of a tenth), on the compositor */
@keyframes orb-a { from { transform: translate3d(-21px, 14px, 0) scale(1); } to { transform: translate3d(21px, -14px, 0) scale(1.1); } }
@keyframes orb-b { from { transform: translate3d(17px, -10px, 0) scale(1.08); } to { transform: translate3d(-17px, 10px, 0) scale(0.98); } }
@keyframes orb-c { from { transform: scale(0.92); opacity: 0.75; } to { transform: scale(1.08); opacity: 1; } }
/* a world that is not on screen runs nothing and holds no layer */
.viewport[data-world="light"] .world.dark *, .viewport[data-world="light"] .world.dark .grid::before,
.viewport[data-world="dark"] .world.light * { animation-play-state: paused; will-change: auto; }
.film-on .vignette { display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(140% 110% at 50% 50%, transparent 55%, rgba(2,10,20,0.55) 100%); }
.viewport[data-world="light"] .vignette { display: none; }

.film-on .scene { position: absolute; inset: 0; z-index: 1; visibility: hidden; background: none; padding: 0; contain: layout style; }
.film-on .scene.is-on { visibility: visible; }
/* under the thumb: the scene he leaves and the one that rises are both in view, moved by the scroll itself */
.film-on .scene.is-sliding { visibility: visible; will-change: transform; }
.film-on .scene.is-sliding:not(.is-ready) > .content { visibility: visible; }
.film-on .scene:not(.is-ready) > .content { visibility: hidden; }
/* before the script runs the first screen is already there (never a blank stage): the first scene as its clip's
   first frame; its pieces that come later carry data-pre="0" (build.py) and wait for the script */
.film-on .scene.is-on:not(.is-ready) > .content { visibility: visible; }
.film-on .scene:not(.is-ready) [data-pre="0"] { visibility: hidden !important; }
.film-on .content { height: 100%; }
/* a scene that runs on under its first view (the last one: the page's end stands under the price): its column
   scrolls inside the scene. A touch scrolls it natively and hands on to the film at its two ends; the wheel and the
   keys are film.js's (the scroller). No scrollbar is drawn: the film draws none anywhere */
.film-on .content.runs-on { overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.film-on .content.runs-on::-webkit-scrollbar { display: none; }
.film-on .content.runs-on.is-held { overflow-y: hidden; }
.film-on .scene.is-thrown { will-change: transform; }
/* a scene that is not on screen holds no layers: its pieces ask for them again when it lands */
.film-on .scene:not(.is-on) *, .film-on .scene:not(.is-on) *::before, .film-on .scene:not(.is-on) *::after { will-change: auto !important; }
/* the whip's smear: two ghosts of the heading trail the thrown screen for its 200 ms (ART 5.12, 2) */
.film-on .scene.is-thrown .name, .film-on .scene.is-thrown .ghosted {
  text-shadow: 0 calc(var(--whip-dir, 1) * 5vh) 0 color-mix(in srgb, currentColor 35%, transparent),
  0 calc(var(--whip-dir, 1) * 10vh) 0 color-mix(in srgb, currentColor 15%, transparent); }

/* ------------------------------------------------------------------ type (ART 3) */
.head { position: relative; z-index: 3; padding-top: calc(var(--head-top) + env(safe-area-inset-top, 0px)); }
/* a chapter's first row: the number badge on the right, the example mark on the left */
.head-row { display: flex; align-items: center; justify-content: space-between; min-height: var(--badge-d); }
.head-row + .name { margin-top: 10px; }
.name { font: 700 var(--t-name)/1.2 var(--ui); color: var(--fg); isolation: isolate; text-wrap: balance; }
.chapter .name { font-size: var(--t-name-max); line-height: 1.16; }
.w { display: inline-block; position: relative; }
.hl { color: var(--key); }
/* the sky bar: an underline UNDER its word, never a band through it (the film's own older form, ART 3.3: 0.075 em
   high at 0.9, round ends). Its top edge lies 0.17 em under the baseline: the letters stand clear of it. A word
   with a low tail (.low: a tail of 0.24 em or more, marked by build.py and F.hl) takes it 0.06 em deeper, so the
   line runs under the letters' feet and only a deep tail crosses it. The baseline of Plex Arabic lies
   (line-height - 1.51em) / 2 + 0.42em above the foot of the word's box, so the offsets hold at any line height. */
.hl::before { content: ""; position: absolute; z-index: -1; inset-inline: 0; bottom: 0.02em; height: 0.075em;
  background: var(--sky); opacity: 0.9; border-radius: 99px; transform: scaleX(var(--bar, 1)); transform-origin: right; }
.hl.low::before { bottom: -0.04em; }
@supports (height: 1lh) {
  .hl::before { bottom: calc((1lh - 1.51em) / 2 + 0.175em); }
  .hl.low::before { bottom: calc((1lh - 1.51em) / 2 + 0.115em); }
}
.benefit { margin-top: 8px; font: 500 var(--t-benefit)/1.45 var(--ui); color: var(--fg2); text-wrap: balance; }
.small { font: 500 var(--t-small)/1.6 var(--ui); color: var(--fg3); }
.kicker { font: 600 var(--t-small)/1.4 var(--ui); color: var(--fg3); }
.peak { font: 700 var(--t-peak)/1.15 var(--ui); color: var(--fg); isolation: isolate; }
.num { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; white-space: nowrap; }
.unit { font: 500 var(--t-small)/1.4 var(--ui); color: var(--fg3); }
/* a numeral that owns its screen: FILM.fit brings it to the column's width */
.numeral { font: 700 clamp(180px, calc(var(--cw) * 0.62), 300px)/0.9 var(--ui); color: var(--fg); text-align: center; letter-spacing: -0.02em;
  font-feature-settings: "tnum"; white-space: nowrap; direction: ltr; }

/* the number badge: it arrives as the blue dot and grows into the number (ART 4.4) */
.badge { flex: none; width: var(--badge-d); height: var(--badge-d); border-radius: 50%; background: var(--badge); display: grid; place-items: center; }
.badge.is-dot { background: var(--blue); }
.badge span { font: 700 var(--t-badge)/1 var(--ui); color: var(--badge-n); font-feature-settings: "tnum"; }

/* pills (ART 3.2 tag pill) */
.pill { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 13px; border-radius: 999px;
  font: 600 15px/1 var(--ui); background: var(--chip); color: var(--chip-fg); white-space: nowrap; }
/* the mark an invented screen carries (BOARD.meta.example) */
.pill.example { background: rgba(255,255,255,0.14); color: #fff; }
.scene[data-world="light"] .pill.example { background: var(--mist); color: var(--navy2); }

/* the one button (ART 3.5): one look wherever it stands, the label and the chevron */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 56px; min-width: min(100%, 296px); padding: 0 24px 0 30px;
  border-radius: 28px; font: 700 19px/1 var(--ui); text-decoration: none; white-space: nowrap; }
.btn .arrow, .bar-cta .arrow { flex: none; opacity: 0.85; }
.scene[data-world="dark"] .btn { background: #fff; color: var(--navy); box-shadow: 0 18px 40px -14px rgba(0,8,20,0.75), 0 0 0 1px rgba(255,255,255,0.4) inset; }
.scene[data-world="light"] .btn { background: var(--navy); color: #fff; box-shadow: 0 24px 48px -18px rgba(12,68,124,0.6), 0 10px 20px -12px rgba(12,68,124,0.45); }
.btn:active, .bar-cta:active { filter: brightness(0.94); }
/* the one line under a full-size button: the offer's first step (it was the slot underButton) */
.under { margin-top: 12px; font: 500 15px/1.55 var(--ui); color: var(--fg2); text-wrap: balance; }
.slot .ph { display: inline-block; }

/* ------------------------------------------------------------------ the phone (ART 4.1) */
.device { position: relative; z-index: 1; width: calc(456px * var(--ps)); margin: var(--dev-gap) auto 0; transform-origin: 50% 22%; }
.phone-box { position: relative; width: calc(456px * var(--ps)); height: calc(958px * var(--ps)); }
.phone { position: absolute; left: 0; top: 0; width: 456px; height: 958px; padding: 13px; border-radius: 66px;
  background: linear-gradient(145deg, #2a2f36 0%, #0c0e11 45%, #1b1f24 100%);
  box-shadow: 0 0 0 2px #3a4048 inset, var(--sh-dev, 0 60px 120px -30px rgba(0,8,20,0.75), 0 30px 60px -20px rgba(0,8,20,0.55));
  transform: scale(var(--ps)); transform-origin: 0 0; }
/* the bloom behind a device on paper (decision 7); on navy the stage's own glow is behind it */
.scene[data-world="light"] .device::before, .bloom::before { content: ""; position: absolute; z-index: -1; left: -24%; right: -24%; top: -10%; height: 64%; border-radius: 50%;
  background: radial-gradient(closest-side, var(--bloom, rgba(55,138,221,0.26)), rgba(55,138,221,0.09) 62%, rgba(55,138,221,0)); pointer-events: none; }
.bloom { position: relative; isolation: isolate; }
.bloom::before { top: -30%; height: 160%; }
/* the danger light on a phone (FILM.danger; ART 5.6): the flare of the hit, the glow it leaves, the ring that fades.
   Painted once each; only their opacity moves */
.dz-hit, .dz-rest, .dz-ring { position: absolute; inset: 0; border-radius: 66px; pointer-events: none; opacity: 0; }
.dz-hit { z-index: -1; box-shadow: 0 0 120px 30px rgba(220,60,60,0.55); }
/* the held glow is the film's form at a phone's size: on a 375 px screen the film's 80px 8px at .28 was lost against the
   navy, and the alert at rest must still read as danger at one look */
.dz-rest { z-index: -1; box-shadow: 0 0 96px 18px rgba(228,84,84,0.46); }
.dz-ring { border: 4px solid var(--red-glow); }
/* a card of the product that sits on the stage: the film's two ink shadows, on either world */
.lit { background: var(--card, #fff); color: var(--ink); border-radius: 22px; box-shadow: var(--sh-card); }
.film-on .scene.is-on .device { will-change: transform; }
.phone > .screen { position: relative; width: 430px; height: 932px; border-radius: 54px; overflow: hidden; background: #fff;
  direction: rtl; font-family: var(--ui); color: #111B21; }
.phone.dark > .screen { background: #0b1420; }
.phone .status { position: absolute; top: 0; left: 0; right: 0; height: 54px; z-index: 20; direction: ltr; display: flex;
  align-items: center; justify-content: space-between; padding: 0 34px; font-weight: 600; font-size: 17px; color: #0B1F33;
  font-feature-settings: "tnum"; }
.phone.dark .status { color: #fff; }
.phone .status .sys { display: flex; gap: 6px; align-items: center; }
.phone .island { position: absolute; top: 12px; left: 50%; margin-left: -62px; width: 124px; height: 36px; border-radius: 20px;
  background: #000; z-index: 21; }
.phone .glass { position: absolute; inset: 0; z-index: 22; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 32%); }

/* ------------------------------------------------------------------ the chat (ART 4.2); --fs is the film's 25 px */
.ch2 .wa, .ch3 .wa, .ch6 .wa { --fs: 24px; }      /* the film's FS - 1 (chapters.tsx) */
.ch4 .wa { --fs: 23px; }
.ps-small .ch1 .wa { --fs: 26px; }
.ps-small .ch2 .wa, .ps-small .ch3 .wa, .ps-small .ch4 .wa, .ps-small .ch6 .wa { --fs: 25px; }      /* 15.5 px in the hand at the smallest scale */
.wa { --fs: 25px; position: absolute; inset: 0; display: flex; flex-direction: column; direction: rtl; }
.wa-head { flex: none; height: 118px; padding: 54px 16px 0; background: #F6F6F6; border-bottom: 1px solid #e2e2e2; display: flex;
  align-items: center; gap: 12px; position: relative; z-index: 3; }
.wa-back { flex: none; }
.wa-av { flex: none; width: 42px; height: 42px; border-radius: 50%; background: #0C447C; color: #fff; display: grid; place-items: center;
  font-size: 19px; font-weight: 700; line-height: 1; }
.wa-id { line-height: 1.25; }
.wa-id b { display: block; font-size: 18px; font-weight: 700; color: #0B1F33; }
.wa-id small { display: block; font-size: 13px; color: #667781; }
.wa-wall { flex: 1; position: relative; overflow: hidden; background-color: #EFEAE2; background-size: 120px 120px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><g fill='none' stroke='%23d9d1c5' stroke-width='1.4' opacity='0.55'><circle cx='20' cy='22' r='7'/><path d='M70 14l8 8-8 8-8-8z'/><path d='M96 70c6 0 10 4 10 10'/><rect x='24' y='74' width='14' height='10' rx='3'/><path d='M60 96h14M67 89v14'/><circle cx='100' cy='24' r='3'/></g></svg>"); }
.wa-thread { position: absolute; left: 0; right: 0; top: 0; display: flex; flex-direction: column; gap: 7px; padding: 12px 12px 14px; }
.wa-note { align-self: center; background: #FFFFFFE6; color: #667781; font-size: 13px; line-height: 1.5; padding: 4px 12px; border-radius: 8px;
  box-shadow: 0 1px 0.5px rgba(11,20,26,0.1); }
.wa-msg { max-width: 84%; display: flex; flex-direction: column; gap: 4px; position: relative; }
.wa-msg.in { align-self: flex-start; transform-origin: bottom right; }
.wa-msg.out { align-self: flex-end; transform-origin: bottom left; }
.wa-bub { background: #fff; border-radius: 12px; border-top-right-radius: 3px; padding: 7px 11px 5px; color: #111B21;
  box-shadow: 0 1px 0.5px rgba(11,20,26,0.13); font-size: var(--fs); line-height: 1.55; }
.wa-msg.out .wa-bub { background: #D9FDD3; border-top-right-radius: 12px; border-top-left-radius: 3px; }
.wa-muted { color: #667781; margin-top: 2px; }
.wa-meta { display: flex; justify-content: flex-end; align-items: center; direction: rtl; font-size: 11.5px; line-height: 1.5; color: #667781; margin-top: 1px; }
.wa-ticks { margin-inline-start: 3px; }
.wa-rtitle { display: block; font-weight: 700; }
.wa-rline { margin-top: 6px; }
/* reply buttons under a message (WhatsApp's own: white, the label in its blue); the one he taps is pressed */
.wa-btns { display: flex; gap: 5px; }
.wa-btn { flex: 1; min-height: 46px; display: grid; place-items: center; padding: 6px 10px; background: #fff; border-radius: 12px; color: #027EB5;
  font-size: calc(var(--fs) * 0.92); font-weight: 500; line-height: 1.3; box-shadow: 0 1px 0.5px rgba(11,20,26,0.13); }
.wa-btn.is-picked { background: #E7F4FB; }
.wa-typing { align-self: flex-start; display: none; gap: 5px; background: #fff; border-radius: 14px; border-top-right-radius: 4px; padding: 13px 16px;
  box-shadow: 0 1px 0.5px rgba(11,20,26,0.13); }
.wa-typing i { width: 8px; height: 8px; border-radius: 50%; background: #9aa6ad; opacity: 0.35; }
.wa-comp { flex: none; height: 76px; background: #F6F6F6; display: flex; align-items: center; gap: 10px; padding: 8px 12px 22px; position: relative; z-index: 3; }
.wa-field { flex: 1; min-height: 40px; background: #fff; border-radius: 20px; border: 1px solid #e4e4e4; display: flex; align-items: center;
  padding: 0 14px; font-size: 23px; color: #111B21; overflow: hidden; white-space: nowrap; }
.wa-caret { width: 2px; height: 22px; background: #00A884; margin-inline-start: 2px; opacity: 0; }
.wa-send { flex: none; width: 40px; height: 40px; border-radius: 50%; background: #00A884; display: grid; place-items: center; }
.wa-send .i-plane, .wa-send.has-text .i-mic { display: none; }
.wa-send.has-text .i-plane { display: block; }

/* the lifted input field (FILM.composer): the phone runs off the foot of the screen, so the field in which a line is
   typed is lifted out of the device and shown at the page's size over its lower third (ART 6, "extra piece") */
.lift { display: none; }
.film-on .lift { display: flex; align-items: flex-end; gap: 8px; position: absolute; z-index: 4; left: 50%;
  bottom: calc(var(--safe-b) + 14px); width: calc(456px * var(--ps) + 26px); max-width: calc(100% - 20px);
  padding: 8px 10px 8px 8px; border-radius: 30px; background: #F6F6F6; border: 1px solid #e2e2e2; direction: rtl;
  box-shadow: 0 30px 60px -22px rgba(11,31,51,0.5), 0 12px 24px -14px rgba(11,31,51,0.35); opacity: 0;
  transform-origin: 50% 100%; will-change: transform, opacity; }
.lift-field { flex: 1; min-width: 0; min-height: 44px; background: #fff; border: 1px solid #e4e4e4; border-radius: 22px; padding: 8px 14px;
  font: 400 17px/1.6 var(--ui); color: #111B21; text-align: start; }
.lift-caret { display: inline-block; vertical-align: -4px; width: 2px; height: 22px; background: #00A884; margin-inline-start: 2px; }
.lift-send { flex: none; width: 44px; height: 44px; border-radius: 50%; background: #00A884; display: grid; place-items: center; }
.lift-send .i-plane, .lift-send.has-text .i-mic { display: none; }
.lift-send.has-text .i-plane { display: block; }

/* ------------------------------------------------------------------ the name list (FILM.nameList; OFFER-PLAY 1, 4, 5)
   One row = a round tile (an icon, or a .seal) and a short name. One tile form: the filled disc of the scene's
   world, one icon stroke; no pale variant (it read as a feature switched off). A row that opens carries a chevron,
   and every chevron stands in one column at the row's far end; a tap shows the row's approved line in place.
   +N shows the folded rows inside the list's own box: the list scrolls, nothing else moves; the chip folds again. */
.nl { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr); }
.nl-btn { display: flex; align-items: center; gap: 14px; width: 100%; min-width: 0; min-height: var(--nl-row, clamp(48px, 8.9svh, 74px)); padding: 5px 0;
  text-align: start; color: inherit; }
.nl-ic { flex: none; width: var(--nl-tile, 46px); height: var(--nl-tile, 46px); border-radius: 50%; display: grid; place-items: center;
  background: var(--tile-on); color: var(--tile-on-fg); }
.nl-ic .ic { width: 50%; height: 50%; }
.nl-text { flex: 1; min-width: 0; display: block; position: relative; }
.nl-row.opens .nl-text { padding-inline-end: calc(var(--chev-d, 40px) + 10px); }
.nl-name { font: 700 var(--nl-fs, clamp(20px, calc(var(--cw) * 0.064), 28px))/1.3 var(--ui); color: var(--fg); }
.nl-over { display: block; font: 600 15px/1.4 var(--ui); color: var(--key); }
.nl-second { display: block; font: 500 15px/1.45 var(--ui); color: var(--fg2); }
/* the control of anything that opens (the founder, 2026-10-08: he hardly saw the thin arrow): a filled disc of the
   world, navy on paper and white on navy, with a thick chevron that turns when open. Its size is --chev-d; the row
   (or the card's head) it stands on is the button, so the target is the whole row */
.nl-chev { position: absolute; inset-inline-end: 0; top: calc(var(--nl-fs, 24px) * 0.65 - var(--chev-d, 40px) / 2); box-sizing: border-box; width: var(--chev-d, 40px); height: var(--chev-d, 40px);
  padding: calc(var(--chev-d, 40px) * 0.27); border-radius: 50%; background: var(--tile-on); color: var(--tile-on-fg); overflow: visible; }
.nl-chev path { stroke-width: 2.3; transform-box: view-box; transform-origin: 50% 50%; transition: transform 0.25s var(--e-out); }
.nl-row.is-open .nl-chev path { transform: rotate(180deg); }
.nl-rest, .nl-full { font: 500 15.5px/1.6 var(--ui); color: var(--fg2); text-wrap: pretty; }
.nl-mark { font: 700 1em/1 var(--ui); color: var(--fg); }
.nl-full { display: block; margin-top: 2px; }
.nl-more { position: relative; z-index: 2; flex: none; align-self: flex-start; margin-top: 8px; height: 44px; min-width: 68px; justify-content: center; padding: 0 18px;
  background: var(--tile-on); color: var(--tile-on-fg); font: 700 19px/1 var(--ui); font-feature-settings: "tnum";
  box-shadow: var(--sh-chip); }
.nl-fold { display: none; }
.film-on .nl-rest, .film-on .nl-full { display: none; }
.film-on .nl-row.is-open .nl-rest { display: inline; }
.film-on .nl-row.is-open .nl-full { display: block; }
.film-on .nl-row.is-open .nl-btn { align-items: flex-start; }
.film-on .nl-row.folded { display: none; }
.film-on .is-more .nl-row.folded { display: block; }
.film-on .is-more .nl-more b { display: none; }
.film-on .is-more .nl-more .nl-fold { display: block; }
/* +N opened: the list keeps the box it had (--nl-box, set by FILM.nameList) and scrolls inside it */
.film-on .is-more > .nl[style*="--nl-box"] { max-height: var(--nl-box); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.film-on .is-more > .nl::-webkit-scrollbar { display: none; }

/* ------------------------------------------------------------------ the seal: stamped, scalloped, one icon (decision 8)
   <span class="seal"> + FILM.seal(key): the scalloped disc of the world's badge colour with a sky ring inside, its
   icon, and the ink it pressed under it. It rests a little turned; FILM.stamp lands it. It never carries a number. */
.seal { flex: none; position: relative; width: var(--seal-d, 56px); height: var(--seal-d, 56px); display: grid; place-items: center; transform: rotate(-4deg); }
.seal-edge { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.seal-body { fill: var(--seal, var(--badge)); }
.seal-ring { fill: none; stroke: var(--sky); stroke-width: 1.5; }
.seal > .ic { position: relative; width: 42%; height: 42%; color: var(--seal-fg, var(--badge-n)); stroke-width: 2.1; }
.seal::after { content: ""; position: absolute; z-index: -1; left: 4%; right: 4%; bottom: -12%; height: 38%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(6,23,43,0.42), rgba(6,23,43,0)); }

/* ------------------------------------------------------------------ the ticket: the buyer's summary (decision 11)
   One white card with the two ink shadows, the same on paper and on navy. A line reads label, numeral, unit (the
   numeral directly followed by its unit). A line inside the setup (.tk-in) is a mark and a name. A gift's change
   stands in it and shows with the ticket's class g1, g2 or g3. FILM.ticket fills it, ticks it and moves it with the
   stepper. It repeats what the steps and the lists say: aria-hidden, and absent from the plain document. */
.ticket { position: relative; z-index: 2; display: grid; padding: 6px 16px; border-radius: 22px; background: #fff; color: var(--ink);
  box-shadow: var(--sh-card, 0 30px 60px -22px rgba(11,31,51,0.32), 0 12px 24px -14px rgba(11,31,51,0.22)); }
html:not(.film-on) .ticket { display: none; }
.tk-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-height: 42px; padding: 8px 0 7px; }
.tk-row + .tk-row { border-top: 1px solid var(--line); }
.tk-row[hidden], .tk-row.is-off { display: none; }
.tk-row.tk-in, .tk-row.tk-gift { align-items: center; justify-content: flex-start; gap: 8px; min-height: 32px; padding: 0 0 7px; border-top: 0; }
.tk-label { font: 600 15.5px/1.35 var(--ui); color: var(--ink2); white-space: nowrap; }
.tk-in .tk-label, .tk-gift .tk-label { font-weight: 500; font-size: 15px; color: var(--ink3); }
/* the figures stand in one column: every numeral starts on the same edge, its unit right after it */
.tk-fig { flex: none; display: inline-flex; align-items: baseline; justify-content: flex-start; gap: 5px; width: var(--tk-fig, 51%); white-space: nowrap; margin-inline-start: auto; }
.tk-fig .num { font: 700 23px/1.1 var(--ui); color: var(--navy); }
.tk-fig .unit { font-size: 14.5px; color: var(--ink3); }
/* a line inside the setup, or a gift's line: its figure, when it has one, stands right after its name */
.tk-in .tk-fig, .tk-gift .tk-fig { width: auto; margin-inline-start: 2px; }
.tk-in .tk-fig .num, .tk-gift .tk-fig .num { font-size: 17px; }
.tk-x { font: 600 15px/1 var(--ui); color: var(--ink3); font-feature-settings: "tnum"; }
.tk-mark { flex: none; width: 20px; height: 20px; color: var(--navy2); }
.tk-mark .ic { display: block; width: 100%; height: 100%; }
.tk-to, .tk-gift { display: none; }
.ticket.g1 [data-gift="1"] .tk-from { display: none; }
.ticket.g1 [data-gift="1"] .tk-label.tk-to { display: inline; }
.ticket.g1 [data-gift="1"] .tk-fig.tk-to { display: inline-flex; }
.ticket.g2 .tk-gift[data-gift="2"], .ticket.g3 .tk-gift[data-gift="3"] { display: flex; }
.ticket.g1 [data-gift="1"] .tk-label, .ticket .tk-gift .tk-label { color: var(--navy); font-weight: 600; }

/* the stepper: the one real choice. Minus and plus are icons, the count a numeral; 44 px targets */
.stepper { flex: none; display: inline-flex; align-items: center; direction: ltr; border-radius: 999px; background: var(--mist); color: var(--navy); }
.st-btn { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--navy); }
.st-btn .ic { width: 20px; height: 20px; stroke-width: 2.2; }
.st-btn[disabled] { opacity: 0.32; cursor: default; }
.st-n { min-width: 26px; text-align: center; font: 700 20px/1 var(--ui); color: var(--ink); }

/* the price's steps (decisions 11, 12): a plain, decent form; the staging is the scene's (scenes/price.css) */
.pr-steps { display: grid; gap: 10px; }
.pr-step { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 10px 14px; border-radius: 20px;
  background: var(--card, #fff); color: var(--ink); box-shadow: var(--sh-chip); }
.pr-mark { --nl-tile: 38px; background: var(--navy); color: #fff; }
.pr-what { font: 700 19px/1.3 var(--ui); }
.pr-in { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 3px; }
.pr-in-row { display: inline-flex; align-items: center; gap: 5px; font: 500 15px/1.5 var(--ui); color: var(--ink2); }
.pr-tick { flex: none; width: 17px; height: 17px; color: var(--navy2); }
.pr-tick .ic { display: block; width: 100%; height: 100%; }
.pr-cnt { font: 700 13px/1 var(--ui); font-feature-settings: "tnum"; color: var(--ink3); }
.pr-val { display: inline-flex; align-items: baseline; gap: 4px; color: var(--navy); font-weight: 600; }
.pr-val .unit { font-size: 15px; color: var(--ink3); }
/* an estimate is shown as one (decision 12: never dressed as exact): the sign of "about" before its figure */
.pr-val.is-est .num::before { content: "\2248\00a0"; font-weight: 500; opacity: 0.7; }
.pr-total { display: inline-flex; align-items: baseline; gap: 5px; font: 700 17px/1.2 var(--ui); color: var(--navy); }
.pr-total[hidden] { display: none; }
.pr-small, .pr-basis { display: block; font: 500 15px/1.5 var(--ui); color: var(--ink3); }
.pr-each { margin-inline-start: 8px; display: inline-flex; align-items: baseline; gap: 5px; color: var(--ink3); }
.pr-fig { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.pr-fig .num { font: 700 22px/1.1 var(--ui); color: var(--navy); }
.pr-fig .unit, .pr-each .unit { font-size: 15px; color: var(--ink3); }
.film-on .pr-full, .film-on .pr-basis { display: none; }

/* ------------------------------------------------------------------ chrome: the mark, the progress line, the bar (ART 4.6) */
.film-on .mark { display: flex; position: absolute; z-index: 4; top: calc(2px + env(safe-area-inset-top, 0px));
  right: calc((100% - var(--cw)) / 2 + var(--gut) - 10px); padding: 10px; min-width: 44px; min-height: 46px; flex-direction: column; align-items: center; justify-content: center;
  text-decoration: none; color: #fff; }
.mark b { font: 800 20px/1 var(--logo-font); }
.mark i { width: 17px; height: 2px; border-radius: 1px; background: var(--sky); margin-top: 4px; }
.viewport[data-world="light"] .mark { color: var(--navy); }
.viewport[data-mark="0"] .mark { opacity: 0; pointer-events: none; }
/* the way into the dashboard for whoever has an account (build.py, signin): across from the brand word, in the same
   strip above every scene's head, in the footer links' own type and the brand word's colours. It stays on the first
   screen too, where the brand word is away. On the last scene it leaves with the brand word once the column is
   scrolled (price.js: the column would scroll under it); the same link stands with the footer's links at its end. */
.signin { display: none; }
.film-on .signin { display: inline-flex; position: absolute; z-index: 4; top: calc(2px + env(safe-area-inset-top, 0px));
  left: calc((100% - var(--cw)) / 2 + var(--gut) - 10px); padding: 0 10px; min-width: 44px; min-height: 46px; align-items: center; justify-content: center;
  font: 600 15px/1 var(--ui); text-decoration: none; color: #fff; }
.viewport[data-world="light"] .signin { color: var(--navy); }
.viewport[data-scene="price"][data-mark="0"] .signin { opacity: 0; pointer-events: none; }

.film-on .progress { display: block; position: absolute; z-index: 4; bottom: calc(6px + var(--sab));
  left: calc((100% - var(--cw)) / 2 + var(--gut)); right: calc((100% - var(--cw)) / 2 + var(--gut)); height: 2px; border-radius: 1px;
  background: rgba(255,255,255,0.14); overflow: hidden; }
.viewport[data-world="light"] .progress { background: var(--line); }
.progress i { position: absolute; inset: 0; border-radius: 1px; background: var(--sky); transform-origin: right;
  transform: scaleX(var(--prog, 0)); transition: transform 0.4s var(--e-out); }

/* the fixed button: the same pill as the full-size one, smaller; white on navy scenes, navy on paper */
.bar-cta { position: fixed; z-index: 5; bottom: calc(var(--bar-b) + var(--sab)); left: 50%; transform: translate3d(-50%, 0, 0);
  height: var(--bar-h); padding: 0 14px 0 20px; border-radius: 22px; display: inline-flex; align-items: center; gap: 6px;
  font: 700 16px/1 var(--ui); text-decoration: none; white-space: nowrap; color: var(--navy); background: #fff;
  box-shadow: 0 16px 32px -12px rgba(0,8,20,0.8), 0 0 0 1px rgba(12,68,124,0.16);
  transition: transform 0.45s var(--e-out), opacity 0.2s linear; }
.film-on .bar-cta { position: absolute; }
.viewport[data-world="light"] .bar-cta { color: #fff; background: var(--navy); box-shadow: 0 16px 32px -14px rgba(12,68,124,0.6), 0 6px 14px -8px rgba(12,68,124,0.45); }
.viewport[data-bar="0"] .bar-cta { transform: translate3d(-50%, 96px, 0); opacity: 0; pointer-events: none; }

.viewport.is-held .bar-cta, .viewport.is-held .progress i { transition: none !important; }
.film-still .bar-cta, .film-still .progress i, .film-still .plus, .film-still .nl-chev path, .film-still .fam-head { transition: none !important; }

/* the dot: one node above the scenes, never thrown with them; a scene says where it is (FILM.clip's dot) (ART 5.8) */
.film-on .dot-box { display: block; position: absolute; inset: 0; z-index: 3; pointer-events: none; }
/* at rest a scene without a device is never still: the whole of it pushes in 3 % and back, slowly, on the compositor
   (ART 5.9); its dot is pushed with it, by the same animation started in the same frame */
.film-on .scene.is-on[data-push="1"] > .content, .film-on .viewport[data-push="1"] > .dot-box {
  animation: push-in 7s var(--e-io) 0.9s infinite alternate both; will-change: transform; }
@keyframes push-in { from { transform: scale(1); } to { transform: scale(1.03); } }
/* while something is open and read (a family, a row, +N), the push-in holds still */
.film-on .viewport.is-reading .scene.is-on > .content, .film-on .viewport.is-reading > .dot-box { animation-play-state: paused; }
.film-on .dot { display: block; position: absolute; left: 0; top: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%;
  background: var(--blue); visibility: hidden; pointer-events: none; will-change: transform; }
.film-on .dot.red { background: var(--red-glow); }

/* the review bar: numerals only (hidden with ?clean=1) */
.film-on .review { display: flex; position: absolute; z-index: 6; top: calc(6px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); gap: 5px; direction: ltr; }
.review button { height: 24px; min-width: 24px; padding: 0 7px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.3);
  background: rgba(6,23,43,0.7); color: #fff; font: 600 11px/1 var(--ui); font-feature-settings: "tnum"; display: inline-flex; gap: 4px;
  align-items: center; justify-content: center; }
.review button b { font-weight: 600; opacity: 0.55; }
.review button.off { opacity: 0.5; }
.review svg { display: block; }
.viewport[data-world="light"] .review button { background: rgba(255,255,255,0.86); color: var(--navy); border-color: var(--line2); }

/* ------------------------------------------------------------------ the trial form: one sheet over the scene (FILM.lead)
   Every button of the page opens it. The scene stays where it is, dimmed under the navy stage's own light; the form
   is one lit card: the logo, four fields, the one button; after a valid submit the same card holds a stamped seal
   and the confirmation line. It stands outside the scroller (build.py writes it after <main>), hidden until the
   script opens it. A field in error turns red and shakes: no words. */
.lead-sheet { --badge: var(--navy); --badge-n: #fff; position: fixed; inset: 0; z-index: 30; display: flex; overflow-y: auto; overscroll-behavior: contain;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 16px calc(12px + var(--sab));
  background: radial-gradient(120% 78% at 50% 36%, rgba(22,80,143,0.8) 0%, rgba(11,42,77,0.9) 48%, rgba(6,23,43,0.95) 100%);
  opacity: 0; transition: opacity 0.2s linear; scrollbar-width: none; }
.lead-sheet::-webkit-scrollbar { display: none; }
.lead-sheet.is-open { opacity: 1; }
.lead-card { position: relative; isolation: isolate; margin: auto; width: min(100%, 392px); display: flex; flex-direction: column; padding: 6px 20px 20px;
  border-radius: 26px; background: #fff; color: var(--ink); direction: rtl;
  box-shadow: 0 30px 60px -20px rgba(0,8,20,0.72), 0 12px 24px -12px rgba(0,8,20,0.5), 0 0 96px -12px rgba(133,183,235,0.5);
  transform: translate3d(0, 40px, 0) scale(0.96); transition: transform 0.38s var(--e-out); }
.lead-sheet.is-open .lead-card { transform: none; }
.lead-top { flex: none; display: flex; align-items: center; justify-content: space-between; height: 54px; }
.lead-logo { display: inline-flex; flex-direction: column; align-items: center; color: var(--navy); }
.lead-logo b { font: 800 24px/1 var(--logo-font); }
.lead-logo i { width: 20px; height: 2px; border-radius: 1px; background: var(--sky); margin-top: 4px; }
/* the close control: the page's plus, turned; a 44 px target whose mark lines up with the card's edge */
.lead-x { flex: none; width: 44px; height: 44px; margin-inline-end: -12px; border-radius: 50%; display: grid; place-items: center; color: var(--ink3); }
.lead-x .ic { width: 24px; height: 24px; transform: rotate(45deg); }
.lead-x:active { background: var(--mist); }
.lead-fields { display: grid; gap: 12px; }
.lead-f { display: grid; gap: 6px; }
.lead-l { font: 600 15px/1.3 var(--ui); color: var(--ink2); transition: color 0.15s linear; }
.lead-i { display: block; width: 100%; height: 50px; margin: 0; padding: 0 16px; border-radius: 14px; border: 1.5px solid var(--line2); background: var(--mist2);
  font: 500 17px/1.2 var(--ui); color: var(--ink); outline: none; -webkit-appearance: none; appearance: none;
  transition: border-color 0.15s linear, background-color 0.15s linear, box-shadow 0.15s linear; }
.lead-i[dir="ltr"] { text-align: right; font-feature-settings: "tnum"; }
.lead-i::placeholder { color: var(--ink3); opacity: 0.55; }
.lead-i:focus { border-color: var(--navy2); background: #fff; box-shadow: 0 0 0 4px rgba(133,183,235,0.4); }
.lead-i:-webkit-autofill { -webkit-text-fill-color: var(--ink); -webkit-box-shadow: 0 0 0 60px var(--mist2) inset; }
.lead-f.is-bad .lead-l { color: var(--danger); }
.lead-f.is-bad .lead-i { border-color: var(--danger); background: var(--danger-bg); }
.lead-f.is-bad .lead-i:focus { box-shadow: 0 0 0 4px rgba(224,106,106,0.32); }
.lead-f.is-shake { animation: lead-shake 0.34s linear; }
@keyframes lead-shake { 0%, 100% { transform: none; } 20% { transform: translate3d(-7px, 0, 0); } 40% { transform: translate3d(6px, 0, 0); }
  60% { transform: translate3d(-4px, 0, 0); } 80% { transform: translate3d(2px, 0, 0); } }
.lead-go { width: 100%; margin-top: 8px; background: var(--navy); color: #fff; box-shadow: 0 24px 48px -18px rgba(12,68,124,0.6), 0 10px 20px -12px rgba(12,68,124,0.45); }
.lead-go:focus-visible, .lead-x:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
/* the confirmation: the card keeps its size (film.js holds its height), the seal is stamped, the line rises */
/* a field no person sees or reaches (build.py lead_form) */
.lead-hp { display: none !important; }
/* no seat is left (D185): the closed sentence at the head of the form */
.lead-closed { margin: 0 0 4px; font: 600 16px/1.55 var(--ui); color: var(--ink); text-wrap: balance; }
/* the request is on its way: the button waits; it could not be sent: the button shakes (no words) */
.lead-card.is-busy .lead-go { opacity: 0.6; pointer-events: none; }
.lead-go.is-shake { animation: lead-shake 0.34s linear; }
.lead-done { flex: 1; display: grid; justify-items: center; align-content: center; gap: 22px; padding: 4px 4px 34px; text-align: center; outline: none; }
.lead-done .seal { --seal-d: 88px; }
.lead-line { max-width: 22ch; font: 600 var(--t-line)/1.6 var(--ui); color: var(--ink); text-wrap: balance; }
.lead-line.lead-w + .lead-w { margin-top: -14px; }
.lead-card.is-done .lead-fields { display: none; }
.lead-card.is-done .seal { animation: lead-stamp 0.3s linear both; }
.lead-card.is-done .lead-line { animation: lead-rise 0.4s var(--e-out) 0.2s both; }
@keyframes lead-stamp { 0% { opacity: 0; transform: rotate(-12deg) scale(2.4); } 33% { opacity: 1; } 60% { transform: rotate(-7deg) scale(0.93); }
  85% { transform: rotate(-5deg) scale(1.02); } 100% { opacity: 1; transform: rotate(-4deg) scale(1); } }
@keyframes lead-rise { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }
.film-still .lead-sheet, .film-still .lead-card, .film-still .lead-i, .film-still .lead-l { transition: none !important; }
/* a short screen (360 x 560 with the keyboard closed): the four fields, the button and the card's edges all stand */
@media (max-height: 600px) {
  .lead-sheet { padding-top: 8px; padding-bottom: calc(8px + var(--sab)); }
  .lead-card { padding: 2px 18px 16px; border-radius: 22px; }
  .lead-top { height: 46px; }
  .lead-fields { gap: 8px; }
  .lead-f { gap: 4px; }
  .lead-i { height: 44px; border-radius: 12px; }
  .lead-go { height: 50px; margin-top: 6px; }
  .lead-done { gap: 16px; padding-bottom: 24px; }
  .lead-done .seal { --seal-d: 72px; }
}

/* a small round control: the plus that opens (PROMPT: a + or chevron for anything that opens) */
.plus { flex: none; transition: transform 0.25s var(--e-out); }
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] > summary .plus, [aria-expanded="true"] > .plus { transform: rotate(45deg); }
/* the disc is 32 px; the summary round it is the 44 px target */
.plus-box { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--tile-on); color: var(--tile-on-fg); }
details.more > summary, details.tap > summary { display: inline-flex; align-items: center; gap: 8px; min-width: 44px; min-height: 44px; justify-content: center; }
details.more > p, details.tap > .sheet { margin-top: 6px; font: 400 15.5px/1.7 var(--ui); color: var(--fg2); }
.pr-ask { font: 600 16px/1.4 var(--ui); color: var(--fg2); }

/* ------------------------------------------------------------------ the browser window: his site (the founder, 2026-10-09)
   The film's own window (video/site-film Browser.tsx): a pale bar with three dots and the address daydan.co/app, and
   a body on paper. Whatever stands in it is the dashboard, with the dashboard's own words (the board copies them
   from site/app/app.js). build.py writes it (window()); a scene stages what is inside. */
.win { position: relative; z-index: 2; border-radius: 16px; overflow: hidden; background: var(--paper); color: var(--ink); direction: rtl; text-align: start;
  box-shadow: 0 0 0 1px rgba(198,214,232,0.95), 0 34px 60px -26px rgba(11,31,51,0.42), 0 14px 28px -16px rgba(11,31,51,0.28); }
.win-bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: #EEF2F7; border-bottom: 1px solid var(--line); direction: ltr; }
.win-bar::after { content: ""; flex: none; width: 40px; }
.win-dots { flex: none; display: inline-flex; gap: 5px; width: 40px; }
.win-dots i { width: 9px; height: 9px; border-radius: 50%; background: #FF5F57; }
.win-dots i:nth-child(2) { background: #FEBC2E; }
.win-dots i:nth-child(3) { background: #28C840; }
.win-url { margin: 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 58%; height: 20px; padding: 0 12px; border-radius: 7px;
  background: #fff; border: 1px solid var(--line); font: 500 12.5px/1 var(--ui); color: var(--ink3); letter-spacing: 0.01em; }
.win-lock { flex: none; }
.win-body { position: relative; padding: 10px; }
/* the example mark of a window that holds a capture of the demo dashboard: small, in the bar's far corner */
.win-bar > .win-ex { flex: none; order: 3; height: 18px; padding: 0 8px; border-radius: 9px; font: 600 11.5px/18px var(--ui); background: #fff; color: var(--navy2); box-shadow: 0 0 0 1px var(--line); direction: rtl; }
.win-bar:has(> .win-ex)::after { display: none; }
/* a capture of the real dashboard (build.py shot()): it fills its box and is cropped by the box alone; --at is the
   point of its height that stays in view */
img.shot { display: block; width: 100%; height: auto; }
.shotbox { position: relative; overflow: hidden; background: var(--paper); }
.shotbox > img.shot, .da-page > img.shot, .c5-shot > img.shot, .fam-shot > img.shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% var(--at, 0%); }
@media (max-height: 600px) { .win { border-radius: 13px; } .win-bar { height: 24px; } .win-url { height: 17px; font-size: 11.5px; } .win-dots i { width: 7px; height: 7px; } .win-body { padding: 7px; } }

/* ---------------------------------------------------------------- the month of the surgery calendar (2026-10-09)
   The founder, looking at the live page: "the surgery and the drag: let all of it happen in the month's calendar".
   One grid for the three chapters that show his calendar (ch1, ch5, ch7): the dashboard's own month at a computer's
   width, the form that holds names in its cells (D139). month.js plans it and writes its markup; FILM.month (film.js)
   stages it. EVERY value of its look is the dashboard's, set as --mo-* on .mo by build.py from the board's
   calendar.look (site/demo/demo.css .sx-month, .sx-cell, .sx-chip; site/app/app.css .rmd-chip; tokens.css). What is
   chosen here is the zoom and nothing else:
     --mo-vis  the columns in view at rest (build.py, MONTH_VIS): a window on the page is 320 to 440 px wide, a month
               of seven columns with names in it is a computer's; so the camera stands on three days and three weeks,
               after it has shown the month whole (FILM.month's view);
     --mo-k    the type's zoom on the dashboard's own sizes (11 px on a chip): FILM.month sets it so that the widest
               name stands whole in its chip (1 to 1.32);
     --mo-v    the rows' squeeze: a cell of the dashboard is 112 px high or more; here it is as high as its number and
               one chip (two where two stand), so that three weeks stand in a phone's window; a scene whose column
               is short brings it down further (FILM.month's layout);
     --mo-cx, --mo-sx  a cell's and a chip's side padding, 2 px and 1 px under the dashboard's, for the names.
   With script off the grid is the same markup for the film's own day, cropped to its columns, every row in view. */
.mo { --mo-k: 1.12; --mo-v: 0.86; --mo-kv: calc(var(--mo-k) * var(--mo-v)); --mo-cx: 3px; --mo-sx: 5px; position: relative; direction: rtl; text-align: start; }
.mo-top { display: flex; align-items: baseline; padding: 0 4px calc(6px * var(--mo-v)); }
.mo-title { font: 700 calc(13.5px * var(--mo-k))/1.3 var(--ui); color: var(--ink); }
.mo-pane { position: relative; overflow: hidden; border: var(--mo-f-border); border-radius: var(--mo-f-radius); background: var(--mo-f-bg); }
.mo-cam { position: relative; width: calc(100% * 7 / var(--mo-vis, 3.1)); transform: translateX(calc(var(--mo-c0, 0) * 100% / 7)); background: var(--mo-f-bg); }
.mo-head, .mo-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.mo-head { border-bottom: var(--mo-h-border); background: var(--mo-f-bg); }
.mo-grid { border-bottom: var(--mo-c-border); }
.mo-wd { padding: calc(var(--mo-h-pad) * var(--mo-kv)) 2px; text-align: center; white-space: nowrap; font: var(--mo-h-weight) calc(var(--mo-h-size) * var(--mo-k))/1.3 var(--ui); color: var(--mo-h-ink); }
.mo-cell { min-width: 0; display: flex; flex-direction: column; gap: calc(var(--mo-c-gap) * var(--mo-kv));
  min-height: calc((var(--mo-c-pt) + var(--mo-n-disc) + var(--mo-c-gap) + var(--mo-s-h) + var(--mo-c-pb)) * var(--mo-kv) + 2px);
  padding: calc(var(--mo-c-pt) * var(--mo-kv)) var(--mo-cx) calc(var(--mo-c-pb) * var(--mo-kv)); border-inline-start: var(--mo-c-border); border-top: var(--mo-c-border); background: var(--mo-f-bg); }
.mo-cell:nth-child(7n + 1) { border-inline-start: 0; }
.mo-cell:nth-child(-n + 7) { border-top: 0; }
.mo-cell.other { background: var(--mo-c-other); }
.mo-cell.wkend { background: repeating-linear-gradient(135deg, var(--mo-c-wk-a) 0 var(--mo-c-wk-band), var(--mo-c-wk-b) var(--mo-c-wk-band) calc(var(--mo-c-wk-band) * 2)); }
.mo-cell.is-over { background: var(--mo-o-bg); box-shadow: inset 0 0 0 var(--mo-o-ring) var(--mo-o-ink); }
.mo-dn { align-self: flex-start; flex: none; box-sizing: border-box; min-width: calc(var(--mo-n-disc) * var(--mo-kv)); height: calc(var(--mo-n-disc) * var(--mo-kv)); padding: 0 calc(6px * var(--mo-kv)); border-radius: 999px;
  display: grid; place-items: center; font: var(--mo-n-weight) max(10.5px, calc(var(--mo-n-size) * var(--mo-kv)))/1 var(--ui); font-variant-numeric: tabular-nums; color: var(--ink); }
.mo-cell.other .mo-dn { color: var(--mo-c-other-n); }
.mo-cell.past:not(.today) .mo-dn { color: var(--mo-c-past-n); }
.mo-cell.today .mo-dn { background: var(--mo-n-today-bg); color: var(--mo-n-today-ink); }
/* a surgery in a cell of the month: a dot and the name (sxCardHTML, its month mode), in its centre's colour */
.mo-chip { position: relative; flex: none; box-sizing: border-box; display: flex; align-items: center; gap: var(--mo-s-gap); min-width: 0; min-height: calc(var(--mo-s-h) * var(--mo-kv));
  padding: calc(var(--mo-s-py) * var(--mo-kv)) var(--mo-sx); border: var(--mo-s-border) solid transparent; border-radius: var(--mo-s-radius);
  font: 400 calc(var(--mo-s-size) * var(--mo-k))/var(--mo-s-lh) var(--ui); white-space: nowrap; overflow: hidden; }
.mo-chip.cA { background: var(--mo-a-bg); color: var(--mo-a-ink); }
.mo-chip.cB { background: var(--mo-b-bg); border-color: var(--mo-b-border); color: var(--mo-b-ink); }
.mo-dot { flex: none; width: var(--mo-s-dot); height: var(--mo-s-dot); border-radius: 50%; background: var(--mo-b-dot); }
.mo-chip.cA .mo-dot { background: var(--mo-a-dot); }
.mo-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mo-more { align-self: flex-start; font: 700 calc(var(--mo-s-size) * var(--mo-k))/1.3 var(--ui); color: var(--navy2); }
/* a reminder in a cell of the month: white, a full navy outline, a bell, its text on one line (rmdLineHTML, rmd-chip) */
.mo-rmd { flex: none; box-sizing: border-box; display: flex; align-items: center; gap: var(--mo-r-gap); min-width: 0; min-height: calc(var(--mo-r-h) * var(--mo-kv)); padding: calc(var(--mo-r-py) * var(--mo-kv)) var(--mo-sx);
  border: var(--mo-r-border); border-radius: var(--mo-r-radius); background: var(--mo-r-bg); color: var(--mo-r-ink); font: var(--mo-r-weight) calc(var(--mo-r-size) * var(--mo-k))/var(--mo-r-lh) var(--ui); }
.mo-rmd .ic { flex: none; width: calc(var(--mo-r-bell) * var(--mo-k)); height: calc(var(--mo-r-bell) * var(--mo-k)); transform-origin: 50% 12%; }
@media (max-height: 700px) { .mo { --mo-v: 0.76; } }
@media (max-height: 600px) { .mo { --mo-v: 0.68; } }
/* staged by FILM.month: the pane is three weeks high, the camera is a layer that moves and scales (the month whole,
   then the push-in), the weekday row is pinned over it once it stands */
.mo-pin, .mo-ghost, .mo-ring { display: none; }
.mo-live .mo-pane { box-sizing: content-box; background: var(--mist2); }
.mo-live .mo-cam { position: absolute; top: 0; inset-inline-start: 0; transform: none; transform-origin: 100% 0; will-change: transform; }
.mo-live .mo-pin { display: grid; position: absolute; top: 0; inset-inline-start: 0; z-index: 3; width: calc(100% * 7 / var(--mo-vis, 3.1)); pointer-events: none; }
.mo-live .mo-chip, .mo-live .mo-rmd { will-change: transform, opacity; }
/* once the camera is in, a day that is only a sliver at the crop's edge keeps its cell and its chips' ends, not half a number */
.mo-live.is-in .mo-cell.is-part .mo-dn { opacity: 0; }
/* a carried surgery, as the dashboard carries one: a copy of its chip, turned and a little larger, over a shadow
   (.sx-ghost); the place it left stays, faint (.is-dragging) */
.mo-live .mo-ghost { display: block; position: absolute; z-index: 6; left: 0; top: 0; visibility: hidden; pointer-events: none; transform-origin: 50% 20%; will-change: transform, opacity; }
.mo-ghost > .mo-chip { width: 100%; height: 100%; }
.mo-ghost-sh { position: absolute; inset: 0; border-radius: var(--mo-s-radius); box-shadow: var(--mo-d-shadow); opacity: 0; }
/* a surgery that has just landed: the dashboard's ring (sx-land), as a layer that fades */
.mo-live .mo-ring { display: block; position: absolute; z-index: 5; left: 0; top: 0; border-radius: calc(var(--mo-s-radius) + 4px); box-shadow: 0 0 0 4px rgba(55, 138, 221, 0.4); opacity: 0; pointer-events: none; will-change: transform, opacity; }

/* ------------------------------------------------------------------ the family (decision 2; FILM.families)
   The five families of the offer as five lit rows, one under another, in one scene: its count as a large numeral
   disc, its title, a strip of its icons. A tap opens it IN PLACE: .fams keeps its size, the opened head moves to the
   top of it by transform, the other four fade, and its names unfold under it inside the same box (the box scrolls
   inside, with a fade at its foot). Nothing outside .fams moves. One family open at a time. */
.fams { position: relative; z-index: 2; display: grid; gap: var(--fam-gap, 10px); }
.fam-head { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 76px; padding: 8px 16px; border-radius: 24px;
  background: var(--card, #fff); color: var(--ink); box-shadow: var(--sh-card); text-align: start; }
.fam-count { flex: none; width: var(--fam-count, 56px); height: var(--fam-count, 56px); border-radius: 50%; display: grid; place-items: center;
  background: var(--navy); color: #fff; font: 700 calc(var(--fam-count, 56px) * 0.5)/1 var(--ui); font-feature-settings: "tnum"; }
.fam-main { flex: 1; min-width: 0; display: grid; gap: 6px; }
.fam-title { font: 700 var(--fam-fs, 26px)/1.25 var(--ui); color: var(--ink); white-space: nowrap; }
.fam-strip { display: flex; align-items: center; gap: 5px; }
.fam-strip .nl-ic { --nl-tile: 26px; background: var(--navy); color: #fff; }
.fam-strip .nl-ic .ic { width: 58%; height: 58%; }
.fam-plus { margin-inline-start: 3px; font: 700 14px/1 var(--ui); font-feature-settings: "tnum"; color: var(--ink3); }
/* the family's control: a 44 px filled disc at the head's end (the whole head is the button) */
.fam-head > .nl-chev { --chev-d: 44px; position: static; flex: none; background: var(--navy); color: #fff; box-shadow: 0 10px 18px -10px rgba(12,68,124,0.7); }
.fam.is-open .fam-head > .nl-chev path { transform: rotate(180deg); }
.fam-body { padding: 6px 4px 0; }
/* the families' scene: the rows share what the column leaves above the fixed button */
.film-on .groups { display: flex; flex-direction: column; padding-top: calc(var(--head-top) + 18px + env(safe-area-inset-top, 0px)); padding-bottom: var(--safe-b); }
.film-on .groups > .kicker { flex: none; margin-bottom: 8px; }
.film-on .fams { flex: 1 1 0; min-height: 0; grid-auto-rows: minmax(0, 1fr); max-height: calc(5 * 132px + 4 * var(--fam-gap, 10px)); }
.film-on .fam { min-height: 0; }
.film-on .fam-head { height: 100%; min-height: 0; padding-block: 0; }
/* once the rows have landed (FILM.families sets is-live) a head moves and fades by transition */
.film-on .scene.is-on .fams.is-live .fam-head { transition: transform 0.38s var(--e-out), opacity 0.2s linear; will-change: transform; }
.film-on .fam-body { display: none; }
.film-on .fams.is-open .fam:not(.is-open) .fam-head { opacity: 0; pointer-events: none; }
.film-on .fam.is-open .fam-head { transform: translate3d(0, calc(-1px * var(--fam-y, 0)), 0); z-index: 3; }
.film-on .fam.is-open .fam-body { display: block; position: absolute; z-index: 2; left: 0; right: 0; top: calc(1px * var(--fam-row, 110) + 6px); bottom: 0;
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 4px 4px 30px;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 30px), transparent 100%); mask-image: linear-gradient(#000 calc(100% - 30px), transparent 100%); }
.film-on .fam.is-open .fam-body::-webkit-scrollbar { display: none; }
.film-on .fam-body .nl { --nl-row: 50px; --nl-tile: 40px; --nl-fs: clamp(18px, calc(var(--cw) * 0.056), 23px); }
/* an opened family shows EVERY name (the founder, 2026-10-08): nothing is folded behind +N here; a list longer than
   the screen scrolls inside the family's box, under the fade at its foot */
.film-on .fam-body .nl-row.folded { display: block; }
.film-on .fam-body .nl-more { display: none; }
.film-on .fam.is-open .fam-body .nl-row, .film-on .fam.is-open .fam-body .nl-more { animation: fam-row 0.34s var(--e-out) both; animation-delay: calc(var(--i, 0) * 30ms + 80ms); }
/* an opened family's own page of the dashboard: a band of the real capture over its names (build.py fam_band) */
.fam-cap { height: clamp(72px, 12svh, 104px); margin: 2px 0 8px; border-radius: 14px; box-shadow: 0 0 0 1px var(--line2), var(--sh-chip); }
.fam-cap > .fam-ex { position: absolute; top: 6px; inset-inline-start: 6px; height: 18px; padding: 0 8px; border-radius: 9px; font: 600 11.5px/18px var(--ui); background: #fff; color: var(--navy2); box-shadow: 0 0 0 1px var(--line); }
.film-on .fam.is-open .fam-body .fam-cap { animation: fam-row 0.34s var(--e-out) both; animation-delay: 40ms; }
@keyframes fam-row { from { opacity: 0; transform: translate3d(-28px, 0, 0); } to { opacity: 1; transform: none; } }
@media (max-height: 700px) { .fams { --fam-count: 46px; --fam-fs: 22px; --fam-gap: 8px; } .fam-strip .nl-ic { --nl-tile: 22px; } .fam-main { gap: 3px; } }
@media (max-height: 600px) { .fams { --fam-count: 40px; --fam-fs: 20px; --fam-gap: 6px; } .fam-strip .nl-ic { --nl-tile: 20px; } .fam-head { border-radius: 18px; gap: 10px; } }
/* what a scene shows of the product beside a list (a strip, a rail, a week, a card): one lit object with the
   example mark on its shoulder (.ex-host for any other host) */
.gp-obj { display: none; }
.film-on .gp-obj { display: block; position: relative; z-index: 2; flex: none; margin-top: clamp(10px, 2.4svh, 22px); }
.ex-host { position: relative; }
.film-on .gp-obj > .pill.example, .film-on .ex-host > .pill.example { position: absolute; z-index: 3; top: -15px; left: 10px; height: 30px; padding: 0 12px; font-size: 15px;
  box-shadow: var(--sh-chip); }
.film-on .scene[data-world="light"] .gp-obj > .pill.example, .film-on .scene[data-world="light"] .ex-host > .pill.example { background: #fff; color: var(--navy2); }
.film-on .scene[data-world="dark"] .gp-obj > .pill.example, .film-on .scene[data-world="dark"] .ex-host > .pill.example { background: #0C447C; color: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,0.22), 0 10px 18px -10px rgba(0,8,20,0.7); }
.film-on .scene.is-on .gp-obj { animation: obj-float 6.5s var(--e-io) infinite alternate; }
@keyframes obj-float { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -5px, 0); } }

/* ------------------------------------------------------------------ scenes that have no script yet: plain and decent
   These rules hold only while the section says data-built="0"; a scene with its own files starts from a clean sheet. */
.generic { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding-top: 72px; padding-bottom: 104px; }
.film-on .generic { padding-top: calc(var(--head-top) + 12px); padding-bottom: calc(var(--safe-b) + 8px); }
.statement { font: 600 clamp(20px, calc(var(--cw) * 0.058), 26px)/1.55 var(--ui); color: var(--fg); text-wrap: pretty; }
.generic .nl { --nl-row: clamp(46px, 7.2svh, 62px); --nl-fs: clamp(18px, calc(var(--cw) * 0.054), 23px); }
.film-on [data-built="0"] > :is(.price, .guarantees, .gifts) { display: flex; flex-direction: column; justify-content: center; gap: clamp(8px, 1.6svh, 16px);
  padding-top: calc(var(--head-top) + env(safe-area-inset-top, 0px)); padding-bottom: calc(var(--safe-b) + 4px); }
.film-on [data-built="0"] > .content > .head { padding-top: 0; }
[data-built="0"] .seals { --seal-d: 50px; --nl-row: 58px; --nl-fs: clamp(18px, calc(var(--cw) * 0.056), 23px); }
[data-built="0"] .gift-list { --nl-row: 52px; --nl-tile: 42px; --nl-fs: clamp(18px, calc(var(--cw) * 0.056), 23px); }
/* the last scene without its script: the price's plain steps, then the page's end under them; the column scrolls */
.film-on [data-built="0"] > .price { justify-content: flex-start; overflow-y: auto; scrollbar-width: none; }
.film-on [data-built="0"] > .price > * { flex: none; }
[data-built="0"] .seats-line { font-size: 15px; margin-top: 2px; }
[data-built="0"] .end-peak { font-size: clamp(48px, 9.5svh, 96px); }
[data-built="0"] .end-first { font-size: clamp(26px, 4.4svh, 44px); }
.film-on [data-built="0"] .pr-steps { gap: 6px; }
.film-on [data-built="0"] .pr-step { padding: 6px 12px; }
.film-on [data-built="0"] .price .ticket, .film-on [data-built="0"] .price .pr-vat, .film-on [data-built="0"] .pr-in { display: none; }
.film-on [data-built="0"] .nl-second { display: none; }
[data-built="0"] .pr-act { display: grid; justify-items: center; text-align: center; }
.end-first { font: 700 var(--t-end1)/1.2 var(--ui); color: var(--fg); }
.end-peak { position: relative; display: inline-block; }
.fullstop { display: inline-block; width: 0.153em; height: 0.153em; border-radius: 50%; background: var(--blue); margin-inline-start: 0.04em; }
.end-sign { display: grid; justify-items: center; gap: 6px; }
.end-logo { display: inline-flex; flex-direction: column; align-items: center; color: var(--navy); }
.end-logo b { font: 800 34px/1 var(--logo-font); }
.end-logo i { width: 36px; height: 3px; border-radius: 2px; background: var(--sky); margin-top: 5px; }
.end-by { font: 600 16px/1.4 var(--ui); color: var(--fg2); }
.foot { display: flex; justify-content: center; gap: 14px; }
.foot a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; font: 600 15px/1 var(--ui); color: var(--ink3); text-decoration: none; }

/* pieces of the chapters that are not built yet (ART 3.2, 4.3) */
.rail { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 14px; position: relative; z-index: 4; }
.pill.day { background: #fff; color: var(--ink3); border: 1.5px solid var(--line2); height: 30px; font-size: 13.5px; }
.pill.day i { width: 7px; height: 7px; border-radius: 50%; background: var(--line2); }
.pill.day.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.pill.day.on i { background: var(--sky); }
.pill.day.done { background: var(--mist2); color: var(--navy); }
.pill.day.done i { background: var(--ok); }
.film-on .rail, .film-on .chip-clock, .film-on .notice { position: absolute; z-index: 4; left: var(--gut); right: var(--gut); bottom: calc(var(--safe-b) + 8px); margin: 0; }
.chip-clock { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: max-content; margin: 14px auto 0; background: #fff; color: var(--navy);
  border-radius: 999px; padding: 6px 18px; font: 700 24px/1.2 var(--ui); }
.film-on .chip-clock { left: 50%; right: auto; transform: translateX(-50%); }
.notice { background: #fff; border-radius: 18px; border: 2px solid var(--line2); padding: 12px 16px; margin-top: 12px; color: var(--ink); }
.notice-who { font: 600 14.5px/1.4 var(--ui); color: var(--navy2); }
.notice-text { font: 400 15.5px/1.55 var(--ui); }
.film-on .notices { position: absolute; left: var(--gut); right: var(--gut); bottom: calc(var(--safe-b) + 4px); display: grid; gap: 8px; }
.film-on .notices .notice { position: static; margin: 0; }
.c3-msg { margin-top: 14px; text-align: center; }

/* at rest a device is never still: it floats a few px, on the compositor (ART 5.9) */
.film-on .scene.is-on .device > .phone-box { animation: dev-float 6.5s var(--e-io) infinite alternate; }
@keyframes dev-float { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -6px, 0); } }

.film-still *, .film-still *::before, .film-still *::after { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .film-on .scene.is-on .device > .phone-box, .film-on .scene.is-on .gp-obj { animation: none; }
  .film-on .scene.is-on[data-push="1"] > .content, .film-on .viewport[data-push="1"] > .dot-box { animation: none; }
  .world.dark .grid::before, .world .orb { animation: none; }
  .bar-cta, .progress i, .plus, .nl-chev path { transition: none; }
}

/* ---- the ticket as one object of the film (the four money scenes; FILM.tkt gives its motion) ---- */
/* film.css's .ticket above is the plain form; here it gets the film's depth and the pieces a scene plays: the
   light that passes over a changed line, the place a line fills, the small seals on its shoulder. Every
   rule is under .film-on and .tkt (the class FILM.tkt adds), so the plain ticket of a scene without a script is
   untouched. Sizes are the scene's own (each restyles the ticket inside its #s-<id>). */
/* the card: the film's two ink shadows, and on paper a blue bloom under it (PROMPT, decision 7) */
/* its paper is cut by two notches where its monthly part begins (--tkt-notch, set by ticket.js): a ticket, not a
   card. The paper is one layer (masked), the shadows another under it (a mask would cut them) */
.film-on .scene .ticket.tkt { isolation: isolate; transform-origin: 50% 50%; will-change: transform; background: none; box-shadow: none; }
.film-on .scene .ticket.tkt::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: #fff; pointer-events: none;
  -webkit-mask: radial-gradient(circle 9px at 0 var(--tkt-notch, -40px), transparent 8.4px, #000 9px), radial-gradient(circle 9px at 100% var(--tkt-notch, -40px), transparent 8.4px, #000 9px);
  mask: radial-gradient(circle 9px at 0 var(--tkt-notch, -40px), transparent 8.4px, #000 9px), radial-gradient(circle 9px at 100% var(--tkt-notch, -40px), transparent 8.4px, #000 9px);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
.film-on .scene .ticket.tkt::after { content: ""; position: absolute; inset: 0; z-index: -2; border-radius: inherit; pointer-events: none; }
.film-on .scene[data-world="light"] .ticket.tkt::after { box-shadow: 0 0 0 1px rgba(198,214,232,0.7), 0 44px 80px -30px rgba(11,31,51,0.36), 0 20px 40px -22px rgba(11,31,51,0.26),
  0 30px 90px 6px rgba(55,138,221,0.16); }
.film-on .scene[data-world="dark"] .ticket.tkt::after { box-shadow: 0 60px 120px -30px rgba(0,8,20,0.75), 0 30px 60px -20px rgba(0,8,20,0.55); }
/* the perforation: the line where the monthly part begins */
.film-on .scene .ticket.tkt .tk-row.tkt-perf { border-top: 2px dashed var(--line2); }

/* a line: its own layer, so a light can pass behind its type */
.film-on .tkt .tk-row { position: relative; isolation: isolate; }
.film-on .tkt .tk-row > * { will-change: transform, opacity; }
/* the light that passes over a line something has just changed */
.film-on .tkt .tk-row::after { content: ""; position: absolute; z-index: -1; inset: 3px -9px; border-radius: 12px; background: var(--sky); opacity: var(--tkt-flash, 0);
  pointer-events: none; }
/* numerals in one column: tabular, their last digit on one edge, the unit right after */
.film-on .tkt .tk-fig .num { display: inline-block; font-feature-settings: "tnum"; }
/* the extras' line reads count, times, price, unit in that order: its two numerals are one left-to-right run */
.film-on .tkt .tk-row[data-key="extra"] .tk-fig { direction: ltr; }
/* the extras' count */
.film-on .tkt .tk-n { font-weight: 700; color: var(--ink2); }

/* the seals of the guarantees, small, on the ticket's shoulder (the last scene stamps them there) */
.film-on .tkt .tkt-seals { position: absolute; z-index: 3; top: -19px; inset-inline-end: 14px; display: flex; flex-direction: row-reverse; pointer-events: none; }
.film-on .tkt .tkt-seal { --seal-d: 28px; --seal: var(--navy); --seal-fg: #fff; margin-inline-start: -7px; opacity: 0; filter: drop-shadow(0 4px 5px rgba(6,23,43,0.3)); }
.film-on .tkt .tkt-seal::after { display: none; }
.film-on .tkt .tkt-seal:nth-child(1) { transform: rotate(-9deg); }
.film-on .tkt .tkt-seal:nth-child(2) { transform: rotate(5deg); }
.film-on .tkt .tkt-seal:nth-child(3) { transform: rotate(-3deg); }
.film-on .tkt .tkt-seal .ic { stroke-width: 3; width: 46%; height: 46%; }
html:not(.film-on) .tkt-seals { display: none; }

/* at rest the card is never still: it floats a few px, on the compositor (ART 5.9). The float is on the card's own
   translate, so the scene's transform (its arrival, its shake) is left alone */
@supports (translate: 0 1px) {
  .film-on .scene.is-on .ticket.tkt { animation: tkt-float 6.5s var(--e-io) 1.2s infinite alternate; }
  @keyframes tkt-float { from { translate: 0 0; } to { translate: 0 -4px; } }
}

/* ------------------------------------------------------------------ a pointer and a keyboard (the founder reads the
   page on a computer too, 2026-10-09). Everything that opens answers the pointer: its control lights and grows a
   little, the row's name takes the key colour; and everything that takes a tap shows where the keyboard's focus is. */
.fam-head, button.nl-btn, .nl-more, .c5-more, .pr-back, .st-btn, .btn, .bar-cta, .foot a, .signin, details > summary, .film-on #s-price .pr-div, .film-on #s-price .tk-row { cursor: pointer; }
.nl-chev, .plus-box { transition: box-shadow 0.18s var(--e-out), scale 0.18s var(--e-out); }
@media (hover: hover) {
  .fam-head:hover > .nl-chev, button.nl-btn:hover .nl-chev, .c5-more:hover .nl-chev, details > summary:hover .plus-box, .notice:hover .c5-more .nl-chev {
    scale: 1.08; box-shadow: 0 0 0 4px rgba(133,183,235,0.5); }
  .fam-head:hover { box-shadow: var(--sh-card), 0 0 0 2px var(--sky); }
  button.nl-btn:hover .nl-name { color: var(--key); }
  .film-on #s-gifts button.nl-btn:hover .nl-name, .film-on #s-guarantees button.nl-btn:hover .nl-name { color: inherit; }
  .film-on #s-guarantees button.nl-btn:hover .nl-name { color: var(--navy); }
  .nl-more:hover, .st-btn:not([disabled]):hover { filter: brightness(1.12); }
  .btn:hover, .bar-cta:hover { filter: brightness(1.1); }
  .foot a:hover, .signin:hover, details > summary:hover .pr-ask { text-decoration: underline; text-underline-offset: 4px; }
  .film-on #s-price .pr-div:hover, .film-on #s-price .tk-row.pr-sum:hover { background: var(--mist); }
  .film-on #s-price .tk-row:hover .pr-disc { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--sky); }
}
.fam-head:focus-visible, button.nl-btn:focus-visible, .nl-more:focus-visible, .c5-more:focus-visible, .pr-back:focus-visible, .st-btn:focus-visible, .btn:focus-visible,
.bar-cta:focus-visible, .foot a:focus-visible, .signin:focus-visible, details > summary:focus-visible, .tr-plus:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; border-radius: 14px; }
.film-still .nl-chev, .film-still .plus-box { transition: none !important; }

/* ---- the month's look: written by build.py from the board's calendar.look (the dashboard's own values) ---- */
.mo { --mo-f-border: 1px solid #dce6f2; --mo-f-radius: 16px; --mo-f-bg: #ffffff; --mo-h-border: 1px solid #dce6f2; --mo-h-pad: 8px; --mo-h-size: 11px; --mo-h-weight: 600; --mo-h-ink: #5b6b7c; --mo-c-pt: 4px; --mo-c-px: 5px; --mo-c-pb: 6px; --mo-c-gap: 3px; --mo-c-border: 1px solid #dce6f2; --mo-c-min: 112px; --mo-c-other: #fbfcfe; --mo-c-other-n: #c6d6e8; --mo-c-past-n: #5b6b7c; --mo-c-wk-a: #f3f7fc; --mo-c-wk-b: #ffffff; --mo-c-wk-band: 6px; --mo-n-disc: 26px; --mo-n-size: 13px; --mo-n-weight: 700; --mo-n-today-bg: #0c447c; --mo-n-today-ink: #ffffff; --mo-s-h: 26px; --mo-s-py: 2px; --mo-s-px: 6px; --mo-s-radius: 6px; --mo-s-gap: 4px; --mo-s-size: 11px; --mo-s-lh: 1.3; --mo-s-border: 1px; --mo-s-dot: 6px; --mo-a-bg: #0c447c; --mo-a-ink: #ffffff; --mo-a-dot: #5fd0a8; --mo-b-bg: #e3eefa; --mo-b-ink: #0b1f33; --mo-b-border: #c9ddf3; --mo-b-dot: #0f6e56; --mo-o-bg: #e8f1fb; --mo-o-ring: 2px; --mo-o-ink: #378add; --mo-d-left: 0.28; --mo-d-shadow: 0 18px 40px -12px rgba(11, 31, 51, 0.45); --mo-r-border: 1.5px solid #185fa5; --mo-r-bg: #ffffff; --mo-r-ink: #0c447c; --mo-r-weight: 600; --mo-r-gap: 5px; --mo-r-h: 24px; --mo-r-py: 1px; --mo-r-px: 6px; --mo-r-radius: 6px; --mo-r-size: 11px; --mo-r-lh: 1.3; --mo-r-bell: 12px; }

/* ---- scenes/hook.css ---- */
/* hook: the surgeon's phone at night, flooded; the collapse into the point; the logo slam; then the first screen at
   rest: the logo is the corner mark, the headline owns the screen, and his phone stands under it, quiet: the clock and
   the date, no message (round 1: a flood left under the solution said that somebody answers his patients for him).
   Film: scenes/S1Hook.tsx, motion/beats1.tsx (B3Logo); ART 4.2 (lock screen), 5.5 (the flood), 6 (the hook's layout). */

.hook { --hk-top: 8.2svh; }

/* ---- the lock screen (built at the film's 430 x 932; the card's text is larger than the film's so that a
        sender reads at 17 px and a message at about 20 px on a 375 px screen) */
.hk-wall { position: absolute; inset: 0; background: radial-gradient(120% 80% at 30% 10%, #27416a 0%, #0d1726 60%, #070b12 100%); }
.hk-clock { position: absolute; top: 96px; width: 100%; text-align: center; color: rgba(255,255,255,0.92); }
.hk-date { font-size: 18px; font-weight: 500; line-height: 1.5; }
.hk-time { font-size: 96px; font-weight: 600; line-height: 1.1; font-feature-settings: "tnum"; }
.hk-cards { position: absolute; top: 290px; left: 14px; right: 14px; height: 560px; overflow: hidden; display: grid; align-content: start; gap: 10px; }
.hk-card { width: 402px; height: 92px; border-radius: 24px; background: rgba(236,240,245,0.94); box-shadow: 0 8px 24px -10px rgba(0,0,0,0.45);
  display: flex; align-items: center; gap: 12px; padding: 0 14px; direction: rtl; }
.hk-app { flex: none; width: 46px; height: 46px; border-radius: 12px; background: linear-gradient(160deg, #5fcf7e, #2fae5c); display: grid; place-items: center; }
.hk-tx { flex: 1; min-width: 0; line-height: 1.32; }
.hk-who { display: flex; justify-content: space-between; align-items: baseline; font-size: 22px; color: #111; }
.hk-who b { font-weight: 700; }
.hk-who small { font-weight: 400; font-size: 16px; color: #6b7178; }
.hk-msg { font-size: var(--hk-msg, 25px); color: #222; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- the two lines of the film (ART 3.2: Plex 700 on the page; one key word on the older sky underline, ART 3.3) */
.hk-cap { font: 700 var(--t-hook)/1.18 var(--ui); color: #fff; text-align: center; text-wrap: balance; }
.film-on .hk-cap { white-space: nowrap; text-wrap: wrap; }      /* the film's break: the key word alone on the second line (hook.js) */
.hk-cap .hl { color: #fff; }
.hk-cap .hl::before { z-index: 0; inset-inline: 0; bottom: 0.02em; height: 0.075em; border-radius: 99px; opacity: 0.9; }

/* ---- the first screen at rest */
.hk-ex { margin-top: 18px; }
.hk-rest { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 40px 0 40px; }
.hk-logo { display: flex; flex-direction: column; align-items: center; color: #fff; }
.hk-logo b { font: 800 var(--t-logo)/1 var(--logo-font); }
.hk-bar { display: block; width: calc(var(--t-logo) * 1.03); height: max(5px, calc(var(--t-logo) * 0.05)); border-radius: 99px; background: var(--sky);
  margin-top: calc(var(--t-logo) * 0.17); box-shadow: 0 0 calc(var(--t-logo) * 0.2) rgba(133,183,235,0.6); }
.hk-audience { margin-top: 24px; font: 600 15px/1.55 var(--ui); color: var(--sky); text-wrap: balance; max-width: 30ch; }
.hk-logo + .hk-headline { margin-top: 26px; }
.hk-headline { margin-top: 10px; font: 700 var(--t-hook)/1.24 var(--ui); color: #fff; }
.hk-headline .ln { display: block; white-space: nowrap; }
.hk-ell { font-size: 0.7em; }
.hk-own { margin-top: 12px; font: 600 var(--t-line)/1.45 var(--ui); color: #fff; text-wrap: balance; }
.hk-small { margin-top: 12px; font: 600 clamp(15px, calc(var(--cw) * 0.046), 20px)/1.5 var(--ui); color: rgba(255,255,255,0.8); text-wrap: balance; }
.hk-rest .btn { margin-top: 24px; }
/* the one line under the button: what happens after the tap, small and quiet, broken after its comma */
.hk-rest .under { max-width: 40ch; margin-top: 12px; font: 500 14px/1.5 var(--ui); color: rgba(255,255,255,0.72); text-wrap: balance; }

.hk-flood { padding-bottom: 20px; }
.hk-caps { display: grid; gap: 6px; }
.hk-device { --ps: var(--hs); width: calc(456px * var(--hs)); margin: 22px auto 0; }
.hk-more { width: max-content; margin: -64px auto 0; position: relative; z-index: 3; background: rgba(7,11,18,0.8); border: 1px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.94); font: 600 15px/1.2 var(--ui); padding: 8px 16px; border-radius: 99px; box-shadow: 0 10px 24px -10px rgba(0,0,0,0.6); }
.hk-point { display: none; }

/* ---- film mode: two layers on the stage. The flood plays; on the cut the logo owns the screen for a beat (the
        film's logo scene), flies to the corner and is the mark; the headline slams; the phone rises back, quiet. */
/* the example mark rides the phone's shoulder while the flood plays: it marks the invented messages, not the page */
.film-on .hk-ex { position: absolute; z-index: 5; margin: 0; top: -14px; left: 16px; height: 30px; background: #0C447C; color: #fff;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.24), 0 12px 22px -10px rgba(0,8,20,0.8); }
/* the phone stands in a light of its own */
.film-on .hk-device::before { content: ""; position: absolute; z-index: -1; left: -30%; right: -30%; top: -12%; height: 74%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(55,138,221,0.42), rgba(55,138,221,0.12) 60%, rgba(55,138,221,0)); pointer-events: none; }
.film-on .hk-rest, .film-on .hk-flood { position: absolute; inset: 0; }
.film-on .hk-rest { z-index: 2; justify-content: flex-start; padding: calc(13.2svh + env(safe-area-inset-top, 0px)) var(--gut) 0; pointer-events: none; }
.film-on .hk-rest > * { pointer-events: auto; }
.film-on .hk-flood { z-index: 1; padding: 0 var(--gut); pointer-events: none; }
.film-on .hk-logo { position: absolute; left: 0; right: 0; top: calc(40% - var(--t-logo) * 0.6); will-change: transform; pointer-events: none; }
.film-on .hk-headline { margin-top: 0; }
.film-on .hk-audience { margin: 0 0 10px; }
.film-on .hk-caps { position: absolute; top: calc(var(--hk-top) + env(safe-area-inset-top, 0px)); left: var(--gut); right: var(--gut); display: block; }
.film-on .hk-cap { position: absolute; top: 0; left: 0; right: 0; visibility: hidden; }
.film-on .hk-device { position: absolute; margin: 0; left: calc(50% - 228px * var(--hs));
  top: calc(var(--hk-top) + env(safe-area-inset-top, 0px) + var(--t-hook) * 2.36 + 26px); transform-origin: 50% 50%; will-change: transform; }
/* the cards' window is cut at its foot only (over the +N pill): a card dropping in from above is whole, and the
   cards keep their shadows at the sides */
.film-on .hk-cards { display: block; overflow: visible; -webkit-clip-path: inset(-90px -40px 0 -40px); clip-path: inset(-90px -40px 0 -40px); }
.film-on .hk-card { position: absolute; top: 0; left: 0; will-change: transform, opacity; }
.film-on .hk-more { position: absolute; margin: 0; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); }
/* on the page the lock screen's clock stands a little higher than the film's, so one more message is whole in view */
.film-on .hk-clock { top: 78px; }
.film-on .hk-cards { top: 262px; }
.film-on .hk-point { display: block; position: absolute; left: 0; top: 0; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; background: #fff; opacity: 0;
  will-change: transform, opacity; }
/* its glow is drawn once and scaled with it (an animated box-shadow was repainted on every frame) */
.film-on .hk-point::after { content: ""; position: absolute; inset: -56px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(133,183,235,0.9), rgba(133,183,235,0.35) 45%, rgba(133,183,235,0)); }

/* before the script runs the phone already stands as the clip's first frame has it (hook.js, frame 0): the film
   starts without a jump */
.film-on .scene:not(.is-ready) .hk-device { transform: perspective(2200px) rotateY(14deg) rotateX(4deg) scale(0.965); }

/* at rest the phone is never still: it floats a few px, as every device does (film.css, dev-float) */
.film-on .scene.is-on .hk-device.at-rest > .phone-box { animation: dev-float 6.5s var(--e-io) infinite alternate; }
@media (prefers-reduced-motion: reduce) { .film-on .scene.is-on .hk-device.at-rest > .phone-box { animation: none; } }

/* a short screen: the lock screen's clock stands higher and the pill lower, so two whole messages are in view */
@media (max-height: 600px) {
  .film-on .hk-clock { top: 60px; }
  .film-on .hk-time { font-size: 84px; }
  .film-on .hk-cards { top: 226px; }
  .film-on .hk-more { bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-height: 700px) {
  .hook { --hk-top: 6.4svh; }
  .film-on .hk-rest { padding-top: calc(11svh + env(safe-area-inset-top, 0px)); }
  .hk-small { margin-top: 8px; }
  .hk-rest .btn { margin-top: 16px; height: 52px; }
  .hk-rest .under { margin-top: 8px; }
}

/* ---- scenes/pitch.css ---- */
/* pitch: the page's second scene (the founder, 2026-10-09: the pitch was not on the page). His four lines, type on the
   navy stage, no device and no picture: the proverb in the name's huge type with its key word on the sky bar; the two
   supporting lines, calmer and smaller; and, set apart under a short sky rule, the resolve: the brand word in the
   logo's face over its sky bar (as the hook and the close set the brand), and its last words large, the landing.
   Navy like the hook before it: the two open the page as one dark pair; chapter 1's paper is the first change. */
.pitch { display: flex; flex-direction: column; justify-content: center; text-align: start; }
.film-on .pitch { padding-top: calc(64px + env(safe-area-inset-top, 0px)); padding-bottom: var(--safe-b); }
.pt-head { font-size: clamp(44px, calc(var(--cw) * 0.15), 64px); line-height: 1.16; }
.pt-lines { margin-top: clamp(18px, 3.4svh, 34px); display: grid; gap: clamp(8px, 1.4svh, 14px); }
.pt-line { font: 500 clamp(18px, calc(var(--cw) * 0.052), 22px)/1.55 var(--ui); color: var(--fg2); text-wrap: pretty; }
/* the resolve, apart: a short sky rule, then the sentence; its last words on a line of their own, large */
.pt-res { position: relative; margin-top: clamp(26px, 5svh, 52px); padding-top: clamp(16px, 2.6svh, 24px); font: 600 clamp(20px, calc(var(--cw) * 0.058), 25px)/1.6 var(--ui); color: #fff; }
.pt-res::before { content: ""; position: absolute; top: 0; inset-inline-start: 0; width: 44px; height: 3px; border-radius: 2px; background: var(--sky); transform: scaleX(var(--pt-rule, 1)); transform-origin: right; }
.pt-a { display: block; text-wrap: balance; }
.pt-brand { position: relative; display: inline-block; margin-inline: 0.12em; font: 800 1.22em/1 var(--logo-font); color: #fff; }
.pt-brand::after { content: ""; position: absolute; inset-inline: 4%; bottom: -0.16em; height: max(3px, 0.07em); border-radius: 99px; background: var(--sky); transform: scaleX(var(--pt-bar, 1)); transform-origin: right; }
.pt-b { display: block; margin-top: clamp(4px, 1svh, 10px); font: 700 clamp(34px, calc(var(--cw) * 0.118), 50px)/1.25 var(--ui); color: var(--sky); transform-origin: 100% 60%; white-space: nowrap; }
.film-on .pt-b, .film-on .pt-line, .film-on .pt-a { will-change: transform, opacity; }

@media (max-height: 700px) {
  .film-on .pitch { padding-top: calc(52px + env(safe-area-inset-top, 0px)); }
  .pt-head { font-size: clamp(38px, calc(var(--cw) * 0.128), 52px); }
  .pt-line { font-size: 17px; line-height: 1.5; }
  .pt-res { font-size: 19px; line-height: 1.5; }
  .pt-b { font-size: clamp(30px, calc(var(--cw) * 0.1), 40px); }
}
@media (max-height: 600px) {
  .pt-head { font-size: 34px; }
  .pt-lines { margin-top: 12px; gap: 6px; }
  .pt-line { font-size: 16px; line-height: 1.45; }
  .pt-res { margin-top: 18px; padding-top: 12px; font-size: 17.5px; }
  .pt-b { font-size: 28px; }
}

/* ---- scenes/ch1.css ---- */
/* ch1: enrolment in one WhatsApp message, as the product does it today (the board's v3 chat): the surgeon's one line,
   typed in the lifted input field and sent; Daydan's reading of it as a WhatsApp interactive message with its two
   reply buttons; his tap on the first; the tap as his own reply; the answer that the welcome arrived.
   The phone, the chat and the buttons' form are the system's (film.css); what is here is the scene's own. */

/* the chat at 24 px on the 430 px screen (15.8 px in the hand), and the reading's bubble wide enough for its longest
   line to stand whole: a parsed field is never broken off its label */
.ch1 .wa { --fs: 24px; }
.ps-small .ch1 .wa { --fs: 25px; }
.ch1 .wa-msg.in { max-width: 95%; }
.ps-small .ch1 .wa-msg.in { max-width: 97%; }
.ch1 .wa-msg.has-btns { min-width: 74%; }

/* the reading, line by line (ch1.js regroups the page's own lines); its empty line is a paragraph's breath */
.c1-l { display: block; }
.c1-gap { display: block; height: 0.62em; }

/* the two reply buttons, as WhatsApp draws them: side by side under the message, the reply mark before the label */
.ch1 .wa-btns { position: relative; }
.ch1 .wa-btn { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; font-weight: 500; transform-origin: 50% 50%; }
.ch1 .wa-btn::before { content: ""; flex: none; width: 21px; height: 21px; background: currentColor; opacity: 0.9;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M9 14L4 9l5-5'/><path d='M4 9h10.5a5.5 5.5 0 010 11H12'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M9 14L4 9l5-5'/><path d='M4 9h10.5a5.5 5.5 0 010 11H12'/></svg>") center / contain no-repeat; }
.film-on .ch1 .wa-btn { will-change: transform; }

/* a one-word reply carries its time beside it, as a short message does */
.ch1 .wa-msg.c1-short .wa-bub { display: flex; align-items: flex-end; gap: 12px; padding: 6px 11px 6px 9px; }
.ch1 .wa-msg.c1-short .wa-meta { margin: 0 0 3px; }

/* the thread's slide is the scene's own (a layer around the chat's thread): a bubble is never left as a thin edge
   under the chat's header, and of the reading no line is ever cut in half */
.c1-slide { position: absolute; inset: 0; will-change: transform; }

/* his finger: the film's 44 px press disc (ART 4.5), drawn in the device's own px */
.c1-tap { display: none; }
.film-on .c1-tap { display: block; position: absolute; z-index: 5; left: 0; top: 0; width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 50%;
  background: rgba(55,138,221,0.30); border: 3px solid rgba(255,255,255,0.96);
  box-shadow: 0 0 0 2px rgba(55,138,221,0.5), 0 16px 28px -8px rgba(11,31,51,0.5); visibility: hidden; pointer-events: none; will-change: transform, opacity; }

/* ---------------------------------------------------------------- the second beat: the same patient, from his site
   (the founder, 2026-10-09). One small line under the benefit, his own words; and the film's browser window
   (film.css .win), which rises over the phone's lower part once the WhatsApp beat has played. In it, as the
   dashboard has them: the month of his calendar (film.css .mo; the founder's ruling of the same day: the calendar is
   the month), and over it the sheet for a new surgery (its title, its fields with the same example, its button).
   Once the button is pressed the sheet leaves and the surgery lands on its day. Every word is the board's. */
.ch1 .also { margin-top: 3px; font: 600 clamp(15.5px, calc(var(--cw) * 0.045), 18px)/1.4 var(--ui); color: var(--key); }
.c1-site { margin-top: 14px; }
.film-on .c1-site { position: absolute; z-index: 4; left: var(--gut); right: var(--gut); top: 46%; margin: 0; transform-origin: 50% 100%; visibility: hidden; will-change: transform, opacity; }
.c1-site .win-body { padding: 8px; background: var(--mist2); }
/* the sheet for a new surgery: the labels in one column, each value in the form the dashboard gives it */
.c1-sheet { margin-top: 8px; padding: 9px 12px 11px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 -12px 22px -18px rgba(11,31,51,0.35);
  display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: 5px 10px; }
.c1-sheet-t { grid-column: 1 / -1; margin-bottom: 1px; font: 700 16.5px/1.3 var(--ui); color: var(--ink); }
.c1-f { display: contents; }
.c1-fl { font: 500 13px/1.25 var(--ui); color: var(--ink2); white-space: nowrap; }
.c1-fv { min-width: 0; display: flex; min-height: 28px; align-items: center; }
.c1-in { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 9px; background: var(--mist2); border: 1px solid var(--line2);
  font: 500 14.5px/1 var(--ui); color: var(--ink); white-space: nowrap; }
.c1-in[dir="ltr"] { justify-content: flex-start; font-feature-settings: "tnum"; }   /* the dashboard sets a mobile from the left */
.c1-in .ic { flex: none; width: 15px; height: 15px; color: var(--navy2); }
.c1-chip { display: inline-flex; align-items: center; max-width: 100%; height: 26px; padding: 0 10px; border-radius: 13px; background: var(--navy); color: #fff;
  font: 600 clamp(12px, calc(var(--cw) * 0.0345), 13.5px)/1 var(--ui); white-space: nowrap; }
.c1-seg { display: inline-flex; padding: 2px; border-radius: 10px; background: var(--mist); }
.c1-seg i { min-width: 54px; padding: 5px 10px; border-radius: 8px; text-align: center; font: normal 600 13.5px/1.1 var(--ui); color: var(--ink2); }
.c1-seg i.on { background: #fff; color: var(--navy); box-shadow: 0 1px 3px rgba(11,31,51,0.22); }
.c1-save { grid-column: 1 / -1; margin-top: 4px; display: flex; align-items: center; justify-content: center; height: 36px; border-radius: 11px; background: var(--navy); color: #fff;
  font: 700 15px/1 var(--ui); transform-origin: 50% 50%; }
/* his finger on the sheet's button: the press disc at the page's own size */
.film-on .c1-tap2 { width: 44px; height: 44px; margin: -22px 0 0 -22px; border-width: 2px; z-index: 6; }
/* the window leaves the phone's head in view: on a phone the centre (the reading has it) stays behind, and the
   sheet stands a step closer; on a short one the mobile too */
@media (max-height: 880px) {
  .c1-f[data-key="center"] { display: none; }
  .c1-sheet { gap: 4px 10px; padding: 8px 12px 10px; }
  .c1-fv { min-height: 27px; } .c1-in { height: 27px; } .c1-save { height: 34px; margin-top: 3px; }
}
@media (max-height: 700px) {
  .c1-sheet { padding: 7px 11px 9px; }
  .c1-fv { min-height: 26px; } .c1-in { height: 26px; } .c1-save { height: 33px; }
}
@media (max-height: 600px) {
  .ch1 .also { font-size: 15px; margin-top: 1px; }
  .c1-site .win-body { padding: 6px; }
  .c1-sheet { margin-top: 6px; gap: 3px 9px; padding: 6px 10px 8px; }
  .c1-sheet-t { font-size: 15.5px; }
  .c1-fv { min-height: 24px; } .c1-in { height: 24px; font-size: 14px; } .c1-chip { height: 23px; } .c1-seg i { padding: 3px 9px; } .c1-save { height: 30px; font-size: 14.5px; }
  .c1-f[data-key="mobile"] { display: none; }
}

/* ---------------------------------------------------------------- the real sheet (2026-10-09): a capture, in a pane
   The window holds the month and, over it, a pane on the capture of the dashboard's own sheet for a new surgery
   (shots/add-surgery.jpg, taken with this chapter's example typed in): in the film the pane covers the window's
   body, as the sheet lies over the calendar in the dashboard, and leaves downwards once its button is pressed. The
   capture is as wide as the pane and taller than it: ch1.js slides it up, from the sheet's head to its foot. With
   script off the pane stands under the month and shows the sheet's head. */
.c1-pane { position: relative; margin-top: 8px; height: 300px; overflow: hidden; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.c1-pane > img.shot { display: block; width: 100%; height: auto; will-change: transform; }
.film-on .c1-pane, .film-on .c1-sheet { position: absolute; inset: 0; z-index: 8; height: auto; margin: 0; border-radius: 0; box-shadow: 0 -10px 24px -14px rgba(11,31,51,0.4); will-change: transform; }
.film-on .c1-sheet { align-content: start; overflow: hidden; }
@media (max-height: 600px) { .c1-pane { margin-top: 6px; border-radius: 11px; } }

/* ---- scenes/ch2.css ---- */
/* ch2: automatic follow-up on the surgeon's protocol (services/chapters.tsx, ChFollow).
   The patient's phone with the surgeon's name as the chat, and the protocol's day rail: one line of pills low on the
   device, centred on the live day, its ends fading (no pill is cut hard by the screen). Done days carry a green
   tick, the live day is navy with a sky dot, the days to come are white (chapters.tsx:72). */

/* the pills, in both modes (ART 3.2: Plex 600, 15 px, h 34; the film's three states) */
.ch2 .pill.day { position: relative; flex: none; height: 34px; padding: 0 14px; gap: 7px; font-size: 15px;
  background: #fff; color: var(--ink3); border: 1.5px solid var(--line2); }
.ch2 .pill.day > i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--line2); }
.ch2 .pill.day.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.ch2 .pill.day.on > i { background: var(--sky); }
.ch2 .pill.day.done { background: var(--mist); color: var(--navy); border-color: var(--line2); }
/* the film's tick, drawn */
.ch2 .pill.day.done > i { width: 12px; height: 10px; border-radius: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'><path d='M1.5 5.2l3 3 6-6.7' fill='none' stroke='%230F6E56' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat; }

/* a one-figure answer carries its time beside it; an empty line of the day's text is a paragraph's breath */
.ch2 .wa-msg.c2-short .wa-bub { display: flex; align-items: flex-end; gap: 12px; padding: 6px 11px 6px 9px; }
.ch2 .wa-msg.c2-short .wa-meta { margin: 0 0 3px; }
.c2-gap { display: block; height: 0.62em; }
/* the wall's own paper over the foot of the chat (its pattern in register with the wall's): what of the day's text
   does not fit above the rail dissolves into it, so no pill ever lies on a line of text */
.c2-fade { display: none; }
.film-on .c2-fade { display: block; position: absolute; inset: 0; z-index: 2; background: inherit; pointer-events: none; visibility: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent calc(var(--c2-fold, 9999px) - 64px), #000 calc(var(--c2-fold, 9999px) - 8px));
          mask-image: linear-gradient(to bottom, transparent calc(var(--c2-fold, 9999px) - 64px), #000 calc(var(--c2-fold, 9999px) - 8px)); }

/* the film: one line over the device's foot, just above the fixed button */
.film-on .ch2 .rail { position: absolute; z-index: 4; left: 0; right: 0; bottom: calc(var(--safe-b) - 12px); height: 62px;
  margin: 0; display: block; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(to left, transparent 0, #000 10%, #000 90%, transparent 100%);
          mask-image: linear-gradient(to left, transparent 0, #000 10%, #000 90%, transparent 100%); }
.c2-track { position: absolute; top: 8px; right: 0; display: flex; gap: 8px; direction: rtl; will-change: transform; }
.film-on .ch2 .pill.day { box-shadow: 0 10px 24px -10px rgba(11,31,51,0.34), 0 4px 10px -6px rgba(11,31,51,0.24); will-change: transform, opacity; }
.film-on .ch2 .pill.day.on { box-shadow: 0 12px 26px -10px rgba(12,68,124,0.6), 0 4px 10px -6px rgba(11,31,51,0.3); }

/* the day's message has gone out: a ring leaves the live pill once */
.c2-ping { position: absolute; inset: -3px; border-radius: 999px; border: 2px solid var(--blue); opacity: 0; pointer-events: none; }

/* at rest the live day breathes */
.film-on .scene.is-on .ch2 .pill.day.on > i { animation: c2-live 2.6s var(--e-io) infinite; }
@keyframes c2-live { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.45); opacity: 0.6; } }
@media (prefers-reduced-motion: reduce) { .film-on .scene.is-on .ch2 .pill.day.on > i { animation: none; } }

@media (max-height: 700px) {
  .ch2 .pill.day { height: 32px; padding: 0 12px; }
  .film-on .ch2 .rail { height: 58px; }
}

/* ---------------------------------------------------------------- one beat before the phone: the protocol's editor
   A real capture of the dashboard's editor in the film's browser window (film.css .win, .shotbox; build.py). In the
   film it stands where the phone will and is gone at rest (ch2.js); with script off it is a block under the phone. */
.c2-win { margin-top: 14px; }
.c2-win .win-body { padding: 0; }
.c2-win .shotbox { height: 320px; }
.film-on .c2-win { position: absolute; z-index: 6; left: var(--gut); right: var(--gut); top: 40%; margin: 0; transform-origin: 50% 30%; visibility: hidden; will-change: transform, opacity; }

/* ---- scenes/ch3.css ---- */
/* ch3: the instant alert (services/chapters.tsx, ChAlert; ART 5.6). The only scene that uses the danger red:
   the dot and its trail, the ring, the phone's glow and the stage's light, from the hit on.
   The danger is HELD at rest by light, not by marks: the phone glows red and the stage is red behind it
   (film.css, .world.dark.danger). No hairline ring and no parked dot is left: those read as a badge. */

/* the patient's words: a card of the stage over the phone's top edge, breaking out of its side. A received bubble
   (white, its cut corner on the reading side) under the patient's label, which straddles the phone's edge: it is
   never a sent bubble, and never inside the surgeon's own chat */
.c3-label { display: inline-block; font: 600 15px/1.5 var(--ui); color: #fff; background: #0A2545; padding: 4px 13px; border-radius: 99px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.22), 0 10px 20px -8px rgba(0,8,20,0.8); white-space: nowrap; }
.c3-bub { display: block; width: max-content; max-width: 100%; margin: 8px auto 0; background: #fff; color: var(--ink); border-radius: 22px; border-top-right-radius: 6px;
  padding: 9px 22px 10px; font: 600 clamp(22px, calc(var(--cw) * 0.07), 30px)/1.4 var(--ui);
  box-shadow: 0 26px 46px -16px rgba(0,8,20,0.85), 0 10px 18px -8px rgba(0,8,20,0.5); }
.film-on .c3-msg { position: absolute; z-index: 4; right: 8px; left: auto; top: 30%; bottom: auto; margin: 0; max-width: calc(100% - 16px);
  display: flex; flex-direction: column; align-items: flex-start; opacity: 0; transform-origin: 100% 0; will-change: transform, opacity; }
.film-on .c3-bub { margin: 7px 0 0; }

.c3-dot { display: none; }
.film-on .c3-dot { display: block; position: absolute; z-index: 5; left: 0; top: 0; border-radius: 50%; background: var(--red-glow); visibility: hidden;
  will-change: transform; }
/* the leader's halo is a flat disc 3.8 x its radius at 0.2, not a soft shadow (motion/parts.tsx, Dot) */
.film-on .c3-dot.lead::before { content: ""; position: absolute; inset: -140%; border-radius: 50%; background: var(--red-glow); opacity: 0.2; }

/* the phone stands 28 px under the small line: the ring of the hit (26 px outside the bezel, in the device's px) and
   the patient's label have their room, and after the push-in the phone is still 18 px clear of the line */
.film-on .ch3 .device { margin-top: calc(var(--dev-gap) + 8px); }

/* the alert's first line stands on one line at every size */
.ch3 .wa-msg.in { max-width: 88%; }

/* the alert line by line, and the thread's own slide (ch3.js) */
.c3-l { display: block; }
.c3-slide { position: absolute; inset: 0; will-change: transform; }

/* the dot's landing, in the alert's own px: it is on the alert for the hit and gone 133 ms later */
.c3-pin { position: absolute; z-index: 2; top: 40px; left: 50%; width: 22px; height: 22px; border-radius: 50%; background: #D94B4B; opacity: 0; pointer-events: none;
  box-shadow: 0 0 0 16px rgba(224,106,106,0.22); }


/* ---- scenes/ch4.css ---- */
/* ch4: one summary at seven in the morning (services/chapters.tsx, ChSummary).
   The surgeon's phone on the navy stage. The clock chip is the phone's own clock, lifted out of its status bar and
   shown at the page's size on the device's corner, where a phone's clock is (the same idea as ch1's lifted input
   field): it turns from 6:59 to 7:00, and the report arrives line by line under it. The chip stands on the top
   corner, not over the lower third, so the whole report stays in view above the fixed button, and a white pill
   never sits on the white button. */

/* the report at the page's floor for a key message: 24 px on the 430 px screen is 15.8 px in the hand (ART 8, 7) */
.ch4 .wa { --fs: 24px; }
@media (max-height: 660px) { .ch4 .wa { --fs: 23px; } }      /* the shortest screens keep the film's 23: all four lines stay in view */

/* the chip, in both modes (ART 3.2: Plex 700, a white pill, the clock icon); 20 px, so that it ends short of the
   island and starts on the page's gutter */
.ch4 .chip-clock { gap: 6px; padding: 6px 10px 6px 11px; font: 700 20px/1.2 var(--ui); color: var(--navy); background: #fff; }
.ch4 .chip-clock .ic { flex: none; width: 19px; height: 19px; stroke-width: 2.2; }
.c4-time { display: inline-flex; align-items: baseline; gap: 5px; }
.c4-roll { display: inline-grid; overflow: hidden; height: 1.2em; direction: ltr; unicode-bidi: isolate; font-feature-settings: "tnum"; }
.c4-roll > b { grid-area: 1 / 1; font-weight: 700; }
.c4-roll > .c4-old { display: none; }
.film-on .c4-roll > .c4-old { display: block; }
.c4-ring { display: none; }

.film-on .ch4 .phone-box > .chip-clock { position: absolute; z-index: 3; top: -6px; left: auto; bottom: auto;
  right: calc(100% - 166px * var(--ps) + 10px);                /* its end stops short of the island; it stands where the bar's time was */
  margin: 0; transform-origin: 70% 75%; will-change: transform, opacity;
  box-shadow: 0 14px 30px -10px rgba(0,8,20,0.6), 0 22px 40px -16px rgba(0,8,20,0.8), 0 0 0 1px rgba(12,68,124,0.14); }
/* the chip IS the phone's clock, lifted out of its status bar: the bar's own time gives way to it (ch4.js) */
.film-on .ch4 .status .time { will-change: opacity; }
/* a line of the report as the patient reads it: who (the mark, the name, the operation) on one row, what is said
   of him under it in its two parts, each whole where the bubble is wide enough: a day's number is never left behind
   by its word, a patient's question is never cut, and no row is one word */
.ch4 .wa-msg.in { max-width: 92%; }
.c4-who, .c4-what { display: block; }
.c4-part { display: inline-block; }
.c4-who.c4-fit, .c4-part.c4-fit { white-space: nowrap; }
/* the wall's own paper over the foot of the chat (its pattern in register with the wall's): on a short screen the
   report's last rows dissolve into it above the button */
.c4-fade { display: none; }
.film-on .c4-fade { display: block; position: absolute; inset: 0; z-index: 2; background: inherit; pointer-events: none; visibility: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent calc(var(--c4-fold, 9999px) - 58px), #000 calc(var(--c4-fold, 9999px) - 6px));
          mask-image: linear-gradient(to bottom, transparent calc(var(--c4-fold, 9999px) - 58px), #000 calc(var(--c4-fold, 9999px) - 6px)); }
.film-on .c4-ring { display: block; position: absolute; inset: -3px; border-radius: 999px; border: 2px solid #fff; opacity: 0; pointer-events: none; }

/* the report's lines: the coloured mark pops, the line rises (WaChat fades it) */
.c4-mk { display: inline-block; transform-origin: 50% 60%; }
.film-on .ch4 .wa-rline { will-change: transform, opacity; }

/* at rest the clock is alive: its colon beats */
.film-on .scene.is-on .c4-colon { animation: c4-beat 2s steps(1, end) infinite; }
@keyframes c4-beat { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .film-on .scene.is-on .c4-colon { animation: none; } }

@media (max-height: 700px) {
  .ch4 .chip-clock { font-size: 19px; padding: 5px 9px 5px 10px; }
  .film-on .ch4 .phone-box > .chip-clock { top: 3px; }      /* the chip never touches the line over the phone */
}
@media (max-width: 340px) { .ch4 .chip-clock { font-size: 17.5px; gap: 5px; padding: 5px 8px 5px 9px; } }

/* ---- scenes/ch5.css ---- */
/* ch5: the surgery calendar (services/chapters.tsx, ChCalendar), in his site's window (the founder, 2026-10-09: the
   calendar must read as his site, and it is shown first, then the move, then the notices; ch5.js plays it).
   The film's browser window (film.css .win) with its address bar holds the MONTH of his calendar (the founder, the
   same day: "the surgery and the drag: let all of it happen in the month's calendar"): the dashboard's own month
   grid (film.css .mo, drawn from the dashboard's values), shown whole and then pushed in on the example week. One
   surgery is lifted under the film's press disc, carried to another day's cell and dropped; the two notices land
   under the window as tilted cards, the second folded to its label and two lines behind a chevron. With script off
   the same window (the capture, then the month cropped to its columns) and the two notices are the plain document. */

/* the window and the month: both modes */
.ch5 .c5-win { margin-top: 14px; }
.ch5 .win-body { padding: 8px; background: var(--mist2); }

/* the notices: the film's cards (white, a 2 px border, the label in navy, the message in ink) */
.ch5 .notices { position: relative; z-index: 3; display: block; margin-top: clamp(12px, 2.4svh, 22px); }
.ch5 .notice { position: relative; margin: 0; padding: 11px 16px 13px; border-radius: 20px; background: #fff; border: 2px solid var(--line2); color: var(--ink);
  box-shadow: 0 30px 60px -24px rgba(11,31,51,0.4), 0 12px 24px -14px rgba(11,31,51,0.24); }
.ch5 .notice + .notice { margin-top: 10px; }
.ch5 .notice-who { display: flex; align-items: center; gap: 6px; font: 600 16px/1.5 var(--ui); color: var(--navy2); }
.ch5 .notice-text { font: 400 17px/1.52 var(--ui); text-wrap: balance; }
.c5-ticks { flex: none; }
.c5-l { display: block; }
.c5-more { display: none; }

/* the film */
.film-on .ch5 { display: flex; flex-direction: column; padding-bottom: calc(var(--safe-b) + 6px); }
.film-on .ch5 .head { flex: none; }
.film-on .ch5 .c5-win { flex: none; margin-top: calc(var(--dev-gap) + clamp(0px, 2svh - 6px, 12px)); transform-origin: 50% 40%; will-change: transform, opacity; }
.film-on .ch5 .notices { position: relative; left: auto; right: auto; bottom: auto; flex: none; }
.film-on .ch5 .notices .notice { position: relative; left: auto; right: auto; bottom: auto; will-change: transform, opacity; }
.film-on .ch5 .notices .notice + .notice { margin-top: -10px; z-index: 5; }      /* the second lands on the first's foot (a notice stands at 4 in film.css) */
/* the coordinator's notice at rest: its label and its first two lines; the rest behind the control */
.film-on .ch5 .c5-x { display: none; }
.film-on .ch5 .notice.is-open .c5-x { display: block; }
.film-on .c5-more { display: grid; place-items: center; position: relative; margin-inline-start: auto; width: 44px; height: 44px; margin-block: -10px; margin-inline-end: -10px; }
.film-on .c5-more .nl-chev { --chev-d: 32px; position: static; background: var(--navy); color: #fff; }
.film-on .notice.is-open .c5-more .nl-chev path { transform: rotate(180deg); }

/* the finger: the film's 44 px press disc (ART 4.5), a layer of the month (ch5.js places it) */
.c5-touch { display: none; }
.film-on .c5-touch { display: block; position: absolute; z-index: 7; left: 0; top: 0; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%;
  background: rgba(55,138,221,0.28); border: 2px solid rgba(255,255,255,0.95); box-shadow: 0 0 0 1.5px rgba(55,138,221,0.45), 0 10px 18px -6px rgba(11,31,51,0.45); visibility: hidden;
  pointer-events: none; will-change: transform, opacity; }
/* the finger passes over the window's edge while it comes and goes */
.film-on .ch5 .c5-win { overflow: visible; }
.film-on .ch5 .c5-win > .win-bar { border-radius: 16px 16px 0 0; }
.film-on .ch5 .c5-win > .win-body { border-radius: 0 0 16px 16px; }

/* at rest the window floats a few px, as a device does (film.css, dev-float) */
.film-on .scene.is-on .ch5 .c5-win { animation: c5-float 6.5s var(--e-io) infinite alternate; }
@keyframes c5-float { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -5px, 0); } }
@media (prefers-reduced-motion: reduce) { .film-on .scene.is-on .ch5 .c5-win { animation: none; } }

@media (max-height: 700px) {
  .ch5 .notices { margin-top: 10px; }
  .ch5 .notice { padding: 8px 14px 9px; border-radius: 18px; }
  .ch5 .notice-who { font-size: 15px; }
  .ch5 .notice-text { font-size: 15.5px; line-height: 1.46; }
}
/* under the brief's smallest screen (360 x 640) the scene still holds above the button */
@media (max-height: 600px) {
  .ch5 .win-body { padding: 6px; }
  .film-on .ch5 .c5-win { margin-top: 8px; }
  .ch5 .notices { margin-top: 8px; }
  .ch5 .notice { padding: 6px 12px 7px; }
  .ch5 .notice-text { font-size: 15px; line-height: 1.4; }
}
/* the fit (ch5.js measures): when the two notices do not stand above the fixed button, the month's rows stand closer
   (FILM.month's layout), then the notices a step closer (c5-t1), and where that is not enough, closest (c5-tight) */
.film-on .ch5.c5-t1 .notices { margin-top: 10px; }
.film-on .ch5.c5-t1 .notice { padding: 8px 14px 9px; border-radius: 18px; }
.film-on .ch5.c5-t1 .notice-text { font-size: 16px; line-height: 1.46; }
/* (the coordinator's notice then rests on its label and one line; the rest is behind its control) */
.film-on .ch5.c5-tight .win-body { padding: 5px; }
.film-on .ch5.c5-tight .notice:last-child:not(.is-open) .c5-l:nth-child(n+2) { display: none; }
.film-on .ch5.c5-tight .notices { margin-top: 8px; }
.film-on .ch5.c5-tight .notice { padding: 5px 12px 6px; border-radius: 16px; }
.film-on .ch5.c5-tight .notice-who { font-size: 14.5px; line-height: 1.36; }
.film-on .ch5.c5-tight .notice-text { font-size: 15px; line-height: 1.34; }

/* ---------------------------------------------------------------- the first beat is the real calendar (2026-10-09)
   A capture of the dashboard's month (shots/calendar.jpg) lies over the window's body, cropped to it; ch5.js lets it
   rest, then fades it over the drawn month. With script off it stands over the month, as a picture of its own. */
.c5-shot { position: relative; height: 240px; margin-bottom: 8px; overflow: hidden; border-radius: 10px; }
.film-on .c5-shot { position: absolute; inset: 0; z-index: 8; height: auto; margin: 0; border-radius: 0 0 16px 16px; background: var(--paper); will-change: opacity; }

/* ---- scenes/ch6.css ---- */
/* ch6: clinic appointment requests reach the coordinator (services/chapters.tsx, ChBooking), with today's flow as
   the board has it: the patient asks, the centre's slots arrive as a numbered list, he answers with the number,
   his request is confirmed, and the whole request lands with the coordinator.
   The film's phone cut shrinks the phone to make room for the card. On the page the phone keeps its size (a
   shrunk phone would be a thumbnail with 6 px text): the card rises in front of it, over its lower part, and
   pushes the thread up, so the confirmation rests just above the card. The card is the last and the largest
   thing on the screen (SELL-PATH 7). */

/* the coordinator's card: both modes (the film's card: white, a 2 px border, the label in navy, the message in ink) */
.ch6 .notice { padding: 10px 18px 12px; border-radius: 22px; background: #fff; border: 2px solid var(--line2); color: var(--ink);
  box-shadow: 0 34px 64px -22px rgba(11,31,51,0.55), 0 14px 26px -14px rgba(11,31,51,0.38); }
.ch6 .notice-who { display: flex; align-items: center; gap: 6px; font: 600 16px/1.5 var(--ui); color: var(--navy2); }
.ch6 .notice-text { margin-top: 2px; font: 400 17px/1.52 var(--ui); }
.c6-ticks { flex: none; }

.film-on .ch6 .notice { z-index: 4; bottom: calc(var(--safe-b) + 8px); transform-origin: 50% 100%;
  will-change: transform, opacity; }
/* at rest the card is the request at a glance: what, who, where, when. The other lines (his number, the operation,
   the closing line) are behind the chevron */
.c6-l { display: block; }
.c6-more { display: none; }
.film-on .ch6 .c6-x { display: none; }
.film-on .ch6 .notice.is-open .c6-x { display: block; }
.film-on .c6-more { display: grid; place-items: center; margin-inline-start: auto; width: 44px; height: 44px; margin-block: -10px; margin-inline-end: -12px; color: var(--navy2); }
.film-on .c6-more svg { transition: transform 0.25s var(--e-out); }
.film-on .notice.is-open .c6-more svg { transform: rotate(180deg); }

/* a short message of the patient's carries its time beside it */
.ch6 .wa-msg.c6-short .wa-bub { display: flex; align-items: flex-end; gap: 12px; padding: 6px 11px 6px 9px; }
.ch6 .wa-msg.c6-short .wa-meta { margin: 0 0 3px; }

/* the name breaks after its first word: the two words that are one thing stand together on its second line */
.ch6 .name .w:first-child { display: block; width: max-content; }

/* the phone stands a little higher, so the patient's number and the confirmation both rest above the card */
.film-on .ch6 .device { margin-top: max(8px, calc(var(--dev-gap) - 8px)); }

/* at rest the card is alive: it floats a few px, out of step with the phone under it (a translate of its own: its
   tilt is the script's transform) */
.film-on .scene.is-on .ch6 .notice { animation: c6-float 5.2s var(--e-io) 0.6s infinite alternate; }
@keyframes c6-float { from { translate: 0 0; } to { translate: 0 -5px; } }
@media (prefers-reduced-motion: reduce) { .film-on .scene.is-on .ch6 .notice { animation: none; } }

/* the thread's slide (over the lifted field while he types, then pushed up by the card) is a layer of its own
   around the chat's thread */
.c6-slide { position: absolute; inset: 0; will-change: transform; }

/* the slots' list: one line each; the slot he picks takes the page's sky bar when his number is sent */
.c6-line { display: block; }
.c6-pick { position: relative; display: inline-block; isolation: isolate; }
.c6-pick::before { content: ""; position: absolute; z-index: -1; inset-inline: -5px; top: 14%; bottom: 8%; border-radius: 5px;
  background: var(--sky); opacity: 0.5; transform: scaleX(var(--bar, 0)); transform-origin: right; }

@media (max-height: 700px) {
  .ch6 .notice { padding: 9px 16px 11px; border-radius: 20px; }
  .ch6 .notice-text { font-size: 15.5px; line-height: 1.46; }
}

/* ---- scenes/ch7.css ---- */
/* ch7: the surgeon's reminders. Added on 2026-10-09 by the founder's request (the page did not show them); the
   services film has no chapter behind this scene, so its clock is the board's own.
   The phone, the chat, the browser window and the month in it are the system's (film.css; the month is .mo, drawn
   from the dashboard's own values: the founder's ruling of the same day that the calendar is the month). What is
   here is the scene's own: the chat's size, the layer the thread slides in, the window's place. */

.ch7 .wa { --fs: 24px; }
.ps-small .ch7 .wa { --fs: 25px; }
.ch7 .wa-msg.in, .ch7 .wa-msg.out { max-width: 94%; }

/* the thread's slide when the window rises (a layer around the chat's thread): the confirmation stays in view */
.c7-slide { position: absolute; inset: 0; will-change: transform; }

/* the browser window: it rises over the phone's lower part once the confirmation has been read */
.c7-win { margin-top: 14px; }
.film-on .c7-win { position: absolute; z-index: 4; left: var(--gut); right: var(--gut); top: 60%; margin: 0; transform-origin: 50% 100%; visibility: hidden; will-change: transform, opacity; }
.c7-win .win-body { padding: 8px; background: var(--mist2); }
.c7-win .mo-rmd { transform-origin: 100% 50%; }

@media (max-height: 600px) {
  .c7-win .win-body { padding: 6px; }
}

/* ---- scenes/ch8.css ---- */
/* ch8: his message to a patient. Added on 2026-11-09 by the founder's ruling D529 (in the style of the other
   chapters); the services film has no chapter behind this scene, so its clock is the board's own.
   The phones, the chat and the reply buttons are the system's (film.css, and ch1's form of the buttons); what is here
   is the scene's own: the chat's size, the card's breadth, the finger, and the patient's phone's place. */

.ch8 .wa { --fs: 24px; }
.ps-small .ch8 .wa { --fs: 25px; }
.ch8 .wa-msg.in, .ch8 .wa-msg.out { max-width: 94%; }
.ch8 .wa-msg.has-btns { min-width: 74%; }

/* the card's two reply buttons, as WhatsApp draws them (ch1's form): side by side under the message, the reply mark
   before the label */
.ch8 .wa-btns { position: relative; }
.ch8 .wa-btn { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; font-weight: 500; transform-origin: 50% 50%; }
.ch8 .wa-btn::before { content: ""; flex: none; width: 21px; height: 21px; background: currentColor; opacity: 0.9;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M9 14L4 9l5-5'/><path d='M4 9h10.5a5.5 5.5 0 010 11H12'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M9 14L4 9l5-5'/><path d='M4 9h10.5a5.5 5.5 0 010 11H12'/></svg>") center / contain no-repeat; }
.film-on .ch8 .wa-btn { will-change: transform; }

/* a one-word reply carries its time beside it, as a short message does */
.ch8 .wa-msg.c8-short .wa-bub { display: flex; align-items: flex-end; gap: 12px; padding: 6px 11px 6px 9px; }
.ch8 .wa-msg.c8-short .wa-meta { margin: 0 0 3px; }

/* his finger: the film's press disc (ch1's), drawn in the device's own px */
.c8-tap { display: none; }
.film-on .c8-tap { display: block; position: absolute; z-index: 5; left: 0; top: 0; width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 50%;
  background: rgba(55,138,221,0.30); border: 3px solid rgba(255,255,255,0.96);
  box-shadow: 0 0 0 2px rgba(55,138,221,0.5), 0 16px 28px -8px rgba(11,31,51,0.5); visibility: hidden; pointer-events: none; will-change: transform, opacity; }

/* the patient's phone: the same phone as the surgeon's, standing a little to the side; it rises over the surgeon's
   phone's lower part once the receipt has been read, and runs off the foot of the screen as his does */
.c8-pat { width: calc(456px * var(--ps)); margin: 18px auto 0; }
.film-on .c8-pat { position: absolute; z-index: 4; left: 50%; top: 52%; margin: 0 0 0 calc(456px * var(--ps) * -0.5 + 14px);
  transform-origin: 50% 0; visibility: hidden; will-change: transform, opacity;
  filter: drop-shadow(0 -18px 40px rgba(3,12,26,0.55)); }

/* ---- scenes/dash.css ---- */
/* dash: the dashboard, itself (the founder, 2026-10-09; dash.js plays it).
   On the navy stage: the dashboard's own title, huge, its key word on the sky bar; a row of pills with the
   dashboard's own menu labels (the one in view is lit); and one large browser window (film.css .win) whose body is
   a stack of real captures of the dashboard's pages (shots/*.jpg), one in view at a time. The window is the star:
   it takes all the room the column leaves. With script off the pages stand one under another, each a picture. */
.dash .name { font-size: var(--t-title); line-height: 1.14; }
.da-tabs { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.da-tab { height: 32px; padding: 0 clamp(9px, calc(var(--cw) * 0.03), 14px); font: 600 clamp(12.5px, calc(var(--cw) * 0.036), 15.5px)/32px var(--ui); background: rgba(255,255,255,0.12); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2); white-space: nowrap; transform-origin: 50% 50%; }
.da-tab.on { background: #fff; color: var(--navy); box-shadow: 0 10px 18px -10px rgba(0,8,20,0.8); }
/* a pill is a button: a 44 px target round its 32 px, a pointer, a hover light and the page's focus ring */
.da-tabs { position: relative; z-index: 4; }   /* over the heading (z 3), whose box reaches a few px into the row */
.da-tabs > li { display: flex; }
.da-tab { position: relative; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.da-tab::before { content: ""; position: absolute; top: 50%; left: -3px; right: -3px; height: 44px; margin-top: -22px; }
.film-on .da-tab { cursor: pointer; }
@media (hover: hover) { .film-on .da-tab:not(.on):hover { background: rgba(255,255,255,0.22); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.45); } }
.da-tab:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }
/* the section's own line (the board's, when it has one): one short line between the pills and the window */
.da-cap { display: grid; margin: 10px 2px 0; font: 600 clamp(14px, calc(var(--cw) * 0.042), 17px)/1.4 var(--ui); color: rgba(255,255,255,0.88); text-wrap: balance; }
.film-on .da-cap { height: 2.8em; align-content: center; align-items: center; overflow: hidden; }   /* two lines, always: the window never moves when the line changes */
.film-on .da-line { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity 0.2s linear, visibility 0s 0.2s; }
.film-on .da-line.on { opacity: 1; visibility: inherit; transition-delay: 0s; }
.film-still .da-line { transition: none !important; }
.da-win { margin-top: 12px; }
.da-win .win-body { padding: 0; }
.da-stack { position: relative; display: grid; gap: 10px; }
.da-page { position: relative; height: 420px; overflow: hidden; background: var(--paper); }

.film-on .dash { display: flex; flex-direction: column; padding-top: calc(var(--head-top) + 14px + env(safe-area-inset-top, 0px)); padding-bottom: var(--safe-b); }
.film-on .dash > * { flex: none; }
.film-on .dash .name { white-space: nowrap; }
.film-on .da-tabs { flex-wrap: nowrap; margin-top: clamp(8px, 1.6svh, 16px); }
.film-on .da-tab { transition: background-color 0.2s linear, color 0.2s linear, box-shadow 0.2s linear; will-change: transform, opacity; }
.film-on .da-win { margin-top: clamp(8px, 1.6svh, 14px); transform-origin: 50% 20%; will-change: transform, opacity;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.14), 0 60px 110px -34px rgba(0,8,20,0.85), 0 26px 50px -22px rgba(0,8,20,0.6), 0 0 110px -30px rgba(133,183,235,0.45); }
.film-on .da-stack { display: block; height: 380px; overflow: hidden; }
.film-on .da-page { position: absolute; inset: 0; height: auto; will-change: transform, opacity; }
.film-on .da-page > img.shot { transform: scale(var(--z, 1)); transform-origin: var(--fx, 50%) var(--at, 0%); }
/* at rest the window floats a few px, as a device does */
@supports (translate: 0 1px) { .film-on .scene.is-on .da-win { animation: tkt-float 6.5s var(--e-io) 1.2s infinite alternate; } }
.film-still .da-tab { transition: none !important; }

@media (max-height: 700px) { .dash .name { font-size: clamp(38px, calc(var(--cw) * 0.118), 50px); } .da-tab { height: 30px; line-height: 30px; } }
@media (max-height: 600px) {
  .film-on .dash { padding-top: calc(48px + env(safe-area-inset-top, 0px)); }
  .dash .name { font-size: clamp(32px, calc(var(--cw) * 0.1), 40px); }
  .da-tab { height: 27px; line-height: 27px; }
  .film-on .da-tabs, .film-on .da-win { margin-top: 6px; }
}

/* ---- scenes/count.css ---- */
/* count: the stack (OFFER-PLAY 1; the director's brief of round 2). From the top: the feed, the name, the numeral as
   large as the screen allows, the heap, the trust line.
   - The feed runs ABOVE the name and the numeral, never behind the digits: each of the forty names flies in from the
     left, is read at full strength, and is pushed up a row by the next one (the hook's flood, the other way round).
   - Beside its name each feature shows its own icon disc; the disc drops behind the name and the numeral and lands
     in the heap: forty discs piled in rows that shrink by one as they rise (10, 9, 8, 7, 6), in five tints by family
     from white to blue. The same five tints are the five families' trays one swipe later (groups.css).
   - The numeral counts what has landed. The board's small line (who built it) stands under the heap at a name's
     weight: it is the page's trust line.
   Without script: the name, the numeral, the forty discs as a plain grid, the line, and the names as a wrapped list. */
.count .name { text-align: center; }
.ct-fig { position: relative; z-index: 3; text-align: center; margin-top: 4px; }
.ct-num { font: 700 calc(var(--cw) * 0.74)/0.84 var(--ui); color: #fff; letter-spacing: -0.02em; font-feature-settings: "tnum"; white-space: nowrap;
  transform-origin: 50% 92%; }
.ct-n { display: inline-block; }

.ct-heap { --ct-d: 30px; --ct-g: 6px; position: relative; z-index: 2; display: grid; grid-template-columns: repeat(8, var(--ct-d)); justify-content: center;
  gap: var(--ct-g); margin: 18px auto 0; direction: ltr; transform-origin: 50% 100%; }
.ct-heap i { width: var(--ct-d); height: var(--ct-d); border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--navy);
  transform-origin: 50% 100%; box-shadow: 0 9px 14px -8px rgba(0,8,20,0.75), inset 0 -2px 0 rgba(11,31,51,0.1); }
.ct-heap i .ic { width: 56%; height: 56%; stroke-width: 2; }
/* the five tints, one a family (the first family is the film's badge on navy: a white disc, a navy mark) */
.ct-heap i[data-g="followup"] { background: #fff; color: var(--navy); }
.ct-heap i[data-g="bot"] { background: #CFE2F7; color: var(--navy); }
.ct-heap i[data-g="surgeries"] { background: var(--sky); color: #0B2A4D; }
.ct-heap i[data-g="team"] { background: #5A9DE2; color: #fff; }
.ct-heap i[data-g="data"] { background: var(--blue); color: #fff; }

.ct-by { position: relative; z-index: 3; margin-top: 16px; text-align: center; font: 700 clamp(24px, calc(var(--cw) * 0.075), 30px)/1.4 var(--ui); color: #fff; }
.ct-stack { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; margin-top: 22px; font: 500 15px/1.5 var(--ui); color: rgba(255,255,255,0.74); }

/* the film: one column from the top; the feed's rows stand in the padding above the name */
.film-on .count { --ct-row: 29px; --ct-rows: 4; display: flex; flex-direction: column; justify-content: flex-start;
  padding-top: calc(44px + env(safe-area-inset-top, 0px) + var(--ct-rows) * var(--ct-row) + 6px); padding-bottom: calc(var(--safe-b) + 2px); }
.film-on .count .head { flex: none; padding-top: 0; }
.film-on .ct-fig { flex: none; margin-top: -0.03em; }
.film-on .ct-num { font-size: calc(var(--cw) * 0.74); }
.film-on .ct-heap, .film-on .ct-by { flex: none; }
/* the heap, piled by the script: each disc stands in its own place of the pile */
.film-on .ct-heap.is-piled { display: block; }
.film-on .ct-heap.is-piled i { position: absolute; }
/* the feed: one name a row, set by the script */
.film-on .ct-stack { display: block; position: absolute; inset: 0; z-index: 4; margin: 0; pointer-events: none; }
.film-on .ct-stack li { position: absolute; left: 0; top: 0; height: var(--ct-row); white-space: nowrap; font: 700 clamp(19px, calc(var(--cw) * 0.058), 23px)/var(--ct-row) var(--ui);
  color: #fff; visibility: hidden; transform-origin: 100% 50%; }

@media (max-height: 700px) {
  .film-on .count { --ct-row: 27px; --ct-rows: 3; }
  .ct-heap { margin-top: 12px; }
  .ct-by { margin-top: 10px; font-size: clamp(21px, calc(var(--cw) * 0.064), 26px); }
}
@media (max-height: 600px) {
  .film-on .count { --ct-row: 25px; --ct-rows: 2; padding-top: calc(42px + env(safe-area-inset-top, 0px) + var(--ct-rows) * var(--ct-row) + 2px);
    padding-bottom: calc(var(--safe-b) + 8px); }
  .ct-heap { margin-top: 8px; }
  .ct-by { margin-top: 6px; font-size: 20px; }
}

/* ---- scenes/groups.css ---- */
/* groups: the forty, sorted. One scene for the five families (PROMPT, decision 2 after the first jury), on the shared
   family (film.css .fams, FILM.families): five lit cards on paper, one under another, each holding
   - its count, large, in a navy disc (the five numerals stand in one column and add up to the count's numeral);
   - its title at a name's weight;
   - its TRAY: a navy capsule (a piece of the stage the heap stood on) with its own discs in its own tint from the
     heap of the scene before: white, pale, sky, mid blue, blue (the same five values as count.css).
   The cards are dealt from alternate sides and rest a hair off the level, like things laid down by hand. A tap opens
   a family in place (the shared behaviour: the card goes to the top, the other four fade, its names unfold under
   it); opened, a card stands level. Nothing here is a setting: no toggles, no rules, no dividers. */
#s-groups .fam[data-group="followup"], #s-groups .fam:nth-child(1) { --fam-tint: #fff; --fam-ink: var(--navy); }
#s-groups .fam[data-group="bot"], #s-groups .fam:nth-child(2) { --fam-tint: #CFE2F7; --fam-ink: var(--navy); }
#s-groups .fam[data-group="surgeries"], #s-groups .fam:nth-child(3) { --fam-tint: var(--sky); --fam-ink: #0B2A4D; }
#s-groups .fam[data-group="team"], #s-groups .fam:nth-child(4) { --fam-tint: #5A9DE2; --fam-ink: #fff; }
#s-groups .fam[data-group="data"], #s-groups .fam:nth-child(5) { --fam-tint: var(--blue); --fam-ink: #fff; }

#s-groups .fams { --fam-count: clamp(40px, 6.9svh, 56px); --fam-fs: clamp(20px, calc(var(--cw) * 0.075), 30px); --fam-gap: clamp(6px, 1.4svh, 12px);
  grid-template-columns: minmax(0, 1fr); }
#s-groups .fam-kicker { font: 600 clamp(15px, calc(var(--cw) * 0.043), 17px)/1.4 var(--ui); color: var(--navy2); }
#s-groups .fam-head { gap: 8px; padding-inline: 10px 8px; border-radius: 26px; transform-origin: 50% 50%; }
#s-groups .fam-count { box-shadow: 0 12px 20px -10px rgba(12,68,124,0.6), inset 0 -3px 0 rgba(6,23,43,0.22); transform-origin: 50% 50%; }
#s-groups .fam-main { gap: clamp(4px, 0.9svh, 8px); justify-items: start; }
#s-groups .fam-title { line-height: 1.22; }
/* the tray: the family's discs on a piece of the navy stage */
#s-groups .fam-strip { position: relative; isolation: isolate; width: max-content; max-width: 100%; gap: 4px; padding: 5px; border-radius: 999px; }
#s-groups .fam-strip::before { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: 999px; transform: scaleX(var(--tray, 1)); transform-origin: 100% 50%;
  background: radial-gradient(130% 260% at 78% -60%, #1B5CA2 0%, #0B2A4D 52%, #06172B 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 10px 16px -10px rgba(6,23,43,0.7); }
/* six discs and the +N stand in the column beside the count on the narrowest phone: the column sets the disc */
#s-groups .fam-strip .nl-ic { --nl-tile: clamp(17px, min(3.5svh, calc((var(--cw) - 40px - var(--fam-count) - 146px) / 6)), 28px); background: var(--fam-tint); color: var(--fam-ink); box-shadow: 0 5px 8px -5px rgba(0,8,20,0.85); transform-origin: 50% 50%; }
#s-groups .fam-strip .nl-ic .ic { width: 58%; height: 58%; stroke-width: 2; }
#s-groups .fam-plus { flex: none; min-width: 23px; margin-inline: 3px 5px; text-align: center; font: 700 clamp(13.5px, 2svh, 15.5px)/1 var(--ui); color: #fff; }
/* the control that opens the family: the shared 44 px filled disc (film.css); the head's gaps give it its room */

/* ---- the film: the cards rest a hair off the level; an opened one stands level at the top of the box */
.film-on #s-groups .fam-head { transform: rotate(var(--fam-tilt, 0deg)); }
.film-on #s-groups .fam.is-open .fam-head { transform: translate3d(0, calc(-1px * var(--fam-y, 0)), 0) rotate(0deg); }
.film-on #s-groups .fam-body .nl { --nl-row: clamp(50px, 6.6svh, 54px); --nl-tile: clamp(36px, 5.2svh, 42px); --nl-fs: clamp(18px, calc(var(--cw) * 0.058), 23px); }
@media (max-height: 600px) {
  #s-groups .fam-head { border-radius: 20px; padding-inline: 10px; }
  #s-groups .fam-strip { padding: 3px 4px; }
}

/* ---------------------------------------------------------------- a family's own page of the dashboard (2026-10-09)
   A small crop of the real capture that belongs to the family (the bot: the editor; the surgeries: the calendar; the
   team: its page; the data: the history), as a small lit window at the far end of the title's line. The follow-up
   keeps its icons: its place is the patient's phone. groups.js hides the crops where a title needs the line. */
#s-groups .fam-main { position: relative; }
#s-groups .fam-shot { position: absolute; inset-inline-end: 0; top: 1px; width: clamp(48px, calc(var(--cw) * 0.16), 70px); height: calc(var(--fam-fs) * 1.22); border-radius: 9px; overflow: hidden;
  background: var(--paper); box-shadow: 0 0 0 1.5px var(--line2), 0 8px 14px -8px rgba(11,31,51,0.45); pointer-events: none; }
#s-groups .fam-shot > img.shot { transform: scale(3); transform-origin: 50% var(--at, 40%); }
#s-groups .fams.no-shots .fam-shot { display: none; }
.film-on #s-groups .fam.is-open .fam-shot { opacity: 1; }

/* ---- scenes/guarantees.css ---- */
/* guarantees: three seals stamped on one white sheet (PROMPT, decision 8; guarantees.js plays it).
   One white sheet on the navy stage, and on it the seals. No ticket and no figure of the price (the founder's
   ruling of 2026-10-09: the price is on the last screen only; before it the ticket's three figures stood at the
   sheet's head, over a perforation). The first seal is the heaviest. A row is a seal, the paragraph's own PLEDGE as its name (two lines at most, 19 to 21 px) and what
   follows the pledge small under it, in the accent (the founder, 2026-10-08: the short names said nothing); the
   control that opens it in one column at the row's end; a tap opens the whole approved paragraph in place.
   The non-refundable sentence is at the foot, small and present. Three sizes of type: the name of the scene, the
   seals' names, the small lines. It is the page's navy and sky: no gold, no badge of any body. */
.guarantees { --gu-fs: clamp(19px, calc(var(--cw) * 0.056), 21px); --gu-col: 62px; --gu-small: 15px; --chev-d: 34px; }
.guarantees .name { font-size: var(--t-title); line-height: 1.16; }

.film-on .guarantees { display: flex; flex-direction: column; padding-bottom: var(--safe-b); }
.film-on .guarantees > * { flex: none; }
.film-on .guarantees .head { padding-top: calc(clamp(46px, 7.6svh, 66px) + env(safe-area-inset-top, 0px)); }
.film-on .guarantees .name { white-space: nowrap; transform-origin: 100% 60%; }

/* the sheet: the film's two shadows under it */
.gu-sheet { position: relative; z-index: 2; isolation: isolate; margin-top: calc(clamp(10px, 2svh, 18px) + var(--gu-drop, 0px)); border-radius: 26px; color: var(--ink); transform-origin: 50% 36%;
  will-change: transform; --fg: var(--ink); --fg2: var(--ink2); --fg3: var(--ink3); --key: var(--navy2); --seal: var(--navy); --seal-fg: #fff; }
.gu-sheet::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: #fff; }
.gu-sheet::after { content: ""; position: absolute; inset: 0; z-index: -2; border-radius: inherit;
  box-shadow: 0 60px 120px -30px rgba(0,8,20,0.78), 0 30px 60px -20px rgba(0,8,20,0.58); }
@supports (translate: 0 1px) { .film-on .scene.is-on .gu-sheet { animation: tkt-float 6.5s var(--e-io) 1.2s infinite alternate; } }
html:not(.film-on) .gu-sheet { color: inherit; }
html:not(.film-on) .gu-sheet::before, html:not(.film-on) .gu-sheet::after { display: none; }

/* the seals */
.film-on #s-guarantees .seals { --seal-d: min(50px, var(--gu-col)); --nl-row: 0px; position: relative; margin: 0; padding: 12px 8px 10px 8px; }
.film-on #s-guarantees .nl-btn { gap: 8px; min-height: calc(clamp(50px, 7.6svh, 64px) + var(--gu-grow, 0px)); padding: 5px 0; align-items: center; }
.film-on #s-guarantees .seal { margin-inline: calc((var(--gu-col) - var(--seal-d)) / 2); transform-origin: 50% 50%; }
.film-on #s-guarantees .seal > .ic { stroke-width: 2.2; }
/* the first seal: twice the weight */
.film-on #s-guarantees .gu-first .seal { --seal-d: var(--gu-col); }
.film-on #s-guarantees .gu-first .nl-btn { min-height: calc(clamp(54px, 8.2svh, 68px) + var(--gu-grow, 0px)); }
/* a seal's place, drawn and waiting, until its stamp lands */
.film-on #s-guarantees .nl-row { position: relative; }
.film-on #s-guarantees .nl-row::before { content: ""; position: absolute; top: 50%; inset-inline-start: calc((var(--gu-col) - var(--seal-d)) / 2); width: var(--seal-d); height: var(--seal-d);
  margin-top: calc(var(--seal-d) / -2); border-radius: 50%; border: 2px dashed var(--line2); opacity: var(--gu-ph, 0); pointer-events: none; }
.film-on #s-guarantees .nl-row.gu-first::before { --seal-d: var(--gu-col); inset-inline-start: 0; }
.gu-ring { position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--navy); opacity: 0; pointer-events: none; }
html:not(.film-on) .gu-ring { display: none; }

/* a row's text: the name; under it the consequence, small; the chevron at the row's end; the paragraph when open.
   The board's slot rule: a guarantee whose name slot is on shows that name; its own opening words are then the
   first words of its paragraph, behind the tap */
.film-on #s-guarantees .nl-text { padding-inline-end: calc(var(--chev-d) + 6px); }
.guarantees .nl-name, .guarantees .nl-over { display: block; font: 700 var(--gu-fs)/1.3 var(--ui); color: var(--fg); text-wrap: balance; }
.guarantees .nl-row.has-slot .nl-name { font: 600 var(--gu-small)/1.45 var(--ui); color: var(--key); }
.film-on .guarantees .nl-row.has-slot .nl-name { display: none; }
.film-on #s-guarantees .nl-second { margin-top: 1px; font: 600 var(--gu-small)/1.4 var(--ui); color: var(--navy2); text-wrap: balance; }
.film-on .guarantees .nl-row.is-open .nl-second { display: none; }
/* the control: the shared filled disc, in the middle of its row; at the paragraph's head once it is open */
.film-on #s-guarantees .nl-chev { top: 50%; margin-top: calc(var(--chev-d) / -2); background: var(--navy); color: #fff; }
.film-on #s-guarantees .nl-row.is-open .nl-chev { top: 0; margin-top: 0; }
.film-on #s-guarantees .nl-full { margin-top: 3px; font: 500 15.5px/1.62 var(--ui); color: var(--ink2); }
.film-on #s-guarantees .nl-row.is-open .nl-btn { align-items: flex-start; }
.film-on #s-guarantees .nl-row.is-open .seal { margin-top: 2px; }

/* the non-refundable sentence: small, at the foot, read (an honest line makes the seals above it believed) */
.film-on #s-guarantees .nonref { margin-top: clamp(10px, 2svh, 18px); font: 500 var(--gu-small)/1.55 var(--ui); color: rgba(255,255,255,0.8); text-wrap: balance; }

/* a paragraph is open and the scene is full: the list scrolls inside the sheet */
.film-on .guarantees.is-long .seals { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.film-on .guarantees.is-long .seals::-webkit-scrollbar { display: none; }

@media (max-height: 700px) {
  .guarantees { --gu-fs: clamp(19px, calc(var(--cw) * 0.054), 20px); --gu-col: 54px; --chev-d: 32px; }
  .film-on .guarantees .head { padding-top: calc(52px + env(safe-area-inset-top, 0px)); }
  .guarantees .name { font-size: clamp(38px, calc(var(--cw) * 0.118), 50px); }
  .film-on #s-guarantees .seals { --seal-d: min(44px, var(--gu-col)); padding: 8px 10px 6px 10px; }
  .film-on #s-guarantees .nl-btn, .film-on #s-guarantees .gu-first .nl-btn { min-height: calc(50px + var(--gu-grow, 0px)); padding: 3px 0; }
}
/* a short screen: every row a step smaller */
@media (max-height: 600px) {
  .guarantees { --gu-fs: 19px; --gu-col: 40px; --gu-small: 14px; --chev-d: 30px; }
  .film-on .guarantees .head { padding-top: calc(48px + env(safe-area-inset-top, 0px)); }
  .guarantees .name { font-size: clamp(32px, calc(var(--cw) * 0.1), 40px); }
  .gu-sheet { margin-top: 6px; border-radius: 20px; }
  .film-on #s-guarantees .seals { --seal-d: min(34px, var(--gu-col)); padding: 4px 8px 3px 8px; }
  .film-on #s-guarantees .nl-btn, .film-on #s-guarantees .gu-first .nl-btn { min-height: calc(40px + var(--gu-grow, 0px)); padding: 2px 0; gap: 7px; }
  .guarantees .nl-name, .guarantees .nl-over { line-height: 1.24; }
  .film-on #s-guarantees .nl-second { margin-top: 0; line-height: 1.3; }
  .film-on #s-guarantees .nonref { margin-top: 6px; line-height: 1.45; }
}

/* the fit (guarantees.js measures): when the rows and the sentence under them do not stand above the fixed
   button, the sheet tightens in two steps. The spaces give first; then the heading. The pledges keep their size:
   the seals shrink before the words do */
.film-on #s-guarantees [data-tight] .seals { padding-block: 3px 2px; }
.film-on #s-guarantees [data-tight] .nl-btn, .film-on #s-guarantees [data-tight] .gu-first .nl-btn { min-height: 0; padding: 1px 0; }
.film-on #s-guarantees [data-tight] .nl-name, .film-on #s-guarantees [data-tight] .nl-over { line-height: 1.2; }
.film-on #s-guarantees [data-tight] .nl-second { margin-top: 0; line-height: 1.28; }
.film-on #s-guarantees [data-tight] .nonref { margin-top: 5px; font-size: 13.5px; line-height: 1.38; }
.film-on #s-guarantees [data-tight] .gu-sheet, .film-on #s-guarantees [data-tight].guarantees .gu-sheet { margin-top: 4px; }
.film-on #s-guarantees [data-tight="2"] .head { padding-top: calc(44px + env(safe-area-inset-top, 0px)); }
.film-on #s-guarantees [data-tight="2"] .name { font-size: 28px; line-height: 1.12; }

/* ---- scenes/gifts.css ---- */
/* gifts: the founders' gifts (PROMPT, decision 5; gifts.js plays it).
   The name; the five gifts, one tile form: a lit navy card thrown in from the reading side to rest a little turned,
   one this way and the next the other, with the white tile of the page and its name; and last, at the foot, after
   the goods, the limit line: the page's only deadline, said once as a fact with the blue dot standing before it.
   No ticket and no figure of the price (the founder's ruling of 2026-10-09: the price is on the last screen only).
   Names only: a gift's value is behind the tap, with the rest of its approved line.
   No clock, no pulse, no total, no glass. */
.gifts { --gf-fs: clamp(18px, calc(var(--cw) * 0.056), 22px); --gf-small: 15px; }
.gifts .name { font-size: var(--t-title); line-height: 1.16; }

.film-on .gifts { display: flex; flex-direction: column; padding-bottom: var(--safe-b); }
.film-on .gifts > * { flex: none; }
.film-on .gifts .head { padding-top: calc(clamp(46px, 7.6svh, 66px) + env(safe-area-inset-top, 0px)); }
.film-on .gifts .name { white-space: nowrap; transform-origin: 100% 60%; }                    /* the script fits it to the column */

/* a gift: one tile form. A lit card of the page's navy, the white tile, the name, the chevron at the row's end */
.film-on #s-gifts .gift-list { --nl-tile: clamp(36px, 5.4svh, 44px); --nl-row: 0px; gap: clamp(4px, 0.9svh, 8px); margin-top: calc(clamp(12px, 2.4svh, 22px) + var(--gf-drop, 0px)); }
.film-on #s-gifts .nl-row { border-radius: 22px; background: linear-gradient(180deg, #1F66B0 0%, #124E90 100%);
  box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.3), inset 0 0 0 1px rgba(133,183,235,0.2), 0 26px 46px -20px rgba(0,8,20,0.8), 0 10px 18px -10px rgba(0,8,20,0.5);
  transform-origin: 50% 50%; will-change: transform, opacity; }
.film-on #s-gifts .nl-btn { min-height: var(--gf-row, clamp(44px, 7svh, 58px)); gap: 12px; padding: 4px 10px 4px 14px; }
.film-on #s-gifts .nl-ic { box-shadow: 0 10px 18px -10px rgba(0,8,20,0.7); }
.film-on #s-gifts .nl-name { display: block; font: 700 var(--gf-fs)/1.34 var(--ui); color: #fff; white-space: nowrap; overflow: hidden; }
.film-on #s-gifts .nl-chev { --chev-d: 36px; top: calc(var(--gf-fs) * 0.67 - var(--chev-d) / 2); }
.film-on #s-gifts .nl-full { margin-top: 2px; padding-bottom: 4px; font: 500 15.5px/1.6 var(--ui); color: rgba(255,255,255,0.9); }
/* an opened gift shows the REST of its own sentence under its name (the founder, 2026-10-09: the name was printed
   twice). The sign that ends the name in the approved line (a full stop or a colon) is in the text and is not drawn
   here: the rest stands on a line of its own, and a line does not open with a full stop */
.film-on #s-gifts .nl-row.is-open .nl-rest { display: block; margin-top: 2px; padding-bottom: 4px; font: 500 15.5px/1.6 var(--ui); color: rgba(255,255,255,0.9); }
.film-on #s-gifts .nl-rest .nl-mark { display: none; }
.film-on #s-gifts .nl-row.is-open .nl-name { white-space: normal; }

/* the limit line: last, at the foot, the dot before it */
.gifts .gifts-limit { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; font: 600 var(--t-line)/1.45 var(--ui); color: #fff; text-wrap: balance; }
/* the dot before the line: drawn here when the script is off; with the script, the page's one dot lands in its place */
.gifts .gifts-limit::before, .gf-dot { content: ""; flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--blue); margin: calc(0.725em - 6px) 2px 0 2px; }
.gifts .gifts-limit.has-dot::before { display: none; }
.film-on .gf-dot { background: none; }
.gf-line { flex: 1; min-width: 0; }
.film-on #s-gifts .gifts-limit { margin-top: clamp(10px, 2.2svh, 20px); }

@media (max-height: 700px) {
  .gifts { --gf-fs: clamp(17px, calc(var(--cw) * 0.052), 20px); }
  .gifts .name { font-size: clamp(38px, calc(var(--cw) * 0.118), 50px); }
  .film-on .gifts .head { padding-top: calc(52px + env(safe-area-inset-top, 0px)); }
  .film-on #s-gifts .nl-row { border-radius: 18px; }
  .film-on #s-gifts .nl-btn { padding: 4px 8px 4px 12px; gap: 10px; }
}
@media (max-height: 600px) {
  .gifts { --gf-fs: 17px; --gf-small: 14.5px; }
  .gifts .name { font-size: clamp(32px, calc(var(--cw) * 0.1), 40px); }
  .film-on .gifts .head { padding-top: calc(48px + env(safe-area-inset-top, 0px)); }
  .film-on #s-gifts .gift-list { --nl-tile: 30px; gap: 4px; margin-top: calc(8px + var(--gf-drop, 0px)); }
  .film-on #s-gifts .nl-row { border-radius: 16px; }
  .film-on #s-gifts .nl-btn { min-height: var(--gf-row, 38px); padding: 2px 8px 2px 10px; }
  .film-on #s-gifts .gifts-limit { margin-top: 8px; line-height: 1.35; }
}

/* ---- scenes/price.css ---- */
/* price: the page's last scene and the only one that shows the price (the founder's ruling of 2026-10-09), built
   step by step (PROMPT, decisions 11 and 12; price.js plays it).
   On top the ticket, large: three lines that fill, each with its step's number, its figure in the page's navy and
   its unit small under it; the setup's line is the SUM of its parts and stands under them (its parts as full rows,
   eight since 2026-10-09: icon, name, figure, unit; a rule; then the line); under the subscription when it starts.
   Under the ticket, one thing at a time: while the film plays, the step that is landing (its badge, its name large,
   what is in it as ticked rows, its figure counting up); at rest, the one real pick (a stepper) and the button: the
   first view. Under it the scene runs on (the column scrolls) as the page's end, which is what the close held: the
   market as a quiet line that opens in place, the VAT sentence, the film's end card, the closing line, the logo, the
   footer's links.
   With the script off the section is film.css's plain list of steps; every rule here is the film's. */

/* ---------------------------------------------------------------- the plain document (script off): every step a card
   with its figure under its name, what is in it as a list of whole lines (each part's share at the line's end) */
html:not(.film-on) .price .pr-step { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
html:not(.film-on) .price .pr-step > .pr-fig, html:not(.film-on) .price .pr-step > .stepper { grid-column: 2; justify-self: start; }
html:not(.film-on) .price .pr-in { display: grid; gap: 6px; margin-top: 6px; }
html:not(.film-on) .price .pr-in-row { display: block; line-height: 1.6; }
html:not(.film-on) .price .pr-tick { display: inline-block; vertical-align: -3px; margin-inline-end: 4px; }
html:not(.film-on) .price .pr-name { font-weight: 700; color: var(--ink); }
html:not(.film-on) .price .pr-val { float: left; margin-inline-end: 10px; }
html:not(.film-on) .price .pr-fams .pr-val { display: none; }     /* the market's monthly figures are not a family's (they are in the market's paragraph) */
html:not(.film-on) .price .pr-cnt { margin-right: 6px; }      /* the count is a left-to-right run: its margin is named by side */
html:not(.film-on) .price .pr-act { margin-top: 18px; display: grid; justify-items: start; }
html:not(.film-on) .price .pr-vat { margin-top: 10px; font: 500 14px/1.6 var(--ui); color: var(--ink2); }
html:not(.film-on) .price .end-line { margin-top: 26px; }
html:not(.film-on) .price .end-sign { margin-top: 22px; }

.film-on .price { display: flex; flex-direction: column; padding-top: calc(58px + env(safe-area-inset-top, 0px)); padding-bottom: 0;
  --pr-row: 46px; --pr-fig: 30px; --pr-label: 19px; --pr-disc: 28px; --pp-row: 28px; --pp-name: 17px; --pp-fig: 20px; --cl-small: 15px; }
.film-on .price > * { flex: none; }
.film-on .price > .ticket { order: 1; }
.film-on .price > .pr-steps { order: 2; display: block; margin-top: clamp(14px, 2.4svh, 22px); }
.film-on .price > .cl-seats { order: 4; }
.film-on .price > .pr-act { order: 5; }
.film-on .price > .pr-end { order: 6; }

@media (min-height: 780px) { .film-on .price { --pr-row: 48px; --pr-fig: 34px; --pr-label: 20px; --pr-disc: 30px; --pp-row: 29px; } }
@media (min-height: 880px) { .film-on .price { --pr-row: 56px; --pr-fig: 40px; --pp-row: 32px; --pp-name: 18px; --pp-fig: 21px; } }

/* ---------------------------------------------------------------- the ticket, large */
.film-on #s-price .ticket { padding: 6px 16px 10px 14px; border-radius: 26px; transform-origin: 50% 0; }
.film-on #s-price .tk-row { align-items: center; justify-content: flex-start; gap: 10px; min-height: var(--pr-row); padding: 5px 0 4px; cursor: pointer; }
.film-on #s-price .tk-row[data-key="extra"] { display: none !important; }
/* the gift lines this ticket collects once its three lines are in (the board's ticket.onLastScene; price.js): a small
   line each, the gift's mark under the steps' discs, its name in the page's navy, its figure right after it. They
   keep their place from the first frame, drawn and waiting like every line, so nothing under the ticket moves */
.film-on #s-price .tk-row.tk-gift { min-height: 0; padding: 0 5px 3px; gap: 15px; cursor: default; }
.film-on #s-price .tk-row.tk-gift:last-of-type { padding-bottom: 0; }
.film-on #s-price .tk-gift .tk-label { font: 600 15px/1.45 var(--ui); color: var(--navy); }
.film-on #s-price .tk-gift .tk-mark { width: 18px; height: 18px; color: var(--navy2); }
.film-on #s-price .tk-gift .tk-fig { display: inline-flex; width: auto; margin-inline-start: -6px; }
.film-on #s-price .tk-gift .tk-fig .num { font: 700 18px/1.2 var(--ui); }
.film-on #s-price .tk-row.tk-gift::before { inset-inline: calc(var(--pr-disc) + 10px) 2px; }
/* the guarantees' small seals, on this ticket's shoulder */
.film-on #s-price .tkt-seals { top: -17px; }
.film-on #s-price .tkt-seal { --seal-d: 26px; }
.film-on #s-price .tk-row + .tk-row { border-top: 0; }
.film-on #s-price .tk-row.tkt-perf { margin-top: 2px; border-top: 2px dashed var(--line2); }
.film-on #s-price .tk-label { font: 700 var(--pr-label)/1.3 var(--ui); color: var(--ink); }
/* the step's number on its line: the same disc as the step's badge, small */
.pr-disc { flex: none; width: var(--pr-disc); height: var(--pr-disc); border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: #fff;
  font: 700 calc(var(--pr-disc) * 0.56)/1 var(--ui); transition: box-shadow 0.2s var(--e-out); }
.film-on #s-price .tk-row.is-shown .pr-disc { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--sky); }
/* the figure: the numeral, and its unit small under it; every numeral ends on one edge */
.film-on #s-price .tk-fig { display: grid; justify-items: start; row-gap: 1px; width: var(--tk-fig, auto); }
.film-on #s-price .tk-fig .num { font: 700 var(--pr-fig)/1.02 var(--ui); color: var(--navy); letter-spacing: -0.01em; transform-origin: 50% 100%; }
.film-on #s-price .tk-fig .unit { font: 500 14.5px/1.3 var(--ui); color: var(--ink2); }
/* the free week's line is the longest name: its 0 stands at the card's edge, where every figure begins */
.film-on #s-price .tk-row[data-key="week"] .tk-fig { width: auto; min-width: 0.62em; font-size: var(--pr-fig); justify-items: end; }
/* a line that has not landed yet: its place is drawn, waiting */
.film-on #s-price .tk-row:not(.tk-in)::before { content: ""; position: absolute; inset-inline: calc(var(--pr-disc) + 10px) 2px; top: 50%; border-top: 2px dashed var(--line2);
  opacity: var(--tkt-ph, 0); pointer-events: none; }
/* inside the setup: the protocols it holds, and the extras he picked as a numeral */
.film-on #s-price .tk-row.tk-in { min-height: 0; padding: 0 calc(var(--pr-disc) + 10px) 9px 0; margin-top: -6px; gap: 7px; }
.film-on #s-price .tk-in .tk-label { font: 500 15px/1.3 var(--ui); color: var(--ink2); }
.film-on #s-price .tk-in .tk-mark { width: 18px; height: 18px; }
.film-on #s-price .tk-in .tk-fig { display: none; }
.pr-plusn { flex: none; min-width: 34px; height: 24px; padding: 0 8px; border-radius: 12px; display: inline-grid; place-items: center; background: var(--mist); color: var(--navy);
  font: 700 15px/1 var(--ui); opacity: 0; }
/* when the subscription starts */
.pr-when { padding: 0 calc(var(--pr-disc) + 10px) 2px 0; margin-top: -6px; font: 500 14.5px/1.45 var(--ui); color: var(--ink2); text-wrap: balance; }
/* when the setup is paid (the founder's own line, 2026-10-09): one small line just under the setup's total, the foot
   of the pale panel. It stays when the fit folds the subscription's small line (pr-t4): it is the new term */
.pr-when.pr-pay { margin-top: 0; padding-bottom: 3px; }
/* the setup, divided (decision 12; the founder, 2026-10-08, night: the parts first, each with its name and its
   figure, and their sum LAST). One pale panel on the ticket: the four parts as full rows, one under another (a small
   navy tile with the part's icon, its name, its figure and the unit at the row's far end), a rule, and under the rule
   the step's own line as the sum. The panel keeps the height of five rows: the fifth is an extra protocol he
   picks, and with four the rows stand a little apart, so nothing under the ticket moves when he taps the stepper */
.pr-div { display: none; }
.film-on #s-price .pr-div { position: relative; display: flex; flex-direction: column; height: calc(5 * var(--pp-row) + 9px); margin: 2px -7px 0 -8px; padding: 3px 7px 0 8px;
  border-radius: 16px 16px 0 0; background: var(--mist2); cursor: pointer; }
/* the lead line over the parts (the founder's own words, 2026-10-09): the small-line style, inside the pale panel.
   In the film the step's own copy of it gives way to this one */
.pr-div-lead { flex: none; padding: 2px 3px 2px 0; font: 500 14.5px/1.4 var(--ui); color: var(--ink2); }
.film-on #s-price .pr-step .pr-lead { display: none; }
.pr-lead { margin: 0 0 4px; font: 500 15px/1.5 var(--ui); color: var(--ink3); }
@media (max-height: 700px) { .pr-div-lead { font-size: 14px; line-height: 1.3; padding-block: 1px; } }
@media (max-height: 600px) { .pr-div-lead { font-size: 13.5px; line-height: 1.25; padding-block: 0; } }
.pr-div-row { position: relative; flex: 1 1 0; min-height: 0; display: flex; align-items: center; gap: 8px; }
.pr-div-row[hidden] { display: none; }
/* a part's place, drawn and waiting, until its row lands */
.pr-div-row::before { content: ""; position: absolute; inset-inline: calc(var(--pr-disc) + 8px) 2px; top: 50%; border-top: 2px dashed var(--line2); opacity: var(--pp-ph, 0); pointer-events: none; }
.pr-div-t { flex: none; width: calc(var(--pr-disc) - 6px); height: calc(var(--pr-disc) - 6px); margin-inline: 3px; border-radius: 50%; display: grid; place-items: center;
  background: var(--navy); color: #fff; transform-origin: 50% 50%; }
.pr-div-t .ic { display: block; width: 58%; height: 58%; stroke-width: 2.2; }
.pr-div-name { flex: 1 1 0; min-width: 0; font: 600 var(--pp-name)/1.25 var(--ui); color: var(--ink); white-space: nowrap; }
.pr-div-fig { flex: none; display: inline-flex; align-items: baseline; gap: 4px; transform-origin: 0 50%; }
.pr-div-fig .num { font: 700 var(--pp-fig)/1 var(--ui); color: var(--navy); font-feature-settings: "tnum"; }
.pr-div-fig .unit { font: 500 13.5px/1 var(--ui); color: var(--ink2); }
/* the rule the parts are added up over */
.pr-div-rule { flex: none; display: block; height: 0; margin: 2px 0 0; border-top: 2px solid var(--navy); border-radius: 1px; transform-origin: 100% 50%; }
/* the sum: the step's own line, the foot of the same panel */
.film-on #s-price .tk-row.pr-sum { margin: 0 -7px 3px -8px; padding: 5px 7px 6px 8px; border-radius: 0 0 16px 16px; background: var(--mist2); }
.film-on #s-price .tk-row.pr-sum::after { inset: 0; border-radius: 0 0 16px 16px; }
/* with the parts on the ticket, the protocols are one of them: their own line gives way; the extras he picks are the
   fifth row, and their count rides it as a numeral */
.film-on .price.pr-parts .tk-row.tk-in[data-key="protocols"] { display: none; }
.film-on .price.pr-parts .pr-plusn { flex: none; min-width: 0; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--navy); color: #fff; font-size: 13px; }
/* more than five parts (price.js sets pr-many; eight since 2026-10-09, the founder's own ruling): the rows stand
   closer and smaller, a name too long for its row takes a second line (never cut, never run into its figure), the
   panel is as tall as its rows, and the row of the extras keeps its place while it is empty, so nothing under the
   ticket moves when he taps the stepper */
.film-on .price.pr-many { --pp-row: 22px; --pp-name: 15px; --pp-fig: 17px; }
@media (min-height: 701px) and (max-height: 879px) { .film-on .price.pr-many { --pr-row: 45px; } }
.film-on #s-price .price.pr-many .pr-div { height: auto; padding-bottom: 1px; }
.price.pr-many .pr-div-row { flex: none; min-height: var(--pp-row); gap: 7px; }
.price.pr-many .pr-div-row[hidden] { display: flex !important; visibility: hidden; }   /* over film.css's [hidden] */
.price.pr-many .pr-div-t { width: 20px; height: 20px; margin-inline: 2px; }
.price.pr-many .pr-div-name { white-space: normal; line-height: 1.15; text-wrap: balance; }
.price.pr-many .pr-div-fig .unit { font-size: 12.5px; }
/* the step's page under the ticket lists the same parts: a name may take two lines there too */
.film-on #s-price .price.pr-many .pr-step.is-divided .pr-in-row { flex-wrap: nowrap; gap: 0 9px; padding-block: 2px; line-height: 1.2; }
.film-on #s-price .price.pr-many .pr-step.is-divided .pr-name { white-space: normal; text-wrap: balance; }
.film-on #s-price .price.pr-many .pr-step.is-divided .pr-val { font-size: 16px; }
.film-on #s-price .price.pr-many .pr-step.is-divided .pr-val .unit { font-size: 13px; }
.film-on #s-price .price.pr-many .pr-step.is-divided .pr-ok { width: 18px; height: 18px; }
/* the fit (price.js measures): while the scene's last line would leave the screen the block tightens, one step at a
   time. No name and no figure is among what it gives up: first the spaces under the ticket, then each total's unit
   stands beside its numeral, then the subscription's small line folds (it is the last seal, one swipe on), then
   the rows stand closer (pr-t6 and pr-t7 are for a ticket of more than five parts: see pr-many) */
.film-on .price.pr-t2 > .pr-steps { margin-top: 8px; }
.film-on #s-price .price.pr-t2 > .pr-act { margin-top: 6px; }
.film-on #s-price .price.pr-t2 .pr-act .under { margin-top: 6px; }
.film-on #s-price .price.pr-t2 > .cl-seats { margin-top: 4px; }
.film-on #s-price .price.pr-t3 .tk-row:not([data-key="week"]) .tk-fig { display: inline-flex; align-items: baseline; gap: 6px; }
.film-on #s-price .price.pr-t3 .tk-row { min-height: 0; }
.film-on #s-price .price.pr-t4 .pr-when:not(.pr-pay) { display: none; }
.film-on #s-price .price.pr-t4.pr-keep .pr-when:not(.pr-pay) { display: block; }   /* it fits again after the later steps (price.js) */
.film-on #s-price .price.pr-t5 { --pp-row: 23px; --pr-fig: 26px; }
.film-on #s-price .price.pr-t5.pr-many { --pp-row: 22px; --pp-name: 14.5px; --pp-fig: 16px; }
/* with more than five parts, two steps more for a short phone (360 x 640 and under). pr-t6: every size one step down
   (the parts' rows, the three lines' figures, the button, the stepper). pr-t7, the last: the row
   of the extras no longer keeps its place while it is empty, so on such a screen the stepper's first tap moves what
   is under the ticket by one row */
.film-on #s-price .price.pr-many.pr-t6 { --pp-row: 20px; --pp-name: 13.5px; --pp-fig: 15px; --pr-fig: 22px; --pr-label: 16.5px; --pr-disc: 22px; }
.film-on #s-price .price.pr-many.pr-t6 .pr-div-t { width: 18px; height: 18px; }
.film-on #s-price .price.pr-many.pr-t6 .pr-act { margin-top: 5px; }
.film-on #s-price .price.pr-many.pr-t6 .pr-act .btn { height: 46px; font-size: 18px; }
.film-on #s-price .price.pr-many.pr-t6 .pr-extra { padding-block: 2px; }
.film-on #s-price .price.pr-many.pr-t6 .pr-extra .pr-mark { --nl-tile: 32px; }
.film-on #s-price .price.pr-many.pr-t6 .tk-gift .tk-label { font-size: 14px; line-height: 1.35; }
.film-on #s-price .price.pr-many.pr-t6 .tk-gift .tk-fig .num { font-size: 16px; }
.film-on #s-price .price.pr-many.pr-t6 > .cl-seats { margin-top: 2px; }
.film-on #s-price .price.pr-many.pr-t7 .pr-div-row[hidden] { display: none !important; }
.film-on #s-price .price.pr-t5 .tk-row { padding: 2px 0; }
.film-on #s-price .price.pr-t5 .tk-row.pr-sum { padding: 3px 7px 3px 8px; }
.film-on #s-price .price.pr-t5 .pr-extra { padding-block: 4px; }

/* ---------------------------------------------------------------- a step, landing under the ticket */
.film-on #s-price .pr-step:not(.pr-extra) { position: absolute; z-index: 3; top: var(--pr-zone, 340px); left: var(--gut); right: var(--gut); display: grid; grid-template-columns: auto minmax(0, 1fr);
  align-items: center; column-gap: 12px; row-gap: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; visibility: hidden; pointer-events: none; will-change: transform, opacity; }
.film-on #s-price .pr-step.is-page { pointer-events: auto; }
.film-on #s-price .pr-step:not(.pr-extra) > .pr-body { display: contents; }
/* its badge: the number the dot grows into (the chapter's own badge) */
.film-on #s-price .pr-mark { --nl-tile: var(--badge-d, 44px); background: var(--navy); color: #fff; transform-origin: 50% 50%; }
.film-on #s-price .pr-mark.is-dot { background: var(--blue); }
.film-on #s-price .pr-mark .ic { display: none; }
.pr-n { font: 700 calc(var(--nl-tile, 44px) * 0.54)/1 var(--ui); font-feature-settings: "tnum"; }
html:not(.film-on) .pr-n { display: none; }
/* its name, large */
.film-on #s-price .pr-step:not(.pr-extra) .pr-what { font: 700 clamp(40px, calc(var(--cw) * 0.15), 60px)/1.25 var(--ui); color: var(--ink); white-space: nowrap; isolation: isolate; }
/* what is in it: rows that land ticked, one after another */
.film-on #s-price .pr-step:not(.pr-extra) .pr-in { grid-column: 1 / -1; display: grid; gap: 0; margin-top: 4px; }
.film-on #s-price .pr-in-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; min-height: var(--pr-mrow, 50px); font: 700 var(--pr-mfs, 21px)/1.3 var(--ui); color: var(--ink); }
.film-on #s-price .pr-in-row.opens { cursor: pointer; }
.film-on #s-price .pr-tick, .film-on #s-price .pr-cnt { flex: none; width: var(--pr-mtile, 36px); height: var(--pr-mtile, 36px); border-radius: 50%; display: grid; place-items: center;
  background: var(--navy); color: #fff; }
.film-on #s-price .pr-tick .ic { width: 54%; height: 54%; }
.film-on #s-price .pr-fams .pr-tick { display: none; }
.film-on #s-price .pr-cnt { order: -1; font: 700 calc(var(--pr-mtile, 36px) * 0.47)/1 var(--ui); }
.film-on #s-price .pr-name { flex: 1 1 0; min-width: 0; display: inline-block; white-space: nowrap; }
/* a part's share of the price, at the row's end: plain, with its unit (nothing calls it a value) */
.film-on #s-price .pr-val { order: 7; font: 700 17px/1 var(--ui); color: var(--navy); transform-origin: 0 50%; }
/* the market's monthly figures are not a family's: they stand in the market's sheet, under the programmes' own names */
.film-on #s-price .pr-fams .pr-val { display: none; }
.film-on #s-price .pr-val .unit { font-size: 14px; color: var(--ink3); }
.pr-ok { order: 8; flex: none; width: 22px; height: 22px; color: var(--ok); }
.pr-ok .ic { display: block; width: 100%; height: 100%; stroke-width: 2.6; }
.film-on #s-price .pr-in-row.is-open .pr-full, .film-on #s-price .pr-in-row.is-open .pr-basis { display: block; order: 9; flex: 0 0 100%; padding: 0 calc(var(--pr-mtile, 36px) + 12px) 8px 0;
  font: 500 15.5px/1.6 var(--ui); color: var(--ink2); }
/* the step's figure: it climbs in steps (by its parts, when the price is divided: decision 12) */
.film-on #s-price .pr-step:not(.pr-extra) > .pr-fig { grid-column: 1 / -1; justify-self: start; align-items: baseline; gap: 8px; margin-top: 8px; padding-top: 8px; }
.film-on #s-price .pr-step:not(.pr-extra) > .pr-fig .num { display: inline-block; font: 700 clamp(46px, calc(var(--cw) * 0.16), 64px)/1 var(--ui); color: var(--navy); letter-spacing: -0.015em; }
.film-on #s-price .pr-step:not(.pr-extra) > .pr-fig .unit { font: 600 17px/1.3 var(--ui); color: var(--ink2); }
.film-on #s-price .pr-step:not(.pr-extra) .pr-small { grid-column: 1 / -1; order: 9; margin-top: 4px; font: 500 15px/1.5 var(--ui); color: var(--ink2); }
/* the close mark of a step that was asked for again: a 44 px target at the step's far corner */
.pr-back { display: none; }
.film-on #s-price .pr-back { display: grid; place-items: center; position: absolute; top: -2px; left: -6px; width: 44px; height: 44px; border-radius: 50%; color: var(--navy); opacity: 0; }
.film-on #s-price .pr-back::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--mist); z-index: -1; }
.film-on #s-price .pr-back .ic { width: 20px; height: 20px; transform: rotate(45deg); stroke-width: 2.2; }
.film-on #s-price .pr-step:not(.is-page) .pr-back { pointer-events: none; }

/* ---------------------------------------------------------------- the one real pick: a stepper on a lit row */
.film-on #s-price .pr-extra { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 14px; border-radius: 28px; background: #fff; color: var(--ink);
  box-shadow: var(--sh-chip), 0 0 0 1px rgba(198,214,232,0.7); will-change: transform, opacity; }
.film-on #s-price .pr-extra .pr-mark { --nl-tile: 40px; }
.film-on #s-price .pr-extra .pr-body { flex: 1; min-width: 0; display: grid; gap: 1px; }
.film-on #s-price .pr-extra .pr-what { font: 700 18px/1.3 var(--ui); white-space: nowrap; }
.film-on #s-price .pr-extra .pr-each { margin: 0; font: 500 15px/1.3 var(--ui); color: var(--ink2); }
.film-on #s-price .pr-extra .pr-each .num { font-weight: 700; color: var(--navy); }
.film-on #s-price .stepper { background: var(--mist); }
.film-on #s-price .st-plus { background: var(--navy); color: #fff; box-shadow: 0 8px 16px -8px rgba(12,68,124,0.6); }
.film-on #s-price .st-n { min-width: 34px; font-size: 21px; }

/* ---------------------------------------------------------------- the whole, under the pick */
/* the closed state, over the button (D185): at zero the closed sentence stands here alone, over the button that then
   reads the waiting list's label. While the page is open the box says nothing and takes no room (no count and no
   total stands here, D422) */
.film-on #s-price .cl-seats { display: none; margin-top: clamp(6px, 1.2svh, 12px); padding-inline: 4px; }
html.is-closed #s-price .cl-seats { display: block; }
.film-on #s-price .seats-closed { margin: 0; font: 600 clamp(16px, calc(var(--cw) * 0.047), 18px)/1.45 var(--ui); color: var(--ink); text-align: start; text-wrap: balance; }
.film-on #s-price .pr-act { margin-top: clamp(12px, 2.6svh, 24px); display: flex; flex-direction: column; }
.film-on #s-price .pr-act .btn { width: 100%; }
.film-on #s-price .pr-act .under { margin-top: 9px; text-align: center; }
/* at rest the button is alive: its chevron nudges towards the tap, on the compositor */
.film-on .scene.is-on .price .pr-act .btn .arrow { animation: pr-nudge 2.6s var(--e-io) 1.6s infinite; }
@keyframes pr-nudge { 0%, 62%, 100% { transform: none; } 78% { transform: translate3d(-5px, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .film-on .scene.is-on .price .pr-act .btn .arrow { animation: none; } }
.film-still .scene.is-on .price .pr-act .btn .arrow { animation: none; }

/* ---------------------------------------------------------------- the page's end, under the first view
   What the close held, as the last scene's own end: the market's quiet line, the VAT sentence, the film's end card,
   the closing line, the logo with who built it, the links. The column scrolls (film.css .runs-on). */
.film-on #s-price .pr-end { display: flex; flex-direction: column; padding-top: clamp(14px, 2.4svh, 22px); padding-bottom: calc(18px + var(--sab, 0px)); }
.film-on #s-price .pr-end > * { flex: none; }
/* the market: a quiet line; a tap opens its sheet in place, under it */
.film-on #s-price .pr-market { margin-top: clamp(8px, 1.4svh, 14px); align-self: stretch; }
.film-on #s-price .pr-market > summary { justify-content: flex-start; gap: 8px; }
.film-on #s-price .pr-market .plus-box { width: 34px; height: 34px; }
.film-on #s-price .pr-ask { font: 600 16px/1.4 var(--ui); color: var(--navy2); }
.film-on #s-price .pr-market[open] > .sheet { margin: 4px 0 6px; padding: 14px 16px 16px; border-radius: 22px;
  background: #fff; color: var(--ink2); box-shadow: var(--sh-chip), 0 0 0 1px rgba(198,214,232,0.8); font: 500 15.5px/1.7 var(--ui); }
/* the comparison (the values file, "compared"): the two programmes with their monthly figures, and their sum */
.pr-cmp { display: grid; gap: 2px; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 2px solid var(--line); }
.pr-cmp-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font: 600 16px/1.5 var(--ui); color: var(--ink); }
.pr-cmp-fig { flex: none; display: inline-flex; align-items: baseline; gap: 5px; }
.pr-cmp-fig .num { font: 700 20px/1.2 var(--ui); color: var(--ink); }
.pr-cmp-fig .unit { font-size: 14.5px; color: var(--ink3); }
.pr-cmp-sum { justify-content: flex-end; margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--line); }
.pr-cmp-sum .num { font-size: var(--pr-fig, 38px); line-height: 1.05; color: var(--ink); }
html:not(.film-on) .pr-cmp { display: none; }
.pr-effort { display: block; margin-top: 8px; font: 700 18px/1.5 var(--ui); color: var(--ink); }
html:not(.film-on) .pr-effort { display: inline; font: inherit; color: inherit; }
/* the VAT sentence: a truth line, small and read, under the market's */
.film-on #s-price .pr-vat { margin-top: 4px; font: 500 14px/1.55 var(--ui); color: var(--ink2); text-wrap: pretty; }
/* the film's end card (motion/beats3.tsx, B9End; ART.md 3.4): the line in two sizes, its last word the largest type of
   the page's end, on the sky underline, the blue dot on the baseline as its full stop. Here the dot is the typed one:
   the page's one dot lives over the scenes and would not scroll with this column */
.film-on #s-price .end-line { margin-top: clamp(26px, 5svh, 48px); }
.film-on #s-price .end-first { font-size: clamp(26px, min(calc(var(--cw) * 0.094), 4.8svh), 42px); line-height: 1.22; }
.film-on #s-price .end-peak { display: block; margin-top: -0.05em; font-size: clamp(60px, min(calc(var(--cw) * 0.25), 12svh), 112px); line-height: 1.04; white-space: nowrap; }
.film-on #s-price .end-peak .w { display: inline-block; transform-origin: 60% 60%; }
.film-on #s-price .end-peak .hl::before { inset-inline: 0; }       /* the key word's underline ends at the gutter */
.film-on #s-price .fullstop { margin-inline-start: 0.07em; transform-origin: 50% 100%; }
.film-on #s-price .end-close { margin-top: clamp(6px, 1.5svh, 14px); font: 600 clamp(17px, min(calc(var(--cw) * 0.056), 2.7svh), 22px)/1.5 var(--ui); color: var(--ink); }
/* the sign: the logo, and who built it (the count's own small line; the only word on the page about who) */
.film-on #s-price .end-sign { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: clamp(22px, 4svh, 40px); }
.film-on #s-price .end-logo b { font-size: clamp(26px, 4svh, 34px); }
.film-on #s-price .end-logo i { width: 0.9em; height: 3px; margin-top: 4px; font-size: clamp(26px, 4svh, 34px); transform-origin: 50% 50%; }
.film-on #s-price .end-by { font: 600 18px/1.4 var(--ui); color: var(--ink2); }
/* the footer: three quiet links in one row */
.film-on #s-price .foot { gap: 6px; align-items: center; margin-top: 2px; }
.film-on #s-price .foot a { min-height: 44px; padding: 0 10px; font: 600 15px/1 var(--ui); color: var(--ink3); }
.film-on #s-price .foot a + a { position: relative; margin-inline-start: 7px; }
.film-on #s-price .foot a + a::before { content: ""; position: absolute; inset-inline-start: -5px; top: 50%; width: 3px; height: 3px; margin-top: -1px; border-radius: 50%; background: var(--line2); }
.film-on #s-price .foot a:active { color: var(--navy); }
/* the site's footer (build.py, SITE.links): the site's own pages in two quiet rows, and its legal line */
.film-on #s-price .foot-site { display: grid; grid-template-columns: repeat(3, auto); justify-content: center; justify-items: center; gap: 0 4px; }
.film-on #s-price .foot-site a { min-height: 40px; padding: 0 8px; font-size: 14px; }
.film-on #s-price .foot-site a + a { margin-inline-start: 0; }
.film-on #s-price .foot-site a:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }      /* a link alone on the last row stands in its middle */
.film-on #s-price .foot-site a + a::before { content: none; }      /* two rows: a dot at a row's start would read as a slip */
.film-on #s-price .foot-legal { margin: 2px 0 0; text-align: center; font: 500 11.5px/1.5 var(--ui); color: var(--ink3); }
.film-on #s-price .foot-legal a { color: inherit; text-decoration: none; }
.foot-legal { margin: 8px 0 0; font: 500 12px/1.6 var(--ui); color: var(--ink3); text-align: center; }
.foot-site { flex-wrap: wrap; }
/* while a step is landing, or is looked at again, the whole waits and takes no tap */
.film-on .price.pr-building > .pr-act, .film-on .price.pr-building > .cl-seats, .film-on .price.pr-building > .pr-end,
.film-on .price.pr-building .pr-extra { pointer-events: none; }

@media (max-height: 700px) {
  .film-on .price { padding-top: calc(52px + env(safe-area-inset-top, 0px)); --pr-row: 40px; --pr-fig: 28px; --pr-label: 18px; --pr-disc: 26px; --pp-row: 26px; }
  .film-on .price > .pr-steps { margin-top: 10px; }
  .film-on #s-price .ticket { padding: 4px 14px 8px 12px; border-radius: 22px; }
  .film-on #s-price .tk-fig .unit { font-size: 14px; }
  .pr-when { font-size: 14px; line-height: 1.4; }
  .film-on #s-price .pr-extra { padding: 6px 6px 6px 12px; }
  .film-on #s-price .pr-act { margin-top: 8px; }
  .film-on #s-price .pr-act .btn { height: 52px; }
  .film-on #s-price .pr-act .under { margin-top: 7px; font-size: 14.5px; line-height: 1.45; }
  .film-on #s-price .pr-vat { font-size: 13.5px; line-height: 1.5; }
  .film-on #s-price .tk-row.tk-gift { padding-bottom: 1px; }
  .film-on #s-price .tk-gift .tk-label { font-size: 14.5px; line-height: 1.4; }
  .film-on #s-price .cl-seats { margin-top: 5px; }
  .film-on #s-price .pr-step:not(.pr-extra) .pr-what { font-size: clamp(34px, calc(var(--cw) * 0.12), 46px); }
  .film-on #s-price .pr-step:not(.pr-extra) > .pr-fig .num { font-size: clamp(40px, calc(var(--cw) * 0.13), 52px); }
}
/* a short screen (548 to 600 px): the ticket smaller, each total's unit beside its numeral, the setup's four rows
   close together and whole (name 17 px, figure 20 px); the subscription's small line is in its step, one tap away */
@media (max-height: 600px) {
  .film-on .price { padding-top: calc(46px + env(safe-area-inset-top, 0px)); --pr-row: 30px; --pr-fig: 25px; --pr-label: 16.5px; --pr-disc: 22px; --pp-row: 23px; }
  .film-on #s-price .tk-row:not([data-key="week"]) .tk-fig { display: inline-flex; align-items: baseline; gap: 6px; }
  .film-on #s-price .pr-div { margin-top: 0; padding-top: 1px; height: calc(5 * var(--pp-row) + 5px); border-radius: 12px 12px 0 0; }
  .film-on .price.pr-many, .film-on #s-price .price.pr-t5.pr-many { --pp-row: 21px; --pp-name: 14px; --pp-fig: 15.5px; }
  .film-on #s-price .price.pr-many .pr-div { height: auto; }
  .film-on #s-price .tk-row.pr-sum { padding: 2px 7px 3px 8px; margin-bottom: 1px; border-radius: 0 0 12px 12px; }
  .film-on .price > .pr-steps { margin-top: 8px; }
  .film-on #s-price .ticket { padding: 3px 12px 4px 10px; border-radius: 18px; }
  .film-on #s-price .tk-row { padding: 2px 0; gap: 8px; }
  .film-on #s-price .tk-row.tk-in, .pr-when { display: none; }
  .film-on #s-price .tk-fig .unit { font-size: 13.5px; line-height: 1.2; }
  .film-on #s-price .pr-extra { padding: 3px 4px 3px 10px; border-radius: 24px; gap: 9px; }
  .film-on #s-price .pr-extra .pr-mark { --nl-tile: 32px; }
  .film-on #s-price .pr-extra .pr-what { font-size: 16.5px; }
  .film-on #s-price .pr-extra .pr-each { font-size: 14px; }
  .film-on #s-price .pr-act { margin-top: 6px; }
  .film-on #s-price .pr-act .btn { height: 48px; font-size: 18px; }
  .film-on #s-price .pr-act .under { margin-top: 5px; font-size: 13.5px; line-height: 1.4; }
  .film-on #s-price .pr-ask { font-size: 15px; }
  .film-on #s-price .pr-vat { font-size: 13.5px; line-height: 1.42; }
  .film-on #s-price .tk-gift .tk-label { font-size: 14px; line-height: 1.3; }
  .film-on #s-price .tk-gift .tk-fig .num { font-size: 16px; }
  .film-on #s-price .cl-seats { margin-top: 3px; }
  .film-on #s-price .end-sign { gap: 10px; }
  .film-on #s-price .end-by { font-size: 16px; }
  .film-on #s-price .end-logo b, .film-on #s-price .end-logo i { font-size: 24px; }
  .film-on #s-price .pr-step:not(.pr-extra) .pr-what { font-size: clamp(28px, calc(var(--cw) * 0.1), 36px); }
  .film-on #s-price .pr-step:not(.pr-extra) > .pr-fig { margin-top: 2px; padding-top: 2px; }
  .film-on #s-price .pr-step:not(.pr-extra) > .pr-fig .num { font-size: 36px; }
  .film-on #s-price .pr-step:not(.pr-extra) > .pr-fig .unit { font-size: 15px; }
  .film-on #s-price .pr-step:not(.pr-extra) .pr-small { display: none; }
  .film-on #s-price .pr-mark { --nl-tile: 32px; }
}

/* D528 (2026-11-09): the old figure struck through in red before the price (the month's 1,000), and the setup's own
   figure struck (its small line says it is free) */
#s-price .was { font: 600 17px/1.2 var(--ui); color: var(--ink2); text-decoration: line-through; text-decoration-color: var(--danger);
  text-decoration-thickness: 2px; font-variant-numeric: tabular-nums; }
html:not(.film-on) #s-price .is-struck .num { text-decoration: line-through; text-decoration-color: var(--danger); text-decoration-thickness: 3px; }

/* D529 (3a): the strike drawn in the film. The old figure (wrapped) holds, a red line is drawn across it from the
   right as it dims and steps back, then the price he pays rises beside it */
.film-on #s-price .pr-strikes .was { display: none; }
.film-on #s-price .pr-strikes .num.is-whole { text-decoration: none; }
#s-price .pr-old { position: relative; display: inline-block; transform-origin: 100% 60%; }
#s-price .pr-strike { position: absolute; inset-inline: -4%; top: 54%; height: 0.09em; min-height: 2px; border-radius: 2px;
  background: var(--danger); transform: scaleX(0); transform-origin: 100% 50%; pointer-events: none; }
#s-price .pr-now { display: inline-block; opacity: 0; font: inherit; font-weight: 800; color: var(--navy); margin-inline-start: 0.28em; }
#s-price .pr-step .pr-now { font-size: 1em; }
html:not(.film-on) #s-price .pr-now, html:not(.film-on) #s-price .pr-strike { display: none; }