:root {
  --paper: #f6f7fb;
  --paper-2: #eceff7;
  --card: #ffffff;
  --ink: #0b1430;
  --muted: #4c5a7d;
  --line: #dbe1f0;
  --navy: #0e1b3f;
  --navy-2: #16275c;
  --on-navy: #f5f8ff;
  --on-navy-muted: #aebce0;
  --on-navy-line: rgba(245, 248, 255, 0.14);
  --yellow: #ffc53d;
  --yellow-deep: #efae18;
  --yellow-ink: #221604;
  --rose-bar: #e6a7b2;
  --rose-strong: #a95365;
  --rose-soft: #fbf0f2;
  --footer: #091026;
  --shadow: 11, 20, 48;
  color-scheme: light;
  font-family: "Outfit", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button,
a {
  font: inherit;
}

a {
  color: inherit;
}

::selection {
  background: var(--yellow);
  color: var(--yellow-ink);
}

.course-loading {
  position: fixed;
  inset: 0;
  display: grid;
  grid-auto-flow: column;
  place-content: center;
  gap: 9px;
  background: var(--navy);
}

.course-loading span {
  width: 9px;
  height: 9px;
  transform: rotate(45deg);
  background: var(--yellow);
  box-shadow: 0 6px 18px rgba(239, 174, 24, 0.38);
  animation: load-pulse 1.1s ease-in-out infinite;
}

.course-loading span:nth-child(2) {
  animation-delay: 0.14s;
}

.course-loading span:nth-child(3) {
  animation-delay: 0.28s;
}

@keyframes load-pulse {
  0%, 100% { opacity: 0.3; transform: rotate(45deg) scale(0.72); }
  50% { opacity: 1; transform: rotate(45deg) scale(1); }
}

.course-error {
  max-width: 680px;
  margin: 96px auto;
  padding: 28px;
  color: var(--rose-strong);
  text-align: center;
}

.course-shell {
  width: min(100%, 1180px);
  margin-inline: auto;
  padding-inline: 32px;
}

/* `hidden` is display:none in the UA sheet, which any author `display` rule
   outranks — so `.pricing-standard { display:flex }` was showing the
   struck-through original price even with no offer running, beside an identical
   current price. Anything marked hidden stays hidden. */
[hidden] { display: none !important; }

.course-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(145deg, var(--navy), var(--navy-2));
  color: var(--on-navy);
}

.course-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -260px;
  right: -180px;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 197, 61, 0.23), rgba(255, 197, 61, 0) 68%);
  pointer-events: none;
}

.course-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -150px;
  bottom: -330px;
  width: 540px;
  height: 540px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 197, 61, 0.09), rgba(255, 197, 61, 0) 70%);
  pointer-events: none;
}

.course-topbar {
  display: flex;
  min-height: 82px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.course-back,
.course-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--on-navy-muted);
  text-decoration: none;
  transition: color 160ms ease, transform 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.course-back {
  min-height: 44px;
  font-size: 14.5px;
  font-weight: 500;
}

.course-close {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.09);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
  color: var(--on-navy);
}

.course-back:hover,
.course-close:hover {
  color: var(--yellow);
  transform: translateY(-1px);
}

.course-back:focus-visible,
.course-close:focus-visible,
.course-review:focus-visible,
.course-cta:focus-visible,
.pricing-links a:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 4px;
}

/* Copy on the left, the people who teach it on the right, sharing a baseline.
   The portrait column is sized by its content so a single face doesn't reserve
   the room three would. */
/* Text and picture, side by side until they genuinely do not fit.
 *
 * There is no media query here on purpose. A breakpoint is a guess at a screen
 * width, and it is wrong on the first device nobody tested — the hero used to
 * carry one at 860px and the text column collapsed to nothing on a tablet
 * because the guess did not match the content. `flex-wrap` asks the content
 * instead: the picture drops below the text at the moment the text can no
 * longer hold its 26rem minimum, whatever width that turns out to be.
 *
 * Everything inside is sized as a percentage of what it is given, so it scales
 * continuously rather than in steps.
 */
.course-hero-lede {
  /* Grid rather than flex, and the reason is the height.
     `align-items: stretch` on a flex row will not override a cross size the
     item has already made definite, and any ratio the picture carries makes it
     definite — so the picture kept its own height and left a band of navy under
     it while the text ran on past. A grid row has one height by definition and
     both cells take it.
     `auto-fit` keeps the wrap free of breakpoints: two columns while each can
     hold 24rem, one column below that, decided by the content rather than by a
     guess at a screen width. */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  align-items: stretch;
  gap: clamp(20px, 4%, 56px);
  /* One continuous ramp instead of the 860px step this used to take. */
  padding-block: clamp(20px, 4.4vw, 42px) clamp(28px, 6vw, 58px);
}

.course-hero-content {
  min-width: 0;
  /* Its own cell, so it no longer needs a flex basis; the cap is only there to
     stop the measure running long on a wide screen. */
  max-width: 820px;
  align-self: center;
}

/* 1700 x 1800 — the box holds the shape whether or not the file has loaded, so
   nothing below it jumps when it arrives. */
.course-hero-figure {
  /* Full width is right on a phone and too much on a tablet: one column at
     760px is 696px across, and 17:18 of that is a 737px-tall picture that owns
     the whole screen before a word of the page is read. On a phone the column
     is narrower than the cap, so it still fills. */
  max-width: 28rem;
  width: 100%;
  margin-inline: auto;
  position: relative;
  /* The height comes from the text beside it. This needs the older padding
     trick rather than `aspect-ratio`, and the reason is worth writing down:
     `aspect-ratio` makes the cross size definite, and a definite cross size is
     exactly what `align-self: stretch` declines to override. The ratio has to
     be a *minimum* for stretch to be allowed to win, and a padded pseudo
     element is a minimum. */
  align-self: stretch;
}

/* 1800 / 1700 — the shape the picture falls back to when it is alone on its
   line and there is no text to take a height from. */
.course-hero-figure::before {
  content: "";
  display: block;
  padding-top: 105.88%;
}

.course-hero-figure img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* `contain`, not `cover`. These are cut-out figures that dissolve into
     transparency across the bottom of the canvas; `cover` would crop that fade
     off on a wide viewport and take the tops of heads with it. */
  /* `cover`, anchored to the bottom. Beside the text the box is taller than
     the picture's own 17:18, and `contain` left a band of empty navy under the
     figure while the text ran on past it. `cover` fills that height instead,
     trimming a sliver off each side — which is the breathing room these were
     composed with, not any part of a person. The bottom anchor is what keeps
     the dissolve: it is the edge that must never be the one cropped. */
  object-fit: cover;
  object-position: center bottom;

  /* A last 8% of dissolve, on top of whatever the file already has.
   *
   * Done here rather than baked into the alpha channel on purpose: it is one
   * number, it can be tuned by looking at the page, and it costs no re-encode
   * and no second copy of seven images. The picture is exactly 17:18 and so is
   * its box, so the image fills the box with no letterboxing — masking the box
   * and masking the picture are the same edge.
   *
   * The prefixed pair is for Safari before 15.4, which supports the property
   * only as -webkit-mask-image. Without it those browsers get no fade, which
   * is the old hard edge rather than a broken layout. */
  -webkit-mask-image: linear-gradient(to bottom, #000 92%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 92%, transparent 100%);
}



.course-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.course-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  line-height: 1;
}

.course-chip--delivery {
  background: var(--yellow);
  box-shadow: 0 8px 24px rgba(239, 174, 24, 0.34);
  color: var(--yellow-ink);
}

.course-chip--track {
  background: rgba(245, 248, 255, 0.1);
  color: var(--on-navy-muted);
}

.course-chip-dot {
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  background: currentColor;
  animation: proof-pulse 1.6s ease-in-out infinite;
}

@keyframes proof-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.course-title {
  max-width: 780px;
  margin: 22px 0 0;
  font-size: clamp(46px, 6vw, 62px);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.04;
  text-wrap: balance;
}

.course-summary {
  max-width: 650px;
  margin: 22px 0 0;
  color: var(--on-navy-muted);
  font-size: 18px;
  line-height: 1.6;
  text-wrap: pretty;
}

/* The facts read as a list under the summary, not as four boxes.
 *
 * One grid holds both halves of every row — labels in the first column, values
 * in the second — so the values line up down the page automatically, however
 * long a label runs. That was the thing the cards could never do: each card was
 * its own formatting context, so a label that wrapped shifted only its own
 * value and the row of values sat at four different heights.
 *
 * The hierarchy is carried by colour and weight rather than by a container:
 * a yellow marker, a muted uppercase label, and the value in full-strength
 * white — with the first fact, the one people actually came to find, in yellow.
 */
.course-facts {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 12px clamp(18px, 2.4vw, 34px);
  margin: clamp(26px, 3vw, 38px) 0 0;
  padding: 0;
  max-width: 560px;
}

.course-fact-label {
  position: relative;
  margin: 0;
  padding-left: 18px;
  color: var(--on-navy-muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.5;
  text-transform: uppercase;
  white-space: nowrap;
}

/* The marker sits on the label's own baseline rather than on a list bullet, so
   it stays put when a value wraps to a second line. */
.course-fact-label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--yellow);
  transform: rotate(45deg);
}

.course-fact-value {
  margin: 0;
  color: var(--on-navy);
  font-size: clamp(15px, 1.35vw, 17px);
  font-weight: 600;
  line-height: 1.5;
  text-wrap: pretty;
}

/* The first fact is the date, which is what the page is usually opened to find. */
.course-facts .course-fact-value:first-of-type {
  color: var(--yellow);
}

@media (max-width: 560px) {
  /* Label above value. Below this width the two cannot share a row without one
     of them wrapping awkwardly, and a wrapped label beside a wrapped value is
     the one arrangement that reads worst. */
  .course-facts { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .course-fact-label { margin-top: clamp(12px, 3.6vw, 18px); white-space: normal; }
  .course-fact-label:first-of-type { margin-top: 0; }
  .course-fact-value { padding-left: 18px; }
}

.course-fact:first-child .course-fact-value {
  color: var(--yellow);
}

.course-main {
  padding-block: 92px 108px;
  background: linear-gradient(180deg, var(--paper), var(--paper-2));
}

.course-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 350px;
  gap: 32px;
  align-items: start;
}

.course-sections {
  display: grid;
  gap: 24px;
}

.course-section,
.course-pricing {
  border-radius: 18px;
  background: var(--card);
  box-shadow: 0 1px 2px rgba(var(--shadow), 0.05), 0 10px 26px rgba(var(--shadow), 0.07), 0 30px 60px rgba(var(--shadow), 0.07);
}

.course-section {
  padding: 30px;
}

.course-section-heading {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 22px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.17em;
  line-height: 1.2;
  text-transform: uppercase;
}

.course-section-heading::before {
  content: "";
  width: 9px;
  height: 9px;
  transform: rotate(45deg);
  background: var(--yellow);
  box-shadow: 0 4px 12px rgba(239, 174, 24, 0.36);
  flex: 0 0 auto;
}

.outcome-list,
.instructor-list,
.feature-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.outcome-list {
  gap: 15px;
}

.outcome-item,
.feature-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
}

.outcome-item {
  gap: 13px;
  font-size: 16px;
  line-height: 1.55;
}

.course-check {
  color: #8f6b00;
  font-weight: 800;
}

.audience-copy,
.capstone-copy {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
  text-wrap: pretty;
}

.syllabus-list {
  overflow: hidden;
  border-radius: 14px;
  background: var(--paper);
  box-shadow: inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line);
}

.syllabus-row {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 18px;
  padding: 16px 18px;
}

.syllabus-row + .syllabus-row {
  box-shadow: inset 0 1px 0 rgba(219, 225, 240, 0.8);
}

.syllabus-period {
  color: #8f6b00;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.syllabus-body {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
}

.syllabus-title {
  margin: 0 0 6px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 650;
  line-height: 1.3;
}

.syllabus-row--tile {
  padding-block: 20px;
}

.instructor-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.instructor-card {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 15px;
  align-items: center;
  min-height: 96px;
  padding: 12px;
  border-radius: 16px;
  background: var(--paper);
}

.instructor-photo {
  width: 62px;
  height: 72px;
  border-radius: 40px 40px 12px 12px;
  object-fit: cover;
  object-position: center top;
  background: var(--paper-2);
  box-shadow: 0 10px 24px rgba(var(--shadow), 0.13);
}

.instructor-name {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
}

.instructor-role {
  margin-top: 5px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.45;
}

.course-section--capstone {
  background: linear-gradient(145deg, #fffaf0, var(--card));
  box-shadow: 0 1px 2px rgba(var(--shadow), 0.05), 0 14px 36px rgba(239, 174, 24, 0.13), 0 32px 66px rgba(var(--shadow), 0.06);
}

.course-review {
  justify-self: start;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  text-decoration-color: var(--yellow-deep);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  transition: color 160ms ease;
}

.course-note {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.course-review:hover,
.pricing-links a:hover {
  color: var(--rose-strong);
}

.course-pricing {
  position: sticky;
  top: 24px;
  padding: 28px;
}

body.pf-has-promo-bar .course-pricing {
  top: calc(var(--pf-promo-height) + 24px);
}

.pricing-title {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.18;
}

.pricing-course-alone,
.pricing-standard,
/* The label is a pill and the price sits opposite it. The label used to be one
   short word — "Founding Member" — and is now a phrase, which on a phone wrapped
   the pill onto two lines: a 44px yellow blob beside a 23px price, centred
   against each other and reading as misaligned.
   
   Two changes fix it without a breakpoint. The pill never wraps, so it stays a
   single consistent shape at any width; and the row is allowed to wrap, so when
   the pair no longer fits the price drops to its own line under the pill rather
   than squeezing it. Baseline alignment, not centre, keeps the two sitting on
   the same line of type while they share a row. */
.pricing-member-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 14px;
}

.pricing-course-alone {
  margin-top: 20px;
  color: var(--muted);
  font-size: 14px;
}

.pricing-course-alone strong,
.pricing-standard s {
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.pricing-standard {
  margin-top: 14px;
  padding: 14px;
  border-radius: 12px;
  background: var(--paper);
  color: var(--muted);
}

.pricing-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.pricing-member {
  margin-top: 10px;
  padding: 15px;
  border-radius: 14px;
  background: var(--navy);
  box-shadow: 0 6px 14px rgba(11, 20, 48, 0.16), 0 24px 56px rgba(11, 20, 48, 0.2);
  color: var(--on-navy);
}

.pricing-member .pricing-label {
  display: inline-flex;
  white-space: nowrap;
  align-self: center;
  padding: 6px 9px;
  border-radius: 999px;
  background: var(--yellow);
  box-shadow: 0 7px 20px rgba(239, 174, 24, 0.34);
  color: var(--yellow-ink);
}

.member-price {
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
}

.member-period {
  color: var(--on-navy-muted);
  font-size: 12px;
  font-weight: 500;
}

.pricing-scarcity {
  margin: 10px 0 0;
  color: var(--rose-strong);
  font-size: 12px;
  font-weight: 700;
  text-align: right;
}

.pricing-member .pricing-scarcity {
  color: #f1bdc6;
}

.promo-badge {
  display: none;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(16, 185, 129, 0.34);
  background: rgba(16, 185, 129, 0.1);
  color: #176f57;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
}

/* The offer box: a heading and its lines, written per offer in the editor.
   This replaced a block of markup that was hardcoded for one promo code. */
.promo-box {
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(16, 185, 129, 0.07);
  box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.22);
}

.promo-box-title {
  margin: 0;
  color: #176f57;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.promo-box .promo-benefits {
  margin-top: 8px;
}

.promo-benefits {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 12.5px;
}

.promo-benefits li {
  display: flex;
  gap: 8px;
}

.promo-benefits li::before {
  content: "✓";
  color: #17795c;
  font-weight: 800;
}

.promo-deadline {
  margin: 12px 0 0;
  color: var(--rose-strong);
  font-size: 12.5px;
  font-weight: 700;
}

.pricing-value {
  margin: 20px 0 0;
  padding-top: 18px;
  box-shadow: inset 0 1px 0 var(--line);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}

.feature-list {
  gap: 10px;
  margin-top: 17px;
}

.feature-item {
  gap: 10px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.45;
}

.course-cta {
  display: block;
  margin-top: 22px;
  padding: 15px 18px;
  border-radius: 12px;
  background: var(--yellow);
  box-shadow: 0 12px 28px rgba(239, 174, 24, 0.38);
  color: var(--yellow-ink);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.course-cta:hover {
  transform: translateY(-2px);
  background: var(--yellow-deep);
  box-shadow: 0 16px 34px rgba(239, 174, 24, 0.45);
}

.pricing-refund {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}

.pricing-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 18px;
  margin-top: 16px;
  padding-top: 15px;
  box-shadow: inset 0 1px 0 var(--line);
  font-size: 12.5px;
}

.pricing-links a {
  color: var(--muted);
  text-underline-offset: 4px;
  transition: color 160ms ease;
}

.course-page.is-leaving {
  opacity: 0;
  transition: opacity 180ms ease;
}

@media (max-width: 940px) {
  /* The facts rule that used to live here made the old cards two-up. They are a
     label/value list now, which sets its own columns, so forcing two equal ones
     here only squashed the values. */
  .course-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .course-pricing {
    position: static;
  }
}

@media (max-width: 640px) {
  /* Everything here scales with the viewport rather than stepping at a
     breakpoint, so there is no width at which the page visibly snaps. */
  .course-shell {
    padding-inline: clamp(18px, 5.2vw, 32px);
  }

  .course-topbar {
    min-height: clamp(56px, 16vw, 68px);
  }

  .course-hero-content {
    padding-block: clamp(24px, 8vw, 38px) clamp(20px, 6vw, 32px);
  }

  .course-title {
    font-size: clamp(30px, 9.6vw, 46px);
  }

  .course-summary {
    font-size: clamp(15px, 4.3vw, 17px);
  }

  .course-fact-value {
    font-size: clamp(15px, 4.2vw, 17px);
  }

  .course-main {
    padding-block: clamp(36px, 12vw, 60px) clamp(48px, 15vw, 76px);
  }

  .course-section,
  .course-pricing {
    padding: clamp(18px, 5.2vw, 24px);
  }

  .syllabus-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
  }

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

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

/* --------------------------------------------------------------------------
   Orphan control — phone only, so desktop line breaking is untouched.
   `balance` rather than `pretty`: measured in Chrome 151, `pretty` leaves a
   two-line label exactly as `auto` does, because it only re-breaks blocks
   several lines deep. Almost every string on this page is that short.
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .course-title,
  .course-summary,
  .course-section h2,
  .syllabus-body,
  .syllabus-title,
  .outcome-item,
  .capstone-copy,
  .pricing-refund,
  .course-fact-value,
  .course-fact-label,
  .instructor-name,
  .instructor-role,
  .pricing-value,
  .pricing-note,
  .course-chip { text-wrap: balance; }

  /* Long-form blocks sit past the line count `balance` will touch. */
  .course-section > p,
  .course-review blockquote { text-wrap: pretty; }
}