/**
 * Stylesheet: AAiX — From Idea to Launch in 24 Hours (webinar landing page)
 * Purpose: Presentation layer for index.html
 * Department: Tech & Development
 * Last Updated: 2026-08-25
 *
 * Structure
 *   1.  Tokens
 *   2.  Reset & base
 *   3.  Layout primitives
 *   4.  Typography utilities
 *   5.  Buttons
 *   6.  Icons
 *   7.  Decorative gold arcs
 *   8.  Header & navigation
 *   9.  Hero
 *   10. Value bar
 *   11. About + host
 *   12. Curriculum
 *   13. Who it's for
 *   14. Testimonials
 *   15. FAQ
 *   16. Closing CTA
 *   17. Footer
 *   18. Responsive
 *   19. Legal pages
 *   20. Registration modal
 *   21. Carousel
 *   22. Mobile composition
 *   23. Small screens
 *   24. Motion & print preferences
 */

/* ============================================================ 1. Tokens */

:root {
  /* Brand — this page runs the AAiX dark/gold treatment.
     Blue/orange from BRANDING_KIT.md remain the product-UI palette. */
  /* Gold matches the master logo artwork and aaix-thank-you-page. */
  --gold: #febf10;
  --gold-bright: #ffd24a;
  --gold-deep: #d9a00a;

  --black: #050505;
  --surface-0: #0a0a0a;
  --surface-1: #0e0e0e;
  --surface-2: #121212;
  --card: #101010;

  --text: #ffffff;
  --muted: #a6a6a6;
  --muted-dim: #7a7a7a;

  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.16);
  --line-gold: rgba(254, 191, 16, 0.3);

  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(20px, 4vw, 64px);
  --shell: 1320px;
  --radius: 6px;
  --radius-lg: 10px;

  --section-y: clamp(56px, 7vw, 104px);
  --header-h: 76px;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================ 2. Reset & base */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--surface-0);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

img,
svg,
picture {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 200;
  padding: 10px 18px;
  background: var(--gold);
  color: #111;
  font-weight: 700;
  border-radius: var(--radius);
  transition: top 0.2s var(--ease);
}

.skip-link:focus {
  top: 16px;
}

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

/* ============================================================ 3. Layout primitives */

.shell {
  width: min(100% - (var(--gutter) * 2), var(--shell));
  margin-inline: auto;
}

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

.section--alt {
  background: var(--surface-1);
}

.section--edge {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* Composed to hold one screen: the content is centred in the viewport rather
   than spread to fill it, and min-height (never height) means a tall copy
   block or a short laptop grows the section instead of clipping it.
   svh over dvh: dvh reflows the whole section as mobile browser chrome
   slides away. Dropped back to auto once the layout stacks — see section 18. */
.section--viewport {
  display: grid;
  align-content: center;
  min-height: 100vh;
  min-height: 100svh;
  /* Tighter than --section-y: on a tall screen the centring supplies the
     breathing room, so the padding is only doing work on the short laptops
     where every pixel it takes is a pixel over one screen. */
  padding-block: clamp(48px, 5vw, 80px);
}

/* Column grid with hairline dividers between cells (the value bar and
   curriculum both use it; the dividers vanish once the grid wraps). */
.divided {
  display: grid;
  gap: 0;
}

.divided > * {
  padding-inline: clamp(16px, 2.4vw, 34px);
  border-left: 1px solid var(--line);
}

.divided > *:first-child {
  border-left: 0;
}

/* ============================================================ 4. Typography utilities */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 20px;
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1.4;
}

.eyebrow--center {
  justify-content: center;
}

/* The FAQ label leads its section rather than whispering above it, so this one
   eyebrow takes display type. Every other section keeps the 0.72rem token. */
.eyebrow--display {
  margin-bottom: 12px;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6.5vw, 4rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.08em;
  /* Letter-spacing trails the last glyph, which drags a centred line off axis;
     the indent puts that space back on the left. */
  text-indent: 0.08em;
}

.eyebrow__dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--gold);
}

.display {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.5rem, 6.1vw, 5.4rem);
  line-height: 0.94;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.section-title {
  font-size: clamp(1.6rem, 3vw, 2.45rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.section-title--center {
  text-align: center;
  font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2.15rem);
}

.gold {
  color: var(--gold);
}

.lede {
  color: var(--muted);
  font-size: 1.0625rem;
  line-height: 1.7;
}

.rule {
  width: 64px;
  height: 3px;
  background: var(--gold);
  border: 0;
  margin: 0;
}

.section-head {
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: clamp(38px, 4.5vw, 60px);
}

/* ============================================================ 5. Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 17px 26px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease),
    color 0.2s var(--ease), transform 0.2s var(--ease);
}

.btn .icon {
  flex: 0 0 auto;
}

.btn--primary {
  background: var(--gold);
  color: #111;
}

.btn--primary:hover {
  background: var(--gold-bright);
  transform: translateY(-1px);
}

.btn--primary:active {
  background: var(--gold-deep);
  transform: none;
}

.btn--ghost {
  border-color: var(--line-strong);
  color: var(--text);
}

.btn--ghost:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.btn--outline {
  padding: 12px 20px;
  border-color: var(--gold);
  color: var(--gold);
  font-size: 0.75rem;
}

.btn--outline:hover {
  background: var(--gold);
  color: #111;
}

.btn--lg {
  padding: 21px 34px;
  font-size: 0.875rem;
}

.btn--block {
  width: 100%;
}

/* ============================================================ 5b. Calendar menu */

.calendar-menu {
  position: relative;
  display: inline-block;
}

.calendar-menu__list {
  position: absolute;
  top: 100%;
  right: 0;
  margin: 8px 0 0 0;
  padding: 8px 0;
  list-style: none;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
  min-width: 160px;
  z-index: 10;
}

.calendar-menu__link {
  display: block;
  padding: 12px 16px;
  color: var(--text);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}

.calendar-menu__link:hover {
  background: var(--surface-2);
  color: var(--gold);
}

.calendar-menu__divider {
  margin: 6px 0;
  border-top: 1px solid var(--line);
}

/* Phones and tablets never see the menu — the button downloads the .ics
   directly (main.js). Kept in CSS too so a stale open state cannot survive a
   resize or an orientation change. Breakpoint matches COMPACT in main.js. */
@media (max-width: 1024px) {
  .calendar-menu__list {
    display: none;
  }
}

/* ============================================================ 6. Icons */

.icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon--lg {
  width: 40px;
  height: 40px;
  stroke-width: 1.3;
}

.icon--md {
  width: 30px;
  height: 30px;
  stroke-width: 1.4;
}

.icon--sm {
  width: 16px;
  height: 16px;
}

.icon--solid {
  fill: currentColor;
  stroke: none;
}

/* ============================================================ 7. Decorative gold arcs */

.arcs {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.arcs__ring {
  position: absolute;
  border: 1.5px solid var(--gold);
  border-radius: 50%;
  opacity: 0.55;
}

/* The hero has no arcs overlay: its artwork already carries them. */

/* Closing band: sweeps anchored to both outer edges. */
.arcs--band .arcs__ring {
  aspect-ratio: 1;
  width: clamp(340px, 38vw, 640px);
}

.arcs--band .arcs__ring:nth-child(1) {
  left: -20%;
  top: -58%;
  opacity: 0.75;
}

.arcs--band .arcs__ring:nth-child(2) {
  left: -14%;
  top: -32%;
  opacity: 0.4;
}

.arcs--band .arcs__ring:nth-child(3) {
  right: -18%;
  bottom: -62%;
  opacity: 0.7;
}

.arcs--band .arcs__ring:nth-child(4) {
  right: -12%;
  bottom: -36%;
  opacity: 0.36;
}

/* ============================================================ 8. Header & navigation */

/* Transparent at rest so the hero art reads through it (the hero reaches up
   behind this band — see section 9), solid once the page scrolls away from it. */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease),
    backdrop-filter 0.25s var(--ease);
}

/* A scrim rather than a bar: enough to hold the wordmark and nav legible over
   the artwork without covering it. Fades out as the solid bar fades in, so the
   two states cross over instead of the gradient snapping off. */
.header::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(5, 5, 5, 0.72) 0%,
    rgba(5, 5, 5, 0.34) 62%,
    rgba(5, 5, 5, 0) 100%
  );
  transition: opacity 0.25s var(--ease);
}

.header.is-stuck {
  background: rgba(6, 6, 6, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}

.header.is-stuck::before {
  opacity: 0;
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  min-height: var(--header-h);
  position: relative;
  /* Above the scrim pseudo-element. */
  z-index: 1;
}

.header__inner .brand {
  position: absolute;
  left: 0;
}

.brand {
  display: block;
  flex: 0 0 auto;
  /* Vertical padding lifts the wordmark to a usable touch target. */
  padding-block: 6px;
}

.brand__mark {
  width: auto;
  height: 34px;
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 38px);
}

/* Wordmark left, links centred, CTA right. The CTA is lifted out of the
   centred group so the links stay optically centred in the header; on mobile
   it drops back into the nav panel (section 18). */
.nav .btn--outline {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.nav__link {
  position: relative;
  padding-block: 6px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  transition: color 0.2s var(--ease);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1.5px;
  background: var(--gold);
  transition: width 0.25s var(--ease);
}

.nav__link:hover,
.nav__link[aria-current="true"] {
  color: var(--text);
}

.nav__link:hover::after,
.nav__link[aria-current="true"]::after {
  width: 100%;
}

.nav-toggle {
  display: none;
  padding: 8px;
  margin-right: -8px;
  color: var(--text);
}

.nav-toggle .icon {
  width: 24px;
  height: 24px;
}

.nav-toggle__close {
  display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__open {
  display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__close {
  display: block;
}

/* ============================================================ 9. Hero */

/* The artwork is a single 16:9 scene — dark on the left for the copy, subject
   and skyline on the right. It therefore bleeds across the whole section and
   the copy sits on top of it, rather than the photo taking its own column.
   The empty second track reserves the right half for the subject. */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  /* Reach up under the transparent header so the artwork runs behind it, then
     pad the copy back down clear of the bar. The media is positioned against
     the padding box, so it fills the reclaimed band too. The 1px is the
     header's own hairline border, which sits outside --header-h. */
  margin-top: calc((var(--header-h) + 1px) * -1);
  padding-top: calc(var(--header-h) + 1px);
  /* One full screen, so the fold lands on the hero's bottom edge. svh keeps
     mobile browser chrome from cropping it. */
  min-height: 100vh;
  min-height: 100svh;
  background: var(--black);
  overflow: hidden;
}

.hero__content {
  position: relative;
  z-index: 1;
  grid-column: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(22px, 2.4vw, 32px);
  padding: clamp(48px, 6vw, 96px) clamp(28px, 4vw, 64px)
    clamp(48px, 6vw, 90px) var(--gutter);
  /* Keep the copy block aligned with the header's left gutter. */
  max-width: calc(var(--shell) / 2 + var(--gutter));
  margin-left: auto;
  width: 100%;
}

.hero__title .display {
  display: block;
}

.hero__lede {
  max-width: 45ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px clamp(18px, 2.2vw, 34px);
  padding-top: 4px;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.88);
}

.meta-item .icon {
  color: var(--gold);
  width: 17px;
  height: 17px;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

/* The <picture> wrapper is inline by default, which leaves the image's
   height: 100% with nothing to resolve against. */
.hero__media picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Centred: at hero proportions the scene crops only slightly, and the
     subject already sits right of centre, clear of the copy column. */
  object-position: center;
}

/* Contrast insurance over the copy, and a short fade into the next section.
   Both stay light — the artwork is already near-black on the left, and a
   deeper bottom fade would swallow the gold arcs in the corner. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
      95deg,
      rgba(5, 5, 5, 0.92) 0%,
      rgba(5, 5, 5, 0.55) 32%,
      rgba(5, 5, 5, 0) 60%
    ),
    linear-gradient(to top, rgba(5, 5, 5, 0.7) 0%, rgba(5, 5, 5, 0) 14%);
}

/* ============================================================ 10. Value bar */

.value-bar {
  grid-template-columns: repeat(4, 1fr);
  padding-block: clamp(38px, 4.4vw, 60px);
}

.value {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

.value__icon {
  color: var(--gold);
}

.value__title {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1.45;
}

.value__text {
  max-width: 26ch;
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.6;
}

/* ============================================================ 11. About + host */

/* Video takes ~55% of the row, the copy ~45%, per the comp. The row is held
   inside the shell as well: at the full 1320px the video grows past the point
   where it reads as a partner to the copy rather than the subject of the
   section, and this also brings the row's edges in line with the host card. */
.about {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(32px, 4.4vw, 64px);
  align-items: center;
  max-width: 1260px;
  margin-inline: auto;
}

.about__media {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* 16:9 so the footage fills the frame rather than being letterboxed inside
   it, which is what object-fit is doing here.
   height: auto is load-bearing — the element's height attribute is a
   presentational hint, and leaving it resolved makes aspect-ratio moot. */
.about__img,
.about__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #000;
}

.about__novideo {
  padding: 24px;
  color: var(--muted);
  text-align: center;
}

.about__novideo a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--gold);
}

/* Hand the surface back to the native controls once playback begins. */
.play[hidden] {
  display: none;
}

.play__ring {
  display: grid;
  place-items: center;
  width: clamp(64px, 7vw, 88px);
  aspect-ratio: 1;
  border: 2px solid var(--gold);
  border-radius: 50%;
  background: rgba(5, 5, 5, 0.28);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transition: background-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.play__ring .icon {
  width: 30%;
  height: 30%;
  margin-left: 12%;
}

.play:hover .play__ring {
  background: rgba(254, 191, 16, 0.18);
  transform: scale(1.06);
}

/* Capped measure, so the heading keeps its three-line wrap and the copy
   never runs to an uncomfortable line length on a wide screen. */
.about__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 560px;
}

.about__body .lede + .lede {
  margin-top: -2px;
}

/* Sized by its label, not by the column: a gold bar spanning the full measure
   reads as a banner rather than a button. */
.about__cta {
  align-self: start;
  margin-top: clamp(4px, 1vw, 10px);
}

.about__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px clamp(18px, 2.2vw, 34px);
  margin-top: 2px;
}

/* Supporting detail under the CTA, so the gold stays on the button. */
.about__meta .icon {
  color: var(--muted);
}

.host {
  display: grid;
  grid-template-columns: auto minmax(0, 260px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  max-width: 1140px;
  margin: clamp(40px, 5vw, 68px) auto 0;
  padding: clamp(22px, 2.6vw, 32px);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.host__photo {
  width: clamp(96px, 10vw, 124px);
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--line-strong);
}

.host__label {
  margin-bottom: 8px;
}

.host__name {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.2vw, 1.9rem);
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 1.05;
}

.host__role {
  margin-top: 6px;
  color: var(--muted-dim);
  font-size: 0.8125rem;
}

.host__bio {
  padding-left: clamp(20px, 2.4vw, 34px);
  border-left: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.65;
}

/* ============================================================ 12. Curriculum */

.curriculum {
  grid-template-columns: repeat(5, 1fr);
}

.step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding-top: 34px;
  text-align: center;
}

.step__num {
  position: absolute;
  top: -8px;
  left: clamp(0px, 0.8vw, 12px);
  font-family: var(--font-display);
  font-size: clamp(4rem, 6vw, 5.6rem);
  font-weight: 900;
  line-height: 0.8;
  color: rgba(255, 255, 255, 0.1);
  pointer-events: none;
  user-select: none;
}

.step__icon {
  position: relative;
  color: var(--gold);
}

.step__title {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
}

.step__text {
  max-width: 24ch;
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.6;
}

/* ============================================================ 13. Who it's for */

.audience {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.audience__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(22px, 2.4vw, 28px);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  text-align: center;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.audience__card:hover {
  border-color: var(--line-gold);
  transform: translateY(-2px);
}

.audience__icon {
  color: var(--gold);
  margin-bottom: 16px;
}

.audience__title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
}

.audience__text {
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.6;
}

/* ============================================================ 14. Testimonials */

.quotes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.quote {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(22px, 2.4vw, 30px);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.quote__mark {
  color: var(--gold);
  width: 26px;
  height: 26px;
}

.quote__text {
  flex: 1;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.9);
}

.stars {
  display: flex;
  gap: 3px;
  color: var(--gold);
}

.quote__cite {
  font-style: normal;
}

.quote__name {
  font-size: 0.875rem;
  font-weight: 700;
}

.quote__role {
  color: var(--muted-dim);
  font-size: 0.75rem;
}

/* ============================================================ 15. FAQ */

/* Cards, not hairline rows. The section sits between the testimonial band and
   the closing CTA, where a flat list of dividers reads as the quietest thing
   on the page; lifting each item onto --card gives the block enough weight to
   hold its own. It cannot take --section--alt to do that, because the
   testimonials above already use that surface and the two would fuse. */
.faq {
  max-width: 880px;
  margin-inline: auto;
  display: grid;
  gap: 12px;
}

.faq__item {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: border-color 0.2s var(--ease);
}

.faq__item:hover,
.faq__item:has(.faq__trigger[aria-expanded="true"]) {
  border-color: var(--line-gold);
}

.faq__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: clamp(18px, 2vw, 24px) clamp(18px, 2.2vw, 28px);
  text-align: left;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.45;
  transition: color 0.2s var(--ease);
}

.faq__trigger:hover {
  color: var(--gold);
}

/* Same round chip as the footer social links, so the affordance reads as one
   family across the page. */
.faq__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--gold);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.faq__trigger:hover .faq__chip,
.faq__trigger[aria-expanded="true"] .faq__chip {
  border-color: var(--line-gold);
  background: rgba(254, 191, 16, 0.08);
}

.faq__sign {
  position: relative;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  color: var(--gold);
}

.faq__sign::before,
.faq__sign::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 1.5px;
  background: currentColor;
  transform: translateY(-50%);
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}

.faq__sign::after {
  transform: translateY(-50%) rotate(90deg);
}

.faq__trigger[aria-expanded="true"] .faq__sign::after {
  transform: translateY(-50%) rotate(0deg);
  opacity: 0;
}

.faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s var(--ease);
}

.faq__panel[data-open="true"] {
  grid-template-rows: 1fr;
}

.faq__panel > div {
  overflow: hidden;
}

.faq__answer {
  padding: 0 clamp(18px, 2.2vw, 28px) clamp(18px, 2vw, 24px);
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.7;
  max-width: 68ch;
}

/* ============================================================ 16. Closing CTA */

.band {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #0d0d0d 0%, #080808 100%);
  border-top: 1px solid var(--line);
}

.band__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
  align-items: center;
  gap: clamp(30px, 4vw, 60px);
  padding-block: clamp(48px, 5.6vw, 78px);
}

.band__headline {
  font-size: clamp(1.7rem, 3.1vw, 2.6rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.015em;
}

.band__headline span {
  display: block;
}

.band__headline .gold {
  margin-top: 0.34em;
}

.band__panel {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-left: clamp(0px, 3vw, 52px);
  border-left: 1px solid var(--line);
}

.band__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px clamp(16px, 2vw, 26px);
}

.band__note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.8125rem;
}

.band__note .icon {
  color: var(--gold);
}

/* ============================================================ 17. Footer */

.footer {
  background: var(--black);
  border-top: 1px solid var(--line);
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px clamp(24px, 4vw, 56px);
  padding-block: 30px;
}

.footer__brand {
  display: flex;
  align-items: center;
  gap: 20px;
}

.footer__mark {
  width: auto;
  height: 46px;
}

.footer__brand .brand {
  padding-block: 10px;
}

.footer__tagline {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px clamp(18px, 2.4vw, 32px);
}

.footer__links a {
  display: inline-flex;
  align-items: center;
  /* Padding, not height, so these clear the ~44px touch target. */
  padding-block: 12px;
  color: var(--muted);
  font-size: 0.8125rem;
  transition: color 0.2s var(--ease);
}

.footer__links a:hover {
  color: var(--gold);
}

.footer__social {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 40px square clears the touch target on its own, so unlike the legal links
   these carry no extra padding-block. */
.footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--muted);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.footer__social-link:hover,
.footer__social-link:focus-visible {
  color: var(--gold);
  border-color: var(--gold);
}

.footer__copy {
  color: var(--muted-dim);
  font-size: 0.8125rem;
}

/* ============================================================ 18. Responsive */

/* Hero buttons. 1280px is where the copy column finally gives the pair the
   ~536px they need to sit side by side; below it they wrap, so they stack and
   share one width instead of ending up two different sizes.

   Sharing a single row cannot make them equal: flexbox floors each item at
   its min-content before distributing what is left, so the gap between the
   two label widths survives, and forcing it away overflows the longer label.
   Stacking sidesteps that entirely.

   .hero__content is a column flex with align-items: flex-start, so the row
   needs align-self to stretch at all — without it there is no free space to
   share. The max-width stops the stacked pair spanning a whole tablet, and
   .calendar-menu is the flex item rather than the button it wraps, so the
   wrapper carries the basis and the button inside fills it. */
@media (max-width: 1279px) {
  .hero__actions {
    align-self: stretch;
    max-width: 460px;
  }

  .hero__actions .btn,
  .hero__actions .calendar-menu {
    flex: 1 1 100%;
  }

  .hero__actions .calendar-menu .btn {
    width: 100%;
  }
}

@media (max-width: 1080px) {
  .curriculum {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 40px;
  }

  /* Dividers only make sense within a row once the grid wraps. */
  .curriculum > :nth-child(3n + 1) {
    border-left: 0;
  }

  .audience {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  :root {
    --header-h: 66px;
  }

  .nav-toggle {
    display: block;
    /* Sole in-flow item in a centred header, so push it to the right edge. */
    margin-left: auto;
  }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gutter) 28px;
    background: rgba(6, 6, 6, 0.98);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.22s var(--ease), transform 0.22s var(--ease),
      visibility 0.22s;
  }

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

  .nav__link {
    padding: 16px 0;
    font-size: 0.8125rem;
    border-bottom: 1px solid var(--line);
  }

  .nav__link::after {
    display: none;
  }

  /* Back into the flow of the nav panel, undoing the desktop right-pinning. */
  .nav .btn--outline {
    position: static;
    transform: none;
  }

  .nav .btn {
    margin-top: 20px;
    align-self: flex-start;
  }

  /* The single-column hero and its backdrop treatment live in section 22. */
  .hero__content {
    max-width: none;
    padding-inline: var(--gutter);
  }

  /* The hero buttons are handled at 1279px — see section 18. */

  .value-bar {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 38px;
  }

  .value-bar > :nth-child(odd) {
    border-left: 0;
  }

  /* Stacked: natural height wins over one screen, and the copy takes the
     full column so it stays flush with the video above it. The section goes
     back on the standard vertical rhythm too, since the tighter padding was
     only there to buy room against the viewport. */
  .section--viewport {
    display: block;
    min-height: 0;
    padding-block: var(--section-y);
  }

  .about {
    grid-template-columns: 1fr;
    max-width: none;
  }

  .about__body {
    max-width: none;
  }

  .host {
    grid-template-columns: auto minmax(0, 1fr);
  }

  /* The bio drops to its own row, so the divider turns horizontal with it. */
  .host__bio {
    grid-column: 1 / -1;
    padding-left: 0;
    padding-top: clamp(18px, 2.4vw, 24px);
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .quotes {
    grid-template-columns: 1fr;
  }

  /* minmax(0, …) not 1fr: a bare 1fr floors at min-content, and the nowrap
     CTA button's min-content pushes the track past the shell on narrow
     screens. */
  .band__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .band__panel {
    padding-left: 0;
    padding-top: 28px;
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .footer__inner {
    justify-content: flex-start;
  }
}

/* ============================================================ iPad (portrait) */
@media (max-width: 820px) {
  .footer__inner {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .footer__brand {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .footer__links {
    justify-content: center;
  }
}

@media (max-width: 620px) {
  .curriculum {
    grid-template-columns: 1fr;
  }

  .curriculum > * {
    border-left: 0;
    padding-inline: 0;
  }

  .step {
    align-items: flex-start;
    text-align: left;
  }

  .step__num {
    left: 0;
  }

  .step__text {
    max-width: 42ch;
  }

  .value-bar {
    grid-template-columns: 1fr;
  }

  .value-bar > * {
    border-left: 0;
    padding-inline: 0;
  }

  .audience {
    grid-template-columns: 1fr;
  }

  /* Phone comp: the card narrows to a single centred column and the portrait
     becomes the anchor of the block, so it is sized up from the desktop chip. */
  .host {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    max-width: 420px;
    text-align: center;
  }

  .host__photo {
    width: clamp(140px, 44vw, 190px);
  }

  .host__label {
    justify-content: center;
  }

  /* The hero buttons already stack full-width from 960 down. */

  .footer__inner {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .footer__brand {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .footer__links {
    justify-content: center;
  }
}

/* ============================================================ 19. Legal pages */

.legal-hero {
  padding-block: clamp(38px, 5vw, 70px);
  background: var(--black);
  border-bottom: 1px solid var(--line);
}

/* Match the body measure so the title lines up with the text below it. */
.legal-hero .shell {
  max-width: 74ch;
}

.legal-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.legal-hero__date {
  margin-top: 16px;
  color: var(--muted-dim);
  font-size: 0.875rem;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-block: 11px;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  transition: color 0.2s var(--ease);
}

.back-link:hover {
  color: var(--gold);
}

.back-link .icon {
  width: 16px;
  height: 16px;
  transform: rotate(180deg);
}

.legal {
  max-width: 74ch;
  margin-inline: auto;
  padding-block: clamp(40px, 5vw, 72px);
}

.legal__intro {
  padding-bottom: 8px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.0625rem;
  line-height: 1.75;
}

.legal h2 {
  margin-top: 2.4em;
  margin-bottom: 0.7em;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.legal h3 {
  margin-top: 1.8em;
  margin-bottom: 0.5em;
  color: var(--gold);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
}

.legal p {
  margin-bottom: 1.1em;
  color: var(--muted);
  line-height: 1.75;
}

.legal ul {
  margin-bottom: 1.4em;
  display: grid;
  gap: 10px;
}

.legal li {
  position: relative;
  padding-left: 20px;
  color: var(--muted);
  line-height: 1.7;
}

.legal li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
}

.legal li strong {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
}

.legal a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* The warranty and liability clauses are set in caps in the source contract;
   dial the visual weight down so they stay readable. */
.legal .legal__caps {
  color: var(--muted-dim);
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  line-height: 1.8;
}

.legal__toc {
  margin: 0 0 2.6em;
  padding: 22px 26px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.legal__toc h2 {
  margin: 0 0 14px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}

.legal__toc ul {
  margin: 0;
  gap: 0;
}

.legal__toc li {
  padding-left: 0;
  font-size: 0.9375rem;
}

.legal__toc li::before {
  display: none;
}

.legal__toc a {
  display: block;
  padding-block: 8px;
  color: var(--muted);
  text-decoration: none;
}

.legal__toc a:hover {
  color: var(--gold);
  text-decoration: underline;
}

/* ============================================================ 20. Registration modal

   Gold frame around a white card, per the approved reference. The white card
   is deliberate: it is the one light surface on the page, which is what makes
   the form read as the primary action. */

.modal[hidden] {
  display: none;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 40px);
  overflow-y: auto;
}

.modal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: modal-fade 0.2s var(--ease);
}

.modal__frame {
  position: relative;
  width: min(100%, 620px);
  margin: auto;
  padding: clamp(9px, 1.4vw, 14px);
  background: var(--gold);
  border-radius: 5px;
  animation: modal-rise 0.24s var(--ease);
}

@keyframes modal-fade {
  from { opacity: 0; }
}

@keyframes modal-rise {
  from { opacity: 0; transform: translateY(14px); }
}

.modal__close {
  position: absolute;
  top: -14px;
  right: -14px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #2f2f2f;
  color: #fff;
  border: 2px solid #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
  transition: background-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.modal__close:hover {
  background: #111;
  transform: scale(1.06);
}

.modal__close .icon {
  width: 18px;
  height: 18px;
  stroke-width: 2.4;
}

.modal__card {
  background: #fff;
  border-radius: 2px;
  padding: clamp(26px, 4vw, 46px) clamp(20px, 3.6vw, 42px);
}


.modal__title {
  margin-bottom: 26px;
  color: #111;
  font-size: clamp(1.3rem, 3.4vw, 1.85rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
  text-align: center;
}

.modal__step {
  color: var(--gold-deep);
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 3px;
}

/* ---- Registration form (light surface, so it sets its own colours) ---- */

.rform {
  display: grid;
  gap: 18px;
}

.rform__field {
  display: grid;
  gap: 7px;
}

.rform__label {
  color: #3f4550;
  font-size: 0.9375rem;
  font-weight: 400;
}

.rform__label span {
  color: #6b7280;
}

.rform__input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.rform__icon {
  position: absolute;
  left: 14px;
  width: 18px;
  height: 18px;
  color: #9aa1ab;
  pointer-events: none;
  /* The sprite symbols carry no paint of their own, so without this the
     shape falls back to a solid black fill. */
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rform__input {
  width: 100%;
  padding: 14px 16px;
  font-family: var(--font-body);
  font-size: 1rem;
  color: #111;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.rform__input--icon {
  padding-left: 42px;
}

.rform__input::placeholder {
  color: #9aa1ab;
}

.rform__input:focus {
  outline: none;
  border-color: var(--gold-deep);
  box-shadow: 0 0 0 3px rgba(254, 191, 16, 0.28);
}

.rform__input[aria-invalid="true"] {
  border-color: #dc2626;
}

.rform__input[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2);
}

.rform__error {
  min-height: 0;
  color: #dc2626;
  font-size: 0.8125rem;
  line-height: 1.4;
}

.rform__error:empty {
  display: none;
}

/* Honeypot: hidden from people, reachable by naive bots. */
.rform__gotcha {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.rform__submit {
  margin-top: 6px;
  width: 100%;
  padding: 19px 24px;
  background: var(--gold);
  color: #111;
  border: 0;
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background-color 0.2s var(--ease);
}

.rform__submit:hover:not(:disabled) {
  background: var(--gold-bright);
}

.rform__submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.rform__status {
  color: #3f4550;
  font-size: 0.875rem;
  line-height: 1.55;
  text-align: center;
}

.rform__status:empty {
  display: none;
}

.rform__status--error {
  color: #b91c1c;
}

.rform__status--ok {
  color: #15803d;
}

.rform__status a {
  color: var(--gold-deep);
  font-weight: 600;
}

/* ============================================================ 21. Carousel

   Desktop keeps the three-up grid. Below 960px the track becomes a
   scroll-snap rail so touch swiping is native, and the arrows and dots just
   drive scrollLeft. */

.carousel {
  position: relative;
}

.carousel__arrow,
.carousel__dots {
  display: none;
}

.eyebrow--mobile-only {
  display: none;
}

@media (max-width: 960px) {
  .carousel__track-pad {
    display: block;
  }

  .quotes[data-carousel-track] {
    grid-auto-flow: column;
    grid-auto-columns: 86%;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }

  .quotes[data-carousel-track]::-webkit-scrollbar {
    display: none;
  }

  .quotes[data-carousel-track] > .quote {
    scroll-snap-align: center;
  }

  .carousel__arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-top: -28px;
    border-radius: 50%;
    background: rgba(10, 10, 10, 0.82);
    border: 1px solid var(--line-strong);
    color: var(--text);
    transition: background-color 0.2s var(--ease), color 0.2s var(--ease),
      opacity 0.2s var(--ease);
  }

  .carousel__arrow:hover:not(:disabled) {
    background: var(--gold);
    color: #111;
  }

  .carousel__arrow:disabled {
    opacity: 0.3;
  }

  .carousel__arrow--prev {
    left: -6px;
    transform: rotate(180deg);
  }

  .carousel__arrow--next {
    right: -6px;
  }

  .carousel__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 22px;
  }

  .carousel__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    transition: background-color 0.2s var(--ease), transform 0.2s var(--ease);
  }

  .carousel__dot[aria-current="true"] {
    background: var(--gold);
    transform: scale(1.15);
  }
}

/* ============================================================ 22. Mobile composition

   Follows the approved mobile comp: the hero photo moves behind the copy,
   the value bar and curriculum become cards, and the accordion gains a
   chevron. */

@media (max-width: 960px) {
  /* ---- Hero: one column, the copy over the full-bleed backdrop ---- */
  /* The full-screen floor from section 9 still applies; the copy is taller
     than that on a phone, so the section grows to fit it. */
  .hero {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Tablets still get the wide plate (the portrait crop is cut for phone
     proportions and zooms in too hard here), and a tablet viewport is taller
     than it, so bias right to hold the subject in frame. */
  .hero__img {
    object-position: 58% 45%;
  }

  /* Lighter than a flat wash: the portrait crop is the point of the phone
     layout, so this only darkens enough to carry the copy over it. */
  .hero__media::after {
    background: linear-gradient(
        180deg,
        rgba(5, 5, 5, 0.32) 0%,
        rgba(5, 5, 5, 0.52) 45%,
        rgba(5, 5, 5, 0.88) 100%
      ),
      linear-gradient(90deg, rgba(5, 5, 5, 0.62) 0%, rgba(5, 5, 5, 0.06) 72%);
  }

  .hero__content {
    grid-column: 1;
    padding-block: clamp(34px, 8vw, 56px);
  }

  /* ---- Value bar: 2x2 cards ---- */
  .eyebrow--mobile-only {
    display: flex;
    margin-top: 48px;
    margin-bottom: 32px;
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
  }

  .value-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
  }

  .value-bar > .value {
    padding: 32px 20px;
    background: var(--card);
    border: 1px solid var(--line);
    border-left: 1px solid var(--line);
    border-radius: var(--radius-lg);
  }

  .value__text {
    max-width: none;
  }

  /* ---- About: the video leads the stack, then the copy ---- */
  /* DOM order already is media then body, so nothing to reorder here; the
     grid collapses to one column at this width (section 18). */

  /* ---- Curriculum: number + icon beside the copy, in cards ---- */
  .curriculum {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .curriculum > .step {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 16px;
    row-gap: 2px;
    padding: 20px 18px;
    text-align: left;
    background: var(--card);
    border: 1px solid var(--line);
    border-left: 1px solid var(--line);
    border-radius: var(--radius-lg);
  }

  .step__num {
    position: static;
    grid-column: 1;
    grid-row: 1 / 3;
    font-size: 2.6rem;
    line-height: 1;
    color: var(--gold);
  }

  .step__icon {
    grid-column: 2;
    grid-row: 1 / 3;
  }

  .step__title {
    grid-column: 3;
    grid-row: 1;
    align-self: end;
  }

  .step__text {
    grid-column: 3;
    grid-row: 2;
    align-self: start;
    max-width: none;
  }

  /* ---- Testimonials: stars above the quote ---- */
  .quote__mark {
    order: 1;
  }

  .stars {
    order: 2;
  }

  .quote__text {
    order: 3;
  }

  .quote__cite {
    order: 4;
  }

  /* ---- Closing CTA: centred, meta stacked with rules ---- */
  .band__inner {
    text-align: center;
  }

  .band__panel {
    align-items: center;
  }

  .band__meta {
    display: grid;
    width: 100%;
    gap: 0;
  }

  .band__meta .meta-item {
    justify-content: center;
    padding-block: 12px;
    border-top: 1px solid var(--line);
  }

  .band__meta .meta-item:last-child {
    border-bottom: 1px solid var(--line);
  }

  .band__note {
    justify-content: center;
  }

  /* ---- FAQ: cards come from the base rules; phones just tighten them ---- */
  .faq {
    gap: 10px;
  }

  .faq__item {
    border-radius: var(--radius);
  }

  .faq__trigger {
    gap: 14px;
    padding: 18px;
    font-size: 0.9375rem;
  }

  .faq__chip {
    width: 28px;
    height: 28px;
  }

  .faq__answer {
    padding: 0 18px 18px;
  }
}

/* Chevron affordance, per the mobile comp, applied at every width so the
   accordion behaves the same on desktop. */
.faq__sign {
  width: 10px;
  height: 10px;
}

.faq__sign::before,
.faq__sign::after {
  content: none;
}

.faq__sign {
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.25s var(--ease);
  margin-bottom: 4px;
}

.faq__trigger[aria-expanded="true"] .faq__sign {
  transform: rotate(-135deg);
  margin-bottom: 0;
}

/* ============================================================ 23. Small screens

   Placed after the legal-page rules so these overrides win the cascade.
   Unlike aaix-thank-you-page, body copy stays at 16px here — dropping it to
   14px on a phone costs more in readability than it buys in fit. Headings,
   spacing and card padding absorb the reduction instead. */

@media (max-width: 620px) {
  /* Phones get the portrait crop, which is close to their own proportions, so
     cover barely trims it and centre holds the whole composition. */
  .hero__img {
    object-position: center;
  }

  /* Long CTA labels have to be allowed to wrap once the viewport is narrow;
     nowrap is what blew the closing band's grid track past the shell. */
  .btn {
    white-space: normal;
    text-align: center;
  }

  .btn--lg {
    padding: 18px 22px;
  }

  /* Full width on a phone, matching the stacked hero pair. */
  .about__cta {
    align-self: stretch;
  }
}

@media (max-width: 480px) {
  :root {
    --section-y: clamp(44px, 9vw, 68px);
  }

  .display {
    font-size: clamp(2.05rem, 11.5vw, 2.9rem);
  }

  .section-title,
  .section-title--center {
    font-size: 1.4rem;
  }

  .band__headline {
    font-size: 1.5rem;
  }

  .host__name {
    font-size: 1.35rem;
  }

  .legal-hero__title {
    font-size: 1.85rem;
  }

  .legal h2 {
    font-size: 1.125rem;
  }

  .legal__toc {
    padding: 16px 18px;
  }

  .quote,
  .audience__card {
    padding: 20px;
  }

  .host {
    padding: 20px;
  }

  .footer__inner {
    padding-block: 22px;
  }
}

/* ============================================================ 24. Motion & print preferences */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .header,
  .arcs,
  .nav-toggle {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
  }
}