https://daylight-jmcrvqojb-godaylight.vercel.app/_next/static/chun…?dpl=dpl_3HzZMFtCefAWfiMyJ89s5H7NK7Ta

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[8293],{8293:(e,t,l)=>{l.d(t,{FaqAccordion:()=>b,InlineAddressForm:()=>p,QualifyCtaButton:()=>u,QualifyLandingModal:()=>h});var i=l(4568),a=l(7620),o=l(982),r=l(2966);let n="daylight:open-qualify",s=function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};window.dispatchEvent(new CustomEvent(n,{detail:e}))},d=`
2.qualify-pill{background:rgba(255,255,255,0.05);backdrop-filter:blur(6px) saturate(110%);-webkit-backdrop-filter:blur(6px) saturate(110%);border:1px solid rgba(255,255,255,0.22);border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,0.24);transition:border-color 200ms ease-out;display:flex;flex-direction:row;align-items:center;padding:0;gap:0;width:100%;max-width:312px;height:56px;isolation:isolate;transform:translateZ(0);will-change:backdrop-filter;}
3.qualify-pill:focus-within{border-color:rgba(255,247,233,0.4);}
4.qualify-pill-input{flex:1;min-width:0;height:100%;background:transparent;border:none;outline:none;padding:0 12px 0 16px;font-size:16px;color:#FFF7E9;font-family:inherit;letter-spacing:-0.02em;}
5.qualify-pill-input::placeholder{color:rgba(255,247,233,0.75);opacity:1;}
6/* Light variant — for placing the pill on a cream/light surface (e.g. the
7   "How it works" step). Flips the input text + border to brown so they read on
8   #FFF7E9; the black button + beige label stay untouched. */
9.qualify-pill--light{background:rgba(76,40,6,0.03);border-color:rgba(76,40,6,0.22);box-shadow:0 8px 32px rgba(76,40,6,0.08);}
10.qualify-pill--light:focus-within{border-color:rgba(76,40,6,0.45);}
11.qualify-pill--light .qualify-pill-input{color:#4C2806;}
12.qualify-pill--light .qualify-pill-input::placeholder{color:rgba(76,40,6,0.55);}
13/* Beige variant — solid beige fill for placing the pill on a saturated brand
14   surface (e.g. the orange "Same roof. Different deal." section). A filled card
15   reads as an input where a transparent pill would disappear into the orange.
16   Brown input text + border; the black button + beige label stay untouched. */
17.qualify-pill--beige{background:#FFF7E9;backdrop-filter:none;-webkit-backdrop-filter:none;border-color:rgba(76,40,6,0.22);box-shadow:0 8px 32px rgba(76,40,6,0.12);}
18.qualify-pill--beige:focus-within{border-color:rgba(76,40,6,0.45);}
19.qualify-pill--beige .qualify-pill-input{color:#4C2806;}
20.qualify-pill--beige .qualify-pill-input::placeholder{color:rgba(76,40,6,0.55);}
21.qualify-pill-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;align-self:center;white-space:nowrap;height:44px;width:auto;margin:0 6px;padding:0 16px;border:none;border-radius:8px;background:#111111;color:#FFF7E9;font-size:14px;font-weight:500;font-family:inherit;letter-spacing:-0.02em;cursor:pointer;overflow:hidden;flex-shrink:0;-webkit-tap-highlight-color:rgba(0,0,0,0);touch-action:manipulation;}
22.qualify-pill-btn:focus-visible{outline:2px solid rgba(255,255,255,0.55);outline-offset:2px;}
23.qualify-pill-btn-label{position:relative;z-index:2;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:geometricPrecision;color:#FFF7E9;transition:color 300ms cubic-bezier(0.16, 1.08, 0.38, 0.98);}
24.qualify-pill-btn-overlay{pointer-events:none;position:absolute;inset:0;z-index:1;height:100%;width:100%;transform-origin:center;transform:translateY(200%) rotate(15deg) scale(1.8);border-radius:8px;background:#FFF7E9;transition:transform 1000ms cubic-bezier(0.16, 1.08, 0.38, 0.98);}
25@media (hover: hover) {
26  .qualify-pill-btn:hover .qualify-pill-btn-label{color:#4C2806;}
27  .qualify-pill-btn:hover .qualify-pill-btn-overlay{transform:translateY(0) rotate(8deg) scale(1.8);}
28}
29/* On beige/cream surfaces (light + beige variants) the beige swipe overlay
30   would vanish into the background on hover, making the button disappear. Flip
31   the overlay to orange and keep the label beige on hover — matches the
32   QualifyForm submit button's orange swipe. */
33.qualify-pill--light .qualify-pill-btn-overlay,
34.qualify-pill--beige .qualify-pill-btn-overlay{background:#F66F00;}
35@media (hover: hover) {
36  .qualify-pill--light .qualify-pill-btn:hover .qualify-pill-btn-label,
37  .qualify-pill--beige .qualify-pill-btn:hover .qualify-pill-btn-label{color:#FFF7E9;}
38}
39/* Single source of truth for the button label — CSS content swaps the
40   visible text per viewport so the raw markup never contains both
41   strings concatenated. Screen readers get the long form via aria-label. */
42.qualify-pill-btn-label::before{content:'Qualify';}
43@media (min-width:768px){
44  .qualify-pill{max-width:400px;height:60px;}
45  .qualify-pill-input{padding:0 16px 0 20px;}
46  .qualify-pill-btn{height:48px;margin:0 6px;padding:0 18px;font-size:14px;}

47  .qualify-pill-btn-label::before{content:'See if you qualify';}
48}
49/* Hero CTA light-button treatment (homepage + product heroes only, via the
50   lightButton prop). Inverts the pill button to match the site's bg-beige light
51   buttons: beige fill + brown label at rest, black swipe overlay, label flips to
52   beige on the hover swipe. */
53.qualify-pill--cta-light .qualify-pill-btn{background:#FFF7E9;}
54.qualify-pill--cta-light .qualify-pill-btn-label{color:#4C2806;}
55.qualify-pill--cta-light .qualify-pill-btn-overlay{background:#111111;}
56@media (hover: hover){
57  .qualify-pill--cta-light .qualify-pill-btn:hover .qualify-pill-btn-label{color:#FFF7E9;}
58}
59/* Yellow-button treatment (terry hero, via the yellowButton prop) — the
60   qualify-cta--yellow grammar on the pill: #FCCC3C fill + brown label at rest,
61   black swipe overlay, label flips to beige on the hover swipe. */
62.qualify-pill--cta-yellow .qualify-pill-btn{background:#FCCC3C;}
63.qualify-pill--cta-yellow .qualify-pill-btn-label{color:#4C2806;}
64.qualify-pill--cta-yellow .qualify-pill-btn-overlay{background:#111111;}
65@media (hover: hover){
66  .qualify-pill--cta-yellow .qualify-pill-btn:hover .qualify-pill-btn-label{color:#FFF7E9;}
67}
68`,p=e=>{let{variant:t="dark",lightButton:l=!1,yellowButton:o=!1}=e,[n,p]=(0,a.useState)(""),[c,u]=(0,a.useState)(null),[h,b]=(0,a.useState)(null),f=(0,a.useRef)(null);return(0,r.G)(f,e=>{u(e),p(e.full||e.street),b(null),s({address:e.street||e.full,city:e.city,state:e.state,zip:e.zip})}),(0,i.jsxs)("form",{onSubmit:e=>{e.preventDefault(),c?s({address:c.street||c.full,city:c.city,state:c.state,zip:c.zip}):b("Please select your address from the dropdown.")},className:"flex w-full max-w-[560px] flex-col items-stretch",noValidate:!0,children:[(0,i.jsx)("style",{children:`${d}${r.B}`}),(0,i.jsxs)("div",{className:["qualify-pill","dark"!==t&&`qualify-pill--${t}`,l&&"qualify-pill--cta-light",o&&"qualify-pill--cta-yellow"].filter(Boolean).join(" "),children:[(0,i.jsx)("input",{ref:f,className:"qualify-pill-input font-sans",type:"text",autoComplete:"off","aria-label":"Your address",placeholder:"Enter your address","data-1p-ignore":"","data-lpignore":"true","data-form-type":"other",value:n,onChange:e=>{p(e.target.value),u(null),h&&b(null)}}),(0,i.jsxs)("button",{type:"submit","aria-label":"See if you qualify",className:"qualify-pill-btn font-sans",children:[(0,i.jsx)("div",{"aria-hidden":"true",className:"qualify-pill-btn-overlay"}),(0,i.jsx)("span",{"aria-hidden":"true",className:"qualify-pill-btn-label"})]})]}),h&&(0,i.jsx)("p",{className:"font-sans",style:{marginTop:"8px",fontSize:"13px",color:"dark"===t?"rgba(255,247,233,0.8)":"rgba(76,40,6,0.8)",letterSpacing:"-0.02em"},children:h})]})},c=`
69.qualify-cta{position:relative;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;width:100%;max-width:440px;height:64px;padding:0 28px;border:none;border-radius:10px;background:#111111;color:#FFF7E9;font-size:16px;font-weight:500;font-family:inherit;letter-spacing:-0.02em;cursor:pointer;overflow:hidden;-webkit-tap-highlight-color:rgba(0,0,0,0);touch-action:manipulation;}
70.qualify-cta:focus-visible{outline:2px solid rgba(255,255,255,0.55);outline-offset:2px;}
71.qualify-cta-label{position:relative;z-index:2;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:geometricPrecision;color:#FFF7E9;transition:color 300ms cubic-bezier(0.16, 1.08, 0.38, 0.98);}
72.qualify-cta-overlay{pointer-events:none;position:absolute;inset:0;z-index:1;height:100%;width:100%;transform-origin:center;transform:translateY(200%) rotate(15deg) scale(1.8);border-radius:10px;background:#FFF7E9;transition:transform 1000ms cubic-bezier(0.16, 1.08, 0.38, 0.98);}
73@media (hover: hover) {
74  .qualify-cta:hover .qualify-cta-label{color:#4C2806;}
75  .qualify-cta:hover .qualify-cta-overlay{transform:translateY(0) rotate(8deg) scale(1.8);}
76}
77/* Yellow variant applies at all widths (mobile + desktop). Base is yellow with
78   a brown label; on hover the shared overlay swipes in — flipped to black here
79   so it's the inverse of the default (black bg → beige swipe). Label flips to
80   beige during hover so it reads on the black overlay. Solid-black is a
81   mobile-only override; desktop keeps the shared black + beige-swipe treatment. */
82.qualify-cta--yellow{background:#FCCC3C;}
83.qualify-cta--yellow .qualify-cta-label{color:#4C2806;}
84.qualify-cta--yellow .qualify-cta-overlay{background:#111111;}
85@media (hover: hover) {
86  .qualify-cta--yellow:hover .qualify-cta-label{color:#FFF7E9;}
87}
88/* THE SWIPE OVERLAY IS OFF BELOW 768px FOR EVERY VARIANT. It used to be turned
89   off per-variant (yellow, then solid-black) and the DEFAULT was left on, which
90   was fine only because the default had never been rendered at a mobile width.
91   It has to be off: at rest the overlay is translateY(200%) rotate(15deg)
92   scale(1.8), and 200% of its own height stops clearing the box once the button
93   goes wide and short. On a 357x64 mobile button the scaled element is 643px
94   across, so the 15deg rotation adds ~83px of vertical half-extent and the top

95   corner lands 21px INSIDE the button — a beige wedge sitting across the bottom
96   two thirds of a black button at rest. Desktop is unaffected (2px, invisible)
97   because the button is 139x48 there and the rotation costs far less. */
98@media (max-width: 767px) {
99  .qualify-cta-overlay{display:none;}
100  .qualify-cta--solid-black{background:#000000;}
101}
102@media (min-width:768px){
103  .qualify-cta{width:auto;max-width:none;height:48px;padding:0 18px;border-radius:8px;font-size:14px;}
104  .qualify-cta-overlay{border-radius:8px;}
105}
106`,u=e=>{let{label:t,mobileVariant:l}=e;return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)("style",{children:c}),(0,i.jsxs)("button",{type:"button",onClick:()=>s(),className:`qualify-cta font-sans${"yellow"===l?" qualify-cta--yellow":"solid-black"===l?" qualify-cta--solid-black":""}`,children:[(0,i.jsx)("div",{"aria-hidden":"true",className:"qualify-cta-overlay"}),(0,i.jsx)("span",{className:"qualify-cta-label",children:t})]})]})},h=()=>{let[e,t]=(0,a.useState)(!1),[l,r]=(0,a.useState)({}),s=(0,a.useRef)(0);return((0,a.useEffect)(()=>{let e=e=>{r(e.detail||{}),s.current+=1,t(!0)};return window.addEventListener(n,e),()=>window.removeEventListener(n,e)},[]),(0,a.useEffect)(()=>{if(e){let e=window.innerWidth-document.documentElement.clientWidth;document.body.style.overflow="hidden",document.body.style.paddingRight=`${e}px`}else document.body.style.overflow="",document.body.style.paddingRight=""},[e]),(0,a.useEffect)(()=>{if(!e)return;let l=e=>{"Escape"===e.key&&t(!1)};return document.addEventListener("keydown",l),()=>document.removeEventListener("keydown",l)},[e]),e)?(0,i.jsx)("div",{className:"fixed inset-0 flex items-center justify-center",style:{zIndex:9999,backgroundColor:"rgba(28,28,28,0.6)",backdropFilter:"blur(4px)",WebkitBackdropFilter:"blur(4px)"},onClick:e=>{e.target===e.currentTarget&&t(!1)},onKeyDown:e=>{e.target===e.currentTarget&&"Escape"===e.key&&t(!1)},children:(0,i.jsxs)("div",{className:"relative w-full",style:{maxWidth:"600px",maxHeight:"90svh",margin:"16px",borderRadius:"16px",backgroundColor:"#FFF7E9",overflow:"hidden",display:"flex",flexDirection:"column"},children:[(0,i.jsx)("button",{type:"button",onClick:()=>t(!1),"aria-label":"Close",className:"absolute flex items-center justify-center",style:{top:"20px",right:"20px",width:"32px",height:"32px",border:"none",background:"#FFF7E9",cursor:"pointer",color:"#1C1C1C",padding:"2px",zIndex:20},children:(0,i.jsxs)("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",style:{opacity:.35},children:[(0,i.jsx)("title",{children:"Close"}),(0,i.jsx)("path",{d:"M2 2l12 12M14 2L2 14",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round"})]})}),(0,i.jsx)("div",{"aria-hidden":"true",className:"lg:hidden",style:{position:"absolute",top:0,left:0,right:0,height:"8px",background:"linear-gradient(to bottom, #FFF7E9 60%, transparent)",pointerEvents:"none",zIndex:10,borderRadius:"16px 16px 0 0"}}),(0,i.jsx)("div",{"aria-hidden":"true",className:"lg:hidden",style:{position:"absolute",bottom:0,left:0,right:0,height:"8px",background:"linear-gradient(to top, #FFF7E9 60%, transparent)",pointerEvents:"none",zIndex:10,borderRadius:"0 0 16px 16px"}}),(0,i.jsxs)("div",{className:"px-[40px] pt-[64px] pb-[64px] lg:pt-[36px]",style:{overflowY:"auto",flex:1},children:[(0,i.jsx)("h2",{className:"font-normal font-serif text-brown normal-case",style:{fontSize:"28px",lineHeight:"1.16",letterSpacing:"-0.02em",marginBottom:"8px",maxWidth:"440px"},children:"See if you qualify for\xa0Daylight"}),(0,i.jsx)("p",{className:"font-sans",style:{fontSize:"15px",lineHeight:"1.5",letterSpacing:"-0.02em",color:"rgba(76,40,6,0.7)",marginBottom:"24px"},children:"Qualify in under 60\xa0seconds."}),(0,i.jsx)("div",{"aria-hidden":"true",style:{height:"1px",backgroundColor:"rgba(76,40,6,0.18)",marginBottom:"32px"}}),(0,i.jsx)(o.QualifyForm,{initialAddress:l.address,initialCity:l.city,initialState:l.state,initialZip:l.zip},s.current)]})]})}):null},b=e=>{let{items:t}=e,[l,o]=(0,a.useState)(null);return(0,i.jsx)("div",{className:"flex flex-col",style:{borderTop:"1px solid rgba(76,40,6,0.15)"},children:t.map((e,t)=>{let a=l===t;return(0,i.jsxs)("div",{style:{borderBottom:"1px solid rgba(76,40,6,0.15)"},children:[(0,i.jsxs)("button",{type:"button",onClick:()=>o(a?null:t),className:"flex w-full items-center justify-between gap-24 py-24 text-left lg:py-28",style:{background:"transparent",border:"none",cursor:"pointer"},"aria-expanded":a,children:[(0,i.jsx)("span",{className:"font-normal font-serif text-brown normal-case",style:{fontSize:"clamp(20px, 2vw, 28px)",lineHeight:"1.2",letterSpacing:"-0.02em"},children:e.q}),(0,i.jsx)("span",{"aria-hidden":"true",className:"flex h-32 w-32 items-center justify-center transition-transform duration-300",style:{color:"#4C2806",transform:a?"rotate(45deg)":"rotate(0deg)",flexShrink:0},children:(0,i.jsxs)("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[(0,i.jsx)("title",{children:"Toggle"}),(0,i.jsx)("path",{d:"M8 2v12M2 8h12",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})]})})]}),(0,i.jsx)("div",{style:{display:"grid",gridTemplateRows:a?"1fr":"0fr",transition:"grid-template-rows 0.5s cubic-bezier(0.16, 1.08, 0.38, 0.98)"},children:(0,i.jsx)("div",{style:{overflow:"hidden"},children:(0,i.jsx)("p",{className:"pb-28 font-sans",style:{fontSize:"16px",lineHeight:"1.6",color:"#F66F00",letterSpacing:"-0.02em",maxWidth:"720px",opacity:+!!a,transform:a?"translateY(0)":"translateY(-8px)",transition:"opacity 0.4s cubic-bezier(0.16, 1.08, 0.38, 0.98) 0.1s, transform 0.4s cubic-bezier(0.16, 1.08, 0.38, 0.98) 0.1s"},children:e.a})})})]},e.q)})})}}}]);