/* Spacing scale and section rhythm.
 *
 * The audit (2026-09-01) measured 32% of rendered spacing on a 4px multiple.
 * Most of the rest is Webflow's stylesheet — 4,378 off-grid declarations out of
 * 8,085 — which is the boss's composition and is not rewritten. What is fixed
 * here is the part that was measurably broken rather than merely off-round:
 * section rhythm, and the fact that spacing stepped at breakpoints instead of
 * scaling.
 *
 * Loaded after the Webflow stylesheet, so these win on source order at equal
 * specificity. Every override below is a plain single class, matching what it
 * replaces — no !important anywhere.
 */

:root {
  /* The 4px scale. Geist's base; every other step also satisfies Material's
     8dp grid. Nine values covered every page measured. */
  --pf-sp-1:  4px;
  --pf-sp-2:  8px;
  --pf-sp-3:  12px;
  --pf-sp-4:  16px;
  --pf-sp-6:  24px;
  --pf-sp-8:  32px;
  --pf-sp-12: 48px;
  --pf-sp-16: 64px;
  --pf-sp-24: 96px;

  /* Section rhythm, fluid rather than stepped.
   *
   * Webflow drove these with three hard breakpoints — 125/150/100 on desktop,
   * 75/100 at tablet, 50/55 on mobile — so the page jumped at 991px and again
   * at 767px, and consecutive sections ran 125 -> 100 -> 150 -> 100 with no
   * beat at all. Three sizes on a clamp() replace seven values and scale
   * continuously, which is what "scaling when the structure changes" needs:
   * the padding is already correct at every width in between, not just at the
   * three the breakpoints happened to cover.
   *
   * The ceilings sit close to the old desktop values so the composition keeps
   * its weight; the floors are what mobile actually needed. */
  --pf-sec-sm: clamp(20px, 3vw,  32px);   /* was 35 / 30 / 20 */
  --pf-sec-md: clamp(48px, 7vw,  96px);   /* was 100 / 75 / 50 */
  --pf-sec-lg: clamp(56px, 9vw, 128px);   /* was 150 / 100 / 55 */

  /* Page gutter. Was 50 / 30 / 20 across the same three breakpoints. */
  --pf-gut: clamp(20px, 4vw, 48px);

  /* Minimum control size. Geist 40, Material 48; 40 is the floor used here
     because it is what the existing controls can reach without redrawing. */
  --pf-tap: 40px;
}

/* Fluid and on-grid at the same time.
 *
 * A clamp() is continuous, so between its floor and ceiling it lands wherever
 * the viewport puts it — at 900px the sections measured 27 / 63 / 81, none of
 * them on the 4px grid. round() snaps the result to the nearest 4px step, so
 * spacing still scales with the viewport but only ever in grid increments.
 *
 * Guarded because round() is newer than clamp(): a browser without it keeps the
 * plain clamp above, which is the behaviour this replaces and is perfectly
 * good — it just lands between steps. */
@supports (width: round(10px, 4px)) {
  :root {
    --pf-sec-sm: round(clamp(20px, 3vw,  32px), 4px);
    --pf-sec-md: round(clamp(48px, 7vw,  96px), 4px);
    --pf-sec-lg: round(clamp(56px, 9vw, 128px), 4px);
    --pf-gut:    round(clamp(20px, 4vw,  48px), 4px);
  }
}

/* --------------------------------------------------------------------------
   Section rhythm — /corporate-training and the two pages sharing these classes
   -------------------------------------------------------------------------- */

.new-callout       { padding: var(--pf-sec-sm) var(--pf-gut); }
.new-logo-reel     { padding: var(--pf-sec-lg) var(--pf-gut) 0; }
.new-our-promise   { padding: var(--pf-sec-md) var(--pf-gut) 0; }
.new-why-us        { padding: var(--pf-sec-lg) var(--pf-gut) var(--pf-sec-md); }
.new-bottom-cta    { padding: var(--pf-sec-md) var(--pf-gut) var(--pf-sec-lg); }

/* The hero sets its own vertical rhythm — only the gutter is normalised, so the
   hero image keeps the position it was composed at. */
.new-homepage-hero { padding-left: var(--pf-gut); padding-right: var(--pf-gut); }

/* --------------------------------------------------------------------------
   Tap targets
   --------------------------------------------------------------------------
   The audit found 140 controls under 44px on mobile. Raising every one of them
   site-wide would reflow content we do not own, so this covers the standalone
   calls to action — the ones a thumb is actually aiming at. Links inside a
   paragraph are text and are deliberately left alone: padding them out would
   break the line box they sit in. */

/* NOT scoped to .pf-root: only 75 of the 97 pages carry that class on <body>,
   and the 22 without it are the mirrored ones — the homepage, the checkout and
   all eight course pages. Scoping here made the rule silently dead on exactly
   the pages that matter most. `.w-button` is Webflow's own button class, so
   this is specific enough unscoped. */
a.w-button,
.w-button,
button:not([class*="w-nav"]) {
  min-height: var(--pf-tap);
}

/* The named controls the audit caught at 20-37px tall. inline-flex rather than
   a bare min-height so the box grows around the text and stays centred, instead
   of the text sitting at the top of a taller block. Widths shrink to the text,
   which is also correct: a 299px-wide, 22px-tall link is a poor target even
   though it is wide. */
.w-nav-brand,
.pf-ft__logolink,
.pf-ep__more,
.pf-sort__opt,
.pfco-promo-toggle,
.scp0,
.scp7 {
  display: inline-flex;
  align-items: center;
  min-height: var(--pf-tap);
}

/* The nav brand is a flex child of a 75px bar, so growing it to 40px changes
   nothing about the bar — it just makes the logo itself hittable. */
.new-nav-bar .w-nav-brand { flex: none; }

/* --------------------------------------------------------------------------
   One consequence of the type pass
   --------------------------------------------------------------------------
   Snapping the scale moved a 9.5px label to 12px, which is right — 9.5px is
   below every legibility floor. But one of those labels is a `white-space:
   nowrap` chip sitting in a 306px flex row next to a five-star rating, and at
   12px it grew from 173px to 208px and pushed 7px past its parent.

   Letting that chip wrap costs nothing (it is a bordered pill, not a line of
   running text) and keeps the legibility win everywhere else. The selector is
   deliberately narrow: dashed AND nowrap matches five elements site-wide.

   Those five are the "PULL FROM MAVEN REVIEWS" placeholders — editorial
   to-do notes that shipped to the live homepage. They should be deleted
   rather than styled, but that is content, so they are only reported. */
[style*="dashed"][style*="nowrap"] {   /* unscoped, same reason as above */
  white-space: normal !important;
}