/* ═══════════════════════════════════════════════════════════════════════
   M-A-S-T-E-R.ai — site chrome (theme-core owned).
   Nav (SiteNav port), footer (SiteFooter port), designed 404, generic
   page container, member gate card. Design-system utilities (hv-*, u-grow,
   lnk-light, skip-link…) live in assets/css/main.css.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── SiteNav ─────────────────────────────────────────────────────────── */

.master-nav {
  /* Consumed by the open-menu max-height below. */
  --master-nav-h: 64px;
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--master-nav-ground) 94%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--master-color-caliper);
  box-shadow: none;
  transition: box-shadow 0.3s ease;
}

.master-nav.is-scrolled {
  box-shadow: 0 4px 18px rgba(17, 24, 39, 0.07);
}

.master-nav__inner {
  /* The containing block for the panels. Anchoring them to the bar rather than
     to their own trigger is what keeps them on screen — see .master-panel. */
  position: relative;
  max-width: 1140px;
  margin: 0 auto;
  padding: 12px clamp(16px, 4vw, 32px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.master-nav__brand {
  display: flex;
  min-width: 0;
}

.master-nav__logo,
.master-nav__brand .custom-logo-link {
  display: flex;
}

.master-nav__logo img,
.master-nav__brand .custom-logo {
  /* Was clamp(30px, 4.5vw, 36px) — a small mark beside a 44px burger, which on
     a phone did not read as the thing that owns the page. Up 53% at the floor
     and 67% at the ceiling. The open-menu cap is measured rather than assumed,
     so a taller bar cannot push the menu off screen. */
  height: clamp(46px, 6.5vw, 60px);
  width: auto;
  display: block;
}

.master-nav__menu {
  display: flex;
  align-items: center;
  gap: 2px;
}

.master-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 2px;
}

.master-nav__list a {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 12px 10px;
  border-radius: 8px;
  color: var(--master-ink);
}

/* Hover and keyboard focus on the top level. Every item behaved identically to
   plain text under the cursor — only the panel rows responded — so there was no
   feedback at all on Programs, Learn, Pricing, About or Log in. */
.master-nav__list a.master-nav__link:hover,
.master-nav__list a.master-nav__link:focus-visible,
.master-nav__disclosure:hover,
.master-nav__disclosure:focus-visible,
.master-nav__pair:hover > .master-nav__link {
  color: var(--master-accent-text-pressed);
  background: var(--master-color-tracing);
}

.master-nav__list a.master-nav__link,
.master-nav__disclosure {
  transition: color 120ms ease, background-color 120ms ease;
}

/* Label and chevron are two controls that have to read as one item: the pair
   shares a rounded background and the seam between them disappears. */
.master-nav__pair {
  display: inline-flex;
  align-items: stretch;
  border-radius: 8px;
}

.master-nav__pair > .master-nav__link {
  padding-right: 4px;
  border-radius: 8px 0 0 8px;
}

.master-nav__pair > .master-nav__disclosure {
  /* A 7px chevron with 4px either side is a 20px target, under the 24px
     WCAG 2.2 minimum — splitting the trigger in two is what shrank it.
     The box is widened rather than the glyph. */
  min-width: 30px;
  justify-content: center;
  padding-inline: 6px;
  border-radius: 0 8px 8px 0;
}

.master-nav__pair:hover > .master-nav__disclosure,
.master-nav__item.is-open > .master-nav__pair > .master-nav__disclosure,
.master-nav__item.is-open > .master-nav__pair > .master-nav__link {
  color: var(--master-accent-text);
  background: var(--master-color-tracing);
}

@media (prefers-reduced-motion: reduce) {
  .master-nav__list > li > a,
  .master-nav__disclosure { transition: none; }
}

.master-nav__list .current-menu-item > a,
.master-nav__list .current-menu-ancestor > a,
.master-nav__list a[aria-current="page"],
.master-nav__item.is-current > .master-nav__pair > .master-nav__link {
  color: var(--master-accent-text);
}

/* Inside a panel the marker has to be more than colour — the row is already
   coloured type on a light card, so the current page gets a rule beside it. */
.master-panel a[aria-current="page"] {
  background: var(--master-color-tracing);
  box-shadow: inset 2px 0 0 var(--master-accent-mark);
}

.master-nav__enroll {
  display: inline-block;
  background: var(--master-accent);
  color: var(--master-color-chalk);
  padding: 11px 20px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  margin-left: 10px;
}

.master-nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1.5px solid var(--master-color-scribe);
  border-radius: 8px;
  background: var(--master-color-chalk);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex: none;
  color: var(--master-ink);
}

.master-nav__toggle-close {
  display: none;
}

.master-nav.is-open .master-nav__toggle-open {
  display: none;
}

.master-nav.is-open .master-nav__toggle-close {
  display: inline;
}

@media (max-width: 960px) {
  .master-nav__inner {
    flex-wrap: wrap;
  }

  .master-nav__toggle {
    display: inline-flex;
  }

  .master-nav__menu {
    display: none;
    flex: 1 0 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    border-top: 1px solid var(--master-color-caliper);
    margin-top: 12px;
    padding: 8px 0 8px;
  }

  .master-nav.is-open .master-nav__menu {
    display: flex;
    /* The menu opens in normal flow at a fixed ~436px. On a phone in landscape
       that is taller than the screen, which pushed LOG IN and Enroll below the
       fold with no way to scroll to them. Cap it to what is actually left
       under the bar and let the menu itself scroll. */
    max-height: calc(100dvh - var(--master-nav-h, 64px) - 12px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* Short viewports — almost always a phone held sideways. A single column of
     nine rows cannot fit in ~360px, so the list goes two-up and the whole menu
     lands on screen without scrolling. */
  @media (max-height: 560px) {
    .master-nav__menu {
      margin-top: 8px;
      padding: 4px 0;
    }

    .master-nav__list {
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: 8px;
    }

    .master-nav__list a,
    .master-nav__enroll {
      padding-top: 9px;
      padding-bottom: 9px;
    }

    /* The enrol button is the point of the menu — it spans, and stays last. */
    .master-nav__enroll {
      margin-top: 6px;
      text-align: center;
    }
  }

  .master-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .master-nav__list li {
    display: block;
  }

  .master-nav__list a {
    display: block;
    padding: 14px 4px;
    border-bottom: 1px solid var(--master-color-caliper);
    border-radius: 8px;
  }

  .master-nav__enroll {
    margin: 14px 0 0;
    padding: 13px 20px;
    font-size: 15px;
    text-align: center;
  }
}

/* ── SiteFooter ──────────────────────────────────────────────────────── */

.master-footer {
  background: var(--master-color-pitch);
}

.master-footer__inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: clamp(40px, 7vw, 56px) clamp(16px, 4vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* ── Footer head: brand + the direct line, side by side ─────────────────── */
.master-footer__head {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(210px, 0.9fr);
  gap: clamp(20px, 3vw, 48px);
  align-items: start;
}

.master-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}

.master-footer__contact {
  border-left: 1px solid var(--master-ink);
  padding-left: clamp(16px, 2vw, 26px);
}

.master-footer__contact-label {
  margin: 0 0 6px;
  color: var(--master-color-pumice);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.master-footer__mail {
  display: inline-block;
  color: var(--master-color-chalk);
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: clamp(16px, 1.7vw, 19px);
  font-weight: 600;
  letter-spacing: -0.015em;
  padding: 4px 0;
}

.master-footer__mail:hover,
.master-footer__mail:focus-visible {
  color: var(--master-color-verdigris);
}

.master-footer__contact-note {
  margin: 6px 0 0;
  color: var(--master-color-pumice);
  font-size: 12.5px;
  line-height: 1.5;
  max-width: 30ch;
}

/* ── The site index: five columns that reflow rather than break ─────────── */
.master-footer__index {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--master-ink);
  padding-top: clamp(24px, 3vw, 34px);
}

/* Three columns to a row, two rows. Six across crowded every heading and
   wrapped half the labels onto two lines. */
.master-footer__row {
  --master-foot-gap: clamp(26px, 3.4vw, 52px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--master-foot-gap);
}

.master-footer__col {
  position: relative;
  min-width: 0;
}

/* Vertical rules to answer the horizontal one — drawn in the gutter, fading at
   both ends so they read as rules rather than borders. */
.master-footer__col + .master-footer__col::before {
  content: "";
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: calc(var(--master-foot-gap) / -2);
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--master-color-filings) 16%, var(--master-color-filings) 84%, transparent);
}

/* The rule between the rows. It is drawn as a gradient rather than a plain
   border so it fades out at both ends instead of stopping dead — the same
   hairline the summit card uses along its top edge, quieted down. */
.master-footer__row--second {
  position: relative;
  margin-top: clamp(28px, 3.4vw, 44px);
  padding-top: clamp(28px, 3.4vw, 44px);
}

.master-footer__row--second::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--master-color-filings) 12%, var(--master-color-filings) 88%, transparent);
}

@media (max-width: 860px) {
  .master-footer__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Two up: only the right-hand column of each pair carries a rule. */
  .master-footer__col + .master-footer__col::before { display: none; }
  .master-footer__col:nth-child(even)::before { display: block; }
}

@media (max-width: 460px) {
  .master-footer__row { grid-template-columns: minmax(0, 1fr); }
  .master-footer__col::before { display: none !important; }
}

/* THE HUB'S FOOTER — two columns, and they are not the same weight.
   The three-column grid above is sized for the course footer, which fills all
   three. The hub has two: the courses, and the handful of things that belong
   to the network. Inheriting the course grid left a third of the width empty
   on the right and squeezed both real columns into the other two thirds.

   2fr / 1fr because the columns are not peers. The left one is why anybody is
   on the hub — it lists what there is to buy, each entry carrying a name and a
   line of detail. The right one is Contact and Log in.

   EVERY BREAKPOINT IS RESTATED HERE ON PURPOSE. These selectors have the same
   specificity as the base ones, (0,1,0), and a media query adds none — so the
   only thing separating them is source order, and this block wins simply by
   being later in the file. That means the base rules above no longer reach the
   hub at ANY width: without the stacking rule restated below, the hub footer
   would still be two columns on a phone. */
.master-footer__row--hub {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

@media (max-width: 460px) {
  .master-footer__row--hub { grid-template-columns: minmax(0, 1fr); }
}

.master-footer__col-title {
  margin: 0 0 10px;
  color: var(--master-color-chalk);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.13em;
  line-height: 1.3;
  text-transform: uppercase;
}

.master-footer__col-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  /* The price is pushed to the right of the row so the figures line up in a
     column. Across a full-width column that left a 140–225px canyon between a
     label and its own price. Capping the list halves the gap and keeps the
     alignment — the numbers still form a column, just a closer one. */
  max-width: min(100%, 15.5rem);
}

.master-footer__col-list a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  /* space-between pushed a wrapped label into the middle of the row — "The
     Master Mind" read as centred. The price is pushed right instead, so the
     label always starts on the left edge however it wraps. */
  /* 24px minimum target, per WCAG 2.2 — this is a menu, not prose. */
  padding: 6px 8px 6px 0;
  color: var(--master-color-pumice);
  font-size: 13.5px;
  line-height: 1.45;
  border-radius: 4px;
}

.master-footer__col-list a:hover,
.master-footer__col-list a:focus-visible {
  color: var(--master-color-chalk);
}

/* The price sits right, quietly, so the ladder reads as a ladder. */
.master-footer__meta {
  margin-left: auto;
  padding-left: 10px;
  text-align: right;
  color: var(--master-color-pumice);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.master-footer__col-list a:hover .master-footer__meta {
  color: var(--master-color-verdigris);
}

/* The summit of the ladder, marked the way the pricing page marks it. */
.master-footer__summit {
  color: var(--master-color-chalk) !important;
  font-weight: 600;
}

.master-footer__summit::before {
  content: "";
  width: 3px;
  align-self: stretch;
  margin-right: 7px;
  border-radius: 2px;
  background: linear-gradient(var(--master-color-verdigris), #d7374f);
}

.master-footer__logo {
  display: inline-flex;
  align-self: flex-start;
}

.master-footer__logo img {
  /* Was 34px. Moved up with the header mark so the brand reads at the same
     weight at both ends of the page. */
  height: clamp(46px, 5vw, 54px);
  width: auto;
  display: block;
}

.master-footer__about {
  margin: 0;
  color: var(--master-color-pumice);
  font-size: 14px;
  line-height: 1.6;
  max-width: 640px;
}

@media (max-width: 720px) {
  .master-footer__head {
    grid-template-columns: 1fr;
  }

  .master-footer__contact {
    border-left: 0;
    border-top: 1px solid var(--master-ink);
    padding-left: 0;
    padding-top: 18px;
  }
}

.master-footer__bottom::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--master-color-filings) 12%, var(--master-color-filings) 88%, transparent);
}

.master-footer__bottom {
  position: relative;
  margin-top: clamp(10px, 2vw, 18px);
  padding-top: clamp(24px, 3vw, 32px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px 28px;
  flex-wrap: wrap;
}

.master-footer__tagline {
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--master-color-chalk);
}

.master-footer__nav {
  font-size: 13.5px;
}

.master-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 16px;
}

.master-footer__list a {
  color: var(--master-color-pumice);
  /* The footer row is a menu, not prose, so WCAG 2.2 target-size applies:
     the text is 16px tall, which is under the 24px minimum. Padding gives it
     a real hit area; the negative inline margin keeps the row looking the
     same width it always did. */
  display: inline-block;
  padding: 5px 6px;
  margin-inline: -6px;
}

.master-footer__legal {
  margin: 0;
  color: var(--master-color-pumice);
  font-size: 12.5px;
}

/* ── Designed 404 ─────────────────────────────────────────────────────
   Two sources render into this shell: the hardcoded fallback in 404.php
   (divs) and the blocks of the optional "404" Page (paragraphs/headings).
   The margin resets below make both land identically.
   ────────────────────────────────────────────────────────────────────── */

.master-notfound__inner {
  max-width: 920px;
  margin: 0 auto;
  padding: clamp(72px, 11vw, 140px) clamp(16px, 4vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 52vh;
}

.master-notfound__eyebrow {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--master-accent-text);
}

.master-notfound__title {
  font-family: "Space Grotesk", Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(34px, 5.5vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 640px;
  text-wrap: pretty;
}

.master-notfound__copy {
  font-size: 17px;
  line-height: 1.55;
  color: var(--master-color-graphite);
  margin: 0;
  max-width: 540px;
  text-wrap: pretty;
}

.master-notfound__actions {
  display: flex;
  gap: 14px 26px;
  flex-wrap: wrap;
  align-items: center;
  margin: 6px 0 0;
}

.master-notfound__home {
  display: inline-block;
  background: var(--master-accent);
  color: var(--master-color-chalk);
  padding: 15px 28px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 16px;
}

.master-notfound__link {
  color: var(--master-accent-text);
  font-weight: 600;
  font-size: 15px;
}

/* ── Generic page container (page.php / index.php) ───────────────────── */

.master-page__inner {
  max-width: 920px;
  margin: 0 auto;
  padding: clamp(48px, 7vw, 84px) clamp(16px, 4vw, 32px);
}

.master-page__title {
  font-family: "Space Grotesk", Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(32px, 5vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 24px;
  text-wrap: pretty;
}

.master-page__content {
  font-size: 16px;
  line-height: 1.65;
  color: var(--master-ink);
}

.master-page__content img {
  max-width: 100%;
  height: auto;
}

.master-page__entry + .master-page__entry {
  margin-top: 36px;
  border-top: 1px solid var(--master-color-caliper);
  padding-top: 36px;
}

.master-page__entry-title {
  font-family: "Space Grotesk", Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(22px, 3.2vw, 28px);
  letter-spacing: -0.015em;
  margin: 0 0 10px;
}

.master-page__entry-title a {
  color: var(--master-ink);
}

.master-page__excerpt {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--master-color-graphite);
}

.master-page__pages {
  margin-top: 24px;
  font-weight: 600;
}

/* ── Member gate (AC Member Area, logged out) ──────────────────────── */

.master-member-gate {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(40px, 7vw, 80px) clamp(16px, 4vw, 32px);
}

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

.master-member-gate__title {
  font-family: "Space Grotesk", Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(26px, 4.5vw, 38px);
  margin: 0;
}

.master-member-gate__copy {
  color: var(--master-color-graphite);
  font-size: 16px;
  margin: 0;
}

.master-member-gate__login {
  display: inline-block;
  background: var(--master-accent);
  color: var(--master-color-chalk);
  padding: 14px 26px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 15px;
}

/* ─────────────────────────────────────────────────────────────────────────
   Header panels — Programs and Learn

   Two panels, not five: only these have enough behind them to justify one.
   Click and keyboard are the contract; hover is layered on in the JS. The
   markup is a real <button> with aria-expanded, so the panel is reachable
   without a pointer.
   ───────────────────────────────────────────────────────────────────────── */
.master-nav__item {
  position: static;
  display: flex;
  align-items: center;
}

.master-nav__disclosure {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
  /* A <button> does not inherit the link treatment, so it is restated here —
     otherwise "Programs" sits in sentence case beside "PRICING". The box has to
     match too: without the link padding the trigger is only as tall as its text,
     which is a ~16px target in a row of 40px ones. */
  color: var(--master-ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 12px 10px;
  border-radius: 8px;
}

.master-nav__chev {
  width: 7px;
  height: 7px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform 140ms ease;
  opacity: 0.6;
}

.master-nav__item.is-open .master-nav__chev {
  transform: rotate(225deg) translateY(-1px);
  opacity: 1;
}

.master-panel {
  position: absolute;
  top: calc(100% + 10px);
  /* Centred on its trigger, an 880px panel hangs off the right of the screen as
     soon as the viewport narrows — 1229px into a 1180px window, measured. The
     nav is right-aligned, so the trigger keeps moving right while the panel
     keeps its width. Anchored to the bar instead, which is capped at 1140px and
     centred, it cannot overflow at any width. The offset is the house gutter
     rather than 0, because `right: 0` resolves to the bar's padding box and
     would sit flush against the screen edge on narrower windows; this lands it
     level with the Enroll button instead. */
  right: clamp(16px, 4vw, 32px);
  left: auto;
  z-index: 60;
  width: max-content;
  max-width: min(94vw, 880px);
  border: 1px solid var(--master-color-scribe);
  border-radius: 18px;
  background: var(--master-color-chalk);
  box-shadow: 0 26px 60px rgba(17, 24, 39, 0.16);
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 150ms ease, transform 150ms ease;
}

.master-nav__item.is-open .master-panel {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* The panels sit inside .master-nav__list, whose links are small, bold, tracked-out
   caps. That is right for five top-level labels and wrong for a sentence — a
   blurb set in caps reads as shouting. Reset it once here, at the top of the
   block, so the label classes further down can opt back in on their own. */
.master-panel a {
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}

.master-panel__inner {
  display: grid;
  gap: clamp(18px, 2.4vw, 34px);
  padding: clamp(20px, 2.4vw, 28px);
}

.master-panel__inner--programs { grid-template-columns: minmax(0, 1.35fr) minmax(230px, 0.85fr); }
.master-panel__inner--learn { grid-template-columns: minmax(0, 1.5fr) minmax(210px, 0.8fr); }

.master-panel__eyebrow {
  margin: 0 0 12px;
  color: var(--master-color-graphite);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.master-panel__ladder,
.master-panel__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.master-panel__grid { grid-template-columns: 1fr 1fr; gap: 2px 12px; }

.master-panel__ladder a,
.master-panel__grid a {
  display: block;
  padding: 9px 10px;
  border-radius: 10px;
  text-decoration: none;
}

.master-panel__ladder a:hover,
.master-panel__ladder a:focus-visible,
.master-panel__grid a:hover,
.master-panel__grid a:focus-visible {
  background: var(--master-color-tracing);
}

/* The ladder reads as a ladder: name and price on one line, promise under it. */
.master-panel__rung {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}

.master-panel__name {
  display: block;
  color: var(--master-ink);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.012em;
}

.master-panel__price {
  color: var(--master-accent-text);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.master-panel__blurb {
  display: block;
  margin-top: 2px;
  color: var(--master-color-graphite);
  font-size: 12.5px;
  line-height: 1.45;
}

.master-panel__meta {
  display: block;
  margin-top: 3px;
  color: var(--master-color-graphite);
  font-size: 11.5px;
}

/* The Watch list — the two featured videos, wherever they appear. Kind, title,
   who, runtime, in that order, behind a play glyph so the row reads as
   something you press rather than another link. */
.master-panel__watch {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.master-panel__watch a {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  text-decoration: none;
}

.master-panel__watch a:hover,
.master-panel__watch a:focus-visible { background: var(--master-color-tracing); }

.master-panel__watch-play {
  flex: none;
  width: 26px;
  height: 26px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--master-accent);
  position: relative;
}

.master-panel__watch-play::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  translate: -50% -50%;
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent var(--master-color-chalk);
}

.master-panel__watch-text { min-width: 0; }

.master-panel__watch-kind {
  display: block;
  color: var(--master-color-verdigris);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Aside: the image, then the summit or the thesis. */
.master-panel__aside {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-left: 1px solid var(--master-color-caliper);
  padding-left: clamp(16px, 2vw, 26px);
}

.master-panel__figure {
  display: block;
  overflow: hidden;
  border-radius: 12px;
  /* Reserved so the panel cannot reflow when the photo arrives. */
  aspect-ratio: 16 / 9;
  background: var(--master-color-tracing);
}

.master-panel__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 320ms ease;
}

.master-panel__summit,
.master-panel__promo {
  display: block;
  text-decoration: none;
  border-radius: 14px;
}

.master-panel__summit:hover .master-panel__figure img,
.master-panel__promo:hover .master-panel__figure img {
  transform: scale(1.04);
}

.master-panel__summit-eyebrow {
  display: block;
  margin-top: 10px;
  color: var(--master-accent-text);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.master-panel__summit-name {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
  color: var(--master-ink);
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.master-panel__summit-blurb {
  display: block;
  margin-top: 4px;
  color: var(--master-color-graphite);
  font-size: 12.5px;
  line-height: 1.45;
}

.master-panel__promo-line {
  display: block;
  margin-top: 10px;
  color: var(--master-ink);
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.master-panel__links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  border-top: 1px solid var(--master-color-caliper);
  padding-top: 10px;
}

.master-panel__links a {
  color: var(--master-accent-text);
  font-size: 12.5px;
  font-weight: 600;
  padding: 5px 0;
}

@media (prefers-reduced-motion: reduce) {
  .master-panel { transition: none; transform: none; }
  .master-panel__figure img { transition: none; }
  .master-nav__chev { transition: none; }
}

/* ── In the mobile disclosure the panels are groups, not menus ──────────── */
@media (max-width: 960px) {
  .master-nav__item { display: block; }

  .master-nav__disclosure {
    width: 100%;
    justify-content: space-between;
  }

  .master-panel {
    position: static;
    translate: none;
    width: auto;
    max-width: none;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

  .master-panel__inner,
  .master-panel__inner--programs,
  .master-panel__inner--learn {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 2px 0 10px;
  }

  .master-panel__aside {
    border-left: 0;
    border-top: 1px solid var(--master-color-caliper);
    padding-left: 0;
    padding-top: 12px;
  }

  /* The chevron is the affordance here: these are accordions, and a row that
     expands has to look like one. */
  .master-nav__chev { opacity: 0.85; }

  /* On a phone the label and the chevron are two separate taps: the label goes
     to the page, the chevron opens the group. Both keep a 44px-tall target. */
  .master-nav__pair {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--master-color-caliper);
  }

  .master-nav__pair > .master-nav__link {
    flex: 1 1 auto;
    border-bottom: 0;
    border-radius: 8px 0 0 8px;
  }

  .master-nav__pair > .master-nav__disclosure {
    flex: none;
    width: 52px;
    justify-content: center;
    border-radius: 0 8px 8px 0;
  }

  .master-panel__eyebrow { margin-bottom: 6px; }

  /* An open group is indented under its own label so the nesting is visible
     rather than reading as one long flat list. */
  .master-nav__item--has-panel.is-open .master-panel__inner {
    border-left: 2px solid var(--master-color-caliper);
    padding-left: 12px;
  }
}

/* Short landscape: the two-column list from the menu-overflow fix still has to
   hold, so the panels collapse to their links and the imagery steps aside. */
@media (max-height: 560px) {
  .master-panel__figure,
  .master-panel__meta,
  .master-panel__blurb,
  .master-panel__summit-blurb { display: none; }

  .master-panel__grid { grid-template-columns: 1fr 1fr; }
  .master-panel__ladder a,
  .master-panel__grid a { padding: 6px 8px; }
}

/* ─── Brand marks ─────────────────────────────────────────────────────────
   ADDED 2026-09-04. This block did not exist. Our pages/_chrome.css was a
   fork of the sister theme's file that stopped one line before its own
   "Brand marks" section, so we inherited every chrome rule EXCEPT the one
   that makes the identity a system. The omission produced no diff signal
   and no conflicting rule — it was a missing tail, which is why it survived.

   THE SYSTEM IS THREE OBJECTS WITH NON-OVERLAPPING JOBS, NOT ONE LOCKUP.
     assets/brand/logo/wordmark.svg          12.263046:1  nav
     assets/brand/logo/wordmark-inverse.svg  12.263046:1  footer
     assets/brand/logo/emblem-ai.svg          1.709422:1  closing CTA band
   Every ratio above is the file's measured INK box, not its artboard: each
   file's viewBox was trimmed to the ink, so re-rendering it returns ink at
   exactly 0 0 w h. Provenance and the trim arithmetic are in each file's
   own header comment.

   WHICH MARK GOES WHERE IS A STATED RULE, NOT A LAYOUT PREFERENCE.
   M-A-S-T-E-R.ai_Site_Native_Tokens.json (Stage 03, Site Native Emblem Brand
   System v4) sets identity.nav = "wordmark only" and identity.aiRule =
   "exactly once", and lists "duplicate .ai" among prohibited[]. The wordmark
   owns the suffix and emblem-ai.svg carries its own, so the two may never
   share a field: that would be two suffixes, the prohibited state. The
   emblem therefore earns its place only in the closing band, where no
   wordmark sits beside it. Do not "balance" the nav by adding the emblem.

   SIZED BY HEIGHT, width:auto, AND DELIBERATELY NOT BY THE
   .master-nav__logo img RULE ABOVE. That rule's clamp(46px, 6.5vw, 60px)
   was written for the old 2.636:1 stacked lockup at assets/svg/. Our
   wordmark is 12.263:1, so 60px tall would draw it 736px wide and swallow a
   1140px rail. The rules below override it and are last in the file on
   purpose. Both rules are kept: the generic one still serves a Customizer
   custom logo of unknown shape.

   HOW THE CLAMPS WERE CHOSEN. Not by eye, and not by copying the sister's
   numbers, because a clamp is only meaningful against a ratio. The sister's
   9.437:1 nav wordmark at clamp(24px, 3.2vw, 32px) occupies 226px to 302px
   of nav WIDTH; width is what a nav is short of, so that band — not its
   height — is the thing worth matching. Ours is 30% wider per unit of
   height, so the same width band is 226/12.263 = 18.4px to
   302/12.263 = 24.6px of height. Hence 18px and 24px below.
   The archive's own site-native board (01_Header_Wordmark_27px.svg, a 190x65
   artboard drawing the wordmark 153.0px wide and 12.5px tall) and the live
   audit it was built from (navigation.wordmark_width_px 152.84) describe the
   PREVIOUS design, which placed the untrimmed 5.5:1 artboard at 27px and so
   drew a 12.5px mark. Named here because the two numbers look like they
   disagree and the next builder deserves to know why they do not.

   RESULTING WIDTHS, so nobody has to recompute them to check a breakpoint:
     nav     18px  ->  220.7px      24px  ->  294.3px
     footer  22px  ->  269.8px      29px  ->  355.6px
     band    61px  ->  104.3px      78px  ->  133.3px
   ───────────────────────────────────────────────────────────────────────── */

.master-nav__logo .master-nav__wordmark {
  height: clamp(18px, 1.9vw, 24px);
  width: auto;
  display: block;
}

/* The bar used to be as tall as the 46-60px stacked lockup inside it. The
   wordmark is an 18-24px line, so the bar would otherwise shrink with it.
   MEASURED on the live page rather than estimated: with this rule the bar is
   88px at both 375px and 1440px; with min-height forced to 0 it drops to
   68px, at which point the 44px burger is the tallest thing in it and the
   brand no longer sets the bar's height. 88px is within 4px of the 84px the
   bar measured before this change, so the chrome keeps its proportions
   instead of jumping when the mark changed shape.
   It also makes --master-nav-h true. That custom property is declared 64px
   at the top of this file and the open-menu max-height below computes from
   it; until now nothing enforced it and the bar was whatever the logo
   happened to be. */
.master-nav__inner {
  min-height: var(--master-nav-h);
}

/* The footer band is ink, so the mark reverses out of it — a separate
   artwork file, not a filter; see wordmark-inverse.svg. One step larger than
   the header: it is the closing signature and has the room. */
.master-footer__logo .master-footer__wordmark {
  height: clamp(22px, 2.4vw, 29px);
  width: auto;
  display: block;
}

/* ── Footer: page-09 Ink Parent-Led lockup (course only) ─────────────── */
/*
   SIZED BY THE OWNER, 2026-09-05, IN TWO STEPS, AND COMPLIANCE WAS THE PRICE.
   For a few hours this was the ONLY coupled Attorneys lockup on the site that
   met rule 03: at 530px it drew a 28.205px parent cap, over the 28px floor.
   It was then halved to 265px (14.10px cap) and taken back up 20 percent to
   318px, where it sits: 115.18px tall for a 16.92px cap, 40 percent under the
   floor. This band is a recorded deviation like the nav now, not the one
   compliant placement.

   Nothing about the artwork changed and nothing was relaxed to allow it; the
   compliant width is still 526.05px and is one number away if it is ever
   wanted back. The arithmetic below is kept for exactly that reason.

   The lockup's parent wordmark is drawn at scale(0.4) on 90-unit letters, so
   its cap is 36 of the lockup's 245 units: a ratio of 0.146939 — noticeably
   healthier than the Attorneys-Led lockup's 0.1179. Rule 03 SEPARATE WHEN
   SMALL wants that cap at 28px, which needs the mark 190.55px tall and, at
   2.76089:1, 526.05px wide.

   THE COMPLIANT CEILING WAS 530px, NOT 526px, AND THE 4px MATTERED. 526 was
   the rounded figure and it rendered a 27.99px cap — under the floor by 0.01px,
   which is still under it. Measured live rather than trusted: 530px drew
   191.97px tall for a 28.21px cap. That is the number to restore if compliance
   is ever wanted back. The current 318px is 60 percent of it.

   THE COLUMN AFFORDS IT. .master-footer__brand measures 705px live at a 1280px
   viewport, so 526px fits with 179px to spare. That is why this band gets the
   compliant size while the nav does not: the nav had 605px of bar against the
   728px its lockup needed, and had to deviate.

   AT 318px THE CEILING STILL BINDS EVERYWHERE, which is a side effect worth
   knowing. The brand column measures 705px at a 1280px viewport and 358px at
   390px, and 318 is below both, so the mark draws the same 318 x 115.2 at every
   viewport and the cap sits at 16.92px throughout. Back when the ceiling was
   530px the phone was the worse case at 19.05px; desktop and phone have matched
   since it dropped below 358. width:100% is kept so a column narrower than
   318px would still shrink the mark rather than overflow it.

   The hub keeps .master-footer__wordmark above: it is the parent and carries no
   profession.
*/
.master-footer__logo .master-footer__lockup {
  display: block;
  width: 100%;
  max-width: 318px;
  height: auto;
}

/* The closing band is the one place on the page where the emblem carries the
   brand alone, so it takes A1 — the with-.ai emblem. A1 is the DISCOVERY
   state and the system gates it: the suffix tree allows it only where no
   full wordmark sits beside it, and never below 96px WIDE
   (M-A-S-T-E-R.ai_Standalone_Emblem_Tokens.json: A1.minimum_px 96,
   rules[] "A1 never below 96px/24mm", "wordmark and A1 never pair").
   Both hold here: the band carries no wordmark, and at 1.709422:1 this clamp
   keeps the mark between 104.3px and 133.3px wide at every viewport, so it
   cannot slip under the floor at a breakpoint. If this clamp is ever
   lowered, re-derive the floor before shipping it. */
.master-cta-band__mark {
  height: clamp(61px, 5.8vw, 78px);
  width: auto;
  display: block;
  margin-bottom: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════
   THE COURSE SUB-BRAND — emblem + uncoupled Attorneys page label.

   WHY THIS COMPOSITION AND NOT A SUPPLIED LOCKUP. Rule 03 of
   ___Update 008/M-A-S-T-E-R.ai_Attorneys_03_Spacing_and_Sizing_Standard.svg
   reads, verbatim: "Below 28 px parent cap height, use the emblem and an
   uncoupled Attorneys page label." H is the parent cap height, and it is
   MEASURED, not assumed: the capital M in wordmark.svg is 75.06 user units
   against a 78.2484 ink box, so H = 0.959253 x rendered mark height. (The
   3.19-unit remainder is the S's optical overshoot below the baseline, NOT a
   .ai descender — the .ai group measures y 21.99 to 75.19 and ends exactly on
   the cap baseline. Anyone deriving 0.32H/0.25H/1.00H offsets must use
   0.959253 x mark height; using the box height inflates every derived
   measure by 4.2%.)

     nav    clamp(18px, 1.9vw, 24px)  ->  cap 17.27px .. 23.02px
     footer clamp(22px, 2.4vw, 29px)  ->  cap 21.10px .. 27.82px

   Every value is under 28px, so nothing on either end of the page may COUPLE
   a descriptor to the parent. The nav's closest approach is 17.8% short; the
   footer ceiling misses by 0.18px.

   ONLY THE NAV CHANGES. The footer keeps the parent wordmark, alone and
   exactly as the hub draws it, because rule 01 asks that one complete parent
   signature be preserved and — with the nav switched to A0 — that band is the
   only place a course page still carries one. A bare parent wordmark with no
   descriptor is not a coupled lockup, so the 28px threshold does not touch
   it, and no "Attorneys" label may join it there without becoming exactly the
   coupling rule 03 forbids. So there are no .master-footer__emblem rules
   below: the sub-brand lives in the nav, the parent closes the page.

   NOTHING SUPPLIED SATISFIES RULE 03 DIRECTLY. All ten compositions in the
   V3 colourway set contain <use href="#wm-master-ai">, so not one is
   "uncoupled" — including the file named Uncoupled.svg, which is the parent
   WORDMARK plus a label and carries no emblem at all. Rule 03's remedy is the
   EMBLEM plus a label, so this pair is assembled from the supplied emblem
   (extracted, not redrawn) and ordinary HTML text.

   THE EMBLEM IS A0, NOT emblem-ai.svg. emblem-ai.svg is A1, the emblem WITH
   .ai, and its tokens read "A1 never below 96px/24mm" and "A0 is the
   fallback". At these sizes A1 is illegal. A0 also keeps identity.aiRule
   "exactly once" true, because it carries no suffix and the label adds none.

   RULE 05 IS SATISFIED. The emblem's five red bars are #bars-master, the
   master hyphens; rule 05 reads "Red belongs to the master hyphens and the
   quiet descriptor", so both the bars and this red label are the sanctioned
   red rather than an added shape. No other red is introduced, INDEX green
   remains the site accent, and no site token is repainted.

   SIZING IS BUDGETED, NOT EYEBALLED. At 375px the bar leaves
   375 - 32 (padding) - 16 (gap) - 44 (burger) = 283px beside the burger. This
   pair spends 35.9px (emblem at the 30px floor, ink ratio 1.196507:1) + 10px
   + 68.4px ("Attorneys" at 14px, wght 650, measured against the shipped
   variable font) = 114.3px, so it fits with 169px to spare and the bar cannot
   wrap. Space Grotesk's real capHeight/upm is 0.70.
   ═══════════════════════════════════════════════════════════════════════ */

.master-nav__logo--attorneys {
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.master-nav__logo .master-nav__emblem {
  height: clamp(30px, 2.6vw, 36px);
  width: auto;
  display: block;
  flex: none;
}

.master-nav__pagelabel {
  font-family: "Space Grotesk", Arial, sans-serif;
  /* 650 is not a guess: it is the weight the standard's own .label class sets
     for "Attorneys" (page 03 line 81), and rule 02 asks for a medium weight.
     letter-spacing matches that class too. Sentence Case, no container, no
     decorative punctuation — rule 02 in full. */
  font-weight: 650;
  font-size: clamp(14px, 1.15vw, 16px);
  letter-spacing: -0.2px;
  line-height: 1;
  color: #D7374F;
  white-space: nowrap;
}


/* ── Nav: page-06 DomainLead lockup ──────────────────────────────────── */
/*
   OWNER-ACCEPTED RULE 03 DEVIATION, AT EVERY WIDTH. header.php carries the
   long note. Short version: this lockup's parent cap is exactly 0.500 of its
   height, rule 03 SEPARATE WHEN SMALL wants that cap at 28px, and no nav
   width on this site affords it. The owner was shown the numbers and chose to
   ship it. Do not "correct" this back without asking them.

   SIZED BY THE OWNER, 2026-09-05, in three steps: 554 x 45.8px was too large
   in the bar; halved to 277 x 22.9; up 20 percent to 332 x 27.5; a further 20
   percent to 398 x 33, where it sits. Parent cap 16.5px, 41 percent under the
   floor.

   NOW SHOWN AT EVERY VIEWPORT, on the owner's instruction. It previously
   appeared only above 1024px and handed phones and tablets back to the emblem
   + uncoupled label. That split is now gone, which is the one thing this
   change IMPROVES: header.php's own note warned that a desktop-only coupled
   lockup "would split the identity across breakpoints, which strains rule 06".
   One object now states the brand everywhere.

   WHAT IT COSTS, stated rather than buried. Measured live:
       viewport   slot      drawn        parent cap
        375px               279 x 23.1     11.55px   (59 percent under)
        768px               398 x 32.9     16.46px   (41 percent under)
       1024px               364 x 30.1     15.06px   (46 percent under)
       1280px               398 x 33.0     16.50px   (41 percent under)
   The phone is the worst case because the slot, not the choice, sets it.

   TWO WIDTH FORMULAS, BECAUSE THE BAR HAS TWO LAYOUTS. The nav switches at
   max-width:960px (line 193): below it a 44px burger, above it the full menu.
   Each leaves the mark a different amount, and both numbers are measured.

     <= 960px, burger:  16px pad + 44px burger + 16px pad + 12px gap = 88px.
       The first cut used exactly 100vw - 88px, which at 375px drew 287px and
       summed to precisely 375 — zero slack, so the burger wrapped to a second
       row and the bar grew 89px -> 109px. It is now 100vw - 96px, leaving 8px,
       and the bar stays 89px.

     >= 961px, full menu: the menu needs 566.9px on one line and wrapping "Log
       in" is the tell. 100vw - 660px keeps it whole: at 1024px the mark takes
       364px and the menu still gets 576px. A first attempt let the mark reach
       389px there and the menu wrapped again — the same one-pixel-class defect
       as the earlier 559px round, caught by testing 1024 rather than assuming
       desktop behaviour held.

   Above roughly 1058px the owner's 398px ceiling takes over, which is why
   tablet and desktop draw identically instead of the tablet ballooning into
   its 681px of free bar.

   SELECTOR: .master-nav__logo .master-nav__domainlock, matching the wordmark
   rule above. A bare class is 0,1,0 and loses to the generic
   .master-nav__logo img rule (0,1,1) no matter how late it appears — that
   defect sized this mark 60px tall once and defeated a display:none once.
   LAST IN THE FILE ON PURPOSE, same as the wordmark rules.
*/
.master-nav__logo .master-nav__domainlock {
  display: block;
  height: auto;
  width: 100%;
  max-width: min(398px, calc(100vw - 96px));
  flex: none;
}

/* Above the nav's own 960px switch the burger gives way to the full menu, and
   the menu — not the burger — becomes the thing the mark must not crowd. */
@media (min-width: 961px) {
  .master-nav__logo .master-nav__domainlock {
    max-width: min(398px, calc(100vw - 660px));
  }
}

/* One identity at a time: the lockup already contains a complete parent
   signature, so showing the emblem and label beside it would state the brand
   twice and break rule 01's "one complete parent signature". Now unconditional,
   because the lockup is. */
.master-nav__logo .master-nav__emblem,
.master-nav__logo .master-nav__pagelabel {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   THE ATTORNEYS COURSE — chrome (redesign 2026-09, README §5.1)

   Values are taken from mockups/SiteHeader.dc.html. The markup already
   matched: header.php prints the same BEM structure the mock draws, down to
   the split link-plus-chevron pair, so this is a restyle and not a rewrite.

   Everything here is scoped. The declarations above stay the network default
   and blog 1 keeps the header it has today.
   ═══════════════════════════════════════════════════════════════════════ */

@keyframes mstDrop {
  from { transform: translateY(-6px); opacity: 0; }
  to   { transform: none;             opacity: 1; }
}

/* ── the bar ─────────────────────────────────────────────────────────── */
/* .master-nav__inner carries min-height: var(--master-nav-h), and that rule is
   deliberate — it stops the bar shrinking to whatever the logo happens to be.
   So the height is retuned through the variable rather than by overriding the
   rule. 44px of content plus the 10px padding each side gives a 64px bar, which
   is the bottom of README §5.1's "64-72px"; the theme's own default of 64
   produced 84px, measured on staging.
   The phone sheet's max-height computes from the same variable, so it is given
   the TRUE bar height here or the open menu would run 20px past the viewport. */
[data-course="attorneys"] .master-nav {
  --master-nav-h: 44px;
}

@media (max-width: 1000px) {
  [data-course="attorneys"] .master-nav__menu {
    max-height: calc(100dvh - 64px - 12px);
  }
}

[data-course="attorneys"] .master-nav {
  border-bottom: 1px solid var(--master-rule-hairline);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

[data-course="attorneys"] .master-nav__inner {
  max-width: 1140px;
  padding: 10px clamp(16px, 4vw, 32px);
  gap: 16px;
}

[data-course="attorneys"] .master-nav__logo,
[data-course="attorneys"] .master-nav__brand img {
  height: clamp(22px, 2.6vw, 34px);
  width: auto;
  max-width: min(58vw, 420px);
  object-fit: contain;
  object-position: left;
}

/* ── the items ───────────────────────────────────────────────────────── */
[data-course="attorneys"] .master-nav__link {
  font-family: var(--master-font-label);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 12px 8px;
  border-radius: 8px;
  color: var(--master-ink);
  transition: background 240ms ease-out, color 240ms ease-out;
}

[data-course="attorneys"] .master-nav__link:hover,
[data-course="attorneys"] .master-nav__link:focus-visible {
  background: var(--master-surface-recessed);
  color: var(--master-accent-text);
}

/* The label navigates and the chevron opens, so the pair reads as one control
   but keeps two jobs — and the label is still a plain link for anyone who
   never opens a menu at all. */
[data-course="attorneys"] .master-nav__pair .master-nav__link {
  padding-right: 4px;
  border-radius: 8px 0 0 8px;
}

[data-course="attorneys"] .master-nav__disclosure {
  min-width: 30px;
  padding: 0 6px;
  border: 0;
  background: transparent;
  color: var(--master-ink);
  border-radius: 0 8px 8px 0;
  cursor: pointer;
  transition: background 240ms ease-out, color 240ms ease-out;
}

[data-course="attorneys"] .master-nav__disclosure:hover,
[data-course="attorneys"] .master-nav__disclosure:focus-visible {
  background: var(--master-surface-recessed);
  color: var(--master-accent-text);
}

[data-course="attorneys"] .master-nav__chev {
  transition: transform 200ms ease-out;
}

[data-course="attorneys"] .master-nav__disclosure[aria-expanded="true"] .master-nav__chev {
  transform: rotate(180deg);
}

/* The current page is marked with the brand coral, which is a MARK and not
   text — at 4.1:1 it would fail as a label and passes as a 2px rule. */
/* master_nav_current() prints aria-current="page" on the exact page, and
   header.php adds .is-current to the <li> when a PANEL holds the current page,
   so a product page still lights "Programs". Both get the rule. */
[data-course="attorneys"] .master-nav__link[aria-current="page"]::after,
[data-course="attorneys"] .master-nav__item.is-current > .master-nav__pair > .master-nav__link::after,
[data-course="attorneys"] .master-nav__item.is-current > .master-nav__link::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 6px;
  height: 2px;
  background: var(--master-accent-mark);
}

[data-course="attorneys"] .master-nav__link {
  position: relative;
}

/* ── cart button and Enroll ──────────────────────────────────────────── */
/* The cart trigger is master_cart_button()'s markup, not a nav element:
   #master-drawer-button > .master-drawer-button > __glyph + __count. Styling
   a .master-nav__cart here would have matched nothing and looked like a
   mystery — checked against the printed markup rather than guessed. */
[data-course="attorneys"] .master-drawer-button {
  width: 44px;
  height: 44px;
  border: 1px solid var(--master-rule-hairline);
  border-radius: 8px;
  background: var(--master-surface);
  color: var(--master-ink);
  transition: border-color 240ms ease-out;
}

[data-course="attorneys"] .master-drawer-button:hover,
[data-course="attorneys"] .master-drawer-button:focus-visible {
  border-color: var(--master-ink);
}

/* The base sheet hides an empty cart outright — ".master-drawer-button:not(
   .is-filled){display:none}", commented "An empty bag is not news." The
   redesign reverses that: SiteHeader.dc.html draws the bordered 44px button
   unconditionally and makes only the COUNT BADGE conditional, so the bar does
   not reflow the moment something is added and the cart is somewhere you can
   always go. Scoped, so the hub keeps its own rule and its own reasoning. */
[data-course="attorneys"] .master-drawer-button:not(.is-filled) {
  display: inline-flex;
}

[data-course="attorneys"] .master-drawer-button:not(.is-filled) .master-drawer-button__count {
  display: none;
}

[data-course="attorneys"] .master-drawer-button__count {
  background: var(--master-accent);
  color: var(--master-ink-reversed);
  font-family: var(--master-font-label);
  font-size: 12px;
  font-weight: 700;
}

[data-course="attorneys"] .master-nav__enroll {
  /* border-box, and the reason is worth a line: with the theme's content-box
     default this measured 68px tall on staging — min-height 44 PLUS 24px of
     padding — and stretched the whole bar to 90px. The mock's button is 42px;
     44 is the accessible-target floor, so the box sizing is what gives both. */
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  align-self: center;
  background: var(--master-accent);
  color: var(--master-ink-reversed);
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  min-height: 44px;
  transition: background 240ms ease-out;
}

[data-course="attorneys"] .master-nav__enroll:hover,
[data-course="attorneys"] .master-nav__enroll:focus-visible {
  background: var(--master-accent-pressed);
  color: var(--master-ink-reversed);
}

/* ── the mega-menu panels ────────────────────────────────────────────── */
[data-course="attorneys"] .master-panel {
  background: var(--master-surface);
  border: 1px solid var(--master-rule-hairline);
  border-top: 0;
  border-radius: 0 0 16px 16px;
  box-shadow: 0 24px 48px color-mix(in srgb, var(--master-ink) 16%, transparent);
  padding: 28px clamp(20px, 3vw, 32px) 30px;
  animation: mstDrop 200ms ease-out;
}

[data-course="attorneys"] .master-panel__eyebrow,
[data-course="attorneys"] .master-panel__summit-eyebrow {
  font-family: var(--master-font-label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--master-ink-secondary);
}

[data-course="attorneys"] .master-panel__rung {
  border-top: 1px solid var(--master-surface-recessed);
}

[data-course="attorneys"] .master-panel__rung > a {
  display: block;
  padding: 13px 10px;
  border-radius: 8px;
  color: var(--master-ink);
  transition: background 200ms ease-out;
}

[data-course="attorneys"] .master-panel__rung > a:hover {
  background: var(--master-ground);
}

[data-course="attorneys"] .master-panel__name,
[data-course="attorneys"] .master-panel__summit-name {
  font-family: var(--master-font-display);
  font-size: 19px;
  font-weight: 600;
}

[data-course="attorneys"] .master-panel__price,
[data-course="attorneys"] .master-panel__summit-price {
  font-family: var(--master-font-label);
  font-size: 15px;
  font-weight: 700;
  color: var(--master-ink);
  font-variant-numeric: tabular-nums;
}

[data-course="attorneys"] .master-panel__blurb,
[data-course="attorneys"] .master-panel__summit-blurb {
  font-size: 15px;
  line-height: 1.5;
  color: var(--master-ink-secondary);
}

/* ── the phone sheet ─────────────────────────────────────────────────── */
[data-course="attorneys"] .master-nav__toggle {
  width: 44px;
  height: 44px;
  border: 1px solid var(--master-rule);
  border-radius: 8px;
  background: var(--master-surface);
  color: var(--master-ink);
}

/* .master-nav__menu is the <nav> wrapper at EVERY width, not the phone sheet.
   Styling it as the sheet drew a stray hairline straight across the desktop
   header and pushed the bar to 85px — visible in the staging screenshot before
   this was corrected. The sheet treatment belongs behind the collapse
   breakpoint, which README §10 puts at 1000px. */
@media (max-width: 1000px) {
  [data-course="attorneys"] .master-nav__menu {
    border-top: 1px solid var(--master-rule-hairline);
    animation: mstDrop 220ms ease-out;
  }

  [data-course="attorneys"] .master-nav__menu .master-nav__link {
    font-size: 14px;
    padding: 15px 4px;
    border-radius: 0;
  }
}

/* Reduced motion: the fades stay, the movement goes. */
@media (prefers-reduced-motion: reduce) {
  [data-course="attorneys"] .master-panel,
  [data-course="attorneys"] .master-nav__menu {
    animation-duration: 150ms;
    animation-name: none;
  }
  [data-course="attorneys"] .master-nav__chev {
    transition: none;
  }
}

/* ── where the cart sits, now that it is a sibling of the menu ───────────
   header.php prints it before the burger so it survives the collapse. The DOM
   order is brand · cart · burger · menu; `order` puts it back where the mock
   draws it at each width, which is the one job flex order is actually for. */
[data-course="attorneys"] .master-nav__brand         { order: 0; }
[data-course="attorneys"] .master-drawer-button-wrap { order: 1; }
[data-course="attorneys"] .master-nav__toggle        { order: 2; }
[data-course="attorneys"] .master-nav__menu          { order: 3; }

@media (min-width: 1001px) {
  /* Desktop: links, then cart, then Enroll — so the cart follows the menu. */
  [data-course="attorneys"] .master-nav__menu          { order: 1; }
  [data-course="attorneys"] .master-drawer-button-wrap { order: 2; margin-left: 6px; }
}

@media (max-width: 1000px) {
  /* Phone: logo, cart, burger — all three on ONE line, then the menu opens
     underneath as a full-width row.

     Measured at 390px before this block: the lockup ran to 226px and with a
     16px gutter the cart ended at x=374 of 390, leaving the burger to wrap to
     a second line and doubling the bar. The row is what has to give, not the
     burger: 8px gaps and a 50vw cap on the lockup bring the three to ~335px
     and the bar back to one line. */
  [data-course="attorneys"] .master-nav__inner { gap: 8px; }

  [data-course="attorneys"] .master-nav__brand img,
  [data-course="attorneys"] .master-nav__domainlock { max-width: min(50vw, 420px); }

  [data-course="attorneys"] .master-drawer-button-wrap { margin-left: auto; }
  [data-course="attorneys"] .master-nav__toggle        { flex: 0 0 44px; }
  [data-course="attorneys"] .master-nav__menu          { flex: 1 0 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════
   THE ATTORNEYS COURSE — footer (README §5.2, mockups/SiteFooter.dc.html)

   The footer now carries data-master-surface="inverted", so inside this block
   the aliases already resolve to their band values: --master-ink is gesso,
   --master-ink-secondary is band-text, --master-accent-text is realgar, and
   --master-ink-reversed is white (the course flips that one deliberately).
   Nothing here names a raw token.
   ═══════════════════════════════════════════════════════════════════════ */

[data-course="attorneys"] .master-footer {
  position: relative;
  overflow: hidden;
  background: var(--master-ground);
  padding-block: clamp(56px, 8vw, 80px) 32px;
}

/* The crown, at 6%, bottom-right, behind everything and inert. README §4.3
   asks for it on every ink band; it is decorative, so it is a background and
   never an <img> with alt text. */
[data-course="attorneys"] .master-footer::after {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -60px;
  width: clamp(320px, 38vw, 560px);
  aspect-ratio: 1 / 1;
  /* A MASK, not a background-image, and the reason is in the artwork: the
     emblem's own stylesheet paints the crown .mark{fill:#111827}. Dropped onto
     the #101315 band at 6% that is a navy shape on near-black — invisible,
     which is the defect README §3 reports, though not for the reason it gives.
     Masking throws the file's colours away and keeps only its silhouette, so
     the watermark is painted in the band's own ink and cannot be wrong. */
  background: var(--master-ink);
  -webkit-mask: url("../../brand/logo/emblem-attorneys.svg") right bottom / contain no-repeat;
  mask: url("../../brand/logo/emblem-attorneys.svg") right bottom / contain no-repeat;
  opacity: 0.06;
  pointer-events: none;
}

[data-course="attorneys"] .master-footer__inner {
  position: relative;
  z-index: 1;
  max-width: 1140px;
}

/* ── row 1: the lockup, the about line, and where to write ───────────── */
[data-course="attorneys"] .master-footer__about {
  font-size: 16px;
  line-height: 1.65;
  color: var(--master-ink);
  max-width: 640px;
}

[data-course="attorneys"] .master-footer__contact-label,
[data-course="attorneys"] .master-footer__col-title {
  font-family: var(--master-font-label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--master-ink-tertiary);
}

[data-course="attorneys"] .master-footer__mail {
  font-family: var(--master-font-label);
  font-size: clamp(18px, 1.8vw, 21px);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--master-ink-reversed);
  white-space: nowrap;
  padding: 2px 0;
}

[data-course="attorneys"] .master-footer__mail:hover,
[data-course="attorneys"] .master-footer__mail:focus-visible {
  color: var(--master-accent-text);
}

[data-course="attorneys"] .master-footer__contact-note {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--master-ink-tertiary);
  max-width: 32ch;
}

/* ── the ruled column rows ───────────────────────────────────────────── */
[data-course="attorneys"] .master-footer__row {
  border-bottom: 1px solid var(--master-rule-hairline);
  padding: clamp(28px, 3.5vw, 40px) 0;
  overflow: hidden;
}

[data-course="attorneys"] .master-footer__nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  row-gap: 32px;
  /* The negative margin plus a left rule on every column is how the mock draws
     dividers BETWEEN columns without a trailing rule on the last one — the
     first column's rule is pulled outside the overflow:hidden above. */
  margin-left: -29px;
}

[data-course="attorneys"] .master-footer__col {
  border-left: 1px solid var(--master-rule-hairline);
  padding: 0 29px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

[data-course="attorneys"] .master-footer__col-list {
  display: flex;
  flex-direction: column;
  gap: 11px;
  font-size: 15.5px;
  line-height: 1.4;
}

[data-course="attorneys"] .master-footer__col-list a {
  color: var(--master-ink-reversed);
  min-height: 40px;
  display: flex;
  align-items: center;
  transition: color 200ms ease-out;
}

[data-course="attorneys"] .master-footer__col-list a:hover,
[data-course="attorneys"] .master-footer__col-list a:focus-visible {
  color: var(--master-accent-text);
}

/* A Programs row is name · optional sublabel · price. MasterMind carries BOTH
   a sublabel and a figure, so "the last child is the price" is not enough on
   its own — the row is a two-column grid and the LAST meta is the figure,
   while any earlier one is the line under the name. */
[data-course="attorneys"] .master-footer__col-list a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 16px;
  align-items: baseline;
}

[data-course="attorneys"] .master-footer__col-list a .master-footer__meta:last-child {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--master-font-label);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--master-ink-tertiary);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* The name is a bare text node, so it auto-places into row 1 / column 1. The
   sublabel therefore has to be told to sit UNDER it rather than beside it, or
   MasterMind — the one rung carrying both a sublabel and a figure — pushes its
   own name into the price column. That is exactly what it did before this. */
[data-course="attorneys"] .master-footer__col-list a .master-footer__meta:not(:last-child) {
  grid-column: 1;
  grid-row: 2;
  display: block;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--master-ink-tertiary);
}

/* ── the closing lines ───────────────────────────────────────────────── */
[data-course="attorneys"] .master-footer__tagline {
  font-family: var(--master-font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--master-ink-reversed);
}

[data-course="attorneys"] .master-footer__legal a {
  color: var(--master-ink-secondary);
  min-height: 40px;
  display: inline-flex;
  align-items: center;
}

[data-course="attorneys"] .master-footer__legal a:hover,
[data-course="attorneys"] .master-footer__legal a:focus-visible {
  color: var(--master-accent-text);
}

[data-course="attorneys"] .master-footer__meta {
  font-size: 14px;
  line-height: 1.55;
  color: var(--master-ink-tertiary);
}

@media (max-width: 720px) {
  /* One column on a phone, and the dividers become rules between groups
     rather than beside them. */
  [data-course="attorneys"] .master-footer__nav { margin-left: 0; }
  [data-course="attorneys"] .master-footer__col {
    border-left: 0;
    border-top: 1px solid var(--master-rule-hairline);
    padding: 24px 0 0;
  }
  [data-course="attorneys"] .master-footer__col:first-child {
    border-top: 0;
    padding-top: 0;
  }
}

/* .master-footer__summit decorates the top rung in the base sheet. Inside the
   grid its marker became a floating coral tick in the price column, so the
   rung is levelled with its siblings here and the emphasis carried by weight. */
[data-course="attorneys"] .master-footer__col-list a.master-footer__summit {
  border: 0;
  padding-left: 0;
}

[data-course="attorneys"] .master-footer__col-list a.master-footer__summit::before,
[data-course="attorneys"] .master-footer__col-list a.master-footer__summit::after {
  content: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   THE ATTORNEYS COURSE — cart drawer and waitlist dialog (README §5.1)

   Both already exist with the right structure and the right plumbing: the
   drawer is #master-drawer fed by WooCommerce fragments, the dialog is the
   _waitlist partial on its REST endpoint. Nothing here touches either — this
   restyles the markup and leaves the wiring alone, as README §0.1 asks.
   ═══════════════════════════════════════════════════════════════════════ */

@keyframes mstSlideIn {
  from { transform: translateX(24px); opacity: 0; }
  to   { transform: none;             opacity: 1; }
}

@keyframes mstFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── the drawer ──────────────────────────────────────────────────────── */
[data-course="attorneys"] .master-drawer {
  width: min(100%, 420px);
  background: var(--master-surface);
  color: var(--master-ink);
  border-left: 1px solid var(--master-rule-hairline);
}

[data-course="attorneys"] .master-drawer:not([hidden]) {
  animation: mstSlideIn 260ms ease-out;
}

[data-course="attorneys"] .master-drawer-scrim:not([hidden]) {
  background: color-mix(in srgb, var(--master-ink) 50%, transparent);
  animation: mstFadeIn 200ms ease-out;
}

[data-course="attorneys"] .master-drawer__head {
  border-bottom: 1px solid var(--master-rule-hairline);
}

[data-course="attorneys"] .master-drawer__title {
  font-family: var(--master-font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--master-ink);
}

/* 44px, because a close button that is hard to hit is the worst one to miss. */
[data-course="attorneys"] .master-drawer__close,
[data-course="attorneys"] .master-wl__close {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--master-ink);
  background: transparent;
  border: 0;
}

[data-course="attorneys"] .master-drawer__close:hover,
[data-course="attorneys"] .master-wl__close:hover {
  background: var(--master-surface-recessed);
}

[data-course="attorneys"] .master-drawer__line {
  border-bottom: 1px solid var(--master-rule-hairline);
}

[data-course="attorneys"] .master-drawer__line-name {
  font-family: var(--master-font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--master-ink);
}

/* schedule · days · dates · hours — one dense line, and a figure column that
   lines up down the sheet. */
[data-course="attorneys"] .master-drawer__line-meta,
[data-course="attorneys"] .master-drawer__line-who,
[data-course="attorneys"] .master-drawer__line-blurb {
  font-size: 15px;
  line-height: 1.5;
  color: var(--master-ink-secondary);
}

[data-course="attorneys"] .master-drawer__line-price,
[data-course="attorneys"] .master-drawer__total,
[data-course="attorneys"] .master-drawer__ladder-price {
  font-family: var(--master-font-display);
  font-weight: 600;
  color: var(--master-ink);
  font-variant-numeric: tabular-nums;
}

[data-course="attorneys"] .master-drawer__total {
  font-size: 26px;
  border-top: 1px solid var(--master-rule-hairline);
}

[data-course="attorneys"] .master-drawer__checkout {
  background: var(--master-accent);
  color: var(--master-ink-reversed);
  border: 0;
  border-radius: 8px;
  padding: 14px 24px;
  min-height: 48px;
  font-size: 16px;
  font-weight: 600;
  transition: background 240ms ease-out;
}

[data-course="attorneys"] .master-drawer__checkout:hover,
[data-course="attorneys"] .master-drawer__checkout:focus-visible {
  background: var(--master-accent-pressed);
  color: var(--master-ink-reversed);
}

[data-course="attorneys"] .master-drawer__view,
[data-course="attorneys"] .master-drawer__remove {
  color: var(--master-accent-text);
  text-underline-offset: 4px;
}

[data-course="attorneys"] .master-drawer__view:hover,
[data-course="attorneys"] .master-drawer__remove:hover {
  color: var(--master-accent-text-pressed);
}

[data-course="attorneys"] .master-drawer__empty-title {
  font-family: var(--master-font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--master-ink);
}

[data-course="attorneys"] .master-drawer__empty-note,
[data-course="attorneys"] .master-drawer__reassure {
  font-size: 15px;
  line-height: 1.6;
  color: var(--master-ink-secondary);
}

[data-course="attorneys"] .master-drawer__ladder-eyebrow,
[data-course="attorneys"] .master-drawer__find-eyebrow {
  font-family: var(--master-font-label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--master-accent-text);
}

/* ── the waitlist dialog ─────────────────────────────────────────────── */
[data-course="attorneys"] .master-wl {
  max-width: 520px;
  background: var(--master-surface);
  color: var(--master-ink);
  border: 1px solid var(--master-rule-hairline);
  border-radius: 16px;
}

[data-course="attorneys"] .master-wl-scrim:not([hidden]) {
  background: color-mix(in srgb, var(--master-ink) 50%, transparent);
  animation: mstFadeIn 200ms ease-out;
}

[data-course="attorneys"] .master-wl__title {
  font-family: var(--master-font-display);
  font-size: 26px;
  font-weight: 600;
  color: var(--master-ink);
}

[data-course="attorneys"] .master-wl__for {
  font-size: 17px;
  color: var(--master-ink);
  font-weight: 600;
}

[data-course="attorneys"] .master-wl__promise,
[data-course="attorneys"] .master-wl__fine {
  font-size: 15px;
  line-height: 1.6;
  color: var(--master-ink-secondary);
}

/* Inputs: 48px, a rule that carries meaning rather than a hairline, and the
   theme's focus ring — which the course scope has already made claret. */
[data-course="attorneys"] .master-wl__field input,
[data-course="attorneys"] .master-wl__field textarea {
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--master-rule);
  border-radius: 8px;
  background: var(--master-surface);
  color: var(--master-ink);
  font-size: 16px;
}

[data-course="attorneys"] .master-wl__field label {
  font-family: var(--master-font-label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--master-ink-secondary);
}

[data-course="attorneys"] .master-wl__submit {
  background: var(--master-accent);
  color: var(--master-ink-reversed);
  border: 0;
  border-radius: 8px;
  padding: 14px 24px;
  min-height: 48px;
  font-size: 16px;
  font-weight: 600;
  transition: background 240ms ease-out;
}

[data-course="attorneys"] .master-wl__submit:hover,
[data-course="attorneys"] .master-wl__submit:focus-visible {
  background: var(--master-accent-pressed);
  color: var(--master-ink-reversed);
}

[data-course="attorneys"] .master-wl__submit--quiet {
  background: transparent;
  color: var(--master-ink);
  border: 1px solid var(--master-ink);
}

[data-course="attorneys"] .master-wl__submit--quiet:hover {
  background: var(--master-surface-recessed);
  color: var(--master-ink);
}

[data-course="attorneys"] .master-wl__err {
  font-size: 15px;
  font-weight: 600;
  color: var(--master-stop);
}

/* The success panel is the one place the surviving green belongs. */
[data-course="attorneys"] .master-wl__done {
  background: var(--master-status-open-ground);
  color: var(--master-status-open);
  border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
  [data-course="attorneys"] .master-drawer:not([hidden]),
  [data-course="attorneys"] .master-drawer-scrim:not([hidden]),
  [data-course="attorneys"] .master-wl-scrim:not([hidden]) {
    animation-duration: 150ms;
    animation-name: mstFadeIn;
  }
}

/* ── a live contrast defect, fixed here because §9 forbids it ────────────
   .master-cohort-group__title is painted var(--master-color-chalk) — white,
   for a dark band — and _plugin.css carries a .master-cohort-cards--light
   variant to undo that on a cream section. The pricing page never sets the
   modifier, so on PRODUCTION right now the group headings ("The 2-Day Intro",
   and its siblings) render #FFFFFF on #F6F2EA: 1.07:1, invisible. Measured on
   the live site, not inferred — it predates this branch.

   The fix is the token system doing its job: --master-ink is #111827 on a light
   ground and gesso inside an inverted band, so ONE declaration is correct in
   both places and the --light modifier stops being load-bearing. Scoped, like
   everything else here; the same defect on the hub is reported, not silently
   patched, because it is a different site's bug to rule on. */
[data-course="attorneys"] .master-cohort-group__title {
  color: var(--master-ink);
  border-bottom-color: var(--master-rule-hairline);
}