/* tokens.css — Steward design system foundation
 * Extracted from agentfitz/steward — public/css/tokens.css
 * Plus immersive lamplight tokens from immersive.css
 *
 * All brand fonts now load locally from /fonts via colors_and_type.css.
 */


:root {
  /* ── Color: Surfaces ──────────────────── */
  --color-bg:           #fffcf7;   /* warm cream — primary canvas */
  --color-bg-alt:       #F5F3EE;   /* slightly cooler cream — body */
  --color-surface:      #FFFFFF;   /* card / panel */
  --color-border:       #E2DED6;
  --color-border-subtle: #efede8;
  --color-border-dark:  #C8C3B8;

  /* ── Color: Ink ───────────────────────── */
  --color-text:         #1A1A1A;
  --color-text-muted:   #6B6760;
  --color-text-faint:   #A09C95;
  /* Section eyebrows (light bg) — stronger than --color-text-muted so the small
     mono kicker labels stay readable. Mirrors the hero eyebrow's parchment-at-0.9. */
  --eyebrow-ink:        rgba(26, 26, 26, 0.82);

  /* ── Color: Brand & Semantic ─────────── */
  --color-accent:       #1D4A35;   /* Steward forest green */
  --color-accent-light: #EBF2EE;
  --color-money-green:  #008000;
  --color-negative:     #8B2020;
  --color-negative-bg:  #F9EEEE;
  --color-warning:      #B45309;
  --color-warning-bg:   #FEF3C7;
  --color-error:        #8B3A3A;
  --color-error-bg:     #F9EDED;
  --color-success:      #1D4A35;
  --color-success-bg:   #EDF4F0;

  /* ── Color: OTAs ──────────────────────── */
  --color-airbnb:       #fe5959;
  --color-vrbo:         #4c6aa8;

  /* ── Color: Lamplight (immersive sessions) ── */
  --canvas-lamplight:       #113026;
  --canvas-lamplight-deep:  #0D2620;
  --ink-parchment:          #EDE7D6;
  --ink-parchment-muted:    rgba(237, 231, 214, 0.66);
  --ink-parchment-faint:    rgba(237, 231, 214, 0.44);
  --rule-parchment:         rgba(237, 231, 214, 0.14);
  /* Lamplight gold — matches the app's immersive/monthly-session accent. */
  --color-accent-gold:      #c9a85c;

  /* ── Typography: Families ─────────────── */
  /* Standalone bundle — MIRRORS tokens.css. Keep --font-serif in sync with the
     app's swap point. Role-based names; the wordmark here is the SVG bowtie mark
     + --font-heading text, not the Caslon .brand-wordmark treatment. */
  --font-serif:     'Playfair Display', Georgia, Cambria, 'Times New Roman', serif;
  --font-heading:   var(--font-serif);
  --font-narrative: var(--font-serif);
  --font-body:      'DM Sans', system-ui, sans-serif;
  --font-mono:      'IBM Plex Mono', 'Courier New', monospace;

  /* ── Typography: Scale ────────────────── */
  --text-xs:         0.75rem;
  --text-sm:         0.875rem;
  --text-base:       1rem;
  --text-lg:         1.125rem;
  --text-xl:         1.25rem;
  --text-2xl:        1.5rem;
  --text-3xl:        2rem;
  --text-4xl:        2.75rem;
  --text-page-title: 1.95rem;

  /* ── Spacing ──────────────────────────── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ── Layout ───────────────────────────── */
  --max-width:     960px;
  --nav-height:    56px;
  --border-radius: 4px;

  /* ── Shadows ──────────────────────────── */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);

  /* ── Motion ───────────────────────────── */
  --transition: 150ms ease;
}

/* Brand fonts — self-hosted subset woff2 at /fonts/ (this standalone build
 * inlines its own faces; the app/stay surfaces pull public/css/fonts.css).
 * Display type is Playfair Display (variable woff2). DM Sans is variable;
 * Plex Mono + Caslon are static per weight/style. */

@font-face {
  font-family: 'Playfair Display';
  src: url('/fonts/playfair-display-var.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('/fonts/playfair-display-var-italic.woff2') format('woff2');
  font-weight: 400 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('/fonts/dm-sans-var.woff2') format('woff2');
  font-weight: 400 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('/fonts/dm-sans-var-italic.woff2') format('woff2');
  font-weight: 400 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/fonts/ibm-plex-mono-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/fonts/ibm-plex-mono-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Libre Caslon Text';
  src: url('/fonts/libre-caslon-text-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Libre Caslon Text';
  src: url('/fonts/libre-caslon-text-400-italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}

/* steward.css — actual product CSS, copied verbatim from agentfitz/steward
 * This is the system. Bundled together so showcase pages can render real components.
 * Sources: base.css, form.css, card.css, table.css, modal.css, immersive.css, nav.css
 */

/* ─── Base ──────────────────────────────────────────────── */
.sw *, .sw *::before, .sw *::after { box-sizing: border-box; }

.sw {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: 1.6;
}

.sw h1, .sw h2, .sw h3, .sw h4 {
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-text);
}

.sw h1 { font-size: var(--text-4xl); }
.sw h2 { font-size: var(--text-3xl); }
.sw h3 { font-size: var(--text-2xl); }
.sw h4 { font-size: var(--text-xl); }

.sw p { line-height: 1.7; color: var(--color-text-muted); }
.sw a { color: var(--color-accent); text-decoration: none; transition: opacity var(--transition); }
.sw a:hover { opacity: 0.75; }

.sw .text-mono  { font-family: var(--font-mono); }
.sw .text-muted { color: var(--color-text-muted); }
.sw .text-faint { color: var(--color-text-faint); }
.sw .text-sm    { font-size: var(--text-sm); }
.sw .text-xs    { font-size: var(--text-xs); }
.sw .positive { color: var(--color-accent); }
.sw .negative { color: var(--color-negative); }

.sw .divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-8) 0;
}

/* ─── Buttons ───────────────────────────────────────────── */
.sw .btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--border-radius);
  border: none;
  cursor: pointer;
  transition: opacity var(--transition), background var(--transition);
  text-decoration: none;
  white-space: nowrap;
}
.sw .btn:hover { opacity: 0.85; }
.sw .btn:disabled { opacity: 0.4; cursor: not-allowed; }

.sw .btn--primary {
  background: var(--color-accent);
  color: var(--color-surface);
  border: 1px solid var(--color-accent);
}
.sw .btn--secondary {
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border-dark);
}
.sw .btn--ghost {
  background: transparent;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}
.sw .btn--ghost:hover {
  opacity: 1;
  color: var(--color-text);
  border-color: var(--color-border-dark);
  background: var(--color-bg);
}
.sw .btn--danger {
  background: var(--color-error);
  color: var(--color-surface);
}
.sw .btn--sm  { font-size: var(--text-xs); padding: var(--space-2) var(--space-4); }
.sw .btn--xs  { font-size: var(--text-xs); padding: var(--space-2) var(--space-4); }
.sw .btn--xxs { font-size: var(--text-xs); font-weight: 600; padding: var(--space-1) var(--space-4); gap: var(--space-1); }
.sw .btn--block { width: 100%; justify-content: center; }
.sw .btn__icon { width: 14px; height: 14px; flex-shrink: 0; }

/* ─── Form fields ───────────────────────────────────────── */
.sw .form-group, .sw .form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-6);
}

.sw .form-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
}
.sw .form-label--required::after { content: ' *'; color: var(--color-error); }

.sw .form-hint {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

.sw .form-input {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  transition: border-color 0.15s ease;
}
.sw .form-input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 15%, transparent);
}

.sw textarea.form-input { resize: vertical; min-height: 100px; line-height: 1.6; }

.sw .form-select {
  appearance: none;
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-8) var(--space-2) var(--space-3);
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B6760' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
}

.sw .form-check { display: flex; align-items: flex-start; gap: var(--space-2); }
.sw .form-check__input {
  appearance: none;
  width: 16px; height: 16px;
  border: 1.5px solid var(--color-border);
  border-radius: 3px;
  background: var(--color-surface);
  cursor: pointer;
  margin-top: 2px;
  position: relative;
  transition: background 0.1s, border-color 0.1s;
}
.sw .form-check__input:checked {
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.sw .form-check__input:checked::after {
  content: '';
  position: absolute;
  left: 4px; top: 1px;
  width: 5px; height: 9px;
  border: 2px solid var(--color-surface);
  border-top: none; border-left: none;
  transform: rotate(45deg);
}
.sw .form-check__input--radio { border-radius: 50%; }
.sw .form-check__input--radio:checked::after {
  content: ''; position: absolute;
  left: 3px; top: 3px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-surface);
  border: none; transform: none;
}
.sw .form-check__label { font-size: var(--text-sm); color: var(--color-text); cursor: pointer; line-height: 1.4; }

.sw .form-toggle { display: flex; align-items: center; gap: var(--space-2); }
.sw .form-toggle__track {
  position: relative;
  width: 36px; height: 20px;
  border-radius: 10px;
  background: var(--color-border);
  border: none;
  cursor: pointer;
  transition: background 0.2s ease;
}
.sw .form-toggle__track--on { background: var(--color-accent); }
.sw .form-toggle__track::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--color-surface);
  transition: transform 0.2s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.sw .form-toggle__track--on::after { transform: translateX(16px); }
.sw .form-toggle__label { font-size: var(--text-sm); color: var(--color-text); }

/* ─── Cards ─────────────────────────────────────────────── */
.sw .card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: var(--space-6);
}

.sw .metric-card {
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: var(--space-5) var(--space-6);
  background: var(--color-surface);
}

.sw .metric-card__label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: var(--space-2);
}

.sw .metric-card__value {
  font-family: var(--font-mono);
  font-size: var(--text-3xl);
  font-weight: 500;
  color: var(--color-text);
  line-height: 1;
  margin-bottom: var(--space-2);
}

.sw .metric-card__value--large { font-size: var(--text-4xl); }

.sw .metric-card__delta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}
.sw .metric-card__delta--positive { color: var(--color-accent); }
.sw .metric-card__delta--negative { color: var(--color-negative); }

.sw .metric-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-4);
}
.sw .metric-grid > .metric-card:nth-child(1) { background: #EDF4F0; border-color: #C8DDD4; }
.sw .metric-grid > .metric-card:nth-child(2) { background: #EEF1F8; border-color: #C8D0E8; }
.sw .metric-grid > .metric-card:nth-child(3) { background: #F5F0E8; border-color: #E0D5C0; }
.sw .metric-grid > .metric-card:nth-child(4) { background: #F3EEF5; border-color: #DCCEE3; }
.sw .metric-grid > .metric-card:nth-child(5) { background: #EEF4F5; border-color: #C8D8DC; }

@media (max-width: 900px) {
  .sw .metric-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .sw .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .sw .metric-card__value { font-size: var(--text-2xl); }
}

/* ─── Section header ────────────────────────────────────── */
.sw .section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-5);
  gap: var(--space-4);
}
.sw .section-header h2, .sw .section-header h3 { font-size: var(--text-xl); }
.sw .section-header__action {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* ─── Badges ────────────────────────────────────────────── */
.sw .property-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  padding: 2px var(--space-2);
  border-radius: 2px;
  background: var(--color-accent-light);
  color: var(--color-accent);
  white-space: nowrap;
}

.sw .badge {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 500;
  padding: 2px var(--space-2);
  border-radius: 2px;
  white-space: nowrap;
}
.sw .badge--revenue  { background: var(--color-accent-light); color: var(--color-accent); }
.sw .badge--owner    { background: #EEF0F8; color: #3D4A8A; }
.sw .badge--comp     { background: var(--color-warning-bg); color: var(--color-warning); }
.sw .badge--flagged  { background: var(--color-negative-bg); color: var(--color-negative); }

/* ─── Tables ────────────────────────────────────────────── */
.sw .table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  background: var(--color-surface);
}

.sw .table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }

.sw .table th {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  text-align: left;
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
  background: var(--color-bg);
}

.sw .table th.right, .sw .table td.right { text-align: right; }

.sw .table td {
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  vertical-align: middle;
}
.sw .table tbody tr:last-child td { border-bottom: none; }
.sw .table tbody tr:hover td { background: var(--color-bg); }

.sw .table td.mono, .sw .table th.mono {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.sw .table tfoot td {
  font-weight: 600;
  border-top: 2px solid var(--color-border-dark);
  border-bottom: none;
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg);
}

/* ─── Linen textures ────────────────────────────────────── */
.sw .linen-texture--darken-lightbg {
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.025) 2px, rgba(0,0,0,0.025) 3px),
    repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0,0,0,0.025) 2px, rgba(0,0,0,0.025) 3px);
}
.sw .linen-texture--lighten-darkbg {
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.07) 2px, rgba(255,255,255,0.07) 3px),
    repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(255,255,255,0.07) 2px, rgba(255,255,255,0.07) 3px);
}

/* ─── Sidebar nav (product) ─────────────────────────────── */
.sw .sidebar-shell {
  display: flex;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  overflow: hidden;
  height: 460px;
}

.sw .sw-sidebar {
  width: 220px;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.sw .sw-sidebar__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-6);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 600;
  border-bottom: 1px solid var(--color-border);
}

.sw .sw-sidebar__brand-mark {
  width: 22px; height: 22px;
  background: var(--color-accent);
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
}
.sw .sw-sidebar__brand-mark::after {
  content: '';
  position: absolute; inset: 5px;
  border: 1.5px solid #fff;
  border-radius: 50%;
  border-top-color: transparent;
  border-right-color: transparent;
  transform: rotate(-45deg);
}

.sw .sw-sidebar__nav { flex: 1; }

.sw .sw-sidebar__item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  padding: var(--space-4) 1rem;
  border-left: 4px solid transparent;
  border-bottom: 1px solid var(--color-border-subtle);
  transition: background var(--transition), color var(--transition);
}
.sw .sw-sidebar__item:hover { color: var(--color-text); background: var(--color-bg); opacity: 1; }
.sw .sw-sidebar__item--active {
  color: var(--color-accent);
  border-left-color: var(--color-accent);
  background: var(--color-accent-light);
  font-weight: 500;
}
.sw .sw-sidebar__item svg { width: 1rem; height: 1rem; flex-shrink: 0; stroke-width: 1.75; }

.sw .sw-app-main {
  flex: 1;
  padding: var(--space-6) var(--space-8);
  overflow-y: auto;
  min-width: 0;
}

/* ─── Steward marketing site ─────────────────────────────── */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Smooth-scroll anchor navigation (nav links + on-page CTAs). A little
   scroll-padding keeps section tops off the very top edge on landing. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--space-6);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

.site {
  min-height: 100vh;
  overflow-x: hidden;
}

/* ─── Hero ─── */
.hero {
  position: relative;
  background: var(--canvas-lamplight);
  background-image:
    radial-gradient(ellipse 90% 70% at 50% 30%, rgba(255, 247, 220, 0.04) 0%, transparent 60%),
    radial-gradient(ellipse 120% 90% at 50% 100%, rgba(0, 0, 0, 0.32) 0%, transparent 70%);
  color: var(--ink-parchment);
  padding: var(--space-5) var(--space-10) var(--space-12);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.hero__grain {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.55;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.012) 2px, rgba(255,255,255,0.012) 3px),
    repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(255,255,255,0.012) 2px, rgba(255,255,255,0.012) 3px);
  mix-blend-mode: overlay;
}

.hero__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 80% 70% at 50% 45%, transparent 40%, rgba(0,0,0,0.28) 100%);
}

/* ─── Nav ─── Sticky full-width bar (background + shadow); the grid content
   lives in .nav__inner, width-matched to .hero__container so the brand aligns
   with the hero copy. Dark at all times so it reads over the dark hero AND the
   light page body; .nav--stuck condenses it to a minimal state once scrolled. */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--canvas-lamplight);
  border-bottom: 1px solid transparent;
  transition: background-color var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.nav__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-10);
  max-width: calc(1320px + 2 * var(--space-10));
  width: 100%;
  margin: 0 auto;
  padding: var(--space-6) var(--space-10) var(--space-5);
}

/* "Settled" state — toggled by JS (public/js/marketing.js) once the page
   scrolls off the top. Deliberately changes NOTHING that affects layout: no
   size/padding shift (no reflow jump), no backdrop-filter (no first-paint
   white flash). Just a subtle darken + border + lift, faded in via transition.
   The 1px border-bottom is always present (transparent at top) so toggling its
   colour can't nudge the bar's height. */
.nav--stuck {
  background-color: var(--canvas-lamplight-deep);
  border-bottom-color: rgba(237, 231, 214, 0.12);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--ink-parchment);
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.nav__brand-logo {
  height: 21.6px;
  width: auto;
  display: block;
  flex-shrink: 0;
}

.nav__links {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  justify-content: center;
  gap: var(--space-10);
}
/* Dropdown-only entries (Sign in + the CTA). Hidden while the bar is wide
   enough to hold them in .nav__actions; the ≤900 block turns them on. */
.nav__links-item--mobile { display: none; }
.nav__links a {
  color: var(--ink-parchment-muted);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: color var(--transition);
}
.nav__links a:hover { color: var(--ink-parchment); }
.nav__links .nav__link--muted { color: var(--ink-parchment-faint); }
.nav__links .nav__link--muted::after {
  content: 'soon';
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-left: var(--space-2);
  padding: 2px 6px;
  border: 1px solid rgba(237,231,214,0.16);
  border-radius: 2px;
  vertical-align: 1px;
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}
.nav__signin {
  color: var(--ink-parchment-muted);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  transition: color var(--transition);
}
.nav__signin:hover { color: var(--ink-parchment); }

.btn-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  padding: 12px 20px;
  border-radius: 3px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: opacity var(--transition), background var(--transition), border-color var(--transition);
  white-space: nowrap;
}
.btn-cta--inverse {
  background: var(--ink-parchment);
  color: var(--canvas-lamplight);
  border-color: var(--ink-parchment);
  padding: 10px 16px;
  font-size: 0.8125rem;
}
.btn-cta--inverse:hover { opacity: 0.92; }

.btn-cta--primary {
  background: var(--ink-parchment);
  color: var(--canvas-lamplight);
  border-color: var(--ink-parchment);
  padding: 16px 24px;
  font-size: 0.9375rem;
}
.btn-cta--primary:hover { opacity: 0.92; }

.btn-cta--ghost {
  background: transparent;
  color: var(--ink-parchment);
  border-color: rgba(237,231,214,0.28);
  padding: 16px 24px;
  font-size: 0.9375rem;
}
.btn-cta--ghost:hover {
  border-color: var(--ink-parchment);
  background: rgba(237,231,214,0.04);
}

.nav__menu {
  display: none;
  background: transparent;
  border: 1px solid rgba(237,231,214,0.2);
  border-radius: 3px;
  /* 44×44 is the Apple HIG minimum tap target. This is now the ONLY control
     in the bar on a phone (the ≤560 block hides .nav__actions), so it is the
     one thing that must not be fiddly to hit. */
  width: 44px; height: 44px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}
.nav__menu span {
  width: 16px; height: 1.5px;
  background: var(--ink-parchment);
}

/* ─── Hero container ─── */
.hero__container {
  position: relative;
  z-index: 3;
  flex: 1;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: var(--space-16);
  align-items: center;
  max-width: 1320px;
  width: 100%;
  margin: 0 auto;
  padding-top: var(--space-12);
}

/* ─── Copy column ─── */
.hero__copy { max-width: 580px; }

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(237, 231, 214, 0.9);
  margin-bottom: var(--space-10);
}
.hero__eyebrow-rule {
  width: 32px; height: 1px;
  background: rgba(237, 231, 214, 0.75);
}

.hero__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(3.5rem, 8.2vw, 7.5rem);
  line-height: 0.96;
  letter-spacing: -0.025em;
  color: var(--ink-parchment);
  margin: 0 0 var(--space-10);
  text-wrap: balance;
}
.hero__title--editorial {
  font-size: clamp(1.875rem, 3.4vw, 2.875rem);
  line-height: 1.12;
  letter-spacing: -0.018em;
  font-weight: 500;
  margin-bottom: var(--space-5);
  max-width: 22ch;
}
.hero__title-followup {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.45;
  color: var(--ink-parchment-muted);
  margin: 0 0 var(--space-8);
  max-width: 36ch;
  text-wrap: pretty;
}
.hero__tagline {
  font-family: var(--font-heading);
  font-style: normal;
  font-weight: 400;
  font-size: 1.125rem;
  letter-spacing: 0.005em;
  color: var(--ink-parchment);
  margin: 0 0 var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(237, 231, 214, 0.14);
  max-width: 36ch;
}
.hero__microcopy-old {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-parchment-faint);
  align-self: center;
}
.hero__title em {
  font-style: normal;
  font-weight: 400;
  /* slight optical lift — italics carry meaning */
  color: #d4cfb8;
}

.hero__lede {
  font-family: var(--font-body);
  font-size: 1.1875rem;
  line-height: 1.65;
  color: var(--ink-parchment);
  max-width: 46ch;
  margin: 0 0 var(--space-6);
  text-wrap: pretty;
  font-weight: 400;
}

.hero__actions {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: var(--space-3);
}

.btn-cta--text {
  background: transparent;
  color: var(--ink-parchment);
  border-color: transparent;
  padding: 16px 8px;
  font-size: 0.9375rem;
  font-weight: 500;
  border-bottom: 1px solid rgba(237,231,214,0.28);
  border-radius: 0;
}
.btn-cta--text:hover {
  border-bottom-color: var(--ink-parchment);
  background: transparent;
}

.hero__microcopy {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-parchment-faint);
  margin: 0 0 var(--space-12);
  padding-left: 2px;
}

.hero__meta {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: var(--space-10);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(237, 231, 214, 0.14);
  align-items: start;
}
.hero__meta-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.hero__meta-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-parchment-faint);
}
.hero__meta-value {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--ink-parchment);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.hero__meta-value em {
  font-family: var(--font-heading);
  font-style: normal;
  font-weight: 400;
  font-size: 1rem;
  color: var(--ink-parchment);
}

.hero__pulse {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #94c2a8;
  box-shadow: 0 0 0 0 rgba(148, 194, 168, 0.6);
  animation: heroPulse 2.4s ease-out infinite;
}
@keyframes heroPulse {
  0%   { box-shadow: 0 0 0 0 rgba(148, 194, 168, 0.5); }
  70%  { box-shadow: 0 0 0 8px rgba(148, 194, 168, 0); }
  100% { box-shadow: 0 0 0 0 rgba(148, 194, 168, 0); }
}

/* ─── Visual column ─── */
.hero__visual {
  position: relative;
  align-self: center;
}

.hero__placard {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  padding-left: var(--space-2);
}
.hero__placard-num {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-parchment-faint);
}
.hero__placard-name {
  font-family: var(--font-heading);
  font-style: normal;
  font-weight: 400;
  font-size: 1rem;
  color: var(--ink-parchment-muted);
}

/* ─── Frame: warm matte presentation frame around UI ─── */
.frame {
  position: relative;
  background: #2b2118;            /* dark walnut frame */
  border-radius: 4px;
  padding: 14px 14px 0;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 30px 60px rgba(0,0,0,0.45),
    0 80px 140px rgba(0,0,0,0.35);
  /* subtle wood-grain feel */
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.012) 2px, rgba(255,255,255,0.012) 3px),
    linear-gradient(180deg, #322619 0%, #221a13 100%);
}
.frame::before {
  /* inner mat shadow */
  content: '';
  position: absolute;
  inset: 8px 8px 0;
  border-radius: 3px;
  pointer-events: none;
  box-shadow: inset 0 1px 4px rgba(0,0,0,0.5);
  z-index: 1;
}
.frame__mat {
  position: relative;
  background: #e8e4dc;
  padding: 28px;
  border-radius: 2px;
  z-index: 0;
}
.frame__caption {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 14px 6px 14px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(237,231,214,0.55);
  border-top: 1px solid rgba(255,255,255,0.04);
  margin-top: 14px;
}
.frame__caption-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #94c2a8;
}

/* ─── Owner report mock ─── */
.report {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  padding: 22px 24px;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.report__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-border);
}
.report__brand {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
}
.report__brand-mark {
  width: 14px; height: 14px;
  background: var(--color-accent);
  border-radius: 50%;
  position: relative;
}
.report__brand-mark::after {
  content: '';
  position: absolute; inset: 3px;
  border: 1px solid #fff;
  border-radius: 50%;
  border-top-color: transparent;
  border-right-color: transparent;
  transform: rotate(-45deg);
}
.report__meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--color-text-faint);
  text-transform: uppercase;
  margin-top: 6px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.report__meta strong { color: var(--color-text); font-weight: 500; }
.report__meta-sep { opacity: 0.5; }

.report__status {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  background: var(--color-accent-light);
  padding: 4px 8px;
  border-radius: 2px;
}

.report__title-block { padding: 20px 0 16px; }
.report__eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-text-faint);
  display: block;
  margin-bottom: 8px;
}
.report__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--color-text);
  margin: 0 0 6px;
}
.report__sub {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.55;
  margin: 0;
  max-width: 52ch;
}

.report__metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 12px 0 14px;
  border-top: 1px solid var(--color-border-subtle);
  border-bottom: 1px solid var(--color-border-subtle);
}
.report__metric {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 0;
}
.report__metric-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}
.report__metric-value {
  font-family: var(--font-mono);
  font-size: 19px;
  font-weight: 500;
  color: var(--color-text);
  letter-spacing: -0.01em;
  line-height: 1;
}
.report__metric-delta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-accent);
  letter-spacing: 0.02em;
}

.report__chart {
  padding: 14px 0 8px;
}
.report__chart-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  display: block;
  margin-bottom: 4px;
}
.report__chart-svg {
  width: 100%; height: 56px;
  display: block;
}

.report__rows {
  border-top: 1px solid var(--color-border-subtle);
  padding-top: 6px;
  margin-top: 4px;
}
.report__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 5px 0;
  font-size: 12px;
  color: var(--color-text);
}
.report__row-label { color: var(--color-text); }
.report__row--muted .report__row-label { color: var(--color-text-muted); }
.report__row-value {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-text);
}
.report__row--muted .report__row-value { color: var(--color-text-muted); }
.report__row--total {
  border-top: 1px solid var(--color-border);
  margin-top: 4px;
  padding-top: 8px;
}
.report__row--total .report__row-label {
  font-family: var(--font-heading);
  font-style: normal;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text);
}
.report__row--total .report__row-value {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 600;
  color: var(--color-accent);
  letter-spacing: -0.01em;
}

.report__note {
  margin-top: 14px;
  padding: 14px 16px;
  background: var(--color-accent-light);
  border-radius: 2px;
  border-left: 2px solid var(--color-accent);
}
.report__note-eyebrow {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-accent);
  display: block;
  margin-bottom: 6px;
}
.report__note-body {
  font-family: var(--font-narrative);
  font-style: normal;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--color-text);
  margin: 0;
}
.report__note-body em { font-weight: 700; font-style: normal; }

/* ─── Hero floor (bottom rule) ─── */
/* ─── Release section below hero ─── */
.release {
  background: var(--color-bg);
  padding: var(--space-12) var(--space-10);
  border-bottom: 1px solid var(--color-border-subtle);
}
.release__inner {
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-align: center;
}
.release__label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}
.release__title {
  font-family: var(--font-heading);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  color: var(--color-text);
  letter-spacing: -0.01em;
}
.release__hint {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  max-width: 60ch;
  margin: 0 auto;
}

/* ─────────────────────────────────────────────────────────────────────
   Threshold — "Own the relationship."
   Full-bleed typographic exhale between hero and Section 2.
   No supporting copy. No CTA. Type and space, doing all the work.
   ───────────────────────────────────────────────────────────────────── */
.threshold {
  position: relative;
  background: var(--color-bg);                 /* warm cream — first light */
  padding: clamp(140px, 18vw, 240px) var(--space-10) clamp(80px, 10vw, 130px);
  border-bottom: 1px solid var(--color-border-subtle);
}

.threshold__inner {
  max-width: 1320px;
  margin: 0 auto;
  text-align: center;
}

.threshold__line {
  font-family: var(--font-heading);
  font-weight: 500;                            /* heavier than hero h1 (400) */
  font-style: normal;
  font-size: clamp(3.25rem, 8vw, 6.5rem);      /* slow & large — slower than anything above */
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--color-text);
  margin: 0;
  text-wrap: balance;
}

/* ─────────────────────────────────────────────────────────────────────
   Section 2 — The Problem
   Continues the warm light surface. Type-only. Short. Sharp.
   ───────────────────────────────────────────────────────────────────── */
.problem {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--color-bg);
  min-height: 660px;
  /* role accents for the message avatars + labels (section-local) */
  --ms-bubble-in: #E9E7E1;
  --ms-guest: #B0772A;
  --ms-cleaner: #3E6B4A;
  --ms-owner: #5A6B86;
  --ms-acct: #7A6B86;
  --ms-platform: #9A9488;
}

/* ── the scrolling stream (fills the section; fades under the copy) ── */
.ms-stream { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.ms-col {
  position: absolute; top: 0; width: 238px;
  display: flex; flex-direction: column; gap: 18px;
  animation: ms-streamUp linear infinite;
  will-change: transform;
}
@keyframes ms-streamUp { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@media (prefers-reduced-motion: reduce) { .ms-col { animation: none !important; } }

.ms-msg { display: flex; gap: 9px; align-items: flex-end; }
.ms-msg.out { flex-direction: row-reverse; }
.ms-ava {
  /* z-index above .ms-bubble (z-index:1) so the bubble's cream tail cutout
     (.ms-bubble.in::after, which overhangs ~5px past the 9px gap) can't paint
     over the avatar's edge. */
  position: relative; z-index: 2;
  width: 30px; height: 30px; border-radius: 50%; flex: none; color: #fff;
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px -2px rgba(26, 26, 26, 0.35);
}
.ms-stack { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ms-msg.out .ms-stack { align-items: flex-end; }
.ms-name { display: flex; gap: 7px; align-items: baseline; padding: 0 7px; font-size: 11px; color: var(--color-text-faint); }
.ms-name b { color: var(--color-text-muted); font-weight: 600; font-size: 11.5px; }
.ms-role { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.12em; font-weight: 600; }
.ms-msg.g .ms-role { color: var(--ms-guest); }
.ms-msg.c .ms-role { color: var(--ms-cleaner); }
.ms-msg.o .ms-role { color: var(--ms-owner); }
.ms-msg.a .ms-role { color: var(--ms-acct); }
.ms-msg.p .ms-role { color: var(--ms-platform); }
.ms-bubble {
  position: relative; z-index: 1; display: inline-block; border-radius: 18px;
  padding: 8px 14px 9px; font-size: 13.5px; line-height: 1.36; max-width: 224px;
  background: var(--ms-bubble-in); color: #2A2823;
  box-shadow: 0 1px 1px rgba(26, 26, 26, 0.04), 0 14px 24px -18px rgba(26, 26, 26, 0.42);
}
.ms-bubble.in { border-bottom-left-radius: 6px; }
.ms-bubble.out { background: var(--color-accent); color: #EFF4EC; border-bottom-right-radius: 6px; }
.ms-bubble.in::before  { content: ""; position: absolute; z-index: -1; bottom: -1px; left: -7px;  width: 20px; height: 19px; background: var(--ms-bubble-in); border-bottom-right-radius: 16px; }
.ms-bubble.in::after   { content: ""; position: absolute; z-index: -1; bottom: -1px; left: -14px; width: 14px; height: 19px; background: var(--color-bg); border-bottom-right-radius: 12px; }
.ms-bubble.out::before { content: ""; position: absolute; z-index: -1; bottom: -1px; right: -7px;  width: 20px; height: 19px; background: var(--color-accent); border-bottom-left-radius: 16px; }
.ms-bubble.out::after  { content: ""; position: absolute; z-index: -1; bottom: -1px; right: -14px; width: 14px; height: 19px; background: var(--color-bg); border-bottom-left-radius: 12px; }

/* veils: fade the stream out toward the copy (right) + soften top/bottom edges */
.ms-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(247, 245, 240, 0) 0%, rgba(247, 245, 240, 0) 24%, rgba(247, 245, 240, 0.82) 42%, var(--color-bg) 54%);
}
.ms-fade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, var(--color-bg) 0%, rgba(247, 245, 240, 0) 13%, rgba(247, 245, 240, 0) 87%, var(--color-bg) 100%);
}

/* ── copy (right) ── */
.problem__copy {
  position: absolute; right: 0; top: 0; height: 100%; width: min(600px, 52%);
  display: flex; flex-direction: column; justify-content: center; z-index: 2;
  padding: 72px 72px 72px 24px;
}
.problem__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--eyebrow-ink);
  margin: 0 0 22px;
}
.problem__eyebrow-rule {
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--color-text-faint);
}
.problem__headline {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(2rem, 4.2vw, 2.875rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--color-text);
  margin: 0;
  text-wrap: pretty;
}
.problem__headline em {
  font-style: normal;
  font-weight: 400;
  /* color comes from the accent modifier class (e.g. .hl-accent--green) */
}
.problem__body {
  margin: 22px 0 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.problem__para {
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--color-text-muted);
  margin: 0;
  max-width: 440px;
  text-wrap: pretty;
}

@media (max-width: 820px) {
  /* Stacked: the message stream reads as a band across the top, the copy sits
     below it. --ms-zone is the height of that band and is used TWICE — as the
     padding that reserves it, and as the basis for the veil's gradient stops.
     One value, so the fade cannot drift away from the space it is fading.

     ⚠️ That coupling is the fix. The stops used to be PERCENTAGES (0.85 at
     46%, solid at 62%), but .ms-stream is inset:0 on .problem, which at this
     breakpoint is the band PLUS the whole copy block. So 46% of that total
     landed well below where the headline starts, and the stream was still at
     ~85% opacity behind "The urgent stuff finds you." Percentages of a
     container that grew are the bug; absolute stops tied to the band are not. */
  .problem {
    --ms-zone: 360px;
    min-height: 0;
    padding-top: var(--ms-zone);
  }

  /* Full strength through the top half of the band, then a decisive fade that
     is COMPLETE before the copy begins. The illustration should be at its most
     legible where it has room to be, and gone — not merely dimmed — where the
     words are. */
  .ms-veil {
    background: linear-gradient(180deg,
      rgba(247, 245, 240, 0)    0,
      rgba(247, 245, 240, 0)    calc(var(--ms-zone) * 0.34),
      rgba(247, 245, 240, 0.55) calc(var(--ms-zone) * 0.62),
      rgba(247, 245, 240, 0.92) calc(var(--ms-zone) * 0.84),
      var(--color-bg)           calc(var(--ms-zone) - 8px));
  }

  /* The shared .ms-fade lays --color-bg over the TOP edge, which is what was
     washing out the first rows. On a phone the band starts at a section
     boundary, so it needs almost nothing — just enough to avoid a hard cut. */
  .ms-fade {
    background: linear-gradient(180deg,
      rgba(247, 245, 240, 0.45) 0,
      rgba(247, 245, 240, 0)    56px);
  }

  .problem__copy {
    position: relative; width: 100%; height: auto;
    padding: 0 28px 56px;
  }
  .problem__headline { font-size: 36px; }
}

/* ─────────────────────────────────────────────────────────────────────
   Section 3 — The Stewardship Rhythm
   Two-column layout: tree-rings photo rail (left) + editorial content
   (right). Forest-green trust band spans the full width at the bottom.
   ───────────────────────────────────────────────────────────────────── */
.rhythm {
  position: relative;
  background: var(--color-bg);
  border-top: 1px solid var(--color-border-subtle);
  overflow: hidden;
}

.rhythm__layout {
  display: grid;
  grid-template-columns: 1fr minmax(360px, 42%);   /* content (left) · report rail (right) */
  min-height: clamp(620px, 80vh, 900px);
}

/* ── Left rail: photograph ──────────────────────────────────────── */
.rhythm__rail {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: #2A1B11;
}
.rhythm__rail-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Eyebrow inside the rail, top-left with rule */
.rhythm__rail-eyebrow {
  position: absolute;
  top: clamp(28px, 4vh, 44px);
  left: clamp(20px, 3vw, 36px);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(247, 245, 240, 0.92);
  z-index: 2;
}
.rhythm__rail-eyebrow-rule {
  display: inline-block;
  width: 28px;
  height: 1px;
  background: rgba(247, 245, 240, 0.7);
}

/* Bottom-left section stamp */
.rhythm__rail-stamp {
  position: absolute;
  left: clamp(20px, 3vw, 36px);
  bottom: clamp(96px, 12vh, 140px);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.55;
  color: rgba(220, 230, 240, 0.95);
  background: rgba(70, 100, 130, 0.32);
  padding: 6px 10px;
  z-index: 2;
}

/* ── Right column: content ──────────────────────────────────────── */
.rhythm__content {
  position: relative;
  padding: clamp(48px, 6vh, 80px) clamp(40px, 6vw, 96px) clamp(40px, 5vh, 64px);
  display: flex;
  flex-direction: column;
}

/* Placeholder credit slug, top-right of content column */
.rhythm__placeholder {
  position: absolute;
  top: clamp(28px, 4vh, 44px);
  right: clamp(40px, 6vw, 96px);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.rhythm__placeholder-rule {
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--color-text-faint);
}

.rhythm__headline {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(2.5rem, 5.4vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--color-text);
  margin: clamp(40px, 6vh, 80px) 0 clamp(20px, 2.5vw, 32px);
  text-wrap: balance;
}
.rhythm__headline em {
  font-style: normal;
  font-weight: 400;
  color: var(--color-accent);
}

.rhythm__subhead {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height: 1.5;
  color: var(--color-text-muted);
  margin: 0 0 clamp(32px, 4vw, 56px);
  max-width: 52ch;
}

.rhythm__rule {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 0 0 clamp(32px, 4vw, 56px);
}

/* ── Cards row ──────────────────────────────────────────────────── */
.rhythm__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 4vw, 72px);
}

.rcard {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, .5vw, 16px);
}

.rcard__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}

.rcard__icon {
  flex-shrink: 0;
  display: inline-flex;
}

.rcard__icon svg {
  display: block;
  width: clamp(30px, 3vw, 36px);
  height: clamp(30px, 3vw, 36px);
}

.rcard__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(1.375rem, 1.85vw, 1.625rem);   /* sized so "Monthly Stewardship" holds one line */
  line-height: 1.15;
  letter-spacing: -0.018em;
  color: var(--color-text);
  margin: 0;
  text-wrap: balance;
}

.rcard__role {
  font-family: var(--font-heading);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(0.9375rem, 1.05vw, 1.0625rem);
  color: var(--color-text-muted);
  margin: 0;
}

.rcard__body {
  font-family: var(--font-body);
  font-size: clamp(0.9375rem, 1.05vw, 1rem);
  line-height: 1.6;
  color: var(--color-text);
  margin: clamp(6px, 0.8vw, 12px) 0 0;
  max-width: 36ch;
}

/* ── Forest-green trust band, bottom of section ─────────────────── */
.rhythm__band {
  background: var(--color-accent);
  padding: clamp(20px, 2.6vw, 32px) clamp(28px, 5vw, 80px);
  text-align: center;
}

.rhythm__band-text {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(1.125rem, 1.9vw, 1.625rem);
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--ink-parchment);
  margin: 0;
  text-wrap: balance;
}
.rhythm__band-text em {
  font-style: normal;
  font-weight: 400;
  color: var(--ink-parchment);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: rgba(237, 231, 214, 0.55);
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 880px) {
  .rhythm__layout {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .rhythm__rail {
    height: 280px;
  }
  .rhythm__rail-stamp {
    bottom: clamp(20px, 3vh, 32px);
  }
  .rhythm__placeholder {
    position: static;
    margin-bottom: 24px;
  }
  .rhythm__headline {
    margin-top: 8px;
  }
  .rhythm__cards {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* ─── Device rail (mobile preview) ─── */
.device-rail {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 50;
  width: 232px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.18);
  display: none;
}
.device-rail--on { display: block; }
.device-rail__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 4px 8px;
  border-bottom: 1px solid var(--color-border-subtle);
  margin-bottom: 8px;
}
.device-rail__eyebrow {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}
.device-rail__title {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-text);
}
.device-rail__phone {
  width: 100%;
  aspect-ratio: 390 / 844;
  background: #000;
  border-radius: 22px;
  padding: 6px;
  overflow: hidden;
}
.device-rail__frame {
  width: 100%; height: 100%;
  border: 0;
  border-radius: 18px;
  background: var(--canvas-lamplight);
}

/* ─── Responsive ─── */
@media (max-width: 1100px) {
  .hero { padding: var(--space-5) var(--space-8) var(--space-10); }
  .hero__container { gap: var(--space-10); padding-top: var(--space-8); }
  .hero__title { font-size: clamp(3rem, 8vw, 5.5rem); }
}

@media (max-width: 900px) {
  .hero { padding: var(--space-4) var(--space-5) var(--space-10); }
  .nav__inner { gap: var(--space-4); padding: var(--space-4) var(--space-5); }
  .nav__signin { display: none; }
  .nav__menu { display: flex; }
  .nav__actions .btn-cta--inverse { padding: 8px 12px; font-size: 0.75rem; }

  /* Mobile menu — a FULL-VIEWPORT overlay, not a dropdown panel. A short panel
     hanging under the bar leaves the hero half-visible behind it, so the menu
     reads as an accident on top of the page rather than a place you went.
     Fixed to the viewport, starting exactly below the bar: --nav-h is measured
     and set by public/js/marketing.js on every toggle (the fallback matches
     2 × --space-4 + the 44px toggle). z-index sits below .nav's 50 so the bar
     and its close button stay above the overlay. */
  .nav__links {
    display: none;
    position: fixed;
    top: var(--nav-h, 76px); left: 0; right: 0; bottom: 0;
    z-index: 40;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;
    padding: var(--space-4) var(--space-5) var(--space-8);
    overflow-y: auto;
    background-color: var(--canvas-lamplight-deep);
    border-top: 1px solid rgba(237, 231, 214, 0.1);
  }
  .nav--open .nav__links { display: flex; }
  .nav--open .nav__links li + li { border-top: 1px solid rgba(237, 231, 214, 0.08); }

  /* THE WHOLE ROW IS THE TARGET, not the words. The padding used to sit on the
     <li> with an inline <a> inside it, so the hit area was exactly the width
     and height of the text — a thumb landing anywhere else in the row did
     nothing. Padding moves to the anchor, which goes block-level and fills the
     row; min-height keeps every row past the 44px tap-target floor even for a
     short label like "Pilot". */
  .nav--open .nav__links li { padding: 0; }
  .nav--open .nav__links a {
    display: flex;
    align-items: center;
    min-height: 52px;
    font-size: 1rem;
  }

  /* Sign in + the CTA move into the dropdown the moment the hamburger appears.
     Sign in had NO mobile home before this — .nav__signin goes display:none at
     this same breakpoint, so a returning operator on a phone could not reach
     the app from the marketing site at all. */
  .nav__links-item--mobile { display: list-item; }
  /* ⚠️ Scoped with .nav__links deliberately: `.nav__links a` is (0,1,1) and
     would out-specify a bare `.nav__links-cta` (0,1,0), rendering the primary
     conversion action in the same muted grey as the section links. */
  .nav__links .nav__links-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--ink-parchment);
    font-weight: 600;
  }

  .nav__menu span { transition: transform var(--transition); }
  .nav--open .nav__menu span:first-child { transform: translateY(3.25px) rotate(45deg); }
  .nav--open .nav__menu span:last-child { transform: translateY(-3.25px) rotate(-45deg); }

  .hero__container {
    grid-template-columns: 1fr;
    gap: var(--space-12);
    padding-top: var(--space-8);
  }
  .hero__copy { max-width: 100%; }
  .hero__title { font-size: clamp(2.75rem, 11vw, 4.5rem); line-height: 0.98; }
  .hero__lede { font-size: 1.0625rem; }
  .hero__meta {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .hero__actions { margin-bottom: var(--space-12); }
  .hero__visual { margin: 0 -8px; }
  .frame { padding: 10px 10px 0; }
  .frame__mat { padding: 14px; }
  .report { padding: 16px; }
  .report__title { font-size: 22px; }
  .report__metric-value { font-size: 16px; }
  .device-rail { display: none !important; }
}

/* ─── Phone portrait (≤560) ───────────────────────────────────────────────
   Portrait and landscape are different compositions, not one composition at
   two sizes. Below this width the hero visual is REDUCED, not reflowed: fewer
   columns, fewer cards, and everything that survives gets BIGGER.

   The reasoning: on desktop the occupancy grid is a small framed thumbnail
   inside a wide hero, so 8px micro-labels read as texture. On a phone the
   frame is nearly full-width — the same 8px is just illegible, and the
   thumbnail's density no longer buys anything. Six columns of 11px figures
   become three columns of 13px ones, and two recommendation cards become one.
   Same idea, told with fewer elements at a readable size.

   Measured before/after with `npm run mobile:audit` at 320 / 360 / 390. */
@media (max-width: 560px) {
  /* ── Nav ──
     The bar keeps brand + menu toggle only. This is the fix for the 390px
     floor: brand + "Get early access" + hamburger needed exactly 390px, so on
     any phone narrower than an iPhone 14 the nav pinned document.scrollWidth
     to 390 and EVERY section scrolled sideways (70px at 320, 30px at 360).
     body had overflow-x:hidden but html did not, so the band-aid never took.
     Nothing is lost: both actions live in the dropdown from 900px down. */
  .nav__actions { display: none; }

  /* ⚠️ Re-column the bar once .nav__actions is gone. .nav__inner is
     `auto 1fr auto` and auto-places its children, so with the actions removed
     the toggle lands in the middle 1fr track — left-aligned against the brand
     with dead space to its right, which is exactly how it looked. Two tracks:
     brand takes the slack, toggle sits hard right. */
  .nav__inner { grid-template-columns: 1fr auto; }

  /* Buttons go full width. Two ~200px buttons stacked at the left edge read as
     an afterthought against a full-bleed hero; edge-to-edge they read as the
     point. Full width rather than 50/50 columns because "Get Early Access" and
     "See How It Works" are not peers — the primary should not be boxed into
     half the screen to keep a secondary company. */
  .hero__actions { flex-direction: column; align-items: stretch; gap: var(--space-3); }
  .hero__actions .btn-cta { width: 100%; justify-content: center; }

  .hero__visual { margin: 0; }

  /* ── The owner report abstract: TEASE it, don't reproduce it ──
     Landscape shows the whole statement — masthead, narrative, both headline
     metrics, nine line items, the total and a manager's note. In portrait that
     is a wall of small type the reader scrolls past, and a statement you have
     already read in full is not a reason to click anything.
     So: keep the masthead, the property, the narrative and the two figures
     that carry the promise (net to owner, gross revenue), then cut to a fade
     mid-ledger. The unfinished edge is the point — it reads as "there is more
     of this", which is the job this illustration actually has. */
  .report__rows > :nth-child(n + 4) { display: none; }   /* incl. the total row */
  .report__rows {
    -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
  }
  .report__note { display: none; }

  /* The status badge wrapped onto two lines and collided with "Prepared for".
     It is a chip; chips do not wrap. */
  .report__status { white-space: nowrap; font-size: 9px; padding: 3px 6px; }
  .report__header { gap: var(--space-3); }

  /* ⚠️ The hero VISUAL's portrait rules are NOT here — they live immediately
     after the .occgrid/.occreco base declarations (~line 3070), because those
     are single-class selectors of equal specificity and this block sits
     earlier in the file. Written here, `font-size: 13px` loses to the base
     `font-size: 11px` further down and the structure changes while the type
     silently stays at 8–11px. Found exactly that way. */
}

@media (max-width: 480px) {
  .hero { padding: var(--space-3) var(--space-4) var(--space-8); }
  .hero__container { padding-top: var(--space-6); }
  .report__metrics { grid-template-columns: 1fr 1fr; }
  .report__metrics .report__metric:last-child { display: none; }
}

/* ─────────────────────────────────────────────────────────────────────
   Section 4 — Built for Every Stage of the Owner Relationship
   One direction: three contained cards on the warm cream surface,
   dominant stage labels, an explicit numbered + arrow progression.
   Attract → Perform → Trust.
   ───────────────────────────────────────────────────────────────────── */

.stage4 {
  background: var(--color-bg);
  padding: clamp(72px, 9vw, 120px) clamp(24px, 5vw, 80px) clamp(80px, 10vw, 128px);
  color: var(--color-text);
}

.stage4__inner {
  max-width: 1320px;
  margin: 0 auto;
}

/* ── Header ──────────────────────────────────────────────────────── */
.stage4__head {
  max-width: 1000px;
  margin-bottom: clamp(48px, 6vw, 80px);
}
.stage4__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--eyebrow-ink);
  margin-bottom: 26px;
}
.stage4__eyebrow-rule {
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--color-text-faint);
}
.stage4__headline {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(2.125rem, 4vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -0.022em;
  color: var(--color-text);
  margin: 0;
  max-width: 22ch;
  text-wrap: pretty;
}
.stage4__headline em {
  font-style: normal;
  font-weight: 400;
  color: var(--color-accent);
}

/* ── Cards row + connectors ──────────────────────────────────────── */
.stage4__row {
  display: flex;
  align-items: stretch;
  gap: 0;
}

.scard {
  flex: 1 1 0;
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: clamp(32px, 2.6vw, 44px) clamp(28px, 2.4vw, 40px) clamp(36px, 3vw, 48px);
  box-shadow:
    0 1px 2px rgba(38, 30, 18, 0.04),
    0 18px 40px rgba(38, 30, 18, 0.07);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.scard:hover {
  transform: translateY(-6px);
  box-shadow:
    0 2px 4px rgba(38, 30, 18, 0.05),
    0 28px 60px rgba(38, 30, 18, 0.12);
}

/* forest-green seam along the top edge — a quiet shelf the card sits in */
.scard::before {
  content: '';
  position: absolute;
  top: -1px;
  left: clamp(28px, 2.4vw, 40px);
  right: clamp(28px, 2.4vw, 40px);
  height: 2px;
  background: var(--color-accent);
  border-radius: 0 0 2px 2px;
  opacity: 0.9;
}

/* ── Card header: numbered sequence ──────────────────────────────── */
.scard__num {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: clamp(28px, 3vw, 40px);
}
.scard__num-fig {
  font-size: 0.8125rem;
  font-weight: 600;
}
.scard__num-rule {
  flex: 1;
  height: 1px;
  background: var(--color-border);
}
.scard__num-of {
  color: var(--color-text-faint);
  letter-spacing: 0.14em;
}

/* ── Dominant stage label — the primary visual anchor ────────────── */
.scard__label {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(2.75rem, 3.6vw, 3.75rem);
  line-height: 0.98;
  letter-spacing: -0.028em;
  color: var(--color-text);
  margin: 0 0 clamp(20px, 1.8vw, 28px);
}

.scard__body {
  font-family: var(--font-body);
  font-size: clamp(0.9375rem, 1vw, 1.0625rem);
  line-height: 1.62;
  color: var(--color-text-muted);
  margin: 0;
  text-wrap: pretty;
}

/* ── Connector between cards: arrow node in the gap ──────────────── */
.sconnect {
  flex: 0 0 clamp(48px, 5vw, 84px);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}
.sconnect__node {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--ink-parchment);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(29, 74, 53, 0.28);
}
.sconnect__node svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* ── Mobile: stack, connectors rotate to point down ──────────────── */
@media (max-width: 860px) {
  .stage4__row { flex-direction: column; }
  .scard { width: 100%; }
  .sconnect { flex: 0 0 auto; padding: 14px 0; }
  .sconnect__node { transform: rotate(90deg); }
}

/* ─────────────────────────────────────────────────────────────────────
   Section 5 — Social Proof (Founder credibility)
   Warm cream surface. Grounded + human: Brian's portrait + origin story,
   with the 2× revenue YoY stat treated as the eye-stopping centerpiece.
   ───────────────────────────────────────────────────────────────────── */

.founder {
  background: var(--color-bg);
  padding: clamp(72px, 9vw, 124px) clamp(24px, 5vw, 80px) clamp(80px, 10vw, 128px);
  color: var(--color-text);
}
.founder__inner {
  max-width: 1280px;
  margin: 0 auto;
}

/* ── Header ──────────────────────────────────────────────────────── */
.founder__head {
  max-width: 820px;
  margin-bottom: clamp(48px, 6vw, 80px);
}
.founder__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--eyebrow-ink);
  margin-bottom: 26px;
}
.founder__eyebrow-rule {
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--color-text-faint);
}
.founder__headline {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(2.125rem, 4.4vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: -0.022em;
  color: var(--color-text);
  margin: 0;
  text-wrap: balance;
}
.founder__headline em {
  font-style: normal;
  font-weight: 400;
  color: var(--color-accent);
}

/* ── Body: portrait + story ──────────────────────────────────────── */
.founder__body {
  display: grid;
  grid-template-columns: minmax(280px, 0.82fr) 1.18fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: start;
}

/* Portrait placeholder */
.founder__figure {
  margin: 0;
}
.founder__photo {
  position: relative;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--color-border-dark);
  border-radius: 6px;
  overflow: hidden;
  background-color: #EDEAE2;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(29, 74, 53, 0.05) 0,
    rgba(29, 74, 53, 0.05) 1px,
    transparent 1px,
    transparent 11px
  );
  display: flex;
  align-items: flex-end;
  box-shadow:
    0 1px 2px rgba(38, 30, 18, 0.04),
    0 22px 48px rgba(38, 30, 18, 0.08);
}
.founder__photo-tag {
  position: absolute;
  top: 16px;
  left: 16px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: rgba(247, 245, 240, 0.86);
  border: 1px solid var(--color-border);
  padding: 5px 9px;
  border-radius: 3px;
}
.founder__photo-note {
  margin: 18px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--color-text-faint);
}
.founder__photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.founder__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin-top: 14px;
}
.founder__caption-note {
  flex-basis: 100%;                 /* own line, below name + role */
  font-family: var(--font-body);
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--color-text-muted);
}
.founder__caption-name {
  font-family: var(--font-heading);
  font-style: normal;
  font-weight: 400;
  font-size: 1.0625rem;
  color: var(--color-text);
}
.founder__caption-role {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

/* Credibility block — track-record lines below the caption; the 5-star mark
   flows inline at the start of the rating line. */
.founder__creds {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.founder__cred-item {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}
.founder__cred-item strong { color: var(--color-text); font-weight: 600; }
.founder__cred-stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-right: 7px;
  vertical-align: -0.16em;
  color: var(--color-accent-gold, #c9a85c);
}
.founder__cred-stars svg { width: 14px; height: 14px; display: block; }

/* Story column */
.founder__col {
  display: flex;
  flex-direction: column;
  padding-top: 4px;
}
.founder__para {
  font-family: var(--font-body);
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  line-height: 1.62;
  color: var(--color-text);
  margin: 0 0 var(--space-6);
  max-width: 46ch;
  text-wrap: pretty;
}
.founder__para--muted {
  color: var(--color-text-muted);
  margin-bottom: clamp(36px, 4.5vw, 60px);
}
.founder__para em {
  font-style: normal;
  font-weight: 400;
}

/* ── The 2× stat — the centerpiece ───────────────────────────────── */
.founder__stat {
  display: flex;
  align-items: center;
  gap: clamp(24px, 3vw, 48px);
  padding-top: clamp(28px, 3vw, 40px);
  border-top: 1px solid var(--color-border-dark);
}
.founder__stat-num {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(5rem, 11vw, 9.5rem);
  line-height: 0.8;
  letter-spacing: -0.04em;
  color: var(--color-accent);
  flex-shrink: 0;
}
.founder__stat-num span {
  font-family: var(--font-body);
  font-weight: 300;
  font-style: normal;
  font-size: 0.46em;
  vertical-align: 0.16em;
  margin-left: 0.04em;
  letter-spacing: 0;
}
.founder__stat-meta {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.founder__stat-label {
  font-family: var(--font-heading);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(1.125rem, 1.7vw, 1.625rem);   /* ~26px max */
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-text);
}
.founder__stat-note {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  max-width: 42ch;
}
.founder__stat-attr {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.5;
  letter-spacing: 0.08em;
  color: var(--color-text-faint);
  max-width: 42ch;
}

/* ── Mobile ──────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  .founder__body {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .founder__figure { max-width: 340px; }
  .founder__stat { flex-direction: column; align-items: flex-start; gap: 16px; }
  .founder__stat-num { font-size: clamp(4.5rem, 26vw, 7rem); }
}

/* ─────────────────────────────────────────────────────────────────────
   Section 6 — FAQ · three layout studies
   Warm cream surface. Editorial weight, no support-page tropes.
   A — styled accordion   B — all visible typographic   C — two column
   ───────────────────────────────────────────────────────────────────── */

.faq {
  background: var(--color-bg);
  padding: clamp(64px, 7vw, 100px) clamp(24px, 5vw, 80px);
  color: var(--color-text);
}
.faq__inner { margin: 0 auto; }

/* ════════ STUDY A — Styled accordion ════════════════════════════ */
/* Centered, readable column — text stays left-aligned inside it. */
.faqa__inner { max-width: 760px; margin: 0 auto; }
.faq__head {
  max-width: 760px;
  margin: 0 auto clamp(40px, 5vw, 68px);
}
.faq__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--eyebrow-ink);
  margin-bottom: 24px;
}
.faq__eyebrow-rule {
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--color-text-faint);
}

/* ─── FAQ · stacked breakpoint ────────────────────────────────────────────
   The eyebrow floated. Three things caused it and all three are spacing:
   .faq and .founder above it share the same --color-bg, so there is no
   boundary between the two sections; .faq adds 64px of top padding; and
   .faq__head adds another 40px below. The result is one uninterrupted field of
   cream with a small mono label stranded in the middle of it, ~104px from
   anything it belongs to.

   Anchor it to the questions rather than the section: sit it just above the
   first question's rule, and give the block its own surface so the eyebrow and
   the accordion read as one unit lifted off the page. */
@media (max-width: 880px) {
  .faq {
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    padding-top: clamp(28px, 6vw, 40px);
  }
  /* The gap below the eyebrow is built from THREE values, which is why
     changing one looked like nothing happened (40px → 38px):
       · .faq__eyebrow  margin-bottom  24px   ← the big one
       · .faq__head     line-box strut  7px   ← inline-flex inside a block
       · .faq__head     margin-bottom  40px
     All three collapse here to a single 14px. */
  .faq__eyebrow { margin-bottom: 0; }
  .faq__head { display: flex; margin-bottom: 14px; }   /* flex kills the strut */
}
.faq__headline {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(2.125rem, 4vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.022em;
  color: var(--color-text);
  margin: 0;
  text-wrap: balance;
}
.faqa__item {
  max-width: 860px;
  border-top: 1px solid var(--color-border);
}
.faqa__q { list-style: none; }
.faqa__q::-webkit-details-marker { display: none; }
.faqa__item:last-child { border-bottom: 1px solid var(--color-border); }
.faqa__q {
  display: flex;
  align-items: baseline;
  gap: 36px;
  width: 100%;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  padding: clamp(18px, 1.8vw, 26px) 8px clamp(18px, 1.8vw, 26px) 0;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.4vw, 2.125rem);
  line-height: 1.14;
  letter-spacing: -0.022em;
  color: var(--color-text);
  transition: color 160ms ease;
}
.faqa__q:hover { color: var(--color-accent); }
.faqa__q-text { flex: 1; text-wrap: pretty; }
.faqa__icon {
  position: relative;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 0.4em;
}
.faqa__icon::before,
.faqa__icon::after {
  content: '';
  position: absolute;
  background: var(--color-accent);
  transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms ease;
}
.faqa__icon::before { top: 50%; left: 0; right: 0; height: 1.5px; transform: translateY(-50%); }
.faqa__icon::after  { left: 50%; top: 0; bottom: 0; width: 1.5px; transform: translateX(-50%); }
.faqa__item[open] .faqa__icon::after { transform: translateX(-50%) scaleY(0); opacity: 0; }
.faqa__item[open] .faqa__q { color: var(--color-accent); }

.faqa__a {
  overflow: hidden;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.faqa__item[open] .faqa__a { grid-template-rows: 1fr; }
.faqa__a-inner { min-height: 0; }
.faqa__a p {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height: 1.66;
  color: var(--color-text-muted);
  margin: 0 0 clamp(34px, 4vw, 54px);
  max-width: 62ch;
  padding-right: 56px;
  text-wrap: pretty;
}
/* Between paragraphs of the same answer, a normal gap — the large margin above
   is the spacing to the next accordion item (kept on the last paragraph). */
.faqa__a p:not(:last-child) { margin-bottom: clamp(14px, 1.6vw, 20px); }
.faqa__a strong { color: var(--color-text); font-weight: 600; }

/* ════════ STUDY B — All visible, typographic ════════════════════ */
.faqb__inner { max-width: 920px; }
.faqb__item {
  padding: clamp(30px, 3.4vw, 48px) 0;
  border-top: 1px solid var(--color-border);
}
.faqb__item:first-child { border-top: 0; padding-top: 0; }
.faqb__num {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--color-text-faint);
  display: block;
  margin-bottom: 16px;
}
.faqb__q {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(1.625rem, 3vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.022em;
  color: var(--color-text);
  margin: 0 0 clamp(16px, 1.6vw, 22px);
  max-width: 22ch;
  text-wrap: balance;
}
.faqb__a {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.15vw, 1.125rem);
  line-height: 1.64;
  color: var(--color-text-muted);
  margin: 0;
  max-width: 60ch;
  text-wrap: pretty;
}
.faqb__a strong { color: var(--color-text); font-weight: 600; }

/* ════════ STUDY C — Two column ══════════════════════════════════ */
.faqc__inner { max-width: 1120px; }
.faqc__item {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(36px, 6vw, 96px);
  padding: clamp(30px, 3.4vw, 46px) 0;
  border-top: 1px solid var(--color-border);
  align-items: start;
}
.faqc__item:last-child { border-bottom: 1px solid var(--color-border); }
.faqc__q {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(1.25rem, 1.9vw, 1.625rem);
  line-height: 1.16;
  letter-spacing: -0.016em;
  color: var(--color-text);
  margin: 0;
  text-wrap: pretty;
}
.faqc__a {
  font-family: var(--font-body);
  font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
  line-height: 1.64;
  color: var(--color-text-muted);
  margin: 0;
  max-width: 56ch;
  padding-top: 4px;
  text-wrap: pretty;
}
.faqc__a strong { color: var(--color-text); font-weight: 600; }

@media (max-width: 720px) {
  .faqc__item { grid-template-columns: 1fr; gap: 16px; }
}

/* ─────────────────────────────────────────────────────────────────────
   Section 7 — Final CTA + Early Access form
   Forest-green full bleed (mirrors the hero). Light headline on green;
   a warm, document-like form card floats on the surface. An exhale + an
   invitation — the green does the emotional work, the form gets out of
   the way.
   ───────────────────────────────────────────────────────────────────── */

.cta {
  position: relative;
  background: var(--canvas-lamplight);
  background-image:
    radial-gradient(ellipse 90% 70% at 50% 28%, rgba(255, 247, 220, 0.045) 0%, transparent 60%),
    radial-gradient(ellipse 120% 90% at 50% 100%, rgba(0, 0, 0, 0.34) 0%, transparent 70%);
  color: var(--ink-parchment);
  padding: clamp(80px, 12vh, 168px) clamp(24px, 5vw, 80px) clamp(88px, 13vh, 176px);
  overflow: hidden;
}
/* fine grain, like the hero */
.cta::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.012) 2px, rgba(255,255,255,0.012) 3px),
    repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(255,255,255,0.012) 2px, rgba(255,255,255,0.012) 3px);
}
/* soft vignette */
.cta::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 80% 75% at 50% 45%, transparent 42%, rgba(0,0,0,0.28) 100%);
}

.cta__inner {
  position: relative;
  z-index: 1;
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* ── Headline on the green ───────────────────────────────────────── */
.cta__headline {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(2.25rem, 4.6vw, 3.625rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--ink-parchment);
  margin: 0 0 clamp(40px, 5vw, 60px);
  text-wrap: balance;
}
.cta__headline em {
  display: block;
  font-style: normal;
  font-weight: 400;
  color: #c9b886;
}

/* Rotating word ("spreadsheet" → "screenshot" → "text message") with a static,
   hand-drawn red "sharpie" strikethrough. The word sits in a FIXED-WIDTH slot
   (marketing.js sizes it to the widest word) so the preceding text never shifts
   and the line count stays put. On swap, the word rolls in from the top; the
   strike stays where it is. */
.rot {
  display: inline-block;
  text-align: left;
  white-space: nowrap;
  vertical-align: baseline;
}
.rot__text {
  position: relative;
  display: inline-block;
  transition: transform 0.39s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.34s ease;
}
.rot__label { position: relative; display: inline-block; }
.rot__word { display: inline-block; }
.rot__mark {
  position: absolute;
  left: 0;
  top: 55%;
  width: 100%;                    /* spans the word only — no overshoot */
  height: 0.5em;
  transform: translateY(-50%);
  overflow: visible;
  pointer-events: none;
  color: #E23B34;                 /* sharpie red */
}
.rot__mark path {
  fill: currentColor;             /* organic ribbon: thickness varies along its length */
}
@media (prefers-reduced-motion: reduce) {
  .rot__text { transition: none; }
}

/* ── Placard above the card (document framing) ───────────────────── */
.cta__placard {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(237, 231, 214, 0.9);
  margin-bottom: 18px;
}
.cta__placard-rule {
  width: 26px;
  height: 1px;
  background: rgba(237, 231, 214, 0.32);
}

/* ── The form card ───────────────────────────────────────────────── */
/* ⚠️ The clamp FLOORS at 28px, so on a phone the card keeps a padding sized
   for a desktop panel. Combined with .cta's own 24px, a 320px screen loses
   104px — a THIRD of the viewport — before the form starts, which left 149px
   for a radio label and made every field feel cramped. Narrow screens get
   their width back below. */
.ctacard {
  width: 100%;
  background: #FBF9F3;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: clamp(28px, 4vw, 48px);
  text-align: left;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.5) inset,
    0 40px 80px rgba(0, 0, 0, 0.34),
    0 12px 28px rgba(0, 0, 0, 0.22);
}

.ctacard__intro {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.2vw, 1.0625rem);
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 0 0 clamp(18px, 2.2vw, 26px);
  max-width: 44ch;
}
/* Divider only before the form — not between the intro paragraphs. */
.ctacard__intro:last-of-type {
  margin-bottom: clamp(26px, 3vw, 36px);
  padding-bottom: clamp(22px, 2.6vw, 30px);
  border-bottom: 1px solid var(--color-border);
}
.ctacard__intro strong {
  color: var(--color-text);
  font-weight: 600;
}
/* Subtle inline link — reads as body copy with a dotted accent underline as the
   only affordance; goes solid green on hover. */
.ctacard__intro a {
  color: var(--color-text);
  text-decoration: underline dotted;
  text-decoration-color: rgba(29, 74, 53, 0.55);
  text-underline-offset: 3px;
  transition: color 150ms ease, text-decoration-color 150ms ease;
}
.ctacard__intro a:hover {
  color: var(--color-accent);
  text-decoration-color: var(--color-accent);
}

/* ── Form ────────────────────────────────────────────────────────── */
.ctaform {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.4vw, 28px);
}
.ctaform__row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2vw, 22px);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 9px;
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.field__label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.7875rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
/* The fieldset variant (radio group): a <legend> is not a flex item, so
   .field's `gap` doesn't space it from the control. Lay it out as a block and
   give the legend the same 9px gap the other field labels get. */
fieldset.field { display: block; }
fieldset.field .field__label { margin-bottom: 9px; padding: 0; }

.field input[type="text"],
.field input[type="email"],
.field select {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text);
  background: #FFFFFF;
  border: 1px solid var(--color-border-dark);
  border-radius: 5px;
  padding: 13px 14px;
  transition: border-color 150ms ease, box-shadow 150ms ease;
  -webkit-appearance: none;
  appearance: none;
}
.field input::placeholder { color: var(--color-text-faint); }
.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(29, 74, 53, 0.12);
}
/* Field flagged by a server-side validation error (see markFieldError in
   public/js/marketing.js). Overrides the focus ring while it's active. */
.field input.is-error,
.field select.is-error {
  border-color: var(--color-error, #8B3A3A);
  box-shadow: 0 0 0 3px rgba(139, 58, 58, 0.14);
}

/* select chevron */
.select-wrap { position: relative; }
.select-wrap::after {
  content: '';
  position: absolute;
  right: 16px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 1.5px solid var(--color-text-muted);
  border-bottom: 1.5px solid var(--color-text-muted);
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}
.field select { padding-right: 38px; cursor: pointer; }

/* ── Radio group ─────────────────────────────────────────────────── */
/* ONE control, not two cards. Each option used to be its own bordered, rounded
   box with a 10px gap between them — so between the two choices sat a gutter
   made of two borders and a strip of page, which read as two unrelated
   controls that happened to be adjacent. They are one question with two
   answers, so they get one container: a single border, a single radius, and
   one hairline between the options.
   The border lives on the GROUP; the options carry only a divider. */
.radio-group {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border-dark);
  border-radius: 5px;
  overflow: hidden;              /* clips the selected row's fill to the radius */
  background: #FFFFFF;
}
.radio {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 16px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--color-text);
  transition: background 150ms ease;
}
/* The single hairline between options — never above the first or below the
   last, where it would double up with the group's own border. */
.radio + .radio { border-top: 1px solid var(--color-border-dark); }
.radio:hover { background: rgba(29, 74, 53, 0.035); }
.radio input {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1.5px solid var(--color-border-dark);
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  transition: border-color 150ms ease;
}
.radio input:checked {
  border-color: var(--color-accent);
}
.radio input:checked::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--color-accent);
}
/* Selection is carried by the fill alone now — there is no per-option border
   left to recolour, and the group's border must stay one continuous line. */
.radio:has(input:checked) {
  background: var(--color-accent-light);
}

/* ── Submit + microcopy ──────────────────────────────────────────── */
.ctaform__submit {
  margin-top: clamp(6px, 1vw, 10px);
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--ink-parchment);
  background: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: 5px;
  padding: 16px 24px;
  cursor: pointer;
  transition: background 150ms ease, transform 150ms ease;
}
.ctaform__submit:hover { background: #19402e; }
.ctaform__submit:active { transform: translateY(1px); }
/* Disabled — while sending, and after a successful submit (locked for the page
   load). Without this a disabled button looks identical to an active one. */
.ctaform__submit:disabled { opacity: 0.5; cursor: default; }
.ctaform__submit:disabled:hover { background: var(--color-accent); }

/* Locked form fields after a successful submit (see marketing.js). */
.ctaform input:disabled,
.ctaform select:disabled { opacity: 0.55; cursor: default; }

/* ─── Early-access form · narrow phones ───────────────────────────────────
   Give the form back the width the nested paddings were taking. Measured at
   320px: .cta 24px + .ctacard 28px on each side = 104px of chrome, leaving the
   radio group 214px and its label text ~149px — so even a short label like
   "Add me to the waitlist" (~165px at 15px) wrapped, and every input sat in a
   narrow trough.
   ⚠️ .ctacard's padding is a clamp whose FLOOR is 28px, so it never shrinks on
   its own however narrow the screen gets — the floor has to be overridden. */
@media (max-width: 400px) {
  .cta { padding-left: 16px; padding-right: 16px; }
  .ctacard { padding-left: 18px; padding-right: 18px; }
}
.ctaform .radio:has(input:disabled) { opacity: 0.55; }
.ctaform .radio:has(input:disabled):hover { border-color: var(--color-border-dark); }

.ctaform__micro {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin: 4px 0 0;
}

/* ── Mobile ──────────────────────────────────────────────────────── */
@media (max-width: 560px) {
  .ctaform__row2 { grid-template-columns: 1fr; }
}


/* ─────────────────────────────────────────────────────────────────────
   Marketing additions (port gaps): occupancy-grid hero, Positioning &
   Payoff prose sections, footer, honeypot, form status. Token-based,
   on-brand. The mockup lacked these (line-chart hero, no Positioning/
   Payoff section, no footer). v1 — refine later.
   ───────────────────────────────────────────────────────────────────── */

/* Honeypot — visually + AT hidden, but still submittable by bots. */
.ctaform__hp {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* Occupancy grid (replaces report__chart). */
.report__grid-block { margin: 14px 0 4px; }
.report__grid-label {
  display: block;
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-faint, #A09C95);
  margin-bottom: 6px;
}
.report__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}
.report__grid-cell {
  aspect-ratio: 1 / 1;
  border-radius: 2px;
  background-color: var(--color-bg, #F7F5F0);
}
.report__grid-cell--booked { background-color: var(--color-accent, #1D4A35); }
.report__grid-cell--open   { background-color: var(--color-border, #E2DED6); }
.report__grid-cell--pad    { background-color: transparent; }

/* Positioning + Payoff — shared prose treatment. Positioning on cream,
   Payoff on the slightly warmer alt surface to separate the two. */
.result, .result { padding: 96px 40px; }
.result { background-color: var(--color-bg, #F7F5F0); }
.result      { background-color: var(--color-accent-light, #EBF2EE); }
.result__inner, .result__inner { max-width: 760px; margin: 0 auto; }
.result__eyebrow, .result__eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--eyebrow-ink);
  margin-bottom: 22px;
}
.result__eyebrow-rule, .result__eyebrow-rule {
  width: 32px; height: 1px; background-color: var(--color-border-dark, #C8C3B8);
}
.result__headline, .result__headline {
  font-family: var(--font-heading, Georgia, serif);
  font-weight: 400;
  font-size: clamp(2.5rem, 5.4vw, 4.5rem);   /* matches .rhythm__headline */
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--color-text, #1A1A1A);
  margin: 0 0 28px;
  text-wrap: balance;
}
.result__para, .result__para {
  font-family: var(--font-body, 'DM Sans', system-ui, sans-serif);
  font-size: 18px; line-height: 1.66;
  color: var(--color-text-muted, #6B6760);
  margin: 0 0 18px;
}
.result__para em, .result__para em { color: var(--color-text, #1A1A1A); font-style: normal; }

/* Footer. */
.site-footer { background-color: #151515; color: rgba(247,244,238,0.72); padding: 56px 40px; }
.site-footer__inner {
  max-width: var(--max-width, 960px); margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 12px 28px;
  align-items: baseline; justify-content: space-between;
}
.site-footer__brand {
  font-family: var(--font-heading, Georgia, serif);
  font-size: 20px; color: rgba(247,244,238,0.92);
}
.site-footer__tagline { font-family: var(--font-body, 'DM Sans', sans-serif); font-size: 14px; }
.site-footer__legal { font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: 0.04em; color: rgba(247,244,238,0.44); }

/* Form status line (success / error). */
.ctaform__status { margin: 12px 0 0; font-family: var(--font-body, sans-serif); font-size: 14px; }
.ctaform__status--ok  { color: var(--color-accent, #1D4A35); }
.ctaform__status--err { color: var(--color-negative, #8B2020); }

/* Features — reuse the capabilities card (.scard) treatment, but 4 cards in a
   responsive grid (the old stage4__row flex was tuned for 3). */
.features__row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
@media (min-width: 980px) {
  .features__row { grid-template-columns: repeat(4, 1fr); }
}

/* Hero — Occupancy Grid heat-table (replaces the tall owner-report panel).
   Compact: header + 4 rows. Cells heat-shaded by occupancy %. */
.occgrid { padding: 18px 18px 16px; font-family: var(--font-body, 'DM Sans', sans-serif); }
.occgrid__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.occgrid__caption { font-family: var(--font-mono, 'IBM Plex Mono', monospace); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-faint, #A09C95); }
.occgrid__table { width: 100%; border-collapse: separate; border-spacing: 3px 4px; }
.occgrid__th { font-family: var(--font-mono, monospace); font-size: 8px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-faint, #A09C95); text-align: center; padding: 0 0 6px; }
.occgrid__th--prop { text-align: left; }
.occgrid__prop { text-align: left; padding-right: 10px; white-space: nowrap; vertical-align: middle; }
.occgrid__prop-name { display: block; font-size: 11px; font-weight: 600; color: var(--color-text, #1A1A1A); line-height: 1.25; }
.occgrid__status { font-family: var(--font-mono, monospace); font-size: 8px; letter-spacing: 0.04em; text-transform: uppercase; }
.occgrid__status--healthy { color: var(--color-accent, #1D4A35); }
.occgrid__status--watch { color: var(--color-warning, #B45309); }
.occgrid__cell { text-align: center; font-size: 11px; font-variant-numeric: tabular-nums; padding: 9px 6px; border-radius: 3px; color: var(--color-text, #1A1A1A); }
.occgrid__cell--low  { background-color: #F1DAD3; color: #8B3A2F; }
.occgrid__cell--mid  { background-color: #EAE6DC; color: #6B6760; }
.occgrid__cell--high { background-color: #D8E8DE; color: var(--color-accent, #1D4A35); }

/* Hero — "where to focus" recommendation cards above the grid (Features #2),
   + the third pacing state (Needs attention) + the grid sub-label. */
.occreco-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.occreco { background-color: var(--color-surface, #fff); border: 1px solid var(--color-border, #E2DED6); border-radius: 4px; padding: 11px 12px; }
.occreco__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.occreco__prop { font-family: var(--font-heading, Georgia, serif); font-size: 13px; color: var(--color-text, #1A1A1A); }
.occreco__badge { font-family: var(--font-mono, monospace); font-size: 7.5px; letter-spacing: 0.04em; text-transform: uppercase; padding: 2px 6px; border-radius: 999px; white-space: nowrap; }
.occreco__badge--healthy { background-color: #DDEBE2; color: var(--color-accent, #1D4A35); }
.occreco__badge--watch { background-color: #F6E9D6; color: var(--color-warning, #B45309); }
.occreco__badge--needs-attention { background-color: #F1DAD3; color: #8B3A2F; }
.occreco__note { margin: 0; font-size: 10.5px; line-height: 1.45; color: var(--color-text-muted, #6B6760); }
.occgrid__sublabel { display: block; font-family: var(--font-mono, monospace); font-size: 8px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-faint, #A09C95); margin-bottom: 8px; }
.occgrid__status--needs-attention { color: #8B3A2F; }

/* ─── Hero visual · phone portrait (≤560) ─────────────────────────────────
   Portrait and landscape are different compositions, not one composition at
   two sizes. Below this width the occupancy grid is REDUCED, not reflowed:
   fewer columns, fewer cards, and everything that survives gets BIGGER.

   Why bigger: on desktop this is a small framed thumbnail inside a wide hero,
   so 8px micro-labels read as texture. On a phone the frame is nearly
   full-width — the same 8px is simply illegible, and the thumbnail's density
   buys nothing. Six columns of 11px figures become three of 13px; two
   recommendation cards become one. Same idea, fewer elements, readable.

   ⚠️ MUST stay after the .occgrid/.occreco base rules above — they are
   single-class selectors, so an earlier media block of equal specificity
   loses and the type silently stays small. The nav half of this breakpoint
   lives up at the ≤560 block near the other nav rules.

   Verified with `npm run mobile:audit` at 320 / 360 / 390. */
@media (max-width: 560px) {
  /* Horizons 5 → 2. Columns are: 1 property · 2–6 the horizons
     (7d 14d 30d 60d 90d). Keeping 30d + 90d tells the same near-vs-far
     pacing story in half the width.
     ⚠️ POSITIONAL indices — adding or reordering a horizon in
     lib/data/marketing/hero-grid.js means revisiting this rule. */
  .occgrid__table th:nth-child(2), .occgrid__table td:nth-child(2),
  .occgrid__table th:nth-child(3), .occgrid__table td:nth-child(3),
  .occgrid__table th:nth-child(5), .occgrid__table td:nth-child(5) {
    display: none;
  }

  /* Primary figures clear 12px. Only the mono micro-labels (column heads,
     captions) stay smaller — those are labels, not content. */
  .occgrid            { padding: 14px 14px 12px; }
  .occgrid__cell      { font-size: 13px; padding: 11px 8px; }
  .occgrid__prop-name { font-size: 13px; }
  .occgrid__status    { font-size: 11px; }
  .occgrid__th        { font-size: 10px; }
  .occgrid__caption   { font-size: 10px; }
  .occgrid__sublabel  { font-size: 9px; }

  /* One recommendation card, not two. "Needs attention" is the one worth
     keeping — it is the card that implies the product does something — and
     the healthy/watch/attention spread still reads off the heat cells below.
     Two stacked cards of 10.5px prose would double the hero's height on a
     phone to restate what the table already says. */
  .occreco-row    { grid-template-columns: 1fr; gap: 8px; margin-bottom: 12px; }
  .occreco:nth-child(n + 2) { display: none; }
  .occreco        { padding: 12px 13px; }
  .occreco__prop  { font-size: 14px; }
  .occreco__note  { font-size: 12px; }
  .occreco__badge { font-size: 9px; }
}

/* Rhythm rail — hosts the sample owner report (the monthly output) on the dark
   column. Report sits below the eyebrow; bottom fades into the rail so the
   clip on tall viewports reads as intentional. */
.rhythm__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 84px 36px 0;
}
.rhythm__rail-eyebrow { position: absolute; top: 28px; left: 36px; z-index: 3; }
.rhythm__rail-report {
  width: 100%;
  max-width: 392px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}
.rhythm__rail-report .report { background-color: var(--color-surface, #fff); }
.rhythm__rail::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 140px;
  background: linear-gradient(to bottom, rgba(42, 27, 17, 0) 0%, #2A1B11 88%);
  pointer-events: none;
  z-index: 2;
}
@media (max-width: 860px) {
  /* On mobile the rail stacks; let it grow to the report instead of clipping. */
  .rhythm__rail { height: auto; padding-bottom: 40px; }
  .rhythm__rail::after { display: none; }
}

/* Two-tier section headlines — lead + accent, both upright by default. Spans
   inherit each headline's Playfair size, with a selective forest-green accent.

   ITALIC IS RESERVED FOR EXACTLY TWO ACCENTS SITE-WIDE (Brian, font cleanup):
     1. "Rhythm."               → the large "The Stewardship Rhythm" headline
     2. "So does your business." → above the pilot form
   Everything else on the marketing site renders upright, including <em>, which
   the browser italicises by default — hence the .site em normalizer below. */
.hl-lead { font-style: normal; }
.hl-accent { font-style: normal; }
.site em { font-style: normal; }

.rhythm__headline .hl-accent,
.cta__headline .hl-accent { font-style: italic; }

/* "Rhythm." is the word the section is named for — it carries the idea, so it
   outscales the line it sits under rather than matching it. The lead ("The
   Stewardship") keeps the headline's own clamp; only the accent grows.
   ⚠️ Scoped to .rhythm__headline ALONE, deliberately. It shares the italic
   rule above with .cta__headline, whose accent must NOT grow — that headline
   has a rotating word beside it whose slot is measured in JS
   (measureRotSlot), and resizing its accent would throw that measurement. */
.rhythm__headline .hl-accent { font-size: 5rem; }

@media (min-width: 881px) {
  .rhythm__headline .hl-accent { font-size: 7rem; }
}
.hl-accent--green { color: var(--color-accent, #1D4A35); }
.hl-accent--gold { color: var(--color-accent-gold, #c9a85c); }

/* Result — "occupancy building" combo chart: bars (fading to transparent at the
   base so they melt into the section) + a line graph through the bar middles,
   each bar tagged with its revenue $ and occupancy %. Inline SVG. Decorative.
   SVG text sizes are viewBox units ≈ px at the chart's max width (920). */
.result { padding-bottom: 0; }
.result__trend {
  position: relative;
  z-index: 1;                 /* paint the overflowed labels above the next (white) section */
  max-width: 920px;
  margin: 36px auto 0;
  padding: 0 40px;
  /* Nudge the whole chart down so the month labels float over the white of the
     Features section below. translateY is a % of the chart's OWN height, so it
     scales with the SVG on smaller screens (a fixed px offset would not). */
  transform: translateY(11%);
}
.trendchart { display: block; width: 100%; height: auto; overflow: visible; }
.tc-d {
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 17px; font-weight: 600;
  fill: var(--color-accent, #1D4A35);
}
.tc-p {
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 12px;
  fill: var(--color-accent, #1D4A35); opacity: 0.72;
}
.tc-m {
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  fill: var(--color-accent, #1D4A35); opacity: 0.55;
}
/* Nodes: subtle hollow dots along the row; the final month is the hero —
   solid + larger, with a stronger ping. */
.tc-node { stroke-opacity: 0.78; }
.tc-node--last { stroke-opacity: 1; }

/* ─── Trend chart · phone portrait ────────────────────────────────────────
   ZOOM IN, don't shrink. The chart is a 920×290 landscape SVG; scaled whole
   into ~340px every bar becomes a sliver and the $-labels land near 6px — the
   figures that ARE the point become the least readable thing on screen.

   The crop is done by SWAPPING THE viewBox in public/js/marketing.js, not with
   a CSS transform. A transform needs a clipping container, and clipping is
   guesswork: the first attempt scaled 2.4× about the right edge and sliced the
   dollar labels straight off the top — the chart looked "zoomed" and said
   nothing. Narrowing the viewBox is exact. The SVG re-lays-out to the last
   three months at full height, every label intact, earlier months simply
   outside the frame. Cropping is intentional; this is an abstract
   illustration, not a dataset.

   The type scales with it (SVG units), so no font-size rules are needed here.

   ⚠️ Must stay after .result__trend / .trendchart above — equal specificity,
   so an earlier media block would lose. */
@media (max-width: 560px) {
  /* FULL BLEED. Cropping the viewBox bought width that the container then gave
     straight back: .result__trend carries `padding: 0 40px` AND sits ~40px
     inside its parent, so on a 375px screen the chart's box ended at x=295 and
     the last bar floated in the middle with a dead column to its right. The
     gap was never chart geometry — it was container inset, which is why
     narrowing the viewBox further would not have fixed it.
     `margin-inline: calc(50% - 50vw)` centres a 100vw block inside any
     container, so this works without knowing where the parent inset comes
     from. Edge-to-edge is right for a decorative band; the section's prose
     keeps its own margins. */
  .result__trend {
    max-width: none;
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    padding-left: 0;
    padding-right: 0;
    /* Tighter to the paragraph above. The desktop 36px was set against a chart
       whose own empty headroom is now cropped away in JS, so the two gaps were
       stacking into one large one. */
    margin-top: 4px;
    /* Desktop nudges the chart down 11% of its own height so the month labels
       float over the white section below. Full-bleed makes the chart taller, so
       the same percentage becomes a much bigger push — enough to open a visible
       hole above it. Less travel, same effect. */
    transform: translateY(6%);
  }
}

/* Each node emits a radar "ping" — an expanding, fading ring, staggered per
   node (inline animation-delay) so it ripples toward the pronounced last month. */
.tc-ping {
  fill: none;
  stroke: var(--color-accent, #1D4A35);
  stroke-width: 1.5;
  transform-box: fill-box;
  transform-origin: center;
  animation: tc-ping 2.6s ease-out infinite;
}
@keyframes tc-ping {
  0%   { transform: scale(1);   stroke-opacity: 0.42; }
  70%  { stroke-opacity: 0; }
  100% { transform: scale(2.6); stroke-opacity: 0; }
}
.tc-ping--last {
  stroke-width: 2;
  animation: tc-ping-last 2.2s ease-out infinite;
}
@keyframes tc-ping-last {
  0%   { transform: scale(1);   stroke-opacity: 0.6; }
  70%  { stroke-opacity: 0; }
  100% { transform: scale(3.6); stroke-opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tc-ping, .tc-ping--last { display: none; }
}


/* ─────────────────────────────────────────────────────────────────────
   Features ALT (v2) — interactive list (left) ↔ synced sticky graphic.
   Infrastructure + framed placeholders; drop real screenshots into each
   item's `image` slot later (renders <img class="altf__img">).
   ───────────────────────────────────────────────────────────────────── */
.altf {
  background: var(--color-bg);
  padding: clamp(72px, 9vw, 128px) clamp(24px, 5vw, 80px) clamp(80px, 10vw, 132px);
}
.altf__inner { max-width: 1220px; margin: 0 auto; }

.altf__eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-mono); font-size: 0.8rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--eyebrow-ink);
}
.altf__eyebrow-rule { display: inline-block; width: 32px; height: 1px; background: var(--color-text-faint); }
.altf__headline {
  font-family: var(--font-heading); font-weight: 400;
  font-size: clamp(2rem, 4.2vw, 3.25rem); line-height: 1.08; letter-spacing: -0.02em;
  color: var(--color-text); margin: 20px 0 0; text-wrap: balance;
}
.altf__intro {
  font-family: var(--font-body); font-size: clamp(1rem, 1.3vw, 1.1875rem);
  line-height: 1.6; color: var(--color-text-muted); max-width: 60ch; margin: 18px 0 0;
}

.altf__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
  margin-top: clamp(40px, 5vw, 72px);
}

/* Left — the list */
.altf__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.altf__item {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: transparent; border: 0; border-radius: 12px;
  padding: clamp(14px, 1.6vw, 20px) clamp(16px, 1.8vw, 24px);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.altf__item:hover { background: rgba(29, 74, 53, 0.04); }
.altf__item.is-active {
  background: #FFFFFF;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 12px 32px rgba(38, 30, 18, 0.07);
}
.altf__item-title {
  display: block; font-family: var(--font-heading); font-weight: 500;
  font-size: clamp(1.1875rem, 1.9vw, 1.5rem); line-height: 1.2; letter-spacing: -0.015em;
  color: var(--color-text); transition: color 0.2s ease;
}
.altf__item.is-active .altf__item-title { color: var(--color-accent); }
/* Hidden everywhere by default; the stacked breakpoint turns it on for the
   active row only (see the ≤880 block). */
.altf__item-uplink { display: none; }
.altf__item-desc {
  display: none; margin-top: 8px; max-width: 46ch;
  font-family: var(--font-body); font-size: 0.9375rem; line-height: 1.55; color: var(--color-text-muted);
}
.altf__item.is-active .altf__item-desc { display: block; }

/* Right — the synced graphic (sticky, cross-fading panels) */
.altf__stage {
  position: sticky;                   /* sticky also establishes the positioning context for panels */
  top: clamp(88px, 12vh, 120px);
  align-self: start;
  aspect-ratio: 4 / 3;
}
.altf__panel {
  position: absolute; inset: 0; margin: 0;
  display: flex; flex-direction: column;
  background: #FFFFFF; border: 1px solid var(--color-border);
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 2px 4px rgba(38, 30, 18, 0.04), 0 30px 60px rgba(38, 30, 18, 0.10);
  opacity: 0; transform: translateY(8px) scale(0.995); pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.altf__panel.is-active { opacity: 1; transform: none; pointer-events: auto; }

.altf__chrome {
  display: flex; align-items: center; gap: 7px;
  padding: 12px 16px; border-bottom: 1px solid var(--color-border);
  background: #FBF9F3;
}
.altf__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--color-border-dark, #D9D3C7); }
.altf__dot:nth-child(1) { background: #E4B7B0; }
.altf__dot:nth-child(2) { background: #E7D6A6; }
.altf__dot:nth-child(3) { background: #B4CDBB; }
.altf__chrome-label {
  margin-left: 10px; font-family: var(--font-mono); font-size: 0.6875rem;
  letter-spacing: 0.06em; color: var(--color-text-faint);
}

.altf__shot {
  flex: 1; display: flex; align-items: center; justify-content: center;
  background-color: #F1EEE6;
  background-image: repeating-linear-gradient(-45deg,
    rgba(29, 74, 53, 0.045) 0, rgba(29, 74, 53, 0.045) 1px, transparent 1px, transparent 12px);
}
.altf__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.altf__ph { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 24px; }
.altf__ph-name {
  font-family: var(--font-heading); font-style: normal; font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  color: var(--color-text-muted);
}
.altf__ph-note {
  font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-text-faint);
}

@media (max-width: 880px) {
  .altf__grid { grid-template-columns: 1fr; gap: 28px; }
  /* ⚠️ 4/3 is a LANDSCAPE frame — correct beside a column of text on desktop,
     wrong stacked on a phone, where the width is fixed and the only thing the
     graphic can be given is height. At 375px it left the panel 245px tall, of
     which the chrome bar takes 40, so every graphic had ~205px to render a
     composition designed for a wide box. The Booking Levers card overflowed it
     by 38px and pushed its buttons out of frame.
     Square here: same width, +82px of room, and the graphics simply breathe. */
  .altf__stage { position: relative; top: 0; order: 2; aspect-ratio: 1 / 1; }
  .altf__list { order: 1; }
  .altf__item-desc { display: block; }        /* mobile: always show desc (no sticky pairing) */

  /* The stage is MOVED into the active <li> at this breakpoint (see the
     "Features ALT" block in public/js/marketing.js) so each graphic sits
     directly above the text it illustrates, instead of every graphic piling up
     after the whole list. These rules are what it needs once it lands there:
     it is no longer a grid track, so it has to carry its own width and the
     breathing room the grid `gap` used to give it. */
  .altf__row .altf__stage {
    order: 0;                                 /* above the button, not after it */
    width: 100%;
    margin-bottom: 14px;
  }
  .altf__row { display: flex; flex-direction: column; }
  /* An inactive row is just text; the active one is text + a graphic, so it
     needs the separation a plain list item does not. */
  .altf__item.is-active { margin-bottom: 4px; }

  /* The up-arrow that ties the heading to the graphic sitting above it.
     Active + stacked only — on desktop the graphic is off to the RIGHT, so an
     up-arrow would point at nothing. currentColor picks up the active title's
     accent green for free. */
  .altf__item.is-active .altf__item-uplink {
    display: inline-block;
    width: 15px; height: 15px;
    margin-right: 8px;
    vertical-align: -1px;
  }
}

/* ── Alt-features graphics (inside the window frame) ──────────────────── */
.altf__shot--filled {
  align-items: center;                /* vertically centre the graphic in the frame */
  justify-content: stretch;
  background-image: none;             /* drop the placeholder hatch */
  background-color: #F4F1EA;
}

/* Occupancy Grid heat-table */
.og {
  width: 100%;
  padding: clamp(14px, 3%, 26px) clamp(14px, 2.6%, 22px);
  display: flex; flex-direction: column; gap: 10px;
  background: #F4F1EA; font-family: var(--font-body);
}
.og__head { display: flex; align-items: baseline; justify-content: space-between; }
.og__title { font-family: var(--font-heading); font-size: clamp(13px, 2.4%, 16px); color: var(--color-text); }
.og__sub { font-family: var(--font-body); font-size: 10px; color: var(--color-text-faint); }
.og__table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  border: 1px solid var(--color-border); border-radius: 8px; overflow: hidden; background: #fff;
  table-layout: fixed;
}
.og__th {
  font-family: var(--font-mono); font-size: 7.5px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-faint);
  text-align: right; padding: 7px 8px; background: #FBF9F3; white-space: nowrap;
}
.og__th--prop { text-align: left; width: 34%; }
.og__prop { padding: 7px 8px; white-space: nowrap; border-top: 1px solid var(--color-border); }
.og__chip {
  display: inline-block; font-family: var(--font-mono); font-size: 9px; font-weight: 600;
  color: var(--color-text); background: #E8EFE9; padding: 2px 6px; border-radius: 3px;
}
.og__st {
  display: block; margin-top: 3px; font-family: var(--font-mono);
  font-size: 7.5px; letter-spacing: 0.08em; text-transform: uppercase;
}
.og__st--watch { color: #B0772A; }
.og__st--healthy { color: #3E6B4A; }
.og__c {
  text-align: right; padding: 8px; font-size: 11px; color: #35322c;
  font-variant-numeric: tabular-nums; border-top: 1px solid rgba(255, 255, 255, 0.6);
}
.og__c--w4 { background: #ECD5CD; }
.og__c--w3 { background: #F0DDD3; }
.og__c--w2 { background: #F5E7DA; }
.og__c--g1 { background: #E3E7DC; }
.og__c--g2 { background: #D8E2D9; }
.og__c--g3 { background: #CDDCD0; }

/* Performance Recommendations — immersive "Booking Levers" card */
.im {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  background: radial-gradient(130% 100% at 50% 0%, #274632 0%, #16301F 72%);
  color: #E8E3DB; font-family: var(--font-body);
}
.im__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  font-family: var(--font-mono); font-size: 9px;
}
.im__brand { display: inline-flex; align-items: center; gap: 7px; color: #CFE0D4; letter-spacing: 0.03em; }
.im__mark { width: 22px; height: auto; color: #9DBBA6; }
.im__chips { display: flex; gap: 6px; }
.im__chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.13); font-size: 8px; color: #D7E2D9;
}
.im__dot { width: 5px; height: 5px; border-radius: 50%; flex: none; }
.im__dot--watch { background: #D8A24A; }
.im__dot--healthy { background: #6FB07A; }
.im__chip--streak { color: #E9BC8E; border-color: rgba(233, 188, 142, 0.3); }

.im__stage { flex: 1; display: flex; align-items: center; justify-content: center; padding: 5% 8%; }
.im__card {
  position: relative; width: 100%;
  background: #F7F4EC; color: #26302A; border-radius: 12px;
  padding: clamp(15px, 3.4%, 26px);
  box-shadow: 0 30px 54px rgba(0, 0, 0, 0.34);
}
.im__card::after {                         /* stacked-card hint beneath */
  content: ""; position: absolute; left: 6%; right: 6%; bottom: -7px; height: 14px;
  background: #E5E0D3; border-radius: 0 0 11px 11px; z-index: -1; opacity: 0.55;
}
.im__card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.im__prop { display: block; font-family: var(--font-heading); font-size: 16px; color: #26302A; }
.im__pacing { display: block; margin-top: 3px; font-family: var(--font-mono); font-size: 8.5px; color: #B0772A; letter-spacing: 0.04em; }
.im__tag { display: flex; align-items: center; gap: 9px; white-space: nowrap; }
.im__badge {
  font-family: var(--font-mono); font-size: 7.5px; letter-spacing: 0.1em; text-transform: uppercase;
  background: #DCE8DE; color: #2F5D3D; padding: 4px 8px; border-radius: 11px;
}
.im__kind { font-family: var(--font-heading); font-size: 12px; color: #55605A; }
.im__reco { font-family: var(--font-heading); font-size: clamp(13px, 2.6%, 17px); line-height: 1.32; color: #2A332D; margin: 15px 0; }
.im__divider { height: 1px; background: rgba(38, 48, 42, 0.12); margin: 13px 0; }
.im__actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.im__actions-right { display: flex; gap: 8px; }
.im__btn {
  font-family: var(--font-body); font-size: 10.5px; padding: 7px 13px; border-radius: 7px;
  border: 1px solid rgba(38, 48, 42, 0.2); background: #fff; color: #26302A; white-space: nowrap;
}
.im__btn--primary { background: var(--color-accent, #1D4A35); color: #EFF4EC; border-color: transparent; }
.im__foot { display: flex; justify-content: space-between; margin-top: 13px; font-family: var(--font-mono); font-size: 8px; color: #9A9A92; }
.im__link { text-decoration: underline; }

/* ─── Booking Levers · stacked breakpoint ─────────────────────────────────
   This is the one feature graphic that did not survive the narrow frame.
   Measured at 375px: the bar + stage came to 337px of content inside a 245px
   panel, and .im__tag ran 20px past the card's own right edge — text breaking
   out of the card it belongs to.

   Reduction, not shrinking. Everything below either stops something wrapping
   that shouldn't, or removes a row that was carrying the least meaning.

   ⚠️ Must stay after the .im__* base rules above (single-class selectors, so
   an earlier media block loses on source order). */
@media (max-width: 880px) {
  /* "Booking Levers ▾" is a product name — breaking it across two lines reads
     as a layout accident, not a wrap. */
  .im__brand { white-space: nowrap; }
  .im__bar { flex-wrap: nowrap; padding: 8px 11px; }
  /* The lever glyph is the first thing to go when the bar gets tight — it is
     decoration, and "Booking Levers" already names itself. */
  .im__mark { display: none; }

  /* Property chips → small colour pills, no name. At 8px in a 325px frame the
     names were unreadable AND were what forced the bar onto two rows; the
     status dot already carried the whole meaning, so the name was pure noise.
     font-size: 0 collapses the text node (there is no element to hide — the
     name is a bare text node beside the <i> dot). */
  /* ⚠️ align-items is REQUIRED here, not cosmetic. .im__chips has no
     align-items, so it defaults to `stretch`. On desktop every chip is the
     same height and stretch is invisible — but the circles below take a fixed
     15px height, so they stop stretching and pin to the top of the row while
     the streak chip still stretches to 20px. Measured: circles centred at
     15.5, everything else at 18.0. A 2.5px drift that reads as "these aren't
     aligned" without showing why. */
  .im__chips { gap: 5px; flex: none; align-items: center; }
  .im__chip:not(.im__chip--streak) {
    width: 15px; height: 15px;
    padding: 0; gap: 0;
    border-radius: 50%;
    justify-content: center;
    font-size: 0;
  }
  .im__chip:not(.im__chip--streak) .im__dot { width: 8px; height: 8px; }
  /* The streak keeps its words — it is the one chip whose text IS the point. */
  .im__chip--streak { white-space: nowrap; font-size: 7.5px; padding: 3px 7px; }

  /* .im__tag is `white-space: nowrap` and sat on the same row as the property
     name, so "Min Stay / Rules Change" had nowhere to go but out of the card.
     Give it its own row instead of fighting for that one. */
  .im__card-top { flex-direction: column; align-items: flex-start; gap: 7px; }
  .im__tag { white-space: normal; flex-wrap: wrap; gap: 7px; }
  .im__prop { font-size: 14px; }
  .im__kind { font-size: 11px; }

  /* One row removed rather than everything shrunk: the footer ("1 of 2 · Log
     something else instead") is pagination, which an abstract illustration
     does not need. The rest of the card keeps its real proportions — the
     square stage above is what actually bought the space. */
  .im__foot { display: none; }
  .im__reco { margin: 11px 0; }
  .im__divider { margin: 9px 0; }
  .im__stage { padding: 4% 6%; }
}

/* Search Rankings — "Session complete" recap (immersive dark stage) */
.sr {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  background: radial-gradient(130% 100% at 50% 0%, #274632 0%, #16301F 72%);
  color: #E8E3DB; font-family: var(--font-body);
}
.sr__bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px clamp(18px, 3.6%, 30px); border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  font-family: var(--font-mono); font-size: 9px;
}
.sr__brand { display: inline-flex; align-items: center; gap: 7px; color: #CFE0D4; letter-spacing: 0.03em; }
.sr__streak {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 11px;
  border: 1px solid rgba(233, 188, 142, 0.3); color: #E9BC8E; font-size: 8px;
}
.sr__body { flex: 1; display: grid; grid-template-columns: 1.7fr 1fr; gap: 0; min-height: 0; }
.sr__main { padding: clamp(18px, 3.8%, 30px) clamp(20px, 4%, 34px); overflow: hidden; }
.sr__title {
  font-family: var(--font-heading); font-size: clamp(19px, 3.7%, 28px); font-weight: 500;
  color: #E3B664; margin: 0; line-height: 1.05; letter-spacing: 0.01em;
}
.sr__sub { font-family: var(--font-body); font-size: 10px; line-height: 1.5; color: rgba(232, 227, 219, 0.66); margin: 7px 0 16px; max-width: 40ch; }

.sr__prop { padding: 15px 0; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.sr__prop:first-of-type { border-top: 0; padding-top: 4px; }
.sr__prop-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.sr__prop-name { font-family: var(--font-heading); font-size: 13px; font-weight: 500; color: #EDE7DB; }
.sr__prop-name em { font-style: normal; font-size: 10px; color: rgba(232, 227, 219, 0.5); }
.sr__checks { font-family: var(--font-mono); font-size: 7.5px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(232, 227, 219, 0.4); }
.sr__rank { display: flex; align-items: center; justify-content: space-between; padding: 5px 0; }
.sr__plat { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; }
.sr__pdot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.sr__plat--vrbo { color: #8FA6D6; } .sr__plat--vrbo .sr__pdot { background: #6C86C4; }
.sr__plat--air { color: #E0897B; } .sr__plat--air .sr__pdot { background: #DA6E5F; }
.sr__pos { font-family: var(--font-mono); font-size: 10px; }
.sr__pos--up { color: #7FB08A; }
.sr__pos--held { color: rgba(232, 227, 219, 0.52); }
.sr__pos--down { color: #E0956E; }

.sr__side {
  padding: clamp(18px, 3.8%, 30px) clamp(16px, 3.2%, 26px);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  display: flex; flex-direction: column; gap: 8px;
}
.sr__side-label { font-family: var(--font-mono); font-size: 7.5px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(232, 227, 219, 0.42); }
.sr__big { font-family: var(--font-heading); font-size: clamp(26px, 5%, 40px); color: #EDE7DB; line-height: 0.9; display: flex; align-items: baseline; gap: 8px; }
.sr__big small { font-family: var(--font-body); font-size: 9px; color: rgba(232, 227, 219, 0.55); }
.sr__stats { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 6px; }
.sr__stat { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 9px; }
.sr__stat span { letter-spacing: 0.1em; text-transform: uppercase; color: rgba(232, 227, 219, 0.5); }
.sr__stat b { color: #EDE7DB; font-weight: 600; }
.sr__act {
  font-family: var(--font-body); font-size: 10px; text-align: center;
  padding: 7px 10px; border-radius: 7px; border: 1px solid rgba(255, 255, 255, 0.14);
  color: #DCE7DE; background: rgba(255, 255, 255, 0.03);
}

/* Owner Reports — header → tiles → exec summary (hero row) → financials + calendar */
.orp {
  width: 100%; height: 100%;
  padding: clamp(12px, 2.6%, 22px) clamp(16px, 3.4%, 30px);
  display: flex; flex-direction: column; gap: clamp(7px, 1.7%, 12px);
  background: #F8F5EF; color: var(--color-text); font-family: var(--font-body);
}
.orp__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.orp__eyebrow { display: block; font-family: var(--font-mono); font-size: 7.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-faint); }
.orp__title { display: block; margin-top: 4px; font-family: var(--font-heading); font-size: clamp(17px, 3.2%, 24px); color: var(--color-text); }
.orp__ytd { text-align: right; }
.orp__ytd-label { display: block; font-family: var(--font-mono); font-size: 7.5px; letter-spacing: 0.08em; text-transform: uppercase; color: #3E6B4A; }
.orp__ytd-val { font-family: var(--font-mono); font-size: 13px; color: var(--color-text); }

.orp__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.orp__tile { border-radius: 7px; padding: 8px 13px; text-align: center; border: 1px solid rgba(0, 0, 0, 0.04); }
.orp__tile--rev { background: #DCE8EF; }
.orp__tile--hold { background: #DBEBDD; }
.orp__tile-label { display: block; font-family: var(--font-mono); font-size: 7px; letter-spacing: 0.12em; text-transform: uppercase; color: #566; }
.orp__tile-val { display: block; margin: 3px 0 1px; font-family: var(--font-mono); font-size: clamp(15px, 3%, 20px); color: #1D4A35; }
.orp__tile-sub { font-family: var(--font-body); font-size: 8px; color: var(--color-text-muted); }

/* Executive summary — the hero row: centered ~70% text column, left-aligned serif */
.orp__summary { padding: clamp(14px, 2.6%, 22px) 0; }
.orp__summary-inner { max-width: 82%; margin: 0 auto; text-align: left; }
.orp__kicker { display: block; font-family: var(--font-mono); font-size: 7.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 8px; }
.orp__lede { font-family: var(--font-narrative); font-size: clamp(11.5px, 2.35%, 15.5px); line-height: 1.62; color: #2A2A28; margin: 0; text-wrap: pretty; }

.orp__cols { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(14px, 3%, 26px); flex: 1; min-height: 0; align-items: stretch; }
.orp__col--left { display: flex; flex-direction: column; }
.orp__occblock { margin-bottom: clamp(10px, 2.4%, 16px); }
.orp__label { display: block; font-family: var(--font-mono); font-size: 7px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-faint); margin-bottom: 6px; }
.orp__fin { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; font-size: 9.5px; color: var(--color-text-muted); border-top: 1px solid var(--color-border); }
.orp__fin span:last-child { font-family: var(--font-mono); color: var(--color-text); white-space: nowrap; }
.orp__fin--total { background: #E9E2D5; margin-top: 3px; padding: 6px 8px; border-radius: 4px; border-top: 0; font-weight: 600; }
.orp__fin--total span { color: var(--color-text) !important; }
.orp__fin--total span:last-child { font-family: var(--font-mono); }

.orp__occ { display: flex; align-items: baseline; gap: 6px; margin-bottom: 8px; }
.orp__occ b { font-family: var(--font-heading); font-size: clamp(18px, 3.6%, 26px); color: var(--color-text); line-height: 1; }
.orp__occ span { font-family: var(--font-body); font-size: 9px; color: var(--color-text-muted); }
.orp__cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.orp__dow { text-align: center; font-family: var(--font-mono); font-size: 6.5px; color: var(--color-text-faint); padding-bottom: 1px; }
.orp__day { aspect-ratio: 1.3 / 1; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 7.5px; color: var(--color-text-muted); border-radius: 3px; background: #EFEBE2; }
.orp__day--on { background: #C8E0CE; color: #1D4A35; }
.orp__day--pad { background: transparent; }

/* Growth Tools — Prospect Pipeline (lifecycle stepper is the focal element) */
.pl {
  width: 100%; height: 100%;
  padding: clamp(14px, 3%, 24px) clamp(16px, 3.4%, 28px);
  display: flex; flex-direction: column; gap: clamp(10px, 2.2%, 16px);
  background: #F4F1EA; color: var(--color-text); font-family: var(--font-body);
}
.pl__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pl__title { font-family: var(--font-heading); font-size: clamp(16px, 3%, 22px); color: var(--color-text); }
.pl__counts {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-body); font-size: 9.5px; color: var(--color-text-muted);
  white-space: nowrap;              /* the head is one row; counts never wrap it */
}
/* Small count pills, colour-coded by state. Same device as the Booking Levers
   status circles — a colour says which bucket, so the label does not have to. */
.pl__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 9px;
  font-size: 9.5px; font-weight: 600; line-height: 1;
}
.pl__count--now     { background: #F6E3DC; color: #B4472F; }   /* needs you */
.pl__count--motion  { background: #DDEBE2; color: #1D4A35; }   /* moving */
.pl__count--resting { background: #EAE6DC; color: #6B6760; }   /* resting */
.pl__counts-label { color: var(--color-text-muted); }

/* Featured "one move now" card — houses the stepper */
.pl__card {
  position: relative; background: #fff; border: 1px solid var(--color-border);
  border-left: 3px solid #C2622A; border-radius: 9px;
  padding: clamp(14px, 3%, 22px) clamp(16px, 3.2%, 24px);
  display: flex; flex-direction: column; gap: 4px;
  box-shadow: 0 12px 30px rgba(38, 30, 18, 0.06);
}
.pl__kicker { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.14em; text-transform: uppercase; color: #C2622A; }
.pl__kicker i { width: 5px; height: 5px; border-radius: 50%; background: #C2622A; }
.pl__name { font-family: var(--font-heading); font-size: clamp(16px, 3.2%, 22px); color: var(--color-text); margin-top: 2px; }
.pl__sub { font-family: var(--font-body); font-size: 10px; color: var(--color-text-muted); margin-bottom: 4px; }

/* The lifecycle stepper — the hero */
.pl__steps { display: flex; margin: clamp(14px, 3%, 22px) 4px clamp(12px, 2.6%, 18px); }
.pl__step {
  position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center;
}
.pl__node {
  width: 18px; height: 18px; border-radius: 50%; z-index: 1;
  background: #fff; border: 2px solid #CFC9BC; box-sizing: border-box;
}
.pl__step--done .pl__node { background: #1D4A35; border-color: #1D4A35; }
.pl__step--now .pl__node { border-color: #1D4A35; border-width: 3px; box-shadow: 0 0 0 3px rgba(29, 74, 53, 0.12); }
/* connector line to the next step */
.pl__step::after {
  content: ""; position: absolute; top: 9px; left: 50%; width: 100%; height: 2px;
  background: #DED8CB; z-index: 0;
}
.pl__step:last-child::after { display: none; }
.pl__step--done::after { background: #1D4A35; }
.pl__label { font-family: var(--font-body); font-size: 10.5px; color: var(--color-text); }
.pl__step:not(.pl__step--done):not(.pl__step--now) .pl__label { color: var(--color-text-faint); }
.pl__step--now .pl__label { font-weight: 600; }
.pl__date { font-family: var(--font-mono); font-size: 7px; color: var(--color-text-faint); }

.pl__actions { display: flex; gap: 8px; margin-top: 2px; }
.pl__btn {
  font-family: var(--font-body); font-size: 10px; padding: 7px 13px; border-radius: 7px;
  border: 1px solid var(--color-border); background: #fff; color: var(--color-text-muted);
}
.pl__btn--primary { color: #1D4A35; border-color: rgba(29, 74, 53, 0.35); font-weight: 600; }

.pl__leads { display: flex; flex-direction: column; gap: 8px; }
.pl__lead {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: #fff; border: 1px solid var(--color-border); border-left: 3px solid #3E6B4A;
  border-radius: 8px; padding: 9px 12px;
}
.pl__lead b { display: block; font-family: var(--font-heading); font-size: 12px; color: var(--color-text); }
.pl__lead span { font-family: var(--font-body); font-size: 9px; color: var(--color-text-muted); }
.pl__tag { font-family: var(--font-mono); font-size: 7.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); border: 1px solid var(--color-border); border-radius: 11px; padding: 3px 8px; white-space: nowrap; }
.pl__tag--warm { color: #8A6516; border-color: #E4D4A8; background: #F7EFD8; }

/* Property Improvements — Cost+ project (lifecycle stepper + fee breakdown) */
.pi {
  width: 100%; height: 100%;
  padding: clamp(14px, 3%, 24px) clamp(16px, 3.4%, 28px);
  display: flex; flex-direction: column; gap: clamp(6px, 1.6%, 12px);
  background: #F4F1EA; color: var(--color-text); font-family: var(--font-body);
}
.pi__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pi__eyebrow { display: block; font-family: var(--font-mono); font-size: 7.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-faint); }
.pi__title { display: block; margin-top: 3px; font-family: var(--font-heading); font-size: clamp(15px, 2.9%, 21px); color: var(--color-text); line-height: 1.1; }
.pi__badges { display: flex; gap: 6px; flex: none; }
.pi__badge { font-family: var(--font-mono); font-size: 7.5px; letter-spacing: 0.06em; padding: 3px 8px; border-radius: 11px; white-space: nowrap; }
.pi__badge--cost { color: #2F5D3D; background: #DCE8DE; }
.pi__badge--done { color: var(--color-text-muted); border: 1px solid var(--color-border); }

@media (max-width: 880px) {
  /* 3px between an uppercase mono eyebrow and a serif title reads as a
     collision rather than a pairing — the letterforms nearly touch. */
  .pi__title { margin-top: 7px; }
}

.pi__cols { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(14px, 3%, 26px); align-items: start; margin-top: clamp(4px, 1.4%, 10px); }
.pi__label { display: block; font-family: var(--font-mono); font-size: 7px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-faint); margin-bottom: 6px; }
.pi__desc { font-family: var(--font-body); font-size: 10px; line-height: 1.5; color: var(--color-text-muted); margin: 0 0 10px; }
.pi__quote {
  display: flex; align-items: center; flex-wrap: wrap; gap: 5px 8px;
  background: #fff; border: 1px solid var(--color-border); border-radius: 7px; padding: 9px 11px;
}
.pi__quote + .pi__quote { margin-top: 8px; }
.pi__quote--reco { background: #EAF1EB; border-color: #D3E3D6; }
.pi__quote-price { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--color-text); }
.pi__quote-name { font-family: var(--font-heading); font-size: 12px; color: var(--color-text); }
.pi__reco { font-family: var(--font-mono); font-size: 6.5px; letter-spacing: 0.08em; text-transform: uppercase; color: #2F5D3D; background: #CFE3D3; padding: 2px 6px; border-radius: 9px; }
.pi__quote-meta { flex-basis: 100%; font-family: var(--font-body); font-size: 8.5px; color: var(--color-text-muted); }

.pi__pay { background: #fff; border: 1px solid var(--color-border); border-radius: 9px; padding: 12px 13px; box-shadow: 0 8px 22px rgba(38, 30, 18, 0.05); }
.pi__pay-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 6px 0; font-family: var(--font-body); font-size: 10px; color: var(--color-text-muted); border-top: 1px solid var(--color-border); }
.pi__pay-row:first-of-type { border-top: 0; }
.pi__pay-row b { font-family: var(--font-mono); font-size: 11px; color: var(--color-text); }
.pi__pay-row--fee {
  background: #E1EFE4; margin: 3px -8px; padding: 8px; border-top: 0; border-radius: 5px;
  color: #2F5D3D;
}
.pi__pay-row--fee i { font-style: normal; font-size: 8px; color: #3E6B4A; }
.pi__pay-row--fee b { color: #1D4A35; }
.pi__pay-row--total { border-top: 1.5px solid rgba(38, 48, 42, 0.4); margin-top: 4px; padding-top: 8px; color: var(--color-text); font-weight: 600; }
.pi__pay-row--total b { font-size: 13px; }
.pi__pay-note { margin: 10px 0 0; font-family: var(--font-body); font-size: 8.5px; line-height: 1.45; color: var(--color-text-muted); }
.pi__note { margin-top: auto; padding-top: clamp(10px, 2.2%, 16px); border-top: 1px solid var(--color-border); }

/* Teams — "Your Team" collaboration list */
.tm {
  width: 100%; height: 100%;
  padding: clamp(16px, 3.4%, 28px) clamp(18px, 3.8%, 32px);
  display: flex; flex-direction: column;
  background: #FCFBF7; color: var(--color-text); font-family: var(--font-body);
}
.tm__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: clamp(8px, 2%, 16px); }
.tm__title { font-family: var(--font-heading); font-size: clamp(17px, 3.2%, 24px); color: var(--color-text); }
.tm__add {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--color-border);
  background: #fff; color: var(--color-text-muted); font-size: 16px; line-height: 1;
}
.tm__list { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.tm__row { display: flex; align-items: center; gap: 12px; padding: clamp(8px, 1.9%, 13px) 0; border-top: 1px solid var(--color-border); }
.tm__row:first-child { border-top: 0; }
.tm__av {
  width: 34px; height: 34px; border-radius: 50%; flex: none; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
}
.tm__av--1 { background: #3E6B4A; }
.tm__av--2 { background: #C2913C; }
.tm__av--3 { background: #4A8A7E; }
.tm__av--4 { background: #5A6B86; }
.tm__av--5 { background: #7A6B86; }
.tm__who { flex: 1; min-width: 0; }
.tm__who b { display: block; font-family: var(--font-heading); font-size: 14px; font-weight: 500; color: var(--color-text); line-height: 1.15; }
.tm__who span { display: block; font-family: var(--font-body); font-size: 9.5px; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm__pill {
  flex: none; font-family: var(--font-body); font-size: 10px; font-weight: 500;
  padding: 5px 12px; border-radius: 13px; white-space: nowrap;
}
.tm__pill--active { color: #2F5D3D; background: #DCE8DE; }
.tm__pill--invited { color: #8A6516; background: #F7EFD8; }
.tm__pill--pending { color: #B4472F; background: #F6E3DF; }

/* Payout Reports — what the operator owes each owner this month */
.po {
  width: 100%; height: 100%;
  padding: clamp(14px, 3%, 24px) clamp(16px, 3.4%, 28px);
  display: flex; flex-direction: column; gap: clamp(10px, 2.2%, 16px);
  background: #F8F5EF; color: var(--color-text); font-family: var(--font-body);
}
.po__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.po__eyebrow { display: block; font-family: var(--font-mono); font-size: 7.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-faint); }
.po__title { display: block; margin-top: 3px; font-family: var(--font-heading); font-size: clamp(16px, 3.1%, 23px); color: var(--color-text); }
.po__stats { display: flex; gap: 8px; flex: none; }
.po__stat { text-align: right; border-radius: 7px; padding: 7px 12px; background: #EFEBE2; }
.po__stat--fee { background: #DCE8DE; }
.po__stat-l { display: block; font-family: var(--font-mono); font-size: 6.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); }
.po__stat--fee .po__stat-l { color: #3E6B4A; }
.po__stat-v { font-family: var(--font-mono); font-size: 14px; color: var(--color-text); }
.po__stat--fee .po__stat-v { color: #1D4A35; }

.po__table { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.po__row { display: flex; align-items: center; gap: 12px; padding: clamp(7px, 1.7%, 12px) 0; border-top: 1px solid var(--color-border); }
.po__row:first-child { border-top: 0; }
.po__who { flex: 1; min-width: 0; }
.po__who b { display: block; font-family: var(--font-heading); font-size: 13.5px; font-weight: 500; color: var(--color-text); line-height: 1.15; }
.po__who span { display: block; font-family: var(--font-body); font-size: 9.5px; color: var(--color-text-muted); }
.po__status { flex: none; font-family: var(--font-mono); font-size: 7.5px; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 8px; border-radius: 11px; }
.po__status--ready { color: #2F5D3D; background: #DCE8DE; }
.po__status--paid { color: var(--color-text-muted); border: 1px solid var(--color-border); }
.po__amt { flex: none; font-family: var(--font-mono); font-size: 12px; color: var(--color-text); min-width: 78px; text-align: right; }
.po__row--total { border-top: 1.5px solid rgba(38, 48, 42, 0.4); margin-top: 2px; }
.po__row--total .po__who b { font-family: var(--font-body); font-size: 11px; font-weight: 600; }
.po__row--total .po__amt { font-size: 14px; font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════════════
   Message Received modal — pilot/waitlist submit confirmation.
   VANILLA (marketing is Alpine-free): marketing.js toggles [hidden] on
   .js-mr-scrim and locks scroll via .mr-lock on <html>. Ported from the
   standalone design, scoped under .mr-* and mapped to marketing tokens. The
   animated hero SVG's element classes (.plane/.trail/.dot/.star) are scoped
   under .mr-hero so they never leak.
   ═══════════════════════════════════════════════════════════════════════════ */
.mr-lock { overflow: hidden; }

/* Scrolls when the card is taller than a short viewport; align-items:center +
   card margin:auto keeps the top reachable (the flexbox-overflow gotcha). */
.mr-scrim {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px 20px; overflow-y: auto;
  background: radial-gradient(120% 120% at 50% 42%, rgba(22,51,41,0.34), rgba(15,25,20,0.62));
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.mr-scrim[hidden] { display: none; }

/* No single card border — the two-tone rim comes from the children (green on
   .mr-hero, light on .mr-main), clipped into one continuous rounded edge by
   overflow:hidden + radius. Mirrors the zen-intro modal treatment. */
.mr-card {
  position: relative; width: 540px; max-width: 100%; margin: auto; flex: none;
  background: var(--color-surface); border: 0;
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 2px 0 rgba(30,28,23,0.03), 0 40px 90px -30px rgba(15,25,20,0.55);
  animation: mr-rise .5s cubic-bezier(.16,1,.3,1) both;
}
/* ── two-tone rim ── MIRROR of public/css/two-tone-rim.css. The marketing site is
   bundle-isolated from the app (served standalone via <link>, not the Vite layout
   bundle), so the utility is duplicated here — KEEP IN SYNC with the canonical
   file. Applied to .mr-card (panel) / .mr-hero (crown) / .mr-main (base). */
.two-tone-rim { border: 0; overflow: hidden; }
.two-tone-rim__crown { border-top: 1px solid var(--tt-rim-accent, #2F5B3A); border-left: 1px solid var(--tt-rim-accent, #2F5B3A); border-right: 1px solid var(--tt-rim-accent, #2F5B3A); }
.two-tone-rim__side { border-left: 1px solid var(--tt-rim-base, var(--color-border)); border-right: 1px solid var(--tt-rim-base, var(--color-border)); }
.two-tone-rim__base { border-left: 1px solid var(--tt-rim-base, var(--color-border)); border-right: 1px solid var(--tt-rim-base, var(--color-border)); border-bottom: 1px solid var(--tt-rim-base, var(--color-border)); }
@keyframes mr-rise { from { opacity: 0; transform: translateY(16px) scale(.99); } to { opacity: 1; transform: none; } }

.mr-close {
  position: absolute; top: 15px; right: 15px; z-index: 3;
  width: 32px; height: 32px; border-radius: 8px; border: 1px solid transparent;
  background: rgba(246,242,233,0.14); color: rgba(237,231,214,0.85);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: background .15s, color .15s;
}
.mr-close svg { width: 16px; height: 16px; }
.mr-close:hover { background: rgba(246,242,233,0.26); color: #fff; }

/* Hero — green field, gold glow, animated paper plane */
.mr-hero { position: relative; height: 146px; overflow: hidden; background: linear-gradient(165deg,#1E4433,#122A21); /* rim border: .two-tone-rim__crown */ }
.mr-hero__glow { position: absolute; top: -30%; right: -6%; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(198,161,90,0.26), rgba(198,161,90,0) 62%); pointer-events: none; }
.mr-hero__label { position: absolute; top: 15px; left: 24px; z-index: 2; display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(240,232,214,0.72); }
.mr-hero__pulse { width: 7px; height: 7px; border-radius: 50%; background: #C6A15A; animation: mr-beat 2.2s ease-out infinite; }
@keyframes mr-beat { 0% { box-shadow: 0 0 0 0 rgba(198,161,90,0.55); } 70% { box-shadow: 0 0 0 9px rgba(198,161,90,0); } 100% { box-shadow: 0 0 0 0 rgba(198,161,90,0); } }
.mr-hero__fly { position: absolute; inset: 0; z-index: 1; }
.mr-hero__flysvg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* Plane scaled to 0.8 (20% down). scale is baked into every keyframe because the
   animation's transform would otherwise override a static scale; the base
   transform covers the reduced-motion (animation:none) path. */
.mr-hero .plane { transform-box: fill-box; transform-origin: center; transform: scale(.8); animation: mr-planein 1s cubic-bezier(.16,1,.3,1) .15s both, mr-planebob 3.4s ease-in-out 1.15s infinite; }
@keyframes mr-planein { from { opacity: 0; transform: translate(-40px,26px) rotate(-8deg) scale(.8); } to { opacity: 1; transform: scale(.8); } }
@keyframes mr-planebob { 0%,100% { transform: translateY(0) rotate(0) scale(.8); } 50% { transform: translateY(-6px) rotate(-1.4deg) scale(.8); } }
.mr-hero .trail { stroke-dasharray: 320; stroke-dashoffset: 320; animation: mr-trace 1.3s cubic-bezier(.5,0,.2,1) .1s forwards; }
@keyframes mr-trace { to { stroke-dashoffset: 0; } }
.mr-hero .dot { transform-box: fill-box; transform-origin: center; opacity: 0; animation: mr-dotpulse 2.6s ease-in-out infinite; }
.mr-hero .dot:nth-child(2) { animation-delay: .5s; } .mr-hero .dot:nth-child(3) { animation-delay: 1s; }
@keyframes mr-dotpulse { 0%,100% { opacity: .15; transform: scale(.7); } 50% { opacity: .8; transform: scale(1); } }
.mr-hero .star { transform-box: fill-box; transform-origin: center; animation: mr-twinkle 2.6s ease-in-out infinite; }
.mr-hero .star:nth-child(odd) { animation-delay: .9s; } .mr-hero .star:nth-child(3n) { animation-delay: 1.6s; }
@keyframes mr-twinkle { 0%,100% { opacity: .18; transform: scale(.7); } 50% { opacity: .9; transform: scale(1); } }

/* Body — badge, title, subtext */
.mr-body { padding: 20px 34px 4px; text-align: center; }
.mr-badge { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: #8A6D2E; background: #FBF3E0; border: 1px solid rgba(198,161,90,0.42); border-radius: 100px; padding: 5px 13px; }
.mr-badge__ic { display: inline-flex; } .mr-badge__ic svg { width: 12px; height: 12px; }
.mr-title { font-family: var(--font-narrative); font-weight: 400; font-size: 27px; line-height: 1.16; letter-spacing: -0.01em; color: var(--color-text); margin: 15px 0 0; }
.mr-sub { font-size: 15px; line-height: 1.6; color: var(--color-text-muted); margin: 12px auto 0; max-width: 42ch; }

/* Steps callout — cream, "check your inbox" */
.mr-steps { margin: 16px 34px 0; border: 1px solid var(--color-border-subtle); border-radius: 13px; background: #FBF7EE; overflow: hidden; text-align: left; }
.mr-step { display: flex; align-items: flex-start; gap: 13px; padding: 14px 17px; }
.mr-step + .mr-step { border-top: 1px solid var(--color-border-subtle); }
.mr-step__ic { flex: none; width: 34px; height: 34px; border-radius: 9px; background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-accent); display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.mr-step__ic svg { width: 17px; height: 17px; }
.mr-step__t { font-size: 14px; font-weight: 600; color: var(--color-text); }
.mr-step__d { font-size: 12.5px; color: var(--color-text-muted); margin-top: 2px; line-height: 1.45; }

/* CTA + footer */
.mr-cta { padding: 18px 34px 10px; display: flex; justify-content: center; }
.mr-btn { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-body); font-size: 15px; font-weight: 600; color: #FBF7EE; background: #163329; border: 1px solid #163329; border-radius: 9px; padding: 12px 28px; cursor: pointer; box-shadow: 0 8px 18px -8px rgba(22,51,41,0.6); transition: transform .12s, box-shadow .12s, background .15s; }
.mr-btn__ic { display: inline-flex; } .mr-btn__ic svg { width: 18px; height: 18px; }
.mr-btn:hover { background: #0F2620; transform: translateY(-1px); box-shadow: 0 12px 22px -8px rgba(22,51,41,0.65); }
.mr-foot { padding: 0 34px 20px; text-align: center; }
.mr-foot__note { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-text-faint); }

@media (prefers-reduced-motion: reduce) {
  .mr-card, .mr-hero .plane, .mr-hero .trail, .mr-hero .dot, .mr-hero .star, .mr-hero__pulse { animation: none !important; }
  .mr-hero .trail { stroke-dashoffset: 0; }
}
@media (max-width: 560px) {
  .mr-body { padding: 22px 22px 4px; } .mr-title { font-size: 23px; }
  .mr-steps { margin: 18px 22px 0; } .mr-cta { padding: 18px 22px 10px; } .mr-foot { padding: 0 22px 20px; }
}

/* Legal links (docs/specs/ready/privacy-policy.md §10) — the footer's Terms/Privacy
   and the lead form's Privacy Policy link. Quiet: they inherit the line's colour. */
.site-footer__legal-link,
.ctaform__link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.site-footer__legal-link:hover,
.ctaform__link:hover {
  opacity: 0.8;
}