/* ==========================================================================
   V6 SYSTEM LAYER
   ==========================================================================
   Loaded last on every V6 route. This file exists because a deployed-site
   audit found the same design decisions being made three different ways
   depending on which stylesheet family a route happened to load:

     .home + home.css        index, platform, the five capability pages,
                             pricing, proof, resources
     marketing.css           about, solutions, contact
     capability.css          layered on top of four of the above

   Each family had grown its own type ramp, its own container width and its
   own prose measure. Measured at 1440px across all thirteen routes, that
   produced four h1 sizes, five section-heading sizes, eight h3 sizes, three
   lead sizes, five body line-heights and two content grids. On the six
   routes that use .display for a feature heading it also produced a
   hierarchy inversion: the h2 rendered at 62.4px above an h1 at 54.4px.

   The fix is one scale, expressed once, applied to every class each family
   already uses. No markup changes and no new class names: the existing
   classes are mapped onto shared values.

   SPECIFICITY. Every rule here is written at element+class depth under a
   body-class qualifier (0-2-2 or higher). That is deliberate. The rules it
   supersedes sit at 0-2-0 and 0-2-1 in home.css, mobile.css, proof.css and
   tower.css, and several of those live inside media queries, which add no
   specificity. Loading last is not sufficient on its own when the incumbent
   rule is more specific, which is exactly the defect this pass is
   correcting elsewhere. So the selectors are explicit rather than :where().
   ========================================================================== */

:root {
  /* One ramp. Each step is roughly 1.2x the one below it, and the clamp
     minimums are chosen so a 390px screen gets a usable ramp without a
     separate mobile table. Values in the comments are the 1440px result. */
  --v6-h1:      clamp(1.85rem, 4.4vw, 3.5rem);    /* 56px  */
  --v6-display: clamp(1.6rem,  3.6vw, 2.875rem);  /* 46px  */
  --v6-h2:      clamp(1.45rem, 3vw,   2.375rem);  /* 38px  */
  --v6-h3:      clamp(1.1rem,  1.5vw, 1.5rem);    /* 24px  */
  --v6-lead:    clamp(1.0625rem, 1.45vw, 1.1875rem); /* 19px */
  --v6-body:    1.0625rem;                        /* 17px  */

  /* The two small sizes are unchanged from the previous wave. They are
     repeated here so the whole ramp is legible in one place. */
  --v6-note:    0.85rem;                          /* 13.6px: prose the reader must read */
  --v6-label:   0.72rem;                          /* 11.5px: tracked uppercase micro-labels */

  --v6-lh-display: 1.08;
  --v6-lh-h3:      1.3;
  --v6-lh-lead:    1.55;
  --v6-lh-body:    1.65;

  /* Measure, expressed in em rather than ch on purpose.
     CSS `ch` is the advance width of "0", which in DM Sans is 0.686em, well
     above the ~0.5em average width of lowercase prose. So a line set to 68ch
     actually renders around 93 characters, which is how the capability pages
     ended up at 79 to 95 characters a line while nominally being capped at
     "68ch". One em is very close to two average characters, so em maps
     directly onto the count the 45-75 guidance is actually about. */
  --v6-measure-body: 34em;   /* about 68 characters */
  --v6-measure-lead: 30em;   /* about 60 characters */
  --v6-measure-note: 34em;   /* about 68 characters at note size */

  /* One content grid for every family. 76rem was already the value on ten
     of the thirteen routes, so this moves the three marketing routes onto
     the majority grid rather than the reverse. */
  --v6-container: 76rem;

  /* Sticky masthead height, used for anchor scroll offset. The bar is 88px
     at desktop and 72px below 60rem; the offset adds a little breathing
     room above the heading it lands on. */
  --v6-anchor-offset: 108px;
}

@media (max-width: 60rem) {
  :root { --v6-anchor-offset: 88px; }
}

/* ==========================================================================
   1. THE SHARED CONTENT GRID
   ==========================================================================
   about, solutions and contact were on --container-default (74rem / 1184px)
   while everything else was on 76rem / 1216px. A 22px difference in the left
   edge is not visible on any single page and is very visible when moving
   between them, because the masthead does not move and the content does.

   The narrow inner container on contact and about (42rem, used for the form
   and the standfirst) is a deliberate exception and is left alone: it is a
   reading column inside the page, not the page grid.
   ========================================================================== */

body .container { max-width: var(--v6-container); }
body .container--narrow { max-width: var(--container-narrow); }
body .container--wide   { max-width: var(--container-wide); }
body .container--full   { max-width: none; }

/* ==========================================================================
   2. THE HEADING RAMP
   ==========================================================================
   h1        page title, once per route
   .display  feature and closing headings, a step under h1
   h2        section titles
   h3        component titles inside a section
   ========================================================================== */

/* --- h1 ------------------------------------------------------------------ */
body.home h1.tower__title,
body.home h1.hero__title,
body.home h1.stagehead__title,
body.home h1.display,
body:not(.home) h1.hero__title,
body:not(.home) h1.section-header__title {
  font-size: var(--v6-h1);
  line-height: var(--v6-lh-display);
  letter-spacing: -0.02em;
}

/* The homepage headline is the one place the ramp is allowed to run long,
   because it is the only h1 on the site that has the fold to itself. */
body.home h1.tower__title { max-width: 17ch; }

/* --- display: feature and closing headings -------------------------------- */
body.home h2.display,
body.home h2.close-tower__title,
body.home h3.display,
body:not(.home) h2.cta-band__title {
  font-size: var(--v6-display);
  line-height: var(--v6-lh-display);
  letter-spacing: -0.018em;
}

/* --- h2: section titles --------------------------------------------------- */
/* The base covers unclassed section headings, which is what /contact/ uses.
   The .display rules above sit at higher specificity and still win. */
body.home main h2,
body:not(.home) main h2 {
  font-size: var(--v6-h2);
  line-height: 1.14;
  letter-spacing: -0.014em;
}

body.home h2.stagehead__title,
body.home h2.sec__title,
body.home h2.section-header__title,
body:not(.home) h2.section-header__title,
body:not(.home) h2.sec__title {
  font-size: var(--v6-h2);
  line-height: 1.14;
  letter-spacing: -0.014em;
}

/* --- h3: component titles -------------------------------------------------- */
body.home h3.wf__h,
body.home h3.rolepanel__q,
body.home h3.qfit__q,
body.home h3.mech__t,
body.home h3.mcard__title,
body.home h3.getcrux__t,
body.home h3.evalq__t,
body.home h3.result__t,
body.home h3.demo__title,
body.home h3.intake-gap__h,
body:not(.home) h3.mcard__title,
body:not(.home) h3.rolecard__q {
  font-size: var(--v6-h3);
  line-height: var(--v6-lh-h3);
  letter-spacing: -0.008em;
}

/* ==========================================================================
   3. LEADS AND BODY PROSE
   ==========================================================================
   Leads ran 17px, 17.6px and 21.6px across the three families; body prose
   ran 16px, 17px and 20.48px with five different line-heights. The 20.48px
   body on the capability family was the widest departure: it is a lead size
   being used for running text, which is why those pages measured 82 to 86
   characters a line.
   ========================================================================== */

body.home p.tower__lede,
body.home p.stagehead__lead,
body.home p.sec__lead,
body.home p.hero__lead,
body.home p.hero__lede,
body.home p.lede,
body.home p.close-tower__lead,
body.home p.sysintro__lead,
body.home p.split__lead,
body.home p.section-header__summary,
body:not(.home) p.hero__lead,
body:not(.home) p.hero__lede,
body:not(.home) p.lede,
body:not(.home) p.sec__lead,
body:not(.home) p.section-header__summary,
body:not(.home) p.cta-band__lead {
  font-size: var(--v6-lead);
  line-height: var(--v6-lh-lead);
  max-width: var(--v6-measure-lead);
}

/* Centred closing leads keep their centring; only the measure is shared. */
body.home p.close-tower__lead { margin-inline: auto; }

/* Running prose. The selector is deliberately broad and then walked back
   for the classes that are not running prose, because the failure mode
   here was prose inheriting a lead size, not the other way round. */
body.home main p,
body:not(.home) main p {
  font-size: var(--v6-body);
  line-height: var(--v6-lh-body);
  max-width: var(--v6-measure-body);
}

/* Component descriptions. These are running sentences inside a card or a
   row, and they had drifted to 15.2px and 17.28px on the capability and
   pricing routes. They are prose and they read at prose size. */
body.home main p.edition__d,
body.home main p.principle__d,
body.home main p.ponboard__desc,
body.home main p.getcrux__d,
body.home main p.rolepanel__outcome,
body.home main p.mcard__body,
body.home main p.mech__d,
body.home main p.evalq__d,
body.home main p.outcome__d,
body.home main p.system__desc,
body.home main p.qfit__a,
body:not(.home) main p.mcard__body,
body:not(.home) main p.rolecard__body {
  font-size: var(--v6-body);
  line-height: var(--v6-lh-body);
  max-width: var(--v6-measure-body);
}

/* Notes, captions, disclaimers and instructions: sentences the reader has
   to actually read. This is the legibility floor from the previous wave,
   re-asserted here at a specificity that the enhanced-state rules in
   home.css cannot defeat. See section 5. */
body.home main p.demo__hint,
body.home main p.demo__note,
body.home main p.demo__cap,
body.home main p.roi__hint,
body.home main p.roi__note,
body.home main p.budgetlab__hint,
body.home main p.ba-cap,
body.home main p.shot-cap,
body.home main p.qbflow__disclaimer,
body.home main p.qbnote__disc,
body.home main p.sits__note,
body.home main p.capbreadth__note,
body.home main p.capture__note,
body.home main p.prooffig__note,
body.home main p.getcrux__note,
body.home main p.metrics__note,
body.home main p.reslist__note,
body.home main p.dstate__note,
body.home main p.handoff__cap,
body.home main p.team__from,
body.home main p.channels__legend,
body:not(.home) main p.capture__note,
body:not(.home) main p.shot-cap {
  font-size: var(--v6-note);
  line-height: 1.65;
  max-width: var(--v6-measure-note);
}

/* The same floor, element-agnostic.
   The block above is written against <p> because that is what those classes
   are. These are the same job done by a <figcaption>, a <span> or a <div>,
   and an audit found them sitting between 11.5px and 12.8px. Several are
   product-truth captions ("Product interface shown with illustrative data"),
   one is an instruction ("Scroll the table sideways to see every column")
   and one defines what a variance column means. All of them are prose the
   reader has to read to use or trust the page. */
body.home main .shot-cap,
body.home main .demo__bd,
body.home main .channel__note,
body.home main .jcx__cap,
body.home main .jcx__hint,
body.home main .jcx__legend,
body.home main .fgroup__note,
body.home main .phero__note,
body.home main .ptiers__note,
body.home main .ptier__unit,
body.home main .handoff__cap,
body.home main .channels__legend,
body:not(.home) main .shot-cap,
body:not(.home) main .capture__note {
  font-size: var(--v6-note);
  line-height: 1.65;
}

/* Micro-labels are a different object from prose: short, tracked, uppercase,
   never load-bearing sentences. They hold at 11.5px and never go below. */
body.home main .job__meta,
body.home main .decision__meta,
body.home main .shift__tag,
body.home main .compare__tag,
body.home main .capitem__role,
body.home main .capgroup__label,
body.home main .wf__chip,
body.home main .rolepanel__role {
  font-size: var(--v6-label);
}

/* ==========================================================================
   4. SAME-PAGE ANCHOR OFFSET
   ==========================================================================
   The masthead is sticky and 88px tall. No scroll-margin or scroll-padding
   rule existed anywhere in V6, so every same-page anchor landed with its
   destination heading at viewport y=0, underneath the bar. On the homepage
   estimator link the heading was cut exactly in half.

   Applied to the elements anchors actually target rather than to a blanket
   [id], so that ids used for aria-labelledby and for form field association
   do not acquire a scroll margin they have no use for.
   ========================================================================== */

body main :target,
body main section[id],
body main h1[id],
body main h2[id],
body main h3[id] {
  scroll-margin-top: var(--v6-anchor-offset);
}

/* ==========================================================================
   5. THE CARD RADIUS SCALE, COMPLETED
   ==========================================================================
   The previous wave set out three values by role and reached 94% of the
   site. Four elements were missed because they live on the three marketing
   routes and on pricing, which the sweep that produced the scale did not
   cover:

     .cta-band__inner  20px on solutions, about and contact
     .ptier__flag       3px on pricing

   Both are brought onto the scale: the CTA band is a card, and the tier
   flag is a pill.
   ========================================================================== */

body .cta-band__inner,
body .cta-band__inner.reg-corners { border-radius: 12px; }
body.home main .ptier__flag { border-radius: 999px; }