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

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

:root {
  --bg:          #0a0a0a;
  --bg-raised:   #141414;
  --bg-raised-2: #1f1f1f;
  --bg-nav:      rgba(10, 10, 10, .9);
  --text:        #ffffff;
  --text-dim:    #cbcbcb;
  --muted:       #afafaf;
  --border:      #333333;
  --border-soft: #262626;

  --primary:      #06c167;
  --primary-hi:   #2fd37f;
  --primary-ink:  #000000;
  --reward:       #06c167;
  --reward-ink:   #000000;
  --danger:       hsl(2 80% 62%);
  --grid-base:    hsla(151, 40%, 60%, .1);
  --grid-glow:    hsla(151, 94%, 46%, .95);

  --radius-sm: .625rem;
  --radius:    1rem;
  --radius-lg: 1.5rem;
  --pill:      999px;

  --shadow-sm: 0 1px 3px rgba(0,0,0,.4);
  --shadow:    0 8px 30px rgba(0,0,0,.45);
  --shadow-lg: 0 24px 70px rgba(0,0,0,.55);
  --glow:      0 0 0 1px hsla(151,94%,39%,.35), 0 0 40px hsla(151,94%,39%,.28);

  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-fast: .18s;
  --dur: .5s;

  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg:          #ffffff;
  --bg-raised:   #f6f6f6;
  --bg-raised-2: #eeeeee;
  --bg-nav:      rgba(255, 255, 255, .9);
  --text:        #000000;
  --text-dim:    #333333;
  --muted:       #545454;
  --border:      #e2e2e2;
  --border-soft: #eeeeee;

  --primary-hi:  #048848;
  --reward:      #048848;
  --danger:      hsl(2 68% 42%);
  --grid-base:   hsla(151, 35%, 35%, .1);
  --grid-glow:   hsla(151, 94%, 34%, .72);

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .10);
  --shadow:    0 8px 30px rgba(0, 0, 0, .10);
  --shadow-lg: 0 24px 70px rgba(0, 0, 0, .14);
  --glow:      0 0 0 1px hsla(151,94%,32%,.24), 0 0 40px hsla(151,94%,39%,.16);

  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: 'DM Sans', 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: 'DM Sans', 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 hsla(151, 94%, 39%,.25);
}
.btn-primary:hover { background: var(--primary-hi); transform: translateY(-1px); box-shadow: 0 10px 28px hsla(151, 94%, 39%,.35); }

.btn-glow { animation: btn-pulse 2.6s ease-in-out infinite; }
@keyframes btn-pulse {
  0%, 100% { box-shadow: 0 6px 20px hsla(151, 94%, 39%,.25), 0 0 0 0 hsla(151, 94%, 39%,.4); }
  50% { box-shadow: 0 6px 24px hsla(151, 94%, 39%,.4), 0 0 0 10px hsla(151, 94%, 39%,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%, hsla(151, 94%, 39%, .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 hsla(151, 94%, 39%, .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: hsla(151, 94%, 39%, .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: hsla(151, 94%, 39%, .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: hsla(151, 94%, 39%, .32); background: hsla(151, 94%, 39%, .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 hsla(151, 94%, 39%, .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: hsla(151, 94%, 39%,.08); border: 1px solid hsla(151, 94%, 39%,.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 hsla(151, 94%, 39%,.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: hsla(151, 94%, 39%,.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: hsla(151, 94%, 58%,.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: hsla(151, 94%, 39%,.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.
   ==================================================================== */

:root {
  --bg: #f6f4ef;
  --bg-raised: #fffdf9;
  --bg-raised-2: #eeeae2;
  --bg-nav: rgba(246, 244, 239, .94);
  --text: #1e2925;
  --text-dim: #52605a;
  --muted: #718078;
  --border: #d9dcd5;
  --border-soft: #e6e7e1;
  --primary: #ee6b3a;
  --primary-hi: #d9532b;
  --primary-ink: #fffaf5;
  --reward: #2d6a59;
  --reward-ink: #f7fffb;
  --danger: #b94b45;
  --grid-base: transparent;
  --grid-glow: transparent;
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(30, 41, 37, .05);
  --shadow: 0 14px 35px rgba(30, 41, 37, .08);
  --shadow-lg: 0 24px 70px rgba(30, 41, 37, .12);
  --glow: none;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #202825;
  --bg-raised: #29332f;
  --bg-raised-2: #34403a;
  --bg-nav: rgba(32, 40, 37, .94);
  --text: #f7f7f1;
  --text-dim: #c6cec8;
  --muted: #9eaaa2;
  --border: #48544d;
  --border-soft: #39453f;
  --primary: #f07a45;
  --primary-hi: #ff9460;
  --primary-ink: #241a16;
  --reward: #86c6a5;
  --reward-ink: #17261e;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .18);
  --shadow: 0 14px 35px rgba(0, 0, 0, .2);
  --shadow-lg: 0 24px 70px rgba(0, 0, 0, .28);
  color-scheme: dark;
}

body {
  font-family: 'DM Sans', 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: #e9eee7; }
:root[data-theme="dark"] .order-story { background: #28332e; }
.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%; }
}

/* Homepage: the Cloaked reference's editorial grid, adapted to Sellhand. */
.premium-home {
  --primary: #06c167; --primary-hi: #048848; --primary-ink: #000;
  --radius-sm: 12px; --radius: 20px; --radius-lg: 32px;
  --shadow-sm: none; --shadow: none; --shadow-lg: none; --glow: none;
}
:root[data-theme="light"]:has(.premium-home) {
  --bg: #fff; --bg-raised: #f6f6f6; --bg-raised-2: #eeeeee; --bg-nav: #fff;
  --text: #000; --text-dim: #333; --muted: #545454;
  --accent-text: #048848;
  --border: #e2e2e2; --border-soft: #eeeeee;
}
:root[data-theme="dark"]:has(.premium-home) {
  --bg: #000; --bg-raised: #141414; --bg-raised-2: #1f1f1f; --bg-nav: #000;
  --text: #fff; --text-dim: #e2e2e2; --muted: #afafaf; --border: #333; --border-soft: #262626;
  --accent-text: #06c167;
}
:root[data-theme="dark"] .premium-home { --primary-hi: #2fd37f; }
.premium-home .container { max-width: 1120px; padding-inline: 48px; }
.premium-home main { max-width: 1120px; margin-inline: auto; border-inline: 1px solid var(--border-soft); }
.premium-home section { scroll-margin-top: 95px; }
.premium-home h1, .premium-home h2, .premium-home .values-grid h3 { font-family: 'DM Sans', system-ui, sans-serif; font-weight: 700; letter-spacing: -.045em; }
.premium-home h2 { font-size: clamp(32px, 3.6vw, 46px); line-height: 1.08; }
.premium-home .eyebrow { color: var(--muted); font-size: 12px; text-transform: none; letter-spacing: .02em; }
.premium-home .eyebrow::before { display: none; }
.premium-home .btn { border-radius: 999px; box-shadow: none; white-space: normal; text-align: center; min-height: 42px; padding: 11px 22px; }
.premium-home .btn:hover { box-shadow: none; transform: translateY(-1px); }
.premium-home .btn-primary:hover { color: #000; }
.premium-home :is(button, a, input, select, textarea):focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; }
.premium-home .announcement { max-width: 1120px; margin: auto; background: #000; color: #fff; text-align: center; padding: 10px 20px; font-size: 12px; font-weight: 500; }
.premium-home .announcement a { color: #06c167; margin-left: 5px; text-decoration: underline; text-underline-offset: 3px; }
.premium-home .announcement a:hover { text-decoration: underline; }
.premium-home > nav { position: sticky; top: 0; background: var(--bg); backdrop-filter: none; box-shadow: none; border-bottom: 1px solid var(--border-soft); }
.premium-home .nav-inner { height: 74px; padding-inline: 24px; border-inline: 1px solid var(--border-soft); gap: 18px; }
.premium-home .logo { gap: 5px; }
.premium-home .logo .name, .premium-home .foot-logo > span { font-family: 'DM Sans', system-ui, sans-serif; font-size: 26px; font-weight: 800; letter-spacing: -.05em; }
.premium-home .logo .name em, .premium-home .foot-logo em { color: inherit; font-style: normal; }
.premium-home .logo img { width: 28px; height: 28px; object-fit: contain; }
.premium-home .nav-links { gap: 18px; margin-right: auto; }
.premium-home .nav-links a { padding: 8px 0; color: var(--text); font-size: 13px; }
.premium-home .nav-actions { gap: 9px; }
.premium-home .nav-actions .btn { font-size: 13px; padding: 7px 16px; min-height: 36px; }
.premium-home .tenant-signin { border: 1px solid var(--text-dim); }
.premium-home .lang-switch { border: 0; background: none; padding: 0; }
.premium-home .lang-btn { padding: 5px; min-height: 32px; font-size: 10px; border-radius: 999px; }
.premium-home .lang-btn.active { background: var(--bg-raised-2); box-shadow: none; }
.premium-home .theme-toggle { width: 28px; min-width: 28px; height: 32px; border: 0; background: none; }
.premium-hero-inner { display: grid; grid-template-columns: 1fr 1fr; min-height: 535px; padding: 0 !important; }
.premium-hero-copy { padding: 30px 44px 48px 48px; align-self: start; }
.premium-kicker { font-size: 11px; font-weight: 500; margin-bottom: 18px; color: var(--muted); }
.premium-hero h1 { font-size: clamp(44px, 4.4vw, 56px); line-height: 1.08; margin-bottom: 28px; color: var(--text); text-wrap: balance; }
.premium-home .premium-hero h2 { font-family: 'DM Sans', sans-serif; font-size: 17px; line-height: 1.4; font-weight: 600; letter-spacing: -.02em; }
.premium-hero-description { font-size: 16px; line-height: 1.5; color: var(--muted); margin-top: 10px; max-width: 440px; }
.premium-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; margin-top: 26px; }
.premium-home .premium-actions .btn-lg { font-size: 14px; min-height: 48px; padding-inline: 24px; }
.premium-text-link { font-size: 13px; text-decoration: underline; text-underline-offset: 5px; }
.premium-hero-note { font-size: 11px; margin-top: 12px; color: var(--muted); }
.premium-hero-visual { position: relative; border-left: 1px solid var(--border-soft); padding: 10px 16px; min-height: 535px; }
.premium-hero-image { height: 100%; width: 100%; position: absolute; inset: 10px 16px; width: calc(100% - 32px); height: calc(100% - 20px); object-fit: cover; object-position: 87% center; border-radius: 32px; }
.hero-photo-note { position: absolute; left: 32px; bottom: 40px; max-width: 285px; border-radius: 22px; padding: 22px; color: #fff; background: #000000e6; backdrop-filter: blur(14px); border: 1px solid #ffffff24; }
.hero-photo-label { font-size: 10px; color: #cbcbcb; }
.hero-photo-note p { font: 700 22px/1.15 'DM Sans', system-ui, sans-serif; white-space: pre-line; letter-spacing: -.03em; margin: 10px 0 16px; }
.hero-photo-note a { display: block; border: 1px solid #ffffff40; border-radius: 999px; padding: 8px 14px; font-size: 11px; }
.hero-photo-note a:hover { background: #ffffff18; }
.independence { background: #000; color: #afafaf; padding: 76px 0 64px; }
.premium-home .independence { position: relative; left: 50%; width: 100vw; margin-left: -50vw; }
.premium-home .independence h2, .premium-home .independence h3 { color: #fff; }
.premium-home .independence .eyebrow { color: #06c167; }
.independence-heading { max-width: 740px; }
.independence-heading h2 { max-width: 630px; }
.independence-heading > p:last-child { margin-top: 22px; font-size: 15px; line-height: 1.7; max-width: 670px; }
.values-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 36px; }
.values-grid article { background: #141414; border: 1px solid #262626; border-radius: 24px; padding: 28px 24px; display: flex; flex-direction: column; align-items: start; }
.value-number { font-size: 12px; color: #06c167; margin-bottom: 32px; }
.premium-home .values-grid h3 { font-size: 28px; line-height: 1.08; }
.values-grid p { font-size: 13px; line-height: 1.65; margin: 16px 0 24px; }
.values-grid a { margin-top: auto; color: #fff; font-size: 12px; text-decoration: underline; text-underline-offset: 5px; }
.independence-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; margin-top: 68px; }
.premium-home .independence-bottom h2 { font-size: 34px; max-width: 400px; }
.independence-bottom p { font-size: 14px; margin-bottom: 24px; }
.premium-home .order-story { padding: 76px 0; background: var(--bg); border-bottom: 1px solid var(--border-soft); }
:root[data-theme="dark"] .premium-home .order-story { background: var(--bg); }
.premium-home .order-story-heading { text-align: left; max-width: none; margin: 0 0 32px; }
.premium-home .order-story-heading h2 { margin: 0; max-width: 750px; }
.premium-home .order-story-heading p { margin: 16px 0 0; max-width: 620px; font-size: 15px; }
.premium-home .order-story-layout { display: block; max-width: 960px; margin: 0 auto; }
.premium-home .order-story-browser { border-radius: 22px; box-shadow: none; border-color: var(--border); background: var(--bg-raised); }
.premium-home .order-story-browser-url { border: 0; border-radius: 999px; }
.premium-home .order-story-scenes { aspect-ratio: auto; }
.premium-home .order-story-scene { position: static; }
.premium-home .order-story-scene img { aspect-ratio: 16 / 9; object-fit: contain; background: #fff; height: auto; }
.premium-home .order-story-scene figcaption { position: static; background: var(--bg-raised); border: 0; border-top: 1px solid var(--border); border-radius: 0; box-shadow: none; backdrop-filter: none; padding: 16px 20px; flex-wrap: wrap; }
.premium-home .order-story-control, .premium-home .order-story-play { border-radius: 999px; background: var(--bg); }
.premium-home .order-story-rail { margin: 20px auto 0; max-width: 960px; gap: 8px; }
.premium-home .order-story-rail::before { display: none; }
.premium-home .order-story-rail button { border-radius: 16px; min-height: 68px; padding: 12px 8px; display: flex; justify-content: center; align-items: center; gap: 8px; }
.premium-home .order-story-rail button > span { border: 0; width: auto; height: auto; margin: 0; background: none; box-shadow: none; color: inherit; }
.premium-home .order-story-rail button small { display: none; }
.premium-home .order-story-rail button[aria-selected="true"] { border-color: var(--primary); color: var(--text); background: var(--bg-raised); transform: none; }
.premium-home .how { padding: 76px 0; }
.premium-home .how-top { text-align: left; margin: 0 0 40px; max-width: 720px; }
.premium-home .timeline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; max-width: none; }
.premium-home .timeline::before, .premium-home .tl-dot { display: none; }
.premium-home .tl-item { padding: 24px 0 0; margin: 0; border-top: 1px solid var(--border); }
.premium-home .tl-time { font-size: 14px; margin-bottom: 20px; color: var(--accent-text); }
.premium-home .how-cta-row { justify-content: start; margin-top: 28px; }
.premium-home .pricing { padding: 72px 0; background: var(--bg); border-block: 1px solid var(--border-soft); }
.premium-home .pricing-top { text-align: left; max-width: 720px; margin: 0 0 36px; }
.premium-home .plans-grid { max-width: none; gap: 16px; }
.premium-home .plan-card { border-radius: 24px; background: #06c167; border: 0; box-shadow: none; padding: 30px 26px; color: #000; }
.premium-home .plan-card:hover { transform: none; box-shadow: none; }
.premium-home .plan-price { font-size: clamp(42px, 4.5vw, 58px); color: #000; letter-spacing: -.06em; }
.premium-home .plan-per { font-size: 14px; letter-spacing: 0; color: #000; }
.premium-home .plan-desc { min-height: 65px; color: #0a2e1c; font-size: 14px; }
.premium-home .plan-fine { margin-top: 22px; color: #0a2e1c; font-size: 11px; }
.premium-home .plan-name { color: #000; font-size: 20px; }
.premium-home .pricing-cta-row { justify-content: start; }
.premium-home .plans-note { text-align: left; max-width: none; margin-top: 24px; }
.premium-home .founder { padding: 76px 0; border-bottom: 1px solid var(--border-soft); }
.premium-home .founder-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: stretch; max-width: none; text-align: left; }
.premium-home .founder-copy { padding: 30px; background: var(--bg-raised); border-radius: 24px; }
.premium-home .founder-copy h2 { font-size: 38px; }
.premium-home .founder-copy p { font-size: 14px; line-height: 1.65; }
.premium-home .founder-guarantee { border: 0; border-top: 1px solid var(--border); padding: 20px 0; border-radius: 0; background: none; }
.premium-home .founder-photo { position: relative; width: auto; height: auto; margin: 0; min-height: 500px; border: 0; border-radius: 24px; overflow: hidden; }
.founder-photo img { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: 85% center; }
.founder-photo figcaption { position: absolute; left: 24px; right: 24px; bottom: 24px; background: #000000e6; border-radius: 20px; padding: 24px; color: #fff; font: 700 26px/1.15 'DM Sans', system-ui, sans-serif; letter-spacing: -.03em; }
.premium-home .faq { padding: 72px 0; }
.premium-home .faq > .container { display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; }
.premium-home .faq-top { text-align: left; margin: 0; }
.premium-home .faq-list { width: 100%; max-width: none; gap: 0; }
.premium-home .faq-item { border: 0; border-top: 1px solid var(--border); border-radius: 0; background: none; padding-inline: 0; }
.premium-home .faq-item summary { font-size: 15px; }
.premium-home .demo-section { padding: 72px 0; background: var(--bg-raised); }
.premium-home .demo-section > .container { display: grid; grid-template-columns: .85fr 1.15fr; gap: 24px 54px; align-items: start; }
.premium-home .demo-top { grid-column: 1; grid-row: 1 / 4; text-align: left; margin: 0; }
.premium-home .demo-expectations { padding: 20px 0; margin-top: 20px; border: 0; background: none; border-radius: 0; }
.premium-home .demo-expectations p { padding-left: 0; }
.premium-home .demo-expectations p::before { display: none; }
.premium-home .demo-progress, .premium-home .demo-form, .premium-home .form-success { grid-column: 2; width: 100%; margin: 0; max-width: none; }
.premium-home .demo-progress { justify-content: start; }
.premium-home .demo-form { padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0; }
.premium-home .demo-progress .dp-dot { width: 28px; height: 28px; font-size: 12px; }
.premium-home .demo-progress .dp-step.active .dp-dot { color: #000; }
.premium-home .form-field input, .premium-home .form-field select, .premium-home .form-field textarea { background: var(--bg); border-radius: 12px; min-height: 48px; }
.premium-home .demo-privacy { text-align: left; margin-inline: 0; }
.premium-home .demo-privacy a { color: var(--accent-text); }
.premium-home footer { background: #000; color: #afafaf; border-radius: 28px 28px 0 0; padding-block: 64px; }
.premium-home .foot-inner { align-items: start; gap: 30px; }
.premium-home .foot-logo { gap: 12px; }
.premium-home .foot-logo > span { font-size: 36px; color: #fff; }
/* The footer is black in both themes, so the mark must stay white in both.
   Declared with the light-theme prefix too, so it outranks the global
   `:root[data-theme="light"] .foot-logo img { filter: invert(1) }` rule
   that used to turn the mark black-on-black. */
.premium-home .foot-logo img,
:root[data-theme="light"] .premium-home .foot-logo img { width: 36px; height: 36px; filter: brightness(0) invert(1); }
.premium-home .foot-links { gap: 14px 24px; }
.premium-home .foot-links a, .premium-home .foot-copy { color: #afafaf; }
.premium-home .foot-links a:hover { color: #fff; }
.premium-home footer .lang-btn { color: #afafaf; }
.premium-home footer .lang-btn.active { background: #fff; color: #000; }
.premium-home .reveal { opacity: 1; transform: none; }
@media (max-width: 1080px) {
  .premium-home .nav-links { gap: 12px; }
  .premium-home .nav-links a { font-size: 12px; }
  .premium-home .nav-links li:last-child { display: none; }
  .premium-home .nav-actions { gap: 4px; }
  .premium-home .container { padding-inline: 32px; }
  .premium-hero-copy { padding-inline: 32px; }
  .premium-hero h1 { font-size: 48px; }
}
@media (max-width: 767px) {
  .premium-home .container { padding-inline: 24px; }
  .premium-home .announcement { font-size: 10px; padding: 8px 20px; }
  .premium-home .announcement span, .premium-home .announcement a { display: block; }
  .premium-home .nav-inner { height: 68px; gap: 8px; }
  .premium-home .nav-links, .premium-home .nav-actions > .btn-primary, .premium-home .tenant-signin { display: none; }
  .premium-home .logo .name { font-size: 23px; }
  .premium-home .nav-burger { display: flex; }
  .premium-hero-inner { grid-template-columns: 1fr; }
  .premium-hero-copy { padding: 22px 24px 30px; }
  .premium-hero h1 { font-size: clamp(40px, 10.5vw, 58px); max-width: 480px; margin-bottom: 24px; }
  .premium-home .premium-hero h2 { font-size: 16px; }
  .premium-hero-description { font-size: 15px; }
  .premium-kicker { font-size: 10px; margin-bottom: 12px; }
  .premium-hero-visual { order: -1; min-height: 250px; border-left: 0; }
  .premium-hero-image { border-radius: 24px; object-position: 85% center; }
  .hero-photo-note { left: 40px; bottom: 26px; padding: 12px; border-radius: 14px; max-width: 210px; }
  .hero-photo-label { font-size: 8px; }
  .hero-photo-note p { font-size: 16px; margin: 6px 0 10px; }
  .hero-photo-note a { font-size: 10px; padding: 5px 10px; }
  .premium-home h2 { font-size: 34px; }
  .premium-home .independence, .premium-home .order-story, .premium-home .how, .premium-home .pricing, .premium-home .founder, .premium-home .faq, .premium-home .demo-section { padding-block: 48px; }
  .values-grid, .independence-bottom { grid-template-columns: 1fr; gap: 16px; }
  .values-grid article { padding: 26px; }
  .value-number { margin-bottom: 20px; }
  .independence-bottom { margin-top: 44px; gap: 22px; }
  .premium-home .order-story-scene figcaption { padding: 12px; gap: 4px; }
  .premium-home .order-story-scene figcaption strong { white-space: normal; }
  .premium-home .order-story-rail { gap: 3px; }
  .premium-home .order-story-rail button { flex-direction: column; gap: 6px; padding-inline: 2px; }
  .premium-home .order-story-rail button strong { font-size: 10px; }
  .premium-home .timeline, .premium-home .plans-grid, .premium-home .founder-inner { grid-template-columns: 1fr; gap: 20px; }
  .premium-home .plan-desc { min-height: 0; }
  .premium-home .plan-price { font-size: 56px; }
  .premium-home .founder-copy { padding: 24px; }
  .premium-home .founder-photo { min-height: 420px; }
  .premium-home .faq > .container, .premium-home .demo-section > .container { display: flex; flex-direction: column; gap: 28px; }
  .premium-home .faq-top, .premium-home .demo-top { width: 100%; }
}