/* Shared chrome for the SEO comparison/guide pages (/compare-style landings + the how-to guides).
 *
 * Extracted from 4 templates that each carried a byte-identical copy of it inline. Same contract as
 * blog.css, and the same hard rule:
 *
 * ⚠️  Never put a brand colour literal — a hex or an "r,g,b" triple — in here. `common.brand_html`
 * recolours a branded deploy by rewriting those literals in the SERVED HTML; an external stylesheet
 * never passes through it, so a hardcoded colour here would stay MemberBot-blue on AccessBot
 * forever. (Two of these pages — the how-to guides — ARE served on branded deploys.) Brand colour
 * belongs in the template's inline :root block; this file reads it back via var().
 *
 * Tokens a template must define: --bg --panel --panel2 --ink --muted --brand --brand2 --ok --no
 * --line --radius, plus --accent-rgb for the highlighted comparison column.
 */
  *{box-sizing:border-box}
  body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
    background:var(--bg);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:1000px;margin:0 auto;padding:0 20px}
  .btn{display:inline-block;padding:12px 20px;border-radius:12px;font-weight:600;cursor:pointer;border:1px solid transparent}
  .btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff}
  .btn-primary:hover{filter:brightness(1.08)}
  .btn-ghost{border-color:var(--line);color:var(--ink)}
  .btn-ghost:hover{border-color:var(--brand)}
  /* Sticky 64px header: offset in-page jumps so a target never lands under it. Set pre-emptively
     — this page has no anchors today, but the first TOC added here would otherwise reproduce the
     bug the landing pages had. Matches the 80px used across the landings and blog posts. */
  html{scroll-padding-top:80px;scroll-behavior:smooth}
  header{position:sticky;top:0;z-index:10;background:rgba(11,16,32,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
  .nav{display:flex;align-items:center;justify-content:space-between;height:64px}
  .logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;letter-spacing:-.02em}
  .logo b{color:var(--brand)} .logo img{width:30px;height:30px;border-radius:8px;display:block}
  .nav-links{display:flex;gap:24px;align-items:center}
  .nav-links a{color:var(--muted);font-size:15px} .nav-links a:hover{color:var(--ink)}
  @media(max-width:760px){.nav-links a:not(.btn){display:none}}
  h1{font-size:clamp(30px,5vw,46px);line-height:1.1;letter-spacing:-.02em;margin:.2em 0}
  h2{font-size:clamp(22px,3vw,30px);letter-spacing:-.01em;margin:0 0 .5em}
  .hero{text-align:center;padding:72px 0 40px}
  .sub{color:var(--muted);font-size:19px;max-width:680px;margin:14px auto 26px}
  section{padding:44px 0;border-top:1px solid var(--line)}
  .lead{color:var(--muted);max-width:760px;margin:0 0 20px}
  .tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--radius)}
  table{border-collapse:collapse;width:100%;min-width:720px;font-size:14.5px}
  th,td{padding:13px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
  thead th{background:var(--panel2);font-size:13px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted)}
  thead th.us{color:var(--brand)}
  tbody td:first-child{color:var(--muted);white-space:nowrap}
  td.us{background:rgba(var(--accent-rgb),.06);color:var(--ink);font-weight:600}
  .yes{color:var(--ok);font-weight:700} .partial{color:#ffcf6b} .nope{color:var(--no)}
  .vs{display:grid;gap:22px}
  .vs .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px}
  .vs .card h3{margin:0 0 8px;font-size:19px}
  .vs .card p{color:var(--muted);margin:.5em 0}
  ul.chk{list-style:none;padding:0;margin:0;display:grid;gap:10px}
  ul.chk li{padding-left:28px;position:relative;color:var(--muted)}
  ul.chk li::before{content:"✓";position:absolute;left:0;color:var(--ok);font-weight:800}
  ul.chk li b{color:var(--ink)}
  .faq{max-width:800px} .qa{border-bottom:1px solid var(--line);padding:16px 0}
  .qa h3{margin:0 0 6px;font-size:17px} .qa p{color:var(--muted);margin:0}
  .disc{font-size:12.5px;color:#7e8aac;max-width:820px;margin-top:8px}
  .cta{text-align:center;background:var(--panel);border-radius:var(--radius);padding:44px 20px;margin:44px 0}
  footer{border-top:1px solid var(--line);padding:34px 0;color:var(--muted);font-size:14px}
  .foot{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center}
  .foot a{color:var(--muted);margin-right:16px} .foot a:hover{color:var(--ink)}

  ol.steps{counter-reset:s;list-style:none;padding:0;margin:8px 0;display:grid;gap:14px}
  ol.steps li{counter-increment:s;position:relative;padding:16px 18px 16px 56px;background:var(--panel);border:1px solid var(--line);border-radius:12px}
  ol.steps li::before{content:counter(s);position:absolute;left:16px;top:16px;width:26px;height:26px;border-radius:8px;background:var(--brand);color:#fff;font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center}
  ol.steps li b{color:var(--ink)} ol.steps li p{color:var(--muted);margin:.4em 0 0}
  .note{font-size:13.5px;color:var(--muted);background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:12px 15px;margin:14px 0}