/* ============================================================
   SunRay Solar Pump Quote — design system
   Aesthetic: "Sunlit engineering" — warm, premium, high-trust
   home-services. Sun-gold + deep-water-navy on warm paper.
   Mobile-first (375px), conversion-focused.
   ============================================================ */

:root {
  /* palette */
  --paper:       #FBF8F2;
  --paper-2:     #F4EEE2;
  --card:        #FFFFFF;
  --ink:         #12242E;
  --ink-soft:    #43555F;
  --ink-faint:   #7C8A92;
  --navy:        #0C2A43;
  --navy-700:    #123A5A;
  --sun:         #F2A73B;
  --sun-deep:    #E07B29;
  --water:       #1E8FAE;
  --water-deep:  #14657C;
  --line:        #E7DECD;
  --line-soft:   #EFE8DA;
  --good:        #2E8B57;
  --danger:      #C0492F;

  /* type */
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --body: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* space + shape */
  --r-sm: 10px;
  --r:    14px;
  --r-lg: 22px;
  --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(12,42,67,.06), 0 2px 8px rgba(12,42,67,.05);
  --shadow:    0 8px 24px rgba(12,42,67,.10), 0 2px 6px rgba(12,42,67,.06);
  --shadow-lg: 0 24px 60px rgba(12,42,67,.16), 0 8px 20px rgba(12,42,67,.08);
  --ring: 0 0 0 4px rgba(242,167,59,.28);
  --wrap: 1140px;
  --gutter: clamp(18px, 5vw, 40px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
a { color: var(--water-deep); text-decoration: none; }
h1,h2,h3,h4 { font-family: var(--display); font-weight: 560; line-height: 1.06; letter-spacing: -0.015em; margin: 0; color: var(--navy); }

/* ---------- layout ---------- */
.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }
.stack > * + * { margin-top: var(--flow, 1rem); }
.eyebrow {
  font: 600 12.5px/1 var(--body);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--sun-deep); display: inline-flex; align-items: center; gap: .55em;
}
.eyebrow::before { content:""; width: 22px; height: 2px; background: var(--sun); border-radius: 2px; }

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.topbar__in { display: flex; align-items: center; justify-content: space-between; height: 66px; }
.brand { display: flex; align-items: center; gap: 11px; font-family: var(--display); font-weight: 600; font-size: 20px; color: var(--navy); }
.brand__mark {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: radial-gradient(circle at 30% 25%, var(--sun) 0%, var(--sun-deep) 78%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), var(--shadow-sm);
  color: #fff;
}
.brand small { color: var(--ink-faint); font-family: var(--body); font-weight: 500; font-size: 12px; letter-spacing:.02em; }
.topbar__cta { display:flex; align-items:center; gap: 18px; }
.topbar__phone { font-weight: 700; color: var(--navy); font-size: 15.5px; white-space: nowrap; }
.topbar__phone span { color: var(--ink-faint); font-weight:500; }
@media (max-width: 620px){
  .topbar__phone span { display:none; }
  .brand small { display:none; }
  .topbar__in  { gap: 10px; }
  .topbar__cta { gap: 10px; }
  .topbar__cta .btn { white-space: nowrap; padding: 9px 13px; font-size: 14px; }
}
@media (max-width: 400px){ .topbar__phone { display:none; } }

/* Always available contact actions. The bottom inset lets the last control
   scroll fully above the rail, including on phones with a home indicator. */
body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
.contact-rail {
  position: fixed; inset: auto 0 0; z-index: 60;
  display: flex; justify-content: center; gap: 10px;
  padding: 10px max(12px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -6px 24px rgba(12,42,67,.14);
}
.contact-rail a {
  display: flex; justify-content: center; align-items: center; min-height: 46px;
  padding: 8px 16px; border-radius: 999px; font-weight: 700; text-align: center;
}
.contact-rail__call { color: #fff; background: var(--navy); }
.contact-rail__whatsapp { color: #103f2b; background: #c8efd6; }
@media (max-width: 560px) {
  .contact-rail a { flex: 1; min-width: 0; font-size: 13px; padding-inline: 7px; }
  .searchcard .duo { flex-direction: column; }
  .searchcard .duo .input { font-size: 16px; }
}
@media print { .contact-rail { display: none !important; } body { padding-bottom: 0; } }
html.embed .contact-rail { display: none; }

/* ---------- buttons ---------- */
.btn {
  --bg: var(--navy); --fg: #fff;
  appearance:none; border:0; border-radius: var(--r-pill);
  background: var(--bg); color: var(--fg);
  font-weight: 650; font-size: 16px; letter-spacing:.005em;
  padding: 14px 26px; display:inline-flex; align-items:center; gap:.6em;
  box-shadow: var(--shadow-sm); transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0); }
.btn--sun { --bg: linear-gradient(180deg, var(--sun) 0%, var(--sun-deep) 100%); --fg: #3a2205; box-shadow: 0 6px 18px rgba(224,123,41,.34); }
.btn--sun:hover { box-shadow: 0 10px 26px rgba(224,123,41,.42); }
.btn--ghost { --bg: transparent; --fg: var(--navy); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn--ghost:hover { --bg: var(--paper-2); }
.btn--lg { padding: 17px 32px; font-size: 17.5px; }
.btn--block { width: 100%; justify-content: center; }
.btn[disabled]{ opacity:.5; pointer-events:none; }

/* ---------- hero ---------- */
.hero { position: relative; padding: clamp(34px, 6vw, 74px) 0 clamp(30px,5vw,56px); }
.hero::before {
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(1100px 460px at 85% -8%, rgba(242,167,59,.22), transparent 60%),
    radial-gradient(760px 420px at -5% 15%, rgba(30,143,174,.12), transparent 60%);
}
.hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px,4vw,56px); align-items: center; }
@media (max-width: 900px){ .hero__grid { grid-template-columns: 1fr; } }
.hero h1 { font-size: clamp(38px, 6vw, 62px); }
.hero h1 .u { background: linear-gradient(180deg, transparent 62%, rgba(242,167,59,.42) 62%); padding-inline:.05em; }
.hero__lede { font-size: clamp(17px,2.2vw,20px); color: var(--ink-soft); max-width: 40ch; }
.trustrow { display:flex; flex-wrap:wrap; gap: 8px 20px; margin-top: 6px; }
.trustrow li { list-style:none; display:flex; align-items:center; gap:.5em; font-size:14.5px; color: var(--ink-soft); font-weight:550; }
.trustrow svg { color: var(--good); flex:none; }
ul.trustrow{ padding:0; margin-top: 14px; }

/* address search card */
.searchcard {
  background: var(--card); border:1px solid var(--line); border-radius: var(--r-lg);
  padding: 22px; box-shadow: var(--shadow-lg); position: relative;
}
.searchcard h2 { font-size: 21px; }
.searchcard .hint { color: var(--ink-faint); font-size: 14px; margin-top:2px; }
.seg { display:flex; gap:6px; background: var(--paper-2); padding:5px; border-radius: var(--r-pill); margin: 16px 0 14px; }
.seg button {
  flex:1; border:0; background:transparent; border-radius: var(--r-pill);
  padding: 10px; font-weight: 650; color: var(--ink-soft); font-size: 15px;
  display:flex; align-items:center; justify-content:center; gap:.5em; transition: all .18s ease;
}
.seg button[aria-selected="true"]{ background: var(--card); color: var(--navy); box-shadow: var(--shadow-sm); }
.field { position: relative; }
.field label { display:block; font-weight:600; font-size:13.5px; color: var(--ink-soft); margin-bottom:6px; }
.input {
  width:100%; border:1.5px solid var(--line); background: var(--paper);
  border-radius: var(--r); padding: 15px 15px 15px 46px; font-size: 16.5px; color: var(--ink);
  font-family: inherit; transition: border-color .15s, box-shadow .15s, background .15s;
}
.input:focus { outline:0; border-color: var(--sun); box-shadow: var(--ring); background: #fff; }
.field .pin { position:absolute; left:15px; top: 41px; color: var(--sun-deep); }
.searchcard .btn--block { margin-top: 14px; }
.microtrust { text-align:center; color: var(--ink-faint); font-size: 12.5px; margin-top: 12px; }

/* ---------- generic section ---------- */
.section { padding: clamp(40px,7vw,84px) 0; }
.section--tint { background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%); border-block: 1px solid var(--line-soft); }
.section__head { max-width: 60ch; margin-bottom: 30px; }
.section__head h2 { font-size: clamp(28px,4vw,42px); margin-top:8px; }
.section__head p { color: var(--ink-soft); font-size: 18px; margin: 12px 0 0; }

/* steps */
.steps { display:grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
@media (max-width: 820px){ .steps { grid-template-columns:1fr; } }
.step { background: var(--card); border:1px solid var(--line); border-radius: var(--r); padding: 24px; box-shadow: var(--shadow-sm); position:relative; }
.step__n { font-family: var(--display); font-size: 15px; font-weight:600; color:#fff; width:34px;height:34px;border-radius:50%; display:grid;place-items:center; background: var(--navy); margin-bottom: 14px; }
.step h3 { font-size: 20px; }
.step p { color: var(--ink-soft); margin:.5em 0 0; font-size: 15.5px; }

/* ============================================================
   QUOTE APP (the flow)  — full-bleed working surface
   ============================================================ */
.app { padding: clamp(24px,4vw,44px) 0 60px; scroll-margin-top: 80px; }
.appshell {
  background: var(--card); border:1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.appshell__bar {
  display:flex; align-items:center; gap: 14px; padding: 16px 22px;
  border-bottom:1px solid var(--line-soft); background: linear-gradient(180deg,#fff, var(--paper));
}
.progress { display:flex; gap: 8px; flex:1; }
.progress .dot { height:6px; flex:1; border-radius:3px; background: var(--line); transition: background .3s; }
.progress .dot.on { background: linear-gradient(90deg,var(--sun),var(--sun-deep)); }
.appshell__bar .mode { font-weight:700; color: var(--navy); font-size:14px; display:flex; align-items:center; gap:.5em; }

.appbody { display:grid; grid-template-columns: minmax(0,1.45fr) minmax(330px,.9fr); min-height: 640px; }
@media (max-width: 940px){ .appbody { grid-template-columns:1fr; } .stage{ min-height:62vh; } }


/* map stage */
.stage { position: relative; background: var(--navy); min-height: 640px; }
#propertyMap { position:absolute; inset:0; }
.stage__overlay { position:absolute; inset:0; display:grid; place-items:center; text-align:center; color:#fff; padding: 24px; background: radial-gradient(circle at 50% 40%, rgba(12,42,67,.35), rgba(12,42,67,.86)); }
.stage__overlay .k { max-width: 34ch; }
.stage__overlay h3 { color:#fff; font-size: 24px; }
.stage__overlay p { color: rgba(255,255,255,.82); margin-top:.5em; }
.maptools {
  position:absolute; left:14px; top:14px; z-index:5; display:flex; flex-direction:column; gap:8px;
}
.maptool {
  background: rgba(255,255,255,.94); border:1px solid rgba(12,42,67,.1); border-radius: 10px;
  padding: 9px 12px; font-weight:650; font-size:13.5px; color: var(--navy); box-shadow: var(--shadow-sm);
  display:flex; align-items:center; gap:.5em; transition: all .15s;
}
.maptool:hover{ background:#fff; }
.maptool[aria-pressed="true"]{ background: var(--navy); color:#fff; border-color: var(--navy); }
.measurebadge {
  position:absolute; right:14px; bottom:14px; z-index:5; background: rgba(255,255,255,.96);
  border-radius: 12px; padding: 10px 14px; box-shadow: var(--shadow); border:1px solid var(--line);
  font-size: 13px; color: var(--ink-soft); min-width: 150px;
}
.measurebadge b { display:block; font-family:var(--display); font-size: 22px; color: var(--navy); font-weight:600; }

/* panel (right side) */
.panel { padding: clamp(22px,3vw,32px); display:flex; flex-direction:column; }
.panel__scroll { flex:1; }
.qstep h3 { font-size: 24px; }
.qstep > p { color: var(--ink-soft); margin:.5em 0 1.3em; }
.qgroup { margin-bottom: 20px; }
.qgroup > label.qlabel { display:block; font-weight:650; font-size:14.5px; color:var(--navy); margin-bottom:9px; }
.opts { display:grid; gap:8px; }
.opts.two { grid-template-columns: 1fr 1fr; }
.opt {
  border:1.5px solid var(--line); border-radius: var(--r-sm); padding: 13px 15px; background: var(--paper);
  display:flex; align-items:center; gap: 11px; font-weight:600; font-size:15px; color: var(--ink);
  transition: all .15s; text-align:left;
}
.opt:hover { border-color: var(--sun); background:#fff; }
.opt[aria-pressed="true"]{ border-color: var(--sun-deep); background: color-mix(in srgb, var(--sun) 12%, #fff); box-shadow: var(--ring); }
.opt .emoji { font-size: 20px; line-height:1; }
.opt small { display:block; font-weight:500; color: var(--ink-faint); font-size:12.5px; }
.rangewrap { display:flex; align-items:center; gap: 14px; }
input[type=range]{ -webkit-appearance:none; appearance:none; height:6px; border-radius:3px; background: var(--line); flex:1; }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:24px;height:24px;border-radius:50%; background: linear-gradient(180deg,var(--sun),var(--sun-deep)); box-shadow: var(--shadow-sm); cursor:pointer; border:2px solid #fff; }
input[type=range]::-moz-range-thumb{ width:24px;height:24px;border-radius:50%; background: var(--sun-deep); border:2px solid #fff; cursor:pointer; }
.rangeval { font-family:var(--display); font-weight:600; color: var(--navy); font-size:20px; min-width: 92px; text-align:right; }
select.input, input.input.plain { padding-left: 15px; }
.panel__foot { border-top:1px solid var(--line-soft); padding-top: 18px; margin-top: 18px; display:flex; gap:12px; }
.panel__foot .btn { flex:1; }

/* quote result */
.result { padding: clamp(22px,3vw,32px); }
.result__hero { text-align:center; margin-bottom: 24px; }
.result__hero .eyebrow{ justify-content:center; }
.result__hero h2 { font-size: clamp(26px,4vw,38px); margin-top:10px; }
.result__hero p { color: var(--ink-soft); max-width: 48ch; margin: 10px auto 0; }
.pumpcard {
  display:grid; grid-template-columns: 168px 1fr; gap: 20px; border:1px solid var(--line);
  border-radius: var(--r); padding: 18px; box-shadow: var(--shadow-sm); background:#fff; margin-bottom:14px; position:relative;
}
.pumpcard.best { border-color: var(--sun-deep); box-shadow: 0 0 0 1px var(--sun-deep), var(--shadow); }
.pumpcard .badge { position:absolute; top:-11px; left:18px; background: linear-gradient(180deg,var(--sun),var(--sun-deep)); color:#3a2205; font-weight:700; font-size:12px; padding:4px 12px; border-radius: var(--r-pill); box-shadow: var(--shadow-sm); }
@media (max-width: 560px){ .pumpcard{ grid-template-columns:1fr; } }
.pumpcard__img { border-radius: var(--r-sm); overflow:hidden; background: var(--paper-2); aspect-ratio: 1; display:grid; place-items:center; }
.pumpcard__img img { width:100%; height:100%; object-fit: cover; }
.pumpcard h3 { font-size: 20px; }
.pumpcard .mfr { color: var(--ink-faint); font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; }
.specrow { display:flex; flex-wrap:wrap; gap: 6px 8px; margin:12px 0; }
.spec { background: var(--paper-2); border-radius: var(--r-pill); padding:4px 11px; font-size:12.5px; font-weight:600; color: var(--navy); }
.priceline { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-top: 8px; }
.priceline .now { font-family:var(--display); font-weight:600; font-size: 30px; color: var(--navy); }
.priceline .was { color: var(--ink-faint); text-decoration: line-through; font-size:15px; }

/* savings/roi strip */
.metrics { display:grid; grid-template-columns: repeat(3,1fr); gap:12px; margin: 20px 0; }
@media (max-width:560px){ .metrics{ grid-template-columns:1fr; } }
.metric { background: linear-gradient(180deg,#fff,var(--paper)); border:1px solid var(--line); border-radius: var(--r); padding:16px; text-align:center; }
.metric .v { font-family:var(--display); font-weight:600; font-size: 26px; color: var(--navy); }
.metric .l { font-size:12.5px; color: var(--ink-soft); font-weight:600; margin-top:3px; }
.metric.hot .v { color: var(--sun-deep); }

/* panel suggestion callout */
.sunbox { background: color-mix(in srgb, var(--sun) 10%, #fff); border:1px solid color-mix(in srgb,var(--sun) 40%, var(--line)); border-radius: var(--r); padding: 16px 18px; display:flex; gap:14px; align-items:flex-start; margin: 8px 0 20px; }
.sunbox .ic { font-size: 26px; }
.sunbox b { color: var(--navy); }
.sunbox p { margin:.25em 0 0; color: var(--ink-soft); font-size:14.5px; }

/* lead form */
.lead { background: var(--navy); color:#fff; border-radius: var(--r); padding: clamp(20px,3vw,28px); }
.lead h3 { color:#fff; font-size: 23px; }
.lead p { color: rgba(255,255,255,.78); margin:.4em 0 16px; font-size:15px; }
.lead .grid2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:560px){ .lead .grid2{ grid-template-columns:1fr; } }
.lead .input { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color:#fff; padding-left:15px; }
.lead .input::placeholder{ color: rgba(255,255,255,.5); }
.lead .input:focus{ background: rgba(255,255,255,.12); border-color: var(--sun); }
.lead .field label{ color: rgba(255,255,255,.7); }
.lead .btn--sun { margin-top: 6px; }
.leadnote { font-size:12px; color: rgba(255,255,255,.55); text-align:center; margin-top:10px; }

/* toast / hidden helpers */
[hidden]{ display:none !important; }
.spinner{ width:22px;height:22px;border-radius:50%;border:3px solid rgba(255,255,255,.4);border-top-color:#fff;animation:spin .7s linear infinite;display:inline-block;vertical-align:middle;}
@keyframes spin{to{transform:rotate(360deg)}}
.fade-in{ animation: fade .5s ease both; }
@keyframes fade{ from{opacity:0; transform: translateY(8px);} to{opacity:1;transform:none;} }

/* proof + footer */
.proof { display:grid; grid-template-columns: repeat(4,1fr); gap: 16px; text-align:center; }
@media (max-width: 760px){ .proof{ grid-template-columns:1fr 1fr; } }
.proof .n { font-family:var(--display); font-size: clamp(30px,5vw,44px); font-weight:600; color: var(--navy); }
.proof .c { color: var(--ink-soft); font-size:14.5px; font-weight:550; }
.site-foot { background: var(--navy); color: rgba(255,255,255,.72); padding: 40px 0; margin-top: 40px; font-size:14.5px; }
.site-foot a { color:#fff; }
.site-foot__in { display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; align-items:center; }

.devbadge{ position:fixed; bottom:12px; left:12px; z-index:80; background: var(--navy); color:#fff; font-size:11px; font-weight:600; padding:6px 11px; border-radius: var(--r-pill); box-shadow: var(--shadow); opacity:.85; }

/* ---------- live TDH preview (well flow) ---------- */
.tdhbox{ background: linear-gradient(180deg, #F0F6FA, #fff); border:1.5px solid #CBDEE9; border-radius: var(--r); padding:16px 18px; }
.tdhbox__v{ font-family:var(--display); font-weight:600; font-size:34px; color: var(--water-deep); }
.tdhbox__u{ font-weight:650; color: var(--ink-soft); font-size:13.5px; margin-left:8px; }
.tdhbox__sub{ color: var(--ink-faint); font-size:13px; margin-top:4px; }
.tdhbox__warn{ margin-top:10px; background:#FBF3E6; border:1px solid #EDD9B7; color:#8A5A18; border-radius:10px; padding:9px 12px; font-size:13px; font-weight:550; }

/* ---------- AI scan chip on the map ---------- */
.scanchip{ position:absolute; left:50%; bottom:18px; transform:translateX(-50%); z-index:6;
  background:rgba(12,42,67,.94); color:#fff; font-size:13.5px; font-weight:550; padding:10px 16px;
  border-radius: var(--r-pill); box-shadow: var(--shadow); display:flex; align-items:center; gap:9px;
  max-width: 92%; backdrop-filter: blur(4px); animation: fade .4s ease both; }
.scanchip--found{ background: linear-gradient(180deg, #14532D, #0E3D21); }
.scanchip__pulse{ width:9px;height:9px;border-radius:50%;background:var(--sun);animation:pulse 1.1s ease-in-out infinite; flex:none; }
@keyframes pulse{ 0%,100%{opacity:.4;transform:scale(.8)} 50%{opacity:1;transform:scale(1.2)} }

/* ---------- fold-out quote page ---------- */
.foldout{ padding: clamp(28px,5vw,64px) 0; background: linear-gradient(180deg, var(--paper) 0%, #fff 12%); border-top:1px solid var(--line-soft); }
.fo{ background:#fff; border:1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: clamp(22px,4vw,48px); animation: fade .6s ease both; }
.fo__head{ display:flex; justify-content:space-between; align-items:flex-start; gap:18px; flex-wrap:wrap; border-bottom:2px solid var(--sun); padding-bottom:20px; margin-bottom:8px; }
.fo__head h2{ font-size: clamp(26px,4vw,40px); margin-top:8px; }
.fo__meta{ color:var(--ink-faint); margin:.4em 0 0; font-size:15px; }
.fo__sec{ padding: 26px 0; border-bottom:1px solid var(--line-soft); }
.fo__sec:last-child{ border-bottom:0; }
.fo__sec h3{ font-size:22px; margin-bottom:12px; }
.fo__note{ color:var(--ink-soft); font-size:14.5px; margin:.4em 0 0; }
.fo__prop{ display:flex; gap:20px; align-items:center; flex-wrap:wrap; }
.fo__propimg{ width:min(420px,100%); border-radius: var(--r); box-shadow: var(--shadow); }
.fo__vision{ flex:1; min-width:240px; color:var(--ink-soft); font-size:15.5px; }
.fo__ctas{ display:flex; gap:12px; margin-top:16px; flex-wrap:wrap; }
.fo__kit{ margin-top:16px; border:1px solid var(--line); border-radius: var(--r); background:var(--paper); }
.fo__kit summary{ padding:14px 18px; font-weight:650; cursor:pointer; color:var(--navy); }
.fo__kit > div{ padding: 0 18px 18px; color:var(--ink-soft); font-size:14.5px; line-height:1.65; }
.fo__tablewrap{ overflow-x:auto; }
.fo__table{ width:100%; border-collapse:collapse; font-size:15px; }
.fo__table th{ text-align:left; padding:10px 14px; background:var(--paper-2); color:var(--ink-soft); font-size:12.5px; text-transform:uppercase; letter-spacing:.05em; }
.fo__table td{ padding:10px 14px; border-bottom:1px solid var(--line-soft); }
.fo__table td:last-child{ text-align:right; }
.fo__table .fo__total td{ background: color-mix(in srgb, var(--sun) 10%, #fff); font-weight:700; }
.fo__sec--green{ background: linear-gradient(180deg, #F2F8F3, #fff); margin:0 calc(-1 * clamp(22px,4vw,48px)); padding-inline: clamp(22px,4vw,48px); }
.fo__envgrid{ display:grid; grid-template-columns: repeat(4,1fr); gap:12px; margin-top:16px; }
@media(max-width:860px){ .fo__envgrid{ grid-template-columns:repeat(2,1fr);} }
.fo__env{ background:#fff; border:1px solid #D8EADC; border-radius: var(--r); padding:16px; text-align:center; }
.fo__env .v{ font-family:var(--display); font-weight:600; font-size:24px; color:#1C6B40; }
.fo__env .l{ font-size:12.5px; color:var(--ink-soft); font-weight:600; margin-top:4px; }
.fo__env .l span{ color:var(--ink-faint); font-weight:500; }
.fo__altgrid{ display:grid; grid-template-columns: repeat(auto-fill,minmax(170px,1fr)); gap:14px; }
.fo__alt{ border:1px solid var(--line); border-radius: var(--r); padding:14px; text-align:center; font-size:13.5px; }
.fo__altimg{ aspect-ratio:1; border-radius: var(--r-sm); background:var(--paper-2); overflow:hidden; display:grid; place-items:center; margin-bottom:10px; }
.fo__altimg img{ width:100%; height:100%; object-fit:cover; }
.fo__altname{ font-weight:650; color:var(--navy); min-height:2.6em; }
.fo__altprice{ font-family:var(--display); font-size:19px; color:var(--navy); margin:6px 0; }
.fo__altprice span{ font-family:var(--body); font-size:11.5px; color:var(--good); font-weight:650; }
.fo__next{ text-align:center; background: var(--paper); margin:0 calc(-1 * clamp(22px,4vw,48px)) calc(-1 * clamp(22px,4vw,48px)); padding: clamp(24px,4vw,40px) clamp(22px,4vw,48px); border-radius: 0 0 var(--r-lg) var(--r-lg); }
.fo__next .fo__ctas{ justify-content:center; }

/* ---------- print: the fold-out IS the document ---------- */
@media print {
  .topbar, .hero, .app, .section, .site-foot, .devbadge, .fo__print, .fo__next .btn--ghost { display:none !important; }
  .foldout{ padding:0; border:0; background:#fff; }
  .foldout[hidden]{ display:none; }
  .fo{ box-shadow:none; border:0; padding:0; }
  body{ background:#fff; }
  a{ text-decoration:none; color:inherit; }
}
.fo__altspec{ font-size:11.5px; color:var(--ink-faint); font-weight:600; margin-top:2px; }

/* ---- electricity-rate slider (the legacy kwh2/d55 sliders, reborn) ---- */
.fo__rate { background: #fdf3dd; border: 1px solid #eccf92; border-radius: 12px; padding: 14px 16px; margin: 12px 0 16px; }
.fo__rate label { font-weight: 700; display: block; margin-bottom: 8px; color: #14263b; }
.fo__rate input[type=range] { width: 100%; accent-color: #f2a71b; cursor: pointer; }
.fo__ratehint { font-size: 12.5px; color: #8a5a18; margin: 6px 0 0; line-height: 1.5; }

/* ---- embed widget mode: the calculator only, no site chrome ---- */
html.embed .topbar, html.embed .site-foot { display: none !important; }
html.embed .app { margin-top: 0; }

/* ---- panel placement palette (legacy drag-and-rotate panels, reborn) ---- */
.panelpal { position: absolute; left: 12px; bottom: 12px; z-index: 8; display: flex; flex-wrap: wrap;
  gap: 6px; align-items: center; background: rgba(10, 26, 42, .88); backdrop-filter: blur(6px);
  border-radius: 12px; padding: 8px 10px; max-width: calc(100% - 24px); }
.panelpal__hint { color: rgba(255,255,255,.75); font-size: 11.5px; width: 100%; }
.panelpal button { border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.1);
  color: #fff; border-radius: 9px; padding: 7px 11px; font-size: 13.5px; cursor: pointer;
  min-height: 36px; min-width: 40px; }
.panelpal button:active { background: rgba(242,167,59,.55); }
#panelCtls { display: inline-flex; gap: 6px; padding-left: 6px; border-left: 1px solid rgba(255,255,255,.25); }
.mapLabel.compass { background: rgba(255,255,255,.85) !important; color: #0c2a43 !important;
  font-weight: 800 !important; border-radius: 50% !important; padding: 3px 6px !important; }
.mapLabel.sunlegend { background: rgba(10,26,42,.85) !important; }
@media (max-width: 640px) {
  .panelpal { left: 8px; right: 8px; bottom: 8px; }
  .panelpal button { flex: 1 1 auto; }
}


/* ---- stage maximize (⛶): full-viewport map with tools intact ---- */
.stage.stage--max { position: fixed; inset: 0; z-index: 1000; min-height: 100vh; }
.stage.stage--max #propertyMap { height: 100vh; }

/* ---- panel palette: top-right on desktop (visible without scrolling) ---- */
@media (min-width: 641px) {
  .panelpal { left: auto; right: 12px; top: 12px; bottom: auto; width: 118px;
              flex-direction: column; align-items: stretch; gap: 4px; padding: 7px 8px; }
  .panelpal button { width: 100%; padding: 5px 8px; min-height: 30px; font-size: 12.5px; }
  .panelpal__hint { font-size: 10px; line-height: 1.35; }
  #panelCtls { border-left: 0; border-top: 1px solid rgba(255,255,255,.25);
               padding: 5px 0 0; display: flex; gap: 4px; }
  #panelCtls button { flex: 1; font-size: 16px; font-weight: 800; padding: 4px 0; }
}
#panelCtls button { color: #FFD479; }


/* ---- under-map rate + savings bar (the legacy kwh slider, front and center) ---- */
.stagecol { display: flex; flex-direction: column; min-width: 0; }
.stagecol .stage { flex: 1; }
.ratebar { display: flex; gap: 18px; align-items: center; background: #0d2137; color: #eef4fb;
           padding: 12px 18px; }
.ratebar__l { flex: 1.4; min-width: 0; }
.ratebar__l label { font-weight: 700; font-size: 13.5px; display: block; margin-bottom: 5px; }
.ratebar__l #rbRate { color: #FFD400; }
.ratebar__l input[type=range] { width: 100%; accent-color: #f2a71b; cursor: pointer; }
.ratebar__l small { color: #9fb4cb; font-size: 11px; line-height: 1.4; display: block; margin-top: 3px; }
.ratebar__r { flex: 1; text-align: right; }
.ratebar__r b { display: block; font-size: 21px; color: #FFD400; }
.ratebar__r span { font-size: 11px; color: #9fb4cb; line-height: 1.4; }
@media (max-width: 700px) { .ratebar { flex-direction: column; align-items: stretch; gap: 8px; }
  .ratebar__r { text-align: left; } }

/* ---- welcome line + optional-field labels on the start card ---- */
.welcomeline { background: #fdf3dd; color: #7a5a12; border-radius: 10px; padding: 8px 12px;
               font-size: 14px; margin-bottom: 10px; }
.field .opt { color: #98a6b8; font-weight: 500; font-size: 11px; }
.input--err { outline: 2px solid #e5544b; }


/* ---- condensed start form ---- */
.searchcard .duo { display: flex; gap: 8px; margin-bottom: 10px; }
.searchcard .duo .input { min-width: 0; flex: 1; font-size: 14px; }
.searchcard .field { margin-bottom: 10px; }
.searchcard .field .pin { top: 17px; }
@media (max-width: 560px) { .searchcard .duo .input { font-size: 16px; } }

/* Language toggle, sale-block note and the island / Mexico power check (line 1910). */
.langtoggle { border: 1.5px solid var(--line); background: #fff; color: var(--navy); font: 600 14px/1 var(--body); padding: 9px 12px; border-radius: 999px; cursor: pointer; white-space: nowrap; min-height: 40px; }
.langtoggle:hover, .langtoggle:focus-visible { border-color: var(--sun-deep); outline: 0; box-shadow: var(--ring); }
@media (max-width: 400px){ .langtoggle { padding: 8px 10px; font-size: 13px; } }
.blockednote { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: #FFF4E5; border: 1px solid var(--sun); color: var(--ink); font-size: 14px; }
.islandpower { border: 1.5px dashed var(--sun-deep); border-radius: 14px; padding: 14px; background: color-mix(in srgb, var(--sun) 7%, #fff); }
.islandpower__p { font-size: 14px; color: var(--ink-soft, #43555F); margin: 4px 0 10px; }
.islandpower__f { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 14px; color: var(--ink); }
.islandpower__f select { width: 100%; min-height: 44px; }
.islandpower__rules { margin: 10px 0 0 18px; font-size: 13px; color: var(--ink-soft, #43555F); display: grid; gap: 4px; }
.islandpower__ship { margin-top: 10px; font-size: 13px; color: var(--ink); font-weight: 600; }
.powerfit { margin: 14px 0; padding: 12px 14px; border-radius: 12px; border-left: 4px solid var(--sun-deep); background: #fff; font-size: 14px; color: var(--ink); text-align: left; }
.powerfit p { margin-top: 4px; }

/* ---- QF-05 phone-first stage (line 30512) ----
   The picture first at 4:3; one finger scrolls the page (map.js gestureHandling 'cooperative');
   the six tools behind one Adjust button; the step's primary button in the thumb zone, above
   the call rail; the address box before the long hero text; no sideways scroll at 375. */
@media (max-width: 940px){
  .appshell { overflow: clip; }   /* hidden made the shell a scroll box, so the sticky button never stuck */
  /* the picture, then the step card, then the rate bar: the step stays under the picture */
  .stagecol { display: contents; }
  .stagecol .stage { order: 1; }
  #panelHost { order: 2; }
  .stagecol .ratebar { order: 3; }
  .stage { min-height: 0; aspect-ratio: 4 / 3; }
  .stage.stage--max { aspect-ratio: auto; }
  #panelHost { scroll-margin-top: 72px; }
  #panelHost .panel__foot {
    position: sticky; bottom: calc(88px + env(safe-area-inset-bottom)); z-index: 5;   /* above the call rail, even when its label wraps */
    background: #fff; padding-top: 10px; padding-bottom: 10px; margin-bottom: 0;
  }
}
@media (max-width: 620px){
  .hero { padding-top: 18px; }
  .hero .stack { display: contents; }
  .hero__grid { gap: 14px; }
  .hero .eyebrow { order: 1; }
  .hero h1 { order: 2; font-size: 32px; }
  .hero .searchcard { order: 3; }
  .hero .hero__lede { order: 4; font-size: 16px; }
  .hero .trustrow { order: 5; }
}
@media (max-width: 420px){
  .topbar__cta .btn--sun { display: none; }   /* the address box right below is the quote */
}
/* "We found your property" fits the first phone screen; the keyless picture asks one thing there */
@media (max-width: 940px) { .stage.stage--found { min-height: 0; } }
.stage--found .kl--pic .kl__bar, .stage--found .kl--pic .kl__manual { display: none !important; }
/* the quote step on a phone: a small kit photo beside its name and price, so Buy sits in the first screen */
@media (max-width: 560px){
  .pumpcard { grid-template-columns: 84px 1fr; gap: 12px; }
  .pumpcard__img { width: 84px; }
  .pumpcard h3 { font-size: 19px; }
}
/* one Adjust button holds the six tools */
.maptools__toggle {
  padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(12,42,67,.18);
  background: rgba(255,255,255,.94); color: var(--navy); font-weight: 700; font-size: 14px; min-height: 40px;
}
.maptools__toggle[aria-expanded="true"] { background: var(--navy); color: #fff; }
.maptools__set { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.maptools__set[hidden] { display: none; }
/* the current-pump chips on the dark rate bar read light, the picked one in sun (the bill asks her to pick here) */
#currentPumpChips .btn--ghost { color: #fff; border-color: rgba(255,255,255,.55); background: transparent; }
#currentPumpChips .btn--ghost[aria-pressed="true"] { background: var(--sun, #F2A73B); border-color: var(--sun, #F2A73B); color: var(--navy, #0C2A43); }

/* ---- QF-07 (line 30944): nothing overlaps at 390, and the language switch shows ----
   The kit owns the top bar (48px on phones, 52px on desks) and the phone's bottom bar. A step scrolled into view
   starts below the top bar; on phones the step's buttons follow its text (QF-05's sticky foot covered the
   question above it, "¿Es esta su casa?" included); the found card puts its main button first. */
html.srk-on #quoteApp, html.srk-on #panelHost, html.srk-on #panelHost .qstep, html.srk-on #searchCard { scroll-margin-top: calc(var(--srk-top-h, 52px) + 12px); }
@media (max-width: 940px){
  #panelHost .panel__foot { position: static; padding-bottom: 0; }
}
@media (max-width: 420px){
  #foundCard .panel__foot { flex-direction: column; }
  #foundCard .panel__foot .btn--sun { order: -1; }
}
/* the page's one Español / English switch, moved into the kit's top bar by app.js */
html.srk-on .srk-top .langtoggle { flex: none; min-height: 36px; padding: 7px 12px; }
html.srk-on .srk-top .langmenu { flex: none; }   /* QF-10: the language menu took the switch's place */
@media (max-width: 768px){
  html.srk-on .srk-top .srk-nav { display: none; }   /* Call, WhatsApp and the quote are the bottom bar's on a phone */
  html.srk-on .srk-top .langtoggle, html.srk-on .srk-top .langmenu { margin-left: auto; }
}

/* ---- QF-08 (line 30971): "Remember me on this device" (off by default) and the returning visitor's question ----
   On the navy lead card: the tick sits under the email, the question row above the fields; both wrap at 375. */
.lead .leadremember { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 14px; color: rgba(255,255,255,.86); cursor: pointer; }
.lead .leadremember input { width: 20px; height: 20px; flex: none; accent-color: var(--sun, #F2A73B); }
.lead .leadback { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.08); }
.lead .leadback .leadnote { margin: 0 0 8px; text-align: left; font-size: 14px; color: #fff; }
.lead .leadback__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.lead .leadback__use { margin-top: 0; padding: 9px 16px; font-size: 14.5px; }
.lead .leadback__forget { background: none; border: 0; padding: 6px 0; color: rgba(255,255,255,.8); font: inherit; font-size: 13.5px; text-decoration: underline; cursor: pointer; }
.lead .leadback__gone { text-align: left; margin: 0 0 12px; }

/* ---- QF-09 (line 31016): Verify your pool, the sun's NOW mark, zoom, the pump's picture and the address notice ---- */
/* the aerial's own answers wear a small satellite until the visitor confirms or changes them */
.opt.opt--aerial { position: relative; }
.opt.opt--aerial::after { content: "🛰️"; position: absolute; top: 5px; right: 7px; font-size: 12px; opacity: .85; }
.verifybox__facts { display: flex; flex-wrap: wrap; gap: 6px; margin: .45em 0 0 !important; }
.verifybox__facts span { background: #fff; border: 1px solid color-mix(in srgb, var(--sun) 40%, var(--line)); border-radius: 999px; padding: 3px 10px; font-size: 13.5px; color: var(--ink); font-weight: 600; }
/* the address notice, right under the field */
.fieldnotice { margin: 8px 2px 0; font-size: 13px; line-height: 1.45; color: var(--ink-soft); }
.fieldnotice a { color: inherit; text-decoration: underline; }
.fieldnotice[hidden] { display: none; }
/* the sun's legend, its NOW mark and the visitor's shadow */
.sunlegend__k { display: inline-flex; align-items: center; gap: 4px; margin-right: 10px; white-space: nowrap; }
.sunlegend__now { font-weight: 800; }
.mapLabel.sunnow { background: #FF8A00 !important; color: #1b1300 !important; font-weight: 800 !important; }
.mapLabel.sunshadow { background: rgba(10,26,42,.78) !important; font-style: italic; }
.mapLabel.equip { background: rgba(17,24,39,.9) !important; }
.kl__legend { position: absolute; left: 10px; bottom: 10px; z-index: 5; display: flex; flex-wrap: wrap; row-gap: 2px; max-width: calc(100% - 76px);
  background: rgba(10,26,42,.85); color: #fff; border-radius: 10px; padding: 6px 10px; font-size: 12.5px; }
.kl__legend[hidden] { display: none; }
/* + and − on the picture, and the short hint that fades */
.zoombar { position: absolute; right: 12px; top: 12px; z-index: 6; display: flex; flex-direction: column; gap: 6px; }   /* the top-right corner: clear of the dome's sunrise label, the scan chip and the legend */
.maptools { max-width: calc(100% - 96px); }   /* the six tools, opened, wrap clear of + and - */
.stage:has(#foundPic) .zoombar { display: none; }   /* the found picture is a still: + and - would zoom the hidden map */
.zoombar__b { width: 44px; height: 44px; border-radius: 12px; border: 1px solid rgba(12,42,67,.18); background: rgba(255,255,255,.95);
  color: var(--navy); font-size: 24px; font-weight: 800; line-height: 1; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.zoombar__b:focus-visible, .pumpview__b:focus-visible, .pumpzoom:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
.zoomhint { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 7; max-width: calc(100% - 130px); text-align: center; pointer-events: none;
  background: rgba(10,26,42,.9); color: #fff; border-radius: 999px; padding: 8px 14px; font-size: 13.5px; font-weight: 600; transition: opacity .9s ease; }
.zoomhint--out { opacity: 0; }
/* the pump's picture opens large: + and −, Escape or a tap outside closes it */
.pumpzoom { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.pumpzoom img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pumpzoom__ic { position: absolute; right: 6px; bottom: 6px; width: 28px; height: 28px; border-radius: 8px; background: rgba(10,26,42,.78); color: #fff;
  display: grid; place-items: center; font-size: 15px; }
.pumpview { position: fixed; inset: 0; z-index: 2147483000; background: rgba(6,16,26,.9); display: flex; flex-direction: column; }
.pumpview__scroll { flex: 1; overflow: auto; display: grid; place-items: center; padding: 16px; -webkit-overflow-scrolling: touch; }
.pumpview__img { max-width: none; height: auto; background: #fff; border-radius: 12px; }
.pumpview__bar { display: flex; justify-content: center; gap: 10px; padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px)); }
.pumpview__b { width: 52px; height: 48px; border-radius: 12px; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.12);
  color: #fff; font-size: 24px; font-weight: 800; cursor: pointer; }
.pumpview__x { margin-left: 18px; }
.pumpview__hint { position: absolute; left: 50%; top: 16px; transform: translateX(-50%); margin: 0; max-width: calc(100% - 24px); text-align: center; pointer-events: none;
  background: rgba(255,255,255,.95); color: var(--navy); border-radius: 999px; padding: 8px 14px; font-size: 14px; font-weight: 600; transition: opacity .9s ease; }
.pumpview__hint--out { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .zoomhint, .pumpview__hint { transition: none; } }

/* QF-09 (line 31016): at desktop widths the stage keeps one screen's height and stays in view beside a long step (Verify
   your pool, the quote). The live map centres the home, so the home, its sun path and NOW stay on screen while the visitor
   answers; stretched to the step's height, the stage put the home about 950 px down at 1440 x 900. Not in the embed: its
   frame grows with its content. Phones keep the 4:3 picture above the step. */
@media (min-width: 941px) {
  html:not(.embed) .stagecol { position: sticky; top: 78px; align-self: start; }
  html.srk-on:not(.embed) .stagecol { top: calc(var(--srk-top-h, 52px) + 12px); }
  html:not(.embed) .stagecol .stage:not(.stage--max) { flex: none; height: calc(100vh - 190px); min-height: 480px; max-height: 820px; }
}

/* QF-09 (line 31016): the kit card in a narrow step column (1440 px beside Sunny's pane, about 300 px) takes the phone's
   layout, a small photo beside the name and the price, so the name, the price and Buy stay inside the card ("See my quote"
   lands on it). The 168 px photo column left the text about 40 px. */
#panelHost { container-type: inline-size; }
@container (max-width: 520px) {
  .pumpcard { grid-template-columns: 84px 1fr; gap: 12px; }
  .pumpcard__img { width: 84px; }
  .pumpcard h3 { font-size: 18px; overflow-wrap: anywhere; }
}

/* QF-09 (line 31016): a phone's one column never grows past the screen. With 1fr (an automatic minimum) the Adjust state
   widened the stage to 372 px inside a 349 px card at 390, so + and - and the last tool were cut at the right edge (the
   served page did the same); with a zero minimum the column is the screen's, and nothing in it is wider. */
@media (max-width: 940px) { .appbody { grid-template-columns: minmax(0, 1fr); } }

/* ---- QF-10 (line 31112): the language menu, one truth on panels, Michael's sun line, "Verify your pool" with no pool,
   the current pump as the visitor's own pick and the well call card ---- */
/* a globe and the short code; the list names each language in its own name; 48 px targets; readable light and dark */
.langmenu { position: relative; display: inline-flex; }
.langmenu__btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 48px; min-height: 48px; padding: 0 12px;
  border: 1.5px solid var(--line); border-radius: 999px; background: #fff; color: var(--navy); font: 700 14px/1 var(--body); cursor: pointer; white-space: nowrap; }
.langmenu__btn:hover, .langmenu__btn:focus-visible { border-color: var(--sun-deep); outline: 0; box-shadow: var(--ring); }
.langmenu__globe { flex: none; }
.langmenu__list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 168px; max-width: calc(100vw - 20px); padding: 6px;
  display: flex; flex-direction: column; background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg, 0 12px 32px rgba(12,42,67,.18)); }
.langmenu__list[hidden] { display: none; }
.langmenu__item { display: flex; align-items: center; min-height: 48px; padding: 0 14px; border: 0; border-radius: 10px; background: transparent; color: inherit;
  font: 600 16px/1.2 var(--body); text-align: left; cursor: pointer; }
.langmenu__item:hover, .langmenu__item:focus-visible { background: color-mix(in srgb, var(--sun) 18%, #fff); outline: 2px solid var(--sun-deep); outline-offset: -2px; }
.langmenu__item[aria-checked="true"]::after { content: "✓"; margin-left: auto; padding-left: 12px; color: var(--sun-deep); font-weight: 800; }
@media (prefers-color-scheme: dark) {
  .langmenu__btn { background: #10283A; color: #F4EEE2; border-color: rgba(244,238,226,.38); }
  .langmenu__list { background: #10283A; color: #F4EEE2; border-color: rgba(244,238,226,.24); }
  .langmenu__item:hover, .langmenu__item:focus-visible { background: rgba(242,167,59,.22); }
  .langmenu__item[aria-checked="true"]::after { color: var(--sun); }
}
/* 375-390 px: the header never crowds; the logo mark goes before anything collides */
@media (max-width: 400px){
  .brand__mark { display: none; }
  .topbar__cta { gap: 8px; }
  .langmenu__btn { padding: 0 10px; }
}
/* Michael's sun line on the quote card: the headline over its subline */
.sunline { display: flex; flex-direction: column; gap: 2px; margin: 10px 0 0; padding: 10px 12px; border-radius: 12px;
  background: color-mix(in srgb, var(--sun) 12%, #fff); border-left: 4px solid var(--sun-deep); text-align: left; }
.sunline__h { font-size: 15.5px; color: var(--navy); }
.sunline__p { font-size: 14px; color: var(--ink-soft, #43555F); }
/* "Verify your pool" when the aerial spots no pool: said plainly */
.verifybox--none { border-color: var(--sun-deep); }
/* the current pump: asked calmly until the visitor picks (one line and the chips) */
.bill__ask { margin: 12px 0 8px; font-weight: 650; color: var(--ink); }
.pumpchips { display: flex; flex-wrap: wrap; gap: 6px; }
.pumpchips .btn { min-height: 44px; }
.pumpchips .btn[aria-pressed="true"] { background: var(--sun, #F2A73B); border-color: var(--sun, #F2A73B); color: var(--navy, #0C2A43); }
.pumpnote { display: block; margin-top: 6px; color: #fff; font-weight: 650; }
.pumpnote[hidden] { display: none; }
/* the Well pump tab's one call card */
.wellcall { margin-top: 14px; padding: 16px; border-radius: 16px; border: 1.5px solid var(--line); background: #fff; }
.wellcall__h { font-size: 18px; font-weight: 700; color: var(--navy); margin: 0 0 12px; }
.wellcall__h a { color: inherit; white-space: nowrap; }
.wellcall__acts { display: flex; flex-wrap: wrap; gap: 10px; }
#wellCall[hidden], .searchcard--well #addressForm, .searchcard--well .hint, .searchcard--well .fieldnotice { display: none; }