/* Localsville — the localsville.com stylesheet.
   Warm, light design language shared with the Localsville app.
   Self-hosted fonts (see /assets/fonts/OFL.txt); the only script on the
   site is the /join invite-code display; no external requests, no
   trackers. Legal pages share this design system via article.legal,
   .notice, .lede and .meta. */

/* ---------- Fonts (self-hosted, SIL OFL — see /assets/fonts/OFL.txt) ---- */
@font-face {
  font-family: "Nunito";
  src: url("/assets/fonts/Nunito-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/assets/fonts/PlusJakartaSans-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ------------------------------------------------------- */
:root {
  /* brand ramp */
  --brand-50: #EFF6FF;
  --brand-100: #DBEAFE;
  --brand-200: #BFDBFE;
  --brand-600: #2563EB;   /* primary actions */
  --brand-700: #1D4ED8;   /* text-brand / links (AAA) */
  --brand-800: #1E40AF;   /* pressed */
  /* clay neutrals (warm) */
  --clay-50: #FBF7F3;     /* bg-primary — page ground, same as the app */
  --clay-100: #F3ECE3;    /* bg-surface-alt, chips, skeletons */
  --clay-200: #E5D9CA;    /* border-subtle, hairlines */
  --clay-300: #CDBFA7;    /* border-default */
  --clay-400: #B09880;    /* decorative tertiary only — too light for text */
  --clay-500: #8C7560;
  --clay-600: #6B5745;    /* text-secondary */
  --clay-700: #4E3D30;
  --clay-800: #3A2B20;    /* text-primary */
  --clay-900: #251A12;    /* near-black (bezels, photo viewer) */
  /* sage — success, distance, Place accents */
  --sage-100: #EBF0EA;
  --sage-400: #6B9266;
  --sage-600: #3D6339;
  /* semantic */
  --bg: var(--clay-50);
  --surface: #FFFFFF;
  --surface-alt: var(--clay-100);
  --ink: var(--clay-800);
  --ink-2: var(--clay-600);
  --line: var(--clay-200);
  --link: var(--brand-700);
  --blue: var(--brand-600);   /* legacy alias */
  --dark: var(--clay-800);    /* legacy alias (was navy; app has no navy) */
  --muted: var(--clay-600);   /* legacy alias */
  --warm: var(--clay-100);    /* legacy alias */
  /* radii */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-full: 999px;
  /* warm clay-tinted shadows — never cool grey */
  --shadow-subtle: 0 1px 4px rgba(58, 43, 32, 0.06);
  --shadow-default: 0 2px 8px rgba(58, 43, 32, 0.10);
  --shadow-elevated: 0 4px 16px rgba(58, 43, 32, 0.14);
  --focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.24);
  /* type */
  --font-display: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-ui: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ---------- Base --------------------------------------------------------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
}
img { max-width: 100%; height: auto; }
a { color: var(--link); text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--brand-600); outline-offset: 2px;
  box-shadow: var(--focus-ring); border-radius: var(--r-sm);
  text-decoration: none;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* App type-scale mapping: Nunito 800 for display sizes, Nunito 700 at
   20–24px, Plus Jakarta Sans 600 below that (headingMd/Sm are PJS in-app). */
h1, h2 { font-family: var(--font-display); color: var(--ink); }
h1 { font-size: 34px; line-height: 1.1; letter-spacing: -0.01em; font-weight: 800; margin: 0 0 12px; }
h2 { font-size: 24px; line-height: 1.15; letter-spacing: -0.005em; font-weight: 700; margin: 36px 0 8px; }
h3 { font-family: var(--font-ui); color: var(--ink); font-size: 18px; line-height: 1.3; font-weight: 600; margin: 28px 0 6px; }
p, li { color: var(--ink); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--surface); color: var(--link); padding: 10px 16px;
  border-radius: var(--r-sm); box-shadow: var(--shadow-default);
}
.skip-link:focus { left: 12px; top: 12px; }

/* Quiet uppercase overline — the app's structural voice ("COMMUNITY") */
.eyebrow {
  display: block;
  font-family: var(--font-ui);
  font-size: 13px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--clay-600); margin: 0 0 10px;
}

.lede { font-size: 20px; line-height: 1.55; color: var(--ink-2); max-width: 34em; margin: 0 auto 28px; }
.lede--left { margin-left: 0; text-align: left; }
.meta { color: var(--ink-2); font-size: 15px; }
.hero-actions + .meta { margin-top: 16px; }

/* ---------- Legal article layout (720px reading measure) ----------------- */
main { max-width: 720px; margin: 0 auto; padding: 32px 20px 56px; }

article.legal h1 { font-size: 28px; }
article.legal { overflow-wrap: break-word; }
article.legal table { border-collapse: collapse; width: 100%; font-size: 15px; }
@media (max-width: 480px) {
  /* Keep native table semantics; anywhere-wrapping shrinks min-content
     width so the auto table layout fits narrow viewports. */
  article.legal th, article.legal td { overflow-wrap: anywhere; }
}
article.legal th, article.legal td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.notice {
  background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--brand-600);
  border-radius: var(--r-sm); padding: 12px 16px; margin: 20px 0; font-size: 15px; color: var(--ink-2);
}
address { font-style: normal; }


/* ---------- Site shell --------------------------------------------------- */
.lv-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.lv-header .inner {
  max-width: 1120px; margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.lv-wordmark { display: inline-flex; align-items: center; }
.lv-wordmark img { height: 26px; width: auto; display: block; }
.lv-nav { display: flex; align-items: center; gap: 26px; }
.lv-nav a { color: var(--clay-700); font-size: 15px; font-weight: 500; }
.lv-nav a:hover { color: var(--brand-700); text-decoration: none; }
.lv-nav .nav-cta {
  background: var(--brand-600); color: #fff; font-weight: 600; font-size: 15px;
  padding: 9px 18px; border-radius: var(--r-md);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.28);
}
.lv-nav .nav-cta:hover { background: var(--brand-700); color: #fff; text-decoration: none; }

/* Mobile menu — <details>, zero JS, keyboard-accessible */
.lv-menu { display: none; position: relative; }
.lv-menu > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 600; color: var(--clay-700);
  padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface);
}
.lv-menu > summary::-webkit-details-marker { display: none; }
.lv-menu[open] > summary { background: var(--surface-alt); }
.lv-menu .menu-sheet {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 60;
  min-width: 220px; padding: 8px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-elevated);
  display: flex; flex-direction: column;
}
.lv-menu .menu-sheet a {
  padding: 11px 14px; border-radius: var(--r-md);
  color: var(--clay-800); font-size: 15px; font-weight: 500;
}
.lv-menu .menu-sheet a:hover { background: var(--surface-alt); text-decoration: none; }

@media (max-width: 760px) {
  .lv-nav { display: none; }
  .lv-menu { display: block; }
}

/* ---------- Page scaffolding --------------------------------------------- */
main.lv-page { max-width: none; margin: 0; padding: 0; }
.container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.container--narrow-center { max-width: 640px; text-align: center; }
.section { padding: 88px 0; scroll-margin-top: 72px; }
#main, article.legal [id] { scroll-margin-top: 72px; }
.section--alt { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-head { max-width: 640px; }
.section-head h2 { font-size: clamp(28px, 3.4vw, 34px); font-weight: 800; margin: 0 0 12px; }
.section-head .lede { margin: 0 0 8px; font-size: 18px; }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }

@media (max-width: 760px) {
  .section { padding: 56px 0; }
  .container { padding: 0 20px; }
}

/* ---------- Buttons ------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-ui); font-size: 15px; font-weight: 600;
  letter-spacing: 0.01em; line-height: 1.2;
  border-radius: var(--r-lg); border: 0; cursor: pointer;
  padding: 0 24px; min-height: 54px; text-decoration: none;
  transition: background-color 120ms ease, box-shadow 120ms ease;
}
.btn:hover, .btn:focus { text-decoration: none; }
.btn--primary {
  background: var(--brand-600); color: #fff;
  box-shadow: 0 2px 10px rgba(37, 99, 235, 0.35);
}
.btn--primary:hover { background: var(--brand-700); color: #fff; }
.btn--secondary {
  background: var(--brand-50); color: var(--brand-700); min-height: 50px;
}
.btn--secondary:hover { background: var(--brand-100); color: var(--brand-800); }
.btn--neutral { background: var(--surface-alt); color: var(--clay-700); min-height: 48px; }
.btn--neutral:hover { background: var(--clay-200); }

/* Store handoff — rendered disabled until store release. */
.store-badges { display: flex; gap: 12px; flex-wrap: wrap; }
.store-badges--center { justify-content: center; }
.store-note--center { text-align: center; }
.store-badge {
  display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center;
  min-height: 56px; padding: 8px 22px; border-radius: var(--r-lg);
  background: var(--clay-800); color: var(--clay-50);
}
.store-badge .store-kicker { font-size: 11px; font-weight: 500; letter-spacing: 0.04em; opacity: 0.8; }
.store-badge .store-name { font-family: var(--font-display); font-size: 18px; font-weight: 700; line-height: 1.2; }
a.store-badge { color: var(--clay-50); }
a.store-badge:hover, a.store-badge:focus { text-decoration: none; background: var(--clay-600); }
.store-badge[aria-disabled="true"] {
  background: var(--surface-alt); color: var(--clay-600);
  border: 1px solid var(--line); cursor: default;
}
.store-note { margin-top: 12px; font-size: 14px; color: var(--ink-2); }

/* ---------- Chips -------------------------------------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 6px 16px; border-radius: var(--r-full);
  background: var(--surface); border: 1px solid var(--clay-300);
  color: var(--clay-600); font-size: 14px; font-weight: 500;
}
.chip--selected { background: var(--brand-600); border-color: var(--brand-600); color: var(--clay-50); }
.chip--signal { background: var(--surface-alt); border: 0; color: var(--clay-600); min-height: 30px; padding: 4px 12px; font-size: 13px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Cards -------------------------------------------------------- */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-subtle);
}

/* Lens cards (Help/Things/Stories · Businesses/Community Spaces/Community Life) */
.lens-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 36px; }
.lens-card { padding: 26px 24px; }
.lens-card .lens-icon {
  width: 46px; height: 46px; border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-50); color: var(--brand-700); margin-bottom: 16px;
}
.lens-card--place .lens-icon { background: var(--sage-100); color: var(--sage-600); }
.lens-card .lens-icon svg { width: 24px; height: 24px; }
.lens-card h3 { margin: 0 0 6px; font-size: 19px; }
.lens-card .lens-kicker { font-size: 14px; font-weight: 600; color: var(--brand-700); display: block; margin-bottom: 8px; }
.lens-card--place .lens-kicker { color: var(--sage-600); }
.lens-card p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
@media (max-width: 900px) { .lens-grid { grid-template-columns: 1fr; gap: 14px; } }

/* ---------- App-faithful profile-card demo (placeholder content only) ---- */
/* Discovery-card demo: white shell, hairline + warm shadow, identity
   band, skeleton bars where real user content would be — placeholders can
   never ship as fake profiles. */
.profile-demo {
  width: 100%; max-width: 340px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-default);
  overflow: hidden;
}
.profile-demo .band {
  height: 112px; position: relative;
  display: flex; align-items: center; justify-content: center;
}
.profile-demo .band--person { background: var(--brand-50); }
.profile-demo .band--place { background: var(--sage-100); }
.profile-demo .band .disc {
  width: 64px; height: 64px; border-radius: var(--r-full);
  background: var(--surface); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 17px;
  color: var(--brand-700);
}
.profile-demo .band--place .disc { color: var(--sage-600); }
.profile-demo .band .disc svg { width: 28px; height: 28px; }
.profile-demo .type-pill {
  position: absolute; top: 12px; left: 12px;
  background: rgba(255, 255, 255, 0.75); border: 1px solid var(--line);
  border-radius: var(--r-full); padding: 3px 12px;
  font-size: 12px; font-weight: 500; color: var(--clay-800);
}
.profile-demo .body { padding: 16px 20px 18px; }
.profile-demo .cue {
  display: flex; align-items: center; justify-content: flex-end; gap: 4px;
  margin-top: 14px; color: var(--brand-700); font-size: 15px; font-weight: 600;
}
.profile-demo .cue::after { content: "›"; font-size: 18px; line-height: 1; }

/* Skeleton placeholders — unmistakably not real content. Width and
   spacing variants are classes; the CSP blocks inline styles. */
.skel { display: block; border-radius: var(--r-full); background: var(--clay-100); }
.skel--line { height: 12px; margin: 8px 0; }
.skel--title { height: 16px; width: 55%; background: var(--clay-200); margin: 2px 0 10px; }
.skel--word { display: inline-block; width: 56px; height: 11px; vertical-align: baseline; background: var(--clay-200); }
.skel--word-sm { width: 34px; height: 8px; }
.skel--w92 { width: 92%; }
.skel--w88 { width: 88%; }
.skel--w86 { width: 86%; }
.skel--w72 { width: 72%; }
.skel--w64 { width: 64%; }
.skel--w58 { width: 58%; }
.chip-row--demo { margin-top: 10px; }
.demo-caption { margin-top: 14px; font-size: 13px; color: var(--ink-2); }

/* ---------- Hero --------------------------------------------------------- */
.hero { padding: 84px 0 72px; }
.hero .container {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 56px; align-items: center;
}
.hero h1 {
  font-size: clamp(40px, 5.4vw, 60px);
  line-height: 1.05; letter-spacing: -0.015em; margin: 0 0 18px;
}
.hero .lede { font-size: clamp(19px, 2vw, 22px); margin: 0 0 16px; max-width: 30em; }
.hero .hero-sub { font-size: 16px; color: var(--ink-2); max-width: 34em; margin: 0 0 30px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.hero-visual { display: flex; flex-direction: column; align-items: center; }
@media (max-width: 960px) {
  .hero { padding: 48px 0 56px; }
  .hero .container { grid-template-columns: 1fr; gap: 44px; }
  .hero h1 { font-size: clamp(34px, 9vw, 44px); }
  .hero-visual { order: 2; }
}

/* ---------- Phone frame + Discover wireframe ----------------------------- */
/* App chrome with skeleton bars where user content would be. */
.phone {
  width: 300px; max-width: 86vw;
  background: var(--clay-900); border-radius: 44px; padding: 12px;
  box-shadow: var(--shadow-elevated), 0 24px 60px rgba(58, 43, 32, 0.18);
}
.phone .screen {
  background: var(--clay-50); border-radius: 34px; overflow: hidden;
  padding: 18px 14px 0; min-height: 560px;
  display: flex; flex-direction: column;
}
.phone .app-eyebrow {
  font-size: 9px; font-weight: 600; letter-spacing: 0.16em;
  color: var(--clay-600); text-transform: uppercase; margin-bottom: 6px;
}
.phone .app-title { height: 20px; width: 46%; background: var(--clay-200); border-radius: var(--r-full); margin-bottom: 8px; }
.phone .app-tag { font-size: 11px; line-height: 1.45; color: var(--clay-600); margin: 0 0 12px; }
.phone .search-pill {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-full);
  padding: 9px 14px; font-size: 11px; color: var(--clay-500); margin-bottom: 12px;
}
.phone .search-pill svg { width: 13px; height: 13px; color: var(--clay-600); flex: none; }
/* WEB-CF2A: the label is a real flex item so it can shrink and truncate —
   a bare text node cannot, and used to escape the pill at narrow widths. */
.phone .search-pill .sp-label {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.page-oahu .guide-stage .phone .search-pill svg,
.page-hiw .guide-stage .phone .search-pill svg,
.page-dl .guide-stage .phone .search-pill svg { width: 11px; height: 11px; }
.page-oahu .guide-stage .phone .search-pill .sp-label,
.page-hiw .guide-stage .phone .search-pill .sp-label,
.page-dl .guide-stage .phone .search-pill .sp-label { letter-spacing: -0.02em; }
.phone .seg-row { display: flex; gap: 6px; margin-bottom: 10px; }
.phone .seg {
  border-radius: var(--r-full); padding: 5px 13px; font-size: 10.5px; font-weight: 500;
  background: var(--surface); border: 1px solid var(--line); color: var(--clay-600);
}
.phone .seg--on { background: var(--brand-600); border-color: var(--brand-600); color: var(--clay-50); }
.phone .feed-overline {
  font-size: 8.5px; font-weight: 600; letter-spacing: 0.14em;
  color: var(--clay-500); text-transform: uppercase; margin: 4px 0 8px;
}
.phone .mini-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow-subtle); overflow: hidden; margin-bottom: 12px;
}
.phone .mini-band { height: 74px; display: flex; align-items: center; justify-content: center; position: relative; }
.phone .mini-band--person { background: var(--brand-50); }
.phone .mini-band--place { background: var(--sage-100); }
.phone .mini-band .disc {
  width: 40px; height: 40px; border-radius: var(--r-full); background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--brand-700);
}
.phone .mini-band--place .disc { color: var(--sage-600); }
.phone .mini-band--place .disc svg { width: 18px; height: 18px; }
.phone .mini-band .mini-pill {
  position: absolute; top: 8px; left: 8px;
  background: rgba(255,255,255,0.78); border: 1px solid var(--line); border-radius: var(--r-full);
  font-size: 8px; font-weight: 500; color: var(--clay-800); padding: 2px 8px;
}
.phone .mini-body { padding: 10px 12px 12px; }
.phone .mini-body .skel--title { height: 11px; width: 48%; margin: 0 0 7px; }
.phone .mini-body .skel--line { height: 8px; margin: 5px 0; }
.phone .mini-chips { display: flex; gap: 5px; margin-top: 7px; }
.phone .mini-chip { background: var(--surface-alt); border-radius: var(--r-full); font-size: 8px; color: var(--clay-600); padding: 2.5px 9px; }
.phone .mini-cue { display: flex; justify-content: flex-end; margin-top: 8px; font-size: 9.5px; font-weight: 600; color: var(--brand-700); }
.phone .mini-cue::after { content: " ›"; }

/* ---------- How it works ------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px; }
.step { padding: 24px 22px; }
.step .step-num {
  width: 38px; height: 38px; border-radius: var(--r-full);
  background: var(--brand-50); color: var(--brand-700);
  font-family: var(--font-display); font-weight: 800; font-size: 17px;
  display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.step .step-num svg { width: 20px; height: 20px; }
.step h3 { margin: 0 0 6px; font-size: 18px; }
.step p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
@media (max-width: 960px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; gap: 14px; } }

/* ---------- Split sections (text + demo card) ---------------------------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.split .section-head { max-width: 560px; }
.split-visual { display: flex; justify-content: center; }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 36px; }
  .split-visual { justify-content: flex-start; }
}

/* ---------- Principles strip --------------------------------------------- */
.principles { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

/* ---------- Footer ------------------------------------------------------- */
.lv-footer { background: var(--surface); border-top: 1px solid var(--line); }
.lv-footer .inner { max-width: 1120px; margin: 0 auto; padding: 56px 24px 40px; }
.lv-footer .cols {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 36px;
}
.lv-footer .brand-col img { height: 22px; width: auto; margin-bottom: 12px; }
.lv-footer .brand-col p { margin: 0; font-size: 14px; color: var(--ink-2); max-width: 26em; }
.lv-footer h2 {
  margin: 0 0 14px; font-family: var(--font-ui);
  font-size: 12px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--clay-600); line-height: 1.3;
}
.lv-footer nav { display: flex; flex-direction: column; gap: 10px; }
.lv-footer nav a { color: var(--clay-700); font-size: 14.5px; }
.lv-footer nav a:hover { color: var(--brand-700); }
.lv-footer .legal-line {
  margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--line);
  font-size: 13px; color: var(--ink-2);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
@media (max-width: 860px) {
  .lv-footer .cols { grid-template-columns: 1fr 1fr; gap: 32px; }
  .lv-footer .brand-col { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .lv-footer .cols { grid-template-columns: 1fr; }
}

/* ---------- Interior pages ----------------------------------------------- */
.lv-nav a[aria-current="page"] { color: var(--brand-700); font-weight: 600; }
.lv-nav .nav-cta[aria-current="page"] { color: #fff; background: var(--brand-700); }
.menu-sheet a[aria-current="page"] { color: var(--brand-700); background: var(--brand-50); }

.page-hero { padding: 72px 0 0; }
.page-hero .section-head h1 {
  font-size: clamp(34px, 4.2vw, 46px); line-height: 1.08;
  letter-spacing: -0.012em; font-weight: 800; margin: 0 0 14px;
}
.page-hero .section-head .lede { margin-bottom: 0; }
.page-hero--full { padding-bottom: 72px; }
@media (max-width: 480px) { .page-hero--full { padding-bottom: 48px; } }

/* Quiet inline text action beside/below a section head */
.text-action { font-weight: 600; font-size: 15px; color: var(--brand-700); }
.text-action::after { content: " ›" / ""; }

/* App-structure demo sheet: real chrome, placeholder slots — never a fake member. */
.app-sheet {
  width: 100%; max-width: 400px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-xl); box-shadow: var(--shadow-default);
  overflow: hidden;
}
.app-sheet .hero-band {
  height: 158px; position: relative;
  background: linear-gradient(135deg, var(--brand-50), var(--sage-100) 55%, var(--clay-100));
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
}
.app-sheet--place .hero-band {
  background: linear-gradient(135deg, var(--sage-100), var(--brand-50) 60%, var(--clay-100));
}
.app-sheet .hero-band .disc {
  width: 64px; height: 64px; border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.85); border: 1.5px solid #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 18px;
  color: var(--brand-700);
}
.app-sheet--place .hero-band .disc { color: var(--sage-600); }
.app-sheet .hero-band .disc svg { width: 28px; height: 28px; }
.app-sheet .hero-band .pills { display: flex; gap: 6px; }
.app-sheet .hero-band .type-pill {
  position: static;
  background: rgba(255, 255, 255, 0.78); border: 1px solid var(--line);
  border-radius: var(--r-full); padding: 3px 12px;
  font-size: 12px; font-weight: 500; color: var(--clay-800);
  display: inline-flex; align-items: center; gap: 5px;
}
/* demo-row is used both inside sheets and as standalone feature rows */
.demo-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 9px 0; font-size: 15px; color: var(--ink);
}
.demo-row svg { width: 19px; height: 19px; color: var(--clay-500); flex: none; margin-top: 2px; }
.demo-row .row-label { font-weight: 600; display: block; }
.demo-row .row-sub { font-size: 14px; color: var(--ink-2); display: block; margin-top: 1px; }

.app-sheet .demo-section { padding: 16px 20px; border-top: 1px solid var(--line); }
.app-sheet .demo-section:first-of-type { border-top: 0; }
.app-sheet .demo-heading {
  font-family: var(--font-ui); font-size: 15px; font-weight: 600;
  color: var(--ink); margin: 0 0 10px;
}
.app-sheet .demo-muted { font-size: 14px; color: var(--ink-2); margin: 0 0 4px; }
.app-sheet .demo-row { align-items: center; gap: 10px; padding: 7px 0; font-size: 14px; }
.app-sheet .demo-row svg { width: 17px; height: 17px; margin-top: 0; }
.app-sheet .avatar-sm {
  width: 34px; height: 34px; border-radius: var(--r-md);
  background: var(--brand-50); color: var(--brand-700);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 13px; flex: none;
}
.app-sheet .row-cue { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--brand-700); white-space: nowrap; }
.app-sheet .row-cue::after { content: " ›"; }

/* Non-interactive demo button */
.btn-demo {
  display: flex; align-items: center; justify-content: center;
  min-height: 46px; border-radius: var(--r-lg);
  background: var(--brand-600); color: #fff;
  font-size: 14.5px; font-weight: 600;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}
.btn-demo--secondary { background: var(--brand-50); color: var(--brand-700); box-shadow: none; }
.cap-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cap-chips .chip { min-height: 30px; padding: 4px 12px; font-size: 12.5px; background: var(--surface-alt); border: 0; }

/* Standalone app-chrome bits for product moments */
.ui-search {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-full);
  padding: 10px 16px; font-size: 13px; color: var(--clay-500);
}
.ui-search svg { width: 15px; height: 15px; color: var(--clay-600); flex: none; }
.ui-segs { display: flex; gap: 6px; margin-top: 10px; }
.ui-seg {
  border-radius: var(--r-full); padding: 6px 14px; font-size: 12px; font-weight: 500;
  background: var(--surface); border: 1px solid var(--line); color: var(--clay-600);
}
.ui-seg--on { background: var(--brand-600); border-color: var(--brand-600); color: var(--clay-50); }

/* Offering demo card inside a sheet */
.offer-demo { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.offer-demo .offer-backdrop {
  height: 74px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--brand-50), var(--clay-100));
}
.offer-demo--item .offer-backdrop { background: linear-gradient(135deg, var(--sage-100), var(--clay-100)); }
.offer-demo .offer-backdrop .disc {
  width: 44px; height: 44px; border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.8);
  display: flex; align-items: center; justify-content: center; color: var(--brand-700);
}
.offer-demo--item .offer-backdrop .disc { color: var(--sage-600); }
.offer-demo .offer-backdrop .disc svg { width: 22px; height: 22px; }
.offer-demo .offer-body { padding: 12px 14px 14px; }
.offer-demo .offer-context { font-size: 12.5px; font-weight: 500; color: var(--ink-2); margin: 6px 0 0; }
.offer-demo .offer-price { font-size: 13.5px; font-weight: 600; color: var(--brand-700); margin: 8px 0 0; }
.demo-note { margin-top: 14px; font-size: 13px; color: var(--ink-2); max-width: 400px; }

/* Lens detail blocks */
.lens-detail { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 40px; align-items: start; padding: 34px 0; border-top: 1px solid var(--line); }
.lens-detail:first-of-type { border-top: 0; }
.lens-detail h3 { font-family: var(--font-display); font-size: 24px; font-weight: 700; line-height: 1.15; margin: 10px 0 0; }
.lens-detail .lens-kicker { font-size: 14px; font-weight: 600; color: var(--brand-700); }
.lens-detail--place .lens-kicker { color: var(--sage-600); }
.lens-detail p { margin: 0 0 14px; color: var(--ink-2); font-size: 16px; line-height: 1.6; }
.lens-detail .lens-icon {
  width: 46px; height: 46px; border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-50); color: var(--brand-700);
}
.lens-detail--place .lens-icon { background: var(--sage-100); color: var(--sage-600); }
.lens-detail .lens-icon svg { width: 24px; height: 24px; }
@media (max-width: 760px) { .lens-detail { grid-template-columns: 1fr; gap: 14px; padding: 26px 0; } }

/* Role cards (How It Works — ways to participate) */
.role-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 32px; }
.role-card { padding: 22px 20px; }
.role-card h3 { margin: 0 0 6px; font-size: 17px; }
.role-card p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.role-card .text-action { display: inline-block; margin-top: 10px; font-size: 14px; }
@media (max-width: 900px) { .role-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .role-grid { grid-template-columns: 1fr; gap: 12px; } }

/* Contact cards (Support) */
.contact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 32px; }
.contact-card { padding: 24px 22px; }
.contact-card h2 { font-family: var(--font-ui); font-size: 17px; font-weight: 600; margin: 0 0 6px; }
.contact-card p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.contact-card .contact-links { display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
@media (max-width: 700px) { .contact-grid { grid-template-columns: 1fr; gap: 12px; } }

/* Closing cross-link band */
.cta-band {
  text-align: center; padding: 48px 32px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-xl); box-shadow: var(--shadow-subtle);
}
.cta-band h2 { font-size: clamp(28px, 3vw, 30px); font-weight: 800; margin: 0 0 10px; }
.cta-band p { margin: 0 auto 24px; max-width: 34em; color: var(--ink-2); }
.cta-band .hero-actions { justify-content: center; }

/* ---------- Composition system ------------------------------------------- */
/* Large-scale composition language derived from the app's identity-hero
   backdrop: a diagonal wash plus soft off-canvas circles. */

.stage { position: relative; }
.stage .stage-wash {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
}
.stage .stage-wash::before {
  content: ""; position: absolute; inset: -20% -10%;
  background: linear-gradient(135deg, var(--brand-50) 0%, rgba(235, 240, 234, 0.6) 55%, rgba(243, 236, 227, 0.4) 100%);
  opacity: 0.75;
}
.stage .blob { position: absolute; border-radius: var(--r-full); }
.stage .blob--brand { width: 420px; height: 420px; background: rgba(191, 219, 254, 0.30); top: -140px; right: -100px; }
.stage .blob--sage { width: 340px; height: 340px; background: rgba(107, 146, 102, 0.12); bottom: -120px; right: 26%; }
.stage > .container { position: relative; }

/* Floating product cards (People + Places beside the Discover phone) */
.float-stack { position: relative; display: flex; justify-content: center; width: min(480px, 100%); margin: 0 auto; }
.float-card { position: absolute; box-shadow: var(--shadow-elevated); border-radius: var(--r-lg); }
.float-card--tl { top: 206px; left: 0; transform: rotate(-3deg); width: 224px; }
.float-card--br { bottom: 26px; right: 0; transform: rotate(2deg); width: 224px; }
.phone--hero .screen { min-height: 470px; }
.phone .feed-spacer { height: 170px; }
.float-card .profile-demo { max-width: none; box-shadow: none; }

/* Compact profile card used inside float compositions */
.profile-demo--compact .band { height: 84px; }
.profile-demo--compact .band .disc { width: 48px; height: 48px; font-size: 14px; }
.profile-demo--compact .band .disc svg { width: 22px; height: 22px; }
.profile-demo--compact .body { padding: 12px 14px 13px; }
.profile-demo--compact .skel--title { height: 13px; margin-bottom: 8px; }
.profile-demo--compact .skel--line { height: 10px; margin: 6px 0; }
.profile-demo--compact .chip-row .chip { min-height: 26px; padding: 3px 10px; font-size: 11.5px; }
.profile-demo--compact .cue { font-size: 13px; margin-top: 10px; }
.profile-demo--compact .type-pill { font-size: 11px; padding: 2px 10px; }
@media (max-width: 1180px) {
  .float-card--tl { left: -6px; }
  .float-card--br { right: -6px; }
}
@media (max-width: 960px) {
  .float-card--tl { width: 200px; top: 10px; left: 0; }
  .float-card--br { width: 200px; bottom: 12px; right: 0; }
}
@media (max-width: 560px) {
  .float-card--tl { display: none; }
  .float-card--br { width: 180px; bottom: 8px; right: -4px; }
}

/* Bigger hero phone */
.phone--hero { width: 320px; }
@media (max-width: 480px) { .phone--hero { width: 280px; } }

/* Phone-framed profile composition (People / Places page heroes) */
.phone--sheet { width: 340px; padding: 11px; border-radius: 40px; }
.phone--sheet .app-sheet { border-radius: 30px; border: 0; box-shadow: none; max-width: none; }
@media (max-width: 480px) { .phone--sheet { width: 300px; } }

/* Detail "product moment" chips that float beside a composition */
.moment {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-default);
  padding: 14px 16px;
}
.moment .moment-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--clay-600); display: block; margin-bottom: 8px;
}
.moment--float { position: absolute; }
.moment--tr { top: 22px; right: 0; transform: rotate(2deg); width: 208px; }
.moment--bl { bottom: -20px; left: -16px; transform: rotate(-2deg); width: 196px; }
@media (max-width: 1180px) {
  .moment--tr { right: -8px; }
  .moment--bl { left: -10px; }
}
@media (max-width: 560px) {
  .moment--tr { display: none; }
  .float-stack { flex-direction: column; align-items: center; }
  .moment--bl { position: static; transform: none; width: min(300px, 100%); margin-top: 14px; box-shadow: var(--shadow-subtle); }
}

/* Message-thread moment: two calm bubbles, no invented words */
.bubbles { display: flex; flex-direction: column; gap: 8px; }
.bubble { border-radius: var(--r-lg); padding: 10px 14px; }
.bubble--them { background: var(--surface-alt); border-bottom-left-radius: var(--r-sm); align-self: flex-start; width: 82%; }
.bubble--you { background: var(--brand-600); border-bottom-right-radius: var(--r-sm); align-self: flex-end; width: 62%; }
.bubble .fc-line { font-size: 12.5px; color: var(--ink); }
.bubble--you .fc-line { color: var(--clay-50); }
.bubble--them .fc-line { color: var(--clay-700); }
.bubble .skel { background: var(--clay-200); }
.bubble--you .skel { background: rgba(251, 247, 243, 0.55); }

/* Journey — the four steps as a connected path, not four boxes */
.journey { position: relative; margin-top: 44px; }
.journey::before {
  content: ""; position: absolute; top: 8px; bottom: 8px; left: 23px;
  border-left: 2px dashed var(--clay-300);
}
.journey-step {
  position: relative; display: grid;
  grid-template-columns: 48px minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 20px; align-items: center; padding: 26px 0;
}
.journey-step .j-num {
  width: 48px; height: 48px; border-radius: var(--r-full);
  background: var(--brand-600); color: var(--clay-50);
  font-family: var(--font-display); font-weight: 800; font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(37, 99, 235, 0.3);
  position: relative; z-index: 1;
}
.journey-step h3 { font-family: var(--font-display); font-size: 22px; font-weight: 700; margin: 0 0 6px; }
.journey-step p { margin: 0; color: var(--ink-2); font-size: 15.5px; line-height: 1.6; }
.journey-step .j-visual { display: flex; justify-content: flex-end; }
.journey-step .j-visual > * { width: min(300px, 100%); }
@media (max-width: 860px) {
  .journey::before { left: 19px; }
  .journey-step { grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding: 20px 0; }
  .journey-step .j-num { width: 40px; height: 40px; font-size: 17px; }
  .journey-step .j-visual { grid-column: 2; justify-content: flex-start; margin-top: 10px; }
}

/* Compact horizontal journey for the homepage strip */
.journey-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 40px; position: relative; }
.journey-row::before {
  content: ""; position: absolute; top: 23px; left: 12%; right: 12%;
  border-top: 2px dashed var(--clay-300);
}
.journey-row .jr-step { text-align: center; padding: 0 18px; position: relative; }
.journey-row .j-num {
  width: 48px; height: 48px; border-radius: var(--r-full); margin: 0 auto 14px;
  background: var(--brand-600); color: var(--clay-50);
  font-family: var(--font-display); font-weight: 800; font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(37, 99, 235, 0.3); position: relative; z-index: 1;
}
.journey-row h3 { font-family: var(--font-ui); font-size: 17px; font-weight: 600; margin: 0 0 6px; }
.journey-row p { margin: 0; font-size: 14px; color: var(--ink-2); line-height: 1.55; }
@media (max-width: 860px) {
  .journey-row { grid-template-columns: 1fr 1fr; gap: 26px 12px; }
  .journey-row::before { display: none; }
}
@media (max-width: 480px) { .journey-row { grid-template-columns: 1fr; gap: 22px; } }

/* Tinted feature panels — large calm moments instead of small boxed cards */
.tinted-panel {
  border-radius: var(--r-xl); padding: 36px 34px;
  background: linear-gradient(135deg, var(--brand-50), rgba(255, 255, 255, 0.9) 70%);
  border: 1px solid var(--line);
}
.tinted-panel--sage { background: linear-gradient(135deg, var(--sage-100), rgba(255, 255, 255, 0.9) 70%); }
.tinted-panel h2 { font-size: clamp(28px, 2.6vw, 30px); font-weight: 800; margin: 0 0 10px; }
.tinted-panel p { margin: 0; color: var(--ink-2); font-size: 16px; line-height: 1.6; max-width: 34em; }
.tinted-panel .panel-icon {
  width: 52px; height: 52px; border-radius: var(--r-full);
  background: var(--surface); color: var(--brand-700);
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
  box-shadow: var(--shadow-subtle);
}
.tinted-panel--sage .panel-icon { color: var(--sage-600); }
.tinted-panel .panel-icon svg { width: 26px; height: 26px; }
.panel-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 860px) { .panel-pair { grid-template-columns: 1fr; gap: 14px; } .tinted-panel { padding: 28px 22px; } }

/* Hero variant: copy first in DOM (reading order), visual first on desktop */
.split--visual-first .section-head { order: 2; }
.split--visual-first .split-visual { order: 1; }
@media (max-width: 900px) {
  .split--visual-first .section-head { order: 1; }
  .split--visual-first .split-visual { order: 2; }
}

/* Caption clearance under a composition whose moment card overhangs */
.demo-caption--clear { margin-top: 46px; }
@media (max-width: 560px) { .demo-caption--clear { margin-top: 18px; } }

/* Lens feature rows — alternating, roomier, with a product moment */
.lens-feature {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 48px; align-items: center; padding: 44px 0;
}
.lens-feature + .lens-feature { border-top: 1px solid var(--line); }
.lens-feature--flip .lf-copy { order: 2; }
.lens-feature--flip .lf-visual { order: 1; }
.lens-feature .lens-icon {
  width: 52px; height: 52px; border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-50); color: var(--brand-700); margin-bottom: 16px;
}
.lens-feature--place .lens-icon { background: var(--sage-100); color: var(--sage-600); }
.lens-feature .lens-icon svg { width: 26px; height: 26px; }
.lens-feature .lens-kicker { font-size: 14px; font-weight: 600; color: var(--brand-700); display: block; }
.lens-feature--place .lens-kicker { color: var(--sage-600); }
.lens-feature h3 { font-family: var(--font-display); font-size: clamp(24px, 2.4vw, 27px); font-weight: 700; margin: 4px 0 10px; line-height: 1.12; }
.lens-feature p { margin: 0 0 16px; color: var(--ink-2); font-size: 16px; line-height: 1.6; }
.lens-feature .lf-visual { display: flex; justify-content: center; }
.lens-feature .lf-visual > * { width: min(330px, 100%); }
@media (max-width: 860px) {
  .lens-feature { grid-template-columns: 1fr; gap: 22px; padding: 32px 0; }
  .lens-feature--flip .lf-copy { order: 1; }
  .lens-feature--flip .lf-visual { order: 2; }
  .lens-feature .lf-visual { justify-content: flex-start; }
}

/* Role list — one calm card of rows (the app's action-row pattern) */
.role-list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-subtle); margin-top: 32px; }
.role-row { display: flex; align-items: flex-start; gap: 16px; padding: 18px 22px; }
.role-row + .role-row { border-top: 1px solid var(--line); }
.role-row .role-disc {
  width: 40px; height: 40px; border-radius: var(--r-full); flex: none;
  background: var(--surface-alt); color: var(--clay-600);
  display: flex; align-items: center; justify-content: center; margin-top: 2px;
}
.role-row .role-disc svg { width: 20px; height: 20px; }
.role-row h3 { font-family: var(--font-ui); font-size: 16.5px; font-weight: 600; margin: 0 0 3px; }
.role-row p { margin: 0; font-size: 14.5px; color: var(--ink-2); line-height: 1.55; }
.role-row .text-action { display: inline-block; margin-top: 6px; font-size: 14px; }

/* Join page code display */
.join-code {
  font-family: "Plus Jakarta Sans", monospace;
  font-size: clamp(20px, 3vw, 26px); font-weight: 600; letter-spacing: 0.04em;
  background: var(--surface); border: 1px solid var(--clay-300);
  border-radius: var(--r-md); padding: 14px 22px; display: inline-block;
  color: var(--ink);
}
.join-steps { text-align: left; max-width: 34em; margin: 28px auto 0; }
.join-steps li { margin: 0 0 10px; color: var(--ink-2); }
[data-join-state] { display: none; }
.join-state-on { display: block; }
.join-state-off { display: none; }

/* ---------- Premium marketing layer --------------------------------------- */
/* Scene frames: cover-fit artwork; the gradient is only a load backdrop. */
.ph-frame {
  display: block; position: relative; overflow: hidden; border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--brand-50), var(--sage-100) 60%, var(--clay-100));
}
.ph-frame > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.ph-frame--portrait { aspect-ratio: 4 / 5; }
.ph-frame--landscape { aspect-ratio: 3 / 2; }
.ph-frame--wide { aspect-ratio: 16 / 7; border-radius: var(--r-xl); }
.ph-frame--square { aspect-ratio: 1 / 1; }
.ph-frame--avatar { aspect-ratio: 1 / 1; border-radius: var(--r-full); }

/* Subtle example indicator — one quiet word, never a disclaimer wall */
.ex-pill {
  display: inline-flex; align-items: center;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--clay-500); background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--line); border-radius: var(--r-full); padding: 2px 9px;
}

/* Populated example person/place cards (photo + real content, no skeletons) */
.ex-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-default);
  overflow: hidden; display: flex; flex-direction: column;
}
.ex-card .ex-photo { position: relative; }
.ex-card .ex-photo .ph-frame { border-radius: 0; }
.ex-card .ex-photo .ph-frame--landscape { aspect-ratio: 4 / 3; } /* Place art ships 4:3 */
.ex-card .ex-photo .type-pill { position: absolute; top: 12px; left: 12px; z-index: 2; background: rgba(255,255,255,0.82); border: 1px solid var(--line); border-radius: var(--r-full); padding: 3px 12px; font-size: 12px; font-weight: 500; color: var(--clay-800); }
.ex-card .ex-photo .ex-pill { position: absolute; top: 12px; right: 12px; z-index: 2; }
.ex-card .ex-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.ex-card h3 { margin: 0; font-family: var(--font-display); font-size: 21px; font-weight: 700; }
.ex-card .ex-role { margin: -4px 0 0; font-size: 13px; font-weight: 600; color: var(--brand-700); }
.ex-card .ex-tag { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.ex-card .chip-row { margin-top: 2px; }
.ex-card .cue { margin-top: auto; padding-top: 10px; display: flex; justify-content: flex-end; color: var(--brand-700); font-size: 15px; font-weight: 600; }
.ex-card .cue::after { content: " ›" / ""; }

/* Editorial stage: photography with product UI layered into it */
.editorial {
  position: relative; display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 48px; align-items: center;
}
.editorial .ed-media { position: relative; }
.editorial .ed-float {
  position: absolute; box-shadow: var(--shadow-elevated); border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line);
}
.editorial .ed-float--br { right: -22px; bottom: -26px; width: min(270px, 78%); transform: rotate(2deg); }
.editorial .ed-float--tl { left: -22px; top: -26px; width: min(250px, 72%); transform: rotate(-2deg); }
@media (max-width: 1100px) {
  .editorial .ed-float--br { right: 2px; }
  .editorial .ed-float--tl { left: 2px; }
}
@media (max-width: 900px) {
  .editorial { grid-template-columns: 1fr; gap: 30px; }
  .editorial .ed-float--br { right: 2px; bottom: -18px; }
  .editorial .ed-float--tl { left: 2px; top: -18px; }
}
/* Below ~560px the float card grows taller than the 3:2 scene and would
   climb over the copy above it — let it flow, keeping a slight overlap. */
@media (max-width: 560px) {
  .editorial .ed-float--br, .editorial .ed-float--tl {
    position: static; width: min(320px, 94%);
    margin: -44px auto 0 auto; transform: rotate(1deg);
  }
}

/* Populated mini feed card used inside phones/floats.
   Shape mirrors the app's DiscoveryProfileCard: 4:3 photo leads, type
   chip scrimmed top-left, people crop biased toward the top. */
.feed-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-subtle); }
.feed-card .fc-photo { position: relative; }
.feed-card .fc-photo .ph-frame { border-radius: 0; aspect-ratio: 4 / 3; }
.feed-card .fc-photo--person .ph-frame > img { object-position: 50% 30%; }
.feed-card .fc-photo .type-pill {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  background: rgba(255, 255, 255, 0.85); border: 1px solid var(--line);
  border-radius: var(--r-full); padding: 1.5px 8px;
  font-size: 9px; font-weight: 500; color: var(--clay-800);
}
.feed-card .fc-body { padding: 10px 13px 12px; }
.feed-card .fc-name { font-family: var(--font-display); font-weight: 700; font-size: 15px; margin: 0; }
.feed-card .fc-line { margin: 2px 0 0; font-size: 12px; color: var(--ink-2); line-height: 1.4; }
.feed-card .fc-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.feed-card .fc-chip { background: var(--surface-alt); border-radius: var(--r-full); font-size: 10.5px; color: var(--clay-600); padding: 2.5px 9px; white-space: nowrap; }
.feed-card .fc-cue { font-size: 12px; font-weight: 600; color: var(--brand-700); white-space: nowrap; }
.feed-card .fc-cue::after { content: " ›" / ""; }

/* Mobile horizontal scroll-snap row for example cards */
.snap-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 860px) {
  .snap-row {
    display: flex; overflow-x: auto; gap: 14px;
    scroll-snap-type: x mandatory; padding-bottom: 10px;
    margin: 0 -20px; padding-left: 20px; padding-right: 20px;
    -webkit-overflow-scrolling: touch;
  }
  .snap-row > * { flex: 0 0 78%; scroll-snap-align: start; }
}

/* Premium caption */
.ed-caption { margin-top: 14px; font-size: 13.5px; color: var(--ink-2); }

/* Oʻahu banner section */
.banner-stage { position: relative; border-radius: var(--r-xl); overflow: hidden; }
.banner-stage .banner-copy {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: clamp(20px, 4vw, 44px);
  background: linear-gradient(to top, rgba(37, 26, 18, 0.62), rgba(37, 26, 18, 0));
}
.banner-stage .banner-copy h2 { color: var(--clay-50); font-size: clamp(26px, 3.4vw, 38px); font-weight: 800; margin: 0 0 6px; text-shadow: 0 1px 14px rgba(37, 26, 18, 0.55); }
.banner-stage .banner-copy p { color: rgba(251, 247, 243, 0.92); margin: 0; max-width: 36em; font-size: clamp(15px, 1.6vw, 17px); text-shadow: 0 1px 10px rgba(37, 26, 18, 0.5); }
/* Link sits on the banner artwork, so it reads light rather than brand-blue */
.banner-stage .banner-copy p + p { margin-top: 12px; }
.banner-stage .banner-copy .text-action { color: var(--clay-50); text-shadow: 0 1px 10px rgba(37, 26, 18, 0.55); }
/* Small screens: a 16:7 band is too short to hold the copy — use a taller
   crop so the scene keeps air and the text stays on the dark lower band. */
@media (max-width: 640px) {
  .banner-stage .ph-frame--wide { aspect-ratio: 4 / 3; }
  .banner-stage .ph-frame--wide > img { object-position: 30% center; }
}

/* Hero photography stage: photo carries the viewport; UI layers into it.
   The float card sits over the calm upper-left canopy and the phone hangs
   into the right wash, so the café subject stays visible between them. */
.hero-photo-stage { position: relative; width: min(560px, 100%); margin-bottom: 64px; }
.hero-photo-stage > .ph-frame { aspect-ratio: 4 / 3; border-radius: var(--r-xl); }
.hero-photo-stage .phone {
  position: absolute; right: -14px; bottom: -48px; width: 214px;
  padding: 9px; border-radius: 34px; box-shadow: var(--shadow-elevated), 0 20px 48px rgba(58, 43, 32, 0.2);
}
.hero-photo-stage .phone .screen { min-height: 0; border-radius: 26px; padding: 12px 10px 10px; }
.hero-photo-stage .phone .search-pill { font-size: 10px; white-space: nowrap; padding: 8px 12px; }
.hero-photo-stage .phone .fc-chip { font-size: 9.5px; padding: 2px 7px; }
.hero-photo-stage .phone .fc-cue { font-size: 11px; }
.hero-photo-stage .float-card--tl { top: -22px; bottom: auto; left: -20px; width: 196px; transform: rotate(-2deg); }
@media (max-width: 960px) {
  .hero-photo-stage { margin-top: 6px; margin-bottom: 84px; }
  .hero-photo-stage .phone { right: 2px; bottom: -64px; width: 196px; }
  .hero-photo-stage .phone .fc-meta { flex-wrap: wrap; row-gap: 2px; }
  .hero-photo-stage .float-card--tl { left: 2px; top: -16px; width: 176px; display: block; }
  .hero-photo-stage .float-card--tl .fc-photo { display: none; }
}
@media (max-width: 560px) {
  .hero-photo-stage .float-card--tl { display: none; }
}


/* Quiet journey variant — supporting explanation, not an infographic */
.journey-row--quiet::before { display: none; }
.journey-row--quiet .j-num {
  width: 30px; height: 30px; font-size: 14px; box-shadow: none;
  background: var(--brand-50); color: var(--brand-700);
}
.journey-row--quiet .jr-step { text-align: left; padding: 0 8px; }
.journey-row--quiet .j-num { margin: 0 0 10px; }

/* Compact commerce product moment */
.commit-demo { display: flex; flex-direction: column; gap: 8px; }
.commit-demo .commit-row {
  display: flex; align-items: center; gap: 9px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 9px 12px; font-size: 13px; color: var(--ink);
}
.commit-demo .commit-row svg { width: 16px; height: 16px; color: var(--sage-600); flex: none; }
.commit-demo .commit-state { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--sage-600); background: var(--sage-100); border-radius: var(--r-full); padding: 2px 9px; }

/* Calm motion — progressive enhancement only */
@media (prefers-reduced-motion: no-preference) {
  .float-card, .ed-float, .lb-float { transition: transform 400ms ease, box-shadow 400ms ease; }
  .float-card:hover, .ed-float:hover, .lb-float:hover { transform: translateY(-5px) rotate(0deg); box-shadow: 0 10px 28px rgba(58, 43, 32, 0.18); }
  .ex-card, .step, .lens-card, .moment { transition: transform 300ms ease, box-shadow 300ms ease; }
  .ex-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-elevated); }
  .btn { transition: background-color 140ms ease, transform 140ms ease, box-shadow 140ms ease; }
  .btn--primary:hover { transform: translateY(-1px); }
  @keyframes lv-fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  .hero .section-head > *, .hero h1, .hero .lede, .hero .hero-sub, .hero .hero-actions { animation: lv-fade-up 600ms ease both; }
  .hero .lede { animation-delay: 80ms; } .hero .hero-sub { animation-delay: 140ms; } .hero .hero-actions { animation-delay: 200ms; }
  .page-hero .section-head > * { animation: lv-fade-up 600ms ease both; }
  .page-hero .section-head .lede { animation-delay: 80ms; }
  @keyframes lv-drift { from { transform: translateY(0); } to { transform: translateY(-10px); } }
  .stage .blob { animation: lv-drift 9s ease-in-out infinite alternate; }
}

/* ---------- Small screens ------------------------------------------------- */
@media (max-width: 480px) {
  body { font-size: 16px; }
  h1 { font-size: 30px; }
  .btn { width: 100%; }
  .hero-actions .btn { width: 100%; }
  .store-badges { width: 100%; }
  .store-badge { flex: 1 1 140px; }
  .page-hero { padding-top: 44px; }
  .section { padding: 44px 0; }
  .cta-band { padding: 36px 20px; }
  .app-sheet { max-width: none; }

  /* Stacked CTAs need more air than side-by-side ones. Above 480px the buttons
     sit in a row and 14px reads as a comfortable gutter; here `.btn` goes
     full-width, so that same 14px becomes a cramped horizontal seam between two
     large blocks — and any note or text link that follows sat tighter still. */
  .hero-actions { gap: 18px; }
  .hero-actions + p { margin-top: 20px; }

  /* The phone mockup overlaps its artwork by design, hanging outside the
     frame. Those offsets are tuned to the stage, and the stage shrinks faster
     than the phone does: on a real handset the phone is TALLER than the stage,
     so it rises out of the top and lands on the secondary CTA above it (22px of
     overlap at 406px wide). Give the composition its own breathing room instead
     of moving the art. */
  .hero-photo-stage { margin-top: 54px; }
}

/* ---------- People & Places pages ------------------------------------------
   Their own cast and rhythm: a media composition in the hero, then three
   equally-weighted lens blocks where artwork leads and one truthful product
   card overlaps it. Scoped so Home's rhythm is untouched. */
.page-people .section, .page-places .section, .page-guide .section { padding: 62px 0; }
.page-people .page-hero, .page-places .page-hero, .page-guide .page-hero { padding: 50px 0 0; }
.page-people .page-hero--full, .page-places .page-hero--full { padding-bottom: 58px; }

/* Hero: copy + a lens index on the left, person composition on the right */
.people-hero-grid {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 54px; align-items: center;
}
.people-hero-grid .section-head { max-width: 520px; }
.hero-lenses { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.hero-lens {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-full); padding: 8px 18px 8px 10px;
  font-size: 14.5px; font-weight: 600; color: var(--ink-1);
  box-shadow: var(--shadow-subtle);
}
.hero-lens .li-disc {
  width: 28px; height: 28px; border-radius: var(--r-full); flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-50); color: var(--brand-700);
}
.hero-lens .li-disc svg { width: 15px; height: 15px; }
.hero-lens:hover { color: var(--brand-700); box-shadow: var(--shadow-default); }

/* Person composition: portrait artwork carries it, profile phone overlaps
   the lower-left, a quiet message card fills the upper-right. */
.person-stage { position: relative; width: min(436px, 100%); margin: 0 0 0 auto; }
.person-stage > .ph-frame { aspect-ratio: 4 / 5; border-radius: var(--r-xl); }
/* The phone hangs off the artwork's lower-left into the column gap: it fills
   the space beside the copy instead of covering the barber. */
.person-stage .phone {
  position: absolute; left: -104px; bottom: -26px; width: 218px;
  padding: 9px; border-radius: 34px;
  box-shadow: var(--shadow-elevated), 0 20px 48px rgba(58, 43, 32, 0.2);
}
.person-stage .phone .screen { min-height: 0; border-radius: 26px; padding: 0 0 14px; }
/* Quiet reply card tucked inside the frame's calm upper-right */
.person-stage .stage-note {
  position: absolute; right: 12px; top: 14px; width: 174px; transform: rotate(2deg);
  padding: 10px 12px;
}
.person-stage .stage-note .fc-line { font-size: 11.5px; }

/* Populated Person-profile presentation (mirrors the app: photo leads, then
   name, place line, story, Connect). */
.pp-photo { position: relative; }
.pp-photo .ph-frame { border-radius: 0; aspect-ratio: 4 / 3; }
.pp-photo .ph-frame > img { object-position: 50% 28%; }
.pp-photo .type-pill {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  background: rgba(255, 255, 255, 0.85); border: 1px solid var(--line);
  border-radius: var(--r-full); padding: 1.5px 8px;
  font-size: 9px; font-weight: 500; color: var(--clay-800);
}
.pp-body { padding: 12px 14px 0; }
.pp-name { font-family: var(--font-display); font-weight: 700; font-size: 17px; margin: 0; }
.pp-loc { margin: 2px 0 0; font-size: 11.5px; font-weight: 600; color: var(--brand-700); }
.pp-story { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--ink-2); }
.pp-head {
  margin: 12px 0 6px; font-size: 9px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--clay-500);
}
.pp-body .btn-demo { min-height: 38px; font-size: 13px; }
.pp-body .cap-chips { margin-top: 8px; }
.pp-body .cap-chips .chip { min-height: 26px; padding: 3px 10px; font-size: 11px; }

/* Lens blocks: bigger artwork, tighter rhythm than the generic lens rows */
.page-people .lens-feature, .page-places .lens-feature, .page-guide .lens-feature {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 50px; padding: 38px 0;
}
.page-people .lens-feature .lf-visual > *, .page-places .lens-feature .lf-visual > *, .page-guide .lens-feature .lf-visual > * { width: 100%; }
.page-people .lens-feature .lf-visual > .lb-art, .page-places .lens-feature .lf-visual > .lb-art, .page-guide .lens-feature .lf-visual > .lb-art { margin-bottom: 28px; }
/* Portrait art is capped so a tall 4:5 frame can't strand its copy column
   in an empty field; landscape art keeps the full column. */
.page-people .lens-feature .lf-visual > .lb-art--portrait, .page-places .lens-feature .lf-visual > .lb-art--portrait { width: min(424px, 100%); }
.page-people .lens-feature p, .page-places .lens-feature p, .page-guide .lens-feature p { margin-bottom: 0; }
/* Pending art slots: a quiet neutral field that holds the exact final
   geometry. No label, no broken image — artwork drops in unchanged. */
.ph-frame[data-art-slot] {
  background: linear-gradient(160deg, var(--surface-alt), var(--clay-100));
}
.lens-caps { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.lens-caps .chip {
  min-height: 32px; padding: 5px 14px; font-size: 13px;
  background: var(--surface); border: 1px solid var(--line); color: var(--clay-700);
}
.page-people .lens-feature .text-action, .page-places .lens-feature .text-action, .page-guide .lens-feature .text-action { display: inline-block; margin-top: 16px; }
.lb-art { position: relative; width: 100%; }
.lb-art > .ph-frame { border-radius: var(--r-xl); }
.lb-art > .ph-frame--portrait { aspect-ratio: 4 / 5; }
.lb-art > .ph-frame--landscape { aspect-ratio: 4 / 3; }
.lb-float {
  position: absolute; bottom: -28px; width: min(276px, 84%);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-elevated);
}
.lb-float--br { right: -18px; transform: rotate(2deg); }
.lb-float--bl { left: -18px; transform: rotate(-2deg); }
.lb-float .moment { border: 0; box-shadow: none; background: transparent; }

@media (max-width: 960px) {
  .people-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .person-stage { margin: 0 auto; width: min(440px, 100%); }
  /* Stacked, the phone can no longer hang into a column gap, so it tucks into
     the artwork's calm left third — the barber's face sits right of it. */
  .person-stage .phone { left: -14px; bottom: -46px; width: 172px; }
  .person-stage .phone .pp-body { padding: 10px 11px 0; }
  .person-stage .phone .pp-name { font-size: 15px; }
  .person-stage .phone .pp-story { font-size: 11px; }
  .person-stage .phone .cap-chips { display: none; }
  .page-people .page-hero--full, .page-places .page-hero--full, .page-guide .page-hero--full { padding-bottom: 80px; }
}
/* Re-assert the stacked lens layout: the .page-people column override above
   outranks the component's own breakpoint, so it has to be restated here. */
@media (max-width: 860px) {
  .page-people .lens-feature, .page-places .lens-feature, .page-guide .lens-feature { grid-template-columns: 1fr; gap: 24px; padding: 30px 0; }
  .page-people .lens-feature .lf-visual, .page-places .lens-feature .lf-visual, .page-guide .lens-feature .lf-visual { justify-content: flex-start; }
  .page-people .lens-feature .lf-visual > .lb-art,
  .page-people .lens-feature .lf-visual > .lb-art--portrait,
  .page-places .lens-feature .lf-visual > .lb-art,
  .page-places .lens-feature .lf-visual > .lb-art--portrait { width: min(460px, 100%); }
}
@media (max-width: 700px) {
  .person-stage .stage-note { display: none; }
}
@media (max-width: 560px) {
  .page-people .section, .page-places .section, .page-guide .section { padding: 46px 0; }
  .lb-float, .lb-float--br, .lb-float--bl {
    position: static; width: min(330px, 96%);
    margin: -36px auto 0 auto; transform: rotate(1deg);
  }
  .page-people .lens-feature .lf-visual > .lb-art, .page-places .lens-feature .lf-visual > .lb-art, .page-guide .lens-feature .lf-visual > .lb-art { margin-bottom: 6px; }
}

/* ---------- Places page composition ---------------------------------------
   A Place reads landscape, so its stage is wider than the People portrait
   and the profile phone hangs off the lower-left corner of the artwork. */
.place-stage { position: relative; width: min(600px, 100%); margin: 0 0 0 auto; }
.place-stage > .ph-frame { aspect-ratio: 4 / 3; border-radius: var(--r-xl); }
/* Keep both browsers in frame when the hero takes its 3:4 mobile crop */
.place-stage > .ph-frame > img { object-position: 40% center; }
.place-stage .phone {
  position: absolute; left: -30px; bottom: -30px; width: 216px;
  padding: 9px; border-radius: 34px;
  box-shadow: var(--shadow-elevated), 0 20px 48px rgba(58, 43, 32, 0.2);
}
.place-stage .phone .screen { min-height: 0; border-radius: 26px; padding: 0 0 14px; }
.place-stage .stage-note {
  position: absolute; right: 14px; top: 16px; width: 196px; transform: rotate(2deg);
  padding: 10px 12px;
}
/* No-photo identity band — the app's designed surface when a Place has no
   photo yet, so the mockup reads finished rather than empty. */
.pp-band {
  position: relative; height: 92px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--sage-100), var(--brand-50));
}
.pp-band .id-disc {
  width: 44px; height: 44px; border-radius: var(--r-full); background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  color: var(--sage-600); box-shadow: var(--shadow-subtle);
}
.pp-band .id-disc svg { width: 21px; height: 21px; }
.pp-band .type-pill {
  position: absolute; top: 8px; left: 8px;
  background: rgba(255, 255, 255, 0.85); border: 1px solid var(--line);
  border-radius: var(--r-full); padding: 1.5px 8px;
  font-size: 9px; font-weight: 500; color: var(--clay-800);
}
/* "People here" — the associated profiles a Place actually carries */
.pp-people { display: flex; flex-direction: column; gap: 7px; }
.pp-person { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--ink-2); }
.pp-person .avatar {
  width: 22px; height: 22px; border-radius: var(--r-full); flex: none;
  background: var(--brand-50); color: var(--brand-700);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700;
}
.pp-hours { margin: 6px 0 0; font-size: 11.5px; color: var(--ink-2); }
.pp-hours strong { color: var(--sage-600); font-weight: 600; }
@media (max-width: 960px) {
  /* Stacked, a 4:3 frame is too short to host the Place profile phone, so the
     hero art takes a portrait crop and the phone tucks into its left side. */
  .place-stage { margin: 0 auto; width: min(460px, 100%); }
  .place-stage > .ph-frame { aspect-ratio: 3 / 4; }
  .place-stage .phone { left: -12px; bottom: -30px; width: 188px; }
  .place-stage .phone .cap-chips { display: none; }
  .place-stage .stage-note { display: none; }
}

/* ---------- Guide pages (/how-it-works, /oahu) -----------------------------
   Reuse the People/Places composition: a landscape media stage carrying the
   product UI, then lens blocks. */
.guide-stage { position: relative; width: min(600px, 100%); margin: 0 0 0 auto; }
.guide-stage > .ph-frame { aspect-ratio: 4 / 3; border-radius: var(--r-xl); }
.guide-stage .phone {
  position: absolute; left: -30px; bottom: -30px; width: 216px;
  padding: 9px; border-radius: 34px;
  box-shadow: var(--shadow-elevated), 0 20px 48px rgba(58, 43, 32, 0.2);
}
.guide-stage .phone .screen { min-height: 0; border-radius: 26px; padding: 12px 10px 12px; }
.guide-stage .phone .search-pill { font-size: 10px; white-space: nowrap; padding: 8px 12px; }
.guide-stage .phone .fc-meta { flex-wrap: wrap; row-gap: 2px; }
.guide-stage .phone .fc-chip { font-size: 9.5px; padding: 2px 7px; }
.guide-stage .phone .fc-cue { font-size: 11px; }
.guide-stage .stage-note {
  position: absolute; right: 14px; top: 16px; width: 196px; transform: rotate(2deg);
  padding: 10px 12px;
}
/* Community geography list — place names only, no invented activity */
.geo-row { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.geo-row .chip {
  min-height: 34px; padding: 6px 15px; font-size: 14px;
  background: var(--surface); border: 1px solid var(--line); color: var(--clay-700);
}
.why-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px; margin-top: 26px;
}
.why-item {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 20px 22px; box-shadow: var(--shadow-subtle);
}
.why-item h3 { font-family: var(--font-display); font-size: 18px; font-weight: 700; margin: 0 0 6px; }
.why-item p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
@media (max-width: 960px) {
  .guide-stage { margin: 0 auto; width: min(460px, 100%); }
  .guide-stage > .ph-frame { aspect-ratio: 3 / 4; }
  .guide-stage .phone { left: -12px; bottom: -30px; width: 188px; }
  .guide-stage .stage-note { display: none; }
}
/* Two-column detail copy aligns to the top, not the middle */
.split--top { align-items: start; }
/* Standalone hero artwork on the supporting role pages */
.page-guide .people-hero-grid .lb-art { margin-bottom: 30px; }
@media (max-width: 700px) { .why-grid { grid-template-columns: 1fr; } }
/* Store badges inside a centred CTA band (used on /oahu) */
.cta-band .store-badges { justify-content: center; }
.cta-band .store-note { text-align: center; margin-top: 20px; }

/* ---------- /places image-visibility pass ---------------------------------
   Photography leads on this page: the product cards hang mostly outside the
   frame so they clip only a quiet corner instead of covering the scene. */
.page-places .place-stage .phone { left: -26px; bottom: -34px; width: 188px; }
.page-places .place-stage .stage-note { right: -34px; top: 20px; width: 176px; }
.page-places .lb-float { width: min(248px, 62%); bottom: -34px; }
.page-places .lb-float--br { right: -40px; }
.page-places .lb-float--bl { left: -40px; }
/* A hair of translucency keeps the photograph reading through the card edge
   without costing legibility. */
.page-places .lb-float,
.page-places .place-stage .stage-note {
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
/* Below ~1180 the columns narrow, so the outward hang has to tuck back in
   or the cards push past the container and force a horizontal scrollbar. */
@media (max-width: 1180px) {
  .page-places .lb-float--br { right: -12px; }
  .page-places .lb-float--bl { left: -12px; }
  .page-places .place-stage .stage-note { right: -8px; }
}
@media (max-width: 960px) {
  /* Stacked: the phone tucks into the portrait crop's bottom-left corner so
     the top two-thirds of the scene stay clear. */
  .page-places .place-stage .phone { left: -20px; bottom: -40px; width: 168px; }
}
@media (max-width: 560px) {
  /* Cards flow below their image with only a token overlap. */
  .page-places .lb-float,
  .page-places .lb-float--br,
  .page-places .lb-float--bl {
    width: min(330px, 96%); margin-top: -18px;
  }
}

/* ---------- /places hero phone: real device proportions -------------------
   The shell is a fixed 9:19.5 device, so content adapts to the phone rather
   than the phone stretching to the content. */
.page-places .place-stage .phone {
  aspect-ratio: 9 / 19.5;
  display: flex; flex-direction: column;
}
.page-places .place-stage .phone .screen {
  flex: 1; min-height: 0; overflow: hidden;
}
.page-places .place-stage .phone .pp-band { height: 56px; }
.page-places .place-stage .phone .pp-band .id-disc { width: 32px; height: 32px; }
.page-places .place-stage .phone .pp-body { padding: 10px 12px 0; }
.page-places .place-stage .phone .pp-name { font-size: 16px; }
.page-places .place-stage .phone .pp-story { margin-top: 6px; line-height: 1.45; }
.page-places .place-stage .phone .pp-head { margin: 9px 0 4px; }
.page-places .place-stage .phone .pp-people { gap: 5px; }
.page-places .place-stage .phone .pp-hours { margin-top: 3px; }
.page-places .place-stage .phone .btn-demo { min-height: 34px; font-size: 12.5px; }

/* Mobile sits after the device block above so these overrides actually win.
   Priority order: identity, name/locality, People here, Hours, CTA — the
   descriptive line is the first thing to go when space is tight. */
@media (max-width: 960px) {
  .page-places .place-stage .phone .pp-story { display: none; }
  .page-places .place-stage .phone .pp-people { gap: 4px; font-size: 11px; }
  .page-places .place-stage .phone .pp-band { height: 56px; }
  .page-places .place-stage .phone .pp-band .id-disc { width: 32px; height: 32px; }
  .page-places .place-stage .phone .pp-head { margin: 7px 0 3px; }
}

/* ---------- /how-it-works: real device + photography-first cards -----------
   Same principles accepted on /places: the phone is a fixed 9:19.5 device and
   the product cards hang mostly outside their frames. */
.page-hiw .guide-stage .phone {
  aspect-ratio: 9 / 19.5; width: 186px;
  display: flex; flex-direction: column;
}
.page-hiw .guide-stage .phone .screen { flex: 1; min-height: 0; overflow: hidden; padding: 10px 9px; }
.page-hiw .guide-stage .phone .app-eyebrow { margin-bottom: 4px; }
.page-hiw .guide-stage .phone .search-pill { padding: 6px 8px; gap: 6px; margin-bottom: 8px; }
.page-hiw .guide-stage .phone .feed-overline { margin: 2px 0 5px; }
.page-hiw .guide-stage .phone .feed-card { margin-bottom: 8px; }
.page-hiw .guide-stage .phone .fc-body { padding: 8px 10px 9px; }
.page-hiw .guide-stage .phone .fc-name { font-size: 13.5px; }
.page-hiw .guide-stage .phone .fc-line { font-size: 11px; }
.page-hiw .guide-stage .stage-note { right: -34px; top: 18px; width: 178px; }
/* Editorial rows: card clips a corner instead of covering the scene */
.page-hiw .lb-float { width: min(248px, 62%); bottom: -34px; }
.page-hiw .lb-float--br { right: -40px; }
.page-hiw .lb-float--bl { left: -40px; }
.page-hiw .lb-float,
.page-hiw .guide-stage .stage-note {
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
@media (max-width: 1180px) {
  .page-hiw .lb-float--br { right: -12px; }
  .page-hiw .lb-float--bl { left: -12px; }
  .page-hiw .guide-stage .stage-note { right: -8px; }
}
@media (max-width: 960px) {
  .page-hiw .guide-stage .phone { width: 166px; left: -14px; bottom: -34px; }
}
@media (max-width: 700px) {
  /* Compact 2x2 journey instead of four tall stacked cards */
  .page-hiw .journey-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
  .page-hiw .journey-row .jr-step p { font-size: 13.5px; line-height: 1.45; }
}
@media (max-width: 560px) {
  .page-hiw .lb-float,
  .page-hiw .lb-float--br,
  .page-hiw .lb-float--bl { width: min(330px, 96%); margin-top: -16px; }
}

/* ---------- /oahu: real device + photography-first cards ------------------- */
.page-oahu .guide-stage .phone {
  aspect-ratio: 9 / 19.5; width: 186px;
  display: flex; flex-direction: column;
}
.page-oahu .guide-stage .phone .screen { flex: 1; min-height: 0; overflow: hidden; padding: 10px 9px; }
.page-oahu .guide-stage .phone .app-eyebrow { margin-bottom: 4px; }
.page-oahu .guide-stage .phone .search-pill { padding: 6px 8px; gap: 6px; margin-bottom: 8px; }
.page-oahu .guide-stage .phone .feed-overline { margin: 2px 0 5px; }
.page-oahu .guide-stage .phone .feed-card { margin-bottom: 8px; }
.page-oahu .guide-stage .phone .fc-body { padding: 8px 10px 9px; }
.page-oahu .guide-stage .phone .fc-name { font-size: 13.5px; }
.page-oahu .guide-stage .phone .fc-line { font-size: 11px; }
.page-oahu .lb-float { width: min(248px, 62%); bottom: -34px; }
.page-oahu .lb-float--br { right: -40px; }
.page-oahu .lb-float--bl { left: -40px; }
.page-oahu .lb-float {
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
@media (max-width: 1180px) {
  .page-oahu .lb-float--br { right: -12px; }
  .page-oahu .lb-float--bl { left: -12px; }
}
@media (max-width: 960px) {
  .page-oahu .guide-stage .phone { width: 166px; left: -14px; bottom: -34px; }
}
@media (max-width: 560px) {
  .page-oahu .lb-float,
  .page-oahu .lb-float--br,
  .page-oahu .lb-float--bl { width: min(330px, 96%); margin-top: -16px; }
}

/* ---------- /oahu spacing corrections -------------------------------------
   The page-hero lede has its bottom margin zeroed, so the CTA row sat flush
   against the paragraph; both gaps now use the established copy→action-row
   rhythm already in the system (30px on the Home hero, 32px section step). */
.page-oahu .page-hero .hero-actions { margin-top: 30px; }
.page-oahu .cta-band .store-badges { margin-top: 32px; }
/* .cta-band p zeroes the note's own 12px top margin, so it sat flush under
   the badges; 20px is an existing step used throughout the stylesheet. */

/* ---------- /download: real device + hero CTA spacing ---------------------- */
/* .page-hero zeroes the lede's bottom margin, so the badge row sat flush under
   the paragraph; 32px matches the step already used on /oahu. */
.page-dl .page-hero .store-badges { margin-top: 32px; }
/* The phone overhangs the artwork, so the disclosure needs its own clearance
   or the two boxes collide at the bottom of the hero. */
.page-dl .guide-stage .phone {
  aspect-ratio: 9 / 19.5; width: 186px;
  display: flex; flex-direction: column;
}
.page-dl .guide-stage .phone .screen { flex: 1; min-height: 0; overflow: hidden; padding: 10px 9px; }
.page-dl .guide-stage .phone .app-eyebrow { margin-bottom: 4px; }
.page-dl .guide-stage .phone .search-pill { padding: 6px 8px; gap: 6px; margin-bottom: 8px; font-size: 10px; }
.page-dl .guide-stage .phone .feed-overline { margin: 2px 0 5px; }
.page-dl .guide-stage .phone .feed-card { margin-bottom: 8px; }
.page-dl .guide-stage .phone .fc-body { padding: 8px 10px 9px; }
.page-dl .guide-stage .phone .fc-name { font-size: 13.5px; }
.page-dl .guide-stage .phone .fc-line { font-size: 11px; }
@media (max-width: 960px) {
  .page-dl .guide-stage .phone { width: 166px; left: -14px; bottom: -34px; }
  /* Stacked, the phone hangs 34px below the artwork and would sit on top of
     the disclosure line — clear it rather than moving the composition. */
  .page-dl .guide-stage .phone .search-pill { font-size: 9px; padding: 6px 7px; gap: 6px; }
  .page-dl .guide-stage .phone .search-pill svg { width: 11px; height: 11px; }
}

/* ---------- /courier: photography-first handoff card ----------------------- */
.page-cr .lb-float { width: min(248px, 62%); bottom: -34px; }
.page-cr .lb-float--br { right: -40px; }
.page-cr .lb-float {
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
@media (max-width: 1180px) { .page-cr .lb-float--br { right: -12px; } }
@media (max-width: 560px) {
  .page-cr .lb-float, .page-cr .lb-float--br { width: min(330px, 96%); margin-top: -16px; }
}

/* ---------- /local-partner: factual value + economics panels --------------
   Membership facts read as details, never as stat counters or projections. */
.fact-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.fact-row--guards { margin-top: 24px; }
.fact {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-full);
  padding: 9px 18px; font-size: 14.5px; font-weight: 600; color: var(--clay-700);
  box-shadow: var(--shadow-subtle);
}
.fact strong { color: var(--brand-700); font-weight: 800; }
.fine { margin: 16px 0 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.fine--wide { max-width: 46em; margin-top: 22px; }
.fine--center { text-align: center; margin-top: 18px; }

.econ-grid {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 20px; margin-top: 28px; align-items: start;
}
.econ-panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 28px 30px; box-shadow: var(--shadow-default);
}
.econ-kicker {
  display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--clay-600);
}
.econ-figure {
  font-family: var(--font-display); font-weight: 800; color: var(--brand-700);
  font-size: clamp(36px, 4.2vw, 46px); line-height: 1.05; margin: 10px 0 10px;
}
.econ-panel--sub .econ-figure { font-size: clamp(22px, 2.3vw, 27px); }
.econ-body { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.econ-note {
  margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 14px; color: var(--clay-600);
}

.member-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px; margin-top: 26px; align-items: start;
}
.member-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 26px 28px; box-shadow: var(--shadow-subtle);
}
.member-card h3 {
  font-family: var(--font-display); font-size: 20px; font-weight: 700; margin: 0 0 8px;
}
.member-card .member-sub { margin-top: 22px; }
.member-card p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
.fact-list { list-style: none; margin: 16px 0 0; padding: 0; }
.fact-list li {
  position: relative; padding: 7px 0 7px 24px; font-size: 15px; color: var(--clay-700);
  border-top: 1px solid var(--line);
}
.fact-list li::before {
  content: ""; position: absolute; left: 4px; top: 15px;
  width: 8px; height: 8px; border-radius: var(--r-full); background: var(--sage-600);
}
.member-links { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 18px; }

@media (max-width: 860px) {
  .econ-grid, .member-grid { grid-template-columns: 1fr; }
}
/* Hero CTA needs its own clearance below the membership fact row */
.page-lp .page-hero .hero-actions { margin-top: 28px; }
.page-lp .page-hero .hero-actions + p { margin-top: 16px; }

/* ---------- Narrow-phone corrections (must stay LAST) ----------------------
   These override page-scoped rules that live in `max-width: 960px` blocks
   further up the file. Those selectors carry the same specificity as these, so
   the later rule wins — which means anything here has to sit after them. Put
   these back up in the general small-screens block and they silently lose. */
@media (max-width: 480px) {
  /* Hanging outside the artwork is the intent; hanging off the SCREEN is not.
     The 960px offsets leave these phones 0–6px from the viewport edge on a real
     handset, which reads as clipped rather than composed — the search pill
     inside gets visibly cut. Rest them on the container gutter: still
     overlapping the artwork, no longer jammed against the edge. */
  .person-stage .phone,
  .place-stage .phone,
  .guide-stage .phone,
  .page-places .place-stage .phone,
  .page-hiw .guide-stage .phone,
  .page-oahu .guide-stage .phone,
  .page-dl .guide-stage .phone { left: 0; }

  /* The membership fact line sat 16px under a full-width button. */
  .page-lp .page-hero .hero-actions + p { margin-top: 20px; }
}