/* ==================================================================
   AI AUTOMATION LAB — shared design tokens + component styles
   Loaded by every page. Edit palette/type here to restyle site-wide.

   V3 SYSTEM: white / light-grey / charcoal / red. This is now the
   single source of truth for the brand across all pages (homepage,
   article, disclosure, privacy). No dark-mode variant — the site
   always renders this light system regardless of OS preference.
   ================================================================== */
:root{
  --paper:#FFFFFF; --surface:#FFFFFF; --surface-2:#F5F5F6;
  --ink:#111111; --ink-muted:#4B5563; --ink-faint:#6B7280;
  --border:#E5E7EB; --border-strong:#D1D5DB;
  --brand:#111111; --brand-strong:#000000; --brand-tint:#F3F4F6; --focus:#111111;
  --critical:#DC2626; --critical-tint:#FEE2E2;
  --significant:#D97706; --significant-tint:#FEF3C7;
  --moderate:#2563EB; --moderate-tint:#DBEAFE;
  --good:#16A34A; --good-tint:#DCFCE7;
  --shadow-card: 0 1px 2px rgba(17,17,17,.05), 0 16px 32px -20px rgba(17,17,17,.16);
  --radius-s:6px; --radius-m:10px; --radius-l:16px;
  --cta-red:#DC2626; --cta-red-hover:#B91C1C;
}
*{box-sizing:border-box;}
[hidden]{ display:none !important; }
html{scroll-behavior:smooth;}
body{ margin:0; background:var(--paper); color:var(--ink); font-family:"IBM Plex Sans", system-ui, sans-serif; font-size:16px; line-height:1.55; }
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{animation-duration:.001ms !important; transition-duration:.001ms !important;} }
h1,h2,h3{ font-family:"IBM Plex Sans", system-ui, sans-serif; font-weight:700; letter-spacing:-.02em; text-wrap:balance; margin:0; color:var(--ink); }
.mono{ font-family:"IBM Plex Mono", ui-monospace, monospace; font-variant-numeric:tabular-nums; }
a{ color:var(--cta-red); }
.wrap{ max-width:1080px; margin-inline:auto; padding-inline:24px; }
.prose{ max-width:680px; }
.prose h2{ font-size:24px; margin-top:36px; }
.prose h3{ font-size:18px; margin-top:28px; }
.prose p, .prose ul, .prose ol{ font-size:16.5px; color:var(--ink); }
.prose p{ margin:14px 0; }
.prose ul, .prose ol{ padding-left:22px; }
.prose li{ margin:7px 0; }
section{ padding-block:48px; }
section + section{ border-top:1px solid var(--border); }
.eyebrow{ font-family:"IBM Plex Mono", monospace; font-size:12.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-muted); font-weight:600; display:flex; align-items:center; gap:8px; margin-bottom:14px; }
.eyebrow::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--cta-red); display:inline-block; }
.skip-link{ position:absolute; left:-9999px; top:0; background:var(--ink); color:#fff; padding:10px 16px; border-radius:0 0 8px 0; z-index:100; }
.skip-link:focus{ left:0; }
.site-header{ position:sticky; top:0; z-index:30; background:rgba(255,255,255,.88); backdrop-filter:blur(10px); border-bottom:1px solid var(--border); padding-block:22px; padding-inline:24px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.wordmark{ font-family:"IBM Plex Mono",monospace; font-weight:600; font-size:14px; letter-spacing:.04em; color:var(--ink); text-decoration:none; display:flex; align-items:center; gap:8px; }
.wordmark::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--brand); display:inline-block; }
.site-nav{ display:flex; gap:22px; font-size:13.5px; }
.site-nav a{ color:var(--ink-muted); text-decoration:none; }
.site-nav a:hover{ color:var(--ink); }
.site-footer{ padding-block:32px 44px; font-size:12.5px; color:var(--ink-faint); border-top:1px solid var(--border); margin-top:12px; }
.site-footer .wrap{ display:flex; flex-direction:column; gap:10px; }
.site-footer a{ color:var(--ink-muted); }
button{ font-family:inherit; cursor:pointer; }
.btn{ appearance:none; border:none; border-radius:var(--radius-s); padding:14px 24px; font-size:15.5px; font-weight:600; display:inline-flex; align-items:center; gap:10px; line-height:1; transition:transform .15s ease, box-shadow .15s ease, background .15s ease; text-decoration:none; }
.btn:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }
.btn-primary{ background:var(--cta-red); color:#FFFFFF; box-shadow:0 10px 24px -10px rgba(220,38,38,.5); }
.btn-primary:hover{ background:var(--cta-red-hover); transform:translateY(-1px); }
.btn-ghost{ background:transparent; color:var(--ink); border:1.5px solid var(--border-strong); }
.btn-ghost:hover{ border-color:var(--ink); }
.btn[disabled]{ opacity:.45; cursor:not-allowed; transform:none; }
.btn-sm{ padding:9px 14px; font-size:13.5px; border-radius:var(--radius-s); }
.disclosure{ margin-top:16px; font-size:13px; color:var(--ink-muted); background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-s); padding:12px 14px; max-width:64ch; }
.callout{ background:var(--brand-tint); border:1px solid var(--border); border-radius:var(--radius-m); padding:18px 20px; margin:24px 0; }
.article-meta{ font-size:13px; color:var(--ink-faint); margin-top:6px; }

/* ==================== ARTICLE INLINE IMAGES ==================== */
.article-figure{ margin:28px 0; }
.article-figure img{ width:100%; height:auto; display:block; border-radius:var(--radius-m); border:1px solid var(--border); box-shadow:var(--shadow-card); }