\n *,
\n *::before,
\n *::after {
\n box-sizing: border-box;
\n }<\/p>\n
* {
\n margin: 0;
\n }<\/p>\n
img,
\n picture,
\n video,
\n canvas,
\n svg {
\n display: block;
\n max-width: 100%;
\n }<\/p>\n
ul,
\n ol {
\n list-style: none;
\n padding: 0;
\n }<\/p>\n
button {
\n font-family: var(–font-family);
\n }<\/p>\n
.w-full {
\n width: 100%;
\n }<\/p>\n
.static {
\n position: static;
\n}<\/p>\n
.container {
\n container-type: inline-size;
\n margin: var(–phx-spacing-lg, 20px) auto;
\n font-family: var(–font-family, EuclidCircularB);
\n font-size: var(–phx-body-md, 16px);
\n width: 100%;
\n }<\/p>\n
.widgetContainer {
\n margin: 0 auto;
\n width: 100%;
\n display: flex;
\n flex-direction: column;
\n justify-content: center;
\n text-align: center;<\/p>\n
padding: var(–phx-spacing-lg, 20px) var(–phx-spacing-md3, 15px);
\n border: var(–phx-spacing-4xs, 1px) solid #e3e7ed;
\n box-shadow:
\n var(–phx-4dp-shadow-2, 0 4px 8px -1px rgba(0, 0, 0, 0.1)),
\n var(–phx-4dp-shadow-1, 0 0 1 0 rgba(0, 0, 0, 0.05));
\n border-radius: var(–phx-spacing-sm, 8px);
\n position: relative;
\n overflow: hidden;
\n }
\n .inputButtonWrapper {
\n display: flex;
\n flex-direction: row;
\n width: fit-content;
\n margin: 0 auto;
\n gap: var(–phx-spacing-md2, 16px);
\n max-width: 620px;
\n @container (max-width: 720px) {
\n flex-direction: column;
\n }
\n }
\n .buttonConatiner {
\n min-width: 269px;
\n display: flex;
\n flex-direction: column;
\n @container (max-width: 720px) {
\n max-width: 330px;
\n }
\n @container (max-width: 380px) {
\n max-width: 330px;
\n min-width: 185px;
\n }
\n }<\/p>\n
.ctaButton {
\n font-size: var(–phx-title-md, 16px);
\n line-height: var(–phx-spacing-xl, 24px);
\n height: 52px;
\n }<\/p>\n
.fadeShadow {
\n box-shadow: var(–phx-4dp-shadow-2, 0 4px 8px -1px rgba(0, 0, 0, 0.1));
\n }<\/p>\n
.zipcodeInput {
\n font-size: var(–phx-label-md, 14px);
\n font-weight: 400;
\n flex: 1;
\n min-width: 269px;
\n line-height: var(–phx-spacing-xl, 24px);
\n text-align: start;
\n @container (max-width: 720px) {
\n max-width: 330px;
\n }
\n @container (max-width: 340px) {
\n max-width: 330px;
\n min-width: 185px;
\n }
\n }<\/p>\n
.label {
\n font-weight: 600;
\n font-size: var(–phx-label-md, 14px);
\n line-height: var(–phx-spacing-md2, 16px);
\n margin-bottom: var(–phx-spacing-2xs, 4px);
\n }<\/p>\n
.title {
\n font-family: var(–font-family);
\n font-size: var(–phx-heading-md, 24px);
\n line-height: var(–phx-display, 32px);
\n font-weight: 600;<\/p>\n
@container (max-width: 720px) {
\n display: none;
\n }
\n }
\n .titleMobile {
\n display: none;
\n @container (max-width: 720px) {
\n display: block;
\n font-family: var(–font-family);
\n font-size: var(–phx-heading-md, 24px);
\n line-height: var(–phx-display, 32px);
\n font-weight: 600;
\n }
\n }<\/p>\n
.subTitle {
\n display: block;
\n font-family: var(–phx-font-family-subtitle, “Georgia”);
\n font-weight: 400;
\n font-size: var(–phx-title-md, 16px);
\n color: var(–phx-fg-caption, #616a76);
\n line-height: var(–phx-spacing-xl, 24px,);
\n margin-bottom: var(–phx-spacing-xl, 24px);
\n margin-top: var(–phx-spacing-2xs, 4px);
\n @container (max-width: 720px) {
\n line-height: var(–phx-spacing-lg, 20px);
\n margin-bottom: var(–phx-spacing-lg, 20px);
\n margin-top: var(–phx-spacing-xs, 6px);
\n }
\n }<\/p>\n
.securedContainer {
\n display: flex;
\n flex-direction: row;
\n justify-content: center;
\n width: 100%;
\n margin-top: var(–phx-spacing-sm, 8px);
\n @container (min-width: 720px) {
\n margin-top: var(–phx-spacing-3xs, 2px);
\n }
\n }<\/p>\n
.securedText {
\n color: var(–phx-fg-stroke-ui, #7f8b9a);
\n font-size: var(–phx-label-xs, 10px);
\n }<\/p>\n
.lockIcon {
\n margin-right: var(–phx-spacing-3xs, 2px);
\n }<\/p>\n
.horizontal-line {
\n @container (max-width: 720px) {
\n height: var(–phx-spacing-4xs, var(–phx-spacing-4xs, 1px));
\n width: 100%;
\n background-color: #eceff3;
\n margin-top: var(–phx-spacing-md2, 16px);
\n margin-bottom: var(–phx-spacing-md, 12px);
\n }
\n }<\/p>\n
.logoWrapper {
\n display: block;
\n @container (max-width: 720px) {
\n display: none;
\n }
\n }
\n .logoWrapperMobile {
\n display: none;
\n @container (max-width: 720px) {
\n display: block;
\n margin: 0 auto;
\n max-width: 330px;
\n }
\n }<\/p>\n
.logoContainer {
\n display: flex;
\n flex-wrap: wrap;
\n justify-content: center; \/* center last row if incomplete *\/
\n @container (min-width: 720px) {
\n display: flex;
\n justify-content: space-between;
\n max-width: 554px;
\n margin: var(–phx-spacing-md2, 16px) auto;
\n }
\n }<\/p>\n
.logo {
\n display: flex;
\n justify-content: center;
\n align-items: center;
\n @container (max-width: 720px) {
\n flex: 0 1 calc(33.333% – var(–phx-spacing-md2, 16px)); \/* 3 per row, accounting for gap *\/
\n margin-top: var(–phx-spacing-md2, 16px);
\n margin-right: var(–phx-spacing-md, 12px);
\n }
\n }<\/p>\n
.btn-container {
\n display: inline-flex;
\n flex-direction: column;
\n }<\/p>\n
.btn-width {
\n width: var(–wui-global-cta-width, auto);
\n min-width: var(–wui-global-cta-min-width);
\n &.full {
\n width: 100%;
\n }<\/p>\n
&.xl {
\n width: 100%;
\n max-width: 304px;<\/p>\n
@media (min-width: 1024px) {
\n max-width: 280px;
\n }
\n }
\n }
\n .btn {
\n box-sizing: border-box;
\n font-family: var(–font-family);
\n min-height: 40px;
\n padding: 12px 16px;
\n border-radius: var(–wui-global-cta-border-radius, 8px);
\n display: inline-flex;
\n gap: 8px;
\n align-items: center;
\n justify-content: var(–wui-global-cta-justify, space-between);
\n border: none;
\n appearance: none;
\n cursor: pointer;
\n position: relative;
\n text-decoration: none;
\n outline: none;
\n font-size: var(–wui-button-font-size, var(–phx-body-md, 16px));
\n text-transform: var(–wui-global-cta-text-transform);
\n background: var(–phx-button-primary-bg, #35b782);
\n color: var(–phx-button-primary-text, #fff);
\n font-weight: 600;<\/p>\n
&:hover {
\n background: var(–phx-button-primary-hover-bg, #35b782);
\n box-shadow: var(–phx-4dp-shadow-2), var(–phx-4dp-shadow-1);
\n }<\/p>\n
&:active {
\n background: var(
\n –phx-button-primary-pressed-bg,
\n var(–phx-button-primary-bg, #35b782)
\n );
\n }<\/p>\n
&:focus-within {
\n box-shadow:
\n 0 0 0 3px white,
\n 0 0 0 6px var(–phx-button-primary-focused-border, #80caf4);
\n outline: none;
\n }<\/p>\n
&.disabled {
\n background: var(–phx-button-primary-disabled-bg);
\n opacity: 0.5;
\n pointer-events: none;
\n box-shadow: none;
\n outline: none;
\n }<\/p>\n
&.secondary {
\n background: var(–phx-button-secondary-bg, #f5f7ff);
\n border: 1px solid var(–phx-button-secondary-border, #4657a1);
\n color: var(–phx-button-secondary-text, #4657a1);<\/p>\n
&:hover {
\n background: var(–phx-button-secondary-hover-bg, #f5f7ff);
\n border-width: 2px;
\n }<\/p>\n
&:focus-within {
\n border-width: 2px;
\n }<\/p>\n
&:active {
\n background: var(
\n –phx-button-secondary-pressed-bg,
\n var(–phx-button-secondary-bg, #f5f7ff)
\n );
\n border-width: 2px;
\n }<\/p>\n
&.disabled {
\n background: var(–phx-button-secondary-disabled-bg);
\n }
\n }<\/p>\n
&.ghost {
\n background: transparent;
\n color: var(–phx-button-ghost-text);
\n border: 0;<\/p>\n
&:hover {
\n background: var(–phx-button-ghost-hover-bg);
\n }<\/p>\n
&:active {
\n background: var(–phx-button-ghost-pressed-bg);
\n }<\/p>\n
&.disabled {
\n background: var(–phx-button-ghost-disabled-bg);
\n }
\n }<\/p>\n
.btn__icon {
\n display: flex;
\n justify-content: center;
\n align-items: center;
\n height: 24px;
\n aspect-ratio: 1;
\n }<\/p>\n
.btn__text–with-icon {
\n display: flex;
\n gap: 8px;
\n align-items: center;
\n }<\/p>\n
&.lg {
\n height: 48px;
\n min-height: 48px;
\n font-size: 16px;
\n }<\/p>\n
&.xl {
\n @media (min-width: 1024px) {
\n min-height: 64px;
\n }
\n }
\n }<\/p>\n
.shadow {
\n box-shadow: var(
\n –wui-global-cta-primary-shadow,
\n 0 4px 12px rgba(0, 0, 0, 0.2)
\n );
\n }
\n .btn–center {
\n justify-content: center;
\n .btn__text {
\n margin: 0 auto;
\n }
\n }<\/p>\n
.btn–left {
\n justify-content: space-between;
\n }<\/p>\n
.btn–mobile-center {
\n justify-content: center;
\n @media (min-width: 768px) {
\n justify-content: space-between;
\n }
\n }<\/p>\n
.btn-sub-text {
\n font-weight: var(–wui-global-cta-sub-text-font-weight);
\n font-size: 0.75rem;
\n line-height: 1rem;
\n text-align: var(–wui-global-cta-sub-text-align, center);
\n padding-top: 0.5rem;
\n }<\/p>\n
.btn__call-icon {
\n background-image: var(
\n –wui-global-cta-phone-icon,
\n url(“\/wui\/assets\/shared\/phone2.svg”)
\n );
\n background-repeat: no-repeat;
\n background-position: center;
\n display: block;
\n height: 24px;
\n width: 24px;
\n }
\n<\/p>\n