/* ============================================================
   CLAW Blog — Unified Design System v1
   Single theme applied to index + every article + aux pages.
   Light editorial style, red accent, Inter + JetBrains Mono.
   Loaded AFTER inline <style> blocks so it wins the cascade;
   !important used where inline style="" attributes must be beaten.
   ============================================================ */

:root{
  --un-bg:#f7f7f8;
  --un-surface:#ffffff;
  --un-surface2:#f1f1f3;
  --un-text:#171717;
  --un-text2:#4b4b50;
  --un-text3:#4b4b53;
  --un-border:#e5e5e8;
  --un-border2:#d4d4d9;
  --un-accent:#dc2626;
  --un-accent-dark:#b91c1c;
  --un-accent-soft:rgba(220,38,38,.08);
  --un-radius:14px;
  --un-radius-sm:8px;
  --un-shadow:0 1px 3px rgba(0,0,0,.06),0 8px 24px -12px rgba(0,0,0,.12);
  --un-font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --un-mono:'JetBrains Mono','IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* ---------- Global reset (beats all page themes) ---------- */
html{background:var(--un-bg) !important;scroll-behavior:smooth;}
*{box-sizing:border-box;}
body{
  background:var(--un-bg) !important;
  color:var(--un-text) !important;
  font-family:var(--un-font) !important;
  font-size:16.5px !important;
  line-height:1.75 !important;
  max-width:820px !important;
  margin:0 auto !important;
  padding:0 1.5rem 3rem !important;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
@media(min-width:960px){ body{padding:0 2rem 4rem !important;} }

/* ---------- Unified sticky nav ---------- */
nav[aria-label="Main navigation"],
.nav-container{
  position:sticky !important;top:0 !important;z-index:100 !important;
  display:flex !important;align-items:center !important;justify-content:space-between !important;
  gap:12px !important;
  max-width:none !important;width:auto !important;
  margin:0 -1.5rem 1.75rem !important;
  padding:0 1.5rem !important;
  height:58px !important;
  background:rgba(255,255,255,.92) !important;
  backdrop-filter:saturate(180%) blur(18px) !important;
  -webkit-backdrop-filter:saturate(180%) blur(18px) !important;
  border-bottom:1px solid var(--un-border) !important;
  border-radius:0 !important;
  box-shadow:0 1px 0 rgba(0,0,0,.02) !important;
}
@media(min-width:960px){
  nav[aria-label="Main navigation"],.nav-container{
    margin:0 -2rem 2rem !important;padding:0 2rem !important;
  }
}
.nav-brand{
  display:flex !important;align-items:center !important;gap:9px !important;
  font-family:var(--un-mono) !important;
  font-weight:700 !important;font-size:.95rem !important;
  letter-spacing:-.02em !important;color:var(--un-text) !important;
  white-space:nowrap !important;
}
.nav-brand a{color:var(--un-text) !important;text-decoration:none !important;}
.nav-brand a:hover{color:var(--un-accent) !important;}
.nav-links{
  display:flex !important;gap:6px !important;align-items:center !important;
  overflow-x:auto !important;scrollbar-width:none !important;
}
.nav-links::-webkit-scrollbar{display:none !important;}
.nav-links a{
  font-family:var(--un-font) !important;
  font-size:.76rem !important;font-weight:600 !important;
  letter-spacing:.05em !important;text-transform:uppercase !important;
  color:var(--un-text2) !important;
  text-decoration:none !important;
  padding:6px 10px !important;
  border-radius:8px !important;
  border-bottom:none !important;
  white-space:nowrap !important;
  transition:color .15s,background .15s !important;
}
.nav-links a:hover{color:var(--un-accent) !important;background:var(--un-accent-soft) !important;}
.nav-links a.active{color:var(--un-accent) !important;background:var(--un-accent-soft) !important;}
@media(max-width:640px){
  .nav-links a{font-size:.68rem !important;padding:5px 8px !important;}
  .nav-brand{font-size:.85rem !important;}
}

/* ---------- Typography ---------- */
h1{
  font-family:var(--un-font) !important;
  font-size:clamp(1.65rem,4vw,2.15rem) !important;
  font-weight:800 !important;
  letter-spacing:-.03em !important;
  line-height:1.25 !important;
  color:var(--un-text) !important;
  margin:0 0 .9rem !important;
}
h2{
  font-size:1.28rem !important;font-weight:700 !important;
  letter-spacing:-.015em !important;color:var(--un-text) !important;
  margin:2.2rem 0 .8rem !important;
  padding-bottom:.35rem !important;
  border-bottom:1px solid var(--un-border) !important;
}
h3{
  font-size:1.06rem !important;font-weight:700 !important;
  color:var(--un-text) !important;margin:1.6rem 0 .55rem !important;
}
h4,h5,h6{font-weight:700 !important;color:var(--un-text) !important;}
p{margin:0 0 1rem !important;color:var(--un-text) !important;}
a{color:var(--un-accent) !important;text-decoration:none !important;}
a:hover{color:var(--un-accent-dark) !important;text-decoration:underline !important;}
strong,b{color:var(--un-text) !important;font-weight:700 !important;}
em{color:inherit !important;}
hr{border:none !important;border-top:1px solid var(--un-border) !important;margin:2rem 0 !important;}

/* ---------- Article sections ---------- */
.section{
  font-size:1rem !important;line-height:1.8 !important;
  color:var(--un-text) !important;
}
.section p{color:var(--un-text) !important;}
.section h2{color:var(--un-text) !important;border-bottom:1px solid var(--un-border) !important;}
.section h3{color:var(--un-text) !important;}
.section ul,.section ol{margin:0 0 1rem 1.4rem !important;color:var(--un-text) !important;}
.section li{margin-bottom:.45rem !important;color:var(--un-text) !important;}
.section blockquote{
  margin:1.25rem 0 !important;padding:.9rem 1.2rem !important;
  border-left:3px solid var(--un-accent) !important;
  background:var(--un-surface2) !important;
  border-radius:0 10px 10px 0 !important;
  color:var(--un-text2) !important;
}
.section img{max-width:100% !important;height:auto !important;border-radius:var(--un-radius) !important;box-shadow:var(--un-shadow) !important;margin:1rem 0 !important;}
.section table{
  width:100% !important;border-collapse:collapse !important;
  font-size:.92rem !important;margin:1.25rem 0 !important;
  background:var(--un-surface) !important;border-radius:10px !important;overflow:hidden !important;
}
.section th{
  background:var(--un-surface2) !important;color:var(--un-text) !important;
  font-weight:700 !important;text-align:left !important;
  padding:.6rem .9rem !important;border:1px solid var(--un-border) !important;
}
.section td{padding:.55rem .9rem !important;border:1px solid var(--un-border) !important;color:var(--un-text) !important;}

/* ---------- Code ---------- */
code{
  font-family:var(--un-mono) !important;
  font-size:.86em !important;
  background:var(--un-surface2) !important;
  color:var(--un-accent-dark) !important;
  padding:.15em .45em !important;
  border-radius:6px !important;
  border:1px solid var(--un-border) !important;
}
pre{
  position:relative !important;
  background:#16181d !important;color:#e6e8ee !important;
  padding:1.1rem 1.2rem !important;border-radius:12px !important;
  overflow-x:auto !important;margin:1.25rem 0 !important;
  font-family:var(--un-mono) !important;font-size:.86rem !important;
  line-height:1.65 !important;
  box-shadow:var(--un-shadow) !important;
}
pre code{background:transparent !important;color:inherit !important;border:none !important;padding:0 !important;font-size:inherit !important;}

/* ---------- Meta / tags / back link ---------- */
.back-link{
  display:inline-flex !important;align-items:center !important;gap:6px !important;
  margin:1.5rem 0 1.25rem !important;
  font-size:.85rem !important;font-weight:600 !important;
  color:var(--un-accent) !important;
  text-decoration:none !important;
}
.back-link:hover{color:var(--un-accent-dark) !important;text-decoration:underline !important;}
.meta{
  display:flex !important;gap:1rem !important;flex-wrap:wrap !important;
  font-family:var(--un-mono) !important;font-size:.74rem !important;
  color:var(--un-text3) !important;margin:0 0 1.5rem !important;
}
.meta span{color:var(--un-text3) !important;}
.tag{
  display:inline-block !important;
  font-family:var(--un-mono) !important;font-size:.66rem !important;font-weight:600 !important;
  padding:2px 10px !important;border-radius:100px !important;
  background:var(--un-accent-soft) !important;color:var(--un-accent) !important;
  border:1px solid rgba(220,38,38,.22) !important;
  text-transform:uppercase !important;letter-spacing:.04em !important;
}
.updated{font-size:.85rem !important;color:var(--un-text3) !important;}

/* ---------- Verdict / promo boxes ---------- */
.verdict-box{
  background:linear-gradient(135deg,rgba(220,38,38,.06),rgba(220,38,38,.02)) !important;
  border:1px solid rgba(220,38,38,.18) !important;
  border-radius:14px !important;padding:1.4rem 1.5rem !important;margin:1.75rem 0 !important;
}
.verdict-title{font-weight:700 !important;font-size:.85rem !important;color:var(--un-accent) !important;text-transform:uppercase !important;letter-spacing:.05em !important;margin-bottom:.5rem !important;}
.verdict-body{color:var(--un-text2) !important;font-size:.95rem !important;}
.promo-banner{
  background:linear-gradient(135deg,rgba(220,38,38,.07),rgba(220,38,38,.03)) !important;
  border:1px solid rgba(220,38,38,.2) !important;
  border-radius:16px !important;padding:1.5rem !important;margin:2rem 0 !important;text-align:center !important;
}
.promo-badge{
  display:inline-block !important;background:var(--un-accent) !important;color:#fff !important;
  font-family:var(--un-mono) !important;font-size:.75rem !important;font-weight:700 !important;
  padding:5px 14px !important;border-radius:100px !important;margin-bottom:.8rem !important;
  text-transform:uppercase !important;letter-spacing:.5px !important;
}
.promo-title{font-size:1.3rem !important;font-weight:800 !important;color:var(--un-text) !important;margin-bottom:.6rem !important;}
.promo-desc{color:var(--un-text2) !important;font-size:.95rem !important;margin:0 auto 1rem !important;max-width:520px !important;}

/* ---------- Footer ---------- */
footer,.footer{
  margin:3.5rem -1.5rem -3rem !important;
  padding:2rem 1.5rem !important;
  background:var(--un-surface) !important;
  border-top:1px solid var(--un-border) !important;
  text-align:center !important;
  font-size:.85rem !important;color:var(--un-text2) !important;
}
@media(min-width:960px){
  footer,.footer{margin:4rem -2rem -4rem !important;padding:2.5rem 2rem !important;}
}
footer p,.footer p{color:var(--un-text2) !important;margin:0 0 .4rem !important;}
footer a,.footer a{color:var(--un-accent) !important;text-decoration:none !important;}
footer a:hover,.footer a:hover{text-decoration:underline !important;}
.footer-links{display:flex !important;gap:1.25rem !important;justify-content:center !important;flex-wrap:wrap !important;margin-bottom:.6rem !important;}
.footer-links a{font-size:.8rem !important;color:var(--un-text2) !important;text-transform:uppercase !important;letter-spacing:.04em !important;font-weight:600 !important;}
.footer-copy{font-size:.8rem !important;color:var(--un-text3) !important;}

/* ---------- 404 ---------- */
.error-code{font-family:var(--un-mono) !important;font-size:4rem !important;font-weight:800 !important;color:var(--un-accent) !important;text-align:center !important;margin:3rem 0 .5rem !important;}
.lead{font-size:1.05rem !important;color:var(--un-text2) !important;text-align:center !important;max-width:520px !important;margin:0 auto 2rem !important;}

/* ---------- Accessibility & motion ---------- */
.skip-link{position:absolute !important;top:-100px !important;left:16px !important;background:var(--un-accent) !important;color:#fff !important;padding:8px 16px !important;border-radius:8px !important;z-index:200 !important;}
.skip-link:focus{top:16px !important;}
a:focus-visible,button:focus-visible{outline:2px solid var(--un-accent) !important;outline-offset:2px !important;border-radius:6px !important;}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
  html{scroll-behavior:auto !important;}
}
::selection{background:rgba(220,38,38,.18) !important;}

/* ---------- Review Engine Dark Contrast Protection ---------- */
.rv-verdict-box{background:#0f172a !important;color:#ffffff !important;border:1px solid #1e293b !important;}
.rv-verdict-box h1,.rv-verdict-box h2,.rv-verdict-box h3,.rv-verdict-box h4,.rv-verdict-box .rv-verdict-title{color:#ffffff !important;}
.rv-verdict-box p,.rv-verdict-box .rv-verdict-p,.rv-verdict-box span{color:#f1f5f9 !important;}
.rv-verdict-box strong,.rv-verdict-box b{color:#ffffff !important;}
.rv-score-circle{background:#dc2626 !important;border:3px solid #ef4444 !important;}
.rv-score-num{color:#ffffff !important;}
.rv-score-max{color:#fee2e2 !important;}
.rv-diagram-box{background:#0f172a !important;color:#f1f5f9 !important;}
.rv-diagram-title{color:#38bdf8 !important;}
.rv-diagram-badge{color:#f1f5f9 !important;background:#1e293b !important;border:1px solid #334155 !important;}
.rv-diagram-pre,pre.rv-diagram-pre{color:#f8fafc !important;background:transparent !important;}