/* =============================================
   RESPONSIVE BREAKPOINT SYSTEM

   1280px: wide grids that need to collapse before tablet
   960px:  two-column layouts become single-column
   768px:  tablet/mobile component refinements
   600px:  phones and compact navigation
   480px:  small-phone tightening
   ============================================= */

@media (max-width: 1280px) {
  .shai-feature-grid {
    grid-template-columns: repeat(4, minmax(0, calc((100% - 48px) / 4)));
  }
}

@media (max-width: 960px) {
  .twc-panel {
    grid-template-columns: 100%;
    min-height: unset;
  }

  .sg-nav__primary-links {
    display: none;
  }

  .sg-nav__menu {
    display: block;
  }

  .sg-hero__layout,
  .shai-final-hero__inner{
    grid-template-columns: 100%;
  }


  .sg-grid{
    grid-template-columns: calc((100% - 16px) / 2) calc((100% - 16px) / 2);
  }

  .hero-threat-card {
    justify-self: center;
    margin-left: auto;
    margin-right: auto;
  }

  .shai-final-hero {
    padding: 76px var(--sp-4) 76px var(--section-left-offset);
  }

}

@media (max-width: 768px) {
  :root {
    --section-content-max: none;
    --section-left-offset: 16px;
  }

  .section,
  .section--manifest,
  .sg-hero,
  .shai-final-hero {
    padding-left: var(--sp-3);
    padding-right: var(--sp-3);
  }

  .container,
  .section > .container,
  .sg-hero > .container,
  .shai-final-hero > .container,
  .section--manifest__inner,
  .section-header,
  .sg-row-manifest,
  .lanes-manifest,
  .sg-grid,
  .sg-hero__layout,
  .sg-hero__text,
  .shai-final-hero__inner,
  .sg-footer__inner {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .sg-hero {
    padding: var(--sp-7) var(--sp-3);
  }

  .sg-hero > .container {
    width: 100%;
    padding: 24px 22px;
  }

}

@media (max-width: 600px) {
  :root {
    --sp-7: 52px;
    --sp-8: 64px;
    --section-left-offset: 16px;
  }

  .section,
  .section--manifest,
  .sg-hero,
  .shai-final-hero {
    padding-left: var(--sp-3);
    padding-right: var(--sp-3);
    width: 100%;
  }

  .container {
    padding: 0;
  }

  .sg-nav > .container,
  .section > .container,
  .sg-hero > .container,
  .shai-final-hero > .container,
  .section--manifest__inner,
  .section-header,
  .sg-hero__layout,
  .shai-final-hero__inner {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .sg-nav__inner {
    gap: 12px;
  }

  .sg-nav__actions {
    min-width: 0;
    gap: 6px;
  }

  .logo {
    font-size: 30px;
  }

  .logo::before {
    font-size: 22px;
  }

  .sg-nav__actions {
    gap: 6px;
  }

  .sg-nav__primary-links {
    display: none;
  }

  .sg-nav__utility-link,
  .sg-nav__menu-toggle {
    padding: 0;
  }

  .sg-nav__menu-toggle {
    display: inline-flex;
    margin-right: 20px;
  }

  .sg-nav__utility-link--github {
    margin-right: 0;
  }

  .sg-nav__utility-link span {
    font-size: 20px;
  }

  .sg-nav__menu-panel {
    min-width: 210px;
  }


  .sg-hero__headline-line {
    display: block;
    white-space: normal;
    max-width: 100%;
  }

  .hero-phrase {
    white-space: normal;
    display: block;
    width: 400px;
    max-width: 400px;
    min-width: 400px !important;
    min-height: 68px;
    max-height: 68px;
    overflow: hidden;
    line-height: 1.12;
  }

  .hero-threat-card {
    width: 100%;
    max-width: 360px;
    padding: 18px;
  }

  .hero-threat-card__image {
    width: 100%;
    max-width: 100%;
  }

  .sg-hero__text,
  .sg-hero__actions,
  .sg-hero__lead,
  .section-header,
  .lanes-manifest,
  .lanes-manifest__right {
    min-width: 0;
    max-width: 100%;
  }

  .sg-hero__lead,
  .section-header--center {
    max-width: 100%;
  }

  .sg-hero__lead {
    font-size: 18px;
    line-height: 1.65;
  }

  .sg-grid{
    grid-template-columns: 100%;
  }

  .sg-footer__inner {
    grid-template-columns: 100%;
    align-items: flex-start;
  }

  .sg-footer__brand:nth-of-type(1),
  .sg-footer__links,
  .sg-footer__copy {
    grid-column: 1;
    justify-self: start;
  }

  .sg-footer__links {
    grid-row: 3;
  }

  .sg-footer__copy {
    grid-row: 4;
  }

  .sg-footer__ai-links {
    max-width: 100%;
    overflow-x: auto;
  }

  .shai-final-hero {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .shai-final-hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .btn-dark-primary,
  .btn-dark-secondary{
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .lanes-manifest__entry {
    grid-template-columns: 160px calc(100% - 176px);
    gap: 0 16px;
    padding: 20px 0;
  }

  .lanes-manifest__name {
    font-size: 22px;
  }

  .lanes-manifest__what {
    font-size: 16px;
  }
}

@media (max-width: 600px) {
  .lanes-manifest__entry {
    grid-template-columns: 100%;
    gap: 8px 0;
    padding: 18px 0;
  }

  .lanes-manifest__left {
    flex-direction: row;
    align-items: baseline;
    gap: 10px;
  }

  .lanes-manifest__name {
    font-size: 19px;
  }

  .lanes-manifest__what {
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  :root {
    --section-left-offset: 12px;
  }


  .logo {
    font-size: 26px;
    margin-left: 20px;
  }

  .logo::before {
    font-size: 19px;
  }

  .sg-hero__headline-line {
    white-space: normal;
    max-width: 100%;
    font-size: 50px;
  }

  .hero-phrase {
    width: 350px;
    max-width: 350px;
    min-width: 350px !important;
    white-space: normal;
    font-size: 45px;
    min-height: 110px;
  }

  .sg-hero__lead {
    font-size: var(--font-size-base);
    line-height: 1.6;
  }

  .hero-threat-card {
    max-width: 100%;
    padding: 16px;
  }

   .sg-nav__utility-link span {
    font-size: 20px;
  }

}