/* Google Sans (body text), self-hosted as web/assets/fonts/GoogleSans-Latin.woff2: a subset of the official
variable font (weights 400-700, GRAD 0, opsz pinned), modified by Solarbay. "Google" and "Google Sans" are
trademarks of Google LLC. The copyright notices and the full licence follow, unaltered.

Copyright 2025 The Google Sans Project Authors (github.com/googlefonts/googlesans)

Manrope (headings), self-hosted as web/assets/fonts/Manrope-Latin.woff2: a Latin subset of the official variable
font (weights 200-800), modified by Solarbay. It is under the same licence, copied below.

Copyright 2018 The Manrope Project Authors (https://github.com/googlefonts/manrope)

This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
https://openfontlicense.org

-----------------------------------------------------------
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
-----------------------------------------------------------

PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide
development of collaborative font projects, to support the font creation
efforts of academic and linguistic communities, and to provide a free and
open framework in which fonts may be shared and improved in partnership
with others.

The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves. The
fonts, including any derivative works, can be bundled, embedded,
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply
to any document created using the fonts or their derivatives.

DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder(s) under this license and clearly marked as such. This may
include source files, build scripts and documentation.

"Reserved Font Name" refers to any names specified as such after the
copyright statement(s).

"Original Version" refers to the collection of Font Software components as
distributed by the Copyright Holder(s).

"Modified Version" refers to any derivative made by adding to, deleting,
or substituting -- in part or in whole -- any of the components of the
Original Version, by changing formats or by porting the Font Software to a
new environment.

"Author" refers to any designer, engineer, programmer, technical
writer or other person who contributed to the Font Software.

PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining
a copy of the Font Software, to use, study, copy, merge, embed, modify,
redistribute, and sell modified and unmodified copies of the Font
Software, subject to the following conditions:

1) Neither the Font Software nor any of its individual components,
in Original or Modified Versions, may be sold by itself.

2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.

3) No Modified Version of the Font Software may use the Reserved Font
Name(s) unless explicit written permission is granted by the corresponding
Copyright Holder. This restriction only applies to the primary font name as
presented to the users.

4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
Software shall not be used to promote, endorse or advertise any
Modified Version, except to acknowledge the contribution(s) of the
Copyright Holder(s) and the Author(s) or with their explicit written
permission.

5) The Font Software, modified or unmodified, in part or in whole,
must be distributed entirely under this license, and must not be
distributed under any other license. The requirement for fonts to
remain under this license does not apply to any document created
using the Font Software.

TERMINATION
This license becomes null and void if any of the above conditions are
not met.

DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
OTHER DEALINGS IN THE FONT SOFTWARE.
*/
@font-face{font-family:'Google Sans';src:url(assets/fonts/GoogleSans-Latin.woff2) format('woff2');font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0020-007E,U+00A0-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20B9,U+2190-2199,U+2212,U+2248,U+2260,U+2264-2265,U+25CC,U+25CF,U+2713}
@font-face{font-family:'Manrope';src:url(assets/fonts/Manrope-Latin.woff2) format('woff2');font-weight:200 800;font-style:normal;font-display:swap;unicode-range:U+0020-007E,U+00A0-00FF,U+2013-2014,U+2018-2019,U+201C-201D,U+2022,U+2026,U+20B9,U+2190-2193,U+2212}
:root{--font-body:'Google Sans',Arial,sans-serif;--cream:#fbfdff;--ink:#23384f;--blue:#285fc3;--muted:#556779;--border:#dce6f0;--pale:#edf4fc;--teal:#16787d;--amber:#ba7c15;--amber-border:#b6883a;--amber-ink:#67563a;--amber-pale:#fcf8ef;--sunlight:#ffe7a5;--control-border:#71849a;--blue-hover:#1c4d9f;--border-card:#dae5f2;--control-border-soft:#bacbde;--teal-pale:#eef7f5;--muted-cool:#4f6681;--muted-quiet:#637e9e;--font-display:'Manrope',Arial,sans-serif;--card-edge:#d3e0ef;--tint:#f4f8fd;--logo-blue:#0a66c2;--logo-blue-deep:#0a4d94;--promise-fill:linear-gradient(160deg,var(--logo-blue) 0%,var(--logo-blue-deep) 100%);--gold-check:#ffd36b;--promise-tick:#3578cc;--cut-top:#e9eff6;--cut-bottom:#c9d6e6;--teal-border:#bfe0da;--teal-deep:#0e5a5e;--backdrop:#141f2ca8}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:25px}body{margin:0;color:var(--ink);font-family:var(--font-body);font-size:16px;background:var(--cream);line-height:1.5}button,input,select,textarea{font:inherit}button,a,input,select,summary{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{color:inherit;cursor:pointer;border:0}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #bc8f23;outline-offset:5px}svg{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.wrap{margin-inline:auto;width:min(1200px,calc(100% - 40px))}
.header{display:flex;align-items:center;justify-content:space-between;height:80px;gap:8px;border-bottom:1px solid var(--border)}
.brand{display:inline-flex;align-items:center;min-height:44px}
.brand img{display:block;height:44px;width:auto}
h2 em{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-1.4px}
h2{font-family:'Manrope',Arial,sans-serif;line-height:1.25;margin:13px 0 0;font-size:35px;letter-spacing:-1.1px;font-weight:500}
input[type=range]{width:100%;margin:22px 0 3px;cursor:pointer;accent-color:var(--blue)}
.closing{background:var(--blue);color:white;border-radius:13px;padding:39px 45px;display:flex;align-items:center;justify-content:space-between;position:relative;overflow:hidden;gap:20px}
.closing h2{font-size:31px;font-weight:400;margin-top:8px;letter-spacing:-1px}
dialog{border:1px solid #d5dde6;border-radius:16px;background:var(--cream);color:var(--ink);width:min(680px,calc(100% - 32px));max-height:85vh;padding:45px;box-shadow:0 35px 90px #152d3440}dialog::backdrop{background:#141f2ca8;backdrop-filter:blur(4px)}
.skip-link{position:absolute;top:-80px;background:var(--blue);color:white;padding:15px;z-index:30}
.skip-link:focus{top:0}[hidden]{display:none!important}
@media(max-width:800px){
.closing{padding:30px}
.closing h2{font-size:25px}
}
@media(max-width:540px){
.brand img{height:32px}
h2{margin-top:12px}
.closing{display:block;padding:30px}
.closing h2{font-size:27px;line-height:1.4;max-width:250px}
dialog{padding:37px 25px}
}

/* Readable text and blue surfaces across all screen sizes. */
.assumptions summary,.assumptions p{font-size:14px;color:var(--muted)}
@media(max-width:800px){.hero-copy{max-width:600px}}

.hero-copy>p{color:var(--muted);font-size:18px;line-height:1.85;max-width:380px;margin:0 0 30px}.honeypot{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}button:disabled{opacity:.45;cursor:wait}

/* Quiet layout: restrained colour, fewer containers and generous spacing. */
.hero-visual>img{border-radius:9px;box-shadow:11px 11px 0 #e7f1fe}.section{padding-block:70px}.explore{border-top:1px solid var(--border)}.card{border:0;border-radius:0;background:transparent;border-bottom:1px solid var(--border);overflow:visible}.card:hover{transform:none;box-shadow:none}.calculator{padding:0 0 25px;border:0;border-radius:0;background:transparent;box-shadow:none}
@media(max-width:800px){.hero-copy>p{max-width:480px}.section{padding-block:55px}}
@media(max-width:540px){.hero-copy>p{font-size:17px;margin-bottom:25px}.section{padding-block:44px}h2{font-size:31px}}
/* Fresh colour accents within the calm layout. */
/* Solarbay Promise colours. White text on --promise-fill is 5.69:1 at its lightest stop. The gold tick on --promise-tick is 3.14:1. */

@media(max-width:540px){.hero-visual>img{box-shadow:7px 7px 0 #e7f1fe}}
/* Guided requirements planner */
.guided-section{border-top:1px solid var(--border)}.guided-shell{max-width:800px;margin:auto;border:1px solid #dae5f2;border-radius:13px;padding:32px;background:#fff;--lab-blue:#285ec7;--lab-teal:#168477}.guided-shell progress{width:100%;height:5px;display:block;appearance:none;border:0;border-radius:5px;background:#e8eff8;margin-bottom:32px}.guided-shell progress::-webkit-progress-bar{background:#e8eff8;border-radius:5px}.guided-shell progress::-webkit-progress-value{background:var(--blue);border-radius:5px}.guided-shell progress::-moz-progress-bar{background:var(--blue);border-radius:5px}.guided-shell fieldset{min-width:0;border:0;padding:0;margin:0}.guided-shell legend,#step-question{display:block;padding:0;font-family:'Manrope',Arial,sans-serif;font-size:27px;font-weight:550;line-height:1.4;letter-spacing:-.7px;width:100%}#step-question{margin:0 0 22px}#step-question small{display:block;font:13px/1.6 var(--font-body);letter-spacing:0;color:var(--muted);margin-bottom:10px}.over-choice[aria-pressed=true]{border-color:var(--blue);background:#f0f6ff;box-shadow:inset 0 0 0 1px var(--blue)}.over-choice[aria-pressed=true]:before{content:'✓ '/''}.units-label input{width:100%;max-width:220px;height:49px;display:block;border:1px solid #cad8e9;border-radius:6px;font-size:18px;padding:10px 12px;color:var(--ink);margin-top:8px}.free-toggle{display:flex;align-items:center;gap:10px;min-height:44px;font-size:16px;margin:8px 0}.free-toggle input{width:21px;height:21px;accent-color:var(--blue)}.units-label{display:block;font-size:15px;margin:8px 0 18px}#over-limit p{font-size:15px;margin:0 0 10px}.over-choice{min-height:44px;margin:0 8px 8px 0;padding:0 16px;border:1px solid #cbd8e8;border-radius:999px;background:#fff;font-size:15px}.planner-hint{font-size:14px;color:var(--muted);line-height:1.8}#result-title{font-family:'Manrope',Arial,sans-serif;font-size:28px;font-weight:550;line-height:1.4;letter-spacing:-.7px;margin:0 0 18px}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@media(max-width:620px){.guided-shell{padding:25px 20px}.guided-shell legend,#step-question{font-size:24px}.guided-shell progress{margin-bottom:25px}#result-title{font-size:25px}}
.guided-shell .visually-hidden{width:1px}
#planner :is(h1,h2,h3,h4)[tabindex="-1"]:not(.visually-hidden){width:fit-content;max-width:100%}
.home-workspace .plan-line h3{flex:none}
/* A small, hands-on workspace inside the planner. */
.guided-shell:has(.scenario-lab){max-width:1000px}.scenario-lab{margin:35px -4px 30px;border-top:1px solid var(--border);padding-top:30px}.comparison-heading h5{font-size:19px;font-weight:550;letter-spacing:-.3px;margin:0}.lab-range{display:block;margin-bottom:24px}.lab-range>span{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:15px;color:var(--ink);line-height:1.6}.lab-range output{background:#edf3ff;border-radius:6px;padding:5px 10px;font-size:16px;color:var(--lab-blue);font-weight:600;white-space:nowrap}.lab-range input{display:block;width:100%;height:34px;accent-color:var(--lab-blue);cursor:pointer;margin:10px 0 0}.lab-range small{font-size:13px;color:var(--muted);line-height:1.6}.lab-note{color:var(--muted);margin:15px 0;line-height:1.7;font-size:14px;text-wrap:balance}.lab-check{display:flex;gap:12px;align-items:center;font-size:16px;min-height:44px;cursor:pointer}.lab-check input{height:21px;width:21px;accent-color:var(--lab-teal)}.lab-caption{display:block;font-size:14px;color:var(--muted);line-height:1.6}.compare-toolbar{display:flex;align-items:center;gap:18px;margin-top:26px;flex-wrap:wrap}.compare-toolbar>span{font-size:14px;color:var(--muted);flex:1;min-width:160px;line-height:1.7}.comparison-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:25px}.comparison-table{width:100%;border-collapse:collapse;font-size:15px;text-align:left;line-height:1.7}.comparison-table th,.comparison-table td{border-bottom:1px solid var(--border);padding:14px 12px;vertical-align:top}.comparison-table tbody th{font-weight:450;color:var(--muted);width:34%}.comparison-table thead th{font-weight:550;background:#eef5ff;color:var(--lab-blue)}.comparison-table td{width:33%}.appliance{border:1px solid var(--border);border-radius:10px;overflow:hidden;background:white}.appliance.is-on{border-color:#b7d8d1;background:#f5fbf9}.lab-status{font-size:15px;line-height:1.8;color:var(--lab-teal);margin:18px 0 0}.lab-status:empty{display:none}.lab-status textarea{width:100%;height:100px;font-size:14px;padding:10px;border:1px solid var(--border);color:var(--ink);margin-top:10px}
@media(max-width:750px){.lab-range>span{font-size:14px}}
@media(max-width:620px){.scenario-lab{margin-inline:0}.lab-range>span{font-size:15px}.comparison-table{font-size:13px}.comparison-table th,.comparison-table td{padding:12px 7px}.comparison-heading h5{font-size:17px}.comparison-heading{align-items:start}.compare-toolbar{align-items:start}.comparison-table td{overflow-wrap:anywhere}}

/* One illustrated home ties the two decisions together. */
.home-scene{overflow:hidden;border-radius:17px;background:#f7faff;border:1px solid #d9e5f3;margin:0 0 30px}.home-art svg{display:block;width:100%;height:auto}.scene-footnote{font-size:12px;color:#637e9e;padding:0 20px 15px;line-height:1.7;margin:0}.saved-comparison-details{border-top:1px solid var(--border);padding-top:19px;margin:22px 0}.saved-comparison-details>summary{cursor:pointer;color:var(--blue);font-size:15px;line-height:1.8;padding-bottom:10px}

@media(max-width:620px){.home-scene{border-radius:12px}.scene-footnote{font-size:11px;padding:0 16px 14px}}
/* Decision journeys */
button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.plan-pending{background:#ffffffa8;border-radius:12px;padding:14px 18px;color:#5a6678;font-size:14px}.plan-pending ul{display:flex;flex-wrap:wrap;gap:8px 24px;padding-left:18px;margin:8px 0}.site-inputs{border:1px solid #dce6f1;border-radius:12px;padding:16px 20px;margin:20px 0}.site-inputs summary{cursor:pointer;font-weight:600;color:#335b88;min-height:32px}.site-field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:20px 0}.site-field-grid label{display:flex;flex-direction:column;gap:8px;font-size:15px}.site-field-grid input,.site-field-grid select{width:100%;min-height:46px;border:1px solid #cbd8e8;border-radius:8px;background:#fff;padding:10px;color:#254467;font:inherit;box-sizing:border-box}.season-bars{display:flex;gap:8px;align-items:flex-end;min-height:150px;margin:18px 0}.season-bars>div{display:flex;flex:1;flex-direction:column;align-items:center;gap:8px;min-width:0}.season-bars i{display:block;width:100%;max-width:32px;border-radius:4px 4px 0 0;background:#5085d8}.season-bars span,.season-bars small{font-size:11px;color:#536d8b}.site-inputs p{font-size:14px;line-height:1.7}.site-inputs>button{margin-left:14px}
.plan-answer [aria-live]{min-height:0}
@media(max-width:750px){.plan-pending ul{display:block}.plan-pending li{margin:8px 0}.site-field-grid{grid-template-columns:1fr}.season-bars{gap:3px}.season-bars span{font-size:9px}.site-inputs{padding:15px}}

/* Consumer planning tools: details stay close to the decision they explain. */
.consumer-tools{margin-top:24px;min-width:0}.consumer-section{border:1px solid var(--border);border-radius:12px;margin:16px 0;background:#fff;min-width:0}.consumer-section>summary{padding:17px 20px;min-height:56px;cursor:pointer;font-size:18px;font-weight:550;color:#2e5689;line-height:1.5}.consumer-section[open]>summary{border-bottom:1px solid #e1e9f2}.consumer-section-body{padding:22px;min-width:0}.consumer-section-body>p{font-size:15px;line-height:1.75;color:var(--muted);margin:0 0 20px}.consumer-section form{margin:0 0 24px}.tool-field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:16px 0}.tool-field-grid label,.consumer-section-body>form>label{display:flex;flex-direction:column;gap:8px;font-size:14px;line-height:1.65;color:#415974;min-width:0}.consumer-section input:not([type=checkbox],[type=radio]),.consumer-section select{display:block;box-sizing:border-box;max-width:100%;width:100%;min-width:0;min-height:46px;border:1px solid #bacbde;border-radius:7px;padding:10px 12px;background:#fff;font:16px/1.5 var(--font-body);color:var(--ink)}.consumer-section input[type=checkbox],.consumer-section input[type=radio]{width:20px;height:20px;accent-color:var(--teal);flex-shrink:0}.consumer-section .lab-check{display:flex;flex-direction:row;align-items:flex-start;gap:12px;padding:10px 0;min-height:44px;line-height:1.75;font-size:14px}.consumer-section .lab-check input{margin-top:3px}.consumer-section details details>summary{cursor:pointer;line-height:1.6;min-height:40px}.tool-notice{border-left:3px solid var(--amber-border);background:#fcf8ef;padding:14px 16px;margin:16px 0;color:#67563a;font-size:14px;line-height:1.8}.tool-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:20px}.tool-form-status{color:#6e431d;line-height:1.7;font-size:14px;margin:12px 0;min-height:0}.tool-form-status:empty{display:none}.consumer-section a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}.range-number{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:14px;color:var(--muted)}.lab-range .range-number input{width:110px;min-width:0;border:1px solid #bacbde;border-radius:7px;padding:8px;background:#fff;font:16px var(--font-body);color:var(--ink)}#share-preview{font-size:14px;line-height:1.8}.consumer-tools [hidden],.consumer-section [hidden]{display:none!important}.bill-choice{border:0;padding:0;margin:18px 0;min-width:0}.consumer-section .bill-choice input[type=radio]{min-height:0}.bill-choice small{display:block;color:var(--muted)}
.consumer-section .bill-choice span input{display:inline-block;width:6em;margin:0 6px}
.bill-choice .money-input input{margin:0}
.bill-dialog .bill-body{border:0;margin:0;background:none}
.bill-dialog .bill-body legend{font:600 16px/1.5 var(--font-body);letter-spacing:0;padding:0;margin-bottom:10px}
.bill-field{display:flex;flex-direction:column;gap:6px;margin:16px 0;min-width:0;font-size:14px;line-height:1.6;color:#415974}
.bill-field>label{font-size:15px;font-weight:550;color:var(--ink)}
.bill-hint{margin:0;font-size:14px;line-height:1.6;color:var(--muted)}
.field-error{display:flex;align-items:baseline;gap:8px;margin:0;font-size:14px;font-weight:550;line-height:1.6;color:var(--amber-ink)}
.field-error::before{content:"!";flex:none;display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--amber-ink);color:#fff;font-size:13px;font-weight:700;line-height:1}
.bill-dialog .bill-body input[aria-invalid=true]{border:2px solid var(--amber-border);background:var(--amber-pale)}
.error-summary{border:3px solid var(--amber-border);border-radius:8px;background:var(--amber-pale);padding:14px 16px;margin:8px 0 18px}
.error-summary:focus{outline:3px solid var(--blue);outline-offset:2px}
.error-summary h5{margin:0 0 8px;font-size:17px;color:var(--amber-ink)}
.error-summary ul{margin:0;padding-left:20px}
.error-summary li{margin:6px 0}
.error-summary a{color:var(--amber-ink);font-weight:550}
.money-line,.bill-step-upto{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.money-input{display:inline-flex;align-items:center;gap:4px}
.bill-dialog .bill-body .bill-choice .money-input input{display:inline-block;width:7.5em}
.bill-step{border:0;padding:0;margin:10px 0;min-width:0}
.bill-step+.bill-step{border-top:1px solid var(--border);padding-top:8px}
.bill-step-line{display:flex;align-items:center;flex-wrap:wrap;gap:8px;min-height:48px}
.bill-step-remove{min-width:44px;min-height:44px;margin-left:auto;padding:0 8px}
@media(max-width:540px){.tool-field-grid{grid-template-columns:1fr;gap:17px}.consumer-section-body{padding:18px 16px}.consumer-section>summary{font-size:17px;padding:15px 16px}.tool-actions{align-items:stretch;flex-direction:column}.tool-actions button{text-align:left}.consumer-section-body p{overflow-wrap:anywhere}}

/* ---------- Area anchors: each feature area adds its styles only between its own two markers. ---------- */

/* == area: plan-answers == */
/* Home plan: the plan line, the answer, the rows two across (one on phones), one caveat line, the two actions,
   then the sections. */
.plan-line{display:flex;align-items:flex-start;gap:12px}.plan-line h3{flex:1}
#plan-line{font:500 17px/1.6 var(--font-body);letter-spacing:0;color:#4f6681}
.plan-answer{margin:0 0 20px}
.answer-row{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;padding:10px 0 16px;border-top:1px solid #e1e9f3}
@media(max-width:540px){
  .guided-shell:has(.plan-answer){padding:16px 12px}
  .plan-answer .answer-row{padding-block:7px 8px}
}
.answer-rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px}
.answer-head{display:flex;flex-wrap:wrap;align-items:center;column-gap:12px;align-self:stretch;min-width:0;margin:-4px 0}
.answer-head>span,.answer-head>small{font-size:15px;line-height:1.5;color:#4f6681}
.answer-head>strong{font-size:19px;font-weight:650;line-height:1.35;color:var(--ink);font-variant-numeric:tabular-nums}
.answer-line,.answer-note,.plan-basis{display:block;font-size:14px;line-height:1.6;color:#3f566f;margin:0;overflow-wrap:anywhere}
.answer-note{margin-top:6px}.plan-basis{padding-left:20px}
.answer-fix,.answer-note a{background:none;color:#285ec7;cursor:pointer;text-underline-offset:3px;text-decoration:underline}
/* Fix links sit in a sentence (WCAG 2.5.8 inline exception), so they take the line's height. */
.answer-fix{display:inline;min-height:0;padding:0;font:inherit;line-height:inherit;vertical-align:baseline;text-align:left}
.answer-row>.sb-btn-secondary{margin-top:8px}
.answer-fix:focus-visible,.answer-note a:focus-visible,.assumes>summary:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
/* The sections below the actions, and "More options" inside one. */
.plan-sections{border:0;padding:0;margin-top:28px}
.lab-exact{margin:22px 0}
/* "Change my plan": a heading over the bill's rates and four rows drawn like the other sections. */
.solar-money-tool .consumer-tools{margin-top:0}
.consumer-section .lab-range input[type=range]{min-height:0;height:34px;border:0;padding:0;background:none}
.consumer-section .lab-range .range-number input{width:110px}
/* A headed group inside one flat form or section. */
.flat-group{border-top:1px solid #e0e8f1;margin:18px 0;padding-top:14px;min-width:0}
.flat-group h5{margin:0 0 4px;font:600 16px/1.5 var(--font-body);letter-spacing:0;color:var(--ink)}
.flat-group>p{font-size:14px;line-height:1.7;color:var(--muted);margin:6px 0}
.site-inputs.flat-group{border:0;border-top:1px solid #e0e8f1;border-radius:0;padding:14px 0 0}
/* "Estimate, not a quote · What it's based on": the one caveat line, opening what the plan assumes. */
.assumes{margin:14px 0 0}
.assumes>summary{display:list-item;min-height:44px;padding:10px 0;box-sizing:border-box;line-height:1.6;cursor:pointer;font-size:15px;color:#335b88}
@media(max-width:620px){.answer-rows{display:block}.answer-head>strong{font-size:18px}}

/* == end area: plan-answers == */

/* == area: rules-subsidy == */

/* == end area: rules-subsidy == */

/* == area: install == */
/* === M19: installation === */
/* The two checklist pages of Your project: cards for the numbered questions and the tick lists. Types follow the journey scale. */
.install-tool{min-width:0}
.workspace-columns:has(.install-tool){display:block}
.workspace-columns:has(.install-tool) .workspace-pane{border:0;padding:0}
.inst-chip{display:inline-flex;align-items:center;min-height:32px;padding:0 14px;border-radius:999px;background:var(--sunlight);color:var(--amber-ink);font:700 14px/1 var(--font-body)}
.inst-chip:empty{display:none}
.inst-status{margin:0;font-size:14px;color:var(--amber-ink)}
.inst-status:empty{display:none}
.inst-sh{margin:0 0 12px;font:650 22px/1.25 var(--font-display);letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.inst-list{margin:0;padding:0;list-style:none}
.inst-list>li{border-top:1px solid var(--border)}
.inst-list>li:first-child{border-top:0}
.inst-row{position:relative;display:flex;align-items:flex-start;gap:14px;padding:14px 0;cursor:pointer}
.inst-row input{position:absolute;left:0;top:14px;width:26px;height:26px;margin:0;opacity:0;cursor:pointer}
.inst-box{flex:none;position:relative;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px var(--control-border-soft);transition:background .15s,box-shadow .15s}
.inst-row:hover .inst-box{box-shadow:inset 0 0 0 2px var(--blue)}
.inst-row input:checked+.inst-box{background:var(--teal);box-shadow:inset 0 0 0 2px var(--teal)}
.inst-row input:checked+.inst-box::after{content:"";position:absolute;left:9px;top:4px;width:6px;height:12px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.inst-row input:focus-visible+.inst-box{outline:3px solid var(--blue);outline-offset:3px}
.inst-tx{display:flex;flex-direction:column;gap:4px;min-width:0}
.inst-tx b{font:600 17px/1.5 var(--font-body);color:var(--ink);text-wrap:balance}
.inst-row:has(input:checked) .inst-tx b{color:var(--muted-quiet)}
.inst-note{font-size:14px;line-height:1.5;color:var(--muted);text-wrap:balance}
.inst-acts{display:flex;flex-wrap:wrap;gap:8px}
.inst-acts .sb-btn{gap:10px;white-space:nowrap}
.install-tool>*{margin:0 0 16px}
.install-tool h3{margin:0 0 16px;font:650 30px/1.2 var(--font-display);letter-spacing:-.02em;text-wrap:balance}
.inst-page{min-width:0}
.inst-page h3{margin:0 0 16px}
.inst-cards{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.inst-card{min-width:0;padding:20px 16px;background:#fff;border:1px solid var(--card-edge);border-radius:14px;box-shadow:0 1px 3px rgba(35,56,79,.07)}
.inst-ph{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin:0 0 12px}
.inst-ph .inst-sh{margin:0}
.inst-q{margin:0;padding:0;list-style:none;counter-reset:q}
.inst-q li{counter-increment:q;display:flex;align-items:flex-start;gap:14px;padding:14px 0;border-top:1px solid var(--border)}
.inst-q li:first-child{border-top:0;padding-top:4px}
.inst-q li:before{content:counter(q);flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--pale);color:var(--blue-hover);font:650 14px/1 var(--font-body)}
.inst-q b{font:600 17px/1.4 var(--font-body);text-wrap:balance}
@media(min-width:900px){.inst-cards>.inst-card:only-child{max-width:760px}}
@media(min-width:900px){.inst-cards:has(>.inst-card+.inst-card){grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:start}}
@media(max-width:359px){.inst-row{gap:12px}}
@media print{
  body.print-tool .inst-acts{display:none!important}
  body.print-tool .inst-card{border:0;box-shadow:none;padding:0}
}
/* === /M19 === */
/* === FX2b: tools === */
/* Power backup, Your pump and Working hours as the boards draw them. A tool's content starts at the 16 px page gutter. */
.est-tool{margin-top:0}
.fx-pair{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
.fx-opt{font-weight:400;color:var(--muted)}
.fx-group{display:flex;flex-direction:column;gap:10px;margin-top:24px}
.fx-lab{font:600 16px/1.3 var(--font-body)}
.est-form .fx-pair+*,.est-form form>*+*{margin-top:24px}
.est-form .choice-tiles{margin-bottom:0}
.est-form :is(input,select){font:500 17px/1.4 var(--font-body);color:var(--ink)}
.est-form label:not(.free-toggle,.lab-check,.choice-tile){display:flex;flex-direction:column;gap:10px;font:600 16px/1.3 var(--font-body);color:var(--ink)}
.choice-tile svg{flex:none;width:18px;height:18px;stroke-width:1.8}
.est-form select{min-height:52px;padding:0 16px;border:1.5px solid var(--control-border);border-radius:10px;background:#fff}
.est-form .pump-in{padding-inline:16px;border:1.5px solid var(--control-border);border-radius:10px;min-height:52px}
.est-form .pump-in input{min-height:48px;font:500 17px/1.4 var(--font-body)}
.est-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.est-acts .sb-btn{flex:1 1 0;gap:10px}
.bk-tiles{min-width:0;margin:0;padding:0;border:0}
.bk-tiles legend{padding:0;margin-bottom:10px;font:600 16px/1.3 var(--font-body)}
.bk-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.bk-tile{position:relative;display:flex;align-items:center;gap:6px;min-width:0;min-height:48px;padding:0 10px;border:1px solid var(--control-border);border-radius:10px;background:#fff;color:var(--ink);font:500 15px/1.3 var(--font-body);text-align:left;white-space:nowrap}
.bk-tile::after{content:"✓";margin-left:auto;visibility:hidden;font-weight:700}
.bk-tile[aria-pressed=true]{border-color:var(--blue);background:var(--tint);color:var(--blue);font-weight:600}
.bk-tile[aria-pressed=true]::after{visibility:visible}
.bk-tile:disabled{cursor:default;opacity:.7}
.bk-tile:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.bk-ico{flex:none;width:18px;height:18px;stroke-width:1.8}
.bk-cut{margin-top:32px}
.out-more:not(:has(.out-sys:not([hidden]),.saved-line:not([hidden]))){display:none}
.home-workspace[data-page=backup] #power-cuts .est-bar,.home-workspace[data-page=size] #sizes-section .est-bar{display:flex}
.bk-picture{padding:16px}
.bk-picture svg{display:block;width:100%;height:auto}
@media(min-width:380px){.bk-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:768px){.fx-pair{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* === /FX2b === */
/* == end area: install == */

/* == area: after == */
.after-tool{min-width:0}
.after-fieldset,.after-fieldset>fieldset{border:0;padding:0;margin:0 0 18px;min-width:0}
.after-fieldset legend{font:600 16px/1.5 var(--font-body);letter-spacing:0;color:#335b88;padding:0;margin-bottom:4px}
.after-tool form>.sb-btn-primary,.after-tool form .sb-btn-primary[type=submit]{margin:4px 0 22px}
.after-tool input:not([type=checkbox],[type=radio]),.after-tool select,.after-tool textarea{display:block;box-sizing:border-box;width:100%;min-width:0;max-width:100%;min-height:52px;border:1.5px solid var(--control-border);border-radius:10px;padding:10px 16px;background:#fff;font:16px/1.5 var(--font-body);color:var(--ink)}
.after-tool label small{color:var(--muted);font-size:13px}
.after-tool form>.tool-field-grid label,.after-tool fieldset>label{display:flex;flex-direction:column;gap:8px;font-size:14px;color:#415974;min-width:0}
.after-tool .lab-check{flex-direction:row}
.after-tool .tool-notice ul{margin:8px 0 0;padding-left:20px}
.after-tool .tool-actions .sb-btn{margin:0}
.after-tool .saved-line{margin:14px 0 0;font-size:14px;color:var(--muted)}
.after-line{display:flex;flex-wrap:wrap;align-items:center;gap:0 12px;margin:0 0 8px;overflow-wrap:anywhere}
.after-tool [hidden]{display:none}
.after-tool .bill-choice{border:0;padding:0;margin:0 0 16px;min-width:0}
.after-tool .bill-choice legend{font:600 16px/1.5 var(--font-body);letter-spacing:0;padding:0;margin-bottom:4px}
.after-tool input[aria-invalid=true]{border:2px solid var(--amber-border);background:var(--amber-pale)}
.after-tool .money-input input{display:inline-block;width:7.5em}
.after-tool .bill-step-upto input{display:inline-block;width:5.5em}
/* === M20: output === */
/* The Output page: a hero that compares the month with its expected range, the units card, the chart and the questions. The box is a container, so one layout serves the stand-alone page and the pane inside the home plan. */
.out-title{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:0 0 16px}
.after-tool .out-title h3,.workspace-pane #workspace-stage .out-title h3{margin:0}
.out-section:focus{outline:0}
.out-box{container:out/inline-size;min-width:0;--teal-deep:#0e5a5e;--teal-edge:#c9e0da}
.out{display:flex;flex-direction:column;gap:16px}
.out-left,.out-right{display:contents}
.out-card{min-width:0;padding:20px 16px;border:1px solid var(--card-edge);border-radius:14px;background:#fff;box-shadow:0 1px 3px rgba(35,56,79,.07)}
.out-box .out-h{margin:0 0 12px;font:650 22px/1.25 var(--font-display);letter-spacing:-.02em;text-wrap:balance}
.out-hero{display:flex;flex-direction:column;gap:6px;padding:20px;border-radius:12px;background:var(--pale);box-shadow:inset 0 0 0 1px #d3e1f4}
.out-hero.out-good{background:var(--teal-pale);box-shadow:inset 0 0 0 1px var(--teal-edge)}
.out-hero.out-warn{background:var(--amber-pale);box-shadow:inset 0 0 0 1px var(--amber-border)}
.out-hero p{margin:0;font-size:17px;line-height:1.4;text-wrap:balance}
.out-hero .out-lab{font:600 17px/1.3 var(--font-body)}
.out-hero .out-note{margin-top:4px;font-size:14px;line-height:1.5;color:var(--muted)}
.out-big{font:650 34px/1.1 var(--font-display);letter-spacing:-.04em;color:var(--blue-hover);font-variant-numeric:tabular-nums;text-wrap:balance}
.out-good .out-big{color:var(--teal-deep)}
.out-warn .out-big{color:var(--amber-ink)}
.out-nw{white-space:nowrap}
.out-hero .stats{display:flex;flex-wrap:wrap;gap:12px 24px;margin:8px 0 0;padding-top:14px;border-top:1px solid var(--teal-edge)}
.out-warn .stats{border-top-color:var(--amber-border)}
.out-hero .stats>div{flex:1 1 auto;min-width:0}
.out-hero dt{font:600 13px/1.3 var(--font-body);color:var(--muted-cool)}
.out-hero dd{margin:2px 0 0;font:650 18px/1.25 var(--font-display);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.out-units .tool-form-status{margin:0;font-size:14px;color:var(--muted)}
.out-units .tool-form-status:empty{display:none}
.out-units .field-error,.out-size .field-error{text-wrap:balance}
.out-field{display:flex;flex-direction:column;gap:8px}
.out-field>label{font:600 16px/1.3 var(--font-body);color:var(--ink)}
.out-in{display:flex;align-items:center;gap:10px;min-height:52px;padding:0 16px;border:1.5px solid var(--control-border);border-radius:10px;background:#fff}
.out-in:focus-within{outline:3px solid var(--blue);outline-offset:3px}
.out-in:has(input[aria-invalid=true]){border:2px solid var(--amber-border);background:var(--amber-pale)}
.after-tool .out-box .out-in input{flex:1;width:auto;min-height:48px;padding:0;border:0;border-radius:0;outline:0;background:transparent;font:500 17px/1.2 var(--font-body);letter-spacing:0;color:var(--ink)}
.after-tool .out-box .out-in input::placeholder{font:400 17px/1.3 var(--font-body);letter-spacing:0;color:var(--muted)}
.out-unit{flex:none;font:500 16px var(--font-body);color:var(--muted)}
.out-qs{margin:0;padding:0;list-style:none}
.out-qs li{position:relative;padding:12px 0 12px 36px;border-top:1px solid var(--border)}
.out-qs li:first-child{border-top:0;padding-top:4px}
.out-qs li::before{content:"";position:absolute;left:2px;top:15px;width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--blue)}
.out-qs li:first-child::before{top:7px}
.out-qs b{display:block;font:600 17px/1.35 var(--font-body);text-wrap:balance}
.out-low #work-tips:not(:empty){margin-top:12px}
.out-more .after-line{margin:0 0 8px}
.out-more :is(.lab-note,label){text-wrap:balance}
.out-low .tool-notice{text-wrap:balance}
.oc{margin:0}
.oc-key{display:flex;align-items:center;gap:8px;margin:0 0 8px;font:600 13px/1.3 var(--font-body);color:var(--teal-deep)}
.oc-swatch{flex:none;width:20px;height:10px;border-top:1.5px dashed var(--teal);border-bottom:1.5px dashed var(--teal);background:rgba(22,120,125,.12)}
.oc-plot{display:flex;gap:8px;height:190px;margin:30px 0 44px;border-bottom:1px solid var(--control-border)}
.oc-col{position:relative;flex:1;min-width:0}
.oc-band{position:absolute;left:-4px;right:-4px;bottom:var(--low);height:var(--high);border-top:1.5px dashed var(--teal);border-bottom:1.5px dashed var(--teal);background:rgba(22,120,125,.12)}
.oc-bar{position:absolute;left:6%;right:6%;bottom:0;height:var(--bar);min-height:3px;border-radius:6px 6px 0 0;background:#8aaee6}
.oc-col.now .oc-bar{background:var(--blue)}
.oc-col.low .oc-bar{background:var(--sunlight);box-shadow:inset 0 0 0 1.5px var(--amber-border)}
.oc-val{position:absolute;left:-6px;right:-6px;bottom:calc(var(--bar) + 4px);text-align:center;font:650 13px/1.2 var(--font-body);color:var(--ink);font-variant-numeric:tabular-nums}
.oc-month{position:absolute;top:calc(100% + 6px);left:0;right:0;text-align:center;font-size:13px;line-height:1.3;color:var(--muted)}
.oc-month small{display:block;font-size:13px}
@container out (min-width:700px){
  .out{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:16px 24px;align-items:start}
  .out-hero,.out-size,.out-units,.out-more,.out-nochart .out-low{grid-column:1/-1}
  .out-start{grid-template-columns:minmax(0,560px)}
  .out-start .out-hero,.out-start .out-size,.out-start .out-units{grid-column:auto}
  .out-card{padding:24px}
  .oc-plot{gap:10px}
}
@container out (min-width:900px){
  .out:not(.out-start) :is(.out-left,.out-right){display:flex;flex-direction:column;gap:16px;min-width:0}
}
/* === /M20 === */
/* === Your project === */
.guided-shell:has(>.install-tool,>.project-tool,>.after-tool){max-width:none}
.project-tool{min-width:0}
.project-tool h3{margin:0 0 12px;font:650 30px/1.2 var(--font-display);letter-spacing:-.02em;text-wrap:balance}
.project-switch{margin:0 0 10px}
.est-links.project-rows,.est-links.project-estimate,.est-links.project-row{padding:0 16px;background:#fff;border:1px solid var(--card-edge);border-radius:14px;box-shadow:0 1px 3px rgba(35,56,79,.07)}
.project-tool .project-rows,.project-tool .project-estimate{max-width:640px}
.project-tool .project-estimate{margin-top:16px}
.est-side .project-row,.est-tool .project-row{max-width:640px;margin-top:16px}
.project-tool .inst-status{margin-top:12px}
@media(min-width:768px){.project-switch{max-width:640px}}
/* === /Your project === */
/* == end area: after == */

/* == area: farm-business == */
.fb-tool h3{font-size:22px;font-weight:550;margin:0 0 8px}.fb-tool h4{font-size:18px;font-weight:550;margin:0}.fb-tool h5{font-size:16px;font-weight:550;margin:22px 0 6px}
.fb-tool .consumer-section{border:0;margin:0;background:none}.fb-tool .consumer-section-body{padding:0}.fb-tool .fb-rule{font-size:14px;line-height:1.75;color:var(--muted);margin:6px 0;overflow-wrap:anywhere;text-wrap:balance}

/* == end area: farm-business == */

/* == area: front-door == */
@media(max-width:374px){.wrap{width:calc(100% - 32px)}}
a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
body[data-focus] main>section:not(#planner),body[data-focus=flow] .footer,body[data-focus=flow] .header-quote,body[data-focus=plan] .header-quote,body[data-focus=tool] .header-quote,body:not([data-focus]) #planner{display:none}
.site-nav{display:flex;align-items:center;gap:4px;margin-left:auto;font:600 16px var(--font-body)}
.site-menu{display:none;position:relative}
.site-menu summary{list-style:none;display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;font-size:23px;line-height:1;cursor:pointer}
.site-menu summary::-webkit-details-marker{display:none}
.site-menu nav{position:absolute;right:0;top:100%;z-index:20;min-width:220px;padding:8px;background:#fff;border:1px solid var(--border);border-radius:10px;box-shadow:0 12px 28px #2e3c4d1a}
.site-menu nav a{display:flex;align-items:center;min-height:48px;padding:0 12px;border-radius:6px}
.site-menu nav a:hover{background:var(--pale)}
#front-status{font-size:16px;color:var(--ink);margin:0 0 16px}
#front-status:empty{display:none}
#front-status button{min-height:44px;padding:0 4px;background:none;color:var(--blue);font-weight:550;text-decoration:underline}
@media(max-width:900px){.site-nav{display:none}.site-menu{display:block}.header{height:72px}}
@media(min-width:641px) and (max-width:900px){.header{height:80px}}
@media(max-width:540px){#planner{border-top:0}}
@media(max-width:360px){.site-menu{margin-left:auto}.brand img{height:36px}}
body:has(#lead-form) .header-quote{display:none}

/* Home plan: one roof and one active pane, with the plan always in view. */
.guided-shell:has(>.home-workspace){max-width:none;border:0;border-radius:0;padding:0 20px 24px}
.home-workspace{--blue:#0a66c2;--lab-blue:var(--blue)}
.home-workspace [hidden]{display:none!important}
.workspace-header-actions{display:flex;align-items:center;gap:8px;flex:none}
.home-workspace #result-title{margin:0;font:650 30px/1.1 var(--font-display);letter-spacing:-.03em;text-wrap:balance}
.home-workspace #plan-line{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:12px 0 0;line-height:1.45}
.home-workspace #workspace-status{margin:0 0 12px;color:var(--muted)}
.home-workspace #workspace-status:empty{margin:0}
.home-workspace .answer-fix{min-height:44px}
/* === M17: estimate === */
/* The Estimate: an answer column (the answer, its rows, Payback) and a result column (the system picture, the plan's details), side by side from 1100 px, with the pair inside each column side by side from 768 to 899 px. */
.workspace-columns{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
.workspace-columns:has(>.est-side[hidden]){grid-template-columns:minmax(0,1fr)}
.workspace-pane,.est-side{min-width:0}
.est-side{display:flex;flex-direction:column;gap:16px}
.workspace-pane #workspace-stage h3{margin:0 0 14px;font:650 30px/1.2 var(--font-display);letter-spacing:-.02em;text-wrap:balance}
.est-card,.home-workspace :is(.answer-rows,.payback,.assumes){padding:20px 16px;background:#fff;border:1px solid var(--card-edge);border-radius:14px;box-shadow:0 1px 3px rgba(35,56,79,.07)}
.est-card>h4{margin:0 0 12px;font:650 22px/1.25 var(--font-display);letter-spacing:-.02em}
.home-workspace #plan-hero{margin:0 0 16px}
.home-workspace #plan-overview{display:flex;flex-direction:column;gap:16px}
.home-workspace :is(.payback,.assumes){margin:0}
.home-workspace .payback h4{margin:0 0 12px}
.home-workspace .assumes{padding-block:0}
.est-chip{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:999px;background:var(--pale);box-shadow:inset 0 0 0 1px var(--card-edge);color:var(--blue-hover);font:600 15px var(--font-body)}
.est-ico{flex:none;width:18px;height:18px;stroke-width:1.8}
.home-workspace .answer-note a{display:inline-flex;align-items:center;min-height:44px;margin:-14px 0}
.workspace-header-actions .sb-btn{gap:10px}
.est-hero{display:flex;flex-direction:column;gap:6px;padding:24px 20px;border-radius:12px;background:var(--pale);box-shadow:inset 0 0 0 1px var(--card-edge)}
.est-lab{margin:0;font:600 16px/1.3 var(--font-body);text-wrap:balance}
.est-big{display:block;font:650 44px/1 var(--font-display);letter-spacing:-.04em;color:var(--blue-hover);font-variant-numeric:tabular-nums;text-wrap:balance}
.est-big.est-sentence{font-size:34px;line-height:1.15;letter-spacing:-.03em}
.est-big.est-none{font:400 14px/1.5 var(--font-body);letter-spacing:0;color:var(--muted)}
.est-of{margin:0;font-size:17px;line-height:1.4;text-wrap:balance}
.est-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;margin:8px 0 0;padding-top:14px;border-top:1px solid var(--control-border-soft)}
.est-stats>div{min-width:0}
.est-stats dt{font:600 13px/1.3 var(--font-body);color:var(--muted-cool);text-wrap:pretty}
.est-stats dd{margin:2px 0 0;font:650 18px/1.25 var(--font-display);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.est-note{margin:0;font-size:14px;line-height:1.5;color:var(--muted);text-wrap:pretty}
.est-link{display:inline-flex;align-items:center;min-height:44px;margin:-14px 0;padding:0 2px;background:none;color:var(--blue);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.home-workspace :is(.est-of,.answer-line,.answer-note,.answer-head>small,.est-nobackup p,.scene-sentence,.scene-chips span,.lab-status){text-wrap:pretty}
.est-links{margin:0;padding:0;list-style:none}
.est-links button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:56px;padding:8px 0;border-top:1px solid var(--border);background:none;color:var(--ink);text-align:left}
.est-links li:first-child button{border-top:0}
.est-links button:hover{background:var(--pale);box-shadow:-14px 0 0 var(--pale),14px 0 0 var(--pale)}
.est-links b{font:600 17px/1.3 var(--font-body);text-wrap:balance}
.est-links .go{flex:none;color:var(--teal);font-size:20px;font-weight:500}
.est-system{display:flex;flex-direction:column;gap:12px}
.est-system>h4{margin:0}
.est-picture{padding:12px;border-radius:12px;background:var(--pale)}
.est-picture[data-view=cut]{background:linear-gradient(180deg,var(--cut-top) 0%,var(--cut-bottom) 100%)}
.est-picture .home-scene{margin:0}
.est-nobackup{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin-top:12px}
.est-nobackup p{margin:0;font-size:14px;line-height:1.5}
.est-bar{display:flex;flex-direction:column;gap:12px;margin-top:24px;padding-top:24px;border-top:1px solid var(--border)}
.est-bar .sb-btn{width:100%}
.home-workspace :is(.answer-rows,.payback,.assumes) :is(.answer-row,.pb-row,.answer-edit,.answer-fix){min-width:0}
.home-workspace .answer-rows{display:block;padding-block:4px}
.home-workspace .answer-row{padding:16px 0;gap:4px}
.home-workspace .answer-row+.answer-row{border-top:1px solid var(--border)}
.home-workspace .answer-row:first-child{border-top:0}
.home-workspace .answer-head{margin:0;row-gap:4px}
.home-workspace .answer-head>span{font-size:15px;color:var(--ink)}
.home-workspace .answer-head>strong{font:650 22px/1.2 var(--font-display);letter-spacing:-.02em}
@media(min-width:768px){
  .est-bar{flex-direction:row;justify-content:flex-end}
  .est-bar .sb-btn{width:auto}
  .est-card,.home-workspace :is(.answer-rows,.payback,.assumes){padding-inline:24px}
}
@media(min-width:768px) and (max-width:899px){
  .home-workspace #plan-overview:has(>.payback){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
  .home-workspace #plan-overview>.assumes{grid-column:1/-1}
  .est-side:not([hidden]){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
  .est-side>.est-system{grid-row:1/span 2}
  .est-side>.est-note{grid-column:2}
}
@media(min-width:1100px){
  .workspace-columns{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
  .est-hero{padding:24px}
}
/* The pump and daytime checks: the form is one card, the result another, side by side from 1100 px. */
.est-tool.fb-tool h3{margin:0 0 20px;font:650 30px/1.1 var(--font-display);letter-spacing:-.03em;text-wrap:balance}
.est-tool .fb-rule a{display:inline-flex;align-items:center;min-height:44px;margin:-14px 0}
.est-split{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start}
.est-split>.est-form{min-width:0;padding:20px 16px;background:#fff;border:1px solid var(--card-edge);border-radius:14px;box-shadow:0 1px 3px rgba(35,56,79,.07)}
@media(min-width:768px){.est-split>.est-form{padding:24px}}
@media(min-width:1100px){
  .est-split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .est-split-hours{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
}
/* === /M17 === */
/* === M17b: bill, backup, results === */
/* "Your bill": the fields beside a sample bill (stacked from 900 to 1099 px, where the rail takes the width; the sample is left out on phones). */
.est-bill,.est-bill>form{display:flex;flex-direction:column;gap:24px}
.est-bill>form>.field-error{margin-top:18px}
.est-bill #step-question{margin:0;font:650 30px/1.1 var(--font-display);letter-spacing:-.03em;text-wrap:balance}
.est-bill-fields{display:flex;flex-direction:column;gap:24px}
.est-bill-fields .free-toggle{text-wrap:balance}
.est-field{display:flex;flex-direction:column;gap:8px}
.est-field>:is(label,.est-label){font:600 16px/1.3 var(--font-body)}
.est-in{display:flex;align-items:center;gap:10px;min-height:52px;padding:0 16px;border:1.5px solid var(--control-border);border-radius:10px;background:#fff}
.est-in:focus-within{outline:3px solid var(--blue);outline-offset:3px}
.est-in :is(input,select){flex:1;min-width:0;min-height:48px;padding:0;border:0;border-radius:0;outline:0;background:transparent;color:var(--ink);font:650 22px/1.2 var(--font-display);letter-spacing:-.02em}
.est-in select{font:500 17px/1.3 var(--font-body);letter-spacing:0}
.est-in .unit{flex:none;font:500 16px var(--font-body);color:var(--muted)}
.est-calc{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border-radius:12px;background:var(--teal-pale);box-shadow:inset 0 0 0 1px var(--teal-border)}
.est-calc span{font:600 13px/1.3 var(--font-body);color:var(--muted-cool)}
.est-calc b{font:650 22px/1.2 var(--font-display);letter-spacing:-.02em;color:var(--teal-deep);font-variant-numeric:tabular-nums;text-wrap:balance}
.est-example{align-self:flex-start;padding-left:0}
.est-sample{display:none}
.est-paper{padding:12px 14px;border:1px solid var(--card-edge);border-radius:12px;background:#fff}
.est-paper-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-bottom:8px;border-bottom:1px solid var(--border)}
.est-paper-head b{font:600 15px var(--font-body)}
.est-paper dl{margin:0}
.est-paper dl>div{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 8px;font-size:15px;color:var(--muted)}
.est-paper dl>div.est-hl{margin:4px -6px;padding:9px 14px;border-radius:8px;background:var(--teal-pale);box-shadow:inset 0 0 0 1.5px var(--teal);color:var(--teal-deep);font-weight:650}
.est-paper dd{margin:0;font-variant-numeric:tabular-nums}
@media(min-width:768px){.est-sample{display:block}}
@media(min-width:768px) and (max-width:899px){.est-bill-split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
/* The pump and daytime results: a hero, then cards, in one column beside the form. */
.est-split>[id$=-result]:not(:empty),.est-estimate{display:flex;flex-direction:column;gap:16px;min-width:0}
.est-split>[id$=-result] :is(.tool-result-heading,h4){margin:0;padding:0;border:0}
.est-split>[id$=-result] h4{font:650 22px/1.25 var(--font-display);letter-spacing:-.02em}
.est-hero .tag{margin-left:6px;vertical-align:middle}
.est-notice{padding:16px;border-radius:12px;background:var(--teal-pale);box-shadow:inset 0 0 0 1px var(--teal-border)}
.est-notice h5{margin:0 0 4px;font:650 16px/1.3 var(--font-body)}
.est-notice :is(.lab-note,.fb-rule){margin:4px 0 0}
.est-subsidy dl{margin:0}
.est-subsidy dl>div{display:flex;justify-content:space-between;align-items:center;gap:12px}
.est-subsidy dt{font:600 16px/1.3 var(--font-body)}
.est-subsidy dd{margin:0;font:650 22px/1.2 var(--font-display);letter-spacing:-.02em}
.est-subsidy .est-note{margin-top:8px}
.est-card .strip{margin:0}
.est-form :is(label,legend),.est-form .choice-tile span{text-wrap:balance}
/* === /M17b === */
/* === M18: after the request === */
/* Once a request is sent from this tab: a status chip beside the title, a quiet "Your project" row, and a plan that is read-only. The wrapper has no box until the chip is in it. */
.sent-title{display:contents}
.sent-title:has(.inst-chip){display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;min-width:0}
.sent-title:has(.inst-chip) h3{flex:none;margin:0}
.plan-line>.sent-title:has(.inst-chip){flex:1}
@media(max-width:620px){
  .home-workspace[data-sent] .plan-line{justify-content:flex-start;margin-top:0}
  .home-workspace[data-sent] .plan-line>.sent-title:has(.inst-chip),.home-workspace[data-sent] .workspace-header-actions{flex:1 1 100%}
}
.est-tool .sent-title:has(.inst-chip){margin:0 0 20px}
.home-workspace[data-sent] :is(#edit-plan,#scenario-lab,#roof3d-entry,.plan-line-action,[data-reveal]:not([data-reveal=plan-assumes])){display:none}
/* === /M18 === */
/* === FX2a: estimate === */
/* The plan page: the title and "Save and share" share a row, the chips sit under them. */
.home-workspace .plan-line{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}
.home-workspace .plan-line #plan-line{flex:0 0 100%;margin:0}
@media(min-width:900px){.home-workspace .plan-line{margin-bottom:24px}}
@media(max-width:620px){.home-workspace .plan-line{margin-top:-6px}}
/* The Size, Rates and backup pages: one at a time, the plan page waits behind it (ui/scenario/pages.js). */
.home-workspace[data-page] :is(.plan-line,.plan-answer,.est-side,.est-bar,#workspace-status){display:none}
.home-workspace:not([data-page]) #workspace-estimate-details{display:none}
.home-workspace[data-page=rates] :is(#power-cuts,#solar-money-tool),.home-workspace[data-page=size] #power-cuts,
.home-workspace[data-page=backup] #solar-money-tool{display:none}
.home-workspace[data-page] #workspace-estimate-details{margin:0}
.home-workspace[data-page] .workspace-columns{display:none}
.home-workspace h1.q{margin:0 0 24px;font:650 30px/1.1 var(--font-display);letter-spacing:-.03em;text-wrap:balance}
.home-workspace .bill-dialog[open]{position:static;display:block;width:auto;max-width:none;max-height:none;margin:0;padding:0;
  overflow:visible;border:0;background:none;box-shadow:none}
.home-workspace .bill-dialog .consumer-section{margin:0;border:0;background:none}
.home-workspace #sizes-section{margin:0;border:0;background:none}
.home-workspace #sizes-section .consumer-section-body{padding:0}
.home-workspace #sizes-section :is(#solar-exact,#site-tool,.saved-comparison-details){display:none}
/* The note under the plan opens "What the estimate is based on". */
.est-based .plan-basis{margin:0;padding-left:20px}
.est-based .plan-pending{margin-top:16px}
/* The primary action stays in view below 900 px, as the boards draw it. */
@media(max-width:899px){
  .est-bar{position:sticky;bottom:0;z-index:5;margin:24px calc(-1*var(--bleed,var(--gutter))) 0;padding:11px var(--bleed,var(--gutter));background:#fff;border-top:1px solid var(--border);
    box-shadow:0 -8px 20px -14px #2e3c4d33}
}
@media(min-width:621px){.guided-shell:has(>.home-workspace),.guided-shell:has(.est-bill){--bleed:calc(var(--gutter) + 20px)}}
/* The Bill screen sits on the page's own gutter, not in a white card. */
.guided-shell:has(.est-bill){max-width:none;border:0;border-radius:0;background:none;padding:0 20px 24px}
@media(max-width:620px){.guided-shell:has(.est-bill){padding:0}}
/* The source link in the rates form keeps a 44 px hit area without adding height. */
/* === /FX2a === */
/* === POLISH === */
/* Space between the header rule and the planner, as on the boards' main column: 24 px from 621 px, 32 px from 768 px
   and 40 px from 900 px. The shell inside it carries no top padding of its own. */
#planner.guided-section{padding-bottom:24px}
@media(max-width:620px){#planner.guided-section{padding-top:28px}}
@media(min-width:621px){#planner.guided-section{padding-top:24px}.guided-shell:has(>.home-workspace),.guided-shell:has(.est-bill){padding-bottom:0}}
@media(min-width:768px){#planner.guided-section{padding-top:32px;padding-bottom:32px}}
@media(min-width:900px){#planner.guided-section{padding-top:40px;padding-bottom:48px}}
/* The plan ends with its own bottom padding (32 px on tablet, 48 px from 900 px) before the footer rule, on every plan page. The sticky bar keeps 24 px under its buttons. */
/* Lines of the "What the estimate is based on" list wrap at a natural phrase, never leaving one word alone. */
.assumes li{text-wrap:balance}
/* === /POLISH === */
/* === BTN: buttons === */
/* === /BTN === */
/* === F4: owner fixes === */
#plan-line .est-chip{min-height:44px}
button.est-chip{border:0;cursor:pointer;font-family:inherit}
button.est-chip:hover{box-shadow:inset 0 0 0 1px var(--blue)}
button.est-chip:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
/* === /F4 === */
/* === M22: promise placements === */
/* The Solarbay Promise: the pill, the card (popover on tablet and desktop, bottom sheet on phones), the wide strip on Installation and the compact card on Enquiry received. Colours are the M5 tokens: white text on --promise-fill is 5.69:1 at its lightest stop. */
.pr-pill{display:inline-flex;flex:none;align-items:center;gap:8px;min-height:44px;padding:0 16px 0 8px;border:0;border-radius:999px;background:var(--promise-fill);box-shadow:0 6px 16px -8px rgba(10,60,130,.7);color:#fff;font:650 14px/1 var(--font-display);letter-spacing:-.005em;white-space:nowrap;text-decoration:none;cursor:pointer}
.pr-pill img{display:block;width:30px;height:30px}
.est-bar .pr-pill{align-self:center}
.lead-bar .pr-pill{margin-right:auto}
.pr-box{box-sizing:border-box;border-radius:14px;background:var(--promise-fill);box-shadow:0 10px 24px -12px rgba(10,60,130,.6);color:#fff}
.pr-head{display:flex;align-items:center;gap:14px;flex:none}
.pr-head b{margin:0;font:650 22px/1.15 var(--font-display);letter-spacing:-.015em;white-space:nowrap}
.pr-titles{margin:0;padding:0;list-style:none}
.pr-titles li{display:flex;align-items:center;gap:10px;font:600 15px/1.3 var(--font-body)}
.pr-titles li:before{content:"✓";flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--promise-tick);color:var(--gold-check);font:700 12px/1 var(--font-body)}
.pr-col{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:16px;border-radius:12px}
.pr-col .pr-head{gap:12px}
.pr-col .pr-head img{width:40px;height:40px}
.pr-col .pr-head b{font-size:18px}
.pr-col .pr-titles{display:grid;gap:10px;width:100%;padding-top:12px;border-top:1px solid rgba(255,255,255,.28)}
.pr-col .pr-titles li{gap:8px;font-size:14px}
.pr-col .pr-titles li:before{width:18px;height:18px;font-size:10px}
.pr-card{position:fixed;inset:auto;margin:0;box-sizing:border-box;width:358px;max-width:calc(100vw - 32px);max-height:80vh;max-height:80dvh;padding:20px;overflow-y:auto;border:1px solid var(--card-edge);border-radius:14px;background:#fff;box-shadow:0 18px 40px -14px rgba(16,37,66,.35);color:var(--ink);text-align:left}
.pr-card::backdrop{background:var(--backdrop)}
.pr-card-head{display:flex;align-items:center;gap:14px;padding-bottom:12px;border-bottom:1px solid var(--card-edge)}
.pr-card-head h2{margin:0;font:650 22px/1.15 var(--font-display);letter-spacing:-.015em}
.pr-card-head .sb-btn{justify-content:center;min-width:56px;margin:0 -8px 0 auto}
.pr-points{margin:0;padding:0;list-style:none}
.pr-points li{position:relative;padding:14px 0 14px 34px;border-top:1px solid var(--card-edge)}
.pr-points li:first-child{border-top:0}
.pr-points li:before{content:"✓";position:absolute;left:0;top:15px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--teal-pale);color:var(--teal);font:700 12px/1 var(--font-body)}
.pr-points b{display:block;font:600 16px/1.35 var(--font-body)}
.pr-points span{display:block;margin-top:3px;color:var(--muted);font:400 14px/1.45 var(--font-body);text-wrap:balance}
body:has(.pr-card:modal){overflow:hidden}
@media(min-width:768px){
  .est-bar .pr-pill{margin-right:auto}
}
@media(max-width:620px){
  .lead-bar .pr-pill{flex:none;margin:0 auto 12px}
  .lead-done .pr-col{margin-inline:12px}
  .pr-card{inset:auto 0 0;width:auto;max-width:none;padding:8px 16px 24px;border:0;border-radius:20px 20px 0 0;box-shadow:0 -16px 40px -16px rgba(16,37,66,.5)}
  .pr-card:before{content:"";display:block;width:40px;height:4px;margin:4px auto 16px;border-radius:2px;background:var(--control-border-soft)}
  .pr-card[open]{animation:pr-up .22s ease-out}
  .pr-card-head{gap:12px}
  .pr-card-head h2{font-size:20px;white-space:nowrap}
  .pr-points li{padding:16px 0 16px 36px}
  .pr-points li:before{top:17px}
}
/* The sheet slides up; the one reduced-motion block at the end of this file stops it. */
@keyframes pr-up{from{transform:translateY(24px);opacity:0}}
@media(min-width:621px){
  .lead-done .pr-col{width:fit-content;min-width:250px;max-width:calc(100% - 64px);margin:24px 32px 0}
}
@media(min-width:900px){
  .lead-done .pr-col{grid-column:2;max-width:calc(100% - 96px);margin-inline:48px}
}
@media(max-width:389px){
  .lead-done .pr-col{margin-inline:0}
}
/* === /M22 === */
/* === M23: solar size === */
/* The size cards inside the plan's Size & roof: one column, two across from 440 px of section width, four from 780 px. */
.sz-box{container:sz-box/inline-size}
.sz-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin:20px 0}
.sz-card{container-type:inline-size;display:flex;flex-direction:column;gap:14px;min-width:0;padding:16px;background:#fff;border:1px solid var(--border-card);border-radius:14px;box-shadow:0 1px 2px rgba(10,40,90,.06)}
.sz-card.is-selected{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue),0 1px 2px rgba(10,40,90,.06)}
.sz-top{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:28px}
.sz-ico{flex:none;width:24px;height:24px;fill:none;stroke:var(--blue-hover);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sz-chip{display:inline-flex;align-items:center;min-height:28px;padding:0 10px;border-radius:999px;background:var(--pale);box-shadow:inset 0 0 0 1px var(--card-edge);color:var(--blue-hover);font:600 13px/1 var(--font-body);white-space:nowrap}
.sz-title{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0;color:var(--ink);font:650 30px/1.1 var(--font-display);letter-spacing:-.02em;white-space:nowrap}
.sz-title small{margin-left:4px;color:var(--muted);font:500 16px var(--font-body);letter-spacing:0}
.sz-tick{flex:none;display:grid;place-items:center;width:24px;height:24px;visibility:hidden;color:var(--blue);font:700 18px/1 var(--font-body)}
.is-selected .sz-tick{visibility:visible}
.sz-facts{display:grid;gap:10px;margin:0}
.sz-facts>div{display:flex;flex-direction:column;gap:2px;min-width:0;padding-top:10px;border-top:1px solid var(--border)}
.sz-facts dt{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;color:var(--muted-cool);font-size:13px;line-height:1.4;text-wrap:balance}
.sz-facts dd{margin:0;font-size:18px;font-weight:600;line-height:1.3;white-space:nowrap}
.sz-facts .sz-save dd{color:#0e5a5e;font:650 22px/1.2 var(--font-display);letter-spacing:-.02em}
.sz-card .sb-btn{align-self:stretch;justify-content:center;margin-top:auto;min-height:44px;white-space:nowrap}
.sz-note{margin:0 0 8px;color:var(--muted);font-size:14px;line-height:1.6;text-wrap:balance}
@container sz-box (min-width:440px){.sz-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container sz-box (min-width:780px){.sz-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:768px){.sz-card{padding:20px}.sz-title{font-size:34px}}
@container (max-width:239px){.sz-title{font-size:26px}}
@container sz-box (min-width:340px) and (max-width:439px){.sz-facts{grid-template-columns:minmax(0,1fr) minmax(0,1fr) max-content;gap:12px;padding-top:12px;border-top:1px solid var(--border)}.sz-facts>div{padding-top:0;border-top:0}.sz-facts dd{font-size:16px}}
/* === /M23 === */
/* === F3: pump === */
/* "Motor depth" and "Running hours each day": the number and its unit in one box, as the pump boards draw them. */
.pump-in{display:flex;align-items:center;gap:10px;min-height:46px;padding:0 12px;border:1px solid var(--control-border-soft);border-radius:7px;background:#fff}
.pump-in:focus-within{outline:3px solid var(--blue);outline-offset:3px}
.fb-tool .pump-in input{flex:1;min-height:44px;padding:0;border:0;border-radius:0;outline:0;background:transparent}
.pump-unit{flex:none;font-size:16px;font-weight:400;color:var(--muted)}
/* === /F3 === */
/* === M24: rates === */
/* "Your bill's rates" in its dialog: the form beside the result figure from 900 px, the figure under the form below.
   Only the rates mode carries the rt- classes, so Output's bill check (tariff-entry.js, .after-tool) is untouched. */
.rt-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start}
.rt-form{display:flex;flex-direction:column;gap:28px;min-width:0;padding:20px 16px;background:#fff;border:1px solid var(--card-edge);border-radius:14px;box-shadow:0 1px 3px rgba(35,56,79,.07)}
@media(min-width:768px){.rt-form{padding:32px 24px}}
.rt-form #bill-rates{display:flex;flex-direction:column;gap:28px;min-width:0}
.rt-form #bill-steps{display:flex;flex-direction:column;gap:12px;min-width:0}
.rt-form .error-summary{margin:0}
.rt-form>.bill-field,.rt-form #bill-rates>.bill-field{margin:0}
.rt-form .bill-field{gap:10px}
.rt-form .bill-field>label{font:600 16px/1.3 var(--font-body);color:var(--ink)}
.rt-form #bill-rates>label:not(.lab-check){display:flex;flex-direction:column;gap:10px;font:600 16px/1.3 var(--font-body);color:var(--ink)}
.rt-form .bill-choice .money-input input{min-height:44px;padding:0 10px}
.rt-form .bill-choice{display:flex;flex-direction:column;gap:10px;min-width:0;margin:0}
.rt-form .bill-choice>.lab-check{min-height:48px;margin:0;padding:0 14px;align-items:center;border:1.5px solid var(--control-border-soft);border-radius:12px;background:#fff;font:500 16px/1.3 var(--font-body);text-wrap:balance}
.rt-form .bill-choice>.lab-check:has(input:checked){border-color:var(--blue);background:var(--pale)}
.rt-form .bill-choice>.lab-check input{flex:none;width:22px;height:22px;margin:0}
.rt-form .bill-choice:has(input[name=bill-free]){display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.rt-form .bill-choice:has(input[name=bill-free])>legend{grid-column:1/-1}
.rt-form #bill-free-more{display:flex;flex-direction:column;gap:28px}
.rt-form input[type=number],.rt-form select{min-height:52px;border:1.5px solid var(--control-border);border-radius:12px;padding:0 16px;background:#fff;color:var(--ink);font:500 17px/1.2 var(--font-body)}
.rt-form .bill-field>input,.rt-form select{width:100%}
.rt-form .bill-field .money-line{display:flex;width:100%;min-height:52px;padding:0 16px;border:1.5px solid var(--control-border);border-radius:12px;background:#fff;color:var(--muted)}
.rt-form .bill-field .money-input{flex:1;min-width:0;color:var(--ink)}
.rt-form .bill-field .money-input input{flex:1;width:auto;min-width:0;min-height:48px;padding:0;border:0;background:transparent;outline:0}
.rt-form .bill-field .money-line:focus-within{outline:3px solid var(--blue);outline-offset:3px}
.rt-form .bill-field .money-line:has(input[aria-invalid=true]){border:2px solid var(--amber-border);background:var(--amber-pale)}
.rt-form .bill-field .money-input input[aria-invalid=true]{border:0;background:transparent}
.rt-form .bill-step-upto{flex:1;min-width:0}
.rt-form .bill-step-upto input{flex:1;width:auto;min-width:0}
.rt-form .bill-step-line .money-line,.rt-form .bill-step-line .money-input{flex:1;min-width:0}
.rt-form .bill-step-line .money-input input{flex:1;width:auto;min-width:0}
.rt-form .error-summary a{display:inline-flex;align-items:center;min-height:44px}
.rt-form .field-error{margin:0;text-wrap:balance}
.rt-form .lab-status{margin:0}
.rt-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin:0}
.rt-actions .sb-btn{text-align:center}
.rt-result{min-width:0}
.rt-result :is(.est-lab,.est-big,.est-note){text-wrap:balance}
@media(min-width:900px){
  .rt-grid{grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:32px}
  .rt-result{position:sticky;top:0}
}
@media(max-width:540px){.rt-actions{flex-direction:column;align-items:stretch}.rt-actions .sb-btn{width:100%;justify-content:center}}
/* === /M24 === */
/* === M25: save and remove === */
/* The Save dialog and the remove confirm: a centred modal from 768 px, a bottom sheet below it (the sheet slides with the pr-up keyframes; the reduced-motion block at the end stops it). */
.dlg-sheet{box-sizing:border-box;width:480px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 64px);padding:0;overflow:hidden;border:0;border-radius:16px;background:#fff;box-shadow:0 24px 60px -12px rgba(9,32,64,.45);text-align:left}
.dlg-sheet[open]{display:flex;flex-direction:column}
.dlg-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:24px 24px 16px}
.dlg-head h4,.dlg-confirm h4{margin:0;font:650 22px/1.2 var(--font-display);letter-spacing:-.02em;text-wrap:balance}
.dlg-head .sb-btn{justify-content:center;min-width:56px;margin-right:-8px}
.dlg-body{display:flex;flex-direction:column;gap:16px;padding:0 24px 24px;overflow-y:auto;overscroll-behavior:contain}
.dlg-body>*{flex:none}
.dlg-save{justify-content:center}
.dlg-status{margin:0;padding:10px 14px;border-radius:12px;background:var(--teal-pale);color:var(--teal-deep);font:600 15px/1.5 var(--font-body);text-wrap:balance}
.dlg-status:empty{display:none}
.dlg-status[data-tone=ok]:before{content:"✓";margin-right:10px}
.dlg-status[data-tone=warn]{background:var(--amber-pale);color:var(--amber-ink);box-shadow:inset 0 0 0 1px var(--amber-border)}
.dlg-status textarea{display:block;box-sizing:border-box;width:100%;height:100px;margin-top:10px;padding:10px;border:1px solid var(--border);border-radius:8px;color:var(--ink);font:14px var(--font-body)}
.dlg-list{margin:0;padding:0;overflow:hidden;list-style:none;border:1px solid var(--border-card);border-radius:12px}
.dlg-list li+li{border-top:1px solid var(--border)}
.dlg-list li:has(>[hidden]){display:none}
.dlg-list :is(a,button){display:flex;align-items:center;gap:14px;box-sizing:border-box;width:100%;min-height:56px;padding:0 16px;border:0;background:none;color:var(--ink);font:500 16px/1.4 var(--font-body);text-align:left;text-decoration:none;cursor:pointer}
.dlg-list :is(a,button):hover{background:var(--pale)}
.dlg-list :is(a,button):focus-visible{outline-offset:-3px}
.dlg-ico{flex:none;width:18px;height:18px;stroke-width:1.8}
.dlg-go{margin-left:auto;color:var(--muted)}
.dlg-note{margin:0;color:var(--muted);font:14px/1.5 var(--font-body);text-wrap:balance}
.dlg-note:empty{display:none}
.dlg-remove{align-self:flex-start;margin-top:8px}
.dlg-confirm{width:440px;gap:14px;padding:24px}
.dlg-confirm p{margin:0;font:400 17px/1.5 var(--font-body);text-wrap:balance}
.dlg-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.dlg-under{visibility:hidden}
.dlg-under::backdrop{background:none;backdrop-filter:none}
body:has(.dlg-sheet:modal){overflow:hidden}
@media(max-width:767px){
  .dlg-sheet{inset:auto 0 0;width:auto;max-width:none;margin:0;max-height:80vh;max-height:80dvh;border-radius:20px 20px 0 0;box-shadow:0 -16px 40px -16px rgba(16,37,66,.5)}
  .dlg-sheet:before{content:"";flex:none;width:40px;height:4px;margin:8px auto 0;border-radius:2px;background:var(--control-border-soft)}
  .dlg-sheet[open]{animation:pr-up .22s ease-out}
  .dlg-head{padding:12px 16px 16px}
  .dlg-body{padding:0 16px 24px}
  .dlg-confirm{padding:0 16px 24px}
  .dlg-confirm h4{margin-top:12px}
  .dlg-acts{flex-direction:column}
  .dlg-acts .sb-btn{width:100%;justify-content:center}
}
/* === /M25 === */
/* === M26: states === */
.pub-body :is(p,li,td)>a:not([class]){padding-block:14px}
main summary{min-height:44px;text-wrap:balance}
/* === /M26 === */
/* === F2: polish ===
   Hit areas of small inline links are 44 px without adding visible height: the rates dialog's Telangana source links
   and the links in the no-script fallback line. The Telangana sources summary is a 44 px row. */
.rt-form details li a,noscript p a{padding-block:14px}
.rt-form details:not(.tool-subdetails)>summary{min-height:44px;padding-block:10px;cursor:pointer}
/* === /F2 === */
.workspace-pane .plan-answer{margin:0}
.home-workspace :is([aria-labelledby=answer-price-label],[aria-labelledby=answer-subsidy-label],[aria-labelledby=answer-savings-label])>.answer-head{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline
}
.home-workspace :is(#answer-price,#answer-subsidy,#answer-savings){white-space:nowrap;text-align:right}
.home-workspace .answer-head>small{flex-basis:100%;font-size:14px}
.home-workspace :is([aria-labelledby=answer-price-label],[aria-labelledby=answer-savings-label])>.answer-head>small{grid-column:1/-1}
.home-workspace .answer-row>.sb-btn{align-self:stretch;margin-top:6px}
.home-workspace .plan-sections{margin:24px 0 0}
.workspace-pane .tool-field-grid{grid-template-columns:minmax(0,1fr)}
.workspace-pane :is(input:not([type=checkbox],[type=radio],[type=range]),textarea,select){font-size:16px}
.workspace-pane [data-q-diff]{overflow-x:auto}
.workspace-pane [data-q-diff]:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
@media(max-width:620px){
  #planner:has(#guided-planner:not([hidden])>.home-workspace){width:calc(100% - 32px)}
  .guided-shell:has(>.home-workspace){padding:0 0 16px}
}
@media print{
  body.print-tool .home-workspace>:is(header,.est-bar),body.print-tool .est-side{display:none}
  body.print-tool .workspace-columns{display:block}
}

.saved-line{margin:12px 0 0;font-size:14px;color:var(--muted)}
.saved-line .answer-fix{display:inline-flex;align-items:center;min-width:44px;min-height:44px}
.saved-line [data-delete-confirm] .sb-btn{margin:4px 6px 0 0}
/* == end area: front-door == */

/* === M2: public-page primitives ===
   Editorial look from canvas C: hairline rules, type and whitespace. Tables, question rows and link rows start with a
   2 px ink rule and each row below is a hairline. Amber marks only "unverified" and "still needs checking". The pages
 */
.breadcrumbs{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:0 0 8px;font-size:15px;color:var(--muted)}
.breadcrumbs a{display:inline-flex;align-items:center;min-width:44px;min-height:44px;color:var(--blue-hover);text-decoration:none}
.breadcrumbs a:hover{text-decoration:underline}
.pub-answer{margin:0 0 40px;padding:20px 0;border-top:2px solid var(--ink);border-bottom:1px solid var(--border)}
.pub-answer p{margin:0;font:500 22px/1.4 var(--font-display);letter-spacing:-.01em;color:var(--ink);text-wrap:pretty}
.pub-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 24px;margin:4px 0 0;padding:20px 0 0}
.pub-facts div{min-width:0;padding-left:14px;border-left:1px solid var(--border)}
.pub-facts dt{font-size:13px;line-height:1.4;color:var(--muted)}
.pub-facts dd{margin:4px 0 0;font:650 24px/1.2 var(--font-display);letter-spacing:-.02em;color:var(--ink)}
.eg-table{margin:14px 0;overflow-x:auto;border-top:2px solid var(--ink)}
.eg-table:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.eg-table table{width:100%;margin:0;border-collapse:collapse;font-size:16px;line-height:normal}
.eg-table th,.eg-table td{padding:14px 12px;border:0;border-top:1px solid var(--border);background:none;text-align:left;white-space:nowrap}
.eg-table th:first-child,.eg-table td:first-child{padding-left:0}
.eg-table th:last-child,.eg-table td:last-child{padding-right:0}
.eg-table thead th{border-top:0;border-bottom:1px solid var(--border);font:600 13px var(--font-body);color:var(--muted)}
.eg-table tbody th{font-weight:400}
.eg-table .n,.eg-table td:first-child+td:last-child,.eg-table th:first-child+th:last-child{text-align:right;font-variant-numeric:tabular-nums}
.eg-table .hl td,.eg-table .hl th{color:var(--blue-hover);font-weight:600}
.related-guides{margin:48px 0}
.related-guides h2{margin:0 0 12px;font:650 22px/1.3 var(--font-display);letter-spacing:-.02em}
.related-guides ul{margin:0;padding:0;list-style:none;border-top:2px solid var(--ink)}
.related-guides li{margin:0}
.related-guides li+li{border-top:1px solid var(--border)}
.related-guides li a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:60px;margin-inline:-14px;padding-inline:14px;color:var(--ink);font:500 17px/1.35 var(--font-body);text-decoration:none;text-wrap:balance}
.related-guides li a::after{content:"→";content:"→"/"";flex:none;color:var(--blue-hover)}
.related-guides li a:hover{background:var(--pale)}
.pub-toc{display:none;margin:0;padding:0 0 0 16px;border-left:1px solid var(--border)}
.pub-toc b{display:block;margin-bottom:4px;font:600 13px/1.4 var(--font-body);color:var(--muted)}
.pub-toc ol{margin:0;padding:0;list-style:none}
.pub-toc a{display:flex;align-items:center;min-height:44px;font:400 15px/1.3 var(--font-body);color:var(--ink);text-decoration:none;text-wrap:balance}
.pub-toc a:hover{color:var(--blue-hover)}
@media(min-width:900px){.pub-toc{display:block}}
.article-cta{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px 32px;margin:48px 0;padding:28px;border-radius:16px;background:linear-gradient(135deg,var(--logo-blue),var(--logo-blue-deep));color:#fff}
.article-cta h2{margin:0;font:650 26px/1.2 var(--font-display);letter-spacing:-.02em;color:#fff;text-wrap:balance}
.article-cta a:focus-visible{outline-color:#fff}
.pub-part{display:flex;flex-direction:column;gap:8px;margin:0;padding:16px 0 4px;border-top:1px solid var(--border)}
.pub-part h3{display:flex;align-items:center;gap:10px;margin:0;font:600 17px/1.3 var(--font-body);color:var(--ink);text-wrap:balance}
.pub-part ul{display:flex;flex-direction:column;gap:8px;margin:0;padding-left:20px;font-size:16px;line-height:1.5}
.pub-part p{margin:0;font-size:16px;line-height:1.5}
.pub-part :is(p,li){color:var(--ink)}
.pub-part li,.pub-part p{text-wrap:pretty}
.pub-calc{display:flex;flex-direction:column;gap:20px;margin:14px 0;padding:20px 0 0;border-top:2px solid var(--ink)}
.pub-calc-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.pub-calc label{display:block;margin-bottom:8px;font:600 16px/1.3 var(--font-body)}
.pub-calc select{width:100%;min-height:52px;padding:0 44px 0 16px;border:1.5px solid var(--control-border);border-radius:10px;appearance:none;-webkit-appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none' stroke='%231c4d9f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center;color:var(--ink);font:500 17px var(--font-body)}
.pub-res{padding:0 0 0 16px;border-left:3px solid var(--blue)}
.pub-res b{display:block;margin:0;font:650 44px/1 var(--font-display);letter-spacing:-.03em;color:var(--blue-hover)}
.pub-res span{display:block;margin-top:8px;font-size:15px;line-height:1.45;color:var(--muted);text-wrap:pretty}
.pub-res .pub-res-label{margin:0 0 6px;font:600 14px/1.4 var(--font-body)}
.pub-res .pub-res-why{margin:0;font-size:16px;line-height:1.5;color:var(--ink)}
.pub-res-empty{border-left-color:var(--control-border-soft)}
.pub-res-empty b{color:var(--muted-quiet)}
@media(max-width:899px){.pub-facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){
.pub-answer{padding:18px 0}
.pub-answer p{font-size:18px}
.pub-facts{grid-template-columns:minmax(0,1fr)}
.eg-table th,.eg-table td{padding:12px 8px;white-space:normal}
.eg-table table{font-size:15px}
.eg-table td.n,.eg-table td:first-child+td:last-child{white-space:nowrap}
.article-cta{padding:22px 20px}
.article-cta .sb-btn{width:100%;justify-content:center}
.pub-calc{padding-top:18px}
.pub-calc-pair{grid-template-columns:minmax(0,1fr)}}
/* === /M2 === */
/* === M10: subsidy page ===
   Boards DeskSubsidy, TabSubsidy, PhoneSubsidy and CalcStates state 3 (canvas C). The calculator and the size table use
   the M2 primitives (.pub-calc, .pub-res, .eg-table). This block adds a 44 px hit area for the text links (padding on an
   inline link adds no height), a tighter size table at phone width so "3 kW or more" stays on one line at 320 px, the
   portal button inside the expired result and the disabled look of the two pickers. The expired notice, .fact-expired
   (M12), is for the state page; the subsidy page shows its notice in the calculator's expired result. */
a.pub-tap,.pub-tap>a{padding-block:12px}
@media(max-width:520px){.eg-table.pub-sizes tbody th{white-space:nowrap}.eg-table.pub-sizes :is(th,td):not(:first-child){padding-left:4px}.eg-table.pub-sizes :is(th,td):not(:last-child){padding-right:4px}}
.pub-res .sb-btn{margin-top:14px}
.pub-res .sb-btn .sb-label{display:inline;margin:0;font:inherit;color:inherit}
.pub-calc select:disabled{border-color:var(--control-border-soft);background-color:var(--pale);color:var(--muted)}
/* === /M10 === */
/* === M8: guide shell ===
   Boards DeskGuide, TabGuide and PhoneGuide (canvas C). A guide is a title and its date over two columns at 900 px and
   wider: the article (the answer, the body, the blue planner band) and, beside it, the contents and related guides.
   Below 900 px the aside follows the article and the contents list is hidden. */
.pub-page{padding-block:20px 56px}
.pub-head{padding:8px 0 28px}
.pub-head h1{margin:0;font:650 clamp(32px,4.4vw,48px)/1.08 var(--font-display);letter-spacing:-.03em;text-wrap:balance}
.pub-meta{margin:14px 0 0;font-size:14px;color:var(--muted)}
.pub-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:48px}
.pub-main{min-width:0}
.pub-main .article-cta{margin:40px 0 0}
.pub-aside{display:flex;flex-direction:column;gap:40px;min-width:0}
.pub-aside .related-guides{margin:0}
@media(min-width:900px){.pub-grid{grid-template-columns:minmax(0,1fr) 280px;gap:56px;align-items:start}.pub-main{max-width:760px}}
@media(min-width:900px) and (min-height:640px){.pub-aside{position:sticky;top:24px}}
.pub-body{font-size:17px;line-height:1.6}
.pub-body>*{margin:0}
.pub-body>*+*{margin-top:14px}
.pub-body>h2{margin-top:40px;font:650 26px/1.2 var(--font-display);letter-spacing:-.02em;text-wrap:balance}
.pub-body>h3{margin-top:28px;font-size:18px;line-height:1.35}
.pub-body>:first-child{margin-top:0}
.pub-body :is(p,li){overflow-wrap:break-word;text-wrap:pretty}
.pub-body strong{font-weight:600}
.pub-body a:not(.sb-btn){color:var(--blue-hover);text-decoration:underline;text-underline-offset:3px}
.pub-body ul{padding:0 0 0 22px}
.pub-body li+li{margin-top:12px}
.pub-body li::marker{color:var(--muted)}
.pub-body ul.pub-checks{padding:0;list-style:none}
.pub-checks li{position:relative;padding-left:32px}
.pub-checks li::before{content:"✓";content:"✓"/"";position:absolute;left:0;top:3px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--teal);color:#fff;font:700 12px/1 var(--font-body)}
.pub-source{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;font-size:15px;color:var(--muted)}
.pub-source a{display:inline-flex;align-items:center;min-height:44px}
/* === /M8 === */
/* === M9: learn hub ===
   Boards DeskHub, TabHub and PhoneHub (canvas C): the title, four groups of guide links (.related-guides) in two columns
   at 900 px and wider and one column below, then the planner band. */
.hub-page{padding-block:28px 56px}
.hub{display:grid;grid-template-columns:minmax(0,1fr);gap:24px 32px}
@media(min-width:900px){.hub{grid-template-columns:repeat(2,minmax(0,1fr))}}
.hub .related-guides{margin:0}
.hub .related-guides h2{line-height:1.2}
.hub-page .article-cta{margin:40px 0 0}
/* === /M9 === */

:is(.guided-shell,.lead-form) :is(input:not([type=checkbox],[type=radio],[type=range],[type=hidden]),select,textarea):where(:not([aria-invalid=true])){border-color:var(--control-border)}

/* ---------- Printing one panel (web/ui/print.js): only the .print-target element, black on white. ---------- */
@media print{
body.print-tool{background:#fff!important;color:#000!important}
body.print-tool *:not(.print-target):not(.print-target *):not(:has(.print-target)){display:none!important}
body.print-tool :has(.print-target){margin:0!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important}
body.print-tool .print-target,body.print-tool .print-target *{color:#000!important;background:#fff!important;box-shadow:none!important;text-shadow:none!important}
body.print-tool .print-target a[href]::after{content:" (" attr(href) ")";font-size:.85em;overflow-wrap:anywhere}
body.print-tool .print-target a[href^="#"]::after{content:""}
}

/* Plan summary change chips ("−₹120 a month since your last edit"): a gentle fade only when new; held still under reduced motion. */
/* Wizard house (web/ui/wizard/house.js): a small picture beside the question on wide screens; new parts fade in. */
/* Power-cut battery bar (web/ui/outage/playback.js): still by default; the "now" line moves only while playing. */
.cut-playback{margin:22px 0}
.cut-visual{margin:6px 0 12px}
.cut-note{display:inline-block;position:relative;margin:0 0 6px;font-size:14px;font-weight:600;color:var(--ink)}
.cut-bar{position:relative;height:28px;border-radius:7px;background:#e3f3ef;overflow:hidden}
.cut-fill{position:absolute;inset:0;background:var(--lab-teal)}
.cut-dark{position:absolute;top:0;bottom:0;right:0;background:rgba(35,56,79,.45);border-left:2px solid var(--ink)}
.cut-now{position:absolute;top:0;bottom:0;left:-2px;width:100%;border-left:3px solid var(--lab-blue)}
.cut-times{display:flex;justify-content:space-between;gap:8px;margin-top:6px;font-size:13px;color:var(--muted)}
.cut-times #cut-clock{color:var(--ink);font-weight:600}
/* == area: home redesign, 8 Nov 2026 ==
   Buttons and the segmented switch are copied verbatim from the design system (components/actions/button.css and
   components/forms/segmented.css). Every control on the site uses these classes. */
.sb-btn{--fg:#fff;--chip:rgba(255,255,255,.2);--chip-fg:#fff;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:0 20px 0 22px;border:0;border-radius:10px;background:var(--blue);color:var(--fg);font:600 16px/1.2 var(--font-body);letter-spacing:.005em;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .15s,box-shadow .15s,color .15s;max-width:100%}
.sb-btn:hover{color:var(--fg);text-decoration:none}
.sb-btn:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.sb-btn[disabled],.sb-btn[aria-disabled=true]{opacity:.45;cursor:default}
.sb-btn-sm{min-height:44px;padding:0 16px 0 18px;gap:10px;font-size:15px}
.sb-btn-lg{min-height:56px;padding:0 22px 0 28px;border-radius:12px;font-size:17px}
.sb-btn-full{display:flex;width:100%}
.sb-arrow{display:inline-grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;background:var(--chip);color:var(--chip-fg);font-size:14px;line-height:1;transition:background-color .15s,color .15s,transform .15s}
.sb-btn-sm .sb-arrow{width:20px;height:20px;font-size:12px}
.sb-btn-lg .sb-arrow{width:30px;height:30px;font-size:16px}
.sb-btn-primary{background:linear-gradient(180deg,#3a6fd6 0%,#285fc3 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 1px 2px rgba(18,45,105,.3),0 8px 18px -8px rgba(40,95,195,.7)}
.sb-btn-primary:hover{background:linear-gradient(180deg,#2f63c6 0%,#1c4d9f 100%)}
.sb-btn-primary:hover .sb-arrow{background:#fff;color:var(--blue)}
.sb-btn-secondary{--fg:var(--blue-hover);--chip:#fff;--chip-fg:var(--blue);background:var(--pale)}
.sb-btn-secondary:hover{background:#dce9fb}
.sb-btn-light{--fg:var(--blue-hover);--chip:var(--pale);--chip-fg:var(--blue);background:#fff;box-shadow:0 1px 2px rgba(10,30,70,.25),0 8px 18px -10px rgba(10,30,70,.5)}
.sb-btn-light:hover{--fg:var(--ink);--chip:#fff;background:var(--sunlight)}
.sb-btn-outline{--fg:var(--ink);--chip:var(--pale);--chip-fg:var(--blue);background:transparent;box-shadow:inset 0 0 0 1.5px var(--control-border-soft)}
.sb-btn-outline:hover{background:var(--pale);box-shadow:inset 0 0 0 1.5px var(--blue)}
.sb-btn-quiet{--fg:var(--blue);min-height:44px;padding:0;gap:8px;border-radius:4px;background:none}
.sb-btn-quiet .sb-label{padding-bottom:2px;background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;transition:background-size .25s ease}
.sb-btn-quiet:hover{--fg:var(--blue-hover)}
.sb-btn-quiet:hover .sb-label{background-size:100% 1.5px}
.sb-btn-quiet .sb-arrow{width:auto;height:auto;background:none;color:inherit;font-size:1.1em}
.sb-btn:hover .sb-arrow{transform:translateX(2px)}
.sb-btn-quiet:hover .sb-arrow{transform:translateX(3px)}
.sb-btn:active{transform:translateY(1px)}
@media(max-width:420px){.sb-btn-lg{padding:0 18px 0 22px;font-size:16px;gap:10px}}
@media(max-width:420px){.sb-btn{white-space:normal;text-align:left}}
@media(max-width:619px){.sb-btn-block-sm{display:flex;width:100%;justify-content:space-between}}
.sb-label{text-wrap:balance}
.sb-seg{display:flex;gap:4px;padding:4px;border-radius:14px;background:var(--pale);box-shadow:inset 0 0 0 1px var(--border-card)}
.sb-seg-item{flex:1;min-width:0;min-height:48px;padding:0 12px;border:0;border-radius:10px;background:transparent;color:var(--muted-cool);font:600 16px/1.2 var(--font-body);cursor:pointer;transition:background-color .15s,color .15s,box-shadow .15s}
.sb-seg-item:hover{background:rgba(255,255,255,.6);color:var(--ink)}
.sb-seg-item[aria-pressed=true]{background:#fff;color:var(--blue-hover);font-weight:700;box-shadow:0 1px 2px rgba(18,45,105,.18),0 4px 10px -4px rgba(40,95,195,.4)}
.sb-seg-item:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.goal-panel .sb-btn:focus-visible,.band .sb-btn:focus-visible{outline-color:#fff}

/* === M1: shell === */
/* Header (boards DeskMenu and TabMenu): four quiet links, two quieter ones, then the filled button. At 900 px and
   below the links fold into the menu button; the quote button hides at 370 px and below, where the menu holds it. */
.site-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:10px;color:var(--muted-cool);transition:background-color .15s,color .15s}
.site-nav a:hover{background:var(--pale);color:var(--ink)}
.site-nav a[aria-current=page]{color:var(--blue)}
.site-nav a[aria-current=page]::after{content:"";width:8px;height:8px;margin-left:8px;border-radius:50%;background:var(--amber)}
.header-quote{flex:none;margin-left:12px}
@media(max-width:900px){.header-quote{margin-left:auto}}
@media(min-width:901px) and (max-width:1040px){.site-nav{font-size:15px}.site-nav{gap:0}.site-nav a{padding:0 8px}.header-quote{margin-left:8px}}
@media(max-width:370px){.header .header-quote{display:none}.header .site-menu{margin-left:auto}}
/* The menu: opened, a sheet over the page on a phone and a 380 px panel from the right on a tablet (641 to 900 px). The
   header stays on top with × in the place of ☰, the page behind does not scroll, and the one Request a quote button is
   pinned on a deep-blue panel. The 72 px header height and the sheet's top edge are the same number. */
.site-menu .menu-close{display:none}
.site-menu[open] .menu-open{display:none}
.site-menu[open] .menu-close{display:inline;font-size:34px}
@media(max-width:900px){
body:has(.site-menu[open]){overflow:hidden}
body:has(.site-menu[open]) .header{position:fixed;top:0;left:0;right:0;z-index:60;background:#fff;border-bottom-color:var(--card-edge)}
body:has(.site-menu[open]) .header-quote{display:none}}
.site-menu[open]>nav{position:fixed;inset:72px 0 0;z-index:50;display:flex;flex-direction:column;min-width:0;padding:0;border:0;border-radius:0;background:#fff;box-shadow:none;overflow-y:auto}
@media(min-width:641px) and (max-width:900px){
.site-menu[open]>nav{inset:80px 0 0 auto;width:380px;box-shadow:0 12px 28px #2e3c4d1a}
body:has(.site-menu[open])::after{content:"";position:fixed;inset:80px 0 0;z-index:40;background:var(--backdrop)}}
.menu-rows{padding-top:12px}
.menu-rows .go{flex:none;font:500 20px var(--font-body);color:var(--muted)}
.site-menu .menu-rows a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:68px;padding:0;border-bottom:1px solid var(--card-edge);border-radius:0;font:650 24px/1.2 var(--font-display);letter-spacing:-.02em;color:var(--ink)}
.site-menu .menu-rows a:hover{background:none}
.site-menu nav a[aria-current]{color:var(--blue)}
.site-menu .menu-rows a[aria-current] span:first-child::after{content:"";display:inline-block;width:10px;height:10px;margin-left:10px;border-radius:50%;background:var(--amber);vertical-align:2px}
.menu-bar{position:sticky;bottom:0;margin-top:auto;padding:28px 0 calc(32px + env(safe-area-inset-bottom));background:var(--blue-hover)}
.site-menu .menu-bar a{width:100%;min-height:56px;padding:0 22px 0 28px;border-radius:12px}
/* Footer (boards Footer, DeskFooter, TabFooter, PhoneFooter): logo and quote button, three link groups (two columns at
   520 px and below, where the button hides), then the copyright above a hairline. */
.footer{display:flex;flex-direction:column;gap:32px;padding-block:48px 32px;border-top:1px solid var(--border)}
.footer-top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.footer .brand img{height:40px}
.footer-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 32px}
.footer-links div{display:flex;flex-direction:column;gap:2px}
.footer-label{margin:0 0 4px;font:600 14px/1.4 var(--font-body);letter-spacing:0;color:var(--muted)}
.footer-links a{display:flex;align-items:center;min-height:44px;color:var(--ink);text-decoration:none;text-wrap:pretty}
.footer-links a:hover{color:var(--blue-hover);text-decoration:underline}
.footer-small{margin:0;padding-top:20px;border-top:1px solid var(--border);font-size:14px;color:var(--muted)}
@media(max-width:520px){.footer-links{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}.footer-top .sb-btn{display:none}}
/* === /M1 === */
/* === M11: units page ===
   Boards DeskUnits, TabUnits, PhoneUnits and CalcStates (canvas C). .gen holds the page body, so it repeats the
   spacing that .pub-body gives its direct children. The answer, calculator, table and band use the shared M2 classes. */
.gen>*{margin:0}
.gen>*+*{margin-top:14px}
.gen>h2,.gen>[data-controls]>h2{margin:40px 0 0;font:650 26px/1.2 var(--font-display);letter-spacing:-.02em;text-wrap:balance}
.gen>.article-cta{margin-top:48px}
.gen-months{margin:0}
.eg-table.gen-months :is(th,td):first-child+:is(th,td):last-child{text-align:left}
.gen-months caption{padding:12px 0 8px;font:600 15px/1.4 var(--font-body);text-align:left;color:var(--ink)}
.gen-bar{display:block;height:6px;margin-top:6px;border-radius:3px;background:var(--blue)}
.gen p:not(.pub-source) a{padding-block:12px}
/* On a phone the 37-city table scrolls inside its own frame: headings stay on one line, the city stays in view and an
   edge shadow shows that more columns wait on the right. */
@media(max-width:520px){
.gen [data-cities]{background:linear-gradient(to right,var(--cream),var(--cream)) 0 0/24px 100% no-repeat local,
  linear-gradient(to left,var(--cream),var(--cream)) 100% 0/24px 100% no-repeat local,
  radial-gradient(farthest-side at 0 50%,rgba(16,40,80,.22),transparent) 0 0/12px 100% no-repeat scroll,
  radial-gradient(farthest-side at 100% 50%,rgba(16,40,80,.22),transparent) 100% 0/12px 100% no-repeat scroll}
.gen [data-cities] thead th{white-space:nowrap}
.gen [data-cities] th:first-child{position:sticky;left:0;z-index:1;background:var(--cream)}}
/* === /M11 === */

/* Home page. Sections own their padding (equal above and below); gutters and widths follow the header. */
body.front-page{--gutter:clamp(16px,4vw,40px);background:linear-gradient(180deg,rgba(251,253,255,0) 55%,#fbfdff 100%) top/100% 960px no-repeat,radial-gradient(70% 90% at 92% 0,#ffe7a5 0%,rgba(255,231,165,0) 62%) top/100% 960px no-repeat,radial-gradient(50% 60% at 6% 55%,#d3e4fb 0%,rgba(211,228,251,0) 100%) top/100% 960px no-repeat,var(--cream)}
body.front-page[data-focus]{background:var(--cream)}
.front-page .wrap{width:min(1200px,calc(100% - 2*var(--gutter)))}
.front-page .header{border-bottom-color:transparent}
.front-page[data-focus] .header{border-bottom-color:var(--border)}
.sec{width:min(1200px,calc(100% - 2*var(--gutter)));margin-inline:auto;padding-block:clamp(32px,4.5vw,56px)}
.sec h2{margin:0;font:600 clamp(30px,3.4vw,44px)/1.1 var(--font-display);letter-spacing:-.035em;max-width:16ch;text-wrap:balance}
.split{display:grid;grid-template-columns:minmax(0,1fr);gap:48px}
.split>*{min-width:0}
@media(min-width:900px){
.split-goals{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px}
.split-stages{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:72px;align-items:start}
.bill-split{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:88px;align-items:center}
.bill-split>figure{order:-1}
.split-more{grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:88px;align-items:start}}

/* Hero: the headline rolls one word; the photos cross-fade. Both are driven by web/home-front.js. */
.front-hero{padding-block:clamp(32px,5vw,64px) clamp(24px,4.5vw,56px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:48px}
.hero-copy{min-width:0}
.front-hero h1{margin:0 0 24px;font:650 clamp(40px,6vw,72px)/1.05 var(--font-display);letter-spacing:-.045em;max-width:12ch;text-wrap:balance}
.roll{display:block;position:relative;height:1.2em;overflow:hidden}
.rw{position:absolute;left:0;top:0;height:1.2em;line-height:1.2;white-space:nowrap;background:linear-gradient(90deg,var(--blue),var(--teal));-webkit-background-clip:text;background-clip:text;color:transparent;opacity:0;transform:translateY(70%);transition:transform .4s cubic-bezier(.65,0,.25,1),opacity .4s}
.rw.is-on{opacity:1;transform:none}
.rw.is-out{transform:translateY(-70%)}
.hero-lead{margin:0 0 36px;max-width:34ch;font-size:19px;line-height:1.55;color:var(--muted);text-wrap:pretty}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px}
.hero-project{padding-left:0}
.hero-project .sb-label{white-space:nowrap}
@media(min-width:1024px){.hero-project{margin-right:100%}}
.hero-visual{min-width:0;height:auto;padding:0 8px 8px 0}
.sunframe{position:relative;aspect-ratio:5/4;min-width:0;background:var(--sunlight);border-radius:12px 40px 12px 12px;box-shadow:8px 8px 0 var(--sunlight);overflow:hidden}
.imgl{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease-in-out}
.imgl.is-on{opacity:1}
@media(min-width:621px){.sunframe{aspect-ratio:16/10;border-radius:12px 64px 12px 12px}}
@media(min-width:900px){.hero-grid{grid-template-columns:calc(8*clamp(40px,6vw,72px)) minmax(0,1fr);gap:56px;align-items:center}
.front-hero h1{max-width:none;white-space:nowrap}
.sunframe{aspect-ratio:5/4}}

/* === M6: goals ===
   The heading is its own row above both columns. From 900 px the columns are the same height and the panel centres its content. */
#goals>h2{margin-bottom:32px}
.goal-switch{max-width:520px;margin:0 0 28px}
.aud-title{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);margin:0}
.goal-list{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--border)}
.goal-item{border-top:1px solid var(--border)}
.goal{display:block;width:100%;min-height:44px;padding:22px 0;border:0;background:none;color:var(--ink);font-family:var(--font-body);text-align:left;text-decoration:none;cursor:pointer}
.goal:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:4px}
.gt{display:flex;align-items:center;justify-content:space-between;gap:16px;font:600 clamp(22px,2.2vw,26px)/1.25 var(--font-display);letter-spacing:-.02em;color:var(--muted-cool)}
.gt>span:first-child{min-width:0}
.goal:hover .gt,.goal.is-on .gt{color:var(--ink)}
.gm{flex:none;font:600 22px/1 var(--font-body);color:var(--teal);opacity:0}
.goal.is-on .gm{opacity:1}
.goal-panel{min-width:0;padding:28px clamp(20px,3vw,32px);border-radius:16px;background:linear-gradient(145deg,#1c4d9f 0%,#285fc3 52%,#16787d 100%);color:#fff}
@media(min-width:900px){.split-goals{align-items:stretch}.split-goals .goal-panel{align-self:stretch;display:flex;flex-direction:column;justify-content:center}}
@media(max-width:360px){.goal-panel{padding-inline:16px}}
/* === /M6 === */

/* === M7: goal question ===
   The panel asks the chosen goal's first question: a field or a stepper over a white call-to-action. Under 640 px the
   button is full width and the units label hides. */
.gp-calc{margin:0}
.gp-l{display:block;margin:0 0 12px;font:600 16px/1.3 var(--font-body);color:#fff}
.gp-row{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.gp-f{flex:2 1 340px;min-width:0}
.gp-row .sb-btn{flex:1 1 auto;white-space:nowrap}
.gp-in{display:flex;align-items:center;height:56px;padding:0 8px 0 18px;border-radius:14px;background:#fff;box-shadow:0 10px 28px rgba(6,24,66,.28);color:var(--ink)}
.gp-in:focus-within{outline:3px solid var(--sunlight);outline-offset:2px}
.gp-in:has([aria-invalid=true]){outline:3px solid var(--amber-border);outline-offset:2px}
.gp-in input{flex:1;min-width:0;width:100%;height:52px;padding:0;border:0;outline:0;background:transparent;font:500 18px var(--font-body);color:var(--ink)}
.gp-in input::placeholder{color:var(--muted)}
.gp-in .u{margin:0 10px 0 8px;font-size:15px;color:var(--muted);white-space:nowrap}
.gp-selw,.gp-time{position:relative;display:flex;align-items:center}
.gp-selw{flex:none;height:34px;border-left:1px solid var(--card-edge)}
.gp-time{flex:1;min-width:0}
.gp-selw::after,.gp-time::after{content:"";position:absolute;right:14px;top:50%;width:7px;height:7px;border-right:2px solid var(--blue-hover);border-bottom:2px solid var(--blue-hover);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.gp-sel,.gp-time select{-webkit-appearance:none;appearance:none;height:44px;border:0;border-radius:10px;background:transparent;font:600 15px var(--font-body);color:var(--blue-hover);cursor:pointer}
.gp-sel{margin:-5px 0;padding:0 36px 0 14px}
.gp-time select{width:100%;padding:0 34px 0 0;font:500 18px var(--font-body);color:var(--ink)}
.gp-sel:focus-visible,.gp-time select:focus-visible{outline:3px solid var(--blue-hover);outline-offset:-3px}
.gp-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;flex:2 1 300px;min-width:0}
.gp-stepper{gap:4px;padding:8px 14px 0;border-radius:14px;background:#fff;box-shadow:0 10px 28px rgba(6,24,66,.28);color:var(--ink)}
.gp-stepper .stepper-read{font-size:28px;white-space:nowrap}
.gp-stepper .stepper-btn[aria-disabled=true]{opacity:.45;cursor:default}
.gp-stepper .stepper-btn[aria-disabled=true]:hover{border-color:var(--control-border);background:#fff}
.gp-stepper .stepper-rail{cursor:default}
.goal-panel .field-error{margin-top:12px;padding:10px 12px;border:1px solid var(--amber-border);border-radius:10px;background:var(--amber-pale)}
@media(max-width:640px){.gp-in .u{display:none}.gp-row .sb-btn{width:100%}.gp-f,.gp-two{flex-basis:100%}}
@media(max-width:360px){.gp-stepper .stepper-read{font-size:24px}.gp-stepper{padding-inline:10px}.gp-in{padding-left:14px}.gp-in input::placeholder{font-size:16px}.gp-sel{padding:0 28px 0 8px;font-size:14px}.gp-selw::after{right:10px}}
/* === /M7 === */
/* === M13: farm and business ===
   Boards Farm and Business (canvas C, desktop, tablet and phone). The title, one line and the two actions sit beside the
   audience photo at 900 px and wider and over it below that; the guides and the quote request follow in two columns. */
.sx-page{padding-block:20px 56px}
.sx-hero{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:48px;align-items:center;padding:36px 0 24px}
.sx-txt{display:flex;flex-direction:column;gap:20px;min-width:0}
.sx-hero h1{margin:0;font:650 clamp(34px,5vw,56px)/1.08 var(--font-display);letter-spacing:-.03em;text-wrap:balance}
.sx-lead{margin:0;max-width:34ch;font:400 20px/1.5 var(--font-body);color:var(--muted-cool);text-wrap:pretty}
.sx-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.sx-photo{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:5/4;background:var(--pale)}
.sx-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sx-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 32px;padding:24px 0}
.sx-two section{display:flex;flex-direction:column;gap:12px;min-width:0}
.sx-two h2{margin:0;font:650 22px/1.2 var(--font-display);letter-spacing:-.02em}
.sx-two .related-guides{margin:0}
.sx-quote{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding-top:16px;border-top:1px solid var(--border)}
.sx-quote p{margin:0;font:400 16px/1.5 var(--font-body);text-wrap:pretty}
@media(max-width:899px){.sx-hero,.sx-two{grid-template-columns:minmax(0,1fr)}.sx-hero{gap:24px}}
@media(max-width:540px){.sx-acts .sb-btn{width:100%;justify-content:center}}
/* === /M13 === */
/* === M14: about, privacy, 404 ===
   Boards About, Privacy, PrivClear and NotFound (canvas C). About and Privacy use the guide shell (.pub-*). "In short" is
   an ink rule and a hairline, not a panel. The clear control shows its result with a dot, teal when done and amber when
   it failed. The 404 has the faded numeral, one button and a link list. */
.pub-head-solo{padding-top:16px}
.priv-short{padding:20px 0;border-top:2px solid var(--ink);border-bottom:1px solid var(--border)}
.priv-short h2{margin:0 0 14px;font:600 14px/1.4 var(--font-body);letter-spacing:0;color:var(--muted)}
.priv-short ul.pub-checks{display:flex;flex-direction:column;gap:10px}
.priv-short li{padding-left:30px;font-size:16px;line-height:1.5}
.priv-short li+li{margin-top:0}
.priv-short li::before{top:2px;width:20px;height:20px;font-size:11px}
.priv-table th,.priv-table td{vertical-align:top;white-space:normal}
.priv-table :is(td,th):first-child+:is(td,th):last-child{text-align:left;white-space:normal}
@media(min-width:600px){.priv-table :is(th,td):first-child{width:38%}}
.priv-clear{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding-top:16px;border-top:1px solid var(--border)}
.priv-clear p{margin:0;font:400 16px/1.5 var(--font-body)}
.priv-clear [data-clear-confirm]{display:flex;flex-direction:column;gap:12px}
.priv-acts{display:flex;flex-wrap:wrap;gap:10px 12px}
.priv-clear .sb-btn{min-width:0;white-space:normal;text-align:center}
.priv-status:empty{position:absolute}
.priv-status[data-state]{position:relative;padding-left:20px}
.priv-status[data-state]::before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;border-radius:50%;background:var(--teal)}
.priv-status[data-state=failed]::before{background:var(--amber-border)}
@media(max-width:899px){.priv-clear{align-items:stretch}.priv-acts{flex-direction:column}.priv-clear .sb-btn{justify-content:center}}
@media(max-width:520px){.priv-clear .sb-btn{padding-inline:12px;font-size:15px}}
.nf{display:flex;flex-direction:column;align-items:flex-start;gap:24px;padding:56px 0 24px}
.nf-code{font:650 clamp(72px,14vw,140px)/1 var(--font-display);letter-spacing:-.05em;color:var(--blue-hover);opacity:.16}
.nf h1{margin:-28px 0 0;font:650 clamp(32px,4.4vw,48px)/1.08 var(--font-display);letter-spacing:-.03em;text-wrap:balance}
.nf .related-guides{width:min(100%,420px);margin:0}
/* === /M14 === */
/* === M15: contact ===
   Boards Contact, ContactSent, ContactError and ContactFail (canvas C). The home photo sits left of a flat form at 900px
   and wider and is a thin banner above it below that. The topic chips are pills, ink when chosen. Field errors reuse
   .field-error; the failure notice is a hairline with an amber dot, like the clear-data status. */
.ct{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:stretch;padding:24px 0 8px}
.ct-photo{position:relative;min-width:0;min-height:260px;border-radius:20px;overflow:hidden;background:var(--pale)}
.ct-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ct-form{display:flex;flex-direction:column;gap:22px;min-width:0}
.ct-form h2{margin:0;font:650 26px/1.2 var(--font-display);letter-spacing:-.02em}
.ct-alert{position:relative;padding:14px 0 0 20px;border-top:1px solid var(--border);font:500 16px/1.5 var(--font-body);text-wrap:pretty}
.ct-alert::before{content:"";position:absolute;left:0;top:22px;width:8px;height:8px;border-radius:50%;background:var(--amber-border)}
.ct-topic{min-width:0;margin:0;padding:0;border:0}
.ct-topic legend{margin-bottom:8px;padding:0;font:600 16px var(--font-body)}
.ct-chips{display:flex;flex-wrap:wrap;gap:10px}
.ct-chip{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--control-border-soft);font:600 15px var(--font-body);cursor:pointer}
.ct-chip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.ct-chip:has(input:checked){background:var(--ink);box-shadow:none;color:#fff}
.ct-chip:has(input:focus-visible){outline:3px solid var(--blue);outline-offset:3px}
.ct-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px 16px}
.ct-f{display:flex;flex-direction:column;gap:8px;min-width:0}
.ct-f label{font:600 16px var(--font-body)}
.ct-opt{font-weight:400;color:var(--muted)}
.ct-f :is(input,textarea){display:block;width:100%;min-width:0;min-height:52px;padding:0 16px;border:1.5px solid var(--control-border);border-radius:12px;background:#fff;color:var(--ink);font:500 17px/1.4 var(--font-body)}
.ct-f textarea{min-height:132px;padding:14px 16px;resize:vertical}
.ct-f ::placeholder{color:var(--muted);font-weight:400;opacity:1}
.ct-f :is(input,textarea):focus{border-color:var(--blue)}
.ct-consent{display:flex;align-items:flex-start;gap:12px;min-height:44px;font:400 14px/1.5 var(--font-body);color:var(--muted-cool);text-wrap:balance}
.ct-consent input{flex:none;width:24px;height:24px;margin:0;accent-color:var(--blue)}
.ct-form .sb-btn{align-self:flex-start}
.ct-done{display:flex;flex-direction:column;align-items:flex-start;gap:16px;min-width:0;padding:8px 0}
.ct-tick{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--teal);color:#fff;font:700 26px/1 var(--font-body)}
.ct-done h2{margin:0;font:650 28px/1.2 var(--font-display);letter-spacing:-.02em}
.ct-done p{margin:0;font:400 17px/1.5 var(--font-body);text-wrap:pretty}
@media(max-width:899px){.ct{grid-template-columns:minmax(0,1fr);gap:24px}.ct-photo{min-height:0;aspect-ratio:16/7}.ct-row{grid-template-columns:minmax(0,1fr)}}
@media(max-width:540px){.ct-form .sb-btn{align-self:stretch}}
/* === /M15 === */
/* === M21: quote form ===
   New parts of the quote form (the other .lead-* rules are edited in place further down): the two columns, the field
   boxes that hold a message under each field, and the tick on Enquiry received. */
.lead-grid{display:grid;gap:32px}
.lead-col{display:grid;gap:32px;min-width:0;align-content:start}
.lead-field{display:flex;flex-direction:column;min-width:0}
.lead-field:nth-child(-n+2){grid-column:1/-1}
.lead-field label{display:flex;flex:1;flex-direction:column;justify-content:space-between}
.lead-tick{position:absolute;top:-32px;left:20px;display:grid;place-items:center;width:64px;height:64px;border:6px solid #fff;border-radius:50%;background:var(--teal);color:#fff;font:700 28px/1 var(--font-body)}
@media(min-width:621px){.lead-grid{padding-bottom:32px;border-bottom:1px solid var(--card-edge)}.lead-tick{position:static;border:0}}
@media(min-width:801px){.lead-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px}}
/* === /M21 === */

/* === FX2c: public ===
   The quote page sits in the shared public shell: the title and the referral line, then the form. After sending, the
   "Enquiry received" title replaces that header. */
.quote-page{max-width:1040px}
.quote-page .pub-head h1{font-size:30px;line-height:1.2;letter-spacing:-.02em}
.quote-page:has(#lead-done:not([hidden])) .pub-head{display:none}
/* The menu sheet's button keeps its label on one line at 320 px. */
.menu-bar .sb-label{white-space:nowrap}
/* === /FX2c === */

/* How it works: a vertical timeline. */
.tl{list-style:none;margin:0;padding:0}
.tl li{position:relative;padding:0 0 40px 44px}
.tl li:before{content:"";position:absolute;left:0;top:8px;width:12px;height:12px;border-radius:50%;border:2px solid var(--teal);background:var(--cream)}
.tl li:first-child:before{background:linear-gradient(135deg,var(--blue),var(--teal))}
.tl li:after{content:"";position:absolute;left:7px;top:26px;bottom:-4px;width:1px;background:var(--control-border-soft)}
.tl li:last-child{padding-bottom:0}
.tl li:last-child:after{display:none}
.tl h3{margin:0 0 6px;font:600 26px/1.25 var(--font-display);letter-spacing:-.02em}
.tl p{margin:0;max-width:40ch;font-size:17px;line-height:1.55;color:var(--muted);text-wrap:pretty}

/* The sample bill: fictional readings on the sunlight panel; the text comes before it on phones. */
.bill-text h2{margin-bottom:20px}
.bill-text p{margin:0;max-width:34ch;font-size:19px;line-height:1.55;text-wrap:pretty}
.bill-split figure{margin:0}
.bill-panel{padding:clamp(20px,5vw,56px);border-radius:16px;background:linear-gradient(145deg,#fff3c9 0%,#ffe7a5 55%,#ffd36e 100%)}
.bill-card{max-width:420px;margin:0 auto;padding:clamp(18px,3vw,32px);border:1px solid var(--border-card);border-radius:6px;background:#fff;font-size:13px;line-height:1.4;color:var(--muted-cool)}
.bill-row{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--border)}
.bill-row+.bill-row{border-bottom:0}
.bill-row b{font:inherit;font-variant-numeric:tabular-nums}
.bill-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--border)}
.bill-head strong{font:650 16px/1.2 var(--font-display);color:var(--ink);letter-spacing:-.01em}
.bill-units{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:14px 16px;margin:0 -12px;border:2px solid var(--teal);border-radius:8px;background:var(--teal-pale)}
.bill-units span{font-size:15px;font-weight:600;color:var(--ink)}
.bill-units b{font:650 28px/1 var(--font-display);color:var(--ink);font-variant-numeric:tabular-nums}
.bill-note{margin:10px 0 0;font-size:13px;font-weight:600;color:var(--teal)}
.bill-split figcaption{margin-top:14px;font-size:14px;color:var(--muted)}

/* Guides and other needs. */
.guides h2{margin-bottom:28px}
.guide-rows{border-top:1px solid var(--border)}
.guide{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;min-height:72px;padding:20px 0;border-bottom:1px solid var(--border);text-decoration:none}
.guide-title{color:var(--ink);font:600 clamp(19px,1.9vw,22px)/1.3 var(--font-display);letter-spacing:-.015em;text-wrap:balance}
.guide-arrow{color:var(--muted-quiet);font-size:22px}
.guide:hover .guide-title{color:var(--blue)}
.guide:hover .guide-arrow{color:var(--teal)}
.guides-all{margin-top:16px}
.more h2{margin-bottom:16px;font-size:24px;line-height:1.25;letter-spacing:-.02em}
.more-link{display:block;padding:14px 0;color:var(--blue);font-size:18px;font-weight:650;text-decoration:none}
.more-link:hover{text-decoration:underline;text-underline-offset:4px}

/* Closing band: full width, blue to teal; the page meets the footer's rule below it. */
.band{background:linear-gradient(120deg,#1c4d9f 0%,#285fc3 45%,#16787d 100%);color:#fff}
.band-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px 48px;width:min(1200px,calc(100% - 2*var(--gutter)));margin-inline:auto;padding-block:clamp(48px,7vw,88px)}
.band h2{margin:0;max-width:12ch;font:600 clamp(34px,4.4vw,56px)/1.05 var(--font-display);letter-spacing:-.04em;text-wrap:balance}

/* === M5: promise === */
/* Solarbay Promise section (owner placement 9 Nov 2026; layout 10 Nov 2026): a light band between "Guides and other needs"
   and the blue closing band. The inner .sec gives the page's own gutter, width and section padding; its h2 takes the
   page's heading style. The emblem sits on a soft sun glow; the four points are clean rows in one white panel.
   The shield fills 72% of its square (x 9 to 55 of 64), so the box is trimmed to the shield: its visible edge meets the
   page's left edge and the gaps are the gaps drawn. */
.promise{overflow:hidden;background:var(--pale)}
.promise-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:center}
.promise-head{display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.promise-mark{--m:144px;position:relative;display:block;flex:none;width:calc(var(--m)*.72);height:var(--m)}
.promise-mark:before{content:"";position:absolute;left:50%;top:50%;width:calc(var(--m)*2.2);height:calc(var(--m)*2.2);transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(255,231,165,.85) 0%,rgba(255,231,165,0) 66%);pointer-events:none}
.promise-mark img{position:absolute;left:calc(var(--m)*-.14);top:0;display:block;width:var(--m);height:var(--m)}
.promise-list{margin:0;padding:4px 32px;list-style:none;background:#fff;border:1px solid var(--card-edge);border-radius:16px;box-shadow:0 1px 2px rgba(10,40,90,.05),0 18px 36px -22px rgba(10,40,90,.3)}
.promise-list li{position:relative;min-width:0;padding:18px 0 18px 44px;border-top:1px solid var(--border)}
.promise-list li:first-child{border-top:0}
.promise-tick{position:absolute;left:0;top:17px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--teal);color:#fff;font:700 13px/1 var(--font-body)}
.promise-list h3{margin:0;font:650 20px/1.3 var(--font-display);letter-spacing:-.015em;text-wrap:balance}
.promise-list p{margin:4px 0 0;font:400 16px/1.5 var(--font-body);color:var(--muted);text-wrap:balance}
.promise-list p span{display:block}
@media(max-width:899px){.promise-in{grid-template-columns:minmax(0,1fr);gap:32px}.promise-head{flex-direction:row;align-items:center;gap:24px}.promise-mark{--m:104px}}
@media(max-width:620px){.promise-mark{--m:88px}.promise-head{gap:20px}.promise-list{padding:2px 20px}.promise-list li{padding:16px 0 16px 40px}.promise-tick{top:15px}}
@media(max-width:349px){.promise-head{flex-direction:column;align-items:flex-start;gap:16px}}
/* Hero link to the section: emblem and words are one chip (one outline, one hover and focus state, one tap area).
   The shield fills 72% of its square, so the image is trimmed with a negative right margin. */
.promise-cue{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px 0 6px;border-radius:999px;background:rgba(255,255,255,.75);box-shadow:inset 0 0 0 1px #cbd9ee;color:var(--blue-hover);font:600 15px/1 var(--font-body);text-decoration:none;white-space:nowrap;transition:background-color .15s,box-shadow .15s}
.promise-cue:hover{background:#fff;box-shadow:inset 0 0 0 1px var(--blue);color:var(--blue-hover);text-decoration:none}
.promise-cue:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.promise-cue img{display:block;flex:none;width:28px;height:28px;margin-right:-3px}
/* === /M5 === */
/* === M12: state page === */
/* Boards DeskState, TabState, PhoneState and CalcStates state 3 (canvas C). A state is its heading and three .pub-part
   rows (M2). When its figures lapse the Worker swaps them for one line between two hairlines with a small amber dot,
   never a coloured edge; the line is centred on the dot's row like any status mark. Official portals are a ruled list. */
.fact-expired{display:flex;align-items:flex-start;gap:12px;padding:16px 0;border-block:1px solid var(--border);font:400 17px/1.6 var(--font-body);color:var(--ink)}
.fact-expired::before{content:"";flex:none;width:8px;height:8px;margin-top:calc((1.6em - 8px)/2);border-radius:50%;background:var(--amber-border)}
.pub-body .pub-part li+li{margin-top:0}
.pub-body .state-next a{display:flex;align-items:center;min-height:44px}
.pub-body .state-links{padding:0;list-style:none;border-top:2px solid var(--ink)}
.pub-body .state-links li{margin:0;border-top:1px solid var(--border)}
.pub-body .state-links li:first-child{border-top:0}
.pub-body .state-links a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:60px;margin-inline:-14px;padding-inline:14px;color:var(--ink);font:500 17px/1.35 var(--font-body);text-decoration:none;text-wrap:balance}
.pub-body .state-links a:hover{background:var(--pale);color:var(--ink)}
.pub-body .state-links a span{flex:none;color:var(--blue-hover)}
/* === /M12 === */

/* Request a quote: one screen (owner design, 9 Nov 2026; tablet and desktop boards, M21). The tiles, the quick-pick and
   the battery switch follow the chosen tile with :has(), so they work before the script loads. */
.lead-disclosure{margin:12px 0 0;font-size:14px;line-height:1.5;color:var(--muted)}
.lead-form{margin:0;padding:0;border:0;background:none}
.lead-form>*+*{margin-top:32px}
@media(min-width:621px){.lead-form{padding:32px;border:1px solid var(--card-edge);border-radius:18px;background:#fff;box-shadow:0 1px 3px rgba(35,56,79,.07)}}
@media(min-width:801px){.lead-form{padding:40px}}
.lead-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}
@media(max-width:389px){.lead-fields{grid-template-columns:minmax(0,1fr)}}
.lead-fields label,.lead-tiles legend,.lead-quick legend{font-size:16px;font-weight:600;line-height:1.3;text-wrap:balance}
.lead-fields input,.lead-fields select{display:block;width:100%;min-width:0;min-height:56px;margin-top:10px;padding:10px 14px;border:1px solid var(--control-border);border-radius:12px;background:#fff;color:var(--ink);font:500 17px/1.4 var(--font-body)}
.lead-fields input:focus,.lead-fields select:focus{border-color:var(--blue)}
.lead-form [aria-invalid=true],.ct-form [aria-invalid=true]{border:2px solid var(--amber-border);background:var(--amber-pale)}
.lead-fields .field-error{margin-top:8px;text-wrap:balance}
.lead-tiles,.lead-quick{min-width:0;margin-inline:0;padding:0;border:0}
.lead-tiles legend,.lead-quick legend{padding:0;margin-bottom:10px}
.lead-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.photo-tile{position:relative;display:block;height:100px;overflow:hidden;border:2px solid transparent;border-radius:12px;background:var(--pale);cursor:pointer}
.photo-tile input{position:absolute;inset:0;z-index:2;margin:0;opacity:0;cursor:pointer}
.photo-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.photo-tile::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#23384f00 25%,#23384fe6 100%)}
.photo-tile span{position:absolute;left:10px;right:8px;bottom:8px;color:#fff;font:600 15px/1.2 var(--font-body)}
.photo-tile::after{content:"✓";position:absolute;top:6px;right:6px;display:none;place-items:center;width:22px;height:22px;border-radius:50%;background:#fff;color:var(--blue);font-size:13px;font-weight:700;line-height:1}
.photo-tile:has(input:checked){border-color:var(--blue)}
.photo-tile:has(input:checked)::after{display:grid}
.photo-tile:has(input:focus-visible){outline:3px solid var(--blue);outline-offset:3px}
@media(min-width:621px){.photo-tile{height:132px}.photo-tile span{font-size:16px}}
.lead-quick{display:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.lead-form:has(#lead-project-home:checked) .lead-quick[data-for=home],.lead-form:has(#lead-project-farm:checked) .lead-quick[data-for=farm],.lead-form:has(#lead-project-industry:checked) .lead-quick[data-for=industry]{display:grid}
.lead-quick legend{grid-column:1/-1}
.lead-chip{position:relative;display:flex;align-items:center;justify-content:center;gap:6px;min-height:48px;padding:0 8px;white-space:nowrap;border:1px solid var(--control-border);border-radius:12px;background:#fff;font-size:15px;line-height:1.3;cursor:pointer}
.lead-chip input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.lead-chip:has(input:checked)::before{content:"✓";font-weight:700}
.lead-chip:has(input:checked){border-color:var(--blue);background:var(--tint);color:var(--blue);font-weight:600}
.lead-chip:has(input:focus-visible){outline:3px solid var(--blue);outline-offset:3px}
.lead-switch{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:8px 16px;border-radius:12px;background:var(--tint);font-size:16px;font-weight:600;cursor:pointer}
.lead-switch input{order:2;position:relative;flex:none;width:48px;height:28px;margin:0;border-radius:14px;background:var(--control-border);cursor:pointer;appearance:none;transition:background-color .15s}
.lead-switch input::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:left .15s}
.lead-switch input:checked{background:var(--blue)}
.lead-switch input:checked::after{left:23px}
.lead-switch:has(input:focus-visible){outline:3px solid var(--blue);outline-offset:3px}
.lead-form:has(#lead-project-farm:checked) .lead-switch{display:none}
.lead-plan{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 16px;min-height:44px;font-size:15px;color:var(--muted-cool)}
.lead-plan pre{flex-basis:100%;max-height:200px;margin:0 0 12px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;font:14px/1.5 var(--font-body);color:var(--ink)}
.consent{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:12px;background:var(--tint);font-size:14px;line-height:1.5;color:var(--muted)}
.consent span{text-wrap:balance}
.consent input{flex:none;width:22px;height:22px;margin:0;accent-color:var(--blue)}
.lead-bar{position:sticky;bottom:0;z-index:3;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-inline:-20px;padding:16px 20px calc(16px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--card-edge)}
.lead-bar .sb-btn{flex:1 1 auto;margin-left:auto}
.lead-status{order:-1;flex:1 0 100%;margin:0 0 12px;padding:14px 16px;border:1px solid var(--amber-border);border-radius:10px;background:var(--amber-pale);color:var(--amber-ink);font-size:15px;line-height:1.5}
.lead-status:empty{display:none}
@media(max-width:374px){.lead-bar{margin-inline:-16px;padding-inline:16px}}
@media(min-width:621px){.lead-bar{position:static;margin-inline:0;padding:0;border:0;background:none}.lead-bar .sb-btn{flex:none;min-width:320px}}
.lead-done{display:grid;gap:16px}
.lead-photo{position:relative;height:220px;overflow:hidden;border-radius:18px;background:var(--pale)}
.lead-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lead-card,.lead-next-card{border:1px solid var(--card-edge);border-radius:18px;background:#fff;box-shadow:0 1px 3px rgba(35,56,79,.07)}
.lead-card{position:relative;display:flex;flex-direction:column;gap:12px;margin:-48px 12px 0;padding:48px 20px 20px}
.lead-card h1{margin:0;font:650 30px/1.15 var(--font-display);letter-spacing:-.03em;text-wrap:balance}
.lead-card p{margin:0;font:400 17px/1.5 var(--font-body);color:var(--muted-cool);text-wrap:pretty}
.lead-card .sb-btn{width:100%;margin-top:8px;white-space:nowrap}
.lead-card .sb-btn .sb-label{white-space:nowrap;text-wrap:nowrap}
.lead-next-card{padding:24px 20px 8px}
.lead-next-card h2{margin:0 0 4px;font:650 22px/1.25 var(--font-display);letter-spacing:-.02em}
.lead-next-card ul{margin:0;padding:0;list-style:none}
.lead-next-card li+li{border-top:1px solid var(--card-edge)}
.lead-next-card a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;font:600 17px/1.3 var(--font-body);color:var(--ink);text-decoration:none;text-wrap:balance}
.lead-next-card a::after{content:"→";flex:none;color:var(--teal);font-size:20px}
@media(min-width:621px){.lead-done{gap:0;overflow:hidden;border:1px solid var(--card-edge);border-radius:18px;background:#fff;box-shadow:0 1px 3px rgba(35,56,79,.07)}.lead-photo{height:260px;border-radius:0}.lead-card,.lead-next-card{margin:0;border:0;border-radius:0;background:none;box-shadow:none}.lead-card{padding:32px 32px 0}.lead-card .sb-btn{width:auto;align-self:flex-start}.lead-next-card{margin:28px 32px 32px;padding:20px 0 0;border-top:1px solid var(--card-edge)}}
@media(min-width:900px){.lead-done{grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-rows:auto auto auto 1fr}.lead-photo{grid-column:1;grid-row:1/span 4;height:auto;min-height:560px}.lead-card,.lead-next-card{grid-column:2}.lead-card{padding:48px 48px 0}.lead-next-card{margin:28px 48px 48px}}
@media(max-width:389px){.lead-quick{grid-template-columns:1fr}.lead-card{margin-inline:0;padding-inline:16px}.lead-card .sb-btn{gap:8px;padding:0 14px 0 18px}}
.lead-done .lead-tick{width:76px;height:76px;font-size:34px}
@media(max-width:620px){.quote-page:has(#lead-done:not([hidden])){width:calc(100% - 32px)}.lead-done .lead-card{margin-inline:0}.lead-done .lead-tick{top:-38px}}
@media(min-width:900px){.quote-page:has(#lead-done:not([hidden])){max-width:960px}}

/* Installation and Output: every section is its own white card on the cream page, with one type scale
   (owner design, 9 Nov 2026). CSS only: the markup and its ids are unchanged. */
.guided-shell:has(>.install-tool,>.project-tool,>.after-tool,>.est-tool){padding:0;border:0;border-radius:0;background:none}
.out-title h3,.workspace-pane #workspace-stage h3{margin:0 0 16px;font:650 30px/1.2 var(--font-display);letter-spacing:-.02em;text-wrap:balance}
.after-tool h4{margin:0 0 12px;font:650 22px/1.25 var(--font-display);letter-spacing:-.02em}
.after-tool form>.tool-field-grid label,.after-tool .tool-field-grid label,.after-tool .bill-field label,.after-tool form>label,.after-tool fieldset>label{font-size:16px;font-weight:600;color:var(--ink)}
.after-tool :is(input:not([type=checkbox],[type=radio],[type=range]),select,textarea){font:500 17px/1.4 var(--font-body)}

/* Shared parts (web/ui/parts.js): the stepper and the tag; and the pump check's water source tiles and answer. */
.tag{display:inline-block;vertical-align:middle;padding:2px 8px;border-radius:999px;background:var(--tint);border:1px solid var(--card-edge);color:var(--muted-cool);font-size:12px;font-weight:600;line-height:1.4;white-space:nowrap}
.stepper{display:grid;gap:12px;min-width:0}
.stepper-label{font-size:16px;font-weight:600}
.stepper-main{display:flex;align-items:center;justify-content:space-between;gap:12px}
.stepper-read{flex:1;min-width:0;text-align:center;font:650 34px/1.1 var(--font-display);letter-spacing:-.02em}
.stepper-btn{flex:none;display:grid;place-items:center;width:48px;height:48px;padding:0;border:1.5px solid var(--control-border);border-radius:50%;background:#fff;color:var(--blue);font-size:26px;line-height:1;cursor:pointer}
.stepper-btn:hover:not(:disabled){border-color:var(--blue);background:var(--tint)}
.stepper-btn:disabled{opacity:.45;cursor:default}
.stepper-btn:focus-visible,.stepper-rail:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.stepper-rail{position:relative;height:44px;margin:0 16px;cursor:pointer}
.stepper-rail::before{content:"";position:absolute;left:0;right:0;top:10px;height:4px;border-radius:2px;background:var(--card-edge)}
.stepper-fill{position:absolute;left:0;top:10px;width:var(--pos);height:4px;border-radius:2px;background:var(--blue)}
.stepper-knob{position:absolute;top:4px;left:var(--pos);width:16px;height:16px;margin-left:-8px;border:2px solid #fff;border-radius:50%;background:var(--blue);box-shadow:0 0 0 1px var(--blue)}
.stepper-notch{position:absolute;top:8px;left:var(--p);width:2px;height:8px;margin-left:-1px;background:var(--control-border)}
.stepper-notch b{position:absolute;top:14px;left:50%;transform:translateX(-50%);font-size:13px;font-weight:500;color:var(--muted)}
.pump-motor{display:grid;gap:4px}
.pump-motor .sb-btn-quiet{justify-self:start}
.pump-motor.unsure .stepper{opacity:.5}
.pump-motor [aria-pressed=true] .sb-label{font-weight:700;text-decoration:underline;text-underline-offset:3px}
.choice-tiles{display:grid;gap:10px;min-width:0;margin:0 0 20px;padding:0;border:0}
.choice-tiles legend{padding:0;margin-bottom:10px;font-size:16px;font-weight:600}
.choice-tile{position:relative;display:flex;align-items:center;gap:8px;min-height:48px;padding:0 14px;border:1px solid var(--control-border);border-radius:12px;background:#fff;font-size:15px;line-height:1.3;cursor:pointer}
.choice-tile input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.choice-tile::after{content:"✓";margin-left:auto;visibility:hidden;font-weight:700}
.choice-tile:has(input:checked){border-color:var(--blue);background:var(--tint);color:var(--blue);font-weight:600}
.choice-tile:has(input:checked)::after{visibility:visible}
.choice-tile:has(input:focus-visible){outline:3px solid var(--blue);outline-offset:3px}
/* The status row (ui/parts.js) and the folded checklist items. */
/* The Plan screen: the Payback bars (ui/consumer/payback-bars.js) and each plan section as its own card. */
.answer-name .tag{margin-left:6px}
.payback{margin:24px 0 0}
.payback h4{margin:0 0 12px;font:650 22px/1.25 var(--font-display);letter-spacing:-.02em}
.pb{position:relative}
.pb:before{content:"";position:absolute;left:50%;top:0;bottom:24px;border-left:1px dashed var(--control-border-soft)}
.pb-row{position:relative;margin:0 0 12px}
.pb-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:6px}
.pb-head span{font-size:15px;font-weight:600;color:var(--ink)}
.pb-head strong{font:650 22px/1.2 var(--font-display);letter-spacing:-.02em;color:var(--ink);white-space:nowrap}
.pb-bar{position:relative;z-index:1;display:flex;height:38px;overflow:hidden;border-radius:8px;background:var(--tint)}
.pb-seg{display:flex;align-items:center;padding:0 10px;overflow:hidden;font-size:13px;font-weight:650;white-space:nowrap}
.pb-seg.pay{justify-content:center;padding:0 4px;background:var(--sunlight);color:var(--amber-ink)}
.pb-seg.save{border-radius:0 8px 8px 0;background:var(--teal-pale);box-shadow:inset 0 0 0 1px var(--teal-border);color:var(--teal-deep)}
.pb-seg.arrow{clip-path:polygon(0 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,0 100%)}
.pb-axis{display:grid;grid-template-columns:1fr auto 1fr;margin-top:0;font-size:13px;color:var(--muted)}
.pb-axis span:nth-child(2){text-align:center}
.pb-axis span:last-child{text-align:right}
.label-line{display:flex;align-items:center;gap:8px}
.strip{margin:16px 0}
.strip-row{margin:0 0 12px}
.strip-name{display:block;margin-bottom:4px;font-size:13px;color:var(--muted)}
.strip-track{position:relative;height:28px;border-radius:6px;background:var(--tint)}
.strip-bar{position:absolute;top:4px;bottom:4px;border-radius:4px}
.strip-bar.day{background:var(--sunlight)}
.strip-bar.work{background:var(--blue)}
.strip-bar.arrow{border-radius:4px 0 0 4px;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,0 100%)}
.strip-text{position:absolute;top:50%;margin:0 8px;transform:translateY(-50%);font-size:13px;color:var(--ink);white-space:nowrap}
.strip-axis{position:relative;height:24px;margin-top:6px;border-top:1px solid var(--card-edge)}
.strip-tick{position:absolute;top:6px;transform:translateX(-50%);font-size:13px;color:var(--muted);white-space:nowrap}
.strip-tick:first-child{transform:none}
.strip-tick:last-child{transform:translateX(-100%)}
.fb-tool .tool-field-grid label{font-size:16px;font-weight:600;color:var(--ink)}
.fb-tool .tool-field-grid :is(input,select){font:500 17px/1.4 var(--font-body)}

/* Reduced motion: the one place that stops transitions and animations and keeps scrolling instant. It stays last. */
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}.sb-btn:hover .sb-arrow,.sb-btn-quiet:hover .sb-arrow,.sb-btn:active{transform:none}}