/* Stowe Service Portal: Fix-it videos */
:root {
  --navy: #102936;
  --navy-950: #0a1d26;
  --slate: #54617a;
  --line: #c3cbe0;
  --line-soft: #e3e7f0;
  --grey-1: #f2f3f5;
  --grey-2: #e9ecf0;
  --grey-3: #d4d9df;
  --teal-deep: #2f6d63;
  --gold: #d8b979;
  --gold-deep: #7d6229; /* darker than brand gold so small text passes 4.5:1 contrast */
  --teal: #75b9b0;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Inter", sans-serif;
  color: var(--navy);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: "Inter", sans-serif; font-weight: 800; letter-spacing: -0.02em; margin: 0; }

/* These titles are h3 for a correct heading order but were designed as h4. This keeps the h4 look. */
.pillar h3, .compliance-card h3, .foot-col h3, .foot-locations h3, footer.site h3 {
  font-family: "Inter", sans-serif; font-weight: 700; letter-spacing: normal; margin: 1.33em 0;
}
a { color: var(--navy); }
button { font: inherit; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 32px; }
.muted { color: var(--slate); font-size: 12.5px; }
.small { font-size: 12px; }
.eyebrow {
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--slate);
}
:focus-visible { outline: 2px solid var(--teal-deep); outline-offset: 2px; }

/* Placeholder picture (cross box) */
.ph {
  background:
    linear-gradient(to top right, transparent calc(50% - 0.6px), #a9b2c3 50%, transparent calc(50% + 0.6px)),
    linear-gradient(to bottom right, transparent calc(50% - 0.6px), #a9b2c3 50%, transparent calc(50% + 0.6px)),
    var(--grey-2);
}

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background:
    linear-gradient(100deg, rgba(10, 29, 38, 0.6) 0%, rgba(10, 29, 38, 0.38) 45%, rgba(16, 41, 54, 0.2) 100%),
    url("../../images/hero-forecourt.webp") center 45% / cover no-repeat;
}
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(255, 253, 248, 0.0) 10%, #fffdf8);
}
.hero-glow {
  position: absolute; top: -140px; right: 6%; width: 460px; height: 460px; pointer-events: none;
  background: radial-gradient(circle, rgba(216, 185, 121, 0.14), transparent 70%);
  animation: drift-a 19s ease-in-out infinite;
}
.hero-inner { position: relative; z-index: 1; max-width: var(--wrap); margin: 0 auto; padding: 118px 32px 56px; }
.hero-card {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 18px;
  padding: 26px;
  box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.55);
  position: relative; overflow: hidden;
}
.hero-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--gold), var(--teal));
}

html, body { overflow-x: clip; }
.hero-card h1 { font-size: clamp(32px, calc(4.2 * var(--vw)), 46px); line-height: 1.02; letter-spacing: -0.03em; margin-top: 12px; }

/* ---------- Buttons ---------- */
.btn-ghost, .btn-dark {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 38px; padding: 0 16px; border-radius: 8px;
  font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none;
  white-space: nowrap;
}
.btn-ghost { background: #fff; color: var(--navy); border: 1px solid var(--line); }
.btn-ghost:hover { border-color: var(--navy); }

.btn-ghost[hidden], .btn-dark[hidden] { display: none; }

/* ---------- Section head ---------- */
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.section-head h2 { font-size: 26px; margin-top: 8px; }
.row-tools { display: flex; align-items: center; gap: 14px; font-size: 12.5px; color: var(--slate); }

/* ---------- Scrolling row ---------- */
.scroll-row {
  display: flex; gap: 16px;
  overflow-x: auto; scroll-snap-type: x proximity;
  padding: 18px 2px 16px; margin-top: 4px;
  scrollbar-width: thin;
}
.vcard {
  position: relative; display: block; flex: 0 0 200px;
  scroll-snap-align: start;
  aspect-ratio: 172 / 270;
  border-radius: 16px; overflow: hidden;
  border: 1px solid var(--line);
  text-decoration: none; color: var(--navy);
  cursor: pointer; padding: 0; text-align: left;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.vcard:hover { transform: translateY(-4px); box-shadow: 0 22px 36px -20px rgba(16, 41, 54, 0.45); }
.vcard.is-resume { border: 1.5px solid var(--navy); }
.vcard-top { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; justify-content: space-between; gap: 6px; }
.pill {
  font-family: "Inter", sans-serif; font-size: 11px; font-weight: 700;
  background: #fff; border: 1px solid var(--line); padding: 3px 9px; border-radius: 100px;
}
.pill.dark { background: var(--navy); color: #fff; border-color: var(--navy); font-family: "Inter", sans-serif; font-weight: 600; }
.pill.len { font-family: "Inter", sans-serif; font-weight: 600; }
.vcard-cap {
  position: absolute; left: 10px; right: 10px; bottom: 10px;
  background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px;
}
.vcard-cap b { display: block; font-family: "Inter", sans-serif; font-size: 15px; line-height: 1.22; }
.vcard-sub { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12px; color: var(--slate); line-height: 1.3; }
.play-dot {
  width: 24px; height: 24px; flex: none; border-radius: 50%;
  background: var(--navy); display: flex; align-items: center; justify-content: center;
}
.play-dot svg { width: 9px; height: 9px; margin-left: 2px; fill: #fff; }
.bar { height: 4px; border-radius: 4px; background: var(--line-soft); margin-top: 10px; }
.bar span { display: block; height: 4px; border-radius: 4px; background: var(--navy); }
.row-divider {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0 6px;
}
.row-divider i { width: 1px; flex: 1; background: var(--line); }
.row-divider span {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: "Inter", sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
  color: var(--slate); white-space: nowrap;
}

/* ---------- Learn + side ---------- */
.split { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 30px; align-items: stretch; }
.panel {
  border: 1px solid var(--line-soft); border-radius: 18px; padding: 24px; background: #fff;
  box-shadow: 0 1px 0 rgba(16, 41, 54, 0.04), 0 24px 44px -30px rgba(16, 41, 54, 0.35);
}
.vcard, .ccard { box-shadow: 0 14px 28px -22px rgba(16, 41, 54, 0.4); }
.board-banner, .seg { background: #fff; }
.learn { flex: 999 1 600px; min-width: 0; }

.ring { width: 64px; height: 64px; flex: none; }

.ring text { font-family: "Inter", sans-serif; font-weight: 800; font-size: 14px; fill: var(--navy); }

.step { padding: 12px 16px; display: flex; gap: 12px; align-items: center; background: #fff; }
.step.done { background: var(--grey-1); }
.step.active { background: var(--navy); color: #fff; }

.step b { display: block; font-family: "Inter", sans-serif; font-size: 12px; letter-spacing: 0.04em; }
.step small { display: block; font-size: 11.5px; color: var(--slate); }
.step.active small { color: #c7d0e6; }
.lessons { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.lesson {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--grey-1); border-radius: 12px; padding: 10px; border: 1.5px solid transparent;
}
.lesson.next { border-color: var(--navy); }
.lesson.locked { background: #fff; border: 1px dashed var(--line); }
.thumb { width: 96px; height: 60px; flex: none; border-radius: 8px; border: 1px solid var(--line); display: block; }
.thumb.lock { background: var(--grey-1); display: flex; align-items: center; justify-content: center; }
.thumb.lock svg { width: 18px; height: 18px; fill: none; stroke: var(--slate); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.ok { color: var(--teal-deep); }

.lesson.locked > .muted { padding: 0 8px; }

.side { flex: 1 1 300px; display: flex; flex-direction: column; gap: 20px; }

.badge-icon {
  width: 56px; height: 56px; flex: none; border-radius: 50%;
  border: 1.5px dashed var(--slate); background: #fff;
  display: flex; align-items: center; justify-content: center;
}
.badge-icon svg { width: 24px; height: 24px; fill: none; stroke: var(--navy); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Banner ---------- */

/* ---------- Catalog ---------- */

.seg { display: flex; background: var(--grey-1); border: 1px solid var(--line); border-radius: 100px; padding: 4px; }
.seg button {
  font-family: "Inter", sans-serif; font-size: 12px; font-weight: 700;
  border: 0; border-radius: 100px; min-height: 36px; padding: 0 16px; cursor: pointer;
  background: transparent; color: var(--navy);
}
.seg button[aria-pressed="true"] { background: var(--navy); color: #fff; }
.cat-bar {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 18px; padding-bottom: 6px; border-bottom: 1px solid var(--line-soft);
}
.tabs { display: flex; gap: 22px; flex-wrap: wrap; }
.tabs button {
  font-size: 13.5px; font-weight: 600; background: none; border: 0;
  border-bottom: 2px solid transparent; padding: 10px 0 8px; min-height: 40px; cursor: pointer; color: var(--slate);
}
.tabs button:hover { color: var(--navy); }
.tabs button[aria-pressed="true"] { color: var(--navy); border-bottom-color: var(--navy); }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px 20px; margin-top: 22px; }
.ccard {
  display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  background: #fff; color: var(--navy); cursor: pointer; padding: 0; text-align: left;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.ccard:hover { transform: translateY(-4px); box-shadow: 0 22px 36px -20px rgba(16, 41, 54, 0.45); }
.ccard-media { position: relative; aspect-ratio: 16 / 10; width: 100%; }
.ccard-media .pill { position: absolute; left: 10px; top: 10px; font-family: "Inter", sans-serif; font-size: 10.5px; letter-spacing: 0.06em; }
.ccard-media .len { position: absolute; right: 10px; bottom: 10px; font-size: 11px; font-weight: 600; background: #fff; border: 1px solid var(--line); padding: 3px 8px; border-radius: 6px; }
.ccard-media .watched-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(16, 41, 54, 0.15); }
.ccard-media .watched-bar span { display: block; height: 4px; background: var(--navy); }
.ccard-body { padding: 12px 14px 16px; }
.ccard-body small { display: block; font-family: "Inter", sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; color: var(--slate); }
.ccard-body b { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; margin-top: 6px; }
.empty { margin-top: 22px; border: 1px dashed var(--line); border-radius: 12px; padding: 28px; text-align: center; font-size: 14px; color: var(--slate); }
.empty[hidden] { display: none; }

/* ---------- Site footer (copied from styles.css so it matches the homepage) ---------- */
.site-footer-scope, footer.site {
  --stowe-navy: #102936; --stowe-gold: #d8b979; --stowe-teal: #75b9b0;
  --navy-950: #0a1d26; --navy-700: #28536a;
  font-family: "Inter", sans-serif;
}
footer.site a { color: inherit; text-decoration: none; }
footer.site ul { margin: 0; }
footer.site h4, footer.site h3 { font-family: "Inter", sans-serif; margin-top: 0; }
/* ---------- Footer ---------- */
footer.site {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.06), transparent 120px), var(--navy-950);
  color: #fff;
  position: relative;
  overflow: hidden;
}
/* Accent bar */
.foot-accent {
  height: 3px;
  background: linear-gradient(90deg, var(--stowe-gold), var(--stowe-teal));
  position: relative;
  z-index: 1;
}
footer.site::before {
  content: "";
  position: absolute;
  top: -120px;
  left: 10%;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(117, 185, 176, 0.1), transparent 70%);
  pointer-events: none;
  animation: bg-drift-a 25s ease-in-out infinite;
}
footer.site::after {
  content: "";
  position: absolute;
  bottom: -140px;
  right: 8%;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(216, 185, 121, 0.09), transparent 70%);
  pointer-events: none;
  animation: bg-drift-b 30s ease-in-out infinite;
}
/* Footer call-to-action band */
.foot-cta {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 22px 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  position: relative;
  z-index: 1;
  border-bottom: 1px solid var(--navy-700);
}
.foot-cta-label {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  margin-right: auto;
}
.foot-cta .btn {
  padding: 10px 20px;
  font-size: 12.5px;
}
/* Four-column layout */
.foot-columns {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 48px 32px 40px;
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1.1fr;
  gap: 40px;
  position: relative;
  z-index: 1;
}
.foot-col h4, .foot-col h3 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stowe-gold);
  margin-bottom: 20px;
}
/* Logo on a light backing */
.footer-brand {
  display: inline-flex;
  align-items: center;
  background: #fff;
  border-radius: 10px;
  padding: 8px 16px;
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.4);
}
.footer-brand img {
  display: block;
  width: auto;
  height: 34px;
  max-width: 170px;
  object-fit: contain;
}
.foot-col-brand p {
  font-size: 13px;
  color: #9fb0d1;
  line-height: 1.75;
  margin: 18px 0 22px;
  max-width: 260px;
}
.foot-social {
  display: flex;
  gap: 10px;
}
.foot-social a:hover,
.foot-social a:focus-visible {
  color: var(--stowe-navy);
  background: var(--stowe-gold);
  border-color: var(--stowe-gold);
  transform: translateY(-2px);
}
.foot-social a {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}
.foot-social svg {
  width: 14px;
  height: 14px;
}
.foot-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.foot-col ul a {
  font-size: 13px;
  color: #c7d0e6;
  transition: color 0.15s ease;
}
.foot-col ul a:hover {
  color: var(--stowe-gold);
}
/* Get In Touch */
.foot-contact {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.foot-contact li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 13px;
  color: #c7d0e6;
  line-height: 1.5;
}
.foot-contact svg {
  width: 15px;
  height: 15px;
  color: var(--stowe-gold);
  flex: none;
  margin-top: 2px;
}
.foot-contact b {
  display: block;
  color: #fff;
  font-weight: 600;
  font-size: 12.5px;
}
/* Our Locations */
.foot-locations {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 28px 32px 40px;
  border-top: 1px solid var(--navy-700);
  position: relative;
  z-index: 1;
}
.foot-locations h4, .foot-locations h3 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stowe-gold);
  margin-bottom: 18px;
}
.foot-loc-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 28px;
}
.foot-loc-grid li {
  font-size: 12.5px;
  color: #9fb0d1;
  line-height: 1.6;
}
.foot-loc-grid b {
  display: block;
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 3px;
}
.foot-loc-grid em {
  font-style: normal;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--stowe-navy);
  background: var(--stowe-gold);
  padding: 2px 7px;
  border-radius: 100px;
  margin-left: 6px;
  vertical-align: middle;
  white-space: nowrap;
}
.foot-loc-hubs {
  margin-top: 20px;
  font-size: 12.5px;
  color: #9fb0d1;
  line-height: 1.7;
}
.foot-loc-hubs b {
  color: #c7d0e6;
  font-weight: 600;
}
.foot-loc-grid a {
  display: block;
  transition: color 0.15s ease;
}
.foot-loc-grid a b {
  transition: color 0.15s ease;
}
.foot-loc-grid a:hover,
.foot-loc-grid a:hover b,
.foot-loc-grid a:focus-visible,
.foot-loc-grid a:focus-visible b {
  color: var(--stowe-gold);
}
.foot-loc-hubs a {
  color: #c7d0e6;
  border-bottom: 1px dotted rgba(199, 208, 230, 0.45);
  transition:
    color 0.15s ease,
    border-color 0.15s ease;
}
.foot-loc-hubs a:hover,
.foot-loc-hubs a:focus-visible {
  color: var(--stowe-gold);
  border-bottom-color: var(--stowe-gold);
}
@media (max-width: 900px) {
  .foot-loc-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .foot-loc-grid {
    grid-template-columns: 1fr;
  }
}
.foot-mid {
  border-top: 1px solid var(--navy-700);
  position: relative;
  z-index: 1;
}
.foot-bottom {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 18px 32px;
  font-size: 11.5px;
  color: #6b7ba0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--navy-700);
}
@media (max-width: 900px) {
  .foot-columns {
    grid-template-columns: 1fr 1fr;
    gap: 32px 24px;
  }
}
@media (max-width: 560px) {
  .foot-columns {
    grid-template-columns: 1fr;
  }
}
.foot-bottom-links a {
  color: inherit;
  transition: color 0.15s ease;
}
.foot-bottom-links a:hover {
  color: #fff;
}
.foot-bottom-links span {
  color: #4a5878;
}

/* footer call-to-action buttons */
footer.site .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
  border: 1px solid transparent;
  cursor: pointer;
}
footer.site .btn:hover {
  transform: translateY(-2px);
}
footer.site .btn-primary {
  background: var(--stowe-gold);
  color: var(--stowe-navy);
  box-shadow: 0 10px 24px -8px rgba(216, 185, 121, 0.5);
}
footer.site .btn-primary:hover {
  background: #e2c68e;
}
footer.site .btn-outline {
  border-color: rgba(117, 185, 176, 0.55);
  color: #fff;
}
footer.site .btn-outline:hover {
  border-color: var(--stowe-teal);
  background: rgba(117, 185, 176, 0.12);
}

/* ---------- Player ---------- */
.player {
  border: 0; padding: 0; border-radius: 14px; overflow: hidden;
  width: min(820px, calc(94 * var(--vw))); max-width: none; background: #fff; color: var(--navy);
  box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.8);
}
.player::backdrop { background: rgba(10, 29, 38, 0.8); }
.player-bar { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 12px 20px; background: var(--navy); color: #fff; }
.player-tag { font-family: "Inter", sans-serif; font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em; }
.player-close {
  width: 36px; height: 36px; border-radius: 50%; border: 0; background: #fff; color: var(--navy);
  font-size: 22px; line-height: 1; cursor: pointer;
}
.player-frame { position: relative; aspect-ratio: 16 / 9; background: #000; }
.player-screen, .player-screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.player-fallback { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: #fff; background: rgba(10, 29, 38, 0.92); text-align: center; padding: 20px; }
.player-fallback[hidden] { display: none; }
.player-fallback p { margin: 0; font-size: 15px; }
.player-body { padding: 18px 22px 22px; }
.player-body h3 { font-size: 22px; }
.player-body p { margin: 8px 0 0; }
.player-doc { margin-top: 14px; min-height: 42px; }

/* YouTube thumbnails on the cards (the grey placeholder shows until they load) */
.yt-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vcard .yt-thumb { z-index: 0; }
.vcard .vcard-top, .vcard .vcard-cap { z-index: 1; }
.vcard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,29,38,0.25), rgba(10,29,38,0) 30%, rgba(10,29,38,0) 60%, rgba(10,29,38,0.35)); pointer-events: none; }
.vcard .vcard-top, .vcard .vcard-cap { position: absolute; }
.ccard-media .pill, .ccard-media .len, .ccard-media .watched-bar,
.mod-media .mod-num, .mod-media .mod-chip, .mod-media .mod-play, .mod-media .mod-lock { z-index: 1; }
.mod-media .mod-num { color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,0.6); }
.mod-locked .yt-thumb { filter: grayscale(1); }

/* ---------- Small screens ---------- */
@media (max-width: 700px) {
  .wrap, .hero-inner { padding-left: 16px; padding-right: 16px; }
  .logo img { height: 38px; }

  .deco-ring, .diamond { display: none; }
  .vcard { flex-basis: 170px; }
  .row-tools > span { display: none; }
  .tabs { gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .vcard, .ccard { transition: none; }
  .glow, .deco-ring, .diamond, .hero-glow { animation: none; }
}

/* =========================================================
   Story bands: colour depth down the page
   ========================================================= */
body { background: #fffdf8; }
main { display: block; }
.band { position: relative; overflow: hidden; padding: 64px 0; }
.band > .wrap { position: relative; z-index: 1; }
.tealtext { color: var(--teal-deep); }
.goldtext { color: var(--gold); }
.bglow { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; }

/* 1. Cream band, fading out of the hero */
.band-cream {
  background:
    linear-gradient(to bottom, #fffdf8, #fbf8f1);
  padding-top: 40px; padding-bottom: 0;
}
.band-cream::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(16, 41, 54, 0.06) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, rgba(0,0,0,0.9), transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, rgba(0,0,0,0.9), transparent 78%);
}
.g-teal { top: -120px; left: -140px; width: 460px; height: 460px; background: radial-gradient(circle, rgba(117,185,176,0.14), transparent 70%); animation: drift-a 22s ease-in-out infinite; }
.deco-ring { position: absolute; top: 30px; right: 3%; width: 150px; height: 150px; border-radius: 50%; border: 1px solid rgba(117,185,176,0.4); animation: spin 42s linear infinite; pointer-events: none; }
.deco-ring::after { content: ""; position: absolute; inset: 18px; border-radius: 50%; border: 1px solid rgba(216,185,121,0.35); }

/* Seam between chapters (from main site) */
.seam { position: relative; z-index: 1; max-width: 520px; margin: 0 auto; padding: 30px 32px 34px; display: flex; align-items: center; gap: 16px; }
.seam-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-deep); white-space: nowrap; }
.seam-track { position: relative; flex: 1; height: 2px; background: rgba(16,41,54,0.12); border-radius: 2px; }
.seam-dot { position: absolute; top: 50%; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(216,185,121,0.25); transform: translate(-50%,-50%); animation: seam-run 3.2s ease-in-out infinite; }
@keyframes seam-run { 0% { left: 0; } 60%, 100% { left: 100%; } }

/* 2. Stowe Academy: learning path on a soft teal mist */
.band-academy {
  color: var(--navy); padding: 72px 0 64px;
  background:
    radial-gradient(rgba(16,41,54,0.05) 1px, transparent 1px) 0 0 / 26px 26px,
    linear-gradient(170deg, #eef5f3 0%, #f5f8f7 55%, #faf7ef 100%);
  border-top: 1px solid rgba(47,109,99,0.12);
  border-bottom: 1px solid rgba(47,109,99,0.10);
}
.g-gold { top: -160px; right: 4%; width: 480px; height: 480px; background: radial-gradient(circle, rgba(216,185,121,0.14), transparent 70%); animation: drift-b 24s ease-in-out infinite; }
.g-teal2 { bottom: -180px; left: -100px; width: 440px; height: 440px; background: radial-gradient(circle, rgba(117,185,176,0.16), transparent 70%); animation: drift-a 20s ease-in-out infinite; }
.chapter-head { max-width: 620px; }
.chapter-head h2 { font-size: clamp(28px, calc(3.4 * var(--vw)), 40px); line-height: 1.12; margin-top: 10px; text-wrap: balance; }
.chapter-head p { color: var(--slate); font-size: 15px; line-height: 1.7; margin: 12px 0 0; }
.text-grad { color: var(--teal-deep); }

.academy-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
.academy-stats { display: flex; gap: 0; background: #fff; border: 1px solid rgba(16,41,54,0.08); border-radius: 14px; box-shadow: 0 18px 36px -30px rgba(16,41,54,0.4); }
.academy-stats > div { padding: 14px 22px; display: flex; flex-direction: column; gap: 2px; }
.academy-stats > div + div { border-left: 1px solid var(--line-soft); }
.academy-stats b { font-family: "Inter", sans-serif; font-size: 26px; line-height: 1; font-variant-numeric: tabular-nums; }
.academy-stats span { font-size: 11.5px; color: var(--slate); }

/* The path */
.path { display: flex; align-items: stretch; gap: 0; margin-top: 34px; }
.stop {
  flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 14px; text-align: left;
  background: rgba(255,255,255,0.7); border: 1px solid rgba(16,41,54,0.08); border-radius: 16px;
  padding: 14px 16px; cursor: pointer; color: var(--navy);
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.stop:hover { background: #fff; transform: translateY(-2px); }
.stop[aria-selected="true"] { background: #fff; border-color: var(--teal-deep); box-shadow: 0 18px 36px -26px rgba(16,41,54,0.5); }
.stop.is-locked { cursor: not-allowed; background: rgba(255,255,255,0.4); border-style: dashed; }
.stop.is-locked:hover { transform: none; }
.stop-node {
  width: 46px; height: 46px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: "Inter", sans-serif; font-weight: 800; font-size: 18px;
}
.stop-node svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.stop.is-done .stop-node { background: var(--teal-deep); color: #fff; }
.stop.is-current .stop-node { background: var(--gold); color: var(--navy); box-shadow: 0 0 0 6px rgba(216,185,121,0.25); }
.stop.is-locked .stop-node { background: var(--grey-1); color: #8a96ad; }
.stop-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.stop-text small { font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate); }
.stop-text b { font-family: "Inter", sans-serif; font-size: 16px; }
.stop-text em { font-style: normal; font-size: 12px; color: var(--slate); }
.stop.is-done .stop-text em { color: var(--teal-deep); font-weight: 600; }
.stop.is-locked .stop-text b { color: #6b7894; }
.stop-bar { height: 4px; border-radius: 4px; background: var(--line-soft); margin-top: 6px; overflow: hidden; }
.stop-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--teal)); }
.path-link { flex: 0 0 34px; align-self: center; height: 2px; background: repeating-linear-gradient(90deg, rgba(16,41,54,0.2) 0 5px, transparent 5px 10px); }
.path-link.is-filled { background: linear-gradient(90deg, var(--teal-deep), var(--gold)); }

/* Selected level */
.level-panel {
  display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); gap: 24px;
  margin-top: 18px; background: #fff; border: 1px solid rgba(16,41,54,0.08); border-radius: 20px; padding: 24px;
  box-shadow: 0 1px 0 rgba(16,41,54,0.04), 0 30px 54px -40px rgba(16,41,54,0.45);
}
.level-info { display: flex; flex-direction: column; gap: 10px; padding-right: 24px; border-right: 1px solid var(--line-soft); }
.level-info .eyebrow { color: var(--teal-deep); }
.level-info h3 { font-size: 26px; line-height: 1.1; }
.level-info p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--slate); }
.lv-meter { height: 6px; border-radius: 6px; background: var(--line-soft); overflow: hidden; margin-top: 6px; }
.lv-meter span { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--teal)); transition: width 0.5s ease; }
.lv-count { font-size: 12.5px; color: var(--slate); }
.lv-badge { display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 12px; border-radius: 12px; background: #fbf5e6; border: 1px solid rgba(216,185,121,0.45); }
.lv-badge .badge-icon { width: 42px; height: 42px; background: #fff; border-color: var(--gold); }
.lv-badge .badge-icon svg { width: 20px; height: 20px; stroke: var(--gold-deep); }
.lv-badge small { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-deep); }
.lv-badge b { font-family: "Inter", sans-serif; font-size: 15px; }
.lv-cta { align-self: flex-start; margin-top: 6px; min-height: 44px; padding: 0 18px; font-size: 13.5px; }

/* Module cards */
.modules { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 14px; align-content: start; }
.modules li { display: flex; }
.mod {
  flex: 1; display: flex; flex-direction: column; text-align: left; padding: 0; cursor: pointer; color: var(--navy);
  background: #fff; border: 1px solid var(--line-soft); border-radius: 14px; overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
button.mod:hover { transform: translateY(-3px); box-shadow: 0 20px 34px -24px rgba(16,41,54,0.45); border-color: var(--line); }
.mod-media { position: relative; aspect-ratio: 16 / 10; display: block; }
.mod-num { position: absolute; left: 10px; bottom: 8px; font-family: "Inter", sans-serif; font-weight: 800; font-size: 26px; line-height: 1; color: var(--navy); text-shadow: 0 1px 0 #fff; }
.mod-chip { position: absolute; left: 10px; top: 10px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; padding: 3px 9px; border-radius: 100px; background: #fff; border: 1px solid var(--line); }
.mod-play, .mod-lock { position: absolute; right: 10px; bottom: 10px; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.mod-play { background: var(--navy); }
.mod-play svg { width: 11px; height: 11px; margin-left: 2px; fill: #fff; }
.mod-lock { background: #fff; border: 1px solid var(--line); }
.mod-lock svg { width: 15px; height: 15px; fill: none; stroke: var(--slate); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mod-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.mod-body b { font-size: 14px; font-weight: 600; line-height: 1.3; }
.mod-body small { font-size: 12px; color: var(--slate); }
.mod-bar { height: 4px; border-radius: 4px; background: var(--line-soft); margin-top: auto; overflow: hidden; }
.mod-body small + .mod-bar { margin-top: 8px; }
.mod-bar span { display: block; height: 100%; background: var(--navy); }

.mod-locked { background: var(--grey-1); border-style: dashed; cursor: default; }
.mod-locked .mod-body b { color: #56627a; }
.mod-locked .mod-media { opacity: 0.6; }

/* Track-a-call strip */
.track-strip {
  margin-top: 18px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 20px; border-radius: 14px; text-decoration: none; color: var(--navy); font-size: 14px;
  background: rgba(255,255,255,0.75); border: 1px solid rgba(16,41,54,0.08);
}
.track-strip:hover { background: #fff; }
.track-cta { margin-left: auto; font-family: "Inter", sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal-deep); }
.dot-warn { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px rgba(117,185,176,0.22); }

.btn-gold {
  display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 16px;
  border-radius: 8px; font-size: 13px; font-weight: 700; cursor: pointer; text-decoration: none; white-space: nowrap;
  background: var(--gold); color: var(--navy); border: 1px solid var(--gold);
  box-shadow: 0 8px 18px -10px rgba(216,185,121,0.55);
}
.btn-gold:hover { background: #e2c68e; }
.btn-gold[hidden] { display: none; }

@media (max-width: 1180px) {
  .modules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .path { flex-direction: column; gap: 0; }
  .path-link { flex: 0 0 18px; width: 2px; height: auto; align-self: auto; margin-left: 38px;
    background: repeating-linear-gradient(180deg, rgba(16,41,54,0.2) 0 5px, transparent 5px 10px); }
  .path-link.is-filled { background: linear-gradient(180deg, var(--teal-deep), var(--gold)); }
  .level-panel { grid-template-columns: 1fr; padding: 18px; }
  .level-info { padding-right: 0; border-right: 0; padding-bottom: 18px; border-bottom: 1px solid var(--line-soft); }
  .academy-stats { width: 100%; }
  .academy-stats > div { flex: 1; padding: 12px 14px; }
}
@media (max-width: 480px) {
  .modules { gap: 10px; }
  .mod-body b { font-size: 13px; }
  .mod-num { font-size: 20px; }
}

/* 3. Catalog on white */
.band-white { background: #fff; padding: 64px 0 72px; }
.band-white .section-head h2 { font-size: 30px; }
.g-gold-soft { top: -120px; right: -100px; width: 380px; height: 380px; background: radial-gradient(circle, rgba(216,185,121,0.10), transparent 70%); animation: drift-a 26s ease-in-out infinite; }
.diamond { position: absolute; bottom: 10%; left: 2%; width: 56px; height: 56px; border: 1px solid rgba(216,185,121,0.3); transform: rotate(45deg); animation: spin-45 30s linear infinite; pointer-events: none; }

/* 4. Closing chapter: warm, light */
.band-close {
  color: var(--navy); padding: 64px 0;
  background: linear-gradient(120deg, #faf6ec 0%, #fffdf8 55%, #eef5f3 100%);
  border-top: 1px solid rgba(216,185,121,0.25);
}
.g-teal3 { top: -140px; right: 8%; width: 420px; height: 420px; background: radial-gradient(circle, rgba(117,185,176,0.14), transparent 70%); animation: drift-b 18s ease-in-out infinite; }
.close-inner { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 32px; }
.close-inner > div:first-child { flex: 1 1 420px; min-width: 0; }
.close-inner h2 { font-size: clamp(32px, calc(4 * var(--vw)), 48px); line-height: 1.05; margin-top: 10px; }
.close-inner p { color: var(--slate); font-size: 15px; line-height: 1.7; max-width: 520px; margin: 14px 0 0; }
.goldtext { color: var(--gold-deep); }
.close-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.btn-gold.big, .btn-line.big { min-height: 48px; padding: 0 22px; font-size: 14px; border-radius: 10px; }
.btn-line { display: inline-flex; align-items: center; justify-content: center; color: var(--navy); background: #fff; text-decoration: none; font-weight: 600; border: 1px solid var(--line); }
.btn-line:hover { border-color: var(--navy); }
.close-note { flex-basis: 100%; font-size: 12px; color: var(--slate); }

/* Hero additions */
.hero-glow.two { top: auto; bottom: -180px; right: auto; left: -80px; background: radial-gradient(circle, rgba(117,185,176,0.22), transparent 70%); animation: drift-b 23s ease-in-out infinite; }
.hero::after { background: linear-gradient(to bottom, transparent, #fffdf8); }
.hero-lede { font-size: 15px; line-height: 1.65; color: var(--slate); max-width: 560px; margin: 12px 0 0; }
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.jump a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px;
  font-size: 13px; font-weight: 600; color: var(--navy); text-decoration: none;
  background: #fff; border: 1px solid var(--line-soft); border-radius: 100px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.jump a:hover { border-color: var(--navy); transform: translateY(-1px); }
.jd { width: 8px; height: 8px; border-radius: 50%; }
.jd.teal { background: var(--teal); } .jd.gold { background: var(--gold); } .jd.navy { background: var(--navy); }

/* Reading progress bar */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 90; pointer-events: none; }
.scroll-progress-bar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--gold), var(--teal)); }

/* ---------- Side section indicator (copied from styles.css, same as the homepage) ---------- */
.section-nav {
  position: fixed;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.section-dot {
  position: relative;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(16, 41, 54, 0.18);
  border: 1px solid rgba(16, 41, 54, 0.22);
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}
.section-dot:hover {
  transform: scale(1.3);
}
.section-dot.is-active {
  background: #2f6d63;
  border-color: #2f6d63;
  transform: scale(1.3);
}
.section-dot-tip {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  font-weight: 600;
  color: #102936;
  white-space: nowrap;
  background: #fff;
  border: 1px solid #e3e7f0;
  padding: 4px 10px;
  border-radius: 100px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  box-shadow: 0 6px 16px -8px rgba(16, 41, 54, 0.3);
}
.section-dot:hover .section-dot-tip {
  opacity: 1;
}
@media (max-width: 980px) {
  .section-nav {
    display: none;
  }
}

/* Anchored sections clear the sticky header */
[data-section] { scroll-margin-top: 80px; }

/* Scroll reveal: content is visible by default; JS only animates what starts below the fold */
.js-reveal .reveal.pending { opacity: 0; transform: translateY(26px); }
.reveal { transition: opacity 0.7s cubic-bezier(0.2,0.7,0.2,1), transform 0.7s cubic-bezier(0.2,0.7,0.2,1); }
.side.reveal { transition-delay: 0.12s; }

@media (max-width: 700px) {
  .band { padding: 48px 0; }
  .band-cream { padding-top: 28px; padding-bottom: 0; }
  .deco-ring, .diamond { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bglow, .deco-ring, .diamond, .seam-dot, .hero-glow { animation: none; }
  .reveal { transition: none; }
  .js-reveal .reveal.pending { opacity: 1; transform: none; }
}

@keyframes drift-a { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-20px, 24px); } }
@keyframes drift-b { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(18px, -22px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spin-45 { from { transform: rotate(45deg); } to { transform: rotate(405deg); } }

@media (max-width: 560px) {
  .lesson { flex-wrap: nowrap; gap: 12px; }
  .lesson .thumb { width: 64px; height: 42px; }

  .lesson > .btn-ghost, .lesson > .btn-gold { padding: 0 12px; }
  .lesson.locked > .muted { display: none; }
}

/* Images carry width/height attributes so the page doesn't jump while loading; CSS still sets the real size */
img { max-width: 100%; height: auto; }

/* =========================================================
   Corporate alignment (v1.4.2): the Fix-it page in the same look as the home page and News.
   Same midnight ink, cobalt actions, Inter type, mono eyebrows, flat ruled surfaces and the
   home page's side margins. The header and footer come from assets/css/layout/shell.css.
   ========================================================= */
:root {
  --navy: #0b1626; --navy-950: #070f1b; --slate: #3c4a5e; --mute: #6b778a;
  --line: #dde2ea; --line-soft: #e8ecf1; --grey-1: #f4f6f9; --grey-2: #e9edf2;
  --teal-deep: #1f5bff; --accent: #1f5bff; --accent-hi: #3d74ff;
  --edge: clamp(20px, 4vw, 120px); --page: min(calc(100vw - 2 * var(--edge)), 2200px);
}
body { color: var(--slate); line-height: 1.6; }
h1, h2, h3 { font-weight: 600; letter-spacing: -0.025em; color: var(--navy); text-wrap: balance; }
p { text-wrap: pretty; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--accent); color: #fff; text-decoration: none; }
.skip:focus { top: 12px; }
:focus-visible { outline-color: var(--accent); }
main .wrap { max-width: none; width: var(--page); padding: 0; }

/* Eyebrows: mono caps with the gold rule, as on the home page */
.eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute);
}
.eyebrow::before { content: ""; flex: none; width: 24px; height: 2px; background: linear-gradient(90deg, #d8b979, #ead7ab); }
.tealtext, .goldtext { color: var(--mute); }
.text-grad { color: var(--mute); }

/* Hero: the midnight page band used on every inner page */
.hero { background: var(--navy); border-bottom: 3px solid transparent; border-image: linear-gradient(90deg, #d8b979, #ead7ab) 1; }
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: calc(var(--page) / 12) 100%; background-position: var(--edge) 0;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 90%); mask-image: linear-gradient(180deg, #000, transparent 90%);
}
.hero::after, .hero-glow { display: none; }
.hero-inner { max-width: none; width: var(--page); padding: clamp(56px, 7vw, 120px) 0 clamp(48px, 6vw, 96px); }
.hero-card { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; border-radius: 0; padding: 0; box-shadow: none; overflow: visible; }
.hero-card::before { display: none; }
.hero-card .eyebrow { color: var(--gold); }
.hero-card h1 { margin-top: 22px; color: #fff; font-size: clamp(36px, 4.4vw, 72px); font-weight: 500; letter-spacing: -0.035em; line-height: 1.04; max-width: 14em; }
.hero-lede { margin-top: 22px; max-width: 38em; font-size: clamp(17px, 1.15vw, 20px); line-height: 1.6; color: #c3ccda; }
.jump { gap: 12px; margin-top: 36px; }
.jump a { min-height: 48px; padding: 0 20px; border-radius: 2px; background: transparent; border: 1px solid rgba(255, 255, 255, 0.3); color: #fff; font-weight: 600; }
.jump a:hover { border-color: #fff; background: rgba(255, 255, 255, 0.06); transform: none; }
.jd.navy { background: #8fb0ff; }

/* Sections: flat white / mist bands, no glows or ornaments */
.band { padding: clamp(64px, 7vw, 120px) 0; }
.band-cream, .band-white { background: #fff; }
.band-cream::before { display: none; }
.band-academy { background: var(--grey-1); }
.bglow, .deco-ring, .diamond, .seam { display: none; }
.section-head h2, .chapter-head h2 { font-size: clamp(28px, 2.6vw, 44px); font-weight: 500; letter-spacing: -0.03em; margin-top: 14px; }
.band-close { background: var(--navy); color: #c3ccda; }
.band-close h2 { color: #fff; font-size: clamp(32px, 3.4vw, 60px); font-weight: 500; letter-spacing: -0.03em; }
.band-close .close-inner p, .band-close .close-note { color: #c3ccda; }
.band-close .eyebrow { color: var(--gold); }

/* Buttons: flat, square-cornered, cobalt for the main action */
.btn-gold, .btn-ghost, .btn-dark, .btn-line, .btn-gold.big, .btn-line.big { border-radius: 2px; box-shadow: none; }
.btn-gold { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.btn-gold:hover { background: var(--accent-hi); border-color: var(--accent-hi); }
.btn-ghost:hover, .btn-line:hover { border-color: var(--accent); color: var(--accent); }
.band-close .btn-line { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.4); }
.band-close .btn-line:hover { border-color: #fff; color: #fff; background: rgba(255, 255, 255, 0.06); }
.seg { border-radius: 2px; background: #fff; }
.seg button { border-radius: 2px; }
.seg button[aria-pressed="true"] { background: var(--navy); }
.tabs button[aria-pressed="true"] { color: var(--accent); border-bottom-color: var(--accent); }

/* Cards and panels: ruled, near-square corners, soft shadow only on hover */
.vcard, .ccard, .modules li > *, .level-panel, .academy-stats, .track-strip, .panel, .empty, .lesson, .lv-badge, .path > * { border-radius: 4px; }
.vcard, .ccard { box-shadow: none; border: 1px solid var(--line); }
.vcard:hover, .ccard:hover { transform: translateY(-3px); box-shadow: 0 20px 36px -24px rgba(11, 22, 38, 0.35); }
.vcard-cap { border-radius: 2px; }
.pill, .mod-chip { border-radius: 2px; }
.academy-stats, .level-panel { box-shadow: none; border-color: var(--line); }
.academy-stats b { font-weight: 500; letter-spacing: -0.02em; }
.track-strip { background: #fff; border: 1px solid var(--line); }
.track-cta { color: var(--accent); font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 500; }
.player { border-radius: 4px; }

@media (max-width: 720px) {
  .jump a { flex: 1 1 100%; }
  .hero-card h1 br { display: none; }
}