/* Ki — Intro / Overnight Deficit
   Source: Ki Home.html lines 179–197.
   Two-column grid 1fr 1fr · 96px gap. Left = copy + ink CTA.
   Right = three serif stat rows separated by 1px rules. */

/* Source `<section class="block">` defaults to white (`var(--paper)`); the
   color control can override per-instance, but the CSS default must paint the
   section so it does not fall through to whatever theme bg sits behind. */
.ki-scope .ki-intro-deficit {
    padding: 96px 0;
    position: relative;
    background: var(--ki-paper);
}

.ki-scope .ki-intro-deficit .intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    /* Vertically centre the left copy against the taller right stat column. */
    align-items: center;
}

/* ── Left copy ──────────────────────────────────────────────── */
.ki-scope .ki-intro-deficit .intro-copy .catchline {
    font-family: var(--ki-sans);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ki-blue-2);
    display: block;
    margin-bottom: 18px;
}
.ki-scope .ki-intro-deficit .intro-copy h2 {
    font-family: var(--ki-serif);
    font-weight: 400;
    font-size: clamp(36px, 4vw, 50px);
    line-height: 1.1;
    letter-spacing: -0.005em;
    color: var(--ki-ink);
    max-width: 14ch;
    margin: 0 0 22px;
}
.ki-scope .ki-intro-deficit .intro-copy .lead-p {
    font-family: var(--ki-sans);
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--ki-ink-mute);
    margin: 0 0 14px;
    max-width: 42ch;
}
.ki-scope .ki-intro-deficit .intro-cta { margin-top: 28px; }

/* Ink CTA — matches the source `.btn-ink` (deep teal pill with arrow) */
.ki-scope .ki-intro-deficit .btn-deficit {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    height: 52px;
    padding: 0 26px;
    background: var(--ki-blue-deep);
    color: var(--ki-paper);
    font-family: var(--ki-sans);
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 600;
    border-radius: 2px;
    transition: background 220ms ease, transform 220ms ease;
}
.ki-scope .ki-intro-deficit .btn-deficit:hover {
    background: var(--ki-blue);
    transform: translateY(-1px);
}
.ki-scope .ki-intro-deficit .btn-deficit::after {
    content: "→";
    font-family: var(--ki-serif);
    font-size: 18px;
}

/* ── Right stats ────────────────────────────────────────────── */
.ki-scope .ki-intro-deficit .intro-stats {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.ki-scope .ki-intro-deficit .intro-stat {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 32px;
    align-items: baseline;
    padding: 22px 0;
    border-bottom: 1px solid var(--ki-rule);
}
.ki-scope .ki-intro-deficit .intro-stat:first-child {
    border-top: 1px solid var(--ki-rule);
}
.ki-scope .ki-intro-deficit .intro-stat .num {
    font-family: var(--ki-serif);
    font-size: 64px;
    line-height: 0.9;
    color: var(--ki-blue);
    min-width: 160px;
    letter-spacing: -0.01em;
}
.ki-scope .ki-intro-deficit .intro-stat .num .suf {
    font-size: 0.5em;
    color: var(--ki-ink-mute);
    font-family: var(--ki-num);
    font-weight: 400;
    letter-spacing: 0;
    margin-left: 2px;
}
.ki-scope .ki-intro-deficit .intro-stat .lbl {
    font-family: var(--ki-sans);
    font-size: 15.5px;
    color: var(--ki-ink-mute);
    line-height: 1.55;
    max-width: 32ch;
}
.ki-scope .ki-intro-deficit .intro-stat .lbl strong {
    color: var(--ki-ink);
    font-weight: 600;
    display: block;
    font-size: 14px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

/* ── Summary band (merged from the old momentumism section) ───────
   A tinted closing band: small accent rule → serif statement →
   a row of numbered keyword cards split by hairline dividers. */
.ki-scope .ki-intro-deficit .intro-summary {
    margin-top: 44px;
    padding: 32px 36px;
    text-align: center;
    background:
        radial-gradient(120% 100% at 50% 0%, var(--ki-blue-mist) 0%, rgba(236,254,255,0) 70%),
        var(--ki-cream);
    border: 1px solid var(--ki-rule);
    border-radius: 4px;
}
.ki-scope .ki-intro-deficit .intro-summary-line {
    font-family: var(--ki-serif);
    font-weight: 400;
    font-size: clamp(21px, 2.2vw, 28px);
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--ki-ink);
    margin: 0 auto;
    max-width: 26ch;
}
.ki-scope .ki-intro-deficit .intro-summary-line em {
    font-family: var(--ki-serif-italic);
    font-style: italic;
    color: var(--ki-blue-deep);
}
.ki-scope .ki-intro-deficit .intro-summary-keys {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 20px;
    margin-top: 18px;
}
.ki-scope .ki-intro-deficit .intro-summary-keys .key {
    position: relative;
    font-family: var(--ki-serif);
    font-size: 20px;
    color: var(--ki-ink);
}
.ki-scope .ki-intro-deficit .intro-summary-keys .key + .key::before {
    content: "·";
    position: absolute;
    left: -12px;
    color: var(--ki-blue);
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .ki-scope .ki-intro-deficit { padding: 72px 0; }
    .ki-scope .ki-intro-deficit .intro-summary { margin-top: 44px; padding-top: 32px; }
    .ki-scope .ki-intro-deficit .intro {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    .ki-scope .ki-intro-deficit .intro-stat .num {
        font-size: 52px;
        min-width: 120px;
    }
}
@media (max-width: 700px) {
    .ki-scope .ki-intro-deficit { padding: 72px 0; }
    .ki-scope .ki-intro-deficit .intro { gap: 40px; }
    .ki-scope .ki-intro-deficit .intro-stat {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 22px 0;
    }
    .ki-scope .ki-intro-deficit .intro-stat .num {
        font-size: 44px;
        min-width: 0;
    }
}