/* ============================================================
   VERIFIED, BY INFLUENCER
   Stylesheet, build three

   Palette is deliberately narrow: dark green, light green,
   white, off-white, and black for type. No blue, no pink,
   no fuchsia.

   With only 2 brand colors, variety has to come from
   proportion rather than hue. Three grounds do the work:
     dark green full-bleed, white type
     light green full-bleed, black type
     white and off-white, black type with green elements

   Contrast, measured and held to:
     light green on dark green   4.09  large bold type only
     white on dark green         4.83  any size
     black on light green       16.4   any size
     dark green on white         4.83  any size
     dark green on light green   4.09  graphics only, never type
   ============================================================ */

/* ---------- 1. Tokens ---------- */

:root {
  --white: #ffffff;
  --off-white: #f7f6f4;
  --black: #000000;

  --green-dark: #00825b;
  --green-light: #d2fb6e;

  --rule-on-light: rgba(0, 0, 0, 0.14);
  --rule-strong: rgba(0, 0, 0, 0.85);
  --rule-on-dark: rgba(255, 255, 255, 0.28);
  --rule-on-lime: rgba(0, 0, 0, 0.22);
  --fill-on-dark: rgba(255, 255, 255, 0.08);
  --ink-soft: rgba(0, 0, 0, 0.62);

  --max-width: 1220px;
  --measure: 66ch;

  --section-y: clamp(80px, 9vw, 140px);
  /* The single control for horizontal breathing room. Every section, the
     hero, the page headers, the header and the footer read from this, so
     changing it here moves the whole site together. Ceiling is high enough
     that laptop widths, where --max-width has not yet taken over, still get
     real margins rather than a hairline. */
  --gutter: clamp(26px, 6vw, 96px);
  --strip: clamp(10px, 1.1vw, 16px);
  --radius-card: 14px;

  --size-display: clamp(40px, 6.4vw, 76px);
  --size-h2: clamp(30px, 3.6vw, 46px);
  --size-h3: clamp(22px, 2.2vw, 28px);
  --size-body: clamp(17px, 1.15vw, 18px);
  --size-small: 15px;
  --size-lozenge: 14px;
}

/* ---------- 2. Reset ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--size-body);
  font-weight: 400;
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

img, svg, video, iframe { max-width: 100%; display: block; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }

/* ---------- 3. Focus ---------- */

:focus { outline: none; }
:focus-visible { outline: 3px solid var(--green-dark); outline-offset: 3px; }

.on-dark :focus-visible,
.hero :focus-visible,
.page-head :focus-visible,
.card--dark :focus-visible,
.gate :focus-visible,
.section--green :focus-visible { outline-color: var(--green-light); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--green-dark);
  color: var(--white);
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 500;
}

.skip-link:focus { left: 12px; top: 12px; }

/* ---------- 4. Typography ---------- */

.display, .h2, .h3, h1, h2, h3 {
  font-weight: 600;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

.display { font-size: var(--size-display); line-height: 0.9; }
.h2 { font-size: var(--size-h2); line-height: 0.95; }
.h2--sm { font-size: calc(var(--size-h2) - 5px); }
.h2--xs { font-size: calc(var(--size-h2) - 7px); }
.h3 { font-size: var(--size-h3); font-weight: 500; line-height: 1.15; }

.h4 {
  font-size: var(--size-small);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.3;
}

.eyebrow {
  font-size: var(--size-small);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.3;
  margin-bottom: 22px;
}

.lede {
  font-size: clamp(19px, 1.7vw, 24px);
  font-weight: 500;
  line-height: 1.35;
  max-width: var(--measure);
}

.body { max-width: var(--measure); }
.small { font-size: var(--size-small); line-height: 1.55; }
.muted { color: var(--ink-soft); }

.on-dark .muted,
.hero .muted,
.page-head .muted,
.card--dark .muted,
.gate .muted,
.section--green .muted { color: var(--white); }

.stack > * + * { margin-top: 20px; }
.stack-s > * + * { margin-top: 12px; }
.stack-l > * + * { margin-top: 36px; }

/* Bulleted list. Square marker, flat, no rounding. */
.list { max-width: var(--measure); }
.list li { position: relative; padding-left: 28px; }
.list li + li { margin-top: 13px; }

.list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 9px;
  height: 9px;
  background: var(--green-dark);
}

.section--green .list li::before,
.gate .list li::before,
.on-dark .list li::before { background: var(--green-light); }

/* ---------- 5. Layout ---------- */

.section { padding: var(--section-y) var(--gutter); }

.section--white { background: var(--white); color: var(--black); }
.section--offwhite { background: var(--off-white); color: var(--black); }
.section--green { background: var(--green-dark); color: var(--white); }
.section--lime { background: var(--green-light); color: var(--black); }

.wrap { max-width: var(--max-width); margin: 0 auto; width: 100%; }
.wrap--narrow { max-width: 840px; }

.grid { display: grid; gap: clamp(20px, 2.4vw, 32px); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}

.split--middle { align-items: center; }

/* Icon and heading on one line, so the heading starts beside the mark
   rather than under it. */
.head-row {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 22px);
}
.head-row .h2 { margin: 0; }
@media (max-width: 520px) {
  .head-row { align-items: flex-start; }
}

@media (max-width: 960px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
}

.section-head { margin-bottom: clamp(40px, 5vw, 68px); max-width: var(--measure); }

/* Heading left, action pushed to the far right of the section. */
.section-head--split {
  max-width: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 64px);
  flex-wrap: wrap;
}

/* Narrower than the usual measure so the action still fits beside it
   rather than wrapping underneath. */
.section-head--split .h2 { flex: 1 1 320px; max-width: 30ch; }
.section-head--split .btn-row { flex: none; margin-right: 20px; }
.section-head .h2 + p, .section-head .display + p { margin-top: 20px; }

.rule { border: 0; border-top: 1px solid var(--rule-on-light); margin: 0; }
.section--green .rule, .on-dark .rule { border-top-color: var(--rule-on-dark); }
.section--lime .rule { border-top-color: var(--rule-on-lime); }

/* ---------- 6. The graphic device ---------- */
/* A color strip. Frames blocks, divides sections, adds energy.
   Never black and never white, by brand rule, so with this palette
   it is always one of the 2 greens. */

.strip { height: var(--strip); width: 100%; }
.strip--green { background: var(--green-dark); }
.strip--lime { background: var(--green-light); }

/* A two-tone band used as a section transition. The light green
   runs long and the dark green closes it, so it reads as a
   designed device rather than a pair of stripes. */
.strip-set { display: flex; }
.strip-set .strip { flex: 1; }
.strip-set .strip--lime { flex: 2.4; }

.framed { display: flex; flex-direction: column; }
.framed > .strip { flex: none; }

/* ---------- 7. Icons ---------- */

.icon { display: block; }

.icon-circle {
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  flex: none;
}

.icon-circle--sm { width: 30px; height: 30px; }
.icon-circle--md { width: 46px; height: 46px; }
.icon-circle--lg { width: 64px; height: 64px; }
.icon-circle--xl { width: 132px; height: 132px; }

/* Light green circle, dark green icon. The library default. */
.icon-circle--green,
.icon-circle--onGreen { background: var(--green-light); color: var(--green-dark); }

/* Inverted, for use on a light green ground where the default
   would disappear. */
.icon-circle--lime,
.icon-circle--onLime { background: var(--green-dark); color: var(--green-light); }

.icon-circle--outline {
  background: transparent;
  color: currentColor;
  box-shadow: inset 0 0 0 2px currentColor;
}

/* On a light green ground the pale circle disappears, so invert it
   wherever it lands there. Same for the pale lozenge. */
.section--lime .icon-circle--green,
.section--lime .icon-circle--onGreen,
.credential .icon-circle--green,
.credential .icon-circle--onGreen {
  background: var(--green-dark);
  color: var(--green-light);
}

/* ---------- 8. Lozenges ---------- */
/* Fully rounded, corners at maximum curvature, paired with a
   circular icon. Headers, tags, short phrases, status chips and
   calls to action only. Maximum 6 a page. */

.lozenge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--size-lozenge);
  font-weight: 500;
  line-height: 1;
  padding: 8px 18px 8px 8px;
  border-radius: 999px;
  background: var(--green-light);
  color: var(--black);
  white-space: nowrap;
}

.lozenge:not(:has(.lozenge__icon)) { padding-left: 18px; }

.lozenge__icon {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--green-dark);
  color: var(--green-light);
  flex: none;
}

/* Dark green lozenge, used on a light green ground and anywhere
   the pale one would flatten out. */
.lozenge--green { background: var(--green-dark); color: var(--white); }
.lozenge--green .lozenge__icon { background: var(--green-light); color: var(--green-dark); }

.lozenge--outline {
  background: transparent;
  color: var(--black);
  box-shadow: inset 0 0 0 1px var(--rule-on-light);
}

.lozenge--outline .lozenge__icon { background: var(--green-dark); color: var(--green-light); }

.section--green .lozenge--outline,
.hero .lozenge--outline,
.page-head .lozenge--outline,
.card--dark .lozenge--outline,
.gate .lozenge--outline,
.on-dark .lozenge--outline {
  color: var(--white);
  box-shadow: inset 0 0 0 1px var(--rule-on-dark);
}

.section--green .lozenge--outline .lozenge__icon,
.hero .lozenge--outline .lozenge__icon,
.page-head .lozenge--outline .lozenge__icon,
.card--dark .lozenge--outline .lozenge__icon,
.gate .lozenge--outline .lozenge__icon,
.on-dark .lozenge--outline .lozenge__icon {
  background: var(--green-light);
  color: var(--green-dark);
}

.section--lime .lozenge--outline { box-shadow: inset 0 0 0 1px var(--rule-on-lime); }

/* Pale lozenge on a pale ground reads as nothing, so it flips. */
.section--lime .lozenge:not(.lozenge--green):not(.lozenge--outline),
.credential .lozenge:not(.lozenge--green):not(.lozenge--outline) {
  background: var(--green-dark);
  color: var(--white);
}

.section--lime .lozenge:not(.lozenge--green):not(.lozenge--outline) .lozenge__icon,
.credential .lozenge:not(.lozenge--green):not(.lozenge--outline) .lozenge__icon {
  background: var(--green-light);
  color: var(--green-dark);
}

.lozenge--lg { font-size: clamp(16px, 1.5vw, 20px); padding: 11px 24px 11px 11px; }
.lozenge--lg:not(:has(.lozenge__icon)) { padding-left: 24px; }
.lozenge--lg .lozenge__icon { width: 34px; height: 34px; }

.lozenge-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* ---------- 9. Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--size-body);
  font-weight: 500;
  line-height: 1.2;
  padding: 16px 30px;
  border: 2px solid transparent;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

/* Roughly half the weight of a standard button, for use inside a card
   or a slide where the button is not the main event. */
.btn--sm {
  font-size: 12px;
  padding: 6px 13px;
  border-width: 1px;
}

.btn--lime { background: var(--green-light); color: var(--black); border-color: var(--green-light); }
.btn--lime:hover { background: var(--white); border-color: var(--white); }

.btn--green { background: var(--green-dark); color: var(--white); border-color: var(--green-dark); }
.btn--green:hover { background: var(--black); border-color: var(--black); }
.btn--black { background: var(--black); color: var(--white); border-color: var(--black); }
.btn--black:hover { background: var(--green-dark); border-color: var(--green-dark); }

.btn--outline-white { background: transparent; color: var(--white); border-color: var(--white); }
.btn--outline-white:hover { background: var(--white); color: var(--green-dark); }

.btn--outline-dark { background: transparent; color: var(--black); border-color: var(--black); }
.btn--outline-dark:hover { background: var(--black); color: var(--white); }

/* On a light green ground the pale button vanishes, so the
   primary there is the dark green one. */
.section--lime .btn--lime { background: var(--green-dark); color: var(--white); border-color: var(--green-dark); }
.section--lime .btn--lime:hover { background: var(--black); border-color: var(--black); }

.btn[aria-disabled="true"], .btn:disabled {
  background: transparent;
  color: var(--ink-soft);
  border-color: var(--rule-on-light);
  cursor: default;
  pointer-events: none;
}

.hero .btn[aria-disabled="true"],
.page-head .btn[aria-disabled="true"],
.section--green .btn[aria-disabled="true"],
.gate .btn[aria-disabled="true"],
.on-dark .btn[aria-disabled="true"] {
  background: transparent;
  color: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 255, 255, 0.4);
}

a[aria-disabled="true"]:not(.btn) {
  color: var(--ink-soft);
  border-bottom-color: var(--rule-on-light);
  cursor: default;
  pointer-events: none;
}

.card--dark a[aria-disabled="true"]:not(.btn),
.section--green a[aria-disabled="true"]:not(.btn),
.gate a[aria-disabled="true"]:not(.btn),
.on-dark a[aria-disabled="true"]:not(.btn) {
  color: rgba(255, 255, 255, 0.92);
  border-bottom-color: rgba(255, 255, 255, 0.4);
}

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* Push an action to the far side of its column. */
.btn-row--end { justify-content: flex-end; }
.btn-row--center { justify-content: center; }

@media (max-width: 760px) {
  .btn-row--end { justify-content: flex-start; }
}

.link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 2px solid var(--green-dark);
  padding-bottom: 2px;
  transition: border-color 0.18s ease;
}

.link:hover { border-bottom-color: var(--black); }

.section--green .link, .gate .link, .on-dark .link { border-bottom-color: var(--green-light); }
.section--green .link:hover, .gate .link:hover, .on-dark .link:hover { border-bottom-color: var(--white); }

/* ---------- 10. Cards ---------- */

.card {
  background: var(--white);
  border: 1px solid var(--rule-on-light);
  border-top: 0;
  padding: clamp(24px, 2.6vw, 34px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-decoration: none;
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.card-frame {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: var(--radius-card);
  overflow: hidden;
}
.card-frame .card { flex: 1; }

.section--offwhite .card { background: var(--white); border-color: rgba(0, 0, 0, 0.08); }
.section--lime .card { background: var(--white); border-color: transparent; }

a.card-frame:hover .card { border-color: var(--black); }
a.card-frame:hover { transform: translateY(-3px); }
a.card-frame { text-decoration: none; }

.card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }

/* The pairing line, "Instinct meets Evidence". It is the most distinctive
   language on the card, so it sits above the name rather than under the
   description where it was being skipped. */
.card__pair {
  font-size: var(--size-small);
  font-weight: 600;
  color: var(--green-dark);
  margin-bottom: -6px;
}

/* The lead card runs across two columns and reads sideways, which both
   gives the grid a starting point and clears the orphan that a seventh
   card leaves in a three column layout. */
.card-frame--lead { grid-column: span 2; }
.card-frame--tail { grid-column: span 2; }
.card-frame--featured { grid-column: 1 / -1; }

.card--lead {
  flex-direction: row;
  align-items: center;
  gap: clamp(22px, 3vw, 44px);
}

.card--lead .badge--lg { flex: none; width: clamp(84px, 9vw, 116px); }
.card--lead .card__body { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.card--lead .body { max-width: 40ch; }

@media (max-width: 620px) {
  .card-frame--lead, .card-frame--tail { grid-column: auto; }
  .card--lead { flex-direction: column; align-items: flex-start; }
}
.card__meta { font-size: var(--size-small); color: var(--ink-soft); }
.card__foot { margin-top: auto; padding-top: 10px; }

.card--soon { background: transparent; border-style: dashed; }
.card--soon .h3 { color: var(--ink-soft); }
.section--lime .card--soon { background: transparent; border-color: var(--rule-on-lime); }

.card--dark,
.section--offwhite .card--dark,
.section--lime .card--dark,
.section--white .card--dark {
  background: var(--green-dark);
  color: var(--white);
  border-color: var(--green-dark);
}

.card--dark .card__meta, .card--dark .muted { color: var(--white); }
.card--dark .link { border-bottom-color: var(--green-light); }
.card--dark .link:hover { border-bottom-color: var(--white); }

/* A numbered sequence. The class was named .numbered but only ever drew a
   top border, so every step ran into the one below it and none of them had a
   number. Numbering is right here because these are real orders of
   operations, where the sequence is the information. */
.numbered {
  border-top: 3px solid currentColor;
  padding-top: 22px;
  counter-reset: step;
}

.numbered > li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  column-gap: 16px;
  row-gap: 6px;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule-on-light);
}

.numbered > li > * { grid-column: 2; }

.numbered > li::before {
  content: counter(step);
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: start;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  color: var(--green-dark);
}

.numbered > li:last-child { border-bottom: 0; padding-bottom: 0; }

/* Dark green on light green is 4.09 to 1, which fails for the counter even
   at this size, so black. On a dark ground the counter is large text at 700
   and light green clears the 3 to 1 it needs. */
.section--lime .numbered > li::before { color: var(--black); }
.section--lime .numbered > li { border-bottom-color: var(--rule-on-lime); }

.section--green .numbered > li::before,
.on-dark .numbered > li::before { color: var(--green-light); }
.section--green .numbered > li,
.on-dark .numbered > li { border-bottom-color: var(--rule-on-dark); }


/* ---------- 10b. Carousel ---------- */
/* Auto-rotating, so it carries a pause control by requirement, not by
   taste. Movement is a fade plus a small lift, nothing that slides. */

.carousel { margin-top: clamp(8px, 1.5vw, 16px); }

.carousel__stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  position: relative;
}

/* The badge either side of the current one, faded back so the run of
   disciplines is visible without competing with the slide in focus.
   Decorative only, and dropped once there is no room for it. */
.carousel__peek {
  position: absolute;
  width: clamp(96px, 11vw, 168px);
  height: auto;
  transform: translateY(-50%);
  opacity: 0.16;
  pointer-events: none;
  transition: opacity 0.45s ease;
}

/* The peeks sit inside the arrows so the two never overlap. */
.carousel__peek--prev { left: 72px; }
.carousel__peek--next { right: 72px; }

/* Optional stepping. The carousel still rotates on its own; these just
   let someone move it along if they want to. */
.carousel__arrow {
  position: absolute;
  width: 46px;
  height: 46px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid var(--rule-on-light);
  background: var(--white);
  color: var(--black);
  cursor: pointer;
  z-index: 2;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

.carousel__arrow:hover {
  background: var(--green-light);
  border-color: var(--green-light);
}

.carousel__arrow--prev { left: 0; }
.carousel__arrow--next { right: 0; }

@media (max-width: 860px) {
  .carousel__arrow { width: 40px; height: 40px; }
}
.carousel__peek:not([src]), .carousel__peek[src=""] { display: none; }

@media (max-width: 860px) {
  .carousel__peek { display: none; }
}

.carousel__slides { display: grid; }

.carousel__slide {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
  padding: clamp(24px, 3vw, 40px) 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.carousel__slide[data-active="true"] {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.carousel__eyebrow {
  font-size: var(--size-small);
  font-weight: 400;
  color: var(--ink-soft);
  margin-bottom: -6px;
}

.carousel__name {
  font-size: clamp(30px, 4.4vw, 52px);
  font-weight: 700;
  line-height: 0.95;
}

/* The discipline badge lockup, used wherever a discipline is named. */
.badge { height: auto; display: block; flex: none; }
.badge--md { width: 58px; }
.badge--lg { width: 84px; }

.carousel__badge {
  width: clamp(360px, 39vw, 468px);
  max-width: 100%;
  height: auto;
  margin-top: 6px;
}

/* Narrow screens: the badge was filling the wrap and the arrows sat on top
   of the artwork. Give them room. Declared after the base rule, which would
   otherwise win on source order. */
@media (max-width: 860px) {
  .carousel__badge { width: calc(100% - 112px); }
}
.carousel__slide .btn { margin-top: 4px; }



.carousel__dots { display: flex; align-items: center; gap: 9px; }

.carousel__dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.22);
  cursor: pointer;
  transition: background-color 0.18s ease;
}

.carousel__dot[aria-current="true"] { background: var(--green-dark); }



/* ---------- 10c. Pull quote ---------- */
/* Light green on dark green is only safe at large sizes, so the quote
   itself carries it and the attribution underneath stays white. */

.quote { max-width: none; text-align: center; }

.quote__text {
  font-size: clamp(26px, 3.4vw, 46px);
  font-weight: 700;
  line-height: 1.06;
  color: var(--green-light);
  max-width: 26ch;
  margin-inline: auto;
}

.quote__by {
  margin-top: clamp(20px, 2.4vw, 32px);
  font-size: var(--size-small);
  font-weight: 600;
  color: var(--white);
}

/* Inverted quote: light green ground. The quote is large display type, so
   dark green clears the 3:1 that non-body text needs. The caption is 15px,
   where dark green would only reach 4.09:1, so it takes black at 17.76:1. */
.section--lime .quote__text { color: var(--green-dark); }
.section--lime .quote__by { color: var(--black); }

/* Same problem on the pale grounds. The base colors are for a dark green
   ground, and light green on off-white is unreadable. Display type takes
   dark green at 3:1, the 15px caption takes black. */
.section--white .quote__text,
.section--offwhite .quote__text { color: var(--green-dark); }
.section--white .quote__by,
.section--offwhite .quote__by { color: var(--black); }


/* ---------- 10d. Pinned column ---------- */
/* The left side holds still while the right side scrolls past it, the
   pattern on influencer.com/services. The rule down the left of the
   flow fills in as each step comes into view, so it reads as progress
   rather than decoration. No automatic movement, so nothing here needs
   a pause control. */

.pinned {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}

.pinned__aside {
  position: sticky;
  top: 104px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.pinned__flow { display: flex; flex-direction: column; }

.step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-left: clamp(24px, 2.6vw, 38px);
  padding-bottom: clamp(48px, 6vw, 96px);
  border-left: 2px solid var(--rule-on-light);
  transition: border-color 0.5s ease;
}

.step:last-child { padding-bottom: 0; }

.js .step.is-in { border-left-color: var(--green-dark); }

.step__head { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 20px); }
.step__head .h2 { margin: 0; }

@media (max-width: 960px) {
  .pinned { grid-template-columns: minmax(0, 1fr); }
  .pinned__aside { position: static; margin-bottom: clamp(36px, 5vw, 56px); }
}

@media (max-width: 520px) {
  .step { padding-left: 18px; }
  .step__head { align-items: flex-start; }
}


/* ---------- 11. Header ---------- */

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--white);
  border-bottom: 1px solid var(--rule-on-light);
  padding: 0 var(--gutter);
}

.header__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 16px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 19px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.015em;
  text-decoration: none;
  white-space: nowrap;
}

.wordmark em { font-style: normal; font-weight: 400; color: var(--ink-soft); }

/* The supplied artwork is near square, so height sets the size and the
   width follows. */
.wordmark__logo { height: 34px; width: auto; display: block; }

.wordmark__mark {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--green-dark);
  color: var(--green-light);
  display: grid;
  place-items: center;
  flex: none;
}

.nav { display: flex; align-items: center; gap: clamp(4px, 0.8vw, 12px); }

.nav a {
  font-size: var(--size-small);
  font-weight: 500;
  text-decoration: none;
  padding: 8px 15px;
  border-radius: 999px;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.nav a:hover { background: var(--green-light); color: var(--black); }

.nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--green-dark);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.nav__verify {
  margin-left: clamp(6px, 1.2vw, 16px);
  padding-left: clamp(16px, 2vw, 30px);
  border-left: 1px solid var(--rule-on-light);
}

.nav__verify a { color: var(--green-dark); font-weight: 600; }

.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--rule-on-light);
  border-radius: 999px;
  padding: 9px 18px;
  font-size: var(--size-small);
  font-weight: 500;
  cursor: pointer;
}

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav {
    display: none;
    position: absolute;
    /* Positions against the header's padding box, which is already full
       width, so no offset is needed to escape the gutter. */
    left: 0; right: 0; top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--white);
    border-bottom: 1px solid var(--rule-on-light);
    padding: 6px var(--gutter) 22px;
  }
  .nav[data-open="true"] { display: flex; }

  /* The links are inline by default. Inline elements do not lay out vertical
     padding, so 14px top and bottom painted outside the box and all five rows
     sat on top of each other. Block makes the padding count, makes the whole
     row tappable rather than just the words, and squares off the pill, which
     is a nav row here and not a button. */
  .nav li,
  .nav__verify { display: block; }

  .nav a {
    display: block;
    border-radius: 0;
    padding: 14px 16px;
    border-bottom: 1px solid var(--rule-on-light);
  }

  .nav > :last-child a { border-bottom: 0; }
  .nav__verify { margin-left: 0; padding-left: 0; border-left: 0; }
}

/* ---------- 12. Hero ---------- */

.hero {
  background: var(--green-dark);
  color: var(--white);
  padding: clamp(44px, 10vw, 132px) var(--gutter) clamp(48px, 8vw, 110px);
  min-height: min(78vh, 880px);
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.hero__inner { position: relative; z-index: 1; width: 100%; }

.hero__eyebrow {
  /* White, not light green: at 15px and weight 400 this is small text, and
     light green on green only clears AA as large text. */
  color: var(--white);
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  margin-bottom: clamp(22px, 3vw, 38px);
}

.hero__title {
  font-size: var(--size-display);
  font-weight: 600;
  line-height: 0.9;
  color: var(--white);
  max-width: 15ch;
}

.hero__sub {
  color: var(--green-light);
  font-size: clamp(19px, 1.7vw, 23px);
  font-weight: 700;
  line-height: 1.35;
  max-width: 66ch;
  margin-top: clamp(22px, 3vw, 34px);
}

.hero__buttons { margin-top: clamp(30px, 4vw, 44px); }

.hero__strip { position: absolute; left: 0; right: 0; bottom: 0; display: flex; }
.hero__strip span { height: var(--strip); flex: 1; }
.hero__strip .strip--lime { flex: 2.4; }

/* Page header on inner pages. */
.page-head {
  color: var(--white);
  background: var(--green-dark);
  padding: clamp(56px, 7vw, 100px) var(--gutter) clamp(44px, 5.5vw, 76px);
}

.page-head .display { color: var(--white); max-width: 17ch; }
.page-head .lede { color: var(--green-light); font-weight: 700; margin-top: 22px; }
.page-head .eyebrow { color: var(--green-light); font-size: 19px; font-weight: 700; }
.hero .eyebrow, .page-head .eyebrow { margin-bottom: clamp(24px, 3vw, 36px); }

.page-head__row { display: flex; align-items: center; gap: 18px; margin-bottom: clamp(22px, 3vw, 34px); }
.page-head__row .eyebrow { margin-bottom: 0; }

/* ---------- 12b. Global partners ---------- */
/* Pale circle, saturated mark, the same treatment every other icon
   circle on a green ground uses. The label is white, because at this
   size light green on green would not carry. */

.partners { margin-top: clamp(40px, 5vw, 68px); }

.partners__label {
  font-size: var(--size-small);
  font-weight: 600;
  color: var(--white);
  margin-bottom: 16px;
}

.partners__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(10px, 1.4vw, 18px);
  list-style: none;
  padding: 0;
}

.partners__circle {
  width: 31px;
  height: 31px;
  /* White on the dark green hero is 4.83:1, clear of the 3:1 a non-text
     graphic needs. The marks sit dark green on that white at 4.83:1. */
  background: var(--white);
  color: var(--green-dark);
}

@media (max-width: 620px) {
  .partners__circle { width: 27px; height: 27px; }
}

/* ---------- 13. Flags ---------- */

.flag {
  display: block;
  border-left: 5px solid var(--green-dark);
  background: var(--off-white);
  padding: 16px 22px;
  font-size: var(--size-small);
  line-height: 1.55;
  max-width: var(--measure);
}

.section--offwhite .flag { background: var(--white); }
.section--lime .flag { background: var(--white); }

.section--green .flag, .gate .flag, .on-dark .flag {
  background: var(--fill-on-dark);
  border-left-color: var(--green-light);
  color: var(--white);
}

/* ---------- 14. Media ---------- */

.media {
  aspect-ratio: 16 / 9;
  background: var(--off-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  padding: 24px;
}

.media__label { font-size: var(--size-body); font-weight: 500; color: var(--black); max-width: 30ch; }
.media__time { font-size: var(--size-small); color: var(--ink-soft); }

/* Lesson poster. Reads as the place the video will sit, rather
   than as a missing asset. */
.media--poster { background: var(--off-white); gap: 18px; }
.section--offwhite .media, .section--offwhite .media--poster { background: var(--white); }
.section--lime .media, .section--lime .media--poster { background: var(--white); }

/* ---------- 15. Tables ---------- */

.table-wrap { overflow-x: auto; }
.table-wrap:focus-visible { outline: 3px solid var(--green-dark); outline-offset: 4px; }
.table { font-size: var(--size-small); min-width: 500px; }

.table th, .table td {
  text-align: left;
  padding: 15px 20px 15px 0;
  border-bottom: 1px solid var(--rule-on-light);
  vertical-align: top;
}

.table thead th { font-weight: 600; border-bottom-color: var(--rule-strong); }
.table tfoot td { font-weight: 600; border-bottom: 0; border-top: 2px solid var(--rule-strong); }
.table td:last-child, .table th:last-child { text-align: right; padding-right: 0; white-space: nowrap; }

/* ---------- 16. Footer ---------- */

.footer {
  background: var(--green-dark);
  color: var(--white);
  padding: clamp(56px, 6vw, 92px) var(--gutter) 36px;
}

.footer__inner { max-width: var(--max-width); margin: 0 auto; }

.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}

@media (max-width: 860px) { .footer__top { grid-template-columns: minmax(0, 1fr); } }

/* The full lockup, drawn for dark grounds. Width leads because the
   artwork is a wide horizontal shape. */
.footer__lockup { width: clamp(190px, 21vw, 250px); height: auto; display: block; }
.verify__lockup { width: clamp(200px, 24vw, 280px); height: auto; display: block; margin-bottom: 28px; }

.footer__tagline {
  font-size: clamp(18px, 2.1vw, 23px);
  font-weight: 700;
  line-height: 0.95;
  color: var(--white);
}

.footer__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
@media (max-width: 620px) { .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.footer h4,
.footer .footer__cols h2 {
  font-size: 13px;
  font-weight: 600;
  color: var(--white);
  letter-spacing: 0.05em;
  margin-bottom: 16px;
}

.footer li + li { margin-top: 2px; }

/* The link text is 15px, which left a 21px tap target. Padding takes the
   hit area past 24px without moving the type, and inline-block keeps the
   underline hugging the words rather than the padding. */
.footer a {
  font-size: var(--size-small);
  text-decoration: none;
  display: inline-block;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
}
.footer a:hover { border-bottom-color: var(--green-light); }

.footer__bottom {
  margin-top: clamp(44px, 5vw, 72px);
  padding-top: 22px;
  border-top: 1px solid var(--rule-on-dark);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  font-size: 13px;
  color: var(--white);
}

.footer__parent { font-weight: 600; display: inline-flex; align-items: center; }

/* The supplied file is 1920 x 325, so height comes from the ratio. */
.footer__logo { width: 132px; height: auto; display: block; }

/* ---------- 16b. Forms ---------- */
/* Square fields, rounded button, matching the brand rule that only
   buttons and lozenges carry a radius. */

.disclosure { display: flex; flex-direction: column; align-items: flex-start; gap: 26px; }
.disclosure .form { width: 100%; }
.disclosure--end { align-items: flex-end; }

@media (max-width: 760px) {
  .disclosure--end { align-items: flex-start; }
}

.form { display: flex; flex-direction: column; gap: 20px; }

/* display:flex above outranks the browser's own [hidden] rule, so the
   hidden state has to be restated or the panel never actually hides.
   The same applies to .btn, which sets display:inline-flex. */
.form[hidden], .btn[hidden] { display: none; }

.field { display: flex; flex-direction: column; gap: 8px; }

.field__label { font-size: var(--size-small); font-weight: 600; }

.field__input {
  font: inherit;
  font-size: var(--size-body);
  padding: 14px 16px;
  border: 1px solid var(--rule-strong);
  background: var(--white);
  color: var(--black);
  width: 100%;
}

.field__input--area { resize: vertical; min-height: 120px; }

/* A select, squared off like every other input, with the native chevron
   replaced so it matches on Windows as well as Mac. Square corners per the
   brand rules, and the arrow is drawn in dark green rather than system blue. */
select.field__input {
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
  padding-right: 46px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2300825B' stroke-width='2'%3E%3Cpath d='M3.5 6 8 10.5 12.5 6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 15px 15px;
}

select.field__input:invalid { color: var(--ink-soft); }

/* The status on a module that is not written yet. It used to be a lozenge,
   but six of them on one page broke the six-a-page rule and repeated the
   same word six times. Plain type does the job. */
.lesson__status {
  flex: none;
  align-self: flex-start;
  font-size: var(--size-small);
  color: var(--ink-soft);
  white-space: nowrap;
  padding-top: 4px;
}

/* ------------------------------------------------------------ the hint
   under a form field. Used where a question needs a reason, like the
   directory consent on the claim form. */
.field__hint {
  font-size: var(--size-small);
  color: var(--ink-soft);
  margin-top: 8px;
  max-width: 46ch;
}

/* -------------------------------------------------------- the directory

   A filter bar, then one square card per person. Square corners and flat
   fills, like every other card on the site. The only rounded things here
   are the certification chips, which are lozenges and follow that rule. */
.dir__controls {
  display: grid;
  grid-template-columns: 2fr 1.2fr 1.2fr auto;
  gap: 16px;
  align-items: end;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--rule-on-light);
  margin-bottom: 22px;
}

.dir__controls .field { margin: 0; }

.dir__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
  margin-top: 18px;
}

.dir__person {
  border: 1px solid var(--rule-on-light);
  background: var(--white);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dir__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
}

.dir__track {
  flex: none;
  font-size: var(--size-small);
  color: var(--ink-soft);
  white-space: nowrap;
}

.dir__creds {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  margin-top: auto;
}

/* The chip is a link to that credential's public check. Fully rounded,
   because it is a lozenge, and these are the one place on the site where
   the count can pass six: they are data, not decoration. */
.dir__cred {
  display: inline-block;
  border-radius: 999px;
  padding: 7px 15px;
  font-size: var(--size-small);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  color: var(--black);
  background: var(--green-light);
  border: 1px solid transparent;
}

.dir__cred:hover,
.dir__cred:focus-visible { border-color: var(--green-dark); }

@media (max-width: 860px) {
  .dir__controls { grid-template-columns: 1fr 1fr; }
  .dir__controls > :last-child { grid-column: 1 / -1; justify-self: start; }
}

@media (max-width: 560px) {
  .dir__controls { grid-template-columns: 1fr; }
  .dir__list { grid-template-columns: 1fr; }
}

.field__input:focus-visible { outline: 3px solid var(--green-dark); outline-offset: 2px; }

.form__note { font-size: var(--size-small); color: var(--ink-soft); }
.form__note:empty { display: none; }

.form button[aria-disabled="true"] { opacity: 1; cursor: not-allowed; }


/* ---------- 17. Verify ---------- */

.verify-form { display: flex; flex-wrap: wrap; gap: 12px; max-width: 660px; margin-top: 30px; }

.verify-form input {
  flex: 1 1 300px;
  font: inherit;
  font-size: clamp(18px, 2vw, 22px);
  padding: 17px 26px;
  border: 2px solid var(--black);
  border-radius: 999px;
  background: var(--white);
  color: var(--black);
}

.verify-form input::placeholder { color: rgba(0, 0, 0, 0.55); }

.result { margin-top: clamp(36px, 4.5vw, 60px); }

.credential { background: var(--green-light); color: var(--black); }
.credential__body { padding: clamp(30px, 3.6vw, 52px); }

.credential__mark {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--size-small);
  font-weight: 600;
  margin-bottom: clamp(26px, 3vw, 38px);
}

.credential__tick {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--green-dark);
  display: grid;
  place-items: center;
  flex: none;
}

.credential__tick svg { width: 15px; height: 15px; }

.credential__name { font-size: clamp(30px, 4.4vw, 52px); font-weight: 600; line-height: 0.95; }
.credential__title { font-size: clamp(19px, 2vw, 24px); font-weight: 500; margin-top: 12px; }

.credential__rows { margin-top: clamp(30px, 3.6vw, 44px); border-top: 2px solid rgba(0, 0, 0, 0.25); }

.credential__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
  font-size: var(--size-small);
}

.credential__row dt { font-weight: 600; }
.credential__row dd { text-align: right; }

.credential__actions {
  margin-top: clamp(26px, 3vw, 38px);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.state { border: 1px solid var(--rule-on-light); border-top: 0; max-width: var(--measure); }
.state__body { padding: clamp(26px, 3.2vw, 40px); }

.copy-note { font-size: 13px; color: var(--ink-soft); }

/* ---------- 18. Lessons, gate and quizzes ---------- */

.lesson { border-top: 1px solid var(--rule-on-light); padding: clamp(24px, 2.8vw, 36px) 0; }
.lesson:last-of-type { border-bottom: 1px solid var(--rule-on-light); }

.lesson__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
}

/* Locked lessons are signaled by the lozenge, not by dimming. */
.lesson--locked .h3 { color: var(--ink-soft); }


/* ---------- Locked modules ----------
   The six certifications show placeholder bars with the sign-up panel over
   them. The bars carry no text: the real module list is fetched only after
   the form, so nothing about it is in the page to begin with. */

.locked { position: relative; }

.skeleton { display: flex; flex-direction: column; }

.skeleton__row {
  border-top: 1px solid var(--rule-on-light);
  padding: clamp(24px, 2.8vw, 36px) 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.skeleton__row:last-child { border-bottom: 1px solid var(--rule-on-light); }

.skeleton__bar { display: block; height: 12px; background: var(--rule-on-light); }
.skeleton__bar--meta { width: 128px; height: 10px; }
.skeleton__bar--title { width: min(60%, 340px); height: 20px; }
.skeleton__bar--line { width: min(78%, 460px); height: 12px; }

.locked__cta {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0 clamp(0px, 2vw, 24px);
}

.locked__cta > .framed { width: min(100%, 720px); }

/* Someone already through the form never needs the pitch, so it goes as
   early as the head script can mark the document. */
.is-unlocked .locked__cta { display: none; }

/* A contents row that leads somewhere. Same shape as a static lesson row,
   with the affordance of a link. */
a.lesson--link { text-decoration: none; color: inherit; display: block; transition: border-color .18s ease; }
a.lesson--link:hover { border-color: var(--black); }
a.lesson--link:hover .h3 { text-decoration: underline; text-underline-offset: 3px; }

.gate { background: var(--green-dark); color: var(--white); }

.gate__body {
  padding: clamp(30px, 3.6vw, 52px);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(20px, 3vw, 36px);
  align-items: center;
}

@media (max-width: 780px) { .gate__body { grid-template-columns: minmax(0, 1fr); } }

.quiz { background: var(--off-white); padding: clamp(24px, 2.8vw, 34px); margin-top: 26px; max-width: var(--measure); }
.section--offwhite .quiz, .section--lime .quiz { background: var(--white); }
.quiz__q { font-weight: 500; font-size: var(--size-body); }
.quiz__options { margin-top: 18px; display: grid; gap: 10px; }

.quiz__option {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--white);
  border: 1px solid var(--rule-on-light);
  padding: 14px 20px;
  cursor: pointer;
  font-size: var(--size-small);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.quiz__option:hover { border-color: var(--black); }
.quiz__option[data-state="right"] { background: var(--green-light); border-color: var(--green-dark); font-weight: 500; }
.quiz__option[data-state="wrong"] { border-color: var(--black); color: var(--ink-soft); text-decoration: line-through; }
.quiz__feedback { margin-top: 16px; font-size: var(--size-small); min-height: 1.5em; }

/* ---------- 19. Long form ---------- */

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 22px; }
.prose h2 { font-size: var(--size-h3); font-weight: 600; margin-top: clamp(44px, 5vw, 60px); line-height: 1.15; }
.prose ul { margin-top: 16px; }

/* ---------- Modals

   Square panel, flat, one green strip across the top, same as a card. The
   modal treatment is scoped to html.js so that without script the dialog
   falls back to an ordinary block on the page rather than vanishing. */

.modal {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: none;
  max-height: none;
  color: inherit;
}

/* The [open] here is load bearing. A dialog is hidden by the browser's own
   dialog:not([open]) rule, which any display declaration on .modal would
   outrank, leaving the form rendered into the page permanently. */
html.js .modal[open] {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  display: grid;
  place-items: center;
  padding: 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

html.js .modal[open]::backdrop { background: rgba(0, 0, 0, 0.55); }

.modal__panel {
  position: relative;
  width: 100%;
  max-width: 620px;
  background: var(--white);
  border: 1px solid var(--rule-on-light);
}

.modal__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(24px, 3.4vw, 38px);
}

/* 44px square, comfortably past the 24px minimum target size. */
.modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  font-size: 26px;
  line-height: 1;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--black);
  cursor: pointer;
}

.modal__close:hover { background: var(--green-light); }

/* Without script the dialog is just a section, so it needs to look like one
   and it does not need a close button for a modal that never opened. */
html:not(.js) .modal {
  display: block;
  margin: clamp(40px, 6vw, 80px) auto;
  max-width: 620px;
  padding: 0 var(--gutter);
}

html:not(.js) .modal__close { display: none; }

@media (prefers-reduced-motion: no-preference) {
  html.js .modal[open] .modal__panel { animation: modal-in 0.18s ease-out; }
}

@keyframes modal-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Folds

   The tutorial body, as native details and summary. Native because it is
   keyboard reachable and screen reader announced without a line of ARIA, and
   because it still opens if the script never loads. The h2 stays inside the
   summary so heading navigation is unaffected. */

.fold {
  border-top: 1px solid var(--rule-on-light);
  margin-top: 0;
}

.prose > .fold + .fold { margin-top: 0; }
.fold:last-of-type { border-bottom: 1px solid var(--rule-on-light); }

.fold__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
}

/* Both are needed: the pseudo-element for Safari, the property for the rest. */
.fold__head::-webkit-details-marker { display: none; }

.fold .fold__title {
  font-size: var(--size-h3);
  font-weight: 600;
  line-height: 1.15;
  margin: 0;
}

/* Chevron drawn in CSS rather than added to the icon set, because the body is
   a format string and cannot call icon(). */
.fold__head::after {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  margin-right: 4px;
  border-right: 2.2px solid var(--green-dark);
  border-bottom: 2.2px solid var(--green-dark);
  transform: translateY(-3px) rotate(45deg);
  transition: transform 0.18s ease;
}

.fold[open] > .fold__head::after { transform: translateY(2px) rotate(-135deg); }

.fold__head:hover .fold__title { color: var(--green-dark); }
.fold__head:focus-visible { outline: 3px solid var(--green-dark); outline-offset: 3px; }

.fold__body { padding-bottom: 30px; }
.fold__body > * + * { margin-top: 22px; }
.fold__body > ul { margin-top: 16px; }

/* The first child of an open fold should not double up the summary padding. */
.fold__body > :first-child { margin-top: 0; }

.fold-controls {
  display: flex;
  justify-content: flex-end;
  margin-top: 30px;
  margin-bottom: 10px;
}

@media (prefers-reduced-motion: reduce) {
  .fold__head::after { transition: none; }
}

.pull {
  border-top: 3px solid var(--green-dark);
  border-bottom: 3px solid var(--green-dark);
  padding: 30px 0;
  margin-top: clamp(36px, 4.5vw, 52px);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 500;
  line-height: 1.2;
}

/* ---------- 20. Utilities ---------- */

.center { text-align: center; margin-left: auto; margin-right: auto; }
.hidden { display: none !important; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
}

@media print {
  .header, .footer { display: none; }
}