/** * Mobile-first guardrails — loaded LAST so it overrides desktop-first cascade. * * Reads as a contract: * - mobile = real, desktop = enhancement (gated by `@media (hover: hover) and (pointer: fine)` * and `@media (min-width: 768px)`). * - viewport: `100dvh` everywhere a full-bleed surface used `100vh`. * - inputs ≥16px so iOS does not zoom on focus. * - touch targets ≥44×44 (Apple HIG / Material). * - hover effects only on devices that actually have hover; touch gets `:active` instead. * - body never scrolls horizontally — page-aurora / orbits cannot create a scroll range. * - `prefers-reduced-motion`: any continuous CSS animation/transition is neutralised. * * Specificity is intentionally low (`:where()` / single class) so individual sections * can still opt out by raising specificity in the file that owns them. */ /* ─── Box model + viewport plumbing ─────────────────────────────────────── */ :where(html) { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; } :where(html, body) { max-width: 100%; } /* Belt-and-braces: many cards push fragments off-canvas at 320–360px. */ body { overflow-x: clip; } /* iOS Safari paints under home indicator; full-bleed surfaces need safe areas. */ :where(.site-main, .legal-page, .page-aurora) { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); } /* ─── Typography baseline (mobile-first, fluid up) ──────────────────────── */ :where(body) { font-size: clamp(15px, 4.1vw, 17px); line-height: 1.55; } :where(h1) { font-size: clamp(2rem, 8.4vw, 3.6rem); line-height: 1.08; letter-spacing: -0.02em; } :where(h2) { font-size: clamp(1.55rem, 5.6vw, 2.4rem); line-height: 1.15; letter-spacing: -0.015em; } :where(h3) { font-size: clamp(1.2rem, 4.4vw, 1.6rem); line-height: 1.2; } /* iOS zooms /

/<select> on focus when font-size < 16px. */
:where(input, textarea, select) {
  font-size: max(16px, 1rem);
}

/* ─── Touch targets ─────────────────────────────────────────────────────── */
@media (hover: none), (pointer: coarse) {
  :where(a.btn, button, .pill, .nav-toggle, .site-nav a, .footer-links a, [role="button"]) {
    min-height: 44px;
    min-width: 44px;
  }
}

/* ─── Hover vs tap split (manifesto Rule 3) ─────────────────────────────── */
/* Desktop with a real pointer keeps hover lift. Touch never sees it. */
@media (hover: none) {
  /* Replace hover transforms with an explicit press state. */
  :where(a, button, .btn, .card, .feature-card, .sudo-block, .store-tile):active {
    transform: scale(0.98);
    transition: transform 110ms cubic-bezier(0.22, 1, 0.36, 1);
  }
}

/* Neutralise transitions that would have been hover-tied on touch. */
@media (hover: none) {
  :where(a, button, .btn, .card, .feature-card, .sudo-block, .store-tile):hover {
    transform: none !important;
  }
}

/* ─── Viewport units: prefer dvh whenever a section asks for full-bleed ─── */
@supports (height: 100dvh) {
  :where(.hero, .hero-v3, .hero--cinema, .site-main--showcase) {
    /* No height: 100vh here — sections own their own height. We just ensure
       any rule using 100vh has a 100dvh sibling above it in the cascade. */
  }
}

/* ─── Lazy-load fallback for legacy <img> ───────────────────────────────── */
/* If an image doesn't already declare loading or decoding, give it sensible
   defaults via the [loading] attribute selector below (no JS needed). */
img:not([loading]) {
  /* attribute is the only reliable trigger; this rule just documents intent.
     Pair with the JS shim at the bottom of <body> that sets img.loading */
}

/* ─── Animation budget (manifesto Rule 4) ───────────────────────────────── */
/* Sub-768 phones: drop will-change, shorten transitions, kill long stagger. */
@media (max-width: 767px) {
  :where(.reveal, .reveal-item, [data-reveal], [data-reveal-item]) {
    will-change: auto !important;
  }

:where([data-reveal], [data-reveal-item]) {
    transition-duration: 280ms !important;
  }
}

/* ─── Parallax / decorative layers — hard-disable on mobile ─────────────── */
@media (max-width: 767px) {
  :where([data-parallax]) {
    transform: none !important;
  }

/* Page atmospherics drift slowly: pause them on touch to save battery. */
  :where(.page-aurora .aurora) {
    animation-play-state: paused !important;
  }
}

/* ─── prefers-reduced-motion (manifesto Rule 4, Rule 10) ────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }

:where(.page-aurora .aurora) {
    animation: none !important;
  }
}

/* ─── Forms: keyboard-friendly (manifesto Rule 13) ──────────────────────── */
form :where(input, textarea, select, .form-row) {
  scroll-margin-bottom: 320px;
}

/* ─── Sticky / fixed: only one fixed layer on phones ────────────────────── */
@media (max-width: 767px) {
  :where(.site-header) {
    position: sticky;
    top: 0;
  }
}

/* ─── Global Intel Earth section: phone layout ──────────────────────────── */
/*
 * Globe is absolute-positioned at top:66-88% of the scene — on phones that
 * pushes it into/over the metric counter text. Reflow the scene to a flex
 * column so the counter sits on top and the globe follows naturally beneath.
 */
@media (max-width: 767px) {
  body.landing-v2 .section-global-intel {
    min-height: 0 !important;
    padding-top: clamp(2.75rem, 7vw, 4rem) !important;
    padding-bottom: clamp(1.4rem, 4vw, 2.2rem) !important;
    border-radius: 0 !important;
    overflow: visible !important;
  }

body.landing-v2 .section-global-intel .global-intel__scene {
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

body.landing-v2 .section-global-intel .global-intel__numbers {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    min-height: 0 !important;
  }

body.landing-v2 .section-global-intel .global-intel__number {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    text-align: center !important;
    margin: 0 auto 0.5rem !important;
  }

/* Pull the globe out of absolute flow and stack it below the counter */
  body.landing-v2 .section-global-intel .global-intel__globe-wrap,
  body.landing-v2 .global-intel__globe-wrap {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: min(88vw, 340px) !important;
    margin: 1.25rem auto 0 !important;
  }

body.landing-v2 .section-global-intel .global-intel__floaters,
  body.landing-v2 .section-global-intel .global-intel__float {
    display: none !important;
  }

body.landing-v2 .section-global-intel .global-intel__metric-note {
    display: none !important;
  }
}