/* =============================================================
   KRESKO LAB — styles.css
   Content truth: Marco Estratégico · Narrative: StoryBrand · Visual: KRESKO Design System
   Technical standard: premium static website skill (adapted to Builderall).
   ============================================================= */

/* =============================================================
   1. Fonts (self-hosted, SIL OFL — see assets/fonts/OFL-*.txt)
   ============================================================= */
@font-face {
  font-family: "Lexend";
  src: url("assets/fonts/lexend-latin-var.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Lexend";
  src: url("assets/fonts/lexend-latin-ext-var.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Caveat";
  src: url("assets/fonts/caveat-500-latin.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

/* =============================================================
   2. Tokens (KRESKO DS)
   ============================================================= */
:root {
  --kr-burgundy-900: #3A0614; --kr-burgundy-700: #590A1F; --kr-burgundy-500: #7E1A33;
  --kr-rust-700: #9C3419; --kr-rust-500: #BF4226; --kr-rust-300: #E0674A;
  --kr-amber-700: #C98200; --kr-amber-500: #F29F05; --kr-amber-300: #F8C25A; --kr-amber-100: #FCE3B0;
  --kr-cream-50: #FFFBF4; --kr-cream-100: #FFF5E5; --kr-cream-200: #F6E9D4; --kr-cream-300: #EDDCC0;
  --kr-navy-900: #0B1427; --kr-navy-700: #13203C; --kr-navy-500: #26365C; --kr-navy-300: #5B6886;
  --kr-ink: #2A231F; --kr-white: #FFFFFF;

  --fg-1: var(--kr-navy-700); --fg-2: #3E4A63; --fg-3: #5E6680;
  --fg-on-dark: #FFFFFF; --fg-on-dark-2: rgba(255, 255, 255, .8);
  --surface-page: var(--kr-cream-100);
  --border-1: rgba(19, 32, 60, .12); --border-2: rgba(19, 32, 60, .24);
  --border-on-dark: rgba(255, 255, 255, .55); --line-on-dark: rgba(255, 255, 255, .14);
  --accent: var(--kr-amber-500); --accent-hover: #FFB21F; --accent-press: var(--kr-amber-700);
  --emphasis-light: var(--kr-burgundy-700);   /* text emphasis on light grounds (amber = graphic only) */

  --font-display: "Lexend", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Lexend", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-hand: "Caveat", "Lexend", cursive;
  --fs-display: clamp(2.5rem, 1.6rem + 3.6vw, 4rem);
  --fs-h2: clamp(1.875rem, 1.3rem + 2.2vw, 2.875rem);
  --fs-h3: clamp(1.1875rem, 1.05rem + .5vw, 1.375rem);
  --fs-body-lg: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
  --fs-eyebrow: .8125rem;
  --ls-eyebrow: .32em;

  --container: 1336px;
  --gutter: clamp(16px, 4vw, 48px);
  --section-y: clamp(72px, 9vw, 128px);

  --radius-xs: 6px; --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-xl: 40px;
  --radius-arch: 999px 999px 0 0; --radius-pill: 999px;
  --curve: 48px;   /* rounded section tops: radius == overlap onto the previous section */
  --shadow-sm: 0 2px 6px rgba(19, 32, 60, .08);
  --shadow-md: 0 10px 30px rgba(19, 32, 60, .14);
  --shadow-lg: 0 20px 50px rgba(11, 20, 39, .28);

  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --dur-fast: 140ms; --dur-base: 220ms; --dur-enter: 600ms;
  --focus: var(--kr-navy-700);
}

/* =============================================================
   3. Reset & base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  font-family: var(--font-body); font-size: 1rem; line-height: 1.5; font-weight: 400;
  color: var(--fg-1); background: var(--surface-page);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
p { text-wrap: pretty; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.05; letter-spacing: -.02em; text-wrap: balance; }
b, strong { font-weight: 600; }
::selection { background: var(--accent); color: var(--kr-navy-700); }
[id] { scroll-margin-top: 24px; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.on-dark { --focus: var(--kr-amber-500); color: var(--fg-on-dark); }
@view-transition { navigation: auto; }

/* =============================================================
   4. Utilities
   ============================================================= */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.skip-link {
  position: fixed; top: -100px; left: 16px; z-index: 1000;
  padding: 10px 18px; border-radius: var(--radius-pill);
  background: var(--accent); color: var(--kr-navy-700); font-weight: 600;
  transition: top var(--dur-base) var(--ease-out);
}
.skip-link:focus { top: 16px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.icon { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* Development markers for pending content — must be zero before production */
.pending, .is-placeholder .pending { outline: 1.5px dashed var(--kr-amber-500); outline-offset: 2px; }
.is-pending { border-style: dashed !important; }

/* =============================================================
   5. Typography helpers
   ============================================================= */
.eyebrow { display: inline-block; font-size: var(--fs-eyebrow); font-weight: 400; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; }
.hl-dark { color: var(--accent); }
.hl-light { color: var(--emphasis-light); }
.rule { display: block; width: 56px; height: 3px; background: var(--accent); border-radius: 2px; }
.hand { font-family: var(--font-hand); font-weight: 500; line-height: 1.05; }

/* =============================================================
   6. Buttons (DS core/Button, elevated)
   ============================================================= */
.btn {
  --btn-h: 46px; --btn-px: 26px; --btn-fs: 1rem;
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--btn-h); padding: 0 var(--btn-px);
  border-radius: var(--radius-pill); border: 1.5px solid transparent;
  font-size: var(--btn-fs); font-weight: 600; line-height: 1.2; white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn .icon { width: 18px; height: 18px; transition: transform var(--dur-fast) var(--ease-out); }
.btn--lg { --btn-h: 56px; --btn-px: 34px; --btn-fs: 1.0625rem; }
.btn--lg .icon { width: 20px; height: 20px; }

.btn--primary {
  color: var(--kr-navy-700);
  background: linear-gradient(180deg, #F7B02A 0%, var(--kr-amber-500) 60%, #E89503 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), 0 8px 22px -10px rgba(242, 159, 5, .7);
}
.btn--primary::after {                         /* soft sheen on hover */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 600ms var(--ease-out);
}
.btn--outline { color: var(--fg-1); border-color: var(--border-2); font-weight: 500; background: transparent; }
.on-dark .btn--outline { color: #fff; border-color: var(--border-on-dark); }
.btn--dark { color: #fff; background: var(--kr-navy-700); box-shadow: 0 8px 22px -12px rgba(11, 20, 39, .8); }
.btn--link { min-height: 44px; padding: 0; border: 0; background: none; font-weight: 500; overflow: visible; text-underline-offset: 5px; }
.btn:active { transform: scale(.98); }
.btn--primary:active { background: var(--accent-press); }
.btn--link:active { transform: none; }

@media (hover: hover) {
  .btn--primary:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 14px 32px -10px rgba(242, 159, 5, .85); background: linear-gradient(180deg, #FFBE3D 0%, var(--accent-hover) 100%); }
  .btn--primary:hover::after { transform: translateX(120%); }
  .btn--outline:hover { background: rgba(19, 32, 60, .06); }
  .on-dark .btn--outline:hover { background: rgba(255, 255, 255, .1); }
  .btn--dark:hover { background: var(--kr-navy-500); }
  .btn--link:hover { text-decoration: underline; }
  .btn:hover .icon-trail { transform: translateX(3px); }
}

/* =============================================================
   7. Depth: large blurred colour masses (radial gradients — no costly filters)
   ============================================================= */
.glow-field { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.glow-field span { position: absolute; border-radius: 50%; animation: massDrift 34s ease-in-out infinite alternate; will-change: transform; }
.glow-field span:nth-child(2) { animation-duration: 41s; animation-delay: -8s; }
.glow-field span:nth-child(3) { animation-duration: 38s; animation-delay: -16s; }
.glow-field span:nth-child(4) { animation-duration: 45s; animation-delay: -4s; }
@keyframes massDrift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(5%, 4%, 0) scale(1.12); }
}
.glow-field--hero span:nth-child(1) { width: 95vw; height: 95vw; left: -45vw; top: -10vw; background: radial-gradient(closest-side, rgba(140, 30, 50, .62), transparent); }
.glow-field--hero span:nth-child(2) { width: 75vw; height: 60vw; left: 15vw; top: -38vw; background: radial-gradient(closest-side, rgba(60, 100, 150, .42), transparent); }
.glow-field--hero span:nth-child(3) { width: 70vw; height: 70vw; right: -30vw; bottom: -40vw; background: radial-gradient(closest-side, rgba(191, 66, 38, .5), transparent); }
.glow-field--hero span:nth-child(4) { width: 40vw; height: 40vw; right: 10vw; top: 10vw; background: radial-gradient(closest-side, rgba(242, 159, 5, .12), transparent); }
.glow-field--soft span:nth-child(1) { width: 70vw; height: 70vw; right: -30vw; top: -20vw; background: radial-gradient(closest-side, rgba(242, 159, 5, .16), transparent); }
.glow-field--soft span:nth-child(2) { width: 60vw; height: 60vw; left: -30vw; bottom: -30vw; background: radial-gradient(closest-side, rgba(191, 66, 38, .09), transparent); }
.glow-field--deep span:nth-child(1) { width: 100vw; height: 90vw; left: -40vw; top: 5%; background: radial-gradient(closest-side, rgba(89, 10, 31, .75), transparent); }
.glow-field--deep span:nth-child(2) { width: 80vw; height: 80vw; right: -35vw; top: 35%; background: radial-gradient(closest-side, rgba(38, 54, 92, .9), transparent); }
.glow-field--deep span:nth-child(3) { width: 70vw; height: 70vw; left: 20vw; bottom: -30vw; background: radial-gradient(closest-side, rgba(191, 66, 38, .32), transparent); }

/* =============================================================
   8. Header / nav (DS NavBar — transparent over hero, not fixed)
   ============================================================= */
.site-header { position: absolute; inset: 0 0 auto 0; z-index: 20; }
.page-inner .site-header { position: relative; background: var(--kr-navy-700); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 88px; }
.nav__logo img { height: 40px; width: auto; }
.nav__links { display: none; }
.nav__link { position: relative; padding: 8px 0; font-size: .9375rem; color: #fff; white-space: nowrap; }
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 3px; border-radius: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
@media (hover: hover) { .nav__link:hover::after { transform: scaleX(1); } }
.nav__cta { display: none; }
.nav__toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%; color: #fff; border: 1.5px solid var(--border-on-dark);
}
.nav__toggle .icon { width: 22px; height: 22px; }

.menu {
  position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column;
  padding: 20px var(--gutter) 32px; background: var(--kr-navy-700); overflow-y: auto;
}
.menu[hidden] { display: none; }
.menu__top { display: flex; align-items: center; justify-content: space-between; min-height: 48px; }
.menu__top img { height: 36px; width: auto; }
.menu__list { margin-block: 40px 32px; display: flex; flex-direction: column; }
.menu__link {
  display: flex; align-items: center; justify-content: space-between; padding: 16px 0;
  border-bottom: 1px solid var(--line-on-dark); font-size: 1.5rem; font-weight: 600;
}
.menu .btn { margin-top: auto; width: 100%; }
body.menu-open { overflow: hidden; }

/* =============================================================
   9. Hero
   ============================================================= */
.hero {
  position: relative; isolation: isolate; overflow: clip;
  background: var(--kr-navy-700); color: #fff;
  padding-top: 88px; padding-bottom: clamp(104px, 11vw, 150px);
}
.hero__grid { display: grid; gap: 40px; padding-top: clamp(16px, 3vw, 40px); }
.hero__copy .eyebrow { margin-bottom: 16px; }
.hero__title { font-size: var(--fs-display); line-height: 1.02; }
.hero__lead { margin: 22px 0 30px; max-width: 31em; font-size: var(--fs-body-lg); font-weight: 300; line-height: 1.45; color: var(--fg-on-dark-2); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px 18px; }

.hero__art { position: relative; height: clamp(400px, 100vw, 540px); max-width: 560px; width: 100%; margin-inline: auto; }
.arch { position: absolute; bottom: 0; border-radius: var(--radius-arch); transform-origin: 50% 100%; }
.arch--cream-l { left: 6%; width: 18%; height: 60%; background: var(--kr-cream-100); }
.arch--burgundy { left: 14%; width: 18%; height: 40%; background: var(--kr-burgundy-700); }
.arch--photo { left: 27%; width: 44%; height: 96%; background: var(--accent); overflow: hidden; z-index: 1; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .5); }
.arch--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform: scale(1.18); transform-origin: 34% 34%; }
.arch--cream-r { left: 64%; width: 22%; height: 78%; background: var(--kr-cream-100); opacity: .9; }

.chalk { position: absolute; inset: 0; z-index: 2; pointer-events: none; color: rgba(255, 255, 255, .8); }
.chalk path, .chalk ellipse, .chalk line, .chalk polyline { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.chalk text { fill: currentColor; font-family: var(--font-hand); font-size: 22px; }
.chalk__point {
  fill: var(--accent); stroke: none;
  offset-path: path("M36 162 C 78 158, 104 132, 122 96 S 150 42, 166 36");
  offset-distance: 100%; offset-rotate: 0deg;
  animation: pointClimb 1.4s var(--ease-out) 1.2s both;
}
@keyframes pointClimb { from { offset-distance: 0%; opacity: 0; } 15% { opacity: 1; } to { offset-distance: 100%; opacity: 1; } }

/* Subject tiles — unified grammar from the Física tile */
.tile {
  position: absolute; z-index: 3;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
  min-width: 132px; padding: 16px 18px 14px;
  border-radius: var(--radius-md); color: #fff; box-shadow: var(--shadow-lg);
}
.tile .icon { width: 36px; height: 36px; margin-bottom: 4px; }
.tile__title { font-weight: 600; font-size: .9375rem; line-height: 1.2; }
.tile__sub { font-size: .75rem; line-height: 1.3; opacity: .9; }
.tile__status { margin-top: 6px; padding: 2px 8px; border-radius: var(--radius-pill); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; background: rgba(0, 0, 0, .28); }
.tile--math { background: var(--kr-burgundy-700); }
.tile--math .icon { color: var(--accent); }
.tile--physics { background: var(--kr-rust-500); }
.tile--chem { background: var(--kr-amber-500); color: var(--kr-navy-700); }
.tile--chem .tile__status { background: rgba(19, 32, 60, .12); }
.hero__art .tile--a { left: 0; top: 36%; }
.hero__art .tile--b { right: 0; top: 25%; }
.hero__art .tile--c { right: 3%; top: 64%; }
.hero__note { position: absolute; z-index: 3; right: -4px; top: -14px; display: none; font-size: 1.625rem; text-align: center; color: #fff; transform: rotate(-8deg); }
.hero__note .rule { width: 60px; margin: 8px auto 0; }

/* =============================================================
   10. Sections
   ============================================================= */
.page { position: relative; }
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; margin-bottom: clamp(28px, 4vw, 48px); }
.section-head .eyebrow { display: block; margin-bottom: 12px; }
.section-head h2 { font-size: var(--fs-h2); }

/* --- Strip (essential facts) --- */
.strip { position: relative; z-index: 5; margin-top: -60px; background: var(--kr-cream-100); border-radius: 48px 48px 0 0; }
.strip__list { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 14px; padding-block: 36px 40px; }
.strip__list li:last-child { grid-column: 1 / -1; }
.feature { display: flex; align-items: center; gap: 12px; }
.feature .icon { width: 30px; height: 30px; }
.feature__text { font-size: .9375rem; line-height: 1.3; }

/* --- Tension (problem) + plot --- */
.tension { position: relative; isolation: isolate; overflow: clip; padding-block: var(--section-y); }
.tension__grid { display: grid; gap: 48px; align-items: center; }
.tension__copy .eyebrow { margin-bottom: 14px; }
.tension h2 { font-size: var(--fs-h2); max-width: 14ch; }
.tension__list { margin: 28px 0; display: grid; gap: 14px; max-width: 34em; }
.tension__list li { position: relative; padding-left: 28px; font-size: var(--fs-body-lg); color: var(--fg-2); }
.tension__list li::before { content: ""; position: absolute; left: 0; top: .62em; width: 14px; height: 2px; background: var(--accent); border-radius: 2px; }
.tension__turn { font-size: var(--fs-body-lg); max-width: 30em; }
.tension__turn strong { color: var(--emphasis-light); }
.plot { max-width: 560px; width: 100%; margin-inline: auto; }
.plot__svg { width: 100%; height: auto; overflow: visible; }
.plot__grid { stroke: var(--border-1); stroke-width: 1; }
.plot__axis { stroke: var(--kr-navy-300); stroke-width: 1.5; }
.plot__curve { fill: none; stroke: var(--kr-burgundy-700); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease-out) .5s; }
.plot__dot { fill: var(--kr-amber-500); stroke: var(--kr-cream-100); stroke-width: 2; transition: transform 1s var(--ease-out); transform-box: fill-box; transform-origin: center; }
.plot__label { font-family: var(--font-hand); font-size: 22px; fill: var(--fg-2); }
/* scattered start positions (settle onto the curve when revealed) */
.plot__dot:nth-child(1) { transform: translate(-6px, 38px); }
.plot__dot:nth-child(2) { transform: translate(14px, -46px); transition-delay: 60ms; }
.plot__dot:nth-child(3) { transform: translate(-18px, 52px); transition-delay: 120ms; }
.plot__dot:nth-child(4) { transform: translate(10px, -70px); transition-delay: 180ms; }
.plot__dot:nth-child(5) { transform: translate(-12px, 64px); transition-delay: 240ms; }
.plot__dot:nth-child(6) { transform: translate(16px, -58px); transition-delay: 300ms; }
.plot__dot:nth-child(7) { transform: translate(-10px, 80px); transition-delay: 360ms; }
.plot__dot:nth-child(8) { transform: translate(12px, -40px); transition-delay: 420ms; }
.plot__dot:nth-child(9) { transform: translate(-14px, 58px); transition-delay: 480ms; }
.plot__dot:nth-child(10) { transform: translate(8px, 66px); transition-delay: 540ms; }
.plot__dot:nth-child(11) { transform: translate(-8px, -30px); transition-delay: 600ms; }
.plot.is-revealed .plot__dot, .no-js .plot__dot { transform: none; }
.plot.is-revealed .plot__curve, .no-js .plot__curve { stroke-dashoffset: 0; }

.route-wrap { position: relative; margin-inline: calc(var(--gutter) * -.5); }
.route { width: 100%; height: auto; overflow: visible; }
.route__strand { fill: none; stroke: rgba(255, 245, 229, .2); stroke-width: 1.5; transition: stroke var(--dur-base) var(--ease-out), stroke-width var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); }
.route__strand[data-strand="2"], .route__strand[data-strand="5"] { stroke-dasharray: 6 5; }
.route__strand[data-strand="3"], .route__strand[data-strand="6"] { stroke-dasharray: 1 5; stroke-linecap: round; }
.route__track { fill: none; stroke: rgba(255, 255, 255, .08); stroke-width: 18; stroke-linecap: round; }
.route__progress { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 95; transition: stroke-dashoffset 700ms var(--ease-out); }
.route__loop, .route__loop-head { fill: none; stroke: rgba(255, 245, 229, .55); stroke-width: 1.5; stroke-dasharray: 5 6; stroke-linecap: round; }
.route__loop-head { stroke-dasharray: none; }
.route__capsule { fill: var(--kr-navy-700); stroke: rgba(255, 245, 229, .3); stroke-width: 1.5; transition: fill var(--dur-base) var(--ease-out), stroke var(--dur-base) var(--ease-out); }
.route__dot { fill: rgba(255, 245, 229, .55); transition: fill var(--dur-base) var(--ease-out), r var(--dur-base) var(--ease-out); }
.is-enhanced .route__station { cursor: pointer; }

[data-stage="1"] .route__progress { stroke-dashoffset: 95; }
[data-stage="2"] .route__progress { stroke-dashoffset: 72; }
[data-stage="3"] .route__progress { stroke-dashoffset: 50; }
[data-stage="4"] .route__progress { stroke-dashoffset: 28; }
[data-stage="5"] .route__progress { stroke-dashoffset: 4; }
[data-stage="1"] [data-station="1"] .route__dot,
[data-stage="2"] [data-station]:is([data-station="1"], [data-station="2"]) .route__dot,
[data-stage="3"] [data-station]:is([data-station="1"], [data-station="2"], [data-station="3"]) .route__dot,
[data-stage="4"] [data-station]:not([data-station="5"]) .route__dot,
[data-stage="5"] [data-station] .route__dot { fill: var(--accent); }
[data-stage="1"] [data-station="1"] .route__capsule, [data-stage="2"] [data-station="2"] .route__capsule,
[data-stage="3"] [data-station="3"] .route__capsule, [data-stage="4"] [data-station="4"] .route__capsule,
[data-stage="5"] [data-station="5"] .route__capsule { fill: var(--kr-burgundy-700); stroke: var(--accent); }
/* principle highlight: the chosen strand crosses the whole route */
.method__map:not([data-principle="0"]) .route__strand { opacity: .35; }
[data-principle="1"] [data-strand="1"], [data-principle="2"] [data-strand="2"], [data-principle="3"] [data-strand="3"],
[data-principle="4"] [data-strand="4"], [data-principle="5"] [data-strand="5"], [data-principle="6"] [data-strand="6"],
[data-principle="7"] [data-strand="7"] { stroke: #fff; stroke-width: 3; opacity: 1 !important; }

/* Stages: plain ordered list without JS; tabs when enhanced */
.stages { display: grid; gap: 14px; margin-top: 28px; }
.stage { padding: 18px 20px; border-radius: var(--radius-md); background: rgba(255, 255, 255, .04); border: 1px solid var(--line-on-dark); }
.stage__name { font-size: var(--fs-h3); display: flex; align-items: baseline; gap: 12px; }
.stage__num { font-size: .875rem; color: var(--accent); letter-spacing: .08em; }
.stage__text { margin-top: 8px; color: var(--fg-on-dark-2); }
.is-enhanced .stages { margin-top: 14px; }
.is-enhanced .stage { padding: 24px 26px; background: linear-gradient(120deg, rgba(89, 10, 31, .45), rgba(255, 255, 255, .03)); }
.is-enhanced .stage__text { font-size: var(--fs-body-lg); }

.principles { margin-top: clamp(40px, 5vw, 64px); }
.principles__title { font-size: var(--fs-h3); }
.principles__hint { margin-top: 6px; color: var(--fg-on-dark-2); font-size: .9375rem; }
.no-js .principles__hint { display: none; }
.principles__list { margin-top: 20px; display: grid; gap: 10px; }
.principle {
  width: 100%; text-align: left; display: grid; grid-template-columns: 34px 1fr; gap: 2px 14px; align-items: center;
  padding: 14px 16px; border-radius: var(--radius-md); border: 1px solid var(--line-on-dark); color: #fff;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.principle__line { grid-row: span 2; height: 0; border-top: 2px solid rgba(255, 245, 229, .6); }
.principles__list li:nth-child(2) .principle__line, .principles__list li:nth-child(5) .principle__line { border-top-style: dashed; }
.principles__list li:nth-child(3) .principle__line, .principles__list li:nth-child(6) .principle__line { border-top-style: dotted; border-top-width: 3px; }
.principle__name { font-weight: 600; font-size: .9375rem; }
.principle__desc { font-size: .875rem; color: var(--fg-on-dark-2); }
.principle[aria-pressed="true"] { background: rgba(255, 255, 255, .08); border-color: #fff; }
.principle[aria-pressed="true"] .principle__line { border-top-color: #fff; }
@media (hover: hover) { .principle:hover { background: rgba(255, 255, 255, .05); } }

/* --- Programs: unified subject grammar + offer --- */
.programs { padding-block: var(--section-y); background: var(--kr-cream-50); }
.subjects { display: grid; gap: 16px; }
.subject {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  min-height: 240px; padding: 26px 24px 22px; border-radius: var(--radius-md);
  color: #fff; box-shadow: var(--shadow-md);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.subject::before { content: ""; position: absolute; z-index: -1; right: -70px; top: -60px; width: 250px; height: 250px; border-radius: 50%; background: var(--disc); opacity: .7; }
.subject__glyph { position: absolute; z-index: -1; right: -14px; bottom: -18px; width: 150px; height: 150px; opacity: .2; }
.subject__glyph .icon { width: 100%; height: 100%; stroke-width: 1.25; }
.subject__icon { width: 40px; height: 40px; }
.subject__title { font-size: 1.5rem; }
.subject__text { font-size: .9375rem; line-height: 1.35; max-width: 22em; }
.subject__status { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: var(--radius-pill); font-size: .875rem; font-weight: 500; border: 1.5px dashed rgba(255, 255, 255, .6); }
.subject__status .icon { width: 16px; height: 16px; }
.subject__status--link { border-style: solid; border-color: rgba(255, 255, 255, .75); }
.subject--math { background: linear-gradient(120deg, #590A1F 0%, #6E1127 55%, #8A2A1F 100%); --disc: #A8321F; }
.subject--math .subject__icon { color: var(--accent); }
.subject--physics { background: linear-gradient(120deg, #B23C21 0%, #BF4226 50%, #D2512A 100%); --disc: #E0602A; }
.subject--chem { background: linear-gradient(120deg, #F29F05 0%, #F5A91C 100%); --disc: #F8BA3A; color: var(--kr-navy-700); }
.subject--chem .subject__status { border-color: rgba(19, 32, 60, .45); }
@media (hover: hover) {
  .subject--math:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
  .subject__status--link:hover { background: rgba(255, 255, 255, .12); }
  .subject__status--link:hover .icon-trail { transform: translateX(3px); }
}

.offer { margin-top: clamp(48px, 7vw, 96px); display: grid; gap: 36px; align-items: center; }
.offer__photo { position: relative; max-width: 440px; width: 100%; margin-inline: auto; aspect-ratio: 4 / 5; }
.offer__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; border-radius: 180px 180px var(--radius-lg) var(--radius-lg); background: var(--kr-burgundy-700); box-shadow: var(--shadow-lg); }
.offer__body .eyebrow { margin-bottom: 12px; }
.offer__title { font-size: var(--fs-h2); }
.offer__lead { margin-top: 16px; font-size: var(--fs-body-lg); color: var(--fg-2); max-width: 32em; }
.price {
  margin-top: 32px; display: grid; gap: 20px; align-items: center;
  padding: 24px; border-radius: var(--radius-lg); background: var(--kr-navy-700); color: #fff;
  box-shadow: var(--shadow-lg); --focus: var(--kr-amber-500);
}
.price__amount { display: flex; align-items: baseline; gap: 6px; }
.price__currency { font-size: 1.25rem; font-weight: 600; color: var(--accent); }
.price__value { font-size: clamp(3rem, 2.4rem + 2.5vw, 4.25rem); font-weight: 700; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.price__period { font-size: 1rem; color: var(--fg-on-dark-2); }
.price__note { margin-top: 10px; font-size: .875rem; color: var(--fg-on-dark-2); max-width: 26em; }

/* --- Values as transformations --- */
.values { position: relative; isolation: isolate; overflow: clip; padding-block: var(--section-y); background: var(--kr-burgundy-700); }
.values::before { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(60% 80% at 100% 100%, rgba(191, 66, 38, .5), transparent 70%), radial-gradient(50% 60% at 0% 0%, rgba(58, 6, 20, .8), transparent 70%); }
.values__intro { margin-bottom: clamp(36px, 5vw, 64px); }
.values__intro .eyebrow { margin-bottom: 14px; }
.values__intro h2 { font-size: var(--fs-h2); }
.values__list { display: grid; }
.value__eq { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: clamp(1.375rem, 1rem + 1.6vw, 2.25rem); font-weight: 600; letter-spacing: -.02em; }
.value__eq > span:first-child { color: var(--fg-on-dark-2); font-weight: 400; }
.value__arrow { position: relative; display: inline-block; width: 64px; height: 2px; background: var(--accent); transform-origin: left; transform: scaleX(0); transition: transform 700ms var(--ease-out) 150ms; }
.value__arrow::after { content: ""; position: absolute; right: -2px; top: -5px; width: 12px; height: 12px; border-top: 2px solid var(--accent); border-right: 2px solid var(--accent); transform: rotate(45deg); }
.value.is-revealed .value__arrow, .no-js .value__arrow { transform: scaleX(1); }
/* --- Story --- */
.story { padding-block: var(--section-y) calc(var(--section-y) * .6); background: var(--kr-cream-100); }
.story__grid { display: grid; gap: 32px; }
.story__head .eyebrow { margin-bottom: 14px; }
.story__head h2 { font-size: var(--fs-h2); }
.story__question { margin-top: 22px; font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); color: var(--fg-1); transform: rotate(-2deg); max-width: 16em; }
.story__body { display: grid; gap: 18px; font-size: var(--fs-body-lg); color: var(--fg-2); max-width: 36em; }
.story__body em { font-style: normal; color: var(--fg-1); }
.story__turn { color: var(--fg-1); }
.story__turn strong { color: var(--emphasis-light); }

/* --- Team --- */
.team { padding-block: calc(var(--section-y) * .6) var(--section-y); background: var(--kr-cream-100); }
.team__list { display: grid; gap: 40px 28px; }
.teacher { display: grid; gap: 18px; }
.teacher__photo { position: relative; aspect-ratio: 4 / 5; border-radius: 999px 999px var(--radius-lg) var(--radius-lg); overflow: hidden; background: linear-gradient(160deg, var(--kr-cream-300), var(--kr-cream-200)); }
.teacher__photo img { width: 100%; height: 100%; object-fit: cover; }
.teacher__slot { display: grid; place-items: center; height: 100%; color: var(--kr-navy-300); }
.teacher__slot .icon { width: 56px; height: 56px; }
.teacher__quote { font-size: 1.625rem; color: var(--fg-1); transform: rotate(-2deg); margin-bottom: 8px; }
.teacher__name { font-size: 1.375rem; }
.teacher__role { margin-top: 4px; color: var(--emphasis-light); font-weight: 500; }
.teacher__bio { margin-top: 10px; color: var(--fg-2); font-size: .9375rem; }
.teacher__linkedin { margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: var(--radius-pill); border: 1.5px solid var(--border-2); font-weight: 500; font-size: .9375rem; }
.teacher__linkedin .icon { width: 18px; height: 18px; }
@media (hover: hover) { a.teacher__linkedin:hover { background: var(--kr-navy-700); color: #fff; border-color: var(--kr-navy-700); } }

/* --- Manifesto --- */
.manifesto { position: relative; isolation: isolate; overflow: clip; padding-block: calc(var(--section-y) * 1.1); background: var(--kr-navy-900); }
.network { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; opacity: .75;
  -webkit-mask-image: linear-gradient(100deg, transparent 0%, transparent 38%, #000 70%); mask-image: linear-gradient(100deg, transparent 0%, transparent 38%, #000 70%); }
.network__edge { stroke: rgba(255, 245, 229, .22); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s var(--ease-out); }
.network__node { fill: rgba(255, 245, 229, .55); }
.network__node.n0, .network__node.n3 { fill: var(--kr-amber-500); }
.manifesto.is-revealed .network__edge, .no-js .network__edge { stroke-dashoffset: 0; }
.network__edge.e1 { transition-delay: .15s; } .network__edge.e2 { transition-delay: .3s; } .network__edge.e3 { transition-delay: .45s; }
.network__edge.e4 { transition-delay: .6s; } .network__edge.e5 { transition-delay: .75s; }
.manifesto__lines { display: grid; gap: clamp(14px, 2vw, 24px); }
.manifesto__lines li { font-size: clamp(1.75rem, 1rem + 3.4vw, 4rem); font-weight: 700; line-height: 1.05; letter-spacing: -.025em; text-wrap: balance; }
.manifesto__vision { margin-top: clamp(48px, 7vw, 88px); max-width: 44em; padding-top: 28px; border-top: 1px solid var(--line-on-dark); }
.manifesto__vision .eyebrow { margin-bottom: 14px; color: var(--accent); }
.manifesto__vision p { font-size: var(--fs-body-lg); font-weight: 300; color: var(--fg-on-dark-2); }

/* --- FAQ --- */
.faq { padding-block: var(--section-y); background: var(--kr-cream-50); }
.faq__grid { display: grid; gap: 32px; }
.faq__head .eyebrow { margin-bottom: 12px; }
.faq__head h2 { font-size: var(--fs-h2); }
.faq__list { border-top: 1px solid var(--border-1); }
.faq__item { border-bottom: 1px solid var(--border-1); }
.faq__item summary {
  position: relative; list-style: none; cursor: pointer;
  padding: 20px 48px 20px 0; font-weight: 600; font-size: 1.0625rem; line-height: 1.35;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 12px; height: 12px; margin-top: -8px;
  border-right: 2px solid var(--kr-navy-700); border-bottom: 2px solid var(--kr-navy-700);
  transform: rotate(45deg); transition: transform var(--dur-base) var(--ease-out);
}
.faq__item[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq__item p { padding: 0 48px 22px 0; color: var(--fg-2); max-width: 44em; }

/* --- Final CTA --- */
.cta { position: relative; isolation: isolate; overflow: clip; padding-block: calc(var(--section-y) * 1.05); background: var(--kr-navy-700); text-align: center; }
.cta .eyebrow { margin-bottom: 16px; }
.cta h2 { font-size: clamp(2.125rem, 1.4rem + 3vw, 3.75rem); max-width: 24ch; margin-inline: auto; }
.cta p { margin: 22px auto 34px; max-width: 34em; font-size: var(--fs-body-lg); font-weight: 300; color: var(--fg-on-dark-2); }
.cta__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px 28px; }

/* --- Footer --- */
.footer { background: var(--kr-navy-900); color: var(--fg-on-dark-2); padding-block: 56px 32px; }
.footer__grid { display: grid; gap: 36px; }
.footer__brand img { height: 40px; width: auto; }
.footer__tagline { margin-top: 16px; color: #fff; font-size: 1.0625rem; }
.social { margin-top: 22px; display: flex; gap: 10px; }
.social__item { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--line-on-dark); color: #fff; transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.social__item .icon { width: 20px; height: 20px; }
@media (hover: hover) { a.social__item:hover { background: var(--accent); color: var(--kr-navy-700); border-color: var(--accent); } }
.footer__label { display: block; margin-bottom: 14px; color: #fff; font-size: var(--fs-eyebrow); font-weight: 400; letter-spacing: var(--ls-eyebrow); }
.footer__list { display: flex; flex-direction: column; gap: 4px; font-size: .9375rem; }
.footer__list a { display: inline-block; padding-block: 6px; transition: color var(--dur-fast) var(--ease-out); }
@media (hover: hover) { .footer__list a:hover { color: var(--accent); } }
.footer__legal { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line-on-dark); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: .8125rem; }

/* --- Inner pages (blog, legal, 404) --- */
.page-hero { position: relative; isolation: isolate; overflow: clip; padding-block: clamp(56px, 8vw, 104px); background: var(--kr-navy-700); color: #fff; }
.page-hero .eyebrow { margin-bottom: 14px; }
.page-hero h1 { font-size: var(--fs-h2); max-width: 20ch; }
.page-hero p { margin-top: 16px; max-width: 36em; color: var(--fg-on-dark-2); font-size: var(--fs-body-lg); font-weight: 300; }
.page-body { padding-block: clamp(48px, 7vw, 88px); }
.notice { display: grid; grid-template-columns: 28px 1fr; gap: 14px; padding: 20px 22px; border-radius: var(--radius-md); background: var(--kr-amber-100); border: 1.5px solid var(--kr-amber-500); max-width: 52em; }
.notice .icon { width: 26px; height: 26px; }
.notice h2 { font-size: 1.125rem; }
.notice p { margin-top: 4px; color: var(--fg-2); }
.outline-list { margin-top: 32px; max-width: 52em; display: grid; gap: 10px; counter-reset: sec; }
.outline-list li { counter-increment: sec; padding: 14px 18px; border-radius: var(--radius-sm); background: #fff; box-shadow: var(--shadow-sm); }
.outline-list li::before { content: counter(sec, decimal-leading-zero); margin-right: 12px; color: var(--emphasis-light); font-weight: 600; }
.empty { max-width: 40em; }
.empty h2 { font-size: var(--fs-h3); }
.empty p { margin-top: 10px; color: var(--fg-2); }
.prose { max-width: 42em; font-size: var(--fs-body-lg); color: var(--fg-2); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { color: var(--fg-1); font-size: var(--fs-h3); margin-top: 1.8em; }
.prose a { color: var(--fg-1); text-decoration: underline; text-underline-offset: 3px; }
.credits { display: grid; gap: 12px; max-width: 52em; }
.credits li { padding: 16px 18px; border-radius: var(--radius-sm); background: #fff; box-shadow: var(--shadow-sm); }
.credits strong { color: var(--fg-1); }
.credits p { margin-top: 4px; font-size: .9375rem; color: var(--fg-2); }
.article-meta { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .9375rem; color: var(--fg-on-dark-2); }

/* =============================================================
   10b. Second pass — chapters, program groups, quiz, newsletter
   ============================================================= */

/* --- Purpose: its own chapter (pause) --- */
.purpose {
  position: relative; isolation: isolate; overflow: clip; text-align: center;
  padding-block: clamp(104px, 14vw, 184px) calc(clamp(64px, 8vw, 112px) + 48px);
  background: radial-gradient(80% 60% at 50% 100%, rgba(242, 159, 5, .10), transparent 70%), #0A1022;
}
.glow-field--purpose span:nth-child(1) { width: 90vw; height: 70vw; left: -30vw; top: -20vw; background: radial-gradient(closest-side, rgba(89, 10, 31, .7), transparent); }
.glow-field--purpose span:nth-child(2) { width: 80vw; height: 60vw; right: -30vw; bottom: -30vw; background: radial-gradient(closest-side, rgba(242, 159, 5, .16), transparent); }
.purpose__inner { max-width: 1120px; }
.purpose__kicker { font-size: var(--fs-body-lg); color: var(--fg-on-dark-2); margin-bottom: clamp(24px, 3vw, 40px); }
.purpose__quote p { font-size: clamp(2rem, 1.1rem + 3.8vw, 4.5rem); font-weight: 600; line-height: 1.08; letter-spacing: -.025em; text-wrap: balance; }
.pw { color: #fff; transition: color 700ms var(--ease-out); }
.purpose.is-revealed .pw { color: var(--accent); }
.purpose.is-revealed .pw2 { transition-delay: 500ms; }
.purpose.is-revealed .pw3 { transition-delay: 1000ms; }
.purpose__sign { margin-top: 32px; display: inline-flex; align-items: center; gap: 14px; font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--fg-on-dark-2); }
.purpose__sign::before, .purpose__sign::after { content: ""; width: 40px; height: 2px; border-radius: 2px; background: var(--accent); }
.purpose__stage { max-width: 1240px; margin: clamp(40px, 6vw, 72px) auto 0; padding-inline: var(--gutter); }
.purpose__viz { width: 100%; height: auto; overflow: visible; }
.purpose__path { fill: none; stroke: rgba(242, 159, 5, .75); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease-out) 1s; }
.purpose__dot { fill: rgba(255, 245, 229, .75); transition: transform 1.3s var(--ease-out), opacity 1.3s var(--ease-out); transform-box: fill-box; transform-origin: center; }
.purpose__dot.o0 { transform: translate(-40px, -120px); } .purpose__dot.o1 { transform: translate(60px, 90px); }
.purpose__dot.o2 { transform: translate(-90px, 60px); }  .purpose__dot.o3 { transform: translate(30px, -150px); }
.purpose__dot.o4 { transform: translate(110px, -40px); } .purpose__dot.o5 { transform: translate(-70px, 130px); }
.purpose__dot.o6 { transform: translate(20px, 150px); }  .purpose__dot.o7 { transform: translate(-120px, -30px); }
.purpose__dot.o8 { transform: translate(80px, 120px); }  .purpose__dot.o9 { transform: translate(-30px, -90px); }
.purpose__dot.w1 { transition-delay: 80ms; } .purpose__dot.w2 { transition-delay: 160ms; } .purpose__dot.w3 { transition-delay: 240ms; } .purpose__dot.w4 { transition-delay: 320ms; }
.purpose.is-revealed .purpose__dot, .no-js .purpose__dot { transform: none; }
.purpose.is-revealed .purpose__path, .no-js .purpose__path { stroke-dashoffset: 0; }
.purpose__milestone { opacity: 0; transition: opacity 700ms var(--ease-out); }
.purpose__ring { fill: none; stroke: var(--accent); stroke-width: 1.5; opacity: .6; }
.purpose__core { fill: var(--accent); }
.purpose__word { fill: #fff; font-family: var(--font-hand); font-size: 30px; }
.purpose.is-revealed .purpose__milestone, .no-js .purpose__milestone { opacity: 1; }
.purpose.is-revealed .m1 { transition-delay: 1.4s; } .purpose.is-revealed .m2 { transition-delay: 1.9s; } .purpose.is-revealed .m3 { transition-delay: 2.4s; }

/* --- Method: new scene (graph paper) --- */
.method {
  position: relative; isolation: isolate; overflow: clip;
  padding-block: calc(var(--section-y) * .9) var(--section-y);
  background-color: var(--kr-navy-700);
  background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 48px 48px; background-position: -1px -1px;
}
.method__intro { max-width: 1100px; }
.method__intro .eyebrow { margin-bottom: 14px; }
.method__intro h2 { font-size: clamp(2rem, 1.2rem + 3vw, 3.5rem); }
.is-enhanced .principle__desc { display: none; }
.is-enhanced .principles__list { display: flex; flex-wrap: wrap; gap: 10px; }
.is-enhanced .principle { width: auto; display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: var(--radius-pill); min-height: 44px; }
.is-enhanced .principle__line { width: 24px; }
.principle-detail { margin-top: 18px; min-height: 1.6em; font-size: var(--fs-body-lg); color: var(--kr-amber-100); }
.principle-detail:empty::before { content: "Elige un principio para verlo recorrer toda la ruta."; color: var(--fg-on-dark-2); font-size: .9375rem; }
.no-js .principle-detail { display: none; }

/* --- Program: grouped data --- */
.big-facts { margin-top: 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.big-fact { display: flex; flex-direction: column-reverse; padding: 16px 0; border-top: 3px solid var(--accent); }
.big-fact dd { font-size: clamp(2.5rem, 1.9rem + 2.4vw, 3.75rem); font-weight: 700; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.big-fact dt { margin-top: 6px; font-size: .875rem; color: var(--fg-2); }
.groups { margin-top: 24px; display: grid; gap: 18px; }
.group__title { font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-3); font-weight: 500; margin-bottom: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--radius-pill); background: #fff; box-shadow: var(--shadow-sm); font-size: .9375rem; font-weight: 500; }
.chips .icon { width: 18px; height: 18px; color: var(--emphasis-light); }
.measure { margin-top: 20px; display: flex; align-items: center; gap: 18px; padding: 16px 20px; border-radius: var(--radius-md); background: var(--kr-cream-200); }
.measure__spark { width: 104px; flex: none; overflow: visible; }
.measure__spark polyline { fill: none; stroke: var(--kr-burgundy-700); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s var(--ease-out) .3s; }
.measure__spark circle { fill: var(--accent); }
.measure.is-revealed .measure__spark polyline, .no-js .measure__spark polyline { stroke-dashoffset: 0; }
.measure__title { font-weight: 600; font-size: 1.0625rem; }
.measure__text { margin-top: 2px; font-size: .875rem; color: var(--fg-2); }

/* --- Experience: full-bleed image moment --- */
.experience { position: relative; isolation: isolate; overflow: clip; display: flex; align-items: flex-end; min-height: clamp(460px, 62vw, 700px); background: var(--kr-navy-900); }
.experience .experience__media { position: absolute; inset: 0; z-index: -1; }
.experience__media img { width: 100%; height: 100%; object-fit: cover; object-position: 64% 40%; }
.experience::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  /* localized: only behind the headline (bottom-left); the rest of the photo keeps its natural light */
  background: radial-gradient(ellipse 62% 70% at 12% 88%, rgba(11, 20, 39, .92) 0%, rgba(11, 20, 39, .72) 50%, transparent 100%), linear-gradient(180deg, transparent 62%, rgba(11, 20, 39, .7) 100%); }
.experience__overlay { width: 100%; padding-block: clamp(48px, 7vw, 96px); max-width: var(--container); }
.experience__overlay .eyebrow { margin-bottom: 12px; }
.experience__overlay h2 { font-size: var(--fs-h2); max-width: 16ch; }
.experience__overlay p { margin-top: 14px; color: var(--fg-on-dark-2); font-size: var(--fs-body-lg); }

/* Image slots (future OpenAI family) — styled so the page reads well before images exist */
.img-slot {
  position: relative; display: grid; place-items: end start; min-height: 240px; padding: 16px;
  border-radius: var(--radius-lg); overflow: hidden;
  background: radial-gradient(120% 90% at 20% 10%, rgba(242, 159, 5, .35), transparent 60%), linear-gradient(160deg, var(--kr-burgundy-700), var(--kr-navy-700));
  outline: 1.5px dashed var(--kr-amber-500); outline-offset: -10px;
}
.img-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.img-slot--bleed { border-radius: 0; min-height: 100%; place-items: start end; }
.img-slot__label { position: relative; font-size: .8125rem; color: #fff; background: rgba(0, 0, 0, .4); padding: 6px 10px; border-radius: var(--radius-sm); }

/* --- Final photographs (ChatGPT/OpenAI family) + KRESKO traces --- */
.photo-frame { position: relative; margin-inline: 0; }
.photo-frame img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-lg); background: var(--kr-cream-200); box-shadow: var(--shadow-lg); }
.story__media img { object-position: 50% 40%; }
/* zoom anchored top-left-ish: keeps the three faces, leaves out the AI-rendered brand marks (tumbler, folder) */
.photo-frame.teachers__media { overflow: visible; }
.teachers__media .teachers__crop { position: relative; height: 100%; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.teachers__media img { object-position: 50% 0%; transform: scale(1.2); transform-origin: 43% 0%; box-shadow: none; border-radius: 0; }
.trace { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.trace__line { fill: none; stroke: var(--kr-amber-500); stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease-out) .5s; }
.trace__dot { fill: var(--kr-amber-500); opacity: 0; transition: opacity .5s var(--ease-out) 1.9s; }
.is-revealed .trace__line, .no-js .trace__line { stroke-dashoffset: 0; }
.is-revealed .trace__dot, .no-js .trace__dot { opacity: 1; }
.trace--docentes { z-index: -1; }
.trace--docentes .trace__line { stroke: var(--emphasis-light); stroke-width: 2; }
.trace--docentes .trace__dot { fill: var(--emphasis-light); }
.teachers { overflow-x: clip; }
.teachers__media { isolation: isolate; }
.cta__photo { position: relative; margin: clamp(40px, 6vw, 64px) auto 0; max-width: 1100px; }
.cta__frame { aspect-ratio: 4 / 3; border-radius: 200px 200px var(--radius-lg) var(--radius-lg); overflow: hidden; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .5); }
.cta__frame img { width: 100%; height: 100%; object-fit: cover; object-position: 42% 40%; }
.trace--cierre { inset: 0 0 auto auto; width: 42%; height: auto; aspect-ratio: 400 / 160; z-index: 1; }
.trace--cierre .trace__line { stroke: var(--kr-cream-100); stroke-width: 2; }
.cta__photo.is-revealed .trace__line, .cta .is-revealed .trace__line { stroke-dashoffset: 0; }
.cta .is-revealed .trace__dot { opacity: 1; }
@media (max-width: 719px) { .experience__media img { object-position: 70% 40%; } }
@media (min-width: 720px) { .cta__frame { aspect-ratio: 2 / 1; border-radius: 280px 280px var(--radius-lg) var(--radius-lg); } .cta__frame img { object-position: 50% 22%; } }

/* --- Values: transformation first, explanation second --- */
.value { display: grid; grid-template-columns: 52px 1fr; grid-template-areas: "icon eq" "name name" "text text"; column-gap: 16px; row-gap: 8px; align-items: center; padding-block: 26px; border-top: 1px solid var(--line-on-dark); }
.value__eq { grid-area: eq; }
.value__name { align-self: end; }
.value__text { align-self: start; }
.value__name { grid-area: name; font-size: .8125rem; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--accent); font-weight: 600; }
.value__text { grid-area: text; color: var(--fg-on-dark-2); max-width: 34em; font-size: .9375rem; }
.value__text::first-letter { text-transform: uppercase; }

/* --- Story --- */
.story__media { margin-top: 32px; aspect-ratio: 4 / 3; min-height: 0; }
.story__mission { padding: 20px 0 20px 22px; border-left: 3px solid var(--accent); }
.story__mission p { font-size: 1rem; font-weight: 300; color: var(--fg-2); }
.story__mission footer { margin-top: 10px; font-size: .75rem; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--emphasis-light); }

/* --- Teachers (coming soon, quieter than the main program) --- */
.teachers { padding-block: var(--section-y); background: var(--kr-cream-50); }
.teachers__grid { display: grid; gap: 36px; align-items: center; }
.teachers__media { aspect-ratio: 16 / 9; min-height: 0; max-width: 560px; }
.teachers__status { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: var(--radius-pill); border: 1.5px dashed var(--emphasis-light); color: var(--emphasis-light); font-size: .8125rem; font-weight: 600; }
.teachers__status .icon { width: 16px; height: 16px; }
.teachers h2 { margin-top: 18px; font-size: var(--fs-h2); }
.teachers__copy > p:not(.teachers__status) { margin-top: 14px; font-size: var(--fs-body-lg); color: var(--fg-2); }
.teachers__list { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 10px 24px; }
.teachers__list li { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; }
.teachers__list .icon { width: 26px; height: 26px; color: var(--emphasis-light); }

/* --- FAQ figure --- */
.faq__figure { width: 120px; margin-top: 28px; overflow: visible; }
.faq__figure path, .faq__figure circle { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s var(--ease-out) .3s; }
.faq__head.is-revealed .faq__figure path, .faq__head.is-revealed .faq__figure circle, .no-js .faq__figure * { stroke-dashoffset: 0; }

/* --- Tension: link to the quiz --- */
.tension__quiz { margin-top: 18px; color: var(--emphasis-light); }
.tension__quiz .icon { width: 20px; height: 20px; }

/* --- Learn zone: quiz → result → keep learning → newsletter --- */
.learn { position: relative; isolation: isolate; overflow: clip; padding-block: calc(var(--section-y) + 24px) var(--section-y); background: var(--kr-navy-900); }
.learn--compact { margin-top: 0; border-radius: 0; padding-block: clamp(56px, 7vw, 96px); }
.cta { padding-bottom: calc(var(--section-y) * 1.05 + 48px); }
.quiz-zone { display: grid; gap: 32px; align-items: start; }
.quiz-zone__intro .eyebrow { margin-bottom: 12px; }
.quiz-zone__intro h2 { font-size: var(--fs-h2); }
.quiz-zone__intro p { margin-top: 14px; color: var(--fg-on-dark-2); font-size: var(--fs-body-lg); max-width: 28em; }
.quiz { padding: clamp(22px, 3vw, 32px); border-radius: var(--radius-lg); background: rgba(255, 255, 255, .045); border: 1px solid var(--line-on-dark); }
.quiz__screen[hidden] { display: none; }
.quiz__art, .quiz__curve { width: 100%; max-width: 280px; overflow: visible; }
.quiz__art path, .quiz__curve path { fill: none; stroke: rgba(255, 245, 229, .5); stroke-width: 2; stroke-dasharray: 5 6; }
.quiz__art circle { fill: var(--accent); }
.quiz__lead { margin: 18px 0 22px; color: var(--fg-on-dark-2); }
.quiz__nojs { color: var(--fg-on-dark-2); font-size: .9375rem; }
.js .quiz__nojs { display: none; }
.quiz__progress { margin-bottom: 18px; }
.quiz__count { font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-on-dark-2); }
.quiz__bar { margin-top: 8px; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.quiz__bar span { display: block; height: 100%; width: 0; border-radius: 6px; background: linear-gradient(90deg, var(--kr-amber-500), var(--kr-amber-300)); transition: width 500ms var(--ease-out); }
.quiz__fieldset { border: 0; padding: 0; min-width: 0; }
.quiz__prompt { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); font-weight: 600; line-height: 1.3; margin-bottom: 18px; outline-offset: 6px; }
.quiz__options { display: grid; gap: 10px; }
.quiz__option {
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 12px 16px; cursor: pointer;
  border-radius: var(--radius-md); border: 1.5px solid var(--line-on-dark); background: rgba(255, 255, 255, .03);
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.quiz__option input { width: 20px; height: 20px; accent-color: var(--kr-amber-500); flex: none; }
.quiz__option:has(input:checked) { border-color: var(--accent); background: rgba(242, 159, 5, .1); }
.quiz__option:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) { .quiz__option:hover:not(.is-locked) { border-color: var(--border-on-dark); transform: translateX(3px); } }
.quiz__option.is-locked { cursor: default; }
.quiz__option.is-correct { border-color: var(--accent); background: rgba(242, 159, 5, .16); }
.quiz__option.is-wrong { border-style: dashed; border-color: var(--kr-rust-300); }
.quiz__tag { margin-left: auto; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--kr-amber-300); font-weight: 600; }
.quiz__option.is-wrong .quiz__tag { color: var(--kr-rust-300); }
.quiz__feedback { margin-top: 16px; min-height: 1.5em; color: #fff; }
.quiz__feedback strong { color: var(--accent); }
.quiz__actions { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.quiz__you { fill: var(--accent); stroke: #fff; stroke-width: 2; transition: cx 900ms var(--ease-out), cy 900ms var(--ease-out); }
.quiz__score { margin-top: 18px; font-size: .9375rem; color: var(--fg-on-dark-2); outline-offset: 6px; }
.quiz__level { margin-top: 6px; font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); color: var(--accent); }
.quiz__text { margin-top: 10px; font-size: var(--fs-body-lg); max-width: 32em; }
.quiz__disclaimer { margin-top: 12px; font-size: .8125rem; color: var(--fg-on-dark-2); }

.nl { margin-top: clamp(64px, 8vw, 104px); padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--line-on-dark); display: grid; gap: 28px; align-items: center; }
.learn--compact .nl { margin-top: 0; padding-top: 0; border-top: 0; }
.nl__copy .eyebrow { margin-bottom: 12px; }
.nl__title { font-size: clamp(1.625rem, 1.15rem + 1.8vw, 2.375rem); }
.nl__copy p { margin-top: 12px; color: var(--fg-on-dark-2); max-width: 30em; }
.nl__form { display: grid; gap: 12px; }
.nl__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.nl__row .field { flex: 1 1 240px; }
.field { display: grid; gap: 6px; }
.field__label { font-size: .875rem; font-weight: 500; }
.field__input { width: 100%; min-height: 50px; padding: 0 18px; border-radius: var(--radius-pill); border: 1.5px solid var(--border-2); background: #fff; font: inherit; color: var(--fg-1); transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.field--dark .field__input { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .35); color: #fff; }
.field__input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(242, 159, 5, .3); }
.field__input[aria-invalid="true"] { border-color: var(--kr-rust-300); }
.field__error { color: var(--kr-rust-300); font-size: .875rem; font-weight: 500; }
.check { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; }
.check__input { width: 24px; height: 24px; margin-top: 1px; accent-color: var(--kr-amber-500); cursor: pointer; }
.check__label { font-size: .875rem; color: var(--fg-on-dark-2); cursor: pointer; }
.check__label a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.check__label .pending { display: block; margin-top: 4px; font-size: .8125rem; }
.nl__status:empty { display: none; }
.nl__status { padding: 12px 14px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .08); font-size: .9375rem; }

/* Icons that draw themselves when their block reveals */
.js .reveal .icon--draw * { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 900ms var(--ease-out) 200ms; }
.js .reveal.is-revealed .icon--draw * { stroke-dashoffset: 0; }
@media (hover: hover) {
  .subject--math:hover .subject__icon { transform: rotate(-6deg) scale(1.06); }
  .subject__icon { transition: transform var(--dur-base) var(--ease-out); }
}


/* --- Método: title → question → strategy statement → route with contained station labels --- */
.method__title { font-size: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); line-height: 1; }
.method__question { margin-top: clamp(20px, 3vw, 32px); font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); font-weight: 600; letter-spacing: -.015em; color: var(--accent); }
.strategy { margin-top: clamp(20px, 3vw, 32px); max-width: 980px; }
.strategy p {
  font-size: clamp(1.375rem, 1rem + 1.7vw, 2.375rem); font-weight: 300; line-height: 1.32; letter-spacing: -.01em;
  color: var(--fg-on-dark-2); text-wrap: pretty;
}
.strategy b { font-weight: 700; color: #fff; }
.strategy em { font-style: normal; font-weight: 600; color: var(--accent); }
.strategy__lead { font-weight: 700; color: var(--accent); font-size: 1.35em; letter-spacing: -.02em; }
.strategy__sign { margin-top: 20px; display: flex; align-items: center; gap: 14px; font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--fg-on-dark-2); }
.strategy__sign::before { content: ""; width: 40px; height: 2px; border-radius: 2px; background: var(--accent); }

.route-canvas { position: relative; margin-top: clamp(40px, 6vw, 72px); }
.route-words { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px calc(var(--gutter) * .5) 0; }
.route-word {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 14px;
  border-radius: var(--radius-pill); border: 1.5px solid var(--line-on-dark); background: rgba(11, 20, 39, .7);
  font-size: .9375rem; font-weight: 500; line-height: 1.2; color: var(--fg-on-dark-2); white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.route-word__n { font-size: .75rem; font-weight: 600; letter-spacing: .06em; color: var(--accent); }
button.route-word { cursor: pointer; }
.route-word[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: var(--kr-navy-700); }
.route-word[aria-selected="true"] .route-word__n { color: var(--kr-navy-700); }
@media (hover: hover) { button.route-word:hover:not([aria-selected="true"]) { color: #fff; border-color: var(--border-on-dark); } }
.method__loop { margin: 18px calc(var(--gutter) * .5) 0; display: flex; align-items: center; gap: 10px; font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem); color: var(--fg-on-dark-2); }
.method__loop .icon { width: 22px; height: 22px; color: var(--accent); flex: none; }
@media (min-width: 720px) {
  /* Labels sit on their stations; the route stays clean and technical */
  .route-words { position: absolute; inset: 0; display: block; margin: 0; pointer-events: none; }
  .route-word { position: absolute; pointer-events: auto; transform: translate(-50%, calc(-100% - 8px)); }
  .route-word.w1 { left: 7.5%;   top: 75%;   transform: translate(-20%, calc(-100% - 8px)); }
  .route-word.w2 { left: 28.75%; top: 57%; }
  .route-word.w3 { left: 50%;    top: 39.5%; }
  .route-word.w4 { left: 71.25%; top: 22.5%; }
  .route-word.w5 { left: 92.5%;  top: 7%;    transform: translate(-80%, calc(-100% - 8px)); }
}

/* --- Value icons (custom, geometric, line) --- */
.value__icon { grid-area: icon; width: 52px; height: 52px; color: var(--accent); overflow: visible; }
.value__icon .vi-soft { fill: none; stroke: rgba(255, 245, 229, .28); stroke-width: 1.5; }
.value__icon .vi-draw { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s var(--ease-out) .25s; }
.value__icon .vi-dot { fill: currentColor; opacity: 0; transition: opacity 500ms var(--ease-out) .15s; }
.value__icon .vd2 { transition-delay: .7s; } .value__icon .vd3 { transition-delay: 1.05s; }
.value.is-revealed .vi-draw, .no-js .vi-draw { stroke-dashoffset: 0; }
.value.is-revealed .vi-dot, .no-js .vi-dot { opacity: 1; }

/* Curved section tops: each one overlaps the previous section by exactly its radius, so the area
   outside the curve always shows the real background of the section above (any viewport). */
.purpose, .method, .values, .cta, .learn {
  margin-top: calc(var(--curve) * -1);
  border-radius: var(--curve) var(--curve) 0 0;
}
.experience__overlay { padding-bottom: calc(clamp(48px, 7vw, 96px) + var(--curve)); }
.learn--compact { margin-top: 0; border-radius: 0; }   /* blog: standalone band */

/* =============================================================
   11. Motion
   ============================================================= */
/* Hero signature: arches rise + chalk draws itself + point climbs the curve (CSS only) */
.arch { animation: archRise var(--dur-enter) var(--ease-out) both; }
.arch--cream-l { animation-delay: 80ms; }
.arch--burgundy { animation-delay: 200ms; }
.arch--photo { animation-delay: 140ms; }
.arch--cream-r { animation-delay: 260ms; }
@keyframes archRise { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.arch--photo img { animation: fadeIn var(--dur-enter) var(--ease-out) 420ms both; }
.hero__art .tile { animation: liftIn var(--dur-enter) var(--ease-out) both; }
.hero__art .tile--a { animation-delay: 620ms; }
.hero__art .tile--b { animation-delay: 740ms; }
.hero__art .tile--c { animation-delay: 860ms; }
.hero__note { animation: fadeIn var(--dur-enter) var(--ease-out) 1.8s both; }
.chalk .draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: chalkDraw 1.2s var(--ease-out) forwards; }
.chalk .d1 { animation-delay: .7s; } .chalk .d2 { animation-delay: 1s; } .chalk .d3 { animation-delay: 1.4s; } .chalk .d4 { animation-delay: 1.7s; }
.chalk text { animation: fadeIn var(--dur-enter) var(--ease-out) both; }
.chalk .t1 { animation-delay: 1.2s; } .chalk .t2 { animation-delay: 1.9s; } .chalk .t3 { animation-delay: 2.2s; }
@keyframes chalkDraw { to { stroke-dashoffset: 0; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes liftIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Scroll reveal — hidden only once JS confirms it is running (.js on <html>) */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity var(--dur-enter) var(--ease-out), transform var(--dur-enter) var(--ease-out); }
.js .reveal.is-revealed { opacity: 1; transform: none; }
.js .rd-1 { transition-delay: 80ms; } .js .rd-2 { transition-delay: 160ms; } .js .rd-3 { transition-delay: 240ms; } .js .rd-4 { transition-delay: 320ms; }
/* the plot figure itself stays visible; only its inner parts animate */
.js .plot.reveal { opacity: 1; transform: none; }

/* =============================================================
   12. Responsive (mobile-first)
   ============================================================= */
@media (max-width: 959px) {
  /* Story on small screens: image breaks the text run (question → p1 → image → mission) */
  .story__head, .story__body { display: contents; }
  .story__grid { gap: 20px; }
  .story__body > p:first-child { order: 1; }
  .story__media { order: 2; margin-top: 4px; }
  .story__body > :not(:first-child) { order: 3; }
  .story__body p { font-size: var(--fs-body-lg); color: var(--fg-2); }
}
@media (max-width: 539px) {
  .hero__art .tile { min-width: 0; padding: 8px 10px; }
  .hero__art .tile__status { font-size: .625rem; letter-spacing: .04em; padding: 2px 6px; }
  .hero__art .tile__title { font-size: .875rem; }
  .hero__art .tile .icon { width: 26px; height: 26px; }
  .hero__art .tile__sub { display: none; }
  .hero__art .tile--a { top: auto; bottom: 20%; left: 0; }
  .hero__art .tile--b { top: 2%; right: -6px; }
  .hero__art .tile--c { top: auto; bottom: 3%; right: 0; }
  .hero__actions .btn { width: 100%; }
  .strip .feature .icon { width: 26px; height: 26px; }
  .strip .feature__text { font-size: .875rem; }
      .btn { white-space: normal; text-align: center; }
}
@media (min-width: 540px) {
  .hero__note { display: block; }
  .strip__list { grid-template-columns: repeat(3, 1fr); }
  .strip__list li:last-child { grid-column: auto; }
  .price { grid-template-columns: auto 1fr; gap: 28px; }
}
@media (min-width: 720px) {
  .groups { grid-template-columns: 1fr 1fr; }
  .value { grid-template-columns: 60px minmax(0, 1.1fr) minmax(0, 1fr); grid-template-areas: "icon eq name" "icon eq text"; column-gap: 32px; }
  .value__icon { width: 60px; height: 60px; }
  .subjects { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .principles__list { grid-template-columns: 1fr 1fr; }
  .team__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
}
@media (min-width: 960px) {
  .quiz-zone { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 64px; }
  .nl { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 64px; }
  .teachers__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 72px; }
  .teachers__media { aspect-ratio: 3 / 2; }
  .nav__links { display: flex; gap: clamp(22px, 2.6vw, 40px); }
  .nav__cta { display: inline-flex; }
  .nav__toggle { display: none; }
  .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 24px; min-height: 500px; }
  .hero__art { height: 500px; max-width: none; }
  .strip__list { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; }
  .strip__list li { display: flex; justify-content: center; padding-inline: 12px; }
  .strip__list li + li { border-left: 1px solid var(--border-1); }
  .tension__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; }
  .offer { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 72px; }
  .story__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: start; }
  .faq__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 72px; }
  .principles__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .principle { grid-template-columns: 1fr; gap: 8px; align-content: start; height: 100%; }
  .principle__line { grid-row: auto; width: 34px; }
  .stages:not(.is-tabbed) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  .hero__art { height: 540px; }
  .hero__title { font-size: 4rem; }
}

/* =============================================================
   13. Reduced motion — only intrusive / continuous effects (skill rule A.2)
   Entrance fades, hovers and state transitions stay (they are feedback, not decoration).
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .glow-field span { animation: none; }
  .chalk__point { animation: none; offset-distance: 100%; opacity: 1; }
  .chalk .draw { animation-duration: 1ms; animation-delay: 0s; }
  .plot__dot, .plot__curve, .network__edge, .value__arrow, .purpose__dot, .purpose__path, .purpose__milestone, .pw, .measure__spark polyline, .faq__figure *, .icon--draw *, .quiz__you, .quiz__bar span, .vi-draw, .vi-dot { transition-duration: 1ms !important; transition-delay: 0s !important; }
  .js .reveal { transform: none; }
}