@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Manrope:wght@400;500;600;650;700;750;800&display=swap');
:root {
  color-scheme:light;
  --forest:#103e32;
  --forest-deep:#092e25;
  --sage:#eaf0e9;
  --ink:#203b31;
  --muted:#7a857e;
  --gold:#e7bf83;
  --line:#e2e7df;
  --ease:cubic-bezier(.22,1,.36,1)
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  color:var(--ink);
  font-family:'DM Sans',sans-serif;
  background:#f3f4ee;
  background-image:radial-gradient(ellipse at 5% 30%,#e4eadf 0,transparent 50%),radial-gradient(ellipse at 100% 100%,#e7eadf 0,transparent 45%);
  min-height:100svh;
  padding:0 40px;
  -webkit-font-smoothing:antialiased
}
button,input {
  font:inherit
}
button,a,label,input {
  -webkit-tap-highlight-color:transparent
}
button {
  cursor:pointer
}
button:disabled {
  cursor:wait
}
button:focus-visible,a:focus-visible,input:focus-visible {
  outline:3px solid #b68d50;
  outline-offset:5px
}
[hidden] {
  display:none!important
}
.icon-library {
  position:absolute;
  width:0;
  height:0;
  overflow:hidden
}
.icon {
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.65;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex-shrink:0
}
.site-header {
  max-width:1160px;
  margin:auto;
  height:116px;
  display:flex;
  align-items:center;
  justify-content:space-between
}
.brand img {
  display:block;
  width:211px;
  height:auto
}
.header-note {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:12px;
  color:#69776b
}
.status-dot {
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#769870;
  box-shadow:0 0 0 4px #76987015
}
.experience {
  max-width:1160px;
  margin:0 auto;
  display:grid;
  grid-template-columns:.94fr 1.06fr;
  min-height:690px;
  border:1px solid #fff;
  border-radius:26px;
  background:#fcfcf9;
  box-shadow:0 30px 70px -40px #12362950,0 4px 15px #12362904;
  overflow:hidden;
  animation:arrival .9s var(--ease) both
}
.story {
  background:var(--forest);
  background-image:radial-gradient(ellipse at 15% 5%,#275642 0,transparent 60%),linear-gradient(145deg,transparent,#082c23);
  padding:37px 40px 30px;
  color:#f3f5ed;
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column
}
.story:after {
  content:'';
  position:absolute;
  inset:0;
  opacity:.035;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.6' d='M0 0h180v180H0z'/%3E%3C/svg%3E")
}
.story-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  z-index:1
}
.pill {
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:9px;
  font-weight:600;
  letter-spacing:1.4px;
  border:1px solid #b5cab82b;
  border-radius:30px;
  padding:9px 12px;
  color:#d4e0cf
}
.pill .icon {
  width:15px;
  height:15px;
  color:var(--gold)
}
.edition {
  font-size:9px;
  letter-spacing:1.5px;
  color:#90ab97
}
.story h1 {
  font-family:'Manrope',sans-serif;
  font-weight:500;
  font-size:clamp(40px,4.3vw,59px);
  line-height:1.14;
  letter-spacing:-2.9px;
  margin:42px 0 20px;
  z-index:1
}
.story h1 em {
  font-family:Georgia,serif;
  color:var(--gold);
  font-weight:400;
  letter-spacing:-2px
}
.story-description {
  color:#b6c8b9;
  line-height:1.8;
  font-size:14px;
  margin:0;
  z-index:1
}
.solar-scene {
  height:253px;
  position:relative;
  margin:0 -25px 10px;
  flex:1;
  min-height:230px
}
.solar-house {
  position:absolute;
  width:100%;
  max-height:250px;
  bottom:10px;
  left:0;
  animation:levitate 7s ease-in-out infinite;
  z-index:1
}
.orbit {
  position:absolute;
  border:1px solid #a2bd8f12;
  border-radius:50%;
  width:320px;
  height:320px;
  left:50%;
  top:60%;
  transform:translate(-50%,-50%)
}
.orbit-two {
  width:440px;
  height:440px
}
.solar-sun {
  width:46px;
  height:46px;
  position:absolute;
  right:40px;
  top:4px;
  color:var(--gold);
  display:grid;
  place-items:center;
  background:#d9ba7f09;
  border:1px solid #d9ba7f2e;
  border-radius:50%;
  box-shadow:0 0 45px #d9ba7f15
}
.solar-sun .icon {
  width:24px;
  height:24px;
  animation:solar-turn 45s linear infinite
}
.energy-path {
  animation:energy 2.5s linear infinite
}
.scene-caption {
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  white-space:nowrap;
  font-size:10px;
  letter-spacing:.3px;
  color:#8fae97;
  display:flex;
  gap:9px;
  align-items:center;
  z-index:2
}
.scene-caption .status-dot {
  background:var(--gold);
  width:4px;
  height:4px
}
.story-bottom {
  border-top:1px solid #b8ccba20;
  padding-top:24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:11px;
  line-height:1.8;
  color:#90ad9a;
  z-index:1
}
.story-bottom strong {
  font-weight:500;
  color:#d1dfd1
}
.round-arrow {
  height:38px;
  width:38px;
  border:1px solid #c5d6c236;
  border-radius:50%;
  display:grid;
  place-items:center
}
.round-arrow .icon {
  width:17px;
  transform:rotate(-40deg)
}
.form-panel {
  padding:38px 48px 28px;
  min-width:0;
  display:flex;
  flex-direction:column
}
.progress-heading {
  display:flex;
  justify-content:space-between;
  font-size:11px;
  margin-bottom:11px;
  color:#849085
}
.progress {
  display:flex;
  gap:6px;
  margin-bottom:33px
}
.progress-segment {
  height:4px;
  background:#e9ece5;
  flex:1;
  overflow:hidden;
  border-radius:6px
}
.progress-segment:before {
  content:'';
  display:block;
  height:100%;
  background:var(--forest);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .6s var(--ease)
}
.progress-segment.complete:before {
  transform:scaleX(1)
}
.progress-segment.current:before {
  background:#799278;
  transform:scaleX(1)
}
#solarForm {
  display:flex;
  flex:1;
  flex-direction:column
}
.step-stage {
  position:relative;
  flex:1;
  min-height:368px
}
.step {
  width:100%;
  padding-bottom:20px
}
.step-icon {
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border:1px solid #e5eadd;
  background:#f0f3ea;
  border-radius:13px;
  color:#42634e;
  margin-bottom:19px
}
.step h2 {
  font-family:'Manrope',sans-serif;
  font-weight:650;
  font-size:29px;
  line-height:1.25;
  letter-spacing:-1.05px;
  margin:0 0 12px;
  outline:none
}
.bill-card {
  padding:23px 23px 18px;
  background:linear-gradient(135deg,#f1f4ed,#f7f8f1);
  border:1px solid #e0e7d9;
  border-radius:18px;
  text-align:center
}
.amount-control {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin:20px 0
}
.amount-button {
  height:42px;
  width:42px;
  flex:0 0 42px;
  border-radius:50%;
  border:1px solid #d7e0d2;
  background:#fffefa;
  color:var(--forest);
  font-size:24px;
  box-shadow:0 3px 5px #1a3b2010;
  transition:transform .25s var(--ease),background .2s,box-shadow .2s
}
.amount-button:hover {
  background:var(--forest);
  color:#fff;
  box-shadow:0 5px 12px #123d3225;
  transform:translateY(-2px)
}
.amount-button:active {
  transform:scale(.9)
}
.amount-button:disabled {
  cursor:default;
  opacity:.35
}
.amount-value {
  display:flex;
  gap:6px;
  align-items:baseline;
  justify-content:center;
  min-width:0
}
.amount-value>span {
  font-size:17px;
  color:#82907e
}
.amount-value input {
  color:var(--forest);
  font-family:'Manrope',sans-serif;
  font-weight:650;
  font-size:38px;
  letter-spacing:-1.7px;
  width:7.5ch;
  min-width:0;
  max-width:100%;
  border:0;
  background:transparent;
  padding:0;
  text-align:center;
  font-variant-numeric:tabular-nums;
  border-radius:5px
}
.amount-value input:focus {
  outline:2px solid #a4b59c;
  outline-offset:4px
}
.options {
  display:flex;
  flex-direction:column;
  gap:10px;
  border:0;
  padding:0;
  margin:0
}
.option {
  position:relative;
  display:flex;
  align-items:center;
  gap:13px;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  cursor:pointer;
  min-height:72px;
  transition:background .2s,border-color .2s,box-shadow .25s,transform .3s var(--ease)
}
.option input {
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
  left:20px;
  top:50%
}
.option:hover {
  border-color:#a5b69f;
  transform:translateY(-2px);
  box-shadow:0 6px 15px #183d2b08
}
.option:has(input:focus-visible) {
  outline:3px solid #b68d50;
  outline-offset:3px
}
.option:has(input:checked) {
  background:#edf3e9;
  border-color:#587850;
  box-shadow:0 0 0 1px #58785018
}
.option-icon {
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:#f3f5ee;
  color:#6f8466;
  flex-shrink:0;
  transition:background .2s,color .2s
}
.option:has(input:checked) .option-icon {
  background:var(--forest);
  color:#e0e8d8
}
.option-icon .icon {
  width:19px;
  height:19px
}
.option-text {
  font-weight:550;
  font-size:13px;
  line-height:1.45;
  flex:1
}
.option-check {
  width:18px;
  height:18px;
  border:1px solid #d8dfd3;
  border-radius:50%;
  flex-shrink:0;
  transition:all .25s;
  display:grid;
  place-items:center
}
.option:has(input:checked) .option-check {
  border-color:var(--forest);
  background:var(--forest)
}
.option:has(input:checked) .option-check:after {
  content:'';
  height:7px;
  width:4px;
  border:solid white;
  border-width:0 1.5px 1.5px 0;
  transform:rotate(45deg) translate(-1px,-1px);
  animation:check-in .3s var(--ease)
}
.option.compact {
  min-height:63px
}
.field {
  margin:34px 0
}
.field>label {
  display:block;
  font-size:12px;
  font-weight:550;
  margin-bottom:10px
}
.field>input {
  width:100%;
  height:59px;
  border:1px solid #dce3d5;
  border-radius:12px;
  background:#fff;
  padding:0 17px;
  color:var(--forest);
  font-size:16px;
  transition:border-color .2s,box-shadow .2s
}
.field>input::placeholder {
  color:#a5ada0;
  font-size:14px
}
.field>input:focus {
  outline:none;
  border-color:#6d8960;
  box-shadow:0 0 0 4px #77966b15
}
.field>input[aria-invalid=true] {
  border-color:#b3593d
}
.field-error {
  font-size:12px;
  line-height:1.5;
  color:#a44831;
  margin:10px 0
}
.form-actions {
  padding-top:14px
}
.next-button {
  position:relative;
  overflow:hidden;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:18px;
  width:100%;
  min-height:56px;
  border:1px solid #174b3a;
  border-radius:12px;
  background:linear-gradient(125deg,#1c503b,var(--forest-deep));
  color:#f7f9f0;
  box-shadow:0 6px 14px #133b3224,inset 0 1px 0 #ffffff12;
  font-size:13px;
  font-weight:550;
  transition:transform .3s var(--ease),box-shadow .3s,filter .2s
}
.next-button:before {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(115deg,transparent 20%,#ffffff14 50%,transparent 80%);
  transform:translateX(-110%);
  transition:transform .7s
}
.next-button:hover:not(:disabled) {
  transform:translateY(-2px);
  box-shadow:0 9px 22px #133b3230
}
.next-button:hover:before {
  transform:translateX(110%)
}
.next-button:active:not(:disabled) {
  transform:scale(.985)
}
.next-button>.icon {
  width:18px;
  height:18px;
  transition:transform .3s var(--ease)
}
.next-button:hover>.icon {
  transform:translateX(4px)
}
.next-button:disabled {
  opacity:.7
}
.action-meta {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-height:47px
}
.privacy {
  display:flex;
  align-items:center;
  gap:5px;
  color:#919b8c;
  font-size:9px;
  margin-left:auto
}
.privacy .icon {
  width:12px;
  height:12px
}
.back-button {
  display:flex;
  align-items:center;
  gap:5px;
  min-height:42px;
  border:none;
  background:transparent;
  padding:0 5px 0 0;
  color:#7e8978;
  font-size:11px
}
.back-button .icon {
  width:13px;
  height:13px;
  transform:rotate(180deg)
}
.back-button:hover {
  color:var(--forest)
}
.site-footer {
  max-width:1160px;
  margin:25px auto;
  display:flex;
  justify-content:space-between;
  font-size:9px;
  color:#96a18f;
  letter-spacing:.5px
}
.site-footer>span:first-child {
  letter-spacing:1.6px;
  font-size:8px
}
.spinner {
  height:18px;
  width:18px;
  border:2px solid #ffffff40;
  border-top-color:#fff;
  border-radius:50%;
  animation:solar-turn .8s linear infinite
}
.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
}
.step.entering .option {
  animation:option-in .55s var(--ease) both
}
.step.entering .option:nth-of-type(2) {
  animation-delay:55ms
}
.step.entering .option:nth-of-type(3) {
  animation-delay:110ms
}
@keyframes arrival {
  from {
    opacity:0;
    transform:translateY(20px)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }
}
@keyframes levitate {
  50% {
    transform:translateY(-8px)
  }
}
@keyframes solar-turn {
  to {
    transform:rotate(360deg)
  }
}
@keyframes energy {
  to {
    stroke-dashoffset:-44
  }
}
@keyframes option-in {
  from {
    opacity:0;
    transform:translateY(12px) scale(.98)
  }
  to {
    opacity:1;
    transform:none
  }
}
@keyframes check-in {
  from {
    opacity:0;
    scale:.5
  }
  to {
    opacity:1;
    scale:1
  }
}
@media(min-width:1500px) {
  .site-header {
    height:140px
  }
  .experience {
    min-height:730px
  }
  .story {
    padding:43px
  }
  .form-panel {
    padding:43px 54px 32px
  }
  .story h1 {
    margin-top:50px
  }
}
@media(max-width:1050px) {
  body {
    padding:0 24px
  }
  .story {
    padding:30px
  }
  .form-panel {
    padding:32px
  }
  .story h1 {
    font-size:47px
  }
  .edition {
    display:none
  }
  .step h2 {
    font-size:27px
  }
  .amount-value input {
    font-size:32px
  }
  .bill-card {
    padding:22px 15px 18px
  }
}
@media(max-width:760px) {
  body {
    padding:0 18px
  }
  .site-header {
    height:91px;
    max-width:480px
  }
  .brand img {
    width:180px
  }
  .header-note {
    font-size:0
  }
  .header-note .status-dot {
    width:7px;
    height:7px
  }
  .experience {
    display:block;
    max-width:480px;
    min-height:0;
    border-radius:22px;
    overflow:hidden
  }
  .story {
    padding:23px 25px 25px;
    display:block
  }
  .story-top {
    display:none
  }
  .story h1 {
    font-size:27px;
    line-height:1.25;
    letter-spacing:-1px;
    margin:0;
    max-width:290px;
    position:relative
  }
  .story h1 br {
    display:none
  }
  .story h1 em {
    display:block;
    letter-spacing:-.5px
  }
  .story-description {
    font-size:10px;
    line-height:1.5;
    margin-top:9px;
    max-width:240px
  }
  .story-description br {
    display:none
  }
  .solar-scene {
    position:absolute;
    right:-56px;
    top:-24px;
    height:190px;
    width:225px;
    min-height:0;
    opacity:.42;
    pointer-events:none
  }
  .solar-house {
    height:150px;
    bottom:-22px
  }
  .solar-sun {
    top:32px;
    right:89px;
    width:32px;
    height:32px
  }
  .solar-sun .icon {
    width:19px;
    height:19px
  }
  .orbit {
    width:170px;
    height:170px
  }
  .orbit-two {
    width:230px;
    height:230px
  }
  .scene-caption,.story-bottom {
    display:none
  }
  .form-panel {
    padding:25px 25px 16px
  }
  .progress {
    margin-bottom:25px
  }
  .step-stage {
    min-height:0
  }
  .step-icon {
    width:35px;
    height:35px;
    border-radius:11px;
    margin-bottom:15px
  }
  .step-icon .icon {
    width:19px;
    height:19px
  }
  .step h2 {
    font-size:26px;
    letter-spacing:-.9px
  }
  .bill-card {
    padding:22px 17px 17px
  }
  .amount-value input {
    font-size:35px
  }
  .amount-control {
    margin:21px 0
  }
  .step {
    padding-bottom:7px
  }
  .form-actions {
    padding-top:22px
  }
  .next-button {
    min-height:54px;
    font-size:12px
  }
  .privacy {
    font-size:8px
  }
  .site-footer {
    max-width:480px;
    margin:19px auto 23px;
    font-size:8px;
    gap:15px
  }
  .site-footer>span:first-child {
    font-size:7px;
    letter-spacing:1px
  }
  .option {
    padding:13px;
    min-height:72px
  }
  .option-text {
    font-size:12px
  }
  .field {
    margin:28px 0 36px
  }
}
@media(max-width:370px) {
  body {
    padding:0 12px
  }
  .form-panel {
    padding:23px 19px 13px
  }
  .amount-value input {
    font-size:30px
  }
  .amount-button {
    width:37px;
    height:37px;
    flex-basis:37px
  }
  .step h2 {
    font-size:24px
  }
  .story h1 {
    font-size:25px
  }
}
.terminal-icon {
  background:#f8eee8;
  color:#a44831;
  border-color:#e8cec1;
  font-size:24px;
  font-weight:600;
}
.terminal-message {
  margin-top:24px;
  padding:20px;
  border:1px solid #e8cec1;
  border-radius:16px;
  background:#fcf5ef;
  color:#874a37;
  font-size:14px;
  line-height:1.7;
}
.terminal-message p { margin:0; }
.terminal-message p + p { margin-top:12px; font-weight:600; }
.has-floating-action {
  padding-bottom:110px;
}
.floating-actions {
  position:fixed;
  bottom:max(16px, env(safe-area-inset-bottom));
  z-index:20;
  padding:9px;
  border:1px solid #ffffffb3;
  border-radius:20px;
  background:#f5f7f0e8;
  backdrop-filter:blur(16px);
  box-shadow:0 10px 35px #12362926;
}
.floating-actions .next-button {
  min-height:56px;
}
.amount-button {
  position:relative;
}
.amount-button::after {
  content:'';
  position:absolute;
  inset:-1px;
  border:1px solid #729168;
  border-radius:50%;
  opacity:0;
  pointer-events:none;
}
.amount-button:hover:not(:disabled)::after {
  animation:amount-ripple 1.2s ease-out infinite;
}
@keyframes amount-ripple {
  from { transform:scale(1); opacity:.55; }
  to { transform:scale(1.5); opacity:0; }
}
.phone-fields {
  display:grid;
  grid-template-columns:60px 65px minmax(0,1fr);
  gap:10px;
}
.phone-part {
  min-width:0;
}
.phone-part label {
  display:block;
  font-size:12px;
  font-weight:550;
  margin-bottom:10px;
}
.phone-part input {
  width:100%;
  min-width:0;
  height:59px;
  padding:0 12px;
  border:1px solid #dce3d5;
  border-radius:12px;
  background:#fff;
  color:var(--forest);
  font-size:16px;
  font-variant-numeric:tabular-nums;
}
.phone-part input:focus {
  outline:none;
  border-color:#6d8960;
  box-shadow:0 0 0 4px #77966b15;
}
.phone-part input::placeholder { color:#a5ada0; }
.phone-part input[readonly] {
  background:#edf1e8;
  color:#6d7d65;
  cursor:default;
  text-align:center;
}
.phone-part input[aria-invalid=true] { border-color:#b3593d; }
@media(max-width:370px) {
  .phone-fields { grid-template-columns:47px 49px minmax(0,1fr); gap:7px; }
  .phone-part input { padding:0 9px; }
}
/* Clear response controls and real project references. */
.experience {
  grid-template-areas:"story form" "proof form";
  grid-template-rows:auto 1fr;
}
.story {
  grid-area:story;
  padding:32px 32px 26px;
}
.story h1 {
  font-size:44px;
  line-height:1.16;
  letter-spacing:-1.9px;
  margin:26px 0 14px;
  max-width:410px;
}
.story h1 em { display:block; }
.story-description { font-size:14px; line-height:1.6; }
.company-highlights {
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-top:24px;
  padding-top:22px;
  border-top:1px solid #ffffff26;
}
.company-stat { display:flex; flex-direction:column; gap:4px; }
.company-stat>strong { color:var(--gold); font-size:32px; line-height:1.1; letter-spacing:-1px; }
.company-stat span { font-size:12px; color:#d9e4d7; line-height:1.5; }
.company-stat.regional { flex-direction:row; align-items:center; gap:10px; }
.company-stat.regional>.icon { color:var(--gold); width:28px; height:28px; }
.company-stat.regional strong { display:block; color:#f6f5e9; font-size:17px; }
.form-panel { grid-area:form; }
.proof-section {
  grid-area:proof;
  min-width:0;
  padding:4px 32px 32px;
  background:var(--forest);
  color:#f6f8ef;
}
.proof-eyebrow { color:#c4d4c1; font-size:9px; font-weight:600; letter-spacing:1.25px; }
.proof-heading h2 { font-family:'Manrope',sans-serif; font-size:21px; font-weight:600; letter-spacing:-.5px; margin:10px 0 8px; }
.proof-heading p { color:#c4d4c1; font-size:12px; line-height:1.6; margin:0 0 20px; }
.proof-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.proof-card { min-width:0; margin:0; border:1px solid #ffffff30; border-radius:15px; overflow:hidden; background:#ffffff09; }
.proof-image { position:relative; overflow:hidden; }
.proof-image img { width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; display:block; transition:transform .6s var(--ease); }
.proof-card:hover img { transform:scale(1.04); }
.installed-badge { position:absolute; left:10px; bottom:10px; display:flex; align-items:center; gap:4px; padding:5px 8px; border-radius:20px; background:#f9fbf1f0; color:var(--forest); font-size:10px; font-weight:600; }
.installed-badge .icon { width:13px; height:13px; }
.proof-card figcaption { padding:15px 12px; }
.proof-card figcaption strong { display:block; font-size:14px; line-height:1.5; font-weight:600; }
.proof-card figcaption>span { display:flex; align-items:center; gap:4px; margin-top:5px; font-size:11px; color:#cedecc; }
.proof-card figcaption .icon { width:13px; height:13px; }
.progress-heading { font-size:12px; }
.step-icon { width:46px; height:46px; }
.options { gap:12px; }
.option, .option.compact {
  min-height:96px;
  border:2px solid #c8d5bf;
  border-radius:16px;
  padding:16px;
  gap:14px;
  box-shadow:0 4px 0 #e1e7db;
  background:linear-gradient(120deg,#ffffff,#f8faf4);
}
.option:hover, .option:has(input:focus-visible) { border-color:#3e7048; box-shadow:0 6px 0 #d4dfca,0 9px 20px #173e3210; }
.option:active { transform:translateY(2px); box-shadow:0 1px 0 #c5d3bd; }
.option:has(input:checked) { background:#e1edda; border-color:var(--forest); box-shadow:0 3px 0 #abc19f; }
.option-icon { width:48px; height:48px; border-radius:13px; color:var(--forest); background:#e5eddd; }
.option-icon .icon { width:27px; height:27px; stroke-width:1.8; }
.option-text { font-size:16px; font-weight:650; line-height:1.4; }
.option-action { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.step.entering .option { animation-fill-mode:backwards; }
.option:hover .option-check { transform:translateX(3px); }
.option-check { width:30px; height:30px; border:none; border-radius:9px; background:var(--forest); color:#fff; }
.option-check::before { content:'→'; font-size:21px; line-height:1; }
.option:has(input:checked) .option-check::before { display:none; }
.option:has(input:checked) .option-check::after { height:11px; width:6px; border-width:0 2px 2px 0; }
.bill-card { padding:23px; }
.bill-card>.amount-value { margin:20px 0; gap:9px; }
.amount-value>span { color:#536849; font-size:22px; }
.amount-value input { font-size:44px; width:6.7ch; font-weight:750; }
.amount-control { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0 0 21px; }
.amount-button {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  height:76px;
  border:2px solid #afc09f;
  border-radius:14px;
  background:#fff;
  box-shadow:0 4px 0 #d1ddc6;
  color:var(--forest);
}
#increase { color:#fff; border-color:var(--forest); background:var(--forest); box-shadow:0 4px 0 #05261d; }
.amount-symbol { font-size:32px; line-height:1; font-weight:500; }
.amount-button-label { font-size:12px; font-weight:550; text-align:left; line-height:1.4; }
.amount-button-label strong { display:block; font-size:17px; font-weight:700; }
.amount-button::after { border-radius:14px; }
.amount-button:hover:not(:disabled) { background:#e2ecd9; color:var(--forest); border-color:#547845; }
#increase:hover:not(:disabled) { background:#256347; color:#fff; }
.amount-button:disabled { opacity:.42; }
.next-button { font-size:15px; font-weight:650; min-height:60px; }
.next-button>.icon { width:23px; height:23px; }
.back-button { font-size:13px; min-height:48px; }
.privacy { font-size:10px; color:#62715d; }
.field>label, .phone-part label { font-size:14px; }
.field>input { border-width:2px; }
.field>input::placeholder, .phone-part input::placeholder { color:#76836d; }
.step-stage { scroll-margin-top:24px; }
@media(max-width:1200px) {
  .form-panel { padding-left:30px; padding-right:30px; }
}
@media(max-width:1050px) {
  .story { padding:28px 24px 24px; }
  .story h1 { font-size:36px; }
  .proof-section { padding:0 24px 28px; }
  .proof-grid { gap:10px; }
  .proof-card figcaption { padding:12px 9px; }
  .proof-card figcaption strong { font-size:12px; }
  .option, .option.compact { padding:13px; gap:11px; }
  .option-icon { width:40px; height:44px; }
  .option-text { font-size:15px; }
  .amount-button { gap:8px; }
  .amount-button-label { font-size:11px; }
}
@media(max-width:760px) {
  .experience { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto; grid-template-areas:"story" "form" "proof"; }
  .story { padding:22px 25px; }
  .story h1 { font-size:27px; letter-spacing:-1px; margin:0; max-width:none; }
  .story h1 em { display:inline; }
  .story-description { display:none; }
  .company-highlights { margin-top:16px; padding-top:15px; gap:10px; }
  .company-stat>strong { font-size:26px; }
  .company-stat span { font-size:11px; }
  .company-stat.regional strong { font-size:15px; }
  .company-stat.regional>.icon { width:23px; height:23px; }
  .form-panel { padding:25px 25px 16px; }
  .option, .option.compact { min-height:92px; padding:14px 12px; gap:11px; }
  .option-icon { width:43px; height:46px; }
  .option-icon .icon { width:25px; height:25px; }
  .option-text { font-size:15px; }
  .option-check { width:28px; height:28px; }
  .bill-card { padding:20px 16px; }
  .bill-card>.amount-value { margin:20px 0; }
  .amount-value input { font-size:42px; }
  .amount-control { gap:10px; }
  .amount-button { height:72px; }
  .amount-button-label { font-size:11px; }
  .amount-button-label strong { font-size:16px; }
  .amount-symbol { font-size:29px; }
  .next-button { font-size:14px; }
  .proof-section { padding:26px 25px; }
  .proof-heading h2 { font-size:21px; }
  .proof-heading p { font-size:13px; }
  .proof-card figcaption { padding:16px; }
  .proof-card figcaption strong { font-size:16px; }
  .proof-card figcaption>span { font-size:12px; }
}
@media(max-width:480px) {
  .proof-grid { grid-template-columns:1fr; gap:18px; }
}
@media(max-width:370px) {
  .form-panel { padding-left:18px; padding-right:18px; }
  .story { padding-left:20px; padding-right:20px; }
  .story h1 { font-size:25px; }
  .option-icon { width:37px; height:42px; }
  .option, .option.compact { padding:13px 10px; gap:9px; }
  .option-text { font-size:14px; }
  .amount-button { gap:6px; }
  .bill-card { padding:20px 12px; }
  .amount-button-label { font-size:10px; }
  .amount-button-label strong { font-size:15px; }
  .amount-symbol { font-size:26px; }
  .privacy { font-size:9px; }
  .proof-section { padding:25px 20px; }
}
/* Minimal layout: one question, its answers and one action per screen. */
.progress-heading { font-size:12px; font-weight:600; color:#6c7b6a; margin-bottom:10px; }
.progress { margin-bottom:30px; }
.step-stage { flex:0 0 auto; min-height:0; }
.step { padding-bottom:0; }
.step h2 { margin:0 0 24px; }
.options { gap:10px; }
.option, .option.compact { min-height:66px; padding:11px 14px; gap:12px; border-radius:14px; box-shadow:0 3px 0 #e1e7db; }
.option-icon { width:42px; height:42px; border-radius:11px; }
.option-icon .icon { width:23px; height:23px; }
.option-text { font-size:16px; }
.option-check { width:28px; height:28px; }
.field { margin:0; }
.form-actions { padding-top:24px; }
.privacy { display:none; }
#solarForm:has([data-step="telefone"]:not([hidden])) .privacy { display:flex; }
.bill-card { padding:22px 20px 20px; }
.bill-card>.amount-value { position:relative; margin:0 0 18px; }
.amount-control { margin:0; }
.amount-button { height:62px; }
.amount-button-label { font-size:17px; font-weight:700; }
@media(max-width:760px) {
  .form-panel { padding:22px 20px 14px; }
  .progress { margin-bottom:24px; }
  .step h2 { margin-bottom:20px; }
  .option-text { font-size:15px; }
  .bill-card { padding:20px 14px 16px; }
  .amount-button { height:58px; }
  .amount-button-label { font-size:16px; }
}
@media(max-width:370px) {
  .amount-button-label { font-size:15px; }
}
/* Action emphasis: only the control the lead must use moves. */
@property --bill-angle {
  syntax:'<angle>';
  inherits:false;
  initial-value:0deg;
}
.bill-card {
  border:2.5px solid transparent;
  background:
    linear-gradient(135deg,#f3f7ee,#fbfcf6) padding-box,
    conic-gradient(from var(--bill-angle),#103e32 0%,#3e7048 22%,#e7bf83 34%,#fbe3b4 40%,#e7bf83 46%,#3e7048 62%,#103e32 100%) border-box;
  animation:bill-border 3.6s linear infinite;
}
.amount-value input {
  border-bottom:2px dashed #b9c9ae;
  border-radius:4px 4px 0 0;
  cursor:text;
  transition:border-color .2s;
}
.amount-value input:hover, .amount-value input:focus { border-bottom-color:var(--forest); }
.amount-value>.amount-bubble {
  position:absolute;
  left:50%;
  top:4px;
  padding:4px 10px;
  border-radius:20px;
  background:#2f7a50;
  color:#fff;
  font-size:13px;
  font-weight:700;
  white-space:nowrap;
  pointer-events:none;
  box-shadow:0 6px 14px -6px #103e3280;
}
.amount-value>.amount-bubble.down { background:#8a6a3a; }
.amount-button {
  box-shadow:0 4px 0 #c3d3b6;
  transition:transform .18s var(--ease),box-shadow .18s,background .2s,border-color .2s;
}
#increase { box-shadow:0 4px 0 #05261d; }
.amount-button:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 6px 0 #b3c7a4; }
#increase:hover:not(:disabled) { box-shadow:0 6px 0 #05261d; }
.amount-button:active:not(:disabled), #increase:active:not(:disabled) { transform:translateY(3px); box-shadow:0 1px 0 #05261d; }
.amount-symbol {
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:50%;
  background:#e7eee0;
  font-size:26px;
  font-weight:600;
  flex-shrink:0;
}
#increase .amount-symbol { background:var(--gold); color:var(--forest-deep); }
.amount-button::after { inset:-2px; border:0; opacity:1; }
.amount-button:hover:not(:disabled)::after, .bill-card:not(.is-touched) .amount-button:not(:disabled)::after { animation:amount-halo 1.8s ease-out infinite; }
.bill-card:not(.is-touched) #increase::after { --halo:#e7bf83; }
.bill-card:not(.is-touched) #decrease::after { animation-delay:.9s; }
.option, .option.compact { border-color:#a9bf9c; }
.option-check { animation:check-nudge 2s var(--ease) infinite; }
.option:hover .option-check { animation:none; transform:translateX(4px); background:#2f7a50; }
.option:hover { background:linear-gradient(120deg,#ffffff,#eef5e8); }
.option:hover .option-icon { background:var(--forest); color:#f1e6cf; }
.step .option:has(input:checked) { animation:option-pop .4s var(--ease); }
.option:has(input:checked) .option-check { animation:none; }
.field>input, .phone-part input:not([readonly]) {
  border:2px solid #a9bf9c;
  box-shadow:0 3px 0 #e1e8da;
  transition:border-color .2s,box-shadow .25s,background-color .2s;
}
.field>input:placeholder-shown:not(:focus), .phone-part input:not([readonly]):placeholder-shown:not(:focus) {
  animation:input-invite 2.2s ease-out infinite;
}
.phone-part #telefone:placeholder-shown:not(:focus) { animation-delay:.35s; }
.field>input:focus, .phone-part input:not([readonly]):focus {
  border-color:var(--forest);
  background-color:#fbfdf8;
  box-shadow:0 0 0 4px #e7bf8355;
}
.step.is-valid .field>input, .step.is-valid .phone-part input:not([readonly]) { border-color:#2f7a50; }
.step.is-valid .field>input {
  padding-right:48px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%232f7a50'/%3E%3Cpath d='m7 12.5 3.2 3.2L17 9' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 15px center;
  background-size:22px;
}
.field>input[aria-invalid=true], .phone-part input[aria-invalid=true] { border-color:#b3593d; animation:none; box-shadow:0 0 0 4px #b3593d22; }
.field>label, .phone-part label { color:var(--forest); font-weight:650; }
.next-button.is-ready:not(:disabled) { animation:cta-ready 2.2s ease-out infinite; }
.next-button.is-ready:not(:disabled)>.icon { animation:arrow-nudge 1.5s var(--ease) infinite; }
@keyframes bill-border { to { --bill-angle:360deg; } }
@keyframes amount-halo {
  0% { box-shadow:0 0 0 0 var(--halo,#6f9462); opacity:.75; }
  75%,100% { box-shadow:0 0 0 10px var(--halo,#6f9462); opacity:0; }
}
@keyframes check-nudge {
  0%,55%,100% { transform:translateX(0); }
  25% { transform:translateX(5px); }
}
@keyframes option-pop {
  0% { transform:scale(1); }
  40% { transform:scale(1.025); }
  100% { transform:scale(1); }
}
@keyframes input-invite {
  0% { box-shadow:0 3px 0 #e1e8da,0 0 0 0 #3e704855; }
  70%,100% { box-shadow:0 3px 0 #e1e8da,0 0 0 9px #3e704800; }
}
@keyframes arrow-nudge {
  0%,60%,100% { transform:translateX(0); }
  30% { transform:translateX(6px); }
}
@keyframes cta-ready {
  0% { box-shadow:0 6px 14px #133b3224,0 0 0 0 #e7bf83cc; }
  70%,100% { box-shadow:0 6px 14px #133b3224,0 0 0 10px #e7bf8300; }
}
@media(max-width:370px) {
  .amount-symbol { width:30px; height:30px; font-size:22px; }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
  }
}
/* Center the form after removing the green presentation area. */
.site-header,
.site-footer,
.experience {
  max-width:600px;
}
.experience {
  display:block;
  min-height:0;
}
.form-panel {
  padding:42px 48px 36px;
}
@media(max-width:760px) {
  .site-header,
  .site-footer,
  .experience {
    max-width:480px;
  }
  .form-panel {
    padding:22px 20px 20px;
  }
}
@media(max-width:370px) {
  .form-panel {
    padding:22px 18px 18px;
  }
}