/* ============================================================================
   04-RESPONSIVE — Adapts the desktop layout down to the Figma mobile frame.
   Breakpoints:
     ≤1024px  tablet (reduce columns)
     ≤860px   stack split / two-column sections
     ≤768px   mobile design (20px gutter, hamburger nav, single column)
   Mobile is properly re-laid-out, not merely scaled.
   ============================================================================ */

/* ---- ≤1024px : tablet -------------------------------------------------- */
@media (max-width: 1024px) {
  .site-nav__list { gap: 32px; }
  .feature-cards { grid-template-columns: repeat(2, 1fr); }
  .pathways__grid, .faq__grid { gap: 48px; }
  .journey { gap: 8px; }
}

/* ---- ≤860px : stack two-column & split sections ------------------------ */
@media (max-width: 860px) {
  .why__grid { grid-template-columns: 1fr; gap: 16px; }
  .why__headline { max-width: 100%; }

  /* split sections become stacked: text first, media second */
  .science { grid-template-columns: 1fr; }
  .science__text { order: 1; padding-block: 56px; }
  .science__media { order: 2; min-height: 460px; }
  .science__italic { padding-left: 1.5em; }

  .founder { grid-template-columns: 1fr; }
  /* position:relative (NOT static) so the absolute <img> stays contained instead of
     escaping to the page and covering the hero */
  .founder__media { order: 1; position: relative; top: auto; height: 52vh; min-height: 340px; max-height: 460px; }
  .founder__media img { object-position: 44% 30%; }   /* keep Dr. Patel in frame, not the backdrop */
  .founder__content { order: 2; }
  .founder__name { top: 20px; left: 20px; }

  .pathways__grid { grid-template-columns: 1fr; gap: 24px; }
  .pathways__intro { position: static; max-width: 100%; }
  .pathway:first-child { padding-top: 32px; }

  .features__head { grid-template-columns: 1fr; gap: 20px; }
  .features__intro { justify-self: stretch; max-width: none; }   /* fill the column; don't overflow */

  .plans__head { grid-template-columns: 1fr; gap: 20px; }
  .plans__intro { justify-self: start; align-self: start; }
  .plans__grid { grid-template-columns: 1fr; gap: 48px; }

  .faq__grid { display: block; }      /* plain stack on mobile — no grid track to blow out */
  .faq__intro { position: static; margin-bottom: 40px; }
  .faq__headline { margin-bottom: 20px; font-size: clamp(2.25rem, 9vw, 3rem); }

  /* timeline → vertical */
  .timeline { grid-template-columns: 1fr; gap: 0; padding: 0 0 0 30px; }
  .timeline::before { top: 0; bottom: 0; left: 6px; right: auto; width: 2px; height: auto; }
  .timeline::after  { top: 0; left: 6px; width: 2px; height: 0; }
  .timeline.is-active::after { width: 2px; height: 100%; }
  .timeline__step { padding-bottom: 48px; }
  .timeline__step:last-child { padding-bottom: 0; }
  .timeline__dot { top: 4px; left: -30px; }

  /* footer */
  .site-footer__cols { grid-template-columns: 1fr 1fr; gap: 40px 24px; }
  .site-footer__bottom { grid-template-columns: 1fr; text-align: left; gap: 12px; }
  .site-footer__legal { justify-self: start; }
}

/* ---- ≤768px : MOBILE design ------------------------------------------- */
@media (max-width: 768px) {
  :root { --gutter: var(--gutter-mob); }

  /* header: swap nav + cta for a hamburger */
  .site-nav,
  .site-header__cta { display: none; }
  .site-header__toggle { display: inline-flex; }
  .site-header__inner::after { display: none; }

  /* hero: taller on mobile so the thoughts get a clear upper zone above the headline */
  .hero { min-height: min(90svh, 820px); align-items: flex-end; padding-block: 96px 56px; }
  .hero__title { margin-bottom: 20px; }
  /* smaller headline so the first sentence sits on two lines, not three */
  .hero__title-line, .hero__title-italic { font-size: clamp(2rem, 8vw, 2.5rem); }
  .hero__body  { margin-bottom: 24px; }
  .hero .btn   { width: 100%; }

  /* three thoughts, kept in the TOP third of the video — away from the headline */
  .hero__tags .bubble { max-width: 200px; }
  .hero__tags .bubble:nth-child(1) { left: 6%;  top: 9%; }
  .hero__tags .bubble:nth-child(2) { display: none; }
  .hero__tags .bubble:nth-child(3) { left: 8%;  top: 30%; }
  .hero__tags .bubble:nth-child(4) { left: 42%; top: 19%; }
  .hero__tags .bubble:nth-child(5) { display: none; }

  /* journey → vertical list with downward arrows */
  .journey { flex-direction: column; align-items: flex-start; gap: 20px; margin-top: 64px; }
  .journey__arrow { transform: rotate(90deg); }
  .journey__step--2,
  .journey__step--3,
  .journey__step--4 { color: var(--color-rust); opacity: .45; }
  .journey__step--3 { opacity: .3; }
  .journey__step--4 { opacity: .18; }

  /* cards → single column, full width (absolute layout needs the card to stretch) */
  .feature-cards { grid-template-columns: 1fr; }

  /* pricing features → single column */
  .plan__features { grid-template-columns: 1fr; }
  .plan__desc { max-width: 100%; margin-bottom: 40px; }

  /* science: headline must not overflow the narrow column */
  .science__headline { font-size: clamp(1.875rem, 8.5vw, 2.5rem); }
  .science__italic { padding-left: 0; }

  /* pills: shrink + pull the cluster inward so labels don't run off-screen */
  .science__media { min-height: 460px; }
  .science__pills { transform: scale(.78); transform-origin: center; }
  .pill { padding: 6px 12px; font-size: .75rem; }
  .science__corner { font-size: .6875rem; }
  .science__corner--tl, .science__corner--tr { top: 22px; }
  .science__corner--tl { left: 18px; }
  .science__corner--tr { right: 18px; }
  .science__corner--br { bottom: 22px; right: 18px; }

  /* footer cols stack */
  .site-footer__cols { grid-template-columns: 1fr; gap: 36px; }
  .newsletter { max-width: 100%; }

  /* modal → single column form (image hidden on small screens) */
  .modal { padding: 16px; }
  .modal__dialog { grid-template-columns: 1fr; max-height: calc(100vh - 32px); }
  .modal__media { display: none; }
  .modal__form { padding: 32px 24px; }
  .modal__interests { gap: 16px; }
  .modal__interests .checkbox { flex-basis: 100%; }
}

/* ---- ≤420px : fine tuning --------------------------------------------- */
@media (max-width: 420px) {
  .founder__quote { font-size: 2.75rem; }
  .plan__card { padding: 24px; }
  .modal__form { padding: 28px 20px; }
}