/* Closing CTA banner, v2 — 2026-08-14 (supersedes cta-20260814.css, which
   stays on disk untouched; CSS here is served immutable for a year).

   The first redesign fell flat on the real page: the two-column layout left
   the panel centre empty, the tint was too subtle to read as colour, and the
   bottom segment strip scanned as broken dashes rather than a transfer.

   v2 keeps the editorial layout but fills it with the PRODUCT: the end column
   is two download rows drawn with the site's own app components (.preview-row,
   .icon-chip, .track, .track-fill, .track-shine — the exact classes the old
   hero mock used, still shipped in the app stylesheet). One row is
   PDM-Setup.exe mid-transfer with the animated shine, one is a finished file
   in the done-green. Nothing is invented: it is the app's own list, so the
   banner shows what you get instead of decorating.

   The panel itself commits to colour: a 30% primary mix over the card with an
   accent bloom from the top-start corner, a tinted border and the brand ring
   shadow. Both `background` declarations are kept in order — browsers without
   color-mix() drop the second and keep the plain card, and the old app-css
   rule beneath still provides the legacy gradient for anything older. Text
   colours all come from theme tokens, so light theme stays legible (no
   hard-coded #fff anywhere). */

.cta-banner {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    color: var(--fg);
    text-align: start;
    background: var(--card);
    background:
        radial-gradient(
            90% 140% at 10% -30%,
            color-mix(in srgb, var(--accent) 18%, transparent),
            transparent 55%
        ),
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--primary) 30%, var(--card)),
            color-mix(in srgb, var(--accent) 10%, var(--card))
        );
    border: 1px solid var(--border);
    border-color: color-mix(in srgb, var(--primary) 45%, transparent);
    box-shadow:
        0 24px 60px var(--ring),
        inset 0 1px 0 color-mix(in srgb, var(--fg) 12%, transparent);
    padding: 52px;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    align-items: center;
    gap: 40px;
}

.cta-copy h2 {
    margin: 0 0 10px;
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -.4px;
    line-height: 1.2;
}

.cta-copy p {
    margin: 0;
    max-width: 44ch;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.7;
    text-wrap: balance;
}

/* On the dark tinted panel the plain muted grey goes murky — lift it. */
[data-theme=dark] .cta-copy p {
    color: color-mix(in srgb, var(--fg) 68%, transparent);
}

.cta-btn {
    margin-top: 26px;
}

.cta-demo {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.cta-demo .preview-row {
    box-shadow: 0 14px 30px color-mix(in srgb, var(--bg) 45%, transparent);
}

@media (max-width: 860px) {
    .cta-banner {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 36px 24px;
        gap: 28px;
    }

    .cta-copy p {
        margin-inline: auto;
    }

    .cta-demo {
        width: 100%;
        max-width: 420px;
        margin-inline: auto;
    }
}