/* ==========================================================================
   Obstoon — Responsive
   Mobile-first intent, then: tablet 48rem, small desktop 62rem,
   desktop 64rem, large desktop 80rem.
   Mobile preserves hierarchy, product identity, theme switcher and depth.
   ========================================================================== */

/* ==========================================================================
   Small mobile
   ========================================================================== */
@media (max-width: 29.99rem) {
  :root {
    --header-height: 64px;
  }

  .brand {
    font-size: 0.9375rem;
    letter-spacing: 0.1em;
  }

  .brand__sub {
    display: none;
  }

  .icon-btn {
    width: 38px;
    height: 38px;
  }

  .btn {
    width: 100%;
  }

  .btn-row {
    width: 100%;
  }

  .btn-row .btn {
    flex: 1 1 auto;
  }

  /* Product lockups inside cards stack their icon above the label */
  .ecosystem__head {
    gap: var(--space-2xs);
  }

  .ecosystem__name {
    font-size: var(--text-xl);
  }

  .hero-visual {
    min-height: 300px;
  }

  .scene {
    width: min(100%, 400px);
  }

  .bubble-card {
    width: min(58%, 190px);
    padding: 0.6rem;
  }

  .bubble-card__meter {
    height: 14px;
  }

  .track-field__status {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ==========================================================================
   Mobile / small tablet — pointer-based effects stay off
   ========================================================================== */
@media (max-width: 47.99rem) {
  .section-head--split {
    gap: var(--space-md);
  }

  .split {
    gap: var(--space-lg);
  }

  .statement {
    gap: var(--space-lg);
  }

  /* Keep a three-column matrix inside the viewport: let headers wrap and
     tighten the gutters instead of forcing a sideways scroll. */
  .spec-table th {
    white-space: normal;
  }

  .spec-table th,
  .spec-table td {
    padding-right: var(--space-sm);
  }
}

/* ==========================================================================
   Tablet
   ========================================================================== */
@media (min-width: 48rem) {
  :root {
    --header-height: 78px;
  }

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

  .ecosystem__item--speech {
    grid-column: 1 / -1;
  }

  .footer-mark {
    margin-top: var(--space-2xl);
  }
}

/* ==========================================================================
   Desktop — 3D gets its full budget
   ========================================================================== */
@media (min-width: 62rem) {
  .hero-visual {
    min-height: clamp(440px, 40vw, 620px);
  }

  .ecosystem {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
  }

  .ecosystem__item--speech {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .ecosystem__item--library {
    grid-column: 2;
    grid-row: 1;
  }

  .ecosystem__item--tracker {
    grid-column: 2;
    grid-row: 2;
  }
}

@media (min-width: 64rem) {
  .hero__content {
    max-width: 42rem;
  }
}

/* ==========================================================================
   Large desktop — increase presence, not density
   ========================================================================== */
@media (min-width: 80rem) {
  .hero__grid {
    grid-template-columns: minmax(0, 0.96fr) minmax(0, 1.04fr);
  }

  .hero-visual {
    min-height: 660px;
  }

  .scene {
    width: min(100%, 620px);
  }

  .book {
    width: min(72%, 430px);
  }

  .bubble-card {
    width: min(56%, 250px);
  }
}

/* ==========================================================================
   Reduced 3D for small viewports — the object stays dimensional, just calmer
   ========================================================================== */
@media (max-width: 61.99rem) {
  :root {
    --perspective-scene: 1150px;
  }

  .layer--rings .rings i:nth-child(3) {
    display: none;
  }

  .floor__plate {
    background:
      radial-gradient(
        closest-side,
        color-mix(in srgb, var(--obj-2) 34%, transparent) 0%,
        transparent 68%
      );
  }

  .book {
    width: min(80%, 360px);
  }

  /* No bleed below the wide breakpoint: combined with the scene perspective a
     percentage wider than the scene box projects past the viewport and widens
     the document. */
  .wave-plane {
    width: 100%;
  }
}

@media (max-width: 47.99rem) {
  :root {
    --perspective-scene: 900px;
  }

  /* Flatten the floor and rings rather than removing the object */
  .layer--floor,
  .layer--shadow,
  .layer--rings {
    opacity: 0.75;
  }

  .rings i:nth-child(2) {
    display: none;
  }

  .hero__glow {
    inset: -10% -20% auto;
    height: 110%;
    opacity: 0.8;
  }

  /* The scene and the glow are deliberately wider than a narrow viewport.
     Clip them at the section edge so they never scroll the page sideways.
     `clip` rather than `hidden`: no scroll container, no sticky breakage. */
  .hero {
    overflow-x: clip;
  }

  .hero-visual {
    overflow-x: clip;
  }
}

/* ==========================================================================
   Coarse pointers: no pointer-reactive transforms, no hover-only affordances
   ========================================================================== */
@media (hover: none) {
  .site-nav__link::after {
    transition: none;
  }

  .ecosystem__item:hover,
  .download:hover,
  .feature:hover {
    transform: none;
  }
}

/* ==========================================================================
   Print — a legible document, no scene, no motion
   ========================================================================== */
@media print {
  body::before,
  body::after,
  .site-header,
  .site-footer,
  .mobile-nav,
  .hero-visual,
  .cta-band {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  .section {
    padding-block: 1.5rem;
  }

  a::after {
    content: " (" attr(href) ")";
    font-size: 0.75em;
    color: #444;
  }
}