:root{--ink:#213b35;--green:#176449;--lime:#dced9b;--muted:#78837d;--border:#e2e8e1}*{box-sizing:border-box}body{background:#f6f8f3;color:var(--ink);font-family:'Google Sans',Arial,sans-serif;font-size:14px}.shell{max-width:1180px}header{background:#fff;border-bottom:1px solid var(--border)}header .shell{height:94px}.brand{font-family:inherit;font-size:28px;font-weight:800;color:var(--ink);text-decoration:none;position:relative;padding-left:42px;letter-spacing:-1.5px}.brand>span:not(.brand-mark){font-weight:500}.brand-mark{position:absolute;left:0;top:0;color:var(--green);font-size:39px}.brand small{display:block;font-size:7px;letter-spacing:1.7px;margin-top:2px}.nav-link{color:#56635b;font-size:13px}.language{border:1px solid var(--border);border-radius:7px;padding:9px;background:white;color:var(--ink);font-size:12px}.hero{padding:55px 0 43px}.eyebrow{font-size:10px;letter-spacing:1.9px;font-weight:700;display:flex;align-items:center;gap:8px;color:var(--green)}.eyebrow>span:first-child:empty{width:6px;height:6px;border-radius:50%;background:var(--green)}h1{font-family:inherit;font-size:43px;font-weight:800;line-height:1.25;letter-spacing:-1.8px;margin:16px 0} .hero p{color:#7c867e;line-height:1.8;margin:0;font-size:14px}.hero-note{background:#eaf0df;border:1px solid #e0e7d6;border-radius:15px;padding:25px;display:flex;gap:14px;position:relative;min-height:147px}.note-icon{background:#dbe8ca;border-radius:50%;padding:11px;height:46px;color:#4c6942}.hero-note strong{font-size:13px}.hero-note p{font-size:12px;line-height:1.65;margin-top:7px;padding-right:6px}.note-stars{position:absolute;right:24px;bottom:13px;letter-spacing:3px;color:#87a55c;font-size:12px}.workspace{background:white;border:1px solid var(--border);border-radius:16px;box-shadow:0 8px 30px #243c3505;overflow:hidden}.steps{display:flex;align-items:center;gap:32px;background:#fbfcf9;border-bottom:1px solid var(--border);padding:22px 35px}.steps>div{display:flex;align-items:center;gap:11px;color:#8a948b;font-size:12px}.steps span{font-size:10px;border-radius:50%;width:28px;height:28px;background:#eff2eb;display:grid;place-items:center}.steps .active{color:var(--green)}.steps .active span{background:var(--green);color:#fff}.steps>svg{width:14px;color:#b9c1b7}.workspace-body{padding:32px 35px}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}.muted{color:#8b9487;font-size:9px}h2{font-family:inherit;font-size:21px;font-weight:800;letter-spacing:-.6px;margin:9px 0 0}.pill{display:flex;gap:6px;align-items:center;background:#f2f6e9;border-radius:30px;padding:8px 12px;color:#6b8052;font-size:10px}.pill svg{width:13px;height:13px}.choice{border:1px solid var(--border);border-radius:10px;padding:18px;display:flex;align-items:center;gap:14px;width:100%;background:#fff;text-align:left;color:var(--ink)}.choice.active{border-color:#65997a;background:#f6faf3;box-shadow:0 0 0 1px #65997a}.choice-icon{background:#f0f3eb;border-radius:10px;padding:12px;color:#74836b}.choice.active .choice-icon{background:#e3edd9;color:var(--green)}svg{width:20px;height:20px;stroke-width:1.7}.choice strong{display:block;font-size:13px}.choice small{display:block;color:#8b9389;font-size:11px;margin-top:5px}.radio-dot{margin-left:auto;min-width:16px;height:16px;border:1px solid #cbd5c8;border-radius:50%}.active .radio-dot{border:5px solid var(--green)}.device-label{margin:25px 0 12px;font-size:12px;font-weight:500}.devices{display:grid;grid-template-columns:repeat(7,1fr);gap:10px}.device{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;border:1px solid var(--border);border-radius:9px;background:white;min-height:90px;color:#abb1a7;position:relative;font-size:10px}.device:disabled{opacity:.8}.device.active{border-color:#7a9e73;background:#f5f8ed;color:var(--green);box-shadow:0 0 0 1px #7a9e73}.device svg{width:24px;height:24px}.device small{font-size:8px;color:#aab0a5}.device.active:after{content:'✓';position:absolute;right:8px;top:5px;font-size:10px}.divider{border-top:1px solid var(--border);margin:30px 0}.db-label{display:flex;align-items:center;gap:6px;color:#879080;font-size:10px}.db-label>span:first-child{width:5px;height:5px;background:#799361;border-radius:50%}.product-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.product-column{position:relative;min-width:0}.product-column>label:not(.price-label){font-size:12px;font-weight:700;display:flex;gap:8px;align-items:center;margin-bottom:10px}.product-column>label:not(.price-label)>span{width:21px;height:21px;border-radius:6px;background:#edf1e8;display:grid;place-items:center;font-size:10px;color:#6a795e}.searchbox{display:flex;align-items:center;border:1px solid #dce3d8;border-radius:8px;padding:10px 12px;gap:9px}.searchbox svg{width:16px;color:#939c8d}.searchbox input{border:0;width:100%;outline:none;font-size:12px;background:transparent}.search-hint{font-size:10px;color:#939b8f;margin:7px 0 13px}.search-list{max-height:250px;overflow:auto;display:none;border:1px solid var(--border);border-radius:8px;margin-bottom:12px}.search-list.open{display:block}.search-list button{border:0;border-bottom:1px solid var(--border);padding:12px;text-align:left;width:100%;background:#fff;display:block;color:var(--ink);font-size:11px}.search-list button:hover{background:#f0f6e9}.search-list small{display:block;color:var(--muted)}.search-list p{padding:12px;font-size:11px;margin:0}.product-card{border:1px solid var(--border);border-radius:10px;background:#fcfdf9;padding:17px;min-height:155px}.product-top{display:flex;gap:14px;align-items:center}.ac-art{width:74px;height:52px;border-radius:8px;background:#edf1e7;display:grid;place-items:center;color:#8ca079}.ac-art svg{width:38px;height:38px}.product-name{flex:1;min-width:0}.product-name strong{font-size:10px;letter-spacing:1px;color:#79846e;display:block}.product-name h3{font-size:12px;font-weight:700;margin:5px 0;overflow-wrap:anywhere;line-height:1.5}.product-name small{font-size:9px;color:#8c9584}.stars{color:#a3b45e;letter-spacing:2px;font-size:12px}.specs{display:flex;gap:15px;border-top:1px solid var(--border);margin-top:13px;padding-top:12px;flex-wrap:wrap;font-size:10px;color:#87917e}.specs b{color:#4b5a42;font-weight:500}.empty{display:flex;align-items:center;justify-content:center;gap:10px;color:#9ca692;font-size:12px;min-height:119px}.price-label{font-size:10px;color:#7c8774;margin:13px 0 6px;display:block}.input-unit{display:flex;align-items:center;gap:9px;border:1px solid var(--border);background:white;border-radius:7px;padding:10px 12px}.input-unit input{width:100%;border:0;background:transparent;outline:none;min-width:0;font-size:12px;color:var(--ink)}.input-unit span{font-size:10px;color:#9da58f;white-space:nowrap}.usage{padding:22px;background:#f7f9f3;border:1px solid #e9eddf;border-radius:10px;margin-top:26px}.usage-title{display:flex;gap:10px;align-items:center;margin-bottom:17px}.usage-title>svg{color:#82916f;width:18px}.usage-title strong{font-size:12px;display:block}.usage-title small{color:#97a08b;font-size:10px;display:block;margin-top:3px}.usage label{font-size:10px;color:#7e8873;margin-bottom:7px}.calculate-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:26px}.calculate-row>span{font-size:10px;color:#939d88;display:flex;gap:7px;align-items:center}.calculate-row>span svg{width:14px}.btn-main{border:0;border-radius:8px;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;gap:11px;padding:14px 22px;font-size:12px;font-weight:600}.btn-main:hover{background:#0d5038}.btn-main svg{width:16px}.btn-main:disabled{opacity:.5}#formError{color:#a94e3e;font-size:12px;margin-top:12px}.method{display:flex;gap:17px;padding:32px 4px;max-width:960px}.method-icon{border-radius:8px;background:#eaf0e2;padding:11px;height:42px;color:#8a9d74}.method h3{font-size:12px;font-weight:700;margin:3px 0 9px}.method p{font-size:11px;color:#8d9785;line-height:1.8;margin-bottom:5px}footer{border-top:1px solid var(--border);padding:24px 0;display:flex;justify-content:space-between;gap:12px;font-size:9px;color:#8f9988}.footer-leaf{display:flex;gap:6px;align-items:center}.footer-leaf svg{width:12px;height:12px}#results{margin-top:28px;background:#fff;border:1px solid var(--border);border-radius:16px;padding:30px;scroll-margin-top:20px}.savings-banner{background:var(--green);color:white;border-radius:12px;padding:26px;display:flex;justify-content:space-between;gap:20px;margin:20px 0}.savings-banner small{color:#bdd2bf}.savings-banner h3{font-family:inherit;font-size:30px;margin:7px 0}.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.metric{border:1px solid var(--border);border-radius:9px;padding:18px}.metric h4{font-size:11px;color:#83917b}.metric strong{font-size:19px;display:block}.metric small{font-size:10px;color:#8b957f}.comparison{font-size:12px;margin-top:25px}.comparison th,.comparison td{padding:14px 10px;vertical-align:middle}.comparison th{color:#7e8975;font-weight:500}.result-note{font-size:11px;color:#8d9785;line-height:1.8}.product-controls{display:flex;align-items:center;gap:13px;margin-top:18px}.product-controls small{color:#879080;font-size:10px}.btn-outline{border:1px solid #8ba594;background:#fff;color:var(--green);border-radius:8px;padding:10px 14px;display:flex;align-items:center;gap:7px;font-size:11px;font-weight:600}.btn-outline svg,.remove-product svg{width:15px;height:15px}.remove-product{position:absolute;right:0;top:-6px;border:0;background:transparent;color:#9a6a61;padding:6px;z-index:2}.result-actions{display:flex;gap:12px;align-items:center;justify-content:flex-end}.result-edit{text-decoration:none;min-height:46px;padding:13px 18px}.result-edit:hover{background:#f2f7ef}a{color:var(--green)}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #a5bc6a;outline-offset:3px}@media(max-width:991px){.hero-note{margin-top:25px}.hero{padding-top:35px}.devices{grid-template-columns:repeat(4,1fr)}.product-grid{grid-template-columns:1fr}}@media(max-width:575px){.shell{padding-left:17px;padding-right:17px}header .shell{height:78px}.brand{font-size:24px}.language{max-width:115px;font-size:10px}h1{font-size:34px}.hero p br{display:none}.hero-note{min-height:120px}.workspace-body{padding:22px 17px}.steps{gap:9px;padding:17px 14px;justify-content:space-between}.steps>div{font-size:9px;gap:5px}.steps span{width:21px;height:21px;font-size:8px}.steps>svg{display:none}.pill{display:none}.devices{gap:7px}.device{font-size:9px;min-height:82px}.choice{padding:13px}.choice small{font-size:10px}.usage{padding:16px}.calculate-row{flex-direction:column;align-items:stretch}.btn-main{width:100%}.result-grid{grid-template-columns:1fr}.savings-banner{flex-direction:column}.comparison{font-size:10px}.comparison th,.comparison td{padding:10px 7px}#results{padding:20px 15px}.result-actions{flex-direction:column;align-items:stretch}footer{flex-wrap:wrap;line-height:1.8}footer>span:nth-child(2){display:none}}@media print{header,.hero,.workspace,.method,footer,.result-actions{display:none}#results{border:0;padding:0}.savings-banner{color:#000;background:#eee}body{background:white}}

/* Readability scale */
body{font-size:16px}.nav-link{font-size:15px}.language{font-size:14px}.eyebrow{font-size:12px}.hero p{font-size:16px}.hero-note strong{font-size:15px}.hero-note p{font-size:14px}.steps>div{font-size:14px}.steps span{font-size:12px}.muted{font-size:11px}h2{font-size:24px}.pill,.db-label{font-size:12px}.choice strong{font-size:15px}.choice small{font-size:13px}.device-label{font-size:14px}.device{font-size:12px}.device small{font-size:10px}.product-column>label:not(.price-label){font-size:14px}.searchbox input{font-size:14px}.search-hint{font-size:12px}.search-list button,.search-list p{font-size:13px}.product-name strong{font-size:12px}.product-name h3{font-size:14px}.product-name small{font-size:12px}.specs{font-size:12px}.empty{font-size:14px}.price-label{font-size:12px}.input-unit input{font-size:14px}.input-unit span{font-size:12px}.usage-title strong{font-size:14px}.usage-title small,.usage label{font-size:12px}.calculate-row>span{font-size:12px}.btn-main{font-size:14px}.method h3{font-size:14px}.method p{font-size:13px}footer{font-size:11px}.savings-banner small{font-size:13px}.metric h4{font-size:13px}.metric small{font-size:12px}.comparison{font-size:14px}.result-note{font-size:13px}.product-controls small,.btn-outline{font-size:13px}
@media(max-width:575px){body{font-size:15px}.nav-link{font-size:14px}h1{font-size:36px}.hero p{font-size:15px}.steps>div{font-size:11px}.steps span{font-size:10px}.device{font-size:11px}.choice small{font-size:12px}.comparison{font-size:12px}}
.price-source{display:block;min-height:18px;margin-top:6px;color:#557b64;font-size:12px;line-height:1.35}
/* Compact vertical rhythm */
body{line-height:1.35}.hero p{line-height:1.5}.hero-note p{line-height:1.45}.choice small,.search-hint,.search-list small,.usage-title small,.metric small{line-height:1.35}.product-name h3{line-height:1.3}.method p,.result-note{line-height:1.5}footer{line-height:1.4}
@media(max-width:575px){.hero p{line-height:1.45}.method p,.result-note{line-height:1.45}footer{line-height:1.4}}
/* Focus ring belongs to the visible input wrapper */
.searchbox,.input-unit{transition:box-shadow .18s ease,border-color .18s ease}
.searchbox:focus-within,.input-unit:focus-within{border-color:#6f9b7e;box-shadow:0 0 0 3px rgba(23,100,73,.14)}
.searchbox input:focus-visible,.input-unit input:focus-visible{outline:none;box-shadow:none}
.currency-input{gap:0}.currency-input input{padding-left:0}
.cost-chart{margin:26px 0;padding:22px;border:1px solid var(--border);border-radius:12px;background:#fcfdf9}.chart-heading{display:flex;align-items:end;justify-content:space-between;gap:16px}.chart-heading h3{margin:7px 0 0;font-size:18px}.chart-heading small{color:#7e8975;font-size:12px}.chart-plot{height:310px;margin-top:22px;padding:24px 12px 0;border-bottom:1px solid #cfd8cd;background:repeating-linear-gradient(to top,transparent 0,transparent 64px,#e8ede5 65px);display:flex;align-items:end;justify-content:space-around;gap:18px}.chart-item{height:100%;min-width:0;flex:1;display:grid;grid-template-rows:22px 1fr 24px 30px;text-align:center;align-items:end}.chart-value{font-size:12px;font-weight:600;color:#59675e;white-space:nowrap}.chart-track{height:100%;display:flex;align-items:end;justify-content:center}.chart-bar{width:min(74px,72%);min-height:8px;background:#aab8a6;border-radius:5px 5px 0 0;transition:height .35s ease}.chart-bar.best-bar{background:var(--green)}.chart-item>strong{font-size:14px;color:var(--ink);padding-top:5px}.chart-item>small{font-size:11px;color:#7e8975;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;align-self:start}@media(max-width:575px){.cost-chart{padding:17px 10px}.chart-heading{align-items:start;flex-direction:column;gap:4px}.chart-plot{height:270px;gap:5px;padding-left:2px;padding-right:2px}.chart-value{font-size:9px;writing-mode:vertical-rl;transform:rotate(180deg);justify-self:center}.chart-item{grid-template-rows:48px 1fr 24px 24px}.chart-bar{width:68%}.chart-item>small{font-size:9px;max-width:60px;justify-self:center}}
/* Positive and negative comparison states */
.savings-banner{align-items:flex-start}.savings-banner.cost-increase{background:#a64035}.savings-banner.cost-increase small{color:#f3cfca}.savings-banner>svg{width:42px;height:42px;flex:0 0 auto}.savings-description{max-width:760px;margin:15px 0 0;color:#fff;font-size:14px;line-height:1.45}.metric.negative-metric strong{color:#a64035}.chart-bar.increase-bar{background:#a64035}.chart-item{grid-template-rows:36px 1fr 24px 30px}.chart-value{align-self:center;padding-bottom:10px}
@media(max-width:575px){.savings-description{font-size:13px}.chart-item{grid-template-rows:56px 1fr 24px 24px}.chart-value{padding-bottom:12px}}
/* Equal-width comparison columns, including the parameter column */
.comparison{width:100%;min-width:780px;table-layout:fixed}.comparison th,.comparison td{width:auto}.comparison th:not(:first-child),.comparison td:not(:first-child){overflow-wrap:anywhere;word-break:normal}.comparison-value{display:flex;align-items:center;justify-content:space-between;gap:9px;flex-wrap:wrap}.comparison td.metric-best{background:#f0f7e9;font-weight:600}.comparison td.primary-best{background:#e1f0d7;font-weight:700;box-shadow:inset 0 0 0 2px #6f9b7e}.primary-best-badge{display:inline-flex;align-items:center;border-radius:999px;background:#19704f;color:#fff;padding:4px 8px;font-size:10px;font-weight:700;white-space:nowrap}
/* Keep a two-unit result visually balanced on wide screens */
@media(min-width:768px){.result-grid-1{grid-template-columns:minmax(420px,680px);justify-content:center}.comparison-wrap-2{display:flex;justify-content:center}.comparison.comparison-2{width:min(100%,1080px);min-width:700px;margin-left:auto;margin-right:auto}}
/* Star rating quality scale */
.stars,.search-stars,.table-stars{font-weight:700}.star-0{color:#929a91}.star-1,.star-2{color:#b34a3e}.star-3{color:#c18417}.star-4{color:#749338}.star-5{color:#19704f}.table-stars,.search-stars{white-space:nowrap}
