/* Cascade — mobile experience for the marketing surface.
   The pages are desktop-first with heavy inline styles, so every rule in the
   single breakpoint block below uses targeted selectors + !important to beat
   the inline declarations. Nothing here fires above 760px — desktop rendering
   is byte-identical. Console pages are separately gated on phones by
   console-chrome.js; auth.html keeps signup usable and gates sign-in itself. */

/* The [hidden] attribute must always win. Many elements here carry inline
   display:flex/grid in their opening tag, which outranks the UA's
   [hidden]{display:none} and left banners/overlays stuck visible. */
[hidden] { display: none !important; }

/* Phone-scale version of the hero/defense drift. The desktop keyframe pushes to
   scale(1.12); in a portrait box that crops the subject out of frame, so the
   phone drift is gentler. Referenced only from inside the breakpoint below. */
@keyframes casc-drift-m {
  0%   { transform: scale(1.02) translate3d(0,0,0); }
  100% { transform: scale(1.07) translate3d(-0.7%,-0.5%,0); }
}

@media (max-width: 760px) {

  /* ---------- 0 · the page never scrolls sideways ---------- */
  html, body { max-width: 100%; overflow-x: hidden; }
  h1, h2, h3 { overflow-wrap: break-word; word-break: break-word; }
  img, video, canvas, svg { max-width: 100%; }
  /* background clips are deliberately oversized (inset:-2%;width:104%) so the
     slow drift never exposes an edge — the blanket max-width above would clip
     4% off the right of every hero/defense panel. */
  video[data-clip] { max-width: none !important; }
  /* code + tables scroll inside their own box, not the page */
  pre { overflow-x: auto !important; max-width: 100%; -webkit-overflow-scrolling: touch; }
  table { display: block; overflow-x: auto; max-width: 100%; }
  textarea { max-width: 100%; }

  /* ---------- 1 · header: wordmark + wrapping nav ---------- */
  header { flex-wrap: wrap !important; row-gap: 10px !important;
           padding: 14px 18px !important; }
  header nav { flex-wrap: wrap !important; column-gap: 18px !important; row-gap: 10px !important; }
  header nav a, header nav span { padding: 4px 0; }
  /* no header group may exceed the viewport (docs search + CTA group) */
  header > div { max-width: 100% !important; flex-wrap: wrap !important; min-width: 0 !important; }
  header input#search { min-width: 120px !important; flex: 1 1 120px !important; }

  /* ---------- 2 · type scale ---------- */
  /* display h1 (index hero) */
  [style*="font:700 122px"] { font-size: clamp(38px, 12.5vw, 50px) !important;
    line-height: .98 !important; letter-spacing: -.038em !important; }
  /* page h1s */
  [style*="font:700 92px"], [style*="font:700 74px"],
  [style*="font:700 68px"], [style*="font:700 66px"] {
    font-size: clamp(34px, 9.5vw, 38px) !important;
    line-height: 1.06 !important; letter-spacing: -.028em !important; }
  /* section h2s */
  [style*="font:700 62px"], [style*="font:700 58px"], [style*="font:700 56px"],
  [style*="font:700 54px"], [style*="font:700 48px"] {
    font-size: 26px !important; line-height: 1.16 !important; letter-spacing: -.022em !important; }
  [style*="font:700 46px"], [style*="font:700 42px"], [style*="font:700 40px"],
  [style*="font:700 38px"], [style*="font:700 36px"] {
    font-size: 24px !important; line-height: 1.18 !important; letter-spacing: -.02em !important; }
  [style*="font:700 34px"], [style*="font:700 32px"], [style*="font:700 30px"] {
    font-size: 22px !important; line-height: 1.2 !important; letter-spacing: -.018em !important; }
  /* lead + body paragraphs settle at 15px */
  [style*="font:400 25px"] { font-size: 17px !important; line-height: 1.5 !important; }
  [style*="font:400 20px"], [style*="font:400 19px"], [style*="font:400 18px"] {
    font-size: 15px !important; line-height: 1.58 !important; }
  [style*="font:400 17px"], [style*="font:400 16px"] {
    font-size: 15px !important; line-height: 1.58 !important; }

  /* ---------- 3 · gutters down to 18px, section padding roughly halved ---------- */
  [style*="px 74px"], [style*="padding:0 74px"],
  [style*="px 34px"], [style*="padding:0 34px"],
  [style*="px 40px"] { padding-left: 18px !important; padding-right: 18px !important; }
  [style*="padding:96px"], [style*="padding:100px"], [style*="padding:104px"] {
    padding-top: 54px !important; }
  [style*="padding:80px 74px"] { padding-top: 44px !important; padding-bottom: 44px !important; }
  [style*="padding:56px 74px"], [style*="padding:60px 74px"] { padding-top: 36px !important; }
  [style*="padding:56px 34px"], [style*="padding:52px 34px"],
  [style*="padding:48px 34px"], [style*="padding:44px 34px"] { padding-top: 32px !important; }
  [style*="padding:74px 60px"] { padding: 44px 18px 0 !important; }
  /* inner cards that used 30-34px insets breathe at 20px */
  [style*="padding:30px 32px"], [style*="padding:30px 34px"],
  [style*="padding:48px 40px"], [style*="padding:38px 40px"],
  [style*="padding:52px 44px"], [style*="padding:56px 40px"] {
    padding-left: 20px !important; padding-right: 20px !important; }
  [style*="padding:52px 44px"] { padding-top: 34px !important; padding-bottom: 34px !important; }

  /* ---------- 4 · grids: stack to one column ---------- */
  [style*="grid-template-columns:1fr 1fr;gap:56px"],
  [style*="grid-template-columns:1fr 1fr;gap:1px"],
  [style*="grid-template-columns:330px 1fr 300px"],
  [style*="grid-template-columns:222px"],
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:1fr auto"],
  [style*="minmax(0,180px)"],
  [style*="minmax(320px"], [style*="minmax(340px"], [style*="minmax(360px"],
  [style*="minmax(380px"], [style*="minmax(390px"], [style*="minmax(400px"],
  [style*="minmax(420px"], [style*="minmax(460px"] {
    grid-template-columns: minmax(0,1fr) !important; }
  /* metric strips go 2-up instead */
  [style*="grid-template-columns:repeat(7,1fr)"],
  [style*="grid-template-columns:1fr 1fr 1fr"],
  #devFacts { grid-template-columns: 1fr 1fr !important; }
  #fleet > div:last-child { grid-column: 1 / -1; }

  /* footer: brand full-width, link columns 2-up */
  footer { grid-template-columns: 1fr 1fr !important; gap: 30px 20px !important;
           padding: 40px 18px 28px !important; }
  footer > div:first-child { grid-column: 1 / -1; }

  /* ---------- 5 · heroes & heavy media ---------- */
  /* Phones DO get the clips. index.html serves the `-m.mp4` encodes (720px long
     edge, ~0.17–0.43 MB each, faststart) and lazy-attaches them scene by scene,
     so the whole home page stays inside a few MB. Everything below is about
     making that footage read as a designed panel at 375px rather than a wide
     desktop still squeezed into a letterbox. */

  /* hero panel: phone-shaped and cinematic, capped so it never eats the fold */
  .vloader[style*="height:660px"] { height: clamp(452px, 70vh, 580px) !important; }
  /* gentler drift — the desktop keyframe crops the subject out at this width */
  #heroLayers video, #defenseLayers video { animation-name: casc-drift-m !important; }

  /* scene pill: back on, sized for a phone and tucked into the corner */
  div[style*="top:22px;right:26px"] {
    top: 12px !important; right: 12px !important;
    gap: 9px !important; padding: 6px 11px !important; }
  #sceneName { font-size: 8.5px !important; letter-spacing: .13em !important; }
  #sceneBars { gap: 4px !important; }
  #sceneBars span { width: 13px !important; }

  /* headline block: deeper scrim so type stays legible over moving footage,
     and the two CTAs stack into full-width targets instead of wrapping ragged */
  .vloader > div[style*="padding:52px 40px 44px"] {
    padding-top: 104px !important; padding-bottom: 24px !important;
    gap: 13px !important;
    background: linear-gradient(180deg,
      rgba(10,11,15,0) 0%, rgba(10,11,15,.5) 28%,
      rgba(10,11,15,.86) 64%, rgba(10,11,15,.96) 100%) !important; }
  .vloader > div[style*="padding:52px 40px 44px"] > div[style*="letter-spacing:.28em"] {
    font-size: 9px !important; letter-spacing: .24em !important; }

  /* hero + closing CTA rows wrap and centre */
  [style*="display:flex;gap:9px"] { flex-wrap: wrap !important; }
  [style*="display:flex;gap:10px;justify-content:center"] { flex-wrap: wrap !important; }
  .vloader div[style*="display:flex;gap:9px;margin-top:18px"],
  .vloader div[style*="display:flex;gap:10px;justify-content:center"] {
    flex-direction: column !important; align-items: center !important;
    width: 100% !important; gap: 10px !important; margin-top: 4px !important; }
  .vloader div[style*="display:flex;gap:9px;margin-top:18px"] > a,
  .vloader div[style*="display:flex;gap:10px;justify-content:center"] > a {
    /* these anchors carry inline `padding:13px 24px` and are content-box by
       default — without border-box, width:100% overflows the column by 48px */
    box-sizing: border-box !important;
    width: 100% !important; max-width: 296px !important; text-align: center !important; }

  /* two-worlds row: matching clip / canvas heights */
  [style*="height:250px"] { height: 210px !important; }

  /* defense: the 90deg desktop scrim leaves the right half of a portrait frame
     bright under the copy — go vertical, and open the top so the clip is seen */
  #defense .vloader > div[style*="linear-gradient(90deg"] {
    background: linear-gradient(180deg,
      rgba(10,11,15,.36) 0%, rgba(10,11,15,.74) 27%,
      rgba(10,11,15,.93) 56%, rgba(10,11,15,.97) 100%) !important; }
  #defense div[style*="padding:80px 74px"] {
    padding-top: 152px !important; padding-bottom: 40px !important; }
  #defenseCards { grid-template-columns: 1fr 1fr !important; }
  #defenseCards > div { padding: 14px 15px !important; }

  /* closing: same treatment — clip visible above the fold of the panel, scrim
     carries the type, stat strip 2-up with a wrapping caption */
  .vloader > div[style*="rgba(10,11,15,.5) 0%,rgba(10,11,15,.82)"] {
    background: linear-gradient(180deg,
      rgba(10,11,15,.3) 0%, rgba(10,11,15,.7) 32%,
      rgba(10,11,15,.9) 68%, rgba(10,11,15,.95) 100%) !important; }
  .vloader > div[style*="padding:74px 60px"] { padding: 116px 18px 0 !important; }
  /* The closing scrim carries z-index:2; the stat strip and its caption are
     position:relative with z-index:auto, so they paint *underneath* it and
     disappear. Lift them onto the headline block's layer. (Same thing happens
     at desktop width — left alone here so this file stays phone-only.) */
  #fleet, #fleet + div { z-index: 3 !important; }
  #fleet { margin-top: 40px !important; }
  #fleet + div { flex-direction: column !important; align-items: flex-start !important;
    gap: 6px !important; padding: 12px 18px 14px !important; }
  #fleet + div span { font-size: 9px !important; line-height: 1.45 !important; }
  /* live-demo panel hugs the viewport */
  [style*="margin:28px 40px 0"] { margin: 20px 0 0 !important;
    padding-left: 0 !important; padding-right: 0 !important; }
  /* model strip: tighter, smaller marks */
  #modelmarks { gap: 14px 26px !important; }
  #modelmarks img { height: 19px !important; }
  #modelmarks [data-model] span { font-size: 17px !important; }
  /* pricing estimator right column reads left-aligned when stacked */
  [style*="text-align:right;min-width:0"] { text-align: left !important; }

  /* ---------- 6 · touch targets ---------- */
  a[style*="padding:13px 24px"], a[style*="padding:13px 22px"],
  a[style*="padding:14px 26px"], a[style*="padding:12px 22px"] {
    padding-top: 15px !important; padding-bottom: 15px !important; }
  a[style*="padding:9px 16px"] { padding: 12px 16px !important; } /* header CTA pill */
  [data-copy] { padding: 12px 16px !important; }
  #actions [data-act] { padding-top: 15px !important; padding-bottom: 15px !important; }
  [data-track], [data-mode] { padding-top: 11px !important; padding-bottom: 11px !important; }
  /* verify.html actions — reachable from the phone gate, must be tappable */
  #pasteRun, #pasteReset { padding: 14px 20px !important; }
  label[for="pasteFile"] { padding: 8px 13px !important; }
  #pw_toggle, #pw_copy { padding: 8px 13px !important; }
  #pw_gen { padding: 10px 15px !important; }
  /* stop iOS zoom-on-focus without redesigning the fields */
  input, textarea, select { font-size: 16px !important; }

  /* ---------- 7 · auth.html: signup genuinely phone-usable ---------- */
  /* two-panel split stacks; the dark side panel collapses to a compact
     brand header (wordmark + kicker + title), form panel follows */
  div[style*="min-height:100vh"][style*="grid-template-columns"] {
    grid-template-columns: minmax(0,1fr) !important; min-height: 0 !important; }
  div[style*="min-height:100vh"] > div[style*="background:#0A0B0F"] {
    padding: 18px 18px 22px !important; }
  div[style*="min-height:100vh"] > div[style*="background:#0A0B0F"] a[style*="margin-bottom:56px"] {
    margin-bottom: 16px !important; }
  #sideTitle { font-size: 22px !important; line-height: 1.15 !important; margin-bottom: 0 !important; }
  #sideBody, #sideFacts, #sideFoot { display: none !important; }
  #sideFacts + p { display: none !important; }
  div[style*="min-height:100vh"] > div[style*="background:#0A0B0F"] > div[style*="margin-top:44px"] {
    display: none !important; }
  div[style*="min-height:100vh"] > div:last-child { padding: 26px 18px 36px !important; }
}