/* solution-kit.css — extracted from site.css (css-cleanup Step 4b).
   Loads on the 6 /solutions/* pages via @section Styles. Depends on core site.css only.
   Holds the solution-cluster-shared sections migrated out of the old-home block:
   capability grid, compliance proof list, and the AttackSurface attack-surface example
   (features-asm-*, folded in as an opt-in component per ticket 06 D5).
   Move, not redesign: rules are byte-identical to their former site.css home;
   the dead .coverage-pivot token was dropped in the move (per Step 4b).
   layout.js block D (cluster-tab controller) stays in core layout.js — JS unchanged. */

/* =========================================================================
   Section — Capability Grid (Coverage: 4 clusters × 3 tiles)
   ========================================================================= */

.section-coverage { padding: 80px 0 100px; }
.section-coverage .section-head { margin-bottom: 0; }

.coverage-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 56px 0 0;
}

.coverage-track {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.coverage-cluster {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cluster-header {
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--teal);
    padding-bottom: 12px;
    border-bottom: 1px solid var(--teal-25);
    margin-bottom: 4px;
}

.cluster-tiles {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.coverage-tile {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.coverage-tile:hover {
    border-color: var(--teal-35);
    transform: translateY(-1px);
}

.tile-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--teal-10);
    border-radius: 8px;
    color: var(--teal);
}

.tile-name {
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ink);
    margin: 4px 0 0;
    letter-spacing: -0.005em;
}

.tile-outcome {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--ink-2);
    margin: 0;
}

/* Cluster pills — visible only on mobile (tab-pill switcher pattern, mirrors .dash-sidebar) */
.cluster-tabs { display: none; }

@media (max-width: 1024px) {
    .coverage-track { grid-template-columns: repeat(2, 1fr); gap: 28px; }
    .section-coverage { padding: 56px 0 72px; }
}

/* Mobile: pill-tab nav + horizontal snap carousel of clusters. */
@media (max-width: 720px) {
    .cluster-tabs {
        display: flex;
        flex-direction: row;
        gap: 8px;
        overflow-x: auto;
        overflow-y: hidden;
        margin: 0 -16px 4px;
        padding: 4px 16px 8px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .cluster-tabs::-webkit-scrollbar { display: none; }

    .cluster-tab {
        flex: 0 0 auto;
        white-space: nowrap;
        min-height: 44px;
        padding: 10px 16px;
        font-family: var(--font-display);
        font-size: 0.8125rem;
        font-weight: 600;
        color: var(--ink-2);
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: 999px;
        cursor: pointer;
        transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    }
    .cluster-tab.is-active {
        color: var(--teal);
        border-color: var(--teal-35);
        background: var(--teal-10);
    }

    /* Carousel track — static in HTML, CSS-driven on mobile */
    .coverage-track {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .coverage-track::-webkit-scrollbar { display: none; }
    .coverage-track .coverage-cluster {
        min-width: 100%;
        flex-shrink: 0;
        scroll-snap-align: start;
        display: flex;
    }

    .cluster-header { display: none; }

    .cluster-tiles {
        flex-direction: column;
        overflow: visible;
        gap: 10px;
        margin: 0;
        padding: 0;
    }
    .coverage-tile {
        flex: 1 1 auto;
        padding: 16px 16px;
    }

    .section-coverage { padding: 40px 0 56px; }
}

/* =========================================================================
   Section — Compliance evidence
   ========================================================================= */

.compliance-proof-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.compliance-proof-list li {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 14px;
    align-items: start;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--ink-2);
}
.compliance-proof-list strong {
    display: block;
    color: var(--ink);
    font-weight: 600;
    margin-bottom: 4px;
    letter-spacing: -0.01em;
}
.proof-check {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--teal-dim);
    border: 1px solid var(--teal-20);
    color: var(--teal);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}



/* Attack-surface example ported from the original Features page. */
.features-section-asm .section-head {
    align-items: start;
}

.features-eyebrow-chip {
    display: inline-block;
    margin-left: 10px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--teal-tint);
    color: var(--teal);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    vertical-align: middle;
}

.features-sample-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--ink-3);
}

.features-sample-label::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ice);
    box-shadow: 0 0 0 3px var(--ice-dim);
}

.features-asm-kpis {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: 14px 0 32px;
}

.features-asm-kpi {
    padding: 18px 18px 16px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-md);
    background: var(--card);
}

.features-asm-kpi-label {
    margin-bottom: 8px;
    color: var(--ink-3);
    font-size: 0.74rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.features-asm-kpi-value {
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 1.85rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;
}

.features-asm-kpi-delta {
    margin-top: 8px;
    color: var(--ink-3);
    font-size: 0.82rem;
}

.features-asm-kpi-delta.accent { color: var(--teal); }
.features-asm-kpi-delta.high { color: var(--orange); }

.features-asm-list {
    overflow: hidden;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-md);
    background: var(--card);
}

.features-table-head {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
}

.features-asm-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-soft);
}

.features-asm-row:last-child { border-bottom: 0; }

.features-asm-host {
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 0.92rem;
    word-break: break-all;
}

.features-asm-svc {
    color: var(--ink-3);
    font-family: var(--font-mono);
    font-size: 0.82rem;
}

.features-asm-chip {
    display: inline-block;
    width: max-content;
    padding: 2px 9px;
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--ink-2);
    font-size: 0.74rem;
    font-weight: 600;
    white-space: nowrap;
}

.features-asm-chip.dim { color: var(--ink-2); }
.features-asm-chip.accent { color: var(--teal); border-color: var(--teal-30); background: var(--teal-tint); }
.features-asm-chip.red { color: #EF98A2; border-color: var(--red-border); background: var(--red-dim); }
.features-asm-chip.orange { color: #E0A95C; border-color: rgba(201, 139, 63, 0.30); background: var(--orange-dim); }

@media (max-width: 419px) {
    .features-asm-kpis {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .features-asm-row {
        gap: var(--space-3);
        padding: var(--space-5);
    }

    .features-asm-row > [role="cell"] {
        display: grid;
        grid-template-columns: minmax(88px, 0.34fr) minmax(0, 1fr);
        gap: var(--space-3);
        width: 100%;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        white-space: normal;
    }

    .features-asm-row > [role="cell"]::before {
        content: attr(data-label);
        color: var(--ink-3);
        font-family: var(--font-body);
        font-size: 0.68rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }
}

@media (min-width: 768px) {
    .features-asm-kpis {
        grid-template-columns: repeat(4, 1fr);
    }

    .features-asm-list-head {
        position: static;
        display: grid;
        grid-template-columns: 2fr 1.2fr 1fr 1fr;
        gap: 12px;
        width: auto;
        height: auto;
        margin: 0;
        padding: 10px 16px;
        overflow: visible;
        clip: auto;
        clip-path: none;
        border-bottom: 1px solid var(--border);
        background: var(--surface);
        color: var(--ink-3);
        font-size: 0.72rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        white-space: normal;
    }

    .features-asm-row {
        grid-template-columns: 2fr 1.2fr 1fr 1fr;
        align-items: center;
        gap: 12px;
    }
}


/* =========================================================================
   Lifecycle rail (sk-rail) — replaces the § specimen grid for ordered stages.
   Design-system recipes: Signal Wire + Open Ruled Feature Sequence. One spine,
   five open columns, no card fills. Teal only on the spine/nodes; the terminal
   node is green (verified). The loop-back line says the record persists.
   ========================================================================= */

.sk-rail {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}
/* spine across node row */
.sk-rail::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: calc(20% - 5px);
    height: 1px;
    background: linear-gradient(90deg, var(--teal-20), var(--teal-40) 70%, rgba(76,173,126,0.45));
}
.sk-rail > li {
    position: relative;
    min-width: 0;
    padding: 34px clamp(16px, 2vw, 28px) 0 0;
}
/* node */
.sk-rail > li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--bg);
    border: 1px solid var(--teal-40);
    box-sizing: border-box;
}
.sk-rail > li.is-terminal::before {
    background: var(--green);
    border-color: var(--green);
    box-shadow: 0 0 0 4px rgba(76,173,126,0.12);
}
/* per-column hairline under the node keeps columns legible without boxes */
.sk-rail > li + li { border-left: 0; }
.sk-rail-stage {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 12px;
}
.sk-rail > li.is-terminal .sk-rail-stage { color: var(--green); }
.sk-rail h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--ink);
    text-wrap: balance;
}
.sk-rail p {
    margin: 10px 0 0;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--ink-2);
}

/* loop-back: arc above the spine from Prove back to Detect */
.sk-rail-wrap { position: relative; padding-top: 52px; margin-top: 8px; }
.sk-rail-loop {
    position: absolute;
    top: 12px;
    left: 5px;
    width: 80%;
    height: 40px;
}
.sk-rail-loop svg { display: block; width: 100%; height: 100%; overflow: visible; }
.sk-rail-loop path { fill: none; stroke: var(--ink-3); stroke-opacity: 0.55; stroke-width: 1; stroke-dasharray: 4 5; }
.sk-rail-loop::after { /* arrowhead into Detect */
    content: "";
    position: absolute;
    left: -3px;
    bottom: 8px;
    width: 6px;
    height: 6px;
    border-right: 1px solid var(--ink-2);
    border-bottom: 1px solid var(--ink-2);
    transform: rotate(45deg);
}

@media (max-width: 900px) {
    .sk-rail { grid-template-columns: 1fr; }
    .sk-rail::before { top: 5px; bottom: 0; left: 5px; right: auto; width: 1px; height: auto;
        background: linear-gradient(180deg, var(--teal-20), var(--teal-40) 70%, rgba(76,173,126,0.45)); }
    .sk-rail > li { padding: 0 0 32px 32px; }
    .sk-rail > li:last-child { padding-bottom: 0; }
    .sk-rail-wrap { padding-top: 0; }
    .sk-rail-loop { display: none; }
}

/* =========================================================================
   Evidence chain (sk-evidence) — replaces the § specimen grid on the
   tamper-evidence sections. Left: the record as a hash chain (square block
   nodes on one spine, the verify node greens). Right: what the chain feeds,
   the auditor pack, framed by a real product crop. Scope sits under the chain
   as the honest caveat. Only one teal moment: the connector into the pack.
   ========================================================================= */

.sk-evidence {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas: "chain out";
    column-gap: clamp(48px, 7vw, 104px);
    row-gap: 40px;
    align-items: start;
}

.sk-chain-stage {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 8px;
}
.sk-evidence h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--ink);
}
.sk-evidence p {
    margin: 8px 0 0;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--ink-2);
}

/* chain */
.sk-chain {
    grid-area: chain;
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}
.sk-chain::before {            /* spine through the block nodes */
    content: "";
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 6px;
    width: 1px;
    background: var(--border);
}
.sk-chain > li {
    position: relative;
    padding: 0 0 32px 40px;
}
.sk-chain > li:last-child { padding-bottom: 0; }
.sk-chain > li::before {       /* hash block */
    content: "";
    position: absolute;
    top: 1px;
    left: 0;
    width: 13px;
    height: 13px;
    box-sizing: border-box;
    background: var(--bg);
    border: 1px solid var(--ink-3);
}
.sk-chain > li.is-verified::before {
    background: var(--green);
    border-color: var(--green);
    box-shadow: 0 0 0 4px rgba(76,173,126,0.12);
}
.sk-chain > li.is-verified .sk-chain-stage { color: var(--green); }

/* output: pack + product crop */
.sk-evidence-out {
    grid-area: out;
    position: relative;
    padding-left: 32px;
    border-left: 1px solid var(--border-soft);
}
.sk-evidence-pack { position: relative; max-width: 54ch; }
.sk-evidence-pack::before {    /* connector from the chain into the pack */
    content: "";
    position: absolute;
    top: 7px;
    left: calc(-32px - clamp(48px, 7vw, 104px) + 20px);
    width: calc(clamp(48px, 7vw, 104px) + 4px);
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--teal-40));
}
.sk-evidence-pack::after {     /* arrowhead */
    content: "";
    position: absolute;
    top: 4px;
    left: -14px;
    width: 6px;
    height: 6px;
    border-top: 1px solid var(--teal);
    border-right: 1px solid var(--teal);
    transform: rotate(45deg);
}
.sk-evidence-pack .sk-chain-stage { color: var(--teal); }

section:has(.sk-shot) { overflow-x: clip; }
.sk-shot {
    margin: 32px 0 0;
    /* bleed off the container's right edge into the page gutter */
    margin-right: calc(-1 * max(28px, (100vw - 1240px) / 2 + 28px) + 0px);
    border-right: 0;
    position: relative;
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: 0 24px 60px -32px rgba(0,0,0,0.7);
    overflow: hidden;
}
.sk-shot img {
    display: block;
    width: 100%;
    height: auto;
    -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent);
    mask-image: linear-gradient(180deg, #000 70%, transparent);
}

.sk-shot::after {               /* right edge dissolves into the gutter */
    content: "";
    position: absolute;
    inset: 0 0 0 auto;
    width: 22%;
    background: linear-gradient(90deg, transparent, var(--bg));
    pointer-events: none;
}


@media (max-width: 900px) {
    .sk-evidence { grid-template-columns: 1fr; grid-template-areas: "chain" "out"; }
    .sk-evidence-out { padding-left: 0; border-left: 0; padding-top: 32px; border-top: 1px solid var(--border-soft); }
    .sk-evidence-pack::before, .sk-evidence-pack::after { display: none; }
    .sk-shot { margin-right: -28px; }
}

/* =========================================================================
   Evidence flow (sk-flow) — three stacked rows on one connector:
   chain (Chain -> Log -> Verify, across) -> product frame -> Pack.
   The connector drops from the Verify node, through the frame, into the
   Pack node, so all three share one x. Scope sits quiet beside Pack.
   --sk-x is the connector position; mobile moves it to the left spine.
   ========================================================================= */

.sk-flow { --sk-x: calc(200% / 3 + 6px); position: relative; }
.sk-flow h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--ink);
}
.sk-flow p { margin: 8px 0 0; font-size: 0.9rem; line-height: 1.6; color: var(--ink-2); }

/* row 1: chain across */
.sk-flow-chain {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}
.sk-flow-chain::before {            /* wire between the blocks */
    content: "";
    position: absolute;
    top: 6px;
    left: 6px;
    width: calc(var(--sk-x) - 12px);
    height: 1px;
    background: var(--border);
}
.sk-flow-chain > li { position: relative; min-width: 0; padding: 30px clamp(16px, 3vw, 40px) 0 0; }
.sk-flow-chain > li::before {       /* hash block */
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 13px;
    height: 13px;
    box-sizing: border-box;
    background: var(--bg);
    border: 1px solid var(--ink-3);
}
.sk-flow-chain > li.is-verified::before {
    background: var(--green);
    border-color: var(--green);
    box-shadow: 0 0 0 4px rgba(76,173,126,0.12);
}
.sk-flow-chain > li.is-verified .sk-chain-stage { color: var(--green); }

/* row 2: product frame, threaded by the connector */
.sk-flow-shot {
    position: relative;
    margin: 72px 0 0;
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: 0 24px 60px -32px rgba(0,0,0,0.7);
}
.sk-flow-shot img {
    display: block;
    width: 100%;
    height: auto;
    -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent);
    mask-image: linear-gradient(180deg, #000 78%, transparent);
}
.sk-flow-shot::before,              /* in: Verify -> frame */
.sk-flow-out::before {              /* out: frame -> Pack */
    content: "";
    position: absolute;
    left: var(--sk-x);
    width: 1px;
}
.sk-flow-shot::before {
    top: -72px;
    height: 72px;
    margin-top: -1px;
    background: linear-gradient(180deg, rgba(76,173,126,0.6), var(--border));
}
/* in a flex/grid-free block the %-left resolves against the figure; it
   spans the full container width, so --sk-x lines up with the chain. */

/* row 3: pack (output node under the connector) */
.sk-flow-out {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 64px;
}
.sk-flow-out::before {
    top: -64px;
    height: 64px;
    background: linear-gradient(180deg, var(--border), var(--teal));
}
/* Pack spans the full row: the connector lands on a rule that runs the
   width of the frame above, so the output reads as the frame's base, not a
   stray column. Name left, description across the remaining two thirds. */
.sk-flow-pack {
    grid-column: 1 / -1;
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas: "stage desc desc" "title desc desc";
    align-items: start;
    padding-top: 28px;
    border-top: 1px solid var(--border-soft);
}
.sk-flow-pack::after {               /* teal segment of the rule, centred on the landing point */
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 20%, var(--teal-40) calc(var(--sk-x) - 1px), transparent 96%);
}
.sk-flow-pack::before {              /* output node, on the rule under the connector */
    content: "";
    position: absolute;
    z-index: 1;
    top: -7px;
    left: calc(var(--sk-x) - 6px);
    width: 13px;
    height: 13px;
    background: var(--teal);
    box-shadow: 0 0 0 4px var(--teal-10);
}
.sk-flow-pack .sk-chain-stage { grid-area: stage; color: var(--teal); }
.sk-flow-pack h3 { grid-area: title; padding-right: clamp(16px, 3vw, 40px); }
.sk-flow-pack p { grid-area: desc; margin: 0; max-width: 62ch; }

@media (max-width: 900px) {
    .sk-flow { --sk-x: 6px; }
    .sk-flow-chain { grid-template-columns: 1fr; }
    .sk-flow-chain::before { width: 1px; height: auto; top: 6px; bottom: 0; }
    .sk-flow-chain > li { padding: 0 0 28px 36px; }
    .sk-flow-chain > li:last-child { padding-bottom: 0; }
    .sk-flow-chain > li.is-verified::before { top: 1px; }
    .sk-flow-chain > li::before { top: 1px; }
    .sk-flow-shot { margin: 48px -28px 0 36px; border-right: 0; }
    .sk-flow-shot img { height: 220px; object-fit: cover; object-position: left top; }   /* legible left part: banner, row names, status */
    .sk-flow-shot::before { top: -48px; height: calc(100% + 96px); left: -30px;   /* spine runs past the frame */
        background: linear-gradient(180deg, rgba(76,173,126,0.6), var(--border) 20%, var(--border) 80%, var(--teal)); }
    .sk-flow-out::before { display: none; }
    .sk-flow-out { grid-template-columns: 1fr; margin-top: 48px; }
    .sk-flow-out::before { top: -48px; height: 48px; }
    .sk-flow-pack { grid-template-columns: 1fr; grid-template-areas: "stage" "title" "desc";
        padding: 0 0 0 36px; border-top: 0; }
    .sk-flow-pack::after { display: none; }
    .sk-flow-pack::before { top: 1px; left: 0; }
    .sk-flow-pack p { margin-top: 8px; }
}

/* claim-note inside a diagram headline: sit on the text line (no superscript
   jump that misaligns sibling headlines) and stay findable. */
.sk-flow h3 .claim-note,
.sk-evidence h3 .claim-note { vertical-align: 0.1em; line-height: 0; margin-left: 6px; }
.sk-flow h3 .claim-note__trigger,
.sk-evidence h3 .claim-note__trigger { font-size: 0.6em; opacity: 0.8; }   /* base 0.32em is sized for display h2s */

/* =========================================================================
   Evidence hub (sk-hub) — DORA artefact section. Inputs (history, chain)
   join one bus into the hub (the shared scan record, shown as the Vornin
   mark), which branches to the artefacts (pack, PDF, mapping). Every stub
   and bus segment hangs off its own item, so lines follow real text height.
   ========================================================================= */

.sk-hub {
    --sk-gap: 36px;     /* vertical gap between items, also the bus overlap */
    --sk-stub: 28px;    /* item edge to bus */
    display: grid;
    grid-template-columns: minmax(0, 4fr) 112px minmax(0, 5fr);
    align-items: center;
}
.sk-hub ul { position: relative; display: flex; flex-direction: column; gap: var(--sk-gap); margin: 0; padding: 0; list-style: none; }
.sk-hub li { position: relative; }
.sk-hub h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--ink);
}
.sk-hub p { margin: 8px 0 0; font-size: 0.9rem; line-height: 1.6; color: var(--ink-2); max-width: 56ch; }

/* inputs: stub out of the right edge, bus on the right */
.sk-hub-in li { padding-right: calc(var(--sk-stub) + 12px); }
.sk-hub-in li::before {               /* stub */
    content: "";
    position: absolute;
    top: 7px;
    right: 0;
    width: var(--sk-stub);
    height: 1px;
    background: var(--border);
}
.sk-hub-in li:not(:last-child)::after { /* bus segment down to the next stub */
    content: "";
    position: absolute;
    top: 7px;
    right: 0;
    width: 1px;
    height: calc(100% + var(--sk-gap));
    background: var(--border);
}

/* outputs: stub into the left edge, bus on the left, node at the join */
.sk-hub-out li { padding-left: calc(var(--sk-stub) + 18px); }
.sk-hub-out li::before {              /* stub + square node */
    content: "";
    position: absolute;
    top: 7px;
    left: 0;
    width: var(--sk-stub);
    height: 1px;
    background: linear-gradient(90deg, var(--border), var(--teal-40));
}
.sk-hub-out li::after {               /* output node */
    content: "";
    position: absolute;
    top: 1px;
    left: var(--sk-stub);
    width: 13px;
    height: 13px;
    box-sizing: border-box;
    border: 1px solid var(--teal-40);
    background: var(--bg);
}
.sk-hub-out li:not(:last-child) > .sk-chain-stage::after { /* bus segment down to the next stub */
    content: "";
    position: absolute;
    top: 7px;
    left: 0;
    width: 1px;
    height: calc(100% + var(--sk-gap));
    background: var(--border);
}
.sk-hub-out li .sk-chain-stage { color: var(--ink-3); }

/* hub */
.sk-hub-core {
    position: relative;
    display: grid;
    place-items: center;
    height: 56px;
}
.sk-hub-core::before {                /* line through the hub, bus to bus */
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--border), var(--teal-40) 50%, var(--border));
}
.sk-hub-core img {
    position: relative;
    width: 44px;
    height: 44px;
    padding: 10px;
    box-sizing: border-box;
    background: var(--surface);
    border: 1px solid var(--teal-25);
    box-shadow: 0 0 0 6px var(--surface), 0 0 32px -6px var(--teal-20);
}

@media (max-width: 900px) {
    .sk-hub { grid-template-columns: 1fr; align-items: start; --sk-stub: 0px; }
    .sk-hub ul { padding-left: 36px; }
    .sk-hub-in li { padding-right: 0; }
    .sk-hub-in li::before { right: auto; left: -36px; width: 13px; height: 13px; top: 1px; box-sizing: border-box; border: 1px solid var(--ink-3); background: var(--bg); }
    .sk-hub-in li:not(:last-child)::after, .sk-hub-out li::after,
    .sk-hub-out li:not(:last-child) > .sk-chain-stage::after { display: none; }
    .sk-hub-in::before, .sk-hub-out::before {   /* one left spine through everything */
        content: ""; position: absolute; left: 6px; top: 7px; bottom: -48px; width: 1px; background: var(--border);
    }
    .sk-hub-out::before { top: -48px; bottom: auto; height: calc(100% + 48px - 40px); }
    .sk-hub-out li { padding-left: 0; }
    .sk-hub-out li::before { left: -36px; top: 1px; width: 13px; height: 13px; box-sizing: border-box; border: 1px solid var(--teal-40); background: var(--bg); }
    .sk-hub-core { justify-content: start; margin: 24px 0; height: 44px; }
    .sk-hub-core::before { display: none; }
    .sk-hub-core img { width: 40px; height: 40px; padding: 7px; margin-left: -13px; }
}

/* =========================================================================
   Control map table (NIS2 / ISO 27001 / DORA). Moved here from site.css:
   only the Solutions pages use it. Teal pared back per the design-system
   data-table rule (structural lines navy, machine IDs mono, Mono Means
   Machine): headers and control refs are quiet mono, hover is a neutral lift.
   ========================================================================= */
.control-map-wrap {
    margin: 48px 0 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
}
.control-map {
    width: 100%;
    min-width: 660px;
    border-collapse: collapse;
    font-size: 0.9375rem;
}
.control-map thead th {
    text-align: left;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-3);
    font-weight: 500;
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.control-map tbody td {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-soft);
    color: var(--ink-2);
    line-height: 1.55;
    vertical-align: top;
}
.control-map tbody tr:last-child td { border-bottom: 0; }
.control-map tbody tr:hover td { background: rgba(255,255,255,0.015); }
.control-map td:first-child { color: var(--ink); font-weight: 600; }
.control-map .cm-ref {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--ice);
    font-weight: 500;
    margin-bottom: 4px;
    letter-spacing: 0.01em;
}
.control-map code {
    font-size: 0.8125rem;
    color: var(--ink);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1px 6px;
    white-space: nowrap;
}
@media (max-width: 768px) {
    .control-map { font-size: 0.875rem; }
    .control-map thead th { padding: 12px 14px 10px; }
    .control-map tbody td { padding: 13px 14px; }
}

/* =========================================================================
   Annex A scope grid (sk-annex) — ISO 27001. All 93 Annex A:2022 controls
   as an open ruled grid, one row per theme. The controls Vornin maps scan
   findings to are lit in ice; the rest stay quiet so the scanner slice reads
   against the whole standard. Mono Means Machine: control IDs are mono.
   ========================================================================= */
.sk-annex { margin: 0; }
.sk-annex-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 28px;
    align-items: center;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border);
}
.sk-annex-stat {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-family: var(--font-display);
    line-height: 1;
}
.sk-annex-stat .n {
    font-size: clamp(2.75rem, 5vw, 3.5rem);
    font-weight: 500;
    letter-spacing: -0.03em;
    background: linear-gradient(120deg, var(--teal), var(--ice));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.sk-annex-stat .of {
    font-size: 1.125rem;
    color: var(--ink-2);
    white-space: nowrap;
}
.sk-annex-lead {
    margin: 0;
    max-width: 46ch;
    color: var(--ink-2);
    font-size: 0.9375rem;
    line-height: 1.55;
}
.sk-annex-legend {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-3);
}
.sk-annex-legend li { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.sk-annex-legend li::before {
    content: "";
    width: 14px;
    height: 10px;
    border-radius: 2px;
    border: 1px solid var(--border);
}
.sk-annex-legend li.is-on { color: var(--ink-2); }
.sk-annex-legend li.is-on::before { background: var(--ice-dim); border-color: var(--ice); }

.sk-annex-group {
    display: grid;
    grid-template-columns: 176px 1fr;
    gap: 24px;
    padding: 20px 0;
    border-bottom: 1px solid var(--border-soft);
}
.sk-annex-label {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--ink);
    font-size: 0.9375rem;
    font-weight: 600;
}
.sk-annex-label .ref,
.sk-annex-label .count {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.sk-annex-label .count b { color: var(--ice); font-weight: 500; }
.sk-annex-cells {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
    gap: 4px;
    align-content: start;
}
.sk-annex-cells li {
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: var(--r-xs);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--ink-3);
}
.sk-annex-cells li.is-on {
    color: var(--ink);
    font-weight: 600;
    background: var(--ice-dim);
    border-color: var(--ice);
}
.sk-annex-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.sk-annex .sk-map-note { margin-top: 20px; }

@media (max-width: 860px) {
    .sk-annex-head { grid-template-columns: auto 1fr; }
    .sk-annex-legend { grid-column: 1 / -1; flex-direction: row; gap: 20px; }
}
@media (max-width: 640px) {
    .sk-annex-head { grid-template-columns: 1fr; gap: 14px; }
    .sk-annex-group { grid-template-columns: 1fr; gap: 12px; padding: 16px 0; }
    .sk-annex-label { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
    .sk-annex-cells { grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); }
    .sk-annex-cells li { height: 26px; font-size: 0.625rem; }
    .sk-annex .sk-map-note a { white-space: normal; }
}

/* =========================================================================
   Discovery inventory (sk-assets) — ASM. Six asset types as an open ruled
   grid (no tiles): icon beside the headline, text under the headline.
   A fan-in bracket under the grid converges on one mark: six sources, one
   inventory (deck "External attack surface visibility").
   ========================================================================= */
.sk-assets {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--border);
}
.sk-asset {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    column-gap: 14px;
    align-content: start;
    padding: 28px clamp(20px, 2.5vw, 32px) 30px 0;
    border-bottom: 1px solid var(--border-soft);
}
.sk-asset:nth-child(3n+2), .sk-asset:nth-child(3n+3) {
    padding-left: clamp(20px, 2.5vw, 32px);
    border-left: 1px solid var(--border-soft);
}
.sk-asset-icon { grid-row: 1; grid-column: 1; margin-top: 1px; color: var(--ink-3); }
.sk-asset h3 {
    grid-row: 1; grid-column: 2;
    margin: 0;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: var(--ink);
}
.sk-asset p {
    grid-row: 2; grid-column: 2;
    margin: 6px 0 0;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--ink-2);
}

/* fan-in: one drop per column into a rail, rail into the mark */
.sk-assets-merge {
    position: relative;
    height: 84px;
    display: grid;
    place-items: end center;
}
.sk-assets-merge::before {         /* column drops + rail */
    content: "";
    position: absolute;
    top: 0;
    left: calc(100% / 6);
    right: calc(100% / 6);
    height: 28px;
    border: 1px solid var(--border);
    border-top: 0;
    background: linear-gradient(var(--border), var(--border)) center / 1px 100% no-repeat;
}
.sk-assets-merge::after {          /* rail to mark */
    content: "";
    position: absolute;
    top: 28px;
    left: 50%;
    width: 1px;
    height: 16px;
    background: linear-gradient(180deg, var(--border), var(--teal-40));
}
.sk-assets-merge img {
    width: 40px;
    height: 40px;
    padding: 9px;
    box-sizing: border-box;
    background: var(--surface);
    border: 1px solid var(--teal-25);
    box-shadow: 0 0 32px -6px var(--teal-20);
}

@media (max-width: 900px) {
    .sk-assets { grid-template-columns: 1fr 1fr; }
    .sk-asset:nth-child(3n+2), .sk-asset:nth-child(3n+3) { padding-left: 0; border-left: 0; }
    .sk-asset:nth-child(2n) { padding-left: 20px; border-left: 1px solid var(--border-soft); }
    .sk-assets-merge { display: none; }
}
@media (max-width: 560px) {
    .sk-assets { grid-template-columns: 1fr; }
    .sk-asset:nth-child(2n) { padding-left: 0; border-left: 0; }
    .sk-asset { padding: 22px 0; }
}

/* Control-map footnote: product-truth caveat + interlink. Body face, not mono
   (mono is for machine data); quiet, but readable at paragraph length. */
.sk-map-note {
    margin: 20px 0 0;
    max-width: 78ch;
    font-size: 0.85rem;
    line-height: 1.65;
    color: var(--ink-3);
}
.sk-map-note a { white-space: nowrap; }

/* =========================================================================
   One finding, nine frameworks (sk-fanout) — /use-cases/compliance.
   A single example finding fans out over a navy rail to the control IDs
   Vornin maps it to in each framework. Structural lines stay navy; control
   IDs are machine data (mono, the control-map code chip).
   ========================================================================= */
.sk-fanout { margin: 0 0 56px; }
.sk-fanout-body {
    display: grid;
    grid-template-columns: minmax(220px, 280px) 1fr;
    gap: 0;
    align-items: center;
    /* framed + lifted so the diagram holds its own over the section's ghost crop */
    padding: 28px 32px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0;                 /* square: brand geometric register, like tables */
    box-shadow: var(--shadow-card);
}
.sk-fanout-src {
    position: relative;
    padding: 22px 24px;
    background: var(--card);
    border: 1px solid var(--ice-border);
    border-radius: 0;
}
.sk-fanout-src::after {          /* connector from the finding to the rail */
    content: "";
    position: absolute;
    top: 50%;
    right: -40px;
    width: 40px;
    border-top: 1px solid var(--border);
}
.sk-fanout-kicker,
.sk-fanout-meta {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.sk-fanout-title {
    display: block;
    margin: 10px 0 12px;
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ink);
}
.sk-fanout-meta { display: flex; align-items: center; gap: 10px; letter-spacing: 0.06em; }
/* Severity badge: design-system status pattern, token at 15% fill + token text.
   High = orange (Critical = red), same ramp order as the app. */
.sk-sev {
    padding: 2px 8px;
    border-radius: var(--r-xs);
    letter-spacing: 0.08em;
}
.sk-sev.is-high { color: var(--orange); background: var(--orange-dim); }

.sk-fanout-list {
    list-style: none;
    margin: 0 0 0 40px;
    padding: 0 0 0 24px;
    border-left: 1px solid var(--border);
}
.sk-fanout-list li {
    position: relative;
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 16px;
    align-items: baseline;
    padding: 9px 0;
    border-bottom: 1px solid var(--border-soft);
}
.sk-fanout-list li:last-child { border-bottom: 0; }
.sk-fanout-list li::before {     /* tick from the rail to each framework */
    content: "";
    position: absolute;
    left: -24px;
    top: 50%;
    width: 14px;
    border-top: 1px solid var(--border);
}
.sk-fanout-fw { color: var(--ink); font-weight: 600; font-size: 0.9375rem; }
.sk-fanout-fw small {
    display: block;
    margin-top: 2px;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--ink-3);
}
.sk-fanout-ids { display: flex; flex-wrap: wrap; gap: 6px; }
.sk-fanout-ids code {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: var(--ink);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-xs);
    padding: 2px 8px;
    white-space: nowrap;
}
.sk-fanout .sk-map-note { margin-top: 20px; }

@media (max-width: 760px) {
    .sk-fanout-body { grid-template-columns: 1fr; padding: 20px 18px; }
    .sk-fanout-src::after {
        top: auto;
        bottom: -24px;
        right: auto;
        left: 32px;
        width: 0;
        height: 24px;
        border-top: 0;
        border-left: 1px solid var(--border);
    }
    .sk-fanout-list { margin: 24px 0 0 32px; padding-left: 18px; }
    .sk-fanout-list li { grid-template-columns: 1fr; gap: 6px; }
    .sk-fanout-list li::before { left: -18px; top: 20px; width: 10px; }
    .sk-fanout .sk-map-note a { white-space: normal; }
}