:root,
[data-theme='light'] {
  --font-display: 'General Sans', 'Inter', sans-serif;
  --font-body: 'Satoshi', 'Inter', sans-serif;

  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2.25rem, 1.6rem + 3.2vw, 4.75rem);

  --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;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  --color-bg: #f6f3ed;
  --color-surface: #fffdf8;
  --color-surface-2: #f0ebe2;
  --color-surface-offset: #e7f0ed;
  --color-surface-dynamic: #d7e8e4;
  --color-border: #d8d0c3;
  --color-divider: #e3dbcf;
  --color-text: #202824;
  --color-text-muted: #69716d;
  --color-text-faint: #9ca39f;
  --color-text-inverse: #fffdf8;
  --color-primary: #0f5f62;
  --color-primary-hover: #0a474a;
  --color-primary-active: #073538;
  --color-primary-highlight: #d7e8e4;
  --color-success: #47763b;
  --color-warning: #9b5c1d;
  --color-error: #a12c52;

  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-2xl: 2rem;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 2px rgb(32 40 36 / 0.06);
  --shadow-md: 0 10px 30px rgb(32 40 36 / 0.08);
  --shadow-lg: 0 24px 70px rgb(32 40 36 / 0.14);
  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);
  --content-wide: 1180px;
}

[data-theme='dark'] {
  --color-bg: #111816;
  --color-surface: #18211f;
  --color-surface-2: #1f2b28;
  --color-surface-offset: #213431;
  --color-surface-dynamic: #2a403c;
  --color-border: #33433f;
  --color-divider: #25322f;
  --color-text: #edf2ef;
  --color-text-muted: #adb8b4;
  --color-text-faint: #78837f;
  --color-text-inverse: #111816;
  --color-primary: #8fcfca;
  --color-primary-hover: #b0e3df;
  --color-primary-active: #d2f2ef;
  --color-primary-highlight: #223d3a;
  --color-success: #91c481;
  --color-warning: #d7a65e;
  --color-error: #e4849b;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.22);
  --shadow-md: 0 10px 30px rgb(0 0 0 / 0.32);
  --shadow-lg: 0 24px 70px rgb(0 0 0 / 0.45);
}

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

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  scroll-padding-top: var(--space-20);
}

body {
  min-height: 100dvh;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-text);
  background:
    radial-gradient(circle at 8% 10%, color-mix(in oklab, var(--color-primary-highlight) 65%, transparent), transparent 26rem),
    linear-gradient(180deg, var(--color-bg), color-mix(in oklab, var(--color-bg) 88%, var(--color-surface-2)));
}

svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

p,
li {
  text-wrap: pretty;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
  border: 0;
}

a,
button,
input {
  transition:
    color var(--transition-interactive),
    background var(--transition-interactive),
    border-color var(--transition-interactive),
    box-shadow var(--transition-interactive),
    transform var(--transition-interactive);
}

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

::selection {
  color: var(--color-text);
  background: color-mix(in oklab, var(--color-primary) 24%, transparent);
}

.skip-link {
  position: fixed;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 100;
  transform: translateY(-160%);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  color: var(--color-text-inverse);
  background: var(--color-primary);
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  background: color-mix(in oklab, var(--color-bg) 88%, transparent);
  backdrop-filter: blur(16px);
}

.site-header.is-scrolled {
  border-color: color-mix(in oklab, var(--color-border) 70%, transparent);
  box-shadow: var(--shadow-sm);
}

.nav {
  width: min(calc(100% - var(--space-8)), var(--content-wide));
  min-height: 76px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.brand-mark {
  width: 42px;
  color: var(--color-primary);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 600;
}

.nav-links a:hover {
  color: var(--color-text);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.theme-toggle {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in oklab, var(--color-border) 80%, transparent);
  border-radius: var(--radius-full);
  color: var(--color-text);
  background: color-mix(in oklab, var(--color-surface) 82%, transparent);
}

.theme-toggle:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.theme-toggle svg {
  width: 20px;
}

.button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-full);
  color: var(--color-text-inverse);
  background: var(--color-primary);
  box-shadow: var(--shadow-sm);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.button:hover {
  transform: translateY(-1px);
  background: var(--color-primary-hover);
}

.button-small {
  min-height: 42px;
  padding-inline: var(--space-4);
}

.button-secondary {
  color: var(--color-text);
  border-color: color-mix(in oklab, var(--color-border) 80%, transparent);
  background: color-mix(in oklab, var(--color-surface) 82%, transparent);
}

.button-secondary:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background: var(--color-surface);
}

.hero {
  width: min(calc(100% - var(--space-8)), var(--content-wide));
  margin: 0 auto;
  padding: clamp(1.25rem, 3vw, 2.25rem) 0 var(--space-8);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.95fr);
  align-items: center;
  gap: clamp(var(--space-6), 5vw, var(--space-12));
}

.eyebrow,
.section-kicker,
.card-label {
  color: var(--color-primary);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero h1 {
  max-width: 11ch;
  margin-top: var(--space-4);
  font-size: var(--text-2xl);
}

.hero-text {
  max-width: 62ch;
  margin-top: var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--text-lg);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

.trust-note {
  margin-top: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.visit-card {
  position: relative;
  padding: var(--space-6);
  border: 1px solid color-mix(in oklab, var(--color-border) 76%, transparent);
  border-radius: var(--radius-2xl);
  background: color-mix(in oklab, var(--color-surface) 88%, transparent);
  box-shadow: var(--shadow-lg);
}

.visit-card::before {
  content: '';
  position: absolute;
  inset: var(--space-4);
  z-index: -1;
  border-radius: inherit;
  background: var(--color-primary-highlight);
  transform: rotate(-3deg);
}

.visit-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-divider);
}

.visit-card h2 {
  margin-top: var(--space-1);
  font-size: var(--text-lg);
}

.status-pill,
.plan-badge {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  color: var(--color-primary);
  background: var(--color-primary-highlight);
  font-size: var(--text-xs);
  font-weight: 800;
}

.timeline {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-6);
}

.timeline-item {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: var(--space-3);
}

.timeline-dot {
  width: 12px;
  height: 12px;
  margin-top: 0.45rem;
  border: 3px solid var(--color-primary);
  border-radius: var(--radius-full);
  background: var(--color-surface);
}

.timeline-item strong {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--text-sm);
}

.timeline-item p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.ai-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  color: var(--color-text-inverse);
  background: var(--color-primary);
}

.ai-summary span {
  font-size: var(--text-sm);
  font-weight: 800;
}

.ai-summary p {
  max-width: 22ch;
  color: color-mix(in oklab, var(--color-text-inverse) 80%, transparent);
  font-size: var(--text-xs);
  text-align: right;
}

section {
  width: min(calc(100% - var(--space-8)), var(--content-wide));
  margin: 0 auto;
}

.problem-section,
.steps-section,
.features-section,
.audience-section,
.pricing-section,
.faq-section,
.visit-prep-showcase,
.screenshots-section,
.ai-trust-section,
.waitlist-section,
.contact-cards-section {
  padding-block: clamp(1.1rem, 2.3vw, 1.9rem);
}

/* Tighten the main flow gap between sections */
main > section + section,
main > div + section,
main > section + div {
  margin-top: clamp(0.5rem, 1.5vw, 1rem);
}

/* Tighter section heading spacing */
.section-heading { margin-bottom: clamp(0.75rem, 1.8vw, 1.25rem); }
.section-heading h2 { margin-bottom: 0.35rem; }
.section-heading .section-sub { margin-top: 0.25rem; }

.problem-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(var(--space-8), 6vw, var(--space-20));
  align-items: start;
  margin-top: var(--space-4);
}

.problem-layout h2,
.section-heading h2,
.audience-section h2,
.waitlist-copy h2 {
  font-size: var(--text-xl);
}

.problem-layout p,
.audience-list p,
.waitlist-copy p {
  color: var(--color-text-muted);
}

.section-heading {
  max-width: 760px;
  margin-bottom: var(--space-8);
}

.section-heading h2 {
  margin-top: var(--space-3);
}

.section-heading-centered {
  max-width: 900px;
  margin-inline: auto;
  text-align: center;
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.step-card {
  min-height: 260px;
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid color-mix(in oklab, var(--color-border) 80%, transparent);
  border-radius: var(--radius-xl);
  background: color-mix(in oklab, var(--color-surface) 88%, transparent);
  box-shadow: var(--shadow-sm);
}

.step-card-large {
  grid-row: span 2;
  min-height: 536px;
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

.step-card-wide {
  grid-column: span 2;
  min-height: 260px;
  background: var(--color-surface-offset);
}

.step-number {
  color: currentColor;
  opacity: 0.56;
  font-size: var(--text-sm);
  font-weight: 800;
}

.step-card h3 {
  margin-top: auto;
  font-size: var(--text-lg);
}

.step-card p {
  margin-top: var(--space-3);
  color: color-mix(in oklab, currentColor 68%, transparent);
}

.feature-panel {
  display: block;
  padding: clamp(var(--space-8), 6vw, var(--space-12));
  border-radius: var(--radius-2xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}

.feature-list {
  display: grid;
  gap: var(--space-4);
}

.feature-list article {
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-divider);
}

.feature-list article:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.feature-list h3,
.faq-grid h3 {
  font-size: var(--text-lg);
}

.feature-list p,
.faq-grid p {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
}

.audience-section {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(var(--space-8), 6vw, var(--space-16));
  align-items: start;
}

.audience-list {
  display: grid;
  gap: var(--space-4);
}

.audience-list p {
  padding: var(--space-5);
  border: 1px solid color-mix(in oklab, var(--color-border) 80%, transparent);
  border-radius: var(--radius-lg);
  background: color-mix(in oklab, var(--color-surface) 86%, transparent);
}

.audience-list strong {
  color: var(--color-text);
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.price-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 420px;
  padding: var(--space-6);
  border: 1px solid color-mix(in oklab, var(--color-border) 80%, transparent);
  border-radius: var(--radius-xl);
  background: color-mix(in oklab, var(--color-surface) 86%, transparent);
}

.featured-price {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-lg);
}

.price-card h3 {
  margin-top: var(--space-5);
  font-size: var(--text-lg);
}

.price {
  margin-top: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 800;
  letter-spacing: -0.04em;
}

/* Inner price wrappers (toggle targets) inherit the big price size */
.price > span[data-price-monthly],
.price > span[data-price-annual] {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

/* Only the period suffix (/mo, /yr, /forever) is small + muted */
.price > span[data-price-monthly] > span,
.price > span[data-price-annual] > span,
.price > span:not([data-price-monthly]):not([data-price-annual]) {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0;
}

/* Hide the inactive toggle option fully (display:none, not just hidden attr) */
.price [data-price-monthly][hidden],
.price [data-price-annual][hidden],
.price-note [data-note-monthly][hidden],
.price-note [data-note-annual][hidden] {
  display: none !important;
}

.price-note {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.price-card ul {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-8);
  list-style: none;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.price-card li::before {
  content: '✓';
  margin-right: var(--space-2);
  color: var(--color-success);
  font-weight: 800;
}

.waitlist-section {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(var(--space-8), 6vw, var(--space-16));
  align-items: center;
  margin-block: clamp(var(--space-12), 8vw, var(--space-24));
  padding: clamp(var(--space-8), 6vw, var(--space-16));
  border-radius: var(--radius-2xl);
  color: var(--color-text-inverse);
  background: var(--color-primary);
}

.waitlist-copy .eyebrow {
  color: #0f1d1a;
  opacity: 0.75;
}

.waitlist-copy p {
  margin-top: var(--space-4);
  color: #0f1d1a;
  opacity: 0.85;
}

.waitlist-form {
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  background: color-mix(in oklab, var(--color-text-inverse) 10%, transparent);
}

.waitlist-form label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 800;
}

.form-row {
  display: flex;
  gap: var(--space-3);
}

.form-row input {
  min-width: 0;
  flex: 1;
  min-height: 52px;
  padding: 0 var(--space-4);
  border: 1px solid color-mix(in oklab, var(--color-text-inverse) 28%, transparent);
  border-radius: var(--radius-full);
  color: var(--color-text-inverse);
  background: color-mix(in oklab, var(--color-text-inverse) 12%, transparent);
}

.form-row input::placeholder {
  color: color-mix(in oklab, var(--color-text-inverse) 58%, transparent);
}

.form-row .button {
  border-color: var(--color-text-inverse);
  color: var(--color-primary);
  background: var(--color-text-inverse);
}

.form-message {
  margin-top: var(--space-3);
  color: #0f1d1a;
  font-size: var(--text-sm);
  line-height: 1.45;
  opacity: 0.92;
}
.form-message.is-success,
.form-message.is-error {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: 600;
  opacity: 1;
  border-left: 4px solid;
}
.form-message.is-success {
  background: #ffffff;
  color: #0a474a;
  border-left-color: #2e9b56;
}
.form-message.is-error {
  background: #ffe5ec;
  color: #7a1f3d;
  border-left-color: #d13a64;
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

.faq-grid article {
  padding: var(--space-6);
  border: 1px solid color-mix(in oklab, var(--color-border) 80%, transparent);
  border-radius: var(--radius-xl);
  background: color-mix(in oklab, var(--color-surface) 86%, transparent);
}

.site-footer {
  border-top: 1px solid var(--color-divider);
  padding-block: var(--space-8);
}

.footer-inner {
  width: min(calc(100% - var(--space-8)), var(--content-wide));
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: var(--space-8);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.footer-inner p {
  max-width: 72ch;
}

.footer-inner a {
  color: var(--color-primary);
  font-weight: 800;
}

.footer-inner a:hover {
  color: var(--color-primary-hover);
}

@media (max-width: 900px) {
  .nav-links {
    display: none;
  }

  .hero,
  .problem-layout,
  .feature-panel,
  .audience-section,
  .waitlist-section {
    grid-template-columns: 1fr;
  }

  .hero {
    min-height: auto;
  }

  .hero h1 {
    max-width: 12ch;
  }

  .steps-grid,
  .pricing-grid,
  .faq-grid {
    grid-template-columns: 1fr;
  }

  .step-card-large,
  .step-card-wide {
    grid-row: auto;
    grid-column: auto;
    min-height: 260px;
  }

  .footer-inner {
    flex-direction: column;
  }
}

@media (max-width: 560px) {
  .nav {
    width: min(calc(100% - var(--space-4)), var(--content-wide));
  }

  .nav-actions .button-small {
    display: none;
  }

  section,
  .hero,
  .footer-inner {
    width: min(calc(100% - var(--space-4)), var(--content-wide));
  }

  .hero {
    padding-top: var(--space-10);
  }

  .hero-actions,
  .form-row {
    flex-direction: column;
  }

  .button {
    width: 100%;
  }

  .visit-card,
  .feature-panel,
  .waitlist-section,
  .price-card,
  .faq-grid article {
    border-radius: var(--radius-xl);
  }

  .ai-summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .ai-summary p {
    text-align: left;
  }
}

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

/* ==== Proof bar ==== */
.proof-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
  margin: 0 auto var(--space-16);
  max-width: var(--content-wide);
  padding: var(--space-6) var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}
.proof-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-2) var(--space-4);
  border-left: 1px solid var(--color-divider);
}
.proof-item:first-child { border-left: none; }
.proof-item strong {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem);
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: -0.01em;
}
.proof-item span {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.4;
}
@media (max-width: 640px) {
  .proof-item { border-left: none; border-top: 1px solid var(--color-divider); padding-top: var(--space-4); }
  .proof-item:first-child { border-top: none; padding-top: var(--space-2); }
}

/* ==== Hero trust list ==== */
.hero-trust {
  list-style: none;
  padding: 0;
  margin: var(--space-5) 0 var(--space-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
}
.hero-trust li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-weight: 500;
}
.hero-trust .check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--color-primary-highlight);
  color: var(--color-primary);
  font-size: 12px;
  font-weight: 700;
}

/* ==== Testimonials ==== */
.testimonials-section {
  max-width: var(--content-wide);
  margin: 0 auto;
  padding: var(--space-20) var(--space-6);
}
.testimonials-section .section-sub {
  color: var(--color-text-muted);
  margin-top: var(--space-2);
  max-width: 56ch;
}
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-10);
}
.testimonial-card {
  margin: 0;
  padding: var(--space-8);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-interactive), box-shadow var(--transition-interactive);
}
.testimonial-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.featured-testimonial {
  background: var(--color-surface-offset);
  border-color: var(--color-primary-highlight);
}
.testimonial-rating {
  color: #d97706;
  font-size: var(--text-base);
  letter-spacing: 2px;
}
.testimonial-card blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1.45;
  color: var(--color-text);
  font-weight: 500;
}
.testimonial-card figcaption {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: auto;
}
.testimonial-card figcaption strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-text);
  font-size: var(--text-base);
}
.testimonial-card figcaption span {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.avatar {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: #2c1f12;
  letter-spacing: 0.02em;
}
.testimonial-metric {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-divider);
  padding-top: var(--space-3);
}
.testimonial-metric strong {
  color: var(--color-primary);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-base);
}
.testimonial-disclaimer {
  margin-top: var(--space-8);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  max-width: 64ch;
}

/* ==== Footer meta ==== */
.footer-meta {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  margin-top: var(--space-3);
}
.footer-meta a { color: inherit; }

/* ==== Pricing CTA buttons ==== */
.price-card .button { margin-top: auto; align-self: flex-start; }

/* ==== A/B variant marker ==== */
[data-ab-variant='B'] [data-ab-label]::after {
  content: '';
}

/* ==== Reduce motion ==== */
@media (prefers-reduced-motion: reduce) {
  .testimonial-card { transition: none; }
  .testimonial-card:hover { transform: none; }
}

/* ==== Hero feature list ==== */
.hero-features {
  list-style: none;
  padding: 0;
  margin: var(--space-6) 0 var(--space-6);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3) var(--space-5);
}
.hero-features li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--color-text);
}
.hero-features li strong {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-text);
}
.feat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--color-primary-highlight);
  font-size: 15px;
  line-height: 1;
}
@media (max-width: 720px) {
  .hero-features { grid-template-columns: 1fr; }
}

/* ==== Compact "How it works" grid — 3 columns (3+3 rows for 6 cards) ==== */
.steps-grid-compact {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
@media (max-width: 880px) {
  .steps-grid-compact { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .steps-grid-compact { grid-template-columns: 1fr; }
}
.steps-grid-compact .step-card {
  padding: var(--space-6);
  min-height: 0;
  grid-column: auto !important;
  grid-row: auto !important;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  box-shadow: var(--shadow-sm);
}
.steps-grid-compact .step-card h3 {
  font-size: var(--text-base);
  margin: 0;
  line-height: 1.25;
}
.steps-grid-compact .step-card p {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text-muted);
  margin: 0;
}
.steps-grid-compact .step-number {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.04em;
}

/* ==== Waitlist trust list contrast fix (teal background) ==== */
.waitlist-copy .hero-trust {
  margin: var(--space-5) 0 0;
}
.waitlist-copy .hero-trust li {
  color: #0f1d1a;
  font-weight: 700;
  text-shadow: none;
}
.waitlist-copy .hero-trust .check {
  background: #0f1d1a;
  color: #ffffff;
  font-weight: 800;
}

/* Default trust list contrast (on light bg): bump to body color */
.hero-trust li { color: var(--color-text); font-weight: 500; }

/* ==== Coming Soon / Beta hero badge ==== */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.85rem;
  margin: 0 0 var(--space-4);
  border-radius: 999px;
  background: rgba(15, 29, 26, 0.08);
  border: 1px solid rgba(15, 29, 26, 0.14);
  color: #0f1d1a;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  width: fit-content;
}
.hero-badge .badge-dot {
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #f05a64;
  box-shadow: 0 0 0 0 rgba(240, 90, 100, 0.7);
  animation: badge-pulse 2s infinite;
}
@keyframes badge-pulse {
  0% { box-shadow: 0 0 0 0 rgba(240, 90, 100, 0.55); }
  70% { box-shadow: 0 0 0 8px rgba(240, 90, 100, 0); }
  100% { box-shadow: 0 0 0 0 rgba(240, 90, 100, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-badge .badge-dot { animation: none; }
}

/* ============================================================
   COOKIE CONSENT BANNER + MODAL
   ============================================================ */
.cookie-banner {
  position: fixed;
  left: clamp(0.75rem, 2vw, 1.5rem);
  right: clamp(0.75rem, 2vw, 1.5rem);
  bottom: clamp(0.75rem, 2vw, 1.5rem);
  z-index: 9999;
  background: var(--color-surface, #ffffff);
  color: var(--color-text, #0f1d1a);
  border: 1px solid color-mix(in oklab, var(--color-border, #d8d2c4) 80%, transparent);
  border-radius: var(--radius-xl, 18px);
  box-shadow: 0 18px 48px rgba(15, 29, 26, 0.18);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 240ms ease, transform 240ms ease;
  pointer-events: none;
}
.cookie-banner.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.cookie-banner-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.25rem;
  align-items: center;
  padding: 1.25rem clamp(1rem, 2.5vw, 1.75rem);
}
.cookie-banner-text strong { display: block; font-size: 1rem; margin-bottom: 0.25rem; font-weight: 700; }
.cookie-banner-text p { margin: 0; font-size: 0.9rem; line-height: 1.55; color: var(--color-text-muted, #5b665e); }
.cookie-banner-text a { color: var(--color-primary, #0f5f62); font-weight: 600; }
.cookie-banner-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
@media (max-width: 720px) {
  .cookie-banner-inner { grid-template-columns: 1fr; }
  .cookie-banner-actions { width: 100%; }
  .cookie-banner-actions .cookie-btn { flex: 1 1 auto; }
}

.cookie-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 1.1rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 160ms ease;
  white-space: nowrap;
  font-family: inherit;
}
.cookie-btn-primary {
  background: var(--color-primary, #0f5f62);
  color: #ffffff;
  border-color: var(--color-primary, #0f5f62);
}
.cookie-btn-primary:hover { filter: brightness(1.08); }
.cookie-btn-secondary {
  background: transparent;
  color: var(--color-text, #0f1d1a);
  border-color: color-mix(in oklab, var(--color-border, #d8d2c4) 90%, transparent);
}
.cookie-btn-secondary:hover { background: color-mix(in oklab, var(--color-text, #0f1d1a) 6%, transparent); }
.cookie-btn-ghost {
  background: transparent;
  color: var(--color-text-muted, #5b665e);
  border-color: transparent;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cookie-btn-ghost:hover { color: var(--color-text, #0f1d1a); }

.cookie-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(15, 29, 26, 0.55);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  transition: opacity 240ms ease;
}
.cookie-modal-overlay.is-visible { opacity: 1; }
.cookie-modal {
  position: relative;
  width: min(560px, 100%);
  max-height: 85vh;
  overflow-y: auto;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--color-surface, #ffffff);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(15, 29, 26, 0.25);
}
.cookie-modal-close {
  position: absolute;
  top: 0.75rem;
  right: 1rem;
  background: transparent;
  border: none;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--color-text-muted, #5b665e);
  cursor: pointer;
  padding: 0.25rem 0.5rem;
}
.cookie-modal-close:hover { color: var(--color-text, #0f1d1a); }
.cookie-modal h2 {
  margin: 0 0 0.5rem;
  font-family: var(--font-display, inherit);
  font-size: 1.4rem;
  letter-spacing: -0.01em;
}
.cookie-modal-intro {
  margin: 0 0 1.25rem;
  color: var(--color-text-muted, #5b665e);
  font-size: 0.9rem;
  line-height: 1.55;
}
.cookie-category {
  padding: 1rem 0;
  border-top: 1px solid color-mix(in oklab, var(--color-border, #d8d2c4) 80%, transparent);
}
.cookie-category-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.35rem;
}
.cookie-category h3 { margin: 0; font-size: 1rem; font-weight: 700; }
.cookie-category p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--color-text-muted, #5b665e);
}

.cookie-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 44px;
  height: 24px;
  cursor: pointer;
}
.cookie-toggle-locked {
  width: auto;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: color-mix(in oklab, var(--color-text-muted, #5b665e) 12%, transparent);
  color: var(--color-text-muted, #5b665e);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: not-allowed;
}
.cookie-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.cookie-toggle-slider {
  position: absolute;
  inset: 0;
  background: color-mix(in oklab, var(--color-text-muted, #5b665e) 30%, transparent);
  border-radius: 999px;
  transition: background 160ms ease;
}
.cookie-toggle-slider::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: #ffffff;
  border-radius: 50%;
  transition: transform 160ms ease;
}
.cookie-toggle input:checked + .cookie-toggle-slider {
  background: var(--color-primary, #0f5f62);
}
.cookie-toggle input:checked + .cookie-toggle-slider::before {
  transform: translateX(20px);
}

.cookie-modal-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}
@media (max-width: 540px) {
  .cookie-modal-actions { flex-direction: column-reverse; }
  .cookie-modal-actions .cookie-btn { width: 100%; }
}

/* ============================================================
   APP PREVIEW SCREENSHOTS SECTION
   ============================================================ */
.screenshots-section {
  margin-block: clamp(var(--space-12), 8vw, var(--space-20));
}
.screenshots-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(var(--space-4), 2vw, var(--space-6));
  margin-top: clamp(var(--space-8), 5vw, var(--space-10));
  max-width: 1100px;
  margin-inline: auto;
}
.screenshot-card {
  margin: 0;
  background: #ffffff;
  border: 1px solid color-mix(in oklab, var(--color-border) 80%, transparent);
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.screenshot-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(15, 29, 26, 0.12);
}
.screenshot-card img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  background: #f7f9fa;
  border-bottom: 1px solid rgba(15, 29, 26, 0.06);
  /* Sharper rendering for UI screenshots */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}
.screenshot-card { align-self: start; }

/* Match top-row heights (cards 1 & 2): force img into a shared aspect ratio. */
.screenshots-grid .screenshot-card:nth-child(1) img,
.screenshots-grid .screenshot-card:nth-child(2) img {
  aspect-ratio: 1253 / 934;
  object-fit: contain;
  object-position: top left;
}
.screenshot-card figcaption {
  padding: 1.1rem 1.25rem 1.35rem;
}
.screenshot-card figcaption strong {
  display: block;
  font-size: 1.1rem;
  margin-bottom: 0.45rem;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.01em;
}
.screenshot-card figcaption p {
  margin: 0;
  font-size: 1rem;
  color: var(--color-text);
  line-height: 1.55;
  opacity: 0.85;
}

/* Hint above grid */
.screenshots-hint {
  margin-top: 0.75rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-primary, #0f5f62);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  background: rgba(15, 95, 98, 0.08);
  border-radius: 999px;
}

/* Click-to-enlarge button + zoom badge */
.screenshot-trigger {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  overflow: hidden;
}
.screenshot-trigger img {
  transition: transform 250ms ease;
}
.screenshot-trigger:hover img,
.screenshot-trigger:focus-visible img {
  transform: scale(1.02);
}
.screenshot-zoom {
  position: absolute;
  bottom: 0.75rem;
  right: 0.75rem;
  background: rgba(15, 29, 26, 0.85);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 200ms ease, transform 200ms ease;
  pointer-events: none;
  backdrop-filter: blur(4px);
}
.screenshot-trigger:hover .screenshot-zoom,
.screenshot-trigger:focus-visible .screenshot-zoom {
  opacity: 1;
  transform: translateY(0);
}
.screenshot-trigger:focus-visible {
  outline: 3px solid var(--color-primary, #0f5f62);
  outline-offset: 3px;
}
@media (hover: none) {
  .screenshot-zoom { opacity: 1; transform: translateY(0); }
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(8, 18, 20, 0.92);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  animation: lb-fade 180ms ease;
}
.lightbox[hidden] { display: none; }
@keyframes lb-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.lightbox-content {
  margin: 0;
  max-width: min(1400px, 95vw);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
.lightbox-content img {
  max-width: 100%;
  max-height: 82vh;
  width: auto;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 25px 60px rgba(0,0,0,0.5);
  background: #fff;
}
.lightbox-content figcaption {
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
}
.lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: rgba(255,255,255,0.95);
  color: #0f1d1a;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
}
.lightbox-close:hover { background: #fff; transform: scale(1.05); }

@media (max-width: 540px) {
  .screenshots-grid { grid-template-columns: 1fr; }
  .screenshot-card figcaption strong { font-size: 1.05rem; }
  .screenshot-card figcaption p { font-size: 0.95rem; }
}

/* ============================================================
   FEATURES — 4 GROUPED CATEGORIES
   ============================================================ */
.feature-categories {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(var(--space-3), 1.5vw, var(--space-5));
  margin-top: clamp(var(--space-8), 5vw, var(--space-10));
}
@media (max-width: 1024px) {
  .feature-categories { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .feature-categories { grid-template-columns: 1fr; }
}
.feature-categories .feature-category {
  padding: 1.1rem 1rem;
}
.feature-categories .feature-category h3 {
  font-size: 0.95rem;
  line-height: 1.25;
}
.feature-categories .feature-category .feature-count {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 0.2rem;
}
.feature-categories .feature-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.55rem;
}
.feature-categories .feature-grid li {
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--color-text);
}
.feature-categories .feature-grid li strong {
  font-weight: 700;
  display: block;
  margin-bottom: 0.05rem;
}
.feature-category {
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: color-mix(in oklab, var(--color-surface) 92%, transparent);
  border: 1px solid color-mix(in oklab, var(--color-border) 80%, transparent);
  border-radius: var(--radius-xl);
}
.feature-category-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid color-mix(in oklab, var(--color-border) 70%, transparent);
}
.feature-category-icon {
  font-size: 1.5rem;
  line-height: 1;
}
.feature-category h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  flex: 1;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.feature-count {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.feature-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.65rem;
}
.feature-grid li {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}
.feature-grid li strong {
  color: var(--color-text);
  font-weight: 700;
}
@media (max-width: 760px) {
  .feature-categories { grid-template-columns: 1fr; }
}

/* ============================================================
   AI CAPABILITIES TRUST SECTION
   ============================================================ */
.ai-trust-section {
  margin-block: clamp(var(--space-12), 8vw, var(--space-20));
  padding: clamp(var(--space-8), 5vw, var(--space-12));
  background: color-mix(in oklab, var(--color-primary) 6%, transparent);
  border-radius: var(--radius-2xl);
}
.ai-capabilities {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(var(--space-3), 1.5vw, var(--space-4));
  margin-top: clamp(var(--space-6), 4vw, var(--space-8));
}
/* 4 cards on row 1, 3 centered cards on row 2 (12-col grid) */
@media (min-width: 921px) {
  .ai-capabilities { grid-template-columns: repeat(12, 1fr); }
  .ai-capabilities .ai-cap-card:nth-child(1) { grid-column: 1 / span 3; }
  .ai-capabilities .ai-cap-card:nth-child(2) { grid-column: 4 / span 3; }
  .ai-capabilities .ai-cap-card:nth-child(3) { grid-column: 7 / span 3; }
  .ai-capabilities .ai-cap-card:nth-child(4) { grid-column: 10 / span 3; }
  .ai-capabilities .ai-cap-card:nth-child(5) { grid-column: 2 / span 3; }
  .ai-capabilities .ai-cap-card:nth-child(6) { grid-column: 5 / span 3; }
  .ai-capabilities .ai-cap-card:nth-child(7) { grid-column: 8 / span 3; }
}
@media (max-width: 920px) {
  .ai-capabilities { grid-template-columns: repeat(2, 1fr); }
  .ai-capabilities .ai-cap-card { grid-column: auto !important; }
}
@media (max-width: 540px) {
  .ai-capabilities { grid-template-columns: 1fr; }
}
.ai-cap-card {
  padding: 1.25rem;
  background: var(--color-surface);
  border: 1px solid color-mix(in oklab, var(--color-border) 70%, transparent);
  border-radius: var(--radius-xl);
}
.ai-cap-num {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-primary);
  background: color-mix(in oklab, var(--color-primary) 14%, transparent);
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  margin-bottom: 0.65rem;
  letter-spacing: 0.04em;
}
.ai-cap-card h3 {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
  font-weight: 700;
}
.ai-cap-card p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}
.ai-trust-bullets {
  list-style: none;
  padding: 0;
  margin: clamp(var(--space-6), 4vw, var(--space-8)) 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 1.5rem;
  font-size: 0.9rem;
  color: var(--color-text);
}

/* ============================================================
   FOOTER — Miami App Studio logo
   ============================================================ */
.footer-built-by {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  margin-top: var(--space-4);
  padding-top: var(--space-5);
  border-top: 1px solid color-mix(in oklab, var(--color-border) 50%, transparent);
}
.footer-built-by img {
  height: 40px;
  width: auto;
  opacity: 0.95;
  display: block;
}
.footer-built-by .footer-built-label {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin: 0;
}
.ai-trust-bullets li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.ai-trust-bullets .check {
  color: var(--color-success, #1d9b6c);
  font-weight: 800;
}

/* ============================================================
   PRICING — BILLING TOGGLE + LIFETIME BANNER
   ============================================================ */
.section-sub {
  margin-top: 0.75rem;
  color: var(--color-text-muted);
  font-size: 1rem;
  line-height: 1.55;
  max-width: 60ch;
}
.billing-toggle {
  display: inline-flex;
  margin: clamp(var(--space-5), 3vw, var(--space-7)) 0;
  padding: 4px;
  background: color-mix(in oklab, var(--color-text, #0f1d1a) 8%, transparent);
  border-radius: 999px;
  gap: 2px;
}
.billing-toggle-btn {
  padding: 0.55rem 1.1rem;
  border: none;
  background: transparent;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all 160ms ease;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.billing-toggle-btn.is-active {
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 2px 6px rgba(15,29,26,0.08);
}
.save-badge {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-primary);
  background: color-mix(in oklab, var(--color-primary) 14%, transparent);
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
}

.lifetime-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: clamp(var(--space-6), 4vw, var(--space-8));
  padding: clamp(1rem, 2.5vw, 1.5rem) clamp(1.25rem, 3vw, 2rem);
  background: linear-gradient(135deg, color-mix(in oklab, var(--color-primary) 14%, transparent), color-mix(in oklab, var(--color-primary) 6%, transparent));
  border: 1px solid color-mix(in oklab, var(--color-primary) 35%, transparent);
  border-radius: var(--radius-xl);
  flex-wrap: wrap;
}
.lifetime-banner-text strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.1rem;
  margin-bottom: 0.25rem;
}
.lifetime-banner-text p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}
.pricing-fineprint {
  margin-top: clamp(var(--space-5), 3vw, var(--space-7));
  text-align: center;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
.pricing-fineprint a {
  color: var(--color-primary);
}

/* =================================================================
   ===  v=20260505g — LIGHT/DARK CONTRAST PASS                   ===
   ===  Goals:                                                   ===
   ===   1) Darken all "muted/faint" small text in LIGHT mode    ===
   ===   2) Fix waitlist (teal bg) text — was dark-on-dark        ===
   ===   3) Make waitlist-hero variant prominent under hero       ===
   ===   4) Confirm DARK-mode legibility everywhere               ===
   ================================================================= */

/* --- (1) LIGHT MODE: darker muted/faint values for readability --- */
:root,
[data-theme='light'] {
  --color-text-muted: #3e4541;   /* was #69716d — darker, ~7:1 on cream bg */
  --color-text-faint: #5d6562;   /* was #9ca39f — darker for tertiary */
}

/* Belt-and-suspenders: explicitly darken the highest-traffic small-text spots
   in case any styles read the old hex literally or use opacity. */
[data-theme='light'] .hero-text,
[data-theme='light'] .trust-note,
[data-theme='light'] .section-sub,
[data-theme='light'] .feature-grid li,
[data-theme='light'] .feature-categories .feature-grid li,
[data-theme='light'] .feature-count,
[data-theme='light'] .feature-categories .feature-category .feature-count,
[data-theme='light'] .price-note,
[data-theme='light'] .pricing-fineprint,
[data-theme='light'] .testimonials-section .section-sub,
[data-theme='light'] .visit-card .timeline-item p,
[data-theme='light'] .ai-summary p,
[data-theme='light'] .faq details p,
[data-theme='light'] .audience-card p,
[data-theme='light'] .step-card p,
[data-theme='light'] .problem-section li,
[data-theme='light'] .proof-bar .proof-item span {
  color: #2d3431;   /* near-black, body-tone, not pitch black */
}
[data-theme='light'] .feature-grid li strong,
[data-theme='light'] .feature-categories .feature-grid li strong {
  color: var(--color-text);
}

/* --- (2) WAITLIST contrast fix: white text on teal background --- */
.waitlist-section {
  color: #ffffff;
}
.waitlist-copy .eyebrow {
  color: #ffffff;
  opacity: 0.95;
  letter-spacing: 0.18em;
  font-weight: 800;
}
.waitlist-copy h2,
#waitlist-title {
  color: #ffffff;
}
.waitlist-copy p,
.waitlist-copy .waitlist-lead {
  color: #ffffff;
  opacity: 0.96;
}
.waitlist-copy .waitlist-lead strong {
  color: #ffffff;
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,0.55);
  text-underline-offset: 3px;
}
.waitlist-copy .hero-trust li,
.waitlist-copy .waitlist-trust li {
  color: #ffffff;
  opacity: 0.95;
  font-weight: 600;
  text-shadow: none;
}
.waitlist-copy .hero-trust .check,
.waitlist-copy .waitlist-trust .check {
  background: #ffffff;
  color: var(--color-primary);
  font-weight: 800;
}
.waitlist-form label {
  color: #ffffff;
}
.form-row input {
  color: #ffffff;
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.45);
}
.form-row input::placeholder {
  color: rgba(255,255,255,0.72);
}
.form-message {
  color: #ffffff;
  opacity: 0.9;
}

/* --- (3) WAITLIST-HERO: bigger, more prominent, sits right under hero --- */
.waitlist-section.waitlist-hero {
  margin-block: clamp(var(--space-6), 4vw, var(--space-10)) clamp(var(--space-10), 6vw, var(--space-16));
  padding: clamp(var(--space-8), 5vw, var(--space-12)) clamp(var(--space-6), 5vw, var(--space-12));
  border-radius: var(--radius-2xl);
  background:
    radial-gradient(circle at 12% 10%, rgba(255,255,255,0.12), transparent 40%),
    linear-gradient(135deg, var(--color-primary) 0%, #134e51 60%, #0a373a 100%);
  box-shadow: 0 30px 80px rgba(7, 53, 56, 0.28);
  position: relative;
  overflow: hidden;
}
.waitlist-section.waitlist-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 90% 90%, rgba(255,255,255,0.08), transparent 50%);
  pointer-events: none;
}
.waitlist-section.waitlist-hero > * { position: relative; z-index: 1; }
.waitlist-section.waitlist-hero h2,
.waitlist-section.waitlist-hero #waitlist-title {
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin-top: var(--space-3);
}
.waitlist-section.waitlist-hero .waitlist-lead {
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.25rem);
  line-height: 1.55;
  margin-top: var(--space-4);
  max-width: 56ch;
}
.waitlist-section.waitlist-hero .waitlist-stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(var(--space-5), 3vw, var(--space-8));
  margin-top: var(--space-6);
  padding: 0;
  list-style: none;
}
.waitlist-section.waitlist-hero .waitlist-stats li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: #ffffff;
}
.waitlist-section.waitlist-hero .waitlist-stats strong {
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem);
  font-weight: 800;
  line-height: 1;
}
.waitlist-section.waitlist-hero .waitlist-stats span {
  font-size: 0.8rem;
  opacity: 0.85;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.waitlist-section.waitlist-hero .waitlist-form {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.22);
  padding: clamp(var(--space-5), 3vw, var(--space-7));
}

/* --- (4) DARK MODE: ensure ALL text remains visible --- */
[data-theme='dark'] .waitlist-copy .eyebrow,
[data-theme='dark'] .waitlist-copy h2,
[data-theme='dark'] .waitlist-copy p,
[data-theme='dark'] .waitlist-copy .waitlist-lead,
[data-theme='dark'] .waitlist-copy .hero-trust li,
[data-theme='dark'] .waitlist-copy .waitlist-trust li,
[data-theme='dark'] .waitlist-form label,
[data-theme='dark'] .form-message {
  color: #ffffff;
}
/* In dark mode the waitlist primary color is light teal. Make sure
   text on it stays dark (since bg becomes light) — but we keep gradient
   dark, so override gradient to stay deep teal in dark mode too. */
[data-theme='dark'] .waitlist-section,
[data-theme='dark'] .waitlist-section.waitlist-hero {
  background:
    radial-gradient(circle at 12% 10%, rgba(255,255,255,0.10), transparent 40%),
    linear-gradient(135deg, #0f5f62 0%, #0a474a 60%, #053032 100%);
}
[data-theme='dark'] .waitlist-section.waitlist-hero .form-row .button {
  color: #0a474a;
  background: #ffffff;
  border-color: #ffffff;
}

/* Generic dark-mode legibility belt: any place we previously hard-coded
   #0f1d1a (near-black) now needs to follow the inverse palette. */
[data-theme='dark'] .hero-trust li {
  color: var(--color-text);
}

/* Visit-card timeline & AI summary — make sure body text is readable in dark */
[data-theme='dark'] .visit-card .timeline-item p,
[data-theme='dark'] .ai-summary p {
  color: var(--color-text);
  opacity: 0.92;
}
[data-theme='dark'] .visit-card .timeline-item strong,
[data-theme='dark'] .ai-summary span {
  color: var(--color-text);
}

/* Pricing notes & feature lists in dark mode use slightly brighter muted */
[data-theme='dark'] {
  --color-text-muted: #c9d1cd;   /* was #adb8b4 — slightly brighter */
  --color-text-faint: #98a29d;
}

/* Footer / cookie banner consistency in dark mode */
[data-theme='dark'] .cookie-banner-text p {
  color: var(--color-text-muted);
}

/* Ensure proof-bar and feature-count remain legible in both modes */
.proof-bar .proof-item strong { color: var(--color-text); }
.proof-bar .proof-item span   { color: var(--color-text-muted); }

/* Mobile: stack waitlist hero stats vertically tighter */
@media (max-width: 720px) {
  .waitlist-section.waitlist-hero {
    grid-template-columns: 1fr;
  }
  .waitlist-section.waitlist-hero .waitlist-stats {
    gap: var(--space-5);
  }
}

/* =================================================================
   ===  DARK-MODE LEGIBILITY FIXES (audit pass)                  ===
   ================================================================= */

/* Hero "COMING SOON · BETA" pill: was hard-coded near-black on transparent.
   In dark mode this turned invisible. Use the inverse palette so the chip
   reads on both backgrounds. */
[data-theme='dark'] .hero-badge {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--color-text);
}

/* Screenshot cards: were hard-coded white background in BOTH modes,
   which made figcaption strong/p (text-color) invisible in dark mode.
   In dark mode we use a dark surface that complements the page bg. */
[data-theme='dark'] .screenshot-card {
  background: var(--color-surface);
  border-color: var(--color-border);
}
[data-theme='dark'] .screenshot-card img {
  background: #0c1414;                       /* dark behind contained images */
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
[data-theme='dark'] .screenshot-card figcaption strong {
  color: var(--color-text);
}
[data-theme='dark'] .screenshot-card figcaption p {
  color: var(--color-text);
  opacity: 0.85;
}

/* Lightbox image background: keep cream/white in light mode but use a
   slightly off-dark in dark mode so transparent PNGs read cleanly. */
[data-theme='dark'] .lightbox-content img {
  background: #0c1414;
}

/* "Tap any screen to view it larger" hint pill */
[data-theme='dark'] .screenshots-hint {
  color: var(--color-text);
  opacity: 0.85;
}

/* Footer link contrast in dark mode (bright teal looks dim on near-black) */
[data-theme='dark'] .footer-inner a {
  color: var(--color-primary);   /* maps to light teal in dark mode */
}

/* =================================================================
   ===  v=20260505j — FOOTER LAYOUT + GLOBAL TEXT BLACKEN        ===
   ================================================================= */

/* --- HEADER LOGO IMAGE (replaces icon-only SVG) --- */
.brand.brand-image {
  display: inline-flex;
  align-items: center;
  gap: 0;
  text-decoration: none;
}
.brand.brand-image img {
  display: block;
  height: 44px;
  width: auto;
  max-width: none;
}
.site-footer .brand.brand-image img {
  height: 56px;
}
@media (max-width: 720px) {
  .brand.brand-image img { height: 38px; }
  .site-footer .brand.brand-image img { height: 48px; }
}

/* --- FOOTER LAYOUT FIX --- */
/* Old: flex row with space-between crammed everything horizontally.
   New: 2-column grid at desktop (logo+legal | links+copyright),
   single column on mobile, properly spaced. */
.site-footer {
  border-top: 1px solid var(--color-divider);
  padding-block: clamp(var(--space-8), 5vw, var(--space-12));
  margin-top: clamp(var(--space-12), 6vw, var(--space-16));
}
.footer-inner {
  width: min(calc(100% - var(--space-8)), var(--content-wide));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(var(--space-6), 4vw, var(--space-10)) clamp(var(--space-8), 5vw, var(--space-16));
  align-items: start;
  color: var(--color-text);
  font-size: 0.95rem;
  line-height: 1.6;
}
.footer-inner > .brand.brand-image {
  grid-column: 1;
  grid-row: 1;
}
.footer-inner > p:nth-of-type(1) {
  /* Disclaimer paragraph */
  grid-column: 1;
  grid-row: 2;
  max-width: 38ch;
  color: var(--color-text);
  font-size: 0.9rem;
  line-height: 1.55;
  opacity: 0.95;
}
.footer-inner > .footer-meta:nth-of-type(2) {
  /* Privacy / Terms / DMCA / Cookie / Contact links */
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  align-items: center;
}
.footer-inner > .footer-meta:nth-of-type(2)::before { content: none; }
.footer-inner > .footer-meta:nth-of-type(2) a {
  color: var(--color-text);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: border-color 160ms ease, color 160ms ease;
}
.footer-inner > .footer-meta:nth-of-type(2) a:hover {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}
.footer-inner > .footer-meta:nth-of-type(3) {
  /* © 2026 Miami App Studio · Miami, FL */
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-text);
  opacity: 0.78;
}
.footer-inner > .footer-meta.built-by {
  /* Built by Miami App Studio … */
  grid-column: 1 / -1;
  grid-row: 3;
  margin-top: var(--space-4);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-divider);
  font-size: 0.85rem;
  color: var(--color-text);
  opacity: 0.75;
  text-align: center;
}
.footer-inner a {
  color: var(--color-primary);
  font-weight: 700;
}
@media (max-width: 760px) {
  .footer-inner {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .footer-inner > .brand.brand-image,
  .footer-inner > p:nth-of-type(1),
  .footer-inner > .footer-meta:nth-of-type(2),
  .footer-inner > .footer-meta:nth-of-type(3),
  .footer-inner > .footer-meta.built-by {
    grid-column: 1;
  }
  .footer-inner > .brand.brand-image       { grid-row: 1; }
  .footer-inner > p:nth-of-type(1)         { grid-row: 2; max-width: none; }
  .footer-inner > .footer-meta:nth-of-type(2) { grid-row: 3; }
  .footer-inner > .footer-meta:nth-of-type(3) { grid-row: 4; }
  .footer-inner > .footer-meta.built-by    { grid-row: 5; text-align: left; }
}

/* --- DARK MODE FOOTER --- */
[data-theme='dark'] .footer-inner,
[data-theme='dark'] .footer-inner > p:nth-of-type(1),
[data-theme='dark'] .footer-inner > .footer-meta:nth-of-type(3),
[data-theme='dark'] .footer-inner > .footer-meta.built-by {
  color: var(--color-text);
}
[data-theme='dark'] .footer-inner > .footer-meta:nth-of-type(2) a {
  color: var(--color-text);
}
[data-theme='dark'] .footer-inner > .footer-meta:nth-of-type(2) a:hover {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* =================================================================
   ===  GLOBAL: ALL SMALL TEXT IS NOW NEAR-BLACK IN LIGHT MODE   ===
   ===  User asked to make ALL small text DARKER black            ===
   ================================================================= */
[data-theme='light'] {
  --color-text-muted: #1a1f1c;   /* near-black */
  --color-text-faint: #2a302d;
}

/* Force any element using these tokens to be near-black */
[data-theme='light'] .hero-text,
[data-theme='light'] .trust-note,
[data-theme='light'] .section-sub,
[data-theme='light'] .feature-grid li,
[data-theme='light'] .feature-grid li strong,
[data-theme='light'] .feature-categories .feature-grid li,
[data-theme='light'] .feature-categories .feature-grid li strong,
[data-theme='light'] .feature-count,
[data-theme='light'] .feature-categories .feature-category .feature-count,
[data-theme='light'] .price-note,
[data-theme='light'] .pricing-fineprint,
[data-theme='light'] .testimonials-section .section-sub,
[data-theme='light'] .testimonial-card figcaption,
[data-theme='light'] .testimonial-card figcaption span,
[data-theme='light'] .visit-card .timeline-item p,
[data-theme='light'] .ai-summary p,
[data-theme='light'] .faq details p,
[data-theme='light'] .audience-card p,
[data-theme='light'] .step-card p,
[data-theme='light'] .problem-section li,
[data-theme='light'] .proof-bar .proof-item span,
[data-theme='light'] .ai-trust-section .section-sub,
[data-theme='light'] .ai-trust-section .ai-cap-card p,
[data-theme='light'] .ai-trust-section .ai-cap-card,
[data-theme='light'] .ai-trust-section li,
[data-theme='light'] .ai-trust-section span,
[data-theme='light'] .screenshot-card figcaption p,
[data-theme='light'] .screenshots-hint,
[data-theme='light'] .form-message,
[data-theme='light'] .footer-inner,
[data-theme='light'] .footer-inner p,
[data-theme='light'] .footer-inner .footer-meta {
  color: #1a1f1c !important;     /* near-black, ~14:1 on cream bg */
}
/* Keep strong/bold even darker */
[data-theme='light'] .feature-grid li strong,
[data-theme='light'] .feature-categories .feature-grid li strong,
[data-theme='light'] .testimonial-card figcaption strong,
[data-theme='light'] .audience-card strong,
[data-theme='light'] .step-card strong {
  color: #0a0d0c !important;
}
/* Eyebrows and section headers stay primary teal — they're not small text */
[data-theme='light'] .eyebrow,
[data-theme='light'] .ai-trust-section .eyebrow,
[data-theme='light'] .feature-categories .feature-category-header h3 {
  /* leave as-is */
}

/* === v=20260505k — FOOTER LINK LIST + THEME TOGGLE TOOLTIP === */

/* Footer links presented as a clean horizontal list with comfortable spacing */
.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  grid-area: links;          /* slot into existing footer grid */
  align-self: start;
  justify-content: flex-end;
}
.footer-links li {
  margin: 0;
  padding: 0;
}
.footer-links a,
.footer-links .footer-link-btn {
  display: inline-block;
  font-size: 0.92rem;
  line-height: 1.4;
  text-decoration: none;
  padding: 4px 0;
  border: 0;
  border-bottom: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.footer-links a:hover,
.footer-links a:focus-visible,
.footer-links .footer-link-btn:hover,
.footer-links .footer-link-btn:focus-visible {
  border-bottom-color: currentColor;
}
[data-theme='light'] .footer-links a,
[data-theme='light'] .footer-links .footer-link-btn { color: #0a0d0c !important; }
[data-theme='dark']  .footer-links a,
[data-theme='dark']  .footer-links .footer-link-btn { color: rgba(255,255,255,0.92) !important; }

/* Small-screen: stack links left-aligned */
@media (max-width: 760px) {
  .footer-links {
    justify-content: flex-start;
    gap: 6px 18px;
  }
  .footer-links a { font-size: 0.88rem; }
}

/* Theme toggle: show a tiny tip label next to the moon/sun icon */
.theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.theme-toggle {
  position: relative;
}
/* Tooltip-on-hover (no overlap with adjacent button) */
.theme-toggle::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: rgba(15, 30, 28, 0.92);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease;
  z-index: 50;
}
.theme-toggle:hover::after,
.theme-toggle:focus-visible::after {
  opacity: 1;
}
[data-theme='dark'] .theme-toggle::after {
  content: attr(data-tip-dark);
  background: rgba(255,255,255,0.94);
  color: #0f1d1a;
}
@media (max-width: 720px) {
  .theme-toggle::after { display: none; }
}

/* === v=20260505z7 — FOOTER SYMMETRIC: equal 2-column grid, full-width divider === */
.footer-inner {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-template-areas:
    "brand    links"
    "discl    copy"
    "divider  divider"
    "builtby  builtby" !important;
  column-gap: clamp(var(--space-8), 5vw, var(--space-16)) !important;
  row-gap: var(--space-6) !important;
  align-items: start !important;
  width: min(calc(100% - var(--space-8)), var(--content-wide)) !important;
  margin: 0 auto !important;
}

/* LEFT column — brand + disclaimer */
.footer-inner > .brand.brand-image {
  grid-area: brand !important;
  grid-column: auto !important;
  grid-row: auto !important;
  justify-self: start !important;
  align-self: center !important;
}
.footer-inner > p:nth-of-type(1) {
  grid-area: discl !important;
  grid-column: auto !important;
  grid-row: auto !important;
  max-width: 100% !important;
  font-size: 0.9rem !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  text-align: left !important;
}

/* RIGHT column — links + copyright */
.footer-inner > .footer-links {
  grid-area: links !important;
  justify-content: flex-end !important;
  align-self: center !important;
  gap: 8px 18px !important;
  flex-wrap: wrap !important;
  text-align: right !important;
}
.footer-inner > .footer-links a {
  font-size: 0.9rem !important;
  white-space: nowrap !important;
}
.footer-inner > .footer-meta:not(.built-by) {
  grid-area: copy !important;
  grid-column: auto !important;
  grid-row: auto !important;
  justify-self: end !important;
  align-self: start !important;
  text-align: right !important;
  margin: 0 !important;
  font-size: 0.85rem !important;
}

/* Full-width divider line */
.footer-inner::after {
  content: "" !important;
  grid-area: divider !important;
  grid-column: 1 / -1 !important;
  display: block !important;
  width: 100% !important;
  height: 1px !important;
  background: var(--color-divider) !important;
  margin-top: var(--space-4) !important;
}

/* Built-by row — full width, centered */
.footer-inner > .footer-meta.built-by {
  grid-area: builtby !important;
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  text-align: center !important;
  font-size: 0.85rem !important;
}

/* Mobile: stack everything left-aligned */
@media (max-width: 760px) {
  .footer-inner {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "brand"
      "discl"
      "links"
      "copy"
      "divider"
      "builtby" !important;
    text-align: left !important;
  }
  .footer-inner > .footer-links {
    justify-content: flex-start !important;
    text-align: left !important;
  }
  .footer-inner > .footer-meta:not(.built-by) {
    justify-self: start !important;
    text-align: left !important;
  }
}

/* === v=20260505m — HERO single column (Visit Prep card moved below) + SHOWCASE section === */

/* Hero is now copy-only; let it center and breathe instead of forcing 2-col grid */
.hero {
  grid-template-columns: 1fr !important;
  min-height: auto !important;
  padding: clamp(1.25rem, 3vw, 2.25rem) 0 var(--space-8) !important;
}
.hero .hero-copy {
  max-width: 980px;
  margin: 0 auto;
  text-align: left;
}
.hero h1 {
  max-width: 18ch;
}

/* Visit Prep showcase: 2-col on desktop (copy left, card right), stacks on mobile */
.visit-prep-showcase {
  width: min(calc(100% - var(--space-8)), var(--content-wide));
  margin: 0 auto;
  padding: clamp(1.75rem, 3.5vw, 3rem) 0;
}
.visit-prep-showcase .visit-prep-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr);
  gap: clamp(var(--space-8), 5vw, var(--space-16));
  align-items: center;
}
.visit-prep-showcase .visit-prep-copy h2 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0.4rem 0 1rem;
  max-width: 22ch;
}
.visit-prep-showcase .visit-prep-copy .section-sub {
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 52ch;
}
.visit-prep-showcase .visit-card-showcase {
  /* Reuse existing .visit-card styling, just ensure proper sizing in this slot */
  margin: 0;
  width: 100%;
}
.visit-prep-showcase .visit-card-showcase h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  letter-spacing: -0.01em;
  margin: 0.1rem 0 0;
}

@media (max-width: 880px) {
  .visit-prep-showcase .visit-prep-inner {
    grid-template-columns: 1fr;
  }
  .visit-prep-showcase .visit-prep-copy { text-align: left; }
}

/* === v=20260505z7 — FOOTER WITHOUT LOGO + VISIT PREP STACKED VERTICALLY === */

/* No-logo footer: cleaner 3-row symmetric layout
   Row 1: links (left) | copyright (right)  — symmetric anchor points
   Row 2: full-width disclaimer (centered, max-width readable)
   Row 3: full-width divider
   Row 4: full-width built-by (centered) */
.footer-inner.footer-inner--no-logo {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-template-areas:
    "links    copy"
    "discl    discl"
    "divider  divider"
    "builtby  builtby" !important;
  column-gap: clamp(var(--space-8), 5vw, var(--space-16)) !important;
  row-gap: var(--space-6) !important;
  align-items: center !important;
  width: min(calc(100% - var(--space-8)), var(--content-wide)) !important;
  margin: 0 auto !important;
  text-align: left !important;
}

.footer-inner.footer-inner--no-logo > .footer-links {
  grid-area: links !important;
  justify-content: flex-start !important;
  align-self: center !important;
  gap: 8px 18px !important;
  flex-wrap: wrap !important;
  text-align: left !important;
  margin: 0 !important;
  padding: 0 !important;
}
.footer-inner.footer-inner--no-logo > .footer-links a {
  font-size: 0.92rem !important;
  white-space: nowrap !important;
}

.footer-inner.footer-inner--no-logo > .footer-meta:not(.built-by) {
  grid-area: copy !important;
  justify-self: end !important;
  align-self: center !important;
  text-align: right !important;
  margin: 0 !important;
  font-size: 0.88rem !important;
}

.footer-inner.footer-inner--no-logo > .footer-disclaimer {
  grid-area: discl !important;
  grid-column: 1 / -1 !important;
  max-width: 78ch !important;
  margin: 0 auto !important;
  font-size: 0.88rem !important;
  line-height: 1.6 !important;
  text-align: center !important;
  opacity: 0.92;
}

.footer-inner.footer-inner--no-logo::after {
  content: "" !important;
  grid-area: divider !important;
  grid-column: 1 / -1 !important;
  display: block !important;
  width: 100% !important;
  height: 1px !important;
  background: var(--color-divider) !important;
  margin: 0 !important;
}

.footer-inner.footer-inner--no-logo > .footer-meta.built-by {
  grid-area: builtby !important;
  grid-column: 1 / -1 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  font-size: 0.88rem !important;
}

@media (max-width: 760px) {
  .footer-inner.footer-inner--no-logo {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "links"
      "copy"
      "discl"
      "divider"
      "builtby" !important;
    text-align: center !important;
  }
  .footer-inner.footer-inner--no-logo > .footer-links {
    justify-content: center !important;
    text-align: center !important;
  }
  .footer-inner.footer-inner--no-logo > .footer-meta:not(.built-by) {
    justify-self: center !important;
    text-align: center !important;
  }
  .footer-inner.footer-inner--no-logo > .footer-disclaimer {
    text-align: center !important;
  }
}

/* Visit Prep — STACK VERTICALLY (heading on top, card centered below) */
.visit-prep-showcase .visit-prep-inner {
  grid-template-columns: 1fr !important;
  gap: clamp(var(--space-8), 4vw, var(--space-12)) !important;
  align-items: center !important;
  text-align: center !important;
}
.visit-prep-showcase .visit-prep-copy {
  text-align: center !important;
  max-width: 820px;
  margin: 0 auto;
}
.visit-prep-showcase .visit-prep-copy h2 {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 22ch;
}
.visit-prep-showcase .visit-prep-copy .section-sub {
  margin-left: auto !important;
  margin-right: auto !important;
}
.visit-prep-showcase .visit-card-showcase {
  max-width: 720px !important;
  margin: 0 auto !important;
}

/* === v=20260505z7 — CONTACT US section === */
.contact-section {
  width: min(calc(100% - var(--space-8)), var(--content-wide));
  margin: clamp(var(--space-12), 6vw, var(--space-20)) auto;
  padding: clamp(var(--space-10), 5vw, var(--space-16));
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-3xl, 28px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 8px 32px -16px rgba(0,0,0,0.08);
}
.contact-inner {
  display: grid;
  gap: clamp(var(--space-8), 4vw, var(--space-12));
  max-width: 760px;
  margin: 0 auto;
}
.contact-head { text-align: center; }
.contact-head .eyebrow { margin-bottom: 12px; }
.contact-head h2 {
  margin: 0 auto 14px;
  max-width: 28ch;
  line-height: 1.18;
}
.contact-head .section-sub {
  margin: 0 auto;
  max-width: 60ch;
  font-size: 1rem;
  line-height: 1.6;
}

.contact-form {
  display: grid;
  gap: var(--space-5);
}
.contact-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}
@media (max-width: 640px) {
  .contact-row { grid-template-columns: 1fr; }
}

.contact-field {
  display: grid;
  gap: 6px;
  text-align: left;
}
.contact-field > span {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: 0.01em;
}
.contact-field input,
.contact-field select,
.contact-field textarea {
  width: 100%;
  padding: 12px 14px;
  font-size: 1rem;
  font-family: inherit;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1.5px solid var(--color-divider);
  border-radius: 12px;
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
  -webkit-appearance: none;
  appearance: none;
}
.contact-field textarea {
  resize: vertical;
  min-height: 120px;
  font-family: inherit;
  line-height: 1.5;
}
.contact-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23556' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  padding-right: 40px;
}
.contact-field input::placeholder,
.contact-field textarea::placeholder { color: var(--color-text-muted, #8a8f9c); }
.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 18%, transparent);
}

.contact-submit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  text-align: center;
}
.contact-submit .button {
  min-width: 200px;
  justify-content: center;
}
.contact-note {
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-text-muted, #6b7280);
  max-width: 52ch;
}

/* Dark mode tweaks */
[data-theme="dark"] .contact-section {
  background: var(--color-surface);
  border-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .contact-field input,
[data-theme="dark"] .contact-field select,
[data-theme="dark"] .contact-field textarea {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.12);
  color: var(--color-text);
}

/* === v=20260505z7 — VISIT PREP REDESIGN: tight 2-col, real chat bubbles === */

/* Tighten the section: reduce vertical padding, set a sane max width */
.visit-prep-showcase {
  width: min(calc(100% - var(--space-8)), var(--content-wide));
  margin: clamp(var(--space-8), 4vw, var(--space-12)) auto !important;
  padding: clamp(var(--space-8), 3vw, var(--space-10)) clamp(var(--space-6), 3vw, var(--space-10)) !important;
}

/* OVERRIDE the earlier vertical-stack rule and go back to 2 columns */
.visit-prep-showcase .visit-prep-inner {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 1.05fr) !important;
  gap: clamp(var(--space-8), 3vw, var(--space-12)) !important;
  align-items: center !important;
  text-align: left !important;
}
.visit-prep-showcase .visit-prep-copy {
  text-align: left !important;
  max-width: none !important;
  margin: 0 !important;
}
.visit-prep-showcase .visit-prep-copy h2 {
  margin: 6px 0 14px !important;
  max-width: 18ch !important;
  font-size: clamp(1.85rem, 3.2vw, 2.6rem) !important;
  line-height: 1.1 !important;
}
.visit-prep-showcase .visit-prep-copy .section-sub {
  margin: 0 0 18px !important;
  max-width: 56ch !important;
  font-size: 1rem !important;
  line-height: 1.55 !important;
}

/* Numbered bullets inside the copy */
.visit-prep-bullets {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: grid;
  gap: 10px;
}
.visit-prep-bullets li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  align-items: start;
  font-size: 0.95rem;
  line-height: 1.5;
}
.visit-prep-bullets .vp-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
  font-size: 0.82rem;
}
.visit-prep-bullets li strong { display: block; margin-bottom: 1px; }

/* Stack on mobile */
@media (max-width: 860px) {
  .visit-prep-showcase .visit-prep-inner {
    grid-template-columns: 1fr !important;
    text-align: center !important;
  }
  .visit-prep-showcase .visit-prep-copy { text-align: center !important; }
  .visit-prep-showcase .visit-prep-copy h2 { margin-left:auto !important; margin-right:auto !important; }
  .visit-prep-showcase .visit-prep-copy .section-sub { margin-left:auto !important; margin-right:auto !important; }
  .visit-prep-bullets li { text-align: left; }
  .visit-prep-bullets { max-width: 480px; margin-left:auto; margin-right:auto; }
}

/* CHAT CARD — kill the centered text, use real left/right bubbles */
.visit-card-chat {
  max-width: 100% !important;
  margin: 0 !important;
  padding: 18px !important;
}
.visit-card-chat .visit-card-header {
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--color-divider);
}

.visit-card-chat .chat-thread {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 0;
}
.visit-card-chat .chat-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  max-width: 92%;
}
.visit-card-chat .chat-row.chat-ai {
  align-self: flex-start;
}
.visit-card-chat .chat-row.chat-you {
  align-self: flex-end;
  flex-direction: row-reverse;
}
.visit-card-chat .chat-avatar {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.02em;
}
.visit-card-chat .chat-bubble {
  padding: 9px 13px;
  border-radius: 14px;
  font-size: 0.94rem;
  line-height: 1.4;
  background: #f1f3f5;
  color: var(--color-text);
  border: 1px solid var(--color-divider);
  max-width: 380px;
}
.visit-card-chat .chat-row.chat-ai .chat-bubble {
  border-bottom-left-radius: 4px;
}
.visit-card-chat .chat-row.chat-you .chat-bubble {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
  border-bottom-right-radius: 4px;
}
[data-theme="dark"] .visit-card-chat .chat-bubble {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.1);
}
[data-theme="dark"] .visit-card-chat .chat-row.chat-you .chat-bubble {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

/* Tighter AI summary block at the bottom of card */
.visit-card-chat .ai-summary-tight {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--color-primary);
  color: #fff;
}
.visit-card-chat .ai-summary-label {
  display: block;
  font-weight: 700;
  font-size: 0.92rem;
  margin-bottom: 8px;
}
.visit-card-chat .ai-summary-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 6px;
  font-size: 0.88rem;
  line-height: 1.45;
  opacity: 0.96;
}
.visit-card-chat .ai-summary-list li::before {
  content: "→ ";
  opacity: 0.85;
  margin-right: 4px;
}

/* === v=20260505z7 — FIX: kill legacy .ai-summary flex when used in chat card; force bullet numbers visible === */

/* Fully override the legacy .ai-summary inside the new chat card */
.visit-card-chat .ai-summary,
.visit-card-chat .ai-summary.ai-summary-tight {
  display: block !important;
  margin-top: 14px !important;
  padding: 14px 16px !important;
  border-radius: 14px !important;
  background: var(--color-primary) !important;
  color: #fff !important;
  text-align: left !important;
}
.visit-card-chat .ai-summary-label {
  display: block !important;
  font-weight: 700 !important;
  font-size: 0.92rem !important;
  margin-bottom: 8px !important;
  color: #fff !important;
  text-align: left !important;
}
.visit-card-chat .ai-summary-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: grid !important;
  gap: 6px !important;
  font-size: 0.88rem !important;
  line-height: 1.45 !important;
  color: #fff !important;
  text-align: left !important;
  max-width: none !important;
}
.visit-card-chat .ai-summary-list li {
  color: #fff !important;
  max-width: none !important;
}
.visit-card-chat .ai-summary-list li::before {
  content: "→ " !important;
  margin-right: 4px !important;
  opacity: 0.9 !important;
}

/* Make sure the accent-circle numbered bullets are clearly visible */
.visit-prep-bullets .vp-num {
  background: var(--color-primary) !important;
  color: #fff !important;
  opacity: 1 !important;
  flex-shrink: 0;
}

/* === v=20260505z7 — WAITLIST BOTTOM: centered layout, white form text === */
.waitlist-section.waitlist-bottom {
  display: block !important;
  grid-template-columns: 1fr !important;
  text-align: center !important;
  padding: clamp(var(--space-10), 5vw, var(--space-16)) clamp(var(--space-6), 4vw, var(--space-12)) !important;
}
.waitlist-section.waitlist-bottom .waitlist-copy-centered {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.waitlist-section.waitlist-bottom .waitlist-copy-centered .eyebrow,
.waitlist-section.waitlist-bottom .waitlist-copy-centered h2,
.waitlist-section.waitlist-bottom .waitlist-copy-centered .waitlist-lead {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.waitlist-section.waitlist-bottom .waitlist-copy-centered h2 {
  max-width: 22ch;
}
.waitlist-section.waitlist-bottom .waitlist-copy-centered .waitlist-lead {
  max-width: 60ch;
}
.waitlist-section.waitlist-bottom .waitlist-trust {
  justify-content: center !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px 22px !important;
  margin: 18px auto 14px !important;
  padding: 0 !important;
  list-style: none !important;
}
.waitlist-section.waitlist-bottom .waitlist-stats {
  justify-content: center !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 28px !important;
  margin: 8px auto 24px !important;
  padding: 0 !important;
  list-style: none !important;
}

/* Centered form */
.waitlist-section.waitlist-bottom .waitlist-form-centered {
  max-width: 560px !important;
  margin: 0 auto !important;
  text-align: center !important;
}
.waitlist-section.waitlist-bottom .waitlist-form-centered label[for="email"] {
  display: block !important;
  text-align: center !important;
  width: 100% !important;
  color: #fff !important;
  font-weight: 600 !important;
  margin-bottom: 8px !important;
}
.waitlist-section.waitlist-bottom .waitlist-form-centered .form-row {
  justify-content: center !important;
}
.waitlist-section.waitlist-bottom .waitlist-form-centered .form-message {
  text-align: center !important;
  color: #fff !important;
  opacity: 0.95 !important;
  font-weight: 500 !important;
  font-size: 0.92rem !important;
  margin-top: 12px !important;
}

/* === v=20260505z7 — CONTACT US (3-card layout, last section) === */
.contact-cards-section {
  width: min(calc(100% - var(--space-8)), var(--content-wide));
  margin: clamp(var(--space-10), 5vw, var(--space-16)) auto clamp(var(--space-12), 6vw, var(--space-20));
}
.contact-cards-card {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: 28px;
  padding: clamp(var(--space-10), 5vw, var(--space-16)) clamp(var(--space-6), 4vw, var(--space-12));
  text-align: center;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 8px 32px -16px rgba(0,0,0,0.08);
}
.contact-pill {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--color-primary-highlight);
  color: var(--color-primary);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin-bottom: 18px;
}
.contact-cards-card h2 {
  margin: 0 auto 14px;
  max-width: 22ch;
  line-height: 1.15;
}
.contact-cards-sub {
  max-width: 56ch;
  margin: 0 auto clamp(var(--space-8), 3vw, var(--space-10));
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text);
  opacity: 0.85;
}

.contact-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 980px;
  margin: 0 auto;
}
@media (max-width: 860px) {
  .contact-cards-grid { grid-template-columns: 1fr; }
}

.contact-card-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: var(--color-bg);
  border: 1.5px solid var(--color-divider);
  border-radius: 16px;
  text-decoration: none;
  color: var(--color-text);
  text-align: left;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.contact-card-item:hover {
  transform: translateY(-2px);
  border-color: var(--color-primary);
  box-shadow: 0 12px 24px -16px rgba(15, 95, 98, 0.4);
}
.contact-card-icon {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--color-primary-highlight);
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.contact-card-icon svg { width: 22px; height: 22px; }
.contact-card-item strong {
  display: block;
  font-size: 1rem;
  margin-bottom: 2px;
  color: var(--color-text);
}
.contact-card-item p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--color-text);
  opacity: 0.75;
  line-height: 1.4;
}

[data-theme="dark"] .contact-cards-card {
  background: var(--color-surface);
  border-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .contact-card-item {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.1);
}

/* v=20260505z7 — center billing toggle */
.billing-toggle {
  display: flex !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: max-content !important;
  justify-content: center !important;
}

/* v=20260505z7 — center hero copy */
.hero .hero-copy {
  text-align: center !important;
}
.hero .hero-copy .hero-features,
.hero .hero-copy .hero-actions {
  justify-content: center !important;
  align-items: center !important;
}
.hero .hero-copy .hero-features {
  display: flex !important;
  flex-wrap: wrap !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.hero h1,
.hero .hero-text {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* v=20260505z7 — knowledgeable doctor-ready brief styles */
.visit-card-chat .ai-brief-intro {
  color: #fff !important;
  font-size: 0.92rem !important;
  line-height: 1.5 !important;
  margin: 0 0 12px 0 !important;
  opacity: 0.96 !important;
}
.visit-card-chat .ai-brief-intro strong {
  color: #fff !important;
  font-weight: 700 !important;
}
.visit-card-chat .ai-brief-section {
  display: block !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 0.84rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  margin: 12px 0 6px 0 !important;
  opacity: 0.95 !important;
}
.visit-card-chat .ai-summary-list-warn li::before {
  content: "⚠ " !important;
  margin-right: 4px !important;
  opacity: 1 !important;
}
.visit-card-chat .ai-summary-list-warn li {
  color: #fff !important;
  font-weight: 500 !important;
}
/* Make the chat card scroll if it gets tall on smaller heights */
.visit-card-chat {
  max-height: none !important;
}

/* v=20260505z72 — let the chat card grow as tall as needed; align grid to start so columns can differ in height */
.visit-prep-showcase .visit-prep-inner {
  align-items: start !important;
}
.visit-card-chat,
.visit-card-chat .chat-thread,
.visit-card-chat .ai-summary,
.visit-card-chat .ai-summary-tight {
  max-height: none !important;
  overflow: visible !important;
}
.visit-card-chat .chat-thread {
  max-height: none !important;
  overflow-y: visible !important;
}
.visit-card-chat .chat-bubble {
  white-space: normal !important;
  word-break: break-word !important;
}

/* v=20260505z7 — Visit Prep is now single-column centered (chat card removed) */
.visit-prep-showcase .visit-prep-inner {
  display: block !important;
  grid-template-columns: 1fr !important;
  max-width: 880px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.visit-prep-showcase .visit-prep-copy {
  text-align: center !important;
  max-width: 820px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.visit-prep-showcase .visit-prep-copy h2,
.visit-prep-showcase .visit-prep-copy .section-sub,
.visit-prep-showcase .visit-prep-copy .eyebrow {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}
.visit-prep-showcase .visit-prep-bullets {
  list-style: none !important;
  padding: 0 !important;
  margin: clamp(1.25rem, 2.5vw, 2rem) auto 0 !important;
  max-width: 720px !important;
  text-align: left !important;
  display: grid !important;
  gap: 14px !important;
}
.visit-prep-showcase .visit-prep-bullets li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
}

/* v=20260505z7 — center hero trust checks + trust note */
.hero .hero-copy .hero-trust {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 !important;
  list-style: none !important;
}
.hero .hero-copy .trust-note {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ============================================================
   v=20260505z7 — GLOBAL DENSITY PASS
   Tighten section padding, headings margins, and grid gaps
   without breaking layout. Applied last so it overrides all.
   ============================================================ */

/* Tighten section vertical padding */
section,
.hero,
.visit-prep-showcase,
.proof-bar,
.problem-section,
.how-it-works,
.app-preview,
.features,
.ai-trust,
.testimonials,
.audience-section,
.pricing,
.faq,
.waitlist-section,
.contact-cards-section,
#visit-prep-showcase,
#how-it-works,
#app-preview,
#features,
#ai,
#pricing,
#faq,
#waitlist,
#contact {
  padding-top: clamp(2.25rem, 4vw, 3.5rem) !important;
  padding-bottom: clamp(2.25rem, 4vw, 3.5rem) !important;
}

/* Hero a touch tighter top/bottom */
.hero {
  padding-top: clamp(2rem, 4vw, 3rem) !important;
  padding-bottom: clamp(1.75rem, 3vw, 2.5rem) !important;
  min-height: auto !important;
}

/* Tighten margins between section heading + body */
.section-heading,
.section-kicker {
  margin-bottom: clamp(1rem, 1.6vw, 1.5rem) !important;
}
.section-sub {
  margin-top: 0.5rem !important;
}

/* Tighten H1/H2/H3 spacing */
h1, h2, h3 {
  margin-top: 0 !important;
}
.hero h1 {
  margin-bottom: 0.75rem !important;
}
h2 {
  margin-bottom: 0.5rem !important;
}

/* Tighter paragraph spacing */
p {
  margin-top: 0;
}

/* Tighten common card grids */
.features-grid,
.app-preview-grid,
.audience-section,
.testimonial-grid,
.pricing-grid,
.faq-grid,
.contact-cards-grid,
.proof-bar {
  gap: clamp(0.85rem, 1.5vw, 1.25rem) !important;
}

/* Tighten hero internals */
.hero .hero-copy {
  gap: 0.75rem !important;
}
.hero-features,
.hero-actions,
.hero-trust {
  margin-top: 0.85rem !important;
  margin-bottom: 0.5rem !important;
}
.hero .trust-note {
  margin-top: 0.4rem !important;
}

/* Tighten Visit Prep bullets */
.visit-prep-bullets {
  margin-top: 1.1rem !important;
  gap: 10px !important;
}

/* Tighten footer */
.site-footer,
footer {
  padding-top: clamp(1.5rem, 3vw, 2.25rem) !important;
  padding-bottom: clamp(1rem, 2vw, 1.5rem) !important;
}

/* Tighten proof bar */
.proof-bar {
  padding-top: clamp(1.25rem, 2vw, 1.75rem) !important;
  padding-bottom: clamp(1.25rem, 2vw, 1.75rem) !important;
}

/* Tighten pricing toggle margin */
.billing-toggle {
  margin-top: 0.75rem !important;
  margin-bottom: 1rem !important;
}

/* Reduce huge horizontal containers extra padding inside cards */
.feature-panel,
.pricing-card,
.testimonial-card,
.faq-card,
.audience-card,
.contact-card,
.visit-card {
  padding: clamp(1rem, 1.6vw, 1.5rem) !important;
}

/* v=20260505z7 — center footer disclaimer + built-by line */
.site-footer .footer-disclaimer,
.site-footer .footer-meta,
.site-footer .built-by,
footer .footer-disclaimer,
footer .footer-meta,
footer .built-by {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ============================================================
   VISUAL REFRESH v2 — Density + Polish (May 2026)
   ============================================================ */

/* Section background rhythm — alternating cream/sand */
.steps-section,
.features-section,
.faq-section {
  background: linear-gradient(180deg, rgba(15,95,98,0.025) 0%, rgba(15,95,98,0.0) 100%);
  border-radius: 14px;
}
.visit-prep-showcase,
.ai-trust-section,
.pricing-section {
  background: #fffdf8;
  border-radius: 14px;
  box-shadow: 0 1px 0 rgba(15,95,98,0.06);
}
[data-theme="dark"] .steps-section,
[data-theme="dark"] .features-section,
[data-theme="dark"] .faq-section,
[data-theme="dark"] .visit-prep-showcase,
[data-theme="dark"] .ai-trust-section,
[data-theme="dark"] .pricing-section {
  background: rgba(255,255,255,0.02);
  box-shadow: none;
}

/* Sharper, more confident H2s */
.section-heading h2,
h2[id$="-title"] {
  letter-spacing: -0.015em;
  line-height: 1.12;
}

/* Eyebrow refinement */
.eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  font-weight: 700;
  color: #0f5f62;
}
[data-theme="dark"] .eyebrow { color: #5fb8bc; }

/* Step cards — denser + warmer lift */
.steps-grid { gap: 0.85rem !important; }
.step-card {
  padding: 1rem 1.1rem !important;
  border-radius: 12px !important;
  background: #fffdf8;
  border: 1px solid rgba(15,95,98,0.12);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.step-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15,95,98,0.10);
  border-color: rgba(15,95,98,0.25);
}
.step-card .step-number {
  background: linear-gradient(135deg, #0f5f62, #1a8a8e);
  color: #fffdf8;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  display: inline-block;
}
.step-card h3 { font-size: 1.02rem; margin: 0.5rem 0 0.3rem; }
.step-card p { font-size: 0.93rem; line-height: 1.45; margin: 0; }
[data-theme="dark"] .step-card {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.10);
}

/* Visit Prep showcase tightening */
.visit-prep-inner { gap: 1.25rem !important; padding: 0.5rem 0 !important; }
.visit-prep-copy .section-sub { font-size: 1rem; line-height: 1.55; }
.visit-prep-bullets { gap: 0.6rem !important; margin-top: 0.85rem !important; }
.visit-prep-bullets li { padding: 0.5rem 0 !important; }
.vp-num {
  background: linear-gradient(135deg, #e09471, #c66a3e);
  color: #fffdf8;
  border-radius: 50%;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.9rem;
  flex-shrink: 0;
}

/* Hero polish */
.hero {
  padding-block: clamp(1.5rem, 3vw, 2.5rem) !important;
}
.hero-copy { max-width: 760px; margin: 0 auto; text-align: center; }
.hero h1 {
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.hero-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.6rem !important;
  margin: 0.9rem 0 1.1rem !important;
  text-align: left;
}
.hero-features li {
  padding: 0.65rem 0.85rem !important;
  background: rgba(15,95,98,0.04);
  border-left: 3px solid #0f5f62;
  border-radius: 8px;
  font-size: 0.92rem;
  line-height: 1.4;
  display: flex; gap: 0.55rem; align-items: flex-start;
}
[data-theme="dark"] .hero-features li {
  background: rgba(95,184,188,0.08);
  border-left-color: #5fb8bc;
}
.hero-features .feat-icon {
  font-size: 1.05rem;
  flex-shrink: 0;
}
.hero-actions { justify-content: center; }
.hero-trust { justify-content: center; }

/* App preview grid — 2x2 on mobile and tablet, denser */
.screenshots-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 0.85rem !important;
}
@media (min-width: 900px) {
  .screenshots-grid { grid-template-columns: repeat(4, 1fr) !important; }
}
.screenshot-card {
  margin: 0 !important;
  border-radius: 12px;
  overflow: hidden;
  background: #fffdf8;
  border: 1px solid rgba(15,95,98,0.10);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.screenshot-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(15,95,98,0.14);
}
.screenshot-card .screenshot-trigger { padding: 0.5rem !important; }
.screenshot-card figcaption {
  padding: 0.5rem 0.75rem 0.85rem !important;
  font-size: 0.88rem;
}
.screenshot-card figcaption strong { font-size: 0.95rem; }

/* AI capabilities — denser grid */
.ai-capabilities {
  gap: 0.7rem !important;
}
@media (min-width: 921px) {
  .ai-capabilities { grid-template-columns: repeat(12, 1fr) !important; }
}
@media (max-width: 920px) and (min-width: 541px) {
  .ai-capabilities { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 540px) {
  .ai-capabilities { grid-template-columns: 1fr !important; }
}
.ai-cap-card {
  padding: 0.85rem !important;
  border-radius: 10px;
  background: rgba(15,95,98,0.04);
  border: 1px solid rgba(15,95,98,0.10);
  transition: background 0.15s ease, transform 0.15s ease;
}
.ai-cap-card:hover {
  background: rgba(15,95,98,0.07);
  transform: translateY(-1px);
}
.ai-cap-num {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: #0f5f62;
  font-weight: 700;
}
.ai-cap-card h3 { font-size: 0.95rem; margin: 0.3rem 0 0.2rem; }
.ai-cap-card p { font-size: 0.84rem; line-height: 1.4; margin: 0; opacity: 0.85; }
[data-theme="dark"] .ai-cap-card { background: rgba(95,184,188,0.06); border-color: rgba(95,184,188,0.15); }
[data-theme="dark"] .ai-cap-num { color: #5fb8bc; }

/* AI trust inline bullets */
.ai-trust-bullets--inline {
  display: flex !important;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  justify-content: center;
  margin-top: 0.85rem !important;
  font-size: 0.88rem;
  list-style: none;
  padding: 0;
}
.ai-trust-bullets--inline li {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.3rem 0.8rem;
  background: rgba(15,95,98,0.06);
  border-radius: 999px;
  font-weight: 500;
}
[data-theme="dark"] .ai-trust-bullets--inline li {
  background: rgba(95,184,188,0.10);
}

/* Audience section — tighter */
.audience-section { padding-block: clamp(0.85rem, 2vw, 1.5rem) !important; }
.audience-list { gap: 0.5rem; }
.audience-list p { margin: 0.35rem 0; line-height: 1.5; }

/* Pricing cards — denser, refined hover */
.pricing-grid { gap: 0.9rem !important; }
.price-card {
  padding: 1.25rem !important;
  border-radius: 14px !important;
  border: 1px solid rgba(15,95,98,0.14);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.price-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(15,95,98,0.14);
}
.price-card.featured-price {
  border: 2px solid #0f5f62;
  background: linear-gradient(180deg, rgba(15,95,98,0.04) 0%, transparent 60%);
  position: relative;
}
.price-card h3 { font-size: 1.05rem; margin-bottom: 0.35rem; }
.price-card .price { font-size: 2rem !important; margin: 0.25rem 0 0.45rem !important; line-height: 1; }
.price-card .price span { font-size: 0.85rem; font-weight: 500; opacity: 0.7; }
.price-card .price-note { font-size: 0.85rem; opacity: 0.78; margin-bottom: 0.85rem; }
.price-card ul { margin: 0.5rem 0 1rem !important; gap: 0.25rem; }
.price-card ul li {
  font-size: 0.88rem !important;
  padding: 0.2rem 0 !important;
  line-height: 1.4;
}
.billing-toggle { margin: 0 auto 0.85rem !important; }
.save-badge {
  background: linear-gradient(135deg, #e09471, #c66a3e);
  color: #fffdf8;
}

/* Features section — denser cards */
.feature-grid { gap: 0.7rem !important; }
.feature-card {
  padding: 0.85rem 1rem !important;
  border-radius: 10px !important;
  background: #fffdf8;
  border: 1px solid rgba(15,95,98,0.10);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.feature-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(15,95,98,0.10);
}
.feature-card h3 { font-size: 0.97rem; margin-bottom: 0.25rem; }
.feature-card p { font-size: 0.86rem; line-height: 1.4; margin: 0; opacity: 0.85; }
.feature-category-header {
  margin-top: 0.85rem !important;
  margin-bottom: 0.4rem !important;
}
[data-theme="dark"] .feature-card,
[data-theme="dark"] .screenshot-card,
[data-theme="dark"] .step-card {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.10);
}

/* FAQ accordion — clean, no fluff */
.faq-accordion {
  display: flex !important;
  flex-direction: column;
  gap: 0.45rem !important;
  max-width: 760px;
  margin: 0 auto;
}
.faq-accordion details {
  background: #fffdf8;
  border: 1px solid rgba(15,95,98,0.12);
  border-radius: 10px;
  padding: 0;
  overflow: hidden;
  transition: border-color 0.15s ease;
}
.faq-accordion details[open] {
  border-color: rgba(15,95,98,0.3);
  box-shadow: 0 4px 14px rgba(15,95,98,0.07);
}
.faq-accordion summary {
  cursor: pointer;
  list-style: none;
  padding: 0.85rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-weight: 600;
}
.faq-accordion summary::-webkit-details-marker { display: none; }
.faq-accordion summary h3 {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.35;
}
.faq-accordion .faq-icon {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(15,95,98,0.10);
  position: relative;
  transition: transform 0.2s ease, background 0.2s ease;
}
.faq-accordion .faq-icon::before,
.faq-accordion .faq-icon::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 10px; height: 2px;
  background: #0f5f62;
  border-radius: 1px;
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease;
}
.faq-accordion .faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-accordion details[open] .faq-icon { background: #0f5f62; }
.faq-accordion details[open] .faq-icon::before { background: #fffdf8; }
.faq-accordion details[open] .faq-icon::after {
  background: #fffdf8;
  transform: translate(-50%, -50%) rotate(0deg);
}
.faq-accordion p {
  padding: 0 1rem 0.95rem;
  margin: 0;
  font-size: 0.93rem;
  line-height: 1.55;
  color: rgba(28, 36, 38, 0.85);
}
[data-theme="dark"] .faq-accordion details {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.12);
}
[data-theme="dark"] .faq-accordion p { color: rgba(255,253,248,0.78); }
[data-theme="dark"] .faq-accordion .faq-icon { background: rgba(95,184,188,0.20); }
[data-theme="dark"] .faq-accordion .faq-icon::before,
[data-theme="dark"] .faq-accordion .faq-icon::after { background: #5fb8bc; }

/* Final CTA — replaces waitlist + contact */
.final-cta {
  padding: clamp(1.5rem, 3.5vw, 2.5rem) !important;
  background: linear-gradient(135deg, #0f5f62 0%, #1a8a8e 100%);
  color: #fffdf8;
  border-radius: 18px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.final-cta::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,253,248,0.10) 0%, transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(224,148,113,0.18) 0%, transparent 45%);
  pointer-events: none;
}
.final-cta-inner { position: relative; max-width: 640px; margin: 0 auto; }
.final-cta .eyebrow { color: #fffdf8; opacity: 0.85; }
.final-cta h2 {
  font-size: clamp(1.7rem, 4vw, 2.3rem);
  margin: 0.4rem 0 0.5rem;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #fffdf8;
}
.final-cta-lead {
  font-size: 1.02rem;
  opacity: 0.92;
  margin: 0 auto 1rem;
  max-width: 480px;
  line-height: 1.5;
}
.final-cta-actions {
  display: flex;
  gap: 0.7rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 0.95rem;
}
.button-large {
  padding: 0.9rem 1.6rem !important;
  font-size: 1.02rem !important;
  border-radius: 999px !important;
}
.final-cta .button {
  background: #fffdf8;
  color: #0f5f62;
  border: none;
}
.final-cta .button:hover { background: #fff; transform: translateY(-1px); }
.final-cta .button-secondary {
  background: transparent;
  color: #fffdf8;
  border: 1.5px solid rgba(255,253,248,0.5);
}
.final-cta .button-secondary:hover {
  background: rgba(255,253,248,0.10);
  border-color: #fffdf8;
}
.final-cta-trust {
  list-style: none;
  padding: 0;
  margin: 0 0 0.9rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem 1.1rem;
  font-size: 0.88rem;
  opacity: 0.92;
}
.final-cta-trust li {
  display: inline-flex; align-items: center; gap: 0.3rem;
}
.final-cta-trust .check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(255,253,248,0.22);
  color: #fffdf8;
  font-size: 0.7rem;
  font-weight: 700;
}
.final-cta-meta {
  font-size: 0.86rem;
  opacity: 0.78;
  margin: 0.65rem 0 0;
}
.final-cta-meta a {
  color: #fffdf8;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Footer denser */
.site-footer { padding-block: clamp(0.9rem, 2vw, 1.4rem) !important; }
.footer-inner { gap: 0.5rem !important; }
.footer-disclaimer { font-size: 0.84rem; line-height: 1.45; }

/* Mobile: hero features stack cleaner */
@media (max-width: 720px) {
  .hero-features { grid-template-columns: 1fr !important; }
  .visit-prep-inner { grid-template-columns: 1fr !important; }
  .final-cta-actions .button { width: 100%; }
}

/* Section heading subtitle tone */
.section-heading .section-sub {
  font-size: 0.98rem;
  line-height: 1.5;
  opacity: 0.82;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* ===== Compression pass v20260512g ===== */

/* AI capabilities: clean 4-col when only 4 cards */
.ai-capabilities--four { grid-template-columns: repeat(4, 1fr) !important; }
.ai-capabilities--four .ai-cap-card { grid-column: auto !important; }
@media (max-width: 920px) and (min-width: 541px) {
  .ai-capabilities--four { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 540px) {
  .ai-capabilities--four { grid-template-columns: 1fr !important; }
}

/* Features: tight icon strip — 4 columns (4 top, 4 bottom) */
.features-icon-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem;
  margin-top: clamp(var(--space-4), 3vw, var(--space-6));
  max-width: 1100px;
  margin-inline: auto;
  justify-items: stretch;
}
@media (max-width: 960px) {
  .features-icon-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; }
}
@media (max-width: 480px) {
  .features-icon-strip { grid-template-columns: 1fr; max-width: 380px; }
}
.features-icon-strip .fi-item {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.9rem 0.75rem;
  background: var(--color-surface);
  border: 1px solid color-mix(in oklab, var(--color-border) 60%, transparent);
  border-radius: 12px;
  text-align: left;
}
.features-icon-strip .fi-icon {
  font-size: 1.3rem;
  line-height: 1;
}
.features-icon-strip .fi-label {
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: -0.01em;
}
.features-icon-strip .fi-desc {
  font-size: 0.82rem;
  line-height: 1.35;
  opacity: 0.78;
  margin: 0;
}
[data-theme="dark"] .features-icon-strip .fi-item {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.08);
}

/* Pricing: hide Free card behind a toggle link */
.pricing-grid--compact { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; max-width: 820px; margin-inline: auto; }
@media (max-width: 720px) { .pricing-grid--compact { grid-template-columns: 1fr !important; } }
.pricing-grid--compact .price-card.plan-free { display: none !important; }
.pricing-grid--compact.show-free { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; max-width: 1200px; }
.pricing-grid--compact.show-free .price-card.plan-free { display: flex !important; }
.pricing-free-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1rem;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.95rem;
}
.pricing-free-link:hover { opacity: 0.75; }

/* Cookie banner — compact pill (bottom-right) */
/* Shorten the long copy via CSS-only — hide the verbose paragraph */
.cookie-banner--compact .cookie-banner-text p { display: none !important; }
.cookie-banner--compact .cookie-banner-text::after {
  content: "This site uses cookies for analytics. ";
  display: block;
  font-size: 0.84rem;
  line-height: 1.4;
  margin: 0.25rem 0 0;
  opacity: 0.85;
}
.cookie-banner--compact .cookie-banner-text a,
.cookie-banner--compact .cookie-banner-text::after a { font-size: 0.84rem; }

.cookie-banner--compact,
.cookie-consent.cookie-consent--compact,
.cookie-consent--compact {
  position: fixed !important;
  left: auto !important;
  right: clamp(0.8rem, 2vw, 1.5rem) !important;
  bottom: clamp(0.8rem, 2vw, 1.5rem) !important;
  top: auto !important;
  max-width: 420px !important;
  width: calc(100% - 2rem) !important;
  padding: 0.9rem 1rem !important;
  border-radius: 16px !important;
  box-shadow: 0 14px 40px rgba(0,0,0,0.18) !important;
  font-size: 0.86rem;
  display: block !important;
}
.cookie-banner--compact > *,
.cookie-banner--compact .cookie-banner-inner {
  display: block !important;
  flex: none !important;
  width: auto !important;
  max-width: 100% !important;
}
.cookie-banner--compact .cookie-banner-actions,
.cookie-banner--compact > div:last-child {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.4rem !important;
  justify-content: flex-end !important;
  margin-top: 0.55rem !important;
}
.cookie-banner--compact .cookie-banner-text,
.cookie-banner--compact .cookie-consent-text,
.cookie-banner--compact > div:first-child,
.cookie-consent--compact > div:first-child { font-size: 0.84rem; line-height: 1.4; }
.cookie-banner--compact button,
.cookie-consent--compact button { font-size: 0.84rem !important; padding: 0.4rem 0.85rem !important; }
.cookie-banner--compact h2,
.cookie-banner--compact h3 { font-size: 0.95rem !important; margin: 0 0 0.3rem !important; }
.cookie-banner--compact p { margin: 0 0 0.55rem !important; }

@media (max-width: 540px) {
  .cookie-banner--compact,
  .cookie-consent--compact { left: 0.5rem !important; right: 0.5rem !important; width: auto !important; }
}

/* Hero tagline — second sentence matches main subhead style */
.hero-text--tagline {
  margin-top: 0.4rem !important;
}

/* Hero visual showcase — between text hero and app preview */
.hero-visual {
  max-width: 1200px;
  margin: clamp(1rem, 3vw, 2rem) auto !important;
  padding: 0 clamp(1rem, 2vw, 1.5rem) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.hero-visual-link {
  display: block;
  border-radius: clamp(14px, 1.5vw, 20px);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 10px 30px rgba(15,95,98,0.08);
  background: #f6f4ef;
}
.hero-visual-link:hover,
.hero-visual-link:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 18px 48px rgba(15,95,98,0.15);
}
.hero-visual-link img {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}
[data-theme="dark"] .hero-visual-link {
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  background: rgba(255,255,255,0.04);
}

/* Cookie banner permanently disabled */
.cookie-banner,
.cookie-consent,
#cookie-banner,
#cookie-consent,
[data-cookie-consent],
[data-cookie-preferences-modal] { display: none !important; }

/* ============================================================
   v=20260512m — TIGHTEN PASS #2
   Reduce vertical white space across all main sections,
   compact pricing cards, tighter hero-visual breathing room.
   ============================================================ */

/* Cut section padding ~50% */
section,
#app-preview,
#features,
#ai,
#pricing,
#faq,
#waitlist,
#contact,
.pricing-section,
.faq-section,
.features-section,
.ai-trust-section,
.screenshots-section,
.audience-section,
.get-started-section {
  padding-top: clamp(1.4rem, 2.6vw, 2.2rem) !important;
  padding-bottom: clamp(1.4rem, 2.6vw, 2.2rem) !important;
}

/* Hero visual: no double padding, tight to neighbors */
.hero-visual {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: clamp(0.5rem, 1.2vw, 1rem) !important;
  margin-bottom: clamp(0.5rem, 1.2vw, 1rem) !important;
}

/* Section heading margin trim */
.section-heading,
.section-heading-centered {
  margin-bottom: clamp(0.75rem, 1.4vw, 1.1rem) !important;
}
.section-heading h2 {
  margin-top: 0.25rem !important;
  margin-bottom: 0.25rem !important;
}
.section-heading .section-sub {
  margin-top: 0.2rem !important;
}

/* Pricing tighten */
.pricing-grid { gap: 0.85rem !important; }
.price-card {
  padding: 1.1rem 1rem !important;
  gap: 0.7rem !important;
}
.price-card h3 { margin-bottom: 0.15rem !important; }
.price-card .price { margin: 0.1rem 0 0.35rem !important; }
.price-card ul { gap: 0.25rem !important; margin: 0.3rem 0 0.6rem !important; }
.price-card ul li { padding: 0.15rem 0 !important; line-height: 1.35 !important; font-size: 0.9rem !important; }

/* Billing toggle tighter */
.billing-toggle { margin-bottom: clamp(0.75rem, 1.5vw, 1.1rem) !important; }

/* Features icon strip cards: compact */
.features-icon-strip .fi-item {
  padding: 0.7rem 0.7rem !important;
  gap: 0.2rem !important;
}
.features-icon-strip .fi-icon { font-size: 1.15rem !important; }
.features-icon-strip .fi-label { font-size: 0.88rem !important; }
.features-icon-strip .fi-desc { font-size: 0.78rem !important; line-height: 1.3 !important; }

/* AI capability cards compact */
.ai-capabilities--four .ai-cap-card {
  padding: 0.9rem 0.9rem !important;
  gap: 0.3rem !important;
}
.ai-capabilities--four .ai-cap-card h3 { font-size: 0.95rem !important; margin: 0.1rem 0 0.2rem !important; }
.ai-capabilities--four .ai-cap-card p { font-size: 0.82rem !important; line-height: 1.35 !important; }

/* FAQ tighter */
.faq-grid { gap: 0.35rem !important; }
.faq-grid details { padding: 0.65rem 0.9rem !important; }
.faq-grid summary h3 { font-size: 0.95rem !important; }
.faq-grid details p { font-size: 0.88rem !important; line-height: 1.4 !important; margin-top: 0.35rem !important; }

/* Final CTA tighter */
.get-started-section, .final-cta { padding-top: clamp(1.3rem, 2.4vw, 2rem) !important; padding-bottom: clamp(1.3rem, 2.4vw, 2rem) !important; }
.final-cta-lead { margin-bottom: 0.6rem !important; }

/* Mobile-specific: shrink further */
@media (max-width: 640px) {
  section,
  .pricing-section,
  .faq-section,
  .features-section,
  .ai-trust-section,
  .screenshots-section,
  .audience-section,
  .get-started-section {
    padding-top: clamp(1.1rem, 4vw, 1.6rem) !important;
    padding-bottom: clamp(1.1rem, 4vw, 1.6rem) !important;
  }
  .section-heading h2 { font-size: 1.45rem !important; line-height: 1.2 !important; }
  .section-heading .section-sub { font-size: 0.92rem !important; }
  .hero-visual { margin-top: 0.4rem !important; margin-bottom: 0.4rem !important; }
  .price-card { padding: 0.95rem 0.85rem !important; }
  .price-card .price { font-size: 1.7rem !important; }
  .price-card ul li { font-size: 0.88rem !important; }
  .faq-grid details { padding: 0.6rem 0.8rem !important; }
}

/* ====== ToS acknowledgment under pricing CTAs (added 2026-05-12) ====== */
.price-tos {
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--text-muted, #6b7280);
  margin: 0.55rem 0 0;
  text-align: center;
}
.price-tos a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.price-tos a:hover {
  color: var(--accent, #0f5f62);
}
.lifetime-banner .lifetime-tos {
  display: block;
  width: 100%;
  text-align: center;
  margin: 0.6rem 0 0;
  color: #08383a;
  font-size: 0.78rem;
  opacity: 0.85;
}
.lifetime-banner .lifetime-tos a {
  color: #08383a;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 500;
}
@media (max-width: 720px) {
  .lifetime-banner .lifetime-tos { text-align: center; }
}

/* ====== One-click desktop install callout (added 2026-05-12) ====== */
.install-callout-section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 22px 24px;
}
.install-callout {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 22px 26px;
  border-radius: 18px;
  background: linear-gradient(135deg, #fff5f5 0%, #ffeaea 100%);
  border: 1px solid #ffd6d6;
  box-shadow: 0 1px 2px rgba(15, 95, 98, 0.04);
}
.install-callout-icon {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: #ffe0e0;
  color: #d94c4c;
  display: flex;
  align-items: center;
  justify-content: center;
}
.install-callout-body { flex: 1 1 auto; min-width: 0; }
.install-callout-body h3 {
  margin: 0 0 6px;
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--text-primary, #0b1726);
  letter-spacing: -0.01em;
}
.install-callout-body p {
  margin: 0;
  font-size: 0.97rem;
  line-height: 1.55;
  color: var(--text-secondary, #3b4a5a);
}
.install-callout-body strong {
  color: var(--text-primary, #0b1726);
  font-weight: 600;
}
@media (max-width: 640px) {
  .install-callout {
    gap: 14px;
    padding: 18px 18px;
    border-radius: 14px;
  }
  .install-callout-icon { width: 40px; height: 40px; }
  .install-callout-icon svg { width: 24px; height: 24px; }
  .install-callout-body h3 { font-size: 1rem; }
  .install-callout-body p { font-size: 0.92rem; }
}

/* ===== CONTACT FORM SECTION ===== */
.contact-section {
  padding: clamp(2.4rem, 5vw, 4rem) clamp(1.2rem, 4vw, 2.4rem);
  background: linear-gradient(180deg, #fffdf8 0%, #fff5ec 100%);
  border-top: 1px solid rgba(8, 56, 58, 0.08);
}
.contact-inner {
  max-width: 720px;
  margin: 0 auto;
}
.contact-heading {
  text-align: center;
  margin-bottom: clamp(1.4rem, 3vw, 2.2rem);
}
.contact-heading h2 {
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  color: #08383a;
  margin: 0.3rem 0 0.5rem;
  letter-spacing: -0.01em;
}
.contact-sub {
  color: #4a5b5c;
  font-size: 1rem;
  margin: 0;
}
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
  background: #fff;
  padding: clamp(1.4rem, 3vw, 2rem);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(8, 56, 58, 0.06), 0 8px 24px rgba(8, 56, 58, 0.06);
  border: 1px solid rgba(8, 56, 58, 0.07);
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.95rem;
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.form-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #08383a;
  letter-spacing: 0.01em;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form select,
.contact-form textarea {
  font: inherit;
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid #d8dedf;
  border-radius: 10px;
  background: #fff;
  color: #08383a;
  transition: border-color 0.15s, box-shadow 0.15s;
  font-size: 0.97rem;
  box-sizing: border-box;
}
.contact-form textarea {
  resize: vertical;
  min-height: 110px;
  font-family: inherit;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: #08383a;
  box-shadow: 0 0 0 3px rgba(8, 56, 58, 0.12);
}
.contact-submit {
  align-self: flex-start;
  margin-top: 0.3rem;
}
.contact-meta {
  font-size: 0.82rem;
  color: #6a7778;
  margin: 0.2rem 0 0;
}
@media (max-width: 640px) {
  .form-row { grid-template-columns: 1fr; }
  .contact-submit { width: 100%; align-self: stretch; }
}

/* ============================================================
   TIGHT SPACING PASS v2 (2026-05-17)
   Aggressive whitespace reduction. Keeps padded cells.
   Targets: section margins, padding, hero, pricing grid.
   ============================================================ */

/* Inter-section margins — minimal, rely on padding */
.screenshots-section,
.ai-trust-section,
.contact-section,
.features-section,
.audience-section,
.pricing-section,
.faq-section,
.final-cta,
.install-callout-section,
.steps-section,
.visit-prep-showcase {
  margin-block: 0.3rem !important;
}

/* Internal section padding — tighter, still breathable */
/* High specificity: section[id] beats older rules in cascade */
main section#app-preview,
main section#features,
main section#ai,
main section#audience,
main section#pricing,
main section#faq,
main section#waitlist,
main section#contact,
main section#get-started,
main section#install-callout,
main section.screenshots-section,
main section.features-section,
main section.ai-trust-section,
main section.audience-section,
main section.pricing-section,
main section.faq-section,
main section.final-cta,
main section.install-callout-section,
main section.steps-section,
main section.visit-prep-showcase,
main section.get-started-section {
  padding-top: clamp(0.6rem, 1.4vw, 1.05rem) !important;
  padding-bottom: clamp(0.6rem, 1.4vw, 1.05rem) !important;
  padding-block: clamp(0.6rem, 1.4vw, 1.05rem) !important;
}

/* ai-trust uses shorthand padding (all 4 sides) — preserve inline padding but tighten vertical */
.ai-trust-section {
  padding-left: clamp(1rem, 2vw, 1.5rem) !important;
  padding-right: clamp(1rem, 2vw, 1.5rem) !important;
}

/* Hero — tight */
.hero {
  padding-block: clamp(0.4rem, 1.2vw, 0.9rem) !important;
}
.hero-features {
  margin: var(--space-3) 0 var(--space-3) !important;
  gap: var(--space-1) var(--space-3) !important;
}
.hero-actions {
  margin-top: var(--space-2) !important;
}
.hero-content > * + * {
  margin-top: 0.5rem !important;
}

/* Section heading bottom margin */
.section-heading {
  margin-bottom: clamp(0.4rem, 1vw, 0.7rem) !important;
}
.section-heading h2 {
  margin-bottom: 0.25rem !important;
}
.section-heading p {
  margin-top: 0.25rem !important;
  margin-bottom: 0 !important;
}

/* Pricing grid — tightest, this was largest section */
.pricing-grid {
  gap: 0.6rem !important;
  margin-top: 0.5rem !important;
  margin-bottom: 0.4rem !important;
}
.pricing-card,
.price-card {
  padding: clamp(0.75rem, 1.2vw, 1.1rem) !important;
}
.pricing-card ul li,
.price-card ul li,
.pricing-card .feature-list li,
.price-card .feature-list li {
  margin-block: 0.15rem !important;
  padding-block: 0.1rem !important;
  line-height: 1.35 !important;
}
.pricing-section .pricing-toggle,
.pricing-toggle {
  margin-block: 0.4rem !important;
}
.pricing-section .pricing-disclaimer,
.pricing-disclaimer {
  margin-top: 0.4rem !important;
  margin-bottom: 0 !important;
}
.pricing-card .price,
.price-card .price {
  margin-block: 0.3rem !important;
}
.pricing-card .plan-name,
.price-card .plan-name {
  margin-bottom: 0.2rem !important;
}

/* Feature/audience/FAQ cards — padded cells, tight outer */
.feature-panel,
.features-icon-strip,
.audience-card,
.faq-card,
.contact-card,
.visit-card {
  padding: clamp(0.75rem, 1.3vw, 1.15rem) !important;
}

/* Feature/audience grids — tighter gaps */
.features-grid,
.audience-grid,
.faq-grid,
.visit-grid {
  gap: 0.6rem !important;
}

/* FAQ list items — tighter */
.faq-section details,
.faq-section summary {
  padding-block: 0.45rem !important;
}
.faq-section details[open] > div,
.faq-section .faq-answer {
  padding-top: 0.3rem !important;
  padding-bottom: 0.4rem !important;
}

/* Final CTA tightening */
.final-cta {
  padding-block: clamp(0.9rem, 2vw, 1.4rem) !important;
}
.final-cta .cta-inner > * + * {
  margin-top: 0.5rem !important;
}

/* Mobile: extra tight */
@media (max-width: 640px) {
  .screenshots-section,
  .ai-trust-section,
  .contact-section,
  .features-section,
  .audience-section,
  .pricing-section,
  .faq-section,
  .final-cta,
  .install-callout-section,
  .steps-section,
  .visit-prep-showcase {
    margin-block: 0.4rem !important;
    padding-block: 0.8rem !important;
  }
  .hero {
    padding-block: 0.6rem !important;
  }
}