.music-theory-main {
      --hero-enter-ease: cubic-bezier(0.2, 0.74, 0.22, 1);
      width: 100vw;
      max-width: none;
      margin: 0;
      margin-left: calc(50% - 50vw);
      padding-top: 0;
      padding-bottom: 0;
      background: #070a10;
    }

    .lesson-content-wrap {
      position: relative;
      width: 100%;
      margin: 0;
      display: block;
      --section-pad-top: clamp(1.9rem, 4vw, 3.1rem);
      --section-pad-x: clamp(1rem, 5vw, 4rem);
      --section-pad-bottom: clamp(2.1rem, 4.6vw, 3.2rem);
      --amp-gold-gradient: linear-gradient(180deg, #f3d27c 0%, #ddb357 45%, #a97b2f 100%);
      --section-enter-ease: cubic-bezier(0.18, 0.76, 0.24, 1);
      background: #070a10;
    }

    .lesson-content-wrap::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      height: clamp(8px, 1.1vw, 12px);
      background: var(--amp-gold-gradient);
      pointer-events: none;
      z-index: 4;
    }

    .lesson-section {
      position: relative;
      width: 100%;
      border: 0;
      overflow: hidden;
      --section-fill: #06080c;
      --section-glow-a: rgba(246, 194, 74, 0.06);
      --section-glow-b: rgba(246, 194, 74, 0.025);
      background: var(--section-fill);
      padding: var(--section-pad-top) var(--section-pad-x) var(--section-pad-bottom);
      isolation: isolate;
    }

    .lesson-section:nth-of-type(even) {
      --section-fill: #11131d;
      --section-glow-a: rgba(246, 194, 74, 0.07);
      --section-glow-b: rgba(95, 146, 220, 0.06);
    }

    #how-to-use-site {
      --section-fill: #050607;
    }

    #how-to-use-site::after {
      content: "";
      position: absolute;
      inset: 0;
      background-image: url("../images/backgrounds/blackhex.webp");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      opacity: 0.28;
      pointer-events: none;
      z-index: 2;
    }

    #learning-roadmap {
      --section-fill: #0b0b0b;
    }

    #learning-roadmap {
      padding-bottom: 0;
    }

    #learning-roadmap::after {
      content: "";
      position: absolute;
      inset: 0;
      background-image: url("../images/backgrounds/paisley2.webp");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      opacity: 0.16;
      pointer-events: none;
      z-index: 1;
    }

    .lesson-section + .lesson-section {
      position: relative;
      padding-top: calc(var(--section-pad-top) + clamp(1rem, 1.7vw, 1.3rem));
    }

    .lesson-section + .lesson-section::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      height: clamp(8px, 1.1vw, 12px);
      background: var(--amp-gold-gradient);
      pointer-events: none;
      z-index: 3;
    }

    .lesson-section > * {
      position: relative;
      z-index: 5;
      width: min(1240px, 100%);
      margin-left: auto;
      margin-right: auto;
    }

    .lesson-section h2 {
      margin: 0 0 0.9rem;
      color: #f8cf72;
      font-size: clamp(1.22rem, 2.55vw, 2rem);
      line-height: 1.18;
      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
      text-align: center;
    }
    .lesson-section > h2,
    .lesson-section > h3 {
      text-align: center !important;
      margin-left: auto !important;
      margin-right: auto !important;
      width: min(1240px, 100%);
      display: block;
    }

    .lesson-section-divider {
      width: min(140px, 42vw);
      height: 2px;
      margin: 0.45rem auto 1.2rem;
      background: rgba(169, 123, 47, 0.8);
      border-radius: 999px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
    }

    .lesson-subhead {
      margin: 1.8rem 0 0.55rem;
      font-size: clamp(1.02rem, 2vw, 1.28rem);
      letter-spacing: 0.02em;
      color: #f0d596;
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    }

    .lesson-section p + .lesson-subhead {
      margin-top: 2rem;
    }

    .lesson-subhead__icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 1.4em;
      margin-right: 0.35rem;
      opacity: 0.85;
      font-size: 1.05em;
    }

    .lesson-section p {
      margin: 0.35rem 0 0;
      color: #e1e6ee;
      line-height: 1.66;
      max-width: min(112ch, 100%);
      margin-left: auto;
      margin-right: auto;
      text-align: center;
      text-wrap: pretty;
    }

    .lesson-hero-media {
      position: relative;
      width: 100%;
      min-height: clamp(380px, 47vw, 660px);
      border-radius: 0;
      border-top: 1px solid rgba(246, 194, 74, 0.46);
      border-bottom: 1px solid rgba(246, 194, 74, 0.46);
      border-left: 0;
      border-right: 0;
      overflow: hidden;
      display: flex;
      align-items: stretch;
      margin-top: 0;
      margin-bottom: 0;
      box-shadow: 0 18px 34px rgba(0, 0, 0, 0.38);
      isolation: isolate;
    }

    .lesson-hero-media__bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      z-index: 0;
      transform: scale(1.04);
      filter: contrast(1.07) saturate(0.92);
    }

    .lesson-hero-media::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      background:
        radial-gradient(1200px 420px at 50% 46%, rgba(208, 165, 78, 0.22), rgba(8, 10, 15, 0) 62%),
        radial-gradient(900px 380px at 78% 15%, rgba(76, 123, 190, 0.14), rgba(8, 10, 15, 0) 65%),
        linear-gradient(165deg, rgba(4, 7, 12, 0.28), rgba(6, 8, 12, 0.64));
      pointer-events: none;
    }

    .lesson-hero-media::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 2;
      background:
        radial-gradient(circle at 50% 48%, rgba(0, 0, 0, 0) 18%, rgba(0, 0, 0, 0.64) 92%),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.66));
      pointer-events: none;
    }

    .lesson-hero-overlay {
      position: absolute;
      inset: 0;
      z-index: 4;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: clamp(0.95rem, 2.5vw, 1.8rem);
    }

    .lesson-hero-overlay::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      background: linear-gradient(180deg, rgba(8, 10, 14, 0.14), rgba(8, 10, 14, 0.24));
      pointer-events: none;
    }

    .lesson-hero-overlay::after {
      content: none;
    }

    .lesson-hero-overlay__content {
      position: relative;
      z-index: 2;
      width: min(1120px, 100%);
      padding: clamp(0.35rem, 1.5vw, 0.85rem);
    }

    .lesson-hero-overlay__kicker {
      margin: 0 0 0.35rem;
      color: rgba(255, 255, 255, 0.6);
      -webkit-text-fill-color: transparent;
      -webkit-text-stroke: 1px rgba(255, 255, 255, 0.74);
      font-size: clamp(1rem, 3.1vw, 2.35rem);
      letter-spacing: 0.14em;
      text-transform: uppercase;
      font-weight: 700;
      line-height: 1;
      text-shadow: 0 8px 20px rgba(0, 0, 0, 0.48), 0 0 24px rgba(255, 255, 255, 0.24);
      --hero-reveal-delay: 80ms;
    }

    .lesson-hero-overlay__content h1 {
      margin: 0.25rem 0 0.38rem;
      color: #f8cf72;
      font-size: clamp(1.78rem, 4vw, 3.25rem);
      line-height: 1.08;
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.68), 0 0 26px rgba(248, 207, 114, 0.16);
      position: relative;
      z-index: 1;
      --hero-reveal-delay: 180ms;
    }

    .lesson-hero-overlay__content > p:not(.lesson-hero-overlay__kicker) {
      margin: 0.3rem auto 0;
      color: #ecf1f9;
      line-height: 1.5;
      font-size: clamp(1rem, 1.35vw, 1.22rem);
      max-width: 88ch;
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.66);
      position: relative;
      z-index: 1;
      --hero-reveal-delay: 300ms;
    }

    body.has-scroll-reveal .lesson-hero-overlay__kicker,
    body.has-scroll-reveal .lesson-hero-overlay__content h1,
    body.has-scroll-reveal .lesson-hero-overlay__content > p:not(.lesson-hero-overlay__kicker) {
      opacity: 0;
      transform: translate3d(0, 18px, 0) scale(0.985);
      filter: blur(1.6px);
      transition:
        opacity 760ms var(--hero-enter-ease),
        transform 760ms var(--hero-enter-ease),
        filter 760ms var(--hero-enter-ease);
      transition-delay: var(--hero-reveal-delay, 0ms);
      will-change: opacity, transform, filter;
    }

    body.has-scroll-reveal .lesson-hero-overlay__kicker.is-revealed,
    body.has-scroll-reveal .lesson-hero-overlay__content h1.is-revealed,
    body.has-scroll-reveal .lesson-hero-overlay__content > p:not(.lesson-hero-overlay__kicker).is-revealed {
      opacity: 1;
      transform: none;
      filter: blur(0);
    }

    body.has-scroll-reveal .lesson-section > * {
      opacity: 0;
      transform: translate3d(0, 22px, 0);
      transition:
        opacity 640ms var(--section-enter-ease),
        transform 640ms var(--section-enter-ease);
      transition-delay: calc(24ms + (var(--reveal-index, 0) * 58ms));
      will-change: transform, opacity;
    }

    body.has-scroll-reveal .lesson-section > *.is-revealed {
      opacity: 1;
      transform: none;
    }

    .lesson-section .theory-roadmap-map,
    .lesson-section .theory-roadmap-map__board,
    .lesson-section .theory-roadmap-map__detail {
      border: 0;
      background: transparent;
      box-shadow: none;
    }

    .lesson-section .theory-roadmap-map {
      margin-top: 0.9rem;
      padding: 0;
    }

    .lesson-section .theory-roadmap-map__board {
      padding: 0;
    }

    .lesson-section .theory-roadmap-map__detail {
      padding: 0.85rem 0 0;
    }

    .theory-lesson-page .site-footer {
      background: transparent;
    }

    .theory-lesson-page .site-footer::before {
      content: "";
      background-image: url("../images/backgrounds/paisley2.webp");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      opacity: 0.08;
    }

    .theory-lesson-page .audio-visualizer {
      background: transparent !important;
      background-image: none !important;
      opacity: 0.64;
    }

    #learning-roadmap .audio-visualizer {
      position: relative;
      left: 0;
      right: 0;
      height: 68px;
      width: 100%;
      max-width: none;
      padding-left: 0;
      padding-right: 0;
      margin: 1.6rem 0 0;
    }

    .theory-lesson-page .audio-visualizer::before {
      content: none;
      opacity: 0;
    }

    .theory-lesson-page .audio-visualizer--footer {
      position: relative;
      overflow: hidden;
    }

    .theory-lesson-page .audio-visualizer--footer::after {
      content: "";
      position: absolute;
      inset: 0;
      background-image: url("../images/backgrounds/paisley2.webp");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      opacity: 0.08;
      pointer-events: none;
      z-index: 0;
    }

    .theory-lesson-page .audio-visualizer--footer .vis-bar {
      position: relative;
      z-index: 1;
    }

    .theory-foundations-actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 0.7rem;
      margin-top: 0.9rem;
      margin-bottom: clamp(2rem, 4vw, 3.4rem);
      background: transparent;
      border: 0;
      padding: 0;
      box-shadow: none;
    }

    /* Self-contained lesson controls. Do not depend on the Theory hub stylesheet. */
    .theory-foundations-actions .theory-hero__button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 42px;
      padding: 0.62rem 1rem;
      border: 1px solid rgba(204, 174, 90, 0.55);
      border-radius: 8px;
      color: #fff;
      background: #171716;
      font-size: 0.76rem;
      font-weight: 700;
      letter-spacing: 0.07em;
      text-decoration: none;
      text-transform: uppercase;
      transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    }

    .theory-foundations-actions .theory-hero__button--primary {
      color: #171109;
      background: #ccae5a;
      border-color: #efd890;
    }

    .theory-foundations-actions .theory-hero__button:hover,
    .theory-foundations-actions .theory-hero__button:focus-visible {
      transform: translateY(-2px);
      border-color: #f1d68e;
      background: #e0bd60;
      color: #15100a;
      outline: none;
    }

    .theory-roadmap-map--quest {
      position: relative;
      width: min(1240px, 100%);
      margin: 1.25rem auto 0;
      border: 1px solid rgba(204, 174, 90, 0.34);
      border-radius: 16px;
      background: rgba(5, 7, 10, 0.92);
      overflow: hidden;
      box-shadow: inset 0 1px rgba(255,255,255,0.05), 0 18px 38px rgba(0,0,0,0.36);
    }

    .theory-roadmap-map__hud {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding: 0.8rem 1rem;
      border-bottom: 1px solid rgba(204,174,90,0.24);
      background: #0d0f13;
    }

    .theory-roadmap-map__eyebrow,
    .theory-roadmap-map__caption {
      margin: 0 !important;
      text-align: left !important;
    }

    .theory-roadmap-map__eyebrow {
      color: #ccae5a !important;
      font-size: 0.7rem;
      font-weight: 800;
      letter-spacing: 0.15em;
      text-transform: uppercase;
    }

    .theory-roadmap-map__caption { color: #cbd1da !important; font-size: 0.8rem; }
    .theory-roadmap-map__board { padding: 1rem; overflow-x: auto; }
    .theory-roadmap-map__svg { display: block; width: 100%; min-width: 760px; height: auto; overflow: visible; }
    .theory-roadmap-track-shadow,
    .theory-roadmap-track-base,
    .theory-roadmap-track-progress,
    .theory-roadmap-track-pulse { fill: none; stroke-linecap: round; }
    .theory-roadmap-track-shadow { stroke: rgba(0,0,0,0.72); stroke-width: 15; }
    .theory-roadmap-track-base { stroke: rgba(255,255,255,0.14); stroke-width: 7; }
    .theory-roadmap-track-progress { stroke: url(#roadGold); stroke-width: 6; }
    .theory-roadmap-track-pulse { stroke: rgba(241,214,142,0.24); stroke-width: 13; }
    .theory-roadmap-node { cursor: pointer; outline: none; }
    .theory-roadmap-node-halo { fill: rgba(204,174,90,0.08); stroke: rgba(204,174,90,0.22); }
    .theory-roadmap-node-ring { fill: #0b0d11; stroke: #9e823e; stroke-width: 3; }
    .theory-roadmap-node-core { fill: #ccae5a; }
    .theory-roadmap-node-index { fill: #101010; font-size: 12px; font-weight: 800; text-anchor: middle; dominant-baseline: central; }
    .theory-roadmap-stop-label {
      fill: #f5f6f8;
      stroke: #050607;
      stroke-width: 8px;
      stroke-linejoin: round;
      paint-order: stroke fill;
      font-size: 14px;
      font-weight: 700;
      text-anchor: middle;
    }
    .theory-roadmap-node.is-selected .theory-roadmap-node-halo { fill: rgba(204,174,90,0.2); stroke: #efd890; }
    .theory-roadmap-node.is-selected .theory-roadmap-node-ring { stroke: #f1d68e; }
    .theory-roadmap-scout-core { fill: #fff0bd; }
    .theory-roadmap-scout-ring { fill: none; stroke: #ccae5a; stroke-width: 2; }

    .theory-roadmap-map__stops {
      display: grid;
      grid-template-columns: repeat(5, minmax(0,1fr));
      gap: 1px;
      border-top: 1px solid rgba(204,174,90,0.24);
      background: rgba(204,174,90,0.18);
    }

    .theory-roadmap-chip {
      min-height: 48px;
      padding: 0.55rem;
      border: 0;
      color: #aeb4be;
      background: #0d0f13;
      font-size: 0.72rem;
      cursor: pointer;
      transition: color .2s ease, background .2s ease;
    }

    .theory-roadmap-chip:hover,
    .theory-roadmap-chip:focus-visible,
    .theory-roadmap-chip.is-selected { color: #fff; background: #2a2416; outline: none; }

    @media (max-width: 720px) {
      .theory-roadmap-map__hud { align-items: flex-start; flex-direction: column; }
      .theory-roadmap-map__stops { grid-template-columns: 1fr; }
      .theory-foundations-actions .theory-hero__button { width: 100%; }
    }

    #learning-roadmap .theory-foundations-actions {
      margin-top: 3rem;
    }

    .back-to-top {
      position: fixed;
      right: clamp(0.5rem, 1.6vw, 0.95rem);
      top: 50%;
      transform: translate3d(0, calc(-50% + 14px), 0) scale(0.96);
      width: 2.35rem;
      height: 2.35rem;
      border-radius: 999px;
      border: 1px solid rgba(246, 194, 74, 0.68);
      background: linear-gradient(180deg, #f8cf72 0%, #f0b93d 100%);
      color: #1b1409;
      font-size: 1.05rem;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 8px 18px rgba(0, 0, 0, 0.32);
      cursor: pointer;
      z-index: 50;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease, transform 0.2s ease;
    }

    .back-to-top.is-visible {
      opacity: 1;
      transform: translate3d(0, -50%, 0) scale(1);
      pointer-events: auto;
    }

    @media (max-width: 900px) {
      .lesson-hero-media {
        min-height: clamp(320px, 62vw, 520px);
      }

      .lesson-hero-overlay__content {
        width: min(980px, 100%);
        padding: clamp(0.3rem, 1.9vw, 0.6rem);
      }

      .lesson-hero-overlay__kicker {
        margin-bottom: 0.22rem;
        font-size: clamp(0.92rem, 4.1vw, 1.35rem);
        letter-spacing: 0.09em;
      }

      .lesson-hero-overlay__content h1 {
        font-size: clamp(1.45rem, 5.1vw, 2.1rem);
      }

      .lesson-hero-overlay__content > p:not(.lesson-hero-overlay__kicker) {
        font-size: clamp(0.94rem, 3.1vw, 1.05rem);
        max-width: 60ch;
      }

      .lesson-content-wrap {
        --section-pad-top: clamp(1.45rem, 5vw, 2rem);
        --section-pad-x: clamp(0.88rem, 4vw, 1.35rem);
        --section-pad-bottom: clamp(1.55rem, 5.2vw, 2.15rem);
      }
    }

/* =========================================================
   2026 Foundations Guide redesign
   Scoped to this lesson so the shared header/footer stay intact.
   ========================================================= */

.theory-lesson-page .music-theory-main {
  background: #0a0a0a;
}

.theory-lesson-page .lesson-hero-media {
  min-height: clamp(520px, 68vh, 760px);
  border-top: 0;
  border-bottom-color: rgba(214, 164, 65, .7);
  box-shadow: none;
}

.theory-lesson-page .lesson-hero-media__bg {
  transform: scale(1.02);
  object-position: 62% center;
  filter: grayscale(.12) contrast(1.12) brightness(.72);
}

.theory-lesson-page .lesson-hero-media::before {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .96) 0%, rgba(0, 0, 0, .84) 38%, rgba(0, 0, 0, .28) 72%, rgba(0, 0, 0, .16) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, .08), rgba(0, 0, 0, .58));
}

.theory-lesson-page .lesson-hero-media::after {
  background: linear-gradient(180deg, transparent 62%, rgba(0, 0, 0, .8));
}

.theory-lesson-page .lesson-hero-overlay {
  position: relative;
  align-items: center;
  justify-content: flex-start;
  width: min(1440px, 100%);
  margin-inline: auto;
  padding: clamp(3rem, 8vw, 7rem);
  text-align: left;
}

.theory-lesson-page .lesson-hero-overlay__content {
  width: min(720px, 62vw);
  margin: 0;
  padding: 0;
}

.theory-lesson-page .lesson-hero-overlay__kicker {
  display: inline-flex;
  margin: 0 0 1.25rem;
  padding: .42rem .75rem;
  border: 1px solid rgba(214, 164, 65, .58);
  border-radius: 999px;
  color: #d6a441;
  -webkit-text-fill-color: currentColor;
  -webkit-text-stroke: 0;
  font-size: .72rem;
  letter-spacing: .16em;
  line-height: 1.2;
  text-shadow: none;
}

.theory-lesson-page .lesson-hero-overlay__content h1 {
  max-width: 10ch;
  margin: 0;
  color: #f5f1e8;
  font-family: "Cal Sans", sans-serif;
  font-size: clamp(3.4rem, 7vw, 7rem);
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: .92;
  text-shadow: 0 5px 28px rgba(0, 0, 0, .72);
}

.theory-lesson-page .lesson-hero-overlay__content h1::after {
  content: "";
  display: block;
  width: 84px;
  height: 3px;
  margin: 1.4rem 0 1.2rem;
  background: #d6a441;
}

.theory-lesson-page .lesson-hero-overlay__content > p:not(.lesson-hero-overlay__kicker) {
  max-width: 58ch;
  margin: 0;
  color: rgba(255, 255, 255, .8);
  font-size: clamp(1rem, 1.5vw, 1.22rem);
  line-height: 1.65;
  text-align: left;
}

.theory-lesson-page .lesson-content-wrap {
  background: #0a0a0a;
}

.theory-lesson-page .lesson-content-wrap::before {
  height: 1px;
  background: rgba(214, 164, 65, .65);
}

.theory-lesson-page #how-to-use-site {
  padding: clamp(4.5rem, 8vw, 7rem) clamp(1rem, 6vw, 5rem);
  background: #f3efe6;
  color: #171717;
}

.theory-lesson-page #how-to-use-site::after {
  content: "";
  inset: auto auto -20% -9%;
  width: min(520px, 44vw);
  aspect-ratio: 1;
  background: url("../images/icons/paisley-isolated.svg") left bottom / contain no-repeat;
  opacity: .035;
}

.theory-lesson-page .lesson-section__intro {
  width: min(1160px, 100%);
  margin: 0 auto clamp(2.4rem, 5vw, 4rem);
  text-align: left;
}

.theory-lesson-page .lesson-section__eyebrow {
  margin: 0 0 .65rem !important;
  color: #9f792e !important;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .17em;
  text-align: left !important;
  text-transform: uppercase;
}

.theory-lesson-page #how-to-use-site .lesson-section__intro h2 {
  width: auto;
  margin: 0 !important;
  color: #171717;
  font-family: "Cal Sans", sans-serif;
  font-size: clamp(2.6rem, 5vw, 4.8rem);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1;
  text-align: left !important;
  text-shadow: none;
}

.theory-lesson-page #how-to-use-site .lesson-section-divider {
  width: 72px;
  height: 3px;
  margin: 1.2rem 0 0;
  background: #d6a441;
  box-shadow: none;
}

.foundation-principles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
  width: min(1160px, 100%);
  margin: 0 auto;
}

.foundation-principle {
  position: relative;
  min-height: 100%;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid rgba(23, 23, 23, .13);
  border-top: 3px solid #d6a441;
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 16px 42px rgba(31, 25, 15, .07);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.foundation-principle:hover {
  border-color: rgba(159, 121, 46, .45);
  transform: translateY(-6px);
  box-shadow: 0 24px 52px rgba(31, 25, 15, .12);
}

.foundation-principle__index {
  display: block;
  margin-bottom: 1rem;
  color: #b48835;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .12em;
}

.theory-lesson-page #how-to-use-site .foundation-principle h3 {
  width: auto;
  margin: 0 0 .9rem !important;
  color: #171717;
  font-family: "Cal Sans", sans-serif;
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  font-weight: 500;
  text-align: left !important;
  text-shadow: none;
}

.theory-lesson-page #how-to-use-site .foundation-principle p {
  max-width: none;
  margin: 0;
  color: rgba(23, 23, 23, .74);
  font-size: .98rem;
  line-height: 1.7;
  text-align: left;
}

.theory-lesson-page #how-to-use-site .foundation-principle p + p {
  margin-top: .9rem;
}

.theory-lesson-page #learning-roadmap {
  padding: clamp(4.5rem, 8vw, 7rem) clamp(1rem, 6vw, 5rem) 0;
  background: #0a0a0a;
}

.theory-lesson-page #learning-roadmap::after {
  background-image: url("../images/backgrounds/paisley3.webp");
  opacity: .035;
}

.theory-lesson-page #learning-roadmap > h2 {
  color: #d6a441;
  font-family: "Cal Sans", sans-serif;
  font-size: clamp(2.5rem, 5vw, 4.6rem);
  font-weight: 500;
  letter-spacing: -.035em;
  text-shadow: none;
}

.theory-lesson-page #learning-roadmap .theory-roadmap-map--quest {
  margin-top: clamp(2rem, 4vw, 3.5rem);
  border: 1px solid rgba(214, 164, 65, .3);
  border-radius: 0;
  background: rgba(4, 4, 4, .78);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .34);
}

.theory-lesson-page .theory-roadmap-map__hud {
  padding: 1rem 1.25rem;
  background: rgba(14, 14, 14, .92);
}

.theory-lesson-page .theory-roadmap-chip {
  min-height: 56px;
  background: #111;
}

.theory-lesson-page .theory-roadmap-chip:hover,
.theory-lesson-page .theory-roadmap-chip:focus-visible,
.theory-lesson-page .theory-roadmap-chip.is-selected {
  color: #171109;
  background: #d6a441;
}

.theory-lesson-page .theory-foundations-actions .theory-hero__button {
  min-height: 48px;
  padding: .75rem 1.25rem;
  border-color: #9f792e;
  border-radius: 8px;
  background: rgba(5, 5, 5, .74);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .045em;
}

.theory-lesson-page .theory-foundations-actions .theory-hero__button--primary {
  color: #171109;
  border-color: #efd58c;
  background: #d2a449;
}

.theory-lesson-page #learning-roadmap .audio-visualizer {
  margin-top: 2.5rem;
}

@media (max-width: 760px) {
  .theory-lesson-page .lesson-hero-media {
    min-height: 620px;
  }

  .theory-lesson-page .lesson-hero-media__bg {
    object-position: 70% center;
  }

  .theory-lesson-page .lesson-hero-media::before {
    background: linear-gradient(180deg, rgba(0, 0, 0, .32), rgba(0, 0, 0, .94) 68%);
  }

  .theory-lesson-page .lesson-hero-overlay {
    align-items: flex-end;
    padding: 2rem 1.15rem 3.5rem;
  }

  .theory-lesson-page .lesson-hero-overlay__content {
    width: 100%;
  }

  .theory-lesson-page .lesson-hero-overlay__content h1 {
    max-width: 11ch;
    font-size: clamp(3rem, 15vw, 4.7rem);
  }

  .foundation-principles {
    grid-template-columns: 1fr;
  }

  .theory-lesson-page #how-to-use-site,
  .theory-lesson-page #learning-roadmap {
    padding-inline: 1rem;
  }
}

/* Single-column editorial reading path. */
.foundation-principles {
  width: min(900px, 100%);
  padding-left: clamp(2.75rem, 5vw, 4.25rem);
}

.foundation-principles::before {
  top: 0;
  bottom: 0;
  left: 9px;
}

.foundation-principle,
.foundation-principle:nth-child(odd),
.foundation-principle:nth-child(even) {
  width: 100%;
  margin: 0;
  padding: 0 0 clamp(2.75rem, 4.5vw, 4rem);
  transform: none;
}

.foundation-principle:nth-child(odd):hover,
.foundation-principle:nth-child(even):hover {
  transform: none;
}

.foundation-principle:nth-child(odd)::before,
.foundation-principle:nth-child(even)::before {
  top: .25rem;
  right: auto;
  left: calc(clamp(2.75rem, 5vw, 4.25rem) * -1 + 3px);
}

.theory-lesson-page #how-to-use-site .foundation-principle h3,
.theory-lesson-page #how-to-use-site .foundation-principle:nth-child(even) h3,
.theory-lesson-page #how-to-use-site .foundation-principle:nth-child(3) h3 {
  color: #f5f1e8;
  font-size: clamp(1.65rem, 3vw, 2.5rem);
}

.theory-lesson-page #how-to-use-site .foundation-principle p,
.theory-lesson-page #how-to-use-site .foundation-principle:first-child p {
  max-width: 70ch;
  font-size: clamp(.98rem, 1.2vw, 1.08rem);
  line-height: 1.75;
}

.foundation-roadmap-bridge {
  margin-top: 0;
}

/* Quiet editorial chapters: no cards, timeline or stagger. */
.theory-lesson-page #how-to-use-site {
  padding: clamp(3.5rem, 6vw, 5.5rem) 1rem clamp(4rem, 7vw, 6rem);
  background: #080808;
}

.theory-lesson-page #how-to-use-site::after {
  background-position: center top;
  opacity: .12;
}

.theory-lesson-page .lesson-section__intro {
  width: min(820px, 100%);
  margin: 0 auto clamp(2.5rem, 4vw, 3.5rem);
}

.theory-lesson-page #how-to-use-site .lesson-section__intro h2 {
  max-width: none;
  font-size: clamp(2.65rem, 5vw, 4.5rem);
  line-height: .96;
}

.theory-lesson-page #how-to-use-site .lesson-section-divider {
  width: 64px;
  height: 2px;
  margin-top: 1rem;
}

.foundation-principles {
  display: block;
  width: min(820px, 100%);
  margin: 0 auto;
  padding: 0;
}

.foundation-principles::before {
  content: none;
}

.foundation-principle,
.foundation-principle:nth-child(odd),
.foundation-principle:nth-child(even) {
  width: 100%;
  margin: 0;
  padding: clamp(2rem, 3.5vw, 3rem) 0;
  border: 0;
  border-top: 1px solid rgba(214, 164, 65, .32);
  background: transparent;
  box-shadow: none;
  transform: none;
}

.foundation-principle:last-child {
  border-bottom: 1px solid rgba(214, 164, 65, .32);
}

.foundation-principle::before,
.foundation-principle:nth-child(odd)::before,
.foundation-principle:nth-child(even)::before {
  content: none;
}

.foundation-principle:hover,
.foundation-principle:nth-child(odd):hover,
.foundation-principle:nth-child(even):hover {
  border-color: rgba(214, 164, 65, .32);
  box-shadow: none;
  transform: none;
}

.foundation-principle__index {
  display: block;
  margin: 0 0 .75rem;
  color: #d6a441;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .24em;
}

.theory-lesson-page #how-to-use-site .foundation-principle h3,
.theory-lesson-page #how-to-use-site .foundation-principle:nth-child(even) h3,
.theory-lesson-page #how-to-use-site .foundation-principle:nth-child(3) h3 {
  margin: 0 0 .9rem !important;
  color: #f5f1e8;
  font-size: clamp(1.55rem, 2.8vw, 2.25rem);
  line-height: 1.08;
}

.theory-lesson-page #how-to-use-site .foundation-principle p,
.theory-lesson-page #how-to-use-site .foundation-principle:first-child p {
  max-width: 68ch;
  margin: 0;
  color: rgba(245, 241, 232, .72);
  font-size: clamp(.97rem, 1.15vw, 1.04rem);
  line-height: 1.72;
}

/* Roadmap now continues inside the editorial guide. */
.theory-lesson-page #how-to-use-site #learning-roadmap {
  position: relative;
  z-index: 1;
  width: min(1160px, 100%);
  margin: clamp(3rem, 6vw, 5rem) auto 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.theory-lesson-page #how-to-use-site #learning-roadmap::before,
.theory-lesson-page #how-to-use-site #learning-roadmap::after {
  content: none;
  display: none;
}

.theory-lesson-page #how-to-use-site #learning-roadmap > h2 {
  margin: 0;
  color: #d6a441;
  font-family: "Cal Sans", sans-serif;
  font-size: clamp(2.5rem, 5vw, 4.6rem);
  font-weight: 500;
  letter-spacing: -.035em;
  text-align: center;
  text-shadow: none;
}

.theory-lesson-page #how-to-use-site .foundation-principle p + p {
  margin-top: .8rem;
}

.foundation-roadmap-bridge {
  align-items: flex-start;
  width: min(820px, 100%);
  margin: clamp(2.25rem, 4vw, 3.25rem) auto 0;
  font-size: clamp(1.25rem, 2.2vw, 1.8rem);
  text-align: left;
}

.foundation-roadmap-bridge::before {
  content: none;
}

@media (max-width: 760px) {
  .theory-lesson-page #how-to-use-site .lesson-section__intro h2 {
    font-size: clamp(2.5rem, 12vw, 3.6rem);
  }

  .foundation-principle,
  .foundation-principle:nth-child(odd),
  .foundation-principle:nth-child(even) {
    padding: 2rem 0;
  }
}

/* Compact the editorial guide without losing its staggered rhythm. */
.theory-lesson-page #how-to-use-site {
  padding-top: clamp(3.25rem, 5vw, 4.75rem);
  padding-bottom: clamp(3.5rem, 6vw, 5.25rem);
}

.theory-lesson-page .lesson-section__intro {
  margin-bottom: clamp(2.75rem, 5vw, 4rem);
}

.theory-lesson-page #how-to-use-site .lesson-section__intro h2 {
  font-size: clamp(3rem, 6vw, 5.5rem);
}

.foundation-principle {
  padding-bottom: clamp(3.25rem, 5.5vw, 5rem);
}

.foundation-principle:nth-child(even),
.foundation-principle:nth-child(even):hover {
  transform: translateY(clamp(1rem, 2.5vw, 2rem));
}

.foundation-roadmap-bridge {
  margin-top: clamp(.5rem, 2vw, 1.5rem);
}

.foundation-roadmap-bridge::before {
  height: 40px;
  margin-bottom: 1rem;
}

@media (max-width: 760px) {
  .theory-lesson-page #how-to-use-site .lesson-section__intro h2 {
    font-size: clamp(2.8rem, 14vw, 4.25rem);
  }

  .foundation-principle,
  .foundation-principle:nth-child(odd),
  .foundation-principle:nth-child(even) {
    padding-bottom: 3rem;
    transform: none;
  }
}

/* Definitive chapter layout: spacing only, with no decorative lines. */
.theory-lesson-page #how-to-use-site .foundation-principles {
  position: relative;
  display: block;
  width: min(820px, 100%);
  margin: 0 auto;
  padding: 0;
}

.theory-lesson-page #how-to-use-site .foundation-principles::before,
.theory-lesson-page #how-to-use-site .foundation-principles::after {
  content: none;
  display: none;
  background: none;
}

.theory-lesson-page #how-to-use-site .foundation-principle,
.theory-lesson-page #how-to-use-site .foundation-principle:nth-child(odd),
.theory-lesson-page #how-to-use-site .foundation-principle:nth-child(even) {
  position: relative;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 0 0 clamp(2.5rem, 4vw, 3.5rem);
  border: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}

.theory-lesson-page #how-to-use-site .foundation-principle::before,
.theory-lesson-page #how-to-use-site .foundation-principle::after,
.theory-lesson-page #how-to-use-site .foundation-principle:nth-child(odd)::before,
.theory-lesson-page #how-to-use-site .foundation-principle:nth-child(even)::before {
  content: none;
  display: none;
  border: 0;
  background: none;
}

.theory-lesson-page #how-to-use-site .foundation-principle:hover,
.theory-lesson-page #how-to-use-site .foundation-principle:nth-child(odd):hover,
.theory-lesson-page #how-to-use-site .foundation-principle:nth-child(even):hover {
  border: 0;
  box-shadow: none;
  transform: none;
}

.theory-lesson-page #how-to-use-site .foundation-principle h3,
.theory-lesson-page #how-to-use-site .foundation-principle:nth-child(even) h3,
.theory-lesson-page #how-to-use-site .foundation-principle:nth-child(3) h3 {
  margin: 0 0 .8rem !important;
  color: #f5f1e8;
  font-size: clamp(1.55rem, 2.8vw, 2.25rem);
  line-height: 1.08;
}

.theory-lesson-page #how-to-use-site .foundation-principle p,
.theory-lesson-page #how-to-use-site .foundation-principle:first-child p {
  max-width: 68ch;
  color: rgba(245, 241, 232, .72);
  font-size: clamp(.97rem, 1.15vw, 1.04rem);
  line-height: 1.72;
}

/* Direct lesson links for each roadmap stage. */
.theory-lesson-page .theory-roadmap-stop {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 1px;
  background: rgba(214, 164, 65, .18);
}

.theory-lesson-page .theory-roadmap-stop .theory-roadmap-chip {
  width: 100%;
  flex: 1 1 auto;
}

.theory-lesson-page .theory-roadmap-lessons {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  padding: .65rem .75rem;
  border: 0;
  color: #d6a441;
  background: #0b0b0b;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: color .2s ease, background-color .2s ease;
}

.theory-lesson-page .theory-roadmap-lessons:hover,
.theory-lesson-page .theory-roadmap-lessons:focus-visible {
  color: #171109;
  background: #d6a441;
  outline: none;
}

/* The visualiser is the final edge of the page content. */
.theory-lesson-page .lesson-content-wrap,
.theory-lesson-page #how-to-use-site,
.theory-lesson-page #how-to-use-site #learning-roadmap {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

.theory-lesson-page #how-to-use-site #learning-roadmap .audio-visualizer {
  display: flex;
  width: calc(100vw - var(--scrollbar-width, 0px));
  max-width: none;
  margin: 2.5rem 0 0 !important;
  margin-left: calc(50% - 50vw);
  margin-bottom: 0 !important;
}

.theory-lesson-page main,
.theory-lesson-page footer {
  margin-top: 0;
}

.theory-lesson-page #how-to-use-site .foundation-roadmap-bridge {
  width: min(820px, 100%);
  margin: 0 auto;
  text-align: left;
}

.theory-lesson-page #how-to-use-site .foundation-roadmap-bridge::before,
.theory-lesson-page #how-to-use-site .foundation-roadmap-bridge::after {
  content: none;
  display: none;
}

/* Final single-column editorial reading path. */
.foundation-principles {
  width: min(900px, 100%);
  padding-left: clamp(2.75rem, 5vw, 4.25rem);
}

.foundation-principles::before {
  top: 0;
  bottom: 0;
  left: 9px;
}

.foundation-principle,
.foundation-principle:nth-child(odd),
.foundation-principle:nth-child(even) {
  width: 100%;
  margin: 0;
  padding: 0 0 clamp(2.75rem, 4.5vw, 4rem);
  transform: none;
}

.foundation-principle:nth-child(odd):hover,
.foundation-principle:nth-child(even):hover {
  transform: none;
}

.foundation-principle:nth-child(odd)::before,
.foundation-principle:nth-child(even)::before {
  top: .25rem;
  right: auto;
  left: calc(clamp(2.75rem, 5vw, 4.25rem) * -1 + 3px);
}

.theory-lesson-page #how-to-use-site .foundation-principle h3,
.theory-lesson-page #how-to-use-site .foundation-principle:nth-child(even) h3,
.theory-lesson-page #how-to-use-site .foundation-principle:nth-child(3) h3 {
  color: #f5f1e8;
  font-size: clamp(1.65rem, 3vw, 2.5rem);
}

.theory-lesson-page #how-to-use-site .foundation-principle p,
.theory-lesson-page #how-to-use-site .foundation-principle:first-child p {
  max-width: 70ch;
  font-size: clamp(.98rem, 1.2vw, 1.08rem);
  line-height: 1.75;
}

.foundation-roadmap-bridge {
  margin-top: 0;
}

/* Keep hero lighting continuous across wide viewports. */
.theory-lesson-page .lesson-hero-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .foundation-principle {
    transition: none;
  }
}

/* Editorial foundations path */
.theory-lesson-page #how-to-use-site {
  overflow: hidden;
  padding: clamp(5rem, 9vw, 8rem) clamp(1rem, 6vw, 5rem) clamp(5.5rem, 10vw, 9rem);
  background: #080808;
  color: #f5f1e8;
}

.theory-lesson-page #how-to-use-site::after {
  inset: 0;
  width: auto;
  aspect-ratio: auto;
  background: url("../images/backgrounds/blackhex.webp") center / cover no-repeat;
  opacity: .22;
}

.theory-lesson-page .lesson-section__intro {
  width: min(1120px, 100%);
  margin-bottom: clamp(4.5rem, 9vw, 7.5rem);
}

.theory-lesson-page .lesson-section__eyebrow {
  color: #d6a441 !important;
}

.theory-lesson-page #how-to-use-site .lesson-section__intro h2 {
  max-width: 8ch;
  color: #f5f1e8;
  font-size: clamp(3.5rem, 8vw, 7.5rem);
  line-height: .88;
}

.theory-lesson-page #how-to-use-site .lesson-section-divider {
  width: 94px;
  background: #d6a441;
}

.foundation-principles {
  position: relative;
  display: block;
  width: min(1120px, 100%);
  margin: 0 auto;
}

.foundation-principles::before {
  content: "";
  position: absolute;
  top: -2rem;
  bottom: -1rem;
  left: 50%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(214, 164, 65, .85) 8%, rgba(214, 164, 65, .85) 92%, transparent);
  box-shadow: 0 0 18px rgba(214, 164, 65, .18);
}

.foundation-principle {
  position: relative;
  width: calc(50% - clamp(2.75rem, 6vw, 5rem));
  min-height: 0;
  margin: 0;
  padding: 0 0 clamp(5rem, 9vw, 8rem);
  border: 0;
  background: transparent;
  box-shadow: none;
  transition: none;
}

.foundation-principle:nth-child(odd) {
  margin-right: auto;
  padding-right: clamp(.5rem, 2vw, 1.5rem);
}

.foundation-principle:nth-child(even) {
  margin-left: auto;
  padding-left: clamp(.5rem, 2vw, 1.5rem);
  transform: translateY(clamp(2rem, 5vw, 4rem));
}

.foundation-principle:hover {
  border-color: transparent;
  box-shadow: none;
}

.foundation-principle:nth-child(odd):hover {
  transform: none;
}

.foundation-principle:nth-child(even):hover {
  transform: translateY(clamp(2rem, 5vw, 4rem));
}

.foundation-principle::before {
  content: "";
  position: absolute;
  top: .3rem;
  width: 13px;
  height: 13px;
  border: 2px solid #d6a441;
  border-radius: 50%;
  background: #080808;
  box-shadow: 0 0 0 7px rgba(214, 164, 65, .1), 0 0 22px rgba(214, 164, 65, .25);
}

.foundation-principle:nth-child(odd)::before {
  right: calc(clamp(2.75rem, 6vw, 5rem) * -1 - 7px);
}

.foundation-principle:nth-child(even)::before {
  left: calc(clamp(2.75rem, 6vw, 5rem) * -1 - 7px);
}

.foundation-principle__index {
  margin-bottom: 1.1rem;
  color: #d6a441;
  font-size: .72rem;
  letter-spacing: .22em;
}

.theory-lesson-page #how-to-use-site .foundation-principle h3 {
  margin-bottom: 1.15rem !important;
  color: #f5f1e8;
  font-size: clamp(1.8rem, 3.5vw, 3.2rem);
  line-height: 1.02;
}

.theory-lesson-page #how-to-use-site .foundation-principle:nth-child(even) h3 {
  color: #d6a441;
  font-size: clamp(1.55rem, 3vw, 2.65rem);
}

.theory-lesson-page #how-to-use-site .foundation-principle:nth-child(3) h3 {
  font-size: clamp(2.15rem, 4vw, 3.6rem);
}

.theory-lesson-page #how-to-use-site .foundation-principle p {
  max-width: 48ch;
  color: rgba(245, 241, 232, .7);
  font-size: clamp(.98rem, 1.2vw, 1.08rem);
  line-height: 1.8;
}

.theory-lesson-page #how-to-use-site .foundation-principle:first-child p {
  color: rgba(245, 241, 232, .9);
  font-size: clamp(1.12rem, 1.7vw, 1.35rem);
  line-height: 1.7;
}

.foundation-roadmap-bridge {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  width: fit-content;
  margin: clamp(2rem, 5vw, 4rem) auto 0;
  color: #f5f1e8;
  font-family: "Cal Sans", sans-serif;
  font-size: clamp(1.35rem, 2.7vw, 2.25rem);
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
}

.foundation-roadmap-bridge::before {
  content: "";
  width: 1px;
  height: 64px;
  margin: 0 auto 1.3rem;
  background: linear-gradient(transparent, #d6a441);
}

.foundation-roadmap-bridge span {
  margin-bottom: .55rem;
  color: #d6a441;
  font-family: inherit;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .19em;
  text-transform: uppercase;
}

.foundation-roadmap-bridge:hover,
.foundation-roadmap-bridge:focus-visible {
  color: #d6a441;
}

@media (max-width: 760px) {
  .theory-lesson-page #how-to-use-site .lesson-section__intro h2 {
    font-size: clamp(3.5rem, 18vw, 5.4rem);
  }

  .foundation-principles::before {
    left: 11px;
  }

  .foundation-principle,
  .foundation-principle:nth-child(odd),
  .foundation-principle:nth-child(even) {
    width: 100%;
    margin: 0;
    padding: 0 0 4.5rem 3.25rem;
    transform: none;
  }

  .foundation-principle:nth-child(odd):hover,
  .foundation-principle:nth-child(even):hover {
    transform: none;
  }

  .foundation-principle:nth-child(odd)::before,
  .foundation-principle:nth-child(even)::before {
    top: .2rem;
    right: auto;
    left: 5px;
  }

  .theory-lesson-page #how-to-use-site .foundation-principle h3,
  .theory-lesson-page #how-to-use-site .foundation-principle:nth-child(even) h3,
  .theory-lesson-page #how-to-use-site .foundation-principle:nth-child(3) h3 {
    font-size: clamp(1.8rem, 9vw, 2.7rem);
  }

  .foundation-roadmap-bridge {
    margin-top: 1rem;
  }
}

/* Final compact spacing overrides. */
.theory-lesson-page #how-to-use-site {
  padding-top: clamp(3.25rem, 5vw, 4.75rem);
  padding-bottom: clamp(3.5rem, 6vw, 5.25rem);
}

.theory-lesson-page .lesson-section__intro {
  margin-bottom: clamp(2.75rem, 5vw, 4rem);
}

.theory-lesson-page #how-to-use-site .lesson-section__intro h2 {
  font-size: clamp(3rem, 6vw, 5.5rem);
}

.foundation-principle {
  padding-bottom: clamp(3.25rem, 5.5vw, 5rem);
}

.foundation-principle:nth-child(even),
.foundation-principle:nth-child(even):hover {
  transform: translateY(clamp(1rem, 2.5vw, 2rem));
}

.foundation-roadmap-bridge {
  margin-top: clamp(.5rem, 2vw, 1.5rem);
}

.foundation-roadmap-bridge::before {
  height: 40px;
  margin-bottom: 1rem;
}

@media (max-width: 760px) {
  .theory-lesson-page #how-to-use-site .lesson-section__intro h2 {
    font-size: clamp(2.8rem, 14vw, 4.25rem);
  }

  .foundation-principle,
  .foundation-principle:nth-child(odd),
  .foundation-principle:nth-child(even) {
    padding-bottom: 3rem;
    transform: none;
  }
}

/* Remove every remaining chapter/path rule. */
.theory-lesson-page #how-to-use-site .foundation-principles {
  display: block;
  width: min(820px, 100%);
  margin: 0 auto;
  padding: 0;
}

.theory-lesson-page #how-to-use-site .foundation-principles::before,
.theory-lesson-page #how-to-use-site .foundation-principles::after,
.theory-lesson-page #how-to-use-site .foundation-principle::before,
.theory-lesson-page #how-to-use-site .foundation-principle::after,
.theory-lesson-page #how-to-use-site .foundation-roadmap-bridge::before,
.theory-lesson-page #how-to-use-site .foundation-roadmap-bridge::after {
  content: none;
  display: none;
}

.theory-lesson-page #how-to-use-site .foundation-principle,
.theory-lesson-page #how-to-use-site .foundation-principle:nth-child(odd),
.theory-lesson-page #how-to-use-site .foundation-principle:nth-child(even),
.theory-lesson-page #how-to-use-site .foundation-principle:hover {
  width: 100%;
  margin: 0;
  padding: 0 0 clamp(2.5rem, 4vw, 3.5rem);
  border: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}

.theory-lesson-page #how-to-use-site .foundation-principle h3,
.theory-lesson-page #how-to-use-site .foundation-principle:nth-child(even) h3,
.theory-lesson-page #how-to-use-site .foundation-principle:nth-child(3) h3 {
  margin: 0 0 .8rem !important;
  color: #f5f1e8;
  font-size: clamp(1.55rem, 2.8vw, 2.25rem);
}

.theory-lesson-page #how-to-use-site .foundation-principle p,
.theory-lesson-page #how-to-use-site .foundation-principle:first-child p {
  max-width: 68ch;
  color: rgba(245, 241, 232, .72);
  font-size: clamp(.97rem, 1.15vw, 1.04rem);
  line-height: 1.72;
}