/* ═══════════════════════════════════════════════════════════
   Shared "Request a free site assessment" popup flow.
   Self-contained: every rule is scoped under #flow so it can be
   dropped into any page without touching that page's own styles,
   and so that page's own classes (.btn, .field, .eyebrow, etc.)
   can never leak in or be overridden by this file.
   Pairs with /assets/site-assessment-flow.js.
   ═══════════════════════════════════════════════════════════ */
html.flow-open,html.flow-open body{overflow:hidden}

#flow{
  --surface:#FFFFFF;--text:#111412;--muted:#667085;--border:#DDE3E0;--border-soft:#E6EBE8;
  --green:#007A3D;--green-deep:#0E8046;--green-pale:#E9F7EF;
  --amber-pale:#FFF5D8;--red:#D84A3A;--red-pale:#FDECE9;
  --btn:#111412;--btn-text:#FFFFFF;--r-shell:16px;--r-ctl:10px;--r-panel:12px;
  color-scheme:light;
}
#flow,#flow *,#flow *::before,#flow *::after{box-sizing:border-box}
#flow{font-family:"Sora","Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
#flow h1,#flow h2,#flow h3,#flow p{margin:0}
#flow button{font:inherit;color:inherit}
#flow a{color:#1B6FE0;text-decoration:none}
#flow a:hover{text-decoration:underline}
#flow :focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:4px}
#flow svg{display:block}
#flow .ico{width:1em;height:1em;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none;flex:none}

#flow .back{display:inline-flex;align-items:center;gap:10px;background:none;border:0;padding:6px 8px;margin:-6px 0 14px -8px;font-size:14px;color:#3F4A54;cursor:pointer;border-radius:8px;align-self:flex-start}
#flow .back:hover{color:var(--text);background:#F4F6F5}
#flow .back .ico{width:19px;height:19px}
#flow .hint{color:var(--muted);font-size:12px;line-height:1.5}
#flow .hint + .hint{margin-top:6px}
#flow .err-text{color:var(--red);font-size:12px;display:flex;align-items:center;gap:7px;margin-top:9px}
#flow .err-text .ico{width:15px;height:15px}
#flow .eyebrow{font-size:11px;letter-spacing:.08em;color:var(--muted);text-transform:uppercase;font-weight:500}
#flow .field{min-width:0}
#flow .field--wide{grid-column:1 / -1}
#flow .label{display:block;font-size:14px;font-weight:600;margin-bottom:9px}
#flow .input{
  width:100%;min-width:0;height:56px;padding:0 16px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-ctl);
  font-size:15px;color:var(--text);
  transition:border-color 150ms ease-out,box-shadow 150ms ease-out;
}
#flow .input::placeholder{color:#98A2AD}
#flow .input:hover:not([disabled]){border-color:#CBD4D0}
#flow .input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(21,154,85,.13)}
#flow .input[disabled]{background:#F7F9F8;color:#98A2AD;cursor:not-allowed}
#flow .input[aria-invalid="true"]{border-color:var(--red)}
#flow .input[aria-invalid="true"]:focus{box-shadow:0 0 0 3px rgba(216,74,58,.13)}
#flow .suffix{position:relative}
#flow .suffix .input{padding-right:52px}
#flow .suffix__u{position:absolute;right:16px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:14px;pointer-events:none}
#flow .fields{margin-top:26px;display:grid;gap:22px;grid-template-columns:repeat(2,minmax(0,1fr));max-width:900px}
#flow .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 24px;border-radius:var(--r-ctl);border:1px solid transparent;
  font-size:14.5px;font-weight:600;cursor:pointer;white-space:nowrap;
  transition:background-color 150ms ease-out,opacity 150ms ease-out,border-color 150ms ease-out;
}
#flow .btn .ico{width:19px;height:19px}
#flow .btn--primary{background:var(--btn);color:var(--btn-text)}
#flow .btn--primary:hover:not([disabled]){background:#222824}
#flow .btn--outline{background:var(--surface);color:var(--text);border-color:var(--border)}
#flow .btn--outline:hover:not([disabled]){background:#F7F9F8;border-color:#CBD4D0}
#flow .btn[disabled]{opacity:.42;cursor:not-allowed}
#flow .spin{animation:flowSpin 900ms linear infinite}
#flow .doc__close{
  position:relative;z-index:2;flex:none;width:40px;height:40px;border-radius:999px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface);border:1px solid var(--border);color:#3F4A54;
  transition:background-color 140ms ease-out,border-color 140ms ease-out;
}
#flow .doc__close:hover{background:#F4F6F5;border-color:#CBD4D0;color:var(--text)}
#flow .doc__close .ico{width:18px;height:18px}

@keyframes flowSpin{to{transform:rotate(360deg)}}
@keyframes flowFadeIn{from{opacity:0}to{opacity:1}}
@keyframes flowRise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes flowPop{from{transform:scale(.88)}to{transform:scale(1)}}
#flow .pop{animation:flowPop 240ms ease-out}

/* ── site-survey flow ─────────────────────────────────── */
.flow{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(17,20,18,.46);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.flow[hidden]{display:none}
.flow--in{animation:flowFadeIn 180ms ease-out}
.flow--in .flow__dialog{animation:flowRise 240ms ease-out}
.flow__dialog{
  width:min(880px,100%);max-height:min(900px,calc(100dvh - 48px));display:flex;flex-direction:column;
  background:var(--surface);border-radius:var(--r-shell);box-shadow:0 24px 64px -16px rgba(17,20,18,.35);overflow:hidden;
}
.flow__head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 32px 0}
.flow__body{flex:1;min-height:0;overflow-y:auto;padding:18px 32px 28px;scrollbar-width:thin;scrollbar-color:#CAD3CF transparent}
.flow__back{margin:0 0 14px -8px}
.flow__foot{padding:16px 32px 22px;border-top:1px solid var(--border-soft);background:var(--surface)}
.flow__cta{width:100%}
.flow__cta[aria-disabled="true"]{opacity:.42}
.fp{display:flex;align-items:center;gap:6px}
.fp__bar{width:26px;height:5px;border-radius:999px;background:#E3E8E6;transition:background-color 200ms ease-out,width 200ms ease-out}
.fp__bar.is-done{background:var(--green)}
.fp__bar.is-on{background:var(--green);width:40px}
.fp__n{margin-left:10px;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.fh{margin-top:6px;font-size:28px;line-height:1.15;font-weight:700;letter-spacing:-.016em}
.fh:focus{outline:none}
.flede{margin-top:8px;color:#4A5561;font-size:14.5px;line-height:1.55;max-width:64ch}
.opt{color:var(--muted);font-weight:400}

.fnote{margin-top:18px;display:flex;gap:12px;align-items:flex-start;padding:13px 16px;border-radius:var(--r-panel);font-size:13.5px;line-height:1.5;border:1px solid transparent}
.fnote .ico{width:18px;height:18px;margin-top:1px}
.fnote--healthy{background:var(--green-pale);border-color:#CDE9DA;color:#1F4D35}
.fnote--healthy .ico{color:var(--green)}
.fnote--limited{background:var(--amber-pale);border-color:#F2DFAE;color:#4A4130}
.fnote--limited .ico{color:#B7860E}
.fnote--low{background:var(--red-pale);border-color:#F4CFC8;color:#4E3833}
.fnote--low .ico{color:var(--red)}

.tcards{margin-top:20px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.tcard{position:relative;display:flex;flex-direction:column;gap:8px;padding:18px;border:1px solid var(--border);border-radius:var(--r-panel);cursor:pointer;background:var(--surface);transition:border-color 140ms ease-out,box-shadow 140ms ease-out,background-color 140ms ease-out}
.tcard:hover{border-color:#CBD4D0}
.tcard input{position:absolute;opacity:0;width:1px;height:1px}
.tcard input:focus-visible ~ .tcard__top .tcard__chk{outline:2px solid var(--green);outline-offset:2px}
.tcard.is-on{border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green);background:#FAFDFB}
.tcard__top{display:flex;align-items:center;justify-content:space-between}
.tcard__ic{width:40px;height:40px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:var(--green-pale);color:var(--green-deep)}
.tcard__ic .ico{width:20px;height:20px}
.tcard__chk{width:22px;height:22px;border-radius:999px;border:1.5px solid #C3CCC8;display:flex;align-items:center;justify-content:center;color:transparent}
.tcard__chk .ico{width:13px;height:13px;stroke-width:3}
.tcard.is-on .tcard__chk{background:var(--green);border-color:var(--green);color:#fff}
.tcard__t{font-size:15.5px;font-weight:600;line-height:1.3;margin-top:4px}
.tcard__d{font-size:13px;color:var(--muted);line-height:1.5}
.tag{display:inline-block;margin-top:6px;padding:3px 9px;border-radius:999px;background:var(--green-pale);color:var(--green-deep);font-size:11px;font-weight:600;letter-spacing:.01em;vertical-align:1px}

.fgroup{margin-top:24px;padding-top:20px;border-top:1px solid var(--border-soft)}
.fgroup:first-of-type{margin-top:20px}
.fgroup__h{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;margin-bottom:14px}
.fgroup__n{width:24px;height:24px;border-radius:999px;background:var(--green-pale);color:var(--green-deep);font-size:12px;display:flex;align-items:center;justify-content:center}
.mseg{display:inline-flex;padding:4px;border-radius:12px;background:#F1F4F2;gap:4px;margin-bottom:16px}
.mseg__b{appearance:none;border:0;background:transparent;cursor:pointer;padding:9px 16px;border-radius:9px;font-size:13.5px;color:#4A5561;min-height:40px}
.mseg__b[aria-selected="true"]{background:var(--surface);color:var(--text);font-weight:600;box-shadow:0 1px 2px rgba(17,20,18,.08),0 0 0 1px var(--border)}
.fields--flow{margin-top:0;max-width:none}
.flede + .fields--flow{margin-top:22px}
.suffix--wide .input{padding-right:120px}
.prefix .input{padding-left:44px}
.prefix--cc .input{padding-left:58px}
.prefix--cc .prefix__u{padding-right:10px;border-right:1px solid var(--border);line-height:1.2}
.prefix__u{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:#4A5561;font-size:15px;pointer-events:none}
.hint b{color:var(--text);font-weight:600}
.field .hint{margin-top:8px}
.label--sp{margin-top:16px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{appearance:none;cursor:pointer;min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--border);background:var(--surface);font-size:13.5px;color:#3F4A54;transition:all 140ms ease-out}
.chip:hover{border-color:#CBD4D0;color:var(--text)}
.chip.is-on{background:var(--green-pale);border-color:var(--green);color:var(--green-deep);font-weight:600}
.check{display:flex;align-items:flex-start;gap:10px;margin-top:10px;font-size:13px;color:#4A5561;cursor:pointer;line-height:1.5}
.check input{position:absolute;opacity:0;width:1px;height:1px}
.check__b{flex:none;width:20px;height:20px;border-radius:6px;border:1.5px solid #C3CCC8;display:flex;align-items:center;justify-content:center;color:transparent;background:var(--surface);margin-top:1px}
.check__b .ico{width:13px;height:13px;stroke-width:3}
.check input:checked + .check__b{background:var(--green);border-color:var(--green);color:#fff}
.check input:focus-visible + .check__b{outline:2px solid var(--green);outline-offset:2px}
.check--consent{margin-top:22px;padding-top:18px;border-top:1px solid var(--border-soft);font-size:13px}
.captcha{margin-top:18px;min-height:70px}.captcha__label{display:block;margin-bottom:9px;font-size:13px;font-weight:600}.captcha__box{min-height:65px}.captcha__box altcha-widget{display:block;max-width:420px}.captcha__status{color:var(--muted);font-size:12.5px}.captcha__status--ok{display:inline-flex;align-items:center;gap:7px;color:var(--green-deep);font-weight:600}.captcha__status--ok .ico{width:17px;height:17px}.captcha .err-text{margin-top:8px}.captcha .err-text[hidden]{display:none!important}.submit-error{margin-top:14px;padding:11px 13px;border:1px solid #F2C7C1;border-radius:9px;background:var(--red-pale);color:#8D3025;font-size:13px;line-height:1.5}.hp-field{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important;opacity:0!important;pointer-events:none!important}
.selectw{position:relative}
.selectw select{appearance:none;-webkit-appearance:none;padding-right:44px;cursor:pointer}
.selectw .ico{position:absolute;right:16px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:#7C8792;pointer-events:none}
.linked{margin-top:14px;display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);flex-wrap:wrap}
.linked .ico{width:15px;height:15px;color:var(--green)}
.linked b{color:var(--text);font-weight:600}
.textarea{height:auto;min-height:92px;padding:14px 16px;resize:vertical;line-height:1.5;font-family:inherit}

.calc{text-align:center;padding:12px 0 4px}
.calc .flede{margin-left:auto;margin-right:auto}
.ring{position:relative;width:132px;height:132px;margin:28px auto 26px}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring__bg{fill:none;stroke:#EEF1EF;stroke-width:8}
.ring__fg{fill:none;stroke:var(--green);stroke-width:8;stroke-linecap:round;transition:stroke-dashoffset 90ms linear}
.ring__n{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:700;font-variant-numeric:tabular-nums}
.ring__n small{font-size:15px;margin-left:1px;color:#4A5561}
.clist{list-style:none;margin:0 auto;padding:0;max-width:460px;display:flex;flex-direction:column;gap:8px;text-align:left}
.clist__i{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:10px;border:1px solid var(--border-soft);background:#F9FBFA;font-size:14px;color:var(--text)}
.clist__ic{width:22px;height:22px;border-radius:999px;flex:none;display:flex;align-items:center;justify-content:center}
.clist__ic .ico{width:14px;height:14px;stroke-width:3}
.clist__i--done .clist__ic{background:var(--green);color:#fff}
.clist__i--now{background:var(--surface);border-color:var(--border)}
.clist__i--now .clist__ic{color:var(--green)}
.clist__i--now .clist__ic .ico{width:18px;height:18px;stroke-width:2.4}
.clist__i--todo{color:#98A2AD}
.clist__i--todo .clist__ic::after{content:"";width:7px;height:7px;border-radius:999px;background:#D3DBD9}

.ptiles{margin-top:20px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.ptile{display:flex;flex-direction:column;padding:16px 18px;border:1px solid var(--border-soft);border-radius:var(--r-panel);background:#F9FBFA;min-width:0}
.ptile__l{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:500}
.ptile__v{margin-top:6px;font-size:21px;font-weight:700;letter-spacing:-.01em}
.ptile__m{margin-top:2px;font-size:12px;color:var(--muted)}
.subsidy{margin-top:18px;display:flex;flex-direction:column;padding:20px 22px;border-radius:var(--r-panel);background:linear-gradient(135deg,#EEF8F2,#F6FBF8);border:1px solid #D5EDDF}
.subsidy .eyebrow{color:var(--green-deep)}
.subsidy__v{margin-top:6px;font-size:30px;font-weight:700;letter-spacing:-.02em;color:var(--green-deep)}
.subsidy__c{margin-top:6px;font-size:13px;color:#3E4A44;line-height:1.55;max-width:80ch}

.done{text-align:center;padding:24px 0 8px}
.done__ic{width:64px;height:64px;border-radius:999px;background:var(--green);color:#fff;display:inline-flex;align-items:center;justify-content:center}
.done__ic .ico{width:30px;height:30px;stroke-width:2.6}
.done .fh{margin-top:18px}
.done .flede{margin-left:auto;margin-right:auto}
.dsum{margin:24px auto 0;max-width:420px;text-align:left;border:1px solid var(--border-soft);border-radius:var(--r-panel);padding:6px 18px}
.dsum div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--border-soft);font-size:14px}
.dsum div:last-child{border-bottom:0}
.dsum dt{color:var(--muted)}
.dsum dd{margin:0;font-weight:600;text-align:right}
.btn--done{background:var(--green)!important}

@media (max-width:767px){
  .flow{padding:0;align-items:stretch}
  .flow__dialog{max-height:none;height:100dvh;border-radius:0}
  .flow__head{padding:16px 20px 0}
  .flow__body{padding:14px 20px 24px}
  .flow__foot{padding:12px 20px calc(14px + env(safe-area-inset-bottom))}
  .fh{font-size:24px}
  .tcards{grid-template-columns:minmax(0,1fr)}
  .tcard{flex-direction:row;flex-wrap:wrap;align-items:flex-start;gap:6px 14px;padding:16px}
  .tcard__t{margin-top:0;flex:1 1 0;order:1}
  .tcard__top{order:2}
  .tcard__top .tcard__ic{display:none}
  .tcard__d{order:3;flex-basis:100%}
  .ptiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ptile__v{font-size:19px}
  .mseg{display:flex}
  .mseg__b{flex:1;padding:9px 8px}
}
