/* ════════════════════════════════════════════════════════════════════════
   Landing v3 — shared section styles (hero envelope, KPI strip, sources
   constellation, compliance radar, social proof, upcoming timeline).

   Extracted verbatim from the inline <style> block of templates/v3.html so
   the SAME section components can be reused on the /ai, /monitoring and
   /software landing pages without divergence. Loaded by v3.html (home) and
   the three landing templates, AFTER design-tokens.css + home.css.
   ════════════════════════════════════════════════════════════════════════ */

        .v2-section {
            padding: var(--space-10) var(--space-5);
            min-height: 480px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .v2-section-inner {
            max-width: var(--content-max-width);
            margin: 0 auto;
            width: 100%;
        }
        .v2-section--placeholder .v2-section-inner {
            border: 1px dashed var(--color-border);
            border-radius: var(--radius-lg);
            padding: var(--space-8) var(--space-5);
            text-align: center;
            color: var(--color-text-faint);
            font-size: var(--font-size-sm);
            text-transform: uppercase;
            letter-spacing: 1.5px;
            font-weight: var(--font-weight-semibold);
        }
        .v2-section--placeholder.dark-section .v2-section-inner {
            border-color: rgba(255,255,255,0.18);
            color: rgba(255,255,255,0.55);
        }
        .v2-draft-banner {
            background: var(--color-accent-bg, #fff7ed);
            color: var(--color-accent, #b45309);
            border-bottom: 1px solid var(--color-border);
            text-align: center;
            font-size: var(--font-size-xs);
            font-weight: var(--font-weight-semibold);
            letter-spacing: 0.6px;
            text-transform: uppercase;
            padding: 6px var(--space-4);
        }

        /* ── Hero right column: app dashboard preview ── */
        .v2-hero-visual {
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 0;
        }
        .v2-hero-visual-frame {
            position: relative;
            width: 100%;
            max-width: 720px;
            border-radius: 18px;
            overflow: hidden;
            background: #0b1220;
            box-shadow:
                0 1px 0 rgba(255, 255, 255, 0.08) inset,
                0 0 0 1px rgba(255, 255, 255, 0.06),
                0 24px 48px -12px rgba(8, 12, 28, 0.55),
                0 48px 96px -24px rgba(8, 12, 28, 0.45);
            transform: translateZ(0);
            transition: transform var(--transition-base, 240ms ease), box-shadow var(--transition-base, 240ms ease);
        }
        .v2-hero-visual-img {
            display: block;
            width: 100%;
            height: auto;
            border-radius: inherit;
        }

        @media (max-width: 960px) {
            .v2-hero-visual-frame { max-width: 560px; }
        }
        @media (max-width: 720px) {
            .v2-hero-visual { margin-top: var(--space-4); }
            .v2-hero-visual-frame { max-width: 100%; border-radius: 14px; }
        }

        /* ── Uniform 24px vertical rhythm between hero-text children ── */
        #v2-hero .home-hero-text > * { margin-top: 24px; margin-bottom: 0; }
        #v2-hero .home-hero-text > *:first-child { margin-top: 0; }

        /* ── Hero CTA buttons ── */
        .v2-hero-ctas {
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-3);
            padding: 15px 0;
        }
        .v2-hero-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 14px 26px;
            font-family: var(--font-family);
            font-size: var(--font-size-md, 15px);
            font-weight: var(--font-weight-semibold);
            line-height: 1;
            border-radius: var(--radius-full);
            text-decoration: none;
            white-space: nowrap;
            cursor: pointer;
            transition: transform var(--transition-fast), background var(--transition-fast),
                        border-color var(--transition-fast), box-shadow var(--transition-fast),
                        color var(--transition-fast);
            border: 1.5px solid transparent;
        }
        .v2-hero-btn i { font-size: 11px; transition: transform var(--transition-fast); }
        .v2-hero-btn:hover i { transform: translateX(3px); }

        .v2-hero-btn--primary {
            background: linear-gradient(135deg, var(--color-accent) 0%, #4d8eea 50%, #6aa3f0 100%);
            color: #fff;
            border-color: rgba(255, 255, 255, 0.18);
            box-shadow:
                0 1px 0 rgba(255, 255, 255, 0.25) inset,
                0 8px 20px -6px rgba(43, 122, 228, 0.55),
                0 16px 40px -12px rgba(43, 122, 228, 0.4);
        }
        .v2-hero-btn--primary:hover {
            transform: translateY(-1px);
            box-shadow:
                0 1px 0 rgba(255, 255, 255, 0.3) inset,
                0 10px 24px -6px rgba(43, 122, 228, 0.65),
                0 20px 48px -12px rgba(43, 122, 228, 0.5);
        }

        @media (max-width: 720px) {
            .v2-hero-ctas { justify-content: center; }
            .v2-hero-btn { padding: 13px 22px; font-size: 14px; }
        }

        /* ── "What comes next" floating card ─────────────────────────── */
        .v2-hero-visual { position: relative; }

        .v2-wcn-card {
            position: absolute;
            left: -28px;
            bottom: -36px;
            z-index: 3;
            width: min(360px, 86%);
            background: #fff;
            color: var(--color-text-primary);
            border-radius: 14px;
            padding: 16px 18px 14px;
            box-shadow:
                0 1px 0 rgba(255,255,255,0.6) inset,
                0 0 0 1px rgba(15, 23, 42, 0.04),
                0 18px 32px -10px rgba(8, 12, 28, 0.45),
                0 36px 60px -20px rgba(8, 12, 28, 0.35);
            transition: transform var(--transition-base, 240ms ease),
                        box-shadow var(--transition-base, 240ms ease);
            opacity: 0;
            transform: translateY(8px);
        }
        .v2-wcn-card.is-ready { opacity: 1; transform: translateY(0); }
        .v2-wcn-body {
            display: flex;
            gap: 12px;
            align-items: flex-start;
        }
        .v2-wcn-flag {
            flex: 0 0 auto;
            width: 28px;
            height: 21px;
            border-radius: 3px;
            overflow: hidden;
            box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08);
            background: #eef2f6 center/cover no-repeat;
            margin-top: 2px;
        }
        .v2-wcn-flag .fi { width: 100%; height: 100%; display: block; }

        .v2-wcn-event { flex: 1 1 auto; min-width: 0; }
        .v2-wcn-event-title {
            font-size: 13px;
            font-weight: var(--font-weight-semibold);
            color: var(--color-text-primary);
            line-height: 1.35;
            margin: 0 0 4px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .v2-wcn-event-sub {
            font-size: 11.5px;
            color: var(--color-text-secondary);
            line-height: 1.3;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .v2-wcn-when {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 4px 9px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: var(--font-weight-semibold);
            background: var(--color-accent-bg);
            color: var(--color-accent);
            white-space: nowrap;
            margin-top: 8px;
            align-self: flex-start;
        }
        .v2-wcn-when--soon {
            background: rgba(245, 158, 11, 0.12);
            color: #b45309;
        }
        .v2-wcn-when--imminent {
            background: rgba(220, 38, 38, 0.1);
            color: #b91c1c;
        }

        /* Carousel cross-fade. We fade the body (flag + text + when pill)
           together so the swap reads as a single unit. */
        .v2-wcn-body {
            opacity: 1;
            transition: opacity 640ms ease;
        }
        .v2-wcn-body.is-faded { opacity: 0; }

        .v2-wcn-card.is-loading .v2-wcn-event-title,
        .v2-wcn-card.is-loading .v2-wcn-event-sub {
            color: transparent;
            background: linear-gradient(90deg, rgba(15,23,42,0.06) 0%, rgba(15,23,42,0.12) 50%, rgba(15,23,42,0.06) 100%);
            background-size: 200% 100%;
            border-radius: 4px;
            animation: v2-wcn-shimmer 1.4s linear infinite;
            min-height: 14px;
        }
        @keyframes v2-wcn-shimmer {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }

        @media (max-width: 960px) {
            .v2-wcn-card {
                left: 8px;
                bottom: 8px;
                width: min(320px, calc(100% - 16px));
            }
        }
        @media (max-width: 720px) {
            .v2-wcn-card {
                position: static;
                width: 100%;
                margin: 0 auto var(--space-4);
                max-width: 420px;
            }
            .v2-hero-visual { flex-direction: column; }
        }

        /* ── Hero envelope: ONE dark gradient covers both hero + KPI strip ─ */
        .v2-hero-envelope { /* picks up `.dark-section` background + pattern overlay */ }
        /* The inner sections must be transparent so the single envelope
           gradient bleeds through both, eliminating the visible seam that
           appears when two consecutive `.dark-section`s each generate
           their own gradient at different y offsets. */
        #v2-hero,
        .v2-hero-kpis-section { background: transparent; }
        #v2-hero { padding-bottom: var(--space-6); }
        .v2-hero-kpis-section {
            padding: var(--space-6) var(--space-5) var(--space-10);
            position: relative;
            z-index: 1; /* sit above the envelope's ::after pattern */
        }
        .v2-hero-kpis-wrap {
            max-width: var(--content-max-width);
            margin: 0 auto;
            width: 100%;
        }
        .v2-hero-kpis {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: var(--space-2);
            padding-top: var(--space-6);
            border-top: 1px solid rgba(255, 255, 255, 0.12);
        }
        .v2-kpi {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 4px 8px;
            min-width: 0;
        }
        .v2-kpi-icon {
            flex: 0 0 auto;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(255, 255, 255, 0.07);
            color: var(--color-accent-light);
            font-size: 17px;
            box-shadow:
                0 0 0 1px rgba(255, 255, 255, 0.08) inset;
        }
        .v2-kpi-text {
            display: flex;
            flex-direction: column;
            min-width: 0;
            gap: 2px;
        }
        .v2-kpi-value {
            font-size: 22px;
            font-weight: var(--font-weight-bold);
            color: #fff;
            line-height: 1.05;
            letter-spacing: -0.3px;
            font-variant-numeric: tabular-nums;
        }
        .v2-kpi-label {
            font-size: 12.5px;
            color: rgba(255, 255, 255, 0.7);
            line-height: 1.3;
        }

        @media (max-width: 1100px) {
            .v2-hero-kpis { grid-template-columns: repeat(3, 1fr); row-gap: var(--space-5); }
            .v2-hero-kpis .v2-kpi:nth-child(n+4) { grid-column: span 1; }
        }
        @media (max-width: 720px) {
            .v2-hero-kpis-wrap { margin-top: var(--space-6); padding: 0 var(--space-4); }
            .v2-hero-kpis {
                grid-template-columns: repeat(2, 1fr);
                row-gap: var(--space-4);
                column-gap: var(--space-3);
                padding-top: var(--space-5);
            }
            .v2-hero-kpis .v2-kpi:last-child { grid-column: 1 / -1; justify-content: center; text-align: center; }
            .v2-kpi-value { font-size: 20px; }
            .v2-kpi-label { font-size: 12px; }
            .v2-kpi-icon { width: 40px; height: 40px; font-size: 15px; }
        }

        /* ════════════════════════════════════════════════════════════════
           SECTION : "Compliance, on radar." — single geo-aware framework
           section. Visitor's scope sits in the centre as the radar's
           glowing core, every applicable framework is plotted as a blip
           on a fixed polar slot. Shared primitives (`.v2-fwc-eyebrow`,
           `.v2-fwc-title`, `.v2-fwc-sub`, `.v2-fwflag`) live at the top
           so they can be re-used elsewhere on the page if needed.
           ════════════════════════════════════════════════════════════════ */

        /* --- Shared primitives --------------------------------------- */
        .v2-fwc {
            padding: var(--space-12, 80px) var(--space-5);
            background: var(--color-bg);
            position: relative;
            overflow: hidden;
        }
        .v2-fwc + .v2-fwc { padding-top: 0; }
        .v2-fwc-inner {
            max-width: var(--content-max-width);
            margin: 0 auto;
            position: relative;
        }
        .v2-fwc-header {
            text-align: center;
            max-width: 720px;
            margin: 0 auto var(--space-7, 40px);
        }
        .v2-fwc-eyebrow {
            font-size: 12px;
            font-weight: var(--font-weight-semibold);
            letter-spacing: 1.6px;
            text-transform: uppercase;
            color: var(--color-accent);
            margin: 0 0 14px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
        .v2-fwc-title {
            font-size: clamp(28px, 3.4vw, 42px);
            font-weight: var(--font-weight-bold);
            color: var(--color-text-primary);
            line-height: 1.08;
            letter-spacing: -0.5px;
            margin: 0 0 12px;
        }
        .v2-fwc-title em {
            font-style: normal;
            color: var(--color-accent);
        }
        .v2-fwc-sub {
            font-size: var(--font-size-md, 15px);
            line-height: var(--line-height-relaxed);
            color: var(--color-text-secondary);
            margin: 0;
        }
        .v2-fwc-ctas {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            gap: var(--space-3) var(--space-4);
            margin-top: var(--space-5, 24px);
        }
        .v2-fwgrid-empty {
            text-align: center;
            color: var(--color-text-tertiary, #6b7280);
            font-size: 14px;
            padding: 32px 16px;
        }

        /* Reusable jurisdiction flag chip — three sizes (xs / sm / md).
           No outline / box-shadow : the flag must read as a clean asset
           in every context (eyebrows, blip cards, source cards). */
        .v2-fwflag {
            display: inline-flex;
            border-radius: 0;
            overflow: hidden;
            background: transparent;
            flex-shrink: 0;
        }
        .v2-fwflag--xs { width: 16px; height: 12px; }
        .v2-fwflag--sm { width: 20px; height: 14px; }
        .v2-fwflag--md { width: 28px; height: 20px; }
        .v2-fwflag .fi { width: 100%; height: 100%; display: block; }
        .v2-fwflag--img img { display: block; width: 100%; height: 100%; object-fit: cover; }
        .v2-fwflag--icon {
            background: var(--color-accent-bg);
            color: var(--color-accent);
            align-items: center;
            justify-content: center;
            font-size: 9px;
            box-shadow: none;
        }

        /* ── COMPLIANCE RADAR ──────────────────────────────────────────
           Single circular radar screen with sweeping arm. Six framework
           "blips" are plotted on six fixed polar slots (60° apart),
           alternating between an inner ring (--r: 56%) and an outer ring
           (--r: 80%) so adjacent labels never overlap. Upper-half blips
           hang their label above the dot, lower-half blips below, so
           labels never collide with the centre disc either. The whole
           screen is forced to a perfect circle by clipping to a
           border-radius:50% with aspect-ratio:1/1 on every breakpoint. */
        #v2-fwradar {
            background: #0b1220;
            color: #e6edf6;
        }
        #v2-fwradar .v2-fwc-eyebrow { color: #8ab6f4; }
        #v2-fwradar .v2-fwc-title { color: #ffffff; }
        #v2-fwradar .v2-fwc-title em { color: #4d8eea; }
        #v2-fwradar .v2-fwc-sub { color: rgba(230, 237, 246, 0.7); }
        #v2-fwradar .v2-fwgrid-empty { color: rgba(230, 237, 246, 0.7); }

        /* Two-column layout : radar on the LEFT, the section title +
           subtitle on the RIGHT, mirroring the rhythm of the upcoming
           and sources sections. Stacks to a single column under 880px. */
        .v2-fwr-stage {
            max-width: var(--content-max-width);
            margin: 0 auto;
            display: grid;
            grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
            gap: clamp(28px, 5vw, 72px);
            align-items: center;
        }
        .v2-fwr-text {
            min-width: 0;
            text-align: left;
        }
        .v2-fwr-text .v2-fwc-eyebrow,
        .v2-fwr-text .v2-fwc-title,
        .v2-fwr-text .v2-fwc-sub {
            text-align: left;
            margin-left: 0;
            margin-right: 0;
        }
        .v2-fwr-text .v2-fwc-title {
            font-size: clamp(28px, 3.6vw, 44px);
        }
        .v2-fwr-text .v2-fwc-sub {
            max-width: 460px;
        }
        @media (max-width: 880px) {
            .v2-fwr-stage {
                grid-template-columns: 1fr;
                gap: var(--space-6, 28px);
            }
            /* Mobile : title / subtitle first, radar after, so the user
               reads the framing copy before the (heavier) visualisation. */
            .v2-fwr-text   { order: 1; text-align: center; }
            .v2-fwr-screen { order: 2; }
            .v2-fwr-text .v2-fwc-eyebrow,
            .v2-fwr-text .v2-fwc-title,
            .v2-fwr-text .v2-fwc-sub,
            .v2-fwr-text .v2-fwr-more-note {
                text-align: center;
                margin-left: auto;
                margin-right: auto;
            }
            .v2-fwr-text .v2-fwc-eyebrow,
            .v2-fwr-text .v2-fwr-more-note {
                justify-content: center;
            }
        }

        .v2-fwr-screen {
            position: relative;
            width: 100%;
            max-width: 540px;
            aspect-ratio: 1 / 1;
            border-radius: 50%;
            margin: 0 auto;
            /* Establish a size container so blips can express their orbit
               radius in `cqmin` (1% of the screen's smaller dimension).
               That keeps the polar geometry crisp at every breakpoint. */
            container-type: size;
            container-name: fwradar;
            background:
                radial-gradient(circle at center,
                    rgba(43, 122, 228, 0.10) 0%,
                    rgba(43, 122, 228, 0.02) 40%,
                    transparent 70%),
                radial-gradient(circle at center,
                    #0e1830 0%,
                    #0b1220 70%);
            box-shadow:
                inset 0 0 0 1px rgba(43, 122, 228, 0.18),
                inset 0 0 60px rgba(43, 122, 228, 0.10),
                0 24px 60px -24px rgba(8, 12, 28, 0.6);
        }
        .v2-fwr-grid {
            position: absolute;
            inset: 0;
            width: 100%; height: 100%;
            pointer-events: none;
        }
        .v2-fwr-ring {
            fill: none;
            stroke: rgba(43, 122, 228, 0.20);
            stroke-width: 1;
            stroke-dasharray: 2 4;
        }
        .v2-fwr-axis {
            stroke: rgba(43, 122, 228, 0.14);
            stroke-width: 1;
        }
        .v2-fwr-sweep {
            transform-origin: 200px 200px;
            animation: v2-fwr-sweep 4s linear infinite;
        }
        .v2-fwr-sweep-line {
            stroke: rgba(43, 122, 228, 0.65);
            stroke-width: 1.5;
            stroke-linecap: round;
        }
        @keyframes v2-fwr-sweep {
            from { transform: rotate(0deg); }
            to   { transform: rotate(360deg); }
        }
        @media (prefers-reduced-motion: reduce) {
            .v2-fwr-sweep { animation: none; }
        }

        /* Central marker : the Obsidian square logo on a white circular
           pad, with comfortable padding so the dark eye icon doesn't kiss
           the disc edge. Soft blue halo behind the disc anchors it to
           the radar without competing with the framework blips. */
        .v2-fwr-center {
            position: absolute;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 3;
        }
        .v2-fwr-center-logo {
            width: 84px; height: 84px;
            padding: 12px;
            border-radius: 50%;
            background: #ffffff;
            display: flex; align-items: center; justify-content: center;
            box-shadow:
                0 0 0 4px rgba(43, 122, 228, 0.15),
                0 0 24px rgba(43, 122, 228, 0.45),
                0 6px 18px -4px rgba(8, 12, 28, 0.5);
        }
        .v2-fwr-center-logo img {
            display: block;
            width: 100%; height: 100%;
            object-fit: contain;
        }

        /* Framework "blip" : positioned on a polar slot via --ang and
           --r (percent from centre). Non-interactive — pure label
           container — since the side panel is gone. */
        .v2-fwr-blip {
            position: absolute;
            top: 50%; left: 50%;
            transform:
                translate(-50%, -50%)
                rotate(var(--ang))
                translate(var(--r))
                rotate(calc(-1 * var(--ang)));
            z-index: 2;
            cursor: default;
            user-select: none;
        }
        .v2-fwr-blip-dot {
            display: block;
            width: 13px; height: 13px;
            border-radius: 50%;
            background: var(--color-accent);
            box-shadow:
                0 0 0 3px rgba(43, 122, 228, 0.18),
                0 0 14px rgba(43, 122, 228, 0.75);
        }
        .v2-fwr-blip-pulse {
            position: absolute;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            width: 13px; height: 13px;
            border-radius: 50%;
            background: rgba(43, 122, 228, 0.45);
            animation: v2-fwr-blip-pulse 2.6s ease-out infinite;
            pointer-events: none;
        }
        @keyframes v2-fwr-blip-pulse {
            0%   { transform: translate(-50%, -50%) scale(0.6); opacity: 0.85; }
            100% { transform: translate(-50%, -50%) scale(2.6); opacity: 0; }
        }
        @media (prefers-reduced-motion: reduce) {
            .v2-fwr-blip-pulse { animation: none; }
        }

        /* Label tag : floats above (top-side blips) or below (bottom-side
           blips) the dot. Built as inline-flex so the framework name and
           items count sit on the same line, with a thin divider. */
        /* Mini-card label : two rows.
             row 1 -> jurisdiction flag + framework short name (the identity).
             row 2 -> framework full name (dimmed sub-line, optional).
           Built as a flex-column "card" with rounded corners ; the rounded
           pill geometry is dropped on purpose because two text rows look
           clipped inside a pill. */
        /* Mini-card label : two rows, hard-capped at 200px wide so labels
           never push past their dot. Inner text is truncated with ellipsis
           the moment it overflows that box. */
        .v2-fwr-blip-tag {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            display: inline-flex;
            flex-direction: column;
            align-items: stretch;
            gap: 2px;
            width: max-content;
            max-width: 200px;
            padding: 6px 10px;
            font-family: var(--font-family-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
            color: #ffffff;
            background: rgba(11, 18, 32, 0.92);
            border: 1px solid rgba(43, 122, 228, 0.40);
            border-radius: 10px;
            box-shadow: 0 4px 12px -4px rgba(8, 12, 28, 0.55);
            pointer-events: none;
            box-sizing: border-box;
        }
        .v2-fwr-blip--top .v2-fwr-blip-tag    { bottom: 22px; }
        .v2-fwr-blip--bottom .v2-fwr-blip-tag { top:    22px; }
        .v2-fwr-blip-tag-row {
            display: flex;
            align-items: center;
            min-width: 0; /* allow flex children to truncate inside */
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .v2-fwr-blip-tag-row--head {
            gap: 7px;
            font-size: 13px;
            font-weight: var(--font-weight-semibold);
            letter-spacing: 0.2px;
            color: #ffffff;
        }
        /* Flag stays at intrinsic size, only the name gets truncated. */
        .v2-fwr-blip-tag-row--head .v2-fwflag { flex: 0 0 auto; }
        .v2-fwr-blip-tag-name {
            min-width: 0;
            flex: 1 1 auto;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        /* Footnote-style "more frameworks" line in the right text column.
           Replaces the in-radar "+X frameworks" blip : same signal of
           breadth, but tucked discreetly under the section subtitle so
           the radar stays clean. */
        .v2-fwr-text .v2-fwr-more-note {
            margin: 14px 0 0;
            font-size: 12.5px;
            color: rgba(207, 224, 247, 0.55);
            letter-spacing: 0.1px;
            display: inline-flex;
            align-items: center;
            gap: 7px;
        }
        .v2-fwr-text .v2-fwr-more-note i {
            font-size: 11px;
            color: rgba(138, 182, 244, 0.65);
        }

        @media (max-width: 640px) {
            .v2-fwr-blip-tag                   { max-width: 150px; padding: 4px 8px; }
            .v2-fwr-blip-tag-row--head         { font-size: 11px; gap: 5px; }
        }


        /* ════════════════════════════════════════════════════════════════
           SECTION 3 : SOCIAL PROOF logo rail
           ════════════════════════════════════════════════════════════════ */
        .v2-social-proof {
            padding: var(--space-12, 80px) 0;
            background: var(--color-bg);
            position: relative;
            overflow: hidden;
        }
        .v2-sp-header {
            max-width: 820px;
            margin: 0 auto var(--space-7, 40px);
            padding: 0 var(--space-5);
            text-align: center;
        }
        .v2-sp-title {
            font-size: clamp(24px, 2.8vw, 34px);
            font-weight: var(--font-weight-bold, 700);
            color: var(--color-text-primary);
            line-height: 1.2;
            letter-spacing: -0.4px;
            margin: 0;
        }
        .v2-sp-title em {
            font-style: normal;
            color: var(--color-accent);
        }

        /* Static rail constrained to the same content width as the site
           header (.ma-header-inner). No animation : the up-to-8 logos
           are spread evenly across the row with `space-around`. */
        .v2-sp-rail {
            max-width: var(--content-max-width);
            margin: 0 auto;
            padding: 0 var(--space-5);
            width: 100%;
        }
        .v2-sp-track {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-around;
            gap: 32px 24px;
        }
        .v2-sp-logo {
            flex: 0 1 auto;
            height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0.65;
            filter: grayscale(100%);
        }
        .v2-sp-logo img {
            display: block;
            height: 100%;
            width: auto;
            max-width: 160px;
            object-fit: contain;
        }
        .v2-sp-empty {
            text-align: center;
            color: var(--color-text-tertiary, #6b7280);
            font-size: 14px;
            margin: 0;
        }

        @media (max-width: 720px) {
            .v2-social-proof { padding: var(--space-9, 56px) 0; }
            .v2-sp-track { gap: 24px 18px; }
            .v2-sp-logo { height: 34px; }
            .v2-sp-logo img { max-width: 120px; }
        }

        /* ════════════════════════════════════════════════════════════════
           SECTION : OFFICIAL SOURCES rail (white bg, geo-aware 2 + 3 grid)
           Inspired by the "Official sources. Continuously monitored." mock:
             - Centered eyebrow pill ("Trusted by compliance teams worldwide")
             - Large two-tone title + subtitle
             - 4 inline KPI badges (sources count / 24-7 / no aggregator / live)
             - 5 source cards in a 3-up grid (2 near + 3 supranational), each
               with a square logo box, flag + short name + domain, "Live"
               status pill (always Live on the marketing surface)
             - Bottom CTA row: "Explore all sources" + "How monitoring works"
           ════════════════════════════════════════════════════════════════ */
        .v2-osources {
            padding: var(--space-12, 80px) var(--space-5);
            background: #ffffff;
            position: relative;
            overflow: hidden;
        }
        /* Faint radial accents echo the inspiration mock without dragging
           any heavy art assets into the page. Pure CSS, GPU-friendly. */
        .v2-osources::before,
        .v2-osources::after {
            content: '';
            position: absolute;
            border-radius: 50%;
            pointer-events: none;
            z-index: 0;
            background: radial-gradient(circle at center,
                rgba(43, 122, 228, 0.10) 0%,
                rgba(43, 122, 228, 0.04) 35%,
                transparent 70%);
        }
        .v2-osources::before {
            width: 360px; height: 360px;
            top: 12%; right: -120px;
        }
        .v2-osources::after {
            width: 280px; height: 280px;
            bottom: 8%; left: -100px;
        }

        /* Two-column inner shell, mirrors `.v2-upcoming-inner` so the
           narrative rhythm of the page (text on the left, "evidence" card
           on the right) repeats from the upcoming section to the sources
           section. Right column slightly wider so the 2 x 3 card grid
           gets more breathing room. */
        .v2-osources-inner {
            max-width: var(--content-max-width);
            margin: 0 auto;
            position: relative;
            z-index: 1;
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
            gap: clamp(32px, 5vw, 72px);
            align-items: center;
        }

        .v2-osources-text { min-width: 0; }
        .v2-osources-header {
            margin: 0 0 var(--space-6, 28px);
        }
        .v2-osources-eyebrow {
            font-size: 12px;
            font-weight: var(--font-weight-semibold);
            letter-spacing: 1.6px;
            text-transform: uppercase;
            color: var(--color-accent);
            margin: 0 0 16px;
        }
        .v2-osources-title {
            font-size: clamp(32px, 4vw, 48px);
            font-weight: var(--font-weight-bold);
            color: var(--color-text-primary);
            line-height: 1.08;
            letter-spacing: -0.6px;
            margin: 0 0 18px;
        }
        .v2-osources-title em {
            font-style: normal;
            color: var(--color-accent);
        }
        .v2-osources-sub {
            font-size: var(--font-size-md, 15px);
            line-height: var(--line-height-relaxed);
            color: var(--color-text-secondary);
            margin: 0 0 var(--space-7, 32px);
            max-width: 480px;
        }

        @media (max-width: 960px) {
            .v2-osources-inner {
                grid-template-columns: 1fr;
                gap: var(--space-7, 32px);
                align-items: stretch;
            }
            /* Mobile : centre the eyebrow / title / subtitle so the
               left text column reads as a self-contained header above
               the constellation. */
            .v2-osources-text,
            .v2-osources-header,
            .v2-osources-eyebrow,
            .v2-osources-title,
            .v2-osources-sub { text-align: center; }
            .v2-osources-sub { max-width: none; margin-left: auto; margin-right: auto; }
        }

        /* ── Sources constellation (replaces the 2x3 card grid) ──────────
           Same geometric language as the frameworks `.v2-fwc-stage` so the
           page reads as a single visual system. Two key differences :
            1. The hub is the Obsidian logo, not the visitor jurisdiction.
            2. Connector dashes flow INWARD (sources → hub) instead of
               OUTWARD, which is what `v2-srcc-flow-in` does (positive
               dashoffset over time). The metaphor : "every regulator pours
               into Obsidian." */
        .v2-srcc-stage {
            --orb-r: 220px;
            --node-w: 180px;
            position: relative;
            width: 100%;
            max-width: 540px;
            aspect-ratio: 1 / 1;
            margin: 0 auto;
        }
        .v2-srcc-lines {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 0;
        }
        .v2-srcc-line {
            stroke: rgba(43, 122, 228, 0.30);
            stroke-width: 1.5;
            stroke-dasharray: 4 4;
            animation: v2-srcc-flow-in 8s linear infinite;
            opacity: 0.85;
        }
        /* Dashes march from the source node INWARD to the hub. The JS
           pass draws each segment hub -> node ; combining that with a
           POSITIVE dashoffset shift makes the dashes appear to flow
           against the line direction, i.e. toward the hub. Visual :
           "every regulator pours into Obsidian." */
        @keyframes v2-srcc-flow-in {
            from { stroke-dashoffset: 0; }
            to   { stroke-dashoffset: 64; }
        }
        @media (prefers-reduced-motion: reduce) {
            .v2-srcc-line { animation: none; }
        }

        /* Central hub : blue gradient (page accent), Obsidian logo
           contained inside a small white disc, label "Obsidian" in
           white. No surrounding pulse ring (intentionally calm,
           pulse energy lives on the node names instead). */
        .v2-srcc-hub {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 2;
            width: 132px;
            height: 132px;
            border-radius: 50%;
            background: linear-gradient(135deg,
                var(--color-accent) 0%,
                #4d8eea 70%,
                #8ab6f4 100%);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 8px;
            box-shadow:
                0 0 0 8px rgba(43, 122, 228, 0.08),
                0 1px 0 rgba(255, 255, 255, 0.35) inset,
                0 16px 36px -8px rgba(43, 122, 228, 0.45),
                0 28px 64px -16px rgba(43, 122, 228, 0.35);
        }
        .v2-srcc-hub-logo {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            box-shadow:
                0 0 0 2px rgba(255, 255, 255, 0.4),
                0 4px 10px -4px rgba(8, 12, 28, 0.25);
        }
        .v2-srcc-hub-logo img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .v2-srcc-hub-name {
            font-size: 13px;
            font-weight: var(--font-weight-bold);
            color: #ffffff;
            letter-spacing: 0.1px;
            line-height: 1;
            text-align: center;
        }

        /* Orbit nodes : non-interactive (no link, no hover, no cursor
           change). They just render information. */
        .v2-srcc-node {
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: 1;
            width: var(--node-w);
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 12px;
            background: #ffffff;
            border: 1px solid var(--color-border);
            border-radius: 12px;
            color: inherit;
            cursor: default;
            user-select: none;
            box-shadow:
                0 1px 0 rgba(255, 255, 255, 0.6) inset,
                0 1px 2px rgba(15, 23, 42, 0.04),
                0 10px 24px -12px rgba(15, 23, 42, 0.18);
            transform:
                translate(-50%, -50%)
                rotate(var(--ang))
                translate(var(--orb-r))
                rotate(calc(-1 * var(--ang)));
        }
        /* "Signal-emit" pulse around the entire card : the ring grows
           outward and fades to transparent, then restarts from the card
           edge. One-way animation (no shrink phase) so the visual feels
           like an emission, not a heartbeat. Subtle thickness + opacity. */
        .v2-srcc-node::after {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: inherit;
            box-shadow: 0 0 0 0 rgba(43, 122, 228, 0.22);
            animation: v2-srcc-node-pulse 2.6s ease-out infinite;
            pointer-events: none;
            z-index: -1;
        }
        @keyframes v2-srcc-node-pulse {
            0%   { box-shadow: 0 0 0 0   rgba(43, 122, 228, 0.22); }
            100% { box-shadow: 0 0 0 6px rgba(43, 122, 228, 0); }
        }
        /* "+more" tile keeps its dashed accent, no breathing pulse. */
        .v2-srcc-node--more::after { display: none; }
        @media (prefers-reduced-motion: reduce) {
            .v2-srcc-node::after { animation: none; }
        }
        /* Pure visual block: kill any hover/active state inherited
           globally so the node never reacts to the cursor. */
        .v2-srcc-node,
        .v2-srcc-node * { pointer-events: none; }
        .v2-srcc-node:hover,
        .v2-srcc-node:focus,
        .v2-srcc-node:active { transform:
            translate(-50%, -50%)
            rotate(var(--ang))
            translate(var(--orb-r))
            rotate(calc(-1 * var(--ang))); }
        .v2-srcc-node-logo {
            width: 36px; height: 36px;
            border-radius: 8px;
            background: #ffffff;
            border: 1px solid var(--color-border-subtle, #eef2f6);
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            flex: 0 0 auto;
        }
        .v2-srcc-node-logo img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
        .v2-srcc-node-fallback {
            font-size: 11px;
            font-weight: var(--font-weight-bold);
            color: var(--color-accent);
            background: var(--color-accent-bg);
            width: 100%; height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            letter-spacing: 0.3px;
        }
        .v2-srcc-node-body {
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 3px;
            flex: 1 1 auto;
        }
        .v2-srcc-node-name {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 13px;
            font-weight: var(--font-weight-bold);
            color: var(--color-text-primary);
            line-height: 1.15;
            white-space: nowrap;
            max-width: 130px;
        }
        .v2-srcc-node-name-text {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 100px;
        }
        .v2-srcc-node-flag {
            flex: 0 0 auto;
            width: 16px;
            height: 12px;
            border-radius: 2px;
            box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08);
            overflow: hidden;
            display: inline-block;
        }
        .v2-srcc-node-flag .fi { display: block; width: 100%; height: 100%; }
        .v2-srcc-node-flag--icon {
            background: var(--color-bg-subtle, #f3f4f6);
            color: var(--color-text-secondary);
            font-size: 8px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-shadow: none;
        }
        .v2-srcc-node-status {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            font-size: 10.5px;
            font-weight: var(--font-weight-semibold);
            color: #059669;
            line-height: 1;
            letter-spacing: 0.1px;
        }
        .v2-srcc-node-dot {
            width: 6px; height: 6px;
            border-radius: 50%;
            background: #10b981;
            box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.18);
            animation: v2-srcc-dot 2.4s ease-in-out infinite;
        }
        @keyframes v2-srcc-dot {
            0%, 100% { box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.18); }
            50%      { box-shadow: 0 0 0 5px rgba(16, 185, 129, 0.05); }
        }
        @media (prefers-reduced-motion: reduce) {
            .v2-srcc-node-dot { animation: none; }
        }

        /* "+more" terminal node : opaque white background (so it doesn't
           let the section bleed through), kept visually distinct via a
           dashed accent border + accent-tinted text/icon. */
        .v2-srcc-node--more {
            background: #ffffff;
            border-color: rgba(43, 122, 228, 0.30);
            border-style: dashed;
        }
        .v2-srcc-node-logo--more {
            background: var(--color-accent-bg);
            color: var(--color-accent);
            border-color: rgba(43, 122, 228, 0.18);
            font-size: 14px;
        }
        .v2-srcc-node--more .v2-srcc-node-name {
            color: var(--color-accent);
        }
        .v2-srcc-node-status--more {
            color: var(--color-accent);
        }
        .v2-srcc-node-status--more i { font-size: 9px; }

        @media (max-width: 960px) {
            .v2-srcc-stage { --orb-r: 200px; max-width: 480px; }
        }
        @media (max-width: 640px) {
            /* Phones : collapse the orbit to a vertical chain, hub on top,
               nodes stacked, lines hidden. Keeps every node clickable. */
            .v2-srcc-stage {
                aspect-ratio: auto;
                max-width: 360px;
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 12px;
                padding: 12px 0;
            }
            .v2-srcc-lines { display: none; }
            /* Hub hidden on phones : the constellation collapses to a
               vertical chain, the Obsidian centrepiece would be redundant
               with the page-level branding above. */
            .v2-srcc-hub { display: none; }
            .v2-srcc-node {
                position: relative;
                top: auto; left: auto;
                transform: none;
                width: 100%;
            }
            .v2-srcc-node-name { max-width: none; }
        }

        /* CTA row, sits at the bottom of the LEFT text column now so the
           call-to-action lines up with the source cards on the right. */
        .v2-osources-ctas {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            align-items: center;
            gap: var(--space-3) var(--space-4);
            margin-top: 0;
        }
        .v2-osources-cta {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 12px 22px;
            font-family: var(--font-family);
            font-size: var(--font-size-md, 15px);
            font-weight: var(--font-weight-semibold);
            line-height: 1;
            border-radius: var(--radius-full);
            text-decoration: none;
            white-space: nowrap;
            cursor: pointer;
            border: 1.5px solid transparent;
            transition: transform var(--transition-fast),
                        background var(--transition-fast),
                        border-color var(--transition-fast),
                        box-shadow var(--transition-fast),
                        color var(--transition-fast);
        }
        .v2-osources-cta i { font-size: 11px; transition: transform var(--transition-fast); }
        .v2-osources-cta:hover i { transform: translateX(3px); }
        .v2-osources-cta--primary {
            background: linear-gradient(135deg, var(--color-accent) 0%, #4d8eea 50%, #6aa3f0 100%);
            color: #fff;
            border-color: rgba(255, 255, 255, 0.18);
            box-shadow:
                0 1px 0 rgba(255, 255, 255, 0.25) inset,
                0 8px 20px -6px rgba(43, 122, 228, 0.55);
        }
        .v2-osources-cta--primary:hover {
            transform: translateY(-1px);
            box-shadow:
                0 1px 0 rgba(255, 255, 255, 0.3) inset,
                0 12px 28px -6px rgba(43, 122, 228, 0.6);
        }
        .v2-osources-cta--ghost {
            background: transparent;
            color: var(--color-text-primary);
            border-color: transparent;
        }
        .v2-osources-cta--ghost:hover {
            color: var(--color-accent);
        }
        @media (max-width: 960px) {
            .v2-osources-ctas { justify-content: center; }
        }

        @media (max-width: 720px) {
            .v2-osources { padding: var(--space-10) var(--space-4); }
        }

        /* ════════════════════════════════════════════════════════════════
           SECTION : "What comes next" (region-aware timeline)
           Two-column layout, light background. Right column reuses the
           visual grammar of the dashboard timeline (calendar chip, flag,
           agency tag, status pill, relative phrasing) so the marketing
           card matches the in-product experience.
           ════════════════════════════════════════════════════════════════ */
        .v2-upcoming {
            padding: var(--space-12, 80px) var(--space-5);
            background: var(--color-bg);
            position: relative;
        }
        .v2-upcoming-inner {
            max-width: var(--content-max-width);
            margin: 0 auto;
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
            gap: clamp(32px, 5vw, 72px);
            align-items: center;
        }

        .v2-up-eyebrow {
            font-size: 12px;
            font-weight: var(--font-weight-semibold);
            letter-spacing: 1.6px;
            text-transform: uppercase;
            color: var(--color-accent);
            margin: 0 0 16px;
        }
        .v2-up-title {
            font-size: clamp(32px, 4vw, 48px);
            font-weight: var(--font-weight-bold);
            color: var(--color-text-primary);
            line-height: 1.08;
            letter-spacing: -0.6px;
            margin: 0 0 18px;
        }
        .v2-up-title em {
            font-style: normal;
            color: var(--color-accent);
        }
        .v2-up-lede {
            font-size: var(--font-size-md, 15px);
            line-height: var(--line-height-relaxed);
            color: var(--color-text-secondary);
            margin: 0 0 var(--space-7, 32px);
            max-width: 480px;
        }

        .v2-up-features {
            display: flex;
            flex-direction: column;
            gap: 22px;
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .v2-up-feature {
            display: grid;
            grid-template-columns: 44px 1fr;
            gap: 16px;
            align-items: flex-start;
        }
        .v2-up-feature-icon {
            width: 44px;
            height: 44px;
            border-radius: 12px;
            background: var(--color-accent-bg);
            color: var(--color-accent);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            flex: 0 0 auto;
        }
        .v2-up-feature-icon--violet { background: rgba(139, 92, 246, 0.10); color: #7c3aed; }
        .v2-up-feature-icon--amber  { background: rgba(245, 158, 11, 0.12); color: #b45309; }
        .v2-up-feature-title {
            font-size: 15px;
            font-weight: var(--font-weight-semibold);
            color: var(--color-text-primary);
            margin: 0 0 4px;
            line-height: 1.3;
        }
        .v2-up-feature-sub {
            font-size: 13.5px;
            color: var(--color-text-secondary);
            line-height: 1.5;
            margin: 0;
        }

        /* ── Right column : timeline card ──────────────────────────────── */
        .v2-up-card {
            background: #ffffff;
            border: 1px solid var(--color-border);
            border-radius: 18px;
            padding: 22px 22px 12px;
            box-shadow:
                0 1px 0 rgba(255, 255, 255, 0.6) inset,
                0 1px 2px rgba(15, 23, 42, 0.04),
                0 18px 32px -16px rgba(15, 23, 42, 0.18),
                0 36px 60px -24px rgba(15, 23, 42, 0.12);
            min-width: 0;
        }
        .v2-up-card-head {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 4px 4px 18px;
            border-bottom: 1px solid var(--color-border-subtle, #eef2f6);
            margin-bottom: 6px;
        }
        .v2-up-card-head-icon {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            background: var(--color-accent-bg);
            color: var(--color-accent);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 15px;
            flex: 0 0 auto;
        }
        .v2-up-card-head-text { min-width: 0; }
        .v2-up-card-head-title {
            font-size: 15px;
            font-weight: var(--font-weight-semibold);
            color: var(--color-text-primary);
            margin: 0;
            line-height: 1.25;
        }
        .v2-up-card-head-sub {
            font-size: 12.5px;
            color: var(--color-text-secondary);
            margin: 2px 0 0;
            line-height: 1.3;
        }

        /* Timeline list, grafted from the dashboard timeline component
           but with a flatter look to match the marketing card. */
        .v2-up-list {
            list-style: none;
            margin: 0;
            padding: 0;
            position: relative;
        }
        .v2-up-list::before {
            content: '';
            position: absolute;
            left: 28px;
            top: 8px;
            bottom: 8px;
            width: 2px;
            background: var(--color-border-subtle, #eef2f6);
            border-radius: 2px;
            z-index: 0;
        }
        .v2-up-row {
            display: grid;
            grid-template-columns: 56px 1fr auto;
            column-gap: 16px;
            align-items: center;
            padding: 14px 4px;
            border-radius: 12px;
            position: relative;
        }
        .v2-up-row + .v2-up-row { border-top: 1px solid var(--color-border-subtle, #eef2f6); }

        .v2-up-chip {
            position: relative;
            z-index: 1;
            width: 56px;
            min-height: 56px;
            border: 1px solid var(--color-border, #e5e7eb);
            border-radius: 12px;
            background: #ffffff;
            padding: 6px 4px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
        }
        .v2-up-chip-top {
            font-size: 10.5px;
            letter-spacing: 0.06em;
            font-weight: var(--font-weight-semibold);
            color: var(--color-text-secondary);
            text-transform: uppercase;
            line-height: 1.1;
        }
        .v2-up-chip-bottom {
            font-size: 18px;
            font-weight: var(--font-weight-bold);
            color: var(--color-text-primary);
            line-height: 1.1;
            margin-top: 2px;
        }
        .v2-up-chip[data-precision="year"]    .v2-up-chip-top { display: none; }
        .v2-up-chip[data-precision="year"]    .v2-up-chip-bottom { font-size: 16px; }
        .v2-up-chip[data-precision="quarter"] .v2-up-chip-top { font-size: 12px; }
        .v2-up-chip[data-precision="month"]   .v2-up-chip-bottom { font-size: 14px; }

        .v2-up-body { min-width: 0; }
        .v2-up-row-title {
            font-size: 14px;
            font-weight: var(--font-weight-semibold);
            color: var(--color-text-primary);
            line-height: 1.3;
            margin: 0 0 4px;
            display: flex;
            align-items: center;
            gap: 8px;
            min-width: 0;
        }
        .v2-up-row-flag {
            width: 18px;
            height: 13px;
            border-radius: 2px;
            box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08);
            flex: 0 0 auto;
            display: inline-block;
        }
        .v2-up-row-flag .fi { display: block; width: 100%; height: 100%; }
        .v2-up-row-title-text {
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
            min-width: 0;
        }
        .v2-up-row-meta {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }
        .v2-up-row-agency {
            font-size: 11.5px;
            color: var(--color-text-secondary);
            background: var(--color-bg-subtle, #f3f4f6);
            padding: 3px 9px;
            border-radius: 999px;
            white-space: nowrap;
            max-width: 240px;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .v2-up-row-right {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 6px;
            min-width: 0;
        }
        .v2-up-status {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 11.5px;
            font-weight: var(--font-weight-semibold);
            padding: 3px 9px;
            border-radius: 999px;
            white-space: nowrap;
        }
        .v2-up-status--success { background: #ecfdf5; color: #059669; }
        .v2-up-status--warning { background: #fef3c7; color: #b45309; }
        .v2-up-status--danger  { background: #fee2e2; color: #b91c1c; }
        .v2-up-status--info    { background: #e0f2fe; color: #0369a1; }
        .v2-up-status--violet  { background: #ede9fe; color: #6d28d9; }
        .v2-up-status--blue    { background: #dbeafe; color: #1d4ed8; }
        .v2-up-status--neutral { background: var(--color-accent-bg); color: var(--color-accent); }
        .v2-up-when {
            font-size: 12px;
            color: var(--color-text-secondary);
            white-space: nowrap;
        }

        .v2-up-empty {
            text-align: center;
            color: var(--color-text-tertiary, #6b7280);
            font-size: 14px;
            padding: 32px 16px;
        }

        @media (max-width: 960px) {
            .v2-upcoming-inner { grid-template-columns: 1fr; gap: var(--space-7, 32px); }
            /* Mobile : centre the section header so the left text column
               reads as a self-contained intro above the upcoming card. */
            .v2-up-text,
            .v2-up-eyebrow,
            .v2-up-title,
            .v2-up-lede { text-align: center; }
            .v2-up-lede { max-width: none; margin-left: auto; margin-right: auto; }
            /* Feature list : keep the icon-aligned-with-text layout but
               recentre the whole rail under the headline. */
            .v2-up-features { max-width: 460px; margin-left: auto; margin-right: auto; }
        }
        @media (max-width: 720px) {
            .v2-upcoming { padding: var(--space-10) var(--space-4); }
            .v2-up-card { padding: 18px 16px 8px; border-radius: 14px; }
            .v2-up-row { grid-template-columns: 48px 1fr; row-gap: 8px; padding: 12px 2px; }
            .v2-up-row-right { grid-column: 2 / -1; flex-direction: row; align-items: center; justify-content: flex-start; }
            .v2-up-list::before { left: 24px; }
            .v2-up-chip { width: 48px; min-height: 48px; }
            .v2-up-chip-bottom { font-size: 16px; }
        }

        /* ════════════════════════════════════════════════════════════════
           INDUSTRIES section : page-scoped overrides
           - Centered header (title + subtitle), matching the marketing-
             style headers used by the rest of /v3.
           - Card border-radius bumped from 4px to 18px so the industry
             cards visually match the .v2-up-card / .v2-fwc / .v2-osources
             surfaces above.
           - Hover state neutralised since the cards no longer link
             anywhere : removes the cursor:pointer affordance, the box-
             shadow lift, and the colour shift on the icon/title that
             previously hinted at navigation.
           ════════════════════════════════════════════════════════════════ */
        .industries-grid + .home-section-footer { display: none; }
        .home-section .home-section-header {
            justify-content: center;
            text-align: center;
        }
        .home-section .home-section-header-text {
            margin: 0 auto;
            max-width: 720px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .home-section .home-section-header-text .home-section-title,
        .home-section .home-section-header-text .home-section-sub {
            text-align: center;
            margin-left: auto;
            margin-right: auto;
            max-width: 640px;
        }
        .industry-card,
        .industry-card .industry-card-bg,
        .industry-card .industry-card-content {
            border-radius: 18px;
        }
        .industry-card { cursor: default; }
        .industry-card:hover { box-shadow: none; }
        .industry-card:hover .industry-card-icon,
        .industry-card:hover .industry-card-name { color: inherit; }
        @media (max-width: 768px) {
            .industry-card,
            .industry-card .industry-card-bg,
            .industry-card .industry-card-content { border-radius: 14px; }
        }

/* ════════════════════════════════════════════════════════════════════════
   LANDING PAGES (/ai · /monitoring · /software) — page-specific additions.
   Appended after the shared section styles above; used ONLY by the three
   landing templates. Reuses design-tokens.css variables + the .v2-* / .home-*
   primitives already defined above. (Kept here, not inline, so the new pages
   share one stylesheet without touching the live home page v3.html.)
   ════════════════════════════════════════════════════════════════════════ */

/* ── Generic marketing info section ─────────────────────────────────────── */
.landing-section { padding: var(--space-12, 80px) var(--space-5); background: var(--color-bg); }
.landing-section--surface { background: var(--color-surface); }
.landing-section-inner { max-width: var(--content-max-width); margin: 0 auto; }
.landing-section-head { text-align: center; max-width: 720px; margin: 0 auto var(--space-8, 48px); }
.landing-eyebrow {
  font-size: 12px; font-weight: var(--font-weight-semibold, 600); letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--color-accent); margin: 0 0 14px;
  display: inline-flex; align-items: center; gap: 8px;
}
.landing-h2 {
  font-size: clamp(28px, 3.4vw, 42px); font-weight: var(--font-weight-bold, 700);
  color: var(--color-text-primary); line-height: 1.08; letter-spacing: -0.5px; margin: 0 0 14px;
}
.landing-h2 em { font-style: normal; color: var(--color-accent); }
.landing-lede {
  font-size: var(--font-size-md, 16px); line-height: var(--line-height-relaxed, 1.7);
  color: var(--color-text-secondary); margin: 0;
}

/* Feature grid (3-up cards) reused across the info sections. */
.landing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5, 24px); }
.landing-grid--2 { grid-template-columns: repeat(2, 1fr); max-width: 920px; margin: 0 auto; }
@media (max-width: 900px) { .landing-grid, .landing-grid--2 { grid-template-columns: 1fr; } }
.landing-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 16px; padding: var(--space-6, 28px);
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
}
.landing-card-ic {
  width: 46px; height: 46px; border-radius: 12px; display: inline-flex;
  align-items: center; justify-content: center; font-size: 18px;
  color: var(--color-accent); background: var(--color-accent-bg); margin-bottom: 16px;
}
.landing-card-title { font-size: 17px; font-weight: var(--font-weight-bold, 700); color: var(--color-text-primary); margin: 0 0 8px; }
.landing-card-text { font-size: 14px; line-height: 1.6; color: var(--color-text-secondary); margin: 0; }

/* ── Shared "Try now" CTA band (dark) ───────────────────────────────────── */
.landing-cta { position: relative; overflow: hidden; }
.landing-cta-inner { max-width: 760px; margin: 0 auto; padding: var(--space-12, 80px) var(--space-5); text-align: center; position: relative; z-index: 1; }
.landing-cta-eyebrow {
  font-size: 12px; font-weight: var(--font-weight-semibold, 600); letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--color-accent-light, #84c3ff); margin: 0 0 14px;
}
.landing-cta-title { font-size: clamp(28px, 3.6vw, 44px); font-weight: var(--font-weight-bold, 700); color: #fff; line-height: 1.1; letter-spacing: -0.5px; margin: 0 0 16px; }
.landing-cta-sub { font-size: var(--font-size-md, 16px); line-height: 1.65; color: rgba(255,255,255,0.72); margin: 0 auto; max-width: 560px; }
.landing-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3, 12px); margin-top: var(--space-7, 36px); }
.landing-cta-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 30px; font-family: var(--font-family); font-size: 15px;
  font-weight: var(--font-weight-semibold, 600); line-height: 1; border-radius: var(--radius-full);
  text-decoration: none; white-space: nowrap; cursor: pointer; border: 1.5px solid transparent;
  transition: transform var(--transition-fast, 150ms), box-shadow var(--transition-fast, 150ms);
}
.landing-cta-btn i { font-size: 11px; transition: transform var(--transition-fast, 150ms); }
.landing-cta-btn:hover i { transform: translateX(3px); }
.landing-cta-btn--primary {
  background: linear-gradient(135deg, var(--color-accent) 0%, #4d8eea 50%, #6aa3f0 100%);
  color: #fff; border-color: rgba(255,255,255,0.18);
  box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 8px 20px -6px rgba(43,122,228,0.55);
}
.landing-cta-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset, 0 12px 28px -6px rgba(43,122,228,0.6); }
/* Not-yet-cabled buttons (monitoring + software): visually identical but inert. */
.landing-cta-btn[aria-disabled="true"] { cursor: default; }
.landing-cta-btn[aria-disabled="true"]:hover { transform: none; }
.landing-cta-btn[aria-disabled="true"]:hover i { transform: none; }

/* ════════════════════════════════════════════════════════════════════════
   /ai — public chat hero
   ════════════════════════════════════════════════════════════════════════ */
.landing-ai-hero { padding: var(--space-8, 48px) var(--space-5) var(--space-10, 64px); background: var(--color-bg); }
/* Full-width hero: the chat is the centrepiece, so the inner shell spans the
   site content width (not a narrow column). */
.landing-ai-hero-inner { max-width: var(--content-max-width); margin: 0 auto; }
.landing-ai-hero-head { text-align: center; max-width: 760px; margin: 0 auto var(--space-6, 28px); }
.landing-ai-badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px;
  border-radius: var(--radius-full); background: var(--color-accent-bg); color: var(--color-accent);
  font-size: 12.5px; font-weight: var(--font-weight-semibold, 600); margin: 0 0 16px;
}
.landing-ai-badge img { width: 15px; height: 15px; display: block; }
/* Compact kicker line (replaces the old big h1 — the chat is the hero). */
.landing-ai-kicker {
  font-size: clamp(18px, 2.1vw, 24px); font-weight: var(--font-weight-semibold, 600);
  color: var(--color-text-primary); line-height: 1.3; letter-spacing: -0.2px;
  margin: 0 auto; max-width: 620px;
}
.landing-ai-title { font-size: clamp(30px, 4vw, 46px); font-weight: var(--font-weight-bold, 700); color: var(--color-text-primary); line-height: 1.08; letter-spacing: -0.6px; margin: 0 0 16px; }
.landing-ai-title em { font-style: normal; color: var(--color-accent); }
.landing-ai-sub { font-size: var(--font-size-lg, 18px); line-height: 1.6; color: var(--color-text-secondary); margin: 0 auto; max-width: 580px; }

/* The chat embed frame. .oai mounts position:absolute;inset:0, so the frame
   must be positioned + have an explicit height. Sidebar / rail / floating
   open-button are hidden so the PUBLIC chat shows the conversation only. */
.landing-ai-frame {
  position: relative; height: min(76vh, 760px); min-height: 480px;
  border-radius: 18px; overflow: hidden; border: 1px solid var(--color-border);
  background: #f8f8f6;
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 24px 48px -16px rgba(8,12,28,0.28), 0 48px 96px -32px rgba(8,12,28,0.22);
}
.landing-ai-frame .oai-sidebar,
.landing-ai-frame .oai-rail,
.landing-ai-frame .oai-open { display: none !important; }

/* Frontier-model compatibility — logos only (grayscale, colour on hover),
   mirrors the /mcp "works with" strip. */
.landing-ai-works { text-align: center; margin-top: var(--space-7, 36px); }
.landing-ai-works-label {
  font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--color-text-faint, #9ca3af); margin: 0 0 var(--space-4, 18px);
}
.landing-ai-works-row { display: flex; align-items: center; justify-content: center; gap: var(--space-8, 56px); flex-wrap: wrap; }
.landing-ai-works-item {
  display: inline-flex; align-items: center; opacity: 0.78; filter: grayscale(100%);
  transition: opacity 0.2s ease, filter 0.2s ease, transform 0.2s ease;
}
.landing-ai-works-item:hover { opacity: 1; filter: grayscale(0%); transform: translateY(-1px); }
.landing-ai-works-item img { width: 28px; height: 28px; object-fit: contain; display: block; }

/* Trust strip under the chat */
.landing-ai-trust { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 22px; margin-top: var(--space-6, 28px); }
.landing-ai-trust-item { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-text-secondary); }
.landing-ai-trust-item i { color: var(--color-accent); font-size: 13px; }
@media (max-width: 720px) {
  .landing-ai-frame { height: 80vh; }
  .landing-ai-works-row { gap: var(--space-6, 28px); }
}

/* ════════════════════════════════════════════════════════════════════════
   /monitoring — fake (non-interactive) jobs showcase
   ════════════════════════════════════════════════════════════════════════ */
.landing-mon-hero { padding: var(--space-9, 56px) var(--space-5) var(--space-10, 64px); background: var(--color-bg); }
.landing-mon-hero-inner { max-width: 1080px; margin: 0 auto; }
.landing-mon-hero-head { text-align: center; max-width: 760px; margin: 0 auto var(--space-7, 36px); }
/* Mock "app window" wrapping the fake monitoring jobs. */
.landing-mon-window {
  max-width: 960px; margin: 0 auto; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--color-border); background: var(--color-surface);
  box-shadow: 0 24px 48px -16px rgba(8,12,28,0.24), 0 48px 96px -32px rgba(8,12,28,0.18);
}
.landing-mon-winbar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--color-border); background: var(--color-surface-hover, #f9fafb); }
.landing-mon-winbar-dots { display: inline-flex; gap: 6px; }
.landing-mon-winbar-dots span { width: 11px; height: 11px; border-radius: 50%; background: var(--color-border-strong, rgba(0,0,0,.14)); }
.landing-mon-winbar-url { flex: 1; text-align: center; font-size: 12.5px; color: var(--color-text-faint, #9ca3af); font-family: var(--font-family-mono, ui-monospace, Menlo, monospace); }
.landing-mon-body { padding: 6px 0 4px; }
/* Industry context switcher (chips). Swaps the fake job set client-side. */
.landing-mon-tabs { display: flex; flex-wrap: wrap; gap: 8px; padding: 18px 22px 6px; }
.landing-mon-tab {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: var(--radius-full);
  border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-secondary);
  font-size: 13px; font-weight: var(--font-weight-semibold, 600); cursor: pointer; transition: all 120ms ease;
}
.landing-mon-tab:hover { border-color: var(--color-border-strong, rgba(0,0,0,.14)); color: var(--color-text-primary); }
.landing-mon-tab.is-active { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.landing-mon-tab i { font-size: 12px; }
.landing-mon-context { padding: 4px 24px 2px; font-size: 12.5px; color: var(--color-text-faint, #9ca3af); }
/* The fake jobs live inside .mon-shell (reusing monitoring.css). Make the
   showcase read-only: kill pointer interaction + cursor on the fake controls. */
.landing-mon-window .mon-shell { padding: 14px 24px 26px; }
.landing-mon-window .mon-job-main,
.landing-mon-window .mon-toggle,
.landing-mon-window .mon-iconbtn { cursor: default; pointer-events: none; }
.landing-mon-window .mon-job:hover { box-shadow: none; border-color: var(--color-border); }

/* ════════════════════════════════════════════════════════════════════════
   /software — hero reused from home + placeholder sections
   ════════════════════════════════════════════════════════════════════════ */
.landing-placeholder { padding: var(--space-12, 80px) var(--space-5); background: var(--color-bg); }
.landing-placeholder--surface { background: var(--color-surface); }
.landing-placeholder-inner {
  max-width: var(--content-max-width); margin: 0 auto;
  border: 1px dashed var(--color-border-strong, rgba(0,0,0,.14)); border-radius: 18px;
  padding: var(--space-10, 64px) var(--space-6, 28px); text-align: center;
}
.landing-placeholder-eyebrow { font-size: 12px; font-weight: var(--font-weight-semibold, 600); letter-spacing: 1.6px; text-transform: uppercase; color: var(--color-accent); margin: 0 0 12px; }
.landing-placeholder-title { font-size: clamp(22px, 2.6vw, 30px); font-weight: var(--font-weight-bold, 700); color: var(--color-text-primary); margin: 0 0 10px; }
.landing-placeholder-text { font-size: 14px; color: var(--color-text-faint, #9ca3af); margin: 0; }
.landing-placeholder-badge { display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; padding: 6px 14px; border-radius: var(--radius-full); background: var(--color-accent-bg); color: var(--color-accent); font-size: 12px; font-weight: var(--font-weight-semibold, 600); }

/* ── /monitoring : industry context — "+N other industries" tab + picker modal ── */
.landing-mon-tab--more {
  border-style: dashed;
  border-color: rgba(43, 122, 228, 0.40);
  color: var(--color-accent);
  background: var(--color-accent-bg);
}
.landing-mon-tab--more:hover { color: var(--color-accent); border-color: var(--color-accent); background: var(--color-accent-bg); }

.landing-ind-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: var(--space-4, 18px);
}
.landing-ind-modal[hidden] { display: none; }
.landing-ind-backdrop { position: absolute; inset: 0; background: rgba(8, 12, 28, 0.55); backdrop-filter: blur(2px); }
.landing-ind-card {
  position: relative; z-index: 1; width: 100%; max-width: 720px; max-height: 86vh; overflow-y: auto;
  background: var(--color-surface); border-radius: 18px; padding: var(--space-6, 28px);
  box-shadow: 0 24px 60px -16px rgba(8, 12, 28, 0.45);
}
.landing-ind-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: var(--space-5, 24px); }
.landing-ind-title { font-size: 20px; font-weight: var(--font-weight-bold, 700); color: var(--color-text-primary); margin: 0 0 6px; }
.landing-ind-sub { font-size: 13.5px; color: var(--color-text-secondary); margin: 0; line-height: 1.5; }
.landing-ind-close {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--color-border);
  background: var(--color-surface); color: var(--color-text-secondary); cursor: pointer; font-size: 15px;
  display: inline-flex; align-items: center; justify-content: center; transition: all 120ms ease;
}
.landing-ind-close:hover { color: var(--color-text-primary); border-color: var(--color-border-strong, rgba(0,0,0,.14)); }
.landing-ind-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (max-width: 560px) { .landing-ind-grid { grid-template-columns: 1fr; } }
.landing-ind-item {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; text-align: left;
  border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface);
  color: var(--color-text-primary); cursor: pointer; transition: all 120ms ease; font-family: inherit;
}
.landing-ind-item:hover { border-color: var(--color-accent); background: var(--color-accent-bg); }
.landing-ind-item.is-active { border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent) inset; }
.landing-ind-item-ic {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; display: inline-flex;
  align-items: center; justify-content: center; font-size: 16px;
  color: var(--color-accent); background: var(--color-accent-bg);
}
.landing-ind-item-name { font-size: 14px; font-weight: var(--font-weight-semibold, 600); line-height: 1.3; }

/* ── /monitoring : criticality colours (job dot + radar blip) ──────────────
   Mirrors the admin critical/high/medium/low scale. medium = the page accent. */
.mon-crit-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: middle; flex: 0 0 auto; }
.mon-crit-dot--critical { background: #ef4444; }
.mon-crit-dot--high { background: #f59e0b; }
.mon-crit-dot--medium { background: var(--color-accent); }
.mon-crit-dot--low { background: #94a3b8; }

.mon-blip--critical .v2-fwr-blip-dot { background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,0.18), 0 0 14px rgba(239,68,68,0.70); }
.mon-blip--critical .v2-fwr-blip-pulse { background: rgba(239,68,68,0.45); }
.mon-blip--high .v2-fwr-blip-dot { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,0.18), 0 0 14px rgba(245,158,11,0.70); }
.mon-blip--high .v2-fwr-blip-pulse { background: rgba(245,158,11,0.45); }
.mon-blip--low .v2-fwr-blip-dot { background: #94a3b8; box-shadow: 0 0 0 3px rgba(148,163,184,0.18), 0 0 10px rgba(148,163,184,0.50); }
.mon-blip--low .v2-fwr-blip-pulse { background: rgba(148,163,184,0.40); }
/* medium keeps the default accent-blue dot from .v2-fwr-blip-dot */

/* ════════════════════════════════════════════════════════════════════════
   /monitoring extra sections — legislative-process card + global map +
   sol-content text/map layout. COPIED VERBATIM from templates/solutions.html
   (the /solutions#monitoring-framework + #monitoring-global components) so
   they render identically. Map JS + amCharts loaded by the landing template.
   ════════════════════════════════════════════════════════════════════════ */
    .sol-content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-8);
        align-items: stretch;
        padding: var(--space-6) 0 var(--space-8);
    }
    @media (max-width: 1024px) {
        .sol-content { grid-template-columns: 1fr; gap: var(--space-6); }
    }

    .sol-block-text { display: flex; flex-direction: column; }
    .sol-block-eyebrow {
        display: inline-flex; align-items: center; gap: 6px;
        font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold);
        text-transform: uppercase; letter-spacing: 1px;
        color: var(--color-accent);
        margin-bottom: var(--space-2);
    }
    .sol-block-eyebrow i { font-size: 11px; }
    .sol-block-title {
        font-size: 28px; font-weight: var(--font-weight-bold);
        color: var(--color-text-primary);
        line-height: 1.2;
        margin: 0 0 var(--space-4);
    }
    .sol-block-title em {
        font-style: normal;
        background: linear-gradient(135deg, #2B7AE4 0%, #1f5fbb 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
    .sol-block-body p {
        font-size: var(--font-size-base);
        color: var(--color-text-secondary);
        line-height: var(--line-height-relaxed);
        margin-bottom: var(--space-3);
    }
    .sol-block-body p:last-child { margin-bottom: 0; }

    /* Marketing-oriented lead paragraph that fuses the previous two
       text blocks plus the feature list into one tight pitch. */
    .sol-block-lead {
        font-size: 16px;
        line-height: 1.6;
        color: var(--color-text-secondary);
        margin: 0 0 var(--space-5);
    }
    .sol-bullets {
        list-style: none; padding: 0; margin: 0 0 var(--space-5);
        display: flex; flex-direction: column; gap: 12px;
    }
    .sol-bullets li {
        display: grid; grid-template-columns: 22px 1fr; gap: 10px;
        align-items: start;
        font-size: 14.5px;
        line-height: 1.55;
        color: var(--color-text-secondary);
    }
    .sol-bullets li i {
        color: #2B7AE4;
        font-size: 11px;
        margin-top: 6px;
        background: rgba(43, 122, 228, 0.12);
        width: 22px; height: 22px;
        border-radius: 50%;
        display: inline-flex; align-items: center; justify-content: center;
    }
    .sol-bullets li strong {
        color: var(--color-text-primary);
        font-weight: var(--font-weight-semibold);
    }

    /* "Book a demo" CTA appearing under each monitoring panel's text
       block. Scrolls to the contact form anchored at the bottom of the
       page. */
    .sol-cta {
        margin-top: var(--space-5);
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 12px 22px;
        border-radius: 12px;
        background: #0f172a;
        color: #ffffff;
        text-decoration: none;
        font-weight: var(--font-weight-semibold);
        font-size: 14px;
        transition: transform 0.18s ease, box-shadow 0.18s ease;
        align-self: flex-start;
    }
    .sol-cta i { font-size: 12px; transition: transform 0.18s ease; }
    .sol-cta:hover { transform: translateY(-1px); box-shadow: 0 12px 28px -16px rgba(15, 23, 42, 0.45); }
    .sol-cta:hover i { transform: translateX(2px); }

    /* ════════════════════════════════════════════════════════════════
       Map cards (Global + Jurisdiction)

       Reuses the dashboard amCharts colour ramp + canvas pattern so a
       visitor coming from the dashboard recognises the visual instantly.
       The sub-strip below the map shows the active region label and a
       small "live data" caption.
       ════════════════════════════════════════════════════════════════ */
    .sol-map-card {
        background: #ffffff;
        border: 1px solid var(--color-border);
        border-radius: 18px;
        padding: 0;
        box-shadow:
            0 1px 0 rgba(255, 255, 255, 0.6) inset,
            0 1px 2px rgba(15, 23, 42, 0.04),
            0 18px 32px -16px rgba(15, 23, 42, 0.12);
        overflow: hidden;
        display: flex; flex-direction: column;
        min-height: 380px;
    }
    .sol-map-head {
        padding: 14px 18px 10px;
        border-bottom: 1px dashed var(--color-border);
        display: flex; align-items: center; justify-content: space-between;
        gap: 12px;
    }
    .sol-map-head-title {
        font-size: 14px; font-weight: var(--font-weight-bold);
        color: var(--color-text-primary);
    }
    .sol-map-head-sub {
        font-size: 11.5px; color: var(--color-text-secondary);
        margin-top: 2px;
    }
    .sol-map-live {
        display: inline-flex; align-items: center; gap: 6px;
        font-size: 10.5px; font-weight: var(--font-weight-semibold);
        text-transform: uppercase; letter-spacing: 0.6px;
        color: #16a34a;
    }
    .sol-map-live::before {
        content: '';
        width: 7px; height: 7px;
        border-radius: 50%;
        background: #16a34a;
        animation: sol-live-pulse 1.6s ease-in-out infinite;
    }
    @keyframes sol-live-pulse {
        0%, 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.55); }
        50%       { box-shadow: 0 0 0 6px rgba(22, 163, 74, 0); }
    }
    .sol-map-canvas {
        flex: 1;
        min-height: 320px;
        position: relative;
    }
    .sol-map-canvas > div {
        position: absolute; inset: 0;
    }
    /* Hide the amCharts attribution chip injected at the bottom-left
       of every canvas. amCharts adds an <a aria-label="Created using
       amCharts 5"> element ; covers any variant they ship. */
    .sol-map-canvas a[aria-label*="amCharts"],
    .sol-map-canvas a[title*="amCharts"],
    .sol-map-canvas g[aria-label*="amCharts"],
    .sol-map-canvas g[role="figure"] > g:last-child[transform^="translate"] {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
    .sol-map-loading {
        position: absolute; inset: 0;
        display: flex; align-items: center; justify-content: center;
        font-size: 12px; color: var(--color-text-secondary);
        background: rgba(255, 255, 255, 0.7);
        backdrop-filter: blur(2px);
    }

    /* Region picker (Jurisdiction tab) : 5 region pills, the active
       one matches the visitor's resolved region by default (Cloudflare
       CF-IPCountry). */
    .sol-region-picker {
        display: flex; flex-wrap: wrap; gap: 6px;
        padding: 10px 18px 14px;
        border-top: 1px dashed var(--color-border);
        background: #fafbfd;
    }
    .sol-region-btn {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 6px 12px;
        border-radius: 999px;
        border: 1px solid var(--color-border);
        background: #ffffff;
        color: var(--color-text-secondary);
        font-size: 12px; font-weight: var(--font-weight-semibold);
        cursor: pointer;
        transition: all 0.18s ease;
        font-family: inherit;
    }
    .sol-region-btn:hover { border-color: #2B7AE4; color: #1f5fbb; }
    .sol-region-btn.active {
        background: #0f172a;
        border-color: #0f172a;
        color: #ffffff;
    }

    /* ════════════════════════════════════════════════════════════════
       Framework legislative process animation
       (Panel 3 right column)

       4-step timeline : Draft → Consultation → Adopted → Enforced.
       Each step is a pulse circle (same .v2-srcc-* dashed connector
       style as the official-sources constellation on /), connected
       by an animated dashed line that flows in the direction of the
       process. The active step pulses brighter.
       ════════════════════════════════════════════════════════════════ */
    .sol-fwproc-card {
        background: #ffffff;
        border: 1px solid var(--color-border);
        border-radius: 18px;
        padding: 0;
        box-shadow:
            0 1px 0 rgba(255, 255, 255, 0.6) inset,
            0 1px 2px rgba(15, 23, 42, 0.04),
            0 18px 32px -16px rgba(15, 23, 42, 0.12);
        overflow: hidden;
        display: flex; flex-direction: column;
        min-height: 380px;
    }
    .sol-fwproc-head {
        padding: 14px 18px 10px;
        border-bottom: 1px dashed var(--color-border);
        display: flex; align-items: center; justify-content: space-between;
    }
    .sol-fwproc-head-title {
        font-size: 14px; font-weight: var(--font-weight-bold);
        color: var(--color-text-primary);
    }
    .sol-fwproc-head-sub {
        font-size: 11.5px; color: var(--color-text-secondary);
        margin-top: 2px;
    }
    .sol-fwproc-stage {
        flex: 1;
        position: relative;
        padding: 28px 24px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .sol-fwproc-track {
        position: relative;
        width: 100%;
        max-width: 560px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0;
    }
    /* Dashed connector line, animated in the direction of the
       legislative process (left → right). Mirrors the dasharray /
       dashoffset animation used by .v2-srcc-line on the homepage. */
    .sol-fwproc-track::before {
        content: '';
        position: absolute;
        top: 22px; /* aligns with the centre of the 44px nodes */
        left: calc(100% / 8); /* center of first column */
        right: calc(100% / 8); /* center of last column */
        height: 0;
        border-top: 2px dashed rgba(43, 122, 228, 0.4);
        background-image: linear-gradient(
            90deg,
            rgba(43, 122, 228, 0.0) 0%,
            rgba(43, 122, 228, 0.4) 30%,
            rgba(43, 122, 228, 0.85) 50%,
            rgba(43, 122, 228, 0.4) 70%,
            rgba(43, 122, 228, 0.0) 100%
        );
        background-size: 240px 100%;
        background-repeat: repeat-x;
        background-position: -240px 0;
        animation: sol-fwproc-flow 3.6s linear infinite;
    }
    @keyframes sol-fwproc-flow {
        from { background-position: -240px 0; }
        to   { background-position: calc(100% + 240px) 0; }
    }
    .sol-fwproc-step {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }
    .sol-fwproc-node {
        position: relative;
        width: 44px; height: 44px;
        border-radius: 50%;
        background: #ffffff;
        border: 2px solid rgba(43, 122, 228, 0.3);
        color: #2B7AE4;
        display: flex; align-items: center; justify-content: center;
        font-size: 16px;
        z-index: 1;
    }
    .sol-fwproc-node::before {
        /* Pulse halo, staggered per step so the eye is led L → R. */
        content: '';
        position: absolute;
        inset: -6px;
        border-radius: 50%;
        border: 2px solid rgba(43, 122, 228, 0.45);
        opacity: 0;
        animation: sol-fwproc-pulse 2.4s ease-out infinite;
    }
    .sol-fwproc-step:nth-child(1) .sol-fwproc-node::before { animation-delay: 0s; }
    .sol-fwproc-step:nth-child(2) .sol-fwproc-node::before { animation-delay: 0.6s; }
    .sol-fwproc-step:nth-child(3) .sol-fwproc-node::before { animation-delay: 1.2s; }
    .sol-fwproc-step:nth-child(4) .sol-fwproc-node::before { animation-delay: 1.8s; }
    @keyframes sol-fwproc-pulse {
        0%   { opacity: 0;   transform: scale(0.85); }
        20%  { opacity: 0.9; transform: scale(1.0); }
        100% { opacity: 0;   transform: scale(1.6); }
    }
    /* Final step rendered slightly stronger so the visitor reads
       "ends in enforcement" naturally. */
    .sol-fwproc-step:last-child .sol-fwproc-node {
        background: linear-gradient(135deg, #2B7AE4 0%, #1f5fbb 100%);
        border-color: #1f5fbb;
        color: #ffffff;
    }
    .sol-fwproc-label {
        text-align: center;
        font-size: 12px;
        font-weight: var(--font-weight-semibold);
        color: var(--color-text-primary);
        line-height: 1.35;
    }
    .sol-fwproc-sub {
        text-align: center;
        font-size: 10.5px;
        color: var(--color-text-secondary);
        margin-top: 2px;
        line-height: 1.35;
    }

    /* Mobile : stack the 4 steps vertically with a vertical dashed
       connector instead of horizontal. */
    @media (max-width: 600px) {
        .sol-fwproc-track {
            grid-template-columns: 1fr;
            gap: 22px;
            max-width: 320px;
        }
        .sol-fwproc-track::before {
            top: 28px;
            bottom: 28px;
            left: calc(50% - 1px);
            right: auto;
            width: 0;
            height: auto;
            border-top: none;
            border-left: 2px dashed rgba(43, 122, 228, 0.4);
            background-image: linear-gradient(
                180deg,
                rgba(43, 122, 228, 0.0) 0%,
                rgba(43, 122, 228, 0.4) 30%,
                rgba(43, 122, 228, 0.85) 50%,
                rgba(43, 122, 228, 0.4) 70%,
                rgba(43, 122, 228, 0.0) 100%
            );
            background-size: 100% 240px;
            background-repeat: repeat-y;
            background-position: 0 -240px;
            animation: sol-fwproc-flow-v 3.6s linear infinite;
        }
        @keyframes sol-fwproc-flow-v {
            from { background-position: 0 -240px; }
            to   { background-position: 0 calc(100% + 240px); }
        }
        .sol-fwproc-step { flex-direction: row; gap: 14px; align-items: center; justify-content: flex-start; padding-left: 14px; }
        .sol-fwproc-label, .sol-fwproc-sub { text-align: left; }
    }

/* ════════════════════════════════════════════════════════════════════════
   /monitoring polish — "Try now" sol-cta button + lighter, flatter job rows
   ════════════════════════════════════════════════════════════════════════ */
/* sol-cta is now a <button> (uncabled "Try now"): button-safety + inert state. */
.sol-cta { border: 0; font-family: inherit; }
.sol-cta[aria-disabled="true"] { cursor: default; }
.sol-cta[aria-disabled="true"]:hover { transform: none; box-shadow: none; }
.sol-cta[aria-disabled="true"]:hover i { transform: none; }

/* Unified gutter: tabs / context / job cards all align to the same 12px edge. */
.landing-mon-window .landing-mon-tabs { padding: 18px 12px 8px; }
.landing-mon-window .landing-mon-context { padding: 8px 12px 12px; }
.landing-mon-window .mon-shell { max-width: none; margin: 0; padding: 0 12px 16px; }
/* Light job CARDS: background, no in-between border, vertical space between. */
.landing-mon-window .mon-job {
  background: #f6f8fb;               /* light card, not white */
  color: #667085;                    /* default job text = grey, not black */
  border: none;
  border-radius: 12px;
  box-shadow: none;
  margin-bottom: 10px;               /* vertical space between jobs */
}
.landing-mon-window .mon-job:last-child { margin-bottom: 0; }
/* No hover effect on the (non-interactive) example jobs. */
.landing-mon-window .mon-job:hover { background: #f6f8fb; box-shadow: none; }
.landing-mon-window .mon-job-main { padding: 14px 14px; }
.landing-mon-window .mon-job-side { padding: 14px 14px; gap: 8px; }
.landing-mon-window .mon-job-name { color: #475467; font-weight: 600; margin-bottom: 4px; }
.landing-mon-window .mon-job-desc { color: #98a2b3; }
.landing-mon-window .mon-chip { color: #667085; }
/* Edit + delete icons = light grey. */
.landing-mon-window .mon-iconbtn { color: #b0b7c3; }
.landing-mon-window .mon-iconbtn:hover { color: #667085; background: transparent; }
/* Drop the ON/OFF text; keep just the toggle, coloured by state. */
.landing-mon-window .mon-state-label { display: none; }
.landing-mon-window .mon-toggle.is-on { background: #32d583; }         /* light green = ON */
.landing-mon-window .mon-toggle:not(.is-on) { background: #fda29b; }   /* light red   = OFF */
/* Smaller toggle + action icons in the job side. */
.landing-mon-window .mon-toggle { width: 34px; height: 20px; }
.landing-mon-window .mon-toggle-knob { width: 14px; height: 14px; top: 3px; left: 3px; }
.landing-mon-window .mon-toggle.is-on .mon-toggle-knob { left: 17px; }
.landing-mon-window .mon-iconbtn { width: 26px; height: 26px; font-size: 12.5px; }

/* "Try now" in the legislative section uses the page's standard primary CTA
   (blue gradient), left-aligned inside the flex text column. */
.landing-cta-btn--inline { align-self: flex-start; margin-top: var(--space-2, 8px); }

/* The frequency column is fixed to the width of its widest value ("Weekdays")
   so the single notify channel lines up across every job card. */
.landing-mon-window .mon-job-meta { flex-wrap: nowrap; gap: 8px; }
.landing-mon-window .mon-job-meta .mon-chip {
  flex: 0 0 auto; justify-content: flex-start; white-space: nowrap;
}
.landing-mon-window .mon-job-meta .mon-chip:first-child { width: 104px; }
@media (max-width: 760px) {
  .landing-mon-window .mon-job-meta { flex-wrap: wrap; gap: 6px; }
  .landing-mon-window .mon-job-meta .mon-chip:first-child { width: auto; }
}