/* Match the centered section frames and background on Applied Solutions. */
body.sp-page {
  background: #eaf2ff url("../images/sensory-strategies/20260929/page-background.webp") center top / 100% 100% no-repeat;
}
html body.sp-page main#main.sp-main {
  --sp-gutter: clamp(24px, 4.8cqw, 76px);
  --sp-heading-size: clamp(36px, 4.2cqw, 68px);
  --arotec-content-left: var(--sp-gutter);
  --arotec-content-right: var(--sp-gutter);
  --editorial-content-max: 1600px;
  container-type: inline-size;
  width: min(90%, 1600px);
  margin: 0 auto;
  padding-top: calc(var(--detail-header-space, 112px) + 24px) !important;
  padding-bottom: 48px;
  background: transparent;
  overflow: visible;
}
body.sp-page #main > .sp-section {
  container-type: inline-size;
  margin: 0 0 2.4cqw;
  border: 0;
  border-radius: clamp(20px, 2.6cqw, 40px);
  overflow: hidden;
  background: #fff;
  box-shadow: 0 12px 42px #698fc014;
  content-visibility: visible !important;
  contain-intrinsic-size: none !important;
}
body.sp-page #main .sp-container { width: calc(100% - 2 * var(--sp-gutter)); max-width: none; }
body.sp-page #main .sp-section .sp-stage > .sp-container { min-height: 40cqw; padding-block: 3.6cqw; }
body.sp-page #main .sp-hero .sp-stage > .sp-container { min-height: 54cqw; }
body.sp-page #main .sp-support .sp-stage > .sp-container,
body.sp-page #main .sp-commitment .sp-stage > .sp-container { min-height: 49cqw; }
body.sp-page #main .sp-section .sp-copy { width: 48%; }
body.sp-page #main .sp-support .sp-copy { width: 50%; }
body.sp-page #main .sp-hero .sp-media img { object-fit: cover; }
body.sp-page #main .sp-media picture { display: contents; }
html body.sp-page main#main .sp-copy > :is(h1, h2) {
  --arotec-display-size: var(--sp-heading-size);
  --arotec-display-line-height: 1.08;
  margin-bottom: 1.25cqw !important;
}
html body.sp-page main#main .sp-copy > p:not(.sp-eyebrow, .sp-lead, .sp-statement) {
  font-size: clamp(15px, 1.4cqw, 23px) !important;
  line-height: 1.5 !important;
}
html body.sp-page main#main .sp-hero .sp-lead {
  --arotec-supporting-size: clamp(20px, 1.95cqw, 32px);
  --arotec-supporting-line-height: 1.4;
  margin-bottom: 1.4cqw;
}
html body.sp-page main#main .sp-hero .sp-copy > .sp-eyebrow {
  font-size: clamp(11px, 1.08cqw, 17px) !important;
  margin-bottom: 1.4cqw;
}
body.sp-page #main .sp-hero .sp-benefits { margin: 1.8cqw 0 2cqw !important; }
body.sp-page #main .sp-benefits .sp-icon .ph { font-size: clamp(36px, 3.4cqw, 52px); }
html body.sp-page main#main .sp-purpose h2 { --arotec-supporting-size: clamp(22px, 2cqw, 30px); }
html body.sp-page main#main .sp-hero .sp-purpose p:last-child { font-size: clamp(14px, 1.15cqw, 18px) !important; line-height: 1.5 !important; }
body.sp-page #main .sp-rule { margin: 1.8cqw 0 2cqw; }
html body.sp-page main#main .sp-feature-title { font-size: clamp(24px, 2.25cqw, 36px) !important; margin-bottom: 1.5cqw !important; }
body.sp-page #main .sp-pillars { padding-block: 2.5cqw 3cqw; }
body.sp-page #main .sp-pillars article { grid-template-columns: 4.9cqw minmax(0, 1fr); column-gap: 1.2cqw; padding-inline: 1.8cqw; }
body.sp-page #main .sp-pillars article:first-child { padding-left: 0; }
body.sp-page #main .sp-pillars article:last-child { padding-right: 0; }
body.sp-page #main .sp-pillars .sp-icon { width: 4.9cqw; height: 4.9cqw; }
body.sp-page #main .sp-insight-rail { padding-block: 2.4cqw; }
body.sp-page #main .sp-insights li { padding-inline: 1.15cqw; }
body.sp-page #main .sp-insights li:first-child { padding-left: 0; }
body.sp-page #main .sp-support-steps { gap: 1.1cqw; margin-top: 2.6cqw !important; }
body.sp-page #main .sp-support-steps .sp-icon { width: clamp(48px, 4.7cqw, 72px); height: clamp(48px, 4.7cqw, 72px); }
body.sp-page #main .sp-support-steps .sp-icon .ph { font-size: clamp(28px, 2.8cqw, 42px); }
body.sp-page #main .sp-step-arrow { right: -1.3cqw; top: clamp(16px, 1.65cqw, 27px); font-size: clamp(14px, 1.4cqw, 20px); }
html body.sp-page main#main .sp-support-steps h3 { font-size: clamp(11px, 1.04cqw, 17px) !important; }
html body.sp-page main#main .sp-statement { margin-top: 2.4cqw; padding-top: 1.5cqw; font-size: clamp(18px, 1.6cqw, 26px) !important; }

@media (min-width: 1000px) and (max-width: 1199px) {
  body.sp-page #main .sp-pillars article { grid-template-columns: 1fr; }
  body.sp-page #main .sp-pillars .sp-icon { width: 58px; height: 58px; }
  html body.sp-page main#main .sp-commitments li,
  html body.sp-page main#main .sp-commitments li > span:not(.sp-icon) { font-size: 20px !important; }
}

/* Images lead each card on tablets and phones, followed by text in normal flow. */
@media (width < 1000px) {
  html body.sp-page main#main.sp-main {
    --sp-gutter: 28px;
    --sp-heading-size: clamp(34px, 5.7vw, 56px);
    width: calc(100% - 40px);
    padding-top: calc(var(--detail-header-space, 72px) + 20px) !important;
  }
  body.sp-page #main > .sp-section { margin-bottom: 24px; border-radius: 24px; }
  body.sp-page #main .sp-stage { display: flex; flex-direction: column; }
  body.sp-page #main .sp-section .sp-stage > .sp-container { order: 1; min-height: 0; padding-block: 28px 32px; }
  body.sp-page #main .sp-section .sp-copy { width: 100%; max-width: none; }
  body.sp-page #main .sp-media { position: relative; inset: auto; order: 0; z-index: 0; width: 100%; height: auto; aspect-ratio: 16 / 9; overflow: hidden; }
  body.sp-page #main .sp-section .sp-media img { width: 100%; height: 100%; max-width: none; margin-left: 0; object-fit: contain; object-position: center; }
  html body.sp-page main#main .sp-copy > :is(h1, h2) { margin-bottom: 20px !important; }
  html body.sp-page main#main .sp-copy > p:not(.sp-eyebrow, .sp-lead, .sp-statement) { font-size: 17px !important; }
  html body.sp-page main#main .sp-hero .sp-lead { --arotec-supporting-size: 23px; margin-bottom: 18px; }
  html body.sp-page main#main .sp-hero .sp-copy > .sp-eyebrow { font-size: 12px !important; margin-bottom: 16px; }
  body.sp-page #main .sp-hero .sp-benefits { max-width: 560px; margin: 24px 0 28px !important; }
  body.sp-page #main .sp-purpose { max-width: none; }
  html body.sp-page main#main .sp-purpose h2 { --arotec-supporting-size: 25px; }
  html body.sp-page main#main .sp-hero .sp-purpose p:last-child { font-size: 16px !important; }
  body.sp-page #main .sp-rule { margin: 24px 0; }
  html body.sp-page main#main .sp-feature-title { font-size: 27px !important; margin-bottom: 20px !important; }
  body.sp-page #main .sp-pillars { padding-block: 28px 32px; }
  body.sp-page #main .sp-pillars article { grid-template-columns: 1fr; padding-inline: 18px; }
  body.sp-page #main .sp-pillars .sp-icon { width: 58px; height: 58px; }
  body.sp-page #main .sp-insight-rail { grid-template-columns: 1fr; padding-block: 28px; }
  body.sp-page #main .sp-insights { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 20px; }
  body.sp-page #main .sp-insights li { padding: 0; border: 0; }
  body.sp-page #main .sp-support-steps { max-width: none; gap: 16px; margin-top: 28px !important; }
  body.sp-page #main .sp-support-steps .sp-icon { width: 58px; height: 58px; }
  body.sp-page #main .sp-support-steps .sp-icon .ph { font-size: 32px; }
  body.sp-page #main .sp-step-arrow { right: -18px; top: 21px; font-size: 18px; }
  html body.sp-page main#main .sp-support-steps h3 { font-size: 13px !important; }
  html body.sp-page main#main .sp-statement { margin-top: 28px; padding-top: 20px; font-size: 21px !important; }
}
@media (max-width: 599px) {
  html body.sp-page main#main.sp-main {
    --sp-gutter: 22px;
    --sp-heading-size: clamp(30px, 8.2vw, 46px);
    width: calc(100% - 28px);
    padding-bottom: 16px;
  }
  body.sp-page #main > .sp-section { margin-bottom: 20px; border-radius: 20px; }
  html body.sp-page main#main .sp-copy > p:not(.sp-eyebrow, .sp-lead, .sp-statement) { font-size: 16px !important; }
  html body.sp-page main#main .sp-hero .sp-lead { --arotec-supporting-size: 21px; }
  html body.sp-page main#main .sp-purpose h2 { --arotec-supporting-size: 22px; }
  html body.sp-page main#main .sp-feature-title { font-size: 24px !important; }
  body.sp-page #main .sp-pillars article { grid-template-columns: 58px minmax(0, 1fr); column-gap: 16px; padding-inline: 0; }
  body.sp-page #main .sp-pillars article + article { border-left: 0; padding-top: 24px; }
  body.sp-page #main .sp-insights { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 20px; }
  body.sp-page #main .sp-support-steps .sp-icon { width: 50px; height: 50px; }
  body.sp-page #main .sp-support-steps .sp-icon .ph { font-size: 28px; }
  html body.sp-page main#main .sp-support-steps h3 { font-size: 17px !important; }
}
@media (max-width: 380px) {
  body.sp-page #main .sp-commitments { grid-template-columns: 1fr; }
  body.sp-page #main .sp-commitments li + li { border-top: 1px solid var(--sp-line); }
}