/* Zero To Hero Academy: shared system
   Family baseline: Hero Labs vision (ink, paper, purple, gold, teal, Mona Sans).
   Academy accents kept: yellow on the wordmark and on-ink emphasis, purple-light and
   teal-light for dark mode. Light and dark themes; the toggle writes html[data-theme]. */

@font-face{font-family:"Mona Sans";src:url("../assets/fonts/mona-sans-latin-wght-normal.woff2") format("woff2");font-weight:200 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Mona Sans";src:url("../assets/fonts/mona-sans-latin-ext-wght-normal.woff2") format("woff2");font-weight:200 900;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"JetBrains Mono";src:url("../assets/fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("../assets/fonts/jetbrains-mono-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Syne";src:url("../assets/fonts/syne-latin-800-normal.woff2") format("woff2");font-weight:800;font-display:swap}

:root{
  /* fixed family colours */
  /* ink grounds (nav, hero, closing band, footer) follow the theme: lavender paper in light, ink in dark */
  --ink:#f2eff8; --ink-2:#ffffff; --ink-3:#e9e5f2; --ink-line:#dfdae9; --ink-line-2:#c9c3d8; --ink-text:#17151f; --ink-muted:#57536a; --ink-faint:#6b6779;
  --hl:#875c00; --on-hl:#ffffff; --on-done:#ffffff; --done-g:#0f766e; --link-g:#6d28d9; --focus-g:#7c3aed;
  --purple:#7c3aed; --purple-hover:#6d28d9; --purple-ink:#a78bfa; --purple-light:#a855f7;
  --gold:#c9a646; --gold-light:#e0bf5f; --yellow:#f5c842;
  --teal:#14b8a6; --teal-deep:#0f766e; --teal-light:#2dd4bf;

  /* themed (light) */
  --bg:#fbfaf7; --surface:#ffffff; --surface-2:#f4f2f8; --line:#e7e4ee; --line-strong:#cfcadb;
  --text:#17151f; --muted:#5d5a6b; --link:#6d28d9; --accent-soft:#f3edff; --done:#0f766e; --done-soft:#f0fdfa;
  --shadow-exhibit:0 30px 60px -40px rgba(23,21,31,.35),0 2px 6px -2px rgba(23,21,31,.08);
  --scroll-thumb:#c9c4d6;

  --sans:"Mona Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --ease-out:cubic-bezier(.23,1,.32,1); --ease-in-out:cubic-bezier(.77,0,.175,1);
  --r-btn:12px; --r-panel:14px; --r-surface:20px; --r-card:22px;
  --section-y:clamp(4.5rem,9vw,8rem);
  --nav-h:68px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#100e18; --surface:#17141f; --surface-2:#1d1a29; --line:#2a2638; --line-strong:#3a3550;
    --text:#f4f2fa; --muted:#a9a5b8; --link:#c4b5fd; --accent-soft:#221a38; --done:#2dd4bf; --done-soft:#0f2a28;
    --shadow-exhibit:0 30px 60px -36px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.04);
    --scroll-thumb:#3a3550; color-scheme:dark;
    --ink:#0b0a12; --ink-2:#14121d; --ink-3:#1d1a29; --ink-line:#2a2638; --ink-line-2:#3a3550; --ink-text:#f4f2fa; --ink-muted:#a9a5b8; --ink-faint:#8d88a0; --hl:#f5c842; --on-hl:#0b0a12; --on-done:#0b0a12; --done-g:#2dd4bf; --link-g:#a78bfa; --focus-g:#e0bf5f;
  }
}
:root[data-theme="dark"]{
  --bg:#100e18; --surface:#17141f; --surface-2:#1d1a29; --line:#2a2638; --line-strong:#3a3550;
  --text:#f4f2fa; --muted:#a9a5b8; --link:#c4b5fd; --accent-soft:#221a38; --done:#2dd4bf; --done-soft:#0f2a28;
  --shadow-exhibit:0 30px 60px -36px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.04);
  --scroll-thumb:#3a3550; color-scheme:dark;
  --ink:#0b0a12; --ink-2:#14121d; --ink-3:#1d1a29; --ink-line:#2a2638; --ink-line-2:#3a3550; --ink-text:#f4f2fa; --ink-muted:#a9a5b8; --ink-faint:#8d88a0; --hl:#f5c842; --on-hl:#0b0a12; --on-done:#0b0a12; --done-g:#2dd4bf; --link-g:#a78bfa; --focus-g:#e0bf5f;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scrollbar-color:var(--scroll-thumb) transparent;scroll-padding-top:calc(var(--nav-h) + 16px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{font-family:var(--sans);font-size:17px;line-height:1.55;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;font-feature-settings:"ss01";text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1px}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--purple);color:#fff}
.ink ::selection{background:var(--gold-light);color:#0b0a12}
:focus-visible{outline:2px solid var(--purple);outline-offset:3px;border-radius:6px}
.ink :focus-visible{outline-color:var(--focus-g)}
input,textarea{caret-color:var(--purple)}
.num,.mono{font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;left:12px;top:-60px;z-index:100;background:var(--purple);color:#fff;padding:.6rem 1rem;border-radius:10px;font-weight:600;text-decoration:none;transition:top 160ms var(--ease-out)}
.skip-link:focus{top:12px}

.wrap{width:min(1200px,100% - 48px);margin-inline:auto}
@media (max-width:520px){.wrap{width:calc(100% - 32px)}}

/* Grounds: paper follows the theme, ink is always ink */
.ink{background:var(--ink);color:var(--ink-text);--muted:var(--ink-muted);--line:var(--ink-line);--link:var(--link-g)}
.band{background:var(--surface-2)}

/* Type */
h1,h2,h3,h4{text-wrap:balance;font-weight:720;letter-spacing:-.03em;line-height:1.04}
.display{font-size:clamp(2.6rem,6vw,5.2rem);font-weight:760;letter-spacing:-.04em;line-height:.98}
.h2{font-size:clamp(2rem,4.2vw,3.4rem)}
.h3{font-size:clamp(1.25rem,1.8vw,1.5rem);letter-spacing:-.02em;line-height:1.15}
.lede{font-size:clamp(1.05rem,1.4vw,1.2rem);color:var(--muted);max-width:60ch;text-wrap:pretty}
p{text-wrap:pretty}
.muted{color:var(--muted)}
.hl-yellow{color:var(--hl)}
.hl-gold{color:var(--gold-light)}
.hl-purple{color:var(--purple)}
.ink .hl-purple{color:var(--purple-ink)}
:root[data-theme="dark"] .hl-purple{color:var(--purple-ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hl-purple{color:var(--purple-ink)}}

/* Section heads: heading carries its own weight */
.sec{padding-block:var(--section-y)}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:1.25rem 4rem;align-items:end;margin-bottom:clamp(2.5rem,5vw,4rem)}
.sec-head .lede{justify-self:end}
@media (max-width:860px){.sec-head{grid-template-columns:1fr}.sec-head .lede{justify-self:start}}

/* Icons (Phosphor sprite) */
.i{width:20px;height:20px;flex:none;fill:currentColor}
.i-sm{width:16px;height:16px}
.i-lg{width:24px;height:24px}

/* Buttons: one primary per view, press feedback, hover only where hover exists */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;height:48px;padding:0 1.25rem;border-radius:var(--r-btn);font:600 1rem/1 var(--sans);text-decoration:none;white-space:nowrap;border:1px solid transparent;cursor:pointer;transition:transform 160ms var(--ease-out),background-color 200ms ease,border-color 200ms ease,color 200ms ease}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--purple);color:#fff}
.btn-line{background:var(--surface);color:var(--text);border-color:var(--line-strong)}
.btn-ghost{background:transparent;color:var(--ink-text);border-color:var(--ink-line-2)}
.btn-gold{background:var(--gold-light);color:#0b0a12}
.btn-sm{height:40px;padding:0 1rem;font-size:.92rem}
.btn .i{width:18px;height:18px}
.arrow{transition:transform 200ms var(--ease-out)}
.link-arrow{display:inline-flex;align-items:center;gap:.4rem;font-weight:620;color:var(--link);text-decoration:none}
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover{background:var(--purple-hover)}
  .btn-line:hover{border-color:var(--muted)}
  .btn-ghost:hover{background:var(--ink-2);border-color:var(--ink-faint)}
  .btn-gold:hover{background:var(--yellow)}
  a:hover .arrow,button:hover .arrow{transform:translateX(3px)}
  .link-arrow:hover{text-decoration:underline}
}

/* Chips */
.chip{display:inline-flex;align-items:center;gap:.4rem;height:28px;padding:0 .7rem;border-radius:99px;border:1px solid var(--line);font-size:.82rem;font-weight:560;color:var(--muted);background:var(--surface)}
.ink .chip{background:var(--ink-2)}
.chip.done{color:var(--done);border-color:color-mix(in srgb,var(--done) 35%,transparent);background:var(--done-soft)}

/* Nav: matches the Hero Labs bar. Translucent paper in light, translucent ink in dark;
   links are padded pills with a hover wash and an underline for the current page. */
.site-nav{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--surface) 88%,transparent);color:var(--text);border-bottom:1px solid var(--line);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px)}
.site-nav .wrap{display:flex;align-items:center;gap:1.5rem;height:var(--nav-h)}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--text);white-space:nowrap;flex:none}
.brand img{height:34px;width:auto}
.brand span{font-family:"Syne",var(--sans);font-weight:800;font-size:1.18rem;letter-spacing:-.01em}
.brand b{color:var(--purple);font-weight:800}
.site-foot .brand{color:var(--ink-text)}
.site-foot .brand b{color:var(--hl)}
.nav-links{display:flex;align-items:center;gap:.25rem;list-style:none;font-size:.95rem;color:var(--muted);white-space:nowrap}
.nav-links a{position:relative;display:block;padding:.5rem .75rem;border-radius:9px;text-decoration:none;transition:color 160ms ease,background-color 160ms ease}
.nav-links a::after{content:"";position:absolute;left:.75rem;right:.75rem;bottom:2px;height:2px;border-radius:2px;background:var(--purple);transform:scaleX(0);transform-origin:left center;transition:transform 240ms var(--ease-out)}
.nav-links a[aria-current="page"]{color:var(--text)}
.nav-links a[aria-current="page"]::after{transform:scaleX(1)}
@media (hover:hover) and (pointer:fine){.nav-links a:hover{color:var(--text);background:var(--accent-soft)}}
.nav-sp{flex:1}
.nav-end{display:flex;align-items:center;gap:.5rem}
.nav__auth-slot{list-style:none;display:flex}
/* clerk-auth.js renders .btn--teal / .btn--ghost into the slot; the system styles any link there */
.site-nav .nav__auth-slot a,.mnav .nav__auth-slot a{display:inline-flex;align-items:center;height:40px;padding:0 .95rem;border-radius:var(--r-btn);border:1px solid var(--line-strong);color:var(--text);font-weight:600;font-size:.92rem;text-decoration:none;transition:transform 160ms var(--ease-out),background-color 200ms ease,border-color 200ms ease}
.site-nav .nav__auth-slot a:active,.mnav .nav__auth-slot a:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.site-nav .nav__auth-slot a:hover{border-color:var(--muted);background:var(--surface)}}
.icon-btn{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:var(--r-btn);color:var(--muted);border:1px solid transparent;transition:transform 160ms var(--ease-out),color 200ms ease,background-color 200ms ease}
.icon-btn:active{transform:scale(.94)}
@media (hover:hover) and (pointer:fine){.icon-btn:hover{color:var(--text);background:var(--accent-soft)}}
.site-foot .icon-btn{color:var(--ink-muted)}
@media (hover:hover) and (pointer:fine){.site-foot .icon-btn:hover{color:var(--ink-text);background:var(--ink-2)}}
/* Nav call to action: purple on light, gold on dark, with the family glow */
.nav__cta.btn{height:40px;font-size:.92rem;padding:0 1.1rem;background:var(--purple);color:#fff;border-color:var(--purple);box-shadow:0 8px 20px -12px rgba(124,58,237,.7)}
.nav__cta .i{width:18px;height:18px}
@media (hover:hover) and (pointer:fine){.nav__cta.btn:hover{background:var(--purple-hover)}}
.theme-toggle .i-moon{display:none}
:root[data-theme="dark"] .theme-toggle .i-sun{display:none}
:root[data-theme="dark"] .theme-toggle .i-moon{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .theme-toggle .i-sun{display:none}:root:not([data-theme="light"]) .theme-toggle .i-moon{display:block}}
.nav-burger{display:none}
@media (max-width:1180px){.nav-links{display:none}.nav-burger{display:inline-grid}.site-nav .nav-end>.nav__auth-slot{display:none}}
@media (max-width:520px){.site-nav .wrap{gap:.5rem}.nav-end{gap:.35rem}.nav-end>.theme-toggle{display:none}.brand span{font-size:1.02rem}.brand img{height:30px}.nav__cta .long{display:none}.nav__cta.btn{padding:0 .8rem}}
@media (min-width:521px){.nav__cta .short{display:none}}

/* Dark nav */
:root[data-theme="dark"] .site-nav{background:color-mix(in srgb,var(--ink) 92%,transparent);border-bottom-color:rgba(255,255,255,.06)}
:root[data-theme="dark"] .brand b{color:var(--hl)}
:root[data-theme="dark"] .nav-links{color:var(--ink-muted)}
:root[data-theme="dark"] .nav-links a[aria-current="page"]{color:#fff}
:root[data-theme="dark"] .nav-links a::after{background:var(--gold-light)}
:root[data-theme="dark"] .nav__cta.btn{background:var(--gold-light);color:#0b0a12;border-color:var(--gold-light);box-shadow:0 8px 20px -12px rgba(224,191,95,.7)}
@media (hover:hover) and (pointer:fine){:root[data-theme="dark"] .nav-links a:hover,:root[data-theme="dark"] .icon-btn:hover{color:#fff;background:rgba(255,255,255,.07)}:root[data-theme="dark"] .nav__cta.btn:hover{background:#ecd07a}}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .site-nav{background:color-mix(in srgb,var(--ink) 92%,transparent);border-bottom-color:rgba(255,255,255,.06)}
  :root:not([data-theme="light"]) .brand b{color:var(--hl)}
  :root:not([data-theme="light"]) .nav-links{color:var(--ink-muted)}
  :root:not([data-theme="light"]) .nav-links a[aria-current="page"]{color:#fff}
  :root:not([data-theme="light"]) .nav-links a::after{background:var(--gold-light)}
  :root:not([data-theme="light"]) .nav__cta.btn{background:var(--gold-light);color:#0b0a12;border-color:var(--gold-light);box-shadow:0 8px 20px -12px rgba(224,191,95,.7)}
}
@media (prefers-color-scheme:dark) and (hover:hover) and (pointer:fine){:root:not([data-theme="light"]) .nav-links a:hover,:root:not([data-theme="light"]) .icon-btn:hover{color:#fff;background:rgba(255,255,255,.07)}:root:not([data-theme="light"]) .nav__cta.btn:hover{background:#ecd07a}}

/* Mobile nav sheet */
.mnav-theme{display:flex;align-items:center;gap:.6rem;width:100%;margin-top:.75rem;height:44px;padding:0 .25rem;border-radius:10px;color:var(--muted);font-weight:600}
.mnav-theme .i{width:20px;height:20px}
.mnav .nav__auth-slot a{width:100%;justify-content:center}
.mnav{position:fixed;inset:var(--nav-h) 0 auto 0;z-index:39;background:var(--surface);color:var(--text);border-bottom:1px solid var(--line);box-shadow:0 24px 40px -28px rgba(23,21,31,.35);padding:1rem 24px 1.5rem;transform-origin:top;transition:opacity 200ms var(--ease-out),transform 200ms var(--ease-out)}
.mnav[hidden]{display:block;visibility:hidden;opacity:0;transform:translateY(-8px);pointer-events:none}
.mnav ul{list-style:none;display:grid;gap:.25rem;margin-bottom:1rem}
.mnav li>a:not(.btn){display:block;padding:.8rem 0;font-size:1.1rem;font-weight:600;text-decoration:none;border-bottom:1px solid var(--line)}
.mnav .btn{width:100%}
@media (min-width:1181px){.mnav{display:none!important}}

/* Footer: ink */
.site-foot{padding:clamp(3.5rem,6vw,5rem) 0 2rem;border-top:1px solid var(--ink-line)}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:2.5rem}
.foot-grid p{color:var(--ink-muted);font-size:.95rem;margin:1rem 0 1.25rem;max-width:34ch}
.foot-grid h2{font-size:.8rem;font-weight:650;letter-spacing:.02em;color:var(--ink-faint);margin-bottom:1rem}
.foot-grid ul{list-style:none;display:grid;gap:.6rem;font-size:.95rem}
.foot-grid ul a{text-decoration:none;color:var(--ink-muted);transition:color 200ms ease}
@media (hover:hover){.foot-grid ul a:hover{color:var(--ink-text)}}
.foot-grid .social{display:flex;gap:.25rem;margin-left:-8px}
.foot-bottom{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--ink-line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;font-size:.85rem;color:var(--ink-faint)}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}.foot-grid>div:first-child{grid-column:1/-1}}

/* Reveal: visible by default, enhanced only when JS marks the page */
.js-motion [data-reveal]{opacity:0;transform:translateY(14px);transition:opacity 600ms var(--ease-out),transform 600ms var(--ease-out)}
.js-motion [data-reveal].in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  /* Keep short fades and colour changes; remove travel, scaling and looping motion */
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
  *,*::before,*::after{transition-property:opacity,color,background-color,border-color,box-shadow!important;transition-duration:160ms!important}
  .js-motion [data-reveal]{opacity:1;transform:none}
}