/* Shared roles: section styles control layout and color, never text geometry. */
:root {
  --font-family: A2Z, Arial, sans-serif;
  --font-width: 100%;
  --title-size: 40px;
  --hero-size: 68px;
  --subtitle-size: 24px;
  --body-size: 18px;
  --faq-answer-size: 16px;
  --note-size: 13px;
  --title-leading: 1.4;
  --subtitle-leading: 1.45;
  --body-leading: 1.85;
  --note-leading: 1.7;
  --title-tracking: -.04em;
  --subtitle-tracking: -.03em;
  --body-tracking: -.02em;
  --note-tracking: 0em;
}

body, button, a, p, h1, h2, h3, h4, span, small, strong, em, b, summary, div {
  font-family: var(--font-family);
  font-stretch: var(--font-width);
  font-style: normal;
}
body {
  font-size: var(--body-size);
  line-height: var(--body-leading);
  letter-spacing: var(--body-tracking);
  font-weight: 400;
}

/* Title: all section titles share these settings, including the last CTA. */
h1, main h2 {
  font-size: var(--title-size);
  line-height: var(--title-leading);
  letter-spacing: var(--title-tracking);
  font-weight: 700;
}
.hero h1 { font-size: var(--hero-size); }

/* Subtitle: nested headings and the dialog title. */
main h3, main h4, dialog h2, .ambassador-name strong {
  font-size: var(--subtitle-size);
  line-height: var(--subtitle-leading);
  letter-spacing: var(--subtitle-tracking);
  font-weight: 700;
}

/* Body: same type settings in every light and dark section. */
p, .hero-copy, .feature-copy p, .statement p,
.section-heading>p, .profit-section p, .insight p, .membership p,
.membership-card p, .faq details p, dialog p, .footer-top p,
.visual-data-row, .waterfall-caption {
  font-size: var(--body-size);
  line-height: var(--body-leading);
  letter-spacing: var(--body-tracking);
  font-weight: 400;
}

/* Footnote: notices, status descriptions and chart annotations. */
.demo-label, .demo-note, .visual-note, .window-dots span,
.content-pending, .ambassador-name span, .footer-bottom,
.waterfall-caption small, .chart-labels, .x-labels, .legend,
.chart-title>span, .metric small, .metric em, .metric em span,
.donut>div, .waterfall span, .promo-badge {
  font-size: var(--note-size);
  line-height: var(--note-leading);
  letter-spacing: var(--note-tracking);
  font-weight: 400;
}

/* Controls and product mockup labels reuse body/note tokens. */
.header nav, .text-button, .button, .button.small, .hero-actions .button,
.final-cta .button, .membership-card .button, .feature-link, .light-link,
.feature-tabs button, .feature-tabs button span, .faq summary,
.footer-top a, .footer-top .text-button, .footer-top h3 {
  font-size: var(--body-size);
  line-height: var(--body-leading);
  letter-spacing: var(--body-tracking);
  font-weight: 400;
}
.button, .button.small, .hero-actions .button, .final-cta .button,
.membership-card .button, .feature-link, .footer-top h3,
.feature-tabs button[aria-selected=true],
.feature-tabs button[aria-selected=true] span { font-weight:700; }
.product-name, .product-sidebar, .period, .metric>span, .chart-title {
  font-size:var(--note-size);
  line-height:var(--note-leading);
  letter-spacing:var(--note-tracking);
  font-weight:400;
}
.product-name, .store, .side-item.active, .chart-title, .promo-badge { font-weight:700; }
.metric strong, .visual-data-row strong, .donut strong {
  font-size:var(--subtitle-size);
  line-height:var(--subtitle-leading);
  letter-spacing:var(--subtitle-tracking);
  font-weight:700;
}
/* Inline fragments inherit the entire role, including line-height. */
h1 span, h2 span, .waterfall-caption b { font:inherit; letter-spacing:inherit; }
.metric small { margin-left:4px; }

/* Glyphs are icons, not alternative text roles. */
.button span, .feature-link span, .mini-mark { font-size:20px; line-height:1; }
.promo-decor-right em { font-size:11px; line-height:1; letter-spacing:.08em; }
.menu-button, .faq summary span, .dialog-close { font-size:24px; line-height:1; }
.pixel-arrow { font-family:Arial,sans-serif; font-size:330px; line-height:1; font-weight:700; }
.cta-arrow { font-family:Arial,sans-serif; font-size:360px; line-height:1; font-weight:700; }

@media(max-width:1050px) {
  .header { gap:24px; }
  .header nav { gap:20px; }
  .nav-actions { gap:20px; }
  .header { padding-inline:max(var(--content-gutter),calc((100% - var(--content-max-width))/2)); }
  .product-sidebar { width:175px; }
  .metric-grid { grid-template-columns:1fr; }
  .metric { display:grid; grid-template-columns:1fr auto; align-items:center; gap:7px 12px; }
  .metric strong { margin:0; }
  .metric em { grid-column:1/-1; }
}
@media(max-width:760px) {
  :root { --title-size:30px; --hero-size:38px; --subtitle-size:22px; }
  .header { padding-inline:20px; gap:12px; }
  .nav-actions { gap:12px; }
  .button.small { padding:10px 12px; }
  .brand img { width:88px; height:auto; }
  .hero-actions { flex-wrap:wrap; }
  .ambassador-name { align-items:baseline; }
  .membership-card p br { display:none; }
  .chart-title { align-items:baseline; }
  .metric strong { white-space:nowrap; }
  .visual-data-row { flex-wrap:wrap; gap:6px 16px; }
  .pixel-arrow { font-size:300px; }
  .cta-arrow { font-size:240px; }
}

/* User-requested exception: FAQ answers retain 16px. */
.faq details p { font-size:var(--faq-answer-size); }

/* User-requested header size exception, shared by all navigation pages. */
.header nav,.header .text-button,.header .button.small{font-size:var(--header-font-size)}