/* Lunar Academy public site. One light world taken from the astronaut photos:
   warm studio grey for learning, charcoal for missions, and the belt-button red only on things you can press.
   The CSP allows no inline styles, so every rule lives here. */
:root{
  --studio:#9a8672;   /* the seamless backdrop in every warm-grey shot */
  --floor:#c8b9a9;    /* the lit floor in front of it: the main reading ground */
  --floor-hi:#bcac9c; /* where the hero photo's floor meets the page */
  --paper:#ddd2c5;
  --bone:#ece4d8;     /* the suit */
  --ink:#0d0e0b;      /* the visor */
  --ink-2:#3a332b;
  --ink-on-studio:#211d18;
  --char:#1e1f1c;     /* the charcoal set */
  --char-2:#292a26;
  --char-line:#3d3d37;
  --bone-2:#b5ac9f;
  --basalt:#7a6f68;
  --rule:rgba(13,14,11,.2);
  --red:#a8222a;      /* the belt button */
  --red-hi:#c42d35;
  --bad:#7e1218;      /* error text on the floor */
  --bad-on-sweep:#4a0a0e; /* and on the darker sweep */
  /* "On set": the page gets the same light as the photos, not flat paint. A softbox at the upper left falls off
     toward the corners of the warm-grey sweep and of the charcoal sets; a fine grain keeps fills from reading as paint chips. */
  --sweep:radial-gradient(130% 120% at 22% -10%,#cdbfaf 0%,#bfae9b 38%,#a8957f 78%,var(--studio) 100%);
  --lit-floor:radial-gradient(120% 90% at 18% 0%,#d3c6b7 0%,var(--floor) 48%,#bcac9a 100%);
  --night:radial-gradient(90% 120% at 26% 0%,#30322d 0%,#22231f 48%,#161713 100%);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-lt:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --key-art-top:linear-gradient(90deg,#93806a,#857565); /* the home photo's top edge, as it crops on a phone */
  --panel:#f0eae2;    /* cards and panels: a touch lighter than the suit, on a soft warm shadow */
  --lift:inset 0 1px 0 rgba(255,255,255,.5),0 1px 2px rgba(40,30,20,.06),0 24px 48px -30px rgba(40,30,20,.5);
  --gutter:16px;      /* headers sit out at the page edge, not in the 1240px column */
  --focus:var(--red);
  /* the same three families as lunareng.com */
  --f-display:"Archivo",ui-sans-serif,system-ui,sans-serif;
  --f-body:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  color-scheme:light;
}
@media (min-width:700px){:root{--gutter:clamp(32px,3.2vw,48px)}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:16px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--floor);color:var(--ink);font:17px/1.6 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* the lit floor: its own fixed layer, so scrolling never repaints it */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--grain),var(--lit-floor)}
@media print{body::before{display:none}}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:var(--f-display);font-weight:600;margin:0;letter-spacing:-.015em;text-wrap:balance;line-height:1.05}
p{margin:0}
a{color:inherit;text-underline-offset:4px;text-decoration-thickness:1px}
/* red on the floor; ink on the lit sweep and bone on charcoal, where red would not stand out */
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:16px;top:-80px;z-index:10;background:var(--ink);color:var(--bone);padding:10px 14px;font:500 13px var(--f-mono);text-decoration:none}
.skip:focus{top:12px}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.wrap{max-width:1240px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
@media (min-width:700px){.wrap{padding-left:max(32px,env(safe-area-inset-left,0px));padding-right:max(32px,env(safe-area-inset-right,0px))}}
.period{color:var(--red)}
.eyebrow{font:500 12px/1.3 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.eyebrow.on-studio{color:#2a241e}
.dark .eyebrow{color:var(--bone-2)}
.sec{padding-block:clamp(72px,10vw,140px)}
.sec-head{display:flex;flex-direction:column;gap:18px;max-width:720px}
.sec-head h2{font-size:clamp(36px,4.6vw,64px);line-height:1.02}
.sec-head p.lede2{font-size:clamp(17px,1.4vw,19px);color:var(--ink-2);max-width:56ch}
.dark{background:var(--char);color:var(--bone)}
.dark .sec-head p.lede2{color:var(--bone-2)}

/* wordmark: "Lunar Academy." with the full stop in belt-button red */
.wordmark{font:600 24px/1 var(--f-display);letter-spacing:-.02em;text-decoration:none;color:var(--ink);white-space:nowrap}
.dark .wordmark,.site-foot .wordmark{color:var(--bone)}

/* buttons (.cta is the confirm/unsubscribe pages' name for the same thing) */
.btn,.cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;border:0;background:var(--red);color:#fff;font:600 17px/1 var(--f-display);letter-spacing:.005em;text-decoration:none;cursor:pointer;white-space:nowrap}
.btn:hover,.cta:hover{background:var(--red-hi);color:#fff}
.btn:disabled,.cta:disabled{opacity:.6;cursor:progress}
/* A button that is working (aria-busy, LA.act) keeps its full colour so "Saving…" stays readable (AA); it is
   disabled only so it can't be pressed twice. */
.btn[aria-busy="true"]:disabled,.cta[aria-busy="true"]:disabled{opacity:1}
.btn.ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor}
.btn.ghost:hover{background:rgba(255,255,255,.08)}
.btn.small{min-height:44px;padding:0 20px;font-size:15px}

/* ---------- hero ---------- */
.hero{background:var(--floor-hi)}
.stage{position:relative;isolation:isolate;overflow:clip;height:clamp(560px,42.86vw,780px);display:flex;flex-direction:column;background:var(--studio)}
.stage > .wrap{width:100%}
.stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:96px;z-index:-1;background:linear-gradient(rgba(188,172,156,0),var(--floor-hi));pointer-events:none}
.stage-img{position:absolute;inset:0;z-index:-1;width:100%;height:100%!important;object-fit:cover;object-position:45% 50%}
.nav{display:flex;align-items:center;gap:28px;padding-block:22px}
.nav .links{display:flex;gap:26px;margin-left:16px;font:500 15px var(--f-body)}
.nav > .btn{margin-left:auto}
.nav .links a{text-decoration:none;color:var(--ink);min-height:44px;display:inline-flex;align-items:center}
.nav .links a:hover{text-decoration:underline}
@media (max-width:1180px){.stage .nav .links a:last-child{display:none}}
.stage-copy{flex:1;display:flex;align-items:center;padding-block:8px 48px}
.stage-copy > div{display:flex;flex-direction:column;gap:20px;max-width:min(640px,50vw)}
.hero h1{font-size:clamp(44px,5.2vw,80px);line-height:1;letter-spacing:-.02em}
.hero .lede{font-size:clamp(17px,1.35vw,19px);line-height:1.55;color:var(--ink-on-studio);max-width:44ch}
.floor{background:linear-gradient(var(--floor-hi),var(--floor) 70%)}
.floor > .wrap{display:flex;flex-direction:column;gap:20px;padding-block:8px clamp(56px,7vw,96px)}
.status{display:inline-flex;align-items:center;gap:10px;font:500 12px/1.4 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-on-studio)}
.status::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--red);box-shadow:0 0 0 3px rgba(168,34,42,.18);flex:none}
.floor .signup{max-width:760px}
@media (min-width:981px){
  .floor .fields{flex-wrap:nowrap;align-items:flex-end}
  .floor .fields .btn{flex:none}
}
@media (max-width:980px){
  .stage{height:auto;background:var(--floor-hi)}
  .stage-img{position:relative;inset:auto;z-index:auto;aspect-ratio:4/3;height:auto!important;object-position:76% 50%;order:-1}
  /* above the photo, in the colours along its top edge, so the nav runs straight into the set and off the helmet */
  .stage .nav-wrap{order:-2;background:var(--key-art-top)}
  .stage-copy{padding-block:32px 8px}
  .stage::after{display:none}
  .stage-copy > div{max-width:640px}
  .nav .links{display:none}
}
@media (max-width:520px){.nav .btn{display:none}}

.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:6px}
.text-link{font:500 15px var(--f-body);color:var(--ink-on-studio);min-height:44px;display:inline-flex;align-items:center}

/* ---------- signup form ---------- */
.signup{display:flex;flex-direction:column;gap:14px;max-width:560px}
.fields{display:flex;flex-wrap:wrap;gap:10px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field.email{flex:2 1 230px}.field.name{flex:1 1 150px}
.field label{font:500 13px var(--f-body);color:var(--ink-on-studio)}
.field input{min-height:52px;width:100%;padding:0 16px;border:1px solid rgba(13,14,11,.28);border-radius:2px;background:rgba(236,228,216,.88);color:var(--ink);font:16px var(--f-body)}
.field input::placeholder{color:#6d6358}
.field input[aria-invalid="true"]{border-color:var(--red);box-shadow:0 0 0 1px var(--red)}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.5;color:var(--ink-on-studio);cursor:pointer}
.consent input{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--red)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.fine{font-size:13px;color:#332d26}
.msg{font:500 14px var(--f-body);min-height:1.5em}
.msg.ok{color:var(--ink)}
.msg.bad{color:var(--bad)}
.msg.ok::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--red);margin-right:8px;vertical-align:1px}

/* ---------- missions ---------- */
.provider{font:600 clamp(20px,1.8vw,26px)/1.2 var(--f-display);letter-spacing:-.01em;color:var(--bone);padding-bottom:14px;border-bottom:1px solid var(--char-line);max-width:420px}
.missions .sec-head{margin-bottom:clamp(48px,6vw,88px)}
.legend{display:flex;flex-wrap:wrap;gap:8px 22px;font:500 12px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--bone-2)}
.legend span{display:inline-flex;align-items:center;gap:8px}
.mk{display:inline-block;width:9px;height:9px;border-radius:50%;border:1.5px solid var(--bone-2);flex:none}
.mk.live{background:var(--red);border-color:var(--red)}
.route-wrap{position:relative;padding-left:clamp(44px,11vw,168px)}
.rail{position:absolute;z-index:4;left:clamp(14px,2.4vw,32px);top:10px;bottom:10px;width:2px;background:var(--char-line)}
.rail-fill{position:absolute;left:0;top:0;width:2px;height:calc(var(--p,0) * 100%);background:var(--bone)}
.rail-dot{position:absolute;left:1px;top:calc(var(--p,0) * 100%);width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;background:var(--red);box-shadow:0 0 0 6px rgba(196,45,53,.18),0 0 24px rgba(196,45,53,.45)}
.rail-dot em{position:absolute;left:30px;top:50%;transform:translateY(-50%);font:500 11px/1 var(--f-mono);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--bone);white-space:nowrap;background:var(--char);padding:5px 7px;box-shadow:0 0 0 1px var(--char-line)}
.route{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(96px,12vw,176px)}
.leg{position:relative;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center}
.leg::before{content:"";position:absolute;left:calc(-1 * clamp(44px,11vw,168px) + clamp(14px,2.4vw,32px) - 7px);top:10px;width:16px;height:16px;border-radius:50%;background:var(--char);box-shadow:inset 0 0 0 2px var(--basalt)}
.leg.reached::before{background:var(--bone);box-shadow:inset 0 0 0 2px var(--bone)}
.leg-media{margin:0;overflow:hidden;background:var(--char-2)}
.leg-media img{width:100%;aspect-ratio:16/9;object-fit:cover}
.leg-copy{display:flex;flex-direction:column;gap:14px;min-width:0}
.leg-label{font:500 12px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--bone-2)}
.leg h3{font-size:clamp(30px,3.2vw,44px);line-height:1.05}
.leg p.desc{color:var(--bone-2);max-width:42ch}
.exams{list-style:none;margin:6px 0 0;padding:14px 0 0;border-top:1px solid var(--char-line);display:flex;flex-direction:column;gap:9px;font-size:15px}
.exams li{display:flex;align-items:center;gap:12px}
.code{font:500 12px var(--f-mono);letter-spacing:.06em;color:var(--bone-2);margin-left:2px}
.foot{margin-top:clamp(48px,6vw,80px);font-size:14px;color:var(--bone-2);max-width:70ch}
@media (max-width:1000px){.rail-dot em{display:none}}
@media (max-width:860px){
  .leg{grid-template-columns:minmax(0,1fr)}
  .leg::before{top:-6px}
}

/* ---------- how it works ---------- */
.how .sec-head{margin-bottom:clamp(40px,5vw,72px)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.8vw,24px)}
.step{display:flex;flex-direction:column;gap:14px;min-width:0}
.step figure{margin:0;overflow:hidden;background:var(--studio)}
.step img{width:100%;aspect-ratio:4/5;object-fit:cover}
.step img.at-38{object-position:38% 50%}
.step img.at-36{object-position:36% 50%}
.step img.at-44{object-position:44% 50%}
.step-label{display:flex;height:24px;align-items:center;justify-content:space-between;gap:10px;font:500 12px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.chip{font:500 11px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;padding:5px 8px;border:1px solid var(--ink-2);color:var(--ink-2)}
.step h3{font-size:28px;line-height:1.1}
.step p{font-size:16px;color:var(--ink-2)}
@media (max-width:1000px){.steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:44px}}
@media (max-width:520px){.steps{grid-template-columns:minmax(0,1fr)}}

/* ---------- mission control + field reports ---------- */
.crew-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:start}
.bio{display:flex;flex-direction:column;gap:14px;color:var(--ink-2);margin-top:36px;max-width:56ch}
.bio p:first-child{color:var(--ink);font-size:19px;line-height:1.5}
.facts{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--rule)}
.facts li{padding:14px 12px 0 0;display:flex;flex-direction:column;gap:4px;font-size:14px;color:var(--ink-2)}
.facts b{font:600 22px/1.1 var(--f-display);color:var(--ink);letter-spacing:-.01em}
.reports{display:flex;flex-direction:column;gap:20px}
.reports h2{font-size:clamp(30px,3.2vw,44px);line-height:1.05}
.reports > p{color:var(--ink-2)}
.report{display:flex;flex-direction:column;gap:10px;padding:22px 0;border-top:1px solid var(--rule)}
.report:last-child{border-bottom:1px solid var(--rule)}
.report h3{font-size:24px;line-height:1.15;text-wrap:pretty;max-width:26ch}
.report .meta{font:500 12px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);display:flex;align-items:center;gap:10px}
@media (max-width:960px){.crew-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:520px){.facts{grid-template-columns:minmax(0,1fr)}}

/* ---------- youtube + lesson list ---------- */
.yt-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(28px,5vw,72px);align-items:start}
.yt figure{margin:0;overflow:hidden;background:var(--char-2)}
.yt img{width:100%;aspect-ratio:16/9;object-fit:cover}
.yt .actions{margin-top:8px}
.handle{font:500 13px var(--f-mono);color:var(--bone-2);letter-spacing:.04em}
.lesson-list{list-style:none;margin:28px 0 0;padding:0;border-top:1px solid var(--char-line)}
.lesson-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 16px;padding:14px 0;border-bottom:1px solid var(--char-line)}
.lesson-list .code{grid-column:1 / -1;margin:0}
.lesson-list .title{font:600 18px/1.3 var(--f-display);color:var(--bone)}
.lesson-list .soon{font:500 12px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--bone-2);white-space:nowrap}
.lesson-list .watch{font:600 15px var(--f-display);color:var(--bone);white-space:nowrap;min-height:44px;display:inline-flex;align-items:center;gap:8px}
.lesson-list .watch::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--red)}
@media (max-width:860px){.yt-grid{grid-template-columns:minmax(0,1fr)}.yt figure{order:-1}}

/* ---------- faq ---------- */
.faq-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:clamp(28px,5vw,72px)}
.faq dl{margin:0;display:flex;flex-direction:column}
.faq dt{font:600 22px/1.25 var(--f-display);letter-spacing:-.01em;padding-top:22px;border-top:1px solid var(--rule)}
.faq dd{margin:8px 0 22px;color:var(--ink-2);max-width:60ch}
@media (max-width:860px){.faq-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- closing ---------- */
.join{position:relative;background:var(--studio);isolation:isolate}
.join-media{position:absolute;inset:0;z-index:-1;overflow:hidden}
.join-media img{width:100%;height:100%!important;object-fit:cover;object-position:75% 100%}
.join-copy{display:flex;flex-direction:column;gap:22px;max-width:560px;padding-block:clamp(72px,9vw,128px)}
.join h2{font-size:clamp(40px,5vw,72px);line-height:1}
.join .lede{color:var(--ink-on-studio);font-size:18px}
@media (max-width:860px){
  .join{display:flex;flex-direction:column}
  .join-media{position:relative;inset:auto;z-index:auto;aspect-ratio:16/9;order:2}
  .join-media img{object-position:72% 100%}
  .join-copy{padding-block:56px 40px}
}

/* ---------- footer (every page) ---------- */
.site-foot{background:var(--char);color:var(--bone-2);font-size:14px}
.foot-grid{display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px;padding-block:40px calc(40px + env(safe-area-inset-bottom,0px))}
.foot-grid p{flex:1 1 360px;max-width:70ch}
.foot-grid nav{display:flex;gap:22px}
.foot-grid nav a{min-height:44px;display:inline-flex;align-items:center}
.powered{display:inline-flex;align-items:center;min-height:44px;margin-left:8px;padding-left:28px;border-left:1px solid var(--char-line)}
.powered img{width:100px;height:auto}
@media (max-width:700px){.powered{margin-left:0;padding-left:0;border-left:0}}

/* ---------- layering: photos sit inside compositions, not bare rectangles ----------
   .frame holds a photo plus what overlaps it: a floating card, an icon tile, moon dust or a dot grid behind,
   and a connector back to the page. */
.frame{position:relative;isolation:isolate;margin:0}
.frame > .shot{position:relative;z-index:1;width:100%;border-radius:14px;box-shadow:0 30px 60px -30px rgba(0,0,0,.55)}
.dust{position:absolute;z-index:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .33 0 0 0 0 .3 0 0 0 2.6 -1.15'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-mask-image:radial-gradient(closest-side at 42% 55%,#000 30%,transparent 100%),radial-gradient(closest-side at 70% 38%,#000 15%,transparent 85%);
  mask-image:radial-gradient(closest-side at 42% 55%,#000 30%,transparent 100%),radial-gradient(closest-side at 70% 38%,#000 15%,transparent 85%)}
.dark .dust{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .93 0 0 0 0 .89 0 0 0 0 .85 0 0 0 2.4 -1.2'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E")}
.dots{position:absolute;z-index:0;pointer-events:none;background-image:radial-gradient(currentColor 1.6px,transparent 1.9px);background-size:14px 14px;color:var(--basalt)}
.dark .dots{color:#5b574f}
.tile{position:absolute;z-index:3;display:grid;place-items:center;width:76px;height:76px;border-radius:16px;background:var(--bone);color:var(--ink);box-shadow:0 18px 36px -10px rgba(0,0,0,.45)}
.tile svg{width:40px;height:40px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.float-card{position:relative;z-index:3;background:var(--bone);color:var(--ink);border-radius:14px;padding:18px 20px;box-shadow:0 28px 60px -18px rgba(0,0,0,.5)}
.card-label{display:flex;align-items:center;gap:8px;font:500 11px/1.3 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.card-title{font:600 21px/1.2 var(--f-display);letter-spacing:-.01em;margin-top:8px}
.card-meta{font-size:13px;color:var(--ink-2);margin-top:10px}

/* hero: the first lesson floats up over the photo */
.floor > .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:28px 56px;align-items:start}
.hero-card-wrap{position:relative}
.hero-card-wrap .dust{left:-90px;bottom:-70px;width:300px;height:220px}
.scenes{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.scenes li{height:22px;border-radius:4px;background:rgba(13,14,11,.1);box-shadow:inset 0 0 0 1px rgba(13,14,11,.12)}
@media (min-width:981px){.hero-card-wrap{margin-top:-128px}}
@media (max-width:980px){.floor > .wrap{grid-template-columns:minmax(0,1fr)}.hero-card-wrap{max-width:420px}}

/* missions: exam card overlaps the photo, a tile carries the mission's icon, dust sits behind */
.leg-media{overflow:visible;background:none;z-index:1}
.leg-media .shot{aspect-ratio:16/9;object-fit:cover}
/* the tile sits where the connector from the route meets the photo (connector at 17px, tile 76px) */
.leg-media .tile{top:-21px;left:-38px}
.leg-media .dust{left:-70px;bottom:-80px;width:62%;height:70%}
.mission-card{position:absolute;right:-28px;bottom:-56px;width:min(300px,72%)}
.mission-card .exams{border-top:1px solid var(--rule);margin-top:10px;padding-top:12px;color:var(--ink)}
.mission-card .mk{border-color:var(--ink-2)}
.mission-card .mk.live{border-color:var(--red)}
.mission-card .code{color:var(--ink-2);white-space:nowrap}
.mission-card .exams li{align-items:flex-start}
.mission-card .exams .mk{margin-top:7px}
.leg{padding-bottom:56px}
.leg::after{content:"";position:absolute;top:17px;left:calc(-1 * clamp(44px,11vw,168px) + clamp(14px,2.4vw,32px) + 9px);width:calc(clamp(44px,11vw,168px) - clamp(14px,2.4vw,32px) - 9px);height:1px;background:var(--char-line)}
.leg.reached::after{background:var(--bone-2)}
@media (max-width:860px){
  .mission-card{position:relative;right:auto;bottom:auto;width:auto;margin:-36px 14px 0}
  .leg::after{top:1px}
  .leg-media .tile{left:16px;top:-22px}
  .leg{padding-bottom:0}
}

/* how it works: numbered tiles on each photo, joined by the flight-plan line */
.step figure{overflow:visible;background:none}
.step .shot{aspect-ratio:4/5;object-fit:cover}
.step-no{position:absolute;z-index:3;left:16px;bottom:-24px;display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:var(--bone);font:600 20px/1 var(--f-display);color:var(--ink);box-shadow:0 14px 30px -10px rgba(0,0,0,.35)}
.step figure::after{content:"";position:absolute;z-index:2;left:68px;right:calc(-1 * clamp(14px,1.8vw,24px) - 16px);bottom:-1px;height:2px;background:repeating-linear-gradient(90deg,var(--ink-2) 0 6px,transparent 6px 12px);opacity:.55}
.step:last-child figure::after{display:none}
.step-label{margin-top:34px}
.how .dots{right:-12px;top:-56px;width:168px;height:112px}
.steps{position:relative}
@media (max-width:1000px){.step figure::after{display:none}}

/* youtube: YouTube's official icon links to the channel. Its guidelines: at least 100px tall,
   unmodified, no shadow, and clear space equal to the triangle's height (43px at this size). */
.yt-badge{display:inline-block;align-self:flex-start;margin-bottom:25px;line-height:0}
.yt-badge img{width:143px;height:100px}
/* the shot becomes a player, with a line tying it to the band */
.player .shot{aspect-ratio:16/9;object-fit:cover}
.player .dots{right:-36px;top:-36px;width:196px;height:140px}
.yt .player{overflow:visible;background:none}
.player .accent{position:absolute;z-index:0;left:28px;right:-30px;top:-18px;height:64%;border-top:1.5px solid var(--bone-2);border-right:1.5px solid var(--bone-2);border-top-right-radius:18px;opacity:.7;pointer-events:none}
.player-ui{position:absolute;z-index:2;left:0;right:0;bottom:0;display:flex;align-items:center;gap:14px;padding:44px 20px 18px;border-radius:0 0 14px 14px;background:linear-gradient(transparent,rgba(13,14,11,.55))}
.player-ui .bar{flex:1;height:4px;border-radius:2px;background:rgba(236,228,216,.35);position:relative}
.player-ui .bar::after{content:"";position:absolute;left:0;top:0;bottom:0;width:22%;border-radius:2px;background:var(--bone)}
.player-ui .bar::before{content:"";position:absolute;left:22%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--bone)}
@media (max-width:860px){.player .accent,.player .dots{display:none}}

/* ---------- the public header: no band. It sits on whatever set is underneath, out at the page gutter ---------- */
.top{position:relative;z-index:5;--focus:var(--ink)}
.top .wrap,.stage > .nav-wrap{max-width:none;padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px))}
.top .nav{padding-block:18px}
.top .links{margin-left:auto}
@media (max-width:520px){.top .links{display:none}}

/* ---------- simple pages: privacy, confirm, unsubscribe, 404 ----------
   No photo, so the lit sweep stands behind the header and title, then gives way to the floor. */
.page-main{padding-block:clamp(48px,8vw,104px) clamp(72px,10vw,128px);--bad:var(--bad-on-sweep)}
.page-main::before{content:"";position:absolute;left:0;right:0;top:0;z-index:-1;height:clamp(380px,36vw,520px);pointer-events:none;
  background:var(--grain),var(--sweep);-webkit-mask-image:linear-gradient(#000 45%,transparent);mask-image:linear-gradient(#000 45%,transparent)}
@media print{.page-main::before{display:none}}
.prose{display:flex;flex-direction:column;gap:18px;max-width:760px}
.prose h1{font-size:clamp(40px,5.6vw,72px);line-height:1;letter-spacing:-.02em}
.prose h2{font-size:26px;margin-top:18px}
.prose p,.prose li{color:var(--ink-2);max-width:64ch}
/* the line under the title sits on the sweep, so it takes the darker studio ink */
.prose h1 + p{color:var(--ink-on-studio)}
.prose ul{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:6px}
.prose .msg{color:var(--ink)}
.prose .msg.bad{color:var(--bad)}

/* ---------- motion ----------
   The hero plays once on load, in CSS. Further down, site.js adds .motion to <html> and .in to each block as it
   scrolls into view (--d staggers blocks that arrive together). Without JS, or with reduced motion, nothing is hidden. */
:root{--ease:cubic-bezier(.2,.7,.2,1);--spring:cubic-bezier(.3,1.45,.5,1)}
@keyframes rise{from{opacity:0;transform:translateY(26px)}}
@keyframes settle{from{opacity:0;transform:scale(1.06)}}
@keyframes fade{from{opacity:0}}
@keyframes pop{from{opacity:0;transform:scale(.4)}}
@media (prefers-reduced-motion:no-preference){
  .stage-img{animation:settle 1.8s var(--ease) both}
  .stage .nav{animation:fade .9s .15s ease both}
  .stage-copy > div > *{animation:rise .9s .3s var(--ease) both}
  .stage-copy h1{animation-delay:.42s}
  .stage-copy .lede{animation-delay:.56s}
  .floor .signup{animation:rise .9s .7s var(--ease) both}
  .hero-card-wrap .float-card{animation:rise 1s .9s var(--ease) both}
  .hero-card-wrap .dust{animation:fade 1.6s 1s ease both}
  .scenes li{animation:pop .5s var(--spring) both}
  .scenes li:nth-child(1){animation-delay:1.3s}
  .scenes li:nth-child(2){animation-delay:1.37s}
  .scenes li:nth-child(3){animation-delay:1.44s}
  .scenes li:nth-child(4){animation-delay:1.51s}
  .scenes li:nth-child(5){animation-delay:1.58s}
  .scenes li:nth-child(6){animation-delay:1.65s}
  .scenes li:nth-child(7){animation-delay:1.72s}
}

/* plain blocks rise; field reports slide in from the right */
.motion .rv{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease) var(--d,0s),transform .9s var(--ease) var(--d,0s)}
.motion .rv.from-right{transform:translateX(32px)}
.motion .rv.in{opacity:1;transform:none}

/* missions: the photo slides in, the connector draws out from the route, the tile pops, the exam card rises */
.motion .leg .shot{opacity:0;transform:translateX(-48px);transition:opacity .9s var(--ease),transform 1.1s var(--ease)}
.motion .leg .dust{opacity:0;transition:opacity 1.6s ease .3s}
.motion .leg::after{transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease) .15s}
.motion .leg .tile{opacity:0;transform:scale(.4);transition:opacity .4s ease .5s,transform .7s var(--spring) .5s}
.motion .leg .leg-copy{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease) .25s,transform .9s var(--ease) .25s}
.motion .leg .mission-card{opacity:0;transform:translateY(40px);transition:opacity .8s var(--ease) .6s,transform 1s var(--ease) .6s}
.motion .leg.in :is(.shot,.dust,.tile,.leg-copy,.mission-card){opacity:1;transform:none}
.motion .leg.in::after{transform:none}

/* how it works: each step rises, its number pops onto the flight line, then the line draws to the next step */
.motion .step .shot{opacity:0;transform:translateY(36px);transition:opacity .8s var(--ease) var(--d,0s),transform 1s var(--ease) var(--d,0s)}
.motion .step .step-no{opacity:0;transform:scale(.4);transition:opacity .4s ease calc(var(--d,0s) + .35s),transform .7s var(--spring) calc(var(--d,0s) + .35s)}
.motion .step figure::after{transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease) calc(var(--d,0s) + .55s)}
.motion .step :is(.step-label,h3,p){opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease) calc(var(--d,0s) + .2s),transform .8s var(--ease) calc(var(--d,0s) + .2s)}
.motion .step.in :is(.shot,.step-no,.step-label,h3,p){opacity:1;transform:none}
.motion .step.in figure::after{transform:none}

/* youtube: the player rises and its accent line draws around it */
.motion .player .shot{opacity:0;transform:translateY(40px);transition:opacity .9s var(--ease) .1s,transform 1.1s var(--ease) .1s}
.motion .player :is(.dots,.player-ui){opacity:0;transition:opacity 1.2s ease .5s}
.motion .player .accent{clip-path:inset(0 100% 0 0);transition:clip-path 1.2s var(--ease) .4s}
.motion .player.in :is(.shot,.dots,.player-ui){opacity:1;transform:none}
.motion .player.in .accent{clip-path:inset(0)}

/* join: the set settles in behind the copy, staying anchored on the gravel at the bottom */
.motion .join .join-media img{opacity:0;transform:scale(1.05);transform-origin:75% 100%;transition:opacity 1.2s ease,transform 1.8s var(--ease)}
.motion .join.in .join-media img{opacity:1;transform:none}

/* ---------- waiting on the API (roadmap 4): skeletons, the waiting line, no signal ----------
   The API runs on Lambda, so the first request after a quiet spell can take a few seconds (a cold start).
   A skeleton is the page's own markup with its words hidden behind soft blocks the same size, so nothing moves
   when the data lands. No shimmer: the blocks sit still, and the waiting line (deck/auth.js LA.waiting) says
   what's happening once a wait gets long. It's pinned to the bottom of the screen, so it never moves the page. */
:root{--sk:rgba(13,14,11,.085)}
.set:not(.studio),.dark,.panel.dark,.sim-bar,.check-card,.finale{--sk:rgba(236,228,216,.11)}
.sk{pointer-events:none;-webkit-user-select:none;user-select:none}
.sk-t{color:transparent!important;background:linear-gradient(var(--sk),var(--sk)) 0 52%/100% 74% no-repeat;border-radius:.28em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.sk-b{color:transparent!important;background:var(--sk)!important;box-shadow:none!important;border-color:transparent!important}
.sk-b *{visibility:hidden}
.sk-img{display:block;width:100%;aspect-ratio:16/9;background:var(--sk)}
.sk .insignia{box-shadow:inset 0 0 0 1.5px var(--sk)}
.sk .gauge{background:var(--sk)}
.sk .stat{border-left-color:var(--sk)}

.wait{position:fixed;z-index:45;left:50%;bottom:max(20px,env(safe-area-inset-bottom,0px));transform:translateX(-50%);
  width:max-content;max-width:min(560px,calc(100vw - 32px));display:flex;align-items:center;gap:10px;padding:10px 12px 10px 16px;min-height:44px;
  border-radius:22px;background:rgba(25,26,23,.88);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  color:var(--bone);font:500 13px/1.35 var(--f-mono);letter-spacing:.02em;box-shadow:inset 0 0 0 1px rgba(236,228,216,.16),0 18px 40px -18px rgba(0,0,0,.6);--focus:var(--bone)}
.wait-dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--red-hi);box-shadow:0 0 0 3px rgba(196,45,53,.28)}
.wait-text{text-wrap:pretty}
.wait-retry{flex:none;margin-left:6px;min-height:36px;padding:0 16px;border-radius:999px;border:0;background:var(--bone);color:var(--ink);font:600 14px var(--f-body);cursor:pointer}
.wait-retry:hover{background:#fff}
.wait-retry:disabled{opacity:.6;cursor:progress}
@media (prefers-reduced-motion:no-preference){
  .wait{animation:wait-in .45s var(--ease,ease) both}
  .wait-dot{animation:transmit 1.8s ease-in-out infinite}
}
@keyframes wait-in{from{opacity:0;transform:translate(-50%,12px)}}
@keyframes transmit{50%{opacity:.35;box-shadow:0 0 0 3px rgba(196,45,53,0)}}

/* No signal: mission control didn't answer and there's nothing saved on this device to show. */
.no-signal .eyebrow{color:var(--ink-2)}
.no-signal .row{margin-top:22px}
.set .no-signal .lede2{max-width:44ch}
.panel.no-signal{max-width:640px}
.panel.no-signal h2{margin-top:6px}
.panel.no-signal .muted{margin-top:8px}