/* The overlays on the Polaris designers: the welcome splash (Views/Polaris/_WelcomeSplashPartial.cshtml) and the free
   estimate popup (Views/Polaris/_DesignerLeadPartial.cshtml), run by Scripts/polaris-designer-overlays.js. Loaded
   after the designer's own stylesheet, whose :root colors and fonts it shares. */

/* the page under an open overlay stays put; the overlay scrolls inside itself */
html.overlay-open,html.overlay-open body{overflow:hidden;}

/* ---------- welcome splash ---------- */
.splash{
  position:fixed;inset:0;z-index:100;
  display:flex;
  padding:12px;
  padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
  background:radial-gradient(120% 90% at 50% 0%,rgba(22,54,116,.96) 0%,rgba(10,28,66,.98) 55%,#060d20 100%);
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  animation:splash-in .3s ease both;
  transition:opacity .25s ease;
}
.splash.leaving{opacity:0;pointer-events:none;}
@keyframes splash-in{from{opacity:0;}to{opacity:1;}}
@media(min-width:800px){.splash{padding:28px;}}

.splash-card{
  position:relative;
  width:min(1040px,100%);
  margin:auto;                 /* centered, and the overlay scrolls when the card runs taller than the screen */
  display:flex;flex-direction:column;
  background:#fff;border-radius:6px;overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
  animation:splash-card-in .5s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes splash-card-in{from{opacity:0;transform:translateY(20px) scale(.985);}to{opacity:1;transform:none;}}
@media(min-width:800px){
  .splash-card{display:grid;grid-template-columns:minmax(0,44fr) minmax(0,56fr);}
}
.splash-x{
  position:absolute;top:10px;right:10px;z-index:3;
  width:38px;height:38px;padding:0;
  border:1px solid rgba(16,44,100,.18);border-radius:100px;
  background:rgba(255,255,255,.94);color:var(--navy);
  font-size:24px;line-height:1;cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.22);
}
.splash-x:hover{background:#fff;}
.splash-x:focus-visible{outline:2px solid var(--red);outline-offset:2px;}

/* the picture: the AI example house, or a render from the 3D view on the stage's own backdrop */
.splash-media{
  position:relative;overflow:hidden;
  height:min(56vw,250px);
  background:radial-gradient(120% 90% at 50% 8%,#fdfdfd 0%,#e4e9ee 46%,#c4ced7 100%);
}
@media(min-width:800px){.splash-media{height:auto;min-height:100%;}}
.splash-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.splash-render{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:22px 22px 64px;display:block;}
/* a dark band along the bottom, for the logo */
.splash-media::after{content:"";position:absolute;left:0;right:0;bottom:0;height:52%;background:linear-gradient(180deg,rgba(6,13,32,0) 0%,rgba(6,13,32,.84) 100%);}
.splash-logo{position:absolute;left:16px;bottom:14px;z-index:2;width:min(190px,44%);height:auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4));}
.splash-tag{
  position:absolute;top:12px;left:12px;z-index:2;
  display:inline-flex;align-items:center;gap:6px;
  font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#fff;
  background:rgba(16,44,100,.92);border-left:3px solid var(--red);border-radius:2px;padding:5px 9px 5px 7px;
}
.splash-tag svg{width:14px;height:14px;fill:currentColor;}
.splash-tag svg.line{fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;}
/* the 3D render the AI worked from, in the corner of the photo */
.splash-mini{
  position:absolute;right:14px;bottom:14px;z-index:2;
  display:flex;flex-direction:column;align-items:center;
  padding:6px 8px 5px;border-radius:6px;
  background:rgba(255,255,255,.95);box-shadow:0 4px 12px rgba(0,0,0,.25);
}
.splash-mini img{display:block;height:58px;width:auto;}
.splash-mini span{margin-top:3px;font-size:9px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--navy);}
@media(min-width:800px){.splash-mini img{height:76px;}}

.splash-body{display:flex;flex-direction:column;padding:22px 20px 18px;}
@media(min-width:800px){.splash-body{padding:34px 36px 26px;justify-content:center;}}
.splash-eyebrow{margin:0 0 6px;font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--red);}
.splash-title{
  font-family:'Barlow Condensed','Mulish',sans-serif;font-weight:700;
  font-size:clamp(28px,6.4vw,40px);line-height:.98;letter-spacing:-.005em;
  color:var(--navy);margin:0 0 10px;text-wrap:balance;
}
.splash-sub{margin:0 0 16px;font-size:14.5px;line-height:1.5;color:var(--muted);}
.splash-features{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:11px;}
.splash-features li{display:flex;gap:12px;align-items:flex-start;}
.splash-features li>svg{
  flex:0 0 auto;width:38px;height:38px;padding:9px;border-radius:100px;
  background:var(--paper);color:var(--navy);
  fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
.splash-features b{display:block;font-size:14px;line-height:1.25;color:var(--navy);}
.splash-features b em{
  display:inline-block;vertical-align:1px;margin-left:6px;padding:1px 6px;border-radius:100px;
  background:var(--red);color:#fff;font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
}
.splash-features span{display:block;margin-top:2px;font-size:12.5px;line-height:1.45;color:var(--muted);}
.splash-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;}
.splash-go{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font:inherit;font-size:17px;font-weight:800;color:#fff;
  background:var(--red);border:0;border-radius:3px;padding:14px 22px;cursor:pointer;
  box-shadow:0 8px 20px rgba(198,5,5,.28);
}
.splash-go:hover{background:#a80404;}
.splash-go:focus-visible{outline:3px solid var(--navy);outline-offset:2px;}
.splash-go svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
.splash-phone{font-size:13px;font-weight:700;color:var(--muted);}
.splash-phone a{color:var(--navy);text-decoration:none;font-weight:800;}
.splash-fine{margin:12px 0 0;font-size:11.5px;font-weight:600;color:var(--steel);}
/* phones: the button comes right after the intro, so it's on screen before the first scroll; the features follow */
@media(max-width:799px){
  .splash-actions{order:1;margin-bottom:18px;}
  .splash-features{order:2;margin-bottom:0;}
  .splash-fine{order:3;margin-top:14px;}
  .splash-go{flex:1 1 auto;}
}

/* ---------- free estimate popup ---------- */
.lead{
  position:fixed;inset:0;z-index:80;
  display:flex;
  padding:12px;
  padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
  background:rgba(6,13,32,.64);
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  opacity:0;transition:opacity .22s ease;
}
.lead.on{opacity:1;}
.lead-card{
  position:relative;
  width:min(540px,100%);
  margin:auto;
  background:#fff;border-radius:6px;border-top:4px solid var(--red);
  padding:24px 22px 20px;
  box-shadow:0 30px 80px rgba(0,0,0,.45);
  transform:translateY(14px);transition:transform .25s cubic-bezier(.2,.8,.3,1);
  outline:none;
}
.lead.on .lead-card{transform:none;}
@media(min-width:480px){.lead-card{padding:28px 30px 24px;}}
.lead-x{
  position:absolute;top:10px;right:10px;
  width:36px;height:36px;padding:0;
  border:0;border-radius:100px;background:var(--paper);color:var(--navy);
  font-size:24px;line-height:1;cursor:pointer;
}
.lead-x:hover{background:var(--line);}
.lead-x:focus-visible{outline:2px solid var(--red);outline-offset:2px;}
.lead-eyebrow{margin:0 0 4px;font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--red);}
.lead-title{
  font-family:'Barlow Condensed','Mulish',sans-serif;font-weight:700;
  font-size:clamp(26px,6vw,32px);line-height:1;color:var(--navy);margin:0 30px 12px 0;
}
/* the design, as the readout under the share link puts it, with its color dots */
.lead-design{
  display:flex;align-items:center;gap:11px;
  margin:0 0 12px;padding:10px 12px;
  background:var(--paper);border-left:3px solid var(--navy);border-radius:2px;
  font-size:13px;font-weight:700;line-height:1.35;color:var(--navy);
}
.lead-dots{display:inline-flex;flex:0 0 auto;}
.lead-dots:empty{display:none;}
.lead-dots span{width:22px;height:22px;border-radius:50%;box-shadow:0 0 0 2px #fff,inset 0 0 0 1px rgba(0,0,0,.22);}
.lead-dots span+span{margin-left:-7px;}
.lead-sub{margin:0 0 16px;font-size:13.5px;line-height:1.5;color:var(--muted);}
.lead-sub b{color:var(--navy);}
.lead-sub a{color:var(--navy);font-weight:800;}

.lead-field{margin-bottom:12px;}
.lead-field label{display:block;margin-bottom:5px;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--steel);}
.lead-field label span{font-weight:600;letter-spacing:0;text-transform:none;}
.lead-field input{
  width:100%;font:inherit;font-size:16px;color:var(--ink);   /* 16px: iOS doesn't zoom in on focus */
  padding:11px 12px;border:1px solid var(--line);border-radius:2px;background:#f7f9fb;
}
.lead-field input:focus{outline:2px solid var(--red);outline-offset:1px;}
.lead-field input.is-invalid{border-color:var(--red);background:#fdf3f3;}
.lead-error{display:block;margin-top:5px;font-size:12px;font-weight:700;color:#a80404;}
.lead-error:empty{display:none;}
.lead-row{display:grid;grid-template-columns:1fr;column-gap:12px;}
@media(min-width:480px){.lead-row{grid-template-columns:1fr 1fr;}}

.lead-check{display:flex;gap:9px;align-items:flex-start;margin:4px 0 6px;font-size:12px;line-height:1.45;color:var(--ink);cursor:pointer;}
.lead-check input{flex:0 0 auto;width:16px;height:16px;margin:2px 0 0;}
.lead-terms{margin:0 0 12px;font-size:10.5px;line-height:1.5;color:var(--muted);}
.lead-terms a{color:var(--navy);}
.lead-turnstile{margin-bottom:10px;}
.lead-turnstile:empty{display:none;}
.lead-notice{margin:0 0 12px;padding:9px 11px;border-left:3px solid var(--red);background:#fdf3f3;font-size:12.5px;line-height:1.45;font-weight:600;color:#6d2020;}

.lead-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;}
.lead-go{
  font:inherit;font-size:15px;font-weight:800;color:#fff;
  background:var(--red);border:0;border-radius:3px;padding:13px 20px;cursor:pointer;
}
.lead-go:hover{background:#a80404;}
.lead-go[disabled]{opacity:.6;cursor:progress;}
.lead-go:focus-visible{outline:3px solid var(--navy);outline-offset:2px;}
.lead-skip{font:inherit;font-size:13px;font-weight:700;color:var(--muted);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;}
.lead-skip:hover{color:var(--navy);}
.lead-skip:focus-visible{outline:2px solid var(--red);outline-offset:2px;}
@media(max-width:479px){.lead-go{flex:1 1 auto;}}
.lead-check-status{margin:8px 0 0;font-size:12px;font-weight:700;color:var(--navy);}
.lead-check-status:empty{display:none;}
.lead-check-status.error{color:#a80404;}
.lead-fine{margin:16px 0 0;font-size:11.5px;line-height:1.5;color:var(--muted);}
.lead-fine a{color:var(--navy);font-weight:800;text-decoration:none;}