/* ============================================================================
   MediByte — Mobile optimization (loaded last; phones & small tablets)
   Hardens spacing, headings, the comparison table, tap targets and the hero.
   ========================================================================== */

/* ---- Phones (≤640px) ---- */
@media (max-width: 640px) {
  /* tighter, more intentional vertical rhythm so the page doesn't feel endless */
  :root { --section-y: clamp(54px, 9vw, 78px); --gutter: 20px; }

  /* headings never overflow the viewport */
  h1, h2, h3, .h1, .h2, .h3, .hero__title, .manifesto__q, .stat__num, .qz__lead {
    overflow-wrap: break-word;
    text-wrap: pretty;
    hyphens: none;
  }
  h1, .h1 { font-size: clamp(2.2rem, 10vw, 3rem); line-height: 1.02; }
  h2, .h2 { font-size: clamp(1.55rem, 6.6vw, 2.25rem); line-height: 1.08; }
  h3, .h3 { font-size: clamp(1.12rem, 4.6vw, 1.5rem); }
  /* centered section heads: a touch of breathing room so no line touches the edge */
  .section__head.center { padding-inline: 4px; }

  /* hero: keep device + mascot comfortably inside the screen */
  .hero { padding-top: clamp(104px, 15vh, 140px); }
  .hero__stage { max-width: min(330px, 86vw); }
  .hero__sub { font-size: 1.02rem; }
  .hero__trust { gap: 6px 18px; }

  /* buttons go full-width and finger-friendly */
  .hero__actions { width: 100%; }
  .hero__actions .btn, .hero__actions .btn-app,
  .cta__actions .btn, .cta__actions .btn-app { flex: 1 1 auto; justify-content: center; min-height: 52px; }
  .btn, .tlink { min-height: 44px; }

  /* section intros a touch tighter */
  .section__head .lead, .lead { font-size: 1.04rem; }
}

/* ---- Comparison table: clean, never clipped (≤600px) ---- */
@media (max-width: 600px) {
  .cmp { margin-top: 26px; }
  .cmp__table { table-layout: fixed; width: 100%; }
  .cmp__table th, .cmp__table td { padding: 12px 6px; }
  .cmp__table thead th:nth-child(1) { width: 50%; }
  .cmp__table thead th:nth-child(2),
  .cmp__table thead th:nth-child(3) { width: 25%; text-align: center; }
  .cmp__table thead th { font-size: .6rem; line-height: 1.25; letter-spacing: .04em; vertical-align: bottom; }
  .cmp__table thead .cmp__me b { font-size: .82rem; }
  .cmp__feat { font-size: .82rem; line-height: 1.3; overflow-wrap: break-word; }
  .cmp__ico { width: 19px; height: 19px; }
  .cmp__cell { text-align: center; }
  .cmp__note { font-size: .8rem; }
}

/* ---- Quiz demo: comfortable on small screens ---- */
@media (max-width: 600px) {
  .qz__card { padding: 20px 16px; }
  .qz__opt { padding: 13px 13px; min-height: 50px; }
  .qz__stem { font-size: .98rem; }
  .qz__exinner { padding: 15px 16px; }
}

/* ---- Legal pages: readable on mobile, TOC as a compact card ---- */
@media (max-width: 600px) {
  .legalx { padding-top: clamp(96px, 13vh, 130px); }
  .legalx__head h1 { font-size: clamp(2.1rem, 9vw, 2.8rem); }
  .legalx__body p, .legalx__body ul li { font-size: .98rem; }
  .legalx__body h2 { font-size: clamp(1.3rem, 6vw, 1.6rem); }
  .legalx__toc { padding: 16px; }
  .legalx__toc ol { grid-template-columns: 1fr; }
}

/* ---- Footer: comfortable tap spacing ---- */
@media (max-width: 600px) {
  .footer__col a { padding: 8px 0; }
  .footer__bottom { gap: 10px; }
}

/* ---- Anti-overflow: nothing may force the page wider than the screen (≤640px) ----
   Grid/flex children default to min-width:auto (= min-content), which lets long
   words/tables push the layout wider than the viewport and clip everything on the
   right. Resetting min-width:0 lets them shrink to fit. */
@media (max-width: 640px) {
  /* every section clips its own width so nothing can shift the page sideways */
  .section, .ahero, .legalx, .manifesto, .marquee, .footer, .hero, .dark, .cta { overflow-x: clip; }
  .wrap, .wrap--wide { width: 100%; max-width: 100%; overflow-x: clip; }
  /* headings & labels always wrap to fit, breaking a word only as a last resort */
  h1, h2, h3, .h1, .h2, .h3, .section__head h2, .eyebrow, .kicker { overflow-wrap: anywhere; }
  /* the comparison table lives in its own scroll box, never widening the section */
  .cmp { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cmp__table { min-width: 320px; }
  .bento__item, .stat, .value, .dfeat, .story__card, .tm, .milestone,
  .feature__copy, .feature__media, .section__head, .legalx__body, .legalx__grid,
  .qz, .qz__card, .proof__inner, .proof__stat { min-width: 0; max-width: 100%; }
  .bento, .values, .stats__grid, .story__grid, .dark__feats, .footer__top { min-width: 0; max-width: 100%; }
  /* full-width bento "Native & fast" banner → stack on phones */
  .bento__item--night.b-full { flex-direction: column; align-items: flex-start; gap: 14px; }
  .bento__item--night.b-full > div { min-width: 0; }
  .bento__big { font-size: clamp(1.9rem, 8vw, 2.6rem); }
  /* eyebrows / kickers wrap instead of overflowing */
  .eyebrow { white-space: normal; }
  .kicker { flex-wrap: wrap; row-gap: 6px; }
  /* images & media never exceed their box */
  img, video, canvas, table { max-width: 100%; }
}

/* ---- Very small phones (≤360px) ---- */
@media (max-width: 360px) {
  :root { --gutter: 16px; }
  h1, .h1 { font-size: 2.25rem; }
  .hero__stage { max-width: 84vw; }
  .cmp__table thead th { font-size: .55rem; }
  .stats__grid { gap: 12px; }
}

/* honour reduced-motion users on mobile too (belt-and-suspenders) */
@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .reveal, .reveal-scale { opacity: 1 !important; transform: none !important; }
}