/* ==========================================================================
   Type — the Ziplyft page's two-family rule
   ==========================================================================
   Poppins for everything that is a title or a control: headings, subheads,
   buttons, the nav, the FAQ questions, the table's column heads and labels.
   Inter for everything that is read: every paragraph, list item, table cell,
   caption and value on the page.

   And every piece of body text is set the same way — one size, one leading,
   one tracking. Before this, running copy came in four sizes (--t-sm, the
   body size, --t-lead, and .first), which read as four different voices
   where the page only has one. Colour and weight still vary by context; the
   measurements do not.

   Loaded after sections.css and before motion.css. The body rule is scoped
   to #main so the footer keeps its own smaller reference scale.
   ========================================================================== */

:root {
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --t-copy: var(--t-body);   /* 17 → 19 */
  --lh-copy: 1.65;
  /* Inter is drawn for small sizes and runs slightly open at text sizes;
     a hundredth of an em pulls it back to the colour of Poppins beside it. */
  --ls-copy: -.01em;
}

body { font-family: var(--font-body); }

/* Titles and controls stay Poppins. */
h1, h2, h3, h4,
.btn, .nav a, .nav-toggle, .topbar a, .skip-link,
.faq summary, .compare thead th,
.vid-btn, .play, .ba__tag, .sticky-cta a,
.stepper__tab, .diagram__num, .d-pin text,
.profile__stats dd, .kicker {
  font-family: var(--font);
}

/* Body copy — one size, one leading, one tracking.
   The id in the selector is deliberate: component rules such as
   `.card p` and `.compare td` each set their own size, and this has to
   outrank all of them from one place rather than be restated in each. */
#main :is(p, li, dd, td, tbody th, figcaption) {
  font-size: var(--t-copy);
  line-height: var(--lh-copy);
  letter-spacing: var(--ls-copy);
}

/* The profile card's two figures are display type, not copy. */
#main .profile__stats dd {
  font-size: var(--t-h3);
  line-height: 1.1;
  letter-spacing: var(--ls-tight);
}

/* A subhead that only qualifies the title above it: set in the reading
   face, one step up from body copy, in the title's blue but at regular
   weight — so it reads
   as the question the section answers, not as a second headline. */
.head .subhead {
  font-family: var(--font-body);
  font-size: var(--t-lead);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: var(--ls-copy);
  color: var(--heading);
}

/* The video section's four facts: label and value at one size, halfway
   between the label's old 13–14px and the value's 17–19px — 16 → 16.5px,
   on the 16px floor. Weight and colour still tell them apart. */
#main .facts :is(dt, dd) {
  font-size: clamp(1rem, .15vw + .95rem, 1.03125rem);
  line-height: 1.5;
}

/* ==========================================================================
   Weights — three, by role, and nothing in between
   ==========================================================================
   Big titles:            Poppins 700
   Subtitles, small
   titles and controls:   Poppins 600
   Reading text:          Inter 400, and Inter 600 for what it highlights
   The selector lists carry an id (#main, or #_ which matches nothing) so
   they outrank every component rule that set its own weight. */

:is(#_, h1, h2) { font-weight: 700; }

:is(#_, h3, h4, .kicker, .faq summary, .compare thead th, .btn, .nav a,
    .nav-toggle, .topbar a, .sticky-cta a, .ba__tag, .vid-btn, .play,
    .stepper__num, .stages__num, .diagram__num, .profile__stats dd,
    .fit__lead) { font-weight: 600; }

#main :is(p, li, dt, dd, td, tbody th, figcaption, .subhead, .stepper__title):not(.profile__stats dd) {
  font-weight: 400;
}
/* What reading text highlights: the marker phrases, and the values the
   page sets apart in colour — Ziplyft's column, the facts' answers. */
#main :is(strong, b, .hl),
#main .compare tbody td:nth-of-type(1),
#main :is(.facts, .hero-facts) dd { font-weight: 600; }