/*
 * Stage 1 mobile layout. Load after styles.css and experience.css.
 * Keep typography and layout fixes here so desktop art and scene code retain
 * their own owners. Overflow is resolved at the content, never hidden on body.
 */

/* Tablet and smaller: intrinsic word widths must not dictate grid tracks. */
@media (max-width: 1100px) {
  .product-grid,
  .article-grid,
  .solution-grid,
  .feature-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .detail-layout {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  }

  .product-grid > *,
  .article-grid > *,
  .solution-grid > *,
  .feature-list > *,
  .detail-layout > *,
  .technology-layout > *,
  .contact-layout > *,
  .ecosystem-layout > * {
    min-width: 0;
  }

  .page-banner h1,
  .section h2,
  .section h3,
  .product-dialog h2,
  .selector-box h2 {
    overflow-wrap: anywhere;
  }

  .page-banner h1 {
    font-size: clamp(34px, 5.5vw, 56px);
    hyphens: auto;
  }

  .product-card h3,
  .article-card h3,
  .feature-item h3 {
    font-size: clamp(23px, 3vw, 28px);
  }

  .product-card p,
  .article-card > p:not(.eyebrow),
  .feature-item p,
  .solution-card p,
  .solution-info > p:not(.eyebrow),
  .technology-copy > p:not(.eyebrow),
  .page-banner > p:not(.eyebrow),
  .section-heading p:not(.eyebrow) {
    font-size: 15px;
    line-height: 1.75;
  }

  .product-card button,
  .filter-button,
  .text-link,
  .button,
  .dialog-close,
  .icon-button,
  .scene-controls > button {
    min-height: 44px;
  }

  .back-top {
    min-width: 44px;
    min-height: 44px;
  }

  .dialog-close,
  .icon-button,
  .scene-controls > button {
    min-width: 44px;
  }

  .text-link {
    white-space: normal;
    font-size: 14px;
    gap: 16px;
  }

  .text-link > span,
  .button > span {
    flex-shrink: 0;
  }

  .button,
  .filter-button,
  .product-card button,
  .article-card .text-link {
    font-size: 14px;
  }

  .hero-buttons .button,
  .hero-buttons .text-link,
  .solution-info .text-link,
  .section-heading .text-link,
  .technology-copy .button,
  .cta-actions .button,
  .cta .text-link {
    font-size: 14px;
  }

  .product-card-top span:first-child,
  .article-card .eyebrow,
  .page-banner .eyebrow,
  .section-heading .eyebrow,
  .solution-info .eyebrow,
  .technology-copy .eyebrow {
    font-size: 12px;
    letter-spacing: .08em;
    overflow-wrap: anywhere;
  }

  .product-card-top span:first-child {
    min-width: 0;
  }

  .product-card-top span:last-child {
    flex-shrink: 0;
    margin-left: 10px;
  }

  .field input,
  .field select,
  .field textarea,
  .catalog-search,
  .search-dialog input {
    font-size: 16px;
    min-height: 48px;
  }

  .field label,
  .form-caption,
  .demo-note {
    font-size: 13px;
  }

  .selector-controls {
    flex-wrap: wrap;
  }

  .selector-controls > * {
    max-width: 100%;
  }
}

/* Mobile navigation is a scroll container, including short landscape screens. */
@media (max-width: 900px) {
  .mobile-nav {
    overflow-y: auto;
    overscroll-behavior-y: contain;
    padding-bottom: max(24px, env(safe-area-inset-bottom));
  }

  .mobile-nav a {
    flex-shrink: 0;
    min-height: 48px;
    overflow-wrap: anywhere;
  }

  html.mobile-menu-open,
  html.mobile-menu-open body {
    overflow: hidden;
    overscroll-behavior: none;
  }

  .header-actions {
    gap: 12px;
  }

  .hero-description {
    font-size: 16px;
    line-height: 1.7;
  }

  .hero .eyebrow {
    font-size: 12px;
    white-space: normal;
  }

  .hero-slide,
  .hero-slide b {
    font-size: 12px;
  }

  .hero-slide {
    min-height: 44px;
  }

  .header-contact {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    font-size: 12px;
  }

  .solutions-stage,
  .detail-layout,
  .ecosystem-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .solution-info {
    border-left: 0;
    border-top: 1px solid #ffffff15;
  }

  .solution-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .solution-tab {
    font-size: 13px;
    min-height: 88px;
    overflow-wrap: anywhere;
  }

  .solution-tab > span {
    font-size: 12px;
  }

  .principle h3 {
    font-size: 15px;
  }

  .principle p,
  .ecosystem-features p,
  .process-item p,
  .cta p:not(.eyebrow) {
    font-size: 14px;
    line-height: 1.75;
  }

  .cta {
    flex-direction: column;
  }

  .cta-actions {
    padding-top: 0;
  }

  .footer-links a,
  .footer-bottom a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 13px;
    overflow-wrap: anywhere;
  }

  .footer-links > div {
    min-width: 0;
    gap: 4px;
  }
}

/* Phones: one readable column rather than squeezing three desktop cards. */
@media (max-width: 700px) {
  .product-grid,
  .article-grid,
  .solution-grid,
  .feature-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .product-card-content,
  .article-card,
  .feature-item {
    padding: 24px;
  }

  .product-card h3,
  .article-card h3 {
    font-size: 27px;
  }

  .footer-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Small phones need a compact header but a full-size menu target. */
@media (max-width: 600px) {
  .header {
    padding-inline: 16px;
    gap: 8px;
  }

  .header .brand {
    width: clamp(88px, 25vw, 120px);
  }

  .header-actions {
    gap: 8px;
    margin-left: auto;
  }

  .header-contact {
    padding: 8px 10px;
    font-size: 12px;
  }

  .header-contact span {
    margin-left: 6px;
  }

  .menu-toggle {
    width: 44px;
    height: 44px;
    padding: 10px;
  }

  .mobile-nav {
    padding-top: 16px;
  }

  .mobile-nav a {
    font-size: 24px;
    padding-block: 14px;
  }
}

/* The 601px transition is still a portrait composition: keep illustration
   below copy instead of placing a bright model behind meaningful text. */
@media (max-width: 700px) {
  /* Reserve illustration space after the copy. CTA growth cannot collide
     with a fixed-position model or push slide controls over the text. */
  .hero {
    height: auto;
    min-height: 0;
    max-height: none;
  }

  .hero-content {
    height: auto;
    padding-top: 32px;
  }

  .hero .eyebrow {
    font-size: 12px;
    white-space: normal;
    align-items: flex-start;
    line-height: 1.6;
  }

  .hero .eyebrow::before {
    flex-shrink: 0;
    margin-top: 5px;
  }

  .hero h1 {
    font-size: clamp(34px, 10.5vw, 52px);
    overflow-wrap: anywhere;
  }

  .hero h1 em {
    white-space: normal;
  }

  .hero-description {
    max-width: 38ch;
    font-size: 16px;
    line-height: 1.7;
  }

  .hero-buttons {
    align-items: flex-start;
  }

  .hero-buttons .button,
  .hero-buttons .text-link {
    font-size: 14px;
  }

  .hero-bottom {
    margin-top: clamp(270px, 78vw, 380px);
    padding-top: 72px;
    padding-bottom: 24px;
  }

  .fleet-scene {
    top: auto;
    bottom: 96px;
    height: clamp(270px, 78vw, 380px);
    width: 130%;
    right: -15%;
  }

  .scene-interface {
    bottom: 92px;
    justify-content: flex-end;
  }

  .scene-label,
  .hero-hud {
    display: none;
  }

  .scene-controls > button {
    width: 44px;
    height: 44px;
  }

  /* Rotation increases the rings' painted width. Leave room for that diagonal
     instead of clipping the whole ecosystem or creating horizontal scrolling. */
  .orbit-ring-two,
  .orbit-ring-three {
    width: 84%;
  }

  /* QA-08: a classic scrollbar leaves only 305px of a 320px viewport.
     Rotating rings and orbiting dots can exceed that width at later frames.
     Clip only this aria-hidden illustration, not the ecosystem copy or page. */
  .orbit-graphic {
    overflow: clip;
  }

  .orbit-caption {
    bottom: 6px;
  }

  .hero-slider {
    gap: 12px;
  }

  .hero-slide {
    font-size: 12px;
    gap: 6px;
    min-height: 44px;
  }

  .hero-slide b {
    font-size: 12px;
  }
}

@media (max-width: 600px) {
  .page-banner h1 {
    font-size: clamp(32px, 8.5vw, 48px);
  }

  .page-banner .breadcrumbs {
    flex-wrap: wrap;
    font-size: 12px;
    align-items: center;
    gap: 8px;
  }

  .breadcrumbs a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .contact-info .text-link {
    max-width: 100%;
  }

  .product-dialog,
  .search-dialog {
    padding-top: 72px;
  }

  .product-dialog .eyebrow {
    margin-top: 0;
  }

  .search-dialog label,
  .product-dialog h2 {
    overflow-wrap: anywhere;
  }

  .search-dialog input {
    font-size: 16px;
  }
}

/* Short landscape: preserve copy and CTA, let the page scroll naturally. */
@media (min-width: 601px) and (max-width: 900px) and (max-height: 500px) {
  .hero {
    height: auto;
    min-height: 0;
  }

  .hero-content {
    height: auto;
    padding-top: 32px;
  }

  .hero h1 {
    max-width: 60%;
    font-size: 44px;
  }

  .hero-description {
    max-width: 50%;
    font-size: 16px;
  }

  .hero-bottom {
    margin-top: 100px;
  }

  .fleet-scene {
    top: 0;
    bottom: 60px;
    width: 75%;
    right: -28%;
  }

  .hero-hud,
  .scene-label {
    display: none;
  }

  .scene-interface {
    width: auto;
    bottom: 92px;
  }
}

/* Touch interaction has no mouse-only hints or decorative HUD reading task. */
@media (hover: none) and (pointer: coarse) {
  .scene-drag-hint,
  .hero-hud {
    display: none;
  }
}

/* Solutions overview (DESIGN-04). This scope does not alter the home scene.
   solutions.css must be loaded before this responsive layer. */
@media (max-width: 1100px) {
  .solutions-overview .sv-hero-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: 0;
  }

  .solutions-overview :is(.sv-hero-layout, .sv-cap-layout, .sv-scenario,
      .sv-project-steps, .sv-industry-grid) > * {
    min-width: 0;
  }

  .solutions-overview :is(h1, h2, h3, .sv-industry strong) {
    overflow-wrap: anywhere;
    hyphens: auto;
  }

  .solutions-overview :is(.sv-lead, .sv-scenario > p, .sv-capability p,
      .sv-card-copy > p, .sv-section-head > p:last-child, .sv-project-steps p) {
    font-size: 16px;
    line-height: 1.75;
  }

  .solutions-overview :is(.sv-card-copy li,
      .sv-card-link, .sv-view-controls button, .sv-hero .button,
      .sv-scenario .text-link, .sv-project > a) {
    font-size: 14px;
  }

  .solutions-overview .sv-industry strong {
    font-size: 14px;
  }

  .solutions-overview :is(.sv-kicker, .sv-industry > span,
      .sv-capability > span, .sv-system-caption, .sv-project-steps article > span) {
    font-size: 12px;
    letter-spacing: .06em;
  }

  .solutions-overview :is(a, button) {
    min-height: 44px;
  }

  .solutions-overview .sv-breadcrumbs {
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding-block: 18px;
  }

  .solutions-overview .sv-breadcrumbs a {
    display: inline-flex;
    align-items: center;
  }

  .solutions-overview .sv-industry-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .solutions-overview .sv-card-copy {
    padding: 22px;
  }

  .solutions-overview .sv-card-copy h3 {
    font-size: 25px;
  }

  .solutions-overview .sv-scenario {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
  }

  .solutions-overview .sv-scenario .text-link {
    white-space: normal;
    justify-self: start;
  }

  .solutions-overview .sv-vehicle-viewport {
    inset-inline: 0;
  }

  .solutions-overview .sv-vehicle-viewport canvas:focus-visible {
    outline: 3px solid var(--sv-accent);
    outline-offset: -5px;
  }

  .solutions-overview .sv-view-controls button {
    min-width: 44px;
    min-height: 44px;
  }

  .solutions-overview .sv-system-art .sv-network text {
    font-size: 20px;
    /* The global icon SVG stroke must not outline these small text labels. */
    stroke: none;
  }
}

/* Portrait and narrow tablets: the model occupies its own row after the CTA.
   Reserving its footprint also keeps the static fallback from shifting copy. */
@media (max-width: 900px) {
  .solutions-overview .sv-hero-layout,
  .solutions-overview .sv-cap-layout,
  .solutions-overview .sv-scenario,
  .solutions-overview .sv-project-steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .solutions-overview .sv-hero-layout {
    gap: 12px;
  }

  .solutions-overview .sv-hero-copy {
    padding: 20px 0 8px;
  }

  .solutions-overview .sv-hero h1 {
    font-size: clamp(34px, 7vw, 52px);
  }

  .solutions-overview .sv-hero .button {
    max-width: 100%;
    gap: 20px;
    padding: 16px 22px;
  }

  .solutions-overview .sv-stage {
    height: clamp(320px, 65vw, 410px);
    margin-bottom: 12px;
  }

  .solutions-overview .sv-vehicle-viewport {
    inset: 60px 0 68px;
  }

  .solutions-overview .sv-stage-caption {
    top: 10px;
    left: 12px;
    right: 12px;
    font-size: 10px;
    line-height: 1.5;
  }

  .solutions-overview .sv-stage-note {
    top: 32px;
    bottom: auto;
    left: 12px;
    right: 12px;
    font-size: 12px;
    line-height: 1.6;
  }

  .solutions-overview .sv-view-controls {
    right: 12px;
    bottom: 12px;
  }

  .solutions-overview .sv-industry-picker {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .solutions-overview .sv-industry {
    border: 1px solid var(--sv-line);
    min-height: 96px;
    padding: 16px 12px;
    gap: 8px;
  }

  .solutions-overview .sv-industry b {
    top: 13px;
    right: 12px;
  }

  .solutions-overview .sv-scenarios {
    min-height: 0;
  }

  .solutions-overview .sv-scenario {
    padding-block: 28px;
    gap: 18px;
  }

  .solutions-overview .sv-scenario h2 {
    font-size: 26px;
    line-height: 1.35;
  }

  .solutions-overview :is(.sv-capabilities, .sv-industries, .sv-project) {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .solutions-overview .sv-cap-layout {
    gap: 32px;
    margin-top: 28px;
  }

  .solutions-overview .sv-capability {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 12px;
  }

  .solutions-overview .sv-capability h3 {
    font-size: 24px;
  }

  .solutions-overview .sv-system-art {
    width: 100%;
    max-width: 560px;
    justify-self: center;
  }

  .solutions-overview .sv-heading-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .solutions-overview .sv-project-steps {
    gap: 28px;
    margin-top: 32px;
  }
}

/* Phones have two text buttons per row, never an offscreen swipe-only picker. */
@media (max-width: 600px) {
  .solutions-overview .sv-hero h1 {
    font-size: clamp(32px, 9vw, 44px);
  }

  .solutions-overview .sv-industry-picker {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .solutions-overview .sv-industry strong {
    /* Keep long sector names intact in the 305px classic-scrollbar layout.
       These are secondary labels; the surrounding target remains >=96px. */
    font-size: clamp(12px, 3.6vw, 14px);
  }

  .solutions-overview .sv-industry-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .solutions-overview .sv-card-copy {
    padding: 24px;
  }

  .solutions-overview .sv-section-head h2,
  .solutions-overview .sv-project > h2 {
    font-size: 34px;
  }

  .solutions-overview .sv-system-art .sv-network text {
    font-size: 32px;
  }

  .solutions-overview .sv-system-art .sv-network text:nth-of-type(2) {
    /* Larger phone labels need extra vertical separation at the middle node.
       This stays inside the SVG viewBox and preserves every complete label. */
    transform: translateY(20px);
  }
}

/* On short landscape screens the scene stays beside the copy, at a bounded
   height. It cannot cover the CTA because both occupy separate grid tracks. */
@media (min-width: 701px) and (max-width: 900px) and (max-height: 500px) {
  .solutions-overview .sv-hero-layout {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 20px;
  }

  .solutions-overview .sv-hero h1 {
    font-size: 36px;
  }

  .solutions-overview .sv-stage {
    height: 320px;
  }
}

@media (hover: none) and (pointer: coarse) {
  .solutions-overview .sv-scan-tag {
    display: none;
  }
}


/* STR-READABILITY-01 proposal. Append to responsive.css after QA/cutover.
   Text components only: no H1/H2, brand image, scene, icon or zoom changes. */

body .desktop-nav > a {
  font-size: 16px;
  line-height: 1.5;
  min-height: 44px;
  padding-block: 24px;
}

body .header-actions {
  flex-shrink: 0;
}

body .header-contact {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 15px;
  line-height: 1.45;
}

body .button,
body .hero-buttons .button,
body .technology-copy .button,
body .cta-actions .button,
body .solutions-overview .sv-hero .button {
  min-height: 44px;
  font-size: 16px;
  line-height: 1.5;
}

body .text-link,
body .hero-buttons .text-link,
body .section-heading .text-link,
body .solution-info .text-link,
body .article-card .text-link,
body .cta .text-link,
body .product-card button,
body .filter-button,
body .solutions-overview .sv-scenario .text-link,
body .solutions-overview .sv-project > a,
body .solutions-overview .sv-card-link {
  min-height: 44px;
  font-size: 15px;
  line-height: 1.5;
  white-space: normal;
}

body .selector-option {
  min-height: 44px;
  font-size: 16px;
  line-height: 1.5;
}

body .solution-tab,
body .solutions-overview .sv-industry-picker .sv-industry strong {
  font-size: 15px;
  line-height: 1.6;
}

body .eyebrow,
body .hero .eyebrow,
body .section-heading .eyebrow,
body .solution-info .eyebrow,
body .technology-copy .eyebrow,
body .page-banner .eyebrow,
body .article-card .eyebrow,
body .product-dialog .eyebrow,
body .cta .eyebrow,
body main .solutions-overview .sv-kicker {
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: .08em;
  white-space: normal;
}

body .breadcrumbs,
body .page-banner .breadcrumbs,
body .sv-breadcrumbs {
  font-size: 14px;
  line-height: 1.6;
  flex-wrap: wrap;
  align-items: center;
}

body .breadcrumbs a,
body .sv-breadcrumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

body .hero-slide,
body .hero-slide b {
  font-size: 14px;
  line-height: 1.6;
  color: #b2c7d9;
}

body .hero-slide {
  min-height: 44px;
}

body .hero-slide.active,
body .hero-slide.active b {
  color: #e7f7ff;
}

body .hero-slide.active b {
  color: var(--cyan);
}

body .hero-scroll {
  min-height: 44px;
  font-size: 14px;
  line-height: 1.5;
}

/* Paragraphs are explicit components; article media credits and captions keep
   their own sizes rather than inheriting a blanket paragraph enlargement. */
body main .hero-description,
body main .principle p,
body main .section-heading p:not(.eyebrow),
body main .product-card p,
body main .technology-copy > p:not(.eyebrow),
body main .process-item p,
body main .cta p:not(.eyebrow),
body main .page-banner > p:not(.eyebrow),
body main .solution-card p,
body main .detail-layout > div > p:not(.eyebrow),
body main .feature-item p,
body main .article-card > p:not(.eyebrow),
body main .about-statement p:not(.eyebrow),
body main .contact-description,
body main .article-callout > p,
body main .solutions-overview .sv-lead,
body main .solutions-overview .sv-scenario > p,
body main .solutions-overview .sv-capability p,
body main .solutions-overview .sv-card-copy > p,
body main .solutions-overview .sv-section-head > p:last-child,
body main .solutions-overview .sv-project-steps p {
  font-size: 16px;
  line-height: 1.75;
}

body .hero .hero-description {
  font-size: 17px;
}

body .article-layout .article-section > p {
  font-size: 16px;
  line-height: 1.75;
}

body .article-media .article-media-caption {
  font-size: 14px;
  line-height: 1.8;
}

body .article-media .article-media-meta,
body .article-media .article-media-meta a,
body .article-media .article-media-credit {
  font-size: 13px;
  line-height: 1.75;
}

body .article-media .article-media-video-link {
  min-height: 44px;
  font-size: 16px;
  line-height: 1.6;
}

body .footer .footer-top p {
  font-size: 18px;
  line-height: 1.6;
  color: #b8cddd;
}

body .footer .footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  max-width: 100%;
  font-size: 15px;
  line-height: 1.6;
  color: #acc2d3;
  overflow-wrap: anywhere;
}

body .footer .footer-links > div > span {
  font-size: 16px;
  line-height: 1.6;
  color: #e1edf5;
}

body .footer .footer-links p {
  font-size: 16px;
  line-height: 1.75;
  color: #a6bdcf;
}

body .footer .footer-bottom,
body .footer .footer-bottom a {
  font-size: 13px;
  line-height: 1.6;
  color: #9cb3c6;
}

body .footer .footer-bottom a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

body .footer .footer-contact {
  min-height: 44px;
  font-size: 20px;
  line-height: 1.5;
  white-space: normal;
}

body .footer .footer-contact > span {
  flex-shrink: 0;
  margin-left: 12px;
}

@media (min-width: 901px) and (max-width: 1200px) {
  body .header {
    padding-inline: 16px;
    gap: 10px;
  }

  body .desktop-nav {
    gap: 10px;
  }

  body .desktop-nav > a {
    font-size: 15px;
  }

  body .header-actions {
    gap: 10px;
  }

  body .header-contact {
    width: 144px;
    padding: 8px 10px;
    white-space: normal;
  }

  body .header-contact span {
    flex-shrink: 0;
    margin-left: 8px;
  }
}

@media (max-width: 1100px) {
  body .footer .footer-top {
    flex-wrap: wrap;
    gap: 24px 32px;
  }

  body .footer .footer-contact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-left: 0;
  }

  body .footer .footer-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
  }
}

@media (max-width: 600px) {
  body .header-contact {
    width: clamp(124px, 37vw, 156px);
    padding: 8px 10px;
    white-space: normal;
    flex-shrink: 0;
  }

  body .header-contact span {
    flex-shrink: 0;
    margin-left: 6px;
  }

  body .eyebrow,
  body .hero .eyebrow,
  body .section-heading .eyebrow,
  body .solution-info .eyebrow,
  body .technology-copy .eyebrow,
  body .page-banner .eyebrow,
  body .article-card .eyebrow,
  body .product-dialog .eyebrow,
  body .cta .eyebrow,
  body main .solutions-overview .sv-kicker {
    font-size: 12px;
    letter-spacing: .06em;
  }

  body .breadcrumbs,
  body .page-banner .breadcrumbs,
  body .sv-breadcrumbs {
    font-size: 13px;
  }

  body .hero .hero-description {
    font-size: 16px;
  }

  /* Two lines separate number from label without shrinking the text. The
     longer first label receives more width than the short final label. */
  body .hero-slider {
    display: grid;
    grid-template-columns: 1.35fr 1.1fr .9fr;
    gap: 8px;
  }

  body .hero-slide {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    padding-block: 8px;
  }

  body .hero-slide,
  body .hero-slide b {
    font-size: 13px;
  }

  body .footer .footer-links {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  body .footer .footer-links > div:nth-child(3) {
    display: flex;
    grid-column: auto;
  }

  body .footer .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
}

@media (max-width: 400px) {
  body .solution-tabs,
  body .solutions-overview .sv-industry-picker {
    grid-template-columns: minmax(0, 1fr);
  }
}