/*
 * TIF type scale (claude-site, Nov 5 2026, LOCAL). Jen approved the scale on Nov 5 (QA items 5, 9, 10, 11).
 * Source of truth: ~/Desktop/tif-crew/site/type-audit.md §5 and §10.
 * Loaded by mu-plugins/tif-type-scale.php, which also adds body.tif-ts. Every rule is scoped to body.tif-ts,
 * so turning the switch off removes all of it: wp option update tif_type_scale_on 0
 * Standalone CSS because Grunt isn't installed locally. For the real site, fold the tokens into _global.scss
 * and point each block's SCSS at them (no new px values in block CSS).
 * rem + vw everywhere, so text scales with browser zoom and with the reader's font setting.
 * Homepage HERO only (H1, hero body, hero button) keeps its own treatment (items 10 and 11).
 * H1 is NOT set here: it stays 65/35 via mu-plugins/tif-h1-scale.php (item 9, its own switch).
 */
:root {
  /* size tokens: desktop 1440 / phone 390 */
  --tif-fs-display: clamp(2.5rem, 2.1286rem + 1.524vw, 3.5rem);    /* 56 / 40 */
  --tif-fs-h1:      clamp(2.1875rem, 0.5rem + 3.958vw, 4.0625rem);   /* 65 / 35 (item 9) */
  --tif-fs-h2:      clamp(1.875rem, 1.6429rem + 0.952vw, 2.5rem);    /* 40 / 30 */
  --tif-fs-h3:      clamp(1.5rem, 1.3607rem + 0.571vw, 1.875rem);    /* 30 / 24 */
  --tif-fs-h4:      clamp(1.125rem, 1.0786rem + 0.19vw, 1.25rem);    /* 20 / 18 */
  --tif-fs-lead:    clamp(1.125rem, 1.0786rem + 0.19vw, 1.25rem);    /* 20 / 18 */
  --tif-fs-body:    clamp(1rem, 0.9768rem + 0.095vw, 1.0625rem);     /* 17 / 16 */
  --tif-fs-ui:      1rem;                                            /* 16 */
  --tif-fs-small:   0.875rem;                                        /* 14 */
  --tif-fs-eyebrow: 0.75rem;                                         /* 12 */
  --tif-fs-button:  clamp(1.125rem, 1.0786rem + 0.19vw, 1.25rem);    /* 20 / 18 (§10) */
  --tif-lh-lead: 1.5;
  --tif-lh-body: 1.6;
  --tif-lh-small: 1.5;
  --tif-font-display: "PP Fragment Glare", Georgia, serif;
  --tif-font-mono: "Apercu Mono", ui-monospace, monospace;
}

/* ---------- Base roles ---------- */
body.tif-ts { font-size: var(--tif-fs-body); }                       /* was Body 22: unstyled text is now Body */
body.tif-ts h2, body.tif-ts .h2, body.tif-ts .tif-h2 { font-size: var(--tif-fs-h2); }
/* One H3: Fragment 300 (was Saans 29.19 globally, competing with the Fragment 30 card titles) */
body.tif-ts h3, body.tif-ts .h3 { font-family: var(--tif-font-display); font-weight: 300; letter-spacing: -0.02em; font-size: var(--tif-fs-h3); line-height: 1.2; }
body.tif-ts h4, body.tif-ts .h4, body.tif-ts .tif-h4 { font-size: var(--tif-fs-h4); line-height: 1.3; }
body.tif-ts h5, body.tif-ts .h5, body.tif-ts .tif-h5 { font-size: var(--tif-fs-ui); }
body.tif-ts h6, body.tif-ts .h6, body.tif-ts .tif-h6,
body.tif-ts .tif-eyebrow { font-size: var(--tif-fs-eyebrow); }
/* .tif-font-sm (16) and .tif-font-xs (12) are already on-scale and are left alone: blocks override them (e.g. the 14px utility bar). */
:where(body.tif-ts) .tif-font-md { font-size: var(--tif-fs-lead); }
/* Lead: the intro paragraph under an H1 or H2. Homepage hero body keeps its own 22/16 (item 11). */
body.tif-ts .tif-lead:not(.tif-home-hero .tif-lead) { font-size: var(--tif-fs-lead); line-height: var(--tif-lh-lead); }

/* ---------- Buttons: ONE standard pill (§10): Saans 20 / 18, padding 14 x 32, ~55px tall ----------
   Homepage hero button keeps its large size (item 10). Header pill stays 16 (.tif-btn-echo in the header). */
body.tif-ts .tif-btn-alpha:not(.tif-home-hero .tif-btn-alpha),
body.tif-ts .tif-btn-bravo,
body.tif-ts .tif-btn-charlie,
body.tif-ts .tif-btn.tif-pcta-btn,
body.tif-ts .tif-site-footer .tif-btn-echo {
  font-size: var(--tif-fs-button); line-height: 1.25; padding: 14px 32px; border-radius: var(--tif-radius-pill, 100px);
}
body.tif-ts .tif-btn-alpha:not(.tif-home-hero .tif-btn-alpha):hover,
body.tif-ts .tif-btn-bravo:hover,
body.tif-ts .tif-btn.tif-pcta-btn:hover { margin-left: 0; padding-right: 56px; }
body.tif-ts .tif-btn-alpha:not(.tif-home-hero .tif-btn-alpha)::after,
body.tif-ts .tif-btn-bravo::after,
body.tif-ts .tif-btn.tif-pcta-btn::after { right: 26px; width: 14px; height: 14px; }
/* Contact form Send (form 2 polish sets 17px / 11x26 with !important) */
body.tif-ts #gform_wrapper_2 .gform_footer .gform_button.tif-btn.tif-pcta-btn { font-size: var(--tif-fs-button) !important; line-height: 1.25 !important; padding: 14px 32px !important; }
body.tif-ts #gform_wrapper_2 .gform_footer .gform_button.tif-btn.tif-pcta-btn:hover { padding-right: 56px !important; }
body.tif-ts #gform_wrapper_2 .gform_footer .gform_button.tif-btn.tif-pcta-btn::after { right: 26px; width: 14px; height: 14px; margin-top: -7px; }
/* Pricing toggle tabs stay toggles, on the Body size */
body.tif-ts .tif-pathway-cta__tab { font-size: var(--tif-fs-body); }

/* ---------- Header and footer ---------- */
body.tif-ts .tif-site-header__mega-heading { font-size: var(--tif-fs-h3); }
body.tif-ts .tif-site-header__mega-link-title,
body.tif-ts .tif-site-header .tif-site-header__mega-group-link-title { font-size: var(--tif-fs-h4); }
body.tif-ts .tif-site-header .tif-site-header__mobile-group-label { font-size: var(--tif-fs-eyebrow); }
body.tif-ts .tif-site-footer__heading,
body.tif-ts .tif-site-footer--full .tif-site-footer__toggle { font-size: var(--tif-fs-small); }
body.tif-ts .tif-site-footer--full .tif-site-footer__group { font-size: var(--tif-fs-eyebrow); }
body.tif-ts .tif-site-footer--full .tif-site-footer__links a,
body.tif-ts .tif-site-footer--full .tif-site-footer__all,
body.tif-ts .tif-site-footer__paths a { font-size: var(--tif-fs-ui); }

/* ---------- Heroes ---------- */
/* Interior hero: paragraph 1 is Lead, the rest Body. Solutions: the subhead is the Lead, so every body paragraph is Body. */
body.tif-ts .tif-interior-hero__body { font-size: var(--tif-fs-body); line-height: var(--tif-lh-body); }
body.tif-ts .tif-interior-hero__body > p:first-child { font-size: var(--tif-fs-lead); line-height: var(--tif-lh-lead); }
body.tif-ts .tif-interior-hero__subheading + .tif-interior-hero__body > p:first-child { font-size: var(--tif-fs-body); line-height: var(--tif-lh-body); }
body.tif-ts .tif-interior-hero__subheading.tif-h3 { font-size: var(--tif-fs-lead); line-height: var(--tif-lh-lead); }
body.tif-ts .tif-interior-hero__pill,
body.tif-ts .tif-interior-hero__caption { font-size: var(--tif-fs-small); }

/* ---------- Closing CTAs ---------- */
body.tif-ts .tif-commercial-cta__eyebrow { font-size: var(--tif-fs-eyebrow); }
body.tif-ts .tif-commercial-cta__title { font-size: var(--tif-fs-display); line-height: 1.05; letter-spacing: -0.03em; }
body.tif-ts .tif-commercial-cta__body { font-size: var(--tif-fs-lead); line-height: var(--tif-lh-lead); }
body.tif-ts .tif-commercial-cta__left-copy { font-size: var(--tif-fs-body); }
body.tif-ts .tif-commercial-cta__disclaimer { font-size: var(--tif-fs-small); }
body.tif-ts .tif-endcta .tif-endcta__line { font-size: var(--tif-fs-lead); }

/* ---------- Block bodies ---------- */
body.tif-ts .tif-card-grid__card h3, body.tif-ts .tif-card-grid__card .h3,
body.tif-ts .tif-card-grid--rows .tif-card-grid__card h3 { font-size: var(--tif-fs-h3); }
body.tif-ts .tif-card-grid__body,
body.tif-ts .tif-card-grid__subheading,
body.tif-ts .tif-card-grid--pricing .tif-card-grid__body { font-size: var(--tif-fs-body); line-height: var(--tif-lh-body); }
body.tif-ts .tif-card-grid--pricing .tif-card-grid__subheading { font-size: var(--tif-fs-display); }
body.tif-ts .tif-content-section__body { font-size: var(--tif-fs-body); line-height: var(--tif-lh-body); }
body.tif-ts .tif-numbered-list__text { font-size: var(--tif-fs-body); line-height: var(--tif-lh-body); }
body.tif-ts .tif-wysiwyg__content p, body.tif-ts .tif-wysiwyg__content li { font-size: var(--tif-fs-body); }
body.tif-ts .tif-accordion__intro, body.tif-ts .tif-accordion__body { font-size: var(--tif-fs-body); line-height: var(--tif-lh-body); }
body.tif-ts .tif-accordion__item summary { font-size: var(--tif-fs-h4); }
body.tif-ts .tif-contact-form-note { font-size: var(--tif-fs-small); }

/* Feature section (industry, product, solution, pricing, how-we-work templates) */
body.tif-ts .tif-feature-section__intro { font-size: var(--tif-fs-lead); line-height: var(--tif-lh-lead); }
body.tif-ts .tif-feature-section__body,
body.tif-ts .tif-feature-section--pricing .tif-feature-section__body,
body.tif-ts .tif-feature-section--methodology .tif-feature-section__body { font-size: var(--tif-fs-body); line-height: var(--tif-lh-body); }
body.tif-ts .tif-feature-section--pricing-factors .tif-feature-section__intro { font-size: var(--tif-fs-lead); }
body.tif-ts .tif-feature-section__headline,
body.tif-ts .tif-feature-section--alternating .tif-feature-section__headline { font-size: var(--tif-fs-lead); line-height: var(--tif-lh-lead); }
body.tif-ts .tif-feature-section--cards .tif-feature-section__headline,
body.tif-ts .tif-feature-section--pricing .tif-feature-section__card h3,
body.tif-ts .tif-feature-section--pricing .tif-feature-section__card .h3 { font-family: "Saans", system-ui, -apple-system, sans-serif; font-weight: 700; letter-spacing: 0; font-size: var(--tif-fs-h4); line-height: 1.3; }
body.tif-ts .tif-feature-section--pricing .tif-feature-section__headline,
body.tif-ts #why-now .tif-feature-section__headline { font-size: var(--tif-fs-display); line-height: 1.05; }
body.tif-ts .tif-feature-section--cards .tif-feature-section__card h3,
body.tif-ts .tif-feature-section--alternating .tif-feature-section__copy h3,
body.tif-ts .tif-feature-section__step h3,
body.tif-ts .tif-feature-section--steps .tif-feature-section__step h3 { font-size: var(--tif-fs-h3); }
body.tif-ts .tif-feature-section__technical { font-size: var(--tif-fs-small); font-weight: 400; }
body.tif-ts .tif-feature-section__matrix-label { font-family: "Saans", system-ui, -apple-system, sans-serif; font-weight: 400; letter-spacing: 0; font-size: var(--tif-fs-h4); line-height: 1.3; } /* an h3 tag: stays Saans (H4 role) */
body.tif-ts .tif-feature-section__matrix-state p { font-size: var(--tif-fs-body); line-height: var(--tif-lh-body); }
body.tif-ts .tif-feature-section__matrix-kicker { font-family: var(--tif-font-mono); font-weight: 400; text-transform: uppercase; letter-spacing: .2em; font-size: var(--tif-fs-eyebrow); }
body.tif-ts .tif-feature-section__matrix-tech,
body.tif-ts .tif-feature-section__architecture-meta,
body.tif-ts .tif-feature-section__flow-step { font-size: var(--tif-fs-small); }
/* Nov 6 body floor (Jen): the closing paragraph under a section is running text, so it is Body (17/16), not Small. */
body.tif-ts .tif-feature-section__closing,
body.tif-ts .tif-feature-section__closing p,
body.tif-ts .tif-feature-section__closing strong { font-size: var(--tif-fs-body); line-height: var(--tif-lh-body); }
body.tif-ts .tif-feature-section__matrix-arrow,
body.tif-ts .tif-feature-section__flow-arrow { font-size: var(--tif-fs-lead); }
body.tif-ts .tif-feature-section__flow-detail > div { font-size: var(--tif-fs-body); line-height: var(--tif-lh-body); }

/* Homepage blocks (below the hero, items 10 and 11) */
body.tif-ts .tif-platform-field .tif-lead { font-size: var(--tif-fs-lead); line-height: var(--tif-lh-lead); }
body.tif-ts .tif-platform-field__item,
body.tif-ts .tif-platform-field--compact .tif-platform-field__item { font-size: var(--tif-fs-small); }
/* Nov 6 body floor (Jen): the clarification is a full sentence, so Body. */
body.tif-ts .tif-platform-field__clarification,
body.tif-ts .tif-platform-field--compact .tif-platform-field__clarification { font-size: var(--tif-fs-body); line-height: var(--tif-lh-body); }
body.tif-ts .tif-problem-cloud__trigger { font-size: var(--tif-fs-ui); }
body.tif-ts .tif-problem-cloud__popover p { font-size: var(--tif-fs-body); line-height: var(--tif-lh-body); }
body.tif-ts .tif-problem-cloud__popover-title { font-size: var(--tif-fs-h4); }
body.tif-ts .tif-process-timeline__stage p { font-size: var(--tif-fs-body); line-height: var(--tif-lh-body); }

/* /pricing/ pathway cards and steps */
body.tif-ts .tif-pathway-cta .tif-pathway-cta__eyebrow { font-size: var(--tif-fs-eyebrow); }
body.tif-ts .tif-pathway-cta__name { font-family: "Saans", system-ui, -apple-system, sans-serif; font-weight: 700; letter-spacing: 0; font-size: var(--tif-fs-h4); line-height: 1.3; } /* an h3 tag: stays Saans (H4 role) */
body.tif-ts .tif-pathway-cta__intro { font-size: var(--tif-fs-lead); line-height: var(--tif-lh-lead); }
body.tif-ts .tif-pathway-cta__fit,
body.tif-ts .tif-pathway-cta__body,
body.tif-ts .tif-pathway-cta__alt,
body.tif-ts .tif-pathway-cta__under,
body.tif-ts .tif-pathway-cta__note,
body.tif-ts .tif-pathway-cta__price-line,
body.tif-ts .tif-pathway-cta__includes li,
body.tif-ts .tif-pathway-cta__step-text { font-size: var(--tif-fs-body); }
body.tif-ts .tif-pathway-cta__price { font-size: var(--tif-fs-display); }
body.tif-ts .tif-pathway-cta__line-copy { font-size: var(--tif-fs-h3); }
body.tif-ts h2.tif-pathway-cta__line-copy { font-size: var(--tif-fs-h2); }
body.tif-ts .tif-pathway-cta__link { font-size: var(--tif-fs-ui); }
body.tif-ts .tif-pathway-cta__step-title { font-size: var(--tif-fs-h4); }

/* Gravity Forms (contact): labels UI 16, help and "(Required)" Small 14 */
body.tif-ts .gform-theme--framework .gform-field-label { font-size: var(--tif-fs-ui); }
body.tif-ts .gform-theme--framework .gform-field-label > .gfield_required,
body.tif-ts .gform-theme--framework .gfield_description { font-size: var(--tif-fs-small); }
body.tif-ts .gform_wrapper.gform_legacy_markup_wrapper .tif-gf-check-grid > .gfield_label { font-size: var(--tif-fs-h2); }
body.tif-ts .gform_wrapper.gform_legacy_markup_wrapper .gform_confirmation_message { font-size: var(--tif-fs-lead); }