/* Mobile + tablet refinements. Loaded LAST so it overrides earlier rules.
   Each block is keyed to a real device width and a real ergonomic problem,
   not "maybe smaller". Touch targets stay ≥44px. iOS auto-zoom on focus is
   prevented by keeping form inputs at 16px font-size. */

/* ─── Tablet (≤ 1024px) ─── */
@media (max-width: 1024px) {
  /* Hero: stack copy + visual one column for breathing room. */
  .hero {
    padding-block: calc(var(--space-section-sm) + 4rem) var(--space-section-sm);
  }
  .hero__grid {
    grid-template-columns: 1fr;
    gap: var(--space-10);
    align-items: start;
  }
  .hero__visual {
    aspect-ratio: 16 / 11;
    min-height: 280px;
    max-width: 540px;
    margin-inline: auto;
    width: 100%;
  }
  .hero--dashboard .hero__visual { margin-top: 0; aspect-ratio: 16 / 11; }

  /* Section heading 2-col → 1-col */
  .section-head { grid-template-columns: 1fr; gap: var(--space-5); }

  /* Feature-split → single column */
  .feature-split { grid-template-columns: 1fr; gap: var(--space-8); }
  .feature-split__visual { position: static; }
}

/* ─── Phablet (≤ 760px) ─── */
@media (max-width: 760px) {
  /* Section padding: less aggressive vertical space on small screens */
  .section { padding-block: var(--space-12); }
  .section--sm { padding-block: var(--space-10); }
  .lead-section { padding-block: var(--space-12); }
  .hero { padding-block: 6rem var(--space-12); }

  /* Bento on mobile: kill the min-height + space-between combo that pushes
     short cards apart. Cells size to content; first/last spacing is from gap. */
  .bento { grid-auto-rows: auto; }
  .bento__cell {
    justify-content: flex-start;
    gap: var(--space-3);
    min-height: 0;
  }
  /* Feature cell still uses space-between because it has 3 logical zones
     (number, title+body, tag) — but cap height so it doesn't run too tall. */
  .bento__cell--feature { justify-content: flex-start; }
  .bento__cell--feature .badge { margin-top: var(--space-2); align-self: flex-start; }

  /* Nav: stronger background on mobile so content scrolling under it is
     not visually cut off. The desktop translucent + blur look stays. */
  .nav.is-scrolled {
    background: hsl(var(--surface) / 0.94);
    box-shadow: 0 1px 0 hsl(var(--border)), 0 4px 12px hsl(var(--brand-twilight) / 0.08);
  }

  /* Hero typography — let the title breathe but stay readable */
  .hero__title {
    font-size: clamp(2.25rem, 6vw + 1rem, 3.25rem) !important;
    line-height: 1.05;
  }
  .hero__lede { font-size: var(--text-base); }

  /* Hero CTA buttons stack full-width */
  .hero__cta { flex-direction: column; align-items: stretch; gap: var(--space-3); }
  .hero__cta .btn { width: 100%; justify-content: center; }

  /* Trust list wraps tighter, less whitespace */
  .trust { gap: var(--space-3); margin-top: var(--space-6) !important; }
  .trust__item { font-size: var(--text-xs); }

  /* Hero visual smaller and less tall */
  .hero__visual { min-height: 240px; aspect-ratio: 4 / 3; }

  /* Floating chips — pull inside the visual frame so they don't overflow */
  .mock-floater--tl { top: 0.5rem; left: 0.5rem; }
  .mock-floater--mr { top: auto; bottom: 50%; right: 0.5rem; }
  .mock-floater--br { bottom: 0.5rem; right: 0.5rem; }

  /* Mock browser: less rotation on small screens, rotation crops weirdly */
  .mock-browser { transform: rotate(0); }

  /* Mock dashboard: tighter padding so it doesn't overflow at 320px */
  .mock-dash { padding: var(--space-3); gap: var(--space-2); }
  .mock-dash__metric { padding: var(--space-3); }
  .mock-dash__metric-value { font-size: var(--text-lg); }
  .mock-dash__alert { font-size: 0.7rem; padding: var(--space-2) var(--space-3); }

  /* Mock email: shrink to fit, hide the "from/to/subject" prefix column on tiny screens */
  .mock-mail { padding: var(--space-3); gap: var(--space-3); }
  .mock-mail__row { grid-template-columns: 60px 1fr; gap: var(--space-2); font-size: var(--text-xs); }
  .mock-mail__body { font-size: var(--text-xs); }

  /* Mock call: tighter, transcript readable */
  .mock-call { padding: var(--space-4); gap: var(--space-3); }
  .mock-call__transcript { padding: var(--space-3); font-size: 0.7rem; }

  /* Mock rank: smaller bars and headers so they fit */
  .mock-rank { padding: var(--space-4); gap: var(--space-3); }
  .mock-rank__big { font-size: var(--text-3xl); }

  /* Stats — drop to 2 wide with smaller numbers */
  .stats-row { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
  .stat__value { font-size: var(--text-3xl); }

  /* Steps full-width single column */
  .steps { grid-template-columns: 1fr; gap: var(--space-5); }

  /* Compare cards full-width */
  .compare { grid-template-columns: 1fr; gap: var(--space-4); }

  /* Section heads: smaller titles */
  .section-head__title { font-size: var(--text-3xl); }
  .section-head__lede { font-size: var(--text-base); }

  /* Lead form section: drop to single column, padding tighter.
     Pull the lead card flush to the viewport edge (negative side margin =
     container padding) so the dark section gradient doesn't show as side
     stripes around the white form card. */
  .lead-section__grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .lead-section__copy h2 { font-size: var(--text-3xl); }
  .lead-card {
    padding: var(--space-6);
    margin-inline: calc(-1 * clamp(1rem, 2.5vw, 2.5rem));
    border-radius: 0;
  }
  .lead-card__title { font-size: var(--text-xl); }

  /* Form grid: single column always */
  .form-grid { grid-template-columns: 1fr; gap: var(--space-4); }

  /* Footer: stack columns */
  .footer__inner { grid-template-columns: 1fr; gap: var(--space-8); }
  .footer { padding-block: var(--space-10) var(--space-6); }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: var(--space-3); margin-top: var(--space-8); }

  /* Dynamic strip: stacked, with the icon left-aligned */
  .dynamic-strip__inner { grid-template-columns: 1fr; gap: var(--space-3); }
  .dynamic-strip { padding-block: var(--space-4); }
}

/* ─── Phone (≤ 480px) ─── */
@media (max-width: 480px) {
  /* Tighter container padding so we keep ~16px gutters */
  .container { padding-inline: 1rem; }

  /* Nav — keep brand + lang + CTA on one row, tighten everything.
     Brand text MUST stay on one line so the nav doesn't grow tall enough
     to hide the hero behind it. */
  .nav { padding: var(--space-3) 0; }
  .brand { font-size: var(--text-base); gap: var(--space-2); }
  .brand span { white-space: nowrap; }
  /* Wordmark scales by height; width auto-follows aspect ratio. */
  .brand__logo { height: 1.5rem; width: auto; }
  .nav__lang { padding: 0.4rem 0.6rem; font-size: var(--text-xs); }
  .nav__lang [data-lang-trigger] svg { display: none; }
  .nav .btn--sm { padding: 0.55rem 0.85rem; font-size: var(--text-xs); }

  /* Stats — 1 col on real phones, easier to read */
  .stats-row { grid-template-columns: 1fr; gap: var(--space-5); text-align: center; }
  .stat__value { font-size: var(--text-2xl); }
  .stat__label { font-size: var(--text-xs); }

  /* Hero pill: wrap nicely, smaller icon */
  .hero__personal { font-size: var(--text-xs); }

  /* Section padding: smallest */
  .section { padding-block: var(--space-10); }
  .hero { padding-block: 5rem var(--space-10); }
  .lead-section { padding-block: var(--space-10); }

  /* Hero title floor */
  .hero__title { font-size: clamp(2rem, 7vw + 0.5rem, 2.75rem) !important; }

  /* Lead card padding shrink + form rows tighter */
  .lead-card { padding: var(--space-4); border-radius: var(--radius-md); }
  .lead-card__title { font-size: var(--text-lg); }

  /* Form inputs — keep at 16px exactly to prevent iOS zoom on focus */
  .input, .textarea, .select { font-size: 16px; padding: 0.75rem 0.875rem; }
  .field__label { font-size: var(--text-xs); }
  .checkbox-row label { font-size: var(--text-xs); }

  /* Bento — single column, slightly less padding */
  .bento { gap: var(--space-3); }
  .bento__cell { padding: var(--space-4); min-height: 0; }
  .bento__title { font-size: var(--text-lg); }
  .bento__cell--feature .bento__title { font-size: var(--text-xl); }

  /* Skip the rotation/floaters on real phones — they crowd the visual */
  .mock-browser { transform: rotate(0); }
  .mock-floater { display: none; }

  /* Faq summary smaller */
  .faq__item summary { padding: var(--space-4); font-size: var(--text-sm); }

  /* Process step number can be smaller */
  .step::before { font-size: var(--text-xs); }
  .step__title { font-size: var(--text-base); }

  /* Hero visual: pull in a touch more on the smallest screens */
  .hero__visual { min-height: 220px; max-width: 100%; }
}

/* ─── Touch-target floor (≥ a tap target hit-area) ─── */
@media (hover: none) and (pointer: coarse) {
  .btn, .nav__lang, [data-lang] { min-height: 44px; }
  .nav__menu a { min-height: 44px; display: inline-flex; align-items: center; }
  .faq__item summary { min-height: 44px; }
  /* Disable hover transforms on touch — they get stuck on tap */
  .card:hover, .bento__cell:hover, .picker__card:hover { transform: none; }
}

/* ─── Tiny phone (≤ 360px) — iPhone SE 1, old Androids ─── */
@media (max-width: 360px) {
  /* Hide the CTA text label, keep only the arrow so the nav fits 1 row */
  .nav .btn--sm > span:not(.btn__arrow) { display: none; }
  .nav .btn--sm { padding: 0.55rem 0.7rem; }
  /* Nudge container even tighter */
  .container { padding-inline: 0.75rem; }
  /* Hero floor — keep it readable but let it shrink one more notch */
  .hero__title { font-size: clamp(1.85rem, 8vw, 2.4rem) !important; }
  /* Logo wordmark — slightly shorter so it doesn't push the nav row taller */
  .brand__logo { height: 1.35rem; }
}

/* ─── Wide-but-short (landscape phone, etc.) ─── */
@media (max-height: 480px) and (orientation: landscape) {
  .hero { padding-block: 4rem var(--space-8); }
  .hero__visual { min-height: 200px; aspect-ratio: 16 / 9; }
}