/* Geist + Geist Mono (SIL OFL 1.1, Fonts/Geist-LICENSE.txt), self-hosted variable
   fonts (latin + latin-ext), so there is no render-blocking third-party
   stylesheet or extra font origin (COD-1613, COD-1626). */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/geist-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/geist-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/geist-mono-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/geist-mono-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ====================================================================
   Sellhand — dark hospitality, calm operational confidence
   ==================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Sellhand dark cinematic brand (COD-1626). Canvas, surfaces and one ember
     accent; ink #0a0a0a on ember is ~7:1, ember on canvas ~6.9:1. */
  --bg:          #08080a;
  --bg-raised:   #111114;
  --bg-raised-2: #17171b;
  --bg-nav:      rgba(8, 8, 10, .72);
  --text:        #f4f4f5;
  --text-dim:    #d4d4d8;
  --muted:       #a1a1aa;
  --border:      rgba(255, 255, 255, .08);
  --border-soft: rgba(255, 255, 255, .06);

  --primary:      #ff5b2e;
  --primary-hi:   #ff7a52;
  --primary-ink:  #0a0a0a;
  --accent-text:  #ff7a52;
  --reward:       #34d399;
  --reward-ink:   #0a0a0a;
  --warning:      #fbbf24;
  --danger:       #f87171;
  --grid-base:    transparent;
  --grid-glow:    transparent;
  --ember-glow:   rgba(255, 91, 46, .2);

  --radius-sm: 10px;
  --radius:    14px;
  --radius-lg: 22px;
  --pill:      999px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow:    0 14px 40px rgba(0, 0, 0, .5);
  --shadow-lg: 0 30px 80px rgba(0, 0, 0, .6);
  --glow:      0 0 0 1px rgba(255, 91, 46, .35), 0 0 40px rgba(255, 91, 46, .25);

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in: cubic-bezier(.6, 0, .9, .35);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-fast: .18s;
  --dur: .5s;

  --font-sans: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  color-scheme: dark;
}

/* Light variant: same ember accent; ember text is darkened for AA on white. */
:root[data-theme="light"] {
  --bg:          #fafaf9;
  --bg-raised:   #ffffff;
  --bg-raised-2: #f1f1ef;
  --bg-nav:      rgba(250, 250, 249, .78);
  --text:        #0a0a0a;
  --text-dim:    #27272a;
  --muted:       #52525b;
  --border:      rgba(10, 10, 10, .1);
  --border-soft: rgba(10, 10, 10, .07);

  --primary-hi:  #ff7a52;
  --accent-text: #c2410c;
  --reward:      #047857;
  --danger:      #b91c1c;
  --ember-glow:  rgba(255, 91, 46, .16);

  --shadow-sm: 0 1px 2px rgba(10, 10, 10, .06);
  --shadow:    0 14px 40px rgba(10, 10, 10, .08);
  --shadow-lg: 0 30px 80px rgba(10, 10, 10, .12);
  --glow:      0 0 0 1px rgba(255, 91, 46, .3), 0 0 40px rgba(255, 91, 46, .18);

  color-scheme: light;
}

html { scroll-behavior: smooth; background: var(--bg); }

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

body {
  font-family: 'Geist', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text-dim);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Full-page dot grid that lights up around the cursor — dim base grid always
   visible, a brighter orange layer masked to a circle at --mx/--my (set by
   pointermove in app.js) so the glow follows the mouse. Fixed + z-index -1
   keeps it behind all normal-flow content without needing to touch every
   section's own background. */
.mouse-glow-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.mouse-glow-bg::before,
.mouse-glow-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, currentColor 1px, transparent 1.6px);
  background-size: 26px 26px;
}
.mouse-glow-bg::before { color: var(--grid-base); }
.mouse-glow-bg::after {
  color: var(--grid-glow);
  -webkit-mask-image: radial-gradient(circle 280px at var(--mx, 32%) var(--my, 62%), black 0%, transparent 72%);
          mask-image: radial-gradient(circle 280px at var(--mx, 32%) var(--my, 62%), black 0%, transparent 72%);
}
@media (prefers-reduced-motion: reduce) {
  .mouse-glow-bg::after { -webkit-mask-image: none; mask-image: none; opacity: .18; }
}

h1, h2, h3, h4 { font-family: 'Geist', system-ui, sans-serif; color: var(--text); }

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; }

.container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

.tnum { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .78rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--primary-hi);
  margin-bottom: 14px;
}
.eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); flex-shrink: 0; }

/* ── Scroll reveal ── */
.reveal {
  opacity: 0; transform: translateY(12px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.reveal.in-view { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ── Buttons ──
   One glowing/pulsing CTA per viewport rule (Hick's law): only .btn-glow
   carries the pulse; every other button is plain so attention has one
   obvious target at a time. */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 13px 24px;
  border-radius: var(--radius);
  font-size: .92rem; font-weight: 600;
  cursor: pointer; border: none;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast), background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
  white-space: nowrap;
}
.btn:active { transform: scale(.97); }
.btn:focus-visible { outline: 2px solid var(--reward); outline-offset: 2px; }

/* Body-sized CTA on a fill: dark ink on the orange fill for contrast, per
   the accessibility constraint (orange text-on-dark only passes for large
   headline text, never small button labels). */
.btn-primary {
  background: var(--primary);
  color: var(--primary-ink);
  box-shadow: 0 6px 20px rgba(255, 91, 46, .25);
}
.btn-primary:hover { background: var(--primary-hi); transform: translateY(-1px); box-shadow: 0 10px 28px rgba(255, 91, 46, .35); }

.btn-glow { animation: btn-pulse 2.6s ease-in-out infinite; }
@keyframes btn-pulse {
  0%, 100% { box-shadow: 0 6px 20px rgba(255, 91, 46, .25), 0 0 0 0 rgba(255, 91, 46, .4); }
  50% { box-shadow: 0 6px 24px rgba(255, 91, 46, .4), 0 0 0 10px rgba(255, 91, 46, 0); }
}
@media (prefers-reduced-motion: reduce) { .btn-glow { animation: none; } }

.btn-outline {
  border: 1.5px solid var(--border);
  color: var(--text);
  background: transparent;
}
.btn-outline:hover { border-color: var(--primary); color: var(--primary-hi); }

.btn-ghost { background: transparent; color: var(--muted); }
.btn-ghost:hover { color: var(--text); }

.btn-lg { padding: 16px 30px; font-size: 1rem; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none !important; animation: none !important; }

/* ── Language switcher ── */
.lang-switch {
  display: inline-flex; gap: 2px;
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--pill); padding: 3px;
}
.lang-btn {
  border: none; background: transparent; cursor: pointer;
  padding: 5px 12px; border-radius: var(--pill);
  font-size: .74rem; font-weight: 700; letter-spacing: .02em;
  color: var(--muted); transition: all .15s;
}
.lang-btn:hover { color: var(--text); }
.lang-btn.active { background: var(--bg-raised-2); color: var(--text); box-shadow: var(--shadow-sm); }

/* ── Theme toggle ── */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex: 0 0 36px;
  border: 1px solid var(--border); border-radius: 50%;
  background: var(--bg-raised); color: var(--text-dim); cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
.theme-toggle:hover { color: var(--primary-hi); border-color: var(--primary); transform: translateY(-1px); }
.theme-toggle:active { transform: scale(.95); }
.theme-toggle:focus-visible { outline: 2px solid var(--reward); outline-offset: 2px; }
.theme-icon { display: block; }
.theme-icon-moon { display: none; }
:root[data-theme="light"] .theme-icon-sun { display: none; }
:root[data-theme="light"] .theme-icon-moon { display: block; }
:root[data-theme="light"] .logo img,
:root[data-theme="light"] .foot-logo img { filter: invert(1); }

/* ── Nav ── */
nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--bg-nav);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-soft);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 16px; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.15rem; letter-spacing: -.02em; flex-shrink: 0; }
.logo img { width: 36px; height: 36px; border-radius: 8px; }
.logo .name { color: var(--text); }
.logo .name em { color: var(--primary); font-style: normal; }
.nav-links { display: flex; align-items: center; gap: 20px; list-style: none; }
.nav-links > li > a { font-size: .87rem; font-weight: 500; color: var(--muted); transition: color .15s; white-space: nowrap; }
.nav-links > li > a:hover { color: var(--text); }
.nav-actions { display: flex; gap: 7px; align-items: center; }
.nav-actions > .btn { padding-left: 18px; padding-right: 18px; }

.nav-dropdown { position: relative; }
.nav-dropdown-trigger {
  display: flex; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer;
  font-size: .87rem; font-weight: 500; color: var(--muted);
  padding: 7px 10px; margin: -7px -10px; border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: color .15s, background .15s;
}
.nav-dropdown-trigger svg { transition: transform .15s; }
.nav-dropdown:hover .nav-dropdown-trigger,
.nav-dropdown:focus-within .nav-dropdown-trigger { color: var(--text); background: var(--bg-raised); }
.nav-dropdown:hover .nav-dropdown-trigger svg,
.nav-dropdown:focus-within .nav-dropdown-trigger svg { transform: rotate(180deg); }
.nav-dropdown-panel {
  display: none;
  position: absolute; top: calc(100% + 14px); left: 0;
  background: var(--bg-raised); border: 1px solid var(--border); border-radius: 20px;
  box-shadow: var(--shadow-lg); padding: 22px; z-index: 150;
  grid-template-columns: max-content; gap: 22px;
  width: max-content; max-width: 90vw;
}
.nav-dropdown:hover .nav-dropdown-panel,
.nav-dropdown:focus-within .nav-dropdown-panel { display: grid; }
.ndd-cols { display: flex; align-items: flex-start; gap: 18px; }
.ndd-col { display: flex; flex-direction: column; min-width: 210px; }
.ndd-group-label { font-size: .72rem; font-weight: 500; color: var(--muted); padding: 0 10px; margin-bottom: 8px; }
.nav-dropdown-item ~ .ndd-group-label { margin-top: 20px; }
.nav-dropdown-item { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: var(--radius-sm); transition: background .15s; }
.nav-dropdown-item:hover { background: var(--bg-raised-2); }
.ndi-icon { width: 20px; height: 20px; flex-shrink: 0; color: var(--primary-hi); display: flex; align-items: center; justify-content: center; }
.ndi-title { font-size: .85rem; font-weight: 600; color: var(--text); white-space: nowrap; }


.nav-phone { display: flex; align-items: center; gap: 6px; font-size: .84rem; font-weight: 600; color: var(--text-dim); padding: 6px 4px; white-space: nowrap; }
.nav-phone:hover { color: var(--primary-hi); }

/* Burger toggle — hidden on desktop, shown where .nav-links collapses */
.nav-burger {
  display: none;
  flex-direction: column; justify-content: center; gap: 4px;
  width: 40px; height: 40px; padding: 9px;
  background: none; border: none; cursor: pointer;
  border-radius: var(--radius-sm);
}
.nav-burger span {
  display: block; width: 100%; height: 2px; border-radius: 1px;
  background: var(--text); transition: transform .2s, opacity .2s;
}
.nav-burger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile menu panel — overlays content below the sticky nav */
.mobile-nav {
  display: none;
  position: absolute; top: 100%; left: 0; right: 0;
  flex-direction: column; gap: 2px;
  padding: 8px 20px calc(18px + env(safe-area-inset-bottom));
  background: var(--bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-soft);
  max-height: calc(100vh - 56px); overflow-y: auto;
}
.mobile-nav.open { display: flex; }
.mobile-nav-link {
  display: flex; align-items: center; gap: 8px;
  padding: 13px 4px; font-size: .95rem; font-weight: 500; color: var(--text);
}
.mobile-nav-link:hover { color: var(--primary-hi); }
.mobile-nav-divider { height: 1px; background: var(--border-soft); margin: 6px 0; }
.mobile-nav-cta { margin-top: 10px; justify-content: center; text-align: center; }
.mobile-nav .tenant-signin { margin-top: 8px; justify-content: center; text-align: center; }

/* ══════════════════════════════ HERO / CALCULATOR ══════════════════════════════ */
.hero { padding: 60px 0 40px; text-align: center; position: relative; }
.hero h1 {
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  font-weight: 700; letter-spacing: -.03em; line-height: 1.12;
  max-width: 780px; margin: 0 auto 16px; color: var(--text);
}
.hero-sub { font-size: 1.05rem; color: var(--muted); max-width: 520px; margin: 0 auto 40px; }

/* Hero copy + product mockup, two columns on desktop, stacked on mobile. */
.hero-grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
.hero-visual { display: flex; justify-content: center; }

/* Lightweight browser-frame mockup standing in for a real product screenshot.
   Reuses the .calc-card visual language (raised gradient, border, radius-lg,
   shadow-lg) so it matches the rest of the page instead of inventing a new style. */
.hero-mockup {
  width: 100%; max-width: 360px;
  background: linear-gradient(180deg, var(--bg-raised), var(--bg-raised-2));
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); overflow: hidden; text-align: left;
}
.hero-mockup-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px; border-bottom: 1px solid var(--border-soft);
  background: var(--bg-raised-2);
}
.hero-mockup-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); flex-shrink: 0; }
.hero-mockup-url {
  margin-left: 8px; font-size: .72rem; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hero-mockup-body { padding: 20px; }
.hero-mockup-name { font-weight: 700; color: var(--text); font-size: .95rem; }
.order-board-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.order-board-sub { color: var(--muted); font-size: .75rem; margin-top: 2px; }
.order-board-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; height: 28px; border-radius: var(--pill);
  background: var(--primary); color: var(--primary-ink); font-size: .78rem; font-weight: 800;
}
.order-board-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.order-board-list li {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  background: var(--bg-raised-2);
}
.order-board-list strong { display: block; color: var(--text); font-size: .86rem; }
.order-board-list small { display: block; color: var(--muted); font-size: .72rem; margin-top: 2px; }
.order-status { padding: 5px 8px; border-radius: var(--pill); font-size: .68rem; font-weight: 700; white-space: nowrap; }
.order-status.preparing { color: var(--primary-hi); background: color-mix(in srgb, var(--primary-hi) 14%, transparent); }
.order-status.ready { color: var(--reward); background: color-mix(in srgb, var(--reward) 14%, transparent); }

.feature-status {
  display: inline-flex; align-items: center; padding: 2px 7px; border-radius: var(--pill);
  background: color-mix(in srgb, var(--primary-hi) 14%, transparent); color: var(--primary-hi);
  font-size: .65rem; font-weight: 700; line-height: 1.4; vertical-align: middle; white-space: nowrap;
}
[data-feature="driver-dispatch"].is-coming-soon { border-style: dashed; }
[data-feature="driver-dispatch"].is-coming-soon .inc-check { color: var(--muted); }
.nav-dropdown-item.is-coming-soon .ndi-title { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.nav-dropdown-item .feature-status { font-size: .58rem; }
[data-feature-live][hidden], [data-feature-coming-soon][hidden] { display: none !important; }

@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.05fr .95fr; gap: 48px; text-align: left; }
  .hero-grid h1 { margin-left: 0; margin-right: 0; }
  .hero-grid .hero-sub { margin-left: 0; margin-right: 0; }
  .hero-grid .pricing-cta-row { justify-content: flex-start; }
  .hero-visual { justify-content: flex-end; }
}

/* ══════════════════════════════ CONNECTED ORDER STORY ══════════════════════════════ */
.order-story {
  position: relative;
  padding: 96px 0;
  border-block: 1px solid var(--border-soft);
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 91, 46, .12), transparent 34%),
    linear-gradient(180deg, hsla(240, 8%, 10%, .72), hsla(240, 10%, 6%, .96));
}
.order-story-heading { max-width: 760px; margin: 0 auto 44px; text-align: center; }
.order-story-heading h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.06; letter-spacing: -.045em; margin-bottom: 16px; }
.order-story-heading p { max-width: 660px; margin: 0 auto; color: var(--muted); font-size: 1.02rem; }
.order-story-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(270px, .62fr); gap: 22px; align-items: start; }
.order-story-product { min-width: 0; }
.order-story-browser { overflow: hidden; background: hsl(240 8% 8%); border: 1px solid hsl(240 8% 26%); border-radius: 22px; box-shadow: var(--shadow-lg), 0 0 70px rgba(255, 91, 46, .11); }
.order-story-browser-bar { height: 42px; display: flex; align-items: center; gap: 7px; padding: 0 14px; color: var(--muted); background: var(--bg-raised); border-bottom: 1px solid var(--border-soft); }
.order-story-browser-bar > span { width: 8px; height: 8px; border-radius: 50%; background: hsl(240 7% 32%); }
.order-story-browser-bar > span:first-child { background: hsl(2 70% 58%); }
.order-story-browser-bar > span:nth-child(2) { background: hsl(42 85% 58%); }
.order-story-browser-bar > span:nth-child(3) { background: hsl(105 48% 48%); }
.order-story-browser-url { min-width: 0; max-width: 360px; margin: 0 auto; padding: 4px 20px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--pill); color: var(--muted); font-size: .7rem; line-height: 1.35; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.order-story-scenes { position: relative; aspect-ratio: 16 / 10; background: var(--bg-raised); }
.order-story-scene { position: absolute; inset: 0; display: grid; grid-template-rows: 1fr auto; }
.order-story-scene[hidden] { display: none; }
.order-story-scene img { width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: top center; }
.order-story-scene.is-active img { animation: story-scene-in .48s var(--ease-out) both; }
@keyframes story-scene-in { from { opacity: .35; transform: scale(1.012); } to { opacity: 1; transform: scale(1); } }
.order-story-scene figcaption { position: absolute; left: 18px; right: 18px; bottom: 16px; display: flex; align-items: baseline; gap: 10px; padding: 12px 14px; border: 1px solid hsla(0, 0%, 100%, .14); border-radius: 14px; background: hsla(240, 10%, 6%, .86); box-shadow: var(--shadow); backdrop-filter: blur(14px); }
.order-story-scene figcaption strong { color: var(--text); font-size: .9rem; white-space: nowrap; }
.order-story-scene figcaption span { color: var(--text-dim); font-size: .78rem; line-height: 1.4; }
.order-story-controls { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 14px; }
.order-story-control, .order-story-play { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 13px; border: 1px solid var(--border); border-radius: var(--pill); background: var(--bg-raised); color: var(--text-dim); cursor: pointer; transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast); }
.order-story-control:hover, .order-story-play:hover { color: var(--text); border-color: hsl(240 8% 34%); background: var(--bg-raised-2); }
.order-story-control:focus-visible, .order-story-play:focus-visible, .order-story-rail button:focus-visible { outline: 2px solid var(--reward); outline-offset: 3px; }
.order-story-control svg, .order-story-play svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.order-story-play { min-width: 164px; font-size: .78rem; font-weight: 700; }
.order-story-play .story-play-icon { display: none; }
.order-story-play[aria-pressed="true"] .story-pause-icon { display: none; }
.order-story-play[aria-pressed="true"] .story-play-icon { display: block; }
.order-story-order { position: sticky; top: 86px; padding: 20px; border: 1px solid var(--border); border-radius: 22px; background: linear-gradient(155deg, hsl(240 8% 14%), hsl(240 8% 9%)); box-shadow: var(--shadow); }
.order-story-order-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; padding-bottom: 15px; border-bottom: 1px solid var(--border); }
.order-story-order-head > div { display: flex; flex-direction: column; }
.order-story-order-head span { color: var(--muted); font-size: .72rem; }
.order-story-order-head strong { color: var(--text); font-size: 1.45rem; letter-spacing: -.03em; }
.order-story-status { flex-shrink: 0; display: inline-flex; align-items: center; min-height: 28px; padding: 4px 9px; border-radius: var(--pill); background: rgba(255, 91, 46, .15); color: var(--primary-hi) !important; font-size: .68rem !important; font-weight: 700; }
.order-story-status::before { content: ''; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: currentColor; }
.order-story-customer { display: flex; justify-content: space-between; gap: 10px; padding: 14px 0 10px; font-size: .76rem; }
.order-story-customer span { color: var(--muted); }
.order-story-customer strong { color: var(--text-dim); font-weight: 600; }
.order-story-items { display: grid; gap: 7px; padding: 10px 0 13px; border-block: 1px solid var(--border-soft); list-style: none; }
.order-story-items li, .order-story-total { display: flex; justify-content: space-between; gap: 12px; font-size: .76rem; }
.order-story-items li span { color: var(--text-dim); }
.order-story-items strong { color: var(--muted); font-weight: 600; }
.order-story-total { padding: 13px 0 15px; color: var(--text); font-weight: 700; }
.order-story-total strong { color: var(--reward); font-size: 1.02rem; }
.order-story-current { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; padding: 13px; border-radius: 14px; background: rgba(255, 91, 46, .08); }
.order-story-time { color: var(--primary-hi); font-size: .7rem; font-weight: 700; }
.order-story-current strong { display: block; color: var(--text); font-size: .78rem; line-height: 1.35; }
.order-story-current p { margin-top: 3px; color: var(--muted); font-size: .69rem; line-height: 1.4; }
.order-story-progress { height: 3px; margin-top: 16px; overflow: hidden; border-radius: var(--pill); background: var(--border); }
.order-story-progress span { display: block; width: 20%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primary), var(--reward)); transition: width .45s var(--ease-out); }
.order-story-rail { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 26px; }
.order-story-rail::before { content: ''; position: absolute; top: 23px; left: 9%; right: 9%; height: 1px; background: var(--border); }
.order-story-rail button { position: relative; z-index: 1; min-height: 92px; display: grid; justify-items: center; align-content: start; gap: 3px; padding: 10px 8px 9px; border: 1px solid transparent; border-radius: 16px; background: transparent; color: var(--muted); cursor: pointer; transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast); }
.order-story-rail button:hover { color: var(--text-dim); background: hsla(240, 8%, 14%, .55); }
.order-story-rail button > span { width: 28px; height: 28px; display: grid; place-items: center; margin-bottom: 5px; border: 1px solid var(--border); border-radius: 50%; background: var(--bg); color: var(--muted); font-size: .65rem; font-weight: 700; }
.order-story-rail button strong { color: inherit; font-size: .78rem; line-height: 1.2; }
.order-story-rail button small { color: var(--muted); font-size: .65rem; }
.order-story-rail button[aria-selected="true"] { border-color: rgba(255, 91, 46, .32); background: rgba(255, 91, 46, .08); color: var(--text); transform: translateY(-2px); }
.order-story-rail button[aria-selected="true"] > span { border-color: var(--primary); background: var(--primary); color: var(--primary-ink); box-shadow: 0 0 0 5px rgba(255, 91, 46, .12); }
.order-story-video { display: grid; grid-template-columns: .72fr 1.28fr; gap: 28px; align-items: center; margin-top: 72px; padding: 28px; border: 1px solid var(--border); border-radius: 24px; background: var(--bg-raised); }
.order-story-video h3 { font-size: clamp(1.45rem, 2.6vw, 2rem); line-height: 1.15; letter-spacing: -.03em; }
.order-story-video p { margin: 12px 0 20px; color: var(--muted); font-size: .9rem; }
.order-story-video video { width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; background: #050506; box-shadow: var(--shadow); }
@media (max-width: 900px) {
  .order-story { padding: 76px 0; }
  .order-story-layout { grid-template-columns: 1fr; }
  .order-story-order { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
  .order-story-order-head, .order-story-current, .order-story-progress { grid-column: 1 / -1; }
  .order-story-customer, .order-story-items { grid-column: 1; }
  .order-story-total { grid-column: 2; align-self: end; padding-inline: 0; }
  .order-story-video { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .order-story { padding: 64px 0; }
  .order-story-heading { margin-bottom: 30px; text-align: left; }
  .order-story-heading p { font-size: .92rem; }
  .order-story-browser { border-radius: 16px; }
  .order-story-browser-bar { height: 36px; padding-inline: 10px; }
  .order-story-browser-url { padding-inline: 10px; }
  .order-story-scenes { aspect-ratio: 4 / 5; }
  .order-story-scene figcaption { left: 10px; right: 10px; bottom: 10px; display: block; padding: 10px 11px; }
  .order-story-scene figcaption strong { display: block; white-space: normal; }
  .order-story-scene figcaption span { display: block; margin-top: 3px; }
  .order-story-play { min-width: 148px; }
  .order-story-order { display: block; padding: 17px; }
  .order-story-rail { grid-template-columns: 1fr; gap: 5px; margin-top: 20px; }
  .order-story-rail::before { top: 27px; bottom: 27px; left: 24px; right: auto; width: 1px; height: auto; }
  .order-story-rail button { min-height: 54px; grid-template-columns: 34px 1fr auto; justify-items: start; align-items: center; align-content: center; gap: 10px; padding: 8px 12px; text-align: left; }
  .order-story-rail button > span { margin: 0; }
  .order-story-rail button strong { font-size: .82rem; }
  .order-story-rail button[aria-selected="true"] { transform: translateX(2px); }
  .order-story-video { margin-top: 48px; padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .order-story-scene.is-active img { animation: none; }
  .order-story-progress span, .order-story-rail button { transition: none; }
}

.calc-card {
  max-width: 720px; margin: 0 auto;
  background: linear-gradient(180deg, var(--bg-raised), var(--bg-raised-2));
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 36px 32px; box-shadow: var(--shadow-lg);
  text-align: left;
}
.calc-sliders { display: flex; flex-direction: column; gap: 22px; margin-bottom: 8px; }
.calc-row { display: flex; flex-direction: column; gap: 8px; }
.calc-row-top { display: flex; justify-content: space-between; align-items: baseline; font-size: .88rem; }
.calc-row-label { color: var(--text-dim); font-weight: 500; }
.calc-row-value { color: var(--text); font-weight: 700; font-size: .95rem; }

/* Track painted at 6px via background-clip so it stays visually thin, but
   the input's own hit-testable box is padded out to a 26px-tall touch
   target (WCAG 2.5.8 AA wants >=24px — the visible track alone measured
   only 6px, making the slider hard to drag on a phone). */
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; padding: 10px 0; box-sizing: content-box;
  background-clip: content-box;
  border-radius: var(--pill);
  background: var(--border-soft);
  outline: none; cursor: pointer;
  accent-color: var(--primary);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--primary); border: 3px solid var(--bg-raised);
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
  cursor: pointer; transition: transform var(--dur-fast) var(--ease-out);
}
input[type="range"]::-webkit-slider-thumb:hover,
input[type="range"]::-webkit-slider-thumb:active { transform: scale(1.12); }
input[type="range"]::-moz-range-thumb {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--primary); border: 3px solid var(--bg-raised);
  box-shadow: 0 2px 8px rgba(0,0,0,.4); cursor: pointer;
}
input[type="range"]:focus-visible { outline: 2px solid var(--reward); outline-offset: 4px; }

.calc-output {
  margin-top: 28px; padding-top: 26px; border-top: 1px solid var(--border-soft);
  text-align: center;
}
.calc-output-figure {
  font-size: clamp(2.4rem, 7vw, 3.6rem); font-weight: 700; letter-spacing: -.02em;
  color: var(--reward); line-height: 1;
}
.calc-output-label { font-size: .9rem; color: var(--muted); margin-top: 8px; }
.calc-math {
  font-size: .76rem; color: var(--muted); margin-top: 16px; line-height: 1.6;
}
.calc-math a { color: var(--text-dim); text-decoration: underline; text-underline-offset: 2px; }
.calc-cta-row { margin-top: 22px; display: flex; justify-content: center; }

/* count-up flash on value change */
.count-flash { animation: count-flash .5s var(--ease-out); }
@keyframes count-flash { 0% { text-shadow: 0 0 24px hsla(84,90%,60%,.7); } 100% { text-shadow: none; } }
@media (prefers-reduced-motion: reduce) { .count-flash { animation: none; } }

@media (max-width: 640px) {
  /* Keep concrete product proof above the fold on common phone viewports.
     The generic pricing row margins left only the mock browser chrome visible
     behind the sticky CTA at 390x844, hiding the ordering UI itself. */
  .hero:first-of-type { padding-top: 36px; }
  .hero:first-of-type h1 { font-size: 1.9rem; }
  .hero:first-of-type .hero-sub { font-size: .95rem; margin-bottom: 24px; }
  .hero:first-of-type .hero-grid { gap: 20px; }
  .hero:first-of-type .pricing-cta-row { margin: 0; }
  .hero:first-of-type .hero-mockup-body { padding: 14px; }
  .hero:first-of-type .order-board-head { margin-bottom: 10px; }
  .hero:first-of-type .order-board-list { gap: 6px; }
  .hero:first-of-type .order-board-list li { padding: 9px; }

  .calc-card { padding: 26px 18px; }
}

/* ══════════════════════════════ REPORT TOOL ══════════════════════════════ */
.report-section { padding: 80px 0; }
.report-top { text-align: center; max-width: 620px; margin: 0 auto 36px; }
.report-top h2 { font-size: clamp(1.8rem, 3.6vw, 2.4rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.2; margin-bottom: 12px; }
.report-top p { color: var(--muted); }

.report-input-row {
  display: flex; justify-content: center; align-items: stretch;
  gap: 10px; max-width: 560px; margin: 0 auto 8px; flex-wrap: wrap;
}
.report-input {
  flex: 1 1 260px; min-width: 0;
  font-family: inherit; font-size: .95rem; padding: 14px 18px;
  border: 1.5px solid var(--border); border-radius: var(--pill);
  background: var(--bg-raised); color: var(--text);
}
.report-input::placeholder { color: var(--muted); }
.report-input:focus { outline: none; border-color: var(--primary); }
/* PlaceAutocompleteElement (Places API New) — a custom element that replaces
   #report-input at runtime (src/app.js). It hosts its own inner input, so it
   gets the .report-input flex slot on the host plus the element's supported
   custom properties for the active Sellhand theme. */
gmp-place-autocomplete.report-input {
  padding: 0;
  color-scheme: inherit;
  --gmp-mat-color-surface: var(--bg-raised);
  --gmp-mat-color-on-surface: var(--text);
  --gmp-mat-color-on-surface-variant: var(--muted);
}

.report-card {
  max-width: 560px; margin: 28px auto 0;
  background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 28px; text-align: left;
}
.rc-top { display: flex; align-items: center; gap: 22px; margin-bottom: 18px; }
.rc-gauge { position: relative; width: 84px; height: 84px; flex-shrink: 0; }
.rc-gauge svg { transform: rotate(-90deg); }
.rc-gauge-track { fill: none; stroke: var(--border-soft); stroke-width: 8; }
.rc-gauge-value { fill: none; stroke: var(--reward); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 226; stroke-dashoffset: 226; transition: stroke-dashoffset 1.1s var(--ease-out); }
.rc-gauge-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; font-weight: 700; color: var(--text); }
.rc-restaurant { display: flex; flex-direction: column; gap: 2px; }
.rc-name { font-size: 1.05rem; font-weight: 700; color: var(--text); }
.rc-rating { font-size: .85rem; color: var(--muted); }
.rc-rank-row { font-size: .92rem; color: var(--text-dim); margin-bottom: 14px; }
.rc-rank-row .rc-rank { font-weight: 800; color: var(--primary-hi); font-size: 1.1rem; }
.rc-vs { font-size: .86rem; color: var(--muted); margin-bottom: 16px; }
.rc-vs strong { color: var(--text); }
.rc-notice {
  background: rgba(255, 91, 46, .08); border: 1px solid rgba(255, 91, 46, .25);
  border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 14px;
}
.rc-notice-label { font-size: 1rem; font-weight: 800; color: var(--primary-hi); }
.rc-notice-sub { font-size: .78rem; color: var(--muted); margin-top: 2px; }
.rc-issues { list-style: none; display: flex; flex-direction: column; gap: 8px; margin: 0 0 18px; }
.rc-issues li { font-size: .86rem; color: var(--text-dim); display: flex; align-items: flex-start; gap: 8px; }
.rc-issues li::before { content: '!'; color: var(--primary); font-weight: 800; flex-shrink: 0; }

.rc-ai { border-top: 1px solid var(--border); padding-top: 14px; margin-bottom: 14px; }
.rc-ai-headline { font-size: 1rem; font-weight: 800; margin-bottom: 6px; }
.rc-ai-summary { font-size: .86rem; color: var(--text-dim); margin: 0 0 12px; }
.rc-ai-label { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.rc-ai .rc-issues { margin-bottom: 12px; }
.rc-ai .rc-issues li::before { content: '•'; }

.report-followup {
  position: relative; margin-top: 18px; padding: 18px;
  border: 1px solid var(--border-soft); border-radius: var(--radius);
  background: var(--bg-raised-2);
}
.report-followup h3 { font-size: 1rem; margin-bottom: 4px; }
.report-followup > p:not(.form-status) { color: var(--muted); font-size: .8rem; }
.report-followup-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; margin-top: 14px; }
.report-followup-row .btn { min-height: 44px; }
.report-followup .demo-privacy { margin-top: 12px; text-align: left; }
.report-followup-success {
  display: flex; flex-direction: column; gap: 3px; margin-top: 18px; padding: 16px 18px;
  border: 1px solid hsla(84,90%,60%,.35); border-radius: var(--radius);
  background: hsla(84,90%,60%,.08); color: var(--text);
}
.report-followup-success span { color: var(--muted); font-size: .82rem; }

.form-status.error { color: var(--danger); font-size: .84rem; margin-top: 8px; text-align: center; }
.form-hidden { display: none !important; }

/* ══════════════════════════════ HOW IT WORKS (timeline) ══════════════════════════════ */
.how { padding: 80px 0; }
.how-top { text-align: center; max-width: 620px; margin: 0 auto 56px; }
.how-top h2 { font-size: clamp(1.8rem, 3.6vw, 2.5rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.2; margin-bottom: 12px; }
.how-top p { color: var(--muted); }

.timeline { position: relative; max-width: 760px; margin: 0 auto; }
.timeline::before {
  content: ''; position: absolute; left: 28px; top: 8px; bottom: 8px; width: 2px;
  background: linear-gradient(var(--border), transparent);
}
.tl-item { position: relative; padding-left: 76px; margin-bottom: 44px; }
.tl-item:last-child { margin-bottom: 0; }
.tl-dot {
  position: absolute; left: 20px; top: 4px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--primary);
  box-shadow: 0 0 0 4px rgba(255, 91, 46, .15);
}
.tl-time { font-size: .78rem; font-weight: 700; color: var(--primary-hi); letter-spacing: .04em; margin-bottom: 6px; }
.tl-item h3 { font-size: 1.2rem; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.tl-item p { color: var(--muted); font-size: .92rem; max-width: 520px; }
.how-cta-row { display: flex; justify-content: center; margin-top: 48px; }

/* ══════════════════════════════ FEATURES ══════════════════════════════ */
.features { padding: 80px 0; }
.features-top { text-align: center; max-width: 620px; margin: 0 auto 44px; }
.features-top h2 { font-size: clamp(1.8rem, 3.6vw, 2.5rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.2; margin-bottom: 12px; }
.features-top p { color: var(--muted); }
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.feat-item {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--bg-raised); border: 1px solid var(--border-soft);
  border-radius: var(--radius); padding: 20px;
  scroll-margin-top: 80px;
}
.feat-icon {
  width: 38px; height: 38px; border-radius: var(--radius-sm); flex-shrink: 0;
  background: rgba(255, 91, 46, .12); color: var(--primary-hi);
  display: flex; align-items: center; justify-content: center;
}

.feat-copy h3 { font-size: .95rem; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.feat-copy p { font-size: .84rem; color: var(--muted); line-height: 1.5; }
@media (max-width: 900px) { .feat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .feat-grid { grid-template-columns: 1fr; } }

/* ══════════════════════════════ PRICING ══════════════════════════════ */
.pricing { padding: 80px 0; }
.pricing-top { text-align: center; max-width: 620px; margin: 0 auto 12px; }
.pricing-top h2 { font-size: clamp(1.8rem, 3.6vw, 2.5rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.2; margin-bottom: 12px; }
.pricing-top p { color: var(--muted); }
.pricing-anchor {
  max-width: 560px; margin: 20px auto 0; text-align: center;
  font-size: .86rem; color: var(--reward); background: hsla(84,90%,60%,.08);
  border: 1px solid hsla(84,90%,60%,.25); border-radius: var(--radius-sm); padding: 12px 18px;
}
.plans-note { text-align: center; font-size: .82rem; color: var(--muted); margin: 28px 0 20px; }
.plans-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 960px; margin: 0 auto; }
.plan-card {
  background: var(--bg-raised); border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg); padding: 30px;
}
.plan-name { font-size: .84rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--primary-hi); margin-bottom: 10px; }
.plan-desc { font-size: .88rem; color: var(--muted); margin-bottom: 20px; min-height: 42px; }
.plan-price { font-size: 2.1rem; font-weight: 700; color: var(--text); letter-spacing: -.02em; }
.plan-per { font-size: .95rem; font-weight: 500; color: var(--muted); }
.plan-fine { font-size: .8rem; color: var(--muted); margin-top: 6px; }
.pricing-setup-note { max-width: 720px; margin: 18px auto 0; text-align: center; }
.pricing-cta-row { display: flex; justify-content: center; margin: 32px 0 56px; }

.included { max-width: 780px; margin: 0 auto; }
.included h3 { text-align: center; font-size: 1.2rem; font-weight: 700; color: var(--text); margin-bottom: 24px; }
.inc-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 32px; }

.inc-name { display: flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 600; color: var(--text); flex-wrap: wrap; }
.inc-check { color: var(--reward); font-weight: 800; }
.inc-desc { font-size: .8rem; color: var(--muted); margin-top: 3px; margin-left: 22px; }


.assure-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 900px; margin: 56px auto 0; }
.assure-card {
  position: relative; overflow: hidden;
  background: var(--bg-raised); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 22px;
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.assure-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--assure-accent, var(--primary)); opacity: .5;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.assure-card:nth-child(1) { --assure-accent: hsl(200 90% 60%); --assure-glow: hsla(200,90%,60%,.28); }
.assure-card:nth-child(2) { --assure-accent: hsl(24 96% 58%); --assure-glow: rgba(255, 91, 46, .28); }
.assure-card:nth-child(3) { --assure-accent: hsl(84 90% 60%); --assure-glow: hsla(84,90%,60%,.28); }
.assure-card:nth-child(4) { --assure-accent: hsl(265 75% 68%); --assure-glow: hsla(265,75%,68%,.28); }
.assure-card:hover {
  transform: translateY(-4px);
  border-color: var(--assure-accent);
  background: var(--bg-raised-2);
  box-shadow: 0 12px 28px rgba(0,0,0,.4), 0 0 0 1px var(--assure-accent), 0 0 28px var(--assure-glow);
}
.assure-card:hover::before { opacity: 1; }
.assure-title { font-size: .92rem; font-weight: 700; color: var(--text); margin: 8px 0 4px; transition: color var(--dur-fast) var(--ease-out); }
.assure-card:hover .assure-title { color: var(--assure-accent); }
.assure-desc { font-size: .8rem; color: var(--muted); }

@media (max-width: 700px) {
  .plans-grid, .inc-list, .assure-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════ FOUNDER NOTE ══════════════════════════════ */
.founder { padding: 80px 0; }
.founder-inner {
  display: grid; grid-template-columns: 260px 1fr; gap: 48px; align-items: start;
  max-width: 980px; margin: 0 auto;
}
.founder-inner--no-photo { grid-template-columns: 1fr; max-width: 720px; text-align: center; }
.founder-inner--no-photo .founder-copy p { margin-left: auto; margin-right: auto; }
.founder-photo-wrap { text-align: center; position: sticky; top: 100px; }
.founder-photo {
  width: 180px; height: 180px; border-radius: 50%; overflow: hidden; margin: 0 auto 16px;
  border: 2px solid var(--border); background: var(--bg-raised-2);
}
.founder-photo img { width: 100%; height: 100%; object-fit: cover; }
.founder-name { font-size: 1rem; font-weight: 700; color: var(--text); }
.founder-role { font-size: .82rem; color: var(--muted); }
.founder-copy h2 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); font-weight: 700; letter-spacing: -.03em; margin-bottom: 20px; }
.founder-copy p { color: var(--text-dim); margin-bottom: 16px; max-width: 620px; }
.founder-guarantee {
  display: flex; align-items: center; gap: 14px; margin-top: 24px; margin-bottom: 24px;
  background: hsla(84,90%,60%,.08); border: 1px solid hsla(84,90%,60%,.25);
  border-radius: var(--radius); padding: 16px 20px;
}
.founder-guarantee-icon { color: var(--reward); flex-shrink: 0; }
.founder-guarantee-title { font-size: .9rem; font-weight: 700; color: var(--text); }
.founder-guarantee-desc { font-size: .8rem; color: var(--muted); margin-top: 2px; }

@media (max-width: 800px) {
  .founder-inner { grid-template-columns: 1fr; text-align: center; }
  .founder-photo-wrap { position: static; }
  .founder-copy p { margin-left: auto; margin-right: auto; }
}

/* ══════════════════════════════ FAQ ══════════════════════════════ */
.faq { padding: 80px 0; }
.faq-top { text-align: center; max-width: 560px; margin: 0 auto 40px; }
.faq-top h2 { font-size: clamp(1.8rem, 3.6vw, 2.4rem); font-weight: 700; letter-spacing: -.03em; }
.faq-list { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.faq-item {
  background: var(--bg-raised); border: 1px solid var(--border-soft);
  border-radius: var(--radius); padding: 4px 22px;
}
.faq-item summary {
  cursor: pointer; list-style: none; padding: 18px 28px 18px 0;
  font-size: .96rem; font-weight: 600; color: var(--text);
  position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+'; position: absolute; right: 0; top: 16px;
  font-size: 1.3rem; color: var(--primary-hi); font-weight: 400;
  transition: transform var(--dur-fast);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { padding-bottom: 20px; color: var(--muted); font-size: .88rem; line-height: 1.6; max-width: 640px; }

/* ══════════════════════════════ DEMO FORM ══════════════════════════════ */
.demo-section { padding: 80px 0 100px; }
.demo-top { text-align: center; max-width: 560px; margin: 0 auto 20px; }
.demo-top h2 { font-size: clamp(1.9rem, 3.8vw, 2.6rem); font-weight: 700; letter-spacing: -.03em; margin-bottom: 12px; }
.demo-top p { color: var(--muted); }
.demo-expectations {
  display: grid; gap: 8px; margin: 20px auto 0; text-align: left;
  padding: 16px 18px; border: 1px solid var(--border-soft); border-radius: var(--radius);
  background: var(--bg-raised);
}
.demo-expectations p { position: relative; padding-left: 20px; font-size: .84rem; line-height: 1.5; }
.demo-expectations p::before { content: '✓'; position: absolute; left: 0; color: var(--reward); font-weight: 800; }

.demo-progress { display: flex; justify-content: center; align-items: center; gap: 8px; max-width: 420px; margin: 0 auto 36px; }
.dp-step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.dp-dot { width: 26px; height: 26px; border-radius: 50%; background: var(--bg-raised); border: 1.5px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: .74rem; font-weight: 700; color: var(--muted); transition: all var(--dur-fast); }
.dp-step.active .dp-dot { border-color: var(--primary); color: var(--primary-hi); background: rgba(255, 91, 46, .12); }
.dp-step.done .dp-dot { background: var(--reward); border-color: var(--reward); color: var(--reward-ink); }
.dp-label { font-size: .68rem; color: var(--muted); text-align: center; }
.dp-line { flex: 0 0 40px; height: 1.5px; background: var(--border); margin-top: -22px; }

.demo-form {
  max-width: 640px; margin: 0 auto;
  background: var(--bg-raised); border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg); padding: 36px; box-shadow: var(--shadow);
}
.form-honeypot { position: absolute; left: -9999px; top: -9999px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-size: .8rem; font-weight: 600; color: var(--text-dim); }
.form-field input, .form-field select, .form-field textarea {
  font-family: inherit; font-size: .92rem; padding: 12px 14px;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--text);
}
.form-field textarea { resize: vertical; min-height: 90px; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: none; border-color: var(--primary); }
.form-field input:focus-visible, .form-field select:focus-visible, .form-field textarea:focus-visible {
  outline: 2px solid var(--reward); outline-offset: 2px;
}
.form-field input[aria-invalid="true"], .form-field select[aria-invalid="true"], .form-field textarea[aria-invalid="true"] {
  border-color: var(--danger);
}
.form-submit-row { display: flex; justify-content: center; margin-top: 10px; }
.form-submit-row-split { justify-content: space-between; gap: 12px; }
.demo-privacy { margin: 18px auto 0; max-width: 520px; color: var(--muted); font-size: .76rem; line-height: 1.5; text-align: center; }
.demo-privacy a { color: var(--primary-hi); text-decoration: underline; text-underline-offset: 2px; }

.form-success {
  max-width: 560px; margin: 0 auto; text-align: center;
  background: var(--bg-raised); border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg); padding: 48px 32px; box-shadow: var(--shadow);
}
.success-check {
  width: 68px; height: 68px; border-radius: 50%; margin: 0 auto 20px;
  background: hsla(84,90%,60%,.12); border: 2px solid var(--reward);
  display: flex; align-items: center; justify-content: center;
  animation: success-spring .6s var(--ease-out);
}
.success-check svg { stroke: var(--reward); }
@keyframes success-spring { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .success-check { animation: none; } }
.form-success h3 { font-size: 1.3rem; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.form-success p { color: var(--muted); }

@media (max-width: 640px) {
  .report-followup-row { grid-template-columns: 1fr; }
  .report-followup-row .btn { width: 100%; }
  .form-row { grid-template-columns: 1fr; }
  .demo-form { padding: 24px 18px; }
  .dp-line { flex-basis: 24px; }
  #calc-cta { max-width: 100%; white-space: normal; }
  .report-input-row .btn { width: 100%; white-space: normal; }
  .form-submit-row-split { flex-direction: column-reverse; }
  .form-submit-row-split .btn { width: 100%; white-space: normal; }
}

/* ══════════════════════════════ FOOTER ══════════════════════════════ */
footer { border-top: 1px solid var(--border-soft); padding: 40px 0; }
.foot-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; }
.foot-logo { display: flex; align-items: center; gap: 8px; font-weight: 800; color: var(--text); }
.foot-logo img { width: 28px; height: 28px; border-radius: 6px; }
.foot-logo span em { color: var(--primary); font-style: normal; }
.foot-links { display: flex; align-items: center; gap: 22px; list-style: none; flex-wrap: wrap; }
.foot-links a { font-size: .84rem; color: var(--muted); transition: color .15s; }
.foot-links a:hover { color: var(--text); }
.foot-copy { font-size: .78rem; color: var(--muted); width: 100%; text-align: center; margin-top: 12px; }

/* ══════════════════════════════ RESPONSIVE / MOBILE NAV ══════════════════════════════ */
@media (max-width: 1040px) {
  .nav-links { display: none; }
  .nav-phone-text { display: none; }
  .nav-burger { display: flex; }
}
@media (min-width: 1041px) {
  /* Desktop always uses the full nav; never show a stale open menu after resize */
  .mobile-nav { display: none !important; }
}

@media (max-width: 640px) {
  /* Mobile CTA lives in .mobile-cta-bar instead — keeps the nav from
     overflowing on narrow screens (no horizontal scroll anywhere). */
  .nav-phone, .nav-actions .btn-ghost, .nav-actions .btn-primary { display: none; }
  .nav-inner { height: 56px; }
  .logo { font-size: 1rem; }
  .logo img { width: 30px; height: 30px; }
}

@media (max-width: 900px) {
  .founder-inner { grid-template-columns: 1fr; }
}

/* Sticky mobile CTA — accessible one-tap path to the demo form on small
   screens where the nav CTA scrolls out of view. */
.mobile-cta-bar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: var(--bg-nav); backdrop-filter: blur(12px);
  border-top: 1px solid var(--border-soft);
}
.mobile-cta-bar .btn { width: 100%; }
@media (max-width: 640px) {
  .mobile-cta-bar { display: block; }
  body { padding-bottom: 72px; }
}
/* The bar steps aside while the hero CTA or the demo form itself is on
   screen (app.js toggles .is-hidden via IntersectionObserver) so it never
   duplicates a visible CTA or covers the form's submit button. */
.mobile-cta-bar {
  transition: transform .28s var(--ease-out), opacity .28s var(--ease-out);
}
.mobile-cta-bar.is-hidden { transform: translateY(110%); opacity: 0; pointer-events: none; }

/* Analytics consent banner (COD-1367). Non-modal, pinned to the bottom.
   While it is open the sticky CTA steps aside (same .is-hidden treatment)
   and the body pads by the banner's measured height (--consent-h, set in
   app.js) so the demo submit button can always scroll clear of it. */
.consent-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  background: var(--bg-raised); color: var(--text);
  border-top: 1px solid var(--border);
  box-shadow: 0 -8px 30px rgba(0, 0, 0, .12);
}
.consent-banner[hidden] { display: none; }
.consent-banner:focus { outline: none; }
.consent-banner:focus-visible { outline: 2px solid var(--reward); outline-offset: -2px; }
.consent-inner {
  max-width: 1120px; margin: 0 auto;
  display: flex; align-items: center; gap: 16px 24px; flex-wrap: wrap;
}
.consent-text { flex: 1 1 420px; margin: 0; font-size: .9rem; line-height: 1.5; color: var(--text-dim); }
.consent-text strong { color: var(--text); margin-right: 4px; }
.consent-text a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.consent-text a:focus-visible { outline: 2px solid var(--reward); outline-offset: 2px; border-radius: 2px; }
.consent-actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.consent-actions[hidden], .consent-details[hidden] { display: none; }
.consent-actions .btn, .consent-details .btn { min-width: 132px; padding: 11px 20px; }
/* "Personnaliser": deliberately quieter than the two equal-weight buttons. */
.consent-link {
  background: none; border: 0; padding: 8px 4px; font: inherit; font-size: .9rem;
  color: var(--text); text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.consent-link:focus-visible { outline: 2px solid var(--reward); outline-offset: 2px; border-radius: 2px; }
/* Detailed view: one real checkbox per purpose, then one save button. */
.consent-details { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 24px; margin: 0; }
.consent-option {
  flex: 1 1 300px; display: flex; gap: 10px; align-items: flex-start;
  font-size: .9rem; line-height: 1.45; color: var(--text-dim); cursor: pointer;
}
.consent-option strong { display: block; color: var(--text); }
.consent-option input { flex: 0 0 auto; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--reward); cursor: pointer; }
.consent-option input:focus-visible { outline: 2px solid var(--reward); outline-offset: 2px; }
@media (max-width: 640px) {
  /* A long detailed view scrolls inside the banner instead of covering the page. */
  .consent-banner { max-height: 60vh; max-height: 60dvh; overflow-y: auto; }
  .consent-actions { flex: 1 1 100%; flex-wrap: wrap; }
  .consent-actions .btn { flex: 1 1 0; min-width: 0; }
  .consent-link { flex: 1 1 100%; }
  .consent-details .btn { flex: 1 1 100%; }
}
body.consent-open { padding-bottom: var(--consent-h, 0px); }
body.consent-open .mobile-cta-bar { transform: translateY(110%); opacity: 0; pointer-events: none; }

/* ══════════════════════════════ UX POLISH (COD-1076) ══════════════════════════════ */
/* Skip link — first tab stop, visible only on focus. */
.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 200;
  padding: 10px 16px; border-radius: var(--radius-sm);
  background: var(--primary); color: var(--primary-ink); font-weight: 700; font-size: .9rem;
  box-shadow: var(--shadow);
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus-visible { top: 12px; outline: 2px solid var(--reward); outline-offset: 2px; }

/* Anchor targets land below the sticky nav instead of under it. */
section[id], [id^="feat-"] { scroll-margin-top: 80px; }

/* Hero: eyebrow, CTA row, reassurance note and trust strip. */
.hero .eyebrow { margin-bottom: 18px; }
.hero-cta-row { gap: 14px; flex-wrap: wrap; margin: 0 0 14px; }
.hero-cta-note { font-size: .8rem; color: var(--muted); margin: 0 auto 22px; max-width: 520px; }
.hero-trust {
  list-style: none; display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px 22px; font-size: .84rem; color: var(--text-dim);
}
.hero-trust li { display: inline-flex; align-items: center; gap: 7px; }
.hero-trust .inc-check { font-size: .8rem; }
@media (min-width: 900px) {
  .hero-grid .hero-cta-note { margin-left: 0; margin-right: 0; }
  .hero-grid .hero-trust { justify-content: flex-start; }
}
@media (max-width: 640px) {
  .hero:first-of-type .hero-cta-row { margin-bottom: 12px; }
  .hero:first-of-type .hero-cta-note { margin-bottom: 16px; }
  .hero-cta-row .btn { width: 100%; white-space: normal; }
  /* Keep the order-board proof inside the first 390x844 viewport: drop the
     eyebrow and compact the trust strip into one wrapped row. */
  .hero:first-of-type .eyebrow { display: none; }
  .hero-trust { justify-content: center; gap: 4px 14px; font-size: .78rem; }
  .hero-trust li { align-items: flex-start; text-align: left; }
}

/* Consistent keyboard focus ring on every interactive control that lacked one. */
.nav-links > li > a:focus-visible, .nav-dropdown-trigger:focus-visible, .nav-dropdown-item:focus-visible,
.nav-phone:focus-visible, .lang-btn:focus-visible, .nav-burger:focus-visible, .mobile-nav-link:focus-visible,
.foot-links a:focus-visible, .logo:focus-visible, .faq-item summary:focus-visible,
.report-input:focus-visible, .calc-math a:focus-visible {
  outline: 2px solid var(--reward); outline-offset: 3px; border-radius: var(--radius-sm);
}

/* Hover lift on cards so the page reads as tactile, not static. */
.plan-card, .feat-item, .faq-item, .tl-item {
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.plan-card:hover, .feat-item:hover { transform: translateY(-3px); border-color: var(--border); box-shadow: var(--shadow); }
.plan-card:hover .plan-price, .feat-item:hover .feat-icon { color: var(--primary-hi); }
.faq-item:hover, .faq-item[open] { border-color: var(--border); }
.faq-item summary:hover { color: var(--primary-hi); }
.btn-outline:focus-visible, .btn-ghost:focus-visible { border-radius: var(--radius); }

/* Hairline between the stacked "hero"-styled sections so rhythm reads. */
#calculator { padding-top: 80px; border-top: 1px solid var(--border-soft); }
#system { padding-top: 40px; padding-bottom: 72px; }

@media (prefers-reduced-motion: reduce) {
  .btn:hover, .btn-primary:hover, .theme-toggle:hover, .assure-card:hover, .plan-card:hover, .feat-item:hover,
  .order-story-rail button[aria-selected="true"] { transform: none; }
  .mobile-cta-bar { transition: none; }
}

/* ====================================================================
   Sellhand landing refresh — clear, warm, conversion-led

   The page already has the right content and interaction contracts. This
   layer deliberately removes ornamental effects and gives the home page and
   restaurant launch page one restrained visual language.
   ==================================================================== */

body {
  font-family: 'Geist', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text-dim);
}

h1, h2, h3, h4 { color: var(--text); letter-spacing: -.035em; }
.mouse-glow-bg { display: none; }
.container { max-width: 1160px; }

nav {
  border-bottom: 1px solid var(--border-soft);
  box-shadow: none;
  backdrop-filter: blur(14px);
}
.nav-inner { height: 72px; }
.logo { font-size: 1.08rem; }
.logo img { width: 32px; height: 32px; border-radius: 9px; }
.nav-links { gap: 8px; }
.nav-links > li > a, .nav-dropdown-trigger {
  padding: 9px 11px;
  border-radius: 9px;
  font-size: .86rem;
}
.nav-links > li > a:hover, .nav-dropdown-trigger:hover { background: var(--bg-raised-2); }
.nav-actions > .btn { padding: 10px 16px; }
.btn { border-radius: 10px; box-shadow: none; }
.btn-primary, .btn-primary:hover {
  background: var(--primary);
  color: var(--primary-ink);
  box-shadow: none;
}
.btn-primary:hover { background: var(--primary-hi); transform: translateY(-1px); }
.btn-glow { animation: none; }
.btn-outline { border-color: var(--border); color: var(--text); background: transparent; }
.btn-outline:hover { border-color: var(--primary); color: var(--primary-hi); background: var(--bg-raised); }
.lang-btn.active, .theme-toggle:hover { background: var(--bg-raised-2); }

.hero { padding: 96px 0 72px; }
.hero-grid { gap: 76px; }
.hero h1 { max-width: 720px; font-size: clamp(2.65rem, 5.2vw, 5rem); line-height: .98; letter-spacing: -.065em; }
.hero-sub { font-size: 1.06rem; line-height: 1.65; max-width: 560px; }
.hero-copy .eyebrow { color: var(--primary-hi); }
.hero-cta-row { margin-top: 28px; }
.hero-cta-note { margin-top: 12px; }
.hero-trust { gap: 8px 20px; color: var(--text-dim); }
.hero-trust .inc-check, .inc-check { color: var(--reward); }

.hero-visual { align-items: center; }
.hero-mockup {
  width: min(100%, 470px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-raised);
  box-shadow: var(--shadow-lg);
  transform: none;
}
.hero-mockup-bar { background: var(--bg-raised-2); border-bottom-color: var(--border-soft); }
.hero-mockup-body { padding: 28px; }
.order-board-list li { padding: 15px; border-color: var(--border-soft); background: transparent; }
.order-board-count { background: var(--primary); color: var(--primary-ink); }

.features, .how, .pricing, .report-section, .founder, .faq, .demo-section { padding: 104px 0; }
.features:nth-of-type(even), .pricing, .demo-section { background: var(--bg-raised); }
.pricing-top, .features-top, .how-top, .report-top, .demo-top { max-width: 700px; }
.pricing-top h2, .features-top h2, .how-top h2, .report-top h2, .demo-top h2 { font-size: clamp(2.1rem, 4vw, 3.6rem); line-height: 1.03; }
.assure-grid, .feat-grid, .plans-grid { gap: 14px; }
.assure-card, .feat-item, .plan-card, .faq-item, .calc-card, .report-card, .demo-form {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-raised);
  box-shadow: none;
}
.assure-card, .feat-item { padding: 24px; }
.assure-card:hover, .feat-item:hover, .plan-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.assure-title, .feat-item h3, .plan-card h3 { color: var(--text); }
.assure-title { font-size: 1.05rem; }
.assure-desc, .feat-item p { color: var(--muted); }
.feat-icon { color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, transparent); border-radius: 10px; }

.order-story { padding: 104px 0; background: var(--bg-raised); }
.order-story-browser, .order-story-order { border-color: var(--border); box-shadow: var(--shadow); }
.order-story-browser { border-radius: var(--radius-lg); }
.order-story-order { border-radius: var(--radius); background: var(--bg-raised); }

.plan-card { padding: 28px; }
.plan-card.featured { border: 2px solid var(--primary); transform: none; }
.plan-card.featured:hover { transform: translateY(-2px); }
.plan-badge { background: var(--primary); color: var(--primary-ink); }
.plan-price { color: var(--text); }
.pricing-cta-row { gap: 12px; }

.demo-section { border-top: 1px solid var(--border-soft); }
.demo-form { max-width: 780px; padding: 30px; }
.form-field input, .form-field select, .form-field textarea, .report-input { border-color: var(--border); background: var(--bg); color: var(--text); border-radius: 9px; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus, .report-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); }
.demo-progress .dp-dot { background: var(--bg-raised); border-color: var(--border); color: var(--muted); }
.demo-progress .dp-step.active .dp-dot, .demo-progress .dp-step.done .dp-dot { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.demo-progress .dp-line { background: var(--border); }

footer { border-top-color: var(--border); background: var(--bg); }
.mobile-cta-bar { background: var(--bg-nav); border-top-color: var(--border); }

@media (max-width: 900px) {
  .hero { padding: 72px 0 56px; }
  .hero-grid { gap: 42px; }
  .hero h1 { font-size: clamp(2.55rem, 10vw, 4rem); }
  .features, .how, .pricing, .report-section, .founder, .faq, .demo-section { padding: 76px 0; }
}

@media (max-width: 640px) {
  .hero { padding: 56px 0 42px; }
  .hero:first-of-type .eyebrow { display: inline-flex; }
  .hero h1 { font-size: clamp(2.45rem, 13vw, 3.4rem); }
  .hero-sub { font-size: 1rem; margin-bottom: 22px; }
  .hero-mockup-body { padding: 20px; }
  .demo-form { padding: 20px; }
}

/* Restaurant launch page: move visitors from promise to proof to form in a
   single, quieter sequence. */
body[data-meta-prefix="dol."] .hero {
  padding-top: 88px;
  padding-bottom: 88px;
  text-align: left;
}
body[data-meta-prefix="dol."] .hero h1,
body[data-meta-prefix="dol."] .hero-sub { margin-left: 0; margin-right: 0; }
body[data-meta-prefix="dol."] .hero h1 { max-width: 760px; }
body[data-meta-prefix="dol."] .hero-sub { max-width: 650px; margin-bottom: 28px; }
body[data-meta-prefix="dol."] .hero .pricing-cta-row { justify-content: flex-start; }
body[data-meta-prefix="dol."] .features { background: var(--bg); }
body[data-meta-prefix="dol."] .pricing { background: var(--bg-raised); }
body[data-meta-prefix="dol."] .plans-note { max-width: 640px; margin: 28px auto 0; color: var(--muted); }
body[data-meta-prefix="dol."] .demo-top { max-width: 720px; }

@media (max-width: 640px) {
  body[data-meta-prefix="dol."] .hero { padding-top: 56px; padding-bottom: 58px; }
  body[data-meta-prefix="dol."] .hero .pricing-cta-row .btn { width: 100%; }
}

/* Pricing: commission line, feature lists, "which plan fits" table (new plans) */
.plan-commission { font-weight: 700; font-size: .95rem; margin: 8px 0 14px; }
.plan-features { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 6px; font-size: .88rem; }
.plan-features li { padding-left: 18px; position: relative; }
.plan-features li::before { content: "\2713"; position: absolute; left: 0; font-weight: 700; }
.plan-fit { max-width: 960px; margin: 40px auto 0; }
.plan-fit h3 { font-size: 1.2rem; margin-bottom: 12px; }
.fit-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.fit-table th, .fit-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
.fit-table th { color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.plan-fit .plans-note { margin-top: 14px; text-align: left; }
@media (max-width: 760px) { .plan-features li { font-size: .9rem; } .fit-table th, .fit-table td { padding: 10px 8px; } }
.plan-cta { margin-top: 16px; }

/* Pricing cards: equal height, signup button pinned to the bottom, and the whole
   card is one click target (the button's link is stretched over the card). */
.plans-grid { align-items: stretch; }
.plan-card { position: relative; display: flex; flex-direction: column; cursor: pointer; }
.plan-card .plan-cta { position: static; margin-top: auto; align-self: stretch; text-align: center; justify-content: center; }
.plan-card .plan-fine { margin-bottom: 20px; }
.plan-card .plan-cta::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.plan-card:focus-within { outline: 2px solid var(--accent-text, #ff5b2e); outline-offset: 3px; }

/* ====================================================================
   Homepage — dark cinematic (COD-1626)

   One ember accent, film grain, vignettes, Geist display type. Motion is
   driven by app.js (ember field, word reveal, pinned order flow, counters,
   spotlight); every animated element renders its final state without JS
   and under prefers-reduced-motion.
   ==================================================================== */

.cinema { --container: 1180px; --gutter: 32px; font-family: var(--font-sans); color: var(--text-dim); background: var(--bg); }
.cinema h1, .cinema h2, .cinema h3, .cinema h4 { font-family: var(--font-sans); color: var(--text); letter-spacing: -.035em; }
.cinema .mono, .cinema .mono-eyebrow { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.cinema .tnum { font-variant-numeric: tabular-nums; }
.cinema .container { max-width: var(--container); padding-inline: var(--gutter); }
.cinema section { position: relative; scroll-margin-top: 80px; }
.cinema ::selection { background: var(--primary); color: var(--primary-ink); }
.cinema :is(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 6px; }

/* Film grain: fixed SVG turbulence at ~4%, above content, never interactive. */
.grain {
  position: fixed; inset: -50%; z-index: 300; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-shift 1.2s steps(6) infinite;
}
:root[data-theme="light"] .grain { opacity: .035; mix-blend-mode: multiply; filter: invert(1); }
@keyframes grain-shift {
  0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); }
}

.mono-eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px;
  color: var(--muted); font-size: .72rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
}
.mono-eyebrow::before { content: ''; width: 18px; height: 1px; background: var(--primary); }
.cinema .display { font-weight: 800; letter-spacing: -.04em; line-height: .94; }
.text-link { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font-weight: 600; font-size: .92rem; border-bottom: 1px solid var(--primary); padding-bottom: 2px; transition: color var(--dur-fast), gap var(--dur-fast) var(--ease-out); }
.text-link::after { content: '→'; color: var(--accent-text); }
.text-link:hover { color: var(--accent-text); gap: 12px; }

/* Buttons */
.cinema .btn { border-radius: var(--pill); font-weight: 600; letter-spacing: -.01em; min-height: 44px; padding: 11px 22px; box-shadow: none; }
.cinema .btn-lg { min-height: 52px; padding: 14px 28px; font-size: 1rem; }
.cinema .btn-primary { background: var(--primary); color: var(--primary-ink); }
.cinema .btn-primary:hover { background: var(--primary-hi); color: var(--primary-ink); transform: translateY(-1px); box-shadow: 0 10px 36px rgba(255, 91, 46, .35); }
.cinema .btn-outline { border: 1px solid var(--border); background: rgba(255, 255, 255, .02); color: var(--text); }
:root[data-theme="light"] .cinema .btn-outline { background: rgba(10, 10, 10, .02); border-color: rgba(10, 10, 10, .16); }
.cinema .btn-outline:hover { border-color: var(--primary); color: var(--text); background: rgba(255, 91, 46, .08); }
.cinema .btn-ghost { color: var(--text-dim); }
.btn-ember { box-shadow: 0 0 0 1px rgba(255, 91, 46, .5), 0 10px 40px rgba(255, 91, 46, .35), 0 0 90px rgba(255, 91, 46, .25) !important; }
.btn-ember:hover { box-shadow: 0 0 0 1px rgba(255, 122, 82, .7), 0 14px 50px rgba(255, 91, 46, .45), 0 0 120px rgba(255, 91, 46, .3) !important; }

/* Announcement + nav */
.cinema .announcement { position: relative; z-index: 101; padding: 9px 16px; text-align: center; font-size: .78rem; color: var(--muted); background: var(--bg); border-bottom: 1px solid var(--border-soft); }
.cinema .announcement a { margin-left: 8px; color: var(--accent-text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.cinema > nav { background: var(--bg-nav); backdrop-filter: saturate(140%) blur(18px); -webkit-backdrop-filter: saturate(140%) blur(18px); border-bottom: 1px solid var(--border-soft); box-shadow: none; }
.cinema .nav-inner { height: 68px; gap: 20px; }
.cinema .logo { gap: 10px; }
.cinema .logo .name, .cinema .foot-logo span { font-family: var(--font-sans); font-size: 1.24rem; font-weight: 700; letter-spacing: -.045em; color: var(--text); }
.logo-mark { display: block; flex: 0 0 auto; border-radius: 9px; box-shadow: 0 0 24px rgba(255, 91, 46, .35); }
.cinema .nav-links { gap: 4px; margin-right: auto; margin-left: 18px; }
.cinema .nav-links > li > a { padding: 8px 12px; border-radius: var(--pill); font-size: .86rem; font-weight: 500; color: var(--text-dim); }
.cinema .nav-links > li > a:hover { color: var(--text); background: var(--bg-raised-2); }
.cinema .nav-actions { gap: 8px; }
.cinema .nav-actions .btn { min-height: 38px; padding: 8px 16px; font-size: .86rem; }
.cinema .tenant-signin { border: 1px solid var(--border); color: var(--text); }
.cinema .lang-switch { background: var(--bg-raised); border-color: var(--border); }
.cinema .lang-btn { font-family: var(--font-mono); font-size: .7rem; min-height: 30px; padding: 4px 9px; }
.cinema .lang-btn.active { background: var(--bg-raised-2); color: var(--text); }
.cinema .theme-toggle { width: 34px; height: 34px; flex-basis: 34px; background: var(--bg-raised); border-color: var(--border); box-shadow: none; }
.cinema .mobile-nav { background: var(--bg-raised); border-bottom: 1px solid var(--border); }
.cinema .nav-burger span { background: var(--text); }

/* ── Hero ── */
.cine-hero {
  min-height: calc(100svh - 104px); display: flex; flex-direction: column; justify-content: center;
  overflow: hidden; isolation: isolate; padding: 96px 0 120px;
}
.cine-hero::after { /* vignette */
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 80% at 50% 40%, transparent 40%, var(--bg) 100%);
}
.ember-field { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.6s var(--ease-out); }
.ember-field.is-live { opacity: 1; }
.cine-hero-glow {
  position: absolute; z-index: -3; left: 50%; top: 58%; width: min(1100px, 140vw); aspect-ratio: 1.6; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(255, 91, 46, .22), rgba(255, 91, 46, .08) 45%, transparent 75%);
  filter: blur(40px); pointer-events: none;
}
.cine-hero-inner { text-align: center; display: flex; flex-direction: column; align-items: center; will-change: transform, opacity; }
.cine-title { max-width: 16ch; margin: 0 auto 28px; font-size: clamp(3.1rem, 8.6vw, 8.4rem); }
.cine-title .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .02em .12em; margin-bottom: -.12em; }
.cine-title .wi { display: inline-block; transform-origin: 0 100%; }
.cine-title .w-accent .wi { color: var(--primary); }
.js-motion .cine-title .wi { transform: translateY(108%) rotate(6deg); opacity: 0; }
.js-motion .cine-title.is-revealed .wi {
  transform: none; opacity: 1;
  transition: transform 1.1s var(--ease-out), opacity .5s var(--ease-out);
  transition-delay: calc(var(--i) * 70ms + 120ms);
}
.cine-lead { max-width: 640px; margin: 0 auto 36px; font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.55; color: var(--text-dim); }
.cinema .premium-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 14px; }
.premium-text-link { color: var(--text-dim); font-size: .92rem; font-weight: 500; text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 5px; padding: 10px 6px; }
.premium-text-link:hover { color: var(--text); text-decoration-color: var(--primary); }
.cine-note { margin-top: 26px; color: var(--muted); font-size: .74rem; letter-spacing: .04em; }
.js-motion .cine-intro { opacity: 0; transform: translateY(14px); filter: blur(6px); }
.js-motion .is-intro-done .cine-intro, .js-motion .cine-hero.is-intro-done .cine-intro {
  opacity: 1; transform: none; filter: none;
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out), filter .9s var(--ease-out);
  transition-delay: calc(var(--d) * 70ms + 650ms);
}
.scroll-cue { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--muted); font-family: var(--font-mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; }
.js-motion .cine-hero.is-intro-done .scroll-cue { transform: translateX(-50%); }
.scroll-cue i { width: 1px; height: 38px; background: linear-gradient(var(--primary), transparent); transform-origin: top; animation: cue 2.4s var(--ease-in-out) infinite; }
@keyframes cue { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* ── Film still ── */
.film { padding: 40px 0 120px; }
.film-frame { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--border); aspect-ratio: 2.39 / 1; background: var(--bg-raised); box-shadow: var(--shadow-lg); }
.film-image { width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.14 - var(--film, 0) * .14)); filter: saturate(.85) contrast(1.05); will-change: transform; }
.film-frame::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 8, 10, .92) 0%, rgba(8, 8, 10, .55) 42%, rgba(8, 8, 10, .1) 75%), radial-gradient(130% 120% at 50% 50%, transparent 55%, rgba(8, 8, 10, .7) 100%); pointer-events: none; }
.film-caption { position: absolute; z-index: 1; left: clamp(20px, 4vw, 56px); bottom: clamp(20px, 4vw, 52px); max-width: 420px; color: #f4f4f5; }
.film-caption .mono-eyebrow { color: #d4d4d8; }
.film-title { white-space: pre-line; margin: 0 0 20px; font-size: clamp(1.6rem, 3.4vw, 2.9rem); font-weight: 700; letter-spacing: -.04em; line-height: 1.02; color: #f4f4f5; }
.film-caption .text-link { color: #f4f4f5; }
.film-caption .text-link::after { color: #ff7a52; }
.film-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-top: 56px; }
.film-copy h2 { font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.02; }
.film-copy p { font-size: 1.08rem; color: var(--muted); max-width: 480px; }

/* ── Manifesto: words brighten as the paragraph crosses the viewport ── */
.manifesto { padding: 120px 0; border-top: 1px solid var(--border-soft); }
.manifesto-title { max-width: 900px; font-size: clamp(2.2rem, 5vw, 4.4rem); line-height: 1; margin-bottom: 40px; }
.manifesto-body { max-width: 980px; font-size: clamp(1.4rem, 2.8vw, 2.35rem); line-height: 1.25; letter-spacing: -.025em; font-weight: 500; color: var(--text); }
.manifesto-body .w { transition: color .35s var(--ease-out); }
.js-motion .manifesto-body .w { color: color-mix(in srgb, var(--text) 22%, transparent); }
.js-motion .manifesto-body .w.is-lit { color: var(--text); }

/* ── Pinned flow ── */
/* Default (no JS, reduced motion): a static section with every caption shown and
   the mockups in their final state. The pinned, one-step-at-a-time version is
   opt-in under .js-motion (set in <head> only when motion is allowed). */
.flow { border-top: 1px solid var(--border-soft); }
.flow-sticky { position: relative; display: flex; align-items: center; overflow: hidden; padding: 120px 0; }
.js-motion .flow { height: 460vh; }
.js-motion .flow-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; padding: 0; }
.flow-sticky::before { content: ''; position: absolute; right: -10%; top: 50%; width: 70vw; height: 70vw; max-width: 900px; max-height: 900px; transform: translateY(-50%); background: radial-gradient(closest-side, var(--ember-glow), transparent); filter: blur(30px); pointer-events: none; }
.flow-inner { position: relative; width: 100%; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; align-items: center; }
.flow-copy h2 { font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1.02; margin-bottom: 30px; max-width: 520px; }
.flow-steps { list-style: none; display: grid; gap: 6px; counter-reset: flow; }
.flow-step { display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid transparent; transition: opacity .5s var(--ease-out), background .5s var(--ease-out), border-color .5s var(--ease-out); }
.js-motion .flow-step { opacity: .38; }
.flow-step-num { font-family: var(--font-mono); font-size: .74rem; color: var(--muted); padding-top: 3px; }
.flow-step strong { display: block; color: var(--text); font-size: 1rem; letter-spacing: -.015em; }
.flow-step span:not(.flow-step-num) { display: block; color: var(--muted); font-size: .88rem; line-height: 1.45; margin-top: 4px; overflow: hidden; transition: max-height .6s var(--ease-out), opacity .5s var(--ease-out), margin .6s var(--ease-out); }
.js-motion .flow-step span:not(.flow-step-num) { max-height: 0; opacity: 0; margin-top: 0; }
.js-motion .flow-step.is-active { opacity: 1; background: var(--bg-raised); border-color: var(--border); }
.js-motion .flow-step.is-active .flow-step-num { color: var(--accent-text); }
.js-motion .flow-step.is-active span:not(.flow-step-num) { max-height: 5em; opacity: 1; margin-top: 4px; }
.js-motion .flow-step.is-done { opacity: .62; }
.flow .flow-progress, .flow .mock-ticket { display: none; }
.js-motion .flow .flow-progress { display: block; }
.js-motion .flow .mock-ticket { display: grid; }
.flow-note { margin-top: 18px; font-size: .68rem; letter-spacing: .08em; color: var(--muted); text-transform: uppercase; }
.flow-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--border-soft); transition: opacity .4s; }
.flow-progress i { display: block; height: 100%; width: 100%; background: var(--primary); transform-origin: left; transform: scaleX(var(--p, 0)); box-shadow: 0 0 12px var(--primary); }

.flow-stage { position: relative; height: min(600px, 74vh); }
.mock-phone {
  position: absolute; left: 0; top: 50%; width: min(270px, 46%); aspect-ratio: 9 / 18.5; transform: translateY(-50%) rotate(-4deg);
  border-radius: 38px; padding: 10px; background: linear-gradient(160deg, #2a2a30, #0d0d10); border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .65), inset 0 0 0 1px rgba(255, 255, 255, .04); transition: transform 1s var(--ease-out);
}
.flow[data-step="1"] .mock-phone, .flow[data-step="0"] .mock-phone { transform: translateY(-50%) rotate(-2deg) scale(1.02); }
.mock-phone-notch { position: absolute; top: 18px; left: 50%; width: 76px; height: 20px; transform: translateX(-50%); background: #050506; border-radius: 12px; z-index: 2; }
.mock-phone-screen { position: relative; height: 100%; overflow: hidden; border-radius: 29px; background: #f6f5f2; color: #111; padding: 46px 14px 14px; font-size: 11px; display: flex; flex-direction: column; gap: 10px; }
.mock-store-head { display: flex; align-items: center; gap: 8px; }
.mock-store-head strong { display: block; font-size: 12.5px; letter-spacing: -.02em; }
.mock-store-head small { color: #6b6b72; font-size: 10px; }
.mock-store-logo { width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(135deg, #7c2d12, #c2410c); }
.mock-store-hero { height: 22%; border-radius: 14px; background: url('/restaurant-service-960.webp') center / cover, #2a1a12; }
.mock-items { list-style: none; display: grid; gap: 7px; }
.mock-items li { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 8px; padding: 6px; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); font-weight: 600; transition: box-shadow .5s var(--ease-out); }
.mock-thumb { width: 34px; height: 34px; border-radius: 9px; background: radial-gradient(circle at 40% 40%, #f4b26b, #a8521d); }
.mock-thumb-2 { background: radial-gradient(circle at 40% 40%, #f6e3a8, #b7863b); }
.mock-add { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: #111; color: #fff; font-size: 13px; transition: background .4s var(--ease-out), transform .5s var(--ease-out); }
.mock-cart { display: flex; justify-content: space-between; align-items: baseline; margin-top: auto; padding: 8px 4px 0; border-top: 1px dashed #d4d4d8; opacity: 0; transform: translateY(6px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.mock-cart strong { font-size: 14px; }
.mock-pay { position: relative; height: 38px; border-radius: 999px; background: #111; color: #fff; display: grid; place-items: center; font-weight: 700; overflow: hidden; transition: background .5s var(--ease-out); }
.mock-pay > span { grid-area: 1 / 1; transition: transform .6s var(--ease-out), opacity .4s; }
.mock-pay-done { transform: translateY(140%); opacity: 0; }
.mock-track { position: absolute; left: 10px; right: 10px; bottom: 10px; padding: 12px; border-radius: 16px; background: #111; color: #fff; font-weight: 600; display: grid; gap: 9px; transform: translateY(130%); transition: transform .8s var(--ease-out); }
.mock-track i { display: block; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .18); overflow: hidden; }
.mock-track b { display: block; height: 100%; width: 62%; background: #ff5b2e; border-radius: inherit; transform-origin: left; transform: scaleX(0); transition: transform 1.4s var(--ease-out) .3s; }

.mock-ticket {
  position: absolute; z-index: 3; left: 18%; top: 54%; display: grid; grid-template-columns: auto 1fr; column-gap: 9px; align-items: center;
  padding: 10px 14px; border-radius: 14px; background: var(--primary); color: #0a0a0a; box-shadow: 0 18px 50px rgba(255, 91, 46, .45);
  opacity: 0; pointer-events: none; transform: translate(calc(var(--t, 0) * 230%), calc(var(--t, 0) * -170%)) scale(calc(1 - var(--t, 0) * .15)) rotate(calc(-6deg + var(--t, 0) * 6deg));
}
.mock-ticket strong { font-size: .86rem; letter-spacing: -.01em; }
.mock-ticket small { grid-column: 2; font-size: .68rem; opacity: .75; }
.mock-ticket-dot { grid-row: span 2; width: 8px; height: 8px; border-radius: 50%; background: #0a0a0a; animation: pulse-dot 1.2s ease-in-out infinite; }
@keyframes pulse-dot { 50% { opacity: .3; } }
.flow[data-step="1"] .mock-ticket { opacity: 1; }

.mock-dash {
  position: absolute; right: 0; top: 50%; width: min(380px, 57%); transform: translateY(-50%); padding: 18px; border-radius: 22px;
  background: linear-gradient(180deg, var(--bg-raised-2), var(--bg-raised)); border: 1px solid var(--border); box-shadow: var(--shadow-lg);
  display: grid; gap: 10px; font-size: .82rem; color: var(--text-dim);
}
:root[data-theme="light"] .mock-dash { background: #111114; border-color: rgba(255, 255, 255, .08); color: #d4d4d8; }
.mock-dash-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.mock-dash-head strong { color: #f4f4f5; font-size: .92rem; letter-spacing: -.01em; }
.mock-live { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .14em; color: #34d399; }
.mock-live i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; animation: pulse-dot 1.6s ease-in-out infinite; }
.mock-row { display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .06); color: #d4d4d8; }
.mock-row .mono { color: #a1a1aa; font-size: .74rem; }
.mock-bar { height: 6px; border-radius: 4px; background: rgba(255, 255, 255, .08); width: 70%; }
.mock-row-new { opacity: 0; transform: translateY(-10px) scale(.98); transition: opacity .6s var(--ease-out), transform .7s var(--ease-out), border-color .6s, background .6s; }
.mock-row-new > span:nth-child(2) { color: #f4f4f5; font-weight: 600; }
.mock-pill { display: grid; padding: 4px 10px; border-radius: 999px; font-size: .68rem; font-weight: 700; background: rgba(255, 91, 46, .16); color: #ff7a52; }
.mock-pill em { grid-area: 1 / 1; font-style: normal; opacity: 0; transition: opacity .35s; }
.mock-pill-muted { background: rgba(255, 255, 255, .06); color: #a1a1aa; }
.mock-revenue { display: grid; gap: 2px; padding: 14px 12px; border-radius: 14px; background: rgba(255, 255, 255, .02); border: 1px solid rgba(255, 255, 255, .06); }
.mock-revenue > span { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: #a1a1aa; }
.mock-revenue strong { font-size: 2rem; letter-spacing: -.03em; color: #f4f4f5; font-weight: 600; }
.mock-revenue small { color: #a1a1aa; font-size: .72rem; }
.mock-chip { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 999px; background: rgba(52, 211, 153, .1); color: #a7f3d0; font-size: .74rem; font-weight: 600; opacity: 0; transform: translateY(8px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.mock-avatar { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: #34d399; color: #062018; font-size: .7rem; font-weight: 800; }

/* Step states (data-step on .flow, set from scroll progress in app.js) */
.flow:not([data-step="0"]) .mock-items li { box-shadow: 0 0 0 2px #ff5b2e; }
.flow:not([data-step="0"]) .mock-add { background: #ff5b2e; color: #0a0a0a; transform: rotate(45deg); }
.flow:not([data-step="0"]) .mock-cart { opacity: 1; transform: none; }
.flow:not([data-step="0"]) .mock-pay { background: #ff5b2e; color: #0a0a0a; }
.flow:not([data-step="0"]) .mock-pay-idle { transform: translateY(-140%); opacity: 0; }
.flow:not([data-step="0"]) .mock-pay-done { transform: none; opacity: 1; }
.flow:is([data-step="3"], [data-step="4"]) .mock-track { transform: none; }
.flow:is([data-step="3"], [data-step="4"]) .mock-track b { transform: scaleX(1); }
.flow:is([data-step="2"], [data-step="3"], [data-step="4"]) .mock-row-new { opacity: 1; transform: none; border-color: rgba(255, 91, 46, .4); background: rgba(255, 91, 46, .06); }
.flow[data-step="1"] .mock-s-new, .flow[data-step="2"] .mock-s-kitchen, .flow:is([data-step="3"], [data-step="4"]) .mock-s-route { opacity: 1; }
.flow[data-step="4"] .mock-chip { opacity: 1; transform: none; }
.flow[data-step="4"] .mock-revenue { border-color: rgba(255, 91, 46, .4); box-shadow: 0 0 40px rgba(255, 91, 46, .15); }

/* ── Stats ── */
.stats { padding: 120px 0; border-top: 1px solid var(--border-soft); }
.stats h2 { font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.02; max-width: 640px; margin-bottom: 56px; }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--border); }
.stat { padding: 30px 26px 8px 0; border-right: 1px solid var(--border-soft); }
.stat + .stat { padding-left: 26px; }
.stat:last-child { border-right: 0; }
.stat-value { font-size: clamp(2.6rem, 5vw, 4.4rem); font-weight: 500; letter-spacing: -.05em; color: var(--text); line-height: 1; white-space: nowrap; }
.stat-value [data-i18n] { color: var(--accent-text); font-size: .5em; letter-spacing: -.02em; }
.stat-label { margin-top: 14px; color: var(--muted); font-size: .92rem; max-width: 230px; }
.stats-note { margin-top: 34px; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* ── Order story (real product screenshots) ── */
.cinema .order-story { padding: 120px 0; background: var(--bg); border-top: 1px solid var(--border-soft); }
.cinema .order-story .eyebrow { color: var(--muted); font-family: var(--font-mono); font-size: .72rem; font-weight: 500; letter-spacing: .14em; }
.cinema .order-story .eyebrow::before { width: 18px; height: 1px; border-radius: 0; background: var(--primary); }
.cinema .order-story-layout { grid-template-columns: 1fr; }
.cinema .order-story-browser { border: 1px solid var(--border); background: var(--bg-raised); box-shadow: var(--shadow-lg), 0 0 120px rgba(255, 91, 46, .08); }
.cinema .order-story-browser-bar { background: var(--bg-raised-2); border-bottom: 1px solid var(--border-soft); }
.cinema .order-story-browser-url { font-family: var(--font-mono); font-size: .68rem; }
.cinema .order-story-scene figcaption { background: rgba(8, 8, 10, .82); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .08); border-radius: 14px; }
.cinema .order-story-scene figcaption strong { color: #f4f4f5; }
.cinema .order-story-scene figcaption span { color: #d4d4d8; }
.cinema .order-story-rail button { border-radius: 14px; }
.cinema .order-story-rail button small { font-family: var(--font-mono); }
.cinema .order-story-control, .cinema .order-story-play { border-radius: var(--pill); background: var(--bg-raised); border: 1px solid var(--border); color: var(--text-dim); }

/* ── Bento with spotlight + border beam ── */
.bento { padding: 120px 0; border-top: 1px solid var(--border-soft); }
.bento-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.bento-tile {
  --mx: 50%; --my: 50%;
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 12px; min-height: 240px; padding: 28px;
  border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--bg-raised);
  transition: transform .5s var(--ease-out), border-color .4s;
}
.bento-tile::before { /* spotlight */
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .4s var(--ease-out);
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(255, 91, 46, .14), transparent 60%);
}
.bento-tile::after { /* border beam */
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: conic-gradient(from var(--beam, 0deg), transparent 0 70%, #ff5b2e 80%, #ffb199 84%, transparent 92%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: beam 4s linear infinite;
}
@property --beam { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes beam { to { --beam: 360deg; } }
.bento-tile:hover { transform: translateY(-3px); border-color: rgba(255, 91, 46, .25); }
.bento-tile:hover::before, .bento-tile:hover::after, .bento-tile:focus-within::after { opacity: 1; }
.bento-tile h3 { font-size: 1.45rem; line-height: 1.1; letter-spacing: -.03em; }
.bento-tile p { color: var(--muted); font-size: .95rem; }
.bento-tile .text-link { margin-top: auto; align-self: flex-start; }
.bento-tile .value-number { color: var(--accent-text); font-size: .74rem; letter-spacing: .12em; margin-bottom: auto; padding-bottom: 28px; }
.bento-hero { grid-column: span 2; min-height: 320px; justify-content: flex-end; background: radial-gradient(90% 120% at 100% 0%, rgba(255, 91, 46, .2), transparent 55%), var(--bg-raised); }
.bento-hero h2 { font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1.02; max-width: 620px; }
.bento-hero p { max-width: 460px; font-size: 1.02rem; }
.bento-hero .btn { align-self: flex-start; margin-top: 10px; }
.bento-wide { grid-column: span 2; }

/* ── How it works ── */
.cinema .how { padding: 120px 0; border-top: 1px solid var(--border-soft); }
.cinema .how-top h2 { font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.02; font-weight: 700; }
.cinema .how .eyebrow, .cinema .pricing .eyebrow, .cinema .founder .eyebrow, .cinema .faq .eyebrow, .cinema .demo-section .eyebrow { color: var(--muted); font-family: var(--font-mono); font-size: .72rem; font-weight: 500; letter-spacing: .14em; }
.cinema :is(.how, .pricing, .founder, .faq, .demo-section) .eyebrow::before { width: 18px; height: 1px; border-radius: 0; background: var(--primary); }
.cinema .timeline { max-width: 1080px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.cinema .timeline::before { display: none; }
.cinema .tl-item { margin: 0; padding: 30px 26px; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--bg-raised); }
.cinema .tl-dot { display: none; }
.cinema .tl-time { font-family: var(--font-mono); color: var(--accent-text); font-size: .74rem; letter-spacing: .12em; margin-bottom: 40px; }
.cinema .tl-item h3 { font-size: 1.3rem; letter-spacing: -.03em; }
.cinema .how-cta-row { gap: 12px; flex-wrap: wrap; }

/* ── Pricing ── */
.cinema .pricing { padding: 120px 0; background: var(--bg); border-top: 1px solid var(--border-soft); }
.cinema .pricing-top h2 { font-weight: 700; }
.cinema .pricing-top h2 em, .cinema .how-top h2 em { font-style: normal; color: var(--accent-text); }
.cinema .plans-grid { max-width: none; gap: 14px; }
.cinema .plan-card { position: relative; isolation: isolate; padding: 30px; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--bg-raised); color: var(--text-dim); }
.cinema .plan-name { font-family: var(--font-mono); font-size: .76rem; font-weight: 500; letter-spacing: .14em; color: var(--muted); }
.cinema .plan-price { font-size: clamp(2.2rem, 3.4vw, 3rem); font-weight: 600; letter-spacing: -.05em; color: var(--text); white-space: nowrap; }
.cinema .plan-per { font-size: .95rem; color: var(--muted); letter-spacing: 0; }
.cinema .plan-commission { color: var(--text); }
.cinema .plan-features li::before { color: var(--accent-text); }
.cinema .plan-fine { color: var(--muted); }
.cinema .plan-card[data-plan="scale"] .plan-per { display: block; }
.plan-card-beam { background: radial-gradient(120% 70% at 50% 0%, rgba(255, 91, 46, .14), transparent 60%), var(--bg-raised) !important; border-color: rgba(255, 91, 46, .35) !important; }
.plan-card-beam::after {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--beam, 0deg), transparent 0 70%, #ff5b2e 80%, #ffb199 84%, transparent 92%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: beam 5s linear infinite;
}
.cinema .plan-card:hover .plan-price { color: var(--text); }
.cinema .fit-table td strong { color: var(--text); }
.cinema .plans-note { color: var(--muted); }

/* ── Founder ── */
.cinema .founder { padding: 120px 0; border-top: 1px solid var(--border-soft); }
.cinema .founder-inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: stretch; }
.cinema .founder-copy h2 { font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.02; font-weight: 700; }
.cinema .founder-guarantee { margin: 26px 0; padding: 18px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg-raised); display: flex; gap: 14px; }
.cinema .founder-guarantee-icon { color: var(--accent-text); }
.cinema .founder-photo { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--border); min-height: 460px; width: auto; height: auto; }
.cinema .founder-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% center; filter: saturate(.85); }
.cinema .founder-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 45%, rgba(8, 8, 10, .9)); }
.cinema .founder-photo figcaption { position: absolute; z-index: 1; left: 22px; right: 22px; bottom: 20px; color: #f4f4f5; font-size: 1.15rem; font-weight: 600; letter-spacing: -.02em; }

/* ── FAQ ── */
.cinema .faq { padding: 120px 0; border-top: 1px solid var(--border-soft); }
.cinema .faq-top h2 { font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.04; font-weight: 700; }
.cinema .faq-item { border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg-raised); padding: 0 22px; }
.cinema .faq-item summary { color: var(--text); font-weight: 600; padding: 20px 0; }
.cinema .faq-item summary::after { color: var(--accent-text); }
.cinema .faq-item[open] { border-color: rgba(255, 91, 46, .3); }
.cinema .faq-item summary:hover { color: var(--text); }

/* ── Demo ── */
.cinema .demo-section { padding: 120px 0; background: var(--bg); border-top: 1px solid var(--border-soft); }
.cinema .demo-top h2 { font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.04; font-weight: 700; }
.cinema .demo-form { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.cinema .form-field input, .cinema .form-field select, .cinema .form-field textarea { background: var(--bg); border: 1px solid var(--border); color: var(--text); border-radius: 12px; font-family: inherit; }
.cinema .demo-expectations p::before { color: var(--accent-text); }
.cinema .demo-progress .dp-dot { font-family: var(--font-mono); }
.cinema .demo-privacy a { color: var(--accent-text); }
.cinema .form-success { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.cinema .success-check { background: var(--primary); }
.cinema .success-check svg { stroke: var(--primary-ink); }

/* ── Closing CTA ── */
.final-cta { padding: 160px 0 170px; overflow: hidden; isolation: isolate; text-align: center; border-top: 1px solid var(--border-soft); }
.final-glow { position: absolute; z-index: -1; left: 50%; bottom: -30%; width: min(1200px, 160vw); aspect-ratio: 1.4; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(255, 91, 46, .3), rgba(255, 91, 46, .1) 45%, transparent 75%); filter: blur(50px); }
.final-cta::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(110% 90% at 50% 50%, transparent 50%, var(--bg) 100%); pointer-events: none; }
.final-inner { display: flex; flex-direction: column; align-items: center; }
.final-cta h2 { font-size: clamp(3rem, 9vw, 8rem); max-width: 12ch; margin-bottom: 24px; }
.final-cta p:not(.mono-eyebrow) { max-width: 520px; color: var(--text-dim); font-size: 1.1rem; margin-bottom: 36px; }

/* ── Footer, consent, mobile bar ── */
.cinema footer { background: var(--bg); border-top: 1px solid var(--border-soft); padding: 48px 0; }
.cinema .foot-logo { gap: 10px; }
.cinema .foot-links a, .cinema .foot-copy { color: var(--muted); }
.cinema .foot-links a:hover { color: var(--text); }
.cinema .foot-copy { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .06em; }
.cinema .consent-banner { background: rgba(17, 17, 20, .94); backdrop-filter: blur(16px); border-top: 1px solid var(--border); color: var(--text-dim); }
:root[data-theme="light"] .cinema .consent-banner { background: rgba(255, 255, 255, .96); }
.cinema .mobile-cta-bar { background: var(--bg-nav); backdrop-filter: blur(16px); border-top: 1px solid var(--border-soft); }

/* Reveal: 3-property entrance (opacity, y, blur) on easeOutExpo. */
.cinema .reveal { opacity: 0; transform: translateY(18px); filter: blur(6px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out), filter .9s var(--ease-out); }
.cinema .reveal.in-view { opacity: 1; transform: none; filter: none; }
.no-js .cinema .reveal, html:not(.js-motion) .cinema .reveal { opacity: 1; transform: none; filter: none; }

/* ── Responsive ── */
@media (max-width: 1040px) {
  .cinema .nav-links { display: none; }
  .flow-inner { grid-template-columns: 1fr 1fr; gap: 28px; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(3) { padding-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--border-soft); }
}
@media (max-width: 860px) {
  .cinema { --gutter: 20px; }
  .film-frame { aspect-ratio: 4 / 5; }
  .film-frame::after { background: linear-gradient(0deg, rgba(8, 8, 10, .95) 0%, rgba(8, 8, 10, .5) 50%, rgba(8, 8, 10, .1) 80%); }
  .film-copy { grid-template-columns: 1fr; gap: 16px; margin-top: 40px; }
  .bento-grid { grid-template-columns: 1fr 1fr; }
  .bento-hero, .bento-wide { grid-column: span 2; }
  .cinema .timeline, .cinema .plans-grid { grid-template-columns: 1fr; }
  .cinema .founder-inner { grid-template-columns: 1fr; }
  .cinema .founder-photo { min-height: 360px; }

  /* Flow: copy on top, stage below, one caption at a time. */
  .js-motion .flow { height: 420vh; }
  .flow-inner { grid-template-columns: 1fr; gap: 6px; align-content: center; }
  .flow-copy h2 { font-size: clamp(1.5rem, 6.6vw, 2.2rem); margin-bottom: 10px; }
  .flow-copy .mono-eyebrow { margin-bottom: 10px; }
  .js-motion .flow-steps { display: block; min-height: 96px; position: relative; }
  .js-motion .flow-step { position: absolute; inset: 0 0 auto; opacity: 0; padding: 10px 12px; transform: translateY(8px); transition: opacity .45s var(--ease-out), transform .45s var(--ease-out); }
  .js-motion .flow-step.is-active { opacity: 1; transform: none; }
  .js-motion .flow-step.is-done { opacity: 0; }
  /* The illustrative-data label stays visible next to the mock numbers (COD-1626 M1). */
  .flow-note { margin-top: 8px; font-size: .62rem; }
  .flow-stage { height: min(440px, 54svh); }
  .mock-phone { width: min(200px, 50%); border-radius: 30px; padding: 7px; }
  .mock-phone-screen { border-radius: 24px; padding: 34px 9px 9px; font-size: 9px; gap: 7px; }
  .mock-phone-notch { top: 12px; width: 54px; height: 15px; }
  .mock-items li { grid-template-columns: 24px 1fr auto; padding: 4px; gap: 6px; }
  .mock-thumb { width: 24px; height: 24px; }
  .mock-add { width: 18px; height: 18px; font-size: 11px; }
  .mock-pay { height: 30px; }
  .mock-dash { width: 58%; padding: 12px; gap: 7px; font-size: .68rem; border-radius: 18px; }
  .mock-row { grid-template-columns: 40px 1fr auto; padding: 7px 8px; gap: 6px; }
  .mock-row-ghost .mock-bar { width: 100%; }
  .mock-revenue { padding: 10px; }
  .mock-revenue strong { font-size: 1.35rem; }
  .mock-revenue small { font-size: .56rem; line-height: 1.3; }
  .mock-chip { font-size: .62rem; padding: 6px 8px; }
  .mock-ticket { left: 10%; padding: 7px 10px; }
  .mock-ticket strong { font-size: .72rem; }
}
@media (max-width: 640px) {
  .cinema .announcement { font-size: .72rem; }
  .cine-hero .mono-eyebrow::before { display: none; }
  .scroll-cue { display: none; }
  .film-image { object-position: 78% center; }
  .mock-pill { white-space: nowrap; padding: 3px 7px; }
  .mock-dash-head strong { font-size: .76rem; }
  .cine-hero { min-height: calc(100svh - 92px); padding: 64px 0 104px; }
  .cine-title { font-size: clamp(2.9rem, 14vw, 4.2rem); margin-bottom: 22px; }
  .cine-lead { font-size: 1rem; margin-bottom: 28px; }
  .cinema .premium-actions .btn { width: 100%; }
  .cinema .nav-inner { height: 60px; }
  .film, .manifesto, .stats, .cinema .order-story, .bento, .cinema .how, .cinema .pricing, .cinema .founder, .cinema .faq, .cinema .demo-section { padding-block: 80px; }
  .film { padding-top: 16px; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stat, .stat + .stat { padding: 22px 12px 10px 0; }
  .stat:nth-child(even) { padding-left: 14px; }
  .stat-value { font-size: clamp(2.1rem, 11vw, 3rem); }
  .stat-label { font-size: .84rem; }
  .bento-grid { grid-template-columns: 1fr; }
  .bento-hero, .bento-wide { grid-column: auto; }
  .bento-tile { min-height: 0; padding: 22px; }
  .bento-tile .value-number { padding-bottom: 16px; }
  .final-cta { padding: 110px 0 120px; }
  .final-cta .btn { width: 100%; }
  .cinema .order-story-rail button strong { font-size: .64rem; }
}

/* Reduced motion: every animated surface shows its final state. */
@media (prefers-reduced-motion: reduce) {
  .grain, .scroll-cue i, .bento-tile::after, .plan-card-beam::after, .mock-ticket-dot, .mock-live i { animation: none !important; }
  .ember-field { display: none; }
  .film-image { transform: none; }
  .js-motion .manifesto-body .w { color: var(--text); }
}