/* spck.dev design system — Material-grade sensibility, spck's own identity.
   Fonts are SELF-HOSTED (same-origin /fonts/*.woff2) so Roboto renders on every
   platform while the "zero external origins" security guarantee stays intact.
   Shared by every page so the look is consistent by construction. Signature: the
   green proof-mark (pass/fail is the subject's whole world). */

@font-face{font-family:'Roboto';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('/fonts/roboto.woff2') format('woff2')}
@font-face{font-family:'Roboto Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/roboto-mono.woff2') format('woff2')}

:root{
  --primary:#059669;        /* emerald — a green PASS is what spck proves (kill-rate) */
  --primary-ink:#047857;
  --primary-lift:#10b981;   /* brighter emerald for dark surfaces */
  --primary-tint:#ecfdf5;
  --ink:#0f1417;           /* near-black on-surface */
  --muted:#5b6470;         /* on-surface muted */
  --faint:#8b93a1;
  --canvas:#f5f7f6;        /* app background */
  --surface:#ffffff;
  --surface-2:#eef2ef;
  --line:#e4e8e6;
  --ok:#059669;            /* pass — the brand IS the pass color */
  --bad:#e5484d;           /* defect — what the suite catches */
  --warn:#b45309;
  --radius:14px; --radius-sm:10px; --radius-lg:20px;
  --e1:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.10);
  --e2:0 2px 6px rgba(16,24,40,.06),0 8px 24px rgba(16,24,40,.08);
  --sans:'Roboto','Segoe UI',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --mono:'Roboto Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{overflow-x:hidden;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--sans);
  font-size:15px;line-height:1.6;overflow-x:hidden;max-width:100%;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
code,.mono{font-family:var(--mono)}

/* ── shared nav ──────────────────────────────────────────────────────────── */
.site-nav{max-width:1120px;margin:0 auto;padding:16px 24px;display:flex;
  align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 16px;font-size:14px}
.site-nav .brand{display:inline-flex;align-items:center;gap:9px;font-weight:700;
  font-size:15px;color:var(--ink);text-decoration:none;letter-spacing:-.2px}
.site-nav .brand .mk{width:26px;height:26px;border-radius:8px;
  background:linear-gradient(135deg,var(--primary-lift),var(--primary-ink));color:#fff;font-weight:800;
  font-size:14px;display:inline-flex;align-items:center;justify-content:center;
  box-shadow:var(--e1)}
.site-nav .links{display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;font-size:13.5px}
.site-nav .links a{color:var(--muted);font-weight:500}
.site-nav .links a:hover{color:var(--ink);text-decoration:none}

/* ── buttons ─────────────────────────────────────────────────────────────── */
.btn-primary,.btn-secondary,.btn-ghost{display:inline-flex;align-items:center;justify-content:center;
  gap:8px;height:42px;padding:0 22px;border-radius:21px;font-size:14.5px;font-weight:600;line-height:1;
  text-decoration:none !important;transition:box-shadow .18s,transform .18s,background .18s;
  border:1px solid transparent;cursor:pointer;white-space:nowrap;vertical-align:middle}
.btn-primary{background:var(--primary);color:#fff !important;box-shadow:var(--e1)}
.btn-primary:hover{background:var(--primary-ink);box-shadow:var(--e2);transform:translateY(-1px)}
.btn-secondary{background:var(--surface);color:var(--ink) !important;border-color:var(--line);box-shadow:var(--e1)}
.btn-secondary:hover{border-color:#cdd0d6;box-shadow:var(--e2)}
.btn-ghost{background:transparent;color:var(--primary) !important;padding-left:8px;padding-right:8px}
/* on dark hero */
.on-dark .btn-primary{background:#fff;color:var(--ink) !important}
.on-dark .btn-primary:hover{background:#f3f4f6}
.on-dark .btn-secondary{background:rgba(255,255,255,.08);color:#e8eaed !important;border-color:rgba(255,255,255,.18)}
.on-dark .btn-secondary:hover{background:rgba(255,255,255,.14)}

/* ── cards / surfaces ────────────────────────────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;box-shadow:var(--e1)}
.card.pad-lg{padding:28px 30px}

/* ── proof-mark: the signature. green ✓ = a claim the suite can back. ─────── */
.proof{display:inline-flex;align-items:center;gap:7px;font-weight:600}
.proof::before{content:"";width:18px;height:18px;border-radius:50%;flex:0 0 auto;
  background:var(--ok);
  -webkit-mask:no-repeat center/11px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  mask:no-repeat center/11px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}

/* ── shared footer ───────────────────────────────────────────────────────── */
.site-footer{max-width:1120px;margin:64px auto 0;padding:28px 24px 56px;
  border-top:1px solid var(--line);font-size:13px;color:var(--muted);line-height:1.7}
.site-footer .disclaimer{max-width:680px;margin:0 0 12px}
.site-footer .footer-links{display:flex;flex-wrap:wrap;gap:8px 20px}
.site-footer a{color:var(--muted)}
.site-footer a:hover{color:var(--ink)}

/* ── type utilities ──────────────────────────────────────────────────────── */
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--primary)}

/* ── section rhythm ──────────────────────────────────────────────────────── */
.section{padding:76px 24px}
.section .inner{max-width:1000px;margin:0 auto}
.section.alt{background:var(--surface)}
.section-title{font-size:30px;font-weight:800;letter-spacing:-.6px;margin:0 0 12px}
.section-desc{font-size:15.5px;color:var(--muted);line-height:1.7;max-width:660px}

/* ── light hero band (shared) ────────────────────────────────────────────── */
.hero{background:radial-gradient(120% 120% at 50% -10%,#e9f7f0 0%,var(--canvas) 55%);
  padding:76px 24px 68px;text-align:center;border-bottom:1px solid var(--line)}
.hero .inner{max-width:760px;margin:0 auto}
.hero h1{font-size:clamp(30px,5vw,46px);font-weight:800;letter-spacing:-1.4px;
  line-height:1.1;margin:14px 0 16px;color:var(--ink)}
.hero h1 em{font-style:normal;color:var(--primary)}
.hero .sub{font-size:16.5px;color:var(--muted);line-height:1.6;max-width:600px;margin:0 auto 28px}
.hero .badge{display:inline-flex;align-items:center;gap:7px;background:var(--primary-tint);
  color:var(--primary-ink);border:1px solid #c7ead9;padding:5px 15px;border-radius:999px;
  font-size:12px;font-weight:700;letter-spacing:.06em}
.hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ── tool/reference page header (check · coverage · sandbox · docs) ────────────
   One consistent left-aligned header scale across every functional page, so the
   tool pages read as one product. (home + agent use the centered .hero tier.)
   Sits inside each page's own content container; .page-head selectors outrank the
   pages' element-level h1{} rules so the size can't drift per page. */
.page-head{padding:12px 0 4px}
.page-head .eyebrow{display:block;margin:0 0 12px}
.page-head h1{font-size:clamp(27px,3.2vw,31px);font-weight:800;letter-spacing:-.7px;
  line-height:1.18;margin:0 0 12px;color:var(--ink)}
.page-head h1 em{font-style:normal;color:var(--primary)}
.page-head h1 .note{font-size:.52em;font-weight:600;color:var(--faint);letter-spacing:0;
  margin-left:5px;white-space:nowrap}
.page-head .sub{font-size:15.5px;color:var(--muted);line-height:1.65;max-width:680px;margin:0 0 20px}
.page-head .actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:0 0 6px}

/* ── stat row (data-live numbers, verified) ──────────────────────────────── */
.stats{display:flex;gap:40px;justify-content:center;flex-wrap:wrap;margin-top:44px}
.stats .stat{text-align:center}
.stats .stat-num{font-size:30px;font-weight:800;color:var(--ink);letter-spacing:-.5px}
.stats .stat-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;margin-top:4px}

/* ── code ────────────────────────────────────────────────────────────────── */
pre{background:#0f1417;color:#e8eef2;border-radius:var(--radius-sm);padding:16px 18px;
  overflow-x:auto;font-family:var(--mono);font-size:13px;line-height:1.7;border:1px solid #1c2530}
:not(pre)>code{font-family:var(--mono);font-size:.9em;background:var(--surface-2);
  padding:1px 6px;border-radius:5px;color:var(--ink)}
pre code{background:none;padding:0;color:inherit}

/* ── table (coverage matrix, etc.) ───────────────────────────────────────── */
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th,.tbl td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line)}
.tbl th{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700}

/* status chips (pass/fail is the subject) */
.pill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;
  padding:2px 9px;border-radius:999px}
.pill.ok{background:var(--primary-tint);color:var(--primary-ink)}
.pill.bad{background:#fdecec;color:#b42318}
.pill.mut{background:var(--surface-2);color:var(--muted)}

@media (max-width:760px){
  .section{padding:52px 20px}
  .site-nav{padding:14px 18px}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px}