html{font-size:16px}body{margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{min-height:100vh}:root{--magenta: #e20074;--magenta-dark: #8f0c57;--dark-gray: #262626;--light-gray: #ededed;--alt-dark: #616161;--white: #ffffff}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;background:var(--light-gray);color:var(--dark-gray);line-height:1.4}.app{min-height:100vh;display:flex;flex-direction:column}.hero{background:linear-gradient(135deg,var(--magenta) 0%,var(--magenta-dark) 100%);color:var(--white);padding:48px 24px;text-align:center;border-bottom:6px solid var(--dark-gray);position:relative}.logo-placeholder{width:50px;height:50px;background:#fff3;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800;margin:0 auto 16px}.hero h1{font-size:36px;font-weight:800;letter-spacing:.4px;margin-bottom:12px}.hero p{font-size:16px;opacity:.95;max-width:600px;margin:0 auto}.container{max-width:1400px;margin:0 auto;padding:40px 24px 48px;flex:1}.layout{display:grid;grid-template-columns:repeat(3,minmax(400px,425px));gap:36px;justify-content:center;align-items:flex-start}@media(max-width:1200px){.layout{grid-template-columns:minmax(320px,425px);justify-content:center;gap:24px}}@media(max-width:768px){.layout{grid-template-columns:1fr}}.info-box{position:sticky;top:20px;border-left:4px solid var(--magenta)}@media(max-width:1200px){.info-box{position:static;top:auto}}.info-header{border-bottom:2px solid var(--light-gray);padding-bottom:12px;margin-bottom:16px}.info-header h3{font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--magenta)}.info-content h4{font-size:15px;font-weight:700;color:var(--dark-gray);margin-bottom:8px;line-height:1.3}.info-content p{font-size:13px;color:var(--alt-dark);line-height:1.5}.info-default{font-style:italic;opacity:.8}.card{background:var(--white);border-radius:12px;padding:24px;box-shadow:0 14px 30px #0000001f;margin-bottom:24px}.calculator-form{position:sticky;top:20px;max-height:calc(100vh - 40px);overflow-y:auto}@media(max-width:1200px){.calculator-form{position:static;max-height:none}}.form-section{margin-bottom:24px}.form-section h3{font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px;color:var(--dark-gray)}.section-help{display:block;color:var(--alt-dark);font-size:13px;margin-bottom:12px}label{display:block;margin-bottom:16px;font-weight:600;color:var(--dark-gray);font-size:14px}input,select{width:100%;padding:12px;border:1px solid #ddd;border-radius:8px;font-size:14px;margin-top:6px;background:var(--light-gray);font-family:inherit;transition:border-color .2s,background .2s}input:focus,select:focus{outline:none;border-color:var(--magenta);background:var(--white)}option[title]{cursor:help}small{display:block;margin-top:4px;color:var(--alt-dark);font-size:12px}.section-header.expandable{display:flex;align-items:center;gap:8px;-webkit-user-select:none;user-select:none;transition:color .2s}.section-header.expandable:hover{color:var(--magenta)}.expand-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;font-size:12px;transition:transform .2s}small[title]{cursor:help;display:flex;align-items:center;gap:4px}.mitigations-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:12px}.mitigation-checkbox{display:flex;align-items:center;padding:10px;background:var(--light-gray);border-radius:8px;cursor:pointer;transition:background .2s,transform .1s;font-weight:500}.mitigation-checkbox:hover{background:#e0e0e0}.mitigation-checkbox input[type=checkbox]{width:auto;margin:0 8px 0 0;cursor:pointer}.mitigation-checkbox input[type=checkbox]:checked+span{color:var(--magenta);font-weight:600}button,.submit-button{background:var(--magenta);color:var(--white);border:none;border-radius:8px;padding:14px 28px;font-size:16px;font-weight:700;cursor:pointer;transition:all .2s;width:100%;margin-top:8px}button:hover:not(:disabled),.submit-button:hover:not(:disabled){background:var(--magenta-dark);transform:translateY(-2px);box-shadow:0 8px 20px #e200744d}button:active:not(:disabled),.submit-button:active:not(:disabled){transform:translateY(0)}button:disabled,.submit-button:disabled{opacity:.5;cursor:not-allowed}.results-container{display:flex;flex-direction:column;gap:32px}.details-wrapper{overflow:hidden;max-height:0;opacity:0;transform:translateY(-8px);transition:max-height .32s ease,opacity .24s ease,transform .32s ease;will-change:max-height,opacity,transform;pointer-events:none}.details-wrapper.open{max-height:4000px;opacity:1;transform:translateY(0);pointer-events:auto}.details-area{margin-top:28px;display:grid;grid-template-columns:repeat(3,minmax(400px,425px));gap:24px;justify-content:center;align-items:start}@media(max-width:1200px){.details-area{grid-template-columns:minmax(320px,425px);justify-content:center}}.result-card{text-align:center;background:linear-gradient(135deg,var(--magenta) 0%,var(--magenta-dark) 100%);color:var(--white);padding:32px 24px;display:block;clear:both}.result-card.clickable{cursor:pointer;-webkit-user-select:none;user-select:none}.result-card.clickable:focus{outline:3px solid rgba(255,255,255,.6);outline-offset:3px}.result-card h2{font-size:18px;text-transform:uppercase;letter-spacing:1px;margin-bottom:16px}.result-number{font-size:64px;font-weight:800;margin:20px 0 16px;line-height:1;letter-spacing:-1px}.details-cta{margin-top:22px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:8px 12px;border-radius:999px;background:#ffffff24;font-size:12px;font-weight:700;letter-spacing:.2px}.details-cta-text{opacity:.95}.details-cta-icon{font-size:12px;opacity:.95}.result-card .result-number{word-break:break-word}.currency-note{font-size:14px;opacity:.9}.gdpr-fine{margin-top:28px;padding-top:28px;border-top:2px solid rgba(255,255,255,.4)}.gdpr-fine h3{font-size:13px;text-transform:uppercase;letter-spacing:1px;margin-bottom:12px;font-weight:600;opacity:.95}.fine-amount{font-size:36px;font-weight:800;letter-spacing:-.5px}.total-impact{margin-top:28px;padding-top:28px;border-top:2px solid rgba(255,255,255,.4)}.total-impact h3{font-size:13px;text-transform:uppercase;letter-spacing:1px;margin-bottom:12px;font-weight:600;opacity:.95}.impact-amount{font-size:44px;font-weight:800;letter-spacing:-1px}.breakdown-list{display:flex;flex-direction:column;gap:10px}.breakdown-item{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;background:var(--light-gray);border-radius:8px;border-left:4px solid transparent;transition:all .2s}.breakdown-item:hover{background:#f5f5f5;border-left-color:var(--magenta)}.component-name{font-weight:500;color:var(--dark-gray);font-size:14px;flex:1}.component-amount{font-weight:700;color:var(--magenta);font-size:14px;text-align:right;min-width:100px}.metrics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px}.metric{padding:18px 16px;background:var(--light-gray);border-radius:8px;text-align:center;border-top:3px solid transparent;transition:all .2s}.metric:hover{border-top-color:var(--magenta);background:#f9f9f9}.metric-label{font-size:11px;color:var(--alt-dark);text-transform:uppercase;letter-spacing:.7px;margin-bottom:10px;font-weight:600}.metric-value{font-size:26px;font-weight:800;color:var(--dark-gray);line-height:1.2}.savings-card{background:linear-gradient(135deg,#00a800,#007a00);color:var(--white);text-align:center;padding:32px 24px}.savings-card h2{font-size:16px;text-transform:uppercase;letter-spacing:1px;margin-bottom:16px;font-weight:600;opacity:.95}.savings-amount{font-size:48px;font-weight:800;margin:16px 0;letter-spacing:-1px}.savings-card p{opacity:.95;font-size:14px;line-height:1.5}.calculation-details{display:flex;flex-direction:column;gap:10px}.detail-row{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;background:var(--light-gray);border-radius:8px;font-size:13px;line-height:1.4}.detail-row.total-row{background:var(--dark-gray);color:var(--white);font-weight:700;font-size:14px;margin-top:8px;padding:16px}.detail-label{color:var(--alt-dark);min-width:60%}.detail-value{text-align:right;min-width:40%;font-weight:600;color:var(--dark-gray)}.detail-row.total-row .detail-value{color:var(--white)}.savings-text{color:#00a800;font-weight:700}.timestamp{display:block;text-align:center;color:var(--alt-dark);font-size:11px;margin-top:16px;opacity:.8}.error-card{background:#ffe5e5;border-left:4px solid #d32f2f}.error-card h2{color:#d32f2f;margin-bottom:8px}.error-card p{color:var(--dark-gray)}.placeholder-card{text-align:center;padding:48px 24px;background:var(--light-gray);border:2px dashed #ccc}.placeholder-card h3{color:var(--alt-dark);margin-bottom:8px}.placeholder-card p{color:var(--alt-dark);font-size:14px}.footer{background:var(--dark-gray);color:var(--white);text-align:center;padding:24px;font-size:13px}.footer p{opacity:.8}.footer-disclaimer{max-width:900px;margin:10px auto 0;font-size:12px;line-height:1.5;opacity:.7}