/* Thaumaturgy — landing + docs. Same tokens as the app. */
:root{--void:#0b0d12;--panel:#141821;--strip:#0f1219;--line:#232937;--line-2:#2f3647;--gold:#d4a72c;--gold-2:#e6b95a;--gold-dim:rgba(212,167,44,.14);--bone:#e9e4d6;--ash:#8a8f9c;--ash-2:#5f6572;--live:#3fae6b;--stop:#c0392b;--display:Cinzel,Georgia,serif;--body:"Source Sans 3","Segoe UI",system-ui,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--void);color:var(--bone);font:16px/1.55 var(--body);-webkit-font-smoothing:antialiased}
a{color:var(--gold)}
img{max-width:100%;height:auto}
.top{position:sticky;top:0;z-index:20;background:rgba(11,13,18,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top-in{max-width:1180px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--bone)}
.brand img{width:40px;height:40px}
.brand .word{display:block;font:600 22px/1 var(--display);letter-spacing:.14em}
.brand .word b{color:var(--gold);font-weight:600}
.brand .tag{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ash);margin-top:3px}
.links{margin-left:auto;display:flex;align-items:center;gap:18px}
.links a{color:var(--ash);text-decoration:none;font-size:14px;letter-spacing:.04em}
.links a:hover{color:var(--bone)}
.links a.cta,.btn.primary{background:var(--gold);color:#1a1405;font-weight:700;padding:9px 16px;border-radius:9px}
.links a.cta:hover,.btn.primary:hover{background:var(--gold-2);color:#1a1405}
.btn{display:inline-block;padding:11px 18px;border:1px solid var(--line-2);border-radius:10px;color:var(--bone);text-decoration:none;font-weight:600;letter-spacing:.02em}
.btn:hover{border-color:var(--gold)}
main{max-width:1180px;margin:0 auto;padding:0 20px 60px}
h1,h2{font-family:var(--display);letter-spacing:.03em;text-wrap:balance}
/* landing */
.hero{position:relative;min-height:600px;display:flex;align-items:center;padding:64px 0 120px;overflow:hidden}
.hero-in{position:relative;z-index:2;width:100%;max-width:1180px;margin:0 auto;padding:0 20px}
.hero-bg{position:absolute;top:0;bottom:0;left:50%;width:min(100%,1500px);transform:translateX(-50%);z-index:0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:62% 50%;display:block}
.hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(11,13,18,.96) 0%,rgba(11,13,18,.9) 30%,rgba(11,13,18,.5) 52%,rgba(11,13,18,.12) 100%),linear-gradient(180deg,rgba(11,13,18,.5) 0%,rgba(11,13,18,0) 22%,rgba(11,13,18,0) 55%,rgba(11,13,18,.85) 88%,var(--void) 100%)}
.hero-text{max-width:600px}
.eyebrow{font:600 12px/1 var(--display);letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin:0 0 14px}
.hero h1{font-size:38px;line-height:1.15;margin:0 0 16px;color:var(--bone);font-weight:600;text-shadow:0 2px 24px rgba(0,0,0,.6)}
.lede{font-size:18px;color:var(--ash);margin:0 0 22px;max-width:56ch}
.lede strong{color:var(--bone)}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.fine{font-size:13.5px;color:var(--ash);max-width:52ch;margin:0}
.fine.beta{margin-top:10px;color:var(--ash)}
.fine.beta b{color:var(--gold);font-weight:600}
.fine.beta a{color:var(--gold)}
.shot{margin:-110px auto 0;position:relative;z-index:3}
.shot video{border:1px solid var(--line-2);border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.65),0 0 0 6px rgba(20,24,33,.9);display:block;width:100%;aspect-ratio:16/10;background:#000}
.shot-cap{color:var(--ash);font-size:15px;text-align:center;max-width:70ch;margin:18px auto 0}
.shot-cap strong{color:var(--gold);font:600 13px/1 var(--display);letter-spacing:.14em;text-transform:uppercase}
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:40px 0}
.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px 22px 18px}
.card .ic{font-size:28px;margin-bottom:8px}
.card h2{font-size:17px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin:0 0 10px}
.card p{margin:0;color:var(--ash);font-size:15px}
.card em{color:var(--bone);font-style:normal;font-weight:600}
.tour{margin:56px auto;max-width:900px;text-align:center}
.tour h2{font-size:22px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin:0 0 8px}
.tour p{color:var(--ash);margin:0 0 18px}
.tour video{width:100%;aspect-ratio:16/10;background:#000;border:1px solid var(--line-2);border-radius:14px}
.phone-row{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:40px;align-items:center;margin:56px 0}
.phone-shot img{max-width:320px;border:1px solid var(--line-2);border-radius:26px;box-shadow:0 30px 80px rgba(0,0,0,.55);display:block;margin:0 auto}
.phone-text h2{font-size:22px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin:0 0 12px}
.phone-text ul{padding-left:18px;color:var(--ash);margin:0 0 20px}
.phone-text li{margin-bottom:10px}
.phone-text strong{color:var(--bone)}
.faq{max-width:760px;margin:40px auto}
.faq h2{font-size:22px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin:0 0 10px}
.faq details{border-top:1px solid var(--line);padding:12px 0}
.faq summary{cursor:pointer;font-weight:600;color:var(--bone)}
.faq p{color:var(--ash);margin:8px 0 0}
footer{border-top:1px solid var(--line);color:var(--ash);font-size:13px}
.foot-in{max-width:1180px;margin:0 auto;padding:22px 20px}
/* docs */
.docs{display:grid;grid-template-columns:230px minmax(0,1fr);gap:40px;padding:36px 0}
.docs nav{position:sticky;top:78px;align-self:start;display:flex;flex-direction:column;gap:2px}
.docs nav .h{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ash-2);margin:12px 0 6px}
.docs nav a{color:var(--ash);text-decoration:none;padding:6px 10px;border-radius:8px;font-size:14px}
.docs nav a:hover{color:var(--bone);background:var(--strip)}
.docs nav a.on{color:var(--gold);background:var(--strip)}
.doc{max-width:720px}
.doc h1{font-size:30px;margin:0 0 6px;color:var(--bone)}
.doc .sub{color:var(--ash);margin:0 0 26px;font-size:17px}
.doc h2{font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:32px 0 10px}
.doc p,.doc li{color:var(--bone);font-size:16px}
.doc li{margin-bottom:6px}
.doc .tip{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:10px;padding:12px 16px;color:var(--ash);font-size:15px;margin:16px 0}
.doc .tip strong{color:var(--bone)}
.doc table{border-collapse:collapse;width:100%;font-size:15px;margin:10px 0 18px}
.doc th{text-align:left;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ash-2);padding:6px 8px;border-bottom:1px solid var(--line)}
.doc td{padding:8px;border-bottom:1px solid var(--line);vertical-align:top}
.doc td:first-child{white-space:nowrap;font-weight:600}
.doc kbd{background:var(--strip);border:1px solid var(--line-2);border-radius:5px;padding:1px 6px;font-size:13px;font-family:inherit}
.doc .next{margin-top:36px;padding-top:16px;border-top:1px solid var(--line);color:var(--ash)}
.doc img{border:1px solid var(--line-2);border-radius:12px;margin:8px 0 16px}
.transcript h2{margin-top:22px}.transcript p{color:var(--ash)}
@media (max-width:900px){
  .hero{min-height:560px;padding:36px 0 90px}.hero h1{font-size:28px}.hero::before{background:linear-gradient(180deg,rgba(11,13,18,.25) 0%,rgba(11,13,18,.7) 40%,rgba(11,13,18,.94) 100%)}.hero-text{padding-top:150px}.hero-bg{width:100%;-webkit-mask-image:none;mask-image:none}.hero-bg img{object-position:60% 30%}.shot{margin-top:-60px}
  .three{grid-template-columns:1fr}
  .phone-row{grid-template-columns:1fr}
  .docs{grid-template-columns:1fr;gap:16px}.docs nav{position:static;flex-direction:row;flex-wrap:wrap;gap:4px}.docs nav .h{flex-basis:100%;margin:6px 0 2px}
  .top-in{padding:10px 16px}.brand .tag{display:none}.links{gap:12px}.links a{font-size:13px}
}

.scenes{max-width:900px;margin:40px auto}
.scenes h2{font-size:22px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin:0 0 6px;text-align:center}
.scenes > p{color:var(--ash);text-align:center;margin:0 0 18px}
.scene-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:10px}
.scene-list li{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;color:var(--ash);font-size:14.5px}
.scene-list strong{display:block;color:var(--bone);margin-bottom:3px}

.systems{max-width:820px;margin:44px auto;text-align:center}
.systems h2{font-size:22px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin:0 0 10px}
.systems p{color:var(--ash);margin:0;font-size:15.5px;line-height:1.7}
.systems strong{color:var(--bone);font-weight:600}
.legal{font-size:11.5px;color:var(--ash);margin:10px 0 0;max-width:900px;line-height:1.5}

/* ---- Guides: numbered walkthroughs in the docs. The step number is the structure, so it is drawn
   rather than left to the list marker, and each step is an anchor the HowTo schema points at. */
.doc .meta{color:var(--ash-2);font-size:13.5px;margin:-6px 0 22px}
.doc ol.steps{list-style:none;counter-reset:step;margin:0 0 6px;padding:0}
.doc ol.steps > li{counter-increment:step;position:relative;padding:0 0 4px 52px;margin:0 0 26px}
.doc ol.steps > li::before{content:counter(step);position:absolute;left:0;top:-2px;width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:var(--gold-dim,#3a2f12);color:var(--gold,#d4a72c);border:1px solid var(--gold,#d4a72c);
  font:700 15px/1 "Source Sans 3",sans-serif}
.doc ol.steps > li > h2{margin:0 0 6px;font-size:19px}
.doc ol.steps > li > p{margin:0}
.doc ul.next-list{margin:0 0 20px;padding-left:20px}
.doc ul.next-list li{margin:0 0 8px}
@media (max-width:640px){
  .doc ol.steps > li{padding-left:44px;margin-bottom:22px}
  .doc ol.steps > li::before{width:30px;height:30px;font-size:14px}
  .doc ol.steps > li > h2{font-size:17px}
}

/* Guide cards on the landing page — the entry point for anyone arriving from a how-to search. */
.guides ul.guide-list{list-style:none;margin:18px 0 14px;padding:0;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.guides ul.guide-list li{background:var(--panel,#12151d);border:1px solid var(--line,#232838);
  border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:5px}
.guides ul.guide-list a{text-decoration:none}
.guides ul.guide-list span{color:var(--ash-2,#8a8f9c);font-size:13.5px;line-height:1.45}
.guides .more{margin:4px 0 0}