/* ============================================================================
   OrthoVisible Design System  ·  v1.1  ·  2026-06-19
   One source of truth for OrthoVisible web surfaces (site, snapshot, audit,
   dashboard, case study). Grounded in .agents/brand-context.md.
   Outreach emails are PLAIN TEXT by design and do NOT use this CSS — if we ever
   ship HTML email, build a separate table-based, var()-free subset.

   ART DIRECTION — "Clinical instrument, not brochure."
   A diagnostic readout: calm, precise, numbers-forward, reproducible. Paper-white,
   sharp-edged (zero rounding, no exceptions), one decisive teal, EVERY NUMBER in
   mono, data colored only where it carries meaning (green=strength, amber=watch,
   red=absent). Depth from hairlines and inset panels — not trendy drop shadows.
   No entrance animation on data; a lab result is just *there*. (v1.1 hardened via
   a multi-model design critique: contrast, focus states, mono numerals, de-slop.)
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=IBM+Plex+Mono:wght@400;500;600;700&family=Instrument+Sans:wght@400;500;600&display=swap');

:root {
  /* — surface & ink — */
  --ov-paper: #faf8f4; --ov-paper-2: #f3f0e9; --ov-white: #fff;
  --ov-ink: #16211f; --ov-ink-soft: #5a6b67; --ov-rule: #ddd7cb;

  /* — the one accent — */
  --ov-teal: #0e7490; --ov-teal-deep: #0a5560; --ov-teal-wash: rgba(14,116,144,.07);

  /* — semantic data colors (darkened in v1.1 for WCAG on small text) — */
  --ov-good: #126e34;  --ov-good-wash: rgba(18,110,52,.09);
  --ov-watch: #a04a08; --ov-watch-wash: rgba(160,74,8,.09);
  --ov-absent: #b3322b; --ov-absent-wash: rgba(179,50,43,.07);
  --ov-gold: #875a0a;  --ov-gold-wash: rgba(135,90,10,.09);

  /* — type — */
  --ov-serif: 'Fraunces', Georgia, serif;        /* voice: headlines, prose, findings */
  --ov-mono: 'IBM Plex Mono', monospace;         /* EVERY number, labels, chrome */
  --ov-sans: 'Instrument Sans', -apple-system, 'Segoe UI', sans-serif; /* body prose */

  --ov-fs-micro: 12px; --ov-fs-xs: 12px; --ov-fs-sm: 13px; --ov-fs-base: 15px;
  --ov-fs-md: 17px; --ov-fs-btn: 14.5px; --ov-fs-lg: 1.2rem; --ov-fs-xl: 1.55rem;
  --ov-fs-2xl: 2.1rem; --ov-fs-3xl: 2.7rem;

  /* — spacing (4px base) — */
  --ov-1: 4px; --ov-2: 8px; --ov-3: 12px; --ov-4: 16px; --ov-5: 20px; --ov-6: 24px;
  --ov-8: 32px; --ov-10: 40px; --ov-12: 48px; --ov-16: 64px; --ov-20: 80px;

  /* — borders / elevation (square, never rounded) — */
  --ov-hair: 1px solid var(--ov-rule);
  --ov-edge: 1.5px solid var(--ov-ink);
  --ov-lift: 6px 6px 0 rgba(22,33,31,.08);  /* opt-in only, one hero specimen */
  --ov-ease: cubic-bezier(.2,.7,.2,1);
}

/* ── base ──────────────────────────────────────────────────────────────── */
.ov { font-family: var(--ov-sans); color: var(--ov-ink); background: var(--ov-paper);
  font-size: var(--ov-fs-base); line-height: 1.6; -webkit-font-smoothing: antialiased; }
.ov-dotgrid { background-image: radial-gradient(rgba(22,33,31,.05) 1px, transparent 1px); background-size: 24px 24px; }
.ov-wrap { max-width: 1040px; margin: 0 auto; padding: 0 var(--ov-6); }

/* ── brand lockup & page header ───────────────────────────────────────── */
.ov-logo { font-family: var(--ov-mono); font-weight: 600; letter-spacing: .02em; color: var(--ov-ink); }
.ov-logo .ov-dot { color: var(--ov-teal); }
.ov-pageheader { display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: var(--ov-edge); padding: var(--ov-5) 0; }

/* ── type roles ───────────────────────────────────────────────────────── */
.ov-display, .ov-h1 { font-family: var(--ov-serif); font-weight: 600; font-optical-sizing: auto;
  letter-spacing: -.02em; line-height: 1.06; }
.ov-h1 { font-size: var(--ov-fs-3xl); }
.ov-h2 { font-family: var(--ov-serif); font-weight: 600; font-size: var(--ov-fs-xl); letter-spacing: -.01em; }
.ov-kicker { font-family: var(--ov-mono); font-size: var(--ov-fs-micro); letter-spacing: .14em; text-transform: uppercase; color: var(--ov-teal); }
.ov-label { font-family: var(--ov-mono); font-size: var(--ov-fs-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--ov-ink-soft); }
.ov-mono { font-family: var(--ov-mono); } .ov-sub { color: var(--ov-ink-soft); font-size: var(--ov-fs-sm); }
.ov-num { font-family: var(--ov-mono); font-variant-numeric: tabular-nums; }

.ov-section-head { display: flex; align-items: baseline; gap: var(--ov-4); border-bottom: var(--ov-edge);
  padding-bottom: var(--ov-2); margin: var(--ov-12) 0 var(--ov-6); }
.ov-section-head .ov-secnum { font-family: var(--ov-mono); font-size: var(--ov-fs-sm); color: var(--ov-teal); letter-spacing: .1em; white-space: nowrap; }

/* ── hero ─────────────────────────────────────────────────────────────── */
.ov-hero { padding: var(--ov-20) 0 var(--ov-16); }
.ov-hero .ov-h1 { max-width: 17ch; margin: var(--ov-6) 0 0; }
.ov-hero .ov-lede { max-width: 56ch; font-size: var(--ov-fs-md); color: var(--ov-ink-soft); margin-top: var(--ov-5); }
.ov-actions { display: flex; gap: var(--ov-4); flex-wrap: wrap; margin-top: var(--ov-8); }

/* ── buttons (flat instrument controls — no neo-brutalist lift) ────────── */
.ov-btn { display: inline-block; font-family: var(--ov-mono); font-size: var(--ov-fs-btn); font-weight: 500;
  padding: 14px 26px; letter-spacing: .02em; text-decoration: none; cursor: pointer;
  border: var(--ov-edge); color: var(--ov-ink); background: transparent; transition: background .15s var(--ov-ease); }
.ov-btn:hover { background: var(--ov-paper-2); }
.ov-btn--primary { background: var(--ov-teal); border-color: var(--ov-teal); color: var(--ov-white); }
.ov-btn--primary:hover { background: var(--ov-teal-deep); border-color: var(--ov-teal-deep); }
.ov-btn:focus-visible, .ov a:focus-visible { outline: 2.5px solid var(--ov-teal-deep); outline-offset: 2px; }
.ov-btn--primary:focus-visible { outline-color: var(--ov-ink); }

/* ── metric tiles — values in MONO (every number) ─────────────────────── */
.ov-metrics { display: grid; gap: 1px; background: var(--ov-rule); border: var(--ov-hair); grid-auto-flow: column; grid-auto-columns: 1fr; }
.ov-metric { background: var(--ov-paper); padding: var(--ov-4) var(--ov-4) var(--ov-3); }
.ov-metric .ov-v { font-family: var(--ov-mono); font-weight: 700; font-size: var(--ov-fs-2xl);
  font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -.04em; }
.ov-metric .ov-v.is-good { color: var(--ov-good); } .ov-metric .ov-v.is-absent { color: var(--ov-absent); } .ov-metric .ov-v.is-teal { color: var(--ov-teal-deep); }
.ov-metric .ov-l { font-family: var(--ov-mono); font-size: var(--ov-fs-micro); letter-spacing: .12em; color: var(--ov-ink-soft); text-transform: uppercase; }
.ov-metric .ov-s { font-size: var(--ov-fs-xs); color: var(--ov-ink-soft); margin-top: var(--ov-1); }

/* lightweight inline KPI row (no borders) */
.ov-kpi-row { display: flex; flex-wrap: wrap; gap: var(--ov-8); }
.ov-kpi { } .ov-kpi .ov-l { display: block; } .ov-kpi .ov-v { font-family: var(--ov-mono); font-weight: 600; font-variant-numeric: tabular-nums; font-size: var(--ov-fs-lg); }

/* ── data table ───────────────────────────────────────────────────────── */
.ov-table { width: 100%; border-collapse: collapse; font-size: var(--ov-fs-sm); }
.ov-table th { text-align: left; font-family: var(--ov-mono); font-size: var(--ov-fs-micro); letter-spacing: .1em;
  text-transform: uppercase; color: var(--ov-ink-soft); font-weight: 600; padding: var(--ov-2) var(--ov-3); border-bottom: var(--ov-edge); }
.ov-table td { padding: var(--ov-2) var(--ov-3); border-bottom: var(--ov-hair); vertical-align: top; }
.ov-table .ov-pr { font-family: var(--ov-serif); font-weight: 600; font-size: 13.5px; }
.ov-table .ov-num { text-align: right; }
.ov-pos-good { color: var(--ov-good); font-weight: 700; } .ov-pos-ok { color: var(--ov-teal); font-weight: 600; }
.ov-pos-mid { color: var(--ov-watch); font-weight: 600; } .ov-pos-abs { color: var(--ov-absent); font-weight: 600; }

/* ── status pills (square, bordered) ──────────────────────────────────── */
.ov-pill { display: inline-block; font-family: var(--ov-mono); font-size: var(--ov-fs-micro); letter-spacing: .04em;
  padding: 3px 9px; border: 1px solid currentColor; white-space: nowrap; }
.ov-pill--neutral { color: var(--ov-ink-soft); }
.ov-pill--active { color: var(--ov-teal); background: var(--ov-teal-wash); }
.ov-pill--win { color: var(--ov-good); background: var(--ov-good-wash); }
.ov-pill--gold { color: var(--ov-gold); background: var(--ov-gold-wash); }
.ov-pill--dead { color: var(--ov-absent); background: var(--ov-absent-wash); }

/* ── callouts ─────────────────────────────────────────────────────────── */
.ov-note { padding: var(--ov-4); border-left: 4px solid var(--ov-teal); background: var(--ov-paper-2); font-size: var(--ov-fs-md); }
.ov-note--watch { border-left-color: var(--ov-watch); background: var(--ov-watch-wash); }
.ov-note--absent { border-left-color: var(--ov-absent); background: var(--ov-absent-wash); }

/* ── card / specimen ──────────────────────────────────────────────────── */
.ov-card { background: var(--ov-white); border: var(--ov-edge); padding: var(--ov-6) var(--ov-8); }
.ov-card--lift { box-shadow: var(--ov-lift); }   /* opt-in, reserve for ONE hero specimen */
.ov-stamp { font-family: var(--ov-mono); font-size: var(--ov-fs-xs); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ov-absent); border: 1.5px solid var(--ov-absent); padding: 5px 10px; transform: rotate(3deg); display: inline-block; }
.ov-redact { background: var(--ov-ink); color: var(--ov-ink); padding: 0 5px; user-select: none; }

/* ── funnel bar ───────────────────────────────────────────────────────── */
.ov-fbar-track { height: 14px; background: repeating-linear-gradient(90deg, var(--ov-rule), var(--ov-rule) 1px, transparent 1px, transparent 6px); }
.ov-fbar { height: 100%; background: var(--ov-teal); transition: width 1s var(--ov-ease); }

/* ── CTA band ─────────────────────────────────────────────────────────── */
.ov-cta-band { background: var(--ov-ink); color: var(--ov-paper); padding: var(--ov-8) var(--ov-8);
  display: flex; justify-content: space-between; align-items: center; gap: var(--ov-6); flex-wrap: wrap; }
.ov-cta-band .ov-btn { border-color: var(--ov-paper); color: var(--ov-paper); }
.ov-cta-band .ov-btn:hover { background: rgba(250,248,244,.1); }

/* ── report footer / methodology ──────────────────────────────────────── */
.ov-methodology { font-family: var(--ov-mono); font-size: var(--ov-fs-xs); color: var(--ov-ink-soft); margin-top: var(--ov-8); }

/* ── motion: opt-in entrance (NOT on data by default) + reduced-motion ─── */
@keyframes ov-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.ov-stagger > * { animation: ov-rise .55s var(--ov-ease) both; }
.ov-stagger > *:nth-child(2){animation-delay:.06s} .ov-stagger > *:nth-child(3){animation-delay:.12s}
.ov-stagger > *:nth-child(4){animation-delay:.18s} .ov-stagger > *:nth-child(5){animation-delay:.24s}
@media (prefers-reduced-motion: reduce) {
  .ov-stagger > * { animation: none; opacity: 1; transform: none; }
  .ov-fbar, .ov-btn { transition: none; }
}
@media (max-width: 720px){ .ov-metrics{grid-auto-flow:row} .ov-pageheader,.ov-cta-band{flex-direction:column;align-items:flex-start;gap:var(--ov-3)} }