/* =========================
   Variables & Base
   ========================= */
:root{
  --blue:#2980B9;
  --green:#3CA273;
  --purple:#9B59B6;
  --orange:#F39C12;
  --brand:#1BB0CE;
  --btn:#4475F2;

  --text:#111222;
  --muted:#6b7280;
  --bg:#ffffff;
  --card:#fafafa;

  --shadow:0 2px 8px rgba(0,0,0,.08);
  --radius:14px;
  --focus:2px solid #111;

  --hdr-height:80px;   /* header height */
  --font-scale:1;      /* ZebraBar font scaling hook */
}

/* base reset-ish */
*{ box-sizing:border-box }
html:focus-within{ scroll-behavior:smooth }
body{
  margin:0;
  font: calc(16px * var(--font-scale))/1.55 system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji";
  color:var(--text); background:var(--bg);
}
img{ max-width:100%; height:auto; display:block }
a{ color:inherit }
.wrap{ max-width:1140px; margin:0 auto; padding:0 16px }

/* a11y helpers */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left:1rem; top:1rem; width:auto; height:auto; padding:.5rem .75rem; background:#000; color:#fff; z-index:10000;
}
.visually-hidden{ position:absolute!important; clip:rect(1px,1px,1px,1px); padding:0; border:0; height:1px; width:1px; overflow:hidden }

/* =========================
   Fixed Header
   ========================= */
.site-header{
  position:sticky; top:0; z-index:1200;
  height:var(--hdr-height);
  background:#fff;
  box-shadow:0 2px 4px rgba(0,0,0,.05);
}
.nav-row{
  height:100%;
  display:flex; align-items:center; gap:1rem;
  max-width:1140px; margin:0 auto; padding:0 16px;
}
.brand{ display:flex; align-items:center; text-decoration:none }
.brand img{ height:32px; width:auto }

.main-nav{ margin-left:2rem }
.main-nav ul{ display:flex; gap:1.25rem; list-style:none; margin:0; padding:0 }
.main-nav a{
  display:inline-block; padding:.5rem .75rem; text-decoration:none; color:#2b2b2b;
}
.main-nav a:hover, .main-nav a:focus{ color:var(--blue); outline:none }

.cta{
  margin-left:auto;
  background:var(--btn); color:#fff;
  padding:.55rem .9rem; border-radius:8px; text-decoration:none; font-weight:600;
}
.cta:hover{ filter:brightness(.95) }

.hamburger{
  margin-left:.5rem; order:3;
  width:40px; height:40px; border:1px solid #e5e7eb; border-radius:8px; background:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.hamburger span{ display:block; width:18px; height:2px; background:#111 }
.hamburger span + span{ margin-top:4px }

/* collapse menu on tablets/phones */
@media (max-width:1023px){
  .main-nav{ display:none }
  .cta{ margin-left:auto }
  .hamburger{ order:2 }
}

/* =========================
   Hero (index top section)
   ========================= */
.hero{ padding:3.5rem 0 2rem }
.hero .wrap{
  display:grid; grid-template-columns:1.2fr .8fr; gap:2rem; align-items:center;
}
@media (max-width:980px){
  .hero .wrap{ grid-template-columns:1fr }
}
.hero h1{
  margin:0 0 .75rem;
  font-weight:800; letter-spacing:-.01em;
  font-size:clamp(44px, 6.6vw, 72px);   /* matches original “learn. build. earn.” scale */
  line-height:1.05;
}
.lede{ max-width:680px; color:var(--muted) }
.actions{ display:flex; gap:1rem; margin-top:1rem }
.btn{
  display:inline-block; background:var(--btn); color:#fff; text-decoration:none;
  padding:.75rem 1rem; border-radius:12px; font-weight:600;
}
.btn.ghost{ background:transparent; border:2px solid var(--btn); color:var(--btn) }
.btn:focus{ outline:var(--focus) }

.hero-graphic{ text-align:right }
.hero-graphic img{
  width:min(420px, 90%); height:auto;
  border-radius:12px; background:#fff; box-shadow:rgba(0,0,0,.12) 0 4px 16px;
}

/* inline highlight colors */
.hl{ font-weight:700 }
.hl-blue{ color:var(--blue) }
.hl-green{ color:var(--green) }
.hl-purple{ color:var(--purple) }
.hl-orange{ color:var(--orange) }

/* section title underline */
.section-title{ position:relative; display:inline-block; padding-bottom:.3rem }
.section-title::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  bottom:0; width:50px; height:3px; background:var(--blue); border-radius:2px;
}

/* =========================
   Cards (Audience / Results)
   ========================= */
.cards{ padding:3rem 0 }
.grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1rem;
  list-style:none; margin:0; padding:0;
}
.card{
  background:var(--card); border-radius:var(--radius); padding:1rem;
  box-shadow:var(--shadow); transition:transform .15s ease;
}
.card:hover{ transform:translateY(-2px) }
.card .icon{ font-size:1.6rem; opacity:.8 }
@media (max-width:960px){ .grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:560px){ .grid{ grid-template-columns:1fr } }

/* =========================
   Steps (“How it works”)
   ========================= */
.steps{ padding:3rem 0; background:#f7f9fc }
.step-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; list-style:none; margin:0; padding:0;
}
.step-grid li{
  background:#fff; border-radius:var(--radius); padding:1rem; box-shadow:var(--shadow);
}
.bubble{
  width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--blue); color:#fff; font-weight:700; margin-bottom:.5rem;
}
@media (max-width:960px){ .step-grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:560px){ .step-grid{ grid-template-columns:1fr } }

/* =========================
   Two-column (mentorship section)
   ========================= */
.two-col{
  display:grid; grid-template-columns:1.2fr .8fr; gap:2rem; align-items:center;
}
@media (max-width:920px){ .two-col{ grid-template-columns:1fr } }

/* =========================
   Form Page (waitlist/)
   ========================= */
.form-page{ padding:3rem 0 }
.wrap.narrow{ max-width:680px }
.grid.two{ display:grid; grid-template-columns:1fr 1fr; gap:1rem }
label{ display:block; margin:.75rem 0 }
input,select,textarea{
  width:100%; padding:.7rem .8rem; border:1px solid #d1d5db; border-radius:10px; font:inherit; background:#fff;
}
input:focus,select:focus,textarea:focus{ outline:var(--focus) }
.check{ display:inline-flex; align-items:center; gap:.5rem; margin-right:1rem }

.notice{ border-radius:10px; padding:1rem; margin:1rem 0 }
.notice.success{ background:#e8fff1; border:1px solid #16a34a33 }
.notice.error{ background:#fff3f3; border:1px solid #ef444433 }

/* =========================
   Footer
   ========================= */
.site-footer{ padding:2rem 0; background:#f9fafb; margin-top:3rem }
.footer-links{ display:flex; gap:1rem; list-style:none; margin:0 0 .5rem; padding:0 }
.back-to-top{
  position:fixed; right:1rem; bottom:1rem; border:0; background:#111; color:#fff;
  border-radius:999px; width:44px; height:44px; cursor:pointer; display:none;
}
.back-to-top.show{ display:block }

/* =========================
   Hooks used by ZebraBar toggles
   (paired with zebrabar.css + zebrabar.js)
   ========================= */
.theme-dark { color-scheme:dark; background:#0f1115; color:#e5e7eb }
.theme-dark .site-header{ background:#11151b; box-shadow:none }
.theme-light { background:#ffffff; color:#111222 }
.high-contrast { filter: contrast(125%) }
.underline-links a, .underline-links a * { text-decoration: underline !important }
.grayscale { filter: grayscale(100%) }
.reduce-motion * { transition:none !important; animation:none !important }
.dyslexic {
  font-family:"OpenDyslexic","Atkinson Hyperlegible",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
.focus-mode .wrap, .focus-mode main { max-width:720px }
.reading-ruler::before{
  content:""; position:fixed; left:0; right:0; top:0; height:35%;
  background:rgba(0,0,0,.20); pointer-events:none; z-index:1100;
}
.reading-ruler::after{
  content:""; position:fixed; left:0; right:0; bottom:0; height:55%;
  background:rgba(0,0,0,.20); pointer-events:none; z-index:1100;
}

/* =========================
   Layout offset for left ZebraBar tab
   (panel margins handled in zebrabar.css)
   ========================= */
@media (min-width:1024px){
  body{ margin-left: 56px; } /* keep in sync with --zebra-w default */
}