/* ═══════════════════════════════════════════════════════════════════════════
   NEXT.ENERGY — index2 (v2) Technical System Overhaul
   All rules scoped under .v2 so they cannot leak to other pages.
   Linked ONLY by index2.html.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 1. BASE CANVAS — cube grid on body, covers the WHOLE page ──────────── */
/* Grid lines are drawn on a fixed-attachment layer, so the cube pattern is
   visible across every transparent section at every viewport size. Sections
   with opaque backgrounds (teal commit-bar, gray-pale CTA, dark footer) cover
   it intentionally; everything else floats above the grid. */
.v2 {
    /* v2 blue identity: redeclare the design-system colour tokens scoped to v2
       pages. Root pages (no body.v2) keep the original teal palette defined in
       styles.css; only pages wearing body.v2 pick up these overrides. */
    --teal:        #2257E8;
    --teal-deep:   #1A3FB0;
    --teal-light:  #6E92F2;
    --teal-pale:   #EAF0FE;
    --bcd:         #C3D3FA;
    --teal-glow:   rgba(34, 87, 232, 0.08);
    --border-soft: rgba(34, 87, 232, 0.18);

    background-color: var(--white);
    background-image:
        linear-gradient(rgba(34, 87, 232, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(34, 87, 232, 0.06) 1px, transparent 1px);
    background-size: 64px 64px;
    background-position: 0 0;
    background-attachment: fixed;
    overflow-x: hidden;
}
/* Horizontal-scroll guard — body { overflow-x: hidden } alone is not
   enough on iOS Safari / some mobile Chromiums (the html element retains
   the scroll). Apply the same guard at the html level for v2 pages. */
html:has(.v2) {
    overflow-x: hidden;
}

/* ─── 2. SYSTEM STATUS STRIP — top of page, above nav ────────────────────── */
.v2-status {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 36px;
    z-index: 101;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border-hairline);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--s-6);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--teal-deep);
    text-transform: uppercase;
    line-height: 1;
}
.v2-status-row {
    display: flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
    max-width: 100%;
}
.v2-status-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--teal);
    box-shadow: 0 0 0 0 rgba(34, 87, 232, 0.45);
    animation: v2-dot-pulse 2s var(--ease-snap) infinite;
}
@keyframes v2-dot-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(34, 87, 232, 0.45); }
    70%  { box-shadow: 0 0 0 7px rgba(34, 87, 232, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 87, 232, 0); }
}
.v2-status-sep {
    color: var(--gray-lite);
    user-select: none;
}
.v2-status-label {
    color: var(--teal-deep);
}
.v2-status-contract {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 9px;
    border-radius: 4px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--teal-deep);
    font: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
    line-height: 1;
}
.v2-status-contract:hover {
    background: var(--teal-pale);
    border-color: var(--border-soft);
}
.v2-status-contract.is-copied {
    background: var(--teal);
    border-color: var(--teal);
    color: var(--white);
}
.v2-status-contract svg {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
}
.v2-status-contract-feedback {
    display: none;
}
.v2-status-contract.is-copied .v2-status-contract-text,
.v2-status-contract.is-copied .v2-status-contract-icon { display: none; }
.v2-status-contract.is-copied .v2-status-contract-feedback { display: inline; }

/* (Status strip removed — nav/hero keep their default offsets from styles.css) */

/* ─── 3. L-BRACKET PRIMITIVE ─────────────────────────────────────────────── */
.v2 .v2-c {
    position: absolute;
    width: 14px;
    height: 14px;
    pointer-events: none;
    z-index: 2;
    border: 0 solid var(--teal-deep);
}
.v2 .v2-c--tl { top: -1px;    left: -1px;   border-top-width: 1px;    border-left-width: 1px;  }
.v2 .v2-c--tr { top: -1px;    right: -1px;  border-top-width: 1px;    border-right-width: 1px; }
.v2 .v2-c--bl { bottom: -1px; left: -1px;   border-bottom-width: 1px; border-left-width: 1px;  }
.v2 .v2-c--br { bottom: -1px; right: -1px;  border-bottom-width: 1px; border-right-width: 1px; }

.v2-frame--lg > .v2-c { width: 22px; height: 22px; }
.v2-frame--sm > .v2-c { width: 10px; height: 10px; }
.v2-frame--teal > .v2-c { border-color: var(--teal); }
.v2-frame--pale > .v2-c { border-color: var(--bcd); }
.v2-frame--inset > .v2-c { top: 8px; bottom: 8px; left: 8px; right: 8px; }
.v2-frame--inset > .v2-c--tl { right: auto; bottom: auto; }
.v2-frame--inset > .v2-c--tr { left: auto; bottom: auto; }
.v2-frame--inset > .v2-c--bl { right: auto; top: auto; }
.v2-frame--inset > .v2-c--br { left: auto; top: auto; }

/* ─── 4. MONO STAMPS — decorative absolute-positioned tags ───────────────── */
.v2-stamp {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gray-lite);
    line-height: 1;
    pointer-events: none;
    white-space: nowrap;
}
.v2-stamp--teal { color: var(--teal-deep); }
.v2-stamp--pale { color: var(--bcd); }
.v2-stamp--gray { color: var(--gray); }

.v2-stamp--abs {
    position: absolute;
    z-index: 3;
}
.v2-stamp--tl { top: 14px;    left: 18px;  }
.v2-stamp--tr { top: 14px;    right: 18px; }
.v2-stamp--bl { bottom: 14px; left: 18px;  }
.v2-stamp--br { bottom: 14px; right: 18px; }

/* Inline mono tag — for use within copy as a chip */
.v2-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border: 1px solid var(--border-soft);
    border-radius: 3px;
    background: var(--surface);
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--teal-deep);
    line-height: 1;
    vertical-align: middle;
}
.v2-tag::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--teal);
}

/* ─── 5. SECTION DATA-RULE — divider with ticks + center node + label ────── */
.v2-rule {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--s-4);
    width: 100%;
    max-width: var(--max-w);
    margin: var(--s-12) auto 0;
    padding: 0 var(--s-6);
}
.v2-rule-line {
    flex: 1;
    height: 1px;
    background: var(--border-hairline);
    position: relative;
}
.v2-rule-line::before,
.v2-rule-line::after {
    content: '';
    position: absolute;
    top: -3px;
    width: 1px;
    height: 7px;
    background: var(--border-hairline);
}
.v2-rule-line::before { left: 12.5%; }
.v2-rule-line::after { right: 12.5%; }
.v2-rule-tag {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gray);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.v2-rule-tag::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--teal);
}

/* ─── 6. HERO — system console treatment ─────────────────────────────────── */
.v2 .hero {
    position: relative;
    /* No overflow: hidden — the animated tile-grid in animations.js uses the
       full-viewport-width trick (left: 50%; translateX(-50%); width: 100vw)
       and must be allowed to bleed past the hero's 1280px max-width to
       reach the viewport edges on wider screens. */
    background-color: var(--white);
    /* min-height inherits from styles.css: 100vh on desktop, auto at ≤1100px.
       The body-level cube grid (background-image with fixed attachment on .v2)
       handles full-page coverage independently of hero height. */
}
/* (Hero-only grid removed — body now carries the cube grid across the whole page) */
/* Lift content & cards above the grid + ambient canvas */
.v2 .hero > .container,
.v2 .hero > .hero-stack {
    position: relative;
    z-index: 2;
    /* Allow the grid items to shrink below their content's intrinsic width
       (default min-width:auto). Without this the NEXT logo's `width: 17rem`
       floor inflates the single-column track below ~360px, pushing the hero
       stack + cards past the viewport. With min-width:0 the track follows the
       viewport and the logo's own `max-width:100%` scales it down to fit. */
    min-width: 0;
}
/* Hero section corner brackets — anchor to the inner edge of section */
.v2 .hero > .v2-c { z-index: 3; }
.v2 .hero > .v2-c--tl { top: 108px;    left: var(--s-6);     border-color: var(--teal-deep); }
.v2 .hero > .v2-c--tr { top: 108px;    right: var(--s-6);    border-color: var(--teal-deep); }
.v2 .hero > .v2-c--bl { bottom: var(--s-6); left: var(--s-6);  border-color: var(--teal-deep); }
.v2 .hero > .v2-c--br { bottom: var(--s-6); right: var(--s-6); border-color: var(--teal-deep); }
.v2 .hero > .v2-c { width: 22px; height: 22px; }

/* Hero corner stamps */
.v2 .hero .v2-stamp--abs { z-index: 3; }
.v2 .hero .v2-stamp--tl { top: 118px;       left: calc(var(--s-6) + 28px);  color: var(--teal-deep); }
.v2 .hero .v2-stamp--tr { top: 118px;       right: calc(var(--s-6) + 28px); color: var(--teal-deep); }
.v2 .hero .v2-stamp--bl { bottom: calc(var(--s-6) + 6px);  left: calc(var(--s-6) + 28px);  color: var(--gray); }
.v2 .hero .v2-stamp--br { bottom: calc(var(--s-6) + 6px);  right: calc(var(--s-6) + 28px); color: var(--gray); }

/* Tag chip above the hero eyebrow */
.v2 .hero-content .v2-tag {
    margin-bottom: var(--s-5);
}

/* Hero NEXT logo — letter-by-letter entrance.
   Each of N, E, X, T is its own absolutely-positioned sprite (generated by
   _slice_letters.py from next-hero-logo.png by colour-segmentation + 8-CC).
   Positions are percentages of the 445x415 source frame so they scale with
   the responsive stage width. When stacked at opacity 1 / scale 1 the four
   sprites recompose to pixel-identical to the original PNG.
   X is rendered first so the bolt paints behind N/E/T (matches source z-order). */
.v2 .hero-logo-h1 {
    margin: 0 0 var(--s-4);
    line-height: 1;
}
.v2 .hero-logo-stage {
    position: relative;
    display: block;
    width: clamp(17rem, 34vw, 25.5rem);
    aspect-ratio: 445 / 415;
    max-width: 100%;
}
.v2 .hero-letter {
    position: absolute;
    background: center / 100% 100% no-repeat;
    opacity: 0;
    transform: scale(0.7);
    animation: heroLetterIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    will-change: transform, opacity;
}
.v2 .hero-letter-n {
    left: 0.000%; top: 41.928%; width: 15.506%; height: 18.313%;
    background-image: url('next-logo-n.png');
    animation-delay: 0.10s;
}
.v2 .hero-letter-e {
    left: 16.404%; top: 41.928%; width: 13.258%; height: 18.313%;
    background-image: url('next-logo-e.png');
    animation-delay: 0.28s;
}
.v2 .hero-letter-x {
    left: 0.449%; top: 0; width: 99.551%; height: 100%;
    background-image: url('next-logo-x.png');
    animation-delay: 0.46s;
}
.v2 .hero-letter-t {
    left: 68.764%; top: 41.928%; width: 14.382%; height: 18.313%;
    background-image: url('next-logo-t.png');
    animation-delay: 0.64s;
}

@keyframes heroLetterIn {
    from { opacity: 0; transform: scale(0.7); }
    to   { opacity: 1; transform: scale(1);   }
}

@media (prefers-reduced-motion: reduce) {
    .v2 .hero-letter {
        opacity: 1;
        transform: none;
        animation: none;
    }
}

/* Hero meta restyle */
.v2 .hero-meta {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gray);
    border-top-color: var(--border-soft);
    border-top-width: 1px;
}
.v2 .hero-meta span:first-child::before {
    content: 'META — ';
    color: var(--teal-deep);
    font-weight: 500;
}

/* Hero card stack — tiny bracket + coord on each card.
   No position override here: the base `.layer-card { position: absolute }`
   in styles.css is the containing block for the absolute decorative spans
   below. An earlier `position: relative` override broke the overlap stack. */
.v2 .layer-card .v2-card-coord {
    position: absolute;
    top: 6px;
    right: 8px;
    font-family: var(--font-mono);
    font-size: 0.5625rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    color: var(--teal);
    opacity: 0.55;
    pointer-events: none;
    z-index: 2;
    text-transform: uppercase;
}
.v2 .layer-card .v2-card-mark {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 9px;
    height: 9px;
    border: 1px solid var(--teal);
    border-right: none;
    border-bottom: none;
    opacity: 0.55;
    pointer-events: none;
    z-index: 2;
}

/* Hero card stack — positions inherit from styles.css so v2 cards align
   exactly like index.html (0 / 110 / 320 on desktop, 0 / 130 / 290 on mobile,
   in a 540px stack). No overrides — same compact stagger as the live home. */

/* ─── 7. SECTION-LEVEL STAMPS ────────────────────────────────────────────── */
.v2 section { position: relative; }
.v2 .stat-strip { position: relative; }
.v2 footer { position: relative; }

.v2 .v2-section-stamp {
    position: absolute;
    top: var(--s-6);
    right: var(--s-6);
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gray-lite);
    pointer-events: none;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    line-height: 1;
}
.v2 .v2-section-stamp::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    background: var(--teal);
    border-radius: 50%;
}
.v2 .v2-section-stamp--pale { color: var(--bcd); }
.v2 .v2-section-stamp--pale::before { background: var(--bcd); }

/* ─── 8. STAT CARDS — bracket framing + tabular nums ─────────────────────── */
.v2 .stat-card {
    position: relative;
    padding: var(--s-6);
    border-top: 1px solid var(--teal);
    border-radius: 0;
    background: var(--surface);
}
.v2 .stat-card .stat-num {
    font-family: var(--font-mono);
    color: var(--gray);
    letter-spacing: 0.16em;
}
.v2 .stat-card .stat-num::before {
    content: '— ';
    color: var(--teal);
}
.v2 .stat-card .stat-value {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.07em;
}

/* ─── 9. STAT STRIP — bracket framing + ticks ────────────────────────────── */
.v2 .stat-strip {
    border-bottom: 1px solid var(--teal);
}
.v2 .stat-strip-item .num {
    font-variant-numeric: tabular-nums;
}

/* ─── 10. SPEC CARD — full framing + mono accent ─────────────────────────── */
.v2 .spec-card {
    position: relative;
    border-radius: 0;
    border-top: 1px solid var(--teal);
    background: var(--surface);
}
.v2 .spec-row {
    position: relative;
}
.v2 .spec-row .key {
    font-family: var(--font-mono);
    font-weight: 500;
    letter-spacing: 0.12em;
}
.v2 .spec-row .key::before {
    content: '› ';
    color: var(--teal);
    margin-right: 2px;
}

/* ─── 11. COMMIT BAR — keep teal, add brackets in pale ───────────────────── */
.v2 .commit-bar {
    position: relative;
    overflow: visible;
}
.v2 .commit-bar .v2-c {
    border-color: var(--bcd);
    opacity: 0.65;
}
.v2 .commit-bar .label {
    font-family: var(--font-mono);
    font-weight: 500;
    letter-spacing: 0.12em;
}

/* ─── 12. CLOSING CTA SECTION ────────────────────────────────────────────── */
.v2 .closing-cta-wrap {
    position: relative;
    padding: var(--s-6);
}

/* ─── 13. SPLIT ASIDE (problem) — bracket framing ────────────────────────── */
.v2 .split-aside {
    position: relative;
    border-radius: 0;
    border-top: 1px solid var(--bcd);
}
.v2 .split-aside .v2-c {
    border-color: var(--bcd);
    opacity: 0.6;
}

/* ─── 14. ANCHOR BAR — add mono prefix ───────────────────────────────────── */
.v2 .anchor-bar {
    position: relative;
    overflow: hidden;
    border-radius: 0;
    border-top: 1px solid var(--bcd);
    border-bottom: 1px solid var(--bcd);
}

/* ─── 15. EYEBROW — slightly more technical with side ticks ──────────────── */
.v2 .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.v2 .eyebrow::after {
    margin-top: 0;
    width: 18px;
    height: 1px;
}

/* ─── 16. DIGIT-ROLL — tabular nums during animation ─────────────────────── */
.v2-rolling {
    font-variant-numeric: tabular-nums;
}

/* ─── 17. RESPONSIVE — degrade decorations gracefully ────────────────────── */
@media (max-width: 1024px) {
    .v2 .hero > .v2-c { width: 18px; height: 18px; }
    .v2 .hero .v2-stamp--bl,
    .v2 .hero .v2-stamp--br { display: none; }
}

@media (max-width: 900px) {
    .v2 .v2-section-stamp { display: none; }
}

@media (max-width: 600px) {
    /* Drop most decorations on mobile to preserve readability */
    .v2 .v2-section-stamp,
    .v2 .v2-stamp--bl,
    .v2 .v2-stamp--br,
    .v2 .layer-card .v2-card-coord,
    .v2 .layer-card .v2-card-mark { display: none; }
    .v2 .v2-c { width: 10px !important; height: 10px !important; }
    .v2 .hero > .v2-c--tl,
    .v2 .hero > .v2-c--tr,
    .v2 .hero > .v2-c--bl,
    .v2 .hero > .v2-c--br { display: none; }
    /* Hide the two remaining hero top-stamps — they overlap the v2-tag chip
       and crowd the eyebrow row at narrow widths. */
    .v2 .hero .v2-stamp--tl,
    .v2 .hero .v2-stamp--tr { display: none; }
    /* Surgical overflow clip — re-enabled only on mobile to absorb the
       tile-grid `width: 100vw` bleed and the ±4° rotated-card extension.
       Desktop keeps `overflow: visible` so the tile grid can extend to
       both viewport edges. */
    .v2 .hero { overflow: hidden; }
    .v2 .hero-stack { overflow: hidden; }
    .v2-rule { margin-top: var(--s-8); }
}

/* ─── 17b. NOWRAP-LG — keep a heading on one line only above mobile ────────
   `.nowrap-lg` headings (e.g. "The world cannot live without it" on the home
   page) stay on a single line from 768px up, but MUST be allowed to wrap on
   phones. A non-wrapping heading inside a grid `1fr` track forces the whole
   `.container` wider than the viewport and clips every element on the right. */
/* Let this heading wrap naturally: it stays on one line where the column is
   wide enough (large desktop) and wraps where it isn't, instead of being forced
   onto one line with `nowrap` (which overflowed the narrow 1fr column between
   ~1025–1200px). Fully fluid at every width — no forced single-line. */
.v2 .nowrap-lg { white-space: normal; }

/* ─── 17c. MOBILE OVERFLOW GUARD (home page) ──────────────────────────────
   On phones the page laid out wider than the viewport: the blue .split-aside
   box, the .display-lg headings, and the .lead paragraph were clipped on the
   right. Cause: grid/flex items default to `min-width: auto`, so a track
   refuses to shrink below its content's intrinsic width — a non-wrapping
   heading or a fixed-px column (`.split` 320px, `.spec-row` 140px,
   `.commit-bar-inner` 240px) blows the track past the screen, and the existing
   `overflow-x: hidden` only hides the spill. Below 600px we collapse those
   tracks to one column and set `min-width: 0` so nothing can exceed the
   viewport. Left-aligned editorial layout is preserved. */
@media (max-width: 600px) {
    .v2 .split,
    .v2 .our-answer-grid,
    .v2 .commit-bar-inner,
    .v2 .stat-strip-grid,
    .v2 .spec-row { grid-template-columns: 1fr; }

    .v2 .split > *,
    .v2 .split-left-stack,
    .v2 .split-aside,
    .v2 .our-answer-grid > *,
    .v2 .spec-card,
    .v2 .display-xl,
    .v2 .display-lg,
    .v2 .display-md,
    .v2 .lead { min-width: 0; max-width: 100%; }

    .v2 .nowrap-lg { white-space: normal !important; }
}

/* ─── 18. REDUCED MOTION ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .v2-status-dot {
        animation: none;
        box-shadow: none;
    }
}

/* ─── 19. PAGE-HERO STAMPS (non-homepage v2 pages) ────────────────────────
   `.page-hero` (used by all v2 pages except index.html) has padding-top:180px
   to clear the fixed nav. Section-level stamps sit absolutely inside the
   section, but the default top: var(--s-6) would put them BEHIND the nav.
   Push them down to ~108px so they sit between the nav and the page-hero
   content (h1 starts at ~180px). */
.v2 .page-hero {
    position: relative;
}
.v2 .page-hero .v2-section-stamp {
    top: 108px;
    right: var(--s-6);
}
.v2 .page-hero .v2-stamp--abs.v2-stamp--tl {
    top: 108px;
    left: calc(var(--s-6) + 8px);
}
.v2 .page-hero .v2-stamp--abs.v2-stamp--tr {
    top: 108px;
    right: calc(var(--s-6) + 8px);
}
/* Pale variant for the video-bg participate hero */
.v2 .page-hero--video .v2-section-stamp,
.v2 .page-hero--video .v2-stamp--abs {
    color: var(--bcd);
    z-index: 3;
}
.v2 .page-hero--video .v2-section-stamp::before {
    background: var(--bcd);
}

/* ─── 20. CARD/PANEL BRACKETS — common surfaces on v2 pages ──────────────
   The `.v2-c` corner spans use `position: absolute` and need a positioned
   ancestor. These selectors give the parents `position: relative` so the
   brackets anchor correctly. */
.v2 .thesis,
.v2 .leader-name-block,
.v2 .milestone,
.v2 .phase,
.v2 .contact-card,
.v2 .activation-step,
.v2 .math-col,
.v2 .calc-card,
.v2 .calc-result-card,
.v2 .tier-projection-card,
.v2 .demand-total,
.v2 .arch-pillar,
.v2 .participate-hero-stack {
    position: relative;
}

/* Tighten the leader-name-block (about page) — render brackets as teal hairlines */
.v2 .leader-name-block .v2-c {
    border-color: var(--teal-deep);
}
.v2 .thesis .v2-c {
    border-color: var(--bcd);
    opacity: 0.7;
}
.v2 .milestone .v2-c,
.v2 .phase .v2-c,
.v2 .contact-card .v2-c,
.v2 .activation-step .v2-c,
.v2 .math-col .v2-c {
    border-color: var(--teal-deep);
}

/* ─── 21. GLOBE MARK + LEFT-COLUMN STACK (index.html only) ────────────────
   Wraps the existing .split-aside so a dotted-globe SVG sits ABOVE it in the
   left column of the Inevitable Expense section. The aside drops down so its
   top edge aligns with the stats grid on the right column.

   The original `.split-aside { position: sticky; top: 108px }` from
   styles.css is preserved: we make the WRAPPER sticky instead, and downgrade
   the aside to non-sticky so the whole globe+panel stack scrolls together. */
.v2 .split-left-stack {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
    position: sticky;
    top: 108px;
    align-self: start;
}
.v2 .split-left-stack .split-aside {
    position: static;
}
.v2 .globe-mark {
    width: 100%;
    aspect-ratio: 1 / 1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--s-2);
}
.v2 .globe-mark svg {
    width: 100%;
    height: auto;
    display: block;
    will-change: transform;
}
.v2 .globe-mark-label {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    color: var(--gray);
    text-transform: uppercase;
    margin-top: var(--s-3);
    line-height: 1;
}

/* Mobile (≤1024px): .split collapses to single column. Globe stays visible,
   bounded to 240px max-width and centred so it doesn't dominate the column. */
@media (max-width: 1024px) {
    .v2 .split-left-stack {
        position: static;
        gap: var(--s-6);
    }
    .v2 .globe-mark {
        max-width: 240px;
        margin: 0 auto;
    }
}

/* ─── 22. GLOBE GLOW BREATHE — subtle opacity pulse on the radial halo ───── */
@keyframes globe-glow-breathe {
    0%, 100% { opacity: 0.85; }
    50%      { opacity: 1; }
}
.v2 .globe-mark svg .globe-glow {
    animation: globe-glow-breathe 7s ease-in-out infinite;
    transform-origin: 120px 120px;
    transform-box: view-box;
}
@media (prefers-reduced-motion: reduce) {
    .v2 .globe-mark svg .globe-glow {
        animation: none;
    }
}