/* JARVIS guides — shared stylesheet.
   Design tokens copied from landing/index.html so the guides read as the
   same product. Deliberately lighter than the landing page: no video, no
   boot sequence, no JS — these pages have to load fast on a phone while
   someone is halfway through a signup form. */
:root{
  --void:#02060e;
  --panel:#061120;
  --panel-2:#081827;
  --line:#12304a;
  --line-bright:#1d4a6e;
  --cyan:#35c6ff;
  --cyan-dim:#1a7fb0;
  --ice:#bfe9ff;
  --dim:#5f88a8;
  --gold:#ffb64d;
  --gold-dim:#8a5f22;
  --mono:ui-monospace,"SF Mono","Cascadia Code","JetBrains Mono",Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --chrome-h:44px;
  --gutter:clamp(16px,4vw,32px);
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  background:var(--void);
  color:var(--ice);
  font-family:var(--mono);
  font-size:15px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
::selection{background:var(--cyan);color:var(--void)}

/* ambient ground: grid + vignette (same recipe as the landing page) */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 120% 80% at 50% -10%, rgba(53,198,255,.07), transparent 60%),
    radial-gradient(ellipse 100% 100% at 50% 120%, rgba(53,198,255,.04), transparent 55%),
    repeating-linear-gradient(0deg, transparent 0 47px, rgba(53,198,255,.045) 47px 48px),
    repeating-linear-gradient(90deg, transparent 0 47px, rgba(53,198,255,.045) 47px 48px);
}

a{color:var(--cyan);text-decoration:none}
a:hover{color:var(--ice)}
:focus-visible{outline:1px solid var(--cyan);outline-offset:3px}

/* ============ HUD HEADER ============ */
.hud-top{
  position:sticky;top:0;z-index:50;height:var(--chrome-h);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:0 12px;background:rgba(2,6,14,.92);backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
  font-size:11px;letter-spacing:.2em;color:var(--dim);
}
.hud-brand{display:flex;align-items:center;gap:8px;color:var(--ice);letter-spacing:.22em;white-space:nowrap}
.hud-brand:hover{color:var(--cyan)}
.hud-dot{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
.hud-mid{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hud-right{color:var(--cyan);white-space:nowrap}
@media (max-width:640px){.hud-mid{display:none}}

/* ============ LAYOUT ============ */
main{position:relative;z-index:1}
.wrap{max-width:760px;margin:0 auto;padding:clamp(36px,8vh,72px) var(--gutter) clamp(48px,10vh,96px)}

.sec-label{
  display:flex;align-items:center;gap:14px;
  font-size:11px;letter-spacing:.28em;color:var(--dim);
  margin-bottom:clamp(20px,4vh,34px);white-space:nowrap;
}
.sec-label::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
.sec-label b{color:var(--cyan);font-weight:400}
.sec-label a{color:var(--dim)}
.sec-label a:hover{color:var(--cyan)}

h1{
  font-family:var(--mono);text-wrap:balance;
  font-size:clamp(24px,4.4vw,34px);line-height:1.2;letter-spacing:-.01em;
  margin-bottom:18px;color:var(--ice);font-weight:700;
}
.lede{font-family:var(--sans);color:var(--dim);font-size:clamp(15px,2.4vw,17px);max-width:58ch;margin-bottom:22px}
.lede b,.lede strong{color:var(--ice);font-weight:600}
p{font-family:var(--sans);max-width:62ch;margin-bottom:18px;color:#9fc4dd}
p strong{color:var(--ice);font-weight:600}
code{font-family:var(--mono);font-size:.92em;color:var(--gold);background:rgba(255,182,77,.08);padding:1px 5px;border:1px solid var(--gold-dim)}

/* ============ HUD PANEL (shared with the landing page) ============ */
.panel{
  position:relative;background:var(--panel);border:1px solid var(--line);
  padding:clamp(18px,3.5vw,28px);margin-bottom:26px;
}
.panel::before,.panel::after,
.panel .tick::before,.panel .tick::after{
  content:"";position:absolute;width:12px;height:12px;border-color:var(--cyan);border-style:solid;border-width:0;
}
.panel::before{top:-1px;left:-1px;border-top-width:1px;border-left-width:1px}
.panel::after{top:-1px;right:-1px;border-top-width:1px;border-right-width:1px}
.panel .tick{position:absolute;inset:0;pointer-events:none}
.panel .tick::before{bottom:-1px;left:-1px;border-bottom-width:1px;border-left-width:1px}
.panel .tick::after{bottom:-1px;right:-1px;border-bottom-width:1px;border-right-width:1px}
.panel p:last-child{margin-bottom:0}
.panel.warn{border-color:var(--gold-dim);background:rgba(255,182,77,.05)}
.panel.warn::before,.panel.warn::after,
.panel.warn .tick::before,.panel.warn .tick::after{border-color:var(--gold)}

/* ============ STEPS ============ */
ol.steps{list-style:none;counter-reset:step;margin:0 0 26px}
ol.steps>li{
  counter-increment:step;position:relative;
  padding:0 0 22px 52px;
  font-family:var(--sans);color:#9fc4dd;max-width:60ch;
}
ol.steps>li::before{
  content:counter(step);
  position:absolute;left:0;top:-2px;
  width:32px;height:32px;display:grid;place-items:center;
  font-family:var(--mono);font-size:13px;font-weight:700;
  color:var(--void);background:var(--cyan);
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
}
ol.steps>li::after{
  content:"";position:absolute;left:15px;top:36px;bottom:4px;width:1px;background:var(--line);
}
ol.steps>li:last-child{padding-bottom:0}
ol.steps>li:last-child::after{display:none}
ol.steps>li strong{color:var(--ice);font-weight:600;display:block;margin-bottom:2px}

/* ============ PROVIDER PICKER (hub) ============ */
ul.picks{list-style:none;margin:0 0 26px;display:grid;gap:12px}
ul.picks a{
  display:block;padding:16px 20px;
  background:var(--panel-2);border:1px solid var(--line);
  font-size:14px;letter-spacing:.04em;color:var(--cyan);
  transition:border-color .2s,background .2s,color .2s;
}
ul.picks a:hover{border-color:var(--cyan);background:var(--panel);color:var(--ice)}
ul.picks .tag{color:var(--gold);font-size:11px;letter-spacing:.18em;margin-left:8px;white-space:nowrap}

/* ============ SCREENSHOT SLOT ============ */
/* Console screenshots. Pages without one stay text-first — dropping a figure
   into a step needs no other change. */
figure.shot{margin:0 0 22px;border:1px solid var(--line);background:var(--panel)}
figure.shot img{display:block;width:100%;height:auto;max-width:100%}
figure.shot figcaption{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--dim);
  padding:10px 14px;border-top:1px solid var(--line);
}
/* Inside a numbered step, break out of the 52px number gutter so the console
   UI stays legible on a phone instead of shrinking to the text column. */
ol.steps figure.shot{margin:16px 0 4px -52px}
ol.steps>li:last-child figure.shot:last-child{margin-bottom:0}

/* ============ SUPPORT + BACK ============ */
.support{
  font-family:var(--sans);color:var(--dim);
  border-top:1px solid var(--line);padding-top:20px;margin-top:34px;max-width:62ch;
}
.back{font-family:var(--mono);font-size:12px;letter-spacing:.14em;margin-top:26px;margin-bottom:0}

footer{
  position:relative;z-index:1;
  border-top:1px solid var(--line);padding:26px var(--gutter) 34px;
  text-align:center;font-size:10px;letter-spacing:.2em;color:var(--dim);line-height:2;
}
footer .fbrand{color:var(--ice);letter-spacing:.3em;margin-bottom:8px;font-size:12px}