* { box-sizing: border-box; }
body.guide {
  margin: 0 auto; max-width: 820px; padding: 28px 32px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 13px; line-height: 1.45; color: #1c2733; background: #fff;
}
.g-page + .g-page { margin-top: 28px; padding-top: 24px; border-top: 2px dashed #d8dee7; }
.g-head { display: flex; align-items: center; gap: 20px; border-bottom: 2px solid #16273c; padding-bottom: 14px; margin-bottom: 16px; }
.g-logo { height: 44px; }
.g-head h1 { margin: 0; font-size: 20px; }
.g-sub { margin: 2px 0 0; color: #5b6b7c; }
.g-print {
  margin-left: auto; font: inherit; font-weight: 600; cursor: pointer;
  padding: 8px 14px; border: 1px solid #d8dee7; border-radius: 6px; background: #fff;
}
.g-print:hover { background: #f1f4f8; }

.g-steps { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.g-step { border: 1px solid #d8dee7; border-radius: 8px; padding: 10px 12px; position: relative; }
.g-step > b { display: block; margin: 2px 0 4px; font-size: 13.5px; }
.g-step p { margin: 0; color: #33404e; }
.g-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; background: #1f4e8c; color: #fff;
  font-weight: 700; font-size: 12px;
}

.g-flowline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; color: #5b6b7c; }
.g-flowline span { display: inline-flex; align-items: center; gap: 5px; border: 1px solid #d8dee7; border-radius: 999px; padding: 2px 10px 2px 6px; font-weight: 600; color: #1c2733; white-space: nowrap; }
.g-flowline span:first-child { padding-left: 10px; }
.g-flowline .g-num { font-style: normal; width: 17px; height: 17px; font-size: 11px; }
.g-flowline em { font-style: italic; }
.g-intro { color: #33404e; }
h3 { font-size: 12.5px; margin: 8px 0 3px; }
.g-h2note { font-weight: 400; font-size: 11.5px; color: #5b6b7c; }
.g-stacks td:first-child { width: 38%; }

/* One flow the browser balances across two columns: sections are added and
   removed here often, and a fixed left/right split silently lopsides the
   sheet (and then spills it onto a third). Headings stay with their text. */
.g-cols { column-count: 2; column-gap: 26px; }
.g-cols h2 { break-after: avoid; }
.g-cols h3 { break-after: avoid; }
.g-cols p, .g-cols ul, .g-cols table { break-inside: avoid; }
h2 { font-size: 13.5px; margin: 12px 0 5px; border-bottom: 1px solid #e3e8ef; padding-bottom: 2px; }
p, ul { margin: 0 0 8px; }
ul { padding-left: 17px; }
li { margin-bottom: 3px; }
table { border-collapse: collapse; width: 100%; margin-bottom: 8px; }
td, th { border: 1px solid #e3e8ef; padding: 3px 7px; vertical-align: top; }
th { text-align: left; background: #f6f8fb; font-weight: 600; }
code { background: #f1f4f8; padding: 0 4px; border-radius: 3px; font-size: 12px; }
.g-foot { margin-top: 14px; padding-top: 8px; border-top: 1px solid #e3e8ef; color: #5b6b7c; font-size: 11.5px; text-align: center; }

@media print {
  body.guide { padding: 0; font-size: 11px; line-height: 1.35; max-width: none; }
  .g-print { display: none; }
  .g-page + .g-page { break-before: page; margin-top: 0; padding-top: 0; border-top: 0; }
  .g-head { gap: 14px; padding-bottom: 8px; margin-bottom: 10px; }
  .g-logo { height: 36px; }
  .g-head h1 { font-size: 17px; }
  .g-steps { gap: 8px; margin-bottom: 10px; }
  .g-step { padding: 6px 9px; }
  h2 { margin: 8px 0 3px; }
  h3 { margin: 6px 0 2px; }
  p, ul, table { margin-bottom: 5px; }
  li { margin-bottom: 2px; }
  td { padding: 2px 6px; }
  .g-foot { margin-top: 8px; padding-top: 5px; }
  .g-cols { column-gap: 20px; }
  .g-sop { line-height: 1.3; }
  .g-flowline { margin-bottom: 8px; }
  .g-step, table, tr, li { break-inside: avoid; }
  h2, h3 { break-after: avoid; }
  @page { size: letter; margin: 0.45in; }
}