/* ============================================================
   ACE MY PREP — mobile refinements
   Loaded last so it overrides the page's inline styles.
   Targets phones (≤640px) and small tablets (≤860px).
   ============================================================ */

@media (max-width: 860px) {
  /* ---- vertical rhythm: desktop uses 100px, far too much on a phone ---- */
  section { padding-top: 56px !important; padding-bottom: 56px !important; }
  section:first-of-type { padding-top: 96px !important; }

  /* ---- headings ---- */
  h1 { font-size: 34px !important; line-height: 1.12 !important; letter-spacing: -1.3px !important; }
  h2, .sec { font-size: 26px !important; line-height: 1.22 !important; letter-spacing: -.8px !important; }
  h3 { font-size: 19px !important; line-height: 1.3 !important; }

  /* ---- body copy: 15.5px is the comfortable floor on mobile ---- */
  p, li { font-size: 15.5px !important; line-height: 1.6 !important; }
  .lede, .sec-sub, .hero-sub { font-size: 16.5px !important; line-height: 1.55 !important; }

  /* ---- small labels were rendering at 11px — below readable ---- */
  .sec-eyebrow, .eyebrow, .hero-eyebrow, .tag, .amp-tagline, .pk-unis,
  .bl-meta, .src, .admit-count, .ctasub, .ap-note {
    font-size: 12.5px !important; letter-spacing: 1.1px !important;
  }

  /* ---- grid gaps ---- */
  .how-grid { gap: 34px !important; }
  .tool-grid, .pricing-grid, .testi-grid, .visa-grid, .calc-grid,
  .profile-grid, .grid, .inc-grid, .prob-grid, .cmp, .drift { gap: 15px !important; }
  .admit-grid { gap: 11px !important; }

  /* ---- full-bleed grids were touching the screen edges ---- */
  .shorts-grid, #reviews-grid, .vid-grid {
    padding-left: 20px !important; padding-right: 20px !important;
  }

  /* ---- cards: trim internal padding so they aren't mostly whitespace ---- */
  .tool-card, .pricing-card, .cc, .card, .dcard, .prob, .inc, .rev,
  .cmpc, .faq, .wk-head, .amp-addon, .keybox {
    padding: 20px 18px !important;
  }
  .pricing-card { padding: 24px 20px !important; }

  /* ---- tap targets: 44px is the accessibility minimum ---- */
  footer a, .footer-col a, .fl a, .flinks a {
    display: inline-block !important; padding: 9px 0 !important;
    min-height: 40px !important; line-height: 22px !important;
  }
  .nav-burger { min-width: 44px !important; min-height: 44px !important; }
  .toggle-btn, .tab, .day-chip, .time-chip, .amp-chip, .af, .pick-o, .search-tag {
    min-height: 42px !important; display: inline-flex !important;
    align-items: center !important; justify-content: center !important;
  }
  .btn, .cc-btn, .nav-cta, .amp-btn, .book-btn, .ap-btn, .amp-bbtn, .calc-btn {
    min-height: 48px !important; display: inline-flex !important;
    align-items: center !important; justify-content: center !important;
  }

  /* ---- hero ---- */
  .hero-stats { gap: 22px !important; }
  .hero-stats > div { min-width: 132px !important; }
  .hero-actions { width: 100% !important; }
  .hero-actions a { width: 100% !important; text-align: center !important; }

  /* ---- tables scroll rather than squash ---- */
  .table-wrap, .pk-wrap, .compare-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }

  /* ---- long numbers/prices ---- */
  .price, .pk-price, .amp-price, .cmpc .p { font-size: 26px !important; }

  /* ---- forms ---- */
  input, select, textarea { font-size: 16px !important; }   /* stops iOS auto-zoom */

  /* ---- footer breathing room ---- */
  footer { padding: 28px 20px !important; }
  .footer-top { gap: 26px !important; }
}

@media (max-width: 420px) {
  section { padding-top: 48px !important; padding-bottom: 48px !important; }
  h1 { font-size: 31px !important; }
  h2, .sec { font-size: 24px !important; }
}

/* ============================================================
   SWIPE ROWS
   On a phone, 7 stacked cards = 3,000px of scrolling.
   Turned into horizontal swipe rows with snap points instead.
   ============================================================ */
@media (max-width: 860px) {
  .tool-grid, .visa-grid, .pricing-grid, .testi-grid,
  .shorts-grid, #reviews-grid, .vid-grid, .cmp, .inc-grid, .prob-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 14px !important;
    padding: 4px 0 16px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    scrollbar-width: none;
  }
  .tool-grid::-webkit-scrollbar, .visa-grid::-webkit-scrollbar,
  .pricing-grid::-webkit-scrollbar, .testi-grid::-webkit-scrollbar,
  .shorts-grid::-webkit-scrollbar, #reviews-grid::-webkit-scrollbar,
  .vid-grid::-webkit-scrollbar, .cmp::-webkit-scrollbar,
  .inc-grid::-webkit-scrollbar, .prob-grid::-webkit-scrollbar { display: none; }

  .tool-grid > *, .visa-grid > *, .pricing-grid > *, .testi-grid > *,
  .shorts-grid > *, #reviews-grid > *, .vid-grid > *, .cmp > *,
  .inc-grid > *, .prob-grid > * {
    flex: 0 0 84% !important;
    max-width: 320px !important;
    scroll-snap-align: start !important;
  }
  .shorts-grid > *, .vid-grid > * { flex: 0 0 58% !important; max-width: 220px !important; }
  .inc-grid > *, .prob-grid > * { flex: 0 0 76% !important; }

  /* hint that there's more to the right */
  .tool-grid::after, .visa-grid::after, .pricing-grid::after,
  .testi-grid::after, .cmp::after {
    content: ''; flex: 0 0 6px;
  }
}

/* ============================================================
   REMAINING MOBILE TRIMS
   ============================================================ */
@media (max-width: 860px) {
  /* decorative aurora blobs were pushing the page 2px wide */
  .hero-aurora, .aurora-1, .aurora-2, .aurora-3 { max-width: 100vw !important; overflow: hidden !important; }
  html, body { overflow-x: hidden !important; max-width: 100% !important; }

  /* profile-enhancement section: the tallest block on the page */
  .profile-grid { gap: 20px !important; }
  .profile-feature, .pf-item, .profile-list li { padding: 14px 0 !important; }
  .score-card, .profile-card { padding: 22px 18px !important; }
  .score-bar-row { margin-bottom: 12px !important; }

  /* pricing: trim the long feature lists */
  .pricing-card ul { margin-top: 12px !important; }
  .pricing-card li { padding: 5px 0 5px 22px !important; font-size: 14.5px !important; }

  /* calculator block */
  .calc-grid { gap: 18px !important; }
  .calc-card, .verdict, .verdict-text { padding: 20px 18px !important; }
  .verdict-metrics { gap: 14px !important; }

  /* how-it-works steps */
  .how-step { padding: 0 !important; }
  .how-grid { gap: 28px !important; }

  /* visa cards */
  .visa-card { padding: 20px 18px !important; }
  .visa-row { padding: 7px 0 !important; font-size: 14px !important; }

  /* tighten repeated headings */
  .sec-eyebrow { margin-bottom: 10px !important; }
  h2, .sec { margin-bottom: 12px !important; }
}

/* ============================================================
   OVERFLOW + LEGIBILITY FIXES
   ============================================================ */
@media (max-width: 860px) {
  /* decorative background blobs (aurora / ba1-3) must never widen the page */
  .ba1, .ba2, .ba3, .aurora-1, .aurora-2, .aurora-3,
  .hero-aurora, .bg-aurora, .glow {
    max-width: 100vw !important;
    left: auto !important; right: auto !important;
  }
  /* their parent clips them */
  .hero, header, section, .roi-hero, .tool-hero { overflow-x: clip !important; }

  /* marquee is intentionally wide — clip its container */
  .marquee, .marquee-wrap, .logo-marquee { overflow: hidden !important; max-width: 100vw !important; }

  /* raise every 11px label to a readable 12.5px */
  .fx-hint, .cc-flag, .cc-badge, .rtesti-tag, .score-chip, .match-type,
  .profile-badge, .pa-tag, .gst-note, .marquee-meta, .marquee-name,
  th, .vm-lab, .tm-lab, .chip-label {
    font-size: 12.5px !important;
  }
}


/* ============================================================
   ALIGNMENT — one consistent 20px gutter everywhere.
   Previously: hero sat at 24px, section headings at 42px,
   and step body text was pushed to 98px by the number badge.
   ============================================================ */
@media (max-width: 860px) {
  /* the section owns the gutter... */
  section, .hero, header.hero, footer {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  /* ...and inner containers add nothing on top of it */
  .container, .wrap, .hero-content, .sec-head, .footer-inner, .hero-inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* numbered steps: stack the badge above the text so body copy
     starts at the same 20px as every heading */
  .step, .phase, .how-step {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 18px 0 !important;
  }
  .step-num, .ph-num, .how-num, .dh-num {
    width: 32px !important; height: 32px !important;
    font-size: 13px !important; border-radius: 9px !important;
  }
  .step > div:not(.step-num), .phase > .ph-b, .how-step > div:not(.how-num) {
    width: 100% !important; min-width: 0 !important;
  }
  /* keep the accordion toggle on the same line as its heading */
  .phase-head { width: 100% !important; }

  /* swipe rows: bleed to the screen edge but keep cards on the 20px line */
  .tool-grid, .visa-grid, .pricing-grid, .testi-grid,
  .shorts-grid, #reviews-grid, .vid-grid, .cmp, .inc-grid, .prob-grid {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* cards fill the gutter width cleanly */
  .tool-grid > *, .visa-grid > *, .pricing-grid > *, .testi-grid > *,
  #reviews-grid > *, .cmp > *, .inc-grid > *, .prob-grid > * {
    flex: 0 0 100% !important; max-width: 100% !important;
  }
  .shorts-grid > *, .vid-grid > * { flex: 0 0 62% !important; max-width: 200px !important; }

  /* centred hero text shares the same gutter */
  .hero-eyebrow, .hero h1, .hero-sub, .hero-search { max-width: 100% !important; }
}