/* ============================================================
   SMARTBIZOWNER — HELP CENTER LAYOUT
   Loads after design-system.css. Layout only — no new tokens.
   ============================================================ */

/* ---------- header ---------- */
.kb-header{
  background:var(--surface);border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:20;
}
/* three-column grid, not flex + space-between: with space-between, the
   middle child (nav) lands wherever the leftover space happens to put it,
   which drifts off-true-center any time the logo and the Client Portal
   button aren't the same width (they aren't). A grid with an `auto`
   middle column centers the nav against the header's own container,
   independent of how wide either side is — logo pinned left (1fr,
   justify-self:start), nav genuinely centered (auto column), actions
   pinned right (1fr, justify-self:end).
   Deliberately no max-width/margin:auto here (unlike .kb-content below
   it) — the header is navigation, not reading text, so it has no reason
   to stop at 1120px and float in the middle of a wide monitor with the
   logo and Client Portal stranded next to huge empty margins. It spans
   the real viewport edge to edge; only the page content underneath it
   keeps the 1120px reading-width cap. */
.kb-header-inner{
  padding:0 32px;height:64px;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;
}
@media(min-width:1600px){.kb-header-inner{padding:0 48px}}
.kb-brand{display:flex;align-items:center;gap:10px;color:var(--text);white-space:nowrap;justify-self:start}
.kb-brand:hover{text-decoration:none;color:var(--text)}
.kb-logo{height:24px;width:auto;display:block;flex:none}
.kb-brand-suffix{
  font-size:13px;font-weight:600;color:var(--text-2);letter-spacing:-.01em;line-height:1;
  padding-left:10px;border-left:1px solid var(--border);
}

/* header nav — kept intentionally short: a Home link + one "Topics" trigger
   that opens every category in a dropdown panel. Listing all 6 categories
   inline here is what caused the cramped/wrapping header; this keeps every
   category reachable from every page without it. */
.kb-nav{display:flex;align-items:center;gap:2px}
.kb-nav-link{
  color:var(--text-2);font-size:13.5px;font-weight:550;padding:9px 14px;border-radius:var(--r-sm);
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;border:0;background:transparent;
  cursor:pointer;transition:background .16s var(--ease),color .16s var(--ease);
}
.kb-nav-link:hover{background:var(--bg);color:var(--text);text-decoration:none}
/* current-page indicator — set via aria-current="page" by wireActiveNav()
   in kb.js (checks location.pathname against each link's href), not
   hand-authored per page, so it can never fall out of sync */
.kb-nav-link[aria-current="page"]{color:var(--blue);background:var(--blue-soft);font-weight:650}
.kb-nav-chevron{transition:transform .16s var(--ease);flex:none}
.kb-nav-trigger[aria-expanded="true"] .kb-nav-chevron{transform:rotate(180deg)}
.kb-nav-dropdown{position:relative}
.kb-topics-panel{
  position:absolute;top:calc(100% + 6px);left:0;width:300px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow-pop);
  padding:6px;display:none;z-index:30;
}
.kb-topics-panel.open{display:block}
.kb-topics-panel a{
  display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:var(--r-sm);color:var(--text);
}
.kb-topics-panel a:hover{background:var(--blue-soft);text-decoration:none}
.kb-topics-panel .ico{
  width:28px;height:28px;border-radius:7px;background:var(--blue-soft);color:var(--blue);
  display:grid;place-items:center;flex:none;
}
.kb-topics-panel .ico svg{width:14px;height:14px}
.kb-topics-panel .t{font-size:13px;font-weight:600;display:block}
.kb-nav-mobile-cta{display:none}

.kb-header-actions{display:flex;align-items:center;gap:10px;justify-self:end}
.kb-hamburger{display:none;width:38px;height:38px;border:0;background:transparent;border-radius:8px;
  flex-direction:column;justify-content:center;align-items:center;gap:4px}
.kb-hamburger span{display:block;width:17px;height:1.75px;border-radius:2px;background:var(--text)}
.kb-hamburger:hover{background:var(--bg)}

/* backdrop behind the mobile drawer — without it, page content underneath
   is still visible/tappable next to the open menu */
.kb-scrim{display:none;position:fixed;inset:0;background:rgba(13,24,38,.42);z-index:19}
.kb-scrim.open{display:block}

/* ---------- hero: search is the primary action on the page, so it gets
   the strongest visual treatment on the site — a layered SBO-blue
   gradient (not the flat fill used everywhere else): a soft halo behind
   the search bar itself, two corner highlights for depth, and a faint
   grid-line texture (same repeating-linear-gradient technique as the
   Client Portal's balance card, kept much fainter here) over a
   three-stop diagonal base. Still an accent for the hero specifically,
   not a look adopted anywhere else (see the "gradient usage" rule —
   hero, support CTA, done). Spacing/type here is deliberately more
   generous than the rest of the site — this is the one section meant
   to feel spacious and premium; everything below it stays compact. */
.kb-hero{
  background:
    radial-gradient(620px 300px at 50% 104%, rgba(255,255,255,.16), transparent 70%),
    radial-gradient(ellipse 780px 420px at 14% -18%, rgba(255,255,255,.15), transparent 60%),
    radial-gradient(ellipse 620px 480px at 96% 116%, rgba(59,130,246,.5), transparent 62%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 34px),
    linear-gradient(120deg, var(--blue-deep) 0%, var(--blue) 46%, var(--blue-bright) 100%);
  box-shadow:0 12px 30px -18px rgba(6,59,138,.55);
  color:#fff;
}
.kb-hero-inner{max-width:720px;margin:0 auto;padding:76px 24px 72px;text-align:center}
/* a small pill chip rather than plain uppercase text — reads as a label,
   not a headline competing with h1, and gives the top of the hero one
   quiet "premium" detail instead of an illustration or icon */
.kb-hero-eyebrow{
  display:inline-flex;align-items:center;
  font-size:11.5px;font-weight:650;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.88);background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);border-radius:999px;
  padding:6px 14px;margin-bottom:22px;
}
.kb-hero h1{color:#fff;font-size:36px;font-weight:700;letter-spacing:-.035em;line-height:1.15;margin-bottom:14px}
.kb-hero-sub{font-size:15.5px;color:rgba(255,255,255,.85);line-height:1.65;margin:0 auto 40px;max-width:480px}
.kb-search-wrap{position:relative;max-width:600px;margin:0 auto}
.kb-search{
  width:100%;height:58px;border-radius:16px;border:1px solid transparent;background:#fff;
  padding:0 84px 0 52px;font-size:15.5px;color:var(--text);outline:none;
  box-shadow:0 24px 48px -18px rgba(4,26,64,.45), 0 1px 0 0 rgba(255,255,255,.5) inset;
  transition:box-shadow .16s var(--ease);
}
.kb-search:focus{box-shadow:0 0 0 4px rgba(255,255,255,.3), 0 24px 48px -16px rgba(4,26,64,.5)}
/* the ⌘K / Ctrl K hint — set by wireSearchShortcut() in kb.js, which also
   makes the shortcut actually work; text starts blank so nothing renders
   before JS picks the right label for the visitor's platform */
.kb-search-kbd{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  border:1px solid var(--border);border-radius:6px;background:var(--surface-2);
  color:var(--muted);font-size:11px;font-weight:650;padding:3px 7px;line-height:1;
  pointer-events:none;font-family:inherit;
}
/* top:50%/translateY(-50%) centers the element's own box, but the 🔍 emoji's
   font metrics give that box a lot of dead space below the glyph's ink (the
   "handle" plus font-specific descender padding), so centering the box
   still leaves the visible glyph sitting low. line-height:1 plus a fixed
   flex box centers the actual glyph instead of the font's line box. */
.kb-search-ico{
  position:absolute;left:20px;top:50%;transform:translateY(-50%);
  width:17px;height:17px;display:flex;align-items:center;justify-content:center;line-height:1;
  color:var(--muted);font-size:17px;pointer-events:none;
}
.kb-search-results{
  position:absolute;left:0;right:0;top:calc(100% + 8px);background:#fff;border:1px solid var(--border);
  border-radius:14px;box-shadow:var(--shadow-pop);text-align:left;overflow:hidden;z-index:30;display:none;
}
.kb-search-results.open{display:block}
.kb-search-results a{
  display:flex;align-items:center;gap:11px;padding:12px 16px;
  border-bottom:1px solid var(--hairline);color:var(--text);
}
/* same small icon-badge language as the sidebar panel headings, at a
   smaller scale — ties the search popover to the rest of the "premium"
   pass instead of it being the one plain-text list left on the page */
.kb-search-results a::before{
  content:"";display:block;width:22px;height:22px;border-radius:50%;flex:none;
  background-color:var(--blue-soft);background-repeat:no-repeat;background-position:center;background-size:11px 11px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230847A6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E");
}
.kb-search-results a:last-child{border-bottom:0}
.kb-search-results a:hover{background:var(--blue-tint);text-decoration:none}
.kb-search-results .t{display:block;font-size:13.5px;font-weight:650;color:var(--text);line-height:1.4;min-width:0}
.kb-search-empty{padding:16px;font-size:12.5px;color:var(--muted);text-align:center}

/* ---------- page shell ---------- */
.kb-content{max-width:var(--container);margin:0 auto;padding:40px 24px 80px}
.kb-section-title{font-size:12px;font-weight:650;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin:0 0 16px}

/* ---------- home layout: topics + sidebar ---------- */
/* The two columns are structurally different: "Help Topics" is a label
   that sits ABOVE its grid of cards, while "Popular Articles" is a label
   that sits INSIDE its own card. So the thing that actually needs to line
   up is the CARDS — the first topic card and the Popular Articles panel —
   not the two labels. .kb-align-spacer (an invisible duplicate of the
   "Help Topics" label, see index.html) reserves exactly that much height
   at the top of the sidebar so its panel starts where the topic cards
   start, instead of where the label starts. */
.kb-home-grid{--kb-side-pad:16px;display:grid;grid-template-columns:1fr 300px;gap:32px;align-items:start}
.kb-align-spacer{visibility:hidden}
/* small icon-over-label tiles (edX/LinkedIn's topic-grid style), not the
   old icon+description+count row — description/count are still on the
   category data (used elsewhere), just not shown here: a tile is meant to
   be a quick scannable index, not a second place to read the description. */
.kb-topics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.kb-topic{
  padding:22px 12px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;
  transition:border-color .16s var(--ease),box-shadow .16s var(--ease),transform .12s var(--ease);
}
.kb-topic:hover{
  border-color:var(--border-strong);box-shadow:var(--shadow-md);
  transform:translateY(-1px);text-decoration:none;
}
.kb-topic:active{transform:translateY(0) scale(.995)}
.kb-topic .ico{
  width:42px;height:42px;border-radius:11px;background:var(--blue-soft);color:var(--blue);
  display:grid;place-items:center;flex:none;
  transition:background .16s var(--ease),color .16s var(--ease);
}
.kb-topic .ico svg{width:20px;height:20px}
/* the icon inverting to a solid fill on hover is the one deliberate flourish
   here — everything else on the card (border, shadow) is a restrained,
   single-step change, matching the "subtle, fast" interaction brief */
.kb-topic:hover .ico{background:var(--blue);color:#fff}
.kb-topic .t{font-size:13px;font-weight:650;color:var(--text);letter-spacing:-.01em;line-height:1.35}

/* ---------- sidebar cards: flat, not floating — border kept for a quiet
   edge (like the reference help centers' sidebar panels), but no drop
   shadow, so it reads as a grouped section rather than a card "hovering"
   over the page. Each heading gets a small icon badge (pure CSS, so no
   per-article-page HTML changes needed across 51 article files) instead of
   plain uppercase text alone. ---------- */
.kb-side-card{padding:calc(var(--kb-side-pad,16px) + 2px);box-shadow:none}
.kb-side-card + .kb-side-card{margin-top:16px}
/* margin-top:0 is explicit and load-bearing — without it the browser's
   default h2 top margin (~0.83em) adds silent extra inset above "Popular
   Articles" that the aligned Help Topics heading has no equivalent of. */
.kb-side-card h2{
  display:flex;align-items:center;gap:9px;
  font-size:12px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 14px;
}
.kb-side-card h2::before{
  content:"";display:block;width:26px;height:26px;border-radius:50%;flex:none;
  background-color:var(--blue-soft);background-repeat:no-repeat;background-position:center;background-size:14px 14px;
}
/* document icon for the article-list panels ("Popular Articles" / "More in
   this category") — same path as the topic grid's ICONS.doc in kb.js, kept
   in sync by hand since one is CSS and the other JS-rendered */
.kb-side-card:not(.kb-support-card) h2::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230847A6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E");
}
/* life-buoy icon for the support CTA ("Still stuck?" / "Need Support?") */
.kb-support-card h2::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230847A6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cline x1='4.93' y1='4.93' x2='9.17' y2='9.17'/%3E%3Cline x1='14.83' y1='14.83' x2='19.07' y2='19.07'/%3E%3Cline x1='14.83' y1='9.17' x2='19.07' y2='4.93'/%3E%3Cline x1='4.93' y1='19.07' x2='9.17' y2='14.83'/%3E%3C/svg%3E");
}
.kb-popular-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.kb-popular-list li{border-bottom:1px solid var(--hairline)}
.kb-popular-list li:last-child{border-bottom:0}
.kb-popular-list a{
  display:block;padding:10px 2px 10px 10px;margin:0 -10px;border-radius:var(--r-sm);
  font-size:13px;color:var(--text-2);line-height:1.4;border-left:2px solid transparent;
  transition:color .14s var(--ease),background .14s var(--ease),border-color .14s var(--ease),padding-left .14s var(--ease);
}
/* a left accent bar + a small rightward nudge reads as "shortcut", not just
   a plain link — same idea as the topic-card icon invert, one small
   deliberate cue rather than several competing hover effects */
.kb-popular-list a:hover{
  color:var(--blue);background:var(--blue-tint);border-left-color:var(--blue);
  padding-left:14px;text-decoration:none;
}
/* one of the two sanctioned gradient spots (the other is the hero) — kept
   to a whisper-soft blue-to-white wash on the card background only, never
   on the button itself, so it reads as "safety net", not a sales CTA */
.kb-support-card{background:linear-gradient(160deg, var(--blue-soft) 0%, var(--surface) 65%)}
.kb-support-card p{font-size:12.5px;color:var(--text-2);margin:0 0 14px;line-height:1.6}
.kb-support-card .btn{width:100%}

/* ---------- category page ---------- */
.kb-breadcrumb{font-size:12.5px;color:var(--muted);margin-bottom:14px;overflow-wrap:anywhere}
.kb-breadcrumb a{color:var(--muted)}
.kb-breadcrumb a:hover{color:var(--blue)}
.kb-page-head{margin-bottom:24px}
.kb-page-head h1{font-size:24px}
.kb-page-head .d{font-size:13.5px;color:var(--muted);margin-top:6px}

/* in-page category search — filters this topic's own article list instantly.
   Same icon-left input language as the hero search, adapted for a plain
   (non-blue) page background: border instead of a shadow-only float.
   The icon lives in .kb-category-search-field (input only), NOT
   .kb-category-search-wrap (input + result count below it) — the count
   text is empty and takes no space until a search is typed, so if the
   icon centered against the whole wrap, typing would grow the wrap and
   the icon's top:50% would recalculate against a taller box, visibly
   dropping the icon every time a result count appeared. */
.kb-category-search-wrap{margin-bottom:22px}
.kb-category-search-field{position:relative}
.kb-category-search{
  width:100%;height:44px;border-radius:var(--r-sm);border:1px solid var(--border-strong);
  background:#fff;padding:0 66px 0 42px;font-size:13.5px;color:var(--text);outline:none;
  transition:border-color .16s var(--ease),box-shadow .16s var(--ease);
}
.kb-category-search::placeholder{color:var(--muted)}
.kb-category-search:hover{border-color:#B6CCE6}
.kb-category-search:focus{border-color:var(--blue-bright);box-shadow:0 0 0 3px rgba(37,99,235,.13)}
/* see .kb-search-ico above for why this needs a fixed flex box rather than
   just centering on the emoji's own (glyph-dependent) line box */
.kb-category-search-ico{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:15px;height:15px;display:flex;align-items:center;justify-content:center;line-height:1;
  color:var(--muted);font-size:15px;pointer-events:none;
}
.kb-category-search-count{display:block;margin-top:8px;font-size:12px;color:var(--muted)}

/* article pages (and the videos page) have no list of their own to filter,
   so they get the same site-wide ranked dropdown search as the hero — just
   reusing .kb-category-search's plain-background styling instead of the
   hero's white-on-blue treatment. Without this, the only way off an
   article was back to the homepage (wireSearchShortcut()'s ⌘K comment
   used to call that out as a known gap — this closes it). */
.kb-article-search-wrap{margin-bottom:26px}

/* A LIST, NOT A STACK OF CARDS: rows used to each be their own bordered,
   shadowed .panel — fifty of those in a row read as a pile of tiles, not
   a document index. Structure now comes from a hairline divider between
   rows plus generous padding, the way Stripe/Linear/Attio's own doc
   indexes read — the row itself has no border or shadow of its own; only
   the divider and the hover tint communicate "this is a row". */
.kb-article-list{display:flex;flex-direction:column}
.kb-article-row{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 10px;margin:0 -10px;border-bottom:1px solid var(--hairline);
  border-radius:var(--r-sm);
  transition:background .14s var(--ease);
}
.kb-article-list .kb-article-row:last-child{border-bottom:0}
.kb-article-row:hover{background:var(--blue-tint);text-decoration:none}
.kb-article-row-body{display:flex;flex-direction:column;min-width:0;gap:3px}
.kb-article-row .t{display:block;font-size:14px;font-weight:650;color:var(--text);letter-spacing:-.005em}
.kb-article-row .s{display:block;font-size:12.5px;color:var(--muted);line-height:1.45;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kb-article-row .tag-label{margin-top:1px}
.kb-article-row .arrow{
  color:var(--muted);flex:none;font-size:15px;transition:transform .14s var(--ease),color .14s var(--ease);
}
/* the arrow nudging right (rather than the whole row moving) is the
   affordance that says "this row goes somewhere" without adding a second,
   competing hover treatment on top of the background tint */
.kb-article-row:hover .arrow{transform:translateX(3px);color:var(--blue)}
/* ---------- empty state: a page shell with nothing in it (an empty
   category, a search with no matches) still needs to look intentional,
   not like a rendering failure. A neutral icon + a two-line message
   (what happened, what to do next) rather than one bare line of text. ---------- */
.kb-empty{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:56px 20px;text-align:center;color:var(--muted);
  font-size:13.5px;line-height:1.6;
}
.kb-empty::before{
  content:"";width:36px;height:36px;border-radius:50%;background:var(--surface-2);
  border:1px solid var(--border);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;
}

/* ---------- home page: "All Articles" teaser, linking out to the dedicated
   all-articles.html page instead of listing every article inline — the
   inline list scaled fine at launch but grows without bound as articles
   are added, so the home page needs a fixed-size summary here.
   Deliberately NOT a bordered/shadowed .panel — a floating card here read
   as a disconnected, bolted-on element; a hairline top rule plus generous
   padding makes it read as the page's own closing section instead. ---------- */
.kb-all-section{margin-top:8px;padding-top:32px;border-top:1px solid var(--border)}
.kb-all-teaser{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.kb-all-teaser-text h2{margin:0}
.kb-all-teaser-text p{margin:6px 0 0;font-size:13px;color:var(--text-2)}
.kb-all-teaser .btn{flex:none}

/* ---------- grouped article list, shared by the dedicated All Articles
   page (default view) and its search results. Group titles reuse the same
   small-caps treatment as .kb-section-title ("HELP TOPICS", "ALL ARTICLES")
   rather than looking like article titles themselves — that's what makes
   each group read as a section break instead of just a bigger row. ---------- */
.kb-all-group{padding-top:28px;margin-top:28px;border-top:1px solid var(--hairline)}
.kb-all-group:first-child{padding-top:0;margin-top:0;border-top:0}
.kb-all-group-title{
  font-size:11.5px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin-bottom:12px;
}
.kb-all-group-title a{color:var(--muted)}
.kb-all-group-title a:hover{color:var(--blue)}

/* ---------- article page ---------- */
.kb-article-grid{display:grid;grid-template-columns:1fr 260px;gap:40px;align-items:start;min-width:0}
/* optimal reading width: the grid column itself flexes to fill whatever
   space is left of the 260px sidebar, but text set that wide is hard to
   scan — this caps the head + body + tags to a comfortable measure while
   leaving the sidebar exactly where the grid already puts it */
/* min-width:0 overrides the grid item's default min-width:auto, which
   otherwise sizes this column to fit its widest descendant's intrinsic
   content width — a <table> with nowrap cells, for one, is wide enough to
   push the column past max-width (and past the viewport on mobile)
   regardless of the table's own overflow-x:auto, since that only clips
   overflow AFTER the track size is decided, not during. */
.kb-article-grid > article{max-width:var(--reading-width);min-width:0}
.kb-article-head{border-bottom:1px solid var(--border);padding-bottom:20px;margin-bottom:28px}
.kb-article-head h1{font-size:25px;margin:12px 0 10px;letter-spacing:-.02em;line-height:1.25;overflow-wrap:break-word}
.kb-article-meta{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted)}
.kb-prose{font-size:14.5px;color:var(--text-2);line-height:1.75;min-width:0}
.kb-prose h2{font-size:19px;color:var(--text);margin:36px 0 14px;letter-spacing:-.015em;line-height:1.3}
.kb-prose h2:first-child{margin-top:0}
.kb-prose h3{font-size:15.5px;color:var(--text);margin:26px 0 10px;letter-spacing:-.01em}
.kb-prose p{margin:0 0 16px;overflow-wrap:break-word}
.kb-prose ul,.kb-prose ol{margin:0 0 18px;padding-left:22px}
.kb-prose li{margin-bottom:8px;padding-left:2px}
.kb-prose strong{color:var(--text);font-weight:650}
.kb-prose a{font-weight:550;overflow-wrap:break-word}
.kb-prose code{background:var(--surface-2);border:1px solid var(--hairline);border-radius:4px;
  padding:1px 6px;font-size:.92em;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.kb-prose pre{background:var(--surface-2);border:1px solid var(--hairline);border-radius:var(--r-sm);
  padding:12px 14px;margin:0 0 16px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.kb-prose img{max-width:100%;height:auto;border:1px solid var(--border);border-radius:var(--r-sm);margin:16px 0}
/* tables can't shrink below their content — contain the scroll to the table
   itself so the page never scrolls horizontally, per design system rule */
.kb-prose table{
  display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;
  border-collapse:collapse;margin:16px 0;font-size:13px;
}
.kb-prose th,.kb-prose td{border:1px solid var(--border);padding:8px 10px;text-align:left;white-space:nowrap}
.kb-prose th{background:var(--surface-2);font-weight:650;color:var(--text)}
.kb-prose .btn{margin:4px 0}
/* article CTA buttons (guide/download/form links) use brand blue for the
   label instead of the neutral --text-2 the same class gets elsewhere
   (e.g. the header's Client Portal button) — scoped to .kb-prose so that
   button is left alone. --blue, not --blue-bright: stays subtle/on-brand
   rather than reading as an attention-grabbing accent. */
.kb-prose .btn-secondary{color:var(--blue)}

/* ---------- inline video embeds inside article prose: replaces the old
   "Watch the X Guide →" external-link buttons so readers can watch without
   leaving the page and losing their place. A single-video article embeds
   inline right where the old button sat; an article with several videos
   across several steps groups them all into one "Video Guides" section at
   the end instead (.kb-video-guides) so the step-by-step reading flow
   isn't broken up by a wall of players between every step. ---------- */
.kb-video-embed{
  position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;
  background:#0B1220;margin:18px 0;box-shadow:var(--shadow-sm);
}
.kb-video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.kb-video-guides{margin-top:8px;padding-top:32px;border-top:1px solid var(--hairline)}
.kb-video-guide + .kb-video-guide{margin-top:28px}
/* lands the jumped-to video below the sticky header instead of half-hidden
   under it — the header is 64px (56px on mobile), 80px clears both */
.kb-video-guide{scroll-margin-top:80px}
.kb-video-guide-label{font-size:13.5px;font-weight:650;color:var(--text);margin:0 0 10px}
/* the in-step pointer to a video that actually lives in the Video Guides
   section at the bottom (multi-video articles only) — a quiet inline link,
   not a button, so it doesn't compete with the step's own "do this" CTAs */
.kb-video-jump{margin:0 0 16px}
.kb-video-jump a{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600}

.kb-tag-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:24px}
.kb-related-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.kb-related-list a{
  display:block;padding:8px 2px 8px 10px;margin:0 -10px;border-radius:var(--r-sm);
  font-size:13px;color:var(--text-2);line-height:1.4;border-left:2px solid transparent;
  transition:color .14s var(--ease),background .14s var(--ease),border-color .14s var(--ease),padding-left .14s var(--ease);
}
.kb-related-list a:hover{
  color:var(--blue);background:var(--blue-tint);border-left-color:var(--blue);
  padding-left:14px;text-decoration:none;
}

/* ---------- article pagination: previous/next within the same category,
   injected by renderArticlePagination() in kb.js right after .kb-tag-row
   (an anchor every article page already has — no per-article HTML edits
   needed for this to appear everywhere). ---------- */
.kb-article-pagination{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:32px;max-width:var(--reading-width);
}
.kb-pagination-link{
  display:flex;flex-direction:column;gap:4px;padding:14px 16px;min-width:0;
  transition:border-color .14s var(--ease),background .14s var(--ease);
}
.kb-pagination-link:hover{border-color:var(--border-strong);background:var(--blue-tint);text-decoration:none}
.kb-pagination-link.next{text-align:right;grid-column:2}
.kb-pagination-link .dir{
  display:flex;align-items:center;gap:5px;font-size:11px;font-weight:650;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);
}
.kb-pagination-link.next .dir{justify-content:flex-end}
.kb-pagination-link .ptitle{font-size:13.5px;font-weight:600;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- videos page: YouTube-style grid of embedded tutorials ----------
   This page gets a wider canvas than the rest of the site (kb-content-video,
   below, overrides the standard 1120px kb-content max-width): article pages
   cap width for readable text line-length, but that same cap just makes
   video thumbnails small for no reason — video content wants a bigger
   canvas, the way YouTube's own grid uses most of the viewport. */
.kb-content-video{max-width:var(--container-wide)}
.kb-video-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.kb-video-chip{
  border:1px solid var(--border-strong);border-radius:999px;background:var(--surface);
  color:var(--text-2);font-size:12.5px;font-weight:600;padding:7px 14px;cursor:pointer;
  transition:background .16s var(--ease),border-color .16s var(--ease),color .16s var(--ease);
}
.kb-video-chip:hover{border-color:var(--blue-bright);color:var(--blue)}
.kb-video-chip.active{background:var(--blue);border-color:var(--blue);color:#fff}
/* explicit column counts (desktop 3 / tablet 2 / mobile 1) rather than an
   auto-fill/minmax that fits "however many happen to fit" — a deterministic
   3-column desktop grid is the specific brief here, not just "big cards". */
.kb-video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
@media(max-width:1180px){.kb-video-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.kb-video-grid{grid-template-columns:1fr}}
.kb-video-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;min-width:0;
  transition:border-color .16s var(--ease),box-shadow .16s var(--ease),transform .12s var(--ease);
}
.kb-video-card:hover{
  border-color:var(--border-strong);box-shadow:0 10px 24px -12px rgba(13,24,38,.2);transform:translateY(-2px);
}
/* the classic responsive-embed trick: a padding-top set to the aspect
   ratio (9/16 = 56.25%) reserves the right amount of vertical space so
   the grid never jumps as thumbnails come in or the iframe swaps in */
.kb-video-embed{position:relative;padding-top:56.25%;background:#0D1826;overflow:hidden}
.kb-video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* thumbnail is the dominant element per spec: a real frame from the video
   (fetched once from Vimeo's oEmbed API at content time, not at runtime —
   see data/videos.js), not a placeholder or a live embed nobody asked to
   autoplay. Clicking it swaps in the real iframe (see kb.js) — this is
   also why 18 videos on one page doesn't mean 18 concurrent embeds. */
/* loading state: this dark fill IS it — it's the video's own near-black
   letterboxing color, so the moment before the thumbnail image finishes
   loading looks like "a video frame", not an empty gray box. No skeleton
   shimmer needed: every other piece of content on this site renders
   synchronously (data loads via blocking <script> tags before paint), so
   thumbnails are the only thing on the whole site with a load moment at all. */
.kb-video-thumb{
  position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;cursor:pointer;
  background:#0D1826;
}
/* .kb-video-embed and .kb-video-card both clip overflow for their rounded
   corners, which would clip a normal outline (drawn outside the box)
   down to invisible for keyboard users — an inset box-shadow ring stays
   inside the clip and is still clearly visible. */
.kb-video-thumb:focus-visible{outline:none;box-shadow:inset 0 0 0 3px var(--blue-bright)}
.kb-video-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s var(--ease)}
.kb-video-card:hover .kb-video-thumb img{transform:scale(1.035)}
/* a soft top-to-bottom scrim keeps the white play button and duration
   badge legible over any thumbnail, bright or dark, without a full
   darkening overlay that would fight the thumbnail for attention */
.kb-video-thumb::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(13,24,38,0) 55%,rgba(13,24,38,.55) 100%);
}
.kb-video-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:56px;height:56px;border-radius:50%;background:rgba(13,24,38,.55);
  display:flex;align-items:center;justify-content:center;color:#fff;
  transition:background .16s var(--ease),transform .16s var(--ease);backdrop-filter:blur(1px);
}
.kb-video-play svg{width:20px;height:20px;margin-left:2px}
.kb-video-card:hover .kb-video-play{background:var(--blue);transform:translate(-50%,-50%) scale(1.08)}
.kb-video-duration{
  position:absolute;right:8px;bottom:8px;background:rgba(13,24,38,.82);color:#fff;
  font-size:11px;font-weight:650;letter-spacing:.01em;padding:2px 6px;border-radius:4px;
  font-variant-numeric:tabular-nums;
}
.kb-video-body{padding:16px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.kb-video-body h3{font-size:15.5px;font-weight:650;letter-spacing:-.01em;line-height:1.35;color:var(--text)}
.kb-video-article-link{display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--muted);margin-top:auto;padding-top:2px}
.kb-video-article-link:hover{color:var(--blue);text-decoration:none}
.kb-video-empty{grid-column:1/-1}

/* ---------- footer ---------- */
.kb-footer{border-top:1px solid var(--border);margin-top:20px}
.kb-footer-inner{max-width:var(--container);margin:0 auto;padding:24px;display:flex;align-items:center;
  justify-content:space-between;gap:16px;font-size:12px;color:var(--muted);flex-wrap:wrap}
.kb-footer a{color:var(--muted)}
.kb-footer a:hover{color:var(--blue)}

/* ============================================================
   RESPONSIVE BREAKPOINTS
   860px  — the one true breakpoint: header/nav switch to the mobile
            drawer, every multi-column grid (topics, article layout,
            home sidebar) collapses to a single column.
   1180px — video grid only: 3 columns -> 2. Doesn't affect nav/layout
            elsewhere; the video grid is wide enough (1560px canvas) to
            need its own step down before the main 860px breakpoint.
   640px  — video grid only: 2 columns -> 1.
   420px  — small-phone pass: a few components (hero, search, article
            title) get one more type-size/spacing reduction; nothing
            restructures again after 860px, only shrinks further.
   Header, nav, search, cards, articles and buttons all collapse
   to a single, non-scrolling column below 860px, with a second
   pass at 420px for small phones.
   ============================================================ */
@media(max-width:860px){
  html,body{overflow-x:hidden}
  /* the 3-column grid (see base rule above) exists to center the nav
     between the logo and Client Portal — but on mobile the nav is
     hidden (replaced by the hamburger drawer), so that middle column is
     empty. An empty grid column still squeezes the two 1fr side columns
     to make room for it, which was cramming the logo's column narrower
     than "Smart BizOwner | Help Center" actually needs — the text
     overflowed its column and visually landed next to the hamburger.
     Plain flex has no such column to reserve: just two real children
     (logo, hamburger) pushed to opposite ends. */
  .kb-header-inner{display:flex;justify-content:space-between;padding:0 16px;height:56px;gap:10px}
  .kb-logo{height:20px}
  .kb-brand-suffix{font-size:12px;padding-left:8px}

  /* the "Client Portal" button moves into the drawer on mobile so the
     header row only ever holds the logo + hamburger */
  .kb-header-actions .btn{display:none}
  .kb-hamburger{display:flex}

  .kb-nav{display:none}
  .kb-nav.open{
    display:flex;flex-direction:column;align-items:stretch;position:absolute;top:56px;left:0;right:0;
    background:var(--surface);border-bottom:1px solid var(--border);box-shadow:var(--shadow-pop);
    padding:10px;gap:2px;max-height:calc(100dvh - 56px);overflow-y:auto;z-index:21;
  }
  .kb-nav.open .kb-nav-link{width:100%;justify-content:flex-start;padding:13px 12px;font-size:14.5px;min-height:44px}
  .kb-nav-dropdown{width:100%}
  /* categories are always expanded inside the drawer — no nested dropdown
     chrome needed once everything already stacks vertically */
  .kb-nav-chevron{display:none}
  .kb-topics-panel{
    position:static;display:block!important;width:100%;border:0;box-shadow:none;padding:2px 0 2px 10px;
  }
  .kb-topics-panel a{padding:12px 10px;min-height:44px}
  .kb-nav-mobile-cta{display:flex;width:100%;justify-content:center;min-height:46px;margin-top:10px}

  .kb-hero-inner{padding:48px 20px 44px}
  .kb-hero-eyebrow{font-size:11px;padding:5px 12px;margin-bottom:16px}
  .kb-hero h1{font-size:26px;margin-bottom:12px}
  .kb-hero-sub{font-size:13.5px;margin-bottom:28px}
  .kb-search-wrap{max-width:100%}
  .kb-search{height:52px;border-radius:14px;font-size:14px;padding:0 16px 0 44px}
  .kb-search-ico{left:16px}
  /* ⌘K/Ctrl K is meaningless on a touch device — hide the hint and give
     the input its normal full padding back rather than leaving dead space */
  .kb-search-kbd{display:none}
  .kb-category-search{padding-right:14px}

  .kb-content{padding:24px 16px 56px}
  .kb-home-grid{grid-template-columns:1fr;gap:24px}
  .kb-align-spacer{display:none}
  .kb-topics{grid-template-columns:repeat(3,1fr);gap:8px}
  .kb-topic{padding:16px 8px;gap:10px}
  .kb-side-card{padding:16px 8px}

  .kb-article-grid{grid-template-columns:1fr;gap:28px}
  .kb-article-head h1{font-size:21px}
  .kb-page-head h1{font-size:20px}

  .kb-category-search{height:46px;font-size:14px}
  .kb-category-search-wrap{margin-bottom:18px}

  .kb-article-row{padding:13px 14px}
  .kb-article-row .arrow{display:none}
  .kb-article-row .s{white-space:normal}

  .kb-all-teaser{flex-direction:column;align-items:stretch;padding:18px}
  .kb-all-teaser .btn{width:100%;justify-content:center;min-height:46px}

  /* stacked single column — without grid-column:1 here, .next would still
     try to place itself in grid column 2 of what's now a 1-column grid,
     opening an implicit second column instead of actually stacking */
  .kb-article-pagination{grid-template-columns:1fr;gap:10px}
  .kb-pagination-link.next{grid-column:1}

  .kb-video-play{width:48px;height:48px}
  .kb-video-play svg{width:18px;height:18px}

  /* buttons and inputs get real touch targets (44px — WCAG 2.5.5 / the same
     minimum already used for the mobile nav drawer and topics-panel links
     below; this general .btn rule was the one place still under it at
     40px), and any CTA pasted into an article body goes full-width so it's
     easy to tap */
  .btn{min-height:44px}
  .kb-prose .btn{width:100%;justify-content:center;min-height:46px}
  .input,.select{min-height:46px}

  .kb-footer-inner{flex-direction:column;align-items:flex-start;text-align:left;gap:10px}
}

@media(max-width:420px){
  .kb-brand-suffix{display:none}
  .kb-search{font-size:13.5px;padding-left:40px}
  .kb-search-ico{left:14px}
  .kb-hero h1{font-size:22px}
  .kb-article-head h1{font-size:19px}
  .kb-category-search{font-size:13.5px;padding-left:38px}
  .kb-category-search-ico{left:12px}
  /* 3 tiles per row gets too cramped below ~420px — 2 keeps the icon +
     label comfortable instead of shrinking further */
  .kb-topics{grid-template-columns:repeat(2,1fr)}
}

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