:root{
  --navy:#061d37; --navy2:#0b315e; --blue:#4aa3ff; --gold:#ffc84a; --text:#eaf3ff; --muted:#b7c6d9; --card:rgba(255,255,255,.08); --line:rgba(255,255,255,.18);
}
*{box-sizing:border-box} body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:radial-gradient(circle at 20% 0,#123d72 0,#061d37 45%,#03101f 100%);color:var(--text);line-height:1.6}
a{color:inherit;text-decoration:none}.site-header{position:sticky;top:0;z-index:20;background:rgba(3,16,31,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}.top-nav{max-width:1180px;margin:auto;padding:14px 22px;display:flex;align-items:center;gap:20px}.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.08em}.brand img{width:238px;max-width:42vw;height:auto;object-fit:contain;display:block}.brand span{display:none;flex-direction:column;line-height:1}.brand small{font-size:.72rem;color:var(--gold);letter-spacing:.22em}.nav-links{margin-left:auto;display:flex;gap:18px;align-items:center}.nav-links a{color:#dce8f7;opacity:.9}.nav-links a.active,.nav-links a:hover{color:var(--gold)}.contact-pill,.btn{border:1px solid rgba(255,200,74,.6);border-radius:999px;padding:9px 14px}.nav-toggle{display:none;margin-left:auto;background:transparent;color:white;border:1px solid var(--line);border-radius:10px;padding:8px 12px}.hero-wrap{padding:46px 22px}.hero{max-width:1180px;margin:auto;border:1px solid var(--line);border-radius:32px;background:linear-gradient(145deg,rgba(255,255,255,.1),rgba(255,255,255,.035));box-shadow:0 30px 90px rgba(0,0,0,.35);overflow:hidden}.hero-grid{display:grid;grid-template-columns:1fr 1.08fr;gap:32px;align-items:center;padding:48px}.eyebrow{color:var(--gold);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.82rem}.hero h1{font-size:clamp(3rem,7vw,6.4rem);line-height:.92;margin:18px 0}.gold{color:var(--gold)}.blue{color:var(--blue)}.hero p{font-size:1.35rem;color:var(--muted);max-width:560px}.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}.btn{display:inline-flex;align-items:center;gap:8px;font-weight:700}.btn.primary{background:linear-gradient(180deg,#ffd86b,#c6922e);color:#10243c;border:none;box-shadow:0 12px 30px rgba(255,200,74,.22)}.btn.ghost{background:rgba(255,255,255,.06)}.hero-visual{position:relative;border-radius:28px;overflow:hidden;border:1px solid var(--line);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 18px 50px rgba(0,0,0,.25)}.hero-visual img{display:block;width:100%;height:auto}.formula-float{position:absolute;left:22px;top:18px;background:rgba(3,16,31,.65);padding:8px 12px;border-radius:12px;color:white;font-weight:800}.benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line);background:rgba(0,0,0,.12)}.benefit{display:flex;gap:12px;align-items:center;padding:20px 24px;border-right:1px solid var(--line)}.benefit:last-child{border-right:0}.benefit div:first-child{font-size:1.8rem}.benefit span{display:block;color:var(--muted);font-size:.92rem}.section{max-width:1180px;margin:0 auto;padding:42px 22px}.section-head{display:flex;justify-content:space-between;gap:24px;align-items:end;margin-bottom:18px}.section h2{font-size:clamp(1.8rem,3vw,2.7rem);margin:0}.section-sub{color:var(--muted);max-width:600px}.grid{display:grid;gap:18px}.grid.four{grid-template-columns:repeat(4,1fr)}.grid.three{grid-template-columns:repeat(3,1fr)}.card,.topic-card,.video-card,.resource-card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:22px;box-shadow:0 12px 36px rgba(0,0,0,.18)}.card:hover,.topic-card:hover,.video-card:hover{transform:translateY(-3px);transition:.2s;border-color:rgba(255,200,74,.5)}.tag{display:inline-block;background:rgba(255,200,74,.13);border:1px solid rgba(255,200,74,.35);color:var(--gold);padding:3px 9px;border-radius:999px;font-size:.78rem;font-weight:800}.card h3,.topic-card h3{margin:.7rem 0 .4rem}.card p,.topic-card p,.resource-card p,.video-card p{color:var(--muted)}.ad-slot{border:1px dashed rgba(255,255,255,.28);border-radius:18px;padding:18px;text-align:center;color:#9eb0c7;background:rgba(255,255,255,.035)}.video-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.video-card{padding:0;overflow:hidden}.video-card h4{padding:0 16px;margin:14px 0 2px}.video-card p{padding:0 16px 16px;margin:0}.video-thumb{position:relative;border:0;padding:0;width:100%;cursor:pointer;background:#000}.video-thumb img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}.play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;background:rgba(255,200,74,.94);color:#061d37;display:grid;place-items:center;font-weight:900}.quote{font-size:1.3rem;color:#dfeaf7;border-left:5px solid var(--gold);padding:18px 22px;background:rgba(255,255,255,.06);border-radius:16px}.site-footer{border-top:1px solid var(--line);margin-top:40px;background:rgba(0,0,0,.22)}.footer-grid{max-width:1180px;margin:auto;padding:32px 22px;display:grid;grid-template-columns:2fr 1fr 2fr;gap:30px}.footer-grid a{display:block;color:var(--muted)}.search-box{width:100%;border-radius:18px;border:1px solid var(--line);padding:16px 18px;font-size:1rem;background:rgba(255,255,255,.08);color:white}.page-hero{max-width:1180px;margin:0 auto;padding:52px 22px 20px}.page-hero h1{font-size:clamp(2.5rem,5vw,4.8rem);line-height:1;margin:0 0 12px}.content-panel{max-width:980px;margin:0 auto 40px;padding:24px;background:rgba(255,255,255,.07);border:1px solid var(--line);border-radius:24px}.content-panel li{margin:.4rem 0}.note{background:rgba(74,163,255,.09);border-left:4px solid var(--blue);padding:14px;border-radius:12px;margin:18px 0}@media(max-width:900px){.hero-grid,.grid.four,.grid.three,.video-grid,.footer-grid{grid-template-columns:1fr}.hero-grid{padding:28px}.benefits{grid-template-columns:1fr 1fr}.nav-toggle{display:block}.nav-links{display:none;position:absolute;right:16px;top:70px;flex-direction:column;align-items:flex-start;background:#061d37;border:1px solid var(--line);border-radius:18px;padding:18px}.nav-links.open{display:flex}.section-head{display:block}}@media(max-width:560px){.benefits{grid-template-columns:1fr}.benefit{border-right:0;border-bottom:1px solid var(--line)}.top-nav{padding:12px}.brand span{display:none}}


/* v4 homepage: the teacher/graph artwork now spans the whole hero card, with the text layered on top. */
.hero.hero-full-art{
  position:relative;
  min-height:720px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background:
    linear-gradient(90deg, rgba(3,16,31,.98) 0%, rgba(3,16,31,.92) 28%, rgba(3,16,31,.42) 57%, rgba(3,16,31,.12) 100%),
    url('../img/teacher-graph-hero-wide.png') center right/cover no-repeat;
}
.hero.hero-full-art .hero-grid{
  display:block;
  padding:0;
}
.hero.hero-full-art .hero-grid>div:first-child{
  max-width:600px;
  padding:58px 54px 38px;
  position:relative;
  z-index:1;
}
.hero.hero-full-art .benefits{
  position:relative;
  z-index:1;
  margin-top:auto;
  backdrop-filter:blur(8px);
}
.hero.hero-full-art .hero-visual{display:none}
@media(max-width:900px){
  .brand img{width:190px}
  .hero.hero-full-art{min-height:auto;background-position:62% center}
  .hero.hero-full-art .hero-grid>div:first-child{padding:36px 28px 130px;max-width:100%}
}
@media(max-width:560px){
  .brand img{width:160px;max-width:58vw}
  .hero.hero-full-art .hero-grid>div:first-child{padding:30px 22px 110px}
}


/* Content batch 1 additions */
.mini-nav{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}.mini-nav a{border:1px solid var(--line);background:rgba(255,255,255,.06);border-radius:999px;padding:7px 12px;color:#dce8f7}.mini-nav a:hover{border-color:rgba(255,200,74,.55);color:var(--gold)}
.formula-card{background:rgba(3,16,31,.42);border:1px solid var(--line);border-radius:18px;padding:18px;margin:16px 0;overflow-x:auto}.formula-card strong{display:block;color:var(--gold);margin-bottom:8px}.steps{padding-left:1.25rem}.steps li{margin:.65rem 0}.worked-example{border-color:rgba(255,200,74,.34);box-shadow:0 14px 42px rgba(255,200,74,.06)}.svg-figure{margin:24px 0;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:20px;padding:14px}.svg-figure figcaption{color:var(--muted);font-size:.94rem;margin:10px 4px 2px}.math-svg{width:100%;height:auto;display:block}.grid.two{grid-template-columns:repeat(2,1fr)}.grid.five{grid-template-columns:repeat(5,1fr)}.compact-grid{gap:12px}.compact-grid .formula-card{margin:0;text-align:center}.resource-card h3{margin:.7rem 0 .35rem}.content-panel h2{margin-top:0}.page-hero .section-sub{font-size:1.15rem}
@media(max-width:900px){.grid.two,.grid.five{grid-template-columns:1fr}.compact-grid .formula-card{text-align:left}.hero.hero-full-art{background-image:linear-gradient(90deg, rgba(3,16,31,.96) 0%, rgba(3,16,31,.78) 48%, rgba(3,16,31,.18) 100%),url('../img/teacher-graph-hero.png');background-size:cover;background-position:center bottom}.hero.hero-full-art .hero-grid>div:first-child{padding-bottom:190px}.hero h1{font-size:clamp(3rem,16vw,4.8rem)}}
@media(max-width:560px){.hero.hero-full-art{background-position:68% bottom}.hero.hero-full-art .hero-grid>div:first-child{padding-bottom:240px}.page-hero{padding-top:36px}.content-panel{margin-left:12px;margin-right:12px}}


/* Content batch 2 additions */
@media(max-width:680px){
  .hero.hero-full-art{
    min-height:760px;
    background-image:linear-gradient(180deg, rgba(3,16,31,.98) 0%, rgba(3,16,31,.90) 38%, rgba(3,16,31,.30) 72%, rgba(3,16,31,.08) 100%),url('../img/teacher-graph-hero-mobile.png') !important;
    background-position:center bottom !important;
    background-size:cover !important;
  }
  .hero.hero-full-art .hero-grid>div:first-child{padding:30px 22px 390px !important;}
  .hero.hero-full-art .benefits{background:rgba(3,16,31,.72)}
}
.kicker-list{display:grid;gap:10px;margin:18px 0}.kicker-list span{display:block;background:rgba(255,255,255,.055);border:1px solid var(--line);border-radius:14px;padding:12px 14px}.answer-box{background:rgba(255,200,74,.09);border:1px solid rgba(255,200,74,.30);border-radius:16px;padding:14px 16px;margin-top:14px}.answer-box strong{color:var(--gold)}

/* Content Batch 3 helpers */
.math-svg{width:100%;height:auto;display:block}.svg-figure{margin:1.2rem 0}.svg-figure figcaption{color:var(--muted);font-size:.95rem;margin-top:.5rem}.formula-card{border-left:4px solid var(--gold);background:rgba(255,200,74,.08);padding:14px 16px;border-radius:14px;margin:16px 0}.worked-example{border-left:4px solid var(--blue)}
