/* ═══════════════════════════════════════════════════════════════
   MSL PROPERTY GROUP — Lead Agent Hierarchy Chart
   Stylesheet · Rebranded per MSL Master Brand Guide
   Version 1.0 · February 2026
   
   RULES:
   • No rgba() — all colours are solid hex
   • No opacity on text or decorative elements
   • Montserrat body text: font-weight 400 minimum
   • Cormorant Garamond display: font-weight 300 permitted
   ═══════════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root {
    /* ── PRIMARY BRAND ── */
    --brand-navy: #1D2F4E;
    --brand-gold: #DBBA5C;
    --brand-rose: #C4A0A8;
    --brand-ivory: #F5F0E6;

    /* ── BULIMBA BARRACKS PALETTE ── */
    --barracks-white: #F5F0E6;  /* MSL Ivory */
    --river-deep: #1D2F4E;    /* MSL Navy */
    --fabrication-steel: #A69E94; /* MSL Stone */
    --river-mist: #C4A0A8;    /* MSL Rose */
    --sandstone: #A69E94;    /* MSL Stone */

    /* ── LEGACY ALIASES (backward compat) ── */
    --color-navy: #1D2F4E;
    --color-gold: #DBBA5C;
    --color-gold-dark: #C4A853;
    --color-rose: #C4A0A8;
    --color-stone: #F5F1EC;
    --color-ivory: #F5F0E6;

    /* ── DARK BACKGROUNDS ── */
    --bg-void: #080C12;
    --bg-abyss: #0A1019;
    --bg-midnight: #0D1520;
    --bg-deep: #111B2B;
    --bg-surface: #162236;
    --bg-elevated: #1D2F4E;
    --bg-hover: #243B55;
    --bg-active: #2D4565;
    --bg-card: #1A2840;

    /* ── TEXT (SOLID — NO OPACITY) ── */
    --text-white: #FFFFFF;
    --text-heading: #F8F6F1;
    --text-body: #E8E4DC;
    --text-secondary: #B8B4AC;
    --text-tertiary: #8A8680;
    --text-muted: #5C5955;

    /* ── BORDERS (SOLID) ── */
    --border-subtle: #1A2233;
    --border-light: #1F2D42;
    --border-visible: #2A3D56;
    --border-gold: #3D3524;
    --border-card: #1E2A3C;

    /* ── SHADOWS (solid) ── */
    --shadow-card: 0 4px 24px #000000;
    --shadow-lifted: 0 8px 40px #000000;
    --shadow-deep: 0 16px 60px #000000;

    /* ── SEMANTIC ── */
    --semantic-positive: #6DBD8B;
    --semantic-warning: #D4943A;
    --semantic-negative: #C47070;
    --semantic-info: #7BA3C4;

    /* ── TYPOGRAPHY ── */
    --font-display: 'Cormorant Garamond', Georgia, serif;
    --font-body: 'Montserrat', 'Helvetica Neue', sans-serif;

    /* ── LAYOUT ── */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    background: var(--bg-void);
    color: var(--text-body);
    min-height: 100vh;
    overflow-x: hidden;
}

/* ═══════════════════════════════════════
   HEADER
   ═══════════════════════════════════════ */
.page-header {
    text-align: center;
    padding: 70px 40px 48px;
    position: relative;
}

.page-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 1.5px;
    background: var(--color-gold);
}

.page-kicker {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--color-gold);
    margin-bottom: 20px;
    opacity: 0;
    animation: fadeUp 0.8s var(--ease-out) 0.2s forwards;
}

.page-title {
    font-family: var(--font-display);
    font-size: clamp(32px, 3.5vw, 48px);
    font-weight: 400;
    color: var(--text-heading);
    line-height: 1.15;
    margin-bottom: 18px;
    opacity: 0;
    animation: fadeUp 0.8s var(--ease-out) 0.4s forwards;
}

.page-title em {
    font-style: italic;
    color: var(--color-gold);
}

.page-subtitle {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    color: var(--text-secondary);
    max-width: 640px;
    margin: 0 auto;
    line-height: 1.7;
    opacity: 0;
    animation: fadeUp 0.8s var(--ease-out) 0.6s forwards;
}

/* ═══════════════════════════════════════
   MAIN CHART CONTAINER
   ═══════════════════════════════════════ */
.page-intro {
    text-align: center;
    max-width: 1060px;
    margin: 48px auto 48px;
    padding: 0 40px;
}
.page-intro p {
    font-family: var(--font-display);
    font-size: clamp(20px, 2vw, 28px);
    font-weight: 400;
    color: #1D2F4E;
    line-height: 1.7;
}

.page-intro-attrib {
    margin-top: 40px;
    padding-top: 28px;
    border-top: 1.5px solid #DBBA5C;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.page-intro-attrib p {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    color: #1D2F4E;
    line-height: 1.8;
    text-align: center;
}
.page-intro-attrib .attrib-name {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    color: #1D2F4E;
    margin-top: 16px;
    margin-bottom: 2px;
    line-height: 1.3;
    text-align: center;
}
.page-intro-attrib .attrib-role {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    color: #B09830;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    line-height: 1.3;
    text-align: center;
}
.page-intro p strong {
    font-weight: 700;
}
.page-intro-attrib p strong {
    font-weight: 600;
}

[data-theme="light"] .page-intro p {
    color: #1D2F4E;
}

.chart-container {
    max-width: 100%;
    margin: 0 auto;
    padding: 50px 40px 80px;
    position: relative;
}

/* ═══════════════════════════════════════
   TIER SYSTEM
   ═══════════════════════════════════════ */
.tier {
    position: relative;
    opacity: 0;
    transform: translateY(30px);
}

.tier.visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}

.tier-label {
    text-align: center;
    margin-bottom: 16px;
}

.tier-label-text {
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--text-tertiary);
    background: var(--bg-void);
    padding: 0 16px;
    position: relative;
    z-index: 1;
}

/* ═══════════════════════════════════════
   TIER 1: DEVELOPER (SHAYHER)
   ═══════════════════════════════════════ */
.node-developer-wrap {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    flex-wrap: wrap;
}

.node-developer {
    background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--bg-surface) 100%);
    border: 1px solid #3C3724;
    border-radius: 6px;
    padding: 36px 44px;
    text-align: center;
    min-width: 300px;
    max-width: 380px;
    position: relative;
    z-index: 2;
    flex-shrink: 0;
}

.node-developer::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 7px;
    background: linear-gradient(135deg, #3D3524, #171B17);
    z-index: -1;
}

.node-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.node-icon.developer-icon {
    background: #21261E;
    border: 1px solid #3C3724;
}

.node-icon svg {
    width: 22px;
    height: 22px;
}

.node-title {
    font-family: var(--font-display);
    font-size: clamp(20px, 2vw, 28px);
    font-weight: 500;
    color: var(--text-heading);
    margin-bottom: 4px;
}

.node-subtitle {
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--color-gold);
    margin-bottom: 12px;
}

.node-desc {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Responsibility Arms */
.arms-container {
    display: flex;
    align-items: center;
    gap: 0;
}

.arm-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 36px;
}

.arm-group.left { align-items: flex-end; padding-right: 0; }
.arm-group.right { align-items: flex-start; padding-left: 0; }

.arm-connector {
    width: 50px;
    flex-shrink: 0;
    position: relative;
    align-self: center;
}

.arm-connector::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #322E20;
}

.arm {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    background: #151916;
    border: 1px solid #1E231C;
    border-radius: 5px;
    transition: all 0.3s var(--ease-out);
    cursor: default;
    min-width: 260px;
    max-width: 340px;
}

.arm:hover {
    background: #1C201A;
    border-color: #322E20;
    transform: translateX(0) scale(1.01);
}

.arm-group.left .arm:hover { transform: translateX(-4px) scale(1.01); }
.arm-group.right .arm:hover { transform: translateX(4px) scale(1.01); }

.arm-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.arm-icon svg {
    width: 16px;
    height: 16px;
}

.arm-icon.gold-icon {
    background: #21261E;
    border: 1px solid #322E20;
}

.arm-icon.gold-icon svg { stroke: var(--color-gold); }

.arm-icon.rose-icon {
    background: #1E191D;
    border: 1px solid #2A2328;
}

.arm-icon.rose-icon svg { stroke: var(--color-rose); }

.arm-icon.navy-icon {
    background: #14192A;
    border: 1px solid #182036;
}

.arm-icon.navy-icon svg { stroke: #8AACCC; }

.arm-text-wrap { flex: 1; min-width: 0; }

.arm-title {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 600;
    color: var(--text-heading);
    margin-bottom: 2px;
    letter-spacing: 0.3px;
}

.arm-desc {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-tertiary);
    line-height: 1.45;
}

/* ═══════════════════════════════════════
   VERTICAL CONNECTORS
   ═══════════════════════════════════════ */
.connector-vertical {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 36px 0;
    position: relative;
}

.connector-line {
    width: 2px;
    height: 28px;
    position: relative;
    overflow: hidden;
}

.connector-line::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 100%;
    background: #DBBA5C;
}

.connector-line.animated::after {
    content: '';
    position: absolute;
    top: -20px;
    left: 0;
    width: 1px;
    height: 20px;
    background: linear-gradient(to bottom, transparent, var(--color-gold));
    animation: flowDown 2s ease-in-out infinite;
}

@keyframes flowDown {
    0% { top: -20px; opacity: 0; }
    30% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

.connector-arrow {
    width: 8px;
    height: 8px;
    border-right: 1.5px solid #DBBA5C;
    border-bottom: 1.5px solid #DBBA5C;
    transform: rotate(45deg);
    margin-top: -4px;
}

.connector-label {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-top: 8px;
}

/* ═══════════════════════════════════════
   TIER 2: LEAD AGENT (MSL)
   ═══════════════════════════════════════ */
.node-lead-agent {
    background: linear-gradient(135deg, #162236 0%, #111B2B 100%);
    border: 1px solid var(--river-deep);
    border-radius: 6px;
    padding: 32px 40px;
    text-align: center;
    min-width: 300px;
    max-width: 380px;
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    box-shadow: 
        0 0 30px #000000,
        inset 0 1px 0 #1F2D42;
}

.node-lead-agent::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 7px;
    background: linear-gradient(135deg, #1A3342, #111B2B);
    z-index: -1;
}

.node-icon.lead-icon {
    background: #252B22;
    border: 2px solid #5C512F;
    width: 54px;
    height: 54px;
}

.node-icon.lead-icon svg { width: 24px; height: 24px; }

.node-lead-agent .node-title {
    font-size: clamp(20px, 2vw, 28px);
    color: var(--text-heading);
}

.node-lead-agent .node-subtitle {
    font-size: 11px;
    letter-spacing: 3px;
    color: var(--river-mist);
    margin-bottom: 6px;
}

.node-lead-role {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--river-mist);
    padding: 5px 14px;
    border: 1px solid var(--fabrication-steel);
    border-radius: 20px;
    display: inline-block;
    margin-bottom: 14px;
}

/* MSL Arms - wider and more prominent */
.arm.msl-arm {
    border-color: #2D2B1F;
    background: #191D18;
    min-width: 280px;
    max-width: 360px;
}

.arm.msl-arm:hover {
    border-color: #DBBA5C;
    background: #1E231C;
    box-shadow: 0 4px 20px #000000;
}

/* ═══════════════════════════════════════
   BRANCH CONNECTOR (LEAD -> SUB-AGENTS)
   ═══════════════════════════════════════ */
.branch-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 36px 0 12px;
}

.branch-stem {
    width: 2px;
    height: 28px;
    background: #DBBA5C;
    position: relative;
}

.branch-bar {
    width: 520px;
    max-width: 80vw;
    height: 2px;
    background: linear-gradient(90deg, transparent, #DBBA5C 15%, #DBBA5C 85%, transparent);
    position: relative;
}

.branch-drops {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    width: 520px;
    max-width: 80vw;
}

.branch-drop {
    width: 2px;
    height: 20px;
    background: #DBBA5C;
    position: relative;
    justify-self: center;
}

.branch-drop::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 8px;
    height: 8px;
    border-right: 1.5px solid #DBBA5C;
    border-bottom: 1.5px solid #DBBA5C;
}

/* ═══════════════════════════════════════
   TIER 3: SUB-AGENTS
   ═══════════════════════════════════════ */
.sub-agents-row {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: nowrap;
    padding-top: 6px;
}

.node-sub-agent {
    background: linear-gradient(135deg, var(--bg-surface), var(--bg-deep));
    border: 1px solid #21201F;
    border-radius: 6px;
    padding: 28px 18px;
    text-align: center;
    flex: 1;
    min-width: 0;
    transition: all 0.3s var(--ease-out);
}

.node-sub-agent:hover {
    border-color: #383634;
    transform: translateY(-3px);
    box-shadow: 0 8px 30px #000000;
}

.node-icon.sub-icon {
    background: #1A1A19;
    border: 1px solid #282726;
    width: 42px;
    height: 42px;
}

/* Individual icon colours */
.icon-color-gold   { color: var(--color-gold); border-color: #38402E !important; background: #1C201A !important; }
.icon-color-rose   { color: var(--color-rose); border-color: #373137 !important; background: #191619 !important; }
.icon-color-stone  { color: var(--color-stone); border-color: #302F2D !important; background: #181817 !important; }
.icon-color-navy   { color: #5B7BA5; border-color: #1D2537 !important; background: #111620 !important; }
.icon-color-sage   { color: #8BA894; border-color: #1D2522 !important; background: #111817 !important; }
.icon-color-ivory  { color: #D4CFC5; border-color: #2E2D2B !important; background: #191918 !important; }

.node-sub-agent .node-title {
    font-size: 18px;
}

.node-sub-agent .node-subtitle {
    color: var(--color-stone);
    font-size: 11px;
}

/* Sub-agent responsibility lists */
.sub-responsibilities {
    list-style: none;
    margin-top: 14px;
    text-align: left;
}

.sub-responsibilities li {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-tertiary);
    line-height: 1.5;
    padding: 5px 0;
    padding-left: 16px;
    position: relative;
    border-bottom: 1px solid var(--border-subtle);
}

.sub-responsibilities li:last-child { border-bottom: none; }

.sub-responsibilities li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 11px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #383634;
}

/* ═══════════════════════════════════════
   FORMAL APPOINTMENT STRUCTURE
   ═══════════════════════════════════════ */
.appointment-section {
    max-width: 900px;
    margin: 60px auto 0;
    padding: 0 20px;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}

.appointment-section.visible {
    opacity: 1;
    transform: translateY(0);
}

.appt-header {
    text-align: center;
    margin-bottom: 44px;
}

.appt-kicker {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--color-gold);
    margin-bottom: 12px;
}

.appt-title {
    font-family: var(--font-display);
    font-size: clamp(24px, 2.5vw, 36px);
    font-weight: 400;
    color: var(--text-heading);
    line-height: 1.2;
}

.appt-title em { font-style: italic; color: var(--color-gold); }

.appt-subtitle {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-tertiary);
    margin-top: 10px;
    line-height: 1.6;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

/* Appointment chain */
.appt-chain {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}


/* Appointment section descriptive passage */
.appt-passage {
    max-width: 700px;
    margin: 0 auto 32px;
    text-align: center;
    padding: 0 24px;
}

.appt-passage p {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;
    color: var(--text-secondary);
}

[data-theme="light"] .appt-passage p {
    color: #1D2F4E;
}

.appt-node {
    width: 100%;
    max-width: 520px;
    border-radius: 6px;
    padding: 28px 32px;
    text-align: center;
    position: relative;
    z-index: 2;
}

.appt-node.node-shayher {
    background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--bg-surface) 100%);
    border: 1px solid #3C3724;
    position: relative;
}

.appt-node.node-shayher::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 7px;
    background: linear-gradient(135deg, #3D3524, #171B17);
    z-index: -1;
}

.appt-node.node-msl {
    background: linear-gradient(135deg, #162236 0%, #111B2B 100%);
    border: 1px solid var(--river-deep);
    box-shadow: 0 0 30px #000000, inset 0 1px 0 #1F2D42;
    position: relative;
}

.appt-node.node-msl::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 7px;
    background: linear-gradient(135deg, #1A3342, #111B2B);
    z-index: -1;
}

.appt-node.node-network {
    background: linear-gradient(135deg, var(--bg-surface), var(--bg-deep));
    border: 1px solid #21201F;
}

.appt-node-label {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: 8px;
}

.appt-node.node-msl .appt-node-label {
    color: var(--river-mist);
}

.appt-node-name {
    font-family: var(--font-display);
    font-size: clamp(20px, 2vw, 28px);
    font-weight: 400;
    color: var(--text-heading);
    margin-bottom: 6px;
}

.appt-node.node-msl .appt-node-name { color: var(--text-heading); }

.appt-node-desc {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Connector between appointment nodes */
.appt-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 0;
    position: relative;
    z-index: 1;
}

.appt-connector-line {
    width: 1px;
    height: 20px;
    background: linear-gradient(to bottom, #4A4B30, #2E3427);
}

.appt-connector-badge {
    padding: 10px 22px;
    border-radius: 28px;
    text-align: center;
    position: relative;
}

.appt-connector-badge.badge-form6 {
    background: #191D18;
    border: 1.5px solid #3C3724;
}

.appt-connector-badge.badge-sub {
    background: #141413;
    border: 1.5px solid #252423;
}

.appt-badge-title {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 3px;
}

.badge-form6 .appt-badge-title { color: var(--color-gold); }
.badge-sub .appt-badge-title { color: var(--color-stone); }

.appt-badge-desc {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-tertiary);
    line-height: 1.4;
}

.appt-connector-line-bottom {
    width: 1px;
    height: 20px;
    background: linear-gradient(to bottom, #2E3427, #4A4B30);
}

.appt-connector.connector-network .appt-connector-line {
    background: linear-gradient(to bottom, #383634, #21201F);
}

.appt-connector.connector-network .appt-connector-line-bottom {
    background: linear-gradient(to bottom, #21201F, #383634);
}

/* Network agents fan out */
.appt-network-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
    width: 100%;
    max-width: 1000px;
}

.appt-network-card {
    padding: 18px 12px;
    background: #131312;
    border: 1px solid #1D1D1C;
    border-radius: 5px;
    text-align: center;
}

.appt-network-card-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-body);
    margin-bottom: 3px;
}

.appt-network-card-type {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-tertiary);
}

/* Branch fan */
.appt-fan {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.appt-fan-stem {
    width: 1px;
    height: 16px;
    background: #302F2D;
}

.appt-fan-bar {
    width: 360px;
    max-width: 70vw;
    height: 1px;
    background: #21201F;
}

.appt-fan-drops {
    display: flex;
    justify-content: space-between;
    width: 360px;
    max-width: 70vw;
}

.appt-fan-drop {
    width: 1px;
    height: 16px;
    background: #21201F;
}

/* Appointment note */
.appt-note {
    max-width: 620px;
    margin: 28px auto 0;
    padding: 18px 24px;
    background: #0E1114;
    border: 1px solid #1C201A;
    border-radius: 5px;
    text-align: center;
}

.appt-note p {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.7;
}

.appt-note em {
    color: var(--color-gold);
    font-style: normal;
    font-weight: 600;
}

@media (max-width: 600px) {
    .appt-network-row { display: flex; flex-direction: column; align-items: center; }
    .appt-network-card { max-width: 280px; width: 100%; }
    .appt-fan-bar, .appt-fan-drops { display: none; }
}

/* ═══════════════════════════════════════
   THE VAULT - ASSET CONTROL DASHBOARD
   ═══════════════════════════════════════ */
.vault-section {
    padding: 80px 40px;
    background: var(--ivory-warm);
    opacity: 1;
    transform: none;
}

.vault-section.visible {
    opacity: 1;
    transform: translateY(0);
}

.vault-header {
    text-align: center;
    margin-bottom: 44px;
}

.vault-kicker {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--color-gold);
    margin-bottom: 12px;
}

.vault-title {
    font-family: var(--font-display);
    font-size: clamp(24px, 2.5vw, 36px);
    font-weight: 400;
    color: var(--text-heading);
    line-height: 1.15;
}

.vault-title em { font-style: italic; color: var(--color-gold); }

.vault-subtitle {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-tertiary);
    margin-top: 12px;
    line-height: 1.7;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}

/* Three vault pillars */
.vault-pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 28px;
}

.vault-pillar {
    border-radius: 6px;
    padding: 30px 26px 28px;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}

.vault-pillar:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px #000000;
}

.vault-pillar::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
}

.vault-pillar.pillar-marketing {
    background: linear-gradient(135deg, #191D18, #111413);
    border: 1px solid #252B22;
}

.vault-pillar.pillar-marketing::before {
    background: linear-gradient(to right, var(--color-gold), #2E3427);
}

.vault-pillar.pillar-project {
    background: linear-gradient(135deg, #141315, #0F0E10);
    border: 1px solid #221D21;
}

.vault-pillar.pillar-project::before {
    background: linear-gradient(to right, var(--color-rose), #2A2328);
}

.vault-pillar.pillar-lots {
    background: linear-gradient(135deg, #161615, #101010);
    border: 1px solid #21201F;
}

.vault-pillar.pillar-lots::before {
    background: linear-gradient(to right, var(--color-stone), #282726);
}

.vault-pillar-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.vault-pillar-icon svg {
    width: 22px;
    height: 22px;
}

.vault-pillar-icon.vi-gold {
    background: #1E231C;
    border: 1px solid #2E3427;
}
.vault-pillar-icon.vi-gold svg { stroke: var(--color-gold); }

.vault-pillar-icon.vi-rose {
    background: #1B181B;
    border: 1px solid #2A2328;
}
.vault-pillar-icon.vi-rose svg { stroke: var(--color-rose); }

.vault-pillar-icon.vi-stone {
    background: #1A1A19;
    border: 1px solid #21201F;
}
.vault-pillar-icon.vi-stone svg { stroke: var(--color-stone); }

.vault-pillar-label {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.pillar-marketing .vault-pillar-label { color: var(--color-gold); }
.pillar-project .vault-pillar-label { color: var(--color-rose); }
.pillar-lots .vault-pillar-label { color: var(--color-stone); }

.vault-pillar-title {
    font-family: var(--font-display);
    font-size: clamp(20px, 2vw, 28px);
    font-weight: 400;
    color: var(--text-heading);
    margin-bottom: 8px;
    line-height: 1.2;
}

.vault-pillar-desc {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-tertiary);
    line-height: 1.6;
    margin-bottom: 18px;
}

/* Asset list inside pillar */
.vault-asset-list {
    list-style: none;
}

.vault-asset-list li {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-secondary);
    padding: 7px 0;
    padding-left: 20px;
    position: relative;
    border-bottom: 1px solid var(--border-subtle);
    line-height: 1.4;
}

.vault-asset-list li:last-child { border-bottom: none; }

.vault-asset-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 13px;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    border: 1px solid;
}

.pillar-marketing .vault-asset-list li::before { border-color: var(--color-gold); }
.pillar-project .vault-asset-list li::before { border-color: var(--color-rose); }
.pillar-lots .vault-asset-list li::before { border-color: var(--color-stone); }

/* Lot detail callout */
.vault-lot-detail {
    margin-top: 14px;
    padding: 14px 16px;
    background: #131312;
    border: 1px dashed #21201F;
    border-radius: 4px;
}

.vault-lot-detail-label {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-stone);
    margin-bottom: 8px;
}

.vault-lot-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 12px;
}

.vault-lot-detail-item {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-tertiary);
    padding: 3px 0;
    padding-left: 14px;
    position: relative;
}

.vault-lot-detail-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #383634;
}

/* Access bar */
.vault-access-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px 28px;
    background: linear-gradient(135deg, #1A2840 0%, #162236 100%);
    border: 1.5px solid #322E20;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    margin-bottom: 16px;
}

.vault-access-bar::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--color-gold);
}

.vault-access-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #1E231C;
    border: 1px solid #2E3427;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.vault-access-icon svg {
    width: 20px;
    height: 20px;
    stroke: var(--color-gold);
}

.vault-access-content { flex: 1; }

.vault-access-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-gold);
    letter-spacing: 0.3px;
    margin-bottom: 4px;
}

.vault-access-desc {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.6;
}

.vault-access-desc em {
    color: var(--text-body);
    font-style: normal;
    font-weight: 500;
}

/* Vault who gets access chips */
.vault-access-chips {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.vault-chip {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.vault-chip.chip-dev {
    background: #191619;
    border: 1px solid #2A2328;
    color: var(--color-rose);
}

.vault-chip.chip-lead {
    background: #1C201A;
    border: 1px solid #2E3427;
    color: var(--color-gold);
}

.vault-chip.chip-network {
    background: #181817;
    border: 1px solid #21201F;
    color: var(--color-stone);
}

/* Vault note */
.vault-note {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
    padding: 18px 24px;
    background: #111413;
    border: 1px solid #191D18;
    border-radius: 5px;
}

.vault-note p {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-tertiary);
    line-height: 1.7;
}

.vault-note em {
    color: var(--color-gold);
    font-style: normal;
    font-weight: 600;
}

@media (max-width: 800px) {
    .vault-pillars { grid-template-columns: 1fr; }
    .vault-access-bar { flex-direction: column; text-align: center; }
    .vault-access-chips { justify-content: center; }
    .vault-lot-detail-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════
   CONTRACT FLOW PROCESS
   ═══════════════════════════════════════ */
.contract-flow-section {
    max-width: 1100px;
    margin: 60px auto 0;
    padding: 0 20px;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}

.contract-flow-section.visible {
    opacity: 1;
    transform: translateY(0);
}

.cf-header {
    text-align: center;
    margin-bottom: 40px;
}

.cf-kicker {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--color-gold);
    margin-bottom: 12px;
}

.cf-title {
    font-family: var(--font-display);
    font-size: clamp(24px, 2.5vw, 36px);
    font-weight: 400;
    color: var(--text-heading);
    line-height: 1.2;
}

.cf-title em { font-style: italic; color: var(--color-gold); }

.cf-subtitle {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-tertiary);
    margin-top: 10px;
    line-height: 1.6;
}

/* Flow steps - horizontal timeline */
.cf-timeline {
    display: flex;
    flex-direction: column;
    gap: 52px;
    position: relative;
    padding: 0 10px;
}

.cf-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    position: relative;
    width: 100%;
}

.cf-step {
    text-align: center;
    position: relative;
    padding: 0 14px;
}

/* Connecting line between steps */
.cf-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 24px;
    right: -2px;
    width: calc(100% - 48px);
    left: calc(50% + 24px);
    height: 1px;
    background: linear-gradient(to right, #3D3524, #252B22);
}

/* Arrow on connector */
.cf-step:not(:last-child)::before {
    content: '';
    position: absolute;
    top: 21px;
    right: 2px;
    width: 7px;
    height: 7px;
    border-right: 1px solid #4A4B30;
    border-top: 1px solid #4A4B30;
    transform: rotate(45deg);
    z-index: 2;
}

.cf-step-number {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 500;
    position: relative;
    z-index: 2;
    transition: all 0.3s var(--ease-out);
}

.cf-step:hover .cf-step-number {
    transform: scale(1.08);
}

.cf-step-number.gold-step {
    background: #1E231C;
    border: 1.5px solid #51482B;
    color: var(--color-gold);
}

.cf-step-number.stone-step {
    background: #181817;
    border: 1.5px solid #302F2D;
    color: var(--color-stone);
}

.cf-step-number.rose-step {
    background: #1A1A21;
    border: 1.5px solid #40383F;
    color: var(--color-rose);
}

.cf-step-who {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 6px;
    padding: 3px 10px;
    border-radius: 12px;
    display: inline-block;
}

.cf-step-who.who-network {
    color: var(--color-stone);
    background: #181817;
    border: 1px solid #21201F;
}

.cf-step-who.who-lead {
    color: var(--color-gold);
    background: #191D18;
    border: 1px solid #252B22;
}

.cf-step-who.who-developer {
    color: var(--color-rose);
    background: #161417;
    border: 1px solid #221D21;
}

.cf-step-who.who-buyer {
    color: #FFFFFF;
    background: #111820;
    border: 1px solid #1C2736;
}

.cf-step-title {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 600;
    color: var(--text-heading);
    margin-bottom: 6px;
    letter-spacing: 0.3px;
}

.cf-step-desc {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-tertiary);
    line-height: 1.55;
}

/* Running note beneath */
.cf-running-note {
    text-align: center;
    margin-top: 36px;
    padding: 18px 28px;
    background: #131312;
    border: 1px solid #181817;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.cf-running-note-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #181817;
    border: 1px solid #21201F;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cf-running-note-icon svg {
    width: 16px;
    height: 16px;
    stroke: var(--color-stone);
}

.cf-running-note p {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.6;
    text-align: left;
}

.cf-running-note p em {
    color: var(--color-stone);
    font-style: normal;
    font-weight: 600;
}

@media (max-width: 800px) {
    .cf-timeline {
        flex-direction: column;
        align-items: center;
        gap: 24px;
    }
    .cf-row {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 24px;
    }
    .cf-step { width: 100%; max-width: 320px; }
    .cf-step::after, .cf-step::before { display: none; }
}

/* ═══════════════════════════════════════
   COMMISSION STRUCTURE
   ═══════════════════════════════════════ */
.commission-section {
    max-width: 1000px;
    margin: 70px auto 0;
    padding: 0 20px;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}

.commission-section.visible {
    opacity: 1;
    transform: translateY(0);
}

.comm-header {
    text-align: center;
    margin-bottom: 44px;
}

.comm-kicker {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--color-gold);
    margin-bottom: 12px;
}

.comm-title {
    font-family: var(--font-display);
    font-size: clamp(24px, 2.5vw, 36px);
    font-weight: 400;
    color: var(--text-heading);
    line-height: 1.2;
}

.comm-title em { font-style: italic; color: var(--color-gold); }

.comm-subtitle {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-tertiary);
    margin-top: 10px;
    line-height: 1.6;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Two scenario cards side by side */
.comm-scenarios {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 30px;
}

.comm-card {
    border-radius: 6px;
    padding: 36px 32px;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}

.comm-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px #000000;
}

.comm-card.card-lead {
    background: linear-gradient(135deg, #1A2840 0%, #162236 100%);
    border: 1.5px solid #474028;
}

.comm-card.card-lead::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(to right, var(--color-gold), #3D3524);
}

.comm-card.card-network {
    background: linear-gradient(135deg, #161615 0%, #101010 100%);
    border: 1.5px solid #282726;
}

.comm-card.card-network::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(to right, var(--color-stone), #282726);
}

.comm-card-scenario {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: 16px;
}

.comm-card-heading {
    font-family: var(--font-display);
    font-size: clamp(20px, 2vw, 28px);
    font-weight: 400;
    color: var(--text-heading);
    margin-bottom: 6px;
    line-height: 1.25;
}

.comm-card-sub {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-tertiary);
    margin-bottom: 24px;
    line-height: 1.5;
}

/* Commission breakdown rows */
.comm-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid var(--border-subtle);
}

.comm-row:last-child { border-bottom: none; }

.comm-row-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.comm-row-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.comm-row-icon svg {
    width: 15px;
    height: 15px;
}

.comm-row-icon.icon-gold {
    background: #1E231C;
    border: 1px solid #2E3427;
}

.comm-row-icon.icon-gold svg { stroke: var(--color-gold); }

.comm-row-icon.icon-stone {
    background: #181817;
    border: 1px solid #21201F;
}

.comm-row-icon.icon-stone svg { stroke: var(--color-stone); }

.comm-row-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-body);
    line-height: 1.4;
}

.comm-row-detail {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-tertiary);
    margin-top: 2px;
}

.comm-row-rate {
    font-family: var(--font-display);
    font-size: clamp(20px, 2vw, 28px);
    font-weight: 400;
    flex-shrink: 0;
    text-align: right;
    line-height: 1;
}

.comm-row-rate.rate-gold { color: var(--color-gold); }
.comm-row-rate.rate-stone { color: var(--color-stone); }

.comm-row-gst {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1px;
    color: var(--text-tertiary);
    display: block;
    margin-top: 2px;
}

/* Total row */
.comm-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 0 4px;
    margin-top: 6px;
    border-top: 1px solid var(--border-light);
}

.comm-total-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.comm-total-rate {
    font-family: var(--font-display);
    font-size: 42px;
    font-weight: 500;
    line-height: 1;
}

.comm-total-rate.total-gold { color: var(--color-gold); }
.comm-total-rate.total-stone { color: var(--text-body); }

.comm-total-rate .comm-row-gst {
    font-size: 11px;
    margin-top: 4px;
}

/* Overrider explanation */
.comm-overrider-note {
    text-align: center;
    padding: 22px 28px;
    background: #0E1114;
    border: 1px solid #1E231C;
    border-radius: 5px;
    margin-top: 8px;
}

.comm-overrider-note p {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.7;
}

.comm-overrider-note strong {
    color: var(--color-gold);
    font-weight: 600;
}

.comm-overrider-note .overrider-items {
    display: flex;
    justify-content: center;
    gap: 28px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.comm-overrider-note .overrider-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 400;
    color: var(--text-secondary);
}

.overrider-item .oi-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #6B5A2E;
    flex-shrink: 0;
}

/* Platform list inside commission card */
.comm-platforms {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #1C1C1C;
}

.comm-platforms-label {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-gold);
    margin-bottom: 12px;
}

.comm-platform-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 16px;
}

.comm-platform-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.4;
    padding: 4px 0;
}

.cp-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #544F34;
    flex-shrink: 0;
}

/* Expanded contract flow - relationship bar */
.cf-relationship-bar {
    margin-top: 28px;
    padding: 16px 24px;
    background: #131312;
    border: 1px solid #1D1D1C;
    border-radius: 5px;
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    overflow: hidden;
}

.cf-relationship-bar::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #484644;
}

.cf-rel-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #181817;
    border: 1px solid #282726;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cf-rel-icon svg {
    width: 16px;
    height: 16px;
    stroke: var(--color-stone);
}

.cf-rel-content { flex: 1; }

.cf-rel-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-stone);
    margin-bottom: 4px;
}

.cf-rel-text {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.6;
}

.cf-rel-text em {
    color: var(--text-body);
    font-style: normal;
    font-weight: 500;
}

/* Continuous bar indicator */
.cf-continuous-strip {
    display: flex;
    align-items: center;
    gap: 0;
    margin-top: 20px;
    position: relative;
    padding: 0 10px;
}

.cf-continuous-bar {
    flex: 1;
    height: 32px;
    background: #131312;
    border: 1px dashed #21201F;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.cf-continuous-bar svg {
    width: 14px;
    height: 14px;
    stroke: #585553;
    flex-shrink: 0;
}

.cf-continuous-label {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

@media (max-width: 700px) {
    .comm-scenarios { grid-template-columns: 1fr; }
    .comm-platform-list { grid-template-columns: 1fr; }
    .comm-row { flex-direction: column; align-items: flex-start; gap: 8px; }
    .comm-row-rate { align-self: flex-end; }
    .comm-total { flex-direction: column; align-items: flex-start; gap: 8px; }
    .comm-total-rate { align-self: flex-end; }
}

/* ═══════════════════════════════════════
   DEVELOPER VALUE - TIME FREED
   ═══════════════════════════════════════ */
.dev-value-section {
    max-width: 1100px;
    margin: 70px auto 0;
    padding: 0 20px;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}

.dev-value-section.visible {
    opacity: 1;
    transform: translateY(0);
}

.dv-header {
    text-align: center;
    margin-bottom: 44px;
}

.dv-kicker {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--color-gold);
    margin-bottom: 12px;
}

.dv-title {
    font-family: var(--font-display);
    font-size: clamp(24px, 2.5vw, 36px);
    font-weight: 400;
    color: var(--text-heading);
    line-height: 1.2;
}

.dv-title em { font-style: italic; color: var(--color-gold); }

.dv-subtitle {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-tertiary);
    margin-top: 10px;
    line-height: 1.6;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}

/* Task grid */
.dv-task-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 36px;
}

.dv-task {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px;
    background: #0C0F13;
    border: 1px solid #1C201A;
    border-radius: 5px;
    transition: all 0.3s var(--ease-out);
}

.dv-task:hover {
    background: #121415;
    border-color: #252B22;
    transform: translateY(-2px);
}

.dv-task-hours {
    min-width: 52px;
    height: 52px;
    border-radius: 6px;
    background: #1C201A;
    border: 1px solid #252B22;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dv-task-hours-num {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 500;
    color: var(--color-gold);
    line-height: 1;
}

.dv-task-hours-label {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-top: 2px;
}

.dv-task-content { flex: 1; }

.dv-task-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-heading);
    margin-bottom: 3px;
    letter-spacing: 0.3px;
}

.dv-task-desc {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-tertiary);
    line-height: 1.5;
}

/* Time savings summary bar */
.dv-time-summary {
    background: linear-gradient(135deg, #1A2840 0%, #162236 100%);
    border: 1.5px solid #3C3724;
    border-radius: 6px;
    padding: 32px 36px;
    display: flex;
    align-items: center;
    gap: 40px;
    margin-bottom: 16px;
    position: relative;
    overflow: hidden;
}

.dv-time-summary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(to right, var(--color-gold), #2E3427);
}

.dv-time-stat {
    text-align: center;
    flex-shrink: 0;
}

.dv-time-stat-num {
    font-family: var(--font-display);
    font-size: 42px;
    font-weight: 400;
    color: var(--color-gold);
    line-height: 1;
}

.dv-time-stat-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-top: 6px;
}

.dv-time-stat-sub {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-tertiary);
    margin-top: 2px;
}

.dv-time-divider {
    width: 1px;
    height: 60px;
    background: #252B22;
    flex-shrink: 0;
}

.dv-time-bar-wrap {
    flex: 1;
}

.dv-time-bar-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: 10px;
}

.dv-time-bar-track {
    width: 100%;
    height: 28px;
    background: var(--bg-deep);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

.dv-time-bar-fill {
    height: 100%;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: width 1.5s var(--ease-out);
}

.dv-time-bar-fill.fill-freed {
    background: linear-gradient(to right, #2E3427, #4A4B30);
    color: var(--color-gold);
    width: 0;
}

.dev-value-section.visible .dv-time-bar-fill.fill-freed {
    width: 83%;
}

.dv-time-bar-fill.fill-remain {
    position: absolute;
    right: 0;
    top: 0;
    width: 17%;
    background: #1E191D;
    color: var(--color-rose);
    justify-content: center;
}

.dv-time-context {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-tertiary);
    margin-top: 10px;
    line-height: 1.6;
    text-align: center;
}

.dv-time-context em {
    color: var(--color-gold);
    font-style: normal;
    font-weight: 600;
}

/* ═══════════════════════════════════════
   FINANCIAL CASE
   ═══════════════════════════════════════ */
.financial-section {
    max-width: 1100px;
    margin: 70px auto 0;
    padding: 0 20px;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}

.financial-section.visible {
    opacity: 1;
    transform: translateY(0);
}

.fin-header {
    text-align: center;
    margin-bottom: 44px;
}

.fin-kicker {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--color-gold);
    margin-bottom: 12px;
}

.fin-title {
    font-family: var(--font-display);
    font-size: clamp(24px, 2.5vw, 36px);
    font-weight: 400;
    color: var(--text-heading);
    line-height: 1.2;
}

.fin-title em { font-style: italic; color: var(--color-gold); }

.fin-subtitle {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-tertiary);
    margin-top: 10px;
    line-height: 1.6;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}

/* Comparison columns */
.fin-comparison {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0;
    margin-bottom: 30px;
    align-items: stretch;
}

.fin-col {
    border-radius: 6px;
    padding: 36px 30px;
    position: relative;
}

.fin-col.col-without {
    background: #131214;
    border: 1px solid #221D21;
}

.fin-col.col-without::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(to right, var(--color-rose), #2A2328);
}

.fin-col.col-with {
    background: linear-gradient(135deg, #1A2840 0%, #162236 100%);
    border: 1.5px solid #474028;
}

.fin-col.col-with::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(to right, var(--color-gold), #2E3427);
}

.fin-vs {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
}

.fin-vs-badge {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--bg-deep);
    border: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 500;
    color: var(--text-tertiary);
    font-style: italic;
}

.fin-col-scenario {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: 14px;
}

.fin-col-heading {
    font-family: var(--font-display);
    font-size: clamp(20px, 2vw, 28px);
    font-weight: 400;
    color: var(--text-heading);
    margin-bottom: 20px;
    line-height: 1.25;
}

/* Line items */
.fin-line {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-subtle);
    gap: 12px;
}

.fin-line:last-of-type { border-bottom: none; }

.fin-line-label {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-secondary);
    flex: 1;
    line-height: 1.4;
}

.fin-line-label small {
    display: block;
    font-size: 11px;
    font-weight: 400;
    color: var(--text-tertiary);
    margin-top: 1px;
}

.fin-line-val {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 400;
    flex-shrink: 0;
    text-align: right;
}

.fin-line-val.val-rose { color: var(--color-rose); }
.fin-line-val.val-gold { color: var(--color-gold); }
.fin-line-val.val-muted { color: var(--text-tertiary); font-size: 14px; }

/* Total line */
.fin-total-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0 4px;
    margin-top: 8px;
    border-top: 1px solid var(--border-light);
}

.fin-total-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.fin-total-val {
    font-family: var(--font-display);
    font-size: 42px;
    font-weight: 500;
    line-height: 1;
}

.fin-total-val.total-rose { color: var(--color-rose); }
.fin-total-val.total-gold { color: var(--color-gold); }

.fin-total-per-yr {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    color: var(--text-tertiary);
    display: block;
    margin-top: 4px;
}

/* Savings result */
.fin-savings-result {
    border-radius: 6px;
    padding: 32px 36px;
    text-align: center;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #191D18, #111413);
    border: 1.5px solid #322E20;
}

.fin-savings-result::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--color-gold);
}

.fin-savings-kicker {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--color-gold);
    margin-bottom: 12px;
}

.fin-savings-amount {
    font-family: var(--font-display);
    font-size: clamp(32px, 3.5vw, 48px);
    font-weight: 400;
    color: var(--color-gold);
    line-height: 1;
    margin-bottom: 8px;
}

.fin-savings-context {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.6;
    max-width: 700px;
    margin: 0 auto;
}

.fin-savings-context strong {
    color: var(--text-heading);
    font-weight: 600;
}

/* Bonus points */
.fin-bonus-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 24px;
}

.fin-bonus-item {
    padding: 18px 16px;
    background: #131614;
    border: 1px solid #1C201A;
    border-radius: 5px;
    text-align: center;
}

.fin-bonus-val {
    font-family: var(--font-display);
    font-size: clamp(20px, 2vw, 28px);
    font-weight: 400;
    color: var(--color-gold);
    margin-bottom: 4px;
}

.fin-bonus-label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-tertiary);
    line-height: 1.4;
}

/* Disclaimer */
.fin-disclaimer {
    text-align: center;
    margin-top: 20px;
    font-size: 11px;
    font-weight: 400;
    color: var(--text-muted);
    font-style: italic;
}

@media (max-width: 800px) {
    .dv-task-grid { grid-template-columns: 1fr; }
    .dv-time-summary { flex-direction: column; gap: 20px; text-align: center; }
    .dv-time-divider { width: 60px; height: 1px; }
    .fin-comparison { grid-template-columns: 1fr; gap: 16px; }
    .fin-vs { padding: 8px 0; }
    .fin-bonus-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════
   FLOW LEGEND
   ═══════════════════════════════════════ */
.flow-legend {
    display: flex;
    justify-content: center;
    gap: 40px;
    padding: 50px 20px 30px;
    flex-wrap: wrap;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.legend-line {
    width: 30px;
    height: 2px;
    border-radius: 1px;
}

.legend-line.gold { background: var(--color-gold); }
.legend-line.stone { background: var(--color-stone); }
.legend-line.dashed { 
    background: none;
    border-top: 2px dashed var(--border-visible);
}

.legend-text {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

/* ═══════════════════════════════════════
   INTRO MANIFESTO
   ═══════════════════════════════════════ */
.manifesto {
    max-width: 860px;
    margin: 0 auto;
    padding: 60px 40px 70px;
    position: relative;
    opacity: 0;
    animation: fadeUp 1s var(--ease-out) 0.8s forwards;
}

.manifesto::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 1px;
    background: var(--color-gold);
}

.manifesto::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 1px;
    background: #3D3524;
}

.manifesto-lead {
    font-family: var(--font-display);
    font-size: clamp(20px, 2vw, 28px);
    font-weight: 400;
    color: var(--text-heading);
    text-align: center;
    line-height: 1.45;
    margin-bottom: 14px;
}

.manifesto-lead em {
    font-style: italic;
    color: var(--color-gold);
}

/* Statement lines - elegant markers */
.manifesto-statements {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 0;
}

.m-statement {
    padding: 28px 32px;
    border-left: 1px solid var(--border-subtle);
    margin-bottom: 8px;
    transition: all 0.3s var(--ease-out);
}

.m-statement:last-child { margin-bottom: 0; }

.m-statement:hover {
    background: #0D0D0D;
}

.m-statement.accent-gold  { border-left-color: var(--color-gold); }
.m-statement.accent-rose  { border-left-color: var(--color-rose); }
.m-statement.accent-stone { border-left-color: var(--color-stone); }

.m-text {
    flex: 1;
}

.m-text-title {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 400;
    color: var(--text-heading);
    line-height: 1.3;
    margin-bottom: 8px;
    letter-spacing: 0.3px;
}

.m-text-desc {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.85;
}

.manifesto-closing {
    text-align: center;
    margin-top: 36px;
    font-family: var(--font-display);
    font-size: clamp(20px, 2vw, 28px);
    font-weight: 400;
    color: var(--color-gold);
    font-style: italic;
    line-height: 1.5;
}

/* Pillars of intent */
.manifesto-pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 40px;
    margin-bottom: 8px;
}

.manifesto-pillar {
    text-align: center;
    padding: 24px 18px;
    background: #0C0F13;
    border: 1px solid #1C201A;
    border-radius: 5px;
    transition: all 0.3s var(--ease-out);
}

.manifesto-pillar:hover {
    background: #121415;
    border-color: #252B22;
    transform: translateY(-2px);
}

.manifesto-pillar-icon {
    display: none;
}

.manifesto-pillar-rule {
    width: 24px;
    height: 1px;
    margin: 10px auto 14px;
}

.manifesto-pillar-rule.rule-gold { background: var(--color-gold); }
.manifesto-pillar-rule.rule-rose { background: var(--color-rose); }
.manifesto-pillar-rule.rule-stone { background: var(--color-stone); }

.manifesto-pillar-icon svg {
    display: none;
}

.manifesto-pillar-title {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 400;
    color: var(--text-heading);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 0;
}

.manifesto-pillar-desc {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-tertiary);
    line-height: 1.6;
}

@media (max-width: 700px) {
    .manifesto { padding: 40px 20px 50px; }
    .m-statement { padding: 20px 20px; }
    .manifesto-pillars { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════
   ANNOTATION BLOCK
   ═══════════════════════════════════════ */
.annotation {
    max-width: 760px;
    margin: 30px auto 0;
    padding: 30px 36px;
    background: #0E1114;
    border: 1px solid #1C201A;
    border-radius: 5px;
    text-align: center;
}

.annotation p {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.8;
}

.annotation p em {
    color: var(--color-gold);
    font-style: italic;
    font-weight: 400;
}

/* ═══════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════ */
.page-footer {
    text-align: center;
    padding: 40px 20px 50px;
    border-top: 1px solid var(--border-subtle);
    margin-top: 20px;
}

.footer-logo {
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 6px;
    color: var(--color-gold);
    text-transform: uppercase;
    margin-bottom: 6px;
}

.footer-tagline {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

/* ═══════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════ */
@media (max-width: 1100px) {
    .node-developer-wrap,
    .arms-container {
        flex-direction: column;
        align-items: center;
    }
    .arm-group.left,
    .arm-group.right {
        align-items: center;
        padding: 10px 0 0;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }
    .arm-connector { display: none; }
    .arm { min-width: 220px; }
}

@media (max-width: 700px) {
    .page-header { padding: 50px 20px 25px; }
    .sub-agents-row { flex-direction: column; align-items: center; }
    .node-sub-agent { width: 90%; max-width: 320px; }
    .branch-bar, .branch-drops { display: none; }
    .arm { min-width: 180px; max-width: 100%; }
    .node-developer { min-width: auto; padding: 28px 24px; }
    .node-lead-agent { min-width: auto; padding: 28px 24px; }
}

/* ═══════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════ */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Stagger arms */
.arm { 
    opacity: 0; 
    transform: translateY(10px); 
    transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out), background 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.tier.visible .arm {
    opacity: 1;
    transform: translateY(0);
}

.tier.visible .arm-group .arm:nth-child(1) { transition-delay: 0.1s; }
.tier.visible .arm-group .arm:nth-child(2) { transition-delay: 0.2s; }
.tier.visible .arm-group .arm:nth-child(3) { transition-delay: 0.3s; }
.tier.visible .arm-group .arm:nth-child(4) { transition-delay: 0.4s; }
.tier.visible .arm-group .arm:nth-child(5) { transition-delay: 0.5s; }
.tier.visible .arm-group .arm:nth-child(6) { transition-delay: 0.6s; }
.tier.visible .arm-group .arm:nth-child(7) { transition-delay: 0.7s; }

/* Print */
@media print {
    body { background: #fff; color: #1D2F4E; }
    .node-developer, .node-lead-agent, .node-sub-agent { border-color: #1D2F4E; background: #f5f5f5; }
    .arm { background: #fafafa; border-color: #ccc; }
    .connector-line::after { display: none; }
}


/* ═══════════════════════════════════════
   MANIFESTO 2×2 GRID
   ═══════════════════════════════════════ */
.manifesto-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
}

.manifesto-grid .m-statement {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .manifesto-grid {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════
   UNIFIED NETWORK STANDARDS
   ═══════════════════════════════════════ */
.network-standards {
    margin-top: 48px;
    padding: 36px 40px;
    background: var(--barracks-white);
    border: 1px solid var(--border-card);
    border-radius: 12px;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

[data-theme="light"] .network-standards {
    background: #F5F0E6;
    border-color: #E0DCD4;
}

.network-standards-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-light);
}

[data-theme="light"] .network-standards-header {
    border-bottom-color: #FFFFFF;
}

.network-standards-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--bg-surface);
    border: 1px solid var(--border-visible);
    color: var(--fabrication-steel);
}

[data-theme="light"] .network-standards-icon {
    background: #F5EDD4;
    border-color: #FFFFFF;
    color: #8A7830;
}

.network-standards-icon svg {
    width: 18px;
    height: 18px;
}

.network-standards-title {
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--fabrication-steel);
}

[data-theme="light"] .network-standards-title {
    color: #1D2F4E;
}

.network-standards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

@media (max-width: 768px) {
    .network-standards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

.standard-item {
    padding: 16px 20px;
    background: var(--bg-deep);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    transition: border-color 0.3s ease;
}

[data-theme="light"] .standard-item {
    background: #FFFFFF;
    border-color: #FFFFFF;
}

.standard-item:hover {
    border-color: var(--fabrication-steel);
}

[data-theme="light"] .standard-item:hover {
    border-color: #FFFFFF;
}

.standard-label {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--fabrication-steel);
    margin-bottom: 6px;
}

[data-theme="light"] .standard-label {
    color: #1D2F4E;
}

.standard-desc {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.65;
    color: var(--text-secondary);
}

/* ═══════════════════════════════════════
   LIGHT THEME
   ═══════════════════════════════════════ */

/* ── Light Theme: Variable Overrides ── */
[data-theme="light"] {
    --bg-void: #FFFFFF;
    --bg-abyss: #FAFAF7;
    --bg-midnight: #F5F2EC;
    --bg-deep: #EFECE5;
    --bg-surface: #E8E4DC;
    --bg-elevated: #DDD9D0;
    --bg-hover: #D2CEC5;
    --bg-active: #C8C4BB;
    --bg-card: #EFECE5;

    --text-white: #1D2F4E;
    --text-heading: #1D2F4E;
    --text-body: #2D3E56;
    --text-secondary: #4A5568;
    --text-tertiary: #6B7280;
    --text-muted: #9CA3AF;

    --border-subtle: #E8E4DC;
    --border-light: #DDD9D0;
    --border-visible: #CCC8BF;
    --border-gold: #D4C9A0;
    --border-card: #E0DCD4;

    --shadow-card: 0 4px 24px #D0CCC4;
    --shadow-lifted: 0 8px 40px #C0BCB4;
    --shadow-deep: 0 16px 60px #B0ACA4;

    --color-gold-dark: #B09830;

    /* ── Bulimba light palette ── */
    --barracks-white: #F5F0E6;  /* MSL Ivory */
    --river-deep: #1D2F4E;    /* MSL Navy */
    --fabrication-steel: #A69E94; /* MSL Stone */
    --river-mist: #C4A0A8;    /* MSL Rose */
    --sandstone: #A69E94;    /* MSL Stone */
}

/* ── Light Theme: Body ── */
[data-theme="light"] body {
    background: #FFFFFF;
    color: #2D3E56;
}

/* ── Light Theme: Header ── */
[data-theme="light"] .page-header::after {
    background: #B09830;
}

[data-theme="light"] .page-kicker {
    color: #B09830;
}

[data-theme="light"] .page-title {
    color: #1D2F4E;
}

[data-theme="light"] .page-title em {
    color: #B09830;
}

[data-theme="light"] .page-subtitle {
    color: #1D2F4E;
}

/* ── Light Theme: Tier Labels ── */
[data-theme="light"] .tier-label-text {
    color: #1D2F4E;
    background: #FFFFFF;
}

/* ── Light Theme: Developer Node ── */
[data-theme="light"] .node-developer {
    background: linear-gradient(135deg, #F5F2EC 0%, #EFECE5 100%);
    border: 1px solid #D4C9A0;
}

[data-theme="light"] .node-developer::before {
    background: linear-gradient(135deg, #D4C9A0, #E8E4DC);
}

[data-theme="light"] .node-icon.developer-icon {
    background: #F5EDD4;
    border: 1px solid #D4C9A0;
}

[data-theme="light"] .node-title {
    color: #1D2F4E;
}

[data-theme="light"] .node-subtitle {
    color: #B09830;
}

[data-theme="light"] .node-desc {
    color: #1D2F4E;
}

/* ── Light Theme: Arms ── */
[data-theme="light"] .arm {
    background: #FAF8F2;
    border: 1px solid #E8E0CC;
}

[data-theme="light"] .arm:hover {
    background: #F5F0E0;
    border-color: #FFFFFF;
}

[data-theme="light"] .arm.msl-arm {
    border-color: #FFFFFF;
    background: #FAF7ED;
}

[data-theme="light"] .arm.msl-arm:hover {
    border-color: #B09830;
    background: #F5EDD4;
    box-shadow: 0 4px 20px #E0D8C0;
}

[data-theme="light"] .arm-title {
    color: #1D2F4E;
}

[data-theme="light"] .arm-desc {
    color: #1D2F4E;
}

[data-theme="light"] .arm-icon.gold-icon {
    background: #F5EDD4;
    border: 1px solid #D4C9A0;
}

[data-theme="light"] .arm-icon.rose-icon {
    background: #F5E8EB;
    border: 1px solid #D4B0B8;
}

[data-theme="light"] .arm-icon.navy-icon {
    background: #E8EEF5;
    border: 1px solid #A0B8D0;
}

/* ── Light Theme: Connectors ── */
[data-theme="light"] .connector-line::before {
    background: linear-gradient(to bottom, #D4C9A0, #E8E0CC);
}

[data-theme="light"] .connector-line.animated::after {
    background: linear-gradient(to bottom, transparent, #B09830);
}

[data-theme="light"] .connector-arrow {
    border-right: 1px solid #D4C9A0;
    border-bottom: 1px solid #D4C9A0;
}

[data-theme="light"] .connector-label {
    color: #1D2F4E;
}

[data-theme="light"] .arm-connector::before {
    background: #E8E0CC;
}

/* ── Light Theme: Lead Agent Node ── */
[data-theme="light"] .node-lead-agent {
    background: linear-gradient(135deg, #F5F2EC 0%, #EFECE5 100%);
    border: 1px solid #D4C9A0;
    box-shadow: 0 0 30px #D0CCC4, inset 0 1px 0 #E8E4DC;
}

[data-theme="light"] .node-lead-agent::before {
    background: linear-gradient(135deg, #D4C9A0, #EFECE5);
}

[data-theme="light"] .node-icon.lead-icon {
    background: #F5EDD4;
    border: 1px solid #D4C9A0;
}

[data-theme="light"] .node-lead-agent .node-title {
    color: #1D2F4E;
}

[data-theme="light"] .node-lead-agent .node-subtitle {
    color: #1D2F4E;
}

[data-theme="light"] .node-lead-role {
    color: #1D2F4E;
    border: 1px solid #D4C9A0;
}

/* ── Light Theme: Branch Connector ── */
[data-theme="light"] .branch-stem {
    background: #DBBA5C;
}

[data-theme="light"] .branch-bar {
    background: linear-gradient(90deg, transparent, #DBBA5C 15%, #DBBA5C 85%, transparent);
}

[data-theme="light"] .branch-drop {
    background: #DBBA5C;
}

[data-theme="light"] .branch-drop::after {
    border-right: 1.5px solid #DBBA5C;
    border-bottom: 1.5px solid #DBBA5C;
}

/* ── Light Theme: Sub-Agent Nodes ── */
[data-theme="light"] .node-sub-agent {
    background: linear-gradient(135deg, #F5F4F2 0%, #EFEDE9 100%);
    border: 1px solid #DDD9D0;
}

[data-theme="light"] .node-sub-agent:hover {
    border-color: #C0BAB0;
    box-shadow: 0 8px 30px #D0CCC4;
}

[data-theme="light"] .node-icon.sub-icon {
    background: #EFEDE9;
    border: 1px solid #D0CCC4;
}

[data-theme="light"] .icon-color-gold { color: #B09830; border-color: #FFFFFF !important; background: #F5EDD4 !important; }
[data-theme="light"] .icon-color-rose { color: #DBBA5C; border-color: #D4B0B8 !important; background: #F5E8EB !important; }
[data-theme="light"] .icon-color-stone { color: #FFFFFF; border-color: #C8C0B8 !important; background: #F0EDE8 !important; }
[data-theme="light"] .icon-color-navy { color: #1D2F4E; border-color: #A0B8D0 !important; background: #E8EEF5 !important; }
[data-theme="light"] .icon-color-sage { color: #5A7A64; border-color: #A0C0A8 !important; background: #E8F2EB !important; }
[data-theme="light"] .icon-color-ivory { color: #FFFFFF; border-color: #D0C8C0 !important; background: #F0EDE8 !important; }

[data-theme="light"] .node-sub-agent .node-subtitle {
    color: #FFFFFF;
}

[data-theme="light"] .sub-responsibilities li {
    color: #1D2F4E;
    border-bottom: 1px solid #E8E4DC;
}

[data-theme="light"] .sub-responsibilities li::before {
    background: #C0BAB0;
}

/* ── Light Theme: Manifesto ── */
[data-theme="light"] .manifesto::before {
    background: #B09830;
}

[data-theme="light"] .manifesto::after {
    background: #D4C9A0;
}

[data-theme="light"] .manifesto-lead {
    color: #1D2F4E;
}

[data-theme="light"] .manifesto-lead em {
    color: #B09830;
}

[data-theme="light"] .m-statement {
    border-left: 1px solid #E8E4DC;
}

[data-theme="light"] .m-statement:hover {
    background: #FAF8F2;
}

[data-theme="light"] .m-statement.accent-gold { border-left-color: #B09830; }
[data-theme="light"] .m-statement.accent-rose { border-left-color: #DBBA5C; }
[data-theme="light"] .m-statement.accent-stone { border-left-color: #1D2F4E; }

[data-theme="light"] .m-text-title {
    color: #1D2F4E;
}

[data-theme="light"] .m-text-desc {
    color: #1D2F4E;
}

[data-theme="light"] .manifesto-closing {
    color: #B09830;
}

[data-theme="light"] .manifesto-pillar {
    background: #FAF8F2;
    border: 1px solid #E8E0CC;
}

[data-theme="light"] .manifesto-pillar:hover {
    background: #F5F0E0;
    border-color: #FFFFFF;
}

[data-theme="light"] .manifesto-pillar-title {
    color: #1D2F4E;
}

[data-theme="light"] .manifesto-pillar-desc {
    color: #1D2F4E;
}

/* ── Light Theme: Appointment Section ── */
[data-theme="light"] .appt-kicker {
    color: #B09830;
}

[data-theme="light"] .appt-title {
    color: #1D2F4E;
}

[data-theme="light"] .appt-title em { color: #B09830; }

[data-theme="light"] .appt-subtitle {
    color: #1D2F4E;
}

[data-theme="light"] .appt-node.node-shayher {
    background: linear-gradient(135deg, #F5F2EC 0%, #EFECE5 100%);
    border: 1px solid #D4C9A0;
}

[data-theme="light"] .appt-node.node-shayher::before {
    background: linear-gradient(135deg, #D4C9A0, #E8E4DC);
}

[data-theme="light"] .appt-node.node-msl {
    background: linear-gradient(135deg, #F0F4F8 0%, #E4EBF2 100%);
    border: 1px solid #D4C9A0;
    box-shadow: 0 0 30px #D0DCE4, inset 0 1px 0 #D8E4EC;
}

[data-theme="light"] .appt-node.node-msl::before {
    background: linear-gradient(135deg, #D4C9A0, #EFECE5);
}

[data-theme="light"] .appt-node.node-network {
    background: linear-gradient(135deg, #F5F4F2 0%, #EFEDE9 100%);
    border: 1px solid #DDD9D0;
}

[data-theme="light"] .appt-node-label { color: #1D2F4E; }
[data-theme="light"] .appt-node-name { color: #1D2F4E; }
[data-theme="light"] .appt-node.node-msl .appt-node-name { color: #1D2F4E; }
[data-theme="light"] .appt-node.node-msl .appt-node-label { color: #1D2F4E; }
[data-theme="light"] .appt-node-desc { color: #1D2F4E; }

[data-theme="light"] .appt-connector-line {
    background: linear-gradient(to bottom, #D4C9A0, #E8E0CC);
}

[data-theme="light"] .appt-connector-line-bottom {
    background: linear-gradient(to bottom, #E8E0CC, #D4C9A0);
}

[data-theme="light"] .appt-connector-badge.badge-form6 {
    background: #FAF8F2;
    border: 1.5px solid #D4C9A0;
}

[data-theme="light"] .appt-connector-badge.badge-sub {
    background: #F5F4F2;
    border: 1.5px solid #D0CCC4;
}

[data-theme="light"] .badge-form6 .appt-badge-title { color: #B09830; }
[data-theme="light"] .badge-sub .appt-badge-title { color: #FFFFFF; }
[data-theme="light"] .appt-badge-desc { color: #1D2F4E; }

[data-theme="light"] .appt-connector.connector-network .appt-connector-line {
    background: linear-gradient(to bottom, #C8C0B8, #DDD9D0);
}

[data-theme="light"] .appt-connector.connector-network .appt-connector-line-bottom {
    background: linear-gradient(to bottom, #DDD9D0, #C8C0B8);
}

[data-theme="light"] .appt-network-card {
    background: #F5F4F2;
    border: 1px solid #DDD9D0;
}

[data-theme="light"] .appt-network-card-name { color: #1D2F4E; }
[data-theme="light"] .appt-network-card-type { color: #1D2F4E; }

[data-theme="light"] .appt-fan-stem { background: #D0CCC4; }
[data-theme="light"] .appt-fan-bar { background: #DDD9D0; }
[data-theme="light"] .appt-fan-drop { background: #DDD9D0; }

[data-theme="light"] .appt-note {
    background: #FAF8F2;
    border: 1px solid #E8E0CC;
}

[data-theme="light"] .appt-note p { color: #1D2F4E; }
[data-theme="light"] .appt-note em { color: #B09830; }

/* ── Light Theme: Vault Section ── */
[data-theme="light"] .vault-kicker { color: #B09830; }
[data-theme="light"] .vault-title { color: #1D2F4E; }
[data-theme="light"] .vault-title em { color: #B09830; }
[data-theme="light"] .vault-subtitle { color: #1D2F4E; }

[data-theme="light"] .vault-pillar.pillar-marketing {
    background: linear-gradient(135deg, #FBF8F0, #FAF8F2);
    border: 1px solid #D4C9A0;
}

[data-theme="light"] .vault-pillar.pillar-marketing::before {
    background: linear-gradient(to right, #B09830, #E8E0CC);
}

[data-theme="light"] .vault-pillar.pillar-project {
    background: linear-gradient(135deg, #FAF5F7, #F8F4F5);
    border: 1px solid #D4B0B8;
}

[data-theme="light"] .vault-pillar.pillar-project::before {
    background: linear-gradient(to right, #C4A0A8, #E8D8DC);
}

[data-theme="light"] .vault-pillar.pillar-lots {
    background: linear-gradient(135deg, #F7F6F4, #F5F4F2);
    border: 1px solid #C8C0B8;
}

[data-theme="light"] .vault-pillar.pillar-lots::before {
    background: linear-gradient(to right, #A69E94, #DDD9D0);
}

[data-theme="light"] .vault-pillar:hover {
    box-shadow: 0 12px 40px #D0CCC4;
}

[data-theme="light"] .vault-pillar-icon.vi-gold {
    background: #F5EDD4;
    border: 1px solid #D4C9A0;
}

[data-theme="light"] .vault-pillar-icon.vi-rose {
    background: #F5E8EB;
    border: 1px solid #D4B0B8;
}

[data-theme="light"] .vault-pillar-icon.vi-stone {
    background: #F0EDE8;
    border: 1px solid #C8C0B8;
}

[data-theme="light"] .vault-pillar-title { color: #1D2F4E; }
[data-theme="light"] .vault-pillar-desc { color: #1D2F4E; }

[data-theme="light"] .vault-asset-list li {
    color: #1D2F4E;
    border-bottom: 1px solid #E8E4DC;
}

[data-theme="light"] .vault-lot-detail {
    background: #F5F4F2;
    border: 1px dashed #C8C0B8;
}

[data-theme="light"] .vault-lot-detail-item { color: #1D2F4E; }
[data-theme="light"] .vault-lot-detail-item::before { background: #C0BAB0; }

[data-theme="light"] .vault-access-bar {
    background: linear-gradient(135deg, #FBF8F0, #F5EDD4);
    border: 1.5px solid #D4C9A0;
}

[data-theme="light"] .vault-access-icon {
    background: #F5EDD4;
    border: 1px solid #D4C9A0;
}

[data-theme="light"] .vault-access-desc { color: #1D2F4E; }
[data-theme="light"] .vault-access-desc em { color: #1D2F4E; }

[data-theme="light"] .vault-chip.chip-dev {
    background: #F8F0F2;
    border: 1px solid #D4B0B8;
}

[data-theme="light"] .vault-chip.chip-lead {
    background: #FAF8F0;
    border: 1px solid #D4C9A0;
}

[data-theme="light"] .vault-chip.chip-network {
    background: #F5F4F2;
    border: 1px solid #C8C0B8;
}

[data-theme="light"] .vault-note {
    background: #FAF8F2;
    border: 1px solid #E8E0CC;
}

[data-theme="light"] .vault-note p { color: #1D2F4E; }
[data-theme="light"] .vault-note em { color: #B09830; }

/* ── Light Theme: Contract Flow ── */
[data-theme="light"] .cf-kicker { color: #B09830; }
[data-theme="light"] .cf-title { color: #1D2F4E; }
[data-theme="light"] .cf-title em { color: #B09830; }
[data-theme="light"] .cf-subtitle { color: #1D2F4E; }

[data-theme="light"] .cf-step:not(:last-child)::after {
    background: linear-gradient(to right, #D4C9A0, #E8E0CC);
}

[data-theme="light"] .cf-step:not(:last-child)::before {
    border-right: 1px solid #D4C9A0;
    border-top: 1px solid #D4C9A0;
}

[data-theme="light"] .cf-step-number.gold-step {
    background: #F5EDD4;
    border: 1.5px solid #D4C9A0;
    color: #B09830;
}

[data-theme="light"] .cf-step-number.stone-step {
    background: #F0EDE8;
    border: 1.5px solid #C8C0B8;
    color: #FFFFFF;
}

[data-theme="light"] .cf-step-number.rose-step {
    background: #F5E8EB;
    border: 1.5px solid #D4B0B8;
    color: #DBBA5C;
}

[data-theme="light"] .cf-step-who.who-network {
    color: #FFFFFF;
    background: #F0EDE8;
    border: 1px solid #C8C0B8;
}

[data-theme="light"] .cf-step-who.who-lead {
    color: #B09830;
    background: #FAF8F2;
    border: 1px solid #D4C9A0;
}

[data-theme="light"] .cf-step-who.who-developer {
    color: #DBBA5C;
    background: #FAF5F7;
    border: 1px solid #D4B0B8;
}

[data-theme="light"] .cf-step-who.who-buyer {
    color: #1D2F4E;
    background: #EEF2F8;
    border: 1px solid #A0B8D0;
}

[data-theme="light"] .cf-step-title { color: #1D2F4E; }
[data-theme="light"] .cf-step-desc { color: #1D2F4E; }

[data-theme="light"] .cf-running-note {
    background: #F5F4F2;
    border: 1px solid #DDD9D0;
}

[data-theme="light"] .cf-running-note-icon {
    background: #F0EDE8;
    border: 1px solid #C8C0B8;
}

[data-theme="light"] .cf-running-note p { color: #1D2F4E; }
[data-theme="light"] .cf-running-note p em { color: #FFFFFF; }

[data-theme="light"] .cf-relationship-bar {
    background: #F5F4F2;
    border: 1px solid #DDD9D0;
}

[data-theme="light"] .cf-relationship-bar::before {
    background: #A69E94;
}

[data-theme="light"] .cf-rel-icon {
    background: #F0EDE8;
    border: 1px solid #C8C0B8;
}

[data-theme="light"] .cf-rel-text { color: #1D2F4E; }
[data-theme="light"] .cf-rel-text em { color: #1D2F4E; }

[data-theme="light"] .cf-continuous-bar {
    background: #F5F4F2;
    border: 1px dashed #C8C0B8;
}

[data-theme="light"] .cf-continuous-bar svg { stroke: #A69E94; }
[data-theme="light"] .cf-continuous-label { color: #1D2F4E; }

/* ── Light Theme: Commission Section ── */
[data-theme="light"] .comm-kicker { color: #B09830; }
[data-theme="light"] .comm-title { color: #1D2F4E; }
[data-theme="light"] .comm-title em { color: #B09830; }
[data-theme="light"] .comm-subtitle { color: #1D2F4E; }

[data-theme="light"] .comm-card.card-lead {
    background: linear-gradient(135deg, #FBF8F0, #F5EDD4);
    border: 1.5px solid #D4C9A0;
}

[data-theme="light"] .comm-card.card-lead::before {
    background: linear-gradient(to right, #B09830, #E8E0CC);
}

[data-theme="light"] .comm-card.card-network {
    background: linear-gradient(135deg, #F7F6F4, #F5F4F2);
    border: 1.5px solid #C8C0B8;
}

[data-theme="light"] .comm-card.card-network::before {
    background: linear-gradient(to right, #A69E94, #DDD9D0);
}

[data-theme="light"] .comm-card:hover {
    box-shadow: 0 12px 40px #D0CCC4;
}

[data-theme="light"] .comm-card-scenario { color: #1D2F4E; }
[data-theme="light"] .comm-card-heading { color: #1D2F4E; }
[data-theme="light"] .comm-card-sub { color: #1D2F4E; }

[data-theme="light"] .comm-row {
    border-bottom: 1px solid #E8E4DC;
}

[data-theme="light"] .comm-row-icon.icon-gold {
    background: #F5EDD4;
    border: 1px solid #D4C9A0;
}

[data-theme="light"] .comm-row-icon.icon-stone {
    background: #F0EDE8;
    border: 1px solid #C8C0B8;
}

[data-theme="light"] .comm-row-label { color: #1D2F4E; }
[data-theme="light"] .comm-row-detail { color: #1D2F4E; }
[data-theme="light"] .comm-row-gst { color: #1D2F4E; }

[data-theme="light"] .comm-total {
    border-top: 1px solid #DDD9D0;
}

[data-theme="light"] .comm-total-label { color: #1D2F4E; }
[data-theme="light"] .comm-total-rate.total-stone { color: #1D2F4E; }

[data-theme="light"] .comm-overrider-note {
    background: #FAF8F2;
    border: 1px solid #E8E0CC;
}

[data-theme="light"] .comm-overrider-note p { color: #1D2F4E; }

[data-theme="light"] .comm-platforms {
    border-top: 1px solid #E8E4DC;
}

[data-theme="light"] .comm-platforms-label { color: #B09830; }
[data-theme="light"] .comm-platform-item { color: #1D2F4E; }

/* ── Light Theme: Developer Value ── */
[data-theme="light"] .dv-kicker { color: #B09830; }
[data-theme="light"] .dv-title { color: #1D2F4E; }
[data-theme="light"] .dv-title em { color: #B09830; }
[data-theme="light"] .dv-subtitle { color: #1D2F4E; }

[data-theme="light"] .dv-task {
    background: #FAF8F2;
    border: 1px solid #E8E0CC;
}

[data-theme="light"] .dv-task:hover {
    background: #F5F0E0;
    border-color: #FFFFFF;
    box-shadow: 0 4px 16px #E0D8C0;
}

[data-theme="light"] .dv-task-hours {
    background: #F5EDD4;
    border: 1px solid #D4C9A0;
}

[data-theme="light"] .dv-task-hours-num { color: #B09830; }
[data-theme="light"] .dv-task-hours-label { color: #1D2F4E; }
[data-theme="light"] .dv-task-title { color: #1D2F4E; }
[data-theme="light"] .dv-task-desc { color: #1D2F4E; }

[data-theme="light"] .dv-time-summary {
    background: linear-gradient(135deg, #FBF8F0, #F5EDD4);
    border: 1.5px solid #D4C9A0;
}

[data-theme="light"] .dv-time-summary::before {
    background: linear-gradient(to right, #B09830, #E8E0CC);
}

[data-theme="light"] .dv-time-stat-num { color: #B09830; }
[data-theme="light"] .dv-time-stat-label { color: #1D2F4E; }
[data-theme="light"] .dv-time-stat-sub { color: #1D2F4E; }
[data-theme="light"] .dv-time-divider { background: #D4C9A0; }

[data-theme="light"] .dv-time-bar-label { color: #1D2F4E; }

[data-theme="light"] .dv-time-bar-track {
    background: #EFECE5;
}

[data-theme="light"] .dv-time-bar-fill.fill-freed {
    background: linear-gradient(to right, #F0E8C8, #E0D4A0);
    color: #8A7020;
}

[data-theme="light"] .dv-time-bar-fill.fill-remain {
    background: #F0E0E4;
    color: #DBBA5C;
}

[data-theme="light"] .dv-time-context { color: #1D2F4E; }
[data-theme="light"] .dv-time-context em { color: #B09830; }

/* ── Light Theme: Financial Case ── */
[data-theme="light"] .fin-kicker { color: #B09830; }
[data-theme="light"] .fin-title { color: #1D2F4E; }
[data-theme="light"] .fin-title em { color: #B09830; }
[data-theme="light"] .fin-subtitle { color: #1D2F4E; }

[data-theme="light"] .fin-col.col-without {
    background: #FAF5F7;
    border: 1px solid #D4B0B8;
}

[data-theme="light"] .fin-col.col-without::before {
    background: linear-gradient(to right, #C4A0A8, #E8D8DC);
}

[data-theme="light"] .fin-col.col-with {
    background: linear-gradient(135deg, #FBF8F0, #F5EDD4);
    border: 1.5px solid #D4C9A0;
}

[data-theme="light"] .fin-col.col-with::before {
    background: linear-gradient(to right, #B09830, #E8E0CC);
}

[data-theme="light"] .fin-vs-badge {
    background: #EFECE5;
    border: 1px solid #DDD9D0;
    color: #1D2F4E;
}

[data-theme="light"] .fin-col-scenario { color: #1D2F4E; }
[data-theme="light"] .fin-col-heading { color: #1D2F4E; }

[data-theme="light"] .fin-line {
    border-bottom: 1px solid #E8E4DC;
}

[data-theme="light"] .fin-line-label { color: #1D2F4E; }
[data-theme="light"] .fin-line-label small { color: #1D2F4E; }
[data-theme="light"] .fin-line-val.val-muted { color: #1D2F4E; }

[data-theme="light"] .fin-total-line {
    border-top: 1px solid #DDD9D0;
}

[data-theme="light"] .fin-total-label { color: #1D2F4E; }
[data-theme="light"] .fin-total-per-yr { color: #1D2F4E; }

[data-theme="light"] .fin-savings-result {
    background: linear-gradient(135deg, #FAF8F2, #F5EDD4);
    border: 1.5px solid #D4C9A0;
}

[data-theme="light"] .fin-savings-context { color: #1D2F4E; }
[data-theme="light"] .fin-savings-context strong { color: #1D2F4E; }

[data-theme="light"] .fin-bonus-item {
    background: #FAF8F2;
    border: 1px solid #E8E0CC;
}

[data-theme="light"] .fin-bonus-label { color: #1D2F4E; }
[data-theme="light"] .fin-disclaimer { color: #1D2F4E; }

/* ── Light Theme: Legend ── */
[data-theme="light"] .legend-line.dashed {
    border-top: 2px dashed #C8C0B8;
}

[data-theme="light"] .legend-text { color: #1D2F4E; }

/* ── Light Theme: Annotation ── */
[data-theme="light"] .annotation {
    background: #FAF8F2;
    border: 1px solid #E8E0CC;
}

[data-theme="light"] .annotation p { color: #1D2F4E; }

/* ── Light Theme: Footer ── */
[data-theme="light"] .page-footer {
    border-top: 1px solid #E8E4DC;
}

[data-theme="light"] .footer-logo { color: #B09830; }
[data-theme="light"] .footer-tagline { color: #1D2F4E; }

/* ── Light Theme: Print ── */
@media print {

}


/* ═══════════════════════════════════════
   SECTION BACKGROUND BANDS — Light Theme
   ═══════════════════════════════════════ */

/* Full-width band mixin via pseudo-element */
.band-navy,
.band-ivory {
    position: relative;
    z-index: 1;
}
.band-navy::before,
.band-ivory::before {
    content: '';
    position: absolute;
    top: -40px;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    z-index: -1;
    pointer-events: none;
}

/* Navy band */
.band-navy::before {
    background: #1D2F4E;
}

/* Ivory band */
.band-ivory::before {
    background: #F5F0E6;
}

/* ── Navy band: Light theme text overrides ── */
[data-theme="light"] .band-navy .tier-label-text {
    color: #FFFFFF;
    background: #1D2F4E;
}

[data-theme="light"] .band-navy .arm {
    background: #243B55;
    border-color: #1D2F4E;
}

[data-theme="light"] .band-navy .arm:hover {
    background: #2D4565;
    border-color: #FFFFFF;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

[data-theme="light"] .band-navy .arm.msl-arm {
    background: #243B55;
    border-color: #DBBA5C;
}

[data-theme="light"] .band-navy .arm.msl-arm:hover {
    background: #2D4565;
    border-color: #DBBA5C;
    box-shadow: 0 4px 20px rgba(219,186,92,0.15);
}

[data-theme="light"] .band-navy .arm-title {
    color: #FFFFFF;
}

[data-theme="light"] .band-navy .arm-desc {
    color: #FFFFFF;
}

[data-theme="light"] .band-navy .arm-icon.gold-icon {
    background: #2E3427;
    border-color: #DBBA5C;
}

[data-theme="light"] .band-navy .arm-icon.rose-icon {
    background: #3A2F35;
    border-color: #FFFFFF;
}

[data-theme="light"] .band-navy .arm-icon.navy-icon {
    background: #2A3D56;
    border-color: #FFFFFF;
}

[data-theme="light"] .band-navy .node-developer {
    background: linear-gradient(135deg, #243B55 0%, #1D2F4E 100%);
    border-color: #DBBA5C;
    box-shadow: 0 0 40px rgba(219,186,92,0.1);
}

[data-theme="light"] .band-navy .node-developer::before {
    background: linear-gradient(135deg, #DBBA5C, #3D3524);
}

[data-theme="light"] .band-navy .node-icon.developer-icon {
    background: #2E3427;
    border-color: #DBBA5C;
}

[data-theme="light"] .band-navy .node-title {
    color: #FFFFFF;
}

[data-theme="light"] .band-navy .node-subtitle {
    color: #DBBA5C;
}

[data-theme="light"] .band-navy .node-desc {
    color: #FFFFFF;
}

[data-theme="light"] .band-navy .arm-connector::before {
    background: #3A5575;
}

/* ── Navy band: Contract Flow overrides ── */
[data-theme="light"] .band-navy .cf-step-title {
    color: #FFFFFF;
}

[data-theme="light"] .band-navy .cf-step-desc {
    color: #FFFFFF;
}

[data-theme="light"] .band-navy .cf-step-number.gold-step {
    background: #2E3427;
    border-color: #DBBA5C;
    color: #DBBA5C;
}

[data-theme="light"] .band-navy .cf-step-number.stone-step {
    background: #282726;
    border-color: #484644;
    color: #1D2F4E;
}

[data-theme="light"] .band-navy .cf-step-number.rose-step {
    background: #3A2F35;
    border-color: #FFFFFF;
    color: #DBBA5C;
}

[data-theme="light"] .band-navy .cf-step-who.who-lead {
    color: #DBBA5C;
    background: #2E3427;
    border-color: #DBBA5C;
}

[data-theme="light"] .band-navy .cf-step-who.who-network {
    color: #1D2F4E;
    background: #282726;
    border-color: #484644;
}

[data-theme="light"] .band-navy .cf-step-who.who-developer {
    color: #DBBA5C;
    background: #3A2F35;
    border-color: #FFFFFF;
}

[data-theme="light"] .band-navy .cf-step-who.who-buyer {
    color: #FFFFFF;
    background: #1A2840;
    border-color: #1D2F4E;
}

[data-theme="light"] .band-navy .cf-step:not(:last-child)::after {
    background: linear-gradient(to right, #3D3524, #2A3D56);
}

[data-theme="light"] .band-navy .cf-step:not(:last-child)::before {
    border-right-color: #DBBA5C;
    border-top-color: #DBBA5C;
}

[data-theme="light"] .band-navy .cf-running-note {
    background: #162236;
    border-color: #1D2F4E;
}

[data-theme="light"] .band-navy .cf-running-note-icon {
    background: #243B55;
    border-color: #FFFFFF;
}

[data-theme="light"] .band-navy .cf-running-note p {
    color: #FFFFFF;
}

[data-theme="light"] .band-navy .cf-running-note p em {
    color: #1D2F4E;
}

[data-theme="light"] .band-navy .cf-relationship-bar {
    background: #162236;
    border-color: #1D2F4E;
}

[data-theme="light"] .band-navy .cf-relationship-bar::before {
    background: #A69E94;
}

[data-theme="light"] .band-navy .cf-rel-icon {
    background: #243B55;
    border-color: #FFFFFF;
}

[data-theme="light"] .band-navy .cf-rel-label {
    color: #1D2F4E;
}

[data-theme="light"] .band-navy .cf-rel-text {
    color: #FFFFFF;
}

[data-theme="light"] .band-navy .cf-rel-text em {
    color: #FFFFFF;
}

[data-theme="light"] .band-navy .cf-continuous-bar {
    background: #162236;
    border-color: #1D2F4E;
}

[data-theme="light"] .band-navy .cf-continuous-bar svg {
    stroke: #A69E94;
}

[data-theme="light"] .band-navy .cf-continuous-label {
    color: #FFFFFF;
}

[data-theme="light"] .band-navy .cf-kicker {
    color: #DBBA5C;
}

[data-theme="light"] .band-navy .cf-title {
    color: #FFFFFF;
}

[data-theme="light"] .band-navy .cf-title em {
    color: #DBBA5C;
}

[data-theme="light"] .band-navy .cf-subtitle {
    color: #FFFFFF;
}

/* ── Navy band: Developer Value overrides ── */
[data-theme="light"] .band-navy .dv-kicker {
    color: #DBBA5C;
}

[data-theme="light"] .band-navy .dv-title {
    color: #FFFFFF;
}

[data-theme="light"] .band-navy .dv-title em {
    color: #DBBA5C;
}

[data-theme="light"] .band-navy .dv-subtitle {
    color: #FFFFFF;
}

[data-theme="light"] .band-navy .dv-task {
    background: #243B55;
    border-color: #1D2F4E;
}

[data-theme="light"] .band-navy .dv-task:hover {
    background: #2D4565;
    border-color: #FFFFFF;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

[data-theme="light"] .band-navy .dv-task-hours {
    background: #2E3427;
    border-color: #DBBA5C;
}

[data-theme="light"] .band-navy .dv-task-hours-num {
    color: #DBBA5C;
}

[data-theme="light"] .band-navy .dv-task-hours-label {
    color: #FFFFFF;
}

[data-theme="light"] .band-navy .dv-task-title {
    color: #FFFFFF;
}

[data-theme="light"] .band-navy .dv-task-desc {
    color: #FFFFFF;
}

[data-theme="light"] .band-navy .dv-time-summary {
    background: linear-gradient(135deg, #243B55, #1D2F4E);
    border-color: #DBBA5C;
}

[data-theme="light"] .band-navy .dv-time-summary::before {
    background: linear-gradient(to right, #DBBA5C, #3D3524);
}

[data-theme="light"] .band-navy .dv-time-stat-num {
    color: #DBBA5C;
}

[data-theme="light"] .band-navy .dv-time-stat-label {
    color: #FFFFFF;
}

[data-theme="light"] .band-navy .dv-time-stat-sub {
    color: #FFFFFF;
}

[data-theme="light"] .band-navy .dv-time-divider {
    background: #3A5575;
}

[data-theme="light"] .band-navy .dv-time-bar-label {
    color: #FFFFFF;
}

[data-theme="light"] .band-navy .dv-time-bar-track {
    background: #162236;
}

[data-theme="light"] .band-navy .dv-time-bar-fill.fill-freed {
    background: linear-gradient(to right, #2E3427, #4A4B30);
    color: #DBBA5C;
}

[data-theme="light"] .band-navy .dv-time-bar-fill.fill-remain {
    background: #3A2F35;
    color: #DBBA5C;
}

[data-theme="light"] .band-navy .dv-time-context {
    color: #FFFFFF;
}

[data-theme="light"] .band-navy .dv-time-context em {
    color: #DBBA5C;
}

/* ── Ivory band overrides (minimal — most styles already work) ── */
[data-theme="light"] .band-ivory .manifesto-lead {
    color: #1D2F4E;
}

[data-theme="light"] .band-ivory .m-statement:hover {
    background: #EDE8DC;
}

[data-theme="light"] .band-ivory .manifesto-pillar {
    background: #FFFFFF;
    border-color: #FFFFFF;
}

[data-theme="light"] .band-ivory .manifesto-pillar:hover {
    background: #FAF8F2;
    border-color: #FFFFFF;
}

/* Ivory band vault */
[data-theme="light"] .band-ivory .vault-pillar {
    background: #FFFFFF;
    border-color: #FFFFFF;
}

[data-theme="light"] .band-ivory .vault-pillar:hover {
    background: #FAF8F2;
    border-color: #FFFFFF;
}

/* Ivory band financial */
[data-theme="light"] .band-ivory .fin-col.col-without {
    background: #FFFFFF;
}

[data-theme="light"] .band-ivory .fin-col.col-with {
    background: linear-gradient(135deg, #FFFFFF, #FAF8F2);
}

[data-theme="light"] .band-ivory .fin-savings-result {
    background: linear-gradient(135deg, #FFFFFF, #FAF8F2);
}

[data-theme="light"] .band-ivory .fin-bonus-item {
    background: #FFFFFF;
    border-color: #FFFFFF;
}

[data-theme="light"] .band-ivory .annotation {
    background: #FFFFFF;
    border-color: #FFFFFF;
}

/* ── Dark theme: bands just use dark equivalents ── */
.band-navy::before {
    background: #111B2B;
}

.band-ivory::before {
    background: #0A1019;
}

[data-theme="light"] .band-navy::before {
    background: #1D2F4E;
}

[data-theme="light"] .band-ivory::before {
    background: #F5F0E6;
}

/* Padding for banded sections */
.band-navy,
.band-ivory {
    padding-top: 20px;
    padding-bottom: 20px;
}


/* ═══════════════════════════════════════
   TIER 1 REDESIGN — Layout 03 / Colour 08
   ═══════════════════════════════════════ */

/* Node */
.t1-node{text-align:center;margin:0 auto 32px;max-width:560px}
.t1-node-inner{padding:28px 28px;border-radius:8px;background:linear-gradient(135deg,#1D2F4E 0%,#2A4A6E 100%);border:1.5px solid #DBBA5C;box-shadow:0 8px 40px rgba(29,47,78,0.2);position:relative}
.t1-node-inner::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#DBBA5C,transparent);border-radius:8px 8px 0 0}
.t1-node-name{font-family:'Cormorant Garamond',serif;font-size:clamp(20px,2vw,28px);font-weight:400;color:#DBBA5C;margin-bottom:10px}
.t1-node-desc{font-size:14px;line-height:1.7;color:#FFFFFF}

/* Branch */
.t1-branch{display:flex;flex-direction:column;align-items:center;margin-bottom:28px}
.t1-branch-stem{width:2px;height:28px;background:#DBBA5C}
.t1-branch-bar{height:2px;width:75%;max-width:1060px;background:linear-gradient(90deg,transparent,#DBBA5C 15%,#DBBA5C 85%,transparent)}

/* Grid */
.t1-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:1060px;margin:0 auto}
.t1-card{padding:16px;background:#FBF8F0;border:1px solid #E8E0CC;border-radius:6px;transition:all 0.3s ease}
.t1-card:hover{border-color:#DBBA5C;background:#F5EDD4;box-shadow:0 6px 20px rgba(219,186,92,0.1);transform:translateY(-3px)}

/* Concentric Rings */
.t1-card-header{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.t1-rings{width:14px;height:14px;border-radius:50%;border:1.5px solid #DBBA5C;display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative}
.t1-rings::before{content:'';width:8px;height:8px;border-radius:50%;border:1px solid rgba(219,186,92,0.5)}
.t1-rings::after{content:'';position:absolute;width:3px;height:3px;border-radius:50%;background:#DBBA5C}

.t1-card-title{font-size:14px;font-weight:600;color:#1D2F4E}
.t1-card-desc{font-size:11px;line-height:1.6;color:#1D2F4E;padding-left:22px}

/* Connector */
.t1-conn-line{width:2px;height:28px;background:#DBBA5C;box-shadow:0 0 6px rgba(219,186,92,0.2)}
.t1-conn-arrow{width:8px;height:8px;border-right:1.5px solid #DBBA5C;border-bottom:1.5px solid #DBBA5C;transform:rotate(45deg);margin-top:-4px}

/* Light theme overrides (already on white bg, minimal needed) */
[data-theme="light"] #tier-developer .tier-label-text {
    color: #B09830;
    background: transparent;
}

/* Responsive */
@media (max-width: 900px) {
    .t1-grid { grid-template-columns: repeat(2, 1fr); }
}


/* ═══════════════════════════════════════
   TIER 2 REDESIGN — Layout 03 / Colour 08
   ═══════════════════════════════════════ */

/* Node */
.t2-node{text-align:center;margin:0 auto 32px;max-width:500px}
.t2-node-inner{padding:28px 28px;border-radius:8px;background:linear-gradient(135deg,#1D2F4E 0%,#2A4A6E 100%);border:1.5px solid #DBBA5C;box-shadow:0 8px 40px rgba(29,47,78,0.2);position:relative}
.t2-node-inner::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#DBBA5C,transparent);border-radius:8px 8px 0 0}
.t2-node-name{font-family:'Cormorant Garamond',serif;font-size:clamp(20px,2vw,28px);font-weight:400;color:#DBBA5C;margin-bottom:2px}
.t2-node-role{font-size:9px;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;color:#FFFFFF;margin-bottom:8px}
.t2-node-framework{font-size:9px;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;color:#FFFFFF;padding:5px 14px;border:1px solid rgba(255,255,255,0.12);border-radius:4px;display:inline-block;margin-bottom:12px}
.t2-node-desc{font-size:14px;line-height:1.7;color:#FFFFFF}

/* Branch */
.t2-branch{display:flex;flex-direction:column;align-items:center;margin-bottom:28px}
.t2-branch-stem{width:2px;height:28px;background:#DBBA5C}
.t2-branch-bar{height:2px;width:90%;max-width:1300px;background:linear-gradient(90deg,transparent,#DBBA5C 10%,#DBBA5C 90%,transparent)}

/* Grid — 2 columns for 14 items */
.t2-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;max-width:1300px;margin:0 auto}
.t2-card{padding:16px;background:#FBF8F0;border:1px solid #E8E0CC;border-radius:6px;transition:all 0.3s ease}
.t2-card:hover{border-color:#DBBA5C;background:#F5EDD4;box-shadow:0 6px 20px rgba(219,186,92,0.1);transform:translateY(-3px)}

/* Concentric Rings */
.t2-card-header{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.t2-rings{width:14px;height:14px;border-radius:50%;border:1.5px solid #DBBA5C;display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative}
.t2-rings::before{content:'';width:8px;height:8px;border-radius:50%;border:1px solid rgba(219,186,92,0.5)}
.t2-rings::after{content:'';position:absolute;width:3px;height:3px;border-radius:50%;background:#DBBA5C}

.t2-card:nth-last-child(2){grid-column:3}
.t2-card:nth-last-child(1){grid-column:4}

.t2-card-title{font-size:14px;font-weight:600;color:#1D2F4E}
.t2-card-desc{font-size:11px;line-height:1.6;color:#1D2F4E;padding-left:22px}

/* Light theme label */
[data-theme="light"] #tier-lead-agent .tier-label-text {
    color: #B09830;
    background: transparent;
}

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


/* ═══════════════════════════════════════
   TIER 3 — Layout 5 Deep Luxe Glass Cards
   White section, navy glass cards, ALL SOLID text colours
   ═══════════════════════════════════════ */
.t3-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;max-width:1300px;margin:0 auto}

/* ─── T2→T3 CONNECTOR (unique, no conflicts) ─── */
.t2t3-connector{display:flex;flex-direction:column;align-items:center;padding:24px 0 0;max-width:1300px;margin:0 auto}
.t2t3-stem{width:2px;height:28px;background:#DBBA5C}
.t2t3-rail{width:100%;max-width:1300px;height:2px;background:#DBBA5C}
.t2t3-drops{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;width:100%;max-width:1300px}
.t2t3-drop{position:relative;display:flex;flex-direction:column;align-items:center;padding-bottom:8px}
.t2t3-drop::before{content:'';display:block;width:2px;height:24px;background:#DBBA5C}
.t2t3-drop::after{content:'';display:block;width:8px;height:8px;border-right:1.5px solid #DBBA5C;border-bottom:1.5px solid #DBBA5C;transform:rotate(45deg);margin-top:-4px}
.t3-card{padding:16px;background:linear-gradient(135deg,#1D2F4E 0%,#2A4A6E 100%);border:1.5px solid #DBBA5C;border-radius:8px;text-align:center;transition:all 0.3s ease}
.t3-card:hover{border-color:#DBBA5C;transform:translateY(-3px);box-shadow:0 8px 24px rgba(29,47,78,0.3)}
.t3-globe{width:36px;height:36px;border-radius:50%;border:1.5px solid #DBBA5C;color:#DBBA5C;display:flex;align-items:center;justify-content:center;margin:0 auto 10px}
.t3-globe svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}
.t3-card-agent{font-size:14px;font-weight:600;color:#FFFFFF;margin-bottom:2px}
.t3-card-type{font-size:9px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:#DBBA5C;margin-bottom:10px}
.t3-list{list-style:none;padding:0;text-align:left}
.t3-list li{font-size:11px;line-height:1.5;color:#FFFFFF;display:flex;gap:6px;margin-bottom:4px}
.t3-list li::before{content:"";width:4px;height:4px;border-radius:50%;background:#DBBA5C;flex-shrink:0;margin-top:5px}

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


/* Network Standards — centred list, gold gradient bar bullets */
.t3-standards{text-align:center;padding:40px 0 10px;max-width:860px;margin:0 auto}
.t3-standards-title{font-size:18px;font-weight:600;letter-spacing:4px;text-transform:uppercase;color:#1D2F4E;margin-bottom:20px}
.t3-standards-list{display:flex;flex-direction:column;gap:10px;align-items:center}
.t3-std{display:flex;align-items:center;gap:12px}
.t3-gold-bar{width:18px;height:3px;border-radius:2px;background:linear-gradient(90deg,#DBBA5C,rgba(219,186,92,0.3));flex-shrink:0}
.t3-std-text{font-size:14px;font-weight:500;color:#1D2F4E;text-align:left;line-height:1.5}



/* ════════════════════════════════════════
   CONTRACT FLOW — REDESIGNED
   ════════════════════════════════════════ */
:root {
    --navy: #1D2F4E;
    --navy-deep: #0D1520;
    --navy-light: #2A3D56;
    --gold: #DBBA5C;
    --gold-dark: #B09830;
    --gold-pale: #E8D48A;
    --rose: #C4A0A8;
    --stone: #A69E94;
    --ivory: #F5F0E6;
    --ivory-warm: #FAFAF8;
    --white: #FFFFFF;
    --font-display: 'Cormorant Garamond', serif;
    --font-body: 'Montserrat', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--font-body);
    background: var(--ivory-warm);
    color: var(--navy);
}

/* ═══════════════════════════════════════
   SECTION
   ═══════════════════════════════════════ */
.contract-section {
    padding: 80px 40px;
    background: var(--ivory-warm);
}

/* ═══════════════════════════════════════
   HEADER
   ═══════════════════════════════════════ */
.cf-head {
    text-align: center;
    max-width: 860px;
    margin: 0 auto 56px;
}
.cf-head .kicker {
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--gold-dark);
    margin-bottom: 14px;
}
.cf-head h2 {
    font-family: var(--font-display);
    font-size: clamp(24px, 2.5vw, 36px);
    font-weight: 400;
    color: var(--navy);
    line-height: 1.2;
    margin-bottom: 18px;
}
.cf-head h2 em {
    color: var(--gold-dark);
    font-style: italic;
}
.cf-head .intro {
    font-size: 16px;
    font-weight: 400;
    color: #1D2F4E;
    line-height: 1.85;
    max-width: 780px;
    margin: 0 auto;
}

/* ═══════════════════════════════════════
   BUYER RELATIONSHIP STATEMENTS
   ═══════════════════════════════════════ */
.cf-statements {
    max-width: 860px;
    margin: 56px auto 0;
    display: flex;
    flex-direction: column;
    gap: 36px;
}
.cf-statement {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}
.cf-statement-bar {
    width: 24px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, #DBBA5C, #B09830);
    flex-shrink: 0;
    margin-top: 10px;
}
.cf-statement-content {
    flex: 1;
}
.cf-statement-heading {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    color: #1D2F4E;
    letter-spacing: 0.3px;
    margin-bottom: 8px;
}
.cf-statement-text {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    color: #1D2F4E;
    line-height: 1.85;
}

/* ═══════════════════════════════════════
   DUAL ROW GRID
   ═══════════════════════════════════════ */
.flow-wrap {
    max-width: 1300px;
    margin: 0 auto;
}

.flow-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    position: relative;
    margin-bottom: 52px;
}

/* ─── STEP ─── */
.flow-step {
    text-align: center;
    padding: 0 14px;
    position: relative;
}

/* ─── ARROW CONNECTOR ─── */
.flow-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 27px;
    left: calc(50% + 32px);
    width: calc(100% - 64px);
    height: 1.5px;
    background: linear-gradient(to right, var(--gold), rgba(219,186,92,0.3));
}
.flow-step:not(:last-child)::before {
    content: '';
    position: absolute;
    top: 23px;
    right: 12px;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid var(--gold-dark);
    border-top: 1.5px solid var(--gold-dark);
    transform: rotate(45deg);
    z-index: 2;
}

/* ─── NUMBERED CIRCLE ─── */
.flow-num {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 500;
    position: relative;
    z-index: 2;
    background: linear-gradient(135deg, #0D1520, #1D2F4E);
    border: 1.5px solid rgba(219,186,92,0.45);
    color: var(--gold);
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(13,21,32,0.3), inset 0 1px 0 rgba(255,255,255,0.05);
}
/* Outer ring */
.flow-num::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1px solid rgba(219,186,92,0.18);
}

.flow-step:hover .flow-num {
    background: linear-gradient(135deg, #1D2F4E, #2A3D56);
    color: var(--gold);
    border-color: var(--gold);
    transform: scale(1.06);
    box-shadow: 0 6px 24px rgba(13,21,32,0.4), 0 0 20px rgba(219,186,92,0.15), inset 0 1px 0 rgba(255,255,255,0.08);
}

/* ─── WHO BADGE ─── */
.flow-who {
    display: inline-block;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 3px;
    margin-bottom: 10px;
    background: rgba(219,186,92,0.22);
    border: 1px solid rgba(219,186,92,0.4);
    color: var(--navy);
    backdrop-filter: blur(6px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -1px 0 rgba(219,186,92,0.1);
}

/* ─── TEXT ─── */
.flow-title {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 8px;
    line-height: 1.35;
}
.flow-desc {
    font-size: 14px;
    font-weight: 400;
    color: #1D2F4E;
    line-height: 1.75;
}

/* ═══════════════════════════════════════
   ROW BRIDGE (row 1 → row 2)
   ═══════════════════════════════════════ */
.row-bridge {
    display: flex;
    justify-content: center;
    margin-bottom: 52px;
    position: relative;
}
.row-bridge::before {
    content: '';
    width: 1.5px;
    height: 36px;
    background: linear-gradient(to bottom, var(--gold), rgba(219,186,92,0.2));
}
.row-bridge::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 7px;
    height: 7px;
    border-right: 1.5px solid var(--gold-dark);
    border-bottom: 1.5px solid var(--gold-dark);
}

/* ════════════════════════════════════════
   APPOINTMENT STRUCTURE — REDESIGNED
   ════════════════════════════════════════ */
:root {
    --navy: #1D2F4E;
    --navy-deep: #0D1520;
    --navy-light: #2A3D56;
    --gold: #DBBA5C;
    --gold-dark: #B09830;
    --rose: #C4A0A8;
    --stone: #A69E94;
    --ivory: #F5F0E6;
    --ivory-warm: #FAFAF8;
    --white: #FFFFFF;
    --font-display: 'Cormorant Garamond', serif;
    --font-body: 'Montserrat', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--font-body);
    background: var(--ivory-warm);
    color: var(--navy);
}

/* ═══════════════════════════════════════
   SECTION
   ═══════════════════════════════════════ */
.appt-section {
    padding: 80px 40px;
    background: var(--ivory-warm);
}

/* ═══════════════════════════════════════
   HEADER
   ═══════════════════════════════════════ */
.appt-head {
    text-align: center;
    max-width: 860px;
    margin: 0 auto 24px;
}
.appt-head .kicker {
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--gold-dark);
    margin-bottom: 14px;
}
.appt-head h2 {
    font-family: var(--font-display);
    font-size: clamp(24px, 2.5vw, 36px);
    font-weight: 400;
    color: var(--navy);
    line-height: 1.2;
    margin-bottom: 16px;
}
.appt-head h2 em {
    color: var(--gold-dark);
    font-style: italic;
}
.appt-head .intro {
    font-size: 16px;
    font-weight: 400;
    color: #1D2F4E;
    line-height: 1.85;
}

/* ═══════════════════════════════════════
   BODY COPY
   ═══════════════════════════════════════ */
.appt-body-copy {
    text-align: center;
    max-width: 960px;
    margin: 0 auto 48px;
    font-size: 16px;
    font-weight: 400;
    color: #1D2F4E;
    line-height: 1.85;
}

/* ═══════════════════════════════════════
   HIERARCHY WRAPPER
   ═══════════════════════════════════════ */
.hierarchy {
    max-width: 1060px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ═══════════════════════════════════════
   TIER CARDS (Shayher & MSL)
   Deep Luxe Navy Glass
   ═══════════════════════════════════════ */
.tier-card {
    width: 100%;
    max-width: 560px;
    padding: 32px 36px 28px;
    background: linear-gradient(135deg, #1D2F4E 0%, #2A4A6E 100%);
    border: 1.5px solid #DBBA5C;
    border-radius: 6px;
    text-align: center;
    box-shadow: 0 8px 32px rgba(29,47,78,0.2);
    position: relative;
}
.tier-card-shayher { max-width: 560px; }
.tier-card-msl { max-width: 460px; }

.tier-card .tier-label {
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 8px;
}

.tier-card .tier-name {
    font-family: var(--font-display);
    font-size: clamp(20px, 2vw, 28px);
    font-weight: 400;
    color: #FFFFFF;
    margin-bottom: 14px;
    line-height: 1.2;
}

.tier-card .tier-desc {
    font-size: 14px;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 1.75;
    max-width: 460px;
    margin: 0 auto;
}

/* ═══════════════════════════════════════
   GOLD VERTICAL CONNECTOR
   ═══════════════════════════════════════ */
.connector {
    width: 2px;
    height: 40px;
    background: #DBBA5C;
    position: relative;
}
.connector::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 8px;
    height: 8px;
    border-right: 1.5px solid #DBBA5C;
    border-bottom: 1.5px solid #DBBA5C;
}

/* ═══════════════════════════════════════
   BRANCH CONNECTOR (MSL → 6 agents)
   ═══════════════════════════════════════ */
.branch-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 1060px;
    position: relative;
    padding: 36px 0 12px;
}

/* Vertical stem down from MSL */
.branch-stem {
    width: 2px;
    height: 28px;
    background: #DBBA5C;
}

/* Horizontal rail */
.branch-rail {
    width: 100%;
    max-width: 1060px;
    height: 2px;
    background: #DBBA5C;
    position: relative;
}

/* 6 vertical drops from rail */
.branch-drops {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    width: 100%;
    max-width: 1060px;
}
.branch-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.branch-drop-line {
    width: 2px;
    height: 20px;
    background: #DBBA5C;
    position: relative;
}
.branch-drop-line::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 8px;
    height: 8px;
    border-right: 1.5px solid #DBBA5C;
    border-bottom: 1.5px solid #DBBA5C;
}

/* ═══════════════════════════════════════
   AGENT BOXES
   Gold Glassmorphism — Solid fill, navy text
   ═══════════════════════════════════════ */
.agent-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    width: 100%;
    max-width: 1060px;
    margin-top: 12px;
}

.agent-box {
    text-align: center;
    padding: 28px 14px 24px;
    background: linear-gradient(135deg, #1D2F4E 0%, #2A4A6E 100%);
    border: 1.5px solid #DBBA5C;
    border-radius: 6px;
    box-shadow: 0 6px 24px rgba(29,47,78,0.15);
    transition: all 0.3s ease;
}
.agent-box:hover {
    box-shadow: 0 8px 32px rgba(29,47,78,0.25);
    transform: translateY(-2px);
}

.agent-box .agent-title {
    font-family: var(--font-display);
    font-size: clamp(16px, 1.5vw, 20px);
    font-weight: 400;
    color: #FFFFFF;
    line-height: 1.25;
    margin-bottom: 6px;
}
.agent-box .agent-type {
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 600;
    color: #DBBA5C;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* ═══════════════════════════════════════
   BOTTOM DISCLAIMER
   Subtle navy glass
   ═══════════════════════════════════════ */
.appt-disclaimer {
    max-width: 860px;
    margin: 56px auto 0;
    padding: 0 32px;
    text-align: center;
}
.appt-disclaimer p {
    font-family: var(--font-display);
    font-size: clamp(20px, 2vw, 28px);
    font-weight: 400;
    color: #B09830;
    line-height: 1.7;
    font-style: italic;
}
.appt-disclaimer strong {
    color: #1D2F4E;
    font-weight: 600;
}

/* ════════════════════════════════════════
   THE VAULT — REDESIGNED
   ════════════════════════════════════════ */
:root {
    --navy: #1D2F4E;
    --navy-deep: #0D1520;
    --navy-light: #2A3D56;
    --gold: #DBBA5C;
    --gold-dark: #B09830;
    --gold-pale: #E8D48A;
    --rose: #C4A0A8;
    --stone: #A69E94;
    --ivory: #F5F0E6;
    --ivory-warm: #FAFAF8;
    --white: #FFFFFF;
    --font-display: 'Cormorant Garamond', serif;
    --font-body: 'Montserrat', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--font-body);
    background: var(--ivory-warm);
    color: #1D2F4E;
}

/* ═══════════════════════════════════════
   SECTION
   ═══════════════════════════════════════ */
.vault-section {
    padding: 80px 40px;
    background: var(--ivory-warm);
}

/* ═══════════════════════════════════════
   HEADER
   ═══════════════════════════════════════ */
.vault-head {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}
.vault-head .kicker {
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #B09830;
    margin-bottom: 14px;
}
.vault-head h2 {
    font-family: var(--font-display);
    font-size: clamp(24px, 2.5vw, 36px);
    font-weight: 400;
    font-style: italic;
    color: #1D2F4E;
    line-height: 1.2;
    margin-bottom: 18px;
}
.vault-head .intro {
    font-size: 16px;
    font-weight: 400;
    color: #1D2F4E;
    line-height: 1.85;
}

/* ═══════════════════════════════════════
   THREE PILLAR CARDS
   ═══════════════════════════════════════ */
.pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1100px;
    margin: 0 auto 40px;
    align-items: stretch;
}

.pillar-card {
    background: #FFFFFF;
    border: 1.5px solid #DBBA5C;
    border-radius: 4px;
    padding: 28px 26px 26px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}
.pillar-card:hover {
    box-shadow: 0 6px 24px rgba(29,47,78,0.06);
}

/* Icon — Deep luxe navy glass circle */
.pillar-icon {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: linear-gradient(135deg, #1D2F4E, #2A4A6E);
    border: 1px solid #DBBA5C;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    box-shadow: 0 3px 12px rgba(13,21,32,0.15);
}
.pillar-icon svg {
    width: 20px;
    height: 20px;
    stroke: #DBBA5C;
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pillar-label {
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #B09830;
    margin-bottom: 6px;
}

.pillar-title {
    font-family: var(--font-display);
    font-size: clamp(20px, 2vw, 28px);
    font-weight: 400;
    color: #1D2F4E;
    line-height: 1.25;
    margin-bottom: 12px;
}

.pillar-desc {
    font-size: 16px;
    font-weight: 400;
    color: #1D2F4E;
    line-height: 1.85;
    margin-bottom: 18px;
    flex-grow: 1;
}

/* Item list */
.pillar-list {
    list-style: none;
    padding: 0;
    border-top: 1.5px solid #DBBA5C;
    padding-top: 14px;
    margin-top: auto;
}
.pillar-list li {
    font-size: 11px;
    font-weight: 500;
    color: #1D2F4E;
    padding: 5px 0;
    padding-left: 18px;
    position: relative;
    line-height: 1.4;
}
.pillar-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 11px;
    width: 8px;
    height: 8px;
    border: 1px solid #DBBA5C;
    border-radius: 2px;
}

/* Folder summary box in Pillar 3 */
.folder-summary {
    margin-top: 16px;
    padding: 14px 16px;
    background: #FFFFFF;
    border: 1px solid #DBBA5C;
    border-radius: 4px;
}
.folder-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 16px;
}
.folder-grid span {
    font-size: 11px;
    font-weight: 500;
    color: #1D2F4E;
    padding-left: 12px;
    position: relative;
    line-height: 1.6;
}
.folder-grid span::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #DBBA5C;
}

/* ═══════════════════════════════════════
   CONTROLLED ACCESS BAR
   ═══════════════════════════════════════ */
.access-bar {
    max-width: 1100px;
    margin: 0 auto 20px;
    padding: 24px 30px;
    background: #FFFFFF;
    border: 1.5px solid #DBBA5C;
    border-radius: 4px;
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 18px;
    align-items: center;
}

.access-icon {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: linear-gradient(135deg, #1D2F4E, #2A4A6E);
    border: 1px solid #DBBA5C;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 12px rgba(13,21,32,0.15);
}
.access-icon svg {
    width: 18px;
    height: 18px;
    stroke: #DBBA5C;
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.access-text .access-heading {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    color: #B09830;
    margin-bottom: 4px;
    letter-spacing: 0.3px;
}
.access-text p {
    font-size: 16px;
    font-weight: 400;
    color: #1D2F4E;
    line-height: 1.85;
}
.access-text strong {
    font-weight: 600;
    color: #1D2F4E;
}

/* Access level badges — gold glassmorphism, navy text */
.access-badges {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.access-badge {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 3px;
    background: #FFFFFF;
    border: 1px solid #DBBA5C;
    color: #1D2F4E;
}

/* ═══════════════════════════════════════
   BOTTOM DISCLAIMER
   ═══════════════════════════════════════ */
.vault-disclaimer {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 32px;
    background: linear-gradient(135deg, #1D2F4E 0%, #2A4A6E 100%);
    border: 1.5px solid #DBBA5C;
    border-radius: 4px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(13,21,32,0.1);
}
.vault-disclaimer p {
    font-size: 14px;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 1.8;
    max-width: 780px;
    margin: 0 auto;
}
.vault-disclaimer strong {
    color: #DBBA5C;
    font-weight: 600;
}

/* ════════════════════════════════════════
   COMMISSION STRUCTURE — REDESIGNED
   ════════════════════════════════════════ */
.comm-section { padding: 80px 40px; background: var(--ivory-warm); }
.comm-head { text-align: center; max-width: 800px; margin: 0 auto 48px; }
.comm-head .kicker { font-family: var(--font-body); font-size: 18px; font-weight: 600; letter-spacing: 4px; text-transform: uppercase; color: #B09830; margin-bottom: 14px; }
.comm-head h2 { font-family: var(--font-display); font-size: clamp(24px, 2.5vw, 36px); font-weight: 400; color: #1D2F4E; line-height: 1.2; margin-bottom: 16px; }
.comm-head h2 em { color: #B09830; font-style: italic; }
.comm-head .intro { font-size: 16px; font-weight: 400; color: #1D2F4E; line-height: 1.85; }
.comm-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 1100px; margin: 0 auto 40px; }
.comm-card { background: #FFFFFF; border-radius: 4px; padding: 28px 26px 24px; }
.comm-card.card-navy { border: 1.5px solid #1D2F4E; }
.comm-card.card-gold { border: 1.5px solid #DBBA5C; }
.comm-scenario { font-family: var(--font-body); font-size: 9px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; margin-bottom: 6px; }
.card-navy .comm-scenario { color: #1D2F4E; }
.card-gold .comm-scenario { color: #B09830; }
.comm-card-title { font-family: var(--font-display); font-size: clamp(20px, 2vw, 28px); font-weight: 400; color: #1D2F4E; margin-bottom: 10px; }
.comm-card-desc { font-size: 16px; font-weight: 400; color: #1D2F4E; line-height: 1.85; margin-bottom: 20px; }
.comm-line { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid rgba(166,158,148,0.12); }
.comm-line:last-of-type { border-bottom: none; }
.comm-line-left { display: flex; align-items: center; gap: 12px; }
.comm-icon { width: 36px; height: 36px; border-radius: 6px; background: linear-gradient(135deg, #0D1520, #1D2F4E); border: 1px solid rgba(219,186,92,0.3); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(13,21,32,0.12), inset 0 1px 0 rgba(255,255,255,0.04); flex-shrink: 0; }
.comm-icon svg { width: 16px; height: 16px; stroke: #DBBA5C; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.comm-line-label { font-size: 16px; font-weight: 600; color: #1D2F4E; }
.comm-line-detail { font-size: 14px; font-weight: 400; color: #1D2F4E; margin-top: 1px; }
.comm-line-rate { font-family: var(--font-display); font-size: clamp(20px, 2vw, 28px); font-weight: 400; color: #1D2F4E; flex-shrink: 0; }
.comm-line-rate .gst { font-family: var(--font-body); font-size: 11px; font-weight: 500; color: #1D2F4E; margin-left: 4px; }
.comm-total-row { display: flex; justify-content: space-between; align-items: baseline; padding-top: 16px; margin-top: 8px; border-top: 1.5px solid rgba(29,47,78,0.1); }
.comm-total-label { font-family: var(--font-body); font-size: 9px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; color: #1D2F4E; }
.comm-total-rate { font-family: var(--font-display); font-size: 42px; font-weight: 400; font-style: italic; color: #B09830; }
.comm-total-rate .gst { font-family: var(--font-body); font-size: 11px; font-weight: 500; color: #1D2F4E; font-style: normal; margin-left: 4px; }
.comm-note { max-width: 1100px; margin: 0 auto 16px; padding: 24px 28px; background: #FFFFFF; border: 1px solid rgba(166,158,148,0.15); border-left: 3px solid #DBBA5C; border-radius: 4px; }
.comm-note p { font-size: 16px; font-weight: 400; color: #1D2F4E; line-height: 1.85; margin-bottom: 14px; }
.comm-note p:last-child { margin-bottom: 0; }
.comm-note strong { font-weight: 600; color: #1D2F4E; }
.comm-note-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; margin-top: 12px; }
.comm-note-item { font-size: 11px; font-weight: 400; color: #1D2F4E; padding: 3px 0 3px 14px; position: relative; line-height: 1.4; }
.comm-note-item::before { content: ''; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: #DBBA5C; }

/* Dashboards list inside Scenario One */
.comm-dashboards { margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(29,47,78,0.08); }
.comm-dash-heading { font-family: var(--font-body); font-size: 9px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; color: #1D2F4E; margin-bottom: 12px; }
.comm-dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; }
.comm-dash-item { font-size: 11px; font-weight: 400; color: #1D2F4E; padding: 3px 0 3px 14px; position: relative; line-height: 1.4; }
.comm-dash-item::before { content: ''; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: #1D2F4E; }


/* ════════════════════════════════════════
   DEVELOPER VALUE — REDESIGNED
   ════════════════════════════════════════ */
:root {
    --navy: #1D2F4E;
    --navy-deep: #0D1520;
    --navy-light: #2A3D56;
    --gold: #DBBA5C;
    --gold-dark: #B09830;
    --rose: #C4A0A8;
    --stone: #A69E94;
    --ivory: #F5F0E6;
    --ivory-warm: #FAFAF8;
    --white: #FFFFFF;
    --font-display: 'Cormorant Garamond', serif;
    --font-body: 'Montserrat', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--font-body);
    background: var(--ivory-warm);
    color: #1D2F4E;
}

/* ═══════════════════════════════════════
   SECTION
   ═══════════════════════════════════════ */
.dev-section {
    padding: 80px 40px;
    background: var(--ivory-warm);
}

/* ═══════════════════════════════════════
   HEADER
   ═══════════════════════════════════════ */
.dev-head {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 48px;
}
.dev-head .kicker {
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #B09830;
    margin-bottom: 14px;
}
.dev-head h2 {
    font-family: var(--font-display);
    font-size: clamp(24px, 2.5vw, 36px);
    font-weight: 400;
    color: #1D2F4E;
    line-height: 1.2;
    margin-bottom: 18px;
}
.dev-head h2 em {
    color: #B09830;
    font-style: italic;
}
.dev-head .intro {
    font-size: 16px;
    font-weight: 400;
    color: #1D2F4E;
    line-height: 1.85;
}

/* ═══════════════════════════════════════
   TASK GRID — 2 columns, 6 rows
   ═══════════════════════════════════════ */
.task-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    max-width: 1100px;
    margin: 0 auto 40px;
}

.task-card {
    display: grid;
    grid-template-columns: 62px 1fr;
    gap: 14px;
    align-items: start;
    padding: 20px 22px;
    background: #FFFFFF;
    border: 1.5px solid #1D2F4E;
    border-radius: 4px;
    transition: all 0.3s ease;
}
.task-card:hover {
    border-color: #DBBA5C;
    box-shadow: 0 4px 16px rgba(29,47,78,0.08);
}

/* Hours badge — Deep luxe navy glass */
.task-hours {
    width: 62px;
    height: 62px;
    border-radius: 6px;
    background: linear-gradient(135deg, #1D2F4E, #2A4A6E);
    border: 1px solid #DBBA5C;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 12px rgba(13,21,32,0.15);
    flex-shrink: 0;
}
.task-hours .hrs-num {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 400;
    color: #DBBA5C;
    line-height: 1;
}
.task-hours .hrs-label {
    font-family: var(--font-body);
    font-size: 7px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #FFFFFF;
    margin-top: 2px;
}

.task-body {}
.task-title {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 600;
    color: #1D2F4E;
    margin-bottom: 4px;
    line-height: 1.3;
}
.task-desc {
    font-size: 14px;
    font-weight: 400;
    color: #1D2F4E;
    line-height: 1.75;
}

/* ═══════════════════════════════════════
   SUMMARY BAR — Navy glass
   ═══════════════════════════════════════ */
.summary-bar {
    max-width: 1100px;
    margin: 0 auto 16px;
    padding: 28px 36px;
    background: linear-gradient(135deg, #1D2F4E 0%, #2A4A6E 100%);
    border: 1.5px solid #DBBA5C;
    border-radius: 4px;
    display: grid;
    grid-template-columns: auto auto 1fr;
    gap: 0;
    align-items: center;
    box-shadow: 0 6px 24px rgba(13,21,32,0.12);
}

.stat-block {
    text-align: center;
    padding: 0 36px;
}
.stat-block:first-child {
    border-right: 1px solid #DBBA5C;
}
.stat-block:nth-child(2) {
    border-right: 1px solid #DBBA5C;
}

.stat-num {
    font-family: var(--font-display);
    font-size: 42px;
    font-weight: 400;
    font-style: italic;
    color: #DBBA5C;
    line-height: 1;
    margin-bottom: 4px;
}
.stat-label {
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #FFFFFF;
}
.stat-sub {
    font-size: 11px;
    font-weight: 400;
    color: #1D2F4E;
    margin-top: 2px;
}

/* Capacity bar */
.capacity-block {
    padding: 0 36px;
}
.capacity-label {
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #FFFFFF;
    margin-bottom: 10px;
}
.capacity-track {
    display: flex;
    height: 28px;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #DBBA5C;
}
.capacity-freed {
    flex: 4;
    background: rgba(219,186,92,0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #DBBA5C;
}
.capacity-approvals {
    flex: 1;
    background: rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #FFFFFF;
    border-left: 1px solid #DBBA5C;
}

/* ═══════════════════════════════════════
   BOTTOM LINE
   ═══════════════════════════════════════ */
.dev-bottom {
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
    padding: 20px 32px;
    font-size: 14px;
    font-weight: 400;
    color: #1D2F4E;
    line-height: 1.8;
}
.dev-bottom strong {
    font-weight: 600;
    color: #1D2F4E;
    text-decoration: underline;
    text-decoration-color: #DBBA5C;
    text-underline-offset: 3px;
}
.dev-bottom em {
    color: #B09830;
    font-style: italic;
    font-family: var(--font-display);
    font-size: 16px;
}

/* ════════════════════════════════════════
   FINANCIAL CASE — REDESIGNED
   ════════════════════════════════════════ */
:root {
    --navy: #1D2F4E;
    --navy-deep: #0D1520;
    --navy-light: #2A3D56;
    --gold: #DBBA5C;
    --gold-dark: #B09830;
    --rose: #C4A0A8;
    --stone: #A69E94;
    --ivory: #F5F0E6;
    --ivory-warm: #FAFAF8;
    --white: #FFFFFF;
    --font-display: 'Cormorant Garamond', serif;
    --font-body: 'Montserrat', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--font-body);
    background: var(--ivory-warm);
    color: #1D2F4E;
}

/* ═══════════════════════════════════════
   SECTION
   ═══════════════════════════════════════ */
.fin-section {
    padding: 80px 40px;
    background: var(--ivory-warm);
}

/* ═══════════════════════════════════════
   HEADER
   ═══════════════════════════════════════ */
.fin-head {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 48px;
}
.fin-head .kicker {
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #B09830;
    margin-bottom: 14px;
}
.fin-head h2 {
    font-family: var(--font-display);
    font-size: clamp(24px, 2.5vw, 36px);
    font-weight: 400;
    color: #1D2F4E;
    line-height: 1.2;
    margin-bottom: 18px;
}
.fin-head h2 em {
    color: #B09830;
    font-style: italic;
}
.fin-head .intro {
    font-size: 16px;
    font-weight: 400;
    color: #1D2F4E;
    line-height: 1.85;
}

/* ═══════════════════════════════════════
   COMPARISON PANELS
   ═══════════════════════════════════════ */
.comparison {
    display: grid;
    grid-template-columns: 1fr 48px 1fr;
    gap: 0;
    max-width: 1100px;
    margin: 0 auto 40px;
    align-items: start;
}

/* Individual panel */
.panel {
    background: var(--white);
    border-radius: 4px;
    padding: 32px 30px 28px;
}

/* LEFT panel — navy border */
.panel.left {
    border: 1.5px solid var(--navy);
}

/* Right panel — gold border */
.panel.right {
    border: 1.5px solid var(--gold);
}

/* Panel header label */
.panel-label {
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.panel.left .panel-label {
    color: #1D2F4E;
}
.panel.right .panel-label {
    color: #B09830;
}

.panel-title {
    font-family: var(--font-display);
    font-size: clamp(20px, 2vw, 28px);
    font-weight: 400;
    color: #1D2F4E;
    margin-bottom: 24px;
    line-height: 1.25;
}

/* Line items */
.line-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 12px 0;
    border-bottom: 1px solid rgba(166,158,148,0.1);
}
.line-item:last-of-type {
    border-bottom: none;
}

.line-left {}
.line-name {
    font-size: 16px;
    font-weight: 500;
    color: #1D2F4E;
    line-height: 1.3;
}
.line-sub {
    font-size: 14px;
    font-weight: 400;
    color: #1D2F4E;
    margin-top: 2px;
    line-height: 1.75;
}

.line-amount {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 400;
    color: #1D2F4E;
    flex-shrink: 0;
    margin-left: 20px;
}

/* Highlight row for overrider */
.line-item.highlight {
    background: rgba(29,47,78,0.03);
    margin: 0 -30px;
    padding: 12px 30px;
    border-bottom: 1px solid rgba(166,158,148,0.1);
}

/* Total row */
.panel-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-top: 18px;
    margin-top: 6px;
    border-top: 1.5px solid rgba(29,47,78,0.1);
}
.total-label {
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #1D2F4E;
}
.total-amount {
    text-align: right;
}
.total-num {
    font-family: var(--font-display);
    font-size: clamp(20px, 2vw, 28px);
    font-weight: 400;
    font-style: italic;
    color: #B09830;
    line-height: 1;
}
.total-per {
    font-size: 11px;
    font-weight: 400;
    color: #1D2F4E;
    margin-top: 2px;
}

/* VS divider */
.vs-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
}
.vs-badge {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0D1520, #1D2F4E);
    border: 1.5px solid rgba(219,186,92,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #DBBA5C;
    box-shadow: 0 4px 16px rgba(13,21,32,0.2), inset 0 1px 0 rgba(255,255,255,0.04);
}

/* Annual overrider result box */
.overrider-result {
    margin-top: 12px;
    padding: 16px 20px;
    background: var(--white);
    border: 1px solid rgba(166,158,148,0.15);
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.overrider-result-label {
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #1D2F4E;
}
.overrider-result-amount {
    text-align: right;
}
.overrider-result-num {
    font-family: var(--font-display);
    font-size: clamp(20px, 2vw, 28px);
    font-weight: 400;
    font-style: italic;
    color: #B09830;
    line-height: 1;
}
.overrider-result-per {
    font-size: 11px;
    font-weight: 400;
    color: #1D2F4E;
    margin-top: 2px;
}

/* ═══════════════════════════════════════
   SAVINGS BLOCK — Navy glass
   ═══════════════════════════════════════ */
.savings-block {
    max-width: 1100px;
    margin: 0 auto 16px;
    padding: 36px 40px 32px;
    background: linear-gradient(135deg, #1D2F4E 0%, #2A4A6E 100%);
    border: 1.5px solid #DBBA5C;
    border-radius: 4px;
    text-align: center;
    box-shadow: 0 6px 24px rgba(13,21,32,0.12);
}

.savings-kicker {
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #DBBA5C;
    margin-bottom: 10px;
}

.savings-num {
    font-family: var(--font-display);
    font-size: 42px;
    font-weight: 400;
    font-style: italic;
    color: #DBBA5C;
    line-height: 1;
    margin-bottom: 16px;
}

.savings-desc {
    font-size: 14px;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 1.8;
    max-width: 700px;
    margin: 0 auto 28px;
}
.savings-desc strong {
    font-weight: 600;
    color: #FFFFFF;
}

/* 4-stat row */
.savings-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-top: 1px solid #DBBA5C;
    padding-top: 24px;
}
.savings-stat {
    text-align: center;
    padding: 0 16px;
    border-right: 1px solid rgba(219,186,92,0.3);
}
.savings-stat:last-child {
    border-right: none;
}
.savings-stat-num {
    font-family: var(--font-display);
    font-size: clamp(20px, 2vw, 28px);
    font-weight: 400;
    font-style: italic;
    color: #DBBA5C;
    line-height: 1;
    margin-bottom: 6px;
}
.savings-stat-label {
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #FFFFFF;
    line-height: 1.5;
}

/* ═══════════════════════════════════════
   DISCLAIMER
   ═══════════════════════════════════════ */
.fin-disclaimer {
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
    padding: 16px 32px;
    font-size: 9px;
    font-weight: 400;
    font-style: italic;
    color: #1D2F4E;
    line-height: 1.7;
}

/* ════════════════════════════════════════
   CLOSING FOOTER — REDESIGNED
   ════════════════════════════════════════ */
:root {
    --navy: #1D2F4E;
    --gold: #DBBA5C;
    --gold-dark: #B09830;
    --stone: #A69E94;
    --ivory-warm: #FAFAF8;
    --font-display: 'Cormorant Garamond', serif;
    --font-body: 'Montserrat', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--font-body);
    background: var(--ivory-warm);
    color: #1D2F4E;
}

/* ═══════════════════════════════════════
   CLOSING STATEMENT
   ═══════════════════════════════════════ */
.closing {
    padding: 80px 40px 48px;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}

.closing-rule {
    width: 64px;
    height: 2px;
    background: #DBBA5C;
    margin: 0 auto 48px;
}

.closing p {
    font-family: var(--font-display);
    font-size: clamp(24px, 2.5vw, 32px);
    font-weight: 400;
    color: #1D2F4E;
    line-height: 1.7;
}

.closing p em {
    color: #B09830;
    font-style: italic;
}

/* ═══════════════════════════════════════
   MSL FOOTER
   ═══════════════════════════════════════ */
.msl-footer {
    padding: 48px 40px 60px;
    text-align: center;
    border-top: 1px solid #A69E94;
    margin-top: 40px;
}

.msl-footer .msl-name {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: #1D2F4E;
    margin-bottom: 4px;
}

.msl-footer .msl-sub {
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #A69E94;
}