/* ==========================================================
   EquityVoyage — Journey Layout + Components (single file)
   ========================================================== */

:root{
    --ev-font-heading: var(--font-heading, "Playfair Display", serif);
    --ev-font-body: var(--font-body, "Inter", sans-serif);
    --ev-color-navy: var(--color-navy, #173763);
}

body{
    margin:0;
    background:#f5f7fb;
    font-family:var(--ev-font-body);
}

html{
    scroll-behavior:smooth;
}

/* ==========================================================
   Page Frame — single source of truth for centered 1440px
   content, used by Navigation, Journey Shell, and Footer
   ========================================================== */

.ev-page-frame {
    display: grid;
    grid-template-columns:
        minmax(24px, 1fr)
        minmax(0, 1440px)
        minmax(24px, 1fr);
}

.ev-page-frame > * {
    grid-column: 2;
}

/* ==========================================================
   Structural Layout
   ========================================================== */

.ev-journey-shell {
    width: 100%;
}

.ev-journey-shell-grid {
    display: grid;
    grid-template-columns: 20fr 60fr 20fr;
    gap: 24px;
    align-items: stretch;
}

.ev-col-sidebar,
.ev-col-analysis,
.ev-col-insights {
    min-width: 0;
}

.ev-col-analysis {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

#ev-banner {
    flex-shrink: 0;
}

#ev-analysis-content {
    flex: 1;
    border: 1px solid #e7e8eb;
    padding:var(--space-4, 4px) var(--space-4, 4px);
    border-radius:var(--radius-18, 18px);
}

.ev-col-sidebar,
.ev-col-insights {
    display: flex;
    flex-direction: column;
}

.ev-panel {
    box-sizing: border-box;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
    padding: var(--space-20, 20px);
    margin-top:var(--space-1, 1px);
    flex: 1; /* stretch to match the tallest column, same as #ev-analysis-content */
}

@media (max-width: 1024px) {
    .ev-journey-shell-grid {
        grid-template-columns: 1fr;
    }
    .ev-col-sidebar,
    .ev-col-analysis,
    .ev-col-insights {
        width: 100%;
    }
}

/* ==========================================================
   Navigation
   ========================================================== */

.ev-nav{
    height:60px;
    border-bottom:1px solid var(--color-border-light, #e5e7eb);
    width:100%;
}

.ev-nav-wrapper{
    position:relative;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-right:var(--space-60, 60px);
    background:var(--color-navy, #173763);
    border-radius:var(--radius-18, 18px);

}

.ev-nav-toggle{
    display:none;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:5px;
    width:36px;
    height:36px;
    border:none;
    background:transparent;
    cursor:pointer;
    padding:0;
    margin-right:var(--space-16, 16px);
}

.ev-nav-toggle-bar{
    width:22px;
    height:2px;
    background:var(--color-white, #ffffff);
    border-radius:var(--radius-1, 1px);
}

.ev-nav-left{
    display:flex;
    align-items:center;
    gap:16px;
    padding:var(--space-8, 8px) var(--space-14, 14px);
    border-radius:var(--radius-14, 14px);
    background:rgba(255,255,255,.06);
    backdrop-filter:blur(8px);
    text-decoration:none;
}

.ev-logo{

    height:36px;
    padding:var(--space-1, 1px);
    background:var(--color-white, #ffffff);
    border-radius:var(--radius-logo, 10%);
    box-shadow:
        0 3px 80px rgba(0,0,0,.25);
    transition:.25s;
}

.ev-nav-left:hover .ev-logo{

    transform:scale(1.06);
    filter:
        drop-shadow(0 6px 12px rgba(0,0,0,.40))
        drop-shadow(0 0 12px rgba(242,180,90,.35));

}

.ev-nav-right{
    display:flex;
    align-items:center;
    gap:80px;
    color:white;
}

.ev-nav-right a{
    text-decoration:none;
    color:var(--color-white, #ffffff);
    font-size:var(--font-size-12, 12px);
    font-weight:500;
    padding-bottom:var(--space-4, 4px);
    border-bottom:2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.ev-nav-right a:hover{
    color:var(--color-gold, #F2B45A);
    border-bottom-color:var(--color-gold, #F2B45A);
}

.ev-brand{
    display:flex;
    flex-direction:column;
}

.ev-brand-title{
    font-family:var(--ev-font-heading);
    font-size:var(--font-size-16, 16px);
    font-weight:700;
    color:white;
    margin-bottom:var(--space-2, 2px);
}

.ev-brand-tagline{
    font-size:var(--font-size-9, 9px);
    color:rgba(255,255,255,.78);
    line-height: 1;
    font-family:var(--ev-font-heading);
    font-weight:400;
    letter-spacing: .09em;
}

/* ==========================================================
   Sidebar
   ========================================================== */

.ev-sidebar {
    background: var(--color-navy, #173763);
    border-radius: var(--radius-18, 18px);
    padding: var(--space-20, 20px);
    overflow-y: auto;
    color: white;
    font-family: var(--ev-font-heading);
    font-size: var(--font-size-12, 12px);
    border-top:1px solid #8c9eb6;
    flex: 1; /* stretch to match the tallest column, same as #ev-analysis-content */
}

.ev-sidebar-title {
    font-size: var(--font-size-12, 12px);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .8;
    margin-bottom: var(--space-20, 20px);
}

.ev-step {
    display: flex;
    gap: 14px;
    margin-bottom: var(--space-8, 8px);
    align-items: flex-start;
    position: relative;
    z-index: 1;
}

.ev-step.active{
    background: rgba(255,255,255,.06);
    border-radius: var(--radius-12, 12px);
    padding: var(--space-10, 10px);
    margin-left: var(--space-neg-8, -8px);
    margin-right: var(--space-neg-8, -8px);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}

.ev-step-left {
    width: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.ev-step-circle {
    width: 30px;
    height: 30px;
    border-radius: var(--radius-circle, 50%);
    background: rgba(255,255,255,.10);
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}

.ev-step.active .ev-step-circle {
    background: var(--color-gold, #F2B45A);
    color: var(--color-navy, #173763);
    font-weight: 700;
    box-shadow: 0 0 0 4px rgba(242,180,90,.15);
}

.ev-step-line {
    width: 2px;
    flex: 1;
    min-height: 20px;
    background: rgba(255,255,255,.15);
}

.ev-step-text {
    flex: 1;
    padding-top: var(--space-2, 2px);
}

.ev-step-heading {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ev-step-icon {
    width: 16px;
    height: 16px;
    color: #9FB3D1;
    flex-shrink: 0;
}

.ev-step.active .ev-step-icon{
    color:var(--color-gold, #F2B45A);
}

.ev-step-title {
    font-size: var(--font-size-11, 11px);
    font-weight: 600;
}

.ev-step.active .ev-step-title{
    color:var(--color-gold, #F2B45A);
}

.ev-step-description {
    font-size: var(--font-size-10, 10px);
    opacity: .65;
    margin-top: var(--space-2, 2px);
    padding-left: var(--space-24, 24px);
    line-height: 1.1;
}

.ev-step.active .ev-step-description{
    opacity:.85;
}

/* ==========================================================
   Need Help
   ========================================================== */

.ev-help{
    margin-top:var(--space-24, 24px);
    padding-top:var(--space-20, 20px);
    border-top:1px solid rgba(255,255,255,.12);
}

.ev-help-title{
    font-size:var(--font-size-12, 12px);
    font-weight:700;
    color:var(--color-white, #ffffff);
    margin-bottom:var(--space-6, 6px);
}

/* .ev-help-subtitle{
    font-size:10px;
    color:rgba(255,255,255,.65);
    line-height:1.4;
    margin-bottom:14px;
} */

/* .ev-help-placeholder{
    height:70px;
    border:1px dashed rgba(255,255,255,.25);
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:rgba(255,255,255,.45);
    font-size:10px;
    font-style:italic;
} */

/* ==========================================================
   Journey Banner
   ========================================================== */

.ev-banner{
    position:relative;
    height:120px;
    border-radius:var(--radius-16, 16px);
    overflow:hidden;
    background:var(--color-white, #ffffff);
    box-shadow:0 2px 10px rgba(0,0,0,.05);
    border-top:1px solid #8c9eb6;
    margin-top:var(--space-1, 1px);
}

.ev-banner-image{
    position:absolute;
    inset:0;
}

.ev-banner-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position: right center;
}

.ev-banner::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,1) 0%,
            rgba(255,255,255,.92) 25%,
            rgba(255,255,255,.45) 50%,
            rgba(255,255,255,0) 60%
        );
}

.ev-banner-overlay{
    position:relative;
    z-index:2;
    height:100%;
    width:60%;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    padding:1px 1px 0 1px;
}

.ev-banner-badge{
    display:inline-flex;
    width:max-content;
    padding:var(--space-4, 4px) var(--space-10, 10px);
    border-radius:var(--radius-6, 6px);
    background:#EEF5FD;
    color:var(--color-navy, #173763);
    font-size:var(--font-size-9, 9px);
    font-weight:700;
    letter-spacing:.05em;
    text-transform:uppercase;
    margin-bottom:var(--space-4, 4px);
}

.ev-banner-title{
    margin:0 0 4px 0;
    font-family:var(--ev-font-heading);
    font-size:var(--font-size-26, 26px);
    font-weight:700;
    color:var(--color-navy, #173763);
    line-height:1.1;
}

.ev-banner-subtitle{
    margin:0;
    font-size:var(--font-size-11, 11px);
    color:#5B6675;
    line-height:1.2;
    max-width:90%;
    font-family:var(--ev-font-heading);
}

/* ==========================================================
   Footer / Trust Bar
   ========================================================== */

#ev-footer{
    margin-top:var(--space-2, 2px);
}

.ev-trustbar{
    display:flex;
    align-items:stretch;
    background:var(--color-white, #ffffff);
    border:1px solid #e7e8eb;
    border-radius:var(--radius-14, 14px);
    box-shadow:0 2px 8px rgba(0,0,0,.05);
    overflow:hidden;
}

.ev-trust-source{
    width:270px;
    flex-shrink:0;
    padding:var(--space-5, 5px) var(--space-5, 5px);
    display:flex;
    flex-direction:column;
    justify-content:center;
    border-right:1px solid var(--color-border-light, #e5e7eb);
    font-size:var(--font-size-10, 10px);
}

.ev-trust-title{
    font-size:var(--font-size-10, 10px);
    font-weight:700;
    color:var(--color-navy, #173763);
    text-transform:uppercase;
    letter-spacing:.08em;
    margin-bottom:var(--space-2, 2px);
    align-items: center;
}

.ev-trust-table{
    display:grid;
    grid-template-columns:80px 1fr;
    row-gap:1px;
    column-gap:12px;
}

.ev-trust-label{
    font-size:var(--font-size-10, 10px);
    color:var(--color-gray-muted, #6b7280);
}

.ev-trust-value{
    font-size:var(--font-size-10, 10px);
    font-weight:500;
    color:#1f2937;
}

.ev-trust-items{
    flex:1;
    display:flex;
    font-size:var(--font-size-10, 10px);
}

.ev-trust-item{
    flex:1;
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
}

.ev-trust-item:not(:last-child)::after{
    content:"";
    position:absolute;
    right:0;
    top:22%;
    height:56%;
    width:1px;
    background:var(--color-border-light, #e5e7eb);
}

.ev-trust-icon{
    width:24px;
    height:24px;
    color:var(--color-navy, #173763);
    flex-shrink:0;
}

.ev-trust-content{
    display:flex;
    flex-direction:column;
}

.ev-trust-heading{
    font-size:var(--font-size-11, 11px);
    font-weight:600;
    color:#1f2937;
    line-height:1.1;
}

.ev-trust-subtitle{
    font-size:var(--font-size-10, 10px);
    color:var(--color-gray-muted, #6b7280);
    line-height:1.1;
}

/* ==========================================================
   Key Insights
   ========================================================== */

.ev-insights{
    display:flex;
    flex-direction:column;
    gap:20px;
    
    
}

.ev-insights-title{
    font-family:var(--ev-font-heading);
    font-size:var(--font-size-12, 12px);
    font-weight:700;
    color:var(--color-navy, #173763);
    text-transform:uppercase;
}

.ev-insight{
    display:flex;
    gap:12px;
    align-items:flex-start;

}

.ev-insight-icon{
    width:36px;
    height:36px;
    border-radius:var(--radius-circle, 50%);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}

.ev-insight-icon svg{
    width:24px;
    height:24px;
}

.ev-insight-heading{
    font-size:var(--font-size-11, 11px);
    font-weight:700;
    margin-bottom:var(--space-2, 2px);
}

.ev-insight-description{
    font-size:var(--font-size-10, 10px);
    color:var(--color-gray-slate, #4b5563);
    line-height:1.1;
}

.ev-insight-note{
    margin-top:var(--space-4, 4px);
    padding:var(--space-4, 4px);
    border-radius:var(--radius-14, 14px);
    background:#FFF8F1;
    border:1px solid #F2DEC5;
}

.ev-insight-note-title{
    font-size:var(--font-size-12, 12px);
    font-weight:600;
    color:#8A5A18;
    margin-bottom:var(--space-2, 2px);
}

.ev-insight-note-description{
    font-size:var(--font-size-10, 10px);
    color:#5B5B5B;
    line-height:1.3;
}

.ev-insight-note-content{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
}

.ev-insight-note-icon{
    flex-shrink:0;
}

.ev-note-icon{
    width:36px;
    height:36px;
    color:#C98A2B;
}

/* ==========================================================
   CTA Banner (Ready to explore deeper?)
   ========================================================== */

.ev-cta-banner{
    display:flex;
    align-items:center;
    gap:2px;
    margin-top:var(--space-2, 2px);
    padding:var(--space-2, 2px) var(--space-2, 2px);
    background:var(--color-navy-banner, #0B1F3F);
    border-radius:var(--radius-16, 16px);
}

.ev-cta-icon{
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--color-gold, #F2B45A);
}

.ev-cta-icon i{
    width:8px;
    height:8px;
    color:var(--color-gold, #F2B45A);
}

.ev-cta-text{
    flex-shrink:0;
    min-width:0;
}

.ev-cta-headline{
    font-family:var(--ev-font-heading);
    font-size:var(--font-size-12, 12px);
    font-weight:700;
    color:var(--color-gold, #F2B45A);
    margin-bottom:var(--space-2, 2px);
}

.ev-cta-subtext{
    font-size:var(--font-size-10, 10px);
    color:rgba(255,255,255,.8);
    line-height:1.4;
}

.ev-cta-points{
    display:flex;
    flex:1;
    gap:2px;
    padding:0 2px;
    border-left:1px solid rgba(255,255,255,.15);
    border-right:1px solid rgba(255,255,255,.15);
}

.ev-cta-point{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:6px;
    flex:1;
    color:var(--color-gold, #F2B45A);
}

.ev-cta-point i{
    width:8px;
    height:8px;
    color:var(--color-gold, #F2B45A);
}

.ev-cta-point span{
    font-size:var(--font-size-10, 10px);
    color:rgba(255,255,255,.85);
    line-height:1.1;
}

.ev-cta-action{
    flex-shrink:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    margin-left: auto;
}

.ev-cta-button{
    display:flex;
    align-items:center;
    /* gap:8px;*/
    padding:var(--space-2, 2px) var(--space-2, 2px); 
    background:var(--color-gold, #F2B45A);
    color:var(--color-navy, #173763);
    font-size:var(--font-size-10, 10px);
    font-weight:700;
    text-decoration:none;
    border-radius:var(--radius-10, 10px);
    white-space:nowrap;
}

.ev-cta-button i{
    width:10px;
    height:10px;
}

.ev-cta-note{
    display:flex;
    align-items:center;
    gap:4px;
    font-size:var(--font-size-10, 10px);
    color:rgba(255,255,255,.6);
}

.ev-cta-note i{
    width:10px;
    height:10px;
}

/* ==========================================================
   Section Badge — shared numbered circle used at the start of
   each numbered section in Steps 2-6 (Step 1 doesn't use this
   pattern). Was copy-pasted identically per step file; now
   defined once here.
   ========================================================== */

.s2-section-num,
.s3-section-num,
.s4-section-num,
.s5-section-num,
.s6-section-num {
    position: absolute;
    left: 0;
    top: 0;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-circle, 50%);
    background: var(--ev-color-navy, #173763);
    color: var(--color-white, #fff);
    font-weight: 700;
    font-size: var(--font-size-13, 13px);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================
   Mobile — shared shell (nav, trust bar, CTA banner)
   ========================================================== */

@media (max-width: 768px) {

    /* Navigation: swap the link row for a hamburger + dropdown */
    .ev-nav-wrapper{
        padding-right:var(--space-16, 16px);
    }
    .ev-nav-toggle{
        display:flex;
    }
    .ev-nav-right{
        display:none;
        position:absolute;
        top:100%;
        left:0;
        right:0;
        flex-direction:column;
        align-items:flex-start;
        gap:0;
        background:var(--color-navy, #173763);
        border-radius:0 0 18px 18px;
        padding:var(--space-8, 8px) var(--space-20, 20px) var(--space-16, 16px);
        box-shadow:var(--shadow-dropdown, 0 12px 24px rgba(0,0,0,.18));
        z-index:50;
    }
    .ev-nav-right.is-open{
        display:flex;
    }
    .ev-nav-right a{
        width:100%;
        padding:10px 0;
        border-bottom:1px solid rgba(255,255,255,.12);
    }
    .ev-nav-right a:last-child{
        border-bottom:none;
    }

    /* Trust bar: stack the data-source box above the trust badges */
    .ev-trustbar{
        flex-direction:column;
    }
    .ev-trust-source{
        width:100%;
        border-right:none;
        border-bottom:1px solid var(--color-border-light, #e5e7eb);
    }
    .ev-trust-items{
        flex-direction:column;
    }
    .ev-trust-item{
        padding:8px 0;
        border-bottom:1px solid var(--color-border-light, #e5e7eb);
    }
    .ev-trust-item:last-child{
        border-bottom:none;
    }
    .ev-trust-item:not(:last-child)::after{
        display:none;
    }

    /* CTA banner: icon+text stay paired as a row; points and the
       action button each become their own full-width row below.
       Spacing values are unchanged from desktop (2px), only the
       flow direction changes. */
    .ev-cta-banner{
        display:grid;
        grid-template-columns:auto 1fr;
        grid-template-areas:
            "icon text"
            "points points"
            "action action";
        align-items:start;
        gap:2px;
    }
    .ev-cta-icon{
        grid-area:icon;
    }
    .ev-cta-text{
        grid-area:text;
        min-width:0;
    }
    .ev-cta-points{
        grid-area:points;
        flex-direction:column;
        border-left:none;
        border-right:none;
        border-top:1px solid rgba(255,255,255,.15);
        border-bottom:1px solid rgba(255,255,255,.15);
        padding:2px 0;
    }
    .ev-cta-point{
        flex-direction:row;
        justify-content:flex-start;
        text-align:left;
    }
    .ev-cta-action{
        grid-area:action;
        margin-left:0;
    }
}

.ev-explore-evidence-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ev-evidence-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    text-decoration: none;
    padding: var(--space-2, 2px);
    border-radius: var(--radius-10, 10px);
    transition: background 0.15s ease;
}

.ev-evidence-item:hover {
    background: rgba(255,255,255,.06);
}

.ev-evidence-item-icon {
    width: 16px;
    height: 16px;
    color: var(--color-gold, #F2B45A);
    flex-shrink: 0;
    margin-top: var(--space-1, 1px);
}

.ev-evidence-item-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.ev-evidence-item-title {
    font-size: var(--font-size-11, 11px);
    font-weight: 600;
    color: var(--color-white, #ffffff);
}

.ev-evidence-item-desc {
    font-size: var(--font-size-9, 9px);
    color: rgba(255,255,255,.6);
    line-height: 1.1;
    margin-top: var(--space-2, 2px);
}

.ev-evidence-item-arrow {
    width: 12px;
    height: 12px;
    color: rgba(255,255,255,.4);
    flex-shrink: 0;
    margin-top: var(--space-3, 3px);
}

.ev-evidence-empty {
    font-size: var(--font-size-10, 10px);
    color: rgba(255,255,255,.45);
    font-style: italic;
    margin: 0;
}

.ev-evidence-browse-all {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--space-4, 4px);
    padding-top: var(--space-10, 10px);
    border-top: 1px solid rgba(255,255,255,.12);
    font-size: var(--font-size-11, 11px);
    font-weight: 700;
    color: var(--color-gold, #F2B45A);
    text-decoration: none;
}

.ev-evidence-browse-all-icon {
    width: 12px;
    height: 12px;
}

.ev-explore-evidence {
    margin-top: var(--space-3, 3px);
    padding-top: var(--space-3, 3px);
    border-top: 1px solid rgba(255,255,255,.12);
}

.ev-explore-evidence-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: var(--space-3, 3px);
}

.ev-explore-evidence-icon {
    width: 16px;
    height: 16px;
    color: var(--color-gold, #F2B45A);
    flex-shrink: 0;
}

.ev-explore-evidence-title {
    font-size: var(--font-size-11, 11px);
    font-weight: 700;
    color: var(--color-white, #ffffff);
    letter-spacing: .1em;
}


.ev-explore-evidence-placeholder {
    /* border: 1px dashed rgba(255,255,255,.25); */
    border-radius: var(--radius-12, 12px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.45);
    font-size: var(--font-size-10, 10px);
    font-style: italic;
}