/* Food truck Daylight palette with the updated shared page layouts. */
@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 {
  --accent-bright: #0A6BFE;
  --accent-wash: #E3EBFA;
  --accent-line: #B9CEFA;
  --amber: #B86E00;
  --frost: #FBFEFF;
  --frost-2: #A9B4C4;

  --paper: #EFECE6;
  --surface: #F9F7F3;
  --sunk: #E7E3DA;

  --testimonial-foot: var(--sunk);

  --ink: #0B1726;
  --ink-2: #334155;
  --ink-3: #5A6576;
  --line: #D9D4CA;
  --line-strong: #C8C2B6;
  --field-border: #80858D;

  --accent: #0052E0;
  --accent-hover: #0041B8;
  --on-accent: #FFFFFF;
  --dark-accent: #7FB0FF;
  --glyph-tile: var(--accent-bright);
  --star: var(--amber);
  --live-dot: var(--go);
  --go: #178A4B;
  --go-ink: #0F6B39;
  --danger: #B42318;
  --typ-tint: color-mix(in srgb, var(--danger) 7%, var(--surface));
  --typ-ink: #9A3A2F;
  --bar: #75808D;

  --bezel: #0E1A2A;
  --night: var(--ink);
  --night-raised: #13223A;
  --on-dark: var(--frost);
  --on-dark-2: var(--frost-2);
  --night-line: rgba(251, 254, 255, 0.12);
  --scrim: rgba(11, 23, 38, 0.48);

  --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: 6px;
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-xl: 44px;
  --r-pill: 999px;

  --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);

  --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-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-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-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(--night); color: var(--on-dark); border-radius: var(--r-sm); }
.skip-link:focus { top: 12px; color: var(--on-dark); }

.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; }
.page-landing { --section-pad: clamp(56px, 7vw, 96px); }
.section, .testimonials, .compare, .screens, .features, .digital-menu, .partners, .faq { padding-block: var(--section-pad); }
.band--sunk { background: var(--sunk); }
.band--night { background: var(--night); color: var(--on-dark-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: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); color: var(--on-accent); }
.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(--on-dark); border-color: color-mix(in srgb, var(--on-dark) 40%, transparent); }
.btn-night:hover { border-color: var(--on-dark); color: var(--on-dark); }
.btn-ink { background: var(--night); color: var(--on-dark); border-color: var(--night); }
.btn-ink:hover { background: var(--night-raised); border-color: var(--night-raised); color: var(--on-dark); }
.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 #tabl-summary { --sec: "06"; }
.page-landing #partners { --sec: "07"; }
.page-landing #faq { --sec: "08"; }
.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(--on-dark-2); }
.page-landing .band--night .section-header .eyebrow::before { background-image: var(--glyph-night); color: var(--on-dark); }

.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(--on-dark); }
.band--night .section-header h2 + p { color: var(--on-dark-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: var(--paper);
  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, .footer-logo-plate { 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; }
.footer-logo-plate { display: inline-flex; align-items: center; min-height: 44px; }
.footer-logo { display: block; width: auto; height: 34px; padding: 0; border-radius: 0; background: transparent; }
.nav-links { display: flex; align-items: center; gap: 14px; 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-links .nav-calculator-cta[aria-current="page"] { background: var(--accent-wash); border-color: var(--accent-line); color: var(--accent-hover); }
.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 (min-width: 1101px) {
  .nav-links > a:not(.btn) + a:not(.btn) { position: relative; }
  .nav-links > a:not(.btn) + a:not(.btn)::before {
    content: ""; position: absolute; left: -7px; top: 50%; width: 1px; height: 18px;
    transform: translate(-50%, -50%); background: color-mix(in srgb, var(--ink) 14%, transparent); pointer-events: none;
  }
}

@media (min-width: 1101px) and (max-width: 1240px) {
  .nav { gap: 16px; }
  .nav-links { gap: 8px; }
  .nav-links > a:not(.btn) + a:not(.btn)::before { left: -4px; }
}

@media (max-width: 1100px) {
  .nav { height: 56px; gap: 16px; justify-content: space-between; }
  .brand img { height: 26px; }
  .site-header .brand img, .footer-logo { height: 30px; }
  .site-header .nav-toggle { display: inline-flex; border-radius: var(--r-sm); }
  .nav-links { display: none; }
  .nav-open .nav-links {
    display: grid; position: fixed; inset: 56px 0 auto 0; z-index: 49;
    grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 8px;
    max-height: calc(100dvh - 56px); overflow-y: auto; overscroll-behavior: contain;
    padding: 16px var(--gutter) 20px; margin: 0;
    background: var(--paper); border-bottom: 1px solid var(--line); border-radius: 0 0 20px 20px; box-shadow: var(--e3);
  }
  .nav-open .nav-links > a:not(.btn) {
    min-height: 48px; display: flex; align-items: center; padding: 12px 14px;
    font-size: 1rem; font-weight: 600; line-height: 1.25; color: var(--ink);
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
  }
  .nav-open .nav-links > a:last-of-type { grid-column: 1 / -1; }
  .nav-open .nav-links > a:not(.btn):hover { background: var(--accent-wash); border-color: var(--accent-line); }
  .nav-open .nav-actions { grid-column: 1 / -1; flex-direction: column; align-items: stretch; margin: 8px 0 0; padding-top: 16px; border-top: 1px solid var(--line); gap: 8px; }
  .nav-open .nav-links > .btn { margin-top: 10px; }
  .nav-open .nav-links .btn { min-height: 48px; font-size: 0.9375rem; 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: color-mix(in srgb, var(--night) 24%, transparent); }
}
@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; }
  .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, color-mix(in srgb, var(--ink) 6%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--ink) 6%, transparent) 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(--star); letter-spacing: 0.08em; }

/* --hero-media-top is the tablet's top edge; the ambient steam (end of file) rises from it, so both move together. */
.hero-media { position: relative; --hero-media-top: 64px; padding: var(--hero-media-top) 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 color-mix(in srgb, var(--on-dark) 8%, transparent);
}
.device-frame--tablet::before {
  content: ""; position: absolute; top: 50%; left: 5px; width: 3px; height: 3px; margin-top: -1.5px;
  border-radius: 50%; background: var(--night-raised);
}
.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(--dark-accent); transform: translate(-50%, -50%);
  box-shadow: 0 0 0 2px var(--night);
}
.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(--night); }
.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.3fr) minmax(0, 1fr); }
.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(--night); color: var(--on-dark); border-bottom-color: color-mix(in srgb, var(--on-dark) 14%, transparent); 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(--night); color: var(--on-dark); font-weight: 500; box-shadow: 14px 0 28px -18px color-mix(in srgb, var(--ink) 55%, transparent), -14px 0 28px -18px color-mix(in srgb, var(--ink) 55%, transparent); }
.compare-row + .compare-row .compare-cell-portal { border-top: 1px solid var(--night-line); 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: var(--on-accent); 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: var(--typ-tint);
  background-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--danger) 6%, transparent) 0 1px, transparent 1px 9px);
}
.compare-cell-typical .icon { color: var(--on-accent); background: var(--danger); box-shadow: none; stroke-width: 3.2; }
.compare-cell-typical b { color: var(--typ-ink); font-weight: 700; }
.compare-board-top span:nth-child(3) { color: var(--typ-ink); }
.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 color-mix(in srgb, var(--bezel) 90%, transparent);
}
.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(--on-dark-2);
}
.screens-caption b { color: var(--on-dark); 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(--on-dark-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(--on-dark-2); }
.thumb.is-active { color: var(--on-dark); }
.thumb.is-active img { opacity: 1; box-shadow: 0 0 0 2px var(--dark-accent); }
.thumb.is-active > span { border-top-color: var(--dark-accent); }
.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: var(--on-dark); }
.band--night :focus-visible { outline-color: var(--dark-accent); }

@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(--night); color: var(--on-dark); 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(--night); border-color: var(--night); box-shadow: var(--e2); }
.feature-card--highlight h3 { color: var(--on-dark); }
.feature-card--highlight p { color: var(--on-dark-2); }
.feature-card--highlight .feature-icon { background: var(--dark-accent); box-shadow: none; color: var(--night); }

/* ---------- 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) it wraps naturally. Phones (720 and under) wrap too, with
   text-wrap: balance: a no-wrap phrase ran 14px off a 390 screen under WCAG 1.4.12 text spacing. */
@media (min-width: 1101px), (min-width: 721px) 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(--night); color: var(--on-dark-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(--on-dark-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(--on-dark); }
.dm-try .demo-link { margin-top: 14px; }
.dm-try .demo-link:focus-visible { outline-color: var(--dark-accent); }
.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(--live-dot); box-shadow: 0 0 0 3px color-mix(in srgb, var(--live-dot) 22%, transparent); }
.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 color-mix(in srgb, var(--on-dark) 8%, transparent);
}
.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(--night); color: var(--on-dark); 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(--night); color: var(--on-dark); 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); }
}

/* ---------- TABL summary ---------- */

.tabl-summary-panel {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 64px;
  padding: clamp(24px, 4.5vw, 56px); border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--e1);
}
.tabl-summary-intro.section-header { grid-column: 1 / -1; max-width: none; margin-bottom: 0; }
.tabl-summary-intro.section-header h2 {
  font-stretch: normal; font-size: clamp(2rem, 3.8vw, 3.375rem); font-weight: 650;
  line-height: 1.04; letter-spacing: -0.035em; text-wrap: balance;
}
.tabl-summary-intro h2 + p { max-width: 76ch; margin-top: 20px; font-size: 1.1875rem; line-height: 1.6; color: var(--ink-2); }
.tabl-summary-team { width: 100%; max-width: 540px; margin: 0; }
.tabl-summary-team img { width: 100%; height: auto; border-radius: var(--r-md); }
.tabl-summary-team figcaption { margin-top: 14px; font-size: 0.9375rem; line-height: 1.5; color: var(--ink-3); }
.tabl-summary-panel strong { color: var(--accent-hover); }
.tabl-summary-promises h3 { font-size: 1.25rem; font-weight: 650; line-height: 1.25; letter-spacing: -0.015em; }
.tabl-summary-promises p { margin-top: 10px; font-size: 1.0625rem; line-height: 1.55; color: var(--ink-2); }
.tabl-summary-promises > div + div { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.tabl-summary-invite {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding-top: 28px; border-top: 1px solid var(--line);
}
.tabl-summary-invite p { font: 650 clamp(1.25rem, 2vw, 1.625rem)/1.25 var(--font-display); letter-spacing: -0.02em; }
.tabl-summary-invite .btn { flex: none; }
@media (max-width: 960px) {
  .tabl-summary-panel { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .tabl-summary-intro h2 { max-width: 22ch; }
  .tabl-summary-intro h2 + p { max-width: 60ch; }
  .tabl-summary-team { margin-inline: auto; }
}
@media (max-width: 599px) {
  .tabl-summary-invite { flex-direction: column; align-items: stretch; gap: 20px; }
}

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

/* Two groups that say what each partner is: built-in integrations (wide) and the 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 2; 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: var(--surface);
}
.partner-card--integration .partner-card__logo { flex: 0 0 46%; }
.partner-card__logo--dark { background: var(--night); border-color: var(--night); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--on-dark) 6%, transparent); }
.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--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__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: color-mix(in srgb, var(--surface) 92%, transparent); 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 a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }

/* ---------- 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(--night); border-color: var(--night); color: var(--on-dark); }
.faq-item p { max-width: 64ch; padding: 0 48px 22px 0; color: var(--ink-2); font-size: 1rem; }

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

.closing { background: var(--night); color: var(--on-dark-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(--on-dark);
}
.closing p { margin-top: 18px; font-size: 1.1875rem; color: var(--on-dark-2); }
.closing .cta-row { margin-top: 0; flex: none; }

.site-footer { background: var(--night); color: var(--on-dark-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-brand { margin-top: 28px; font: 600 1.0625rem/1.2 var(--font-display); color: var(--on-dark); }
.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(--on-dark-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(--on-dark); text-decoration: none; text-align: left;
}
.footer-link-grid a:hover, .footer-link-grid button:hover { color: var(--on-dark); text-decoration: underline; text-underline-offset: 0.2em; }
.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(--on-dark-2); }
.footer-legal > p a { color: var(--dark-accent); }
.footer-legal > p a:hover { color: var(--on-dark); }
.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(--on-dark); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--on-dark) 20%, transparent);
}
.footer-social:hover { color: var(--on-dark); box-shadow: inset 0 0 0 1px var(--on-dark); }
.footer-social svg { width: 18px; height: 18px; }
.site-footer :focus-visible, .closing :focus-visible { outline-color: var(--dark-accent); }

/* ---------- 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); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.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 32px; 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: 28px; margin-inline: -32px;
  background: linear-gradient(var(--surface) 45%, color-mix(in srgb, var(--surface) 0%, transparent));
}
.demo-header { margin-bottom: 20px; }
.demo-header .eyebrow, .demo-header h2 { padding-right: 56px; }
.demo-header .eyebrow { margin-bottom: 10px; }
.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; }
.demo-form-section { display: none; }
.field { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 6px; min-width: 0; }
.field-label { align-self: end; font: 600 0.9375rem/1.35 var(--font-display); color: var(--ink); }
.field > input, .field > select { align-self: start; }

.field input, .field select {
  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 {
  -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 { border-color: var(--ink-3); }
.field input:focus-visible, .field select:focus-visible {
  outline: none; border-color: var(--accent); border-radius: var(--r-sm);
  box-shadow: 0 0 0 2px var(--accent), 0 0 0 6px color-mix(in srgb, var(--accent) 22%, transparent);
}
.field.is-invalid input, .field.is-invalid select {
  border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger);
}
.field-error { display: flex; gap: 6px; min-height: 0; margin-bottom: 10px; 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-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 color-mix(in srgb, var(--danger) 14%, transparent); }
.field--referral > .btn { justify-self: start; min-height: 44px; font-size: 0.9375rem; }

.form-note { margin: 4px 0 16px; 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 -32px; padding: 12px 32px 16px;
  background: var(--surface); border-top: 1px solid var(--line);
  box-shadow: 0 -10px 20px -16px color-mix(in srgb, var(--ink) 28%, transparent);
}
.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%, 540px); }
.demo-success { overflow-y: auto; overscroll-behavior: contain; padding: 44px 40px 32px; }
.demo-success-card { display: grid; justify-items: center; text-align: center; }
.demo-success-icon {
  display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 24px; border-radius: 50%;
  background: color-mix(in srgb, var(--go) 12%, var(--surface)); color: var(--go-ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--go) 24%, transparent);
}
.demo-success-icon svg { width: 36px; height: 36px; display: block; }
.demo-success-card h2 { max-width: 16ch; font-size: 2.25rem; line-height: 1.12; letter-spacing: -0.035em; font-stretch: 92%; text-wrap: balance; }
.demo-success-lede { max-width: 34ch; margin-top: 14px; font-size: 1.0625rem; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.demo-success-next { justify-self: stretch; margin-top: 28px; padding-block: 24px; border-block: 1px solid var(--line); text-align: left; }
.demo-success-next h3 { font: 650 1.0625rem/1.35 var(--font-display); letter-spacing: -0.01em; }
.demo-success-next p { margin-top: 8px; font-size: 1rem; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.demo-success-card .btn { justify-self: stretch; margin-top: 28px; min-height: 52px; }
.demo-success-contact { margin-top: 16px; font-size: 0.875rem; line-height: 1.6; color: var(--ink-3); }
.demo-success-contact a { display: inline-block; padding-block: 8px; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 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; }
}

/* Offscreen sections skip rendering until near the viewport; the anchor scroller in script.js
   re-aims while their real heights come in. */

.testimonials, .compare, .digital-menu, .faq { content-visibility: auto; }
.testimonials { contain-intrinsic-size: auto 988px; }
.compare { contain-intrinsic-size: auto 1415px; }
.digital-menu { contain-intrinsic-size: auto 1142px; }
.faq { contain-intrinsic-size: auto 2082px; }

/* ---------- 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 { --hero-media-top: 136px; padding-top: var(--hero-media-top); } /* the steam follows (end of file) */
  .digital-menu { contain-intrinsic-size: auto 1628px; } /* 810 measured; 1626-1628 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 var(--night), 0 2px 6px color-mix(in srgb, var(--ink) 30%, transparent);
    font: 700 0.8125rem/1 var(--font-mono); color: var(--night);
  }
  .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(--night); color: var(--dark-accent); 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 { background: var(--accent-wash); overflow: hidden; }
  .compare-board-top { display: block; }
  .compare-board-top span:first-child, .compare-board-top span:last-child { display: none; }
  .compare-board-top span:nth-child(2) { margin: 0; padding: 20px; border-radius: 0; }
  .compare-row { grid-template-columns: minmax(0, 1fr); padding: 20px; gap: 16px; }
  .compare-topic { gap: 10px; padding: 0; }
  .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: 0; border: 0; border-radius: 0; box-shadow: none; }
  .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 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .compare-cell-typical .ledger-label { color: var(--typ-ink); }
  .compare-cell-typical { border-color: color-mix(in srgb, var(--typ-ink) 16%, var(--typ-tint)); }
  .compare-cell-portal .compare-value { grid-column: 2; grid-row: 1; }
  .compare-cell .icon { grid-row: 2; }
  .compare-cell-portal .icon { grid-row: 1; }

  .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 beside category and name, 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" "logo name" "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__go, .partner-card--integration .partner-card__go { top: 12px; right: 12px; width: 24px; height: 24px; padding: 5px; }
  .partners-cta { padding: 8px 16px; }

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

  .testimonials { contain-intrinsic-size: auto 934px; }
  .compare { contain-intrinsic-size: auto 3266px; }
  .digital-menu { contain-intrinsic-size: auto 1788px; }
  .faq { contain-intrinsic-size: auto 2497px; }

  /* Demo modal: bottom sheet that starts 48px down, so a tap at the top of the screen still closes it. */

  .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, color-mix(in srgb, var(--surface) 0%, transparent)); }
  .demo-header .eyebrow, .demo-header h2 { position: relative; z-index: 2; }
  .demo-header { margin-bottom: 16px; }
  .demo-header .eyebrow { font: 600 0.9375rem/1.3 var(--font-display); letter-spacing: 0; text-transform: none; }
  .demo-header .eyebrow, .demo-header h2 { padding-right: 48px; }
  .demo-header h2 { font-size: 1.625rem; line-height: 1.15; text-wrap: balance; }
  /* One column needs no row alignment, so empty error rows collapse. */
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .demo-form-section { display: block; grid-column: 1 / -1; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); font: 650 1.0625rem/1.3 var(--font-display); letter-spacing: -0.01em; }
  .field + .demo-form-section { margin-top: 8px; }
  .demo-form .field-label { font-size: 1rem; }
  .demo-form .field > input, .demo-form .field > select { height: 52px; background-color: color-mix(in srgb, var(--paper) 40%, var(--surface)); }
  .field-error { margin-bottom: 8px; }
  .form-actions { flex-wrap: wrap; row-gap: 8px; margin: 0 -20px; padding: 10px 20px calc(10px + 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 { min-height: 48px; padding: 0 12px; }
  .form-actions .btn-secondary { border-color: transparent; background: none; }
  .demo-modal.is-success .demo-dialog { inset: auto 0 0; max-height: calc(100dvh - 48px); }
  .demo-success { padding: 32px 24px calc(20px + env(safe-area-inset-bottom)); }
  .demo-success-card h2 { font-size: 2rem; }
  .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, color-mix(in srgb, var(--ink) 6%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--ink) 6%, transparent) 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: var(--surface); }
.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(--night); 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(--on-dark-2);
}
.dl-overlay span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--live-dot); box-shadow: 0 0 0 3px color-mix(in srgb, var(--live-dot) 22%, transparent); }
.dl-overlay strong { font: 600 1.125rem/1.3 var(--font-display); color: var(--on-dark); 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, color-mix(in srgb, var(--ink) 5.5%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--ink) 5.5%, transparent) 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; }
}

/* ---------- 1. Type ---------- */

h1, h2, h3 { font-optical-sizing: auto; font-stretch: normal; }
.section-header h2 { font-size: clamp(1.875rem, 3.4vw, 3rem); line-height: 1.04; letter-spacing: -0.03em; font-weight: 650; }
.hero h1 {
  font-size: clamp(2.75rem, 5vw, 4.5rem);
  line-height: 0.96; letter-spacing: -0.04em; font-weight: 680;
}

@media (min-width: 961px) { .hero h1 { margin-right: -32px; } }

/* ---------- 2. Primitives ---------- */

:focus-visible { outline-width: 3px; }
.btn { border-radius: var(--r-pill); padding: 0 20px; }
.btn-lg { padding: 0 26px; }
.btn-secondary:hover { background: var(--paper); }

.page-landing main > section .section-header .eyebrow { align-items: baseline; max-width: 360px; font-weight: 600; }
.page-landing main > section .section-header .eyebrow::before,
.page-landing .band--night .section-header .eyebrow::before {
  content: ""; order: 1; flex: 1; min-width: 24px; padding: 0; background: none;
  border-bottom: 2px dotted var(--line-strong); transform: translateY(-3px);
}
.page-landing main > section .section-header .eyebrow::after { content: var(--sec); order: 2; color: var(--accent); font-variant-numeric: tabular-nums; }
.page-landing .band--night .section-header .eyebrow::before { border-bottom-color: color-mix(in srgb, var(--on-dark-2) 45%, transparent); }
.page-landing .band--night .section-header .eyebrow::after { color: var(--dark-accent); }

/* ---------- 4. Header / nav ---------- */

/* The bar is --paper itself (base.css), so it never reads brighter than the page. */
.nav-toggle { border-radius: var(--r-pill); border-color: var(--field-border); }

/* ---------- 5. Hero ---------- */

.hero { overflow: clip; padding-top: clamp(36px, 5vw, 72px); }
.hero::before { content: none; } /* the saucer is the only texture: no grid or gradient (the one glow is the ambient morning light, end of file) */
.hero .lead { max-width: 37ch; }

/* Proof row as a loyalty punch card: one ringed stamp per published testimonial. */
.proof { flex-wrap: wrap; gap: 12px 16px; }
.proof-avatars {
  gap: 8px; padding: 7px; border-radius: 14px;
  background: var(--surface); border: 1.5px dashed var(--line-strong);
}
.proof-avatars > span, .proof-avatars > span:first-child {
  width: 40px; height: 40px; margin: 0; border: 0;
  background: var(--surface); box-shadow: 0 0 0 2px var(--dark-accent);
}

.hero-media, .saucer { position: relative; isolation: isolate; }
.hero-media::before, .hero-media::after, .saucer::before, .saucer::after {
  content: ""; position: absolute; left: calc(50% + var(--saucer-x, 0px)); top: var(--saucer-y, 50%); z-index: -1; aspect-ratio: 1; border-radius: 50%;
  transform: translate(-50%, -50%); pointer-events: none;
}
.hero-media::before, .saucer::before { width: var(--saucer, 100%); background: var(--sunk); box-shadow: inset 0 0 0 1px var(--line); }
.hero-media::after, .saucer::after {
  width: calc(var(--saucer, 100%) + 12%);
  border: 1px solid var(--line-strong); outline: 1px solid var(--line-strong); outline-offset: 28px;
}
.hero-media { padding-bottom: 128px; --saucer-x: 24px; } /* bottom room for the three-line callout 03; top stays base.css */

.device-frame--tablet { padding: 12px; } /* radius 24 (--r-lg), 1px on-dark rim + --e3 come from base.css */
.device-screen img { border-radius: 12px; }

.callout-label {
  gap: 9px; padding: 8px 12px; border: 0; border-radius: var(--r-sm);
  background: var(--night); color: var(--on-dark); box-shadow: var(--e2);
}
.callout-label b, .callout-label em { font-weight: 700; color: var(--dark-accent); }
.callout-label:has(small) { align-items: flex-start; }
.callout-label small, .callout-legend small { display: block; margin-top: 6px; font: 500 0.8125rem/1.3 var(--font-mono); }
/* The ticket line wraps to two balanced lines on the chip too (under 22rem), so the flipped chip stays clear of the
   proof row; the chip's first line keeps base.css's nowrap. */
.callout-label small { max-width: 22rem; white-space: normal; color: var(--on-dark-2); }
.callout-label small, .callout-legend small { text-wrap: balance; }
.callout--down.callout--flip .callout-label { transform: translate(calc(-100% + 12px), 100%); }
@media (prefers-reduced-motion: no-preference) {
  /* Leaders draw once; nothing loops. */
  .callout::before { transform-origin: 0 100%; animation: leader-grow 700ms var(--ease) 250ms both; }
  .callout--down::before { transform-origin: 0 0; }
  @keyframes leader-grow { from { transform: scaleY(0); } }
}

.hero-specs-band { margin-top: 8px; background: var(--night); border: 0; color: var(--on-dark); }
.hero-bullets { gap: 28px 40px; padding-block: 30px 32px; }
.hero-bullets li, .hero-bullets li:nth-child(n) {
  display: block; padding: 0; border: 0;
  font-size: 0.9375rem; line-height: 1.5; color: var(--on-dark);
}
.spec-key {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px;
  font: 700 0.8125rem/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--dark-accent);
}
.spec-key::after { content: ""; flex: 1; min-width: 16px; border-bottom: 2px dotted color-mix(in srgb, var(--dark-accent) 55%, transparent); transform: translateY(-3px); }

.rail-controls { gap: 10px; }
.section-header--split > .rail-controls { max-width: 100%; } /* column width, not the 700px text cap: at 320 this is what makes the holes shrink */
.rail-btn { flex: none; border-radius: 50%; }
/* One hole per card on one line: holes are 10px (8px on phones) and shrink to share whatever the arrows and
   "01 / 13" leave, so the row never overflows whatever the card count or the device's monospace font
   (13 holes come out about 6px at 320). */
.punches { display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; min-width: 0; }
.punches i { width: 10px; min-width: 0; aspect-ratio: 1; border-radius: 50%; border: 1.5px solid var(--field-border); }
.punches i.is-on { background: var(--accent); border-color: var(--accent); }
.rail-count { flex: none; min-width: 0; text-align: left; white-space: nowrap; }
@media (max-width: 440px) {
  .punches { gap: 4px; margin-left: 2px; }
  .punches i { width: 8px; }
}
@media (max-width: 359px) {
  .rail-controls { gap: 8px; }
  .punches { gap: 3px; }
}

.testimonial-set { gap: 20px; padding-bottom: 28px; } /* room for the --e2 shadow inside the scroller */
.testimonial-card {
  flex-basis: clamp(344px, 29vw, 360px); overflow: hidden; /* 344 min: the sleeve row (logo, name, source) keeps names to two lines */
  border-radius: var(--r-md) var(--r-md) 22px 22px; box-shadow: var(--e2);
}
.ticket-stub { padding: 20px 22px 0; border-bottom: 0; }
.ticket-stub::before, .ticket-stub::after { content: none; }
.ticket-stub > span:first-child {
  display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 8px;
  border: 2px solid var(--accent); border-radius: 48% 52% 50% 46% / 54% 46% 54% 46%; /* a hand-drawn ring, not a perfect circle */
  font: 700 0.875rem/1 var(--font-mono); letter-spacing: 0.02em; color: var(--accent); transform: rotate(-6deg);
}
.ticket-stub .stars { color: var(--star); font-size: 1rem; letter-spacing: 0.08em; }
.testimonial-copy { padding: 16px 22px 0; margin-bottom: 22px; font-size: 1.0625rem; } /* no bottom padding: the clamp would show line 10 in it */
.testimonial-copy strong { color: var(--ink); font-weight: 700; }
.ticket-more { align-self: flex-start; margin: -12px 18px 14px; }
.ticket-foot {
  margin-top: auto; min-height: 108px; padding: 26px 22px 18px; /* = a two-line name, so every sleeve in the rail starts level */
  background: var(--testimonial-foot) repeating-linear-gradient(90deg, color-mix(in srgb, var(--ink) 7%, transparent) 0 1px, transparent 1px 7px);
  border-radius: 50% 50% 0 0 / 16px 16px 0 0; /* the sleeve's printed arc */
}
.testimonial-logo { width: 54px; height: 54px; box-shadow: 0 0 0 2px var(--surface); }
.testimonial-business { font-weight: 650; }
.testimonial-owner { color: var(--ink-2); white-space: nowrap; }
.ticket-source { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.ticket-source:hover { color: var(--ink); text-decoration-thickness: 2px; }

.compare-board-top span:nth-child(2) {
  background: var(--night); color: var(--on-dark); border-bottom-color: var(--night-line);
  font: 700 1.375rem/1.2 var(--font-display); letter-spacing: -0.01em; text-transform: none;
  box-shadow: inset 0 4px 0 var(--dark-accent);
}
.compare-board-top span:nth-child(2)::before { width: 20px; height: 20px; background-image: var(--glyph-night); }
.compare-cell-portal {
  background: var(--accent-wash); color: var(--ink); font-size: 1.0625rem;
  box-shadow: inset 2px 0 0 var(--accent), inset -2px 0 0 var(--accent),
    12px 0 24px -18px color-mix(in srgb, var(--ink) 34%, transparent), -12px 0 24px -18px color-mix(in srgb, var(--ink) 34%, transparent);
}
.compare-cell-portal strong { color: var(--accent-hover); font-weight: 700; }
.compare-row + .compare-row .compare-cell-portal { border-top-color: var(--accent-line); }
.compare-row:last-child .compare-cell-portal {
  box-shadow: inset 2px 0 0 var(--accent), inset -2px 0 0 var(--accent), inset 0 -2px 0 var(--accent), var(--e2);
}
.ledger-num { color: var(--accent); font-weight: 600; }

.screen-stage { border-radius: var(--r-lg); }
.thumb img { border-radius: var(--r-xs); }

.feature-group-label { border-bottom: 2px solid var(--ink); }
.feature-group-num {
  width: 28px; height: 28px; border-radius: var(--r-xs);
  background: var(--accent-wash); box-shadow: inset 0 0 0 1px var(--accent-line); color: var(--accent);
  font: 700 0.8125rem/1 var(--font-mono);
}
.feature-card { box-shadow: none; }
.feature-icon { width: 36px; height: 36px; margin-bottom: 16px; border-radius: var(--r-sm); }
.feature-card .icon { width: 20px; height: 20px; }

.feature-card--highlight { position: relative; background: var(--accent-wash); border-color: var(--accent-line); box-shadow: var(--e2); }
.feature-card--highlight::before {
  content: ""; position: absolute; inset: 6px; border: 1.5px dashed var(--accent-line); border-radius: 13px; pointer-events: none;
}
.feature-card--highlight h3 { color: var(--ink); }
.feature-card--highlight p { color: var(--ink-2); }
.feature-card--highlight .feature-icon { background: var(--surface); box-shadow: inset 0 0 0 1px var(--accent-line); color: var(--accent-hover); }
.punch-row { display: flex; gap: 8px; margin-top: auto; padding-top: 18px; }
.punch-row i { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); }
.punch-row i:last-child { background: none; border: 1.5px solid var(--accent); }

.dm-step-num { border-radius: 50%; color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
.dm-try-key { color: var(--dark-accent); }
.dm-try-note { margin-top: 6px; font-size: 0.9375rem; line-height: 1.45; color: var(--on-dark-2); }
.dm-try .demo-link { margin-top: 16px; }
/* Apply CTA colors immediately when content-visibility reveals the section. */
.dm-try .btn-primary { background: var(--dark-accent); border-color: var(--dark-accent); color: var(--night); transition-property: transform; }
.dm-try .btn-primary:hover { background: color-mix(in srgb, var(--dark-accent) 80%, var(--on-dark)); border-color: transparent; color: var(--night); }
.dm-qr { background: var(--on-dark); color: var(--night); }
.dm-stage::before { content: none; }

@media (min-width: 1101px) { .digital-copy .section-header h2 { font-size: clamp(1.875rem, 2.9vw, 2.625rem); } }
.dm-device.saucer { --saucer: 400px; --saucer-x: -66px; }
.dm-device.saucer::after { width: calc(var(--saucer) + 56px); outline-offset: 24px; }
@media (min-width: 1101px) {
  /* One ring, wholly inside the stage: the second ring was clipped at the stage edge and ran behind both chips. */
  .dm-device.saucer { overflow: clip; }
  .dm-device.saucer::after { width: calc(var(--saucer) + 28px); outline: 0; }

  .dm-device .phone-frame.is-demo-focused { outline: 3px solid var(--accent); outline-offset: 4px; }
}
.dm-link-list, .dm-ticket-card { border-radius: 0 var(--r-sm) var(--r-sm) var(--r-sm); }
.dm-tab { border-radius: var(--r-xs) var(--r-xs) 0 0; }

.partners.band--night .partner-group-label { color: var(--on-dark-2); border-bottom-color: color-mix(in srgb, var(--on-dark) 28%, transparent); }
.partners.band--night .partner-grid > .partners-cta { color: var(--on-dark); background: var(--night-raised); border-color: var(--dark-accent); }
.partners.band--night .partner-card__link:focus-visible, .partners.band--night .partners-cta a:focus-visible { outline-color: var(--dark-accent); }

.partner-card__link:focus-visible { outline: 3px solid var(--accent); }
.partners-cta a:focus-visible { outline: 3px solid var(--accent); }
/* Community cards retain their horizontal layout. */
.partner-card--wide { grid-column: span 3; }
.partner-card--recipe { grid-column: 1 / -1; }
.partner-card--recipe .partner-card__logo { background: var(--on-accent); }
.partner-card--recipe .partner-card__logo img { mix-blend-mode: normal; height: auto; object-fit: contain; }
.partner-card__name { font: 700 1.375rem/1.2 var(--font-display); color: var(--ink); }
@media (min-width: 721px) { /* phones use base.css's logo + kind row for every card */
  .partner-card--wide .partner-card__link { flex-direction: row; align-items: center; gap: 28px; padding: 16px 28px 16px 16px; }
  .partner-card--wide .partner-card__logo { flex: 0 0 46%; }
  .partner-card--recipe .partner-card__logo { flex-basis: 30%; height: 150px; }
  .partner-card--recipe .partner-card__logo img { max-height: 112px; }
  .partner-card--wide .partner-card__body { padding: 0 28px 0 0; }
  .partner-card--wide .partner-card__go { top: 16px; right: 16px; }
  /* Top-aligned text, so every kind line sits 30px below its card top (a ledger, not three centred blocks). */
  .partner-card--integration .partner-card__body, .partner-card--wide .partner-card__body { align-self: flex-start; padding-top: 8px; }
}
.partner-grid > .partners-cta {
  grid-column: 1 / -1; display: grid; align-content: center; justify-items: start; gap: 14px;
  padding: 28px; background: var(--accent-wash); border: 1px solid var(--accent-line); border-left: 4px solid var(--accent); border-radius: 16px;
  color: var(--ink);
}
.partners-cta h3 { max-width: 22ch; font: 700 clamp(1.375rem, 2.1vw, 1.875rem)/1.2 var(--font-display); color: inherit; }
.partners-cta p { max-width: 44ch; font: 400 1rem/1.5 var(--font-body); }
.partner-grid > .partners-cta a { min-height: 44px; gap: 10px; font: 700 1rem/1.3 var(--font-body); }
.partners-cta__email { font: 400 0.875rem/1.4 var(--font-body); }
.partner-card__link:active { transform: translateY(0); }
.partners-cta a:active { opacity: 0.8; }

.still-deciding {
  padding: 18px 20px; border: 1px solid var(--accent-line); border-radius: var(--r-md);
  background: var(--accent-wash); color: var(--ink-2);
}
.faq-group h3 {
  display: flex; align-items: baseline; gap: 12px; padding-bottom: 12px; border-bottom: 0;
  font-weight: 600; color: var(--ink-3);
}
.faq-group h3::after { content: ""; flex: 1; min-width: 24px; border-bottom: 2px dotted var(--line-strong); transform: translateY(-3px); }
.faq-item summary::after {
  border-radius: 50%; border: 1.5px solid var(--field-border); color: var(--accent); font-weight: 600;
}
.faq-item summary:hover::after { border-color: var(--accent); }
.faq-item[open] summary::after { background: var(--accent-wash); border-color: var(--field-border); color: var(--accent-hover); }

.closing { background: var(--night); color: var(--on-dark-2); padding-block: clamp(64px, 8vw, 112px); }
.closing h2 { font-size: clamp(2.125rem, 4.4vw, 3.5rem); line-height: 1; letter-spacing: -0.035em; font-weight: 680; color: var(--on-dark); }
.closing p { margin-top: 16px; font: 500 1rem/1.4 var(--font-mono); color: var(--on-dark-2); }
.closing .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.closing .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
.closing .btn-night { color: var(--on-dark); border-color: var(--on-dark-2); }
.closing .btn-night:hover { color: var(--on-dark); border-color: var(--on-dark); background: var(--night-raised); }
.closing :focus-visible { outline: 3px solid var(--dark-accent); outline-offset: 3px; }

.footer-grid { padding-top: clamp(48px, 6vw, 72px); border-top: 0; }
/* Footer logos share the header artwork and white plate. */
.footer-link-grid a, .footer-link-grid button { color: var(--on-dark-2); }
.footer-link-grid a:hover, .footer-link-grid button:hover { color: var(--on-dark); text-decoration-color: var(--dark-accent); text-decoration-thickness: 2px; }
.footer-social { color: var(--on-dark-2); }

.demo-close { border-radius: var(--r-pill); border-color: var(--field-border); }
.demo-header h2, .demo-success-card h2 { letter-spacing: -0.025em; }

/* ---------- 10. Responsive (chrome + hero) ---------- */

@media (min-width: 961px) and (max-width: 1100px) {
  /* Two columns but a narrow tablet: callout 03 wraps so the flipped chip stays clear of the proof row. */
  .callout--down.callout--flip .callout-label { width: 17.5rem; white-space: normal; line-height: 1.3; }
  .hero-media { padding-bottom: 164px; } /* the wrapped chip is five lines here */
}
@media (max-width: 960px) {
  /* Stacked: a smaller saucer (disc 84%, one ring) centred on the tablet, so no ring crosses the copy or legend. */
  .hero-media { --saucer: 84%; --saucer-x: 0px; }
  .hero-media::after { width: calc(var(--saucer) + 6%); outline: 0; }
}
@media (min-width: 721px) and (max-width: 960px) {
  .hero-media { padding-bottom: 136px; } /* = base.css top padding, so 50% is the tablet's centre */
}
@media (max-width: 720px) {
  .device-frame--tablet { padding: 8px; border-radius: 16px; }
  .device-screen img { border-radius: 8px; }
  /* The legend sits inside .hero-media here, so centre the saucer on the tablet, not the block:
     40px top padding + half the 16:10 tablet (8px bezel each side). */
  .hero-media { padding: 40px 0 0; --saucer-y: calc(40px + (100vw - 2 * var(--gutter) - 16px) * 0.3125 + 8px); }
  .callout-legend { gap: 10px; margin-top: 48px; }
  .callout-legend li { align-items: flex-start; }
  .callout-legend small { color: var(--ink-3); }
  .hero-specs-band { margin-top: 36px; }
  .hero-bullets { gap: 22px; padding-block: 28px; }
}
@media (max-width: 400px) {
  .proof-avatars { gap: 6px; padding: 6px; }
  .proof-avatars > span, .proof-avatars > span:first-child { width: 34px; height: 34px; }
}

/* ---------- 11. Responsive (sections 6a-6g) ---------- */

@media (max-width: 1100px) {
  .dm-device.saucer { --saucer: 340px; --saucer-x: 0px; --saucer-y: calc(32px + 50% - 60px); } /* phone centred; the ticket hangs below it */
}
@media (max-width: 960px) {
  .partner-card--wide, .partner-grid > .partners-cta { grid-column: 1 / -1; }
}
@media (min-width: 600px) and (max-width: 960px) {
  .dm-device.saucer { --saucer-x: -66px; --saucer-y: 50%; } /* chips beside the phone again */
}
@media (max-width: 720px) {
  /* Every sleeve sits at the card foot, as at 1440 (base.css lets phone cards hang at their own length). */
  .testimonial-set { align-items: stretch; }
  .testimonial-card { flex-basis: min(86vw, 360px); }
  .ticket-foot { padding: 24px 18px 16px; }
  .testimonial-copy { padding-inline: 20px; }
  .ticket-stub { padding-inline: 20px; }

  .compare-cell-portal, .compare-row + .compare-row .compare-cell-portal, .compare-row:last-child .compare-cell-portal {
    box-shadow: none;
  }

  .feature-card .punch-row { grid-column: 2; padding-top: 12px; }
  .feature-card--highlight::before { inset: 5px; border-radius: 12px; }

  .partner-grid > .partners-cta { padding: 24px 20px; }
  .partner-card__name { grid-area: name; font-size: 1.125rem; padding-right: 32px; }
}
@media (max-width: 599px) {
  .dm-device.saucer { --saucer: 280px; --saucer-y: calc(20px + 50% - 60px); }
  .dm-device.saucer::after { width: calc(var(--saucer) + 28px); outline: 0; }
}

/* ==================== pages.css ==================== */

/* The saucer is the only texture: drop Daylight's graph grid on both pages. */
.dl-hero::before, .error-page::before { content: none; }
.dl-hero, .error-page { overflow: clip; } /* the outer ring may run past the viewport on phones */

/* Display type matches the hero H1 (verdict §4). */
.dl-copy h1, .nf-body h1 {
  font-size: clamp(2.75rem, 5vw, 4.5rem); line-height: 0.96; letter-spacing: -0.04em; font-weight: 680; font-stretch: normal;
}

/* ---------- Download ---------- */

.dl-copy h1 { margin: 18px 0 22px; }
.dl-proof dt { display: flex; align-items: center; gap: 8px; }
.dl-proof dt::before {
  content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%;
  background: var(--live-dot); box-shadow: 0 0 0 3px color-mix(in srgb, var(--live-dot) 22%, transparent);
}

.dl-media { --saucer: min(78%, 390px); justify-content: center; gap: 28px; min-height: 520px; padding: 24px 0; }
.dl-status { margin: 0; }
.dl-app {
  display: grid; place-items: center; width: 136px; aspect-ratio: 1; border-radius: 32px;
  background: var(--night) var(--glyph-night) center / 58px 58px no-repeat;
  box-shadow: var(--e3), inset 0 0 0 1px color-mix(in srgb, var(--on-dark) 8%, transparent);
}
.dl-overlay { position: relative; left: auto; bottom: auto; transform: none; width: min(100%, 300px); }

/* ---------- 404: a cup label with no name on it ---------- */

/* Same grid as .dl-grid: copy starts at the container edge, the mark sits on the right like the hero and download. */
.nf-ticket.error-panel {
  max-width: none; padding: 0; background: none; border: 0; box-shadow: none;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; gap: clamp(40px, 6vw, 96px);
}
.nf-mark { --saucer: min(78%, 390px); display: grid; place-items: center; min-height: 480px; }
@media (min-width: 961px) { .nf-mark { order: 2; } } /* stacked (<=960) keeps the mark first */

.nf-label {
  width: min(100%, 280px); overflow: hidden; transform: rotate(-3deg);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md) var(--r-md) 22px 22px; box-shadow: var(--e2);
}
.nf-label .nf-code {
  display: grid; place-items: center; width: 196px; height: 124px; margin: 30px auto 34px;
  font: 600 4.5rem/1 var(--font-mono); letter-spacing: -0.04em; color: var(--ink);
  border: 3px solid var(--accent); border-radius: 52% 48% 55% 45% / 50% 56% 44% 50%; /* grease pencil, not a compass */
  transform: rotate(-6deg);
}
.nf-sleeve {
  display: flex; align-items: center; gap: 12px; padding: 22px 22px 20px;
  background: var(--testimonial-foot) repeating-linear-gradient(90deg, color-mix(in srgb, var(--ink) 7%, transparent) 0 1px, transparent 1px 7px);
  border-radius: 50% 50% 0 0 / 16px 16px 0 0;
}
.nf-sleeve-mark { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 50%; background: var(--surface); }
.mark-missing { width: 26px; height: 26px; }
.mark-missing rect { fill: var(--ink); }
.mark-missing .mark-tile { fill: var(--glyph-tile); }
.mark-missing .mark-gap { fill: none; stroke: var(--ink-3); }
/* The name lines nobody wrote on. */
.nf-sleeve-lines { display: grid; gap: 9px; flex: 1; }
.nf-sleeve-lines i { display: block; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 22%, transparent); }
.nf-sleeve-lines i:first-child { width: 78%; }
.nf-sleeve-lines i:last-child { width: 46%; }

.nf-body { padding: 0; }
.nf-body h1 { margin: 26px 0 18px; }
.nf-body .lead { max-width: 36ch; }
.nf-body .error-copy { max-width: 48ch; font-size: 1rem; }

@media (max-width: 960px) {
  .dl-media { min-height: 480px; --saucer: min(72%, 340px); }
  .nf-ticket.error-panel { grid-template-columns: minmax(0, 1fr); max-width: 640px; gap: 8px; }
  .nf-mark { min-height: 480px; --saucer: min(90%, 340px); } /* the outer ring is disc + 12% + 56px */
}
@media (max-width: 720px) {
  .dl-media { --saucer: min(80%, 280px); min-height: 400px; gap: 22px; padding: 16px 0 8px; }
  .dl-app { width: 112px; border-radius: 26px; background-size: 48px 48px; }
  .dl-overlay { margin-top: 0; }
  .nf-mark { min-height: 400px; --saucer: min(80%, 280px); }
  .nf-label { width: 236px; }
  .nf-label .nf-code { width: 164px; height: 104px; margin: 24px auto 28px; font-size: 3.75rem; }
  .nf-sleeve { padding: 18px 18px 16px; }
}

/* ==================== Ambient motion ==================== */

/* Layers script.js injects; shown only inside the no-preference blocks below. */
.steam, .cl-layer, .ripples-drop, .sm-halo { display: none; }

@media (prefers-reduced-motion: no-preference) {

  .closing { position: relative; isolation: isolate; overflow: clip; }
  .closing::before, .closing::after {
    content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: var(--accent);
    --lb-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 960 400' preserveAspectRatio='none'%3E%3Cfilter id='b' x='-10%25' y='-50%25' width='120%25' height='200%25'%3E%3CfeGaussianBlur stdDeviation='9'/%3E%3C/filter%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' filter='url(%23b)'%3E%3Cpath stroke-width='26' stroke-opacity='0.55' d='M-960 110C-800 48.7 -640 48.7 -480 110C-320 171.3 -160 171.3 0 110C160 48.7 320 48.7 480 110C640 171.3 800 171.3 960 110C1120 48.7 1280 48.7 1440 110C1600 171.3 1760 171.3 1920 110'/%3E%3Cpath stroke-width='12' stroke-opacity='0.8' d='M-1080 245C-1000 199.7 -920 199.7 -840 245C-760 290.3 -680 290.3 -600 245C-520 199.7 -440 199.7 -360 245C-280 290.3 -200 290.3 -120 245C-40 199.7 40 199.7 120 245C200 290.3 280 290.3 360 245C440 199.7 520 199.7 600 245C680 290.3 760 290.3 840 245C920 199.7 1000 199.7 1080 245C1160 290.3 1240 290.3 1320 245C1400 199.7 1480 199.7 1560 245C1640 290.3 1720 290.3 1800 245C1880 199.7 1960 199.7 2040 245'/%3E%3Cpath stroke-width='40' stroke-opacity='0.35' d='M-1360 320C-1200 290.7 -1040 290.7 -880 320C-720 349.3 -560 349.3 -400 320C-240 290.7 -80 290.7 80 320C240 349.3 400 349.3 560 320C720 290.7 880 290.7 1040 320C1200 349.3 1360 349.3 1520 320C1680 290.7 1840 290.7 2000 320'/%3E%3C/g%3E%3C/svg%3E");
    -webkit-mask: var(--lb-wave) 0 0 / 960px 100% repeat-x;
    mask: var(--lb-wave) 0 0 / 960px 100% repeat-x;
    opacity: 0.05; animation: lb-sway 11s ease-in-out infinite alternate paused;
  }
  .closing::after { -webkit-mask-position: 160px 0; mask-position: 160px 0; animation-direction: alternate-reverse; }

  .spec-key::after { border-bottom-color: var(--dark-accent); opacity: 0.55; animation: lb-leader 10s ease-in-out infinite paused; }
  .hero-bullets li:nth-child(2) .spec-key::after { animation-delay: 2.5s; }
  .hero-bullets li:nth-child(3) .spec-key::after { animation-delay: 5s; }
  .hero-bullets li:nth-child(4) .spec-key::after { animation-delay: 7.5s; }

  .closing.ambient-on::before, .closing.ambient-on::after, .hero-specs-band.ambient-on .spec-key::after { animation-play-state: running; }
  @media (max-width: 720px) { .spec-key::after { animation: none; } }

  @keyframes lb-sway { to { opacity: 0.22; } }
  @keyframes lb-leader { 0%, 50%, 100% { opacity: 0.55; } 25% { opacity: 1; } }

  .hero { isolation: isolate; }
  .cl-layer {
    display: block; position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; contain: strict;
    --cl-sun: color-mix(in srgb, var(--on-dark) 78%, var(--dark-accent));
    --cl-c: color-mix(in srgb, var(--cl-sun) 100%, transparent);
    animation: cl-in 2.4s ease-out backwards; /* fades in once instead of popping in after first paint; not a loop, never held */
  }
  .cl-glow {
    --cl-h: clamp(460px, 140%, 1100px);
    position: absolute; left: 0; top: calc(50% - var(--cl-h) / 2);
    width: clamp(560px, 70%, 1100px); height: var(--cl-h); border-radius: 50%;
    background: radial-gradient(closest-side,
      var(--cl-c),
      color-mix(in srgb, var(--cl-c) 72%, transparent) 40%,
      color-mix(in srgb, var(--cl-c) 28%, transparent) 70%,
      transparent);
    will-change: transform, opacity;
    animation: cl-drift 18s ease-in-out -4s infinite alternate paused;
  }
  .hero.ambient-on > .cl-layer, .hero.ambient-on > .cl-layer > .cl-glow { animation-play-state: running; }

  @keyframes cl-in { from { opacity: 0; } }
  @keyframes cl-drift {
    0% { transform: translate3d(-38%, -7%, 0) scale(0.94); opacity: 0.55; }
    45% { opacity: 1; }
    100% { transform: translate3d(100%, 7%, 0) scale(1.06); opacity: 0.8; }
  }

  .ripples-drop {
    display: block; position: absolute; z-index: -1; pointer-events: none;
    left: calc(50% + var(--saucer-x, 0px)); top: var(--saucer-y, 50%);
    /* Full size = 1.16x the disc, i.e. just past the first rim ring; drawn at full size so the line stays crisp. */
    width: calc(var(--saucer, 100%) * 1.16); aspect-ratio: 1; border-radius: 50%;

    border: 1.5px solid var(--glyph-tile);
    background: radial-gradient(closest-side, transparent 86%, color-mix(in srgb, var(--surface) 75%, transparent) 97%, transparent);
    opacity: 0; transform: translate(-50%, -50%) scale(0.62);
  }
  /* Stacked hero: the legend sits just outside the single rim ring, so the ripple ends exactly on that ring. */
  @media (max-width: 960px) { .hero-media > .ripples-drop { width: calc(var(--saucer) + 6%); } }
  /* The trailing ring: a drop never makes just one. */
  .ripples-drop::before {
    content: ""; position: absolute; inset: 16px; border-radius: 50%;
    border: 1px solid var(--glyph-tile); opacity: 0.45;
  }
  .is-dropping > .ripples-drop { animation: ripples-drop 7s cubic-bezier(0.25, 0.6, 0.35, 1) both paused; }
  .ambient-on.is-dropping > .ripples-drop { animation-play-state: running; }
  @keyframes ripples-drop {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.62); }
    35% { opacity: 0.6; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
  }

  .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(--dark-accent); background: color-mix(in srgb, var(--dark-accent) 22%, transparent); opacity: 0;
    animation: pd-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: 1.5px solid var(--dark-accent); pointer-events: none;
    transform: scaleY(0); transform-origin: top; opacity: 0;
    animation: pd-signal 7.5s cubic-bezier(0.2, 0.8, 0.2, 1) 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 .live-tag::before { animation: pd-breathe 2.5s ease-in-out infinite alternate paused; }
  .page-landing .dm-chip { animation: pd-chip 7.5s ease-in-out infinite paused; }
  .page-landing .dm-link { animation-delay: 3.75s; }
  .hero.ambient-on .callout-dot::before, .hero.ambient-on .callout::after,
  .digital-menu.ambient-on .live-tag::before, .digital-menu.ambient-on .dm-chip { animation-play-state: running; }
  .dm-device:hover .dm-chip, .dm-device:focus-within .dm-chip { animation-play-state: paused; } /* after the rule above */
  @media (max-width: 1100px) {
    .page-landing .dm-ticket { animation-name: pd-sink; } /* in flow under the phone: bob down, never over the screen */
  }
  @media (max-width: 720px) {
    .page-landing .callout-dot::before { inset: -2px; }
  }
  @keyframes pd-ping { 0%, 6% { transform: scale(1); opacity: 0; } 8% { opacity: 0.9; } 32%, 100% { transform: scale(2.4); opacity: 0; } }
  @keyframes pd-signal { 0% { transform: scaleY(0); opacity: 1; } 8% { transform: scaleY(1); opacity: 1; } 22%, 100% { transform: scaleY(1); opacity: 0; } }
  @keyframes pd-breathe { from { opacity: 1; } to { opacity: 0.35; } }
  @keyframes pd-chip { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
  @keyframes pd-sink { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

  .compare-row { --cm-d: 0s; }
  .compare-row:nth-child(3) { --cm-d: 0.625s; } /* child 1 is .compare-board-top */
  .compare-row:nth-child(4) { --cm-d: 1.25s; }
  .compare-row:nth-child(5) { --cm-d: 1.875s; }
  .compare-row:nth-child(6) { --cm-d: 2.5s; }
  .compare-row:nth-child(7) { --cm-d: 3.125s; }
  .compare-row:nth-child(8) { --cm-d: 3.75s; }
  .compare-row:nth-child(9) { --cm-d: 4.375s; }
  .compare-row:nth-child(10) { --cm-d: 5s; }

  .compare-cell-portal { isolation: isolate; }
  .compare-cell-portal::before, .compare-cell-portal::after { content: ""; position: absolute; z-index: -1; pointer-events: none; opacity: 0; }

  .compare-cell-portal::before {
    inset: 0 1px; border-radius: inherit;
    background: linear-gradient(90deg, var(--on-dark) 10%, color-mix(in srgb, var(--on-dark) 35%, transparent));
    animation: cm-glow 7.5s ease-in-out var(--cm-d) infinite paused;
  }
  .compare-row:last-child .compare-cell-portal::before { bottom: 1px; }
  .compare-cell-portal::after {
    left: 24px; top: 25px; width: 26px; height: 26px; box-sizing: border-box; border-radius: 50%;
    border: 2px solid var(--go);
    animation: cm-ring 7.5s cubic-bezier(0, 0, 0.2, 1) var(--cm-d) infinite paused;
  }
  .compare-cell-portal .icon { animation: cm-tick 7.5s ease-out var(--cm-d) infinite paused; }

  .compare.ambient-on .compare-cell-portal::before, .compare.ambient-on .compare-cell-portal::after,
  .compare.ambient-on .compare-cell-portal .icon { animation-play-state: running; }
  .compare:has(.inline-link:hover, .inline-link:focus-visible) .compare-cell-portal::before,
  .compare:has(.inline-link:hover, .inline-link:focus-visible) .compare-cell-portal::after,
  .compare:has(.inline-link:hover, .inline-link:focus-visible) .compare-cell-portal .icon { animation-play-state: paused; }

  /* Phones: the benefit starts beside its check badge, below the shared header. */
  @media (max-width: 720px) {
    .compare-cell-portal::before, .compare-row:last-child .compare-cell-portal::before { inset: 0; }
    .compare-cell-portal::after { left: 0; top: -1px; animation-name: cm-ring-sm; }
  }
  @keyframes cm-glow { 0% { opacity: 0; } 10% { opacity: 1; } 40%, 100% { opacity: 0; } }
  /* Fixed scales (a var() in the keyframes would keep the ring off the compositor): ring radius 24.7px, phones 20.8px. */
  @keyframes cm-ring { 0%, 6% { transform: scale(1); opacity: 0; } 8% { opacity: 0.9; } 30%, 100% { transform: scale(1.9); opacity: 0; } }
  @keyframes cm-ring-sm { 0%, 6% { transform: scale(1); opacity: 0; } 8% { opacity: 0.9; } 30%, 100% { transform: scale(1.6); opacity: 0; } }
  @keyframes cm-tick { 0%, 6% { transform: scale(1); } 9% { transform: scale(1.14); } 18%, 100% { transform: scale(1); } }

  .screen-preview { position: relative; isolation: isolate; }
  .sm-halo {
    --sm-side: min(28px, var(--gutter) - 4px); --sm-top: 40px;
    display: block; position: absolute; z-index: -1; pointer-events: none; overflow: hidden;
    inset: calc(-1 * var(--sm-top)) calc(-1 * var(--sm-side)) 35%;
    --sm-mask: linear-gradient(transparent, #000 12px, #000 40%, transparent), linear-gradient(90deg, transparent, #000 8px, #000 calc(100% - 8px), transparent);
    -webkit-mask: var(--sm-mask); -webkit-mask-composite: source-in; mask: var(--sm-mask); mask-composite: intersect;
    opacity: 0;
  }
  .sm-halo::before {
    content: ""; position: absolute; inset: var(--sm-top) var(--sm-side) -100vh; border-radius: var(--r-lg);
    box-shadow: 0 -10px calc(var(--sm-side) + 8px) -6px color-mix(in srgb, var(--dark-accent) 85%, transparent);
  }
  .sm-glow .sm-halo { animation: sm-bloom-a 10s linear forwards paused; }
  .sm-glow.sm-hb .sm-halo { animation-name: sm-bloom-b; }
  .screens.ambient-on .sm-halo { animation-play-state: running; }

  /* Rail rows (1101px and up): track + fill under the screen name, 8px below the note. */
  @media (min-width: 1101px) {
    .sm-auto .thumb.is-active { position: relative; }
    .sm-auto .thumb.is-active::before, .sm-auto .thumb.is-active::after {
      content: ""; position: absolute; left: 116px; right: 16px; bottom: 8px; height: 2px; border-radius: 2px; pointer-events: none;
    }
    .sm-auto .thumb.is-active::before { background: var(--night-line); }
    .sm-auto .thumb.is-active::after {
      background: var(--dark-accent); transform: scaleX(0); transform-origin: left;
      animation: sm-fill-a 10s linear forwards paused;
    }
  }

  @media (max-width: 1100px) {
    .sm-auto .thumb.is-active > span { position: relative; border-top-color: color-mix(in srgb, var(--dark-accent) 30%, transparent); }
    .sm-auto .thumb.is-active > span::before {
      content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 2px; pointer-events: none;
      background: var(--dark-accent); transform: scaleX(0); transform-origin: left;
      animation: sm-fill-a 10s linear forwards paused;
    }
  }
  /* Flipping the keyframe name restarts the fill from 0 each time autoplay (re)starts. */
  .sm-b .thumb.is-active::after, .sm-b .thumb.is-active > span::before { animation-name: sm-fill-b; }
  .sm-run .thumb.is-active::after, .sm-run .thumb.is-active > span::before { animation-play-state: running; }

  /* Hover or keyboard focus on the rail holds the glow still too (the line is held by autoplay pausing). A mouse tap's
     leftover focus does not, so the last glow can fade out once the pointer leaves. */
  .screens:has(.screen-thumbs:hover, .screen-thumbs :focus-visible) .sm-halo { animation-play-state: paused; }

  @media (max-width: 720px) { .sm-halo { --sm-top: 24px; } }

  @keyframes sm-bloom-a { 0% { opacity: 0; animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); } 15% { opacity: 1; animation-timing-function: ease-in-out; } 55% { opacity: 0.75; animation-timing-function: ease-in; } 100% { opacity: 0; } }
  @keyframes sm-bloom-b { 0% { opacity: 0; animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); } 15% { opacity: 1; animation-timing-function: ease-in-out; } 55% { opacity: 0.75; animation-timing-function: ease-in; } 100% { opacity: 0; } }
  @keyframes sm-fill-a { to { transform: scaleX(1); } }
  @keyframes sm-fill-b { to { transform: scaleX(1); } }

  /* Step timing. The grid is flat (label, 4 cards, label, 4 cards...), so group g is children 5g+1..5g+5:
     --fm-g = 2.5s x g, and card c wakes --fm-c after its step starts, as the rule pulse (0.2s + 1.2s) passes above it. */
  #features .feature-grid > * { --fm-g: 0s; --fm-c: 0.35s; }
  #features .feature-grid > :nth-child(n+6) { --fm-g: 2.5s; }
  #features .feature-grid > :nth-child(n+11) { --fm-g: 5s; }
  #features .feature-grid > :nth-child(n+16) { --fm-g: 7.5s; }
  #features .feature-grid > :nth-child(5n+3) { --fm-c: 0.65s; }
  #features .feature-grid > :nth-child(5n+4) { --fm-c: 0.95s; }
  #features .feature-grid > :nth-child(5n+5) { --fm-c: 1.25s; }

  #features .feature-group-label, #features .punch-row i:last-child { position: relative; }
  #features .feature-group-num, #features .feature-icon { position: relative; isolation: isolate; }

  /* 01-04 ping: border-only, under the digits, fades out inside the 16px gap before the title. */
  #features .feature-group-num::before {
    content: ""; position: absolute; z-index: -1; inset: -1px; border-radius: inherit; pointer-events: none;
    border: 2.5px solid var(--dark-accent); opacity: 0;
    animation: fm-ping 10s cubic-bezier(0, 0, 0.2, 1) var(--fm-g) infinite paused;
  }
  /* The pulse along the 2px ink rule under the group title. */
  #features .feature-group-label::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; pointer-events: none;
    background: var(--dark-accent); transform: scaleX(0); transform-origin: left; opacity: 0;
    animation: fm-line 10s linear calc(var(--fm-g) + 0.2s) infinite paused;
  }

  #features .feature-icon::before, #features .feature-icon::after {
    content: ""; position: absolute; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0;
  }
  #features .feature-icon::before {
    inset: 0; background: color-mix(in srgb, var(--dark-accent) 75%, var(--accent-wash));
    animation: fm-glow 10s ease-in-out calc(var(--fm-g) + var(--fm-c)) infinite paused;
  }
  #features .feature-icon::after {
    inset: -1px; border: 2px solid var(--dark-accent);
    animation: fm-halo 10s cubic-bezier(0, 0, 0.2, 1) calc(var(--fm-g) + var(--fm-c)) infinite paused;
  }
  #features .feature-icon .icon { animation: fm-nod 10s ease-in-out calc(var(--fm-g) + var(--fm-c)) infinite paused; }

  /* Loyalty (group 03, 5s step): the sixth punch lands at 6.5s, rings at 6.75s, holds, fades back by 10.1s. */
  #features .punch-row i:last-child::before, #features .punch-row i:last-child::after {
    content: ""; position: absolute; inset: -1.5px; border-radius: 50%; pointer-events: none; opacity: 0;
  }
  #features .punch-row i:last-child::before { background: var(--accent); animation: fm-stamp 10s linear 6.5s infinite paused; }
  #features .punch-row i:last-child::after { border: 2px solid var(--dark-accent); animation: fm-burst 10s cubic-bezier(0, 0, 0.2, 1) 6.75s infinite paused; }

  #features.ambient-on :is(.feature-group-num, .feature-group-label, .feature-icon, .punch-row i)::before,
  #features.ambient-on :is(.feature-group-label, .feature-icon, .punch-row i)::after,
  #features.ambient-on .feature-icon .icon { animation-play-state: running; }

  @keyframes fm-ping { 0% { transform: scale(1); opacity: 0; } 2% { opacity: 0.95; } 16%, 100% { transform: scale(1.75); opacity: 0; } }
  @keyframes fm-line { 0% { transform: scaleX(0); opacity: 1; } 12% { transform: scaleX(1); opacity: 1; } 20%, 100% { transform: scaleX(1); opacity: 0; } }
  @keyframes fm-glow { 0% { opacity: 0; } 4%, 6% { opacity: 1; } 15%, 100% { opacity: 0; } }
  @keyframes fm-halo { 0% { transform: scale(1); opacity: 0; } 2% { opacity: 0.9; } 14%, 100% { transform: scale(1.45); opacity: 0; } }
  @keyframes fm-nod {
    0%, 13%, 100% { transform: none; }
    4% { transform: translateY(-3px) rotate(-9deg) scale(1.12); }
    8% { transform: translateY(0) rotate(3deg) scale(1.02); }
  }
  @keyframes fm-stamp {
    0% { transform: scale(1.9); opacity: 0; animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.5); }
    2.5% { transform: scale(0.84); opacity: 1; animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); }
    5%, 30% { transform: scale(1); opacity: 1; animation-timing-function: ease-in-out; }
    36%, 100% { transform: scale(1); opacity: 0; }
  }
  @keyframes fm-burst { 0% { transform: scale(1); opacity: 0.9; } 12%, 100% { transform: scale(2.3); opacity: 0; } }

}

/* ---------- Footer "Pause motion" toggle (WCAG 2.2.2) ----------
   Footer chrome: the social pill's ring and mono label. script.js unhides it (no script, no motion) and swaps the
   label (Pause motion / Play motion, no aria-pressed); pressed pauses every ambient loop (html.motion-paused, which
   also swaps the icon), remembered per browser. There is
   nothing to pause under reduced motion, so it is not shown there. */
.footer-motion {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-right: auto; padding: 0 18px 0 14px;
  border: 0; border-radius: var(--r-pill); background: none; cursor: pointer;
  color: var(--on-dark-2); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--on-dark) 20%, transparent);
  font: 500 0.8125rem/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
}
.footer-motion:hover { color: var(--on-dark); box-shadow: inset 0 0 0 1px var(--on-dark); }
.footer-motion .icon { width: 16px; height: 16px; }
.motion-paused .footer-motion .motion-pause, html:not(.motion-paused) .footer-motion .motion-play { display: none; }
/* order: 1 puts it above the socials in the column-reverse footer, so the screen order matches the Tab order. */
@media (max-width: 720px) { .footer-motion { align-self: flex-start; margin-right: 0; order: 1; } }
@media (prefers-reduced-motion: reduce) { .footer-motion { display: none; } }

/* Extra costs elsewhere: warm tint, clear headlines and red X badges. */
.compare-cell-typical { background: var(--typ-tint); color: var(--ink-2); }
.compare-cell-typical b, .compare-board-top span:nth-child(3), .compare-cell-typical .ledger-label { color: var(--typ-ink); }
.compare-board-top span:nth-child(3) { background: var(--typ-tint); }
.compare-cell-typical b { display: block; margin-bottom: 6px; }
.compare-cell-typical p > span:last-child { grid-column: 2; grid-row: 2; }

.site-footer .footer-analytics{margin:16px 0;text-align:center}.site-footer .footer-analytics a{color:inherit;display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-underline-offset:3px}


/* Give the full navigation room without wrapping section names. */
@media (min-width: 1101px) { .site-header .nav { width: calc(100% - 2 * var(--gutter)); max-width: 1440px; } .nav-links > a { white-space: nowrap; } }
@media (min-width: 1101px) and (max-width: 1320px) { .nav { gap: 12px; } .nav-links { gap: 8px; } .nav-links > a:not(.btn) { font-size: 0.8125rem; } .nav-actions { gap: 6px; margin-left: 0; } .nav-actions .btn { padding-inline: 12px; font-size: 0.8125rem; } .nav-links > a:not(.btn) + a:not(.btn)::before { left: -4px; } }

.partners-shell > .partners-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 20px; padding: 28px; border: 1px solid var(--dark-accent); border-radius: var(--r-lg); background: var(--night-raised); color: var(--on-dark); }
.partners-cta__copy { display: grid; gap: 12px; }
.partners-cta__action { flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px 24px; }
@media (max-width: 720px) { .partners-shell > .partners-cta { flex-direction: column; align-items: stretch; padding: 24px 20px; } }

@media (min-width: 721px) { .partner-card:not(.partner-card--integration) { grid-column: span 3; } }

/* Mobile homepage hero: centered copy, paired actions and a closer product view. */
@media (max-width: 720px) {
  .page-landing .hero { padding-top: 32px; }
  .page-landing .hero-grid { gap: 36px; }
  .page-landing .hero-copy { width: 100%; max-width: 560px; margin-inline: auto; text-align: center; }
  .page-landing .hero .chip-row { justify-content: center; }
  .page-landing .hero h1 { margin: 24px 0 18px; font-size: clamp(2.25rem, 11.3vw, 3.5rem); line-height: 1.02; text-wrap: balance; }
  .page-landing .hero .lead { max-width: 40ch; margin-inline: auto; font-size: 1.0625rem; line-height: 1.55; text-wrap: pretty; }
  .page-landing .hero .cta-row { max-width: 400px; margin: 24px auto 0; gap: 10px; }
  .page-landing .hero .cta-row .btn { min-height: 52px; padding-inline: 10px; font-size: 0.9375rem; }
  .page-landing .hero .cta-row .icon { width: 16px; height: 16px; }
  .page-landing .hero .proof { flex-direction: column; flex-wrap: nowrap; gap: 12px; margin-top: 26px; }
  .page-landing .hero .proof-avatars { padding: 0; border: 0; background: none; }
  .page-landing .hero .proof-avatars > span { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--line-strong); }
  .page-landing .hero .proof-text { flex-direction: row; align-items: center; gap: 10px; font-size: 0.8125rem; }
  .page-landing .hero .proof-text > span + span { padding-left: 10px; border-left: 1px solid var(--line-strong); }
  .page-landing .hero-media { width: 100%; max-width: 560px; margin-inline: auto; padding-top: 0; --saucer: 68%; --saucer-y: calc((min(100vw - 2 * var(--gutter), 560px) - 16px) * 0.3125 + 8px); }
  .page-landing .hero .callout-legend { gap: 0; margin-top: 28px; text-align: left; font: 400 0.9375rem/1.45 var(--font-body); }
  .page-landing .hero .callout-legend li { padding-block: 14px; border-bottom: 1px solid var(--line); gap: 12px; }
  .page-landing .hero .callout-legend li:last-child { border-bottom: 0; padding-bottom: 0; }
  .page-landing .hero .callout-legend small { font: 400 0.8125rem/1.45 var(--font-body); }
}
@media (min-width: 375px) and (max-width: 720px) {
  .page-landing .hero .cta-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}