/* Shared type roles for the page, case studies and interactive examples.
   Change sizes here rather than adding per-component or per-language sizes. */
:root {
  --type-display: 4.5rem;
  --type-title: 2.5rem;
  --type-section: 1.75rem;
  --type-subtitle: 1.25rem;
  --type-body: 1rem;
  --type-secondary: .875rem;
  --type-caption: .75rem;
}
html { font-size: 100%; }
body { font-size: var(--type-body); line-height: 1.65; }
button, input, select, textarea { font-size: inherit; }
small, figcaption { font-size: var(--type-caption); line-height: 1.6; }
h1 { font-size: var(--type-display); }
h2 { font-size: var(--type-title); line-height: 1.15; }
h3 { font-size: var(--type-section); line-height: 1.25; }
h4 { font-size: var(--type-subtitle); line-height: 1.35; }
p { line-height: 1.7; }

/* Primary headings retain one hierarchy across all chapters and cases. */
.opening h1 { font-size: var(--type-display); line-height: 1.08; }
.chapter-content > h2, .story > h2, .contact-grid h2 {
  font-size: var(--type-title); line-height: 1.15;
}
.chronology-intro h2, .story-section-title,
.story-custom > h3, .story-comparison h3, .ana-story h3,
.payment-demo-heading h3, .acquisition-copy h3, .bo-transformation h3,
.story-video-area h3 {
  font-size: var(--type-section); line-height: 1.25;
}
.technical-roles h3, .story-columns h3, .story-client-example > h3,
.story-client-example > h4, .ana-contribution h4, .bo-scene h4,
.capture-guidance h4, .account-link strong, .ecosystem-launcher .node-name {
  font-size: var(--type-subtitle); line-height: 1.35;
}
.opening-lead, .chapter-lead, .agency-context, .personal-chapter .chapter-content > p, .contribution > p, .story-intro, .story-columns p,
.story-custom > p, .story-client-example > p, .story-video-area p,
.ana-story > header p, .ana-contribution p, .acquisition-copy > p,
.contact-copy > p {
  font-size: var(--type-body); line-height: 1.7;
}
.technical-roles p, .ecosystem-launcher .node-purpose, .capture-instruction,
.payment-demo-heading p, .bo-scene > p, .story-responsibility p,
.payment-to-receipt > p, .acquisition-result > div > span {
  font-size: var(--type-secondary); line-height: 1.65;
}

/* Navigation and actions have a single readable size, regardless of location. */
.desktop-nav, .desktop-nav a, .nav-contact, .button, .text-link, .case-link, .story-next, .story-external, .contact-link, .copy-email,
.back-top, .phase-pagination > button, .sim-reset, .capture-next, .capture-back,
.close-dialog > span, .mobile-language-row, .hero-open {
  font-size: var(--type-secondary); line-height: 1.45;
}
.wordmark { font-size: var(--type-section); }
.wordmark i { font-size: inherit; }
.dialog-bar .wordmark { font-size: var(--type-subtitle); }
.language-switch button, .language-switch > span, #case-counter,
.phase-label time, .phase-label small, .phase-position, .phase-dot,
.chapter-date > p, .chapter-date > small, .technical-roles time,
.eyebrow, .contribution > span, .story-meta, .story-role, .pill,
.ecosystem-launcher .node-role, .ecosystem-launcher .node-action,
.opening-phone figcaption, .story-image figcaption, .ana-demo-media figcaption,
.acquisition-receipt figcaption, .agency-account small, .footer-date,
.capture-step, .capture-help, .capture-device-column .sim-device-label,
.payment-progress li, .payment-progress li > span, .bo-scene .bo-scene-caption,
.acquisition-flow > li > span, .acquisition-flow p, .acquisition-result > div > p,
.comparison-label, .comparison-hint, .story-evidence, .toast {
  font-size: var(--type-caption); line-height: 1.6;
}
.phase-label strong, .agency-account strong, .acquisition-flow strong {
  font-size: var(--type-secondary); line-height: 1.45;
}
.agency-account strong { overflow-wrap: anywhere; }
.phase-label small { margin-top: 4px; }
.phase-pagination .phase-position { font-size: var(--type-caption); }
.phase-label { position: relative; z-index: 1; min-width: 0; }

/* Circles sit above the connector; the mobile line joins their centres. */
.phase-tab::before { z-index: 0; pointer-events: none; }
.phase-dot { position: relative; z-index: 1; }
.phase-tab { --dot-size: 32px; }
.phase-dot { width: var(--dot-size); height: var(--dot-size); }
.phase-tab::before { left: calc(var(--dot-size) / 2); }

/* Product-specific display elements use the same size roles. */
.ana-name { font-size: var(--type-title); line-height: 1.15; }
.ana-star-title { font-size: var(--type-section); line-height: 1.25; }
.ana-star { font-size: inherit; }
.app-version-line { font-size: var(--type-subtitle); line-height: 1.35; }
.acquisition-result > strong { font-size: var(--type-title); }
.capture-amount { font-size: var(--type-body); }
.bo-window-bar > b, .bo-sheet-head > span, .bo-form-field > span,
.bo-form-approved { font-size: var(--type-caption); line-height: 1.4; }
.bo-sheet-head > span { overflow-wrap: anywhere; }
.bo-sheet-row > i, .bo-form-field > b { font-size: var(--type-secondary); }
.button > span, .nav-contact > span, .case-link > span,
.phase-pagination > button > span[aria-hidden], .ecosystem-connection > b,
.ecosystem-launcher .node-action i, .agency-account i, .sim-reset > span,
.payment-to-receipt > span, .comparison-line > span, .close-image {
  font-size: var(--type-subtitle); line-height: 1;
}

@media (max-width: 800px) {
  :root { --type-display: 3rem; --type-title: 2rem; --type-section: 1.5rem; }
  .phase-tab { padding-top: 5px; align-items: center; }
  .phase-tab::before {
    top: calc(5px + var(--dot-size) / 2) !important;
    left: calc(-50% + var(--dot-size) / 2);
    right: calc(50% + var(--dot-size) / 2);
    width: auto; height: 1px; bottom: auto !important;
  }
  .phase-label time {
    white-space: normal; display: flex; align-items: center; justify-content: center;
    min-height: 2.8em; letter-spacing: -.025em;
  }
  .phase-label strong {
    font-size: var(--type-caption); min-height: 4.35em;
    overflow-wrap: anywhere; hyphens: auto;
  }
  .phase-nav-wrap { padding-inline: 12px; }
  .phase-nav { align-items: start; }
  .chapter { scroll-margin-top: 180px; }
  .capture-walkthrough { grid-template-columns: minmax(112px, .85fr) minmax(0, 1fr); }
  .capture-next { overflow-wrap: anywhere; }
  .payment-demo-heading { flex-wrap: wrap; gap: 16px; }
  .payment-progress { flex-wrap: wrap; justify-content: flex-start; gap: 12px 18px; }
  .dialog-bar #case-counter {
    max-width: none; min-width: 0; flex: 1; line-height: 1.4;
    letter-spacing: .04em;
  }
  .dialog-bar { gap: 8px; height: auto; min-height: 76px; padding-block: 12px; }
  .dialog-bar .wordmark { flex-shrink: 0; }
  .case-languages { margin-left: 0; margin-right: 4px; }
  .language-switch button { min-width: 30px; padding-inline: 7px; }
  .story-columns { gap: 24px; }
  .acquisition-result { flex-wrap: wrap; }
  .bo-window-bar { flex-wrap: wrap; }
  .bo-window-bar > b { margin-left: 0; }
}
@media (max-width: 420px) {
  .story { padding-inline: 19px; }
  .phase-nav-wrap { padding-inline: 10px; }
  .phase-pagination > button { max-width: 40%; }
}

.contact-channel-label { font-size: var(--type-caption); line-height: 1.5; }
.contact-email-address { font-size: var(--type-subtitle); line-height: 1.5; }
.contact-network { font-size: var(--type-secondary); line-height: 1.5; }
@media(max-width: 800px) { .contact-email-address { font-size: var(--type-body); } }
@media (min-width: 801px) and (max-width: 1100px) {
 :root { --type-display: 3rem; }
}