.calculator-page { background: #f3f6fa; color: #14243a; }
.calculator-page .page-header { background: radial-gradient(circle at 78% 20%, rgba(230, 61, 71, 0.35), transparent 31%), linear-gradient(128deg, #061124 0%, #0e2b4d 58%, #12375a 100%); overflow: hidden; padding: clamp(4.75rem, 9vw, 7.75rem) 20px 4.5rem; position: relative; }
.calculator-page .page-header::before { border: 1px solid rgba(255,255,255,.12); border-radius: 50%; content: ''; height: 30rem; position: absolute; right: -9rem; top: -14rem; width: 30rem; }
.calculator-page .page-header .container { position: relative; z-index: 1; }
.calculator-breadcrumb { align-items: center; color: rgba(255,255,255,.72); display: flex; flex-wrap: wrap; font-size: .88rem; gap: .48rem; margin-bottom: 1.25rem; }
.calculator-breadcrumb a { color: #fff; text-decoration: none; }
.calculator-breadcrumb a:hover { color: #ffb2b6; }
.calculator-page .page-header h1 { color: #fff; font-size: clamp(2.25rem, 5vw, 4.15rem); line-height: 1.08; margin: .25rem 0 1rem; max-width: 850px; }
.calculator-page .page-header h1 span { color: #ff9ca3; }
.calculator-page .page-header > .container > p:not(.section-eyebrow) { color: rgba(255,255,255,.82); font-size: 1.1rem; line-height: 1.75; margin: 0; max-width: 720px; }
.calculator-quick-facts { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.calculator-quick-facts span { align-items: center; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); border-radius: 999px; color: #f5fbff; display: inline-flex; font-size: .85rem; font-weight: 700; gap: .5rem; padding: .6rem .8rem; }
.calculator-quick-facts i { color: #8be0c7; }
.calculator-shell { margin: -2.25rem auto 0; max-width: 1240px; padding: 0 20px 5.5rem; position: relative; z-index: 2; }
.calculator-workspace { background: #fff; border: 1px solid #dbe5ef; border-radius: 24px; box-shadow: 0 22px 60px rgba(5, 22, 41, .14); overflow: hidden; }
.calculator-workspace__top { align-items: center; background: linear-gradient(100deg, #f8fafc, #eff5fb); border-bottom: 1px solid #dbe5ef; display: flex; gap: 1rem; justify-content: space-between; padding: 1.05rem 1.25rem; }
.calculator-workspace__top > p { color: #52677f; font-size: .92rem; line-height: 1.5; margin: 0; }
.calculator-workspace__top p strong { color: #12365c; }
.calculator-tabs { display: flex; gap: .5rem; }
.calculator-tab { align-items: center; background: transparent; border: 1px solid transparent; border-radius: 10px; color: #53667b; cursor: pointer; display: inline-flex; font: 700 .9rem/1 var(--font-heading, Montserrat, sans-serif); gap: .48rem; padding: .68rem .88rem; transition: .2s ease; }
.calculator-tab:hover, .calculator-tab:focus-visible { background: #fff; border-color: #cbd9e6; color: #102b49; outline: none; }
.calculator-tab[aria-selected="true"] { background: #102d4e; border-color: #102d4e; color: #fff; box-shadow: 0 4px 10px rgba(16,45,78,.18); }
.calculator-tab i { color: #66d4b2; }
.calculator-tab[aria-selected="true"] i { color: #a6f1d8; }
.calculator-panel { display: none; padding: clamp(1.15rem, 3vw, 2rem); }
.calculator-panel.is-active { display: block; }
.calculator-intro { align-items: flex-start; display: flex; gap: 1rem; justify-content: space-between; margin-bottom: 1.4rem; }
.calculator-intro h2 { color: #102d4e; font-size: clamp(1.35rem, 3vw, 1.8rem); margin: 0 0 .35rem; }
.calculator-intro p { color: #5a6c80; line-height: 1.6; margin: 0; max-width: 710px; }
.calculator-privacy-note { align-items: center; background: #e9fbf4; border: 1px solid #bdebd8; border-radius: 10px; color: #1c735b; display: inline-flex; font-size: .78rem; font-weight: 700; gap: .42rem; line-height: 1.35; padding: .55rem .68rem; text-align: left; }
.calculator-main-grid { display: grid; gap: 1.35rem; grid-template-columns: minmax(320px, .94fr) minmax(0, 1.16fr); }
.calculator-form { background: #f7f9fc; border: 1px solid #e0e8f0; border-radius: 16px; padding: 1rem; }
.calculator-form fieldset { border: 0; margin: 0; min-inline-size: 0; padding: 0; }
.calculator-form fieldset + fieldset { border-top: 1px solid #dfe7ef; margin-top: 1rem; padding-top: 1rem; }
.calculator-form legend { color: #17365a; font: 800 .92rem/1.3 var(--font-heading, Montserrat, sans-serif); margin-bottom: .85rem; padding: 0; }
.calculator-form legend span { color: #738196; font: 500 .76rem/1.3 var(--font-body, Roboto, sans-serif); display: block; margin-top: .25rem; }
.calculator-input-grid { display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field { display: grid; gap: .34rem; }
.field label { color: #344d68; font-size: .78rem; font-weight: 700; line-height: 1.35; }
.field .field-help { color: #78899c; font-size: .7rem; line-height: 1.3; }
.field input { background: #fff; border: 1px solid #cbd8e5; border-radius: 9px; color: #132c48; font: 700 .93rem/1.1 var(--font-body, Roboto, sans-serif); min-height: 42px; padding: .65rem .68rem; transition: border-color .2s ease, box-shadow .2s ease; width: 100%; }
.field input:focus { border-color: #d91f2a; box-shadow: 0 0 0 3px rgba(217,31,42,.12); outline: none; }
.field input[aria-invalid="true"] { border-color: #c72b35; box-shadow: 0 0 0 3px rgba(199,43,53,.1); }
.calculator-actions { align-items: center; display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.05rem; }
.calculator-button { align-items: center; border: 0; border-radius: 9px; cursor: pointer; display: inline-flex; font: 800 .82rem/1 var(--font-heading, Montserrat, sans-serif); gap: .48rem; justify-content: center; padding: .75rem .9rem; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.calculator-button:hover { transform: translateY(-2px); }
.calculator-button:focus-visible { outline: 3px solid rgba(217,31,42,.28); outline-offset: 2px; }
.calculator-button--primary { background: #d91f2a; box-shadow: 0 7px 13px rgba(217,31,42,.2); color: #fff; }
.calculator-button--primary:hover { background: #bd1a24; }
.calculator-button--soft { background: #eaf0f6; color: #1b3859; }
.calculator-button--soft:hover { background: #dae5f0; }
.calculator-feedback { color: #b4232c; font-size: .8rem; font-weight: 700; line-height: 1.45; margin: .85rem 0 0; min-height: 1.2em; }
.calculator-results { display: grid; gap: 1rem; }
.result-metric-grid { display: grid; gap: .75rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.result-metric { background: linear-gradient(145deg, #0c2440, #163d68); border-radius: 14px; color: #fff; min-height: 115px; padding: .9rem; position: relative; overflow: hidden; }
.result-metric::after { background: radial-gradient(circle, rgba(133,235,198,.22), transparent 68%); content: ''; height: 110px; position: absolute; right: -45px; top: -57px; width: 110px; }
.result-metric:nth-child(2) { background: linear-gradient(145deg, #173b56, #1d6b68); }
.result-metric:nth-child(3) { background: linear-gradient(145deg, #402438, #963843); }
.result-metric small { color: rgba(255,255,255,.72); display: block; font-size: .7rem; font-weight: 700; line-height: 1.3; max-width: 105px; position: relative; z-index: 1; }
.result-metric strong { color: #fff; display: block; font: 800 clamp(1.15rem, 2.5vw, 1.58rem)/1.2 var(--font-heading, Montserrat, sans-serif); margin-top: .55rem; overflow-wrap: anywhere; position: relative; z-index: 1; }
.result-card { border: 1px solid #dde6ef; border-radius: 14px; overflow: hidden; }
.result-card h3 { align-items: center; background: #f6f9fc; border-bottom: 1px solid #e0e7ef; color: #17385d; display: flex; font-size: .91rem; gap: .48rem; margin: 0; padding: .8rem .9rem; }
.result-card h3 i { color: #d91f2a; }
.result-table-wrap { overflow-x: auto; }
.result-table { border-collapse: collapse; min-width: 100%; width: 100%; }
.result-table th, .result-table td { border-bottom: 1px solid #ecf0f4; padding: .62rem .85rem; text-align: left; }
.result-table th { color: #66788c; font-size: .72rem; font-weight: 700; }
.result-table td { color: #294460; font-size: .85rem; font-weight: 700; white-space: nowrap; }
.result-table td:last-child, .result-table th:last-child { text-align: right; }
.result-table tr:last-child td { border-bottom: 0; }
.result-table .emphasis td { background: #eef7f4; color: #14674f; }
.result-table .negative td { background: #fff2f2; color: #a92d35; }
.result-explanation { background: #fff9e9; border: 1px solid #f0db98; border-radius: 12px; color: #6b5420; font-size: .79rem; line-height: 1.55; padding: .85rem .95rem; }
.result-explanation strong { color: #4e3a0d; }
.calculator-disclaimer { color: #65778a; font-size: .78rem; line-height: 1.6; margin: 1.1rem 0 0; }
.calculator-section { background: #fff; border-top: 1px solid #e0e8f0; padding: 5.5rem 20px; }
.calculator-section .container { max-width: 1120px; }
.calculator-section__heading { margin: 0 auto 2.2rem; max-width: 750px; text-align: center; }
.calculator-section__heading h2 { font-size: clamp(1.8rem, 4vw, 2.75rem); margin: .65rem 0 .7rem; }
.calculator-section__heading p { color: #5b6c80; line-height: 1.7; margin: 0; }
.calculator-how-grid { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.calculator-how-card { background: #f6f9fc; border: 1px solid #e0e8f0; border-radius: 17px; padding: 1.35rem; }
.calculator-how-card > span { align-items: center; background: #102d4e; border-radius: 50%; color: #aaf0d8; display: inline-flex; font: 800 .75rem/1 var(--font-heading, Montserrat, sans-serif); height: 34px; justify-content: center; margin-bottom: 1rem; width: 34px; }
.calculator-how-card h3 { color: #17385d; font-size: 1rem; margin: 0 0 .45rem; }
.calculator-how-card p { color: #617286; font-size: .9rem; line-height: 1.65; margin: 0; }
.calculator-faq { display: grid; gap: .75rem; margin: 0 auto; max-width: 850px; }
.calculator-faq details { background: #fff; border: 1px solid #dde6ef; border-radius: 12px; padding: 0 1rem; }
.calculator-faq summary { color: #17385d; cursor: pointer; font-family: var(--font-heading, Montserrat, sans-serif); font-size: .93rem; font-weight: 800; list-style: none; padding: 1rem 1.7rem 1rem 0; position: relative; }
.calculator-faq summary::-webkit-details-marker { display: none; }
.calculator-faq summary::after { color: #d91f2a; content: '+'; font-size: 1.25rem; font-weight: 400; position: absolute; right: 0; top: .8rem; }
.calculator-faq details[open] summary::after { content: '–'; }
.calculator-faq details p { color: #5c6d80; line-height: 1.7; margin: 0 0 1rem; }
.calculator-cta { background: linear-gradient(120deg, #061124, #153a60); color: #fff; padding: 4.5rem 20px; }
.calculator-cta .container { align-items: center; display: flex; gap: 2rem; justify-content: space-between; }
.calculator-cta h2 { color: #fff; font-size: clamp(1.7rem, 3vw, 2.45rem); margin: .5rem 0; max-width: 720px; }
.calculator-cta p:not(.section-eyebrow) { color: rgba(255,255,255,.76); line-height: 1.7; margin: 0; max-width: 680px; }
.calculator-cta .section-eyebrow { color: #ffabb0; }
.calculator-cta .cta-button { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 980px) { .calculator-main-grid { grid-template-columns: 1fr; } .calculator-form { padding: 1.15rem; } .calculator-intro { flex-direction: column; } .calculator-privacy-note { max-width: 420px; } }
@media (max-width: 760px) { .calculator-page .page-header { padding-top: 4.75rem; } .calculator-shell { padding-left: 15px; padding-right: 15px; } .calculator-workspace { border-radius: 18px; } .calculator-workspace__top { align-items: flex-start; flex-direction: column; } .calculator-tabs { width: 100%; } .calculator-tab { flex: 1; justify-content: center; } .result-metric-grid, .calculator-how-grid { grid-template-columns: 1fr; } .result-metric { min-height: 92px; } .calculator-cta .container { align-items: flex-start; flex-direction: column; } .calculator-cta .cta-button { text-align: center; width: 100%; } }
@media (max-width: 440px) { .calculator-input-grid { grid-template-columns: 1fr; } .calculator-panel { padding: 1rem; } .calculator-actions { align-items: stretch; flex-direction: column; } .calculator-button { width: 100%; } }
@media print { .navbar, .footer, .scroll-top-btn, .calculator-page .page-header, .calculator-how-grid, .calculator-faq, .calculator-cta, .calculator-actions, .calculator-privacy-note, .footer-legal, .cookie-banner, .cookie-modal { display: none !important; } .calculator-shell { margin: 0; max-width: none; padding: 0; } .calculator-workspace { border: 0; box-shadow: none; } .calculator-panel { display: none !important; } .calculator-panel.is-active { display: block !important; } .calculator-results { break-inside: avoid; } }