/* SMS is the reference for shared product-page typography and rhythm.
   Product-specific demos remain in their own assets. Loaded after page gutters. */
.sms-page {
  --product-section-space: 112px;
  --product-section-gap: 64px;
  --product-heading-size: clamp(36px, 3.35vw, 48px);
  --product-copy-size: 17px;
}

.sms-page :is(.sms-features, .sms-advantages, .sms-use-cases, .sms-developer-experience, .sms-messaging-matrix) {
  padding-inline: var(--site-gutter);
  padding-block: var(--product-section-space);
}

.sms-page :is(.sms-features__inner, .sms-advantages__inner, .sms-use-cases__inner, .sms-developer-experience__inner, .sms-messaging-matrix__inner) {
  width: min(var(--site-content-width), 100%);
  min-width: 0;
  margin-inline: auto;
}

.sms-page .sms-hero__content { min-width: 0; }
.sms-page .sms-hero__tags { flex-wrap: wrap; gap: 12px; }
.sms-page .sms-hero__tags li { padding: 4px 12px; font-size: 14px; line-height: 22px; white-space: normal; }
.sms-page .sms-hero__description { width: 100%; max-width: 48ch; line-height: 1.6; }
.sms-page .sms-hero__actions { flex-wrap: wrap; gap: 16px; }
.sms-page .sms-hero__metrics { width: 100%; max-width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.sms-page .sms-hero__metric { min-width: 0; }
.sms-page .sms-hero__metric dt { font-size: clamp(26px, 2.15vw, 32px); line-height: 1.3; white-space: normal; }

.sms-page :is(.sms-features__heading, .sms-use-cases__heading, .sms-developer-experience__intro) { gap: 24px; }
.sms-page .sms-features__heading { align-items: flex-start; text-align: left; }
.sms-page :is(.sms-features__heading h2, .sms-use-cases__heading h2, .sms-advantages h2, .sms-developer-experience__intro h2, .sms-messaging-matrix__heading h2) {
  max-width: 24ch;
  font-size: var(--product-heading-size);
  line-height: 1.12;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.sms-page .sms-values .sms-features__heading h2 { max-width: 24ch; }
.sms-page h2 .product-heading-word { display: inline-block; max-width: 100%; }
.sms-page .sms-features__heading p { max-width: 62ch; font-size: var(--product-copy-size); line-height: 1.65; }
.sms-page .sms-feature-card { height: auto; min-height: 200px; padding: 32px; border-radius: 16px; }
.sms-page .sms-feature-card__copy { align-self: flex-start; }
.sms-page .sms-advantage-card { border-radius: 16px; }
.sms-page :is(.sms-hero__button, .sms-use-cases__cta, .sms-developer-experience__cta) { min-height: 56px; font-size: 16px; line-height: 24px; }

@media (max-width: 920px) {
  .sms-page { --product-section-space: 80px; --product-section-gap: 40px; --product-heading-size: 36px; }
  .sms-page .sms-values .sms-features__heading h2 { max-width: 22ch; }
}

@media (max-width: 620px) {
  .sms-page { --product-section-space: 64px; --product-section-gap: 32px; --product-heading-size: 32px; --product-copy-size: 16px; }
  .sms-page .sms-hero h1 { font-size: clamp(40px, 10vw, 48px); }
  .sms-page .sms-hero__metrics { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .sms-page .sms-hero__metric { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: 16px; }
  .sms-page .sms-feature-card { padding: 24px; }
  .sms-page .sms-pricing-campaign h2 { font-size: var(--product-heading-size); line-height: 1.15; }
  .sms-page .sms-pricing-campaign h2:lang(en) br, .sms-page .sms-pricing-campaign h2:lang(id) br { display: none; }
}

/* Product canvases share the FAQ ivory; nested demos and cards keep their own surfaces. */
.sms-page > main.footer-foreground,
.sms-page > main.footer-foreground > section {
  background: var(--ivory);
}

.sms-page .sms-hero__glow,
.sms-page .sms-messaging-matrix__glow { display: none; }