/* Shared type roles. Load last, after page layout styles, including standalone pages.
   These rules intentionally own typography, not component motion or business state. */
:root {
  --type-body: 17px;
  --type-ui: 15px;
  --type-label: 14px;
  --type-meta: 13px;
  --type-caption: 12px;
  --type-code: 14px;
  --type-page-title: clamp(48px, 3vw, 64px);
  --type-section-title: clamp(42px, 3.45vw, 58px);
  --type-card-title: 36px;
  --type-compact-title: 24px;
  --type-article-title: 28px;
  --type-article-subtitle: 20px;
  --type-stat: clamp(32px, 2.1vw, 40px);
  --type-body-leading: 1.6;
  --type-ui-leading: 1.4;
  --type-subtle: #70706a;
  --type-placeholder: #73736d;
  --type-sans: var(--font-sans, 'Source Sans 3', 'PingFang SC', 'Microsoft YaHei', sans-serif);
  --type-display: var(--font-display, 'EB Garamond', Georgia, serif);
  --type-mono: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
}
:root[data-theme="dark"] { --type-subtle: #b0b0a8; --type-placeholder: #8f8f87; }
@media (max-width: 700px) {
  :root {
    --type-body: 16px;
    --type-code: 13px;
    --type-page-title: clamp(36px, 9vw, 42px);
    --type-section-title: clamp(34px, 8vw, 38px);
    --type-card-title: 30px;
    --type-compact-title: 22px;
    --type-article-title: 26px;
    --type-stat: clamp(28px, 7.5vw, 34px);
  }
}

html:root body { font-family: var(--type-sans); font-size: var(--type-body); line-height: var(--type-body-leading); }
html:root body :is(button, input, select, textarea) { font-family: var(--type-sans); }
/* Hints have one quieter text role; entered values keep the control's ink color. */
html:root body :is(input, textarea)::placeholder {
  color: var(--type-placeholder);
  opacity: 1;
  font-weight: 400;
}

/* Display hierarchy; keep the existing editorial serif, never scale every word alike. */
html:root body :is(.hero h1, .secondary-title, .catalog-intro h1, .model-trends h1, .page-slim h1, .syspage h1, .docs__main h1, h1) {
  font-family: var(--type-display);
  font-size: var(--type-page-title);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.03em;
}
html:root body :is(.section-head h2, .section__head h2, .secondary-section-head h2, .capabilities__head h2, .credit-plans__head h2, .home-faq__intro h2, .start-copy h2, .model-trends .section-heading h2, .about-zen__manifesto h2) {
  font-family: var(--type-display);
  font-size: var(--type-section-title);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.03em;
}
html:root body :is(.capability__copy h3, .mcard h3,
  .dxportal__card h2, .about-zen__facts h2, .contact-zen__details h2, .feat__card h3) {
  font-family: var(--type-display);
  font-size: var(--type-card-title);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.025em;
}
html:root body .story-copy h3 { font-size: var(--type-compact-title); line-height: 1.1; }
html:root body .docs__main h2 { font-size: var(--type-article-title); line-height: 1.2; }
html:root body .docs__main h3 { font-size: var(--type-article-subtitle); line-height: 1.3; }

/* Reading copy, including formerly tiny carousel descriptions. */
html:root body :is(.hero-description, .lead, .secondary-lead, .catalog-intro > p, .secondary-section-head p,
  .story-copy p, .capability__copy p,
  .mcard__desc, .faq__answer-inner, .faq__answer-inner p, .faq__a p, .start-copy > p,
  .model-trends .intro-bottom p, .model-trends .section-heading p,
  .docs__main p, .docs__main li, .note p, .dxcard p, .dxportal__card p,
  .page-slim .feat__card p, .about-zen__facts p, .about-zen__manifesto > p, .contact-zen__cards p,
  .contact-zen__details p, .contact-zen__details address, .contact-zen__details a,
  .footer__identity p, .footer__col:first-child p, .syspage .lead) {
  font-family: var(--type-sans);
  font-size: var(--type-body);
  font-weight: 400;
  line-height: var(--type-body-leading);
}
html:root body .mcard__desc { min-height: calc(var(--type-body) * 1.6 * 4); }

/* Navigation and interactive text share a readable UI size. */
html:root body :is(.nav-links a, .nav__links a, .navigation nav a,
  .btn, .action, .sign-in, .sign-up, .auth__signin, .auth__signup,
  .model-prompt input, .model-prompt button, .model-prompt button b,
  .lang__menu button, .lang__item, .mtype, .munit__btn, .mview__btn, .msort,
  .mfilter-check, .mvendor-toggle, .pager__btn[data-page], .faq__cat,
  .secondary-link,
  .model-trends .segmented button, .model-trends .search input,
  .dxnav a, .dxnav__parent, .dx__navbtn, .dxpager strong, .footer-links a, .footer__col a) {
  font-family: var(--type-sans);
  font-size: var(--type-ui);
  line-height: var(--type-ui-leading);
}
html:root body :is(#modelSearch, .model-trends .search input) { font-size: max(16px, var(--type-ui)); }
/* Arrows remain icons, not 15px labels. */
html:root body .pager__btn:is([data-page="prev"], [data-page="next"]) { font-size: 20px; }

/* Labels: enough distinction from prose, without tiny all-caps text. */
html:root body :is(.mfilter-section__head, .mtable th, .tbl th,
  .model-trends .ranking-header, .dxnav__group, .dxnav__title, .dxtoc__t,
  .code__tab, .code__copy, .builder-languages button, .copy-code,
  .promo, .promo strong, .promobar__msg) {
  font-family: var(--type-sans);
  font-size: var(--type-label);
  line-height: var(--type-ui-leading);
}
html:root body :is(.mtable td, .tbl td, .model-trends .model-title strong, .model-trends .row-tokens strong) {
  font-size: var(--type-ui);
  line-height: 1.5;
}

/* Supporting content. Captions remain smaller than prose, but never 7–11px. */
html:root body :is(.metric dd, .hero__stat dd,
  .mcard__vendor, .mchip, .mprice__cap, .mpcell__k, .mmeta, #modelPriceNote,
  .credit-plan__balance, .credit-plan__cta, .plan__credits, .plan__bonus,
  .model-trends .source-link, .model-trends .period-label, .model-trends .snapshot-badge,
  .model-trends .metrics dt, .model-trends .metrics p, .model-trends .chart-caption,
  .model-trends .chart-legend, .model-trends .chart-note, .model-trends .chart-tooltip,
  .model-trends .model-title small, .model-trends .row-tokens small,
  .model-trends .row-growth, .model-trends .rankings-toolbar > span,
  .model-trends .rankings-footer, .model-trends .data-attribution,
  .capability__copy small,
  .brand-row-caption em, .brand-row-caption em span,
  .dxcrumb, .dxtoc a, .dxpager span, .dxep__copy, .dxcopy,
  .footer__legal, .footer__legal p, .footer__legal a, .footer-bottom,
  .about-zen__stats dd, .prompt-feedback) {
  font-family: var(--type-sans);
  font-size: var(--type-meta);
  line-height: 1.5;
}
html:root body :is(.metric dd, .footer__legal, .footer__legal p, .footer__legal a,
  .capability__copy small, .dxtoc a, .about-zen__stats dd) { color: var(--type-subtle); }
html:root body .metric dd { white-space: normal; letter-spacing: .035em; }

html:root body :is(.section-kicker, .chip--accent, .story-no, .capability__index,
  .mfilter__label, .mtype__count, .mfilter-check__count, .credit-plan__index, .faq__no,
  .brand-row-caption > span,
  .protocol-window__bar > span, .protocol-window__tabs b, .protocol-window__tabs span,
  .protocol-window__pulse span, .protocol-window__pulse b, .docs-route__num,
  .contact-console__bar > span, .contact-console__status, .contact-zen__details article > span,
  .dxep__m, .countries__head,
  .model-trends .rank-number, .model-trends .count, .model-trends .chart-caption span:last-child,
  .footer-links b, .footer__col h4, .dxportal__num, .dxportal__eyebrow,
  .dxnav__no, .req, .opt, .builder-window__status, .builder-window__status b,
  .capability-motion-toggle b, .about-zen__facts > article > span,
  .route-map__label, .route-map__legend,
  .contact-zen__cards > article > span) {
  font-family: var(--type-sans);
  font-size: var(--type-caption);
  line-height: 1.4;
}
html:root body :is(.footer-links b, .footer__col h4, .mfilter-check__count,
  .credit-plan__index, .faq__no, .capability__index) { color: var(--type-subtle); }

/* Business numbers use the body face; tabular figures align columns without a font switch. */
html:root body :is(.metric__value, .metric__value span, .hero__stat dt, .model-trends .metrics dd,
  .mpcell__v, .mtable .num, .mtable .mono, .mchip, .mtype__count, .mfilter-check__count,
  .model-trends .row-tokens, .model-trends .row-growth, .model-trends .rank-number,
  .credit-plan__index, .credit-plan__balance b,
  .credit-plan__amount, .credit-plan__amount strong, .credit-plan__amount sup,
  .plan__price, .plan__credits strong, .about-zen__stats dt) {
  font-family: var(--type-sans);
  font-variant-numeric: lining-nums tabular-nums;
}
html:root body :is(.metric__value, .hero__stat dt, .model-trends .metrics dd, .about-zen__stats dt) {
  font-size: var(--type-stat);
  font-weight: 500;
  line-height: 1.15;
}
html:root body .mpcell__v { font-size: var(--type-body); line-height: 1.4; }
html:root body :is(.credit-plan__balance b, .plan__credits strong) { font-size: var(--type-ui); line-height: 1.4; }
html:root body .model-trends .chart-label { font-size: var(--type-caption); font-family: var(--type-sans); font-variant-numeric: lining-nums tabular-nums; }

/* Code is the exception, including real technical identifiers, not ordinary dates/counts. */
html:root body :is(pre, code, .code-pane, .builder-code, .builder-code-gutter, .dxep__p, .terminal__host, .builder-window__title) {
  font-family: var(--type-mono);
  font-size: var(--type-code);
  line-height: 1.65;
}
html:root body :is(.mcard__copy code, .docs__main :not(pre) > code) { font-size: var(--type-meta); }
html:root body .mcard__copy code { line-height: 1.5; }
html:root body .code-pane { tab-size: 2; }

/* The compact copy action is an explicit, tested exception requested by the user. */
html:root body.page-models .mtable .mcopy { font-size: var(--type-caption); }

/* Standalone WAF pages do not load the application layout stylesheet. */
html:root body.type-standalone :is(.tag, small) { font-size: var(--type-meta); line-height: 1.5; }
html:root body.type-standalone :is(p, ul) { font-size: var(--type-body); line-height: 1.6; }
html:root body.type-standalone :is(.btn, summary) { font-size: var(--type-ui); }

/* Space follows the type: retain content rather than squeezing enlarged labels. */
html:root body .hero-metrics__grid { min-height: 100px; }
html:root body .story { height: auto; }
html:root body .builder-code-pane { height: 440px; }
html:root body .builder-code { height: 440px; }
@media (max-width: 700px) {
  html:root body .hero-metrics__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
  html:root body .hero-metrics .metric { padding: 4px 16px; }
  html:root body .hero-metrics .metric:nth-child(odd) { padding-inline-start: 0; }
  html:root body .hero-metrics .metric:nth-child(3)::before { content: none; }
  html:root body .model-trends .metrics > div { padding-inline: 16px; }
}