/* ShopFlow Support — brand-matched to getsf.browncopower.com
   ---------------------------------------------------------------------------
   Palette and fonts are lifted verbatim from the marketing site's CSS custom
   properties, so a customer moving from getsf → help → the app sees one product
   rather than three. Values were read off the live site, not guessed.

   Still no framework and no build step. A help page that 500s is worse than no
   help page, and a dependency chain is the usual way that happens.

   DARK ON SCREEN, LIGHT ON PAPER. The brand is near-black and help pages get
   printed and pinned above a bench — a dark page prints as a black rectangle
   and eats a cartridge. The print block at the bottom flips it. Both, rather
   than choosing.
   ------------------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Rajdhani:wght@600;700&family=IBM+Plex+Mono:wght@400&display=swap');

:root {
  /* Brand — from getsf.browncopower.com */
  --gold:        #D4A017;
  --gold-bright: #EBB52B;
  --gold-dark:   #B8890F;
  --gold-tint:   rgba(212, 160, 23, .14);

  --ink:        #F2F0E9;   /* headings */
  --body:       #BCBAB0;   /* paragraphs */
  --muted:      #98968D;   /* captions */

  --bg:         #0A0A0B;
  --surface:    #111113;
  --surface-2:  #18181C;
  --border:     #2F2F36;
  --border-soft:#232329;

  --success:    #22C55E;
  --danger:     #F87171;

  --font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Rajdhani", "Inter", sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --r: 10px;
  --max: 760px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--body);
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

/* ---- header / footer ---- */
header.site {
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface);
  padding: 14px 20px;
}
header.site .inner {
  max-width: var(--max); margin: 0 auto;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
header.site a.brand {
  font-family: var(--font-display);
  font-weight: 700; font-size: 19px; letter-spacing: .01em;
  text-decoration: none; color: var(--ink); text-transform: uppercase;
}
header.site .tag { font-size: 12px; color: var(--muted); }
header.site .spacer { margin-left: auto; }
header.site a.app {
  font-size: 13px; text-decoration: none; color: var(--gold-bright); font-weight: 600;
}
header.site a.app:hover { color: var(--gold); }

footer.site {
  border-top: 1px solid var(--border-soft); background: var(--surface);
  padding: 20px; font-size: 13px; color: var(--muted);
}
footer.site .inner { max-width: var(--max); margin: 0 auto; }

/* ---- type ---- */
main { max-width: var(--max); margin: 0 auto; padding: 30px 20px 72px; }

h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 34px; line-height: 1.15; letter-spacing: .005em;
  color: var(--ink); margin: 0 0 8px;
}
h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 23px; color: var(--ink);
  margin: 36px 0 10px; padding-top: 14px;
  border-top: 1px solid var(--border-soft);
}
h3 { font-size: 16px; font-weight: 600; color: var(--ink); margin: 24px 0 6px; }
p  { margin: 0 0 14px; }
.lede { font-size: 17px; color: var(--body); margin-bottom: 24px; }

ul, ol { margin: 0 0 14px; padding-left: 22px; }
li { margin-bottom: 7px; }
strong { color: var(--ink); font-weight: 600; }

a { color: var(--gold-bright); }
a:hover { color: var(--gold); }

code {
  font-family: var(--font-mono); font-size: 0.86em;
  background: var(--surface-2); border: 1px solid var(--border-soft);
  border-radius: 5px; padding: 1px 6px; color: var(--ink);
}

/* ---- callouts. Three only; more kinds and they stop meaning anything. ---- */
.note, .warn, .good {
  border-radius: var(--r); padding: 14px 17px; margin: 0 0 17px;
  border: 1px solid var(--border); background: var(--surface); font-size: 15px;
}
.note { border-color: var(--gold-dark); background: var(--gold-tint); }
.warn { border-color: #7f1d1d; background: rgba(248, 113, 113, .09); }
.good { border-color: #166534; background: rgba(34, 197, 94, .09); }
.note strong, .warn strong, .good strong { display: block; margin-bottom: 4px; }
.note strong { color: var(--gold-bright); }
.warn strong { color: var(--danger); }
.good strong { color: var(--success); }

/* ---- contents cards ---- */
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 24px 0; }
.cards a {
  display: block; padding: 16px 18px; border: 1px solid var(--border-soft);
  border-radius: var(--r); text-decoration: none; color: inherit;
  background: var(--surface); transition: border-color .12s, background .12s;
}
.cards a:hover { border-color: var(--gold-dark); background: var(--surface-2); }
.cards .t {
  font-family: var(--font-display); font-weight: 700; font-size: 17px;
  color: var(--ink); margin-bottom: 3px;
}
.cards .d { font-size: 13px; color: var(--muted); line-height: 1.5; }

/* ---- numbered walkthroughs ---- */
ol.steps { counter-reset: step; list-style: none; padding-left: 0; }
ol.steps > li {
  counter-increment: step; position: relative;
  padding-left: 40px; margin-bottom: 17px;
}
ol.steps > li::before {
  content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--gold-tint); color: var(--gold-bright);
  border: 1px solid var(--gold-dark);
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}

/* ---- tables ---- */
table { border-collapse: collapse; width: 100%; margin: 0 0 18px; font-size: 15px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border-soft); vertical-align: top; }
th {
  font-family: var(--font-display); font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .07em; color: var(--muted);
  border-bottom-color: var(--border);
}
td strong { color: var(--ink); }

.backlink { display: inline-block; margin-bottom: 20px; font-size: 14px; text-decoration: none; }

@media (max-width: 600px) {
  .cards { grid-template-columns: 1fr; }
  h1 { font-size: 27px; }
  h2 { font-size: 20px; }
  main { padding: 24px 16px 52px; }
}

/* ---------------------------------------------------------------------------
   PRINT — flip to light.
   Someone printing a page to pin above a bench should not be handed a sheet of
   black toner. Backgrounds drop out, text goes dark, and link URLs are not
   expanded because these pages are read on paper, not clicked.
   ------------------------------------------------------------------------- */
@media print {
  :root { --ink:#000; --body:#1a1a1a; --muted:#555; --bg:#fff;
          --surface:#fff; --surface-2:#f4f4f5; --border:#bbb; --border-soft:#ddd; }
  body { background:#fff; color:#1a1a1a; font-size: 11.5pt; }
  header.site, footer.site, .backlink { display: none; }
  a { color: inherit; text-decoration: none; }
  .note, .warn, .good { background:#fff !important; border:1px solid #999 !important; }
  .note strong, .warn strong, .good strong { color:#000 !important; }
  .cards a { border:1px solid #bbb; background:#fff; }
  h1, h2, h3, strong, .cards .t { color:#000; }
  h2 { border-top:1px solid #bbb; }
}