/* Shared beta type system. Load after the legacy page and component styles. */
.type-preview {
  --muted: #4e5b55;
  --type-body: 17px;
  --type-lead: 19px;
  --type-section: 42px;
  --type-card: 22px;
  font-family: var(--sans);
  font-size: var(--type-body);
  line-height: 1.65;
  font-optical-sizing: auto;
}

.type-preview :is(h1, h2, h3, h4, .eyebrow, .pill, th) {
  letter-spacing: 0;
}

.type-preview main h1 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.12;
  text-wrap: balance;
}

.type-preview main h2,
.type-preview .module-row > div > h3 {
  font-family: var(--serif);
  font-size: var(--type-section);
  font-weight: 400;
  line-height: 1.18;
  text-wrap: balance;
}

.type-preview main h3,
.type-preview main h4,
.type-preview main .card :is(h2, h3),
.type-preview :is(.benefits, .workflow-list, .practice-title) h3 {
  font-family: var(--sans);
  font-size: var(--type-card);
  font-weight: 600;
  line-height: 1.35;
  text-wrap: balance;
}

/* This framed diagram introduces a section, not an individual item. */
.type-preview main .data-boundary-card h2 {
  font-family: var(--serif);
  font-size: var(--type-section);
  font-weight: 400;
  line-height: 1.18;
}

.type-preview :is(.benefits, .workflow-list, .step-card, .principle-card) p,
.type-preview .how-sections .how-step > div > p:not(.step-number),
.type-preview .module-row > div > p:not(.eyebrow),
.type-preview .cta-inner > p:not(.eyebrow):not(.cta-note),
.type-preview .practice-grid li {
  font-size: var(--type-body);
  line-height: 1.65;
  color: var(--muted);
}

.type-preview :is(.lead, .hero-description, .hero-lead, .how-lead, .security-lead, .company-lead, .demo-lead, .product-lead) {
  font-size: var(--type-lead);
  line-height: 1.65;
}

.type-preview :is(.eyebrow, .index) {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}

.type-preview :is(.hero-name, .customer-inner p, .product-figure figcaption, .quote-attribution, .form-note, .field-error, .beta-form-result) {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
}

.type-preview .hero-name {
  font-weight: 600;
}

.type-preview .hero-content .eyebrow,
.type-preview .hero-bottom > span {
  font-size: 12px;
}

.type-preview .beta-nav a,
.type-preview .signin {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}

.type-preview :is(.button, .btn, .text-link),
.type-preview .hero-actions :is(.button, .text-link) {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}

.type-preview :is(input, select, textarea, .field) {
  font-family: var(--sans);
  font-size: 16px;
}

.type-preview .footer-top h2 {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}

.type-preview .footer-top > div > a:not(:has(img)),
.type-preview .footer-brand p {
  font-size: 14px;
  line-height: 1.7;
}

.type-preview .footer-top > div > a:not(:has(img)) {
  padding-block: 6px;
}

.type-preview :is(.footer-bottom, .footer-bottom nav, .disclaimer, .beta-label) {
  font-size: 12px;
  line-height: 1.6;
}

.type-preview .cta-inner .cta-note {
  font-size: 14px !important;
}

/* Compact tool surfaces retain a smaller hierarchy than marketing sections. */
.type-preview .workflow-list h3 {
  font-size: 20px;
}

.type-preview .integrations-section .integration-tile h3 {
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: normal;
}

.type-preview .how-sections .scorecard h3 {
  font-size: 14px;
  line-height: 1.5;
}

@media (min-width: 901px) and (max-width: 1150px) {
  .type-preview .beta-nav { gap: 14px; }
  .type-preview .header-inner { gap: 16px; }
  .type-preview .header-actions { gap: 14px; }
  .type-preview .header-demo { gap: 8px; padding-inline: 14px; }
}

@media (max-width: 900px) {
  .type-preview .beta-nav a { font-size: 22px; }
  .type-preview .beta-nav .mobile-signin { font-size: 16px; }
}

@media (max-width: 600px) {
  .type-preview {
    --type-body: 16px;
    --type-lead: 17px;
    --type-section: 32px;
    --type-card: 20px;
  }
  .type-preview .header-demo { font-size: 14px; }
  .type-preview .hero { height: auto; min-height: calc(100svh - 84px); max-height: none; }
  .type-preview .hero-content { padding-top: 112px; padding-bottom: 108px; }
  .type-preview .hero-actions { flex-wrap: wrap; gap: 16px 22px; }
  .type-preview .hero-bottom > span { max-width: 170px; }
  .type-preview .customer-inner { flex-wrap: wrap; justify-content: center; padding-block: 24px; text-align: center; }
  .type-preview .customer-inner p { max-width: none; }
  .type-preview .footer-brand { align-items: flex-start; }
}

@media (max-width: 370px) {
  .type-preview .header-inner { gap: 10px; }
  .type-preview .header-actions { gap: 6px; }
  .type-preview .header-demo { padding-inline: 10px; gap: 6px; }
  .type-preview .hero-bottom > span { max-width: 145px; }
}