/* Compliance page. Tokens only. */
.chip-danger { background: color-mix(in oklab, var(--danger) 14%, var(--surface)); color: var(--danger); }

.urgency { display: grid; gap: 0; border-top: 1px solid var(--line); }
.urgency .u-row { display: grid; grid-template-columns: 1fr; gap: 8px 24px; padding: 20px 0; border-bottom: 1px solid var(--line); align-items: start; }
@media (min-width: 768px) { .urgency .u-row { grid-template-columns: 200px 1fr 1.2fr; } }
.urgency .u-row p { margin: 0; color: var(--ink-2); }
.urgency .u-row .u-eg { color: var(--ink-3); font-size: .9375rem; }

.calc { display: grid; gap: clamp(20px, 3vw, 40px); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .calc { grid-template-columns: .8fr 1.2fr; } }
.calc fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.calc .q { display: grid; gap: 10px; padding: 16px 0; border-bottom: 1px dashed var(--line); }
.calc .q:first-of-type { padding-top: 0; }
.calc legend { font-weight: 600; padding: 0; margin-bottom: 10px; }
.seg { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; width: 168px; }
.seg label { position: relative; display: grid; place-items: center; min-height: 44px; border-radius: 999px; cursor: pointer; font-weight: 600; color: var(--ink-2); }
.seg input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; min-height: 0; margin: 0; cursor: pointer; }
.seg label:has(input:checked) { background: var(--brand); color: var(--brand-ink); }
.seg label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

.calc-out { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: clamp(20px, 2.6vw, 28px); box-shadow: var(--shadow-1); }
.calc-out .out-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; margin-bottom: 8px; }
.calc-out .out-list { list-style: none; margin: 0; padding: 0; }
.calc-out .out-list li { display: grid; gap: 4px 16px; padding: 14px 0; border-bottom: 1px dashed var(--line); grid-template-columns: 1fr; }
@media (min-width: 600px) { .calc-out .out-list li { grid-template-columns: 1fr 1.1fr; } }
.calc-out .out-list li:last-child { border-bottom: 0; }
.calc-out .out-list strong { font-family: var(--font-display); font-weight: 650; letter-spacing: -0.01em; display: block; }
.calc-out .out-list .cond { font-size: .8125rem; color: var(--ink-3); font-weight: 400; }
.calc-out .out-list .rule { font-family: var(--font-mono); font-size: .9063rem; color: var(--ink); }
.calc-out .out-list li.enter { animation: rowin .35s var(--ease); }
@keyframes rowin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.vault { width: 100%; border-collapse: collapse; font-size: .9688rem; min-width: 560px; }
.vault th, .vault td { text-align: left; padding: 16px 14px; border-bottom: 1px dashed var(--line); vertical-align: top; }
.vault thead th { font: 600 .8125rem/1.2 var(--font-body); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); border-bottom: 2px solid var(--ink); }
.vault tbody th { font-family: var(--font-display); font-weight: 650; letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; }
.vault td { color: var(--ink-2); }

.ladder-wrap { display: grid; gap: clamp(24px, 4vw, 56px); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .ladder-wrap { grid-template-columns: 1.3fr .7fr; } }
.ladder h3 { margin-bottom: 4px; }
.ladder p { margin: 0; color: var(--ink-2); max-width: 56ch; }
.feature-list.one { grid-template-columns: 1fr; }

.band-ink .checks li { color: color-mix(in oklab, var(--canvas) 82%, transparent); }
:root[data-theme="dark"] .band-ink .checks li { color: var(--ink-2); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .band-ink .checks li { color: var(--ink-2); } }

/* System dark without data-theme: site.css flips --ink to light, which would make .band-ink a light band. Keep it a dark band. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .band-ink { background: var(--surface-2); color: var(--ink); }
  :root:not([data-theme="light"]) .band-ink h1, :root:not([data-theme="light"]) .band-ink h2, :root:not([data-theme="light"]) .band-ink h3 { color: var(--ink); }
  :root:not([data-theme="light"]) .band-ink .lede, :root:not([data-theme="light"]) .band-ink .body { color: var(--ink-2); }
}