/* ═══════════════════════════════════════════
   li.css  v1.0
   Life Insurance Needs Calculator – specific styles
   Extends calc-global.css — cards, sliders, hero, result-grid,
   donut mechanics, accordions, and insights are all shared.
═══════════════════════════════════════════ */

/* .ded-note is only defined in it.css within the shared system,
   not in calc-global.css — same fix applied in cgt.css/rentvsbuy.css. */
.ded-note {
    font-size: .68rem;
    color: var(--slate);
    margin-top: 4px;
    margin-bottom: .5rem;
    line-height: 1.4;
    padding: 0 2px;
}

.fee-lbl {
    display: block;
    font-size: .72rem;
    font-weight: 600;
    color: var(--slate);
    margin-bottom: .35rem;
}

/* Donut tooltip — same shape as it.css's #itDonutTip, scoped to this calc */
#liDonutTip {
    position: absolute;
    bottom: 105%;
    left: 50%;
    transform: translateX(-50%);
    background: #0D2545;
    border-radius: 16px;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    transition: opacity .18s;
    z-index: 20;
    width: 192px;
    box-shadow: 0 20px 40px rgba(13,37,69,.35), 0 4px 12px rgba(13,37,69,.2);
}

/* Result grid: two-up (Income Replacement PV + Multiple) */
.card .result-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px;
}
@media (max-width: 420px) {
    .card .result-grid { grid-template-columns: 1fr !important; }
}