/* ============================================================
   MOBILE LANE — tune phone/tablet HERE. Desktop stays in index.html.
   Breakpoints: 720 (phone), 420 (small), short-height landscape.
   Edit the :root knobs first — rules read them.
   ============================================================ */

:root{
  --m-pad-x: 20px;
  --m-page-vh: 680vh;
  --m-hero-top: calc(2.5vh + var(--safe-t));
  --m-hero-mb: 14vh;
  --m-hero-pad: 40px 0 28px;
  --m-headline: clamp(28px, 7.6vw, 38px);
  --m-subhead: 14.5px;
  --m-signal-max: 320px;
  --m-signal-pad: 16px 14px 14px;
  --m-section-gap: 48px;
  --m-ink-opacity: 0.82;
  --m-video-pos: 50% 36%;
  --m-persp: 720px;
  --m-persp-origin: 50% 22%;
  --m-arch-enter-blur: 0px;
  --m-arch-out-blur: 0px;
  --m-card-radius: 14px;
  --m-arch-dur: 0.55s;
  --m-arch-move: 0.72s;
}

@media (max-width: 420px){
  :root{
    --m-pad-x: 14px;
    --m-page-vh: 720vh;
    --m-signal-max: 100%;
    --m-signal-pad: 14px 12px 12px;
    --m-headline: clamp(26px, 7.2vw, 34px);
    --m-subhead: 14px;
    --m-section-gap: 40px;
  }
}

/* Touch: kill hover lifts */
@media (hover: none){
  .capability:hover{ transform: none; box-shadow: none; }
  form.notify button:hover{ transform: none; box-shadow: none; }
  .stat-card:hover,
  .fact-tile:hover{ transform: none; }
  .hotspot:hover{ transform: translate(-50%, -50%); }
}
@media (hover: none) and (max-width: 720px){
  .hotspot:hover{ transform: none; }
}

/* —— Phone / tablet layout + motion —— */
@media (max-width: 720px){
  html.is-phone{ -webkit-tap-highlight-color: transparent; }

  .wrap{
    padding: 0 var(--m-pad-x);
    perspective: var(--m-persp);
    perspective-origin: var(--m-persp-origin);
  }
  .page{ min-height: var(--m-page-vh); }
  .page-inner{ padding-bottom: calc(88px + var(--safe-b)); }

  nav.topbar{ padding-top: calc(18px + var(--safe-t)); }
  .topbar-inner{ padding-bottom: 16px; gap: 10px; }
  .logo{ font-size: 17px; gap: 8px; }
  .logo-mark{ width: 20px; height: 20px; }
  .status-pill{ padding: 5px 9px 5px 8px; font-size: 9.5px; }
  .status-pill span.status-text{ display: none; }

  header.hero{
    top: var(--m-hero-top);
    margin-bottom: var(--m-hero-mb);
    padding: var(--m-hero-pad);
    text-align: center;
  }
  h1.headline{
    font-size: var(--m-headline);
    max-width: 16ch;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.12;
  }
  p.subhead{
    font-size: var(--m-subhead);
    max-width: 34ch;
    margin-left: auto;
    margin-right: auto;
    margin-top: 18px;
    line-height: 1.65;
  }
  .eyebrow{ font-size: 10.5px; margin-bottom: 18px; }

  .readout{
    margin-top: 28px;
    margin-left: auto;
    margin-right: auto;
    padding: 12px 14px;
    gap: 8px;
    font-size: 10px;
    flex-direction: column;
    align-items: center;
    max-width: 280px;
  }
  .readout-left{ gap: 10px 14px; width: 100%; justify-content: center; }
  .scrub-meter{ margin-top: 10px; width: 100%; }

  .scroll-band{
    min-height: 28vh;
    margin-top: 36px;
    margin-bottom: 16px;
    text-align: center;
  }
  .scroll-band .whisper{
    font-size: 11px;
    max-width: 32ch;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.55;
  }

  /* Notify bay — compact, centered, never full-bleed */
  .signal{
    align-items: center;
    flex-direction: column;
    gap: 10px;
    padding: var(--m-signal-pad);
    margin-top: 32px;
    margin-left: auto;
    margin-right: auto;
    max-width: var(--m-signal-max);
    width: 100%;
    text-align: center;
    border-radius: 12px;
  }
  .signal-copy{ max-width: 100%; }
  .signal-copy h2{ font-size: 15px; margin-bottom: 5px; }
  .signal-copy p{ max-width: none; font-size: 11.5px; line-height: 1.5; }
  .signal-form{ max-width: 100%; }
  form.notify{
    flex-direction: column;
    max-width: none;
    gap: 8px;
    width: 100%;
  }
  form.notify input[type="email"]{
    padding: 12px;
    font-size: 16px; /* iOS zoom guard */
    width: 100%;
    border-radius: 10px;
  }
  form.notify button{
    padding: 12px;
    min-height: 44px;
    width: 100%;
    border-radius: 10px;
  }

  .capabilities{
    grid-template-columns: 1fr;
    overflow: visible;
    margin-top: var(--m-section-gap);
    gap: 14px;
    background: transparent;
    border: none;
  }
  .capability{
    border: 1px solid var(--line);
    border-radius: var(--m-card-radius) !important;
    padding: 22px 18px;
    text-align: center;
  }
  .capability:first-child,
  .capability:last-child{ border-radius: var(--m-card-radius) !important; }
  .capability .tag{ margin-bottom: 12px; }
  .capability h3{ margin-bottom: 10px; font-size: 15.5px; }
  .capability p{ font-size: 13px; line-height: 1.6; }

  footer{
    margin-top: 56px;
    padding: 28px 0 calc(36px + var(--safe-b));
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-align: center;
  }
  footer .links{ gap: 18px; justify-content: center; }

  .section-label{
    margin: var(--m-section-gap) 0 14px;
    text-align: center;
  }
  .section-label h2{ font-size: 20px; }
  .section-label p{
    font-size: 13.5px;
    margin-top: 8px;
    max-width: 36ch;
    margin-left: auto;
    margin-right: auto;
  }

  .stat-field{
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 6px;
  }
  .stat-card{
    padding: 20px 14px 16px;
    border-radius: var(--m-card-radius);
    min-height: 132px;
    text-align: center;
  }
  .stat-card .num{ font-size: 26px; margin-bottom: 10px; }
  .stat-card .label{ font-size: 12.5px; margin-bottom: 6px; line-height: 1.35; }
  .stat-card .src{ font-size: 9.5px; line-height: 1.35; }
  .stat-card .open-hint{ top: 10px; right: 10px; }

  .briefing{
    gap: 18px;
    padding: 22px 16px;
    margin-top: 22px;
    border-radius: 14px;
    text-align: center;
  }
  .briefing h3{ font-size: 17px; margin-bottom: 10px; }
  .briefing p{ font-size: 13.5px; }
  .briefing ul{ gap: 12px; text-align: left; }
  .chip-row{ gap: 8px; margin-top: 14px; justify-content: center; }

  .fact-grid{
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 6px;
  }
  .fact-tile{
    min-height: 0;
    padding: 20px 16px;
    border-radius: var(--m-card-radius);
    display: flex;
    flex-direction: column;
    text-align: center;
  }
  .fact-tile .tag{ margin-bottom: 12px; }
  .fact-tile h3{ font-size: 15.5px; margin-bottom: 8px; }
  .fact-tile p{ font-size: 13px; flex: 1; }
  .fact-tile .cta{ margin-top: 12px; }

  /* Hotspots → tappable grid */
  .popup-hotspots{
    min-height: 0;
    margin-top: 22px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 42px 12px 14px;
    border-radius: 14px;
  }
  .popup-hotspots .frame-label{ left: 12px; top: 10px; }
  .hotspot{
    position: relative;
    left: auto !important;
    top: auto !important;
    width: auto;
    height: auto;
    min-height: 46px;
    border-radius: 11px;
    transform: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    background: rgba(93,243,230,0.1);
  }
  .hotspot::before{
    inset: -4px;
    animation: none;
    opacity: 0.3;
  }
  .hotspot:hover,
  .hotspot:focus-visible{
    transform: none !important;
    background: rgba(93,243,230,0.2);
  }
  .hotspot .tip{
    position: static;
    left: auto;
    top: auto;
    transform: none;
    opacity: 1;
    white-space: nowrap;
    max-width: none;
    text-align: center;
    background: transparent;
    border: none;
    padding: 0;
    color: var(--text);
    font-size: 10.5px;
    letter-spacing: 0.08em;
  }

  .modal-root{ padding: 12px; align-items: flex-end; }
  .modal-panel{
    padding: 22px 16px 18px;
    width: 100%;
    max-height: min(78vh, 680px);
    border-radius: 16px 16px 12px 12px;
    margin-bottom: var(--safe-b);
  }
  .modal-panel h3{ font-size: 18px; }
  .modal-panel .stat-line{ font-size: 24px; }

  /* Video stage — phone framing + cheap paint */
  .bg-stage{ transform: translateZ(0); }
  .bg-stage video{
    object-position: var(--m-video-pos);
    inset: -1%;
    width: 102%;
    height: 102%;
    left: -1%;
    top: -1%;
    will-change: auto;
    transform: scale(calc(1.02 + var(--scrub) * 0.04)) translate3d(0, calc(var(--scrub) * -1.2%), 0);
    filter: brightness(0.68) saturate(1.08) contrast(1.02);
  }
  .bg-veil{ opacity: calc(0.94 - var(--scrub) * 0.1); }
  .bg-glow, .bg-film{ animation: none !important; opacity: 0.35; }
  .bg-veil::after{ opacity: 0.45; }

  /* Kill ambient FX that thrash the GPU on phones */
  .fx-layer{
    opacity: var(--m-ink-opacity);
    will-change: auto;
    contain: paint;
  }
  .fx-constellation,
  .fx-particle,
  .fx-radar,
  .fx-shard,
  .fx-sat,
  .fx-hex,
  .fx-beam,
  .fx-grid-plane,
  .fx-scan-arc,
  .fx-micro-hex,
  .fx-energy-beam,
  .fx-ring.r2, .fx-ring.r3, .fx-ring.r4, .fx-ring.r5,
  .fx-arc.a2, .fx-arc.a3,
  .fx-glyph,
  .fx-tick,
  .fx-orb.o5, .fx-orb.o6, .fx-orb.o7, .fx-orb.o8,
  .pulse.p5, .pulse.p6, .pulse.p7, .pulse.p8, .pulse.p9, .pulse.p10{ display: none !important; }
  .fx-ring, .fx-orb, .fx-diamond, .fx-bracket, .fx-cross, .fx-arc, .fx-node-line{
    animation: none !important;
    filter: none !important;
  }
  .tunnel-rails .rib{ opacity: 0.45; animation: none !important; }
  .tunnel-rails .rail.l2, .tunnel-rails .rail.r2{ display: none; }
  .tunnel-rails .rail{
    transform: none !important;
    opacity: 0.4;
  }

  /* Cards / chrome — no backdrop blur (huge mobile cost) */
  .status-pill,
  .readout,
  .signal,
  .capability,
  .stat-card,
  .briefing,
  .fact-tile,
  .popup-hotspots,
  .modal-panel{
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .headline .word{ animation: none !important; filter: none !important; }
  .status-dot, .hl, .hotspot::before{ animation: none !important; }

  /* Ink drawings — assemble without living loops / drop-shadow */
  .ink-draw{
    margin: 14px 0 4px;
    max-width: 100%;
    contain: layout paint;
  }
  .ink-draw.ink-tall{ margin: 18px 0 6px; }
  .ink-draw svg{ max-height: 200px; }
  .ink-draw.ink-tall svg{ max-height: 240px; }
  .ink-draw .ink-label{ font-size: 7px; }
  .ink-draw .ink-plane{ transition-duration: 0.55s, 0.75s; }
  .ink-draw .ink-stroke{
    transition-duration: 0.85s, 0.45s, 0.45s;
    filter: none !important;
  }
  .ink-draw .ink-bar,
  .ink-draw .ink-fill{ transition-duration: 0.4s, 0.65s; }
  .ink-draw .ink-orbit,
  .ink-draw .ink-orbit-slow,
  .ink-draw .ink-scan,
  .ink-draw .ink-flow,
  .ink-draw .ink-drift,
  .ink-draw .ink-spark,
  .ink-draw .ink-halo,
  .ink-draw .ink-stroke.alive,
  .ink-draw .ink-node.alive,
  .ink-draw .ink-bar.alive,
  .ink-draw .ink-fill.alive,
  .ink-draw .ink-plane.alive,
  .ink-draw .ink-anno.alive{
    animation: none !important;
  }
  .ink-draw .ink-spark{ display: none; }

  /* Tunnel assemble — no blur filters (main glitch source) */
  .arch,
  .arch-child{
    will-change: auto;
    filter: none !important;
    transform-style: flat;
    backface-visibility: hidden;
  }
  .arch{
    transition:
      opacity var(--m-arch-dur) cubic-bezier(0.22, 1, 0.36, 1),
      transform var(--m-arch-move) cubic-bezier(0.16, 1, 0.3, 1);
  }
  .arch.is-in,
  .arch.is-out{ filter: none !important; }
  .arch-delay-1{ transition-delay: 0.01s; }
  .arch-delay-2{ transition-delay: 0.03s; }
  .arch-delay-3{ transition-delay: 0.05s; }
  .arch-delay-4{ transition-delay: 0.07s; }
  .arch-delay-5{ transition-delay: 0.09s; }
  .arch-delay-6{ transition-delay: 0.11s; }
  .arch-delay-7{ transition-delay: 0.13s; }
  .arch-delay-8{ transition-delay: 0.15s; }

  .arch-child{
    transition:
      opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.62s cubic-bezier(0.16, 1, 0.3, 1);
    transform: translate3d(0, 14px, -48px) scale(0.86);
  }
  .arch-child.c1{ transition-delay: 0.02s; }
  .arch-child.c2{ transition-delay: 0.04s; }
  .arch-child.c3{ transition-delay: 0.06s; }
  .arch-child.c4{ transition-delay: 0.08s; }
  .arch-child.c5{ transition-delay: 0.1s; }
  .arch-child.c6{ transition-delay: 0.12s; }
  .arch-child.c7{ transition-delay: 0.14s; }
  .arch-child.alt{ transform: translate3d(18px, 22px, -40px) scale(0.88); }
  .arch-child.spin{ transform: translate3d(0, 36px, -48px) scale(0.86); }
  .arch-child.dive{ transform: translate3d(0, -28px, -40px) scale(0.9); }
  .arch-child.wall-l{ transform: translate3d(-20px, 10px, -56px) scale(0.82); }
  .arch-child.wall-r{ transform: translate3d(20px, 10px, -56px) scale(0.82); }
  .arch-child.floor{ transform: translate3d(0, 24px, -52px) scale(0.84); }
  .arch-child.ceil{ transform: translate3d(0, -24px, -52px) scale(0.84); }

  .arch.is-out{ opacity: 0; }
  .arch.is-out .arch-child{
    transform: translate3d(0, -10px, -160px) scale(0.12);
    filter: none !important;
  }
  .arch.is-out .arch-child.alt{
    transform: translate3d(28px, -18px, -170px) scale(0.1);
  }
  .arch.is-out .arch-child.spin{
    transform: translate3d(-20px, -16px, -170px) scale(0.1);
  }
  .arch.is-out .arch-child.dive{
    transform: translate3d(0, 24px, -180px) scale(0.1);
  }
  .arch.is-out .arch-child.wall-l{ transform: translate3d(-36px, -12px, -160px) scale(0.1); }
  .arch.is-out .arch-child.wall-r{ transform: translate3d(36px, -12px, -160px) scale(0.1); }
  .arch.is-out .arch-child.floor{ transform: translate3d(-10px, 28px, -160px) scale(0.1); }
  .arch.is-out .arch-child.ceil{ transform: translate3d(10px, -28px, -160px) scale(0.1); }

  /* Vanish into distance — lighter phone vectors (no blur / skew) */
  .arch-tunnel, .arch-eclipse{
    transform: translate3d(0, 12vh, -220px) scale(0.28);
  }
  .arch-tunnel.is-out, .arch-eclipse.is-out{
    transform: translate3d(0, -2vh, -340px) scale(0.06);
  }
  .arch-bay{
    transform: translate3d(-36vw, 10vh, -180px) scale(0.3);
    transform-origin: left center;
  }
  .arch-bay.is-out{
    transform: translate3d(40vw, -18vh, -300px) scale(0.08);
    transform-origin: right top;
  }
  .arch-left, .arch-fold, .arch-blade{
    transform: translate3d(-36vw, 10vh, -160px) scale(0.42);
  }
  .arch-left.is-out, .arch-fold.is-out, .arch-blade.is-out{
    transform: translate3d(-48vw, -18vh, -300px) scale(0.07);
  }
  .arch-right, .arch-cantilever, .arch-yaw{
    transform: translate3d(36vw, 8vh, -160px) scale(0.42);
  }
  .arch-right.is-out, .arch-cantilever.is-out, .arch-yaw.is-out{
    transform: translate3d(48vw, 18vh, -300px) scale(0.07);
  }
  .arch-rise, .arch-pivot, .arch-lattice, .arch-fan{
    transform: translate3d(0, 36vh, -150px) scale(0.4);
  }
  .arch-rise.is-out, .arch-pivot.is-out, .arch-lattice.is-out, .arch-fan.is-out{
    transform: translate3d(-8vw, 36vh, -320px) scale(0.06);
  }
  .arch-drop, .arch-plunge{
    transform: translate3d(0, -28vh, -170px) scale(0.38);
  }
  .arch-drop.is-out, .arch-plunge.is-out{
    transform: translate3d(8vw, -34vh, -320px) scale(0.06);
  }
  .arch-spiral, .arch-helix, .arch-orbit{
    transform: translate3d(0, 10vh, -200px) scale(0.3);
  }
  .arch-spiral.is-out, .arch-helix.is-out, .arch-orbit.is-out{
    transform: translate3d(-28vw, -14vh, -340px) scale(0.05);
  }
  .arch-hero{
    transform: translate3d(0, 8vh, -160px) scale(0.7);
  }
  .arch-hero.is-out{
    transform: translate3d(0, -3vh, -260px) scale(0.12);
  }
  .arch-shear, .arch-weave{
    transform: translate3d(-20vw, 16vh, -140px) scale(0.44);
  }
  .arch-shear.is-out, .arch-weave.is-out{
    transform: translate3d(32vw, -22vh, -280px) scale(0.08);
  }
  .arch-snap, .arch-ricochet{
    transform: translate3d(22vw, -10vh, -150px) scale(0.38);
  }
  .arch-snap.is-out, .arch-ricochet.is-out{
    transform: translate3d(-36vw, 22vh, -290px) scale(0.07);
  }
  .arch-axon{
    transform: translate3d(-18vw, 14vh, -160px) scale(0.36);
  }
  .arch-axon.is-out{
    transform: translate3d(30vw, -18vh, -300px) scale(0.06);
  }

  /* Below-fold paint deferral */
  .capabilities,
  .stat-field,
  .fact-grid,
  .briefing,
  .popup-hotspots,
  footer{
    content-visibility: auto;
    contain-intrinsic-size: 1px 420px;
  }
}

/* Small phones */
@media (max-width: 420px){
  .wrap{ padding: 0 var(--m-pad-x); }
  .page{ min-height: var(--m-page-vh); }
  .scroll-band{ min-height: 24vh; margin-top: 32px; }
  .capabilities{ gap: 12px; margin-top: var(--m-section-gap); }
  .capability{ padding: 20px 14px; }
  .stat-field{ grid-template-columns: 1fr; gap: 12px; }
  .stat-card{ min-height: 0; }
  .briefing{ padding: 18px 14px; gap: 16px; }
  .fact-tile{ padding: 18px 14px; }
  .popup-hotspots{ gap: 8px; padding: 40px 10px 12px; }
  .signal{ margin-top: 28px; }
  .section-label{ margin: var(--m-section-gap) 0 12px; }
  .fx-ring, .pulse.p3, .pulse.p4{ display: none !important; }
  .ink-draw svg{ max-height: 170px; }
  .ink-draw.ink-tall svg{ max-height: 200px; }
}

/* Short / landscape phones */
@media (max-height: 520px) and (max-width: 900px){
  :root{
    --m-hero-mb: 8vh;
    --m-hero-pad: 24px 0 16px;
    --m-page-vh: 520vh;
    --m-arch-dur: 0.45s;
    --m-arch-move: 0.58s;
  }
  header.hero{ margin-bottom: var(--m-hero-mb); padding: var(--m-hero-pad); }
  .scroll-band{ min-height: 18vh; margin-top: 20px; }
  .page{ min-height: var(--m-page-vh); }
  .fx-layer{ display: none !important; }
  .ink-draw .ink-stroke{ transition-duration: 0.6s, 0.35s, 0.35s; }
}