/* ══════════════════════════════════════════════════════════════════
   CLICKBAIT — RESPONSIVE LAYER
   ──────────────────────────────────────────────────────────────────
   style.css is written MOBILE-FIRST. This file layers on:
     A. Mobile drawer navigation   (≤ 899px)
     B. Small phones              (≤ 380px)
     C. Large phones / small tablets (≥ 480px)
     D. Tablet                    (≥ 720px)
     E. Desktop                   (≥ 900px)
     F. Large desktop             (≥ 1200px)
     G. Reduced motion / print
   ══════════════════════════════════════════════════════════════════ */


/* ── A. MOBILE DRAWER NAV (≤ 899px) ──────────────────────────────── */
@media (max-width: 899px) {

  /* The header uses backdrop-filter, and ANY filter on an ancestor makes it
     the containing block for position:fixed children. That would anchor this
     drawer to the header instead of the screen, so it drifts as you scroll.
     The blur is barely visible on a black page anyway — drop it on phones,
     which are the only place the drawer exists. */
  .header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(0, 0, 0, .94);
  }

  .nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: fixed;
    top: 0; right: 0;
    bottom: 0;               /* pins it to the bottom regardless of unit support */
    z-index: 99;
    width: min(82vw, 330px);
    /* Three declarations on purpose. Older browsers stop at 100vh; newer ones
       use 100dvh, which accounts for the phone's collapsing address bar.
       Without a fallback the whole rule is dropped and the drawer collapses
       to the height of its links — which is the bug this fixes. */
    height: 100vh;
    height: 100dvh;
    padding: 92px 26px 32px;
    background: #050505;
    border-left: 1px solid var(--line);
    transform: translateX(105%);
    transition: transform .42s var(--ease);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;   /* stop scrolling the page behind it */
  }

  .nav-toggle:checked ~ .header .nav { transform: translateX(0); }

  .nav__link {
    font-size: 1rem;
    letter-spacing: .1em;
    color: var(--text);
    padding: 15px 0;
    border-bottom: 1px solid var(--line);
  }
  .nav__link::after { display: none; }
  .nav__link:hover { color: var(--accent); }

  .nav__cta {
    margin-top: 22px;
    width: 100%;
    --btn-py: 15px;
    font-size: .8rem;
  }
}


/* ── B. SMALL PHONES (≤ 380px) ───────────────────────────────────── */
@media (max-width: 380px) {
  :root { --pad-x: 16px; --section-y: 58px; }

  .hero__title  { font-size: 1.3rem; }
  .btn          { font-size: .74rem; letter-spacing: .07em; }
  .btn--lg      { --btn-px: 22px; }
  .stat         { padding: 20px 12px; }
  .stat__num    { font-size: 1.45rem; }
  .tstep__card  { padding: 24px 18px; }
  .fact         { padding: 22px 18px; }
  .faq__q       { font-size: .94rem; padding-right: 48px; }
  .sub-head     { font-size: .9rem; }
  .mobile-bar   { font-size: .74rem; padding: 14px; }
}


/* ── B2. PHONE LAYOUT (≤ 719px) ──────────────────────────────────── */
@media (max-width: 719px) {
  /* stops the floating bar from sitting on top of the last footer line */
  .footer { padding-bottom: 92px; }

  /* Section headers are centred on phones — matches the hero and reads
     cleaner in a narrow column. */
  .section,
  .section__title,
  .section__sub { text-align: center; }

  .section__title,
  .section__sub { margin-inline: auto; }

  .sub-head { justify-content: center; text-align: center; }

  /* Single centred CTA. It sizes to its text rather than stretching edge
     to edge — a full-bleed bar reads as a banner, not a button. */
  .hero__actions .btn {
    --btn-px: 30px;
    flex: 0 0 auto;
    font-size: .78rem;
    letter-spacing: .08em;
  }

  /* footer stays left-aligned — centred link lists are hard to scan */
  .footer, .footer__grid, .footer__col { text-align: left; }
  .footer__blurb { margin-inline: 0; }

  /* Carousel arrows are a mouse affordance. On a phone they sit on top of
     the cards and the strip is swipeable anyway, so drop them. */
  .carousel--ready .carousel__nav { display: none; }
}


/* ── C. LARGE PHONES (≥ 480px) ───────────────────────────────────── */
@media (min-width: 480px) {
  .cta__actions {
    flex-direction: row;
    justify-content: center;
    max-width: none;
  }
  .cta__actions .btn { flex: 0 1 auto; }

  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
}


/* ── D. TABLET (≥ 720px) ─────────────────────────────────────────── */
@media (min-width: 720px) {
  :root { --pad-x: 32px; --section-y: 96px; }

  /* There's room now, so bring back everything the phone layout drops:
     the subheading, the social-proof row, and the heading above the VSL. */
  .hero { padding-block: 64px 52px; }
  .hero__sub   { display: block; margin-bottom: 4px; }
  .hero__trust { display: flex; }
  .vsl__head   { display: block; }
  .vsl__cta    { display: flex; }
  .section--tight { padding-block: 40px var(--section-y); }

  .hero__actions { gap: 14px; margin-top: 30px; }
  .hero__actions .btn { --btn-px: 30px; font-size: .8rem; letter-spacing: .09em; }

  .grid { gap: 20px; }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }

  /* How it works becomes a real horizontal framework */
  .timeline {
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    padding-top: 4px;
  }
  .timeline__rail { display: block; }
  .tstep__stem { height: 46px; }

  /* the four highlight cells sit in one row, split by hairlines */
  .factstrip { grid-template-columns: repeat(4, 1fr); }
  .fact { border-bottom: 0; border-right: 1px solid var(--line); }
  .fact:last-child { border-right: 0; }

  .stats { gap: 16px; }

  .carousel__track .vcard { flex-basis: 260px; }

  .marquee__group { gap: 52px; padding-right: 52px; }
  .brand__logo    { height: 38px; width: 110px; }

  .sub-head { margin-top: 72px; font-size: 1.1rem; }
  .section-cta { margin-top: 64px; }

  .footer__grid { grid-template-columns: repeat(2, 1fr); gap: 44px; }
  .footer__brand { grid-column: 1 / -1; }

  .footer__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
  }
  .footer__fine { max-width: 46ch; text-align: right; }

  .faq__q { font-size: 1.06rem; padding: 22px 60px 22px 24px; }
  .faq__a { padding: 0 24px 24px; font-size: .98rem; }

  /* the sticky mobile bar is only for phones */
  .mobile-bar { display: none; }
}


/* ── E. DESKTOP (≥ 900px) ────────────────────────────────────────── */
@media (min-width: 900px) {
  :root { --section-y: 118px; }

  /* Horizontal nav, no burger */
  .nav {
    display: flex;
    align-items: center;
    gap: 30px;
  }
  .burger { display: none; }
  .nav-scrim { display: none; }

  .header__inner { height: 78px; }
  .logo__img { height: 30px; }

  .hero { padding-block: 92px 76px; }
  /* This heading is a full sentence, not a three-word slogan. Left at the
     mobile scale it runs to four lines on a wide screen, which reads loud
     and cheap rather than confident. Smaller type over a wider measure
     settles it into three balanced lines. */
  .hero__title {
    /* min matches the tablet cap above, so the size only ever grows */
    font-size: clamp(2rem, 2.6vw, 2.35rem);
    max-width: 40ch;
    line-height: 1.3;
    margin-bottom: 22px;
  }

  .section__title { font-size: 3.1rem; }

  .grid--3 { grid-template-columns: repeat(3, 1fr); }

  .lead { font-size: 1.06rem; }

  .tstep__card { padding: 32px 26px; }
  .tstep__title { font-size: 1.2rem; }

  .carousel { margin-inline: 0; }
  .carousel__track { padding-inline: 56px; }
  .carousel__track .vcard { flex-basis: 300px; }
  .carousel__nav--prev { left: -6px; }
  .carousel__nav--next { right: -6px; }

  .footer__grid {
    grid-template-columns: 1.6fr 1fr 1fr 1.1fr;
    gap: 40px;
  }
  .footer__brand { grid-column: auto; }

  .cta { padding-block: 130px; }
}


/* ── F. LARGE DESKTOP (≥ 1200px) ─────────────────────────────────── */
@media (min-width: 1200px) {
  .hero__sub   { font-size: 1.14rem; }
  .grid        { gap: 24px; }
  .marquee__group { gap: 64px; padding-right: 64px; }
  .brand__logo    { height: 42px; width: 122px; }
}


/* ── G. ACCESSIBILITY / PRINT ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .marquee__track { animation: none; }
  [data-aos] { opacity: 1 !important; transform: none !important; }
}

@media print {
  .header, .mobile-bar, .lightbox, .hero__glow, .cta__glow { display: none !important; }
  body { background: #fff; color: #000; }
}