/* DrinkLync marketing site — black + #1DB954, ticket/ops vernacular */

/* Metric-matched fallbacks (2026-10-08). The web fonts arrive after first
   paint on a phone; without these, the swap from the system font re-flowed
   every hero and Lighthouse measured ~0.3 layout shift on most pages. Each
   fallback is a local system font scaled to the web font's width and line
   metrics (measured in Chromium against the woff2 files), so the swap no
   longer moves anything. Arial covers iOS, macOS and Windows; Roboto covers
   Android, where Arial is absent and the first face simply fails to match. */
@font-face { font-family: "DL Body Fallback"; src: local("Arial"), local("ArialMT"); size-adjust: 100.8%; ascent-override: 96.2%; descent-override: 24.8%; line-gap-override: 0%; }
@font-face { font-family: "DL Body Fallback R"; src: local("Roboto"), local("Roboto-Regular"); size-adjust: 101.8%; ascent-override: 95.3%; descent-override: 24.6%; line-gap-override: 0%; }
@font-face { font-family: "DL Display Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 100 900; size-adjust: 92.5%; ascent-override: 100.6%; descent-override: 29.2%; line-gap-override: 0%; }
@font-face { font-family: "DL Display Fallback R"; src: local("Roboto Bold"), local("Roboto-Bold"); font-weight: 100 900; size-adjust: 98.2%; ascent-override: 94.7%; descent-override: 27.5%; line-gap-override: 0%; }
@font-face { font-family: "DL Mono Fallback"; src: local("Courier New"), local("CourierNewPSMT"); size-adjust: 100%; ascent-override: 102%; descent-override: 30%; line-gap-override: 0%; }

:root {
  --bg: #060807;
  --bg-raise: #0c110e;
  --surface: #101612;
  --line: rgba(233, 242, 235, 0.09);
  --line-strong: rgba(233, 242, 235, 0.16);
  --ink: #e9f2eb;
  --muted: #94a39a;
  --dim: #7f8d84; /* 2026-10-08: was #5f6d64 (3.5:1 on the page ground); now above the 4.5:1 WCAG AA minimum */
  --green: #1db954;
  --green-bright: #2ee06b;
  --green-deep: #0b3d20;
  --green-glow: rgba(29, 185, 84, 0.32);
  --font-display: "Bricolage Grotesque", "DL Display Fallback", "DL Display Fallback R", "Instrument Sans", sans-serif;
  --font-body: "Instrument Sans", "DL Body Fallback", "DL Body Fallback R", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "DL Mono Fallback", ui-monospace, monospace;
  --radius: 18px;
  --nav-h: 72px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--green); color: #04140a; }

.wrap { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 1000;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--green);
  color: #04140a;
  font-weight: 700;
  transform: translateY(calc(-100% - 20px));
  transition: transform 0.15s ease;
}
.skip-link:focus { transform: translateY(0); }
#main-content { scroll-margin-top: var(--nav-h); }
/* The nav is position:fixed, so any in-page anchor target needs to clear it
   or the heading lands underneath the header. */
[id]:target { scroll-margin-top: calc(var(--nav-h) + 16px); }
#intake, #pilot-form { scroll-margin-top: calc(var(--nav-h) + 16px); }

/* ---------- type ---------- */
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.04; text-wrap: balance; }
.display-xl { font-size: clamp(38px, 4.5vw, 65px); font-weight: 800; }
.display-lg { font-size: clamp(34px, 4.4vw, 60px); font-weight: 800; }
.display-md { font-size: clamp(26px, 3vw, 40px); }
.lede { font-size: clamp(17px, 1.5vw, 21px); color: var(--muted); line-height: 1.65; max-width: 56ch; }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--green);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--green); }
.accent { color: var(--green); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-weight: 600; font-size: 16px;
  padding: 15px 28px; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
  white-space: nowrap;
}
.btn-primary { background: var(--green); color: #04140a; }
.btn-primary:hover { background: var(--green-bright); transform: translateY(-2px); box-shadow: 0 12px 34px -10px var(--green-glow); }
.btn-ghost { border-color: var(--line-strong); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--green); color: var(--green); transform: translateY(-2px); }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn:focus-visible, a:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 6px; }

/* ---------- nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center;
  border-bottom: 1px solid transparent;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.nav.scrolled { background: rgba(6, 8, 7, 0.82); backdrop-filter: blur(14px); border-color: var(--line); }
.nav .wrap { display: flex; align-items: center; gap: 24px; }
.nav-logo { display: flex; align-items: center; gap: 10px; margin-right: auto; min-height: 44px; }
.nav-logo img { height: 26px; width: auto; }
.nav-links { display: flex; gap: 22px; align-items: center; }
.nav-links a { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; font-size: 14.5px; font-weight: 500; color: var(--muted); transition: color 0.15s ease; }
.nav-links a:hover { color: var(--ink); }
.nav .btn { padding: 11px 22px; font-size: 15px; }
.nav-burger { display: none; background: none; border: 0; cursor: pointer; padding: 8px; min-width: 44px; min-height: 44px; }
.nav-burger:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 6px; }
.nav-burger span { display: block; width: 22px; height: 2px; background: var(--ink); margin: 5px 0; transition: 0.2s; }

/* ---------- hero ---------- */
.hero {
  position: relative; min-height: 100svh;
  display: flex; align-items: center;
  padding: calc(var(--nav-h) + 48px) 0 64px;
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(100deg, rgba(6, 8, 7, 0.88) 0%, rgba(6, 8, 7, 0.55) 45%, rgba(6, 8, 7, 0.25) 100%),
    radial-gradient(900px 520px at 78% 30%, rgba(29, 185, 84, 0.14), transparent 65%),
    radial-gradient(700px 700px at 10% 85%, rgba(29, 185, 84, 0.07), transparent 60%);
}
.hero-bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.28; z-index: -1;
  mask-image: linear-gradient(to bottom, black 40%, transparent 96%); -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 96%); }
.hero .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: 1.12fr 0.88fr; gap: 48px; align-items: center; }
.hero-copy .display-xl { margin-bottom: 26px; }
.hero-copy .lede { margin-bottom: 38px; }
.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
/* 2026-10-21: the hero carries one primary per audience. The guest button is
   the same weight as the bar's, in ink so the two paths read as two paths. */
.btn.btn-guest { background: var(--ink); color: #04140a; border-color: var(--ink); }
.btn.btn-guest:hover { background: #fff; }
.hero-note { margin-top: 16px; max-width: 58ch; font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.hero-note strong { color: var(--ink); font-weight: 600; }
.hero-note a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
/* The short FAQ that sits beside a form or a price: same facts as /faq. */
.faq-mini { margin-top: 34px; border-top: 1px solid var(--line); }
.faq-mini .eyebrow { margin: 22px 0 6px; }
.faq-mini details { border-bottom: 1px solid var(--line); }
.faq-mini summary { cursor: pointer; list-style: none; padding: 14px 34px 14px 0; min-height: 48px; display: flex; align-items: center; font-family: var(--font-display); font-weight: 600; font-size: 16px; position: relative; }
.faq-mini summary::-webkit-details-marker { display: none; }
.faq-mini summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); color: var(--green); font-size: 22px; line-height: 1; transition: transform 0.2s ease; }
.faq-mini details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-mini p { color: var(--muted); font-size: 14.5px; line-height: 1.6; padding: 0 0 16px; margin: 0; }
.faq-mini p a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.hero-meta { margin-top: 44px; display: flex; gap: 28px; flex-wrap: wrap; }
.hero-meta div { font-family: var(--font-mono); font-size: 12.5px; color: var(--dim); letter-spacing: 0.06em; }
.hero-meta strong { display: block; color: var(--ink); font-size: 21px; font-family: var(--font-display); letter-spacing: 0; margin-bottom: 2px; }

/* phone */
.phone {
  position: relative;
  width: 100%; max-width: 320px;
  aspect-ratio: 440 / 932;
  border-radius: 44px;
  border: 1px solid var(--line-strong);
  background: #000;
  padding: 10px;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.85), 0 0 0 6px rgba(233, 242, 235, 0.03), 0 0 120px -40px var(--green-glow);
}
/* 2026-11-12: the screens are 130-380 kB SVGs. Until one decoded, the phone was
   a solid black slab. The poster is the app's own splash: the brand mark on
   the app's dark ground, painted by CSS from an image the header already
   loaded, so it costs no request and the screen simply covers it. */
.phone-screen { width: 100%; height: 100%; border-radius: 34px; overflow: hidden; position: relative; background: #07130b url("/assets/brand/drinklync-mark-still.webp") center 42% / 34% auto no-repeat; }
.phone-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.hero-phone-wrap { position: relative; display: flex; justify-content: center; }
.hero-phone-wrap .phone { transform: rotate(3deg); }

/* floating ticket chips */
.ticket-chip {
  position: absolute;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em;
  background: rgba(12, 17, 14, 0.92); border: 1px solid var(--line-strong);
  border-radius: 12px; padding: 12px 16px;
  backdrop-filter: blur(8px);
  box-shadow: 0 18px 44px -18px rgba(0, 0, 0, 0.8);
  display: flex; flex-direction: column; gap: 4px;
  z-index: 3;
}
.ticket-chip .t-status { display: flex; align-items: center; gap: 8px; color: var(--green); font-weight: 700; }
.ticket-chip .t-line { color: var(--muted); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.35; } }
.chip-1 { top: 25%; left: -12%; }
.chip-2 { bottom: 22%; right: -16%; }
.chip-3 { bottom: 4%; left: -8%; }

/* ---------- marquee ---------- */
.marquee { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 20px 0; overflow: hidden; background: var(--bg-raise); }
.marquee-track { display: flex; gap: 64px; width: max-content; animation: marquee 34s linear infinite; }
.marquee-track span { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--dim); display: flex; align-items: center; gap: 64px; white-space: nowrap; }
.marquee-track span::after { content: "/"; color: var(--green); }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .dot { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------- sections ---------- */
.section { padding: clamp(56px, 7vw, 104px) 0; position: relative; }

/* ---------- contour topography (brand texture) ----------
   Founder 2026-08-27: the long bare-black scroll stretches get the survey-map
   contour texture (same tile the approved emails use) so the page flows.
   NEVER on sections with background imagery (hero, gallery, journey bands) —
   only where the ground was literally empty black. ::after (not ::before)
   because .wash and .cta-band already own ::before on the same element.
   Tile is 600px; drawn at 560px so contours read slightly denser. Ground of
   the tile is near-identical to --bg, so at 0.55 the seams disappear and the
   green stays a hint. Text sits on a near-black ground either way, so body
   contrast (WCAG AA) is unaffected. */
.topo-section::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("/email/topo-tile-v3.png") repeat;
  background-size: 560px 560px;
  opacity: 0.55;
  mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
}
.topo-section { position: relative; }
/* Founder 2026-09-24: the contour ground is on every screen, so the pinned
   story sections carry it too; their pin wrappers are lifted above ::after. */
.topo-section > .wrap, .topo-section > .journey-pin, .topo-section > .opflow-pin, .topo-section > .gallery-pin, .topo-section > .duo-pin { position: relative; z-index: 1; }
.section-head { max-width: 720px; margin-bottom: clamp(32px, 4vw, 54px); }
.section-head .lede { margin-top: 20px; }

/* problem cards */
.problem-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.connected-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.connected-grid .problem-card { display: flex; flex-direction: column; min-width: 0; }
.connected-grid .problem-card p { flex: 1; margin-bottom: 20px; }
.connected-grid .btn { white-space: normal; text-align: center; }
.problem-card { background: var(--bg); padding: 36px 30px 42px; position: relative; transition: background 0.25s ease; }
.problem-card:hover { background: var(--bg-raise); }
.problem-card .p-metric { font-family: var(--font-mono); font-size: 12px; color: var(--dim); letter-spacing: 0.14em; text-transform: uppercase; display: block; margin-bottom: 26px; }
.problem-card h3 { font-size: 21px; margin-bottom: 12px; }
.problem-card p { font-size: 15.5px; color: var(--muted); }
.problem-card::after { content: ""; position: absolute; left: 30px; right: 30px; bottom: 0; height: 2px; background: var(--green); transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; }
.problem-card:hover::after { transform: scaleX(1); }

/* ---------- journey (pinned scrollytelling) ---------- */
.journey { background: var(--bg-raise); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.journey-pin { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--nav-h) + 20px) 0 40px; }
.journey-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(40px, 6vw, 100px); align-items: center; }
.journey-phone { display: flex; justify-content: center; position: relative; }
.journey-phone .phone { max-width: 258px; }
.journey-screens { position: absolute; inset: 0; }
.journey-screens img { position: absolute; inset: 0; opacity: 0; }
.journey-screens img.active { opacity: 1; }

/* ticket rail */
.ticket-rail { display: flex; gap: 8px; margin-bottom: clamp(30px, 4vw, 54px); flex-wrap: wrap; }
.rail-step {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.12em;
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line);
  color: var(--dim); display: flex; align-items: center; gap: 8px;
  transition: all 0.3s ease;
}
.rail-step .dot { display: none; width: 6px; height: 6px; }
.rail-step.active { border-color: var(--green); color: var(--green); background: rgba(29, 185, 84, 0.08); }
.rail-step.active .dot { display: inline-block; }
.rail-step.done { color: var(--muted); border-color: var(--line-strong); }

.journey-steps { position: relative; }
.journey-step { position: absolute; inset: 0; opacity: 0; pointer-events: none; display: flex; flex-direction: column; justify-content: center; }
.journey-step.active { pointer-events: auto; }
.journey-step .j-num { font-family: var(--font-mono); color: var(--green); font-size: 13px; letter-spacing: 0.2em; margin-bottom: 18px; }
.journey-step h3 { font-size: clamp(26px, 2.6vw, 38px); margin-bottom: 16px; }
.journey-step p { color: var(--muted); max-width: 46ch; font-size: 16.5px; }

/* ---------- operator ---------- */
.operator-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 10px; }
.op-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform 0.25s ease, border-color 0.25s ease; }
.op-card:hover { transform: translateY(-6px); border-color: rgba(29, 185, 84, 0.4); }
.op-card img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; object-position: top; border-bottom: 1px solid var(--line); }
.op-card .op-label { padding: 18px 20px; }
.op-card .op-label span { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--green); display: block; margin-bottom: 6px; }
.op-card .op-label p { font-size: 14.5px; color: var(--muted); }

/* ---------- system grid ---------- */
.system-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.solution-three-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.system-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 38px 34px; position: relative; overflow: hidden; transition: border-color 0.25s ease; }
.system-card:hover { border-color: rgba(29, 185, 84, 0.45); }
.system-card .s-icon { width: 44px; height: 44px; border-radius: 12px; background: rgba(29, 185, 84, 0.1); border: 1px solid rgba(29, 185, 84, 0.3); display: flex; align-items: center; justify-content: center; margin-bottom: 24px; }
.system-card .s-icon svg { width: 20px; height: 20px; stroke: var(--green); }
.system-card h3 { font-size: 23px; margin-bottom: 12px; }
.system-card p { color: var(--muted); font-size: 15.5px; max-width: 52ch; }
.system-card .s-tag { position: absolute; top: 30px; right: 30px; font-family: var(--font-mono); font-size: 12px; color: var(--dim); letter-spacing: 0.14em; }

/* ---------- roi band ---------- */
.roi { background: var(--green); color: #04140a; }
.roi .eyebrow { color: #04140a; }
.roi .eyebrow::before { background: #04140a; }
.roi .display-lg { color: #032410; }
.roi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; margin-top: 64px; }
.roi-stat { border-top: 2px solid rgba(3, 36, 16, 0.35); padding-top: 22px; }
.roi-stat strong { font-family: var(--font-display); font-size: clamp(34px, 3.4vw, 52px); font-weight: 800; display: block; letter-spacing: -0.02em; line-height: 1; margin-bottom: 10px; }
.roi-stat span { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(4, 20, 10, 0.75); }
.roi-note { margin-top: 40px; font-size: 14px; color: rgba(4, 20, 10, 0.7); max-width: 70ch; }

/* ---------- pricing ---------- */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.price-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 40px 34px; display: flex; flex-direction: column; position: relative; }
.price-card.featured { border-color: var(--green); box-shadow: 0 0 80px -30px var(--green-glow); }
.price-card .pc-name { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--green); margin-bottom: 20px; }
.price-card .pc-price { font-family: var(--font-display); font-size: 46px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
.price-card .pc-price small { font-size: 16px; font-weight: 500; color: var(--muted); font-family: var(--font-body); letter-spacing: 0; }
.price-card .pc-sub { color: var(--muted); font-size: 14.5px; margin: 12px 0 28px; }
.price-card ul { list-style: none; display: flex; flex-direction: column; gap: 13px; margin-bottom: 34px; }
.price-card li { font-size: 15px; color: var(--muted); padding-left: 26px; position: relative; }
.price-card li::before { content: ""; position: absolute; left: 0; top: 7px; width: 14px; height: 8px; border-left: 2px solid var(--green); border-bottom: 2px solid var(--green); transform: rotate(-45deg); }
.price-card li strong { color: var(--ink); font-weight: 600; }
.price-card .btn { margin-top: auto; justify-content: center; }
.featured-tag { position: absolute; top: -13px; left: 34px; background: var(--green); color: #04140a; font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; padding: 5px 14px; border-radius: 999px; }
.addon-row { margin-top: 22px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.addon { border: 1px dashed var(--line-strong); border-radius: var(--radius); padding: 26px 28px; }
.addon .pc-name { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--green); display: block; margin-bottom: 10px; }
.addon > strong { font-family: var(--font-display); font-size: 26px; }
.addon p { color: var(--muted); font-size: 14px; margin-top: 8px; }

/* ---------- cta band ---------- */
.cta-band { text-align: center; position: relative; overflow: hidden; }
.cta-band .display-lg { margin-bottom: 22px; }
.cta-band .lede { margin: 0 auto 40px; }
.cta-band::before { content: ""; position: absolute; left: 50%; bottom: -320px; transform: translateX(-50%); width: 820px; height: 520px; background: radial-gradient(closest-side, var(--green-glow), transparent); pointer-events: none; }

/* ---------- footer ---------- */
footer { border-top: 1px solid var(--line); padding: 72px 0 44px; background: var(--bg-raise); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 38px; margin-bottom: 56px; }
.footer-brand img { height: 30px; margin-bottom: 18px; }
.footer-brand p { color: var(--dim); font-size: 14px; max-width: 34ch; }
.footer-col h2, .footer-col h4 { line-height: 1.4; text-wrap: wrap; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim); margin-bottom: 18px; font-weight: 500; }
.footer-col a { display: flex; align-items: center; min-height: 44px; color: var(--muted); font-size: 15px; margin-bottom: 0; transition: color 0.15s; } /* 44px rows: the footer links measured 152x24 on a phone (2026-09-29) */
.footer-col a:hover { color: var(--green); }
.footer-base { border-top: 1px solid var(--line); padding-top: 28px; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 12px; color: var(--dim); letter-spacing: 0.06em; }

/* ---------- forms (venues) ---------- */
.intake { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 90px); align-items: start; }
.intake-form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 40px 36px; }
.field { margin-bottom: 22px; }
.field label { display: block; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 9px; }
.field input, .field select, .field textarea {
  width: 100%; background: var(--bg); border: 1px solid var(--line-strong); border-radius: 10px;
  color: var(--ink); font-family: var(--font-body); font-size: 16px; padding: 14px 16px;
  transition: border-color 0.15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--green); }
.field textarea { resize: vertical; min-height: 110px; }
.intake-form .btn { width: 100%; justify-content: center; margin-top: 6px; }
.form-note { font-size: 13px; color: var(--dim); margin-top: 16px; text-align: center; }
/* Paired fields (city + state, bars + stations). Collapses on phones so no
   input ever drops under the 44px touch target or clips its label. */
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.field-pair.narrow-right { grid-template-columns: 1.6fr 1fr; }
.field-hint { font-size: 12.5px; line-height: 1.5; color: var(--dim); margin: -14px 0 22px; }
/* Multi-select answers (busiest nights, goals) as tappable chips. Real
   checkboxes underneath, so keyboard and screen readers get the native
   control and the form posts without JS. */
.field-group { border: 0; padding: 0; margin: 0 0 22px; }
.field-group legend { display: block; padding: 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.choice-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; width: 100%; height: 100%; left: 0; top: 0; margin: 0; cursor: pointer; }
.choice span {
  display: block; background: var(--bg); border: 1px solid var(--line-strong); border-radius: 999px;
  color: var(--ink); font-size: 14.5px; padding: 11px 17px; min-height: 44px; line-height: 22px;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.choice input:checked + span { background: rgba(29, 185, 84, 0.14); border-color: var(--green); color: var(--green); }
.choice input:focus-visible + span { outline: 2px solid var(--green); outline-offset: 2px; }
@media (max-width: 640px) {
  .field-pair, .field-pair.narrow-right { grid-template-columns: 1fr; }
  .intake-form { padding: 28px 20px; }
}
.intake-points { display: flex; flex-direction: column; gap: 26px; margin-top: 34px; }
.intake-point { display: flex; gap: 18px; }
.intake-point .ip-num { font-family: var(--font-mono); color: var(--green); font-size: 13px; padding-top: 3px; }
.intake-point h3 { font-size: 19px; margin-bottom: 6px; }
.intake-point p { color: var(--muted); font-size: 15px; }

/* page hero (subpages) */
.page-hero { padding: calc(var(--nav-h) + clamp(70px, 9vw, 120px)) 0 clamp(50px, 6vw, 80px); }
/* 2026-10-21 pass 2: on a phone the header is two rows (118px) and the hero
   added another 70-120px on top, so every inner page opened on ~200px of
   nothing before its eyebrow. Phones get 28px. */
@media (max-width: 640px) { .page-hero, .faq-page-hero { padding-top: calc(var(--nav-h) + 28px); } }

/* Pass 2: photoreal art on the heroes that had none (pricing, insights,
   start, staff, faq, press, support, contact). Stacked under the copy on a
   phone; a portrait panel on the right from 1100px, with the copy capped so
   the two never meet. Existing photoreal assets only. */
.hero-art { margin: 28px 0 0; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--bg-raise); border: 1px solid var(--line); }
.hero-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Mobile: shorten the hero photo so the actionable content below rises into view sooner (P2-W2). */
@media (max-width: 640px) { .hero-art { aspect-ratio: 16 / 9; max-height: 180px; margin-top: 18px; } }
@media (min-width: 1100px) {
  .page-hero.has-art .wrap, .faq-page-hero.has-art .wrap { position: relative; min-height: 520px; }
  .page-hero.has-art .wrap > :not(.hero-art), .faq-page-hero.has-art .wrap > :not(.hero-art) { max-width: calc(100% - 440px); }
  .page-hero.has-art .hero-art, .faq-page-hero.has-art .hero-art { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 380px; margin: 0; aspect-ratio: 3 / 4; }
}

/* Pass 2: inline text links keep their size but gain a 44px hit area, so the
   "ROI calculator", "full pricing", legal and e-mail links in running copy
   clear the tap floor without turning into buttons. */
.lede a, .hero-note a, .pg-note a, .form-note a, .field-hint a, .faq-a a, .faq-compact a, .faq-mini a, main p > a:not(.btn), main li > a:not(.btn), main dd > a:not(.btn), main td > a:not(.btn) { position: relative; }
.lede a::after, .hero-note a::after, .pg-note a::after, .form-note a::after, .field-hint a::after, .faq-a a::after, .faq-compact a::after, .faq-mini a::after, main p > a:not(.btn)::after, main li > a:not(.btn)::after, main dd > a:not(.btn)::after, main td > a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }

/* reveal helper */
.reveal { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 64px; }
  .hero { min-height: 0; }
  .hero-phone-wrap { order: 2; }
  .chip-1 { left: 0; } .chip-2 { right: 0; } .chip-3 { left: 4%; }
  .problem-grid { grid-template-columns: 1fr 1fr; }
  .journey-grid { grid-template-columns: 1fr; gap: 18px; }
  .journey-phone { order: 2; }
  /* Phone sized from the REAL space left after the copy — as big as the
     viewport allows instead of a fixed tiny width. 0.472 = 440/932 aspect. */
  .journey-phone .phone { max-width: min(74vw, calc((100svh - 330px) * 0.472)); }
  .journey-steps { order: 1; min-height: 160px; }
  .journey-step h3 { font-size: 21px; margin-bottom: 8px; }
  .journey-step p { font-size: 13.5px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .journey-pin { padding-top: calc(var(--nav-h) + 8px); }
  .ticket-rail { margin-bottom: 14px; }
  .operator-grid { grid-template-columns: 1fr; }
  .op-card img { aspect-ratio: 16 / 10; }
  .system-grid, .price-grid, .addon-row { grid-template-columns: 1fr; }
  .roi-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .intake { grid-template-columns: 1fr; }
}
@media (max-width: 1200px) {
  .nav:not(.navigation-ready) { position: relative; height: auto; padding: 14px 0; }
  .nav:not(.navigation-ready) .wrap { flex-wrap: wrap; }
  .nav-links { flex-wrap: wrap; width: 100%; gap: 8px 18px; }
  .nav-links a { display: inline-flex; align-items: center; min-height: 44px; }
  .nav.navigation-ready .nav-links { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; flex-wrap: nowrap; background: rgba(6, 8, 7, 0.97); backdrop-filter: blur(16px); padding: 12px 24px 20px; gap: 4px; border-bottom: 1px solid var(--line); display: none; max-height: calc(100dvh - var(--nav-h)); overflow-y: auto; overscroll-behavior: contain; }
  .nav.navigation-ready .nav-links.open { display: flex; }
  .nav.navigation-ready .nav-burger { display: block; }
  /* 2026-10-08: scripts are on (html.js-nav, set by one inline line in each
     page's <head>) but site.js, which loads after the animation library at
     the end of the page, has not wired the menu yet. Lay the bar out exactly
     as the wired menu will, so wiring it moves nothing: the static fallback
     pushed every phone page down and back up, about 0.28 layout shift. If
     site.js has still not wired the menu when the page finishes loading, the
     head script drops js-nav and the static fallback above returns. */
  html.js-nav .nav:not(.navigation-ready) { position: fixed; height: var(--nav-h); padding: 0; }
  html.js-nav .nav:not(.navigation-ready) .wrap { flex-wrap: nowrap; }
  html.js-nav .nav:not(.navigation-ready) .nav-links { display: none; }
  html.js-nav .nav:not(.navigation-ready) .nav-burger { display: block; }
  /* Tighter header at tablet widths so both CTAs stay fully visible. */
  .nav .wrap { gap: 14px; }
  .nav .btn { padding: 10px 16px; font-size: 14px; }
}
/* Phone widths: a true two-column CTA row avoids flex-basis wrapping into
   two stacked rows at 375px. Destinations remain unchanged. */
@media (max-width: 640px) {
  :root { --nav-h: 118px; }
  .nav { height: auto; min-height: var(--nav-h); padding: 10px 0; }
  .nav .wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
  .nav-logo { grid-column: 1 / -1; grid-row: 1; justify-self: start; }
  .nav-burger { grid-column: 2; grid-row: 1; justify-self: end; }
  .nav-links { grid-column: 1 / -1; grid-row: 3; }
  .nav .btn { grid-row: 2; min-width: 0; min-height: 44px; justify-content: center; padding: 10px 8px; font-size: 13.5px; line-height: 1.3; white-space: normal; text-align: center; }
  /* The mark's -12px left bleed is a desktop optical correction. Inside the
     24px phone gutter it pushed the 58px spin mark under the viewport edge,
     so the logo read as clipped. Keep the optical nudge off phones. */
  .logo-spin { margin-left: 0; }
  html.js-nav .nav:not(.navigation-ready) { height: auto; padding: 10px 0; }
}
@media (max-width: 560px) {
  .problem-grid { grid-template-columns: 1fr; }
  .roi-grid { grid-template-columns: 1fr; }
  .hero-meta { gap: 20px; }
  .ticket-chip { display: none; }
}

/* ================= deep expansion ================= */

/* real brand logo */
.logo-spin { width: 58px; height: 58px; margin: -11px -8px -11px -12px; border-radius: 50%; flex: none; }
/* 2026-10-24: `.nav-logo img { height: 26px; width: auto }` out-ranked the
   58px mark and the <picture> wrapper shrank as a flex item, so the mark
   rendered 0-6px wide on every page: the logo was cropped to a sliver.
   The wrapper never shrinks and the mark keeps its full box. */
.nav-logo picture { display: flex; flex: none; }
.nav-logo img.logo-spin { width: 58px; height: 58px; max-width: none; }
.wordmark { font-family: "Sofia Sans", var(--font-display); font-weight: 800; font-size: 24px; letter-spacing: -0.015em; }
.t-avatar {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, var(--green), var(--green-deep));
  color: #04140a; font-family: var(--font-body); font-weight: 700; font-size: 12.5px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(233, 242, 235, 0.18);
}
.ticket-chip { flex-direction: row; align-items: center; gap: 11px; }
.ticket-chip .t-col { display: flex; flex-direction: column; gap: 4px; }

/* spinning logo mark */
.logo-mark { position: relative; width: 34px; height: 34px; flex: none; }
.logo-mark img { width: 26px; height: 26px; position: absolute; inset: 4px; border-radius: 7px; }
.logo-mark::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 70%, var(--green) 86%, transparent 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
  animation: markspin 5s linear infinite;
}
@keyframes markspin { to { transform: rotate(360deg); } }

/* persona tabs */
.persona-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 44px; }
.persona-tabs:not([data-tabs-ready="true"]), .setup-tabs:not([data-tabs-ready="true"]) { display: none; }
.persona-tab {
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 12px 22px; border-radius: 999px; border: 1px solid var(--line-strong);
  background: transparent; color: var(--muted); cursor: pointer; transition: all 0.2s ease;
  /* 44px is the phone tap-target floor; 12px of padding on a 12.5px
     line left these one pixel short of it. */
  min-height: 44px;
}
.persona-tab:hover { color: var(--ink); border-color: var(--ink); }
.persona-tab.active { background: var(--green); border-color: var(--green); color: #04140a; font-weight: 700; }
.persona-tab:focus-visible, .setup-tab:focus-visible, .reel-play:focus-visible, .reel-frame video:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.persona-panel { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(36px, 5vw, 80px); align-items: center; }
.persona-panel[hidden] { display: none; }
.persona-shot { position: relative; display: flex; justify-content: center; gap: 18px; }
.persona-shot img { border-radius: 16px; border: 1px solid var(--line-strong); box-shadow: 0 30px 70px -28px rgba(0,0,0,0.85); }
.persona-shot .shot-main { width: min(100%, 340px); }
.persona-copy h3 { font-size: clamp(24px, 2.4vw, 34px); margin-bottom: 10px; }
.persona-copy .persona-role { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--green); display: block; margin-bottom: 16px; }
.persona-benefits { list-style: none; display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
.persona-benefits li { display: flex; gap: 14px; font-size: 15.5px; color: var(--muted); }
.persona-benefits li strong { color: var(--ink); display: block; font-size: 16px; margin-bottom: 2px; }
.persona-benefits .b-icon { flex: none; width: 34px; height: 34px; border-radius: 10px; background: rgba(29,185,84,0.1); border: 1px solid rgba(29,185,84,0.3); display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.persona-benefits .b-icon svg { width: 15px; height: 15px; stroke: var(--green); }

/* guest feature grid */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.feature-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: transform 0.25s ease, border-color 0.25s ease; }
.feature-card:hover { transform: translateY(-6px); border-color: rgba(29,185,84,0.4); }
.feature-card .fc-shot { background: #000; border-bottom: 1px solid var(--line); height: 300px; overflow: hidden; position: relative; }
.feature-card .fc-shot img { width: 72%; margin: 26px auto 0; border-radius: 18px 18px 0 0; border: 1px solid var(--line-strong); border-bottom: 0; display: block; }
.feature-card .fc-shot::after { content: ""; position: absolute; inset: auto 0 0 0; height: 70px; background: linear-gradient(transparent, var(--surface)); }
.feature-card .fc-body { padding: 24px 26px 30px; }
.feature-card h3 { font-size: 20px; margin-bottom: 8px; }
.feature-card p { font-size: 14.5px; color: var(--muted); }
.feature-card .fc-tag { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--green); display: block; margin-bottom: 10px; }

/* horizontal gallery */
.gallery { background: var(--bg-raise); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; }
.gallery-pin { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--nav-h) + 6px) 0 18px; overflow: hidden; }
.gallery-head { margin-bottom: 26px; }
.gallery-head .display-md { margin-bottom: 0; }
.gallery-track { display: flex; gap: 34px; width: max-content; padding: 0 6vw; align-items: flex-start; }
.gallery-item { width: 224px; flex: none; }
.gallery-item img { width: 100%; aspect-ratio: 440 / 940; object-fit: cover; object-position: top; border-radius: 26px; border: 1px solid var(--line-strong); background: #000; box-shadow: 0 26px 60px -26px rgba(0,0,0,0.9); }
.gallery-item span { display: block; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); margin: 14px 0 0 6px; }
.gallery-item span b { color: var(--green); font-weight: 500; margin-right: 8px; }

/* live dashboard */
.dash { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 30px; box-shadow: 0 40px 100px -40px rgba(0,0,0,0.8); }
.dash-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 26px; gap: 12px; flex-wrap: wrap; }
.dash-top .dash-title { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 10px; }
.dash-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 26px; }
.kpi { background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 18px; }
.kpi strong { font-family: var(--font-display); font-size: 28px; font-weight: 800; display: block; line-height: 1; margin-bottom: 8px; }
.kpi strong span { font: inherit; }
.kpi > span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.kpi .kpi-delta { color: var(--green); font-size: 12px; font-family: var(--font-mono); margin-left: 6px; }
/* Every mock dashboard, chat, quote and feed wears this so a demo reads as a demo at a glance. Guarded by tools/check-marketing-claims.test.js. */
.sample-tag { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--green); border: 1px solid var(--green); border-radius: 999px; padding: 3px 8px; line-height: 1; margin-left: 10px; white-space: nowrap; vertical-align: middle; }
.ai-quote .sample-tag { margin: 0 8px 0 0; }
.dash-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 14px; }
.dash-card { background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 20px; }
.dash-card h5, .dash-card .dash-h { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); font-weight: 500; margin-bottom: 18px; }
.chart { display: flex; align-items: flex-end; gap: 8px; height: 150px; }
.chart .bar { flex: 1; background: linear-gradient(to top, var(--green-deep), var(--green)); border-radius: 5px 5px 2px 2px; min-height: 4px; transform-origin: bottom; }
.chart-x { display: flex; gap: 8px; margin-top: 10px; }
.chart-x span { flex: 1; text-align: center; font-family: var(--font-mono); font-size: 9.5px; color: var(--dim); }
.sku-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.sku-row .sku-name { font-size: 13.5px; color: var(--ink); width: 118px; flex: none; white-space: normal; line-height: 1.2; overflow-wrap: anywhere; } /* wraps instead of clipping: Signature Margarita truncated at 390px (2026-09-29) */
.sku-row .sku-bar { flex: 1; height: 7px; border-radius: 99px; background: rgba(233,242,235,0.07); overflow: hidden; }
.sku-row .sku-bar i { display: block; height: 100%; border-radius: 99px; background: var(--green); transform-origin: left; }
.sku-row .sku-n { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); width: 34px; text-align: right; }
.data-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(40px, 5vw, 80px); align-items: center; }

/* AI strip */
.ai-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 10px; }
.ai-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 28px; background: linear-gradient(160deg, rgba(29,185,84,0.06), transparent 55%), var(--surface); }
.ai-card .ai-chip { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; color: var(--green); display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(29,185,84,0.35); border-radius: 999px; padding: 6px 12px; margin-bottom: 18px; }
.ai-card h3 { font-size: 20px; margin-bottom: 10px; }
.ai-card p { font-size: 14.5px; color: var(--muted); }
.ai-quote { font-family: var(--font-mono); font-size: 13px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-left: 2px solid var(--green); border-radius: 10px; padding: 14px 16px; margin-top: 18px; line-height: 1.6; }

/* calculator */
.calc { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 80px); align-items: start; }
.calc-controls { display: flex; flex-direction: column; gap: 30px; }
.calc-field label { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.calc-field label output { color: var(--green); font-weight: 700; }
.calc-field input[type="range"] { width: 100%; appearance: none; -webkit-appearance: none; height: 44px; margin: 0; background: transparent; outline: none; cursor: pointer; } /* the INPUT is the hit box: 44px tall, the 5px track is drawn inside it; a 5px input measured 288x5 on a phone (2026-09-29) */
.calc-field input[type="range"]::-webkit-slider-runnable-track { height: 5px; border-radius: 99px; background: rgba(233,242,235,0.12); }
.calc-field input[type="range"]::-moz-range-track { height: 5px; border-radius: 99px; background: rgba(233,242,235,0.12); }
.calc-field input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8.5px; border-radius: 50%; background: var(--green); border: 3px solid #04140a; box-shadow: 0 0 0 1.5px var(--green), 0 6px 18px -4px var(--green-glow); cursor: grab; }
.calc-result { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 36px; }
.calc-result .cr-row { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--muted); }
.calc-result .cr-row strong { font-family: var(--font-mono); color: var(--ink); font-size: 17px; }
.calc-result .cr-hero { padding: 22px 0 6px; border: 0; display: block; }
.calc-result .cr-hero em { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); font-style: normal; display: block; margin-bottom: 8px; }
.calc-result .cr-hero strong { font-family: var(--font-display); font-size: clamp(40px, 4vw, 58px); font-weight: 800; color: var(--green); line-height: 1; }
.calc-result .cr-note { font-size: 12.5px; color: var(--dim); margin-top: 18px; }

/* venue types split */
.venue-split { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.venue-card { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); min-height: 380px; display: flex; align-items: flex-end; }
.venue-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.venue-card:hover img { transform: scale(1.04); }
.venue-card .vc-body { position: relative; z-index: 1; padding: 30px; width: 100%; background: linear-gradient(transparent, rgba(4,7,5,0.92) 55%); padding-top: 90px; }
.venue-card h3 { font-size: 24px; margin-bottom: 8px; }
.venue-card p { color: var(--muted); font-size: 14.5px; max-width: 46ch; }
.venue-card .vc-tag { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--green); display: block; margin-bottom: 10px; }

@media (max-width: 980px) {
  .persona-panel { grid-template-columns: 1fr; gap: 34px; }
  .feature-grid { grid-template-columns: 1fr; }
  .dash-kpis { grid-template-columns: 1fr 1fr; }
  .dash-grid { grid-template-columns: 1fr; }
  .data-grid { grid-template-columns: 1fr; gap: 40px; }
  .ai-strip { grid-template-columns: 1fr; }
  .calc { grid-template-columns: 1fr; }
  .venue-split { grid-template-columns: 1fr; }
  .gallery-item { width: 178px; }
}
@media (prefers-reduced-motion: reduce) {
  .logo-mark::before { animation: none; }
  .gallery-pin { overflow-x: auto; }
}

/* ================= v5: night-spectrum expansion ================= */
:root {
  --violet: #8b5cf6;
  --violet-glow: rgba(139, 92, 246, 0.28);
  --teal: #0d9488;
  --chart-green: #16a34a;
  --grad-night: linear-gradient(110deg, var(--green) 0%, #14b8a6 48%, var(--violet) 100%);
}

/* gradient type + washes — green stays the money color, violet is the night */
:root { --grad-brand: linear-gradient(105deg, #1db954 0%, #2ee06b 55%, #4be08a 100%); }
.grad-text {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-bg {
  background:
    linear-gradient(100deg, rgba(6, 8, 7, 0.88) 0%, rgba(6, 8, 7, 0.55) 45%, rgba(6, 8, 7, 0.25) 100%),
    radial-gradient(900px 520px at 78% 30%, rgba(29, 185, 84, 0.13), transparent 65%),
    radial-gradient(760px 560px at 8% 88%, rgba(139, 92, 246, 0.12), transparent 62%);
}
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(200deg, transparent 55%, rgba(139, 92, 246, 0.08));
  pointer-events: none;
}

/* duotone gradient treatment on photography */
.venue-card::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(135deg, rgba(29, 185, 84, 0.16), transparent 45%, rgba(139, 92, 246, 0.22));
  mix-blend-mode: screen;
  transition: opacity 0.4s ease;
}
.venue-card:hover::after { opacity: 0.65; }

/* section washes */
.wash { position: relative; }
.wash::before {
  content: ""; position: absolute; inset: -10% 0; pointer-events: none; z-index: 0;
  background: radial-gradient(720px 420px at 85% 12%, var(--violet-glow), transparent 68%);
  opacity: 0.34;
}
.wash > .wrap { position: relative; z-index: 1; }

/* ---------- restyled operator-math band (was solid green) ---------- */
.roi {
  background:
    radial-gradient(900px 460px at 12% 0%, rgba(29, 185, 84, 0.16), transparent 60%),
    radial-gradient(700px 460px at 95% 100%, rgba(139, 92, 246, 0.14), transparent 60%),
    var(--bg-raise);
  color: var(--ink);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.roi .eyebrow { color: var(--green); }
.roi .eyebrow::before { background: var(--green); }
.roi .display-lg { color: var(--ink); }
.roi-stat { border-top: 2px solid transparent; border-image: var(--grad-night) 1; padding-top: 22px; }
.roi-stat strong { color: var(--ink); }
.roi-stat span { color: var(--muted); }
.roi-note { color: var(--dim); }

/* ---------- interactive charts ---------- */
.viz-block { margin-top: clamp(46px, 6vw, 72px); }
.viz-card { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 28px 28px 22px; position: relative; }
.viz-card + .viz-card { margin-top: 22px; }
.viz-head { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; flex-wrap: wrap; margin-bottom: 6px; }
.viz-head h3 { font-size: 19px; }
.viz-head .viz-sub { font-size: 13px; color: var(--dim); }
.viz-legend { display: flex; gap: 18px; flex-wrap: wrap; margin: 8px 0 4px; }
.viz-legend span { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--muted); }
.viz-legend i { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
.tchart { width: 100%; height: auto; display: block; overflow: visible; }
.tchart text { font-family: var(--font-mono); font-size: 10.5px; fill: var(--dim); }
.tchart .axis line { stroke: rgba(233, 242, 235, 0.08); }
.tchart .dlabel { font-size: 11px; fill: var(--muted); }
.viz-tip {
  position: absolute; pointer-events: none; z-index: 5; opacity: 0;
  background: rgba(6, 8, 7, 0.95); border: 1px solid var(--line-strong); border-radius: 10px;
  padding: 10px 13px; font-family: var(--font-mono); font-size: 12px; line-height: 1.7;
  transform: translate(-50%, calc(-100% - 14px)); white-space: nowrap;
  transition: opacity 0.12s ease;
}
.viz-tip b { color: var(--ink); font-weight: 500; }
.viz-stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 22px; }
.viz-stat { background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; }
.viz-stat strong { font-family: var(--font-display); font-size: 26px; font-weight: 800; display: block; line-height: 1.05; margin-bottom: 7px; color: var(--ink); }
.viz-stat span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.viz-note { font-size: 12.5px; color: var(--dim); margin-top: 14px; max-width: 78ch; }

/* ---------- Lync chat mock ---------- */
.lync-panel { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(36px, 5vw, 80px); align-items: center; margin-top: clamp(40px, 5vw, 64px); }
.lync-chat { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 26px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 40px 90px -44px var(--violet-glow); }
.lync-chat .lc-head { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.lync-chat .lc-head .dot { background: var(--violet); box-shadow: 0 0 10px var(--violet); }
.bubble { max-width: 88%; border-radius: 14px; padding: 13px 16px; font-size: 14px; line-height: 1.55; }
.bubble.q { align-self: flex-end; background: rgba(233, 242, 235, 0.07); border: 1px solid var(--line-strong); color: var(--ink); border-bottom-right-radius: 4px; }
.bubble.a { align-self: flex-start; background: linear-gradient(150deg, rgba(139, 92, 246, 0.12), rgba(29, 185, 84, 0.07)); border: 1px solid rgba(139, 92, 246, 0.3); color: var(--ink); border-bottom-left-radius: 4px; }
.bubble.a .b-tag { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; color: var(--violet); margin-bottom: 6px; }
.bubble.a strong { color: var(--green-bright); font-weight: 600; }

/* ---------- ratings-for-bars band ---------- */
.rating-band { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(36px, 5vw, 80px); align-items: center; }
.rating-demo { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 28px; }
.rating-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.rating-row:last-child { border-bottom: 0; }
.rating-row .rr-drink { flex: 1; min-width: 0; }
.rating-row .rr-drink strong { display: block; font-size: 15px; color: var(--ink); font-weight: 600; }
.rating-row .rr-drink span { font-size: 12.5px; color: var(--dim); font-family: var(--font-mono); }
.stars { display: inline-flex; gap: 3px; }
.stars svg { width: 15px; height: 15px; }
.stars .on { fill: var(--green); }
.stars .off { fill: rgba(233, 242, 235, 0.14); }
.rating-row .rr-n { font-family: var(--font-mono); font-size: 12px; color: var(--muted); width: 52px; text-align: right; flex: none; }
.rating-flag { margin-top: 6px; font-family: var(--font-mono); font-size: 12px; color: #f59e9e; background: rgba(220, 80, 80, 0.08); border: 1px solid rgba(220, 80, 80, 0.25); border-radius: 8px; padding: 8px 12px; display: inline-block; }

/* ---------- coming-soon / roadmap cards ---------- */
.soon-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: clamp(40px, 5vw, 60px); }
.soon-card { position: relative; border-radius: var(--radius); padding: 34px 32px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.soon-card::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: var(--grad-night); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0.5; pointer-events: none; }
.soon-card .sc-tag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--violet); border: 1px solid rgba(139, 92, 246, 0.4); background: rgba(139, 92, 246, 0.08); padding: 6px 13px; border-radius: 999px; margin-bottom: 20px; }
.soon-card h3 { font-size: 22px; margin-bottom: 10px; }
.soon-card p { color: var(--muted); font-size: 15px; max-width: 52ch; }
.soon-card ul { list-style: none; margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.soon-card li { font-size: 14px; color: var(--muted); padding-left: 24px; position: relative; }
.soon-card li::before { content: ""; position: absolute; left: 0; top: 8px; width: 12px; height: 7px; border-left: 2px solid var(--violet); border-bottom: 2px solid var(--violet); transform: rotate(-45deg); }

/* ---------- FAQ ---------- */
/* Wide viewports flow the questions into two balanced columns so the list
   fills the row instead of leaving a screen-height empty gutter on the right.
   break-inside:avoid keeps a question and its answer together in one column. */
.faq-list { max-width: 860px; }
@media (min-width: 900px) {
  .faq-list { max-width: none; column-count: 2; column-gap: clamp(40px, 5vw, 72px); }
  .faq-item { break-inside: avoid; -webkit-column-break-inside: avoid; }
}
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 26px 4px; font-family: var(--font-display); font-weight: 700; font-size: clamp(17px, 1.6vw, 21px);
  transition: color 0.15s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--green); }
.faq-item summary .fq-x { flex: none; width: 30px; height: 30px; border: 1px solid var(--line-strong); border-radius: 50%; position: relative; transition: transform 0.25s ease, border-color 0.25s ease; }
.faq-item summary .fq-x::before, .faq-item summary .fq-x::after { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 2px; background: var(--muted); transform: translate(-50%, -50%); }
.faq-item summary .fq-x::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform 0.25s ease; }
.faq-item[open] summary .fq-x { border-color: var(--green); transform: rotate(45deg); }
.faq-item .faq-a { padding: 0 44px 28px 4px; color: var(--muted); font-size: 15.5px; max-width: 74ch; }
.faq-item .faq-a a { color: var(--green); }

/* venue typeahead suggestions */
.venue-suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40;
  background: var(--bg); border: 1px solid var(--line-strong); border-radius: 12px;
  overflow: hidden; box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.85);
}
.venue-suggest .vs-item {
  display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left;
  background: none; border: 0; border-bottom: 1px solid var(--line);
  padding: 12px 15px; cursor: pointer;
}
.venue-suggest .vs-item:last-child { border-bottom: 0; }
.venue-suggest .vs-item:hover, .venue-suggest .vs-item.active { background: rgba(29, 185, 84, 0.08); }
.venue-suggest .vs-item strong { font-size: 14.5px; color: var(--ink); font-weight: 600; }
.venue-suggest .vs-item span { font-size: 12px; color: var(--dim); font-family: var(--font-mono); }

/* confirm-before-send modal */
.confirm-modal {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(4, 7, 5, 0.78); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.confirm-modal[hidden] { display: none; }
.cm-card {
  width: min(520px, 100%); max-height: 88svh; overflow-y: auto;
  background: var(--surface); border: 1px solid rgba(29, 185, 84, 0.35); border-radius: 22px;
  padding: 30px 30px 26px; box-shadow: 0 60px 140px -40px rgba(0, 0, 0, 0.9), 0 0 90px -40px var(--green-glow);
}
.cm-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 20px; }
.cm-head h3 { font-size: 21px; margin-bottom: 3px; }
.cm-head p { font-size: 13.5px; color: var(--muted); }
.cm-verified {
  font-family: var(--font-mono); font-size: 12px; color: var(--green);
  border: 1px solid rgba(29, 185, 84, 0.4); background: rgba(29, 185, 84, 0.07);
  border-radius: 10px; padding: 10px 13px; margin-bottom: 14px;
  display: flex; align-items: center; gap: 9px; line-height: 1.5;
}
.cm-unverified {
  font-size: 13px; color: var(--muted); border: 1px dashed var(--line-strong);
  border-radius: 10px; padding: 10px 13px; margin-bottom: 14px;
}
.cm-row { display: flex; justify-content: space-between; gap: 18px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.cm-row span { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); padding-top: 3px; flex: none; }
.cm-row strong { font-size: 14.5px; color: var(--ink); font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.cm-actions { display: flex; gap: 12px; margin-top: 22px; }
.cm-actions .btn { flex: 1; justify-content: center; }

/* venue verification chip */
.venue-verify { margin-top: 8px; min-height: 0; }
.venue-verify .vv-note { display: block; font-size: 12.5px; color: var(--dim); }
.venue-verify .vv-note.vv-ok { color: var(--green); }
.venue-verify .vv-chip { background: var(--bg); border: 1px solid rgba(29, 185, 84, 0.4); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.venue-verify .vv-chip > span:first-child { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green); }
.venue-verify .vv-chip strong { font-size: 13.5px; color: var(--ink); font-weight: 600; line-height: 1.4; }
.venue-verify .vv-actions { display: flex; gap: 10px; margin-top: 4px; }
.venue-verify .vv-actions button { font-size: 12.5px; font-weight: 600; border-radius: 999px; padding: 7px 15px; cursor: pointer; border: 1px solid var(--line-strong); background: transparent; color: var(--muted); }
.venue-verify .vv-actions .vv-yes { background: var(--green); border-color: var(--green); color: #04140a; }

/* venues form states */
.form-status { display: none; margin-top: 18px; border-radius: 12px; padding: 16px 18px; font-size: 14.5px; line-height: 1.55; }
.form-status.ok { display: block; background: rgba(29, 185, 84, 0.09); border: 1px solid rgba(29, 185, 84, 0.4); color: var(--ink); }
.form-status.err { display: block; background: rgba(220, 80, 80, 0.08); border: 1px solid rgba(220, 80, 80, 0.35); color: var(--ink); }
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* ---------- calc-live: sliders + charts in one view ---------- */
.calc-live { display: grid; grid-template-columns: 330px 1fr; gap: 26px; align-items: start; }
.calc-rail { position: sticky; top: calc(var(--nav-h) + 18px); background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 26px; display: flex; flex-direction: column; gap: 22px; }
.calc-rail .cr-hero { display: block; padding: 4px 0 0; }
.calc-rail .cr-hero em { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); font-style: normal; display: block; margin-bottom: 6px; }
.calc-rail .cr-hero strong { font-family: var(--font-display); font-size: clamp(30px, 2.6vw, 40px); font-weight: 800; color: var(--green); line-height: 1; }
.calc-rail .cr-row { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; color: var(--muted); }
.calc-rail .cr-row strong { font-family: var(--font-mono); color: var(--ink); font-size: 14.5px; }
.calc-rail .cr-note { font-size: 12px; color: var(--dim); }
.calc-charts { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.calc-charts .viz-card { margin: 0; }
.calc-charts .viz-card + .viz-card { margin: 0; }

/* ---------- operator flow (pinned scrollytelling) ---------- */
.opflow { background: var(--bg-raise); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.opflow-pin { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--nav-h) + 20px) 0 40px; }
.opflow-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(40px, 6vw, 100px); align-items: center; }
.opflow-role-rail { display: flex; gap: 8px; margin-bottom: clamp(26px, 3.5vw, 46px); flex-wrap: wrap; }
.opflow-steps { position: relative; min-height: 300px; }
.opflow-step { position: absolute; inset: 0; opacity: 0; pointer-events: none; display: flex; flex-direction: column; justify-content: center; }
.opflow-step.active { pointer-events: auto; }
.opflow-step .of-role { font-family: var(--font-mono); color: var(--green); font-size: 12.5px; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 16px; }
.opflow-step h3 { font-size: clamp(24px, 2.5vw, 36px); margin-bottom: 14px; }
.opflow-step p { color: var(--muted); max-width: 46ch; font-size: 16px; }
.opflow-phone { display: flex; justify-content: center; position: relative; }
.opflow-phone .phone { max-width: 262px; }
.opflow-screens { position: absolute; inset: 0; }
.opflow-screens img { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* ---------- drink showcase (swipeable) ---------- */
.drink-strip-wrap { position: relative; margin-top: clamp(40px, 5vw, 60px); }
.drink-strip { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 10px 4px 26px; cursor: grab; scrollbar-width: none; }
.drink-strip::-webkit-scrollbar { display: none; }
.drink-strip.dragging { cursor: grabbing; scroll-snap-type: none; }
.drink-card { flex: none; width: min(300px, 74vw); scroll-snap-align: start; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; transition: transform 0.35s ease, border-color 0.35s ease; }
.drink-card:hover { transform: translateY(-8px); border-color: rgba(29, 185, 84, 0.45); }
.drink-card .dc-img { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: #000; }
.drink-card .dc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; display: block; }
.drink-card:hover .dc-img img { transform: scale(1.06); }
.drink-card .dc-img::after { content: ""; position: absolute; inset: auto 0 0 0; height: 46%; background: linear-gradient(transparent, rgba(6, 8, 7, 0.9)); }
.drink-card .dc-price { position: absolute; top: 14px; right: 14px; z-index: 2; font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: #04140a; background: var(--green); border-radius: 999px; padding: 6px 13px; }
.drink-card .dc-meta { position: absolute; left: 18px; right: 18px; bottom: 14px; z-index: 2; }
.drink-card .dc-meta h3 { font-size: 20px; margin-bottom: 3px; }
.drink-card .dc-meta span { font-size: 12.5px; color: var(--muted); display: block; }
.drink-card .dc-meta .stars { margin-top: 7px; }
.drink-hint { text-align: center; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim); margin-top: 2px; }

/* ---------- dual-side funnel (guest + staff synchronized) ---------- */
.duo { background: var(--bg-raise); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.duo-pin { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--nav-h) + 6px) 0 18px; overflow: hidden; }
.duo-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(30px, 5vw, 80px); align-items: center; }
.duo-phones { display: flex; justify-content: center; gap: clamp(16px, 2.5vw, 34px); }
.duo-phones .phone { max-width: 208px; }
.duo-phones .duo-label { display: block; text-align: center; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim); margin-top: 12px; }
.duo-phones .duo-side.active-side .duo-label { color: var(--green); }
.duo-screens { position: absolute; inset: 0; }
.duo-screens img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; }
.duo-steps { position: relative; min-height: 280px; }
.duo-step { position: absolute; inset: 0; opacity: 0; pointer-events: none; display: flex; flex-direction: column; justify-content: center; }
.duo-step.active { pointer-events: auto; }
.duo-step .d-num { font-family: var(--font-mono); color: var(--green); font-size: 12.5px; letter-spacing: 0.2em; margin-bottom: 14px; }
.duo-step h3 { font-size: clamp(22px, 2.3vw, 32px); margin-bottom: 12px; }
.duo-step p { color: var(--muted); max-width: 44ch; font-size: 15.5px; }
.duo-step .d-sync { margin-top: 14px; font-family: var(--font-mono); font-size: 12px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-left: 2px solid var(--green); border-radius: 9px; padding: 10px 13px; max-width: 44ch; }
@media (max-width: 980px) {
  .duo-grid { grid-template-columns: 1fr; gap: 22px; }
  .duo-phones { order: 2; } .duo-phones .phone { max-width: 148px; }
  .duo-steps { order: 1; min-height: 230px; }
}

/* ---------- Core vs Insights comparison ---------- */
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: stretch; }
.compare-col { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 34px 32px; }
.compare-col.featured { border-color: var(--green); box-shadow: 0 0 80px -30px var(--green-glow); position: relative; }
.compare-col .cc-head { display: flex; flex-direction: column; gap: 6px; padding-bottom: 20px; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.compare-col .cc-sub { font-size: 13.5px; color: var(--dim); }
.cc-list { list-style: none; display: flex; flex-direction: column; gap: 13px; }
.cc-list li { font-size: 14.5px; color: var(--muted); padding-left: 28px; position: relative; line-height: 1.5; }
.cc-list li::before { content: ""; position: absolute; left: 0; top: 6px; width: 15px; height: 8px; border-left: 2.5px solid var(--green); border-bottom: 2.5px solid var(--green); transform: rotate(-45deg); }
.cc-list li strong { color: var(--ink); font-weight: 600; }
@media (max-width: 980px) { .compare-grid { grid-template-columns: 1fr; } }

/* ---------- venue setup panel ---------- */
.setup-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(36px, 5vw, 80px); align-items: center; }
.setup-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; box-shadow: 0 40px 90px -44px rgba(0, 0, 0, 0.8); }
.setup-tabs { display: flex; border-bottom: 1px solid var(--line); }
.setup-tab { flex: 1; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--muted); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; padding: 16px 8px; cursor: pointer; transition: color 0.15s, border-color 0.15s; }
.setup-tab:hover { color: var(--ink); }
.setup-tab.active { color: var(--green); border-bottom-color: var(--green); }
.setup-pane { display: block; padding: 22px 24px 26px; }
.setup-pane[hidden] { display: none; }
.su-row { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.su-row:last-of-type { border-bottom: 0; }
.su-row .su-name { flex: 1; min-width: 0; }
.su-row .su-name strong { display: block; font-size: 15px; font-weight: 600; color: var(--ink); }
.su-row .su-name span { font-size: 12px; color: var(--dim); font-family: var(--font-mono); }
/* Tap targets in the setup demo (2026-09-29). Measured at a 390px viewport
   against production: the − / + steppers rendered 15×15px and the
   availability toggle 40×22px — the exact "unresponsive button" a phone
   reviewer flags, on the one section of the site that demonstrates the
   management UI. Every control here now clears 44×44 (WCAG 2.5.5, the iOS
   floor) without changing what it looks like: the steppers grow into their
   box, and the toggle keeps its 40×22 pill and gains an invisible hit area
   via ::before. tools/check-homepage-tap-targets.test.js measures the boxes. */
.su-price { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 14px; color: var(--ink); border: 1px solid var(--line-strong); border-radius: 9px; padding: 0 4px; min-height: 44px; }
.su-price button { background: none; border: 0; color: var(--green); font-size: 18px; font-weight: 700; cursor: pointer; padding: 0; line-height: 1; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.su-toggle { position: relative; width: 40px; height: 22px; border-radius: 999px; background: var(--green); border: 0; cursor: pointer; transition: background 0.2s; flex: none; }
.su-toggle::before { content: ""; position: absolute; top: -11px; bottom: -11px; left: -2px; right: -2px; }
.su-toggle::after { content: ""; position: absolute; top: 3px; left: 21px; width: 16px; height: 16px; border-radius: 50%; background: #04140a; transition: left 0.2s, background 0.2s; }
.su-toggle[aria-pressed="false"] { background: rgba(233, 242, 235, 0.15); }
.su-toggle[aria-pressed="false"]::after { left: 3px; background: var(--muted); }
.su-86 { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--dim); width: 44px; text-align: right; flex: none; }
.su-add { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13.5px; font-weight: 600; color: var(--green); background: rgba(29, 185, 84, 0.08); border: 1px dashed rgba(29, 185, 84, 0.4); border-radius: 10px; padding: 10px 16px; cursor: pointer; }
.su-role { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green); border: 1px solid rgba(29, 185, 84, 0.35); border-radius: 999px; padding: 4px 10px; flex: none; }
.su-avatar { width: 32px; height: 32px; border-radius: 50%; flex: none; background: linear-gradient(135deg, var(--green), var(--green-deep)); color: #04140a; font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.su-rec { margin-top: 16px; background: linear-gradient(150deg, rgba(139, 92, 246, 0.1), rgba(29, 185, 84, 0.06)); border: 1px solid rgba(139, 92, 246, 0.3); border-radius: 12px; padding: 13px 15px; font-family: var(--font-mono); font-size: 12.5px; color: var(--ink); line-height: 1.6; }
.su-rec b { color: var(--violet); font-weight: 500; letter-spacing: 0.12em; display: block; margin-bottom: 4px; font-size: 10px; }

/* gallery splash spinning-mark overlay */
.gallery-splash { position: relative; }
.gallery-splash .gs-mark { position: absolute; top: 27%; left: 50%; width: 44%; transform: translateX(-50%); filter: drop-shadow(0 14px 34px rgba(29, 185, 84, 0.35)); border-radius: 18px; }

/* scroll image reveals */
.img-reveal { clip-path: none; }

@media (max-width: 980px) {
  .lync-panel, .rating-band { grid-template-columns: 1fr; gap: 36px; }
  .soon-grid { grid-template-columns: 1fr; }
  .viz-stat-row { grid-template-columns: 1fr; }
  .calc-live { grid-template-columns: 1fr; }
  .calc-rail { position: static; }
  .opflow-grid { grid-template-columns: 1fr; gap: 18px; }
  .opflow-phone { order: 2; }
  .opflow-phone .phone { max-width: min(74vw, calc((100svh - 330px) * 0.472)); }
  .opflow-steps { order: 1; min-height: 170px; }
  .opflow-step h3 { font-size: 20px; margin-bottom: 8px; }
  .opflow-step p { font-size: 13.5px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .opflow-step .d-sync { font-size: 11px; padding: 8px 11px; margin-top: 10px; }
  .opflow-pin { padding-top: calc(var(--nav-h) + 8px); }

  /* Dual-side funnel: two phones share the row — size them from height
     so both screens stay genuinely readable. */
  .duo-grid { grid-template-columns: 1fr; gap: 16px; }
  .duo-phones { order: 2; gap: 12px; }
  .duo-phones .phone { max-width: min(44vw, calc((100svh - 360px) * 0.472)); }
  .duo-steps { order: 1; min-height: 180px; }
  .duo-step h3 { font-size: 19px; margin-bottom: 8px; }
  .duo-step p { font-size: 13px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .duo-step .d-sync { font-size: 11px; padding: 8px 11px; margin-top: 10px; }
  .duo-pin { padding-top: calc(var(--nav-h) + 8px); }

  /* Horizontal gallery: no pinning on mobile (it popped over adjacent
     sections) — native swipe instead. */
  .gallery-pin { min-height: 0; padding: 56px 0 36px; }
  .gallery-track { width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 0 24px; scrollbar-width: none; }
  .gallery-track::-webkit-scrollbar { display: none; }
  .gallery-item { scroll-snap-align: start; }

  /* Kill the dead air between stacked feature/showcase sections. */
  .section { padding: 60px 0; }
  #features { padding-bottom: 30px !important; }
  #menu-live { padding-bottom: 44px !important; }
}

/* ---------- Build: punch list 2026-07-16 ---------- */

/* bigger dual-side funnel phones (founder: "still way too small") */
.duo-phones .phone { max-width: 264px; }
@media (max-width: 980px) {
  .duo-phones { gap: 12px; }
  .duo-phones .phone { max-width: min(47vw, calc((100svh - 300px) * 0.5)); }
}

/* clickable system cards */
button.system-card { text-align: left; cursor: pointer; font: inherit; color: inherit; width: 100%; }
button.system-card { transition: border-color .25s ease, transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease; }
button.system-card:hover { transform: translateY(-4px); border-color: rgba(29,185,84,0.55); box-shadow: 0 18px 46px rgba(0,0,0,0.45); }
button.system-card:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.system-card .s-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; color: var(--green); text-transform: uppercase; opacity: .75; transition: opacity .25s ease, gap .25s ease; }
button.system-card:hover .s-cta { opacity: 1; gap: 12px; }

/* flow modal */
.flow-modal { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; padding: 20px; }
.flow-modal[hidden] { display: none; }
.flow-backdrop { position: absolute; inset: 0; background: rgba(4,6,5,0.88); backdrop-filter: blur(6px); }
.flow-panel { position: relative; width: min(920px, 100%); max-height: 92svh; overflow-y: auto; background: var(--bg-raise); border: 1px solid rgba(29,185,84,0.35); border-radius: 20px; padding: clamp(22px, 4vw, 44px); animation: flowIn .45s cubic-bezier(.2,.9,.25,1); }
@keyframes flowIn { from { opacity: 0; transform: translateY(26px) scale(.97); } }
.flow-close { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; font-size: 15px; }
.flow-close:hover { border-color: var(--green); color: var(--green); }
.flow-head { margin-bottom: 26px; }
.flow-tag { font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em; color: var(--green); }
.flow-head h3 { font-size: clamp(24px, 3.4vw, 34px); margin-top: 8px; }
.flow-stage { display: grid; grid-template-columns: minmax(0, 300px) 1fr; gap: clamp(24px, 4vw, 48px); align-items: center; }
.flow-phone { margin: 0 auto; max-width: 280px; }
.flow-phone .phone-screen img, .flow-phone .phone-screen .flow-shot { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
#flow-screen > * { animation: shotIn .5s cubic-bezier(.2,.9,.25,1); }
@keyframes shotIn { from { opacity: 0; transform: scale(1.04); } }
.flow-step-num { font-family: var(--font-mono); font-size: 12px; letter-spacing: .18em; color: var(--dim); margin-bottom: 12px; }
.flow-caption h4 { font-size: clamp(20px, 2.6vw, 26px); margin-bottom: 10px; }
.flow-caption p { color: var(--muted); font-size: 16px; max-width: 46ch; }
.flow-dots { display: flex; gap: 8px; margin: 22px 0; }
.flow-dots button { width: 9px; height: 9px; border-radius: 999px; border: 0; padding: 0; background: #2c2f2c; cursor: pointer; transition: transform .2s ease, background .2s ease; }
.flow-dots button.on { background: var(--green); transform: scale(1.35); }
.flow-nav { display: flex; gap: 12px; }
.flow-btn { min-height: 46px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--muted); font: inherit; font-size: 14.5px; cursor: pointer; }
.flow-btn:hover { border-color: var(--green); color: var(--green); }
.flow-btn-primary { background: var(--green); border-color: var(--green); color: #04140a; font-weight: 700; }
.flow-btn-primary:hover { color: #04140a; filter: brightness(1.08); }
@media (max-width: 760px) { .flow-stage { grid-template-columns: 1fr; } .flow-phone { max-width: 210px; } }

/* manager sim (inside flow modal) */
.mgr-sim { width: 100%; height: 100%; background: linear-gradient(160deg, #0c1410, #060907); padding: 18px 14px; display: flex; flex-direction: column; gap: 12px; font-family: var(--font-mono); }
.mgr-sim .ms-title { font-size: 10px; letter-spacing: .16em; color: var(--green); display: flex; justify-content: space-between; }
.mgr-sim .ms-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mgr-sim .ms-kpi { border: 1px solid rgba(29,185,84,0.22); border-radius: 10px; padding: 10px; }
.mgr-sim .ms-kpi b { display: block; font-size: 19px; color: #fff; font-variant-numeric: tabular-nums; }
.mgr-sim .ms-kpi span { font-size: 8.5px; letter-spacing: .12em; color: var(--dim); }
.mgr-sim .ms-bars { flex: 1; display: flex; flex-direction: column; gap: 9px; justify-content: center; }
.mgr-sim .ms-bar { display: grid; grid-template-columns: 64px 1fr 30px; gap: 8px; align-items: center; font-size: 9px; color: var(--muted); }
.mgr-sim .ms-bar i { height: 7px; border-radius: 999px; background: var(--green); display: block; transform-origin: left; animation: msGrow 1.1s cubic-bezier(.2,.9,.25,1) both; }
@keyframes msGrow { from { transform: scaleX(0); } }
.mgr-sim .ms-foot { font-size: 8.5px; letter-spacing: .12em; color: var(--dim); }

/* reel */
.reel-frame { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: #000; aspect-ratio: 16 / 9; }
.reel-frame video { width: 100%; height: 100%; display: block; object-fit: cover; }
.reel-play { position: absolute; inset: 0; width: 100%; border: 0; background: linear-gradient(180deg, rgba(4,6,5,0.1), rgba(4,6,5,0.55)); color: #fff; cursor: pointer; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 18px; transition: background .3s ease; }
.reel-frame[data-film-ready="true"] .reel-play { display: flex; }
.reel-play:hover { background: linear-gradient(180deg, rgba(4,6,5,0), rgba(4,6,5,0.45)); }
.reel-play-ring { width: 84px; height: 84px; border-radius: 999px; background: var(--green); color: #04140a; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 0 rgba(29,185,84,0.45); animation: reelPulse 2.4s ease infinite; }
.reel-play-ring svg { width: 34px; height: 34px; margin-left: 4px; }
@keyframes reelPulse { 0% { box-shadow: 0 0 0 0 rgba(29,185,84,0.45); } 70% { box-shadow: 0 0 0 26px rgba(29,185,84,0); } 100% { box-shadow: 0 0 0 0 rgba(29,185,84,0); } }
.reel-play-label { font-family: var(--font-mono); font-size: 12px; letter-spacing: .22em; }
.reel-frame.playing .reel-play { display: none; }

/* crew value */
.value-marquee { background: var(--bg); }
.value-marquee .marquee-track span { color: var(--muted); }
.value-marquee .marquee-track span::after { color: var(--green); }
.crew-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.crew-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 34px 30px; display: flex; flex-direction: column; gap: 20px; position: relative; overflow: hidden; transition: border-color .25s ease, transform .3s ease; }
.crew-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--green), transparent 70%); opacity: 0; transition: opacity .3s ease; }
.crew-card:hover { border-color: rgba(29,185,84,0.45); transform: translateY(-4px); }
.crew-card:hover::before { opacity: 1; }
.crew-head { display: flex; align-items: center; gap: 14px; }
.crew-face { width: 56px; height: 56px; border-radius: 999px; object-fit: cover; border: 2px solid rgba(29,185,84,0.5); }
.crew-role { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; color: var(--green); }
.crew-name { display: block; font-size: 14px; color: var(--dim); margin-top: 3px; }
.crew-card blockquote { margin: 0; font-size: 16.5px; line-height: 1.55; color: var(--text); }
.crew-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.crew-points li { font-size: 14px; color: var(--muted); padding-left: 20px; position: relative; }
.crew-points li::before { content: "→"; position: absolute; left: 0; color: var(--green); }
.crew-note { margin-top: 44px; clear: both; font-size: 12.5px; color: var(--dim); font-family: var(--font-mono); letter-spacing: .06em; }
@media (max-width: 980px) { .crew-grid { grid-template-columns: 1fr; } }

/* ================= mobile overhaul 2026-07-18 (founder mobile audit) ================= */

/* Hero stats: the labels were --dim mono on a dark photo — unreadable.
   Chip them and lift the label color so the value + label read as one unit. */
.hero-meta { gap: 12px; }
.hero-meta div {
  color: #aebbb2; background: rgba(6, 8, 7, 0.55); border: 1px solid var(--line);
  border-radius: 12px; padding: 10px 14px; backdrop-filter: blur(6px);
}
.hero-meta strong { color: var(--green); font-size: 22px; }

/* KPI labels: same contrast lift everywhere a stat card appears. */
.kpi > span { color: #93a099; }

/* Photo avatars in hero ticket chips */
img.t-avatar { object-fit: cover; padding: 0; }

/* Setup panel: the grid never collapsed — on phones both columns squeezed
   to ~50% and the drink rows shattered one word per line. */
@media (max-width: 980px) {
  .setup-grid { grid-template-columns: 1fr; gap: 34px; }
  .setup-panel { max-width: 560px; }
}

/* Operator/duo mock screens: 1080x1920 shots in a 440/940 frame were
   side-cropped by object-fit: cover (order numbers clipped). Contain +
   black letterbox keeps every pixel of the screen visible. */
.opflow-screens img, .duo-screens img { object-fit: contain; background: #000; }

/* ---------- bartender station mock (replaces baked PNG at #staff) ---------- */
.station-mock {
  width: 100%; max-width: 400px; background: linear-gradient(180deg, #0b1410, #070c09);
  border: 1px solid var(--line-strong); border-radius: 22px; padding: 18px 16px 14px;
  box-shadow: 0 26px 60px -26px rgba(0, 0, 0, 0.9);
  display: flex; flex-direction: column; gap: 12px;
}
.station-mock .sm-head { display: flex; flex-direction: column; gap: 3px; }
.station-mock .sm-title { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--ink); display: flex; align-items: center; gap: 7px; }
.station-mock .sm-sub { font-family: var(--font-mono); font-size: 11.5px; color: #93a099; }
.station-mock .sm-sub b { color: var(--green); font-weight: 500; }
.station-mock .sm-h { font-family: var(--font-display); font-size: 22px; margin: 2px 0 0; }
.station-mock .sm-card { background: rgba(233, 242, 235, 0.03); border: 1px solid var(--line); border-radius: 14px; padding: 12px; }
.station-mock .sm-card.is-new { border-color: rgba(29, 185, 84, 0.55); background: rgba(29, 185, 84, 0.06); }
.station-mock .sm-row { display: flex; align-items: center; gap: 10px; }
.station-mock .sm-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none; border: 1px solid rgba(233, 242, 235, 0.18); }
.station-mock .sm-who { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.station-mock .sm-who strong { font-size: 14.5px; }
.station-mock .sm-who span { font-family: var(--font-mono); font-size: 10px; color: #93a099; }
.station-mock .sm-badge { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.1em; padding: 4px 8px; border-radius: 999px; flex: none; }
.station-mock .b-await { background: var(--green); color: #04140a; font-weight: 700; }
.station-mock .b-prog { border: 1px solid rgba(233, 242, 235, 0.28); color: #cdd7d0; }
.station-mock .sm-items { margin: 9px 0 0 42px; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.station-mock .sm-items b { color: var(--green); font-weight: 600; margin-right: 4px; }
.station-mock .sm-items em { font-family: var(--font-mono); font-style: normal; font-size: 10px; color: #93a099; }
.station-mock .sm-accept { background: var(--green); color: #04140a; font-weight: 700; text-align: center; border-radius: 12px; padding: 13px; font-size: 15px; }
.station-mock .sm-foot { display: flex; justify-content: center; padding-top: 2px; }
.station-mock .sm-foot .wordmark { font-size: 15px; color: var(--ink); }

/* ---------- chart tooltips (tap or hover any bar) ---------- */
.chart .bar { position: relative; cursor: pointer; }
.chart .bar::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) translateY(4px); white-space: nowrap;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em;
  background: #0d1611; color: var(--ink); border: 1px solid var(--line-strong);
  border-radius: 8px; padding: 6px 9px; opacity: 0; pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease; z-index: 5;
}
.chart .bar:hover::after, .chart .bar.tipped::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.chart .bar:first-child::after { left: 0; transform: translateX(0) translateY(4px); }
.chart .bar:first-child:hover::after, .chart .bar:first-child.tipped::after { transform: translateX(0) translateY(0); }
.chart .bar:last-child::after { left: auto; right: 0; transform: translateX(0) translateY(4px); }
.chart .bar:last-child:hover::after, .chart .bar:last-child.tipped::after { transform: translateX(0) translateY(0); }

/* ---------- flatten the pinned opflow + duo narratives on mobile ----------
   The scrub-pinned versions produced ~14,000px of dead scroll, clipped
   mocks, and overlap on phones. Below 981px the steps stack as plain
   cards and each shows sensible static screens. */
@media (max-width: 980px) {
  .opflow-pin, .duo-pin { min-height: 0; padding: 56px 0; }
  .opflow-grid, .duo-grid { display: flex; flex-direction: column; gap: 26px; align-items: stretch; }
  .opflow-phone, .duo-phones { width: 100%; }
  .duo-side { flex: 0 0 auto; width: min(46%, 210px); }
  .opflow-steps, .duo-steps { position: static; min-height: 0; display: flex; flex-direction: column; gap: 18px; }
  .opflow-step, .duo-step {
    position: static; opacity: 1 !important; visibility: visible !important;
    transform: none !important; pointer-events: auto;
    background: rgba(233, 242, 235, 0.025); border: 1px solid var(--line);
    border-radius: 16px; padding: 18px;
  }
  .opflow-step h3, .duo-step h3 { font-size: 19px; }
  .opflow-step p, .duo-step p { font-size: 14px; }
  /* One static phone per flow: first screen only, contained, no crop. */
  .opflow-phone .phone { max-width: 220px; }
  .opflow-screens img { opacity: 0 !important; }
  .opflow-screens img:first-child { opacity: 1 !important; }
  .opflow-dash { display: none; }
  .duo-phones .phone { max-width: 164px; }
  .duo-screens img { opacity: 0 !important; }
  .duo-screens img:first-child { opacity: 1 !important; }
  .duo-phones { order: 0; }
  .duo-steps { order: 1; }
  .opflow-role-rail .rail-step { opacity: 1; }
}

/* ---------- mobile type + rhythm cohesion pass ---------- */
@media (max-width: 560px) {
  .section { padding: 56px 0; }
  .section-head { margin-bottom: 30px; }
  .display-xl { font-size: clamp(34px, 10.5vw, 44px); }
  .display-lg { font-size: clamp(27px, 8vw, 34px); }
  .display-md { font-size: clamp(22px, 6.5vw, 27px); }
  .eyebrow { font-size: 11px; }
  .lede { font-size: 15.5px; }
  .hero-meta { gap: 10px; }
  .hero-meta div { flex: 1 1 45%; }
  .station-mock { max-width: 100%; }
}

.chart-hint { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.14em; color: #93a099; margin-top: 10px; }

/* ================= desktop scroll-section polish 2026-07-18 round 2 ================= */

/* Founder web audit: the pinned sections wasted most of the viewport —
   phones sized by a fixed max-width instead of the actual pinned window.
   Size every pinned phone from svh so the mock FILLS the section. */
@media (min-width: 981px) {
  /* journey (#how): phone fills the pin, copy column vertically centered */
  .journey-phone .phone { max-width: min(470px, calc((100svh - 185px) * 0.472)); }
  .journey-grid { grid-template-columns: 1fr 1fr; align-items: center; }

  /* opflow: give the phone column its space back and fill it */
  .opflow-phone .phone { max-width: min(470px, calc((100svh - 195px) * 0.472)); }
  .opflow-grid { grid-template-columns: 1fr 1fr; }

  /* duo: two full-height phones side by side */
  .duo-side { flex: 0 0 auto; width: min(400px, calc((100svh - 230px) * 0.472)); }
  .duo-phones .phone { max-width: 100%; }
  .duo-phones { gap: clamp(24px, 3vw, 48px); }
  .duo-grid { grid-template-columns: 0.9fr 1.1fr; }

  /* gallery: frames sized by svh so the strip fills the pinned window */
  .gallery-item { width: calc((100svh - 250px) * 0.468); min-width: 224px; max-width: 360px; }
}

/* Pinned sections paint over whatever scrolls beneath them — transparent
   backgrounds let the next section ghost through mid-pin (founder: the
   horizontal scroll "comes up over the other screen"). Opaque + isolated. */
.journey, .opflow, .duo { position: relative; z-index: 2; }
.gallery { background: var(--bg); position: relative; z-index: 3; }
.gallery-pin { background: var(--bg); }

/* Tighten the dead band between #features and the gallery head. */
#features { padding-bottom: 8px; }
.gallery-head { margin-bottom: 18px; }
/* Founder web audit 2026-07-19: the desktop pin-scrub gallery reserved a
   full-viewport scroll runway that read as a screen-tall empty black band
   before "One night in DrinkLync". Drop the pin on desktop too (JS skips it)
   and let the strip scroll horizontally like it already does on mobile — no
   runway, no empty space. */
.gallery-pin { min-height: 0; justify-content: flex-start; padding: clamp(40px, 6vw, 84px) 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.gallery-pin::-webkit-scrollbar { display: none; }
.gallery-item { scroll-snap-align: start; }

/* Mobile round-2: bigger static mocks in the flattened sections. */
@media (max-width: 980px) {
  .opflow-phone .phone { max-width: 300px; }
  .duo-phones .phone { max-width: 100%; }
}

/* Pull the pinned sections' chrome tight so the mock owns the window. */
@media (min-width: 981px) {
  .journey-pin, .opflow-pin, .duo-pin { padding: calc(var(--nav-h) + 8px) 0 16px; }
  .journey-pin .eyebrow, .opflow-pin .eyebrow, .duo-pin .eyebrow { margin-bottom: 10px; }
  .ticket-rail { margin-bottom: 10px; }
  .opflow-role-rail { margin-bottom: 14px; }
}

/* Phone journey frame (founder 2026-10-26: "a bit low on the screen, feels
   off"). The pinned frame was min-height 100svh with the phone sized as
   100svh - 330px, but the phone nav alone is 118px, the five-pill rail
   wrapped to two rows and the 160px step box centred its copy, so the real
   chrome above the phone was ~450px. The pin grew ~160px taller than the
   screen and pinned top-aligned: the phone started below the middle of the
   screen and its bottom ~118px sat under the fold on every phone. Now, only
   while the pin is live (.motion-ready), the frame is exactly the small
   viewport (svh = Safari's toolbars showing), the rail fits one row, the
   steps stack in one grid cell so the box is as tall as the longest step
   (never a guessed min-height, never overflow into the phone), and the
   phone takes whatever height is left, so nothing is cut off and there is
   no dead band. Static / reduced-motion layout is untouched.
   Guard: tools/check-journey-frame.test.js. */
@media (max-width: 980px) {
  .journey.motion-ready .journey-pin { height: 100svh; min-height: 0; justify-content: flex-start; padding: calc(var(--nav-h) + 14px) 0 calc(14px + env(safe-area-inset-bottom, 0px)); }
  .journey.motion-ready .journey-pin > .wrap { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .journey.motion-ready .journey-pin .eyebrow { margin-bottom: 12px; }
  .journey.motion-ready .ticket-rail { gap: 4px; margin-bottom: 14px; }
  .journey.motion-ready .rail-step { padding: 7px 8px; letter-spacing: 0.04em; }
  .journey.motion-ready .rail-step.active .dot { display: none; }
  .journey.motion-ready .journey-grid { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
  .journey.motion-ready .journey-steps { flex: 0 0 auto; min-height: 0; display: grid; }
  .journey.motion-ready .journey-step { grid-area: 1 / 1; position: relative; inset: auto; justify-content: flex-start; }
  .journey.motion-ready .journey-step .j-num { margin-bottom: 8px; }
  .journey.motion-ready .journey-phone { flex: 1 1 0; min-height: 0; }
  .journey.motion-ready .journey-phone .phone { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: min(100%, calc(74vw * 932 / 440)); width: auto; max-width: none; }
}
/* Short visible viewports (iPhone SE with Safari's toolbars showing): two
   lines of copy so the phone keeps a readable size. */
@media (max-width: 980px) and (max-height: 700px) {
  .journey.motion-ready .journey-step p { -webkit-line-clamp: 2; }
}
/* ...and at the very shortest (SE + toolbars, ~548px) the rail already says
   what the eyebrow says; give its row to the phone. */
@media (max-width: 980px) and (max-height: 600px) {
  .journey.motion-ready .journey-pin .eyebrow { display: none; }
}

/* ---------- venues page pitch strip (bar-owner benefit case, 2026-07-18) ---------- */
/* Founder 2026-09-24: bars onboard from the very top of /venues — a green
   CTA above the headline, before anything else in the hero. */
.onboard-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin: 0 0 22px; }
.onboard-cta .btn-onboard { font-size: 17px; padding: 15px 26px; }
.onboard-cta-note { font-size: 14.5px; color: var(--muted); max-width: 52ch; }
.onboard-cta-note a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; display: inline-block; padding: 12px 0; margin: -12px 0; } /* 44px hit area, line height unchanged */
.pitch-strip { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.pitch-chip {
  flex: 1 1 200px; background: rgba(29, 185, 84, 0.05);
  border: 1px solid rgba(29, 185, 84, 0.35); border-radius: 14px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 3px;
}
.pitch-chip strong { font-family: var(--font-display); font-size: 20px; color: var(--green); }
.pitch-chip span { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: #aebbb2; }

/* Static reading order remains complete without GSAP/ScrollTrigger or when
   motion is reduced. Each section opts into overlap only after its own
   animation setup succeeds, so one failed timeline cannot blank the others. */
.journey:not(.motion-ready) .journey-steps,
.opflow:not(.motion-ready) .opflow-steps,
.duo:not(.motion-ready) .duo-steps { position: static; min-height: 0; display: flex; flex-direction: column; gap: 24px; }
.journey:not(.motion-ready) .journey-step,
.opflow:not(.motion-ready) .opflow-step,
.duo:not(.motion-ready) .duo-step { position: relative !important; inset: auto !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: none !important; }
.journey:not(.motion-ready) .journey-step p,
.opflow:not(.motion-ready) .opflow-step p,
.duo:not(.motion-ready) .duo-step p { display: block !important; overflow: visible !important; -webkit-line-clamp: unset !important; }
.journey:not(.motion-ready) .journey-screens img,
.opflow:not(.motion-ready) .opflow-screens img,
.duo:not(.motion-ready) .duo-screens img { opacity: 0 !important; visibility: hidden !important; }
.journey:not(.motion-ready) .journey-screens img:first-child,
.opflow:not(.motion-ready) .opflow-screens img:first-child,
.duo:not(.motion-ready) .duo-screens img:first-child { opacity: 1 !important; visibility: visible !important; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}


/* ================= 2026-09-13: app CTA, /math, night timeline, pricing fill =================
   Display headings on these surfaces use Sofia Sans (the wordmark face) so
   the page and the logo speak with one voice. Body stays Instrument Sans. */
.sofia { font-family: "Sofia Sans", var(--font-display); font-weight: 800; letter-spacing: -0.01em; line-height: 0.98; }

/* ---------- /app: store badges ---------- */
.ga-hero { max-width: 820px; display: grid; gap: 22px; }
.ga-h1 { font-size: clamp(46px, 8vw, 96px); margin: 0; text-wrap: balance; }
.ga-lede { font-size: clamp(17px, 2vw, 21px); line-height: 1.5; color: var(--muted); margin: 0; max-width: 40ch; }
.ga-meta { font-size: 14px; color: var(--muted); margin: 0; }
.store-badges { display: flex; gap: 14px; flex-wrap: wrap; align-items: stretch; }
.badge {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 64px; padding: 10px 22px 10px 16px; border-radius: 14px;
  border: 1px solid var(--line-strong); background: var(--ink); color: #04140a;
  text-decoration: none; transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.badge svg { width: 30px; height: 30px; flex: none; }
.badge .b-text { display: flex; flex-direction: column; line-height: 1.05; }
.badge .b-small { font-size: 11px; letter-spacing: 0.04em; opacity: 0.75; }
.badge .b-big { font-family: "Sofia Sans", var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -0.01em; }
a.badge:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 16px 40px -14px rgba(233, 242, 235, 0.35); }
.badge.is-green { background: var(--green); border-color: var(--green); }
a.badge.is-green:hover { background: var(--green-bright); }
/* Google Play: the public listing is not live yet (returns Not Found), so the
   badge is deliberately NOT a link. A dead store button is a false button. */
.badge.is-soon { background: transparent; color: var(--ink); border-style: dashed; cursor: default; }
.badge.is-soon .b-small { color: var(--green); opacity: 1; font-weight: 600; }
.badge.is-soon svg { opacity: 0.85; }
.ga-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 8px; }
.ga-step { position: relative; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(16, 22, 18, 0.72); overflow: hidden; display: flex; flex-direction: column; }
/* The step screenshots FIT: the shot box is sized from the phone instead of
   the phone being pushed into a 240px box it is 318px too tall for. That old
   fixed height, plus align-items:flex-end and overflow:hidden on the card,
   cut the top off every screenshot at every width. Founder, 2026-09-25: "the
   screenshots in this dont fit in there, make them fit properly."
   - height:auto + a full bottom pad means the whole device is on screen.
   - object-fit:contain means the image itself is never cropped either; the
     screens are 440x932 against a 440x932 frame, so nothing letterboxes, and
     the one 440x956 capture loses no UI instead of losing its bottom 2.5%.
   - the phone width is clamped to the card so it cannot overflow sideways on
     a phone-width viewport, where the grid collapses to one wide column. */
.ga-step .gs-shot { background: linear-gradient(180deg, rgba(29, 185, 84, 0.08), transparent 70%); display: flex; justify-content: center; align-items: center; padding: 26px; border-bottom: 1px solid var(--line); }
.ga-step .gs-shot .phone { width: 100%; max-width: min(150px, 100%); border-radius: 26px; padding: 6px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9); }
.ga-step .gs-shot .phone-screen { border-radius: 20px; }
.ga-step .gs-shot .phone-screen img { object-fit: contain; object-position: center; }
.ga-step .gs-body { padding: 24px 26px 28px; }
.ga-step .gs-n { font-family: "Sofia Sans", var(--font-display); font-weight: 800; font-size: 44px; line-height: 1; color: var(--green); margin-bottom: 10px; }
.ga-step h3 { font-size: 22px; margin-bottom: 8px; }
.ga-step p { color: var(--muted); font-size: 15px; }
.ga-value { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.ga-value div { background: var(--bg); padding: 30px 28px; }
.ga-value h3 { font-size: 20px; margin-bottom: 8px; }
.ga-value p { color: var(--muted); font-size: 15px; }
.ga-value svg { width: 26px; height: 26px; stroke: var(--green); fill: none; stroke-width: 1.7; margin-bottom: 18px; }
.qa { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 0; }
.qa div { border-top: 2px solid var(--green); padding-top: 18px; }
.qa dt { font-family: var(--font-display); font-weight: 700; font-size: 19px; margin-bottom: 8px; }
.qa dd { color: var(--muted); font-size: 15.5px; margin: 0; }
.ga-close { text-align: center; display: grid; justify-items: center; gap: 22px; }
.ga-close .store-badges { justify-content: center; }
.ga-close h2 { font-size: clamp(34px, 5vw, 64px); max-width: 16ch; }
@media (max-width: 980px) {
  .ga-steps, .ga-value, .qa { grid-template-columns: 1fr; }
  /* One column: the card is now full width, so cap the phone rather than the
     box. A 132px frame keeps the whole screenshot on a 360px phone with room
     for the card padding, and still crops nothing. */
  .ga-step .gs-shot { padding: 22px; }
  .ga-step .gs-shot .phone { max-width: min(132px, 42vw); }
}
@media (max-width: 480px) {
  .badge { flex: 1 1 100%; justify-content: center; }
}

/* ---------- /math: investment calculator ---------- */
.math-hero { padding: calc(var(--nav-h) + clamp(56px, 8vw, 100px)) 0 clamp(30px, 4vw, 50px); }
.math-hero h1 { font-size: clamp(44px, 7vw, 92px); max-width: 12ch; }
.math-hero .lede { margin-top: 20px; }
.math { display: grid; grid-template-columns: 380px 1fr; gap: 26px; align-items: start; }
.m-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 26px; display: flex; flex-direction: column; gap: 22px; position: sticky; top: calc(var(--nav-h) + 18px); }
.m-panel h2 { font-size: 20px; }
.m-panel .m-sub { font-size: 13.5px; color: var(--muted); margin-top: -12px; }
.m-field label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; color: var(--muted); margin-bottom: 10px; }
.m-field label output { font-family: var(--font-mono); color: var(--green); font-weight: 700; font-size: 15px; white-space: nowrap; }
.m-field input[type="range"] { width: 100%; appearance: none; -webkit-appearance: none; height: 44px; margin: 0; background: transparent; outline: none; cursor: pointer; } /* the INPUT is the hit box: 44px tall, the 5px track is drawn inside it; a 5px input measured 288x5 on a phone (2026-09-29) */
.m-field input[type="range"]::-webkit-slider-runnable-track { height: 5px; border-radius: 99px; background: rgba(233,242,235,0.12); }
.m-field input[type="range"]::-moz-range-track { height: 5px; border-radius: 99px; background: rgba(233,242,235,0.12); }
.m-field input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8.5px; border-radius: 50%; background: var(--green); border: 3px solid #04140a; box-shadow: 0 0 0 1.5px var(--green), 0 6px 18px -4px var(--green-glow); cursor: grab; }
.m-field input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--green); border: 3px solid #04140a; box-shadow: 0 0 0 1.5px var(--green); cursor: grab; }
.m-field input[type="range"]:focus-visible { outline: 2px solid var(--green); outline-offset: 6px; }
.m-divider { border: 0; border-top: 1px dashed var(--line-strong); margin: 2px 0; }
.m-toggle { display: flex; align-items: center; justify-content: space-between; gap: 14px; font-size: 14px; color: var(--muted); position: relative; cursor: pointer; }
.m-toggle strong { color: var(--ink); font-weight: 600; display: block; }
.m-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.m-toggle .sw { flex: none; width: 46px; height: 26px; border-radius: 999px; background: rgba(233, 242, 235, 0.14); position: relative; transition: background 0.2s ease; }
.m-toggle .sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); transition: transform 0.2s ease; }
.m-toggle input:checked + .sw { background: var(--green); }
.m-toggle input:checked + .sw::after { transform: translateX(20px); background: #04140a; }
.m-toggle input:focus-visible + .sw { outline: 2px solid var(--green); outline-offset: 3px; }
.m-board { display: grid; gap: 22px; min-width: 0; }
.m-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.m-card { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 30px; position: relative; overflow: hidden; }
.m-card.is-cost { border-color: var(--line-strong); }
.m-card.is-est { border-color: rgba(29, 185, 84, 0.45); box-shadow: 0 0 80px -40px var(--green-glow); }
.m-card .m-kicker { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 22px; }
.m-card .m-kicker h2 { font-size: 19px; }
.m-tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--muted); white-space: nowrap; }
.m-tag.is-green { color: var(--green); border-color: rgba(29, 185, 84, 0.5); }
.m-big { font-family: "Sofia Sans", var(--font-display); font-weight: 800; font-size: clamp(48px, 5.4vw, 76px); line-height: 0.95; letter-spacing: -0.01em; }
.m-big small { display: block; font-family: var(--font-body); font-weight: 500; font-size: 15px; color: var(--muted); letter-spacing: 0; margin-top: 10px; line-height: 1.3; }
.m-card.is-est .m-big { color: var(--green); }
.m-under { font-size: 14px; color: var(--muted); margin-top: 10px; max-width: 34ch; }
.m-rows { margin-top: 24px; }
.m-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 14.5px; color: var(--muted); }
.m-row strong { font-family: var(--font-mono); color: var(--ink); font-size: 15px; white-space: nowrap; }
.m-row.is-total { border-top: 1px solid var(--line-strong); color: var(--ink); }
.m-row.is-total strong { color: var(--green); }
/* Break-even bar: where tonight's estimated extra drinks sit against the
   number that covers the month. */
.m-be { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 30px; }
.m-be-head { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; flex-wrap: wrap; margin-bottom: 18px; }
.m-be-head h2 { font-size: 19px; }
.m-be-head span { font-size: 13.5px; color: var(--muted); }
.m-bar { position: relative; height: 54px; border-radius: 12px; background: rgba(233, 242, 235, 0.06); overflow: hidden; }
.m-bar .m-fill { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, rgba(29, 185, 84, 0.35), var(--green)); border-radius: 12px; transition: width 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
.m-bar .m-line { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--ink); transition: left 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
.m-bar .m-line::after { content: "break-even"; position: absolute; top: 50%; left: 8px; transform: translateY(-50%); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.m-bar .m-line.is-right::after { left: auto; right: 8px; }
.m-be-legend { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 18px; }
.m-be-legend div { border-top: 1px solid var(--line); padding-top: 12px; font-size: 13px; color: var(--muted); }
.m-be-legend strong { display: block; font-family: "Sofia Sans", var(--font-display); font-weight: 800; font-size: 28px; color: var(--ink); line-height: 1; margin-bottom: 6px; }
/* Peak two hours strip */
.m-peak { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.m-peak .m-card { padding: 26px 28px; }
.m-hours { display: flex; gap: 6px; align-items: flex-end; height: 120px; margin-top: 18px; }
.m-hours i { flex: 1; display: block; border-radius: 6px 6px 0 0; background: rgba(233, 242, 235, 0.14); position: relative; min-height: 6px; transition: height 0.3s ease; }
.m-hours i.is-peak { background: var(--green); }
.m-hours i.is-peak::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(4, 20, 10, 0.18) 6px 8px); border-radius: inherit; }
.m-hours-x { display: flex; gap: 6px; margin-top: 8px; }
.m-hours-x span { flex: 1; text-align: center; font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); letter-spacing: 0.04em; }
.m-assume { background: transparent; border: 1px dashed var(--line-strong); border-radius: 22px; padding: 26px 30px; }
.m-assume h2 { font-size: 18px; margin-bottom: 14px; }
.m-assume ol { padding-left: 20px; display: grid; gap: 10px; color: var(--muted); font-size: 15px; }
.m-assume li strong { color: var(--ink); font-weight: 600; }
.m-foot { font-size: 13px; color: var(--muted); max-width: 70ch; }
@media (max-width: 980px) {
  .math { grid-template-columns: 1fr; }
  .m-panel { position: static; }
  .m-cols, .m-peak { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .m-be-legend { grid-template-columns: 1fr; gap: 10px; }
  .m-card, .m-be, .m-assume, .m-panel { padding: 22px 20px; }
}

/* ---------- home: after the journey, the night in one line ---------- */
.night-line { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; margin-top: 14px; }
.night-line::before { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 1px; background: linear-gradient(90deg, var(--green), rgba(29, 185, 84, 0.25)); }
.night-stop { position: relative; padding-top: 26px; }
.night-stop::before { content: ""; position: absolute; top: 4px; left: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--bg); border: 2px solid var(--green); }
.night-stop time { font-family: var(--font-mono); font-size: 12px; color: var(--green); letter-spacing: 0.08em; display: block; margin-bottom: 8px; }
.night-stop h3 { font-size: 17px; margin-bottom: 6px; }
.night-stop p { font-size: 14px; color: var(--muted); }
.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.three .t-card { border: 1px solid var(--line); border-radius: var(--radius); background: rgba(16, 22, 18, 0.6); padding: 28px; display: grid; gap: 12px; align-content: start; }
.three .t-card .t-n { font-family: "Sofia Sans", var(--font-display); font-weight: 800; font-size: 40px; color: var(--green); line-height: 1; }
.three .t-card h3 { font-size: 21px; }
.three .t-card p { color: var(--muted); font-size: 15px; }
.three .t-card img { border-radius: 12px; border: 1px solid var(--line); aspect-ratio: 16 / 10; object-fit: cover; object-position: top; margin-top: 6px; width: 100%; }
.platforms { display: flex; flex-wrap: wrap; gap: 12px 30px; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 22px 0; }
.platforms span { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); white-space: nowrap; }
.platforms svg { width: 20px; height: 20px; stroke: var(--ink); fill: none; stroke-width: 1.6; }
.platforms .soon { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green); border: 1px dashed rgba(29, 185, 84, 0.5); padding: 2px 7px; border-radius: 999px; }
.faq-compact { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; border-top: 1px solid var(--line); }
.faq-compact details { border-bottom: 1px solid var(--line); }
.faq-compact summary { cursor: pointer; list-style: none; padding: 18px 34px 18px 0; font-family: var(--font-display); font-weight: 600; font-size: 17px; position: relative; }
.faq-compact summary::-webkit-details-marker { display: none; }
.faq-compact summary::after { content: "+"; position: absolute; right: 4px; top: 16px; color: var(--green); font-size: 22px; line-height: 1; transition: transform 0.2s ease; }
.faq-compact details[open] summary::after { transform: rotate(45deg); }
.faq-compact p { color: var(--muted); font-size: 16px; line-height: 1.65; padding-bottom: 20px; margin-top: -6px; max-width: 58ch; }
.rhythm { padding: clamp(64px, 8vw, 100px) 0; }
.rhythm-tight { padding: clamp(44px, 6vw, 72px) 0; }
@media (max-width: 980px) {
  .night-line { grid-template-columns: 1fr 1fr; gap: 26px 18px; }
  .night-line::before { display: none; }
  .three { grid-template-columns: 1fr; }
  .faq-compact { grid-template-columns: 1fr; }
  .platforms { justify-content: flex-start; }
}
@media (max-width: 560px) {
  .night-line { grid-template-columns: 1fr; }
}
/* pricing: the terms every plan shares, one strip under the hero */
.terms-strip { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(28px, 4vw, 40px); }
.terms-strip span { font-size: 13.5px; color: var(--ink); border: 1px solid var(--line-strong); border-radius: 999px; padding: 9px 16px; display: inline-flex; align-items: center; gap: 8px; }
.terms-strip span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex: none; }

/* ---------- venue-onboarding CTA (founder 2026-09-24: "make the CTA far
   more accessible on the website and usable and findable")
   -------------------------------------------------------------------------
   Three surfaces, one destination. All of them are real anchors with a real
   href, so they work with scripts disabled, are keyboard reachable, and are
   announced with where they go.

     .nav-cta-venue   the persistent green primary in the header, on every
                      page that has a header. On a phone it is the ONLY
                      button in the bar: .nav-cta-alt (the page's previous
                      header buttons) collapses into the disclosure menu,
                      which already lists every one of those destinations.
     .sticky-cta      a dismissible bottom bar on the venue-facing pages,
                      revealed once the hero has scrolled away and hidden
                      again over the footer so it can never sit on top of
                      the footer links.
     .cta-inline      one repeat at the end of each major section, so a
                      reader is never more than a screen from the next step.
   ---------------------------------------------------------------------- */
.nav-cta-venue { font-weight: 700; }
.nav .nav-cta-venue { min-height: 48px; }

.cta-inline {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  margin-top: clamp(26px, 3vw, 38px); padding-top: clamp(18px, 2vw, 24px);
  border-top: 1px solid var(--line);
}
.cta-inline p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.55; max-width: 46ch; }
.cta-inline .btn { min-height: 48px; }

.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  display: none; align-items: center; gap: 12px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(6, 8, 7, 0.96); backdrop-filter: blur(14px);
  border-top: 1px solid var(--line-strong);
}
.sticky-cta.is-visible { display: flex; }
.sticky-cta .btn { flex: 1 1 auto; justify-content: center; min-height: 48px; padding: 13px 18px; font-weight: 700; }
.sticky-cta-dismiss {
  flex: none; min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--line-strong); border-radius: 999px;
  color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer;
}
.sticky-cta-dismiss:hover { border-color: var(--green); color: var(--green); }
.sticky-cta-dismiss:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
/* The bar only ever exists on a phone; above that the header CTA is always
   on screen and a second one would be noise. */
@media (min-width: 861px) { .sticky-cta, .sticky-cta.is-visible { display: none; } }
/* Even if the script never runs, the footer keeps clear of the bar's height. */
@media (max-width: 860px) { body:has(.sticky-cta) footer { padding-bottom: 92px; } }

/* The bar fits the logo, the links and ONE button. Below 1261px the page's
   secondary button steps out so the venue CTA is never the one that gets
   clipped — measured worst case is /advertisers at 1201px, the width the
   disclosure menu hands back to the full nav. Every destination that steps
   out is already a link in the menu, which is why this hides rather than
   reflows. */
@media (max-width: 1260px) {
  .nav .nav-cta-alt { display: none; }
}
/* The guest door is the ghost button on a wide bar and a menu link once the
   buttons collapse, never both on one screen (founder 2026-10-24: "Get the
   app appears twice at the top"). */
@media (min-width: 1261px) {
  .nav-links .nav-link-compact { display: none; }
}
@media (max-width: 640px) {
  /* Full width, unless the page keeps a second CTA in the bar (/app keeps its
     store link, because that page IS the download). Then they share the row. */
  .nav .wrap:not(:has(.nav-cta-keep)) .nav-cta-venue { grid-column: 1 / -1; }
  .nav .nav-cta-venue { grid-row: 2; }
}

/* ---------- the full fee table (founder 2026-09-24) ----------
   "WE as a company don't take any of your profit - you pay us a flat fee,
   plus the insights add-on, plus per additional bar you set up." The site
   used to say "zero transaction fees", which reads as "no card fees at all"
   when the venue is in fact paying Stripe's normal rate on its own account.
   Every line DrinkLync bills is spelled out here, and the card-processing
   note travels with it so the two are never separated again. */
.fee-table { overflow-x: auto; border: 1px solid var(--line); border-radius: 18px; background: var(--surface, rgba(12,17,14,.72)); }
.fee-table:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.fee-table table { width: 100%; border-collapse: collapse; min-width: 560px; font-size: 14.5px; }
.fee-table th, .fee-table td { text-align: left; padding: 14px 18px; border-top: 1px solid var(--line); vertical-align: top; line-height: 1.55; }
.fee-table thead th { border-top: 0; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--green); font-weight: 700; white-space: nowrap; }
.fee-table tbody th { color: var(--ink); font-weight: 700; }
.fee-table td { color: var(--muted); }
.fee-table td.fee-num { color: var(--ink); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fee-table tr.fee-sep th, .fee-table tr.fee-sep td { border-top: 1px solid var(--line-strong); }
.fee-table tr.fee-sep td.fee-num { color: var(--green); }
.fee-note { margin: 18px 0 0; color: var(--muted); font-size: 14.5px; line-height: 1.7; max-width: 82ch; }
.fee-note strong { color: var(--ink); }
@media (max-width: 460px) { .fee-table th, .fee-table td { padding: 12px 14px; } }

/* ---------- one table system for the whole site (founder 2026-11-12) ----------
   "All tables need proper borders, some things need centered (table headers)."
   Every data table on the site sits in a .fee-table or .mv-scroll wrapper, so
   the shared look lives here once: a clear outer border, a tinted header row
   with a firm rule under it, row dividers, a hover row, and alignment that
   follows the column: .t-num right-aligns numbers (header and cells, tabular
   figures), .t-center centres short status columns, text stays left. On a
   phone a wide table scrolls sideways inside its border, and the green edge
   shadow shows there is more to see; it fades out at each end of the scroll. */
.fee-table, .mv-scroll {
  --tbl-bg: #0b100d;
  border: 1px solid var(--line-strong);
  background:
    linear-gradient(to right, var(--tbl-bg) 40%, rgba(11,16,13,0)) left center / 44px 100% no-repeat local,
    linear-gradient(to left, var(--tbl-bg) 40%, rgba(11,16,13,0)) right center / 44px 100% no-repeat local,
    linear-gradient(to right, rgba(29,185,84,.34), rgba(29,185,84,0)) left center / 16px 100% no-repeat scroll,
    linear-gradient(to left, rgba(29,185,84,.34), rgba(29,185,84,0)) right center / 16px 100% no-repeat scroll,
    var(--tbl-bg);
}
.fee-table thead th, .mv-scroll thead th {
  background: rgba(233,242,235,.05);
  border-bottom: 1px solid var(--line-strong);
  vertical-align: middle;
  padding-top: 13px; padding-bottom: 13px;
}
.fee-table tbody tr:not(.vs-group):hover, .mv-scroll tbody tr:hover { background: rgba(29,185,84,.055); }
.fee-table tbody:last-child > tr:last-child > th, .fee-table tbody:last-child > tr:last-child > td { border-bottom: 0; }
.fee-table .t-num, .mv-scroll .t-num { text-align: right !important; font-variant-numeric: tabular-nums; }
.fee-table .t-center, .mv-scroll .t-center { text-align: center !important; }
.fee-table table:not(.vs-table) tbody tr:nth-child(even) { background: rgba(233,242,235,.024); }
.fee-table .vs-group th { background: rgba(29,185,84,.05); }
.fee-table .vs-table thead th { white-space: normal; }


/* ---------- home: the value band, directly under the hero ----------
   Founder, 2026-09-25: "make the roi and value far more visible on the first
   page so they really see why its so good." Three scenario cards, then the
   three facts that keep them honest, then the way through to the full model.
   Never one figure on its own: the grid is built for exactly three. */
.vb { padding-top: clamp(44px, 5vw, 72px); padding-bottom: clamp(44px, 5vw, 72px); border-bottom: 1px solid var(--line); }
.vb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: clamp(26px, 3.4vw, 40px); }
.vb-card { border: 1px solid var(--line); border-radius: var(--radius); background: rgba(16, 22, 18, 0.72); padding: 22px 22px 24px; }
.vb-card.is-base { border-color: rgba(29, 185, 84, 0.45); background: linear-gradient(180deg, rgba(29, 185, 84, 0.09), rgba(16, 22, 18, 0.72) 70%); }
.vb-tag { display: inline-block; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--green); border: 1px solid rgba(29, 185, 84, 0.4); border-radius: 999px; padding: 4px 10px; }
.vb-n { display: block; margin-top: 16px; font-family: "Sofia Sans", var(--font-display), system-ui, sans-serif; font-weight: 800; font-size: clamp(38px, 5vw, 56px); line-height: 1; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.vb-card.is-base .vb-n { color: var(--green); }
.vb-u { display: block; margin-top: 8px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.vb-card p { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); line-height: 1.6; }
.vb-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-top: 16px; }
.vb-facts > div { background: var(--bg); padding: 22px 22px 24px; }
.vb-facts strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--ink); margin-bottom: 8px; }
.vb-facts span { display: block; font-size: 14px; color: var(--muted); line-height: 1.62; }
.vb-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(22px, 3vw, 32px); }
@media (max-width: 980px) {
  .vb-grid, .vb-facts { grid-template-columns: 1fr; }
  /* Full-width stacked buttons. white-space and min-width are both needed:
     .btn sets nowrap, and a nowrap flex item refuses to shrink below its
     content, which pushed a long label 45px past a 390px viewport. */
  .vb-cta .btn { flex: 1 1 100%; min-width: 0; justify-content: center; text-align: center; white-space: normal; }
}

/* ---------- /faq: the questions page, linked from every footer ----------
   Founder, 2026-09-25: "we should also put a FAQ tab at the bottom or
   somewhere to answer questions." The answers are mirrored from the operator
   FAQ the app already maintains, and a guard keeps the two identical. */
.faq-page-hero { padding: calc(var(--nav-h) + clamp(48px, 7vw, 88px)) 0 clamp(24px, 3vw, 40px); }
.faq-page-hero h1 { font-size: clamp(40px, 6.4vw, 78px); max-width: 15ch; }
.faq-page-hero .lede { margin-top: 20px; max-width: 70ch; }
.faq-cats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.faq-cats a { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--ink); border: 1px solid var(--line-strong); border-radius: 999px; padding: 9px 16px; min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; }
.faq-cats a:hover, .faq-cats a:focus-visible { border-color: var(--green); color: var(--green); }
.faq-group { margin-top: clamp(40px, 5vw, 64px); }
.faq-group h2 { font-size: clamp(24px, 3vw, 34px); margin-bottom: 6px; }
.faq-group > p { color: var(--muted); font-size: 15px; margin-bottom: 20px; max-width: 70ch; }
.faq-page .faq-list { border-top: 1px solid var(--line); }
.faq-page .faq-item { border-bottom: 1px solid var(--line); }
.faq-page .faq-item summary { min-height: 56px; }
.faq-footnote { margin-top: clamp(40px, 5vw, 64px); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 26px; }
.faq-footnote p { color: var(--muted); font-size: 14.5px; line-height: 1.65; margin: 0 0 14px; }
.faq-footnote p:last-child { margin-bottom: 0; }

/* The Insights add-on checkbox on /venues sat in an unstyled label: a 20px box
   in a ~22px row, under the 44px tap floor at 390px (LL-4522). The LABEL is the
   tap target, so the row takes the floor; the box keeps its size. */
.mv-check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  cursor: pointer;
}
.mv-check input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 0;
  flex: 0 0 auto;
}

/* ---------- Two audiences, two paths (homepage, 2026-10-08) ---------- */
.paths { padding: clamp(40px, 6vw, 80px) 0 clamp(20px, 3vw, 40px); position: relative; }
.paths-title { font-size: clamp(26px, 3vw, 40px); margin-bottom: clamp(20px, 3vw, 32px); }
.paths-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.path-card { display: grid; grid-template-columns: 38% 1fr; border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.path-img { width: 100%; height: 100%; min-height: 220px; object-fit: cover; background: #000; }
.path-body { padding: 24px 22px; display: flex; flex-direction: column; gap: 10px; }
.path-tag { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green); }
.path-body h3 { font-family: "Sofia Sans", var(--font-display); font-weight: 800; font-size: clamp(24px, 2.4vw, 30px); letter-spacing: -0.01em; }
.path-body p { color: var(--muted); font-size: 15.5px; line-height: 1.55; }
.path-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: auto; padding-top: 6px; }
.path-actions .btn { min-height: 48px; }
.path-link { display: inline-flex; align-items: center; min-height: 48px; color: var(--green); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.paths-more { margin-top: 18px; color: var(--muted); font-size: 15px; }
.paths-more a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 860px) {
  .paths-grid { grid-template-columns: 1fr; }
  .path-card { grid-template-columns: 1fr; }
  .path-img { min-height: 0; height: 190px; object-position: 50% 42%; }
  .path-actions .btn { flex: 1 1 100%; justify-content: center; }
}

/* ---------- Guest pages: thumb-reachable "Get the app" (2026-10-08) ----------
   /app and /nashville only. Hidden until the hero's store buttons scroll out
   of view, hidden again when the closing store buttons are on screen, and
   never shown above 860px where the header button is always in reach.
   js/guest-sticky.js toggles .is-on; with scripts off it never appears. */
.guest-sticky { display: none; }
@media (max-width: 860px) {
  .guest-sticky.is-on { display: block; position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 90; }
  .guest-sticky .btn { width: 100%; min-height: 52px; justify-content: center; font-size: 17px; box-shadow: 0 14px 40px -12px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(4, 20, 10, 0.4); }
}

/* A ratings card must fit the phone gutter rather than widen its grid track. */
.rating-band > * { min-width: 0; }
.rating-band .eyebrow { max-width: 100%; overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .rating-demo { padding: 16px; }
}
.problem-grid > * { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .chart .bar::after { white-space: normal; width: max-content; max-width: 100px; }
}

/* Product previews: each role has an image or readable evidence, not an empty tile. */
.launch-preview { aspect-ratio: 440 / 940; border: 1px solid var(--line-strong); border-radius: 26px; background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; text-align: center; }
.gallery-splash .launch-preview img { width: 74%; height: auto; aspect-ratio: 1; object-fit: contain; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.launch-preview p { font-size: clamp(11px, 1vw, 15px); color: var(--ink); margin: 14px 0 24px; white-space: nowrap; }
.launch-preview i { font-style: normal; color: var(--muted); }
.launch-progress { width: 76%; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--ink), #111 70%); margin-bottom: 18px; }
.launch-preview small { font-size: 12px; color: var(--muted); }
.system-intro { max-width: 58ch; margin: -16px 0 32px; }
.system-showcase { gap: 24px; }
.system-showcase .system-card { padding: 0; display: flex; flex-direction: column; min-width: 0; }
.system-visual { height: clamp(250px, 24vw, 330px); position: relative; overflow: hidden; background: #080d0b; border-bottom: 1px solid var(--line); }
.system-visual-guest { background: radial-gradient(ellipse at 20% 50%, #233a24, #080d0b 75%); }
.system-drink { position: absolute; left: -5%; top: 0; width: 65%; height: 100%; object-fit: cover; mask-image: linear-gradient(to right, #000 65%, transparent); }
.system-phone { position: absolute; top: 22px; right: 10%; width: 34%; height: auto; border: 1px solid var(--line-strong); border-radius: 20px; box-shadow: 0 14px 32px #0009; transform: rotate(5deg); }
.system-visual-caption { position: absolute; inset: auto 0 0; padding: 36px 24px 18px; background: linear-gradient(transparent, #080d0b); color: var(--ink); font-size: 14px; font-weight: 600; }
.system-visual-station img { display: block; width: calc(100% - 44px); height: calc(100% - 44px); margin: 18px auto; object-fit: contain; object-position: center top; border-radius: 10px; }
.system-copy { padding: 26px 28px 28px; display: flex; flex-direction: column; align-items: flex-start; flex: 1; }
.system-showcase .s-tag { position: static; margin-bottom: 12px; font-size: 11px; color: var(--muted); }
.system-showcase h3 { font-size: clamp(23px, 2.4vw, 30px); margin-bottom: 10px; }
.system-showcase .system-copy p { font-size: 15px; line-height: 1.65; margin-bottom: 18px; }
.system-detail { display: block; font-size: 13px; color: var(--ink); margin-top: auto; }
.system-detail i { font-style: normal; color: var(--green); margin: 0 8px; }
.system-showcase .s-cta { opacity: 1; letter-spacing: .08em; font-size: 12px; min-height: 44px; margin-top: 12px; }
.system-manager-cta { border: 0; padding: 0; background: transparent; cursor: pointer; }
.system-manager-cta:focus-visible { outline: 2px solid var(--green); outline-offset: 6px; }
.system-metrics { padding: 24px; display: flex; flex-direction: column; }
.system-metrics-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; font-weight: 600; }
.system-sample { font-size: 11px; color: var(--muted); border: 1px solid var(--line-strong); padding: 4px 8px; border-radius: 99px; font-weight: 400; }
.system-chart { display: flex; gap: 12px; height: 180px; flex: 1; min-height: 140px; margin-top: 18px; padding-top: 20px; background: repeating-linear-gradient(to top, transparent 0, transparent 39px, #ffffff0a 40px); }
.system-chart > div { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; padding-bottom: 24px; }
.system-chart b { font: 12px var(--font-mono); color: var(--muted); margin-bottom: 7px; }
.system-chart i { width: 70%; max-width: 44px; height: var(--bar-height); min-height: 15px; border-radius: 4px 4px 0 0; background: #28633e; flex-shrink: 1; }
.system-chart .system-chart-peak i { background: var(--green); }
.system-chart .system-chart-peak b { color: var(--ink); }
.system-chart span { position: absolute; bottom: 0; white-space: nowrap; font: 11px var(--font-mono); color: var(--muted); }
.system-showcase .system-chart-note { font-size: 12px; color: var(--muted); margin: 14px 0 0; }
@media (max-width: 900px) { .connected-grid { grid-template-columns: 1fr; } .system-copy { padding: 22px; } }
@media (max-width: 600px) { .system-visual { height: 270px; } .system-chart { gap: 8px; } }
@media (prefers-reduced-motion: reduce) { .system-showcase .system-card { transition: none; } .system-showcase .system-card:hover { transform: none; } }
.system-visual-station { background: radial-gradient(ellipse at center, #173a24, #080d0b 75%); }
.system-visual-station img { width: 62%; max-width: 360px; height: auto; margin: 18px auto 0; object-fit: contain; }
/* All bars share one plot height and a zero baseline. Labels do not compress the peak. */
.system-chart > div { display: block; height: 100%; padding: 0; }
.system-chart i { display: block; position: absolute; bottom: 24px; left: 15%; height: calc((100% - 48px) * var(--bar-ratio)); }
.system-chart b { position: absolute; width: 100%; text-align: center; bottom: calc(24px + (100% - 48px) * var(--bar-ratio)); }
.system-chart span { width: 100%; text-align: center; }

/* Readable value surfaces and responsive charts with a shared zero baseline. */
.value-bars { display: grid; gap: 18px; margin: 24px 0; }
.value-bars > div { min-width: 0; }
.value-bars span { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; color: var(--ink); font-size: 14px; }
.value-bars b { font-family: var(--font-mono); font-size: 14px; }
.value-bars i { display: block; height: 20px; background: var(--green); border-radius: 0 5px 5px 0; transition: width 450ms ease; }
.value-bars [data-chart-bar="conservative"], .value-bars [data-chart-bar="now"], #ad-spend-bar { background: #70897a; }
.value-bars [data-chart-bar="cost"] { background: #d9e9df; }
.value-bars [data-chart-bar="upside"] { background: #4cbe80; }
.built-for-cta { justify-content: center; text-align: center; margin: 40px auto 0; }
.built-for-cta p { max-width: 48ch; }
.staff-value { padding: 24px; border: 1px solid var(--line-strong); border-radius: 18px; background: #111c15; margin-top: 28px; }
.staff-value h4 { font-size: 24px; margin: 12px 0; }
.staff-value p { color: var(--muted); line-height: 1.65; }
.staff-value small { display: block; margin-top: 14px; color: var(--muted); line-height: 1.5; }
.staff-value .btn { margin-top: 18px; white-space: normal; }
.staff-value-steps { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.staff-value-steps span { border: 1px solid var(--line-strong); padding: 8px 16px; border-radius: 8px; color: var(--green); }
@media (prefers-reduced-motion: reduce) { .value-bars i { transition: none; } }

/* Inline text links that are a page's only route to a next step: grow the
   tap area to 44px without moving the line (walk 2026-11-04; same trick as
   privacy.html's cookie-choice link). */
.tap-inline { display: inline-block; padding: 12px 0; margin: -12px 0; }

/* ---------- every table on the site (founder 2026-11-12) ----------
   "all tables need proper borders, some things need centered to make them
   look better (like table headers etc)". One shared treatment so a new table
   inherits it: a clear outer border, a divider under every row and between
   columns, a tinted header row, amounts right-aligned in header and cell,
   short status labels centered, comfortable padding. On a phone each row
   stacks into a labelled block instead of scrolling sideways (js/site.js
   copies the header text onto each cell and adds .tbl-stack; with scripts off
   the table scrolls inside its own border, never the page).
   Selectors start at `main` and name the element so they outrank the
   page-level style blocks on /pricing and /venues without !important. */
main .fee-table, main .mv-scroll { border: 1px solid var(--line-strong); border-radius: 16px; overflow-x: auto; background: #0b100d; }
main table { border-collapse: collapse; width: 100%; }
main table th, main table td { border-top: 1px solid rgba(233, 242, 235, 0.13); border-bottom: 0; padding: 14px 18px; vertical-align: top; line-height: 1.55; text-align: left; }
main table th + th, main table td + td, main table th + td { border-left: 1px solid var(--line); }
main table thead th { border-top: 0; border-bottom: 1px solid var(--line-strong); background: rgba(29, 185, 84, 0.09); color: var(--green); font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; vertical-align: middle; white-space: normal; padding-top: 13px; padding-bottom: 13px; }
main table tbody tr:first-child > * { border-top: 0; }
main table tbody + tbody tr:first-child > * { border-top: 1px solid var(--line-strong); }
main table tbody tr:hover > td, main table tbody tr:hover > th[scope="row"] { background: rgba(29, 185, 84, 0.04); }
main table caption { text-align: left; padding: 16px 18px 14px; border-bottom: 1px solid var(--line-strong); }

/* amounts: right-aligned, header and cell, in tabular figures */
main table .is-num, main table td.fee-num, main table td.mv-num { text-align: right; font-variant-numeric: tabular-nums; }
main table thead th.is-num { text-align: right; }
/* short labels and statuses: centered, header and cell */
main table .is-center { text-align: center; }

/* /pricing fee table: the "share of your sales" row closes the table */
main .fee-table table tr.fee-sep > * { border-top: 1px solid var(--line-strong); background: rgba(29, 185, 84, 0.05); }
/* /pricing value stack (generated markup, so the columns are named here):
   the size table is a label plus four amount columns; the contents table
   ends in an Included column that reads best centered. */
main .fee-table table.vs-table th, main .fee-table table.vs-table td { padding: 14px 18px; border-bottom: 0; }
main .fee-table table.vs-table:has(td.vs-gain) thead th:not(:first-child),
main .fee-table table.vs-table:has(td.vs-gain) tbody td { text-align: right; font-variant-numeric: tabular-nums; }
main .fee-table table.vs-table:has(td.vs-inc) thead th:last-child,
main .fee-table table.vs-table td.vs-inc { text-align: center; }
main .fee-table table.vs-table tr.vs-group th { padding-top: 12px; padding-bottom: 12px; background: rgba(233, 242, 235, 0.04); border-top: 1px solid var(--line-strong); }
/* /venues: Low, Base and High are short figures, centered under their heads;
   the capability table's Status pill is centered too. */
main .mv-assume .mv-scroll table thead th:nth-child(n+2):nth-child(-n+4),
main .mv-assume .mv-scroll table td.mv-num { text-align: center; }
main .mv-scroll table:has(.mv-pill) thead th:nth-child(2),
main .mv-scroll table:has(.mv-pill) tbody td:nth-child(2) { text-align: center; }

@media (max-width: 640px) {
  main table th, main table td { padding: 12px 14px; }
  /* stacked rows: one block per row, each value beside its column name */
  main table.tbl-stack { min-width: 0; display: block; }
  main table.tbl-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  main table.tbl-stack tbody, main table.tbl-stack tr { display: block; }
  main table.tbl-stack caption { display: block; }
  main table.tbl-stack tr { border-top: 1px solid var(--line-strong); padding: 6px 0; }
  main table.tbl-stack tbody:first-of-type tr:first-child { border-top: 0; }
  main table.tbl-stack th, main table.tbl-stack td,
  main .fee-table table.vs-table.tbl-stack th, main .fee-table table.vs-table.tbl-stack td { display: block; border: 0; padding: 7px 14px; text-align: left; white-space: normal; background: none; }
  main table.tbl-stack th[scope="row"] { font-size: 15.5px; padding-top: 10px; }
  /* a sentence sits under its column name; an amount or a status sits beside it */
  main table.tbl-stack td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 3px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--green); font-weight: 700; line-height: 1.5; text-align: left; }
  main table.tbl-stack td[data-label].is-num, main table.tbl-stack td[data-label].fee-num, main table.tbl-stack td[data-label].mv-num,
  main table.tbl-stack:has(.mv-pill) td[data-label]:nth-child(2),
  main .fee-table table.vs-table.tbl-stack:has(td.vs-gain) td[data-label], main .fee-table table.vs-table.tbl-stack td.vs-inc { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; text-align: right; }
  main table.tbl-stack td[data-label].is-num::before, main table.tbl-stack td[data-label].fee-num::before, main table.tbl-stack td[data-label].mv-num::before,
  main table.tbl-stack:has(.mv-pill) td[data-label]:nth-child(2)::before,
  main .fee-table table.vs-table.tbl-stack:has(td.vs-gain) td[data-label]::before, main .fee-table table.vs-table.tbl-stack td.vs-inc::before { flex: 0 1 46%; margin-bottom: 0; }
  main table.tbl-stack tr.vs-group, main table.tbl-stack tr.fee-sep { padding: 0; }
  main .fee-table table.vs-table.tbl-stack tr.vs-group th { padding: 10px 14px; background: rgba(29, 185, 84, 0.09); }
  main .fee-table table.tbl-stack tr.fee-sep > * { background: none; border: 0; }
  main .fee-table table.tbl-stack tr.fee-sep { background: rgba(29, 185, 84, 0.05); padding: 6px 0; }
}

/* header cells wrap rather than forcing a wide table to scroll on a desktop */
main .fee-table table thead th, main .mv-scroll table thead th { white-space: normal; }