/* Cosmoose site stylesheet. Tokens from brand/BRAND-LOCK.md, locked 2026-08-21.
   Rewritten [CLAUDE · 2026-08-21] — Exo 2 and Inter removed, Space Grotesk + IBM Plex Sans in. */

:root{
  --void:#000000; --deep:#07090C; --surface:#12161C; --surface2:#1A1F27;
  --regolith:#2A2E35; --dust:#6E747E; --moon:#A8AEB8; --highlight:#D7DBE1; --text:#F4F6F8;
  --suit:#F3791C; --suit-hi:#FC922E; --suit-lo:#A24C23; --suit-glow:rgba(243,121,28,.25);
  --visor:#6BB0AD; --visor-hi:#8AC7C4; --visor-lo:#3A736F; --visor-dim:rgba(107,176,173,.12);
  --alert:#FF4D4D; --ok:#3DD68C;

  --disp:"Space Grotesk",-apple-system,"Segoe UI",sans-serif;
  --body:"IBM Plex Sans",-apple-system,"Segoe UI",Roboto,sans-serif;

  --bezel-hi:inset 0 1px 0 rgba(255,255,255,.075);
  --bezel-lo:inset 0 -1px 0 rgba(0,0,0,.6);
  --elev-1:0 1px 2px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.045);
  --elev-2:0 8px 28px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.055);

  --radius:12px;
  --maxw:1080px;
  --narrow:720px;
  --star:#fff;
}

/* Light mode is first-class, per BRAND-LOCK. */
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --void:#F3F4F6; --deep:#EAECEF; --surface:#FFFFFF; --surface2:#F5F6F8;
    --regolith:#DDE1E6; --dust:#767C85; --moon:#4A5058; --highlight:#101418; --text:#101418;
    --visor:#3A736F; --visor-hi:#2C5C58; --visor-dim:rgba(58,115,111,.10);
    --bezel-hi:inset 0 1px 0 rgba(255,255,255,.9);
    --bezel-lo:inset 0 -1px 0 rgba(16,20,24,.07);
    --elev-1:0 1px 2px rgba(16,20,24,.07), 0 0 0 1px rgba(16,20,24,.06);
    --elev-2:0 10px 30px rgba(16,20,24,.09), 0 0 0 1px rgba(16,20,24,.07);
  }
}
:root[data-theme="light"]{
  --void:#F3F4F6; --deep:#EAECEF; --surface:#FFFFFF; --surface2:#F5F6F8;
  --regolith:#DDE1E6; --dust:#767C85; --moon:#4A5058; --highlight:#101418; --text:#101418;
  --visor:#3A736F; --visor-hi:#2C5C58; --visor-dim:rgba(58,115,111,.10);
  --bezel-hi:inset 0 1px 0 rgba(255,255,255,.9);
  --bezel-lo:inset 0 -1px 0 rgba(16,20,24,.07);
  --elev-1:0 1px 2px rgba(16,20,24,.07), 0 0 0 1px rgba(16,20,24,.06);
  --elev-2:0 10px 30px rgba(16,20,24,.09), 0 0 0 1px rgba(16,20,24,.07);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--void); color:var(--text);
  font-family:var(--body); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}

/* ---- Starfield: black + stars, the world. Pure CSS, layered, no assets. ---- */
.stars{position:fixed; inset:0; pointer-events:none; z-index:0}
.stars i{position:absolute; inset:0; display:block}
.stars i:nth-child(1){
  opacity:.85;
  background-image:
    radial-gradient(1px 1px at 12% 18%, var(--star), transparent),
    radial-gradient(1px 1px at 68% 9%,  var(--star), transparent),
    radial-gradient(1px 1px at 34% 62%, var(--star), transparent),
    radial-gradient(1px 1px at 87% 44%, var(--star), transparent),
    radial-gradient(1px 1px at 52% 33%, var(--star), transparent),
    radial-gradient(1px 1px at 7% 77%,  var(--star), transparent),
    radial-gradient(1px 1px at 94% 82%, var(--star), transparent);
  background-size:1100px 900px; background-repeat:repeat;
}
.stars i:nth-child(2){
  opacity:.45;
  background-image:
    radial-gradient(1px 1px at 22% 41%, #cfd6e2, transparent),
    radial-gradient(1px 1px at 61% 71%, #b9c1cf, transparent),
    radial-gradient(1px 1px at 41% 12%, #cfd6e2, transparent),
    radial-gradient(1px 1px at 78% 27%, #b9c1cf, transparent);
  background-size:730px 610px; background-repeat:repeat;
}
.stars i:nth-child(3){
  opacity:.7;
  background-image:
    radial-gradient(2px 2px at 18% 55%, rgba(255,255,255,.75), transparent),
    radial-gradient(2px 2px at 82% 16%, rgba(255,255,255,.6), transparent),
    radial-gradient(2px 2px at 47% 88%, rgba(255,255,255,.5), transparent);
  background-size:1490px 1210px; background-repeat:repeat;
}
/* one faint orange glow, top right, where Bruce is */
.stars i:nth-child(4){
  background:radial-gradient(680px 460px at 78% -6%, var(--suit-glow), transparent 70%);
}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .stars{display:none}}
:root[data-theme="light"] .stars{display:none}

.wrap{position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; padding:0 24px}
.wrap.narrow{max-width:var(--narrow)}

/* ---- Type ---- */
h1,h2,h3,.wordmark,.eyebrow{font-family:var(--disp)}
h1{font-size:clamp(34px,5.4vw,58px); font-weight:700; line-height:1.06; letter-spacing:-.02em; margin:0 0 18px; text-wrap:balance}
h2{font-size:clamp(26px,3.4vw,38px); font-weight:700; line-height:1.13; letter-spacing:-.015em; margin:0 0 14px; text-wrap:balance}
h3{font-size:20px; font-weight:600; line-height:1.25; margin:0 0 8px}
p{margin:0 0 16px}
.lede{color:var(--moon); font-size:clamp(17px,2vw,20px); line-height:1.55; max-width:56ch}
.eyebrow{
  display:inline-block; font-size:12px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--visor); margin:0 0 16px;
}
.muted{color:var(--moon)}
.small{font-size:14px; color:var(--dust)}
strong{color:var(--text); font-weight:600}
a{color:var(--visor); text-decoration:none; border-bottom:1px solid transparent}
a:hover{color:var(--visor-hi); border-bottom-color:currentColor}

/* ---- Header ---- */
header.site{
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--void) 88%, transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--regolith);
}
header.site .wrap{display:flex; align-items:center; gap:18px; padding-block:15px}
.wordmark{
  font-weight:700; letter-spacing:.05em; font-size:19px; color:var(--text);
  border:0; margin-right:auto; white-space:nowrap;
}
.wordmark:hover{color:var(--text)}
.wordmark .oo{color:var(--suit)}
nav.site{display:flex; align-items:center; gap:26px}
nav.site a{color:var(--moon); font-size:14.5px; font-weight:500; border:0}
nav.site a:hover{color:var(--text)}

/* ---- Buttons ---- */
.btn,.btn-ghost{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--body); font-weight:600; font-size:16px; line-height:1;
  padding:15px 26px; border-radius:10px; border:1px solid transparent;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.btn{background:var(--suit); color:#0B0B0B; box-shadow:var(--bezel-hi), 0 6px 18px var(--suit-glow)}
.btn:hover{background:var(--suit-hi); color:#0B0B0B; border-bottom-color:transparent}
.btn:active{background:var(--suit-lo); transform:translateY(1px)}
:root[data-theme="light"] .btn{color:#fff}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .btn{color:#fff}}
.btn-ghost{background:transparent; color:var(--visor); border-color:var(--visor)}
.btn-ghost:hover{background:var(--visor-dim); color:var(--visor); border-bottom-color:var(--visor)}
.btn-sm{padding:10px 18px; font-size:14.5px; border-radius:8px}
.btns{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin:26px 0 14px}

/* ---- Sections ---- */
section{position:relative; z-index:1; padding:clamp(56px,7vw,96px) 0}
section.tight{padding-block:clamp(40px,5vw,64px)}
.band{background:var(--deep); border-block:1px solid var(--regolith)}

/* ---- Hero ---- */
.hero{padding-top:clamp(48px,6vw,84px); padding-bottom:clamp(40px,5vw,72px)}
.hero .wrap{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(24px,4vw,56px); align-items:center}
.hero-art{justify-self:center; width:100%; max-width:400px}
.hero-art img{width:100%; height:auto; display:block; filter:drop-shadow(0 24px 60px rgba(243,121,28,.22))}
.hero .lede{margin-bottom:0}
.pricenote{color:var(--dust); font-size:14.5px; margin:0}
@media (max-width:860px){
  .hero .wrap{grid-template-columns:1fr}
  .hero-art{max-width:240px; order:-1; justify-self:start}
}

/* ---- Cards ---- */
.card{
  background:var(--surface); border:1px solid var(--regolith); border-radius:var(--radius);
  padding:22px 24px; box-shadow:var(--bezel-hi), var(--bezel-lo), var(--elev-1);
}
.card p:last-child{margin-bottom:0}
.grid{display:grid; gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* the repair cards: a failure line, then the fix line */
.fix .lbl{
  font-family:var(--disp); font-size:11.5px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; display:block; margin-bottom:6px;
}
.fix .broke .lbl{color:var(--alert)}
.fix .fixed .lbl{color:var(--ok)}
.fix .broke{margin-bottom:14px; padding-bottom:14px; border-bottom:1px solid var(--regolith)}
.fix p{margin:0; font-size:15.5px; line-height:1.5}
.fix .broke p{color:var(--moon)}

/* the versus block */
.vs{display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--regolith); border-radius:var(--radius); overflow:hidden}
.vs > div{padding:26px 26px 28px}
.vs .them{background:var(--surface2)}
.vs .us{background:var(--surface); border-left:1px solid var(--regolith); box-shadow:inset 3px 0 0 var(--suit)}
.vs h3{font-size:15px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; margin-bottom:14px}
.vs .them h3{color:var(--dust)}
.vs .us h3{color:var(--suit)}
.vs ul{list-style:none; margin:0; padding:0}
.vs li{position:relative; padding-left:26px; margin:0 0 11px; font-size:16px; line-height:1.5}
.vs li:last-child{margin-bottom:0}
.vs li::before{position:absolute; left:0; top:0; font-family:var(--disp); font-weight:700}
.vs .them li{color:var(--moon)}
.vs .them li::before{content:"\00d7"; color:var(--dust); font-size:18px; line-height:1.4}
.vs .us li::before{content:"\2192"; color:var(--suit)}
@media (max-width:720px){
  .vs{grid-template-columns:1fr}
  .vs .us{border-left:0; border-top:1px solid var(--regolith); box-shadow:inset 0 3px 0 var(--suit)}
}

/* numbered steps */
.step .n{
  font-family:var(--disp); font-weight:700; font-size:13px; letter-spacing:.12em;
  color:var(--suit); display:block; margin-bottom:10px;
}
.step p{margin:0; color:var(--moon); font-size:16px}

/* two modes */
.mode{border-left:3px solid var(--suit)}
.mode.q{border-left-color:var(--visor)}
.mode h3{margin-bottom:6px}
.mode .tag{
  font-family:var(--disp); font-size:11.5px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--dust); display:block; margin-bottom:10px;
}

/* pricing */
.plans{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; align-items:start}
@media (max-width:720px){.plans{grid-template-columns:1fr}}
.plan{position:relative}
.plan.paid{border-color:var(--suit); box-shadow:var(--bezel-hi), var(--elev-2), 0 0 0 1px var(--suit)}
.plan .name{font-family:var(--disp); font-size:14px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--moon); display:block; margin-bottom:10px}
.plan .price{font-family:var(--disp); font-size:44px; font-weight:700; line-height:1; letter-spacing:-.02em; display:block}
.plan .per{font-family:var(--body); font-size:15px; font-weight:400; color:var(--dust); letter-spacing:0}
.plan ul{list-style:none; margin:18px 0 0; padding:0}
.plan li{position:relative; padding-left:24px; margin:0 0 10px; font-size:15.5px; line-height:1.5; color:var(--moon)}
.plan li::before{content:"\2713"; position:absolute; left:0; color:var(--suit); font-weight:700}
.plan.free li::before{color:var(--visor)}
.ribbon{
  position:absolute; top:-11px; right:20px; background:var(--suit); color:#0B0B0B;
  font-family:var(--disp); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  padding:5px 11px; border-radius:999px;
}
:root[data-theme="light"] .ribbon{color:#fff}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .ribbon{color:#fff}}

/* terms list */
.terms{list-style:none; margin:0; padding:0; display:grid; gap:12px; grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:620px){.terms{grid-template-columns:1fr}}
.terms li{position:relative; padding-left:28px; font-size:16px; line-height:1.5; color:var(--moon)}
.terms li::before{content:"\2713"; position:absolute; left:0; top:0; color:var(--ok); font-weight:700}
.terms b{color:var(--text); font-weight:600}

/* faq */
details.faq{border-bottom:1px solid var(--regolith); padding:18px 0}
details.faq:first-of-type{border-top:1px solid var(--regolith)}
details.faq summary{
  font-family:var(--disp); font-weight:600; font-size:18px; cursor:pointer; list-style:none;
  display:flex; justify-content:space-between; gap:16px; align-items:flex-start; color:var(--text);
}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+"; color:var(--suit); font-size:22px; line-height:1; flex:none}
details.faq[open] summary::after{content:"\2013"}
details.faq p{margin:12px 0 0; color:var(--moon); max-width:64ch}

/* status card */
.status{border-left:3px solid var(--visor)}
.status .dot{
  display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--suit);
  margin-right:9px; vertical-align:middle;
}

/* final cta */
.final{text-align:center}
.final .btns{justify-content:center}
.final .lede{margin-inline:auto}

/* ---- Legal documents: privacy, terms, refund ---- */
main.doc{padding:52px 0 78px; position:relative; z-index:1}
main.doc h1{font-size:clamp(28px,4vw,40px); margin-bottom:6px}
main.doc h2{font-size:clamp(21px,2.4vw,25px); margin:40px 0 10px}
main.doc h3{font-size:17px; font-family:var(--body); font-weight:600; margin:24px 0 6px}
main.doc p,main.doc li{color:var(--text)}
main.doc ul,main.doc ol{padding-left:22px}
main.doc li{margin:5px 0}
main.doc hr{border:0; border-top:1px solid var(--regolith); margin:34px 0}
main.doc code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.92em; background:var(--surface2); padding:1px 5px; border-radius:4px}
.stamp{color:var(--dust); font-size:14px; margin:0 0 26px}

.tablewrap{overflow-x:auto; margin:18px 0; border:1px solid var(--regolith); border-radius:var(--radius)}
table{border-collapse:collapse; width:100%; font-size:15px; min-width:520px}
th,td{text-align:left; padding:11px 14px; border-bottom:1px solid var(--regolith); vertical-align:top}
th{background:var(--surface2); font-weight:600; color:var(--text); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; font-family:var(--disp)}
tr:last-child td{border-bottom:0}

/* footer */
footer.site{background:var(--deep); border-top:1px solid var(--regolith); padding:38px 0 44px; position:relative; z-index:1}
footer.site .wrap{display:flex; flex-wrap:wrap; gap:22px 40px; justify-content:space-between; align-items:flex-start}
footer.site nav{display:flex; flex-wrap:wrap; gap:8px 20px}
footer.site a{color:var(--moon); font-size:14.5px}
footer.site a:hover{color:var(--suit); border-bottom-color:var(--suit)}
footer.site .legalese{color:var(--dust); font-size:13.5px; line-height:1.6; max-width:38ch}
footer.site .fm{font-family:var(--disp); font-weight:700; letter-spacing:.05em; font-size:16px; color:var(--text); display:block; margin-bottom:10px}
footer.site .fm .oo{color:var(--suit)}

:focus-visible{outline:2px solid var(--suit); outline-offset:3px; border-radius:4px}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important}
  html{scroll-behavior:auto}
}
@media (max-width:640px){
  body{font-size:16px}
  nav.site a:not(.btn){display:none}
  section{padding-block:48px}
}