/* Slight Angle Studios — shared site styles */
:root{--ink:#0D0F12;--teal:#10202A;--amber:#E0B15A;--gold:#caa15a;--bone:#E8E1D4;--stone:#A8A39A;--panel:#152A36;--line:#26414f;--maxw:1080px}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--bone);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
a{color:var(--amber);text-decoration:none}
h1,h2,h3{font-weight:800;line-height:1.1;letter-spacing:-.01em}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px;border-radius:4px}
.kicker{color:var(--amber);letter-spacing:.2em;text-transform:uppercase;font-size:12px;font-weight:700}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:var(--amber);color:var(--ink);padding:8px 12px;border-radius:8px;z-index:100}
/* nav */
nav.site{position:sticky;top:0;z-index:50;background:rgba(13,15,18,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
nav.site .wrap{display:flex;align-items:center;gap:18px;height:60px}
.logo{font-weight:800;letter-spacing:.04em;font-size:14px;text-transform:uppercase;color:var(--bone);margin-right:auto}
.logo b{color:var(--amber)}
.navlinks{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.navlinks a{color:var(--bone);font-size:13.5px}.navlinks a:hover{color:var(--amber)}
@media(max-width:820px){.navlinks{display:none}}
.btn{background:var(--amber);color:var(--ink);border:none;border-radius:999px;padding:11px 20px;font-weight:800;cursor:pointer;font-size:14px;display:inline-block}
.btn.ghost{background:transparent;color:var(--bone);border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--amber);color:var(--amber)}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
/* hero */
header.hero{padding:80px 0 56px;border-bottom:1px solid var(--line);background:radial-gradient(900px 380px at 75% -10%,rgba(224,177,90,.10),transparent 60%),linear-gradient(180deg,var(--teal),var(--ink))}
header.hero h1{font-size:clamp(34px,6.2vw,58px);margin:14px 0 0;max-width:18ch}
header.hero .lead{font-size:clamp(17px,2.5vw,22px);margin-top:16px;max-width:48ch}
/* sections */
section{padding:56px 0;border-bottom:1px solid var(--line)}
h2{font-size:clamp(23px,4vw,34px);max-width:26ch}
.sub{color:var(--stone);margin-top:12px;max-width:64ch;font-size:16.5px}
.lead-p{font-size:17px;max-width:62ch;margin-top:8px}
.note{margin-top:18px;padding:14px 16px;border-left:3px solid var(--line);background:rgba(255,255,255,.02);border-radius:0 10px 10px 0;color:var(--stone);font-size:14px}
/* cards / grid */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px}
@media(max-width:880px){.grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.grid{grid-template-columns:1fr}}
.grid.two{grid-template-columns:1fr 1fr}@media(max-width:680px){.grid.two{grid-template-columns:1fr}}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px;display:flex;flex-direction:column}
.card h3,.card .bn{font-size:17px;font-weight:800;color:var(--bone)}
.card .tag{color:var(--amber);font-size:13px;font-weight:700;margin-top:4px}
.card p,.card .one{color:var(--stone);font-size:14px;margin-top:8px;flex:1}
.badge{display:inline-block;margin-top:12px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);border:1px solid var(--line);border-radius:999px;padding:3px 9px;align-self:flex-start}
.card .go{margin-top:12px;font-weight:700;font-size:14px}
.hidden{display:none}
/* method strip */
.method{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:24px}
@media(max-width:680px){.method{grid-template-columns:1fr 1fr}}
.step-b{background:var(--teal);border:1px solid var(--line);border-radius:12px;padding:16px}
.step-b .n{color:var(--amber);font-weight:800}.step-b h3{font-size:15px;margin-top:6px}.step-b p{color:var(--stone);font-size:13px;margin-top:4px}
/* interactive "try it" panel */
.tryit{background:linear-gradient(120deg,var(--teal),var(--panel));border:1px solid var(--line);border-radius:18px;padding:28px;margin-top:26px}
.q{margin-top:20px}.q .qh{font-weight:800;font-size:16px;margin-bottom:10px}
.opts{display:flex;gap:9px;flex-wrap:wrap}
.opt{background:var(--ink);border:1px solid var(--line);color:var(--bone);border-radius:999px;padding:10px 16px;font-size:14px;cursor:pointer}
.opt:hover{border-color:var(--amber)}.opt[aria-pressed="true"]{background:var(--amber);color:var(--ink);border-color:var(--amber);font-weight:800}
.result{display:none;margin-top:22px;padding:20px;border:1px solid var(--line);border-radius:14px;background:var(--ink)}
.result.show{display:block}.result h3{color:var(--amber);font-size:18px}
.result .lab{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--amber);font-weight:700;margin-top:12px}
.result p{font-size:15px;margin-top:4px}
.disc{color:var(--stone);font-size:13px;margin-top:14px;max-width:72ch}
/* doors / lanes */
.doors{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.door{background:var(--panel);border:1px solid var(--line);color:var(--bone);border-radius:12px;padding:14px 16px;font-size:14.5px;cursor:pointer;text-align:left}
.door:hover{border-color:var(--amber)}
.lanes{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:26px}@media(max-width:680px){.lanes{grid-template-columns:1fr}}
.lane{display:block;background:linear-gradient(160deg,var(--panel),var(--teal));border:1px solid var(--line);border-top:3px solid var(--amber);border-radius:18px;padding:26px;transition:.2s}
.lane:hover{transform:translateY(-3px);border-color:var(--amber)}.lane h3{font-size:24px;color:var(--bone)}.lane .t{color:var(--amber);font-weight:700;margin-top:4px}.lane p{color:var(--stone);margin-top:10px;font-size:15px}
/* pipeline */
.pipe{display:flex;gap:6px;flex-wrap:wrap;margin-top:22px;align-items:center}
.pstage{background:var(--teal);border:1px solid var(--line);border-radius:999px;padding:8px 13px;font-size:12.5px;color:var(--bone)}
.pstage .arw{color:var(--stone);margin:0 2px}
/* signup */
.signup{background:linear-gradient(120deg,var(--teal),var(--panel));border:1px solid var(--line);border-radius:18px;padding:30px}
.row2{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
input[type=email],input[type=text],textarea,select{background:var(--ink);border:1px solid var(--line);color:var(--bone);border-radius:10px;padding:12px 14px;font-size:15px;font-family:inherit}
input[type=email]{flex:1;min-width:240px;max-width:380px}
.ok{color:var(--amber);font-size:14px;margin-top:12px;display:none}.ok.show{display:block}
footer.site{padding:40px 0;color:#5f6b73;font-size:13px}
footer.site .cols{display:flex;gap:24px;flex-wrap:wrap;margin-bottom:16px}
footer.site a{color:var(--stone)}footer.site a:hover{color:var(--amber)}