/* GENERATED by skills/site-build — do not edit. Sources: design/tokens.css (single
   token source) + design/site-core.css (Claude Design bundle) + design/site-ext.css. */
/* ============================================================
   Daily AI Agents — design tokens
   Built FROM the existing brand: logo glow #C0F0F0, logo shadow
   #104060, field #000–#0A0A0A (meta theme-color).
   10 color tokens · 6 type sizes · 8px spatial rhythm.
   ============================================================ */

:root {
  /* ---- color · 10 tokens ---- */
  --bg-0: #0A0A0A;                       /* page */
  --bg-1: #101214;                       /* raised surface */
  --bg-2: #16191B;                       /* inset / chips */
  --line: #212528;                       /* hairline borders */
  --text-1: #EDF2F4;                     /* primary */
  --text-2: #9AA6AC;                     /* secondary */
  --text-3: #7A868F;                     /* tertiary / labels — raised from bundle #5C676E (3.41:1) to clear WCAG AA 4.5:1 on every surface; flagged to Cooper */
  --accent: #8FD6EA;                     /* brand glow — surgical */
  --accent-deep: #0F3B54;                /* mark shadow — focus, fills */
  --accent-tint: rgba(143, 214, 234, 0.08); /* hover wash */

  /* ---- type · 3 voices ---- */
  --font-display: "Inter", "Helvetica Neue", sans-serif;
  --font-text: "Inter", "Helvetica Neue", sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", monospace;
  --font-editorial: "Source Serif 4", Georgia, serif;
  --w-display: 540;

  /* ---- type · 6 sizes, line heights on the 8px grid ---- */
  --fs-1: 13px; --lh-1: 16px;            /* mono labels, captions */
  --fs-2: 15px; --lh-2: 24px;            /* body, UI, nav */
  --fs-3: 18px; --lh-3: 24px;            /* leads, step titles */
  --fs-4: 24px; --lh-4: 32px;            /* card titles (H3) */
  --fs-5: 36px; --lh-5: 40px;            /* section titles (H2) */
  --fs-6: 64px; --lh-6: 72px;            /* hero (H1) */

  /* ---- space · 8px rhythm ---- */
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 32px;
  --s-5: 48px;
  --s-6: 64px;
  --s-7: 96px;
  --s-8: 128px;

  /* ---- shape & controls ---- */
  --r: 8px;
  --r-s: 4px;
  --ctl-s: 32px;                          /* compact control */
  --ctl-m: 40px;                          /* default control */
}

/* ---- derived interaction tokens (values lifted verbatim from the bundle's site.css
       hover states — promoted to tokens so zero hex lives outside this file) ---- */
:root {
  --accent-bright: #A6E0F0;   /* dai-btn--primary:hover */
  --line-hover: #32383C;      /* dai-card:hover border */
}
/* ============================================================
   Daily AI Agents — site styles, built entirely on tokens.css
   Every vertical measure sits on the 8px grid.
   ============================================================ */

.dai-page {
  container-type: inline-size;
  container-name: page;
  background: var(--bg-0);
  color: var(--text-1);
  font-family: var(--font-text);
  font-size: var(--fs-2);
  line-height: var(--lh-2);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.dai-page *, .dai-page *::before, .dai-page *::after { box-sizing: border-box; }
.dai-page a { text-decoration: none; color: inherit; }
.dai-page h1, .dai-page h2, .dai-page h3, .dai-page p { margin: 0; }
.dai-page img { display: block; }

.dai-wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--s-4); }

/* ---- voices ---- */
.dai-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  line-height: var(--lh-1);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}
.dai-display {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  letter-spacing: -0.015em;
  color: var(--text-1);
}

/* ---- logo: black-field JPG composited onto any surface ---- */
.dai-mark { mix-blend-mode: screen; }

/* ---- buttons & links ---- */
.dai-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  height: var(--ctl-m);
  padding: 0 20px;
  border-radius: var(--r);
  font-family: var(--font-text);
  font-size: var(--fs-2);
  line-height: var(--lh-2);
  font-weight: 500;
  white-space: nowrap;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.dai-btn--primary { background: var(--accent); color: var(--bg-0); }
.dai-btn--primary:hover { background: var(--accent-bright); }
.dai-btn--ghost { border: 1px solid var(--line); color: var(--text-1); }
.dai-btn--ghost:hover { border-color: var(--text-3); background: var(--accent-tint); }
.dai-btn--sm { height: var(--ctl-s); padding: 0 12px; font-size: var(--fs-1); line-height: var(--lh-1); }
.dai-btn .dai-icon { flex: none; }

.dai-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-size: var(--fs-2);
  line-height: var(--lh-2);
  font-weight: 500;
  color: var(--text-1);
  transition: color 120ms ease;
}
.dai-link .dai-icon { color: var(--text-3); transition: color 120ms ease, transform 120ms ease; }
.dai-link:hover { color: var(--accent); }
.dai-link:hover .dai-icon { color: var(--accent); transform: translateX(2px); }

/* ---- status strip ---- */
.dai-status {
  border-bottom: 1px solid var(--line);
}
.dai-status .dai-wrap {
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
}
.dai-status .dai-icon-dot { color: var(--accent); filter: drop-shadow(0 0 4px var(--accent)); }

/* ---- header ---- */
.dai-header { border-bottom: 1px solid var(--line); }
.dai-header .dai-wrap {
  height: 64px;
  display: flex;
  align-items: center;
  gap: var(--s-4);
}
.dai-brand { display: inline-flex; align-items: center; gap: 12px; }
.dai-brand img { width: 28px; height: 28px; border-radius: var(--r-s); }
.dai-brand span { font-size: var(--fs-2); font-weight: 500; letter-spacing: -0.01em; }
.dai-nav { display: flex; align-items: center; gap: var(--s-4); margin-left: auto; }
.dai-nav a { color: var(--text-2); font-size: var(--fs-2); transition: color 120ms ease; }
.dai-nav a:hover { color: var(--text-1); }

/* ============================================================
   HERO A — typographic
   ============================================================ */
.dai-heroA { padding: var(--s-7) 0 0; }
.dai-heroA .dai-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}
.dai-meta-left, .dai-meta-right { display: inline-flex; align-items: center; gap: 12px; }
.dai-meta-left img { width: 40px; height: 40px; border-radius: var(--r-s); }
.dai-meta-right .dai-icon-dot { color: var(--accent); filter: drop-shadow(0 0 4px var(--accent)); }

.dai-h1 {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: var(--fs-6);
  line-height: var(--lh-6);
  letter-spacing: -0.025em;
  max-width: 880px;
  margin-top: var(--s-5);
  text-wrap: balance;
}
.dai-h1 em { font-style: normal; color: var(--text-2); }
.dai-page[data-headline="uniform"] .dai-h1 em { color: inherit; }

.dai-sub {
  margin-top: var(--s-3);
  font-size: var(--fs-3);
  line-height: var(--lh-3);
  color: var(--text-2);
  max-width: 560px;
  text-wrap: pretty;
}
.dai-ctas { margin-top: 40px; display: flex; align-items: center; gap: var(--s-2); }

/* index links */
.dai-index {
  margin-top: var(--s-7);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.dai-index a {
  padding: var(--s-3) var(--s-3) var(--s-3) 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.dai-index a + a { border-left: 1px solid var(--line); padding-left: var(--s-3); }
.dai-index .dai-index-name {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  font-size: var(--fs-2);
  font-weight: 500;
}
.dai-index .dai-index-name .dai-icon { color: var(--text-3); opacity: 0; transform: translateX(-4px); transition: opacity 120ms ease, transform 120ms ease; margin-left: auto; }
.dai-index a:hover .dai-index-name .dai-icon { opacity: 1; transform: none; color: var(--accent); }
.dai-index .dai-index-desc { color: var(--text-2); font-size: var(--fs-2); line-height: var(--lh-2); }

/* ============================================================
   HERO B — structural
   ============================================================ */
.dai-heroB { padding: 80px 0 0; }
.dai-heroB .dai-heroB-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--s-6);
  align-items: center;
}
.dai-heroB .dai-h1 { margin-top: 0; }
.dai-panel {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background:
    linear-gradient(var(--accent-tint) 1px, transparent 1px) 0 0 / 100% 64px,
    linear-gradient(90deg, var(--accent-tint) 1px, transparent 1px) 0 0 / 64px 100%,
    var(--bg-1);
  display: flex;
  flex-direction: column;
  min-height: 480px;
  position: relative;
}
.dai-panel-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-2);
}
.dai-panel-row--top { border-bottom: 1px solid var(--line); background: var(--bg-1); border-radius: var(--r) var(--r) 0 0; }
.dai-panel-row--bottom { border-top: 1px solid var(--line); background: var(--bg-1); border-radius: 0 0 var(--r) var(--r); margin-top: auto; }
.dai-panel-row .dai-icon-dot { color: var(--accent); filter: drop-shadow(0 0 4px var(--accent)); }
.dai-panel-live { display: inline-flex; align-items: center; gap: var(--s-1); }
.dai-panel-center { flex: 1; display: flex; align-items: center; justify-content: center; padding: var(--s-4); position: relative; }
.dai-panel-center img { width: 280px; height: auto; }
.dai-cross { position: absolute; width: 9px; height: 9px; color: var(--text-3); }
.dai-cross::before, .dai-cross::after { content: ""; position: absolute; background: currentColor; }
.dai-cross::before { left: 4px; top: 0; width: 1px; height: 9px; }
.dai-cross::after { top: 4px; left: 0; height: 1px; width: 9px; }
.dai-cross--tl { top: 12px; left: 12px; }
.dai-cross--tr { top: 12px; right: 12px; }
.dai-cross--bl { bottom: 12px; left: 12px; }
.dai-cross--br { bottom: 12px; right: 12px; }

/* ============================================================
   TRUST STRIP — the handshake, not the pitch
   ============================================================ */
.dai-trust { margin-top: var(--s-7); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-1); }
.dai-trust .dai-wrap {
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
  padding-top: var(--s-1);
  padding-bottom: var(--s-1);
}
.dai-trust-item { display: inline-flex; align-items: baseline; gap: var(--s-1); }
.dai-trust-item strong {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-2);
  line-height: var(--lh-2);
  font-weight: 500;
  color: var(--text-1);
}
.dai-trust-item span { font-family: var(--font-mono); font-size: var(--fs-1); line-height: var(--lh-1); letter-spacing: 0.04em; color: var(--text-3); }
.dai-trust-link {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  line-height: var(--lh-1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
  transition: color 120ms ease;
}
.dai-trust-link:hover { color: var(--accent); }

/* ============================================================
   SECTIONS
   ============================================================ */
.dai-section { padding: var(--sect-pad, var(--s-7)) 0; }
.dai-section--band { background: var(--bg-1); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.dai-kicker { display: flex; align-items: center; gap: var(--s-2); }
.dai-kicker::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.dai-h2 {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: var(--fs-5);
  line-height: var(--lh-5);
  letter-spacing: -0.02em;
  margin-top: var(--s-3);
  max-width: 720px;
  text-wrap: balance;
}
.dai-section-sub { margin-top: var(--s-2); font-size: var(--fs-3); line-height: var(--lh-3); color: var(--text-2); max-width: 640px; text-wrap: pretty; }

/* ---- services grid ---- */
.dai-services { margin-top: var(--s-5); display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s-2); }
.dai-card {
  grid-column: span 2;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  transition: border-color 120ms ease;
}
.dai-card:hover { border-color: var(--line-hover); }
.dai-card--wide { grid-column: span 3; }
.dai-card .dai-card-label { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.dai-chip {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 var(--s-1);
  border-radius: var(--r-s);
  background: var(--bg-2);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  line-height: var(--lh-1);
  letter-spacing: 0.04em;
  color: var(--text-2);
  white-space: nowrap;
}
.dai-h3 { font-family: var(--font-display); font-weight: var(--w-display); font-size: var(--fs-4); line-height: var(--lh-4); letter-spacing: -0.015em; margin-top: var(--s-2); }
.dai-card-body { margin-top: var(--s-1); color: var(--text-2); text-wrap: pretty; }
.dai-card-foot { margin-top: auto; padding-top: var(--s-3); }

.dai-checks { margin: var(--s-3) 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--s-1); }
.dai-checks li { display: flex; align-items: flex-start; gap: 12px; color: var(--text-2); }
.dai-checks .dai-icon { color: var(--accent); margin-top: 4px; flex: none; }

.dai-flow { margin-top: var(--s-3); border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-2); padding: var(--s-2); }
.dai-flow-row { margin-top: var(--s-2); display: flex; align-items: stretch; gap: var(--s-1); }
.dai-flow-node { flex: 1; background: var(--bg-0); border: 1px solid var(--line); border-radius: var(--r-s); padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.dai-flow-node strong { font-size: var(--fs-2); line-height: var(--lh-1); font-weight: 500; color: var(--text-1); }
.dai-flow-node span { font-family: var(--font-mono); font-size: var(--fs-1); line-height: var(--lh-1); color: var(--text-3); }
.dai-flow-arrow { align-self: center; color: var(--text-3); flex: none; }
.dai-flow-note { margin-top: var(--s-2); color: var(--text-3); font-size: var(--fs-2); line-height: var(--lh-2); }

.dai-minis { margin-top: var(--s-3); display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--s-1); }
.dai-mini { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-s); padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.dai-mini span { font-family: var(--font-mono); font-size: var(--fs-1); line-height: var(--lh-1); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); }
.dai-mini strong { font-weight: 500; font-size: var(--fs-2); line-height: var(--lh-2); color: var(--text-1); }

.dai-list { margin: var(--s-2) 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--s-1); }
.dai-list li { display: flex; align-items: flex-start; gap: 12px; color: var(--text-2); }
.dai-list li::before { content: ""; width: 4px; height: 4px; border-radius: 2px; background: var(--text-3); margin-top: 10px; flex: none; }
.dai-fine { margin-top: var(--s-2); color: var(--text-3); }

/* ---- process ---- */
.dai-steps { margin-top: var(--s-5); display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--s-4); }
.dai-step { border-top: 1px solid var(--line); padding-top: var(--s-3); }
.dai-step .dai-step-num { font-family: var(--font-mono); font-size: var(--fs-1); line-height: var(--lh-1); letter-spacing: 0.06em; color: var(--accent); }
.dai-step h3 { font-family: var(--font-display); font-weight: var(--w-display); font-size: var(--fs-3); line-height: var(--lh-3); margin-top: var(--s-2); }
.dai-step p { margin-top: var(--s-1); color: var(--text-2); text-wrap: pretty; }

/* ---- difference ---- */
.dai-diff { margin-top: var(--s-5); display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
.dai-diff-cell { border-left: 1px solid var(--line); padding-left: var(--s-3); }
.dai-diff-tags { display: flex; align-items: center; gap: var(--s-1); }
.dai-diff-tags .dai-tag-hl { color: var(--accent); }
.dai-diff-cell h3 { font-family: var(--font-display); font-weight: var(--w-display); font-size: var(--fs-3); line-height: var(--lh-3); margin-top: var(--s-2); }
.dai-diff-cell p { margin-top: var(--s-1); color: var(--text-2); text-wrap: pretty; }

/* ---- closing CTA ---- */
.dai-cta { padding: var(--s-8) 0; text-align: center; }
.dai-cta .dai-kicker { justify-content: center; }
.dai-cta .dai-kicker::after { display: none; }
.dai-cta .dai-h2, .dai-cta .dai-section-sub { margin-left: auto; margin-right: auto; }
.dai-cta .dai-ctas { justify-content: center; }

/* ---- footer ---- */
.dai-footer { border-top: 1px solid var(--line); padding: var(--s-6) 0 var(--s-4); }
.dai-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s-4); }
.dai-footer-tag { margin-top: var(--s-2); color: var(--text-3); }
.dai-footer-col span { display: block; }
.dai-footer-col ul { margin: var(--s-2) 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--s-1); }
.dai-footer-col a { color: var(--text-2); transition: color 120ms ease; }
.dai-footer-col a:hover { color: var(--text-1); }
.dai-footer-base {
  margin-top: var(--s-6);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
}
.dai-footer-base .dai-mono { text-transform: none; letter-spacing: 0.02em; }

/* ---- founder (company.html treatment) ---- */
.dai-founder { display: grid; grid-template-columns: 240px 1fr; gap: var(--s-5); align-items: center; }
.dai-founder img { width: 240px; height: 280px; object-fit: cover; border-radius: var(--r); border: 1px solid var(--line); }
.dai-founder-name { font-family: var(--font-display); font-weight: var(--w-display); font-size: var(--fs-5); line-height: var(--lh-5); letter-spacing: -0.02em; margin-top: var(--s-2); }
.dai-founder-role { margin-top: var(--s-1); }
.dai-founder-bio { margin-top: var(--s-3); font-size: var(--fs-3); line-height: var(--lh-3); color: var(--text-2); max-width: 520px; text-wrap: pretty; }

/* ============================================================
   MOBILE — container query, fires inside 375px artboards too
   ============================================================ */
@container page (max-width: 480px) {
  .dai-wrap { padding: 0 var(--s-3); }
  .dai-nav a:not(.dai-btn) { display: none; }
  .dai-header .dai-wrap { height: 56px; }

  .dai-heroA, .dai-heroB { padding-top: var(--s-6); }
  .dai-h1 { font-size: var(--fs-5); line-height: var(--lh-5); letter-spacing: -0.02em; margin-top: var(--s-4); }
  .dai-sub { font-size: var(--fs-2); line-height: var(--lh-2); margin-top: var(--s-2); }
  .dai-ctas { margin-top: var(--s-4); flex-direction: column; align-items: stretch; }
  .dai-ctas .dai-btn { width: 100%; }
  .dai-meta-left img { width: 32px; height: 32px; }
  .dai-meta-right span { display: none; }

  .dai-index { margin-top: var(--s-6); grid-template-columns: 1fr; }
  .dai-index a { padding: var(--s-2) 0; }
  .dai-index a + a { border-left: none; border-top: 1px solid var(--line); padding-left: 0; }

  .dai-heroB .dai-heroB-grid { grid-template-columns: 1fr; gap: var(--s-5); }
  .dai-heroB .dai-h1 { margin-top: var(--s-4); }
  .dai-panel { min-height: 320px; }
  .dai-panel-center img { width: 200px; }

  .dai-trust { margin-top: var(--s-6); }
  .dai-trust .dai-wrap { padding-top: var(--s-2); padding-bottom: var(--s-2); gap: var(--s-2) var(--s-3); }
  .dai-trust-link { margin-left: 0; flex-basis: 100%; }

  .dai-section { padding: var(--s-6) 0; }
  .dai-services { grid-template-columns: 1fr; }
  .dai-card, .dai-card--wide { grid-column: span 1; }
  .dai-h2 { font-size: var(--fs-4); line-height: var(--lh-4); }
  .dai-steps { grid-template-columns: 1fr; gap: var(--s-3); }
  .dai-diff { grid-template-columns: 1fr; gap: var(--s-3); }
  .dai-diff-cell { border-left: none; border-top: 1px solid var(--line); padding-left: 0; padding-top: var(--s-2); }
  .dai-cta { padding: var(--s-7) 0; }
  .dai-footer-grid { grid-template-columns: 1fr 1fr; }
  .dai-footer-base { flex-direction: column; align-items: flex-start; }
  .dai-founder { grid-template-columns: 1fr; }
  .dai-minis { grid-template-columns: 1fr; }
}
/* ============================================================
   site-ext.css — extensions on the bundle system, two layers:
   1) sub-page components (same dai-* idioms, tokens only)
   2) the craft layer (Cooper's FINAL DIRECTIVE, implemented
      exactly: hover/active/focus-visible, input focus, reveal,
      count-up, nav blur — all reduced-motion safe, all
      transform/opacity, zero layout shift)
   ============================================================ */

/* ---- bundle fix: `.dai-page a { color: inherit }` (0,1,1) outranks the button
   modifiers (0,1,0), washing primary-button text out to text-1 on the accent fill.
   Same-specificity re-assertions, values verbatim from the bundle: ---- */
.dai-page a.dai-btn--primary { color: var(--bg-0); }
.dai-page a.dai-btn--ghost { color: var(--text-1); }

/* ---- page scaffolding ---- */
.dai-page { min-height: 100vh; display: flex; flex-direction: column; }
.dai-main { flex: 1; }

/* ---- generic prose blocks for sub-pages ---- */
.dai-lead { margin-top: var(--s-3); font-size: var(--fs-3); line-height: var(--lh-3); color: var(--text-2); max-width: 640px; text-wrap: pretty; }
.dai-prose { margin-top: var(--s-3); color: var(--text-2); max-width: 640px; }
.dai-prose + .dai-prose { margin-top: var(--s-2); }
.dai-prose a, .dai-card-body a, .dai-fine a { color: var(--text-1); text-decoration: underline; text-underline-offset: 3px; transition: color 120ms ease; }
.dai-prose a:hover, .dai-card-body a:hover, .dai-fine a:hover { color: var(--accent); }

/* ---- writing index rows ---- */
.dai-entries { margin-top: var(--s-5); display: flex; flex-direction: column; }
.dai-entry { border-top: 1px solid var(--line); padding: var(--s-3) 0; display: flex; flex-direction: column; gap: var(--s-1); transition: background 120ms ease; }
.dai-entry:hover { background: var(--accent-tint); }
.dai-entry-meta { display: flex; align-items: center; gap: var(--s-2); }
.dai-entry h3 { font-family: var(--font-display); font-weight: var(--w-display); font-size: var(--fs-3); line-height: var(--lh-3); }
.dai-entry p { color: var(--text-2); max-width: 640px; }

/* ---- FAQ ---- */
.dai-faq { margin-top: var(--s-5); display: flex; flex-direction: column; gap: var(--s-4); max-width: 640px; }
.dai-faq h3 { font-family: var(--font-display); font-weight: var(--w-display); font-size: var(--fs-3); line-height: var(--lh-3); }
.dai-faq p { margin-top: var(--s-1); color: var(--text-2); }

/* ---- newsletter / form fields (focus feedback per directive) ---- */
.dai-input {
  height: var(--ctl-m);
  padding: 0 var(--s-2);
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--bg-1);
  color: var(--text-1);
  font-family: var(--font-text);
  font-size: var(--fs-2);
  transition: border-color 160ms ease-out, background 160ms ease-out, box-shadow 160ms ease-out;
}
.dai-input::placeholder { color: var(--text-3); }
.dai-input:hover { border-color: var(--text-3); }
.dai-input:focus { outline: none; border-color: var(--accent); background: var(--bg-2); box-shadow: 0 0 0 3px var(--accent-tint); }

/* ---- grid variants (classes, never inline styles — the container query must win on mobile) ---- */
.dai-minis--two { grid-template-columns: 1fr 1fr; max-width: 760px; }
.dai-diff--six { grid-template-columns: repeat(3, 1fr); }
.dai-steps--four { grid-template-columns: 1fr 1fr; }
.dai-code-line { white-space: normal; word-break: break-all; text-transform: none; letter-spacing: 0; font-size: var(--fs-1); }
@container page (max-width: 480px) {
  .dai-minis--two { grid-template-columns: 1fr; }
  .dai-diff--six { grid-template-columns: 1fr; }
  .dai-steps--four { grid-template-columns: 1fr; }
}

/* ============================================================
   CRAFT LAYER
   ============================================================ */

/* every interactive element: visible focus, designed active */
.dai-page a:focus-visible,
.dai-page button:focus-visible,
.dai-page .dai-input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-s);
}
.dai-btn:focus-visible { outline-offset: 3px; border-radius: var(--r); }
.dai-btn:active { transform: translateY(1px); }
.dai-btn--primary:active { background: var(--accent); }
.dai-link:active .dai-icon, .dai-trust-link:active .dai-icon { transform: translateX(3px); }
.dai-nav a, .dai-footer-col a, .dai-trust-link, .dai-entry, .dai-index a .dai-index-name { transition-timing-function: ease-out; }
.dai-btn, .dai-link, .dai-card { transition-timing-function: ease-out; transition-duration: 160ms; }

/* nav: quiet backdrop blur on scroll (JS toggles data-scrolled; sticky reserves
   its own space — zero layout shift) */
.dai-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg-0) 100%, transparent);
  transition: background 200ms ease-out, backdrop-filter 200ms ease-out;
}
.dai-page[data-scrolled] .dai-header {
  background: color-mix(in srgb, var(--bg-0) 78%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* sections fade-and-settle once on first view — JS adds .dai-reveal to candidates,
   then .is-in when they enter. Without JS nothing is hidden. Transform/opacity only. */
.dai-reveal { opacity: 0; transform: translateY(12px); transition: opacity 600ms ease-out, transform 600ms ease-out; will-change: opacity, transform; }
.dai-reveal.is-in { opacity: 1; transform: none; will-change: auto; }

/* count-up targets hold width via tabular-nums (already set on .dai-trust-item strong) */

/* ── the signature: agent-grid hero field ─────────────────── */
.dai-hero-host { position: relative; overflow: hidden; }
.dai-hero-content { position: relative; z-index: 1; }
.dai-field { position: absolute; inset: 0; z-index: 0; }
.dai-field canvas { display: block; width: 100%; height: 100%; }
/* static fallback — reduced-motion / mobile / low-power / no-JS all land here */
.dai-hero-host { background:
    radial-gradient(720px 360px at 18% -10%, var(--accent-tint), transparent 70%),
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--text-3) 22%, transparent) 1px, transparent 0);
  background-size: auto, 28px 28px; }
.dai-hero-host[data-field-live] { background: var(--bg-0); }

/* headline: single elegant reveal on first load (JS-gated; static without JS) */
/* 0.02 not 0: the headline is the LCP element — it must register as painted
   immediately; the reveal still reads as a fade-in */
[data-hero-reveal] .dai-h1,
[data-hero-reveal] .dai-sub,
[data-hero-reveal] .dai-ctas { opacity: 0.02; transform: translateY(10px); }
[data-hero-reveal].is-hero-in .dai-h1 { opacity: 1; transform: none; transition: opacity 600ms ease-out, transform 600ms ease-out; }
[data-hero-reveal].is-hero-in .dai-sub { opacity: 1; transform: none; transition: opacity 600ms ease-out 120ms, transform 600ms ease-out 120ms; }
[data-hero-reveal].is-hero-in .dai-ctas { opacity: 1; transform: none; transition: opacity 600ms ease-out 240ms, transform 600ms ease-out 240ms; }

@media (prefers-reduced-motion: reduce) {
  .dai-page *, .dai-page *::before, .dai-page *::after { transition: none !important; animation: none !important; }
  .dai-reveal { opacity: 1 !important; transform: none !important; }
  [data-hero-reveal] .dai-h1, [data-hero-reveal] .dai-sub, [data-hero-reveal] .dai-ctas { opacity: 1 !important; transform: none !important; }
  .dai-btn:active { transform: none; }
}