/* ============================================================
   clean.nik.co · Clean Build Standard
   Sibling to identity.nik.co. Reference-manual feel.
   ============================================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

:root {
  --paper: #F4F1EC;
  --bg: #F4F1EC;
  --bg-deep: #ECE7DF;
  --ink: #111111;
  --ink-soft: #1B1B1B;
  --mute: rgba(17,17,17,0.55);
  --mute-2: rgba(17,17,17,0.40);
  --line: rgba(17,17,17,0.10);
  --line-strong: rgba(17,17,17,0.25);
  --line-hair: rgba(17,17,17,0.06);
  --danger: #C8403F;
  --ok: #1F7A4A;

  --accent: #5E5BE7;
  --accent-strong: #4C49CC;
  --accent-muted: rgba(94,91,231,0.08);
  --accent-ghost: rgba(94,91,231,0.04);

  --f-display: "Inter Display", "Inter Variable", "Inter var", "Inter", system-ui, sans-serif;
  --f-body: "Inter Variable", "Inter var", "Inter", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, monospace;

  --display-weight: 900;
  --display-track: -0.04em;
  --display-line: 0.92;

  --h2-size: clamp(36px, 5.5vw, 72px);
  --h1-size: clamp(48px, 9vw, 132px);

  --max: 1400px;
  --gutter: 60px;
}

@media (max-width: 700px) { :root { --gutter: 24px; } }

body {
  font-family: var(--f-body);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
  font-weight: 400;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11", "kern";
}
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(17,17,17,0.015) 1px, transparent 1px),
    radial-gradient(circle at 80% 70%, rgba(17,17,17,0.015) 1px, transparent 1px);
  background-size: 3px 3px, 5px 5px;
  opacity: 0.6;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ============================================================ NAV */
.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  background: rgba(244,241,236,0.85);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  max-width: var(--max); margin: 0 auto;
  padding: 14px var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
}
.nav-brand {
  font-family: var(--f-display);
  font-size: 18px; font-weight: var(--display-weight);
  color: var(--ink); letter-spacing: var(--display-track);
  display: inline-flex; align-items: center; gap: 10px;
}
.nav-brand .slash { color: var(--accent); font-weight: 400; }
.nav-brand .ver {
  font-family: var(--f-mono); font-size: 10px;
  color: var(--mute); letter-spacing: 0.2em;
  margin-left: 8px; text-transform: uppercase; font-weight: 400;
}
.nav-links {
  display: flex; gap: 22px;
  font-family: var(--f-mono);
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  overflow-x: auto;
}
.nav-links a {
  color: var(--mute);
  padding: 4px 0; border-bottom: 1px solid transparent;
  white-space: nowrap; transition: all 200ms ease-out;
}
.nav-links a:hover { color: var(--accent); border-bottom-color: var(--accent); }
@media (max-width: 900px) { .nav-links { display: none; } }

/* ============================================================ SPREAD */
.spread {
  max-width: var(--max); margin: 0 auto;
  padding: 140px var(--gutter);
  border-bottom: 1px solid var(--line);
  position: relative; z-index: 1;
}
@media (max-width: 700px) { .spread { padding: 80px var(--gutter); } }

.spread-num {
  position: absolute; top: 40px; right: var(--gutter);
  font-family: var(--f-mono);
  font-size: 10px; letter-spacing: 0.3em;
  color: var(--mute-2);
}
.spread-section-label {
  position: absolute; top: 40px; left: var(--gutter);
  font-family: var(--f-mono);
  font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--accent);
}
@media (max-width: 700px) {
  .spread-num, .spread-section-label { top: 20px; font-size: 9px; }
}

/* ============================================================ TYPE */
.eyebrow {
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 28px;
  display: flex; align-items: center; gap: 16px;
}
.eyebrow::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(to right, var(--accent), transparent);
  max-width: 120px;
}
h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: var(--display-weight);
  color: var(--ink);
  line-height: var(--display-line);
  letter-spacing: var(--display-track);
}
h1 { font-size: var(--h1-size); }
h2 { font-size: var(--h2-size); margin-bottom: 32px; }
h2 em, h1 em { color: var(--accent); font-style: normal; font-weight: inherit; }
h3 { font-size: clamp(22px, 2.6vw, 30px); margin-bottom: 14px; }
h4 { font-size: 16px; margin-bottom: 10px; font-weight: 600; font-family: var(--f-body); letter-spacing: -0.005em; }

.lead {
  font-size: clamp(20px, 2.1vw, 28px);
  line-height: 1.4; color: var(--ink-soft);
  max-width: 62ch; margin-bottom: 28px;
  font-weight: 500; letter-spacing: -0.01em;
}
p { max-width: 65ch; color: var(--mute); font-size: 15px; line-height: 1.6; margin-bottom: 14px; }
p.intro { color: var(--ink-soft); font-size: 16.5px; }
.mono { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em; }
.rule { height: 1px; background: var(--line); margin: 60px 0; }
.rule-accent { height: 1px; width: 160px; background: linear-gradient(90deg, var(--accent), transparent); margin: 40px 0; }

/* ============================================================ COVER */
.cover {
  min-height: calc(100vh - 50px);
  padding: 100px var(--gutter) 60px;
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden; background: var(--bg);
}
.cover::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 900px 600px at 85% 95%, var(--accent-muted), transparent 60%),
    radial-gradient(circle at 10% 10%, rgba(17,17,17,0.03), transparent 40%);
}
.cover-top, .cover-bottom {
  position: relative; z-index: 2;
  display: flex; justify-content: space-between; align-items: flex-start;
  font-family: var(--f-mono);
  font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--mute); gap: 20px; flex-wrap: wrap;
}
.cover-bottom { align-items: flex-end; }
.cover-center {
  position: relative; z-index: 2;
  flex: 1; display: flex; flex-direction: column;
  justify-content: center; padding: 40px 0; gap: 24px;
}
.cover-wordmark {
  font-family: var(--f-display);
  font-weight: var(--display-weight);
  font-size: clamp(72px, 16vw, 240px);
  color: var(--ink); letter-spacing: var(--display-track); line-height: 0.9;
}
.cover-sub {
  font-family: var(--f-display);
  font-size: clamp(24px, 4.2vw, 52px);
  color: var(--accent); font-weight: var(--display-weight);
  line-height: 1; letter-spacing: var(--display-track); margin-top: 12px;
  max-width: 22ch;
}
.cover-chips {
  display: inline-flex; gap: 14px; flex-wrap: wrap;
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.25em; text-transform: uppercase; color: var(--mute);
}
.cover-chips .k { color: var(--accent); }

/* ============================================================ TOC */
.toc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; margin-top: 40px; }
@media (max-width: 800px) { .toc-grid { grid-template-columns: 1fr; gap: 0; } }
.toc-list { list-style: none; }
.toc-list li {
  display: flex; align-items: baseline; gap: 18px;
  padding: 16px 0; border-bottom: 1px solid var(--line);
  font-family: var(--f-display);
  font-size: 18px; font-weight: var(--display-weight);
  letter-spacing: var(--display-track); color: var(--ink);
}
.toc-list a { display: flex; align-items: baseline; gap: 18px; width: 100%; }
.toc-list a:hover .item { color: var(--accent); }
.toc-list .num {
  font-family: var(--f-mono); font-size: 11px;
  color: var(--accent); letter-spacing: 0.2em; min-width: 50px; font-weight: 500;
}
.toc-list .item { transition: color 200ms ease-out; }
.toc-list .dots { flex: 1; border-bottom: 1px dotted rgba(17,17,17,0.25); align-self: center; }
.toc-list .pg { font-family: var(--f-mono); font-size: 11px; color: var(--mute); letter-spacing: 0.15em; }

/* ============================================================ GRIDS */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.three-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; }
.four-col { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 900px) {
  .two-col, .three-col, .four-col { grid-template-columns: 1fr; gap: 24px; }
}

/* ============================================================ SWATCH */
.swatch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 32px; }
@media (max-width: 700px) { .swatch-grid { grid-template-columns: 1fr 1fr; } }
.swatch {
  border: 1px solid var(--line);
  background: #fff;
  padding: 0;
  display: flex; flex-direction: column;
  min-height: 180px;
}
.swatch .chip { height: 110px; }
.swatch .meta { padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.swatch .name { font-family: var(--f-display); font-weight: var(--display-weight); font-size: 16px; letter-spacing: var(--display-track); }
.swatch .hex { font-family: var(--f-mono); font-size: 11px; color: var(--mute); letter-spacing: 0.12em; text-transform: uppercase; }
.swatch .role { font-family: var(--f-mono); font-size: 10px; color: var(--mute-2); letter-spacing: 0.18em; text-transform: uppercase; }

/* ============================================================ TYPE SCALE */
.type-row {
  display: grid; grid-template-columns: 90px 1fr 120px;
  align-items: baseline; gap: 24px;
  padding: 18px 0; border-bottom: 1px solid var(--line);
}
.type-row .lbl { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); }
.type-row .sam { font-family: var(--f-display); font-weight: var(--display-weight); letter-spacing: var(--display-track); color: var(--ink); line-height: 1; }
.type-row .meta { font-family: var(--f-mono); font-size: 10px; color: var(--mute); letter-spacing: 0.15em; text-align: right; }
@media (max-width: 700px) { .type-row { grid-template-columns: 70px 1fr; } .type-row .meta { display: none; } }

/* ============================================================ SPACING SCALE */
.space-row {
  display: grid; grid-template-columns: 90px 1fr 80px;
  align-items: center; gap: 18px;
  padding: 12px 0; border-bottom: 1px solid var(--line-hair);
}
.space-row .lbl { font-family: var(--f-mono); font-size: 11px; color: var(--accent); letter-spacing: 0.18em; }
.space-row .bar { height: 10px; background: var(--ink); }
.space-row .px { font-family: var(--f-mono); font-size: 11px; color: var(--mute); text-align: right; }

/* ============================================================ COMPONENT BENCH */
.bench {
  border: 1px solid var(--line);
  background: #fff; padding: 32px;
  margin-top: 24px;
}
.bench-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 24px; padding-bottom: 14px; border-bottom: 1px solid var(--line-hair);
}
.bench-head .t { font-family: var(--f-display); font-weight: var(--display-weight); font-size: 18px; letter-spacing: var(--display-track); }
.bench-head .tag { font-family: var(--f-mono); font-size: 10px; color: var(--accent); letter-spacing: 0.22em; text-transform: uppercase; }
.bench-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-bottom: 18px; }
.bench-row:last-child { margin-bottom: 0; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-body); font-weight: 600; font-size: 14px;
  padding: 12px 22px; border-radius: 999px;
  border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
  cursor: pointer; transition: all 200ms ease-out;
  letter-spacing: -0.005em; min-height: 44px;
}
.btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.btn.secondary { background: transparent; color: var(--ink); }
.btn.secondary:hover { background: var(--ink); color: var(--paper); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn.ghost:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-ghost); }
.btn.accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.accent:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.btn[disabled], .btn.disabled { opacity: 0.4; pointer-events: none; }

/* Forms */
.field { display: flex; flex-direction: column; gap: 8px; max-width: 360px; }
.field label { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); }
.field input, .field textarea, .field select {
  font-family: var(--f-body); font-size: 15px;
  padding: 12px 14px; background: #fff;
  border: 1px solid var(--line-strong); color: var(--ink);
  border-radius: 6px; min-height: 44px;
  transition: border-color 200ms ease-out;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--accent); }
.field .help { font-family: var(--f-mono); font-size: 10px; color: var(--mute); letter-spacing: 0.1em; }

/* Cards (3 archetypes) */
.card-data {
  padding: 32px 28px; border: 1px solid var(--line); background: #fff;
  display: flex; flex-direction: column; gap: 14px; min-height: 200px;
}
.card-data .k { font-family: var(--f-mono); font-size: 10px; color: var(--accent); letter-spacing: 0.22em; text-transform: uppercase; }
.card-data .n { font-family: var(--f-display); font-weight: var(--display-weight); font-size: 56px; letter-spacing: var(--display-track); line-height: 1; }
.card-data .delta { font-family: var(--f-mono); font-size: 11px; color: var(--ok); letter-spacing: 0.1em; }
.card-data .delta.down { color: var(--danger); }

.card-editorial {
  padding: 32px 28px; border: 1px solid var(--line); background: #fff;
  display: flex; flex-direction: column; gap: 12px;
}
.card-editorial .eye { font-family: var(--f-mono); font-size: 10px; color: var(--accent); letter-spacing: 0.22em; text-transform: uppercase; }
.card-editorial h4 { font-family: var(--f-display); font-weight: var(--display-weight); font-size: 22px; letter-spacing: var(--display-track); margin: 0; }
.card-editorial p { font-size: 14px; color: var(--mute); margin: 0; }
.card-editorial .more { font-family: var(--f-mono); font-size: 11px; color: var(--accent); letter-spacing: 0.18em; text-transform: uppercase; margin-top: auto; }

.card-product {
  border: 1px solid var(--line); background: #fff;
  display: flex; flex-direction: column;
}
.card-product .shot {
  background: var(--bg-deep); aspect-ratio: 4/3;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-mono); font-size: 10px; color: var(--mute); letter-spacing: 0.22em; text-transform: uppercase;
}
.card-product .body { padding: 20px 22px; display: flex; flex-direction: column; gap: 6px; }
.card-product .name { font-family: var(--f-display); font-weight: var(--display-weight); font-size: 18px; letter-spacing: var(--display-track); }
.card-product .price { font-family: var(--f-mono); font-size: 12px; color: var(--accent); letter-spacing: 0.12em; }

/* Pills / badges */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--line-strong); color: var(--ink);
}
.pill.accent { border-color: var(--accent); color: var(--accent); background: var(--accent-ghost); }
.pill.ok { border-color: var(--ok); color: var(--ok); }
.pill.danger { border-color: var(--danger); color: var(--danger); }
.pill.solid { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* Tables */
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th, .tbl td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.tbl th { font-family: var(--f-mono); font-size: 10px; color: var(--accent); letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500; }
.tbl td { color: var(--ink-soft); }
.tbl td .mono { color: var(--mute); }

/* Modal preview */
.modal-preview {
  border: 1px solid var(--line); background: var(--bg-deep);
  padding: 32px; display: flex; justify-content: center;
}
.modal-card {
  background: #fff; border: 1px solid var(--line);
  padding: 28px 28px 24px; max-width: 360px; width: 100%;
  display: flex; flex-direction: column; gap: 12px;
}
.modal-card .eye { font-family: var(--f-mono); font-size: 10px; color: var(--accent); letter-spacing: 0.22em; text-transform: uppercase; }
.modal-card h4 { font-family: var(--f-display); font-weight: var(--display-weight); font-size: 22px; letter-spacing: var(--display-track); margin: 0; }
.modal-card p { font-size: 14px; color: var(--mute); margin: 0; }
.modal-card .row { display: flex; gap: 10px; margin-top: 8px; }

/* Toasts */
.toast {
  display: inline-flex; gap: 10px; align-items: center;
  padding: 12px 18px; border-radius: 8px;
  background: var(--ink); color: var(--paper);
  font-family: var(--f-body); font-size: 14px;
}
.toast .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.toast.warn .dot { background: #EAB308; }
.toast.danger .dot { background: var(--danger); }

/* ============================================================ KPI grid (4-tile) */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line-strong); border: 1px solid var(--line-strong); }
@media (max-width: 800px) { .kpi-grid { grid-template-columns: 1fr 1fr; } }
.kpi {
  background: var(--bg);
  padding: 36px 28px; min-height: 180px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.kpi .k { font-family: var(--f-mono); font-size: 10px; color: var(--accent); letter-spacing: 0.22em; text-transform: uppercase; }
.kpi .n { font-family: var(--f-display); font-weight: var(--display-weight); font-size: 56px; letter-spacing: var(--display-track); line-height: 1; }
.kpi .meta { font-family: var(--f-mono); font-size: 10px; color: var(--mute); letter-spacing: 0.18em; text-transform: uppercase; }

/* ============================================================ PULL QUOTE */
.pullquote {
  padding: 80px 20px; text-align: center;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  margin: 60px 0 20px;
}
.pullquote .mark-top, .pullquote .mark-bottom {
  width: 80px; height: 1px; background: var(--accent); margin: 0 auto 30px;
}
.pullquote .mark-bottom { margin: 30px auto 0; }
.pullquote .q {
  font-family: var(--f-display);
  font-size: clamp(28px, 4.6vw, 56px);
  font-weight: var(--display-weight);
  line-height: 1.1; letter-spacing: var(--display-track);
  max-width: 24ch; margin: 0 auto; color: var(--ink);
}
.pullquote .q em { color: var(--accent); font-style: normal; }
.pullquote .attr {
  margin-top: 30px;
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--accent);
}

/* ============================================================ DO / DONT */
.dd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; }
@media (max-width: 700px) { .dd-grid { grid-template-columns: 1fr; } }
.dd {
  border: 1px solid var(--line); background: #fff;
  padding: 24px; display: flex; flex-direction: column; gap: 10px;
  min-height: 180px;
}
.dd .badge {
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px; align-self: flex-start;
}
.dd.good .badge { color: var(--ok); border: 1px solid var(--ok); }
.dd.bad .badge { color: var(--danger); border: 1px solid var(--danger); }
.dd h4 { font-family: var(--f-display); font-weight: var(--display-weight); font-size: 20px; letter-spacing: var(--display-track); margin: 0; }
.dd p { font-size: 14px; color: var(--mute); margin: 0; max-width: none; }
.dd .ex {
  font-family: var(--f-mono); font-size: 12px;
  background: var(--bg-deep); padding: 10px 12px; border-left: 2px solid var(--ink);
  color: var(--ink-soft);
}
.dd.bad .ex { border-left-color: var(--danger); }
.dd.good .ex { border-left-color: var(--ok); }

/* ============================================================ REFERENCE SHELF */
.shelf { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 24px; }
@media (max-width: 900px) { .shelf { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .shelf { grid-template-columns: 1fr; } }
.shelf-card { border: 1px solid var(--line); background: #fff; padding: 22px 20px 24px; display: flex; flex-direction: column; gap: 8px; min-height: 220px; }
.shelf-card .num { font-family: var(--f-mono); font-size: 10px; color: var(--accent); letter-spacing: 0.22em; }
.shelf-card h4 { font-family: var(--f-display); font-weight: var(--display-weight); font-size: 22px; letter-spacing: var(--display-track); margin: 0; }
.shelf-card p { font-size: 13.5px; color: var(--mute); margin: 0; }
.shelf-card .takeaway { margin-top: auto; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); }

/* ============================================================ AI panel */
.ai-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; }
@media (max-width: 800px) { .ai-grid { grid-template-columns: 1fr; } }
.ai-tile {
  border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
  padding: 28px; display: flex; flex-direction: column; gap: 10px;
}
.ai-tile .k { font-family: var(--f-mono); font-size: 10px; color: var(--paper); opacity: 0.6; letter-spacing: 0.22em; text-transform: uppercase; }
.ai-tile h4 { color: var(--paper); font-family: var(--f-display); font-weight: var(--display-weight); font-size: 22px; letter-spacing: var(--display-track); margin: 0; }
.ai-tile p { color: rgba(244,241,236,0.65); font-size: 14px; margin: 0; }
.ai-tile a.cta {
  align-self: flex-start; margin-top: auto;
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--paper);
  border-bottom: 1px solid rgba(244,241,236,0.4);
  padding-bottom: 2px;
}
.ai-tile a.cta:hover { color: var(--accent); border-bottom-color: var(--accent); }

pre.code {
  font-family: var(--f-mono); font-size: 12.5px;
  background: var(--ink); color: var(--paper);
  padding: 18px 20px; border-radius: 6px;
  overflow-x: auto; margin-top: 16px; line-height: 1.55;
}

/* ============================================================ IMAGERY */
.img-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 24px; }
@media (max-width: 700px) { .img-grid { grid-template-columns: 1fr 1fr; } }
.img-tile {
  aspect-ratio: 1; background: var(--bg-deep);
  border: 1px solid var(--line);
  display: flex; align-items: flex-end; padding: 14px;
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--mute);
  position: relative;
}
.img-tile.flash { background: linear-gradient(135deg, #d9d3c8, #f4f1ec); }
.img-tile.headshot { background: linear-gradient(180deg, #2b2926, #6a655c); color: rgba(244,241,236,0.7); }
.img-tile.product { background: #fff; }
.img-tile.avoid { background: repeating-linear-gradient(45deg, var(--danger-soft, rgba(200,64,63,0.08)), var(--danger-soft, rgba(200,64,63,0.08)) 8px, transparent 8px, transparent 16px), var(--bg-deep); color: var(--danger); }

/* ============================================================ FOOTER */
.foot {
  max-width: var(--max); margin: 0 auto;
  padding: 60px var(--gutter) 80px;
  display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap;
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--mute);
  border-top: 1px solid var(--line);
}
.foot a { color: var(--mute); border-bottom: 1px solid transparent; transition: all 200ms ease-out; }
.foot a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.foot .brand { color: var(--ink); }

/* ============================================================ UTIL */
.spacer-32 { height: 32px; }
.spacer-60 { height: 60px; }
.copy-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 18px; }
.copy-row code { font-family: var(--f-mono); font-size: 12px; background: var(--bg-deep); padding: 6px 10px; border-radius: 4px; color: var(--ink); }

/* ============================================================ SLIDE TEMPLATE (deck) */
.slide {
  width: 1920px; height: 1080px; padding: 120px 140px;
  background: var(--paper); color: var(--ink);
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative;
  font-family: var(--f-body);
}
.slide .label {
  font-family: var(--f-mono); font-size: 18px;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent);
}
.slide .num { position: absolute; top: 60px; right: 140px; font-family: var(--f-mono); font-size: 18px; color: var(--mute); letter-spacing: 0.3em; }
.slide h1 { font-size: 180px; line-height: 0.9; max-width: 22ch; }
.slide h2 { font-size: 120px; margin: 0; line-height: 0.92; }
.slide .lead { font-size: 38px; max-width: 32ch; }
.slide .foot-row {
  display: flex; justify-content: space-between; align-items: flex-end;
  font-family: var(--f-mono); font-size: 16px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--mute);
}
.slide.cover { background: var(--paper); }
.slide.cover h1 em { color: var(--accent); font-style: normal; }
.slide.ink { background: var(--ink); color: var(--paper); }
.slide.ink h1, .slide.ink h2 { color: var(--paper); }
.slide.ink .label { color: var(--accent); }
.slide.ink .foot-row { color: rgba(244,241,236,0.6); }
.slide.accent { background: var(--accent); color: #fff; }
.slide.accent h1, .slide.accent h2 { color: #fff; }
.slide.accent .label, .slide.accent .foot-row { color: rgba(255,255,255,0.8); }

.slide .swatch-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px; }
.slide .swatch-row .sw { display: flex; flex-direction: column; gap: 12px; }
.slide .swatch-row .chip { height: 220px; border-radius: 6px; }
.slide .swatch-row .name { font-family: var(--f-display); font-weight: 900; font-size: 28px; letter-spacing: -0.04em; }
.slide .swatch-row .hex { font-family: var(--f-mono); font-size: 16px; color: var(--mute); letter-spacing: 0.12em; }

/* AI agent banner on cover */
.ai-banner{
  position:absolute; left:60px; right:60px; bottom:140px;
  display:flex; align-items:center; gap:18px;
  padding:18px 24px;
  background:var(--ink); color:var(--paper);
  text-decoration:none;
  border-radius:0;
  transition:background 200ms ease-out;
}
.ai-banner:hover{ background:var(--accent); }
.ai-banner-tag{
  font-family:var(--mono); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase;
  padding:6px 10px; border:1px solid rgba(244,241,236,.4);
  border-radius:999px;
}
.ai-banner-text{
  flex:1;
  font-family:var(--display); font-weight:600; font-size:18px;
  letter-spacing:-.01em;
}
.ai-banner-arrow{
  font-family:var(--display); font-size:24px; font-weight:900;
}
@media (max-width:740px){
  .ai-banner{ left:24px; right:24px; bottom:90px; padding:14px 16px; gap:12px; }
  .ai-banner-text{ font-size:15px; }
}

/* Start + check pages */
.page{
  max-width:920px; margin:0 auto;
  padding:120px 60px 160px;
}
.page .eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--mute);
  margin-bottom:24px;
}
.page h1{
  font-family:var(--display); font-weight:900;
  font-size:clamp(40px,7vw,88px); line-height:.92; letter-spacing:-.04em;
  margin:0 0 32px;
}
.page .lead{
  font-family:var(--display); font-weight:500;
  font-size:clamp(20px,2vw,26px); line-height:1.4;
  color:var(--ink); margin:0 0 56px; max-width:680px;
}
.page h2{
  font-family:var(--display); font-weight:900;
  font-size:clamp(28px,3.6vw,44px); line-height:1; letter-spacing:-.03em;
  margin:80px 0 24px;
}
.page p{ font-size:16px; line-height:1.6; color:var(--ink); margin:0 0 16px; max-width:680px; }
.page ol, .page ul{ font-size:16px; line-height:1.7; color:var(--ink); max-width:680px; padding-left:22px; }
.page li{ margin-bottom:10px; }

.prompt-box{
  position:relative;
  background:var(--ink); color:var(--paper);
  padding:36px 40px 28px;
  font-family:var(--mono-soft, "JetBrains Mono", monospace);
  font-size:14px; line-height:1.7;
  white-space:pre-wrap; word-break:break-word;
  margin:0 0 24px;
  border-radius:0;
}
.prompt-box .copy-btn{
  position:absolute; top:16px; right:16px;
  padding:8px 14px;
  background:var(--paper); color:var(--ink);
  font-family:var(--mono); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase;
  border:none; cursor:pointer; border-radius:999px;
  transition:background 200ms ease-out, color 200ms ease-out;
}
.prompt-box .copy-btn:hover{ background:var(--accent); color:var(--paper); }
.prompt-box .copy-btn.copied{ background:var(--ok); color:var(--paper); }

.check-grid{ display:grid; grid-template-columns:1fr; gap:16px; margin-top:24px; }
.check-input{
  width:100%;
  min-height:280px;
  padding:20px;
  font-family:var(--mono-soft,"JetBrains Mono",monospace);
  font-size:13px; line-height:1.6;
  background:#fff; color:var(--ink);
  border:1px solid var(--line-strong); border-radius:6px;
  resize:vertical;
}
.check-input:focus{ outline:2px solid var(--accent); outline-offset:2px; }
.check-actions{ display:flex; gap:12px; flex-wrap:wrap; }
.btn-primary{
  padding:14px 26px; min-height:44px;
  background:var(--ink); color:var(--paper);
  font-family:var(--mono); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase;
  border:none; cursor:pointer; border-radius:999px;
  transition:background 200ms ease-out;
}
.btn-primary:hover{ background:var(--accent); }
.btn-ghost{
  padding:14px 22px; min-height:44px;
  background:transparent; color:var(--ink);
  font-family:var(--mono); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase;
  border:1px solid var(--line-strong); cursor:pointer; border-radius:999px;
}
.results{ margin-top:40px; }
.result-row{
  display:flex; align-items:flex-start; gap:14px;
  padding:14px 0; border-top:1px solid var(--line);
  font-size:15px; line-height:1.5;
}
.result-row:last-child{ border-bottom:1px solid var(--line); }
.result-status{
  font-family:var(--mono); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase;
  padding:4px 10px; border-radius:999px;
  flex-shrink:0; min-width:64px; text-align:center;
}
.result-pass{ background:var(--ok); color:var(--paper); }
.result-fail{ background:var(--danger); color:var(--paper); }
.result-warn{ background:#E0A106; color:var(--ink); }
.result-rule{ font-weight:600; }
.result-detail{ color:var(--mute); font-size:13px; margin-top:4px; }
.score-card{
  padding:32px;
  background:var(--ink); color:var(--paper);
  margin-bottom:32px;
}
.score-card .score{
  font-family:var(--display); font-weight:900;
  font-size:88px; line-height:.92; letter-spacing:-.04em;
}
.score-card .score-label{
  font-family:var(--mono); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:rgba(244,241,236,.6);
  margin-bottom:8px;
}
.score-card.pass .score{ color:#7FD99F; }
.score-card.fail .score{ color:#FF8A88; }
@media (max-width:740px){
  .page{ padding:80px 24px 100px; }
  .prompt-box{ padding:24px 20px; font-size:12.5px; }
}