/* mobile.css — site-wide mobile responsive overrides
   Linked AFTER each page's inline <style> so source-order wins on equal specificity.
   Uses !important sparingly, only where inline styles or higher specificity collide. */

/* ── Universal safety net ─────────────────────────────────────────── */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}
img, video, svg, canvas, iframe {
  max-width: 100%;
  height: auto;
}
table {
  max-width: 100%;
}
pre, code {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  word-wrap: break-word;
}

/* ── iOS input zoom prevention (always 16px+) ─────────────────────── */
@media (max-width: 760px) {
  input[type="text"], input[type="email"], input[type="password"],
  input[type="number"], input[type="tel"], input[type="url"],
  input[type="search"], input[type="date"], textarea, select {
    font-size: 16px !important;
  }
}

/* ── Touch target minimum (Apple HIG: 44pt) ───────────────────────── */
@media (max-width: 760px) {
  button, .btn, a.btn, input[type="submit"], input[type="button"] {
    min-height: 44px;
  }
  /* Nav pill is a smaller, more elegant size — proportional to its narrow width */
  .na-btn-pill {
    min-height: 36px !important;
    padding: .5rem 1.1rem !important;
    font-size: .82rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
  }
}
@media (max-width: 480px) {
  .na-btn-pill {
    min-height: 34px !important;
    padding: .45rem 1rem !important;
    font-size: .78rem !important;
  }
}

/* ── Button quality polish on mobile ──────────────────────────────── */
@media (max-width: 760px) {
  /* Hero CTAs — chunkier, easier to tap, more visual weight */
  .hero-btn-main, .hero-btn-sub,
  .hero-cta a, .hero-cta button,
  .hero-buttons a, .hero-buttons button {
    min-height: 50px !important;
    padding: .85rem 1.6rem !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border-radius: 100px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
    -webkit-tap-highlight-color: transparent;
    transition: transform .12s ease, box-shadow .12s ease, opacity .15s !important;
  }
  .hero-btn-main:active, .hero-btn-sub:active,
  .hero-cta a:active, .hero-cta button:active {
    transform: scale(.97) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.1) !important;
  }

  /* All other primary buttons — consistent feel */
  .btn-primary, .btn.primary, .cta, .cta-btn,
  button[type="submit"], input[type="submit"] {
    min-height: 48px !important;
    padding: .8rem 1.4rem !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
  }

  /* Generic .btn / a.btn — make sure padding looks intentional */
  .btn, a.btn {
    padding: .75rem 1.25rem !important;
    -webkit-tap-highlight-color: transparent;
  }

  /* Hero buttons: keep natural width, generous gap, no wrap */
  .hero-btns {
    gap: .6rem !important;
    padding: 0 .25rem !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  .hero-btns > a, .hero-btns > button {
    white-space: nowrap !important;
    text-align: center !important;
  }
  /* Tighten hero CTA padding so labels don't wrap on 390px viewport */
  .hero-btn-main, .hero-btn-sub {
    padding: .85rem 1.2rem !important;
  }
}

/* ── Below 380px: stack hero buttons full-width ───────────────────── */
@media (max-width: 380px) {
  .hero-btns {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .hero-btns > a, .hero-btns > button {
    width: 100% !important;
  }
}

/* ── Tablet (≤900px) ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Collapse multi-col grids to 2-col by default */
  .cards-grid, .cats-grid, .trust-grid, .use-cases-grid,
  .features-grid, .stats-grid, .recs-grid, .preview-grid,
  .lic-grid, .prev-image-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── Mobile (≤640px) ─────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Trim aggressive horizontal padding */
  section { padding-left: 1rem !important; padding-right: 1rem !important; }
  .section-inner, .container { padding-left: 0 !important; padding-right: 0 !important; }
  .page > .main, .page > .content { padding-left: 1rem !important; padding-right: 1rem !important; }

  /* Collapse big content cards to single column */
  .cards-grid, .trust-grid, .use-cases-grid,
  .features-grid, .recs-grid, .preview-grid,
  .lic-grid, .prev-image-grid, .plans-wrap, .proof-inner,
  .how-cols, .flow-row, .ds-grid {
    grid-template-columns: 1fr !important;
  }
  /* Compact tile-style grids stay at 2 cols (categories, key stats) */
  .cats-grid, .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Hero stats: 2x2 grid, not stacked column */
  .hero-stats {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: .85rem 1.25rem !important;
    flex-direction: row !important;
    align-items: start !important;
    text-align: center !important;
    margin-top: 1.75rem !important;
    padding-top: 1.5rem !important;
  }
  .hero-stats > * {
    min-width: 0 !important;
    text-align: center !important;
    padding: .35rem .25rem !important;
  }
  .hero-stats .hstat-n {
    font-size: clamp(1.35rem, 5.5vw, 1.7rem) !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }
  .hero-stats .hstat-l {
    font-size: 11px !important;
    margin-top: .2rem !important;
    line-height: 1.25 !important;
    letter-spacing: .02em !important;
  }
  .hero-stats .hstat-sub {
    font-size: 10px !important;
    line-height: 1.3 !important;
    margin-top: .15rem !important;
    word-break: break-word !important;
  }

  /* Hero typography sane on small screens */
  h1 { font-size: clamp(1.65rem, 7vw, 2.4rem) !important; line-height: 1.15 !important; }
  h2 { font-size: clamp(1.4rem, 5.5vw, 1.9rem) !important; line-height: 1.2 !important; }
  h3 { font-size: clamp(1.05rem, 4.2vw, 1.3rem) !important; }

  /* Stop fixed-width buttons/blocks from forcing horizontal scroll */
  .btn, .na-btn-pill, .nav-cta, .hero-cta { white-space: normal; }

  /* Tables become horizontally scrollable instead of overflowing the viewport */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Modals fit the viewport */
  .modal, .dialog, .overlay-card {
    max-width: calc(100vw - 1rem) !important;
    width: calc(100vw - 1rem) !important;
    max-height: calc(100vh - 2rem) !important;
    overflow-y: auto;
  }

  /* Forms with side-by-side inputs stack */
  .outcome-form-row, .outcome-nums, .bm-body, .row2, .form-row, .lic-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── Small mobile (≤420px) ────────────────────────────────────────── */
@media (max-width: 420px) {
  section { padding-left: .75rem !important; padding-right: .75rem !important; }
  .page > .main, .page > .content { padding-left: .75rem !important; padding-right: .75rem !important; }

  /* Tighter typography */
  h1 { font-size: clamp(1.5rem, 8vw, 2rem) !important; }

  /* Reduce gaps for density */
  .cards-grid, .ds-grid, .recs-grid { gap: .65rem !important; }
}

/* ── Page-specific: pricing comparison table ──────────────────────── */
@media (max-width: 640px) {
  .compare-table { min-width: 0 !important; font-size: .72rem !important; }
  .compare-table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
}

/* ── Page-specific: dataset stats row ─────────────────────────────── */
@media (max-width: 640px) {
  .stats-row { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 380px) {
  .stats-row { grid-template-columns: 1fr !important; }
}

/* ── .page containers (used as 2-col grid on dataset/checkout/creator) ─ */
@media (max-width: 900px) {
  .page { grid-template-columns: 1fr !important; }
}
@media (max-width: 640px) {
  .page { padding-left: 1rem !important; padding-right: 1rem !important; gap: 1.5rem !important; }
}
@media (max-width: 420px) {
  .page { padding-left: .75rem !important; padding-right: .75rem !important; }
}

/* ── Hero vertical padding on small screens ───────────────────────── */
@media (max-width: 640px) {
  .hero, section.hero, .hero-section, .hero-wrap {
    padding-top: 2.5rem !important;
    padding-bottom: 2rem !important;
  }
}

/* ── Page-specific: checkout grid ─────────────────────────────────── */
@media (max-width: 760px) {
  .checkout-grid, .co-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  .order-summary, .co-summary {
    position: static !important;
    order: -1;
  }
}

/* ── Page-specific: dashboards (stack stats/cards) ────────────────── */
@media (max-width: 640px) {
  .dash-grid, .stats-cards, .summary-cards {
    grid-template-columns: 1fr !important;
  }
}

/* ── Footer columns collapse ─────────────────────────────────────── */
@media (max-width: 640px) {
  footer .footer-cols, footer .footer-grid, .ft-cols {
    grid-template-columns: 1fr 1fr !important;
    gap: 1.5rem !important;
  }
}
@media (max-width: 420px) {
  footer .footer-cols, footer .footer-grid, .ft-cols {
    grid-template-columns: 1fr !important;
  }
}

/* ── Live stats strip on hero — never wider than viewport ────────── */
@media (max-width: 640px) {
  .live-strip { max-width: calc(100vw - 1.25rem) !important; }
}

/* ─────────────────────────────────────────────────────────────────
   MOBILE READABILITY PASS — bumps tiny labels & badges to 11px+,
   gives all tap targets ≥40px hit area, prevents stretched single-
   column cards from filling the whole viewport.
   ───────────────────────────────────────────────────────────────── */

@media (max-width: 760px) {
  /* Tiny pills & badges — bump to legible size */
  .cat-pill, .tip, .quality-badge, .verified-creator,
  .innovation-tag, .section-tier, .eyebrow, .hero-eyebrow,
  .live-strip-title, .live-strip-score, .live-strip-score-badge,
  .save-badge, .post-tag, .step-num, .dim-weight-badge,
  .cal-live-label, .cal-stat, .cat-cell, .filter-group-title,
  .fmt-chip, .os-task, .os-metric, .section-label, .logo-bar-label,
  .div-txt, .cal-live-meta {
    font-size: 11px !important;
    line-height: 1.35 !important;
  }
  .innovation-tag, .section-tier, .hero-eyebrow, .eyebrow,
  .cal-live-label, .filter-group-title {
    letter-spacing: .08em !important;
  }

  /* Body text minimum */
  p, li, .form-sub, .ds-sub, .form-help, .helper-text {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }

  /* Tap target floor: 40px high for any link/button.
     Apply via min-height on flex/inline-flex elements; padding catches the rest. */
  a:not(.logo):not(.nl-link):not(.na-name), button {
    min-height: 40px;
  }
  /* Reset for inline links inside paragraphs (don't bloat line-height) */
  p a, li a, .ds-sub a, .form-help a, span a {
    min-height: 0 !important;
    display: inline !important;
  }

  /* Footer links — pad for thumbs */
  footer a, .footer-links a, .ft-cols a, .ft-link {
    padding: .55rem .25rem !important;
    display: inline-block !important;
    min-height: 36px;
    line-height: 1.3 !important;
  }

  /* Forgot password / inline form helpers */
  .forgot, a.forgot, .signin-helper, .auth-link {
    padding: .5rem .25rem !important;
    display: inline-block !important;
  }
}

/* ── Section vertical rhythm on phone ─────────────────────────────── */
@media (max-width: 640px) {
  section { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
  .section, section.section { padding-top: 2rem !important; padding-bottom: 2rem !important; }
  h1 { margin-bottom: .5rem !important; }
  h2 { margin-bottom: .5rem !important; }
  .hero-sub, .section-intro, .form-sub { margin-bottom: 1.2rem !important; }
}

/* ── Stacked cards: cap width so they don't look stretched ────────── */
@media (max-width: 640px) {
  /* Single-column card grids: keep a comfortable reading width */
  .cards-grid > *, .cats-grid > *, .features-grid > *,
  .trust-grid > *, .use-cases-grid > *, .innovation-grid > .innovation-card,
  .task-grid > .task-card, .flow-card, .step-card, .pillar-card {
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* Reduce internal padding on cards (cards usually have 1.5-2rem desktop padding) */
  .innovation-card, .task-card, .ds-card, .step-card, .pillar-card,
  .feature-card, .trust-card, .use-case-card {
    padding: 1.1rem 1.15rem !important;
  }
}

/* ── Listings dataset card: tighten on mobile so price/CTA fit ────── */
@media (max-width: 640px) {
  .ds-card { padding: 1.15rem 1.1rem !important; }
  .ds-card .ds-title { font-size: 1rem !important; line-height: 1.3 !important; }
  .ds-card-top { margin-bottom: .7rem !important; }
}

/* ── Forms: full-width inputs with proper height ──────────────────── */
@media (max-width: 760px) {
  input, select, textarea, .inp, .price-in, .search-in {
    min-height: 44px !important;
    padding-top: .6rem !important;
    padding-bottom: .6rem !important;
  }
  textarea { min-height: 96px !important; }
}

/* ── Sticky/fixed nav: ensure scroll padding so anchors aren't hidden ── */
@media (max-width: 760px) {
  html { scroll-padding-top: 64px; }
}

/* ── Global container max-width sanity for centered .content-wrap ──── */
@media (max-width: 640px) {
  .content-wrap { padding-left: 1rem !important; padding-right: 1rem !important; }
}

/* ── Hero CTA buttons stack on tiny phones ────────────────────────── */
@media (max-width: 480px) {
  .hero-cta, .hero-buttons, .hero-actions, .cta-row {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
  }
  .hero-cta > a, .hero-cta > button,
  .hero-buttons > a, .hero-buttons > button,
  .hero-actions > a, .hero-actions > button,
  .cta-row > a, .cta-row > button {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }
}

/* ── Reduce nav/footer horizontal padding on mobile ───────────────── */
@media (max-width: 640px) {
  footer { padding-left: 1rem !important; padding-right: 1rem !important; }
}

/* ── Tier-table boxes (lqs-methodology) ───────────────────────────── */
@media (max-width: 640px) {
  .tier-table { gap: .5rem !important; }
  .tier-item { min-width: calc(50% - .5rem) !important; padding: .85rem .5rem !important; }
  .tier-score { font-size: 1.2rem !important; }
}

/* ── Hide cosmetic-only ornaments that crowd small screens ────────── */
@media (max-width: 480px) {
  .desktop-only, .hide-mobile { display: none !important; }
}

/* ── Logo tap target floor ────────────────────────────────────────── */
@media (max-width: 760px) {
  nav a.logo {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
}

/* ── Inline anchor tap targets (footer, body links) ──────────────── */
@media (max-width: 760px) {
  footer a, .lp-foot a, .legal-foot a {
    display: inline-block;
    min-height: 32px;
    padding: .35rem .15rem;
    line-height: 1.4;
  }
  /* Body-prose inline links — give them vertical breathing room without breaking flow */
  p a, li a, .prose a, .lp-section a, .meth-body a {
    padding: .15rem 0;
  }
}

/* ── Tiny-text floor: badges, pills, table headers, dim labels ───── */
@media (max-width: 640px) {
  .popular-badge, .featured-badge, .plan-tier, .os-rank,
  .dim-num, .dim-weight, .sig-star,
  .fmt-pill, .plan-extras-label, .fstat-l,
  th, td, .hstat-l {
    font-size: 11px !important;
  }
  /* Tier headers and live-strip tags shouldn't fall under 11px */
  [class*="tier-"], .live-tag, .live-strip span {
    font-size: 11px !important;
  }
  /* Card-meta pills and small inline data labels */
  .fv-title, .fv-tier, .card-meta, .card-meta *,
  .listing-meta, .listing-meta *,
  .meta-pill, .fmt-pill, .os-pill, .lic-pill, .tag-pill,
  [class*="badge"] {
    font-size: 11px !important;
  }
}

/* ── Inline link tap padding (catches links inside any text block) ─ */
@media (max-width: 760px) {
  a:not(.logo):not(.btn):not(.na-btn-pill):not(.nl-link):not(.na-name):not([class*="card"]):not([class*="tile"]) {
    /* Lightweight padding so inline anchors don't measure under 32px */
    padding-top: .2rem;
    padding-bottom: .2rem;
  }
}