/* =========================================================================
   Fan Data Strategy e-book landing — production layout + responsive layer
   Loaded AFTER landing.css. Two jobs:
     1) Turn the fixed 1440×920 "artboard" model into a real page that grows
        with content (no clipping on short viewports).
     2) Add the mobile/tablet layout the prototype never had (zero @media).
   Variant-scoped rules here also replace inline styles from the prototype so
   they can be overridden at small breakpoints.
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--gl-ink); font-family: var(--gl-sans); }
img { display: block; max-width: 100%; }

/* ── Artboard → flowing page ───────────────────────────────────────────── */
.lp {
  height: auto;
  min-height: 100vh;
}
.lp-split {
  position: static;
  inset: auto;
  margin: 64px;
  min-height: calc(100vh - 128px);
}

/* Form column: kill the default .col padding (prototype used inline padding:0) */
.lp-split > .col.col-form { padding: 0; }

/* ── Variant-scoped styles (lifted off prototype inline styles) ────────── */
/* V2 — left "paper" column with the e-book cover */
.lp-v2 .lp-split > .col.col-paper {
  background: var(--gl-paper);
  padding-left: 64px;
}
.lp-v2 .lp-headline { margin-top: 20px; font-size: 50px; }
.lp-v2 .lp-lede     { margin-top: 16px; max-width: 38ch; }

/* ── Large-desktop guard: ease headline on mid screens so it never clips ─ */
@media (max-width: 1200px) {
  .lp-headline       { font-size: 52px; }
  .lp-v2 .lp-headline { font-size: 44px; }
}

@media (max-width: 1024px) {
  .lp-split { margin: 48px; min-height: calc(100vh - 96px); }
  .lp-split > .col { padding: 30px 36px 24px 36px; }
  .lp-v2 .lp-split > .col.col-paper { padding-left: 40px; }
  .lp-headline       { font-size: 46px; }
  .lp-v2 .lp-headline { font-size: 40px; }
  .lp-lede { font-size: 16px; }
}

/* ── Mobile / single column ────────────────────────────────────────────── */
@media (max-width: 820px) {
  /* Drop the editorial frame chrome; keep only the language toggle */
  .lp-frame { display: none; }

  .lp { min-height: 0; }

  .lp-split,
  .lp-split.flip {
    margin: 0;
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .lp-split > .col { padding: 76px 22px 34px 22px; }
  .lp-split > .col + .col {
    border-left: 0;
    border-top: 0.5px solid var(--gl-border);
    padding-top: 0;
  }
  .lp.dark .lp-split > .col + .col { border-top-color: var(--gl-border-light); }
  .lp-v2 .lp-split > .col.col-paper { padding-left: 22px; }

  .lp-headline,
  .lp-v2 .lp-headline { font-size: clamp(34px, 9vw, 50px); margin-top: 18px; }
  .lp-lede,
  .lp-v2 .lp-lede { font-size: 15.5px; margin-top: 18px; max-width: none; }

  /* Decorative bits scale down / hide */
  .lp-rail { display: none; }
  .lp-ink-circle { width: 200px; height: 200px; right: -72px; top: -72px; }

  /* Meta strip + credentials reflow */
  .lp-meta-strip { margin-top: 22px; }
  .lp-meta-strip .num { font-size: 22px; }
  .lp-credentials { padding-top: 18px; }
  .lp-credentials ul { grid-template-columns: 1fr; }
  .lp-credentials li:nth-child(2n) { padding-left: 0; }

  /* Form column */
  .lp-split > .col.col-form { padding: 0; }
  .lp-form-card { height: auto; border-left-width: 5px; padding: 30px 24px 30px 24px; }
  .lp-form-title { font-size: 26px; }
  .lp-row-2 { grid-template-columns: 1fr; gap: 14px; }
  .lp-submit-row { flex-direction: column; align-items: stretch; gap: 12px; }
  .lp-submit { justify-content: center; }
  .lp-fineprint { text-align: center; }

  /* V2 cover mock */
  .lp-cover-art { margin-top: 24px; min-height: 360px; }
  .lp-cover-mock { width: 86%; max-width: 320px; transform: rotate(-1.2deg); }
  .lp-cover-mock h2 { font-size: 36px; }
  .lp-cover-mock .pop-circle { width: 92px; height: 92px; font-size: 18px; top: -18px; right: -14px; }
  .lp-cover-art .bg-stamp { display: none; }

  /* V3 pull quote */
  .lp-pull { font-size: 19px; }
}

@media (max-width: 420px) {
  .lp-split > .col { padding: 70px 18px 30px 18px; }
  .lp-meta-strip { grid-template-columns: 1fr; }
  .lp-meta-strip .cell { border-right: 0; border-bottom: 0.5px solid var(--gl-border); padding: 10px 0; }
  .lp.dark .lp-meta-strip .cell { border-bottom-color: var(--gl-border-light); }
  .lp-meta-strip .cell:last-child { border-bottom: 0; }
}

/* ── Reduced motion ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}