/*
  OPTIONAL — NOT PART OF THE CLAUDE DESIGN.
  The design is desktop-only (fluid vw/vh sizing, no breakpoints). Desktop (>1024px) is untouched.
  Delete the <link> to this file in the Blade partial to reproduce the design with no additions.
*/

@media (max-width: 1024px) {
  .sc { padding: 12vh 6vw; }
  .sc .sc-intro { grid-template-columns: minmax(0, 1fr); gap: 7vh; }
  .sc .sc-intro__title { font-size: min(9vw, 64px); }
  .sc .sc-intro__lede { font-size: 16px; }
  .sc .sc-intro__img { height: 60vw; max-height: 520px; }

  /* Capabilities become a vertical timeline */
  .sc .sc-caps__grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .sc .sc-caps__line { left: 27px; right: auto; top: 28px; bottom: 28px; width: 2px; height: auto; transform-origin: top; }
  .sc .sc-cap { flex-direction: row; align-items: center; gap: 20px; }
  .sc .sc-cap__icon { flex: none; }
  .sc .sc-cap__t { font-size: 18px; }

  .sc .sc-infra { grid-template-columns: minmax(0, 1fr); gap: 7vh; margin-top: 12vh; }
  .sc .sc-infra__media { height: 80vw; max-height: 640px; }
  .sc .sc-infra__title { font-size: min(8vw, 52px); }
}

@media (max-width: 640px) {
  .sc .sc-steps { left: 14px; right: 14px; bottom: 14px; gap: 5px; }
  .sc .sc-step { font-size: 11.5px; padding: 6px 11px 6px 6px; gap: 6px; }
  .sc .sc-step__n { width: 19px; height: 19px; font-size: 9px; }
  .sc .sc-infra__media { height: 110vw; }
  .sc .sc-cap__t { font-size: 16px; }
}