/* Watchdog: a fixed cinema theme on the home page, with daylight and dark-device themes on inner pages.
   Palette roles stay fixed: blue = the system, red = an alert, green = "deleted / no match",
   yellow = the CCTV sign and "example" labels. No purple.
   Home motion uses native scroll and requestAnimationFrame only while the scene is visible.
   Inner-page devices keep their flat outlines and stepped readouts.

   Themes: every shared colour is a token here. Home-only cinema tokens sit on .cinema-home.
   Inner-page light values are on :root, with dark values on :root[data-theme="dark"].
   The home overrides the shared tokens without changing inner-page rendering. */

:root {
  color-scheme: light;

  /* fixed: the same in both themes */
  --wolf: oklch(0.262 0.036 256);        /* Wolf Navy, the colour of the logo */
  --on-ink: oklch(0.985 0.003 250);      /* text on a navy ground */
  --on-ink-dim: oklch(0.86 0.015 250);   /* paragraphs on navy */
  --on-ink-3: oklch(0.78 0.02 250);      /* quiet text on navy */
  --light-hi: oklch(0.9 0.01 250);       /* hover of the light button on navy */
  --sign: oklch(0.82 0.125 84);          /* the CCTV sign and the Example chips */
  --on-sign: var(--wolf);
  --sign-screw: oklch(0.58 0.09 80);
  --qr-ground: oklch(1 0 0);             /* the QR code stays dark on light, so it scans */
  --day-panel: oklch(1 0 0);             /* the labels and pins on the dusk render */
  --day-line: oklch(0.885 0.013 250);
  --day-sys: oklch(0.52 0.15 252);
  --day-alert: oklch(0.55 0.2 29);

  /* themed: light values */
  --bg: oklch(0.979 0.004 250);
  --bg-2: oklch(0.944 0.011 250);
  --panel: oklch(1 0 0);
  --road: oklch(0.918 0.011 250);
  --line: oklch(0.885 0.013 250);
  --edge: oklch(0.62 0.02 250);
  --screen: oklch(1 0 0);
  --ink: var(--wolf);
  --ink-2: oklch(0.40 0.03 256);
  --ink-3: oklch(0.49 0.025 256);
  --sys: oklch(0.52 0.15 252);
  --on-sys: var(--on-ink);
  --alert: oklch(0.55 0.2 29);
  --alert-soft: oklch(0.955 0.025 29);
  --on-alert: oklch(1 0 0);
  --ok: oklch(0.5 0.11 160);
  --navy: var(--wolf);                   /* the band, the footer, the phone body */
  --navy-line: oklch(0.4 0.03 256);
  --solid: var(--wolf);                  /* the main button and the "a person acts" tags */
  --solid-hi: oklch(0.34 0.05 256);
  --on-solid: var(--on-ink);
  --draw: oklch(0.66 0.02 250);          /* line art in the street drawings */
  --draw-2: oklch(0.72 0.02 250);
  --draw-pave: oklch(0.84 0.013 250);
  --draw-slab: oklch(0.86 0.012 250);
  --glass: oklch(0.955 0.012 245);
  --chimney: oklch(0.88 0.012 250);
  --gable: oklch(0.9 0.012 250);
  --marking: oklch(1 0 0);               /* road markings */

  /* Literata only for the large headings (h1, h2, the three figures); Atkinson for everything else.
     Each stack names a metric-matched local fallback (fonts.css), so text barely moves when the web font arrives. */
  --display: "Literata", "Literata fallback", Georgia, serif;
  --text: "Atkinson Hyperlegible Next", "Atkinson Next fallback", system-ui, sans-serif;
  --mono: "Atkinson Hyperlegible Mono", "Atkinson Mono fallback", ui-monospace, monospace;

  --r-chip: 4px;
  --r-ctl: 6px;
  --r-panel: 10px;
  --wrap: 1240px;
  --gut: clamp(16px, 4vw, 40px);
}

/* dark: the visitor switched to Dark. The site always opens Light. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: oklch(0.195 0.018 256);
  --bg-2: oklch(0.225 0.022 256);
  --panel: oklch(0.255 0.024 256);
  --road: oklch(0.3 0.02 252);
  --line: oklch(0.355 0.024 252);
  --edge: oklch(0.6 0.022 250);
  --screen: oklch(0.215 0.02 256);
  --ink: oklch(0.955 0.008 250);
  --ink-2: oklch(0.84 0.016 250);
  --ink-3: oklch(0.74 0.02 250);
  --sys: oklch(0.75 0.12 252);
  --on-sys: oklch(0.2 0.03 256);
  --alert: oklch(0.71 0.15 27);
  --alert-soft: oklch(0.3 0.07 27);
  --on-alert: oklch(0.2 0.03 256);
  --ok: oklch(0.78 0.13 160);
  --navy: oklch(0.16 0.024 256);
  --navy-line: oklch(0.32 0.03 256);
  --solid: oklch(0.93 0.012 250);
  --solid-hi: oklch(0.85 0.02 250);
  --on-solid: var(--wolf);
  --draw: oklch(0.56 0.02 250);
  --draw-2: oklch(0.47 0.02 250);
  --draw-pave: oklch(0.37 0.02 250);
  --draw-slab: oklch(0.33 0.02 250);
  --glass: oklch(0.31 0.03 245);
  --chimney: oklch(0.33 0.016 250);
  --gable: oklch(0.29 0.016 250);
  --marking: oklch(0.45 0.015 250);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 64px; scrollbar-color: var(--line) var(--bg); scrollbar-width: thin; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--sys); color: var(--on-sys); }
img, svg { display: block; max-width: 100%; }
a { color: var(--sys); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--sys); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
b, strong { font-weight: 700; color: var(--ink); }
time { font-family: var(--mono); }

.icon { width: 22px; height: 22px; flex: none; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--sys); color: var(--on-sys); padding: 10px 14px; border-radius: var(--r-ctl); font-weight: 700; }
.skip:focus { top: 12px; }
.skip:hover { color: var(--on-sys); }

h2 {
  font: 600 clamp(1.9rem, 4vw, 2.8rem)/1.12 var(--display);
  letter-spacing: -0.015em;
  max-width: 26ch; /* Literata's zero is narrower than Atkinson's, so 26ch here is the old 24ch in pixels */
}
h3, h2.sub { font: 700 1.2rem/1.35 var(--text); letter-spacing: normal; max-width: none; }
.lead { font-size: 1.2rem; line-height: 1.55; color: var(--ink-2); max-width: 62ch; }
.lead p + p { margin-top: 14px; }

/* sections: one rhythm; the alternate ground replaces a rule where two sections meet */
.section { padding: clamp(64px, 7vw, 104px) 0; border-top: 1px solid var(--line); }
.section.alt { background: var(--bg-2); border-top: 0; }
.section.alt + .section, .section.flush { border-top: 0; }
.sec-head .lead { margin-top: 18px; }
@media (min-width: 1080px) {
  .sec-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; align-items: start; }
  .sec-head h2, .sec-head h1 { grid-column: 1 / 8; }
  .sec-head .lead { grid-column: 8 / 13; margin-top: 0; font-size: 1.2rem; }
  .sec-head .see-demo { grid-column: 8 / 13; }
}
/* How it works: the link to the /demo page, under the lead */
.see-demo { margin-top: 14px; }

/* ---------- buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 24px;
  background: var(--solid); color: var(--on-solid);
  border: 0; border-radius: var(--r-ctl);
  font: 700 .95rem/1 var(--text); letter-spacing: 0.01em;
  text-decoration: none; cursor: pointer;
  transition: background-color .15s ease-out, transform .1s ease-out;
}
.btn:hover { background: var(--solid-hi); color: var(--on-solid); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: progress; }
.link-quiet { color: var(--sys); font-weight: 700; }
/* the advertising code needs the page to say that the service is not live (CAP 3.7): one quiet line by the button */
.prelaunch { flex-basis: 100%; font-size: .86rem; line-height: 1.45; color: var(--ink-3); }


/* ---------- nav: brand at the left edge, page links centred, Join free at the right edge ---------- */
.nav { position: sticky; top: 0; z-index: 50; background: var(--panel); border-bottom: 1px solid var(--line); }
.nav .wrap { display: flex; align-items: center; gap: 24px; height: 64px; }
.nav .wrap.wide { max-width: none; }
.brand { position: relative; display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.brand img { width: auto; height: 40px; }
/* the wolf in the nav is the logo file used as a mask, so it takes the ink colour of each theme */
.brand-mark { display: block; flex: none; height: 40px; aspect-ratio: 381 / 430.2; background: currentColor; -webkit-mask: url(/assets/logo/watchdog-wolf.svg) center / contain no-repeat; mask: url(/assets/logo/watchdog-wolf.svg) center / contain no-repeat; }
@media (forced-colors: active) { .brand-mark { forced-color-adjust: none; background: CanvasText; } }
.brand span { font: 700 1.2rem/1 var(--text); letter-spacing: -0.015em; }
.pages-nav ul { display: flex; gap: 28px; list-style: none; }
.pages-nav a { position: relative; display: block; padding: 6px 0; border-bottom: 2px solid transparent; color: var(--ink-2); text-decoration: none; font-size: .95rem; }
.pages-nav a:hover { color: var(--ink); }
.pages-nav a[aria-current="page"] { color: var(--ink); font-weight: 700; }
/* the current page: a 2px System Blue line under its link, or under the brand on the home page. Both lines sit
   2px below the foot of the logo (54-56px down the 64px bar), so the line keeps one height from page to page.
   build.py adds it as a real element with a view-transition name: on a move between pages it slides from the
   old page's link to the new one. The rest of the page swaps at once, as before. A browser without
   cross-document view transitions just swaps. */
.nav-line { position: absolute; left: 0; right: 0; height: 2px; background: var(--sys); view-transition-name: nav-line; }
.nav .brand .nav-line { bottom: -4px; }
.pages-nav a .nav-line { bottom: -5px; }
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-group(nav-line) { animation-duration: .4s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(nav-line), ::view-transition-old(nav-line), ::view-transition-new(nav-line) { animation: none; } }
.nav-extra { display: none; }
.nav-menu { display: none; }
.nav-end { display: flex; align-items: center; gap: 12px; }
.nav .btn { min-height: 40px; padding: 0 18px; font-size: .86rem; }
@media (width > 980px) {
  .nav-end { margin-left: auto; }
}
@media (width <= 980px) {
  .nav .wrap { gap: 12px; }
  .pages-nav { display: none; position: absolute; top: 64px; left: 0; right: 0; background: var(--panel); border-bottom: 1px solid var(--line); }
  .pages-nav.open { display: block; }
  .pages-nav ul { flex-direction: column; gap: 0; padding: 4px var(--gut) 12px; }
  .pages-nav li + li a { border-top: 1px solid var(--line); }
  .pages-nav a { padding: 14px 0; border-bottom: 0; font-size: 1.0625rem; color: var(--ink); }
  .pages-nav a[aria-current="page"] { color: var(--sys); }
  .pages-nav a .nav-line { display: none; }
  .nav-extra { display: list-item; }
  .nav-menu { display: inline-flex; align-items: center; margin-left: auto; min-height: 40px; padding: 0 14px; background: transparent; color: var(--ink); border: 1px solid var(--edge); border-radius: var(--r-ctl); font: 700 .95rem/1 var(--text); cursor: pointer; }
  .nav-menu[aria-expanded="true"] { border-color: var(--ink); }
  .nav-end .theme-btn { display: none; }
  .nav-theme { display: list-item; padding: 6px 0; border-top: 1px solid var(--line); }
}
@media (max-width: 380px) { .brand span { font-size: 1.05rem; } .brand img { height: 34px; } .brand-mark { height: 34px; } }

/* ---------- the theme switch: one button flips Light and Dark; the site always opens Light.
   It shows the sun in the light theme and the moon in the dark one. A click turns one out and the other in,
   both following data-theme, so the icon is right from the first paint. In the header on a wide screen,
   as the last row of the open menu on a phone. main.js runs it. ---------- */
html:not(.js) :is(.theme-btn, .nav-theme) { display: none !important; }
.theme-btn { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; background: transparent; color: var(--ink); border: 1px solid var(--edge); border-radius: var(--r-ctl); cursor: pointer; }
.theme-btn:hover { background: var(--bg-2); }
.theme-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0; background: transparent; border: 0; color: var(--ink); font: 400 1.0625rem/1.2 var(--text); text-align: left; cursor: pointer; }
.theme-ico { position: relative; flex: none; width: 20px; height: 20px; }
.theme-ico .icon { position: absolute; inset: 0; width: 20px; height: 20px; transition: transform .55s cubic-bezier(.2, .8, .2, 1), opacity .3s ease; }
.theme-ico .i-moon, :root[data-theme="dark"] .theme-ico .i-sun { opacity: 0; }
.theme-ico .i-moon { transform: rotate(-90deg) scale(.3); }
:root[data-theme="dark"] .theme-ico .i-sun { transform: rotate(90deg) scale(.3); }
:root[data-theme="dark"] .theme-ico .i-moon { transform: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .theme-ico .icon { transition: opacity .15s linear; } }

/* ---------- hero ---------- */
.hero { padding: clamp(40px, 6vw, 72px) 0 clamp(72px, 9vw, 112px); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: clamp(36px, 5vw, 64px); align-items: start; }
.hero-copy { padding-top: clamp(0px, 3vw, 40px); }
h1 {
  margin: 0 0 20px;
  font: 600 clamp(2.3rem, 5vw, 3.45rem)/1.08 var(--display);
  letter-spacing: -0.015em;
  max-width: 18.5ch;
}
/* The hero subtitle only: build.py turns inner-page h3s into h2.sub, and a bare .sub greyed them all. */
.hero-copy .sub { font-size: 1.2rem; color: var(--ink-2); max-width: 52ch; }
.sub2 { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--ink-2); max-width: 52ch; }
.sub2 .icon { color: var(--ink-2); margin-top: 2px; }
.ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin: 30px 0 20px; }

/* the lookout console */
.console { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-panel); overflow: hidden; }
.console-bar { display: flex; border-bottom: 1px solid var(--line); font: 600 .86rem/1 var(--text); color: var(--ink-2); }
.console-bar .cell { padding: 10px 12px; border-right: 1px solid var(--line); white-space: nowrap; }
.console-cap { margin-top: 12px; font-size: .95rem; color: var(--ink-2); }

/* the street scene: a still render of an example street corner, with live labels, door pins and the
   channel line laid over it. Text stays text, so it is crisp at any size and can be translated. */
.scene { position: relative; aspect-ratio: 1600 / 889; overflow: hidden; background: oklch(0.3 0.03 256); --tag-size: .78rem; --road-ink: oklch(0.93 0.01 250 / .78); --ok-ping: oklch(0.78 0.14 160); }
/* the labels, pins and channel line sit on the render, so they keep their daylight colours in both themes */
.scene { --panel: var(--day-panel); --line: var(--day-line); --ink: var(--wolf); --sys: var(--day-sys); --alert: var(--day-alert); }
.scene picture, .scene img { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene img { object-fit: cover; }
.scene .wire { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
.scene .channel { fill: none; stroke: var(--sys); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.scene .road { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%) rotate(var(--a)); font: 700 .75rem/1 var(--text); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; color: var(--road-ink); }
.scene .tag { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); padding: 2px 7px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-chip); font: 700 var(--tag-size)/1.25 var(--text); color: var(--ink); white-space: nowrap; }
.scene .tag.below { transform: translate(-50%, 12px); }
.scene .tag.edge-l { transform: translate(-15%, -50%); }
.scene .tag.edge-r { transform: translate(-85%, -50%); }
.scene .tag.match { border-color: var(--alert); color: var(--alert); }
.scene .pin { position: absolute; left: var(--x); top: var(--y); width: 12px; height: 12px; margin: -6px 0 0 -6px; background: var(--panel); border: 2px solid var(--sys); border-radius: 2px; }
.scene .pin::after { content: ""; position: absolute; inset: -6px; border: 2px solid var(--sys); border-radius: 50%; opacity: 0; }
.scene .pin.del::after { border-color: var(--ok-ping); animation: doorping .9s cubic-bezier(.2,.7,.3,1) both; }
.scene .pin.match { background: var(--alert); border-color: var(--panel); }
.scene .pin.match::after { border-color: var(--alert); animation: doorping 1.3s cubic-bezier(.2,.7,.3,1) infinite; }
.scene .ex { position: absolute; top: 10px; left: 10px; padding: 1px 6px; background: var(--sign); color: var(--on-sign); border-radius: var(--r-chip); font: 600 .78rem/1.45 var(--text); }
/* on a phone the labels stay at 12px; the render spaces the shop signs so they do not overlap */
@media (max-width: 560px) {
  .scene { --tag-size: .75rem; }
  .scene .tag { padding: 1px 5px; line-height: 1.2; }
  .scene .road { letter-spacing: .06em; }
  .scene .pin { width: 10px; height: 10px; margin: -5px 0 0 -5px; }
  .scene .tag.below { transform: translate(-50%, 9px); }
}
/* on the narrowest phones the road names give way, so the shop labels keep their room */
@media (max-width: 379px) { .scene .road { display: none; } }
@media (max-width: 340px) { .scene .tag { line-height: 1.05; padding: 1px 4px; } }
@keyframes doorping { 0% { opacity: .95; transform: scale(.6); } 100% { opacity: 0; transform: scale(2.3); } }

/* the alert row: reserved, so nothing on the page moves when the alert breaks in */
/* the idle line and the alert card share one cell, and the hidden card keeps its space, so the row is always the
   card's height and nothing below moves when the alert comes in */
.console-alert { display: grid; align-items: center; padding: 12px 14px; border-top: 1px solid var(--line); }
.console-alert > * { grid-area: 1 / 1; }
.console-alert .idle { font: 400 .86rem/1.4 var(--mono); color: var(--ink-3); }
.console-alert.live .idle { visibility: hidden; }
.alert-card { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px 16px; background: var(--panel); color: var(--ink-2); border: 2px solid var(--alert); border-radius: 8px; }
.alert-card[hidden] { display: grid; visibility: hidden; }
.alert-card b { display: block; color: var(--alert); font: 700 1.0625rem/1.3 var(--text); margin-bottom: 4px; }
.alert-card p { font-size: .95rem; line-height: 1.45; }
.alert-card .bell { width: 48px; height: 45px; color: var(--alert); }
.alert-card.in { animation: breakin .32s steps(4, end) both; }
@keyframes breakin { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.console-foot { border-top: 1px solid var(--line); background: var(--bg); padding: 12px 14px 14px; }
.log-title { font: 400 .78rem/1 var(--mono); color: var(--ink-3); margin-bottom: 8px; }
.log { list-style: none; font: 400 .86rem/1.75 var(--mono); min-height: calc(4 * 1.75em); }
.log li { display: grid; grid-template-columns: 6ch minmax(0, 1fr) auto; gap: 1.5ch; }
.log time { color: var(--ink-3); }
.log .what { color: var(--ink-2); }
.log .res { color: var(--ok); }
.log li.match .res { color: var(--alert); font-weight: 700; }

/* the bell */
.bell .swing { transform-origin: 72px 16px; }
.bell .waves { opacity: 0; }
.bell.ring .swing { animation: swing 1.1s ease-out both; }
.bell.ring .waves { animation: waves 1.1s steps(3, end) both; }
@keyframes swing { 0% { transform: rotate(0); } 15% { transform: rotate(16deg); } 35% { transform: rotate(-12deg); } 55% { transform: rotate(8deg); } 75% { transform: rotate(-4deg); } 100% { transform: rotate(0); } }
@keyframes waves { 0%, 100% { opacity: 0; } 20%, 70% { opacity: 1; } }

@media (width <= 980px) {
  .hero .wrap { grid-template-columns: minmax(0, 1fr); }
  .hero-copy { padding-top: 0; }
  h1 { max-width: 19.5ch; }
}
@media (max-width: 560px) {
  .alert-card { grid-template-columns: 36px minmax(0, 1fr); gap: 10px; padding: 10px 12px; }
  .alert-card .bell { width: 36px; height: 34px; }
  .log { font-size: .78rem; }
  .log li { grid-template-columns: 5.5ch minmax(0, 1fr) auto; gap: 1ch; }
}

/* ---------- the whole street: a terrace of facades ---------- */
/* the street section has no bottom padding: its pavement is the section's lower edge, so the terrace stands on it
   and there is no empty band before the next section */
.section.street { padding-bottom: 0; }
.street .wrap + .wrap { margin-top: 48px; }
.street .note, .public .note { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: .95rem; color: var(--ink-2); }
.terrace { list-style: none; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); border-top: 3px solid var(--line); }
.unit { position: relative; display: grid; grid-template-rows: auto 1fr; min-height: 200px; background: var(--panel); border-left: 1px solid var(--line); }
.unit:last-child { border-right: 1px solid var(--line); }
.terrace .unit:nth-child(3n+1)::before { content: ""; position: absolute; top: -17px; left: 22%; width: 18px; height: 14px; background: var(--line); }
.unit .fascia { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 80px; padding: 10px 8px; background: var(--bg-2); border-bottom: 1px solid var(--line); font: 700 .86rem/1.25 var(--text); text-align: center; color: var(--ink); }
.unit .fascia .icon { width: 20px; height: 20px; color: var(--sys); }
.unit .front { display: grid; grid-template-columns: minmax(0, 1fr) 18px; gap: 8px; align-items: end; padding: 12px 10px 0; }
.unit .win { position: relative; align-self: stretch; margin-bottom: 14px; border: 1px solid var(--line); border-radius: 2px; }
.unit .cam { position: absolute; top: 6px; left: 6px; width: 7px; height: 7px; background: var(--sys); border-radius: 1px; }
.unit .door { height: 46px; border: 1px solid var(--line); border-bottom: 0; border-radius: 2px 2px 0 0; }
.unit.home { background: transparent; }
.unit.home .fascia { background: transparent; color: var(--ink-3); font-weight: 400; }
.unit.home .fascia .icon { color: var(--ink-3); }
.unit.home .front { grid-template-columns: 1fr 1fr 18px; }
.unit.home .sash { align-self: start; height: 54px; border: 1px solid var(--line); opacity: .7; }
.pavement { display: block; height: 18px; background: var(--road); border-bottom: 2px solid var(--line); }
@media (width <= 980px) {
  .terrace { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 20px; border-top: 0; }
  .terrace .unit { border-top: 3px solid var(--line); }
  .terrace .unit:nth-child(3n) { border-right: 1px solid var(--line); }
  .terrace .unit::before { display: none; }
}
@media (max-width: 560px) { .unit { min-height: 168px; } .unit .fascia { font-size: .78rem; min-height: 58px; } }

/* ---------- the problem: a readout of three sourced figures ---------- */
.facts { list-style: none; margin-top: 40px; border-top: 1px solid var(--line); }
.facts li { display: grid; grid-template-columns: 8ch minmax(0, 1fr); gap: 24px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--line); }
.facts .fig { font: 600 1.6rem/1.1 var(--display); color: var(--ink); letter-spacing: -0.01em; }
.facts .says { color: var(--ink); max-width: 64ch; }
.facts .src { margin-top: 6px; font-size: .86rem; color: var(--ink-3); }
.facts .src a { color: var(--ink-2); }
.after { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 64px); align-items: start; margin-top: 56px; }
.after .prose p { color: var(--ink-2); max-width: 60ch; }
.after .prose p + p { margin-top: 14px; }
.shopkeeper { margin: 0; }
.shopkeeper img { width: 100%; height: auto; border-radius: var(--r-panel); border: 1px solid var(--line); }
.shopkeeper figcaption { margin-top: 8px; font-size: .86rem; color: var(--ink-3); }
@media (max-width: 860px) {
  .facts li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .after { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- how it works: a drawn street beside the steps ----------
   src/demo.py draws the stage: five member businesses and a staff phone. The step being read sets its
   data-step (main.js). Steps 1 to 4 happen at the corner shop, step 5 at the pub. Each step also holds
   its own copy (.demo-step): shown inline at 980px and narrower, read by screen readers at every width. */
.how .grid { margin-top: 56px; display: grid; grid-template-columns: minmax(400px, 1fr) minmax(0, 600px); gap: clamp(36px, 4.5vw, 64px); }
/* the step rules take direct children only: each step also holds a phone screen with its own list */
/* room after the last step, so the stage stays whole under the nav while step 5 is read */
.steps { padding-bottom: 28vh; }
.steps { list-style: none; counter-reset: step; }
.steps > li { position: relative; padding: 26px 0 30px 64px; border-top: 1px solid var(--line); counter-increment: step; }
.steps > li::before {
  content: counter(step); position: absolute; left: 0; top: 26px;
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--r-ctl);
  font: 700 1rem/1 var(--mono); color: var(--ink-3);
}
.steps h3, .steps h2.sub { font-size: 1.2rem; }
.steps > li > p { margin-top: 10px; color: var(--ink-2); max-width: 58ch; }
.steps .rule { display: inline-flex; gap: 10px; align-items: flex-start; margin-top: 14px; font: 600 .95rem/1.45 var(--text); color: var(--ink); }
.steps .rule .icon { width: 20px; height: 20px; margin-top: 1px; color: var(--sys); }
/* the step on screen is the filled one; steps already passed keep a blue outline */
.steps > li.on::before { background: var(--sys); border-color: var(--sys); color: var(--on-sys); }
.steps > li.done::before { border-color: var(--sys); color: var(--sys); }

/* the stage keeps its whole height on screen: its width follows the viewport height */
.demo-col { position: sticky; top: 84px; align-self: start; justify-self: end; width: min(100%, calc((100vh - 165px) * 600 / 660)); }
.demo-stage { position: relative; aspect-ratio: 600 / 660; container-type: inline-size; }
.demo-stage > .demo-street { position: absolute; inset: 0; width: 100%; height: 100%; border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--panel); }
/* the phone is held in front of the street, so it sits over the stage's edge; its type scales with the stage */
.demo-phone { position: absolute; left: -3%; top: 37%; width: 45%; font-size: 2.6667cqi; }
.demo-cap { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding-left: 46%; font-size: .86rem; line-height: 1.45; color: var(--ink-3); }
.demo-ex { display: inline-block; padding: 1px 6px; border-radius: var(--r-chip); background: var(--sign); color: var(--on-sign); font: 600 .78rem/1.5 var(--text); white-space: nowrap; }

/* the phone: what one business's staff see */
.demo-ph { padding: .5em; background: var(--navy); border-radius: 2.1em; }
.demo-ph-screen { display: grid; padding: .75em .75em .9em; background: var(--bg); border-radius: 1.65em; }
.demo-ph-state { grid-area: 1 / 1; display: flex; flex-direction: column; gap: .55em; visibility: hidden; }
.demo-ph-top { display: flex; align-items: center; justify-content: space-between; gap: .5em; padding: .1em .1em .15em; font-size: .76em; font-weight: 700; white-space: nowrap; color: var(--ink-2); }
.demo-ph .demo-ex { font-size: .9em; padding: 1px 5px; }
.demo-ph-h { font-weight: 700; line-height: 1.3; color: var(--ink); }
.demo-ph-clip { margin: 0; border-radius: .5em; overflow: hidden; }
.demo-ph-clip svg { width: 100%; height: auto; }
.demo-ph-btn { display: block; padding: .65em .4em; border: 1px solid var(--edge); border-radius: var(--r-ctl); background: var(--panel); text-align: center; font-size: .86em; font-weight: 700; line-height: 1.3; color: var(--ink); }
.demo-ph-btn.main { background: var(--solid); border-color: var(--solid); color: var(--on-solid); }
.demo-ph-note { display: flex; gap: .45em; align-items: flex-start; font-size: .82em; line-height: 1.4; color: var(--ink-2); }
.demo-ph .icon { width: 1.2em; height: 1.2em; margin-top: .05em; color: var(--sys); }
.demo-ph-list { list-style: none; display: grid; border: 1px solid var(--line); border-radius: .5em; background: var(--panel); }
.demo-ph-list li { display: grid; gap: .1em; padding: .55em .7em; }
.demo-ph-list li + li { border-top: 1px solid var(--line); }
.demo-ph-list li.yes { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .55em; font-size: .92em; line-height: 1.3; }
.demo-ph .k { font-size: .8em; line-height: 1.3; color: var(--ink-3); }
.demo-ph .v { font-size: .9em; font-weight: 700; line-height: 1.3; color: var(--ink); }
.demo-ph .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.demo-tick { position: relative; width: 1.25em; height: 1.25em; border-radius: var(--r-chip); background: var(--sys); }
.demo-tick::after { content: ""; position: absolute; left: .42em; top: .16em; width: .34em; height: .64em; border: solid var(--on-sys); border-width: 0 .16em .16em 0; transform: rotate(45deg); }
.demo-ph-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .5em; }
.demo-ph-pair figure, .demo-ph-face { margin: 0; display: grid; gap: .25em; }
.demo-ph-pair svg, .demo-ph-face svg { width: 100%; height: auto; }
.demo-ph-face { padding: .5em; background: var(--panel); border: 1px solid var(--line); border-radius: .5em; }
.demo-ph-face svg { max-width: 9em; }
.demo-ph figcaption { font-size: .78em; line-height: 1.3; color: var(--ink-3); }
.demo-ph-ok { display: flex; gap: .5em; padding: .55em .7em; border: 1px solid var(--sys); border-radius: .5em; background: var(--panel); font-size: .85em; line-height: 1.4; color: var(--ink-2); }
.demo-ph-ok .icon { width: 1.15em; height: 1.15em; }
.demo-ph-alert { display: grid; gap: .1em; padding: .6em .75em; border: 2px solid var(--alert); border-radius: .5em; background: var(--panel); }
.demo-ph-alert b { font-size: 1.02em; line-height: 1.3; color: var(--alert); }
.demo-ph-row { display: grid; gap: .1em; padding: .55em .7em; border: 1px solid var(--line); border-radius: .5em; background: var(--panel); }

/* the pixelated stills of the example person */
.still .osd { font: 400 9px var(--mono); fill: oklch(0.93 0.005 250); }
.still { border-radius: 4px; }
.still .bg { fill: oklch(0.21 0.012 250); }
.still .body { fill: oklch(0.5 0.018 250); }
.still .osd { font-size: 7px; }
.still .m1 { fill: oklch(0.30 0.012 250); }
.still .m2 { fill: oklch(0.38 0.012 250); }
.still .m3 { fill: oklch(0.46 0.012 250); }
.still .m4 { fill: oklch(0.55 0.012 250); }

/* the street: line art in daylight; each colour keeps its one job */
.demo-street .st-road { fill: var(--road); }
.demo-street .st-zebra { fill: var(--marking); }
.demo-street .st-lane { fill: none; stroke: var(--marking); stroke-width: 2.4; stroke-dasharray: 16 14; }
.demo-street .st-pave { fill: var(--bg-2); stroke: var(--draw-pave); }
.demo-street .st-slab { stroke: var(--draw-slab); }
.demo-street .st-kerb { stroke: var(--edge); stroke-width: 1.4; }
.demo-street :is(.st-wall, .st-glass, .st-fascia, .st-door, .st-roof, .st-chimney, .st-end) { stroke: var(--draw); stroke-width: 1.1; }
.demo-street .st-wall { fill: var(--panel); }
.demo-street .st-glass { fill: var(--glass); }
.demo-street .st-bar { fill: none; stroke: var(--draw-2); }
.demo-street .st-fascia, .demo-street .st-door, .demo-street .st-roof { fill: var(--bg-2); }
.demo-street .st-rule { stroke: var(--draw); stroke-width: 3; }
.demo-street .st-name { font: 700 11px var(--text); fill: var(--ink); }
.demo-street .st-sign { fill: var(--sign); }
.demo-street .st-handle { fill: var(--ink-3); }
.demo-street .st-cam { fill: var(--sys); }
.demo-street .st-edge { stroke: var(--draw); }
.demo-street .st-chimney { fill: var(--chimney); }
.demo-street .st-end { fill: var(--gable); }
.demo-street .st-plate { fill: var(--panel); stroke: var(--ink); stroke-width: .8; }
.demo-street .st-plate-t { font: 700 4.6px var(--text); letter-spacing: .04em; fill: var(--ink); }
.demo-street .st-lamp path { fill: none; stroke: var(--ink-3); stroke-width: 2; }
.demo-street .st-lamp rect { fill: var(--ink-3); }
.demo-street .st-walker { fill: var(--ink-3); stroke: var(--ink-3); stroke-width: 3.4; stroke-linecap: round; }
.demo-street .st-walker path { fill: none; }
.demo-street .st-lead { fill: none; stroke: var(--ink-3); stroke-width: 1.2; stroke-dasharray: 3 3; }
.demo-street .st-tag-bg.sys { fill: var(--sys); }
.demo-street .st-tag-bg.ink { fill: var(--solid); }
.demo-street .st-tag-t { font: 700 13.5px var(--text); fill: var(--on-sys); }
.demo-street .st-tag-t.ink { fill: var(--on-solid); }
.demo-street .st-label-bg { fill: var(--panel); stroke: var(--sys); stroke-width: 1.2; }
.demo-street .st-label-t { font: 700 12px var(--text); fill: var(--sys); }
.demo-street .st-ring, .demo-street .st-ring-hot { fill: none; stroke-width: 2.4; }
.demo-street .st-ring { stroke: var(--sys); }
.demo-street .st-ring-hot { stroke: var(--alert); }
.demo-street .st-channel { stroke: var(--sys); stroke-width: 2; }
.demo-street .st-pin { fill: var(--panel); stroke: var(--sys); stroke-width: 2; }
.demo-street .st-link { fill: none; stroke: var(--sys); stroke-width: 1.6; stroke-dasharray: 4 4; }
.demo-street .st-check-icon { fill: none; stroke: var(--on-solid); stroke-width: 2.2; stroke-linecap: round; }
.demo-street .st-check-v { font: 400 12.5px var(--text); fill: var(--on-solid); }
.demo-street .st-log-bg { fill: var(--panel); stroke: var(--line); }
.demo-street .st-log-h { font: 700 12px var(--text); fill: var(--sys); }
.demo-street .st-log-t, .demo-street .st-log-r { font: 400 10.5px var(--mono); }
.demo-street .st-log-t { fill: var(--ink-3); }
.demo-street .st-row.ok .st-log-r { fill: var(--ok); }
.demo-street .st-row.hot .st-log-r { font-weight: 700; fill: var(--alert); }

.demo-street .st-sign-bg { fill: var(--sign); }
.demo-street .st-sign-t { font: 600 11px var(--text); fill: var(--on-sign); }

/* what each step shows; every overlay is hidden until its step */
.demo-street :is(.st-tag, .st-ring-label, .st-check, .st-log, .st-ring, .st-ring-hot, .st-channel, .st-pin, .st-arrive) { visibility: hidden; }
:is(.demo-stage, .demo-step)[data-step="1"] .t1,
:is(.demo-stage, .demo-step)[data-step="2"] .t2,
:is(.demo-stage, .demo-step)[data-step="3"] :is(.t3, .st-ring, .st-ring-label),
:is(.demo-stage, .demo-step)[data-step="4"] :is(.st-check, .st-channel, .st-pin),
:is(.demo-stage, .demo-step)[data-step="5"] :is(.t5, .st-log, .st-channel, .st-pin, .st-ring-hot, .st-arrive) { visibility: visible; }
:is(.demo-stage, .demo-step):is([data-step="1"], [data-step="2"], [data-step="3"], [data-step="4"]) .st-shop[data-shop="corner"] :is(.st-wall, .st-rule),
:is(.demo-stage, .demo-step)[data-step="4"] .st-shop[data-shop="pharmacy"] :is(.st-wall, .st-rule) { stroke: var(--sys); }
:is(.demo-stage, .demo-step):is([data-step="1"], [data-step="2"], [data-step="3"], [data-step="4"]) .st-shop[data-shop="corner"] .st-wall,
:is(.demo-stage, .demo-step)[data-step="4"] .st-shop[data-shop="pharmacy"] .st-wall { stroke-width: 2; }
:is(.demo-stage, .demo-step)[data-step="5"] .st-shop[data-shop="pub"] .st-wall { fill: var(--alert-soft); stroke: var(--alert); stroke-width: 2; }
:is(.demo-stage, .demo-step)[data-step="5"] .st-shop[data-shop="pub"] .st-rule { stroke: var(--alert); }
:is(.demo-stage, .demo-step)[data-step="5"] .st-pin[data-shop="pub"] { fill: var(--alert); stroke: var(--alert); }
:is(.demo-stage, .demo-step)[data-step="5"] .st-arrive { fill: var(--ink); stroke: var(--ink); }
.demo-stage[data-step="1"] .demo-ph-state[data-for="1"], .demo-stage[data-step="2"] .demo-ph-state[data-for="2"],
.demo-stage[data-step="3"] .demo-ph-state[data-for="3"], .demo-stage[data-step="4"] .demo-ph-state[data-for="4"],
.demo-stage[data-step="5"] .demo-ph-state[data-for="5"], .demo-step .demo-ph-state { visibility: visible; }

/* each step's readouts step in once, when that step is reached; nothing glides.
   Reduced motion never adds .play, so it shows each step's finished state at once. */
@media (prefers-reduced-motion: no-preference) {
  /* scoped to the shown screen: an animated visibility would show through a hidden parent */
  .demo-stage.play[data-step="1"] [data-for="1"] .demo-flag { animation: demo-in 0s .5s both; }
  .demo-stage.play[data-step="4"] .s-b { animation: demo-in 0s .7s both; }
  .demo-stage.play[data-step="4"] .st-check-v { animation: demo-in 0s 1.6s both; }
  .demo-stage.play[data-step="4"] .st-channel { stroke-dasharray: 480; animation: demo-draw .9s steps(6) 1.9s both; }
  .demo-stage.play[data-step="4"] .st-pin { animation: demo-in 0s 2.8s both; }
  .demo-stage.play[data-step="5"] .st-row.r0 { animation: demo-in 0s .5s both; }
  .demo-stage.play[data-step="5"] .st-row.r1 { animation: demo-in 0s 1.2s both; }
  .demo-stage.play[data-step="5"] .st-row.r2 { animation: demo-in 0s 2s both; }
  .demo-stage.play[data-step="5"] :is(.st-shop[data-shop="pub"] .st-wall, .st-ring-hot, .st-pin[data-shop="pub"]) { animation: demo-hot 0s 2s both; }
  .demo-stage.play[data-step="5"] :is([data-for="5"] .demo-ph-alert, .t5) { animation: demo-in 0s 2.1s both; }
}
@keyframes demo-in { from { visibility: hidden; } to { visibility: visible; } }
@keyframes demo-draw { from { stroke-dashoffset: 480; } to { stroke-dashoffset: 0; } }
@keyframes demo-hot { from { fill: var(--panel); stroke: var(--line); } }

/* each step's own copy: read by screen readers beside the stage, shown inline at 980px and narrower */
.demo-step { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
.demo-crop { position: relative; border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--panel); overflow: hidden; }
.demo-crop .demo-street { display: block; width: 100%; height: auto; }
.demo-crop .demo-ex { position: absolute; left: 10px; top: 10px; }
@media (width <= 980px) {
  .how .grid { grid-template-columns: minmax(0, 1fr); }
  .steps { padding-bottom: 0; }
  .demo-col { display: none; }
  .demo-step { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; display: grid; gap: 12px; max-width: 520px; margin-top: 18px; }
  .demo-step .demo-ph { max-width: 340px; font-size: 20px; }
}
@media (max-width: 560px) {
  .steps > li { padding-left: 54px; }
  .steps > li::before { width: 36px; height: 36px; }
  .demo-step { margin-left: -54px; }
}

/* ---------- the staff rule: the page's one inverted band ---------- */
.band { background: var(--navy); color: var(--on-ink); padding: clamp(56px, 7vw, 96px) 0; }
.band h2 { color: var(--on-ink); max-width: 24.5ch; }
.band p { margin-top: 16px; font-size: 1.2rem; max-width: 60ch; color: var(--on-ink-dim); }
.band p + p { margin-top: 10px; }

/* ---------- the network: five members, a dated timeline ---------- */
.parade { position: relative; margin-top: 56px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding-top: 20px; }
.parade .wire { grid-column: 1 / -1; grid-row: 2; align-self: center; height: 2px; background: var(--line); z-index: 1; }
.parade.linked .wire { background: var(--sys); }
.parade .unit { min-height: 210px; }
.parade .shop:nth-of-type(5) .unit { border-right: 1px solid var(--line); }
.parade .pave { grid-column: 1 / -1; grid-row: 2; height: 18px; background: var(--road); border-bottom: 2px solid var(--line); }
.shop { display: contents; }
.shop .unit { grid-row: 1; border-top: 3px solid var(--line); }
.shop .badge { grid-row: 3; }
.shop.ringing .unit { background: var(--alert-soft); border-top-color: var(--alert); }
.shop.ringing .fascia { background: var(--alert); color: var(--on-alert); border-color: var(--alert); }
.shop.ringing .fascia .icon { color: var(--on-alert); }
.shop.ringing .cam { background: var(--alert); }
.shop.ringing .win, .shop.ringing .door { border-color: var(--alert); }
.badge { display: block; margin: 12px 4px 0; padding: 6px 6px; text-align: center; border: 1px solid var(--line); border-radius: var(--r-chip); font: 700 .86rem/1.3 var(--text); color: var(--ink-3); visibility: hidden; }
.badge time { display: block; font-weight: 400; font-size: .78rem; }
.badge.show { visibility: visible; }
.badge.rep { color: var(--sys); border-color: var(--sys); }
.badge.hot { background: var(--alert); border-color: var(--alert); color: var(--on-alert); }
.badge.hot time { font-weight: 700; }
.replay-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 28px; }
.replay-row p { color: var(--ink-2); max-width: 62ch; }
.replay { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; background: transparent; color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-ctl); font: 600 .95rem/1 var(--text); cursor: pointer; }
.replay:hover { border-color: var(--sys); }
.replay .icon { width: 18px; height: 18px; color: var(--sys); }
.net-points { margin-top: 64px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.net-points div { padding-top: 18px; border-top: 2px solid var(--sys); }
.net-points div:last-child { border-top-color: var(--ok); }
.net-points h3, .net-points h2.sub { margin-bottom: 8px; }
.net-points p { color: var(--ink-2); font-size: .95rem; }
@media (width <= 980px) { .net-points { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .parade { grid-template-columns: minmax(0, 1fr) 9.5em; column-gap: 10px; row-gap: 10px; padding-top: 0; }
  .parade .wire, .parade .pave { display: none; }
  .shop .unit { grid-row: auto; grid-column: 1; min-height: 0; border: 1px solid var(--line); border-radius: 6px; }
  .parade .unit .fascia { flex-direction: row; justify-content: flex-start; min-height: 56px; border-bottom: 0; border-radius: 6px; }
  .parade .unit .front { display: none; }
  .shop .badge { grid-row: auto; grid-column: 2; align-self: center; margin: 0; }
}
@media (max-width: 560px) { .net-points { grid-template-columns: minmax(0, 1fr); } }

/* ---------- report rules ---------- */
.report .grid { margin-top: 56px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
.flow { list-style: none; counter-reset: flow; border-top: 1px solid var(--line); }
.flow li { display: grid; grid-template-columns: 46px minmax(0, 1fr); padding: 16px 0; border-bottom: 1px solid var(--line); counter-increment: flow; }
.flow li::before { content: counter(flow); grid-row: span 2; width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--sys); border-radius: var(--r-ctl); font: 700 .86rem/1 var(--text); color: var(--sys); }
.flow p { margin-top: 4px; color: var(--ink-2); }
.rules { padding: 26px 26px 24px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-panel); }
.rules .cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.rules h4 { margin: 20px 0 12px; font: 700 .86rem/1 var(--text); color: var(--ink-3); }
.rules ul { list-style: none; display: grid; gap: 12px; }
.rules li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; font-size: .95rem; color: var(--ink-2); }
.mark { width: 20px; height: 20px; margin-top: 2px; }
.mark.ok { color: var(--sys); }
.mark.no { color: var(--ink-3); }
.rulebar { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); font-size: .95rem; }
.rulebar + .rulebar { margin-top: 14px; color: var(--ink-2); }
@media (max-width: 860px) { .report .grid, .rules .cols { grid-template-columns: minmax(0, 1fr); } }

/* ---------- police case file: report slips tucked into one folder, then the handover to the police ---------- */
.case .grid { margin-top: 56px; display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.cf-col { min-width: 0; }
.cf .icon { width: 18px; height: 18px; color: var(--sys); }
/* the folder: a back flap on Second Paper with a tab, the reports tucked in, a white front that adds them up */
.cf-folder { position: relative; margin-top: 32px; background: var(--bg-2); border: 1px solid var(--edge); border-radius: 0 var(--r-panel) var(--r-panel) var(--r-panel); }
.cf-tab { position: absolute; left: -1px; bottom: calc(100% - 1px); display: flex; align-items: center; height: 33px; padding: 1px 16px 0; background: var(--bg-2); border: 1px solid var(--edge); border-bottom: 0; border-radius: 8px 8px 0 0; font: 700 .86rem/1 var(--text); color: var(--ink); }
.cf-slips { display: grid; padding: 18px 16px 0; }
.cf-slips .slip { margin-bottom: -36px; }
.cf-front { position: relative; margin: 0 -1px -1px; padding: 18px 22px; background: var(--panel); border: 1px solid var(--edge); border-radius: var(--r-panel); font: 400 .86rem/1.5 var(--mono); }
.cf-head { display: flex; justify-content: space-between; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 10px; color: var(--ink-2); }
.cf-head b { color: var(--ink); }
/* the yellow Example chip: the case file here, and the Your street timeline */
.ex { padding: 1px 6px; background: var(--sign); color: var(--on-sign); border-radius: var(--r-chip); font: 600 .78rem/1.5 var(--text); }
.cf-row { display: flex; justify-content: space-between; gap: 16px; padding: 3px 0; color: var(--ink-2); }
.cf-row span:last-child { color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; }
.cf-total { padding: 6px 0 2px; }
.cf-total span { color: var(--ink); font-weight: 700; font-size: 1.0625rem; }
.cf-front hr { border: 0; border-top: 1px dashed var(--line); margin: 10px 0; }
.cf-foot { margin-top: 12px; color: var(--ink-3); font-size: .78rem; }
/* the handover: the businesses decide, then the file goes to a police station drawn like the terrace units */
.cf-send { display: grid; grid-template-columns: minmax(0, 1fr) minmax(56px, 112px) 132px; align-items: end; margin-top: 28px; }
.cf-decide { display: grid; gap: 10px; padding-bottom: 6px; }
.cf-chips { display: flex; gap: 6px; }
.cf-chips .icon { box-sizing: content-box; width: 20px; height: 20px; padding: 8px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 4px; }
.cf-lbl { font: 700 .95rem/1.35 var(--text); color: var(--ink); max-width: 20ch; }
.cf-wire { position: relative; align-self: end; height: 2px; margin: 0 10px 34px; background: var(--sys); }
.cf-wire::after { content: ""; position: absolute; right: 0; top: -4px; width: 8px; height: 8px; border-top: 2px solid var(--sys); border-right: 2px solid var(--sys); transform: rotate(45deg); }
.cf-wire .icon { box-sizing: content-box; position: absolute; left: 50%; top: -14px; width: 20px; height: 20px; margin-left: -14px; padding: 3px; background: var(--bg); color: var(--ink-2); }
.cf-station { display: grid; grid-template-rows: auto 1fr; height: 132px; background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--sys); border-bottom: 0; }
.cf-station .fascia { display: flex; align-items: center; justify-content: center; gap: 6px; height: 40px; background: var(--bg-2); border-bottom: 1px solid var(--line); font: 700 .86rem/1 var(--text); color: var(--ink); }
.cf-station .front { display: grid; grid-template-columns: minmax(0, 1fr) 26px; gap: 10px; align-items: end; padding: 12px 12px 0; }
.cf-station .win { align-self: start; height: 44px; border: 1px solid var(--line); border-radius: 2px; }
.cf-station .door { height: 56px; border: 1px solid var(--line); border-bottom: 0; border-radius: 2px 2px 0 0; }
.cf-send::after { content: ""; grid-column: 2 / -1; height: 14px; background: var(--road); border-bottom: 2px solid var(--line); }
.cf-log { margin-top: 10px; text-align: right; font-size: .78rem; color: var(--ink-3); }
/* replay: a small round icon button under the file; its name is in aria-label and the tooltip.
   The ::before ring makes the touch target 44px. The arrow turns once when pressed. */
.cf-replay { position: relative; display: inline-grid; place-items: center; width: 36px; height: 36px; margin-top: 14px; padding: 0; background: transparent; border: 1px solid var(--line); border-radius: 50%; color: var(--ink-3); cursor: pointer; transition: color .2s, border-color .2s; }
.cf-replay::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; }
.cf-replay:hover { color: var(--sys); border-color: var(--sys); }
.cf-replay .icon { width: 16px; height: 16px; }
.cf-replay.turn .icon { animation: cf-turn .6s cubic-bezier(.2, .7, .2, 1); }
@keyframes cf-turn { to { transform: rotate(-360deg); } }
@media (prefers-reduced-motion: reduce) { .cf-replay.turn .icon { animation: none; } }
/* the play (main.js): parts with data-at wait for their step; until the last step the file is not yet sent */
.cf.armed [data-at] { visibility: hidden; }
.cf-unsent .cf-wire { background: var(--line); }
.cf-unsent .cf-wire::after { border-color: var(--line); }
.cf-unsent .cf-station { border-top-color: var(--line); }
@media print { .cf.armed [data-at] { visibility: visible !important; } }

/* a report slip: business, date, value, then item and evidence. Shared with the demo (shared/report-slip.md) */
.slip { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: 20px 18px; align-items: center; align-content: start; gap: 14px 12px; height: 72px; padding: 9px 14px 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; transform: translateX(var(--dx, 0)) rotate(var(--r, 0deg)); }
.slip .icon { width: 18px; height: 18px; flex: none; color: var(--sys); }
.slip .who { display: flex; align-items: center; gap: 8px; font: 700 .86rem/1.2 var(--text); color: var(--ink); white-space: nowrap; }
.slip time { font: 400 .78rem/1 var(--mono); color: var(--ink-3); }
.slip .amt { justify-self: end; font: 400 .86rem/1 var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.slip .what { grid-column: 1 / 3; font-size: .78rem; line-height: 1; color: var(--ink-2); }
.slip .has { display: flex; justify-self: end; align-items: center; gap: 5px; font-size: .78rem; line-height: 1; color: var(--ink-3); white-space: nowrap; }
.slip .has .icon { width: 14px; height: 14px; color: var(--ink-3); }
.slip .has .icon + .icon { margin-left: 6px; }
/* the same slip drawn inside an SVG (the How it works street, step 4), 320 x 72 units */
.slip-svg .slip-card { fill: var(--panel); stroke: var(--line); }
.slip-svg .slip-ico { color: var(--sys); }
.slip-svg .slip-who { font: 700 13.76px var(--text); fill: var(--ink); }
.slip-svg .slip-date { font: 400 12.48px var(--mono); fill: var(--ink-3); }
.slip-svg .slip-amt { font: 400 13.76px var(--mono); fill: var(--ink); text-anchor: end; }
.slip-svg .slip-what { font: 400 12.48px var(--text); fill: var(--ink-2); }
.slip-svg .slip-has { font: 400 12.48px var(--text); fill: var(--ink-3); text-anchor: end; }
.slip-svg .slip-has-ico { color: var(--ink-3); }

/* the four points, each with its own small drawing above its rule (drawings first in the markup, placed by the grid) */
.points { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; }
.points div { padding-top: 16px; border-top: 1px solid var(--line); }
.points p { margin-top: 8px; color: var(--ink-2); }
.points > div:nth-of-type(1), .points > div:nth-of-type(2) { margin-bottom: 40px; }
.points > svg:nth-of-type(1) { grid-area: 1 / 1; } .points > svg:nth-of-type(2) { grid-area: 1 / 2; }
.points > div:nth-of-type(1) { grid-area: 2 / 1; } .points > div:nth-of-type(2) { grid-area: 2 / 2; }
.points > svg:nth-of-type(3) { grid-area: 3 / 1; } .points > svg:nth-of-type(4) { grid-area: 3 / 2; }
.points > div:nth-of-type(3) { grid-area: 4 / 1; } .points > div:nth-of-type(4) { grid-area: 4 / 2; }
.pa { display: block; width: 100%; max-width: 300px; height: auto; margin-bottom: 18px; overflow: visible; }
.pa text { font: 700 11px var(--text); fill: var(--ink); }
.pa .pa-back { fill: var(--bg-2); stroke: var(--edge); }
.pa .pa-tabs path { fill: var(--bg-2); stroke: var(--edge); }
.pa .pa-tabs text { font: 400 10.5px var(--mono); text-anchor: middle; }
.pa .pa-card { fill: var(--panel); stroke: var(--edge); }
.pa .pa-ico, .pa .pa-chip use, .pa .st-ico, .pa .pa-who-i { color: var(--sys); }
.pa .pa-rail, .pa .pa-link { stroke: var(--sys); stroke-width: 2; }
.pa .pa-dots circle, .pa .pa-who { fill: var(--panel); stroke: var(--sys); stroke-width: 2; }
.pa .pa-cap { font: 400 11px var(--mono); fill: var(--ink-2); text-anchor: middle; }
.pa .pa-chip rect, .pa .st-fascia { fill: var(--bg-2); stroke: var(--line); }
.pa .pa-merge, .pa .pa-arrow { fill: none; stroke: var(--edge); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pa .pa-btn { fill: var(--solid); }
.pa .pa-btn-t { fill: var(--on-solid); text-anchor: middle; font-size: 12px; }
.pa .st-body { fill: var(--panel); stroke: var(--line); }
.pa .st-win, .pa .st-door { fill: none; stroke: var(--line); }
.pa .st-ground { stroke: var(--line); stroke-width: 2; }
.pa .pa-folder { fill: var(--panel); stroke: var(--edge); }
.pa .pa-big { font: 700 15px var(--mono); text-anchor: middle; }
.pa .pa-small { font: 400 11px var(--text); fill: var(--ink-3); text-anchor: middle; }
.pa .pa-tear { stroke: var(--edge); stroke-dasharray: 4 4; }
.pa .pa-scales { color: var(--ink-2); }
.pa .pa-cap2 { font: 700 12px var(--text); fill: var(--ink-2); text-anchor: middle; }
@media (max-width: 860px) {
  .case .grid, .points { grid-template-columns: minmax(0, 1fr); }
  .points > svg:nth-of-type(n), .points > div:nth-of-type(n) { grid-area: auto; }
  .points > svg:nth-of-type(1) { grid-row: 1; } .points > div:nth-of-type(1) { grid-row: 2; }
  .points > svg:nth-of-type(2) { grid-row: 3; } .points > div:nth-of-type(2) { grid-row: 4; }
  .points > svg:nth-of-type(3) { grid-row: 5; } .points > div:nth-of-type(3) { grid-row: 6; }
  .points > svg:nth-of-type(4) { grid-row: 7; } .points > div:nth-of-type(4) { grid-row: 8; }
  .points > div:nth-of-type(3) { margin-bottom: 40px; }
}
@media (max-width: 420px) {
  .cf-front { padding: 16px; }
  .cf-slips { padding-inline: 12px; }
  .slip { padding: 9px 12px 10px; column-gap: 10px; }
  .slip .has .icon { display: none; }
  .cf-send { grid-template-columns: minmax(0, 1fr) 64px 110px; }
  .cf-wire { margin-inline: 8px; }
  .cf-lbl { font-size: .86rem; max-width: 15ch; }
}

/* ---------- the law ---------- */
.basis { margin: 48px 0 0; border-top: 1px solid var(--line); }
.basis > div { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 32px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.basis dt { font: 700 1.0625rem/1.4 var(--text); }
.basis dd { margin: 0; }
.basis dd p { color: var(--ink-2); max-width: 66ch; }
/* The legal citation under each row: a quiet footnote, one step smaller than the readout, in the Mono's true italic. */
/* the Citation Rule: the law table and the before-launch steps share one citation style */
.basis .cite, .phases .cite { margin-top: 10px; max-width: 96ch; font: italic 400 .78rem/1.6 var(--mono); color: var(--ink-3); }
.phases .cite { margin-top: 6px; }
.groups { margin-top: 56px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.group h3, .group h2.sub { padding-top: 14px; border-top: 2px solid var(--sys); margin-bottom: 14px; }
.group ul { list-style: none; display: grid; gap: 14px; }
.group li { color: var(--ink-2); font-size: .95rem; }
/* Before launch: a sticky head (title, count, one bar cell per step) and the steps in four phases.
   A plain list, not checkboxes: a blue tick for done, the step number in a ring for to do. */
.before { margin-top: 72px; display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; scroll-margin-top: 24px; }
.before-head { position: sticky; top: 88px; display: grid; gap: 10px; }
.before-head h3, .before-head h2.sub { font: 700 1.35rem/1.25 var(--text); color: var(--ink); }
.before-head .count { margin-top: 4px; font: 400 .95rem/1 var(--mono); color: var(--sys); }
.before .bar { display: flex; gap: 8px; }
.before .bar > span { flex: var(--n) 1 0; display: flex; gap: 3px; }
.before .bar > span > span { flex: 1 1 0; height: 6px; border-radius: 2px; background: color-mix(in oklch, var(--edge) 35%, var(--line)); }
.before .bar .on { background: var(--sys); }
.phase-index { list-style: none; margin-top: 12px; border-top: 1px solid var(--line); }
.phase-index a { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: .95rem; text-decoration: none; }
.phase-index a:hover { color: var(--ink); }
.phase-index a:hover span:first-child { text-decoration: underline; text-underline-offset: 3px; }
.phase-index .n { flex: none; font: 400 .78rem/1 var(--mono); color: var(--ink-3); }
.phases, .phases ol { list-style: none; }
.phases { display: grid; gap: 44px; }
.phase-name { scroll-margin-top: 24px; padding-top: 14px; border-top: 2px solid var(--sys); margin-bottom: 20px; font: 700 1.0625rem/1.4 var(--text); color: var(--ink); }
.phases ol > li { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 16px; padding-bottom: 24px; }
.phases ol > li:last-child { padding-bottom: 0; }
.phases ol > li:not(:last-child)::after { content: ""; position: absolute; left: 13.5px; top: 36px; bottom: 8px; width: 1px; background: var(--line); }
.phases .mark { display: grid; place-items: center; width: 28px; height: 28px; border: 1.5px solid var(--edge); border-radius: 50%; font: 400 .78rem/1 var(--mono); color: var(--ink-2); }
.phases .done .mark { border: 0; color: var(--sys); }
.phases .done .mark .icon { width: 28px; height: 28px; }
.phases .t { padding-top: 2px; font-weight: 700; line-height: 1.4; color: var(--ink); max-width: 60ch; }
.phases .d { margin-top: 4px; font-size: .95rem; color: var(--ink-2); max-width: 64ch; }
.not { margin-top: 48px; padding: 20px 22px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-panel); color: var(--ink-2); max-width: 86ch; }
@media (max-width: 1080px) { .groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .basis > div { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .before { grid-template-columns: minmax(0, 1fr); }
  .before-head { position: static; }
  .phase-index { display: none; }
}
@media (max-width: 560px) { .groups { grid-template-columns: minmax(0, 1fr); } }

/* ---------- the public: the door sign and your rights ---------- */
.public .grid { margin-top: 56px; display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
/* The sign: a plate with four screws, the title over a navy rule, the first-layer text, then the QR code
   (on its own white ground, with a quiet zone) beside the wolf mark. */
.sign-wrap { max-width: 440px; }
.sign {
  position: relative; padding: 26px 26px 20px; color: var(--on-sign); border-radius: var(--r-panel);
  background:
    radial-gradient(circle at 12px 12px, var(--sign-screw) 3px, transparent 3.6px),
    radial-gradient(circle at calc(100% - 12px) 12px, var(--sign-screw) 3px, transparent 3.6px),
    radial-gradient(circle at 12px calc(100% - 12px), var(--sign-screw) 3px, transparent 3.6px),
    radial-gradient(circle at calc(100% - 12px) calc(100% - 12px), var(--sign-screw) 3px, transparent 3.6px),
    var(--sign);
}
.sign .top { display: flex; align-items: center; gap: 14px; padding-bottom: 14px; border-bottom: 2px solid var(--on-sign); }
.sign .top .icon { flex: none; width: 40px; height: 40px; }
.sign .top b { color: var(--on-sign); font: 700 1.35rem/1.15 var(--text); letter-spacing: -0.01em; text-wrap: balance; }
.sign .body p { margin-top: 14px; font-size: 1.0625rem; line-height: 1.45; color: var(--on-sign); }
.sign .body .who { font-weight: 700; }
.sign .body .more { font-size: .95rem; }
.sign .body i { font-style: italic; }
.sign-foot { margin-top: 20px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.sign .qr { display: block; flex: none; color: var(--on-sign); border-radius: var(--r-chip); }
.sign .qr-ground { fill: var(--qr-ground); }
.sign-mark { display: flex; align-items: center; gap: 8px; font: 700 1.2rem/1 var(--text); color: var(--on-sign); }
.sign-mark img { display: block; width: 39px; height: 44px; }
.sign-ex { margin-top: 16px; display: flex; font: 600 .78rem/1.45 var(--text); color: var(--on-sign); }
.sign-ex b { padding: 1px 6px; border: 1.5px solid var(--on-sign); border-radius: var(--r-chip); font-weight: 700; color: var(--on-sign); }
.rights { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 36px; }
.rights li { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 14px; align-content: start; }
.rights .icon { grid-row: span 2; color: var(--sys); width: 26px; height: 26px; }
.rights p { margin-top: 6px; color: var(--ink-2); }
@media (max-width: 860px) { .public .grid, .rights { grid-template-columns: minmax(0, 1fr); } }

/* ---------- FAQ: the heading holds while the questions scroll ---------- */
.faq .wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.faq-head { position: sticky; top: 88px; }
.faq .list { border-bottom: 1px solid var(--line); }
.faq details { border-top: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 0; cursor: pointer; list-style: none; font-weight: 700; font-size: 1.0625rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { color: var(--sys); transition: transform .2s ease-out; }
.faq details[open] summary .icon { transform: rotate(45deg); }
.faq details > div { padding: 0 0 22px; display: grid; gap: 12px; }
.faq details p { color: var(--ink-2); max-width: 70ch; }
@media (max-width: 860px) { .faq .wrap { grid-template-columns: minmax(0, 1fr); } .faq-head { position: static; } }

/* ---------- join ---------- */
.join .grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: clamp(36px, 6vw, 80px); align-items: start; }
.join .lead { margin-top: 18px; }
.offer { margin-top: 36px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
.offer ul { list-style: none; margin-top: 12px; display: grid; gap: 10px; }
.offer li { position: relative; padding-left: 22px; color: var(--ink-2); font-size: .95rem; }
.offer li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 8px; border-radius: 2px; background: var(--sys); }
.offer-note { margin-top: 28px; color: var(--ink-2); max-width: 60ch; }
.form { padding: 28px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.form h3 { font: 700 1.35rem/1.25 var(--text); }
.form > .help { margin-top: 8px; font-size: .95rem; color: var(--ink-3); }
.field { margin-top: 18px; }
.field label { display: block; margin-bottom: 6px; font-weight: 700; font-size: .95rem; }
.field .opt { font-weight: 400; color: var(--ink-3); }
.field input, .field textarea { width: 100%; min-height: 48px; padding: 12px 14px; background: var(--screen); color: var(--ink); border: 1px solid var(--edge); border-radius: var(--r-ctl); font: inherit; font-size: 1.0625rem; caret-color: var(--sys); }
.field textarea { min-height: 96px; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--sys); }
.field .help { display: block; margin-top: 6px; font-size: .86rem; color: var(--ink-3); }
.field .err { display: none; margin-top: 6px; font-size: .86rem; color: var(--alert); }
.field.bad .err { display: block; }
.field.bad input { border-color: var(--alert); }
.row2 { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 14px; align-items: start; }
.consent { margin: 20px 0 18px; font-size: .86rem; color: var(--ink-3); }
/* The trap field for bots: off screen, out of the tab order, hidden from screen readers. */
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form .btn { width: 100%; }
.nocommit { margin-top: 10px; text-align: center; font-size: .86rem; color: var(--ink-2); }
.form-status { margin-top: 12px; font-size: .95rem; }
.form-status.ok { color: var(--ok); }
.form-status.fail { color: var(--alert); }
@media (width <= 980px) { .join .grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .offer, .row2 { grid-template-columns: minmax(0, 1fr); } .form { padding: 22px 18px; } }

/* ---------- inner pages: the page title, and what comes next ---------- */
h1.page-title { margin: 0; font: 600 clamp(2.1rem, 4.75vw, 3.2rem)/1.08 var(--display); letter-spacing: -0.015em; max-width: 23.5ch; }
.next { padding: 40px 0; border-top: 1px solid var(--line); }
.next-grid { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; }
.next-link { font-size: 1.2rem; color: var(--ink-2); }
.next-link a { font-weight: 700; }
.next-join { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }

/* ---------- home: one link to each page ---------- */
.page-links { list-style: none; margin-top: 48px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.page-links a { display: grid; align-content: start; gap: 8px; height: 100%; padding: 18px 0 0; border-top: 2px solid var(--sys); color: var(--ink-2); text-decoration: none; }
.page-links b { display: inline-flex; align-items: center; gap: 8px; font-size: 1.2rem; color: var(--ink); }
.page-links b .icon { width: 18px; height: 18px; color: var(--sys); }
.page-links a:hover b { color: var(--sys); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1080px) { .page-links { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .page-links { grid-template-columns: minmax(0, 1fr); } }

/* ---------- footer: navy, the brand, the page links, the pre-launch notes ---------- */
.foot { background: var(--navy); color: var(--on-ink-dim); padding: 64px 0 40px; }
.foot a { color: var(--on-ink); text-decoration: none; }
.foot a:hover { text-decoration: underline; text-underline-offset: 3px; }
.foot :focus-visible { outline-color: var(--on-ink); }
.foot-top { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--navy-line); }
.foot-brand { display: grid; gap: 16px; justify-items: start; align-content: start; }
.foot-brand .brand { color: var(--on-ink); }
.foot-brand .brand img { height: 45px; }
.foot-brand .brand span { font-size: 1.35rem; }
.foot-brand p { max-width: 34ch; }
.btn.light { background: var(--on-ink); color: var(--wolf); }
.btn.light:hover { background: var(--light-hi); color: var(--wolf); }
.foot-col h2 { font: 700 .86rem/1 var(--text); color: var(--on-ink-3); margin-bottom: 14px; }
.foot-col ul { list-style: none; display: grid; gap: 10px; }
.foot-link { padding: 0; background: none; border: 0; color: var(--on-ink); font: inherit; cursor: pointer; }
.foot-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.foot-base { display: grid; gap: 8px; padding-top: 24px; font-size: .86rem; color: var(--on-ink-3); }
@media (max-width: 860px) { .foot-top { grid-template-columns: repeat(3, minmax(0, 1fr)); } .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .foot-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* ---------- the analytics choice: a box at the bottom left, gone in one click ---------- */
.ana-box { position: fixed; left: 16px; bottom: 16px; z-index: 60; width: min(380px, calc(100vw - 32px)); padding: 18px 18px 16px; background: var(--panel); border: 1px solid var(--edge); border-radius: var(--r-panel); color: var(--ink-2); font-size: .95rem; line-height: 1.5; }
.ana-box[hidden] { display: none; }
.ana-box.in { animation: anain .24s ease-out both; }
@keyframes anain { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.ana-title { margin-bottom: 6px; padding-right: 32px; font: 700 1.0625rem/1.3 var(--text); color: var(--ink); }
.ana-x { position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; background: none; border: 0; border-radius: var(--r-ctl); color: var(--ink-2); cursor: pointer; }
.ana-x:hover { background: var(--bg-2); color: var(--ink); }
.ana-x .icon { width: 18px; height: 18px; }
.ana-btns { display: flex; gap: 10px; margin-top: 14px; }
.ana-more { margin-top: 6px; font-size: .86rem; }
.ana-more summary { cursor: pointer; color: var(--sys); font-weight: 700; }
.ana-more p { margin-top: 4px; }
.btn.sm { min-height: 40px; padding: 0 16px; font-size: .86rem; }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--edge); }
.btn.ghost:hover { background: var(--bg-2); color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* The waitlist privacy notice (/privacy/): the law table, with more than one paragraph in a row. */
.privacy .basis dd p + p:not(.cite) { margin-top: 10px; }

/* Home cinema: fixed dark theme; inner pages keep the daylight and dark-device themes above. */
.cinema-home {
  color-scheme: dark;
  --edge-x: max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut)));
  --bg: #07090d;
  --bg-2: #07090d;
  --panel: #0c1016;
  --road: #151b25;
  --line: #1c232e;
  --edge: #5e6b7f;
  --screen: #0d1118;
  --ink: #f1f0eb;
  --ink-2: #b4bdca;
  --ink-3: #8c95a3;
  --sys: #a8bfe3;
  --on-sys: #07090d;
  --alert: #ff756b;
  --alert-soft: #321b20;
  --ok: #8ed8b2;
  --navy: #05070b;
  --navy-line: #252c38;
  --solid: #f1f0eb;
  --solid-hi: #d9dde3;
  --on-solid: #07090d;
  background: var(--bg);
}
.cinema-home [data-theme-toggle], .cinema-home .nav-theme { display: none; }

.page-waves { position: fixed; left: 0; top: 0; z-index: -1; display: block; width: 100%; height: 100vh; height: 100lvh; pointer-events: none; }

/* The name, as wide as the page, at the very bottom. It rises into place as the footer comes in. */
.wordmark { position: relative; display: block; container-type: inline-size; margin: calc(clamp(48px, 7vw, 96px) + 4vw) var(--gut) 0; pointer-events: none; user-select: none; }
.wordmark.has-canvas span { visibility: hidden; }
.wordmark-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.wordmark span {
  display: block; color: #1c2431; font-family: var(--display); font-weight: 400; line-height: .78; letter-spacing: -.004em;
  font-size: calc(100cqw / var(--wordmark-em, 4.4)); text-align: center; white-space: nowrap;
  transform: scaleY(1.22); transform-origin: 50% 100%;
}
.foot:has(.wordmark) { padding-bottom: 0; overflow: clip; }
.foot-link { text-align: left; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .wordmark:not(.has-canvas) span { animation: wordmark-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
    .wordmark-canvas { animation: wordmark-canvas-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
  }
}
@keyframes wordmark-canvas-rise { from { transform: translate3d(0, 28%, 0); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes wordmark-rise { from { transform: translate3d(0, 34%, 0) scaleY(1.22); } to { transform: translate3d(0, 0, 0) scaleY(1.22); } }

/* One ground from top to bottom: no bands and no rules between sections, so the page reads as one long scene. */
.cinema-home .section { padding: clamp(96px, 13vw, 176px) 0; background: none; border: 0; }
.cinema-home .section h2 { max-width: 26ch; font: 400 clamp(2.4rem, 5.75vw, 4.2rem)/1.12 var(--display); letter-spacing: .005em; }
.cinema-home .section h2 span { display: block; color: var(--ink-3); }
.cinema-home .sec-head { display: block; }
.cinema-home .sec-head .lead { margin-top: 22px; max-width: 52ch; }
.cinema-home .foot { background: none; border-top: 1px solid var(--line); }

/* The nav floats over the scene and fades into it. */
/* Solid behind the logo and the button, so nothing that scrolls under the bar shows through them; only its last edge fades. */
.cinema-home .nav { position: fixed; inset: 0 0 auto; background: linear-gradient(180deg, #07090d 0%, #07090d 84%, #07090d00 100%); border: 0; }
.cinema-home .nav .brand-mark { color: var(--ink); }
.cinema-home .nav-line { display: none; }

.cinema-home .btn { min-height: 52px; padding: 0 28px; border-radius: 8px; transition: background-color .16s ease-out, transform .12s ease-out; }
.cinema-home .btn:hover { transform: translateY(-1px); }
.cinema-home .btn:active { transform: translateY(0) scale(.985); }
.cinema-home .nav .btn { min-height: 38px; padding: 0 16px; font-size: .78rem; }
.link-quiet { text-underline-offset: 4px; }

/* ---------- the scene: hero and story, without a cut ---------- */
.cine { position: relative; padding: 0; overflow: clip; }
.cine-stage { position: relative; }
.cine-lights { display: none; }
.cine-hero {
  position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: clamp(12px, 2svh, 22px);
  min-height: 100vh; min-height: 100svh; padding: 74px 4vw 26px; text-align: center;
}
.cine h1 {
  display: flex; flex-direction: column; align-items: center; gap: 0;
  max-width: none; margin: 0; font: 400 min(6.4vw, 9.6svh)/1.08 var(--display); letter-spacing: .008em; white-space: nowrap;
}
.cine-a, .cine-b { position: relative; z-index: 2; display: inline-block; }
.cine-slot { position: relative; flex: 1 1 0; display: block; width: min(30vw, 420px); min-height: 200px; }
.cine-frame { position: absolute; inset: 0; z-index: 1; display: block; }
.face-visual { position: absolute; left: 50%; top: 50%; display: block; width: auto; height: 118%; aspect-ratio: 1; transform: translate(-50%, -50%); }
.face-still, .face-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.face-canvas { display: none; }
.face-scan { display: none; }
.cine-foot { position: relative; z-index: 2; display: grid; justify-items: center; gap: 16px; }
.cine-lead { max-width: 54ch; color: var(--ink-2); font-size: 1.125rem; line-height: 1.5; }

/* Reading order with no script or with reduced motion: the steps come one after another, each with its picture. */
.cine-rail { padding: 40px 6vw 0; color: var(--ink-2); font-size: .95rem; }
.cine-rail p { color: var(--ink); font-weight: 700; }
.cine-rail span { display: block; margin-top: 4px; color: var(--ink-3); font-size: .875rem; }
.face-progress { display: none; }
.face-steps { display: grid; }
.face-step { display: grid; align-content: center; gap: 22px; padding: 72px 6vw; }
.face-step-copy { display: grid; gap: 16px; max-width: 620px; }
.face-step h2 { margin: 0; max-width: none; font: 400 clamp(2.4rem, 4.625vw, 3.6rem)/1.12 var(--display); letter-spacing: .005em; }
.face-step h2 span { display: block; color: var(--ink); }
.face-step[data-face-step="delete"] h2 span { color: var(--ok); }
.face-step-copy > p:last-child { max-width: 44ch; color: var(--ink-2); font-size: 1.125rem; line-height: 1.5; }
.face-mobile { display: block; width: min(100%, 320px); height: auto; opacity: .9; }

/* Pinned, with motion allowed. Every value that moves is set from the scroll in home-scroll.js. */
.cine.is-live { height: 480vh; height: 480svh; }
.is-live .cine-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip; contain: layout paint; }
.is-live .cine-lights { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.is-live .cine-hero { position: absolute; inset: 0; min-height: 0; }
.is-live .cine-slot { position: static; }
.is-live .cine-frame { overflow: hidden; }
.is-live .face-scan { position: absolute; left: 10%; right: 10%; top: 50%; z-index: 2; display: block; height: 1px; background: linear-gradient(90deg, transparent, var(--sys) 28%, var(--sys) 72%, transparent); opacity: 0; will-change: transform, opacity; }
.is-live .face-visual { width: min(92svh, 62vw); height: auto; will-change: transform; }
.is-live .cine-a, .is-live .cine-b, .is-live .cine-foot { will-change: transform, opacity; }
.is-live .face-canvas { display: block; visibility: hidden; }
.is-live .has-frames .face-canvas { visibility: visible; }
.is-live .has-frames .face-still { visibility: hidden; }
/* The words stand on the stepper: the column ends at the same place whichever step is showing, so the stepper never moves. */
.is-live .cine-rail { position: absolute; left: var(--edge-x); top: 60svh; z-index: 4; width: min(44vw, 580px); padding: 0; opacity: 0; pointer-events: none; }
.is-live .cine-rail p { margin-top: 10px; color: var(--ink-2); font-size: .72rem; font-weight: 400; }
.is-live .cine-rail span { margin-top: 2px; color: var(--ink-3); font-size: .72rem; }
.is-live .face-progress { display: grid; grid-template-columns: 1fr 1fr 1fr 1.35fr; gap: 8px; margin: 0; padding: 0; list-style: none; color: var(--ink-3); font-size: .8rem; }
.is-live .face-progress li { transition: color .25s ease-out; }
.is-live .face-progress a { position: relative; display: block; padding: 14px 0 8px; color: inherit; text-decoration: none; white-space: nowrap; pointer-events: auto; }
.is-live .face-progress a:hover { color: var(--ink); }
.is-live .face-progress a::before, .is-live .face-progress i { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: 2px; }
.is-live .face-progress a::before { background: #232b38; }
.is-live .face-progress i { display: block; background: var(--steel); transform: scaleX(0); transform-origin: left; will-change: transform; }
.is-live[data-active-step="check"] [data-progress="check"],
.is-live[data-active-step="delete"] [data-progress="delete"],
.is-live[data-active-step="confirm"] [data-progress="confirm"],
.is-live[data-active-step="alert"] [data-progress="alert"] { color: var(--ink); }
.is-live .face-steps { position: absolute; inset: 0; z-index: 3; display: block; pointer-events: none; }
.is-live .face-step { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 18px; padding: 80px var(--edge-x) calc(40svh + 24px); opacity: 0; will-change: opacity, transform; }
.is-live .face-step-copy { width: min(44vw, 580px); }
.is-live .face-mobile { display: none; }

/* Two reports meeting, and what lands in the hand. */
.report-merge { display: none; }
.is-live .report-merge { position: absolute; left: 74%; bottom: 10%; display: block; width: 360px; height: 46px; margin-left: -180px; }
.rm { position: absolute; left: 50%; top: 0; padding: 9px 14px; background: var(--panel); border: 1px solid #2a3340; border-radius: 8px; color: var(--ink-2); font-size: .875rem; line-height: 1.25; white-space: nowrap; transform: translate(-50%, 0); will-change: transform, opacity; }
.rm-sum { color: var(--sys); border-color: #46597a; opacity: 0; }
.alert-demo { display: grid; gap: 8px; max-width: 340px; padding: 16px 18px; background: #0c1016f5; border: 1px solid #4a2a30; border-radius: 14px; box-shadow: 0 18px 50px #00000090; }
.alert-demo-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--alert); font-weight: 700; }
.alert-demo > p:last-child { color: var(--ink-2); font-size: .95rem; line-height: 1.4; }
.is-live .alert-demo { position: absolute; left: 74%; bottom: 8%; width: 400px; max-width: none; margin-left: -200px; }

@media (max-width: 899px) {
  .cine-hero { gap: 18px; padding: 76px 20px 24px; }
  .cine h1 { flex-direction: column; align-items: center; font-size: min(9.875vw, 7.4svh); line-height: 1.12; }
  .cine-slot { width: min(62vw, 300px); min-height: 170px; }
  .cine-lead { font-size: 1rem; }
  .cine-foot { gap: 12px; width: 100%; }
  .is-live .face-visual { width: min(112vw, 62svh); }
  .is-live .cine-rail { left: 20px; right: 20px; top: auto; bottom: 14px; width: auto; }
  .is-live .cine-rail p { margin-top: 4px; font-size: .64rem; }
  .is-live .cine-rail span { margin-top: 0; font-size: .64rem; }
  .is-live .face-progress { grid-template-columns: .85fr 1fr 1fr 1.45fr; gap: 6px; font-size: .68rem; }
  .is-live .face-progress a { padding: 12px 0 8px; }
  .is-live .face-step {
    justify-content: flex-end; align-items: stretch; gap: 12px; padding: 0 20px 110px;
    background: linear-gradient(180deg, #07090d00 58%, #07090df2 70%);
  }
  .is-live .face-step-copy { width: auto; gap: 10px; }
  .is-live .face-step h2 { font-size: clamp(2.1rem, 12vw, 3.4rem); }
  .is-live .report-merge { position: relative; left: auto; bottom: auto; order: -1; flex: none; width: 100%; height: 40px; margin: 0; }
  .is-live .alert-demo { position: relative; left: auto; bottom: auto; order: -1; flex: none; width: 100%; margin: 0; padding: 12px 14px; }
  .is-live .alert-demo > p:last-child { font-size: .8rem; }
  .is-live .face-step-copy > p:last-child { font-size: 1rem; }
}
@media (max-width: 899px) and (max-height: 700px) {
  /* The whole hero fits on a short phone, price included, and the head stays below the tabs. */
  .cine-hero { gap: 10px; padding: 66px 20px 12px; }
  .cine h1 { font-size: min(9.5vw, 6.4svh); }
  .cine-slot { min-height: 120px; }
  .cine-foot { gap: 8px; }
  .cine-lead { font-size: .76rem; line-height: 1.4; }
  .is-live .face-visual { width: min(96vw, 50svh); }
  .is-live .face-step h2 { font-size: clamp(1.7rem, 10vw, 2.4rem); }
  .is-live .face-step-copy { gap: 6px; }
  .is-live .face-step-copy > p:last-child { font-size: .8rem; line-height: 1.4; }
  .is-live .cine-rail p { display: none; }
  .is-live .face-step { padding-bottom: 84px; }
  .is-live .alert-demo > p:last-child { display: none; }
}
@media (min-width: 900px) and (max-height: 720px) {
  .cine-hero { gap: 12px; padding-top: 68px; }
  .cine-lead { font-size: 1rem; }
  .is-live .face-step { padding-top: 72px; }
  .is-live .face-step h2 { font-size: clamp(2.2rem, 4.25vw, 3.2rem); }
}

/* ---------- the crime figures ---------- */
.cinema-home .facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 5vw, 72px); margin-top: clamp(48px, 6vw, 80px); border: 0; list-style: none; }
.cinema-home .facts li { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 14px; padding: 32px 0 40px; border: 0; border-top: 1px solid var(--line); }
.cinema-home .facts .fig { font: 400 clamp(2.8rem, 7.5vw, 5.4rem)/1.05 var(--display); font-variant-numeric: tabular-nums; letter-spacing: .005em; white-space: nowrap; }
.cinema-home .facts .says { color: var(--ink-2); max-width: 40ch; }
.cinema-home .facts .src { margin-top: 6px; color: var(--ink-3); }

/* ---------- who can join, over the moving lines ---------- */
/* Crime-scene tape: two strips crossing above the figures, at two depths. On scroll, the near strip rises fastest, then the far
   strip, then the headline, over the figures, with the waves fixed behind all of it. The browser runs it off the main thread. */
.cinema-home #problem { position: relative; overflow: clip; padding-top: clamp(190px, 17vw, 250px); view-timeline: --problem block; }
.cinema-home #problem .wrap { position: relative; z-index: 1; }
.tapes { position: absolute; left: 0; right: 0; top: 0; height: clamp(190px, 17vw, 250px); z-index: 0; pointer-events: none; }
.tape {
  position: absolute; left: -15%; top: 42%; display: flex; align-items: center; width: 130%; height: 2.1rem; overflow: hidden; white-space: nowrap;
  background: #e5b51f linear-gradient(90deg, #ffffff14, transparent 18%, #00000018 43%, transparent 66%, #ffffff10) 0 0 / 540px 100%;
  color: #0b0b0b; font: 400 .95rem/1 var(--display); letter-spacing: .09em;
  box-shadow: 0 14px 34px #000000a0, inset 0 1px 0 #fff2b380, inset 0 -1px 0 #6e510066;
}
.tape span { flex: none; padding: 0 1.3em; }
/* The far layer: the share of thefts reported, as a hairline figure behind the words. */
.depth-figure {
  position: absolute; right: -1vw; top: 30%; z-index: 0; font: 400 30vw/.8 var(--display); letter-spacing: -.01em;
  color: transparent; -webkit-text-stroke: 1px #223049; pointer-events: none; user-select: none;
}
@supports not (-webkit-text-stroke: 1px black) { .depth-figure { color: #0e131c; } }
.tape span:nth-child(even)::after { content: ""; display: inline-block; width: .5em; height: .5em; margin-left: 2.6em; background: #0b0b0b; transform: rotate(45deg) translateY(-.08em); }
.tape-a { transform: rotate(-3.5deg); }
.tape-b { transform: translateY(18px) rotate(2.6deg); background-color: #a17c13; color: #050505; box-shadow: 0 10px 26px #00000090; }
.cinema-home .street { position: relative; overflow: clip; padding: clamp(130px, 17vw, 240px) 0; }
.paths-banner {
  position: absolute; inset: 0; overflow: hidden; color: #9db4d6; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 44% 58% at 50% 50%, #00000040, #000), linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent);
  mask-image: radial-gradient(ellipse 44% 58% at 50% 50%, #00000040, #000), linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.paths-inner { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.paths-inner svg { display: block; }
.paths-light {
  position: absolute; left: 0; top: 0; display: block; width: 46px; height: 1.5px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, #dbe8ff); offset-rotate: auto; opacity: 0; will-change: transform, opacity;
  animation: path-run 16s linear infinite;
}
.paths-banner.is-paused .paths-light { animation-play-state: paused; }
@keyframes path-run { 0% { offset-distance: 0%; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
.street-head { position: relative; display: grid; justify-items: center; gap: clamp(36px, 5vw, 56px); text-align: center; }
.trade-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 760px; list-style: none; }
.trade-list li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px 9px 10px; background: var(--panel); border: 0; border-radius: 8px; color: var(--ink); font-size: .95rem; }
.trade-list .icon { width: 18px; height: 18px; color: var(--sys); }

/* ---------- compliance: four steps on one line that fills as it comes into view ---------- */
.compliance-steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: clamp(48px, 6vw, 72px); padding-top: 28px; list-style: none; }
.compliance-steps::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line); }
.compliance-steps b { display: block; margin-bottom: 8px; color: var(--ink); font-size: 1.125rem; }
.compliance-steps p { color: var(--ink-2); font-size: .95rem; line-height: 1.5; }
.risk-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: clamp(40px, 5vw, 64px); }
.risk-split > div { padding: 24px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; }
.risk-split h3 { margin: 0 0 8px; font: 700 1.0625rem/1.3 var(--text); }
.risk-split p { color: var(--ink-2); font-size: .95rem; }
.compliance-link { margin-top: 28px; }

/* ---------- questions ---------- */
.cinema-home .faq-head { position: static; }
.cinema-home .faq .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 64px); }
.cinema-home .faq .list { border: 0; }
.cinema-home .faq details { border: 0; border-top: 1px solid var(--line); }
.cinema-home .faq summary { padding: 22px 0; transition: color .16s ease-out; }
.cinema-home .faq summary:hover { color: var(--sys); }
.cinema-home .faq summary .icon { transition: transform .28s cubic-bezier(.2, .8, .2, 1); }
.cinema-home .faq details > div { padding-bottom: 24px; }
.cinema-home .faq-more { margin-top: 24px; }
@supports (interpolate-size: allow-keywords) {
  .cinema-home .faq details { interpolate-size: allow-keywords; }
  .cinema-home .faq details::details-content { block-size: 0; overflow: clip; transition: block-size .32s cubic-bezier(.2, .8, .2, 1), content-visibility .32s allow-discrete; }
  .cinema-home .faq details[open]::details-content { block-size: auto; }
}

/* ---------- the offer and the form ---------- */
.cinema-home .join .grid { align-items: start; }
.cinema-home .join h2 { max-width: none; font-size: clamp(3.6rem, 10vw, 7rem); line-height: 1.02; letter-spacing: .005em; }
.cinema-home .join h2 .price { display: block; color: var(--ink); }
.cinema-home .join h2 .price-period { display: block; margin-top: 14px; color: var(--ink-2); font-family: var(--text); font-weight: 400; font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.3; letter-spacing: 0; }
.cinema-home .join .lead { margin-top: 12px; color: var(--ink-3); font-size: 1.0625rem; }
.offer-lead { margin-top: 32px; color: var(--ink-3); font-size: .95rem; }
.offer-list { display: grid; gap: 12px; margin-top: 12px; list-style: none; }
.offer-list li { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 12px; align-items: baseline; color: var(--ink); font-size: 1rem; }
.offer-list li::before { content: ""; width: 12px; height: 1px; background: var(--sys); transform: translateY(-.3em); }
.cinema-home .offer-note { margin-top: 28px; color: var(--ink); font-size: .95rem; max-width: 46ch; }
@media (min-width: 861px) { .join-offer { position: sticky; top: 96px; } }
.cinema-home .form { position: relative; padding: clamp(22px, 3vw, 32px); background: var(--panel); border: 1px solid var(--line); border-radius: 18px; }
.cinema-home .form h3 { font-size: 1.25rem; }
.cinema-home .field input, .cinema-home .field textarea { border-radius: 10px; font-size: max(16px, 1rem); transition: border-color .16s ease-out, box-shadow .16s ease-out; }
.cinema-home .field input:focus, .cinema-home .field textarea:focus { box-shadow: 0 0 0 3px #8bb7ff2e; }
.cinema-home .form .btn { width: 100%; margin-top: 4px; }
.cinema-home .field .err, .cinema-home .form-status.fail { color: var(--ink); }
.cinema-home .field .err::before { content: "! "; font-weight: 700; }
.cinema-home .field.bad input { border: 2px solid var(--ink); }
.cinema-home .form-status.ok { color: var(--sys); }
.cinema-home .form .consent { font-size: .8125rem; line-height: 1.5; color: var(--ink-3); }
.price { display: block; }
.price-period { display: block; }


/* The analytics box stays small, and off the reading column. */
.cinema-home .ana-box { left: auto; right: 16px; width: min(340px, calc(100vw - 32px)); padding: 14px 16px; font-size: .875rem; }
.cinema-home .ana-title { margin-bottom: 2px; font-size: 1rem; }
.cinema-home .ana-more { margin-top: 2px; }
.cinema-home .ana-btns { margin-top: 10px; }

@media (max-width: 860px) {
  .cinema-home .faq .wrap { grid-template-columns: minmax(0, 1fr); }
  .compliance-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
}
@media (max-width: 640px) {
  .tape { height: 1.6rem; font-size: .72rem; }
  .tape-a { transform: rotate(-5deg); }
  .tape-b { transform: translateY(14px) rotate(4deg); }
  .paths-banner {
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  }
  .cinema-home .ana-box { left: 8px; right: 8px; bottom: 8px; width: auto; }
  .cinema-home .facts, .risk-split { grid-template-columns: minmax(0, 1fr); }
  .compliance-steps { grid-template-columns: minmax(0, 1fr); }
  .cinema-home .section { padding: 84px 0; }
}

/* Titles in Anton, everything else in Roboto Slab, and all text a quarter bigger, on every page. */
html { font-size: 125%; }
:root, :root[data-theme="dark"] {
  --display: "Anton", "Arial Narrow", Impact, sans-serif;
  --text: "Roboto Slab", Georgia, serif;
  --mono: "Roboto Slab", Georgia, serif;
  --steel: #d6e2f5;
  --steel-hi: #eff4fc;
  --steel-ink: #05080e;
}
body { font-family: var(--text); }

/* One button, everywhere: flat, slim and cold, with no gradient, glow or moving light. */
.btn, .btn.light, .cinema-home .btn, .cinema-home .btn.light {
  background: var(--steel); border: 0; color: var(--steel-ink); font-weight: 500; letter-spacing: .005em; box-shadow: none;
}
.btn:hover, .btn.light:hover, .cinema-home .btn:hover, .cinema-home .btn.light:hover { background: var(--steel-hi); color: var(--steel-ink); }
.btn:focus-visible { outline: 2px solid var(--steel-hi); outline-offset: 3px; }
/* The consent choices stay equal and plain. Neither one is pushed, and neither takes attention from the main button. */
.btn.sm, .btn.sm:hover, .btn.sm.ghost, .btn.sm.ghost:hover, .cinema-home .btn.sm, .cinema-home .btn.sm:hover, .cinema-home .btn.sm.ghost, .cinema-home .btn.sm.ghost:hover {
  background: #141a24; border: 1px solid #2f3a4b; border-radius: 8px; color: #f1f0eb; box-shadow: none; filter: none;
}

/* ---------- arrivals: once, as each thing comes into view (set up by home-scroll.js) ---------- */
.reveal-ready [data-reveal="wipe"] { clip-path: inset(-.3em 100% -.4em -.2em); transition: clip-path 1.15s cubic-bezier(.7, 0, .25, 1); }
.reveal-ready [data-reveal="wipe"].is-in { clip-path: inset(-.3em -4% -.4em -.2em); }
.reveal-ready .cinema-home .facts li[data-reveal] { position: relative; border-top-color: transparent; }
.reveal-ready .cinema-home .facts li[data-reveal]::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--line);
  transform: scaleX(0); transform-origin: left; transition: transform 1s cubic-bezier(.7, 0, .25, 1) var(--wait, 0ms);
}
.reveal-ready .cinema-home .facts li[data-reveal] > * { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity .7s ease-out, transform .7s ease-out; transition-delay: calc(var(--wait, 0ms) + 250ms); }
.reveal-ready .cinema-home .facts li.is-in::before { transform: scaleX(1); }
.reveal-ready .cinema-home .facts li.is-in > * { opacity: 1; transform: none; }
.reveal-ready [data-reveal="chip"] { opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity .5s ease-out, transform .5s ease-out; }
.reveal-ready [data-reveal="chip"].is-in { opacity: 1; transform: none; }

/* The compliance rail: a steel line over the steps, and a small mark on it for each step. */
.compliance-steps::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--steel); transform: scaleX(var(--fill, 1)); transform-origin: left; }
@media (min-width: 861px) {
  .compliance-steps li { position: relative; }
  .compliance-steps li::before {
    content: ""; position: absolute; left: 0; top: -32px; width: 7px; height: 7px; background: var(--steel); border: 1px solid var(--steel);
    box-shadow: 0 0 12px #8fb2eb80; transition: background-color .3s ease-out, border-color .3s ease-out, box-shadow .3s ease-out;
  }
  .reveal-ready .compliance-steps li:not(.is-on)::before { background: var(--bg); border-color: #3a4a63; box-shadow: none; }
}

/* The scope behind "Questions owners ask". */
.cinema-home .faq-head { position: relative; }
.scope { position: relative; width: 260px; height: 260px; margin-top: 40px; pointer-events: none; }
.scope-svg { display: block; }
.scope-sweep { position: absolute; inset: 4px; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 300deg, #8fb2eb26 352deg, #8fb2eb55 360deg); }
.scope-blip { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #c6d8f5; opacity: .15; }
@media (prefers-reduced-motion: no-preference) {
  .scope-sweep { animation: scope-turn 6s linear infinite paused; }
  .scope-blip { animation: scope-blip 6s ease-out infinite paused; }
  .is-on .scope-sweep, .is-on .scope-blip { animation-play-state: running; }
}
@keyframes scope-turn { to { transform: rotate(360deg); } }
@keyframes scope-blip { 0% { opacity: .9; } 30%, 100% { opacity: .15; } }

/* The map of linked shops behind the price: your shop in the middle, signals running out along the links. */
.join-offer { isolation: isolate; }
@media (max-width: 860px) { .join-offer { position: relative; } }
.netmap { position: absolute; right: 0; top: -12px; z-index: -1; width: 300px; height: 210px; pointer-events: none; opacity: .9; }
.netmap-svg { display: block; }
.nm-dot { position: absolute; left: 0; top: 0; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: #c6d8f5; box-shadow: 0 0 8px #8fb2eb; offset-rotate: 0deg; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .nm-dot { animation: nm-run 3.2s cubic-bezier(.5, 0, .5, 1) infinite paused; }
  .is-on .nm-dot { animation-play-state: running; }
}
@keyframes nm-run { 0% { offset-distance: 0%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@media (max-width: 860px) {
  .scope { width: 200px; height: 200px; margin-top: 28px; }
  .scope-svg { width: 200px; height: 200px; }
  .scope .scope-blip { display: none; }
  .netmap { top: 0; transform: scale(.72); transform-origin: right top; }
}