/* Migrated from the original retirement calculator — scoped under .calc and remapped to The SG Investor palette */
.calc{--bg:#0B1220;--ink:#F5F7FA;--ink-dim:rgba(245,247,250,.72);--ink-faint:rgba(245,247,250,.5);
  --gold:#F5B942;--gold-lite:#F5B942;--teal:#36D9F5;--line:rgba(245,247,250,.16);
  --display:var(--font-display);--ui:var(--font-ui);--mono:var(--font-mono);
  --ease:cubic-bezier(.22,1,.36,1);--bad:#F87171;color:var(--ink)}
.calc .btn{color:#0B1220}
.calc{max-width:860px;margin:0 auto;padding:clamp(48px,8vh,88px) clamp(22px,6vw,0) clamp(80px,12vh,140px)}
.calc .crumbs{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--ink-faint);margin-bottom:22px}
.calc .crumbs a{color:var(--ink-faint);transition:color .3s var(--ease)}
.calc .crumbs a:hover{color:var(--gold-lite)}
.calc .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.42em;text-transform:uppercase;color:var(--teal);margin-bottom:22px}
.calc h1{font-family:var(--display);font-weight:300;line-height:1.08;letter-spacing:-.015em;font-size:clamp(32px,5vw,48px);max-width:18ch}
.calc h1 em{font-style:italic;color:var(--gold-lite)}
.calc .intro{margin-top:18px;max-width:56ch;font-size:15.5px;line-height:1.75;color:var(--ink-dim)}

.calc .step-rail{margin-top:40px;display:flex;flex-direction:column;gap:10px}
.calc .step-segs{display:flex;gap:6px}
.calc .step-segs .seg{flex:1;height:3px;background:rgba(245,247,250,.14);border-radius:2px;overflow:hidden;transition:background .4s var(--ease)}
.calc .step-segs .seg.done,.calc .step-segs .seg.current{background:var(--gold-lite)}
.calc .step-label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}

.calc .step{display:none;margin-top:40px}
.calc .step.active{display:block}
.calc h2.step-h{font-family:var(--display);font-weight:300;font-size:clamp(24px,3vw,30px);letter-spacing:-.01em;max-width:24ch}
.calc .step-sub{margin-top:10px;max-width:56ch;font-size:14.5px;line-height:1.7;color:var(--ink-dim)}

.calc form{margin-top:36px;display:flex;flex-direction:column;gap:30px}
.calc .row{display:grid;grid-template-columns:1fr;gap:22px}
@media (min-width:640px){.calc .row{grid-template-columns:1fr 1fr}}
@media (min-width:640px){.calc .row.three{grid-template-columns:1fr 1fr 1fr}}

.calc label.field{display:block}
.calc label.field span{display:block;font-family:var(--ui);font-size:13px;letter-spacing:.06em;color:var(--ink-dim);margin-bottom:9px}
.calc label.field .hint{margin-top:7px;font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--ink-faint);line-height:1.5}
.calc .input-wrap{position:relative}
.calc .input-wrap .prefix{position:absolute;left:2px;top:50%;transform:translateY(-50%);font-size:16px;color:var(--ink-faint);pointer-events:none}
.calc .input-wrap.has-prefix input{padding-left:16px}
.calc .input-wrap .suffix{position:absolute;right:2px;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:12px;color:var(--ink-faint);pointer-events:none}
.calc input[type=text],.calc input[type=number],.calc select{
    width:100%;background:transparent;border:none;border-bottom:1px solid var(--line);color:var(--ink);
    font-family:var(--ui);font-size:16px;font-weight:300;padding:11px 2px;transition:border-color .35s var(--ease);appearance:none}
.calc select{cursor:pointer}
.calc select option{background:#0B1220;color:var(--ink)}
.calc input::placeholder{color:var(--ink-faint)}
.calc input:focus,.calc select:focus{outline:none;border-color:var(--gold-lite)}
.calc input[type=number]::-webkit-outer-spin-button,.calc input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.calc input[type=number]{-moz-appearance:textfield}

.calc .radios{display:flex;flex-wrap:wrap;gap:12px}
.calc .radio{display:flex;align-items:center;gap:9px;cursor:pointer;padding:10px 16px;border:1px solid var(--line);border-radius:100px;transition:border-color .35s var(--ease),background .35s var(--ease)}
.calc .radio input{accent-color:var(--gold-lite)}
.calc .radio span{font-family:var(--ui);font-size:13.5px;color:var(--ink-dim)}
.calc .radio:has(input:checked){border-color:var(--gold-lite);background:rgba(245,185,66,.06)}

.calc .tier-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width:640px){.calc .tier-grid{grid-template-columns:1fr 1fr 1fr}}
.calc .tier{cursor:pointer;display:block;padding:22px 20px;border:1px solid var(--line);border-radius:14px;transition:border-color .35s var(--ease),background .35s var(--ease)}
.calc .tier input{position:absolute;opacity:0;pointer-events:none}
.calc .tier .amt{font-family:var(--display);font-size:26px;color:var(--ink)}
.calc .tier .name{margin-top:6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--teal)}
.calc .tier .desc{margin-top:10px;font-size:13px;line-height:1.6;color:var(--ink-dim)}
.calc .tier:has(input:checked){border-color:var(--gold-lite);background:rgba(245,185,66,.06)}
.calc .tier:has(input:checked) .amt{color:var(--gold-lite)}

.calc .preview{margin-top:8px;padding:22px 24px;border:1px solid var(--line);border-radius:14px;background:rgba(245,247,250,.03)}
.calc .preview.empty{opacity:.4}
.calc .preview-row{display:flex;align-items:baseline;justify-content:space-between;padding:8px 0;font-size:14px}
.calc .preview-row + .preview-row{border-top:1px solid var(--line)}
.calc .preview-row .k{color:var(--ink-dim)}
.calc .preview-row .v{font-family:var(--mono);color:var(--ink)}
.calc .preview-row.total .k,.calc .preview-row.total .v{color:var(--gold-lite);font-weight:500}
.calc .preview-row.neg .v{color:var(--bad)}

.calc .hint-box{margin-top:6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--ink-faint);line-height:1.6}

.calc .step-nav{margin-top:40px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:28px;border-top:1px solid var(--line)}
.calc .btn{pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;gap:12px;font-family:var(--ui);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#0b0907;background:var(--gold-lite);padding:15px 30px;border-radius:100px;font-weight:600;border:none;cursor:pointer;box-shadow:0 12px 40px -12px rgba(0,0,0,.6);transition:transform .5s var(--ease),background .5s var(--ease),box-shadow .5s var(--ease)}
.calc .btn:hover,.calc .btn:focus-visible{transform:translateY(-2px);background:#fff;box-shadow:0 18px 50px -18px rgba(245,185,66,.7)}
.calc .btn-ghost{background:transparent;color:var(--ink-dim);border:1px solid var(--line);box-shadow:none}
.calc .btn-ghost:hover,.calc .btn-ghost:focus-visible{background:transparent;color:var(--ink);border-color:var(--ink-dim);transform:none;box-shadow:none}
.calc .error{font-family:var(--ui);font-size:13px;color:var(--bad);margin-top:14px;display:none}
.calc .error.show{display:block}

  /* results */
.calc .results{display:none;margin-top:40px}
.calc .results.active{display:block}
.calc .verdict{padding:32px 30px;border-radius:16px;border:1px solid var(--line)}
.calc .verdict.surplus{border-color:rgba(245,185,66,.4);background:rgba(245,185,66,.06)}
.calc .verdict.gap{border-color:rgba(248,113,113,.35);background:rgba(248,113,113,.06)}
.calc .verdict .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--teal)}
.calc .verdict h2{margin-top:12px;font-family:var(--display);font-weight:300;font-size:clamp(24px,3.4vw,32px);line-height:1.25}
.calc .verdict h2 em{font-style:italic;color:var(--gold-lite)}
.calc .verdict.gap h2 em{color:var(--bad)}
.calc .verdict p{margin-top:14px;font-size:15px;line-height:1.7;color:var(--ink-dim);max-width:60ch}

.calc .stat-grid{margin-top:32px;display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:640px){.calc .stat-grid{grid-template-columns:1fr 1fr}}
.calc .stat-card{padding:24px 26px;border:1px solid var(--line);border-radius:14px}
.calc .stat-card .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint)}
.calc .stat-card .num{margin-top:10px;font-family:var(--display);font-size:clamp(24px,3vw,30px);color:var(--ink)}
.calc .stat-card .sub{margin-top:8px;font-size:12.5px;color:var(--ink-dim);line-height:1.6}
.calc .stat-card .breakdown{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.calc .stat-card .breakdown div{display:flex;justify-content:space-between;font-size:12.5px;color:var(--ink-dim)}
.calc .stat-card .breakdown span:last-child{font-family:var(--mono);color:var(--ink)}

.calc details.method{margin-top:36px;border:1px solid var(--line);border-radius:14px;padding:20px 24px}
.calc details.method summary{cursor:pointer;font-family:var(--ui);font-size:13.5px;color:var(--ink-dim);letter-spacing:.02em}
.calc details.method summary:hover{color:var(--gold-lite)}
.calc details.method .method-body{margin-top:18px;display:flex;flex-direction:column;gap:12px}
.calc details.method .method-body p,.calc details.method .method-body li{font-size:13px;line-height:1.7;color:var(--ink-dim)}
.calc details.method ul{padding-left:18px}
.calc details.method .disclaimer{margin-top:6px;padding-top:14px;border-top:1px solid var(--line);font-size:12px;color:var(--ink-faint)}

.calc .script-close{margin-top:56px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px;padding-top:40px;border-top:1px solid var(--line)}
.calc .script-close p{font-family:var(--display);font-weight:300;font-style:italic;font-size:clamp(19px,2.4vw,26px);line-height:1.4;max-width:34ch;color:var(--ink)}
.calc .btn svg{width:14px;height:14px}