/* ================ Step-up SIP Calculator — page-specific styles ========================== */


/* ---------- Chart card ---------- */

.swatch.inv { background: var(--navy-1, #085AA9);}
.swatch.flat { background: #9E9E9E;}

/* ---------- SVG Chart ---------- */
svg.chart { display: block; width: 100%; height: auto; overflow: visible;}

.tip-line { stroke: rgba(26,26,26,.18); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; transition: opacity .12s;}
.tip-line.on { opacity: 1;}

.tip-label {
    font-family: 'Neue Montreal', 'Plus Jakarta Sans', sans-serif; fill: var(--ink, #231F20);
    font-variant-numeric: tabular-nums; opacity: 0; transition: opacity .12s;
}

.tip-label.on { opacity: 1;}
.tip-sub { fill: var(--ink-3, #717182); font-size: 11px; letter-spacing: .04em;}
.tip-dot { stroke: #fff; stroke-width: 2;opacity: 0;  transition: opacity .12s;}
.tip-dot.on { opacity: 1;}
.fade-area { opacity: 0; animation: fadeIn 1.2s 1.4s forwards;}

@keyframes fadeIn {
    to { opacity: 1; }
}

/* ---------- Formula toggle ---------- */
.formula-toggle {
    display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--crimson, #EC1750);
	cursor: pointer; margin-bottom: 4px; background: none; border: 0; padding: 0; font-family: inherit;
}

.formula-toggle .arr { display: inline-block; transition: transform .2s;}
.formula-toggle.open .arr { transform: rotate(90deg);}

.formula-box {
    margin-top: 4px; padding: 20px 24px; border: 1px solid var(--rule-2, #d0d0d0);
    border-radius: 14px; background: var(--card, #FFFFFF); display: none; flex-direction: column; gap: 12px;
}

.formula-box .formula-head {
    font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3, #717182); 
	font-family: 'Montserrat', sans-serif; font-weight: 600;
}

.formula-box.show { display: flex;}
.formula-vars { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; margin-top: 4px;}

.formula-vars dt { font-size: 12px; color: var(--crimson, #EC1750); font-family: 'Neue Montreal', 'Plus Jakarta Sans', monospace; font-weight: 500;}
.formula-vars dd { font-size: 12px; color: var(--ink-2, #58595B); line-height: 1.5;}

/* ---------- Advantage block ---------- */
.advantage-block {
    grid-column: 1/-1; margin-top: 20px; padding: 20px 24px; border-radius: 14px;
    background: linear-gradient(135deg, rgba(8,90,169,.06), rgba(236,23,80,.06)); border: 1px solid var(--rule-2, #d0d0d0);
}

.advantage-block .cap { color: var(--sapphire, #085AA9);}
.advantage-num { font-size: clamp(36px, 4vw, 56px); color: var(--sapphire, #085AA9); font-variant-numeric: tabular-nums;}

.advantage-sub { font-size: 13px; color: var(--ink-2, #58595B); margin-top: 6px;}

/* ---------- Hero block ---------- */
.hero-block .hero-cap { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px;}
.hero-block .hero-cap .cap.acc { color: var(--crimson, #EC1750);  font-family: 'Plus Jakarta Sans', 'Neue Montreal', sans-serif !important;}

/* ---------- Result grid ---------- */
.result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px 64px; align-items: end;}
.result-grid .cell { display: flex; flex-direction: column; gap: 8px;}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {

}

@media (max-width: 900px) {
    
    .advantage-num {  font-size: clamp(28px, 5vw, 40px); margin-block: 0.5rem; }
    .formula-box { padding: 16px 18px; }
    .result-grid { grid-template-columns: 1fr 1fr;  gap: 32px 24px;}
    

}

@media (max-width: 600px) {
    .advantage-block {  padding: 16px 18px; }
    .formula-vars { grid-template-columns: 1fr; gap: 2px 0; }
    .result-grid { grid-template-columns: 1fr; gap: 32px; }
}

@media(max-width:480px){
	.hero-block .hero-cap .cap.acc + .cap{ max-width: 10ch; text-align: right;}
}