/* =====================================================================
   Auditably.co — Landing page
   Tokens MATCH terms.html / privacy.html exactly.
   Brand: #4042E4 indigo · Emerald #10b981 accent · Triangle logo.
   ===================================================================== */

:root {
  --brand: #4042E4;
  --brand-dark: #2B2DBC;
  --brand-tint: rgba(64, 66, 228, 0.08);
  --brand-soft: rgba(64, 66, 228, 0.04);
  --emerald: #10b981;
  --emerald-dark: #059669;
  --emerald-tint: rgba(16, 185, 129, 0.06);

  --ink-0: #0d0e23;
  --ink-1: #1a1a2e;
  --ink-2: #4b5563;
  --ink-3: #6b7280;
  --ink-4: #9ca3af;

  --rule: #e5e7eb;
  --rule-strong: #d1d5db;
  --canvas: #fafbfc;
  --paper: #ffffff;
  --bg-tint: #f5f6ff;

  --f-sans: -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  --t: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  --radius: 14px;
  --radius-sm: 9px;
  --radius-pill: 100px;

  --elev-1: 0 1px 2px rgba(13,14,35,0.04), 0 1px 3px rgba(13,14,35,0.06);
  --elev-2: 0 4px 8px rgba(13,14,35,0.05), 0 2px 4px rgba(13,14,35,0.04);
  --elev-3: 0 10px 25px rgba(13,14,35,0.07), 0 4px 10px rgba(13,14,35,0.04);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--f-sans);
  background: var(--canvas);
  color: var(--ink-1);
  font-size: 15.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow-x: hidden;
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

img { display: block; max-width: 100%; }

/* ── Logo (matches legal pages exactly) ─────────────────────────────── */

.brand-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-0);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.brand-logo:hover { text-decoration: none; }
.brand-logo svg { width: 28px; height: 28px; }
.brand-logo-co { color: var(--emerald); }

/* ── Layout ─────────────────────────────────────────────────────────── */

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
}
.container-narrow { max-width: 1100px; }

.section { padding: clamp(64px, 7vw, 96px) 0; position: relative; }

/* ── Eyebrow (matches legal pages) ──────────────────────────────────── */

.eyebrow {
  color: var(--brand);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 14px;
  display: inline-block;
}
.eyebrow::before {
  content: '— ';
  opacity: 0.6;
}

/* ── Typography ─────────────────────────────────────────────────────── */

h1, h2, h3, h4 {
  color: var(--ink-0);
  letter-spacing: -0.02em;
  font-weight: 700;
  line-height: 1.15;
}
h1 {
  font-size: clamp(32px, 5vw, 52px);
  letter-spacing: -0.028em;
  line-height: 1.08;
  font-weight: 800;
}
h2 {
  font-size: clamp(24px, 3vw, 36px);
  letter-spacing: -0.022em;
}
h3 { font-size: 18px; font-weight: 700; }

/* ── Navigation ─────────────────────────────────────────────────────── */

.nav {
  background: rgba(255,255,255,0.86);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  z-index: 50;
  transition: border-color var(--t);
}
.nav.scrolled { border-bottom-color: var(--rule-strong); }
.nav-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav-links a {
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: color var(--t);
}
.nav-links a:hover { color: var(--brand-dark); }
.nav-cta { display: flex; align-items: center; gap: 10px; }

/* ── Buttons ────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  font-family: var(--f-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  border: 1.5px solid transparent;
  text-decoration: none;
  transition: transform var(--t), box-shadow var(--t), filter var(--t), background var(--t), border-color var(--t), color var(--t);
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn-primary {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  color: #fff;
  box-shadow: 0 4px 14px rgba(64,66,228,0.32);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(64,66,228,0.45);
  filter: brightness(1.05);
  color: #fff;
}
.btn-secondary {
  background: #fff;
  color: var(--brand-dark);
  border-color: var(--rule);
}
.btn-secondary:hover {
  background: var(--brand-tint);
  border-color: var(--brand);
  color: var(--brand-dark);
}
.btn-ghost {
  background: transparent;
  color: var(--ink-2);
  font-weight: 500;
  border-color: transparent;
}
.btn-ghost:hover { color: var(--brand-dark); }
.btn-large { padding: 13px 24px; font-size: 14.5px; }
.btn .arrow { transition: transform var(--t); }
.btn:hover .arrow { transform: translateX(3px); }

/* ── HERO ───────────────────────────────────────────────────────────── */

.hero {
  padding: clamp(48px, 6vw, 80px) 0 clamp(40px, 5vw, 64px);
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 40% at 85% 10%, rgba(64,66,228,0.06) 0%, transparent 60%),
    radial-gradient(ellipse 50% 35% at 5% 70%, rgba(16,185,129,0.04) 0%, transparent 55%);
}
.hero > * { position: relative; z-index: 1; }

.hero-pills {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  background: var(--brand-tint);
  border: 1px solid rgba(64,66,228,0.18);
  border-radius: var(--radius-pill);
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-dark);
}
.pill .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--emerald);
  box-shadow: 0 0 0 3px rgba(16,185,129,0.18);
}
.pill.pill-emerald {
  background: var(--emerald-tint);
  border-color: rgba(16,185,129,0.24);
  color: var(--emerald-dark);
}

.hero h1 { max-width: 17ch; margin-bottom: 20px; }
.hero h1 .grad {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-sub {
  font-size: 17px;
  color: var(--ink-2);
  line-height: 1.55;
  max-width: 60ch;
  margin-bottom: 30px;
}
.hero-sub strong { color: var(--ink-0); font-weight: 600; }

.hero-ctas {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.hero-trust {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--ink-3);
}
.hero-trust svg { color: var(--emerald); flex-shrink: 0; }

.juris-strip {
  margin-top: 48px;
  padding: 20px 26px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--elev-1);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: center;
}
.juris-label {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
  line-height: 1.5;
  max-width: 12ch;
}
.juris-items { display: flex; flex-wrap: wrap; }
.juris-items span {
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  border-right: 1px solid var(--rule);
  white-space: nowrap;
}
.juris-items span:last-child { border-right: 0; }
.juris-items span b {
  color: var(--brand-dark);
  font-weight: 700;
  margin-right: 5px;
}

/* ── PROBLEM ────────────────────────────────────────────────────────── */

.problem {
  background: linear-gradient(180deg, var(--canvas) 0%, var(--bg-tint) 100%);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.problem-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 56px;
  align-items: start;
}
.problem-left { position: sticky; top: 90px; }
.problem-left h2 { max-width: 14ch; }
.problem-body {
  font-size: 16.5px;
  color: var(--ink-2);
  line-height: 1.7;
}
.problem-body p { margin-bottom: 18px; max-width: 56ch; }
.problem-body strong { color: var(--ink-0); font-weight: 600; }
.problem-body em { font-style: italic; color: var(--ink-1); }
.problem-body .pull {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--brand-dark);
  line-height: 1.35;
  padding: 20px 24px;
  background: #fff;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--brand);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin: 28px 0;
  box-shadow: var(--elev-1);
}

/* ── THREE PILLARS ──────────────────────────────────────────────────── */

.three-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 48px;
}
.three-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 26px 24px 22px;
  display: flex;
  flex-direction: column;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
  box-shadow: var(--elev-1);
}
.three-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--elev-3);
  border-color: rgba(64,66,228,0.22);
}
.three-card-icon {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--brand-tint), #fff);
  border: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: var(--brand);
}
.three-card-icon svg { width: 19px; height: 19px; }
.three-num {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--brand);
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.three-card h3 {
  font-size: 17px;
  margin-bottom: 11px;
  letter-spacing: -0.012em;
  line-height: 1.3;
}
.three-card p {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.65;
  margin-bottom: 10px;
}
.three-card p em { color: var(--ink-1); font-style: italic; }
.three-card-link {
  margin-top: auto;
  padding-top: 12px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  transition: gap var(--t), color var(--t);
}
.three-card-link:hover {
  gap: 12px;
  color: var(--brand-dark);
  text-decoration: none;
}

/* ── FIT ────────────────────────────────────────────────────────────── */

.fit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 40px;
}
.fit-col {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 28px 26px;
  box-shadow: var(--elev-1);
}
.fit-col.yes { border-top: 3px solid var(--emerald); }
.fit-col.no { border-top: 3px solid var(--ink-4); }
.fit-col h3 {
  font-size: 16px;
  margin-bottom: 4px;
  letter-spacing: -0.012em;
}
.fit-col.yes h3 { color: var(--emerald-dark); }
.fit-col.no h3 { color: var(--ink-2); }
.fit-col-sub {
  font-size: 13px;
  color: var(--ink-3);
  margin-bottom: 18px;
}
.fit-list { list-style: none; padding: 0; margin: 0; }
.fit-list li {
  padding: 11px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-2);
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: baseline;
}
.fit-list li:last-child { border-bottom: 0; }
.fit-list li svg { width: 14px; height: 14px; margin-top: 3px; }
.fit-col.yes .fit-list li svg { color: var(--emerald); }
.fit-col.no .fit-list li svg { color: var(--ink-4); }
.fit-list li em { color: var(--ink-1); font-style: italic; }

/* ── HOW IT WORKS ───────────────────────────────────────────────────── */

.how {
  background: linear-gradient(180deg, var(--bg-tint) 0%, var(--canvas) 100%);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.how-grid { margin-top: 40px; }
.how-step {
  display: grid;
  grid-template-columns: 72px 1fr 1fr;
  gap: 36px;
  padding: 24px 0;
  border-bottom: 1px dashed var(--rule);
  align-items: start;
}
.how-step:last-child { border-bottom: 0; }
.how-num {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}
.how-step h3 {
  font-size: 19px;
  letter-spacing: -0.015em;
  line-height: 1.3;
}
.how-step p {
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.65;
}

/* ── TRUST STRIP ────────────────────────────────────────────────────── */

.trust-band {
  padding: 28px 0;
  background: var(--paper);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.trust-label {
  text-align: center;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
  margin-bottom: 14px;
}
.trust-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.trust-items span {
  padding: 4px 18px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-2);
  border-right: 1px solid var(--rule);
}
.trust-items span:last-child { border-right: 0; }

/* ── PRICING ────────────────────────────────────────────────────────── */

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 40px;
}
.price-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 28px 22px 24px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform var(--t), box-shadow var(--t);
  box-shadow: var(--elev-1);
}
.price-card.featured {
  border: 1.5px solid var(--brand);
  box-shadow: 0 0 0 1px var(--brand), var(--elev-2);
  background: linear-gradient(180deg, #fff 0%, var(--bg-tint) 100%);
}
.price-card.featured:hover { transform: translateY(-3px); }
.price-card:not(.featured):hover {
  transform: translateY(-2px);
  box-shadow: var(--elev-3);
}
.price-badge {
  position: absolute;
  top: -1px;
  right: 18px;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  color: #fff;
  padding: 4px 11px;
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 0 0 6px 6px;
}
.price-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink-0);
  letter-spacing: -0.015em;
  margin-bottom: 4px;
}
.price-tagline {
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.5;
  margin-bottom: 22px;
  min-height: 38px;
}
.price-amount {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 6px;
}
.price-amount .num {
  font-size: 36px;
  font-weight: 800;
  color: var(--ink-0);
  letter-spacing: -0.03em;
}
.price-amount .per {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-3);
}
.price-billing {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
  margin-bottom: 22px;
}
.price-features {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);
  flex: 1;
}
.price-features li {
  padding: 8px 0;
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 8px;
  align-items: baseline;
}
.price-features li:last-child { border-bottom: 0; }
.price-features li svg {
  width: 13px;
  height: 13px;
  color: var(--emerald);
  margin-top: 2px;
}
.price-cta { width: 100%; justify-content: center; }
.pricing-footnote {
  text-align: center;
  margin-top: 24px;
  font-size: 13px;
  color: var(--ink-3);
}

/* ── FAQ ────────────────────────────────────────────────────────────── */

.faq-band {
  background: var(--bg-tint);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.faq-grid {
  margin-top: 36px;
  max-width: 820px;
  border-top: 1px solid var(--rule);
}
.faq-item {
  border-bottom: 1px solid var(--rule);
  padding: 20px 0;
  cursor: pointer;
}
.faq-q {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink-0);
  letter-spacing: -0.012em;
  display: grid;
  grid-template-columns: 1fr 24px;
  gap: 16px;
  align-items: center;
  transition: color var(--t);
}
.faq-item:hover .faq-q { color: var(--brand-dark); }
.faq-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: var(--brand-tint);
  color: var(--brand);
  border-radius: 6px;
  font-family: var(--f-mono);
  font-size: 16px;
  font-weight: 700;
  transition: transform var(--t), background var(--t), color var(--t);
}
.faq-item.open .faq-toggle {
  transform: rotate(45deg);
  background: var(--brand);
  color: #fff;
}
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.4s ease;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-2);
  padding-right: 40px;
}
.faq-item.open .faq-a { max-height: 800px; padding-top: 12px; }
.faq-a p { margin-bottom: 10px; max-width: 70ch; }
.faq-a strong { color: var(--ink-0); font-weight: 600; }

/* ── FINAL CTA ──────────────────────────────────────────────────────── */

.final {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  position: relative;
  overflow: hidden;
  text-align: center;
  color: #fff;
}
.final::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 60% at 85% 0%, rgba(16,185,129,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 60% 60% at 5% 100%, rgba(255,255,255,0.08) 0%, transparent 50%);
  pointer-events: none;
}
.final > * { position: relative; z-index: 1; }
.final .eyebrow { color: rgba(255,255,255,0.78); }
.final h2 {
  color: #fff;
  font-size: clamp(28px, 4.2vw, 44px);
  letter-spacing: -0.025em;
  margin: 0 auto 16px;
  max-width: 22ch;
  font-weight: 800;
}
.final h2 .emerald { color: #6EE7B7; }
.final p {
  font-size: 16px;
  color: rgba(255,255,255,0.85);
  max-width: 52ch;
  margin: 0 auto 30px;
  line-height: 1.6;
}
.final-ctas {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.final-ctas .btn-primary {
  background: #fff;
  color: var(--brand-dark);
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}
.final-ctas .btn-primary:hover {
  background: var(--bg-tint);
  color: var(--brand-dark);
}
.final-ctas .btn-secondary {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border-color: rgba(255,255,255,0.3);
}
.final-ctas .btn-secondary:hover {
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.5);
  color: #fff;
}

/* ── FOOTER (matches legal-footer pattern, expanded) ────────────────── */

.site-foot {
  background: var(--paper);
  border-top: 1px solid var(--rule);
  padding: 48px 0 24px;
}
.foot-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 36px;
}
.foot-brand p {
  font-size: 13.5px;
  color: var(--ink-3);
  max-width: 36ch;
  line-height: 1.65;
  margin-top: 12px;
}
.foot-col h4 {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand);
  font-weight: 700;
  margin-bottom: 14px;
}
.foot-col ul { list-style: none; padding: 0; margin: 0; }
.foot-col li { padding: 5px 0; }
.foot-col a {
  font-size: 13.5px;
  color: var(--ink-2);
  text-decoration: none;
  transition: color var(--t);
}
.foot-col a:hover { color: var(--brand-dark); text-decoration: none; }
.foot-base {
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 13px;
  color: var(--ink-3);
}
.foot-base-links a {
  color: var(--ink-2);
  margin-left: 16px;
  text-decoration: none;
}
.foot-base-links a:hover { color: var(--brand-dark); }

/* ── Reveal ─────────────────────────────────────────────────────────── */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-up { opacity: 0; }
.fade-up.visible { animation: fadeUp 0.7s cubic-bezier(.2,.6,.2,1) forwards; }
.delay-1 { animation-delay: 0.08s; }
.delay-2 { animation-delay: 0.16s; }
.delay-3 { animation-delay: 0.24s; }
.delay-4 { animation-delay: 0.32s; }

/* ── Responsive ─────────────────────────────────────────────────────── */

@media (max-width: 960px) {
  .problem-grid { grid-template-columns: 1fr; gap: 28px; }
  .problem-left { position: static; }
  .three-grid { grid-template-columns: 1fr; }
  .fit-grid { grid-template-columns: 1fr; }
  .how-step { grid-template-columns: 56px 1fr; gap: 18px; }
  .how-step p { grid-column: 2 / 3; }
  .how-num { font-size: 30px; }
  .pricing-grid { grid-template-columns: 1fr 1fr; }
  .nav-links { display: none; }
  .nav-inner { padding: 12px 20px; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .juris-strip { grid-template-columns: 1fr; gap: 12px; padding: 16px 20px; }
}

@media (max-width: 560px) {
  body { font-size: 15px; }
  .container { padding: 0 18px; }
  .section { padding: 52px 0; }
  .hero { padding: 36px 0 28px; }
  .hero-sub { font-size: 15.5px; }
  .pricing-grid { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; gap: 24px; }
  .hero-ctas .btn, .final-ctas .btn { width: 100%; }
  .juris-items span { padding: 4px 11px; font-size: 12px; }
  .trust-items span { padding: 4px 12px; font-size: 12px; }
  .nav-cta .btn-ghost { display: none; }
}

/* ════════ Phase 1 upgrade — product mockups, deep-dives, comparison, methodology, founder ════════ */
.sec-lede { max-width: 680px; color: var(--ink-2); font-size: 16px; line-height: 1.6; margin-top: 8px; }
.mi { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* faux-browser product frame */
.mock { background: #fff; border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; box-shadow: var(--elev-2); }
.mock-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #f7f8fa; border-bottom: 1px solid var(--rule); }
.mock-dot { width: 9px; height: 9px; border-radius: 50%; background: #e0e2e8; }
.mock-url { margin-left: 8px; font-family: var(--f-mono); font-size: 10.5px; color: var(--ink-4); background: #fff; border: 1px solid var(--rule); border-radius: 6px; padding: 2px 10px; flex: 1; }
.mock-body { padding: 16px; }
.showcase-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 40px; }
.showcase-cap { font-size: 13.5px; color: var(--ink-2); margin-top: 12px; line-height: 1.5; }
.showcase-cap b { color: var(--ink-0); font-weight: 600; }

/* dashboard mock */
.m-row { display: flex; justify-content: space-between; align-items: center; }
.m-kpis { display: flex; gap: 8px; margin: 12px 0; }
.m-kpi { flex: 1; background: var(--canvas); border: 1px solid var(--rule); border-radius: 8px; padding: 8px 9px; }
.m-kpi .n { font-size: 18px; font-weight: 800; color: var(--ink-0); letter-spacing: -0.02em; }
.m-kpi .l { font-size: 8.5px; font-family: var(--f-mono); text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); margin-top: 1px; }
.m-pill { margin-bottom: 9px; }
.m-pill .ph { display: flex; justify-content: space-between; font-size: 11.5px; font-weight: 600; color: var(--ink-1); margin-bottom: 4px; }
.m-pill .ph .s { font-family: var(--f-mono); color: var(--ink-3); font-weight: 500; }
.m-track { height: 6px; background: var(--rule); border-radius: 3px; overflow: hidden; }
.m-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--brand), var(--emerald)); }

/* disclosure-detail mock */
.m-ref { font-family: var(--f-mono); font-size: 10px; color: var(--brand); text-transform: uppercase; letter-spacing: 0.04em; }
.m-title { font-size: 14px; font-weight: 700; color: var(--ink-0); margin: 3px 0 7px; }
.m-guide { font-size: 11.5px; color: var(--ink-3); line-height: 1.5; background: var(--bg-tint); border: 1px solid var(--rule-tint); border-radius: 8px; padding: 8px 10px; }
.m-dp { display: flex; justify-content: space-between; font-size: 12px; border: 1px solid var(--rule); border-radius: 8px; padding: 8px 10px; margin-top: 9px; background: var(--canvas); }
.m-dp .k { font-weight: 600; color: var(--ink-0); }
.m-dp .v { font-family: var(--f-mono); color: var(--ink-1); }
.m-chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-mono); font-size: 10px; background: #fff; border: 1px solid var(--rule); border-radius: 100px; padding: 3px 9px; color: var(--ink-2); margin-top: 9px; }
.m-chip .mi { color: var(--ink-3); }
.m-act { font-size: 10.5px; color: var(--ink-3); margin-top: 9px; display: flex; gap: 6px; align-items: center; }
.m-act b { color: var(--ink-1); }

/* audit-trail mock */
.m-lock { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-mono); font-size: 10px; color: var(--emerald-dark); margin-bottom: 9px; }
.m-log { width: 100%; border-collapse: collapse; font-size: 11px; }
.m-log td { padding: 6px 4px; border-bottom: 1px dashed var(--rule); vertical-align: top; }
.m-log tr:last-child td { border-bottom: none; }
.m-log .t { font-family: var(--f-mono); color: var(--ink-4); white-space: nowrap; }
.m-log .u { font-weight: 600; color: var(--ink-0); white-space: nowrap; }
.m-log .a { color: var(--ink-2); }

/* auditor-pack zip mock */
.m-zip { font-family: var(--f-mono); font-size: 11.5px; }
.m-zip .z { display: flex; align-items: center; gap: 9px; padding: 6px 0; border-bottom: 1px dashed var(--rule); color: var(--ink-1); }
.m-zip .z:last-child { border-bottom: none; }
.m-zip .z .mi { color: var(--brand); }
.m-zip .z .sz { margin-left: auto; color: var(--ink-4); }

/* feature deep-dive rows */
.deep { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; margin-top: 60px; }
.deep:first-of-type { margin-top: 40px; }
.deep.rev .deep-visual { order: 2; }
.deep h3 { font-size: 23px; letter-spacing: -0.02em; margin-bottom: 12px; }
.deep > div > p { color: var(--ink-2); font-size: 15px; margin-bottom: 16px; line-height: 1.6; }
.deep ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.deep ul li { display: flex; gap: 10px; font-size: 14px; color: var(--ink-1); }
.deep ul li svg { width: 18px; height: 18px; color: var(--emerald); flex-shrink: 0; margin-top: 2px; }
.dv-card { background: #fff; border: 1px solid var(--rule); border-radius: 14px; padding: 22px; box-shadow: var(--elev-2); }
.dv-label { font-family: var(--f-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--brand); margin-bottom: 12px; }
.dv-stack { display: flex; flex-direction: column; gap: 8px; }
.dv-bar { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; padding: 9px 12px; border: 1px solid var(--rule); border-radius: 8px; background: var(--canvas); color: var(--ink-1); }
.dv-bar .c { font-family: var(--f-mono); color: var(--ink-3); }
.dv-bar.tot { background: var(--brand-tint); border-color: var(--brand); color: var(--brand-dark); font-weight: 700; }
.dv-flow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dv-step { font-size: 12px; font-weight: 600; padding: 7px 12px; border-radius: 100px; background: var(--canvas); border: 1px solid var(--rule); color: var(--ink-1); }
.dv-step.act { background: var(--brand-tint); border-color: var(--brand); color: var(--brand-dark); }
.dv-arrow { color: var(--ink-4); }
.dv-tamper { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 10px 12px; border-radius: 8px; background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; margin-top: 8px; }
.dv-tamper svg { width: 16px; height: 16px; flex-shrink: 0; }
.dv-hash { font-family: var(--f-mono); font-size: 11px; color: var(--ink-3); margin-top: 10px; word-break: break-all; }
.dv-line { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink-1); padding: 7px 0; border-bottom: 1px dashed var(--rule); }
.dv-line:last-child { border-bottom: none; }
.dv-line svg { width: 16px; height: 16px; color: var(--emerald); flex-shrink: 0; }

/* comparison */
.compare { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-top: 40px; align-items: start; }
.compare-col { background: #fff; border: 1px solid var(--rule); border-radius: 14px; padding: 24px 22px; }
.compare-col.mid { border: 1.5px solid var(--brand); box-shadow: 0 0 0 1px var(--brand), var(--elev-3); position: relative; }
.compare-tag { position: absolute; top: -11px; left: 22px; background: var(--brand); color: #fff; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 11px; border-radius: 100px; }
.compare-col h3 { font-size: 16px; margin-bottom: 3px; }
.compare-price { font-family: var(--f-mono); font-size: 12.5px; color: var(--ink-3); margin-bottom: 16px; }
.compare-col.mid .compare-price { color: var(--brand-dark); font-weight: 600; }
.compare-col ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.compare-col li { font-size: 13px; color: var(--ink-2); line-height: 1.45; display: flex; gap: 8px; }
.compare-col li::before { content: '—'; color: var(--ink-4); flex-shrink: 0; }
.compare-col.mid li::before { content: '✓'; color: var(--emerald); font-weight: 700; }

/* methodology */
.method-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 36px; }
.method-card { background: #fff; border: 1px solid var(--rule); border-radius: 12px; padding: 20px 18px; }
.method-card .mh { font-family: var(--f-mono); font-size: 11px; color: var(--brand); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; }
.method-card h4 { font-size: 15px; margin-bottom: 6px; }
.method-card p { font-size: 13px; color: var(--ink-2); line-height: 1.55; }

/* founder */
.founder { display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: center; max-width: 840px; margin: 36px auto 0; background: #fff; border: 1px solid var(--rule); border-radius: 18px; padding: 34px; box-shadow: var(--elev-1); }
.founder-avatar { width: 76px; height: 76px; border-radius: 50%; background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 25px; font-weight: 700; }
.founder p { color: var(--ink-1); font-size: 15.5px; line-height: 1.65; }
.founder .sig { font-family: var(--f-mono); font-size: 13px; color: var(--ink-2); margin-top: 14px; }
.founder .sig b { color: var(--ink-0); font-weight: 600; }



/* ── pricing: dimensional cards, tighter footprint ──────────────────── */
.pricing-grid { max-width: 980px; margin-left: auto; margin-right: auto; gap: 18px; align-items: stretch; }
.price-card {
  padding: 26px 24px !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, #ffffff 0%, var(--canvas) 100%) !important;
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 1px 1px rgba(13,14,35,.04),
    0 4px 6px rgba(13,14,35,.04),
    0 10px 18px rgba(13,14,35,.05),
    0 22px 40px rgba(13,14,35,.06) !important;
  transition: transform .15s ease, box-shadow .15s ease !important;
}
.price-card:hover { transform: translateY(-4px) !important;
  box-shadow: inset 0 1px 0 #fff, 0 2px 3px rgba(13,14,35,.05), 0 10px 18px rgba(13,14,35,.06),
    0 26px 52px rgba(13,14,35,.10) !important; }
.price-card.featured {
  transform: translateY(-14px);
  background: linear-gradient(180deg, #ffffff 0%, var(--bg-tint) 100%) !important;
  border-color: var(--brand) !important;
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 2px 3px rgba(64,66,228,.10),
    0 8px 16px rgba(64,66,228,.10),
    0 20px 36px rgba(64,66,228,.14),
    0 36px 64px rgba(13,14,35,.10) !important;
}
.price-card.featured:hover { transform: translateY(-14px) !important; }
.price-amount .num { font-size: 38px !important; }
.price-features { gap: 9px !important; }
.price-features li { font-size: 14px !important; }
.price-name { font-size: 17px !important; }
.price-tagline { font-size: 13.5px !important; }
@media (max-width: 900px) {
  .price-card.featured, .price-card.featured:hover, .price-card:hover { transform: none !important; }
  .pricing-grid { align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) {
  .price-card, .price-card:hover, .price-card.featured:hover { transition: none !important; }
}

/* ── BENTO SYSTEM ─────────────────────────────────────────────────── */
/* adjacent bento sections share one rhythm instead of stacking two paddings */
.section.bento-sec { padding: 72px 0; }
.section.bento-sec + .section.bento-sec { padding-top: 0; }
@media (max-width: 900px) { .section.bento-sec { padding: 52px 0; } }
.bento { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; }
.bento.rev .b-text { order: 2; }
.b-card { border: 1px solid var(--rule); border-radius: 12px; background: var(--paper);
  box-shadow: 0 1px 2px rgba(13,14,35,.04), 0 8px 24px rgba(13,14,35,.06);
  transition: transform .15s ease, box-shadow .15s ease; }
.b-card:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(13,14,35,.04), 0 14px 34px rgba(13,14,35,.09); }
.section.alt-bg .b-card { background: var(--paper); }
.b-text { padding: 40px; display: flex; flex-direction: column; justify-content: center; }
.b-text .b-eyebrow { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--brand); font-weight: 600; margin-bottom: 18px; }
.b-text h3 { font-size: clamp(26px,2.6vw,36px); line-height: 1.12; letter-spacing: -.02em;
  font-weight: 800; color: var(--ink-0); }
.b-text p { color: var(--ink-2); font-size: 16.5px; line-height: 1.7; margin-top: 16px; max-width: 34em; }
.b-link { margin-top: 26px; color: var(--brand-dark); font-weight: 600; font-size: 15px;
  display: inline-flex; align-items: center; gap: 7px; transition: gap .15s ease; align-self: flex-start; }
.b-link:hover { gap: 12px; text-decoration: none; }
/* visual card: cool indigo tint, UI fragment bleeds off the edge */
.b-vis { position: relative; overflow: hidden; min-height: 340px;
  background: radial-gradient(120% 110% at 82% 4%, rgba(64,66,228,.075), rgba(64,66,228,0) 62%), var(--canvas); }
.b-crop { position: absolute; background: var(--paper); border: 1px solid var(--rule);
  border-radius: 11px; box-shadow: 0 1px 2px rgba(13,14,35,.04), 0 6px 18px rgba(13,14,35,.05); }
.b-float { position: absolute; background: var(--paper); border: 1px solid var(--rule); border-radius: 10px;
  box-shadow: 0 2px 6px rgba(13,14,35,.06), 0 16px 38px rgba(13,14,35,.13); padding: 12px 14px; }
.b-h { font-family: var(--f-mono); font-size: 10px; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-4); }
.b-mono { font-family: var(--f-mono); font-size: 11px; color: var(--ink-3); }
.b-val { font-size: 14px; font-weight: 700; color: var(--ink-0); letter-spacing: -.01em; }
.lin .b-val { font-size: 12.5px; }
.lin .b-mono { font-size: 9.5px; }
.b-hash { font-family: var(--f-mono); font-size: 10px; color: var(--ink-3); background: var(--canvas);
  border: 1px solid var(--rule); border-radius: 5px; padding: 2px 7px; display: inline-block; }
.b-tick { color: var(--emerald-dark); }
/* lineage rail */
.lin { display: flex; align-items: flex-start; gap: 0; }
.lin-n { min-width: 70px; }
.lin-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px rgba(64,66,228,.12); }
.lin-dot.end { background: var(--emerald); box-shadow: 0 0 0 3px rgba(16,185,129,.14); }
.lin-rule { flex: 1; height: 1px; background: var(--rule); margin: 4px -2px 0; min-width: 14px; }
/* ledger rows (dark) */
.led { display: grid; grid-template-columns: 18px 1fr auto; gap: 11px; align-items: center;
  padding: 10px 13px; border: 1px solid rgba(255,255,255,.12); border-radius: 9px;
  background: rgba(255,255,255,.045); margin-bottom: 7px; }
.led svg { width: 13px; height: 13px; color: var(--emerald); }
.led .lt { font-size: 13px; color: rgba(255,255,255,.9); }
.led .lts { font-family: var(--f-mono); font-size: 10.5px; color: rgba(255,255,255,.45); }
.led.rejected { border-color: rgba(220,38,38,.34); background: rgba(220,38,38,.07); }
.led.rejected svg { color: #f87171; }
.led.rejected .lt { color: #fca5a5; text-decoration: line-through; text-decoration-color: rgba(252,165,165,.55); }
/* pillar rails */
.pr { margin-bottom: 13px; }
.pr-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.pr-n { font-size: 13px; font-weight: 600; color: var(--ink-0); }
.pr-p { font-family: var(--f-mono); font-size: 11px; color: var(--ink-3); }
.pr-t { height: 5px; background: var(--rule); border-radius: 3px; overflow: hidden; }
.pr-f { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--brand), var(--emerald)); }
/* zip tree */
.tree { font-family: var(--f-mono); font-size: 11.5px; line-height: 1.95; color: var(--ink-2); white-space: nowrap; }
.tree b { color: var(--ink-0); font-weight: 600; }
.tree i { color: var(--ink-4); font-style: normal; }
/* jurisdiction rail */
.jr { display: flex; align-items: center; gap: 0; }
.jr-c { font-family: var(--f-mono); font-size: 11px; font-weight: 600; color: #fff; background: var(--brand);
  border-radius: 6px; padding: 4px 8px; }
.jr-l { flex: 1; height: 2px; background: var(--rule); }
.jr-l.hot { background: var(--emerald); }
.jr-fy { font-family: var(--f-mono); font-size: 10.5px; color: var(--ink-3); }
/* dark section shell */
.section.dark-band { background: var(--ink-0); position: relative; overflow: hidden; }
.section.dark-band::before { content:''; position:absolute; inset:0; opacity:.035; pointer-events:none;
  background-image: radial-gradient(circle, #fff 1px, transparent 1px); background-size: 22px 22px; }
.section.dark-band .container { position: relative; }
.section.dark-band .b-card { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); box-shadow: none; }
.section.dark-band .b-card:hover { box-shadow: none; }
.section.dark-band .b-text h3 { color: #fff; }
.section.dark-band .b-text p { color: rgba(255,255,255,.72); }
.section.dark-band .b-eyebrow { color: var(--emerald); }
.section.dark-band .b-vis { background: radial-gradient(120% 110% at 82% 4%, rgba(64,66,228,.22), rgba(64,66,228,0) 62%), rgba(255,255,255,.02); }
.section.dark-band .b-float { background: #14152e; border-color: rgba(255,255,255,.16); box-shadow: 0 18px 40px rgba(0,0,0,.5); }
.section.dark-band .b-h { color: rgba(255,255,255,.45); }
.section.dark-band .b-val { color: #fff; }
@media (max-width: 900px) {
  .bento { grid-template-columns: 1fr; gap: 16px; }
  .bento.rev .b-text { order: 0; }
  .b-text { padding: 28px 24px; }
  /* narrow screens: drop the bleed, let panels flow so nothing is cropped */
  .b-vis { min-height: 0; padding: 22px 18px; }
  .b-crop { position: static; inset: auto; padding: 16px 18px !important; }
  .b-float { position: static; inset: auto; width: auto !important; margin-top: 14px; }
  .lin { flex-wrap: wrap; gap: 12px 0; }
  .lin-n { min-width: 33%; }
  .lin-rule { display: none; }
  .tree { white-space: normal; }
}

/* ── hero animation ───────────────────────────────────────────────── */
/* ── animation canvas ──────────────────────────────────────────────── */
.stage{position:relative;width:100%;aspect-ratio:560/460;cursor:pointer}
.stage svg{width:100%;height:100%;display:block;overflow:visible}
.replay{position:absolute;right:0;bottom:-30px;font-family:var(--f-mono);font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);background:none;border:0;cursor:pointer;
  transition:color .15s ease}
.replay:hover{color:var(--brand)}

.sheet{transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(var(--s));opacity:var(--o);
  transform-box:fill-box;transform-origin:center;will-change:transform,opacity}
.anim .sheet{transition:transform 1.15s cubic-bezier(.22,.61,.36,1),opacity .55s ease}
.dot-a,.dot-b{transition:opacity .4s ease}

.bar{transform-box:fill-box;transform-origin:center;will-change:transform,opacity}
.anim .bar{opacity:0;transform:scale(.35)}
.anim.collapse .bar{opacity:1;transform:scale(1);transition-delay:var(--d,0ms);
  transition:transform .55s cubic-bezier(.22,.61,.36,1),opacity .38s ease;transition-delay:var(--d,0ms)}

.chip{transform-box:fill-box;transform-origin:left center;will-change:transform,opacity}
.anim .chip{opacity:0;transform:translateX(-8px)}
.anim.settle .chip{opacity:1;transform:translateX(0);
  transition:transform .45s cubic-bezier(.22,.61,.36,1),opacity .45s ease}

.sweep{opacity:0}
.anim.settle .sweep{opacity:1;animation:sweep 6s linear infinite}
@keyframes sweep{0%{transform:translateX(-300px)}55%,100%{transform:translateX(460px)}}

@media (prefers-reduced-motion:reduce){
  .anim .sheet,.anim .bar,.anim .chip{transition:none!important}
  .anim.settle .sweep{animation:none}
  .btn:hover{transform:none}
}
@media (max-width:900px){ .stage{max-width:460px;margin:0 auto} }

/* ── HERO v2 — asymmetric, product-visual right ───────────────────── */
.hero-v2 { padding: 104px 0 96px; background: var(--paper); border-bottom: 1px solid var(--rule); }
.hero-grid { display: grid; grid-template-columns: minmax(0,55fr) minmax(0,45fr); gap: 64px; align-items: center; }
.hero-eyebrow { font-family: var(--f-mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--brand); font-weight: 600; display: block; margin-bottom: 22px; }
.hero-v2 h1 { font-size: clamp(38px, 4.6vw, 56px); line-height: 1.06; letter-spacing: -.02em; font-weight: 800; color: var(--ink-0); }
.hero-v2 h1 .h1-b { display: block; font-size: .64em; font-weight: 500; line-height: 1.22; letter-spacing: -.02em; margin-top: 16px; }
.hero-sub2 { color: var(--ink-2); font-size: 17px; line-height: 1.65; margin-top: 26px; max-width: 32em; }
.hero-actions { display: flex; align-items: center; gap: 26px; margin-top: 34px; flex-wrap: wrap; }
.btn-quiet { color: var(--brand-dark); font-weight: 600; font-size: 15px; display: inline-flex; align-items: center; gap: 7px; transition: gap .15s ease; }
.btn-quiet:hover { gap: 12px; text-decoration: none; }
.hero-juris { margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--rule); display: flex; align-items: center; gap: 12px 26px; flex-wrap: wrap; }
.hero-juris .hj-label { font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); }
.hero-juris span.hj { font-size: 13px; color: var(--ink-3); font-weight: 500; }
.hero-juris span.hj b { font-family: var(--f-mono); color: var(--brand); font-weight: 600; margin-right: 6px; }

/* ── Product mockup — disclosure detail + evidence chain ──────────── */
.mock { background: var(--paper); border: 1px solid var(--rule); border-radius: 14px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(13,14,35,.04), 0 8px 24px rgba(13,14,35,.06); transition: transform .15s ease, box-shadow .15s ease; }
.mock:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(13,14,35,.04), 0 14px 34px rgba(13,14,35,.09); }
.mock-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--rule); background: var(--canvas); }
.mock-ref { font-family: var(--f-mono); font-size: 11.5px; color: var(--ink-3); }
.mock-badge { font-family: var(--f-mono); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; padding: 3px 9px; border-radius: 100px; background: var(--emerald-tint); color: var(--emerald-dark); border: 1px solid rgba(16,185,129,.22); }
.mock-body { padding: 20px 18px; }
.mock-t { font-size: 12.5px; color: var(--ink-3); font-weight: 600; }
.mock-fig { font-size: 34px; font-weight: 800; color: var(--ink-0); letter-spacing: -.02em; margin: 5px 0 0; }
.mock-fig i { font-style: normal; font-size: 15px; font-weight: 600; color: var(--ink-3); margin-left: 5px; }
.chain { margin-top: 20px; padding-top: 16px; border-top: 1px dashed var(--rule); }
.chain-h { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 12px; }
.crow { display: flex; gap: 13px; padding: 8px 0; position: relative; }
.crow:not(:last-child)::before { content: ''; position: absolute; left: 4px; top: 22px; bottom: -6px; width: 1px; background: var(--rule); }
.cdot { width: 9px; height: 9px; border-radius: 50%; background: var(--brand); flex-shrink: 0; margin-top: 6px; box-shadow: 0 0 0 3px rgba(64,66,228,.12); }
.cdot.done { background: var(--emerald); box-shadow: 0 0 0 3px rgba(16,185,129,.14); }
.ctext { flex: 1; min-width: 0; display: block; }
.ck { display: block; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4); }
.cv { display: block; font-size: 13.5px; color: var(--ink-0); font-weight: 600; margin-top: 2px; overflow-wrap: anywhere; }
.cts { display: block; font-family: var(--f-mono); font-size: 11px; color: var(--ink-4); margin-top: 3px; }
.hash { font-family: var(--f-mono); font-size: 10px; color: var(--ink-3); background: var(--canvas); border: 1px solid var(--rule); border-radius: 5px; padding: 2px 7px; display: inline-block; margin-top: 5px; }

@media (max-width: 900px) {
  .hero-v2 { padding: 64px 0 56px; }
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-sub2 { font-size: 16.5px; }
}

/* ── 5 C's value grid ─────────────────────────────────────────────── */
.fivec-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-top: 40px; }
.fivec-grid > .cc-card { grid-column: span 2; }
.fivec-grid > .cc-card:nth-child(4) { grid-column: 2 / span 2; }
.fivec-grid > .cc-card:nth-child(5) { grid-column: 4 / span 2; }
.cc-card { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); padding: 24px; box-shadow: var(--elev-1); }
.cc-tag { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--brand); background: var(--brand-tint); padding: 4px 10px; border-radius: 100px; display: inline-block; margin-bottom: 12px; }
.cc-card h3 { font-size: 17px; margin-bottom: 8px; }
.cc-card p { font-size: 14px; color: var(--ink-2); line-height: 1.6; }

/* ── Why now / regulatory countdown ───────────────────────────────── */
.whynow { background: var(--ink-0); border-radius: var(--radius); padding: 44px 40px; color: #fff; }
.whynow .eyebrow { color: var(--emerald); }
.whynow h2 { color: #fff; }
.whynow .lede2 { color: rgba(255,255,255,.75); font-size: 16px; max-width: 640px; margin-top: 10px; }
.wave-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 28px 0 8px; }
.wave { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 12px; padding: 18px; }
.wave .fy { font-family: var(--f-mono); font-size: 26px; font-weight: 700; color: var(--emerald); }
.wave .who { font-size: 13px; color: rgba(255,255,255,.8); margin-top: 6px; line-height: 1.5; }
.assure-line { display: flex; gap: 10px; align-items: flex-start; background: rgba(16,185,129,.12); border: 1px solid rgba(16,185,129,.3); border-radius: 10px; padding: 12px 14px; font-size: 14px; color: #d1fae5; margin-top: 14px; }

/* ── Proof slots (design partners / case study / advisors) ────────── */
.proof-band { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--paper); padding: 34px 0; }
.pp-empty { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.pp-empty p { color: var(--ink-2); font-size: 14.5px; max-width: 640px; }
.pp-logos { display: flex; gap: 28px; flex-wrap: wrap; align-items: center; justify-content: center; }
.pp-logos img { height: 34px; opacity: .85; }
.pp-logos .pname { font-weight: 700; color: var(--ink-2); font-size: 16px; }
.quote-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-top: 24px; }
.quote-card { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); padding: 22px; }
.quote-card .q { font-size: 15px; color: var(--ink-1); line-height: 1.6; }
.quote-card .who { margin-top: 12px; font-size: 13px; color: var(--ink-3); font-weight: 600; }
.case-box { background: linear-gradient(135deg, #fff 0%, var(--bg-tint) 100%); border: 1px solid var(--rule-tint); border-radius: var(--radius); padding: 30px; }
.adv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 26px; }
.adv-card { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); padding: 20px; display: flex; gap: 14px; align-items: center; }
.adv-avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--brand-tint); color: var(--brand-dark); font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; overflow: hidden; }
.adv-avatar img { width: 100%; height: 100%; object-fit: cover; }
.adv-card .nm { font-weight: 700; color: var(--ink-0); font-size: 15px; }
.adv-card .tt { font-size: 13px; color: var(--ink-3); }
.founder-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.founder-chips span { font-family: var(--f-mono); font-size: 11.5px; color: var(--brand-dark); background: var(--brand-tint); border: 1px solid rgba(64,66,228,.16); padding: 4px 11px; border-radius: 100px; }

@media (max-width: 860px) {
  .fivec-grid, .wave-grid { grid-template-columns: 1fr; }
  .fivec-grid > .cc-card,
  .fivec-grid > .cc-card:nth-child(4),
  .fivec-grid > .cc-card:nth-child(5) { grid-column: auto; }
  .whynow { padding: 30px 22px; }
}

@media (max-width: 960px) {
  .showcase-grid, .deep, .compare, .method-grid { grid-template-columns: 1fr; }
  .deep { gap: 28px; margin-top: 46px; }
  .deep.rev .deep-visual { order: 0; }
  .founder { grid-template-columns: 1fr; text-align: center; padding: 26px; }
  .founder-avatar { margin: 0 auto; }
}

.nv{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);
backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid var(--rule)}
.nv-in{max-width:1140px;margin:0 auto;padding:0 24px;height:64px;display:flex;
align-items:center;gap:28px}
.nv-links{display:flex;align-items:center;gap:26px;margin-left:8px}
.nv-links a{font-size:14.5px;color:var(--ink-2);text-decoration:none;padding:6px 0;
position:relative}
.nv-links a:hover{color:var(--ink-0)}
.nv-links a[aria-current="page"]{color:var(--brand-dark);font-weight:600}
.nv-cta{margin-left:auto;display:flex;align-items:center;gap:12px}
.dd{position:relative}
.dd>button{font:inherit;font-size:14.5px;color:var(--ink-2);background:none;border:0;
cursor:pointer;padding:6px 0;display:flex;align-items:center;gap:5px}
.dd>button:hover{color:var(--ink-0)}
.dd>button svg{transition:transform .18s ease}
.dd[data-open="1"]>button svg{transform:rotate(180deg)}
.dd-menu{position:absolute;top:calc(100% + 10px);left:-16px;min-width:290px;
background:var(--paper);border:1px solid var(--rule);border-radius:12px;padding:8px;
box-shadow:0 1px 2px rgba(13,14,35,.04),0 14px 38px rgba(13,14,35,.12);
opacity:0;visibility:hidden;transform:translateY(-5px);transition:opacity .16s,transform .16s,visibility .16s}
.dd[data-open="1"] .dd-menu{opacity:1;visibility:visible;transform:none}
.dd-menu a{display:block;padding:10px 12px;border-radius:8px;text-decoration:none}
.dd-menu a:hover{background:var(--bg-tint)}
.dd-menu .tl{font-size:14.5px;color:var(--ink-0);font-weight:600;display:block}
.dd-menu .ds{font-family:var(--f-mono);font-size:11px;color:var(--ink-3);display:block;margin-top:3px}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--rule);
border-radius:9px;width:40px;height:40px;cursor:pointer;align-items:center;justify-content:center}
.burger span{display:block;width:17px;height:1.5px;background:var(--ink-1);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:17px;
height:1.5px;background:var(--ink-1)}
.burger span::before{top:-5px}.burger span::after{top:5px}
.skip{position:absolute;left:-9999px;top:0;background:var(--brand);color:#fff;
padding:10px 16px;border-radius:0 0 8px 0;z-index:100}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}
@media (max-width:999.98px){
  .nv-links,.nv-cta{display:none}
  .burger{display:flex}
  .nv-in.open{height:auto;flex-wrap:wrap;padding-bottom:18px}
  .nv-in.open .nv-links{display:flex;flex-direction:column;align-items:flex-start;
    width:100%;gap:4px;margin:12px 0 0}
  .nv-in.open .nv-links a,.nv-in.open .dd>button{width:100%;padding:11px 0;
    border-bottom:1px solid var(--rule)}
  .nv-in.open .dd{width:100%}
  .nv-in.open .dd-menu{position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:0;padding:4px 0 4px 12px;min-width:0}
  .nv-in.open .nv-cta{display:flex;width:100%;margin:14px 0 0}
}

/* ============ FIX 4: typographic hierarchy ============
   The old page ran headline->body inside a narrow band, so nothing led the
   eye. These steps are deliberately far apart. */
.t-display{font-size:clamp(38px,6.2vw,68px);line-height:1.04;font-weight:700;
letter-spacing:-.03em;color:var(--ink-0)}
.t-h2{font-size:clamp(28px,3.6vw,38px);line-height:1.14;font-weight:600;
letter-spacing:-.02em;color:var(--ink-0)}
.t-h3{font-size:21px;line-height:1.3;font-weight:600;letter-spacing:-.01em;color:var(--ink-0)}
.t-body{font-size:17px;line-height:28px;font-weight:400;color:var(--ink-2)}
.t-lead{font-size:19px;line-height:31px;font-weight:400;color:var(--ink-2)}
/* mono is for labels, timestamps, hashes, identifiers, paragraph refs and
   country codes. Never body prose. */
.t-label{font-family:var(--f-mono);font-size:11.5px;font-weight:500;
letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.t-cap{font-family:var(--f-mono);font-size:13px;line-height:1.6;color:var(--ink-3)}

/* ============ FIX 5: break the symmetry ============
   Varied padding. Dense bands sit tight, statements breathe. */
.sec{padding:76px 0}
.sec-air{padding:clamp(84px,11vw,152px) 0}
.sec-tight{padding:56px 0}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}
.wrap-narrow{max-width:860px;margin:0 auto;padding:0 24px}
/* asymmetric, never 50/50 */
.split{display:grid;gap:clamp(32px,5vw,72px);align-items:center}
.split-5545{grid-template-columns:1.22fr 1fr}
.split-4060{grid-template-columns:1fr 1.42fr}
.bleed-r{margin-right:calc(-1 * max(0px, (100vw - 1140px) / 2) - 24px)}

/* ============ FIX 6: depth, restrained ============ */
.card-q{background:var(--paper);border:1px solid var(--rule);border-radius:12px;
box-shadow:0 1px 2px rgba(13,14,35,.04),0 8px 24px rgba(13,14,35,.06)}
.float{box-shadow:0 2px 6px rgba(13,14,35,.06),0 18px 44px rgba(13,14,35,.13)}
.hov{transition:transform 150ms ease,box-shadow 150ms ease}
a.hov:hover,button.hov:hover{transform:translateY(-2px)}

/* ============ FIX 2: artifacts ============ */
.art{background:var(--paper);border:1px solid var(--rule);border-radius:12px;overflow:hidden;
box-shadow:0 1px 2px rgba(13,14,35,.04),0 8px 24px rgba(13,14,35,.06)}
.art-bar{display:flex;align-items:center;gap:9px;padding:11px 15px;
border-bottom:1px solid var(--rule);background:var(--bg-tint)}
.art-bar .dot{width:8px;height:8px;border-radius:50%;background:var(--rule-strong)}
.art-bar .nm{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.06em;
text-transform:uppercase;color:var(--ink-3)}
.art-bar .nm b{color:var(--brand-dark);font-weight:600}
.art-body{padding:4px 0}
.logrow{display:grid;grid-template-columns:104px 1fr;gap:14px;padding:12px 16px;
border-bottom:1px solid var(--rule);font-family:var(--f-mono);font-size:12.5px;line-height:1.5}
.logrow:last-child{border-bottom:0}
.logrow .ts{color:var(--ink-4);white-space:nowrap}
.logrow .who{color:var(--ink-1);font-weight:500}
.logrow .act{color:var(--ink-3);display:block;margin-top:3px}
.logrow .chg{display:block;margin-top:4px}
.logrow .old{color:var(--ink-4);text-decoration:line-through}
.logrow .new{color:var(--emerald-dark);font-weight:500}
.logrow.rej .who{color:#92400E}
.tag{display:inline-block;font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;
text-transform:uppercase;padding:3px 8px;border-radius:100px;margin-left:8px}
.tag.ok{background:var(--emerald-tint);color:var(--emerald-dark)}
.tag.no{background:rgba(245,158,11,.14);color:#92400E}
/* evidence card */
.ev{display:grid;grid-template-columns:auto 1fr;gap:14px;padding:16px}
.ev-ic{width:38px;height:38px;border-radius:9px;background:var(--brand-tint);
display:flex;align-items:center;justify-content:center;font-family:var(--f-mono);
font-size:10px;font-weight:600;color:var(--brand-dark)}
.ev .fn{font-size:14.5px;font-weight:600;color:var(--ink-0);word-break:break-all}
.ev .meta{font-family:var(--f-mono);font-size:11.5px;color:var(--ink-3);margin-top:5px;line-height:1.7}
.ev .hash{color:var(--ink-2);word-break:break-all}
/* sign-off record */
.so{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.so div{padding:13px 16px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.so div:nth-child(3n){border-right:0}
.so .k{font-family:var(--f-mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
color:var(--ink-4);display:block;margin-bottom:5px}
.so .v{font-size:13.5px;color:var(--ink-1);font-weight:500}
.so .v.mono{font-family:var(--f-mono);font-size:12px}
/* export tree */
.tree{padding:16px 18px;font-family:var(--f-mono);font-size:12.5px;line-height:2;color:var(--ink-2)}
.tree .d{color:var(--ink-0);font-weight:600}
.tree .s{color:var(--ink-4)}

/* ============ FIX 1: LEDGER - denser than its neighbours ============ */
.ledger{width:100%;border-collapse:collapse;font-size:14.5px}
.ledger th{text-align:left;padding:12px 16px;background:var(--bg-tint);
font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
color:var(--ink-3);font-weight:600;white-space:nowrap;border-bottom:1px solid var(--rule)}
.ledger td{padding:15px 16px;border-bottom:1px solid var(--rule);vertical-align:top;
line-height:1.55;color:var(--ink-2)}
.ledger td:first-child{color:var(--ink-0);font-weight:600;white-space:nowrap}
.ledger tr:last-child td{border-bottom:0}
.scroller{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--rule);
border-radius:12px;background:var(--paper)}
.scroller table{min-width:720px}
.scroll-cue{display:none;font-family:var(--f-mono);font-size:11px;letter-spacing:.07em;
text-transform:uppercase;color:var(--ink-4);margin-bottom:9px}

/* ============ FIX 1F: DARK, one per page ============ */
.dark{background:var(--ink-0);color:#fff;position:relative;overflow:hidden}
.dark::before{content:"";position:absolute;inset:0;opacity:.035;pointer-events:none;
background-image:radial-gradient(#fff 1px,transparent 1px);background-size:22px 22px}
.dark .wrap,.dark .wrap-narrow{position:relative}
.dark .t-display,.dark .t-h2,.dark .t-h3{color:#fff}
.dark .t-body,.dark .t-lead{color:#c9cbd8}
.dark .t-label{color:#8b8fa8}
.dark .art{background:#141530;border-color:#2a2c4e}
.dark .art-bar{background:#1a1c3a;border-bottom-color:#2a2c4e}
.dark .logrow{border-bottom-color:#2a2c4e}
.dark .logrow .who{color:#e8e9f2}
.dark .logrow .act{color:#9295ad}

/* ============ FIX 6: motion ============ */
.rise{opacity:0;transform:translateY(14px);
transition:opacity 300ms ease,transform 300ms ease}
.rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rise{opacity:1;transform:none;transition:none}
  .hov{transition:none}
  a.hov:hover,button.hov:hover{transform:none}
}

@media (max-width:860px){
  .split-5545,.split-4060{grid-template-columns:1fr}
  .bleed-r{margin-right:0}
  .so{grid-template-columns:1fr 1fr}
  .so div:nth-child(3n){border-right:1px solid var(--rule)}
  .so div:nth-child(2n){border-right:0}
  .scroll-cue{display:block}
  .sec,.sec-air{padding:60px 0}
  .logrow{grid-template-columns:1fr}
  .logrow .ts{margin-bottom:2px}
}

.ln{padding:18px 20px}
.ln-step{display:flex;flex-direction:column;gap:4px}
.ln-k{font-family:var(--f-mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
color:var(--ink-4)}
.ln-v{font-size:14px;color:var(--ink-1);font-weight:500}
.ln-v.mono{font-family:var(--f-mono);font-size:12.5px}
.ln-rule{width:1px;height:18px;background:var(--rule-strong);margin:7px 0 7px 5px}
.dark .ln-v{color:#e8e9f2}
.dark .ln-rule{background:#2a2c4e}

.lv-btn{font:inherit;font-size:13.5px;font-weight:600;font-family:var(--f-sans);
background:var(--ink-0);color:#fff;border:0;padding:10px 16px;border-radius:9px;cursor:pointer;
transition:transform 150ms ease,opacity 150ms ease}
.lv-btn:hover{transform:translateY(-2px)}
.lv-btn[disabled]{opacity:.5;cursor:default;transform:none}
.lv-out{display:none;border-top:1px solid var(--rule);padding:14px 16px;background:#fffdf7}
.lv-out.on{display:block}
.lv-out .h{font-family:var(--f-mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
color:#92400E;font-weight:600}
.lv-out pre{margin:8px 0 0;font-family:var(--f-mono);font-size:11.5px;line-height:1.65;
color:var(--ink-2);white-space:pre-wrap;word-break:break-word}
.lv-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:12px 16px;border-top:1px solid var(--rule);background:var(--bg-tint);flex-wrap:wrap}
.lv-bar .n{font-family:var(--f-mono);font-size:11px;color:var(--ink-3);letter-spacing:.05em}
@media (prefers-reduced-motion:reduce){.lv-btn{transition:none}.lv-btn:hover{transform:none}}

/* hoisted from <body> */

.grants{width:100%;border-collapse:collapse;font-size:14px}
.grants th{text-align:left;padding:11px 14px;background:var(--bg-tint);font-family:var(--f-mono);
font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:600;
border-bottom:1px solid var(--rule);white-space:nowrap}
.grants td{padding:13px 14px;border-bottom:1px solid var(--rule);vertical-align:top;
color:var(--ink-2);line-height:1.55}
.grants td:first-child{font-family:var(--f-mono);font-size:12.5px;color:var(--ink-0);
font-weight:600;white-space:nowrap}
.grants tr:last-child td{border-bottom:0}
.yes{color:var(--emerald-dark);font-weight:600}
.no{color:#92400E;font-weight:600}
.qa{border-left:3px solid var(--brand);background:var(--bg-tint);padding:18px 22px;
border-radius:0 12px 12px 0;margin:20px 0}
.qa h3{font-size:16px;font-weight:600;color:var(--ink-0);margin:0 0 8px}
.qa p{font-size:15px;line-height:1.65;color:var(--ink-2);margin:0 0 8px}
.qa p:last-child{margin-bottom:0}
.sub{display:grid;grid-template-columns:auto 1fr;gap:0;border:1px solid var(--rule);
border-radius:12px;overflow:hidden}
.sub div{padding:13px 16px;border-bottom:1px solid var(--rule)}
.sub div:nth-child(2n){border-left:1px solid var(--rule)}
.sub div:nth-last-child(-n+2){border-bottom:0}
.sub .n{font-weight:600;color:var(--ink-0);font-size:14.5px;white-space:nowrap}
.sub .d{font-size:14px;color:var(--ink-2);line-height:1.55}
@media (max-width:700px){.sub{grid-template-columns:1fr}
.sub div:nth-child(2n){border-left:0;padding-top:0}}


/* ==================================================================
   DESIGN SYSTEM v2 - tokens, lockup, header, container, spacing.
   Appended last so it wins on source order. See shellkit.py.
   ================================================================== */
:root{
  /* 8px spacing scale - the only permitted vertical/horizontal steps */
  --sp-1:8px;  --sp-2:16px; --sp-3:24px; --sp-4:32px; --sp-5:40px;
  --sp-6:48px; --sp-7:56px; --sp-8:64px; --sp-10:80px; --sp-12:96px;
  --sp-16:128px; --sp-20:160px;
  /* one container, one gutter */
  --container:var(--container-default);
  /* --measure / --measure-wide / --gutter now live ONLY in the layout
     contract below. They were defined here too (32em, 46em, 24px) and were
     shadowed purely by source order - one reordering away from silently
     reverting the site to a 544px measure. */
  --header-h:72px;
  /* #9ca3af failed AA at 2.5:1 and is off-palette. --ink-4 now resolves to a
     palette colour that measures 4.77:1 on white. */
  --ink-4:#6b7280;
  --ink-muted:#6b7280;
}
@media (max-width:860px){ :root{ --gutter:20px; --header-h:64px; } }

html{scroll-padding-top:calc(var(--header-h) + var(--sp-2))}

/* ---------- container: header and content share one edge ----------
   .nav-in / .container are the legacy shell (blog, /proof/, /deadline-checker).
   They get the same container so the two shells cannot drift apart again. */
.wrap,.wrap-narrow,.nv-in,.nav-in,.nav-inner,.container{
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
/* the reading column constrains the TEXT, not the box, so its left edge stays
   on the container edge and lines up with the header above it */
.wrap-narrow > *{max-width:var(--measure-wide)}
.wrap-narrow > .split,
.wrap-narrow > .scroller,
.wrap-narrow > figure,
.wrap-narrow > .qset,
.wrap-narrow > .res,
.wrap-narrow > .toolbar,
.wrap-narrow > .plans{max-width:none}

/* ---------- vertical rhythm ---------- */
.sec{padding-block:var(--sp-12)}
.sec-air{padding-block:var(--sp-12)}
/* deliberately short bands: a one-line statement or a closing CTA. At 96px
   these measured 56-72% empty. */
.sec-tight{padding-block:var(--sp-8)}
/* Wide tables scroll inside their own box instead of pushing the page sideways. */
/* ---- Part F: mega-menu navigation ----
   The BASE .dd rules live here, not in a page stylesheet. They previously only
   existed on the modern shell, so when the dropdowns were rolled out to the
   legacy pages the menus had no positioning and rendered inline and expanded,
   pushing the nav 695px off centre and overflowing the page. */
.dd{position:relative}
.dd>button{font:inherit;font-size:14.5px;color:var(--ink-2);background:none;border:0;
cursor:pointer;padding:6px 0;display:inline-flex;align-items:center;gap:6px}
.dd>button:hover{color:var(--ink-0)}
.dd>button svg{transition:transform .18s ease}
.dd[data-open="1"]>button svg{transform:rotate(180deg)}
.dd-menu{position:absolute;top:calc(100% + 10px);left:-16px;min-width:290px;
background:var(--paper);border:1px solid var(--rule);border-radius:12px;padding:8px;
box-shadow:0 12px 34px rgba(13,14,35,.10);opacity:0;visibility:hidden;
transform:translateY(-6px);transition:opacity .16s ease,transform .16s ease,
visibility .16s ease;z-index:80}
.dd[data-open="1"] .dd-menu{opacity:1;visibility:visible;transform:none}
.dd-menu a{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;
border-radius:8px;text-decoration:none}
.dd-menu a:hover{background:var(--bg-tint);text-decoration:none}
.dd-menu .tl{font-size:14.5px;color:var(--ink-0);font-weight:600;display:block}
.dd-menu .ds{font-family:var(--f-mono);font-size:11px;color:var(--ink-3);display:block;
margin-top:3px;line-height:1.45}
.dd-menu .mi{width:18px;height:18px;color:var(--brand);flex:none;margin-top:2px}
.dd-menu .mt{display:block;min-width:0}
/* A mega panel is centred on the LINKS GROUP, not on its own button. Centring
   each panel under its button pushed the leftmost one off-screen at 1000px. */
.nv-links,.nav-links{position:relative}
.dd-mega{position:static}
.dd-mega .dd-menu.mega{display:grid;grid-template-columns:repeat(2,minmax(240px,1fr));
gap:2px;width:min(600px,calc(100vw - 32px));left:50%;margin-left:0;
transform:translateX(-50%) translateY(-6px)}
.dd-mega[data-open="1"] .dd-menu.mega{transform:translateX(-50%)}
@media (max-width:999.98px){
  .dd-mega{position:relative}
  .dd-mega .dd-menu.mega{display:block;width:100%;left:0;transform:none}
  .dd-mega[data-open="1"] .dd-menu.mega{transform:none}
  .dd-menu .mi{display:none}
}
.tbl-wrap{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
/* A 70-char URL inside a <code> block set a 332px min-content floor in a
   279px box and pushed the page 6px sideways at 375. Long tokens wrap. */
code,kbd,samp{overflow-wrap:anywhere}

/* ==================================================================
   LAYOUT CONTRACT v2
   One container. No page, shell or component may invent its own width.

   measure  570px = 73 characters COUNTED at 17px/28px Inter (not computed).
            680px counts 89 and fails the 60-75 target.
   Nesting rule: a section's container matches its content. Prose-only
   sections use the measure as their container - a 570px column centred
   inside a 1200px container is 48% dead space, which is the defect this
   block exists to remove.
   ================================================================== */
:root{
  --container:1200px;
  --container-wide:1200px;      /* deliberately identical - one width */
  --container-default:1200px;   /* legacy alias, same value */
  --container-prose:calc(var(--measure) + var(--gutter) * 2);
  --measure:570px;
  --measure-wide:880px;
  --measure-center:470px;
  --rule-tint:#e0e2ff;
  --gutter:24px;
  --gutter-desktop:24px;
  --gutter-mobile:20px;
  --sp-1:8px;  --sp-2:16px; --sp-3:24px; --sp-4:32px; --sp-5:40px;
  --sp-6:48px; --sp-7:56px; --sp-8:64px; --sp-9:72px; --sp-10:80px;
  --sp-12:96px; --sp-16:128px; --sp-20:160px;
}
@media (max-width:860px){
  :root{--gutter:var(--gutter-mobile)}
}

/* ---- the one container. Every wrapper, every shell, every page ---- */
.wrap,.wrap-wide,.wrap-narrow,.wrap-narrow.rise,.container,.container.narrow,
.nav-in,.nv-in,.nav-inner,.foot-in,.list-head,.cards,
.post.art-grid,.art-grid{
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* ---- prose-only sections: the container IS the measure ----
   .legal-nav-inner is here, not in the group above: /terms and /privacy are
   prose-only pages, so their nav has to align with the prose shell beneath
   it. At 1200 it sat 291px wider on each side than the text it framed. */
.wrap-prose,.legal-shell,.legal-nav-inner,.sec-prose > .wrap,.sec-prose > .wrap-narrow,
.sec-prose > .wrap-mw,.sec-prose > .container,.sec-prose > .wrap-wide{
  max-width:calc(var(--measure) + var(--gutter) * 2);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* ---- artifact bands: prose plus one table/diagram ---- */
.wrap-mw,.sec-mw > .wrap,.sec-mw > .wrap-narrow,.sec-mw > .wrap-prose,
.sec-mw > .container,.sec-mw > .wrap-wide{
  max-width:calc(var(--measure-wide) + var(--gutter) * 2);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* prose never widens past the measure; tables, diagrams and grids break out */
.measure{max-width:min(var(--measure),52ch)}
.breakout{max-width:var(--measure-wide)}
.measure-center{max-width:var(--measure-center);margin-inline:auto}

/* the article grid has to fit inside the one container:
   220 + 570 + 260 + (2 x 40 gap) = 1130, inside the 1152 content box */
@media (min-width:1201px){
  .art-grid{grid-template-columns:220px minmax(0,var(--measure)) 260px;
    gap:var(--sp-5);justify-content:center}
}

/* ---- Part 2: dead-band treatments ----
   .band-split WAS a two-column grid, 1fr + 520px. Measured on the two bands
   that use it, the prose column came out 312px wide and ran far taller than
   the diagram beside it:
       /trust/    prose 312x867  art 520x334  -> 533px of empty column
       /product/  prose 312x1601 art 520x297  -> 1303px of empty column
   and 312px renders 33-39 characters a line against a 60-75 target. A grid is
   the wrong shape when one cell is three paragraphs and the other is a fixed
   360px diagram. The band now STACKS: prose at the measure, diagram beneath
   it, and the section's container is the measure so both fill it. */
.band-split{display:block}
.band-art{margin-top:var(--sp-6)}
.band-art svg{width:100%;height:auto;display:block}
.mx td{text-align:left}
.dd > button,.nv-links .dd > button{min-height:40px}

/* ---- content must FILL its container ----
   A centred container holding a narrower fixed-width child is still a
   lopsided band: the pricing row was 720px of grid sitting left inside an
   1152px box, which is the gap the screenshots circled. */
.pricerow{max-width:none;grid-template-columns:repeat(2,minmax(0,1fr))}
.intro-sub{max-width:min(var(--measure),52ch)}

/* ---- line length is FONT-RELATIVE, not a fixed pixel width ----
   A px cap only holds the character count at one font size. The same 570px
   column counts 67 characters at 17px and 97 at 12px, so every caption, note
   and small-print line broke the 75-character limit while the body copy sat
   inside it. 1ch scales with the font, so a ch cap holds the count steady across sizes.
   55ch measured 71-79 depending on word length; 52ch brings the worst
   line on the whole site to 75. min() keeps the
   body column at the counted 570px and lets smaller text cap itself. */
main p,main li,main dd,main blockquote,
main .wrap p,main .wrap-narrow p,main .wrap p.t-body,main .wrap p.t-lead,
main .wrap-narrow p.t-body,main .wrap-narrow p.t-lead,
main p.t-cap,main .wrap > p.t-cap,main .wrap-narrow > p.t-cap,
.note,.lede,.excerpt,.who,.t-cap,.t-body,.t-lead,.intro-sub,.legal-meta,
/* .list-head is a header element outside main, so `main p` never reached it */
.list-head p,.secbar p,
/* blog posts render outside the main element, so scope to article too */
article p,article li,article dd,.post-body p,.div-item p{
  max-width:min(var(--measure),52ch);
}

/* ---- monospace needs its own ch cap ----
   In a MONOSPACE font 1ch is exactly one character, so the 52ch above renders
   71-75 characters in Inter but exactly 52 in JetBrains Mono - under the 60
   floor. Measured: .t-cap at 13px came out 406px wide, median 47-52 chars.
   68ch puts mono captions at 68 characters, inside the same 60-75 band. */
main p.t-cap,main .wrap > p.t-cap,main .wrap-narrow > p.t-cap,.t-cap{
  max-width:min(var(--measure),68ch);
}
/* CONTRACT_END */
/* Product mega menu: a labelled group.
   .dd-menu.mega is a two-column grid, so a group heading has to span both
   tracks or it sits in a cell and reads as a fifth menu item. */
.dd-menu.mega .mega-h{
  grid-column:1 / -1;
  font-family:var(--f-mono);
  font-size:10.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-3);
  padding:13px 12px 5px;
  margin-top:6px;
  border-top:1px solid var(--rule);
}
@media (max-width:860px){
  /* the mega collapses to a single block on mobile; the heading still spans */
  .dd-menu.mega .mega-h{grid-column:auto}
}

/* ---- Part G: prose measure, applied where page CSS never did ---- */
/* A caption is not body prose. The prose measure (32em) resolved to 416px at
   13px and left 23 of 24 captions hugging the left of a 1200px band. */
/* 40em, not the prose or container token: JetBrains Mono at 13px fits ~66
   characters in 520px. 46em gave 598px and pushed captions past 75 chars,
   32em gave 416px and left them as a narrow column. */
.t-cap{max-width:min(var(--measure),68ch)}
/* main .wrap-narrow > p (0,1,2) outranks .t-cap (0,1,0), so these need to
   match on element AND class to win. */
/* Part 4: a caption follows its block instead of imposing its own centred
   box. It KEEPS the measure cap: .t-cap is monospace, and in a monospace
   font 1ch IS one character, so 54ch here is 54 characters - correct.
   (Dropping it first time round let captions run to 133 characters.) */
main p.t-cap,main .wrap > p.t-cap,main .wrap-narrow > p.t-cap{max-width:min(var(--measure),68ch);margin-inline:0;text-align:inherit}
p.t-cap.t-cap-center{text-align:center;margin-inline:auto}
main p.t-cap.t-cap-left,main .wrap > p.t-cap.t-cap-left,main .wrap-narrow > p.t-cap.t-cap-left,.t-cap-left{text-align:left;margin-inline:0}

main p,main li,main dd,main blockquote{max-width:min(var(--measure),52ch)}
/* .wrap-narrow > * carries --measure-wide so HEADINGS are not squeezed, but a
   class selector outranks "main p", so prose inside it kept the 46em box and
   ran to 102 characters. This is more specific and wins. */
.wrap-narrow > p,.wrap-narrow > li,.wrap-narrow > blockquote,main p.t-body,main p.t-lead,main .wrap-narrow > p{max-width:min(var(--measure),52ch)}
/* things that are not prose must not be clamped */
main table p,main table li,main .art p,main .logrow,main .cardgrid p,
main .rescards p,main .triad p,main .why p,main .stepcaps p,main .ptier p,
main figure p,main .dd-menu p{max-width:none}
/* ---- Part G: one button size and one radius ---- */
.primary.primary,.hov.hov,.go.go,.tgo.tgo,.lv-btn.lv-btn,.nav-cta.nav-cta,.btn.btn{
min-height:48px;border-radius:12px;display:inline-flex;align-items:center;
justify-content:center;padding-top:0;padding-bottom:0;line-height:1.1}

.sec-tight{padding-block:var(--sp-8)}
.sec-hero{padding-block:var(--sp-12) var(--sp-6)}
@media (max-width:860px){
  .sec{padding-block:var(--sp-8)}
  .sec-air{padding-block:var(--sp-10)}
  .sec-tight{padding-block:var(--sp-6)}
  .sec-hero{padding-block:var(--sp-8) var(--sp-5)}
}

/* ---------- the lockup ---------- */
.lockup{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-1);
  text-decoration:none;
  color:var(--ink-0);
  font-family:var(--f-sans);
  font-weight:700;
  font-size:17px;
  line-height:1;
  letter-spacing:-.01em;
  white-space:nowrap;
}
.lockup:hover{text-decoration:none}
.lockup-mark{width:1.03em;height:1em;flex:none;display:block;color:var(--brand);/* viewBox is cropped to the ink (15 12 70 68), so this box IS the mark. Nudge onto the cap-band centre of the wordmark. */transform:translateY(-.2px)}
/* one span, so the two words share a baseline and normal tracking */
.lockup-word{display:inline-block;letter-spacing:-.01em}
.lockup-co{color:var(--emerald);letter-spacing:-.01em;margin:0;padding:0}
.lockup-dark{color:#fff}
.lockup-dark .lockup-mark{color:#fff}
.lockup:focus-visible{outline:2px solid var(--brand);outline-offset:4px;border-radius:4px}

/* ---------- header: identical on both shells ----------
   DESKTOP ONLY. Below 861px the shells have their own drawer behaviour
   (.nv-links stacks, .nv-cta hides behind the burger). Applying the flex row
   unconditionally overrode that and pushed a 458px nav across a 375px
   viewport, which is a horizontal scrollbar on every page. */
.nv,.nav{position:sticky;top:0;z-index:60}
@media (min-width:861px){
  /* Legacy .nav shell fallback (its own drawer breakpoint is 760px). */
  .nav-in,.nav-inner{
    height:var(--header-h);
    display:flex;
    align-items:center;
    gap:var(--sp-6);
    justify-content:space-between;
  }
  .nav-links{
    display:flex;
    align-items:center;
    gap:var(--sp-4);
    margin:0;
    margin-inline-start:auto;
  }
  .nav-cta{margin:0;flex:none}
  .nav-links > a{
    display:inline-flex;align-items:center;gap:6px;
    height:var(--sp-5);padding:0;
    font-size:15px;line-height:1;
  }
}
/* Modern .nv shell. Base state is the drawer bar; .nv-in.open grows it. */
.nv-in{
  height:var(--header-h);
  display:flex;
  align-items:center;
  gap:var(--sp-6);
  justify-content:space-between;
}
@media (min-width:1000px){
  /* Centred nav, BOTH shells. 1fr auto 1fr centres the middle column on the
     CONTAINER; margin-inline-start:auto centred it on nothing, which is why the
     nav sat up to 327px right of centre on the legacy pages. */
  .nv-in,.nav-in{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
  }
  .nv-in > .lockup,.nav-in > .lockup{justify-self:start}
  .nv-links,.nav-links{
    display:flex;align-items:center;gap:var(--sp-4);
    margin:0;justify-self:center;
  }
  .nv-cta{
    display:flex;align-items:center;gap:var(--sp-2);
    margin:0;flex:none;justify-self:end;
  }
  .nav-cta{margin:0;flex:none;justify-self:end}
  .nv-links > a,.nv-links .dd > button,.nav-links > a{
    display:inline-flex;align-items:center;gap:6px;
    height:var(--sp-5);padding:0;
    font-size:15px;line-height:1;
  }
}

/* ---------- control sizing: one height per role ---------- */
.tgo,.hov,.btn,.plan .go,.nv-cta .cta,.nv-cta a[class*="cta"]{
  min-height:var(--sp-6);
  display:inline-flex;align-items:center;justify-content:center;
  padding-block:0;
}
.btn.sec,.btn[disabled]{min-height:var(--sp-6)}

/* ---------- one card radius ---------- */
.art,.q,.plan,.pgrid,.scroller,.tcard,.linkbox,.res,.sub,figure.dg .fr{border-radius:12px}
.note{border-radius:0 12px 12px 0}

/* ---------- contrast: lift the mono meta off the failing grey ---------- */
.t-cap,.logrow .ts,.scroll-cue,.pmap td.ct,.hintline,.mx tr.yr td,
.lrow .u,.tmeta .k,.plan .yr,.scoreof,.rrow .rk,.pgrid .r,.so .k,.ev .meta{
  color:var(--ink-muted);
}
/* On the dark ground, #6b7280 measures 3.4-3.7:1 and #2B2DBC measures 1.7:1.
   Neither is legible; both are replaced with light tints of the same hues. */
.dark .t-cap,.dark .t-label,.dark .logrow .ts,.dark .ln-k,.dark .art-bar .nm,
.dark .so .k,.dark .tree .s,.dark .hintline,.dark .rrow .rk{color:#a9adc4}
.dark .badge.req,.dark .lv-l,.dark .tag.ok,.dark .art-bar .nm b{
  background:rgba(255,255,255,.12);color:#cfd2ff}
.dark code,.dark .rrow code{color:#a9b0ff}
/* #059669 on white is 3.8:1 at small sizes. Drop small mono figures to ink on
   LIGHT grounds only - scoping this globally put #1a1a2e on a #141530 card and
   measured 1.04:1, i.e. invisible. Caught by the composited contrast pass. */
.logrow .new,.pmap td .new,.rrow .new{color:var(--ink-1);font-weight:600}
.dark .logrow .new,.dark .pmap td .new,.dark .rrow .new{color:#7ee2b8}
/* brand-dark on an 8% brand tint is 1.4:1. Solid brand ground instead. */
.ev-ic{background:var(--brand);color:#fff}
/* small mono meta sits on white AND on #f5f6ff. #6b7280 measures 4.77:1 on
   white but only 4.49:1 on the tint, which misses AA. #4b5563 is on-palette
   and clears both. */
.pmap th,.mx th,.grants th,.ledger th,.scroll-cue,.pmap tr.grp td,.mx tr.yr td,
.t-cap,
.t-label,.art-bar .nm,.rrow .rk,.so .k,.tmeta .k,.pgrid .r,.ln-k,
.scoreof,.res-hd .rt,.chk .cr,.hintline,.lrow .u{color:#4b5563}
/* badges: tint grounds need the darker ink of their own hue */
.tag.ok,.badge.ok,.pill,.lv-r{color:#04613f}
.badge.warn,.tag.no{color:#8a3f07}
.lv-n,.badge.soft{color:#4b5563}
/* legacy blog badges sat at 3.37:1 on their tints */
.cat,.cat.ref,.fmt,.fmt.research,.pill.final,.pill.draft,
.card .cat,.card .cat.ref,.card .fmt,.card .fmt.research{color:#3a3f52}

/* /resources/: heading block then a card grid. The old 1.35fr/1fr rgrid left a
   340px void beside every list. */
.rhead{max-width:var(--measure-wide);margin-bottom:var(--sp-4)}
.rlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--sp-2)}
.rlist a{display:block;padding:var(--sp-2) var(--sp-3);border:1px solid var(--rule);
border-radius:12px;background:var(--paper);text-decoration:none;
transition:transform 150ms ease,box-shadow 150ms ease,border-color 150ms ease}
.rlist a:hover{transform:translateY(-2px);border-color:var(--rule-strong);
box-shadow:0 1px 2px rgba(13,14,35,.04),0 8px 24px rgba(13,14,35,.06)}
.rlist .tl{font-size:16px;font-weight:600;color:var(--ink-0);display:block}
.rlist .ds{font-size:14px;color:var(--ink-2);display:block;margin-top:5px;line-height:1.5}
@media (max-width:640px){.rlist{grid-template-columns:1fr}}

/* ---------- measure: captions must not run the full container ---------- */
.t-cap{max-width:min(var(--measure),68ch)}















/* ================= ONE COLUMN v3 ================= */
:root{
  --col-prose:600px;
  --col-mixed:880px;
  --col-full:1200px;
  --body-size:19px;
  --body-lh:1.65;
}
/* --- the column. A section has exactly one, and it is centred. --- */
.wrap,.wrap-wide,.wrap-narrow,.wrap-narrow.rise,.wrap-prose,.wrap-mw,
.container,.container.narrow,.nav-in,.nv-in,.nav-inner,.legal-nav-inner,
.foot-in,.list-head,.cards,.art-grid,.post.art-grid{
  max-width:calc(var(--col-full) + var(--gutter) * 2);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.sec-prose > .wrap,.sec-prose > .wrap-narrow,.sec-prose > .wrap-wide,
.sec-prose > .wrap-prose,.sec-prose > .wrap-mw,.sec-prose > .container,
.wrap-prose,.legal-shell,.legal-nav-inner{
  max-width:calc(var(--col-prose) + var(--gutter) * 2);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.sec-mixed > .wrap,.sec-mixed > .wrap-narrow,.sec-mixed > .wrap-wide,
.sec-mixed > .wrap-prose,.sec-mixed > .wrap-mw,.sec-mixed > .container,
.sec-mw > .wrap,.sec-mw > .wrap-narrow,.sec-mw > .wrap-prose,
.sec-mw > .container,.sec-mw > .wrap-wide,.wrap-mw{
  max-width:calc(var(--col-mixed) + var(--gutter) * 2);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* --- EVERY direct child of a column fills it. This is the whole fix. ---
   !important is deliberate: the competing caps are two- and three-class
   selectors (main .wrap > p.t-cap) that outrank any one-class rule here. */
.wrap > *,.wrap-wide > *,.wrap-narrow > *,.wrap-prose > *,.wrap-mw > *,
.container > *,.legal-shell > *{
  max-width:none !important;
  margin-inline:0 !important;
}

/* --- ONE prose cap, and it is font-relative ---
   A pixel cap only holds the character count at one font size: 640px counts
   73 characters at 19px but 104 at 12.5px, which is how notes and list items
   kept breaking the limit. 1ch scales with the font, so min() holds the count
   steady at every size while --col-prose sets the ceiling. Measured:
     19px -> 600px -> 70 chars (the column binds, so prose fills it exactly)
     15px -> 475px -> 71        12.5px -> 395px -> 73
   --col-prose is 600 so that at body size min() picks the column exactly and
   prose FILLS its column in a prose-only section rather than sitting short. */
main p,main li,main dd,main blockquote,main figcaption,
.wrap p,.wrap li,.wrap dd,.wrap blockquote,
.wrap-narrow p,.wrap-narrow li,.wrap-narrow dd,
.wrap-wide p,.wrap-wide li,.wrap-mw p,.wrap-mw li,
.container p,.container li,.legal-shell p,.legal-shell li,
.qa p,.note,article p,article li,.post-body p{
  max-width:min(var(--col-prose),55ch) !important;
}
/* 55ch is tuned so that at 19px it coincides with --col-prose and body prose
   FILLS its column. The smaller faces need a tighter value or they overshoot:
   .qa p (15px) and list items (14.5px) measured 76-77 characters at 55ch. */
.qa p,.note p,.callout p,main li,.wrap li,.wrap-narrow li,.container li,
article li,.legal-shell li{
  max-width:min(var(--col-prose),50ch) !important;
}
/* A paragraph keeps the readable cap whether it is a direct child or nested.
   The first version let direct children fill the column, which pushed prose in
   1200px sections to 166 characters a line. In a --col-prose section the cap
   equals the column, so the same rule covers both cases. */
/* direct-child prose obeys the same cap - see above */
/* Single-line labels and callout BOXES fill the column: they never wrap, so a
   readability cap only shrinks the box and breaks the shared right edge.
   Wrapping text inside a callout is still capped by the prose rule above. */
p.t-label,.t-label,.legal-meta,div.note,.callout,.legal-callout{
  max-width:none !important;
}
p.t-cap,.t-cap{
  max-width:min(var(--col-prose),55ch) !important;
}

/* --- content wrappers are transparent ---
   Most sections are column > .rise > [label, heading, prose, caption], so the
   real elements are grandchildren. .rise fills the column; its children must
   fill it too, or the right edges stay ragged one level down. */
.rise > *,.intro > *,.rhead > *,.hero-copy > *,.band-split > div > *{
  max-width:none !important;
  margin-inline:0 !important;
}
/* MONO CAPTIONS carried arbitrary caps of their own - 530px (68ch), 359px
   (52ch), 580px, 619px. They now share ONE width with every other text
   element in the section, --col-prose. Letting them fill a 1200px column
   instead put a 13px caption on a 152-character line. */
p.t-cap,p.t-label,.t-cap,.t-label,figcaption{
  max-width:min(var(--col-prose),55ch) !important;
}
/* body prose keeps the readable cap even when its siblings are wider; this is
   the one authorised exception to right-edge equality */
.rise > p.t-body,.rise > p.lede,.intro > p.t-body,.rhead > p.t-body,
.band-split > div > p.t-body{
  max-width:var(--col-prose) !important;
}

/* --- body type: 19px/1.65 in a 640px column counts 73 characters ---
   .t-cap / .t-label are MONO captions and eyebrows, not body copy: the first
   version of this rule caught .wrap > p and pushed them from 13px to 19px. */
p.t-body,p.lede,.post-body p,article p,.legal-shell p,
.wrap > p:not(.t-cap):not(.t-label),
.wrap-narrow > p:not(.t-cap):not(.t-label){
  font-size:var(--body-size);
  line-height:var(--body-lh);
}

/* --- ALIGNMENT: left by default ---
   Measured on a large enterprise sustainability platform's marketing site:
   365 left-aligned text elements to 4 centred, and all four of those belong
   to a third-party cookie dialog - their own content never centres. Every
   left edge sits at one x (80px), and the text carries max-width:none.

   Ours ran 824 left to 46 centred, and the centred ones staircased, because
   text-align:center centres inside each element's OWN box. On /pricing/ the
   heading, prose and caption were 880 / 600 / 429 wide on a shared left edge
   at 513, so their optical centres landed at 953 / 813 / 727 - drifting left
   down the block. That is the staircase in the screenshot, and no amount of
   container work fixes it because the containers were already correct.

   So: left is the default, and centring is only valid when every child is the
   SAME width as the column, which makes the optical centres coincide. */
.cta-wrap,.intro-hero,.splash{text-align:left !important}
.cta-wrap > *,.intro-hero > *,.splash > *{
  width:auto;
  margin-inline:0 !important;
  text-align:left !important;
}
/* .measure-center existed only to centre a narrow block inside a wider one,
   which is the staircase generator. It is now a plain left-aligned cap. */
.measure-center{margin-inline:0 !important}

/* --- /trust/ hero: the second line's descenders met the block beneath --- */
.sec-hero h1,.hero-copy h1{
  line-height:1.14;
  padding-bottom:.06em;
}
.sec-hero h1{margin-bottom:var(--sp-3)}
/* A horizontally scrolling container's border box includes its scrollbar, so
   its bottom edge sat 2px BELOW the top of the caption after it. The caption
   carries an inline margin-top, so the override has to be !important. */
.scroller{padding-bottom:6px}
.scroller + p,.scroller + .t-cap,.scroller + *{
  margin-top:var(--sp-3) !important;
}
/* ONECOL_END */