:root {
    --bg:           #0b0f14;
    --bg-elev:      rgba(20, 26, 34, 0.92);
    --bg-soft:      rgba(14, 18, 24, 0.55);
    --glass-bg:     rgba(255, 255, 255, 0.04);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-border-strong: rgba(255, 255, 255, 0.14);
    --ink:          #f3f6fb;
    --ink-soft:     #c8d0db;
    --ink-muted:    #8a94a3;

    --accent:           #6ee7b7;
    --accent-soft:      rgba(110, 231, 183, 0.10);
    --accent-line:      rgba(110, 231, 183, 0.28);

    --status-success:       #6ee7b7;
    --status-success-soft:  rgba(110, 231, 183, 0.10);
    --status-warn:          #fbbf24;
    --status-warn-soft:     rgba(251, 191, 36, 0.10);
    --status-danger:        #f87171;
    --status-danger-soft:   rgba(248, 113, 113, 0.10);
    --status-neutral-soft:  rgba(138, 148, 163, 0.10);
    --status-info:          #93c5fd;
    --status-info-soft:     rgba(147, 197, 253, 0.10);

    --gap-bg:       rgba(138, 148, 163, 0.05);
    --gap-line:     rgba(138, 148, 163, 0.20);

    /* Band tint colors — distress vs identity vs footprint */
    --band-distress-tint:  rgba(248, 113, 113, 0.04);
    --band-distress-line:  rgba(248, 113, 113, 0.18);
    --band-identity-tint:  rgba(147, 197, 253, 0.03);
    --band-identity-line:  rgba(147, 197, 253, 0.16);
    --band-footprint-tint: rgba(110, 231, 183, 0.03);
    --band-footprint-line: rgba(110, 231, 183, 0.18);

    --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --mono: 'SF Mono', Menlo, Consolas, monospace;
}
/* NOTE: html/body/* resets from the standalone mockup were removed — this
   page lives inside layouts.public, which owns the document-level background
   (and the .hero::before purple+cyan gradient bloom renders against it). A
   body{background} override here flattened the hero's bottom-left cyan corner.
   Scope all v2 styling to .layout / its descendants only. */
.layout a { color: var(--ink-soft); }
.layout a:hover { color: var(--accent); }
.layout code { font-family: var(--mono); font-size: 0.92em; }

/* (.page-bar removed — v2 uses the production .hero/.site-nav, no page-bar.) */

/* LAYOUT: hero spans, body is 2-col with floating ToC */
.layout {
    max-width: 1280px;
    margin: 0 auto;
    padding: 24px;
    /* Body-level typography/ink scoped here (was on body{} in the standalone
       mockup; moved so it doesn't fight the site layout or the hero). */
    color: var(--ink);
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1.55;
}

.layout-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 28px;
    align-items: flex-start;
}
.main-col { min-width: 0; }
/* Sticky offset clears the live site's .site-nav (taller than the standalone
   mockup's .page-bar, which is why the mockup used 70px). 100px parks the ToC
   just below the live nav with a clean gap (validated live in devtools). */
.toc-col { position: sticky; top: 100px; }

/* TOC */
.toc {
    background: var(--bg-elev);
    border: 1px solid var(--glass-border);
    border-radius: 6px;
    padding: 14px 16px;
    font-size: 12px;
}
.toc-title {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-muted);
    margin: 0 0 10px;
    font-weight: 600;
}
.toc-group {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--glass-border);
}
.toc-group:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.toc-group-label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--ink-muted);
    margin-bottom: 6px;
    font-weight: 700;
}
.toc-group.distress .toc-group-label { color: var(--status-danger); }
.toc-group.identity .toc-group-label { color: var(--status-info); }
.toc-group.footprint .toc-group-label { color: var(--accent); }
.toc ul {
    margin: 0; padding: 0; list-style: none;
}
.toc li { margin-bottom: 4px; line-height: 1.4; }
.toc a {
    color: var(--ink-soft);
    text-decoration: none;
    /* phenominal.css sets a global `a { border-bottom: 1px solid cyan }`
       link underline. The standalone mockup had no phenominal.css so its ToC
       links were clean; on the live page that border bleeds onto every ToC
       row. Kill it here so the ToC reads as plain rows (matching the mockup). */
    border-bottom: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
}
.toc a:hover { color: var(--accent); border-bottom: none; }
.toc .count {
    font-size: 10px;
    font-family: var(--mono);
    color: var(--ink-muted);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    padding: 0 5px;
    border-radius: 100px;
    min-width: 18px;
    text-align: center;
}
.toc .count.has-data { background: var(--status-danger-soft); color: var(--status-danger); border-color: rgba(248, 113, 113, 0.30); }
.toc .count.has-data-warn { background: var(--status-warn-soft); color: var(--status-warn); border-color: rgba(251, 191, 36, 0.30); }
.toc .count.has-data-info { background: var(--status-info-soft); color: var(--status-info); border-color: rgba(147, 197, 253, 0.28); }
.toc .count.empty { color: var(--ink-muted); }

/* HERO is now the production .hero / .hero__sub from marketing.css. */

/* Privacy/redaction note under the hero sub — smaller, muted, set apart so it
   reads as a deliberate ethical disclosure, not part of the dossier copy. */
.hero__note {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink-muted, #8a94a3);
    max-width: 70ch;
}

/* v2 small section labels ("Current license profile", "Disclosed principals",
   etc.). These use .v2-label, NOT .eyebrow — because the production .eyebrow
   class (neon-cyan glow, used by the CTA) must NOT be overridden here. An
   earlier `.layout .eyebrow` override was stomping the CTA's cyan eyebrow with
   this muted-grey style; renaming the v2 labels removes the collision so the
   CTA inherits production's real .eyebrow styling. */
.layout .v2-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-muted);
    margin: 0 0 8px;
    font-weight: 500;
}

/* HEADLINE STATS */
.layout .stat-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}
.stat-tile {
    background: var(--bg-elev);
    border: 1px solid var(--glass-border);
    border-radius: 6px;
    padding: 12px 14px;
}
.stat-tile.has-distress { border-left: 3px solid var(--status-danger); }
.stat-tile .stat-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--ink-muted);
    font-weight: 500;
}
.stat-tile .stat-value {
    font-size: 26px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.1;
    margin-top: 4px;
    letter-spacing: -0.01em;
}
.stat-tile .stat-sub {
    font-size: 11px;
    color: var(--ink-muted);
    margin-top: 2px;
}
.stat-tile .stat-value.stat-value--sm {
    font-size: 14px;
    margin-top: 8px;
}

/* Stat tiles that link to their section below. The tile is an <a>, so reset
   anchor defaults (block, no underline, inherit text color from children) and
   add a tappable affordance — the count IS a jump-to-section control. */
a.stat-tile {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.05s ease;
}
a.stat-tile:hover {
    border-color: var(--glass-border-strong);
    background: var(--bg-elev);
}
a.stat-tile:active { transform: translateY(1px); }
a.stat-tile:hover .stat-value { color: var(--accent); }
a.stat-tile:focus-visible {
    outline: 2px solid var(--accent-line);
    outline-offset: 2px;
}

/* HERO CARD (license profile) */
.profile-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-left: 3px solid var(--accent);
    border-radius: 6px;
    padding: 18px 22px;
    margin-bottom: 16px;
}
.profile-card .profile-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--glass-border);
}
.profile-card .profile-name {
    font-size: 20px;
    font-weight: 600;
    color: var(--ink);
    margin: 0;
}
.profile-card .profile-dba {
    font-size: 13px;
    color: var(--ink-soft);
    margin: 4px 0 0;
    font-style: italic;
}
.profile-card .profile-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}
.profile-card .pill-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}
.pill-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.pill-row .pill-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* STATUS PILL */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid var(--glass-border);
}
.pill-success { background: var(--status-success-soft); color: var(--status-success); border-color: var(--accent-line); }
.pill-warn    { background: var(--status-warn-soft); color: var(--status-warn); border-color: rgba(251, 191, 36, 0.28); }
.pill-danger  { background: var(--status-danger-soft); color: var(--status-danger); border-color: rgba(248, 113, 113, 0.28); }
.pill-info    { background: var(--status-info-soft); color: var(--status-info); border-color: rgba(147, 197, 253, 0.28); }
.pill-neutral { background: var(--status-neutral-soft); color: var(--ink-soft); }

/* DOWNLOAD BUTTON */
.btn-download {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    border-radius: 4px;
    text-decoration: none;
}
.btn-download:hover { background: rgba(110, 231, 183, 0.18); color: var(--accent); }

/* KV GRID */
.kv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 14px 22px;
    margin: 0;
}
.kv-grid > div { min-width: 0; }
.kv-grid dt {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-muted);
    margin-bottom: 3px;
}
.kv-grid dd {
    font-size: 13px;
    color: var(--ink);
    margin: 0;
    line-height: 1.4;
}
.kv-grid dd .hint {
    font-size: 10px;
    color: var(--ink-muted);
    font-style: italic;
    margin-top: 2px;
}
.kv-grid dd .flag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 3px;
    border: 1px solid;
}
.kv-grid dd .flag-warn   { background: var(--status-warn-soft); color: var(--status-warn); border-color: rgba(251, 191, 36, 0.30); }

.profile-card .provenance {
    font-size: 11px;
    color: var(--ink-muted);
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--glass-border);
}

/* CROSS-SOURCE CONFIRMATION BADGE */
.confirm-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    border-radius: 4px;
    font-size: 10px;
    font-weight: 500;
    color: var(--accent);
    margin-left: 6px;
    vertical-align: middle;
}
.confirm-badge::before {
    content: '';
    width: 5px;
    height: 5px;
    background: var(--accent);
    border-radius: 50%;
}

/* BAND HEADER (the new organization layer) */
.band-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 0 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--glass-border);
}
.band-header h2 {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    margin: 0;
}
.band-header .band-line {
    flex: 1;
    height: 1px;
    background: var(--glass-border);
}
.band-header.distress h2 { color: var(--status-danger); }
.band-header.identity h2 { color: var(--status-info); }
.band-header.footprint h2 { color: var(--accent); }
.band-header.distress { border-bottom-color: var(--band-distress-line); }
.band-header.identity { border-bottom-color: var(--band-identity-line); }
.band-header.footprint { border-bottom-color: var(--band-footprint-line); }

/* SECTION (v2 dossier cards only).
   :not(.section--tint) excludes the production <x-marketing.section bg="tint">
   used by the citation-block component — that one must render flush (its own
   marketing.css styling), NOT boxed as a v2 card. Without this exclusion the
   card border/radius/bg here wrapped the citation block in a panel. */
.layout .section:not(.section--tint) {
    /* padding:0 explicitly resets the site-global .section { padding: 5rem 0 }
       from marketing.css — these v2 cards get their inner spacing from
       .section-header / .section-body, not the wrapper. Also reset the
       global section border-bottom (cards use a full border + radius). */
    padding: 0;
    border: 1px solid var(--glass-border);
    border-bottom: 1px solid var(--glass-border);
    background: var(--bg-elev);
    border-radius: 6px;
    margin-bottom: 12px;
    overflow: hidden;
    /* Offset for the sticky site-nav so stat-card / TOC jump links land with
       the section heading visible, not hidden under the header (~64px). */
    scroll-margin-top: 80px;
}
/* The production citation-block hardcodes <x-marketing.section bg="tint">, whose
   .section--tint applies a gradient bg + backdrop-blur. On v2 the citation
   section should sit flush on the page background — kill the tint here only
   (scoped to .layout so the component + every other page keep their tint). */
.layout .section--tint {
    background: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.layout .section.distress { border-left: 3px solid var(--status-danger); }
.layout .section.distress-warn { border-left: 3px solid var(--status-warn); }
.layout .section.identity { border-left: 3px solid var(--status-info); }
.layout .section.footprint { border-left: 3px solid var(--accent); }
.layout .section.empty {
    border-left: 1px solid var(--glass-border);
    opacity: 0.65;
}

.layout .section-header {
    padding: 10px 18px;
    border-bottom: 1px solid var(--glass-border);
    background: var(--bg-soft);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
}
.layout .section.empty .section-header { cursor: default; }
.layout .section-header h3 {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.layout .section-header .count-pill {
    font-size: 10px;
    font-family: var(--mono);
    color: var(--ink-muted);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    padding: 1px 7px;
    border-radius: 100px;
}
.layout .section-header .count-pill.has-data {
    background: var(--status-danger-soft);
    color: var(--status-danger);
    border-color: rgba(248, 113, 113, 0.30);
}
.layout .section-header .count-pill.has-data-warn {
    background: var(--status-warn-soft);
    color: var(--status-warn);
    border-color: rgba(251, 191, 36, 0.30);
}
.layout .section-header .count-pill.has-data-info {
    background: var(--status-info-soft);
    color: var(--status-info);
    border-color: rgba(147, 197, 253, 0.28);
}
.layout .section-header .count-pill.has-data-positive {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: var(--accent-line);
}
.layout .section-header .source-attr {
    font-size: 10px;
    color: var(--ink-muted);
    font-family: var(--mono);
}
.layout .section-body { padding: 16px 18px; }

/* INTRO COPY */
.intro-copy {
    font-size: 13px;
    color: var(--ink-soft);
    margin: 0 0 12px;
    line-height: 1.55;
}

/* CTA BLOCK */
/* CTA — two presentations, both using the production .btn-cta (blue→purple):
   - TOP: compact horizontal banner (.cta-banner-v2), Bootstrap flex markup
     ported from the production licensee page, WITH an added subtle purple
     gradient wash per the requested treatment.
   - BOTTOM: the centered <x-marketing.cta> component (.cta-section/.cta-block
     from marketing.css) — left unmodified so it renders as designed. */
/* TOP CTA: production markup + typography (all inherited via the verbatim
   .eyebrow / .h5 / .small.text-muted classes — no typography overrides here).
   The surface is the v2 treatment: a purple radial gradient over --bg-elev on
   the outer wrapper (richer than layering over Bootstrap's bg-dark-subtle —
   chosen deliberately). The inner bg-dark-subtle box shows through as
   transparent so this wrapper background is what reads. */
.layout .cta-banner-v2 {
    background: radial-gradient(ellipse 70% 140% at 100% 0%, rgba(124, 58, 237, 0.16), transparent 60%), var(--bg-elev);
    border: 1px solid var(--glass-border) !important;
    border-radius: 8px !important;
    margin: 24px 0 16px;
}
/* The inner Bootstrap box keeps its border/rounding/padding for layout but
   drops its own dark fill so the wrapper's gradient surface is what shows. */
.layout .cta-banner-v2 .bg-dark-subtle {
    background: transparent !important;
    border-color: transparent !important;
}

/* DATA TABLES */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.data-table th {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid var(--glass-border-strong);
    color: var(--ink-muted);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.05em;
}
.data-table td {
    padding: 9px 10px;
    border-bottom: 1px solid var(--glass-border);
    color: var(--ink-soft);
    vertical-align: top;
}
.data-table td.mono { font-family: var(--mono); font-size: 12px; }
.data-table td strong { color: var(--ink); }
.data-table tr:last-child td { border-bottom: none; }
.text-end { text-align: right; }
.text-nowrap { white-space: nowrap; }

/* BADGES */
.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: 1px solid;
}
.badge-mandatory  { background: var(--status-danger-soft); color: var(--status-danger); border-color: rgba(248, 113, 113, 0.30); }
.badge-voluntary  { background: var(--status-neutral-soft); color: var(--ink-soft); border-color: var(--glass-border); }
.badge-rescinded  { background: var(--status-success-soft); color: var(--status-success); border-color: var(--accent-line); margin-left: 4px; }
.badge-cat-contamination { background: var(--status-danger-soft); color: var(--status-danger); border-color: rgba(248, 113, 113, 0.30); }
.badge-cat-label  { background: var(--status-warn-soft); color: var(--status-warn); border-color: rgba(251, 191, 36, 0.30); }
.badge-cat-packaging { background: var(--status-info-soft); color: var(--status-info); border-color: rgba(147, 197, 253, 0.28); }

/* CORPORATE FAMILY */
.cfam {
    border: 1px solid var(--glass-border);
    border-radius: 4px;
    background: var(--bg-soft);
    padding: 14px 16px;
}
.cfam-parent {
    font-size: 14px;
    color: var(--ink);
    font-weight: 600;
    margin-bottom: 4px;
}
.cfam-parent .small {
    font-size: 11px;
    color: var(--ink-muted);
    font-weight: 400;
    margin-left: 6px;
}
.cfam-meta {
    font-size: 11px;
    color: var(--ink-muted);
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--glass-border);
}
.cfam-siblings {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.cfam-sibling {
    padding: 4px 10px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 3px;
    font-size: 12px;
    color: var(--ink-soft);
}
.cfam-sibling.is-this {
    background: var(--accent-soft);
    border-color: var(--accent-line);
    color: var(--accent);
    font-weight: 600;
}
.cfam-sibling.is-dead {
    color: var(--status-danger);
    border-color: rgba(248, 113, 113, 0.20);
    background: var(--status-danger-soft);
    text-decoration: line-through;
    text-decoration-color: rgba(248, 113, 113, 0.4);
}

/* OWNER CLUSTER */
.owner-cluster {
    background: var(--bg-soft);
    border: 1px solid var(--glass-border);
    border-radius: 4px;
    padding: 12px 14px;
}
.owner-cluster .owner-name {
    font-size: 13px;
    color: var(--ink);
    font-weight: 600;
    margin-bottom: 8px;
}
.owner-cluster ul {
    margin: 0; padding-left: 18px; font-size: 12px; color: var(--ink-soft);
}
.owner-cluster ul li { margin-bottom: 3px; }

/* GAP NOTICE */
.gap-notice {
    background: var(--gap-bg);
    border: 1px dashed var(--gap-line);
    border-radius: 4px;
    padding: 12px 14px;
    font-size: 12px;
    color: var(--ink-soft);
}
.gap-notice strong { color: var(--ink); font-weight: 600; }
.gap-notice .gap-list { margin: 8px 0 0; padding-left: 18px; }
.gap-notice .gap-list li { margin-bottom: 2px; }
.gap-notice .cta {
    margin-top: 10px;
    font-size: 11px;
    color: var(--ink-muted);
    font-style: italic;
}

/* SOURCE NOTE */
.source-note {
    margin: 12px 0 0;
    font-size: 11px;
    color: var(--ink-muted);
}
.source-note a { color: var(--ink-muted); }
.source-note a:hover { color: var(--accent); }

/* EVENT TAG */
.event-tag {
    display: inline-block;
    padding: 4px 10px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 3px;
    font-size: 12px;
    color: var(--ink-soft);
    margin-right: 6px;
    margin-bottom: 6px;
}
.event-tag .booth { color: var(--ink-muted); font-family: var(--mono); font-size: 11px; margin-left: 6px; }

/* PRESS ROW */
.press-row {
    padding: 8px 0;
    border-bottom: 1px solid var(--glass-border);
}
.press-row:last-child { border-bottom: none; }
.press-row .headline {
    color: var(--ink);
    font-weight: 500;
    font-size: 13px;
    margin: 0 0 2px;
}
.press-row .meta { font-size: 11px; color: var(--ink-muted); }
.press-row .meta a { color: var(--ink-muted); }

/* EMPTY STATE */
.empty-state {
    padding: 12px 16px;
    font-size: 12px;
    color: var(--ink-muted);
    font-style: italic;
}

/* (Audit-footer styles removed — the page now uses the production
   <x-marketing.citation-block> component for provenance, which carries its
   own styling from marketing.css.) */

@media (max-width: 960px) {
    .layout-body { grid-template-columns: 1fr; }
    .toc-col { position: static; order: -1; }
    .layout .stat-row { grid-template-columns: repeat(2, 1fr); }
    .kv-grid { grid-template-columns: 1fr 1fr; }
    .source-grid { grid-template-columns: 1fr; }
    .cta-block { flex-direction: column; align-items: stretch; }
    .profile-card .profile-header { flex-direction: column; align-items: stretch; }
}

/* PHONE BREAKPOINT — the 960px query above only reaches 2 columns. At phone
   widths two stat tiles (long labels + the <code> license-number pill) still
   exceed the viewport and force horizontal page scroll. Stack to a single
   column and let the license <code> wrap so nothing sets a min-track wider
   than the screen. */
@media (max-width: 560px) {
    .layout .stat-row { grid-template-columns: 1fr; }
    .kv-grid { grid-template-columns: 1fr; }
    .stat-tile { min-width: 0; }
    .layout code { overflow-wrap: anywhere; word-break: break-word; }
}

/* ---- Empty-state section bands (checked-but-no-data + per-engagement) ----
   Rendered in place of a populated section so every dimension stays visible:
   a "checked — none found" is proof we looked. Visually muted so real findings
   still lead, but present so the dossier never looks un-investigated. */
.layout .section.section--empty {
    opacity: 0.72;
}
.layout .section.section--empty .section-body {
    padding-top: 4px;
}
.layout .section--empty .empty-note {
    font-size: 12.5px;
    color: var(--ink-muted);
    margin: 0;
    line-height: 1.55;
    max-width: 72ch;
}
.layout .section-header .count-pill.count-pill--clear {
    background: var(--glass-bg);
    color: var(--ink-muted);
    border-color: var(--glass-border);
}
.layout .section-header .count-pill.count-pill--manual {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: var(--accent-line);
}

/* TOC entries for checked-but-empty + per-engagement dimensions: present
   (proof we looked) but muted so the data-bearing entries still lead. */
.toc li.toc-empty a { color: var(--ink-muted); }
.toc .count.toc-none {
    background: var(--glass-bg);
    color: var(--ink-muted);
    border-color: var(--glass-border);
}
.toc .count.toc-req {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: var(--accent-line);
}

/* ---- Partially-redacted values ----
   The cleartext is removed server-side (App\Support\Redact) — the HTML only
   contains the masked '•' string. The CSS blur applies ONLY to the masked
   portion (.redact-mask), NOT the whole value: redaction is partial (e.g.
   "1•••• ••••••••, Sylmar, CA •••••", "Jennifer ••••••••"), so the revealed
   parts (first digit, city/state, given name) stay crisp to prove possession
   while the masked '•' runs blur. The mask is the security boundary; the blur
   is cosmetic — a view-source bypass recovers only '•'. */
.layout .redact {
    cursor: help;
}
.layout .redact-mask {
    filter: blur(3px);
    -webkit-user-select: none;
    user-select: none;
    letter-spacing: 0.5px;
    transition: filter .15s ease;
}
.layout .redact:hover .redact-mask { filter: blur(1.8px); }