/* Retailytics AI website */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------------ tokens */
:root {
  --signal: #1E3FD8;
  --signal-deep: #152C9E;
  --signal-hi: #5B78FF;
  --signal-ink: #DCE3FF;
  --signal-lift: #2D4DE6;
  --bezel: #1A2029;
  --video: #07090C;
  --video-2: #0E1218;
  --seam: #2B323D;
  --osd: #F4F6F8;
  --osd-dim: #A7B0BD;
  --stamp: #FFCB3D;
  --gain: #39D98A;
  --loss: #FF7A6B;
  --ramp-1: #07090C;
  --ramp-2: #16255E;
  --ramp-3: #1E3FD8;
  --ramp-4: #5B78FF;
  --ramp-5: #F4F6F8;
  --white: #FFFFFF;

  --cut: 60ms;
  --snap: 120ms;
  --settle: 240ms;
  --draw: 1200ms;
  --out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 72px; --sp-9: 112px;

  --seam-w: 3px;
  --r-channel: 4px;
  --r-button: 2px;
  --page-max: 1360px;
  --gutter: clamp(16px, 4vw, 48px);
  --strip-h: 56px;
  --measure: 62ch;

  --font: "Archivo", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --fs-h1: clamp(2.4rem, 1rem + 3.4vw, 4.4rem);
  --fs-h2: clamp(1.9rem, 1.2rem + 2.2vw, 3.1rem);
  --fs-h3: 1.375rem;
  --fs-lead: 1.1875rem;
  --fs-body: 1.0625rem;
  --fs-small: .9375rem;
  --fs-osd: .8125rem;
  --fs-answer-xl: clamp(3rem, 1.6rem + 4vw, 5.6rem);
  --fs-answer-m: clamp(2rem, 1.5rem + 1.2vw, 2.75rem);
  --fs-caption: 1.125rem;

  --shadow-float: 0 12px 32px rgba(0, 0, 0, .4);
  --highlight: inset 0 1px 0 rgba(255, 255, 255, .04);

  /* field-aware controls: dark (video) field is the default */
  --btn-bg: var(--signal);
  --btn-fg: var(--osd);
  --btn-bg-hover: var(--signal-lift);
  --btn-bg-press: var(--signal-deep);
  --btn2-fg: var(--osd);
  --btn2-bd: var(--osd-dim);
  --btn2-bd-hover: var(--osd);
  --btn2-bg-hover: var(--video-2);
  --focus-inner: var(--osd);
  --focus-outer: var(--signal-hi);
  --link-hover: var(--signal-hi);
  --text-dim: var(--osd-dim);

  color-scheme: dark;
}

.field--video {
  --btn-bg: var(--signal);
  --btn-fg: var(--osd);
  --btn-bg-hover: var(--signal-lift);
  --btn-bg-press: var(--signal-deep);
  --btn2-fg: var(--osd);
  --btn2-bd: var(--osd-dim);
  --btn2-bd-hover: var(--osd);
  --btn2-bg-hover: var(--video-2);
  --focus-inner: var(--osd);
  --focus-outer: var(--signal-hi);
  --link-hover: var(--signal-hi);
  --text-dim: var(--osd-dim);
}

.field--signal {
  background: var(--signal);
  color: var(--osd);
  --btn-bg: var(--osd);
  --btn-fg: var(--video);
  --btn-bg-hover: var(--white);
  --btn-bg-press: var(--signal-ink);
  --btn2-fg: var(--osd);
  --btn2-bd: var(--osd);
  --btn2-bd-hover: var(--white);
  --btn2-bg-hover: var(--signal-deep);
  --focus-inner: var(--video);
  --focus-outer: var(--osd);
  --link-hover: var(--white);
  --text-dim: var(--signal-ink);
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-color: var(--bezel) var(--video);
  scrollbar-width: thin;
  scroll-padding-top: calc(var(--strip-h) + var(--sp-4));
  background: var(--video);
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--video);
  color: var(--osd);
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: 420;
  font-stretch: 100%;
  font-variation-settings: "wdth" 100, "wght" 420;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

:lang(bn) { font-family: "Nirmala UI", "Shonar Bangla", "Noto Sans Bengali", var(--font); }
:lang(ar) { font-family: "Segoe UI", "Noto Naskh Arabic", Tahoma, var(--font); }

::selection { background: var(--signal); color: var(--osd); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--video); }
::-webkit-scrollbar-thumb { background: var(--bezel); border: 2px solid var(--video); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--seam); }

[hidden] { display: none !important; }
img, svg, canvas { display: block; max-width: 100%; }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
input, textarea { caret-color: var(--signal-hi); }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--link-hover); }

:focus-visible {
  outline: 2px solid var(--focus-outer);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--focus-inner);
}
:focus:not(:focus-visible) { outline: none; }
[tabindex="-1"]:focus { outline: none; box-shadow: none; }

.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: var(--sp-4);
  top: -80px;
  z-index: 100;
  padding: var(--sp-3) var(--sp-4);
  background: var(--osd);
  color: var(--video);
  font-weight: 620;
  font-variation-settings: "wdth" 100, "wght" 620;
  text-decoration: none;
  border-radius: var(--r-button);
  --focus-inner: var(--video);
  --focus-outer: var(--signal-hi);
}
.skip:focus { top: var(--sp-3); }

/* ------------------------------------------------------------------ voices */
.osd,
.osd-top, .osd-bottom, .stamp, .proof-row, .compare, .subanswers, .zone-tag, .zone-label, .zone-mark,
.tick-tag, .defs dt, .cmp__head, .cmp__title, .cmp__key, .cmp__val, .measure,
.day__n, .launch__stamps, .busy__day, .busy__peak, .hr, .path, .works-with,
.licences__rows dt, .asks__label, .dialog__strip, .done__label, .osd-btn, .nosignal__stamp {
  font-stretch: 75%;
  font-weight: 600;
  font-variation-settings: "wdth" 75, "wght" 600;
  font-size: var(--fs-osd);
  line-height: 1.25;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-feature-settings: "tnum", "zero", "case";
  font-variant-numeric: tabular-nums slashed-zero;
}

.answer, .caption__num, .day__v, .ranking__hit, .defs__val {
  font-stretch: 75%;
  font-weight: 700;
  font-variation-settings: "wdth" 75, "wght" 700;
  letter-spacing: -.01em;
  font-feature-settings: "tnum", "zero", "lnum";
  font-variant-numeric: tabular-nums slashed-zero lining-nums;
}

.h1, .h2 {
  font-stretch: 100%;
  font-weight: 750;
  font-variation-settings: "wdth" 100, "wght" 750;
  letter-spacing: -.025em;
  line-height: 1.02;
  text-wrap: balance;
}
.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); }
.h3 {
  font-size: var(--fs-h3);
  line-height: 1.25;
  font-weight: 650;
  font-variation-settings: "wdth" 100, "wght" 650;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.lead { font-size: var(--fs-lead); line-height: 1.5; }
.body { font-size: var(--fs-body); line-height: 1.6; max-width: var(--measure); color: var(--text-dim); text-wrap: pretty; }
.small { font-size: var(--fs-small); line-height: 1.5; color: var(--text-dim); max-width: var(--measure); }
.strong, b, strong { font-weight: 620; font-variation-settings: "wdth" 100, "wght" 620; }
.dim, .osd-dim { color: var(--osd-dim); }

/* ------------------------------------------------------------------ layout */
.page {
  width: 100%;
  max-width: calc(var(--page-max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-top: var(--sp-9); }
.section__head { margin-bottom: var(--sp-7); display: grid; gap: var(--sp-4); }
.section__title { margin-bottom: var(--sp-7); max-width: 22ch; }
@media (min-width: 960px) {
  .section__head--split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-7); align-items: start; }
}

/* a fragment of the wall: channels edge to edge on the bezel, 3px seams */
.frag {
  display: grid;
  gap: var(--seam-w);
  padding: var(--seam-w);
  background: var(--bezel);
  border-radius: calc(var(--r-channel) + var(--seam-w));
}
.frag > .channel { border: 0; border-radius: var(--r-channel); }
.frag > .channel:not(.privacy__cell) > .osd-bottom:last-child { margin-top: auto; }
.frag--pair > .channel, .frag--offers > .channel, .frag--launch > .channel, .frag--corners > .channel,
.frag--route > .channel, .frag--setup > .channel { display: flex; flex-direction: column; }

.split { display: grid; gap: var(--sp-7); align-items: start; }
@media (min-width: 960px) {
  .split--7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-7); }
}
.split__text { display: grid; gap: var(--sp-5); }

.sep { color: var(--osd-dim); }
.field--signal .sep { color: var(--signal-ink); }

/* ------------------------------------------------------------------ buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 48px;
  padding: 0 var(--sp-5);
  border: 1px solid transparent;
  border-radius: var(--r-button);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 1rem;
  font-weight: 620;
  font-variation-settings: "wdth" 100, "wght" 620;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--snap) linear, border-color var(--snap) linear;
}
.btn:hover { background: var(--btn-bg-hover); }
.btn:active { background: var(--btn-bg-press); }
.btn--secondary {
  background: transparent;
  color: var(--btn2-fg);
  border-color: var(--btn2-bd);
}
.btn--secondary:hover { background: var(--btn2-bg-hover); border-color: var(--btn2-bd-hover); }
.btn--secondary:active { background: var(--btn2-bg-hover); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .38; cursor: not-allowed; }
.btn--strip { min-height: 40px; padding: 0 var(--sp-4); font-size: .9375rem; }

.text-action {
  font-weight: 620;
  font-variation-settings: "wdth" 100, "wght" 620;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.text-action:hover { text-decoration-color: var(--link-hover); }

/* loading: SYNC… with three segments */
.btn__sync { display: none; align-items: center; gap: var(--sp-2); }
.btn.is-loading .btn__label { display: none; }
.btn.is-loading .btn__sync { display: inline-flex; }
.btn__sync-label {
  font-stretch: 75%; font-weight: 600; font-variation-settings: "wdth" 75, "wght" 600;
  letter-spacing: .06em; font-size: var(--fs-osd);
}
.seg { display: inline-flex; gap: 3px; }
.seg i { width: 6px; height: 6px; background: currentColor; opacity: .35; animation: seg 900ms steps(1, end) infinite; }
.seg i:nth-child(2) { animation-delay: 300ms; }
.seg i:nth-child(3) { animation-delay: 600ms; }
@keyframes seg { 0% { opacity: 1; } 33% { opacity: .35; } }

/* ------------------------------------------------------------------ title strip */
.strip {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--strip-h);
  background: var(--video);
  border-bottom: 1px solid transparent;
}
.strip.is-scrolled, html.no-js .strip { border-bottom-color: var(--seam); }
.strip__in {
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding-inline: calc(var(--seam-w) + clamp(18px, 2.2vw, 40px));
}
.brand { display: inline-flex; align-items: center; flex: none; border-radius: var(--r-button); }
.brand__logo { height: 22px; width: auto; }
.brand__mark { display: none; height: 22px; width: 22px; }
.nav { margin-left: auto; }
.nav__list { display: flex; gap: var(--sp-1); }
.nav__list a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--sp-3);
  color: var(--osd-dim);
  font-size: .9375rem;
  font-weight: 620;
  font-variation-settings: "wdth" 100, "wght" 620;
  text-decoration: none;
  border-radius: var(--r-button);
  transition: color var(--snap) linear;
}
.nav__list a:hover { color: var(--osd); text-decoration: underline; text-decoration-color: var(--signal-hi); text-underline-offset: 6px; }

.menu { display: none; }
.menu__btn {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--sp-4);
  border: 1px solid var(--osd-dim);
  border-radius: var(--r-button);
  font-size: .9375rem;
  font-weight: 620;
  font-variation-settings: "wdth" 100, "wght" 620;
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.menu__btn::-webkit-details-marker { display: none; }
.menu__btn::marker { content: ""; }
.menu[open] .menu__btn { background: var(--video-2); border-color: var(--osd); }
.menu__sheet {
  position: fixed;
  top: var(--strip-h);
  left: 0; right: 0; bottom: 0;
  z-index: 39;
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  padding: var(--sp-3) var(--gutter) var(--sp-6);
  background: var(--video);
  border-top: 1px solid var(--seam);
  overflow-y: auto;
}
.menu__list li { border-bottom: 1px solid var(--seam); }
.menu__list a {
  display: flex;
  align-items: center;
  min-height: 60px;
  font-size: 1.25rem;
  font-weight: 620;
  font-variation-settings: "wdth" 100, "wght" 620;
  text-decoration: none;
}
.menu__cta { width: 100%; }

@media (max-width: 959px) {
  .nav { display: none; }
  .menu { display: block; }
  .btn--strip { margin-left: auto; }
  .strip__in { gap: var(--sp-3); }
}
@media (max-width: 419px) {
  .brand__logo { display: none; }
  .brand__mark { display: block; }
}
html.menu-open { overflow: hidden; }

/* ------------------------------------------------------------------ channels and cells */
.cell, .channel {
  position: relative;
  background: var(--video);
  border-radius: var(--r-channel);
  box-shadow: var(--highlight);
  min-width: 0;
}
.channel { border: var(--seam-w) solid var(--bezel); border-radius: calc(var(--r-channel) + var(--seam-w)); }
.cell.field--signal, .channel.field--signal { background: var(--signal); }

.osd-top, .osd-bottom {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-3);
  color: var(--osd);
}
.osd-top { padding: var(--sp-3) var(--sp-4) 0; }
.osd-bottom { padding: 0 var(--sp-4) var(--sp-3); }
.osd-ch { color: var(--osd-dim); }
.field--signal .osd-ch { color: var(--signal-ink); }
.osd-right { margin-left: auto; color: var(--osd-dim); }
.osd-top .stamp--time { margin-left: auto; }

.stamp { display: inline-block; }
.stamp--time { color: var(--stamp); }
.stamp--sample {
  color: var(--stamp);
  background: var(--video);
  padding: 2px 6px 1px;
  line-height: 1.25;
}
.stamp--period { color: var(--osd-dim); white-space: nowrap; }
.stamp--sample + .stamp--period { margin-left: calc(-1 * var(--sp-3)); }

.caption {
  font-size: var(--fs-caption);
  line-height: 1.3;
  font-weight: 620;
  font-variation-settings: "wdth" 100, "wght" 620;
  text-wrap: balance;
}
.caption__sub { display: block; font-size: var(--fs-small); color: var(--osd-dim); font-weight: 420; font-variation-settings: "wdth" 100, "wght" 420; margin-top: 2px; }
.caption__sub .sep { display: none; }

.chev-i {
  display: inline-block;
  width: .42em;
  height: .42em;
  margin: 0 .4em .1em 0;
  border-top: 2px solid var(--signal-hi);
  border-right: 2px solid var(--signal-hi);
  transform: rotate(45deg);
  vertical-align: middle;
}
.stops { white-space: normal; }
.stop { white-space: nowrap; }

.tri {
  display: inline-block;
  width: 0; height: 0;
  border-left: .34em solid transparent;
  border-right: .34em solid transparent;
  border-bottom: .6em solid currentColor;
  margin-right: .22em;
  vertical-align: .06em;
}
.tri--down { border-bottom: 0; border-top: .6em solid currentColor; }
.tri--l { border-left-width: .24em; border-right-width: .24em; border-bottom-width: .42em; vertical-align: .16em; }
.delta--gain, .rising, .compare .tri, .cmp__head .tri { color: var(--gain); }
.delta--loss { color: var(--loss); }

/* ------------------------------------------------------------------ the wall */
.wall {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: 1.12fr 1.12fr .86fr;
  gap: var(--seam-w);
  padding: var(--seam-w);
  background: var(--bezel);
  min-height: min(calc(100vh - var(--strip-h)), 860px);
  min-height: min(calc(100svh - var(--strip-h)), 860px);
}
.wall .cell { display: flex; flex-direction: column; overflow: hidden; }
.cell__link {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
}
.cell__link:hover, .cell__link:focus-visible { box-shadow: inset 0 0 0 1px var(--signal-hi); outline: none; }
.cell__link:focus-visible { box-shadow: inset 0 0 0 2px var(--signal-hi), inset 0 0 0 4px var(--osd); }
.cell__link:hover ~ .osd-top .osd-ch,
.cell__link:focus-visible ~ .osd-top .osd-ch { color: var(--osd); }

/* CH 00 */
.cell--hero { grid-column: 1 / 3; grid-row: 1 / 3; padding: clamp(18px, 2.2vw, 40px); }
.cell--hero .osd-top, .cell--hero .osd-bottom { padding: 0; }
.cell--hero .cell__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(16px, 2vh, 28px);
  padding: clamp(12px, 2vh, 28px) 0;
}
.cell--hero .h1 { max-width: 17ch; }
.hero__sub { font-size: var(--fs-lead); line-height: 1.5; max-width: 34em; color: var(--osd); text-wrap: pretty; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.proof-row { display: block; color: var(--osd); line-height: 1.45; }
.proof-row > span:not(.sep) { white-space: nowrap; }

/* CH 05: one scene across four monitors */
.cell--proof { grid-column: 3 / 5; grid-row: 1 / 3; display: block; }
.proof__view { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.scene, .scene-fallback { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene-fallback { overflow: visible; }
.scene { z-index: 1; }
.scene-fallback { z-index: 0; }
.scene.is-drawn ~ .scene-fallback { visibility: hidden; }
.seams { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.seams::before, .seams::after { content: ""; position: absolute; background: var(--bezel); }
.seams::before { top: 0; bottom: 0; left: calc(50% - 1.5px); width: var(--seam-w); }
.seams::after { left: 0; right: 0; top: calc(50% - 1.5px); height: var(--seam-w); }

.cell--proof .osd-top { position: absolute; top: 0; left: 0; right: 0; z-index: 3; pointer-events: none; }
.cell--proof .osd-bottom {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  justify-content: space-between; align-items: center; pointer-events: none;
}
.zone-tag {
  position: absolute;
  z-index: 3;
  left: var(--x, 71%);
  top: var(--y, 34%);
  padding: 3px 6px 2px;
  background: var(--video);
  color: var(--signal-hi);
  white-space: nowrap;
  pointer-events: none;
}
.setup__frame .zone-tag { transform: translate(12px, -50%); }
.tick-tag {
  position: absolute;
  z-index: 3;
  left: var(--x, 0);
  top: var(--y, 0);
  padding: 3px 6px 2px;
  background: var(--video);
  color: var(--osd-dim);
  white-space: nowrap;
  pointer-events: none;
}
.tick-tag--during { color: var(--osd); }
.zone-tag--door { color: var(--osd); border: 1px solid var(--seam); }
/* without the canvas, the drawing carries its own labels (OSD text on a plate); the DOM labels wait for the canvas */
.proof__view:not(.is-scene) > span { display: none; }
.scene-fallback--low { display: none; }
.proof {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  top: 50%;
  bottom: 44px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--seam-w);
  pointer-events: none;
}
.proof__main { padding: 0 var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.proof__side { padding: var(--sp-5) var(--sp-5) 0; display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.proof__side .sep { display: none; }
.proof__side .compare > span:not(.sep), .proof__side .subanswers > span:not(.sep) { display: block; }
.proof__answer { font-size: var(--fs-answer-xl); line-height: 1; margin-top: -.5em; }
.answer--xl, .proof__answer .answer {
  display: inline-block;
  line-height: 1;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(50% - .5px), transparent calc(50% - .5px), transparent calc(50% + .5px), #000 calc(50% + .5px));
  mask-image: linear-gradient(to bottom, #000 calc(50% - .5px), transparent calc(50% - .5px), transparent calc(50% + .5px), #000 calc(50% + .5px));
}
.answer-meaning { font-size: var(--fs-body); line-height: 1.4; max-width: 24em; color: var(--osd); margin-top: var(--sp-1); text-wrap: pretty; }
.compare, .subanswers { display: block; line-height: 1.45; }
.compare > span:not(.sep), .subanswers > span:not(.sep) { white-space: nowrap; }
.compare { color: var(--osd); }
.subanswers { color: var(--osd-dim); }
.osd-controls { display: inline-flex; gap: var(--sp-2); pointer-events: auto; position: relative; z-index: 5; }
.osd-btn {
  min-height: 32px;
  min-width: 64px;
  padding: 0 var(--sp-3);
  background: var(--video);
  color: var(--osd);
  border: 1px solid var(--osd-dim);
  border-radius: var(--r-button);
  cursor: pointer;
}
.osd-btn:hover { border-color: var(--osd); background: var(--video-2); }
.osd-btn[aria-pressed="true"] { border-color: var(--signal-hi); }
.osd-btn[hidden] { display: none; }
html.no-js .osd-controls { display: none; }

/* CH 01–04 */
.cell--ladder .cell__body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4) var(--sp-2);
}
.form { position: relative; flex: 1 1 0; min-height: 44px; }
.form > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.form-svg { overflow: visible; }
.form--view, .form--scene { border-radius: 2px; overflow: hidden; }
.cell--ladder .caption { flex: none; }
@media (min-width: 1200px) and (max-width: 1365px) {
  .cell--ladder .caption { font-size: 1rem; }
  .cell--ladder .caption__sub { font-size: .875rem; }
}

.wall-caption {
  max-width: none;
  padding-inline: calc(var(--seam-w) + clamp(18px, 2.2vw, 40px));
  padding-top: var(--sp-3);
  font-size: var(--fs-small);
  color: var(--osd-dim);
}

/* power-on: every channel but CH 00 starts as a flat no-signal field */
html.pw .wall .cell:not([data-ch="00"]):not(.is-locked) { background: var(--signal); box-shadow: none; }
html.pw .wall .cell:not([data-ch="00"]):not(.is-locked) > :not(.osd-bottom),
html.pw .wall .cell:not([data-ch="00"]):not(.is-locked) > .osd-bottom > :not(.stamp--sample) { visibility: hidden; }

/* tablet wall */
@media (max-width: 1199px) {
  .wall {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto repeat(2, clamp(210px, 29vw, 300px)) repeat(2, minmax(200px, auto));
    min-height: 0;
  }
  .cell--hero { grid-column: 1 / -1; grid-row: 1; }
  .cell--hero .h1 { max-width: 16ch; }
  .cell--proof { grid-column: 1 / -1; grid-row: 2 / 4; }
}

/* phone wall: H1 block, CH 05, actions, sub, proof row, CH 01–04 */
@media (max-width: 599px) {
  .wall { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; row-gap: 0; }
  .wall .cell--hero, .wall .cell--hero .cell__body { display: contents; }
  .cell--hero > .osd-top, .cell--hero .h1, .cell--hero .hero__ctas, .cell--hero .hero__sub, .cell--hero > .osd-bottom {
    grid-column: 1 / -1;
    background: var(--signal);
    padding-inline: var(--sp-4);
    margin: 0;
    max-width: none;
  }
  .cell--hero > .osd-top { order: 1; padding-top: var(--sp-4); border-radius: var(--r-channel) var(--r-channel) 0 0; }
  .cell--hero .h1 { order: 2; padding-top: var(--sp-3); padding-bottom: var(--sp-5); border-radius: 0 0 var(--r-channel) var(--r-channel); }
  /* CH 05: two monitors stacked, the answer in the upper one and the picture in the lower one (--lower-h tall);
     the scene runs under the seam, as on the wall */
  .cell--proof { --lower-h: 288px; order: 3; grid-column: 1 / -1; grid-row: auto; margin-block: var(--seam-w); display: block; padding-bottom: var(--lower-h); }
  .cell--hero .hero__ctas { order: 4; padding-top: var(--sp-5); border-radius: var(--r-channel) var(--r-channel) 0 0; }
  .cell--hero .hero__ctas .btn { flex: 1 1 100%; }
  .cell--hero .hero__sub { order: 5; padding-top: var(--sp-5); padding-bottom: var(--sp-4); }
  .cell--hero > .osd-bottom { order: 6; padding-bottom: var(--sp-4); border-radius: 0 0 var(--r-channel) var(--r-channel); }
  .cell--ladder { order: 7; margin-top: var(--seam-w); min-height: 188px; }

  .seams::before { display: none; }
  .seams::after { top: calc(100% - var(--lower-h) - 1.5px); }
  .cell--proof .osd-top { position: relative; }
  .proof { position: relative; inset: auto; display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4) var(--sp-5); }
  .proof__main, .proof__side { padding: 0; }
  .proof__side { gap: var(--sp-2); }
  .proof__side .sep { display: inline; }
  .proof__side .compare > span:not(.sep), .proof__side .subanswers > span:not(.sep) { display: inline; }
  .proof__answer { margin-top: 0; }
  .proof__answer .answer { -webkit-mask-image: none; mask-image: none; }
  .zone-tag, .tick-tag { font-size: .75rem; }
  .scene-fallback[data-fallback="lockon"] { display: none; }
  .scene-fallback--low { display: block; top: auto; height: var(--lower-h); }
  .cell--ladder .osd-top { font-size: .75rem; }
  .cell--ladder .caption { font-size: 1rem; }
}

/* ------------------------------------------------------------------ geometry (scene fallbacks, views, forms) */
.scene-fallback *, .route *, .setup-view *, .form-svg *, .days__line * { vector-effect: non-scaling-stroke; }
.g-grid { stroke: var(--seam); stroke-width: 1; fill: none; }
.g-floor { stroke: var(--seam); stroke-width: 1.5; fill: none; }
.g-edge { stroke: var(--seam); stroke-width: 1; fill: none; }
.g-side { stroke: var(--seam); fill: var(--video); }
.g-top, .g-counter { fill: var(--video-2); stroke: var(--seam); stroke-width: 1; }
.g-zone { stroke: var(--signal-hi); stroke-width: 2; fill: none; }
.g-zfill { fill: var(--signal); fill-opacity: .35; stroke: none; }
.g-ptop { fill: var(--signal); stroke: none; }
.g-psid, .g-psid2 { fill: var(--signal-deep); stroke: none; }
.g-pedge { stroke: var(--signal-hi); stroke-width: 1; fill: none; }
.g-ghost { stroke: var(--osd); stroke-width: 1.5; stroke-dasharray: 4 3; fill: none; }
.g-tick { stroke: var(--osd); stroke-width: 1.5; fill: none; }
.g-dot { fill: var(--osd-dim); }
.g-trail { stroke: var(--osd-dim); stroke-opacity: .3; stroke-width: 1.5; fill: none; }
.g-mk { fill: var(--osd); }
.g-r1 { fill: var(--ramp-1); }
.g-r2 { fill: var(--ramp-2); }
.g-r3 { fill: var(--ramp-3); }
.g-r4 { fill: var(--ramp-4); }
.g-r5 { fill: var(--ramp-5); }
.g-zone1 { stroke: var(--signal-hi); stroke-width: 1; fill: none; }
.g-nd { stroke: var(--osd-dim); stroke-width: 1.5; stroke-dasharray: 4 6; fill: none; }
.g-door { stroke: var(--osd); stroke-width: 2; fill: none; stroke-linecap: square; }
.g-rline { stroke: var(--signal-hi); stroke-width: 3; fill: none; stroke-linecap: square; stroke-linejoin: miter; }
.g-rpt { stroke: var(--signal-hi); stroke-width: 6; stroke-linecap: square; fill: none; }
.g-draw { stroke: var(--signal-hi); stroke-width: 2; fill: var(--signal); fill-opacity: .35; stroke-linejoin: miter; }
.g-lline { stroke: var(--signal-hi); stroke-width: 2; fill: none; stroke-linejoin: miter; }
.g-label { pointer-events: none; }
.g-plate { fill: var(--video); stroke: none; }
.g-ltext {
  fill: var(--osd);
  font-family: var(--font);
  font-stretch: 75%;
  font-weight: 600;
  font-variation-settings: "wdth" 75, "wght" 600;
  letter-spacing: .06em;
  font-feature-settings: "tnum", "zero", "case";
}
.g-ltext--hi { fill: var(--signal-hi); }
.g-ltext--dim { fill: var(--osd-dim); }
.g-ltext--osd { fill: var(--osd); }

.f-wall { stroke: var(--osd-dim); stroke-width: 4; fill: none; }
.f-door { stroke: var(--signal-hi); stroke-width: 2; fill: none; }
.f-in { stroke: var(--osd); stroke-width: 1.5; fill: none; }
.f-out { stroke: var(--osd-dim); stroke-width: 1.5; fill: none; }
.f-mark { fill: var(--osd); }
.f-mark--dim { fill: var(--osd-dim); }
.f-outline { stroke: var(--osd-dim); stroke-width: 1.5; fill: none; }
.f-dots { fill: var(--osd); }
.f-hot { fill: var(--signal-hi); }
.f-zone { fill: none; stroke: var(--signal-hi); stroke-width: 1; stroke-dasharray: 3 3; }
.f-shelf { fill: var(--video-2); stroke: var(--seam); stroke-width: 1; }
.f-grid { stroke: var(--seam); stroke-width: 1; fill: none; }
.f-line { stroke: var(--signal-hi); stroke-width: 2; fill: none; }

/* ------------------------------------------------------------------ sales vs display */
.sales { padding-top: var(--sp-8); }
.sales .h2 { max-width: 20ch; }
.instrument-fig { display: grid; gap: var(--sp-3); }
@media (min-width: 600px) and (max-width: 959px) { .frag--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.measure { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-3); padding: var(--sp-4) var(--sp-4) var(--sp-5); color: var(--osd); }
.measure__key { flex: 0 0 100%; color: var(--osd-dim); }
.measure__key + .sep { display: none; }
.measure__val { display: inline-flex; align-items: baseline; gap: var(--sp-2); white-space: nowrap; }
.measure__num { font-size: var(--fs-answer-m); line-height: 1; color: var(--osd); }
.measure__num--hi { color: var(--signal-hi); }
.instrument > .osd-bottom { padding-top: var(--sp-1); }

/* ------------------------------------------------------------------ offers (the CH 05 report) */
.report > .osd-bottom, .defs-ch > .osd-bottom { padding-top: var(--sp-3); }
@media (min-width: 960px) { .frag--offers { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); } }
.cmp { padding: var(--sp-5) var(--sp-4) var(--sp-6); display: grid; gap: var(--sp-5); align-content: start; min-width: 0; }
@media (min-width: 960px) { .cmp { padding: var(--sp-6); } }
.cmp__head { color: var(--osd); line-height: 1.45; }
.cmp__head > span:not(.sep) { white-space: nowrap; }
.cmp__group { display: grid; gap: var(--sp-2); }
.cmp__title { color: var(--osd-dim); margin-bottom: var(--sp-1); }
.cmp__row { display: grid; grid-template-columns: 96px minmax(0, 1fr) minmax(128px, auto); gap: var(--sp-3); align-items: center; }
.cmp__key { color: var(--osd-dim); }
.cmp__row--during .cmp__key { color: var(--osd); }
.cmp__track { position: relative; height: 22px; }
.cmp__bar { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 0 2px 2px 0; }
.cmp__bar--before { border: 1px solid var(--osd-dim); }
.cmp__bar--during { background: var(--signal); }
.cmp__bar--402 { width: calc(402 / 600 * 100%); }
.cmp__bar--426 { width: calc(426 / 600 * 100%); }
.cmp__bar--526 { width: calc(526 / 600 * 100%); }
.cmp__bar--s1361 { width: calc(1361 / 1500 * 100%); }
.cmp__bar--s1384 { width: calc(1384 / 1500 * 100%); }
.cmp__base { position: absolute; top: -4px; bottom: -4px; left: calc(414 / 600 * 100%); border-left: 1px dashed var(--osd); }
.cmp__val { color: var(--osd); white-space: nowrap; }
.cmp__val .delta { margin-left: var(--sp-2); }

.defs { padding: var(--sp-5) var(--sp-4); display: grid; gap: var(--sp-5); align-content: start; }
@media (min-width: 960px) { .defs { padding: var(--sp-5) var(--sp-5) var(--sp-6); } }
.defs dt { color: var(--osd); margin-bottom: var(--sp-1); display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); }
.defs__val { font-size: 1.5rem; line-height: 1; letter-spacing: -.01em; text-transform: none; white-space: nowrap; }
.defs__val.delta--gain { color: var(--gain); }
.answer .unit { font-size: .5em; letter-spacing: .04em; margin-left: .06em; font-variation-settings: "wdth" 75, "wght" 600; }
.defs__note { font-size: var(--fs-osd); font-variation-settings: "wdth" 75, "wght" 600; letter-spacing: .06em; color: var(--osd-dim); }
.defs dd { font-size: var(--fs-small); line-height: 1.5; color: var(--osd-dim); }

@media (max-width: 599px) {
  .cmp__row { grid-template-columns: 76px minmax(0, 1fr); }
  .cmp__val { grid-column: 2; margin-top: -4px; }
}

/* ------------------------------------------------------------------ launches */
.launches .section__title { max-width: 24ch; }
.days { position: relative; margin: var(--sp-3) var(--sp-4) 0; height: clamp(200px, 22vw, 260px); }
.days__cells { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); }
.day {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-2);
  border-left: 1px solid var(--seam);
}
.day:last-child { border-right: 1px solid var(--seam); }
.day__n { color: var(--osd-dim); white-space: nowrap; }
.day__v { font-size: 1.125rem; line-height: 1; color: var(--osd); }
.day::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(36px + var(--t) * (100% - 76px));
  width: 6px; height: 6px;
  margin: -3px 0 0 -3px;
  background: var(--signal-hi);
}
.day--01 { --t: .82; } .day--02 { --t: .79; } .day--03 { --t: .74; } .day--04 { --t: .76; }
.day--05 { --t: .67; } .day--06 { --t: .61; } .day--07 { --t: .49; } .day--08 { --t: .53; }
.day--09 { --t: .50; } .day--10 { --t: .42; } .day--11 { --t: .38; } .day--12 { --t: .34; }
.day--13 { --t: .29; } .day--14 { --t: .24; }
.day--14 .day__n, .day--14 .day__v { color: var(--osd); }
.days__line { position: absolute; left: 0; right: 0; top: 36px; bottom: 40px; width: 100%; height: calc(100% - 76px); pointer-events: none; }
@media (min-width: 960px) { .frag--launch { grid-template-columns: minmax(0, 3fr) minmax(220px, 1fr); } }
.days { flex: none; }
.launch > .osd-bottom { padding-top: var(--sp-3); }
.launch__stamps { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: var(--sp-4); padding: var(--sp-5) var(--sp-4); color: var(--osd); line-height: 1.25; }
.launch__stamps > span:not(.sep) { display: flex; align-items: baseline; gap: var(--sp-2); white-space: nowrap; }
.launch__stamps .sep { display: none; }
.launch__stamps .answer { font-size: var(--fs-answer-m); line-height: 1; color: var(--osd); }
.launch__stamps .rising { align-items: center; font-size: 1.125rem; }
@media (min-width: 600px) and (max-width: 959px) { .launch__stamps { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: var(--sp-4) var(--sp-6); } }
.launch__text { display: grid; gap: var(--sp-3); margin-top: var(--sp-5); padding-left: calc(var(--seam-w) + var(--sp-4)); }
@media (max-width: 719px) {
  .day { padding-left: 0; align-items: center; }
  .day__w { display: none; }
  .day__v { font-size: .8125rem; }
  .day:not(.day--01):not(.day--14) .day__v { visibility: hidden; }
  .day__n { font-size: .6875rem; letter-spacing: 0; }
}

/* ------------------------------------------------------------------ corners */
.corners__lead, .busy { display: grid; gap: var(--sp-4); align-content: start; }
@media (min-width: 960px) {
  .section__head--corners, .frag--corners { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .section__head--corners { column-gap: var(--seam-w); align-items: end; }
  .corners__lead { padding-right: var(--sp-7); }
}
.section__head--corners { row-gap: var(--sp-6); }
.map__view { position: relative; margin: var(--sp-3) var(--sp-3) 0; aspect-ratio: 2 / 1; overflow: hidden; border-radius: 2px; }
@media (max-width: 719px) { .map__view { aspect-ratio: 16 / 10; } }
.map__view .scene-fallback { position: absolute; inset: 0; }
.zone-labels { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.zone-label {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding: 4px 8px 3px;
  background: var(--video);
  border: 1px solid var(--seam);
  color: var(--osd);
  white-space: nowrap;
}
.zone-label__rank { color: var(--video); background: var(--osd); min-width: 1.5em; text-align: center; padding: 0 3px; font-weight: 700; font-variation-settings: "wdth" 75, "wght" 700; }
.zone-label__hit { color: var(--osd-dim); }
.zone-label--ranked .zone-label__hit { color: var(--osd); font-weight: 700; font-variation-settings: "wdth" 75, "wght" 700; }
/* Every zone carries a marker on its centre, numbered with the zone's rank (unranked zones: an empty dashed
   marker), and each name plate hangs off its own marker on a 1 px leader. With the script, scene.js sets the markers'
   --x/--y to the zone centres and the plates' to their corners and draws the leaders; without it, the generated block
   below puts each marker on its zone and hangs each plate off its marker (margin, translate), ::before drawing the
   leader from the plate back to the marker's edge. */
.zone-mark {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  font-size: .75rem;
  line-height: 1;
  letter-spacing: 0;
  font-weight: 700;
  font-variation-settings: "wdth" 75, "wght" 700;
  color: var(--video);
  background: var(--osd);
}
.zone-mark:not(.zone-mark--ranked) { background: var(--video); border: 1px dashed var(--osd-dim); }
.map__view:not(.is-scene) .zone-label::before { content: ""; position: absolute; height: 1px; background: var(--signal-hi); transform-origin: 0 0; }
.map__view.is-scene .zone-label { margin: 0; transform: none; }
/* 16:10 crops the 2:1 drawing to its middle 80% */
@media (max-width: 719px) { .map__view:not(.is-scene) :is(.zone-label, .zone-mark) { left: calc(50% + (var(--x) - 50%) * 1.25); } }
/* zone plates without the script: generated by scripts/web_scene_fallbacks.mjs */
.zone-mark[data-zone="fresh"] { --x: 62.2%; --y: 17.1%; }
.zone-mark[data-zone="aisle2"] { --x: 53.45%; --y: 46.6%; }
.zone-mark[data-zone="aisle4"] { --x: 68.95%; --y: 25%; }
.zone-mark[data-zone="entrance"] { --x: 66.1%; --y: 75.3%; }
.zone-mark[data-zone="checkout"] { --x: 77.6%; --y: 23%; }
.zone-mark[data-zone="household"] { --x: 55%; --y: 22.9%; }
.zone-label[data-zone="fresh"] { --x: 62.2%; --y: 17.1%; margin: -33.25px 0 0 -19.2px; transform: translate(-100%, -50%); }
.zone-label[data-zone="fresh"]::before { left: calc(100% + 1px); top: 50%; width: 28px; transform: rotate(60deg); }
.zone-label[data-zone="aisle2"] { --x: 53.45%; --y: 46.6%; margin: 16.27px 0 0 44.71px; transform: translate(0, -50%); }
.zone-label[data-zone="aisle2"]::before { left: -1px; top: 50%; width: 38px; transform: rotate(-160deg); }
.zone-label[data-zone="aisle4"] { --x: 68.95%; --y: 25%; margin: 22.52px 0 0 -7.96px; transform: translate(0, 0); }
.zone-label[data-zone="aisle4"]::before { left: 13px; top: -1px; width: 14px; transform: rotate(-105deg); }
.zone-label[data-zone="entrance"] { --x: 66.1%; --y: 75.3%; margin: -25.17px 0 0 -69.14px; transform: translate(-100%, -50%); }
.zone-label[data-zone="entrance"]::before { left: calc(100% + 1px); top: 50%; width: 64px; transform: rotate(20deg); }
.zone-label[data-zone="checkout"] { --x: 77.6%; --y: 23%; margin: -28.32px 0 0 7.59px; transform: translate(-50%, -100%); }
.zone-label[data-zone="checkout"]::before { left: 50%; top: calc(100% + 1px); width: 20px; transform: rotate(105deg); }
.zone-label[data-zone="household"] { --x: 55%; --y: 22.9%; margin: 26.32px 0 0 -15.2px; transform: translate(-100%, -50%); }
.zone-label[data-zone="household"]::before { left: calc(100% + 1px); top: 50%; width: 20px; transform: rotate(-60deg); }
@media (min-width: 960px) and (max-width: 1199px) {
  .zone-label[data-zone="fresh"] { margin: 0 0 0 -109px; transform: translate(-100%, -50%); }
  .zone-label[data-zone="fresh"]::before { left: calc(100% + 1px); top: 50%; width: 100px; transform: rotate(0deg); }
  .zone-label[data-zone="aisle2"] { margin: 31.98px 0 0 -38.11px; transform: translate(-100%, -50%); }
  .zone-label[data-zone="aisle2"]::before { left: calc(100% + 1px); top: 50%; width: 38px; transform: rotate(-40deg); }
  .zone-label[data-zone="aisle4"] { margin: 45.69px 0 0 -125.52px; transform: translate(-100%, -50%); }
  .zone-label[data-zone="aisle4"]::before { left: calc(100% + 1px); top: 50%; width: 124px; transform: rotate(-20deg); }
  .zone-label[data-zone="entrance"] { margin: 0 0 0 -73px; transform: translate(-100%, -50%); }
  .zone-label[data-zone="entrance"]::before { left: calc(100% + 1px); top: 50%; width: 64px; transform: rotate(0deg); }
  .zone-label[data-zone="checkout"] { margin: 22.52px 0 0 6.04px; transform: translate(-50%, 0); }
  .zone-label[data-zone="checkout"]::before { left: 50%; top: -1px; width: 14px; transform: rotate(-105deg); }
  .zone-label[data-zone="household"] { margin: 16.27px 0 0 -44.71px; transform: translate(-100%, -50%); }
  .zone-label[data-zone="household"]::before { left: calc(100% + 1px); top: 50%; width: 38px; transform: rotate(-20deg); }
}
@media (min-width: 720px) and (max-width: 959px) {
  .zone-label[data-zone="fresh"] { margin: -23px 0 0 14px; transform: translate(-100%, -100%); }
  .zone-label[data-zone="fresh"]::before { left: calc(100% - 13px); top: calc(100% + 1px); width: 14px; transform: rotate(90deg); }
  .zone-label[data-zone="aisle2"] { margin: 20.38px 0 0 55.98px; transform: translate(0, -50%); }
  .zone-label[data-zone="aisle2"]::before { left: -1px; top: 50%; width: 50px; transform: rotate(-160deg); }
  .zone-label[data-zone="aisle4"] { margin: 22.52px 0 0 -7.96px; transform: translate(0, 0); }
  .zone-label[data-zone="aisle4"]::before { left: 13px; top: -1px; width: 14px; transform: rotate(-105deg); }
  .zone-label[data-zone="entrance"] { margin: -25.17px 0 0 -69.14px; transform: translate(-100%, -50%); }
  .zone-label[data-zone="entrance"]::before { left: calc(100% + 1px); top: 50%; width: 64px; transform: rotate(20deg); }
  .zone-label[data-zone="checkout"] { margin: -28.32px 0 0 7.59px; transform: translate(-50%, -100%); }
  .zone-label[data-zone="checkout"]::before { left: 50%; top: calc(100% + 1px); width: 20px; transform: rotate(105deg); }
  .zone-label[data-zone="household"] { margin: 25.55px 0 0 -30.45px; transform: translate(-100%, -50%); }
  .zone-label[data-zone="household"]::before { left: calc(100% + 1px); top: 50%; width: 28px; transform: rotate(-40deg); }
}
@media (min-width: 600px) and (max-width: 719px) {
  .zone-label[data-zone="fresh"] { margin: -22.52px 0 0 -20.04px; transform: translate(0, -100%); }
  .zone-label[data-zone="fresh"]::before { left: 13px; top: calc(100% + 1px); width: 14px; transform: rotate(75deg); }
  .zone-label[data-zone="aisle2"] { margin: 16.27px 0 0 44.71px; transform: translate(0, -50%); }
  .zone-label[data-zone="aisle2"]::before { left: -1px; top: 50%; width: 38px; transform: rotate(-160deg); }
  .zone-label[data-zone="aisle4"] { margin: 30.64px 0 0 -84.18px; transform: translate(-100%, -50%); }
  .zone-label[data-zone="aisle4"]::before { left: calc(100% + 1px); top: 50%; width: 80px; transform: rotate(-20deg); }
  .zone-label[data-zone="entrance"] { margin: -25.17px 0 0 -69.14px; transform: translate(-100%, -50%); }
  .zone-label[data-zone="entrance"]::before { left: calc(100% + 1px); top: 50%; width: 64px; transform: rotate(20deg); }
  .zone-label[data-zone="checkout"] { margin: 28.32px 0 0 -7.59px; transform: translate(-50%, 0); }
  .zone-label[data-zone="checkout"]::before { left: 50%; top: -1px; width: 20px; transform: rotate(-75deg); }
  .zone-label[data-zone="household"] { margin: -41.91px 0 0 -24.2px; transform: translate(-100%, -50%); }
  .zone-label[data-zone="household"]::before { left: calc(100% + 1px); top: 50%; width: 38px; transform: rotate(60deg); }
}
/* end of the generated zone plates */

.ranking { counter-reset: rank; display: grid; gap: 0; margin: var(--sp-3) var(--sp-4) 0; }
.ranking li {
  counter-increment: rank;
  display: grid;
  grid-template-columns: 2em minmax(0, 1fr) auto;
  gap: var(--sp-2);
  align-items: baseline;
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--seam);
}
/* each row starts with its zone's marker number */
.ranking li::before {
  content: counter(rank);
  align-self: center;
  justify-self: start;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  font-size: .75rem;
  line-height: 1;
  font-stretch: 75%; font-weight: 700; font-variation-settings: "wdth" 75, "wght" 700;
  font-feature-settings: "tnum", "zero", "case";
  color: var(--video);
  background: var(--osd);
}
.ranking__hit { font-size: 1.125rem; }
.map__view.is-scene ~ .ranking { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.map > .osd-bottom { padding-top: var(--sp-3); }

@media (max-width: 599px) {
  /* phones: the numbered markers are the map's only labels; the list below names them */
  .zone-label { display: none; }
  .map__view.is-scene ~ .ranking { position: static; width: auto; height: auto; margin: var(--sp-3) var(--sp-4) 0; overflow: visible; clip-path: none; white-space: normal; }
}

.busy__body { flex: 1; padding: var(--sp-4) var(--sp-4) var(--sp-3); display: grid; gap: var(--sp-3); align-content: center; }
.busy__grid { display: grid; gap: 2px; }
.busy__row { display: grid; grid-template-columns: 40px repeat(24, minmax(0, 1fr)); gap: 2px; align-items: center; }
.busy__day { color: var(--osd-dim); }
.hr { color: var(--osd-dim); font-size: .6875rem; letter-spacing: .02em; }
.h { display: block; height: clamp(18px, 2.4vw, 30px); background: var(--video-2); border-radius: 1px; }
.h--0 { background: var(--video-2); }
.h--1 { background: var(--ramp-2); }
.h--2 { background: var(--ramp-3); }
.h--3 { background: var(--ramp-4); }
.h--4 { background: var(--ramp-5); }
.h--peak { box-shadow: inset 0 0 0 2px var(--video), 0 0 0 1px var(--osd); }
.busy__peak { display: flex; align-items: center; gap: var(--sp-2); color: var(--osd); }
.busy__peak-mark { width: 10px; height: 10px; background: var(--osd); box-shadow: inset 0 0 0 2px var(--video), 0 0 0 1px var(--osd); }
.busy__line { color: var(--osd-dim); }
@media (max-width: 599px) {
  .busy__row { grid-template-columns: 32px repeat(24, minmax(0, 1fr)); gap: 1px; }
  .hr { font-size: .5625rem; }
}

/* ------------------------------------------------------------------ route */
.route-view__frame { position: relative; margin: var(--sp-3) var(--sp-3) 0; aspect-ratio: 5 / 2; overflow: hidden; border-radius: 2px; container-type: size; }
/* the drawing is fitted (meet) into the frame: one drawing unit is the smaller of the two fits */
.zone-tag--route { --u: min(100cqw / 760, 100cqh / 455); left: calc(50% - 205 * var(--u)); top: calc(50% + 187.5 * var(--u)); transform: translateY(-50%); }
@media (min-width: 960px) { .frag--route { grid-template-columns: minmax(0, 3fr) minmax(240px, 1fr); } }
.route-cap .route-view__cap { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: var(--sp-3); padding: var(--sp-4); }
.route-cap .stops { display: grid; gap: var(--sp-2); }
.route-cap .stop { display: block; }
.route-cap .route-view__cap .sep { display: none; }
.route-cap .route-view__cap .dim { font-size: var(--fs-small); color: var(--osd-dim); }
.route--view { width: 100%; height: 100%; }
.route-view__foot { padding-top: var(--sp-3); }
.route-view__cap { font-size: var(--fs-caption); line-height: 1.3; font-weight: 620; font-variation-settings: "wdth" 100, "wght" 620; text-transform: none; letter-spacing: 0; font-stretch: 100%; }
.route-view__cap .dim { font-weight: 420; font-variation-settings: "wdth" 100, "wght" 420; }
@media (max-width: 719px) {
  .route-view__frame { aspect-ratio: 16 / 10; }
}

/* ------------------------------------------------------------------ privacy (second blue anchor, full bleed) */
.privacy.channel { border: 0; border-radius: 0; box-shadow: none; margin-top: var(--sp-9); padding-block: var(--sp-9); }
.privacy .page { display: grid; gap: var(--sp-7); }
.privacy__title { max-width: 16ch; color: var(--osd); }
@media (min-width: 900px) { .privacy__rows { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.privacy__cell { display: flex; flex-direction: column; gap: var(--sp-3); }
.privacy__cell > .osd-top { color: var(--osd); }
.privacy__text { flex: 1; padding: 0 var(--sp-4); color: var(--osd); font-size: var(--fs-body); line-height: 1.55; max-width: 44ch; }
.privacy__cell > .osd-bottom { padding-top: var(--sp-2); color: var(--osd-dim); }

.path { color: var(--osd); padding-top: 104px; }
.path__line { display: grid; grid-template-columns: auto minmax(40px, 1fr) auto minmax(40px, 1fr) auto; align-items: center; }
.path__node {
  position: relative;
  padding: var(--sp-4) var(--sp-6);
  border: 2px solid var(--osd);
  border-radius: var(--r-button);
  white-space: nowrap;
  font-size: 1rem;
}
.path__wire { height: 2px; background: var(--osd); }
.path__node--pc { background: var(--osd); color: var(--signal); }
.path__cut { position: absolute; left: 50%; bottom: 100%; width: 2px; height: 72px; margin-left: -1px; margin-bottom: 2px; }
.path__stub { position: absolute; left: 0; width: 2px; background: var(--osd); }
.path__stub:first-child { bottom: 0; height: 36px; }
.path__stub--end { bottom: 60px; height: 12px; }
.path__noup { position: absolute; left: 50%; bottom: calc(100% + 84px); transform: translateX(-50%); color: var(--osd); white-space: nowrap; }
.path__cap { margin-top: var(--sp-4); color: var(--signal-ink); text-align: right; }
@media (max-width: 719px) {
  .path { padding-top: 0; }
  .path__line { grid-template-columns: auto; justify-items: start; }
  .path__wire { width: 2px; height: 40px; margin-left: 24px; }
  .path__node { font-size: var(--fs-osd); padding: var(--sp-3) var(--sp-5); }
  .path__cut { left: 100%; bottom: auto; top: 50%; width: 72px; height: 2px; margin: -1px 0 0 2px; }
  .path__stub { top: 0; height: 2px; }
  .path__stub:first-child { left: 0; bottom: auto; width: 32px; height: 2px; }
  .path__stub--end { left: 56px; bottom: auto; width: 12px; height: 2px; }
  .path__noup { left: calc(100% + 80px); bottom: auto; top: 50%; transform: translateY(-50%); }
  .path__cap { text-align: left; }
}

/* ------------------------------------------------------------------ setup */
.setup__frame { position: relative; margin: var(--sp-3); aspect-ratio: 16 / 10; }
.setup-view { width: 100%; height: 100%; }
.zone-tag--setup { --x: 47.6%; --y: 43.7%; color: var(--signal-hi); }
.zone-tag--setup-door { --x: 36.8%; --y: 90.7%; color: var(--osd); }
.setup__ch > .osd-bottom { padding-top: 0; }
@media (min-width: 960px) { .frag--setup { grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); } }
.works-with { flex: 1; display: grid; align-content: center; padding: var(--sp-2) var(--sp-4) var(--sp-4); color: var(--osd); line-height: 1.45; }
.works-with > span:not(.sep) { padding: var(--sp-3) 0; border-bottom: 1px solid var(--seam); }
.works-with .sep { display: none; }
.langs { padding: 0 var(--sp-4) var(--sp-3); color: var(--osd-dim); font-size: var(--fs-small); }

/* ------------------------------------------------------------------ FAQ, in the NVR menu style */
.faq__grid { display: grid; gap: var(--sp-6); align-items: start; }
@media (min-width: 960px) {
  .faq__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--sp-7); }
  .faq__title { position: sticky; top: calc(var(--strip-h) + var(--sp-6)); max-width: 12ch; }
}
.faq__menu { background: var(--video-2); overflow: hidden; }
.faq__item + .faq__item { border-top: 1px solid var(--seam); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 60px;
  padding: var(--sp-3) var(--sp-5);
  font-size: 1.0625rem;
  line-height: 1.35;
  font-weight: 620;
  font-variation-settings: "wdth" 100, "wght" 620;
  list-style: none;
  cursor: pointer;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ""; }
.faq__q:hover { background: var(--bezel); }
.faq__q:focus-visible { outline-offset: -4px; box-shadow: inset 0 0 0 2px var(--osd); }
.faq__item[open] > .faq__q { background: var(--signal); }
.chev { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; stroke-linejoin: miter; transition: transform var(--snap) var(--out-expo); }
.faq__item[open] .chev { transform: rotate(90deg); }
.faq__a { padding: var(--sp-4) var(--sp-5) var(--sp-5); }
.faq__a p { max-width: var(--measure); color: var(--osd-dim); line-height: 1.6; }

/* ------------------------------------------------------------------ pilot + final call */
.section.final { padding-bottom: 0; }
.final__wall { margin-top: 0; }
.final__wall {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(170px, auto));
  gap: var(--seam-w);
  padding: var(--seam-w);
  background: var(--bezel);
}
.final__cell {
  background: var(--video);
  border-radius: var(--r-channel);
  box-shadow: var(--highlight);
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}
.final__cell .form { margin: var(--sp-3) var(--sp-4) var(--sp-2); }
.final__wall > :nth-child(1) { grid-column: 1; grid-row: 1; }
.final__wall > :nth-child(2) { grid-column: 1; grid-row: 2; }
.final__wall > :nth-child(3) { grid-column: 1; grid-row: 3; }
.final__yours { grid-column: 2 / 4; grid-row: 1 / 4; border: 0; border-radius: var(--r-channel); display: flex; flex-direction: column; }
.final__wall > :nth-child(5) { grid-column: 4; grid-row: 1; }
.final__wall > :nth-child(6) { grid-column: 4; grid-row: 2; }
.final__wall > :nth-child(7) { grid-column: 4; grid-row: 3; }
.final__yours .osd-top { padding: var(--sp-4) var(--sp-5) 0; }
.final__body { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--sp-5); padding: var(--sp-6) clamp(24px, 4vw, 64px) var(--sp-7); }
.final__title { font-size: clamp(2.2rem, 1.2rem + 3vw, 4rem); max-width: 12ch; }
.final__body .body { color: var(--osd); max-width: 46ch; }
@media (max-width: 959px) {
  .final__wall { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto repeat(2, minmax(120px, auto)); }
  .final__yours { grid-column: 1 / -1; grid-row: 1; }
  .final__wall > :nth-child(1) { grid-column: 1; grid-row: 2; }
  .final__wall > :nth-child(2) { grid-column: 2; grid-row: 2; }
  .final__wall > :nth-child(3) { grid-column: 3; grid-row: 2; }
  .final__wall > :nth-child(5) { grid-column: 1; grid-row: 3; }
  .final__wall > :nth-child(6) { grid-column: 2; grid-row: 3; }
  .final__wall > :nth-child(7) { grid-column: 3; grid-row: 3; }
}
@media (max-width: 599px) {
  .final__cell .osd-top, .final__cell .osd-bottom { font-size: .6875rem; padding: var(--sp-2) var(--sp-2) 0; }
  .final__cell .osd-bottom { padding: 0 var(--sp-2) var(--sp-2); row-gap: 2px; }
  .final__cell .stamp--period { margin-left: 0; }
  .final__cell .stamp--period .sep { display: none; }
  .final__cell .osd-name { display: none; }
  .final__cell .form { margin: var(--sp-2); min-height: 56px; }
  .final__body { padding: var(--sp-4) var(--sp-4) var(--sp-6); }
  .final__body .btn { width: 100%; }
}

.licences { background: var(--video-2); padding-block: var(--sp-8); border-top: 1px solid var(--seam); }
.licences .page { display: grid; gap: var(--sp-5); }
.licences__rows { display: grid; gap: var(--sp-4); }
@media (min-width: 900px) { .licences__rows { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6); } }
.licences__rows > div { border-top: 1px solid var(--seam); padding-top: var(--sp-3); display: grid; gap: var(--sp-1); }
.licences__rows dt { color: var(--osd); }
.licences__rows dd { color: var(--osd-dim); }
.licences__line { color: var(--osd-dim); max-width: var(--measure); }
.licences__line .text-action { color: var(--osd); }

/* ------------------------------------------------------------------ footer */
.foot { border-top: 1px solid var(--seam); padding-block: var(--sp-6); }
.foot__in { display: flex; align-items: center; gap: var(--sp-3); }
.foot__mark { width: 20px; height: 20px; flex: none; }
.foot__line { font-size: var(--fs-small); color: var(--osd-dim); }
.foot__line a { color: var(--osd); }

/* ------------------------------------------------------------------ section spacing on small screens */
@media (max-width: 719px) {
  .section { padding-top: var(--sp-8); }
  .privacy.channel { margin-top: var(--sp-8); padding-block: var(--sp-8); }
  .licences { padding-block: var(--sp-7); }
}

/* ------------------------------------------------------------------ pilot.html */
.pilot { width: 100%; max-width: calc(920px + 2 * var(--gutter)); margin-inline: auto; padding: var(--sp-7) var(--gutter) var(--sp-8); }
.pilot__field { display: grid; gap: var(--sp-6); padding: var(--sp-7) clamp(20px, 4vw, 48px); }
@media (min-width: 900px) { .pilot__field { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--sp-7); align-items: end; } }
.pilot__intro { display: grid; gap: var(--sp-5); }
.pilot__field .h1 { font-size: clamp(2.4rem, 1rem + 2.6vw, 3.6rem); }
.pilot__field .lead { max-width: 30em; color: var(--osd); }
.asks { display: grid; gap: var(--sp-3); padding-top: var(--sp-4); border-top: 2px solid var(--osd); }
.asks__label { color: var(--osd); }
.asks ul { display: grid; gap: var(--sp-2); }
.asks li { position: relative; padding-left: 20px; color: var(--osd); }
.asks li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 8px; background: var(--osd); }
@media (max-width: 599px) { .pilot { padding: 0 0 var(--sp-7); } .pilot__frag { border-radius: 0; } }

.dialog { border: var(--seam-w) solid var(--bezel); border-radius: calc(var(--r-channel) + var(--seam-w)); background: var(--video-2); overflow: hidden; }
.frag > .dialog { border: 0; border-radius: var(--r-channel); }
.dialog__strip { background: var(--signal); color: var(--osd); padding: var(--sp-3) var(--sp-5); font-size: .875rem; }
.form-body { padding: var(--sp-5) var(--sp-5) var(--sp-6); display: grid; gap: var(--sp-3); }
@media (max-width: 599px) { .form-body, .dialog__strip { padding-inline: var(--sp-4); } }
.row { display: grid; gap: 6px; align-content: start; }
.row-pair { display: grid; gap: var(--sp-3) var(--sp-4); }
@media (min-width: 600px) { .row-pair { grid-template-columns: 1fr 1fr; } }
.row > label, .row > .row__label, .fieldset legend {
  font-size: .9375rem;
  font-weight: 620;
  font-variation-settings: "wdth" 100, "wght" 620;
  color: var(--osd);
}
.opt { color: var(--osd-dim); font-weight: 420; font-variation-settings: "wdth" 100, "wght" 420; }
.input, .select, .textarea {
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  background: var(--video);
  border: 0;
  border-bottom: 1px solid var(--osd-dim);
  border-radius: 2px 2px 0 0;
  color: var(--osd);
  font-size: 1rem;
  line-height: 1.4;
}
.textarea { min-height: 112px; resize: vertical; }
.select { appearance: none; -webkit-appearance: none; padding-right: 40px; background-image: none; }
.select-wrap { position: relative; }
.select-wrap .chev { position: absolute; right: 12px; top: 50%; margin-top: -10px; transform: rotate(90deg); pointer-events: none; color: var(--osd-dim); }
.input:hover, .select:hover, .textarea:hover { border-bottom-color: var(--osd); }
.input:focus, .select:focus, .textarea:focus { outline: none; box-shadow: inset 0 -2px 0 var(--signal-hi); border-bottom-color: var(--signal-hi); }
.input[aria-invalid="true"], .textarea[aria-invalid="true"], .select[aria-invalid="true"] { border-bottom-color: var(--loss); }
.date__parts { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) minmax(0, 6fr); gap: var(--sp-2); max-width: 420px; }
.date__parts .select { padding-right: 36px; }
.input::placeholder, .textarea::placeholder { color: var(--osd-dim); opacity: 1; }
.select option { background: var(--video-2); color: var(--osd); }
.help { min-height: 1.5em; font-size: .875rem; line-height: 1.5; color: var(--osd-dim); }
.help.is-error { color: var(--loss); display: flex; gap: 6px; align-items: baseline; }
.help.is-error::before {
  content: "";
  flex: none;
  width: 0; height: 0;
  border-left: .36em solid transparent;
  border-right: .36em solid transparent;
  border-bottom: .64em solid currentColor;
}
.fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: var(--sp-2); min-width: 0; }
.fieldset legend { padding: 0; margin-bottom: 6px; }
.choices { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.choice { position: relative; display: inline-flex; }
.choice input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.choice span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 var(--sp-4) 0 var(--sp-3);
  border: 1px solid var(--seam);
  border-radius: var(--r-button);
  background: var(--video);
  font-size: .9375rem;
  cursor: pointer;
}
.choice span::before { content: ""; flex: none; width: 14px; height: 14px; border: 1px solid var(--osd-dim); border-radius: 2px; }
.choice--radio span::before { border-radius: 50%; }
.choice:hover span { border-color: var(--osd-dim); }
.choice input:checked + span { border-color: var(--signal-hi); }
.choice input:checked + span::before { background: var(--signal-hi); border-color: var(--signal-hi); box-shadow: inset 0 0 0 2px var(--video); }
.choice input:focus-visible + span { outline: 2px solid var(--signal-hi); outline-offset: 2px; box-shadow: 0 0 0 2px var(--osd); }
.consent { display: flex; gap: var(--sp-3); align-items: flex-start; position: relative; padding: var(--sp-2) 0; }
.consent input {
  flex: none;
  width: 20px; height: 20px;
  margin: 2px 0 0;
  appearance: none; -webkit-appearance: none;
  background: var(--video);
  border: 1px solid var(--osd-dim);
  border-radius: 2px;
  cursor: pointer;
}
.consent input:hover { border-color: var(--osd); }
.consent input:checked { background: var(--signal-hi); border-color: var(--signal-hi); box-shadow: inset 0 0 0 3px var(--video); }
.consent input[aria-invalid="true"] { border-color: var(--loss); }
.consent label { font-size: .9375rem; line-height: 1.5; color: var(--osd); }
.form-actions { display: flex; align-items: center; gap: var(--sp-4); margin-top: var(--sp-3); }
.form-status { min-height: 1.5em; font-size: .9375rem; line-height: 1.5; color: var(--osd); max-width: var(--measure); }
.form-status.is-error { color: var(--loss); }
.form-status a { color: var(--osd); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.done { padding: var(--sp-6) var(--sp-5) var(--sp-7); display: grid; gap: var(--sp-3); }
.done:focus { outline: none; }
.done__label { color: var(--signal-hi); }
.done__text { font-size: var(--fs-lead); line-height: 1.5; max-width: 36ch; }

/* ------------------------------------------------------------------ privacy.html (reading layout) */
.reading { padding-block: var(--sp-8) var(--sp-9); }
.reading__in { max-width: calc(var(--measure) + 2 * var(--gutter)); }
.reading .h1 { margin-bottom: var(--sp-7); }
.reading .h2 { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.25rem); margin: var(--sp-8) 0 var(--sp-4); }
.reading h2:first-of-type { margin-top: 0; }
.reading p, .reading li { color: var(--osd-dim); line-height: 1.65; }
.reading p + p, .reading p + ul, .reading ul + p { margin-top: var(--sp-4); }
.reading ul { display: grid; gap: var(--sp-2); }
.reading li { position: relative; padding-left: 20px; }
.reading li::before { content: ""; position: absolute; left: 0; top: .66em; width: 6px; height: 6px; background: var(--osd-dim); }
.reading a { color: var(--osd); }

/* ------------------------------------------------------------------ 404 */
.nosignal { min-height: calc(100vh - var(--strip-h) - 120px); display: grid; place-items: center; padding: var(--sp-8) var(--gutter); }
.nosignal__ch { width: min(100%, 760px); aspect-ratio: 16 / 10; display: flex; flex-direction: column; }
.nosignal__ch .osd-top { padding: var(--sp-4) var(--sp-5) 0; }
.nosignal__body { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--sp-5); padding: var(--sp-6) clamp(24px, 5vw, 56px); }
.nosignal__tri { width: 40px; height: 36px; fill: none; stroke: var(--osd); stroke-width: 2; stroke-linejoin: miter; }
.nosignal .h1 { font-size: clamp(2rem, 1rem + 2.6vw, 3.4rem); max-width: 14ch; }
@media (max-width: 599px) { .nosignal__ch { aspect-ratio: auto; min-height: 420px; } }

/* ------------------------------------------------------------------ reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; animation-iteration-count: 1 !important; }
  .seg i { opacity: 1; }
}

@media print {
  .strip, .menu, .osd-controls, .skip { display: none !important; }
  body, .channel, .cell { background: #fff !important; color: #000 !important; }
}