:root {
  --blue: #1475cc;
  --blue-rgb: 20, 117, 204;
  --fill: rgba(20, 117, 204, 0.2);
  --fill-hover: rgba(20, 117, 204, 0.28);
  --track: rgba(20, 117, 204, 0.25);
  --ink: #04080f;
  --muted: rgba(4, 8, 15, 0.8);
  --error: #d33147;
  --font: "Work Sans", "Helvetica Neue", Arial, sans-serif;
  --radius: 6px;
  --control: 64px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--font);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

button,
input {
  font-family: inherit;
}

button {
  cursor: pointer;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--track);
  z-index: 5;
}

.progress__fill {
  height: 100%;
  background: var(--blue);
  width: 0;
  transition: width 0.25s ease;
}

.stage {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 36px 0 32px;
}

.wrap {
  width: min(600px, calc(100% - 40px));
  margin: 0 auto;
}

.step h1,
.step p {
  margin: 0;
}

.stage.is-leaving {
  animation: fadeOutOpacity 0.15s ease-in forwards;
  pointer-events: none;
}

@keyframes fadeOutOpacity {
  from { opacity: 1; }
  to { opacity: 0; }
}

.step h1 {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: normal;
  color: var(--ink);
  text-align: center;
  padding-bottom: 10px;
}

.step h1.is-intro {
  font-size: 24px;
}

.step h1.is-regular {
  font-weight: 400;
}

.align-left .prose,
.align-left .prose p {
  text-align: left;
}

.sub {
  margin: 0;
  padding-bottom: 10px;
  font-size: 18px;
  line-height: 1.3;
  color: var(--ink);
  text-align: center;
}

.sub p + p {
  margin-top: 1.3em;
}

p.help {
  margin: 0;
  padding-bottom: 10px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--muted);
  text-align: center;
  white-space: pre-line;
}

.help--md {
  font-size: 13.5px;
  line-height: 1.3;
  margin-top: 0;
}

p.question {
  margin: 35px 0 0;
  padding-bottom: 10px;
  font-size: 16.5px;
  line-height: 1.3;
  color: var(--muted);
  text-align: center;
}

/* Energy is a headline block plus a question block, centred together
   with the original's 80px / 30px paddings and a 40px trailing spacer.
   The extra question margin and the wrap offset reproduce that stack
   inside our single centred column (measured at 390x844). */
@media (max-width: 529px) {
  .stage:has([data-step="energy"]) .wrap {
    margin-top: 26px;
  }
}

/* A single question is padded 80px on the top and the bottom, then
   centred. The extra 5px under the answers pulls that block 4.5px
   above where our stage padding puts it. Energy uses a different stack. */
.stage:has(.is-single) .wrap {
  margin-top: -9px;
}

@media (max-width: 529px) {
  .step[data-step="energy"] p.question {
    margin-top: 45px;
  }
}

@media (min-width: 530px) {
  .step[data-step="energy"] p.question {
    margin-top: 45px;
  }

  .stage:has([data-step="energy"]) .wrap {
    margin-top: 86px;
  }
}

.stack {
  width: 100%;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.choices {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.choice {
  appearance: none;
  width: 100%;
  min-height: 65px;
  padding: 20px 50px;
  border: 1px solid var(--blue);
  border-radius: var(--radius);
  background: var(--fill);
  color: var(--blue);
  font-size: 18px;
  font-weight: 400;
  line-height: 23.4px;
  text-align: center;
}

.step[data-step="housing"] .choice {
  font-size: 20px;
  line-height: 26px;
  min-height: 68px;
}

.choice--left {
  text-align: left;
  padding: 20px 50px 20px 20px;
}

.choice {
  position: relative;
  overflow: hidden;
  touch-action: manipulation;
  transition: transform 0.6s ease-out, opacity 0.6s ease-out, visibility 0.6s ease-out, background 0.6s ease-out, border-color 0.6s ease-out, color 0.6s ease-out, box-shadow 0.3s ease-in-out;
}

.choice:hover:not(.is-selected),
.choice:focus-visible:not(.is-selected) {
  background: rgba(44, 131, 209, 0.28);
}

.choice:focus {
  outline: none;
}

.choice:focus-visible {
  box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.25rem rgba(20, 117, 204, 0.2);
}

.choice:active {
  outline: none;
}

.choice__mark {
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  color: var(--blue);
}

.choice.is-selected .choice__mark {
  opacity: 1;
}

.choice__mark svg {
  display: block;
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.next {
  appearance: none;
  display: block;
  margin: 42px auto 0;
  min-width: 158px;
  height: 46px;
  padding: 0 40px;
  border: 1px solid var(--blue);
  border-radius: var(--radius);
  background: var(--fill);
  color: var(--blue);
  font-size: 15px;
  line-height: 15px;
  opacity: 1;
  transition: transform 0.6s ease-out, opacity 0.6s ease-out, visibility 0.6s ease-out, background 0.6s ease-out, border-color 0.6s ease-out, color 0.6s ease-out, padding 0.6s ease-out, box-shadow 0.6s ease-in-out;
}

@media (any-hover: hover) {
  .next:hover:not(.is-inactive) {
    background: rgba(44, 131, 209, 0.28);
    padding-left: 52px;
    padding-right: 52px;
  }
}

.next:focus {
  outline: 1px solid rgba(20, 117, 204, 0.2);
  outline-offset: 2px;
}

.next:focus:not(.is-inactive) {
  padding-left: 52px;
  padding-right: 52px;
}

.next:active {
  box-shadow: none;
}

.next.is-inactive {
  opacity: 0.3;
}

.next.is-inactive:hover {
  background: var(--fill);
}

.field {
  position: relative;
  margin-top: 11px;
}

.field input {
  width: 100%;
  height: 66px;
  padding: 20px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--fill);
  color: var(--blue);
  font-size: 18px;
  line-height: 1.2;
  outline: none;
}

.field input:focus {
  border-color: transparent;
}

.field label {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--blue);
  font-size: 18px;
  line-height: 1;
  pointer-events: none;
  transition: top 0.12s ease, transform 0.12s ease, font-size 0.12s ease;
}

.field label .mini {
  display: none;
}

.field input:focus + label,
.field input:not(:placeholder-shown) + label {
  top: 10px;
  transform: none;
  font-size: 11px;
}

.field input:focus + label .full,
.field input:not(:placeholder-shown) + label .full {
  display: none;
}

.field input:focus + label .mini,
.field input:not(:placeholder-shown) + label .mini {
  display: inline;
}

.field.is-invalid input,
.field.is-invalid label {
  color: var(--error);
}

.field.always-up input {
  padding: 26px 20px 14px;
}

.field.always-up label {
  top: 10px;
  transform: none;
  font-size: 11px;
}

.field.always-up label .full {
  display: none;
}

.field.always-up label .mini {
  display: inline;
}

.num input {
  padding: 20px 36px 20px 20px;
  font-size: 18px;
  line-height: 27px;
  border-radius: 4px;
}

.num input.is-bad {
  color: var(--error);
}

.num input::-webkit-inner-spin-button,
.num input::-webkit-outer-spin-button {
  opacity: 1;
  height: 28px;
  margin-right: 6px;
}

.phone input,
.phone label {
  padding-left: 0;
}

.phone label {
  left: 71px;
}

.phone input {
  padding-left: 71px;
  padding-right: 18px;
}

.phone__prefix {
  position: absolute;
  left: 21px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 7px;
  z-index: 1;
  pointer-events: none;
}

.phone__prefix img {
  display: block;
  width: 20px;
  height: 15px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.phone__chev {
  display: block;
  width: 18px;
  height: 18px;
  line-height: 0;
  color: var(--blue);
}

.phone__chev svg {
  display: block;
  width: 18px;
  height: 18px;
}

p.phone-lead {
  margin: 0 auto;
  padding-bottom: 50px;
  font-size: 20px;
  font-weight: 400;
  line-height: 26px;
  color: var(--muted);
  text-align: center;
}

@media (min-width: 530px) {
  .phone-lead .phone-break {
    display: none;
  }

  p.phone-lead {
    padding-bottom: 12px;
  }

  .step[data-step="phone"] .legal {
    margin-top: 12px;
  }

  .step[data-step="phone"] .next {
    margin-top: 42px;
  }

  .stage:has([data-step="phone"]) .wrap {
    margin-top: 0;
  }
}

.step[data-step="phone"] .field {
  margin-top: 0;
}

.step[data-step="phone"] .legal {
  margin-top: 36px;
}

.step[data-step="phone"] .next {
  margin-top: 35px;
}

/* Phone content is taller than a choice step. A negative margin pulls
   the centred block up so the heading matches the original at 390x844.
   The 530px rule above resets this on wider screens. */
@media (max-width: 529px) {
  .stage:has([data-step="phone"]) .wrap {
    margin-top: -4px;
  }
}

.phone-lead strong {
  font-weight: 700;
}

.legal {
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--muted);
  text-align: center;
}

.legal p + p {
  margin-top: 12px;
}

.names .field + .field {
  margin-top: 12px;
}

.error {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 3;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--error);
  border-radius: 4px;
  color: var(--error);
  font-size: 15px;
  line-height: 1.35;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.16);
}

.error::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 22px;
  width: 10px;
  height: 10px;
  background: #fff;
  border-left: 1px solid var(--error);
  border-top: 1px solid var(--error);
  transform: rotate(45deg);
}

.error__icon {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border: 1.5px solid var(--error);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  font-style: normal;
  line-height: 1;
}

.anchor {
  position: relative;
}

.prose {
  color: var(--muted);
  font-size: 18px;
  line-height: 1.4;
  text-align: center;
}

.prose--left {
  text-align: left;
}

.prose h1,
.thanks h1,
.end h1 {
  color: var(--muted);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.25;
  padding-bottom: 10px;
  margin-bottom: 8px;
}

.news h1 {
  color: var(--ink);
  text-align: left;
  margin: 0;
}

p.lead {
  text-align: left;
  font-size: 13.5px;
  line-height: 1.3;
  color: var(--ink);
  margin: 0;
  padding-bottom: 10px;
}

p.note {
  text-align: left;
  font-size: 12px;
  line-height: 1.3;
  color: var(--muted);
  margin: 51px 0 0;
}

.stage:has(.news) .wrap {
  margin-top: 8px;
}

.estimate .next {
  margin-top: 46px;
}

.estimate p.lead {
  text-align: center;
  font-size: 15px;
  line-height: 1.3;
  padding-bottom: 10px;
}

.end h1 {
  font-size: 30px;
  margin-bottom: 16px;
}

.end,
.thanks {
  text-align: center;
}

.end p {
  font-size: 18px;
  line-height: 1.35;
  color: var(--muted);
  text-align: center;
}

.thanks {
  color: var(--muted);
}

.thanks h1 {
  padding-bottom: 0;
  margin-bottom: 0;
}

.thanks p {
  margin-top: 49px;
  font-size: 18px;
  line-height: 1.35;
  color: var(--muted);
  text-align: center;
}

.thanks .warn {
  margin-top: 41px;
}

.thanks p:last-of-type {
  margin-top: 37px;
}

.stage:has(.thanks) .wrap {
  margin-top: 26px;
}

.stage:has([data-step="consent"]) .wrap {
  margin-top: -7px;
}

.stage:has(.end) .wrap {
  margin-top: -9px;
}

.stage:has([data-step="consent"]) .next {
  margin-top: 35px;
}

.consent__title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--muted);
  text-align: left;
}

p.consent__body {
  margin-top: 12px;
  font-size: 18px;
  line-height: 1.35;
  color: var(--muted);
  text-align: left;
}

p.consent__legal {
  margin-top: 41px;
  font-size: 14px;
  line-height: 1.35;
  color: var(--muted);
  text-align: left;
}

.consent__legal a {
  color: inherit;
  text-underline-offset: 2px;
}

.check {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 45px;
  cursor: pointer;
  user-select: none;
}

.check input {
  position: absolute;
  opacity: 0;
  width: 30px;
  height: 30px;
  margin: 0;
}

.check__box {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 4px;
  background: var(--fill);
  box-shadow: rgba(0, 0, 0, 0.25) 0 2px 4px 0 inset;
  flex: none;
}

.check input:focus-visible + .check__box {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.check input:checked + .check__box::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 12px;
  border: solid var(--blue);
  border-width: 0 1.5px 1.5px 0;
  transform: translate(-50%, -60%) rotate(45deg);
}

.check__label {
  font-size: 16px;
  color: var(--ink);
}

.check.is-invalid .check__label {
  color: var(--error);
}

p.send-error {
  margin: 16px auto 0;
  max-width: 398px;
  color: var(--error);
  font-size: 14px;
  text-align: center;
}

/* involve.me lays short answers in columns once the app container
   is wider than 529px (container query on app-main). Knows is a
   3-column track with two buttons centred in it; people is 2×2.
   Below that both stay a single max-400px stack, same as mobile. */
@media (min-width: 530px) {
  .step[data-step="knows"] .choices,
  .step[data-step="kwh"] .choices,
  .step[data-step="power"] .choices,
  .step[data-step="bill"] .choices,
  .step[data-step="provider"] .choices,
  .step[data-step="people"] .choices {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
    width: calc(100% + 10px);
    max-width: none;
    margin: 5px -5px 0;
  }

  .step[data-step="knows"] .choice {
    flex: 0 0 calc(33.3333% - 10px);
    width: calc(33.3333% - 10px);
    max-width: calc(33.3333% - 10px);
    margin: 5px;
  }

  .step[data-step="kwh"] .choice,
  .step[data-step="power"] .choice,
  .step[data-step="bill"] .choice,
  .step[data-step="provider"] .choice,
  .step[data-step="people"] .choice {
    flex: 0 0 calc(50% - 10px);
    width: calc(50% - 10px);
    max-width: 400px;
    margin: 5px;
  }
}

@media (min-width: 800px) {
  .step h1 {
    font-size: 28px;
  }

  .step h1.is-intro {
    font-size: 32px;
  }

  .sub {
    font-size: 24px;
  }

  p.question {
    font-size: 22px;
  }

  p.help {
    font-size: 16px;
  }

  .help--md {
    font-size: 18px;
  }

  .estimate p.lead {
    font-size: 20px;
  }

  p.note,
  p.lead {
    font-size: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .progress__fill,
  .field label,
  .next,
  .choice,
  .stage.is-leaving {
    transition: none;
    animation: none;
  }
}

.step.loader {
  width: 100%;
  text-align: left;
}

.step.loader h1,
.step.loader p.lead,
.step.loader p.note {
  text-align: left;
}

.step.loader h1 {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
}

.step.loader p.lead {
  font-size: 14px;
  font-weight: 400;
  padding-bottom: 8px;
}

.step.loader p.note {
  margin-top: 8px;
  font-size: 12px;
}

.loader-gif {
  display: block;
  width: 52px;
  height: 52px;
  margin: 28px auto 12px;
}

.countdown {
  margin: 0;
  text-align: center;
  color: #1475cc;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}

.step.news.is-center h1,
.step.news.is-center p.lead,
.step.news.is-center .copy {
  text-align: center;
}

.step.news .copy {
  margin: 0 0 12px;
  line-height: 1.35;
  text-align: left;
}

.phone-copy {
  margin: 0 0 16px;
  line-height: 1.35;
}

.legal-rich {
  font-size: 13px;
  text-align: center;
}

.step.is-plain .consent__title,
.step.is-plain .consent__legal {
  font-size: 18px;
  line-height: 1.35;
}

.step.is-plain .consent__legal {
  margin-top: 0;
  font-weight: 400;
}

.thanks p.thanks-line {
  margin-top: 18px;
  font-size: 18px;
  line-height: 1.35;
  text-align: center;
  font-weight: 400;
}

.thanks p.thanks-line strong {
  font-weight: 700;
}