/* Homepage on phones (user, 25 Sep 2026). Loaded last, so these override the page's own styles only at small widths;
   desktop is untouched.
   - hero: a short lede instead of the long one; one full-width "Book a free demo" (no product tour: the console has no
     phone layout)
   - Predict, Stop & Investigate: a vertical stack, Mission Control on top, the five modules as rows on a dashed spine,
     the agent at the foot in navy with a red edge (the desktop's wires and red plinth do not survive stacking)
   - From Evidence to Attack Story: the wide evidence diagram is left out; its steps and benefits tell the same story */
.hero .lead-m { display: none; }

@media (max-width: 700px) {
  /* ---- hero ---- */
  .hero .hgrid p.lead { display: none; }
  .hero .lead-m { display: block; margin: 20px 0 26px; font-size: 17px; line-height: 1.6; color: #d3daf5; }
  html[data-tone="light"] .hero .lead-m { color: var(--ink-2); }
  .hero .ctas .btn-g { display: none; }
  .hero .ctas .cta { width: 100%; justify-content: center; }

  /* ---- Predict, Stop & Investigate ---- */
  .plx .pi-wires { display: none; }
  .plx .pi-mc { margin: 0; justify-content: flex-start; gap: 16px; padding: 16px 20px; border-radius: 14px; }
  .plx .pi-mi svg { width: 38px; height: 38px; }
  .plx .pi-mc b { font-size: 22px; }
  .plx .pi-mc small { margin-top: 4px; font-size: 11px; letter-spacing: .22em; }
  .plx .pi-cards { grid-template-columns: 1fr; gap: 10px; margin-top: 12px; }
  .plx .pi-cards::before { content: ""; position: absolute; left: 44px; top: -12px; bottom: -12px; z-index: -1; border-left: 2px dashed #b7c4e4; }
  .plx .pi-card { display: grid; grid-template-columns: 50px minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 14px 16px 14px 18px; text-align: left; }
  .plx .pi-card > .pi-ic { grid-row: 1 / span 3; width: 50px; height: 50px; }
  .plx .pi-ic svg { width: 26px; height: 26px; }
  .plx .pi-ic .tr-mark { --h: 26px; }
  .plx .pi-dash { display: none; }
  .plx .pi-card b { font-size: 15.5px; }
  .plx .pi-d { font-size: 13.5px; }
  .plx .pi-agent { margin-top: 12px; justify-content: flex-start; gap: 16px; padding: 18px 20px; border-radius: 14px; background: linear-gradient(180deg, #1f3c8f, #142a6c); box-shadow: inset 4px 0 0 var(--red), 0 18px 40px rgba(20, 45, 120, .18); }
  .plx .pi-agent::before, .plx .pi-sep { display: none; }
  .plx .pi-ai .tr-mark { --h: 40px; }
  .plx .pi-agent b { font-size: 20px; }
  .plx .pi-agent small { margin-top: 4px; font-size: 11px; letter-spacing: .18em; color: #c9d4f2; }
  .plx .pi-foot { margin-top: 20px; }

  /* ---- From Evidence to Attack Story ---- */
  .fstory .fstory-visual { display: none; }
}

/* Inside Mission Control: the five module tabs in two flexible columns (the fixed three overflowed and the third was cut
   off); the fifth spans the row */
@media (max-width: 1100px) { .sxmg-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .sxmg-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .sxmg-tabs > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .sxmg-tab { min-height: 58px; gap: 10px; padding: 10px 12px; }
  .sxmg-tab b { font-size: 13.5px; }
  .sxmg-tab .sxmg-ic { flex: none; width: 36px; height: 36px; }
  .sxmg-tab .sxmg-ic svg { width: 20px; height: 20px; }
  .sxmg-tab .tr-mark { --h: 20px; }
}