:root{color-scheme:light;--bg:#f7f8f2;--ink:#293326;--muted:#808477;--green:#45553a;--line:#e7e9df;--accent:#dce8b5;font-family:Arial,Helvetica,sans-serif;font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #829758;outline-offset:4px}button{transition:background .16s,color .16s,transform .16s}button:active{transform:translateY(1px)}.page{max-width:1152px;margin:auto;padding:0 48px}.header{height:104px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;text-decoration:none;color:var(--ink);font-size:24px;font-weight:700;letter-spacing:-1px}.brand-icon{display:grid;place-items:center;background:var(--green);color:#f0f5df;width:35px;height:35px;border-radius:11px;margin-right:10px;font-size:23px;font-weight:400}.brand-light{font-weight:400}.brand-dot{color:#839554}.header-note{display:flex;align-items:center;gap:9px;font-size:11px;color:#777f70}.status-dot{height:6px;width:6px;background:#829858;border-radius:50%}.intro{position:relative;padding:57px 0 35px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:1.7px}.intro .eyebrow{display:flex;align-items:center;gap:9px;color:#74815e}.intro .eyebrow>span{width:19px;height:1px;background:#829858}h1{position:relative;width:fit-content;font-size:64px;line-height:1.02;letter-spacing:-3.2px;font-weight:400;margin:23px 0 20px}h1 em{font-family:Georgia,'Times New Roman',serif;font-weight:400;color:#6f8052}.sparkle{position:absolute;font-size:47px;color:#a8b681;top:12px;right:-79px;transform:rotate(12deg)}.intro>p{font-size:13px;line-height:1.8;color:#7b8072;margin:0}.calculator{display:grid;grid-template-columns:1.06fr 1fr;border:1px solid #e2e5d9;border-radius:22px;background:#fff;overflow:hidden;box-shadow:0 12px 35px #3c482407}.input-panel{padding:32px 37px 25px}.panel-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:27px}.panel-heading .eyebrow{font-size:9px;color:#8b9080;letter-spacing:1.4px}h2{font-size:21px;font-weight:500;letter-spacing:-.5px;margin:8px 0 0}.reset{border:0;background:none;color:#8a8e83;font-size:11px;padding:8px 0 8px 8px}.reset span{font-size:17px;margin-right:4px}.reset:hover{color:var(--green)}.tabs{display:flex;background:#f4f5ef;border-radius:9px;padding:4px;gap:3px;margin-bottom:27px}.tab{flex:1;border:0;background:none;color:#878c7f;padding:11px 5px;border-radius:6px;font-size:11px}.tab.active{background:#fff;color:#3e4a32;box-shadow:0 2px 5px #26301c09;font-weight:700}.tab span{margin-left:4px;color:#80945b}label{font-size:11px;font-weight:600;display:block;margin-bottom:10px}.label-note{font-size:10px;color:#959a8b;font-weight:400;margin-left:5px}.input-wrap{display:flex;align-items:center;border:1px solid #dfe3d5;background:#fff;border-radius:9px;height:49px;overflow:hidden}.input-wrap:focus-within,.stepper:focus-within{border-color:#849562;box-shadow:0 0 0 3px #82985813}input{min-width:0;width:100%;border:0;background:none;color:var(--ink);outline:none;padding:14px;font-size:15px}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{appearance:textfield;-moz-appearance:textfield}.prefix{font-size:14px;color:#8b9180;padding-left:16px;padding-right:2px}.price-wrap input{font-size:22px;font-weight:500;letter-spacing:.5px}.price-wrap{height:58px}.suffix{color:#939b85;padding-right:16px;font-size:14px}.field-row{display:flex;gap:20px;margin-top:23px}.field{flex:1;min-width:0}.stepper{display:flex;border:1px solid #dfe3d5;border-radius:9px;height:49px;align-items:center}.stepper input{text-align:center;padding:10px 0;font-size:14px}.stepper button{background:none;border:0;color:#7c8770;font-size:20px;min-width:40px;align-self:stretch}.stepper button:hover{background:#f4f5ed}.presets{display:flex;gap:8px;margin-top:13px}.presets button{border:1px solid #e8ebdf;border-radius:5px;background:white;font-size:10px;color:#8a927e;min-height:32px;flex:1}.presets button.selected,.presets button:hover{background:#eff3e4;color:#596d39;border-color:#dfe7cc}.live-note{margin-top:30px;padding-top:18px;border-top:1px solid #eff0e9;font-size:10px;color:#949989;display:flex;gap:9px;align-items:center}.live-icon{font-size:19px;color:#88996b}.second-field{margin-top:20px}.second-field p{font-size:11px;color:#818874;line-height:1.6}.error{font-size:12px;color:#a2442d;line-height:1.5}.result-panel{background:#f0f3e7;padding:33px 35px 22px;border-left:1px solid #e5e9dc;min-width:0}.result-top{display:flex;align-items:center;justify-content:space-between}.result-top .eyebrow{font-size:9px;color:#7e8a6c;letter-spacing:1.5px}.result-icon{border:1px solid #dbe1cc;border-radius:50%;width:29px;height:29px;display:grid;place-items:center;color:#819364}.result-label{font-size:12px;color:#7e886f;margin:25px 0 10px}.total{font-size:46px;letter-spacing:-2px;line-height:1.15;font-weight:500;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}.original{margin-top:12px;display:flex;align-items:center;gap:11px;font-size:12px;color:#969d89}.original>span:first-child{text-decoration:line-through}.discount-badge{background:#e1e9cf;color:#6f8051;border-radius:4px;padding:4px 6px;font-size:10px}.saving-box{margin:25px 0 23px;padding:16px;background:#e4ebd5;border:1px solid #d9e3c6;border-radius:10px;display:flex;gap:11px;align-items:center}.saving-icon{font-size:28px;color:#768858}.saving-box div{display:grid;gap:5px}.saving-box div>span{font-size:10px;color:#7e8a69}.saving-box strong{font-size:18px;font-weight:500;overflow-wrap:anywhere}.saving-tag{font-family:Georgia,serif;font-style:italic;font-size:12px;color:#87986b;margin-left:auto;white-space:nowrap}.breakdown>div{display:flex;justify-content:space-between;gap:15px;font-size:11px;line-height:1.5;margin-bottom:13px;color:#838b77}.breakdown strong{font-weight:500;color:#556448;text-align:right;overflow-wrap:anywhere;min-width:0}.breakdown .saving-value{color:#7a8f58}.breakdown .breakdown-total{padding-top:14px;border-top:1px dashed #d3dbc4;margin:17px 0 24px}.copy-button{width:100%;display:flex;align-items:center;justify-content:center;gap:9px;background:#414f35;color:#f7f9f0;border:0;border-radius:8px;padding:14px;font-size:11px}.copy-button:hover{background:#2e3c24}.copy-button:disabled{opacity:.5;cursor:not-allowed}.copy-status{display:block;text-align:center;font-size:11px;color:#526a3f;margin-top:8px}.copy-status:empty{display:none}.result-footnote{text-align:center;font-size:9px;color:#949c85;margin:12px 0 0}.perks{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:30px 0}.perks>div{display:flex;align-items:center;gap:12px}.perks>div>span{display:grid;place-items:center;border:1px solid #e4e8da;border-radius:10px;width:37px;height:37px;color:#869570;font-size:20px;flex-shrink:0}.perks p{display:grid;gap:6px;margin:0;font-size:10px;color:#929887}.perks strong{font-size:11px;font-weight:500;color:#66715b}.tip{display:flex;align-items:center;gap:20px;padding:18px 21px;border:1px solid #e6e9dd;border-radius:10px;background:#f3f5ec}.tip-label{font-size:9px;letter-spacing:1px;color:#849363;white-space:nowrap;font-weight:700}.tip p{font-size:10px;color:#8b927e;line-height:1.8;margin:0}.tip button{font-size:10px;background:none;border:0;color:#617545;font-weight:600;padding:0 0 0 7px}.mobile-break{display:none}footer{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:29px 0;margin-top:28px;border-top:1px solid var(--line);color:#959b8b;font-size:9px}footer>span:first-child{color:#758268}.footer-star{color:#8c9c71;font-size:16px;margin-left:6px}[hidden]{display:none!important}input[aria-invalid=true]{color:#a2442d}@media(min-width:1000px){.intro{padding-top:53px}.intro>p{position:absolute;right:8px;bottom:51px}.calculator{margin-top:2px}}@media(max-width:760px){.page{padding:0 25px}.header{height:83px}.intro{padding-top:38px}h1{font-size:54px}.calculator{grid-template-columns:1fr}.input-panel{padding:28px}.result-panel{padding:28px;border-left:0;border-top:1px solid #e5e9dc}.total{font-size:46px}.perks{gap:14px}.perks>div{align-items:flex-start;gap:8px}.perks p{line-height:1.5}.perks>div>span{width:28px;height:28px;font-size:17px;border-radius:8px}.tip{align-items:flex-start;gap:12px}footer>span:last-child{display:none}}@media(max-width:420px){.page{padding:0 18px}.header-note{font-size:9px;max-width:115px;line-height:1.6}.brand{font-size:22px}.brand-icon{width:31px;height:31px}.intro .eyebrow{font-size:8px;letter-spacing:1.3px}h1{font-size:51px}.sparkle{font-size:35px;right:-48px}.input-panel,.result-panel{padding:25px 22px}.total{font-size:41px}.perks{grid-template-columns:1fr;gap:17px;padding:0 5px}.perks>div{align-items:center;gap:12px}.perks p{gap:2px}.perks>div>span{width:33px;height:33px}.tip{display:block}.tip-label{display:block;margin-bottom:8px}.mobile-break{display:block}.tip button{padding-left:0}.field-row{gap:14px}.saving-tag{font-size:11px}footer{font-size:8px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
:root { color-scheme: light; font-family: 'Plus Jakarta Sans', Arial, sans-serif; --bg: #fff; --ink: #222; --muted: #777; --green: #292929; --line: #eaeaea; --accent: #f3f3f3; }
.brand-icon { background: #292929; color: #fff; }
.brand-dot, .header-note { color: #777; }
.status-dot { background: #999; }
.calculator { border-color: #e5e5e5; box-shadow: 0 10px 32px #00000005; }
.result-panel { background: #fff; border-color: #eaeaea; }
.panel-heading .eyebrow, .result-top .eyebrow { color: #777; }
.reset, .label-note, .prefix, .suffix { color: #777; }
.input-wrap { border-color: #dedede; }
.input-wrap:focus-within { border-color: #888; box-shadow: 0 0 0 3px #00000006; }
button:focus-visible, a:focus-visible { outline-color: #777; }
.presets button { border-color: #e5e5e5; color: #666; }
.presets button.selected, .presets button:hover { background: #f2f2f2; border-color: #ccc; color: #222; }
.live-note { border-color: #eee; color: #777; }
.live-icon { color: #888; }
.result-icon { border-color: #e5e5e5; color: #777; }
.result-label, .original { color: #777; }
.discount-badge { background: #f1f1f1; color: #555; }
.saving-box { background: #f7f7f7; border-color: #eaeaea; }
.saving-icon, .saving-tag, .saving-box div > span { color: #777; }
.breakdown > div { color: #777; }
.breakdown strong, .breakdown .saving-value { color: #333; }
.breakdown .breakdown-total { border-color: #ddd; }
.copy-button { background: #292929; color: #fff; }
.copy-button:hover { background: #111; }
.copy-status { color: #555; }
.result-footnote { color: #777; }
.perks > div > span { border-color: #e5e5e5; color: #777; }
.perks p, .perks strong { color: #777; }
footer, footer > span:first-child, .footer-star { color: #777; }
.total-highlight { margin-top: 10px; padding: 12px 16px; background: #f5f5f5; border: 1px solid #e5e5e5; border-left: 4px solid #292929; border-radius: 10px; }
.total-highlight .result-label { margin: 0 0 6px; color: #555; font-weight: 500; }
.total-highlight .total { color: #111; font-weight: 700; font-size: clamp(28px, 3vw, 34px); letter-spacing: -1px; }
.brand { min-width: 0; letter-spacing: -.7px; }
.brand-icon { flex-shrink: 0; }
#brand-name { font-size: clamp(16px, 2.5vw, 22px); }
@media (max-width: 540px) { .header-note { display: none; } }
.saving-tag { font-family: inherit; font-style: normal; }
.total { min-height: 1.15em; }
.original { min-height: 20px; }
#saving { min-height: 1.2em; }
.page { max-width: 1080px; padding: 0 32px; }
.header { height: 80px; }
main { padding-top: 24px; }
.calculator { grid-template-columns: 1fr 1fr; margin-top: 0; border-radius: 18px; }
.input-panel, .result-panel { padding: 26px 30px; }
.input-panel { display: flex; flex-direction: column; min-width: 0; }
.panel-heading { margin-bottom: 24px; }
.price-wrap { height: 54px; flex-shrink: 0; }
.field-row { margin-top: 22px; }
.presets { gap: 7px; margin-top: 12px; }
.presets button { min-height: 36px; }
.live-note { margin-top: 22px; padding-top: 16px; }
.presets + .error { margin-bottom: 16px; }
.result-top { min-height: 29px; }
.result-label { margin: 16px 0 8px; }
.total { font-size: clamp(32px, 3.8vw, 42px); letter-spacing: -1.5px; }
.original { margin-top: 6px; }
.saving-box { margin: 12px 0; padding: 9px 12px; }
.saving-box strong { font-size: 15px; }
.saving-box div { gap: 3px; }
.breakdown > div { margin-bottom: 7px; }
.breakdown .breakdown-total { padding-top: 8px; margin: 8px 0 10px; }
.copy-button { min-height: 44px; padding: 10px; }
.result-footnote { margin-top: 8px; line-height: 1.5; }
.perks { margin: 22px 0; }
.result-panel { display: flex; flex-direction: column; }
.empty-result { margin: auto 0; padding: 28px 24px; border: 1px dashed #e5e5e5; border-radius: 12px; background: #fafafa; color: #777; font-size: 13px; line-height: 1.8; text-align: center; }
.result-panel:has(#results[hidden]) .result-footnote { margin-top: 16px; }
.language-bar { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 16px 0; }
.language-bar > span { color: #777; font-size: 11px; margin-right: 8px; }
.language-bar button { min-height: 36px; padding: 8px 14px; border: 1px solid transparent; border-radius: 7px; background: #fff; color: #777; font-size: 11px; }
.language-bar button[aria-pressed="true"] { background: #f5f5f5; border-color: #e5e5e5; color: #222; }
.language-bar button:hover { color: #222; background: #f5f5f5; }
footer { margin-top: 0; padding: 18px 0; }
@media (max-width: 760px) {
  .page { max-width: 580px; padding: 0 22px; }
  .header { height: 72px; }
  main { padding-top: 20px; }
  .calculator { grid-template-columns: 1fr; }
  .input-panel, .result-panel { padding: 24px; }
  .panel-heading { margin-bottom: 22px; }
  .live-note { margin-top: 20px; padding-top: 14px; }
  .empty-result { margin: 18px 0 0; padding: 22px 18px; }
  .total { font-size: clamp(32px, 7vw, 42px); }
  .perks { gap: 12px; }
}
@media (max-width: 420px) {
  .page { padding: 0 16px; }
  .input-panel, .result-panel { padding: 22px 20px; }
  .calculator { border-radius: 16px; }
  .perks { margin: 20px 0; gap: 14px; }
  footer { margin-top: 0; padding: 16px 0; }
}