@charset "UTF-8";
/* ==========================================================================
   BrainDetox — responsive layer
   Breakpoints (max-width, mobile-last):
     1100px  laptop        — hero tightens, stage shrinks
      900px  tablet        — nav collapses to a drawer, hero stacks
      640px  mobile        — single column, type + spacing rescale
      380px  small mobile  — final squeeze
   Plus: landscape phones, hover-less pointers, wide screens, print.
   ========================================================================== */

/* ── Laptop ────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  :root { --shell: 1000px; }

  .hero__grid { gap: clamp(1.5rem, 3vw, 2.5rem); }
  .hero__stage { min-height: 540px; }
  .hero__phone { width: min(290px, 76%); }
  .hero__halo { width: 360px; height: 360px; }
  .float-chip__value { font-size: 1.375rem; }
  .float-chip--streak { left: -4px; top: 76px; }
  .float-chip--screen { right: -2px; bottom: 100px; }
}

/* ── Tablet ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  :root { --section: clamp(4rem, 9vw, 5.5rem); }

  /* Nav: links + inline CTA give way to the hamburger drawer. */
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: flex; }
  .nav__inner { padding: .5rem .5rem .5rem 1.125rem; }

  /* Hero stacks; the phone leads visually but sits under the copy. */
  .hero { padding-top: clamp(7rem, 16vw, 8.5rem); text-align: left; }
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 3.5rem); }
  .hero__lead { max-width: 40rem; }
  .hero__stage { min-height: 480px; order: 2; }
  .hero__phone { width: min(300px, 68%); }
  .hero__stats { gap: 2rem; margin-top: 2.5rem; }

  /* Alternating rows all become media-first so the rhythm stays predictable. */
  .step { gap: 2.25rem; }
  .step--reverse .step__media { order: -1; }
  .step__phone { width: min(280px, 72%); }
  .step__glow { width: 280px; height: 280px; }

  .privacy { gap: 2.25rem; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6) var(--sp-5); }
  .footer__brand-col { grid-column: 1 / -1; }
}

/* ── Mobile ────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  :root {
    --fs-body: 1rem;
    --section: clamp(3.5rem, 11vw, 4.5rem);
    --r-2xl: 28px;
    --r-xl: 24px;
  }

  h1 { letter-spacing: -.035em; }
  h2, h3 { letter-spacing: -.03em; }

  .nav { top: 12px; }
  .nav__drawer { top: calc(var(--nav-h) + 8px); }

  .hero { padding-top: clamp(6.25rem, 22vw, 7.5rem); }
  .hero h1 { margin-top: 1.125rem; }
  .hero__lead { margin-top: 1.25rem; }
  .hero__actions { margin-top: 1.75rem; gap: .625rem; }
  /* Full-width tap targets read as deliberate on a phone, not as a squeeze. */
  .hero__actions .btn { width: 100%; }
  .hero__stage { min-height: 400px; }
  .hero__phone { width: min(250px, 66%); }
  .hero__halo { width: 280px; height: 280px; }

  /* Chips move inward so they can't hang past the viewport edge. */
  .float-chip { padding: .625rem .8125rem; }
  .float-chip__value { font-size: 1.1875rem; }
  .float-chip__label { font-size: .625rem; }
  .float-chip--streak { left: 0; top: 52px; transform: none; }
  .float-chip--screen { right: 0; bottom: 68px; transform: none; }

  .hero__stats { gap: 1.25rem 1.75rem; margin-top: 2rem; }
  .hero__stat { flex: 1 1 40%; }

  .marquee { width: 118%; margin-left: -9%; }
  .marquee__group { font-size: 1.125rem; gap: 1.5rem; padding-right: 1.5rem; }

  .problem__grid, .feature-grid { grid-template-columns: 1fr; gap: var(--sp-4); }

  .steps { gap: 3.25rem; }
  .step { grid-template-columns: 1fr; gap: 1.75rem; }
  .step__phone { width: min(240px, 64%); }
  .step__glow { width: 230px; height: 230px; }
  .step p { font-size: 1rem; }
  .step__metrics { gap: 1.25rem; }

  .score__ticks { font-size: .625rem; }
  .score__track { height: 10px; }

  .rail { gap: 1rem; padding: 2rem var(--gutter) 1.75rem; }
  .rail__item { width: 208px; }
  .rail__item img { border-radius: 22px; }
  /* Hover-lift is meaningless on touch and just causes jitter mid-swipe. */
  .rail__item:hover { transform: none; }
  .rail-hint { display: none; }

  .faq__q { padding: 1rem 1.125rem; font-size: 1rem; }
  .faq__a p { padding: 0 1.125rem 1.125rem; }

  .cta__actions .btn { width: 100%; }
  .cta__meta { gap: .75rem 1.25rem; font-size: .75rem; }

  .footer__grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .footer__base { justify-content: flex-start; gap: .5rem; }
}

/* ── Small mobile ──────────────────────────────────────────────────────── */
@media (max-width: 380px) {
  :root { --gutter: 1rem; }

  .hero__phone { width: 72%; }
  .hero__stage { min-height: 350px; }
  .float-chip--streak { top: 40px; }
  .float-chip--screen { bottom: 52px; }
  .hero__stat { flex: 1 1 100%; }
  .marquee__group { font-size: 1rem; }
  .rail__item { width: 184px; }
  .btn { padding: .9375rem 1.375rem; font-size: 1rem; }
}

/* ── Landscape phones ──────────────────────────────────────────────────── */
/* Short viewports: the tall hero would otherwise push the CTA off-screen. */
@media (max-height: 560px) and (orientation: landscape) {
  .hero { padding-top: 6rem; }
  .hero__stage { min-height: 320px; }
  .hero__phone { width: min(200px, 50%); }
  .nav__drawer { max-height: 70vh; overflow-y: auto; }
}

/* ── Touch / hover-less pointers ───────────────────────────────────────── */
/* Hover effects that depend on a cursor are dead weight on touch, and the
   sheen would stick on first tap. Turn them off rather than let them linger. */
@media (hover: none) {
  .card:hover { transform: none; }
  .glass:hover::after { opacity: 0; }
  .btn--primary:hover { transform: none; }
  .btn--primary:hover::after { transform: translateX(-130%); }
  .step__media:hover .step__phone { transform: none; }
  .rail { cursor: default; }
}

/* ── Wide screens ──────────────────────────────────────────────────────── */
@media (min-width: 1600px) {
  :root { --shell: 1320px; }
  .hero__stage { min-height: 680px; }
}

/* ── Print ─────────────────────────────────────────────────────────────── */
@media print {
  .atmosphere, .grain, .nav, .marquee-clip, .rail-hint { display: none !important; }
  body { background: #fff; color: #111; }
  .glass { background: none; box-shadow: none; border: 1px solid #ccc; }
  a { color: #111; }
}