/* Shared type roles. Loaded after page styles by every native layout. */
body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
}

h1, h2, blockquote {
  font-family: var(--font-display);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--tracking-display);
}
h1 { font-size: var(--text-hero); line-height: var(--leading-hero); }
h2 { font-size: var(--text-section); line-height: var(--leading-section); }
h3 { font-size: var(--text-card); line-height: var(--leading-card); }
h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-medium);
}
blockquote { font-size: var(--text-card); line-height: var(--leading-card); }
blockquote :is(footer, cite) {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--tracking-body);
}
strong, b { font-weight: var(--font-weight-semibold); }
/* Emphasis inside a display heading uses the real regular face in the kit. */
:is(h1, h2, blockquote) :is(strong, b) { font-weight: inherit; }
button, input, select, textarea, code, pre, kbd, samp {
  font-family: var(--font-sans);
}

body .site-header, body .site-footer, body .lp2-nav {
  font-family: var(--font-sans);
}
body[class] :is(.btn, .btn-inverse, .btn-ghost, .v4btn, .lp2-btn),
.site-header :is(.navbar__trigger, .navbar__mobile-trigger, .navbar__mobile-back,
  .navbar__mobile-link, .navbar__submenu-link, .navbar__signin) {
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-ui);
}
.site-footer .footer__nav--outcome h3 {
  font-family: var(--font-display);
  font-size: var(--text-card);
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-card);
}

/* Prose is comfortable to read; compact dashboard notes keep their own role. */
body[class] :is(.feature-body, .story-body, .pcard-body, .half-body, .body-text) {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  max-width: var(--measure-prose);
}
body[class] :is(.feature-lead, .head-sub, .di-hero__sub, .lp2-hero__sub) {
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
  max-width: var(--measure-prose);
}
body[class] :is(.eyebrow, .pcard-eyebrow, .roi-summary-label) {
  font-family: var(--font-sans);
  font-size: var(--text-label);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-label);
}

/* Product illustrations use the same interface face as the real data tables. */
:is(.win, .di-dashboard, .spend-dashboard, .ai-roi-dashboard, .af-panel) {
  font-family: var(--font-sans);
  font-variant-numeric: lining-nums tabular-nums;
}
:is(.win, .di-dashboard, .spend-dashboard, .ai-roi-dashboard, .af-panel) :is(h2, h3),
body[class] :is(.af-panel-title, .data-card__title, .data-takeaway__title) {
  font-family: var(--font-sans);
  font-size: var(--text-dashboard-title);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-dashboard-title);
  letter-spacing: var(--tracking-body);
}
table, .mono, .big, .vval, .brg-v, .roi-summary-value,
[class$="__value"], [class$="-value"] {
  font-variant-numeric: lining-nums tabular-nums;
}
body[class] :is(.big, .brg-v, .kpi-value, .roi-summary-value,
  .di-dashboard__total, .di-dashboard__metric) {
  font-size: var(--text-metric);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-metric);
}
.ai-roi-dashboard .tbl.compact :is(th, td) {
  font-size: var(--text-secondary);
  line-height: var(--leading-secondary);
}
.ai-roi-dashboard .roi-summary-value span {
  font-size: var(--text-caption);
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-caption);
}
.ai-roi-dashboard .roi-summary-value { white-space: nowrap; }
.ai-roi-dashboard .opp-body { font-size: var(--text-secondary); line-height: var(--leading-secondary); }

/* Inline SVG uses drawing coordinates for size, while sharing the UI family. */
svg text { font-family: var(--font-sans); }

/* Let readable text determine illustration height. The animated Ask AI stage
   retains its explicit frame because its conversation turns are positioned. */
@media (min-width: 1025px) {
  body[class] .panel:not(.panel--ask):has(> .win) {
    height: auto;
    padding: 28px;
  }
  body[class] .panel:not(.panel--ask) > .win {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
  }
}