/* TABL Portal "Daylight" design system (approved 2026-09-27).
   Port of design/daylight-mockups/mockup.css + states.css onto the production hook classes.
   Breakpoints: 1100 (nav collapse, screens switcher, digital-menu iframe/poster), 960 (hero stacks,
   2-col grids), 720 (phone layouts), 400 (16px gutters). JS media queries use the same numbers.
   ponytail: styles.css + footer-mobile.css are unreferenced now; delete them next release. */

@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/instrument-sans-var-latin-v1.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/fonts/atkinson-hyperlegible-400-v1.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/fonts/atkinson-hyperlegible-700-v1.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --paper: #EFECE6;
  --surface: #F9F7F3;
  --sunk: #E7E3DA;
  --ink: #0B1726;
  --ink-2: #334155;
  --ink-3: #5A6576;
  --line: #D9D4CA;
  --line-strong: #C8C2B6;
  --field-border: #80858D;
  --accent: #0052E0;
  --accent-hover: #0041B8;
  --accent-bright: #0A6BFE;
  --accent-wash: #E3EBFA;
  --accent-line: #B9CEFA;
  --bezel: #0E1A2A;
  --go: #178A4B;
  --amber: #B86E00;
  --danger: #B42318;
  --frost: #FBFEFF;
  --frost-2: #A9B4C4;
  --night-line: rgba(251, 254, 255, 0.12);
  --night-raised: #13223A;
  --scrim: rgba(11, 23, 38, 0.48);
  /* Top of the J's demo page (v2.6.61), sampled left and right from the poster and the live iframe:
     the digital-menu phone's status bar sits on it. Re-sample when the poster is re-captured. */
  --demo-top: #EDD8C9;
  --demo-top-end: #F1E1D6;

  --font-display: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Atkinson Hyperlegible", Verdana, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Roboto Mono", monospace;

  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 44px;

  --e1: 0 1px 2px rgba(11, 23, 38, 0.06);
  --e2: 0 1px 2px rgba(11, 23, 38, 0.06), 0 8px 24px -8px rgba(11, 23, 38, 0.14);
  --e3: 0 2px 4px rgba(11, 23, 38, 0.08), 0 28px 56px -18px rgba(11, 23, 38, 0.32);

  --container: 1180px;
  --container-wide: 1280px;
  --gutter: 32px;
  --section-pad: clamp(72px, 9vw, 128px);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* TABL four-square mark: three ink tiles, one bright tile top-right. */
  --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Crect width='5' height='5' rx='1.2' fill='%230B1726'/%3E%3Crect x='7' width='5' height='5' rx='1.2' fill='%230A6BFE'/%3E%3Crect y='7' width='5' height='5' rx='1.2' fill='%230B1726'/%3E%3Crect x='7' y='7' width='5' height='5' rx='1.2' fill='%230B1726'/%3E%3C/svg%3E");
  --glyph-night: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Crect width='5' height='5' rx='1.2' fill='%23A9B4C4'/%3E%3Crect x='7' width='5' height='5' rx='1.2' fill='%230A6BFE'/%3E%3Crect y='7' width='5' height='5' rx='1.2' fill='%23A9B4C4'/%3E%3Crect x='7' y='7' width='5' height='5' rx='1.2' fill='%23A9B4C4'/%3E%3C/svg%3E");
  --i-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23334155' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --i-chevron-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230052E0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 15-6-6-6 6'/%3E%3C/svg%3E");
  --i-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E");
  --i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* Big monitors: a wider column so the page doesn't float as a narrow block in the middle. */
@media (min-width: 1600px) { :root { --container: 1320px; } }
@media (max-width: 1100px) { :root { --gutter: 24px; } }
@media (max-width: 400px) { :root { --gutter: 16px; } }

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }
/* Scroll padding keeps focused elements (and native #hash jumps) clear of the sticky header. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
@media (max-width: 1100px) { html { scroll-padding-top: 72px; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body.modal-open { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; -webkit-user-drag: none; }
svg { flex: none; }
a { color: var(--accent); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-hover); }
h1, h2, h3 { margin: 0; font-family: var(--font-display); color: var(--ink); font-weight: 650; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
p, li, dd, summary { text-wrap: pretty; }
[hidden] { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: 12px; top: -48px; z-index: 100; padding: 10px 14px; background: var(--ink); color: var(--frost); border-radius: var(--r-sm); }
.skip-link:focus { top: 12px; color: var(--frost); }

.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.container--wide { width: min(100% - 2 * var(--gutter), var(--container-wide)); margin-inline: auto; }
.section, .testimonials, .compare, .screens, .features, .digital-menu, .partners, .faq { padding-block: var(--section-pad); }
.band--sunk { background: var(--sunk); }
.band--night { background: var(--ink); color: var(--frost-2); }

/* ---------- Primitives ---------- */

.icon { width: 20px; height: 20px; flex: none; stroke-width: 1.75; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px;
  border-radius: var(--r-sm); border: 1.5px solid transparent;
  font: 600 0.9375rem/1 var(--font-display); letter-spacing: -0.005em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color 120ms var(--ease), border-color 120ms var(--ease), color 120ms var(--ease), transform 120ms var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn .icon { width: 18px; height: 18px; stroke-width: 2; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); color: #fff; }
.btn-primary:disabled, .btn-primary[aria-disabled="true"] { background: var(--sunk); border-color: var(--line-strong); color: var(--ink-3); cursor: not-allowed; transform: none; }
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--field-border); }
.btn-secondary:hover { border-color: var(--ink); color: var(--ink); }
.btn-secondary:disabled { color: var(--ink-3); border-color: var(--line-strong); cursor: not-allowed; transform: none; }
.btn-night { background: transparent; color: var(--frost); border-color: rgba(251, 254, 255, 0.4); }
.btn-night:hover { border-color: var(--frost); color: var(--frost); }
.btn-ink { background: var(--ink); color: var(--frost); border-color: var(--ink); }
.btn-ink:hover { background: var(--night-raised); border-color: var(--night-raised); color: var(--frost); }
.btn-lg { min-height: 52px; padding: 0 24px; font-size: 1.0625rem; }

/* .chip / .chip-primary are the older names on pages not yet moved to .tag. */
.tag, .chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 30px; padding: 0 10px;
  border-radius: var(--r-xs); border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink-2);
  font: 500 0.8125rem/1.2 var(--font-mono); letter-spacing: 0.01em;
}
.tag--primary, .chip-primary { background: var(--accent-wash); border-color: var(--accent-line); color: var(--accent-hover); }
.tag--primary::before, .chip-primary::before { content: ""; width: 12px; height: 12px; background: var(--glyph) center / contain no-repeat; flex: none; }

.eyebrow {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 18px;
  font: 500 0.8125rem/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3);
}
/* Section numbers are set per section, not with CSS counters: content-visibility (style containment)
   scopes counters to each section, so a counter would restart at 01 in every one. */
.page-landing #testimonials { --sec: "01"; }
.page-landing #compare { --sec: "02"; }
.page-landing #screens { --sec: "03"; }
.page-landing #features { --sec: "04"; }
.page-landing #digital-menu { --sec: "05"; }
.page-landing #partners { --sec: "06"; }
.page-landing #faq { --sec: "07"; }
.page-landing main > section .section-header .eyebrow::before {
  content: var(--sec) "  /";
  white-space: pre;
  padding-left: 22px;
  background: var(--glyph) left center / 12px 12px no-repeat;
  color: var(--ink);
}
.band--night .eyebrow { color: var(--frost-2); }
.page-landing .band--night .section-header .eyebrow::before { background-image: var(--glyph-night); color: var(--frost); }

.section-header { max-width: 760px; margin-bottom: 48px; }
.section-header h2 {
  font-size: clamp(1.875rem, 1.35rem + 2.1vw, 3rem);
  line-height: 1.06; letter-spacing: -0.028em; font-stretch: 92%;
}
.section-header h2 + p {
  margin-top: 18px; max-width: 60ch;
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem); line-height: 1.55; color: var(--ink-2);
}
.band--night .section-header h2 { color: var(--frost); }
.band--night .section-header h2 + p { color: var(--frost-2); }
.section-header--split {
  max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 32px;
}
.section-header--split > div { max-width: 700px; }

/* ---------- Header / nav ---------- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251, 250, 247, 0.97);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; gap: 24px; height: 64px; }
.brand { display: flex; align-items: center; flex: none; min-height: 44px; }
.brand img { height: 30px; width: auto; }
.site-header .brand { padding: 4px 8px; border: 1px solid rgba(9, 38, 102, 0.1); border-radius: 14px; background: #fff; box-shadow: 0 2px 6px rgba(9, 38, 102, 0.06); }
.site-header .brand img { display: block; height: 34px; }
.nav-links { display: flex; align-items: center; gap: 22px; margin-left: auto; }
.nav-links > a:not(.btn) {
  font: 500 0.9375rem/1 var(--font-display); color: var(--ink-2); text-decoration: none;
  padding: 10px 0; border-bottom: 2px solid transparent;
}
.nav-links > a:not(.btn):hover { color: var(--ink); border-bottom-color: var(--accent); }
.nav-actions { display: flex; align-items: center; gap: 10px; margin-left: 6px; }
.nav-mobile-cta { background: var(--accent-wash); border-color: var(--accent-line); color: var(--accent-hover); }
.nav-mobile-cta:active, .nav-mobile-cta:focus-visible { background: var(--accent-line); border-color: var(--accent); color: var(--accent-hover); }
.nav-links .nav-calculator-cta[aria-current="page"] { background: var(--accent-wash); border-color: var(--accent-line); color: var(--accent-hover); }
@media (min-width: 1101px) and (max-width: 1279px) {
  .nav { gap: 16px; }
  .nav-links { gap: 14px; }
  .nav-links > a:not(.btn), .nav-actions .btn { font-size: 0.875rem; }
  .nav-actions { margin-left: 0; }
  .nav-actions .btn { padding-inline: 12px; }
}
.nav-toggle {
  display: none; margin-left: auto;
  width: 44px; height: 44px; padding: 0; border-radius: var(--r-sm);
  border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--ink);
  align-items: center; justify-content: center; flex-direction: column; gap: 4px; cursor: pointer;
}
.nav-toggle-bar { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transition: transform 200ms var(--ease), opacity 200ms var(--ease); }

@media (max-width: 1100px) {
  .nav { height: 56px; }
  .brand img { height: 26px; }
  .site-header .brand img { height: 30px; }
  .nav-toggle { display: inline-flex; }
  .nav-links { display: none; }
  .nav-open .nav-links {
    display: flex; position: fixed; inset: 56px 0 auto 0; z-index: 49;
    flex-direction: column; align-items: stretch; gap: 0;
    max-height: calc(100dvh - 56px); overflow-y: auto; overscroll-behavior: contain;
    padding: 8px var(--gutter) 24px; margin: 0;
    background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: var(--e3);
  }
  .nav-open .nav-links > a:not(.btn) {
    min-height: 56px; display: flex; align-items: center; flex: none;
    font-size: 1.125rem; color: var(--ink); border-bottom: 1px solid var(--line);
  }
  .nav-open .nav-actions { flex-direction: column; align-items: stretch; margin: 20px 0 0; gap: 10px; }
  .nav-open .nav-links > .btn { margin-top: 10px; }
  .nav-open .nav-links .btn { min-height: 52px; font-size: 1.0625rem; flex: none; }
  /* The first child is the sr-only label, so the three bars are children 2-4. */
  .nav-open .nav-toggle-bar:nth-child(2) { transform: translateY(6px) rotate(45deg); }
  .nav-open .nav-toggle-bar:nth-child(3) { opacity: 0; }
  .nav-open .nav-toggle-bar:nth-child(4) { transform: translateY(-6px) rotate(-45deg); }
  .nav-open::before { content: ""; position: fixed; inset: 56px 0 0; z-index: 48; background: rgba(11, 23, 38, 0.32); }
}
@media (min-width: 721px) and (max-width: 1100px) {
  /* Tablet sheet: the two actions sit side by side instead of stretching like phone controls. */
  .nav-open .nav-actions { flex-direction: row; max-width: 560px; }
  .nav-open .nav-actions .btn { flex: 1 1 0; }
}

/* ---------- Hero ---------- */

.hero { position: relative; padding-top: clamp(40px, 6vw, 80px); }
.hero::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 100%; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(11, 23, 38, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11, 23, 38, 0.06) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 74% 42%, #000 10%, transparent 70%);
  mask-image: radial-gradient(ellipse 60% 70% at 74% 42%, #000 10%, transparent 70%);
}
.hero-grid {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 4vw, 64px); align-items: center;
}
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.hero h1 {
  margin: 24px 0 22px;
  font-size: clamp(2.5rem, 1.5rem + 4.2vw, 4.75rem);
  line-height: 0.98; letter-spacing: -0.032em; font-stretch: 88%; font-weight: 650;
}
.lead { max-width: 36ch; font-size: clamp(1.125rem, 1rem + 0.45vw, 1.3125rem); line-height: 1.5; color: var(--ink-2); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.proof {
  display: inline-flex; align-items: center; gap: 14px; margin-top: 28px; min-height: 44px;
  color: var(--ink-2); text-decoration: none;
}
.proof:hover { color: var(--ink); }
.proof-avatars { display: flex; }
.proof-avatars > span {
  width: 38px; height: 38px; border-radius: 50%; overflow: hidden; flex: none;
  margin-left: -10px; border: 2px solid var(--paper); background: var(--surface);
  box-shadow: 0 0 0 1px var(--line);
}
.proof-avatars > span:first-child { margin-left: 0; }
.proof-avatars img { width: 100%; height: 100%; object-fit: cover; }
.proof-text { display: flex; flex-direction: column; gap: 2px; font-size: 0.9375rem; line-height: 1.3; }
.proof-text strong { font-family: var(--font-display); font-weight: 600; color: var(--ink); }
.stars { color: var(--amber); letter-spacing: 0.08em; }

.hero-media { position: relative; padding: 64px 0 72px; }
.device-frame--tablet {
  position: relative;
  background: var(--bezel); border-radius: var(--r-lg); padding: 12px;
  box-shadow: var(--e3), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.device-frame--tablet::before {
  content: ""; position: absolute; top: 50%; left: 5px; width: 3px; height: 3px; margin-top: -1.5px;
  border-radius: 50%; background: #2A3A50;
}
.device-screen { position: relative; }
.device-screen img { width: 100%; border-radius: 8px; }

/* Callouts: positioned in % of the 16:10 screenshot, so they hold at every width. */
.callout { position: absolute; left: var(--x); width: 0; }
.callout--up { top: calc(-1 * var(--reach)); height: calc(var(--y) + var(--reach)); }
.callout--down { top: var(--y); height: calc(100% - var(--y) + var(--reach)); }
.callout::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; border-left: 1px solid var(--ink); }
.callout-dot {
  position: absolute; left: 0; width: 12px; height: 12px; border-radius: 50%;
  background: var(--accent-bright); transform: translate(-50%, -50%);
  box-shadow: 0 0 0 3px #fff, 0 0 0 7px rgba(10, 107, 254, 0.28);
}
.callout--up .callout-dot { top: 100%; }
.callout--down .callout-dot { top: 0; }
.callout-label {
  position: absolute; left: 0; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: var(--r-xs);
  background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--e1);
  font: 500 0.8125rem/1 var(--font-mono); color: var(--ink);
}
.callout-label b { font-weight: 600; color: var(--accent-hover); }
/* The one feature the owner wants called out in the hero. */
.callout-label em, .callout-legend em { font-style: normal; font-weight: 600; color: var(--accent-hover); }
.callout--up .callout-label { top: 0; transform: translate(-12px, -100%); }
.callout--down .callout-label { bottom: 0; transform: translate(-12px, 100%); }
.callout--flip .callout-label { transform: translate(calc(-100% + 12px), -100%); }
/* Read by screen readers everywhere; shown as a numbered key on phones, where the labels are hidden. */
.callout-legend {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  list-style: none;
}

.hero-specs-band { position: relative; margin-top: 24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper); }
.hero-bullets { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hero-bullets li {
  padding: 22px 24px 24px; border-left: 1px solid var(--line);
  font-size: 0.9375rem; line-height: 1.45; color: var(--ink-2);
}
.hero-bullets li:first-child { border-left: 0; padding-left: 0; }
.spec-key {
  display: block; margin-bottom: 10px;
  font: 600 0.8125rem/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink);
}

/* ---------- Testimonials: ticket rail ---------- */

.rail-controls { display: flex; align-items: center; gap: 8px; flex: none; }
.rail-btn {
  width: 44px; height: 44px; display: grid; place-items: center; padding: 0;
  border-radius: var(--r-sm); border: 1.5px solid var(--field-border); background: var(--surface); color: var(--ink);
  cursor: pointer; transition: border-color 120ms var(--ease), opacity 120ms var(--ease);
}
.rail-btn:hover { border-color: var(--ink); }
.rail-btn:disabled { opacity: 0.4; cursor: default; border-color: var(--field-border); }
.rail-btn .icon { width: 18px; height: 18px; stroke-width: 2; }
.rail-count { min-width: 68px; text-align: center; font: 500 0.875rem/1 var(--font-mono); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.rail-count b { color: var(--ink); font-weight: 600; }

/* The rail is the scroller itself: native swipe + scroll snap, edge-aligned with the container. */
.testimonial-set {
  display: flex; align-items: stretch; gap: 20px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
  padding: 4px max(var(--gutter), calc((100% - var(--container)) / 2)) 8px;
  scroll-padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2));
}
.testimonial-set::-webkit-scrollbar { display: none; }
.testimonial-set:focus-visible { outline-offset: -2px; }
.testimonial-card {
  flex: 0 0 clamp(280px, 29vw, 372px); scroll-snap-align: start; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--e1);
}
.ticket-stub {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 20px; border-bottom: 1.5px dashed var(--line-strong);
  font: 500 0.8125rem/1 var(--font-mono); letter-spacing: 0.08em; color: var(--ink-3);
}
.ticket-stub::before, .ticket-stub::after {
  content: ""; position: absolute; bottom: -9px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--sunk); border: 1px solid var(--line);
}
.ticket-stub::before { left: -9px; clip-path: inset(0 0 0 50%); }
.ticket-stub::after { right: -9px; clip-path: inset(0 50% 0 0); }
.ticket-stub .stars { font-family: var(--font-body); font-size: 0.9375rem; letter-spacing: 0.1em; }
.testimonial-copy { padding: 20px 20px 0; font-size: 1rem; line-height: 1.6; color: var(--ink-2); }
.testimonial-copy::before { content: "\201C"; }
.testimonial-copy::after { content: "\201D"; }
.testimonial-copy.is-clamped { display: -webkit-box; -webkit-line-clamp: 9; line-clamp: 9; -webkit-box-orient: vertical; overflow: hidden; }
.ticket-more {
  align-self: center; margin: 4px 20px 0; padding: 0 4px; min-height: 44px; border: 0; background: none; cursor: pointer;
  font: 600 0.875rem/1 var(--font-display); color: var(--accent); text-decoration: underline; text-underline-offset: 0.2em;
}
.ticket-more:hover { color: var(--accent-hover); }
.ticket-foot { display: flex; align-items: center; gap: 12px; padding: 18px 20px 16px; margin-top: auto; }
.testimonial-logo { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex: none; background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.testimonial-logo.ticket-logo--dark { background: var(--ink); }
.testimonial-logo picture, .proof-avatars picture { display: block; width: 100%; height: 100%; }
.testimonial-logo img { width: 100%; height: 100%; object-fit: cover; }
.ticket-who { min-width: 0; }
.testimonial-business { font: 600 1rem/1.25 var(--font-display); color: var(--ink); }
.testimonial-owner { margin-top: 3px; font: 0.8125rem/1.3 var(--font-mono); color: var(--ink-3); }
.ticket-source {
  margin-left: auto; flex: none; min-height: 44px; display: inline-flex; align-items: center; gap: 4px;
  font: 600 0.875rem/1 var(--font-display); color: var(--accent); text-decoration: none;
}
.ticket-source:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.ticket-source .icon { width: 16px; height: 16px; stroke-width: 2; }

/* ---------- Compare: receipt ledger ---------- */

/* TABL is a raised ink column that overhangs the table, with solid green check badges;
   the typical POS column reads as clearly worse (warm hatch, solid red X badges, bold red verdicts). */
.compare-board { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--e1); }
.compare-board-top, .compare-row { display: grid; grid-template-columns: minmax(200px, 0.78fr) minmax(0, 1.15fr) minmax(0, 1.05fr); }
.compare-board-top span {
  display: flex; align-items: center; gap: 10px; padding: 16px 24px; border-bottom: 1px solid var(--line);
  font: 500 0.8125rem/1.2 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3);
}
.compare-board-top span:nth-child(2) {
  position: relative; margin-top: -16px; padding-top: 32px; border-radius: 16px 16px 0 0;
  background: var(--ink); color: var(--frost); border-bottom-color: rgba(251, 254, 255, 0.14); font-weight: 600;
}
.compare-board-top span:nth-child(2)::before { content: ""; width: 14px; height: 14px; flex: none; background: var(--glyph-night) center / contain no-repeat; }
.compare-row + .compare-row { border-top: 1px solid var(--line); }
.compare-topic { display: flex; align-items: baseline; gap: 14px; padding: 26px 24px; }
.ledger-num { font: 500 0.8125rem/1 var(--font-mono); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.compare-topic h3 { font-size: 1.25rem; font-weight: 650; letter-spacing: -0.014em; }
.compare-cell { display: flex; gap: 14px; padding: 26px 24px; font-size: 1rem; line-height: 1.5; }
.compare-cell .icon { flex: none; box-sizing: border-box; width: 26px; height: 26px; padding: 5px; margin-top: -1px; border-radius: 50%; }
.compare-cell-portal { position: relative; background: var(--ink); color: var(--frost); font-weight: 500; box-shadow: 14px 0 28px -18px rgba(11, 23, 38, 0.55), -14px 0 28px -18px rgba(11, 23, 38, 0.55); }
.compare-row + .compare-row .compare-cell-portal { border-top: 1px solid rgba(251, 254, 255, 0.12); margin-top: -1px; }
.compare-row:last-child .compare-cell-portal { margin-bottom: -16px; padding-bottom: 42px; border-radius: 0 0 16px 16px; }
.compare-cell-portal .icon { background: var(--go); color: #fff; stroke-width: 3.2; }
/* Typical POS: readable, but clearly the weaker option (warm warning tint, solid red X badge mirroring
   the TABL check, and a bold red verdict before each sentence). */
.compare-cell-typical {
  color: var(--ink-2);
  background-color: #F4E5E0;
  background-image: repeating-linear-gradient(135deg, rgba(180, 35, 24, 0.06) 0 1px, transparent 1px 9px);
}
.compare-cell-typical .icon { color: #fff; background: var(--danger); box-shadow: none; stroke-width: 3.2; }
.compare-cell-typical b { color: #9A3A2F; font-weight: 700; }
.compare-board-top span:nth-child(3) { color: #9A3A2F; }
.compare-row:last-child .compare-cell-typical { border-bottom-right-radius: var(--r-md); }
.ledger-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Screens: night band ---------- */

.screen-stage {
  background: var(--bezel); border-radius: var(--r-lg); padding: 14px;
  box-shadow: 0 0 0 1px var(--night-line), 0 40px 80px -30px rgba(0, 0, 0, 0.6);
}
.screen-stage img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; border-radius: 8px; }
.screens-caption {
  display: flex; justify-content: space-between; gap: 16px; margin: 18px 2px 0;
  font: 500 0.8125rem/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--frost-2);
}
.screens-caption b { color: var(--frost); font-weight: 600; }
.screen-thumbs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.thumb {
  display: flex; flex-direction: column; gap: 10px; padding: 0; border: 0; background: none; text-align: left; cursor: pointer;
  font: 500 0.875rem/1.2 var(--font-display); color: var(--frost-2);
}
.thumb picture { display: block; }
.thumb img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; border-radius: 6px; box-shadow: 0 0 0 1px var(--night-line); opacity: 0.72; transition: opacity 120ms var(--ease); }
.thumb:hover img { opacity: 0.9; }
.thumb > span { display: grid; gap: 3px; padding-top: 8px; border-top: 2px solid var(--night-line); }
.thumb-name { display: flex; align-items: center; gap: 8px; }
/* One short line under each screen name so owners know what they are looking at. */
.thumb-note { font: 400 0.8125rem/1.3 var(--font-body); color: var(--frost-2); }
.thumb.is-active { color: var(--frost); }
.thumb.is-active img { opacity: 1; box-shadow: 0 0 0 2px var(--accent-bright); }
.thumb.is-active > span { border-top-color: var(--accent-bright); }
.thumb.is-active .thumb-name::before { content: ""; width: 12px; height: 12px; flex: none; background: var(--glyph-night) center / contain no-repeat; }
.thumb.is-active .thumb-note { color: #C9D4E3; }
.band--night :focus-visible { outline-color: #7FB0FF; }

@media (min-width: 1101px) {
  /* App switcher: stage on the left, a 312px column of 152px thumbnails on the right. */
  /* Approved mockup proportions: 96px thumbs (200w files keep the picked image under 2.2x). */
  .screens-layout { display: grid; grid-template-columns: minmax(0, 1fr) 264px; grid-template-rows: auto 1fr; column-gap: 32px; align-items: start; }
  .screen-preview, .screens-caption { grid-column: 1; }
  .screen-thumbs { grid-column: 2; grid-row: 1 / span 2; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 0; }
  .thumb { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 14px; padding: 6px; border-radius: 10px; }
  .thumb:hover, .thumb.is-active { background: var(--night-raised); }
  .thumb > span { border-top: 0; padding: 0; }
}

/* ---------- Features ---------- */

/* Four groups, each a header (number, title, one-line point) over four white cards.
   Icons sit in tinted tiles; Customer Loyalty is the one highlighted card. */
.feature-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.feature-group-label {
  grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; column-gap: 16px;
  margin-top: 40px; padding-bottom: 16px; border-bottom: 1px solid var(--ink);
}
.feature-group-label:first-child { margin-top: 0; }
.feature-group-num {
  align-self: center; display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-sm);
  background: var(--ink); color: var(--frost); font: 600 0.875rem/1 var(--font-mono); font-variant-numeric: tabular-nums;
}
.feature-group-title { font: 650 clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem)/1.2 var(--font-display); letter-spacing: -0.018em; color: var(--ink); }
.feature-group-note { font-size: 0.9375rem; line-height: 1.4; color: var(--ink-2); text-align: right; }
.feature-card {
  display: flex; flex-direction: column; padding: 22px 22px 24px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--e1);
}
.feature-icon {
  display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 18px;
  border-radius: 10px; background: var(--accent-wash); box-shadow: inset 0 0 0 1px var(--accent-line); color: var(--accent-hover);
}
.feature-card .icon { display: block; width: 22px; height: 22px; stroke-width: 1.9; }
.feature-card h3 { font-size: 1.125rem; font-weight: 650; letter-spacing: -0.012em; line-height: 1.3; }
.feature-card p { margin-top: 8px; font-size: 0.9375rem; line-height: 1.55; color: var(--ink-2); }
.feature-card--highlight { background: var(--ink); border-color: var(--ink); box-shadow: var(--e2); }
.feature-card--highlight h3 { color: var(--frost); }
.feature-card--highlight p { color: var(--frost-2); }
.feature-card--highlight .feature-icon { background: var(--accent-bright); box-shadow: none; color: #fff; }

/* ---------- Digital menu ---------- */

/* The order story from scan to ticket: lead, three steps and a "Try it" card on the left; the phone on a
   stage with two labels from real Portal screens on the right. The copy column stretches to the stage,
   so both columns end on one line. */
.digital-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(40px, 4vw, 64px); align-items: stretch; }
.digital-copy { display: flex; flex-direction: column; }
.digital-copy .section-header { margin-bottom: 0; }
.digital-body { flex: 1; display: flex; flex-direction: column; margin-top: 20px; }
.dm-lead { font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem); line-height: 1.55; color: var(--ink-2); }
.dm-lead strong { font-weight: 700; color: var(--ink); }
/* Phrase-intact H2: "Showcase your items with / digital and QR menus / tied to your POS". Where the column is
   too narrow for "Showcase your items with" (961-1100, under 360) it wraps naturally. */
@media (min-width: 1101px), (min-width: 360px) and (max-width: 960px) { .dm-nowrap { white-space: nowrap; } }

/* Steps: numbered ledger, ink rule on top, hairlines between. Rows share any spare height, so the column
   always ends level with the stage. */
.dm-steps { flex: 1; display: flex; flex-direction: column; list-style: none; margin: 28px 0; border-top: 1px solid var(--ink); }
.dm-step {
  flex: 1 0 auto; display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 18px; align-content: center; align-items: start;
  padding: 14px 0; border-bottom: 1px solid var(--line-strong);
}
/* Outlined, not filled: the Features section above ends on a filled ink "04" tile. */
.dm-step-num {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-sm);
  color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink);
  font: 600 0.875rem/1 var(--font-mono); font-variant-numeric: tabular-nums;
}
.dm-step h3 { font-size: 1.1875rem; font-weight: 650; letter-spacing: -0.014em; line-height: 1.25; padding-top: 4px; }
.dm-step p { margin-top: 6px; font-size: 1rem; line-height: 1.5; color: var(--ink-2); }

/* Try it: ink card, a real QR code for the same demo URL, and the section's one demo link as a primary button. */
.dm-try {
  margin-top: auto;
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 24px; align-items: center;
  padding: 20px 24px 20px 20px; border-radius: var(--r-md);
  background: var(--ink); color: var(--frost-2); box-shadow: var(--e2);
}
.dm-qr { padding: 12px; border-radius: var(--r-sm); background: var(--surface); color: var(--ink); line-height: 0; }
.dm-qr svg { display: block; width: 87px; height: 87px; } /* 29 modules at 3px; 4px from 1600 */
.dm-try-key {
  display: flex; align-items: center; gap: 8px;
  font: 500 0.75rem/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--frost-2);
}
.dm-try-key::before { content: ""; width: 12px; height: 12px; flex: none; background: var(--glyph-night) center / contain no-repeat; }
.dm-try-title { margin-top: 10px; font: 650 1.125rem/1.3 var(--font-display); letter-spacing: -0.014em; color: var(--frost); }
.dm-try .demo-link { margin-top: 14px; }
.dm-try .demo-link:focus-visible { outline-color: var(--frost); }
.mobile-inline-copy { display: none; }

/* Stage: surface panel, hero grid texture, one caption line. */
.dm-stage {
  position: relative; height: 100%; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--e1);
}
.dm-stage::before {
  content: ""; position: absolute; inset: 53px 0 44px; pointer-events: none;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--ink) 7%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--ink) 7%, transparent) 1px, transparent 1px);
  background-size: 24px 24px; background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(ellipse 62% 58% at 44% 52%, #000 15%, transparent 78%);
  mask-image: radial-gradient(ellipse 62% 58% at 44% 52%, #000 15%, transparent 78%);
}
.dm-stage-bar {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 53px; padding: 0 20px; border-bottom: 1px solid var(--line);
}
.live-tag {
  display: inline-flex; align-items: center; gap: 8px; min-height: 30px; padding: 0 12px;
  border-radius: var(--r-xs); background: var(--surface); border: 1px solid var(--line-strong);
  font: 500 0.8125rem/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink);
}
.live-tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--go); box-shadow: 0 0 0 3px rgba(23, 138, 75, 0.18); }
.dm-stage-bar .live-tag { min-height: 0; padding: 0; border: 0; background: none; }
.dm-device { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; padding: 36px 24px; }
.dm-stage-foot {
  position: relative; padding: 13px 20px; border-top: 1px solid var(--line);
  font-size: 0.875rem; line-height: 1.4; color: var(--ink-3); text-align: center; text-wrap: balance;
}

/* Phone. The screen is the demo page's canvas: its background is the page's own top colour (sampled, see
   --demo-top), so the status bar sits on the page like a real iPhone, with no white band or seam. The page
   (poster, then the live iframe on desktop) is pinned to the bottom; the 375:810 screen leaves exactly the
   status-bar gap above a 390:792 page. Sizes are in cqw so the island and status row scale with the phone.
   ponytail: cqw needs Chrome 105 / Safari 16 / Firefox 110; older browsers get an unsized status row. */
.phone-frame {
  width: min(100%, 292px); padding: 11px; border-radius: var(--r-xl);
  background: var(--bezel); box-shadow: var(--e3), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.phone-screen {
  position: relative; aspect-ratio: 375 / 810; border-radius: 34px; overflow: hidden; container-type: inline-size;
  background: linear-gradient(90deg, var(--demo-top) 10%, var(--demo-top-end) 75%) var(--demo-top);
}
.phone-screen::before {
  content: ""; position: absolute; top: 3.08cqw; left: 50%; z-index: 2; width: 28.77cqw; height: 8.22cqw; margin-left: -14.38cqw;
  border-radius: 20px; background: var(--bezel);
}
/* Time centred in the left ear, signal / wifi / battery in the right one, on the island's centre line. */
.phone-status {
  position: absolute; inset: 3.08cqw 0 auto; z-index: 2; height: 8.22cqw; pointer-events: none;
  display: grid; grid-template-columns: 1fr 28.77cqw 1fr; align-items: center; justify-items: center;
  color: var(--ink); font: 600 4.45cqw/1 -apple-system, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
}
.phone-status svg { grid-column: 3; display: block; height: 3.77cqw; width: auto; }
.phone-screen-poster { position: absolute; left: 0; bottom: 0; width: 100%; }
.dm-device .phone-frame { flex: none; } /* keeps the 314px frame (and the iframe scale) from shrinking at 1101-1119 */
.phone-screen-demo { display: none; }

/* Chips: labels lifted from real Portal screens; decorative, so click-through. Anchored to the phone (which is
   centred vertically): each overlaps the right bezel by 28px. The Menu chip starts 137px below the phone top,
   clear of the live demo's share button. */
.dm-chip { position: absolute; left: calc(50% + 63px); z-index: 3; width: 204px; pointer-events: none; cursor: default; user-select: none; }
.dm-link { top: calc(50% - 200px); }
.dm-ticket { top: calc(50% + 118px); }
.dm-tab {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px 6px; border-radius: 7px 7px 0 0;
  background: var(--ink); color: var(--frost); font: 500 0.6875rem/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase;
}
.dm-tab::before { content: ""; width: 10px; height: 10px; flex: none; background: var(--glyph-night) center / contain no-repeat; }
/* A quiet list, not buttons: ink text, no borders, no hover. */
.dm-link-list {
  list-style: none; overflow: hidden; border-radius: 0 var(--r-md) var(--r-md) var(--r-md);
  background: var(--surface); box-shadow: var(--e3), 0 0 0 1px var(--line-strong);
}
.dm-link-list li { display: flex; align-items: center; gap: 10px; padding: 11px 12px; font: 600 0.875rem/1.15 var(--font-display); color: var(--ink); }
.dm-link-list li + li { border-top: 1px solid var(--line); }
.dm-link-list .icon { width: 16px; height: 16px; stroke-width: 2; color: var(--accent); }
.dm-ticket-card { overflow: hidden; border-radius: 0 var(--r-md) var(--r-md) var(--r-md); background: var(--surface); box-shadow: var(--e3), 0 0 0 1px var(--line-strong); }
.dm-ticket-top {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px;
  background: var(--ink); color: var(--frost); font: 600 0.9375rem/1 var(--font-display);
  border-top: 1px solid var(--night-line);
}
.dm-ticket-top b { font-weight: 600; }
.dm-pill { padding: 4px 6px 3px; border-radius: var(--r-xs); background: var(--surface); color: var(--ink); font: 700 0.6875rem/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; }
/* 5.2:1 at 11px (plain --go on its wash was 3.1:1). */
.dm-pill--go { background: color-mix(in srgb, var(--go) 16%, var(--surface)); color: color-mix(in srgb, var(--go) 70%, var(--ink)); }
.dm-ticket-main { padding: 10px 12px 12px; }
.dm-ticket-status {
  padding: 6px; border-radius: 6px; text-align: center;
  background: var(--accent-wash); box-shadow: inset 0 0 0 1px var(--accent-line); color: var(--accent-hover);
  font: 600 0.8125rem/1 var(--font-display);
}
.dm-ticket-name { margin-top: 10px; font: 650 1rem/1.2 var(--font-display); letter-spacing: -0.01em; color: var(--ink); }
.dm-ticket-total {
  display: flex; justify-content: space-between; margin-top: 10px; padding-top: 10px; border-top: 1.5px dashed var(--line-strong);
  font: 600 0.875rem/1 var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums;
}
.dm-ticket-item { margin-top: 8px; font-size: 0.8125rem; line-height: 1.35; color: var(--ink-2); }
.dm-ticket-item small { display: block; padding-left: 12px; font-size: 0.75rem; color: var(--ink-3); }
.dm-ticket-item small::before { content: "\2022\00a0"; }

/* Wide desktop: a bigger code (4px per module) scans more reliably off a monitor, and there is room for it. */
@media (min-width: 1600px) {
  .dm-qr { padding: 16px; } /* 4-module quiet zone */
  .dm-qr svg { width: 116px; height: 116px; }
}
/* 961-1100: the copy column is at its narrowest beside the code, so the button (which never wraps) gets back
   the 28px it needs to stay inside the card. */
@media (min-width: 961px) and (max-width: 1100px) {
  .dm-try { column-gap: 16px; padding-right: 20px; }
  .dm-try .demo-link { padding-inline: 16px; }
}
/* Desktop: the live demo loads at a real 390px phone width and is scaled into the fixed 292px screen
   (292 / 390 = 0.748718), pinned to the bottom like the poster it covers once settled.
   ponytail: fixed scale because the desktop frame never flexes; use container units if it ever does. */
@media (min-width: 1101px) {
  .dm-device .phone-frame { width: 314px; margin-right: 132px; } /* phone sits 66px left of centre; the chips balance the right */
  .phone-screen-demo {
    position: absolute; left: 0; bottom: 0; display: block;
    width: 390px; height: 792px; border: 0; background: transparent;
    transform: scale(0.748718); transform-origin: 0 100%;
    opacity: 0; transition: opacity 200ms var(--ease);
  }
  .phone-screen-demo.is-ready { opacity: 1; } /* set by script.js once the demo has settled */
}
/* Narrow desktop (1101-1240): the stage is ~516px, so the phone moves further left to keep the chips inside it. */
@media (min-width: 1101px) and (max-width: 1240px) {
  .dm-device { padding-inline: 16px; }
  .dm-device .phone-frame { margin-right: 160px; }
  .dm-chip { left: calc(50% + 49px); }
}
/* 1101-1180: narrower chips so both labels stay on one line with a ~20px inset each side; keeps the 28px bezel overlap. */
@media (min-width: 1101px) and (max-width: 1180px) {
  .dm-chip { width: 190px; left: calc(50% + 45px); }
  .dm-device .phone-frame { margin-right: 168px; }
  .dm-link-list li { padding-inline: 10px; gap: 8px; white-space: nowrap; font-size: 0.84375rem; }
}
/* Tablet and phone: the static poster instead of the live demo, so the "Interactive Demo" bar goes and the
   note becomes a caption. */
@media (max-width: 1100px) {
  .desktop-inline-copy, .phone-demo-label, .dm-stage-bar, .dm-link { display: none; }
  .mobile-inline-copy { display: inline; }
  .dm-stage::before { inset: 0; border-radius: var(--r-lg); }
  .dm-device { flex-direction: column; padding: 32px 20px 0; }
  /* The ticket hangs under the phone with its tab tucked over the bottom bezel: nothing on the screen is covered. */
  .dm-ticket { position: relative; left: auto; top: auto; margin-top: -20px; }
  .dm-stage-foot { padding: 20px 20px 24px; border-top: 0; }
}
@media (max-width: 960px) {
  .digital-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .dm-steps { flex: none; }
}
@media (max-width: 720px) {
  .dm-steps { margin: 24px 0; }
  .dm-step { column-gap: 14px; }
  .dm-step-num { width: 30px; height: 30px; }
  .dm-step h3 { font-size: 1.0625rem; }
  .dm-step p { margin-top: 4px; font-size: 0.9375rem; }
  /* A phone cannot scan its own screen: drop the code, keep one full-width button. */
  .dm-try { grid-template-columns: minmax(0, 1fr); padding: 20px; }
  .dm-qr { display: none; }
  .dm-try .demo-link { display: flex; width: 100%; }
  .dm-device { padding: 20px 16px 0; }
}
/* Phones: a smaller phone and a lighter caption, so the stage fits one screen. */
@media (max-width: 599px) {
  .dm-device .phone-frame { width: min(100%, 248px); }
  .dm-stage-foot { font-size: 0.8125rem; padding: 14px 16px 18px; }
}
/* Tablets (600-960): the stage is full-column wide, so the chips go back beside the phone as on desktop. */
@media (min-width: 600px) and (max-width: 960px) {
  .dm-device { flex-direction: row; padding: 40px 24px; }
  .dm-device .phone-frame { margin-right: 132px; }
  .dm-link { display: block; top: calc(50% - 190px); }
  .dm-chip { position: absolute; left: calc(50% + 52px); margin: 0; }
  .dm-ticket { top: calc(50% + 100px); }
}

/* ---------- Partners ---------- */

/* Two groups that say what each partner is: built-in integrations (wide) and the food truck community. */
.partner-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
.partner-group-label {
  grid-column: 1 / -1; margin-top: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--ink);
  font: 500 0.8125rem/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink);
}
.partner-group-label:first-child { margin-top: 0; }
.partner-card { grid-column: span 3; min-width: 0; }
.partner-card--integration { grid-column: span 3; }
.partner-card__link {
  position: relative; display: flex; flex-direction: column; gap: 20px; height: 100%; padding: 16px 16px 24px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--e1);
  color: inherit; text-decoration: none;
  transition: transform 160ms var(--ease), box-shadow 160ms var(--ease), border-color 160ms var(--ease);
}
.partner-card__link:hover { color: inherit; transform: translateY(-2px); border-color: var(--line-strong); box-shadow: var(--e2); }
.partner-card__link:focus-visible { outline-offset: 3px; border-radius: 16px; }
.partner-card--integration .partner-card__link { flex-direction: row; align-items: center; gap: 28px; padding: 16px 28px 16px 16px; }
.partner-card__logo {
  height: 128px; display: grid; place-items: center; padding: 18px;
  border-radius: var(--r-md); border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--surface) 0%, #EDEAE3 100%);
}
.partner-card--integration .partner-card__logo { flex: 0 0 46%; }
.partner-card__logo--dark { background: var(--ink); border-color: var(--ink); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.partner-card__logo picture { display: block; }
.partner-card__logo img { max-height: 82px; max-width: 100%; width: auto; }
/* Some logo files have a baked-in white box; multiply drops it into the plate. */
.partner-card__logo:not(.partner-card__logo--dark) img { mix-blend-mode: multiply; }
.partner-card__logo--dirty-soda { background: #fff; }
.partner-card__logo--dirty-soda img { mix-blend-mode: normal; height: auto; object-fit: contain; }
.partner-card__logo--wordmark img { max-height: 40px; }
.partner-card__body { display: grid; gap: 10px; min-width: 0; padding: 0 8px; }
.partner-card--integration .partner-card__body { padding: 0 28px 0 0; } /* clears the outbound chip */
.partner-card__kind {
  display: inline-flex; align-items: center; gap: 8px; justify-self: start;
  font: 500 0.8125rem/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3);
}
.partner-card--integration .partner-card__kind { color: var(--accent-hover); }
.partner-card--integration .partner-card__kind::before { content: ""; width: 12px; height: 12px; flex: none; background: var(--glyph) center / contain no-repeat; }
.partner-card--dirty-soda .partner-card__name { font-size: 1.375rem; line-height: 1.2; letter-spacing: -0.018em; }
.partner-card__description { font-size: 0.9375rem; line-height: 1.55; color: var(--ink-2); }
/* Outbound cue: a small chip in the corner of the logo plate. */
.partner-card__go {
  position: absolute; top: 26px; right: 26px; width: 28px; height: 28px; padding: 6px;
  border-radius: 50%; background: rgba(255, 255, 255, 0.92); border: 1px solid var(--line); color: var(--ink-2);
  transition: transform 160ms var(--ease), color 160ms var(--ease), border-color 160ms var(--ease);
}
.partner-card--integration .partner-card__go { top: 16px; right: 16px; }
.partner-card__link:hover .partner-card__go { color: var(--accent); border-color: var(--accent-line); transform: translate(2px, -2px); }
.partners-cta {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px;
  margin-top: 28px; padding: clamp(24px, 4vw, 44px); border: 1px solid var(--accent-line);
  border-left: 4px solid var(--accent); border-radius: var(--r-md); background: var(--accent-wash);
}
.partners-cta h3 { max-width: 24ch; font-size: clamp(1.5rem, 2.5vw, 2rem); line-height: 1.15; letter-spacing: -0.025em; }
.partners-cta__copy p { max-width: 52ch; margin-top: 12px; line-height: 1.55; }
.partners-cta__action { flex-direction: column; gap: 8px; min-height: 72px; padding: 16px 22px; }
.partners-cta__action span { font: 400 0.875rem/1.2 var(--font-body); }

/* ---------- FAQ ---------- */

.faq-layout { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.faq-intro { position: sticky; top: 104px; }
.faq-intro .section-header { margin-bottom: 0; }
.still-deciding { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line-strong); font-size: 0.9375rem; color: var(--ink-2); }
.still-deciding strong { display: block; font: 600 1rem/1.3 var(--font-display); color: var(--ink); margin-bottom: 4px; }
.faq-group + .faq-group { margin-top: 44px; }
.faq-group h3 {
  padding-bottom: 12px; border-bottom: 1px solid var(--ink);
  font: 500 0.8125rem/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink);
}
.faq-item { border-bottom: 1px solid var(--line-strong); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  min-height: 60px; padding: 16px 0; cursor: pointer; list-style: none;
  font: 600 1.0625rem/1.4 var(--font-display); color: var(--ink); letter-spacing: -0.005em;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; flex: none; width: 28px; height: 28px; display: grid; place-items: center;
  border-radius: var(--r-xs); border: 1px solid var(--line-strong);
  font: 400 1.125rem/1 var(--font-mono); color: var(--ink-2);
}
.faq-item summary:hover::after { border-color: var(--ink); }
.faq-item[open] summary::after { content: "\2212"; background: var(--ink); border-color: var(--ink); color: var(--frost); }
.faq-item p { max-width: 64ch; padding: 0 48px 22px 0; color: var(--ink-2); font-size: 1rem; }

/* ---------- Closing band + footer ---------- */

.closing { background: var(--ink); color: var(--frost-2); padding-block: clamp(80px, 10vw, 136px) clamp(56px, 7vw, 88px); }
.closing-inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.closing h2 {
  font-size: clamp(2.5rem, 1.6rem + 4vw, 4.75rem); line-height: 0.98;
  letter-spacing: -0.032em; font-stretch: 88%; color: var(--frost);
}
.closing p { margin-top: 18px; font-size: 1.1875rem; color: var(--frost-2); }
.closing .cta-row { margin-top: 0; flex: none; }

.site-footer { background: var(--ink); color: var(--frost-2); }
.footer-grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); column-gap: 48px;
  padding-top: 48px; border-top: 1px solid var(--night-line);
}
.footer-logo { width: 132px; height: auto; border-radius: 8px; }
.footer-brand { margin-top: 28px; font: 600 1.0625rem/1.2 var(--font-display); color: var(--frost); }
.footer-copy { margin-top: 8px; max-width: 46ch; font-size: 0.9375rem; }
.footer-label { margin-bottom: 14px; font: 500 0.8125rem/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--frost-2); }
.footer-link-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 32px; }
.footer-link-grid a, .footer-link-grid button {
  min-height: 44px; display: flex; align-items: center; padding: 0; border: 0; background: none; cursor: pointer;
  font: 500 1rem/1.2 var(--font-display); color: var(--frost); text-decoration: none; text-align: left;
}
.footer-link-grid a:hover, .footer-link-grid button:hover { color: #fff; text-decoration: underline; text-underline-offset: 0.2em; }
.footer-link-grid + .footer-label { margin-top: 32px; }
.footer-legal {
  grid-column: 1 / -1; margin-top: 48px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  padding-block: 20px 28px; border-top: 1px solid var(--night-line);
}
.footer-legal > p { font: 0.8125rem/1.4 var(--font-mono); color: var(--frost-2); }
.footer-legal > p a { color: inherit; }
.footer-legal > p a:hover { color: #fff; }
.footer-socials {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px;
  font: 500 0.8125rem/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase;
}
/* Each label stays on one line with its icons. */
.footer-social-group { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.footer-social {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
  color: var(--frost); box-shadow: inset 0 0 0 1px rgba(251, 254, 255, 0.2);
}
.footer-social:hover { color: #fff; box-shadow: inset 0 0 0 1px var(--frost); }
.footer-social svg { width: 18px; height: 18px; }
.site-footer :focus-visible, .closing :focus-visible { outline-color: #7FB0FF; }

/* ---------- Demo modal ---------- */

/* The opacity transition is load-bearing: script.js hides the modal on its transitionend. */
.demo-modal {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 32px 24px;
  opacity: 0; transition: opacity 160ms var(--ease);
}
.demo-modal.is-open { opacity: 1; }
.demo-backdrop { position: absolute; inset: 0; background: var(--scrim); }
.demo-dialog {
  position: relative; display: flex; flex-direction: column;
  width: min(100%, 640px); max-height: calc(100dvh - 64px);
  background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--e3); overflow: hidden;
}
.demo-dialog:focus { outline: none; }
.demo-close {
  /* Above the phone header's eyebrow + title (z-index 2), which would otherwise swallow the tap. */
  position: absolute; top: 16px; right: 16px; z-index: 3;
  width: 44px; height: 44px; display: grid; place-items: center; padding: 0;
  border-radius: var(--r-sm); border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--ink);
  cursor: pointer; transition: border-color 120ms var(--ease);
}
.demo-close:hover { border-color: var(--ink); }
.demo-close svg { width: 20px; height: 20px; }
.demo-modal.is-success .demo-close { display: none; }

.demo-content { overflow-y: auto; overscroll-behavior: contain; padding: 0 40px; scroll-padding-block: 44px 128px; }
/* Sticky top fade doubles as top padding; scrolled fields fade out under the sheet edge and close button. */
.demo-content::before {
  content: ""; position: sticky; top: 0; z-index: 1; display: block; height: 36px; margin-inline: -40px;
  background: linear-gradient(var(--surface) 45%, rgba(255, 255, 255, 0));
}
.demo-header { margin-bottom: 28px; }
.demo-header .eyebrow, .demo-header h2 { padding-right: 56px; }
.demo-header .eyebrow { margin-bottom: 14px; }
.demo-header .eyebrow::before { content: ""; width: 12px; height: 12px; flex: none; background: var(--glyph) center / contain no-repeat; }
.demo-header h2 { font-size: 1.75rem; line-height: 1.15; letter-spacing: -0.02em; font-stretch: 92%; }
.demo-header h2 + p { margin-top: 8px; font-size: 1rem; line-height: 1.55; color: var(--ink-2); }

/* Subgrid keeps each row's inputs level even when one label wraps to two lines. */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
.field { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 8px; min-width: 0; }
.field-label { align-self: end; font: 600 0.9375rem/1.35 var(--font-display); color: var(--ink); }
.field > input, .field > select, .multiselect { align-self: start; }

.field input, .field select, .multiselect-toggle {
  width: 100%; height: 48px; margin: 0; padding: 0 14px;
  border: 1px solid var(--field-border); border-radius: var(--r-sm);
  background-color: var(--surface); color: var(--ink);
  font: 400 1rem/1.25 var(--font-body);
  transition: border-color 120ms var(--ease), box-shadow 120ms var(--ease);
}
.field input::placeholder { color: var(--ink-3); opacity: 1; }
.field select, .multiselect-toggle {
  -webkit-appearance: none; appearance: none; padding-right: 44px; cursor: pointer;
  background: var(--surface) var(--i-chevron-down) right 14px center / 18px no-repeat;
}
.field select:invalid { color: var(--ink-3); }
.field select option { color: var(--ink); }
.field input:hover, .field select:hover, .multiselect-toggle:hover { border-color: var(--ink-3); }
.field input:focus-visible, .field select:focus-visible, .multiselect-toggle:focus-visible,
.multiselect.is-open .multiselect-toggle {
  outline: none; border-color: var(--accent); border-radius: var(--r-sm);
  box-shadow: 0 0 0 1px var(--accent), 0 0 0 5px rgba(0, 82, 224, 0.14);
}
.field.is-invalid input, .field.is-invalid select, .field.is-invalid .multiselect-toggle {
  border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger);
}
.field-error { display: flex; gap: 6px; min-height: 20px; margin-bottom: 12px; font: 0.875rem/1.4 var(--font-body); color: var(--danger); }
/* Icon drawn in CSS so script.js can keep setting textContent. */
.field-error:not(:empty)::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: 2px; background: currentColor; -webkit-mask: var(--i-alert) center / contain no-repeat; mask: var(--i-alert) center / contain no-repeat; }

/* Business types: a disclosure that opens inline, so it never needs clipping or drop-up math. */
.multiselect-toggle { display: flex; align-items: center; text-align: left; }
.multiselect-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.multiselect-value.is-placeholder { color: var(--ink-3); }
.multiselect.is-open .multiselect-toggle { background-image: var(--i-chevron-up); }
/* Four rows, then the list scrolls inside its own border; the edge shadow means "more below". */
.multiselect-panel {
  max-height: 200px; overflow-y: auto; overscroll-behavior: contain;
  margin-top: 8px; padding: 4px; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background:
    linear-gradient(var(--surface), var(--surface)) center bottom / 100% 16px no-repeat local,
    linear-gradient(rgba(11, 23, 38, 0), rgba(11, 23, 38, 0.12)) center bottom / 100% 16px no-repeat scroll,
    var(--surface);
}
.multiselect-option {
  position: relative; display: flex; align-items: center; gap: 12px;
  min-height: 44px; padding: 0 10px; border-radius: 6px; cursor: pointer;
  font-size: 1rem; color: var(--ink);
}
.multiselect-option + .multiselect-option { margin-top: 2px; }
.multiselect-option:hover { background: var(--sunk); }
.multiselect-option:has(input:checked) { background: var(--accent-wash); }
.field .multiselect-option input { position: absolute; opacity: 0; width: 1px; height: 1px; padding: 0; border: 0; pointer-events: none; }
.multiselect-box {
  flex: none; width: 20px; height: 20px; display: grid; place-items: center;
  border-radius: var(--r-xs); border: 1.5px solid var(--field-border); background: var(--surface);
}
.multiselect-option input:checked + .multiselect-box { background: var(--accent); border-color: var(--accent); }
.multiselect-option input:checked + .multiselect-box::after { content: ""; width: 13px; height: 13px; background: #fff; -webkit-mask: var(--i-check) center / contain no-repeat; mask: var(--i-check) center / contain no-repeat; }
.multiselect-option input:focus-visible + .multiselect-box { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Business-referral status (business-referral.js inserts <small> + a Retry button right after the select for ?ref=biz_ links). */
.field--referral:has(> [data-business-referral-status]) { grid-row: span 4; }
.field--referral:has(> [data-business-referral-status] + .btn:not([hidden])) { grid-row: span 5; }
.field select:disabled { cursor: not-allowed; opacity: 1; color: var(--ink-2); background-image: none; background-color: var(--sunk); border-color: var(--line-strong); }
[data-business-referral-status] { display: flex; gap: 10px; font-size: 0.875rem; line-height: 1.45; color: var(--ink-2); }
[data-business-referral-status]:empty { display: none; }
[data-business-referral-status]::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.14); }
.field--referral > .btn { justify-self: start; min-height: 44px; font-size: 0.9375rem; }

.form-note { margin: 4px 0 24px; text-wrap: pretty; font-size: 0.875rem; line-height: 1.5; color: var(--ink-3); }
.form-actions {
  position: sticky; bottom: 0; z-index: 1;
  display: flex; align-items: center; gap: 12px; margin: 0 -40px; padding: 16px 40px 20px;
  background: var(--surface); border-top: 1px solid var(--line);
  box-shadow: 0 -10px 20px -16px rgba(11, 23, 38, 0.28);
}
.form-actions .btn { min-height: 48px; padding: 0 22px; font-size: 1rem; }
/* The hint is first in the DOM so it reads before the button; shown beside it on wide screens. */
.form-actions .form-note { order: 1; flex: 1; margin: 0 0 0 4px; text-wrap: balance; line-height: 1.4; }
.form-status { margin: 0 0 16px; font-size: 0.9375rem; line-height: 1.5; color: var(--ink-2); }
.form-status[data-status="error"] { color: var(--danger); }
.form-status:empty { display: none; }

/* ---------- Demo success ---------- */

.demo-modal.is-success .demo-dialog { width: min(100%, 520px); }
.demo-success { overflow-y: auto; padding: 48px 40px 40px; }
.demo-success-card { display: grid; justify-items: center; text-align: center; }
.demo-success-icon { width: 56px; height: 56px; margin-bottom: 24px; }
.demo-success-icon svg { width: 100%; height: 100%; display: block; }
.demo-success-card .eyebrow { margin-bottom: 12px; color: var(--ink-3); }
.demo-success-card h2 { font-size: 2rem; line-height: 1.1; letter-spacing: -0.024em; font-stretch: 92%; }
.demo-success-lede { max-width: 36ch; margin-top: 14px; font-size: 1.0625rem; line-height: 1.55; color: var(--ink-2); }
.demo-success-lede strong { color: var(--ink); white-space: nowrap; }
.demo-success-note {
  justify-self: stretch; margin-top: 28px; text-wrap: balance; padding-top: 20px; border-top: 1.5px dashed var(--line-strong);
  font: 0.875rem/1.45 var(--font-body); color: var(--ink-3);
}
.demo-success-note svg { display: inline-block; width: 18px; height: 18px; margin: -3px 8px 0 0; vertical-align: middle; color: var(--ink-3); }
.demo-success-card .btn { margin-top: 24px; min-width: 200px; }

/* ---------- 404 basics (refined in the pages section at the end of this file) ---------- */

.error-page { position: relative; padding-block: clamp(48px, 8vw, 120px); }
.error-panel {
  max-width: 760px; margin-inline: auto; padding: clamp(28px, 5vw, 48px);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--e2);
}
.error-code { margin-top: 24px; font: 600 clamp(4rem, 2.5rem + 6vw, 6.5rem)/0.9 var(--font-mono); letter-spacing: -0.06em; color: var(--ink-3); }
.error-panel h1 { margin: 20px 0 14px; font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem); line-height: 1; letter-spacing: -0.03em; font-stretch: 88%; }
.error-copy { margin-top: 14px; max-width: 46ch; color: var(--ink-3); }
.error-actions { margin-top: 28px; }

/* ---------- Reveal ---------- */

/* Below-the-fold blocks fade up as they scroll in. The hero is never hidden (LCP), and nothing hides
   without script or under reduced motion. */
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  [data-animate] { transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
  [data-animate]:not(.is-visible) { opacity: 0; transform: translateY(16px); }
  .hero [data-animate]:not(.is-visible) { opacity: 1; transform: none; }
}

/* ---------- Ambient motion ---------- */

/* Slow background loops on the landing page. Declared paused; script.js adds .is-live to .hero, .digital-menu
   and .closing only while each is on screen and the tab is visible. Nothing here exists under reduced motion.
   ponytail: reduced motion gets the plain ink closing band (no static glow), same as before this pass. */
@media (prefers-reduced-motion: no-preference) {
  .page-landing .callout-dot { z-index: 1; } /* keeps the signal line under the dot */
  .page-landing .callout-dot::before {
    content: ""; position: absolute; inset: -7px; border-radius: 50%; pointer-events: none;
    border: 2.5px solid var(--accent-bright); background: rgba(10, 107, 254, 0.18); opacity: 0;
    animation: callout-ping 7.5s cubic-bezier(0, 0, 0.2, 1) infinite paused;
  }
  .page-landing .callout::after {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; border-left: 1px solid var(--accent-bright);
    transform: scaleY(0); transform-origin: top; opacity: 0;
    animation: callout-signal 7.5s var(--ease) infinite paused;
  }
  .page-landing .callout--down::after { transform-origin: bottom; }
  .page-landing .callout:nth-of-type(2)::after, .page-landing .callout:nth-of-type(2) .callout-dot::before { animation-delay: 2.5s; }
  .page-landing .callout:nth-of-type(3)::after, .page-landing .callout:nth-of-type(3) .callout-dot::before { animation-delay: 5s; }
  .page-landing .device-frame--tablet { animation: tablet-float 7s ease-in-out infinite paused; }
  .page-landing .live-tag::before { animation: live-breathe 2.4s ease-in-out infinite alternate paused; }
  .page-landing .dm-chip { animation: chip-float 8s ease-in-out infinite paused; }
  .page-landing .dm-link { animation-delay: 4s; }
  .page-landing .closing { position: relative; overflow: hidden; isolation: isolate; }
  .page-landing .closing::before {
    content: ""; position: absolute; inset: -20% -10%; z-index: -1; pointer-events: none;
    background: radial-gradient(40% 60% at 30% 40%, rgba(10, 107, 254, 0.28), transparent 70%);
    animation: closing-drift 24s ease-in-out infinite alternate paused;
  }
  .is-live .device-frame--tablet, .is-live .callout-dot::before, .is-live .callout::after, .is-live .live-tag::before,
  .is-live .dm-chip, .closing.is-live::before { animation-play-state: running; }
  /* Hold the ticket still under a reader's pointer or focus. */
  .dm-device:hover .dm-chip, .dm-device:focus-within .dm-chip { animation-play-state: paused; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 1100px) {
  .page-landing .dm-ticket { animation-name: chip-sink; } /* in flow under the phone: bob down, never over the screen */
}
@media (prefers-reduced-motion: no-preference) and (max-width: 720px) {
  .page-landing .callout-dot::before { inset: -2px; }
}
@keyframes callout-ping { 0%, 6% { transform: scale(1); opacity: 0; } 8% { opacity: 0.9; } 32%, 100% { transform: scale(2.4); opacity: 0; } }
@keyframes callout-signal { 0% { transform: scaleY(0); opacity: 1; } 8% { transform: scaleY(1); opacity: 1; } 22%, 100% { transform: scaleY(1); opacity: 0; } }
@keyframes live-breathe { from { opacity: 1; } to { opacity: 0.35; } }
@keyframes chip-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes tablet-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes chip-sink { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@keyframes closing-drift { from { transform: translate3d(-6%, 0, 0); } to { transform: translate3d(8%, -4%, 0); } }

/* Offscreen sections skip rendering until near the viewport; the anchor scroller in script.js
   re-aims while their real heights come in. */
/* Placeholder heights ~ real heights (1440 here, 390 in the phone block), so the page length barely moves as they render. */
.testimonials, .compare, .digital-menu, .faq { content-visibility: auto; }
.testimonials { contain-intrinsic-size: auto 915px; }
.compare { contain-intrinsic-size: auto 1345px; }
.digital-menu { contain-intrinsic-size: auto 1113px; }
.faq { contain-intrinsic-size: auto 2090px; }

/* ---------- Responsive ---------- */

@media (max-width: 1100px) {
  .screen-thumbs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-copy { max-width: 640px; }
  .lead { max-width: 46ch; }
  .hero-media { padding-top: 56px; }
  .hero-bullets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-bullets li:nth-child(3) { border-left: 0; padding-left: 0; }
  .hero-bullets li:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-group-label { grid-template-columns: auto minmax(0, 1fr); row-gap: 6px; }
  .feature-group-note { grid-column: 2; text-align: left; }
  .partner-card--integration { grid-column: 1 / -1; }
  .faq-layout { grid-template-columns: minmax(0, 1fr); }
  .faq-intro { position: static; }
  .closing-inner { flex-direction: column; align-items: flex-start; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
  .footer-legal { margin-top: 0; }
}

@media (min-width: 721px) and (max-width: 960px) {
  .hero-media { padding-top: 136px; }
  .digital-menu { contain-intrinsic-size: auto 1620px; } /* 810 measured; 1611-1653 across the band */
}

@media (max-width: 720px) {
  .section-header { margin-bottom: 32px; }
  .section-header--split { flex-direction: column; align-items: flex-start; gap: 20px; }
  .cta-row .btn { flex: 1 1 100%; }
  .proof { margin-top: 24px; }

  .hero-media { padding: 28px 0 0; }
  .device-frame--tablet { padding: 6px; border-radius: 14px; }
  .device-screen img { border-radius: 6px; }
  .callout { height: 0 !important; top: var(--y) !important; }
  .callout::before, .callout-label { display: none; }
  .callout-dot {
    top: 0 !important; width: 20px; height: 20px; display: grid; place-items: center;
    box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(11, 23, 38, 0.3);
    font: 700 0.8125rem/1 var(--font-mono); color: #fff;
  }
  .callout--up .callout-dot { transform: translate(-50%, -100%); }
  .callout--down .callout-dot { transform: translate(-50%, 0); }
  .callout-dot::after { content: attr(data-n); }
  .callout-legend {
    position: static; width: auto; height: auto; margin: 16px 0 0; overflow: visible; clip: auto; white-space: normal;
    display: grid; gap: 8px;
    font: 500 0.8125rem/1.35 var(--font-mono); color: var(--ink-2);
  }
  .callout-legend li { display: flex; align-items: center; gap: 10px; }
  .callout-legend b {
    width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 50%;
    background: var(--accent-bright); color: #fff; font-size: 0.8125rem;
  }

  .hero-specs-band { margin-top: 32px; }
  .hero-bullets { grid-template-columns: minmax(0, 1fr); }
  .hero-bullets li, .hero-bullets li:nth-child(n) {
    display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; align-items: baseline;
    padding: 16px 0; border-left: 0; border-top: 1px solid var(--line);
  }
  .hero-bullets li:first-child { border-top: 0; }
  .spec-key { margin: 0; }

  /* One ticket in view: let each hang at its own length. */
  .testimonial-set { gap: 12px; align-items: flex-start; }
  .testimonial-card { flex-basis: min(86vw, 372px); }
  .testimonial-copy.is-clamped { -webkit-line-clamp: 7; line-clamp: 7; }

  .compare-board-top { display: none; }
  .compare-row { grid-template-columns: minmax(0, 1fr); padding: 20px; gap: 10px; }
  .compare-topic { padding: 0 0 4px; }
  .compare-cell { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 12px; row-gap: 8px; padding: 16px; border-radius: var(--r-sm); }
  .compare-cell-portal, .compare-row + .compare-row .compare-cell-portal, .compare-row:last-child .compare-cell-portal { margin: 0; padding: 16px; border: 0; border-radius: var(--r-sm); box-shadow: var(--e2); }
  .compare-cell-typical { border: 1px solid var(--line); }
  .compare-row:last-child .compare-cell-typical { border-radius: var(--r-sm); }
  .compare-cell p { display: contents; }
  .ledger-label {
    position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal;
    grid-column: 1 / -1; grid-row: 1; margin-bottom: 2px;
    font: 500 0.8125rem/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase;
  }
  .compare-cell-portal .ledger-label { color: #9CC2FF; }
  .compare-cell-typical .ledger-label { color: #9A3A2F; }
  .compare-cell-typical { border-color: #F2D3CD; }
  .compare-cell .icon { grid-row: 2; }

  .screen-stage { padding: 6px; border-radius: 14px; }
  .screen-stage img { border-radius: 6px; }
  .screens-caption { white-space: nowrap; }
  .screens-caption > span + span { display: none; }
  .screen-thumbs { gap: 12px; }
  .thumb { font-size: 0.8125rem; }

  .feature-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .feature-group-label { margin-top: 32px; padding-bottom: 12px; margin-bottom: 4px; }
  .feature-group-num { width: 30px; height: 30px; }
  /* Phones: compact rows, icon tile on the left. */
  .feature-card { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; padding: 16px; }
  .feature-icon { grid-row: span 2; width: 40px; height: 40px; margin: 0; }
  .feature-card .icon { width: 20px; height: 20px; }
  .feature-card p { margin-top: 4px; }

  .partner-grid { gap: 12px; }
  .partner-card, .partner-card--integration { grid-column: 1 / -1; }
  /* Phones: logo + category on one line, description full width underneath. */
  .partner-card__link, .partner-card--integration .partner-card__link {
    display: grid; grid-template-columns: 104px minmax(0, 1fr); grid-template-areas: "logo kind" "desc desc";
    align-items: center; column-gap: 16px; row-gap: 14px; padding: 12px 12px 18px;
  }
  .partner-card__logo, .partner-card--integration .partner-card__logo { grid-area: logo; height: 72px; padding: 10px; }
  .partner-card__logo img { max-height: 48px; }
  .partner-card__logo--wordmark img { max-height: 24px; }
  .partner-card__body, .partner-card--integration .partner-card__body { display: contents; }
  .partner-card__kind { grid-area: kind; padding-right: 32px; }
  .partner-card__description { grid-area: desc; padding: 0 4px; }
  .partner-card__name { display: none; }
  .partner-card__go, .partner-card--integration .partner-card__go { top: 12px; right: 12px; width: 24px; height: 24px; padding: 5px; }
  .partners-cta { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 24px 20px; }
  .partners-cta__action { justify-self: start; max-width: 100%; }

  .faq-item p { padding-right: 0; }
  .closing .cta-row { width: 100%; }
  .footer-legal { flex-direction: column-reverse; align-items: stretch; }

  /* Demo modal: bottom sheet that starts 48px down, so a tap at the top of the screen still closes it. */
  .testimonials { contain-intrinsic-size: auto 830px; }
  .compare { contain-intrinsic-size: auto 3070px; }
  .digital-menu { contain-intrinsic-size: auto 1784px; }
  .faq { contain-intrinsic-size: auto 2430px; }

  .demo-modal { display: block; padding: 0; }
  .demo-dialog { position: absolute; inset: 48px 0 0; width: auto; max-height: none; border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .demo-close { top: 12px; right: 12px; }
  .demo-content { padding: 0 20px; scroll-padding-block: 96px 160px; }
  /* A 64px sticky band behind the close button: fields scroll under the band, never under the button.
     It takes 28px of flow (as before) and the eyebrow + title sit above it, so the resting sheet is unchanged. */
  .demo-content::before { height: 64px; margin: 0 -20px -36px; background: linear-gradient(var(--surface) 58px, rgba(255, 255, 255, 0)); }
  .demo-header .eyebrow, .demo-header h2 { position: relative; z-index: 2; }
  .demo-header { margin-bottom: 24px; }
  .demo-header .eyebrow, .demo-header h2 { padding-right: 48px; }
  .demo-header h2 { font-size: 1.625rem; }
  /* One column needs no row alignment, so empty error rows collapse. */
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .field-error { margin-bottom: 16px; }
  .field-error:empty { min-height: 0; }
  .form-actions { flex-wrap: wrap; row-gap: 10px; margin: 0 -20px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); }
  .form-actions .form-note { order: 0; flex: 1 0 100%; margin: 0; }
  .form-actions .btn-primary { flex: 2 1 0; }
  .form-actions .btn-secondary { flex: 1 1 0; }
  .form-actions .btn { padding: 0 12px; }
  .demo-modal.is-success .demo-dialog { inset: auto 0 0; max-height: calc(100dvh - 48px); }
  .demo-success { padding: 40px 20px calc(24px + env(safe-area-inset-bottom)); }
  .demo-success-card h2 { font-size: 1.75rem; }
  .demo-success-card .btn { justify-self: stretch; }
}

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

/* ================================================================
   Pages (calculator / download / 404): owned by the PAGES pass.
   Add page-specific rules below this line.
   ================================================================ */

/* ---------- Secondary pages: download + 404 ---------- */
/* Port of the download/404 parts of design/daylight-mockups/pages.css. The calculator lives in calculator.css. */

/* Download */
.dl-hero { position: relative; padding-block: clamp(40px, 6vw, 88px) var(--section-pad); }
.dl-hero::before, .error-page::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(11, 23, 38, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11, 23, 38, 0.06) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 38% 60% at 72% 46%, #000 10%, transparent 70%);
  mask-image: radial-gradient(ellipse 38% 60% at 72% 46%, #000 10%, transparent 70%);
}
.dl-grid {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(40px, 6vw, 96px); align-items: center;
}
.dl-eyebrow { margin: 0; }
.dl-eyebrow::before { content: ""; width: 12px; height: 12px; flex: none; background: var(--glyph) center / contain no-repeat; }
.dl-copy h1 {
  margin: 18px 0 20px;
  font-size: clamp(2.5rem, 1.6rem + 3.4vw, 4.25rem);
  line-height: 0.98; letter-spacing: -0.032em; font-stretch: 88%;
}
.dl-tags { margin-top: 24px; }
.dl-note {
  display: flex; gap: 12px; align-items: flex-start; max-width: 50ch;
  margin-top: 16px; padding: 14px 16px;
  border: 1px dashed var(--line-strong); border-radius: var(--r-sm); background: var(--surface);
  font-size: 0.9375rem; line-height: 1.5; color: var(--ink-2);
}
.dl-note .icon { width: 18px; height: 18px; margin-top: 2px; color: var(--accent); }
.dl-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 28px; max-width: 520px; }
.dl-actions .btn { justify-content: space-between; }
.dl-actions .btn .icon { opacity: 0.8; }
.dl-actions .dl-back { grid-column: 1 / -1; justify-content: center; }

.dl-proof { margin: 36px 0 0; max-width: 520px; border-top: 1px solid var(--ink); }
.dl-proof > div {
  display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; align-items: baseline;
  padding: 16px 0; border-bottom: 1px solid var(--line-strong);
}
.dl-proof dt { font: 600 0.8125rem/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.dl-proof dd { margin: 0; font: 600 1.0625rem/1.35 var(--font-display); color: var(--ink); }

.dl-media { position: relative; display: flex; flex-direction: column; align-items: center; padding: 8px 0 40px; }
.dl-status { margin-bottom: 20px; }
.dl-phone { width: min(100%, 300px); }
/* The screenshot carries its own status bar, so no 44px gutter here (unlike the digital-menu phone). */
.dl-phone .phone-screen { aspect-ratio: 368 / 800; padding-top: 0; background: #F2F4F7; }
.dl-phone .phone-screen::before { top: 8px; width: 76px; height: 22px; margin-left: -38px; }
.dl-phone .phone-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.dl-overlay {
  position: absolute; left: 50%; bottom: 0; z-index: 2;
  width: min(100%, 280px); transform: translateX(-78%);
  display: grid; gap: 8px; padding: 16px 18px 18px;
  background: var(--ink); border-radius: var(--r-md); box-shadow: var(--e3);
}
.dl-overlay span {
  display: flex; align-items: center; gap: 8px;
  font: 500 0.8125rem/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--frost-2);
}
.dl-overlay span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #2FBF71; box-shadow: 0 0 0 3px rgba(47, 191, 113, 0.22); }
.dl-overlay strong { font: 600 1.125rem/1.3 var(--font-display); color: var(--frost); letter-spacing: -0.01em; }

/* 404: a ticket with a torn-off stub. .error-panel / .error-actions are the test hooks. */
.error-page::before {
  -webkit-mask-image: radial-gradient(ellipse 50% 70% at 50% 50%, #000 15%, transparent 72%);
  mask-image: radial-gradient(ellipse 50% 70% at 50% 50%, #000 15%, transparent 72%);
}
.nf-ticket {
  position: relative; max-width: 940px; padding: 0;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}
.nf-stub {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
  padding: 40px; border-right: 1.5px dashed var(--line-strong);
  border-radius: var(--r-lg) 0 0 var(--r-lg);
  background-color: var(--surface);
  background-image:
    linear-gradient(to right, rgba(11, 23, 38, 0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11, 23, 38, 0.055) 1px, transparent 1px);
  background-size: 24px 24px; background-position: 40px 40px;
}
/* Notches where the perforation meets the edges. */
.nf-stub::before, .nf-stub::after {
  content: ""; position: absolute; right: -12px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--paper); border: 1px solid var(--line);
}
.nf-stub::before { top: -12px; clip-path: inset(50% 0 0 0); }
.nf-stub::after { bottom: -12px; clip-path: inset(0 0 50% 0); }
.mark-missing { width: 96px; height: 96px; }
.nf-code {
  font: 600 clamp(5.5rem, 3rem + 7vw, 7.5rem)/0.85 var(--font-mono); letter-spacing: -0.06em; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.nf-body { padding: 44px 48px 48px; }
.nf-body h1 { margin: 28px 0 16px; }
.nf-body .lead { max-width: 40ch; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); }
.nf-body .error-copy { font-size: 1rem; }

@media (max-width: 960px) {
  .dl-grid { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
  .nf-ticket { grid-template-columns: minmax(0, 1fr); }
  .nf-stub { flex-direction: row; align-items: flex-end; padding: 32px; border-right: 0; border-bottom: 1.5px dashed var(--line-strong); border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .nf-stub::before, .nf-stub::after { top: auto; bottom: -12px; right: auto; clip-path: inset(0 0 0 50%); }
  .nf-stub::before { left: -12px; }
  .nf-stub::after { left: auto; right: -12px; clip-path: inset(0 50% 0 0); }
}

@media (max-width: 720px) {
  .dl-actions { grid-template-columns: minmax(0, 1fr); }
  .dl-proof > div { grid-template-columns: 96px minmax(0, 1fr); }
  .dl-media { padding-bottom: 0; }
  .dl-phone { width: min(78%, 260px); }
  /* Caption under the phone instead of over the bezel. */
  .dl-overlay { position: relative; left: auto; bottom: auto; transform: none; margin-top: 16px; width: min(100%, 320px); }

  .nf-stub { padding: 24px; gap: 24px; }
  .mark-missing { width: 72px; height: 72px; }
  .nf-body { padding: 28px 24px; }
  .nf-body h1 { margin-top: 22px; }
}