/* Aurora Minds — design tokens. The ONLY place colours and fonts are defined.
   Inlined into every lesson page (render.py) and prepended to the site stylesheet
   (build_landing.py). Change a colour here and every surface follows. */
:root{
  --bg: #10142A;
  --panel: #181E3A;
  --panel-2: #1F2748;
  --line: #2C3560;
  --text: #EDEFF7;
  --muted: #9AA3C4;
  --amber: #F0A868;
  --teal: #5FD4C7;
  --font-head: 'Space Grotesk', sans-serif;
  --font-body: 'IBM Plex Sans', sans-serif;
  --maxw: 1080px;   /* content width for .wrap on the marketing pages */
}

/* Aurora Minds — chrome shared by every page (lesson pages inline it after
   tokens.css; the site stylesheet gets it prepended). Skip link, kicker labels,
   tooltips, install pill. */
.skip-link{ position:absolute; left:8px; top:-48px; z-index:100; background:var(--amber); color:#1A1204; font-family:var(--font-head); font-weight:600; padding:10px 14px; border-radius:8px; text-decoration:none; transition:top .15s; }
.skip-link:focus{ top:8px; outline:2px solid var(--teal); }

/* Small uppercase label above a block. Semantically an h3 (or h4 inside an h3
   block) so heading levels never skip; visually the same wherever it appears. */
.kicker{ font-family:var(--font-head); font-weight:600; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--teal); margin:0 0 10px; }

/* Glossary tooltip: JS (Floating UI) positions .tip with position:fixed and .show;
   without JS the :hover fallback shows it above the term. */
.term{ color:var(--amber); border-bottom:1px dotted var(--amber); cursor:help; position:relative; }
.term:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; border-radius:2px; }
.term .tip{
  display:none; position:fixed; left:0; top:0; width:max-content; max-width:min(300px, calc(100vw - 16px));
  background:var(--panel-2); border:1px solid var(--line); border-radius:8px;
  padding:10px 12px; font-size:13.5px; color:var(--text); line-height:1.45; z-index:70; text-transform:none; letter-spacing:0; font-weight:400;
  box-shadow:0 12px 30px -12px rgba(0,0,0,.8);
}
.term .tip.show{ display:block; }
html:not(.js) .term:hover .tip{ display:block; position:absolute; bottom:130%; left:0; }
.tip-lang{ display:block; margin-top:6px; color:var(--teal); font-size:12.5px; }

/* "Add to home screen" pill */
.install-pill{ position:fixed; left:50%; bottom:18px; transform:translateX(-50%); z-index:65; display:flex; align-items:center; gap:10px; background:var(--panel-2); border:1px solid var(--line); border-radius:999px; padding:8px 8px 8px 16px; box-shadow:0 18px 40px -18px rgba(0,0,0,.9); font-family:var(--font-head); font-size:14px; color:var(--text); max-width:calc(100vw - 24px); }
.install-pill[hidden]{ display:none; }
.install-pill button{ font-family:var(--font-head); font-size:13px; border-radius:999px; padding:8px 14px; cursor:pointer; border:1px solid transparent; }
.install-pill [data-action="install"]{ background:var(--amber); color:#1A1204; font-weight:600; }
.install-pill [data-action="dismiss"]{ background:transparent; color:var(--muted); border-color:var(--line); }
@media (prefers-reduced-motion:reduce){ .skip-link{ transition:none; } }

/* Aurora Minds — marketing site styles (landing + catalog).
   Same design tokens as templates/styles.css, which the generated explainer
   pages inline. Keep the two in sync: tokens live here once, per the design
   system ("a physics lab at night" — calm, confident, not flashy). */

/* tokens: see templates/tokens.css (prepended at build time) */

*{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

/* A very faint aurora wash at the top of the page — the only "effect" we use. */
body::before{
  content:'';
  position:fixed;
  inset:0 0 auto 0;
  height:70vh;
  background:
    radial-gradient(60% 55% at 20% 0%,rgba(240,168,104,0.10),transparent 70%),
    radial-gradient(55% 50% at 78% 4%,rgba(95,212,199,0.09),transparent 70%);
  pointer-events:none;
  z-index:0;
}

h1,h2,h3,h4{font-family:'Space Grotesk',system-ui,sans-serif;line-height:1.15;margin:0 0 14px;}
h1{font-size:clamp(34px,6vw,58px);font-weight:700;letter-spacing:-1px;}
h2{font-size:clamp(26px,3.6vw,36px);font-weight:600;letter-spacing:-0.5px;}
h3{font-size:20px;font-weight:600;}
p{margin:0 0 16px;}
a{color:var(--teal);text-decoration:none;}
a:hover{text-decoration:underline;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;position:relative;z-index:1;}

.eyebrow{
  font-family:'Space Grotesk',sans-serif;
  font-size:12px;
  letter-spacing:2.4px;
  text-transform:uppercase;
  color:var(--amber);
  margin-bottom:14px;
}

.muted{color:var(--muted);}

/* ---------- header ---------- */
header.site{
  position:sticky;top:0;z-index:50;
  background:rgba(16,20,42,0.82);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;height:66px;}
header.site img{height:30px;width:auto;display:block;}
.nav-links{display:flex;align-items:center;gap:26px;font-size:15px;}
/* :not(.btn) matters — these are more specific than .btn-primary and would
   otherwise override the button's own text colour. */
.nav-links a:not(.btn){color:var(--muted);}
.nav-links a:not(.btn):hover{color:var(--text);text-decoration:none;}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;
  font-family:'Space Grotesk',sans-serif;
  font-size:15px;font-weight:600;
  padding:13px 26px;
  border-radius:10px;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .15s ease,background .15s ease,border-color .15s ease;
  text-decoration:none;
}
.btn:hover{text-decoration:none;transform:translateY(-1px);}
.btn{white-space:nowrap;}
.btn-primary{background:var(--amber);color:#1A1204;}
.btn-primary:hover{background:#F5B87F;}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--line);}
.btn-ghost:hover{border-color:var(--teal);color:var(--teal);}
.btn-sm{padding:9px 18px;font-size:14px;}

/* ---------- sections ---------- */
section{padding:92px 0;position:relative;z-index:1;}
section.tight{padding:64px 0;}
.divider{height:1px;background:var(--line);max-width:var(--maxw);margin:0 auto;opacity:0.7;}

/* ---------- cards / panels ---------- */
.panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:16px;
  padding:28px;
}
.grid{display:grid;gap:20px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}

/* Line breaks that only make sense at desktop widths. */
@media (max-width:860px){
  .grid-3,.grid-2{grid-template-columns:1fr;}
  section{padding:64px 0;}
  .nav-links{gap:16px;font-size:14px;}
  .nav-links .hide-sm{display:none;}
  .nav-links .btn-sm{padding:8px 14px;font-size:13px;}
  .br-lg{display:none;}
}
@media (max-width:480px){
  header.site .wrap{padding:0 16px;}
  header.site img{height:26px;}
  .nav-links{gap:12px;}
  .nav-links .hide-xs{display:none;}
}

/* ---------- footer ---------- */
footer.site{
  border-top:1px solid var(--line);
  padding:44px 0;
  color:var(--muted);
  font-size:14px;
  position:relative;z-index:1;
}
footer.site .row{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center;}
footer.site a{color:var(--muted);}
footer.site a:hover{color:var(--text);}
.social{display:flex;gap:18px;}

/* ---------- landing: hero with live demo ---------- */
.hero-split{padding:72px 0 56px;}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:44px;align-items:center;}
.hero-copy .lede{font-size:clamp(17px,2vw,20px);color:var(--muted);max-width:560px;margin-bottom:28px;}
.hero-copy h1 em{font-style:normal;color:var(--amber);}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center;}
.trust{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-wrap:wrap;gap:8px 18px;font-family:'Space Grotesk',sans-serif;font-size:13.5px;color:var(--muted);}
.trust li{padding-left:18px;position:relative;}
.trust li::before{content:'✓';position:absolute;left:0;color:var(--teal);}
.demo-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:16px;box-shadow:0 30px 80px -40px rgba(0,0,0,.9);}
.demo-tag{font-family:'Space Grotesk',sans-serif;font-size:12.5px;color:var(--muted);margin-bottom:10px;}
.demo-tag b{color:var(--teal);font-weight:500;}
.demo-tabs{display:flex;gap:6px;margin-bottom:12px;}
.demo-tabs button{font-family:'Space Grotesk',sans-serif;font-size:13px;background:transparent;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:7px 14px;cursor:pointer;}
.demo-tabs button.active{color:#1A1204;background:var(--amber);border-color:var(--amber);}
.demo-pane .as-wrap{padding:10px;} .demo-pane .as-svg{max-height:300px;}
.demo-pane .ld-figure{max-width:220px;} .demo-pane .ld-wrap{gap:14px;}
.demo-note{font-size:13.5px;color:var(--muted);margin:12px 0 0;}
.demo-note a, .faq a, .muted a{text-decoration:underline;text-underline-offset:2px;}

.feature .num{font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:600;letter-spacing:2px;color:var(--amber);margin-bottom:12px;}
.feature p{color:var(--muted);margin:0;font-size:15.5px;}
.feature em{font-style:italic;color:var(--text);}

.roadmap{display:flex;flex-wrap:wrap;gap:10px;}
.road-chip{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--text);text-decoration:none;font-family:'Space Grotesk',sans-serif;font-size:14px;transition:border-color .15s,transform .15s;}
.road-chip:hover{text-decoration:none;transform:translateY(-1px);border-color:var(--teal);}
.road-status{font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;padding:3px 8px;border-radius:5px;border:1px solid var(--line);color:var(--muted);}
.road-chip.live .road-status{color:var(--amber);border-color:rgba(240,168,104,.5);}
.road-chip.next .road-status{color:var(--teal);border-color:rgba(95,212,199,.45);}
/* Coming-soon chips: dim the label colour, never the whole chip (contrast ≥ 4.5:1). */
.road-chip.soon .road-track{color:var(--muted);}
.road-chip.soon .road-status{color:#B9C1DE;}

.ask .kicker{margin-bottom:12px;}
.ask ol{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:10px;color:var(--text);font-size:15.5px;line-height:1.5;}

.faq details{border:1px solid var(--line);border-radius:12px;background:var(--panel);margin-bottom:10px;padding:0 20px;}
.faq summary{cursor:pointer;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:16px;padding:16px 0;list-style:none;position:relative;padding-right:30px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:'+';position:absolute;right:0;top:14px;color:var(--amber);font-size:20px;transition:transform .2s;}
.faq details[open] summary::after{transform:rotate(45deg);}
.faq details p{color:var(--muted);margin:0 0 18px;font-size:15.5px;}

/* Scroll-reveal — progressive enhancement, armed only when JS is running. */
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease;}
.js .reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none;}}

.price-card{display:flex;flex-direction:column;}
.price-card.featured{border-color:var(--amber);background:var(--panel-2);}
.price-card .tag{align-self:flex-start;font-family:'Space Grotesk',sans-serif;font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:#1A1204;background:var(--amber);padding:4px 10px;border-radius:6px;margin-bottom:14px;}
.price-card h3{margin-bottom:4px;}
.amount{font-family:'Space Grotesk',sans-serif;font-size:38px;font-weight:700;letter-spacing:-1px;margin:6px 0 2px;}
.amount small{font-size:15px;font-weight:400;color:var(--muted);letter-spacing:0;}
.price-card ul{list-style:none;padding:0;margin:18px 0 26px;font-size:15px;color:var(--muted);}
.price-card li{padding:7px 0 7px 24px;position:relative;}
.price-card li::before{content:'→';position:absolute;left:0;color:var(--teal);}
.price-card .btn{margin-top:auto;text-align:center;}

@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr;gap:32px;}
  .hero-split{padding-top:56px;}
}

/* ---------- landing: lead form ---------- */
.join-form{display:flex;flex-direction:column;gap:14px;}
.join-form label{display:flex;flex-direction:column;gap:6px;font-family:'Space Grotesk',sans-serif;font-size:13.5px;color:var(--text);}
.join-form input[type=text],.join-form select{font:inherit;font-family:'IBM Plex Sans',sans-serif;font-size:15px;color:var(--text);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:11px 12px;width:100%;}
.join-form input:focus,.join-form select:focus{outline:2px solid var(--teal);outline-offset:1px;border-color:var(--teal);}
.join-form .two{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.join-form fieldset{border:0;padding:0;margin:0;}
.join-form legend{font-family:'Space Grotesk',sans-serif;font-size:13.5px;margin-bottom:8px;}
.join-form .chips{display:flex;flex-wrap:wrap;gap:8px;}
.join-form .chip{flex-direction:row;cursor:pointer;}
.join-form .chip input{position:absolute;opacity:0;pointer-events:none;}
.join-form .chip span{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:7px 13px;font-size:13.5px;color:var(--muted);transition:all .15s;}
.join-form .chip input:checked + span{color:#1A1204;background:var(--teal);border-color:var(--teal);}
.join-form .chip input:focus-visible + span{outline:2px solid var(--amber);}
.join-form .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}
.join-form .form-note{font-size:12.5px;margin:0;}
.join-form .form-status{margin:0;min-height:22px;font-size:15px;color:var(--teal);}
.join-form.done > *:not(.form-status){display:none;}
.join-form.done .form-status{font-size:18px;font-family:'Space Grotesk',sans-serif;padding:20px 0;}
@media (max-width:560px){.join-form .two{grid-template-columns:1fr;}}

/* ---------- chapter cards (partials/topic-card.html — catalog, hubs) ---------- */
.catalog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
@media (max-width:980px){.catalog-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:660px){.catalog-grid{grid-template-columns:1fr;}}
.topic-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  display:flex;flex-direction:column;
  transition:border-color .16s ease,transform .16s ease;
}
.topic-card:hover{border-color:var(--teal);transform:translateY(-2px);}
/* Coming-soon cards are dimmed via their thumbnail and title only — never the whole
   card — so badge and text contrast stays above WCAG AA (axe checks this). */
.topic-card.soon .thumb{opacity:0.55;}
.topic-card.soon h3{color:var(--muted);}
.topic-card.soon:hover{border-color:var(--line);transform:none;}
.thumb{
  aspect-ratio:16/9;
  background:
    radial-gradient(60% 70% at 30% 20%,rgba(95,212,199,0.14),transparent 70%),
    radial-gradient(60% 70% at 80% 90%,rgba(240,168,104,0.12),transparent 70%),
    var(--panel-2);
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
}
.thumb svg{width:58%;height:58%;overflow:visible;}
.card-body{padding:22px;display:flex;flex-direction:column;flex:1;}
.card-body h3{font-size:19px;margin-bottom:8px;}
.card-body p{color:var(--muted);font-size:15px;margin:0 0 20px;}
.card-body .btn{margin-top:auto;align-self:flex-start;}
.badges{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap;}
.badge{
  font-family:'Space Grotesk',sans-serif;
  font-size:10.5px;letter-spacing:1.6px;text-transform:uppercase;
  padding:4px 9px;border-radius:5px;border:1px solid var(--line);color:var(--muted);
}
.badge.free{color:var(--teal);border-color:rgba(95,212,199,0.45);}
.badge.soon{color:var(--muted);}
.badge.live{color:var(--amber);border-color:rgba(240,168,104,0.45);}
.track{padding-bottom:56px;}
.track-title{font-size:clamp(22px,3vw,28px);margin-bottom:22px;}

/* ---------- catalog: search + browse-by-class ---------- */
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.search{margin:22px 0 8px;max-width:560px;}
.search input{width:100%;font:inherit;font-size:16px;color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:13px 16px;}
.search input:focus{outline:2px solid var(--teal);outline-offset:1px;border-color:var(--teal);}
.search-status{font-size:13.5px;margin:8px 0 0;min-height:20px;}
.class-nav{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;}
.track-title a{color:var(--muted);text-decoration:none;} .track-title a:hover{color:var(--text);text-decoration:underline;}
.card-body h3 a{color:var(--text);text-decoration:none;} .card-body h3 a:hover{text-decoration:underline;}
.card-meta{font-size:13px!important;margin:-2px 0 8px!important;font-family:'Space Grotesk',sans-serif;}
.btn.is-disabled{cursor:default;opacity:.7;}
.no-results{padding:0 24px 40px;}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:0;margin:0 0 14px;font-family:'Space Grotesk',sans-serif;font-size:13px;color:var(--muted);}
.crumbs li + li::before{content:'›';margin-right:6px;color:var(--line);}
.crumbs a{color:var(--muted);text-decoration:none;} .crumbs a:hover{color:var(--text);text-decoration:underline;}
.crumbs [aria-current]{color:var(--text);}


/* ---------- account (server-rendered by functions/account) ---------- */
.wrap.narrow{max-width:720px;}
.account-hero{padding:56px 0 80px;}
.account-hero h1{font-size:clamp(28px,4.5vw,40px);word-break:break-word;}
.account-main .panel{margin-top:20px;}
.notice{border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin:0 0 16px;font-size:15px;background:var(--panel);}
.notice.ok{border-color:var(--teal);color:var(--teal);}
.notice.warn{border-color:var(--amber);color:var(--amber);}
.notice.error{border-color:#F08A8A;color:#F08A8A;}
.notice a{color:inherit;text-decoration:underline;}
.linklike{background:none;border:0;padding:0;font:inherit;color:var(--teal);cursor:pointer;text-decoration:underline;}
form.inline{display:inline;}
.account-main .price-card .tag{font-family:'Space Grotesk',sans-serif;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);}
.account-main .price-card .amount{font-family:'Space Grotesk',sans-serif;font-size:36px;font-weight:700;letter-spacing:-1px;margin:6px 0 4px;}
.account-main .price-card .amount small{font-size:15px;font-weight:500;color:var(--muted);letter-spacing:0;}
.price-card.plan h2{font-size:clamp(24px,3.5vw,32px);margin:8px 0 6px;}
.price-card.plan h2 small{font-size:15px;color:var(--muted);font-weight:500;}
.price-card.plan .hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px;}
.owned{list-style:none;padding:0;margin:0 0 14px;display:grid;gap:8px;}
.owned li{display:flex;gap:10px;flex-wrap:wrap;align-items:baseline;border:1px solid var(--line);border-radius:10px;padding:10px 14px;}
.owned li .muted{font-size:13px;}
.buy-chapter{display:flex;gap:12px;align-items:end;flex-wrap:wrap;margin-top:8px;}
.buy-chapter label{display:flex;flex-direction:column;gap:6px;font-family:'Space Grotesk',sans-serif;font-size:13.5px;flex:1;min-width:220px;}
.buy-chapter select,.join-form input[type=email]{font:inherit;font-family:'IBM Plex Sans',sans-serif;font-size:15px;color:var(--text);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:11px 12px;width:100%;}
.buy-chapter select:focus,.join-form input[type=email]:focus{outline:2px solid var(--teal);outline-offset:1px;border-color:var(--teal);}
.payments table{width:100%;border-collapse:collapse;font-size:14px;}
.payments th,.payments td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top;}
.payments th{font-family:'Space Grotesk',sans-serif;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--teal);}
.payments tr:last-child td{border-bottom:0;}
.account .form-status{color:var(--teal);min-height:22px;}
@media (max-width:640px){.payments th:nth-child(4),.payments td:nth-child(4){display:none;}}

/* ---------- legal pages ---------- */
.legal{padding:56px 0 90px;}
.legal .wrap{max-width:760px;}
.legal h1{font-size:clamp(30px,5vw,44px);}
.legal h2{font-size:22px;margin-top:38px;}
.legal h3{font-size:17px;margin-top:22px;}
.legal p,.legal li{font-size:16px;color:var(--text);}
.legal ul,.legal ol{padding-left:22px;}
.legal li{margin-bottom:8px;}
.legal .updated{color:var(--muted);font-size:14px;margin-bottom:28px;}
.legal .placeholder{color:var(--amber);}
.legal .box{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 20px;margin:18px 0;}
.legal p a,.legal li a,.notice a,.account-main p a{text-decoration:underline;}