/* mobile.css — phone/tablet refinements for Cloudflare Pages landing
 *
 * Loaded after tokens.css on every page in this directory. Everything is
 * additive; nothing here changes desktop layouts. Uses only tokens from
 * tokens.css so the palette/type ramp stays a single source of truth.
 *
 * Breakpoint conventions (align with docs/architecture — mobile-first):
 *   ≤900 px  = small tablets / large phones landscape
 *   ≤640 px  = phones portrait (iPhone 13, Pixel 7, most Android)
 *   ≤380 px  = tiny phones (iPhone SE 375, older Android)
 */

/* ─── Tap-target floor for interactive elements ─────────────────────────── */
/* WCAG-AA compliant 44 px minimum on primary CTAs. Kept out of a media
   query so it also applies at tablet widths where a stylus/finger is
   still the input. */
@media (hover: none), (pointer: coarse) {
  .nav__cta,
  .signup__actions > button,
  .cta-button,
  .cta-strip__button,
  .price-card__cta { min-height: 44px; }
}

/* ─── Signup form: visible input borders on every viewport ──────────────── */
/* The reset (tokens.css) zeroes border on inputs; the desktop rule sets an
   opaque border but at 640 px the hero collapses and inputs can render
   without visible edges on some browsers. Force an explicit border. */
.signup__input {
  border: 1px solid var(--color-border);
  background: var(--color-paper);
}
.signup__input:focus,
.signup__input:focus-visible {
  border-color: var(--color-accent);
  outline: 2px solid var(--color-focus);
  outline-offset: 0;
}

/* ─── Pricing badge: never overlap the card title ───────────────────────── */
/* Desktop places the "Default" ribbon at top:-10px. On narrow viewports the
   featured card gains extra top-padding so the badge (which sits above the
   border with negative top) never crashes into `.price-card__name`. */
.price-card--featured { padding-top: calc(var(--space-3xl) + var(--space-sm)); }

/* ─── ≤ 900 px — small tablet / landscape phone ─────────────────────────── */
@media (max-width: 900px) {
  .container { padding-left: var(--space-2xl); padding-right: var(--space-2xl); }

  /* NAV: force an opaque strip from the very first paint on mobile. The
     desktop rule keeps the nav transparent until scrolled — on phones
     that made the logo dots + wordmark render THROUGH the hero eyebrow
     "ENTERPRISE AI PLATFORM" because both drew on the same 80 px band.
     A solid background stacks the nav above the hero content instead. */
  .nav {
    background: var(--color-surface-overlay);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--color-border);
    padding-top: var(--space-md);
    padding-bottom: var(--space-md);
  }

  /* Section headings scale down one step from the display ramp so they
     stop wrapping to 3-4 lines on landscape phones. */
  .pricing-section__heading,
  .feature-row__heading,
  .cta-strip__heading {
    font-size: var(--text-4xl);
    line-height: 1.15;
  }

  /* The GCC-privacy jurisdiction grid + compliance grid use `.hero__stat-card`
     for their cells. Give the class an explicit card treatment so the cells
     read as cards, not stacked headings. */
  .hero__stat-card {
    background: var(--color-paper-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
  }
}

/* ─── ≤ 640 px — phone portrait ─────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Container padding tightens further so hero copy uses the width. */
  .container { padding-left: var(--space-xl); padding-right: var(--space-xl); }

  /* Nav: brand + hamburger only. Give the wordmark a floor so it doesn't
     collide with the hero eyebrow when the nav is fixed and the hero
     starts too close to the top. */
  .nav {
    padding-top: var(--space-md);
    padding-bottom: var(--space-md);
  }

  /* Hero: clear the fixed nav so ENTERPRISE AI PLATFORM eyebrow doesn't
     sit inside the nav's optical band. Desktop rule was `padding-top:
     5rem` (80 px) which equals the nav height + tiny gap — not enough
     margin on phones once the nav has a visible border-bottom. Bump to
     6.5rem so the eyebrow always clears the nav even with the border. */
  .hero { padding-top: 6.5rem; }
  .hero__left { gap: var(--space-lg); }
  .hero__rotator-label {
    margin-bottom: var(--space-xs);
    padding-top: var(--space-sm);
  }

  /* Hero headline: dial down the display size so "AI for every team" fits
     on 2 lines on 375 px instead of forcing a 4-line wrap. */
  .hero__headline {
    font-size: clamp(2rem, 8vw, 2.75rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
  }
  .hero__subhead { font-size: var(--text-base); }

  /* Signup: full-width column with comfortable spacing. */
  .signup { max-width: 100%; padding: var(--space-lg) 0 0; }
  .signup__field { margin-bottom: var(--space-md); }
  .signup__actions { flex-direction: column; gap: var(--space-sm); }
  .signup__actions > * { width: 100%; }

  /* Stats bar: when the grid stacks to 1 col, swap right-border dividers
     for a bottom rule on every cell except the last. */
  .stats-grid { grid-template-columns: 1fr; gap: 0; }
  .stats-grid > * {
    padding: var(--space-lg) 0;
    border-right: 0 !important;
    border-bottom: 1px solid var(--color-border);
    text-align: center;
  }
  .stats-grid > *:last-child { border-bottom: 0; }

  /* Feature-row headings shrink so the pipeline title "Detect → Mask →
     Forward → Receive → Restore → Audit" wraps sensibly instead of blowing
     out to 6 lines with one word per row. */
  .feature-row { gap: var(--space-xl); padding: var(--space-3xl) 0; }
  .feature-row__heading {
    font-size: var(--text-3xl);
    line-height: 1.15;
    word-break: break-word;
  }
  .feature-row__body { font-size: var(--text-base); }

  /* Pricing grid stacks 1-col already; drop the featured badge slightly
     lower so it never rides the border on very narrow screens. */
  .pricing-cards { gap: var(--space-lg); }
  .price-card { padding: var(--space-2xl); }
  .price-card--featured::before { top: 0; right: var(--space-md); }

  /* Section headings: match the feature-row size so the whole page reads
     as one type ramp instead of a random step-down. */
  .pricing-section__heading,
  .cta-strip__heading { font-size: var(--text-3xl); line-height: 1.15; }

  /* CTA strip button gets a comfortable finger target and stops
     stretching edge-to-edge. */
  .cta-strip { padding: var(--space-4xl) 0; }

  /* Footer: single column with generous vertical rhythm; bottom row wraps. */
  .footer__grid { grid-template-columns: 1fr; gap: var(--space-2xl); }
  .footer__bottom { flex-direction: column; gap: var(--space-sm); text-align: center; }

  /* Reveal-on-scroll: on phones, land in place immediately when
     IntersectionObserver hasn't fired yet, so no section stays blank
     if JS is slow or blocked. */
  .reveal:not(.is-visible) { opacity: 1; transform: none; transition: none; }
}

/* ─── ≤ 380 px — tiny phone (iPhone SE) ─────────────────────────────────── */
@media (max-width: 380px) {
  .container { padding-left: var(--space-lg); padding-right: var(--space-lg); }
  .hero__headline { font-size: clamp(1.75rem, 8.5vw, 2.25rem); }
  .price-card { padding: var(--space-xl); }
  .nav__wordmark { font-size: var(--text-base); }
}