<!-- @dsCard group="Components" -->
/* ============================================================
   FRAME — mobile responsive pass (shared by index + solution)
   Loaded LAST so it overrides. Targets true phone widths.
   ============================================================ */

/* ---- ≤ 760px : tablet / large phone ---- */
@media (max-width: 760px) {
  :root { --nav-h: 62px; }

  /* nav: keep logo + burger only; the inline CTA button crowds small bars */
  .nav__cta .btn { display: none; }

  /* tighter vertical rhythm on phones */
  .section { padding: clamp(60px, 14vw, 104px) 0; }

  /* never let a display heading push the page wide */
  .h2, .hero h1, .shero h1, .s-head .s-title, .cta2 h2, .contact__talk,
  .railcard--quote blockquote, .mode h3, .tcard h3, .cap__statement {
    overflow-wrap: anywhere;
  }

  /* big gutter index off on phones (already hidden ≤880 via core, keep safe) */
  .sec-index { display: none; }
}

/* ---- homepage hero ---- */
@media (max-width: 600px) {
  .hero { min-height: auto; padding-bottom: clamp(40px, 12vw, 72px); }
  .hero .wrap { padding-top: calc(var(--nav-h) + 28px); }
  .hero__stats { flex-wrap: wrap; gap: 18px 30px; margin-top: 34px; padding-top: 22px; }
  .hero__stats .stat { flex: 1 0 40%; }
  .hero__cta { width: 100%; }
  .hero__cta .btn { flex: 1 1 auto; justify-content: center; }
  .hero__scroll { display: none; }
}

/* ---- solution hero ---- */
@media (max-width: 600px) {
  .shero { min-height: auto; }
  .shero__cta { width: 100%; }
  .shero__cta .btn { flex: 1 1 100%; justify-content: center; }
  .shero__strip { margin-top: 34px; }
  .shero__scroll { display: none; }
}

/* ---- tab rails: clean momentum scroll, no scrollbar ---- */
@media (max-width: 980px) {
  .cap__tabs { -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .cap__tabs::-webkit-scrollbar { display: none; }
  .cap__feature { min-height: 240px; }
}

/* ---- tabbed detail columns stack cleanly ---- */
@media (max-width: 620px) {
  .cap__panel.is-active { gap: 12px; }
  .cta2__card { flex-direction: row; }
}

/* ---- compliance pipeline / rails / footer tidy ---- */
@media (max-width: 600px) {
  .gauge__ring { width: 124px; height: 124px; }
  .footer__top { flex-direction: column; gap: 28px; }
  .footer__cols { gap: 30px 40px; }
}

/* ---- flow diagram trims on the smallest screens ---- */
@media (max-width: 420px) {
  .sflow { padding: 16px; }
  .sflow__t { font-size: 16px; }
  .sflow__s { font-size: 12px; }
  .sflow__foot .v { font-size: 1.4rem; }
  .sflow__ico { width: 34px; height: 34px; }
}

/* ---- stack (architecture-is-the-mark) static mobile layout ---- */
@media (max-width: 880px) {
  .stack__pin { height: auto; padding: clamp(70px, 16vw, 120px) 0 clamp(50px, 12vw, 90px); }
  .stack__stage { padding-bottom: 22px; }
}

/* ---- generic: keep any wide media from causing horizontal scroll ---- */
@media (max-width: 760px) {
  img, svg, canvas, video { max-width: 100%; }
}