/* Stark Gate guide (gate.starktronix.com/guide): a public, illustrated how-to for new users. Loads after gate.css and
   uses its tokens, brand tile, buttons and focus ring; this file adds the page layout, the numbered steps and the
   inline-SVG illustrations (classes x-*). No script: the contents are anchor links. */

/* 1. Frame ---------------------------------------------------------------------------------- */
html{scroll-padding-top:16px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body.guide{min-height:100vh;min-height:100dvh;font-size:15px}
.g-top{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:1240px;min-height:64px;margin:0 auto;padding:10px 24px}
.g-main:focus{outline:none}
.g-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,500px);align-items:center;gap:28px 56px;max-width:1240px;margin:0 auto;padding:16px 24px 44px}
.g-kick{display:inline-block;padding:5px 9px;border-radius:6px;background:var(--sel);color:var(--navy);font:500 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.g-hero h1{margin:16px 0 14px;font-size:44px;font-weight:400;line-height:1.12;letter-spacing:-.02em}
.g-lede{max-width:34em;font-size:17.5px;line-height:1.55;color:var(--dim)}
.g-public{display:flex;align-items:flex-start;gap:10px;max-width:36em;margin-top:20px;padding:11px 14px;border-radius:12px;background:var(--surface);border:1px solid var(--card-line);font-size:14px;line-height:1.5;color:var(--dim)}
.g-public .i{margin-top:1px;color:var(--navy)}
.g-hero-f{margin:0}
.g-wrap{display:grid;grid-template-columns:236px minmax(0,1fr);gap:24px;align-items:start;max-width:1240px;margin:0 auto;padding:0 24px 24px}

/* 2. Contents ------------------------------------------------------------------------------- */
.g-toc{position:sticky;top:16px;padding:2px 0}
.g-toc-h{padding:8px 14px;font-size:12px;color:var(--mute)}
.g-toc ol{display:grid;gap:2px}
.g-toc a{display:flex;align-items:center;gap:12px;min-height:36px;padding:6px 14px;border-radius:99px;color:var(--dim);font-size:14px;line-height:1.3;text-decoration:none;transition:background-color .12s}
.g-toc a:hover{background:var(--hover);text-decoration:none}
.g-toc .g-n{font:500 11px/1 var(--mono);color:var(--mute)}

/* 3. Sections ------------------------------------------------------------------------------- */
.g-sheet{min-width:0;background:var(--surface);border:1px solid var(--card-line);border-radius:16px}
.g-sec{padding:44px 48px;border-top:1px solid var(--line)}
.g-sec:first-child{border-top:0}
.g-sh{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin:0 0 10px}
.g-num{display:inline-grid;place-items:center;min-width:30px;height:24px;padding:0 7px;border-radius:6px;background:var(--sel);color:var(--navy);font:500 12px/1 var(--mono)}
.g-sec h2{font-size:28px;font-weight:400;line-height:1.2;letter-spacing:-.012em}
.g-only{display:inline-flex;align-items:center;gap:6px;padding:3px 11px 3px 9px;border-radius:99px;background:var(--surface-2);border:1px solid var(--card-line);color:var(--navy);font-size:12.5px;font-weight:500;line-height:1.4}
.g-only .i{width:14px;height:14px}
.g-intro{max-width:62ch;margin:0 0 28px;font-size:16px;line-height:1.6;color:var(--dim)}
.g-block + .g-block{margin-top:36px;padding-top:36px;border-top:1px dashed var(--line)}
.g-h3{margin:0 0 16px;font-size:18px;font-weight:500;line-height:1.35;color:var(--navy)}
.g-row{display:grid;grid-template-columns:minmax(400px,1fr) minmax(0,380px);gap:24px 40px;align-items:start}
.g-fig{margin:0;padding:16px;border-radius:14px;background:var(--surface-2);border:1px solid var(--card-line)}
.g-fig.wide{margin:0 0 4px;padding:20px}
.ill{display:block;width:100%;height:auto}
.g-fig.wide .ill{max-width:780px;margin:0 auto}
.only-narrow{display:none}
.g-sheet b{font-weight:500;color:var(--ink)}
.g-sheet p,.g-sheet li{overflow-wrap:break-word}
.g-url{font-family:var(--mono);font-size:.88em;color:var(--ink);overflow-wrap:break-word}
a.g-url{color:var(--accent)}

/* 4. Steps, button names, notes -------------------------------------------------------------- */
.steps{display:grid;gap:14px;counter-reset:step}
.steps > li{position:relative;min-height:28px;padding-left:44px;font-size:15.5px;line-height:1.6;counter-increment:step}
.steps > li::before{content:counter(step);position:absolute;left:0;top:-1px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--sel);color:var(--navy);font:500 12.5px/1 var(--mono)}
.ui{display:inline-block;padding:0 10px;border:1px solid var(--border-2);border-radius:99px;background:var(--surface);color:var(--ink);font-size:13.5px;font-weight:500;line-height:1.6;white-space:nowrap}
.ui.pri{border-color:var(--accent);background:var(--accent);color:#fff}
.g-note{display:flex;align-items:flex-start;gap:10px;margin-top:20px;padding:12px 14px;border-radius:12px;background:var(--surface-2);border:1px solid var(--card-line);font-size:14px;line-height:1.55;color:var(--dim)}
.g-note .i{margin-top:1px;color:var(--navy)}
.g-note.warn{background:var(--warn-bg);border-color:#f6e2a8}
.g-note.warn .i{color:var(--amber-ink)}
.g-note + .g-note{margin-top:10px}

/* 5. Dashboard parts, safety facts, questions, call to action ---------------------------------- */
.g-parts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px}
.g-part{padding:16px 18px 18px;border-radius:14px;background:var(--surface-2);border:1px solid var(--card-line)}
.g-part-h{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.g-part .sq,.g-facts .sq{background:var(--sel);color:var(--navy)}
.g-part h3{font-size:16px;font-weight:500;line-height:1.3;color:var(--navy)}
.g-part p{font-size:14.5px;line-height:1.55;color:var(--dim)}
.g-pn{display:grid;place-items:center;width:22px;height:22px;margin-left:auto;border-radius:50%;background:var(--accent);color:#fff;font:700 11.5px/1 var(--font)}
.g-facts{display:grid;gap:14px}
.g-facts > li{display:flex;align-items:flex-start;gap:14px;font-size:15.5px;line-height:1.6}
.g-facts .sq{width:30px;height:30px;border-radius:8px;margin-top:-2px}
.g-facts .sq .i{width:16px;height:16px}
.g-qa{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.g-q{padding:18px 20px;border-radius:14px;background:var(--surface-2);border:1px solid var(--card-line)}
.g-q h3{margin:0 0 6px;font-size:16px;font-weight:500;line-height:1.4;color:var(--navy)}
.g-q p{font-size:14.5px;line-height:1.6;color:var(--dim)}
.g-cta{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px 20px;margin:0 48px 48px;padding:24px 28px;border-radius:16px;background:var(--field)}
.g-cta .logo{width:40px;height:40px;border-radius:10px;font-size:21px}
.g-cta h2{font-size:22px;font-weight:400;line-height:1.3}
.g-cta p{margin-top:2px;font-size:14.5px;line-height:1.5;color:var(--dim)}
.g-cta-a{display:flex;flex-wrap:wrap;gap:10px}
.g-cta .g-fine{grid-column:2/-1;margin:0;font-size:13px;color:var(--dim)}
.g-foot{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 16px;max-width:1240px;margin:0 auto;padding:8px 24px 36px;font-size:12px;color:var(--mute)}
.g-foot a{color:var(--mute)}

/* 6. Illustrations: inline SVG, drawn in the dashboard's palette -------------------------------- */
.ill text{font-family:var(--font);fill:var(--ink)}
.ill .x-mono{font-family:var(--mono)}
.ill .x-w{fill:#fff}
.ill .x-ink{fill:var(--ink)}
.ill .x-dim{fill:var(--dim)}
.ill .x-mute{fill:var(--mute)}
.ill .x-nv{fill:var(--navy)}
.ill .x-gi{fill:var(--gold-ink)}
.ill .x-accent{fill:var(--accent)}
.ill .x-amber{fill:var(--amber-ink)}
.ill .x-live{fill:var(--live-fg)}
.x-blob{fill:var(--sel);opacity:.5}
.x-sel{fill:var(--sel)}
.x-acc{fill:var(--accent)}
.x-navy{fill:var(--navy)}
.x-white{fill:var(--surface)}
.x-bg{fill:var(--bg)}
.x-gold{fill:var(--gold)}
.x-card{fill:var(--surface);stroke:var(--card-line);stroke-width:1.5}
.x-cardbg{fill:var(--surface-2);stroke:var(--card-line);stroke-width:1.2}
.x-frame-bg{fill:var(--bg);stroke:var(--card-line);stroke-width:1.5}
.x-shadow{fill:var(--card-line)}
.x-field{fill:var(--surface);stroke:var(--border-2);stroke-width:1}
.x-field2{fill:var(--surface);stroke:var(--card-line);stroke-width:1}
.x-fieldbg{fill:var(--field)}
.x-sk{fill:var(--card-line)}
.x-sk2{fill:var(--border-2)}
.x-chrome{fill:var(--surface-2)}
.x-hair{fill:none;stroke:var(--line);stroke-width:1.2}
.x-dot,.x-base{fill:var(--border-2)}
.x-warn{fill:var(--warn-bg);stroke:#f6e2a8;stroke-width:1}
.x-tag{fill:var(--live-bg);stroke:var(--live-line);stroke-width:1}
.x-okc{fill:var(--emerald);stroke:var(--surface);stroke-width:2}
.x-chk{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.x-chk.lg{stroke-width:3}
.x-ln{fill:none;stroke:var(--navy);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.x-ln-acc{fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.x-flow{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;opacity:.55}
.x-flow-d{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-dasharray:5 6}
.x-frame{fill:none;stroke:var(--accent);stroke-width:3.5;stroke-linecap:round}
.x-ic{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.x-shield{fill:var(--surface);stroke:var(--navy);stroke-width:3.5;stroke-linejoin:round}
.x-check{fill:none;stroke:var(--accent);stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
.x-ripple{fill:#fff;opacity:.35}
.x-cursor{fill:#fff;stroke:var(--navy);stroke-width:1.6;stroke-linejoin:round}
.x-scrim{fill:var(--navy);opacity:.32}
.x-lift{fill:var(--navy);opacity:.18}

/* 7. Narrower screens ------------------------------------------------------------------------- */
/* Below 1180 px the contents move above the sheet as a row of pills, so the steps keep a readable width. */
@media (max-width:1180px){
  .g-wrap{display:block}
  .g-toc{position:static;margin:0 0 16px;padding:14px 16px 16px;border-radius:16px;background:var(--surface);border:1px solid var(--card-line)}
  .g-toc-h{padding:0 0 10px}
  .g-toc ol{display:flex;flex-wrap:wrap;gap:8px}
  .g-toc a{min-height:34px;gap:8px;padding:5px 14px 5px 12px;border:1px solid var(--border-2);font-size:13.5px}
  .g-row{grid-template-columns:minmax(0,1fr) minmax(0,380px)}
  .g-sec{padding:40px}
  .g-cta{margin:0 40px 40px}
}
@media (max-width:980px){
  .g-hero{grid-template-columns:minmax(0,1fr);gap:24px}
  .g-hero-f{max-width:520px}
  .g-row{grid-template-columns:minmax(0,1fr)}
  .g-row .g-fig{order:-1;max-width:520px}
  .g-sec{padding:36px 32px}
  .g-cta{margin:0 32px 36px}
}
@media (max-width:600px){
  .g-top{min-height:56px;padding:8px 16px}
  .g-hero{padding:8px 16px 28px}
  .g-hero h1{margin-top:14px;font-size:32px}
  .g-lede{font-size:16.5px}
  .g-wrap{padding:0 16px 16px}
  .g-sec{padding:30px 18px}
  .g-sec h2{font-size:24px}
  .g-intro{margin-bottom:22px;font-size:15.5px}
  .g-block + .g-block{margin-top:28px;padding-top:28px}
  .g-fig,.g-fig.wide{padding:10px}
  .steps > li{font-size:15px}
  .g-facts > li{font-size:15px}
  .g-parts,.g-qa{grid-template-columns:minmax(0,1fr)}
  .g-cta{grid-template-columns:auto minmax(0,1fr);margin:0 18px 28px;padding:20px}
  .g-cta-a,.g-cta .g-fine{grid-column:1/-1}
  .g-cta-a .btn{flex:1 1 auto}
  .g-foot{padding:4px 16px 28px}
  .only-wide{display:none}
  .only-narrow{display:block}
}