/* ============================================================
   SMARTBIZOWNER — SHARED DESIGN TOKENS
   Brand blues are ported from the Client Portal; the neutral (text/
   surface/border) ramp was deliberately moved onto a standard slate
   scale for this pass, per an explicit brief with exact hex values —
   this is now the KB's own baseline, not a 1:1 mirror of the portal.
   Every KB page (home, category, article) loads this file first,
   then assets/css/kb.css for layout on top of it.
   ============================================================ */
:root{
  /* brand */
  --blue:#0847A6;
  --blue-deep:#063B8A;
  --blue-bright:#2563EB;
  --blue-lighter:#3B82F6;
  --blue-soft:#EAF2FF;
  --blue-tint:#F7FAFF;

  /* surfaces */
  --bg:#F6F8FB;
  --surface:#FFFFFF;
  --surface-2:#F1F5F9;
  --border:#E2E8F0;
  --border-strong:#CBD5E1;
  --hairline:#EDF1F6;

  /* text */
  --text:#0F172A;
  --text-2:#334155;
  --muted:#64748B;

  /* status only — never used for decoration */
  --green:#0A7247;
  --green-soft:#E8F6EF;
  --red:#B42318;
  --red-soft:#FDECEA;
  --amber:#9A5B08;
  --amber-soft:#FCF3E4;

  --r:10px;
  --r-sm:8px;
  --r-lg:14px;
  --shadow:0 1px 2px rgba(13,24,38,.04);
  --shadow-pop:0 14px 32px -12px rgba(8,71,166,.28);
  --ease:cubic-bezier(.2,.7,.3,1);

  /* ---------- type scale — the named vocabulary for font-size going
     forward. Existing hand-tuned sizes elsewhere (13.5px, 14.5px, etc.)
     were deliberate optical adjustments made and verified over many
     rounds — they're left alone rather than force-fit onto this scale,
     but every new component should pick a step from here instead of
     inventing another one-off value. ---------- */
  --text-2xs:11px;
  --text-xs:12px;
  --text-sm:13px;
  --text-base:14px;
  --text-md:15px;
  --text-lg:16px;
  --text-xl:19px;
  --text-2xl:24px;
  --text-3xl:30px;

  /* ---------- spacing scale — 4px base unit ---------- */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;

  /* ---------- container widths ---------- */
  --container:1120px;
  --container-wide:1560px;
  --reading-width:680px;

  /* ---------- shadow scale — --shadow/--shadow-pop are the two
     already-in-use tokens (hairline lift, popover/hero float); --shadow-md
     names the mid-step used for card-hover elevation, previously three
     slightly different hand-written values doing the same job. ---------- */
  --shadow-sm:var(--shadow);
  --shadow-md:0 6px 16px -8px rgba(13,24,38,.16);
  --shadow-lg:var(--shadow-pop);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* NOT html{scroll-behavior:smooth} — that sounds like the fix for "jumpy
   anchor links", but it hijacks ordinary mouse-wheel/trackpad scrolling
   too (most browsers animate every wheel tick individually instead of
   native momentum), which reads as clunky/laggy on regular scrolling —
   worse than the thing it was meant to fix. The video "▶ Watch" jump
   links get their smooth animation from JS (wireVideoJumpLinks() in
   kb.js) instead, which only touches those specific clicks and leaves
   normal scrolling completely alone. */
body{
  background:var(--bg);color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0;letter-spacing:-.02em;font-weight:680;color:var(--text)}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--blue-deep);text-decoration:underline}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
img{max-width:100%;display:block}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
:focus-visible{outline:2px solid var(--blue-bright);outline-offset:2px;border-radius:4px}

/* ---------- buttons — identical contract to the portal ---------- */
.btn{
  border:1px solid transparent;border-radius:var(--r-sm);padding:9px 16px;
  font-size:13.5px;font-weight:600;letter-spacing:-.005em;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  white-space:nowrap;transition:background .16s var(--ease),border-color .16s var(--ease),
  color .16s var(--ease),transform .1s var(--ease),box-shadow .16s var(--ease);
}
.btn:active{transform:translateY(.5px) scale(.99)}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 1px 2px rgba(8,71,166,.18)}
.btn-primary:hover{background:var(--blue-deep);color:#fff;text-decoration:none;box-shadow:0 4px 10px -2px rgba(8,71,166,.35)}
.btn-secondary{background:var(--surface);color:var(--text-2);border-color:var(--border-strong)}
.btn-secondary:hover{background:var(--blue-soft);border-color:var(--blue-bright);color:var(--blue);text-decoration:none}
.btn-quiet{background:transparent;color:var(--blue);border-color:transparent;padding:7px 9px}
.btn-quiet:hover{background:var(--blue-soft);text-decoration:none}
.btn-lg{padding:12px 20px;font-size:14.5px;border-radius:8px}
.btn-onblue{background:#fff;color:var(--blue)}
.btn-onblue:hover{background:var(--blue-tint);color:var(--blue-deep)}
.btn-onblue-line{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn-onblue-line:hover{background:rgba(255,255,255,.14);border-color:#fff;color:#fff}

/* ---------- surfaces ---------- */
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow)}
.pad{padding:20px}

/* ---------- form controls ---------- */
.input,.select{
  height:42px;border:1px solid var(--border-strong);border-radius:var(--r-sm);
  background:#fff;padding:0 12px;font-size:13.5px;outline:none;width:100%;
  transition:border-color .16s var(--ease),box-shadow .16s var(--ease);
}
.input::placeholder{color:var(--muted)}
.input:hover,.select:hover{border-color:#B6CCE6}
.input:focus,.select:focus{border-color:var(--blue-bright);box-shadow:0 0 0 3px rgba(37,99,235,.13)}

/* ---------- badge hierarchy — two deliberately different weights.
   .tag.blue is a filled pill: reserved for ONE prominent placement per
   page (the article-detail category badge) — a strong, singular marker.
   .tag-label is the plural sibling: a bare uppercase text label, no fill
   or border, for contexts where it repeats many times (an article row,
   a video card) — a filled pill on every row of a 50-item list would be
   a wall of badges competing with the titles for attention; plain text
   carries the same information at a fraction of the visual weight. ---------- */
.tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:550;color:var(--text-2)}
.tag .dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.tag.blue{color:var(--blue);background:var(--blue-soft);font-weight:650;font-size:11px;border-radius:999px;padding:3px 9px}
.tag.blue .dot{display:none}
.tag-label{
  display:inline-block;font-size:var(--text-2xs);font-weight:650;letter-spacing:.05em;
  text-transform:uppercase;color:var(--blue);
}

/* ---------- inline notice / callout — matches dialog system ---------- */
.notice{border-left:2px solid var(--border-strong);padding:4px 0 4px 14px;margin:16px 0;
  font-size:13px;color:var(--text-2);line-height:1.65}
.notice.warn{border-left-color:var(--amber)}
.notice.info{border-left-color:var(--blue-bright)}
.notice b{color:var(--text);font-weight:650}
/* discount/promo code chip — amber, not blue, so it reads as "special
   offer" rather than blending into the same blue used for every link and
   info notice on the page; dashed border is the familiar coupon-code cue */
.discount-code{
  display:inline-block;background:var(--amber-soft);color:var(--amber);
  border:1px dashed var(--amber);border-radius:6px;padding:1px 8px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;
  font-weight:700;letter-spacing:.02em;
}

/* ---------- accessibility utilities ----------
   .sr-only: visually hidden but still readable by screen readers — used to
   add context (e.g. "opens in a new tab") without changing what's shown.
   .skip-link: WCAG 2.4.1 "bypass blocks" — a keyboard-only user tabbing
   onto any page lands here first and can jump straight past the header/nav
   to <main> instead of tabbing through every nav link first. Hidden off
   the top of the viewport until it receives focus, at which point it
   becomes the first visible thing on screen. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{
  position:absolute;left:12px;top:-48px;z-index:100;background:var(--blue);color:#fff;
  padding:10px 16px;border-radius:var(--r-sm);font-size:13.5px;font-weight:650;
  transition:top .16s var(--ease);
}
.skip-link:focus{top:12px;color:#fff;text-decoration:none}

@media(prefers-reduced-motion:reduce){*{transition:none!important}}