/* ============================================================================
   LANDSEED — mobile / responsive layer. Loaded LAST on every page so it wins
   the cascade. !important is used where page-level inline styles must be beaten.
   ========================================================================== */

/* ---- Mobile nav (hamburger) ---- */
.site-nav .nav-toggle { display: none; }

@media (max-width: 860px) {
  .site-nav {
    flex-wrap: wrap;
    padding: 12px 18px; height: auto;
  }
  .site-nav .brand { flex: 1; }
  .site-nav .nav-toggle {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 40px; height: 36px; padding: 0 9px;
    background: transparent; border: 1px solid var(--line); border-radius: 8px;
    cursor: pointer;
  }
  .site-nav .nav-toggle span {
    display: block; height: 1.5px; width: 100%; background: var(--text);
    transition: transform 200ms ease, opacity 200ms ease;
  }
  .site-nav.open .nav-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .site-nav.open .nav-toggle span:nth-child(2) { opacity: 0; }
  .site-nav.open .nav-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  .site-nav .links {
    display: none;
    flex-basis: 100%; flex-direction: column; align-items: flex-start;
    gap: 4px; margin-top: 12px; padding-top: 12px;
    border-top: 1px solid var(--line-soft);
  }
  .site-nav.open .links { display: flex; }
  .site-nav .links a { width: 100%; padding: 10px 2px; font-size: 16px; }
  .site-nav .links a::after { display: none; }
  .site-nav .pill { margin-top: 8px; height: 40px; padding: 0 20px; }
}

/* ---- Footer ---- */
@media (max-width: 860px) {
  .site-footer .cols { grid-template-columns: 1fr 1fr; gap: 32px; }
  .site-footer .inner { padding: 48px 22px 22px; }
}
@media (max-width: 520px) {
  .site-footer .cols { grid-template-columns: 1fr; gap: 28px; }
  .site-footer .brand-blurb { max-width: none; }
  .site-footer .signature { grid-template-columns: 1fr; gap: 16px; text-align: center; }
  .site-footer .signature > :last-child { text-align: center; }
  .site-footer .signature .dots { justify-self: center; gap: 20px; }
}

/* ============================================================================
   Shared section padding
   ========================================================================== */
@media (max-width: 720px) {
  .section, .section.tight { padding: 64px 20px !important; }
  .surface { padding: 40px 20px !important; }
  .chapter { padding: 56px 20px !important; }
}

/* ============================================================================
   HOME (index.html)
   ========================================================================== */
@media (max-width: 720px) {
  .hero { min-height: calc(100vh - 56px); padding: 48px 20px 72px !important; }
  .hero .corner { display: none; }
  .thesis-band { padding: 72px 20px 40px !important; }
  .thesis-step { grid-template-columns: 56px 1fr !important; gap: 20px !important; }
  .thesis-step .row { grid-template-columns: 1fr !important; gap: 6px !important; }
  .thesis-contrast { grid-template-columns: 1fr !important; gap: 14px !important; }
  .flywheel-section { padding: 56px 20px !important; }
}

/* Six-dimension teaser — 6 cols is unusable on phones */
@media (max-width: 900px) { .dim-teaser { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 600px) {
  .dim-teaser { grid-template-columns: repeat(2, 1fr) !important; }
  .dim-teaser .slot { min-height: 0 !important; padding: 22px 16px 20px !important; }
  .dim-teaser .slot .name { min-height: 0 !important; }
}

/* ============================================================================
   FLYWHEEL — on mobile, drop the orbit diagram and render the 6 nodes as a
   clean vertical list (the absolutely-positioned nodes can't fit a phone).
   Applies on home + /about.
   ========================================================================== */
@media (max-width: 760px) {
  .flywheel-wrap { height: auto !important; display: block !important; margin-top: 24px; }
  .flywheel { position: static !important; width: auto !important; height: auto !important; }
  .fw-orbit, .fw-ambient, .fw-center { display: none !important; }
  .fw-node {
    position: static !important; transform: none !important;
    width: auto !important; opacity: 1 !important; animation: none !important;
    margin: 0 0 10px !important;
  }
  .fw-node p { font-size: 13px !important; }
  .fw-node h4 { font-size: 15px !important; }
  #flywheel .container { display: block !important; }
}

/* ============================================================================
   ABOUT (about.css)
   ========================================================================== */
@media (max-width: 820px) {
  .about-hero { padding: 110px 20px 64px !important; }
  .chapter .chapter-head { flex-direction: column !important; gap: 14px !important; margin-bottom: 40px !important; }
  .chapter .chapter-head .num { padding-top: 0 !important; }
  .op-stack { grid-template-columns: 1fr !important; }
  .deck-card { grid-template-columns: 1fr !important; gap: 28px !important; padding: 28px 22px !important; }
  .lifecycle-bar { grid-template-columns: 1fr !important; gap: 14px !important; }
  .lifecycle-bar .lc-arrow { display: none !important; }
  .do-panel { grid-template-columns: 1fr !important; }
  .phase { grid-template-columns: 1fr !important; gap: 8px !important; }
  .about-closing { padding: 100px 20px 110px !important; }

  /* Spectrum carousel: stack each panel, drop the big floating arrows (swipe + dots remain) */
  .spectrum .spec-panel { grid-template-columns: 1fr !important; gap: 22px !important; padding: 32px 22px 28px !important; min-height: 0 !important; }
  .spec-panel .rhs { grid-template-columns: 1fr 1fr !important; }
  .spec-arrow { display: none !important; }
}
@media (max-width: 520px) {
  .receipts { grid-template-columns: 1fr !important; }
  .spec-panel .rhs { grid-template-columns: 1fr !important; }
}

/* ============================================================================
   PLATFORM (platform.css)
   ========================================================================== */
@media (max-width: 860px) {
  .platform-hero { padding: 110px 20px 56px !important; }
  .device-shell { grid-template-columns: 1fr !important; }
  .onboard-shell { grid-template-columns: 1fr !important; }
  .dashboard-split { grid-template-columns: 1fr !important; }
  .dashboard-globe-card { max-width: 340px; margin: 0 auto; }
}
@media (max-width: 600px) {
  /* Calculator readout fits a phone */
  .calc-readout { padding: 24px 18px !important; }
  .calc-readout .eci .value { font-size: 50px !important; }
  .calc-readout .dim-row { grid-template-columns: 86px 1fr 38px !important; gap: 10px !important; }
  .calc-globe .corner { font-size: 8px !important; }
  .calc-globe .hint .big { font-size: clamp(20px, 6vw, 28px) !important; }
  /* Onboarding form: single column inputs (beats inline grid styles) */
  .form-row.col2 { grid-template-columns: 1fr !important; }
  .onboard-pane { padding: 22px 18px !important; }
  .onboard-pane-body .nav { flex-wrap: wrap; gap: 10px; }
}

/* ============================================================================
   TEAM (team.html) — leadership grid handled inline (3/2/1). Tighten hero.
   ========================================================================== */
@media (max-width: 720px) {
  .team-hero { padding: 104px 20px 48px !important; }
  .team-section { padding: 48px 20px !important; }
  .team-section .head { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ============================================================================
   REQUEST ACCESS (request-access.html)
   ========================================================================== */
@media (max-width: 560px) {
  .ra-wrap { padding: 40px 16px 64px !important; }
  .ra-card { padding: 30px 22px 26px !important; }
  .ra-actions { flex-direction: column; align-items: stretch; }
  .ra-actions .ra-submit { justify-content: center; }
}

/* ============================================================================
   MOBILE REVIEW FIXES (from rendered-screenshot review)
   ========================================================================== */
@media (max-width: 720px) {
  /* Headings/heroes were overflowing — shrink + allow hard wrap */
  .platform-hero .display, .about-hero .display, .team-hero .display {
    font-size: clamp(30px, 9vw, 46px) !important;
  }
  .surface-head h2, .chapter .chapter-head h2, .section-title, .topline,
  .deck-card h3, .spec-panel .lhs .name, .lc-step .word {
    font-size: clamp(24px, 6.6vw, 36px) !important;
  }
  h1, h2, h3, h4, p, .display, .lede, .section-desc, .section-title, .topline,
  .deck-card .body, .spec-panel .desc, .fw-node p {
    overflow-wrap: anywhere; word-break: break-word;
  }
  .platform-hero .lede, .about-hero .lede, .team-hero .lede { font-size: 16px !important; }
  img, svg, video { max-width: 100%; }
}

/* Earth Pulse Node device diagram — reflow so nothing overflows */
@media (max-width: 860px) {
  .device-shell { display: block !important; }
  .device-canvas {
    min-height: 430px !important; width: 100% !important;
    border-right: none !important; border-bottom: 1px solid var(--line-soft);
  }
  .device-sensor { width: 70px !important; height: 70px !important; }
  .device-sensor .ring { width: 44px !important; height: 44px !important; }
  .device-sensor .lbl { font-size: 8px !important; letter-spacing: 0.1em !important; }
  .sensor-tabs { grid-template-columns: repeat(3, 1fr) !important; }
  .device-panel { padding: 22px 18px !important; }
  .device-panel .specs { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 460px) {
  .device-panel .specs { grid-template-columns: 1fr !important; }
  .device-canvas { min-height: 380px !important; }
  .device-sensor { width: 58px !important; height: 58px !important; }
}

/* Final polish: declutter the tiny calculator map on phones */
@media (max-width: 600px) {
  .calc-globe .corner { display: none !important; }
  .calc-globe { aspect-ratio: 3 / 2 !important; }  /* a bit taller for easier pin taps */
}

/* Earth Pulse Node diagram — give it real vertical room on mobile so the
   sensors clear the status pill (top) and the caption (bottom). */
@media (max-width: 860px) {
  .device-canvas { min-height: 560px !important; }
  .device-sensor.weather  { top: 17% !important; left: 50% !important; }
  .device-sensor.acoustic { top: 33% !important; left: 18% !important; }
  .device-sensor.camera   { top: 33% !important; left: 82% !important; }
  .device-sensor.soil     { top: 72% !important; left: 20% !important; }
  .device-sensor.water    { top: 72% !important; left: 80% !important; }
  .device-canvas .canvas-status { top: 14px !important; right: 14px !important; padding: 6px 10px !important; font-size: 9px !important; }
  .device-canvas .canvas-caption { left: 18px !important; bottom: 18px !important; }
}
@media (max-width: 460px) {
  .device-canvas { min-height: 520px !important; }
}