.ssp {
  --ssp-ink: #14232b;
  --ssp-muted: #5d6d75;
  --ssp-line: #d9e3e7;
  --ssp-accent: #087f87;
  --ssp-deep: #10262d;
  --ssp-soft: #f3f7f8;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 22px;
  background: #fff;
  color: var(--ssp-ink);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.55;
}
.ssp--withings {
  --ssp-accent: #3156d8;
  --ssp-deep: #14204a;
  --ssp-soft: #f3f5fb;
}
.ssp--pulse {
  --ssp-accent: #cf3e35;
  --ssp-deep: #171d21;
  --ssp-soft: #f5f3f1;
}
.ssp *, .ssp *::before, .ssp *::after { box-sizing: border-box; }
.ssp img, .ssp video { display: block; width: 100%; max-width: 100%; }
.ssp h2, .ssp h3, .ssp p { margin-top: 0; }
.ssp h2 {
  max-width: 900px;
  margin-bottom: 18px;
  font-size: clamp(28px, 3.7vw, 43px);
  line-height: 1.08;
  letter-spacing: -.025em;
}
.ssp h3 {
  margin-bottom: 10px;
  font-size: clamp(20px, 2.1vw, 27px);
  line-height: 1.18;
  letter-spacing: -.015em;
}
.ssp__section { padding: 64px clamp(24px, 5vw, 72px); }
.ssp__section--soft { background: var(--ssp-soft); }
.ssp__eyebrow {
  margin: 0 0 12px;
  color: var(--ssp-accent);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.ssp__hero {
  position: relative;
  min-height: 500px;
  overflow: hidden;
  background: var(--ssp-deep);
}
.ssp__hero-media { position: absolute; inset: 0; display: block; }
.ssp__hero-media img { height: 100%; min-height: 500px; object-fit: cover; }
.ssp__hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(8, 20, 27, .88) 0%, rgba(8, 20, 27, .56) 44%, rgba(8, 20, 27, .08) 78%);
}
.ssp__hero-copy {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: clamp(24px, 6vw, 82px);
  width: min(540px, 76%);
  transform: translateY(-50%);
  color: #fff;
}
.ssp__hero-copy h2 { color: #fff; }
.ssp__hero-copy p:last-child { max-width: 500px; margin-bottom: 0; color: #e6eef1; font-size: 18px; }
.ssp__copy-hero {
  min-height: 380px;
  display: flex;
  align-items: center;
  padding: 70px clamp(24px, 7vw, 92px);
  color: #fff;
  background:
    radial-gradient(circle at 85% 25%, rgba(98, 128, 255, .34), transparent 34%),
    linear-gradient(135deg, #111b3f, var(--ssp-deep));
}
.ssp__copy-hero > div { max-width: 760px; }
.ssp__copy-hero h2 { color: #fff; }
.ssp__copy-hero p:last-child { max-width: 680px; margin-bottom: 0; color: #e7ebfa; font-size: 19px; }
.ssp__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
  gap: 46px;
  align-items: start;
}
.ssp__lead { max-width: 760px; margin-bottom: 0; color: var(--ssp-muted); font-size: 18px; }
.ssp__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--ssp-line);
  border-radius: 18px;
  background: #fff;
}
.ssp__fact { min-height: 108px; padding: 20px; border-right: 1px solid var(--ssp-line); border-bottom: 1px solid var(--ssp-line); }
.ssp__fact:nth-child(2n) { border-right: 0; }
.ssp__fact:nth-last-child(-n+2) { border-bottom: 0; }
.ssp__fact strong { display: block; margin-bottom: 5px; font-size: 22px; line-height: 1.15; }
.ssp__fact span { color: var(--ssp-muted); font-size: 14px; }
.ssp__feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 32px; }
.ssp__feature {
  overflow: hidden;
  border-radius: 19px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(17, 35, 44, .055);
}
.ssp__feature--text { display: flex; min-height: 230px; align-items: center; border: 1px solid rgba(217, 227, 231, .75); }
.ssp__feature-media { min-height: 255px; background: #fff; }
.ssp__feature-media a { display: block; width: 100%; text-decoration: none; }
.ssp__feature-media img { height: 270px; object-fit: cover; transition: transform .2s ease; }
.ssp--garmin .ssp__feature-media img { object-fit: contain; }
.ssp__feature-media a:hover img { transform: scale(1.025); }
.ssp__zoom--icon img { object-fit: contain !important; padding: 30px; }
.ssp__feature-copy { padding: 27px 29px 31px; }
.ssp__feature--text .ssp__feature-copy { padding: 34px; }
.ssp__feature-copy p { margin-bottom: 0; color: var(--ssp-muted); }
.ssp__zoom { color: inherit; cursor: zoom-in; }
.ssp__video { overflow: hidden; margin-top: 28px; border-radius: 20px; background: #090d11; }
.ssp__video video { aspect-ratio: 16 / 9; object-fit: contain; }
.ssp__details {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
  gap: 28px;
  align-items: start;
  margin-top: 30px;
}
.ssp__specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--ssp-line);
  border-radius: 18px;
}
.ssp__spec { min-height: 105px; padding: 20px 22px; border-right: 1px solid var(--ssp-line); border-bottom: 1px solid var(--ssp-line); }
.ssp__spec:nth-child(2n) { border-right: 0; }
.ssp__spec:nth-last-child(-n+2) { border-bottom: 0; }
.ssp__spec dt { margin-bottom: 7px; color: var(--ssp-muted); font-size: 14px; }
.ssp__spec dd { margin: 0; font-size: 17px; font-weight: 750; line-height: 1.35; text-align: left; }
.ssp__box { padding: 29px 30px; border-radius: 18px; background: var(--ssp-deep); color: #fff; }
.ssp__box h3 { color: #fff; }
.ssp__box ul { margin: 18px 0 0; padding-left: 20px; }
.ssp__box li + li { margin-top: 9px; }
.ssp__notes { max-width: 900px; margin-top: 26px; color: var(--ssp-muted); font-size: 14px; }
.ssp__notes p { margin-bottom: 8px; }
.ssp__notes p:last-child { margin-bottom: 0; }
@media (max-width: 820px) {
  .ssp { border-radius: 18px; }
  .ssp__section { padding: 46px 22px; }
  .ssp__intro, .ssp__details { grid-template-columns: 1fr; gap: 28px; }
  .ssp__hero, .ssp__hero-media img { min-height: 430px; }
  .ssp__feature-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .ssp { font-size: 15px; border-radius: 14px; }
  .ssp h2 { font-size: 29px; }
  .ssp__lead, .ssp__hero-copy p:last-child, .ssp__copy-hero p:last-child { font-size: 17px; }
  .ssp__hero, .ssp__hero-media img { min-height: 420px; }
  .ssp__hero-copy { left: 22px; width: calc(100% - 44px); }
  .ssp__hero::after { background: linear-gradient(90deg, rgba(8, 20, 27, .86), rgba(8, 20, 27, .42)); }
  .ssp__copy-hero { min-height: 360px; padding: 52px 22px; }
  .ssp__facts, .ssp__specs { grid-template-columns: 1fr; }
  .ssp__fact, .ssp__spec { min-height: auto; border-right: 0; border-bottom: 1px solid var(--ssp-line) !important; }
  .ssp__fact:last-child, .ssp__spec:last-child { border-bottom: 0 !important; }
  .ssp__feature-media img { height: 230px; }
}