/* Landing page (Pages/Index.cshtml, docs/plans/site-redesign.md phase R2).
   A fixed 3D canvas (#space, drawn by /landing/space.js) sits behind five tall chapters. Reading text never
   depends on the canvas: it sits on translucent blurred panels (.glass). Tokens come from site.css; every use
   carries a fallback so the page still reads if a token is missing. */

/* ---------- page frame ---------- */
body.page.landing main.main{max-width:none;width:100%;padding:0;margin:0}
body.landing footer.site{position:relative;z-index:1}
body.landing{overflow-x:clip}
@media (prefers-reduced-motion: no-preference){
  html:has(body.landing){scroll-behavior:smooth}
}

/* ---------- the scene and its still fallback ---------- */
#space,#spacePoster{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
#space{display:block;opacity:0;transition:opacity .9s ease}
body.space-on #space{opacity:1}
/* Night poster: deep space with a warm disk glow low on the right, a cool nebula on the left and a faint orbit. */
#spacePoster{
  transition:opacity .9s ease,visibility 0s linear .9s;
  background:
    radial-gradient(ellipse 46% 9% at 76% 64%,rgba(245,158,11,.20),transparent 70%),
    radial-gradient(circle at 76% 62%,rgba(0,0,0,.9) 0 5.5%,rgba(245,158,11,.30) 6.2%,transparent 15%),
    radial-gradient(circle at 16% 22%,rgba(79,107,255,.24),transparent 44%),
    radial-gradient(circle at 88% 8%,rgba(124,58,237,.20),transparent 38%),
    radial-gradient(circle at 40% 96%,rgba(13,148,136,.16),transparent 42%),
    linear-gradient(180deg,#05070c 0%,#07090f 55%,#0b1020 100%);
}
/* Day poster: pale sky running to warm paper, a soft sun and two quiet tints. */
:root[data-theme="light"] #spacePoster{
  background:
    radial-gradient(circle at 78% 30%,rgba(245,158,11,.30) 0 4%,rgba(245,158,11,.12) 9%,transparent 24%),
    radial-gradient(ellipse 60% 24% at 70% 78%,rgba(53,80,230,.10),transparent 70%),
    radial-gradient(circle at 12% 18%,rgba(255,255,255,.28),transparent 40%),
    radial-gradient(circle at 30% 92%,rgba(13,148,136,.10),transparent 42%),
    linear-gradient(180deg,#cdd7e4 0%,#e0dcd3 100%);
}
body.space-on #spacePoster{opacity:0;visibility:hidden}

/* ---------- chapters ---------- */
.landing .chapter{
  position:relative;z-index:1;margin:0;display:flex;align-items:center;
  min-height:100vh;min-height:100svh;scroll-margin-top:52px;
  padding:clamp(72px,11vh,128px) clamp(18px,4vw,48px);
  font-family:var(--font-text,Inter,system-ui,sans-serif);font-size:17px;line-height:1.6;color:var(--ink,#eef1f7);
}
.landing .chapter-in{width:100%;max-width:1240px;margin:0 auto;display:flex}
.landing .text-left .chapter-in{justify-content:flex-start}
.landing .text-right .chapter-in{justify-content:flex-end}
.landing .chapter-col{width:min(540px,46%);min-width:0}
.landing .chapter-col.wide{width:min(600px,48%)}
.landing .chapter-col > * + *{margin-top:18px}

/* ---------- type ---------- */
.landing .eyebrow{
  margin:0;font-family:var(--font-text,Inter,system-ui,sans-serif);font-size:12px;font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;color:var(--amber,#f59e0b);
}
:root[data-theme="light"] .landing .eyebrow{color:var(--accent,#3550e6)}
.landing h1,.landing h2{
  font-family:var(--font-display,Fraunces,Georgia,serif);color:var(--ink,#eef1f7);margin:0;
  text-wrap:balance;
}
.landing h1{font-size:clamp(2.6rem,6vw,5rem);font-weight:400;line-height:1.06;letter-spacing:-.025em;margin:14px 0 28px}
.landing h2{font-size:clamp(1.8rem,3vw,2.2rem);font-weight:450;line-height:1.12;letter-spacing:-.015em;margin-top:10px}
.landing h2.second{margin-top:56px}
.landing h3{font-family:var(--font-text,Inter,system-ui,sans-serif);font-size:1.06rem;font-weight:650;line-height:1.3;margin:0 0 6px;color:var(--ink,#eef1f7)}
.landing .chapter p{margin:0}
.landing .lead{font-size:clamp(1.06rem,1.5vw,1.25rem);line-height:1.55;color:var(--ink,#eef1f7);max-width:34em;margin-top:22px}
.landing .muted{color:var(--muted,#9aa5bb)}
/* Text that sits straight on the scene gets a halo in the page colour, so a passing star or cloud never
   cuts through a letter. */
.landing h1,.landing h2,.landing .lead,.landing .eyebrow,.landing .scroll-hint{
  text-shadow:0 0 22px var(--bg,#07090f),0 0 8px var(--bg,#07090f);
}
.landing .row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:30px}

/* ---------- glass panels ---------- */
.landing .glass{
  background:color-mix(in srgb,var(--surface,#10141d) 78%,transparent);
  -webkit-backdrop-filter:blur(16px) saturate(1.15);backdrop-filter:blur(16px) saturate(1.15);
  border:1px solid var(--line,rgba(255,255,255,.10));
  border-radius:calc(var(--radius,14px) + 6px);
  box-shadow:var(--shadow,0 24px 60px rgba(0,0,0,.28));
  padding:clamp(18px,2.4vw,28px);
}
@supports not (background:color-mix(in srgb,red 50%,blue)){
  .landing .glass{background:var(--surface,#10141d)}
}
.landing .glass + .glass{margin-top:16px}
.landing .more{margin-top:18px}
.landing .more a:not(.btn){color:var(--accent,#4f6bff);font-weight:600;text-decoration:none}
.landing .more a:not(.btn):hover{text-decoration:underline}
/* Nested cards, list rows and questions sit on the raised surface, without a second blur. */
.landing .glass .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin:0}
.landing .glass .cards + .cards{margin-top:12px}
.landing .glass .card{background:var(--surface-2,#171c28);box-shadow:none}
.landing .block-title{margin-bottom:12px}

/* ---------- 1. hero ---------- */
.landing .scroll-hint{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  color:var(--muted,#9aa5bb);
}
.landing .scroll-hint i{display:block;width:1px;height:34px;background:linear-gradient(var(--muted,#9aa5bb),transparent);transform-origin:top}
@media (prefers-reduced-motion: no-preference){
  .landing .scroll-hint i{animation:hint-drop 2.2s ease-in-out infinite}
}
@keyframes hint-drop{0%{transform:scaleY(0);opacity:0}35%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}
@media (max-height:620px){.landing .scroll-hint{display:none}}

/* ---------- 2. why visual: numbered points ---------- */
.landing .points{list-style:none;margin:0;counter-reset:point;display:grid;gap:0}
.landing .points li{counter-increment:point;display:grid;grid-template-columns:3.4rem minmax(0,1fr);column-gap:8px;padding:18px 0;border-top:1px solid var(--line,rgba(255,255,255,.10))}
.landing .points li:first-child{border-top:0;padding-top:2px}
.landing .points li:last-child{padding-bottom:2px}
.landing .points li::before{
  content:counter(point,decimal-leading-zero);grid-row:1 / span 2;
  font-family:var(--font-display,Fraunces,Georgia,serif);font-size:1.9rem;font-weight:400;line-height:1;
  color:var(--amber,#f59e0b);font-variant-numeric:lining-nums;
}
.landing .points h3,.landing .points p{grid-column:2}
.landing .points p{color:var(--muted,#9aa5bb)}

/* ---------- 3. see a lesson ---------- */
.landing .lesson-panel{padding:12px}
/* 16:9 frame: the still poster shows until the live animation has loaded and faded in (class "live"). */
.landing .l-hero-scene{
  position:relative;display:block;aspect-ratio:16/9;overflow:hidden;
  border-radius:var(--radius,14px);border:1px solid var(--line,rgba(255,255,255,.10));
  background:#0b1226 url(/img/hero-poster.jpg) center/cover no-repeat;
}
.landing .l-hero-scene iframe{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none;opacity:0;transition:opacity .6s}
.landing .l-hero-scene.live iframe{opacity:1}
.landing .l-hero-badge{
  position:absolute;left:12px;bottom:12px;z-index:1;max-width:calc(100% - 24px);
  background:rgba(6,10,24,.82);color:#e8eefc;font-size:12.5px;font-weight:600;line-height:1.3;
  padding:6px 12px;border-radius:999px;
}
.landing .l-feature{display:block;padding:18px clamp(8px,1.4vw,16px) 10px;color:inherit;text-decoration:none}
.landing .l-feature .meta{display:block;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted,#9aa5bb);margin-bottom:8px}
.landing .l-feature h3{font-family:var(--font-display,Fraunces,Georgia,serif);font-size:1.45rem;font-weight:450;line-height:1.2;letter-spacing:-.01em;margin-bottom:8px}
.landing .l-feature p + p{margin-top:8px}
.landing .l-feature .muted{font-size:.92rem}
.landing .l-feature .btn{margin-top:16px}
.landing .l-feature:hover h3{color:var(--accent,#4f6bff)}

/* ---------- 4. who it is for, courses, coming soon ---------- */
.landing .who{padding-top:6px;padding-bottom:6px}
.landing .who-item{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 0;border-top:1px solid var(--line,rgba(255,255,255,.10))}
.landing .who-item:first-child{border-top:0}
.landing .who-item p{color:var(--muted,#9aa5bb);font-size:.97rem}
.landing .who-item .btn{flex:none;white-space:nowrap}
.landing .l-coming .coming-title{font-family:var(--font-text,Inter,system-ui,sans-serif);font-size:1.06rem;font-weight:650;letter-spacing:0;text-shadow:none;margin:0 0 6px}
.landing .l-coming .coming{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:0 22px}
.landing .l-coming .coming li{background:none;border:0;border-top:1px solid var(--line,rgba(255,255,255,.10));border-radius:0;padding:9px 0;font-size:.95rem;font-weight:500}
.landing .l-coming .coming li::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--amber,#f59e0b);margin-right:10px;vertical-align:middle}

/* ---------- 5. pricing and questions ---------- */
/* one column: site.css lays .plans out as cards side by side (the pricing page), which put Individuals and
   Classrooms next to each other here with no gap and unequal top padding */
.landing .plans{margin:0;display:grid;grid-template-columns:1fr;gap:0}
.landing .plans > div{padding:14px 0;border-top:1px solid var(--line,rgba(255,255,255,.10))}
.landing .plans > div:first-child{border-top:0;padding-top:2px}
.landing .plans dt{font-weight:650;font-size:1.06rem;margin-bottom:4px}
.landing .plans dd{margin:0;color:var(--muted,#9aa5bb)}
.landing .plans > div:first-child{padding-top:0}
.landing .l-pricing .founding{margin:18px 0 0;background:var(--surface-2,#171c28)}
.landing .l-pricing .more{display:flex;justify-content:center;margin:0;padding:24px 0 4px}
.landing .l-faq{padding:10px}
.landing .l-faq .faq{display:grid;gap:8px;max-width:none}
.landing .l-faq details{background:var(--surface-2,#171c28);border:1px solid var(--line,rgba(255,255,255,.10));border-radius:var(--radius-sm,10px);padding:13px 16px}
.landing .l-faq summary{font-weight:600;cursor:pointer}
.landing .l-faq details p{color:var(--muted,#9aa5bb);margin-top:10px}

/* ---------- progress rail ---------- */
.landing .rail{position:fixed;right:10px;top:50%;transform:translateY(-50%);z-index:5;display:grid;gap:4px}
.landing .rail a{position:relative;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;text-decoration:none}
.landing .rail a::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:var(--muted,#9aa5bb);opacity:.55;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--bg,#07090f) 70%,transparent);
  transition:transform .2s ease,background-color .2s ease,opacity .2s ease;
}
.landing .rail a:hover::before{opacity:1}
.landing .rail a[aria-current="true"]::before{background:var(--amber,#f59e0b);opacity:1;transform:scale(1.7)}
.landing .rail a:focus-visible{outline:2px solid var(--accent,#4f6bff);outline-offset:1px}
/* The label is always there for screen readers; sighted visitors get it as a small tag on hover or focus. */
.landing .rail-label{
  position:absolute;right:26px;top:50%;transform:translateY(-50%);white-space:nowrap;
  width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
  font:600 12px/1 var(--font-text,Inter,system-ui,sans-serif);color:var(--ink,#eef1f7);
  background:var(--surface,#10141d);border:1px solid var(--line,rgba(255,255,255,.10));border-radius:999px;
}
.landing .rail a:hover .rail-label,.landing .rail a:focus-visible .rail-label{width:auto;height:auto;overflow:visible;clip-path:none;padding:7px 11px}

/* ---------- scroll reveals (page.js adds reveal-on, then "in" per element) ---------- */
@media (prefers-reduced-motion: no-preference){
  body.reveal-on .reveal{transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
  body.reveal-on .reveal:not(.in){opacity:0;transform:translateY(18px)}
}

/* ---------- narrow screens: full-width panels over a dimmed scene ---------- */
@media (max-width:900px){
  #space{transition:opacity .9s ease}
  body.space-on #space{opacity:.42}
  #spacePoster{opacity:.6}
  body.space-on #spacePoster{opacity:0}
  .landing .chapter{padding:64px 18px 72px;align-items:flex-start}
  .landing #ch-hero{align-items:center}
  .landing .chapter-col,.landing .chapter-col.wide{width:100%;max-width:640px;margin-inline:auto}
  .landing .rail{right:1px}
  .landing .rail a{width:16px;height:20px}
  .landing .rail a::before{width:5px;height:5px}
  .landing .rail-label{right:18px}
  .landing h2.second{margin-top:44px}
}
@media (max-width:520px){
  .landing .who-item{flex-direction:column;align-items:flex-start;gap:12px}
  .landing .row .btn{flex:1 1 100%;text-align:center;justify-content:center}
  .landing .glass .cards{grid-template-columns:1fr}
  .landing .l-coming .coming{grid-template-columns:1fr}
}