:root{
--pnw-evergreen:#1F4D3A;
--pnw-navy:#1E2F44;
--pnw-river:#3F7C85;
--pnw-moss:#6A8F6B;

--sand-bg:#F4F1EA;
--panel-light:#F0ECE5;

--text-dark:#2A2A2A;
}
/* match homepage header */

.site-header{

background:var(--pnw-evergreen);
color:white;

display:flex;
justify-content:space-between;
align-items:center;

padding:18px 40px;

position:relative;
z-index:10;
}

.logo-wrap{
display:flex;
align-items:center;
gap:12px;
}

.logo-wrap a{
display:flex;
align-items:center;
}

.logo-wrap::after{
content:"BETA";
display:inline-flex;
align-items:center;
justify-content:center;
padding:6px 10px;
border-radius:999px;
background:rgba(255,255,255,.14);
border:1px solid rgba(255,255,255,.28);
color:#F9E6A8;
font-size:11px;
font-weight:800;
letter-spacing:.12em;
line-height:1;
text-transform:uppercase;
}

.logo-wrap img{
height:72px;
filter:none;
filter:drop-shadow(0 6px 10px rgba(0,0,0,.25));
}


.nav{
margin-left:auto;
}

.nav a{
color:white;
text-decoration:none;
margin-left:25px;
font-weight:500;
}

.nav a.nav-login{
display:inline-flex;
align-items:center;
justify-content:center;
padding:10px 16px;
border-radius:999px;
background:rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.22);
font-weight:700;
transition:background .16s ease, color .16s ease, transform .12s ease;
}

.nav a.nav-login:hover{
background:white;
color:var(--pnw-evergreen);
transform:translateY(-1px);
}
body{
margin:0;
font-family:Segoe UI,system-ui;
background:

linear-gradient(
rgba(255,255,255,.25),
rgba(255,255,255,.55)
),

var(--sand-bg);

color:var(--text-dark);
}

.header-inner{
display:flex;
justify-content:space-between;
align-items:center;
}

.planner-container{
max-width:1400px;
margin:auto;
padding:40px;
}

.planner-grid{
display:grid;
grid-template-columns:220px 1fr 380px;
gap:30px;
}

.planner-sidebar{
display:flex;
flex-direction:column;
gap:12px;
}

.planner-input{
background:rgba(255,255,255,.35);

backdrop-filter:blur(6px);

border:1px solid rgba(255,255,255,.4);

border-radius:16px;

padding:34px;
}

.module{
display:none;
}

.module.active{
display:block;
}

.form-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
margin-top:20px;
}

label{
display:flex;
flex-direction:column;
font-size:14px;
}

input,select{
padding:10px;
border-radius:6px;
border:1px solid rgba(0,0,0,.2);
}

.card-validation-message{
margin-top:14px;
padding:10px 12px;
border-radius:10px;
background:rgba(219,43,57,.10);
border:1px solid rgba(219,43,57,.24);
color:#A61E2B;
font-size:13px;
line-height:1.45;
font-weight:600;
}

.inline-tooltip{
position:relative;
cursor:help;
}

.inline-tooltip-text{
visibility:hidden;
opacity:0;
position:absolute;
left:0;
bottom:calc(100% + 10px);
width:240px;
padding:10px 12px;
border-radius:8px;
background:var(--pnw-navy);
color:white;
font-size:12px;
line-height:1.45;
box-shadow:0 8px 18px rgba(0,0,0,.18);
transition:opacity .18s ease;
z-index:20;
pointer-events:none;
}

.inline-tooltip-text::after{
content:"";
position:absolute;
top:100%;
left:16px;
border-width:6px;
border-style:solid;
border-color:var(--pnw-navy) transparent transparent transparent;
}

.inline-tooltip:hover .inline-tooltip-text{
visibility:visible;
opacity:1;
}

.secondary-pension-card{
margin-top:24px;
padding:18px 20px;
border-radius:12px;
background:rgba(255,255,255,.48);
border:1px solid rgba(0,0,0,.08);
}

.secondary-pension-toggle{
display:flex;
align-items:center;
gap:10px;
font-weight:600;
color:var(--pnw-evergreen);
}

.secondary-pension-toggle input{
width:auto;
margin:0;
}

.card-action-row{
display:flex;
gap:10px;
margin-top:14px;
}

.card-action-btn{
border:none;
border-radius:999px;
padding:9px 14px;
font-size:13px;
font-weight:600;
cursor:pointer;
transition:transform .12s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}

.card-action-btn:hover{
transform:translateY(-1px);
box-shadow:0 6px 14px rgba(0,0,0,.12);
}

.card-action-edit{
background:rgba(31,77,58,.12);
color:var(--pnw-evergreen);
border:1px solid rgba(31,77,58,.14);
}

.card-action-edit:hover{
background:var(--pnw-evergreen);
color:white;
}

.card-action-remove{
background:rgba(62,47,37,.09);
color:#6B4F3A;
border:1px solid rgba(62,47,37,.12);
}

.card-action-remove:hover{
background:#6B4F3A;
color:white;
}

.planner-preview{
display:flex;
flex-direction:column;
gap:20px;
margin-top:70px;
}

.preview-card{
background:white;
padding:18px;
border-radius:10px;
box-shadow:0 6px 16px rgba(0,0,0,.08);
}

.primary-btn{
background:#3F7C85;
border:none;
padding:10px 16px;
border-radius:6px;
color:white;
cursor:pointer;
}

#assetButtonBar,
#retirementButtonBar,
#debtButtonBar{
display:flex;
flex-wrap:wrap;
gap:12px;
margin:0 0 18px 0;
align-items:center;
}

#assetButtonBar .asset-choice-btn,
#retirementButtonBar .asset-choice-btn,
#debtButtonBar .asset-choice-btn{
background:
linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.04)),
#3F7C85;
border:1px solid rgba(255,255,255,.24);
border-bottom-color:rgba(24,54,58,.58);
border-radius:10px;
padding:10px 18px;
min-height:44px;
color:#f9f5ee;
font-weight:600;
letter-spacing:.01em;
box-shadow:
0 1px 0 rgba(255,255,255,.12) inset,
0 6px 14px rgba(26,53,57,.12);
transition:
background .2s ease,
border-color .2s ease,
box-shadow .15s ease,
transform .1s ease;
}

#assetButtonBar .asset-choice-btn:hover,
#retirementButtonBar .asset-choice-btn:hover,
#debtButtonBar .asset-choice-btn:hover{
background:
linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.05)),
#2d626a;
border-color:rgba(255,255,255,.34);
box-shadow:
0 1px 0 rgba(255,255,255,.16) inset,
0 10px 18px rgba(26,53,57,.16);
transform:translateY(-1px);
}

#assetButtonBar .asset-choice-btn:active,
#retirementButtonBar .asset-choice-btn:active,
#debtButtonBar .asset-choice-btn:active{
transform:translateY(1px);
box-shadow:
0 1px 0 rgba(255,255,255,.08) inset,
0 4px 8px rgba(26,53,57,.12);
}

.secondary-btn{
background:rgba(31,77,58,.10);
border:1px solid rgba(31,77,58,.18);
padding:10px 16px;
border-radius:8px;
color:var(--pnw-evergreen);
cursor:pointer;
font-weight:600;
transition:background .16s ease,color .16s ease,transform .1s ease;
}

.secondary-btn:hover{
background:var(--pnw-evergreen);
color:white;
transform:translateY(-1px);
}

.assumption-action-row{
display:flex;
justify-content:flex-end;
margin-top:16px;
}

.mobile-income-summary{
display:none;
}

.mobile-income-summary h3{
margin:18px 0 12px;
font-size:16px;
color:var(--pnw-navy);
}

.mobile-income-list{
display:grid;
gap:10px;
}

.mobile-income-item{
display:flex;
justify-content:space-between;
align-items:center;
gap:16px;
padding:12px 14px;
border-radius:10px;
background:rgba(255,255,255,.72);
border:1px solid rgba(0,0,0,.08);
font-size:13px;
}

.mobile-income-item strong{
font-size:14px;
color:var(--pnw-evergreen);
}

.chart-tooltip{
position:fixed;
background:#FAE2C6;
color:#2A2A2A;
padding:8px 10px;
font-size:13px;
line-height:1.4;
border-radius:6px;
pointer-events:none;
opacity:0;
z-index:9999;
will-change: transform;
pointer-events:none;
border:1px solid rgba(0,0,0,.15);
box-shadow:0 6px 18px rgba(0,0,0,.18);
}

.planner-input{
overflow-y:auto;
max-height:calc(100vh - 120px);
}

.preview-card{
transition:all .2s ease;
}
.planner-preview{
display:flex;
flex-direction:column;
gap:20px;
position:sticky;
top:120px;
}
planner-preview{
position:sticky;
top:120px;
}
.nav-item{

background:rgba(255,255,255,.55);

border:1px solid rgba(0,0,0,.08);

padding:14px 16px;

border-radius:10px;

font-weight:500;

transition:all .15s ease;
}

.nav-item:hover{
transform:translateX(3px);
}

.nav-item.active{

background:var(--pnw-evergreen);
color:white;
}
.timeline-section{

max-width:1400px;
margin:40px auto 80px auto;
padding:0 40px;

}

@media (max-width: 1100px){

.planner-grid{
grid-template-columns:1fr;
gap:20px;
}

.planner-sidebar{
flex-direction:row;
overflow-x:auto;
padding-bottom:6px;
}

.planner-sidebar::-webkit-scrollbar{
height:8px;
}

.planner-input{
max-height:none;
overflow:visible;
}

.planner-preview{
position:static;
margin-top:0;
}
}

@media (max-width: 900px){

.site-header{
padding:16px 20px;
flex-wrap:wrap;
gap:12px;
}

.nav{
margin-left:0;
width:100%;
display:flex;
flex-wrap:wrap;
gap:12px;
}

.nav a{
margin-left:0;
}

.planner-container{
padding:24px 20px;
}

.form-grid{
grid-template-columns:1fr;
gap:16px;
}

.timeline-section{
padding:0 20px;
margin:28px auto 56px auto;
}

.timeline-card{
padding:20px;
}

.footer-grid{
grid-template-columns:1fr;
gap:24px;
}

.footer-bottom{
flex-direction:column;
align-items:flex-start;
gap:12px;
}

.disclaimer-modal{
padding:24px 22px 22px;
border-radius:18px;
}

.disclaimer-modal h2{
font-size:28px;
}
}

@media (max-width: 640px){

body.mobile-simulator .planner-grid{
display:flex;
flex-direction:column;
gap:16px;
}

body.mobile-simulator .planner-preview{
order:1;
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
}

body.mobile-simulator .planner-preview a{
grid-column:1 / -1;
}

body.mobile-simulator .planner-sidebar{
order:2;
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
overflow:visible;
padding-bottom:0;
}

body.mobile-simulator .planner-input{
order:3;
padding:20px 14px;
border-radius:14px;
}

body.mobile-simulator .nav-item{
min-width:0;
white-space:normal;
text-align:center;
padding:12px 10px;
margin-bottom:0;
font-size:13px;
line-height:1.25;
border:1px solid rgba(0,0,0,.08);
background:rgba(255,255,255,.68);
}

body.mobile-simulator .preview-card{
padding:14px;
}

body.mobile-simulator .preview-card h3{
font-size:14px;
margin-bottom:8px;
}

body.mobile-simulator .preview-metric,
body.mobile-simulator #retirementStatus,
body.mobile-simulator #firstDeficit{
font-size:24px;
}

.planner-sidebar{
gap:8px;
}

.nav-item{
white-space:nowrap;
min-width:max-content;
}

.planner-input{
padding:22px 18px;
}

.planner-container{
padding:18px 12px;
}

.timeline-section{
padding:0 12px;
margin:22px auto 44px auto;
}

.timeline-card{
padding:16px 12px;
overflow:visible;
}

body.mobile-simulator .timeline-card{
padding:16px 14px 18px;
}

body.mobile-simulator .timeline-card h2{
font-size:20px;
margin-bottom:10px;
}

body.mobile-simulator .chart-scroll-shell{
overflow:visible;
}

body.mobile-simulator .timeline-card canvas{
width:100%;
max-width:100%;
height:240px;
}

#timelineLegend{
gap:8px 12px;
font-size:12px;
}

body.mobile-simulator #timelineLegend{
margin-top:14px;
gap:8px 10px;
}

.timeline-legend-item{
align-items:flex-start;
}

.timeline-legend-swatch{
width:20px;
margin-top:7px;
}

body.mobile-simulator .mobile-income-summary{
display:block;
margin-top:14px;
}

.form-grid input,
.form-grid select{
box-sizing:border-box;
width:100%;
}

.preview-card{
padding:16px;
}

.primary-btn,
.secondary-btn,
.card-action-btn{
width:100%;
}

.card-action-row{
flex-direction:column;
}

.assumption-action-row{
justify-content:stretch;
}

.subscribe-row{
flex-direction:column;
align-items:stretch;
}

.subscribe-row input{
width:100%;
box-sizing:border-box;
}

.disclaimer-overlay{
padding:16px;
}

.disclaimer-actions{
justify-content:stretch;
}

.disclaimer-actions .primary-btn{
width:100%;
}
}

.timeline-card{

background:rgba(255,255,255,.22);
backdrop-filter:blur(6px);

border:1px solid rgba(255,255,255,.35);

border-radius:14px;

padding:30px;

box-shadow:0 10px 28px rgba(0,0,0,.08);

}

.timeline-card canvas{
width:100%;
height:auto;
display:block;
}

.chart-scroll-shell{
width:100%;
overflow-x:auto;
overflow-y:hidden;
padding-bottom:6px;
}

.chart-scroll-shell canvas{
display:block;
}

#timelineLegend{
display:flex;
flex-wrap:wrap;
gap:12px 18px;
margin-top:18px;
font-size:13px;
color:var(--text-dark);
}

body.disclaimer-open{
overflow:hidden;
}

.disclaimer-overlay{
position:fixed;
inset:0;
display:none;
align-items:center;
justify-content:center;
padding:24px;
background:rgba(18,34,30,.58);
backdrop-filter:blur(6px);
z-index:2000;
}

.disclaimer-modal{
width:min(720px, 100%);
padding:32px 32px 28px;
border-radius:24px;
background:
linear-gradient(180deg, rgba(255,255,255,.95), rgba(244,241,234,.98)),
var(--sand-bg);
border:1px solid rgba(255,255,255,.55);
box-shadow:0 24px 60px rgba(0,0,0,.22);
}

.disclaimer-kicker{
font-size:12px;
font-weight:700;
letter-spacing:.12em;
text-transform:uppercase;
color:var(--pnw-river);
margin-bottom:10px;
}

.disclaimer-modal h2{
margin:0 0 14px;
font-size:34px;
color:var(--pnw-evergreen);
}

.disclaimer-modal p{
margin:0 0 14px;
font-size:16px;
line-height:1.6;
color:rgba(42,42,42,.92);
}

.disclaimer-actions{
display:flex;
justify-content:flex-end;
margin-top:22px;
}

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

.timeline-legend-swatch{
display:inline-block;
width:28px;
height:0;
border-top:3px solid var(--legend-color, #3F7C85);
border-radius:999px;
}

.timeline-legend-swatch.is-dashed{
border-top-style:dashed;
}
.simbg-section{

background:
linear-gradient(
rgba(244,241,234,0.25) 0%,
rgba(244,241,234,0.40) 20%,
rgba(244,241,234,0.50) 40%,
rgba(244,241,234,.62) 50%
),
url("/assets/illustrations/pnw-section-bg.png");

background-size:cover;
background-position:center bottom;
background-repeat:no-repeat;

}
.site-footer{

background:#1F4D3A;
color:rgba(255,255,255,.85);

padding:50px 40px 30px;

}

.footer-grid{

max-width:1100px;
margin:auto;

display:grid;
grid-template-columns:1fr 1fr 1fr 1.4fr;

gap:40px;

margin-bottom:35px;

}

.footer-links{

list-style:none;
padding:0;
margin:0;

}

.footer-links li{

margin-bottom:8px;

}

.footer-links li::before{

content:"•";
margin-right:8px;
opacity:.6;

}

.footer-links a{

color:rgba(255,255,255,.85);
text-decoration:none;

}

.footer-links a:hover{

text-decoration:underline;

}

.footer-subscribe h4{

margin-top:0;
font-weight:600;

}

.subscribe-row{

display:flex;
gap:8px;
margin-top:10px;

}

.subscribe-row input{

padding:10px 12px;
border:none;
border-radius:6px;

width:160px;

}

.subscribe-row button{

background:#2E5F49;
color:white;

border:none;
padding:10px 14px;

border-radius:6px;

cursor:pointer;

}

.footer-bottom{

max-width:1100px;
margin:auto;

display:flex;
justify-content:space-between;
align-items:center;

font-size:13px;

}

.footer-icons a{

display:inline-flex;
align-items:center;
justify-content:center;

width:32px;
height:32px;

background:rgba(255,255,255,.15);
border-radius:6px;

margin-left:8px;

text-decoration:none;
}
.site-footer{
background:
linear-gradient(rgba(31,77,58,.65), rgba(31,77,58,.65)),
url("/assets/illustrations/paper-texture.png");

background-size:cover;
background-repeat:repeat;
}
.preview-metric{
font-size:32px;
font-weight:600;
margin-top:6px;
}
.nav-item{

display:block;
width:100%;

padding:12px 14px;
margin-bottom:6px;

background:transparent;
border:none;

font-size:14px;
font-weight:600;

color:#344E41;

cursor:pointer;

border-radius:6px;

text-align:left;

transition:
background .18s ease,
color .18s ease,
transform .08s ease;

}