/* ============================================================================
   iDharma — EDITORIAL TYPOGRAPHY SYSTEM (homepage)
   ============================================================================
   One authority for every piece of type on the homepage: eyebrow, title,
   subtitle, body, link/CTA, numeral. Seven rules, applied to every section,
   so the page reads as one document rather than as fourteen sections that
   each invented their own scale.

   THE REFERENCE is board-level editorial — FT Weekend, McKinsey Insights,
   Apple Newsroom, Stripe/Linear/OpenAI enterprise pages. Concretely that
   means: a serif display face at low weight and negative tracking, a clean
   grotesque for everything else, a strong step between levels, generous
   leading on body copy, and no decorative effects. It explicitly does NOT
   mean SaaS type: heavy bolds, oversized tracked caps, low-contrast greys.

   ---- WHY THIS FILE USES !important -----------------------------------------
   The homepage renders ~1,500 lines of type rules across three stylesheets and
   fifteen inline <style> blocks, and those inline blocks come AFTER every
   linked sheet in the document. Source order cannot win from a stylesheet, and
   scoping alone cannot beat the several dozen legacy rules that are already
   !important. So this layer declares its type properties !important and is
   loaded last of the linked sheets. It is an override layer by design — that
   is the whole job — and keeping it in one file means the page's typography
   can be tuned or reverted from one place.

   Nothing here sets colour on backgrounds, borders, spacing between sections,
   or layout. Type only.

   ---- ON THE GOLD -----------------------------------------------------------
   The brief specifies #A98533 for eyebrows and numerals. It is used verbatim on
   INK bands (5.0:1 — comfortably AA) and for the large numerals on any ground
   (large text needs 3:1; it measures 3.1:1 on paper).

   For 11px tracked caps on PAPER it is stepped one notch deeper to #8A6A2F —
   the ochre this codebase already carries as --idh-ochre. #A98533 measures
   3.11:1 on #F7F3EA and fails AA at that size; #8A6A2F measures 4.53:1 and is
   indistinguishable from it at 11px. On a site selling AI audit and assurance,
   a label that fails the contrast floor is the wrong thing to ship. Both are
   tokens below — swap --t-gold-light back to #A98533 to override this call.
   ============================================================================ */

body.home-page{
  /* ---- faces ---- */
  --t-serif: 'Fraunces', 'Georgia', 'Times New Roman', serif;
  --t-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
             Helvetica, Arial, sans-serif;

  /* ---- the gold ---- */
  --t-gold:        #A98533;  /* brief value — ink bands, and all numerals   */
  --t-gold-light:  #8A6A2F;  /* paper bands, 11px caps only — 4.53:1        */

  /* ---- ink ---- */
  --t-title-light: #101820;
  --t-title-dark:  #F7F3EA;
  --t-sub-light:   rgba(16,24,32,.78);
  --t-sub-dark:    rgba(255,255,255,.82);
  --t-body-light:  rgba(16,24,32,.72);
  --t-body-dark:   rgba(255,255,255,.72);

  /* ---- the scale ----
     Hero and section titles are the only two display steps on the page. Both
     are continuous clamps, so there are no breakpoint jumps to keep in sync. */
  --t-display: clamp(52px, 6vw, 74px);
  --t-h2:      clamp(34px, 4vw, 52px);
  --t-h3:      clamp(21px, 1.6vw, 25px);
  /* The subtitle clamp needs a CONSTANT in its middle term. A bare vw
     (1.05vw) resolves to 15.1px at a 1440px viewport, so the clamp floored at
     16px and the subtitle sat at the MOBILE size on every desktop. 13.6px +
     .48vw lands 20.5px at 1440, 18.5px at 1024 and 22px from ~1750 up, which
     is the brief's 18-22px desktop band. */
  --t-sub:     clamp(16px, 13.6px + .48vw, 22px);
  --t-copy:    16px;
  --t-eyebrow: 11px;
  --t-cta:     15px;

  /* Everything downstream that reads --d-sans (idh-2026.css primitives, the
     mission/vision partial, the section blocks) switches face from this one
     line rather than from a rule per component. */
  --d-sans: var(--t-sans);
  --mm-sans: var(--t-sans);
}

/* Inter's default figures are proportional and its default tracking is set for
   UI, not for prose. optical sizing on Fraunces is what keeps the display face
   from looking like the text face blown up. */
body.home-page .idh,
body.home-page .idh *{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.home-page .idh{
  font-family: var(--t-sans) !important;
  font-optical-sizing: auto;
}

/* ============================================================================
   1 · EYEBROW LABELS
   ----------------------------------------------------------------------------
   Small section identifiers. Understated: 11px, 600 (never 700/800), .28em
   tracking, muted gold, and a generous gap to the headline it introduces.
   The old page set these at 16–17.5px / weight 800 / 1.8px — that is a SaaS
   kicker, and at that size it competed with the headline instead of labelling
   it. Every eyebrow-shaped element on the page routes through this rule so
   there is exactly one of them.
   ========================================================================== */
body.home-page .idh-eyebrow,
body.home-page .idh-hero__eyebrow,
body.home-page .idh-domains__eyebrow,
body.home-page .idh-engs__eyebrow,
body.home-page .idh .idh-engs__eyebrow,
body.home-page .idh-proof__eyebrow,
body.home-page .idh-fcta__eyebrow,
body.home-page .idh .idh-dimband__eyebrow,
body.home-page .idh-dimband__eyebrow,
body.home-page .idh-domain-card__label,
body.home-page .idh-vision-kicker,
body.home-page .idh-lookup__label,
body.home-page .idh-expert__tag,
body.home-page .idh-expert-card__tag,
body.home-page .idh-prod__tag,
body.home-page .idha-rc__tag,
body.home-page .idh-artifact__toc-cap,
body.home-page .idh-engs__term,
body.home-page .idh-proof__term,
body.home-page .idh-hww__title,
body.home-page .idh-ptier__label,
body.home-page .idh .idh-dimband .idh-sched__name,
body.home-page .idh-scstep__badge small,
body.home-page .idh-tickitem{
  font-family: var(--t-sans) !important;
  font-size: var(--t-eyebrow) !important;
  font-weight: 600 !important;
  letter-spacing: .28em !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
  font-feature-settings: "kern" 1;
}

/* colour, by ground. Terms inside a list are ink, not gold — they are the
   item's name, not the section's label, and two golds in one block reads as
   decoration. */
body.home-page .idh-eyebrow,
body.home-page .idh-domains__eyebrow,
body.home-page .idh-engs__eyebrow,
body.home-page .idh .idh-engs__eyebrow,
body.home-page .idh-proof__eyebrow,
body.home-page .idh-fcta__eyebrow,
body.home-page .idh .idh-dimband__eyebrow,
body.home-page .idh-domain-card__label,
body.home-page .idh-vision-kicker,
body.home-page .idh-expert__tag,
body.home-page .idh-prod__tag,
body.home-page .idha-rc__tag,
body.home-page .idh-artifact__toc-cap{
  color: var(--t-gold-light) !important;
}
/* On INK the gold steps up to #A98533: the deeper --t-gold-light is only 2.6:1
   there and fails, where #A98533 measures 5.0:1. Same hue, opposite ground. */
body.home-page .idh-hero__eyebrow,
body.home-page .idh-secbg--ink .idh-eyebrow,
body.home-page .idh-secbg--ink .idh-fcta__eyebrow,
body.home-page .idh-secbg--dark .idh-eyebrow,
body.home-page .idh-expert-card__tag{
  color: var(--t-gold) !important;
}
body.home-page .idh-engs__term,
body.home-page .idh-proof__term,
body.home-page .idh-lookup__label,
body.home-page .idh-ptier__label,
body.home-page .idh .idh-dimband .idh-sched__name{
  color: var(--t-title-light) !important;
}

/* generous spacing below — the brief's one layout instruction for this level */
body.home-page .idh-eyebrow,
body.home-page .idh-hero__eyebrow,
body.home-page .idh-domains__eyebrow,
body.home-page .idh-proof__eyebrow,
body.home-page .idh-fcta__eyebrow,
body.home-page .idh .idh-dimband__eyebrow,
body.home-page .idh-vision-kicker,
body.home-page .idh-expert__tag,
body.home-page .idh-prod__tag{
  margin-bottom: 18px !important;
}
/* the engagement-terms eyebrow is an outlined capsule, so its own padding
   already supplies the optical gap; it only needs the block below it */
body.home-page .idh .idh-engs__eyebrow{
  padding: 8px 16px !important;
  margin-bottom: 24px !important;
}

/* the running ticker is tracked caps but it is a moving strip, not a label —
   it keeps uppercase and the system tracking, at its own smaller size */
body.home-page .idh-tickitem{
  font-size: 10.5px !important;
  letter-spacing: .24em !important;
}

/* ============================================================================
   2 · MAIN TITLES  (hero H1 + every section H2)
   ----------------------------------------------------------------------------
   Fraunces at 450 — the brief's 400–500 band. Low weight is the whole point:
   at 600–700 a serif this large stops being editorial and starts being a
   poster. Tracking is -.02em and leading 1.05–1.15, tightening as size grows.
   ========================================================================== */
body.home-page .idh-hero h1,
body.home-page .idh-h2,
body.home-page .idh-snapshot__head h2,
body.home-page .idh-domains__head h2,
body.home-page .idh-engs__title,
body.home-page .idh .idh-engs__title,
body.home-page .idh-proof__title,
body.home-page .idh .idh-dimband__title,
body.home-page .idh-dimband__title,
body.home-page .idh-fcta h2,
body.home-page .idh-expert h2,
body.home-page .idh-whyd__main .idh-h2,
body.home-page .idh-vision-quote,
body.home-page .idh-qa__btn{
  font-family: var(--t-serif) !important;
  font-optical-sizing: auto;
  font-weight: 450 !important;
  letter-spacing: -.02em !important;
  text-wrap: balance;
}

/* -- hero: the one display step on the page -- */
body.home-page .idh-hero h1{
  font-size: var(--t-display) !important;
  line-height: 1.05 !important;
  /* 13ch held a 90px headline to three lines. At the brief's 74px ceiling the
     same measure sets four short lines, so the cap opens to the brief's
     "10–12 words per line" reading and lets it break naturally. */
  max-width: 17ch !important;
  margin: 0 0 28px !important;
}
/* the accent word carries emphasis through the italic alone */
body.home-page .idh-hero h1 .hl{ font-style: italic !important; }

/* -- section titles -- */
body.home-page .idh-h2,
body.home-page .idh-snapshot__head h2,
body.home-page .idh-domains__head h2,
body.home-page .idh-engs__title,
body.home-page .idh .idh-engs__title,
body.home-page .idh-proof__title,
body.home-page .idh .idh-dimband__title,
body.home-page .idh-fcta h2,
body.home-page .idh-expert h2{
  font-size: var(--t-h2) !important;
  line-height: 1.1 !important;
  color: var(--t-title-light) !important;
  /* BLOCK margin only, NOT the `margin: 0 0 18px` shorthand this used to be.
     The shorthand also wrote margin-left/right:0, and it did so with
     !important, which silently beat the `margin-inline:auto` that centres the
     one section heading carrying a max-width — .idh-snapshot__head h2 at 22ch.
     That heading has a measure, so with auto margins gone it stopped being
     centred and sat flush left under a centred eyebrow and a centred lead.
     A type layer has no business setting inline margins; it sets rhythm. */
  margin-top: 0 !important;
  margin-bottom: 18px !important;
}
/* `.c` means centred, so a centred heading is centred as a BLOCK as well as in
   its text. Only matters where the heading also has a measure — without one the
   block already fills the column and text-align does the work on its own. */
body.home-page .idh-h2.c{ margin-inline: auto !important; }
/* the accordion questions are headings that happen to be buttons — they sit one
   step under a section title so the section still leads the block */
body.home-page .idh-qa__btn{
  font-size: clamp(24px, 2.2vw, 34px) !important;
  line-height: 1.16 !important;
}

/* titles on dark ground. The closing CTA's heading is a bare <h2>, not .idh-h2,
   so it has to be named separately — it is the one section title on the page whose
   ground can change without its class changing. */
body.home-page .idh-secbg--ink .idh-fcta h2,
body.home-page .idh-secbg--ink .idh-h2,
body.home-page .idh-secbg--dark .idh-h2,
body.home-page .idh-expert-card__name{
  color: var(--t-title-dark) !important;
}

/* the italic accent inside a section title stays gold, never a second weight */
body.home-page .idh-h2 .hl,
body.home-page .idh-engs__title em,
body.home-page .idh-proof__title em,
body.home-page .idh .idh-dimband__title .hl,
body.home-page .idh-qa__btn em{
  
  font-weight: inherit !important;
  color: var(--t-gold-light) !important;
}
body.home-page .idh-secbg--ink .idh-h2 .hl,
body.home-page .idh-secbg--dark .idh-h2 .hl{ color: var(--t-gold) !important; }

/* The 40px rule under centred headings is kept but thinned to a hairline: at
   2px solid crimson it read as a UI divider under an editorial headline. */
body.home-page .idh-h2.c::after{
  width: 34px !important; height: 1px !important;
  margin-top: 20px !important;
  background: var(--t-gold-light) !important;
}

/* -- card / sub-section headings (H3) --
   Serif as well, so the hierarchy is serif-display / serif-object / sans-text
   rather than two sans levels fighting for the same job. */
body.home-page .idh-step h3,
body.home-page .idh-scstep__title,
body.home-page .idh-domain-card__title,
body.home-page .idh-prod__card h3,
body.home-page .idh-empty h3,
body.home-page .idh-join-inner h3,
body.home-page .idha-rc__title,
body.home-page .idh-expert-card__name,
body.home-page .idh .idh-dimband .idh-sched__q,
body.home-page .idh-vision-stat__txt b{
  font-family: var(--t-serif) !important;
  font-optical-sizing: auto;
  font-size: var(--t-h3) !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  letter-spacing: -.015em !important;
}

/* ============================================================================
   3 · SUBTITLE
   ----------------------------------------------------------------------------
   The one supporting statement under a title. Inter 500 — heavier than body
   copy, lighter than a heading — 1.5 leading, slight negative tracking, and a
   measure short enough to hold it to one or two lines.
   ========================================================================== */
body.home-page .idh-hero__sub,
body.home-page .idh-lead,
body.home-page .idh-snapshot__head .idh-lead,
body.home-page .idh-engs__lead,
body.home-page .idh .idh-engs__lead,
body.home-page .idh-proof__stand,
body.home-page .idh .idh-dimband__stand,
body.home-page .idh-fcta__lead,
body.home-page .idh-whyd__intro,
body.home-page .idh-artifact__copy .idh-lead,
body.home-page .idh-vision-lead,
body.home-page .idh-expert p{
  font-family: var(--t-sans) !important;
  font-size: var(--t-sub) !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  letter-spacing: -.01em !important;
  color: var(--t-sub-light) !important;
}

body.home-page .idh-hero__sub,
body.home-page .idh-secbg--ink .idh-lead,
body.home-page .idh-secbg--ink .idh-fcta__lead,
body.home-page .idh-secbg--dark .idh-lead{
  color: var(--t-sub-dark) !important;
}

/* measure. 56–60ch is the brief's "1–2 lines" at this size; the hero's is
   tighter because it sets against a 74px headline. */
body.home-page .idh-hero__sub{ max-width: 48ch !important; margin: 0 0 36px !important; }
body.home-page .idh-lead{ max-width: 60ch; }
body.home-page .idh-lead.c{ max-width: 58ch !important; margin-inline: auto !important; }

/* Three leads were pinned to one nowrap line on wide screens. A subtitle that
   cannot wrap is a subtitle that dictates the page width — released back to
   normal wrapping with a measure, which is what the balance algorithm needs. */
body.home-page .idh-snapshot__head .idh-lead{
  white-space: normal !important;
  width: auto !important;
  max-width: 58ch !important;
  margin-inline: auto !important;
  text-wrap: balance;
}

/* ============================================================================
   4 · DESCRIPTION / BODY COPY
   ----------------------------------------------------------------------------
   Inter 400 at 16px on 1.8 leading. The leading is the single biggest change
   here: the page ran 1.5–1.62, which is a UI rhythm. 1.8 is a reading rhythm,
   and it is most of what separates an editorial page from a product page.
   Measure is capped at ~68ch — the brief's 60–70 characters.
   ========================================================================== */
body.home-page .idh-step p,
body.home-page .idh-scstep__desc,
body.home-page .idh-domain-card__body,
body.home-page .idh-artifact__note,
body.home-page .idh-engs__body,
body.home-page .idh .idh-engs__body,
body.home-page .idh-proof__body p,
body.home-page .idh-proof__disc,
body.home-page .idh-prod__card p,
body.home-page .idh-prod__list li,
body.home-page .idh-empty p,
body.home-page .idh-join-inner p,
body.home-page .idh-qa__a p,
body.home-page .idh-expert-card__bio,
body.home-page .idh-expert__list li,
body.home-page .idh-hww__list li,
body.home-page .idh-whyd__item p,
body.home-page .idh-artifact__toc-list li,
body.home-page .idh-ptier__desc,
body.home-page .idh-ptiers__note,
body.home-page .idh .idh-dimband .idh-sched__desc,
body.home-page .idh-vision-strip span,
body.home-page .idh-vision-stat__txt span,
body.home-page .idh-vision-note span,
body.home-page .idh-mm__item p{
  font-family: var(--t-sans) !important;
  font-size: var(--t-copy) !important;
  font-weight: 400 !important;
  line-height: 1.8 !important;
  letter-spacing: 0 !important;
  color: var(--t-body-light) !important;
}

/* body copy on dark ground */
body.home-page .idh-secbg--ink .idh-qa__a p,
body.home-page .idh-expert-card__bio,
body.home-page .idh-hiw__finding__body{
  color: var(--t-body-dark) !important;
}

/* comfortable measure wherever the container does not already impose one */
body.home-page .idh-step p,
body.home-page .idh-engs__body,
body.home-page .idh-prod__card p,
body.home-page .idh-qa__a p{
  max-width: 68ch !important;
}
/* paragraph spacing rather than manual breaks */
/* THE ANSWER COPY READS ONE STEP LARGER, on request: 20px against the page's
   16px body. It is the only prose on the homepage that is read on its own -
   the accordion shows one answer at a time in a card of its own - so it is
   closer to a standfirst than to body copy, and 16px in a wide card looked
   small for it. Stated here rather than in the page block because this sheet
   pins .idh-qa__a p with !important and a page-level size could not win. */
body.home-page .idh-qa__a p{ font-size:20px !important; line-height:1.7 !important; }
body.home-page .idh-qa__a p + p,
body.home-page .idh-prod__card p + p,
body.home-page .idh-proof__body p + p{ margin-top: 1.1em !important; }

/* ============================================================================
   5 · LINKS & CTAs
   ----------------------------------------------------------------------------
   Inter 600 at 14–15px, .02em, sentence case. Buttons are NOT set in caps —
   an all-caps button is the single loudest SaaS tell on a page like this.
   ========================================================================== */
body.home-page .idh-btn,
body.home-page .idh-hero__cta .idh-btn,
body.home-page .idh-snapshot__cta .idh-btn,
body.home-page .idh-ptiers__cta .idh-btn,
body.home-page .idh-fcta__actions .idh-btn,
body.home-page .idh-proof__btn,
body.home-page .idh-join-btn,
body.home-page .idh-domain-card__link,
body.home-page .idh-whyd__link,
body.home-page .idh-artifact__links a,
body.home-page .idha-rc__btn,
body.home-page .idh-fcta__go,
body.home-page .idh-seemore .idh-btn{
  font-family: var(--t-sans) !important;
  font-size: var(--t-cta) !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
  text-transform: none !important;
}
/* The closing CTA's brief field. The input is the one place on the page a visitor
   TYPES, so it sits at body weight and body size rather than at label weight — a
   600 input reads as a filled value before anything has been entered. */
body.home-page .idh-fcta__field input{
  font-family: var(--t-sans) !important;
  font-size: var(--t-copy) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}
body.home-page .idh-fcta__micro{
  font-family: var(--t-sans) !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  letter-spacing: 0 !important;
}
/* the two hero buttons carry the page's primary action, so they sit at the top
   of the CTA range rather than the bottom */
body.home-page .idh-hero__cta .idh-btn{
  font-size: 15.5px !important;
  font-weight: 600 !important;
}

/* inline links in prose — underline offset from the baseline, hairline gold,
   so a link reads as a link without becoming a second colour in the paragraph */
body.home-page .idh-proof__stand a,
body.home-page .idh-qa__a p a,
body.home-page .idh-artifact__note a{
  color: var(--t-title-light) !important;
  font-weight: 500 !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(138,106,47,.5) !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 3px !important;
}
body.home-page .idh-proof__stand a:hover,
body.home-page .idh-qa__a p a:hover,
body.home-page .idh-artifact__note a:hover{
  text-decoration-color: var(--t-gold-light) !important;
}

/* the claim chips and pill rows are labels, not buttons — sentence case, and
   the weight comes down off 700 */
body.home-page .idh-claim,
body.home-page .idh-fcta__trust-item,
body.home-page .idh-proof__chiplabel{
  font-family: var(--t-sans) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
}

/* ============================================================================
   6 · NUMBERS
   ----------------------------------------------------------------------------
   Inter 700, 28–40px by context, gold. Tabular figures so a column of numerals
   sits on one axis — the difference between a set of figures and a set of
   words that happen to be digits.
   ========================================================================== */
body.home-page .idh-engs__n,
body.home-page .idh .idh-engs__n,
body.home-page .idh-proof__n,
body.home-page .idh-step__n,
body.home-page .idh-scstep__badge b,
body.home-page .idh-vision-stat__num,
body.home-page .idh .idh-dimband .idh-sched__num{
  font-family: var(--t-sans) !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: "tnum" 1 !important;
  letter-spacing: -.01em !important;
  line-height: 1 !important;
  color: var(--t-gold) !important;
}

/* by context: the section-index numerals carry the most scale, the badge
   numerals the least (they sit inside a 61px ring). */
body.home-page .idh-engs__n,
body.home-page .idh .idh-engs__n{ font-size: 40px !important; }
/* SPLIT OUT OF THE 40px GROUP ABOVE, AND THIS WAS A BUG, not a preference.
   .idh-vision-stat lays its three rows on a fixed figure track - --vs-fig - and
   the partial sized that track by measuring its widest figure, "$5,000", at the
   clamp(...,2.3rem) = 36.8px FRAUNCES the partial itself declares. This file
   then overrides the same element to 40px LATO at weight 700. Bigger face,
   wider digits, and the track never heard about either: "$5,000" ran past its
   own column and printed on top of "Fixed fee".

   32px is the fix and the brief in one - "$5,000" measures ~96px here against a
   104px track, so it fits with room, and the figures stop out-shouting the
   headline they support, which is the same argument the partial's own comment
   makes about having brought them down from 3.55rem.

   .idh-engs__n keeps 40px. It shares nothing with this but a group. */
body.home-page .idh-vision-stat__num{ font-size: 32px !important; }
body.home-page .idh-proof__n{ font-size: 34px !important; }
/* the five-dimension register is 5 columns wide — its reference numerals take the
   bottom of the range so they stay reference marks rather than statistics, and
   their tracking resets from the .14em they carried as a tracked label */
body.home-page .idh .idh-dimband .idh-sched__num{
  font-size: 28px !important;
  letter-spacing: -.01em !important;
  margin-bottom: 12px !important;
}
body.home-page .idh-step__n{ font-size: 28px !important; }
body.home-page .idh-scstep__badge b{ font-size: 22px !important; }

/* the step badge is a filled ink disc, so its numeral reverses out */
body.home-page .idh-step__n{ color: var(--t-title-dark) !important; }

/* ============================================================================
   7 · THE TWO PARTIALS, AND THE WEIGHT-800 HOLDOUTS
   ----------------------------------------------------------------------------
   Sections 1-6 catch the page's own markup. Two blocks needed their own pass,
   and a browser audit of every leaf text node on the rendered page found a
   third group.

   a) THE PARTIALS. partials/mission-vision.blade.php declares --mm-sans:'Lato'
      on .idh-mm itself, and a custom property set on a descendant beats one set
      on <body> for everything inside it — so redefining --d-sans/--mm-sans at
      the top of this file never reached that column. It is re-set here at the
      same element, with !important.

   b) THE HOLDOUTS. Roughly twenty small labels, chips and link texts were still
      at font-weight 700-800. The brief puts eyebrows and CTAs at 600 and body
      at 400, and 800 on an 11px tracked cap is precisely the "heavy bold" the
      system exists to remove. They are all pulled down to 600.
   ========================================================================== */

/* (a) the partials' own sans token */
body.home-page .idh-mm,
body.home-page .idh-vision,
body.home-page .idh-wia__band{
  --mm-sans: var(--t-sans) !important;
  --d-sans:  var(--t-sans) !important;
}
/* the rules inside those blocks that name 'Lato' as a literal rather than
   through the token, so the token swap above cannot reach them */
body.home-page .idh-mm__item h3,
body.home-page .idh-mm__body,
body.home-page .idh-mm__dims li,
body.home-page .idh-mm__turn p,
body.home-page .idh-vision-strip b,
body.home-page .idh-vision-strip span,
body.home-page .idh-vision-stat__num small,
body.home-page .idh-vision-stat__num i,
body.home-page .idh-vision-stat__txt b,
body.home-page .idh-vision-stat__txt span,
body.home-page .idh-vision-note b,
body.home-page .idh-vision-note span,
body.home-page .idh-vision-li,
body.home-page .idh-vision-li__mark,
body.home-page .idh-vision-creds li,
body.home-page .idh-vision-by b,
body.home-page .idh-wia__body p,
body.home-page .idh-whyd__item h3{
  font-family: var(--t-sans) !important;
}

/* the eyebrow-shaped labels inside both partials, and the last three on the
   page proper — same 11px / 600 / .28em as every other eyebrow */
body.home-page .idh-mm__strip-label,
body.home-page .idh-mm__card-sub,
body.home-page .idh-mm__sample,
body.home-page .idh-wia__eyebrow,
body.home-page .idh-wia__plate-ref,
body.home-page .idh-wia__plate-of,
body.home-page .idh-wia__cta-txt,
body.home-page .idh-engs__cap-ref,
body.home-page .idh .idh-dimband__marks-label,
body.home-page .idh-hiw__finding__label,
body.home-page .idh-mm__card-hd b,
body.home-page .idh-ptier__rec{
  font-family: var(--t-sans) !important;
  font-size: var(--t-eyebrow) !important;
  font-weight: 600 !important;
  letter-spacing: .28em !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
}

/* the two partials' display type joins the title and card-heading levels */
body.home-page .idh-wia__title{
  font-family: var(--t-serif) !important;
  font-size: var(--t-h2) !important;
  font-weight: 450 !important;
  line-height: 1.1 !important;
  letter-spacing: -.02em !important;
}
body.home-page .idh-mm__item h3,
body.home-page .idh-whyd__item h3,
body.home-page .idh-vision-strip b,
body.home-page .idh-vision-note b{
  font-family: var(--t-serif) !important;
  font-optical-sizing: auto;
  font-size: var(--t-h3) !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  letter-spacing: -.015em !important;
}
body.home-page .idh-mm__body,
body.home-page .idh-wia__body p{
  font-size: var(--t-sub) !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  letter-spacing: -.01em !important;
  color: var(--t-sub-light) !important;
}
body.home-page .idh-mm__item p,
body.home-page .idh-mm__dims li,
body.home-page .idh-vision-creds li{
  font-size: var(--t-copy) !important;
  font-weight: 400 !important;
  line-height: 1.8 !important;
  color: var(--t-body-light) !important;
}

/* (b) nothing small stays at 700 or 800. Listed explicitly rather than as a
   blanket [class] rule so the two places that legitimately want 700 — the
   numerals in section 6, and the serif display weights — are untouched. */
body.home-page .hf-chip,
body.home-page .idh-chiprow__chip,
body.home-page .idh-bsearch__go,
body.home-page .idh-bsearch__pills,
body.home-page .idh-ptier__go,
body.home-page .idh-vision-li,
body.home-page .idh-vision-li__mark,
body.home-page .idh-proof__chiplabel,
body.home-page .idh-fcta__talk b,
body.home-page .idh-fcta__ask a,
body.home-page .idh-domain-card__link,
body.home-page .idh-whyd__link,
body.home-page .idh-artifact__links a,
body.home-page .idh-hiw__finding__body strong,
body.home-page .idh-vision-by b,
body.home-page .idh-vision-strip span,
body.home-page .idh-vision-stat__txt span,
body.home-page .idh-vision-note span{
  font-family: var(--t-sans) !important;
  font-weight: 600 !important;
}
/* The last nine, found by walking every leaf text node in the rendered page and
   listing anything at weight >= 700 below 24px. One of them — .idha-rc__overall
   strong — was at font-weight:900, and Inter is only loaded at 400/500/600/700,
   so the browser was SYNTHESISING that weight by smearing the 700 outlines.
   Faux-bold on a display-adjacent word is the cheapest-looking thing a page can
   do, and it is invisible in review because it still "looks bold". */
body.home-page .idha-rc__overall span,
body.home-page .idha-rc__overall strong,
body.home-page .idh-artifact__note b,
body.home-page .idh-ptiers__note strong,
body.home-page .idh-mm__strip-items li,
body.home-page .idh-mm__card-hd b,
body.home-page .idh-mm__donut-val span,
body.home-page .idh-mm__badge i,
body.home-page .idh-fcta__talk-line a,
body.home-page .idh-fcta__ghost span{
  font-family: var(--t-sans) !important;
  font-weight: 600 !important;
}

/* THE FRAMEWORK CHIPS GET THEIR OWN SIZE, and it is the only place on this page
   a size is set by the container rather than by the role.

   They used to run the full width of the mission panel's top row, where they
   inherited the body size and had ~1300px to lay out in. They are inside the
   panel's fourth cell now, beside a 52px icon disc, which at the 4-up breakpoint
   leaves them about 188px. At the inherited size the six names wrapped four
   times, one and two to a row, and the cluster read as ragged rather than as a
   set.

   11.5px is measured against that 188px, not picked: it lands EU AI Act +
   ISO/IEC 42001 on the first row, NIST AI RMF + SOC 2 on the second, HIPAA +
   India DPDP on the third, each with ~8px to spare. Three even rows of two.
   Below --t-eyebrow's 11px would be too small to set at, and the chips are
   sentence case against the eyebrow's uppercase, so they still read as the
   larger of the two.

   It stays above the 640px step's floor because by then the cells are one-up and
   the chips have the full panel width again - there is nothing to solve there. */
body.home-page .idh-mm__strip-items li{
  font-size: 11.5px !important;
  letter-spacing: .01em !important;
}

/* the ones that are prose, not labels, come all the way down to 400 */
body.home-page .idh-vision-strip span,
body.home-page .idh-vision-stat__txt span,
body.home-page .idh-vision-note span{
  font-weight: 400 !important;
  line-height: 1.8 !important;
  color: var(--t-body-light) !important;
}

/* (c) THE MISSION HALF IS A DARK STAGE. partials/mission-vision.blade.php was
   rebuilt onto a near-black ground, but its copy is named in the light-ground
   groups above and those set colour with !important — so without this the
   headline's paragraph and the card's checklist rendered near-black on
   near-black. The dark values are restated here, last, rather than pulled out
   of the light groups: those groups read as one list of "body copy on paper",
   and this is the single band that is not.

   Only the MISSION half. The vision half below the rule is still on white, so
   .idh-vision-* deliberately stays in the light groups. */
body.home-page .idh-mm__body{ color: var(--t-sub-dark) !important; }
body.home-page .idh-mm__item p,
body.home-page .idh-mm__dims li,
body.home-page .idh-mm__item--turn p{ color: var(--t-body-dark) !important; }

/* ============================================================================
   8 · RESPONSIVE
   ----------------------------------------------------------------------------
   Only three values step at a breakpoint; everything else is a clamp and
   scales continuously. Stepping a clamp at a breakpoint is what produced the
   old page's headline that was larger on a tablet than on a laptop.
   ========================================================================== */
@media (max-width: 900px){
  body.home-page{ --t-sub: 17px; }
}
@media (max-width: 640px){
  body.home-page{
    --t-eyebrow: 10px;
    --t-sub: 16px;
    --t-copy: 15px;
  }
  body.home-page .idh-hero h1{ max-width: none !important; }
  body.home-page .idh-qa__btn{ font-size: 22px !important; }
  body.home-page .idh-engs__n,
  body.home-page .idh .idh-engs__n{ font-size: 32px !important; }
  /* same split as the desktop rule - one step down from its own 32px, not
     level with .idh-engs__n's */
  body.home-page .idh-vision-stat__num{ font-size: 27px !important; }
  body.home-page .idh-proof__n,
  body.home-page .idh .idh-dimband .idh-sched__num{ font-size: 28px !important; }
}

/* ============================================================================
   9 · NO ITALICS, ANYWHERE
   ----------------------------------------------------------------------------
   ON INSTRUCTION. This page's accent device was an ITALIC SERIF WORD inside an
   upright serif headline — "every audit", "promises", "holds up", "stand
   behind", "proof" / "advantage". It was set in three different ways depending
   on which section built it (a .hl span, a bare <em>, a per-component rule), so
   there is no single declaration to delete; this switches all of them off at
   once and any future one with them.

   WHAT REPLACES IT. Nothing is added: those words were ALREADY carrying the
   ochre --idh-ochre alongside the italic, so the accent survives as colour
   after the slant is removed. The one thing that changes is that the accent is
   now doing its work with a single signal instead of two.

   THE SWEEP IS ELEMENT-WIDE, NOT CLASS-BY-CLASS, on purpose. `font-style` is
   inherited, so a blanket normal on the container would already cover most of
   it — but <em>, <i>, <cite>, <address>, <var> and <dfn> carry an italic from
   the UA sheet that inheritance cannot reach, and .hl / component rules declare
   it explicitly. The universal selector plus the named elements is what covers
   both routes.

   FONT AWESOME IS EXEMPT, and it has to be. FA renders its glyphs from <i>
   elements, and while the mark itself is a ::before glyph, resetting font-style
   on the <i> is harmless — but resetting font-FAMILY would erase the icon. This
   rule only touches font-style, so nothing here can reach the icon font. The
   .fa* exclusions are belt and braces.

   SCOPE. The homepage plus the header and footer that render around it, which
   is what the instruction named. It does not reach other pages' own sections.
   ========================================================================== */
body.home-page *,
body.home-page *::before,
body.home-page *::after,
body.home-page em,
body.home-page i:not([class*="fa-"]):not([class*="ti-"]),
body.home-page cite,
body.home-page var,
body.home-page dfn,
body.home-page address,
.header.header-three *,
.header.header-three em,
.header.header-three i:not([class*="fa-"]):not([class*="ti-"]),
.footer.footer-five *,
.footer.footer-five em,
.footer.footer-five i:not([class*="fa-"]):not([class*="ti-"]){
  font-style: normal !important;
}