/* Foundry datasheet system - shared across all product sites.
   Lane: industrial specimen sheet, not SaaS landing. Dark workshop charcoal,
   one committed accent per product (set --accent* on :root per site),
   real numbers as imagery, honest-limitations as a first-class section. */

:root {
  --bg: oklch(0.16 0.008 55);
  --bg-deep: oklch(0.13 0.007 55);
  --surface: oklch(0.2 0.01 55);
  --surface-2: oklch(0.24 0.012 55);
  --line: oklch(0.32 0.012 55);
  --line-strong: oklch(0.42 0.014 55);

  --ink: oklch(0.95 0.006 65);
  --ink-mid: oklch(0.79 0.012 65);
  --ink-dim: oklch(0.67 0.014 65);

  /* per-site overrides */
  --accent: oklch(0.68 0.17 45);
  --accent-bright: oklch(0.76 0.18 48);
  --accent-ink: oklch(0.18 0.03 45);
  --accent-tint: oklch(0.68 0.17 45 / 0.12);

  --ok: oklch(0.78 0.15 155);
  --warn: oklch(0.82 0.13 90);

  --sans: "Archivo", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "Martian Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --step--1: clamp(0.78rem, 0.74rem + 0.2vw, 0.85rem);
  --step-0: clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem);
  --step-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem);
  --step-2: clamp(1.6rem, 1.4rem + 1vw, 2.2rem);
  --step-3: clamp(2.4rem, 2rem + 2.2vw, 3.6rem);
  --step-4: clamp(3.4rem, 2.6rem + 4vw, 5.6rem);

  --pad: clamp(20px, 4vw, 56px);
  --measure: 68ch;

  color-scheme: dark;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent-tint); }

h1, h2, h3 { line-height: 1.08; text-wrap: balance; margin: 0; }
p { text-wrap: pretty; }

a { color: var(--accent-bright); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }

code, pre, .mono { font-family: var(--mono); }

.num { font-variant-numeric: tabular-nums; }

/* ── shell ─────────────────────────────────────────────── */

.wrap { max-width: 1120px; margin: 0 auto; padding-inline: var(--pad); }

/* top strip: family breadcrumb, quiet */
.family {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px var(--pad);
  font-family: var(--mono);
  font-size: var(--step--1);
  color: var(--ink-dim);
  border-bottom: 1px solid var(--line);
}
.family a { color: var(--ink-dim); text-decoration: none; }
.family a:hover { color: var(--ink); }
.family .sep { opacity: 0.5; }
.family .gh { margin-left: auto; }

/* ── hero: specimen plate ──────────────────────────────── */

.hero {
  padding: clamp(48px, 9vw, 120px) 0 clamp(36px, 6vw, 72px);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(90rem 40rem at 15% -10%, var(--accent-tint), transparent 60%),
    var(--bg-deep);
}

.hero h1 {
  font-size: var(--step-4);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.hero .tag {
  margin: 18px 0 0;
  font-size: var(--step-2);
  font-weight: 500;
  color: var(--ink-mid);
  max-width: 26ch;
}

.hero .what {
  margin: 22px 0 0;
  max-width: var(--measure);
  color: var(--ink-mid);
}

.hero .cta-row { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }

.btn {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
}
.btn.primary { background: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { background: var(--accent-bright); color: var(--accent-ink); }
.btn.ghost { border: 1px solid var(--line-strong); color: var(--ink); }
.btn.ghost:hover { border-color: var(--accent); }

.hero-art { margin-top: clamp(30px, 6vw, 64px); }
.hero-art svg, .hero-art img { width: 100%; height: auto; display: block; border-radius: 12px; }

/* ── measured strip: the numbers ARE the marketing ─────── */

.measured {
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.measured .wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0;
}
.measured .cell {
  padding: 26px 22px;
  border-inline-start: 1px solid var(--line);
}
.measured .cell:first-child { border-inline-start: none; padding-inline-start: 0; }
.measured .v {
  font-family: var(--mono);
  font-size: var(--step-2);
  font-weight: 700;
  color: var(--accent-bright);
  font-variant-numeric: tabular-nums;
}
.measured .k { margin-top: 6px; color: var(--ink-dim); font-size: var(--step--1); }
.measured .src { color: var(--ink-dim); font-size: var(--step--1); padding: 0 0 18px; font-family: var(--mono); }

/* ── sections ──────────────────────────────────────────── */

section { padding: clamp(44px, 8vw, 96px) 0; border-bottom: 1px solid var(--line); }
section > .wrap > h2 { font-size: var(--step-3); font-weight: 750; letter-spacing: -0.02em; }
section .lede { max-width: var(--measure); color: var(--ink-mid); margin-top: 16px; }

.two-col { display: grid; grid-template-columns: minmax(280px, 5fr) minmax(300px, 7fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; } }

/* feature ledger: numbered only because it IS a sequence of what happens */
.ledger { margin: 34px 0 0; padding: 0; list-style: none; max-width: var(--measure); }
.ledger li { display: flex; gap: 18px; padding: 18px 0; border-top: 1px solid var(--line); }
.ledger li:first-child { border-top: none; }
.ledger .lk { font-family: var(--mono); color: var(--accent-bright); font-size: var(--step--1); padding-top: 4px; white-space: nowrap; }
.ledger b { font-weight: 650; }
.ledger p { margin: 4px 0 0; color: var(--ink-mid); }

/* ── terminal / code frames (real output as imagery) ───── */

.frame {
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.frame .bar {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: var(--step--1);
  color: var(--ink-dim);
}
.frame pre {
  margin: 0;
  padding: 18px 20px;
  overflow-x: auto;
  font-size: clamp(0.72rem, 0.66rem + 0.3vw, 0.85rem);
  line-height: 1.65;
  color: var(--ink-mid);
}
.frame .hl { color: var(--accent-bright); }
.frame .ok { color: var(--ok); }
.frame .dim { color: var(--ink-dim); }

.shot { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.shot img { width: 100%; height: auto; display: block; }
.shot figcaption { padding: 12px 16px; font-family: var(--mono); font-size: var(--step--1); color: var(--ink-dim); border-top: 1px solid var(--line); }
figure.shot { margin: 0; }

/* ── the honest plate: limitations, stated plainly ─────── */

.honest { background: var(--bg-deep); }
.honest h2 { font-size: var(--step-2); }
.honest ul { margin: 20px 0 0; padding-left: 1.2em; max-width: var(--measure); color: var(--ink-mid); }
.honest li { margin-top: 8px; }
.honest .why { margin-top: 22px; font-family: var(--mono); font-size: var(--step--1); color: var(--ink-dim); max-width: var(--measure); }

/* ── footer ────────────────────────────────────────────── */

footer { padding: 40px 0 60px; color: var(--ink-dim); font-size: var(--step--1); }
footer .wrap { display: flex; gap: 20px; flex-wrap: wrap; align-items: baseline; }
footer nav { display: flex; gap: 14px; flex-wrap: wrap; font-family: var(--mono); }
footer a { color: var(--ink-dim); }

/* ── motion: one deliberate entrance, nothing scattered ── */

@media (prefers-reduced-motion: no-preference) {
  .hero h1, .hero .tag, .hero .what, .hero .cta-row, .hero-art {
    animation: rise 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .hero .tag { animation-delay: 70ms; }
  .hero .what { animation-delay: 130ms; }
  .hero .cta-row { animation-delay: 190ms; }
  .hero-art { animation-delay: 260ms; }
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } }
}