/* hausnine.co.ke — the public site. Built to Figma v8 (desktop 6222:16339, reels 6224:16360…16955).
   Every colour is a DESIGN.md token value from app/globals.css (warm Light), declared ONCE in :root;
   nothing below this block may name a colour literal (pinned by __tests__/hausnine-site.test.ts).
   Motion is CSS keyframes; /site.js only says which chapter is on screen (see the motion block at the end).
   Without /site.js, and under reduced motion, the static final state. */

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  /* exactly the subset (fontTools, 2026-11-02): ASCII, nbsp, ©, ·, dashes, curly quotes, …, •, ↑ ↓, − */
  unicode-range: U+0020-007E, U+00A0, U+00A9, U+00B7, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026, U+2191, U+2193, U+2212;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/fonts/geist-mono-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0, U+00B7, U+2212; /* exactly the subset */
}

:root {
  /* colour — warm Light (app/globals.css [data-theme="light"]) */
  --page: #ffffff;
  --canvas: #f6f5f1;
  --sunken: #eceae4;
  --field: #dfdcd4;
  --border-subtle: #eceae4;
  --border-default: #dfdcd4;
  --border-strong: #cbc7be;
  --raised: #ffffff;
  --text: #1b1a16;
  --text-2: #56534b;
  --link: #0a4da8;
  --on-gold: #0e0d0a;
  --inverse: #001a3d;
  --on-inverse: #ffffff;
  --gold: #e0a21c;
  --gold-hover: #c4880f;
  --ok-text: #0a5844;
  --ok-fill: #18876a;
  --ok-container: #cfe7dc;
  --bad-text: #781022;
  --bad-container: #f4d5dc;
  --bad-border: #e7abb8;
  --series-1: #0a4da8;
  --accent-subtle: #edf2fb;
  --float: 0 20px 40px rgba(0, 26, 61, 0.05);
  --float-strong: 0 20px 40px rgba(0, 26, 61, 0.12);
  --ghost-edge: inset 0 0 0 1px rgba(0, 26, 61, 0.04);
  --device-shadow: drop-shadow(0 24px 32px rgba(0, 26, 61, 0.18));

  /* space — Fibonacci × 4 (DESIGN.md §6) */
  --f1: 4px; --f2: 8px; --f3: 12px; --f5: 20px; --f8: 32px; --f13: 52px; --f21: 84px; --f34: 136px;
  /* radius (§7) */
  --r-control: 4px; --r-surface: 8px; --r-full: 9999px;
  /* motion (§11.1) */
  --d-quick: 144ms; --d-std: 233ms; --d-emph: 377ms; --d-slow: 610ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-in: cubic-bezier(0.05, 0.7, 0.1, 1);
  --ease-exit: cubic-bezier(0.3, 0, 0.8, 0.15); /* §11.2 ease/exit */
  /* ambient story loops, public site only (DESIGN.md §11.7): a loop is --loop plus a whole number of --loop-step,
     a start delay is a whole number of --d-std. No other duration appears in this file. */
  --loop: 6765ms; --loop-step: 233ms;

  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --gutter: 24px;
  --top-h: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font: 400 16px/26px var(--sans);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss01";
}
img { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }
a { color: var(--link); text-underline-offset: 3px; }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: var(--r-control); }
h1, h2 { margin: 0; font-weight: 600; text-wrap: balance; color: var(--text); }
p { margin: 0; text-wrap: pretty; }
ol, dl, dd { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
time, .money, .change b, .install-steps b { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.wrap { width: 100%; max-width: calc(1152px + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.mob-only { display: none !important; }

/* ── header ───────────────────────────────────────────────── */
.top {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--page) 86%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  backdrop-filter: blur(24px) saturate(1.5);
  box-shadow: inset 0 -1px 0 var(--border-subtle);
}
.top-row { height: var(--top-h); display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: var(--f3); color: var(--text); text-decoration: none; font-weight: 600; font-size: 18px; letter-spacing: -0.01em; min-height: 44px; }
.mark { width: 28px; height: 28px; }
.mark-bg { fill: var(--inverse); }
.mark-h { fill: var(--gold); }
.top-nav { display: flex; align-items: center; gap: var(--f5); }
.link-quiet { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--f2); color: var(--text); text-decoration: none; font-weight: 500; }
.link-quiet:hover { text-decoration: underline; }
/* Pause motion (WCAG 2.2.2; Figma v8.2 6247:16420). Shown by /site.js only when the page can move. */
.motion-toggle {
  display: inline-flex; align-items: center; gap: var(--f2); min-height: 44px; min-width: 44px; padding: 0 var(--f3);
  border: 0; border-radius: var(--r-control); background: transparent; color: var(--text);
  font: inherit; font-weight: 500; cursor: pointer;
}
.motion-toggle[hidden] { display: none; }
@media (hover: hover) { .motion-toggle:hover { background: var(--accent-subtle); } }
.motion-toggle:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.motion-toggle svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
.motion-toggle .mt-play, .motion-toggle.is-paused .mt-pause { display: none; }
.motion-toggle.is-paused .mt-play { display: block; }

/* ── buttons ──────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 var(--f5);
  border-radius: var(--r-control);
  font: 600 16px/1 var(--sans); text-decoration: none; white-space: nowrap;
  border: 0; cursor: pointer;
  transition: background-color var(--d-quick) var(--ease), border-color var(--d-quick) var(--ease);
}
.btn-sm { min-height: 40px; padding: 0 var(--f5); font-size: 14px; }
.btn-gold { background: var(--gold); color: var(--on-gold); }
.btn-gold:hover { background: var(--gold-hover); }
.btn-outline { background: var(--raised); color: var(--text); box-shadow: inset 0 0 0 1px var(--border-strong); }
.btn-outline:hover { background: var(--canvas); }
.ctas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--f3); margin-top: var(--f8); }
.note { color: var(--text-2); font-size: 14px; margin-left: var(--f2); }

/* ── chapters ─────────────────────────────────────────────── */
.ch { padding: var(--f34) 0; }
.ch-hero { padding-top: var(--f21); }
.progress { display: none; }
.grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--f21); align-items: center; }
.grid.flip { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.grid.flip > .copy { order: 2; }
.copy { max-width: 480px; }
.copy-wide { max-width: 640px; margin-bottom: var(--f13); }
h1 { font-size: 55px; line-height: 68px; letter-spacing: -0.025em; }
h2 { font-size: 34px; line-height: 42px; letter-spacing: -0.02em; }
.lede { margin-top: var(--f5); color: var(--text-2); font-size: 17px; line-height: 28px; }

/* stage: a photograph with a device standing in front of it */
.stage { position: relative; width: 100%; max-width: 560px; aspect-ratio: 560 / 600; justify-self: end; }
.stage .photo {
  position: absolute; right: 0; top: 4%; width: 78%; height: 88%;
  object-fit: cover; border-radius: var(--r-surface);
  box-shadow: var(--float);
}
.stage .phone {
  position: absolute; left: 0; top: 0; width: 47%; z-index: 1;
  filter: var(--device-shadow);
}
.stage-left { justify-self: start; }

.sticker {
  position: absolute; right: -8px; top: -2%; z-index: 3;
  background: var(--gold); color: var(--on-gold);
  font-weight: 600; font-size: 13px; line-height: 1; padding: 9px var(--f3);
  border-radius: var(--r-full); transform: rotate(6deg);
  box-shadow: var(--float-strong);
}

/* floating cards — hero feed, queue, status, callout */
.note-card, .cust, .status-card, .callout {
  display: flex; align-items: flex-start; gap: var(--f3);
  background: var(--raised); border-radius: var(--r-surface);
  box-shadow: var(--ghost-edge), var(--float-strong);
  padding: var(--f3) var(--f3);
}
.nc-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.nc-body strong { font-weight: 600; font-size: 15px; line-height: 22px; }
.nc-body span, .nc-body small { color: var(--text-2); font-size: 13px; line-height: 19px; }
.note-card time { color: var(--text-2); font-size: 12px; line-height: 22px; white-space: nowrap; }
.ico {
  flex: none; width: 32px; height: 32px; border-radius: var(--r-control);
  display: grid; place-items: center; font-weight: 600; font-size: 16px; line-height: 1;
}
.ico svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ico-ok { background: var(--ok-container); color: var(--ok-text); }
.ico-up { background: var(--sunken); color: var(--text); }
.ico-warn { background: var(--bad-container); color: var(--bad-text); }
.is-danger { box-shadow: inset 0 0 0 1px var(--bad-border), var(--float-strong); }

.feed { position: absolute; right: -4%; top: 15%; width: 56%; z-index: 2; display: grid; gap: var(--f3); }

.queue { position: absolute; right: -12%; top: 13%; width: 68%; z-index: 2; display: grid; gap: var(--f3); justify-items: start; }
.pill { background: var(--inverse); color: var(--on-inverse); font-size: 13px; font-weight: 500; line-height: 1; padding: 8px var(--f3); border-radius: var(--r-full); }
.queue-list { display: grid; gap: var(--f2); width: 100%; }
.cust { align-items: center; }
.cust .nc-body span { white-space: nowrap; }
.avatar { flex: none; width: 36px; height: 36px; border-radius: var(--r-full); display: grid; place-items: center; font-weight: 600; font-size: 14px; }
.a1 { background: var(--accent-subtle); color: var(--link); }
.a2 { background: var(--ok-container); color: var(--ok-text); }
.a3 { background: var(--sunken); color: var(--text); }
.change { display: flex; flex-direction: column; align-items: flex-end; }
.change small { color: var(--text-2); font-size: 12px; line-height: 16px; }
.change b { font-weight: 600; font-size: 15px; line-height: 22px; }

.status { position: absolute; right: 2%; top: 14%; width: 50%; z-index: 2; display: grid; }
.status-card { grid-area: 1 / 1; align-items: center; }
.status-card small { font-size: 13px; color: var(--text); font-weight: 500; }
.dot { flex: none; width: 8px; height: 8px; border-radius: var(--r-full); display: inline-block; }
.dot-on { background: var(--ok-fill); }
.dot-off { background: var(--border-strong); }
.dot-soon { background: var(--border-strong); }

/* close of day */
.count-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.steps { display: grid; gap: var(--f2); max-width: 440px; }
.step {
  display: flex; align-items: center; justify-content: space-between; gap: var(--f5);
  background: var(--raised); border-radius: var(--r-surface); padding: var(--f5);
  box-shadow: inset 0 0 0 1px var(--border-default);
}
.st-meta { display: flex; flex-direction: column; }
.st-meta time { color: var(--text-2); font-size: 12px; line-height: 19px; }
.st-meta strong { font-weight: 600; font-size: 15px; line-height: 22px; }
.step .money { font-weight: 600; font-size: 21px; line-height: 26px; letter-spacing: -0.01em; white-space: nowrap; }
.step.is-danger { background: var(--bad-container); box-shadow: inset 0 0 0 1px var(--bad-border); }
.step.is-danger .money { color: var(--bad-text); }
/* text/secondary measures 5.63:1 on the danger container, under the 6:1 floor (DESIGN.md §4): F11.6 */
.step.is-danger .st-meta time { color: var(--text); }
.arrow { color: var(--text-2); padding-left: var(--f5); line-height: 20px; }
.stage-count { aspect-ratio: 560 / 470; }
.stage-count .photo { top: 0; width: 100%; height: 78%; }
.stage-count .tablet { position: absolute; left: -10%; bottom: 0; width: 64%; z-index: 1; filter: var(--device-shadow); }

/* dashboard */
.stage-dash { aspect-ratio: auto; max-width: none; justify-self: stretch; }
.panel { background: var(--canvas); border-radius: var(--r-surface); padding: var(--f13) var(--f13) 0; display: flex; justify-content: center; overflow: hidden; }
.monitor { width: 100%; max-width: 560px; }
.callout { position: absolute; left: -4%; bottom: -6%; z-index: 2; align-items: center; width: auto; max-width: 280px; }
.callout .ico-up { background: var(--ok-container); color: var(--ok-text); }
.callout strong { font-family: var(--mono); }
.channels { margin-top: var(--f8); border-top: 1px solid var(--border-subtle); }
.channels > div { display: flex; justify-content: space-between; align-items: center; padding: var(--f3) 0; border-bottom: 1px solid var(--border-subtle); }
.channels dt { font-weight: 600; font-size: 15px; }
.channels dd { display: inline-flex; align-items: center; gap: var(--f2); font-size: 14px; }
.channels .avail { color: var(--ok-text); }
.channels .soon { color: var(--text-2); }

/* the live chart over a device render: bars grow, stat rows are wiped in */
.chart { position: relative; }
.bars { position: absolute; display: flex; align-items: flex-end; gap: 4.67%; }
.bars i { flex: 1; height: var(--h); background: var(--series-1); border-radius: 2px 2px 0 0; transform-origin: bottom; }
.bars i.today { background: var(--gold); }
.bars i:nth-child(1) { --h: 59.10%; }
.bars i:nth-child(2) { --h: 69.99%; }
.bars i:nth-child(3) { --h: 63.63%; }
.bars i:nth-child(4) { --h: 81.82%; }
.bars i:nth-child(5) { --h: 100%; }
.bars i:nth-child(6) { --h: 56.36%; }
.bars i:nth-child(7) { --h: 76.36%; }
.wipe { position: absolute; background: var(--inverse); transform-origin: right; transform: scaleX(0); }
.monitor .bars { left: 35.935%; top: 27.939%; width: 19.477%; height: 12.639%; }
.monitor .w1 { left: 59.233%; top: 27.939%; width: 32.035%; height: 6.371%; }
.monitor .w2 { left: 59.233%; top: 34.310%; width: 32.035%; height: 6.371%; }
.monitor .w3 { left: 59.233%; top: 40.679%; width: 32.035%; height: 6.256%; }
.tablet .bars { left: 35.477%; top: 67.645%; width: 19.926%; height: 14.795%; }
.tablet .w1 { left: 59.310%; top: 67.645%; width: 32.771%; height: 7.662%; }
.tablet .w2 { left: 59.310%; top: 75.307%; width: 32.771%; height: 7.662%; }
.tablet .w3 { left: 59.310%; top: 82.970%; width: 32.771%; height: 7.528%; }
.phone-owner .bars { left: 14.107%; top: 38.433%; width: 69.955%; height: 10.782%; gap: 3.43%; }
.phone-owner .w1 { left: 14.107%; top: 57.907%; width: 70.674%; height: 6.353%; }
.phone-owner .w2 { left: 14.107%; top: 64.260%; width: 70.674%; height: 6.353%; }
.phone-owner .w3 { left: 14.107%; top: 70.610%; width: 70.674%; height: 6.240%; }

/* install */
.ch-install { border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.install { text-align: center; display: flex; flex-direction: column; align-items: center; }
.install-body { display: flex; align-items: center; justify-content: center; gap: var(--f21); margin-top: var(--f8); text-align: left; }
.install-main { display: flex; flex-direction: column; gap: var(--f5); }
.install .ctas { margin-top: 0; }
.qr-card {
  margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--f3);
  background: var(--raised); color: var(--text); border-radius: var(--r-surface); padding: var(--f5);
  box-shadow: inset 0 0 0 1px var(--border-default);
}
.qr-card svg { display: block; width: 160px; height: 160px; }
.qr-card figcaption { color: var(--text-2); font-size: 16px; }
.install h2 { font-size: 55px; line-height: 68px; letter-spacing: -0.025em; }
.install-steps { display: flex; flex-direction: column; align-items: flex-start; gap: var(--f3); }
.install-steps li { display: inline-flex; align-items: baseline; gap: var(--f3); font-size: 16px; }
.install-steps b { font-weight: 600; color: var(--text-2); }
.ctas-center { justify-content: center; }
.contact { display: flex; gap: var(--f8); justify-content: center; margin-top: var(--f5); }
.contact a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text); font-weight: 600; }
.contact-row { display: flex; flex-wrap: wrap; gap: var(--f3); margin-top: var(--f5); }

/* faq */
.faq { padding: var(--f34) 0; }
.faq-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
.faq-list { border-top: 1px solid var(--border-default); }
.faq details { border-bottom: 1px solid var(--border-default); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: var(--f5);
  /* 4px of the row's padding is margin instead: the rows look the same and the hit areas are 9px apart (F11.5) */
  padding: calc(var(--f5) - 4px) 0; margin: 4px 0; font-weight: 600; font-size: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--text-2); font-weight: 400; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { padding: 0 0 var(--f5); color: var(--text-2); max-width: 62ch; }

/* footer */
.foot { border-top: 1px solid var(--border-subtle); padding: var(--f13) 0 var(--f8); }
.foot-row { display: flex; align-items: center; justify-content: space-between; gap: var(--f8); flex-wrap: wrap; }
.foot-links, .foot-contact { display: flex; gap: var(--f8); flex-wrap: wrap; }
.foot-links a, .foot-contact a { display: inline-flex; align-items: center; min-height: 44px; }
.foot-links a { color: var(--text); text-decoration: none; font-size: 16px; }
.foot-links a:hover { text-decoration: underline; }
.foot-contact a { color: var(--text); font-weight: 600; font-size: 16px; text-decoration: none; }
.copyright { margin-top: var(--f5); color: var(--text-2); font-size: 14px; }

/* analytics consent: shown by /site.js only when a GTM container ID is configured (addendum 6235:16464) */
.consent {
  position: fixed; left: var(--f8); bottom: var(--f8); z-index: 20; width: 400px;
  display: grid; gap: var(--f5); padding: var(--f5);
  background: var(--raised); border-radius: var(--r-surface);
  box-shadow: inset 0 0 0 1px var(--border-default), var(--float);
}
.consent-h { font-weight: 600; }
.consent-b { color: var(--text-2); }
.consent-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--f3); }

/* ── mobile: one chapter per screen, snapped like reels (DESIGN.md: mobile drops hero/display) ── */
@media (max-width: 767px) {
  :root { --gutter: 16px; --top-h: 56px; }
  html { scroll-snap-type: y mandatory; scroll-padding-top: var(--top-h); }
  .desk-only { display: none !important; }
  .motion-toggle { padding: 0; justify-content: center; }
  .motion-toggle .mt-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .mob-only { display: revert !important; }
  /* revert would undo a flex box's own display, so the flex ones are named */
  .btn.mob-only { display: flex !important; }
  .contact.mob-only { display: flex !important; }
  .progress { display: flex !important; }

  .ch {
    min-height: calc(100svh - var(--top-h));
    padding: var(--f3) 0 var(--f8);
    scroll-snap-align: start; scroll-snap-stop: always;
    display: flex; flex-direction: column;
  }
  .ch > .wrap { flex: 1; display: flex; flex-direction: column; }
  .progress { gap: var(--f1); padding: 0 var(--gutter) var(--f5); }
  .progress i { flex: 1; height: 3px; border-radius: var(--r-full); background: var(--border-default); }
  .progress i.on { background: var(--text); }

  .grid, .count-grid, .faq-grid { display: flex; flex-direction: column; gap: var(--f5); align-items: stretch; }
  .grid.flip > .copy { order: 0; }
  .copy, .copy-wide { max-width: none; margin: 0; }
  h1, h2, .install h2 { font-size: 26px; line-height: 32px; letter-spacing: -0.015em; }
  .lede { margin-top: var(--f3); font-size: 16px; line-height: 26px; }
  .ctas { flex-direction: column; align-items: stretch; margin-top: auto; gap: var(--f2); }
  .ch-hero .ctas { order: 3; }
  .note { margin: 0; text-align: center; font-size: 16px; }
  .mob-foot { order: 4; margin-top: var(--f2); }
  .ch-hero .grid { flex: 1; }
  .ch-hero .copy { display: contents; }
  .ch-hero h1 { order: 0; }
  .ch-hero .lede { order: 1; margin-top: calc(var(--f3) - var(--f5)); }
  .ch-hero .stage { order: 2; }
  .ch-hero .ctas .note, .ch-hero .ctas .btn-outline + .note { display: none; }

  .stage { max-width: min(100%, calc((100svh - 330px) * 0.93)); justify-self: center; align-self: center; }
  .feed { right: -2%; top: auto; bottom: 10%; width: 92%; display: grid; }
  .feed .note-card { grid-area: 1 / 1; }
  .ch:not(.ch-hero) .stage { margin-block: auto; }
  .queue { right: 0; top: 8%; width: 80%; }
  .cust .nc-body span { white-space: normal; }
  .status { right: 0; width: 70%; }
  .sticker { font-size: 16px; right: -2px; }
  /* everything else in reel 1 is ~430px tall: the picture takes what the screen has left */
  .stage-hero { aspect-ratio: 1; max-width: min(100%, max(200px, calc(100svh - 490px))); }

  .ch-count .copy-wide { margin-bottom: var(--f5); }
  .count-grid { flex-direction: column-reverse; }
  .stage-count { aspect-ratio: auto; height: clamp(72px, calc(100svh - 610px), 132px); max-width: 100%; }
  .stage-count .photo { height: 100%; }
  .steps { max-width: none; gap: var(--f1); }
  .step { padding: var(--f3) var(--f5); }
  .arrow { line-height: 16px; font-size: 16px; }
  .st-meta strong { font-size: 16px; line-height: 24px; }
  .caption { margin-top: var(--f3); color: var(--text-2); font-size: 16px; }
  .st-meta time { font-size: 16px; line-height: 24px; }
  .channels dt, .channels dd { font-size: 16px; }
  .copyright { font-size: 16px; }

  .stage-dash { display: flex; justify-content: center; max-width: 100%; }
  .phone-owner { width: min(62%, max(120px, calc((100svh - 450px) * 0.47))); filter: var(--device-shadow); }
  .callout { left: 0; bottom: 6%; }
  .channels { margin-top: var(--f5); }

  .install { text-align: left; align-items: stretch; }
  .install-body { flex: 1; flex-direction: column; align-items: stretch; gap: 0; margin-top: 0; }
  .install-main { flex: 1; gap: 0; }
  .install-steps { align-items: stretch; }
  .contact-row .btn { flex: 1; }
  .consent { left: var(--gutter); right: var(--gutter); bottom: var(--gutter); width: auto; }
  .consent-actions .btn { min-height: 48px; }
  .install-steps { flex-direction: column; gap: var(--f3); margin-top: var(--f8); }
  .install-steps li { background: var(--raised); border-radius: var(--r-surface); box-shadow: inset 0 0 0 1px var(--border-default); padding: var(--f5); align-items: center; gap: var(--f5); font-size: 16px; }
  .install-steps b { font-size: 26px; }
  .ch-install .ctas { margin-top: auto; padding-top: var(--f8); }
  /* on the phone, Create account leads and Install POS is the secondary action (reel 6224:16955) */
  .ch-install .btn-install { background: var(--raised); color: var(--text); box-shadow: inset 0 0 0 1px var(--border-strong); }
  .ch-install { border: 0; }
  .contact { margin-top: var(--f3); }

  .swipe { margin-top: auto; padding-top: var(--f5); text-align: center; color: var(--text-2); font-size: 16px; }

  .faq { padding: var(--f13) 0; scroll-snap-align: start; }
  .foot { scroll-snap-align: end; }
  .foot-row { flex-direction: column; align-items: flex-start; gap: var(--f5); }
  .foot-links { gap: var(--f5); }
}

/* Short phones (740 and 667 tall): the count reel is the steps and the caption; its photo is decoration and is the
   part that goes, so the reel still fits one screen. Measured 739/684 and 681/611 with it (ROUND 12). */
@media (max-width: 767px) and (max-height: 760px) {
  .ch-count .stage-count { display: none; }
}

/* ── motion (human ruling 2026-11-03; DESIGN.md §11.7 and §1.3.2 row 2) ──────────
   Each chapter's story LOOPS while the chapter is on screen, and starts again from the beginning on every mouse
   enter and every time it comes back into view. /site.js adds .motion to <html> (never under reduced motion, never
   while the header's Pause motion control is on) and .play to the chapter that is on screen; it removes and re-adds
   .play to restart.
   Every animated element has its OWN timeline: its own duration (--loop + k × --loop-step), delay (j × --d-std) and
   easing (§11.2 tokens), so the elements drift apart over the loops instead of moving in lockstep.
   Without /site.js, under reduced motion and when paused, nothing moves: the default styles ARE the final state.
   A card is fully readable for about 70% of its cycle and fades between; WCAG 2.2.2 is met by the Pause control,
   not by the timing. Device mockups float with the `translate` property, so their own transforms are untouched. */
@keyframes rise-loop {
  0% { opacity: 0; transform: translateY(16px) scale(0.98); }
  12%, 84% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: translateY(-8px); }
}
@keyframes sticker-loop {
  0% { opacity: 0; transform: rotate(6deg) scale(0.6); }
  8% { opacity: 1; transform: rotate(6deg) scale(1.06); }
  12%, 46% { opacity: 1; transform: rotate(6deg) scale(1); }
  52% { opacity: 1; transform: rotate(2deg) scale(1.04); }
  58%, 100% { opacity: 1; transform: rotate(6deg) scale(1); }
}
@keyframes swap-off {
  0%, 38% { opacity: 1; transform: none; }
  46%, 92% { opacity: 0; transform: translateY(-8px); }
  100% { opacity: 1; transform: none; }
}
@keyframes swap-on {
  0%, 40% { opacity: 0; transform: translateY(8px); }
  48%, 90% { opacity: 1; transform: none; }
  98%, 100% { opacity: 0; transform: translateY(8px); }
}
@keyframes grow-loop { 0% { transform: scaleY(0); } 16%, 86% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
@keyframes unwipe-loop { 0% { transform: scaleX(1); } 18%, 88% { transform: scaleX(0); } 100% { transform: scaleX(1); } }
@keyframes pulse-loop { 0%, 40%, 100% { transform: none; } 20% { transform: scale(1.12); } }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }

/* static final state: the offline card is superseded by the online one, so it is hidden rather than stacked */
.s-off { visibility: hidden; }

@media (prefers-reduced-motion: no-preference) {
  .motion .play .s-off { visibility: visible; }
  .motion .play .change b { display: inline-block; }

  /* hero: Luna's day, as the owner sees it */
  .motion .ch-hero.play .sticker { animation: sticker-loop calc(var(--loop) + 13 * var(--loop-step)) var(--ease-in) calc(1 * var(--d-std)) infinite both; }
  .motion .ch-hero.play .feed .n1 { animation: rise-loop calc(var(--loop) + 2 * var(--loop-step)) var(--ease-in) calc(3 * var(--d-std)) infinite both; }
  .motion .ch-hero.play .feed .n2 { animation: rise-loop calc(var(--loop) + 5 * var(--loop-step)) var(--ease) calc(7 * var(--d-std)) infinite both; }
  .motion .ch-hero.play .feed .n3 { animation: rise-loop calc(var(--loop) + 9 * var(--loop-step)) var(--ease-in) calc(11 * var(--d-std)) infinite both; }
  .motion .ch-hero.play .device { animation: float calc(var(--loop) - 6 * var(--loop-step)) var(--ease) infinite; }

  /* checkout: Maggy's queue */
  .motion .ch-checkout.play .c1 { animation: rise-loop var(--loop) var(--ease-in) calc(1 * var(--d-std)) infinite both; }
  .motion .ch-checkout.play .c2 { animation: rise-loop calc(var(--loop) + 3 * var(--loop-step)) var(--ease) calc(5 * var(--d-std)) infinite both; }
  .motion .ch-checkout.play .c3 { animation: rise-loop calc(var(--loop) + 6 * var(--loop-step)) var(--ease-in) calc(8 * var(--d-std)) infinite both; }
  .motion .ch-checkout.play .c1 .change b { animation: pulse-loop calc(var(--loop) - 15 * var(--loop-step)) var(--ease) calc(4 * var(--d-std)) infinite; }
  .motion .ch-checkout.play .c2 .change b { animation: pulse-loop calc(var(--loop) - 13 * var(--loop-step)) var(--ease) calc(8 * var(--d-std)) infinite; }
  .motion .ch-checkout.play .c3 .change b { animation: pulse-loop calc(var(--loop) - 11 * var(--loop-step)) var(--ease) calc(11 * var(--d-std)) infinite; }
  .motion .ch-checkout.play .device { animation: float calc(var(--loop) - 3 * var(--loop-step)) var(--ease) calc(2 * var(--d-std)) infinite; }

  /* offline: Zawadi keeps selling, then it sends (one swap: the two cards share a cycle length, not an easing) */
  .motion .ch-offline.play .s-off { animation: swap-off var(--loop) var(--ease) calc(1 * var(--d-std)) infinite both; }
  .motion .ch-offline.play .s-on { animation: swap-on var(--loop) var(--ease-in) calc(1 * var(--d-std)) infinite both; }
  .motion .ch-offline.play .device { animation: float calc(var(--loop) - 4 * var(--loop-step)) var(--ease) calc(4 * var(--d-std)) infinite; }

  /* count: count first, then compare */
  .motion .ch-count.play .st1 { animation: rise-loop calc(var(--loop) + 7 * var(--loop-step)) var(--ease-in) calc(1 * var(--d-std)) infinite both; }
  .motion .ch-count.play .arrow:nth-child(2) { animation: rise-loop calc(var(--loop) + 9 * var(--loop-step)) var(--ease) calc(4 * var(--d-std)) infinite both; }
  .motion .ch-count.play .st2 { animation: rise-loop calc(var(--loop) + 11 * var(--loop-step)) var(--ease-in) calc(6 * var(--d-std)) infinite both; }
  .motion .ch-count.play .arrow:nth-child(4) { animation: rise-loop calc(var(--loop) + 13 * var(--loop-step)) var(--ease) calc(9 * var(--d-std)) infinite both; }
  .motion .ch-count.play .st3 { animation: rise-loop calc(var(--loop) + 16 * var(--loop-step)) var(--ease-in) calc(11 * var(--d-std)) infinite both; }
  .motion .ch-count.play .device { animation: float calc(var(--loop) - 1 * var(--loop-step)) var(--ease) calc(3 * var(--d-std)) infinite; }

  /* charts (count tablet, dashboard monitor and phone): each bar and each line on its own clock */
  .motion .play .chart .bars i:nth-child(1) { animation: grow-loop calc(var(--loop) + 2 * var(--loop-step)) var(--ease) calc(2 * var(--d-std)) infinite both; }
  .motion .play .chart .bars i:nth-child(2) { animation: grow-loop calc(var(--loop) + 4 * var(--loop-step)) var(--ease-in) calc(3 * var(--d-std)) infinite both; }
  .motion .play .chart .bars i:nth-child(3) { animation: grow-loop calc(var(--loop) + 6 * var(--loop-step)) var(--ease) calc(4 * var(--d-std)) infinite both; }
  .motion .play .chart .bars i:nth-child(4) { animation: grow-loop calc(var(--loop) + 8 * var(--loop-step)) var(--ease-in) calc(5 * var(--d-std)) infinite both; }
  .motion .play .chart .bars i:nth-child(5) { animation: grow-loop calc(var(--loop) + 10 * var(--loop-step)) var(--ease) calc(6 * var(--d-std)) infinite both; }
  .motion .play .chart .bars i:nth-child(6) { animation: grow-loop calc(var(--loop) + 12 * var(--loop-step)) var(--ease-in) calc(7 * var(--d-std)) infinite both; }
  .motion .play .chart .bars i:nth-child(7) { animation: grow-loop calc(var(--loop) + 14 * var(--loop-step)) var(--ease) calc(8 * var(--d-std)) infinite both; }
  .motion .play .chart .w1 { animation: unwipe-loop calc(var(--loop) + 4 * var(--loop-step)) var(--ease) calc(5 * var(--d-std)) infinite both; }
  .motion .play .chart .w2 { animation: unwipe-loop calc(var(--loop) + 7 * var(--loop-step)) var(--ease-exit) calc(7 * var(--d-std)) infinite both; }
  .motion .play .chart .w3 { animation: unwipe-loop calc(var(--loop) + 10 * var(--loop-step)) var(--ease-in) calc(9 * var(--d-std)) infinite both; }

  /* dashboard */
  .motion .ch-dash.play .callout { animation: rise-loop calc(var(--loop) + 12 * var(--loop-step)) var(--ease-in) calc(9 * var(--d-std)) infinite both; }
  .motion .ch-dash.play .channels > div:nth-child(1) { animation: rise-loop calc(var(--loop) + 15 * var(--loop-step)) var(--ease) calc(3 * var(--d-std)) infinite both; }
  .motion .ch-dash.play .channels > div:nth-child(2) { animation: rise-loop calc(var(--loop) + 18 * var(--loop-step)) var(--ease-in) calc(5 * var(--d-std)) infinite both; }
  .motion .ch-dash.play .device { animation: float calc(var(--loop) + 2 * var(--loop-step)) var(--ease) calc(1 * var(--d-std)) infinite; }
}