/* 340B Academy course prototype
 * Design tokens read from Figma "Website Redesign 2.0" (file RP5nImkMCx6JCXpnG63QHQ),
 * Lesson frame 296:169. Only the values below were variable-bound in the file;
 * anything marked APPROX was a raw fill and needs an eyedropper pass.
 */
:root {
  --ac-font:
    "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ac-neutral-100: #1f242c; /* neutral/100, aka "Charade" */
  --ac-body: #7c8492; /* APPROX - body copy grey */
  --ac-item-title: #5a6270; /* APPROX - list item titles sit grey, not near-black */
  --ac-track: #dcdcdc; /* APPROX - grey progress track */
  --ac-gold: #c4a052; /* APPROX - muted brass, read off the design screenshot */
  --ac-card-bg: #f7f7f7; /* APPROX - progress tracker card fill */
  --ac-gold-underline: #f5e1a4; /* APPROX - active lesson tab underline */
  --ac-muted: #8b93a1; /* APPROX - inactive tab / breadcrumb text */
  --ac-chip-bg: #f3f4f5;
  --ac-border: #e4e7ec; /* APPROX */
  /* Side gutters. Widened from 24 to 108 so the background halves have room to
     show: the bleed layer spans this container's PADDING box, so narrowing
     max-width would have shrunk the artwork too - the gutter is the only lever
     that opens space without touching the layer behind it.
     Content is now 1216 - 216 = 1000 wide (was 1168). */
  /* 24, not the 108 this briefly carried. Figma's course-details header frame
     (node 656:4510) puts its content container at x=136, width=1168, in a 1440
     frame - and max-width 1216 centred in 1440 with a 24px gutter lands content
     at exactly 136..1304. The 108 was compensating for the bleed layer being
     stuck at 1216 wide, which hid the gold shapes; with that fixed the gutter
     goes back to the design value and the 1168 content width every measurement
     in this file assumes is restored. */
  --ac-gutter: 24px;
  /* Figma places the gold art at absolute y in a Header frame that has NO tab
     strip - the strip lives in its own anchor-nav frame below it. Sid's ask puts
     the strip above the video instead, which pushes the video down by exactly
     this much (measured: card top 472 -> 616). Shifting the art by the same
     amount keeps Figma's relationship between the two: the gold starts 45px
     below the card's top and ends 49px below its bottom, which is what the
     design does (517 vs 472, and 1177.5 vs 1128.5).
     Set to 0 to put the art back at Figma's literal coordinates - which is
     where it is now, because Sid moved the strip back below the video on
     5 Sep 2026 and the compensation is no longer needed. */
  --ac-hero-shift: 0px;
  --ac-radius: 12px;
  --ac-radius-lg: 16px;
  /* Sampled off the course-details design (see the notes in course.js). */
  --ac-rule: #ece6db; /* warm hairline between timestamp rows */
  --ac-timecode: #ad9e7f; /* tan timecode text */
  --ac-ts-ink: #333333; /* timestamp title + body */
  --ac-gold-ring: #cfaa5d; /* progress arc, check icons, empty state */
  --ac-done: #1a604b; /* completed state dot - the logo's green */
  /* alchemyhealth.com's --golden-30. Used by the WATCH pill and the featured
     label, which Sid asked to match the live site's "New" tag. */
  --ac-golden-30: #ffe9b6;
  --ac-quote: #3f4551; /* testimonial body */
  --ac-quote-role: #62666b; /* testimonial position/company */
  --ac-path-body: #4b515c; /* learning-path body, darker than --ac-body */
  --ac-path-muted: #a5a7ab; /* upcoming video title + hollow bullet */
  --ac-path-muted-soft: #b2b5b9; /* upcoming video body */
  --ac-card-cream: #f8f2e7; /* "Who This Course Is For" cards - warm,
                                      unlike the neutral --ac-card-bg used by
                                      the tracker and Watch cards */
  /* Widest the hero decoration may spread. The homepage caps everything at
     .ah-wrap (1168px) and never breaks out, so an unbounded 100vw wash was
     inconsistent on wide monitors. 1440 is the design frame width, which is
     exactly the 1168 container plus its 2x136 gutters - so capping here
     reproduces the frame the shape was composed in, including the way the
     frame edge crops it. */
  --ac-frame: 1440px;
}

/* Container built in, so the embed does not depend on a Webflow wrapper class.
   Values mirror the live site's .wrapper (max-width 1168px, 24px gutters) so it
   lines up with every other page. If the embed IS placed inside a .wrapper div,
   remove the max-width/margin/padding below or the gutters double up. */
#course-root {
  font-family: var(--ac-font);
  color: var(--ac-neutral-100);
  /* border-box on the container itself, not just its descendants. Without it
     `width: 100%` plus 48px of padding made the container 48px WIDER than the
     viewport - that was the horizontal scrollbar, and no amount of overflow
     clipping fixed it because the overflowing box was this one. max-width is
     1216 so the content box is still exactly 1168 (1216 - 24 - 24), which every
     measurement in this file assumes. */
  box-sizing: border-box;
  width: 100%;
  max-width: 1216px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--ac-gutter);
  padding-right: var(--ac-gutter);
  /* Positioning context for the decorative layer. NOT overflow-clipped: that
     would cut the full-bleed cream and the shape back to 1168px, which is what
     made the shape look cropped and misplaced. The bleed layer clips itself. */
  position: relative;
}

/* Decorative layer: cream wash plus the gold shape. Breaks out of the 1168px
   container but is capped at the design frame width, so it stops short of the
   edges on a wide monitor the way the homepage does. Clips itself, so nothing
   here can widen the page or add a horizontal scrollbar. */
.ac-hero-bleed {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  top: 0;
  /* Always the full 1440 design frame, centred - never a percentage of the
     1216 container. This used to break out only under `min-width: 1440px`,
     which never fires: at a 1440 window the vertical scrollbar leaves ~1425 of
     viewport. So the layer stayed 1216 wide and clipped both gold shapes ~100px
     inside each frame edge, where the design runs them right off it.
     No `vw` - that counts the scrollbar and would re-add a horizontal
     scrollbar. Below 1440 this overflows and is clipped by html/body. */
  left: 50%;
  right: auto;
  width: var(--ac-frame);
  transform: translateX(-50%);
  /* Stops at the bottom of the video. The header stack runs to ~1079 at the
     current content width, and "What You'll Learn" starts at ~1127 - a taller
     layer let the shapes run down into that content, horizontally and
     vertically. The layer clips itself, so this bounds them. */
  /* 1177.55 is the exact height of Figma's Header frame (node 656:4510), which
     is where the design's gold stops. */
  height: calc(1178px + var(--ac-hero-shift));
  overflow: hidden;
  /* Sampled off the design in the left gutter, where nothing overlaps: #fff1d1
     at the top reaching pure white by ~250px, and linear in between (predicted
     vs measured blue channel at y=100: 231 vs 229). Stops are in px, not %, so
     the wash does not stretch with the height - the height exists only to clip
     the shape, which reaches y=1068. */
  background: linear-gradient(180deg, #fff1d1 0px, #ffffff 250px);
}

/* Two decorative halves, one per side. Sized from Sid's Figma layout
   properties - left 869x869, right 1301x708, both angle 0 - expressed as a
   percentage of the 1440 design frame, which is what .ac-hero-bleed is capped
   at. The right layer is not square but its export is 2048^2, so its art is
   cover-cropped to that box rather than squashed.

   Only the positions are derived here (from where each shape's gold enters the
   design frame); the sizes are given. Everything before this was fitted by
   silhouette overlap and repeatedly came out wrong - worth not retrying. */
.ac-hero-shape {
  position: absolute;
  /* Sizes AND positions are read straight out of Figma - the three decorative
     layers are children of `anchor-nav` (node 656:5099, y=90) inside the 1440
     Header frame 656:5072, which is exactly what .ac-hero-bleed represents. So
     each `left` is `50% - 720px + <the layer's x in the frame>` and each `top`
     is `90 + <the layer's y in anchor-nav>`. Nothing here is fitted or guessed.

     Positioned from the frame's centre line, NOT as a percentage of the bleed:
     the bleed used to break out only under `min-width: 1440px`, which never
     fires (a 1440 window leaves ~1425 of viewport after the scrollbar), so it
     sat 1216 wide and clipped every shape ~100px inside each frame edge. */
  object-fit: cover;
}
/* 656:5100 - 869x869 at frame x=-304, y=401. The asset is 565x777, which is
   exactly that layer clipped by the frame: 869-304 = 565 wide, and 1177.5-401 =
   777 tall (the header frame's full height). So it anchors at frame x=0, not at
   the layer's own -304, and renders at natural size.
   Cross-check: its alpha is opaque right up to x=0 and down to y=776, i.e.
   clipped on both those edges rather than trimmed - which is what an export of
   a layer overflowing the frame looks like. */
.ac-hero-shape.is-left {
  width: 565px;
  height: 777px;
  object-fit: fill;
  left: calc(50% - 720px); /* frame x 0 */
  top: calc(401px + var(--ac-hero-shift)); /* 311 in anchor-nav, +90 */
}
/* Both layers use Figma's exact geometry - no fitting anywhere.

   The right-hand asset is 925x708, and 925 is not arbitrary: node 656:5102 is
   1301x708 at frame x=515, so it runs to x=1816 and the 1440 frame clips it at
   925 wide. The export is therefore the layer AS CLIPPED - frame x 515..1440,
   y 129..837 - which is why it drops straight in at natural size.
   (The earlier export was the uncropped 2048^2 source, which is why nothing
   fitted: rendering it at the node's box showed the wrong part of the art.)
   Cross-check: the asset's opaque region starts at y 118 of 708, i.e. frame
   y 247, and the design's gold starts at y 241 - a 6px agreement. */
/* 656:5102 - natural size, exactly as exported */
.ac-hero-shape.is-right {
  width: 925px;
  height: 708px;
  object-fit: fill;
  left: calc(50% - 205px); /* frame x 515 */
  top: calc(129px + var(--ac-hero-shift)); /* 39 in anchor-nav, +90 */
}
@media (max-width: 1216px) {
  .ac-hero-shape {
    display: none;
  }
}

/* Site header: logo left, Contact right. */
.ac-site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 21px 0 0;
}
.ac-site-logo {
  height: 44px;
  width: auto;
  display: block;
}
.ac-site-cta {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--ac-neutral-100);
  border-radius: 999px;
  padding: 13px 30px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ac-neutral-100);
  text-decoration: none;
}
.ac-site-cta:hover {
  background: var(--ac-neutral-100);
  color: #fff;
}

/* Everything the shape sits behind. */
#course-root > *:not(.ac-hero-bleed) {
  position: relative;
  z-index: 1;
}
#course-root *,
#course-root *::before,
#course-root *::after {
  box-sizing: border-box;
}

/* Type scale: Heading 2 = SemiBold 36/44, letter-spacing -0.44 (from Figma) */
/* Copied from alchemyhealth.com's h1, per Sid, so the two headers match:
   52/68, weight 600, letter-spacing -1.6px, with that site's own breakpoints
   (767 -> 40/55, 479 -> 36/44/-0.4) rather than ours, since the point is
   consistency with it. */
.ac-h1 {
  font-size: 52px;
  line-height: 68px;
  letter-spacing: -1.6px;
  font-weight: 600;
  margin: 0;
}
@media (max-width: 767px) {
  .ac-h1 {
    font-size: 40px;
    line-height: 55px;
  }
}
@media (max-width: 479px) {
  .ac-h1 {
    font-size: 36px;
    line-height: 44px;
    letter-spacing: -0.4px;
  }
}
/* 36/44/-0.44 is what the type-scale comment above already specified; the rule
   had been left at 20px, so every section heading rendered under half size. */
.ac-h2 {
  font-size: 36px;
  line-height: 44px;
  letter-spacing: -0.44px;
  font-weight: 600;
  margin: 0 0 24px;
  color: var(--ac-neutral-100);
}
@media (max-width: 720px) {
  .ac-h2 {
    font-size: 28px;
    line-height: 36px;
  }
}
.ac-h3 {
  font-size: 18px;
  line-height: 28px;
  letter-spacing: -0.2px;
  font-weight: 600;
  margin: 0;
}
.ac-body {
  font-size: 16px;
  line-height: 28px;
  font-weight: 400;
  color: var(--ac-body);
  margin: 0;
}
.ac-small {
  font-size: 14px;
  line-height: 28px;
  font-weight: 400;
  color: var(--ac-body);
}

.ac-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: 999px;
  background: transparent;
  color: var(--ac-neutral-100);
  border: 1.5px solid var(--ac-neutral-100);
}
/* Matches the "New" tag on alchemyhealth.com (.hero-download__tag), per Sid, so
   the two stay consistent: golden-30 fill, neutral-100 text, 600 14/20,
   letter-spacing 1.2px, radius 100px, padding 8px 16px - and 2px 12px below
   480px, which is that rule's own mobile override on the live site. */
.ac-lesson-header > .ac-pill {
  background: var(--ac-golden-30);
  border: 0;
  color: var(--ac-neutral-100);
  border-radius: 100px;
  padding: 8px 16px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 1.2px;
}
@media (max-width: 479px) {
  .ac-lesson-header > .ac-pill {
    padding: 2px 12px;
  }
}
/* "for Grantees" is gold in the design. */
.ac-h1-accent {
  color: var(--ac-gold);
}

/* Sits directly under the H1 at near-title weight in the design, not as meta. */
.ac-meta {
  font-size: 40px;
  line-height: 1.15;
  letter-spacing: -0.6px;
  font-weight: 600;
  color: var(--ac-neutral-100);
  margin-top: 8px;
}
@media (max-width: 720px) {
  .ac-meta {
    font-size: 26px;
  }
}

/* ---- video ------------------------------------------------------------- */
.ac-video {
  /* Breathing room when an "In This Module" row scrolls the player into view,
     so it does not sit flush against the top of the viewport. */
  scroll-margin-top: 24px;
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--ac-radius-lg);
  overflow: hidden;
  background: var(--ac-neutral-100);
  margin-top: 0;
}
/* Full content width: both edges line up with the text above and the columns
   below. It was 83%, which left a gap on the right for the gold shape to show
   through - that inset put the card's right edge out of line with everything
   else on the page. */
.ac-video {
  width: 100%;
}
.ac-video iframe,
.ac-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* A file-backed lesson is letterboxed rather than cropped: Sid's exports are
   720p and 1080p, and the container is 16/9, so contain avoids cutting heads
   off if a future export has a different ratio. */
.ac-video video {
  background: #000;
  object-fit: contain;
  border-radius: var(--ac-radius-lg);
}

.ac-resume {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(31, 36, 44, 0.92);
  color: #fff;
  border: 0;
  cursor: pointer;
  font-family: var(--ac-font);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 999px;
  white-space: nowrap;
}
.ac-resume[hidden],
[hidden] {
  display: none !important;
}

/* ---- progress bar (course-level: videos watched) ----------------------- */
.ac-bar {
  height: 8px;
  border-radius: 999px;
  background: var(--ac-track);
  overflow: hidden;
}
.ac-bar > span {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: var(--ac-gold);
  transition: width 0.25s linear;
}
/* ---- layout: 675 content / 477 sidebar, per the Figma frame ------------- */
/* The Figma frame is 1440 wide with a 1200px content area (675 + 477 + 48).
   The live site's container (.wrapper) is 1168px with 24px gutters, so only
   1120px is available - fixed columns overflowed it by 80px. Using the design's
   numbers as fr units keeps the 675:477 proportion at whatever width the
   surrounding container actually gives us. minmax(0, ...) stops long words in
   a cell from forcing the grid wider. */
/* 112 to match .ac-section's inter-section rhythm rather than inventing a
   value, so the video -> first-heading gap reads the same as every later
   heading-to-heading gap. At the old 48 the two column headings sat 48px under
   the video AND level with the gold art's bottom edge (art ends 1322, headings
   started 1321), so "What You'll Learn" was again sharing space with the
   artwork - the +144 --ac-hero-shift had reintroduced that. */
/* 48, not 176. The old value cleared the gold hero art, which the lesson page no
   longer renders (Sid, 5 Sep 2026), and the final lesson spec puts the module
   heading and the tracker ~48px under the tab strip. */
#course-root.is-lesson .ac-cols {
  margin-top: 48px;
}
.ac-cols {
  display: grid;
  grid-template-columns: minmax(0, 641fr) minmax(0, 486fr);
  gap: 41px;
  margin-top: 112px;
  align-items: start;
}
@media (max-width: 900px) {
  .ac-cols {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
}

/* ---- timestamps (collapsible, chevron) --------------------------------- */
/* Row grid measured off the design: timecode column ends at 100, content starts
   at 116, state dot sits at 600 in a 641-wide column. */
.ac-ts-list {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  border-top: 1px solid var(--ac-rule);
}
/* 28 above / 35 below, measured: divider-to-title-top was 27.6 and
   last-line-bottom-to-divider 34.6. */
.ac-ts {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr) 41px;
  gap: 16px;
  align-items: start;
  /* 24 on the right: the state marker moved into the third column (Sid,
     5 Sep 2026) and with no horizontal padding it sat flush against the row's
     edge - and against the cream card's edge on the current lesson. */
  padding: 28px 24px 35px 0;
  border-bottom: 1px solid var(--ac-rule);
}
.ac-ts-time {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  padding: 0 0 0 16px;
  margin: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--ac-font);
  font-size: 14px;
  line-height: 28px;
  font-weight: 400;
  color: var(--ac-timecode);
}
.ac-ts-time:hover {
  color: var(--ac-gold);
}
.ac-ts.is-current .ac-ts-time {
  color: var(--ac-gold);
  font-weight: 600;
}
.ac-ts-title {
  font-size: 18px;
  line-height: 28px;
  letter-spacing: -0.2px;
  font-weight: 600;
  margin: 0;
  color: var(--ac-ts-ink);
}
.ac-ts-text {
  font-size: 15px;
  line-height: 24px;
  font-weight: 400;
  margin: 6px 0 0;
  color: var(--ac-ts-ink);
}
/* ID-scoped: #course-root a sets `color: inherit`, which a bare class would
   lose to - the same trap that made the homepage CTA render dark-on-dark. */
#course-root .ac-ts-transcript {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ac-neutral-100);
}
#course-root .ac-ts-transcript:hover {
  color: var(--ac-gold);
}
/* Title and completion ring side by side, as the design shows - the ring sits
   immediately after the lesson name rather than in its own column. */
.ac-ts-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
/* The current lesson: cream fill and a gold left edge.
   The edge is an inset shadow rather than a border, and there is no extra
   padding-left, because in the design the highlighted block's chip and title
   stay on the same left edge as every other row - a border plus padding shifted
   the whole grid 24px right and the text visibly jumped on the active lesson. */
.ac-ts.is-current {
  background: var(--ac-card-cream);
  box-shadow: inset 3px 0 0 var(--ac-gold);
}
.ac-ts.is-clickable {
  cursor: pointer;
}
.ac-ts.is-clickable:hover .ac-ts-title {
  color: var(--ac-gold);
}

.ac-ts-state {
  /* Sits in the row's third column, where the chevron was - Sid, 5 Sep 2026.
     24px, the size in the design: moving it into its own column tempted me to
     scale it up to fill the 41px track, which just read as oversized.
     margin-top centres it on the title's first line, not the row's top. */
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 50%;
  justify-self: end;
  box-sizing: border-box;
  border: 2px solid var(--ac-gold-ring);
  position: relative;
  margin-top: 4px;
}
.ac-ts-state.is-done {
  background: var(--ac-done);
  border-color: var(--ac-done);
}
.ac-ts-state.is-done::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 7px;
  width: 8px;
  height: 4px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}
@media (max-width: 720px) {
  .ac-ts {
    grid-template-columns: 72px minmax(0, 1fr) 34px;
    gap: 12px;
  }
  .ac-ts-time {
    padding-left: 0;
  }
}
/* No rule between sections: the design has one only where the timestamps list
   ends, and that hairline belongs to the list (.ac-ts:last-child), not to every
   section. 112px is the measured gap - hairline-to-heading was 113 and
   cards-to-heading 112 across two design frames. */
.ac-section {
  border-top: 0;
  padding: 0;
  margin-top: 112px;
}
.ac-section:first-child {
  margin-top: 0;
}
@media (max-width: 720px) {
  .ac-section {
    margin-top: 64px;
  }
}

/* ---- progress tracker card (sidebar) ----------------------------------- */
.ac-tracker {
  /* No border in the design - a light fill on white does the separating. */
  background: var(--ac-card-bg);
  border: 0;
  border-radius: 20px;
  /* Measured off the spec card, allowing for line-height slack above the heading
     and below the last line. */
  padding: 23px 26px 33px;
  /* Same 20px rhythm as .ac-watch, which the tracker follows in the sidebar.
     Without it the tracker sat flush against the last Watch card - the cards
     carry their own margin-top and this one had none, so the two read as one
     merged block. */
  margin-top: 20px;
  position: sticky;
  top: 24px;
}
/* The design replaced the linear bar with a donut: 280px across, 12px stroke,
   gold arc starting at 12 o'clock and running clockwise over a grey track.
   Measured gap in the track was ~108deg, i.e. exactly the 30% not yet watched. */
.ac-ring {
  position: relative;
  /* 290, not 280: the spec's ring is 247px on a 412px card and ours is 486, so
     247 * 486/412. The svg keeps its 280 viewBox and scales. */
  width: 290px;
  max-width: 100%;
  /* 16 rather than 28 - measured 15px from the heading's descender to the ring's
     outer edge in the spec, and this margin collapses with the heading's. */
  margin: 16px auto 0;
}
.ac-ring svg {
  display: block;
  width: 100%;
  height: auto;
}
.ac-ring-track {
  stroke: var(--ac-track);
}
.ac-ring-arc {
  stroke: var(--ac-gold-ring);
  transition: stroke-dashoffset 240ms ease;
}
.ac-ring-label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.ac-tracker-pct {
  /* 37/40 - the spec's digit height is 0.92x ours, the same factor as the rest. */
  font-size: 37px;
  line-height: 40px;
  font-weight: 600;
  letter-spacing: -0.8px;
  margin: 0;
}
.ac-tracker-sub {
  /* 18/21, up from 15/21: the spec's two lines measure 18.5px and 18.0px by width
     and by digit height respectively, on a 21px pitch. */
  font-size: 16px;
  line-height: 21px;
  font-weight: 400;
  color: var(--ac-body);
  /* 2, not 6: the spec's gap from the percentage to the count line is 13px and
     the percentage's 40px line-height already supplies most of it. */
  margin-top: 2px;
  /* No width cap now the break is explicit - it only existed to force a wrap. */
}
/* "Currently viewing" / "Module 1: Lesson 2" under the ring. Both lines are the
   same size and weight in the spec; 28px pitch is the measured cap-to-cap gap. */
.ac-tracker-now {
  margin-top: 15px;
  text-align: center;
  font-size: 18px;
  /* 28px pitch is the spec's measured cap-to-cap gap, independent of the size. */
  line-height: 28px;
  font-weight: 600;
  letter-spacing: -0.2px;
}

/* ---- "Watch" cards under the tracker ----------------------------------- */
/* Level with .ac-section:first-child on the left, which also has no top margin,
   so the two column headings share a baseline (Sid). */
.ac-side-title {
  margin-top: 0;
}
.ac-watch {
  display: block;
  background: var(--ac-card-bg);
  border-radius: 20px;
  padding: 22px 24px 24px;
  margin-top: 20px;
}
.ac-watch-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--ac-golden-30);
  color: var(--ac-neutral-100);
  border-radius: 999px;
  padding: 5px 13px;
  /* 13, not 11: normalised against the card design (pill band 20px on an 886
     card, ours 486 wide). */
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ac-watch-caret {
  font-size: 8px;
  line-height: 1;
}
/* Pill and duration on one row, mirroring the homepage's Upcoming Courses
   cards so the two pages share one card language. */
.ac-watch-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Grey companion to the gold pill, same metrics so the pair sits on one line. */
.ac-watch-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--ac-chip-bg);
  color: var(--ac-neutral-100);
  border-radius: 999px;
  padding: 5px 13px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ac-watch-clock {
  font-size: 12px;
  line-height: 1;
}
.ac-watch-body {
  font-size: 15px;
  line-height: 25px;
  color: var(--ac-body);
  margin: 10px 0 0;
}
.ac-watch-title {
  /* 22, not 18: the card design's title band is 32px on an 886-wide card, which
     is 17.6 at our 486 - our 18px was rendering 14. */
  font-size: 22px;
  line-height: 32px;
  letter-spacing: -0.2px;
  font-weight: 600;
  margin: 14px 0 0;
  color: var(--ac-neutral-100);
}
.ac-watch-by {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
}
.ac-watch-avatars {
  display: flex;
  flex-shrink: 0;
}
.ac-watch-avatars img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--ac-card-bg);
}
.ac-watch-avatars img + img {
  margin-left: -12px;
}
.ac-watch-people {
  font-size: 15px;
  line-height: 22px;
  color: var(--ac-body);
}
/* ---- hidden CMS source lists ------------------------------------------- */
/* The six Collection Lists that carry the lesson data are a data source, not
   content: course.js reads them and renders the real page from what it finds.
   Hiding them is a Designer setting on the wrapper, which is easy to forget -
   and forgetting it dumps all 24 lessons' raw field values onto the page. This
   rule makes that impossible. It lives in course.css rather than in JS so the
   lists are never painted at all; hiding them after init would flash. */
.ac-lesson-data {
  display: none !important;
}

/* ---- lesson list (course hub) ------------------------------------------ */
.ac-lessons {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ac-lesson-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--ac-border);
  cursor: pointer;
}
.ac-lesson-row:last-child {
  border-bottom: 0;
}
.ac-lesson-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--ac-chip-bg);
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 600;
}
.ac-lesson-row.is-complete .ac-lesson-num {
  background: var(--ac-gold);
  color: #fff;
}
.ac-lesson-main {
  flex: 1;
  min-width: 0;
}
.ac-lesson-title {
  font-size: 15px;
  font-weight: 600;
}
.ac-lesson-row .ac-bar {
  height: 4px;
  margin-top: 8px;
}

/* ---- breadcrumbs ------------------------------------------------------- */
.ac-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 11px;
  flex-wrap: wrap;
  /* Weight measured off the design.
     Weight 500, not 600: stroke-width/cap-height is scale-independent, and
     measured at matching pixel density Montserrat gives 0.133 at 400, 0.167 at
     500 and 0.194 at 600. The design measures 0.150; 500 is the closest real
     weight. (Our 600 render measured 0.200, which is how I could tell the
     screenshot was our own output rather than the design.)
     Not matched: the design's strip is ~14%% narrower than ours at the same cap
     height, which no weight or tracking accounts for - it points at a different
     typeface for this element, and I stopped chasing it. */
  /* 15px on every page. Marketing was 14 and the lesson page 15, each measured
     off a different design crop; the difference was not intentional. */
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  /* Title case, not uppercase. The marketing crumb was uppercase and tracked,
     measured off an early crop; the final spec shows "Home | Academy | Module |
     Lesson name" in title case on this page too, matching the lesson page. */
  letter-spacing: normal;
  margin-top: 44px;
}
/* Both items are the same dark ink in this design - there is no muted/gold
   split. Sampled (9,13,31) at the glyph cores, i.e. --ac-neutral-100. */
.ac-crumb {
  color: var(--ac-neutral-100);
  text-decoration: none;
}
.ac-crumb:hover {
  color: var(--ac-neutral-100);
}
.ac-crumb-current {
  color: var(--ac-neutral-100);
}
.ac-crumb-sep {
  color: var(--ac-neutral-100);
}

/* 88, not 53. Figma's Header frame puts the hero/video card at y=472; with 53
   here the video started at 437. The extra 35 lines the card up with the design,
   which in turn lines the gold art up with it - the art is placed at Figma's
   absolute y, so if the content drifts the two stop agreeing. */
.ac-lesson-header {
  margin-top: 88px;
  /* Sid's spec puts ~100px between the H1's last line and the video card; the
     header had no bottom margin at all, which left 35. This also carries the
     strip down with it: the card's bottom lands at 1136 and the pill at 1216,
     which is ~40px clear of the cream band's 1178 edge - in the spec the strip
     sits on white, not on the cream. */
  margin-bottom: 64px;
}
.ac-lesson-header .ac-h1 {
  margin-top: 18px;
}

/* The lesson page's breadcrumb variant. Marketing's is two uppercase items,
   all in one dark ink; the lesson page's is four in title case with the current
   item in gold (Home | Academy | Module | Lesson name). */
/* is-deep no longer changes the type at all - case, tracking and size are shared
   with the marketing page. It survives only to mark the current crumb in gold. */
.ac-breadcrumbs.is-deep .ac-crumb-current {
  color: var(--ac-gold);
  font-weight: 600;
}

/* Marketing only: "Begin course", to the left of the tab strip. Same spec as
   the homepage's .ah-btn-primary so the two pages share one button language -
   dark pill, gold circular arrow badge. */
/* Sits below the card, centred. `inline-flex` cannot be centred by auto margins
   on its own, so the element is a flex box and centres its own contents. */
.ac-begin {
  margin: 32px auto 0;
  width: fit-content;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  background: var(--ac-neutral-100);
  color: #fff;
  text-decoration: none;
  border-radius: 999px;
  padding: 8px 8px 8px 26px;
  font-size: 16px;
  font-weight: 600;
}
.ac-begin:hover {
  opacity: 0.9;
}
.ac-begin-arrow {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--ac-golden-30);
  color: var(--ac-neutral-100);
  display: grid;
  place-items: center;
  font-size: 15px;
}

/* Marketing's hero card: the composited export used as a poster that links to
   the lesson. Same box as .ac-video so the two pages' headers stay aligned -
   1168x657 is the Figma card, i.e. the 1400x788 export's exact ratio. */
.ac-video.is-poster {
  display: block;
  aspect-ratio: 1168 / 657;
  background: var(--ac-card-cream);
}
.ac-poster-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ac-video.is-poster:hover .ac-poster-img {
  opacity: 0.94;
}
/* The module previews ship without a play glyph, so this is a real overlay
   rather than pixels. Centred, and sized like the design's card button. */
.ac-poster-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  display: grid;
  place-items: center;
  pointer-events: none;
}
.ac-poster-play::after {
  content: "";
  /* A triangle, nudged right so it reads as centred inside the circle. */
  margin-left: 4px;
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent var(--ac-neutral-100);
}
.ac-video.is-poster:hover .ac-poster-play {
  background: #fff;
}
/* On the lesson page the play control is a real <button>, so unlike the
   marketing card's decorative span it has to receive clicks. */
.ac-poster-play.is-button {
  pointer-events: auto;
  border: 0;
  cursor: pointer;
  padding: 0;
}
.ac-video .ac-poster-img {
  cursor: pointer;
}
.ac-video:hover .ac-poster-play.is-button {
  background: #fff;
}

/* ---- sibling-lesson tab strip ------------------------------------------ */
/* Design: a light rounded track holding the lesson names, the current one a solid
   gold pill, with the scroll arrows outside the track on the right. Replaces the
   earlier underline treatment. */
/* Sits between the header and the video now that the strip moved above the
   card (Sid). The old 116px top margin was spacing it off the video that used
   to be above it. These values are mine - the frame still shows the previous
   order, so there is nothing to measure for this arrangement. */
.ac-tabs {
  display: flex;
  align-items: center;
  gap: 24px;
  /* 84 above, not 44: with the strip back below the video the spec leaves ~96px
     between the card's bottom edge and the pill, and that gap is what drops the
     strip clear of the cream hero band rather than sitting on top of it. */
  margin: 84px 0 32px;
}
.ac-tabs-strip {
  display: flex;
  gap: 6px;
  flex: 1;
  min-width: 0;
  align-items: center;
  background: #f6f6f6;
  border-radius: 999px;
  padding: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* The fade means "there is more to the right". It is switched off by the
     is-at-end class once the strip is scrolled out, otherwise selecting the last
     lesson - which clamps at max scroll, leaving its gold pill against the right
     edge - renders that pill under the gradient. */
  -webkit-mask-image: linear-gradient(
    to right,
    #000 0,
    #000 calc(100% - 72px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    #000 0,
    #000 calc(100% - 72px),
    transparent 100%
  );
}
.ac-tabs-strip.is-at-end {
  -webkit-mask-image: none;
  mask-image: none;
}
.ac-tabs-strip::-webkit-scrollbar {
  display: none;
}
.ac-tab {
  font-family: var(--ac-font);
  font-size: 17px;
  line-height: 28px;
  font-weight: 500;
  color: var(--ac-muted);
  background: none;
  border: 0;
  cursor: pointer;
  /* These are <a> elements now (real lesson URLs), so the underline has to go. */
  text-decoration: none;
  padding: 12px 26px;
  white-space: nowrap;
  flex-shrink: 0;
  border-radius: 999px;
}
.ac-tab:hover {
  color: var(--ac-neutral-100);
}
.ac-tab.is-active {
  background: var(--ac-gold);
  color: var(--ac-neutral-100);
  font-weight: 600;
}
.ac-tabs-controls {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}
.ac-round {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid var(--ac-neutral-100);
  background: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 20px;
  line-height: 1;
  color: var(--ac-neutral-100);
  font-family: var(--ac-font);
}
.ac-round:hover {
  background: var(--ac-chip-bg);
}

/* ---- unsourced copy: visible gap, never mistakable for real content ---- */
.ac-todo {
  color: #9aa2b1;
  font-style: italic;
  background: repeating-linear-gradient(
    45deg,
    #f7f8fa,
    #f7f8fa 6px,
    #f1f3f6 6px,
    #f1f3f6 12px
  );
  border: 1px dashed #ccd3dd;
  border-radius: 4px;
  padding: 0 6px;
}

/* ---- generic list sections --------------------------------------------- */
.ac-feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ac-feature {
  padding: 0 0 28px;
}
.ac-feature:last-child {
  padding-bottom: 0;
}
/* Icon sits in a fixed left gutter so the title and body share one text edge. */
.ac-feature.has-icon {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  align-items: start;
}
/* Icons: both colour and size come from the glyph name, so the same icon is
   the same size wherever it is used. Context classes only handle spacing. */
.ac-icon {
  display: block;
  line-height: 0;
  color: var(--ac-neutral-100);
}
.ac-icon svg {
  display: block;
  width: 24px;
  height: 24px;
}
.ac-icon-check {
  color: var(--ac-gold);
}
.ac-icon-box svg {
  width: 40px;
  height: 40px;
}
.ac-icon-linkedin svg,
.ac-icon-x svg,
.ac-icon-mail svg {
  width: 22px;
  height: 22px;
}

.ac-feature-icon {
  margin-top: 2px;
}
.ac-feature-title {
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  color: var(--ac-item-title);
  margin-bottom: 6px;
}
.ac-feature-body .ac-body {
  font-size: 18px;
  line-height: 30px;
}

/* ---- instructors ------------------------------------------------------- */
/* No card in the design - plain on white, separated by space. Avatar-top to
   avatar-top measured 480 CSS against a 404-tall block, hence the 76 gap. */
.ac-instructors {
  display: grid;
  grid-template-columns: 1fr;
  gap: 76px;
}
.ac-instructor {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
}
.ac-instructor-head {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
/* Rounded square, not a circle - the design's corners are ~16px. */
.ac-avatar {
  width: 106px;
  height: 106px;
  border-radius: 16px;
  flex-shrink: 0;
  background: #e8e3db;
  display: grid;
  place-items: center;
  overflow: hidden;
  font-size: 26px;
  font-weight: 600;
  color: var(--ac-body);
}
.ac-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ac-instructor-who {
  padding-top: 4px;
  min-width: 0;
}
.ac-instructor-name {
  /* Sizes normalised against the instructors design: its name band is 34px on a
     1128 content column, ours is 641 wide, so 34 x 0.568 = 19.3 of cap height. */
  font-size: 28px;
  line-height: 36px;
  font-weight: 600;
  letter-spacing: -0.3px;
  color: var(--ac-neutral-100);
}
/* Sits between the name and the job title, same size as the role but slightly
   stronger - it is a credential, not a subtitle. */
.ac-instructor-credential {
  font-size: 17px;
  line-height: 26px;
  font-weight: 600;
  /* #333, sampled off the instructors design: its role and bio glyph cores
     measure (51,51,51) where --ac-body renders (126,132,145). Not a token -
     the rest of the page genuinely uses the lighter body grey. */
  color: #333333;
}
.ac-instructor-role {
  font-size: 17px;
  line-height: 26px;
  font-weight: 400;
  /* #333, sampled off the instructors design: its role and bio glyph cores
     measure (51,51,51) where --ac-body renders (126,132,145). Not a token -
     the rest of the page genuinely uses the lighter body grey. */
  color: #333333;
  margin-top: 2px;
}
/* Pushed to the column's right edge, level with the name. */
.ac-socials {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
  padding-top: 6px;
  flex-shrink: 0;
}
.ac-social-link {
  display: block;
  line-height: 0;
}
.ac-social-link:hover .ac-social {
  opacity: 0.65;
}
/* Full width under the header, deliberately not indented past the avatar. */
.ac-instructor-bio {
  font-size: 17px;
  line-height: 30px;
  font-weight: 400;
  /* #333, sampled off the instructors design: its role and bio glyph cores
     measure (51,51,51) where --ac-body renders (126,132,145). Not a token -
     the rest of the page genuinely uses the lighter body grey. */
  color: #333333;
  margin: 28px 0 0;
}
.ac-instructor-past {
  margin-top: 32px;
}
.ac-past-label {
  font-size: 17px;
  line-height: 28px;
  font-weight: 600;
  color: var(--ac-neutral-100);
}
.ac-past-logos {
  display: flex;
  align-items: center;
  gap: 25px;
  margin-top: 20px;
  flex-wrap: wrap;
}
/* Natural size: the exports are already 1:1 with the design's 76-77px marks, and
   forcing a common height would blow the wider wordmark up (76x13 scaled to 22
   tall is 129 wide). max-height only guards against an oversized replacement. */
img.ac-past-logo {
  width: auto;
  height: auto;
  max-height: 22px;
}
/* Placeholder mark, sized to the design's 22px logo row. Deliberately reads as
   a placeholder rather than imitating a real company mark. */
.ac-past-logo.is-placeholder {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 22px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.1px;
  color: #9aa0aa;
}
.ac-past-mark {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: #d5d0c6;
  flex-shrink: 0;
}
@media (max-width: 720px) {
  .ac-instructors {
    gap: 56px;
  }
  .ac-instructor-head {
    flex-wrap: wrap;
  }
  .ac-socials {
    margin-left: 0;
    width: 100%;
    padding-top: 0;
  }
}

/* ---- learning path (module picker + video list) ------------------------ */
/* Geometry measured off the design: select 390x43, bullet 9px at the content
   edge, title 13px right of it, body indented a further 17px. */
.ac-path-picker {
  position: relative;
  display: block;
  width: 390px;
  max-width: 100%;
  margin: 16px 0 0;
}
/* The trigger keeps the closed-state design exactly as it was; only the element
   changed from <select> to <button>. */
.ac-path-toggle {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  height: 43px;
  border: 1px solid var(--ac-border);
  border-radius: 8px;
  background: #fff;
  padding: 0 20px 0 22px;
  cursor: pointer;
  font-family: var(--ac-font);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.2px;
  color: var(--ac-neutral-100);
  text-align: left;
}
.ac-path-toggle:hover {
  border-color: var(--ac-gold);
}
.ac-path-toggle:focus-visible {
  outline: 2px solid var(--ac-gold);
  outline-offset: 2px;
}
.ac-path-toggle-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Chevron flips when open, so the control reads as a disclosure rather than
   just a box that happens to have an arrow. */
.ac-path-chevron {
  line-height: 0;
  flex-shrink: 0;
  color: var(--ac-neutral-100);
  transition: transform 120ms ease;
}
.ac-path-picker.is-open .ac-path-chevron {
  transform: rotate(180deg);
}
/* The open panel: same white, same radius and border as the trigger, so the two
   states belong to each other. A native select renders this as OS chrome. */
.ac-path-menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  width: 100%;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #fff;
  border: 1px solid var(--ac-border);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(31, 36, 44, 0.12);
}
.ac-path-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.2px;
  color: var(--ac-item-title);
}
.ac-path-option:hover {
  background: var(--ac-card-bg);
  color: var(--ac-neutral-100);
}
.ac-path-option:focus-visible {
  outline: 2px solid var(--ac-gold);
  outline-offset: -2px;
}
/* Selected reads in the brand gold with a leading rule, rather than the blue
   system highlight the platform menu used. */
.ac-path-option.is-selected {
  background: var(--ac-card-cream);
  color: var(--ac-neutral-100);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--ac-gold);
}
.ac-path-list {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: grid;
  gap: 28px;
}
.ac-path-item {
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr);
  gap: 13px;
  align-items: start;
}
/* Always a filled dark dot, in every state - the design alternated filled dark
   and hollow grey, which read as inconsistent. #1f242c is the design's own value
   for the active bullet, so this is the filled state applied to every row. */
.ac-path-bullet {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-top: 10px;
  background: var(--ac-neutral-100);
  box-sizing: border-box;
}
.ac-path-title {
  font-size: 18px;
  line-height: 28px;
  letter-spacing: -0.2px;
  font-weight: 600;
  color: var(--ac-neutral-100);
}
/* Indented past the title, per the design. */
.ac-path-text {
  font-size: 16px;
  line-height: 28px;
  font-weight: 400;
  color: var(--ac-path-body);
  margin: 4px 0 0 17px;
}
/* The greyed text is part of the truncation cue, so it is scoped to the
   collapsed list - expanded, every row reads at full contrast. The hollow
   bullet is a separate progress marker and stays either way. */
.ac-path-list.is-collapsed .ac-path-item.is-upcoming .ac-path-title {
  color: var(--ac-path-muted);
}
.ac-path-list.is-collapsed .ac-path-item.is-upcoming .ac-path-text {
  color: var(--ac-path-muted-soft);
}

/* Collapsed list: rows up to collapsedCount show, the rest are removed from the
   flow. No blur and no fade mask - sampling the design shows flat colours, with
   both of the muted row's body lines at exactly #b2b5b9. The muted colour above
   IS the whole truncation cue; the blur and gradient that used to live here were
   invented. */
.ac-path-list.is-collapsed .ac-path-item.is-beyond {
  display: none;
}
/* Aligned with the body indent: 9px bullet + 13px gap + 17px = 39. */
.ac-path-more {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 20px 0 0 39px;
  cursor: pointer;
  font-family: var(--ac-font);
  font-size: 15px;
  font-weight: 500;
  color: #818589;
}
.ac-path-more:hover {
  color: var(--ac-neutral-100);
}
.ac-path-more[hidden] {
  display: none;
}
.ac-path-empty {
  font-size: 16px;
  line-height: 28px;
  color: var(--ac-body);
}

/* ---- progress tracker title -------------------------------------------- */
.ac-tracker-title {
  /* 18/26. Every string in the spec card measures ~0.91x our rendered width, so
     the whole card's type came down by that factor - measured on the rendered
     page against the spec image at matched card width, not from font metrics. */
  font-size: 18px;
  line-height: 26px;
  letter-spacing: -0.2px;
  font-weight: 600;
  /* No bottom margin: it collapsed with .ac-ring's and won at 28px, pushing the
     ring 19px below where the spec has it. The ring's own 16px now sets the gap. */
  margin: 0;
}

/* ---- card grid ("Who This Course Is For") ------------------------------ */
/* Two columns, not three: measured 313px cards with a 16px gap, which is
   exactly the 641px content column (313 x 2 + 16 = 642). */
.ac-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
@media (max-width: 900px) {
  .ac-cards {
    grid-template-columns: 1fr;
  }
}
.ac-card {
  background: var(--ac-card-cream);
  border-radius: 18px;
  padding: 32px 24px 36px;
  display: flex;
  flex-direction: column;
}
.ac-card-icon {
  margin-bottom: 28px;
}
.ac-card-title {
  font-size: 20px;
  line-height: 30px;
  font-weight: 600;
  letter-spacing: -0.2px;
  color: var(--ac-neutral-100);
  margin-bottom: 20px;
}
.ac-card-body {
  font-size: 16px;
  line-height: 28px;
  font-weight: 400;
  color: var(--ac-body);
  margin: 0;
}

/* Full-width sections span both columns. No rule above: the design (like the
   other sections) separates by space alone, on the same 112 rhythm. */
.ac-section-full {
  grid-column: 1 / -1;
  margin-top: 112px;
  border-top: 0;
}

/* ---- testimonials ------------------------------------------------------ */
/* Measured: three 379px cards with 16px gaps across the 1168 container. */
.ac-testimonials {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
@media (max-width: 900px) {
  .ac-testimonials {
    grid-template-columns: 1fr;
  }
}
.ac-testimonial {
  margin: 0;
  padding: 36px 24px;
  border: 0;
  border-radius: 20px;
  background: var(--ac-card-bg);
  display: flex;
  flex-direction: column;
}
.ac-quote-mark {
  color: var(--ac-gold-ring);
  line-height: 0;
  display: block;
}
.ac-quote {
  margin: 36px 0 0;
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
  color: var(--ac-quote);
  border: 0;
  padding: 0;
  quotes: none;
}
/* The picked-out phrase. `strong` would inherit bolder weight from the browser
   default anyway; the gold is what carries it. */
.ac-quote-em {
  font-weight: 600;
  color: var(--ac-gold-ring);
}
/* margin-top:auto pushes the attribution to the card's bottom, so cards with
   unequal quote lengths still line their footers up. */
.ac-testimonial-who {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: auto 0 0;
  padding: 20px 0 0;
}
.ac-testimonial-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  background: #e8e3db;
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--ac-body);
}
.ac-testimonial-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Same treatment as the academy homepage's .ah-quote-avatar, so the supporter
     photos read identically on both pages. */
  filter: grayscale(1);
}
.ac-testimonial-name {
  font-size: 15px;
  line-height: 22px;
  font-weight: 600;
  color: var(--ac-neutral-100);
}
.ac-testimonial-role {
  font-size: 13px;
  line-height: 20px;
  font-weight: 400;
  color: var(--ac-quote-role);
}

/* ---- Webflow CMS field carriers ---------------------------------------- */
/* Webflow renders the bound fields as visible text; the script reads them from
   the DOM, so they are hidden rather than removed. Keep them in the document -
   display:none still leaves textContent readable, but removing them would not. */
.ac-cms-title,
.ac-cms-slug,
.ac-cms-lessons,
.ac-cms-duration {
  display: none;
}

/* ---- responsive refinements -------------------------------------------- */
/* Kept together at the end, after every base rule, so each override lands
   without needing extra specificity. The per-component media queries above
   handle the column collapses; this section is the narrow-screen pass.
   Breakpoints: 900 = sidebar stacks, 720 = phone landscape, 520 = phone. */

@media (max-width: 900px) {
  /* Sticky is meaningless once the sidebar is stacked below the content, and it
     makes the card hover over the Watch cards that follow it. */
  .ac-tracker {
    position: static;
    top: auto;
    padding: 32px 24px;
  }
  /* The tracker and Watch cards are full width when stacked, so the ring no
     longer needs to fill them. */
  .ac-ring {
    width: 240px;
  }
}

@media (max-width: 720px) {
  /* 116px of top margin is a desktop rhythm; it reads as a dead screen on a
     phone. */
  .ac-tabs {
    margin: 28px 0 24px;
    gap: 12px;
  }
  /* The arrows cost ~100px of a ~330px row. Touch can swipe the strip, so drop
     them and give the strip the full width - the fade still signals overflow. */
  .ac-tabs-controls {
    display: none;
  }
  .ac-tabs-strip {
    -webkit-mask-image: linear-gradient(
      to right,
      #000 0,
      #000 calc(100% - 40px),
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      #000 0,
      #000 calc(100% - 40px),
      transparent 100%
    );
  }
  .ac-tabs-strip.is-at-end {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .ac-tab {
    font-size: 15px;
    padding: 10px 18px;
  }

  /* .ac-section-full sets its own margin-top, so the 64px mobile rhythm applied
     to .ac-section skipped it. */
  .ac-section-full {
    margin-top: 64px;
  }

  .ac-lesson-header {
    margin-top: 36px;
  }
  .ac-breadcrumbs {
    /* font-size dropped: it existed to raise marketing from 14 to 15 on small
       screens, and 15 is now the base everywhere. */
    margin-top: 28px;
    gap: 8px;
  }
}

@media (max-width: 520px) {
  .ac-meta {
    font-size: 22px;
  }
  .ac-h2 {
    font-size: 24px;
    line-height: 32px;
  }

  .ac-site-cta {
    padding: 10px 20px;
    font-size: 14px;
  }
  .ac-site-logo {
    height: 36px;
  }

  /* Timestamps restack: timecode and state share the first row, the text spans
     the full width beneath. A 72px timecode column plus a 34px state column left
     under 200px for the body, which is not a readable measure. */
  .ac-ts {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
    padding: 22px 0 26px;
  }
  .ac-ts-time {
    grid-column: 1;
    grid-row: 1;
    padding-left: 0;
  }
  .ac-ts-state {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    margin-top: 0;
  }
  .ac-ts-body {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  /* The 17px hang that aligns body text under the title on desktop is width we
     cannot spare here. */
  .ac-path-text,
  .ac-path-more {
    margin-left: 0;
  }
  .ac-path-list {
    gap: 22px;
  }

  .ac-avatar {
    width: 72px;
    height: 72px;
    border-radius: 12px;
  }
  .ac-instructor-name {
    font-size: 20px;
    line-height: 28px;
  }

  .ac-card {
    padding: 28px 20px 32px;
  }
  .ac-card-title {
    font-size: 18px;
    line-height: 26px;
    margin-bottom: 16px;
  }
  .ac-testimonial {
    padding: 28px 20px;
  }
  .ac-quote {
    font-size: 16px;
    line-height: 26px;
    margin-top: 28px;
  }
  .ac-watch {
    padding: 20px;
  }
}

/* ---- horizontal overflow guard ----------------------------------------- */
/* Belt and braces: below the frame width nothing is meant to extend past the
   container, so clip there. `clip` rather than `hidden` deliberately - hidden
   forces overflow-y into a scroll container and would break the tracker's
   position: sticky between 900 and 1440. */
@media (max-width: 1439px) {
  /* The clip has to sit ABOVE #course-root: the 1440 bleed is a deliberate
     breakout from the 1216 container, so clipping on the container itself
     would cut it back to exactly the width this whole layer exists to escape.
     `clip` rather than `hidden` - hidden makes a scroll container and would
     break the tracker's position: sticky between 900 and 1440. */
  html,
  body {
    overflow-x: clip;
  }
}
/* Below the container's max width the gutter is eating the viewport rather than
   revealing artwork, so it steps back down. */
@media (max-width: 1216px) {
  #course-root {
    --ac-gutter: 48px;
  }
}

@media (max-width: 720px) {
  /* Wider than desktop's 24 deliberately - text sat too close to the screen
     edge on a phone. Only safe below 1216, where max-width no longer binds. */
  #course-root {
    --ac-gutter: 28px;
  }
  /* With the shape hidden the layer is only the wash, which reaches white by
     250px - so this just trims dead height. */
  .ac-hero-bleed {
    height: 400px;
  }
}