/* ==========================================================================
   Redeeming Leadership Conference 2026
   Built from RLC-Web.ai — artboard 1454px wide, container 1092px, 181px margins.
   All type sizes and spacing derive from measurements in SPEC.md.
   Order: custom properties -> reset -> base -> layout -> components -> sections -> media
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Custom properties
   -------------------------------------------------------------------------- */
:root {
  /* palette — numbers match the design's markup strip */
  --color-green:   #375d4c;   /* 1 */
  --color-teal:    #497775;   /* 2 */
  --color-sage:    #637e77;   /* 3 */
  --color-gold:    #bd8648;   /* 4 */
  --color-offwhite:#efefef;   /* 5 */
  --color-white:   #ffffff;

  --color-bg:          var(--color-white);
  --color-text:        var(--color-green);
  --color-text-invert: var(--color-white);
  --color-accent:      var(--color-gold);
  --color-divider:     var(--color-offwhite);
  --color-footer-bg:   var(--color-offwhite);
  --color-footer-meta: #6b6b6b;   /* design #6d6d6d = 4.50:1, just under AA at 12px */

  /* the CTA / hero gradient, sampled across the artboard's bar */
  --gradient-band: linear-gradient(100deg,
    #5f7a71 0%, #335a48 20%, #43716e 40%,
    #578082 55%, #779192 70%, #365d4b 90%, #204a36 100%);

  /* fluid type — each ramps linearly from a 375px viewport to the 1454px artboard,
     where it reaches the exact design value. */
  --fs-body:     clamp(1rem,      0.8045rem + 0.8341vw, 1.5625rem); /* 16 -> 25 */
  --fs-lead:     clamp(1.375rem,  0.9840rem + 1.6682vw, 2.5rem);    /* 22 -> 40 */
  --fs-display:  clamp(1.75rem,   1.2721rem + 2.0389vw, 3.125rem);  /* 28 -> 50 */
  --fs-card:     clamp(1.1875rem, 0.9486rem + 1.0195vw, 1.875rem);  /* 19 -> 30 */
  --fs-tagline:  clamp(1.125rem,  0.7775rem + 1.4828vw, 2.125rem);  /* 18 -> 34 */
  --fs-date:     clamp(2.125rem,  1.5600rem + 2.4097vw, 3.75rem);   /* 34 -> 60 */
  --fs-venue:    clamp(0.75rem,   0.6197rem + 0.5561vw, 1.125rem);  /* 12 -> 18 */
  --fs-btn:      clamp(0.8125rem, 0.6790rem + 0.5561vw, 1.1875rem); /* 13 -> 19, see note */
  --fs-amount:   clamp(3rem,      2.2613rem + 3.1511vw, 5.125rem);  /* 48 -> 82 */
  --fs-currency: clamp(1.875rem,  1.4840rem + 1.6682vw, 3rem);      /* 30 -> 48 */
  --fs-earlybird:clamp(1.125rem,  0.8644rem + 1.1122vw, 1.875rem);  /* 18 -> 30 */
  --fs-until:    clamp(0.75rem,   0.6414rem + 0.4634vw, 1.0625rem); /* 12 -> 17 */
  --fs-meta:     0.75rem;                                            /* 12 */

  /* spacing — 6px base unit, 30px major rhythm (matches 25px/1.2 body leading) */
  --space-1:  0.375rem;  --space-2:  0.75rem;   --space-3:  1.125rem;
  --space-4:  1.5rem;    --space-5:  1.875rem;  --space-6:  2.25rem;
  --space-7:  2.625rem;  --space-8:  3rem;      --space-10: 3.75rem;
  --space-13: 4.875rem;  --space-15: 5.625rem;  --space-20: 7.5rem;
  --gap-head: 3.5625rem;  /* 57px: heading cap-bottom to first body line box */

  /* fluid section padding — 90px at artboard width */
  --pad-y:   clamp(2.75rem, 1.6rem + 4.9vw, 5.625rem);
  --gutter:  clamp(1.25rem, 4vw, 3rem);
  --measure: 68.25rem;   /* 1092px container */

  --focus: 3px solid var(--color-gold);

  /* film grain — measured amplitude sigma ~5.3/255 on the artboard */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* Avenir — Linotype/Monotype. Web-licensed for this site (confirmed 2026-07-29).
   Subset to Latin + common punctuation, WOFF2. Weight mapping follows the
   artboard: Medium 400, Heavy 700, Black 900. */
@font-face { font-family:'Avenir'; src:url('/fonts/avenir-medium.woff2') format('woff2');
             font-weight:400; font-style:normal;  font-display:swap; }
@font-face { font-family:'Avenir'; src:url('/fonts/avenir-medium-italic.woff2') format('woff2');
             font-weight:400; font-style:italic;  font-display:swap; }
@font-face { font-family:'Avenir'; src:url('/fonts/avenir-heavy.woff2') format('woff2');
             font-weight:700; font-style:normal;  font-display:swap; }
@font-face { font-family:'Avenir'; src:url('/fonts/avenir-heavy-italic.woff2') format('woff2');
             font-weight:700; font-style:italic;  font-display:swap; }
@font-face { font-family:'Avenir'; src:url('/fonts/avenir-black.woff2') format('woff2');
             font-weight:900; font-style:normal;  font-display:swap; }
@font-face { font-family:'Avenir'; src:url('/fonts/avenir-black-italic.woff2') format('woff2');
             font-weight:900; font-style:italic;  font-display:swap; }

/* Champion Featherweight — Hoefler & Co. Display face for section headings. */
@font-face { font-family:'Champion Featherweight'; src:url('/fonts/champion.woff2') format('woff2');
             font-weight:400; font-style:normal;  font-display:swap; }

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

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

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: 'Avenir', 'Avenir Next', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
ul { list-style: none; padding: 0; }
button { font: inherit; color: inherit; background: none; border: 0; }
a { color: inherit; }

:where(a, button, [tabindex]):focus-visible {
  outline: var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: fixed;
  left: var(--space-4);
  top: -4rem;
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  background: var(--color-white);
  color: var(--color-green);
  font-weight: 700;
  text-decoration: none;
  border-radius: 4px;
  transition: top .18s ease;
}
.skip-link:focus { top: var(--space-4); }

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

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
.container {
  width: min(var(--measure), 100% - (var(--gutter) * 2));
  margin-inline: auto;
}

.section { padding-block: var(--pad-y); position: relative; }

/* full-bleed photographic backgrounds */
.section__media,
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
/* <picture> is the img's containing block, so it must fill .section__media —
   without this, height:100% on the img has no definite parent height to
   resolve against and the image collapses to its natural aspect ratio,
   letting the section's fallback colour show through below it. */
.section__media picture,
.hero__media picture {
  display: block;
  width: 100%;
  height: 100%;
}
.section__media img,
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.section > .container { position: relative; z-index: 1; }

/* one grain texture across every surface that carries it in the design */
.hero::after,
.section--vision::after,
.cta::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: var(--grain);
  background-repeat: repeat;
  opacity: .16;
  mix-blend-mode: overlay;
}

/* --------------------------------------------------------------------------
   4. Typography
   -------------------------------------------------------------------------- */
.display {
  font-family: 'Champion Featherweight', 'Haettenschweiler', 'Arial Narrow', sans-serif;
  font-size: var(--fs-display);
  font-weight: 400;
  /* Champion cap-height is 0.8em; the artboard positions these headings by
     their caps, so the line box must hug them (0.82 = the 41px measured on a
     50px heading, including overshoot) rather than fill the 50px em box. */
  line-height: 0.82;
  letter-spacing: 0;              /* artboard tracking measured as zero */
  text-transform: uppercase;      /* markup stays natural-case for screen readers */
  margin: 0;
}
.display--center { text-align: center; }

/* colours previously baked into the outlined-SVG headings */
.section--vision  .display { color: var(--color-text-invert); }
.section--speaker .display { color: var(--color-text-invert); }
.section--audience .display { color: var(--color-accent); }

.prose > p + p { margin-top: var(--space-5); }    /* 30px = one blank line (design delta 60 incl. line) */
.prose p { line-height: 1.2; }
.prose strong { font-weight: 900; }
.prose em { font-style: italic; }
.prose--invert { color: var(--color-text-invert); }
.prose__lead { font-weight: 900; }
.prose__lead-italic { font-weight: 900; font-style: italic; }

.bullets { margin-top: var(--space-5); padding-left: var(--space-5); }
.bullets li { line-height: 1.2; }
.bullets li::before { content: '•'; margin-right: .5em; }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: .06em;
  white-space: nowrap;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

/* As drawn in the artboard: gold rule + gold label. */
.btn--outline {
  border: 2px solid var(--color-gold);
  color: var(--color-gold);
  font-size: var(--fs-btn);
  padding: clamp(.5rem, .35rem + .45vw, .6875rem) clamp(1rem, .55rem + 1.6vw, 1.75rem);
  min-height: 44px;   /* touch target */
}
.btn--outline:hover,
.btn--outline:focus-visible {
  background: var(--color-gold);
  color: var(--color-green);
}
.btn--sm { min-height: 44px; padding-block: .35rem; }
.btn--gold:hover,
.btn--gold:focus-visible { background: var(--color-gold); color: var(--color-white); }

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  background: var(--color-green);
  overflow: hidden;
}
.hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-block: clamp(1.5rem, .6rem + 3.8vw, 2.6875rem) clamp(2rem, .6rem + 6vw, 4.4375rem);
  color: var(--color-white);
}
.hero__nav { display: flex; gap: .625rem; }

.hero__logo {
  margin-top: clamp(2rem, .3rem + 7.2vw, 6.5rem);
  width: min(100%, 41.9375rem);   /* 671px at artboard */
}
.hero__logo img { width: 100%; height: auto; }

.hero__tagline {
  margin-top: clamp(1.5rem, .3rem + 5vw, 4.375rem);
  font-size: var(--fs-tagline);
  font-weight: 700;
}
.hero__tagline em { font-style: italic; }

.hero__date {
  margin-top: clamp(1.25rem, .3rem + 4vw, 3.5rem);
  font-size: var(--fs-date);
  font-weight: 900;
  color: var(--color-gold);
  text-transform: uppercase;
  line-height: 1;
}
.hero__venue {
  margin-top: clamp(.5rem, .3rem + .9vw, 1.125rem);
  font-size: var(--fs-venue);
  font-weight: 900;
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* --------------------------------------------------------------------------
   7. Sections
   -------------------------------------------------------------------------- */

/* 2 — Mission (gold band) */
.section--mission { background: var(--color-gold); color: var(--color-white); }
.mission__text { font-size: var(--fs-lead); font-weight: 700; line-height: 1.2; }
.mission__text em { font-style: italic; }

/* 3 — Pull quote */
.section--quote { text-align: center; }
.quote__text {
  font-size: var(--fs-lead);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-green);
}

/* 4 / 8 / 12 — CTA bars */
.cta {
  position: relative;
  isolation: isolate;
  background: var(--gradient-band);
  padding-block: clamp(1.75rem, 1rem + 3.2vw, 3.125rem);
}
.cta__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, .4rem + 2.6vw, 1.5rem);
}
.cta__price {
  display: flex;
  align-items: baseline;
  gap: .25rem;
  color: var(--color-offwhite);
  line-height: 1;
}
.cta__currency { font-size: var(--fs-currency); font-weight: 900; color: var(--color-gold); }
.cta__amount   { font-size: var(--fs-amount);   font-weight: 900; letter-spacing: -.02em; }
.cta__terms    { display: flex; flex-direction: column; margin-left: .375rem; align-self: center; }
.cta__label    { font-size: var(--fs-earlybird); font-weight: 900; line-height: 1.1; }
.cta__until    { font-size: var(--fs-until); font-weight: 700; }

/* 5 — Why */
.section--why .prose { margin-top: var(--gap-head); }

/* 6 — Vision */
.section--vision {
  position: relative;
  isolation: isolate;
  background: var(--color-sage);
  color: var(--color-text-invert);
  overflow: hidden;
}
.section--vision .prose { margin-top: var(--gap-head); }
.vision__list { margin-top: var(--space-6); padding-left: var(--space-5); }
.vision__list li { line-height: 1.44; }        /* measured: 36px on 25px */
.vision__list li::before { content: '•'; margin-right: .5em; }
.vision__list strong { font-weight: 700; }

/* 7 — Audience */
.section--audience { position: relative; overflow: hidden; }
.audience__watermark {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -46%;
  width: clamp(9rem, 17.9vw, 16.3125rem);
  height: auto;
  z-index: 0;
  pointer-events: none;
}
.audience__grid {
  position: relative;
  z-index: 1;
  margin-top: var(--space-7);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6) clamp(1rem, -1.5rem + 8vw, 6.75rem);
}
.audience__card {
  text-align: center;
  font-size: var(--fs-card);
  font-weight: 700;
  line-height: 1.37;
}
/* the artboard sets each card's text on a narrow measure so it breaks to two
   balanced lines; without this the copy runs the full column width */
.audience__card p { margin-inline: auto; text-wrap: balance; }
.audience__card--wide p { max-width: 34.375rem; }  /* 550px, artboard */
.audience__icon {
  width: clamp(2.75rem, 1.9rem + 3.6vw, 3.75rem);
  height: auto;
  margin: 0 auto var(--space-2);
}

/* 9 — Experience */
.section--experience .prose { margin-top: var(--gap-head); }
.divider {
  border: 0;
  border-top: 3px solid var(--color-divider);
  margin-block: clamp(2rem, .8rem + 5vw, 4.5rem);
}

/* Tabs */
.tabs { margin-top: clamp(1.5rem, .5rem + 3.3vw, 3rem); }
.tabs__list { display: flex; }
.tabs__tab {
  flex: 1 1 0;
  padding: clamp(.875rem, .25rem + 2.7vw, 2rem) clamp(1rem, .2rem + 3.4vw, 3.6875rem);
  font-size: var(--fs-lead);
  font-weight: 700;
  text-align: left;
  color: var(--color-green);
  background: var(--color-white);
  border-radius: 20px 20px 0 0;
  cursor: pointer;
  min-height: 44px;
  transition: background-color .18s ease;
}
.tabs__tab[aria-selected='true'] { background: var(--color-offwhite); }
.tabs__tab:hover:not([aria-selected='true']) { background: #f7f7f7; }

.tabs__panel {
  background: var(--color-offwhite);
  border-radius: 0 0 20px 20px;
  padding: clamp(.75rem, .6rem + .2vw, .75rem) clamp(1.5rem, .5rem + 4vw, 3.75rem) clamp(1.5rem, .45rem + 4.1vw, 3.625rem);
}
/* the active tab merges into the panel, as drawn */
.tabs__list:has(.tabs__tab:first-child[aria-selected='true']) + .tabs__panel { border-top-left-radius: 0; }
.tabs__list:has(.tabs__tab:last-child[aria-selected='true'])  + .tabs__panel { border-top-right-radius: 0; }
.tabs__panel > p + p { margin-top: var(--space-5); }
.tabs__panel p { line-height: 1.2; }
.tabs__panel strong { font-weight: 900; }
.tabs__when { font-style: italic; }
.tabs__placeholder { font-style: italic; color: #55705f; }

/* 10 — Speaker */
/* Stacked, the sage band closes with the same breathing room it opens with,
   so the photo sits *in* the band rather than being cropped by its edge. At
   >=900px the photo is stretched to the band edges by design, so this is
   reset to 0 there. */
.section--speaker { background: var(--color-sage); color: var(--color-text-invert); padding-block: 0 var(--pad-y); }
.speaker__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
/* Stacked, the row-gap alone separates bio from photo. The body's bottom
   padding is there to set the band height in the two-column layout; on mobile
   it stacked on top of the gap and pushed the photo ~74px off the bio — well
   clear of the 44px above the heading, so the photo read as detached. It is
   restored at >=900px, where the columns sit side by side. */
.speaker__body { padding-block: var(--pad-y) 0; }
.speaker__name { display: flex; flex-wrap: wrap; align-items: baseline; gap: .625rem; }
.speaker__role {
  font-family: 'Avenir', 'Avenir Next', Helvetica, Arial, sans-serif;
  font-size: var(--fs-body);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
.speaker__body p { margin-top: var(--gap-head); line-height: 1.2; }
.speaker__body a { text-decoration: underline; text-underline-offset: 3px; }
.speaker__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }

/* 11 — Better Together */
.section--together .prose { margin-top: var(--gap-head); }

/* 13 — Contact */
.section--contact { padding-block: clamp(2rem, .9rem + 4.6vw, 4.0625rem); }
.contact__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1rem, .4rem + 2.4vw, 1.5rem);
}
.contact__text { font-size: var(--fs-lead); font-weight: 400; line-height: 1.2; }
.contact__text strong { font-weight: 900; }

/* 14 — Footer */
.footer {
  background: var(--color-footer-bg);
  padding-block: clamp(2rem, .8rem + 5vw, 4.5rem);
  text-align: center;
}
.footer__logo { width: clamp(9.375rem, 6rem + 14vw, 15.0625rem); height: auto; margin: 0 auto; }
.footer__copy {
  margin-top: clamp(1.5rem, .5rem + 4vw, 3.5625rem);
  font-size: var(--fs-meta);
  color: var(--color-footer-meta);
}

/* --------------------------------------------------------------------------
   8. Scroll reveal
   `.reveal` is fully visible in CSS. JS "arms" ONLY those elements that are
   already below the fold — never anything on screen — so if JS fails, if
   IntersectionObserver never fires, or if the page is captured/printed
   without scrolling, no content is ever hidden.
   -------------------------------------------------------------------------- */
.reveal { transition: opacity .6s ease, transform .6s ease; }
.reveal--armed { opacity: 0; transform: translateY(18px); will-change: opacity, transform; }
.reveal.is-visible { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   9. Media queries — mobile-first, layering up to artboard fidelity
   -------------------------------------------------------------------------- */
@media (min-width: 48rem) {              /* 768px — tablet */
  .audience__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10) clamp(1rem, -1.5rem + 8vw, 6.75rem);
  }
  .audience__card--wide { grid-column: 1 / -1; }
  .contact__inner { flex-wrap: nowrap; }
}

@media (min-width: 56.25rem) {           /* 900px — speaker splits */
  /* photo is stretched flush to the band edges again — no bottom padding */
  .section--speaker { padding-block: 0; }
  .section--speaker .speaker__grid {
    grid-template-columns: minmax(0, 534fr) 503fr;
    column-gap: 3.4375rem;               /* 55px at artboard */
    align-items: stretch;
  }
  /* side by side again — the bottom padding defines the band height here */
  .speaker__body { text-align: right; padding-block: var(--pad-y); }
  /* artboard bio box is 501px wide, flush right at x713 — not the full cell */
  .speaker__body p { max-width: 31.3125rem; margin-left: auto; }
  .speaker__name { justify-content: flex-end; }
  /* the photo is 503x547 native but the artboard band is 540 tall — let the
     text column define the row height and clip the photo to it, otherwise the
     image's intrinsic height drives the section and padding has no effect */
  .speaker__photo { align-self: stretch; position: relative; overflow: hidden; }
  .speaker__photo picture,
  .speaker__photo img { position: absolute; inset: 0; width: 100%; height: 100%; }
}

@media (min-width: 64rem) {              /* 1024px */
  .hero__inner { padding-bottom: clamp(2.5rem, .6rem + 6vw, 4.4375rem); }
}

@media (min-width: 90.875rem) {          /* 1454px — artboard fidelity target.
     Every value below is measured from the artboard. With the design's own
     Avenir and Champion Featherweight in use, section heights land within 2px
     of the artboard and the whole page within 4px. */

  /* hero — nav 43 / logo 160 / tagline 542 / date 651 / venue 690 / end 788 */
  .hero__inner   { padding-block: 2.6875rem 6.1875rem; }  /* 43 / 99 */
  .hero__logo    { margin-top: 4.625rem; }                /* 74 */
  .hero__tagline { margin-top: 2.375rem; }                /* 38 */
  .hero__date    { margin-top: 2.75rem; }                 /* 44 */
  .hero__venue   { margin-top: 0.5625rem; }               /* 9  */

  .section--mission  { padding-block: 3.0625rem 3.6875rem; }  /* 49 / 59 */
  .section--quote    { padding-block: 2.9375rem 5.0625rem; }  /* 47 / 81 */
  .cta               { padding-block: 1.9375rem; }            /* 31 -> 144 tall */
  .section--why      { padding-block: 5.4375rem 10.4375rem; } /* 87 / 167 */
  .section--vision   { padding-block: 3.8125rem 2.75rem; }    /* 61 / 44 */
  .section--audience { padding-block: 5.875rem 5.5rem; }      /* 94 / 88 */
  .section--experience { padding-block: 5.625rem 5.4375rem; } /* 90 / 87 */
  .section--together { padding-block: 5.3125rem 5.0625rem; }  /* 85 / 81 */
  .section--contact  { padding-block: 3.8125rem 4.8125rem; }  /* 61 / 77 */
  .footer            { padding-block: 2.8125rem 3rem; }       /* 45 / 48 */

  .audience__grid {
    margin-top: 2.0625rem; row-gap: 1.75rem;                  /* 33 / 28 */
    /* artboard puts the two card centres 437px apart, i.e. +/-218.5 from the
       page axis — narrower than an even split of the 1092 container */
    max-width: 49.8125rem; margin-inline: auto; column-gap: 4.8125rem;
  }
  .audience__icon { margin-bottom: 0.125rem; }                  /* 2 */
  .divider        { margin: 4.3125rem 0 4.0625rem; }             /* 69 / 65 */
  #expect-h + .prose { margin-top: 2.4375rem; }                 /* 39, not 57 */
  .tabs           { margin-top: 2.8125rem; }                     /* 45 */
  .speaker__body  { padding-block: 3.875rem 3.125rem; }          /* 62 / 50 */
  .footer__copy   { margin-top: 2.0625rem; }                     /* 33 */
}

/* --------------------------------------------------------------------------
   10. Reduced motion — non-negotiable
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .reveal--armed { opacity: 1 !important; transform: none !important; }
}

/* --------------------------------------------------------------------------
   11. Print
   -------------------------------------------------------------------------- */
@media print {
  .hero__media, .section__media, .audience__watermark { display: none; }
  .hero, .section--vision, .section--speaker, .cta { background: none; color: #000; }
  .reveal, .reveal--armed { opacity: 1 !important; transform: none !important; }
}