/* Getting-started guide (guide.html). The page uses the landing shell (landing.css); this file adds the guide layout and
   the print rules that tools/build_guide.ps1 prints to frontend/guide/<product-slug>-getting-started.pdf. */
:root{--mark:var(--accent)}  /* the colour of the numbered marks drawn into the pictures (tools/build_guide.ps1 reads --accent) */
.print-only{display:none}
.guide-hero{display:flex;flex-direction:column;align-items:flex-start;gap:22px;padding-top:72px;padding-bottom:16px}
.guide-hero h1{font-size:52px;line-height:1.06;letter-spacing:-1.2px;max-width:820px}
.guide-hero .lede{max-width:680px}
.guide{display:grid;grid-template-columns:250px minmax(0,1fr);gap:56px;margin-top:40px}
.guide-toc{position:sticky;top:24px;align-self:start;max-height:calc(100vh - 48px);overflow:auto;padding:20px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card)}
.guide-toc h2{font-family:var(--font-body);font-size:var(--fs-xs);letter-spacing:1.4px;text-transform:uppercase;font-weight:700;color:var(--muted)}
.guide-toc ol{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:14px;line-height:1.4}
.guide-toc a{display:flex;justify-content:space-between;gap:12px;color:var(--text)}
.guide-toc a:hover{color:var(--link)}
.toc-page{display:none}
.guide-body{max-width:860px;min-width:0;display:flex;flex-direction:column;gap:56px;line-height:1.7}
.guide-body section{display:flex;flex-direction:column;gap:14px;scroll-margin-top:24px}
.guide-body h2{font-size:32px;letter-spacing:-.6px;line-height:1.15}
.guide-body h3{font-size:var(--fs-xl);margin-top:12px}
.guide-body ul,.guide-body ol{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:8px}
.guide-steps>li::marker{font-weight:700;color:var(--link)}
.guide-body code{overflow-wrap:anywhere}
.guide-see{padding:14px 18px;border-left:3px solid var(--teal);border-radius:var(--r);background:var(--pass-bg)}
/* Picture slots: tools/build_guide.ps1 (docs/getting-started-contract.md, section 4) draws the pictures and sizes the
   <img>; the list under each picture says what its numbered marks point at. A slot without a picture is not shown. */
.guide-shot{margin:8px 0 0;border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden;background:var(--card);box-shadow:var(--shadow-md)}
.guide-shot:not(:has(img)){display:none}
.guide-shot img{display:block;max-width:100%;height:auto;margin:0 auto}
.guide-shot figcaption{padding:10px 16px;font-size:var(--fs-md);color:var(--muted);border-top:1px solid var(--line)}
.guide-body ol.marks{list-style:none;padding:12px 16px 14px;gap:8px;border-top:1px solid var(--line)}
.guide-body ol.marks:empty{display:none}
.marks li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;align-items:start}
.mark{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;margin-top:3px;border-radius:50%;background:var(--mark);color:var(--on-accent);font-size:13px;font-weight:700;line-height:1}

@media (max-width:1080px){
  .guide{grid-template-columns:minmax(0,1fr);gap:32px}
  .guide-toc{position:static;max-height:none}
  .guide-hero{padding-top:56px}
  .guide-hero h1{font-size:44px}
}
@media (max-width:600px){
  .guide-hero{padding-top:40px}
  .guide-hero h1{font-size:34px;letter-spacing:-.8px}
  .guide-hero .lede{font-size:17px}
  .guide-body{gap:44px}
  .guide-body h2{font-size:27px}
  .guide-body ul,.guide-body ol{padding-left:20px}
}

/* ---------- Print: a cover, the contents with page numbers (written into guide.html by the build script after a first
   print) and every chapter on a new page. ---------- */
@page{size:Letter;margin:14mm 14mm 16mm}
@media print{
  body{background:#FFFFFF;font-size:10.5pt}
  .site-header,.site-footer,.guide-hero{display:none}
  .print-only{display:block}
  .guide{display:block;margin:0;padding:0;max-width:none}
  .guide-cover{min-height:228mm;display:flex;flex-direction:column;justify-content:center;gap:10px;break-after:page;padding:0 6mm;border-left:6px solid var(--accent)}
  .guide-cover-brand{font-family:var(--font-display);font-size:22pt;color:var(--accent)}
  .guide-cover h1{font-size:44pt;line-height:1.05;letter-spacing:-1px}
  .guide-cover-sub{font-size:14pt;color:var(--text);max-width:150mm}
  .guide-cover-meta{margin-top:18mm;font-size:11pt;color:var(--muted)}
  .guide-cover-note{font-size:10pt;color:var(--muted)}
  .guide-toc{position:static;max-height:none;overflow:visible;border:0;padding:0;background:none;break-after:page}
  .guide-toc h2{font-family:var(--font-display);font-size:26pt;letter-spacing:-.4px;text-transform:none;font-weight:400;color:var(--ink)}
  .guide-toc ol{margin-top:10mm;gap:5mm;font-size:12pt}
  .guide-toc a{border-bottom:1px dotted var(--line-2);padding-bottom:2mm}
  .toc-page{display:inline;color:var(--muted)}
  .guide-body{max-width:none;gap:0;line-height:1.55}
  .guide-body section{break-before:page;gap:9px}
  .guide-body section:first-child{break-before:auto}
  .guide-body h2{font-size:22pt}
  .guide-body h3{font-size:13pt;margin-top:8px}
  .guide-body h2,.guide-body h3{break-after:avoid}
  .guide-steps>li,.guide-see{break-inside:avoid}
  .guide-shot{box-shadow:none;break-inside:avoid;margin-top:4px}
  .guide-shot img{width:auto;max-height:112mm}
  .guide-shot figcaption{padding:6px 12px;font-size:9pt}
  .guide-body ol.marks{padding:6px 12px 8px;gap:2px;font-size:9pt;line-height:1.4}
  .mark{width:18px;height:18px;font-size:9.5px;margin-top:1px}
  .marks li{grid-template-columns:24px minmax(0,1fr);gap:6px}
  .marks li{break-inside:avoid}
  a{color:var(--accent)}
}