/* ============================================================
   INTELLICAMP — phone layer
   Loaded LAST on every marketing page. Only fixes for narrow
   screens live here (plus overflow containment that is invisible
   on desktop), so the desktop design is untouched.
   ============================================================ */

/* Containment: nothing inside the page body may widen the document.
   `clip` (unlike `hidden`) is not a scroll container, so sticky
   elements and window scrolling keep working. */
main { overflow-x: clip; }

@media (max-width: 899px) {
  /* Sideways reveals park their element 90px off to one side until it
     scrolls in — on a phone that pushes the page wider than the screen.
     Rise in from below instead. */
  [data-reveal="left"],
  [data-reveal="right"] { transform: translateY(40px); }
}

/* ============================================================
   Header + mobile menu (below 1024px — the burger breakpoint)
   style.css section 21 made the nav a fixed drawer, but a later
   `.nav { position: relative }` (the hover-pill block) overrode it,
   and the header's backdrop-filter would trap a fixed child anyway.
   So the drawer hung off the header bar as a thin column that was
   visible even while "closed". Rebuilt here as a full-width sheet
   anchored under the header, hidden (not just moved) when closed.
   ============================================================ */
@media (max-width: 1023px) {
  .nav {
    position: absolute;
    inset: auto;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    /* header bar shrinks by 12px once stuck; the extra bottom padding keeps
       the last items reachable whichever height it has */
    height: calc(100vh - var(--header-h) + 12px);
    height: calc(100dvh - var(--header-h) + 12px);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 0.4rem var(--gutter) calc(var(--stripe-h) + 2.5rem + env(safe-area-inset-bottom, 0px));
    background: var(--ink);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.35s var(--ease), visibility 0s linear 0.35s;
  }

  body.nav-open .nav {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.3s ease, transform 0.35s var(--ease), visibility 0s;
  }

  /* the header must stay put while its sheet is open */
  body.nav-open .header { transform: none; }

  /* scroll lock: body's overflow is the viewport's, html covers iOS */
  html:has(body.nav-open) { overflow: hidden; }
  body.nav-open { overflow: hidden; }

  .nav__item { width: 100%; }

  .nav__link {
    min-height: 56px;
    padding: 0.85rem 0.15rem;
    white-space: normal;
  }

  .nav__link svg { flex-shrink: 0; width: 14px; height: 14px; }

  .mega { padding: 0.4rem 0 0.8rem; }
  .mega__list { grid-template-columns: 1fr; gap: 0.15rem; }
  .mega__link { padding: 0.75rem 0.8rem; }
  .mega__link:hover { transform: none; }

  /* Sign in / Sign up, copied into the sheet by main.js — on a phone the
     header has no room for them, so without this they were unreachable */
  .nav__cta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    padding-top: 1.4rem;
  }

  .nav__cta a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
  }

  /* the burger doubles as the close button: keep it a full tap target */
  .burger { width: 44px; height: 44px; flex-shrink: 0; }

  /* floating widgets would sit on top of the open sheet */
  body.nav-open .tp__tab,
  body.nav-open .dcta,
  body.nav-open .dspark,
  body.nav-open .xcta { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
}

@media (min-width: 1024px) {
  .nav__cta { display: none; }
}

/* ---------- Announcement stripe ----------
   One nowrap line with a full-size pill: on a phone the text was cut to
   "New: AI evaluation now marks long-answer questi…" next to an oversized
   button. Let the text wrap and shrink the pill. */
@media (max-width: 640px) {
  .stripe {
    height: auto;
    min-height: var(--stripe-h);
    padding: 0.4rem var(--gutter);
    gap: 0.6rem;
    justify-content: space-between;
  }

  .stripe p {
    white-space: normal;
    overflow: visible;
    line-height: 1.3;
    font-size: 0.75rem;
    min-width: 0;
  }

  .stripe__cta {
    height: 26px;
    padding-inline: 0.6rem;
    font-size: 0.75rem;
    gap: 0.25rem;
  }
}

/* ---------- Appearance tab: tuck it in on phones ---------- */
@media (max-width: 760px) {
  .tp__tab {
    width: 30px;
    height: 40px;
    border-radius: 10px 0 0 10px;
    top: auto;
    bottom: 34%;
    translate: none;
  }
  .tp__tab:hover { width: 36px; }
  .tp__tab svg { width: 15px; height: 15px; }
}

/* ---------- Shared phone type + spacing scale (owner-approved) ----------
   Set on the tokens so every page that uses them follows:
   h1/hero --step-4 ≈ 32–38px · h2 --step-3 ≈ 26–30px · h3/lede --step-1 18px
   · body --step-0 16px · side gutter 20px · section padding ≈ 60px. */
@media (max-width: 767px) {
  :root {
    --step-0: 1rem;
    --step-1: 1.125rem;
    --step-3: clamp(1.6rem, 7vw, 1.9rem);
    --step-4: clamp(2rem, 8.5vw, 2.4rem);
    --gutter: 1.25rem;
  }

  h1 { line-height: 1.1; }

  .section { padding-block: 3.75rem; }
  .section--tight { padding-block: 3rem; }

  .btn { min-height: 44px; }
}

/* ---------- Footer on phones: tap-sized links and icons ---------- */
@media (max-width: 767px) {
  .footer__links { gap: 0.2rem; }
  .footer__links a { min-height: 40px; line-height: 1.35; }
  .socials { gap: 0.6rem; }
  .socials a { width: 44px; height: 44px; }
}

/* ---------- Back-to-top on phones ----------
   Sits clear of the home indicator, in line with the other floating buttons
   (demo.css lifts the Experience button above it on the same assumption). */
@media (max-width: 700px) {
  .totop { bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); }
}