/**
 * SPX Infographic V2 — sandlot restyle
 * ------------------------------------
 * Namespace: `.spxiv2-*`
 * Loaded via <link> from templates/sandlot/page-spx-infographic-preview.php
 * (same enqueue pattern the em-infographic-v2 CSS uses).
 *
 * STYLE SOURCE
 *   This is an intentional deviation from docs/development/style-unification.md.
 *   Per the task spec, the SPX v2 palette is a carbon copy of the earnings
 *   emiv2 palette (docs/development/em-infographic-v2-redesign.md).
 *   See docs/development/SANDLOT.md Rule 3.
 *
 * PALETTE MAPPING TABLE
 *   Page bg               #000000
 *   Card surface          rgba(26, 26, 46, 0.85)         — emiv2 chassis
 *   Hairline border       #374151
 *   Text primary          #ffffff
 *   Text muted            #d1d5db
 *   Text dim              #9ca3af
 *   Text faint            #6b7280
 *   Brand amber (CTA/link ONLY)  #fbbf24
 *   Weekly EM identity    #FFD700  (gold — emiv2 WARM slot)
 *   Daily EM identity     #60a5fa text / #3b82f6 fill (emiv2 COLD slot)
 *   Streak identity       #ff4500  (fire orange-red — user-approved override
 *                                    on 7/18/2026. Distinct from outcome
 *                                    ✗ (#f87171) but IS in the red family;
 *                                    the deviation is intentional to match
 *                                    the Flame icon and the "streak" mental
 *                                    model.)
 *   Outcome ✓             #22c55e
 *   Outcome ✗             #f87171
 *   Tinted card surfaces  identity color @ 0.06 alpha
 *   Mono                  ui-monospace, tabular-nums on all $/%/counts

 *
 * COLOR RULES
 *   - Green / red are OUTCOME colors only. Never identity, never decoration.
 *   - Brand amber is CTA/link only. Never data identity.
 *   - Progress-bar "actual exceeds expected" is rendered in the metric's
 *     IDENTITY color (gold or blue), not green. Under v2 semantics, "actual
 *     bigger than expected" isn't inherently a good/bad outcome for SPX —
 *     it's just information.
 *   - The three hero cards get a 3px top-edge accent in identity color +
 *     tinted surface + identity-colored large number. Solid-filled colored
 *     hero boxes from the live page are replaced by this chassis.
 *
 * LAYOUT
 *   - Top-level flex column, gap 24px desktop / 16px at 380px.
 *   - No per-section margins — spacing comes from the gap system.
 *   - prefers-reduced-motion respected.
 *   - Touch targets >= 44px.
 */

/* ── Root container ────────────────────────────────────────────────── */

/* .spxiv2-root is the black card that owns the entire v2 infographic.
   Sized + centered like .emiv2-page on the earnings side (max-width 1200,
   margin auto) so the panel sits on its own black surface instead of the
   theme's blue backdrop. Padding matches emiv2 exactly. box-sizing reset
   also mirrors emiv2's boilerplate.

   The template's outer .container wrapper (70% width) is bypassed by this
   own max-width so both layouts render identically wide. */
.spxiv2-root {
    box-sizing: border-box;
    color: #ffffff;
    background: #000000;
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 20px 32px;
    border-radius: 12px;
}

.spxiv2-root *,
.spxiv2-root *::before,
.spxiv2-root *::after {
    box-sizing: border-box;
}

@media (max-width: 480px) {
    .spxiv2-root {
        padding: 14px 10px 36px;
    }
}

@media (max-width: 380px) {
    .spxiv2-root {
        gap: 16px;
    }
}


/* Reused numeric font. Applied to every $/%/count. */
.spxiv2-mono {
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, 'Roboto Mono', monospace;
    font-variant-numeric: tabular-nums;
}

/* ── Header ─────────────────────────────────────────────────────────── */

.spxiv2-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 16px;
    padding: 4px 0;
}

/* Type scale bumped one notch on 7/18/2026 per user feedback. */
.spxiv2-header-title {
    font-size: 36px;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    line-height: 1.2;
}


.spxiv2-header-controls {
    display: flex;
    gap: 12px;
}

/* Year selector — v2 control chassis. */
.spxiv2-select-wrap {
    position: relative;
    min-width: 140px;
}

.spxiv2-select-btn {
    appearance: none;
    background: rgba(26, 26, 46, 0.85);
    border: 1px solid #374151;
    border-radius: 8px;
    padding: 10px 40px 10px 14px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    min-height: 44px;
    width: 100%;
    text-align: left;
    transition: border-color 0.15s ease;
}

.spxiv2-select-btn:hover,
.spxiv2-select-btn:focus {
    border-color: #fbbf24;
    outline: none;
}

.spxiv2-select-chev {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: #9ca3af;
    pointer-events: none;
    transition: transform 0.15s ease;
}

.spxiv2-select-chev.is-open {
    transform: translateY(-50%) rotate(180deg);
}

.spxiv2-select-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #1a1a2e;
    border: 1px solid #374151;
    border-radius: 8px;
    overflow: hidden;
    z-index: 50;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.spxiv2-select-opt {
    padding: 10px 14px;
    color: #ffffff;
    cursor: pointer;
    font-size: 14px;
    min-height: 44px;
    display: flex;
    align-items: center;
    transition: background 0.1s ease;
}

.spxiv2-select-opt:hover {
    background: rgba(55, 65, 81, 0.6);
}

.spxiv2-select-opt.is-active {
    background: #fbbf24;
    color: #0f172a;
    font-weight: 700;
}

/* ── Hero stats panel ───────────────────────────────────────────────── */

.spxiv2-hero {
    background: rgba(26, 26, 46, 0.85);
    border: 1px solid #374151;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.spxiv2-hero-title {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #9ca3af;
    text-align: center;
    margin: 0;
}


.spxiv2-hero-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

@media (max-width: 640px) {
    .spxiv2-hero-grid {
        grid-template-columns: 1fr;
    }
}

/* Hero card chassis: flat surface + 3px top-edge accent + hairline border.
   The top-edge color is what tells you which identity (Weekly/Daily/Streak)
   the card belongs to. */
.spxiv2-hero-card {
    position: relative;
    border-radius: 8px;
    border: 1px solid #374151;
    padding: 16px 16px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    overflow: hidden;
}

.spxiv2-hero-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: currentColor;
}

.spxiv2-hero-card-weekly {
    background: rgba(255, 215, 0, 0.06);
    color: #FFD700; /* drives ::before via currentColor */
}

.spxiv2-hero-card-daily {
    background: rgba(96, 165, 250, 0.06);
    color: #60a5fa;
}

/* Streak identity — fire orange-red per 7/18/2026 user override.
   Tinted surface uses the same 0.06 alpha as other hero cards, and
   currentColor cascades to the top-edge accent, icon, and value. */
.spxiv2-hero-card-streak {
    background: rgba(255, 69, 0, 0.06);
    color: #ff4500;
}


.spxiv2-hero-icon {
    width: 28px;
    height: 28px;
    stroke-width: 2;
}

.spxiv2-hero-value {
    font-size: 44px;
    font-weight: 700;
    line-height: 1;
    color: currentColor; /* identity color per card */
}

.spxiv2-hero-label {
    color: #d1d5db;
    font-size: 15px;
    font-weight: 600;
}

.spxiv2-hero-sub {
    color: #9ca3af;
    font-size: 13px;
}

.spxiv2-hero-sub-dates {
    color: #9ca3af;
    font-size: 12px;
}

/* ── Quarterly breakdown ────────────────────────────────────────────── */

.spxiv2-qb-section-title {
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 16px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}


.spxiv2-qb-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

@media (max-width: 700px) {
    .spxiv2-qb-grid {
        grid-template-columns: 1fr;
    }
}

.spxiv2-qc {
    background: rgba(26, 26, 46, 0.85);
    border: 1px solid #374151;
    border-radius: 10px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.spxiv2-qc-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: 10px;
    border-bottom: 1px solid #374151;
}

.spxiv2-qc-quarter {
    font-size: 24px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.02em;
}

.spxiv2-qc-weeks {
    color: #9ca3af;
    font-size: 13px;
}


/* Metric block (Weekly EM, then Daily EM). */
.spxiv2-qc-metric {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.spxiv2-qc-metric-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.spxiv2-qc-metric-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #d1d5db;
}


.spxiv2-qc-metric-label-weekly {
    color: #FFD700;
}

.spxiv2-qc-metric-label-daily {
    color: #60a5fa;
}

.spxiv2-qc-metric-icon {
    width: 14px;
    height: 14px;
    stroke-width: 2;
}

.spxiv2-qc-metric-ratio {
    font-size: 14px;
    font-weight: 700;
    color: #d1d5db;
}


.spxiv2-qc-metric-ratio.is-weekly {
    color: #FFD700;
}

.spxiv2-qc-metric-ratio.is-daily {
    color: #60a5fa;
}

/* Expected + Actual number row — both mono, right-aligned in a two-col
   sub-grid so bars downstream align to the same left edge. */
.spxiv2-qc-numbers {
    display: grid;
    grid-template-columns: auto 1fr auto;
    row-gap: 4px;
    column-gap: 12px;
    align-items: baseline;
    font-size: 14px;
}


.spxiv2-qc-num-label {
    color: #9ca3af;
}

.spxiv2-qc-num-value {
    color: #ffffff;
    text-align: right;
    font-weight: 600;
    grid-column: 3;
}

.spxiv2-qc-num-value.is-actual-weekly {
    color: #FFD700;
}

.spxiv2-qc-num-value.is-actual-daily {
    color: #60a5fa;
}

/* Thin identity-color fill bar on a hairline track.
   No animation on the fill; screen readers still get the aria-label. */
.spxiv2-qc-bar {
    position: relative;
    height: 6px;
    background: #374151;
    border-radius: 3px;
    overflow: hidden;
}

.spxiv2-qc-bar-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 3px;
    transition: width 0.2s ease;
}

.spxiv2-qc-bar-fill.is-weekly {
    background: #FFD700;
}

.spxiv2-qc-bar-fill.is-daily {
    background: #3b82f6;
}

/* Marker at the 100% line when actual exceeds expected — still in identity
   color, NOT green. Communicates "past the expected line" as information,
   not as an outcome verdict. */
.spxiv2-qc-bar-over {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 3px;
    background: currentColor;
}

.spxiv2-qc-footer {
    padding-top: 10px;
    border-top: 1px solid #374151;
    color: #9ca3af;
    font-size: 13px;
    text-align: center;
}


/* ── Empty / loading / error ────────────────────────────────────────── */

.spxiv2-empty {
    padding: 32px 16px;
    text-align: center;
    color: #9ca3af;
    font-size: 14px;
}

.spxiv2-error {
    padding: 20px;
    border: 1px solid #f87171;
    border-radius: 8px;
    background: rgba(248, 113, 113, 0.08);
    color: #f87171;
}

.spxiv2-error-title {
    font-weight: 700;
    margin: 0 0 6px 0;
}

/* ── Motion respect ─────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .spxiv2-qc-bar-fill,
    .spxiv2-select-btn,
    .spxiv2-select-chev,
    .spxiv2-select-opt {
        transition: none;
    }
}

/* ── Pre-React SSR stats block (crawler-visible without JS) ─────────
   Rendered ABOVE #spx-infographic-v2-root in page-spx-infographic-preview.php.
   Hidden the moment React mounts (hide-on-hydrate inline script). Mirrors
   the earnings .em-info-ssr pattern — same purpose, same lifecycle. */

.spxiv2-ssr {
    max-width: 1200px;
    margin: 0 auto;
    padding: 28px 20px 12px;
    color: #e6e6e6;
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

.spxiv2-ssr-h1 {
    font-size: 26px;
    line-height: 1.25;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 10px 0;
}

.spxiv2-ssr-lede {
    font-size: 16px;
    line-height: 1.55;
    color: #c9c9c9;
    margin: 0 0 14px 0;
    max-width: 720px;
}

.spxiv2-ssr-lede strong {
    color: #ffffff;
    font-weight: 700;
}

.spxiv2-ssr-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 0;
    margin: 0 0 12px 0;
    list-style: none;
    font-size: 14px;
    color: #c9c9c9;
}

.spxiv2-ssr-chip {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 8px 12px;
}

.spxiv2-ssr-chip strong {
    color: #ffffff;
    font-weight: 700;
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, 'Roboto Mono', monospace;
    font-variant-numeric: tabular-nums;
}


/* ── SSR "Past Years Results" scorecards (hub v2 preview) ───────────
   Direct analog of the earnings .emiv2-pq-panel. The whole thing is
   its own black rounded surface at max-width:1200 with a small
   negative top margin, so it visually welds onto the tail of
   .spxiv2-root's padding — no blue theme seam between the React app
   and this SSR panel. Rendered by spx_annual_render_hub_scorecards()
   in plugins/spx_functions/includes/spx-seo-annual.php.

   Metric row identity colors match the palette rules at the top of
   this file — Weekly=gold, Daily=blue, Streak=fire orange-red. This
   is NOT the earnings HOT/WARM/COLD mapping. */

.spxiv2-py-panel {
    width: 100%;
    max-width: 1200px;
    /* Negative top margin pulls the panel up so its black surface
       overlaps the tail of .spxiv2-root's bottom padding — mirrors
       the earnings .emiv2-pq-panel trick that eliminates the theme
       seam between React and SSR panels.
       Iterated on 7/18/2026:
         -8px  → still a visible blue seam.
         -48px → overlapped the bottom edge of the last quarterly cards.
         -24px → seamless weld without touching the cards. Kept. */
    margin: -24px auto 24px;


    background: #000000;
    border-radius: 12px;
    padding: 20px 16px;
    box-sizing: border-box;
    color: #ffffff;
    position: relative; /* paint on top of the React panel's tail */
}

.spxiv2-py-title {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 6px;
}

.spxiv2-py-desc {
    font-size: 14px;
    color: #9ca3af;
    margin: 0 0 14px;
    line-height: 1.5;
}

.spxiv2-py-grid {
    display: grid;
    /* Capped at 3 most-recent final years in PHP, so 3 columns is the
       natural desktop width. Falls back to 2 then 1 as viewport
       narrows. Same stepped breakpoints as .spxiv2-qb-grid. */
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 4px;
}

@media (max-width: 700px) {
    .spxiv2-py-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .spxiv2-py-grid { grid-template-columns: 1fr; }
}

.spxiv2-py-card {
    display: block;
    background: rgba(26, 26, 46, 0.85);
    border: 1px solid #374151;
    border-radius: 10px;
    padding: 14px 16px;
    text-decoration: none;
    color: inherit;
    transition: border-color 150ms;
}

.spxiv2-py-card:hover,
.spxiv2-py-card:focus {
    border-color: #fbbf24;
    outline: none;
}

.spxiv2-py-card-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
}

.spxiv2-py-card-label {
    font-size: 17px;
    font-weight: 700;
    color: #ffffff;
}

.spxiv2-py-card-count {
    font-size: 12px;
    color: #9ca3af;
}

.spxiv2-py-card-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 14px;
    padding: 3px 0;
}

/* Per-metric identity color. The row's color cascades to the label,
   the percent, and (via currentColor-adjacent tone) sets the visual
   identity of the row. Weekly=gold, Daily=blue, Streak=fire orange-
   red — matches the hero cards + quarterly breakdown above. */
.spxiv2-py-card-row-weekly { color: #FFD700; }
.spxiv2-py-card-row-daily  { color: #60a5fa; }
.spxiv2-py-card-row-streak { color: #ff4500; }

.spxiv2-py-card-pct {
    font-weight: 700;
}

/* Small parenthetical inside .spxiv2-py-card-pct — e.g. "(57/52)".
   Dimmed to muted gray so the primary number stays dominant. */
.spxiv2-py-card-sub {
    font-weight: 400;
    color: #9ca3af;
    margin-left: 4px;
    font-size: 12px;
}

.spxiv2-py-card-footer {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(55, 65, 81, 0.5);
    text-align: center;
    font-size: 12px;
    color: #fbbf24;
}


/* ── SSR "Past Results" (legacy plain-link fallback) ─────────────────
   Still emitted by spx_annual_render_hub_list() as a fallback when
   spx_annual_render_hub_scorecards() is missing. Not the primary
   presentation on the hub anymore — kept for backwards compat. */

.spxiv2-past {

    background: rgba(26, 26, 46, 0.85);
    border: 1px solid #374151;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.spxiv2-past-title {
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
}

.spxiv2-past-desc {
    color: #9ca3af;
    font-size: 13px;
    margin: 0;
}

.spxiv2-past-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.spxiv2-past-item {
    padding: 0;
    margin: 0;
}

.spxiv2-past-link {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    min-height: 44px;
    color: #fbbf24;
    background: transparent;
    border: 1px solid #374151;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, 'Roboto Mono', monospace;
    font-variant-numeric: tabular-nums;
    transition: border-color 0.15s ease;
}

.spxiv2-past-link:hover,
.spxiv2-past-link:focus {
    border-color: #fbbf24;
    outline: none;
}

/* ── Annual SSR page (page-spx-annual-v2.php) ───────────────────────── */

.spxiv2-annual-root {
    color: #ffffff;
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 16px 0 32px;
}

@media (max-width: 380px) {
    .spxiv2-annual-root {
        gap: 16px;
    }
}

.spxiv2-annual-breadcrumb {
    font-size: 13px;
    color: #9ca3af;
}

.spxiv2-annual-breadcrumb a {
    color: #fbbf24;
    text-decoration: none;
}

.spxiv2-annual-breadcrumb a:hover,
.spxiv2-annual-breadcrumb a:focus {
    text-decoration: underline;
}

.spxiv2-annual-h1 {
    font-size: 28px;
    font-weight: 700;
    margin: 0;
    color: #ffffff;
}

.spxiv2-annual-lede {
    color: #d1d5db;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

/* Explainer block — amber left-hairline accent (matches earnings emiv2). */
.spxiv2-annual-explainer {
    background: rgba(26, 26, 46, 0.85);
    border: 1px solid #374151;
    border-left: 3px solid #fbbf24;
    border-radius: 8px;
    padding: 16px 18px;
    color: #d1d5db;
    font-size: 13px;
    line-height: 1.6;
}

.spxiv2-annual-explainer h3 {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #ffffff;
    margin: 0 0 8px 0;
}

.spxiv2-annual-explainer p {
    margin: 0 0 8px 0;
}

.spxiv2-annual-explainer p:last-child {
    margin: 0;
}

/* Results table: semantic <table>, hairline rows, mono numeric cells,
   sticky header, horizontal scroll at 380px with sticky first column. */
.spxiv2-annual-table-wrap {
    background: rgba(26, 26, 46, 0.85);
    border: 1px solid #374151;
    border-radius: 10px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.spxiv2-annual-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 640px;
    font-size: 13px;
}

.spxiv2-annual-table thead th {
    position: sticky;
    top: 0;
    background: #1a1a2e;
    color: #d1d5db;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: right;
    padding: 12px 14px;
    border-bottom: 1px solid #374151;
    white-space: nowrap;
}

.spxiv2-annual-table thead th:first-child {
    text-align: left;
}

.spxiv2-annual-table tbody td {
    padding: 12px 14px;
    color: #ffffff;
    border-bottom: 1px solid #374151;
    text-align: right;
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, 'Roboto Mono', monospace;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.spxiv2-annual-table tbody td:first-child {
    text-align: left;
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-weight: 600;
    color: #ffffff;
}

.spxiv2-annual-table tbody tr:last-child td {
    border-bottom: 0;
}

.spxiv2-annual-table .is-weekly-hit {
    color: #FFD700;
}

.spxiv2-annual-table .is-daily-hit {
    color: #60a5fa;
}

/* Sticky first column on very small screens. */
@media (max-width: 480px) {
    .spxiv2-annual-table thead th:first-child,
    .spxiv2-annual-table tbody td:first-child {
        position: sticky;
        left: 0;
        background: #1a1a2e;
        z-index: 1;
    }
}

/* CTA + nav */
.spxiv2-annual-cta {
    background: rgba(251, 191, 36, 0.08);
    border: 1px solid #fbbf24;
    border-radius: 10px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
}

.spxiv2-annual-cta-head {
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
}

.spxiv2-annual-cta-body {
    color: #d1d5db;
    font-size: 13px;
    margin: 0;
}

.spxiv2-annual-cta-btn {
    display: inline-flex;
    align-items: center;
    padding: 12px 18px;
    min-height: 44px;
    background: #fbbf24;
    color: #0f172a;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    font-size: 14px;
}

.spxiv2-annual-cta-btn:hover,
.spxiv2-annual-cta-btn:focus {
    background: #f59e0b;
    text-decoration: none;
    outline: none;
}

.spxiv2-annual-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 4px;
    border-top: 1px solid #374151;
    font-size: 13px;
}

.spxiv2-annual-nav-link {
    color: #fbbf24;
    text-decoration: none;
}

.spxiv2-annual-nav-link:hover,
.spxiv2-annual-nav-link:focus {
    text-decoration: underline;
}

.spxiv2-annual-nav-mid {
    color: #9ca3af;
}