/* Public landing page */

.landing-page {
  --landing-line: color-mix(in srgb, var(--border-h) 72%, transparent);
  --landing-panel: color-mix(in srgb, var(--card) 88%, black);
  --landing-panel-strong: color-mix(in srgb, var(--surface) 82%, black);
  --landing-muted: color-mix(in srgb, var(--t2) 76%, transparent);
  --landing-bezier: cubic-bezier(0.32, 0.72, 0, 1);

  /* Surface "films" and hairlines. Dark values match the original literals
     exactly; the light theme (end of file) re-bases them to dark-on-light. */
  --landing-nav-bg: rgba(18, 22, 31, 0.78);
  --landing-grid: rgba(255, 255, 255, 0.026);
  --landing-grid-soft: rgba(255, 255, 255, 0.018);
  --landing-film-faint: rgba(255, 255, 255, 0.035);
  --landing-film-soft: rgba(255, 255, 255, 0.04);
  --landing-film: rgba(255, 255, 255, 0.045);
  --landing-film-strong: rgba(255, 255, 255, 0.055);
  --landing-hairline-07: rgba(255, 255, 255, 0.07);
  --landing-hairline: rgba(255, 255, 255, 0.075);
  --landing-hairline-08: rgba(255, 255, 255, 0.08);
  --landing-hairline-10: rgba(255, 255, 255, 0.1);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 28%, transparent), transparent 36rem),
    repeating-linear-gradient(90deg, var(--landing-grid) 0 1px, transparent 1px 86px),
    var(--bg);
  color: var(--t1);
  min-height: 100dvh;
  overflow: hidden;
  position: relative;
}

.landing-page::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.34;
  background-image:
    linear-gradient(var(--landing-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--landing-grid-soft) 1px, transparent 1px);
  background-size: 48px 48px, 48px 48px;
  mask-image: linear-gradient(to bottom, black, transparent 72%);
}

.landing-page > * {
  position: relative;
  z-index: 2;
}

.landing-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
}

.landing-hero-shell {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.section-kicker {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  border: 1px solid var(--landing-line);
  border-radius: var(--r-pill);
  color: var(--accent-h);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1;
  padding: 8px 11px;
  text-transform: uppercase;
}

.is-reveal-ready .reveal-in {
  opacity: 0;
  transform: translateY(34px);
  transition:
    opacity 860ms var(--landing-bezier),
    transform 860ms var(--landing-bezier);
}

.is-reveal-ready .reveal-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.landing-nav {
  align-items: center;
  align-self: center;
  background: var(--landing-nav-bg);
  border: 1px solid var(--landing-line);
  border-radius: var(--r-pill);
  display: flex;
  gap: 28px;
  justify-content: space-between;
  margin: 24px auto 0;
  min-height: 60px;
  padding: 8px 9px 8px 18px;
  position: sticky;
  top: 16px;
  width: min(100%, 660px);
  z-index: 12;
  backdrop-filter: blur(18px);
}

.landing-logo {
  align-items: center;
  color: var(--t1);
  display: flex;
  font-size: 15px;
  font-weight: 700;
  gap: 10px;
  text-decoration: none;
}

.landing-logo:hover {
  color: var(--t1);
  text-decoration: none;
}

.landing-logo .logo-icon {
  align-items: center;
  background: var(--accent);
  border-radius: 8px;
  display: flex;
  flex-shrink: 0;
  height: 30px;
  justify-content: center;
  width: 30px;
}

.landing-logo .logo-icon svg {
  height: 16px;
  width: 16px;
}

.landing-logo .logo-wordmark {
  align-items: baseline;
  display: inline-flex;
  white-space: nowrap;
}

.landing-logo .logo-suffix {
  color: var(--t2);
  font-size: 13px;
  font-weight: 500;
  margin-left: 2px;
}

.landing-nav-actions {
  align-items: center;
  display: flex;
  gap: 10px;
}

.nav-link {
  color: var(--t2);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 8px;
  text-decoration: none;
  transition:
    color 520ms var(--landing-bezier),
    transform 520ms var(--landing-bezier);
}

.nav-link:hover {
  color: var(--t1);
  text-decoration: none;
  transform: translateY(-1px);
}

.nav-cta,
.waitlist-btn {
  align-items: center;
  background: color-mix(in srgb, var(--accent) 88%, white);
  border: 0;
  border-radius: var(--r-pill);
  color: white;
  cursor: pointer;
  display: inline-flex;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 800;
  gap: 12px;
  justify-content: center;
  line-height: 1;
  min-height: 44px;
  padding: 7px 7px 7px 18px;
  text-decoration: none;
  transition:
    background 620ms var(--landing-bezier),
    transform 620ms var(--landing-bezier);
}

.nav-cta:hover,
.waitlist-btn:hover {
  background: var(--accent-h);
  color: white;
  text-decoration: none;
  transform: translateY(-1px);
}

.nav-cta:active,
.waitlist-btn:active {
  transform: scale(0.98);
}

.cta-mark,
.waitlist-btn-mark {
  align-items: center;
  background: rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  display: inline-flex;
  font-family: var(--mono);
  font-size: 15px;
  height: 30px;
  justify-content: center;
  transition:
    transform 620ms var(--landing-bezier),
    background 620ms var(--landing-bezier);
  width: 30px;
}

.nav-cta:hover .cta-mark,
.waitlist-btn:hover .waitlist-btn-mark {
  background: rgba(255, 255, 255, 0.24);
  transform: translateX(2px) translateY(-1px) scale(1.04);
}

.landing-hero {
  align-items: center;
  display: grid;
  flex: 1;
  gap: 54px;
  grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1.08fr);
  padding: 76px 0 96px;
}

.hero-content {
  max-width: 620px;
}

.hero-content h1 {
  color: var(--t1);
  font-size: clamp(44px, 7vw, 84px);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 0.96;
  margin: 22px 0 24px;
  text-wrap: balance;
}

.hero-tagline {
  color: var(--landing-muted);
  font-size: clamp(16px, 1.8vw, 19px);
  line-height: 1.7;
  margin-bottom: 26px;
  max-width: 560px;
}

.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}

.hero-proof span {
  align-items: baseline;
  background: var(--landing-film);
  border: 1px solid var(--landing-line);
  border-radius: var(--r-pill);
  color: var(--t2);
  display: inline-flex;
  font-size: 12px;
  gap: 6px;
  padding: 7px 10px;
}

.hero-proof strong {
  color: var(--t1);
  font-family: var(--mono);
  font-size: 12px;
}

.is-reveal-ready .hero-visual {
  transform: translateY(34px);
}

.is-reveal-ready .hero-visual.is-visible {
  transform: translateY(0);
}

.visual-bezel,
.steps,
.footer-inner {
  background: var(--landing-film);
  border: 1px solid var(--landing-line);
  border-radius: var(--rl);
  padding: 8px;
}

.visual-panel {
  background:
    linear-gradient(145deg, var(--landing-hairline-07), transparent 42%),
    var(--landing-panel);
  border: 1px solid var(--landing-hairline-08);
  border-radius: 10px;
  min-height: 520px;
  overflow: hidden;
  padding: 24px;
  position: relative;
}

.visual-panel::after {
  content: "";
  position: absolute;
  inset: auto 18px 18px;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--yt));
  border-radius: var(--r-pill);
  opacity: 0.68;
}

.visual-panel > * {
  position: relative;
  z-index: 2;
}

.panel-topline,
.rank-focus,
.platform-grid,
.signal-list > div {
  border: 1px solid var(--landing-hairline);
}

.panel-topline {
  align-items: center;
  background: var(--landing-film-soft);
  border-radius: 8px;
  color: var(--t2);
  display: flex;
  font-family: var(--mono);
  font-size: 11px;
  justify-content: space-between;
  letter-spacing: 0.06em;
  margin-bottom: 18px;
  padding: 12px 13px;
  text-transform: uppercase;
}

.live-dot {
  color: var(--green);
}

.rank-focus {
  align-items: center;
  background: var(--landing-film-strong);
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 18px;
  padding: 22px;
}

.metric-label,
.platform-card span {
  color: var(--t3);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.metric-title {
  color: var(--t1);
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.08;
  margin-top: 6px;
}

.metric-score {
  align-items: center;
  background: color-mix(in srgb, var(--accent-s) 80%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  height: 104px;
  justify-content: center;
  min-width: 104px;
}

.metric-score span {
  color: var(--t1);
  font-family: var(--mono);
  font-size: 38px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
}

.metric-score small,
.platform-card small {
  color: var(--t2);
  font-size: 12px;
}

.rank-bars {
  align-items: end;
  display: grid;
  gap: 9px;
  grid-template-columns: repeat(5, 1fr);
  height: 132px;
  margin: 22px 0;
}

.rank-bars span {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--yt) 46%, white), color-mix(in srgb, var(--accent) 82%, black));
  border-radius: 8px 8px 3px 3px;
  display: block;
  height: var(--bar-size);
  min-height: 38px;
  transform-origin: bottom;
  transition: transform 700ms var(--landing-bezier);
}

.visual-bezel:hover .rank-bars span {
  transform: scaleY(1.035);
}

.platform-grid {
  background: var(--landing-film-faint);
  border-radius: 10px;
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(2, 1fr);
  overflow: hidden;
}

.platform-grid.platform-grid-single {
  grid-template-columns: 1fr;
}

.platform-card {
  background: color-mix(in srgb, var(--landing-panel-strong) 88%, transparent);
  padding: 18px;
}

.platform-card strong {
  color: var(--t1);
  display: block;
  font-family: var(--mono);
  font-size: 34px;
  line-height: 1;
  margin: 12px 0 6px;
}

.platform-card.youtube strong {
  color: var(--yt);
}

.signal-list {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.signal-list > div {
  align-items: flex-start;
  background: var(--landing-film-soft);
  border-radius: 8px;
  display: flex;
  gap: 12px;
  padding: 13px;
}

.signal-index {
  color: var(--accent-h);
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
}

.signal-list p {
  color: var(--t2);
  font-size: 13px;
  line-height: 1.55;
}

.waitlist-form {
  background: var(--landing-film-soft);
  border: 1px solid var(--landing-line);
  border-radius: var(--rl);
  max-width: 430px;
  padding: 8px;
  width: 100%;
}

.waitlist-field {
  margin-bottom: 8px;
}

.waitlist-input {
  background: color-mix(in srgb, var(--input) 86%, black);
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--t1);
  font-family: var(--font);
  font-size: 14px;
  min-height: 46px;
  padding: 12px 13px;
  transition:
    border-color 560ms var(--landing-bezier),
    background 560ms var(--landing-bezier),
    transform 560ms var(--landing-bezier);
  width: 100%;
}

.waitlist-input:focus {
  background: var(--input);
  border-color: color-mix(in srgb, var(--accent) 68%, transparent);
  outline: none;
  transform: translateY(-1px);
}

.waitlist-input::placeholder {
  color: var(--t3);
}

.waitlist-consent {
  align-items: flex-start;
  display: flex;
  gap: 10px;
  margin: 10px 2px 12px;
}

.waitlist-checkbox {
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
  height: 15px;
  margin-top: 3px;
  width: 15px;
}

.consent-label {
  color: var(--t2);
  cursor: pointer;
  font-size: 13px;
  line-height: 1.45;
}

.waitlist-btn {
  width: 100%;
}

.waitlist-errors,
.waitlist-success {
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.55;
}

.waitlist-errors {
  background: var(--red-s);
  border: 1px solid color-mix(in srgb, var(--red) 58%, transparent);
  color: color-mix(in srgb, var(--red) 82%, white);
  margin-bottom: 10px;
  padding: 10px 12px;
}

.field-error {
  color: color-mix(in srgb, var(--red) 82%, white);
  font-size: 12px;
  margin-top: 4px;
}

.waitlist-success {
  background: var(--green-s);
  border: 1px solid color-mix(in srgb, var(--green) 54%, transparent);
  color: color-mix(in srgb, var(--green) 82%, white);
  max-width: 430px;
  padding: 18px 20px;
}

.landing-how,
.landing-footer {
  padding: 112px 0;
}

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

.section-heading {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 0.72fr) minmax(260px, 0.28fr);
  margin-bottom: 36px;
}

.section-heading h2,
.footer-waitlist h2 {
  color: var(--t1);
  font-size: clamp(30px, 4.4vw, 54px);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.02;
  text-wrap: balance;
}

.section-heading .section-kicker {
  align-self: start;
  justify-self: end;
}

.steps {
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}

.step {
  background: var(--landing-panel);
  border: 1px solid var(--landing-hairline-07);
  border-radius: 10px;
  min-height: 230px;
  padding: 28px;
  transition:
    border-color 620ms var(--landing-bezier),
    transform 620ms var(--landing-bezier);
}

.step:hover {
  border-color: color-mix(in srgb, var(--accent) 42%, transparent);
  transform: translateY(-3px);
}

.step-wide {
  grid-row: span 2;
  min-height: 468px;
  padding: 36px;
}

.step-num {
  color: var(--accent-h);
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  margin-bottom: 18px;
}

.step h3 {
  color: var(--t1);
  font-size: clamp(19px, 2.3vw, 30px);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.08;
  margin-bottom: 14px;
  text-wrap: balance;
}

.step p {
  color: var(--t2);
  font-size: 14px;
  line-height: 1.72;
}

.landing-footer {
  border-top: 1px solid var(--landing-line);
  padding-bottom: 64px;
}

.footer-inner {
  align-items: start;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
}

.footer-waitlist,
.footer-meta {
  background: var(--landing-panel);
  border: 1px solid var(--landing-hairline-07);
  border-radius: 10px;
  min-height: 100%;
  padding: 30px;
}

.footer-waitlist .section-kicker {
  margin-bottom: 18px;
}

.footer-waitlist > p {
  color: var(--t2);
  font-size: 15px;
  line-height: 1.65;
  margin: 16px 0 24px;
}

.footer-meta {
  align-content: end;
  display: grid;
}

.footer-brand {
  color: var(--t1);
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 10px;
}

.footer-copy {
  color: var(--t3);
  font-size: 13px;
  line-height: 1.72;
}

.footer-copy a {
  color: var(--t2);
  text-decoration: none;
  transition: color 520ms var(--landing-bezier);
}

.footer-copy a:hover {
  color: var(--t1);
}

@media (prefers-reduced-motion: reduce) {
  .reveal-in,
  .nav-link,
  .nav-cta,
  .waitlist-btn,
  .cta-mark,
  .waitlist-btn-mark,
  .rank-bars span,
  .step {
    transition-duration: 1ms;
  }
}

@media (max-width: 900px) {
  .landing-inner {
    padding: 0 20px;
  }

  .landing-hero-shell {
    min-height: auto;
  }

  .landing-hero {
    grid-template-columns: 1fr;
    padding: 56px 0 76px;
  }

  .is-reveal-ready .hero-visual,
  .is-reveal-ready .hero-visual.is-visible {
    transform: none;
  }

  .section-heading,
  .footer-inner {
    grid-template-columns: 1fr;
  }

  .section-heading .section-kicker {
    justify-self: start;
  }

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

  .step-wide {
    grid-row: auto;
    min-height: 230px;
  }
}

@media (max-width: 640px) {
  .landing-page {
    overflow: clip;
  }

  .landing-inner {
    padding: 0 16px;
  }

  .landing-nav {
    border-radius: 14px;
    gap: 12px;
    margin-top: 12px;
    min-height: 56px;
    padding: 8px;
    top: 8px;
  }

  .nav-link {
    display: none;
  }

  .landing-logo {
    font-size: 14px;
  }

  .nav-cta {
    font-size: 12px;
    min-height: 40px;
    padding-left: 14px;
  }

  .landing-hero {
    gap: 34px;
    padding: 48px 0 68px;
  }

  .hero-content h1 {
    font-size: clamp(38px, 13vw, 52px);
  }

  .hero-proof {
    align-items: stretch;
    flex-direction: column;
  }

  .visual-panel {
    min-height: auto;
    padding: 16px;
  }

  .panel-topline,
  .rank-focus,
  .platform-grid {
    grid-template-columns: 1fr;
  }

  .rank-focus {
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
  }

  .metric-score {
    height: auto;
    min-width: 100%;
    padding: 16px;
  }

  .platform-grid {
    display: grid;
  }

  .rank-bars {
    height: 96px;
  }

  .landing-how,
  .landing-footer {
    padding: 72px 0;
  }

  .step,
  .step-wide,
  .footer-waitlist,
  .footer-meta {
    padding: 22px;
  }
}

/* Static legal pages (privacy / terms) */
.legal {
  max-width: 720px;
  margin: 48px auto 96px;
  line-height: 1.7;
}

.legal h1 {
  margin: 8px 0 4px;
}

.legal h2 {
  margin: 40px 0 12px;
  font-size: 1.15rem;
}

.legal p,
.legal li {
  color: var(--text-muted, #b6b6c2);
}

.legal ul {
  padding-left: 20px;
  margin: 12px 0;
}

.legal li {
  margin: 6px 0;
}

.legal a {
  color: var(--accent, #8a7cff);
  text-decoration: underline;
}

.legal-updated {
  font-family: var(--mono);
  font-size: 0.8rem;
  opacity: 0.7;
}

.legal-links {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--landing-hairline-10);
}

.footer-legal {
  margin-top: 12px;
  font-size: 0.85rem;
}

/* ─── LIGHT THEME (landing) ──────────────────────────────────────────────────
   Re-base the landing films, grids, nav, and panels to dark-on-light. Mirrors
   the global light theme in application.css: OS-light with no override, or a
   forced data-theme="light". */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .landing-page {
    --landing-nav-bg: rgba(255, 255, 255, 0.82);
    --landing-grid: rgba(15, 23, 42, 0.05);
    --landing-grid-soft: rgba(15, 23, 42, 0.035);
    --landing-film-faint: rgba(15, 23, 42, 0.025);
    --landing-film-soft: rgba(15, 23, 42, 0.03);
    --landing-film: rgba(15, 23, 42, 0.035);
    --landing-film-strong: rgba(15, 23, 42, 0.05);
    --landing-hairline-07: rgba(15, 23, 42, 0.08);
    --landing-hairline: rgba(15, 23, 42, 0.1);
    --landing-hairline-08: rgba(15, 23, 42, 0.1);
    --landing-hairline-10: rgba(15, 23, 42, 0.12);
    --landing-panel: var(--card-hover);
    --landing-panel-strong: var(--surface);
  }
}

:root[data-theme="light"] .landing-page {
  --landing-nav-bg: rgba(255, 255, 255, 0.82);
  --landing-grid: rgba(15, 23, 42, 0.05);
  --landing-grid-soft: rgba(15, 23, 42, 0.035);
  --landing-film-faint: rgba(15, 23, 42, 0.025);
  --landing-film-soft: rgba(15, 23, 42, 0.03);
  --landing-film: rgba(15, 23, 42, 0.035);
  --landing-film-strong: rgba(15, 23, 42, 0.05);
  --landing-hairline-07: rgba(15, 23, 42, 0.08);
  --landing-hairline: rgba(15, 23, 42, 0.1);
  --landing-hairline-08: rgba(15, 23, 42, 0.1);
  --landing-hairline-10: rgba(15, 23, 42, 0.12);
  --landing-panel: var(--card-hover);
  --landing-panel-strong: var(--surface);
}

/* The waitlist input mixes --input with black for a recessed well in dark;
   on a light form that reads gray, so use the plain input surface + a border. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .waitlist-input {
    background: var(--input);
    border-color: var(--border);
  }
}

:root[data-theme="light"] .waitlist-input {
  background: var(--input);
  border-color: var(--border);
}



/* ─── SIMPLE LANDING (SOC-188) ───────────────────────────────────────────────
   Lissette's Figma reduces the public page to hero + form + footer and drops
   the film/grid treatment: "what's most important is that it doesn't look or
   sound like claude on the landing page."

   LIGHT ONLY, deliberately. The Figma is white and there is no dark comp. The
   first attempt made this theme-aware and shipped a near-black page nobody had
   designed (reverted in 0.4.30.3). Pinning the theme variables locally means
   every rule below resolves light whatever the visitor's theme is, without
   touching the app shell, which keeps its toggle.

   Scoped to .landing-page-simple so the legal pages, which share
   .landing-nav/.nav-cta, keep the original chrome. */

.landing-page-simple {
  color-scheme: light;
  --bg: #ffffff;
  --t1: #14181f;
  --t2: #5b6478;
  --border-h: #d7dce4;
  --landing-line: #e4e8ee;

  background: #ffffff;
  color: var(--t1);
  overflow: visible;
}

.landing-page-simple::before,
.landing-page-simple::after {
  display: none;
}

.landing-page-simple .landing-inner {
  max-width: 940px;
}

/* Flat nav: no pill, no sticky blur, no theme toggle. */
.landing-page-simple .landing-nav {
  backdrop-filter: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  gap: 16px;
  margin: 0;
  min-height: 0;
  padding: 28px 0;
  position: static;
  width: 100%;
}

/* app.css hides .logo-suffix below 768px and landing.css hides .nav-link on
   narrow viewports. Both were survivable on the old nav, which had more in it.
   On a nav stripped to two items they are not: the wordmark reads "tuner" and
   the only route into the app disappears. Re-assert both here. */
.landing-page-simple .landing-logo .logo-suffix {
  display: inline;
}

.landing-page-simple .nav-link {
  display: inline-flex;
  white-space: nowrap;
}

.landing-page-simple .nav-cta {
  background: var(--t1);
  color: #ffffff;
  font-weight: 600;
  gap: 0;
  min-height: 38px;
  padding: 10px 18px;
  white-space: nowrap;
}

.landing-page-simple .nav-cta:hover {
  background: var(--t1);
  color: #ffffff;
  opacity: 0.85;
}

/* Hero: story column, wordmark panel. */
.landing-page-simple .landing-hero {
  align-items: start;
  display: grid;
  gap: 56px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  padding: 64px 0 0;
}

.landing-page-simple .hero-content h1 {
  color: var(--t1);
  font-size: clamp(2.2rem, 5.2vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0;
}

.landing-page-simple .hero-kicker {
  color: var(--t2);
  font-size: 1rem;
  margin: 10px 0 28px;
}

.landing-page-simple .hero-story p {
  color: var(--t1);
  font-size: 0.98rem;
  line-height: 1.65;
  margin: 0 0 18px;
  max-width: 52ch;
}

/* No panel behind the wordmark. The Figma shows a light grey box, but on the
   built page it reads as "image not supplied yet" rather than as a choice
   (SOC-188 finish-gate review). The mark sits on the page instead. */
.landing-page-simple .hero-mark {
  align-items: center;
  display: flex;
  justify-content: center;
  padding: 24px 0;
}

.landing-page-simple .hero-mark img {
  height: auto;
  max-width: 300px;
  width: 100%;
}

/* Signup */
.landing-page-simple .landing-signup {
  max-width: 460px;
  padding: 8px 0 88px;
}

.landing-page-simple .landing-signup h2 {
  color: var(--t1);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 22px;
}

/* The form and footer inherit card chrome from the original landing design.
   The Figma has neither -- both sit flat on the page. */
.landing-page-simple .waitlist-form,
.landing-page-simple .footer-meta,
.landing-page-simple .footer-inner {
  background: none;
  border: 0;
  border-radius: 0;
  max-width: none;
  min-height: 0;
  padding: 0;
}

.landing-page-simple .waitlist-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.waitlist-name-row {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr 1fr;
}

.waitlist-label {
  color: var(--t1);
  display: block;
  font-size: 0.82rem;
  font-weight: 500;
  margin-bottom: 6px;
}

.landing-page-simple .waitlist-input {
  background: #ffffff;
  border: 1px solid var(--border-h);
  border-radius: 5px;
  color: var(--t1);
  font-size: 0.95rem;
  padding: 11px 12px;
  width: 100%;
}

.landing-page-simple .waitlist-input:focus {
  border-color: var(--t1);
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.landing-page-simple .waitlist-consent {
  align-items: center;
  display: flex;
  gap: 8px;
}

.landing-page-simple .consent-label {
  color: var(--t1);
  font-size: 0.85rem;
}

.landing-page-simple .waitlist-btn {
  background: var(--t1);
  border-radius: 5px;
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 600;
  gap: 0;
  min-height: 48px;
  padding: 12px 18px;
  width: 100%;
}

.landing-page-simple .waitlist-btn:hover {
  background: var(--t1);
  color: #ffffff;
  opacity: 0.88;
}

/* Footer */
.landing-page-simple .landing-footer {
  background: none;
  border-top: 1px solid var(--border-h);
  margin-top: 0;
  padding: 28px 0 56px;
}

.landing-page-simple .footer-tagline {
  color: var(--t1);
  font-size: 1rem;
  margin: 0 0 28px;
}

.landing-page-simple .footer-meta {
  align-items: start;
  display: flex;
  flex-wrap: wrap;
  gap: 24px 48px;
  justify-content: space-between;
}

.landing-page-simple .footer-copy {
  color: var(--t1);
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0;
}

.landing-page-simple .footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin: 0;
}

.landing-page-simple .footer-legal a {
  color: var(--t1);
  font-size: 0.9rem;
  text-decoration: underline;
}

/* Error and success states were missed when this page was re-scoped to light
   (SOC-188 review). The base rules at the top of this file mix toward white,
   which was right on the dark landing design and is close to invisible here:
   the success box rendered ~1.9:1 mint-on-mint, and it is the ONLY thing a
   converting visitor sees, because create.turbo_stream.erb replaces the whole
   form with it. Mix toward black instead, and size up from 13px. */
.landing-page-simple .waitlist-errors,
.landing-page-simple .waitlist-success {
  font-size: 14px;
}

.landing-page-simple .waitlist-errors {
  background: #fdecec;
  border-color: color-mix(in srgb, var(--red) 40%, transparent);
  color: color-mix(in srgb, var(--red) 72%, black);
}

.landing-page-simple .field-error {
  color: color-mix(in srgb, var(--red) 72%, black);
  font-size: 13px;
}

.landing-page-simple .waitlist-success {
  background: #e8f7f0;
  border-color: color-mix(in srgb, var(--green) 40%, transparent);
  color: color-mix(in srgb, var(--green) 68%, black);
  max-width: none;
}

/* Mobile. The first attempt used order:-1 here, which put a 279px-tall
   wordmark above the copy and pushed the headline 445px down a 390px
   viewport. The headline leads; the mark follows it, smaller. */
@media (max-width: 820px) {
  /* Under 16px, iOS Safari zooms the page on focus and does not zoom back. */
  .landing-page-simple .waitlist-input,
  .landing-page-simple .waitlist-btn {
    font-size: 16px;
  }

  .landing-page-simple .waitlist-btn {
    min-height: 52px;
  }

  /* The consent box gates the only conversion on the page; 15px is not a
     touch target. */
  .landing-page-simple .waitlist-consent {
    align-items: flex-start;
    gap: 12px;
    min-height: 44px;
  }

  .landing-page-simple .waitlist-checkbox {
    flex: 0 0 auto;
    height: 22px;
    margin: 11px 0;
    width: 22px;
  }

  .landing-page-simple .consent-label {
    font-size: 15px;
    line-height: 1.4;
    padding: 12px 0;
  }

  .landing-page-simple .landing-hero {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding-top: 24px;
  }

  /* .landing-hero sets align-items:start for the desktop grid; in a column
     flexbox that becomes horizontal alignment and shrink-wraps the mark to its
     own width, hugging the left edge. Stretch so it centres in the column. */
  .landing-page-simple .landing-hero {
    align-items: stretch;
  }

  .landing-page-simple .hero-mark {
    order: 1;
    padding: 8px 0 16px;
  }

  .landing-page-simple .hero-mark img {
    max-width: 200px;
  }

  .landing-page-simple .landing-nav {
    padding: 18px 0;
  }
}

@media (max-width: 520px) {
  .waitlist-name-row {
    grid-template-columns: 1fr;
  }

  .landing-page-simple .hero-mark img {
    max-width: 168px;
  }
}