/* ============================================================
   IDENTIFEE — MOBILE OPTIMIZATIONS
   Loaded last so it wins specificity over per-page styles.

   Strategy on phones (<= 768px):
     • horizontal snap-scroll for card-heavy sections that
       become a giant vertical wall when stacked
     • tighten section paddings, type, and gaps
     • compact the product mockup so it fits a phone screen
     • drop pure-decoration entrance/loop animations
     • strip backdrop-filter, grain SVG, heavy shadows
     • protect the index "Your core data" interactive demo
   ============================================================ */

/* ---------- prefers-reduced-motion: kill entrance fades + marquee ---------- */
@media (prefers-reduced-motion: reduce) {
  .rise, .rise-1, .rise-2, .rise-3, .rise-4 {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .logo-marquee-track { animation: none !important; }
}

/* ============================================================
   MOBILE (< 768px) — 767.98 so the 768px md: tablet breakpoint
   never overlaps: at exactly 768 the Tailwind md: grids apply,
   not these phone overrides.
   ============================================================ */
@media (max-width: 767.98px) {

  /* ============================================================
     1. Animations — only kill pure decoration
     ============================================================ */
  .rise, .rise-1, .rise-2, .rise-3, .rise-4 {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* Hero banker↔Ida chat stream — heavy DOM, not key on phones */
  #hero-ida-chat { display: none !important; }

  /* Platform/industries infinite micro-demos — drop the loop, keep frame */
  .module-mock .ai-demo .ai-menu,
  .module-mock .ai-demo .ask-ida,
  .module-mock .ai-demo .demo-pick,
  .module-mock .demo-outcome {
    animation: none !important;
  }

  /* ============================================================
     2. Visual cost
     ============================================================ */
  *, *::before, *::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .grain-warm, .grain-dark { background-image: none !important; }
  .lum {
    box-shadow:
      0 1px 2px rgba(36,36,36,0.06),
      0 4px 12px -8px rgba(36,36,36,0.08) !important;
  }

  /* ============================================================
     3. Safety / iOS
     ============================================================ */
  html, body { overflow-x: hidden; -webkit-text-size-adjust: 100%; }
  input, textarea, select { font-size: 16px !important; }
  a, button { -webkit-tap-highlight-color: transparent; }

  /* ============================================================
     4. Tighter section rhythm
     Pages stack a lot of py-12/14/20 sections — collapse them.
     ============================================================ */
  section { padding-top: 0; padding-bottom: 0; }
  section > div[class*="py-"] {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }

  /* ============================================================
     5. Hero — make it fit a phone screen
     ============================================================ */
  section.relative.isolate:first-of-type {
    padding-top: 5.5rem !important;   /* room for sticky nav */
    padding-bottom: 2rem !important;
    min-height: 0 !important;
  }
  section.relative.isolate:first-of-type h1 {
    font-size: clamp(28px, 8.4vw, 36px) !important;
    line-height: 1.06 !important;
  }

  /* ============================================================
     6. Horizontal snap-scroll rows
     Add `mobile-scroll-row` to a grid container to convert it
     to a peek-edge horizontal scroller on phones. Cards keep
     their full content; vertical wall disappears.
     ============================================================ */
  .mobile-scroll-row {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 20px;
    -webkit-overflow-scrolling: touch;
    padding: 4px 20px 8px;
    margin: 0 -20px;
    gap: 12px !important;
    scrollbar-width: none;
  }
  .mobile-scroll-row::-webkit-scrollbar { display: none; }
  .mobile-scroll-row > * {
    /* 90% (was 86%): the peek edge only needs ~35px to read as a carousel —
       the rest is better spent on card content, which wraps tightly on phones. */
    flex: 0 0 90%;
    max-width: 90%;
    scroll-snap-align: start;
    /* Reset desktop column spans inside scroller */
    grid-column: auto !important;
    grid-row: auto !important;
  }
  /* Last card scroll-end alignment */
  .mobile-scroll-row > *:last-child { scroll-snap-align: end; }

  /* Snap-row peek hint — a faint right edge so users see they can scroll */
  .mobile-scroll-row { position: relative; }

  /* ============================================================
     7. Why-Identifee 3-up grid — stays stacked but as cards
     (not a horizontal scroller — 3 short cards read fine vertically)
     ============================================================ */
  .why-grid {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    gap: 8px !important;
  }
  .why-grid > div {
    border-radius: 16px !important;
    padding: 1.25rem !important;
  }

  /* ============================================================
     8. Trust & reliability grid — 2-col on phones (was 1-col)
     ============================================================ */
  .trust-grid > div {
    padding: 1rem !important;
  }
  .trust-grid h4 { font-size: 14px !important; margin-top: 0.875rem !important; }
  .trust-grid p  { font-size: 12px !important; line-height: 1.45 !important; }
  .trust-grid .size-10 { width: 2.25rem !important; height: 2.25rem !important; }

  /* ============================================================
     9. Product mockup ("Your core data") — keep working, compact it
     ============================================================ */
  #platform .dotted-grid {
    padding: 8px !important;
    border-radius: 18px !important;
  }
  #platform .dotted-grid > .rounded-2xl {
    border-radius: 14px !important;
  }
  /* Header rows inside mockup */
  #platform header.flex { padding: 10px 12px !important; }
  /* Tab strip a touch tighter */
  #platform main .border-b.border-warm { padding-left: 12px !important; padding-right: 12px !important; }
  /* Center content min-height: a phone screen, not 540 */
  #platform main .flex-1.relative { min-height: 380px !important; }
  /* Home view padding */
  #mockup-home-view { padding: 1.25rem 0.875rem !important; }
  #mockup-home-view h3 { font-size: 1.05rem !important; }
  /* Prompt input compact */
  #mockup-home-view > div:nth-child(2) { padding: 0.75rem !important; }
  /* Shortcut cards — show first 2 only on phone, third one is decorative */
  #mockup-shortcuts > div:nth-child(3) { display: none !important; }
  #mockup-shortcuts > div { padding: 0.625rem 0.75rem !important; }
  #mockup-shortcuts .size-10 { width: 2rem !important; height: 2rem !important; }
  /* Artifact stage min-h on mobile */
  #mockup-split-view .min-h-\[300px\] { min-height: 240px !important; }
  #mockup-split-view .text-\[12px\] { font-size: 12px !important; }

  /* ============================================================
    10. Integrations marquee — convert to horizontal snap-scroll
        (was animated infinite scroll; on mobile that's wasteful)
     ============================================================ */
  .logo-marquee {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding: 0 20px 12px !important;
    scrollbar-width: none;
  }
  .logo-marquee::-webkit-scrollbar { display: none; }
  .logo-marquee-track {
    animation: none !important;
    gap: 10px !important;
    width: max-content !important;
  }
  .logo-marquee .logo-card {
    width: 140px !important;
    height: 92px !important;
    scroll-snap-align: start;
    flex-shrink: 0;
  }
  .logo-marquee .logo-card img { max-height: 48px !important; }

  /* ============================================================
    11. Trust logos grid — 3-col on phone for tighter pack
     ============================================================ */
  #trust-logos {
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    grid-auto-rows: 64px !important;
    gap: 1rem 1.25rem !important;
  }
  #trust-logos a img {
    max-height: 28px !important;
    max-width: 100% !important;
  }
  /* Square marks need more height than wordmarks to carry the same
     visual mass — at the 28px cap they shrink to an illegible dot. */
  #trust-logos a img[src*="ChesapeakeBank"] {
    max-height: 44px !important;
  }

  /* ============================================================
    12. Footer — tighter columns on phones
     ============================================================ */
  footer .grid {
    gap: 1.5rem 1rem !important;
  }
  footer h4 { font-size: 13px !important; }
  footer a { font-size: 13px !important; }
  /* 13px text alone is a ~16px-tall link; pad to the 24px tap-target minimum */
  footer ul a { display: inline-block; padding: 5px 0; }

  /* ============================================================
    13. Typography scale — slightly smaller section h2 on phones
     ============================================================ */
  section h2 {
    font-size: clamp(22px, 6.4vw, 28px) !important;
    line-height: 1.12 !important;
  }
  section h2 + p,
  section .max-w-3xl > p {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }
}

/* ============================================================
   NARROW PHONES (<= 520px) — interior grids that stay 2-up
   squeeze copy into ~130px columns of 6-7 broken lines. Stack
   them; text wraps efficiently at full width so cards end up
   no taller. 2-up returns at >= 520px where columns have room.
   ============================================================ */
@media (max-width: 519.98px) {
  /* Home bento: "Empower every banker" 2x2 agent-template grid.
     The child reset matters: the "Build your own" tile is col-span-2,
     and a spanning item would force an implicit second column. */
  #bento-agents { grid-template-columns: 1fr !important; }
  #bento-agents > * { grid-column: auto !important; }
  /* Home "Trust and reliability" tile grid */
  .trust-grid { grid-template-columns: 1fr !important; }
}

/* ============================================================
   SMALL PHONES (<= 380px) — last-mile tweaks
   ============================================================ */
@media (max-width: 380px) {
  .mobile-scroll-row > * { flex: 0 0 92%; max-width: 92%; }
  section h2 { font-size: 21px !important; }
  #mockup-home-view h3 { font-size: 1rem !important; }
}