/* KNOW — Warm Editorial. Mirrors constants/theme.ts so web and app read as one brand. */

:root {
  --cream: #faf6ef;
  --paper: #f5f0e8;
  --paper-dk: #ede7dc;
  --line: #ddd5c8;

  --ink-deep: #1a1410;
  --ink-soft: #3d3228;
  --ink-muted: #7a6a56;
  --ink-dim: #a89880;

  --accent: #b5541e;
  --acc-soft: #f0e0d4;
  --forest: #1a3526;
  --forest-mid: #264d38;
  --amber: #b87c1e;

  --night: #0d0b09;
  --night-soft: #1a1512;
  --night-mid: #2a2118;

  --font-head: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --measure: 68ch;
  --pad: clamp(1.25rem, 4vw, 2.5rem);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink-deep);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Layout ---------- */

.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--pad);
}

.wrap-wide { max-width: 74rem; margin: 0 auto; padding: 0 var(--pad); }

/* ---------- Masthead ---------- */

.masthead {
  border-bottom: 1px solid var(--line);
  background: var(--cream);
  position: sticky;
  top: 0;
  z-index: 10;
}

.masthead-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  flex-wrap: wrap;
}

.wordmark {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 1.0625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-deep);
  text-decoration: none;
}

.wordmark:hover { color: var(--accent); }

.nav {
  display: flex;
  gap: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.nav a {
  color: var(--ink-muted);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}

.nav a:hover, .nav a[aria-current='page'] {
  color: var(--ink-deep);
  border-bottom-color: var(--accent);
}

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

.hero {
  padding: clamp(3.5rem, 11vw, 7rem) 0 clamp(2.5rem, 7vw, 4.5rem);
  border-bottom: 1px solid var(--line);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1.25rem;
}

.hero h1 {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(2.5rem, 7.5vw, 4.25rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0 0 1.5rem;
  max-width: 16ch;
}

.hero .lede {
  font-size: clamp(1.125rem, 2.4vw, 1.3125rem);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 54ch;
  margin: 0;
}

/* ---------- Sections ---------- */

.section {
  padding: clamp(3rem, 8vw, 5rem) 0;
  border-bottom: 1px solid var(--line);
}

.section:last-of-type { border-bottom: 0; }

.section-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: 0 0 2rem;
}

h2 {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 2.75rem 0 0.875rem;
}

h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.0625rem;
  margin: 2rem 0 0.5rem;
  color: var(--ink-deep);
}

p { margin: 0 0 1.125rem; }

a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--forest); }

ul { margin: 0 0 1.125rem; padding-left: 1.25rem; }
li { margin-bottom: 0.5rem; }
li::marker { color: var(--ink-dim); }

strong { font-weight: 600; color: var(--ink-deep); }

/* ---------- Steps (landing) ---------- */

.steps {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: step;
}

.steps li {
  counter-increment: step;
  margin: 0;
  padding-top: 1.25rem;
  border-top: 2px solid var(--forest);
}

.steps li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 0.625rem;
}

.steps h3 { margin: 0 0 0.375rem; }
.steps p { margin: 0; color: var(--ink-muted); font-size: 0.9375rem; }

/* ---------- Principles ---------- */

.principle {
  border-left: 2px solid var(--line);
  padding: 0.125rem 0 0.125rem 1.25rem;
  margin-bottom: 1.75rem;
}
.principle:last-child { margin-bottom: 0; }
.principle h3 { margin-top: 0; }
.principle p { margin: 0; color: var(--ink-muted); }

/* ---------- Legal doc pages ---------- */

.doc-head {
  padding: clamp(2.5rem, 7vw, 4rem) 0 2rem;
  border-bottom: 1px solid var(--line);
}

.doc-head h1 {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(2rem, 5vw, 2.875rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 0.875rem;
}

.dateline {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
  margin: 0;
}

.doc { padding: 0 0 clamp(3rem, 8vw, 5rem); }

.doc h2:first-of-type { margin-top: 2.25rem; }

/* Callout — used for the plain-language summary + the location promise */
.callout {
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--forest);
  border-radius: 3px;
  padding: 1.375rem 1.5rem;
  margin: 2rem 0;
}

.callout p:last-child { margin-bottom: 0; }

.callout .callout-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--forest-mid);
  margin: 0 0 0.75rem;
}

.callout-accent { border-left-color: var(--accent); }
.callout-accent .callout-label { color: var(--accent); }

/* ---------- Data table ---------- */

.table-scroll {
  overflow-x: auto;
  margin: 1.5rem 0 2rem;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--paper);
}

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 34rem;
  font-size: 0.9375rem;
}

th, td {
  text-align: left;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

th {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  background: var(--paper-dk);
  white-space: nowrap;
}

tbody tr:last-child td { border-bottom: 0; }

/* ---------- Footer ---------- */

.footer {
  background: var(--forest);
  color: var(--paper);
  padding: clamp(2.5rem, 6vw, 3.5rem) 0;
  margin-top: 0;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  flex-wrap: wrap;
}

.footer .wordmark { color: var(--cream); }
.footer .wordmark:hover { color: var(--amber); }

.footer-nav {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.footer-nav a { color: var(--paper-dk); text-decoration: none; }
.footer-nav a:hover { color: var(--amber); }

.colophon {
  font-size: 0.8125rem;
  color: var(--ink-dim);
  margin: 1.75rem 0 0;
  width: 100%;
}

/* ---------- Motion / a11y ---------- */

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

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--forest);
  color: var(--cream);
  padding: 0.75rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  z-index: 20;
}
.skip:focus { left: 0; }

/* ══════════════════════════════════════════════════════════════
   LANDING — product surfaces. Added Jul 20 2026.
   Everything here is CSS-only: the CSP is script-src 'none' and
   that stays true. Interactivity uses :checked, :hover, <details>
   and scroll-driven animation — no JS, no exceptions.
   ══════════════════════════════════════════════════════════════ */

/* ---------- Hero layout with device ---------- */

.hero-grid {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4rem);
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 60rem) {
  .hero-grid { grid-template-columns: 1.15fr 0.85fr; }
}

.hero-cta {
  display: flex;
  gap: 0.875rem;
  flex-wrap: wrap;
  margin-top: 2rem;
  align-items: center;
}

.btn {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.875rem 1.5rem;
  border-radius: 3px;
  border: 1px solid transparent;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn-primary { background: var(--accent); color: var(--cream); }
.btn-primary:hover { background: #9c4718; color: var(--cream); }

.btn-ghost { border-color: var(--line); color: var(--ink-soft); }
.btn-ghost:hover { border-color: var(--forest); color: var(--forest); background: var(--paper); }

.cta-note {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
  margin: 0.875rem 0 0;
}

/* ---------- Proof strip ---------- */

.proof {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1.5rem 2rem;
  padding: 1.75rem 0 0;
  margin-top: 2.25rem;
  border-top: 1px solid var(--line);
}

.proof-item .n {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--forest);
}

.proof-item .k {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-top: 0.5rem;
}

/* ---------- Phone device ---------- */

.device {
  width: min(19rem, 100%);
  margin: 0 auto;
  background: var(--night);
  border-radius: 2.25rem;
  padding: 0.5rem;
  box-shadow: 0 1px 2px rgba(26,20,16,.10), 0 12px 32px -8px rgba(26,20,16,.28);
}

.device-screen {
  background: var(--cream);
  border-radius: 1.85rem;
  overflow: hidden;
  position: relative;
  aspect-ratio: 9 / 19;
  display: flex;
  flex-direction: column;
}

.device-notch {
  position: absolute;
  top: 0.5rem; left: 50%;
  transform: translateX(-50%);
  width: 4.5rem; height: 1.1rem;
  background: var(--night);
  border-radius: 1rem;
  z-index: 4;
}

.screen-head {
  padding: 2.25rem 1.125rem 0.75rem;
  border-bottom: 1px solid var(--line);
}

.screen-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.3rem;
}

.screen-title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.15;
  margin: 0;
  color: var(--ink-deep);
}

.screen-body {
  padding: 0.875rem 1.125rem;
  overflow: hidden;
  flex: 1;
}

/* ---------- Venue / stop cards inside device ---------- */

.vcard {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.625rem 0.75rem;
  margin-bottom: 0.5rem;
}

.vcard-top {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.2rem;
}

.vcard-name {
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--ink-deep);
  flex: 1;
  line-height: 1.2;
}

.vcard-slot {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  color: var(--accent);
  letter-spacing: 0.05em;
}

.vcard-why {
  font-size: 0.625rem;
  line-height: 1.4;
  color: var(--ink-muted);
  margin: 0;
}

.vcard-meta {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-top: 0.3rem;
}

/* Capacity dots — exact app values (constants: quiet/moderate/busy/packed) */
.dot {
  width: 0.4rem; height: 0.4rem;
  border-radius: 50%;
  flex: none;
  display: inline-block;
}
.dot-quiet    { background: #4caf7d; }
.dot-moderate { background: #b87c1e; }
.dot-busy     { background: #e07c3a; }
.dot-packed   { background: #c0392b; }
.dot-unknown  { background: #888888; }

.walk-leg {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  padding: 0.15rem 0 0.35rem 0.4rem;
}

.walk-leg::before {
  content: '';
  width: 1px; height: 0.75rem;
  background: var(--line);
  margin-right: 0.25rem;
}

/* ---------- CSS-only screen switcher ---------- */

.switch { margin: 0; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }

.switch-tabs {
  display: flex;
  gap: 0.375rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.switch-tabs label {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  color: var(--ink-muted);
  cursor: pointer;
  background: var(--cream);
  transition: all 0.15s ease;
  user-select: none;
}

.switch-tabs label:hover { border-color: var(--ink-dim); color: var(--ink-deep); }

.switch-panel { display: none; }

#scr-plan:checked  ~ .switch-tabs label[for="scr-plan"],
#scr-live:checked  ~ .switch-tabs label[for="scr-live"],
#scr-nudge:checked ~ .switch-tabs label[for="scr-nudge"] {
  background: var(--forest);
  border-color: var(--forest);
  color: var(--cream);
}

#scr-plan:checked  ~ .switch-stage .panel-plan,
#scr-live:checked  ~ .switch-stage .panel-live,
#scr-nudge:checked ~ .switch-stage .panel-nudge { display: block; }

/* ---------- Nudge / lock-screen ---------- */

.lockscreen {
  background: var(--night);
  height: 100%;
  padding: 3rem 0.875rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.lock-time {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 2.5rem;
  color: var(--cream);
  text-align: center;
  line-height: 1;
  margin: 0;
}

.lock-date {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  text-align: center;
  margin: 0 0 1rem;
}

.notif {
  background: rgba(250,246,239,0.94);
  border-radius: 0.75rem;
  padding: 0.625rem 0.75rem;
}

.notif-app {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.25rem;
}

.notif-text {
  font-size: 0.6875rem;
  line-height: 1.45;
  color: var(--ink-deep);
  margin: 0;
}

/* ---------- Feature rows ---------- */

.feature {
  display: grid;
  gap: clamp(1.75rem, 5vw, 3rem);
  grid-template-columns: 1fr;
  align-items: center;
  padding: clamp(2rem, 5vw, 3rem) 0;
  border-bottom: 1px solid var(--line);
}

.feature:last-of-type { border-bottom: 0; }

@media (min-width: 54rem) {
  .feature { grid-template-columns: 1fr 1fr; }
  .feature.flip .feature-visual { order: -1; }
}

.feature h3 {
  font-family: var(--font-head);
  font-size: clamp(1.25rem, 2.6vw, 1.5rem);
  font-weight: 600;
  margin: 0.5rem 0 0.75rem;
  letter-spacing: -0.01em;
}

.feature p { color: var(--ink-soft); margin-bottom: 0; }

.feature-visual {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1.25rem;
}

/* ---------- Capacity legend ---------- */

.legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: 0.875rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.legend li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0;
}

.legend .dot { width: 0.55rem; height: 0.55rem; }

/* ---------- FAQ (native details, no JS) ---------- */

.faq { border-top: 1px solid var(--line); }

.faq details {
  border-bottom: 1px solid var(--line);
  padding: 0;
}

.faq summary {
  cursor: pointer;
  padding: 1.125rem 2rem 1.125rem 0;
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink-deep);
  list-style: none;
  position: relative;
  transition: color 0.15s ease;
}

.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }

.faq summary::after {
  content: '+';
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 1.125rem;
  color: var(--ink-dim);
  transition: transform 0.2s ease;
}

.faq details[open] summary::after { content: '\2013'; }

.faq details p {
  color: var(--ink-muted);
  font-size: 0.9375rem;
  margin: 0 0 1.25rem;
  max-width: 60ch;
}

/* ---------- Closing CTA ---------- */

.closer {
  background: var(--forest);
  color: var(--paper);
  padding: clamp(3rem, 8vw, 5rem) 0;
  text-align: center;
}

.closer h2 {
  font-family: var(--font-head);
  color: var(--cream);
  margin: 0 0 1rem;
  font-size: clamp(1.75rem, 4.5vw, 2.5rem);
}

.closer p {
  color: var(--paper-dk);
  max-width: 46ch;
  margin: 0 auto 2rem;
}

.closer .btn-primary { background: var(--accent); }
.closer .btn-primary:hover { background: var(--amber); }

.closer .cta-note { color: rgba(245,240,232,0.55); }

/* ---------- Scroll reveal (progressive, reduced-motion safe) ---------- */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      animation: reveal-in linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 26%;
    }
    @keyframes reveal-in {
      from { opacity: 0; transform: translateY(1.25rem); }
      to   { opacity: 1; transform: none; }
    }
  }
}

/* ══════════════════════════════════════════════════════════════
   REAL SCREENSHOTS + narrative sections. Added Jul 20 2026.
   Still zero JS. Every interaction below is :checked or <details>.
   ══════════════════════════════════════════════════════════════ */

.shot {
  width: min(19rem, 100%);
  margin: 0 auto;
  background: var(--night);
  border-radius: 2.25rem;
  padding: 0.45rem;
  box-shadow: 0 1px 2px rgba(26,20,16,.10), 0 18px 44px -12px rgba(26,20,16,.34);
}

.shot-screen {
  border-radius: 1.9rem;
  overflow: hidden;
  aspect-ratio: 9 / 18.4;
  background: var(--cream);
  position: relative;
}

.shot-screen img {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* Clips the profile row (name, age and avatar) out of frame. The concierge card
   is the strongest thing on that screen and sits directly below it.
   Done with GEOMETRY rather than a magic offset: object-fit:cover fills the
   frame's width, so the image overflows vertically by exactly
   (width / 0.46) - frameHeight. Choosing 9/16.4 makes that overflow ~16% of the
   image, which is the header band; `object-position: center bottom` then pins
   the bottom edge so the overflow is taken off the TOP.
   Earlier attempts using margin-top/top percentages either resolved against the
   wrong axis (width, not height) or forced a taller box that made cover crop the
   SIDES — visible as "OUR SPOTS" instead of "YOUR SPOTS". */
.shot-screen.crop-head {
  aspect-ratio: 9 / 16.4;
}

.shot-screen.crop-head img {
  object-position: center bottom;
}

.shot-cap {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
  text-align: center;
  margin: 1rem 0 0;
}

/* ---------- Annotated walkthrough ---------- */

.annot {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 56rem) {
  .annot { grid-template-columns: 0.9fr 1.1fr; }
}

.annot-list { counter-reset: annot; list-style: none; padding: 0; margin: 0; }

.annot-list li {
  counter-increment: annot;
  position: relative;
  padding-left: 2.75rem;
  margin-bottom: 1.75rem;
}

.annot-list li::before {
  content: counter(annot);
  position: absolute;
  left: 0; top: 0.05rem;
  width: 1.75rem; height: 1.75rem;
  border-radius: 50%;
  background: var(--forest);
  color: var(--cream);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  display: grid;
  place-items: center;
}

.annot-list h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  margin: 0 0 0.35rem;
  color: var(--ink-deep);
}

.annot-list p { margin: 0; color: var(--ink-muted); font-size: 0.9375rem; }

.annot-list .quote {
  display: block;
  margin-top: 0.5rem;
  padding-left: 0.75rem;
  border-left: 2px solid var(--acc-soft);
  font-style: italic;
  color: var(--ink-soft);
}

/* ---------- Signal ranking ---------- */

.rank { list-style: none; padding: 0; margin: 0; }

.rank li {
  border-left: 3px solid var(--line);
  padding: 0.75rem 0 0.75rem 1.125rem;
  margin-bottom: 0.875rem;
}

.rank li.r1 { border-left-color: var(--forest); }
.rank li.r2 { border-left-color: var(--amber); }
.rank li.r3 { border-left-color: var(--line); }

.rank .tier {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  display: block;
  margin-bottom: 0.25rem;
}

.rank strong { display: block; margin-bottom: 0.2rem; }
.rank p { margin: 0; color: var(--ink-muted); font-size: 0.9375rem; }

/* ---------- CSS-only before/after ---------- */

.compare { margin: 2rem 0 0; }
.compare input { position: absolute; opacity: 0; pointer-events: none; }

.compare-tabs {
  display: flex;
  gap: 0.375rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

.compare-tabs label {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  color: var(--ink-muted);
  cursor: pointer;
  user-select: none;
  transition: all .15s ease;
}

.compare-tabs label:hover { border-color: var(--ink-dim); color: var(--ink-deep); }

.compare-panel { display: none; }

#cmp-before:checked ~ .compare-tabs label[for="cmp-before"],
#cmp-after:checked  ~ .compare-tabs label[for="cmp-after"] {
  background: var(--forest); border-color: var(--forest); color: var(--cream);
}

#cmp-before:checked ~ .compare-stage .cmp-before,
#cmp-after:checked  ~ .compare-stage .cmp-after { display: block; }

.said {
  background: var(--night-soft);
  color: var(--paper);
  border-radius: 0.9rem 0.9rem 0.9rem 0.2rem;
  padding: 0.75rem 1rem;
  font-size: 0.9375rem;
  max-width: 34ch;
  margin: 0 0 1.25rem auto;
}

/* ---------- Split feature with a real shot ---------- */

.split {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 56rem) {
  .split { grid-template-columns: 1.05fr 0.95fr; }
  .split.flip .split-visual { order: -1; }
}

/* ---------- Big stat, WHOOP-style ---------- */

.bigstat {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(3rem, 9vw, 5rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--forest);
  margin: 0 0 0.5rem;
}

.bigstat-k {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: 0;
}

/* ---------- Capacity legend, expanded ---------- */

.caps { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }

.caps li {
  display: grid;
  grid-template-columns: 0.9rem 6.5rem 1fr;
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--line);
  margin: 0;
  font-size: 0.9375rem;
}

.caps li:last-child { border-bottom: 0; }

.caps .dot { width: 0.65rem; height: 0.65rem; align-self: center; }

.caps .nm {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-deep);
}

.caps .ds { color: var(--ink-muted); font-size: 0.875rem; }

.hexnote {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--ink-dim);
  letter-spacing: 0.05em;
}

/* ---------- Ask-anything grid ---------- */

.asks {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.ask {
  margin: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  padding: 0.875rem 1rem;
  font-size: 0.9375rem;
  color: var(--ink-soft);
  transition: border-color .15s ease, background .15s ease;
}

.ask:hover { background: var(--paper-dk); border-left-color: var(--forest); }

/* ══════════════════════════════════════════════════════════════
   TOUR — interface recreations, not screenshots. Added Jul 20 2026.
   Real screenshots of these screens carry the founder's face, name,
   age, school, industry and hometown; the profile screens are almost
   nothing BUT personal data. Recreations ship an ideal-state narrative
   with zero PII, scale crisply, theme correctly, and weigh far less.
   Still zero JS — CSP script-src 'none' is untouched.
   ══════════════════════════════════════════════════════════════ */

.tour-grid {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4rem);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  align-items: start;
}

.tour-item { display: flex; flex-direction: column; gap: 1rem; }

.tour-cap { max-width: 34ch; }

.tour-cap h3 {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.125rem;
  margin: 0 0 0.375rem;
  color: var(--ink-deep);
  letter-spacing: -0.01em;
}

.tour-cap p { margin: 0; font-size: 0.9375rem; color: var(--ink-muted); }

/* ---------- Phone shell ---------- */

.ph {
  width: min(19rem, 100%);
  background: var(--night);
  border-radius: 2.25rem;
  padding: 0.45rem;
  box-shadow: 0 1px 2px rgba(26,20,16,.10), 0 18px 44px -12px rgba(26,20,16,.30);
  flex: none;
}

.ph-screen {
  background: var(--cream);
  border-radius: 1.9rem;
  overflow: hidden;
  aspect-ratio: 9 / 18.4;
  display: flex;
  flex-direction: column;
  position: relative;
  font-size: 0.6875rem;
}

.ph-notch {
  position: absolute; top: 0.45rem; left: 50%;
  transform: translateX(-50%);
  width: 4.25rem; height: 1rem;
  background: var(--night); border-radius: 1rem; z-index: 5;
}

.ph-body { flex: 1; overflow: hidden; padding: 2rem 0.75rem 0; }
.ph-body.flush { padding: 2rem 0 0; }
.ph-body.dark { background: var(--forest); }

/* eyebrow / title inside a screen */
.ph-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.4375rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-dim); margin: 0 0 0.15rem;
}
.ph-h1 {
  font-family: var(--font-head); font-weight: 600;
  font-size: 1.0625rem; line-height: 1.1; margin: 0 0 0.5rem;
  color: var(--ink-deep);
}
.ph-h2 {
  font-family: var(--font-head); font-weight: 600;
  font-size: 0.875rem; margin: 0 0 0.25rem; color: var(--ink-deep);
}

/* agent card */
.ph-agent {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 6px; padding: 0.5rem 0.55rem; margin-bottom: 0.6rem;
}
.ph-agent-top { display: flex; align-items: center; gap: 0.3rem; margin-bottom: 0.3rem; }
.ph-mark {
  width: 0.85rem; height: 0.85rem; border-radius: 3px;
  background: var(--forest); color: var(--cream);
  font-family: var(--font-head); font-size: 0.5rem;
  display: grid; place-items: center; flex: none;
}
.ph-agent-name {
  font-family: var(--font-mono); font-size: 0.4375rem;
  letter-spacing: 0.14em; color: var(--ink-deep); flex: 1;
}
.ph-agent-time { font-family: var(--font-mono); font-size: 0.4375rem; color: var(--ink-dim); }
.ph-agent p { margin: 0; font-size: 0.5625rem; line-height: 1.45; color: var(--ink-soft); }
.ph-reply {
  font-family: var(--font-mono); font-size: 0.4375rem;
  color: var(--accent); margin-top: 0.3rem; letter-spacing: 0.06em;
}

/* hero venue card */
.ph-hero {
  border-radius: 6px; overflow: hidden; position: relative;
  background: linear-gradient(160deg, #2a2118 0%, #0d0b09 100%);
  padding: 0.75rem 0.6rem 0.55rem; min-height: 6.5rem;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.ph-badge {
  position: absolute; top: 0.5rem; left: 0.6rem;
  background: var(--accent); color: var(--cream);
  font-family: var(--font-mono); font-size: 0.4rem;
  letter-spacing: 0.12em; padding: 0.15rem 0.35rem; border-radius: 2px;
}
.ph-hero-name {
  font-family: var(--font-head); font-weight: 600;
  font-size: 1.125rem; color: var(--cream); margin: 0 0 0.1rem; line-height: 1;
}
.ph-hero-meta {
  font-family: var(--font-mono); font-size: 0.4rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(250,246,239,.72); margin: 0 0 0.25rem;
}
.ph-hero-why { font-size: 0.5rem; color: rgba(250,246,239,.9); margin: 0; line-height: 1.35; }

/* list rows */
.ph-row {
  display: flex; align-items: center; gap: 0.45rem;
  padding: 0.4rem 0; border-bottom: 1px solid var(--line);
}
.ph-row:last-child { border-bottom: 0; }
.ph-thumb {
  width: 1.6rem; height: 1.6rem; border-radius: 4px; flex: none;
  background: var(--paper-dk); display: grid; place-items: center;
  font-family: var(--font-head); font-size: 0.6rem; color: var(--ink-dim);
}
.ph-row-mid { flex: 1; min-width: 0; }
.ph-row-name { font-family: var(--font-head); font-weight: 600; font-size: 0.6875rem; color: var(--ink-deep); }
.ph-row-sub { font-family: var(--font-mono); font-size: 0.4375rem; color: var(--ink-muted); margin-top: 0.05rem; }
.ph-row-right { text-align: right; flex: none; }
.ph-anchor { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--amber); display: block; }
.ph-dist { font-family: var(--font-mono); font-size: 0.375rem; color: var(--ink-dim); }

/* stat pair (venue detail) */
.ph-stats { display: flex; gap: 1.25rem; align-items: flex-end; margin: 0.5rem 0 0.35rem; }
.ph-stat-n { font-family: var(--font-head); font-weight: 600; font-size: 1.125rem; color: var(--ink-deep); line-height: 1; }
.ph-stat-k { font-family: var(--font-mono); font-size: 0.4rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-dim); }

/* vibe tag chips */
.ph-tags { display: flex; flex-wrap: wrap; gap: 0.2rem; margin-bottom: 0.4rem; }
.ph-tag {
  border: 1px solid var(--line); border-radius: 100px;
  padding: 0.12rem 0.35rem; font-size: 0.4375rem; color: var(--ink-muted);
  background: var(--cream);
}

/* hour-by-hour chart */
.ph-chart {
  border: 1px solid var(--line); border-radius: 5px;
  padding: 0.45rem 0.5rem; background: var(--paper); margin-bottom: 0.4rem;
}
.ph-chart-label {
  font-family: var(--font-mono); font-size: 0.4rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-dim); margin: 0 0 0.4rem;
}
.ph-bars { display: flex; align-items: flex-end; gap: 0.15rem; height: 1.75rem; }
.ph-bars span { flex: 1; background: var(--paper-dk); border-radius: 1px; }
.ph-bars span.on { background: var(--forest); }
.ph-axis {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 0.35rem; color: var(--ink-dim); margin-top: 0.2rem;
}
.ph-peak { font-family: var(--font-mono); font-size: 0.4375rem; color: var(--accent); margin: 0.25rem 0 0; }

/* offer strip */
.ph-offer {
  border: 1px solid var(--acc-soft); background: #faf2ea;
  border-radius: 5px; padding: 0.4rem 0.5rem; margin-bottom: 0.4rem;
}
.ph-offer-k { font-family: var(--font-mono); font-size: 0.4rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin: 0 0 0.1rem; }
.ph-offer-v { font-size: 0.6875rem; font-weight: 600; color: var(--ink-deep); margin: 0; }

/* generic tile / cta */
.ph-tile {
  border: 1px solid var(--line); border-radius: 5px; background: var(--paper);
  padding: 0.45rem 0.5rem; margin-bottom: 0.35rem;
}
.ph-tile-t { font-weight: 600; font-size: 0.625rem; color: var(--ink-deep); margin: 0; }
.ph-tile-s { font-size: 0.5rem; color: var(--ink-muted); margin: 0.05rem 0 0; }

.ph-cta {
  background: var(--forest); color: var(--cream);
  font-family: var(--font-mono); font-size: 0.5rem; letter-spacing: 0.14em;
  text-transform: uppercase; text-align: center;
  padding: 0.45rem; border-radius: 4px; margin-top: 0.35rem;
}
.ph-cta.ghost { background: transparent; border: 1px solid var(--line); color: var(--ink-soft); }

/* status pill */
.ph-pill {
  display: inline-flex; align-items: center; gap: 0.25rem;
  border: 1px solid var(--line); border-radius: 100px;
  padding: 0.12rem 0.4rem; font-family: var(--font-mono);
  font-size: 0.4rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-muted); background: var(--paper); margin-bottom: 0.3rem;
}

/* choice cards (crowd report / check-in) */
.ph-choices { display: flex; gap: 0.3rem; margin: 0.5rem 0; }
.ph-choice {
  flex: 1; border: 1px solid var(--line); border-radius: 5px;
  padding: 0.5rem 0.2rem; text-align: center; background: var(--paper);
}
.ph-choice.sel { border-color: var(--forest); background: var(--acc-soft); }
.ph-choice-e { font-size: 0.8rem; display: block; }
.ph-choice-t { font-weight: 600; font-size: 0.5625rem; color: var(--ink-deep); display: block; margin-top: 0.15rem; }
.ph-choice-s { font-size: 0.4rem; color: var(--ink-muted); display: block; }

/* toggle row */
.ph-toggle {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.4rem 0; border-bottom: 1px solid var(--line);
  font-size: 0.5625rem; color: var(--ink-deep);
}
.ph-switch {
  width: 1.5rem; height: 0.8rem; border-radius: 100px;
  background: var(--accent); position: relative; flex: none;
}
.ph-switch::after {
  content: ''; position: absolute; top: 0.1rem; right: 0.1rem;
  width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--cream);
}
.ph-switch.off { background: var(--line); }
.ph-switch.off::after { right: auto; left: 0.1rem; }

/* ride providers */
.ph-ride { display: flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0; border-bottom: 1px solid var(--line); }
.ph-ride-logo { width: 1.4rem; height: 1.4rem; border-radius: 4px; flex: none; }
.ph-ride-mid { flex: 1; }
.ph-ride-n { font-weight: 600; font-size: 0.625rem; color: var(--ink-deep); }
.ph-ride-s { font-size: 0.4375rem; color: var(--ink-muted); }
.ph-ride-t { font-family: var(--font-mono); font-size: 0.5rem; color: var(--ink-muted); }
.ph-new {
  font-family: var(--font-mono); font-size: 0.35rem; letter-spacing: 0.1em;
  background: var(--accent); color: var(--cream); padding: 0.05rem 0.2rem;
  border-radius: 2px; margin-left: 0.2rem;
}

/* feed post */
.ph-post-head { display: flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.75rem; }
.ph-av { width: 1.25rem; height: 1.25rem; border-radius: 50%; display: grid; place-items: center; color: var(--cream); font-weight: 600; font-size: 0.5rem; flex: none; }
.ph-post-n { font-weight: 600; font-size: 0.5625rem; color: var(--ink-deep); }
.ph-post-m { font-family: var(--font-mono); font-size: 0.4rem; color: var(--ink-muted); }
.ph-post-img { height: 5.5rem; background: linear-gradient(150deg, #3a2a1a, #0d0b09); }
.ph-post-cap { padding: 0.3rem 0.75rem; font-size: 0.5rem; color: var(--ink-soft); }

/* tab bar */
.ph-tabs {
  display: flex; align-items: center; justify-content: space-around;
  border-top: 1px solid var(--line); padding: 0.35rem 0 0.5rem;
  background: var(--paper); margin-top: auto;
}
.ph-tab { font-family: var(--font-mono); font-size: 0.375rem; letter-spacing: 0.06em; color: var(--ink-dim); text-align: center; }
.ph-tab.on { color: var(--accent); }
.ph-tab-cam { width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--night); }

/* map */
.ph-map { flex: 1; background: #e8e6e0; position: relative; overflow: hidden; }
.ph-map::before {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, transparent 49.5%, #dcdad3 49.5%, #dcdad3 50.5%, transparent 50.5%),
    linear-gradient(0deg, transparent 39.5%, #dcdad3 39.5%, #dcdad3 40.5%, transparent 40.5%),
    linear-gradient(60deg, transparent 69.5%, #d3e4d6 69.5%, #d3e4d6 71%, transparent 71%);
}
.ph-pin {
  position: absolute; width: 0.7rem; height: 0.7rem; border-radius: 50%;
  border: 2px solid var(--cream); box-shadow: 0 1px 3px rgba(0,0,0,.25);
}

/* Real captured screenshots on the tour (onboarding + profile). The crop keeps
   the top 90% of a device capture, so the frame is a touch taller than the
   9:18.4 recreation shells. */
/* Screenshots show FULLY — contain, never crop, so the whole screen is legible.
   A phone-tall frame on the app's near-black so any letterboxing reads as bezel. */
.shot-real .shot-screen { aspect-ratio: 9 / 19.5; background: var(--night); }
.shot-real .shot-screen img { display:block; width:100%; height:100%; object-fit:contain; object-position:center; }

/* ---------- Step-01 recreation on forest (matches the app icon) ---------- */
.ph-forest { background: var(--forest); }
.ph-forest .ph-prog { height: 2px; background: rgba(250,246,239,.18); }
.ph-forest .ph-prog span { display:block; height:2px; width:12.5%; background: var(--accent); }
.ph-forest .ph-inner { padding: 2.4rem 1.1rem 0; }
.ph-forest .ph-step {
  font-family: var(--font-mono); font-size: 0.5rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: rgba(250,246,239,.55); margin: 0 0 1.4rem;
}
.ph-forest .ph-name-h {
  font-family: var(--font-head); font-weight: 600; font-size: 1.85rem;
  line-height: 1.05; color: var(--cream); margin: 0 0 0.55rem; letter-spacing: -0.01em;
}
.ph-forest .ph-name-sub {
  font-size: 0.6875rem; line-height: 1.5; color: rgba(250,246,239,.7);
  margin: 0 0 1.5rem; max-width: 24ch;
}
.ph-forest .ph-field {
  border: 1px solid rgba(250,246,239,.28); border-radius: 3px;
  background: rgba(250,246,239,.06); padding: 0.7rem 0.8rem;
  font-size: 0.75rem; color: rgba(250,246,239,.5);
}
.ph-forest .ph-continue {
  margin-top: auto; margin-bottom: 1rem;
  background: var(--accent); color: var(--cream);
  font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: 0.16em;
  text-transform: uppercase; text-align: center; padding: 0.7rem; border-radius: 3px;
}

/* ---------- App-icon brand mark ---------- */
.brandmark {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: 2rem;
}
.brandmark img {
  width: 4.25rem; height: 4.25rem; border-radius: 1.1rem;
  box-shadow: 0 6px 18px -6px rgba(26,53,38,.5);
}
.brandmark-txt h3 {
  font-family: var(--font-head); font-weight: 600; font-size: 1.25rem;
  margin: 0 0 0.2rem; color: var(--ink-deep);
}
.brandmark-txt p { margin: 0; font-size: 0.9375rem; color: var(--ink-muted); }

/* ══════════════════════════════════════════════════════════════
   FOREST HERO — the app's splash, as the site's opening. Jul 20.
   ══════════════════════════════════════════════════════════════ */
.hero-forest {
  background: var(--forest);
  color: var(--cream);
  padding: clamp(2.5rem, 7vw, 4.5rem) 0 clamp(3rem, 8vw, 5rem);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hero-forest .wrap { position: relative; z-index: 1; }

.hero-masthead {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono); font-size: 0.6875rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(250,246,239,.5);
  border-bottom: 1px solid rgba(250,246,239,.14);
  padding-bottom: 1.25rem; margin-bottom: clamp(2.5rem, 7vw, 4.5rem);
}
.hero-masthead span:nth-child(2) { color: rgba(250,246,239,.72); }

.hero-wordmark {
  font-family: var(--font-head); font-weight: 600;
  font-size: clamp(4rem, 17vw, 9rem); line-height: 0.92;
  letter-spacing: 0.01em; color: var(--cream);
  margin: 0 0 1.75rem;
}

.hero-rule {
  width: 3rem; height: 1px; background: var(--accent);
  margin: 0 auto 1.75rem;
}

.hero-tagline {
  font-family: var(--font-head); font-weight: 600;
  font-size: clamp(1.6rem, 4.5vw, 2.5rem); line-height: 1.1;
  color: var(--cream); margin: 0 0 1rem; letter-spacing: -0.01em;
}
.hero-tagline em { font-style: italic; color: var(--amber); margin-right: 0.25em; }

.hero-blurb {
  font-size: clamp(1.0625rem, 2.4vw, 1.25rem); line-height: 1.55;
  color: rgba(250,246,239,.75); max-width: 34ch; margin: 0 auto 2.25rem;
}

.hero-forest .hero-cta { justify-content: center; }
.hero-forest .btn-primary { background: var(--accent); color: var(--cream); }
.hero-forest .btn-primary:hover { background: var(--amber); }
.hero-forest .btn-ghost {
  border-color: rgba(250,246,239,.3); color: var(--cream);
}
.hero-forest .btn-ghost:hover { border-color: var(--cream); background: rgba(250,246,239,.08); color: var(--cream); }
.hero-forest .cta-note { color: rgba(250,246,239,.45); }

.hero-proof {
  display: flex; justify-content: center; gap: clamp(2rem, 8vw, 4.5rem);
  margin-top: 3rem; padding-top: 2rem;
  border-top: 1px solid rgba(250,246,239,.14);
}
.hero-proof .n {
  display: block; font-family: var(--font-head); font-weight: 600;
  font-size: clamp(1.75rem, 5vw, 2.5rem); color: var(--cream); line-height: 1;
}
.hero-proof .k {
  display: block; font-family: var(--font-mono); font-size: 0.625rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(250,246,239,.5); margin-top: 0.5rem;
}

/* A faint oversized K watermark, like the app icon behind the splash */
.hero-forest::before {
  content: "K"; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-46%); font-family: var(--font-head);
  font-weight: 600; font-size: 44rem; line-height: 1;
  color: rgba(250,246,239,.03); z-index: 0; pointer-events: none;
}

/* ---------- Hero → content bridge (S1) ---------- */
.section-bridge {
  display: flex; justify-content: center;
  padding: clamp(2.5rem, 7vw, 4rem) 0 0;
}
.section-bridge span { width: 2.5rem; height: 2px; background: var(--accent); display: block; }

/* checkin.jpg is a wide bottom-sheet capture (1112x1500, ~0.74 aspect), not a
   full phone-tall screen — the standard 9/19.5 shot-real frame letterboxed it
   badly (huge black gap from the near-black frame bg showing through). Give
   it its own aspect so it fills the frame with no gap. Fixed post-launch S3. */
.shot-wide .shot-screen { aspect-ratio: 1112 / 1500; background: var(--cream); }

/* ══════════════════════════════════════════════════════════════
   WAITLIST FORM — replaces the mailto CTA. Real email capture, still
   zero JS: a plain <form method="post"> to a Supabase edge function,
   scoped into form-action by the CSP (was 'none', now 'self' + the
   one Supabase origin — see web/_headers). Both usages (hero, closer)
   sit on forest, so one treatment covers both. Added Jul 21 2026.
   ══════════════════════════════════════════════════════════════ */
.wl-form {
  display: flex; gap: 0.625rem; width: 100%; max-width: 30rem;
  margin: 0 auto;
}
.wl-email {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--font-body); font-size: 0.9375rem;
  color: var(--cream); background: rgba(250,246,239,.08);
  border: 1px solid rgba(250,246,239,.28); border-radius: 3px;
  padding: 0.875rem 1rem;
}
.wl-email::placeholder { color: rgba(250,246,239,.45); }
.wl-email:focus { outline: none; border-color: var(--accent); background: rgba(250,246,239,.12); }
.wl-submit {
  flex: 0 0 auto;
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--cream); background: var(--accent);
  border: 1px solid transparent; border-radius: 3px; padding: 0 1.25rem;
  cursor: pointer; transition: background 0.15s ease;
}
.wl-submit:hover { background: var(--amber); }
.wl-hp {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
@media (max-width: 30rem) {
  .wl-form { flex-direction: column; }
  .wl-submit { padding: 0.875rem 1.25rem; }
}

/* Header wordmark → app icon. Footer keeps the plain text mark: the icon's
   own forest-green tile would disappear into the footer's forest background,
   so the icon reads cleanly only on the cream masthead. */
.masthead .wordmark {
  display: inline-flex; align-items: center;
}
.wordmark-icon {
  display: block; width: 2.125rem; height: 2.125rem;
  border-radius: 22%;
}