/* DMARCmetric — Knowledge Base styles (loads after styles.css). */
.kb-body{background:#05070d;color:var(--ink);min-height:100vh;display:flex;flex-direction:column}
.kb-nav{display:flex;align-items:center;gap:1.2rem;max-width:min(1200px,94vw);margin-inline:auto;padding:1rem clamp(1rem,3vw,2rem);width:100%}
.kb-nav .nav-links{display:flex;gap:1.1rem;margin-left:.5rem}
.kb-nav .nav-links a{color:var(--dim);text-decoration:none;font-size:.92rem}
.kb-nav .nav-links a.active,.kb-nav .nav-links a:hover{color:var(--ink)}
.kb-nav .nav-cta{margin-left:auto;display:flex;gap:.6rem;align-items:center}
.kb-main{width:100%;max-width:min(880px,94vw);margin:0 auto;padding:1.5rem clamp(1rem,3vw,2rem) 3rem;flex:1}
.kb-crumb{font-size:.85rem;color:var(--dim);margin:.4rem 0 1rem}
.kb-crumb a{color:var(--dim)}
.kb-blurb{margin:.2rem 0 1.4rem}
.kb-search{position:relative;margin:0 0 1.6rem}
.kb-search input{width:100%;padding:.85rem 1rem;border-radius:12px;border:1px solid var(--glass-border);background:var(--glass-2);color:var(--ink);font:inherit}
.kb-search ul{position:absolute;inset-inline:0;top:100%;margin:.35rem 0 0;padding:.3rem;list-style:none;border:1px solid var(--glass-border);border-radius:12px;background:#0a0e18;z-index:20;max-height:320px;overflow:auto}
.kb-search li a{display:block;padding:.55rem .7rem;border-radius:8px;color:var(--ink);text-decoration:none}
.kb-search li a:hover{background:var(--glass-2)}
.kb-search li a small{display:block;color:var(--dim)}
.kb-cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.9rem;margin-bottom:2rem}
.kb-cat{display:flex;flex-direction:column;gap:.3rem;padding:1rem;border-radius:14px;border:1px solid var(--glass-border);color:var(--ink);text-decoration:none}
.kb-cat:hover{border-color:rgba(47,230,196,.35)}
.kb-cat small{color:var(--dim)}
.kb-cat-ic{display:block;color:var(--accent);margin-bottom:.15rem}
.kb-cat-ic svg{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px var(--glow))}
/* /kb/ hub sections. Everything below this comment is landing-scoped: styles.css carries a
   global `*{margin:0;padding:0}` reset plus a marketing-page `section{padding:clamp(4rem,9vw,8rem)…}`
   rule, there is no unscoped a{} colour, and every typographic rule further down this file is
   .kb-article-scoped — so the hub's prose needs its own rules or it renders unstyled and,
   because of that section padding, several screens apart. */
.kb-intro,.kb-index,.kb-featured{padding:0;max-width:none}
.kb-intro{margin:0 0 2rem}
.kb-intro h2,.kb-featured h2{font-size:1.35rem;margin:0 0 .8rem}
.kb-intro p{line-height:1.65;margin:0 0 .8rem}
.kb-intro p:last-child{margin-bottom:0}
.kb-intro a{color:var(--accent)}
.kb-index h2{font-size:1.35rem;margin:2rem 0 .6rem}
.kb-index h3{font-size:1.05rem;margin:1.4rem 0 .5rem}
.kb-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem}
.kb-list a{display:block;padding:.75rem .9rem;border:1px solid var(--glass-border);border-radius:12px;color:var(--ink);text-decoration:none}
.kb-list a:hover{border-color:rgba(47,230,196,.35)}
.kb-list small{display:block;color:var(--dim);margin-top:.15rem}
.kb-article h1{font-size:clamp(1.6rem,3.4vw,2.2rem);margin:.2rem 0 .3rem}
.kb-meta{font-size:.8rem;margin:0 0 1.2rem}
.kb-article h2{margin:1.6rem 0 .5rem;font-size:1.25rem}
.kb-article h3{margin:1.2rem 0 .4rem;font-size:1.05rem}
.kb-article p,.kb-article li{line-height:1.65;color:var(--ink)}
.kb-article a{color:var(--accent)}
.kb-article code{font-family:'JetBrains Mono',monospace;font-size:.86em;background:var(--glass-2);border:1px solid var(--glass-border);border-radius:6px;padding:.08em .35em}
.kb-article pre{background:#0a0e18;border:1px solid var(--glass-border);border-radius:12px;padding:.9rem 1rem;overflow:auto}
.kb-article pre code{background:none;border:none;padding:0;font-size:.84rem;line-height:1.5}
.kb-article table{width:100%;border-collapse:collapse;margin:.8rem 0;font-size:.92rem}
.kb-article th,.kb-article td{text-align:left;padding:.5rem .6rem;border-bottom:1px solid var(--glass-border)}
.kb-note{border:1px solid rgba(47,230,196,.3);border-left:3px solid var(--accent);border-radius:10px;padding:.65rem .9rem;margin:.9rem 0}
.kb-note p{margin:.2rem 0}
.kb-toc{border:1px solid var(--glass-border);border-radius:12px;padding:.75rem .95rem;margin:0 0 1.2rem}
.kb-toc ul{margin:.4rem 0 0;padding-left:1.1rem}
.kb-toc a{color:var(--dim);text-decoration:none}
.kb-toc a:hover{color:var(--ink)}
/* Same styles.css section{padding:clamp(4rem,9vw,8rem)…} trap as the hub sections above: this is
   the one <section> on an article page, so without the reset "Related articles" sits several
   screens below the prose and indented out of line with it. */
.kb-related{margin:2rem 0 0;padding:0;max-width:none}
.kb-related ul{margin:.5rem 0 0;padding-left:1.1rem}
.kb-related a{color:var(--accent)}
.kb-support{display:flex;flex-direction:column;gap:.35rem;align-items:flex-start;margin:2rem 0 0;padding:1rem 1.1rem;border-radius:14px;border:1px solid var(--glass-border)}
.kb-support p{margin:0;color:var(--dim)}
.kb-foot{display:flex;justify-content:space-between;gap:1rem;max-width:min(1200px,94vw);margin:0 auto;padding:1.2rem clamp(1rem,3vw,2rem);color:var(--dim);font-size:.85rem;border-top:1px solid var(--glass-border);width:100%}
.kb-foot a{color:var(--dim)}
@media (max-width:720px){.kb-nav .nav-links{display:none}.kb-foot{flex-direction:column;align-items:flex-start}}

/* ---- mobile: nav panel + wide tables ----
   These live at the END of kb.css on purpose. kb.css loads after styles.css and
   its `.kb-nav .nav-links` selector (0,2,0) outranks the panel rules styles.css
   sets on `.nav-links` (0,1,0) — so the shared drop-panel styling silently did
   nothing here until it was restated at this specificity. The KB header also
   collapses at 720px, not the 980px the marketing header uses, so the toggle has
   to follow ITS breakpoint or the two would be visible at once between them. */
.kb-nav .nav-toggle{display:none}
@media (max-width:720px){
  .kb-nav{position:relative}
  .kb-nav .nav-toggle{display:flex}
  .kb-nav .nav-links{
    display:none;position:absolute;top:100%;left:0;right:0;z-index:20;
    flex-direction:column;gap:0;margin-left:0;
    padding:.35rem clamp(1rem,3vw,2rem) .9rem;
    background:var(--bg-2);border-bottom:1px solid var(--glass-border);
    box-shadow:0 24px 50px -30px rgba(0,0,0,.9);
  }
  .kb-nav[data-open="true"] .nav-links{display:flex}
  .kb-nav .nav-links a{padding:.9rem .1rem;font-size:1rem;color:var(--ink);border-bottom:1px solid var(--hairline)}
  .kb-nav .nav-links a:last-child{border-bottom:0}
}

/* A 4-column comparison table's min-content is ~397px — wider than the article
   column on a 390px phone, so it widened the whole page to 492px and
   body{overflow-x:hidden} clipped the last column away with no way to reach it.
   The WRAPPER scrolls (markdown.mjs emits it); the table keeps real table layout
   and its natural width. Two rejected attempts, both measured:
     display:block + width:max-content -> box grew to the content (1488px), so
       overflow-x had nothing to scroll and the page went to 2051px;
     display:block + width:100%        -> the anonymous table box kept its own
       width, so the last column was clipped and still unreachable. */
.kb-tablewrap{overflow-x:auto;max-width:100%;margin:.8rem 0}
.kb-tablewrap table{margin:0;width:100%;min-width:26rem}

/* At 360px the brand + Start free + toggle no longer fit the 1.2rem gaps and the
   toggle itself hung 9px off the right edge (measured). */
@media (max-width:560px){
  .kb-nav{gap:.55rem;padding-inline:clamp(.8rem,3vw,2rem)}
}
@media (max-width:380px){
  .kb-nav{gap:.45rem;padding-inline:.75rem}
  .kb-nav .brand-name{font-size:1rem}
}