/* RoyaltyLens — mobile responsive overrides.
   Loaded LAST so it overrides landing.css / landing-v3.css / landing-v4.css.
   Desktop design (≥ 1024px) is untouched. */

/* ═══════════════════════════════════════════════════════════════════
   Below the design width: release the fixed 1280px page so the
   layout actually fits inside any narrower viewport.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1280px) {
  .rl-page,
  .v4-1 {
    width: 100% !important;
    max-width: 1280px;
  }
  .v4-d1-full {
    max-width: 1280px;
    width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   Tablet (≤ 960px) — shrink horizontal padding, tighten typography.
   Hero still 2-up but with smaller gap.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 960px) {
  .v4-1 .v4-nav { padding: 18px 28px; gap: 18px; }
  .v4-1 .v4-hero { padding: 48px 28px 40px; gap: 32px; }
  .v4-1 .v4-h1 { font-size: 44px; }
  .v4-1 .v4-sub { font-size: 16px; }

  .rl-nav,
  .rl-cta { padding-left: 28px; padding-right: 28px; }
  .rl-section-head,
  .rl-feat-grid,
  .rl-how-track,
  .rl-built-grid,
  .rl-trust-grid { margin-left: 28px; margin-right: 28px; }

  .rl-h1 { font-size: 44px; }
  .rl-h2 { font-size: 30px; }
}

/* ═══════════════════════════════════════════════════════════════════
   Mobile (≤ 768px) — stack everything into a single column.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ─── V4 NAV (top of page) ────────────────────────────────────── */
  .v4-1 .v4-nav {
    padding: 14px 18px;
    gap: 12px;
    flex-wrap: wrap;
  }
  .v4-1 .v4-nav-links { display: none; }   /* hide the link row on phones */
  .v4-1 .v4-nav-right {
    margin-left: auto;
    gap: 10px;
    align-items: center;
  }
  .v4-1 .v4-signin { font-size: 13px; }
  .v4-1 .v4-cta {
    padding: 8px 12px;
    font-size: 12.5px;
  }
  .v4-1 .v4-logo { font-size: 16px; }

  /* ─── V4 HERO ─────────────────────────────────────────────────── */
  .v4-1 .v4-hero {
    grid-template-columns: 1fr !important;
    gap: 32px;
    padding: 36px 20px 20px;
    align-items: start;
  }
  .v4-1 .v4-eyebrow {
    font-size: 10.5px;
    margin-bottom: 14px;
  }
  .v4-1 .v4-h1 {
    font-size: 36px;
    line-height: 1.05;
    letter-spacing: -0.025em;
    margin-bottom: 18px;
  }
  .v4-1 .v4-h1 br { display: none; }       /* let it wrap naturally */
  .v4-1 .v4-sub {
    font-size: 15.5px;
    margin-bottom: 22px;
    max-width: none;
  }
  .v4-1 .v4-cta-row {
    flex-wrap: wrap;
    gap: 10px;
  }
  .v4-1 .v4-cta-lg,
  .v4-1 .v4-ghost {
    padding: 11px 16px;
    font-size: 13.5px;
  }
  .v4-1 .v4-meta {
    margin-top: 18px;
    font-size: 11px;
  }

  /* ─── DASHBOARD HERO MOCK ─────────────────────────────────────────
     The mock has dense internal grids designed for ~700px width.
     Instead of breaking its layout, we render it at its natural
     width and scale the whole thing down to fit the viewport.
     ────────────────────────────────────────────────────────────── */
  .rlv3-host .rl-hero-visual {
    width: 100%;
    position: relative;
    overflow: hidden;
    /* Reserve scaled height so subsequent sections aren't overlapped.
       Dashboard is ~720w × ~660h → ratio ≈ 0.92 */
    height: calc((100vw - 40px) * 0.95);
  }
  .rlv3-host .rlv3-dash {
    width: 720px;
    transform-origin: top left;
    transform: scale(calc((100vw - 40px) / 720));
  }

  /* ─── SHARED SECTION CHROME ───────────────────────────────────── */
  .rl-section-head {
    padding: 0 20px;
    margin-bottom: 24px;
  }
  .rl-h2 {
    font-size: 26px;
    line-height: 1.15;
  }
  .rl-eyebrow {
    font-size: 11px;
    margin-bottom: 14px;
  }

  /* Reduce vertical padding everywhere */
  .rl-density-standard,
  .rlv3-host.rl-density-standard {
    --pad-y: 56px;
    --gap: 24px;
  }

  /* ─── BUILT-FOR (2-up → 1-up) ─────────────────────────────────── */
  .rl-built-grid {
    grid-template-columns: 1fr !important;
    margin: 0 20px;
    gap: 16px;
  }
  .rl-built-card { padding: 24px; }
  .rl-built-title { font-size: 22px; margin: 12px 0 18px; }
  .rl-built-list li {
    font-size: 14px;
    padding: 10px 0 10px 22px;
  }

  /* ─── FEATURE ROW (4-up → 1-up) ───────────────────────────────── */
  .rl-feat-grid {
    grid-template-columns: 1fr !important;
    margin: 0 20px;
  }
  .rl-feat {
    padding: 24px 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--border);
  }
  .rl-feat:last-child { border-bottom: 0; }
  .rl-feat-title { font-size: 20px; margin: 12px 0 10px; }
  .rl-feat-body { font-size: 14px; }

  /* ─── HOW IT WORKS (4-up → 1-up) ──────────────────────────────── */
  .rl-how-track {
    grid-template-columns: 1fr !important;
    margin: 0 20px;
  }
  .rl-how-step {
    padding: 24px 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--border);
  }
  .rl-how-step:last-child { border-bottom: 0; }
  .rl-how-title { font-size: 20px; margin: 10px 0 8px; }
  .rl-how-body { min-height: 0; font-size: 14px; }
  .rl-how-arrow { display: none; }

  /* ─── TRUST (4-up → 1-up) ─────────────────────────────────────── */
  .rl-trust-grid {
    grid-template-columns: 1fr !important;
    margin: 0 20px;
  }
  .rl-trust-cell {
    padding: 20px 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--border);
  }
  .rl-trust-cell:last-child { border-bottom: 0; }

  /* ─── CTA + FOOTER ────────────────────────────────────────────── */
  .rl-cta {
    padding: 48px 20px;
  }
  .rl-cta-card {
    padding: 28px;
    border-radius: 14px;
  }
  .rl-cta-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .rl-cta-title {
    font-size: 26px;
    max-width: none;
  }
  .rl-cta-actions {
    width: 100%;
    flex-wrap: wrap;
    gap: 10px;
  }
  .rl-foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-top: 32px;
  }
  .rl-foot-right {
    flex-wrap: wrap;
    gap: 14px 18px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   Small phones (≤ 420px) — final tighten.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 420px) {
  .v4-1 .v4-h1 { font-size: 32px; }
  .v4-1 .v4-hero { padding: 28px 16px 16px; }
  .v4-1 .v4-nav { padding: 12px 16px; }

  .rl-section-head,
  .rl-feat-grid,
  .rl-how-track,
  .rl-built-grid,
  .rl-trust-grid { margin-left: 16px; margin-right: 16px; }
  .rl-cta { padding-left: 16px; padding-right: 16px; }
  .rl-cta-card { padding: 22px; }
  .rl-cta-title { font-size: 23px; }

  .rl-h2 { font-size: 23px; }
}