/* Backstage Lite landing page — matches backstagelive.app brand voice
   (warm, seller-centric, mint accent on warm dark + cream surfaces). */

:root {
  --warm-dark: #0C0D10;
  --warm-darker: #07080A;
  --cream: #FCFBF7;
  --cream-soft: #11131A;
  /* Lite IS the mint product — point the legacy --mint var at the
     canonical mint token so the whole /lite page picks it up. */
  --mint: var(--product-lite);
  --mint-deep: #36C588;             /* darker mint for body text on light bg */
  --mint-fill: var(--product-lite-soft);
  --orange: #F2B85E;
  --ink: #F5F2EB;
  --ink-soft: #898A95;
  --border: rgba(245, 242, 235, 0.07);
  --border-dark: rgba(252, 251, 247, 0.1);
  --shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.06);
  --shadow-bold: 0 25px 50px rgba(0, 0, 0, 0.12);
  --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --container: 1100px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}

h1, h2, h3 { font-family: var(--font-serif); font-weight: 500; letter-spacing: -0.005em; margin: 0; }

a { color: var(--mint-deep); text-decoration: none; }
a:hover { color: var(--mint); }

code {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  background: rgba(26, 23, 19, 0.06);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.9em;
}

/* ============================================================================
   TOP NAV
   ============================================================================ */
.topnav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--warm-dark);
  color: var(--cream);
  padding: 14px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-dark);
}
.topnav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--cream);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.01em;
}
.topnav-brand img { display: block; }
.topnav-name { font-family: var(--font-serif); font-weight: 500; font-size: 17px; }
.topnav-tag {
  display: inline-block;
  background: var(--mint);
  color: var(--warm-darker);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 3px;
  letter-spacing: 0.14em;
}
.topnav-links { display: flex; gap: 28px; list-style: none; padding: 0; margin: 0; align-items: center; }
.topnav-links a {
  color: rgba(252, 251, 247, 0.75);
  font-size: 13px;
  letter-spacing: 0.01em;
}
.topnav-links a:hover { color: var(--cream); }
.topnav-live {
  background: var(--mint);
  color: var(--warm-darker) !important;
  padding: 7px 14px;
  border-radius: 6px;
  font-weight: 600;
}
.topnav-live:hover { background: var(--mint-deep); color: var(--warm-darker) !important; }

/* ============================================================================
   HERO
   ============================================================================ */
.hero {
  background: var(--warm-dark);
  color: var(--cream);
  padding: 80px 28px 96px;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 64px;
  align-items: center;
  max-width: var(--container);
  margin: 0 auto;
}
.hero-inner { max-width: 580px; }
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(252, 251, 247, 0.55);
  margin-bottom: 20px;
}
.hero-eyebrow-tag {
  background: var(--mint);
  color: var(--warm-darker);
  padding: 2px 7px;
  border-radius: 3px;
  font-weight: 700;
}
.hero-headline {
  font-size: clamp(40px, 5.5vw, 68px);
  line-height: 1.05;
  margin-bottom: 22px;
}
.hero-headline-accent { color: var(--mint); font-style: italic; font-weight: 400; }
.hero-sub {
  font-size: 17px;
  line-height: 1.6;
  color: rgba(252, 251, 247, 0.78);
  margin-bottom: 32px;
}
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.hero-fineprint {
  font-size: 12px;
  color: rgba(252, 251, 247, 0.45);
  letter-spacing: 0.01em;
}
.hero-art { display: flex; justify-content: center; }
.hero-art img {
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 25px 50px rgba(0, 0, 0, 0.35));
}

/* ============================================================================
   BUTTONS
   ============================================================================ */
.btn-primary, .btn-secondary, .btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 26px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  border: none;
  font-family: inherit;
  transition: transform 0.1s, background 0.15s, color 0.15s;
  text-decoration: none;
}
.btn-primary { background: var(--mint); color: var(--warm-darker) !important; }
.btn-primary:hover { background: var(--mint-deep); transform: translateY(-1px); }
.btn-secondary { background: var(--warm-dark); color: var(--cream) !important; }
.btn-secondary:hover { background: var(--ink); }
.btn-ghost { background: transparent; color: var(--cream) !important; border: 1px solid rgba(252, 251, 247, 0.18); }
.btn-ghost:hover { background: rgba(252, 251, 247, 0.06); }
.btn-block { width: 100%; }

/* ============================================================================
   PAIN POINTS (replaces "WHO IT'S FOR")
   ============================================================================ */
.pain { background: var(--bg2); padding: 88px 28px 96px; }
.pain-inner { max-width: var(--container); margin: 0 auto; }
.section-eyebrow {
  display: inline-block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--mint-deep);
  font-family: var(--font-sans);
  font-weight: 700;
  margin-bottom: 12px;
}
.pain-eyebrow { color: var(--orange); display: block; text-align: center; }
.pain-headline {
  font-size: clamp(26px, 3.2vw, 38px);
  text-align: center;
  margin: 0 auto 48px;
  max-width: 780px;
  line-height: 1.2;
}
.pain-headline em { color: var(--orange); font-style: italic; font-weight: 500; }
.pain-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.pain-card {
  background: var(--bg-card);
  border-radius: 12px;
  padding: 24px 22px;
  border: 1px solid var(--border);
}
.pain-icon { font-size: 28px; margin-bottom: 10px; }
.pain-card h4 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 18px;
  margin: 0 0 8px;
  color: var(--ink);
}
.pain-card p {
  margin: 0;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.55;
}
.pain-close {
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 22px;
  color: var(--mint-deep);
  margin: 48px auto 0;
  max-width: 600px;
}

/* ============================================================================
   PILLARS
   ============================================================================ */
.pillars { padding: 96px 28px; background: var(--bg); }
.pillars-inner { max-width: var(--container); margin: 0 auto; }
.section-title {
  font-size: clamp(28px, 3.4vw, 40px);
  text-align: center;
  margin: 0 auto 48px;
  max-width: 720px;
}
.pillars-lead {
  text-align: center;
  color: var(--ink-soft);
  font-size: 16px;
  margin: -32px auto 48px;
  max-width: 560px;
}
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
/* 5-feature grid: 3-up top row, 2-up wider bottom row (CSS grid lets us
   span the wide ones across columns) */
.pillars-grid-5 {
  grid-template-columns: repeat(6, 1fr);
}
.pillars-grid-5 .pillar-feature { grid-column: span 2; }
.pillars-grid-5 .pillar-feature-wide { grid-column: span 3; }
.pillar-feature-copilot {
  background: linear-gradient(135deg, #fff 0%, rgba(95, 230, 164, 0.07) 100%);
  border-left: 4px solid var(--mint);
}
.pillar-h-accent { color: var(--mint-deep); font-style: italic; font-weight: 500; }
.pillar {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 32px 28px;
  box-shadow: var(--shadow-soft);
}
.pillar-num {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--mint);
  color: var(--warm-darker);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 16px;
}
.pillar h3 {
  font-size: 24px;
  margin-bottom: 8px;
}
.pillar-lead {
  color: var(--ink-soft);
  margin: 0 0 20px;
  font-size: 14.5px;
  line-height: 1.55;
}
.pillar-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
  color: var(--ink);
}
.pillar-list li {
  padding: 8px 0 8px 22px;
  position: relative;
  border-top: 1px solid var(--border);
}
.pillar-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 8px;
  color: var(--mint-deep);
  font-weight: 700;
}

/* ============================================================================
   COMPARE TABLE
   ============================================================================ */
.compare { background: var(--bg2); padding: 96px 28px; }
.compare-inner { max-width: var(--container); margin: 0 auto; }
.compare-lead {
  text-align: center;
  color: var(--ink-soft);
  font-size: 16px;
  margin: -32px 0 36px;
}
.compare-table-wrap {
  background: var(--bg-card);
  border-radius: 14px;
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
}
.compare-table thead th {
  background: var(--warm-dark);
  color: var(--cream);
  font-weight: 600;
  padding: 18px 20px;
  text-align: left;
  font-family: var(--font-sans);
  letter-spacing: 0.01em;
}
.compare-table thead th:first-child { width: 50%; }
.compare-table tbody td {
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  vertical-align: middle;
}
.compare-table tbody td:first-child { color: var(--ink); }
.compare-table .y {
  color: var(--mint-deep);
  font-weight: 600;
  font-family: var(--font-sans);
}
.compare-table .n {
  color: var(--ink-soft);
  font-style: italic;
  font-size: 13.5px;
}
.compare-col-lite { background: rgba(95, 230, 164, 0.08); }
.compare-col-live { background: rgba(95, 230, 164, 0.04); }
/* Per-product column-header tint on the comparison table. */
.compare-table thead th.th-lite   { color: var(--product-lite); }
.compare-table thead th.th-prep   { color: var(--product-prep); }
.compare-table thead th.th-ios    { color: var(--product-ios); }
.compare-table thead th.th-studio { color: var(--product-studio); }
.tag-mini {
  display: inline-block;
  background: var(--mint);
  color: var(--warm-darker);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  margin-left: 4px;
}
.tag-mini.live { background: var(--bg); color: var(--warm-dark); }

/* ============================================================================
   PRICING
   ============================================================================ */
.pricing { background: var(--bg); padding: 96px 28px; }
.pricing-inner { max-width: var(--container); margin: 0 auto; }
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 880px;
  margin: 0 auto;
}
.pricing-grid-3 {
  grid-template-columns: repeat(3, 1fr);
  max-width: 1080px;
}
.price-card-ios {
  background: linear-gradient(180deg, #fff 0%, rgba(95, 230, 164, 0.05) 100%);
  border: 1px solid rgba(95, 230, 164, 0.35);
  position: relative;
}
.price-card-ios::after {
  content: 'Mobile-first';
  position: absolute;
  top: -10px;
  right: 16px;
  background: var(--mint);
  color: var(--warm-darker);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 3px;
}
.tag-ios { background: var(--mint-deep); color: var(--cream); }
.price-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 36px 32px;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
}
.price-card-live {
  background: var(--warm-dark);
  color: var(--cream);
  border: none;
}
.price-card-tag {
  display: inline-block;
  background: var(--mint);
  color: var(--warm-darker);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 4px;
  letter-spacing: 0.14em;
  margin-bottom: 16px;
  align-self: flex-start;
}
.price-card-tag.tag-live { background: var(--bg); color: var(--warm-dark); }
.price-card-name { font-size: 24px; margin-bottom: 8px; }
.price-card-amount {
  margin: 16px 0;
  font-family: var(--font-serif);
}
.price-num {
  font-size: 56px;
  font-weight: 600;
  line-height: 1;
  color: var(--mint-deep);
}
.price-card-live .price-num { color: var(--mint); }
.price-period {
  font-size: 15px;
  color: var(--ink-soft);
  margin-left: 6px;
}
.price-card-live .price-period { color: rgba(252, 251, 247, 0.55); }
.price-card-tagline {
  color: var(--ink-soft);
  font-size: 14px;
  margin: 0 0 24px;
}
.price-card-live .price-card-tagline { color: rgba(252, 251, 247, 0.7); }
.price-features {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  font-size: 14px;
  flex: 1;
}
.price-features li {
  padding: 8px 0 8px 22px;
  position: relative;
  border-top: 1px solid var(--border);
}
.price-card-live .price-features li { border-top: 1px solid var(--border-dark); }
.price-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 8px;
  color: var(--mint-deep);
  font-weight: 700;
}
.price-card-live .price-features li::before { color: var(--mint); }
.price-features li:first-child::before { content: ''; }
.price-features li:first-child {
  font-weight: 600;
  font-style: italic;
  color: var(--ink-soft);
  padding-left: 0;
}
.price-card-live .price-features li:first-child { color: rgba(252, 251, 247, 0.7); }
.pricing-lead {
  text-align: center;
  color: var(--ink-soft);
  font-size: 16px;
  margin: -32px auto 40px;
  max-width: 720px;
}
.price-card-launch {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--mint-deep);
  margin: 0 0 -4px;
}
.price-card-live .price-card-launch { color: var(--mint); }
.price-card-fineprint {
  text-align: center;
  font-size: 12px;
  color: var(--ink-soft);
  margin: 16px 0 0;
  letter-spacing: 0.02em;
  line-height: 1.45;
}
.price-card-live .price-card-fineprint { color: rgba(252, 251, 247, 0.5); }

/* ─── Per-product accents on pricing cards ────────────────────────────────────
   Each .price-card-<product> sets --card-accent and the price tag, big number,
   launch label, and checkmarks all read from it. Same swatches the product
   cards on the homepage use so the colors are coherent across the site. */

.price-card-lite   { --card-accent: #5FE6A4; }   /* mint   */
.price-card-prep   { --card-accent: #E8856B; }   /* coral  */
.price-card-ios    { --card-accent: #7B8DFF; }   /* indigo */
.price-card-studio { --card-accent: #F2B85E; }   /* amber  */

/* Studio keeps the dark "premium" treatment — port the legacy
   .price-card-live styling to the new class. */
.price-card-studio {
  background: var(--warm-dark);
  color: var(--cream);
  border: none;
}
.price-card-studio .price-period       { color: rgba(252, 251, 247, 0.55); }
.price-card-studio .price-card-tagline { color: rgba(252, 251, 247, 0.7); }
.price-card-studio .price-features li  { border-top: 1px solid var(--border-dark); }
.price-card-studio .price-features li:first-child { color: rgba(252, 251, 247, 0.7); }
.price-card-studio .price-card-fineprint { color: rgba(252, 251, 247, 0.5); }

/* iOS card keeps its "Mobile-first" hat — recolor to its own accent. */
.price-card-ios::after { background: var(--card-accent); color: var(--warm-darker); }

/* Tag pill — each card's own accent as background. */
.price-card-lite .price-card-tag,
.price-card-prep .price-card-tag,
.price-card-ios .price-card-tag,
.price-card-studio .price-card-tag {
  background: var(--card-accent);
  color: var(--warm-darker);
}

/* Big price number + launch label. */
.price-card-lite .price-num,
.price-card-prep .price-num,
.price-card-ios .price-num,
.price-card-studio .price-num,
.price-card-lite .price-card-launch,
.price-card-prep .price-card-launch,
.price-card-ios .price-card-launch,
.price-card-studio .price-card-launch {
  color: var(--card-accent);
}

/* Feature-list checkmarks. */
.price-card-lite .price-features li::before,
.price-card-prep .price-features li::before,
.price-card-ios .price-features li::before,
.price-card-studio .price-features li::before {
  color: var(--card-accent);
}

/* Subtle product-tinted top border so each card reads as its own thing
   even without scrolling to the bullets. */
.price-card-lite,
.price-card-prep,
.price-card-ios {
  border-top: 3px solid var(--card-accent);
}
.price-card-studio {
  border-top: 3px solid var(--card-accent);
}

.pricing-fineprint {
  text-align: center;
  color: var(--ink-soft);
  font-size: 13.5px;
  margin: 40px auto 0;
  max-width: 620px;
  line-height: 1.55;
}
.pricing-fineprint strong { color: var(--mint-deep); }

/* ============================================================================
   INSTALL STEPS
   ============================================================================ */
.install { background: var(--bg2); padding: 96px 28px; }
.install-inner { max-width: 760px; margin: 0 auto; }
.install-lead {
  text-align: center;
  color: var(--ink-soft);
  font-size: 15px;
  margin: -32px auto 48px;
  max-width: 600px;
  line-height: 1.6;
}
.install-steps { list-style: none; padding: 0; margin: 0; counter-reset: step; }
.install-steps li {
  display: flex;
  gap: 20px;
  padding: 28px 0;
  border-top: 1px solid var(--border);
}
.install-steps li:first-child { border-top: none; }
.install-step-num {
  flex: 0 0 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--mint);
  color: var(--warm-darker);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 20px;
}
.install-steps h3 {
  font-size: 20px;
  margin: 4px 0 8px;
}
.install-steps p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.6;
}
.link-prominent {
  font-weight: 600;
  border-bottom: 2px solid var(--mint);
  padding-bottom: 1px;
}

/* ============================================================================
   REQUEST FORM (inside install section) — replaces the old standalone
   EARLY ACCESS section
   ============================================================================ */
.request-form-wrap {
  margin: 64px auto 0;
  max-width: 580px;
  background: var(--warm-dark);
  color: var(--cream);
  padding: 36px;
  border-radius: 14px;
  box-shadow: var(--shadow-bold);
}
.request-form-title {
  font-size: 22px;
  text-align: center;
  margin: 0 0 8px;
  color: var(--cream);
}
.request-form-lead {
  text-align: center;
  color: rgba(252, 251, 247, 0.7);
  font-size: 14.5px;
  margin: 0 0 24px;
}
.request-success {
  text-align: center;
  padding: 24px 16px 8px;
}
.request-success-icon {
  font-size: 40px;
  margin-bottom: 12px;
}
.request-success h4 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 22px;
  color: var(--mint);
  margin: 0 0 12px;
}
.request-success p {
  margin: 0;
  color: rgba(252, 251, 247, 0.8);
  font-size: 14.5px;
  line-height: 1.6;
}
.request-error {
  margin-top: 12px;
  padding: 12px 16px;
  background: rgba(214, 61, 61, 0.12);
  color: #ffc4c4;
  border-radius: 8px;
  font-size: 13px;
  text-align: center;
}
.request-error a { color: var(--mint); text-decoration: underline; }

/* Form layout (kept) */
.early-access-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  text-align: left;
}
.ea-field { display: flex; flex-direction: column; gap: 6px; }
.ea-field-wide { grid-column: 1 / -1; }
.ea-field span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(252, 251, 247, 0.55);
}
.ea-field input {
  background: rgba(252, 251, 247, 0.06);
  border: 1px solid rgba(252, 251, 247, 0.15);
  color: var(--cream);
  padding: 12px 16px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 15px;
}
.ea-field input:focus {
  outline: none;
  border-color: var(--mint);
  background: rgba(95, 230, 164, 0.08);
}
.early-access-form button { grid-column: 1 / -1; margin-top: 8px; }

/* ============================================================================
   FAQ
   ============================================================================ */
.faq { padding: 96px 28px; background: var(--bg); }
.faq-inner { max-width: 760px; margin: 0 auto; }
.faq details {
  border-bottom: 1px solid var(--border);
  padding: 20px 0;
}
.faq summary {
  font-size: 17px;
  font-weight: 600;
  font-family: var(--font-serif);
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 36px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  position: absolute;
  right: 8px;
  top: 0;
  font-size: 22px;
  color: var(--mint-deep);
  font-weight: 400;
}
.faq details[open] summary::after { content: '−'; }
.faq details p {
  margin: 12px 0 0;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.6;
}

/* ============================================================================
   FOOTER
   ============================================================================ */
.footer { background: var(--warm-darker); color: rgba(252, 251, 247, 0.6); padding: 48px 28px; }
.footer-inner {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--cream);
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 500;
}
.footer-tag {
  background: var(--mint);
  color: var(--warm-darker);
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 3px;
  letter-spacing: 0.14em;
}
.footer-nav { display: flex; gap: 24px; font-size: 14px; }
.footer-nav a { color: rgba(252, 251, 247, 0.7); }
.footer-nav a:hover { color: var(--cream); }
.footer-tiny {
  flex: 1 1 100%;
  text-align: center;
  font-size: 12px;
  margin: 24px 0 0;
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 880px) {
  .hero { grid-template-columns: 1fr; gap: 40px; padding: 56px 24px 72px; text-align: center; }
  .hero-inner { max-width: none; }
  .hero-cta { justify-content: center; }
  .hero-art { order: -1; }
  .hero-art img { max-width: 280px; }

  .topnav { padding: 12px 16px; }
  .topnav-links { display: none; }

  .pillars-grid { grid-template-columns: 1fr; gap: 16px; }
  .pillars-grid-5 { grid-template-columns: 1fr; }
  .pillars-grid-5 .pillar-feature,
  .pillars-grid-5 .pillar-feature-wide { grid-column: span 1; }
  .pain-grid { grid-template-columns: 1fr 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }
  .pricing-grid-3 { grid-template-columns: 1fr; }
  .price-card-ios::after { right: auto; left: 50%; transform: translateX(-50%); }

  .compare-table { font-size: 13px; }
  .compare-table thead th, .compare-table tbody td { padding: 10px 12px; }

  .early-access-form { grid-template-columns: 1fr; }
}