/* ==========================================================================
   TeamTrek V3 — Responsive
   Mobile-first: the base stylesheets are the 390px layout. Each breakpoint
   below opts a section into a wider composition rather than scaling the
   desktop layout down.
   Tested at 390 · 430 · 768 · 1024 · 1280 · 1440 · 1920.
   ========================================================================== */

/* --------------------------------------------------------------------------
   ≤ 767px — small screens
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  :root { --container-pad: 1.125rem; }

  /* Hero: the aux cards would collide with the dashboard at this width */
  .hero__inner { padding-top: 3rem; padding-bottom: 3.5rem; }
  .hero__aux--feat { display: none; }
  .hero__aux--clock { left: auto; right: 0; top: -3.5rem; }
  /* Padding, not margin: the chip is absolutely positioned against the
     figure, so it needs room *inside* it to sit clear of the frame bar. */
  .hero__figure { padding-top: 4rem; }
  .hero-dash__stats > :nth-child(3) { display: none; }
  .hero__actions .btn { flex: 1 1 100%; }
  /* One point per line on a phone. Two would fit at 390px, but the pair then
     sits at two different text lengths and the row reads as a broken table
     rather than a list. */
  .hero__trust { flex-direction: column; gap: .5rem; }

  /* Assemble: a 300vh scroll stage is too tall for a phone — collapse it to
     a plain stacked grid that reveals normally. */
  .assemble__scroll { height: auto; }
  .assemble__sticky { position: static; min-height: 0; padding-block: 0; }
  .assemble__grid { grid-template-columns: 1fr; margin-top: 2rem; }
  .assemble__piece { transform: none !important; opacity: 1 !important; }
  .assemble__caption { min-height: 0; }

  /* Signal rail: the sticky two-column layout becomes a horizontal chip row
     above a single card, driven by taps instead of scroll. */
  .rail__layout { grid-template-columns: 1fr; gap: 1.5rem; margin-top: 2rem; }
  .rail__nav {
    position: static;
    grid-auto-flow: column; grid-auto-columns: max-content;
    gap: .5rem; overflow-x: auto; padding-bottom: .375rem;
    scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .rail__nav::-webkit-scrollbar { display: none; }
  /* The connected rail is a vertical idea — as a horizontal chip row the
     connectors have nothing to run along, so they are dropped and each marker
     just sits in its own chip. */
  .rail__step::before { display: none; }
  .rail__step { padding: .625rem .875rem; border-color: var(--neutral-200); background: #fff; }
  .rail__step-dot { width: 6px; height: 6px; box-shadow: none; }
  .rail__step.is-active .rail__step-dot { transform: none; box-shadow: none; }
  .rail__stage { position: static; }
  .rail__spacers { display: none; }
  .rail__row-note { display: none; }
  .rail__row-key { min-width: 74px; }

  .roles__panel { grid-template-columns: 1fr; min-height: 0; }
  .roles__metrics { grid-template-columns: 1fr 1fr; }

  .boundary__canvas { height: 260px; }
  .boundary__lists { grid-template-columns: 1fr; }

  .how__layout { grid-template-columns: 1fr; gap: 2.5rem; }
  .how__figure { position: static; }
  .how__stage { height: 380px; }
  .how__step { opacity: 1; }

  #product { --frame-cap: 300px; }

  .marquee { padding-block: 3rem; }
  .marquee__card { width: 256px; }
  .marquee__card--wide { width: 300px; }
  .marquee__viewport::before,
  .marquee__viewport::after { width: 40px; }

  .footer__cols { grid-template-columns: 1fr; gap: 2rem; }
  .footer__wordmark { margin-top: 2.5rem; }
}

/* --------------------------------------------------------------------------
   ≥ 600px
   -------------------------------------------------------------------------- */
@media (min-width: 600px) {
  .footer__cols { grid-template-columns: repeat(3, 1fr); }
}

/* --------------------------------------------------------------------------
   ≥ 768px — tablet
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  :root { --container-pad: 2rem; }

  .proof__row { grid-template-columns: auto 1fr; justify-items: end; gap: 2rem; }
  .proof__label { justify-self: start; }

  .section__split-head { grid-template-columns: 1.1fr 1fr; gap: 3rem; }

  .showcase__body { grid-template-columns: 1fr 1.15fr; gap: 3rem; }
  #product { --frame-cap: 400px; }
  .usecases__panel { grid-template-columns: 1.25fr .85fr; }
  .faq__grid { grid-template-columns: .8fr 1.2fr; gap: 3.5rem; }
  .faq__aside { position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; }
}

/* --------------------------------------------------------------------------
   ≥ 1024px — desktop
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
    gap: 3.5rem;
    padding-top: 3.5rem; padding-bottom: 7rem;
  }
  /* Room for the clock chip above the frame and the feature card below it */
  .hero__figure { padding-top: 4.25rem; padding-bottom: 15.75rem; }
  .hero__actions .btn { flex: 0 0 auto; }

  .footer__top { grid-template-columns: minmax(0, .95fr) minmax(0, 1.35fr); gap: 4rem; }

  /* The dashboard mock gains its sidebar once the frame is wide enough */
  .dash__aside { display: flex; }
}

/* --------------------------------------------------------------------------
   ≥ 1440px — large desktop: more breathing room, same measure
   -------------------------------------------------------------------------- */
@media (min-width: 1440px) {
  :root {
    --container-max: 1280px;
    --container-pad: 2.5rem;
    --section-y: 7.5rem;
    --section-y-lg: 9rem;
  }
  .rail__layout { grid-template-columns: 280px 1fr; gap: 4rem; }
  .how__layout { gap: 4.5rem; }
}

/* ≥ 1920px — the container is capped so line length stays readable; only the
   outer gutters grow. */
@media (min-width: 1920px) {
  :root { --container-max: 1360px; }
}

/* --------------------------------------------------------------------------
   Short viewports — the sticky assemble stage must still fit
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-height: 780px) {
  .assemble__sticky { padding-block: 2rem; }
  .assemble__head .h2 { font-size: 1.75rem; }
  .assemble__caption { font-size: .875rem; min-height: 2.5rem; }
  .assemble__grid { margin-top: 1.5rem; }
}

/* --------------------------------------------------------------------------
   Touch / no-hover devices: mega menus open on tap (JS), and hover-only
   affordances are neutralised so nothing sticks in a hover state.
   -------------------------------------------------------------------------- */
@media (hover: none) {
  .card--lift:hover,
  .voice:hover { transform: none; box-shadow: none; }
  .proof__logos:hover { opacity: .68; filter: grayscale(1); }
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */
@media print {
  .navbar, .mobile-menu, .marquee, .hero__canvas, .boundary__stage { display: none !important; }
  .assemble__scroll { height: auto; }
  .assemble__sticky { position: static; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}