/* Marketing type scale. App mockups and icon glyphs retain their own styles. */
:root {
  --text-xs:12px;
  --text-sm:14px;
  --text-body:16px;
  --text-lg:20px;
  --text-title:24px;
  --text-section:32px;
  --text-display:40px;
  --heading-size:var(--text-section);
}
body {font-size:var(--text-body)}
#headline {font-size:var(--text-display);line-height:1.4}
.workload h2,.feature-section-heading h2,.slip-flow h2,
.portfolio-ai h2,.pricing-heading h2,.getting-started h2 {
  font-size:var(--text-section);line-height:1.4;font-weight:700;
}
.portfolio-copy h3,.pricing-plan h3,#contact h2 {
  font-size:var(--text-title);line-height:1.5;
}
.workload h3,.getting-started-steps h3,.sms-addons h3,.faq-heading {
  font-size:var(--text-lg);line-height:1.5;
}
.hero .intro p,.workload-description,.feature-description,
.getting-started-description,.getting-started-steps p,
.pricing-heading>p,.plan-summary,.ai-description,.slip-flow-heading p {
  font-size:var(--text-body);line-height:1.75;
}
.primary,.secondary {font-size:var(--text-body)}
.header .desktop-section-nav,.desktop-nav-actions,
#mobile-drawer nav a,#mobile-drawer .nav-login,#mobile-drawer .nav-start {
  font-size:var(--text-sm);
}
.header .brand {font-size:var(--text-lg)}
.footer-brand {font-size:var(--text-title)}
.feature-points {font-size:var(--text-body)}
#sales-request p,#sales-status,.demo-controls button {font-size:var(--text-sm)}
.marketing-footer,.topic-number {font-size:var(--text-xs)}
@media(max-width:1200px) {
  #headline {font-size:var(--text-section)}
}
@media(max-width:760px) {
  .workload h2,.feature-section-heading h2,.slip-flow h2,
  .portfolio-ai h2,.pricing-heading h2,.getting-started h2 {
    font-size:var(--text-title);
  }
}

/* Keep the mobile hero headline to one fixed line plus one rotating line. */
@media(max-width:760px) {
  #headline {font-size:var(--text-title)}
  .headline-fixed {white-space:nowrap}
  .headline-fixed wbr {display:none}
}
@media(max-width:360px) {
  #headline {font-size:var(--text-lg)}
}

/* Shared action typography for navigation and hero buttons. */
.desktop-nav-actions,#mobile-drawer .nav-login,#mobile-drawer .nav-start,
.hero .actions > a,.hero .actions > button {font-size:var(--text-body);font-weight:400}

/* Match the concise heading/summary layout above the feature cards. */
.slip-flow-heading p {font-size:var(--text-sm);line-height:24px;margin:0;text-align:right}
@media(max-width:700px) {
  .slip-flow-heading {gap:8px}
  .slip-flow-heading p {text-align:left}
}

/* Let the chat example carry the details; keep the introduction concise. */
.portfolio-ai-copy .ai-eyebrow{font-size:var(--text-sm);line-height:24px;margin:0 0 12px}
.portfolio-ai-copy h2{line-height:1.4;text-wrap:balance}
.portfolio-ai-copy .ai-description{font-size:var(--text-body);line-height:1.75;margin:20px 0 0;max-width:360px;text-wrap:pretty}
@media(max-width:700px){.portfolio-ai-copy .ai-description{margin-top:16px}}

.portfolio-ai-copy .ai-description br{display:initial}