/* ============================================================
   Truva — phone layer
   Loaded last on every page. Every rule lives inside the media
   query below, so laptops and desktops never match any of it:
   the desktop layout is untouched by construction.
   ============================================================ */

@media (max-width: 700px) {

  /* ---------- 1. Home hero: close the empty band under the nav ----------
     The photo used to start 232px down the screen (162px of blank under
     the 70px nav). Now it sits a comfortable 26px below the bar. */
  .hero:has(.hero-split) { padding-top: 26px; }
  .hero-split { gap: 28px; }
  .hero-copy .hero-actions { margin-top: 26px; }

  /* ---------- 2. Card rows become swipeable ----------
     Four flow cards and three benefit cards used to stack into ~3,400px
     of scrolling. On a phone they become a horizontal row: swipe sideways,
     snap card to card, with the next card peeking in as the hint. */
  .ways-grid,
  .bene-grid {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: -20px;              /* run edge to edge… */
    padding: 4px 20px 16px;            /* …while the first card still lines up with the text */
    scroll-padding-inline: 20px;
  }
  .ways-grid::-webkit-scrollbar,
  .bene-grid::-webkit-scrollbar { display: none; }

  .ways-grid > .way,
  .bene-grid > .bene-card {
    flex: 0 0 84%;
    scroll-snap-align: start;
  }
  /* reveal-on-scroll watches the vertical viewport, so cards parked off to
     the right would never trigger — show them outright inside the row */
  .ways-grid > .reveal,
  .bene-grid > .reveal { opacity: 1; transform: none; filter: none; }

  /* ---------- 3. Type scale sized for a 390px screen ----------
     Several headings were landing at 43–51px on a phone. */
  #analiz-title,
  #business-title,
  #insights-title                          { font-size: clamp(32px, 9.4vw, 38px) !important; line-height: 1.05; }
  .p-hero .hero-copy h1                    { font-size: clamp(32px, 9.4vw, 38px) !important; }
  .about-intro h1                          { font-size: clamp(30px, 8.8vw, 35px) !important; }

  #data-intro-heading,
  #insights-features-title,
  .analiz-path-copy h2,
  .guest-slide-intro h2                    { font-size: clamp(27px, 7.8vw, 31px) !important; line-height: 1.08; }
  #guest-platform-title,
  #insights-overview-title,
  #insights-experience-title               { font-size: clamp(25px, 7.2vw, 29px) !important; line-height: 1.1; }

  /* small caps labels: 11.5px was below comfortable reading size */
  .mono-label, .bene-label, .strip-label   { font-size: 12px; }

  /* ---------- 4. Rhythm: less dead air between sections ---------- */
  .block        { padding-top: 68px; padding-bottom: 68px; }
  .cta-final    { padding-top: 84px; padding-bottom: 84px; }
  .ways         { padding-top: 64px; padding-bottom: 60px; }
  .bene         { padding-top: 64px; padding-bottom: 68px; }
  .ways-actions { margin-top: 34px; }

  /* ---------- 5. Thumb-sized tap targets (~44px) ---------- */
  .lang button { padding-top: 11px; padding-bottom: 11px; }

  footer .foot-col a { padding-top: 11px; padding-bottom: 11px; }

  /* the carousel dots are drawn at 7px; give each an invisible 32px hit area */
  .shot-dots { gap: 14px; }
  .shot-dots button { position: relative; }
  .shot-dots button::after { content: ""; position: absolute; inset: -13px -8px; }

  /* ---------- 6. Forms ----------
     iOS Safari zooms the whole page into any field under 16px on focus. */
  /* !important because page rules such as `.field input` are more specific,
     and a single 15px field is enough to trigger the zoom */
  input:not([type="hidden"]), select, textarea { font-size: 16px !important; }
  .field label { font-size: 13.5px; }
}