/* ============================================================
   EDUCATION — its own world (2026-10-16). Loaded on education.html
   only, after academy-v3.css. A night sky of real markets (sky.js)
   behind frosted-glass lessons. Shares the site's header, footer and
   type; drops the stage HUD and the scroll colour field.
   ============================================================ */
body.edu{
  --night:#03050a; --glass:rgba(12,16,28,.52); --glass-hi:rgba(255,255,255,.075); --line:rgba(214,226,255,.12);
  --txt:#eef1f6; --dim:#a9b1c4; --mc:#ffcf5a; --mc2:#ff6a3d;
  background:var(--night)!important; color:var(--txt);
}
/* the sky sits behind everything; without WebGL a still gradient stands in */
.sky{position:fixed;inset:0;width:100vw;height:100vh;display:block;z-index:0;pointer-events:none;opacity:0;transition:opacity 1.6s ease}
.sky.is-ready{opacity:1}
body.edu::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(60% 50% at 20% 30%,rgba(52,227,160,.16),transparent 70%),radial-gradient(50% 45% at 75% 25%,rgba(176,123,255,.16),transparent 70%),radial-gradient(70% 60% at 55% 85%,rgba(56,214,255,.09),transparent 70%),linear-gradient(#05070f,#03050a)}
body.edu main,body.edu .site-foot{position:relative;z-index:1}
body.edu .hud{display:none}
body.edu .site-head.is-stuck{background:rgba(4,6,12,.5);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);box-shadow:0 1px 0 var(--line)}
body.edu .menu .btn-get{background:var(--txt);color:#05070d}
body.edu .site-foot{background:rgba(3,5,10,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--line)}
body.edu .stage{background:transparent!important;color:var(--txt)!important}
body.edu .eyebrow{color:var(--accent)}
body.edu ::selection{background:var(--mc);color:#05070d}

/* ---------- glass ---------- */
.edu .glass{position:relative;background:var(--glass);border:1px solid var(--line);border-radius:22px;
  backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
  box-shadow:inset 0 1px 0 var(--glass-hi),0 40px 90px -40px rgba(0,0,0,.8)}
.edu .glass::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(140deg,color-mix(in srgb,var(--mc) 55%,transparent),transparent 35%,transparent 70%,color-mix(in srgb,var(--mc2) 40%,transparent));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}

/* ---------- hero ---------- */
.edu-hero{min-height:100svh;display:grid;align-content:end;padding-top:calc(var(--head-h) + 60px);padding-bottom:clamp(56px,9vh,96px)}
.edu-hero .wrap{display:grid;gap:26px;width:100%}
.edu-h1{margin:0;font:800 clamp(3.2rem,11.5vw,11rem)/.86 var(--sans);letter-spacing:-.06em;text-wrap:balance}
.edu-h1 span{display:block}
.edu-h1 em{display:block;font-weight:300;padding-right:.08em;
  background:linear-gradient(100deg,#34e3a0 0%,#38d6ff 22%,#b07bff 45%,#ff5fc8 62%,#ffcf5a 84%,#ff6a3d 100%);background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:eduSheen 14s ease-in-out infinite alternate}
@keyframes eduSheen{to{background-position:100% 0}}
.edu-hero .lead{color:var(--dim);opacity:1;font-size:clamp(1.02rem,1.4vw,1.2rem);max-width:40rem}
.sky-legend{display:grid;gap:14px;margin-top:10px;padding-top:22px;border-top:1px solid var(--line)}
.sky-legend p{margin:0;font:400 .78rem/1.5 var(--mono);letter-spacing:.06em;color:var(--dim);max-width:62ch}
.sky-legend ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.sky-legend a{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;align-items:center;padding:12px 14px;border-radius:14px;text-decoration:none;
  background:rgba(12,16,28,.35);border:1px solid var(--line);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:border-color .25s,transform .25s,background .25s}
.sky-legend a:hover{border-color:var(--mc);transform:translateY(-3px);background:rgba(12,16,28,.6)}
.sky-legend i{grid-row:span 3;width:10px;height:10px;border-radius:50%;background:var(--mc);box-shadow:0 0 14px 2px var(--mc)}
.sky-legend b{font:400 .68rem/1 var(--mono);letter-spacing:.18em;color:var(--mc)}
.sky-legend span{font:700 .92rem/1.2 var(--sans);letter-spacing:-.01em}
.sky-legend small{font:400 .7rem/1 var(--mono);color:var(--dim)}
@media (max-width:1100px){.sky-legend ol{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.sky-legend ol{grid-template-columns:repeat(2,minmax(0,1fr))}.sky-legend a{padding:10px 12px}}

/* ---------- the module rail (fixed, bottom) ---------- */
.edu-rail{position:fixed;left:50%;bottom:18px;z-index:20;display:flex;gap:4px;padding:6px;border-radius:999px;
  background:rgba(8,11,20,.62);border:1px solid var(--line);backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%);
  transform:translate(-50%,140%);opacity:0;transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .4s}
.edu-rail.is-on{transform:translate(-50%,0);opacity:1}
.edu-rail a{display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;text-decoration:none;color:var(--dim);font:700 .8rem/1 var(--sans);transition:color .3s,background .3s}
.edu-rail a b{font:400 .7rem/1 var(--mono);letter-spacing:.12em;color:var(--mc)}
.edu-rail a span{max-width:0;overflow:hidden;white-space:nowrap;transition:max-width .45s cubic-bezier(.2,.8,.2,1)}
.edu-rail a.on{color:var(--txt);background:color-mix(in srgb,var(--mc) 16%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mc) 45%,transparent)}
.edu-rail a.on span{max-width:12rem}
.edu-rail a:hover{color:var(--txt)}
@media (max-width:560px){.edu-rail{bottom:12px}.edu-rail a{padding:9px 11px}}

/* ---------- a module ---------- */
.emod{min-height:100svh;display:grid;align-items:center;padding-block:clamp(96px,13vh,150px)}
.em-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);grid-template-areas:"head vis" "foot vis";column-gap:clamp(32px,5vw,80px);row-gap:28px;align-items:center}
.em-head{grid-area:head;display:grid;gap:14px;align-self:end}
.em-foot{grid-area:foot;display:grid;gap:18px;align-self:start}
.em-vis{grid-area:vis;min-width:0;position:relative}
.em-num{margin:0 0 -.06em;font:800 clamp(5.5rem,13vw,12rem)/.8 var(--sans);letter-spacing:-.07em;
  background:linear-gradient(160deg,var(--mc) 10%,var(--mc2) 95%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 40px color-mix(in srgb,var(--mc) 35%,transparent))}
.em-kick{margin:0;font:400 .74rem/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--mc)}
.em-title{margin:0;font:800 clamp(2.1rem,4.4vw,3.8rem)/.95 var(--sans);letter-spacing:-.045em;text-wrap:balance}
.em-line{margin:0;max-width:34rem;color:var(--dim);font-size:1.06rem}
.edu .mod-tags li{border-color:color-mix(in srgb,var(--mc) 40%,transparent);color:var(--txt);background:rgba(12,16,28,.35)}
.em-sky{display:flex;gap:10px;align-items:baseline;margin:0;max-width:40rem;font:400 .72rem/1.5 var(--mono);letter-spacing:.04em;color:var(--dim)}
.em-sky i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--mc);box-shadow:0 0 12px 2px var(--mc);transform:translateY(-1px)}
.edu .vis-cap{color:var(--dim);opacity:1;text-transform:none;letter-spacing:.02em;line-height:1.55;max-width:70ch}
@media (max-width:900px){
  .em-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "vis" "foot"}
  .emod{min-height:0}
}

/* ---------- IV: the words follow the chart ---------- */
.em-demo{grid-template-columns:minmax(0,.82fr) minmax(0,1.5fr);grid-template-areas:"head vis" "steps vis" "foot vis";row-gap:22px}
.em-steps{grid-area:steps;list-style:none;margin:0;padding:0;display:grid;gap:4px}
.em-steps li{position:relative;display:grid;grid-template-columns:auto 1fr;column-gap:14px;padding:12px 14px;border-radius:14px;overflow:hidden;
  color:var(--dim);transition:background .5s,color .5s}
.em-sn{font:400 .7rem/1.55 var(--mono);letter-spacing:.1em;color:color-mix(in srgb,var(--mc) 70%,var(--dim))}
.em-steps b{font:700 1.02rem/1.3 var(--sans);letter-spacing:-.01em}
.em-steps p{grid-column:2;margin:0;max-height:0;opacity:0;overflow:hidden;font-size:.95rem;line-height:1.5;color:var(--txt);
  transition:max-height .6s cubic-bezier(.2,.8,.2,1),opacity .5s,margin .6s}
.em-steps li.on{background:rgba(12,16,28,.55);color:var(--txt);box-shadow:inset 0 0 0 1px var(--line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.em-steps li.on p{max-height:8em;opacity:.86;margin-top:8px}
.em-bar{position:absolute;left:0;bottom:0;height:2px;width:0;background:linear-gradient(90deg,var(--mc),var(--mc2))}
.em-steps li.on .em-bar{width:calc(var(--od-p,0)*100%)}
.em-steps li.done .em-sn{color:var(--mc)}
@media (max-width:900px){.em-demo{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "vis" "steps" "foot"}}

/* the screen the chart is drawn on */
.screen{overflow:hidden;background:rgba(6,9,17,.7)}
.screen-bar{display:flex;align-items:center;gap:14px;padding:12px 16px;border-bottom:1px solid var(--line);font:400 .72rem/1 var(--mono);letter-spacing:.08em;color:var(--dim)}
.screen-dots{display:flex;gap:6px}
.screen-dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.14)}
.screen-dots i:first-child{background:var(--mc)}
.screen-sym{color:var(--txt);text-transform:uppercase;letter-spacing:.14em}
.screen-dates{margin-left:auto;white-space:nowrap}
.screen .od-cv{display:block;width:100%;height:clamp(340px,42vw,560px)}
@media (max-width:640px){.screen .od-cv{height:440px}.screen-dates{display:none}}
.is-failed .od-cv{opacity:.3}


/* ---------- the Whop preview, status line and enrollment, on the same night ---------- */
.edu .s-inside .whop{background:rgba(14,14,14,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.edu-status{max-width:none!important;font-size:clamp(1.6rem,3.4vw,2.8rem)!important}
.edu-status em{background:linear-gradient(100deg,#34e3a0,#38d6ff 40%,#b07bff 70%,#ffcf5a);-webkit-background-clip:text;background-clip:text;color:transparent}
.edu .s-enroll em{background:linear-gradient(100deg,#ffcf5a,#ff6a3d);-webkit-background-clip:text;background-clip:text;color:transparent}
/* gradient text is clipped to its box, and an italic's last glyph leans past that box: give it room */
.edu .s-enroll em,.edu-status em{padding-right:.16em;margin-right:-.16em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.edu .steps span{background:var(--txt);color:#05070d}
.edu .pass{background:var(--glass);color:var(--txt);border:1px solid var(--line);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.edu .pass-k{color:#ffcf5a}
.edu .pass li::before{background:#ffcf5a}
.edu .capture .btn-ink{background:#05070d}

@media (prefers-reduced-motion:reduce){.edu-h1 em{animation:none}.sky{transition:none}}

/* words stay readable wherever a line of light passes behind them */
.em-grid,.edu-hero .wrap{position:relative}
.em-grid::before,.edu-hero .wrap::before{content:"";position:absolute;z-index:-1;pointer-events:none;inset:-12% auto -12% -18%;width:62%;
  background:radial-gradient(closest-side,rgba(3,5,10,.72),rgba(3,5,10,.4) 55%,transparent);filter:blur(10px)}
.edu-hero .wrap::before{width:80%;inset:-20% auto -10% -20%}
@media (max-width:900px){.em-grid::before{width:120%;left:-10%}}
.em-grid::before{background:radial-gradient(closest-side,rgba(3,5,10,.82),rgba(3,5,10,.5) 55%,transparent)}
.em-demo .em-num{font-size:clamp(4.5rem,9vw,8rem)}
.em-demo .em-head{gap:10px}
.emod.em-tight,.emod:has(.em-demo){padding-block:clamp(84px,10vh,120px)}
.em-demo .em-num{font-size:clamp(4rem,7vw,6.5rem)}
.em-demo .em-line{font-size:1rem}
.em-steps li{padding:10px 14px}
@media (max-width:560px){.edu-rail{max-width:calc(100vw - 24px)}.edu-rail a.on span{max-width:0}.edu-rail a{padding:10px 13px}}