/* ==============================================
   AI CODE GOVERNANCE — Problem Section
   "The Velocity Gap"
   A stylized divergence chart: AI code volume
   shoots up while human review stays flat.
   The gap between them is the governance problem.
   ============================================== */

.ai-gap {
    max-width: 1016px;
    margin: 0 auto;
    position: relative;
}

/* ---------- Stage label ---------- */

.ai-gap-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 28px;
    font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    color: var(--text-link-subtle);
    text-transform: uppercase;
}

.ai-gap-stage::before,
.ai-gap-stage::after {
    content: '';
    height: 1px;
    flex: 1;
    max-width: 140px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(160, 174, 192, 0.3) 50%,
        transparent 100%
    );
}

/* ---------- Chart container ---------- */

.ai-chart {
    position: relative;
    background:
        radial-gradient(ellipse at 80% 20%, rgba(168, 85, 247, 0.08) 0%, transparent 60%),
        radial-gradient(ellipse at 15% 80%, rgba(255, 100, 100, 0.05) 0%, transparent 60%),
        linear-gradient(180deg, #0c111c 0%, #080b14 100%);
    border: 1px solid rgba(0, 212, 255, 0.18);
    border-radius: 16px;
    padding: 40px 44px 30px;
    overflow: hidden;
}

/* ---------- Grid lines ---------- */

.ai-chart-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(160, 174, 192, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(160, 174, 192, 0.06) 1px, transparent 1px);
    background-size: 12.5% 25%;
    border-left: 1px solid rgba(160, 174, 192, 0.15);
    border-bottom: 1px solid rgba(160, 174, 192, 0.15);
}

/* ---------- SVG area ---------- */

.ai-chart-plot {
    position: relative;
    width: 100%;
    padding-bottom: 46%; /* aspect ratio */
    margin-bottom: 20px;
}

.ai-chart-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* ---------- Annotations ---------- */

.ai-annot {
    position: absolute;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 19px;
    max-width: 220px;
    backdrop-filter: blur(8px);
}

.ai-annot-stat {
    display: block;
    font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 6px;
    letter-spacing: -0.5px;
}

.ai-annot-caption {
    display: block;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 18px;
}

.ai-annot-source {
    display: inline-block;
    font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.4px;
    color: var(--text-muted);
    margin-top: 6px;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid rgba(160, 174, 192, 0.25);
    padding: 2px 6px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.ai-annot-source:hover {
    color: var(--text-secondary);
    border-color: rgba(160, 174, 192, 0.4);
    background: rgba(160, 174, 192, 0.08);
}

/* Volume annotation (top right, near AI endpoint) */
.ai-annot-volume {
    top: 4%;
    right: 4%;
    background: rgba(168, 85, 247, 0.12);
    border: 1px solid rgba(168, 85, 247, 0.45);
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.15);
}

.ai-annot-volume .ai-annot-stat {
    color: var(--ai-purple-text);
}

/* Review annotation (bottom right, near review line endpoint) */
.ai-annot-review {
    bottom: 14%;
    right: 4%;
    background: rgba(255, 100, 100, 0.1);
    border: 1px solid rgba(255, 100, 100, 0.45);
    box-shadow: 0 0 20px rgba(255, 100, 100, 0.08);
}

.ai-annot-review .ai-annot-stat {
    color: var(--before-red);
}

/* Line endpoint dots — rendered as HTML circles overlaid on the SVG so
   they stay perfectly round at any chart aspect ratio (the SVG itself
   uses preserveAspectRatio="none" to fill the chart, which would
   otherwise squash circles into ellipses on a tall mobile chart). */
.ai-endpoint {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.ai-endpoint-volume {
    /* matches SVG (cx=980, cy=60) in viewBox 1000x500 */
    top: 12%;
    left: 98%;
    width: 14px;
    height: 14px;
    background: #a855f7;
    box-shadow: 0 0 0 9px rgba(168, 85, 247, 0.2);
}

.ai-endpoint-review {
    /* matches SVG (cx=980, cy=380) in viewBox 1000x500 */
    top: 76%;
    left: 98%;
    width: 10px;
    height: 10px;
    background: #ff6464;
    box-shadow: 0 0 0 7px rgba(255, 100, 100, 0.2);
}

/* Gap label — small floating pill inside the wedge.
   NOTE: needs explicit position:absolute (the HTML element has class
   `ai-annot-gap` only, not `ai-annot`, so it doesn't inherit positioning
   from the .ai-annot rule).
   Position chosen to land in the widening right side of the amber
   wedge. SVG uses preserveAspectRatio="none", so the same percentages
   stay inside the wedge at every viewport. */
.ai-annot-gap {
    position: absolute;
    top: 60%;
    left: 55%;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(10, 14, 26, 0.9);
    border: 1px dashed rgba(251, 191, 36, 0.55);
    font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--warning);
    max-width: none;
}

/* ---------- X-axis labels ---------- */

.ai-chart-x {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: 11px;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    text-transform: uppercase;
    padding: 0 4px;
    margin-top: 6px;
}

.ai-chart-x-mid {
    color: var(--ai-purple-text);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Dashed vertical mark — visually mirrors the dashed AI-arrival line
   in the SVG above (stroke-dasharray="5 6"). */
.ai-chart-x-mid::before {
    content: '';
    width: 1.5px;
    height: 14px;
    background: repeating-linear-gradient(to bottom, var(--ai-purple) 0 3px, transparent 3px 6px);
    box-shadow: 0 0 6px rgba(168, 85, 247, 0.5);
}

/* ---------- Legend ---------- */

.ai-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
    margin-top: 18px;
    padding-top: 20px;
    border-top: 1px dashed rgba(160, 174, 192, 0.18);
}

.ai-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: 11px;
    letter-spacing: 0.6px;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.ai-legend-swatch {
    width: 22px;
    height: 4px;
    border-radius: 2px;
    flex-shrink: 0;
}

.ai-legend-swatch-volume {
    background: var(--ai-purple);
    box-shadow: 0 0 8px rgba(168, 85, 247, 0.5);
}

.ai-legend-swatch-review {
    background: var(--before-red);
    box-shadow: 0 0 6px rgba(255, 100, 100, 0.4);
}

.ai-legend-swatch-gap {
    background: repeating-linear-gradient(
        45deg,
        rgba(251, 191, 36, 0.6) 0 2px,
        transparent 2px 5px
    );
    height: 14px;
    border-radius: 2px;
}

/* ---------- Context cards (bottom row) ---------- */

.ai-context-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 1016px;
    margin: 28px auto 0;
}

.ai-context-card {
    padding: 24px 28px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(168, 85, 247, 0.06) 0%, rgba(168, 85, 247, 0.02) 100%);
    border: 1px solid rgba(168, 85, 247, 0.25);
    display: flex;
    align-items: center;
    gap: 22px;
}

.ai-context-stat {
    font-size: 52px;
    font-weight: 800;
    color: var(--ai-purple-text);
    line-height: 1;
    font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
    letter-spacing: -2px;
    flex-shrink: 0;
    min-width: 110px;
}

.ai-context-body h3 {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 6px;
}

.ai-context-body p {
    font-size: 14px;
    line-height: 20px;
    color: var(--text-secondary);
    margin: 0;
}

.ai-context-body .ai-context-source {
    font-size: 9px;
    font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
    font-weight: 600;
    letter-spacing: 0.4px;
    color: var(--text-muted);
    border: 1px solid rgba(160, 174, 192, 0.25);
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 6px;
    text-decoration: none;
    text-transform: uppercase;
    vertical-align: middle;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.ai-context-body .ai-context-source:hover {
    color: var(--text-secondary);
    border-color: rgba(160, 174, 192, 0.4);
}

/* ---------- Thesis statement ---------- */
/* The main takeaway of the problem section: lede first (large, bold),
   body underneath (secondary). */

.ai-thesis {
    max-width: 820px;
    margin: 44px auto 0;
    padding: 36px 40px;
    text-align: center;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(0, 212, 255, 0.08) 0%, rgba(52, 248, 182, 0.05) 100%);
    border: 1px solid rgba(0, 212, 255, 0.35);
    box-shadow:
        0 0 40px rgba(0, 212, 255, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.ai-thesis-lede {
    font-size: 28px;
    line-height: 36px;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 12px;
    letter-spacing: -0.3px;
}

.ai-thesis-body {
    font-size: 17px;
    line-height: 26px;
    color: var(--text-secondary);
    margin: 0;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

.ai-thesis-body strong {
    color: var(--el-cyan);
    font-weight: 700;
}

/* ==============================================
   ROAD REFRAME — The Engineering Principle
   Transition section between the velocity-gap
   problem and the "One Engine" solution.
   Stylized highway with annotated safety features;
   closing beat ties the metaphor to software.
   ============================================== */

.road-reframe {
    position: relative;
    padding: 110px 40px;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(0, 212, 255, 0.05) 0%, transparent 60%),
        linear-gradient(180deg, #090d16 0%, #0c1220 50%, #090d16 100%);
    overflow: hidden;
    text-align: center;
}

.road-reframe::before,
.road-reframe::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0, 212, 255, 0.22) 50%,
        transparent 100%
    );
    pointer-events: none;
}

.road-reframe::before {
    top: 0;
}

.road-reframe::after {
    bottom: 0;
}

.road-headline,
.road-conclusion {
    font-size: 40px;
    line-height: 48px;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 auto;
    max-width: 820px;
    letter-spacing: -0.4px;
}

.road-scene {
    position: relative;
    width: 100%;
    max-width: 820px;
    margin: 40px auto 32px;
    aspect-ratio: 800 / 400;
}

.road-scene-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* Callout labels overlaid on the SVG. Two-line technical schematic pills —
   the uppercase name on top, the engineering spec underneath.
   Percentages map to leader-line endpoints in the 800x400 viewBox. */
.road-callout {
    position: absolute;
    font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
    white-space: nowrap;
    padding: 7px 11px 8px;
    border-radius: 5px;
    background: rgba(10, 14, 26, 0.88);
    border: 1px solid rgba(0, 212, 255, 0.4);
    box-shadow: 0 0 14px rgba(0, 212, 255, 0.08);
    backdrop-filter: blur(4px);
    text-align: left;
    line-height: 1.15;
}

.road-callout-name {
    display: block;
    font-size: 11px;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--el-cyan);
    font-weight: 700;
}

.road-callout-spec {
    display: block;
    font-size: 9.5px;
    letter-spacing: 0.1px;
    color: var(--text-secondary);
    font-weight: 500;
    margin-top: 3px;
}

/* All callouts centered on their leader-line endpoint.
   The leader terminates just inside the label, which reads as the label
   emerging from the line. */

/* Thermoplastic lane — top center, above the road horizon */
.road-callout-lanes {
    top: 12%; /* 48 / 400 */
    left: 50%;
    transform: translate(-50%, -50%);
}

/* SMA asphalt — upper left, above the horizon */
.road-callout-asphalt {
    top: 23.75%; /* 95 / 400 */
    left: 14.375%; /* 115 / 800 */
    transform: translate(-50%, -50%);
}

/* Cat's eye stud — upper right */
.road-callout-catseye {
    top: 26.25%; /* 105 / 400 */
    left: 86.25%; /* 690 / 800 */
    transform: translate(-50%, -50%);
}

/* W-beam guardrail — lower left, outside the road */
.road-callout-guardrails {
    top: 85%; /* 340 / 400 */
    left: 12.5%; /* 100 / 800 */
    transform: translate(-50%, -50%);
}

/* Milled rumble strip — lower right, outside the road */
.road-callout-rumble {
    top: 85%;
    left: 90%; /* 720 / 800 */
    transform: translate(-50%, -50%);
}

.road-conclusion {
    margin-top: 36px;
}

/* Section takeaway accent: amber (same family as the lane markings in the
   visual above) — deliberately NOT the cyan→green gradient used in the
   hero and the solution section's titles, so this beat reads as its own
   thing. */
.road-highlight {
    color: var(--warning);
    font-weight: 800;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
    .ai-chart {
        padding: 28px 22px 22px;
    }

    /* Tablet annotation cards. Sized to fit within the chart's vertical
       budget at every viewport in the 601-900px range — at the narrow
       end of that range the chart-plot is only ~240px tall, so two
       110px cards (the previous size) overlapped. These tighter values
       leave headroom even at 601px. */
    .ai-annot {
        max-width: 155px;
        font-size: 11px;
        padding: 7px 10px;
        line-height: 14.5px;
    }

    .ai-annot-stat {
        font-size: 16px;
        margin-bottom: 3px;
    }

    .ai-annot-caption {
        font-size: 11px;
        line-height: 14.5px;
    }

    .ai-annot-source {
        font-size: 8.5px;
        padding: 1px 5px;
        margin-top: 4px;
    }

    .ai-context-row {
        grid-template-columns: 1fr;
    }

    .ai-context-card {
        padding: 20px 22px;
        gap: 18px;
    }

    .ai-context-stat {
        font-size: 42px;
        min-width: 90px;
    }

    .ai-thesis {
        padding: 28px 24px;
    }

    .ai-thesis-lede {
        font-size: 22px;
        line-height: 30px;
    }

    .ai-thesis-body {
        font-size: 15px;
        line-height: 23px;
    }

    .road-reframe {
        padding: 80px 24px;
    }

    .road-headline,
    .road-conclusion {
        font-size: 32px;
        line-height: 40px;
    }

    .road-callout {
        padding: 5px 8px 6px;
    }

    .road-callout-name {
        font-size: 10px;
        letter-spacing: 0.9px;
    }

    .road-callout-spec {
        font-size: 8.5px;
        margin-top: 2px;
    }
}

@media (max-width: 600px) {
    .ai-chart {
        padding: 22px 16px 18px;
    }

    /* Make the plot taller on mobile so the two left-stacked annotation
       cards (volume + review) have vertical room without overlapping
       each other or the gap label. */
    .ai-chart-plot {
        padding-bottom: 90%;
    }

    /* On mobile the chart aspect ratio is taller (70% padding-bottom),
       so the lines crowd the right side. Move both annotation cards to
       the LEFT (the empty quadrant) and shrink them. The gap label moves
       to the right side so it still sits inside the wedge between lines. */
    .ai-annot {
        max-width: 132px;
        padding: 7px 9px;
        font-size: 10.5px;
        line-height: 14px;
    }

    .ai-annot-stat {
        font-size: 14px;
        margin-bottom: 4px;
    }

    .ai-annot-caption {
        font-size: 10.5px;
        line-height: 14px;
    }

    .ai-annot-source {
        font-size: 8px;
        padding: 1px 5px;
        margin-top: 4px;
    }

    .ai-annot-volume {
        top: 3%;
        left: 3%;
        right: auto;
    }

    .ai-annot-review {
        top: 50%;
        bottom: auto;
        left: 3%;
        right: auto;
    }

    /* Mobile: keep base position (still inside the wedge), just shrink
       the pill so it doesn't visually crowd the left-stacked cards. */
    .ai-annot-gap {
        font-size: 9px;
        letter-spacing: 1.2px;
        padding: 6px 10px;
    }

    /* Three labels under a 320–600px chart don't fit horizontally with
       justify-content: space-between. Tighten them and let them wrap. */
    .ai-chart-x {
        flex-wrap: wrap;
        gap: 6px 10px;
        font-size: 10px;
        letter-spacing: 0.5px;
        padding: 0 2px;
    }

    .ai-chart-legend {
        gap: 12px;
        font-size: 10px;
    }

    .ai-context-stat {
        font-size: 34px;
        min-width: 76px;
    }

    .ai-context-body h3 {
        font-size: 15px;
    }

    .ai-thesis {
        padding: 24px 18px;
        margin-top: 32px;
    }

    .ai-thesis-lede {
        font-size: 19px;
        line-height: 26px;
    }

    .ai-thesis-body {
        font-size: 14px;
        line-height: 21px;
    }

    .road-reframe {
        padding: 64px 16px;
    }

    .road-headline,
    .road-conclusion {
        font-size: 24px;
        line-height: 32px;
        letter-spacing: -0.2px;
    }

    /* On mobile the overlaid-callout schematic doesn't fit. Reflow the
       scene as a vertical stack: road on top, all 5 callouts in a clean
       2-column grid below. Leader lines/dots are dropped at this width
       since they no longer connect anywhere meaningful. */
    .road-scene {
        margin: 28px auto 20px;
        aspect-ratio: auto;
        display: block;
    }

    .road-scene-svg {
        position: relative;
        width: 100%;
        height: auto;
        aspect-ratio: 800 / 400;
    }

    .road-leaders {
        display: none;
    }

    /* Auto-fit grid: 2 columns when there's room, falls to 1 column on the
       narrowest viewports so the long specs (e.g. "150 mcd/m²/lx ·
       Class II") never get clipped. */
    .road-callouts {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 8px;
        margin-top: 16px;
    }

    .road-callout {
        position: static;
        transform: none;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
        padding: 7px 10px 8px;
        white-space: normal;
    }

    .road-callout-name {
        font-size: 10px;
        letter-spacing: 0.8px;
    }

    .road-callout-spec {
        font-size: 9px;
        margin-top: 3px;
    }
}