/* Faroluma design system — "nautical chart". Tokens first; components below. No build step. */

@font-face { font-family: "Fraunces"; src: url("../fonts/fraunces-latin-opsz.069cb90e11a3.woff2") format("woff2"); font-weight: 300 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fraunces"; src: url("../fonts/fraunces-latin-ext-opsz.a04d353989ad.woff2") format("woff2"); font-weight: 300 900; font-display: swap; unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Atkinson Next"; src: url("../fonts/ahn-latin-400.e8da57bc0c3d.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Atkinson Next"; src: url("../fonts/ahn-latin-ext-400.bcad3501e62c.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Atkinson Next"; src: url("../fonts/ahn-latin-400i.9b70e98b04c2.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Atkinson Next"; src: url("../fonts/ahn-latin-700.617b4197a93a.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Atkinson Next"; src: url("../fonts/ahn-latin-ext-700.521d9348d7ad.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0100-024F, U+1E00-1EFF; }
@font-face { font-family: "Atkinson Mono"; src: url("../fonts/ahm-latin-400.6044c091a508.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson Mono"; src: url("../fonts/ahm-latin-700.33ebda729f98.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --ink: #13203B; --paper: #FAF7F0; --surface: #FFFFFF; --surface-2: #F3EFE6; --rule: #E4DED1; --muted: #4A5568;
  --beam: #F4C04E; --beam-ink: #13203B; --teal: #0E6E6A; --teal-strong: #0A5753; --teal-soft: #E3F1EF;
  --critical: #B3261E; --high: #B54708; --medium: #8A6100; --low: #475569; --ok: #1E7A46;
  --prov-verified: #0E6E6A; --prov-estimated: #5B4BB7; --prov-inferred: #2F6690; --prov-ai: #8A3FA0; --prov-unavailable: #6B7280;
  --focus: #F4C04E;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-text: "Atkinson Next", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Atkinson Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --radius: 10px; --radius-sm: 6px; --gap: 16px; --max: 1160px;
  --shadow: 0 1px 0 rgba(19, 32, 59, .04), 0 1px 3px rgba(19, 32, 59, .06);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #ECE8DF; --paper: #0E1628; --surface: #16213A; --surface-2: #1B2945; --rule: #2A3754; --muted: #A9B1C3;
    --teal: #3FB8AF; --teal-strong: #6FD0C8; --teal-soft: #173a3d; --beam-ink: #13203B;
    --critical: #F2867F; --high: #F7A35C; --medium: #E3C26B; --low: #A9B1C3; --ok: #6FCF97;
    --prov-verified: #3FB8AF; --prov-estimated: #A99BF0; --prov-inferred: #7FB2DE; --prov-ai: #D59BE6; --prov-unavailable: #9CA3AF;
    --shadow: none; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ink: #ECE8DF; --paper: #0E1628; --surface: #16213A; --surface-2: #1B2945; --rule: #2A3754; --muted: #A9B1C3;
  --teal: #3FB8AF; --teal-strong: #6FD0C8; --teal-soft: #173a3d;
  --critical: #F2867F; --high: #F7A35C; --medium: #E3C26B; --low: #A9B1C3; --ok: #6FCF97;
  --prov-verified: #3FB8AF; --prov-estimated: #A99BF0; --prov-inferred: #7FB2DE; --prov-ai: #D59BE6; --prov-unavailable: #9CA3AF;
  --shadow: none; color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.55 var(--font-text); }
img, svg { max-width: 100%; height: auto; }
a { color: var(--teal); text-underline-offset: 3px; }
a:hover { color: var(--teal-strong); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 .5em; font-optical-sizing: auto; }
h1 { font-size: clamp(2rem, 4.5vw, 3rem); }
h2 { font-size: clamp(1.45rem, 3vw, 1.9rem); }
h3 { font-size: 1.2rem; }
h4 { font-size: 1rem; font-family: var(--font-text); font-weight: 700; letter-spacing: 0; }
p { margin: 0 0 1em; }
small, .small { font-size: .875rem; }
.muted { color: var(--muted); }
.mono, code, kbd { font-family: var(--font-mono); font-size: .92em; }
.num { font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
.eyebrow { font: 700 .75rem/1.2 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 .6rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -48px; background: var(--beam); color: var(--beam-ink); padding: 8px 14px; border-radius: var(--radius-sm); z-index: 100; font-weight: 700; }
.skip-link:focus { top: 12px; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 2rem 0; }

/* Layout */
.container { width: min(100% - 32px, var(--max)); margin-inline: auto; }
.narrow { width: min(100% - 32px, 720px); margin-inline: auto; }
.stack > * + * { margin-top: var(--gap); }
.row { display: flex; gap: var(--gap); flex-wrap: wrap; align-items: center; }
.row.between { justify-content: space-between; }
.grid { display: grid; gap: var(--gap); }
.grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.section { padding: clamp(40px, 7vw, 88px) 0; }
.section + .section { border-top: 1px solid var(--rule); }

/* Fixture banner */
.fixture-banner { background: repeating-linear-gradient(135deg, #3d2a00 0 12px, #4a3300 12px 24px); color: #FFE7A6; text-align: center; font: 700 .85rem/1.4 var(--font-mono); padding: 8px 16px; letter-spacing: .04em; }

/* Brand */
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font: 600 1.35rem/1 var(--font-display); letter-spacing: -0.02em; }
.brand svg { width: 28px; height: 28px; flex: none; }
.brand-mark rect.cell { fill: none; stroke: currentColor; stroke-width: 1.6; }
.brand-mark rect.lit { fill: var(--beam); stroke: var(--beam); }
.brand-mark path.beam { fill: var(--beam); opacity: .55; }

/* Public header/footer */
.site-header { border-bottom: 1px solid var(--rule); background: var(--paper); position: sticky; top: 0; z-index: 20; }
.site-header .bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.site-nav { display: flex; align-items: center; gap: 22px; }
.site-nav a { color: var(--ink); text-decoration: none; font-weight: 700; font-size: .95rem; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--teal); }
.menu-toggle { display: none; }
@media (max-width: 860px) {
  .site-nav { display: none; }
  .menu-toggle { display: block; }
  .menu-toggle > summary { list-style: none; cursor: pointer; padding: 8px 12px; border: 1px solid var(--rule); border-radius: var(--radius-sm); font-weight: 700; }
  .menu-toggle > summary::-webkit-details-marker { display: none; }
  .menu-toggle[open] .mobile-nav { display: grid; }
  .mobile-nav { display: none; position: absolute; left: 0; right: 0; top: 64px; background: var(--surface); border-bottom: 1px solid var(--rule); padding: 12px 16px 20px; gap: 6px; }
  .mobile-nav a { padding: 10px 4px; color: var(--ink); text-decoration: none; font-weight: 700; border-bottom: 1px solid var(--rule); }
}
.lang-switch { display: flex; gap: 6px; font: 700 .78rem/1 var(--font-mono); }
.lang-switch a { color: var(--muted); text-decoration: none; padding: 6px 6px; border-radius: 4px; text-transform: uppercase; }
.lang-switch a[aria-current="true"] { color: var(--ink); background: var(--surface-2); }
.site-footer { border-top: 1px solid var(--rule); padding: 40px 0 56px; color: var(--muted); font-size: .92rem; }
.site-footer a { color: var(--muted); }
.site-footer .cols { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.site-footer h4 { color: var(--ink); }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: var(--radius-sm); border: 1px solid transparent; font: 700 1rem/1.2 var(--font-text); text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.btn-primary { background: var(--teal); color: #FFFFFF; }
:root[data-theme="dark"] .btn-primary { color: #0E1628; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn-primary { color: #0E1628; } }
.btn-primary:hover { background: var(--teal-strong); color: #FFFFFF; }
.btn-beam { background: var(--beam); color: var(--beam-ink); }
.btn-beam:hover { filter: brightness(1.05); color: var(--beam-ink); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn-danger { background: transparent; color: var(--critical); border-color: var(--critical); }
.btn-sm { min-height: 34px; padding: 6px 12px; font-size: .9rem; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }
.link-btn { background: none; border: 0; padding: 0; color: var(--teal); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* Forms */
.form { display: grid; gap: 16px; }
.field { display: grid; gap: 6px; }
.field label, .label { font-weight: 700; font-size: .95rem; }
.field .help { color: var(--muted); font-size: .85rem; }
input[type="text"], input[type="email"], input[type="password"], input[type="url"], input[type="tel"], input[type="number"], input[type="search"], input[type="date"], select, textarea {
  width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font: 400 1rem/1.4 var(--font-text);
}
input:focus, select:focus, textarea:focus { border-color: var(--teal); outline: 3px solid color-mix(in srgb, var(--teal) 25%, transparent); outline-offset: 0; }
textarea { min-height: 120px; resize: vertical; }
.checkbox { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; }
.checkbox input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--teal); flex: none; }
.errorlist { list-style: none; margin: 0; padding: 0; color: var(--critical); font-size: .9rem; font-weight: 700; }
.field.has-error input, .field.has-error select { border-color: var(--critical); }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
fieldset { border: 1px solid var(--rule); border-radius: var(--radius); padding: 16px; margin: 0; }
legend { font-weight: 700; padding: 0 6px; }

/* Cards, tiles */
.card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }
.card.rule-left { border-left: 4px solid var(--rule); }
.card.sev-critical { border-left-color: var(--critical); } .card.sev-high { border-left-color: var(--high); }
.card.sev-medium { border-left-color: var(--medium); } .card.sev-low { border-left-color: var(--low); }
.card h3 { margin-bottom: .35em; }
.tile { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 16px 18px; display: grid; gap: 4px; align-content: start; }
.tile .value { font: 600 2.1rem/1 var(--font-display); font-variant-numeric: tabular-nums; }
.tile .value small { font: 700 .9rem/1 var(--font-mono); color: var(--muted); }
.tile .label { color: var(--muted); font-size: .9rem; font-weight: 400; }
.tile a { text-decoration: none; color: inherit; }
.score-hero { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center; }
.score-ring { width: 132px; height: 132px; border-radius: 50%; display: grid; place-items: center; border: 10px solid var(--teal-soft); position: relative; }
.score-ring .n { font: 600 2.6rem/1 var(--font-display); }
.score-ring .of { font: 700 .75rem/1 var(--font-mono); color: var(--muted); display: block; text-align: center; margin-top: 4px; }
@media (max-width: 560px) { .score-hero { grid-template-columns: 1fr; } }
.meter { height: 8px; background: var(--rule); border-radius: 4px; overflow: hidden; }
.meter > span { display: block; height: 100%; background: var(--teal); border-radius: 4px; }

/* Badges */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font: 700 .74rem/1.3 var(--font-mono); letter-spacing: .02em; border: 1px solid currentColor; white-space: nowrap; }
.badge svg { width: 12px; height: 12px; }
.prov-verified { color: var(--prov-verified); } .prov-estimated { color: var(--prov-estimated); }
.prov-inferred { color: var(--prov-inferred); } .prov-ai_generated { color: var(--prov-ai); } .prov-unavailable { color: var(--prov-unavailable); }
.sev { display: inline-flex; align-items: center; gap: 6px; font: 700 .78rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; }
.sev::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: currentColor; }
.sev-critical, .sev.critical { color: var(--critical); } .sev-high, .sev.high { color: var(--high); }
.sev-medium, .sev.medium { color: var(--medium); } .sev-low, .sev.low { color: var(--low); } .sev-ok { color: var(--ok); }
.conf { font: 700 .74rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; padding: 4px 8px; border-radius: 4px; background: var(--surface-2); color: var(--muted); }
.conf.high { color: var(--ok); } .conf.medium { color: var(--medium); } .conf.low { color: var(--critical); }
.status { font: 700 .78rem/1 var(--font-mono); padding: 5px 9px; border-radius: 4px; background: var(--surface-2); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.status.succeeded, .status.completed, .status.verified, .status.active { color: var(--ok); }
.status.running, .status.queued, .status.retry_wait, .status.in_progress { color: var(--teal); }
.status.partial, .status.unavailable, .status.past_due { color: var(--medium); }
.status.failed, .status.cancelled, .status.reopened, .status.critical { color: var(--critical); }

/* Tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: .95rem; }
th, td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font: 700 .75rem/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); background: var(--surface-2); }
tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; }
tr.is-own td { background: var(--teal-soft); font-weight: 700; }

/* Details / drawers */
details.drawer { border-top: 1px solid var(--rule); margin-top: 12px; padding-top: 10px; }
details.drawer > summary { cursor: pointer; font-weight: 700; color: var(--teal); list-style: none; display: inline-flex; gap: 6px; align-items: center; }
details.drawer > summary::-webkit-details-marker { display: none; }
details.drawer > summary::before { content: "+"; font-family: var(--font-mono); width: 1em; }
details.drawer[open] > summary::before { content: "–"; }
details.drawer .drawer-body { margin-top: 10px; display: grid; gap: 10px; }
.evidence { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: .9rem; }
.evidence li { display: flex; gap: 10px; justify-content: space-between; border-bottom: 1px dashed var(--rule); padding-bottom: 6px; overflow-wrap: anywhere; }

/* Messages */
.messages { list-style: none; padding: 0; margin: 16px 0; display: grid; gap: 8px; }
.message { padding: 12px 16px; border-radius: var(--radius-sm); border: 1px solid var(--rule); background: var(--surface); }
.message.success { border-left: 4px solid var(--ok); } .message.error { border-left: 4px solid var(--critical); }
.message.warning { border-left: 4px solid var(--medium); } .message.info { border-left: 4px solid var(--teal); }
.callout { padding: 16px 18px; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--rule); }
.callout.beam { background: color-mix(in srgb, var(--beam) 18%, var(--surface)); border-color: color-mix(in srgb, var(--beam) 60%, var(--rule)); }

/* Progress (audit sections) */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.steps li { display: grid; grid-template-columns: 22px 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-sm); }
.steps .dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--rule); }
.steps li[data-status="running"] .dot, .steps li[data-status="queued"] .dot, .steps li[data-status="retry_wait"] .dot { border-color: var(--teal); border-top-color: transparent; animation: spin 1s linear infinite; }
.steps li[data-status="succeeded"] .dot { background: var(--ok); border-color: var(--ok); }
.steps li[data-status="partial"] .dot, .steps li[data-status="unavailable"] .dot { background: var(--medium); border-color: var(--medium); }
.steps li[data-status="failed"] .dot { background: var(--critical); border-color: var(--critical); }
.steps li[data-status="skipped"] .dot { background: var(--rule); }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .steps .dot { animation: none !important; } * { scroll-behavior: auto !important; } }
.progress { height: 6px; background: var(--rule); border-radius: 3px; overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--teal); transition: width .4s; }

/* App shell */
.app-top { background: var(--surface); border-bottom: 1px solid var(--rule); position: sticky; top: 0; z-index: 20; }
.app-top .bar { display: flex; align-items: center; gap: 16px; min-height: 60px; }
.app-top .spacer { flex: 1; }
.biz-select select { min-height: 38px; padding: 6px 10px; max-width: 260px; }
.bell { position: relative; text-decoration: none; color: var(--ink); font-weight: 700; padding: 6px 10px; border: 1px solid var(--rule); border-radius: var(--radius-sm); }
.bell .count { background: var(--critical); color: #fff; border-radius: 999px; font: 700 .7rem/1 var(--font-mono); padding: 3px 6px; margin-left: 6px; }
.app-shell { display: grid; grid-template-columns: 228px 1fr; min-height: calc(100vh - 61px); }
.app-rail { border-right: 1px solid var(--rule); padding: 18px 12px; background: var(--paper); }
.app-rail nav { display: grid; gap: 2px; position: sticky; top: 78px; }
.app-rail a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; font-weight: 700; font-size: .95rem; }
.app-rail a:hover { background: var(--surface-2); }
.app-rail a[aria-current="page"] { background: var(--teal-soft); color: var(--teal-strong); }
.app-rail .rail-label { font: 700 .7rem/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 14px 12px 6px; }
.app-main { padding: 24px clamp(16px, 3vw, 36px) 64px; min-width: 0; }
.page-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.page-head h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0; }
.freshness { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: .85rem; color: var(--muted); margin-bottom: 18px; }
@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; }
  .app-rail { border-right: 0; border-bottom: 1px solid var(--rule); padding: 8px 16px; }
  .app-rail nav { position: static; display: flex; overflow-x: auto; gap: 4px; padding-bottom: 4px; }
  .app-rail a { white-space: nowrap; }
  .app-rail .rail-label { display: none; }
}

/* Charts (inline SVG): theme-aware overrides of presentation attributes */
.chart text.ink { fill: var(--ink); } .chart text.muted { fill: var(--muted); }
.chart .track { fill: var(--rule); } .chart .bar, .chart .dot { fill: var(--teal); } .chart .line { stroke: var(--teal); }
.chart .gridline { stroke: var(--rule); }
.chart.grid { max-width: 360px; display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .chart.grid .r1 rect { fill: #62B8AF; } :root:not([data-theme="light"]) .chart.grid .r2 rect { fill: #3FA59C; }
  :root:not([data-theme="light"]) .chart.grid .r3 rect { fill: #21877F; } :root:not([data-theme="light"]) .chart.grid .r4 rect { fill: #0F6A64; }
  :root:not([data-theme="light"]) .chart.grid .r1 text { fill: #0E1628; } :root:not([data-theme="light"]) .chart.grid .r4 text { fill: #ECE8DF; }
}
.legend { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: .82rem; color: var(--muted); align-items: center; }
.legend i { display: inline-block; width: 14px; height: 14px; border-radius: 3px; vertical-align: -2px; margin-right: 4px; }
.legend .r1 { background: #0B4F4C; } .legend .r2 { background: #15766F; } .legend .r3 { background: #2E9A92; } .legend .r4 { background: #62B8AF; }
.legend .rn { background: repeating-linear-gradient(45deg, var(--rule) 0 3px, #B9B2A3 3px 5px); }

/* Marketing */
.hero { padding: clamp(40px, 8vw, 104px) 0 clamp(32px, 6vw, 72px); }
.hero h1 { max-width: 15ch; }
.hero .lede { font-size: clamp(1.1rem, 2vw, 1.3rem); color: var(--muted); max-width: 56ch; }
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }
.chart-board { background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; padding: 18px; box-shadow: var(--shadow); }
.chart-board .coords { font: 700 .72rem/1 var(--font-mono); color: var(--muted); letter-spacing: .08em; display: flex; justify-content: space-between; margin-bottom: 12px; }
.steps-public { counter-reset: s; list-style: none; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.steps-public li { counter-increment: s; padding: 18px; border-top: 3px solid var(--ink); background: var(--surface); border-radius: 0 0 var(--radius) var(--radius); }
.steps-public li::before { content: "0" counter(s); font: 700 .8rem/1 var(--font-mono); color: var(--muted); display: block; margin-bottom: 10px; letter-spacing: .1em; }
.price-card { display: grid; gap: 10px; align-content: start; }
.price-card .price { font: 600 2.2rem/1 var(--font-display); }
.price-card ul { padding-left: 18px; margin: 0; display: grid; gap: 6px; }
.price-card.featured { border: 2px solid var(--teal); }
.faq details { border-bottom: 1px solid var(--rule); padding: 14px 0; }
.faq summary { cursor: pointer; font-weight: 700; }
.prose { max-width: 70ch; } .prose h2 { margin-top: 1.6em; } .prose li { margin-bottom: .4em; }
.kbd-list { display: flex; flex-wrap: wrap; gap: 8px; } .kbd-list span { font: 700 .78rem/1 var(--font-mono); background: var(--surface-2); border: 1px solid var(--rule); padding: 6px 9px; border-radius: 4px; }

/* Report */
.report-cover { padding: 32px 0 8px; border-bottom: 1px solid var(--rule); margin-bottom: 24px; }
.report-section { padding: 28px 0; border-bottom: 1px solid var(--rule); }
.report-section h2 { display: flex; gap: 12px; align-items: baseline; }
.report-section h2 .n { font: 700 .9rem/1 var(--font-mono); color: var(--muted); }
.kpis { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
.method-box { font-size: .88rem; color: var(--muted); background: var(--surface-2); border-radius: var(--radius); padding: 16px 18px; }
.method-box dt { font-weight: 700; color: var(--ink); } .method-box dd { margin: 0 0 8px; }

.h2 { font-size: clamp(1.45rem, 3vw, 1.9rem); } .h3 { font-size: 1.2rem; }
progress.bar { display: block; width: 100%; height: 6px; appearance: none; -webkit-appearance: none; border: 0; border-radius: 3px; background: var(--rule); overflow: hidden; color: var(--teal); }
progress.bar::-webkit-progress-bar { background: var(--rule); border-radius: 3px; }
progress.bar::-webkit-progress-value { background: var(--teal); border-radius: 3px; }
progress.bar::-moz-progress-bar { background: var(--teal); border-radius: 3px; }
meter { display: block; width: 100%; height: 8px; }
.inline-select { display: inline-flex; gap: 8px; align-items: center; }
.inline-select select { min-height: 34px; padding: 4px 8px; width: auto; }

.app-top .bar { padding-inline: clamp(16px, 3vw, 36px); }
.account-menu { position: relative; }
.account-menu > summary { list-style: none; cursor: pointer; font-weight: 700; padding: 6px 10px; border: 1px solid var(--rule); border-radius: var(--radius-sm); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu > summary::-webkit-details-marker { display: none; }
.account-menu nav { position: absolute; right: 0; top: calc(100% + 6px); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow); min-width: 220px; padding: 8px; display: grid; gap: 2px; z-index: 30; }
.account-menu nav a, .account-menu nav button { display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; font: inherit; background: none; border: 0; cursor: pointer; }
.account-menu nav a:hover, .account-menu nav button:hover { background: var(--surface-2); }
.account-menu hr { margin: 6px 0; }
@media (max-width: 700px) { .app-top .brand span, .bell .label { display: none; } .biz-select select { max-width: 150px; } }

/* Utilities */
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 40px; }
.mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: 16px; }
.center { text-align: center; } .right { text-align: right; }
.hidden { display: none !important; }
.nowrap { white-space: nowrap; }
.break { overflow-wrap: anywhere; }

@media print {
  .site-header, .site-footer, .app-top, .app-rail, .no-print, .fixture-banner + .skip-link { display: none !important; }
  body { background: #fff; color: #13203B; font-size: 11pt; }
  .card, .tile, .table-wrap { box-shadow: none; break-inside: avoid; }
  .report-section { break-inside: avoid-page; }
  a { color: inherit; text-decoration: none; }
}