/* ==========================================================================
   Type system — ONE set of sizes and fonts for every page.
   Loaded after the page stylesheets, so it wins over their own sizes.
   Roles:
     Display   page title (hero)            Poppins 700, italic part Montserrat 300
     Heading   section title / split title  Poppins 600
     Title     card / block heading         Poppins 600
     Title S   small card heading           Poppins 600
     Lead      intro text under a title     Montserrat 400
     Body      normal text                  Montserrat 400
     Quote     quotes                       Cormorant Garamond 500 italic
   Decorative giant words (About Us names, "things − noise = life.", ghost letters)
   are deliberately left out.
   ========================================================================== */
:root {
  --t-display: clamp(44px, 5.6vw, 80px);
  --t-heading: clamp(30px, 3.4vw, 48px);
  --t-title:   clamp(20px, 1.7vw, 24px);
  --t-title-s: 17px;
  --t-lead:    clamp(16px, 1.25vw, 18px);
  --t-body:    16px;
  --t-quote:   clamp(22px, 2.3vw, 32px);
}

/* ── Display: page titles ── */
body :is(.p-title, .blogs-hero-headline, .bq-quiz-title, .tb-quiz-title, .bk-hero-h1, .mt-h1,
         .yt-title, .legal-title, .nf-title, #contact-hero h1, .eb-h1 .l2),
body .p-title span {
  font-family: var(--font-display); font-weight: 700; font-size: var(--t-display);
  line-height: 1.06; letter-spacing: -.02em;
}
body :is(.p-title, .blogs-hero-headline, .bq-quiz-title, .tb-quiz-title, .bk-hero-h1, .mt-h1,
         .yt-title, .nf-title) em,
body .nf-title + em {
  font-family: var(--font-body); font-weight: 300; font-style: italic; font-size: 1em; letter-spacing: -.01em;
}
body .eb-h1 .l1 { font-size: calc(var(--t-display) * .64); }

/* ── Heading: section titles, and titles that sit beside an image or form ── */
body h2:not(.sr-only):not(.ty-sub):not(.ajay-n):not(.blog-card-title):not(.p-card-title):not(.nl-promo-title),
body :is(.h-title, .why-title, .nl-title, .founder-title, .why-q, .con-h, .sec-ttl, .cta-h, .lp-h2,
         .mt-sec-title, .mt-inquire-title, .yt-cta-heading, .tips-main-ttl, .rv-ttl, .rel-ttl, .wd-sec-title,
         .who-title, .philo-line, .cm-book-title, .dm-title, .bs-title, .pi-title, .am-h1, .cf-title, .cf-head h2) {
  font-family: var(--font-display); font-weight: 600; font-size: var(--t-heading);
  line-height: 1.12; letter-spacing: -.018em;
}
body .who-title { font-weight: 300; }                       /* "A small team of" light + bold words */
body .who-title strong, body .h-title strong { font-weight: 600; }
body .am-h1 { font-family: var(--font-body); font-weight: 400; }
body .am-h1 strong { font-family: var(--font-display); font-weight: 600; }
/* italic second line in headings: one style everywhere */
body :is(.h-title, .why-title, .nl-title, .founder-title, .why-q, .con-h, .sec-ttl, .cta-h, .lp-h2, .mt-sec-title,
         .mt-inquire-title, .yt-cta-heading, .rv-ttl, .rel-ttl, .wd-sec-title, .am-h1) em {
  font-family: var(--font-body); font-weight: 300; font-style: italic; letter-spacing: -.01em;
}

/* ── Title: cards and blocks ── */
body h3:not(.sr-only):not(.mt-collab-name):not(.spec-name),
body :is(.pil-title, .p-card-title, .mt-dim-name, .mt-collab-name, .spec-name, .mt-shift-title, .mt-step-title,
         .eb-summary-title, .ws-invite-title, .ty-title) {
  font-family: var(--font-display); font-weight: 600; font-size: var(--t-title);
  line-height: 1.25; letter-spacing: -.01em;
}
body .ty-title { font-size: var(--t-heading); }
body .tint-card h3 { font-size: var(--t-title); }
body .ci-value { font-family: var(--font-display); font-weight: 600; font-size: var(--t-title); line-height: 1.4; }
/* ── Title S: small cards in grids and lists ── */
body :is(.blog-card-title, .bk-title, .rel-info h3, .cm-pt-t, .dm-fw-name, .mt-cp-title, .tip-hdr strong, .yt-vtitle, .eb-review-title) {
  font-family: var(--font-display); font-weight: 600; font-size: var(--t-title-s); line-height: 1.35; letter-spacing: -.006em;
}

/* ── Lead: the intro paragraph under a page or section title ── */
body :is(.hero-body, .au-hero-slug, .fcf-lead, .mt-problem-lead, .p-sub, .bq-intro-copy, .tb-intro-copy, .cm-sub, .dm-sub,
         .bk-hero-sub, .yt-sub, .lp-p, .who-text, .cta-sub, .nl-text, .lead, .nf-text, .mt-inquire-body, .blogs-hero-sub) {
  font-family: var(--font-body); font-weight: 400; font-size: var(--t-lead); line-height: 1.7;
}

/* ── Body ── */
body :is(.tint-text, .p-card-text, .spec-desc, .line-p, .eq-v, .mt-step-body, .mt-dim-desc, .mt-collab-body, .mt-shift-body,
         .rv-text, .i-d, .nl-promo-desc, .pil-desc, .pi-desc, .cs-text, .tip-body p, .ty-msg, .wd-content-inner, .eb-body p,
         .bs-body, .legal-body, .ci-text, .ct, .fcf-body p, .why-text p, .founder-copy p, .eb-review p) {
  font-family: var(--font-body); font-weight: 400; font-size: var(--t-body); line-height: 1.75;
}
body .bs-body :is(h2, h3) { font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em; }
body .bs-body h2 { font-size: clamp(22px, 2vw, 28px); }
body .bs-body h3 { font-size: var(--t-title); }

/* ── Quote ── */
body :is(.hero-quote, .eb-authors-quote, .am-quote, .quote-txt, .why-a, .yt-quote-text, .cm-pull-quote, .dm-pull-quote, .founder-quote) {
  font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: var(--t-quote);
  line-height: 1.42; letter-spacing: 0;
}
body .founder-quote { font-size: clamp(20px, 1.8vw, 24px); }
body .hero-quote { font-size: clamp(28px, 2.9vw, 42px); line-height: 1.34; }   /* the home page's main statement */
body .eq-quote .am-quote, body .eb-review-quote .lp-serif { font-size: var(--t-quote); }

@media (max-width: 768px) {
  :root { --t-body: 15px; --t-title-s: 16px; }
}

/* page rules that use an id or two classes — matched here with the same weight so the system still applies */
body #how-grid h3, body .tint-card h3 { font-size: var(--t-title); line-height: 1.25; }
body .tint-card p.tint-text { font-size: var(--t-body); line-height: 1.75; }
body #contact-form-col h2 { font-size: var(--t-heading); line-height: 1.12; letter-spacing: -.018em; }
body #contact-form-col .lead { font-size: var(--t-lead); line-height: 1.7; }
body .am-quote-sec .am-quote { font-size: var(--t-quote); font-weight: 500; }