:root{
  --bg:#0b0e13; --fg:#e7ebef; --card:#14181f; --elev:#181d24;
  --strip:#10141a; --muted:#7d8899; --line:#272d35;
  --primary:#00b3d6; --glow:#00d5ff; --radius:0.5rem;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);
  font:16px/1.6 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;line-height:1.1;letter-spacing:-.02em}
h1{font-size:clamp(40px,6.2vw,80px);font-weight:800}
h2{font-size:clamp(28px,3.6vw,44px);font-weight:800}
h3{font-size:19px;font-weight:700;letter-spacing:-.01em}
p{margin:0}
svg{width:22px;height:22px}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:var(--primary);color:#04121a;
  padding:10px 16px;border-radius:8px;z-index:99;font-weight:700}

/* nav */
header{position:sticky;top:0;z-index:50;background:rgba(11,14,19,.82);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:28px;height:72px}
.brand{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:800;
  letter-spacing:-.02em}
.brand svg{height:21px;width:auto;flex:none}
.navlinks{display:flex;gap:28px;margin-left:auto;font-size:14.5px;color:var(--muted)}
.navlinks a:hover{color:var(--fg)}
.navlinks a.mob{display:none}
.navcta{display:flex;gap:12px;align-items:center}
.menu{display:none;background:none;border:1px solid var(--line);color:var(--fg);
  width:40px;height:36px;border-radius:8px;font-size:18px;cursor:pointer}

/* buttons */
/*
 * The gap here is for the trailing arrow icon. Any bare text node beside another
 * element becomes its own flex item and inherits the gap too — which is why
 * "Report an incident" rendered with a visible 9px hole either side of "an"
 * once the label was split for the mobile breakpoint. Labels are wrapped in a
 * single <span> so a button is always exactly two flex items: label and icon.
 */
.btn>span{display:inline}
.btn{display:inline-flex;align-items:center;gap:9px;background:var(--primary);
  color:#04121a;font-weight:700;font-size:15px;padding:13px 22px;
  border:1px solid var(--primary);border-radius:var(--radius);cursor:pointer;
  transition:filter .15s,transform .08s}
.btn:hover{filter:brightness(1.1)}
.btn:active{transform:scale(.98)}
.btn svg{width:17px;height:17px}
.btn.sm{padding:9px 16px;font-size:14px}
.btn.ghost{background:transparent;color:var(--fg);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--primary);filter:none}
.btn.danger{background:transparent;color:#ef4444;border-color:rgba(239,68,68,.45);
  font-weight:600}
.btn.danger:hover{background:rgba(239,68,68,.09);filter:none}
.btn[disabled]{opacity:.6;cursor:default}

/* hero */
.hero{position:relative;padding:120px 0 116px;text-align:center;overflow:hidden}
.hero .mesh{position:absolute;inset:0;
  background:
    radial-gradient(900px 380px at 50% 8%,rgba(0,181,214,.14),transparent 70%),
    radial-gradient(600px 300px at 12% 60%,rgba(0,181,214,.07),transparent 70%),
    radial-gradient(600px 300px at 88% 55%,rgba(0,181,214,.07),transparent 70%);
  pointer-events:none}
.hero .inner{position:relative}
.eyebrow{display:inline-flex;align-items:center;gap:9px;border:1px solid rgba(0,181,214,.4);
  background:rgba(0,181,214,.08);color:var(--primary);border-radius:99px;
  padding:7px 16px;font-size:12px;letter-spacing:.16em;font-weight:600;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;margin-bottom:30px}
.eyebrow svg{width:14px;height:14px}
h1 .accent{color:var(--primary);display:block}
.hero p{max-width:640px;margin:26px auto 0;color:var(--muted);font-size:19px}
.actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:36px}
.actions.start{justify-content:flex-start;margin-top:26px}

/* strip */
.strip{background:var(--strip);border-block:1px solid var(--line);
  padding:22px 0;text-align:center;color:var(--muted);font-size:14.5px}
.strip span{display:inline-flex;align-items:center;gap:12px}
.strip svg{width:15px;height:15px;color:var(--primary);opacity:.75}

/* sections */
section{padding:92px 0}
section[id]{scroll-margin-top:88px}
.label{color:var(--primary);font-size:12px;letter-spacing:.18em;font-weight:700;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;margin-bottom:14px}
.lead{color:var(--muted);margin-top:14px;font-size:17px;max-width:640px}
.grid{display:grid;gap:20px;margin-top:44px}
.mt36{margin-top:36px}
.upper{text-transform:uppercase}
.g4{grid-template-columns:repeat(4,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:26px 24px;transition:border-color .18s,transform .18s}
.card:hover{border-color:rgba(0,181,214,.45);transform:translateY(-2px)}
.card .ico{width:44px;height:44px;border-radius:10px;display:grid;place-items:center;
  background:rgba(0,181,214,.1);color:var(--primary);margin-bottom:18px}
.card h3{margin-bottom:10px}
.card p{color:var(--muted);font-size:14.5px;line-height:1.65}
.sub-block{margin-top:80px}

/* approach */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.points{display:flex;flex-direction:column;gap:14px}
.point{display:flex;align-items:center;gap:14px;background:var(--elev);
  border:1px solid var(--line);border-radius:12px;padding:18px 22px;font-weight:600}
.point .ico{width:38px;height:38px;border-radius:9px;display:grid;place-items:center;
  background:rgba(0,181,214,.1);color:var(--primary);flex:none}
.point svg{width:19px;height:19px}

/* academy */
.panel{background:linear-gradient(150deg,var(--elev),var(--card));
  border:1px solid var(--line);border-radius:16px;padding:52px 48px}
.panel .tag{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(0,181,214,.4);
  background:rgba(0,181,214,.08);color:var(--primary);border-radius:99px;padding:6px 14px;
  font-size:11.5px;letter-spacing:.16em;font-weight:700;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;margin-bottom:22px}
.panel .tag svg{width:14px;height:14px}
.panel h2{margin-bottom:8px}
.panel .tagline{color:var(--muted);font-size:20px;margin-bottom:20px}
.panel p{color:var(--muted);max-width:620px}
.ticks{list-style:none;padding:0;margin:26px 0 30px;display:grid;
  grid-template-columns:1fr 1fr;gap:12px 32px;max-width:620px}
/* align-items:center parks the dot halfway down a two-line item. It belongs
   on the first line, which is what flex-start plus a nudge gives. */
.ticks li{display:flex;align-items:flex-start;gap:11px;color:var(--muted);font-size:15px;line-height:1.5}
.ticks li::before{content:"";width:7px;height:7px;border-radius:50%;margin-top:8px;
  background:var(--primary);flex:none}

/* final cta + contact */
.center{text-align:center}
.center .lead{margin-inline:auto}
.form{max-width:560px;margin:40px auto 0;display:grid;gap:18px;text-align:left}
.row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
label{display:block;font-size:13.5px;font-weight:600;margin-bottom:8px}
input,textarea{width:100%;background:var(--elev);border:1px solid var(--line);
  color:var(--fg);border-radius:var(--radius);padding:13px 15px;font:inherit;
  font-size:15px}
input:focus,textarea:focus{outline:none;border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(0,181,214,.16)}
textarea{min-height:132px;resize:vertical}
.form .btn{width:100%;justify-content:center;padding:15px}
.msg{border-radius:var(--radius);padding:14px 16px;font-size:14.5px;display:none}
.msg.show{display:block}
.msg.ok{border:1px solid rgba(0,181,214,.45);background:rgba(0,181,214,.09);color:#9fe8f7}
.msg.err{border:1px solid rgba(239,68,68,.45);background:rgba(239,68,68,.09);color:#ffb4b4}
.spin{width:15px;height:15px;border:2px solid rgba(4,18,26,.35);
  border-top-color:#04121a;border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* --- shared page furniture ------------------------------------------------ */
.hero.compact{padding:84px 0 56px;text-align:left}
.hero.compact h1{font-size:clamp(32px,4.4vw,52px)}
.hero.compact p{margin:20px 0 0;max-width:640px;color:var(--muted);font-size:18px}
.wrap.narrow{max-width:720px}
.hero .inner.narrow{max-width:720px;margin:0 auto}
/*
 * Interior heroes align to the page, not to their own centre.
 *
 * .inner.narrow centres a 720px column inside the 1180px wrap, which is
 * right for the homepage hero because that hero is centre-aligned. On the
 * interior pages the hero is text-align:left, so the same rule started the
 * heading 230px in from the left while every section below it started at 0 —
 * the page looked like two different layouts stacked on top of each other.
 * Constrain the measure, not the position.
 */
/* Same box as every other .wrap on the page, so the left edge lines up. */
.hero.compact .inner.narrow{max-width:1180px;margin:0 auto}
.hero.compact h1,.hero.compact .eyebrow{max-width:900px}
.hero.compact p{max-width:660px}
/* The buttons follow the text. Centred CTAs under a left-aligned headline
   read as a layout mistake, because they are one. */
.hero.compact .actions{justify-content:flex-start}
/*
 * The interior-page kicker is a flat label, not a pill.
 *
 * The bordered pill reads as an interactive chip — it looks like a tab you
 * failed to click. A rule plus small caps reads as a section marker, which is
 * what it actually is. The homepage keeps the pill: it is centred there, and
 * a centred pill under a big headline is a deliberate-looking object.
 */
.hero.compact .eyebrow{border:0;background:none;padding:0;border-radius:0;
  gap:12px;color:var(--primary);font-size:12px;letter-spacing:.16em}
.hero.compact .eyebrow::before{content:"";width:28px;height:2px;flex:none;
  background:var(--primary);border-radius:2px}
.hero.compact .eyebrow svg{display:none}
section.pull{padding-top:0;margin-top:-24px}
.card-form{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:32px 30px;max-width:100%;margin:0}
.alt{color:var(--muted);font-size:14px;margin-top:20px;text-align:center}
.notes{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:8px}
.notes li{position:relative;padding-left:20px;color:var(--muted);font-size:13px;line-height:1.55}
.notes li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;
  border-radius:50%;background:var(--primary);opacity:.6}
.hidden{display:none!important}
.label{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  margin:0 0 4px;font-weight:600}

/* Honeypot: off-screen rather than display:none, because some bots skip
   hidden inputs but not positioned ones. Hidden from assistive tech too. */
.trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* --- urgency chooser ------------------------------------------------------ */
.urgency{border:0;padding:0;margin:0 0 8px}
.urgency legend{font-size:13.5px;font-weight:600;padding:0;margin-bottom:12px}
.choice{display:flex;gap:13px;align-items:flex-start;background:var(--elev);
  border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin-bottom:9px;
  cursor:pointer;transition:border-color .15s,background .15s}
.choice:hover{border-color:rgba(0,181,214,.45)}
.choice input{width:17px;height:17px;flex:none;margin:2px 0 0;accent-color:var(--primary)}
.choice span{display:block}
.choice b{display:block;font-size:14.5px;font-weight:600}
.choice em{display:block;font-style:normal;color:var(--muted);font-size:13px;margin-top:3px}
.choice:has(input:checked){border-color:var(--primary);background:rgba(0,181,214,.06)}
.channel{border:0;padding:0;margin:4px 0 8px}
.channel legend{font-size:13.5px;font-weight:600;padding:0;margin-bottom:10px}
.choice.sm{padding:11px 13px}
.choice.sm b{font-size:13.5px}
.choice.sm em{font-size:12.5px;margin-top:2px}
.hint{margin:7px 0 0;font-size:12.5px;line-height:1.45;color:var(--muted)}
.mail{color:var(--primary);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.revealed{display:inline-block;margin-left:10px;padding:5px 10px;border-radius:7px;
  background:var(--elev);border:1px solid var(--line);font-size:13.5px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;user-select:all}

select{width:100%;background:var(--elev);border:1px solid var(--line);color:var(--fg);
  border-radius:var(--radius);padding:13px 15px;font:inherit;font-size:15px}
select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(0,181,214,.16)}

.note-block{margin-top:22px}
.note-block h3{font-size:16px;margin-bottom:8px}
.note-block p{font-size:14px;margin-bottom:14px}
.msg .muted{color:var(--muted);font-size:13px}

/* --- academy -------------------------------------------------------------- */
.track-meta{display:flex;gap:10px;align-items:center;margin-bottom:12px;
  font-size:12.5px;color:var(--muted)}
.pill{display:inline-block;border:1px solid rgba(0,181,214,.4);background:rgba(0,181,214,.08);
  color:var(--primary);border-radius:99px;padding:3px 11px;font-size:11.5px;font-weight:600}
.card.track h3{font-size:20px;margin-bottom:10px}

/* --- portal --------------------------------------------------------------- */
.portal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
  padding-bottom:20px;border-bottom:1px solid var(--line);margin-bottom:22px}
.portal-head h3{font-size:18px}
.enrol{display:flex;justify-content:space-between;align-items:center;gap:18px;
  background:var(--elev);border:1px solid var(--line);border-radius:11px;
  padding:16px 18px;margin-bottom:11px;flex-wrap:wrap}
.enrol h4{margin:0 0 6px;font-size:24px;font-weight:700;letter-spacing:-.02em;
  line-height:1.25;color:#fff}
.enrol .meta{color:var(--muted);font-size:13.5px}
.bar{width:180px;height:7px;background:var(--line);border-radius:99px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--primary);border-radius:99px}
.empty{color:var(--muted);font-size:14.5px;line-height:1.7}

/* curriculum */
.enrol-card{margin-bottom:18px}
.enrol-card .enrol{margin-bottom:0;border-radius:11px 11px 0 0;border-bottom:none}
.curric{border:1px solid var(--line);border-top:none;border-radius:0 0 11px 11px;
  padding:6px 18px 14px}
/* Module titles used to be 14.5px — SMALLER than the 15.5px lesson titles
   beneath them, so a chapter looked subordinate to its own contents. This is
   the ladder: track 24 > module 19 > lesson 16.5. */
.module{padding:26px 0 8px;border-bottom:1px solid var(--line)}
.module:last-child{border-bottom:none}
.module-head{display:flex;align-items:flex-start;gap:13px;margin-bottom:12px}
.module-num{flex:none;width:28px;height:28px;border-radius:8px;display:grid;
  place-items:center;background:rgba(0,179,214,.12);color:var(--primary);
  font-size:13px;font-weight:700;margin-top:1px}
.module h5{margin:0 0 4px;font-size:19px;font-weight:700;letter-spacing:-.01em;
  line-height:1.3;color:#fff}
.muted-sm{color:var(--muted);font-size:14px;margin:0;line-height:1.6;max-width:64ch}
ul.lessons{list-style:none;margin:0;padding:0 0 0 41px}
ul.lessons li{margin:0}
/* A button, not a link: it opens a pane in place rather than navigating, and
   telling a screen reader otherwise makes the page lie about what will happen. */
.lesson-link{display:flex;align-items:center;gap:12px;width:100%;
  background:none;border:0;border-radius:9px;padding:11px 12px;font:inherit;
  color:var(--fg);cursor:pointer;text-align:left;line-height:1.45;
  transition:background .12s,color .12s}
.lesson-link:hover{background:var(--elev);color:var(--primary)}
.lesson-n{flex:none;font-size:12.5px;font-weight:600;color:var(--muted);
  font-variant-numeric:tabular-nums;min-width:26px}
.lesson-t{flex:1;font-size:16.5px;font-weight:600;letter-spacing:-.01em}
.lesson-tags{display:flex;align-items:center;gap:9px;flex:none}
ul.lessons li.done .lesson-t{color:var(--muted);font-weight:400}
.mins{font-size:12.5px;color:var(--muted);white-space:nowrap}
.tick{font-size:14px;font-weight:700;color:var(--primary)}
.continue{display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;background:rgba(0,179,214,.07);border:1px solid rgba(0,179,214,.28);
  border-radius:11px;padding:15px 18px;margin:18px 0 6px}
.continue-label{font-size:10.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--primary);margin-bottom:5px}
.continue-title{font-size:16.5px;font-weight:600;letter-spacing:-.01em}
.lesson-panel{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.lesson-panel p{line-height:1.72;margin:0 0 26px;font-size:16.5px;max-width:70ch}

/*
 * Reading mode. Opening a lesson turns the page into a reader: the enrolment
 * list and card chrome step aside, the column widens to a book-like measure,
 * and the type goes up a size. This exists because the previous reader was a
 * ~640px pane crammed inside a card underneath the course list — technical
 * material was unreadable in it, which is the one thing a course page cannot
 * afford.
 */
body.reading .wrap.narrow{max-width:1120px}
body.portal .wrap.narrow{max-width:920px}
body.reading #enrollments,
body.reading #signedIn>.card-form>.portal-head{display:none}
body.reading #signedIn .card-form{background:transparent;border:none;padding:0}
body.reading .lesson-panel{margin-top:0;padding-top:0;border-top:none}
.portal-head .acts{display:flex;gap:10px;flex-wrap:wrap}
.lesson-panel .portal-head{align-items:center;margin-bottom:22px}

/*
 * The reader's own furniture.
 *
 * These lessons run to 2,500 words with a dozen sections. Without a way to see
 * the shape of one, jump inside it, and know how far through you are, a student
 * reading four of them in an evening is scrolling blind — which is the
 * difference between material that is present and material that is usable.
 */
.lesson-bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px;
  flex-wrap:wrap;padding:12px 0 11px;margin-bottom:20px;
  background:var(--bg);border-bottom:1px solid var(--line)}
.lesson-bar::before{content:"";position:absolute;left:0;right:0;bottom:100%;
  height:60px;background:var(--bg)}
.lesson-bar h3{flex:1;min-width:200px;font-size:15px;font-weight:600;line-height:1.35;
  letter-spacing:-.01em;margin:0;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lesson-bar .tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lesson-bar .pct{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;
  white-space:nowrap}
/* Reading progress: a hairline across the top of the sticky bar. */
.readbar{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--primary);
  transition:width .12s linear}
.tsize{display:flex;gap:0}
.tsize button{background:transparent;border:1px solid var(--line);color:var(--muted);
  font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;padding:4px 10px}
.tsize button:first-child{border-radius:7px 0 0 7px}
.tsize button:last-child{border-radius:0 7px 7px 0;border-left:0}
.tsize button:hover{color:var(--fg);border-color:var(--primary)}

/* Two columns while there is room: contents rail beside the prose. */
.lesson-grid{display:grid;grid-template-columns:minmax(0,1fr) 236px;gap:52px;align-items:start}
@media(max-width:900px){.lesson-grid{grid-template-columns:1fr;gap:0}}
.lesson-main{min-width:0;overflow-wrap:break-word}
.lesson-toc{position:sticky;top:78px;font-size:13px;line-height:1.5}
@media(max-width:900px){
  .lesson-toc{position:static;order:-1;margin:0 0 26px;border:1px solid var(--line);
    border-radius:10px;padding:14px 16px;background:var(--elev)}
  .lesson-toc a{padding:7px 0 7px 11px}
}
.lesson-toc h4{margin:0 0 9px;font-size:10.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted)}
.lesson-toc a{display:block;padding:5px 0 5px 11px;color:var(--muted);text-decoration:none;
  border-left:2px solid var(--line);transition:color .12s,border-color .12s}
.lesson-toc a:hover{color:var(--fg);border-left-color:var(--muted)}
.lesson-toc a.on{color:var(--primary);border-left-color:var(--primary)}
.lesson-toc a.sub{padding-left:22px;font-size:12.5px}

/* Text size, set on the reader rather than the page so chrome stays put. */
body.reading .lesson-main{font-size:17px}
body.ts-l .lesson-main{font-size:18.5px}
body.ts-xl .lesson-main{font-size:20.5px}
.lesson-main p,.lesson-main ul.lp li,.lesson-main ol.lp li{font-size:1em}
.lesson-main .sec{scroll-margin-top:96px}

/* Commands are meant to be run, so make taking one a single click. */
.codewrap{position:relative}
.codewrap .copy{position:absolute;top:8px;right:8px;background:var(--card);
  border:1px solid var(--line);color:var(--muted);border-radius:6px;
  font:inherit;font-size:11.5px;font-weight:600;padding:3px 9px;cursor:pointer;
  opacity:0;transition:opacity .12s}
.codewrap:hover .copy,.codewrap .copy:focus{opacity:1}
.codewrap .copy:hover{color:var(--fg);border-color:var(--primary)}

/* Move through a module without going back to the list each time. */
.lesson-nav{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:26px}
@media(max-width:600px){.lesson-nav{grid-template-columns:1fr}}
.lesson-nav button{text-align:left;background:var(--card);border:1px solid var(--line);
  border-radius:10px;padding:13px 15px;cursor:pointer;font:inherit;color:var(--fg)}
.lesson-nav button:hover{border-color:var(--primary)}
.lesson-nav button:disabled{opacity:.35;cursor:default}
.lesson-nav .dir{display:block;font-size:10.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.lesson-nav .nxt{text-align:right}

/* On a phone the bar was wrapping to two rows and eating a fifth of the
   screen before a single word of the lesson. One row, title truncated. */
@media(max-width:620px){
  .lesson-bar{padding:9px 0 8px;gap:8px}
  .lesson-bar h3{font-size:13.5px}
  .lesson-bar .pct{display:none}
  .lesson-bar .tools{gap:6px}
  .tsize button{padding:4px 8px;font-size:12px}
  .lesson-bar .btn.sm{padding:6px 12px;font-size:13px}
}
.lesson-panel .portal-head h3{font-size:clamp(22px,3vw,30px);line-height:1.25;
  letter-spacing:-.01em}
.lesson-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:28px;padding-top:18px;border-top:1px solid var(--line)}

/* Structure inside a lesson: section headings, lists, inline code, emphasis.
   All of it is built with createElement + textContent in the renderer — no
   markup is ever parsed from lesson text. */
.lesson-panel .sec{margin:52px 0 16px;font-size:24px;font-weight:700;
  letter-spacing:-.02em;line-height:1.25;color:#fff}
.lesson-panel .sec.sub{font-size:17.5px;font-weight:600;margin:34px 0 12px;
  letter-spacing:-.01em;color:var(--fg)}
.lesson-panel .sec:first-child{margin-top:0}
.lesson-panel ul.lp,.lesson-panel ol.lp{margin:0 0 26px;padding-left:22px;
  max-width:70ch}
.lesson-panel ul.lp li,.lesson-panel ol.lp li{font-size:16.5px;line-height:1.72;
  margin:10px 0;padding-left:4px}
.lesson-panel ul.lp li::marker{color:var(--primary)}
.lesson-panel ol.lp li::marker{color:var(--muted);font-weight:600}
.lesson-panel code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.875em;background:rgba(0,179,214,.09);border:0;color:#7fdcef;
  border-radius:4px;padding:.1em .34em;white-space:normal;overflow-wrap:anywhere}
.lesson-panel pre code{background:none;border:none;padding:0;white-space:inherit}
.lesson-panel strong{font-weight:600;color:#fff}
/* A command is a labelled exhibit: what it is, and one line underneath saying
   what it does. An unexplained command gets copied, not learned. */
.snip{margin:0 0 26px}
.snip-lang{font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);margin-bottom:7px}
.snip pre{margin:0}
.snip-cap{margin-top:9px;padding-left:13px;border-left:2px solid var(--line);
  color:var(--muted);font-size:13.5px;line-height:1.6;max-width:66ch}
.figure{margin:0 0 26px}
.figure img{max-width:100%;height:auto;border:1px solid var(--line);border-radius:9px;
  display:block}
.figure .snip-cap{margin-top:10px}
.lesson-panel hr{border:none;border-top:1px solid var(--line);margin:26px 0}

/*
 * Content protection — deterrence, not DRM, and we say so in the notice.
 *
 * Lesson prose is not selectable, so casual copy-paste of a whole phase takes
 * deliberate effort rather than Ctrl-A. Code blocks are the exception: they
 * are made to be run, and a command a student cannot copy is a command they
 * mistype. Anyone determined can still read the DOM — the honest control is
 * the licence notice and the per-student watermark, not the CSS.
 */
.lesson-panel .prot{user-select:none;-webkit-user-select:none;-ms-user-select:none}
.lesson-panel pre,.lesson-panel pre *{user-select:text;-webkit-user-select:text}
.lesson-panel img{pointer-events:none}
.lesson-notice{margin:24px 0 0;padding:12px 14px;border:1px solid var(--line);
  border-left:3px solid var(--muted);border-radius:0 8px 8px 0;background:var(--elev);
  color:var(--muted);font-size:12.5px;line-height:1.6}
.lesson-notice b{color:var(--fg);font-weight:600}
/* Per-student watermark: a leaked screenshot carries the account it came from. */
.wm{position:fixed;inset:0;pointer-events:none;z-index:9;opacity:.045;
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.wm span{transform:rotate(-30deg);font-size:34px;font-weight:800;letter-spacing:.12em;
  white-space:nowrap;line-height:2.6;text-align:center;color:var(--fg)}

/* Student notes, beside the lesson. */
.notes-box{margin-top:26px;border:1px solid var(--line);border-radius:10px;
  padding:16px 18px;background:var(--card)}
.notes-box h4{margin:0 0 4px;font-size:11.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--primary)}
.notes-box .hint{margin:0 0 10px}
.notes-box textarea{width:100%;min-height:130px;background:var(--elev);color:var(--fg);
  border:1px solid var(--line);border-radius:8px;padding:12px 13px;font-size:14.5px;
  line-height:1.7;font-family:inherit;resize:vertical}
.notes-box textarea:focus{outline:none;border-color:var(--primary)}
.notes-row{display:flex;align-items:center;gap:12px;margin-top:10px;flex-wrap:wrap}
.notes-state{font-size:12.5px;color:var(--muted)}

/*
 * Print: the materials do not print. A print-to-PDF of a paid phase is the
 * easiest way for it to end up somewhere else, so printing the reader yields
 * the licence notice instead of the lesson. Students keep their own notes,
 * which are theirs — those print fine.
 */
@media print{
  body.reading .lesson-panel #lessonBody>*:not(.notes-box):not(.lesson-notice){display:none!important}
  body.reading .wm{display:none}
  .lesson-notice{border:1px solid #000;color:#000}
  .print-block{display:block!important;color:#000;font-size:14px;margin:24px 0}
}
.print-block{display:none}
/* Transient "printing/saving disabled" message in the reader. */
.reader-hint{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(8px);
  max-width:min(92vw,520px);background:var(--elev);border:1px solid var(--primary);color:var(--fg);
  border-radius:10px;padding:12px 18px;font-size:14px;line-height:1.5;text-align:center;z-index:60;
  opacity:0;pointer-events:none;box-shadow:0 12px 32px rgba(0,0,0,.4);transition:opacity .2s,transform .2s}
.reader-hint.show{opacity:1;transform:translateX(-50%) translateY(0)}
.lede-sm{color:var(--muted);font-size:15px}

/* academy track cards */
/* Sits directly under an h2 to say what the grid below actually contains, so
   it needs the heading's bottom margin closed up rather than doubled. */
.section-lede{color:var(--muted);font-size:15px;line-height:1.7;max-width:62ch;margin:10px 0 0}
.track-state{margin-top:14px}
.track-count{color:var(--primary);font-size:13px;font-weight:600;margin:0 0 10px}
.track-soon{color:var(--muted);font-size:13.5px;font-style:italic;margin:0}
/* Early access. Deliberately not styled as a warning banner — it is a fact
   about what is being sold, and dressing it as an error would be as dishonest
   in the other direction. */
.early-note{color:#e8b046;font-size:13px;line-height:1.6;margin:0 0 10px;
  border-left:2px solid currentColor;padding-left:10px}
/* Track card actions: price left, buttons right, with real separation.
   Stacked they collided, and a paid action touching a text link reads as a
   layout bug rather than a choice. */
.track-pace{color:var(--muted);font-size:12.5px;margin:0 0 4px}
.track-overview{font-size:14px;line-height:1.7;color:var(--muted);margin:0 0 6px}
ul.plain{list-style:none;margin:0 0 6px;padding:0}
ul.plain li{position:relative;padding:4px 0 4px 18px;font-size:13.5px;line-height:1.6}
ul.plain li::before{content:'';position:absolute;left:2px;top:12px;width:5px;height:5px;
  border-radius:50%;background:var(--primary)}
.track-actions{display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;margin-top:16px;padding-top:16px;
  border-top:1px solid var(--line)}
.track-price{font-size:21px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.track-price span{font-size:12.5px;font-weight:500;color:var(--muted);
  letter-spacing:0;margin-left:5px}
.track-buttons{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
@media(max-width:520px){
  .track-actions{align-items:flex-start;flex-direction:column;gap:14px}
  .track-buttons{width:100%;justify-content:space-between}
}

#returnPanel{border-left:3px solid var(--muted)}
#returnPanel.ok{border-left-color:var(--primary)}
#returnPanel h3{margin:0 0 8px}
.track-toggle{background:none;border:0;padding:0;font:inherit;font-size:13.5px;
  font-weight:600;color:var(--fg);cursor:pointer;border-bottom:1px solid var(--line)}
.track-toggle:hover{color:var(--primary);border-bottom-color:var(--primary)}
.track-toggle:disabled{opacity:.5;cursor:default}
.track-outline{margin-top:16px;border-top:1px solid var(--line);padding-top:14px}
.track-outline h4{margin:14px 0 6px;font-size:11.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
.track-outline h4:first-child{margin-top:0}
.track-outline ul{list-style:none;margin:0;padding:0}
.track-outline li{display:flex;align-items:center;gap:9px;padding:5px 0;
  font-size:13.5px;flex-wrap:wrap}
.kind{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--bg);background:var(--muted);border-radius:4px;padding:1px 6px}
.takeaway{border-left:3px solid var(--primary);background:var(--elev);
  border-radius:0 8px 8px 0;padding:14px 16px;margin:0 0 20px}
.takeaway p{margin:0;font-size:16px;line-height:1.6}
.tk-label{display:block;font-size:10.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--primary);margin-bottom:5px}
.lab{border:1px solid var(--line);border-radius:10px;padding:16px 18px;margin:22px 0}
.lab h4{margin:0 0 12px;font-size:11.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--primary)}
.answer{border:1px solid var(--line);border-left:3px solid var(--muted);
  border-radius:0 10px 10px 0;padding:16px 18px;margin:16px 0 0;background:var(--elev)}
/* Queries and command output. Scrolls rather than wraps: a wrapped query is
   a query you cannot copy and run. */
.lesson-panel pre{background:var(--elev);border:1px solid var(--line);border-radius:8px;
  padding:13px 15px;overflow-x:auto;font-size:12.5px;line-height:1.6;margin:0 0 14px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--fg);max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}

/* footer */
footer{border-top:1px solid var(--line);background:var(--strip);padding:44px 0 34px}
.foot{display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap;align-items:flex-start}
.foot .brand{margin-bottom:6px}
.foot .tag{color:var(--muted);font-size:13.5px}
.footlinks{display:flex;gap:28px;font-size:14.5px;color:var(--muted);flex-wrap:wrap}
.footlinks a:hover{color:var(--fg)}
.copy{border-top:1px solid var(--line);margin-top:32px;padding-top:22px;
  text-align:center;color:var(--muted);font-size:13px}

@media(max-width:1000px){.g4{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr;gap:36px}}
/* The nav collapses well before the content does: five links plus two buttons
   start wrapping into two ragged lines around 950px, which looks broken on a
   tablet long before anything else does. */
@media(max-width:940px){
  .navlinks{display:none;position:absolute;top:72px;left:0;right:0;flex-direction:column;
    gap:0;background:var(--card);border-bottom:1px solid var(--line);padding:8px 24px 16px}
  .navlinks.open{display:flex}
  .navlinks a{padding:12px 0;border-bottom:1px solid var(--line)}
  /* .navlinks carried the margin-left:auto that pushed everything right, and
     it is display:none here — so the buttons have to take that job over or
     the whole group collapses against the wordmark. */
  .navcta{margin-left:auto}
  .menu{display:block}
}
@media(max-width:760px){
  /* The incident button stays. Somebody reporting a breach at 2am is doing it
     from a phone, and burying the one action they came for behind a hamburger
     to save 90 pixels would be the wrong trade. It shrinks instead. */
  .navcta{gap:8px}
  .navcta .btn{padding:8px 11px;font-size:13px;white-space:nowrap}
  .g4,.g3{grid-template-columns:1fr}
  .row{grid-template-columns:1fr}
  .ticks{grid-template-columns:1fr}
  .panel{padding:36px 26px}
  .hero{padding:80px 0 72px}
  section{padding:64px 0}
}
/* Below this, two buttons and a menu do not fit next to the wordmark without
   the labels wrapping mid-word. The incident button is the one that survives;
   "Get in touch" is one tap away inside the menu. */
@media(max-width:520px){
  .navcta .btn:not(.danger){display:none}
  .navlinks a.mob{display:block}
  .brand{font-size:16px;gap:7px}
  .brand svg{height:18px}
  /* "Report an incident" plus the wordmark plus the menu button do not fit in
     a 390px viewport. The article is what goes. */
  .wide{display:none}
  .navcta .btn{padding:8px 10px;font-size:12.5px}
  .wrap{padding-left:16px;padding-right:16px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ===== Academy curriculum page (/curriculum) ===== */
.cur-mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.cur-hero .lead{font-size:19px;max-width:70ch;margin-top:20px}
.cur-stats{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.cur-stat{flex:1 1 120px;min-width:120px;background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:16px 18px;text-align:left}
.cur-stat b{display:block;font-size:30px;font-weight:800;line-height:1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.cur-stat span{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.cur-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:12px;margin-top:24px}
.cur-table{border-collapse:collapse;width:100%;font-size:14.5px;min-width:640px}
.cur-table th,.cur-table td{text-align:left;padding:12px 15px;border-bottom:1px solid var(--line);
  vertical-align:top}
.cur-table thead th{background:var(--strip);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700}
.cur-table tbody tr:last-child td{border-bottom:none}
.cur-table tbody tr:hover{background:rgba(0,181,214,.05)}
.cur-table .num{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--primary);font-weight:700}
.cur-table .h{font-variant-numeric:tabular-nums;white-space:nowrap}
.cur-tot td{background:var(--strip);font-weight:700}
.cur-phases{display:flex;flex-direction:column;gap:18px;margin-top:36px}
.cur-phase{position:relative;background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:26px 28px 26px 30px;transition:border-color .18s,transform .18s}
.cur-phase:hover{border-color:rgba(0,181,214,.45);transform:translateY(-2px)}
.cur-phase::before{content:"";position:absolute;left:0;top:20px;bottom:20px;width:3px;border-radius:3px;
  background:linear-gradient(var(--primary),var(--glow))}
.cur-top{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}
.cur-pnum{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;font-size:12px;
  color:var(--primary);border:1px solid var(--line);border-radius:8px;padding:6px 10px;white-space:nowrap}
.cur-phase h3{flex:1 1 240px;font-size:21px}
.cur-chips{display:flex;gap:8px;flex-wrap:wrap}
.cur-chip{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;letter-spacing:.03em;
  padding:5px 10px;border-radius:99px;border:1px solid var(--line);color:var(--muted);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.cur-chip.lvl{color:var(--primary);border-color:rgba(0,181,214,.45)}
.cur-q{color:var(--fg);font-style:italic;margin:16px 0 2px;font-size:16px}
.cur-mods{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:9px}
.cur-mods li{display:flex;gap:12px;align-items:baseline;font-size:14.5px;
  padding-bottom:9px;border-bottom:1px dashed var(--line)}
.cur-mods li:last-child{border-bottom:none;padding-bottom:0}
.cur-mods .mh{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--primary);
  font-size:12.5px;white-space:nowrap;min-width:30px}
.cur-mods .mt{color:var(--muted);line-height:1.6}
.cur-mods .mt b{color:var(--fg);font-weight:700}
.cur-payoff{margin-top:16px;display:grid;gap:10px;grid-template-columns:1fr 1fr}
.cur-payoff div{background:var(--elev);border:1px solid var(--line);border-radius:10px;padding:13px 15px}
.cur-payoff h4{margin:0 0 5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700}
.cur-payoff p{font-size:13.5px;color:var(--fg);line-height:1.55}
.cur-estate{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:22px 24px;margin-top:8px}
.cur-estate p{color:var(--muted);line-height:1.7}
.cur-hosts{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.cur-hosts code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;background:var(--elev);
  border:1px solid var(--line);border-radius:8px;padding:5px 10px;color:var(--fg)}
.cur-note{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--primary);
  border-radius:10px;padding:16px 20px;margin-top:20px;color:var(--muted);line-height:1.7}
.cur-note b{color:var(--fg)}
.cur-verline{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;color:var(--primary);margin-top:14px}
.cur-sources{font-size:13px;color:var(--muted);line-height:1.95}
.cur-sources a{color:var(--primary)}
.cur-sources a:hover{text-decoration:underline}
.cur-sources.note{margin-top:12px}
@media(max-width:640px){.cur-payoff{grid-template-columns:1fr}}