/* Moed design tokens, taken from the app's globals.css (dark theme) */
:root{
  color-scheme:dark;
  --bg:8 8 10;
  --bg-tint:15 15 18;
  --surface:20 20 24;
  --surface-2:28 28 34;
  --line:38 38 44;
  --line-strong:56 56 64;
  --fg:243 241 238;
  --muted:178 174 168;
  --subtle:134 131 125;
  --accent:214 248 76;
  --accent-fg:11 14 2;
  --accent-soft:40 50 16;
  --gold:232 180 92;

  --font-sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-display:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --r:1.25rem;
}
*{box-sizing:border-box;border-color:rgb(var(--line))}
body{
  background-color:rgb(var(--bg));
  color:rgb(var(--fg));
  font-family:var(--font-sans);
  font-weight:400;
  line-height:1.62;
  font-feature-settings:"cv02","cv03","cv04","ss01";
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3{font-family:var(--font-display);letter-spacing:-0.015em;font-weight:600}
::selection{background:rgb(var(--accent) / .22)}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.narrow{max-width:660px;margin:0 auto}

/* ---------- atmosphere ---------- */
.glow{
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(58vw 40vw at 74% 4%, rgb(var(--accent) / .10), transparent 62%),
    radial-gradient(46vw 46vw at 8% 82%, rgb(var(--accent) / .05), transparent 66%);
}
main{position:relative;z-index:1}

/* ---------- masthead, matches the app header ---------- */
header{padding:26px 0 0}
.mark{display:flex;align-items:center;gap:13px}
.mark .apex{flex:0 0 auto}
.type{display:flex;flex-direction:column;line-height:1}
.wordmark{
  font-family:var(--font-display);font-weight:700;font-size:38px;line-height:1;
  letter-spacing:-0.02em;display:flex;align-items:center;
}
.wordmark .o{margin:0 1px;flex:0 0 auto}
.sub{
  font-family:var(--font-sans);font-weight:500;font-size:12px;
  letter-spacing:.3em;text-transform:uppercase;color:rgb(var(--muted));margin-top:6px;
}

/* ---------- hero ---------- */
.hero{padding:64px 0 88px}
.kick{
  font-size:14px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:rgb(var(--accent));margin:0 0 24px;
}
h1{
  font-size:clamp(34px,6vw,60px);line-height:1.04;margin:0 0 24px;
  max-width:15ch;text-wrap:balance;
}
h1 em{font-style:normal;color:rgb(var(--accent))}
.standfirst{color:rgb(var(--muted));font-size:18.5px;max-width:46ch;margin:0 0 44px}

/* ---------- appointment slip ---------- */
.slip{
  position:relative;max-width:440px;
  background-color:rgb(var(--surface));
  border:1px solid rgb(var(--line));
  border-radius:var(--r);
  padding:24px 26px 22px;
  box-shadow:0 1px 2px rgb(0 0 0 / .4), 0 28px 64px -32px rgb(0 0 0 / .9);
}
.slip-head{
  display:flex;justify-content:space-between;align-items:center;
  font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:rgb(var(--muted));margin-bottom:18px;
}
.row{display:grid;grid-template-columns:70px 1fr;gap:14px;align-items:baseline;padding:10px 0;border-bottom:1px solid rgb(var(--line))}
.row:last-of-type{border-bottom:0}
.row dt{font-size:12px;font-weight:500;letter-spacing:.16em;color:rgb(var(--muted));text-transform:uppercase}
.row dd{margin:0;font-family:var(--font-display);font-weight:500;font-size:21px;min-height:1.25em}
.cursor{display:inline-block;width:2px;height:.86em;background:rgb(var(--accent));vertical-align:-1px;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.stamp{
  margin-top:18px;display:inline-flex;align-items:center;gap:8px;
  background:rgb(var(--accent));color:rgb(var(--accent-fg));
  border-radius:99px;padding:7px 14px;
  font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  opacity:0;transform:translateY(4px);transition:opacity .5s ease,transform .5s ease;
}
.stamp.on{opacity:1;transform:none}

/* ---------- sections ---------- */
section{padding:88px 0}
.eyebrow{
  font-size:13.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:rgb(var(--accent));margin:0 0 20px;
}
h2{font-size:clamp(26px,3.4vw,38px);line-height:1.14;margin:0 0 24px;text-wrap:balance}
p{margin:0 0 20px}
.lede{font-size:19.5px;color:rgb(var(--fg))}
.body-muted{color:rgb(var(--muted));font-size:17.5px}

/* ---------- the name ---------- */
.name{border-top:1px solid rgb(var(--line));border-bottom:1px solid rgb(var(--line));background-color:rgb(var(--bg-tint))}
.gloss{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin-top:40px}
.gloss article{
  background-color:rgb(var(--surface));border:1px solid rgb(var(--line));
  border-radius:var(--r);padding:22px 22px 24px;
}
.gloss h3{font-size:25px;margin:0 0 6px;color:rgb(var(--accent));font-weight:600}
.gloss .tr{font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:rgb(var(--muted));margin:0 0 14px}
.gloss p{font-size:15.5px;color:rgb(var(--muted));margin:0}
.close{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(22px,3vw,30px);line-height:1.3;
  text-align:center;margin:52px auto 0;max-width:20ch;
}
.close strong{display:block;font-weight:700;color:rgb(var(--accent))}

/* ---------- hours ---------- */
.hours{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:36px}
.hour{background-color:rgb(var(--surface));border:1px solid rgb(var(--line));border-radius:var(--r);padding:26px 24px 28px}
.hour .win{
  display:inline-block;border-radius:99px;padding:5px 12px;margin-bottom:14px;
  background:rgb(var(--accent-soft));color:rgb(var(--accent));
  font-size:13.5px;font-weight:600;letter-spacing:.06em;
}
.hour h3{font-size:24px;margin:0 0 8px;font-weight:600}
.hour p{font-size:15.5px;color:rgb(var(--muted));margin:0}

/* ---------- not ---------- */
.nots{list-style:none;padding:0;margin:32px 0 0;max-width:580px}
.nots li{
  display:flex;gap:14px;align-items:baseline;padding:16px 0;
  border-bottom:1px solid rgb(var(--line));color:rgb(var(--muted));font-size:17px;
}
.nots li:first-child{border-top:1px solid rgb(var(--line))}
.nots li b{
  flex:0 0 48px;font-size:13px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:rgb(var(--accent));
}

/* ---------- founding ---------- */
.founding{border-top:1px solid rgb(var(--line));background:linear-gradient(180deg, rgb(var(--accent) / .045), transparent 40%)}
.offer{
  background-color:rgb(var(--surface));border:1px solid rgb(var(--line));
  border-radius:var(--r);padding:36px 32px;margin-top:36px;
}
.price{display:flex;align-items:baseline;gap:14px;margin-bottom:10px}
.price .fig{font-family:var(--font-display);font-weight:700;font-size:58px;line-height:1}
.price .per{font-size:12.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:rgb(var(--muted))}
.places{
  display:inline-block;margin:16px 0 0;padding:6px 14px;border-radius:99px;
  background:rgb(var(--accent-soft));color:rgb(var(--accent));
  font-size:13.5px;font-weight:600;letter-spacing:.04em;
}
.note a{color:rgb(var(--muted));text-decoration:none;border-bottom:1px solid rgb(var(--line))}
.note a:hover{color:rgb(var(--accent))}
.incl{list-style:none;padding:0;margin:22px 0 28px}
.incl li{position:relative;padding-left:24px;margin-bottom:13px;color:rgb(var(--muted));font-size:16.5px}
.incl li::before{content:"";position:absolute;left:0;top:.6em;width:10px;height:2px;border-radius:2px;background:rgb(var(--accent))}
.form{display:flex;gap:10px;flex-wrap:wrap}
.form input{
  flex:1 1 220px;min-width:0;font-weight:400;
  background-color:rgb(var(--surface-2));border:1px solid rgb(var(--line));
  border-radius:99px;color:rgb(var(--fg));font-family:var(--font-sans);
  font-size:15px;padding:14px 20px;
}
.form input::placeholder{color:rgb(var(--subtle))}
.form input:focus{outline:none;border-color:rgb(var(--accent))}
.btn{
  background:rgb(var(--accent));color:rgb(var(--accent-fg));border:0;cursor:pointer;
  border-radius:99px;padding:14px 26px;
  font-family:var(--font-sans);font-size:14px;font-weight:600;letter-spacing:.02em;
  transition:filter .18s ease;
}
.btn:hover{filter:brightness(1.08)}
.btn:focus-visible,.form input:focus-visible{outline:2px solid rgb(var(--accent));outline-offset:2px}
.note{font-size:14px;color:rgb(var(--muted));margin:16px 0 0;line-height:1.6}

/* ---------- footer ---------- */
footer{border-top:1px solid rgb(var(--line));padding:40px 0 56px}
footer .fm{font-size:13px;color:rgb(var(--muted));line-height:2}
footer a{color:rgb(var(--muted));text-decoration:none;border-bottom:1px solid rgb(var(--line))}
footer a:hover{color:rgb(var(--accent))}

/* ---------- reveal ---------- */
@media (prefers-reduced-motion:no-preference){
  .js .rv{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
  .js .rv.in{opacity:1;transform:none}
}

/* ---------- legal pages ---------- */
.legal{padding:56px 0 88px}
.legal h1{font-family:var(--font-display);font-weight:600;font-size:clamp(28px,4vw,40px);line-height:1.12;margin:0 0 10px;letter-spacing:-.015em}
.legal .updated{font-size:13.5px;color:rgb(var(--muted));margin:0 0 34px}
.legal h2{font-size:19px;margin:38px 0 14px}
.legal p,.legal li{color:rgb(var(--muted));font-size:16.5px}
.legal ul{padding-left:20px;margin:0 0 20px}
.legal li{margin-bottom:9px}
.legal a{color:rgb(var(--fg));text-decoration:none;border-bottom:1px solid rgb(var(--line))}
.legal a:hover{color:rgb(var(--accent))}
.legal .box{background-color:rgb(var(--surface));border:1px solid rgb(var(--line));border-radius:var(--r);padding:24px 26px;margin:0 0 26px}
.legal .box p:last-child{margin-bottom:0}
.back{display:inline-block;margin-bottom:30px;font-size:14px;color:rgb(var(--muted));text-decoration:none}
.back:hover{color:rgb(var(--accent))}
footer .links{margin-top:14px;font-size:13px}
footer .links a{margin:0 10px}
