:root {
  --bg: #050505;
  --bg-soft: #0b0c0e;
  --panel: #17191d;
  --panel-2: #23262c;
  --ink: #f8f5ef;
  --muted: #aaa7a2;
  --orange: #ff6508;
  --amber: #ffad0d;
  --cream: #fff0d1;
  --green: #59dd9a;
  --free-section-title-size: clamp(32px, 3.75vw, 54px);
  --shadow-dark: 0 0 0 1px rgba(255,255,255,.08);
  --shadow-dark-hover: 0 0 0 1px rgba(255,255,255,.14), 0 24px 70px rgba(0,0,0,.36);
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--bg);
  max-width: 100%;
  overflow-x: clip;
}
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 70% 8%, rgba(255,92,0,.11), transparent 25rem),
    linear-gradient(180deg, #050505, #090806 35%, #050505 100%);
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  max-width: 100%;
  overflow-x: clip;
}

/* A2 conversion narrative additions. */
body[data-experiment="a2"] .course-page {
  background: #050505;
}

body[data-experiment="a2"] .pain-section {
  padding-top: clamp(82px, 9vw, 140px);
}

body[data-experiment="a2"] .pain-intro {
  max-width: none;
}

body[data-experiment="a2"] .pain-intro h2 {
  max-width: 950px;
}

body[data-experiment="a2"] .three-pillars .pillar-project { order: 1; }
body[data-experiment="a2"] .three-pillars .pillar-career { order: 2; }
body[data-experiment="a2"] .three-pillars .pillar-community { order: 3; }

body[data-experiment="a2"] .intro-section .section-heading {
  max-width: none;
}

body[data-experiment="a2"] .intro-section .section-heading h2,
body[data-experiment="a2"] .benefits-section .section-heading h2 {
  font-size: clamp(25px, 4.8vw, 58px);
  white-space: nowrap;
  text-wrap: nowrap;
}

body[data-experiment="a2"] .intro-section .section-heading > p:last-child {
  max-width: 720px;
}

.fit-check {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 26px;
}

.fit-check > div {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px;
  border: 1px solid rgba(109, 214, 139, .22);
  border-radius: 20px;
  background: rgba(66, 184, 101, .07);
}

.fit-check > div.fit-check-no {
  border-color: rgba(255,255,255,.11);
  background: rgba(255,255,255,.035);
}

.fit-check b { margin-bottom: 5px; color: #fff; font-size: 20px; }
.fit-check span { position: relative; padding-left: 22px; color: rgba(255,255,255,.68); line-height: 1.55; }
.fit-check span::before { content: "✓"; position: absolute; left: 0; color: #71d78f; font-weight: 900; }
.fit-check-no span::before { content: "×"; color: rgba(255,255,255,.42); }

@media (max-width: 640px) {
  .fit-check { grid-template-columns: 1fr; }
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  opacity: .14;
  pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.2) .65px, transparent .65px);
  background-size: 8px 8px;
  mask-image: linear-gradient(to bottom, black, transparent 70%);
}
a { color: inherit; text-decoration: none; }
img {
  display: block;
  max-width: 100%;
  outline: 1px solid rgba(255,255,255,.1);
  outline-offset: -1px;
}
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
p, li, figcaption { text-wrap: pretty; }
em { color: var(--orange); font-style: normal; }

.page-glow {
  position: fixed;
  width: 32rem;
  height: 32rem;
  z-index: -2;
  border-radius: 50%;
  filter: blur(100px);
  opacity: .11;
  pointer-events: none;
}
.page-glow-a { top: 34%; left: -20rem; background: var(--orange); }
.page-glow-b { right: -22rem; top: 68%; background: var(--amber); }

.site-header {
  position: fixed;
  z-index: 50;
  top: 18px;
  left: 50%;
  width: min(1240px, calc(100% - 36px));
  height: 66px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  padding: 8px 10px 8px 20px;
  border-radius: 22px;
  background: rgba(12,12,12,.72);
  box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 14px 50px rgba(0,0,0,.28);
  backdrop-filter: blur(18px) saturate(140%);
  transition-property: background-color, box-shadow, transform;
  transition-duration: 180ms;
}
.site-header.scrolled { background: rgba(6,6,6,.9); box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 18px 60px rgba(0,0,0,.46); }
.brand { display: flex; align-items: center; min-width: 124px; height: 46px; }
.brand img { width: 118px; outline: none; }
.view-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-left: 18px;
  padding: 4px;
  border-radius: 15px;
  background: rgba(255,255,255,.055);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.view-tab {
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 13px;
  border: 0;
  border-radius: 11px;
  cursor: pointer;
  color: #9d9c9a;
  background: transparent;
  font-size: 12px;
  font-weight: 800;
  transition-property: color, background-color, box-shadow, scale;
  transition-duration: 170ms;
}
.view-tab small { padding: 3px 5px; border-radius: 5px; color: #767676; background: rgba(255,255,255,.06); font-size: 8px; letter-spacing: .06em; }
.view-tab.is-active { color: #071114; background: linear-gradient(110deg, #bffaff, #57e8ff); box-shadow: 0 8px 24px rgba(70,224,255,.18), inset 0 0 0 1px rgba(255,255,255,.6); }
.view-tab.is-active small { color: #087285; background: rgba(0,104,123,.1); }
.hot-tab:not(.is-active) small { color: #ffc36f; background: rgba(255,102,8,.14); }
.hot-tab.is-active { color: #251205; background: linear-gradient(110deg, var(--amber), var(--orange)); box-shadow: 0 8px 24px rgba(255,91,0,.22), inset 0 0 0 1px rgba(255,255,255,.42); }
.hot-tab.is-active small { color: #6e2500; background: rgba(71,25,0,.11); }
.view-tab:active { scale: .96; }
body[data-view="notes"] .hot-tab {
  position: relative;
  overflow: visible;
  color: #2a1406;
  background: linear-gradient(112deg, #ffd84f, #ff760d 72%, #ff5b08);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.42), 0 0 0 3px rgba(255,111,13,.1), 0 9px 30px rgba(255,91,0,.3);
}
body[data-view="notes"] .hot-tab::after {
  content: "";
  position: absolute;
  top: -6px;
  right: -6px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #ff3326;
  box-shadow: 0 0 0 3px #18110b, 0 0 0 7px rgba(255,51,38,.24), 0 0 21px rgba(255,51,38,.98);
  animation: hotPulse 1.25s cubic-bezier(.45,0,.35,1) infinite;
  will-change: transform, box-shadow;
}
body[data-view="notes"] .hot-tab:hover { color: #1f0d02; filter: brightness(1.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.58), 0 0 0 4px rgba(255,111,13,.13), 0 12px 34px rgba(255,91,0,.38); }
body[data-view="notes"] .hot-tab small { color: #fff7e8; background: rgba(87,30,0,.34); box-shadow: inset 0 0 0 1px rgba(255,255,255,.13); }
@keyframes hotPulse {
  0%, 100% { transform: scale(.9); box-shadow: 0 0 0 3px #18110b, 0 0 0 4px rgba(255,51,38,.4), 0 0 14px rgba(255,51,38,.88); }
  50% { transform: scale(1.16); box-shadow: 0 0 0 3px #18110b, 0 0 0 10px rgba(255,51,38,0), 0 0 26px rgba(255,51,38,1); }
}
.course-nudge {
  position: absolute;
  top: calc(100% + 13px);
  left: 230px;
  width: 390px;
  min-height: 70px;
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  border: 0;
  border-radius: 24px;
  cursor: pointer;
  text-align: left;
  color: #351805;
  background: linear-gradient(135deg, #fff8eb, #ffe3b4);
  box-shadow: 0 0 0 1px rgba(255,255,255,.7), 0 18px 48px rgba(0,0,0,.42), 0 10px 30px rgba(255,116,13,.2);
  transition-property: opacity, transform, box-shadow;
  transition-duration: 220ms;
  transition-timing-function: cubic-bezier(.2,0,0,1);
}
.course-nudge::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 41%;
  width: 19px;
  height: 19px;
  border-radius: 5px 0 0;
  background: #fff0d2;
  box-shadow: -1px -1px 0 rgba(255,255,255,.62);
  transform: rotate(45deg);
}
.course-nudge:hover { transform: translateY(-3px) rotate(-.35deg); box-shadow: 0 0 0 1px rgba(255,255,255,.8), 0 24px 58px rgba(0,0,0,.5), 0 13px 36px rgba(255,94,0,.26); }
.course-nudge:active { scale: .96; }
.nudge-avatar { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(145deg, #ffcf42, #ff6a08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.52), 0 7px 16px rgba(255,101,8,.2); font-size: 22px; transform: rotate(-7deg); }
.nudge-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.nudge-copy small { color: #bf5d13; font-size: 9px; font-weight: 900; letter-spacing: .08em; }
.nudge-copy b { color: #341706; font-size: 13px; line-height: 1.35; text-wrap: balance; }
.nudge-go { min-height: 40px; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 0 13px; border-radius: 14px; color: #fff8eb; background: #321606; box-shadow: 0 7px 16px rgba(79,35,5,.18); font-size: 10px; font-weight: 950; white-space: nowrap; transition-property: background-color, transform; transition-duration: 160ms; }
.nudge-go i { font-style: normal; transition-property: transform; transition-duration: 160ms; }
.course-nudge:hover .nudge-go { background: #ff6508; transform: translateY(-1px); }
.course-nudge:hover .nudge-go i { transform: translateX(2px); }
body[data-view="course"] .course-nudge,
body.has-scrolled .course-nudge { opacity: 0; transform: translateY(-9px) scale(.98); pointer-events: none; }
.site-header nav { display: flex; gap: 24px; margin: 0 auto; }
.site-header nav[hidden] { display: none !important; }
.site-header nav a {
  position: relative;
  min-height: 40px;
  display: flex;
  align-items: center;
  color: #c7c5c1;
  font-size: 14px;
  transition-property: color, transform;
  transition-duration: 150ms;
}
.site-header nav a:hover, .site-header nav a.active { color: #fff; }
.site-header nav a::after { content: ""; position: absolute; left: 50%; right: 50%; bottom: 1px; height: 2px; border-radius: 2px; opacity: 0; transition-property: left, right, opacity; transition-duration: 170ms; }
.site-header nav a.active::after { left: 0; right: 0; opacity: 1; }
.notes-nav a::after { background: #62efff; box-shadow: 0 0 10px rgba(98,239,255,.65); }
.course-nav a::after { background: var(--orange); box-shadow: 0 0 10px rgba(255,101,8,.65); }
body[data-view="notes"] .notes-nav a.active { color: #b9faff; }
.header-cta {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 20px;
  border-radius: 14px;
  background: linear-gradient(110deg, var(--amber), var(--orange));
  color: #17100b;
  font-size: 14px;
  font-weight: 900;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 8px 30px rgba(255,91,0,.28);
  transition-property: scale, filter;
  transition-duration: 150ms;
}
.header-cta:hover { filter: brightness(1.08); }
.header-cta:active, .button:active, .mobile-cta:active { scale: .96; }
body[data-view="notes"] .header-cta { color: #071114; background: linear-gradient(110deg, #c9fbff, #57e8ff); box-shadow: 0 8px 30px rgba(70,224,255,.2); }

.page-panel[hidden] { display: none !important; }
#notes, #free-start, #free-route, #free-version, #free-next,
#lesson-01, #lesson-02, #lesson-03, #lesson-04, #lesson-05, #lesson-06 { scroll-margin-top: 105px; }

/* Free-course notes */
.notes-page {
  --cyan: #62efff;
  --cyan-soft: #c5fbff;
  --violet: #7c73ff;
  --notes-panel: #121923;
  color: #f5fbff;
  background:
    radial-gradient(circle at 86% 7%, rgba(96,235,255,.12), transparent 28rem),
    radial-gradient(circle at 3% 48%, rgba(117,103,255,.11), transparent 30rem),
    #05080d;
}
.notes-page em { color: var(--cyan); }
.notes-page .section-kicker { color: var(--cyan); }
.notes-hero {
  min-height: 900px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr .9fr;
  gap: 68px;
  align-items: center;
  padding: 150px max(6vw, calc((100vw - 1240px)/2)) 105px;
  background:
    linear-gradient(rgba(90,225,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90,225,255,.045) 1px, transparent 1px),
    radial-gradient(circle at 76% 38%, rgba(94,229,255,.11), transparent 23rem),
    #05080d;
  background-size: 46px 46px, 46px 46px, auto, auto;
  mask-image: linear-gradient(to bottom, black 88%, transparent);
}
.notes-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .35;
  background: linear-gradient(115deg, transparent 10%, rgba(100,240,255,.08) 10.15%, transparent 10.3%, transparent 52%, rgba(124,115,255,.09) 52.15%, transparent 52.35%);
}
.notes-orbit { position: absolute; z-index: -1; border-radius: 50%; border: 1px solid rgba(98,239,255,.16); pointer-events: none; animation: orbitSpin 22s linear infinite; }
.notes-orbit::before, .notes-orbit::after { content: ""; position: absolute; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 22px var(--cyan); }
.notes-orbit::before { width: 8px; height: 8px; left: 13%; top: 13%; }
.notes-orbit::after { width: 4px; height: 4px; right: 5%; bottom: 27%; }
.orbit-a { width: 760px; height: 760px; right: -280px; top: 40px; }
.orbit-b { width: 430px; height: 430px; left: -260px; bottom: -170px; animation-direction: reverse; animation-duration: 16s; }
@keyframes orbitSpin { to { rotate: 360deg; } }
.notes-hero-copy { position: relative; z-index: 2; }
.notes-page .eyebrow { color: var(--cyan); }
.notes-page .eyebrow span { background: linear-gradient(90deg, var(--violet), var(--cyan)); box-shadow: 0 0 15px rgba(98,239,255,.7); }
.fresh-badge { width: fit-content; display: flex; align-items: center; gap: 8px; margin-top: 24px; padding: 7px 11px; border-radius: 999px; color: #b9faff; background: rgba(87,221,255,.075); box-shadow: inset 0 0 0 1px rgba(98,239,255,.2); font-size: 11px; font-weight: 800; }
.fresh-badge i, .console-tip i, .hot-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 13px var(--cyan); animation: dotPulse 1.8s ease-in-out infinite; }
@keyframes dotPulse { 50% { opacity: .38; scale: .72; } }
.notes-hero h1 { max-width: 710px; margin-top: 22px; font-size: clamp(52px, 5.2vw, 80px); line-height: .98; letter-spacing: -.06em; font-weight: 950; }
.notes-hero h1 em { display: inline-block; margin-top: 9px; white-space: nowrap; font-style: normal; color: transparent; background: linear-gradient(100deg, #71f3ff, #b9caff 55%, #8177ff); background-clip: text; -webkit-background-clip: text; }
.notes-subtitle { max-width: 670px; margin-top: 26px; color: #aeb8c4; font-size: 17px; line-height: 1.85; }
.notes-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 31px; color: #c8d4dc; font-size: 12px; }
.notes-meta span { min-height: 48px; display: inline-flex; align-items: center; gap: 7px; padding: 0 18px; border-radius: 15px; background: rgba(255,255,255,.055); box-shadow: 0 0 0 1px rgba(255,255,255,.13), inset 0 1px 0 rgba(255,255,255,.04); }
.notes-meta span:first-child { color: #071114; background: linear-gradient(110deg, #d2fdff, #52e8fb); box-shadow: 0 12px 40px rgba(64,220,245,.18), inset 0 0 0 1px rgba(255,255,255,.58); }
.notes-meta b { color: #e9fdff; font-family: Impact, sans-serif; font-size: 21px; font-variant-numeric: tabular-nums; }
.notes-meta span:first-child b { color: #071114; }
.route-console { overflow: hidden; border-radius: 28px; background: rgba(12,18,27,.78); box-shadow: 0 0 0 1px rgba(143,238,255,.13), 0 38px 100px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.04); backdrop-filter: blur(18px); transform: perspective(1000px) rotateY(-4deg) rotateX(1deg); }
.console-top { min-height: 50px; display: flex; align-items: center; padding: 0 18px; border-bottom: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.025); color: #6e7e8b; font-size: 9px; letter-spacing: .08em; }
.console-top > span { display: flex; gap: 6px; }
.console-top i { width: 7px; height: 7px; border-radius: 50%; background: #38424d; }
.console-top i:first-child { background: #62efff; box-shadow: 0 0 10px rgba(98,239,255,.7); }
.console-top b { margin-left: 16px; font-family: monospace; font-weight: 500; }
.console-top small { margin-left: auto; color: #75efba; }
.console-body { padding: 28px; }
.console-label { color: #64717f; font-family: monospace; font-size: 10px; letter-spacing: .12em; }
.console-body ol { display: grid; gap: 8px; list-style: none; padding: 0; margin: 20px 0 0; }
.console-body li { min-height: 57px; display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 12px; padding: 8px 15px 8px 11px; border-radius: 14px; color: #dce5eb; background: rgba(255,255,255,.035); box-shadow: inset 0 0 0 1px rgba(255,255,255,.045); transition-property: transform, background-color, box-shadow; transition-duration: 170ms; }
.console-body li:hover { transform: translateX(5px); background: rgba(91,228,255,.08); box-shadow: inset 0 0 0 1px rgba(98,239,255,.13); }
.console-body li span { color: var(--cyan); font-family: monospace; font-size: 11px; }
.console-body li b { font-size: 13px; }
.console-body li small { color: #697785; font-family: monospace; font-size: 8px; letter-spacing: .08em; }
.console-progress { height: 4px; margin-top: 24px; overflow: hidden; border-radius: 4px; background: rgba(255,255,255,.06); }
.console-progress span { width: 34%; height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, var(--violet), var(--cyan)); box-shadow: 0 0 14px var(--cyan); animation: loadingRoute 4.5s ease-in-out infinite; }
@keyframes loadingRoute { 0%,100% { width: 21%; translate: 0; } 50% { width: 48%; translate: 105%; } }
.console-tip { display: flex; align-items: center; gap: 8px; margin-top: 14px; color: #71808d; font-size: 10px; }
.console-tip i { flex: 0 0 auto; width: 6px; height: 6px; background: #6cecb6; box-shadow: 0 0 10px #6cecb6; }
.notes-ticker { overflow: hidden; border-block: 1px solid rgba(99,235,255,.1); background: #0b2035; }
.notes-ticker-track {
  width: max-content;
  display: flex;
  color: #d9faff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .1em;
  animation: ticker 27s linear infinite;
  will-change: transform;
}
.notes-ticker i { color: var(--cyan); font-style: normal; text-shadow: 0 0 12px rgba(98,239,255,.8); }
.free-section { width: min(1240px, calc(100% - 48px)); margin: 0 auto; padding: 130px 0; }
.free-heading { max-width: 790px; }
.free-heading h2,
.route-heading h2,
.free-next-heading h2 { color: #fff; font-size: var(--free-section-title-size); line-height: 1.08; letter-spacing: -.055em; font-weight: 950; text-wrap: balance; }
.free-heading h2 { margin-top: 15px; }
.free-heading > p:last-child { margin-top: 23px; color: #93a0ad; font-size: 15px; line-height: 1.85; }
.access-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 55px; }
.access-card {
  --access-accent: var(--cyan);
  --access-accent-soft: rgba(98,239,255,.12);
  min-width: 0;
  min-height: 520px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 28px;
  border-radius: 32px;
  background: radial-gradient(circle at 92% 0%, var(--access-accent-soft), transparent 14rem), linear-gradient(150deg, #16222d, #0a1118 76%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.085), 0 26px 72px rgba(0,0,0,.27), inset 0 1px 0 rgba(255,255,255,.045);
  transition-property: transform, box-shadow;
  transition-duration: 180ms;
  transition-timing-function: cubic-bezier(.2,0,0,1);
}
.access-card::before { content: ""; position: absolute; z-index: 1; top: 0; left: 28px; width: 48px; height: 2px; border-radius: 0 0 999px 999px; background: var(--access-accent); box-shadow: 0 0 18px var(--access-accent); opacity: .78; pointer-events: none; }
.access-card::after { content: ""; position: absolute; right: -44px; bottom: -58px; width: 150px; height: 150px; border-radius: 50%; border: 26px solid var(--access-accent-soft); pointer-events: none; }
.access-card:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 34px 88px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.055); }
.access-card-top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; }
.access-tag { min-height: 28px; display: inline-flex; align-items: center; padding: 0 9px; border-radius: 9px; color: #062129; background: var(--access-accent); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; font-weight: 950; letter-spacing: .08em; }
.access-card-top small { color: #627381; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 8px; letter-spacing: .1em; }
.access-copy { position: relative; z-index: 1; margin-top: 20px; }
.access-copy h3 { color: #f3fbff; font-size: clamp(21px, 1.65vw, 25px); line-height: 1.2; letter-spacing: -.025em; text-wrap: balance; }
.access-copy p { min-height: 48px; margin-top: 10px; color: #9aa8b4; font-size: 13px; font-weight: 600; line-height: 1.65; text-wrap: pretty; }
.bili-profile { min-height: 98px; position: relative; z-index: 1; display: grid; grid-template-columns: 62px 1fr; gap: 15px; align-items: center; margin-top: 29px; padding: 15px; border-radius: 23px; background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(235,248,252,.92)); box-shadow: 0 15px 38px rgba(0,0,0,.26), 0 0 0 1px rgba(255,255,255,.18), inset 0 1px 0 #fff; }
.bili-avatar-crop { width: 62px; height: 62px; position: relative; overflow: hidden; border-radius: 50%; background: #ddf4ff; box-shadow: 0 0 0 3px #fff, 0 6px 16px rgba(0,120,170,.17); }
.bili-avatar-crop img { width: 575px; max-width: none; position: absolute; left: -41px; top: -15px; outline: none; }
.bili-profile-copy { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.bili-profile-copy strong { overflow: hidden; color: #20242a; font-size: 16px; line-height: 1.2; white-space: nowrap; text-overflow: ellipsis; }
.bili-profile-copy strong i { display: inline-flex; align-items: center; margin-left: 5px; padding: 2px 4px; border-radius: 3px; color: #fff; background: #ff3d3d; font-size: 8px; font-style: normal; vertical-align: 2px; }
.bili-profile-copy span { overflow: hidden; color: #737b86; font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
.access-actions { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto; gap: 9px; margin-top: auto; padding-top: 24px; }
.access-primary, .access-secondary { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; border-radius: 15px; font-size: 12px; font-weight: 900; transition-property: scale, filter, background-color, color, box-shadow; transition-duration: 150ms; }
.access-primary { gap: 8px; padding: 0 17px 0 19px; border: 0; color: #061519; background: linear-gradient(110deg, #c9fbff, var(--access-accent)); box-shadow: 0 11px 25px rgba(45,210,234,.13), inset 0 0 0 1px rgba(255,255,255,.4); }
.access-primary span { font-size: 16px; transition-property: transform; transition-duration: 150ms; }
.access-primary:hover { filter: brightness(1.08); }
.access-primary:hover span { transform: translateX(2px); }
.access-primary:active, .access-secondary:active { scale: .96; }
.access-primary:focus-visible, .access-secondary:focus-visible { outline: 2px solid var(--access-accent); outline-offset: 3px; }
.access-secondary { padding-inline: 15px; color: #b8c8d3; background: rgba(255,255,255,.055); box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); }
.access-secondary:hover { color: #fff; background: rgba(255,255,255,.09); }
.access-card-group { --access-accent: #77f0df; --access-accent-soft: rgba(90,234,208,.11); }
.group-qr { width: min(234px, 84%); position: relative; z-index: 1; align-self: center; margin: 25px auto auto; padding: 11px 11px 13px; border-radius: 27px; background: #fff; box-shadow: 0 20px 44px rgba(0,0,0,.32), 0 0 0 1px rgba(255,255,255,.18); }
.group-qr img { width: 100%; aspect-ratio: 1; border-radius: 16px; outline: 1px solid rgba(0,0,0,.1); outline-offset: -1px; }
.group-qr figcaption { display: flex; align-items: center; justify-content: center; gap: 7px; padding-top: 9px; color: #273139; font-size: 10px; font-weight: 850; }
.group-qr figcaption i { width: 6px; height: 6px; border-radius: 50%; background: #20c991; box-shadow: 0 0 10px rgba(32,201,145,.6); }
.qr-corners::before, .qr-corners::after { content: ""; position: absolute; z-index: 2; width: 28px; height: 28px; pointer-events: none; }
.qr-corners::before { left: -5px; top: -5px; border-left: 2px solid var(--access-accent); border-top: 2px solid var(--access-accent); border-radius: 8px 0 0; }
.qr-corners::after { right: -5px; bottom: -5px; border-right: 2px solid var(--access-accent); border-bottom: 2px solid var(--access-accent); border-radius: 0 0 8px; }
.access-card-course {
  --access-accent: #ff9b36;
  --access-accent-soft: rgba(255,139,38,.13);
  isolation: isolate;
  background:
    radial-gradient(circle at 78% 31%, rgba(255,153,51,.1), transparent 11rem),
    radial-gradient(circle at 92% 0%, var(--access-accent-soft), transparent 14rem),
    linear-gradient(150deg, #211b18, #101215 76%);
}
.access-card-course::before {
  width: 86px;
  background: linear-gradient(90deg, transparent, #ff9b36 20%, #fff2bb 52%, #ff7622 82%, transparent);
  box-shadow: 0 0 13px rgba(255,137,41,.85), 0 0 28px rgba(255,104,21,.25);
  opacity: .68;
  animation: courseValueRail 5.4s cubic-bezier(.2,0,0,1) infinite;
  animation-play-state: paused;
}
.access-card-course::after {
  right: -52px;
  bottom: -66px;
  width: 166px;
  height: 166px;
  border: 1px solid rgba(255,178,75,.24);
  box-shadow:
    0 0 0 22px rgba(255,139,38,.045),
    0 0 0 48px rgba(255,139,38,.02),
    0 0 38px rgba(255,104,18,.13);
  opacity: .62;
  animation: courseValueOrbit 5.4s cubic-bezier(.2,0,0,1) infinite;
  animation-play-state: paused;
}
.access-card-course:hover {
  box-shadow:
    0 0 0 1px rgba(255,209,126,.2),
    0 34px 88px rgba(0,0,0,.4),
    0 18px 54px rgba(255,94,12,.1),
    inset 0 1px 0 rgba(255,255,255,.065);
}
.access-card-course .access-tag {
  gap: 7px;
  color: #281302;
  background: linear-gradient(105deg, #ffd467, #ff8a2c);
  box-shadow: 0 7px 20px rgba(255,116,25,.16), inset 0 1px rgba(255,255,255,.55);
}
.access-card-course .access-tag::after {
  content: "";
  width: 5px;
  height: 5px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #fff5cf;
  box-shadow: 0 0 0 4px rgba(255,241,184,.14), 0 0 12px rgba(255,245,207,.95);
  animation: courseValueSignal 2.7s ease-in-out infinite;
  animation-play-state: paused;
}
.course-feature {
  position: relative;
  z-index: 1;
  overflow: hidden;
  margin-top: 21px;
  border-radius: 18px;
  background: #120804;
  box-shadow: 0 0 0 1px rgba(255,181,78,.34), 0 16px 34px rgba(0,0,0,.32), 0 0 32px rgba(255,119,22,.1), inset 0 1px rgba(255,255,255,.1);
}
.course-feature::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: -34% -76%;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,217,132,.08) 47%, rgba(255,249,215,.44) 50%, rgba(255,151,56,.08) 54%, transparent 61%);
  transform: translateX(-34%) skewX(-14deg);
  animation: coursePosterShine 5.8s cubic-bezier(.2,0,0,1) infinite;
  animation-play-state: paused;
}
.course-feature::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), inset 0 -24px 44px rgba(64,18,0,.1);
}
.course-feature img {
  width: 100%;
  aspect-ratio: 1.72;
  display: block;
  object-fit: cover;
  outline: 1px solid rgba(255,255,255,.1);
  outline-offset: -1px;
  animation: coursePosterDepth 6.8s ease-in-out infinite;
  animation-play-state: paused;
}
.access-course-button {
  width: 100%;
  position: relative;
  z-index: 1;
  overflow: hidden;
  isolation: isolate;
  margin-top: auto;
  cursor: pointer;
  color: #291303;
  background: linear-gradient(105deg, #ffd467, #ff8128);
  box-shadow: 0 11px 25px rgba(255,112,22,.14), inset 0 0 0 1px rgba(255,255,255,.35);
}
.access-course-button::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(105deg, transparent 28%, rgba(255,255,255,.42) 46%, transparent 64%);
  transform: translateX(-110%);
  animation: courseButtonShine 4.8s cubic-bezier(.2,0,0,1) infinite;
  animation-play-state: paused;
}
.access-card-course.is-motion-active::before,
.access-card-course.is-motion-active::after,
.access-card-course.is-motion-active .access-tag::after,
.access-card-course.is-motion-active .course-feature::before,
.access-card-course.is-motion-active .course-feature img,
.access-card-course.is-motion-active .access-course-button::before {
  animation-play-state: running;
}

@keyframes courseValueRail {
  0%, 10% { transform: translateX(-45px); opacity: 0; }
  20%, 62% { opacity: .8; }
  72%, 100% { transform: translateX(246px); opacity: 0; }
}
@keyframes courseValueOrbit {
  0%, 100% { transform: scale(.96); opacity: .42; }
  50% { transform: scale(1.05); opacity: .76; }
}
@keyframes courseValueSignal {
  0%, 100% { transform: scale(.78); opacity: .58; }
  50% { transform: scale(1.12); opacity: 1; }
}
@keyframes coursePosterDepth {
  0%, 100% { transform: scale(1.005) translate3d(0, 0, 0); filter: saturate(1) brightness(1); }
  50% { transform: scale(1.026) translate3d(0, -1px, 0); filter: saturate(1.07) brightness(1.035); }
}
@keyframes coursePosterShine {
  0%, 20% { transform: translateX(-38%) skewX(-14deg); opacity: 0; }
  30% { opacity: .65; }
  48%, 100% { transform: translateX(38%) skewX(-14deg); opacity: 0; }
}
@keyframes courseButtonShine {
  0%, 58% { transform: translateX(-110%); opacity: 0; }
  67% { opacity: .55; }
  82%, 100% { transform: translateX(110%); opacity: 0; }
}
.free-route {
  --cyan: #62efff;
  --cyan-soft: #c5fbff;
  --violet: #8177ff;
  padding-top: 96px;
}
.route-heading { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 390px); gap: 64px; align-items: end; }
.route-heading h2 { max-width: 760px; margin-top: 12px; line-height: 1.04; }
.free-route .section-kicker { color: #65eafa; text-shadow: 0 0 22px rgba(98,239,255,.2); }
.route-heading-note { align-self: end; padding-bottom: 8px; }
.route-heading-note > span { width: fit-content; min-height: 31px; display: inline-flex; align-items: center; gap: 8px; padding: 0 11px; border-radius: 10px; color: #c9fbff; background: linear-gradient(110deg, rgba(39,142,162,.22), rgba(105,92,208,.15)); box-shadow: inset 0 0 0 1px rgba(114,232,255,.26), 0 8px 24px rgba(49,197,225,.09); font-size: 10px; font-weight: 900; letter-spacing: .04em; }
.route-heading-note > span i { width: 6px; height: 6px; border-radius: 50%; background: #62efff; box-shadow: 0 0 0 4px rgba(98,239,255,.08), 0 0 14px rgba(98,239,255,.9); animation: routeStatusPulse 2s ease-in-out infinite; }

.study-roadmap { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 12px; margin-top: 34px; padding: 12px; border-radius: 36px; background: radial-gradient(circle at 9% 12%, rgba(98,239,255,.13), transparent 23rem), radial-gradient(circle at 92% 88%, rgba(129,119,255,.1), transparent 28rem), linear-gradient(145deg, #17282f, #0d131d 72%); box-shadow: 0 0 0 1px rgba(119,226,255,.2), inset 0 1px 0 rgba(255,255,255,.065), 0 36px 96px rgba(0,0,0,.46), 0 0 64px rgba(73,207,237,.08); }
.study-roadmap::before { content: ""; width: 360px; height: 360px; position: absolute; z-index: -1; left: -155px; top: -210px; border-radius: 50%; background: rgba(87,230,255,.17); filter: blur(72px); pointer-events: none; animation: roadmapAura 7s ease-in-out infinite; }
.study-roadmap::after { content: ""; position: absolute; z-index: 3; inset: 1px; border-radius: 35px; box-shadow: inset 0 0 0 1px rgba(150,239,255,.08); pointer-events: none; animation: roadmapFrameGlow 5.4s ease-in-out infinite; }
.roadmap-intro { min-width: 0; position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 31px; border-radius: 24px; color: #f2fbff; background: radial-gradient(circle at 88% 8%, rgba(91,230,255,.2), transparent 15rem), radial-gradient(circle at 16% 78%, rgba(121,108,255,.12), transparent 13rem), linear-gradient(150deg, #122a35, #071018 74%); box-shadow: 0 0 0 1px rgba(133,229,247,.16), inset 0 1px 0 rgba(255,255,255,.055), 0 20px 48px rgba(0,0,0,.28), 0 0 32px rgba(61,203,235,.07); }
.roadmap-intro::before { content: ""; width: 80px; position: absolute; z-index: 2; inset: -30px auto -30px -120px; background: linear-gradient(90deg, transparent, rgba(180,247,255,.13), transparent); transform: skewX(-18deg); pointer-events: none; animation: roadmapIntroShine 6.4s cubic-bezier(.2,0,0,1) infinite; }
.roadmap-intro::after { content: ""; width: 160px; height: 160px; position: absolute; right: -96px; bottom: -92px; border: 1px solid rgba(98,239,255,.25); border-radius: 50%; box-shadow: 0 0 0 26px rgba(98,239,255,.026), 0 0 0 56px rgba(129,119,255,.018); pointer-events: none; animation: roadmapRings 5.8s ease-in-out infinite; }
.roadmap-intro-top { display: flex; align-items: center; justify-content: space-between; }
.roadmap-intro-top span { min-height: 30px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 9px; color: #06151b; background: linear-gradient(110deg, #c8fbff, #61e7fa); box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), 0 8px 24px rgba(65,218,243,.2), 0 0 22px rgba(98,239,255,.1); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; font-weight: 950; letter-spacing: .08em; }
.roadmap-intro h3 { margin-top: 44px; font-size: clamp(29px, 2.35vw, 38px); line-height: 1.07; letter-spacing: -.05em; text-wrap: balance; }
.roadmap-intro h3 em { color: transparent; background: linear-gradient(100deg, #62efff, #a4cfff 58%, #9188ff); background-clip: text; -webkit-background-clip: text; font-style: normal; filter: drop-shadow(0 0 16px rgba(98,239,255,.12)); }
.roadmap-phases { position: relative; display: grid; gap: 8px; margin-top: 42px; }
.roadmap-phases::before { content: ""; width: 1px; position: absolute; left: 18px; top: 20px; bottom: 20px; background: linear-gradient(#62efff, rgba(129,119,255,.42), rgba(98,239,255,.06)); box-shadow: 0 0 10px rgba(98,239,255,.32); }
.roadmap-phases li { min-height: 58px; position: relative; display: grid; grid-template-columns: 38px 1fr; gap: 11px; align-items: center; padding: 7px 9px 7px 0; border-radius: 14px; }
.roadmap-phases i { width: 37px; min-height: 37px; z-index: 1; display: inline-flex; align-items: center; justify-content: center; border-radius: 11px; color: #effdff; background: linear-gradient(145deg, #227f92, #344c88); box-shadow: 0 0 0 5px #0c1d25, inset 0 0 0 1px rgba(211,248,255,.2), 0 8px 18px rgba(0,0,0,.2), 0 0 18px rgba(84,222,246,.09); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 8px; font-style: normal; font-weight: 950; letter-spacing: -.02em; transition-property: transform, filter, box-shadow; transition-duration: 180ms; }
.roadmap-phases li:hover i { transform: translateY(-2px) scale(1.04); filter: brightness(1.12); box-shadow: 0 0 0 5px #0c1d25, inset 0 0 0 1px rgba(211,248,255,.28), 0 10px 22px rgba(0,0,0,.24), 0 0 22px rgba(98,239,255,.22); }
.roadmap-phases span { min-width: 0; display: grid; gap: 4px; }
.roadmap-phases b { color: #dcecf2; font-size: 11px; line-height: 1.35; }
.roadmap-visual { min-height: 142px; position: relative; z-index: 1; overflow: hidden; margin-top: auto; border-radius: 19px; background: radial-gradient(circle at 70% 36%, rgba(93,205,225,.12), transparent 6rem), linear-gradient(145deg, rgba(62,112,120,.1), rgba(5,18,21,.04)); box-shadow: inset 0 0 0 1px rgba(148,205,205,.08); }
.roadmap-visual::before { content: ""; position: absolute; inset: 0; opacity: .18; background-image: radial-gradient(rgba(126,219,229,.8) .65px, transparent .65px); background-size: 11px 11px; mask-image: linear-gradient(110deg, transparent, #000 30%, #000 72%, transparent); }
.roadmap-visual-flow { width: 100%; height: 100%; position: absolute; inset: 0; overflow: visible; }
.roadmap-visual-flow path { stroke: #62cfdf; stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 6 9; opacity: .55; filter: drop-shadow(0 0 5px rgba(84,213,232,.55)); animation: roadmapFlowDash 4.8s linear infinite; }
.roadmap-visual-flow circle { fill: #9ceaf2; stroke: rgba(126,220,232,.18); stroke-width: 7; transform-box: fill-box; transform-origin: center; filter: drop-shadow(0 0 7px rgba(94,221,238,.85)); animation: roadmapNodePulse 2.4s ease-in-out infinite; }
.roadmap-visual-flow circle:nth-of-type(2) { animation-delay: -.6s; }
.roadmap-visual-flow circle:nth-of-type(3) { animation-delay: -1.2s; }
.roadmap-visual-flow circle:nth-of-type(4) { animation-delay: -1.8s; }
.roadmap-visual-orbit { width: 76px; height: 76px; position: absolute; left: 17px; bottom: 7px; border: 1px solid rgba(97,202,216,.24); border-radius: 50%; box-shadow: 0 0 28px rgba(70,188,211,.08); animation: roadmapOrbitSpin 12s linear infinite; }
.roadmap-visual-orbit::before { content: ""; position: absolute; inset: 12px; border: 1px dashed rgba(125,210,222,.17); border-radius: inherit; }
.roadmap-visual-orbit i { width: 6px; height: 6px; position: absolute; border-radius: 50%; background: #7fe3ef; box-shadow: 0 0 10px rgba(110,226,240,.85); }
.roadmap-visual-orbit i:nth-child(1) { left: 8px; top: 9px; }
.roadmap-visual-orbit i:nth-child(2) { right: -2px; top: 34px; }
.roadmap-visual-orbit i:nth-child(3) { left: 27px; bottom: -2px; }
.roadmap-visual-card { width: 92px; height: 62px; position: absolute; right: 21px; bottom: 18px; display: flex; align-items: flex-end; gap: 7px; padding: 13px 13px 11px; border-radius: 14px; background: linear-gradient(145deg, rgba(44,111,124,.74), rgba(16,53,62,.78)); box-shadow: 0 0 0 1px rgba(171,227,231,.15), inset 0 1px 0 rgba(255,255,255,.1), 0 14px 26px rgba(0,0,0,.22), 0 0 24px rgba(63,181,207,.1); backdrop-filter: blur(7px); animation: roadmapCardFloat 4.2s ease-in-out infinite; }
.roadmap-visual-card span { width: 11px; height: var(--bar-height); display: block; border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, #99ebf3, #3a9cae); box-shadow: 0 0 9px rgba(85,213,229,.22); transform-origin: bottom; animation: roadmapBarBreathe 3s ease-in-out infinite; }
.roadmap-visual-card span:nth-child(2) { animation-delay: -.6s; }
.roadmap-visual-card span:nth-child(3) { animation-delay: -1.2s; }
.roadmap-visual-card span:nth-child(4) { animation-delay: -1.8s; }
@keyframes roadmapFlowDash { to { stroke-dashoffset: -30; } }
@keyframes roadmapNodePulse { 50% { opacity: .48; transform: scale(.62); } }
@keyframes roadmapOrbitSpin { to { transform: rotate(360deg); } }
@keyframes roadmapCardFloat { 50% { transform: translateY(-7px) rotate(-1deg); } }
@keyframes roadmapBarBreathe { 50% { transform: scaleY(.72); filter: brightness(1.24); } }

.roadmap-content { min-width: 0; position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; padding: 12px 20px 14px; border-radius: 24px; color: #172425; background: radial-gradient(circle at 12% -8%, rgba(118,235,245,.4), transparent 25rem), radial-gradient(circle at 92% 6%, rgba(171,164,255,.18), transparent 24rem), radial-gradient(circle at 96% 12%, rgba(255,255,255,.74), transparent 22rem), linear-gradient(145deg, #f4f8f6 0%, #e7f1f1 58%, #d9e6e8 100%); box-shadow: 0 0 0 1px rgba(215,248,252,.72), inset 0 1px 0 rgba(255,255,255,.92), 0 20px 46px rgba(0,0,0,.2), 0 0 48px rgba(81,211,237,.15); }
.roadmap-content::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; opacity: .28; background-image: radial-gradient(rgba(37,131,158,.38) .6px, transparent .6px); background-size: 13px 13px; mask-image: linear-gradient(115deg, #000, transparent 42%); }
.roadmap-content::after { content: ""; width: 110px; position: absolute; z-index: -1; inset: -20% auto -20% -180px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent); transform: skewX(-15deg); pointer-events: none; animation: roadmapPanelShine 7.2s cubic-bezier(.2,0,0,1) infinite; }
.roadmap-list { flex: 1 1 auto; display: grid; grid-template-rows: repeat(6, minmax(66px, 1fr)); }
.roadmap-item { min-width: 0; position: relative; display: grid; grid-template-columns: 58px minmax(180px, 1fr) minmax(320px, 390px); gap: 19px; align-items: center; padding: 12px 17px; border-top: 1px solid rgba(24,46,44,.14); border-radius: 20px; transition-property: transform, background-color, box-shadow; transition-duration: 180ms; transition-timing-function: cubic-bezier(.2,0,0,1); }
.roadmap-item:hover { z-index: 1; transform: translateY(-2px); background: rgba(255,255,255,.72); box-shadow: 0 0 0 1px rgba(37,151,178,.13), 0 14px 34px rgba(24,87,104,.13), 0 0 28px rgba(99,225,248,.09); }
.roadmap-item:nth-child(4n + 2) { background: linear-gradient(108deg, rgba(184,240,246,.7), rgba(240,245,250,.4)); box-shadow: inset 0 1px 0 rgba(255,255,255,.58); }
.roadmap-item:nth-child(4n) { background: linear-gradient(108deg, rgba(201,224,246,.66), rgba(232,231,252,.38)); box-shadow: inset 0 1px 0 rgba(255,255,255,.5); }
.roadmap-step { display: grid; gap: 2px; }
.roadmap-step strong { color: #197f91; font-family: Impact, Haettenschweiler, sans-serif; font-size: 35px; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.03em; text-shadow: 0 0 18px rgba(47,190,216,.12); }
.roadmap-copy { min-width: 0; display: flex; align-items: center; gap: 11px; }
.roadmap-labels { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.roadmap-labels span { min-width: 45px; min-height: 21px; display: inline-flex; align-items: center; justify-content: center; padding: 0 7px; border-radius: 7px; font-size: 7px; font-weight: 900; letter-spacing: .06em; white-space: nowrap; }
.roadmap-labels span { color: #f1fcff; background: linear-gradient(115deg, #2a7782, #3d4f86); box-shadow: inset 0 0 0 1px rgba(255,255,255,.11), 0 5px 12px rgba(37,103,127,.12); }
.roadmap-copy h3 { min-width: 0; margin: 0; color: #122024; font-size: 20px; line-height: 1.18; letter-spacing: -.035em; text-wrap: balance; }
.resource-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.resource-actions-single { grid-template-columns: 1fr; }
.resource-actions a { min-width: 0; min-height: 43px; position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 13px 0 15px; border-radius: 12px; font-size: 10px; font-weight: 900; transition-property: scale, filter, background-color, color, box-shadow, transform; transition-duration: 150ms; transition-timing-function: cubic-bezier(.2,0,0,1); }
.resource-actions a::before { content: ""; width: 42px; position: absolute; z-index: -1; inset: -16px auto -16px -70px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent); transform: skewX(-18deg); transition-property: transform; transition-duration: 420ms; transition-timing-function: cubic-bezier(.2,0,0,1); pointer-events: none; }
.resource-actions a:hover::before { transform: translateX(260px) skewX(-18deg); }
.resource-actions a span { flex: 0 0 auto; font-size: 13px; transform: translateX(-1px); transition-property: transform; transition-duration: 150ms; }
.resource-actions a:hover span { transform: translateX(2px); }
.resource-actions a:active { scale: .96; }
.resource-actions a:focus-visible { outline: 2px solid #2d817d; outline-offset: 3px; }
.resource-primary { color: #f4fdff; background: linear-gradient(120deg, #17899a, #205b82); box-shadow: 0 0 0 1px rgba(154,230,242,.2), inset 0 1px 0 rgba(255,255,255,.15), 0 8px 22px rgba(16,95,119,.22); }
.resource-primary:hover { filter: brightness(1.1) saturate(1.06); box-shadow: 0 0 0 1px rgba(177,240,249,.3), inset 0 1px 0 rgba(255,255,255,.18), 0 11px 27px rgba(13,84,111,.28), 0 0 24px rgba(79,220,244,.12); }
.resource-download { color: #f2f2fb; background: linear-gradient(120deg, #3d4a5b, #3a3558); box-shadow: 0 0 0 1px rgba(39,43,69,.2), inset 0 1px 0 rgba(255,255,255,.09), 0 7px 18px rgba(25,27,48,.18); }
.resource-download:hover { color: #fff; background: linear-gradient(120deg, #4a5a6d, #4b426f); box-shadow: 0 0 0 1px rgba(70,70,112,.24), inset 0 1px 0 rgba(255,255,255,.12), 0 9px 23px rgba(25,27,49,.23), 0 0 20px rgba(129,119,255,.1); }
.bonus-link { color: #effaff; background: linear-gradient(120deg, #305b6b, #393d67); box-shadow: 0 0 0 1px rgba(40,79,104,.22), inset 0 1px 0 rgba(255,255,255,.1), 0 7px 18px rgba(25,42,61,.18); }
.bonus-link:hover { color: #fff; background: linear-gradient(120deg, #367083, #48477a); }
.route-version { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 14px; align-items: start; margin-top: 18px; padding: 16px 10px 4px; border-top: 1px solid rgba(23,78,73,.14); color: #50635f; }
.route-version > h3 { color: #203534; font-size: 10px; line-height: 1.7; font-weight: 950; letter-spacing: .02em; }
.route-version > p { font-size: 9px; line-height: 1.7; text-wrap: pretty; }
.route-version > p b { color: #354547; }

.study-roadmap.visible .roadmap-item { animation: roadmapItemEnter 520ms cubic-bezier(.2,0,0,1) backwards; }
.study-roadmap.visible .roadmap-item:nth-child(1) { animation-delay: 80ms; }
.study-roadmap.visible .roadmap-item:nth-child(2) { animation-delay: 140ms; }
.study-roadmap.visible .roadmap-item:nth-child(3) { animation-delay: 200ms; }
.study-roadmap.visible .roadmap-item:nth-child(4) { animation-delay: 260ms; }
.study-roadmap.visible .roadmap-item:nth-child(5) { animation-delay: 320ms; }
.study-roadmap.visible .roadmap-item:nth-child(6) { animation-delay: 380ms; }
@keyframes routeStatusPulse { 50% { opacity: .58; transform: scale(.72); box-shadow: 0 0 0 7px rgba(98,239,255,0), 0 0 18px rgba(98,239,255,1); } }
@keyframes roadmapAura { 50% { opacity: .58; transform: translate3d(35px, 20px, 0) scale(1.08); } }
@keyframes roadmapFrameGlow { 50% { box-shadow: inset 0 0 0 1px rgba(158,240,255,.17), inset 0 0 34px rgba(94,224,249,.035); } }
@keyframes roadmapIntroShine { 0%, 58% { transform: translateX(0) skewX(-18deg); opacity: 0; } 68% { opacity: 1; } 84%, 100% { transform: translateX(470px) skewX(-18deg); opacity: 0; } }
@keyframes roadmapRings { 50% { transform: scale(1.06); opacity: .72; } }
@keyframes roadmapPanelShine { 0%, 55% { transform: translateX(0) skewX(-15deg); opacity: 0; } 66% { opacity: .76; } 86%, 100% { transform: translateX(1250px) skewX(-15deg); opacity: 0; } }
@keyframes roadmapItemEnter { from { opacity: 0; transform: translateX(18px); filter: blur(4px); } to { opacity: 1; transform: translateX(0); filter: blur(0); } }

@media (max-width: 1050px) {
  .route-heading { grid-template-columns: 1fr; gap: 20px; }
  .route-heading-note { max-width: 560px; padding-bottom: 0; }
  .study-roadmap { grid-template-columns: 250px minmax(0, 1fr); }
  .roadmap-intro { padding: 24px; }
  .roadmap-item { grid-template-columns: 53px minmax(170px, 1fr) minmax(280px, 320px); gap: 14px; padding-inline: 13px; }
  .resource-actions a { padding-inline: 12px 10px; font-size: 9px; }
}

@media (max-width: 820px) {
  .study-roadmap { grid-template-columns: 1fr; }
  .roadmap-intro { min-height: 340px; }
  .roadmap-intro h3 { margin-top: 30px; }
  .roadmap-phases { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 25px; }
  .roadmap-phases::before { display: none; }
  .roadmap-phases li { grid-template-columns: 38px 1fr; padding-right: 0; }
  .roadmap-visual { min-height: 126px; margin-top: 22px; }
}

@media (max-width: 620px) {
  .free-route { width: calc(100% - 24px); padding-top: 66px; }
  .route-heading h2 { font-size: var(--free-section-title-size); }
  .study-roadmap { gap: 8px; margin-top: 28px; padding: 8px; border-radius: 28px; }
  .roadmap-intro { min-height: 0; padding: 23px; border-radius: 20px; }
  .roadmap-intro h3 { margin-top: 30px; font-size: 31px; }
  .roadmap-phases { grid-template-columns: 1fr; gap: 2px; }
  .roadmap-phases li { min-height: 49px; }
  .roadmap-content { padding: 13px 11px 12px; border-radius: 20px; }
  .roadmap-item { grid-template-columns: 49px minmax(0, 1fr); gap: 12px; padding: 14px 9px; border-radius: 16px; }
  .roadmap-step strong { font-size: 31px; }
  .roadmap-copy h3 { font-size: 20px; }
  .roadmap-item .resource-actions { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-left: 61px; }
  .roadmap-item .resource-actions-single { grid-template-columns: 1fr; }
  .resource-actions a { min-height: 44px; }
  .route-version { grid-template-columns: 1fr; gap: 4px; padding: 14px 9px 2px; }
}
.free-next-section { padding: 112px 0 80px; }
.free-next-heading { width: min(1240px, calc(100% - 48px)); display: flex; align-items: center; justify-content: space-between; gap: 28px; margin: 0 auto 30px; }
.free-next-heading h2 { margin: 0; }
.free-next-tag { min-height: 34px; display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; padding: 0 13px; border-radius: 999px; color: #fff3df; background: rgba(255,104,12,.16); box-shadow: inset 0 0 0 1px rgba(255,142,72,.3), 0 10px 28px rgba(255,76,0,.14); font-size: 11px; font-weight: 950; letter-spacing: .08em; }
.free-next-tag i { width: 7px; height: 7px; border-radius: 50%; background: #ff760d; box-shadow: 0 0 0 5px rgba(255,118,13,.12), 0 0 16px rgba(255,118,13,.86); }
.free-course-bridge { width: min(1240px, calc(100% - 48px)); min-height: 730px; position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: 1.04fr .86fr; gap: 54px; align-items: center; margin: 0 auto; padding: 68px; border-radius: 52px; background: radial-gradient(circle at 88% 18%, rgba(255,148,20,.18), transparent 24rem), radial-gradient(circle at 8% 88%, rgba(83,226,255,.055), transparent 24rem), linear-gradient(135deg, #16171b, #080b10); box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 35px 100px rgba(0,0,0,.3); }
.bridge-noise { position: absolute; inset: 0; z-index: -1; opacity: .15; background-image: radial-gradient(rgba(255,255,255,.28) .65px, transparent .65px); background-size: 8px 8px; mask-image: linear-gradient(90deg, transparent, black); }
.hot-pill { width: fit-content; display: flex; align-items: center; gap: 8px; margin-bottom: 25px; padding: 8px 11px; border-radius: 999px; color: #ffe0ae; background: rgba(255,104,12,.12); box-shadow: inset 0 0 0 1px rgba(255,135,58,.25); font-size: 11px; font-weight: 900; }
.hot-pill i { background: #ff760d; box-shadow: 0 0 13px #ff760d; }
.bridge-copy h2 { max-width: 650px; margin-top: 15px; color: #fff; font-size: clamp(40px, 3.15vw, 46px); line-height: 1.08; letter-spacing: -.055em; font-weight: 950; text-wrap: balance; }
.bridge-copy h2 em { color: #ffaf31; font-style: normal; }
.bridge-copy > p:not(.section-kicker) { max-width: 650px; margin-top: 21px; color: #b4b0aa; font-size: 14px; line-height: 1.85; text-wrap: pretty; }
.bridge-value-list { max-width: 650px; display: grid; gap: 9px; margin-top: 23px; }
.bridge-value-list span { min-height: 49px; display: grid; grid-template-columns: 39px 1fr; gap: 12px; align-items: center; padding: 8px 15px 8px 9px; border-radius: 15px; color: #e6e1da; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), 0 8px 24px rgba(0,0,0,.08); }
.bridge-value-list i { width: 31px; height: 31px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; color: #311806; background: linear-gradient(135deg, #ffe071, #ff8a1d); font-family: monospace; font-size: 9px; font-style: normal; font-weight: 900; box-shadow: 0 7px 18px rgba(255,110,13,.16); }
.bridge-value-list b { font-size: 12px; line-height: 1.55; font-weight: 780; text-wrap: pretty; }
.bridge-actions { position: relative; display: flex; justify-content: center; align-items: center; margin-top: 28px; }
.bridge-actions button { border: 0; cursor: pointer; }
.bridge-actions .bridge-cta { min-width: 286px; min-height: 59px; position: relative; isolation: isolate; overflow: hidden; padding-inline: 34px; border-radius: 19px; color: #2b1603; background: linear-gradient(110deg, #fff09a 0%, #ffc83d 37%, #ff911c 72%, #ff6f0a 100%); box-shadow: 0 0 0 1px rgba(255,246,189,.52), 0 14px 42px rgba(255,114,8,.34), 0 0 40px rgba(255,191,50,.14), inset 0 1px 0 rgba(255,255,255,.62); font-size: 16px; letter-spacing: .015em; transition-property: scale, filter, box-shadow; transition-duration: 160ms; transition-timing-function: cubic-bezier(.2,0,0,1); }
.bridge-cta span { position: relative; z-index: 2; }
.bridge-cta::before { content: ""; width: 72px; position: absolute; z-index: 1; inset: -28px auto -28px -92px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.8), transparent); transform: skewX(-18deg); animation: bridgeCtaShine 3.2s ease-in-out infinite; pointer-events: none; }
.bridge-cta::after { content: ""; width: 8px; height: 8px; position: absolute; z-index: 3; right: 19px; top: 13px; border-radius: 50%; background: #fffde7; box-shadow: 0 0 0 3px rgba(255,248,182,.3), 0 0 17px 6px rgba(255,235,112,.88); animation: bridgeCtaSpark 1.8s ease-in-out infinite; pointer-events: none; }
.bridge-cta:hover { filter: brightness(1.08) saturate(1.08); box-shadow: 0 0 0 1px rgba(255,250,208,.72), 0 18px 54px rgba(255,111,6,.46), 0 0 58px rgba(255,200,64,.23), inset 0 1px 0 rgba(255,255,255,.7); }
.bridge-cta:focus-visible { outline: 3px solid #ffe783; outline-offset: 4px; }
@keyframes bridgeCtaShine { 0%, 58% { left: -92px; opacity: 0; } 64% { opacity: 1; } 82%, 100% { left: calc(100% + 28px); opacity: 0; } }
@keyframes bridgeCtaSpark { 0%, 100% { opacity: .36; scale: .62; } 45% { opacity: 1; scale: 1; } }
.bridge-proof-card { min-width: 0; position: relative; overflow: hidden; margin: 0; padding: 20px; border-radius: 34px; color: #2c1b0c; background: radial-gradient(circle at 16% 12%, rgba(255,241,187,.38), transparent 10rem), linear-gradient(145deg, #c98745, #8b4f27 58%, #60351f); box-shadow: 0 0 0 1px rgba(255,237,191,.25), 0 30px 80px rgba(0,0,0,.4), 0 18px 48px rgba(255,112,10,.12), inset 0 1px 0 rgba(255,255,255,.18); }
.bridge-proof-card::before { content: ""; position: absolute; inset: 0; opacity: .24; pointer-events: none; background-image: radial-gradient(rgba(69,34,13,.7) .7px, transparent .8px), radial-gradient(rgba(255,232,181,.36) .7px, transparent .8px); background-position: 0 0, 4px 5px; background-size: 9px 9px, 11px 11px; mix-blend-mode: multiply; }
.bridge-proof-top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 18px; color: #fff6df; }
.bridge-proof-top span { display: flex; align-items: center; gap: 7px; font-family: monospace; font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.bridge-proof-top span i { width: 7px; height: 7px; border-radius: 50%; background: #ffd256; box-shadow: 0 0 0 4px rgba(255,210,86,.14), 0 0 15px rgba(255,215,102,.6); }
.bridge-proof-top small { color: #f7ddb7; font-size: 10px; font-weight: 850; }
.bridge-proof-note { position: relative; z-index: 1; margin: 0; padding: 48px 27px 24px; border-radius: 4px 6px 8px 5px; color: #43301f; background: repeating-linear-gradient(180deg, transparent 0 27px, rgba(112,86,55,.095) 28px, transparent 29px), linear-gradient(145deg, #fffdf3, #fff3ce); box-shadow: 0 0 0 1px rgba(83,48,19,.08), 0 17px 34px rgba(52,25,8,.28), inset 0 1px rgba(255,255,255,.92); transform: rotate(.35deg); }
.bridge-proof-note::after { content: ""; position: absolute; right: 10px; bottom: 9px; width: 37px; height: 12px; border-radius: 50%; background: rgba(132,83,27,.1); filter: blur(8px); transform: rotate(-18deg); pointer-events: none; }
.bridge-proof-note p { position: relative; z-index: 1; margin: 0; font-family: "Kaiti SC", "STKaiti", "KaiTi", serif; font-size: 13.5px; font-weight: 700; line-height: 1.78; letter-spacing: .012em; text-align: justify; text-wrap: pretty; }
.bridge-proof-note p + p { margin-top: 10px; }
.bridge-proof-note footer { position: relative; z-index: 1; margin-top: 13px; color: #886f55; font-size: 9px; font-weight: 800; text-align: right; letter-spacing: .04em; }
.note-pin { width: 22px; height: 22px; position: absolute; z-index: 2; top: 13px; border-radius: 50%; background: radial-gradient(circle at 36% 28%, #fff9c2 0 8%, #ffd44e 11% 31%, #e98413 54%, #813307 100%); box-shadow: 0 2px 0 #6a2906, 0 7px 8px rgba(65,31,9,.34), 0 0 0 1px rgba(103,47,5,.22); transform: rotate(-5deg); }
.note-pin::after { content: ""; width: 7px; height: 9px; position: absolute; left: 8px; top: 18px; z-index: -1; border-radius: 0 0 5px 5px; background: linear-gradient(90deg, #6f6a60, #ddd8c7 48%, #716c63); box-shadow: 0 3px 4px rgba(66,39,17,.23); }
.note-pin-left { left: 21%; }
.note-pin-right { right: 20%; transform: rotate(6deg); }
.bridge-proof-card figcaption { position: relative; z-index: 1; padding: 16px 3px 2px; }
.bridge-result-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 13px; }
.bridge-result-stats span { min-width: 0; min-height: 57px; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 7px; border-radius: 13px; color: #efd9bc; background: rgba(57,27,9,.36); box-shadow: inset 0 0 0 1px rgba(255,239,201,.13), 0 7px 18px rgba(42,19,5,.12); font-size: 8px; line-height: 1.25; text-align: center; }
.bridge-result-stats b { color: #fff5de; font-size: 14px; line-height: 1; font-weight: 950; font-variant-numeric: tabular-nums; }

.hero {
  --hero-height-floor: 940px;
  min-height: 940px;
  min-height: max(940px, calc(100svh - 50px));
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  padding: 124px max(6vw, calc((100vw - 1240px)/2)) 245px;
  background:
    radial-gradient(circle at 19% 46%, rgba(255,111,0,.17), transparent 32rem),
    radial-gradient(circle at 74% 32%, rgba(255,172,15,.07), transparent 26rem),
    #030303;
}
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: -1;
  height: 230px;
  background: linear-gradient(180deg, transparent, rgba(255,91,0,.15) 42%, #1a0803 70%, #050505 100%);
}
.hero-visual {
  position: absolute;
  z-index: -2;
  inset: 0;
  overflow: hidden;
}
.hero-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.06) 0%, rgba(0,0,0,.05) 38%, rgba(0,0,0,.58) 58%, rgba(0,0,0,.94) 86%),
    linear-gradient(180deg, rgba(0,0,0,.16), transparent 64%, #050505 100%);
}
.hero-visual img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; outline: none; filter: saturate(1.08) contrast(1.04); image-rendering: auto; transition-property: transform; transition-duration: 220ms; transition-timing-function: ease-out; }
.road-route { position: absolute; inset: 0; z-index: 1; }
.road-stop {
  position: absolute;
  z-index: var(--sequence);
  left: var(--x);
  top: var(--y);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(255,232,174,.92);
  background: radial-gradient(circle, #fff8d9 0 16%, #ff9b22 18% 31%, rgba(255,126,0,.2) 34% 56%, transparent 58%);
  box-shadow: 0 0 12px rgba(255,142,28,.95), 0 0 30px rgba(255,103,0,.55);
  animation: routeNodePulse 4.9s ease-in-out infinite;
  animation-delay: calc((var(--sequence) - 1) * .38s);
}
.road-stop::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 7px;
  width: 2px;
  height: var(--stem);
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(255,249,221,.98), rgba(255,166,46,.9) 18%, rgba(255,116,0,.2) 82%, rgba(255,116,0,0));
  box-shadow: 0 0 8px rgba(255,144,34,.9);
  transform: translateX(-50%) rotate(var(--stem-tilt, 0deg));
  transform-origin: bottom center;
}
.road-sign {
  position: absolute;
  left: 50%;
  bottom: calc(var(--stem) + 7px);
  display: inline-flex;
  align-items: center;
  width: max-content;
  height: 38px;
  padding: 0 14px;
  border-radius: 8px;
  background: linear-gradient(120deg, rgba(255,177,19,.94), rgba(255,75,0,.88));
  box-shadow: 0 0 22px rgba(255,116,0,.52), inset 0 0 0 1px rgba(255,255,255,.48);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  transform: translateX(calc(-50% + var(--label-x, 0px))) rotate(var(--tilt));
  animation: signFloat 4s ease-in-out infinite;
  animation-delay: calc((var(--sequence) - 1) * .16s - 2s);
}
.stop-1 { --sequence: 1; --x: 13.6%; --y: 80.7%; --stem: 72px; --label-x: 0px; --tilt: 3deg; }
.stop-2 { --sequence: 2; --x: 30.2%; --y: 77.7%; --stem: 86px; --label-x: 0px; --tilt: -2deg; }
.stop-3 { --sequence: 3; --x: 10.9%; --y: 69.7%; --stem: 82px; --label-x: 0px; --tilt: -3deg; }
.stop-4 { --sequence: 4; --x: 33.1%; --y: 65.2%; --stem: 92px; --label-x: 0px; --tilt: 2deg; }
.stop-5 { --sequence: 5; --x: 19.1%; --y: 55.8%; --stem: 105px; --label-x: 0px; --tilt: -2deg; }
.stop-6 { --sequence: 6; --x: 29.2%; --y: 50.5%; --stem: 118px; --label-x: 0px; --tilt: 2deg; }
.stop-finish { --sequence: 7; --x: 25.5%; --y: 43.8%; --stem: 125px; --label-x: -18px; --tilt: -2deg; }
.road-sign-finish {
  height: 42px;
  padding-inline: 17px;
  color: #351a00;
  background: linear-gradient(120deg, #fff0a3 0%, #ffc43d 52%, #f59a0b 100%);
  box-shadow:
    0 0 20px rgba(255,195,61,.7),
    0 0 42px rgba(255,132,13,.42),
    inset 0 0 0 1px rgba(255,255,255,.78);
}
@keyframes signFloat { 0%,100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes routeNodePulse { 0%,55%,100% { filter: brightness(.82); scale: .9; } 12% { filter: brightness(1.45); scale: 1.18; } }

@media (max-width: 1450px) and (min-width: 761px) {
  .stop-1 { --x: 2.4%; --y: 80.2%; --stem: 72px; --label-x: 56px; --stem-tilt: 5deg; }
  .stop-2 { --x: 24.4%; --y: 76.9%; --stem: 84px; --label-x: 4px; }
  .stop-3 { --x: .9%; --y: 71.4%; --stem: 92px; --label-x: 57px; --stem-tilt: 5deg; }
  .stop-4 { --x: 28.2%; --y: 66.4%; --stem: 102px; --label-x: 7px; }
  .stop-5 { --x: 10.7%; --y: 68.8%; --stem: 205px; --label-x: 10px; }
  .stop-6 { --x: 23.7%; --y: 63.1%; --stem: 225px; --label-x: 13px; }
  .stop-finish { --x: 19.1%; --y: 52.6%; --stem: 190px; --label-x: -21px; }
}

.hero-copy { width: min(610px, 51%); margin-left: auto; position: relative; z-index: 2; }
.eyebrow, .section-kicker {
  color: var(--amber);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.eyebrow { display: flex; align-items: center; gap: 10px; }
.eyebrow span { width: 36px; height: 2px; background: linear-gradient(90deg, var(--orange), var(--amber)); box-shadow: 0 0 12px rgba(255,112,0,.7); }
.hero h1 {
  margin-top: 22px;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", "PingFang SC", sans-serif;
  font-size: clamp(72px, 7.1vw, 122px);
  line-height: .86;
  letter-spacing: -.055em;
  font-style: italic;
  text-transform: uppercase;
  text-shadow: 0 10px 40px rgba(0,0,0,.55);
  text-wrap: balance;
}
.hero-title-lockup {
  width: min(720px, 100%);
  height: auto;
  position: relative;
  margin: 8px 0 -20px;
  isolation: isolate;
  font: inherit;
  line-height: 0;
}
.hero-title-lockup::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 20% 4% 16% 2%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,111,0,.19), rgba(255,72,0,.07) 44%, transparent 72%);
  filter: blur(24px);
}
.hero-title-lockup img {
  width: 100%;
  height: auto;
  display: block;
  outline: none;
  filter: drop-shadow(0 12px 30px rgba(255,82,0,.12));
}
.hero-mobile-visual { display: none; }
.hero-small { display: block; font-size: .5em; letter-spacing: -.02em; color: #fff; margin-bottom: 8px; }
.hero-accent {
  display: inline-block;
  /* Impact's italic Chinese fallback overhangs its line box on the right and
     bottom. Extend the gradient canvas so those strokes stay fully painted. */
  padding: 0 .24em .2em 0;
  margin: 0 -.24em -.2em 0;
  color: transparent;
  background: linear-gradient(180deg, #ffc312 0%, #ff6405 70%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-stroke: 1px rgba(255,142,17,.18);
  filter: drop-shadow(0 8px 26px rgba(255,91,0,.16));
}
.hero-slogan { margin-top: 30px; color: #fff; font-size: clamp(19px, 1.8vw, 27px); font-weight: 900; text-wrap: balance; }
.hero-chips { display: flex; gap: 9px; }
.hero-chips span { padding: 8px 12px; border-radius: 999px; color: #fff0d5; background: rgba(255,102,8,.13); box-shadow: 0 0 0 1px rgba(255,123,31,.3); font-size: 11px; font-weight: 900; }
.hero-description {
  width: fit-content;
  max-width: 670px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 46px;
  padding: 12px 17px 12px 12px;
  border-radius: 16px;
  color: #e4ded6;
  background: linear-gradient(110deg, rgba(255,143,20,.16), rgba(255,255,255,.035) 58%, rgba(255,101,8,.07));
  box-shadow: inset 0 0 0 1px rgba(255,165,52,.18), 0 14px 34px rgba(0,0,0,.24);
  backdrop-filter: blur(10px) saturate(115%);
  font-size: 14px;
  line-height: 1.7;
  text-wrap: pretty;
}
.hero-description-label {
  min-height: 32px;
  flex: none;
  display: inline-flex;
  align-items: center;
  padding: 0 11px;
  border-radius: 10px;
  color: #2a1604;
  background: linear-gradient(120deg, #ffd43a, #ff7908);
  box-shadow: 0 7px 20px rgba(255,101,8,.24), inset 0 0 0 1px rgba(255,255,255,.38);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  white-space: nowrap;
}
.button-ghost { color: #d6d0c8; background: rgba(255,255,255,.035); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.button-ghost:hover { color: #fff; background: rgba(255,255,255,.07); }
.button {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 0 23px 0 25px;
  border-radius: 16px;
  font-size: 15px;
  font-weight: 900;
  transition-property: scale, filter, box-shadow, background-color;
  transition-duration: 150ms;
}
.button-primary {
  color: #1b1108;
  background: linear-gradient(110deg, #ffd338, var(--orange));
  box-shadow: 0 12px 35px rgba(255,92,0,.32), inset 0 0 0 1px rgba(255,255,255,.34);
}
.button-primary:hover { filter: brightness(1.1); box-shadow: 0 16px 48px rgba(255,92,0,.42), inset 0 0 0 1px rgba(255,255,255,.42); }
.button:active { scale: .96; }
.hero-support {
  width: 100%;
  position: static;
  margin-top: 44px;
}
.hero-support .hero-chips { margin-bottom: 14px; }
.countdown {
  width: 100%;
  position: relative;
  display: grid;
  grid-template-columns: 1.14fr 1.6fr;
  gap: 10px;
  padding: 9px;
  border-radius: 21px;
  color: #ddd8d1;
  background:
    radial-gradient(circle at 15% 15%, rgba(255,196,61,.18), transparent 35%),
    linear-gradient(115deg, rgba(76,31,4,.96), rgba(22,12,7,.94) 55%, rgba(44,19,4,.96));
  box-shadow:
    0 0 0 1px rgba(255,177,46,.46),
    0 0 0 4px rgba(255,112,8,.07),
    0 20px 52px rgba(0,0,0,.38),
    0 10px 34px rgba(255,91,0,.13),
    inset 0 1px 0 rgba(255,229,164,.13);
  backdrop-filter: blur(14px) saturate(130%);
}
.countdown-head {
  min-height: 76px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  padding: 12px 16px;
  border-radius: 12px;
  background: linear-gradient(125deg, #ffc43d 0%, #ff9f18 42%, #ff6810 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.56), inset 0 -1px 0 rgba(90,31,0,.2), 0 10px 26px rgba(255,91,0,.18);
}
.countdown-kicker { display: flex; align-items: center; gap: 8px; color: rgba(63,25,2,.72); font-size: 10px; font-weight: 950; letter-spacing: .13em; }
.countdown-kicker i { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: #fff8e7; box-shadow: 0 0 0 4px rgba(255,248,231,.22), 0 0 14px rgba(255,255,255,.72); animation: countdownPulse 1.8s ease-in-out infinite; }
.countdown-label { color: #321501; font-size: 14px; line-height: 1.35; font-weight: 950; letter-spacing: .01em; }
.countdown-units { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.countdown-unit {
  min-width: 0;
  min-height: 76px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding-top: 12px;
  border-radius: 12px;
  background: linear-gradient(180deg, #2c231d 0 50%, #17120f 50% 100%);
  box-shadow: 0 0 0 1px rgba(255,185,66,.28), 0 10px 24px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.09);
}
.countdown-unit::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 13px;
  background:
    radial-gradient(circle at 13px 0, #5b2d09 0 2px, transparent 2.5px),
    radial-gradient(circle at calc(100% - 13px) 0, #5b2d09 0 2px, transparent 2.5px),
    linear-gradient(180deg, #ffd168, #e89116);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.62), 0 1px 0 rgba(0,0,0,.52);
}
.countdown-unit::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 5px;
  right: 5px;
  top: 48%;
  height: 1px;
  background: rgba(0,0,0,.72);
  box-shadow: 0 1px 0 rgba(255,255,255,.07), 0 -7px 18px rgba(0,0,0,.14);
}
.countdown b { position: relative; z-index: 1; display: block; color: #fff9ed; font-size: 25px; line-height: 1; letter-spacing: -.035em; font-weight: 950; text-shadow: 0 2px 12px rgba(255,177,46,.16); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.countdown-unit small { position: relative; z-index: 1; color: #e4b85f; font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.countdown-unit.is-flipping b { animation: calendarFlip .42s cubic-bezier(.2,0,0,1); }
@keyframes countdownPulse { 50% { opacity: .5; transform: scale(.76); } }
@keyframes calendarFlip {
  0% { opacity: 1; transform: perspective(120px) rotateX(0deg); }
  46% { opacity: .42; transform: perspective(120px) rotateX(-82deg); }
  54% { opacity: .42; transform: perspective(120px) rotateX(82deg); }
  100% { opacity: 1; transform: perspective(120px) rotateX(0deg); }
}
@media (max-height: 900px) and (min-width: 761px) {
  .hero > .hero-proof { bottom: 22px; }
}
.hero-proof {
  position: absolute;
  z-index: 2;
  left: 50%;
  /* Keep the proof panel fully visible when browser chrome shortens the
     usable desktop viewport; tall screens retain the original 22px inset. */
  bottom: max(22px, calc(var(--hero-height-floor) - 100svh + 24px));
  width: min(1160px, calc(100% - 40px));
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 11px 16px;
  border-radius: 23px;
  background: rgba(20,21,22,.74);
  box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 24px 70px rgba(0,0,0,.3);
  backdrop-filter: blur(15px);
}
.hero-proof div { min-height: 62px; display: flex; align-content: center; align-items: baseline; justify-content: center; flex-wrap: wrap; row-gap: 1px; padding: 4px 24px; border-right: 1px solid rgba(255,255,255,.08); }
.hero-proof div:last-child { border-right: 0; }
.hero-proof strong { color: #fff; font-size: clamp(28px, 2.6vw, 40px); font-family: Impact, sans-serif; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.hero-proof sup { color: var(--orange); font-size: 17px; font-weight: 900; }
.hero-proof span { width: 100%; color: #a7a39e; font-size: 12px; text-align: center; }

.signal-strip {
  width: 100%;
  overflow: hidden;
  border-block: 1px solid rgba(255,132,24,.2);
  background: linear-gradient(90deg, #100a06 0%, #251207 50%, #100a06 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,185,92,.04),
    inset 0 -1px 0 rgba(255,95,0,.05),
    0 0 24px rgba(255,105,0,.08);
}
.course-page > .signal-strip { margin-top: clamp(72px, 8vh, 96px); }
.signal-track {
  width: max-content;
  display: flex;
  color: #fff4e3;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .08em;
  animation: ticker 30s linear infinite;
  will-change: transform;
}
.ticker-group {
  width: max-content;
  min-width: 100vw;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 25px;
  padding: 13px 12.5px;
  white-space: nowrap;
}
.signal-track .ticker-group { padding-block: 14px; }
.signal-track i { color: var(--orange); font-style: normal; text-shadow: 0 0 12px rgba(255,95,0,.8); }
@keyframes ticker { to { transform: translate3d(-50%, 0, 0); } }

.section { width: min(1240px, calc(100% - 48px)); margin: 0 auto; padding: 92px 0; position: relative; }
.section-heading { max-width: 720px; }
.section-heading.compact { max-width: 650px; }
.step-tag {
  width: max-content;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 9px;
  color: #2b1505;
  background: linear-gradient(110deg, #ffd45a, #ff780d);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.44), 0 8px 22px rgba(255,91,0,.18);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .1em;
  line-height: 1;
  white-space: nowrap;
}
.section-heading > .step-tag,
.project-hero-copy > .step-tag { margin-bottom: 14px; }
.section-heading h2, .project-copy h2, .ai-copy h2 {
  margin-top: 15px;
  color: #fff;
  font-size: clamp(42px, 5vw, 72px);
  line-height: 1.08;
  letter-spacing: -.055em;
  font-weight: 950;
}
.section-heading > p:last-child, .project-copy > p, .ai-copy > p {
  margin-top: 23px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.9;
}

.pain-section { display: block; }
.pain-intro {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  grid-template-areas:
    "kicker outline"
    "title outline"
    "summary outline";
  column-gap: clamp(48px, 7vw, 110px);
  align-items: end;
  padding: 0;
}
.pain-intro::before { content: none; }
.pain-intro > .section-kicker { grid-area: kicker; align-self: end; }
.pain-intro h2 {
  grid-area: title;
  max-width: 950px;
  margin-top: 16px;
  font-size: clamp(42px, 4.35vw, 68px);
  line-height: 1.05;
  letter-spacing: -.055em;
  text-wrap: balance;
}
.pain-intro h2 em { color: var(--amber); font-style: normal; }
.pain-intro > p:nth-of-type(2) { grid-area: summary; max-width: 760px; margin-top: 22px; color: #aaa6a0; font-size: 15px; line-height: 1.8; text-wrap: pretty; }
.outline-entry {
  grid-area: outline;
  margin-top: 0;
  align-self: end;
}
.outline-entry-button {
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 0 20px;
  border: 0;
  border-radius: 12px;
  color: #f3c17f;
  background: rgba(255,141,25,.07);
  box-shadow: inset 0 0 0 1px rgba(255,164,61,.17);
  cursor: pointer;
  font-size: 13px;
  font-weight: 900;
  transition-property: color, background-color, box-shadow, scale;
  transition-duration: 160ms;
  transition-timing-function: cubic-bezier(.2,0,0,1);
}
.outline-entry-button:hover { color: #fff0d8; background: rgba(255,141,25,.12); box-shadow: inset 0 0 0 1px rgba(255,174,75,.27); }
.outline-entry-button:active { scale: .96; }
.outline-entry-button:focus-visible, .curriculum-dialog-close:focus-visible { outline: 3px solid #ffd36b; outline-offset: 3px; }
.pain-map {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 34px;
  padding: 14px;
  border-radius: 32px;
  background: linear-gradient(145deg, rgba(27,24,21,.94), rgba(11,11,11,.98));
  box-shadow: 0 0 0 1px rgba(255,255,255,.09), 0 32px 90px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.035);
}
.pain-map > .value-card {
  position: relative;
  overflow: hidden;
  display: flex;
  min-height: 340px;
  flex-direction: column;
  align-items: flex-start;
  padding: 26px 24px 24px;
  border-radius: 20px;
  background: linear-gradient(105deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.065), 0 12px 34px rgba(0,0,0,.14);
  transition-property: background-color, box-shadow;
  transition-duration: 180ms;
  transition-timing-function: cubic-bezier(.2,0,0,1);
}
.pain-map > .value-card::after { content: ""; position: absolute; right: -46px; top: -72px; width: 150px; height: 150px; border-radius: 50%; background: var(--orange); filter: blur(58px); opacity: .07; pointer-events: none; }
.pain-map > .value-card:hover { transform: translateY(-4px); background: linear-gradient(105deg, rgba(255,255,255,.095), rgba(255,110,20,.035)); box-shadow: inset 0 0 0 1px rgba(255,173,13,.16), 0 16px 40px rgba(0,0,0,.22); }
.value-card-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.value-card-head small { min-height: 27px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 999px; color: #ffc565; background: rgba(255,158,30,.075); box-shadow: inset 0 0 0 1px rgba(255,177,65,.11); font-size: 10px; font-weight: 900; letter-spacing: .11em; white-space: nowrap; }
.value-no { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 14px; color: #261204; background: linear-gradient(135deg, #ffc54d, #ff6810); box-shadow: 0 10px 25px rgba(255,95,8,.18), inset 0 1px 0 rgba(255,255,255,.45); font: 18px/1 Impact, sans-serif; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.value-copy { min-width: 0; width: 100%; display: flex; flex: 1; flex-direction: column; margin-top: 22px; }
.value-copy h3 { color: #fff; font-size: clamp(20px, 1.35vw, 23px); line-height: 1.34; letter-spacing: -.025em; text-wrap: balance; }
.value-copy p { max-width: 650px; margin-top: 14px; color: #aaa7a2; font-size: 13px; line-height: 1.8; text-wrap: pretty; }
.value-copy ul { width: 100%; display: flex; flex-wrap: wrap; gap: 6px; padding: 16px 0 0; margin: auto 0 0; border-top: 1px solid rgba(255,255,255,.055); list-style: none; }
.value-copy li { min-height: 26px; display: inline-flex; align-items: center; padding: 0 9px; border-radius: 999px; color: #e9e1d7; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.065); font-size: 10px; font-weight: 750; }

.three-pillars { display: grid; grid-template-columns: 1.02fr 1.12fr .86fr; gap: 14px; margin-top: 48px; }
.pillar {
  min-height: 300px;
  position: relative;
  overflow: hidden;
  padding: 34px;
  border-radius: 30px;
  box-shadow: var(--shadow-dark);
  isolation: isolate;
}
.pillar::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 310px;
  height: 310px;
  right: -120px;
  top: -140px;
  border-radius: 50%;
  filter: blur(20px);
  opacity: .5;
}
.pillar-career { background: linear-gradient(145deg, #292c31, #141619); }
.pillar-career::before { background: #ff5700; }
.pillar-project { background: linear-gradient(150deg, #fc6807, #ffad0d); color: #231207; box-shadow: inset 0 0 0 1px rgba(255,255,255,.3), 0 30px 80px rgba(255,90,0,.18); }
.pillar-project::before { background: #fff2a6; opacity: .7; }
.pillar-community { background: linear-gradient(145deg, #24282e, #111315); }
.pillar-community::before { background: #ffad0d; }
.pillar-no { position: absolute; right: 28px; top: 22px; font-family: Impact, sans-serif; font-size: 60px; line-height: 1; color: rgba(255,255,255,.09); }
.pillar-project .pillar-no { color: rgba(60,21,0,.15); }
.pillar-en { color: var(--orange); font-family: monospace; font-size: 12px; letter-spacing: .17em; }
.pillar-project .pillar-en { color: rgba(48,22,7,.68); }
.pillar h3 { margin-top: 24px; font-size: 38px; line-height: 1.08; letter-spacing: -.04em; text-wrap: balance; }
.pillar ul { display: flex; flex-wrap: wrap; gap: 7px; list-style: none; padding: 0; margin-top: 32px; }
.pillar li { padding: 8px 11px; border-radius: 9px; background: rgba(255,255,255,.07); box-shadow: 0 0 0 1px rgba(255,255,255,.08); color: #ddd9d2; font-size: 12px; }
.pillar-project ul { display: grid; grid-template-columns: repeat(4, max-content); gap: 7px 6px; }
.pillar-project li { padding-inline: 5px; color: #321709; background: rgba(255,247,225,.44); box-shadow: 0 0 0 1px rgba(255,255,255,.38); font-size: 10px; font-weight: 700; white-space: nowrap; }

.intro-section { padding-bottom: clamp(40px, 4.5vw, 64px); }
.benefits-section { padding-top: clamp(40px, 4.5vw, 64px); }
.benefits-section::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: min(180px, 28vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,173,13,.38), transparent);
  transform: translateX(-50%);
}
.benefits-heading { margin-bottom: 48px; }

.course-pack {
  margin-top: 0;
  overflow: hidden;
  border-radius: 34px;
  background: linear-gradient(145deg, #202328, #111214);
  box-shadow: var(--shadow-dark);
}
.pack-list { display: grid; grid-template-columns: repeat(3, 1fr); }
.pack-list article { min-height: 180px; padding: 28px; border-right: 1px solid rgba(255,255,255,.07); border-bottom: 1px solid rgba(255,255,255,.07); }
.pack-list article:nth-child(3n) { border-right: 0; }
.pack-list article:nth-last-child(-n+3) { border-bottom: 0; }
.pack-list span { color: var(--orange); font-size: 13px; font-weight: 900; }
.pack-list b { display: block; margin-top: 18px; font-size: 23px; line-height: 1.3; text-wrap: balance; }
.pack-list p { margin-top: 10px; color: #a6a29c; font-size: 15px; line-height: 1.65; text-wrap: pretty; }
.lifetime-line { min-height: 72px; display: flex; align-items: center; gap: 18px; padding: 14px 22px 14px 28px; color: #261407; background: linear-gradient(100deg, #ffc62d, #ff6c08); }
.lifetime-line b { font-size: 17px; }
.lifetime-line span { font-size: 13px; font-weight: 700; }
.lifetime-line a { margin-left: auto; padding: 12px 14px; border-radius: 11px; background: rgba(43,21,6,.13); font-size: 12px; font-weight: 900; transition-property: background-color, scale; transition-duration: 150ms; }
.lifetime-line a:hover { background: rgba(43,21,6,.2); }
.lifetime-line a:active { scale: .96; }

.curriculum-dialog {
  width: min(1080px, calc(100% - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  overflow: visible;
  border: 0;
  color: var(--ink);
  background: transparent;
}
.curriculum-dialog::backdrop { background: rgba(0,0,0,.78); backdrop-filter: blur(10px); }
.curriculum-dialog[open] { animation: curriculum-dialog-in 220ms cubic-bezier(.2,0,0,1) both; }
@keyframes curriculum-dialog-in { from { opacity: 0; transform: translateY(12px) scale(.985); } }
.curriculum-dialog-shell {
  max-height: calc(100dvh - 32px);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  overflow: hidden;
  border-radius: 30px;
  background:
    radial-gradient(circle at 90% 0, rgba(255,101,8,.14), transparent 30%),
    linear-gradient(145deg, #1a1816, #0e0f11 55%, #0b0b0c);
  box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 40px 120px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.05);
}
.curriculum-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; padding: 32px 36px 24px; }
.curriculum-dialog-head > div { max-width: 760px; }
.curriculum-dialog-head h2 { margin-top: 10px; color: #fff; font-size: clamp(30px, 3.1vw, 46px); line-height: 1.08; letter-spacing: -.05em; }
.curriculum-dialog-head > div > p:last-child { margin-top: 12px; color: #aaa59e; font-size: 13px; line-height: 1.7; }
.curriculum-dialog-close {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 15px;
  color: #f7eee3;
  background: rgba(255,255,255,.07);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09);
  cursor: pointer;
  transition-property: background-color, scale;
  transition-duration: 150ms;
}
.curriculum-dialog-close span { transform: translateY(-1px); font-size: 28px; font-weight: 300; line-height: 1; }
.curriculum-dialog-close:hover { background: rgba(255,255,255,.12); }
.curriculum-dialog-close:active { scale: .96; }
.curriculum-dialog-meta { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 36px; overflow: hidden; border-radius: 16px; background: rgba(255,255,255,.045); box-shadow: inset 0 0 0 1px rgba(255,255,255,.065); }
.curriculum-dialog-meta span { min-height: 58px; display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-right: 1px solid rgba(255,255,255,.07); color: #aaa6a0; font-size: 11px; font-weight: 700; }
.curriculum-dialog-meta span:last-child { border-right: 0; }
.curriculum-dialog-meta b { color: var(--amber); font: 22px/1 Impact, sans-serif; font-variant-numeric: tabular-nums; }
.curriculum-compact-list { min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: max-content; align-content: start; gap: 10px; margin: 18px 0 0; padding: 0 36px 36px; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: rgba(255,128,20,.6) transparent; list-style: none; }
.curriculum-compact-list > li {
  min-width: 0;
  min-height: 108px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: start;
  gap: 15px;
  padding: 17px;
  border-radius: 18px;
  background: rgba(255,255,255,.038);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.065);
}
.curriculum-compact-list > li > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: #2d1606; background: linear-gradient(140deg, #ffd159, #ff7009); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 9px 22px rgba(255,94,0,.14); font-size: 13px; font-weight: 1000; font-variant-numeric: tabular-nums; }
.curriculum-compact-list small { display: block; color: #8b8782; font-family: monospace; font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.curriculum-compact-list h3 { margin-top: 4px; color: #fff7ec; font-size: 18px; line-height: 1.2; letter-spacing: -.025em; }
.curriculum-compact-list p { margin-top: 7px; color: #aaa59f; font-size: 11px; line-height: 1.6; }
.curriculum-compact-list > .is-project { background: linear-gradient(135deg, rgba(255,106,8,.085), rgba(255,255,255,.025)); box-shadow: inset 0 0 0 1px rgba(255,146,42,.11); }
.curriculum-compact-list > .is-project small, .curriculum-compact-list > .is-career small { color: var(--amber); }
.curriculum-compact-list > .is-career { grid-column: 1 / -1; min-height: 0; background: radial-gradient(circle at 4% 12%, rgba(255,187,54,.15), transparent 26%), rgba(255,109,10,.055); box-shadow: inset 0 0 0 1px rgba(255,153,48,.16); }
body.curriculum-open { overflow: hidden; }

.career-section::before {
  content: "";
  position: absolute;
  inset: 7% -15% auto;
  height: 70%;
  z-index: -1;
  background: radial-gradient(ellipse, rgba(255,92,0,.13), transparent 68%);
}
.career-services-figure {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  align-items: stretch;
  gap: 10px;
  margin-top: 54px;
  padding: 10px;
  overflow: hidden;
  border-radius: 38px;
  color: #fff;
  background:
    radial-gradient(circle at 78% 62%, rgba(255,99,8,.18), transparent 32%),
    linear-gradient(135deg, #18130f, #070706 68%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 35px 90px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.05);
}
.career-services-panel {
  min-width: 0;
  min-height: 700px;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  padding: 28px;
  overflow: hidden;
  border-radius: 29px;
  background:
    radial-gradient(circle at 12% 8%, rgba(255,128,24,.2), transparent 28%),
    radial-gradient(circle at 86% 82%, rgba(255,77,0,.12), transparent 34%),
    linear-gradient(145deg, #110d09 0%, #080706 54%, #0b0806 100%);
  box-shadow: inset 0 0 0 1px rgba(255,184,86,.12), 12px 0 42px rgba(0,0,0,.2);
}
.career-services-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .18;
  background-image: radial-gradient(rgba(255,205,128,.42) .7px, transparent .7px);
  background-size: 11px 11px;
  mask-image: linear-gradient(135deg, #000, transparent 46%, #000);
  pointer-events: none;
}
.career-services-panel::after {
  content: "";
  position: absolute;
  width: 55%;
  height: 2px;
  right: -8%;
  top: 101px;
  z-index: -1;
  background: linear-gradient(90deg, transparent, rgba(255,157,33,.72), transparent);
  box-shadow: 0 0 22px rgba(255,101,8,.48);
  transform: rotate(-5deg);
  pointer-events: none;
}
.career-services-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.career-services-head > div > span { color: #ffad20; font-size: 10px; font-weight: 900; letter-spacing: .16em; }
.career-services-head strong { display: block; margin-top: 9px; color: #fff8ec; font-size: clamp(21px, 2vw, 29px); font-weight: 900; line-height: 1.14; letter-spacing: -.04em; text-wrap: balance; }
.career-services-head strong em { color: #ff8a12; font-size: 1.22em; font-style: normal; }
.career-services-head > p {
  min-height: 30px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 2px 0 0;
  padding: 0 10px;
  border-radius: 999px;
  color: rgba(255,241,219,.72);
  background: rgba(255,255,255,.055);
  box-shadow: 0 0 0 1px rgba(255,255,255,.08);
  font-size: 10px;
  font-weight: 800;
}
.career-services-head > p i { width: 6px; height: 6px; border-radius: 50%; background: #ff8a12; box-shadow: 0 0 11px rgba(255,126,18,.95); }
.career-service-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
.career-service-card {
  min-width: 0;
  min-height: 125px;
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: start;
  gap: 13px;
  padding: 16px 52px 15px 15px;
  overflow: hidden;
  border-radius: 17px;
  background:
    linear-gradient(112deg, rgba(255,255,255,.072), rgba(255,255,255,.025) 70%),
    rgba(18,14,11,.86);
  box-shadow: 0 0 0 1px rgba(255,255,255,.075), 0 16px 32px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.035);
  transition-property: translate, box-shadow, background-color;
  transition-duration: 220ms;
  transition-timing-function: cubic-bezier(.2,0,0,1);
}
.career-service-card::after {
  content: "";
  position: absolute;
  inset: auto -30% -70% 18%;
  height: 90%;
  background: radial-gradient(ellipse, rgba(255,101,8,.14), transparent 66%);
  pointer-events: none;
}
.career-service-card:hover { translate: 0 -3px; box-shadow: 0 0 0 1px rgba(255,163,63,.19), 0 19px 38px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05); }
.career-service-no {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #211003;
  background: linear-gradient(140deg, #ffd05a, #ff6908);
  box-shadow: 0 9px 24px rgba(255,91,0,.18), inset 0 1px 0 rgba(255,255,255,.55);
  font-size: 17px;
  font-weight: 1000;
  font-variant-numeric: tabular-nums;
}
.career-service-card small { display: block; padding-top: 2px; color: rgba(255,173,32,.7); font-size: 8px; font-weight: 900; letter-spacing: .11em; }
.career-service-card h4 { margin: 5px 0 0; color: #fff8ee; font-size: 19px; line-height: 1; letter-spacing: -.035em; }
.career-service-card p { margin: 10px 0 0; color: rgba(255,238,215,.58); font-size: 10.5px; font-weight: 600; line-height: 1.65; text-wrap: pretty; }
.career-service-card svg {
  width: 31px;
  height: 31px;
  position: absolute;
  top: 17px;
  right: 15px;
  fill: none;
  stroke: rgba(255,180,75,.55);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.career-service-card-final {
  background: linear-gradient(125deg, rgba(255,123,14,.21), rgba(255,73,0,.07) 68%), rgba(21,13,8,.94);
  box-shadow: 0 0 0 1px rgba(255,147,42,.2), 0 17px 36px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06);
}
.career-service-card-final svg { fill: rgba(255,139,20,.11); stroke: #ff9e20; filter: drop-shadow(0 0 8px rgba(255,104,8,.35)); }
.career-services-flow { display: flex; align-items: center; gap: 9px; margin-top: auto; padding: 18px 4px 0; color: rgba(255,239,216,.45); font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.career-services-flow i { height: 1px; flex: 1; position: relative; background: linear-gradient(90deg, rgba(255,117,14,.2), rgba(255,160,35,.78)); box-shadow: 0 0 9px rgba(255,95,8,.32); }
.career-services-flow i::after { content: ""; width: 4px; height: 4px; position: absolute; right: -1px; top: -1.5px; border-radius: 50%; background: #ffa01f; }
.career-vision {
  min-height: 700px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 29px;
  background: #090604;
  box-shadow: inset 0 0 0 1px rgba(255,185,92,.12);
}
.career-vision::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(4,3,2,.76) 0%, rgba(4,3,2,.12) 38%, rgba(4,3,2,.08) 58%, rgba(4,3,2,.92) 100%),
    linear-gradient(90deg, rgba(4,3,2,.18), transparent 55%);
  pointer-events: none;
}
.career-vision::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image: radial-gradient(rgba(255,205,128,.34) .7px, transparent .7px);
  background-size: 9px 9px;
  opacity: .16;
  mask-image: linear-gradient(180deg, black, transparent 38%, black 100%);
  pointer-events: none;
}
.career-vision > img {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  object-fit: cover;
  object-position: center;
  outline: none;
  filter: saturate(.96) contrast(1.04);
  transition-property: scale, filter;
  transition-duration: 650ms;
  transition-timing-function: cubic-bezier(.2,0,0,1);
}
.career-services-figure:hover .career-vision > img { scale: 1.025; filter: saturate(1.04) contrast(1.06); }
.career-vision-copy { position: absolute; inset: 28px auto auto 28px; z-index: 3; }
.career-vision-copy h3 {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 9px 15px 9px 12px;
  border-radius: 999px;
  color: #fff5e3;
  background: linear-gradient(110deg, rgba(20,14,8,.86), rgba(20,11,5,.6));
  box-shadow: inset 0 0 0 1px rgba(255,176,54,.27), 0 12px 30px rgba(0,0,0,.3), 0 0 24px rgba(255,111,12,.09);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: clamp(14px, 1.25vw, 18px);
  font-weight: 850;
  line-height: 1.2;
  letter-spacing: -.025em;
  white-space: nowrap;
}
.career-vision-copy h3::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffd460, #ff790d);
  box-shadow: 0 0 0 4px rgba(255,139,19,.1), 0 0 12px rgba(255,126,14,.7);
}
.career-vision-copy p { margin-top: 13px; color: rgba(255,239,215,.64); font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.career-destination {
  min-height: 40px;
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 13px;
  border-radius: 12px;
  color: #2b1505;
  background: linear-gradient(110deg, #ffd45a, #ff780d);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), 0 10px 30px rgba(255,91,0,.25);
  font-size: 11px;
  font-weight: 900;
}
.career-destination i { width: 7px; height: 7px; border-radius: 50%; background: #fff8d9; box-shadow: 0 0 12px rgba(255,255,255,.9); }
.project-section {
  width: min(1360px, calc(100% - 48px));
  padding-top: 124px;
  isolation: isolate;
}
.project-section::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 54px -5% 0;
  border-radius: 64px;
  background:
    radial-gradient(circle at 84% 6%, rgba(255,104,8,.18), transparent 25rem),
    linear-gradient(180deg, rgba(20,13,8,.82), rgba(7,7,7,.12) 38%, rgba(7,7,7,.5));
  box-shadow: inset 0 1px rgba(255,255,255,.055);
}
.project-hero { display: grid; grid-template-columns: 1fr; gap: 76px; align-items: end; }
.project-hero-copy { max-width: 880px; }
.project-title-line { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 18px; }
.project-title-line > h2.fit-heading { width: auto; max-width: 860px; contain: none; flex: 0 1 auto; }
.project-hero h2 {
  max-width: 860px;
  margin-top: 0;
  color: #fff;
  font-size: clamp(44px, 4.2vw, 58px);
  line-height: 1.06;
  letter-spacing: -.058em;
  font-weight: 950;
  white-space: nowrap;
  text-wrap: balance;
}
.project-scope-tags { display: inline-flex; flex-wrap: wrap; gap: 7px; }
.project-scope-tags span { min-height: 28px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 999px; color: #ffc057; background: rgba(255,133,13,.09); box-shadow: inset 0 0 0 1px rgba(255,151,36,.28); font-size: 11px; font-weight: 850; letter-spacing: .025em; line-height: 1; white-space: nowrap; }
.project-hero-copy > p:last-child { max-width: 800px; margin-top: 28px; color: #bbb6af; font-size: 17px; line-height: 1.9; }
.project-proof-card {
  min-height: 330px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  overflow: hidden;
  border-radius: 30px;
  color: #2a1407;
  background: linear-gradient(145deg, #ffd24f, #ff8d12 56%, #ff6508);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.44), 0 28px 80px rgba(255,85,0,.18);
}
.project-proof-card > span { grid-column: 1 / -1; align-self: end; padding: 34px 34px 7px; font-size: 11px; font-weight: 950; letter-spacing: .12em; }
.project-proof-card > strong { grid-column: 1 / -1; padding: 0 34px 28px; font-size: clamp(28px, 2.6vw, 38px); line-height: 1.12; letter-spacing: -.04em; }
.project-proof-card > div { min-height: 95px; display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 17px 18px; border-top: 1px solid rgba(54,24,4,.13); border-right: 1px solid rgba(54,24,4,.13); }
.project-proof-card > div:last-child { border-right: 0; }
.project-proof-card b { font-family: Impact, sans-serif; font-size: 27px; font-weight: 500; }
.project-proof-card small { font-size: 10px; font-weight: 850; line-height: 1.4; }
.project-flow {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  overflow: visible;
  margin-top: 64px;
  padding: 20px 0 8px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.project-flow::-webkit-scrollbar { display: none; }
.project-flow a {
  min-height: 128px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 0 14px;
  text-align: center;
  transition-property: transform, background-color;
  transition-duration: 180ms;
  transition-timing-function: cubic-bezier(.2,0,0,1);
}
.project-flow a::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 20px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #292824 0%, #494238 28%, #a97628 45%, #e9ba55 50%, #675131 58%, #292a28 100%);
  background-size: 250% 100%;
  box-shadow: 0 1px rgba(255,255,255,.025), 0 0 12px rgba(180,122,35,.12);
}
.project-flow a:first-child::before { left: 50%; }
.project-flow a:last-child::before { right: 50%; }
.project-flow a::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 16px;
  right: -3px;
  width: 10px;
  height: 10px;
  border-top: 2px solid #9f7736;
  border-right: 2px solid #9f7736;
  background: #171714;
  transform: rotate(45deg);
  box-shadow: 3px -3px 9px rgba(154,105,29,.14);
}
.project-flow a:last-child::after { display: none; }
.project-flow a:hover {
  z-index: 3;
  border-radius: 18px;
  background: radial-gradient(circle at 50% 18px, rgba(255,184,34,.12), transparent 66%);
  transform: translateY(-3px);
}
.project-flow span {
  position: relative;
  z-index: 3;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #e6bb65;
  background: linear-gradient(145deg, #4d4434 0%, #252522 42%, #111211 100%);
  box-shadow:
    0 0 0 4px #11120f,
    0 0 0 5px rgba(198,151,67,.34),
    0 10px 22px rgba(0,0,0,.42),
    inset 0 1px rgba(255,255,255,.14),
    inset 0 -10px 18px rgba(0,0,0,.26);
  font: 13px/1 Impact, sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
  opacity: 0;
  transform: translateY(10px) scale(.92);
  filter: blur(3px);
  transition-property: opacity, transform, filter, box-shadow, color;
  transition-duration: 520ms, 520ms, 520ms, 180ms, 180ms;
  transition-timing-function: cubic-bezier(.2,0,0,1);
}
.project-flow span::after {
  content: "";
  position: absolute;
  inset: -8px;
  z-index: -1;
  border-radius: inherit;
  border: 1px solid rgba(212,166,82,.26);
  opacity: 0;
  transform: scale(.82);
}
.project-flow.visible a::before {
  animation: projectLineSweep 3.6s linear infinite;
}
.project-flow.visible a:nth-child(2)::before { animation-delay: -.55s; }
.project-flow.visible a:nth-child(3)::before { animation-delay: -1.1s; }
.project-flow.visible a:nth-child(4)::before { animation-delay: -1.65s; }
.project-flow.visible a:nth-child(5)::before { animation-delay: -2.2s; }
.project-flow.visible a:nth-child(6)::before { animation-delay: -2.75s; }
.project-flow.visible span {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}
.project-flow.visible a:nth-child(2) span { transition-delay: 90ms; }
.project-flow.visible a:nth-child(3) span { transition-delay: 180ms; }
.project-flow.visible a:nth-child(4) span { transition-delay: 270ms; }
.project-flow.visible a:nth-child(5) span { transition-delay: 360ms; }
.project-flow.visible a:nth-child(6) span { transition-delay: 450ms; }
.project-flow.visible span::after {
  animation: projectNodeHalo 3.8s cubic-bezier(.2,0,0,1) infinite;
}
.project-flow.visible a:nth-child(2) span::after { animation-delay: .55s; }
.project-flow.visible a:nth-child(3) span::after { animation-delay: 1.1s; }
.project-flow.visible a:nth-child(4) span::after { animation-delay: 1.65s; }
.project-flow.visible a:nth-child(5) span::after { animation-delay: 2.2s; }
.project-flow.visible a:nth-child(6) span::after { animation-delay: 2.75s; }
.project-flow a:nth-child(2n) span {
  color: #d7c29a;
  background: linear-gradient(145deg, #41413d 0%, #242625 46%, #111313 100%);
  box-shadow:
    0 0 0 4px #11120f,
    0 0 0 5px rgba(255,255,255,.12),
    0 10px 22px rgba(0,0,0,.42),
    inset 0 1px rgba(255,255,255,.16),
    inset 0 -10px 18px rgba(0,0,0,.28);
}
.project-flow.visible a:hover span {
  transform: scale(1.08);
  filter: brightness(1.12);
  color: #ffe2a0;
  box-shadow:
    0 0 0 4px #14110c,
    0 0 0 5px rgba(225,180,91,.55),
    0 0 24px rgba(193,132,38,.36),
    0 10px 22px rgba(0,0,0,.42),
    inset 0 1px rgba(255,255,255,.22),
    inset 0 -10px 18px rgba(0,0,0,.2);
}
.project-flow a:last-child span {
  color: #2b1802;
  background: linear-gradient(145deg, #f8dea0 0%, #d6a844 43%, #8c5819 100%);
  box-shadow:
    0 0 0 4px #14110c,
    0 0 0 5px rgba(226,188,111,.5),
    0 0 20px rgba(204,145,50,.42),
    0 8px 18px rgba(0,0,0,.38),
    inset 0 1px rgba(255,255,255,.52),
    inset 0 -10px 18px rgba(94,48,2,.18);
}
.project-flow b { margin-top: 22px; color: #fff6e3; font-size: 17px; }
.project-flow small { margin-top: 6px; color: #8f8a83; font-size: 11px; }
@keyframes projectLineSweep {
  to { background-position: -250% 0; }
}
@keyframes projectNodeHalo {
  0%, 72%, 100% { opacity: 0; transform: scale(.82); }
  84% { opacity: .48; transform: scale(1.16); }
}
.project-chapters { display: grid; grid-template-columns: 1fr; gap: 22px; margin-top: 24px; }
.project-chapter {
  height: 680px;
  min-height: 0;
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(340px, .78fr) minmax(0, 1.22fr);
  overflow: hidden;
  scroll-margin-top: 105px;
  border-radius: 34px;
  background: linear-gradient(145deg, rgba(30,30,31,.98), rgba(12,12,13,.99));
  box-shadow: 0 0 0 1px rgba(255,255,255,.09), 0 34px 90px rgba(0,0,0,.28);
}
.project-chapter:nth-child(even) { grid-template-columns: minmax(0, 1.22fr) minmax(340px, .78fr); }
.project-chapter:nth-child(even) .chapter-copy { order: 2; }
.project-chapter:nth-child(even) .chapter-visual { order: 1; }
.project-chapter.project-chapter-paired {
  height: 680px;
  grid-column: 1 / -1;
  grid-template-columns: minmax(340px, .78fr) minmax(0, 1.22fr);
  grid-template-rows: 1fr;
}
.project-chapter.project-chapter-paired:nth-child(even) { grid-template-columns: minmax(0, 1.22fr) minmax(340px, .78fr); }
.project-chapter.project-chapter-paired .chapter-copy {
  justify-content: center;
  padding: 54px 48px;
}
.project-chapter.project-chapter-paired:nth-child(odd) .chapter-copy { order: 1; }
.project-chapter.project-chapter-paired:nth-child(odd) .chapter-visual { order: 2; }
.project-chapter.project-chapter-paired:nth-child(even) .chapter-copy { order: 2; }
.project-chapter.project-chapter-paired:nth-child(even) .chapter-visual { order: 1; }
.project-chapter.project-chapter-paired .chapter-copy h3 { font-size: clamp(34px, 3.1vw, 44px); }
.project-chapter.project-chapter-paired .chapter-copy > p:not(.chapter-role) { margin-top: 19px; line-height: 1.78; }
.project-chapter.project-chapter-paired .chapter-copy ul { margin-top: 24px; }
.project-chapter.project-chapter-paired .chapter-visual { padding: 16px; box-shadow: inset 1px 0 rgba(255,255,255,.055); }
.project-chapter.project-chapter-paired .chapter-visual > a { border-radius: 18px; }
.project-chapter.project-chapter-featured { height: 860px; background: linear-gradient(145deg, rgba(36,25,17,.99), rgba(12,12,13,.99) 65%); }
.chapter-copy { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 64px 58px; }
.chapter-copy::before { content: ""; position: absolute; width: 240px; height: 240px; right: -130px; top: -130px; border-radius: 50%; background: var(--orange); filter: blur(82px); opacity: .12; }
.chapter-no { color: var(--orange); font: 800 11px/1.2 monospace; letter-spacing: .14em; }
.chapter-role { margin-top: 12px; color: #e2a45f; font-size: 12px; font-weight: 850; }
.chapter-copy h3 { max-width: 510px; margin-top: 17px; color: #fff; font-size: clamp(34px, 3.4vw, 50px); line-height: 1.12; letter-spacing: -.045em; }
.chapter-copy > p:not(.chapter-role) { max-width: 530px; margin-top: 24px; color: #aaa7a2; font-size: 15px; line-height: 1.9; }
.chapter-copy ul { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 30px 0 0; list-style: none; }
.chapter-copy li { padding: 9px 12px; border-radius: 10px; color: #e9e4dc; background: rgba(255,255,255,.065); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); font-size: 11px; font-weight: 800; }
.chapter-copy .button { align-self: flex-start; margin-top: 30px; }
.chapter-visual { min-width: 0; min-height: 0; position: relative; display: flex; flex-direction: column; overflow: hidden; margin: 0; padding: 18px; background: #0a0a0a; box-shadow: inset 1px 0 rgba(255,255,255,.055); }
.chapter-visual figcaption { min-height: 74px; display: grid; grid-template-columns: 1fr auto; gap: 4px 18px; align-items: end; padding: 7px 10px 16px; }
.chapter-visual figcaption span { grid-column: 1 / -1; color: var(--orange); font-size: 10px; font-weight: 900; letter-spacing: .14em; }
.chapter-visual figcaption b { color: #fff; font-size: 18px; }
.chapter-visual figcaption small { color: #817e79; font-size: 10px; }
.chapter-visual > a { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 20px; background: #eef2f0; cursor: zoom-in; }
.chapter-visual img { width: 100%; height: 100%; object-fit: contain; outline: 1px solid rgba(255,255,255,.1); outline-offset: -1px; transition: transform 500ms cubic-bezier(.2,0,0,1), filter 500ms ease; }
.chapter-visual > a:hover img { transform: scale(1.012); filter: brightness(1.035); }
.chapter-visual > a:focus-visible { outline: 3px solid var(--orange); outline-offset: -3px; }
.chapter-dashboard > a { background: #dbe7e8; }
.chapter-report > a, .chapter-sql > a, .chapter-excel > a, .chapter-collection > a { background: #f3f2ef; }
.chapter-certificate > a { background: radial-gradient(circle at 50%, #fff9e9, #d8d1c6 78%); }
.chapter-certificate img { padding: 28px; }
.project-chapter-final { height: 600px; background: linear-gradient(145deg, #25180f, #0d0d0d 66%); }

.community-section { width: min(1320px, calc(100% - 48px)); }
.community-figure { margin-top: 58px; border-radius: 30px; overflow: hidden; box-shadow: var(--shadow-dark), 0 40px 100px rgba(0,0,0,.34); }
.community-figure img { width: 100%; }

.team-showcase { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 64px; }
.team-panel { padding: 26px; overflow: hidden; border-radius: 30px; background: linear-gradient(145deg, #202328, #121315); box-shadow: var(--shadow-dark); }
.team-core-group {
  grid-column: 1 / -1;
  min-width: 0;
  position: relative;
  padding: 30px 32px 32px;
  background:
    radial-gradient(circle at 10% 0, rgba(255,177,54,.13), transparent 30%),
    radial-gradient(circle at 92% 16%, rgba(255,91,7,.1), transparent 34%),
    linear-gradient(145deg, #202328, #101113 62%, #17120f);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08),
    0 30px 74px rgba(0,0,0,.3),
    inset 0 1px rgba(255,255,255,.035);
  isolation: isolate;
}
.team-core-group::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .4; background: repeating-linear-gradient(118deg, transparent 0 34px, rgba(255,255,255,.018) 35px 36px); mask-image: linear-gradient(90deg, #000, transparent 48%, #000); }
.team-core-group::after { content: ""; position: absolute; z-index: -1; top: 0; left: 32px; right: 32px; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255,219,153,.55) 22%, #ff8b0b 52%, transparent 88%); box-shadow: 0 0 22px rgba(255,124,8,.22); }
.team-alumni { grid-column: 1 / -1; overflow-x: auto; }
.panel-title { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 25px; }
.panel-title span { padding: 7px 10px; border-radius: 8px; color: #28140a; background: linear-gradient(90deg, var(--amber), var(--orange)); font-size: 12px; font-weight: 900; }
.panel-title b { color: #fff; font-size: 20px; }
.team-panel img { width: 100%; outline: none; }
.team-business-mentors > img {
  width: 88%;
  display: block;
  margin-inline: auto;
}
.assistant-card-strip {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 2%;
}
.assistant-card {
  min-width: 0;
  aspect-ratio: 277 / 386;
  overflow: hidden;
  border-radius: 14.5% 14.5% 13% 13%;
  background-image: url("assets/a2-optimized/assistants-source.jpg");
  background-repeat: no-repeat;
  background-size: 556% auto;
  background-position-y: 57.14%;
}
.assistant-card-1 { background-position-x: 1.43%; }
.assistant-card-2 { background-position-x: 25.81%; }
.assistant-card-3 { background-position-x: 50.04%; }
.assistant-card-4 { background-position-x: 74.35%; }
.assistant-card-5 { background-position-x: 98.65%; }
.team-core-heading { align-items: flex-end; margin: 0 0 22px; padding-bottom: 22px; border-bottom: 1px solid rgba(255,255,255,.07); }
.team-core-heading-copy { display: flex; align-items: center; gap: 12px; }
.team-core-heading-copy > span { flex: 0 0 auto; padding: 8px 11px; border-radius: 9px; color: #301606; background: linear-gradient(120deg, #ffd06a, #ff7a08); box-shadow: inset 0 1px rgba(255,255,255,.36), 0 8px 22px rgba(255,100,7,.15); }
.team-core-heading-value { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; text-align: right; }
.team-core-heading-value b { color: #fff8ec; font-size: 22px; letter-spacing: -.025em; text-wrap: balance; }
.teacher-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0 auto;
}
.teacher-profile {
  --teacher-card-surface:
    radial-gradient(circle at 18% 14%, rgba(255,202,105,.16), transparent 33%),
    radial-gradient(circle at 100% 100%, rgba(255,86,6,.1), transparent 38%),
    linear-gradient(145deg, rgba(39,31,24,.98), rgba(18,18,19,.99) 68%);
  position: relative;
  min-width: 0;
  min-height: 315px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px;
  border-radius: 22px;
  background: var(--teacher-card-surface);
  box-shadow:
    0 0 0 1px rgba(255,185,78,.19),
    0 22px 48px rgba(0,0,0,.25),
    0 0 34px rgba(255,101,8,.06),
    inset 0 1px rgba(255,235,199,.055);
  transition-property: transform, box-shadow;
  transition-duration: 240ms;
  transition-timing-function: cubic-bezier(.2,0,0,1);
  isolation: isolate;
}
.teacher-profile::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  width: 160%;
  aspect-ratio: 1;
  pointer-events: none;
  background: conic-gradient(
    transparent 0deg 268deg,
    rgba(255,185,78,.14) 292deg,
    #ffe4a5 326deg,
    #ff9a19 348deg,
    transparent 360deg
  );
  transform: translate(-50%, -50%) rotate(0turn);
  filter: drop-shadow(0 0 7px rgba(255,154,25,.58));
  will-change: transform;
  animation: teacher-gold-border 4.8s linear infinite;
}
.teacher-profile::after {
  content: "";
  position: absolute;
  inset: 1.5px;
  z-index: 1;
  border-radius: 20.5px;
  pointer-events: none;
  background: var(--teacher-card-surface);
}
.teacher-profile > * { position: relative; z-index: 2; }
.teacher-profile:hover {
  transform: translateY(-4px);
  box-shadow:
    0 0 0 1px rgba(255,178,66,.2),
    0 26px 52px rgba(0,0,0,.3),
    0 0 30px rgba(255,101,8,.07),
    inset 0 1px rgba(255,255,255,.045);
}
@keyframes teacher-gold-border {
  to { transform: translate(-50%, -50%) rotate(1turn); }
}
.teacher-index { position: absolute; top: 20px; right: 20px; color: rgba(255,216,155,.38); font: 800 9px/1 monospace; letter-spacing: .14em; }
.teacher-portrait {
  width: 86px;
  aspect-ratio: 1;
  display: block;
  overflow: hidden;
  border-radius: 50%;
  background-color: #ef7c16;
  background-image: url("assets/a2-optimized/core-teachers.webp");
  background-repeat: no-repeat;
  background-size: 483.25% 197.97%;
  background-position-y: 45.6%;
  outline: 1px solid rgba(255,255,255,.1);
  outline-offset: -1px;
  box-shadow: inset 0 0 0 4px #efe8e4, 0 0 0 1px rgba(255,255,255,.12), 0 12px 28px rgba(0,0,0,.28), 0 0 25px rgba(255,125,11,.1);
}
.teacher-profile .teacher-portrait { width: 96px; box-shadow: inset 0 0 0 4px #fff5eb, 0 0 0 1px rgba(255,255,255,.12), 0 14px 32px rgba(0,0,0,.3), 0 0 32px rgba(255,135,15,.16); }
.teacher-portrait-dai { background-position-x: 4.5%; }
.teacher-portrait-ju { background-position-x: 50%; }
.teacher-portrait-shadow { background-position-x: 95.5%; }
.teacher-info { width: 100%; flex: 1; display: flex; flex-direction: column; margin-top: 14px; text-align: left; }
.teacher-info h3 { margin-top: 0; color: #fffaf3; font-size: 27px; line-height: 1.08; letter-spacing: -.035em; text-wrap: balance; }
.teacher-profile .teacher-info h3 { font-size: 30px; }
.teacher-tags { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 6px; margin-top: 13px; }
.teacher-tags span {
  padding: 6px 8px;
  border-radius: 7px;
  color: #e8c8a7;
  background: rgba(255,148,47,.07);
  box-shadow: inset 0 0 0 1px rgba(255,166,74,.16);
  font-size: 10px;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
}
.teacher-profile .teacher-tags span { color: #ffe0bb; background: rgba(255,137,24,.11); box-shadow: inset 0 0 0 1px rgba(255,178,79,.23); }
.teacher-info p { max-width: none; margin: 15px 0 0; color: #a9a59f; font-size: 12px; line-height: 1.72; text-wrap: pretty; }
.teacher-info p span { display: block; }
.teacher-result { display: flex; align-items: center; gap: 9px; margin-top: auto; padding-top: 18px; }
.teacher-result small { flex: 0 0 auto; padding: 5px 7px; border-radius: 6px; color: #2f1607; background: linear-gradient(120deg, #ffd06a, #ff8a0a); font-size: 8px; font-weight: 950; letter-spacing: .07em; }
.teacher-result b { min-width: 0; color: #e5ddd2; font-size: 10px; line-height: 1.45; letter-spacing: .02em; text-wrap: pretty; }
@media (min-width: 761px) {
  .team-assistants { position: relative; }
  .team-assistants > .assistant-card-strip {
    position: absolute;
    top: calc(50% + 14px);
    left: 26px;
    width: calc(100% - 52px);
    transform: translateY(-50%);
  }
}
.alumni-strip {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 8px;
  min-width: 1000px;
}
.alumni-strip span {
  aspect-ratio: 441 / 323;
  background-image: url("assets/a2-optimized/alumni-fields.webp");
  background-repeat: no-repeat;
  background-size: 533.1% 218.9%;
  background-position: var(--sprite-x) var(--sprite-y);
}

.proof-section { width: min(1320px, calc(100% - 48px)); }
.proof-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 24px; margin-top: 46px; }
.proof-toolbar p { display: flex; align-items: baseline; gap: 9px; color: #eee9e1; font-size: 13px; font-weight: 800; }
.proof-toolbar strong { color: var(--orange); font: 34px/1 Impact, sans-serif; font-variant-numeric: tabular-nums; }
.proof-toolbar span { color: #777570; font-size: 11px; font-weight: 500; }
.proof-mode { display: flex; align-items: center; gap: 10px; color: #aaa7a1; font-size: 12px; font-weight: 800; }
.proof-mode b { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; color: #251205; background: linear-gradient(135deg, var(--amber), var(--orange)); box-shadow: 0 10px 28px rgba(255,101,8,.22); font-size: 18px; }
.proof-lightbox-close {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 15px;
  cursor: pointer;
  color: #f7f2e9;
  background: #1b1d20;
  box-shadow: var(--shadow-dark);
  transition-property: color, background-color, box-shadow, scale;
  transition-duration: 180ms;
}
.proof-lightbox-close:active { scale: .96; }
.proof-frame {
  position: relative;
  overflow: hidden;
  margin-top: 18px;
  border-radius: 30px;
  background: linear-gradient(145deg, rgba(29,31,34,.98), rgba(11,12,14,.99));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.15), 0 28px 80px rgba(0,0,0,.28);
  transition-property: box-shadow;
  transition-duration: 180ms;
}
.proof-frame.is-scroll-active { box-shadow: inset 0 0 0 2px rgba(255,101,8,.68), 0 28px 80px rgba(0,0,0,.28); }
.proof-frame::after {
  content: "";
  position: absolute;
  z-index: 1;
  right: 10px;
  bottom: 0;
  left: 10px;
  height: 132px;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(11,12,14,.94) 74%);
  transition-property: opacity;
  transition-duration: 180ms;
}
.proof-frame.is-at-end::after { opacity: 0; }
.proof-viewport {
  width: 100%;
  height: clamp(580px, 70vh, 760px);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 16px 14px 96px 16px;
  border-radius: inherit;
  overscroll-behavior-y: contain;
  scroll-behavior: smooth;
  scrollbar-color: var(--orange) rgba(255,255,255,.07);
  scrollbar-width: thin;
}
.proof-viewport::-webkit-scrollbar { width: 10px; }
.proof-viewport::-webkit-scrollbar-track { margin-block: 16px; border-radius: 99px; background: rgba(255,255,255,.07); }
.proof-viewport::-webkit-scrollbar-thumb { min-height: 64px; border: 2px solid #17191c; border-radius: 99px; background: linear-gradient(var(--amber), var(--orange)); }
.proof-viewport:focus-visible { outline: 2px solid var(--orange); outline-offset: -4px; }
.proof-viewport:not(.is-scroll-active) {
  overflow-y: hidden;
  overscroll-behavior-y: auto;
  cursor: pointer;
}
.proof-wall { width: 100%; column-count: 3; column-gap: 14px; }
.proof-stack { display: contents; }
.proof-card { break-inside: avoid; overflow: hidden; margin: 0 0 14px; border-radius: 23px; background: linear-gradient(145deg, #202327, #151719); box-shadow: var(--shadow-dark), 0 18px 45px rgba(0,0,0,.18); }
.proof-featured { box-shadow: var(--shadow-dark), 0 22px 55px rgba(0,0,0,.25); }
.proof-image-button { width: 100%; display: block; padding: 0; border: 0; cursor: zoom-in; background: #202224; }
.proof-card img { width: 100%; height: auto; max-height: none; object-fit: contain; outline: 1px solid rgba(255,255,255,.1); outline-offset: -1px; transition-property: filter, opacity; transition-duration: 180ms; }
.proof-image-button:hover img { filter: brightness(1.06); }
.proof-image-button:active img { opacity: .84; }
.proof-card figcaption { display: flex; flex-direction: column; gap: 5px; padding: 16px 18px 18px; }
.proof-card figcaption b { color: #fff; font-size: 14px; }
.proof-card figcaption span { color: #96938d; font-size: 11px; line-height: 1.55; }
.proof-card-compact figcaption { padding-block: 13px 15px; }
.proof-scroll-cue {
  position: absolute;
  z-index: 2;
  right: 50%;
  bottom: 20px;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 6px 7px 6px 18px;
  border: 0;
  border-radius: 17px;
  color: #f7f2e9;
  background: rgba(29,31,34,.94);
  box-shadow: 0 16px 44px rgba(0,0,0,.46), inset 0 0 0 1px rgba(255,255,255,.14);
  backdrop-filter: blur(12px);
  cursor: pointer;
  transform: translateX(50%);
  transition-property: opacity, transform, box-shadow;
  transition-duration: 180ms;
}
.proof-scroll-cue b { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; color: #251205; background: linear-gradient(135deg, var(--amber), var(--orange)); font-size: 17px; }
.proof-scroll-cue:hover { box-shadow: 0 18px 52px rgba(0,0,0,.54), inset 0 0 0 1px rgba(255,255,255,.22); transform: translateX(50%) translateY(-2px); }
.proof-scroll-cue:active { transform: translateX(50%) scale(.96); }
.proof-frame.is-at-end .proof-scroll-cue { opacity: 0; pointer-events: none; transform: translateX(50%) translateY(10px); }
.proof-lightbox { width: min(1120px, calc(100% - 34px)); max-width: none; max-height: calc(100dvh - 34px); margin: auto; padding: 0; overflow: visible; border: 0; border-radius: 28px; color: #fff; background: #111315; box-shadow: 0 36px 120px rgba(0,0,0,.72), 0 0 0 1px rgba(255,255,255,.14); }
.proof-lightbox::backdrop { background: rgba(0,0,0,.82); backdrop-filter: blur(10px); }
.proof-lightbox figure { max-height: calc(100dvh - 34px); overflow: auto; border-radius: inherit; }
.proof-lightbox img { width: auto; max-width: 100%; height: auto; max-height: calc(100dvh - 96px); margin: 0 auto; object-fit: contain; outline: 1px solid rgba(255,255,255,.1); outline-offset: -1px; }
.proof-lightbox figcaption { padding: 17px 64px 18px 20px; color: #aaa7a1; font-size: 12px; line-height: 1.6; }
.proof-lightbox-close { position: absolute; z-index: 2; top: 12px; right: 12px; color: #fff; background: rgba(5,5,5,.82); backdrop-filter: blur(10px); font-size: 27px; line-height: 1; }
.proof-lightbox-close:hover { background: var(--orange); }

.ai-section {
  width: min(1320px, calc(100% - 48px));
  display: grid;
  grid-template-columns: .84fr 1.16fr;
  gap: 72px;
  align-items: center;
}
.ai-section::before {
  content: "";
  position: absolute;
  inset: 8% -6%;
  z-index: -1;
  border-radius: 70px;
  background:
    radial-gradient(circle at 80% 20%, rgba(255,173,13,.18), transparent 28%),
    radial-gradient(circle at 15% 90%, rgba(255,75,0,.15), transparent 30%),
    #111214;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08);
}
.update-badge { display: inline-flex; margin-top: 24px; padding: 8px 11px; border-radius: 8px; color: #ffe7c2; background: rgba(255,91,0,.13); box-shadow: 0 0 0 1px rgba(255,115,31,.28); font-size: 12px; font-weight: 800; }
.ai-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 32px; }
.ai-steps span { min-height: 56px; display: flex; align-items: center; gap: 11px; padding: 10px 14px; border-radius: 14px; color: #d7d3cd; background: rgba(255,255,255,.045); box-shadow: 0 0 0 1px rgba(255,255,255,.06); font-size: 13px; }
.ai-steps b { color: var(--orange); font-family: monospace; }
.ai-guarantees { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; }
.ai-guarantees span { padding: 7px 11px; border-radius: 999px; color: #241309; background: linear-gradient(110deg, #ffd052, #ff7a08); font-size: 12px; font-weight: 900; }
.resume-machine { overflow: hidden; border-radius: 32px; background: #0a0c0e; box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 40px 100px rgba(0,0,0,.5); transform: perspective(1400px) rotateY(-3deg); }
.machine-toolbar { height: 52px; display: flex; align-items: center; gap: 8px; padding: 0 18px; background: #25282d; box-shadow: inset 0 -1px rgba(255,255,255,.06); }
.machine-toolbar i { width: 8px; height: 8px; border-radius: 50%; background: #5a5d61; }
.machine-toolbar i:first-child { background: var(--orange); }
.machine-toolbar span { margin-left: auto; color: #888b90; font: 10px/1 monospace; letter-spacing: .14em; }
.machine-body { min-height: 500px; display: grid; grid-template-columns: .75fr 1.25fr; }
.resume-form { display: flex; flex-direction: column; gap: 15px; padding: 34px 25px; border-right: 1px solid rgba(255,255,255,.07); background: linear-gradient(160deg, #15181c, #0d0f11); }
.resume-form label { display: flex; flex-direction: column; gap: 8px; color: #777b80; font-size: 11px; }
.resume-form label span { min-height: 45px; display: flex; align-items: center; padding: 0 13px; border-radius: 11px; color: #e9e5df; background: #202329; box-shadow: 0 0 0 1px rgba(255,255,255,.07); font-size: 12px; }
.typing-line::after { content: ""; width: 1px; height: 14px; margin-left: 4px; background: var(--orange); animation: caret .8s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.resume-form button { min-height: 48px; margin-top: auto; border: 0; border-radius: 13px; color: #221309; background: linear-gradient(110deg, #ffd14d, #ff6508); font: 800 12px/1 inherit; }
.resume-form button b { margin-left: 12px; }
.resume-preview { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 30px; background: radial-gradient(circle at 70% 20%, rgba(255,117,0,.18), transparent 32%); }
.resume-page { width: min(290px, 100%); aspect-ratio: .71; padding: 29px; border-radius: 5px; color: #242424; background: #f8f3e9; box-shadow: 0 35px 80px rgba(0,0,0,.45); transform: rotate(2deg); animation: pageHover 5s ease-in-out infinite; }
@keyframes pageHover { 0%,100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -8px; rotate: -.4deg; } }
.resume-page header { position: static; display: flex; align-items: center; gap: 12px; height: auto; padding: 0 0 20px; background: transparent; }
.avatar { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(135deg, var(--orange), var(--amber)); font-weight: 900; }
.resume-page header b, .resume-page header small { display: block; }
.resume-page header b { font-size: 17px; }
.resume-page header small { margin-top: 3px; color: #888; font-size: 7px; letter-spacing: .15em; }
.resume-page h4 { margin: 23px 0 11px; font-size: 11px; }
.resume-rule { width: 58%; height: 4px; display: block; margin-top: 8px; border-radius: 4px; background: #d9d4ca; }
.resume-rule.wide { width: 100%; }
.resume-rule.medium { width: 78%; }
.skill-bars { display: flex; gap: 5px; margin-top: 24px; }
.skill-bars i { width: 32%; height: 32px; border-radius: 4px; background: linear-gradient(180deg, #ffb210, #ff6508); opacity: .85; }
.published { width: min(360px, 100%); display: flex; align-items: center; gap: 8px; margin-top: 23px; padding: 12px 14px; border-radius: 12px; color: #9b9b9b; background: rgba(0,0,0,.55); box-shadow: 0 0 0 1px rgba(255,255,255,.1); font-size: 10px; }
.published i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px var(--green); }
.published span { color: var(--green); }
.published b { margin-left: auto; color: #ddd; font-family: monospace; font-weight: 500; }

/* Bonus suite: resume platform + growth notes live in one shared chapter. */
.bonus-section {
  background:
    radial-gradient(circle at 88% 7%, rgba(255,126,15,.2), transparent 27rem),
    radial-gradient(circle at 8% 92%, rgba(255,78,0,.12), transparent 25rem),
    linear-gradient(145deg, #171717, #090a0b 58%, #17100b) !important;
  box-shadow:
    0 0 0 1px rgba(255,184,74,.16),
    0 34px 92px rgba(0,0,0,.38),
    inset 0 1px rgba(255,255,255,.05) !important;
}
.bonus-heading {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px;
  gap: 24px;
  align-items: center;
}
.bonus-title-copy { min-width: 0; }
.bonus-heading h2 { margin-top: 10px; font-size: clamp(25px, 4.8vw, 58px); }
.bonus-gift-mark { width: 104px; justify-self: end; outline: none; filter: drop-shadow(0 16px 26px rgba(255,80,0,.18)); }
.bonus-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 16px; margin-top: 30px; }
.bonus-card { min-width: 0; position: relative; overflow: hidden; display: grid; grid-template-rows: auto 1fr; border-radius: 26px; background: linear-gradient(155deg, #22252a, #151719 72%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.085), 0 22px 58px rgba(0,0,0,.28); }
.bonus-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, rgba(255,255,255,.035), transparent 30%, transparent 78%, rgba(255,109,7,.035)); }
.bonus-visual { height: auto; aspect-ratio: 1.86; position: relative; overflow: hidden; margin: 12px 12px 0; border-radius: 18px; background: #111315; box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.bonus-resume-visual { display: grid; place-items: center; padding: 14px; background: #bfc3c6; }
.bonus-resume-visual img { width: 100%; height: 100%; object-fit: contain; border-radius: 11px; outline: 1px solid rgba(0,0,0,.18); box-shadow: 0 18px 42px rgba(15,17,20,.28); }
.bonus-growth-visual { display: grid; grid-template-columns: minmax(0, .3fr) minmax(0, .7fr); gap: 12px; align-items: center; padding: 16px; background: linear-gradient(145deg, #18191c, #0b0b0c 68%); }
.bonus-growth-cover, .bonus-growth-notes { position: static; width: 100%; max-height: 100%; object-fit: contain; outline: 1px solid rgba(255,203,139,.16); box-shadow: 0 14px 36px rgba(0,0,0,.38); transform: none; }
.bonus-growth-cover { border-radius: 9px; }
.bonus-growth-notes { border-radius: 9px; }
.bonus-card-copy { position: relative; z-index: 1; display: flex; flex-direction: column; padding: 22px 24px 24px; }
.bonus-card-title { display: flex; align-items: center; gap: 10px; }
.bonus-card-title > span { flex: 0 0 auto; padding: 7px 9px; border-radius: 8px; color: #2a1504; background: linear-gradient(110deg, #ffd456, #ff7909); font: 900 9px/1 monospace; letter-spacing: .08em; }
.bonus-card-title h3 { min-width: 0; color: #fff5e8; font-size: clamp(22px, 1.65vw, 27px); line-height: 1.15; letter-spacing: -.03em; }
.bonus-feature-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.bonus-feature-list li { min-width: 0; min-height: 58px; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 10px 11px; border-radius: 11px; background: rgba(255,255,255,.038); box-shadow: inset 0 0 0 1px rgba(255,255,255,.055); }
.bonus-feature-list b { color: #ffc45e; font-size: 11px; line-height: 1.2; }
.bonus-feature-list span { overflow: hidden; color: #aaa69f; font-size: 10px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.bonus-card-growth { padding-bottom: 0; }
.audience-layout {
  display: grid;
  grid-template-columns: minmax(430px, .86fr) minmax(0, 1.14fr);
  gap: clamp(20px, 2.2vw, 30px);
  align-items: stretch;
  margin-top: 58px;
}
.audience-visual {
  position: relative;
  min-height: 620px;
  overflow: visible;
  border-radius: 34px;
  background: transparent;
  isolation: isolate;
}
.audience-visual::before {
  content: "";
  position: absolute;
  inset: 10% 7% -3%;
  z-index: -1;
  border-radius: 34px;
  background: radial-gradient(circle at 50% 46%, rgba(255,104,8,.2), transparent 64%);
  filter: blur(28px);
  opacity: .58;
}
.audience-poster {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 34px;
  background:
    radial-gradient(circle at 64% 30%, rgba(255,112,9,.19), transparent 34%),
    radial-gradient(circle at 48% 78%, rgba(27,147,255,.14), transparent 30%),
    #050505;
  box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 32px 90px rgba(0,0,0,.44), 0 0 60px rgba(255,101,8,.06);
  isolation: isolate;
  animation: audiencePosterFloat 6.4s cubic-bezier(.45,0,.55,1) infinite;
  will-change: transform;
}
.audience-poster img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  object-position: center center;
  outline: 1px solid rgba(255,255,255,.1);
  outline-offset: -1px;
}
.audience-starfield {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.audience-starfield i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  opacity: .16;
  background: #8eeeff;
  box-shadow:
    0 0 3px rgba(143, 238, 255, .95),
    0 0 9px rgba(21, 173, 255, .82),
    0 0 18px rgba(0, 101, 255, .48);
  transform: translate(-50%, -50%) scale(.35);
  animation: audienceStarTwinkle var(--duration) cubic-bezier(.45, 0, .55, 1) var(--delay) infinite;
  will-change: transform, opacity, filter;
}
.audience-starfield i:nth-child(3n + 2) {
  border-radius: 1px;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}
.audience-starfield i:nth-child(4n) { background: #4bc9ff; }
.audience-cards { display: grid; grid-template-rows: repeat(4, minmax(0, 112px)); gap: 10px; align-content: center; min-width: 0; }
.audience-card {
  position: relative;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  min-height: 112px;
  overflow: hidden;
  border-radius: 20px;
  color: #e9e5df;
  background: linear-gradient(105deg, rgba(255,255,255,.065), rgba(255,255,255,.025));
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 15px 36px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.035);
}
.audience-card::after {
  content: "";
  position: absolute;
  right: -24px;
  bottom: -48px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: rgba(255,101,8,.035);
  filter: blur(26px);
  pointer-events: none;
}
.audience-no {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 20px;
  color: rgba(255,139,32,.82);
  background: rgba(255,255,255,.025);
  font: 900 28px/.9 Impact, sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.04em;
}
.audience-no::after {
  content: "";
  position: absolute;
  top: 20px;
  right: 0;
  width: 1px;
  height: calc(100% - 40px);
  background: linear-gradient(180deg, transparent, rgba(255,139,32,.42), transparent);
}
.audience-card > div { position: relative; z-index: 1; align-self: center; padding: 16px 20px 16px 19px; }
.audience-card h3 { color: rgba(247,242,234,.86); font-size: clamp(15px, 1.16vw, 18px); line-height: 1.35; font-weight: 750; letter-spacing: -.018em; text-wrap: balance; }
.audience-card p { margin-top: 6px; color: rgba(209,203,194,.5); font-size: 11px; line-height: 1.5; text-wrap: pretty; }
.audience-card:nth-child(2) { transition-delay: 70ms; }
.audience-card:nth-child(3) { transition-delay: 140ms; }
.audience-card:nth-child(4) { transition-delay: 210ms; }

@keyframes audiencePosterFloat {
  0%, 100% { transform: translate3d(0, 2px, 0) rotate(-.18deg); }
  50% { transform: translate3d(0, -9px, 0) rotate(.18deg); }
}

@keyframes audienceStarTwinkle {
  0%, 100% { opacity: .14; transform: translate(-50%, -50%) scale(.35); filter: blur(.2px); }
  38% { opacity: .46; transform: translate(-50%, -50%) scale(.72); filter: blur(0); }
  52% { opacity: 1; transform: translate(-50%, -50%) scale(1.45); filter: brightness(1.45); }
  68% { opacity: .34; transform: translate(-50%, -50%) scale(.58); filter: blur(.15px); }
}

.timing-section { width: min(1320px, calc(100% - 48px)); overflow: hidden; padding-inline: 54px; border-radius: 52px; background: radial-gradient(circle at 92% 5%, rgba(255,173,13,.26), transparent 28%), linear-gradient(145deg, #1c1e22, #0b0c0e); box-shadow: var(--shadow-dark); }
.timing-title { max-width: 820px; }
.timing-title h2 { margin-top: 15px; font-size: clamp(42px, 5vw, 72px); line-height: 1.08; letter-spacing: -.055em; }
.timing-reasons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 55px; overflow: hidden; border-radius: 24px; background: rgba(255,255,255,.1); }
.timing-reasons article { min-height: 210px; padding: 27px; background: #151719; }
.timing-reasons span { color: var(--orange); font: 16px/1 Impact, sans-serif; }
.timing-reasons b { display: block; margin-top: 37px; font-size: 18px; }
.timing-reasons p { margin-top: 10px; color: #96938e; font-size: 12px; line-height: 1.7; }
.target-jobs { display: grid; grid-template-columns: 1.2fr .55fr auto; gap: 12px; align-items: center; margin-top: 12px; }
.target-jobs > div { min-height: 78px; display: flex; flex-direction: column; justify-content: center; padding: 15px 20px; border-radius: 18px; background: rgba(255,255,255,.055); box-shadow: 0 0 0 1px rgba(255,255,255,.07); }
.target-jobs span { color: #8e8b86; font-size: 10px; }
.target-jobs b { margin-top: 5px; color: #f2eee8; font-size: 14px; }

.compare-section { width: min(1320px, calc(100% - 48px)); padding-block: 18px 20px; }
.compare-heading {
  max-width: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
}
.compare-heading > div {
  flex: 1 1 auto;
  min-width: 0;
}
.compare-heading .section-kicker { font-size: 9px; }
.compare-heading h2 {
  margin-top: 7px;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: .96;
}
.compare-heading > p {
  max-width: 380px;
  margin-bottom: 8px;
  color: #8f8d88;
  font-size: 14px;
  line-height: 1.75;
  text-align: right;
  text-wrap: pretty;
}
.compare-scroller {
  min-width: 0;
  margin-top: 0;
  padding: 0;
  overflow-x: auto;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  scrollbar-color: rgba(255,190,91,.72) rgba(255,255,255,.06);
  scrollbar-width: thin;
}
.compare-stage {
  display: grid;
  grid-template-columns: minmax(0, 16fr) minmax(400px, 9fr);
  gap: 24px;
  align-items: center;
  margin-top: 18px;
}
.compare-illustration {
  min-width: 0;
  width: 100%;
  aspect-ratio: 2 / 3;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: stretch;
  margin: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.compare-illustration::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 12% 4%;
  background:
    radial-gradient(circle at 60% 30%, rgba(255,170,48,.28), transparent 38%),
    radial-gradient(circle at 23% 72%, rgba(44,133,194,.1), transparent 34%);
  filter: blur(28px);
}
.compare-illustration::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 66% 19%, rgba(255,180,68,.1), transparent 34%),
    radial-gradient(circle at 18% 72%, rgba(41,124,184,.07), transparent 31%),
    radial-gradient(ellipse at 52% 47%, transparent 54%, rgba(5,5,5,.12) 76%, rgba(5,5,5,.72) 100%);
}
.compare-illustration img {
  width: 100%;
  max-width: none;
  height: 100%;
  position: relative;
  z-index: 1;
  object-fit: cover;
  object-position: center;
  outline: 0;
  opacity: 1;
  filter: brightness(1.12) saturate(1.18) contrast(1.04);
  -webkit-mask-image: radial-gradient(ellipse 88% 86% at 52% 47%, #000 44%, rgba(0,0,0,.92) 66%, transparent 100%);
  mask-image: radial-gradient(ellipse 88% 86% at 52% 47%, #000 44%, rgba(0,0,0,.92) 66%, transparent 100%);
}
.compare-scroller::-webkit-scrollbar { height: 8px; }
.compare-scroller::-webkit-scrollbar-track { border-radius: 999px; background: rgba(255,255,255,.06); }
.compare-scroller::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(255,190,91,.72); }
.compare-table {
  width: 100%;
  min-width: 920px;
  border-spacing: 0;
  table-layout: fixed;
  border-collapse: separate;
  font-variant-numeric: tabular-nums;
}
.compare-col-axis { width: 18%; }
.compare-col-self { width: 22%; }
.compare-col-featured { width: 34%; }
.compare-col-offline { width: 26%; }
.compare-table th,
.compare-table td {
  height: 78px;
  padding: 13px 18px;
  text-align: center;
  vertical-align: middle;
  color: #8d8d8a;
  background: #090a09;
  box-shadow: inset 0 -1px rgba(255,255,255,.075);
  font-size: 13px;
  line-height: 1.45;
}
.compare-table th {
  color: #f3f1eb;
  font-size: 15px;
  font-weight: 800;
}
.compare-table .self,
.compare-table .featured,
.compare-table .offline {
  border-left: 14px solid transparent;
  background-clip: padding-box;
}
.compare-table .featured {
  color: #8c4009;
  background-color: #ffe8af;
  background-image: linear-gradient(90deg, #ffedc2, #ffe3a0);
  box-shadow: inset 0 -1px rgba(111,61,7,.14);
  font-weight: 800;
}
.compare-table thead th {
  position: relative;
  height: 112px;
  border-radius: 24px 24px 0 0;
  color: #fff;
  box-shadow: inset 0 -1px rgba(255,255,255,.08);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.35;
  text-wrap: balance;
}
.compare-table thead th > span,
.compare-table thead th > small { display: block; position: relative; z-index: 2; }
.compare-table thead th > small {
  margin-top: 5px;
  color: #777975;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
}
.compare-table thead .featured {
  overflow: visible;
  color: #9e4403;
  background: linear-gradient(110deg, #fff0c9, #ffe8ad);
  background-clip: padding-box;
  box-shadow: inset 0 -1px rgba(111,61,7,.14), 0 -8px 24px rgba(255,189,67,.08);
  font-size: 20px;
}
.compare-table thead .featured small {
  color: rgba(112,60,8,.62);
  font-size: 10px;
}
.compare-table thead .featured em {
  position: absolute;
  top: -10px;
  right: 18px;
  z-index: 3;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  color: #fff8e9;
  background: linear-gradient(110deg, #ff9f0b, #ff6507);
  box-shadow: 0 8px 18px rgba(158,68,3,.22), inset 0 0 0 1px rgba(255,255,255,.32);
  font-size: 9px;
  font-style: normal;
  letter-spacing: .08em;
}
.compare-axis {
  text-align: left !important;
  background: linear-gradient(90deg, #10110f, #090a09) !important;
}
.compare-axis > b {
  width: 29px;
  height: 29px;
  display: inline-grid;
  place-items: center;
  margin-right: 10px;
  border-radius: 10px;
  color: #ffb126;
  background: rgba(255,156,18,.09);
  box-shadow: inset 0 0 0 1px rgba(255,171,48,.13);
  font: 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  vertical-align: middle;
}
.compare-axis > span { display: inline-flex; flex-direction: column; vertical-align: middle; }
.compare-table tbody strong,
.compare-table tbody small { display: block; }
.compare-table tbody strong { color: #e8e5df; font-size: 14px; font-weight: 850; }
.compare-table tbody small { margin-top: 4px; color: #777873; font-size: 10px; line-height: 1.4; }
.compare-axis strong { color: #f5f1ea !important; font-size: 14px !important; }
.compare-axis small { color: #666863 !important; }
.compare-table tbody .featured strong { color: #8b3d07; font-size: 15px; }
.compare-table tbody .featured small { color: rgba(112,60,8,.62); }
.compare-table tbody tr:first-child .featured strong {
  width: fit-content;
  margin: auto;
  padding: 7px 13px;
  border-radius: 11px;
  color: #8a3902;
  background: rgba(255,179,42,.34);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
  font-size: 18px;
}
.compare-last-row > * {
  border-radius: 0 0 24px 24px;
  box-shadow: none;
}
.compare-last-row .featured { box-shadow: inset 0 0 0 1px rgba(139,85,10,.1); }

/* Detailed comparison: faithfully mirrors the full reference matrix. */
.detail-compare-table {
  width: 100%;
  min-width: 680px;
  border-spacing: 0;
  table-layout: fixed;
  border-collapse: separate;
  color: #f5f3ef;
  font-variant-numeric: tabular-nums;
}
.detail-col-group { width: 8%; }
.detail-col-item { width: 12%; }
.detail-col-self { width: 24%; }
.detail-col-featured { width: 33%; }
.detail-col-offline { width: 23%; }
.detail-compare-table th,
.detail-compare-table td {
  height: 24px;
  padding: 2px 5px;
  text-align: center;
  vertical-align: middle;
  background: #11110f;
  box-shadow: inset 0 -1px rgba(255,190,91,.11);
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.08;
}
.detail-compare-table thead th {
  height: 60px;
  padding: 6px;
  border-radius: 18px 18px 0 0;
  box-shadow: inset 0 -1px rgba(255,255,255,.075);
  font-size: 14px;
  font-weight: 950;
  letter-spacing: -.025em;
}
.detail-compare-table .detail-self,
.detail-compare-table .detail-featured,
.detail-compare-table .detail-offline {
  border-left: 6px solid transparent;
  background-clip: padding-box;
}
.detail-compare-table .detail-featured {
  position: relative;
  color: #9f3f04;
  background-color: #ffe9a8;
  background-image: linear-gradient(180deg, #fff5d5 0%, #ffe19a 68%, #ffcd62 100%);
  box-shadow: inset 0 -1px rgba(133,75,7,.22);
  font-weight: 900;
}
.detail-compare-table thead .detail-featured {
  overflow: hidden;
  color: #a94b08;
  font-size: 14px;
  line-height: 1.18;
}
.detail-compare-table thead .detail-featured::before,
.detail-compare-table thead .detail-featured::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: -27px;
  right: -57px;
  width: 154px;
  height: 45px;
  background: #ffd572;
  transform: rotate(45deg);
  transform-origin: center;
}
.detail-compare-table thead .detail-featured::after {
  top: -2px;
  right: -85px;
  background: #ffcc5d;
}
.detail-compare-table thead .detail-featured span,
.detail-compare-table thead .detail-featured small {
  position: relative;
  z-index: 1;
  display: block;
}
.detail-compare-table thead .detail-featured small {
  margin-top: 4px;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}
.detail-axis-head { color: #fff; }
.detail-group {
  color: #f8f5ef;
  border-right: 1px solid rgba(255,255,255,.14);
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}
.detail-axis {
  color: #f8f5ef;
  font-size: 11.5px !important;
  font-weight: 900 !important;
}
.detail-axis-wide {
  color: #f8f5ef;
  font-size: 12px !important;
  font-weight: 900 !important;
}
.detail-compare-table tbody .detail-self,
.detail-compare-table tbody .detail-offline { color: #c7c2ba; }
.detail-compare-table .detail-no { color: #ff9090 !important; font-size: 14px; font-weight: 950; }
.detail-compare-table .detail-yes { color: #b9b9b9 !important; font-size: 14px; font-weight: 950; }
.detail-price { height: 32px !important; }
.detail-price strong {
  width: min(82%, 220px);
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: rgba(154,105,31,.82);
  box-shadow: inset 0 0 0 1px rgba(255,192,77,.25);
  color: #f0d9ac;
  font-size: 13px;
  font-weight: 950;
}
.detail-price.detail-featured strong {
  color: #963700;
  background: linear-gradient(90deg, #ffdf75, #ffbd38);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.42), 0 5px 16px rgba(255,157,20,.16);
}
.detail-last-row > th,
.detail-last-row > td { box-shadow: none; }
.detail-last-row > :first-child { border-radius: 0 0 0 18px; }
.detail-last-row > .detail-axis { border-radius: 0 0 18px 0; }
.detail-last-row > .detail-featured,
.detail-last-row > .detail-offline { border-radius: 0 0 18px 18px; }

.pricing-section::before {
  content: "";
  position: absolute;
  inset: 8% -6%;
  z-index: -1;
  border-radius: 70px;
  background: linear-gradient(145deg, #151618, #090a0b);
  box-shadow: 0 0 0 1px rgba(255,255,255,.07);
}
.pricing-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  grid-template-areas:
    "kicker kicker"
    "title title"
    "summary summary"
    ". path";
  column-gap: 32px;
  align-items: end;
}
.pricing-heading > .section-kicker { grid-area: kicker; }
.pricing-heading h2 { grid-area: title; max-width: none; font-size: clamp(31.5px, 3.75vw, 54px); text-wrap: balance; }
.pricing-heading > p:not(.section-kicker):last-of-type { grid-area: summary; max-width: 690px; margin-top: 23px; text-wrap: pretty; }
.value-path { grid-area: path; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 26px; }
.value-path span { min-height: 36px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 8px; border-radius: 999px; color: #d8d4cd; background: rgba(255,255,255,.055); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); font-size: 11px; font-weight: 800; }
.value-path i { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #2a1505; background: linear-gradient(145deg, #ffc32f, #ff6a07); font-size: 9px; font-style: normal; font-variant-numeric: tabular-nums; }
.value-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 44px; }
.value-grid article { min-height: 164px; position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 18px; border-radius: 18px; background: radial-gradient(circle at 100% 0, rgba(255,157,19,.08), transparent 42%), #202328; box-shadow: inset 0 0 0 1px rgba(255,255,255,.055), var(--shadow-dark); transition-property: transform, box-shadow; transition-duration: 220ms; transition-timing-function: cubic-bezier(.2,0,0,1); }
.value-grid article:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(255,165,30,.22), 0 24px 50px rgba(0,0,0,.3); }
.value-grid article small { width: fit-content; padding: 4px 7px; border-radius: 6px; color: #ffad22; background: rgba(255,139,13,.1); font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.value-grid span { display: block; margin-top: 13px; color: #f4f0e9; font-size: 16px; font-weight: 900; }
.value-grid em { display: block; margin-top: 7px; color: #a6a29c; font-size: 12px; font-style: normal; line-height: 1.55; text-wrap: pretty; }
.value-grid b { display: block; margin-top: auto; padding-top: 14px; color: #fff0d4; font-size: 22px; font-variant-numeric: tabular-nums; }
.total-value { --showdown-cycle-duration: 6s; min-height: 228px; position: relative; overflow: hidden; display: grid; gap: 20px; margin-top: 12px; padding: 24px 28px 22px; border-radius: 28px; color: #fff8ed; background: radial-gradient(circle at 80% 46%, rgba(255,103,7,.22), transparent 30%), radial-gradient(circle at 20% -20%, rgba(255,210,133,.1), transparent 34%), linear-gradient(125deg, #1a130d, #080808 54%, #210d03); box-shadow: inset 0 0 0 1px rgba(255,204,128,.22), inset 0 1px 0 rgba(255,255,255,.05), 0 28px 76px rgba(0,0,0,.46), 0 0 62px rgba(255,92,0,.11); isolation: isolate; }
.total-value::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .56; background: linear-gradient(180deg, rgba(255,226,181,.035), transparent 34%), repeating-linear-gradient(115deg, transparent 0 28px, rgba(255,255,255,.02) 29px 30px); mask-image: linear-gradient(90deg, transparent, #000 18%, #000 88%, transparent); }
.total-value::after { content: ""; position: absolute; z-index: 0; top: -38%; bottom: -38%; left: -24%; width: 36%; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at center, rgba(255,166,67,.28), rgba(255,102,7,.1) 38%, transparent 68%); filter: blur(12px); transform: translateX(0); }
.total-value.visible.is-cycle-active::after { animation: showdownSpotlight var(--showdown-cycle-duration) cubic-bezier(.2,0,0,1) forwards; }
.total-value > * { position: relative; z-index: 1; }
.value-showdown-head { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.value-showdown-head::after { content: ""; position: absolute; top: -24px; left: 0; width: 100%; height: 1px; opacity: .56; background: linear-gradient(90deg, transparent, rgba(255,220,161,.72) 22%, #ff8a0a 58%, transparent 94%); box-shadow: 0 0 16px rgba(255,126,8,.38); transform: scaleX(.14); transform-origin: left center; }
.total-value.visible.is-cycle-active .value-showdown-head::after { animation: premiumRail var(--showdown-cycle-duration) cubic-bezier(.2,0,0,1) forwards; }
.value-showdown-kicker { display: inline-flex; align-items: center; gap: 9px; padding: 7px 11px 7px 9px; border-radius: 999px; color: #ffe0a8; background: linear-gradient(110deg, rgba(255,192,96,.12), rgba(255,117,8,.07)); box-shadow: inset 0 0 0 1px rgba(255,211,143,.17), 0 8px 24px rgba(0,0,0,.16); font-size: 11px; font-weight: 900; letter-spacing: .1em; }
.value-showdown-kicker i { width: 7px; height: 7px; border-radius: 50%; background: #ff9b19; box-shadow: 0 0 0 5px rgba(255,143,20,.11), 0 0 20px rgba(255,139,16,.9); animation: valueDot 1.5s ease-in-out infinite; }
.value-showdown-tag { color: rgba(255,229,189,.4); font: 10px/1 Impact, sans-serif; letter-spacing: .22em; text-shadow: 0 0 20px rgba(255,143,20,.2); }
.value-showdown-main { position: relative; display: grid; grid-template-columns: minmax(260px, 1.15fr) minmax(160px, .62fr) minmax(250px, .9fr); gap: 22px; align-items: center; }
.market-total, .saving-burst, .final-price { opacity: 0; transform: translateY(12px); filter: blur(4px); }
.total-value.visible .market-total, .total-value.visible .saving-burst, .total-value.visible .final-price { opacity: 1; transform: translateY(0); filter: blur(0); }
.market-total small, .final-price > span { display: block; color: rgba(255,255,255,.48); font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.market-total-price { width: fit-content; position: relative; display: flex; align-items: baseline; margin-top: 5px; color: #eadfce; font-variant-numeric: tabular-nums; text-shadow: 0 2px 22px rgba(255,220,168,.08); }
.market-total-price > span { margin-right: 4px; font: 22px/1 Impact, sans-serif; }
.market-total-price strong { position: relative; color: transparent; background: linear-gradient(180deg, #fff7e8 0%, #d9c6aa 48%, #8f816f 100%); background-clip: text; -webkit-background-clip: text; font: clamp(44px, 4vw, 64px)/.94 Impact, sans-serif; letter-spacing: .01em; filter: drop-shadow(0 5px 16px rgba(0,0,0,.38)); }
.market-value-number > span:first-child { display: block; }
.market-total-price em { margin-left: 3px; font: 24px/1 Impact, sans-serif; font-style: normal; }
.market-total p { margin: 9px 0 0; color: rgba(255,255,255,.35); font-size: 10px; letter-spacing: .04em; }
.market-shards { position: absolute; inset: 0; pointer-events: none; }
.market-shards i { position: absolute; inset: 0; opacity: 0; color: #d2ccc3; font: inherit; font-style: normal; letter-spacing: inherit; transform: translate(0, 0) rotate(0); will-change: transform, opacity, filter; }
.market-shards i::before { content: "42,500"; position: absolute; inset: 0; }
.market-shards i:nth-child(1) { --fragment-clip: polygon(0 0, 24% 0, 22% 34%, 0 31%); --fragment-x: -34px; --fragment-y: -28px; --fragment-r: -14deg; }
.market-shards i:nth-child(2) { --fragment-clip: polygon(24% 0, 49% 0, 48% 32%, 22% 34%); --fragment-x: 8px; --fragment-y: -42px; --fragment-r: 11deg; }
.market-shards i:nth-child(3) { --fragment-clip: polygon(49% 0, 76% 0, 73% 35%, 48% 32%); --fragment-x: 52px; --fragment-y: -35px; --fragment-r: -9deg; }
.market-shards i:nth-child(4) { --fragment-clip: polygon(76% 0, 100% 0, 100% 30%, 73% 35%); --fragment-x: 104px; --fragment-y: -24px; --fragment-r: 17deg; }
.market-shards i:nth-child(5) { --fragment-clip: polygon(0 31%, 22% 34%, 27% 68%, 0 72%); --fragment-x: -42px; --fragment-y: 2px; --fragment-r: 8deg; }
.market-shards i:nth-child(6) { --fragment-clip: polygon(22% 34%, 48% 32%, 51% 69%, 27% 68%); --fragment-x: 22px; --fragment-y: 8px; --fragment-r: -16deg; }
.market-shards i:nth-child(7) { --fragment-clip: polygon(48% 32%, 73% 35%, 77% 66%, 51% 69%); --fragment-x: 70px; --fragment-y: -2px; --fragment-r: 13deg; }
.market-shards i:nth-child(8) { --fragment-clip: polygon(73% 35%, 100% 30%, 100% 70%, 77% 66%); --fragment-x: 125px; --fragment-y: 4px; --fragment-r: -12deg; }
.market-shards i:nth-child(9) { --fragment-clip: polygon(0 72%, 27% 68%, 24% 100%, 0 100%); --fragment-x: -26px; --fragment-y: 40px; --fragment-r: -18deg; }
.market-shards i:nth-child(10) { --fragment-clip: polygon(27% 68%, 51% 69%, 50% 100%, 24% 100%); --fragment-x: 20px; --fragment-y: 48px; --fragment-r: 14deg; }
.market-shards i:nth-child(11) { --fragment-clip: polygon(51% 69%, 77% 66%, 75% 100%, 50% 100%); --fragment-x: 76px; --fragment-y: 42px; --fragment-r: -11deg; }
.market-shards i:nth-child(12) { --fragment-clip: polygon(77% 66%, 100% 70%, 100% 100%, 75% 100%); --fragment-x: 136px; --fragment-y: 34px; --fragment-r: 19deg; }
.total-value.visible.is-cycle-active .market-value-number > span:first-child { animation: marketValueBreak var(--showdown-cycle-duration) cubic-bezier(.2,0,0,1) forwards; }
.total-value.visible.is-cycle-active .market-shards i { clip-path: var(--fragment-clip); animation: marketFragmentFly var(--showdown-cycle-duration) cubic-bezier(.2,0,0,1) forwards; }
.price-strike { position: absolute; z-index: 2; left: -7px; right: -9px; top: 51%; height: 6px; border-radius: 999px; background: linear-gradient(90deg, #ffd15a, #ff8d08 34%, #ff4d00 78%, rgba(255,77,0,0)); box-shadow: 0 0 10px rgba(255,208,92,.5), 0 0 20px rgba(255,88,0,.78); transform: rotate(-5deg) scaleX(0); transform-origin: left center; opacity: 0; }
.price-strike::after { content: ""; position: absolute; right: -3px; top: -4px; width: 13px; height: 13px; border-radius: 50%; background: #fff2c6; box-shadow: 0 0 18px #ff6a00, 0 0 34px rgba(255,91,0,.74); }
.total-value.visible.is-cycle-active .price-strike { animation: strikeSweep var(--showdown-cycle-duration) cubic-bezier(.2,0,0,1) forwards; }
.saving-burst { min-height: 112px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px 18px; border-radius: 20px; text-align: center; background: radial-gradient(circle at 50% 0, rgba(255,220,150,.1), transparent 44%), linear-gradient(150deg, rgba(255,158,25,.2), rgba(255,72,0,.08)); box-shadow: inset 0 0 0 1px rgba(255,188,82,.24), inset 0 1px 0 rgba(255,255,255,.04), 0 16px 42px rgba(0,0,0,.26); }
.saving-burst > span { color: #ffbf65; font-size: 11px; font-weight: 900; letter-spacing: .18em; }
.saving-burst strong { margin-top: 5px; color: #ff7a0a; font: 27px/1 Impact, sans-serif; letter-spacing: .02em; font-variant-numeric: tabular-nums; text-shadow: 0 0 10px rgba(255,198,87,.18), 0 0 26px rgba(255,94,0,.4); }
.saving-burst strong span { min-width: 5.2ch; display: inline-block; text-align: left; }
.saving-burst small { margin-top: 8px; color: rgba(255,255,255,.5); font-size: 9px; font-weight: 700; }
.total-value.visible.is-cycle-active .saving-burst { animation: savingStage var(--showdown-cycle-duration) cubic-bezier(.2,0,0,1) forwards; }
.final-price { position: relative; padding-left: 26px; border-left: 1px solid rgba(255,223,172,.13); isolation: isolate; }
.final-price::before { content: ""; position: absolute; z-index: -1; inset: -28px -18px -28px -26px; pointer-events: none; opacity: .22; background: radial-gradient(ellipse at 58% 52%, rgba(255,125,11,.34), transparent 64%); filter: blur(8px); transform: scale(.82); }
.total-value.visible.is-cycle-active .final-price::before { animation: finalAuraStage var(--showdown-cycle-duration) cubic-bezier(.2,0,0,1) forwards; }
.final-price > div { display: flex; align-items: baseline; margin-top: 1px; color: #ffc15b; font-variant-numeric: tabular-nums; text-shadow: 0 0 16px rgba(255,198,94,.16), 0 0 34px rgba(255,95,0,.28); }
.final-price > div small { margin-right: 5px; font: 25px/1 Impact, sans-serif; }
.final-price > div strong { min-width: 4.2ch; color: transparent; background: linear-gradient(105deg, #ff7a05 0%, #ff9818 30%, #ffe3a0 49%, #ff8a08 65%, #ff6500 100%); background-size: 190% 100%; background-clip: text; -webkit-background-clip: text; font: clamp(58px, 5vw, 78px)/.92 Impact, sans-serif; letter-spacing: .01em; filter: drop-shadow(0 7px 18px rgba(255,76,0,.18)); }
.final-price em { display: block; margin-top: 9px; color: #f0c78d; font-size: 10px; font-style: normal; font-weight: 800; letter-spacing: .08em; }
.final-value-seal { display: inline-block; margin-left: 0; padding: 4px 8px; border-radius: 999px; color: #351603; background: linear-gradient(120deg, #ffe39a, #ffb329 42%, #ff7105); box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 0 22px rgba(255,119,8,.34); font-size: 8px; letter-spacing: .1em; vertical-align: 1px; transform: translateY(-7px); }
.total-value.visible.is-cycle-active .final-price { animation: finalPriceStage var(--showdown-cycle-duration) cubic-bezier(.2,0,0,1) forwards; transform-origin: center; }
.total-value.visible.is-cycle-active .final-price > div strong { animation: finalNumberStage var(--showdown-cycle-duration) cubic-bezier(.2,0,0,1) forwards, finalGoldSweep var(--showdown-cycle-duration) cubic-bezier(.2,0,0,1) forwards; transform-origin: left center; }
.value-flow { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.value-flow i { position: absolute; top: 50%; width: 48px; height: 1px; overflow: visible; opacity: .15; background: linear-gradient(90deg, transparent, rgba(255,152,32,.55), transparent); }
.value-flow i::after { content: ""; position: absolute; top: -3px; left: 0; width: 7px; height: 7px; border-radius: 50%; opacity: 0; background: #fff2c0; box-shadow: 0 0 12px #ff7908, 0 0 24px rgba(255,91,0,.78); }
.value-flow i:first-child { left: 35.5%; }
.value-flow i:last-child { left: 65.5%; }
.total-value.visible.is-cycle-active .value-flow i:first-child::after { animation: valueSparkOne var(--showdown-cycle-duration) linear forwards; }
.total-value.visible.is-cycle-active .value-flow i:last-child::after { animation: valueSparkTwo var(--showdown-cycle-duration) linear forwards; }
.value-ratio { display: flex; align-items: center; gap: 14px; }
.value-ratio > div { height: 6px; position: relative; flex: 1; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.08); box-shadow: inset 0 1px 2px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.025); }
.value-ratio > div i { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,.1), rgba(255,255,255,.24)); }
.value-ratio > div span { position: absolute; inset: 0 auto 0 0; width: 11.8%; border-radius: inherit; background: linear-gradient(90deg, #ffb110, #ff5e06); box-shadow: 0 0 16px rgba(255,94,6,.8); transform: scaleX(0); transform-origin: left; }
.total-value.visible.is-cycle-active .value-ratio > div span { animation: ratioFill var(--showdown-cycle-duration) cubic-bezier(.2,0,0,1) forwards; }
.value-ratio b { flex: 0 0 auto; color: rgba(255,255,255,.52); font-size: 10px; letter-spacing: .05em; }
@keyframes valueStepIn { to { opacity: 1; transform: translateY(0); filter: blur(0); } }
@keyframes strikeSweep { 0%, 7.5% { opacity: 0; transform: rotate(-5deg) scaleX(0); } 12% { opacity: 1; } 19.5%, 24% { opacity: 1; transform: rotate(-5deg) scaleX(1); } 30%, 100% { opacity: 0; transform: rotate(-5deg) scaleX(1); } }
@keyframes marketValueBreak { 0%, 16.5% { opacity: 1; transform: scale(1); filter: blur(0); } 19.5% { opacity: 1; transform: translateX(-2px) rotate(-.6deg); } 21% { transform: translateX(2px) rotate(.6deg); } 24% { opacity: 0; transform: scale(1.015); filter: blur(1px); } 25.5%, 43.5% { opacity: 0; } 51%, 100% { opacity: 1; transform: scale(1); filter: blur(0); } }
@keyframes marketFragmentFly { 0%, 18% { opacity: 0; transform: translate(0, 0) rotate(0); filter: blur(0); } 21%, 24% { opacity: 1; transform: translate(0, 0) rotate(0); filter: blur(0); } 37.5% { opacity: 0; transform: translate(var(--fragment-x), var(--fragment-y)) rotate(var(--fragment-r)) scale(.72); filter: blur(2px); } 39%, 100% { opacity: 0; } }
@keyframes savingStage { 0%, 18% { opacity: .58; transform: scale(.955); filter: saturate(.72); box-shadow: inset 0 0 0 1px rgba(255,166,55,.16), 0 14px 38px rgba(0,0,0,.22); } 27% { opacity: 1; transform: scale(1.025); filter: saturate(1.18); box-shadow: inset 0 0 0 1px rgba(255,218,145,.66), 0 0 42px rgba(255,105,8,.32), 0 16px 42px rgba(0,0,0,.24); } 36%, 100% { opacity: 1; transform: scale(1); filter: saturate(1.04); box-shadow: inset 0 0 0 1px rgba(255,194,91,.4), 0 0 26px rgba(255,92,0,.22), 0 16px 42px rgba(0,0,0,.24); } }
@keyframes finalPriceStage { 0%, 30% { opacity: .62; transform: scale(.985); filter: saturate(.76); } 39% { opacity: 1; transform: scale(1.032); filter: saturate(1.18) drop-shadow(0 0 24px rgba(255,118,18,.3)); } 48%, 100% { opacity: 1; transform: scale(1); filter: saturate(1.04) drop-shadow(0 0 14px rgba(255,106,8,.2)); } }
@keyframes finalNumberStage { 0%, 30% { opacity: .14; transform: translateY(8px) scale(.96); filter: blur(4px); } 40.5% { opacity: 1; transform: translateY(0) scale(1.035); filter: blur(0); } 48%, 100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } }
@keyframes finalGoldSweep { 0%, 30% { background-position: 100% 50%; } 46.5%, 100% { background-position: 0% 50%; } }
@keyframes finalAuraStage { 0%, 30% { opacity: .12; transform: scale(.82); } 40.5% { opacity: .72; transform: scale(1.06); } 51%, 100% { opacity: .42; transform: scale(1); } }
@keyframes valueSparkOne { 0%, 18% { opacity: 0; transform: translateX(0) scale(.5); } 21% { opacity: 1; } 30% { opacity: 0; transform: translateX(48px) scale(1.1); } 100% { opacity: 0; } }
@keyframes valueSparkTwo { 0%, 30% { opacity: 0; transform: translateX(0) scale(.5); } 33% { opacity: 1; } 42% { opacity: 0; transform: translateX(48px) scale(1.1); } 100% { opacity: 0; } }
@keyframes showdownSpotlight { 0%, 10.5% { left: -24%; opacity: .72; } 28.5% { left: 33%; opacity: .82; } 46.5%, 92% { left: 72%; opacity: 1; } 100% { left: 86%; opacity: 0; } }
@keyframes premiumRail { 0% { opacity: 0; transform: scaleX(.08); } 12%, 92% { opacity: .72; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1); } }
@keyframes ratioFill { 0%, 33% { transform: scaleX(0); } 46.5%, 100% { transform: scaleX(1); } }
@keyframes valueDot { 50% { opacity: .52; transform: scale(.7); } }
.risk-free { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: stretch; margin-top: 10px; }
.risk-free > div { display: grid; grid-template-columns: 54px 1fr; gap: 14px; align-items: center; padding: 17px; border-radius: 18px; background: #f0ece4; color: #292724; }
.risk-free > div > span { color: var(--orange); font-family: Impact, sans-serif; font-size: 29px; }
.risk-free p { font-size: 11px; line-height: 1.55; }
.risk-free p small { display: block; margin-bottom: 4px; color: #e3500d; font-size: 9px; font-weight: 900; letter-spacing: .08em; }
.risk-free p b { display: block; font-size: 13px; }

.service-promise-section {
  position: relative;
  background:
    radial-gradient(circle at 88% 18%, rgba(255,139,20,.15), transparent 28rem),
    radial-gradient(circle at 6% 100%, rgba(255,83,5,.09), transparent 24rem),
    linear-gradient(145deg, #18130f 0%, #0b0b0c 52%, #120c08 100%) !important;
  box-shadow:
    0 0 0 1px rgba(255,183,84,.14),
    0 30px 86px rgba(0,0,0,.34),
    inset 0 1px rgba(255,255,255,.045) !important;
}
.service-promise-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .2;
  background-image: radial-gradient(rgba(255,202,126,.34) .7px, transparent .7px);
  background-size: 11px 11px;
  mask-image: linear-gradient(115deg, #000, transparent 48%);
}
.service-promise-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}
.service-promise-heading .section-kicker {
  color: var(--amber);
  letter-spacing: .18em;
}
body[data-experiment="a2"] .course-page .service-promise-heading h2 {
  margin-top: 14px;
  color: #fff6ed;
  font-size: clamp(36px, 3vw, 44px);
  font-weight: 950;
  letter-spacing: -.045em;
}
.service-promise-board {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(340px, .84fr);
  gap: 12px;
  margin-top: 44px;
  padding: 12px;
  overflow: hidden;
  border-radius: 36px;
  background: rgba(8,8,8,.72);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.085),
    0 26px 68px rgba(0,0,0,.28),
    inset 0 1px rgba(255,255,255,.035);
}
.service-promise-board::before {
  content: "";
  position: absolute;
  left: 9%;
  right: 9%;
  top: 0;
  height: 1px;
  opacity: .72;
  background: linear-gradient(90deg, transparent, rgba(255,205,130,.8), #ff7b0b, transparent);
  box-shadow: 0 0 18px rgba(255,112,8,.38);
  pointer-events: none;
}
.service-promise-list {
  min-width: 0;
  padding: 8px 28px;
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(255,255,255,.038), rgba(255,255,255,.012));
}
.service-promise-item {
  min-height: 124px;
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 22px;
  padding: 22px 4px;
  transition-property: transform;
  transition-duration: 180ms;
  transition-timing-function: cubic-bezier(.2,0,0,1);
}
.service-promise-item + .service-promise-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 70px;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,.105), transparent);
  pointer-events: none;
}
.service-promise-item:hover { transform: translateX(4px); }
.service-promise-no {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #ffb52b;
  background: rgba(255,139,14,.075);
  box-shadow: inset 0 0 0 1px rgba(255,173,54,.14);
  font: 900 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
}
.service-promise-item h3,
.service-promise-refund h3 {
  color: #fff8ef;
  font-size: clamp(20px, 1.8vw, 25px);
  line-height: 1.2;
  letter-spacing: -.035em;
}
.service-promise-item p,
.service-promise-refund p {
  max-width: 42ch;
  margin-top: 9px;
  color: #a9a49d;
  font-size: 13px;
  line-height: 1.75;
  text-wrap: pretty;
}
.service-promise-refund {
  min-height: 420px;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
  padding: 30px;
  border-radius: 22px;
  color: #2b1303;
  background:
    radial-gradient(circle at 88% 2%, rgba(255,238,196,.34), transparent 31%),
    linear-gradient(145deg, #efbd60 0%, #d9822c 51%, #ac4518 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,244,218,.24),
    inset 0 1px rgba(255,255,255,.46),
    0 22px 52px rgba(92,31,6,.28);
  transition-property: transform, box-shadow;
  transition-duration: 220ms;
  transition-timing-function: cubic-bezier(.2,0,0,1);
}
.service-promise-refund::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .24;
  background:
    linear-gradient(112deg, rgba(255,255,255,.18), transparent 28%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 1px, transparent 1px 10px);
  mask-image: linear-gradient(to bottom, #000, transparent 68%);
}
.service-promise-refund::after {
  content: "";
  position: absolute;
  right: 30px;
  bottom: 0;
  left: 30px;
  height: 1px;
  opacity: .55;
  background: linear-gradient(90deg, transparent, rgba(255,231,184,.62), transparent);
  pointer-events: none;
}
.service-promise-refund:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 0 0 1px rgba(255,244,218,.3),
    inset 0 1px rgba(255,255,255,.5),
    0 28px 62px rgba(92,31,6,.34);
}
.service-promise-refund .service-promise-no {
  color: rgba(53,23,4,.88);
  background: rgba(255,242,211,.13);
  box-shadow: inset 0 0 0 1px rgba(71,29,2,.16);
}
.service-promise-refund-meta {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.service-promise-label {
  color: rgba(52,20,2,.58);
  font: 900 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .17em;
}
.service-promise-refund-hero {
  min-width: 0;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(120px, .82fr);
  align-items: center;
  gap: 2px;
}
.service-promise-time {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr auto;
  align-items: end;
  column-gap: 10px;
  align-self: center;
  margin: 0;
  color: #2b1303;
}
.service-promise-time strong {
  position: relative;
  z-index: 1;
  grid-row: 1;
  color: #351704;
  font: 780 clamp(94px, 7.8vw, 122px)/.76 "Arial Black", "Helvetica Neue", sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.065em;
}
.service-promise-time small {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  grid-row: 1;
  margin-bottom: 3px;
}
.service-promise-time small b {
  padding: 7px 9px 6px;
  border-radius: 6px;
  color: #f9e5bf;
  background: rgba(48,18,2,.88);
  box-shadow: inset 0 0 0 1px rgba(255,245,223,.1);
  font: 850 14px/1 sans-serif;
  letter-spacing: .08em;
}
.service-promise-time small em {
  color: rgba(49,19,2,.6);
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .12em;
  white-space: nowrap;
}
.service-promise-slogan {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 13px;
  color: rgba(49,19,2,.68);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
  white-space: nowrap;
}
.service-promise-slogan i {
  width: 22px;
  height: 1px;
  background: rgba(55,24,3,.35);
}
.service-promise-illustration {
  position: relative;
  width: min(100%, 164px);
  justify-self: end;
  margin-right: 0;
}
.service-promise-illustration svg { width: 100%; height: auto; display: block; overflow: visible; }
.service-promise-illustration > span {
  position: absolute;
  right: 0;
  bottom: 7px;
  left: 0;
  color: rgba(49,19,2,.68);
  font: 900 7px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .2em;
  text-align: center;
}
.promise-seal-ring { stroke: rgba(57,22,1,.58); stroke-width: 1.5; }
.promise-seal-ring-inner { stroke: rgba(255,239,204,.36); stroke-dasharray: 2 6; }
.promise-shield { fill: rgba(255,244,215,.09); stroke: rgba(57,22,1,.72); stroke-width: 2; stroke-linejoin: round; }
.promise-shield-inset { stroke: rgba(255,239,204,.48); stroke-width: 1; stroke-linejoin: round; }
.promise-clock { fill: rgba(255,255,255,.06); stroke: rgba(57,22,1,.72); stroke-width: 1.8; }
.promise-clock-hand { stroke: rgba(57,22,1,.82); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.promise-clock-pin { fill: #321404; }
.promise-seal-rule { stroke: rgba(57,22,1,.32); stroke-width: 1; }
.service-promise-refund-copy {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding: 18px 19px 19px;
  border-radius: 14px;
  background: rgba(54,18,2,.22);
  box-shadow: inset 0 1px rgba(255,244,220,.12), inset 0 0 0 1px rgba(47,16,2,.12);
}
.service-promise-copy-check {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  margin-top: 1px;
  border-radius: 9px;
  color: #f8e7c5;
  background: rgba(45,16,2,.82);
  box-shadow: inset 0 0 0 1px rgba(255,245,222,.1);
  font-size: 16px;
  font-weight: 950;
}
.service-promise-refund h3 { color: #fff1d6; }
.service-promise-refund p { max-width: 38ch; color: rgba(255,237,207,.72); font-weight: 620; }
.service-promise-list .service-promise-item:nth-child(2) { transition-delay: 70ms; }
.service-promise-list .service-promise-item:nth-child(3) { transition-delay: 140ms; }
.service-promise-refund.reveal-on-scroll { transition-delay: 210ms; }

.faq-section { display: grid; grid-template-columns: .7fr 1.3fr; gap: 80px; overflow-anchor: none; }
.faq-intro { min-width: 0; }
.faq-list {
  position: relative;
  display: grid;
  gap: 10px;
  align-self: start;
  padding: 14px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 100% 0, rgba(255,105,10,.1), transparent 34%),
    linear-gradient(145deg, rgba(25,24,23,.82), rgba(8,8,9,.92));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.085), 0 24px 62px rgba(0,0,0,.2);
  counter-reset: faq;
}
.faq-list::before {
  content: "FAQ / 常见问题";
  min-height: 30px;
  display: flex;
  align-items: center;
  padding: 0 7px;
  color: rgba(255,181,75,.72);
  font: 800 10px/1 monospace;
  letter-spacing: .16em;
}
.faq-item {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: rgba(255,255,255,.025);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.065);
  counter-increment: faq;
  transition-property: transform, background-color, box-shadow;
  transition-duration: 320ms;
  transition-timing-function: cubic-bezier(.2,0,0,1);
}
.faq-item:hover { background: rgba(255,255,255,.042); box-shadow: inset 0 0 0 1px rgba(255,173,56,.17), 0 10px 28px rgba(0,0,0,.16); }
.faq-item.is-open {
  background: linear-gradient(110deg, rgba(255,112,15,.105), rgba(255,255,255,.025) 58%);
  box-shadow: inset 3px 0 0 #ff7a12, inset 0 0 0 1px rgba(255,166,53,.16), 0 14px 34px rgba(0,0,0,.2);
}
.faq-question { width: 100%; min-height: 74px; display: grid; grid-template-columns: 36px minmax(0, 1fr) 42px; align-items: center; gap: 14px; padding: 0 14px 0 18px; border: 0; color: #fff; background: transparent; cursor: pointer; font: inherit; font-size: 17px; font-weight: 800; text-align: left; text-wrap: pretty; appearance: none; }
.faq-question::before { content: "0" counter(faq); color: rgba(255,181,75,.66); font: 800 11px/1 monospace; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.faq-question:focus-visible { outline: 2px solid rgba(255,145,34,.78); outline-offset: -3px; border-radius: 14px; }
.faq-toggle-icon { position: relative; width: 42px; height: 42px; display: inline-grid; place-items: center; border-radius: 13px; color: var(--orange); background: rgba(255,105,8,.08); box-shadow: inset 0 0 0 1px rgba(255,125,20,.14); font-size: 22px; scale: 1; transition-property: scale, background-color, box-shadow; transition-duration: 150ms, 280ms, 280ms; transition-timing-function: ease-out, cubic-bezier(.2,0,0,1), cubic-bezier(.2,0,0,1); }
.faq-question:hover .faq-toggle-icon { background: rgba(255,105,8,.14); box-shadow: inset 0 0 0 1px rgba(255,143,38,.25), 0 0 22px rgba(255,91,0,.1); }
.faq-question:active .faq-toggle-icon { scale: .96; }
.faq-icon { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; scale: .25; filter: blur(4px); transition-property: opacity, scale, filter; transition-duration: 300ms; transition-timing-function: cubic-bezier(.2,0,0,1); }
.faq-icon-plus { opacity: 1; scale: 1; filter: blur(0); }
.faq-item.is-open .faq-icon-plus { opacity: 0; scale: .25; filter: blur(4px); }
.faq-item.is-open .faq-icon-close { opacity: 1; scale: 1; filter: blur(0); }
.faq-answer { display: grid; grid-template-rows: 0fr; opacity: 0; translate: 0 -6px; pointer-events: none; transition-property: grid-template-rows, opacity, translate; transition-duration: 340ms, 160ms, 220ms; transition-timing-function: cubic-bezier(.2,0,0,1), ease-in, cubic-bezier(.2,0,0,1); }
.faq-item.is-open > .faq-answer { grid-template-rows: 1fr; opacity: 1; translate: 0 0; pointer-events: auto; transition-duration: 340ms, 240ms, 300ms; transition-timing-function: cubic-bezier(.2,0,0,1); }
.faq-answer-inner { min-height: 0; overflow: hidden; }
.faq-answer p { max-width: 660px; margin: 0; padding: 0 66px 22px 68px; color: #aaa49d; font-size: 14px; line-height: 1.8; text-wrap: pretty; }

.final-cta { width: min(820px, calc(100% - 48px)); min-height: 400px; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 24px auto 54px; padding: 36px 20px; border-radius: 31px; text-align: center; background: #080604; box-shadow: var(--shadow-dark); }
.final-cta::before { content: ""; position: absolute; inset: 0; opacity: .72; background: linear-gradient(180deg, rgba(4,4,4,.86), rgba(5,3,2,.24) 48%, rgba(0,0,0,.92)), url("assets/course-media/horizon-glow.webp") center / cover no-repeat; }
.final-cta::after { content: ""; position: absolute; right: -13px; bottom: 41px; width: 187px; height: 43px; opacity: .16; background: url("assets/course-media/chevrons.webp") center / contain no-repeat; transform: rotate(-3deg); }
.final-cta > * { position: relative; z-index: 1; }
.final-cta-content { width: 100%; display: flex; flex-direction: column; align-items: center; }
.final-cta .section-kicker { font-size: 8px; letter-spacing: .14em; }
.final-cta h2 { margin: 9px 0 16px; color: #fff; font-size: clamp(24px, 2.1vw, 31px); line-height: 1; letter-spacing: -.04em; white-space: nowrap; }
.final-cta > p:not(.section-kicker) { margin: 22px 0 28px; color: #aaa7a1; }
.final-cta .button { min-height: 42px; padding-inline: 16px; border-radius: 10px; font-size: 11px; }
.final-course-lockup { width: min(294px, 54vw); margin-bottom: 15px; outline: none; opacity: .92; }
.final-chevrons { position: absolute !important; left: -7px; top: 55px; width: 174px; opacity: .1; outline: none; transform: rotate(180deg); }
.final-ring { position: absolute; z-index: 0; width: 347px; height: 347px; border-radius: 50%; border: 1px solid rgba(255,133,0,.24); box-shadow: 0 0 48px rgba(255,95,0,.13), inset 0 0 48px rgba(255,95,0,.07); animation: ringPulse 5s ease-in-out infinite; }
@keyframes ringPulse { 50% { transform: scale(1.08); opacity: .65; } }

.faq-qr-card {
  width: min(100%, 420px);
  min-height: 410px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 28px auto 0;
  padding: 35px 18px 24px;
  border-radius: 36px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 40%, rgba(255,129,16,.19), transparent 45%),
    radial-gradient(circle at 85% 8%, rgba(255,185,53,.1), transparent 28%),
    linear-gradient(145deg, rgba(27,24,22,.98), rgba(8,8,9,.98));
  box-shadow: inset 0 0 0 1px rgba(255,180,70,.16), 0 24px 60px rgba(0,0,0,.28);
  isolation: isolate;
}
.faq-qr-card::before {
  content: "";
  position: absolute;
  inset: 16% 12%;
  z-index: -1;
  border-radius: 50%;
  background: rgba(255,99,7,.13);
  filter: blur(42px);
  animation: qrAura 4.6s ease-in-out infinite;
}
.qr-code-shell { width: 252px; height: 252px; position: relative; z-index: 3; display: grid; place-items: center; padding: 13px; border-radius: 30px; background: rgba(255,139,22,.09); box-shadow: 0 0 0 1px rgba(255,184,77,.22), 0 0 36px rgba(255,94,5,.17); }
.qr-code-shell::before, .qr-code-shell::after { content: ""; position: absolute; pointer-events: none; border-radius: 36px; }
.qr-code-shell::before { inset: -10px; border: 1px solid rgba(255,159,42,.24); animation: qrFramePulse 3s ease-out infinite; }
.qr-code-shell::after { inset: -21px; border: 1px dashed rgba(255,194,105,.12); animation: qrDashSpin 18s linear infinite; }
.qr-code-frame { width: 100%; height: 100%; position: relative; z-index: 2; display: grid; place-items: center; overflow: hidden; padding: 9px; border-radius: 18px; background: #fff; box-shadow: 0 18px 48px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.8); }
.qr-code-frame img { width: 100%; height: 100%; display: block; object-fit: contain; outline: none; background: #fff; }
.qr-orbit { position: absolute; left: 50%; top: 46%; z-index: 1; border-radius: 50%; border: 1px solid rgba(255,145,30,.14); pointer-events: none; transform: translate(-50%, -50%); }
.qr-orbit::after { content: ""; position: absolute; left: 50%; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: #ffb43e; box-shadow: 0 0 8px #ff8a0d, 0 0 18px rgba(255,97,6,.8); }
.qr-orbit-outer { width: 340px; height: 340px; animation: qrOrbitSpin 13s linear infinite; }
.qr-orbit-inner { width: 300px; height: 300px; border-style: dashed; opacity: .7; animation: qrOrbitSpinReverse 17s linear infinite; }
.qr-particles { position: absolute; inset: 12px; z-index: 2; pointer-events: none; }
.qr-particles i { width: var(--size); height: var(--size); position: absolute; left: var(--x); top: var(--y); border-radius: 50%; opacity: .2; background: #ffd995; box-shadow: 0 0 7px rgba(255,199,112,.95), 0 0 17px rgba(255,97,7,.62); animation: qrParticleTwinkle var(--duration) ease-in-out var(--delay) infinite; }
.qr-particles i:nth-child(3n) { border-radius: 1px; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); background: #fff1d5; }
.qr-particles i:nth-child(4n + 2) { background: #ff8b12; }
.qr-scan-label { position: relative; z-index: 3; display: flex; align-items: center; gap: 8px; margin: 24px 0 0; color: #fff0d8; font-size: 13px; font-weight: 900; letter-spacing: .02em; }
.qr-scan-label i { width: 7px; height: 7px; border-radius: 50%; background: #ff9b20; box-shadow: 0 0 0 5px rgba(255,142,26,.11), 0 0 16px rgba(255,104,8,.8); animation: qrStatusPulse 1.8s ease-in-out infinite; }
@keyframes qrAura { 50% { opacity: .62; transform: scale(1.14); } }
@keyframes qrFramePulse { 0% { opacity: .7; transform: scale(.98); } 70%, 100% { opacity: 0; transform: scale(1.09); } }
@keyframes qrDashSpin { to { transform: rotate(360deg); } }
@keyframes qrOrbitSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes qrOrbitSpinReverse { to { transform: translate(-50%, -50%) rotate(-360deg); } }
@keyframes qrParticleTwinkle { 0%, 100% { opacity: .18; transform: scale(.55) translateY(0); filter: blur(.2px); } 48% { opacity: 1; transform: scale(1.25) translateY(-5px); filter: blur(0); } }
@keyframes qrStatusPulse { 50% { opacity: .55; transform: scale(.7); } }

.mobile-cta { display: none; }

.reveal {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(5px);
  animation: enter .65s cubic-bezier(.2,0,0,1) forwards;
  animation-delay: var(--delay, 0ms);
}
@keyframes enter { to { opacity: 1; transform: translateY(0); filter: blur(0); } }
.reveal-on-scroll { opacity: 0; transform: translateY(28px); filter: blur(5px); transition-property: opacity, transform, filter; transition-duration: 650ms; transition-timing-function: cubic-bezier(.2,0,0,1); }
.reveal-on-scroll.visible { opacity: 1; transform: translateY(0); filter: blur(0); }
.team-showcase .reveal-on-scroll:nth-child(2) { transition-delay: 70ms; }
.team-showcase .reveal-on-scroll:nth-child(3) { transition-delay: 140ms; }
.team-showcase .reveal-on-scroll:nth-child(4) { transition-delay: 210ms; }
.teacher-grid .reveal-on-scroll:nth-child(2) { transition-delay: 70ms; }
.teacher-grid .reveal-on-scroll:nth-child(3) { transition-delay: 140ms; }

@media (max-width: 1180px) {
  .site-header nav { display: none; }
  .view-switch { margin-right: auto; }
}

@media (max-width: 1050px) {
  .site-header nav { gap: 18px; }
  .notes-hero { grid-template-columns: 1fr .85fr; gap: 38px; }
  .notes-hero h1 { font-size: clamp(50px, 6.6vw, 70px); }
  .access-grid { grid-template-columns: 1fr 1fr; }
  .access-card-course { grid-column: 1 / -1; }
  .access-card-course .course-feature { max-width: 620px; }
  .free-route-heading { grid-template-columns: 1fr; gap: 14px; }
  .free-route-heading > p:last-child { margin: 0; text-align: left; }
  .lesson-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .free-course-bridge { grid-template-columns: 1fr .76fr; gap: 38px; padding: 58px; }
  .hero { --hero-height-floor: 960px; min-height: 960px; }
  .hero-visual { inset: 0; width: 100%; border-radius: 0; }
  .hero-copy { width: 55%; }
  .hero-support { width: 100%; }
  .road-sign { display: inline-flex; }
  .pain-section { grid-template-columns: 1fr; }
  .pain-intro, body[data-experiment="a2"] .pain-intro { width: 100%; max-width: none; min-height: 0; position: relative; }
  body[data-experiment="a2"] .pain-intro h2 { max-width: 620px; }
  .pain-map { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pain-map > .value-card { min-height: 300px; }
  .three-pillars { grid-template-columns: 1fr 1fr; }
  .pillar-community { grid-column: 1 / -1; min-height: 280px; }
  .career-services-figure { grid-template-columns: 1.08fr .92fr; gap: 10px; padding: 10px; }
  .career-vision { min-height: 500px; }
  .career-vision-copy { inset: 26px 24px auto; }
  .project-section { width: calc(100% - 36px); }
  .project-hero { grid-template-columns: 1fr; gap: 38px; }
  .project-proof-card { min-height: 290px; }
  .project-flow { grid-template-columns: repeat(6, minmax(160px, 1fr)); overflow-x: auto; scrollbar-width: none; }
  .project-chapter,
  .project-chapter:nth-child(even),
  .project-chapter.project-chapter-paired,
  .project-chapter.project-chapter-paired:nth-child(even) { grid-template-columns: minmax(300px, .9fr) minmax(0, 1.1fr); }
  .chapter-copy { padding: 48px 38px; }
  .proof-wall { column-count: 2; }
  .ai-section { grid-template-columns: 1fr; }
  .ai-section::before, .pricing-section::before { inset: 5% -2%; }
  .resume-machine { transform: none; }
  .bonus-grid { grid-template-columns: 1fr; }
  .bonus-visual { height: 420px; }
  .audience-layout { grid-template-columns: minmax(300px, .76fr) minmax(0, 1.24fr); gap: 18px; }
  .audience-visual, .audience-poster img { min-height: 620px; }
  .timing-reasons { grid-template-columns: repeat(2, 1fr); }
  .target-jobs { grid-template-columns: 1fr 1fr; }
  .target-jobs .button { grid-column: 1 / -1; }
  .compare-stage { grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; }
  .compare-table { min-width: 840px; }
  .value-grid { grid-template-columns: repeat(2, 1fr); }
  .risk-free { grid-template-columns: 1fr 1fr; }
  .risk-free .button { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .pricing-heading { display: block; }
  .value-path { justify-content: flex-start; }
  .pain-intro {
    grid-template-columns: 1fr;
    grid-template-areas: "kicker" "title" "summary" "outline";
    row-gap: 0;
  }
  .outline-entry { margin-top: 32px; }
  .career-services-figure { grid-template-columns: 1fr; }
  .career-vision { min-height: 560px; }
  .project-chapter.project-chapter-paired {
    height: 640px;
    grid-column: 1 / -1;
    grid-template-columns: minmax(280px, .9fr) minmax(0, 1.1fr);
    grid-template-rows: 1fr;
  }
  .project-chapter.project-chapter-paired:nth-child(even) { grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr); }
  .project-chapter.project-chapter-paired .chapter-copy { padding: 48px 38px; }
  .project-chapter.project-chapter-paired:nth-child(even) .chapter-copy { order: 2; }
  .project-chapter.project-chapter-paired:nth-child(even) .chapter-visual { order: 1; }
}

@media (max-width: 760px) {
  :root { --free-section-title-size: clamp(29px, 9vw, 41px); }
  body { padding-bottom: 76px; }
  .site-header { top: 10px; width: calc(100% - 20px); height: 60px; padding: 6px; border-radius: 18px; }
  .brand { display: none; }
  .site-header nav { display: none; }
  .view-switch { width: 100%; margin: 0; }
  .view-tab { justify-content: center; min-height: 46px; padding-inline: 8px; }
  .view-tab span { font-size: 12px; }
  .header-cta { display: none; }
  .course-nudge { top: calc(100% + 12px); left: 0; width: 100%; min-height: 70px; grid-template-columns: 44px 1fr auto; gap: 9px; padding: 9px; border-radius: 22px; }
  .course-nudge::before { left: 73%; top: -8px; }
  .nudge-copy b { font-size: 12px; }
  .nudge-go { min-height: 38px; padding-inline: 10px; font-size: 9px; }
  .notes-hero { min-height: auto; grid-template-columns: 1fr; gap: 46px; padding: 164px 20px 85px; mask-image: none; }
  .notes-hero h1 { margin-top: 18px; font-size: clamp(32px, 10vw, 44px); white-space: nowrap; }
  .notes-subtitle { margin-top: 20px; font-size: 14px; line-height: 1.75; }
  .notes-meta { gap: 8px; margin-top: 24px; }
  .notes-meta span { min-height: 44px; gap: 6px; padding-inline: 13px; border-radius: 14px; }
  .notes-meta b { font-size: 19px; }
  .route-console { border-radius: 23px; transform: none; }
  .console-body { padding: 20px; }
  .console-body li { min-height: 53px; }
  .free-section { width: calc(100% - 32px); padding: 90px 0; }
  .free-heading > p:last-child { font-size: 14px; line-height: 1.75; }
  .access-grid, .lesson-grid { grid-template-columns: 1fr; margin-top: 28px; }
  .access-card-course { grid-column: auto; }
  .access-card { min-height: 500px; padding: 23px; border-radius: 27px; }
  .access-copy p { min-height: auto; }
  .bili-profile { margin-top: 25px; }
  .group-qr { width: min(240px, 84%); }
  .access-card-course .course-feature { max-width: none; }
  .free-route { padding-top: 56px; }
  .free-route-heading h2 { font-size: clamp(30px, 9.5vw, 42px); white-space: nowrap; }
  .free-route-heading > p:last-child { max-width: 290px; font-size: 12px; }
  .lesson-card { min-height: 232px; padding: 20px; border-radius: 20px; }
  .lesson-top > span { font-size: 29px; }
  .lesson-type { margin-top: 18px; }
  .lesson-card h3 { font-size: 23px; }
  .resource-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .resource-actions-single { grid-template-columns: 1fr; }
  .resource-actions a { min-height: 44px; padding-inline: 12px; }
  .version-note { grid-template-columns: 1fr; gap: 6px; padding: 15px 17px; }
  .free-next-section { padding: 72px 0 30px; }
  .free-next-heading { width: calc(100% - 32px); gap: 14px; margin-bottom: 24px; }
  .free-next-tag { min-height: 30px; padding-inline: 11px; font-size: 10px; }
  .free-course-bridge { width: calc(100% - 24px); min-height: auto; grid-template-columns: 1fr; gap: 48px; padding: 55px 25px 34px; border-radius: 34px; }
  .bridge-actions { align-items: flex-start; flex-direction: column; gap: 12px; }
  .bridge-actions .button { width: 100%; }
  .bridge-actions > small { max-width: none; }
  .bridge-proof-card { padding: 15px; border-radius: 26px; }
  .bridge-proof-shot { border-radius: 16px; }
  .hero { min-height: 0; flex-direction: column; padding: 152px 18px 230px; align-items: flex-start; background: radial-gradient(circle at 14% 31%, rgba(255,111,0,.14), transparent 20rem), radial-gradient(circle at 100% 16%, rgba(255,172,15,.08), transparent 16rem), #030303; }
  .hero > .hero-visual { display: none; }
  .road-sign { display: none; }
  .hero-copy { width: 100%; margin: 0; }
  .hero h1 { max-width: 100%; margin-top: 18px; font-size: clamp(58px, 16.6vw, 66px); }
  .hero-title-lockup { width: 100%; margin: 2px 0 -8px; }
  .hero-title-lockup::before { inset: 18% 0 14%; filter: blur(18px); }
  .hero-mobile-visual {
    width: min(100%, 600px);
    aspect-ratio: 1.18;
    position: relative;
    display: block;
    overflow: hidden;
    margin: 20px auto 0;
    border-radius: 26px;
    background: #120705;
    box-shadow: 0 0 0 1px rgba(255,184,72,.16), 0 24px 60px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.07);
  }
  .hero-mobile-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0,0,0,.04) 48%, rgba(7,2,0,.72) 84%, rgba(6,2,0,.92));
  }
  .hero-mobile-visual img {
    width: 132%;
    max-width: none;
    height: 132%;
    position: absolute;
    left: -2%;
    top: -25%;
    object-fit: cover;
    object-position: left center;
    outline: none;
    filter: saturate(1.08) contrast(1.05);
  }
  .hero-mobile-visual figcaption {
    position: absolute;
    z-index: 1;
    left: 14px;
    right: 14px;
    bottom: 13px;
    display: flex;
    align-items: center;
    gap: 7px;
    color: #ded3c4;
    font-size: 9px;
    font-weight: 850;
    white-space: nowrap;
  }
  .hero-mobile-visual figcaption i { width: 3px; height: 3px; flex: 0 0 auto; border-radius: 50%; background: #ff8b15; box-shadow: 0 0 8px rgba(255,126,10,.8); }
  .hero-mobile-visual figcaption b { margin-left: auto; color: #251305; padding: 6px 8px; border-radius: 8px; background: linear-gradient(110deg, #ffd85b, #ff8414); font-size: 9px; }
  .hero-slogan { margin-top: 24px; font-size: 17px; }
  .hero-description { display: grid; align-items: start; gap: 9px; margin-top: 22px; padding: 11px 13px 13px; border-radius: 15px; font-size: 13px; line-height: 1.7; }
  .hero-description-label { width: max-content; min-height: 29px; padding-inline: 10px; border-radius: 9px; font-size: 10px; }
  .button { min-height: 50px; padding-inline: 17px; font-size: 13px; }
  .hero-support { width: 100%; position: static; margin-top: 34px; }
  .hero-support .hero-chips { flex-wrap: wrap; margin: 0 0 12px; }
  .countdown { width: 100%; grid-template-columns: 1fr; gap: 8px; margin-top: 0; padding: 8px; border-radius: 22px; }
  .countdown-head { min-height: 62px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; padding: 12px 13px; border-radius: 14px; }
  .countdown-kicker { font-size: 9px; white-space: nowrap; }
  .countdown-label { justify-self: end; font-size: 11px; text-align: right; }
  .countdown-unit { min-height: 76px; border-radius: 14px; }
  .countdown b { font-size: 24px; }
  .hero-proof { bottom: 28px; width: calc(100% - 28px); grid-template-columns: 1fr 1fr; padding: 9px; border-radius: 22px; }
  .hero-proof div { min-height: 72px; padding: 8px; border-bottom: 1px solid rgba(255,255,255,.07); }
  .hero-proof div:nth-child(2) { border-right: 0; }
  .hero-proof div:nth-child(3), .hero-proof div:nth-child(4) { border-bottom: 0; }
  .hero-proof strong { font-size: 30px; }
  .course-page > .signal-strip { margin-top: 56px; }
  .signal-track { font-size: 12px; }
  .signal-track .ticker-group { padding-block: 12px; }
  .section { width: calc(100% - 32px); padding: 64px 0; }
  .section-heading h2, .project-copy h2, .ai-copy h2 { font-size: clamp(38px, 12vw, 54px); }
  .pricing-heading h2 { font-size: clamp(28.5px, 9vw, 40.5px); }
  .step-tag { min-height: 26px; padding-inline: 10px; border-radius: 8px; font-size: 9px; }
  .section-heading > .step-tag, .project-hero-copy > .step-tag { margin-bottom: 12px; }
  .section-heading > p:last-child, .project-copy > p, .ai-copy > p { margin-top: 18px; font-size: 14px; line-height: 1.75; }
  .project-copy > p { font-size: 16px; }
  .pain-section { gap: 12px; }
  .pain-intro { padding: 0; border-radius: 0; }
  .pain-intro h2 { font-size: clamp(34px, 10vw, 42px); }
  .pain-map { grid-template-columns: 1fr; gap: 9px; margin-top: 24px; padding: 9px; border-radius: 25px; }
  .pain-map > .value-card { min-height: 0; padding: 21px 17px 20px; border-radius: 17px; }
  .value-card-head small { min-height: 25px; font-size: 9px; }
  .value-no { width: 42px; height: 42px; border-radius: 13px; font-size: 17px; }
  .value-copy { margin-top: 18px; }
  .value-copy h3 { font-size: 19px; }
  .value-copy p { font-size: 12px; line-height: 1.7; }
  .three-pillars { grid-template-columns: 1fr; gap: 12px; margin-top: 34px; }
  .pillar, .pillar-community { grid-column: auto; min-height: 0; padding: 27px; border-radius: 25px; }
  .pillar-no { right: 24px; top: 20px; font-size: 54px; }
  .pillar h3 { margin-top: 21px; font-size: 34px; }
  .pillar ul { margin-top: 28px; }
  .pillar-project ul { display: flex; }
  .pillar-project li { padding-inline: 11px; font-size: 12px; }
  .intro-section { padding-bottom: 32px; }
  .benefits-section { padding-top: 32px; }
  .benefits-heading { margin-bottom: 34px; }
  .course-pack { border-radius: 27px; }
  .pack-list { grid-template-columns: 1fr; }
  .pack-list article, .pack-list article:nth-child(3n), .pack-list article:nth-last-child(-n+3) { min-height: 158px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.07); }
  .pack-list article:last-child { border-bottom: 0; }
  .lifetime-line { align-items: flex-start; flex-direction: column; gap: 5px; padding: 20px; }
  .lifetime-line a { margin: 8px 0 0; width: 100%; text-align: center; }
  .outline-entry { margin-top: 34px; }
  .curriculum-dialog { width: calc(100% - 16px); max-height: calc(100dvh - 16px); }
  .curriculum-dialog-shell { max-height: calc(100dvh - 16px); border-radius: 24px; }
  .curriculum-dialog-head { gap: 18px; padding: 24px 20px 18px; }
  .curriculum-dialog-head h2 { font-size: 29px; }
  .curriculum-dialog-head > div > p:last-child { font-size: 12px; }
  .curriculum-dialog-close { width: 44px; height: 44px; border-radius: 14px; }
  .curriculum-dialog-meta { margin: 0 20px; }
  .curriculum-dialog-meta span { min-height: 54px; justify-content: center; padding: 10px 7px; font-size: 9px; text-align: center; }
  .curriculum-dialog-meta b { font-size: 18px; }
  .curriculum-compact-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; padding: 0 20px 24px; }
  .curriculum-compact-list > li { min-height: 0; flex: 0 0 auto; padding: 15px; border-radius: 16px; }
  .curriculum-compact-list > .is-career { grid-column: auto; }
  .career-services-figure { grid-template-columns: 1fr; gap: 10px; margin-top: 38px; padding: 10px; border-radius: 28px; }
  .career-services-panel, .career-vision { border-radius: 19px; }
  .career-services-panel { min-height: 0; padding: 22px; }
  .career-services-head { align-items: flex-start; }
  .career-service-grid { grid-template-columns: 1fr; }
  .career-service-card { min-height: 122px; }
  .career-vision { min-height: 500px; }
  .career-vision-copy { inset: 25px 22px auto; }
  .career-vision-copy h3 { font-size: 15px; }
  .career-destination { right: 18px; bottom: 18px; }
  .project-section { width: calc(100% - 24px); padding-top: 82px; }
  .project-section::before { inset: 24px 0 0; border-radius: 38px; }
  .project-hero { gap: 30px; padding: 0 12px; }
  .project-title-line { gap: 13px; margin-top: 14px; }
  .project-title-line > h2.fit-heading { width: 100%; max-width: 100%; contain: inline-size; flex-basis: 100%; }
  .project-hero h2 { font-size: clamp(38px, 11.7vw, 52px); line-height: 1.08; }
  .project-scope-tags { width: 100%; max-width: 100%; gap: 6px; }
  .project-scope-tags span { min-height: 26px; padding-inline: 9px; font-size: 10px; }
  .project-hero-copy > p:last-child { margin-top: 20px; font-size: 14px; line-height: 1.75; }
  .project-proof-card { min-height: 286px; border-radius: 26px; }
  .project-proof-card > span { padding: 28px 24px 7px; }
  .project-proof-card > strong { padding: 0 24px 24px; font-size: 29px; }
  .project-proof-card > div { min-height: 88px; padding: 14px 11px; }
  .project-proof-card b { font-size: 24px; }
  .project-proof-card small { font-size: 9px; }
  .project-flow { display: flex; gap: 0; margin-top: 34px; padding: 18px 0 8px; border-radius: 0; scroll-snap-type: x proximity; }
  .project-flow a { min-width: 178px; min-height: 112px; scroll-snap-align: start; padding: 0 14px; }
  .project-flow a::before { top: 20px; }
  .project-chapters { gap: 14px; margin-top: 14px; }
  .project-chapter,
  .project-chapter:nth-child(even),
  .project-chapter.project-chapter-paired,
  .project-chapter.project-chapter-paired:nth-child(even) { height: auto; min-height: 0; grid-template-columns: 1fr; border-radius: 28px; }
  .project-chapter.project-chapter-paired { grid-template-rows: auto auto; }
  .project-chapter.project-chapter-paired .chapter-copy { padding: 76px 25px 32px; }
  .project-chapter.project-chapter-paired .chapter-visual { padding: 9px; }
  .project-chapter:nth-child(even) .chapter-copy, .project-chapter .chapter-copy { order: 1; }
  .project-chapter:nth-child(even) .chapter-visual, .project-chapter .chapter-visual { order: 2; }
  .project-chapter.project-chapter-paired:nth-child(even) .chapter-copy,
  .project-chapter.project-chapter-paired:nth-child(odd) .chapter-copy { order: 1; }
  .project-chapter.project-chapter-paired:nth-child(even) .chapter-visual,
  .project-chapter.project-chapter-paired:nth-child(odd) .chapter-visual { order: 2; box-shadow: inset 0 1px rgba(255,255,255,.055); }
  .chapter-copy { padding: 76px 25px 32px; }
  .chapter-role { margin-top: 10px; font-size: 11px; line-height: 1.55; }
  .chapter-copy h3 { margin-top: 14px; font-size: 32px; }
  .chapter-copy > p:not(.chapter-role) { margin-top: 18px; font-size: 13px; line-height: 1.78; }
  .chapter-copy ul { margin-top: 22px; }
  .chapter-visual { min-height: 0; padding: 9px; box-shadow: inset 0 1px rgba(255,255,255,.055); }
  .chapter-visual figcaption { min-height: 70px; grid-template-columns: 1fr; gap: 4px; padding: 9px 11px 14px; }
  .chapter-visual figcaption b { font-size: 16px; }
  .chapter-visual figcaption small { display: none; }
  .chapter-visual > a { border-radius: 18px; }
  .chapter-visual img { height: auto; }
  .chapter-certificate { min-height: 360px; }
  .chapter-certificate img { padding: 12px; }
  .project-chapter-final { height: auto; min-height: 0; }
  .community-section { width: calc(100% - 24px); }
  .community-figure { margin-top: 38px; border-radius: 18px; overflow-x: auto; }
  .community-figure img { width: 920px; max-width: none; }
  .team-showcase { grid-template-columns: 1fr; }
  .team-core-group { grid-column: auto; padding: 20px 14px 22px; }
  .team-panel { padding: 18px; border-radius: 23px; }
  .team-business-mentors > img { width: 94%; }
  .team-alumni { grid-column: auto; }
  .team-alumni .panel-title { position: sticky; left: 0; }
  .alumni-strip { min-width: 960px; }
  .team-core-heading { align-items: flex-end; margin: 0 6px 18px; padding-bottom: 18px; }
  .team-core-heading-copy { align-items: flex-start; flex-direction: column; gap: 8px; }
  .team-core-heading-value b { font-size: 16px; }
  .teacher-grid {
    grid-template-columns: repeat(3, minmax(285px, 1fr));
    gap: 10px;
    overflow-x: auto;
    padding: 1px 1px 8px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
  }
  .teacher-profile { min-height: 300px; padding: 20px; scroll-snap-align: start; }
  .teacher-portrait { width: 76px; }
  .teacher-profile .teacher-portrait { width: 84px; }
  .teacher-info { margin-top: 12px; }
  .teacher-info h3 { font-size: 24px; }
  .teacher-info p { min-height: 42px; margin-top: 13px; font-size: 11px; }
  .panel-title b { font-size: 16px; }
  .proof-section { width: calc(100% - 24px); }
  .proof-toolbar { align-items: flex-end; margin-top: 34px; }
  .proof-toolbar p { align-items: flex-start; flex-direction: column; gap: 4px; }
  .proof-toolbar strong { font-size: 30px; }
  .proof-mode span { display: none; }
  .proof-frame { margin-top: 14px; border-radius: 24px; }
  .proof-viewport { height: min(68vh, 620px); min-height: 480px; padding: 10px 9px 86px 10px; }
  .proof-wall { column-count: 1; column-gap: 10px; }
  .proof-card { border-radius: 20px; }
  .proof-card figcaption { padding: 14px 16px 16px; }
  .proof-scroll-cue { bottom: 14px; width: max-content; max-width: calc(100% - 28px); min-height: 46px; padding-left: 14px; font-size: 11px; }
  .proof-lightbox { width: calc(100% - 20px); max-height: calc(100dvh - 20px); border-radius: 20px; }
  .proof-lightbox figure { max-height: calc(100dvh - 20px); }
  .ai-section { width: calc(100% - 32px); gap: 45px; }
  .ai-section::before, .pricing-section::before { inset: 3% -10px; border-radius: 36px; }
  .ai-steps { grid-template-columns: 1fr; }
  .machine-body { min-height: 650px; grid-template-columns: 1fr; }
  .resume-form { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.07); }
  .resume-form button { margin-top: 10px; }
  .resume-preview { padding: 28px 22px; }
  .resume-page { width: 225px; }
  .bonus-heading { min-height: 0; grid-template-columns: 1fr 84px; gap: 10px; }
  .bonus-heading h2 { font-size: clamp(36px, 11.5vw, 50px); }
  .bonus-gift-mark { width: 88px; }
  .bonus-grid { gap: 12px; margin-top: 30px; }
  .bonus-card { border-radius: 23px; }
  .bonus-visual { height: auto; aspect-ratio: 1.42; margin: 9px 9px 0; border-radius: 17px; }
  .bonus-resume-visual { padding: 8px; }
  .bonus-resume-visual img { border-radius: 7px; }
  .bonus-growth-visual { gap: 8px; padding: 10px; }
  .bonus-growth-cover, .bonus-growth-notes { width: 100%; }
  .bonus-growth-cover { border-radius: 8px; }
  .bonus-growth-notes { border-radius: 7px; }
  .bonus-card-copy { padding: 22px 18px 24px; }
  .bonus-card-title { align-items: flex-start; flex-direction: column; gap: 10px; }
  .bonus-card-title h3 { font-size: 24px; }
  .bonus-feature-list { grid-template-columns: 1fr; gap: 7px; margin-top: 16px; }
  .bonus-feature-list li { min-height: 54px; }
  .bonus-feature-list span { white-space: normal; }
  .audience-layout { grid-template-columns: 1fr; gap: 18px; }
  .audience-visual { min-height: min(112vw, 560px); }
  .audience-poster img { min-height: min(112vw, 560px); object-position: center 38%; }
  .audience-cards { grid-template-rows: none; gap: 9px; }
  .audience-card { grid-template-columns: 54px minmax(0, 1fr); min-height: 98px; border-radius: 18px; }
  .audience-no { padding-top: 20px; font-size: 25px; }
  .audience-no::after { top: 16px; height: calc(100% - 32px); }
  .audience-card > div { padding: 14px 15px; }
  .audience-card h3 { font-size: 15px; }
  .audience-card p { margin-top: 6px; font-size: 10.5px; }
  .timing-section { width: calc(100% - 24px); padding: 78px 18px; border-radius: 34px; }
  .timing-title h2 { font-size: clamp(38px, 12vw, 54px); }
  .timing-reasons { grid-template-columns: 1fr; margin-top: 38px; }
  .timing-reasons article { min-height: 170px; }
  .target-jobs { grid-template-columns: 1fr; }
  .target-jobs .button { grid-column: auto; }
  .compare-section { width: calc(100% - 24px); padding-block: 24px; }
  .compare-heading { align-items: flex-start; flex-direction: column; gap: 16px; }
  .compare-heading > p { max-width: 320px; margin: 0; font-size: 12px; text-align: left; }
  .compare-scroller { margin-top: 0; padding: 0; overflow-x: auto; overflow-y: hidden; border-radius: 0; }
  .compare-stage { grid-template-columns: 1fr; gap: 14px; }
  .compare-illustration { min-height: 360px; aspect-ratio: 16 / 10; }
  .compare-illustration img { width: 100%; height: 100%; transform: none; }
  .compare-table { min-width: 0; display: block; }
  .compare-table colgroup,
  .compare-table thead { display: none; }
  .compare-table tbody { display: grid; gap: 12px; }
  .compare-table tbody tr {
    display: grid;
    overflow: hidden;
    border-radius: 20px;
    background: #090a09;
    box-shadow: 0 0 0 1px rgba(255,255,255,.055), 0 12px 30px rgba(0,0,0,.14);
  }
  .compare-table th,
  .compare-table td {
    height: auto;
    min-height: 62px;
    padding: 12px 14px;
    border: 0;
    border-radius: 0;
    font-size: 12px;
  }
  .compare-table .compare-axis { min-height: 68px; display: flex; align-items: center; order: 0; }
  .compare-table td {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-content: center;
    text-align: left;
  }
  .compare-table td::before {
    content: attr(data-label);
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: center;
    color: #777873;
    font-size: 10px;
    font-weight: 800;
  }
  .compare-table td > strong { grid-column: 2; font-size: 13px; }
  .compare-table td > small { grid-column: 2; }
  .compare-table td.featured { order: 1; background-clip: border-box; }
  .compare-table td.featured::before { color: rgba(112,60,8,.65); }
  .compare-table td.self { order: 2; background-clip: border-box; }
  .compare-table td.offline { order: 3; background-clip: border-box; }
  .compare-table tbody tr:first-child .featured strong { margin: 0; padding: 5px 10px; font-size: 16px; }
  .compare-last-row > * { border-radius: 0; }
  .value-grid { grid-template-columns: 1fr 1fr; }
  .value-grid article { min-height: 94px; }
  .value-grid b { font-size: 16px; }
  .risk-free { grid-template-columns: 1fr; }
  .risk-free .button { grid-column: auto; }
  .total-value { min-height: 0; gap: 18px; padding: 22px 18px 20px; border-radius: 24px; }
  .value-showdown-head { align-items: flex-start; }
  .value-showdown-tag { padding-top: 2px; font-size: 8px; }
  .value-showdown-main { grid-template-columns: 1fr; gap: 13px; }
  .value-flow { display: none; }
  .market-total, .final-price { text-align: center; }
  .market-total-price { margin-inline: auto; }
  .market-total-price strong { font-size: clamp(48px, 16vw, 68px); }
  .saving-burst { min-height: 92px; }
  .final-price { padding: 16px 0 0; border-top: 1px solid rgba(255,255,255,.09); border-left: 0; }
  .final-price > div { justify-content: center; }
  .final-price > div strong { font-size: clamp(64px, 20vw, 84px); }
  .value-ratio { align-items: flex-start; flex-direction: column; gap: 9px; }
  .service-promise-heading { display: block; }
  body[data-experiment="a2"] .course-page .service-promise-heading h2 { font-size: clamp(32px, 8.5vw, 36px); }
  .service-promise-board {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 38px;
    padding: 8px;
    border-radius: 28px;
  }
  .service-promise-list { padding: 4px 16px; border-radius: 20px; }
  .service-promise-item { min-height: 122px; grid-template-columns: 42px minmax(0, 1fr); gap: 15px; padding: 19px 0; }
  .service-promise-item:hover { transform: none; }
  .service-promise-item + .service-promise-item::before { left: 57px; }
  .service-promise-no { width: 40px; height: 40px; border-radius: 12px; font-size: 11px; }
  .service-promise-item h3,
  .service-promise-refund h3 { font-size: 21px; }
  .service-promise-item p,
  .service-promise-refund p { font-size: 13px; }
  .service-promise-refund { min-height: 356px; order: -1; gap: 12px; padding: 21px; border-radius: 20px; }
  .service-promise-refund:hover { transform: none; }
  .service-promise-refund-hero { grid-template-columns: minmax(0, 1.15fr) minmax(104px, .85fr); }
  .service-promise-time strong { font-size: clamp(88px, 26vw, 116px); }
  .service-promise-label { font-size: 8px; }
  .service-promise-time { column-gap: 8px; }
  .service-promise-time small { gap: 6px; margin-bottom: 2px; }
  .service-promise-time small b { padding: 6px 7px 5px; border-radius: 8px; font-size: 12px; }
  .service-promise-time small em { font-size: 8px; }
  .service-promise-slogan { gap: 6px; margin-top: 10px; font-size: 8px; letter-spacing: .12em; }
  .service-promise-slogan i { width: 16px; }
  .service-promise-illustration { width: min(100%, 144px); margin-right: -9px; }
  .service-promise-illustration > span { right: 2px; bottom: 10px; }
  .service-promise-refund-copy { grid-template-columns: 31px minmax(0, 1fr); gap: 10px; padding: 16px 16px 17px; border-radius: 15px; }
  .service-promise-copy-check { width: 31px; height: 31px; font-size: 14px; }
  .service-promise-list .service-promise-item:nth-child(2),
  .service-promise-list .service-promise-item:nth-child(3),
  .service-promise-refund.reveal-on-scroll { transition-delay: 0ms; }
  .faq-section { grid-template-columns: 1fr; gap: 45px; }
  .faq-list { gap: 8px; padding: 8px; border-radius: 22px; }
  .faq-list::before { min-height: 28px; padding-inline: 6px; }
  .faq-item { border-radius: 14px; }
  .faq-question { min-height: 70px; grid-template-columns: 30px minmax(0, 1fr) 38px; gap: 10px; padding: 0 10px 0 14px; font-size: 15px; }
  .faq-toggle-icon { width: 38px; height: 38px; border-radius: 12px; font-size: 20px; }
  .faq-answer p { padding-right: 52px; padding-left: 54px; font-size: 13px; }
  .faq-qr-card { width: min(100%, 350px); min-height: 390px; margin-top: 24px; padding: 30px 12px 22px; border-radius: 30px; }
  .qr-code-shell { width: min(236px, 72vw); height: min(236px, 72vw); }
  .qr-orbit-outer { width: 310px; height: 310px; }
  .qr-orbit-inner { width: 274px; height: 274px; }
  .final-cta { width: calc(100% - 24px); min-height: 340px; margin-bottom: 20px; border-radius: 22px; padding: 26px 16px; }
  .final-cta h2 { margin-bottom: 15px; font-size: clamp(23px, 7.2vw, 30px); }
  .final-course-lockup { width: min(180px, 58vw); margin-bottom: 15px; }
  .final-chevrons { width: 120px; top: 43px; }
  .final-ring { width: 287px; height: 287px; }
  .mobile-cta { position: fixed; z-index: 60; left: 10px; right: 10px; bottom: 10px; min-height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 7px 14px 7px 16px; border: 0; border-radius: 16px; cursor: pointer; color: #f4c78a; background: rgba(20,16,12,.92); box-shadow: 0 12px 36px rgba(0,0,0,.42), inset 0 0 0 1px rgba(255,158,48,.22); backdrop-filter: blur(14px); transition-property: scale, background-color, box-shadow; transition-duration: 150ms; }
  body[data-view="notes"] .mobile-cta { color: #071114; background: linear-gradient(110deg, #c9fbff, #57e8ff); box-shadow: 0 15px 50px rgba(0,0,0,.48), inset 0 0 0 1px rgba(255,255,255,.55); }
  .mobile-cta span { font-size: 11px; }
  .mobile-cta b { font-size: 14px; }
}

/* A2 dense project gallery: show the deliverables as a compact portfolio wall. */
.project-chapters {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 16px;
  margin-top: 18px;
}

.project-chapter,
.project-chapter:nth-child(even),
.project-chapter.project-chapter-paired,
.project-chapter.project-chapter-paired:nth-child(even),
.project-chapter.project-chapter-featured,
.project-chapter-final {
  height: auto;
  min-height: 0;
  align-self: start;
  grid-column: auto;
  grid-template-columns: 1fr;
  grid-template-rows: 292px auto;
  border-radius: 28px;
  background: linear-gradient(155deg, rgba(29,25,22,.99), rgba(11,11,12,.99) 68%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 22px 54px rgba(0,0,0,.3), inset 0 1px rgba(255,255,255,.035);
  transition-property: transform, box-shadow;
  transition-duration: 180ms;
  transition-timing-function: cubic-bezier(.2,0,0,1);
}

.project-chapter:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 28px 64px rgba(0,0,0,.34);
}

.project-chapter.project-chapter-featured {
  background: linear-gradient(150deg, rgba(51,32,18,.99), rgba(12,12,13,.99) 70%);
}

.project-chapter.project-chapter-final {
  background: linear-gradient(150deg, rgba(46,28,16,.99), rgba(12,12,13,.99) 70%);
}

.project-chapter .chapter-copy,
.project-chapter:nth-child(even) .chapter-copy,
.project-chapter.project-chapter-paired:nth-child(odd) .chapter-copy,
.project-chapter.project-chapter-paired:nth-child(even) .chapter-copy {
  order: 2;
  justify-content: flex-start;
  min-height: 0;
  padding: 22px 24px 24px;
}

.project-chapter .chapter-visual,
.project-chapter:nth-child(even) .chapter-visual,
.project-chapter.project-chapter-paired:nth-child(odd) .chapter-visual,
.project-chapter.project-chapter-paired:nth-child(even) .chapter-visual {
  order: 1;
  min-height: 0;
  padding: 10px;
  background: rgba(5,5,5,.72);
  box-shadow: inset 0 -1px rgba(255,255,255,.055);
}

.project-chapter .chapter-visual figcaption {
  min-height: 58px;
  gap: 3px 12px;
  padding: 4px 7px 10px;
}

.project-chapter .chapter-visual figcaption span { font-size: 8px; }
.project-chapter .chapter-visual figcaption b { font-size: 15px; }
.project-chapter .chapter-visual figcaption small { font-size: 9px; }

.project-chapter .chapter-visual > a,
.project-chapter.project-chapter-paired .chapter-visual > a {
  border-radius: 15px;
}

.project-chapter .chapter-copy::before {
  width: 170px;
  height: 170px;
  right: -90px;
  top: -95px;
  filter: blur(66px);
  opacity: .09;
}

.project-chapter .chapter-index {
  position: absolute;
  z-index: 1;
  top: 48px;
  right: 28px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff6e3;
  box-shadow:
    inset 0 0 0 3px var(--orange),
    0 0 22px rgba(255, 107, 8, .2);
  font: 900 17px/1 monospace;
  font-variant-numeric: tabular-nums;
}

.project-chapter .chapter-role {
  align-self: flex-start;
  margin-top: 0;
  padding: 5px 9px;
  border-radius: 999px;
  color: #ffb064;
  background: rgba(255, 107, 8, .12);
  box-shadow: inset 0 0 0 1px rgba(255, 132, 45, .24);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
}
.project-chapter .chapter-copy h3,
.project-chapter.project-chapter-paired .chapter-copy h3 {
  margin-top: 12px;
  font-size: clamp(23px, 1.7vw, 28px);
  line-height: 1.12;
}

.project-chapter .chapter-copy > p:not(.chapter-role),
.project-chapter.project-chapter-paired .chapter-copy > p:not(.chapter-role) {
  margin-top: 11px;
  font-size: 12px;
  line-height: 1.6;
}

.project-chapter .chapter-copy ul,
.project-chapter.project-chapter-paired .chapter-copy ul {
  gap: 6px;
  margin-top: 14px;
}

.project-chapter .chapter-copy li {
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 9px;
}

.project-chapter .chapter-copy .button {
  min-height: 40px;
  margin-top: 14px;
  padding-inline: 15px;
  font-size: 10px;
}

.project-chapter .chapter-certificate img { padding: 14px; }

@media (max-width: 1180px) {
  .project-chapters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .project-chapter,
  .project-chapter:nth-child(even),
  .project-chapter.project-chapter-paired,
  .project-chapter.project-chapter-paired:nth-child(even),
  .project-chapter.project-chapter-featured,
  .project-chapter-final {
    height: auto;
    grid-template-columns: 1fr;
    grid-template-rows: 280px auto;
  }
}

@media (max-width: 760px) {
  .project-chapters { grid-template-columns: 1fr; gap: 12px; margin-top: 12px; }
  .project-chapter,
  .project-chapter:nth-child(even),
  .project-chapter.project-chapter-paired,
  .project-chapter.project-chapter-paired:nth-child(even),
  .project-chapter.project-chapter-featured,
  .project-chapter-final {
    height: auto;
    grid-template-columns: 1fr;
    grid-template-rows: clamp(220px, 66vw, 280px) auto;
    border-radius: 24px;
  }
  .project-chapter .chapter-copy,
  .project-chapter:nth-child(even) .chapter-copy,
  .project-chapter.project-chapter-paired:nth-child(odd) .chapter-copy,
  .project-chapter.project-chapter-paired:nth-child(even) .chapter-copy { padding: 20px 20px 22px; }
  .project-chapter .chapter-index { top: 42px; right: 20px; }
  .project-chapter .chapter-visual,
  .project-chapter:nth-child(even) .chapter-visual,
  .project-chapter.project-chapter-paired:nth-child(odd) .chapter-visual,
  .project-chapter.project-chapter-paired:nth-child(even) .chapter-visual { padding: 8px; }
  .project-chapter .chapter-visual figcaption { min-height: 55px; grid-template-columns: 1fr auto; }
  .project-chapter .chapter-visual figcaption small { display: block; }
  .project-chapter .chapter-copy h3,
  .project-chapter.project-chapter-paired .chapter-copy h3 { font-size: 25px; }
  .project-chapter .chapter-copy > p:not(.chapter-role),
  .project-chapter.project-chapter-paired .chapter-copy > p:not(.chapter-role) { font-size: 12px; }
}

/* A2 section surfaces: every major chapter reads as one distinct board. */
.course-page > .section {
  width: min(1360px, calc(100% - 48px));
  margin-block: 26px;
  margin-inline: auto;
  padding: clamp(76px, 7vw, 96px) clamp(34px, 4vw, 56px);
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
  overflow: hidden;
  border-radius: 52px;
  background:
    radial-gradient(circle at 92% 0, rgba(255,112,12,.105), transparent 31rem),
    linear-gradient(145deg, rgba(24,22,20,.98), rgba(10,10,11,.99) 58%, rgba(15,13,12,.99));
  box-shadow:
    0 0 0 1px rgba(255,255,255,.105),
    0 28px 82px rgba(0,0,0,.3),
    inset 0 1px rgba(255,255,255,.035);
  isolation: isolate;
}

/* Preserve every animation's original keyframes, duration and easing while avoiding
   offscreen animation work on this unusually long page. */
.is-motion-paused,
.is-motion-paused *,
.is-motion-paused::before,
.is-motion-paused::after,
.is-motion-paused *::before,
.is-motion-paused *::after,
body.is-page-hidden *,
body.is-page-hidden *::before,
body.is-page-hidden *::after {
  animation-play-state: paused !important;
}

.course-page > .section:nth-of-type(even) {
  background:
    radial-gradient(circle at 8% 100%, rgba(255,91,0,.085), transparent 28rem),
    linear-gradient(145deg, rgba(19,20,22,.99), rgba(9,9,10,.99) 62%, rgba(14,13,12,.99));
}

.course-page > .project-section::before,
.course-page > .ai-section::before,
.course-page > .pricing-section::before { content: none; }

.course-page > .project-section {
  padding-top: clamp(76px, 7vw, 96px);
}

.course-page > .timing-section {
  background:
    radial-gradient(circle at 92% 5%, rgba(255,173,13,.24), transparent 29%),
    linear-gradient(145deg, #202126, #0b0c0e 66%);
  box-shadow:
    0 0 0 1px rgba(255,190,82,.18),
    0 30px 86px rgba(0,0,0,.34),
    inset 0 1px rgba(255,255,255,.055);
}

.course-page > .compare-section {
  background:
    radial-gradient(circle at 84% 22%, rgba(255,174,67,.14), transparent 30rem),
    radial-gradient(circle at 9% 94%, rgba(255,91,0,.15), transparent 27rem),
    linear-gradient(145deg, #211914, #0d0e10 55%, #15100d);
  box-shadow:
    0 0 0 1px rgba(255,184,79,.16),
    0 28px 82px rgba(0,0,0,.28),
    inset 0 1px rgba(255,255,255,.05);
}

@media (max-width: 760px) {
  .course-page > .section {
    width: calc(100% - 24px);
    margin-block: 14px;
    padding: 58px 18px;
    border-radius: 32px;
  }
}

/* Large page titles outside the course sections and lead subtitles stay on one line.
   JavaScript scales each line to the width its layout actually provides. */
h1.fit-heading,
h2.fit-heading {
  --fit-heading-min: 24px;
  width: 100%;
  max-width: 100%;
  contain: inline-size;
  white-space: nowrap;
  text-wrap: nowrap;
}
h1.fit-heading br,
h2.fit-heading br { display: none; }
.notes-page h1.fit-heading.is-wrapping,
.notes-page h2.fit-heading.is-wrapping {
  contain: none;
  white-space: normal;
  text-wrap: balance;
}

.course-page .section-heading,
.course-page .section-heading.compact,
.course-page .project-hero-copy {
  width: 100%;
  max-width: none;
}

.course-page .section-kicker,
.course-page p.fit-subtitle,
.course-page .hero-description.fit-subtitle {
  max-width: 100%;
  white-space: nowrap;
  text-wrap: nowrap;
}

.course-page p.fit-subtitle,
.course-page .hero-description.fit-subtitle {
  width: 100%;
  contain: inline-size;
}

body[data-experiment="a2"] .course-page .section-heading > p.fit-subtitle {
  max-width: none;
}

/* Keep every course section title compact and visually consistent.
   Long titles wrap instead of being independently shrunk by JavaScript. */
body[data-experiment="a2"] .course-page .section h2 {
  font-size: clamp(36px, 3vw, 44px);
  line-height: 1.1;
  letter-spacing: -.045em;
  white-space: normal;
  text-wrap: balance;
}

.course-page .hero-description.fit-subtitle {
  width: 100%;
  max-width: 670px;
}

@media (max-width: 720px) {
  body[data-experiment="a2"] .course-page .section h2 {
    font-size: clamp(32px, 8.5vw, 36px);
  }

  .compare-stage { grid-template-columns: 1fr; }
  .compare-illustration { height: 300px; min-height: 300px; aspect-ratio: auto; }
  .compare-illustration img { width: 100%; height: 100%; transform: none; object-position: 50% 43%; }
  #compare .compare-scroller {
    overflow-x: auto;
    overflow-y: hidden;
  }
  .detail-compare-table { min-width: 760px; }
}

/* Mobile launch pass: keep sales copy readable and controls clear of device UI. */
@media (max-width: 760px) {
  html {
    scroll-padding-top: calc(82px + env(safe-area-inset-top));
    overflow-x: hidden;
  }

  body {
    padding-bottom: calc(82px + env(safe-area-inset-bottom));
    overflow-x: hidden;
  }

  .site-header {
    top: max(10px, env(safe-area-inset-top));
  }

  .view-switch,
  .view-tab,
  .nudge-copy,
  .hero-copy,
  .section-heading,
  .project-hero-copy {
    min-width: 0;
  }

  .view-tab span,
  .view-tab small {
    white-space: nowrap;
  }

  .course-nudge {
    grid-template-columns: 40px minmax(0, 1fr) auto;
  }

  .nudge-avatar {
    width: 40px;
    height: 40px;
  }

  .nudge-copy b {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .nudge-go {
    min-height: 44px;
  }

  .course-page p.fit-subtitle,
  .course-page .hero-description.fit-subtitle {
    contain: none;
    white-space: normal;
    text-wrap: pretty;
  }

  .course-page .hero-description.fit-subtitle {
    font-size: 14px !important;
    line-height: 1.72;
  }

  body[data-experiment="a2"] .course-page .section-heading > p.fit-subtitle,
  body[data-experiment="a2"] .course-page .project-hero-copy > p.fit-subtitle,
  body[data-experiment="a2"] .course-page .ai-copy > p.fit-subtitle,
  body[data-experiment="a2"] .course-page .final-cta > p.fit-subtitle,
  body[data-experiment="a2"] .course-page .pain-intro > p.fit-subtitle {
    font-size: 14px !important;
    line-height: 1.75;
  }

  .hero-mobile-visual figcaption,
  .hero-mobile-visual figcaption b {
    font-size: 10px;
  }

  .project-flow,
  .community-figure,
  .teacher-grid,
  .team-alumni,
  #compare .compare-scroller {
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  .project-flow a,
  .teacher-profile {
    scroll-snap-stop: always;
  }

  .mobile-cta {
    bottom: max(10px, env(safe-area-inset-bottom));
    min-height: 56px;
  }

  .proof-image-button,
  .outline-entry-button,
  .access-primary,
  .access-secondary,
  .resource-actions a,
  .lifetime-line a {
    min-height: 44px;
  }
}

@media (max-width: 360px) {
  .site-header {
    width: calc(100% - 16px);
  }

  .view-tab {
    gap: 5px;
    padding-inline: 5px;
  }

  .view-tab span {
    font-size: 11px;
  }

  .view-tab small {
    padding-inline: 4px;
    font-size: 7px;
  }

  .course-nudge {
    gap: 7px;
    padding: 8px;
  }

  .nudge-copy b {
    font-size: 11px;
  }

  .nudge-go {
    padding-inline: 9px;
  }

  .notes-hero {
    padding-inline: 16px;
  }

  .notes-meta span {
    padding-inline: 11px;
  }

  .hero {
    padding-inline: 16px;
  }

  .hero-mobile-visual figcaption {
    left: 11px;
    right: 11px;
    gap: 5px;
  }

  .hero-mobile-visual figcaption b {
    padding-inline: 6px;
  }

  .course-page > .section {
    width: calc(100% - 16px);
    padding-inline: 15px;
  }

  .mobile-cta {
    left: 8px;
    right: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal, .reveal-on-scroll { opacity: 1; transform: none; filter: none; }
  .audience-poster { animation: none !important; transform: none; }
}