/* Shared type roles. Keep page composition and artwork in redesign.css. */
:root {
  --type-hero: clamp(2.5rem, 4.5vw, 4rem);
  --type-section: clamp(1.875rem, 3vw, 2.75rem);
  --type-card: 1.5rem;
  --type-feature: 1.125rem;
  --type-body: 1rem;
  --type-small: .875rem;
  --type-caption: .8125rem;
  --leading-heading: 1.08;
  --leading-body: 1.6;
  --leading-ui: 1.45;
}

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { font-size: var(--type-body); line-height: var(--leading-body); }

/* The main ID keeps legacy per-page size overrides from changing these roles. */
#main h1,
#main h2,
#main h3,
#main h4 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -.025em;
  line-height: var(--leading-heading);
  overflow-wrap: break-word;
}
#main h1 { font-size: var(--type-hero); }
#main h2 { font-size: var(--type-section); }
#main h3,
#main h4 { font-size: var(--type-card); line-height: 1.2; }
#main p,
#main li,
#main dd { font-size: var(--type-body); line-height: var(--leading-body); }
#main :is(input, select, textarea) {
  font-family: var(--font-sans);
  font-size: var(--type-body);
  line-height: var(--leading-ui);
}
#main button { font-family: var(--font-sans); }

/* One shared shell on every route. */
body .brand-lockup__name { font-size: var(--type-body); line-height: 1.25; }
body .brand-lockup__label { font-size: var(--type-caption); line-height: 1.4; }
body .site-footer .brand-lockup__label { color: var(--text-muted); }
body .site-nav__list a,
body .mobile-nav__list a,
body .site-footer__nav a { font-size: var(--type-small); line-height: var(--leading-ui); }
body .site-footer__copyright { font-size: var(--type-caption); line-height: var(--leading-ui); }
body .site-footer__inner { flex-wrap: wrap; }
body .site-footer__socials :is(a, span) { font-size: var(--type-small); }

/* The desktop header brand is deliberately larger than navigation and UI copy. */
@media (min-width: 981px) {
  body .site-header .brand-lockup__name { font-size: 1.375rem; }
  body .site-header .brand-lockup__label { font-size: .9375rem; }
}
@media (min-width: 1200px) {
  body .site-header .brand-lockup__name { font-size: 1.5rem; }
  body .site-header .brand-lockup__label { font-size: var(--type-body); }
}

body .btn,
body .button,
#main .btn,
#main .button {
  font-family: var(--font-sans);
  font-size: var(--type-small);
  font-weight: 600;
  line-height: var(--leading-ui);
  min-height: 44px;
}
#main .text-link,
#main .home-hero__cue,
#main .resource-detail-back,
#main .post-approved__back,
#main .post-toc nav a,
#main .service-other__links a {
  font-family: var(--font-sans);
  font-size: var(--type-small);
  line-height: var(--leading-ui);
}
#main .section-kicker,
#main .eyebrow,
#main .label,
#main .case-detail-meta dt,
#main .post-toc summary {
  font-family: var(--font-sans);
  font-size: var(--type-caption);
  font-weight: 600;
  letter-spacing: .08em;
  line-height: var(--leading-ui);
}
#main :is(.section-kicker, .eyebrow, .label) { color: var(--slate-deep); }
#main :is(.section-kicker--light, .section-dark .eyebrow, .closing-cta .eyebrow) { color: var(--teal); }

/* Compact content retains the hierarchy without shrinking supporting copy. */
#main .home-service-card__body strong,
#main .home-service-link strong,
#main .results-ribbon__metric strong,
#main .results-ribbon strong {
  font-size: var(--type-body);
  line-height: var(--leading-ui);
}
#main .home-service-card__body span,
#main .home-service-link small,
#main .results-ribbon__metric span,
#main .results-ribbon span,
#main .approach-map li div span,
#main .case-approved-card__scope,
#main .case-detail-meta dd,
#main .service-deliverable-strip > .site-shell > div,
#main .service-problem aside p,
#main .service-process__grid p,
#main .service-start > .site-shell > p,
#main .resource-detail-steps p {
  font-size: var(--type-small);
  line-height: var(--leading-ui);
}
#main .results-ribbon__label,
#main .results-ribbon__kicker,
#main .blog-preview-card__meta,
#main .blog-approved-card__meta,
#main .post-approved-related__card time,
#main .post-approved__author time,
#main .approved-form__privacy,
#main .contact-next__response {
  font-size: var(--type-caption);
  line-height: var(--leading-ui);
}
#main .results-ribbon__lead { font-size: var(--type-small); line-height: var(--leading-ui); }
#main .coworker-card__breed { font-size: var(--type-small); line-height: var(--leading-ui); }
#main .results-ribbon a { font-size: var(--type-small); }
#main .home-service-card__number,
#main .home-service-card__arrow,
#main .approach-map__number,
#main .resource-detail-steps span { font-size: var(--type-caption); }

#main .approach-map strong,
#main .operation-card h3,
#main .operations-card h3,
#main .blog-preview-card h3,
#main .home-blog-card h3,
#main .service-process__grid h3,
#main .resource-detail-steps strong {
  font-family: var(--font-sans);
  font-size: var(--type-body);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: var(--leading-ui);
}
#main .resource-detail-steps strong { margin-bottom: 4px; }
#main .approach-map strong { margin-bottom: 4px; }

/* Card headings are smaller than section headings, even when marked up as h2. */
#main .service-overview-card h3,
#main .resource-approved-card h2,
#main .case-approved-card h3,
#main .blog-approved-card h2,
#main .coworker-card__content h3,
#main .services-process__steps h3,
#main .post-approved-related__card h3 {
  font-size: var(--type-card);
  line-height: 1.2;
}
#main .post-approved-related__card h3 { font-size: var(--type-feature); }
#main .case-detail-glance h3,
#main .service-problem aside h3 {
  font-family: var(--font-sans);
  font-size: var(--type-small);
  font-weight: 600;
  letter-spacing: .04em;
  line-height: var(--leading-ui);
}
#main .services-pricing h2 {
  font-family: var(--font-sans);
  font-size: var(--type-feature);
  letter-spacing: 0;
  line-height: var(--leading-body);
}
#main .service-start h2,
#main .contact-next h2 { font-size: 2rem; }
#main .approved-form__field label { font-size: var(--type-small); line-height: var(--leading-ui); }
#main .resource-tab,
#main .blog-tabs a,
#main .nav-links { font-size: var(--type-small); line-height: var(--leading-ui); }
#main .resources-free-note { font-size: var(--type-body); line-height: var(--leading-body); }
#main .case-detail-impact__grid strong,
#main .case-detail-metric strong { font-family: var(--font-sans); font-size: 3.5rem; line-height: 1.1; }
#main .case-detail-impact__grid strong span { font-size: var(--type-small); line-height: var(--leading-ui); }

/* Article reading scale is consistent with the rest of the site. */
#main .post-approved__article > h1 { font-size: var(--type-section); }
#main .post-approved__article .prose h2 { font-size: 2rem; line-height: 1.2; }
#main .post-approved__article .prose h3 { font-size: var(--type-card); line-height: 1.2; }
#main .post-approved__article .prose p,
#main .post-approved__article .prose li { font-size: var(--type-body); line-height: 1.7; }

/* Tool copy is UI, so it uses Inter throughout. Scoped selectors also outrank
   the legacy inline tool styles without changing their calculations. */
#main :is(.tool-wrap, .llc-wrap, .crm-health-wrap) {
  --muted: rgba(244, 239, 229, .82);
  --slate-light: rgba(244, 239, 229, .3);
  --border: rgba(244, 239, 229, .22);
  font-family: var(--font-sans);
  font-size: var(--type-body);
  line-height: var(--leading-body);
}
#main :is(.tool-wrap, .llc-wrap, .crm-health-wrap) :is(h2, h3, h4, button, input, select, textarea) {
  font-family: var(--font-sans);
  letter-spacing: 0;
}
#main .tool-wrap :is(.field-input, .lead-input, .niche-btn, .stage-btn),
#main .llc-wrap :is(.llc-field-input, .llc-currency-select),
#main .crm-health-wrap .chc-answer { font-size: var(--type-body); line-height: var(--leading-ui); }
#main .tool-wrap :is(.calc-btn, .lead-submit),
#main .crm-health-wrap .chc-btn { font-size: var(--type-small); font-weight: 600; line-height: var(--leading-ui); min-height: 44px; }
#main .tool-wrap :is(.field-label, .note-label, .lead-eyebrow),
#main .llc-wrap :is(.llc-field-label, .llc-primary-label, .llc-note-label, .llc-gap-label),
#main .crm-health-wrap :is(.chc-section-tag, .chc-score-label, .chc-callout-label) {
  font-size: var(--type-caption);
  font-weight: 600;
  line-height: var(--leading-ui);
}
#main .tool-wrap :is(.how-text span, .stage-hint, .source-note, .disclaimer-text, .lead-privacy, .consent-label span, .error-msg, .lead-error),
#main .llc-wrap :is(.llc-field-helper, .llc-field-suffix, .llc-disclaimer-text, .llc-annual-label, .llc-error),
#main .crm-health-wrap :is(.chc-progress-label, .chc-progress-pct, .chc-disclaimer-text) {
  font-size: var(--type-caption);
  line-height: var(--leading-ui);
}
#main .tool-wrap :is(.how-text strong, .channel-name, .channel-pct),
#main .llc-wrap :is(.llc-compare-title, .llc-compare-row),
#main .crm-health-wrap :is(.chc-cat-name, .chc-cat-pct) {
  font-size: var(--type-small);
  line-height: var(--leading-ui);
}
#main .llc-wrap .llc-compare-title { font-weight: 600; }
#main .tool-wrap :is(.channel-why, .note-text, .lead-sub, .success-sub),
#main .llc-wrap :is(.llc-intro, .llc-note-text, .llc-primary-sub),
#main .crm-health-wrap :is(.chc-intro, .chc-helper, .chc-score-copy, .chc-note-text) {
  font-size: var(--type-body);
  line-height: var(--leading-body);
}
#main .tool-wrap :is(.results-heading, .lead-headline, .success-title),
#main .llc-wrap .llc-breakdown-title,
#main .crm-health-wrap :is(.chc-block-title, .chc-note-title) {
  font-family: var(--font-sans);
  font-size: var(--type-feature);
  font-weight: 600;
  line-height: 1.3;
}
#main .crm-health-wrap .chc-question { font-family: var(--font-sans); font-size: var(--type-card); font-weight: 600; line-height: 1.3; }
#main .tool-wrap .priority-tag { font-size: var(--type-caption); line-height: var(--leading-ui); }
#main .tool-wrap .stage-btn.active .stage-hint { color: var(--muted); }
#main .tool-wrap .channel-left { flex-wrap: wrap; }
#main .tool-wrap .channel-name { white-space: normal; overflow: visible; text-overflow: clip; }
#main .tool-wrap .how-num,
#main .llc-wrap :is(.llc-primary-value, .llc-annual-value, .llc-gap-text),
#main .crm-health-wrap :is(.chc-score-value, .chc-score-band) { font-family: var(--font-sans); font-weight: 700; }
#main .llc-wrap .llc-primary-value { font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1.2; font-weight: 600; }
#main .llc-wrap .llc-gap-text { font-size: var(--type-feature); line-height: 1.3; font-weight: 600; }
#main .llc-wrap .llc-annual-value { font-size: var(--type-feature); font-weight: 600; }
#main .crm-health-wrap .chc-score-value { line-height: 1.15; }
#main .crm-health-wrap .chc-score-band { font-size: var(--type-small); line-height: var(--leading-ui); }
#main .crm-health-wrap .chc-btn-retake { font-size: var(--type-small); line-height: var(--leading-ui); }
#main .crm-health-wrap :is(.chc-progress-label, .chc-progress-pct) { color: var(--text-muted); }

/* Give larger readable labels room at the existing responsive breakpoints. */
#main .home-service-card { min-width: 0; }
#main .home-service-card__body { min-width: 0; }
#main .home-service-card__body strong { overflow-wrap: anywhere; }
#main .service-process__grid article { min-width: 0; }
#main .resource-detail-steps > .site-shell > div { padding-inline: 20px; }
@media (max-width: 1100px) {
  body .site-footer__copyright { white-space: normal; }
}
@media (max-width: 700px) {
  #main .case-detail-impact__grid strong,
  #main .case-detail-metric strong { font-size: 3rem; }
  #main .resource-detail-steps > .site-shell > div { padding-inline: 0; }
  #main .service-other__links a { min-width: 0; overflow-wrap: break-word; }
}