/* ═══════════════════════════════════════════════════════════
   BLACKBOX — Obsidian Atelier
   Premium private-vault finance aesthetic
   Champagne gold · editorial type · atmospheric depth
   ═══════════════════════════════════════════════════════════ */

:root {
    /* Atmosphere */
    --bg: #030303;
    --bg-secondary: #0a0908;
    --bg-tertiary: #0e0c0a;
    --card: rgba(12, 10, 8, 0.72);
    --card-solid: #0c0a08;
    --card-hover: rgba(18, 15, 12, 0.88);
    --card-active: #12100e;

    /* Type */
    --text: #f4efe6;
    --text-secondary: rgba(244, 239, 230, 0.78);
    --text-tertiary: rgba(244, 239, 230, 0.55);
    --text-muted: rgba(244, 239, 230, 0.34);

    /* Borders & light */
    --border: rgba(201, 168, 108, 0.12);
    --border-light: rgba(201, 168, 108, 0.22);
    --border-focus: rgba(232, 213, 163, 0.45);
    --micro-line: rgba(201, 168, 108, 0.18);
    --micro-line-strong: rgba(232, 213, 163, 0.38);

    /* Champagne gold system */
    --gold: #c9a86c;
    --gold-soft: #e8d5a3;
    --gold-deep: #8a7040;
    --gold-glow: rgba(201, 168, 108, 0.35);
    --gold-mist: rgba(201, 168, 108, 0.08);
    --accent: var(--gold-soft);
    --accent-hover: #f0e4c0;
    --danger: #e07a6a;
    --success: #7dba8a;
    --warn: #d4a85a;

    --shadow-sm: rgba(0, 0, 0, 0.55);
    --shadow-md: rgba(0, 0, 0, 0.7);
    --shadow-lg: rgba(0, 0, 0, 0.85);
    --gloss-sheen: rgba(232, 213, 163, 0.08);
    --gloss-sheen-hover: rgba(232, 213, 163, 0.14);
    --matte-overlay: rgba(201, 168, 108, 0.02);

    --font-display: "Cormorant Garamond", "Times New Roman", Georgia, serif;
    --font-ui: "Syne", "Helvetica Neue", system-ui, sans-serif;
    --font-data: "JetBrains Mono", ui-monospace, monospace;

    --radius-atelier: 2px;
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Global type & atmosphere ───────────────────────────── */
html {
    background: var(--bg) !important;
}

body {
    font-family: var(--font-ui) !important;
    color: var(--text) !important;
    background:
        radial-gradient(1200px 700px at 12% -10%, rgba(201, 168, 108, 0.07), transparent 55%),
        radial-gradient(900px 600px at 95% 20%, rgba(138, 112, 64, 0.05), transparent 50%),
        var(--bg) !important;
    letter-spacing: -0.01em;
}

/* Film grain + subtle gold dust overlay */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9998;
    pointer-events: none;
    opacity: 0.045;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 180px 180px;
}

/* Ambient cursor light (driven by experience.js) */
#ambientCursor {
    position: fixed;
    width: 480px;
    height: 480px;
    margin: -240px 0 0 -240px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 2;
    background: radial-gradient(circle, rgba(201, 168, 108, 0.12) 0%, rgba(201, 168, 108, 0.03) 40%, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
    mix-blend-mode: screen;
    will-change: transform;
}

body.is-pointer-fine #ambientCursor.is-active {
    opacity: 1;
}

/* ── Hero: editorial wordmark + atmosphere plate ────────── */
.hero .header {
    background: #000;
}

.hero-atmosphere {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(ellipse 70% 55% at 50% 42%, rgba(201, 168, 108, 0.14), transparent 62%),
        linear-gradient(180deg, rgba(3, 3, 3, 0.05) 0%, rgba(3, 3, 3, 0.45) 50%, #030303 100%),
        url("/assets/atmosphere/hero-monolith.jpg") center 40% / cover no-repeat;
    opacity: 0.72;
    pointer-events: none;
    transform: scale(1.04);
    transition: transform 0.8s var(--ease-out-expo), opacity 0.6s ease;
}

/* Vault frame on hero — starts BELOW the nav so no line crosses the pill */
.hero .header::before {
    content: "";
    position: absolute;
    top: clamp(64px, 9vh, 88px);
    left: clamp(16px, 3vw, 36px);
    right: clamp(16px, 3vw, 36px);
    bottom: clamp(16px, 3vw, 36px);
    border: 1px solid rgba(201, 168, 108, 0.16);
    border-top: none;
    pointer-events: none;
    z-index: 5;
    box-shadow: inset 0 0 80px rgba(201, 168, 108, 0.04);
}

.hero .header::after {
    content: "";
    position: absolute;
    top: clamp(72px, 10vh, 96px);
    left: clamp(22px, 3.4vw, 44px);
    right: clamp(22px, 3.4vw, 44px);
    bottom: clamp(22px, 3.4vw, 44px);
    border: 1px solid rgba(201, 168, 108, 0.06);
    border-top: none;
    pointer-events: none;
    z-index: 5;
}

/* Ensure floating nav sits cleanly above hero chrome */
.floating-nav {
    z-index: 30 !important;
    isolation: isolate;
}

.hero-tesseract-wrap {
    mix-blend-mode: screen;
    opacity: 0.78;
}

.header-banner-title {
    width: min(94vw, 980px) !important;
    max-width: 980px !important;
    gap: clamp(18px, 2.5vw, 32px) !important;
    /* keep transform origin for parallax composition */
    will-change: transform, opacity;
}

.header-banner-title-text {
    font-family: var(--font-display) !important;
    font-weight: 500 !important;
    /* Fit full wordmark: tighter track + capped size */
    font-size: clamp(2.5rem, 8vw, 5.75rem) !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase;
    color: var(--text) !important;
    text-shadow:
        0 0 40px rgba(201, 168, 108, 0.18),
        0 2px 40px rgba(0, 0, 0, 0.6) !important;
    line-height: 0.95 !important;
    white-space: nowrap;
    overflow: visible;
    max-width: none !important;
    width: auto !important;
}

/* Defeat legacy Orbitron mega-sizes that clipped the wordmark */
@media (min-width: 1024px) {
    .header-banner-title {
        width: min(94vw, 980px) !important;
        max-width: 980px !important;
    }
    .header-banner-title-text {
        font-size: clamp(3rem, 6.5vw, 5.5rem) !important;
        letter-spacing: 0.1em !important;
        line-height: 0.95 !important;
    }
}
@media (min-width: 1440px) {
    .header-banner-title-text {
        font-size: clamp(3.75rem, 5.5vw, 6rem) !important;
        letter-spacing: 0.1em !important;
    }
}

.header-banner-subtitle {
    font-family: var(--font-data) !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.28em !important;
    text-transform: uppercase;
    color: var(--gold-soft) !important;
    opacity: 0.9;
}
@media (max-width: 600px) {
    .header-banner-subtitle {
        width: 100% !important;
        max-width: 100% !important;
        margin: 18px 0 0 !important;
    }
}

.hero-microcopy {
    font-family: var(--font-ui);
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    color: var(--text-tertiary);
    margin: 0;
    max-width: 36ch;
    text-align: center;
    line-height: 1.5;
}

.header-banner-subtitle::before {
    background: var(--gold) !important;
    opacity: 0.7;
}

.hero-eyebrow {
    font-family: var(--font-data);
    font-size: 0.65rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    opacity: 0.85;
}

.hero-eyebrow::before {
    content: "";
    width: 28px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold));
}

.hero-cta-row {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 12px !important;
    width: 100%;
    max-width: 540px;
    margin: 0 auto;
    position: relative;
    z-index: 3;
}

/* Social proof — bottom-left; scroll indicator stays center */
.hero-as-seen {
    position: absolute !important;
    left: clamp(16px, 3vw, 40px) !important;
    right: auto !important;
    bottom: clamp(20px, 3.5vh, 44px) !important;
    top: auto !important;
    transform: none !important;
    z-index: 6 !important;
    width: auto !important;
    max-width: min(46vw, 280px);
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    pointer-events: auto !important;
}

.hero-cta-primary,
.hero-cta-secondary {
    font-family: var(--font-ui) !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase;
    font-size: 0.72rem !important;
    border-radius: var(--radius-atelier) !important;
    transition: transform 0.35s var(--ease-out-expo), box-shadow 0.35s ease, background 0.25s ease, border-color 0.25s ease !important;
    white-space: nowrap;
    padding: 0.85rem 1.35rem !important;
}

.hero-cta-primary {
    background: linear-gradient(135deg, #e8d5a3 0%, #c9a86c 48%, #a8894f 100%) !important;
    color: #1a140c !important;
    border: 1px solid rgba(232, 213, 163, 0.5) !important;
    box-shadow: 0 0 0 1px rgba(201, 168, 108, 0.15), 0 8px 32px rgba(201, 168, 108, 0.2);
}

.hero-cta-primary:hover {
    background: linear-gradient(135deg, #f0e4c0 0%, #d4b57a 100%) !important;
    box-shadow: 0 0 0 1px rgba(232, 213, 163, 0.35), 0 12px 40px rgba(201, 168, 108, 0.35) !important;
    transform: translateY(-2px);
}

.hero-cta-secondary {
    background: transparent !important;
    color: var(--gold-soft) !important;
    border: 1px solid rgba(201, 168, 108, 0.35) !important;
    backdrop-filter: blur(8px);
}

.hero-cta-secondary:hover {
    border-color: var(--gold-soft) !important;
    background: rgba(201, 168, 108, 0.08) !important;
    color: #fff !important;
}

.floating-nav {
    backdrop-filter: blur(16px) saturate(1.2);
    background: rgba(8, 6, 4, 0.45) !important;
    border: 1px solid rgba(201, 168, 108, 0.15) !important;
    border-radius: 999px !important;
}

.floating-nav-link {
    font-family: var(--font-data) !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.16em !important;
    color: var(--text-secondary) !important;
}

.floating-nav-link:hover {
    color: var(--gold-soft) !important;
}

.hero-scroll-hint-line {
    background: linear-gradient(180deg, var(--gold), transparent) !important;
}

.hero-as-seen-label {
    color: var(--gold) !important;
    opacity: 0.7;
}

/* Magnetic button shell */
.magnetic {
    display: inline-flex;
    will-change: transform;
}

/* ── Content shell ──────────────────────────────────────── */
.content {
    background:
        linear-gradient(180deg, rgba(3, 3, 3, 0.97) 0%, #030303 40px),
        var(--bg) !important;
}

.content::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 420px;
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(201, 168, 108, 0.06), transparent 70%),
        url("/assets/atmosphere/vault-glow.jpg") center top / cover no-repeat;
    opacity: 0.18;
    pointer-events: none;
    mask-image: linear-gradient(180deg, #000 0%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 100%);
}

.app-container {
    position: relative;
}

/* Section label rail */
.section-kicker {
    font-family: var(--font-data);
    font-size: 0.62rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.section-kicker::after {
    content: "";
    flex: 1;
    max-width: 120px;
    height: 1px;
    background: linear-gradient(90deg, var(--gold), transparent);
    opacity: 0.45;
}

/* ── Panels: glass vault cards ──────────────────────────── */
.panel,
.chart-container,
.instructions-panel,
.affordability-banner,
.ai-analysis-panel,
.app-launch-section {
    background: linear-gradient(155deg, rgba(18, 15, 12, 0.92) 0%, rgba(8, 7, 6, 0.96) 100%) !important;
    border: 1px solid var(--border) !important;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.5),
        0 24px 48px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(232, 213, 163, 0.06) !important;
    border-radius: var(--radius-atelier) !important;
    position: relative;
    overflow: hidden;
}

.panel::before,
.chart-container::before,
.affordability-banner::before,
.ai-analysis-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 5%, rgba(232, 213, 163, 0.35) 50%, transparent 95%);
    pointer-events: none;
    z-index: 1;
}

.panel-title,
.chart-title,
.financial-planning-title,
.ai-analysis-title,
.affordability-title,
.instructions-title span {
    font-family: var(--font-display) !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em !important;
    color: var(--text) !important;
}

.chart-title {
    font-size: clamp(1.35rem, 2.4vw, 1.85rem) !important;
}

.chart-description,
.form-helper,
.section-subtitle {
    font-family: var(--font-ui) !important;
    color: var(--text-tertiary) !important;
}

/* ── Affordability banner: living status surface ────────── */
.affordability-banner {
    border-color: rgba(201, 168, 108, 0.22) !important;
}

.affordability-banner.is-healthy {
    box-shadow:
        0 0 0 1px rgba(125, 186, 138, 0.12),
        0 24px 48px rgba(0, 0, 0, 0.45),
        inset 0 0 80px rgba(125, 186, 138, 0.04) !important;
}

.affordability-banner.is-strained {
    box-shadow:
        0 0 0 1px rgba(224, 122, 106, 0.15),
        0 24px 48px rgba(0, 0, 0, 0.45),
        inset 0 0 80px rgba(224, 122, 106, 0.05) !important;
}

.affordability-title {
    font-size: clamp(1.6rem, 3vw, 2.35rem) !important;
    line-height: 1.15 !important;
}

.core-metric {
    background:
        radial-gradient(ellipse 90% 70% at 10% 0%, rgba(201, 168, 108, 0.08), transparent 55%),
        rgba(0, 0, 0, 0.4) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-atelier) !important;
    position: relative;
    transition: border-color 0.35s ease, transform 0.4s var(--ease-out-expo), box-shadow 0.35s ease;
    overflow: hidden;
}

.core-metric::after {
    content: "";
    position: absolute;
    top: 10px;
    right: 10px;
    width: 18px;
    height: 18px;
    border-top: 1px solid rgba(201, 168, 108, 0.35);
    border-right: 1px solid rgba(201, 168, 108, 0.35);
    opacity: 0.7;
    pointer-events: none;
}

.core-metric:hover {
    border-color: var(--border-light) !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4), 0 0 24px rgba(201, 168, 108, 0.08);
}

.core-metric-label,
.mini-metric-label {
    font-family: var(--font-data) !important;
    font-size: 0.62rem !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase;
    color: var(--text-muted) !important;
}

.core-metric-value,
.mini-metric-value,
.payment-estimate-value {
    font-family: var(--font-data) !important;
    font-variant-numeric: tabular-nums;
    color: var(--gold-soft) !important;
    letter-spacing: -0.02em;
}

.core-metric-value {
    font-size: clamp(1.6rem, 2.8vw, 2.25rem) !important;
    font-weight: 500 !important;
}

.core-metric-status,
.mini-metric-trend {
    font-family: var(--font-ui) !important;
    font-size: 0.75rem !important;
    color: var(--text-tertiary) !important;
}

/* Animated value flash on update */
.metric-tick {
    animation: metricFlash 0.55s var(--ease-out-expo);
}

@keyframes metricFlash {
    0% { color: #fff; text-shadow: 0 0 18px rgba(232, 213, 163, 0.65); }
    100% { color: var(--gold-soft); text-shadow: none; }
}

/* ── Mixing board / budget items ────────────────────────── */
.budget-item {
    background: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-atelier) !important;
    transition: border-color 0.3s ease, box-shadow 0.35s ease, transform 0.35s var(--ease-out-expo) !important;
}

.budget-item:hover {
    border-color: rgba(201, 168, 108, 0.28) !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(201, 168, 108, 0.06);
}

.budget-item.income-item {
    border-color: rgba(201, 168, 108, 0.35) !important;
    background:
        linear-gradient(135deg, rgba(201, 168, 108, 0.1) 0%, rgba(0, 0, 0, 0.5) 60%) !important;
}

.budget-item-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    opacity: 0.9;
    filter: drop-shadow(0 0 6px rgba(201, 168, 108, 0.25));
}

.budget-item-top {
    display: flex !important;
    align-items: center;
    gap: 10px;
}

.budget-amount-input,
.income-amount-input,
.form-input {
    font-family: var(--font-data) !important;
    color: var(--text) !important;
    background: rgba(0, 0, 0, 0.45) !important;
    border-color: var(--border) !important;
}

.budget-amount-input:focus,
.form-input:focus {
    border-color: var(--border-focus) !important;
    box-shadow: 0 0 0 3px rgba(201, 168, 108, 0.12) !important;
}

.legend-color.income {
    background: linear-gradient(180deg, var(--gold-soft), var(--gold-deep)) !important;
}

.legend-color.budget {
    background: linear-gradient(180deg, rgba(244, 239, 230, 0.55), rgba(244, 239, 230, 0.15)) !important;
}

.toggle-switch.enabled {
    background: linear-gradient(90deg, var(--gold-deep), var(--gold)) !important;
}

/* ── Buttons ────────────────────────────────────────────── */
.btn-primary,
.email-signup-button,
.ai-rerun-button {
    font-family: var(--font-ui) !important;
    font-weight: 600 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase;
    background: linear-gradient(135deg, #e8d5a3, #c9a86c) !important;
    color: #1a140c !important;
    border: 1px solid rgba(232, 213, 163, 0.4) !important;
    border-radius: var(--radius-atelier) !important;
    transition: transform 0.3s var(--ease-out-expo), box-shadow 0.3s ease !important;
}

.btn-primary:hover,
.email-signup-button:hover,
.ai-rerun-button:hover {
    box-shadow: 0 8px 28px rgba(201, 168, 108, 0.3) !important;
    transform: translateY(-1px);
}

.btn-secondary,
.instructions-toggle {
    font-family: var(--font-ui) !important;
    letter-spacing: 0.08em !important;
    border: 1px solid var(--border-light) !important;
    color: var(--gold-soft) !important;
    background: rgba(201, 168, 108, 0.04) !important;
    border-radius: var(--radius-atelier) !important;
}

.btn-secondary:hover,
.instructions-toggle:hover {
    background: rgba(201, 168, 108, 0.1) !important;
    border-color: var(--gold) !important;
}

/* ── Charts ─────────────────────────────────────────────── */
.chart-wrapper,
.budget-pie-chart-stage,
.treemap-container {
    background: rgba(0, 0, 0, 0.35) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-atelier) !important;
}

.chart-container {
    transition: transform 0.5s var(--ease-out-expo), border-color 0.35s ease;
}

.chart-container.is-inview {
    border-color: rgba(201, 168, 108, 0.22) !important;
}

/* Interactive chart scrubber chrome */
.chart-scrub-hud {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 0.75rem;
    padding: 0.75rem 1rem;
    background:
        linear-gradient(90deg, rgba(201, 168, 108, 0.08), transparent 40%),
        rgba(0, 0, 0, 0.45);
    border: 1px solid var(--border);
    border-radius: var(--radius-atelier);
    font-family: var(--font-data);
    min-height: 3rem;
    box-shadow: inset 0 1px 0 rgba(232, 213, 163, 0.06);
}

.chart-scrub-hud .scrub-label {
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.chart-scrub-hud .scrub-value {
    font-size: 1.05rem;
    color: var(--gold-soft);
    font-variant-numeric: tabular-nums;
}

.chart-scrub-hud .scrub-meta {
    font-size: 0.68rem;
    color: var(--text-tertiary);
    letter-spacing: 0.06em;
}

/* ── Major purchase cards with icon marks ───────────────── */
#carPanel .panel-title,
#housePanel .panel-title {
    gap: 0.65rem;
}

.panel-icon {
    width: 32px;
    height: 32px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.35rem;
    filter: drop-shadow(0 0 8px rgba(201, 168, 108, 0.3));
}

.payment-estimate {
    background: linear-gradient(90deg, rgba(201, 168, 108, 0.1), transparent) !important;
    border-left: 2px solid var(--gold) !important;
    border-radius: 0 var(--radius-atelier) var(--radius-atelier) 0 !important;
}

/* ── AI panel ───────────────────────────────────────────── */
.ai-analysis-panel {
    background:
        radial-gradient(ellipse 70% 50% at 100% 0%, rgba(201, 168, 108, 0.08), transparent 55%),
        linear-gradient(155deg, rgba(18, 15, 12, 0.95), rgba(8, 7, 6, 0.98)) !important;
}

.ai-analysis-title {
    font-size: clamp(1.4rem, 2.5vw, 1.9rem) !important;
}

.ai-grade-letter {
    font-family: var(--font-display) !important;
    color: var(--gold-soft) !important;
    text-shadow: 0 0 30px rgba(201, 168, 108, 0.35);
}

.ai-grade-bar {
    background: linear-gradient(90deg, var(--gold-deep), var(--gold-soft)) !important;
}

.ai-insight-item {
    border: 1px solid var(--border) !important;
    background: rgba(0, 0, 0, 0.3) !important;
    border-radius: var(--radius-atelier) !important;
    transition: border-color 0.3s ease, transform 0.35s var(--ease-out-expo);
}

.ai-insight-item:hover {
    border-color: rgba(201, 168, 108, 0.3) !important;
    transform: translateX(4px);
}

.ai-insight-icon {
    color: var(--gold) !important;
}

.coming-soon-badge {
    background: rgba(201, 168, 108, 0.12) !important;
    color: var(--gold-soft) !important;
    border: 1px solid rgba(201, 168, 108, 0.25) !important;
    font-family: var(--font-data) !important;
    letter-spacing: 0.14em !important;
}

/* ── App launch + footer ────────────────────────────────── */
.app-launch-section {
    background:
        linear-gradient(120deg, rgba(12, 10, 8, 0.95), rgba(8, 7, 6, 0.9)),
        url("/assets/atmosphere/vault-glow.jpg") right center / cover no-repeat !important;
    background-blend-mode: normal, soft-light !important;
}

.app-launch-title {
    font-family: var(--font-display) !important;
    font-weight: 500 !important;
    font-size: clamp(1.8rem, 3.5vw, 2.75rem) !important;
    letter-spacing: 0.02em !important;
}

.app-launch-badge {
    font-family: var(--font-data) !important;
    color: var(--gold) !important;
    border-color: rgba(201, 168, 108, 0.3) !important;
}

.app-launch-phone {
    border-color: rgba(201, 168, 108, 0.25) !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 40px rgba(201, 168, 108, 0.08) !important;
}

.app-launch-phone-brand {
    font-family: var(--font-display) !important;
    letter-spacing: 0.2em !important;
    color: var(--gold-soft) !important;
}

.site-footer {
    border-top: 1px solid var(--border) !important;
}

.footer-brand {
    font-family: var(--font-display) !important;
    letter-spacing: 0.18em !important;
    font-size: 1.5rem !important;
    color: var(--gold-soft) !important;
}

.footer-col-title {
    font-family: var(--font-data) !important;
    letter-spacing: 0.16em !important;
    color: var(--gold) !important;
    font-size: 0.65rem !important;
}

.footer-nav a:hover,
.footer-social-btn:hover {
    color: var(--gold-soft) !important;
}

/* ── Stable document plane (no scroll opacity / phase) ─── */
.reveal-block,
.reveal-block.is-revealed {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
    #ambientCursor { display: none !important; }
    body::before { opacity: 0.02; }
}

/* ═══════════════════════════════════════════════════════════
   RIGID JOURNEY + REPORT STUDIO — final system layer
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
    html.stages-armed:not(.bb-smooth) {
        scroll-snap-type: y mandatory !important;
    }
    html.stages-armed .stage-panel.stage-snap {
        scroll-snap-align: start !important;
        scroll-snap-stop: always !important;
    }
}

/* Final scroll physics: native momentum first, proximity settle second.
   Mandatory snap competes with high-resolution trackpads and manifests as a
   back-and-forth shudder while the 3D camera is still interpolating. */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
    html.stages-armed {
        scroll-snap-type: y proximity !important;
        scroll-behavior: auto !important;
    }
    html.stages-armed .stage-panel.stage-snap {
        scroll-snap-stop: normal !important;
    }
}

.journey-film {
    width: 320px !important;
    left: 24px !important;
    bottom: 24px !important;
}
.journey-film-inner {
    grid-template-columns: 44px 1px minmax(0, 1fr) !important;
    min-height: 58px;
    padding: 10px 12px !important;
    border: 1px solid rgba(201, 168, 108, 0.22) !important;
    background: rgba(4, 4, 4, 0.88) !important;
    backdrop-filter: blur(20px) !important;
}
.journey-film-idx {
    font-size: 1.35rem !important;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.journey-film-title {
    font-size: 0.66rem !important;
    letter-spacing: 0.2em !important;
}
.journey-film-meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.journey-film-progress {
    height: 3px !important;
    border: 1px solid rgba(201, 168, 108, 0.12);
    border-top: 0;
}
.stage-rail.journey-spine {
    width: 25px !important;
    padding: 14px 7px !important;
    border: 1px solid rgba(201, 168, 108, 0.16) !important;
    border-radius: 0 !important;
    background: rgba(4, 4, 4, 0.82) !important;
}

#stage-ai .ai-stage-layout {
    grid-template-columns: minmax(280px, 0.82fr) minmax(440px, 1.35fr) !important;
    gap: 12px !important;
}
#stage-ai .ai-analysis-preview,
#stage-ai .ai-report-studio {
    border: 1px solid rgba(201, 168, 108, 0.17) !important;
    background: rgba(5, 5, 5, 0.78) !important;
}
#stage-ai .ai-report-studio {
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    overflow: hidden !important;
}
.ai-report-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px !important;
    border-bottom: 1px solid rgba(201, 168, 108, 0.15) !important;
}
.ai-report-header .section-kicker { margin-bottom: 3px; }
.ai-report-status {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-data);
    font-size: 0.55rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.ai-report-status i {
    width: 6px;
    height: 6px;
    background: var(--gold-soft);
    box-shadow: 0 0 10px rgba(232, 213, 163, 0.5);
}
#stage-ai .ai-report-index {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid rgba(201, 168, 108, 0.14) !important;
}
#stage-ai .ai-report-index .ai-chat-prompt-btn {
    min-height: 38px;
    padding: 7px 9px !important;
    border: 0 !important;
    border-right: 1px solid rgba(201, 168, 108, 0.11) !important;
    border-bottom: 1px solid rgba(201, 168, 108, 0.11) !important;
    border-radius: 0 !important;
    text-align: left;
    font-family: var(--font-data);
    font-size: 0.59rem !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
#stage-ai .ai-report-output {
    display: block !important;
    padding: 12px !important;
    overflow: auto !important;
    min-height: 0 !important;
    background:
        linear-gradient(rgba(201,168,108,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(201,168,108,.035) 1px, transparent 1px) !important;
    background-size: 28px 28px !important;
}
.ai-report-document {
    display: block !important;
    width: 100%;
    max-width: none !important;
    padding: 14px !important;
    border: 1px solid rgba(201, 168, 108, 0.16) !important;
    background: rgba(5, 5, 5, 0.94) !important;
    box-sizing: border-box;
}
.ai-report-doc-head,
.ai-report-query {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-family: var(--font-data);
    font-size: 0.52rem;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    text-transform: uppercase;
}
.ai-report-doc-head {
    padding-bottom: 9px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(201, 168, 108, 0.13);
}
.ai-report-query {
    padding: 7px 9px;
    margin-bottom: 8px;
    border-left: 2px solid var(--gold);
    background: rgba(201, 168, 108, 0.06);
}
.ai-report-query strong { color: var(--gold-soft); font-weight: 500; }
.ai-report-document h3 {
    margin: 0 0 8px;
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 2.5vw, 2rem);
    font-weight: 500;
}
.ai-report-document > p,
.ai-report-document .ai-chat-text {
    font-size: 0.75rem !important;
    line-height: 1.58 !important;
    color: var(--text-secondary);
}
.ai-report-document .ai-chat-bubble {
    max-width: none !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}
.ai-report-document.is-streaming .ai-chat-bubble:empty::before,
.ai-report-document.is-streaming .ai-chat-text:empty::before {
    content: "GENERATING ANALYSIS / RECONCILING PLAN SIGNALS";
    display: block;
    padding: 12px 0;
    font-family: var(--font-data);
    font-size: 0.58rem;
    letter-spacing: 0.12em;
    color: var(--gold-soft);
    animation: reportSignal 1.2s steps(2, end) infinite;
}
@keyframes reportSignal { 50% { opacity: 0.35; } }
.ai-report-empty-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 7px;
    margin-top: 16px;
}
.ai-report-empty-grid i {
    height: 58px;
    border: 1px solid rgba(201, 168, 108, 0.11);
    background: linear-gradient(135deg, rgba(201,168,108,.06), transparent);
}
.ai-report-footer { padding: 7px 12px !important; }

@media (max-width: 900px) {
    .journey-film { width: min(280px, calc(100vw - 64px)) !important; left: 12px !important; }
    #stage-ai .ai-stage-layout { grid-template-columns: 1fr !important; }
    #stage-ai .ai-report-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #stage-ai .ai-report-studio { min-height: 620px !important; }
}

/* App + Outro use the same analytical-stage frame, header baseline and shell. */
#stage-app .app-stage-card,
#stage-outro .outro-stage-card {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    gap: 10px !important;
    padding: clamp(14px, 2.2vh, 22px) clamp(14px, 2vw, 28px) 104px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    border: none !important;
    border-radius: 0 !important;
    background: linear-gradient(180deg, rgba(12, 10, 8, 0.35), rgba(6, 5, 4, 0.2)) !important;
}
#stage-app .app-stage-card {
    /* Soft gold wash behind the device + QR composition */
    background:
        radial-gradient(ellipse 42% 55% at 22% 55%, rgba(201, 168, 108, 0.09), transparent 60%),
        radial-gradient(ellipse 38% 50% at 78% 48%, rgba(201, 168, 108, 0.05), transparent 55%),
        linear-gradient(180deg, rgba(12, 10, 8, 0.35), rgba(6, 5, 4, 0.2)) !important;
}
#stage-app .app-stage-head,
#stage-outro .outro-stage-head {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 3px 24px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(201, 168, 108, 0.14);
}
#stage-app .app-stage-head .section-kicker,
#stage-outro .outro-stage-head .section-kicker,
#stage-app .app-stage-head .stage-dash-title,
#stage-outro .outro-stage-head .stage-dash-title {
    grid-column: 1;
}
#stage-app .app-stage-head .stage-dash-lede,
#stage-outro .outro-stage-head .stage-dash-lede {
    grid-column: 2;
    grid-row: 1 / 3;
    max-width: 44ch;
    text-align: right;
    align-self: center;
}
/* App stage body: flat 2-column — device + QR (no nested bento) */
#stage-app .app-mobile-layout {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr) !important;
    gap: clamp(20px, 3.5vw, 48px) !important;
    align-items: center !important;
    width: 100% !important;
}
#stage-outro .outro-stage-inner {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto auto auto !important;
    gap: 8px !important;
    padding: 0 !important;
}
#stage-outro .footer-outro-brand {
    display: grid !important;
    grid-template-columns: auto minmax(240px, 1fr);
    align-items: end;
    gap: 20px 28px;
    padding-bottom: 8px !important;
    border-bottom: 1px solid rgba(201, 168, 108, 0.1);
}
#stage-outro .footer-pitch { margin: 0 !important; text-align: right; font-size: 0.8125rem !important; }
#stage-outro .footer-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
    align-items: stretch !important;
    min-height: 0 !important;
}
#stage-outro .footer-col {
    padding: 10px 12px !important;
    border: 1px solid rgba(201, 168, 108, 0.13) !important;
    background: rgba(0, 0, 0, 0.22) !important;
    min-height: 0 !important;
}
#stage-outro .footer-nav {
    gap: 6px !important;
}
#stage-outro .footer-nav a {
    line-height: 1.3;
    max-width: 100%;
    font-size: 0.7rem;
}
#stage-outro .footer-brain-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 12px;
    margin: 0;
    padding: 8px 12px;
    border: 1px solid rgba(201, 168, 108, 0.12);
    background: rgba(201, 168, 108, 0.04);
}
#stage-outro .footer-brain-kicker {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(232, 213, 163, 0.72);
    flex-shrink: 0;
}
#stage-outro .footer-brain-line {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.65rem;
    letter-spacing: 0.02em;
    line-height: 1.45;
    color: rgba(244, 239, 230, 0.48);
}
#stage-outro .footer-disclaimer {
    margin: 0 !important;
    padding-top: 6px !important;
    border-top: 1px solid rgba(232, 213, 163, 0.08);
    font-size: 10px;
    color: rgba(244, 239, 230, 0.35);
    text-align: left;
    line-height: 1.45;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}

@media (max-width: 900px) {
    #stage-app .app-stage-card,
    #stage-outro .outro-stage-card { padding-bottom: 72px !important; }
    #stage-app .app-stage-head,
    #stage-outro .outro-stage-head { grid-template-columns: 1fr; }
    #stage-app .app-stage-head .stage-dash-lede,
    #stage-outro .outro-stage-head .stage-dash-lede {
        grid-column: 1;
        grid-row: auto;
        text-align: left;
    }
    #stage-outro .footer-outro-brand { grid-template-columns: 1fr !important; }
    #stage-outro .footer-grid { grid-template-columns: 1fr 1fr !important; }
    #stage-outro .footer-pitch { text-align: left; }
}

/* ── State morph: affordability banner ──────────────────── */
.affordability-banner {
    transition:
        box-shadow 0.6s var(--ease-out-expo),
        border-color 0.6s ease,
        background 0.6s ease !important;
}

.affordability-title {
    transition: color 0.45s ease, letter-spacing 0.45s ease;
}

.affordability-banner.is-healthy .affordability-title {
    color: #c8e6cf !important;
}

.affordability-banner.is-strained .affordability-title {
    color: #f0b4aa !important;
}

/* ── Tables ─────────────────────────────────────────────── */
table th {
    font-family: var(--font-data) !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase;
    font-size: 0.65rem !important;
    color: var(--gold) !important;
    border-bottom-color: var(--border) !important;
}

table td {
    font-family: var(--font-data) !important;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary) !important;
}

table tbody tr:hover td {
    background: rgba(201, 168, 108, 0.05) !important;
}

/* ── Decorative vault corner marks ──────────────────────── */
.vault-corners {
    position: relative;
}

.vault-corners::after {
    content: "";
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(201, 168, 108, 0.08);
    pointer-events: none;
    border-radius: 1px;
    z-index: 0;
}

/* ── Custom scrollbar ───────────────────────────────────── */
html::-webkit-scrollbar {
    width: 8px;
}
html::-webkit-scrollbar-track {
    background: #050403;
}
html::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--gold-deep), rgba(201, 168, 108, 0.4));
    border-radius: 4px;
}

/* ── Icon strip in financial planning ───────────────────── */
.atelier-icon-rail {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 1.25rem;
    padding: 0.85rem 1rem;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--border);
    border-radius: var(--radius-atelier);
}

.atelier-icon-rail img {
    width: 36px;
    height: 36px;
    opacity: 0.85;
    transition: opacity 0.25s ease, transform 0.35s var(--ease-spring), filter 0.25s ease;
    filter: drop-shadow(0 0 0 transparent);
}

.atelier-icon-rail img:hover {
    opacity: 1;
    transform: translateY(-3px) scale(1.08);
    filter: drop-shadow(0 0 10px rgba(201, 168, 108, 0.4));
}

/* ── Notification ───────────────────────────────────────── */
.notification {
    font-family: var(--font-ui) !important;
    background: rgba(12, 10, 8, 0.95) !important;
    border: 1px solid rgba(201, 168, 108, 0.35) !important;
    color: var(--gold-soft) !important;
    backdrop-filter: blur(12px);
}

/* ── Modal ──────────────────────────────────────────────── */
.modal-content {
    background: #0c0a08 !important;
    border: 1px solid rgba(201, 168, 108, 0.25) !important;
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.7), 0 0 40px rgba(201, 168, 108, 0.08) !important;
}

.modal-header h2 {
    font-family: var(--font-display) !important;
    color: var(--gold-soft) !important;
}

/* ── Mobile refinements ─────────────────────────────────── */
@media (max-width: 768px) {
    .header-banner-title-text {
        letter-spacing: 0.08em !important;
    }

    .core-metric-value {
        font-size: 1.45rem !important;
    }

    .atelier-icon-rail {
        justify-content: center;
    }
}

/* ── Pass 2 enrichments ─────────────────────────────────── */
.chart-title,
.affordability-title,
.financial-planning-title,
.ai-analysis-title {
    position: relative;
}

.chart-container .chart-title::after,
.financial-planning-title::after {
    content: "";
    display: block;
    width: min(100%, 220px);
    height: 1px;
    margin-top: 0.65rem;
    background: linear-gradient(90deg, var(--gold), transparent);
    opacity: 0.55;
}

/* Donut center glow */
.budget-pie-chart-stage {
    box-shadow: inset 0 0 60px rgba(201, 168, 108, 0.06) !important;
}

/* Mixing board income glow pulse subtle */
.budget-item.income-item {
    box-shadow: 0 0 0 1px rgba(201, 168, 108, 0.12), inset 0 0 40px rgba(201, 168, 108, 0.04) !important;
}

/* Floating nav gold ring on hover */
.floating-nav:hover {
    border-color: rgba(201, 168, 108, 0.35) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 24px rgba(201, 168, 108, 0.1);
}

/* Content top hairline gold */
.content::after {
    content: "";
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(232, 213, 163, 0.35), transparent);
    pointer-events: none;
    z-index: 2;
}

/* Stronger mini metrics */
.mini-metric {
    background: rgba(0, 0, 0, 0.35) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-atelier) !important;
    transition: border-color 0.3s ease, transform 0.35s var(--ease-out-expo);
}

.mini-metric:hover {
    border-color: rgba(201, 168, 108, 0.3) !important;
    transform: translateY(-2px);
}

/* Hero scroll hint — centered bottom (independent of as-seen) */
.hero-scroll-hint {
    left: 50% !important;
    right: auto !important;
    bottom: clamp(28px, 4.5vh, 40px) !important;
    transform: translateX(-50%) !important;
    z-index: 5;
}

/* ── Pass 3: denser, richer, no-ellipsis legends ─────────── */
.budget-pie-legend {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)) !important;
    gap: 10px !important;
    align-content: start;
}

.budget-pie-legend-item {
    min-width: 0 !important;
    padding: 10px 12px !important;
    background: rgba(0, 0, 0, 0.35) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-atelier) !important;
    align-items: flex-start !important;
}

.budget-pie-legend-name {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    font-size: 0.72rem !important;
    line-height: 1.25 !important;
    color: var(--text-secondary) !important;
    font-family: var(--font-ui) !important;
}

.budget-pie-legend-amount {
    color: var(--gold-soft) !important;
    font-family: var(--font-data) !important;
}

.budget-pie-legend-percentage {
    font-family: var(--font-data) !important;
    color: var(--text-muted) !important;
    border: 1px solid var(--border) !important;
    padding: 1px 6px !important;
    border-radius: 2px;
}

/* Affordability denser packing */
.affordability-banner {
    padding: clamp(20px, 2.5vw, 32px) !important;
}

.affordability-header {
    margin-bottom: 1.25rem !important;
}

.affordability-core-metrics {
    gap: 12px !important;
    margin-bottom: 12px !important;
}

.affordability-metrics {
    gap: 12px !important;
}

.affordability-banner .section-kicker {
    margin-bottom: 0.35rem;
}

.affordability-title {
    background: linear-gradient(180deg, #f4efe6 0%, #e8d5a3 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
}

.affordability-banner.is-healthy .affordability-title {
    background: linear-gradient(180deg, #e8f5eb 0%, #a8d4b0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
}

.affordability-banner.is-strained .affordability-title {
    background: linear-gradient(180deg, #fce8e4 0%, #e07a6a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
}

/* Soft gold halo behind affordability title */
.affordability-title-section {
    position: relative;
}

.affordability-title-section::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 40%;
    width: min(520px, 90%);
    height: 120px;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse, rgba(201, 168, 108, 0.12), transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.affordability-title-section > * {
    position: relative;
    z-index: 1;
}

/* Summary cards — vault language */
.summary-grid {
    gap: 12px !important;
}

.summary-card {
    background:
        radial-gradient(ellipse 80% 60% at 0% 0%, rgba(201, 168, 108, 0.08), transparent 55%),
        rgba(0, 0, 0, 0.4) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-atelier) !important;
    box-shadow: inset 0 1px 0 rgba(232, 213, 163, 0.05) !important;
    transition: border-color 0.3s ease, transform 0.35s var(--ease-out-expo);
}

.summary-card:hover {
    border-color: rgba(201, 168, 108, 0.3) !important;
    transform: translateY(-2px);
}

.summary-card-label {
    font-family: var(--font-data) !important;
    font-size: 0.62rem !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase;
    color: var(--text-muted) !important;
}

.summary-card-value {
    font-family: var(--font-data) !important;
    color: var(--gold-soft) !important;
    font-variant-numeric: tabular-nums;
}

/* Mixing board instrument texture */
.mixing-board-container {
    gap: 12px !important;
}

.budget-item {
    position: relative;
}

.budget-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12%;
    bottom: 12%;
    width: 2px;
    background: linear-gradient(180deg, transparent, var(--gold), transparent);
    opacity: 0.35;
    border-radius: 1px;
}

.budget-item.income-item::before {
    opacity: 0.75;
    background: linear-gradient(180deg, var(--gold-soft), var(--gold-deep));
}

.budget-amount-input,
.income-amount-input {
    font-size: 1.35rem !important;
    letter-spacing: -0.02em !important;
}

/* Revealed panels keep a faint gold edge glow as residual energy */
.reveal-block.is-revealed.panel,
.reveal-block.is-revealed.chart-container,
.reveal-block.is-revealed.affordability-banner {
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.5),
        0 24px 48px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(232, 213, 163, 0.06),
        0 0 40px rgba(201, 168, 108, 0.04) !important;
}

/* Hero atmosphere stronger photographic read */
.hero-atmosphere {
    opacity: 0.82 !important;
    filter: saturate(1.15) contrast(1.05);
}

.hero-tesseract-wrap {
    opacity: 0.7 !important;
}

/* Full-width hairline under floating nav */
.floating-nav {
    box-shadow: 0 0 0 1px rgba(201, 168, 108, 0.08), 0 12px 40px rgba(0, 0, 0, 0.35) !important;
}

/* Chart wrapper inner glow */
.chart-wrapper {
    box-shadow: inset 0 0 80px rgba(201, 168, 108, 0.04) !important;
    position: relative;
}

/* Icon rail as instrument strip */
.atelier-icon-rail {
    justify-content: space-between;
    background:
        linear-gradient(90deg, rgba(201, 168, 108, 0.06), transparent 30%, transparent 70%, rgba(201, 168, 108, 0.06)),
        rgba(0, 0, 0, 0.4) !important;
}

.atelier-icon-rail::before {
    content: "CATEGORY MARKS";
    font-family: var(--font-data);
    font-size: 0.55rem;
    letter-spacing: 0.22em;
    color: var(--text-muted);
    width: 100%;
    flex-basis: 100%;
    margin-bottom: 2px;
}

/* ── Theme toggle control ───────────────────────────────── */








/* ── Light mode — Ivory Atelier (parity with dark) ───────────
   Paper ivory · ink · true champagne gold · no muddy browns
   Hero remains cinematic black; dashboard is luminous ivory
   ─────────────────────────────────────────────────────────── */

/* Kill the light/white wash at the bottom of the black hero.
   Dark mode fades hero into --bg (black). Light must NOT fade into ivory. */




/* Clean content top — solid ivory, no seeping wash into hero */



/* Floating nav on dark hero: glass ivory chip */




/* Panels: white porcelain on ivory */



/* Affordability title: ink → champagne (not muddy brown) */




/* Kill hardcoded black metric strips from style.css */




/* Values: luminous gold, not dead brown */




/* Forms */




/* Chart wells: soft white stage */


















/* Hero wordmark on black stage (unchanged cinematic) */


/* Hero frames stay subtle gold on black */


/* Toggle switches / legend colors stay gold */







/* Hide removed hero copy if cached markup reappears */
.hero-eyebrow,
.hero-microcopy {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════
   Precision density — Japanese modular spacing (8px grid)
   High surface utilization · symmetrical · minimal dead air
   ═══════════════════════════════════════════════════════════ */
:root {
    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
    --dash-max: min(1760px, 98vw);
    --dash-gutter: clamp(10px, 1.2vw, 18px);
    --dash-gap: 12px;
}

@media (min-width: 1280px) {
    :root {
        --dash-max: min(1600px, 97vw);
        --dash-gutter: 14px;
        --dash-gap: 12px;
    }
}
@media (min-width: 1440px) {
    :root {
        --dash-max: min(1720px, 97vw);
        --dash-gutter: 16px;
        --dash-gap: 12px;
    }
}
@media (min-width: 1680px) {
    :root {
        --dash-max: min(1840px, 96vw);
        --dash-gutter: 18px;
        --dash-gap: 12px;
    }
}
@media (min-width: 1920px) {
    :root {
        --dash-max: min(1960px, 96vw);
        --dash-gutter: 20px;
        --dash-gap: 12px;
    }
}

/* ── As seen on: brighter, higher contrast ──────────────── */
.hero-as-seen-label {
    color: #f4efe6 !important;
    opacity: 1 !important;
    letter-spacing: 0.22em !important;
    font-weight: 500 !important;
    text-shadow: 0 0 14px rgba(255, 255, 255, 0.35);
}

.hero-as-seen-logo {
    color: #ffffff !important;
    opacity: 1 !important;
    width: 40px !important;
    height: 40px !important;
    filter:
        drop-shadow(0 0 1px rgba(255, 255, 255, 0.9))
        drop-shadow(0 0 8px rgba(255, 255, 255, 0.35));
    transition: color 0.2s ease, transform 0.2s ease, filter 0.2s ease !important;
}

.hero-as-seen-logo:hover {
    color: #e8d5a3 !important;
    filter:
        drop-shadow(0 0 1px rgba(232, 213, 163, 1))
        drop-shadow(0 0 14px rgba(232, 213, 163, 0.65));
    transform: translateY(-1px);
}

.hero-as-seen-logo svg {
    width: 26px !important;
    height: 26px !important;
}

.header-banner-subtitle {
    width: min(750px, calc(100vw - 48px)) !important;
    max-width: calc(100vw - 48px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    line-height: 1.48 !important;
}

/* Flat control language: centered labels, no floating/tilting hover effects. */
.btn,
.ai-rerun-button,
.email-signup-button,
.hero-cta-primary,
.hero-cta-secondary,
.instructions-toggle,
.ai-chat-prompt-btn,
.footer-social-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    vertical-align: middle !important;
    line-height: 1.1 !important;
    border-radius: 2px !important;
    transform: none !important;
    box-shadow: none !important;
}
.btn:hover,
.ai-rerun-button:hover,
.email-signup-button:hover,
.hero-cta-primary:hover,
.hero-cta-secondary:hover,
.instructions-toggle:hover,
.ai-chat-prompt-btn:hover,
.footer-social-btn:hover {
    transform: none !important;
    box-shadow: none !important;
    filter: none !important;
}

#stage-ai .ai-service-strip {
    min-height: 34px;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 7px 10px !important;
}
#stage-ai .ai-service-strip .pollinations-key-status {
    margin: 0 !important;
    text-align: right;
}

/* ── App mobile: iOS device + large QR ───────────────────── */
#stage-app .app-device-col {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    width: 100%;
}

#stage-app .ios-device {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: min(100%, 320px);
}

#stage-app .ios-device-bezel {
    position: relative;
    width: min(100%, 300px);
    aspect-ratio: 9 / 19.2;
    border-radius: 42px;
    padding: 11px;
    box-sizing: border-box;
    background:
        linear-gradient(160deg, #2a2620 0%, #12100e 40%, #0a0908 100%);
    border: 1px solid rgba(232, 213, 163, 0.22);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.7),
        0 28px 64px rgba(0, 0, 0, 0.65),
        0 0 48px rgba(201, 168, 108, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

#stage-app .ios-device-island {
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    width: 28%;
    height: 22px;
    border-radius: 999px;
    background: #050403;
    z-index: 4;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

#stage-app .ios-device-screen {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 32px;
    overflow: hidden;
    background: #050403;
}

#stage-app .ios-device-wallpaper {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    opacity: 0.42;
    filter: saturate(0.85) contrast(1.05);
}

#stage-app .ios-device-chrome {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 36px 14px 18px;
    box-sizing: border-box;
    background:
        linear-gradient(180deg, rgba(8, 6, 4, 0.55) 0%, rgba(5, 4, 3, 0.78) 48%, rgba(3, 2, 2, 0.92) 100%);
}

#stage-app .ios-status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-data), "JetBrains Mono", monospace;
    font-size: 0.58rem;
    letter-spacing: 0.06em;
    color: rgba(244, 239, 230, 0.7);
    margin-bottom: 14px;
    padding: 0 4px;
}

#stage-app .ios-status-icons {
    letter-spacing: 0.12em;
    opacity: 0.55;
    font-size: 0.45rem;
}

#stage-app .ios-app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 18px;
}

#stage-app .ios-app-mark {
    font-family: var(--font-ui), Syne, system-ui, sans-serif;
    font-weight: 800;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    color: #f4efe6;
}

#stage-app .ios-app-badge {
    font-family: var(--font-data), monospace;
    font-size: 0.52rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(232, 213, 163, 0.85);
    border: 1px solid rgba(201, 168, 108, 0.28);
    padding: 4px 8px;
    border-radius: 999px;
}

#stage-app .ios-app-hero {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 14px;
    border: 1px solid rgba(201, 168, 108, 0.2);
    background: rgba(0, 0, 0, 0.35);
    border-radius: 14px;
    margin-bottom: 12px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

#stage-app .ios-app-label {
    font-family: var(--font-data), monospace;
    font-size: 0.55rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(232, 213, 163, 0.55);
}

#stage-app .ios-app-metric {
    font-family: var(--font-data), "JetBrains Mono", monospace;
    font-size: clamp(1.55rem, 4.2vh, 2.1rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    color: #f6edd8;
    line-height: 1;
    text-shadow: 0 0 24px rgba(201, 168, 108, 0.25);
}

#stage-app .ios-app-sub {
    font-family: var(--font-data), monospace;
    font-size: 0.58rem;
    letter-spacing: 0.06em;
    color: rgba(244, 239, 230, 0.45);
}

#stage-app .ios-app-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: auto;
}

#stage-app .ios-app-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px;
    border-radius: 12px;
    border: 1px solid rgba(201, 168, 108, 0.12);
    background: rgba(255, 255, 255, 0.03);
}

#stage-app .ios-app-card span {
    font-family: var(--font-data), monospace;
    font-size: 0.5rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(244, 239, 230, 0.4);
}

#stage-app .ios-app-card strong {
    font-family: var(--font-data), monospace;
    font-size: 0.78rem;
    font-weight: 600;
    color: #e8d5a3;
}

#stage-app .ios-app-footer {
    margin-top: 12px;
    text-align: center;
    font-family: var(--font-data), monospace;
    font-size: 0.55rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(232, 213, 163, 0.45);
}

#stage-app .ios-device-home {
    position: absolute;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    width: 34%;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.28);
    z-index: 4;
}

#stage-app .ios-device-caption {
    font-family: var(--font-data), monospace;
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(244, 239, 230, 0.38);
    text-align: center;
}

/* CTA column: large QR + waitlist */
#stage-app .app-cta-col {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: clamp(16px, 2.5vh, 24px);
    min-width: 0;
    width: 100%;
    max-width: 420px;
    justify-self: center;
}

#stage-app .app-qr-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

#stage-app .app-qr-kicker {
    font-family: var(--font-data), monospace;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(232, 213, 163, 0.75);
}

#stage-app .app-qr-frame {
    width: min(100%, 280px);
    aspect-ratio: 1;
    padding: clamp(14px, 2vw, 20px);
    box-sizing: border-box;
    border-radius: 18px;
    background:
        linear-gradient(165deg, rgba(20, 17, 14, 0.98), rgba(8, 7, 6, 0.99));
    border: 1px solid rgba(201, 168, 108, 0.28);
    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(232, 213, 163, 0.08);
    display: grid;
    place-items: center;
}

#stage-app .app-qr-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    /* Invert default black QR modules onto dark card → gold-ish read via filter */
    filter: invert(1) sepia(0.45) saturate(1.4) hue-rotate(5deg) brightness(1.15);
    image-rendering: pixelated;
}

#stage-app .app-qr-caption {
    margin: 0;
    max-width: 32ch;
    font-family: var(--font-ui), system-ui, sans-serif;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: rgba(244, 239, 230, 0.55);
}

#stage-app .app-waitlist {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

#stage-app .app-waitlist-label {
    font-family: var(--font-data), monospace;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(244, 239, 230, 0.4);
}

#stage-app .app-waitlist-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: none !important;
}
#stage-app .app-waitlist-form .email-signup-button {
    grid-column: 1 / -1 !important;
    width: 100% !important;
}

#stage-app .app-waitlist-meta {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    align-items: baseline;
    font-family: var(--font-data), monospace;
}

#stage-app .app-waitlist-meta strong {
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #f4efe6;
}

#stage-app .app-waitlist-meta span {
    font-size: 0.68rem;
    color: rgba(244, 239, 230, 0.4);
    letter-spacing: 0.04em;
}

#stage-app .app-store-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 4px;
}

#stage-app .app-store-label {
    font-family: var(--font-data), monospace;
    font-size: 0.58rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(244, 239, 230, 0.35);
}

#stage-app .app-store-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
}

#stage-app .app-store-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-data), monospace;
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    color: rgba(244, 239, 230, 0.65);
}

#stage-app .app-store-badge img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: 6px;
    opacity: 0.9;
}

@media (max-width: 900px) {
    #stage-app .app-mobile-layout {
        grid-template-columns: 1fr !important;
        gap: 22px !important;
        justify-items: center;
    }
    #stage-app .app-device-col {
        order: -1;
    }
    #stage-app .ios-device {
        width: min(100%, 240px);
    }
    #stage-app .ios-device-bezel {
        width: min(100%, 220px);
        border-radius: 34px;
        padding: 9px;
    }
    #stage-app .ios-device-screen {
        border-radius: 26px;
    }
    #stage-app .app-cta-col {
        max-width: 100%;
        align-items: center;
    }
    #stage-app .app-waitlist,
    #stage-app .app-store-row {
        width: 100%;
        max-width: 420px;
    }
    #stage-app .app-waitlist-form,
    #stage-app .app-launch-signup-form {
        grid-template-columns: 1fr !important;
    }
    #stage-app .app-waitlist-form .email-signup-button,
    #stage-app .app-launch-signup-form .email-signup-button {
        width: 100%;
    }
}

@media (max-width: 560px) {
    #stage-app .app-qr-frame {
        width: min(100%, 220px);
    }
}
#stage-outro .footer-connect-links {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(201,168,108,.1);
}
#stage-outro .footer-nav { gap: 7px !important; }

/* Technical micro-graphics — drafting marks + category glyphs */
#stage-purchases .purchase-tile,
#stage-viability .vd-tile {
    isolation: isolate;
    position: relative;
}
#stage-viability .vd-tile::before {
    content: "";
    position: absolute;
    inset: 7px;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(var(--gold),var(--gold)) left top / 14px 1px no-repeat,
        linear-gradient(var(--gold),var(--gold)) left top / 1px 14px no-repeat,
        linear-gradient(var(--gold),var(--gold)) right bottom / 14px 1px no-repeat,
        linear-gradient(var(--gold),var(--gold)) right bottom / 1px 14px no-repeat;
    opacity: .25;
}
#stage-viability .vd-tile::after {
    content: "";
    position: absolute;
    right: 11px;
    bottom: 10px;
    width: 25px;
    height: 25px;
    z-index: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(232,213,163,.42) 1px, transparent 1.5px);
    background-size: 8px 8px;
    opacity: .42;
}
#stage-purchases .purchase-tile > *,
#stage-viability .vd-tile > * { position: relative; z-index: 1; }

/* Four-corner L-brackets (purchase tiles) */
#stage-purchases .purchase-tile-corners {
    position: absolute !important;
    inset: 8px;
    z-index: 0 !important;
    pointer-events: none;
    opacity: 0.55;
    background:
        /* TL */
        linear-gradient(var(--gold-soft), var(--gold-soft)) left top / 16px 1px no-repeat,
        linear-gradient(var(--gold-soft), var(--gold-soft)) left top / 1px 16px no-repeat,
        /* TR */
        linear-gradient(var(--gold-soft), var(--gold-soft)) right top / 16px 1px no-repeat,
        linear-gradient(var(--gold-soft), var(--gold-soft)) right top / 1px 16px no-repeat,
        /* BL */
        linear-gradient(var(--gold-soft), var(--gold-soft)) left bottom / 16px 1px no-repeat,
        linear-gradient(var(--gold-soft), var(--gold-soft)) left bottom / 1px 16px no-repeat,
        /* BR */
        linear-gradient(var(--gold-soft), var(--gold-soft)) right bottom / 16px 1px no-repeat,
        linear-gradient(var(--gold-soft), var(--gold-soft)) right bottom / 1px 16px no-repeat;
}
#stage-purchases .purchase-tile:hover .purchase-tile-corners {
    opacity: 0.85;
}

/* Category micro-icon — bottom-right corner */
#stage-purchases .purchase-tile-glyph {
    position: absolute !important;
    right: 14px;
    bottom: 12px;
    z-index: 0 !important;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    pointer-events: none;
    opacity: 0.42;
    border: 1px solid rgba(201, 168, 108, 0.16);
    border-radius: 8px;
    background:
        radial-gradient(circle at 50% 50%, rgba(201, 168, 108, 0.1), transparent 70%),
        rgba(0, 0, 0, 0.25);
}
#stage-purchases .purchase-tile-glyph img,
#stage-purchases .purchase-tile-glyph svg {
    width: 22px;
    height: 22px;
    display: block;
    opacity: 0.9;
}
#stage-purchases .purchase-tile:hover .purchase-tile-glyph {
    opacity: 0.72;
    border-color: rgba(201, 168, 108, 0.28);
}
#stage-purchases .purchase-tile.disabled .purchase-tile-glyph {
    opacity: 0.2;
    filter: grayscale(0.4);
}

#stage-purchases .purchase-tile-hero {
    position: relative;
    border-block: 1px solid rgba(201,168,108,.08);
    background:
        linear-gradient(90deg, rgba(201,168,108,.05) 1px, transparent 1px) 0 100% / 12.5% 7px repeat-x,
        radial-gradient(circle at 50% 55%, rgba(201,168,108,.07), transparent 58%);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 8px 10px 10px !important;
}
#stage-purchases .purchase-tile-hero::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(72%, 240px);
    height: 1px;
    transform: translate(-50%,-50%);
    background: linear-gradient(90deg, transparent, rgba(201,168,108,.3), transparent);
    pointer-events: none;
}
#stage-purchases .purchase-tile-rule {
    position: relative;
    z-index: 1;
    margin-top: 2px;
    font-family: var(--font-data);
    font-size: 0.52rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(232, 213, 163, 0.45);
    padding: 2px 0 0;
}
#stage-purchases .purchase-tile-index {
    min-width: 30px;
    padding-right: 8px;
    border-right: 1px solid rgba(201,168,108,.15);
}
#stage-purchases .purchase-tip-btn {
    flex: 0 0 auto;
    margin-left: auto;
}

#stage-viability .vd-tile {
    background:
        linear-gradient(rgba(201,168,108,.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(201,168,108,.028) 1px, transparent 1px),
        radial-gradient(circle at 78% 36%, rgba(201,168,108,.06), transparent 40%),
        rgba(0,0,0,.28) !important;
    background-size: 28px 28px, 28px 28px, auto, auto !important;
}
#stage-viability .vd-tile--hero .vd-tile-value,
#stage-purchases .purchase-tile-hero-value {
    text-shadow: 0 0 32px rgba(201,168,108,.18) !important;
}
#stage-viability .vd-tile-foot {
    width: 100%;
    padding-top: 8px;
    border-top: 1px solid rgba(201,168,108,.1);
}

/* Five equally weighted footer directories fill the available stage. */
#stage-outro .footer-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}
@media (max-width: 900px) {
    #stage-outro .footer-grid { grid-template-columns: 1fr !important; }
}

.ai-report-head-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
}
.ai-report-action {
    min-height: 28px;
    padding: 5px 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(201,168,108,.2);
    border-radius: 2px;
    background: transparent;
    color: var(--text-secondary);
    font-family: var(--font-data);
    font-size: .54rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    cursor: pointer;
}
.ai-report-action:hover:not(:disabled),
.ai-report-index .ai-chat-prompt-btn.is-active {
    color: var(--gold-soft) !important;
    border-color: rgba(232,213,163,.45) !important;
    background: rgba(201,168,108,.1) !important;
}
.ai-report-action:disabled { opacity: .3; cursor: not-allowed; }
.ai-report-rendered { color: var(--text-secondary); }
.ai-report-grade-strip {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: baseline;
    gap: 10px;
    margin: 0 0 14px;
    padding: 9px 10px;
    border: 1px solid rgba(201,168,108,.14);
    background: rgba(201,168,108,.05);
    font-family: var(--font-data);
    font-size: .58rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.ai-report-grade-strip strong {
    color: var(--gold-soft);
    font-size: 1.05rem;
    line-height: 1;
}
.ai-report-rendered h2,
.ai-report-rendered h3,
.ai-report-rendered h4 {
    margin: 16px 0 7px;
    color: var(--gold-soft);
    font-family: var(--font-ui);
    line-height: 1.2;
}
.ai-report-rendered h2 { font-size: 1rem; }
.ai-report-rendered h3 { font-size: .83rem; }
.ai-report-rendered h4 { font-size: .74rem; }
.ai-report-rendered p,
.ai-report-rendered li {
    font-size: .72rem;
    line-height: 1.5;
}
.ai-report-rendered p { margin: 0 0 9px; }
.ai-report-rendered ul,
.ai-report-rendered ol { margin: 7px 0 12px; padding-left: 20px; }
.ai-report-rendered code {
    padding: 1px 4px;
    background: rgba(201,168,108,.08);
    color: var(--gold-soft);
}
.report-table-wrap {
    width: 100%;
    overflow-x: auto;
    margin: 10px 0 16px;
    border: 1px solid rgba(201,168,108,.15);
}
.report-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}
.report-table th,
.report-table td {
    padding: 8px 9px;
    border-right: 1px solid rgba(201,168,108,.1);
    border-bottom: 1px solid rgba(201,168,108,.09);
    text-align: left;
    vertical-align: top;
    font-size: .65rem;
    line-height: 1.4;
}
.report-table th {
    background: rgba(201,168,108,.09);
    color: var(--gold-soft);
    font-family: var(--font-data);
    letter-spacing: .05em;
    text-transform: uppercase;
}
.report-table tr:last-child td { border-bottom: 0; }
.report-table th:last-child,
.report-table td:last-child { border-right: 0; }
@media (max-width: 900px) {
    .ai-report-header { align-items: flex-start; }
    .ai-report-head-actions { justify-content: flex-start; }
    .ai-report-status { width: 100%; }
}

.hero-as-seen-logo[title="X"] svg {
    width: 22px !important;
    height: 22px !important;
}



/* ── Page shell: fill the rail ──────────────────────────── */
.app-container {
    max-width: var(--dash-max) !important;
    padding: var(--space-2) var(--dash-gutter) var(--space-3) !important;
    gap: var(--dash-gap) !important;
}

/* Kill residual utility margins inside the rail */
.app-container .u-mb-40,
.app-container .u-mb-24,
.app-container .u-mb-20,
.app-container .u-mt-16,
.app-container .u-mt-24 {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}

/* ── Panels / charts: compact padding, full width ───────── */
.panel,
.chart-container,
.instructions-panel,
.ai-analysis-panel {
    padding: var(--space-2) var(--space-3) !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}

.chart-container {
    padding: var(--space-2) var(--space-3) !important;
}

.panel-title,
.chart-title {
    margin-bottom: var(--space-1) !important;
}

.chart-description {
    margin-bottom: var(--space-2) !important;
    max-width: none !important;
}

.chart-title::after,
.financial-planning-title::after {
    margin-top: 6px !important;
    max-width: 160px !important;
}

.section-kicker {
    margin-bottom: 4px !important;
}

/* ── Affordability: dense, symmetric metric lattice ─────── */
.affordability-banner {
    padding: 0 !important;
    margin-bottom: 0 !important;
}

.affordability-banner .section-kicker {
    padding: var(--space-2) var(--space-3) 0 !important;
    margin-bottom: 0 !important;
}

.affordability-header {
    padding: 12px var(--space-3) 10px !important;
    margin-bottom: 0 !important;
}

.affordability-title-section::before {
    height: 48px !important;
    width: min(360px, 60%) !important;
    opacity: 0.7;
}

.affordability-title {
    font-size: clamp(1.25rem, 2vw, 1.65rem) !important;
    margin-bottom: 2px !important;
}

.affordability-subtitle {
    margin: 0 !important;
}

.affordability-core-metrics {
    padding: 0 !important;
    gap: 0 !important;
    background: transparent !important;
    border-bottom: 1px solid var(--border) !important;
}

.affordability-metrics {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.core-metric,
.mini-metric {
    padding: var(--space-2) var(--space-2) !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    border-right: 1px solid var(--border) !important;
    background: transparent !important;
    min-height: 0 !important;
}

.core-metric:last-child,
.mini-metric:last-child {
    border-right: none !important;
}

.affordability-core-metrics .core-metric {
    border-bottom: 1px solid var(--border) !important;
}

.core-metric-label {
    margin-bottom: 6px !important;
}

.core-metric-value {
    font-size: clamp(1.45rem, 2.4vw, 2rem) !important;
    margin-bottom: 4px !important;
}

.core-metric-status,
.mini-metric-trend {
    margin: 0 !important;
}

.core-metric::after {
    top: 8px !important;
    right: 8px !important;
    width: 12px !important;
    height: 12px !important;
}

/* ── Financial planning header ──────────────────────────── */
.financial-planning-header {
    margin: 0 !important;
    padding: var(--space-1) 0 0 !important;
}

.financial-planning-title-section {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: var(--space-2) !important;
    margin-bottom: 0 !important;
}

.financial-planning-title {
    margin: 0 !important;
    font-size: clamp(1.25rem, 2vw, 1.65rem) !important;
}

.financial-planning-container {
    gap: var(--dash-gap) !important;
}

/* ── Mixing board: dense instrument grid ────────────────── */
.atelier-icon-rail {
    margin: 0 0 var(--space-1) !important;
    padding: 8px 12px !important;
    gap: 10px !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
}

.atelier-icon-rail img {
    width: 28px !important;
    height: 28px !important;
}

.mixing-board-container {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 0 !important;
    min-height: 0 !important;
}

.budget-item {
    height: auto !important;
    min-height: 0 !important;
    padding: 12px 10px !important;
    gap: 8px !important;
    border-radius: 0 !important;
}

.budget-item-icon {
    width: 22px !important;
    height: 22px !important;
}

.budget-amount-input,
.income-amount-input {
    font-size: 1.15rem !important;
    padding: 6px 8px !important;
}

.budget-item-top {
    gap: 6px !important;
    width: 100%;
}

.budget-item-amount-row {
    gap: 6px !important;
}

.budget-controls-row {
    margin-top: var(--space-1) !important;
    gap: 8px !important;
}

.legend {
    margin-bottom: var(--space-1) !important;
    gap: var(--space-2) !important;
}

/* Major purchases side-by-side, tight */
.main-layout {
    gap: var(--dash-gap) !important;
    margin: 0 !important;
}

.main-layout > .panel {
    padding: var(--space-2) !important;
}

.form-group {
    margin-bottom: 10px !important;
}

.form-helper {
    margin-top: 2px !important;
    font-size: 0.68rem !important;
}

.input-group {
    gap: 10px !important;
    margin-bottom: 10px !important;
}

.payment-estimate {
    margin-top: 4px !important;
    padding: 10px 12px !important;
}

/* Summary cards: flush 4-up */
.summary-grid {
    gap: 8px !important;
    margin: 0 !important;
}

.summary-card {
    padding: 12px 14px !important;
    border-radius: 0 !important;
}

/* Charts: less chrome, more plot */
.chart-wrapper {
    min-height: 280px !important;
    height: clamp(260px, 32vh, 360px) !important;
    padding: 4px !important;
}

.chart-scrub-hud {
    margin-bottom: 8px !important;
    padding: 8px 12px !important;
    min-height: 0 !important;
}

.budget-pie-container,
.budget-pie-chart-wrapper {
    gap: 12px !important;
}

.budget-pie-legend {
    gap: 8px !important;
}

.budget-pie-legend-item {
    padding: 8px 10px !important;
}

.treemap-container {
    min-height: 280px !important;
    height: clamp(260px, 34vh, 380px) !important;
}

/* Instructions compact */
.instructions-panel {
    padding: 12px 16px !important;
}

.instructions-header {
    margin-bottom: 0 !important;
    gap: 8px !important;
}

/* AI panel denser */
.ai-analysis-panel {
    padding: var(--space-2) var(--space-3) !important;
}

.ai-analysis-header {
    margin-bottom: var(--space-1) !important;
}

.ai-insights {
    gap: 8px !important;
}

.ai-insight-item {
    padding: 10px 12px !important;
}

.pollinations-key-panel {
    margin-bottom: var(--space-1) !important;
    padding: 12px !important;
}

/* App launch / footer: less air */
.app-launch-section {
    padding: var(--space-2) var(--space-3) !important;
    margin: 0 !important;
}

.app-launch-inner {
    gap: var(--space-2) !important;
}

.site-footer {
    margin: 0 !important;
    padding: var(--space-2) 0 0 !important;
}

.site-footer-inner {
    padding: 0 !important;
}

.footer-grid {
    gap: var(--space-2) !important;
    padding: var(--space-2) 0 !important;
}

.footer-bottom {
    padding: 10px 0 !important;
}

/* Reveal blocks shouldn't leave ghost margin when animating */
.reveal-block {
    transform: translateY(16px) scale(0.995);
}

/* Symmetric wide mixing board breakpoints */
@media (max-width: 1280px) {
    .mixing-board-container {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 900px) {
    .mixing-board-container {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
    .affordability-metrics,
    .affordability-core-metrics {
        grid-template-columns: 1fr !important;
    }
    .core-metric,
    .mini-metric {
        border-right: none !important;
        border-bottom: 1px solid var(--border) !important;
    }
}
@media (max-width: 640px) {
    .mixing-board-container {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .app-container {
        padding: 10px 10px 16px !important;
        gap: 10px !important;
    }
    .panel,
    .chart-container {
        padding: 12px !important;
    }
}

/* Hero: as-seen left, scroll hint center */
.hero-as-seen {
    left: clamp(14px, 2.5vw, 36px) !important;
    right: auto !important;
    bottom: clamp(16px, 3vh, 36px) !important;
    transform: none !important;
    gap: 8px !important;
}

.hero-scroll-hint {
    left: 50% !important;
    bottom: clamp(24px, 3.5vh, 36px) !important;
    transform: translateX(-50%) !important;
}

/* Light mode density: keep metric lattice ivory, never black */


/* ── Light mode control chrome (spinners, toggles, delete) ─ */











/* Status badges on light */




/* Scenario / empty states */

/* Hard seam: content begins as solid ivory over black hero (no white gradient) */

/* Ensure content overlays hero cleanly without translucent white */

/* ═══════════════════════════════════════════════════════════
   Light mode contrast pass (iterative)
   Target: no invisible / low-contrast body text on ivory
   ═══════════════════════════════════════════════════════════ */

/* Labels & helpers — was 0.4 opacity (~2.6:1) */



/* App launch: was white text on ivory (invisible) */



/* AI panel body copy */




/* Instructions */

/* Budget name fields */

/* Footer links */

/* Chart axis leftovers if any HTML labels */

/* Affordability subtitle */

/* Placeholder text */

/* Panel titles stay near-black */

/* Status chips need ink on light */




/* Table */


/* Scenario buttons / secondary already set; ensure scenario list text */

/* Pollinations link */

/* Ensure no white-on-light ghosts from dark mode utilities */

/* ── Light iter 3: residual chrome ──────────────────────── */




/* Phone mock stays dark — restore cream/gold readout contrast */





/* AI insight icons & list bullets */

/* Budget pie empty state */

/* Email success / helper */

/* Scenario list empty */

/* Tooltip bodies if visible */



/* Nav: no hairline artifacts through pill */
.floating-nav {
    background-clip: padding-box;
}


/* Dark mode vault: keep no top border too (line was global) */
.hero .header::before,
.hero .header::after {
    border-top-color: transparent;
}

/* ═══════════════════════════════════════════════════════════
   Theme corner · Stage panels · Dramatic section jumps
   ═══════════════════════════════════════════════════════════ */

/* Theme toggle — fixed top-right, icon only */












/* Centered three-link nav only */
.floating-nav {
    gap: 28px !important;
    padding: 12px 28px !important;
}

/* As seen on — pure white icons in dark mode */






/* ── Full-viewport stage panels ───────────────────────────
   Snap is OFF until past the hero (see html.stages-armed).
   Mandatory snap at load was jumping past the hero lander. */
html {
    scroll-snap-type: none;
    scroll-padding-top: 0;
}

html.stages-armed {
    scroll-snap-type: y proximity;
}

@media (prefers-reduced-motion: no-preference) {
    html.stages-armed {
        scroll-snap-type: y mandatory;
    }
}

/* Invisible full-viewport lander: first snap target = hero view */
.hero-lander {
    display: block;
    width: 100%;
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    pointer-events: none;
    /* The real lander space is content margin-top 100vh.
       We use a zero-height marker for the rail only. */
}

.stage-panel {
    position: relative;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    padding: clamp(20px, 3vh, 40px) 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
}

.stage-panel.is-stage-active {
    opacity: 1;
    transform: none;
}

.stage-panel.stage-panel--compact {
    min-height: 70vh;
    min-height: 70dvh;
}

.stage-panel-card {
    width: 100%;
    max-width: 100%;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: min(88vh, 920px);
    margin: 0 !important;
    box-sizing: border-box;
}

.stage-panel .chart-wrapper {
    flex: 1 1 auto;
    min-height: clamp(280px, 48vh, 520px) !important;
    height: clamp(280px, 48vh, 520px) !important;
}

.stage-panel .treemap-container {
    flex: 1 1 auto;
    min-height: clamp(280px, 48vh, 520px) !important;
    height: clamp(280px, 48vh, 520px) !important;
}

.stage-panel .budget-pie-container,
.stage-panel .budget-pie-chart-wrapper {
    flex: 1 1 auto;
    min-height: clamp(240px, 42vh, 480px);
    align-items: center;
}

.stage-panel .table-scroll {
    flex: 1 1 auto;
    max-height: min(60vh, 560px);
}

.stage-panel .main-layout {
    flex: 1 1 auto;
    align-content: center;
}

/* When financial planning is expanded, let stages participate in page flow */
.financial-planning-container.expanded {
    display: contents;
}

.financial-planning-container:not(.expanded) {
    display: none !important;
}

/* Hide old reveal transform conflict on stages */
.stage-panel.reveal-block {
    filter: none;
}

.stage-panel.reveal-block:not(.is-revealed) {
    opacity: 0.55;
}

.stage-panel.reveal-block.is-revealed {
    opacity: 1;
}

/* Stage rail — left-side jump dots */
.stage-rail {
    position: fixed;
    left: clamp(10px, 1.8vw, 22px);
    right: auto;
    top: 50%;
    transform: translateY(-50%);
    z-index: 35;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 8px;
    border-radius: 999px;
    background: rgba(8, 6, 4, 0.45);
    border: 1px solid rgba(201, 168, 108, 0.18);
    backdrop-filter: blur(12px);
    pointer-events: auto;
}


.stage-rail-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 1px solid rgba(232, 213, 163, 0.55);
    background: transparent;
    padding: 0;
    cursor: pointer;
    transition: transform 0.3s var(--ease-out-expo), background 0.25s ease, box-shadow 0.3s ease;
    position: relative;
}

.stage-rail-dot:hover,
.stage-rail-dot:focus-visible {
    transform: scale(1.25);
    background: rgba(232, 213, 163, 0.35);
    outline: none;
}

.stage-rail-dot.is-active {
    background: #e8d5a3;
    box-shadow: 0 0 12px rgba(232, 213, 163, 0.55);
    transform: scale(1.2);
}



.stage-rail-dot::after {
    content: attr(data-label);
    position: absolute;
    left: calc(100% + 10px);
    right: auto;
    top: 50%;
    transform: translateY(-50%) translateX(-4px);
    white-space: nowrap;
    font-family: var(--font-data);
    font-size: 0.58rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold-soft);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.3s var(--ease-out-expo);
    background: rgba(8, 6, 4, 0.75);
    border: 1px solid rgba(201, 168, 108, 0.2);
    padding: 4px 8px;
    border-radius: 2px;
}


.stage-rail-dot:hover::after,
.stage-rail-dot:focus-visible::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* Dramatic enter flash on active stage card */
.stage-panel.is-stage-active .stage-panel-card {
    animation: stageEnter 0.9s var(--ease-out-expo);
}

@keyframes stageEnter {
    0% {
        box-shadow:
            0 0 0 1px rgba(201, 168, 108, 0.05),
            0 24px 48px rgba(0, 0, 0, 0.35);
        filter: brightness(0.92);
    }
    40% {
        box-shadow:
            0 0 0 1px rgba(232, 213, 163, 0.35),
            0 28px 60px rgba(0, 0, 0, 0.45),
            0 0 48px rgba(201, 168, 108, 0.12);
        filter: brightness(1.05);
    }
    100% {
        filter: brightness(1);
    }
}


@keyframes stageEnterLight {
    0% { filter: brightness(0.97); }
    40% {
        box-shadow:
            0 1px 0 rgba(255, 255, 255, 0.9) inset,
            0 16px 40px rgba(40, 32, 18, 0.1),
            0 0 40px rgba(184, 149, 74, 0.12);
        filter: brightness(1.02);
    }
    100% { filter: brightness(1); }
}

/* Theme toggle shouldn't sit under stage rail on short screens */
@media (max-width: 900px) {
    .stage-rail {
        left: 8px;
        right: auto;
        gap: 8px;
        padding: 10px 6px;
    }
    .stage-rail-dot::after {
        display: none;
    }

}

@media (prefers-reduced-motion: reduce) {
    .stage-panel {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .stage-panel.is-stage-active .stage-panel-card {
        animation: none !important;
    }
    html {
        scroll-snap-type: none;
    }
}

/* Persistent center nav — independent of hero hide */
.floating-nav.floating-nav--fixed {
    position: fixed !important;
    top: 22px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 36 !important;
    pointer-events: auto !important;
}

/* Keep room so theme (right) and nav (center) never collide */
@media (max-width: 640px) {
    .floating-nav.floating-nav--fixed {
        gap: 16px !important;
        padding: 10px 16px !important;
        max-width: calc(100vw - 100px);
    }
}

/* ═══════════════════════════════════════════════════════════
   Flow reorder helpers · Purchases symmetry · Chart walkthroughs
   ═══════════════════════════════════════════════════════════ */

/* Scenarios merged into planning stage */
.planning-scenarios-block {
    margin-top: var(--space-2, 16px);
    padding-top: var(--space-2, 16px);
    border-top: 1px solid var(--border);
}

.planning-scenarios-title {
    font-family: var(--font-display) !important;
    font-size: 1.15rem !important;
    margin-bottom: 8px !important;
}

.planning-scenarios-block .scenario-controls {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: stretch;
}

@media (max-width: 640px) {
    .planning-scenarios-block .scenario-controls {
        grid-template-columns: 1fr;
    }
}

/* Major purchases — equal columns, mirrored rhythm */
.purchases-sym-grid,
.main-layout.purchases-sym-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    align-items: stretch !important;
    width: 100% !important;
}

.purchases-sym-grid > .panel,
.purchases-sym-grid > #carPanel,
.purchases-sym-grid > #housePanel {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 100% !important;
    padding: 18px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.purchases-sym-grid .form-group {
    margin-bottom: 12px !important;
}

.purchases-sym-grid .input-group {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
}

.purchases-sym-grid .payment-estimate {
    margin-top: auto !important;
    margin-bottom: 0 !important;
}

.purchases-stage-card > .panel-title {
    text-align: center;
    justify-content: center;
}

@media (max-width: 900px) {
    .purchases-sym-grid,
    .main-layout.purchases-sym-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Chart walkthrough narrative */
.chart-walkthrough {
    display: grid;
    gap: 10px;
    margin: 12px 0 16px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-left: 2px solid var(--gold);
    background:
        linear-gradient(90deg, rgba(201, 168, 108, 0.08), transparent 55%),
        rgba(0, 0, 0, 0.25);
    border-radius: var(--radius-atelier, 2px);
}


.chart-walkthrough-kicker {
    font-family: var(--font-data);
    font-size: 0.62rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
}

.chart-walkthrough-body {
    display: grid;
    gap: 10px;
}

.walk-point-title {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    color: var(--text);
    margin-bottom: 2px;
}

.walk-point-text {
    font-family: var(--font-ui);
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--text-secondary);
}


.walk-empty {
    color: var(--text-muted);
    font-size: 0.88rem;
    margin: 0;
}

/* Stage rail order follows DOM; no extra CSS needed */

/* Planning stage card can grow for scenarios */
#stage-planning .stage-panel-card {
    justify-content: flex-start;
    min-height: min(92vh, 980px);
    padding-top: 28px;
    padding-bottom: 28px;
}

#stage-purchases .stage-panel-card {
    justify-content: center;
}

/* ═══════════════════════════════════════════════════════════
   UX polish pass — scroll freedom, hero type, planning UI,
   viability density, walkthrough callout row
   ═══════════════════════════════════════════════════════════ */

/* Snap only on early stages; AI + app + footer free-scroll */
html.stages-armed {
    scroll-snap-type: y proximity !important;
}
@media (prefers-reduced-motion: no-preference) {
    html.stages-armed {
        /* proximity (not mandatory) so you can always scroll past AI into app */
        scroll-snap-type: y proximity !important;
    }
}
.stage-panel.stage-snap {
    scroll-snap-align: start;
    scroll-snap-stop: normal;
}
.stage-panel.stage-free,
.app-launch-section,
.site-footer,
.instructions-panel,
.summary-grid,
.financial-planning-header {
    scroll-snap-align: none !important;
    scroll-snap-stop: normal !important;
}
/* AI stage: natural height, not forced full viewport trap */
#stage-ai.stage-free {
    min-height: auto;
    min-height: unset;
    padding-bottom: 24px;
    opacity: 1;
    transform: none;
}
#stage-ai .stage-panel-card {
    min-height: auto;
}

/* ── Hero: bold sans-serif, larger wordmark ─────────────── */
.header-banner-title-text {
    font-family: var(--font-ui), "Syne", system-ui, sans-serif !important;
    font-weight: 800 !important;
    font-size: clamp(3.25rem, 11vw, 7.5rem) !important;
    letter-spacing: 0.06em !important;
    line-height: 0.9 !important;
    text-transform: uppercase !important;
}
@media (min-width: 1024px) {
    .header-banner-title-text {
        font-size: clamp(4.25rem, 9vw, 8rem) !important;
        letter-spacing: 0.05em !important;
    }
}
@media (min-width: 1440px) {
    .header-banner-title-text {
        font-size: clamp(5rem, 7.5vw, 8.5rem) !important;
    }
}
.header-banner-subtitle {
    font-family: var(--font-ui), "Syne", system-ui, sans-serif !important;
    font-weight: 500 !important;
    letter-spacing: 0.12em !important;
    font-size: clamp(0.72rem, 1.2vw, 0.9rem) !important;
}

/* ── Planning: unified instrument surface ───────────────── */
#stage-planning .stage-panel-card {
    gap: 0;
    padding: 22px 24px 20px !important;
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(201, 168, 108, 0.06), transparent 55%),
        linear-gradient(165deg, rgba(14, 12, 10, 0.98), rgba(6, 5, 4, 0.99)) !important;
}
#stage-planning .panel-title {
    margin-bottom: 12px !important;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}
#stage-planning .atelier-icon-rail {
    margin-bottom: 12px !important;
    border-radius: 0;
}
#stage-planning .legend {
    margin-bottom: 10px !important;
}
#stage-planning .mixing-board-container {
    gap: 10px !important;
}
#stage-planning .budget-item {
    padding: 14px 12px 12px !important;
    border: 1px solid var(--border) !important;
    background: rgba(0, 0, 0, 0.35) !important;
    display: flex;
    flex-direction: column;
    gap: 10px !important;
}
#stage-planning .budget-item.income-item {
    border-color: rgba(201, 168, 108, 0.35) !important;
}
#stage-planning .budget-item-top {
    width: 100%;
    min-height: 28px;
}
#stage-planning .budget-item-name,
#stage-planning .budget-name-input {
    font-size: 0.72rem !important;
    letter-spacing: 0.04em;
    text-align: center;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid transparent !important;
    padding: 2px 4px !important;
}
#stage-planning .budget-item-name:focus,
#stage-planning .budget-name-input:focus {
    border-bottom-color: var(--border-light) !important;
    box-shadow: none !important;
}
#stage-planning .budget-amount-input-wrapper {
    width: 100%;
}
#stage-planning .budget-amount-input,
#stage-planning .income-amount-input {
    width: 100% !important;
    text-align: center !important;
    font-size: 1.35rem !important;
    font-weight: 600 !important;
    padding: 10px 8px !important;
    border-radius: 2px !important;
    background: rgba(0, 0, 0, 0.45) !important;
    border: 1px solid var(--border) !important;
    font-variant-numeric: tabular-nums;
}
#stage-planning .budget-item-amount-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: none !important;
}

/* Redesigned spinner pair — circular gold ± */
#stage-planning .budget-spinner-controls,
.budget-spinner-controls {
    display: flex !important;
    flex-direction: row !important;
    gap: 10px !important;
    justify-content: center !important;
    align-items: center !important;
}
#stage-planning .budget-spinner-btn,
.budget-spinner-btn {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: rgba(201, 168, 108, 0.08) !important;
    border: 1px solid rgba(201, 168, 108, 0.35) !important;
    color: var(--gold-soft) !important;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease !important;
}
#stage-planning .budget-spinner-btn:hover:not(:disabled),
.budget-spinner-btn:hover:not(:disabled) {
    background: rgba(201, 168, 108, 0.18) !important;
    border-color: var(--gold) !important;
    transform: scale(1.06) !important;
}
#stage-planning .budget-spinner-btn:active:not(:disabled) {
    transform: scale(0.96) !important;
}
#stage-planning .budget-spinner-btn svg,
.budget-spinner-btn svg {
    width: 12px !important;
    height: 12px !important;
    stroke: currentColor !important;
    fill: currentColor !important;
}
#stage-planning .budget-item-toggle-row {
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100%;
}
#stage-planning .budget-controls-row {
    margin-top: 14px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
}
#stage-planning .budget-control-btn {
    min-height: 42px;
    letter-spacing: 0.1em;
}

/* Scenarios strip — integrated footer of planning card */
.planning-scenarios-block {
    margin-top: 18px !important;
    padding: 16px 14px !important;
    border-top: 1px solid var(--border) !important;
    background: rgba(0, 0, 0, 0.28);
    border-radius: 0;
}
.planning-scenarios-title {
    font-size: 0.95rem !important;
    letter-spacing: 0.06em;
    margin-bottom: 6px !important;
}
.planning-scenarios-block .section-subtitle {
    font-size: 0.78rem;
    opacity: 0.75;
}
.planning-scenarios-block .scenario-controls {
    margin-top: 10px !important;
    display: grid !important;
    grid-template-columns: 1fr minmax(120px, 160px) !important;
    gap: 10px !important;
}
.planning-scenarios-block .scenario-list {
    margin-top: 12px !important;
}


/* ── Purchases polish ───────────────────────────────────── */
#stage-purchases .purchases-stage-card {
    padding: 24px !important;
}
#stage-purchases .purchases-stage-card > .panel-title {
    width: 100%;
    text-align: left;
    padding-bottom: 12px;
    margin-bottom: 16px !important;
    border-bottom: 1px solid var(--border);
}
.purchases-sym-grid > .panel {
    border: 1px solid var(--border) !important;
    background: rgba(0, 0, 0, 0.3) !important;
    padding: 20px !important;
}
.purchases-sym-grid > .panel > .panel-title {
    margin-bottom: 14px !important;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

/* ── Viability denser dashboard ─────────────────────────── */
.viability-dashboard {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    min-height: min(88vh, 900px) !important;
    justify-content: center !important;
}
.viability-dashboard .affordability-header {
    padding: 18px 24px 14px !important;
}
.viability-dashboard .affordability-core-metrics,
.viability-dashboard .affordability-metrics {
    flex: 0 0 auto;
}
.metric-explain {
    margin: 8px 0 0 !important;
    font-size: 0.72rem !important;
    line-height: 1.4 !important;
    color: var(--text-muted) !important;
    max-width: 28ch;
    margin-left: auto !important;
    margin-right: auto !important;
    font-family: var(--font-ui) !important;
}
.core-metric,
.mini-metric {
    padding: 16px 14px 14px !important;
}
.viability-insight-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid var(--border);
}
.viability-insight-card {
    padding: 16px 18px 18px;
    border-right: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.22);
}
.viability-insight-card:last-child {
    border-right: none;
}
.viability-insight-label {
    font-family: var(--font-data);
    font-size: 0.6rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 8px;
}
.viability-insight-text {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--text-secondary);
}
@media (max-width: 900px) {
    .viability-insight-row {
        grid-template-columns: 1fr;
    }
    .viability-insight-card {
        border-right: none;
        border-bottom: 1px solid var(--border);
    }
}

/* ── Walkthroughs: horizontal callout strip ─────────────── */
.chart-walkthrough {
    display: block !important;
    margin: 10px 0 14px !important;
    padding: 12px 12px 10px !important;
    border: 1px solid var(--border) !important;
    border-left: 2px solid var(--gold) !important;
    background:
        linear-gradient(180deg, rgba(201, 168, 108, 0.06), transparent 70%),
        rgba(0, 0, 0, 0.22) !important;
}
.chart-walkthrough-kicker {
    margin-bottom: 8px;
}
.chart-walkthrough-body {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
}
.walk-point.walk-callout {
    min-height: 96px;
    max-height: 120px;
    overflow: hidden;
    padding: 10px 12px;
    border: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.28);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.walk-point-title {
    font-size: 0.72rem !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold-soft) !important;
    flex-shrink: 0;
}
.walk-point-text {
    font-size: 0.78rem !important;
    line-height: 1.4 !important;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--text-secondary) !important;
}
@media (max-width: 900px) {
    .chart-walkthrough-body {
        grid-template-columns: 1fr !important;
    }
    .walk-point.walk-callout {
        max-height: none;
        min-height: 0;
    }
}

/* Chart stages: more room for viz after compact walkthroughs */
.stage-panel.stage-snap .chart-wrapper {
    min-height: clamp(300px, 46vh, 480px) !important;
    height: clamp(300px, 46vh, 480px) !important;
}

/* App launch always reachable */
.app-launch-section {
    min-height: auto;
    padding-top: 12px;
    padding-bottom: 32px;
    position: relative;
    z-index: 2;
}
.site-footer {
    position: relative;
    z-index: 2;
    padding-bottom: 40px !important;
}

/* ═══════════════════════════════════════════════════════════
   Unified stage system — mandatory jumps for ALL stages
   including App + Outro (footer)
   ═══════════════════════════════════════════════════════════ */

/* Proximity snap — gentle section align without trapping the user (standard for multi-stage tools) */
html.stages-armed {
    scroll-snap-type: y proximity !important;
}

@media (prefers-reduced-motion: no-preference) {
    html.stages-armed {
        scroll-snap-type: y proximity !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html.stages-armed {
        scroll-snap-type: none !important;
    }
}

.stage-panel,
.stage-panel.stage-snap,
.stage-panel.stage-free {
    min-height: 100vh !important;
    min-height: 100dvh !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: normal !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: stretch !important;
    padding: clamp(16px, 2.5vh, 32px) 0 !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.stage-panel .stage-panel-card,
.stage-panel > .stage-panel-card,
.stage-panel > .panel.stage-panel-card,
.stage-panel > .chart-container.stage-panel-card,
.stage-panel > .app-launch-section,
.stage-panel > .site-footer {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
    min-height: min(88vh, 920px) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

/* App stage card */
.stage-app .app-launch-section,
#stage-app .app-launch-section {
    border: 1px solid var(--border) !important;
    background:
        radial-gradient(ellipse 60% 50% at 80% 40%, rgba(201, 168, 108, 0.08), transparent 55%),
        linear-gradient(155deg, rgba(14, 12, 10, 0.98), rgba(6, 5, 4, 0.99)) !important;
    padding: clamp(24px, 3vw, 40px) !important;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.4),
        0 24px 48px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(232, 213, 163, 0.06) !important;
}

#stage-app .app-launch-inner {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}


/* Outro / footer full-screen stage */
.stage-outro,
#stage-outro {
    justify-content: center !important;
}

#stage-outro .site-footer,
.stage-outro .site-footer {
    border: 1px solid var(--border) !important;
    background:
        radial-gradient(ellipse 70% 55% at 50% 0%, rgba(201, 168, 108, 0.07), transparent 60%),
        linear-gradient(165deg, rgba(14, 12, 10, 0.98), rgba(5, 4, 3, 0.99)) !important;
    padding: clamp(28px, 4vw, 48px) clamp(24px, 3vw, 40px) !important;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.4),
        0 24px 48px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(232, 213, 163, 0.06) !important;
    width: 100% !important;
    min-height: min(88vh, 920px) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

#stage-outro .site-footer-inner {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
}

#stage-outro .footer-outro-brand {
    text-align: center;
    max-width: 42rem;
    margin: 0 auto 8px;
}

#stage-outro .footer-brand {
    font-family: var(--font-ui), Syne, system-ui, sans-serif !important;
    font-weight: 800 !important;
    font-size: clamp(1.35rem, 2.4vw, 1.85rem) !important;
    letter-spacing: 0.14em !important;
    margin-bottom: 0 !important;
}

#stage-outro .footer-pitch {
    font-size: 0.8125rem !important;
    line-height: 1.55 !important;
    color: var(--text-secondary) !important;
    margin: 0 !important;
}

/* Later footer rules intentionally keep the 4-col analytical layout
   defined earlier in this file (#stage-outro .footer-grid). */

#stage-outro .footer-col-title {
    margin-bottom: 12px !important;
}

#stage-outro .footer-bottom {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    gap: 12px 24px !important;
    padding: 8px 0 0 !important;
    text-align: left !important;
    border: none !important;
}


@media (max-width: 768px) {
    #stage-outro .footer-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    #stage-outro .footer-brain-strip {
        flex-direction: column;
        gap: 6px;
    }
}

@media (max-width: 560px) {
    #stage-outro .footer-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Kill earlier free-scroll overrides that broke consistency */
#stage-ai.stage-free,
#stage-ai {
    min-height: 100vh !important;
    min-height: 100dvh !important;
    opacity: 1;
}
#stage-ai .stage-panel-card {
    min-height: min(88vh, 920px) !important;
}

.app-launch-section,
.site-footer {
    scroll-snap-align: unset;
}

/* ── Final snap consistency (overrides earlier proximity leftovers) ─ */
html.stages-armed {
    scroll-snap-type: y mandatory !important;
}
@media (prefers-reduced-motion: reduce) {
    html.stages-armed {
        scroll-snap-type: none !important;
    }
    .stage-panel {
        scroll-snap-align: none !important;
        scroll-snap-stop: normal !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Viability uses same card surface language */
#stage-viability .viability-dashboard,
#stage-viability .affordability-banner {
    width: 100% !important;
    min-height: min(88vh, 920px) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

/* Stages stay fully opaque — no active/inactive dimming phase */
.stage-panel,
.stage-panel.is-stage-active,
.stage-panel:not(.is-stage-active) {
    opacity: 1 !important;
}

/* Footer: single frame — kill inner double border */
#stage-outro .site-footer-inner {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
}
#stage-outro .footer-grid {
    background: transparent !important;
}

/* summary cards sit quietly between stages without breaking rhythm */
.summary-grid {
    max-width: 100%;
    padding: 8px 0;
    opacity: 0.95;
}

/* ═══════════════════════════════════════════════════════════
   Planning densify · App/Outro match stage cards · less dead air
   ═══════════════════════════════════════════════════════════ */

/* Shared stage card inset — match planning/charts margins */
.stage-panel {
    padding: clamp(12px, 2vh, 24px) 0 !important;
}
.stage-panel > .stage-panel-card,
.stage-panel > .panel.stage-panel-card,
.stage-panel > .chart-container.stage-panel-card {
    padding: clamp(18px, 2.2vw, 28px) !important;
    min-height: min(86vh, 880px) !important;
    justify-content: flex-start !important;
}

/* Hide orphan financial planning chrome header (title lives in stages now) */
.financial-planning-header {
    display: none !important;
}

/* ── Planning: topbar scenarios replace category marks ──── */
#stage-planning .planning-stage-card {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    min-height: min(86vh, 880px) !important;
    padding: clamp(16px, 2vw, 24px) !important;
}

.planning-topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
    gap: 16px 20px;
    align-items: end;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.planning-kicker {
    margin-bottom: 4px !important;
}

.planning-heading {
    margin: 0;
    font-family: var(--font-display), Georgia, serif;
    font-weight: 500;
    font-size: clamp(1.35rem, 2.4vw, 1.85rem);
    letter-spacing: 0.03em;
    color: var(--text);
    line-height: 1.15;
}

.planning-scenario-bar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 8px;
    align-items: center;
}

.planning-scenario-label {
    font-family: var(--font-data);
    font-size: 0.6rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
}

.planning-scenario-input {
    min-width: 0 !important;
    height: 40px !important;
    padding: 8px 12px !important;
    font-size: 0.85rem !important;
}

.planning-scenario-save {
    height: 40px !important;
    padding: 0 16px !important;
    white-space: nowrap;
    letter-spacing: 0.08em !important;
}

.planning-toolbar {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px 16px;
    align-items: center;
    min-height: 36px;
}

.planning-legend {
    display: flex !important;
    flex-wrap: wrap;
    gap: 12px 16px !important;
    margin: 0 !important;
}

.planning-legend .legend-item {
    font-size: 0.72rem !important;
    gap: 6px;
}

.planning-scenario-list,
#stage-planning .planning-scenario-list.scenario-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin: 0 !important;
    min-height: 32px;
}

#stage-planning .planning-scenario-list .no-scenarios {
    margin: 0;
    font-size: 0.72rem;
    color: var(--text-muted);
    letter-spacing: 0.04em;
}

/* Scenario chips — compact horizontal pills */
#stage-planning .scenario-item,
#stage-planning .planning-scenario-list > div:not(.no-scenarios) {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 10px !important;
    border: 1px solid var(--border) !important;
    background: rgba(0, 0, 0, 0.35) !important;
    border-radius: 2px !important;
    font-size: 0.75rem !important;
    max-width: 100%;
}

#stage-planning .income-budget-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1 1 auto;
    min-height: 0;
}

#stage-planning .mixing-board-container {
    flex: 1 1 auto;
    align-content: start;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 8px !important;
    min-height: 0;
}

#stage-planning .budget-item {
    min-height: 0 !important;
    padding: 10px 8px 10px !important;
    gap: 8px !important;
}

#stage-planning .budget-amount-input,
#stage-planning .income-amount-input {
    font-size: 1.15rem !important;
    padding: 8px 6px !important;
}

#stage-planning .budget-controls-row {
    margin-top: 4px !important;
    flex-shrink: 0;
}

@media (max-width: 1100px) {
    #stage-planning .mixing-board-container {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 900px) {
    .planning-topbar {
        grid-template-columns: 1fr;
    }
    .planning-toolbar {
        grid-template-columns: 1fr;
    }
    .planning-scenario-list {
        justify-content: flex-start !important;
    }
    #stage-planning .mixing-board-container {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 560px) {
    .planning-scenario-bar {
        grid-template-columns: 1fr;
    }
    #stage-planning .mixing-board-container {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}


/* ── App stage card chrome (width/margins set in final pass below) ─ */
#stage-app .app-stage-card,
.stage-app .app-stage-card {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: clamp(18px, 2.2vw, 28px) !important;
    min-height: 0 !important;
    border: 1px solid var(--border) !important;
    background:
        radial-gradient(ellipse 55% 45% at 85% 35%, rgba(201, 168, 108, 0.1), transparent 55%),
        linear-gradient(155deg, rgba(14, 12, 10, 0.98), rgba(6, 5, 4, 0.99)) !important;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.4),
        0 24px 48px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(232, 213, 163, 0.06) !important;
}

.app-stage-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr) !important;
    gap: clamp(28px, 4vw, 56px) !important;
    align-items: center !important;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
}

#stage-app .app-launch-copy {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: none;
    width: 100%;
}

#stage-app .app-launch-title {
    font-size: clamp(1.75rem, 3.5vw, 2.75rem) !important;
    margin: 0 !important;
    line-height: 1.1 !important;
}

#stage-app .app-launch-lede {
    max-width: 48ch;
    margin: 0 !important;
}

#stage-app .app-launch-points {
    margin: 4px 0 !important;
    gap: 8px !important;
}

#stage-app .app-launch-signup,
#stage-app .app-launch-signup-form {
    max-width: 100% !important;
    width: 100% !important;
}

#stage-app .app-launch-visual {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 320px;
}

#stage-app .app-launch-phone {
    transform: scale(1.08);
    transform-origin: center center;
}

#stage-app .app-launch-stores {
    margin-top: 4px;
}


@media (max-width: 900px) {
    .app-stage-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    #stage-app .app-launch-visual {
        order: -1;
        min-height: 240px;
    }
    #stage-app .app-launch-phone {
        transform: scale(0.92);
    }
}

/* ── Outro stage card chrome (width/margins in final pass) ─ */
#stage-outro .outro-stage-card {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    padding: clamp(18px, 2.2vw, 28px) !important;
    min-height: 0 !important;
    justify-content: flex-start !important;
    border: 1px solid var(--border) !important;
    background:
        radial-gradient(ellipse 70% 50% at 50% 0%, rgba(201, 168, 108, 0.08), transparent 58%),
        linear-gradient(165deg, rgba(14, 12, 10, 0.98), rgba(5, 4, 3, 0.99)) !important;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.4),
        0 24px 48px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(232, 213, 163, 0.06) !important;
}

.outro-stage-inner {
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 3vh, 32px);
    width: 100%;
    flex: 1 1 auto;
    justify-content: center;
}

#stage-outro .footer-outro-brand {
    text-align: center;
    max-width: 36rem;
    margin: 0 auto;
}

#stage-outro .footer-brand {
    font-family: var(--font-ui), Syne, system-ui, sans-serif !important;
    font-weight: 800 !important;
    font-size: clamp(2.25rem, 5vw, 3.5rem) !important;
    letter-spacing: 0.12em !important;
    margin-bottom: 10px !important;
}

#stage-outro .footer-pitch {
    margin: 0 !important;
    font-size: 0.98rem !important;
    line-height: 1.55 !important;
    color: var(--text-secondary) !important;
}

#stage-outro .outro-footer-grid,
#stage-outro .footer-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 20px !important;
    width: 100% !important;
    padding: 22px 8px !important;
    border-top: 1px solid var(--border) !important;
    border-bottom: 1px solid var(--border) !important;
    justify-items: center !important;
    text-align: center !important;
    background: transparent !important;
}

#stage-outro .footer-col {
    width: 100%;
    max-width: 240px;
}

#stage-outro .footer-nav {
    align-items: center !important;
    gap: 10px !important;
}

#stage-outro .footer-bottom {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 10px 20px !important;
    padding: 4px 0 0 !important;
    border: none !important;
    text-align: center !important;
}


/* Reduce dead air on purchases / viability / charts */
#stage-purchases .purchases-stage-card {
    padding: clamp(16px, 2vw, 24px) !important;
    min-height: min(86vh, 880px) !important;
    justify-content: center !important;
}
#stage-purchases .purchases-sym-grid {
    flex: 1 1 auto;
    align-content: center;
}
.viability-dashboard {
    min-height: min(86vh, 880px) !important;
    padding: 0 !important;
}
.stage-panel .chart-wrapper {
    min-height: clamp(260px, 42vh, 440px) !important;
    height: clamp(260px, 42vh, 440px) !important;
}
.stage-panel .treemap-container {
    min-height: clamp(260px, 42vh, 440px) !important;
    height: clamp(260px, 42vh, 440px) !important;
}

/* Kill old app-launch-section framing conflicts when unused */
.app-launch-section.stage-panel-card {
    /* legacy class not used on app stage card anymore */
}

/* Scenario chips in planning toolbar */
#stage-planning .scenario-chip {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 6px 4px 10px !important;
    border: 1px solid var(--border) !important;
    background: rgba(0, 0, 0, 0.4) !important;
    border-radius: 999px !important;
    max-width: min(220px, 100%);
}
#stage-planning .scenario-chip .scenario-name {
    font-family: var(--font-data);
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 110px;
}
#stage-planning .scenario-chip .scenario-btn {
    font-size: 0.62rem !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 8px !important;
    border-radius: 999px !important;
    border: 1px solid var(--border) !important;
    background: rgba(201, 168, 108, 0.1) !important;
    color: var(--gold-soft) !important;
    cursor: pointer;
    line-height: 1.2;
}
#stage-planning .scenario-chip .load-btn:hover {
    background: rgba(201, 168, 108, 0.22) !important;
}
#stage-planning .scenario-chip .delete-btn {
    width: 22px;
    height: 22px;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    color: var(--text-muted) !important;
    background: transparent !important;
}
#stage-planning .scenario-chip .delete-btn:hover {
    color: var(--danger) !important;
    border-color: rgba(224, 122, 106, 0.4) !important;
}

/* Hide decorative icon rails globally if any remain */
.atelier-icon-rail {
    display: none !important;
}


/* Light mode removed — single dark atelier palette only */
.theme-toggle,
#themeToggle {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════
   25-year ledger — Year 5 / 10 / 20 milestone highlights
   ═══════════════════════════════════════════════════════════ */
#stage-ledger .table-scroll {
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: auto;
    max-height: min(68vh, 720px);
    background: linear-gradient(180deg, rgba(12, 10, 8, 0.9), rgba(8, 7, 6, 0.95));
}

#stage-ledger table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 640px;
}

#stage-ledger table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: rgba(14, 12, 10, 0.96);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border-light);
    font-family: var(--font-data);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    padding: 12px 14px;
}

#stage-ledger table tbody td {
    padding: 11px 14px;
    border-bottom: 1px solid rgba(201, 168, 108, 0.06);
    font-variant-numeric: tabular-nums;
    font-size: 0.9rem;
    color: var(--text-secondary);
    transition: background 0.25s var(--ease-out-expo), box-shadow 0.25s var(--ease-out-expo);
}

#stage-ledger table tbody tr:last-child td {
    border-bottom: none;
}

#stage-ledger table tbody tr:hover td {
    background: rgba(201, 168, 108, 0.04);
}

/* Shared milestone row treatment */
#stage-ledger tr.year-milestone td {
    color: var(--text);
    position: relative;
}

#stage-ledger tr.year-milestone td:first-child {
    font-weight: 600;
    color: var(--gold-soft);
}

#stage-ledger tr.year-milestone .year-milestone-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    font-family: var(--font-data);
    font-size: 0.52rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #1a140c;
    background: linear-gradient(135deg, var(--gold-soft), var(--gold));
    vertical-align: middle;
    box-shadow: 0 0 10px rgba(201, 168, 108, 0.4);
}

/* Year 5 — first checkpoint (strongest) */
#stage-ledger tr.year-milestone-5 td {
    background:
        linear-gradient(90deg, rgba(201, 168, 108, 0.16), rgba(201, 168, 108, 0.06) 40%, rgba(201, 168, 108, 0.1));
    border-top: 1px solid rgba(232, 213, 163, 0.35);
    border-bottom: 1px solid rgba(232, 213, 163, 0.28);
    box-shadow:
        inset 3px 0 0 var(--gold),
        0 0 28px rgba(201, 168, 108, 0.08);
}

#stage-ledger tr.year-milestone-5:hover td {
    background:
        linear-gradient(90deg, rgba(201, 168, 108, 0.22), rgba(201, 168, 108, 0.1) 40%, rgba(201, 168, 108, 0.14));
}

#stage-ledger tr.year-milestone-5 .year-milestone-tag {
    animation: year5-pulse 2.8s ease-in-out infinite;
}

/* Year 10 — mid checkpoint */
#stage-ledger tr.year-milestone-10 td {
    background:
        linear-gradient(90deg, rgba(201, 168, 108, 0.12), rgba(201, 168, 108, 0.04) 45%, rgba(201, 168, 108, 0.07));
    border-top: 1px solid rgba(232, 213, 163, 0.22);
    border-bottom: 1px solid rgba(232, 213, 163, 0.16);
    box-shadow: inset 3px 0 0 rgba(201, 168, 108, 0.75);
}

#stage-ledger tr.year-milestone-10:hover td {
    background:
        linear-gradient(90deg, rgba(201, 168, 108, 0.16), rgba(201, 168, 108, 0.07) 45%, rgba(201, 168, 108, 0.1));
}

/* Year 20 — long-horizon checkpoint */
#stage-ledger tr.year-milestone-20 td {
    background:
        linear-gradient(90deg, rgba(184, 149, 90, 0.14), rgba(184, 149, 90, 0.04) 45%, rgba(184, 149, 90, 0.08));
    border-top: 1px solid rgba(201, 168, 108, 0.28);
    border-bottom: 1px solid rgba(201, 168, 108, 0.18);
    box-shadow: inset 3px 0 0 rgba(168, 137, 79, 0.9);
}

#stage-ledger tr.year-milestone-20:hover td {
    background:
        linear-gradient(90deg, rgba(184, 149, 90, 0.18), rgba(184, 149, 90, 0.07) 45%, rgba(184, 149, 90, 0.11));
}

@keyframes year5-pulse {
    0%, 100% { box-shadow: 0 0 10px rgba(201, 168, 108, 0.35); }
    50% { box-shadow: 0 0 18px rgba(232, 213, 163, 0.65); }
}

#stage-ledger tr.year-milestone .badge {
    border-color: rgba(232, 213, 163, 0.45);
}

/* ═══════════════════════════════════════════════════════════
   AI stage — grade + ChatGPT-style canned report chat
   ═══════════════════════════════════════════════════════════ */
#stage-ai .ai-analysis-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: min(86vh, 920px);
}

.ai-stage-layout {
    display: grid;
    grid-template-columns: minmax(260px, 0.95fr) minmax(320px, 1.15fr);
    gap: 16px;
    align-items: stretch;
    flex: 1;
    min-height: 0;
}

.ai-stage-layout .ai-analysis-preview {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background:
        radial-gradient(600px 280px at 0% 0%, rgba(201, 168, 108, 0.07), transparent 55%),
        rgba(10, 9, 8, 0.85);
}

/* ── Chat shell ── */
.ai-chat {
    display: flex;
    flex-direction: column;
    min-height: min(62vh, 560px);
    max-height: min(72vh, 680px);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    overflow: hidden;
    background:
        radial-gradient(800px 400px at 80% -10%, rgba(201, 168, 108, 0.08), transparent 50%),
        linear-gradient(180deg, #0e0c0a 0%, #090807 100%);
    box-shadow:
        0 0 0 1px rgba(201, 168, 108, 0.04),
        0 24px 48px rgba(0, 0, 0, 0.45);
}

.ai-chat-header {
    flex-shrink: 0;
    padding: 14px 18px 12px;
    border-bottom: 1px solid var(--border);
    background: rgba(12, 10, 8, 0.92);
    backdrop-filter: blur(10px);
}

.ai-chat-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-ui);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text);
}

.ai-chat-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 3px rgba(125, 186, 138, 0.2), 0 0 10px rgba(125, 186, 138, 0.55);
    animation: chat-dot-breathe 2.4s ease-in-out infinite;
}

@keyframes chat-dot-breathe {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(0.92); }
}

.ai-chat-sub {
    margin: 6px 0 0;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--text-tertiary);
}

/* Messages scroller — ChatGPT-like */
.ai-chat-messages {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 18px 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    scroll-behavior: smooth;
    min-height: 220px;
}

.ai-chat-messages::-webkit-scrollbar {
    width: 6px;
}
.ai-chat-messages::-webkit-scrollbar-thumb {
    background: rgba(201, 168, 108, 0.28);
    border-radius: 999px;
}

.ai-chat-msg {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    max-width: 100%;
    animation: chat-msg-in 0.35s var(--ease-out-expo) both;
}

@keyframes chat-msg-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.ai-chat-msg--user {
    flex-direction: row-reverse;
}

.ai-chat-avatar {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    font-family: var(--font-data);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ai-chat-msg--assistant .ai-chat-avatar {
    background: linear-gradient(145deg, rgba(201, 168, 108, 0.28), rgba(138, 112, 64, 0.35));
    border: 1px solid rgba(232, 213, 163, 0.35);
    color: var(--gold-soft);
}

.ai-chat-msg--user .ai-chat-avatar {
    background: rgba(244, 239, 230, 0.08);
    border: 1px solid var(--border);
    color: var(--text-secondary);
}

.ai-chat-bubble {
    max-width: min(92%, 520px);
    padding: 12px 14px;
    border-radius: 14px;
    line-height: 1.55;
    font-size: 0.88rem;
    color: var(--text);
}

.ai-chat-msg--assistant .ai-chat-bubble {
    background: rgba(18, 16, 14, 0.92);
    border: 1px solid rgba(201, 168, 108, 0.14);
    border-top-left-radius: 4px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.ai-chat-msg--user .ai-chat-bubble {
    background: linear-gradient(145deg, rgba(201, 168, 108, 0.22), rgba(138, 112, 64, 0.18));
    border: 1px solid rgba(232, 213, 163, 0.28);
    border-top-right-radius: 4px;
    color: var(--gold-soft);
}

.ai-chat-bubble p,
.ai-chat-text {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
}

.ai-chat-bubble strong {
    color: var(--gold-soft);
    font-weight: 600;
}

/* Streaming caret */
.ai-chat-msg.is-streaming .ai-chat-bubble::after {
    content: "";
    display: inline-block;
    width: 7px;
    height: 1.05em;
    margin-left: 3px;
    vertical-align: text-bottom;
    background: var(--gold-soft);
    border-radius: 1px;
    animation: chat-caret 0.85s steps(1) infinite;
}

@keyframes chat-caret {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

/* Canned prompt chips — no free-form input */
.ai-chat-prompts {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 14px 10px;
    border-top: 1px solid var(--border);
    background: rgba(8, 7, 6, 0.88);
}

.ai-chat-prompt-btn {
    appearance: none;
    border: 1px solid rgba(201, 168, 108, 0.28);
    background: rgba(201, 168, 108, 0.06);
    color: var(--gold-soft);
    font-family: var(--font-ui);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    padding: 8px 12px;
    border-radius: 999px;
    cursor: pointer;
    transition:
        background 0.2s var(--ease-out-expo),
        border-color 0.2s var(--ease-out-expo),
        transform 0.2s var(--ease-out-expo),
        box-shadow 0.2s var(--ease-out-expo);
    line-height: 1.25;
}

.ai-chat-prompt-btn:hover:not(:disabled) {
    background: rgba(201, 168, 108, 0.16);
    border-color: rgba(232, 213, 163, 0.5);
    box-shadow: 0 0 18px rgba(201, 168, 108, 0.18);
    transform: translateY(-1px);
}

.ai-chat-prompt-btn:active:not(:disabled) {
    transform: translateY(0);
}

.ai-chat-prompt-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.ai-chat-footer {
    flex-shrink: 0;
    padding: 8px 16px 12px;
    border-top: 1px solid rgba(201, 168, 108, 0.06);
    background: rgba(6, 5, 4, 0.9);
}

.ai-chat-hint {
    font-family: var(--font-data);
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    text-transform: uppercase;
}

.ai-chat-hint code {
    font-family: inherit;
    color: var(--text-tertiary);
    text-transform: none;
    letter-spacing: 0;
}

/* Responsive: stack grade + chat */
@media (max-width: 960px) {
    .ai-stage-layout {
        grid-template-columns: 1fr;
    }

    .ai-chat {
        min-height: 420px;
        max-height: none;
    }

    #stage-ai .ai-analysis-panel {
        min-height: auto;
    }
}

@media (max-width: 640px) {
    #stage-ledger .table-scroll {
        max-height: 55vh;
    }

    .ai-chat-prompts {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 12px;
    }

    .ai-chat-prompt-btn {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .ai-chat-bubble {
        max-width: 88%;
        font-size: 0.84rem;
    }
}

/* ═══════════════════════════════════════════════════════════
   Planning — fill height with categories; compact controls
   ═══════════════════════════════════════════════════════════ */
#stage-planning .planning-stage-card {
    min-height: min(88vh, 900px) !important;
    gap: 10px !important;
}

#stage-planning .income-budget-content {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    gap: 8px !important;
}

#stage-planning .mixing-board-container {
    flex: 1 1 auto !important;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    grid-auto-rows: 1fr !important;
    align-content: stretch !important;
    gap: 8px !important;
    min-height: 0 !important;
    height: 100%;
}

#stage-planning .budget-item {
    min-height: 0 !important;
    height: 100% !important;
    justify-content: space-between !important;
    padding: 8px 8px 10px !important;
    gap: 6px !important;
}

#stage-planning .budget-amount-input,
#stage-planning .income-amount-input {
    font-size: clamp(0.95rem, 1.4vw, 1.2rem) !important;
    padding: 6px 4px !important;
}

#stage-planning .budget-spinner-btn,
.budget-spinner-btn {
    width: 26px !important;
    height: 26px !important;
}

#stage-planning .budget-controls-row {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 2px !important;
    margin-bottom: 0 !important;
    flex-shrink: 0 !important;
    grid-template-columns: none !important;
}

#stage-planning .budget-control-btn,
#stage-planning .budget-control-btn--compact {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 30px !important;
    height: 30px !important;
    padding: 0 12px !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    border-radius: 999px !important;
    line-height: 1 !important;
}

@media (max-width: 1100px) {
    #stage-planning .mixing-board-container {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 900px) {
    #stage-planning .mixing-board-container {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        grid-auto-rows: minmax(120px, 1fr) !important;
    }
}
@media (max-width: 560px) {
    #stage-planning .mixing-board-container {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   Purchases — 2×2 floor blockers (car, house, college, medical)
   ═══════════════════════════════════════════════════════════ */
.purchases-sym-grid,
.main-layout.purchases-sym-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

.purchases-sym-grid > .panel,
.purchases-sym-grid > #carPanel,
.purchases-sym-grid > #housePanel,
.purchases-sym-grid > #collegePanel,
.purchases-sym-grid > #medicalPanel {
    min-height: 0 !important;
    padding: 14px 16px !important;
}

.purchases-sym-grid .form-helper {
    font-size: 0.68rem !important;
    margin-top: 2px !important;
}

.purchases-sym-grid .form-group {
    margin-bottom: 8px !important;
}

.purchases-sym-grid .form-label {
    font-size: 0.72rem !important;
    margin-bottom: 4px !important;
}

.purchases-sym-grid .form-input {
    padding: 8px 10px !important;
    font-size: 0.88rem !important;
    min-height: 38px !important;
}

#stage-purchases .purchases-stage-card {
    min-height: min(88vh, 920px) !important;
    justify-content: flex-start !important;
}

#stage-purchases .purchases-stage-card > .panel-title {
    margin-bottom: 12px !important;
}

@media (max-width: 900px) {
    .purchases-sym-grid,
    .main-layout.purchases-sym-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   Viability metrics — denser grid, uniform large values
   ═══════════════════════════════════════════════════════════ */
#stage-viability .viability-dashboard,
#stage-viability .affordability-banner {
    min-height: min(88vh, 920px) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    padding: clamp(18px, 2.2vw, 28px) !important;
}

.affordability-core-metrics {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin: 0 !important;
}

.affordability-metrics {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin: 0 !important;
}

#stage-viability .core-metric,
#stage-viability .mini-metric {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    padding: 16px 16px 14px !important;
    min-height: 112px !important;
    border: 1px solid var(--border) !important;
    background: rgba(0, 0, 0, 0.32) !important;
    border-radius: 4px !important;
}

#stage-viability .core-metric-label,
#stage-viability .mini-metric-label {
    font-family: var(--font-data) !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--text-tertiary) !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

#stage-viability .core-metric-value,
#stage-viability .mini-metric-value {
    font-family: var(--font-data) !important;
    font-size: clamp(1.45rem, 2.6vw, 1.95rem) !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em !important;
    color: var(--gold-soft) !important;
    margin: 0 !important;
    font-variant-numeric: tabular-nums !important;
}

#stage-viability .core-metric-status,
#stage-viability .mini-metric-trend {
    font-family: var(--font-ui) !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.02em !important;
    margin-top: auto !important;
}

#stage-viability .metric-explain {
    display: none !important;
}

#stage-viability .viability-insight-row {
    margin-top: auto !important;
    gap: 10px !important;
}

@media (max-width: 1100px) {
    .affordability-core-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .affordability-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 640px) {
    .affordability-core-metrics,
    .affordability-metrics {
        grid-template-columns: 1fr !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   Budget pie — half donut | no-scroll legend grid
   ═══════════════════════════════════════════════════════════ */
#stage-budget .chart-container.stage-panel-card {
    display: flex !important;
    flex-direction: column !important;
    min-height: min(88vh, 900px) !important;
}

#stage-budget .budget-pie-container,
#stage-budget .budget-pie-split {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    margin-top: 8px !important;
}

#stage-budget .budget-pie-chart-wrapper,
#stage-budget .budget-pie-split-grid {
    display: grid !important;
    /* ~70% donut / ~30% key */
    grid-template-columns: minmax(0, 7fr) minmax(140px, 3fr) !important;
    gap: clamp(12px, 2vw, 20px) !important;
    align-items: stretch !important;
    width: 100% !important;
    flex: 1 1 auto !important;
    min-height: min(52vh, 480px) !important;
}

#stage-budget .budget-pie-chart-stage {
    width: 100% !important;
    max-width: min(520px, 100%) !important;
    aspect-ratio: 1 / 1 !important;
    margin: auto !important;
    height: auto !important;
    min-height: 0 !important;
    align-self: center !important;
}

#stage-budget .budget-pie-canvas {
    width: 100% !important;
    height: 100% !important;
}

/* Legend: multi-column array, never scroll */
#stage-budget .budget-pie-legend,
#stage-budget .budget-pie-legend--panel {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)) !important;
    grid-auto-rows: min-content !important;
    gap: 6px !important;
    align-content: center !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    overflow: hidden !important;
    overflow-y: hidden !important;
    padding: 2px !important;
    min-height: 0 !important;
}

#stage-budget .budget-pie-legend.is-dense {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
    gap: 4px !important;
}

#stage-budget .budget-pie-legend.is-ultra-dense {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important;
    gap: 3px !important;
}

#stage-budget .budget-pie-legend-item {
    display: grid !important;
    grid-template-columns: 8px minmax(0, 1fr) !important;
    gap: 8px !important;
    align-items: center !important;
    padding: 8px 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

#stage-budget .budget-pie-legend.is-dense .budget-pie-legend-item {
    padding: 6px 8px !important;
    gap: 6px !important;
}

#stage-budget .budget-pie-legend.is-ultra-dense .budget-pie-legend-item {
    padding: 5px 6px !important;
    gap: 5px !important;
}

#stage-budget .budget-pie-legend-text {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 2px !important;
    min-width: 0 !important;
}

#stage-budget .budget-pie-legend-name {
    font-size: 0.72rem !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

#stage-budget .budget-pie-legend.is-dense .budget-pie-legend-name,
#stage-budget .budget-pie-legend.is-ultra-dense .budget-pie-legend-name {
    font-size: 0.66rem !important;
}

#stage-budget .budget-pie-legend-details {
    display: flex !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
    font-size: 0.68rem !important;
    flex-wrap: wrap !important;
}

#stage-budget .budget-pie-legend.is-ultra-dense .budget-pie-legend-details {
    font-size: 0.62rem !important;
}

#stage-budget .budget-pie-legend-more {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 10px !important;
    border: 1px dashed rgba(201, 168, 108, 0.28) !important;
    border-radius: var(--radius-atelier, 2px) !important;
    font-family: var(--font-data) !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.06em !important;
    color: var(--text-tertiary) !important;
    background: rgba(0, 0, 0, 0.25) !important;
    grid-column: auto !important;
}

#stage-budget .budget-pie-legend-item.is-hidden-legend {
    display: none !important;
}

@media (max-width: 860px) {
    #stage-budget .budget-pie-chart-wrapper,
    #stage-budget .budget-pie-split-grid {
        grid-template-columns: 1fr !important;
        min-height: 0 !important;
    }
    #stage-budget .budget-pie-chart-stage {
        max-width: min(260px, 68vw) !important;
    }
    #stage-budget .budget-pie-legend,
    #stage-budget .budget-pie-legend--panel {
        height: auto !important;
        max-height: none !important;
        overflow: hidden !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   App + Outro — same full-width margins as every other stage
   ═══════════════════════════════════════════════════════════ */
#stage-app.stage-panel,
#stage-outro.stage-panel {
    min-height: auto !important;
    min-height: unset !important;
    justify-content: flex-start !important;
    /* Same vertical stage padding as densify pass on all stages */
    padding: clamp(12px, 2vh, 24px) 0 !important;
    opacity: 1 !important;
    transform: none !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: normal !important;
    width: 100% !important;
    align-items: stretch !important;
}

/* Match other .stage-panel-card: full rail width, no 1120px shrink */
#stage-app .app-stage-card,
#stage-outro .outro-stage-card,
.stage-app .app-stage-card,
.stage-outro .outro-stage-card {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
    /* Same inset as densify stage cards */
    padding: clamp(18px, 2.2vw, 28px) !important;
}

.app-stage-grid {
    flex: 0 0 auto !important;
    align-items: center !important;
    gap: clamp(20px, 3vw, 40px) !important;
    min-height: 0 !important;
    width: 100% !important;
}

#stage-app .app-launch-visual {
    min-height: 0 !important;
}

#stage-app .app-launch-phone {
    transform: none !important;
}

#stage-app .app-launch-stores {
    border-top: none !important;
    padding-top: 4px !important;
    align-items: flex-start !important;
}

#stage-app .app-launch-stores-row {
    justify-content: flex-start !important;
}

#stage-outro .outro-stage-card {
    gap: 18px !important;
}

.outro-stage-inner {
    flex: 0 0 auto !important;
    justify-content: flex-start !important;
    gap: 18px !important;
    width: 100% !important;
}

#stage-outro .footer-outro-brand {
    text-align: left !important;
    max-width: none !important;
    margin: 0 !important;
}

#stage-outro .footer-brand {
    font-size: clamp(1.6rem, 3vw, 2.25rem) !important;
    letter-spacing: 0.14em !important;
    margin-bottom: 8px !important;
}

#stage-outro .footer-pitch {
    max-width: 52ch;
    font-size: 0.92rem !important;
}

#stage-outro .outro-footer-grid,
#stage-outro .footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    justify-items: start !important;
    text-align: left !important;
    padding: 18px 0 !important;
    gap: 16px 24px !important;
    width: 100% !important;
}

#stage-outro .footer-col {
    max-width: none !important;
}

#stage-outro .footer-nav {
    align-items: flex-start !important;
}

#stage-outro .footer-social-row {
    justify-content: flex-start !important;
}

#stage-outro .footer-bottom {
    justify-content: space-between !important;
    text-align: left !important;
    padding-top: 12px !important;
    width: 100% !important;
}

/* Tighten gap between app and outro stages */
#stage-app + #stage-outro {
    padding-top: 4px !important;
}

@media (max-width: 900px) {
    #stage-app .app-stage-card,
    #stage-outro .outro-stage-card {
        width: 100% !important;
        max-width: 100% !important;
    }
    #stage-outro .outro-footer-grid,
    #stage-outro .footer-grid {
        grid-template-columns: 1fr !important;
    }
    #stage-outro .footer-bottom {
        flex-direction: column;
        align-items: flex-start !important;
    }
}

/* Purchases grid fills stage height */
#stage-purchases .purchases-stage-card {
    display: flex !important;
    flex-direction: column !important;
}
#stage-purchases .purchases-sym-grid {
    flex: 1 1 auto !important;
    align-content: stretch !important;
    min-height: 0 !important;
}
#stage-purchases .purchases-sym-grid > .panel {
    height: 100% !important;
}

/* Planning: pin controls flush under stretched board */
#stage-planning .planning-stage-card {
    padding-bottom: 14px !important;
}
#stage-planning .budget-controls-row {
    margin-top: 0 !important;
    padding-top: 2px !important;
}

/* Stronger fill: planning categories claim remaining card height */
#stage-planning .income-budget-content.expanded,
#stage-planning .income-budget-content {
    flex: 1 1 auto !important;
    height: 100% !important;
    max-height: none !important;
}

#stage-planning .mixing-board-container {
    flex: 1 1 auto !important;
    height: 100% !important;
    min-height: 320px !important;
    grid-auto-rows: minmax(0, 1fr) !important;
}

/* Purchases: two equal rows that stretch to card bottom */
#stage-purchases .purchases-stage-card {
    min-height: min(88vh, 900px) !important;
}
#stage-purchases .purchases-sym-grid {
    flex: 1 1 auto !important;
    height: 100% !important;
    grid-template-rows: 1fr 1fr !important;
    align-items: stretch !important;
}
#stage-purchases .purchases-sym-grid > .panel {
    height: auto !important;
    min-height: 0 !important;
    overflow: auto;
}

/* ═══════════════════════════════════════════════════════════
   Budget amount faces — instrument-style currency readouts
   ═══════════════════════════════════════════════════════════ */
#stage-planning .budget-amount-face,
.budget-amount-face {
    position: relative !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 2px !important;
    width: 100% !important;
    min-height: 44px !important;
    padding: 0 8px !important;
    border-radius: 4px !important;
    border: 1px solid rgba(201, 168, 108, 0.22) !important;
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(201, 168, 108, 0.12), transparent 55%),
        linear-gradient(180deg, rgba(22, 18, 14, 0.95), rgba(6, 5, 4, 0.98)) !important;
    box-shadow:
        inset 0 1px 0 rgba(232, 213, 163, 0.1),
        inset 0 -10px 22px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(0, 0, 0, 0.35) !important;
    overflow: hidden !important;
    transition:
        border-color 0.25s ease,
        box-shadow 0.3s ease,
        background 0.3s ease !important;
}

#stage-planning .budget-amount-face::after,
.budget-amount-face::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        105deg,
        transparent 35%,
        rgba(232, 213, 163, 0.05) 48%,
        transparent 62%
    );
    opacity: 0.7;
}

#stage-planning .budget-amount-face:hover:not(.is-disabled),
.budget-amount-face:hover:not(.is-disabled) {
    border-color: rgba(232, 213, 163, 0.4) !important;
    box-shadow:
        inset 0 1px 0 rgba(232, 213, 163, 0.16),
        inset 0 -10px 22px rgba(0, 0, 0, 0.3),
        0 0 18px rgba(201, 168, 108, 0.12) !important;
}

#stage-planning .budget-amount-face:focus-within,
.budget-amount-face:focus-within {
    border-color: rgba(232, 213, 163, 0.55) !important;
    box-shadow:
        inset 0 1px 0 rgba(232, 213, 163, 0.2),
        0 0 0 3px rgba(201, 168, 108, 0.12),
        0 0 22px rgba(201, 168, 108, 0.18) !important;
}

/* Income gets a hotter gold bezel */
#stage-planning .budget-amount-face--income,
.budget-amount-face--income {
    border-color: rgba(232, 213, 163, 0.38) !important;
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(232, 213, 163, 0.18), transparent 58%),
        linear-gradient(180deg, rgba(36, 28, 16, 0.98), rgba(8, 6, 4, 0.99)) !important;
    box-shadow:
        inset 0 1px 0 rgba(232, 213, 163, 0.18),
        inset 0 -12px 24px rgba(0, 0, 0, 0.4),
        0 0 16px rgba(201, 168, 108, 0.1) !important;
}

#stage-planning .budget-amount-prefix,
.budget-amount-prefix {
    position: relative;
    z-index: 1;
    font-family: var(--font-display), "Cormorant Garamond", Georgia, serif !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    font-style: italic !important;
    color: rgba(232, 213, 163, 0.72) !important;
    line-height: 1 !important;
    padding: 0 1px 0 2px !important;
    user-select: none;
    text-shadow: 0 0 12px rgba(201, 168, 108, 0.25);
}

#stage-planning .budget-amount-face--income .budget-amount-prefix {
    color: var(--gold-soft) !important;
    text-shadow: 0 0 14px rgba(232, 213, 163, 0.45);
}

#stage-planning .budget-amount-suffix,
.budget-amount-suffix {
    position: relative;
    z-index: 1;
    font-family: var(--font-data), "JetBrains Mono", monospace !important;
    font-size: 0.52rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: rgba(244, 239, 230, 0.38) !important;
    line-height: 1 !important;
    padding: 0 2px 0 0 !important;
    user-select: none;
    white-space: nowrap;
}

/* The number itself — cool instrument digits */
#stage-planning .budget-amount-face .budget-amount-input,
#stage-planning .budget-amount-face .income-amount-input,
.budget-amount-face .budget-amount-input,
.budget-amount-face .income-amount-input {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: center !important;
    font-family: var(--font-data), "JetBrains Mono", ui-monospace, monospace !important;
    font-weight: 600 !important;
    font-variant-numeric: tabular-nums !important;
    letter-spacing: -0.04em !important;
    line-height: 1.05 !important;
    padding: 10px 0 !important;
    color: var(--gold-soft) !important;
    text-shadow:
        0 0 18px rgba(201, 168, 108, 0.35),
        0 1px 0 rgba(0, 0, 0, 0.6) !important;
    /* default size; digit-scale overrides below */
    font-size: 1.35rem !important;
    -moz-appearance: textfield !important;
    appearance: textfield !important;
    /* No font-size transition — avoids small→large phase after load/fit */
    transition: color 0.2s ease, text-shadow 0.25s ease !important;
}

#stage-planning .budget-amount-face--income .income-amount-input {
    color: #f3e6c4 !important;
    text-shadow:
        0 0 22px rgba(232, 213, 163, 0.5),
        0 0 40px rgba(201, 168, 108, 0.18),
        0 1px 0 rgba(0, 0, 0, 0.55) !important;
    font-size: 1.4rem !important;
}

/* Scale type to fit longer numbers in the same slot */
#stage-planning .budget-amount-face[data-digits="1"] .budget-amount-input,
#stage-planning .budget-amount-face[data-digits="2"] .budget-amount-input,
#stage-planning .budget-amount-face[data-digits="3"] .budget-amount-input {
    font-size: 1.42rem !important;
}
#stage-planning .budget-amount-face[data-digits="4"] .budget-amount-input {
    font-size: 1.22rem !important;
    letter-spacing: -0.05em !important;
}
#stage-planning .budget-amount-face[data-digits="5"] .budget-amount-input,
#stage-planning .budget-amount-face[data-digits="6"] .budget-amount-input {
    font-size: 1.05rem !important;
    letter-spacing: -0.055em !important;
}
#stage-planning .budget-amount-face[data-digits="7"] .budget-amount-input,
#stage-planning .budget-amount-face[data-digits="8"] .budget-amount-input {
    font-size: 0.92rem !important;
    letter-spacing: -0.06em !important;
}

#stage-planning .budget-amount-face--income[data-digits="4"] .income-amount-input {
    font-size: 1.28rem !important;
}
#stage-planning .budget-amount-face--income[data-digits="5"] .income-amount-input {
    font-size: 1.12rem !important;
}

#stage-planning .budget-amount-face .budget-amount-input:focus,
.budget-amount-face .budget-amount-input:focus {
    outline: none !important;
    color: #fff6e0 !important;
    text-shadow:
        0 0 24px rgba(232, 213, 163, 0.65),
        0 0 8px rgba(201, 168, 108, 0.4) !important;
}

#stage-planning .budget-amount-face.is-disabled,
.budget-amount-face.is-disabled {
    opacity: 0.42 !important;
    filter: grayscale(0.25);
}

/* kill plain wrapper chrome that fights the face */
#stage-planning .budget-amount-face.budget-amount-input-wrapper {
    background-clip: padding-box !important;
}

/* denser planning pass already shrinks cards — keep face compact */
#stage-planning .budget-item .budget-amount-face {
    min-height: 40px !important;
}
#stage-planning .budget-item .budget-amount-face .budget-amount-input {
    padding: 8px 0 !important;
}

/* ═══════════════════════════════════════════════════════════
   Planning cards — pack layout, amount fills empty vertical space
   ═══════════════════════════════════════════════════════════ */
#stage-planning .budget-item {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 8px 8px 7px !important;
    gap: 6px !important;
    justify-content: flex-start !important;
}

#stage-planning .budget-item-top {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    width: 100% !important;
}

#stage-planning .budget-item-name,
#stage-planning .budget-name-input {
    font-size: 0.68rem !important;
    letter-spacing: 0.05em !important;
    padding: 0 2px 2px !important;
    height: auto !important;
    min-height: 0 !important;
    line-height: 1.2 !important;
}

/* Amount block claims remaining card height */
#stage-planning .budget-item-amount-row {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    gap: 6px !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: none !important;
}

/* − | face | +  fills middle */
#stage-planning .budget-amount-stack {
    flex: 1 1 auto !important;
    display: grid !important;
    grid-template-columns: 26px minmax(0, 1fr) 26px !important;
    gap: 5px !important;
    align-items: stretch !important;
    min-height: 0 !important;
    width: 100% !important;
}

#stage-planning .budget-amount-stack .budget-spinner-btn {
    width: 26px !important;
    height: auto !important;
    min-height: 100% !important;
    align-self: stretch !important;
    border-radius: 4px !important;
    padding: 0 !important;
}

#stage-planning .budget-amount-stack .budget-amount-face {
    height: 100% !important;
    min-height: 0 !important;
    align-self: stretch !important;
}

/* Grow the readout — this is where empty space goes */
#stage-planning .budget-amount-face {
    min-height: 0 !important;
    height: 100% !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-content: center !important;
    align-items: center !important;
    padding: 4px 6px !important;
}

#stage-planning .budget-amount-face .budget-amount-input,
#stage-planning .budget-amount-face .income-amount-input {
    padding: 0 !important;
    /* taller face → larger type */
    font-size: clamp(1.15rem, 2.4vh, 1.65rem) !important;
    line-height: 1 !important;
}

#stage-planning .budget-amount-face--income .income-amount-input {
    font-size: clamp(1.2rem, 2.6vh, 1.75rem) !important;
}

/* digit-scale still wins for long numbers */
#stage-planning .budget-amount-face[data-digits="4"] .budget-amount-input {
    font-size: clamp(1.05rem, 2.1vh, 1.4rem) !important;
}
#stage-planning .budget-amount-face[data-digits="5"] .budget-amount-input,
#stage-planning .budget-amount-face[data-digits="6"] .budget-amount-input {
    font-size: clamp(0.92rem, 1.8vh, 1.2rem) !important;
}
#stage-planning .budget-amount-face[data-digits="7"] .budget-amount-input,
#stage-planning .budget-amount-face[data-digits="8"] .budget-amount-input {
    font-size: clamp(0.8rem, 1.5vh, 1.05rem) !important;
}

#stage-planning .budget-amount-prefix {
    font-size: clamp(0.85rem, 1.8vh, 1.1rem) !important;
}
#stage-planning .budget-amount-suffix {
    font-size: 0.5rem !important;
    align-self: end !important;
    margin-bottom: 0.35em !important;
}

/* Toggle / delete — single compact footer bar */
#stage-planning .budget-item-toggle-row {
    flex: 0 0 auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 0 !important;
    padding-top: 0 !important;
}

#stage-planning .budget-item-toggle-row .toggle-switch {
    transform: scale(0.92);
    transform-origin: center;
}

#stage-planning .budget-item-delete {
    width: 22px !important;
    height: 22px !important;
    font-size: 0.9rem !important;
    line-height: 1 !important;
    padding: 0 !important;
}

/* Kill leftover spinner-row chrome (spinners live in stack now) */
#stage-planning .budget-spinner-controls {
    display: none !important;
}

/* Slightly denser board gap so cards feel fuller */
#stage-planning .mixing-board-container {
    gap: 7px !important;
    align-content: stretch !important;
    grid-auto-rows: 1fr !important;
}

/* ═══════════════════════════════════════════════════════════
   ATELIER TILES — Awwwards-grade vault ledger cards
   Editorial · Swiss precision · private banking atmosphere
   ═══════════════════════════════════════════════════════════ */

#stage-planning .mixing-board-container {
    gap: 10px !important;
    align-content: stretch !important;
    grid-auto-rows: 1fr !important;
}

/* ── Tile shell ─────────────────────────────────────────── */
#stage-planning .budget-item.atelier-tile {
    --tile-pad: 12px;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: var(--tile-pad) !important;
    gap: 0 !important;
    overflow: hidden !important;
    isolation: isolate;
    border: 1px solid rgba(201, 168, 108, 0.14) !important;
    border-radius: 3px !important;
    background:
        linear-gradient(165deg, rgba(18, 15, 12, 0.92) 0%, rgba(7, 6, 5, 0.98) 100%) !important;
    box-shadow:
        0 1px 0 rgba(232, 213, 163, 0.04) inset,
        0 12px 28px rgba(0, 0, 0, 0.35) !important;
    transition:
        transform 0.45s var(--ease-out-expo),
        border-color 0.4s ease,
        box-shadow 0.5s var(--ease-out-expo) !important;
    /* kill legacy rails */
}

#stage-planning .budget-item.atelier-tile::before {
    display: none !important;
}

#stage-planning .budget-item.atelier-tile:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(232, 213, 163, 0.32) !important;
    box-shadow:
        0 1px 0 rgba(232, 213, 163, 0.1) inset,
        0 0 0 1px rgba(201, 168, 108, 0.08),
        0 22px 40px rgba(0, 0, 0, 0.45),
        0 0 48px rgba(201, 168, 108, 0.07) !important;
    z-index: 2;
}

#stage-planning .budget-item.atelier-tile.disabled {
    opacity: 0.48 !important;
    filter: saturate(0.55);
}

#stage-planning .budget-item.atelier-tile.disabled:hover {
    transform: none !important;
}

/* Ambient gold bloom — shifts per tile index */
#stage-planning .atelier-tile .tile-aura {
    position: absolute;
    inset: -20% -10% auto -10%;
    height: 70%;
    background:
        radial-gradient(
            ellipse 70% 55% at 50% 0%,
            rgba(201, 168, 108, calc(0.07 + (var(--tile-i, 0) * 0.008))),
            transparent 70%
        );
    pointer-events: none;
    z-index: 0;
    opacity: 0.85;
    transition: opacity 0.45s ease;
}

#stage-planning .atelier-tile:hover .tile-aura {
    opacity: 1;
}

/* Hairline frame corners */
#stage-planning .atelier-tile .tile-edge {
    position: absolute;
    inset: 6px;
    border: 1px solid rgba(201, 168, 108, 0.06);
    border-radius: 1px;
    pointer-events: none;
    z-index: 0;
    transition: border-color 0.4s ease;
}

#stage-planning .atelier-tile:hover .tile-edge {
    border-color: rgba(232, 213, 163, 0.14);
}

/* Income hero tile */
#stage-planning .atelier-tile--income {
    border-color: rgba(232, 213, 163, 0.28) !important;
    background:
        radial-gradient(ellipse 90% 60% at 50% -10%, rgba(232, 213, 163, 0.14), transparent 55%),
        linear-gradient(165deg, rgba(28, 22, 14, 0.96) 0%, rgba(8, 6, 4, 0.99) 100%) !important;
    box-shadow:
        0 1px 0 rgba(232, 213, 163, 0.12) inset,
        0 14px 32px rgba(0, 0, 0, 0.4),
        0 0 40px rgba(201, 168, 108, 0.08) !important;
}

#stage-planning .atelier-tile--income .tile-aura {
    background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(232, 213, 163, 0.18), transparent 68%);
}

/* ── Head: index · role · power ─────────────────────────── */
#stage-planning .tile-head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    min-height: 22px;
    margin-bottom: 2px;
}

#stage-planning .tile-index {
    font-family: var(--font-data);
    font-size: 0.58rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    color: rgba(232, 213, 163, 0.55);
    line-height: 1;
}

#stage-planning .tile-role {
    font-family: var(--font-data);
    font-size: 0.52rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(244, 239, 230, 0.28);
    line-height: 1;
}

#stage-planning .atelier-tile--income .tile-role {
    color: rgba(232, 213, 163, 0.55);
}

#stage-planning .tile-head-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Power pill — refined status, not a chunky toggle */
#stage-planning .tile-power {
    appearance: none;
    border: 1px solid rgba(201, 168, 108, 0.22);
    background: rgba(0, 0, 0, 0.35);
    width: 28px;
    height: 16px;
    border-radius: 999px;
    padding: 0 3px;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.3s ease;
}

#stage-planning .tile-power-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(244, 239, 230, 0.28);
    transition: transform 0.3s var(--ease-out-expo), background 0.25s ease, box-shadow 0.3s ease;
    transform: translateX(0);
}

#stage-planning .tile-power.is-on {
    border-color: rgba(232, 213, 163, 0.45);
    background: rgba(201, 168, 108, 0.12);
    box-shadow: 0 0 12px rgba(201, 168, 108, 0.15);
}

#stage-planning .tile-power.is-on .tile-power-dot {
    background: var(--gold-soft);
    box-shadow: 0 0 8px rgba(232, 213, 163, 0.7);
    transform: translateX(12px);
}

#stage-planning .tile-power:hover {
    border-color: rgba(232, 213, 163, 0.4);
}

#stage-planning .tile-x {
    appearance: none;
    border: none;
    background: transparent;
    color: rgba(244, 239, 230, 0.28);
    width: 20px;
    height: 20px;
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 2px;
    display: grid;
    place-items: center;
    padding: 0;
    transition: color 0.2s ease, background 0.2s ease;
}

#stage-planning .tile-x:hover {
    color: var(--danger) !important;
    background: rgba(224, 122, 106, 0.1);
}

/* ── Body ───────────────────────────────────────────────── */
#stage-planning .tile-body {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    min-height: 0;
    gap: 4px;
    padding-top: 4px;
}

/* Category name — quiet editorial label */
#stage-planning .atelier-tile .tile-label,
#stage-planning .atelier-tile .budget-item-name,
#stage-planning .atelier-tile .budget-name-input {
    flex: 0 0 auto !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 2px !important;
    border: none !important;
    border-bottom: 1px solid transparent !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: center !important;
    font-family: var(--font-ui), Syne, system-ui, sans-serif !important;
    font-size: 0.78rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: rgba(244, 239, 230, 0.78) !important;
    line-height: 1.25 !important;
    min-height: 0 !important;
    height: auto !important;
}

#stage-planning .atelier-tile .tile-label:focus,
#stage-planning .atelier-tile .budget-item-name:focus {
    border-bottom-color: rgba(232, 213, 163, 0.35) !important;
    color: var(--gold-soft) !important;
    outline: none !important;
}

#stage-planning .atelier-tile--income .tile-label {
    color: rgba(232, 213, 163, 0.72) !important;
    letter-spacing: 0.16em !important;
}

/* Meter: −  amount  + */
#stage-planning .tile-meter {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) 22px;
    gap: 2px;
    align-items: center;
    min-height: 0;
    width: 100%;
}

#stage-planning .tile-step {
    appearance: none;
    border: none;
    background: transparent;
    color: rgba(232, 213, 163, 0.38);
    font-family: var(--font-display), Georgia, serif;
    font-size: 1.15rem;
    font-weight: 400;
    line-height: 1;
    height: 100%;
    min-height: 48px;
    cursor: pointer;
    padding: 0;
    display: grid;
    place-items: center;
    transition: color 0.2s ease, text-shadow 0.25s ease, transform 0.2s var(--ease-out-expo);
    user-select: none;
}

#stage-planning .tile-step:hover:not(:disabled) {
    color: var(--gold-soft);
    text-shadow: 0 0 12px rgba(201, 168, 108, 0.45);
    transform: scale(1.12);
}

#stage-planning .tile-step:active:not(:disabled) {
    transform: scale(0.94);
}

#stage-planning .tile-step:disabled {
    opacity: 0.25;
    cursor: not-allowed;
}

/* Value — the hero of the tile */
#stage-planning .atelier-tile .tile-value-wrap,
#stage-planning .atelier-tile .budget-amount-face {
    position: relative !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    justify-content: center !important;
    gap: 1px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 6px 0 2px !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    grid-template-columns: none !important;
}

/* 4+ digits: K/M overlay — identical mono face + scale as raw tile values */
#stage-planning .atelier-tile .budget-amount-face[data-compact="1"] .tile-value-compact {
    display: inline-block !important;
    font-family: var(--font-data), "JetBrains Mono", ui-monospace, monospace !important;
    font-weight: 500 !important;
    font-variant-numeric: tabular-nums !important;
    /* Match #stage-planning .atelier-tile .tile-value scale so K doesn’t look “foreign” */
    font-size: clamp(1.85rem, 4.8vh, 2.85rem) !important;
    letter-spacing: -0.045em !important;
    line-height: 0.95 !important;
    color: #f6edd8 !important;
    white-space: nowrap !important;
    text-shadow:
        0 0 28px rgba(201, 168, 108, 0.22),
        0 1px 0 rgba(0, 0, 0, 0.5) !important;
}
#stage-planning .atelier-tile--income .budget-amount-face[data-compact="1"] .tile-value-compact {
    color: #faf0d4 !important;
    font-size: clamp(1.95rem, 5vh, 3rem) !important;
    text-shadow:
        0 0 32px rgba(232, 213, 163, 0.35),
        0 0 60px rgba(201, 168, 108, 0.12),
        0 1px 0 rgba(0, 0, 0, 0.45) !important;
}
#stage-planning .atelier-tile .budget-amount-face[data-compact="1"] .budget-amount-input,
#stage-planning .atelier-tile .budget-amount-face[data-compact="1"] .income-amount-input,
#stage-planning .atelier-tile .budget-amount-face[data-compact="1"] .tile-value {
    /* Hide raw digits under the compact label until focus */
    color: transparent !important;
    caret-color: var(--gold-soft) !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    opacity: 0 !important;
    position: absolute !important;
    inset: 0 !important;
}
#stage-planning .atelier-tile .budget-amount-face[data-compact="1"]:focus-within .tile-value-compact {
    display: none !important;
}
#stage-planning .atelier-tile .budget-amount-face[data-compact="1"]:focus-within .budget-amount-input,
#stage-planning .atelier-tile .budget-amount-face[data-compact="1"]:focus-within .income-amount-input,
#stage-planning .atelier-tile .budget-amount-face[data-compact="1"]:focus-within .tile-value {
    color: #f6edd8 !important;
    opacity: 1 !important;
    position: static !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 2ch !important;
    font-size: clamp(1.35rem, 3.2vh, 2rem) !important;
}
#stage-planning .atelier-tile--income .budget-amount-face[data-compact="1"]:focus-within .income-amount-input {
    color: #faf0d4 !important;
    font-size: clamp(1.45rem, 3.5vh, 2.15rem) !important;
}
#stage-planning .atelier-tile .tile-value-compact {
    display: none;
}

#stage-planning .atelier-tile .tile-value-wrap::after,
#stage-planning .atelier-tile .budget-amount-face::after {
    display: none !important;
}

#stage-planning .atelier-tile .tile-currency,
#stage-planning .atelier-tile .budget-amount-prefix {
    flex: 0 0 auto;
    font-family: var(--font-display), "Cormorant Garamond", Georgia, serif !important;
    font-size: clamp(1rem, 2.2vh, 1.35rem) !important;
    font-weight: 400 !important;
    font-style: italic !important;
    color: rgba(232, 213, 163, 0.55) !important;
    line-height: 1 !important;
    padding: 0 !important;
    text-shadow: none !important;
    transform: translateY(-0.05em);
}

#stage-planning .atelier-tile--income .tile-currency {
    color: rgba(232, 213, 163, 0.85) !important;
}

#stage-planning .atelier-tile .tile-value,
#stage-planning .atelier-tile .budget-amount-input,
#stage-planning .atelier-tile .income-amount-input {
    flex: 0 1 auto !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: center !important;
    font-family: var(--font-data), "JetBrains Mono", monospace !important;
    font-weight: 500 !important;
    font-variant-numeric: tabular-nums !important;
    letter-spacing: -0.045em !important;
    line-height: 0.95 !important;
    color: #f6edd8 !important;
    font-size: clamp(1.35rem, 3.2vh, 2rem) !important;
    text-shadow:
        0 0 28px rgba(201, 168, 108, 0.22),
        0 1px 0 rgba(0, 0, 0, 0.5) !important;
    -moz-appearance: textfield !important;
    appearance: textfield !important;
    /* No font-size transition — avoids small→large phase after load/fit */
    transition: color 0.2s ease, text-shadow 0.3s ease !important;
}

#stage-planning .atelier-tile--income .tile-value,
#stage-planning .atelier-tile--income .income-amount-input {
    color: #faf0d4 !important;
    font-size: clamp(1.45rem, 3.5vh, 2.15rem) !important;
    text-shadow:
        0 0 32px rgba(232, 213, 163, 0.35),
        0 0 60px rgba(201, 168, 108, 0.12),
        0 1px 0 rgba(0, 0, 0, 0.45) !important;
}

/* Digit scale for long values */
#stage-planning .atelier-tile .budget-amount-face[data-digits="4"] .tile-value,
#stage-planning .atelier-tile .budget-amount-face[data-digits="4"] .budget-amount-input {
    font-size: clamp(1.15rem, 2.6vh, 1.65rem) !important;
}
#stage-planning .atelier-tile .budget-amount-face[data-digits="5"] .tile-value,
#stage-planning .atelier-tile .budget-amount-face[data-digits="5"] .budget-amount-input,
#stage-planning .atelier-tile .budget-amount-face[data-digits="6"] .tile-value,
#stage-planning .atelier-tile .budget-amount-face[data-digits="6"] .budget-amount-input {
    font-size: clamp(0.98rem, 2.2vh, 1.35rem) !important;
}
#stage-planning .atelier-tile .budget-amount-face[data-digits="7"] .tile-value,
#stage-planning .atelier-tile .budget-amount-face[data-digits="7"] .budget-amount-input,
#stage-planning .atelier-tile .budget-amount-face[data-digits="8"] .tile-value,
#stage-planning .atelier-tile .budget-amount-face[data-digits="8"] .budget-amount-input {
    font-size: clamp(0.82rem, 1.8vh, 1.1rem) !important;
}

#stage-planning .atelier-tile .tile-value:focus,
#stage-planning .atelier-tile .budget-amount-input:focus {
    outline: none !important;
    color: #fff !important;
    text-shadow:
        0 0 24px rgba(232, 213, 163, 0.55),
        0 0 48px rgba(201, 168, 108, 0.25) !important;
}

/* Underline accent under the number */
#stage-planning .tile-meter {
    position: relative;
}
#stage-planning .tile-value-wrap {
    position: relative;
}
#stage-planning .tile-value-wrap::before {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(201, 168, 108, 0.35) 20%,
        rgba(232, 213, 163, 0.55) 50%,
        rgba(201, 168, 108, 0.35) 80%,
        transparent
    );
    opacity: 0.7;
    pointer-events: none;
}

#stage-planning .atelier-tile--income .tile-value-wrap::before {
    background: linear-gradient(
        90deg,
        transparent,
        rgba(232, 213, 163, 0.45) 15%,
        rgba(243, 230, 196, 0.75) 50%,
        rgba(232, 213, 163, 0.45) 85%,
        transparent
    );
    opacity: 1;
    box-shadow: 0 0 10px rgba(201, 168, 108, 0.25);
}

#stage-planning .tile-period {
    flex: 0 0 auto;
    display: block;
    text-align: center;
    font-family: var(--font-data);
    font-size: 0.5rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(244, 239, 230, 0.26);
    margin-top: 2px;
    line-height: 1;
}

#stage-planning .atelier-tile--income .tile-period {
    color: rgba(232, 213, 163, 0.4);
}

/* Hide legacy chrome inside atelier tiles */
#stage-planning .atelier-tile .budget-spinner-controls,
#stage-planning .atelier-tile .budget-item-toggle-row,
#stage-planning .atelier-tile .budget-amount-suffix,
#stage-planning .atelier-tile .toggle-switch {
    display: none !important;
}

#stage-planning .atelier-tile .budget-item-top {
    display: none !important;
}

/* Focus ring for keyboard */
#stage-planning .atelier-tile:focus-within {
    border-color: rgba(232, 213, 163, 0.4) !important;
    box-shadow:
        0 1px 0 rgba(232, 213, 163, 0.1) inset,
        0 0 0 1px rgba(201, 168, 108, 0.12),
        0 18px 36px rgba(0, 0, 0, 0.4),
        0 0 40px rgba(201, 168, 108, 0.1) !important;
}

@media (max-width: 900px) {
    #stage-planning .atelier-tile .tile-value,
    #stage-planning .atelier-tile .budget-amount-input {
        font-size: clamp(1.2rem, 4vw, 1.7rem) !important;
    }
}

/* Amplify hero number — own the vertical field */
#stage-planning .tile-body {
    justify-content: space-between !important;
    padding: 8px 0 2px !important;
    gap: 6px !important;
}

#stage-planning .tile-meter {
    flex: 1 1 auto !important;
    min-height: 72px !important;
}

#stage-planning .atelier-tile .tile-value-wrap,
#stage-planning .atelier-tile .budget-amount-face {
    height: 100% !important;
    min-height: 64px !important;
    align-items: center !important;
    padding: 0 !important;
}

#stage-planning .atelier-tile .tile-value,
#stage-planning .atelier-tile .budget-amount-input,
#stage-planning .atelier-tile .income-amount-input {
    font-size: clamp(1.55rem, 4.2vh, 2.35rem) !important;
    font-weight: 600 !important;
    letter-spacing: -0.055em !important;
}
/* Compact K/M must match the amplified tile-value scale above (same mono + weight) */
#stage-planning .atelier-tile .budget-amount-face[data-compact="1"] .tile-value-compact {
    font-family: var(--font-data), "JetBrains Mono", ui-monospace, monospace !important;
    font-size: clamp(1.55rem, 4.2vh, 2.35rem) !important;
    font-weight: 600 !important;
    letter-spacing: -0.055em !important;
    line-height: 0.95 !important;
    color: #f6edd8 !important;
}
#stage-planning .atelier-tile--income .budget-amount-face[data-compact="1"] .tile-value-compact {
    font-size: clamp(1.65rem, 4.5vh, 2.5rem) !important;
    color: #faf0d4 !important;
}
#stage-planning .atelier-tile--income .tile-value,
#stage-planning .atelier-tile--income .income-amount-input {
    font-size: clamp(1.65rem, 4.5vh, 2.5rem) !important;
}

#stage-planning .atelier-tile--income .tile-value,
#stage-planning .atelier-tile--income .income-amount-input {
    font-size: clamp(1.7rem, 4.6vh, 2.55rem) !important;
}

#stage-planning .atelier-tile .tile-currency,
#stage-planning .atelier-tile .budget-amount-prefix {
    font-size: clamp(1.15rem, 2.8vh, 1.55rem) !important;
}

#stage-planning .atelier-tile .budget-amount-face[data-digits="4"] .tile-value,
#stage-planning .atelier-tile .budget-amount-face[data-digits="4"] .budget-amount-input {
    font-size: clamp(1.35rem, 3.4vh, 1.95rem) !important;
}
#stage-planning .atelier-tile .budget-amount-face[data-digits="5"] .tile-value,
#stage-planning .atelier-tile .budget-amount-face[data-digits="5"] .budget-amount-input,
#stage-planning .atelier-tile .budget-amount-face[data-digits="6"] .tile-value,
#stage-planning .atelier-tile .budget-amount-face[data-digits="6"] .budget-amount-input {
    font-size: clamp(1.1rem, 2.8vh, 1.55rem) !important;
}

#stage-planning .tile-step {
    font-size: 1.35rem !important;
    color: rgba(232, 213, 163, 0.32);
}

#stage-planning .tile-value-wrap::before {
    bottom: 8px;
}

/* ═══════════════════════════════════════════════════════════
   ONE-VIEWPORT STAGES — Apple-crisp, no within-page scroll
   Each snap stage = exactly one screen; content flexes to fit
   ═══════════════════════════════════════════════════════════ */

html.stages-armed {
    scroll-snap-type: y mandatory !important;
}

/* Stage = exact viewport frame */
.stage-panel.stage-snap,
.stage-panel,
#stage-planning.stage-panel,
#stage-purchases.stage-panel,
#stage-viability.stage-panel,
#stage-budget.stage-panel,
#stage-savings.stage-panel,
#stage-spending.stage-panel,
#stage-treemap.stage-panel,
#stage-ledger.stage-panel,
#stage-ai.stage-panel {
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: stretch !important;
    align-items: stretch !important;
    padding: clamp(6px, 1.2vh, 14px) 0 !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
}

/* App + Outro: still full-width, content-height but snap-friendly */
#stage-app.stage-panel,
#stage-outro.stage-panel {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: clamp(8px, 1.4vh, 16px) 0 !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: normal !important;
}

/* Card fills the stage frame — kill all forced tall min-heights */
.stage-panel > .stage-panel-card,
.stage-panel > .panel.stage-panel-card,
.stage-panel > .chart-container.stage-panel-card,
#stage-planning .planning-stage-card,
#stage-purchases .purchases-stage-card,
#stage-viability .viability-dashboard,
#stage-viability .affordability-banner,
#stage-budget .chart-container.stage-panel-card,
#stage-savings .chart-container.stage-panel-card,
#stage-spending .chart-container.stage-panel-card,
#stage-treemap .chart-container.stage-panel-card,
#stage-ledger .chart-container.stage-panel-card,
#stage-ai .ai-analysis-panel,
#stage-ai .stage-panel-card {
    flex: 1 1 auto !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
    padding: clamp(10px, 1.6vh, 18px) clamp(14px, 1.8vw, 24px) !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Compact chrome: titles / descriptions / walkthroughs */
.stage-panel .section-kicker {
    margin-bottom: 2px !important;
    font-size: 0.58rem !important;
    letter-spacing: 0.16em !important;
}

.stage-panel .chart-title,
.stage-panel .panel-title,
.stage-panel .planning-heading,
.stage-panel .ai-analysis-title,
.stage-panel .affordability-title {
    margin: 0 0 2px !important;
    font-size: clamp(1.05rem, 2vh, 1.45rem) !important;
    line-height: 1.15 !important;
}

.stage-panel .chart-description,
.stage-panel .affordability-subtitle {
    margin: 0 0 6px !important;
    font-size: 0.78rem !important;
    line-height: 1.35 !important;
    max-width: none !important;
    opacity: 0.78;
}

.stage-panel .chart-walkthrough {
    margin: 4px 0 8px !important;
    padding: 8px 12px !important;
    gap: 4px !important;
    flex: 0 0 auto !important;
}

.stage-panel .chart-walkthrough-kicker {
    font-size: 0.55rem !important;
}

.stage-panel .chart-walkthrough-body {
    font-size: 0.78rem !important;
    line-height: 1.35 !important;
}

/* Charts flex into remaining height */
.stage-panel .chart-wrapper,
.stage-panel .treemap-container,
.stage-panel .budget-pie-container,
.stage-panel .budget-pie-split,
.stage-panel .table-scroll {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
}

.stage-panel .chart-wrapper {
    position: relative !important;
}

.stage-panel .chart-wrapper canvas {
    max-height: 100% !important;
}

/* ── Planning ───────────────────────────────────────────── */
#stage-planning .planning-stage-card {
    gap: 8px !important;
}
#stage-planning .planning-topbar {
    padding-bottom: 8px !important;
    gap: 10px 16px !important;
}
#stage-planning .planning-heading {
    font-size: clamp(1.15rem, 2.2vh, 1.55rem) !important;
}
#stage-planning .planning-toolbar {
    min-height: 0 !important;
}
#stage-planning .income-budget-content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    gap: 6px !important;
}
#stage-planning .mixing-board-container {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    gap: 6px !important;
}
#stage-planning .budget-controls-row {
    margin: 0 !important;
    padding: 0 !important;
}

/* ── Purchases — dense 2×2 that fits viewport ───────────── */
#stage-purchases .purchases-stage-card > .panel-title {
    margin-bottom: 8px !important;
    padding-bottom: 6px !important;
    font-size: 1.05rem !important;
}
#stage-purchases .purchases-sym-grid {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    gap: 8px !important;
    grid-template-rows: 1fr 1fr !important;
    align-items: stretch !important;
}
#stage-purchases .purchases-sym-grid > .panel {
    padding: 10px 12px !important;
    overflow: hidden !important;
    min-height: 0 !important;
    gap: 0 !important;
}
#stage-purchases .purchases-sym-grid .panel-title {
    font-size: 0.85rem !important;
    margin-bottom: 6px !important;
    padding-bottom: 4px !important;
}
#stage-purchases .purchases-sym-grid .form-group {
    margin-bottom: 5px !important;
}
#stage-purchases .purchases-sym-grid .form-label {
    font-size: 0.62rem !important;
    margin-bottom: 2px !important;
    letter-spacing: 0.06em !important;
}
#stage-purchases .purchases-sym-grid .form-helper {
    display: none !important; /* reclaim vertical space; labels are enough */
}
#stage-purchases .purchases-sym-grid .form-input {
    padding: 5px 8px !important;
    font-size: 0.8rem !important;
    min-height: 30px !important;
    height: 30px !important;
}
#stage-purchases .purchases-sym-grid .input-group {
    gap: 8px !important;
    margin-bottom: 0 !important;
}
#stage-purchases .purchases-sym-grid .payment-estimate {
    margin-top: auto !important;
    padding: 6px 8px !important;
    font-size: 0.75rem !important;
}
#stage-purchases .payment-estimate-value {
    font-size: 0.95rem !important;
}

/* ── Viability — compact metric lattice ─────────────────── */
#stage-viability .viability-dashboard,
#stage-viability .affordability-banner {
    gap: 10px !important;
    min-height: 0 !important;
}
#stage-viability .affordability-header {
    margin-bottom: 0 !important;
}
#stage-viability .affordability-title {
    font-size: clamp(1.2rem, 2.4vh, 1.65rem) !important;
}
#stage-viability .affordability-core-metrics {
    gap: 8px !important;
    flex: 0 0 auto !important;
}
#stage-viability .affordability-metrics {
    gap: 8px !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    align-content: stretch !important;
}
#stage-viability .core-metric,
#stage-viability .mini-metric {
    min-height: 0 !important;
    padding: 10px 12px !important;
    gap: 4px !important;
}
#stage-viability .core-metric-value,
#stage-viability .mini-metric-value {
    font-size: clamp(1.15rem, 2.4vh, 1.55rem) !important;
}
#stage-viability .core-metric-label,
#stage-viability .mini-metric-label {
    font-size: 0.58rem !important;
}
#stage-viability .core-metric-status,
#stage-viability .mini-metric-trend {
    font-size: 0.68rem !important;
}
#stage-viability .viability-insight-row {
    margin-top: 0 !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
}
#stage-viability .viability-insight-card {
    padding: 8px 10px !important;
}
#stage-viability .viability-insight-label {
    font-size: 0.55rem !important;
}
#stage-viability .viability-insight-text {
    font-size: 0.72rem !important;
    line-height: 1.3 !important;
}

/* ── Budget pie + clean key ─────────────────────────────── */
#stage-budget .budget-pie-container,
#stage-budget .budget-pie-split {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    margin-top: 4px !important;
}
#stage-budget .budget-pie-chart-wrapper,
#stage-budget .budget-pie-split-grid {
    display: grid !important;
    /* ~70% donut / ~30% narrower key */
    grid-template-columns: minmax(0, 7fr) minmax(132px, 3fr) !important;
    gap: clamp(10px, 1.6vw, 18px) !important;
    align-items: stretch !important;
    min-height: 0 !important;
    height: 100% !important;
    flex: 1 1 auto !important;
}
#stage-budget .budget-pie-chart-stage {
    max-width: min(480px, 100%) !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    max-height: 100% !important;
    margin: auto !important;
}

/* Key: narrow stacked list (or tight 2-col when many items) */
#stage-budget .budget-pie-legend,
#stage-budget .budget-pie-legend--panel,
#stage-budget .budget-pie-key {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    padding: 0 !important;
    align-content: stretch !important;
    justify-content: center !important;
    grid-template-columns: none !important;
}

#stage-budget .budget-pie-key.is-two-col {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 3px 6px !important;
    align-content: center !important;
}

#stage-budget .budget-pie-key.is-dense {
    gap: 3px !important;
}
#stage-budget .budget-pie-key.is-two-col.is-dense {
    gap: 3px 8px !important;
}
#stage-budget .budget-pie-key.is-ultra-dense .budget-pie-key-row {
    padding: 4px 8px !important;
}
#stage-budget .budget-pie-key.is-ultra-dense .budget-pie-key-name {
    font-size: 0.68rem !important;
}
#stage-budget .budget-pie-key.is-ultra-dense .budget-pie-key-amt,
#stage-budget .budget-pie-key.is-ultra-dense .budget-pie-key-pct {
    font-size: 0.66rem !important;
}

#stage-budget .budget-pie-key-row {
    display: grid !important;
    grid-template-columns: 6px minmax(0, 1fr) auto auto !important;
    align-items: center !important;
    gap: 6px 6px !important;
    padding: 5px 8px !important;
    min-width: 0 !important;
    border: none !important;
    border-radius: 2px !important;
    background: rgba(0, 0, 0, 0.18) !important;
    box-sizing: border-box !important;
}

#stage-budget .budget-pie-key-swatch {
    width: 8px !important;
    height: 8px !important;
    border-radius: 2px !important;
    flex-shrink: 0 !important;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35) !important;
}

#stage-budget .budget-pie-key-name {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-family: var(--font-ui) !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
    color: var(--text-secondary) !important;
    line-height: 1.2 !important;
}

#stage-budget .budget-pie-key-amt {
    font-family: var(--font-data) !important;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    color: var(--gold-soft) !important;
    font-variant-numeric: tabular-nums !important;
    white-space: nowrap !important;
    text-align: right !important;
    letter-spacing: -0.02em !important;
}

#stage-budget .budget-pie-key-pct {
    font-family: var(--font-data) !important;
    font-size: 0.76rem !important;
    color: var(--text-muted) !important;
    font-variant-numeric: tabular-nums !important;
    white-space: nowrap !important;
    min-width: 2.4em !important;
    text-align: right !important;
    opacity: 0.85;
}

#stage-budget .budget-pie-key-more,
#stage-budget .budget-pie-legend-more {
    grid-column: 1 / -1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 8px !important;
    border: 1px dashed rgba(201, 168, 108, 0.25) !important;
    border-radius: 3px !important;
    font-family: var(--font-data) !important;
    font-size: 0.62rem !important;
    letter-spacing: 0.08em !important;
    color: var(--text-tertiary) !important;
    background: rgba(0, 0, 0, 0.2) !important;
}

#stage-budget .budget-pie-key-row.is-hidden-legend,
#stage-budget .budget-pie-legend-item.is-hidden-legend {
    display: none !important;
}

/* Hide legacy multi-line legend structure if any remains */
#stage-budget .budget-pie-legend-item {
    display: none !important;
}

/* ── Chart stages: lean walkthrough + flex chart ────────── */
#stage-savings .chart-container,
#stage-spending .chart-container,
#stage-treemap .chart-container,
#stage-ledger .chart-container {
    gap: 0 !important;
}

#stage-treemap .treemap-legend {
    flex: 0 0 auto !important;
    margin-top: 6px !important;
    gap: 6px !important;
    font-size: 0.68rem !important;
}

/* Ledger — 25 rows fit viewport with zero internal scroll */
#stage-ledger .chart-container.stage-panel-card {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
    gap: 0 !important;
    padding: clamp(8px, 1.2vh, 14px) clamp(12px, 1.6vw, 20px) !important;
}
#stage-ledger .section-kicker {
    margin-bottom: 2px !important;
}
#stage-ledger .chart-title {
    font-size: clamp(1rem, 1.8vh, 1.25rem) !important;
    margin: 0 0 2px !important;
}
#stage-ledger .chart-description,
#stage-ledger .ledger-fit-hint {
    display: block !important;
    margin: 0 0 6px !important;
    font-size: 0.68rem !important;
    opacity: 0.7;
    line-height: 1.2 !important;
    max-width: none !important;
}
#stage-ledger .table-scroll {
    overflow: hidden !important; /* no scrollbar — rows scale to fit */
    border-radius: 2px !important;
    max-height: none !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    border: 1px solid rgba(201, 168, 108, 0.12) !important;
    background: rgba(0, 0, 0, 0.22) !important;
}
#stage-ledger table {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    border-collapse: collapse !important;
    table-layout: fixed !important;
    display: flex !important;
    flex-direction: column !important;
}
#stage-ledger table thead {
    display: block !important;
    flex: 0 0 auto !important;
    width: 100% !important;
}
#stage-ledger table thead tr {
    display: grid !important;
    grid-template-columns: 1.15fr 1fr 1fr 1fr 1.1fr 0.85fr !important;
    width: 100% !important;
    align-items: center !important;
}
#stage-ledger table tbody {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
}
#stage-ledger table tbody tr {
    display: grid !important;
    grid-template-columns: 1.15fr 1fr 1fr 1fr 1.1fr 0.85fr !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    align-items: center !important;
}
#stage-ledger table thead th {
    padding: 4px 6px !important;
    font-size: clamp(0.48rem, 1.1vh, 0.58rem) !important;
    letter-spacing: 0.08em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    position: static !important;
    background: rgba(14, 12, 10, 0.9) !important;
    border-bottom: 1px solid rgba(201, 168, 108, 0.16) !important;
}
#stage-ledger table tbody td {
    padding: 0 6px !important;
    font-size: clamp(0.58rem, 1.35vh, 0.78rem) !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    border-bottom: 1px solid rgba(201, 168, 108, 0.05) !important;
}
#stage-ledger table tbody tr:last-child td {
    border-bottom: none !important;
}
#stage-ledger .badge {
    font-size: clamp(0.45rem, 1vh, 0.55rem) !important;
    padding: 1px 5px !important;
    letter-spacing: 0.06em !important;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
#stage-ledger tr.year-milestone .year-milestone-tag {
    font-size: clamp(0.4rem, 0.9vh, 0.48rem) !important;
    padding: 0 4px !important;
    margin-left: 4px !important;
    vertical-align: middle;
}
#stage-ledger tr.year-milestone-10 td,
#stage-ledger tr.year-milestone-20 td {
    box-shadow: inset 2px 0 0 rgba(201, 168, 108, 0.7) !important;
}
/* Hide status column text on very short viewports — keep color via badge */
@media (max-height: 720px) {
    #stage-ledger table thead tr,
    #stage-ledger table tbody tr {
        grid-template-columns: 1.1fr 1fr 1fr 1fr 1.1fr 0.7fr !important;
    }
    #stage-ledger .badge {
        font-size: 0.42rem !important;
        padding: 0 3px !important;
    }
}

/* ── AI stage — fit grade + chat in one frame ───────────── */
#stage-ai .ai-analysis-panel {
    gap: 8px !important;
}
#stage-ai .pollinations-key-panel {
    margin-bottom: 4px !important;
    padding: 8px 10px !important;
    flex: 0 0 auto !important;
}
#stage-ai .pollinations-key-input {
    min-height: 34px !important;
    height: 34px !important;
    font-size: 0.8rem !important;
}
#stage-ai .ai-stage-layout {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    gap: 10px !important;
    grid-template-columns: minmax(240px, 0.9fr) minmax(280px, 1.1fr) !important;
}
#stage-ai .ai-analysis-preview {
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 12px !important;
    gap: 8px !important;
}
#stage-ai .ai-insights {
    gap: 6px !important;
    overflow: hidden !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
}
#stage-ai .ai-insight-item {
    padding: 8px 10px !important;
}
#stage-ai .ai-insight-title {
    font-size: 0.75rem !important;
}
#stage-ai .ai-insight-text {
    font-size: 0.72rem !important;
    line-height: 1.3 !important;
}
#stage-ai .ai-chat {
    min-height: 0 !important;
    max-height: none !important;
    height: 100% !important;
    flex: 1 1 auto !important;
}
#stage-ai .ai-chat-messages {
    min-height: 0 !important;
    flex: 1 1 auto !important;
}
#stage-ai .ai-chat-header {
    padding: 10px 12px 8px !important;
}
#stage-ai .ai-chat-prompts {
    padding: 8px 10px !important;
    gap: 6px !important;
}
#stage-ai .ai-chat-prompt-btn {
    padding: 6px 10px !important;
    font-size: 0.68rem !important;
}
#stage-ai .ai-chat-footer {
    padding: 6px 12px 8px !important;
}

/* ── App / Outro keep full-width rail ───────────────────── */
#stage-app .app-stage-card,
#stage-outro .outro-stage-card {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    min-height: 0 !important;
}

/* Kill residual forced chart min-heights inside stages */
.stage-panel .chart-wrapper,
.stage-panel.stage-snap .chart-wrapper {
    min-height: 0 !important;
    height: auto !important;
    flex: 1 1 auto !important;
}
.stage-panel .treemap-container {
    min-height: 0 !important;
    height: auto !important;
    flex: 1 1 auto !important;
}
.stage-panel .budget-pie-container,
.stage-panel .budget-pie-chart-wrapper {
    min-height: 0 !important;
}

/* Hide summary grid orphan if it creates gap between stages */
#summaryCards.summary-grid:empty,
.summary-grid:empty {
    display: none !important;
}

@media (max-width: 900px) {
    .stage-panel.stage-snap {
        height: auto !important;
        min-height: 100dvh !important;
        max-height: none !important;
        overflow: visible !important;
    }
    .stage-panel > .stage-panel-card {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    #stage-budget .budget-pie-chart-wrapper,
    #stage-budget .budget-pie-split-grid {
        grid-template-columns: 1fr !important;
    }
    #stage-ai .ai-stage-layout {
        grid-template-columns: 1fr !important;
    }
    #stage-purchases .purchases-sym-grid {
        grid-template-rows: none !important;
        grid-template-columns: 1fr !important;
        overflow: auto !important;
    }
}

/* ── Tile meter without ± — number owns the full width ───── */
#stage-planning .tile-meter--solo {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
}

#stage-planning .tile-meter--solo .tile-value-wrap,
#stage-planning .tile-meter--solo .budget-amount-face {
    width: 100% !important;
    max-width: 100% !important;
}

#stage-planning .tile-step {
    display: none !important;
}

/* Larger, more attractive figures with reclaimed space */
#stage-planning .atelier-tile .tile-value,
#stage-planning .atelier-tile .budget-amount-input,
#stage-planning .atelier-tile .income-amount-input {
    font-size: clamp(1.75rem, 4.8vh, 2.65rem) !important;
    font-weight: 600 !important;
    letter-spacing: -0.06em !important;
    width: 100% !important;
    max-width: 100% !important;
}

#stage-planning .atelier-tile--income .tile-value,
#stage-planning .atelier-tile--income .income-amount-input {
    font-size: clamp(1.9rem, 5.2vh, 2.9rem) !important;
}

#stage-planning .atelier-tile .tile-currency,
#stage-planning .atelier-tile .budget-amount-prefix {
    font-size: clamp(1.25rem, 3.2vh, 1.75rem) !important;
}

#stage-planning .atelier-tile .budget-amount-face[data-digits="4"] .tile-value,
#stage-planning .atelier-tile .budget-amount-face[data-digits="4"] .budget-amount-input {
    font-size: clamp(1.5rem, 4vh, 2.2rem) !important;
}
#stage-planning .atelier-tile .budget-amount-face[data-digits="5"] .tile-value,
#stage-planning .atelier-tile .budget-amount-face[data-digits="5"] .budget-amount-input,
#stage-planning .atelier-tile .budget-amount-face[data-digits="6"] .tile-value,
#stage-planning .atelier-tile .budget-amount-face[data-digits="6"] .budget-amount-input {
    font-size: clamp(1.2rem, 3.2vh, 1.7rem) !important;
}
#stage-planning .atelier-tile .budget-amount-face[data-digits="7"] .tile-value,
#stage-planning .atelier-tile .budget-amount-face[data-digits="7"] .budget-amount-input,
#stage-planning .atelier-tile .budget-amount-face[data-digits="8"] .tile-value,
#stage-planning .atelier-tile .budget-amount-face[data-digits="8"] .budget-amount-input {
    font-size: clamp(1rem, 2.6vh, 1.35rem) !important;
}

#stage-planning .tile-value-wrap::before {
    left: 8% !important;
    right: 8% !important;
}

/* ═══════════════════════════════════════════════════════════
   EQUAL TILE TYPE — spending matches income hero scale
   (final override — kills earlier small densify rules)
   ═══════════════════════════════════════════════════════════ */
#stage-planning .atelier-tile .tile-value,
#stage-planning .atelier-tile .budget-amount-input,
#stage-planning .atelier-tile .income-amount-input,
#stage-planning .atelier-tile .tile-value.budget-amount-input,
#stage-planning .atelier-tile input.budget-amount-input.tile-value,
#stage-planning .atelier-tile input.income-amount-input.tile-value {
    font-size: clamp(1.85rem, 5vh, 2.75rem) !important;
    font-weight: 600 !important;
    letter-spacing: -0.055em !important;
    line-height: 0.95 !important;
    width: 100% !important;
    color: #f6edd8 !important;
    text-shadow:
        0 0 28px rgba(201, 168, 108, 0.28),
        0 1px 0 rgba(0, 0, 0, 0.5) !important;
}

#stage-planning .atelier-tile--income .tile-value,
#stage-planning .atelier-tile--income .income-amount-input,
#stage-planning .atelier-tile--income input.income-amount-input.tile-value {
    font-size: clamp(1.85rem, 5vh, 2.75rem) !important;
    color: #faf0d4 !important;
}

/* Compact K/M overlay — lock to equal tile type (not display serif, not smaller) */
#stage-planning .atelier-tile .budget-amount-face[data-compact="1"] .tile-value-compact,
#stage-planning .atelier-tile--income .budget-amount-face[data-compact="1"] .tile-value-compact {
    display: inline-block !important;
    font-family: var(--font-data), "JetBrains Mono", ui-monospace, monospace !important;
    font-size: clamp(1.85rem, 5vh, 2.75rem) !important;
    font-weight: 600 !important;
    font-variant-numeric: tabular-nums !important;
    letter-spacing: -0.055em !important;
    line-height: 0.95 !important;
    color: #f6edd8 !important;
    white-space: nowrap !important;
    text-shadow:
        0 0 28px rgba(201, 168, 108, 0.28),
        0 1px 0 rgba(0, 0, 0, 0.5) !important;
}
#stage-planning .atelier-tile--income .budget-amount-face[data-compact="1"] .tile-value-compact {
    color: #faf0d4 !important;
}

#stage-planning .atelier-tile .tile-currency,
#stage-planning .atelier-tile .budget-amount-prefix {
    font-size: clamp(1.2rem, 3.2vh, 1.7rem) !important;
}

/* Digit soft-scale only when NOT compact (editing full digits can still shrink slightly) */
#stage-planning .atelier-tile .budget-amount-face:not([data-compact="1"])[data-digits="4"] .tile-value,
#stage-planning .atelier-tile .budget-amount-face:not([data-compact="1"])[data-digits="4"] .budget-amount-input,
#stage-planning .atelier-tile .budget-amount-face:not([data-compact="1"])[data-digits="4"] .income-amount-input {
    font-size: clamp(1.55rem, 4.2vh, 2.25rem) !important;
}
/* Compact K never uses digit-shrink rules — size is locked via bento-fit probe (88.8K) */
#stage-planning .atelier-tile .budget-amount-face[data-compact="1"] .tile-value-compact,
#stage-planning .atelier-tile .budget-amount-face[data-compact="1"][data-digits] .tile-value-compact {
    font-size: inherit !important; /* overridden by inline locked fit from bento-fit */
}
#stage-planning .atelier-tile .budget-amount-face:not([data-compact="1"])[data-digits="5"] .tile-value,
#stage-planning .atelier-tile .budget-amount-face:not([data-compact="1"])[data-digits="5"] .budget-amount-input,
#stage-planning .atelier-tile .budget-amount-face:not([data-compact="1"])[data-digits="5"] .income-amount-input,
#stage-planning .atelier-tile .budget-amount-face:not([data-compact="1"])[data-digits="6"] .tile-value,
#stage-planning .atelier-tile .budget-amount-face:not([data-compact="1"])[data-digits="6"] .budget-amount-input,
#stage-planning .atelier-tile .budget-amount-face:not([data-compact="1"])[data-digits="6"] .income-amount-input {
    font-size: clamp(1.25rem, 3.4vh, 1.75rem) !important;
}

/* Don't inherit — keep equal mono scale on all planning amount faces */
#stage-planning .budget-item .budget-amount-input,
#stage-planning .budget-item .income-amount-input,
#stage-planning .atelier-tile .budget-amount-input,
#stage-planning .atelier-tile .income-amount-input,
#stage-planning .atelier-tile .tile-value {
    font-size: clamp(1.85rem, 5vh, 2.75rem) !important;
    font-family: var(--font-data), "JetBrains Mono", ui-monospace, monospace !important;
    font-weight: 600 !important;
    padding: 0 !important;
}
#stage-planning .atelier-tile .budget-amount-face[data-compact="1"] .tile-value-compact {
    font-size: clamp(1.85rem, 5vh, 2.75rem) !important;
    font-family: var(--font-data), "JetBrains Mono", ui-monospace, monospace !important;
    font-weight: 600 !important;
}

/* ═══════════════════════════════════════════════════════════
   JOURNEY SPINE — Vectrfl-inspired node path (atelier gold)
   Scroll through linked nodes like a cinematic process film
   ═══════════════════════════════════════════════════════════ */
.stage-rail.journey-spine {
    position: fixed;
    left: clamp(12px, 1.6vw, 22px);
    right: auto;
    top: 50%;
    transform: translateY(-50%);
    z-index: 40;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 18px 10px;
    min-height: min(62vh, 520px);
    justify-content: space-between;
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(14, 12, 10, 0.55), rgba(6, 5, 4, 0.72));
    border: 1px solid rgba(201, 168, 108, 0.2);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.4),
        0 16px 40px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(232, 213, 163, 0.06);
    backdrop-filter: blur(14px) saturate(1.1);
}

/* Vertical path behind nodes */
.journey-track {
    position: absolute;
    top: 22px;
    bottom: 22px;
    left: 50%;
    width: 1px;
    transform: translateX(-50%);
    background: rgba(201, 168, 108, 0.14);
    border-radius: 1px;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

.journey-track-fill {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, var(--gold-soft), var(--gold), var(--gold-deep));
    transform-origin: top center;
    transform: scaleY(0);
    transition: transform 0.55s var(--ease-out-expo);
    box-shadow: 0 0 10px rgba(201, 168, 108, 0.45);
}

.journey-node,
.stage-rail.journey-spine .stage-rail-dot {
    position: relative;
    z-index: 1;
    width: 14px !important;
    height: 14px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(232, 213, 163, 0.4) !important;
    background: rgba(8, 6, 4, 0.9) !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    flex-shrink: 0;
    margin: 2px 0;
    transition:
        transform 0.4s var(--ease-out-expo),
        border-color 0.3s ease,
        background 0.3s ease,
        box-shadow 0.4s ease !important;
}

.journey-node-core {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: transparent;
    transition: background 0.3s ease, box-shadow 0.35s ease, transform 0.35s var(--ease-out-expo);
}

.journey-node.is-passed {
    border-color: rgba(201, 168, 108, 0.55) !important;
}
.journey-node.is-passed .journey-node-core {
    background: rgba(201, 168, 108, 0.55);
}

.journey-node.is-active {
    border-color: var(--gold-soft) !important;
    background: rgba(201, 168, 108, 0.12) !important;
    transform: scale(1.35) !important;
    box-shadow:
        0 0 0 3px rgba(201, 168, 108, 0.12),
        0 0 18px rgba(232, 213, 163, 0.45) !important;
}
.journey-node.is-active .journey-node-core {
    background: var(--gold-soft);
    box-shadow: 0 0 10px rgba(232, 213, 163, 0.85);
    transform: scale(1.15);
}

.journey-node:hover {
    transform: scale(1.25) !important;
    border-color: var(--gold-soft) !important;
}

/* Node tooltip — chapter index + label (opens to the right of left rail) */
.stage-rail.journey-spine .stage-rail-dot::after {
    content: attr(data-node) "  " attr(data-label);
    left: calc(100% + 14px);
    right: auto;
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    padding: 6px 10px;
    border-radius: 2px;
    background: rgba(8, 6, 4, 0.88);
    border: 1px solid rgba(201, 168, 108, 0.28);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* ── Film chapter HUD (Vectrfl “01 process” energy) ─────── */
.journey-film {
    position: fixed;
    left: clamp(16px, 2.2vw, 32px);
    bottom: clamp(18px, 3vh, 36px);
    z-index: 38;
    width: min(280px, calc(100vw - 80px));
    pointer-events: none;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.45s var(--ease-out-expo), transform 0.5s var(--ease-out-expo);
    visibility: hidden;
}

html.journey-live .journey-film {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.journey-film[hidden] {
    display: none !important;
}

.journey-film-inner {
    display: grid;
    grid-template-columns: auto auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 2px;
    align-items: baseline;
    padding: 12px 14px 10px;
    background:
        linear-gradient(135deg, rgba(14, 12, 10, 0.82), rgba(6, 5, 4, 0.9));
    border: 1px solid rgba(201, 168, 108, 0.22);
    border-radius: 2px;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.35),
        0 16px 36px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(232, 213, 163, 0.06);
    backdrop-filter: blur(16px);
}

.journey-film-idx {
    grid-row: 1 / 3;
    align-self: center;
    font-family: var(--font-data);
    font-size: 1.55rem;
    font-weight: 500;
    letter-spacing: -0.04em;
    color: var(--gold-soft);
    line-height: 1;
    text-shadow: 0 0 20px rgba(201, 168, 108, 0.35);
    min-width: 1.6em;
}

.journey-film-rule {
    grid-row: 1 / 3;
    align-self: stretch;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(201, 168, 108, 0.45), transparent);
}

.journey-film-title {
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text);
    line-height: 1.2;
}

.journey-film-meta {
    font-family: var(--font-data);
    font-size: 0.58rem;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    line-height: 1.3;
}

.journey-film-progress {
    margin-top: 0;
    height: 2px;
    background: rgba(201, 168, 108, 0.12);
    overflow: hidden;
    border-radius: 0 0 2px 2px;
}

.journey-film-progress-fill {
    display: block;
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, var(--gold-deep), var(--gold-soft));
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform 0.55s var(--ease-out-expo);
    box-shadow: 0 0 12px rgba(201, 168, 108, 0.5);
}

/* Stage enters feel more film-like when journey is live */
html.journey-live .stage-panel.is-stage-active .stage-panel-card {
    animation: journeyFrameIn 0.7s var(--ease-out-expo);
}

@keyframes journeyFrameIn {
    0% {
        opacity: 0.88;
        filter: brightness(0.94) saturate(0.92);
        transform: scale(0.992);
    }
    100% {
        opacity: 1;
        filter: none;
        transform: none;
    }
}

/* Soft ambient vignette tied to journey progress */
html.journey-live body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background:
        radial-gradient(ellipse 90% 70% at 50% 40%, transparent 40%, rgba(0, 0, 0, 0.35) 100%),
        radial-gradient(ellipse 40% 30% at 90% 50%, rgba(201, 168, 108, calc(0.04 + var(--journey-progress, 0) * 0.04)), transparent 70%);
    opacity: 0.85;
}

@media (max-width: 900px) {
    .stage-rail.journey-spine {
        left: 6px;
        right: auto;
        padding: 12px 6px;
        min-height: 48vh;
        gap: 0;
    }
    .journey-node,
    .stage-rail.journey-spine .stage-rail-dot {
        width: 11px !important;
        height: 11px !important;
    }
    .journey-film {
        left: 12px;
        bottom: 12px;
        width: min(240px, calc(100vw - 56px));
    }
    .journey-film-idx {
        font-size: 1.25rem;
    }
    .stage-rail.journey-spine .stage-rail-dot::after {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .journey-track-fill,
    .journey-film-progress-fill,
    .journey-node,
    html.journey-live .stage-panel.is-stage-active .stage-panel-card {
        transition: none !important;
        animation: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   MIGRATION Phase A–E — scroll contract, acts, webgl, bb-cell
   ═══════════════════════════════════════════════════════════ */

/* A1: Single scroll contract — proximity film, not hard deck */
html.stages-armed {
    scroll-snap-type: y proximity !important;
}
html.stages-armed .stage-panel.stage-snap {
    scroll-snap-align: start !important;
    scroll-snap-stop: normal !important;
}
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
    html.stages-armed {
        scroll-snap-type: none !important;
    }
}

/* A2: Prefer min-height over hard max clip for tool stages */
html.stages-armed .stage-panel.stage-snap {
    height: auto !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    max-height: none !important;
    overflow: visible !important;
}
html.stages-armed .stage-panel.stage-snap > .stage-panel-card,
html.stages-armed .stage-panel.stage-snap > .panel.stage-panel-card,
html.stages-armed .stage-panel.stage-snap > .chart-container.stage-panel-card,
html.stages-armed #stage-viability .viability-dashboard {
    height: auto !important;
    min-height: min(92dvh, 900px) !important;
    max-height: none !important;
    overflow: visible !important;
}

/* A4: Hero scroll invite */
.hero-scroll-hint {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
}
.hero-scroll-hint-copy {
    font-family: var(--font-data);
    font-size: 0.62rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(232, 213, 163, 0.55);
    animation: hintPulse 2.8s ease-in-out infinite;
}
@keyframes hintPulse {
    0%, 100% { opacity: 0.45; }
    50% { opacity: 0.95; }
}

/* B3: Act-aware spine gaps (visual chapter breaks) */
.journey-node[data-act="2"] { margin-top: 6px; }
.journey-node[data-act="3"] { margin-top: 6px; }
.journey-node[data-act="4"] { margin-top: 6px; }

/* C2: Persistent journey WebGL layer */
.journey-webgl {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.8s var(--ease-out-expo);
}
.journey-webgl.is-live {
    opacity: 0.55;
}
html.journey-live .journey-webgl.is-live {
    opacity: 0.62;
}
.journey-webgl-canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
}
/* Stacking without breaking fixed hero (relative hero doubled the gap) */
.content {
    position: relative;
    z-index: 1;
}
.stage-rail.journey-spine { z-index: 40 !important; }
.journey-film { z-index: 38 !important; }
.floating-nav.floating-nav--fixed { z-index: 36 !important; }
/* Hero stays fixed full-bleed — never position:relative */
.hero {
    position: fixed !important;
    inset: 0 !important;
    z-index: 0 !important;
}
/* Dead journey webgl must not occupy flow */
#journeyWebgl,
.journey-webgl {
    position: fixed !important;
    display: none !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
}
/* Film HUD is fixed chrome when live — not in document flow */
.journey-film {
    position: fixed !important;
}

/* D1–D4: Modular bb-cell language */
:root {
    --bb-gutter: 12px;
    --bb-pad: 14px;
    --bb-value-lg: clamp(1.55rem, 2.8vw, 2.35rem);
    --bb-value-md: clamp(1.1rem, 2vw, 1.5rem);
    --bb-label: 0.62rem;
}

#stage-viability .affordability-core-metrics {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: var(--bb-gutter) !important;
}
#stage-viability .affordability-metrics {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: var(--bb-gutter) !important;
}
#stage-viability .core-metric,
#stage-viability .mini-metric {
    border: 1px solid var(--border) !important;
    border-radius: 3px !important;
    background: rgba(0, 0, 0, 0.32) !important;
    padding: var(--bb-pad) !important;
    min-height: 0 !important;
    transition: border-color 0.3s ease, transform 0.35s var(--ease-out-expo), box-shadow 0.35s ease !important;
}
#stage-viability .core-metric:hover,
#stage-viability .mini-metric:hover {
    border-color: rgba(232, 213, 163, 0.35) !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35), 0 0 24px rgba(201, 168, 108, 0.06);
}
/* D2: core value larger than mini */
#stage-viability .core-metric-value {
    font-size: var(--bb-value-lg) !important;
    font-weight: 600 !important;
    color: var(--gold-soft) !important;
}
#stage-viability .mini-metric-value {
    font-size: var(--bb-value-md) !important;
    font-weight: 600 !important;
    color: var(--gold-soft) !important;
}
#stage-viability .core-metric-label,
#stage-viability .mini-metric-label {
    font-size: var(--bb-label) !important;
    letter-spacing: 0.12em !important;
}

/* Planning board gutter token */
#stage-planning .mixing-board-container {
    gap: var(--bb-gutter) !important;
}
#stage-planning .atelier-tile {
    transition: border-color 0.3s ease, transform 0.4s var(--ease-out-expo), box-shadow 0.4s ease !important;
}
#stage-planning .atelier-tile:hover {
    transform: translateY(-3px) !important;
}

/* E1: No inactive-stage dim — fixed full opacity for scroll performance */
html.stages-armed .stage-panel:not(.is-stage-active),
html.stages-armed .stage-panel.is-stage-active {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
}

/* E3 already covered by mobile snap none */

@media (max-width: 900px) {
    .journey-webgl.is-live {
        opacity: 0.28;
    }
    #stage-viability .affordability-core-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    #stage-viability .affordability-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   App + Outro — full-viewport stages (match Planning→AI)
   Kill journey ball layer · densify dead space
   ═══════════════════════════════════════════════════════════ */

/* Kill journey WebGL overlay completely */
#journeyWebgl,
.journey-webgl {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

/* App + Outro: same full-frame contract as other stages */
#stage-app.stage-panel,
#stage-outro.stage-panel,
html.stages-armed #stage-app.stage-panel,
html.stages-armed #stage-outro.stage-panel {
    height: auto !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    max-height: none !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: stretch !important;
    align-items: stretch !important;
    padding: clamp(6px, 1.2vh, 14px) 0 !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: normal !important;
    opacity: 1 !important;
    transform: none !important;
}

#stage-app .app-stage-card,
#stage-outro .outro-stage-card,
html.stages-armed #stage-app .app-stage-card,
html.stages-armed #stage-outro .outro-stage-card {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    min-height: min(92dvh, 900px) !important;
    height: auto !important;
    max-height: none !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: clamp(12px, 1.8vh, 22px) clamp(14px, 1.8vw, 24px) !important;
    box-sizing: border-box !important;
}

/* App: fill the card — less empty air */
#stage-app .app-stage-grid {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    align-items: center !important;
    gap: clamp(16px, 2.5vw, 32px) !important;
    width: 100% !important;
}
#stage-app .app-launch-copy {
    gap: 8px !important;
}
#stage-app .app-launch-title {
    font-size: clamp(1.45rem, 2.8vw, 2.2rem) !important;
    margin: 0 !important;
}
#stage-app .app-launch-lede {
    margin: 0 !important;
    font-size: 0.88rem !important;
    max-width: 42ch;
}
#stage-app .app-launch-points {
    margin: 2px 0 !important;
    gap: 4px !important;
    font-size: 0.82rem !important;
}
#stage-app .app-launch-release {
    margin: 2px 0 !important;
    font-size: 0.8rem !important;
}
#stage-app .app-launch-visual {
    min-height: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
#stage-app .app-launch-phone {
    transform: scale(0.92) !important;
    transform-origin: center center !important;
}
#stage-app .app-launch-signup {
    margin-top: 4px !important;
}
#stage-app .section-kicker {
    margin-bottom: 4px !important;
}

/* Outro: centered content band, full frame */
#stage-outro .outro-stage-inner {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: clamp(14px, 2vh, 22px) !important;
    min-height: 0 !important;
    width: 100% !important;
}
#stage-outro .footer-outro-brand {
    max-width: none !important;
    margin: 0 !important;
}
#stage-outro .footer-brand {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem) !important;
    margin-bottom: 6px !important;
}
#stage-outro .footer-pitch {
    font-size: 0.9rem !important;
    max-width: 48ch;
}
#stage-outro .outro-footer-grid,
#stage-outro .footer-grid {
    padding: 14px 0 !important;
    gap: 12px 20px !important;
}
#stage-outro .footer-bottom {
    padding-top: 8px !important;
}
#stage-outro .section-kicker {
    margin-bottom: 4px !important;
}

/* Kill leftover gap between App and Outro */
#stage-app + #stage-outro {
    padding-top: clamp(6px, 1.2vh, 14px) !important;
}

/* Global densify: less stage padding dead air */
html.stages-armed .stage-panel.stage-snap {
    padding: clamp(6px, 1vh, 12px) 0 !important;
}
html.stages-armed .stage-panel.stage-snap > .stage-panel-card,
html.stages-armed .stage-panel.stage-snap > .panel.stage-panel-card,
html.stages-armed .stage-panel.stage-snap > .chart-container.stage-panel-card {
    padding: clamp(10px, 1.4vh, 16px) clamp(12px, 1.6vw, 20px) !important;
}

/* Chart walkthroughs — tighter */
.stage-panel .chart-walkthrough {
    margin: 2px 0 6px !important;
    padding: 6px 10px !important;
}
.stage-panel .chart-description {
    margin-bottom: 4px !important;
}

/* Film HUD slightly smaller so it steals less real estate */
.journey-film {
    bottom: clamp(12px, 2vh, 24px) !important;
    width: min(260px, calc(100vw - 72px)) !important;
}
.journey-film-inner {
    padding: 10px 12px 8px !important;
}
.journey-film-idx {
    font-size: 1.35rem !important;
}

@media (max-width: 900px) {
    #stage-app.stage-panel,
    #stage-outro.stage-panel {
        overflow: visible !important;
        min-height: 100dvh !important;
    }
    #stage-app .app-stage-card,
    #stage-outro .outro-stage-card {
        min-height: auto !important;
        overflow: visible !important;
        justify-content: flex-start !important;
    }
    #stage-app .app-launch-phone {
        transform: scale(0.85) !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   FRAMELESS MODERN — no box frames, space as structure
   Separation via air, type, and soft washes — not borders
   ═══════════════════════════════════════════════════════════ */

/* Stage cards: no outline boxes */
html.stages-armed .stage-panel > .stage-panel-card,
html.stages-armed .stage-panel > .panel.stage-panel-card,
html.stages-armed .stage-panel > .chart-container.stage-panel-card,
#stage-planning .planning-stage-card,
#stage-purchases .purchases-stage-card,
#stage-viability .viability-dashboard,
#stage-viability .affordability-banner,
#stage-ai .ai-analysis-panel,
#stage-app .app-stage-card,
#stage-outro .outro-stage-card,
.stage-panel-card,
.chart-container.stage-panel-card,
.panel.stage-panel-card {
    border: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    background:
        linear-gradient(180deg, rgba(12, 10, 8, 0.35) 0%, rgba(6, 5, 4, 0.15) 100%) !important;
    border-radius: 0 !important;
    outline: none !important;
}

/* Kill vault corner ornaments (frame language) */
.vault-corners::before,
.vault-corners::after,
.stage-panel-card::before,
.stage-panel-card::after,
.ai-analysis-panel::before,
.affordability-banner::before,
.affordability-banner::after {
    display: none !important;
    content: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Nested panels (purchase floor blockers, etc.) */
#stage-purchases .purchases-sym-grid > .panel,
#stage-purchases .purchases-sym-grid > #carPanel,
#stage-purchases .purchases-sym-grid > #housePanel,
#stage-purchases .purchases-sym-grid > #collegePanel,
#stage-purchases .purchases-sym-grid > #medicalPanel {
    border: none !important;
    box-shadow: none !important;
    background: rgba(0, 0, 0, 0.22) !important;
    border-radius: 0 !important;
    padding: 12px 14px !important;
}

#stage-purchases .purchases-sym-grid > .panel:hover {
    background: rgba(0, 0, 0, 0.32) !important;
}

/* Planning atelier tiles — frameless instrument pads */
#stage-planning .atelier-tile,
#stage-planning .budget-item.atelier-tile {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background: rgba(0, 0, 0, 0.2) !important;
}
#stage-planning .atelier-tile .tile-edge {
    display: none !important;
}
#stage-planning .atelier-tile:hover {
    background: rgba(0, 0, 0, 0.32) !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
}
#stage-planning .atelier-tile--income {
    background:
        linear-gradient(165deg, rgba(201, 168, 108, 0.08), rgba(0, 0, 0, 0.25)) !important;
    border: none !important;
    box-shadow: none !important;
}

/* Amount faces — no bezel box */
#stage-planning .budget-amount-face,
#stage-planning .tile-value-wrap {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}
#stage-planning .tile-value-wrap::before {
    /* keep hairline under number only — not a frame */
    opacity: 0.45;
}

/* Viability metrics — wash, not boxes */
#stage-viability .core-metric,
#stage-viability .mini-metric,
#stage-viability .viability-insight-card {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background: rgba(0, 0, 0, 0.18) !important;
}
#stage-viability .core-metric:hover,
#stage-viability .mini-metric:hover {
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
    background: rgba(0, 0, 0, 0.28) !important;
}

/* Chart stages: open canvas */
.stage-panel .chart-wrapper,
.stage-panel .treemap-container,
.stage-panel .budget-pie-container {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}
.stage-panel .chart-walkthrough {
    border: none !important;
    border-left: 1px solid rgba(201, 168, 108, 0.28) !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Pie key rows — no card chrome */
#stage-budget .budget-pie-key-row {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 5px 4px !important;
    border-bottom: 1px solid rgba(201, 168, 108, 0.06) !important;
}
#stage-budget .budget-pie-key-more {
    border: none !important;
    border-top: 1px solid rgba(201, 168, 108, 0.12) !important;
    background: transparent !important;
}

/* Ledger — open table, header wash only */
#stage-ledger .table-scroll {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 0 !important;
}
#stage-ledger table thead th {
    background: transparent !important;
    border-bottom: 1px solid rgba(201, 168, 108, 0.14) !important;
}
#stage-ledger table tbody td {
    border-bottom: 1px solid rgba(201, 168, 108, 0.05) !important;
}
#stage-ledger tr.year-milestone-5 td {
    /* keep highlight without heavy frame */
    box-shadow: inset 2px 0 0 var(--gold) !important;
    border-top: none !important;
    border-bottom: none !important;
}

/* AI — frameless grade + chat */
#stage-ai .pollinations-key-panel {
    border: none !important;
    box-shadow: none !important;
    background: rgba(0, 0, 0, 0.2) !important;
    border-radius: 0 !important;
}
#stage-ai .ai-analysis-preview {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 0 !important;
}
#stage-ai .ai-chat {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background: rgba(0, 0, 0, 0.22) !important;
}
#stage-ai .ai-chat-header,
#stage-ai .ai-chat-prompts,
#stage-ai .ai-chat-footer {
    border-color: rgba(201, 168, 108, 0.08) !important;
    background: transparent !important;
}
#stage-ai .ai-chat-msg--assistant .ai-chat-bubble,
#stage-ai .ai-chat-msg--user .ai-chat-bubble {
    border: none !important;
    box-shadow: none !important;
}
#stage-ai .ai-chat-prompt-btn {
    border-radius: 2px !important;
    border-color: rgba(201, 168, 108, 0.18) !important;
    background: transparent !important;
}
#stage-ai .ai-insight-item {
    border: none !important;
    background: rgba(0, 0, 0, 0.15) !important;
    border-radius: 0 !important;
}

/* Journey spine — lighter pill */
.stage-rail.journey-spine {
    background: rgba(6, 5, 4, 0.55) !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: blur(16px) !important;
}
.journey-film-inner {
    border: none !important;
    box-shadow: none !important;
    background: rgba(6, 5, 4, 0.72) !important;
    border-radius: 0 !important;
}
.journey-film-progress {
    background: rgba(201, 168, 108, 0.08) !important;
}

/* App media — softer, less stacked chrome */
#stage-app .app-launch-phone,
#stage-app .bento-phone-frame {
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4) !important;
    border: none !important;
}
#stage-app .bento-cell {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
#stage-app .bento-cell:hover {
    background: rgba(0, 0, 0, 0.12) !important;
}
#stage-app .bento-cell-inner--media {
    background: transparent !important;
}
#stage-app .bento-atmos-img {
    opacity: 0.4 !important;
    border-radius: 0 !important;
}
/* Store badges + social — frameless */
#stage-app .footer-store-link,
#stage-outro .footer-store-link {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    opacity: 0.88;
    transition: opacity 0.2s ease, transform 0.25s var(--ease-out-expo);
}
#stage-app .footer-store-link:hover,
#stage-outro .footer-store-link:hover {
    opacity: 1;
    transform: translateY(-1px);
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
#stage-app .footer-store-logo,
#stage-outro .footer-store-logo {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background: transparent !important;
}
#stage-outro .footer-social-btn {
    padding: 4px 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    gap: 8px !important;
    color: var(--text-tertiary) !important;
}
#stage-outro .footer-social-btn:hover {
    color: var(--gold-soft) !important;
    background: transparent !important;
    border: none !important;
}
#stage-outro .outro-footer-grid,
#stage-outro .footer-grid {
    border-top: 1px solid rgba(201, 168, 108, 0.1) !important;
    border-bottom: 1px solid rgba(201, 168, 108, 0.1) !important;
    background: transparent !important;
}

/* Forms / inputs stay readable without heavy frames */
.stage-panel .form-input,
.stage-panel .btn-secondary {
    border-color: rgba(201, 168, 108, 0.14) !important;
    background: rgba(0, 0, 0, 0.28) !important;
    border-radius: 2px !important;
    box-shadow: none !important;
}
.stage-panel .form-input:focus {
    border-color: rgba(232, 213, 163, 0.4) !important;
    box-shadow: 0 0 0 2px rgba(201, 168, 108, 0.1) !important;
}

/* ── Dead-space kill: denser packing ─────────────────────── */
html.stages-armed .stage-panel.stage-snap {
    padding: clamp(4px, 0.8vh, 10px) 0 !important;
}
html.stages-armed .stage-panel.stage-snap > .stage-panel-card,
html.stages-armed .stage-panel.stage-snap > .panel.stage-panel-card,
html.stages-armed .stage-panel.stage-snap > .chart-container.stage-panel-card,
#stage-app .app-stage-card,
#stage-outro .outro-stage-card {
    padding: clamp(8px, 1.2vh, 14px) clamp(10px, 1.4vw, 18px) !important;
    min-height: min(94dvh, 920px) !important;
    justify-content: flex-start !important;
}

/* Planning: board eats vertical space */
#stage-planning .planning-stage-card {
    gap: 6px !important;
    padding: clamp(8px, 1.2vh, 14px) clamp(10px, 1.4vw, 16px) !important;
}
#stage-planning .planning-topbar {
    padding-bottom: 6px !important;
    margin: 0 !important;
}
#stage-planning .planning-toolbar {
    min-height: 0 !important;
    margin: 0 !important;
}
#stage-planning .mixing-board-container {
    gap: 8px !important;
}
#stage-planning .atelier-tile {
    padding: 8px 8px 6px !important;
}

/* Purchases denser */
#stage-purchases .purchases-sym-grid {
    gap: 8px !important;
}
#stage-purchases .purchases-stage-card > .panel-title {
    margin-bottom: 6px !important;
    padding-bottom: 4px !important;
    border-bottom: none !important;
}

/* Viability denser */
#stage-viability .viability-dashboard {
    gap: 8px !important;
    padding: clamp(8px, 1.2vh, 14px) clamp(10px, 1.4vw, 16px) !important;
}
#stage-viability .affordability-core-metrics,
#stage-viability .affordability-metrics {
    gap: 8px !important;
}
#stage-viability .core-metric,
#stage-viability .mini-metric {
    padding: 10px 12px !important;
}
#stage-viability .viability-insight-row {
    gap: 8px !important;
}
#stage-viability .viability-insight-card {
    padding: 8px 10px !important;
}

/* Chart stages: less walkthrough air */
.stage-panel .chart-title {
    margin-bottom: 2px !important;
}
.stage-panel .section-kicker {
    margin-bottom: 2px !important;
}
.stage-panel .chart-description {
    margin-bottom: 4px !important;
    font-size: 0.74rem !important;
}
.stage-panel .chart-walkthrough {
    margin: 2px 0 4px !important;
    padding: 6px 10px !important;
}

/* App / Outro: fill without empty bands */
#stage-app .app-stage-card,
#stage-outro .outro-stage-card {
    justify-content: center !important;
}
#stage-app .app-stage-grid {
    gap: 16px !important;
}
#stage-outro .outro-stage-inner {
    gap: 12px !important;
}

/* Interactive focus still visible without frames */
.stage-panel button:focus-visible,
.stage-panel a:focus-visible,
.stage-panel input:focus-visible,
.stage-panel select:focus-visible {
    outline: 1px solid rgba(232, 213, 163, 0.45);
    outline-offset: 2px;
}

/* Hero → content: single viewport offset, no double gap */
.content {
    margin-top: 100vh !important;
    margin-top: 100dvh !important;
    padding-top: 0 !important;
}
.app-container {
    padding-top: clamp(8px, 1.2vh, 14px) !important;
    padding-bottom: clamp(8px, 1.2vh, 16px) !important;
    gap: 8px !important;
}
/* Quick guide: compact, frameless, no leftover bottom margin */
.instructions-panel,
#get-started.instructions-panel {
    margin: 0 !important;
    margin-bottom: 0 !important;
    padding: 10px 12px !important;
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
}
.instructions-panel::before,
.instructions-panel::after {
    display: none !important;
}
.financial-planning-header {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}
/* summaryCards orphan empty space */
#summaryCards:empty,
.summary-grid:empty {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
#summaryCards:not(:empty) {
    margin: 0 !important;
    padding: 4px 0 !important;
    min-height: 0 !important;
}

/* ═══════════════════════════════════════════════════════════
   PURCHASES — symmetric floor-blocker dashboard tiles
   ═══════════════════════════════════════════════════════════ */
#stage-purchases .purchases-stage-card {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    justify-content: flex-start !important;
    min-height: min(94dvh, 920px) !important;
}

.stage-dash-head {
    flex: 0 0 auto;
    display: grid;
    gap: 4px;
    max-width: 48rem;
}
.stage-dash-title {
    margin: 0 !important;
    font-family: var(--font-display), Georgia, serif !important;
    font-weight: 500 !important;
    font-size: clamp(1.5rem, 3vw, 2.15rem) !important;
    letter-spacing: 0.02em !important;
    color: var(--text) !important;
    line-height: 1.1 !important;
}
.stage-dash-lede {
    margin: 0 !important;
    font-size: 0.82rem !important;
    color: var(--text-tertiary) !important;
    line-height: 1.4 !important;
}

#stage-purchases .purchases-sym-grid,
#stage-purchases .main-layout.purchases-sym-grid {
    flex: 1 1 auto !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: auto !important;
    gap: 10px !important;
    min-height: 0 !important;
    align-items: stretch !important;
    width: 100% !important;
}
#stage-purchases .main-layout.purchases-sym-grid > #carPanel,
#stage-purchases .main-layout.purchases-sym-grid > #housePanel,
#stage-purchases .main-layout.purchases-sym-grid > #collegePanel,
#stage-purchases .main-layout.purchases-sym-grid > #medicalPanel {
    grid-column: auto !important;
    grid-row: auto !important;
}

/* Six supporting viability metrics: two matching three-column bands. */
#stage-viability #affordabilityCoreMetrics,
#stage-viability #affordabilityMiniMetrics {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
#stage-viability .vd-kpi-row .vd-tile-value {
    font-size: clamp(2rem, 5.6vh, 3.5rem) !important;
    letter-spacing: -0.055em !important;
}

/* Expanded footer directory: five filled columns on desktop. */
#stage-outro .outro-stage-inner .footer-grid.outro-footer-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

/* Income face is an explicit edit target even while showing compact 9.6K. */
#stage-planning .budget-amount-face--income {
    cursor: text !important;
    outline: none;
}
#stage-planning .budget-amount-face--income::after {
    content: "CLICK TO EDIT" !important;
    position: absolute !important;
    right: 7px !important;
    bottom: 3px !important;
    width: auto !important;
    height: auto !important;
    background: none !important;
    color: rgba(232,213,163,.38) !important;
    font-family: var(--font-data) !important;
    font-size: .46rem !important;
    letter-spacing: .1em !important;
    opacity: 1 !important;
}
#stage-planning .budget-amount-face--income:hover,
#stage-planning .budget-amount-face--income:focus-within,
#stage-planning .budget-amount-face--income:focus-visible {
    box-shadow: inset 0 -1px 0 rgba(232,213,163,.5) !important;
}
#stage-planning .budget-amount-face--income:focus-within::after {
    content: "ENTER MONTHLY AMOUNT" !important;
    color: rgba(232,213,163,.72) !important;
}
@media (max-width: 900px) {
    #stage-outro .outro-stage-inner .footer-grid.outro-footer-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Primary KPI reading order: cash flow → savings rate → expense ratio. */
#stage-viability #affordabilityCoreMetrics .monthly-cash-flow-metric { order: 1; }
#stage-viability #affordabilityCoreMetrics .savings-rate-metric { order: 2; }
#stage-viability #affordabilityCoreMetrics .expense-ratio-metric { order: 3; }

/* Expanded footer directory: five filled columns on desktop. */
#stage-outro .outro-stage-inner .footer-grid.outro-footer-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}
@media (max-width: 900px) {
    #stage-outro .outro-stage-inner .footer-grid.outro-footer-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Simplified continuous scroll: content never phases in or out. */
.reveal-block,
.reveal-block.is-revealed,
.stage-panel,
.stage-panel.is-stage-active,
.stage-panel:not(.is-stage-active) {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
    transition: none !important;
}

/* “As seen on” marks use a clean white editorial treatment. */
.hero-as-seen-logo,
.hero-as-seen-logo svg {
    color: #ffffff !important;
    fill: currentColor !important;
    opacity: 0.94 !important;
    filter: none !important;
}
/* Equal 2×2 purchase tiles (house no longer spans two columns) */
#stage-purchases #housePanel {
    grid-column: auto !important;
}

.purchase-tile {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    min-height: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 14px 16px 40px !important; /* room for corner glyph */
    border: 1px solid rgba(201, 168, 108, 0.1) !important;
    border-radius: 2px !important;
    background:
        radial-gradient(ellipse 50% 40% at 100% 100%, rgba(201, 168, 108, 0.05), transparent 55%),
        rgba(0, 0, 0, 0.22) !important;
    box-shadow: none !important;
    transition: background 0.3s ease, border-color 0.25s ease !important;
    position: relative !important;
    overflow: hidden !important;
}
.purchase-tile:hover {
    background:
        radial-gradient(ellipse 55% 45% at 100% 100%, rgba(201, 168, 108, 0.08), transparent 55%),
        rgba(0, 0, 0, 0.32) !important;
    border-color: rgba(201, 168, 108, 0.22) !important;
}
.purchase-tile.disabled {
    opacity: 0.45 !important;
    filter: saturate(0.5);
}

.purchase-tile-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}
.purchase-tile-head .purchase-tile-name {
    flex: 0 1 auto;
}
.purchase-tile-head .purchase-tile-switch {
    margin-left: 0;
}
.purchase-tile-index {
    font-family: var(--font-data);
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    color: rgba(232, 213, 163, 0.5);
}
.purchase-tile-name {
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    flex: 1;
    min-width: 0;
}
.purchase-tile-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    margin: 0;
}
.purchase-tile-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.purchase-tile-switch-ui {
    width: 32px;
    height: 18px;
    border-radius: 999px;
    background: rgba(244, 239, 230, 0.12);
    border: 1px solid rgba(201, 168, 108, 0.2);
    position: relative;
    transition: background 0.25s ease, border-color 0.25s ease;
}
.purchase-tile-switch-ui::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(244, 239, 230, 0.45);
    transition: transform 0.3s var(--ease-out-expo), background 0.25s ease;
}
.purchase-tile-switch input:checked + .purchase-tile-switch-ui {
    background: rgba(201, 168, 108, 0.22);
    border-color: rgba(232, 213, 163, 0.45);
}
.purchase-tile-switch input:checked + .purchase-tile-switch-ui::after {
    transform: translateX(14px);
    background: var(--gold-soft);
    box-shadow: 0 0 10px rgba(232, 213, 163, 0.55);
}
.purchase-tile-switch-label {
    font-family: var(--font-data);
    font-size: 0.58rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    min-width: 1.8em;
}

/* Hero payment number — dominates the tile */
.purchase-tile-hero {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-height: 0;
    padding: 4px 0 8px;
    gap: 2px;
}
.purchase-tile-hero-label {
    font-family: var(--font-data);
    font-size: 0.55rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.purchase-tile-hero-value,
.purchase-tile .payment-estimate-value {
    font-family: var(--font-data) !important;
    font-size: clamp(1.85rem, 4.2vh, 2.75rem) !important;
    font-weight: 600 !important;
    letter-spacing: -0.04em !important;
    line-height: 1 !important;
    color: var(--gold-soft) !important;
    text-shadow: 0 0 28px rgba(201, 168, 108, 0.25) !important;
    font-variant-numeric: tabular-nums !important;
}

.purchase-tile-fields {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.purchase-tile-fields .form-group {
    margin: 0 !important;
}
.purchase-tile-fields .form-label {
    font-size: 0.58rem !important;
    letter-spacing: 0.1em !important;
    margin-bottom: 2px !important;
    color: var(--text-muted) !important;
}
.purchase-tile-fields .form-input {
    min-height: 32px !important;
    height: 32px !important;
    padding: 4px 8px !important;
    font-size: 0.8rem !important;
    border: none !important;
    border-bottom: 1px solid rgba(201, 168, 108, 0.16) !important;
    border-radius: 0 !important;
    background: transparent !important;
}
.purchase-tile-fields .form-input:focus {
    border-bottom-color: rgba(232, 213, 163, 0.5) !important;
    box-shadow: none !important;
}
.purchase-tile-fields .input-group {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin: 0 !important;
}
.purchase-tile-fields .form-helper {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════
   VIABILITY — clean bento dashboard (clarity + working tips)
   ═══════════════════════════════════════════════════════════ */
#stage-viability .viability-dashboard.vd-dash,
#stage-viability .vd-dash {
    display: flex !important;
    flex-direction: column !important;
    gap: clamp(10px, 1.6vh, 16px) !important;
    justify-content: flex-start !important;
    min-height: 0 !important;
    height: 100% !important;
    padding: clamp(14px, 2.2vh, 22px) clamp(14px, 2vw, 28px) !important;
    box-sizing: border-box !important;
    background:
        linear-gradient(180deg, rgba(12, 10, 8, 0.35), rgba(6, 5, 4, 0.2)) !important;
    border: none !important;
    overflow: hidden !important;
}

/* ── Header ─────────────────────────────────────────────── */
.vd-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 24px;
    flex: 0 0 auto;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(201, 168, 108, 0.14);
}
.vd-header-main {
    min-width: 0;
    display: grid;
    gap: 6px;
}
.vd-header-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.vd-header-meta .section-kicker {
    margin: 0 !important;
}
.vd-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 10px;
    border-radius: 999px;
    font-family: var(--font-data);
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold-soft);
    background: rgba(201, 168, 108, 0.1);
    border: 1px solid rgba(201, 168, 108, 0.28);
}
.vd-pill[data-state="strained"] {
    color: #f0a090;
    background: rgba(224, 122, 106, 0.12);
    border-color: rgba(224, 122, 106, 0.35);
}
.vd-pill-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 8px currentColor;
}
.vd-title,
#stage-viability .vd-dash .affordability-title,
#stage-viability .vd-dash .viability-verdict {
    margin: 0 !important;
    font-family: var(--font-display), Georgia, serif !important;
    font-weight: 500 !important;
    font-size: clamp(1.35rem, 2.6vw, 1.85rem) !important;
    letter-spacing: 0.01em !important;
    line-height: 1.15 !important;
    color: var(--gold-soft) !important;
    text-align: left !important;
    max-width: none !important;
    text-shadow: none !important;
    text-transform: none !important;
}
.vd-dash.negative .vd-title,
.vd-dash.is-strained .vd-title,
.vd-dash.negative .affordability-title,
.vd-dash.is-strained .affordability-title {
    color: #e8a090 !important;
}
.vd-sub,
#stage-viability .vd-dash .affordability-subtitle {
    margin: 0 !important;
    font-family: var(--font-ui), system-ui, sans-serif !important;
    font-size: 0.84rem !important;
    color: var(--text-tertiary) !important;
    text-align: left !important;
    max-width: 58ch;
    line-height: 1.4 !important;
    text-transform: none !important;
    letter-spacing: 0.01em !important;
}
.vd-live-hint {
    margin: 0;
    flex: 0 0 auto;
    font-family: var(--font-data);
    font-size: 0.58rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
    opacity: 0.85;
}

/* ── Board grid ─────────────────────────────────────────── */
.vd-board {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
    align-content: stretch;
}

.vd-board > .vd-tile--hero:nth-child(1) { grid-column: 1; grid-row: 1; }
.vd-board > .vd-tile--hero:nth-child(2) { grid-column: 2; grid-row: 1; }

.vd-board > .vd-kpi-row.viability-kpi-primary,
.vd-board > #affordabilityCoreMetrics {
    grid-column: 1 / -1;
    grid-row: 2;
}
.vd-board > .vd-kpi-row.viability-kpi-secondary,
.vd-board > #affordabilityMiniMetrics {
    grid-column: 1 / -1;
    grid-row: 3;
}

#stage-viability .viability-kpi-primary,
#stage-viability .affordability-core-metrics,
#stage-viability .viability-kpi-secondary,
#stage-viability .affordability-metrics {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    height: 100% !important;
    min-height: 0 !important;
    align-items: stretch !important;
}

/* ── Tiles ──────────────────────────────────────────────── */
#stage-viability .vd-tile,
#stage-viability .core-metric.vd-tile,
#stage-viability .mini-metric.vd-tile {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    text-align: left !important;
    gap: 8px !important;
    padding: clamp(12px, 1.8vh, 18px) clamp(12px, 1.4vw, 18px) !important;
    min-height: 0 !important;
    min-width: 0 !important;
    height: 100% !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(201, 168, 108, 0.12) !important;
    border-radius: 2px !important;
    background:
        linear-gradient(165deg, rgba(255, 255, 255, 0.025), transparent 42%),
        rgba(0, 0, 0, 0.28) !important;
    box-shadow: none !important;
    overflow: hidden !important;
    transition: border-color 0.2s ease, background 0.25s ease !important;
    cursor: default !important;
}
#stage-viability .vd-tile:hover,
#stage-viability .vd-tile:focus-within {
    border-color: rgba(201, 168, 108, 0.32) !important;
    background:
        linear-gradient(165deg, rgba(201, 168, 108, 0.06), transparent 50%),
        rgba(0, 0, 0, 0.34) !important;
}

.vd-tile-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
}
#stage-viability .vd-tile-label,
#stage-viability .core-metric-label,
#stage-viability .mini-metric-label {
    font-family: var(--font-data) !important;
    font-size: 0.6rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: rgba(244, 239, 230, 0.48) !important;
    margin: 0 !important;
}

.vd-tip-btn {
    appearance: none;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(201, 168, 108, 0.35);
    background: rgba(201, 168, 108, 0.08);
    color: var(--gold-soft);
    font-family: var(--font-data);
    font-size: 0.62rem;
    font-weight: 600;
    line-height: 1;
    cursor: help;
    display: grid;
    place-items: center;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.vd-tip-btn:hover,
.vd-tip-btn:focus-visible {
    background: rgba(201, 168, 108, 0.22);
    border-color: rgba(232, 213, 163, 0.55);
    outline: none;
    transform: scale(1.06);
}

#stage-viability .vd-tile-value,
#stage-viability .core-metric-value,
#stage-viability .mini-metric-value,
#stage-viability .viability-mega-value {
    font-family: var(--font-data) !important;
    font-variant-numeric: tabular-nums !important;
    font-weight: 600 !important;
    letter-spacing: -0.04em !important;
    line-height: 1 !important;
    color: var(--gold-soft) !important;
    margin: 0 !important;
    text-shadow: none !important;
}
#stage-viability .vd-tile--hero .vd-tile-value,
#stage-viability .vd-tile--hero .viability-mega-value {
    font-size: clamp(2.1rem, 5.5vh, 3.4rem) !important;
    flex: 1 1 auto;
    display: flex !important;
    align-items: center !important;
}
#stage-viability .vd-tile--kpi .vd-tile-value,
#stage-viability .vd-tile--kpi .core-metric-value,
#stage-viability .vd-tile--kpi .mini-metric-value {
    font-size: clamp(1.35rem, 2.8vh, 1.85rem) !important;
}

#stage-viability .vd-tile-value.negative,
#stage-viability .viability-mega-value.negative,
#stage-viability .core-metric-value.negative {
    color: #e07a6a !important;
}

.vd-tile-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    margin-top: auto;
}
.vd-tile-hint {
    font-family: var(--font-ui), system-ui, sans-serif;
    font-size: 0.72rem;
    color: var(--text-muted);
    line-height: 1.3;
}

#stage-viability .vd-chip,
#stage-viability .core-metric-status,
#stage-viability .mini-metric-trend {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 3px 8px !important;
    border-radius: 999px !important;
    font-family: var(--font-data) !important;
    font-size: 0.62rem !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: var(--text-tertiary) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    white-space: nowrap !important;
}
#stage-viability .vd-chip.positive,
#stage-viability .core-metric-status.positive,
#stage-viability .mini-metric-trend.positive {
    color: #c8d4a8 !important;
    border-color: rgba(160, 180, 120, 0.28) !important;
    background: rgba(120, 150, 90, 0.1) !important;
}
#stage-viability .vd-chip.warning,
#stage-viability .core-metric-status.warning,
#stage-viability .mini-metric-trend.warning {
    color: #e0c98e !important;
    border-color: rgba(201, 168, 108, 0.3) !important;
    background: rgba(201, 168, 108, 0.1) !important;
}
#stage-viability .vd-chip.negative,
#stage-viability .core-metric-status.negative,
#stage-viability .mini-metric-trend.negative {
    color: #f0a090 !important;
    border-color: rgba(224, 122, 106, 0.35) !important;
    background: rgba(224, 122, 106, 0.1) !important;
}

/* Kill legacy absolute tooltips inside tiles */
#stage-viability .core-metric-tooltip,
#stage-viability .mini-metric-tooltip {
    display: none !important;
}

/* Portal tooltip — fixed, above everything */
.vd-tooltip {
    position: fixed;
    z-index: 9999;
    width: min(300px, calc(100vw - 24px));
    padding: 12px 14px;
    border-radius: 3px;
    border: 1px solid rgba(201, 168, 108, 0.32);
    background: rgba(10, 8, 6, 0.96);
    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(0, 0, 0, 0.4),
        0 0 24px rgba(201, 168, 108, 0.08);
    backdrop-filter: blur(12px);
    pointer-events: auto;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.15s ease, transform 0.18s var(--ease-out-expo, ease);
}
.vd-tooltip.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.vd-tooltip[hidden] {
    display: none !important;
}
.vd-tooltip-title {
    font-family: var(--font-data);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold-soft);
    margin-bottom: 6px;
}
.vd-tooltip-body {
    font-family: var(--font-ui), system-ui, sans-serif;
    font-size: 0.78rem;
    line-height: 1.45;
    color: rgba(244, 239, 230, 0.78);
}

.viability-foot-note {
    display: none !important;
}

/* Chart stages — denser head so canvas owns space */
#stage-budget .stage-panel-card,
#stage-savings .stage-panel-card,
#stage-spending .stage-panel-card,
#stage-treemap .stage-panel-card,
#stage-ledger .stage-panel-card {
    justify-content: flex-start !important;
    gap: 0 !important;
}
#stage-budget .chart-walkthrough,
#stage-savings .chart-walkthrough,
#stage-spending .chart-walkthrough,
#stage-treemap .chart-walkthrough,
#stage-ledger .chart-walkthrough {
    display: none !important; /* reclaim vertical for the graphic */
}

@media (max-width: 900px) {
    #stage-purchases .purchases-sym-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: auto !important;
        gap: 8px !important;
    }
    #stage-purchases #housePanel {
        grid-column: span 2 !important;
    }
    .vd-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .vd-board {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;
    }
    .vd-board > .vd-tile--hero:nth-child(1),
    .vd-board > .vd-tile--hero:nth-child(2),
    .vd-board > .vd-kpi-row,
    .vd-board > #affordabilityCoreMetrics,
    .vd-board > #affordabilityMiniMetrics {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
    }
    #stage-viability .viability-kpi-primary,
    #stage-viability .viability-kpi-secondary,
    #stage-viability .affordability-core-metrics,
    #stage-viability .affordability-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    #stage-viability .vd-tile--hero .vd-tile-value {
        font-size: clamp(1.8rem, 7vw, 2.6rem) !important;
    }
}

/* Force purchase hero scale (beats legacy .payment-estimate-value) */
#stage-purchases .purchase-tile-hero-value,
#stage-purchases .purchase-tile .payment-estimate-value,
#stage-purchases #carPaymentDisplay,
#stage-purchases #housePaymentDisplay,
#stage-purchases #collegePaymentDisplay,
#stage-purchases #medicalPaymentDisplay {
    font-family: var(--font-data) !important;
    font-size: clamp(2rem, 5vh, 3.1rem) !important;
    font-weight: 600 !important;
    letter-spacing: -0.045em !important;
    line-height: 1 !important;
    color: #e8d5a3 !important;
    display: block !important;
}

/* Hero values — calm dashboard scale (not billboard) */
#stage-viability .vd-tile--hero .viability-mega-value,
#stage-viability .vd-tile--hero #miniMonthlyCashFlow,
#stage-viability .vd-tile--hero #topRightSavings {
    font-size: clamp(2.1rem, 5.5vh, 3.4rem) !important;
    font-weight: 600 !important;
    color: #e8d5a3 !important;
}

#stage-viability .vd-title,
#stage-viability #affordabilityTitle {
    font-size: clamp(1.35rem, 2.6vw, 1.85rem) !important;
}

/* ═══════════════════════════════════════════════════════════
   BENTO DASHBOARD SYSTEM — max-fit, no truncation, no dead air
   Tableau/Power BI style: content owns the cell
   ═══════════════════════════════════════════════════════════ */

/* Every stage shell fills the viewport frame */
.stage-panel.stage-snap.bento-stage,
#stage-app.stage-panel,
#stage-purchases.stage-panel,
#stage-viability.stage-panel {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100dvh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.bento-shell,
#stage-app .app-stage-card.bento-shell,
#stage-purchases .purchases-stage-card.bento-shell,
#stage-viability .viability-dashboard.bento-shell,
.stage-panel > .bento-shell {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: stretch !important;
    align-items: stretch !important;
    overflow: hidden !important;
    padding: clamp(8px, 1.2dvh, 14px) clamp(10px, 1.4vw, 18px) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    container-type: size;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* ── App bento grid ─────────────────────────────────────── */
.bento-grid {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    width: 100% !important;
    display: grid !important;
    gap: clamp(8px, 1.2cqi, 12px) !important;
}

.bento-grid--app {
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(0, 1.35fr) minmax(0, 0.85fr) !important;
    grid-template-areas:
        "hero"
        "signup" !important;
    max-width: 720px !important;
    margin: 0 auto !important;
    width: 100% !important;
}

.bento-cell--span-hero { grid-area: hero; }
.bento-cell--span-visual { display: none !important; }
.bento-cell--span-signup { grid-area: signup; }
.bento-cell--span-stores { display: none !important; }
.bento-cell--span-atmosphere { display: none !important; }

.bento-cell {
    position: relative;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    container-type: size;
    background: rgba(0, 0, 0, 0.22);
    border: none !important;
    border-radius: 0 !important;
    transition: background 0.35s ease, transform 0.4s var(--ease-out-expo);
}
.bento-cell:hover {
    background: rgba(0, 0, 0, 0.32);
}

.bento-cell-inner {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(6px, 1.5cqh, 12px);
    padding: clamp(10px, 2.5cqi, 18px);
    box-sizing: border-box;
    overflow: hidden;
}

.bento-cell-inner--media {
    align-items: center;
    justify-content: center;
    padding: clamp(6px, 1.5cqi, 12px);
    background:
        radial-gradient(ellipse 70% 60% at 50% 40%, rgba(201, 168, 108, 0.1), transparent 65%),
        rgba(0, 0, 0, 0.35);
}

.bento-cell-inner--stores {
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
}

.bento-cell-kicker {
    font-family: var(--font-data);
    font-size: clamp(0.55rem, 2.2cqh, 0.68rem);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
}

.bento-fit-title,
#stage-app .app-launch-title {
    margin: 0 !important;
    font-family: var(--font-display), Georgia, serif !important;
    font-weight: 450 !important;
    letter-spacing: 0.01em !important;
    line-height: 1.12 !important;
    color: var(--text-secondary) !important;
    /* calmer than hero — closer to chart-title scale */
    font-size: clamp(1.25rem, 5.5cqh, 2rem) !important;
}

.bento-fit-body,
#stage-app .app-launch-lede {
    margin: 0 !important;
    max-width: 42ch !important;
    color: var(--text-tertiary) !important;
    line-height: 1.4 !important;
    font-size: clamp(0.78rem, 2.8cqh, 0.95rem) !important;
    font-weight: 400 !important;
}

.bento-fit-list,
#stage-app .app-launch-points {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    display: grid !important;
    gap: 0.35em !important;
    font-size: clamp(0.72rem, 3cqh, 0.92rem) !important;
    color: var(--text-tertiary) !important;
}
.bento-fit-list li::before,
#stage-app .app-launch-points li::before {
    content: "—";
    color: var(--gold);
    margin-right: 0.5em;
}

.bento-fit-meta,
#stage-app .app-launch-release {
    margin: 0 !important;
    font-size: clamp(0.68rem, 2.8cqh, 0.85rem) !important;
    color: var(--text-muted) !important;
}
.bento-fit-meta strong {
    color: var(--gold-soft);
    display: block;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.85em;
}

/* Phone media fills cell */
.bento-phone-frame {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    margin: 0 auto;
    border-radius: 18px;
    overflow: hidden;
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(201, 168, 108, 0.15);
    background: #000;
}
.bento-phone-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    vertical-align: middle;
}
.bento-phone-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 12% 10% 14%;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.85) 55%);
    display: grid;
    gap: 6px;
}
.bento-phone-overlay .app-launch-phone-brand {
    font-family: var(--font-ui);
    font-weight: 800;
    letter-spacing: 0.2em;
    font-size: clamp(0.55rem, 2.5cqh, 0.75rem);
    color: var(--gold-soft);
}
.bento-phone-overlay .app-launch-phone-metric {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    font-size: clamp(0.55rem, 2.2cqh, 0.72rem);
    color: rgba(244, 239, 230, 0.55);
}
.bento-phone-overlay .app-launch-phone-metric strong,
.bento-phone-overlay .bento-fit-num {
    font-family: var(--font-data);
    font-size: clamp(0.9rem, 4.5cqh, 1.35rem) !important;
    color: var(--gold-soft);
    letter-spacing: -0.03em;
}

.bento-atmos-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.55;
    filter: saturate(0.9) contrast(1.05);
    transition: opacity 0.5s ease, transform 0.8s var(--ease-out-expo);
}
.bento-cell--span-atmosphere:hover .bento-atmos-img {
    opacity: 0.75;
    transform: scale(1.03);
}

/* Signup form fills cell */
.bento-cell--span-signup .email-signup-grid,
#stage-app .app-launch-signup-form {
    display: grid !important;
    grid-template-columns: 1fr 1fr auto !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: none !important;
    align-items: stretch !important;
}
#stage-app .email-signup-input,
#stage-app .email-signup-button {
    min-height: clamp(36px, 8cqh, 48px) !important;
    height: auto !important;
    font-size: clamp(0.75rem, 2.8cqh, 0.9rem) !important;
}

/* Kill old app grid that broke columns */
#stage-app .app-stage-grid {
    display: none !important;
}
#stage-app .app-launch-phone {
    transform: none !important;
}

/* Purchases as filled bento shell */
#stage-purchases .purchases-stage-card.bento-shell {
    gap: 8px !important;
}
#stage-purchases .purchases-sym-grid {
    flex: 1 1 auto !important;
    height: 100% !important;
    min-height: 0 !important;
}
#stage-purchases .purchase-tile {
    container-type: size;
}
#stage-purchases .purchase-tile-hero {
    flex: 1 1 auto !important;
    min-height: 0 !important;
}
#stage-purchases .purchase-tile-hero-value {
    font-size: clamp(1.6rem, 18cqh, 3.2rem) !important;
}

/* Viability as filled bento shell */
#stage-viability .viability-dashboard.bento-shell {
    gap: clamp(8px, 1.5cqh, 14px) !important;
    justify-content: stretch !important;
}
#stage-viability .viability-verdict-band {
    flex: 0 0 auto;
}
#stage-viability .viability-mega-row {
    flex: 1 1 35% !important;
    min-height: 0 !important;
    align-items: stretch !important;
}
#stage-viability .viability-mega {
    container-type: size;
    min-height: 0 !important;
    height: 100% !important;
}
#stage-viability .viability-mega-value {
    font-size: clamp(2rem, 22cqh, 4.5rem) !important;
}
#stage-viability .viability-kpi-primary,
#stage-viability .viability-kpi-secondary {
    flex: 0 0 auto !important;
}

/* Chart bento shells — canvas fills remainder */
.chart-container.bento-shell {
    gap: 4px !important;
}
.chart-container.bento-shell .chart-wrapper,
.chart-container.bento-shell .budget-pie-container,
.chart-container.bento-shell .treemap-container,
.chart-container.bento-shell .table-scroll {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
}

/* Fluid stage panels fill remaining height without double-padding */
html.stages-armed .stage-panel.stage-snap {
    padding: 0 !important;
}
html.stages-armed .stage-panel.stage-snap > .stage-panel-card {
    min-height: 0 !important;
    height: 100% !important;
    max-height: none !important;
}

/* Micro-interaction: active stage cells breathe */
html.journey-live .stage-panel.is-stage-active .bento-cell {
    animation: bentoIn 0.55s var(--ease-out-expo) both;
}
html.journey-live .stage-panel.is-stage-active .bento-cell:nth-child(2) { animation-delay: 0.04s; }
html.journey-live .stage-panel.is-stage-active .bento-cell:nth-child(3) { animation-delay: 0.08s; }
html.journey-live .stage-panel.is-stage-active .bento-cell:nth-child(4) { animation-delay: 0.12s; }
html.journey-live .stage-panel.is-stage-active .bento-cell:nth-child(5) { animation-delay: 0.16s; }

@keyframes bentoIn {
    from {
        opacity: 0.6;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 900px) {
    .bento-grid--app {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto !important;
        grid-template-areas:
            "hero"
            "signup" !important;
        max-width: none !important;
    }
    .bento-cell--span-visual,
    .bento-cell--span-atmosphere,
    .bento-cell--span-stores { display: none !important; }
    #stage-app.stage-panel {
        height: auto !important;
        max-height: none !important;
        min-height: 100dvh !important;
        overflow: visible !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html.journey-live .stage-panel.is-stage-active .bento-cell {
        animation: none !important;
    }
}

/* Pass 2 — tighter app bento balance, kill leftover pad */
#stage-app.stage-panel {
    padding: 0 !important;
}
#stage-app .bento-shell {
    padding: clamp(6px, 1dvh, 12px) !important;
}
.bento-grid--app {
    grid-template-rows: minmax(0, 1.4fr) minmax(0, 0.9fr) !important;
    gap: 10px !important;
}
/* Ensure stage itself is full viewport and not clipped by app-container gap */
#stage-app.stage-panel.stage-snap {
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
}
.app-container {
    gap: 0 !important;
    padding-left: clamp(8px, 1.2vw, 16px) !important;
    padding-right: clamp(8px, 1.2vw, 16px) !important;
}
/* Stage panels edge-to-edge within container */
html.stages-armed .stage-panel.stage-snap {
    width: 100% !important;
}

/* Pass 3 — richer cells, less air, stronger media fill */
.bento-cell-inner--media {
    padding: 4px !important;
}
.bento-phone-frame {
    border-radius: 18px !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45) !important;
    border: none !important;
}
/* Gold edge light on app stage — subtle wash only */
#stage-app.is-stage-active .bento-cell {
    box-shadow: none !important;
}
.bento-cell--span-hero .bento-cell-inner {
    justify-content: space-between !important;
    gap: clamp(8px, 2cqh, 16px) !important;
}
.bento-cell--span-signup .bento-cell-inner {
    justify-content: center !important;
}
.bento-cell--span-stores .footer-store-logo {
    height: clamp(36px, 12cqh, 52px) !important;
    width: auto !important;
    filter: brightness(1.05) contrast(1.05);
}
/* Gold edge light on active app stage cells */
#stage-app.is-stage-active .bento-cell {
    box-shadow: inset 0 0 0 1px rgba(201, 168, 108, 0.06);
}
#stage-app.is-stage-active .bento-cell--span-visual {
    box-shadow: inset 0 0 60px rgba(201, 168, 108, 0.06);
}
/* Form buttons more substantial */
#stage-app .email-signup-button {
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    background: linear-gradient(135deg, rgba(201, 168, 108, 0.35), rgba(138, 112, 64, 0.5)) !important;
    border: 1px solid rgba(232, 213, 163, 0.4) !important;
    color: var(--gold-soft) !important;
}

/* Pass 4 — purchase tiles: number owns 60%+ of tile; viability tighter */
#stage-purchases .purchase-tile {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    gap: 6px !important;
    padding: 12px 14px !important;
}
#stage-purchases .purchase-tile-hero {
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}
#stage-purchases .purchase-tile-fields {
    opacity: 0.92;
}
#stage-viability .viability-mega-row {
    flex: 1 1 40% !important;
}
#stage-viability .viability-kpi-primary .core-metric-value {
    font-size: clamp(1.4rem, 4.5cqh, 2.4rem) !important;
}
/* Final app fill: no justify center dead bands on shell */
#stage-app .bento-shell {
    justify-content: stretch !important;
}

/* ═══════════════════════════════════════════════════════════
   ALIGNMENT PASS — compact type, purchases fit, open budget
   ═══════════════════════════════════════════════════════════ */

/* Purchases: hard-fit 2×2 into one viewport, no tile overrun */
#stage-purchases.stage-panel {
    overflow: hidden !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
}
#stage-purchases .purchases-stage-card.bento-shell {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
    padding: clamp(8px, 1.2vh, 14px) clamp(12px, 1.5vw, 20px) !important;
    gap: 8px !important;
}
#stage-purchases .stage-dash-head {
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 0 6px !important;
    gap: 2px !important;
}
#stage-purchases .stage-dash-title {
    font-size: clamp(1.1rem, 2vh, 1.4rem) !important;
    margin: 0 !important;
}
#stage-purchases .stage-dash-lede {
    font-size: 0.72rem !important;
    margin: 0 !important;
    opacity: 0.75;
    line-height: 1.25 !important;
}
#stage-purchases .purchases-sym-grid {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: 1fr 1fr !important;
    gap: 8px !important;
    overflow: hidden !important;
}
#stage-purchases .purchase-tile,
#stage-purchases .purchases-sym-grid > .panel {
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    gap: 4px !important;
    padding: 8px 10px !important;
    border: 1px solid rgba(201, 168, 108, 0.12) !important;
    background: rgba(0, 0, 0, 0.22) !important;
    box-shadow: none !important;
    border-radius: 2px !important;
}
#stage-purchases .purchase-tile-head {
    margin: 0 !important;
    padding: 0 !important;
    gap: 6px !important;
}
#stage-purchases .purchase-tile-name {
    font-size: 0.78rem !important;
}
#stage-purchases .purchase-tile-index {
    font-size: 0.55rem !important;
}
#stage-purchases .purchase-tile-hero {
    min-height: 0 !important;
    padding: 2px 0 !important;
    justify-content: center !important;
}
#stage-purchases .purchase-tile-hero-label {
    font-size: 0.65rem !important;
    margin-bottom: 2px !important;
}
#stage-purchases .purchase-tile-hero-value,
#stage-purchases .purchase-tile .payment-estimate-value,
#stage-purchases #carPaymentDisplay,
#stage-purchases #housePaymentDisplay,
#stage-purchases #collegePaymentDisplay,
#stage-purchases #medicalPaymentDisplay {
    font-family: var(--font-data) !important;
    font-size: clamp(1.35rem, 3.2vh, 2rem) !important;
    font-weight: 600 !important;
    letter-spacing: -0.04em !important;
    line-height: 1 !important;
    color: #e8d5a3 !important;
}
#stage-purchases .purchase-tile-fields {
    display: grid !important;
    gap: 4px !important;
    min-height: 0 !important;
    overflow: hidden !important;
    opacity: 1 !important;
}
#stage-purchases .purchase-tile-fields .form-group {
    margin: 0 !important;
    min-width: 0 !important;
}
#stage-purchases .purchase-tile-fields .form-label {
    font-size: 0.65rem !important;
    margin-bottom: 1px !important;
    letter-spacing: 0.08em !important;
}
#stage-purchases .purchase-tile-fields .form-input,
#stage-purchases .purchase-tile-fields select.form-input {
    min-height: 26px !important;
    height: 26px !important;
    padding: 2px 6px !important;
    font-size: 0.72rem !important;
}
#stage-purchases .purchase-tile-fields .form-helper {
    display: none !important;
}
#stage-purchases .purchase-tile-fields .input-group {
    gap: 6px !important;
    margin: 0 !important;
}

/* Budget dash — max-fit donut + dense category board */
#stage-budget.stage-panel {
    overflow: hidden !important;
}
#stage-budget .budget-dash.chart-container {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
    gap: 8px !important;
    padding: clamp(10px, 1.4vh, 16px) clamp(12px, 1.6vw, 22px) !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}
#stage-budget .budget-dash-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 20px;
    flex: 0 0 auto;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(201, 168, 108, 0.12);
}
#stage-budget .budget-dash-head-main {
    min-width: 0;
    display: grid;
    gap: 3px;
}
#stage-budget .budget-dash-title {
    margin: 0 !important;
    font-size: clamp(1.15rem, 2.1vh, 1.45rem) !important;
    text-align: left !important;
}
#stage-budget .budget-dash-lede {
    margin: 0 !important;
    font-size: 0.74rem !important;
    max-width: 52ch !important;
    opacity: 0.72;
    line-height: 1.4;
}
#stage-budget .budget-dash-totals {
    display: flex;
    gap: 6px;
    flex: 0 0 auto;
}
#stage-budget .budget-stat {
    display: grid;
    gap: 2px;
    min-width: 4.75rem;
    padding: 6px 10px;
    border: 1px solid rgba(201, 168, 108, 0.14);
    background: rgba(0, 0, 0, 0.28);
    border-radius: 3px;
}
#stage-budget .budget-stat-label {
    font-family: var(--font-data);
    font-size: 0.5rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
}
#stage-budget .budget-stat-value {
    font-family: var(--font-data);
    font-size: clamp(0.95rem, 1.9vh, 1.2rem);
    font-weight: 600;
    color: var(--gold-soft);
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

#stage-budget .budget-dash-body.budget-pie-container,
#stage-budget .budget-pie-split.budget-dash-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    height: 100% !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}
#stage-budget .budget-dash-grid.budget-pie-split-grid,
#stage-budget .budget-dash-grid.budget-pie-chart-wrapper {
    display: grid !important;
    /* ~52% donut / ~48% board — board needs room for cards */
    grid-template-columns: minmax(0, 1.05fr) minmax(300px, 1fr) !important;
    gap: clamp(12px, 1.8vw, 22px) !important;
    height: 100% !important;
    min-height: 0 !important;
    align-items: stretch !important;
    background: transparent !important;
    border: none !important;
}

/* Donut stage — fill cell; frame grows to available square */
#stage-budget .budget-dash-donut.budget-pie-chart-stage {
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    max-height: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    aspect-ratio: auto !important;
    min-height: 0 !important;
    container-type: size;
}
#stage-budget .budget-donut-frame {
    position: relative;
    width: min(100%, 100cqh, 100cqw);
    height: min(100%, 100cqh, 100cqw);
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 1 / 1;
    border: none;
    background: transparent;
    box-shadow: none;
}
#stage-budget .budget-dash-donut .budget-pie-canvas {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
}
#stage-budget .budget-donut-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 44%;
    text-align: center;
    pointer-events: none;
    z-index: 2;
}
#stage-budget .budget-donut-center-kicker {
    font-family: var(--font-data);
    font-size: 0.52rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(232, 213, 163, 0.45);
}
#stage-budget .budget-donut-center-value {
    font-family: var(--font-data);
    font-size: clamp(1.35rem, 3vh, 2rem);
    font-weight: 600;
    color: var(--gold-soft);
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
#stage-budget .budget-donut-center-meta {
    font-family: var(--font-data);
    font-size: 0.58rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Right rail: insight strip + full-height category board */
#stage-budget .budget-dash-side {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}
#stage-budget .budget-dash-insight {
    flex: 0 0 auto;
    padding: 8px 12px;
    border-left: 2px solid rgba(201, 168, 108, 0.5);
    background:
        linear-gradient(90deg, rgba(201, 168, 108, 0.08), transparent 70%),
        rgba(0, 0, 0, 0.22);
}
#stage-budget .budget-dash-insight-kicker {
    display: block;
    font-family: var(--font-data);
    font-size: 0.5rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 3px;
}
#stage-budget .budget-dash-insight-text {
    margin: 0;
    font-size: 0.74rem;
    line-height: 1.4;
    color: var(--text-secondary);
}

#stage-budget .budget-dash-board {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    border: 1px solid rgba(201, 168, 108, 0.12);
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    overflow: hidden;
}
#stage-budget .budget-dash-board-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    flex: 0 0 auto;
    padding: 0 2px 4px;
    border-bottom: 1px solid rgba(201, 168, 108, 0.1);
}
#stage-budget .budget-dash-board-title {
    font-family: var(--font-data);
    font-size: 0.55rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(232, 213, 163, 0.65);
}
#stage-budget .budget-dash-board-meta {
    font-family: var(--font-data);
    font-size: 0.55rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Category board: 2-col dense cards with share bars */
#stage-budget .budget-dash-side .budget-pie-key,
#stage-budget .budget-dash-side .budget-pie-legend,
#stage-budget .budget-cat-board {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    max-height: none !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-auto-rows: minmax(0, 1fr) !important;
    gap: 5px !important;
    align-content: stretch !important;
    justify-content: stretch !important;
    overflow: hidden !important;
    padding: 0 !important;
}

#stage-budget .budget-cat-board.is-dense {
    gap: 4px !important;
}
#stage-budget .budget-cat-board.is-ultra-dense {
    gap: 3px !important;
}

/* One-col when few items (JS removes is-two-col under 5) */
#stage-budget .budget-cat-board:not(.is-two-col) {
    grid-template-columns: 1fr !important;
}

#stage-budget .budget-dash-side .budget-pie-key-row,
#stage-budget .budget-cat-card {
    display: grid !important;
    grid-template-columns: 8px 1.5em minmax(0, 1fr) auto auto !important;
    grid-template-rows: auto auto !important;
    grid-template-areas:
        "swatch rank name amt pct"
        "bar bar bar bar bar" !important;
    gap: 2px 6px !important;
    align-items: center !important;
    padding: 7px 8px 6px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(201, 168, 108, 0.1) !important;
    border-radius: 3px !important;
    background: rgba(8, 7, 6, 0.55) !important;
    border-bottom: 1px solid rgba(201, 168, 108, 0.1) !important;
}

#stage-budget .budget-cat-board.is-dense .budget-cat-card,
#stage-budget .budget-cat-board.is-dense .budget-pie-key-row {
    padding: 5px 6px 5px !important;
    gap: 2px 5px !important;
}
#stage-budget .budget-cat-board.is-ultra-dense .budget-cat-card,
#stage-budget .budget-cat-board.is-ultra-dense .budget-pie-key-row {
    padding: 4px 5px !important;
}

#stage-budget .budget-cat-card .budget-pie-key-swatch {
    grid-area: swatch;
    width: 8px !important;
    height: 8px !important;
    border-radius: 2px !important;
    align-self: center !important;
}
#stage-budget .budget-cat-rank {
    grid-area: rank;
    font-family: var(--font-data);
    font-size: 0.52rem;
    letter-spacing: 0.04em;
    color: rgba(244, 239, 230, 0.32);
    font-variant-numeric: tabular-nums;
}
#stage-budget .budget-cat-card .budget-pie-key-name {
    grid-area: name;
    font-size: 0.72rem !important;
    font-weight: 500 !important;
    line-height: 1.15 !important;
    color: var(--text-secondary) !important;
}
#stage-budget .budget-cat-card .budget-pie-key-amt {
    grid-area: amt;
    font-size: 0.72rem !important;
    color: var(--gold-soft) !important;
}
#stage-budget .budget-cat-card .budget-pie-key-pct {
    grid-area: pct;
    font-family: var(--font-data) !important;
    font-size: 0.62rem !important;
    color: rgba(244, 239, 230, 0.42) !important;
    min-width: 2.2em;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
#stage-budget .budget-cat-bar {
    grid-area: bar;
    display: block;
    height: 3px;
    margin-top: 2px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}
#stage-budget .budget-cat-bar i {
    display: block;
    height: 100%;
    border-radius: 99px;
    max-width: 100%;
    opacity: 0.85;
}

#stage-budget .budget-cat-board.is-dense .budget-cat-card .budget-pie-key-name,
#stage-budget .budget-cat-board.is-ultra-dense .budget-cat-card .budget-pie-key-name {
    font-size: 0.66rem !important;
}
#stage-budget .budget-cat-board.is-dense .budget-cat-card .budget-pie-key-amt,
#stage-budget .budget-cat-board.is-ultra-dense .budget-cat-card .budget-pie-key-amt {
    font-size: 0.66rem !important;
}
#stage-budget .budget-cat-board.is-ultra-dense .budget-cat-bar {
    height: 2px;
    margin-top: 1px;
}

#stage-budget .budget-pie-empty {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    font-family: var(--font-data);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    text-align: center;
    border: 1px dashed rgba(201, 168, 108, 0.2);
    border-radius: 3px;
}

@media (max-width: 900px) {
    #stage-budget .budget-dash-grid.budget-pie-split-grid,
    #stage-budget .budget-dash-grid.budget-pie-chart-wrapper {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    #stage-budget .budget-dash-donut.budget-pie-chart-stage {
        height: min(42vh, 320px) !important;
    }
    #stage-budget .budget-dash-side {
        min-height: 0;
    }
    #stage-budget .budget-cat-board {
        grid-auto-rows: minmax(44px, auto) !important;
        max-height: min(42vh, 360px) !important;
        overflow: auto !important;
    }
}



/* Kill any residual pie “card” chrome from legacy rules */
#stage-budget .budget-pie-chart-stage,
#stage-budget .budget-pie-container,
#stage-budget .budget-pie-chart-wrapper {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

@media (max-width: 900px) {
    #stage-purchases .purchases-sym-grid {
        grid-template-columns: 1fr !important;
        grid-template-rows: none !important;
        overflow: auto !important;
    }
    #stage-budget .budget-dash-head {
        flex-direction: column;
        align-items: flex-start;
    }
    #stage-budget .budget-dash-grid {
        grid-template-columns: 1fr !important;
    }
    #stage-budget .budget-dash-donut {
        max-height: 42vh !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   VIABILITY DASH — final lock (beats legacy lattice rules)
   Clean executive board + portal tooltips
   ═══════════════════════════════════════════════════════════ */
#stage-viability.stage-panel {
    overflow: hidden !important;
}
#stage-viability .vd-dash.viability-dashboard {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: clamp(14px, 2vh, 22px) clamp(14px, 2vw, 28px) !important;
    justify-content: flex-start !important;
    overflow: hidden !important;
}
#stage-viability .vd-board {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: minmax(120px, 1.4fr) minmax(100px, 1fr) minmax(100px, 1fr) !important;
    gap: 10px !important;
}
#stage-viability .vd-board > .vd-tile--hero:nth-of-type(1) {
    grid-column: 1 !important;
    grid-row: 1 !important;
}
#stage-viability .vd-board > .vd-tile--hero:nth-of-type(2) {
    grid-column: 2 !important;
    grid-row: 1 !important;
}
#stage-viability .vd-board > #affordabilityCoreMetrics {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}
#stage-viability .vd-board > #affordabilityMiniMetrics {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}

#stage-viability .vd-dash .vd-tile,
#stage-viability .vd-dash .core-metric,
#stage-viability .vd-dash .mini-metric {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
    gap: 10px !important;
    height: 100% !important;
    min-height: 0 !important;
    min-width: 0 !important;
    padding: 14px 16px !important;
    border: 1px solid rgba(201, 168, 108, 0.14) !important;
    border-radius: 2px !important;
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.03), transparent 45%),
        rgba(0, 0, 0, 0.3) !important;
    box-shadow: none !important;
    transform: none !important;
    overflow: hidden !important;
}
#stage-viability .vd-dash .vd-tile-value,
#stage-viability .vd-dash .core-metric-value,
#stage-viability .vd-dash .mini-metric-value,
#stage-viability .vd-dash .viability-mega-value {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
}
#stage-viability .vd-dash .vd-tile-foot,
#stage-viability .vd-dash .core-metric-status,
#stage-viability .vd-dash .mini-metric-trend,
#stage-viability .vd-dash .vd-chip {
    flex: 0 0 auto !important;
    margin-top: auto !important;
}
#stage-viability .vd-dash .vd-tile:hover,
#stage-viability .vd-dash .core-metric:hover,
#stage-viability .vd-dash .mini-metric:hover {
    border-color: rgba(201, 168, 108, 0.34) !important;
    transform: none !important;
    box-shadow: none !important;
    background:
        linear-gradient(160deg, rgba(201, 168, 108, 0.07), transparent 50%),
        rgba(0, 0, 0, 0.36) !important;
}

#stage-viability .vd-dash .vd-title,
#stage-viability .vd-dash #affordabilityTitle {
    font-size: clamp(1.3rem, 2.5vw, 1.75rem) !important;
    text-align: left !important;
    max-width: none !important;
    text-shadow: none !important;
    line-height: 1.15 !important;
}
#stage-viability .vd-dash .vd-sub,
#stage-viability .vd-dash #affordabilityDesc {
    font-size: 0.82rem !important;
    text-align: left !important;
    text-transform: none !important;
    letter-spacing: 0.01em !important;
    max-width: 56ch !important;
}

#stage-viability .vd-dash .vd-tile--hero .vd-tile-value,
#stage-viability .vd-dash .vd-tile--hero .viability-mega-value,
#stage-viability .vd-dash #miniMonthlyCashFlow,
#stage-viability .vd-dash #topRightSavings {
    font-size: clamp(2rem, 5vh, 3.2rem) !important;
    line-height: 1 !important;
    letter-spacing: -0.04em !important;
    color: #e8d5a3 !important;
    text-shadow: none !important;
}
#stage-viability .vd-dash .vd-tile--kpi .vd-tile-value,
#stage-viability .vd-dash .core-metric-value,
#stage-viability .vd-dash .mini-metric-value {
    font-size: clamp(1.3rem, 2.6vh, 1.75rem) !important;
    color: #e8d5a3 !important;
}

#stage-viability .vd-dash .core-metric-label,
#stage-viability .vd-dash .mini-metric-label,
#stage-viability .vd-dash .vd-tile-label {
    font-size: 0.58rem !important;
    letter-spacing: 0.14em !important;
    color: rgba(244, 239, 230, 0.48) !important;
}

#stage-viability .vd-dash .core-metric-status,
#stage-viability .vd-dash .mini-metric-trend,
#stage-viability .vd-dash .vd-chip {
    margin-top: 0 !important;
    font-size: 0.6rem !important;
}

/* Portal tip always above stage chrome */
#vdTooltip.vd-tooltip {
    z-index: 10050 !important;
}

@media (max-width: 900px) {
    #stage-viability .vd-board {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;
        overflow: auto !important;
    }
    #stage-viability .vd-board > .vd-tile--hero,
    #stage-viability .vd-board > #affordabilityCoreMetrics,
    #stage-viability .vd-board > #affordabilityMiniMetrics {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        height: auto !important;
    }
    #stage-viability .vd-board > #affordabilityCoreMetrics,
    #stage-viability .vd-board > #affordabilityMiniMetrics {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* ── Premium Phone Mockup & Glassmorphic Overlay Overrides ────────────────── */
.bento-phone-frame {
    aspect-ratio: 9 / 16 !important;
    border: 9px solid #0d0c0a !important; /* iPhone thin bezel */
    border-radius: 38px !important;
    box-shadow: 
        0 30px 70px rgba(0, 0, 0, 0.8),
        0 0 0 1px rgba(232, 213, 163, 0.25),
        inset 0 0 0 2px rgba(255, 255, 255, 0.05) !important;
}

@keyframes pulse {
    0% { transform: scale(1); opacity: 1; box-shadow: 0 0 4px #52c41a; }
    50% { transform: scale(1.25); opacity: 0.8; box-shadow: 0 0 12px #52c41a; }
    100% { transform: scale(1); opacity: 1; box-shadow: 0 0 4px #52c41a; }
}

@media (max-width: 900px) {
    .bento-cell-inner--media {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 32px 12px !important;
    }
    .bento-phone-frame {
        max-width: 300px !important; /* Realistic handheld size on mobile */
        width: 100% !important;
        height: auto !important;
    }
}

/* ── Planning mobile fit: clear fixed nav pill, stop legend/scenario overlap,
   let tiles size to content instead of being squeezed into equal 1fr rows ── */
@media (max-width: 900px) {
    #stage-planning .planning-stage-card {
        padding-top: 84px !important;
    }
    #stage-planning .planning-toolbar {
        display: flex !important;
        flex: 0 0 auto !important;
        flex-direction: column !important;
        align-items: stretch !important;
        height: auto !important;
        min-height: 0 !important;
        gap: 12px !important;
    }
    #stage-planning .income-budget-content,
    #stage-planning .income-budget-content.expanded {
        height: auto !important;
        max-height: 100% !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    #stage-planning .mixing-board-container {
        grid-auto-rows: minmax(min-content, auto) !important;
        height: auto !important;
    }
}

/* ── Reserve bottom-left clearance for the persistent journey HUD:
   stages whose content reaches the viewport floor were rendering
   underneath it (Purchases term field, Treemap legend). ── */
#stage-purchases .purchases-stage-card.stage-panel-card {
    padding-bottom: 60px !important;
}
#stage-treemap .chart-container.stage-panel-card.bento-shell {
    padding-bottom: 60px !important;
}
#stage-ai .panel.ai-analysis-panel.stage-panel-card {
    padding-bottom: 60px !important;
}

/* ── 3D storyboard scroll: camera perspective for the stage corridor ──
   Depth/tilt/scale per stage is driven every scroll frame by
   experience.js (updateJourneyCamera); this just supplies the
   perspective context and removes the old transition on `transform`
   so JS-driven values don't lag behind a CSS transition chasing them. */
.app-container {
    perspective: 1100px;
}
/* rAF lerp owns all motion when the camera engine is live — any CSS
   transition on these properties restarts every frame and smears/chops. */
html.bb-camera .stage-panel,
html.bb-camera #summaryCards {
    will-change: opacity;
    transition: none !important;
}
/* Inertial JS scroll replaces CSS snap (mandatory snap yanks the viewport
   past the whole 3D transition); a gentle JS proximity pull re-centers. */
html.bb-smooth.stages-armed {
    scroll-snap-type: none !important;
}
/* Engine owns scroll position — browser scroll anchoring compensating for
   chart/type refits mid-flight yanks the target around. */
html.bb-smooth {
    overflow-anchor: none;
}

/* Persistent spatial field. The UI remains the foreground instrument; the
   graph is strongest in the open gutters and never receives pointer input. */
#journeyWebgl.journey-webgl {
    display: block !important;
    width: 100vw !important;
    height: 100dvh !important;
    overflow: hidden !important;
    opacity: 0 !important;
    mix-blend-mode: screen;
    filter: saturate(0.78) contrast(1.08);
}
html.journey-live #journeyWebgl.journey-webgl.is-live {
    opacity: 0.58 !important;
}
#journeyWebgl .journey-webgl-canvas {
    opacity: 1;
    mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 100%);
}

/* Fixed chrome safe area. The rail remains a quiet progress instrument; its
   label appears only on intentional hover/focus and never covers live values. */
@media (min-width: 901px) {
    html.journey-live .stage-panel-card,
    html.journey-live .chart-container.stage-panel-card,
    html.journey-live #stage-outro .outro-stage-card {
        padding-left: max(28px, calc(var(--bb-gutter, 12px) * 2)) !important;
    }
    .stage-rail.journey-spine {
        left: 14px !important;
    }
}

@media (max-height: 720px) and (min-width: 901px) {
    .journey-film {
        transform: scale(0.9) !important;
        transform-origin: left bottom;
    }
}
@media (max-width: 900px) {
    html.journey-live #journeyWebgl.journey-webgl.is-live {
        opacity: 0.25 !important;
    }
}
@media (prefers-reduced-motion: reduce) {
    .app-container {
        perspective: none;
    }
    #journeyWebgl.journey-webgl {
        display: none !important;
    }
}

/* SCROLL STABILITY OVERRIDE — intentionally last in the cascade. */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
    html.stages-armed {
        scroll-snap-type: none !important;
        scroll-behavior: auto !important;
    }
    html.stages-armed .stage-panel.stage-snap {
        scroll-snap-stop: normal !important;
    }
}

/* Camera owns stage visibility. Remove slower, duplicate reveal/keyframe
   layers that otherwise restart when the active chapter changes. */
html.bb-camera .stage-panel.reveal-block,
html.bb-camera .stage-panel.reveal-block.is-revealed,
html.bb-camera .stage-panel.is-stage-active,
html.bb-camera .stage-panel.is-stage-active .stage-panel-card {
    animation: none !important;
    transition: none !important;
    filter: none !important;
}

/* Viewport-fit corrections found by measuring real scroll/client dimensions. */
#stage-ai .ai-analysis-preview {
    padding: 10px 12px !important;
    gap: 5px !important;
}
#stage-ai .ai-grade-section {
    padding-block: 4px !important;
}
#stage-ai .ai-insights {
    gap: 3px !important;
    overflow: visible !important;
}
#stage-ai .ai-insight-item {
    padding: 5px 8px !important;
    min-height: 0 !important;
}
#stage-ai .ai-insight-text {
    font-size: 0.66rem !important;
    line-height: 1.24 !important;
}
#stage-ai .ai-analysis-footer {
    margin-top: 0 !important;
    padding-top: 4px !important;
}
#stage-viability .core-metric-value,
#stage-viability .mini-metric-value,
#stage-viability .vd-tile-value {
    overflow: visible !important;
    line-height: 1.08 !important;
    padding-block: 2px !important;
}

/* Viability board symmetry — two equal hero cells over an exact 4 × 2 KPI
   lattice. This is the sole summary surface; the redundant four-card strip
   between Viability and Budget has been removed from the document. */
#stage-viability .vd-board {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-rows: minmax(0, 1.22fr) repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
}
#stage-viability .vd-board > .vd-tile--hero:nth-child(1) {
    grid-column: 1 / 3 !important;
    grid-row: 1 !important;
}
#stage-viability .vd-board > .vd-tile--hero:nth-child(2) {
    grid-column: 3 / 5 !important;
    grid-row: 1 !important;
}
#stage-viability .vd-board > #affordabilityCoreMetrics {
    grid-column: 1 / 5 !important;
    grid-row: 2 !important;
}
#stage-viability .vd-board > #affordabilityMiniMetrics {
    grid-column: 1 / 5 !important;
    grid-row: 3 !important;
}
#stage-viability .affordability-core-metrics,
#stage-viability .affordability-metrics {
    gap: 8px !important;
}
#stage-viability .vd-tile {
    border-color: rgba(201, 168, 108, 0.14) !important;
}
#stage-viability .vd-tile--hero {
    padding: clamp(14px, 2vh, 20px) !important;
}
#stage-viability .vd-tile--hero .vd-tile-value {
    font-size: clamp(2.8rem, 7.2vh, 4.7rem) !important;
    line-height: 0.94 !important;
    letter-spacing: -0.065em !important;
}
#stage-viability .vd-kpi-row .vd-tile {
    padding: clamp(10px, 1.35vh, 14px) clamp(10px, 1vw, 14px) !important;
}

/* Keep the fixed journey HUD out of the lower-left KPI. The reserved baseline
   is part of the board geometry, so the lattice remains symmetrical. */
@media (min-width: 901px) {
    #stage-viability .vd-dash.viability-dashboard {
        padding-bottom: 84px !important;
    }
}
@media (min-width: 901px) and (max-height: 740px) {
    #stage-viability .vd-dash.viability-dashboard {
        padding-bottom: 66px !important;
    }
}

/* Beat legacy high-specificity bento padding rules. */
#stage-app .app-stage-card.bento-shell.stage-panel-card,
#stage-outro .outro-stage-card.stage-panel-card {
    padding: clamp(14px, 2.2vh, 22px) clamp(14px, 2vw, 28px) 104px !important;
}
@media (min-width: 901px) and (max-height: 740px) {
    #stage-app .app-stage-card.bento-shell.stage-panel-card,
    #stage-outro .outro-stage-card.stage-panel-card { padding-bottom: 84px !important; }
}

/* Mobile stage margin contract: header and bento body share the exact shell
   edges. Remove legacy centered 720/768px wrappers. */
#stage-app .app-stage-head,
#stage-app .bento-grid--app {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}
#stage-app .bento-grid--app {
    grid-template-columns: minmax(0, 1.6fr) minmax(300px, .8fr) !important;
}
#stage-app .bento-cell--span-hero,
#stage-app .bento-cell--span-signup {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    border: 1px solid rgba(201, 168, 108, 0.13) !important;
    background:
        linear-gradient(155deg, rgba(255,255,255,.02), transparent 44%),
        rgba(0,0,0,.22) !important;
}
#stage-app .bento-cell--span-hero .bento-cell-inner,
#stage-app .bento-cell--span-signup .bento-cell-inner {
    width: 100% !important;
    max-width: none !important;
    padding: clamp(18px, 2.5vw, 32px) !important;
    box-sizing: border-box !important;
}
#stage-app .bento-cell--span-signup {
    background:
        radial-gradient(circle at 70% 15%, rgba(201,168,108,.08), transparent 45%),
        rgba(0,0,0,.28) !important;
}
@media (max-width: 900px) {
    #stage-app .bento-grid--app { grid-template-columns: 1fr !important; }
}

@media (max-width: 900px) {
    #stage-viability .vd-board {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: auto !important;
    }
    #stage-viability .vd-board > * {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
    }
}

/* FINAL APP / OUTRO ALIGNMENT — intentionally last in the cascade. */
#stage-app .app-stage-card,
#stage-outro .outro-stage-card {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    gap: 10px !important;
    padding: clamp(14px, 2.2vh, 22px) clamp(14px, 2vw, 28px) 104px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    border: none !important;
    border-radius: 0 !important;
    background: linear-gradient(180deg, rgba(12,10,8,.35), rgba(6,5,4,.2)) !important;
}
#stage-app .app-stage-head,
#stage-outro .outro-stage-head {
    flex: 0 0 auto;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(280px, .7fr) !important;
    align-items: end;
    gap: 3px 24px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(201,168,108,.14);
}
#stage-app .app-stage-head .section-kicker,
#stage-outro .outro-stage-head .section-kicker,
#stage-app .app-stage-head .stage-dash-title,
#stage-outro .outro-stage-head .stage-dash-title { grid-column: 1; }
#stage-app .app-stage-head .stage-dash-lede,
#stage-outro .outro-stage-head .stage-dash-lede {
    grid-column: 1;
    grid-row: auto;
    max-width: 64ch;
    margin: 0 !important;
    text-align: left;
    align-self: start;
}
#stage-app .bento-grid--app {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    align-content: stretch !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, .75fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    gap: 8px !important;
}
#stage-app .bento-cell--span-hero { grid-column: 1 !important; grid-row: 1 !important; }
#stage-app .bento-cell--span-signup { grid-column: 2 !important; grid-row: 1 !important; }
#stage-app .bento-cell--span-signup .bento-cell-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* Waitlist form under QR: name + email, full-width join */
#stage-app .app-launch-signup-form,
#stage-app .app-waitlist-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: none !important;
}
#stage-app .app-waitlist-form .email-signup-button,
#stage-app .app-launch-signup-form .email-signup-button {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
}
#stage-app .app-launch-release { margin-top: 16px !important; }
#stage-outro .outro-stage-inner {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: auto minmax(0,1fr) auto auto !important;
    gap: 8px !important;
    padding: 0 !important;
}
#stage-outro .footer-outro-brand {
    display: grid !important;
    grid-template-columns: 1fr minmax(280px,.7fr) !important;
    align-items: end;
    gap: 24px;
    padding-bottom: 8px !important;
    border-bottom: 1px solid rgba(201,168,108,.1);
}
#stage-outro .footer-pitch { margin: 0 !important; text-align: right; }
#stage-outro .footer-grid {
    display: grid !important;
    grid-template-columns: repeat(4,minmax(0,1fr)) !important;
    gap: 8px !important;
    align-items: stretch !important;
}
#stage-outro .footer-col {
    padding: 10px 12px !important;
    border: 1px solid rgba(201,168,108,.13) !important;
    background: rgba(0,0,0,.22) !important;
}
#stage-outro .footer-disclaimer { margin-top: 0 !important; padding-top: 7px !important; }
#stage-outro .footer-bottom { margin-top: 0 !important; padding-top: 7px !important; }
@media (max-width: 900px) {
    #stage-app .app-stage-card,
    #stage-outro .outro-stage-card { padding-bottom: 72px !important; }
    #stage-app .app-stage-head,
    #stage-outro .outro-stage-head,
    #stage-outro .footer-outro-brand,
    #stage-outro .footer-grid { grid-template-columns: 1fr !important; }
    #stage-app .bento-grid--app { grid-template-columns: 1fr !important; grid-template-rows: auto !important; }
    #stage-app .bento-cell--span-hero,
    #stage-app .bento-cell--span-signup { grid-column: 1 !important; grid-row: auto !important; }
    #stage-app .app-stage-head .stage-dash-lede,
    #stage-outro .outro-stage-head .stage-dash-lede { grid-column:1; grid-row:auto; text-align:left; }
    #stage-outro .footer-pitch { text-align:left; }
}
@media (min-width: 901px) and (max-height: 740px) {
    #stage-app .app-stage-card,
    #stage-outro .outro-stage-card { padding-bottom: 84px !important; }
}

/* Six purchase tools: exact 3 × 2 board (car, house, college, medical, property tax, debt).
   Desktop only — below 901px the responsive rules collapse this to a single scrolling column,
   so this high-specificity rule must not leak down and re-impose 3 cramped columns. */
@media (min-width: 901px) {
    #stage-purchases .main-layout.purchases-sym-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Six supporting viability metrics: two matching three-column bands. */
#stage-viability .vd-board > #affordabilityCoreMetrics,
#stage-viability .vd-board > #affordabilityMiniMetrics {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
#stage-viability .vd-kpi-row .vd-tile-value {
    font-size: clamp(2rem, 5.6vh, 3.5rem) !important;
    letter-spacing: -0.055em !important;
}

/* ═══════════════════════════════════════════════════════════
   POLISH PASS — flat corners, mono marks, no entrance fades
   ═══════════════════════════════════════════════════════════ */

/* Chart header + scale toggle (was inline styles) */
.chart-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 8px;
}
.chart-scale-toggle {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 4px;
    padding: 2px;
    border: 1px solid rgba(201, 168, 108, 0.18);
    background: rgba(0, 0, 0, 0.28);
    border-radius: 3px;
}
.scale-toggle-btn {
    appearance: none;
    border: none;
    background: transparent;
    color: rgba(244, 239, 230, 0.45);
    padding: 5px 10px;
    font-family: var(--font-data), "JetBrains Mono", monospace;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 2px;
}
.scale-toggle-btn:hover {
    color: rgba(232, 213, 163, 0.85);
}
.scale-toggle-btn.active {
    background: rgba(201, 168, 108, 0.14);
    color: #e8d5a3;
}

/* Stage cards: four-corner drafting marks (flat, no animation) */
.stage-panel-card,
.chart-container.stage-panel-card,
.purchases-stage-card,
.planning-stage-card,
.ai-analysis-panel.stage-panel-card,
.app-stage-card,
.outro-stage-card {
    position: relative;
}
.stage-panel-card::before,
.chart-container.stage-panel-card::before,
.purchases-stage-card::before,
.planning-stage-card::before,
.ai-analysis-panel.stage-panel-card::before,
.app-stage-card::before,
.outro-stage-card::before {
    content: "";
    position: absolute;
    inset: 10px;
    pointer-events: none;
    z-index: 0;
    opacity: 0.28;
    background:
        linear-gradient(var(--gold-soft, #e8d5a3), var(--gold-soft, #e8d5a3)) left top / 12px 1px no-repeat,
        linear-gradient(var(--gold-soft, #e8d5a3), var(--gold-soft, #e8d5a3)) left top / 1px 12px no-repeat,
        linear-gradient(var(--gold-soft, #e8d5a3), var(--gold-soft, #e8d5a3)) right top / 12px 1px no-repeat,
        linear-gradient(var(--gold-soft, #e8d5a3), var(--gold-soft, #e8d5a3)) right top / 1px 12px no-repeat,
        linear-gradient(var(--gold-soft, #e8d5a3), var(--gold-soft, #e8d5a3)) left bottom / 12px 1px no-repeat,
        linear-gradient(var(--gold-soft, #e8d5a3), var(--gold-soft, #e8d5a3)) left bottom / 1px 12px no-repeat,
        linear-gradient(var(--gold-soft, #e8d5a3), var(--gold-soft, #e8d5a3)) right bottom / 12px 1px no-repeat,
        linear-gradient(var(--gold-soft, #e8d5a3), var(--gold-soft, #e8d5a3)) right bottom / 1px 12px no-repeat;
}
.stage-panel-card > *,
.chart-container.stage-panel-card > *,
.purchases-stage-card > *,
.planning-stage-card > *,
.ai-analysis-panel.stage-panel-card > *,
.app-stage-card > *,
.outro-stage-card > * {
    position: relative;
    z-index: 1;
}

/* Section kickers: mono diamond mark (flat) */
.section-kicker {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
}
.section-kicker::before {
    content: "";
    width: 5px;
    height: 5px;
    border: 1px solid rgba(232, 213, 163, 0.55);
    transform: rotate(45deg);
    flex-shrink: 0;
    opacity: 0.85;
}

/* Walkthrough strips: quieter terminal-like bars */
.chart-walkthrough {
    border-left: 2px solid rgba(201, 168, 108, 0.28) !important;
    background: rgba(0, 0, 0, 0.2) !important;
    box-shadow: none !important;
}

/* Floating nav: flat mono underline active state (no glow) */
.floating-nav-link {
    position: relative;
}
.floating-nav-link:hover {
    color: #e8d5a3 !important;
}

/* Hero scroll hint: no opacity pulse */
.hero-scroll-hint-copy {
    animation: none !important;
    opacity: 0.55 !important;
}

/* Kill residual entrance fades on chrome */
.header-banner-subtitle,
.hero-cta-row,
.hero-as-seen,
.hero-scroll-hint,
.beta-tag,
.header-email-signup {
    animation: none !important;
    opacity: 1 !important;
}

/* Privacy link in footer shouldn't look broken */
#privacyPolicyLink {
    cursor: pointer;
}

/* Chart/insight empty states: monospaced quiet */
.budget-pie-empty,
.no-scenarios {
    font-family: var(--font-data), "JetBrains Mono", monospace !important;
    letter-spacing: 0.04em;
    color: rgba(244, 239, 230, 0.38) !important;
}

/* Purchases: slightly more breathing for corner glyphs */
#stage-purchases .purchase-tile-fields {
    padding-right: 8px;
}

/* ── Single white stage titles (no stacked gold kickers) ─── */
.stage-panel > .section-kicker,
.stage-panel-card > .section-kicker,
.stage-dash-head > .section-kicker,
.budget-dash-head-main > .section-kicker,
.planning-topbar-title > .section-kicker,
.vd-header-meta,
.ai-report-header .section-kicker {
    display: none !important;
}

.stage-panel .chart-title,
.stage-panel .stage-dash-title,
.stage-panel .planning-heading,
.stage-panel .ai-analysis-title,
.stage-panel .affordability-title,
.stage-panel .vd-title,
.stage-panel .ai-chat-title,
.instructions-title span {
    color: #f4efe6 !important;
}

/* White diamond mark on titles (not gold kicker) */
.stage-panel .chart-title::before {
    border-color: rgba(255, 255, 255, 0.45) !important;
}
.stage-panel .chart-title::after {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.22), transparent 90%) !important;
}

/* ═══════════════════════════════════════════════════════════
   MOBILE SCROLL — override all overflow:hidden / max-height
   clips so content flows and scrolls naturally on small screens
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    /* Stage panels: allow natural height instead of viewport-locked clip */
    .stage-panel,
    .stage-panel.stage-snap,
    .stage-panel.stage-free,
    #stage-planning.stage-panel,
    #stage-purchases.stage-panel,
    #stage-viability.stage-panel,
    #stage-budget.stage-panel,
    #stage-savings.stage-panel,
    #stage-spending.stage-panel,
    #stage-treemap.stage-panel,
    #stage-ledger.stage-panel,
    #stage-ai.stage-panel {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* Stage cards: let content expand beyond one viewport */
    .stage-panel > .stage-panel-card,
    .stage-panel > .panel.stage-panel-card,
    .stage-panel > .chart-container.stage-panel-card,
    #stage-planning .planning-stage-card,
    #stage-purchases .purchases-stage-card,
    #stage-viability .viability-dashboard,
    #stage-viability .affordability-banner,
    #stage-viability .vd-dash.viability-dashboard,
    #stage-budget .chart-container.stage-panel-card,
    #stage-savings .chart-container.stage-panel-card,
    #stage-spending .chart-container.stage-panel-card,
    #stage-treemap .chart-container.stage-panel-card,
    #stage-ledger .chart-container.stage-panel-card,
    #stage-ai .ai-analysis-panel,
    #stage-ai .stage-panel-card,
    #stage-app .app-stage-card,
    #stage-outro .outro-stage-card {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* Bento shells: no longer clipped on mobile */
    .bento-shell,
    .stage-panel > .bento-shell,
    #stage-app .app-stage-card.bento-shell,
    #stage-purchases .purchases-stage-card.bento-shell,
    #stage-viability .viability-dashboard.bento-shell {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* Bento cells: allow content to show */
    .bento-cell,
    .bento-cell-inner {
        overflow: visible !important;
    }

    /* Purchases grid: single-column scrollable, not clipped */
    #stage-purchases .purchases-sym-grid,
    #stage-purchases .main-layout.purchases-sym-grid {
        grid-template-columns: 1fr !important;
        grid-template-rows: none !important;
        height: auto !important;
        overflow: visible !important;
    }
    #stage-purchases .purchases-sym-grid > .panel,
    #stage-purchases .purchases-sym-grid > #carPanel,
    #stage-purchases .purchases-sym-grid > #housePanel,
    #stage-purchases .purchases-sym-grid > #collegePanel,
    #stage-purchases .purchases-sym-grid > #medicalPanel,
    #stage-purchases .purchase-tile {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    #stage-purchases .purchase-tile-fields {
        overflow: visible !important;
    }

    /* Viability board: single-column scrollable */
    #stage-viability .vd-board {
        overflow: visible !important;
    }

    /* Planning mixing board: auto rows, scrollable */
    #stage-planning .mixing-board-container {
        grid-auto-rows: minmax(min-content, auto) !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }
    #stage-planning .income-budget-content,
    #stage-planning .income-budget-content.expanded {
        overflow: visible !important;
    }

    /* Chart wrappers: auto height */
    .stage-panel .chart-wrapper,
    .stage-panel .treemap-container,
    .stage-panel .budget-pie-container,
    .stage-panel .budget-pie-split,
    .stage-panel .table-scroll {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    /* Tables: horizontal scroll within their container */
    .stage-panel .table-scroll {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Viability dash: no inner clip */
    #stage-viability .vd-dash.viability-dashboard {
        overflow: visible !important;
    }

    /* Budget donut: don't clip the chart */
    #stage-budget .budget-dash-donut.budget-pie-chart-stage {
        height: auto !important;
        max-height: none !important;
    }
    #stage-budget .budget-cat-board {
        max-height: none !important;
        overflow: visible !important;
    }

    /* Ensure global scroll works */
    html {
        overflow-x: clip;
        overflow-y: auto;
        scroll-behavior: auto;
    }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE STACK — every multi-column layout → single column
   Intentionally AFTER all cascade rules to win specificity
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    /* ── Planning ───────────────────────────────────────── */
    .planning-topbar {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .planning-toolbar {
        grid-template-columns: 1fr !important;
    }
    .planning-scenario-bar {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }
    #stage-planning .mixing-board-container {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    /* ── Viability board — single-column everything ──────── */
    #stage-viability .vd-board {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;
    }
    #stage-viability .vd-board > * {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
    }
    #stage-viability .affordability-core-metrics,
    #stage-viability .affordability-metrics {
        grid-template-columns: 1fr !important;
    }

    /* ── Budget pie — donut over legend ──────────────────── */
    #stage-budget .budget-pie-chart-wrapper,
    #stage-budget .budget-pie-split-grid,
    #stage-budget .budget-dash-grid {
        grid-template-columns: 1fr !important;
    }
    #stage-budget .budget-dash-head {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    #stage-budget .budget-dash-totals {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    /* ── Purchases — single column ──────────────────────── */
    #stage-purchases .purchases-sym-grid,
    #stage-purchases .main-layout.purchases-sym-grid {
        grid-template-columns: 1fr !important;
        grid-template-rows: none !important;
    }

    /* ── AI stage — stack preview under chat ─────────────── */
    #stage-ai .ai-stage-layout {
        grid-template-columns: 1fr !important;
    }
    #stage-ai .ai-report-index {
        grid-template-columns: 1fr !important;
    }

    /* ── App stage — single column everything ────────────── */
    #stage-app .app-stage-head,
    #stage-outro .outro-stage-head {
        grid-template-columns: 1fr !important;
        gap: 4px !important;
    }
    #stage-app .app-stage-head .stage-dash-lede,
    #stage-outro .outro-stage-head .stage-dash-lede {
        grid-column: 1 !important;
        grid-row: auto !important;
        text-align: left !important;
        max-width: none !important;
    }
    #stage-app .app-mobile-layout,
    #stage-app .bento-grid--app,
    .app-stage-grid {
        grid-template-columns: 1fr !important;
    }
    #stage-app .app-launch-signup-form,
    #stage-app .app-waitlist-form {
        grid-template-columns: 1fr !important;
    }
    #stage-app .bento-cell--span-hero,
    #stage-app .bento-cell--span-signup {
        grid-column: 1 !important;
        grid-row: auto !important;
    }

    /* ── Outro / footer — all single column ──────────────── */
    #stage-outro .outro-stage-inner {
        grid-template-rows: auto auto auto auto !important;
    }
    #stage-outro .footer-outro-brand {
        grid-template-columns: 1fr !important;
        text-align: center !important;
    }
    #stage-outro .footer-grid,
    #stage-outro .outro-footer-grid {
        grid-template-columns: 1fr !important;
    }
    #stage-outro .footer-bottom {
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
    }

    /* ── Summary grid ────────────────────────────────────── */
    .summary-grid {
        grid-template-columns: 1fr !important;
    }

    /* ── Viability insight row ───────────────────────────── */
    .viability-insight-row {
        grid-template-columns: 1fr !important;
    }
    .viability-insight-card {
        border-right: none !important;
        border-bottom: 1px solid var(--border) !important;
    }
    .viability-insight-card:last-child {
        border-bottom: none !important;
    }

    /* ── Chart walkthrough body ──────────────────────────── */
    .chart-walkthrough-body {
        grid-template-columns: 1fr !important;
    }

    /* ── Stage dash heads ────────────────────────────────── */
    .stage-dash-head {
        grid-template-columns: 1fr !important;
    }

    /* ── Auto-fit grids: force single column ─────────────── */
    .instructions-content,
    .ai-insights {
        grid-template-columns: 1fr !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE VISUAL OPTIMIZATION PASS — final cascade
   Natural document flow on phones, no viewport-flex collapse/overlap.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    html.stages-armed,
    html.bb-smooth.stages-armed {
        scroll-snap-type: none !important;
    }

    .content,
    .app-container,
    .financial-planning-container {
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
    }

    .stage-panel,
    .stage-panel.stage-snap,
    #stage-planning.stage-panel,
    #stage-purchases.stage-panel,
    #stage-viability.stage-panel,
    #stage-budget.stage-panel,
    #stage-savings.stage-panel,
    #stage-spending.stage-panel,
    #stage-treemap.stage-panel,
    #stage-ledger.stage-panel,
    #stage-ai.stage-panel,
    #stage-app.stage-panel,
    #stage-outro.stage-panel {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 76px 0 18px !important;
        overflow: visible !important;
        scroll-margin-top: 76px !important;
    }

    .stage-panel > .stage-panel-card,
    .stage-panel > .panel.stage-panel-card,
    .stage-panel > .chart-container.stage-panel-card,
    #stage-planning .planning-stage-card,
    #stage-purchases .purchases-stage-card,
    #stage-viability .viability-dashboard,
    #stage-viability .affordability-banner,
    #stage-budget .chart-container.stage-panel-card,
    #stage-savings .chart-container.stage-panel-card,
    #stage-spending .chart-container.stage-panel-card,
    #stage-treemap .chart-container.stage-panel-card,
    #stage-ledger .chart-container.stage-panel-card,
    #stage-ai .ai-analysis-panel,
    #stage-ai .stage-panel-card,
    #stage-app .app-stage-card,
    #stage-outro .outro-stage-card {
        display: block !important;
        flex: none !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        padding: 18px 16px 72px !important;
    }

    .stage-panel-card::before,
    .chart-container.stage-panel-card::before,
    .purchases-stage-card::before,
    .planning-stage-card::before,
    .ai-analysis-panel.stage-panel-card::before,
    .app-stage-card::before,
    .outro-stage-card::before {
        inset: 8px !important;
        opacity: 0.22 !important;
    }

    .stage-panel .chart-title,
    .stage-panel .stage-dash-title,
    .stage-panel .planning-heading,
    .stage-panel .ai-analysis-title,
    .stage-panel .affordability-title,
    .stage-panel .vd-title {
        font-size: clamp(1.45rem, 8vw, 2.1rem) !important;
        line-height: 1.02 !important;
        margin-bottom: 6px !important;
    }

    .stage-panel .chart-description,
    .stage-panel .stage-dash-lede,
    .stage-panel .affordability-subtitle {
        font-size: 0.82rem !important;
        line-height: 1.35 !important;
        max-width: none !important;
    }

    #stage-planning .planning-stage-card {
        padding-top: 18px !important;
    }
    #stage-planning .planning-toolbar,
    #stage-planning .income-budget-content,
    #stage-planning .income-budget-content.expanded,
    #stage-planning .mixing-board-container {
        display: grid !important;
        flex: none !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }
    #stage-planning .mixing-board-container {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    #stage-purchases .purchases-stage-card {
        padding-top: 18px !important;
    }
    #stage-purchases .purchases-stage-card > .panel-title {
        font-size: clamp(1.6rem, 8vw, 2.25rem) !important;
        line-height: 1 !important;
        margin: 0 0 4px !important;
    }
    #stage-purchases .purchases-sym-grid,
    #stage-purchases .main-layout.purchases-sym-grid {
        display: grid !important;
        flex: none !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: none !important;
        gap: 12px !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }
    #stage-purchases .purchase-tile,
    #stage-purchases .purchases-sym-grid > .panel {
        display: block !important;
        flex: none !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        padding: 16px 14px !important;
    }
    #stage-purchases .purchase-tile-head {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) auto auto !important;
        gap: 8px !important;
        align-items: center !important;
    }
    #stage-purchases .purchase-tile-name {
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }
    #stage-purchases .purchase-tile-hero-value,
    #stage-purchases .payment-estimate-value {
        font-size: clamp(2.6rem, 18vw, 4.2rem) !important;
        line-height: 0.95 !important;
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
    }
    #stage-purchases .purchase-tile-fields {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px 10px !important;
        height: auto !important;
        overflow: visible !important;
        padding-right: 0 !important;
    }
    #stage-purchases .purchase-tile-fields .form-group,
    #stage-purchases .purchase-tile-fields .input-group {
        min-width: 0 !important;
    }

    #stage-viability .vd-board,
    #stage-viability .affordability-core-metrics,
    #stage-viability .affordability-metrics {
        display: grid !important;
        grid-template-columns: 1fr !important;
        height: auto !important;
        overflow: visible !important;
    }

    .stage-panel .chart-wrapper,
    .stage-panel .budget-pie-container,
    .stage-panel .treemap-container {
        min-height: 300px !important;
        height: 320px !important;
    }
    #stage-budget .budget-pie-split,
    #stage-budget .budget-pie-split-grid,
    #stage-budget .budget-dash-grid,
    #stage-ai .ai-stage-layout,
    #stage-app .bento-grid--app {
        display: grid !important;
        grid-template-columns: 1fr !important;
        height: auto !important;
        overflow: visible !important;
    }

    .journey-film {
        max-width: calc(100vw - 24px) !important;
        left: 12px !important;
        bottom: max(10px, env(safe-area-inset-bottom)) !important;
    }
}

@media (max-width: 900px) {
    #stage-purchases .purchases-stage-card.stage-panel-card.bento-shell,
    #stage-purchases .panel.purchases-stage-card.stage-panel-card,
    #stage-budget .chart-container.stage-panel-card.bento-shell,
    #stage-savings .chart-container.stage-panel-card.bento-shell,
    #stage-spending .chart-container.stage-panel-card.bento-shell,
    #stage-treemap .chart-container.stage-panel-card.bento-shell,
    #stage-ledger .chart-container.stage-panel-card.bento-shell,
    #stage-ai .panel.ai-analysis-panel.stage-panel-card,
    #stage-viability .vd-dash.viability-dashboard.bento-shell {
        display: block !important;
        flex: none !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    #stage-purchases .main-layout.purchases-sym-grid,
    #stage-purchases .purchases-sym-grid {
        display: grid !important;
        flex: none !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-auto-rows: auto !important;
        grid-template-rows: none !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        align-items: stretch !important;
    }

    #stage-purchases .purchase-tile.panel,
    #stage-purchases .purchases-sym-grid > .panel {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
}

@media (max-width: 900px) {
    html.bb-camera .stage-panel,
    html.bb-camera .stage-panel.stage-snap,
    html.bb-camera .stage-panel-card,
    html.bb-camera .chart-container.stage-panel-card,
    html.journey-live .stage-panel,
    html.journey-live .stage-panel-card {
        transform: none !important;
        opacity: 1 !important;
        filter: none !important;
        visibility: visible !important;
    }
}

@media (max-width: 900px) {
    .bento-shell,
    #stage-purchases .purchases-stage-card.bento-shell,
    #stage-viability .viability-dashboard.bento-shell,
    #stage-app .app-stage-card.bento-shell,
    .bento-cell,
    .bento-cell-inner {
        container-type: normal !important;
        contain: none !important;
    }
}

@media (max-width: 900px) {
    #stage-purchases .main-layout.purchases-sym-grid,
    #stage-purchases .purchases-sym-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: repeat(6, auto) !important;
        grid-auto-rows: auto !important;
        align-content: start !important;
        overflow: visible !important;
    }
    #stage-purchases .purchase-tile.panel,
    #stage-purchases .purchase-tile,
    #stage-purchases .purchases-sym-grid > .panel {
        display: block !important;
        height: auto !important;
        min-height: max-content !important;
        max-height: none !important;
        overflow: visible !important;
    }
}

@media (max-width: 900px) {
    #stage-purchases .purchase-tile,
    #stage-purchases .purchases-sym-grid > .panel,
    #stage-viability .viability-mega,
    #stage-viability .core-metric,
    #stage-viability .mini-metric {
        container-type: normal !important;
        contain: none !important;
    }
}

@media (max-width: 900px) {
    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    .header-banner-title-text {
        font-size: clamp(2.25rem, 14vw, 4.25rem) !important;
        letter-spacing: 0.04em !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        text-align: center !important;
    }
    #stage-purchases .form-input,
    #stage-purchases .input-group,
    #stage-purchases .purchase-tile-fields * {
        min-width: 0 !important;
        max-width: 100% !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   GRAPH + VIABILITY PRECISION PASS
   Mobile charts get a real render box; viability bento keeps exact lattice.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    /* Remove size containers from chart parents: cqh/cqw collapsed donut to 0px. */
    #stage-budget .budget-dash-donut.budget-pie-chart-stage,
    #stage-budget .budget-donut-frame,
    #stage-savings .chart-wrapper,
    #stage-spending .chart-wrapper,
    #stage-treemap .treemap-container {
        container-type: normal !important;
        contain: none !important;
    }

    /* Chart cards: natural mobile flow with consistent bento gutters. */
    #stage-budget .chart-container.stage-panel-card,
    #stage-savings .chart-container.stage-panel-card,
    #stage-spending .chart-container.stage-panel-card,
    #stage-treemap .chart-container.stage-panel-card {
        display: block !important;
        padding: 18px 16px 72px !important;
        overflow: visible !important;
    }

    #stage-budget .budget-dash-head,
    #stage-spending .chart-header-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 10px !important;
        align-items: start !important;
    }

    #stage-budget .budget-dash-totals {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
        width: 100% !important;
    }

    #stage-budget .budget-pie-container,
    #stage-budget .budget-pie-chart-wrapper,
    #stage-budget .budget-dash-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    #stage-budget .budget-dash-donut.budget-pie-chart-stage,
    #stage-budget .budget-donut-frame {
        width: min(100%, 330px) !important;
        height: min(76vw, 330px) !important;
        min-height: 260px !important;
        max-height: 330px !important;
        aspect-ratio: 1 / 1 !important;
        margin: 0 auto !important;
        display: grid !important;
        place-items: center !important;
    }

    #stage-budget .budget-pie-canvas,
    #budgetPieChart {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 260px !important;
        min-height: 260px !important;
    }

    #stage-budget .budget-dash-side,
    #stage-budget .budget-dash-board,
    #stage-budget .budget-pie-legend,
    #stage-budget .budget-cat-board {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    #stage-budget .budget-pie-key,
    #stage-budget .budget-cat-board {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 6px !important;
    }

    #stage-savings .chart-wrapper,
    #stage-spending .chart-wrapper,
    #stage-treemap .treemap-container {
        width: 100% !important;
        height: clamp(280px, 72vw, 360px) !important;
        min-height: 280px !important;
        max-height: 360px !important;
        padding: 8px !important;
        overflow: hidden !important;
    }

    #stage-savings canvas,
    #stage-spending canvas,
    #stage-treemap .treemap-svg {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        display: block !important;
    }

    #stage-treemap .treemap-legend {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 6px !important;
        max-height: none !important;
        overflow: visible !important;
        margin-top: 10px !important;
    }

    .chart-scale-toggle {
        justify-self: start !important;
        margin-top: 0 !important;
    }
}

/* Viability / “Can You Afford This Lifestyle” — exact bento lattice. */
#stage-viability .vd-board,
#stage-viability .affordability-core-metrics,
#stage-viability .affordability-metrics {
    align-items: stretch !important;
    justify-items: stretch !important;
}
#stage-viability .vd-tile,
#stage-viability .core-metric,
#stage-viability .mini-metric {
    min-width: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}
#stage-viability .vd-tile-value,
#stage-viability .core-metric-value,
#stage-viability .mini-metric-value {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    font-variant-numeric: tabular-nums !important;
}

@media (min-width: 901px) {
    #stage-viability .vd-board {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        grid-template-rows: minmax(0, 1.15fr) repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }
    #stage-viability .vd-board > .vd-tile--hero:nth-child(1) { grid-column: 1 / 3 !important; }
    #stage-viability .vd-board > .vd-tile--hero:nth-child(2) { grid-column: 3 / 5 !important; }
    #stage-viability .vd-board > #affordabilityCoreMetrics,
    #stage-viability .vd-board > #affordabilityMiniMetrics {
        grid-column: 1 / 5 !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }
}

@media (max-width: 900px) {
    #stage-viability .vd-dash.viability-dashboard.bento-shell {
        padding: 18px 16px 72px !important;
        overflow: visible !important;
    }
    #stage-viability .vd-board {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-auto-rows: auto !important;
        gap: 8px !important;
        height: auto !important;
        overflow: visible !important;
    }
    #stage-viability .vd-board > .vd-tile--hero {
        grid-column: auto !important;
        min-height: 148px !important;
        padding: 14px 12px !important;
    }
    #stage-viability .vd-board > #affordabilityCoreMetrics,
    #stage-viability .vd-board > #affordabilityMiniMetrics {
        grid-column: 1 / -1 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        height: auto !important;
        overflow: visible !important;
    }
    #stage-viability .vd-tile,
    #stage-viability .core-metric,
    #stage-viability .mini-metric {
        min-height: 126px !important;
        padding: 12px !important;
    }
    #stage-viability .vd-tile--hero .vd-tile-value,
    #stage-viability .vd-tile--hero .viability-mega-value {
        font-size: clamp(2.05rem, 11vw, 3.2rem) !important;
        letter-spacing: -0.06em !important;
    }
    #stage-viability .vd-tile--kpi .vd-tile-value,
    #stage-viability .core-metric-value,
    #stage-viability .mini-metric-value {
        font-size: clamp(1.55rem, 8vw, 2.35rem) !important;
        letter-spacing: -0.055em !important;
    }
    #stage-viability .vd-tile-label,
    #stage-viability .core-metric-label,
    #stage-viability .mini-metric-label {
        font-size: 0.58rem !important;
        letter-spacing: 0.14em !important;
    }
}

/* Mobile viability correction: full-width hero bento, two-column KPI lattice. */
@media (max-width: 900px) {
    #stage-viability .vd-board > .vd-tile--hero {
        grid-column: 1 / -1 !important;
        min-height: 154px !important;
        width: 100% !important;
    }
    #stage-viability .vd-tile,
    #stage-viability .core-metric,
    #stage-viability .mini-metric {
        align-items: stretch !important;
    }
    #stage-viability .vd-tile-value,
    #stage-viability .core-metric-value,
    #stage-viability .mini-metric-value {
        font-size: clamp(1.35rem, 7.2vw, 2.05rem) !important;
        line-height: 1 !important;
    }
    #stage-viability .vd-tile--hero .vd-tile-value,
    #stage-viability .vd-tile--hero .viability-mega-value {
        font-size: clamp(2.65rem, 16vw, 4.6rem) !important;
    }
    #stage-viability .vd-tile-label,
    #stage-viability .core-metric-label,
    #stage-viability .mini-metric-label {
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        line-height: 1.15 !important;
    }
    #stage-viability .core-metric-status,
    #stage-viability .mini-metric-status,
    #stage-viability .vd-chip {
        max-width: 100% !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}

@media (max-width: 900px) {
    #stage-viability .vd-board > .vd-tile--hero:nth-child(1),
    #stage-viability .vd-board > .vd-tile--hero:nth-child(2),
    #stage-viability .vd-board > .vd-tile--hero:nth-of-type(1),
    #stage-viability .vd-board > .vd-tile--hero:nth-of-type(2) {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        width: 100% !important;
    }
    #stage-viability .vd-board > #affordabilityCoreMetrics,
    #stage-viability .vd-board > #affordabilityMiniMetrics {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        width: 100% !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   AI REPORT STUDIO REDESIGN — terminal + analyst workspace
   ═══════════════════════════════════════════════════════════ */
#stage-ai .ai-analysis-panel.stage-panel-card {
    --ai-gap: 10px;
    display: flex !important;
    flex-direction: column !important;
    gap: var(--ai-gap) !important;
    padding: clamp(14px, 2vh, 22px) clamp(18px, 2vw, 30px) 84px !important;
    overflow: hidden !important;
}
#stage-ai .ai-analysis-header {
    flex: 0 0 auto !important;
    padding: 0 0 10px !important;
    border-bottom: 1px solid rgba(201,168,108,.16) !important;
}
#stage-ai .ai-analysis-title-wrapper {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto !important;
    align-items: center !important;
    gap: 16px !important;
}
#stage-ai .ai-analysis-title {
    font-family: var(--font-display) !important;
    font-size: clamp(1.35rem, 2.2vw, 2rem) !important;
    letter-spacing: .035em !important;
    line-height: 1 !important;
    margin: 0 !important;
}
#stage-ai .ai-analysis-title::after {
    content: "REPORT STUDIO · LIVE MODEL INTERPRETER";
    display: block;
    margin-top: 7px;
    font-family: var(--font-data);
    font-size: .58rem;
    letter-spacing: .18em;
    color: rgba(232,213,163,.42);
}
#stage-ai .ai-service-strip {
    flex: 0 0 auto !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 9px 12px !important;
    border: 1px solid rgba(201,168,108,.13) !important;
    background: rgba(0,0,0,.22) !important;
}
#stage-ai .ai-stage-layout {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(320px, .86fr) minmax(0, 1.14fr) !important;
    gap: 10px !important;
    align-items: stretch !important;
}
#stage-ai .ai-analysis-preview,
#stage-ai .ai-report-studio {
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    border: 1px solid rgba(201,168,108,.14) !important;
    background:
        linear-gradient(180deg, rgba(232,213,163,.028), transparent 32%),
        rgba(0,0,0,.24) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.018) !important;
}
#stage-ai .ai-analysis-preview {
    display: grid !important;
    grid-template-rows: auto minmax(140px, .78fr) minmax(0, 1fr) auto !important;
    gap: 8px !important;
    padding: 12px !important;
    overflow: hidden !important;
}
#stage-ai .ai-grade-section {
    margin: 0 !important;
    padding: 12px !important;
    border: 1px solid rgba(201,168,108,.13) !important;
    background: rgba(0,0,0,.26) !important;
}
#stage-ai .ai-grade-label {
    text-align: left !important;
    font-family: var(--font-data) !important;
    letter-spacing: .18em !important;
    color: rgba(232,213,163,.55) !important;
}
#stage-ai .ai-grade-display {
    display: grid !important;
    grid-template-columns: auto minmax(0,1fr) auto !important;
    gap: 12px !important;
    align-items: center !important;
}
#stage-ai .ai-run-console {
    position: relative !important;
    margin: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-rows: auto minmax(0,1fr) auto !important;
    border: 1px solid rgba(201,168,108,.16) !important;
    background:
        linear-gradient(90deg, rgba(201,168,108,.05) 1px, transparent 1px),
        linear-gradient(180deg, rgba(201,168,108,.04) 1px, transparent 1px),
        rgba(2,2,2,.72) !important;
    background-size: 28px 28px, 28px 28px, auto !important;
    overflow: hidden !important;
}
#stage-ai .ai-run-console::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 0%, rgba(232,213,163,.045) 50%, transparent 100%);
    transform: translateY(-100%);
    animation: aiScanline 4.8s linear infinite;
    opacity: .65;
}
@keyframes aiScanline { to { transform: translateY(100%); } }
#stage-ai .ai-run-console-head {
    padding: 10px 12px !important;
    border-bottom: 1px solid rgba(201,168,108,.16) !important;
    background: rgba(0,0,0,.32) !important;
}
#stage-ai .ai-run-console-title::before {
    content: "●";
    color: #8fd49a;
    margin-right: 8px;
    text-shadow: 0 0 12px rgba(143,212,154,.65);
}
#stage-ai .ai-run-console-log {
    min-height: 0 !important;
    max-height: none !important;
    padding: 12px !important;
    overflow: auto !important;
    font-size: .72rem !important;
    line-height: 1.65 !important;
}
#stage-ai .ai-run-console-line {
    color: rgba(244,239,230,.68) !important;
    text-shadow: 0 0 12px rgba(232,213,163,.08);
}
#stage-ai .ai-run-console-line.is-typing::after {
    content: "_";
    color: var(--gold-soft);
    animation: terminalCaret .75s steps(1,end) infinite;
}
@keyframes terminalCaret { 50% { opacity: 0; } }
#stage-ai .ai-run-bar {
    height: 3px !important;
    background: rgba(201,168,108,.08) !important;
}
#stage-ai .ai-run-bar-fill {
    background: linear-gradient(90deg, #8a7040, #e8d5a3) !important;
    box-shadow: 0 0 18px rgba(232,213,163,.35) !important;
}
#stage-ai .ai-insights {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 8px !important;
    overflow: hidden !important;
}
#stage-ai .ai-insight-item {
    min-height: 0 !important;
    padding: 10px !important;
    border: 1px solid rgba(201,168,108,.12) !important;
    background: rgba(0,0,0,.18) !important;
}
#stage-ai .ai-insight-title {
    font-family: var(--font-data) !important;
    font-size: .68rem !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
}
#stage-ai .ai-insight-text {
    font-size: .68rem !important;
    line-height: 1.35 !important;
}
#stage-ai .ai-analysis-footer {
    margin: 0 !important;
    padding: 8px 0 0 !important;
    border-top: 1px solid rgba(201,168,108,.1) !important;
}
#stage-ai .ai-report-studio {
    display: grid !important;
    grid-template-rows: auto auto minmax(0,1fr) auto !important;
    padding: 0 !important;
    overflow: hidden !important;
}
#stage-ai .ai-report-header {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto !important;
    gap: 12px !important;
    align-items: center !important;
    padding: 12px 14px !important;
    border-bottom: 1px solid rgba(201,168,108,.16) !important;
}
#stage-ai .ai-chat-title {
    font-family: var(--font-display) !important;
    font-size: clamp(1.15rem, 1.5vw, 1.55rem) !important;
    letter-spacing: .04em !important;
}
#stage-ai .ai-chat-title::after {
    content: "Bundle, compare, export";
    display: block;
    margin-top: 4px;
    font-family: var(--font-data);
    font-size: .55rem;
    letter-spacing: .16em;
    color: rgba(244,239,230,.38);
    text-transform: uppercase;
}
#stage-ai .ai-report-head-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: 6px !important;
}
#stage-ai .ai-report-index {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    gap: 1px !important;
    padding: 10px 12px !important;
    border-bottom: 1px solid rgba(201,168,108,.12) !important;
    background: rgba(0,0,0,.16) !important;
}
#stage-ai .ai-report-index .ai-chat-prompt-btn {
    min-height: 44px !important;
    padding: 10px 8px !important;
    border: 1px solid rgba(201,168,108,.13) !important;
    background: rgba(0,0,0,.24) !important;
    font-size: .62rem !important;
    letter-spacing: .11em !important;
}
#stage-ai .ai-report-index .ai-chat-prompt-btn:hover,
#stage-ai .ai-report-index .ai-chat-prompt-btn.is-active {
    background: rgba(201,168,108,.12) !important;
    color: var(--gold-soft) !important;
}
#stage-ai .ai-report-output {
    min-height: 0 !important;
    padding: 12px !important;
    overflow: auto !important;
    background:
        linear-gradient(rgba(201,168,108,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(201,168,108,.04) 1px, transparent 1px) !important;
    background-size: 36px 36px !important;
}
#stage-ai .ai-report-document {
    max-width: none !important;
    margin: 0 !important;
    padding: 16px !important;
    border: 1px solid rgba(201,168,108,.15) !important;
    background: rgba(5,4,3,.88) !important;
}
#stage-ai .ai-report-document h3 {
    font-family: var(--font-display) !important;
    font-size: clamp(1.45rem, 2.2vw, 2.25rem) !important;
    line-height: 1 !important;
}
#stage-ai .ai-report-footer {
    border-top: 1px solid rgba(201,168,108,.12) !important;
    background: rgba(0,0,0,.24) !important;
}

@media (max-width: 900px) {
    #stage-ai .ai-analysis-panel.stage-panel-card {
        display: block !important;
        padding: 18px 16px 72px !important;
        overflow: visible !important;
    }
    #stage-ai .ai-analysis-title-wrapper,
    #stage-ai .ai-service-strip,
    #stage-ai .ai-stage-layout,
    #stage-ai .ai-report-header,
    #stage-ai .ai-report-index,
    #stage-ai .ai-insights {
        grid-template-columns: minmax(0,1fr) !important;
    }
    #stage-ai .ai-stage-layout {
        display: grid !important;
        gap: 12px !important;
    }
    #stage-ai .ai-analysis-preview,
    #stage-ai .ai-report-studio {
        height: auto !important;
        overflow: visible !important;
    }
    #stage-ai .ai-analysis-preview {
        grid-template-rows: auto 240px auto auto !important;
    }
    #stage-ai .ai-run-console {
        height: 240px !important;
    }
    #stage-ai .ai-report-studio {
        min-height: 760px !important;
        display: grid !important;
        grid-template-rows: auto auto minmax(420px, 1fr) auto !important;
    }
    #stage-ai .ai-report-head-actions {
        justify-content: flex-start !important;
    }
    #stage-ai .ai-report-index {
        padding: 8px !important;
        gap: 6px !important;
    }
    #stage-ai .ai-report-index .ai-chat-prompt-btn {
        min-height: 46px !important;
    }
    #stage-ai .ai-grade-display {
        grid-template-columns: 1fr !important;
        justify-items: start !important;
    }
}

/* AI studio polish: keep global nav from bisecting header; compact mobile grade. */
@media (min-width: 901px) {
    #stage-ai .ai-analysis-title-wrapper > .ai-analysis-title,
    #stage-ai .ai-analysis-title-wrapper > .ai-analysis-title-wrapper {
        max-width: 520px !important;
    }
    #stage-ai .ai-analysis-title {
        font-size: clamp(1.25rem, 1.65vw, 1.75rem) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}
@media (max-width: 900px) {
    #stage-ai .ai-analysis-title-wrapper {
        padding-top: 18px !important;
    }
    #stage-ai .ai-analysis-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        width: 100% !important;
    }
    #stage-ai .ai-rerun-button,
    #stage-ai .coming-soon-badge {
        width: 100% !important;
        justify-content: center !important;
    }
    #stage-ai .ai-grade-display {
        grid-template-columns: auto minmax(0,1fr) auto !important;
        justify-items: stretch !important;
        align-items: center !important;
    }
    #stage-ai .ai-grade-mark {
        min-width: 92px !important;
    }
    #stage-ai .ai-grade-meter {
        min-width: 90px !important;
        width: 100% !important;
    }
    #stage-ai .ai-grade-score {
        justify-self: end !important;
        white-space: nowrap !important;
    }
}

/* BLACKBOX wordmark: square “O” brand glyph */
.brand-wordmark .brand-square-o {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 0.82em;
    height: 0.82em;
    margin: 0 0.015em;
    color: transparent;
    vertical-align: -0.055em;
    border: 0.075em solid currentColor;
    border-color: var(--gold-soft, currentColor);
    box-shadow:
        inset 0 0 0 0.055em rgba(0, 0, 0, 0.72),
        0 0 0.28em rgba(232, 213, 163, 0.16);
    animation: brandBoxBeat 4.8s ease-in-out infinite;
}
.brand-wordmark .brand-square-o::after {
    content: "";
    width: 24%;
    height: 24%;
    border: 0.055em solid var(--gold-soft, currentColor);
    opacity: 0.72;
}
.header-banner-title-text.brand-wordmark .brand-square-o {
    width: 0.78em;
    height: 0.78em;
    border-width: 0.055em;
    vertical-align: -0.035em;
    box-shadow:
        inset 0 0 0 0.045em rgba(0, 0, 0, 0.8),
        0 0 0.34em rgba(232, 213, 163, 0.18);
}
.footer-brand.brand-wordmark .brand-square-o,
.ios-app-mark.brand-wordmark .brand-square-o {
    border-width: 0.08em;
    vertical-align: -0.07em;
}
.ios-app-mark.brand-wordmark .brand-square-o {
    width: 0.76em;
    height: 0.76em;
    box-shadow: inset 0 0 0 0.05em rgba(0,0,0,.7);
}
@keyframes brandBoxBeat {
    0%, 72%, 100% { transform: scale(1); filter: brightness(1); }
    78% { transform: scale(0.94); filter: brightness(0.9); }
    84% { transform: scale(1.045); filter: brightness(1.18); }
    90% { transform: scale(1); filter: brightness(1); }
}
@media (prefers-reduced-motion: reduce) {
    .brand-wordmark .brand-square-o { animation: none !important; }
}

/* AI insight cards: prevent long generated diagnostics from overlapping. */
#stage-ai .ai-analysis-preview {
    grid-template-rows: auto minmax(128px, .62fr) minmax(0, 1.38fr) auto !important;
}
#stage-ai .ai-insights {
    grid-template-columns: minmax(0, 1fr) !important;
    align-content: start !important;
    gap: 8px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: 2px !important;
}
#stage-ai .ai-insight-item {
    display: grid !important;
    grid-template-columns: 26px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 10px !important;
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
}
#stage-ai .ai-insight-icon {
    width: 22px !important;
    height: 22px !important;
    display: grid !important;
    place-items: center !important;
    line-height: 1 !important;
    flex: none !important;
}
#stage-ai .ai-insight-content {
    min-width: 0 !important;
    overflow: visible !important;
}
#stage-ai .ai-insight-title,
#stage-ai .ai-insight-text {
    overflow: visible !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
}
#stage-ai .ai-insight-text {
    display: block !important;
    max-height: none !important;
    line-height: 1.38 !important;
}
@media (max-width: 900px) {
    #stage-ai .ai-analysis-preview {
        grid-template-rows: auto 240px auto auto !important;
    }
    #stage-ai .ai-insights {
        max-height: none !important;
        overflow: visible !important;
    }
}

/* Viability numbers: keep K/% suffixes inside the bento, never masked. */
#stage-viability .vd-tile,
#stage-viability .core-metric,
#stage-viability .mini-metric {
    overflow: visible !important;
    padding-right: max(14px, 1.15vw) !important;
}
#stage-viability .vd-tile-value,
#stage-viability .core-metric-value,
#stage-viability .mini-metric-value,
#stage-viability .viability-mega-value {
    display: block !important;
    width: calc(100% - 2px) !important;
    max-width: calc(100% - 2px) !important;
    overflow: visible !important;
    clip-path: none !important;
    contain: none !important;
    line-height: 1.12 !important;
    padding: 0 .12em .04em 0 !important;
    box-sizing: border-box !important;
    text-rendering: geometricPrecision;
}
#stage-viability .vd-tile--hero .vd-tile-value,
#stage-viability .vd-tile--hero .viability-mega-value {
    letter-spacing: -0.055em !important;
}
#stage-viability .vd-tile--kpi .vd-tile-value,
#stage-viability .vd-tile--kpi .core-metric-value,
#stage-viability .vd-tile--kpi .mini-metric-value {
    letter-spacing: -0.045em !important;
}
@media (max-width: 900px) {
    #stage-viability .vd-tile,
    #stage-viability .core-metric,
    #stage-viability .mini-metric {
        overflow: visible !important;
        padding-right: 14px !important;
    }
    #stage-viability .vd-tile-value,
    #stage-viability .core-metric-value,
    #stage-viability .mini-metric-value,
    #stage-viability .viability-mega-value {
        line-height: 1.14 !important;
        padding-right: .18em !important;
        letter-spacing: -0.04em !important;
    }
    #stage-viability .vd-tile--hero .vd-tile-value,
    #stage-viability .vd-tile--hero .viability-mega-value {
        font-size: clamp(2.45rem, 14.5vw, 4.25rem) !important;
    }
}

/* Brand wordmark reset: plain block text, no custom boxed O glyph. */
.brand-wordmark,
.header-banner-title-text.brand-wordmark,
.footer-brand.brand-wordmark,
.ios-app-mark.brand-wordmark {
    font-family: var(--font-ui), "Syne", system-ui, sans-serif !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.105em !important;
    font-feature-settings: "kern" 1, "liga" 0 !important;
}
.header-banner-title-text.brand-wordmark {
    font-size: clamp(2.55rem, 8vw, 6rem) !important;
    line-height: 0.9 !important;
}
.footer-brand.brand-wordmark {
    letter-spacing: 0.09em !important;
}
.ios-app-mark.brand-wordmark {
    letter-spacing: 0.08em !important;
}
.brand-wordmark .brand-square-o {
    display: inline !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    color: inherit !important;
    border: 0 !important;
    box-shadow: none !important;
    animation: none !important;
    vertical-align: baseline !important;
}
.brand-wordmark .brand-square-o::after { content: none !important; }