/* Landing page (/ai-for-dealerships/) — page-specific styles layered on top
   of style.css. Everything here is prefixed lp- so the shared stylesheet
   stays untouched. */

/* ── EYEBROWS ──
   Every eyebrow on this page shares one type spec: .section-label's, which
   the six plain section labels already use. The rest had drifted to their
   own sizes, weights and tracking, so they're pulled in here rather than
   restating type in each rule. Colour and spacing stay per-context. */
.lp-hero .hero-badge,
.lp-ai60 .ai60-section-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* ── NAV ──
   .nav-cta is shared with the homepage (style.css), but this stylesheet only
   loads on this page, so the pulse stays scoped here without needing a
   landing-only class. Paused on hover so it doesn't fight the hover
   transition already defined in style.css. */
.nav-cta {
  animation: lp-nav-cta-pulse 2.4s ease-in-out infinite;
}
.nav-cta:hover {
  animation-play-state: paused;
}
@keyframes lp-nav-cta-pulse {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--crimson) 55%, transparent);
  }
  50% {
    transform: scale(1.045);
    box-shadow: 0 0 0 10px color-mix(in srgb, var(--crimson) 0%, transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  .nav-cta {
    animation: none;
  }
}

/* ── HERO ── */
.lp-hero {
  position: relative;
  font-family: var(--ff-inter);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: radial-gradient(
    309.43% 309.43% at 50% 19.93%,
    #000000 7.02%,
    var(--crimson) 100%
  );
  overflow: hidden;
  /* Bottom padding is the breathing room below the ticker strip, before the
     next section starts. */
  padding: 8rem 0 3rem;
}
/* Wraps the copy+illustration row and the stats row below it. flex: 1 lets
   this fill the hero's full-screen height, centered in that space, so the
   ticker bar (outside this wrapper) sits pinned at the bottom. */
.lp-hero-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3.5rem;
  max-width: 1140px;
  margin: 0 auto;
  width: 100%;
  padding: 0 2rem;
}
/* Copy on the left, illustration on the right. */
.lp-hero-inner {
  display: grid;
  /* grid-template-columns: 1.15fr 0.85fr; */
  gap: 3rem;
  align-items: center;
}
/* Empty on purpose — reserves this grid column's width so the copy doesn't
   stretch under the image. The <img> itself is positioned absolutely
   against .lp-hero (its nearest positioned ancestor — deliberately NOT this
   div, which has no position of its own) so it can run bigger than this
   column and bleed to the true right edge of the screen, matching the
   reference. */
.lp-hero-illustration-img {
  position: absolute;
  /* Aligned toward the copy row rather than dead-centered on the full
     hero — the stats row sits below that, and a wide image centered on
     the whole section can grow tall enough to overlap it. */
  top: 42%;
  right: 0;
  transform: translateY(-50%);
  width: 40vw;
  min-width: 420px;
  max-width: 720px;
  max-height: 46vh;
  height: auto;
  pointer-events: none;
}
/* style.css's .hero-badge text is theme-crimson (#99004c), which is too dark
   to read against the near-black hero — lighten it here (the main page
   doesn't use the badge, so this stays page-local). */
.lp-hero .hero-badge {
  color: var(--crimson);
  margin-bottom: 1.2rem;
}

.lp-hero-title {
  font-size: clamp(1.9rem, 5vw, 6rem);
  font-weight: 800;
  line-height: 1.12;
  color: var(--white);
  margin-bottom: 1.2rem;
}
.lp-hero-sub {
  font-size: 1rem;
  line-height: 1.8;
  color: #828282;
  max-width: 520px;
}
.lp-hero-sub strong {
  font-weight: 800;
}
.lp-hero-ai60 {
  margin-top: 1.2rem;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.6);
}
.lp-hero-ai60-link {
  color: var(--crimson-light);
  font-weight: 700;
  text-decoration: none;
}
.lp-hero-ai60-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Stats row — full-width, spanning beneath the copy+illustration row. */
.lp-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.5rem 2rem;
}
.lp-stats .hero-stat {
  text-align: center;
  flex: 1 1 160px;
}
.lp-stats .hero-stat .label {
  /* max-width: 220px; */
}
/* ── TICKER BAR ── */
.lp-hero-ticker {
  position: relative;
  width: 100%;
  padding: 0.2rem 0;
  border-top: 1px solid #82828278;
  border-bottom: 1px solid #82828278;
  background: rgba(255, 255, 255, 0.02);
  overflow: hidden;
}
/* Four copies of .lp-hero-ticker-text sit side by side; scrolling exactly
   one copy-width (1/4 of the track) loops seamlessly back to the start.
   Four rather than two so the track stays wider than the viewport on large
   monitors — otherwise the loop would visibly gap before restarting. */
.lp-hero-ticker-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: lp-ticker-scroll 24s linear infinite;
}
.lp-hero-ticker:hover .lp-hero-ticker-track {
  animation-play-state: paused;
}
@keyframes lp-ticker-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-25%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .lp-hero-ticker-track {
    animation: none;
  }
}
.lp-hero-ticker-text {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: 0.4rem 0.7rem;
  padding: 0rem 2rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.lp-hero-ticker-text strong {
  color: var(--crimson-light);
  font-weight: 800;
}
.lp-hero-ticker-sep {
  color: var(--crimson-light);
  font-size: 1.2rem;
  margin: 0 1rem;
}
.lp-hero-ticker-cta {
  color: var(--crimson-light);
  font-weight: 800;
  text-decoration: none;
}
.lp-hero-ticker-cta:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lp-hero-ticker-arrow {
  display: inline-block;
  font-size: 1.2rem;
    margin-bottom: 2px;
  /* Default baseline alignment on an inline-block taller than the
     surrounding text inflates the link's line height and pushes it
     visibly out of line with the rest of the ticker text. */
  vertical-align: middle;
  animation: lp-ticker-arrow-nudge 1.4s ease-in-out infinite;
}
@keyframes lp-ticker-arrow-nudge {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(4px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .lp-hero-ticker-arrow {
    animation: none;
  }
}

/* ── LEAD FORM DIALOG ──
   The card is only ever rendered inside this dialog now, so the modal shell
   owns sizing and the card keeps the visual treatment it had in the hero. */
.lp-modal {
  /* style.css's `* { margin: 0 }` beats the UA's `dialog:modal { margin: auto }`,
     which is what centres a modal dialog — restate it here. */
  margin: auto;
  width: min(540px, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  padding: 0;
  border: none;
  background: transparent;
  /* Long content (short landscape viewports) scrolls the dialog rather than
     the card, so the card keeps its clipped corners and crimson top strip. */
  overflow-y: auto;
  font-family: var(--ff-inter);
}
/* Belt and braces for browsers that don't implement <dialog> — without this
   the closed dialog renders as a plain block at the foot of the page. */
.lp-modal:not([open]) {
  display: none;
}
.lp-modal::backdrop {
  /* Same radial gradient as .lp-hero, so the backdrop reads as a
     continuation of the hero rather than a plain scrim. */
  background: radial-gradient(
    309.43% 309.43% at 50% 19.93%,
    #000000 7.02%,
    var(--crimson) 100%
  );
  backdrop-filter: blur(6px);
}
.lp-modal[open] {
  animation: lp-modal-in 0.25s ease-out;
}
@keyframes lp-modal-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lp-modal[open] {
    animation: none;
  }
}
/* Close button — sits on the crimson strip capping the card */
.lp-modal-close {
  position: absolute;
  top: 0.85rem;
  right: 0.9rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  cursor: pointer;
  transition:
    background 0.2s,
    color 0.2s;
}
.lp-modal-close:hover {
  background: var(--white);
  color: var(--crimson);
}

/* ── LEAD FORM CARD ── */
.lp-form-card {
  position: relative;
  /* Opaque now that the card floats over the page rather than over the hero
     gradient it used to be transparent against. */
  background: #4f4f4f38;
  border: #FFFEFEAD  1px solid;
  border-radius: 20px;
  padding: 2.6rem 2.2rem 2.4rem;
  overflow: hidden;
  border-top: transparent;
}
/* Crimson strip capping the top edge of the card */
.lp-form-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 11px;
  background: var(--crimson);
}
.lp-form-card h2 {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--white);
  text-align: center;
  margin-bottom: 0.6rem;
}
.lp-modal-subtitle {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--white);
  text-align: center;
  margin-bottom: 1.2rem;
}
.lp-modal-highlight {
  color: var(--crimson-light);
}
.lp-form-intro {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.6;
  text-align: center;
  margin-bottom: 1.6rem;
}
.lp-modal-tagline {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--white);
  text-align: center;
  margin-bottom: 2.2rem;
}
.lp-field {
  margin-bottom: 2.2rem;
}
/* The reference design shows placeholders only — labels stay in the markup
   for screen readers but are taken out of the visual flow. */
.lp-field label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.lp-input {
  width: 100%;
  padding: 0.55rem 0.15rem;
  font: inherit;
  font-size: 0.98rem;
  color: var(--white);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--crimson);
  border-radius: 0;
  transition: border-color 0.2s;
}
.lp-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
  opacity: 1;
}
.lp-input:focus {
  outline: none;
  border-bottom-color: var(--crimson-light);
}
/* Chrome paints autofilled fields with an opaque light background, which
   would break the transparent input against the dark card. */
.lp-input:-webkit-autofill,
.lp-input:-webkit-autofill:hover,
.lp-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--white);
  transition: background-color 9999s ease-in-out 0s;
}
.lp-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 0.5rem;
  margin-top: 0.8rem;
  padding: 1.05rem 2rem;
  border: none;
  border-radius: 16px;
  background: var(--crimson);
  color: var(--white);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition:
    background 0.2s,
    transform 0.2s,
    box-shadow 0.2s;
}
.lp-submit:hover {
  background: var(--crimson-light);
  transform: translateY(-1px);
  box-shadow: 0 8px 25px color-mix(in srgb, var(--crimson) 30%, transparent);
}
.lp-submit:disabled {
  opacity: 0.6;
  cursor: wait;
  transform: none;
  box-shadow: none;
}
.lp-form-privacy {
  margin-top: 1.4rem;
  font-size: 0.75rem;
  line-height: 1.6;
  text-align: center;
  color: rgba(255, 255, 255, 0.45);
}
.lp-form-privacy a {
  color: var(--crimson-light);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.lp-form-error {
  margin: 0 0 0.9rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: #ff8a80;
}
.lp-form-error a {
  color: inherit;
  font-weight: 600;
}
.lp-form-error[hidden] {
  display: none;
}
/* Honeypot — parked off-screen, not display:none, so naive bots still fill it */
.lp-hp {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
/* Success state */
.lp-form-success {
  text-align: center;
}
.lp-form-success[hidden] {
  display: none;
}
.lp-success-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--crimson);
  color: var(--white);
  margin-bottom: 1rem;
}
.lp-form-success h3 {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 0.4rem;
}
.lp-form-success p {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.7;
}
.lp-success-upsell {
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.lp-success-upsell a {
  color: var(--crimson-light);
  font-weight: 700;
  text-decoration: none;
  /* Keep the whole phrase together — letting it break mid-sentence leaves
     an orphaned "session →" dangling alone on its own line. */
  white-space: nowrap;
}
.lp-success-upsell a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── BRIEFING BENEFITS ── */
.lp-benefits-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  margin-top: 2.5rem;
}
.lp-briefing-cta {
  margin-top: 2.2rem;
  font-size: 1rem;
}
.lp-briefing-cta a {
  color: var(--crimson);
  font-weight: 700;
  text-decoration: none;
}
.lp-briefing-cta a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── PROOF / CREDIBILITY ──
   The .lp-proof section and the whole .lp-testimonial-* block now live in
   style.css: the homepage runs the same testimonial, so it's shared rather
   than page-specific. Only the landing-only copy below stays here. */

/* ── THE COLLECTIVE (cream) ── */
.lp-proof-text {
  max-width: 720px;
  font-size: 0.98rem;
  line-height: 1.85;
  color: var(--charcoal);
}
/* Gap between the two lp-proof-text paragraphs in The Collective section */
.lp-proof-text + .lp-proof-text {
  margin-top: 1.2rem;
}
.lp-proof-text a {
  color: var(--crimson);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lp-creds {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.6rem;
}
.lp-cred {
  display: inline-block;
  padding: 0.3rem 0.85rem;
  border-radius: 100px;
  background: color-mix(in srgb, var(--crimson) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--crimson) 18%, transparent);
  color: var(--crimson);
  font-size: 0.75rem;
  font-weight: 600;
}
.lp-problem-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
  max-width: 820px;
}
.lp-problem-stat {
  padding: 1.5rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.lp-problem-stat .num {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--crimson);
  line-height: 1.2;
}
.lp-problem-stat .label {
  margin-top: 0.3rem;
  font-size: 0.8rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.5);
}
.lp-proof-close {
  margin-top: 2rem;
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.85);
}

/* ── AI60 / CUSTOMIZED REPORT ── */
/* Wider chip so "CUSTOMIZED REPORT" fits before the angled tail */
.lp-entry-wide {
  width: 310px;
}
.lp-ai60 .ai60-lead em {
  font-style: italic;
  color: inherit;
}
.lp-ai60 .ai60-hero-inner {
  grid-template-columns: 1.2fr 0.8fr;
}
.lp-ai60 .ai60-title,
.lp-ai60 .ai60-lead {
  max-width: none;
}

.lp-ai60 .ai60-title {
  font-size: 48px;
}
/* ── THE QUESTION + OPPORTUNITY MAP ── */
.lp-question {
  position: relative;
  background: #0d0d0d;
  color: var(--white);
  overflow: hidden;
}
.lp-question::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 50% 0%,
    color-mix(in srgb, var(--crimson) 14%, transparent) 0%,
    transparent 60%
  );
}
.lp-question .container {
  position: relative;
}
.lp-question .section-label {
  color: var(--crimson-light);
}
.lp-question .section-title {
  color: var(--white);
  max-width: 720px;
}
.lp-question .section-subtitle {
  color: rgba(255, 255, 255, 0.6);
}
.lp-noise {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.6rem 0 1.8rem;
}
.lp-noise span {
  display: inline-block;
  padding: 0.3rem 0.85rem;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.78rem;
  font-weight: 600;
}
.lp-map {
  position: relative;
  max-width: 1100px;
  /* margin: 3.5rem auto 0; */
}
.lp-map svg {
  display: block;
  width: 100%;
  height: auto;
}
.lp-map-node {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.32rem 0.8rem;
  border-radius: 100px;
  background: rgba(13, 13, 13, 0.72);
  border: 1px solid color-mix(in srgb, var(--crimson-light) 35%, transparent);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  backdrop-filter: blur(3px);
}
.lp-map-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--crimson-light);
  flex-shrink: 0;
  animation: lp-pulse 3.2s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
@keyframes lp-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0
      color-mix(in srgb, var(--crimson-light) 45%, transparent);
    opacity: 0.75;
  }
  50% {
    box-shadow: 0 0 16px 6px
      color-mix(in srgb, var(--crimson-light) 28%, transparent);
    opacity: 1;
  }
}
.lp-svg-glow {
  opacity: 0.25;
  animation: lp-pulse-o 3.2s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
@keyframes lp-pulse-o {
  0%,
  100% {
    opacity: 0.15;
  }
  50% {
    opacity: 0.5;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lp-map-dot,
  .lp-svg-glow {
    animation: none;
  }
  .lp-svg-glow {
    opacity: 0.35;
  }
}
.lp-map-caption {
  margin-top: 2.2rem;
  text-align: center;
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  color: rgba(255, 255, 255, 0.85);
}
.lp-map-cta {
  margin-top: 1.6rem;
  text-align: center;
  font-size: 1rem;
}
.lp-map-cta a {
  color: var(--crimson-light);
  font-weight: 700;
  text-decoration: none;
}
.lp-map-cta a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── WHO WE ARE ── */
.lp-founders-text {
  max-width: 720px;
  margin-top: 2rem;
  font-size: 1.02rem;
  line-height: 1.9;
  color: #555;
}

/* ── EBOOK CONTENTS ── */
.lp-ebook-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 3rem;
  align-items: center;
  margin-top: 2.5rem;
}
.lp-ebook-cover {
  position: relative;
  /* Matches cover.png's native 2481x3507 so object-fit: cover never crops
     the artwork. */
  aspect-ratio: 2481 / 3507;
  width: 100%;
  max-width: 320px;
  justify-self: center;
  border-radius: 6px 14px 14px 6px;
  overflow: hidden;
  box-shadow: 0 30px 70px -25px rgba(0, 0, 0, 0.55);
}
.lp-ebook-cover-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lp-ebook-list-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 1.1rem;
}
.lp-ebook-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 0;
  margin: 0;
}
.lp-ebook-list li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--charcoal);
}
.lp-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--crimson);
  color: var(--white);
  flex-shrink: 0;
}
.lp-ebook-note {
  margin-top: 1.4rem;
  max-width: 480px;
  font-style: italic;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--muted);
}

/* Breathing room between the step cards' notched tails and the next label */
.lp-ai60 .ai60-steps {
  margin-bottom: 4rem;
}

/* ── FINAL CTA ── */
.lp-final-alt {
  margin-top: 2rem;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.55);
}
.lp-final-alt a {
  color: var(--white);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lp-final-alt a:hover {
  color: var(--crimson-light);
}

/* ── RESPONSIVE ── */
/* Short viewports (landscape phones) — tighten the dialog card so the submit
   button needs as little scrolling as possible. */
@media (max-height: 640px) {
  .lp-form-card {
    padding: 2rem 1.8rem 1.6rem;
  }
  .lp-form-intro {
    margin-bottom: 1.4rem;
  }
  .lp-field {
    margin-bottom: 1.4rem;
  }
}
@media (max-width: 900px) {
  /* This page's nav only ever has one CTA link, so there's nothing to put
     behind a hamburger — keep it showing directly instead of style.css's
     off-canvas slide-in menu. */
  .mobile-toggle {
    display: none;
  }
  .nav-links {
    position: static;
    height: auto;
    width: auto;
    flex-direction: row;
    padding: 0;
    background: none;
    backdrop-filter: none;
    box-shadow: none;
    transform: none;
    transition: none;
  }
  .nav-links a {
    width: auto;
  }
  .nav-cta {
    width: auto !important;
    padding: 0.45rem 0.9rem !important;
    font-size: 0.72rem;
  }
  .menu-backdrop {
    display: none !important;
  }
  .lp-hero {
    padding-top: 7rem;
  }
  .lp-hero-content {
    gap: 2.5rem;
    padding: 0 1.5rem;
  }
  .lp-hero-inner {
    grid-template-columns: 1fr;
  }
  /* Decorative and full-screen-tall enough already without it on mobile */
  .lp-hero-illustration {
    display: none;
  }
  .lp-benefits-grid {
    grid-template-columns: 1fr;
  }
  .lp-problem-stats {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .lp-map-node {
    gap: 0.35rem;
    padding: 0.26rem 0.6rem;
    font-size: 0.68rem;
  }
  .lp-ebook-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}
@media (max-width: 600px) {
  .lp-hero {
    padding-top: 6.5rem;
  }
  .lp-hero-content {
    padding: 0 1.2rem;
  }
  .lp-form-card {
    padding: 2.2rem 1.5rem 1.8rem;
  }
  .lp-hero-ticker-text {
    padding: 0.9rem 1.2rem;
  }
  /* Three plain-text columns get cramped under ~380px — stack instead. */
  .lp-stats {
    flex-direction: column;
    gap: 1.5rem;
  }
  /* The fixed-width entry chip + AI60 wordmark can't fit side by side on
     narrow phones — let the eyebrow wrap instead of overflowing the page */
  .lp-ai60 .ai60-eyebrow {
    flex-wrap: wrap;
    gap: 15px;
  }
  /* Legend mode: chips reflow into a wrapping row below the drawing */
  .lp-map-nodes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.4rem;
  }
  .lp-map-node {
    position: static;
    transform: none;
  }
  .lp-map-caption {
    margin-top: 1.6rem;
  }
  .lp-noise {
    gap: 0.4rem;
  }
}