/* The Moonshot Mastery Academy — shared styles: the dark field.
   Element rules are scoped to the site's own regions (main, .hd, .ft) so the chat widget keeps its own look. */

:root{
  --bg:#0a1417;  --bg-2:#0f1d21;  --panel:#14272c;  --teal-deep:#1f4d55;
  --text:#ece6d6;
  --muted:#a9b5b0;
  --muted-teal:#cdd8d2;
  --gold:#e8b94c;  --gold-2:#f2cb6c;
  --coral:#e8876a;
  --teal:#6fb0aa;
  --line:rgba(236,230,214,.12); --line-2:rgba(236,230,214,.22);
  --font-head:'Fraunces',Georgia,serif; --font-body:'Manrope',system-ui,sans-serif; --font-mono:'IBM Plex Mono',ui-monospace,monospace;
  --wrap:1200px; --r:6px;
  --pad:clamp(16px,4vw,48px);
  --glow:0 0 0 1px var(--gold),0 0 24px rgba(232,185,76,.18);
  --hd-h:72px;
  --sc-accent:#1f4d55; --sc-icon-stroke:1.75;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--hd-h) + 12px)}
body{
  margin:0;min-height:100vh;overflow-x:hidden;
  color:var(--text);font:400 1.0625rem/1.65 var(--font-body);
  background-color:var(--bg);
  /* static star field: three layers of tiny dots, low opacity */
  background-image:
    radial-gradient(circle at 17% 23%,rgba(236,230,214,.55) 0 1px,transparent 1.6px),
    radial-gradient(circle at 71% 64%,rgba(236,230,214,.38) 0 .8px,transparent 1.4px),
    radial-gradient(circle at 43% 87%,rgba(242,203,108,.30) 0 1px,transparent 1.7px),
    radial-gradient(circle at 88% 12%,rgba(236,230,214,.28) 0 .7px,transparent 1.3px);
  background-size:263px 263px,377px 377px,541px 541px,199px 199px;
}
img,svg,video{max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit}

:where(main,.hd,.ft) :where(h1,h2,h3,h4){font-family:var(--font-head);font-weight:600;line-height:1.1;letter-spacing:-.01em;margin:0 0 .5em;text-wrap:balance;font-optical-sizing:auto}
:where(main) h1{font-size:clamp(2.2rem,5.2vw,4.25rem)}
:where(main) h2{font-size:clamp(1.75rem,3.4vw,2.7rem)}
:where(main) h3{font-size:clamp(1.2rem,1.8vw,1.45rem)}
:where(main) h4{font-size:1.1rem}
:where(main,.hd,.ft) :where(h1,h2,h3) em{font-style:italic;font-weight:400;color:var(--gold)}
:where(main,.hd,.ft) p{margin:0 0 1em}
:where(main,.hd,.ft) :where(ul,ol){margin:0 0 1em;padding-left:1.2em}
:where(main,.hd,.ft) strong{font-weight:700}
:where(main,.hd,.ft) a{color:var(--text);text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:1px;text-underline-offset:3px}
:where(main,.hd,.ft) a:hover{color:var(--gold)}
:where(main,.hd,.ft) :focus-visible,.skip:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
:where(main):focus{outline:none}
:where(main,.hd,.ft) hr{border:0;border-top:1px solid var(--line);margin:2rem 0}
:where(main,.hd,.ft) ::selection{background:var(--gold);color:var(--bg)}
:where(main,.hd,.ft) [class*="grid"] > *,:where(main) .row > *{min-width:0}

/* ---------- utilities ---------- */
.wrap{width:100%;max-width:calc(var(--wrap) + 2 * var(--pad));margin-inline:auto;padding-inline:var(--pad)}
.bleed{width:100%;position:relative}
.bleed-r{padding-left:max(var(--pad),calc((100% - var(--wrap)) / 2));padding-right:0}
.band{padding-block:clamp(56px,9vw,120px)}
.band--alt{background-color:var(--bg-2)}
.band--deep{background-color:var(--teal-deep)}
.band--deep .muted{color:var(--muted-teal)}
.measure{max-width:66ch}
.mono,.price,.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.label{display:inline-block;font:500 .8rem/1.4 var(--font-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--teal)}
.band--deep .label{color:var(--muted-teal)}
.price{color:var(--gold);font-weight:500}
.price s,.was{color:var(--muted);font-weight:400}
.muted{color:var(--muted)}
.coral{color:var(--coral)}
.lead{font-size:clamp(1.1rem,1.6vw,1.25rem);line-height:1.6}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--gold);color:var(--bg);padding:10px 16px;border-radius:2px;font-weight:700;text-decoration:none}
.skip:focus{top:12px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  min-height:48px;padding:0 22px;border:1px solid var(--gold);border-radius:2px;
  background:var(--gold);color:var(--bg);
  font:700 .95rem/1.2 var(--font-body);letter-spacing:.02em;text-align:center;text-decoration:none;
  cursor:pointer;transition:background-color .2s,box-shadow .2s,color .2s,border-color .2s;
}
:where(main,.hd,.ft) a.btn{color:var(--bg);text-decoration:none}
.btn:hover,:where(main,.hd,.ft) a.btn:hover{background:var(--gold-2);border-color:var(--gold-2);color:var(--bg);box-shadow:var(--glow)}
.btn:focus-visible{box-shadow:var(--glow)}
.btn--ghost,:where(main,.hd,.ft) a.btn--ghost{background:transparent;border-color:var(--text);color:var(--text)}
.btn--ghost:hover,:where(main,.hd,.ft) a.btn--ghost:hover{background:var(--text);border-color:var(--text);color:var(--bg);box-shadow:none}
.btn--sm{min-height:44px;padding:0 16px;font-size:.88rem}
.btn--block{width:100%}
.btn.is-in,:where(main,.hd,.ft) a.btn.is-in{background:transparent;border-color:var(--teal);color:var(--teal)}
.btn.is-in::before{content:"";width:.5em;height:.9em;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-2px)}
.btn.is-in:hover,:where(main,.hd,.ft) a.btn.is-in:hover{background:transparent;color:var(--text);border-color:var(--text);box-shadow:none}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.add-form{display:inline-flex;margin:0}
.link-arrow,:where(main,.hd,.ft) a.link-arrow{display:inline-flex;align-items:center;gap:.4em;min-height:44px;color:var(--coral);font-weight:700;text-decoration:none}
.link-arrow::after{content:"\2192";transition:transform .2s}
.link-arrow:hover,:where(main,.hd,.ft) a.link-arrow:hover{color:var(--gold-2)}
.link-arrow:hover::after{transform:translateX(3px)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* ---------- chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.chip{
  display:inline-flex;align-items:center;gap:.4em;min-height:30px;padding:3px 10px;
  border:1px solid var(--line-2);border-radius:2px;background:transparent;color:var(--muted);
  font:500 .8rem/1.3 var(--font-mono);letter-spacing:.04em;text-decoration:none;
}
:where(main,.hd,.ft) a.chip,button.chip{min-height:44px;padding:6px 14px;color:var(--text);text-decoration:none;cursor:pointer}
:where(main,.hd,.ft) a.chip:hover,button.chip:hover{border-color:var(--gold);color:var(--gold)}
.chip[aria-current],.chip[aria-pressed="true"],.chip.is-on,:where(main,.hd,.ft) a.chip[aria-current]{border-color:var(--gold);background:rgba(232,185,76,.1);color:var(--gold)}

/* ---------- forms ---------- */
.field{display:grid;gap:6px;margin:0 0 18px}
.field > label,.field__label{font-weight:500;font-size:.95rem}
.field__opt{font:400 .78rem var(--font-mono);color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-left:.4em}
.input,.field input:not([type=checkbox]):not([type=radio]),.field select,.field textarea{
  width:100%;min-height:48px;padding:10px 14px;
  background:var(--bg-2);color:var(--text);
  border:1px solid var(--line-2);border-radius:2px;
  font:400 1rem/1.4 var(--font-body);
}
.field textarea{min-height:120px;resize:vertical}
.field select{appearance:none;-webkit-appearance:none;padding-right:40px;
  background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat}
.input::placeholder,.field input::placeholder{color:var(--muted);opacity:.8}
.input:hover,.field input:hover,.field select:hover,.field textarea:hover{border-color:rgba(236,230,214,.4)}
.input:focus-visible,.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold)}
.field [aria-invalid="true"],.input[aria-invalid="true"]{border-color:var(--coral);box-shadow:inset 3px 0 0 var(--coral)}
.field__err,.err{display:block;color:var(--coral);font-size:.9rem;font-weight:500}
.field__err::before,.err::before{content:"! ";font-family:var(--font-mono)}
.check{display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:start;margin:0 0 16px}
.check input{width:22px;height:22px;margin:2px 0 0;accent-color:var(--gold);cursor:pointer}
.check label{cursor:pointer;line-height:1.5}
.check.is-bad input{outline:2px solid var(--coral);outline-offset:2px}
.notice{padding:14px 18px;border:1px solid var(--line-2);border-left:3px solid var(--teal);border-radius:var(--r);background:var(--panel);margin:0 0 24px}
.notice--bad{border-left-color:var(--coral)}
.notice--good{border-left-color:var(--gold)}
.notice p:last-child{margin-bottom:0}

/* ---------- course tile ---------- */
.tile{position:relative;display:flex;flex-direction:column;min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:border-color .25s,transform .25s}
.tile:hover{border-color:var(--line-2)}
.tile__media{display:block;overflow:hidden;aspect-ratio:4/3;background:var(--bg-2)}
.tile__media--wide{aspect-ratio:16/9}
.tile__media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.tile:hover .tile__media img{transform:scale(1.03)}
.tile__body{display:flex;flex-direction:column;gap:10px;flex:1;padding:18px 18px 20px}
.tile__code{font:500 .78rem/1.3 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--teal)}
.tile__name{font-family:var(--font-head);font-weight:600;font-size:1.25rem;line-height:1.2;margin:0}
:where(main) .tile__name a{text-decoration:none}
:where(main) .tile__name a:hover{color:var(--gold)}
.tile__problem{font-size:.95rem;color:var(--muted);font-style:italic;margin:0}
.tile__meta{font:400 .82rem/1.4 var(--font-mono);font-variant-numeric:tabular-nums;color:var(--muted);letter-spacing:.02em}
.tile__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 14px;margin-top:auto;padding-top:12px;border-top:1px solid var(--line)}
.tile__price{font:500 1.15rem var(--font-mono);font-variant-numeric:tabular-nums;color:var(--gold)}

/* ---------- eyepiece circle (double ring) ---------- */
.eyepiece{position:relative;display:block;aspect-ratio:1/1;width:100%;border-radius:50%;isolation:isolate}
.eyepiece::before,.eyepiece::after{content:"";position:absolute;border-radius:50%;pointer-events:none;z-index:1}
.eyepiece::before{inset:-5px;border:1px solid var(--line-2)}
.eyepiece::after{inset:-11px;border:1px solid rgba(232,185,76,.55)}
.eyepiece img,.eyepiece .eyepiece__fill{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;clip-path:circle(50% at 50% 50%);border-radius:50%}
.eyepiece__fill{background:radial-gradient(circle at 50% 50%,var(--bg-2),var(--bg) 70%)}
.eyepiece--sm::before{inset:-3px}
.eyepiece--sm::after{inset:-6px}
.eyepiece__label{display:block;margin-top:18px;text-align:center;font:500 .8rem/1.4 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--teal)}
.js .eyepiece--focus img{opacity:0;filter:blur(8px)}
.js .eyepiece--focus.in img,.js .in .eyepiece--focus img{animation:focus-in .9s ease-out forwards}

/* ---------- gold winding path ---------- */
.path-svg{display:block;overflow:visible;pointer-events:none}
.path-svg path,.path-svg .path{fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.path-svg .path--faint{stroke:var(--line-2);stroke-dasharray:2 6}
/* draw with pathLength="1" on the <path> */
.js .path-svg .path-draw,.js .path-svg path:not(.path--faint){stroke-dasharray:1;stroke-dashoffset:1}
.js .path-svg.in .path-draw,.js .in .path-svg .path-draw,.js .path-svg.in path:not(.path--faint),.js .in .path-svg path:not(.path--faint){animation:path-draw 1.4s ease-out forwards}
.station-dot{fill:var(--bg);stroke:var(--gold);stroke-width:2}

/* ---------- twinkling dots ---------- */
.stars{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}
.stars i{position:absolute;left:var(--x,50%);top:var(--y,50%);width:var(--s,3px);height:var(--s,3px);border-radius:50%;background:var(--text);box-shadow:0 0 6px rgba(236,230,214,.6);opacity:.3;animation:twinkle var(--t,4s) ease-in-out infinite;animation-delay:var(--d,0s)}
.stars i:nth-child(3n){background:var(--gold-2)}
.stars i:nth-child(5n){background:var(--coral)}

/* ---------- reveal ---------- */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.js .reveal[data-delay="1"]{transition-delay:.1s}
.js .reveal[data-delay="2"]{transition-delay:.2s}
.js .reveal[data-delay="3"]{transition-delay:.3s}
.js .reveal.in{opacity:1;transform:none}

@keyframes twinkle{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes path-draw{to{stroke-dashoffset:0}}
@keyframes focus-in{from{opacity:0;filter:blur(8px)}to{opacity:1;filter:blur(0)}}

/* ---------- header ---------- */
.hd{position:sticky;top:0;z-index:50;background:rgba(10,20,23,.94);border-bottom:1px solid var(--line);backdrop-filter:saturate(1.2)}
.hd__bar{display:flex;align-items:center;gap:20px;min-height:var(--hd-h)}
.hd a{text-decoration:none}
.hd__brand{display:inline-flex;align-items:center;gap:12px;min-height:44px;margin-right:auto;color:var(--text)}
.hd .hd__brand:hover{color:var(--text)}
.hd__mark{display:block;width:auto;height:44px}
.hd__word{display:flex;flex-direction:column;line-height:1.05}
.hd__word-1{font:600 1.2rem/1.1 var(--font-head);letter-spacing:-.005em}
.hd__word-2{font:500 .74rem/1.3 var(--font-body);font-variant:small-caps;text-transform:lowercase;letter-spacing:.12em;color:var(--muted);font-size:.9rem}
.hd__nav{display:flex;align-items:center;gap:4px}
.hd__link{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;color:var(--text);font-weight:500;font-size:.95rem;border-bottom:2px solid transparent}
.hd .hd__link:hover{color:var(--gold)}
.hd .hd__link[aria-current="page"]{color:var(--gold);border-bottom-color:var(--gold)}
.hd__tools{display:flex;align-items:center;gap:6px}
.hd__icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:2px;color:var(--text);background:none;border:0;cursor:pointer}
.hd__icon svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.hd .hd__icon:hover,.hd .hd__icon[aria-expanded="true"]{color:var(--gold)}
.hd__cart{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px 0 14px;border:1px solid var(--line-2);border-radius:2px;color:var(--text);font-weight:500;font-size:.95rem}
.hd .hd__cart:hover,.hd .hd__cart[aria-current="page"]{border-color:var(--gold);color:var(--gold)}
.hd__count{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border-radius:12px;background:var(--gold);color:var(--bg);font-size:.8rem;font-weight:500}
.hd__burger{display:none;align-items:center;justify-content:center;width:44px;height:44px;padding:0;background:none;border:1px solid var(--line-2);border-radius:2px;color:var(--text);cursor:pointer}
.hd__burger-lines,.hd__burger-lines::before,.hd__burger-lines::after{display:block;width:18px;height:2px;background:currentColor;border-radius:1px;transition:transform .2s,opacity .2s}
.hd__burger-lines{position:relative}
.hd__burger-lines::before,.hd__burger-lines::after{content:"";position:absolute;left:0}
.hd__burger-lines::before{top:-6px}
.hd__burger-lines::after{top:6px}
.hd__burger[aria-expanded="true"] .hd__burger-lines{background:transparent}
.hd__burger[aria-expanded="true"] .hd__burger-lines::before{transform:translateY(6px) rotate(45deg)}
.hd__burger[aria-expanded="true"] .hd__burger-lines::after{transform:translateY(-6px) rotate(-45deg)}
.hd__search{display:none;border-top:1px solid var(--line);background:var(--bg-2)}
.js .hd__search.is-open{display:block}
.hd__search-form{display:flex;align-items:center;gap:12px;padding-block:12px;margin:0}
.hd__search-label{flex:none;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--teal)}
.hd__search-form .input{flex:1;min-width:0}

@media (max-width:999px){
  .hd__burger{display:inline-flex}
  .hd__bar{flex-wrap:wrap;gap:10px}
  .hd__nav{order:5;flex-basis:100%;flex-direction:column;align-items:stretch;gap:0;padding:4px 0 14px}
  .hd__link{border-bottom:1px solid var(--line);padding:0 4px}
  .hd .hd__link[aria-current="page"]{border-bottom-color:var(--line);box-shadow:inset 3px 0 0 var(--gold);padding-left:12px}
  .js .hd__nav{display:none}
  .js .hd.is-open .hd__nav{display:flex}
}
@media (max-width:560px){
  :root{--hd-h:64px}
  .hd__word-1{font-size:1.02rem}
  .hd__word-2{font-size:.8rem}
  .hd__mark{height:38px}
  .hd__cart > span:first-child{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .hd__cart{padding:0 10px}
  .hd__search-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
}
@media (max-width:360px){
  .hd__word{display:none}
}

/* ---------- footer ---------- */
.ft{margin-top:0;border-top:1px solid var(--line);background:var(--bg-2);padding:clamp(48px,7vw,80px) 0 28px;font-size:.95rem}
.ft__grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:32px}
.ft__mark{display:block;width:48px;height:auto;margin-bottom:14px}
.ft__line{color:var(--muted);max-width:28ch}
.ft__col{display:flex;flex-direction:column;align-items:flex-start}
.ft__head{margin:0 0 6px;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--teal)}
.ft .ft__col a{display:inline-flex;align-items:center;min-height:44px;color:var(--text);text-decoration:none}
.ft .ft__col a:hover{color:var(--gold);text-decoration:underline;text-decoration-color:var(--gold)}
.ft__pay{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:36px;padding-top:24px;border-top:1px solid var(--line)}
.pay-strip{display:flex;flex-wrap:wrap;gap:8px}
.pay-strip img{display:block;height:26px;width:auto;border-radius:3px}
.ft__pay-note{margin:0;color:var(--muted);font-size:.9rem}
.ft__base{margin-top:18px}
.ft__copy{margin:0;font-size:.8rem;letter-spacing:.06em;color:var(--muted)}
@media (max-width:860px){
  .ft__grid{grid-template-columns:1fr 1fr}
  .ft__brand{grid-column:1 / -1}
}
@media (max-width:420px){
  .ft__grid{grid-template-columns:1fr}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important}
  .js .reveal{opacity:1;transform:none}
  .js .eyepiece--focus img{opacity:1;filter:none;animation:none}
  .js .path-svg path,.js .path-svg .path-draw{stroke-dashoffset:0;animation:none}
  .stars i{animation:none;opacity:.7}
  [data-parallax]{transform:none!important}
}

/* ---------- print (the order page above all) ---------- */
@media print{
  body{background:#fff!important;color:#000;font-size:11pt}
  .hd,.ft,.skip,.no-print,body > button[aria-controls="chat"],body > aside#chat{display:none!important}
  :where(main) a{color:#000;text-decoration:underline}
  :where(main) *{color:#000!important;background:transparent!important;box-shadow:none!important;text-shadow:none!important}
  .panel,.tile{border:1px solid #999!important}
  .js .reveal{opacity:1!important;transform:none!important}
  .js .eyepiece--focus img{opacity:1!important;filter:none!important}
  .path-svg path{stroke:#000!important;stroke-dashoffset:0!important;animation:none!important}
  .stars{display:none}
  .price{color:#000}
  img{max-width:120px}
  h1,h2,h3{page-break-after:avoid}
  li,dl,.tile{page-break-inside:avoid}
}