/* MAIN */
.main {padding-block: 0.75rem 6rem; transition: var(--trans-4);}
.main .container {max-width: 100%; padding: 0;}
.main .wrapper {display: grid; grid-template-columns: repeat(2, 1fr);  gap: 24px; transition: var(--trans-4);}
.main .image {position: sticky; top: 2rem; height: 100%; max-height: 44rem;}
.main .image img {width: 100%; height: 100%; object-fit: cover; border-radius: 20px; transition: var(--trans-4);}
.main .packages {background-color: var(--_c-sky-lght); padding: 2.125rem 2.25rem 2.25rem 2.5rem; border-radius: 20px; transition: var(--trans-4);}
.main .head {text-align: center; margin-bottom: 4.375rem;}
.main .head > :first-child {font-family: var(--ff-tertiary); font-size: var(--fs-xl, 50px); letter-spacing: -3px; margin-bottom: 2px;}
.main .head p {max-width: 28.125rem; font-size: var(--fs-md, 25px); letter-spacing: 0.3px; margin-inline: auto;}
.main .plans form {display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; transition: var(--trans-4);}
.main .plans > :first-child {display: block; font-size: var(--fs-xs, 14px); color: var(--_c-black-700); margin-bottom: 12px;}
.main .plan {background-color: #fff; padding: 0.75rem 1.25rem 1.25rem; border-radius: 22px; transition: var(--trans-4);}
.main .plan:has(input[type="radio"]:checked) {box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 10%);}
.main .plan input[type="radio"] {display: none;}
.main .plan input[type="radio"]:checked + .radio::before {position: absolute; inset: 0; width: 0.75rem; height: 0.75rem; background-color: var(--c-primary-drk-900); border-radius: 50%; margin: auto; content: '';}
.main .plan .data {display: flex; align-items: center; gap: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid var(--_c-black-700);}
.main .plan * {line-height: 1;}
.main .plan.special {background-color: var(--c-dark);}
.main .plan.special *  {color: #fff;}
.main .plan.special .data > p {font-size: var(--fs-sm, 1.125rem); line-height: 1.35;}
.main .plan.special .data {border-color: #ffffffbf;}



.main .data .radio {position: relative; flex: none; display: block; width: 1.25rem; height: 1.25rem; background-color: #fff; border: 1px solid var(--_c-black-700); border-radius: 50%;}
.main .data div > * {display: block; font-size: var(--fs-sm, 20px);}
.main .data div > :first-child {color: #000; margin-bottom: 4px;}
.main .data div > :nth-child(2) {color: var(--c-text);}
.main .price {display: flex; align-items: center; justify-content: space-between; padding-top: 0.5rem;}
.main .price > * {font-size: var(--fs-sm, 20px); color: #000;}
.main .btns {grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: start; justify-content: end; gap: 0.625rem 1rem;}
.main .btns > .btn__primary.light {background-color: transparent; color: var(--_c-black-700); border: 1px solid var(--_c-black-700);} 
.main .btns > .btn__primary.light:hover {background-color: var(--c-dark); color: #fff;}
.main .btns > .btn__primary {background-color: var(--c-primary-drk-900); margin-top: 0.625rem;} 
.main .btns > .btn__primary:hover {background-color: transparent; color: var(--c-primary-drk-900);}
.main .btns > :first-child {display: block; font-size: var(--fs-xs, 14px); color: var(--c-text); margin-right: auto;}
.main .note {display: grid; grid-template-columns: repeat(2, 1fr); transition: var(--trans-4);} 
.main .note > :first-child {display: block; height: fit-content; font-size: var(--fs-xs, 14px); color: var(--c-text); margin-top: 4px;}
.main .note ul {padding-left: 1.5rem; margin-top: 1rem;}
.main .note li {list-style: disc; font-size: var(--fs-xs, 14px); line-height: 1;}
.main .note li:not(:last-of-type) {margin-bottom: 3px;}

/* {{{ INSTALL }}} */
.install {padding-block: 2.75rem 3rem; background-color: var(--_c-sky-lght); transition: var(--trans-6);}
.install .head {text-align: center; margin-bottom: 2.75rem; transition: var(--trans-4);}
.install .head > :first-child {font-family: var(--ff-tertiary); font-size: var(--fs-xl, 50px);}
.install .head > :nth-child(2) {font-size: var(--fs-sm, 20px); color: #000;}
.install .wrapper {display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.875rem; transition: var(--trans-4);}
.install .card {width: 100%; max-width: 30rem; height: fit-content; display: flex; flex-direction: column; align-items: center; text-align: center; background-color: #fff; padding: 2.875rem 1.875rem 0; border-radius: 16px; transition: var(--trans-4);}
.install .card > :first-child {width: 2.625rem; height: 2.625rem; display: flex; align-items: center; justify-content: center; font-size: var(--fs-sm, 20px); line-height: 1; background-color: var(--c-primary-drk-900); color: #fff; border-radius: 50%; margin-bottom: 1rem;}
.install .card p {font-size: var(--fs-sm, 20px); line-height: 22px; letter-spacing: 0; color: var(--_c-black-600); margin-bottom: 3rem;}
.install .card img {width: 100%; height: 18rem; object-fit: contain;}

/* {{{ CHOOSE }}} */
.choose {padding-top: 3rem;}
.choose .title {text-align: center; margin-bottom: 30px;}
.choose .title > :first-child {font-family: var(--ff-tertiary); font-size: var(--fs-xl, 50px);}
.choose .wrapper {display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem 14px;}
.choose .card {height: 100%; background-color: var(--_c-sky-lght); padding: 2rem 2.5rem 2rem 1.75rem; border-radius: 20px;}
.choose .card .icon {width: 50px; height: 50px; margin-bottom: 2rem;}
.choose .card > :nth-child(2) {max-width: 80%; font-size: var(--fs-md, 25px); line-height: 32px; margin-bottom: 1.25rem;}
.choose .card p {font-size: var(--fs-xs, 14px);}

/* {{{ CTA }}} */
.cta {margin-block: 2.75rem;}
.cta .container {max-width: 100%; padding-inline: 62px;}
.cta .main {position: relative; display: flex; align-items: center; justify-content: space-between; background-repeat: no-repeat; background-position: center; background-size: contain; background-color: var(--c-primary-drk-900); padding: 1rem 3rem; border-radius: 40px;}
.cta .main::before {position: absolute; inset: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 65%); border-radius: 40px; z-index: 1;}
.cta .main > :first-child {position: relative; max-width: 200px; font-family: var(--ff-tertiary); font-size: var(--fs-lg, 36px); line-height: 1.26; color: #fff; z-index: 2;}
.cta .main .image {position: absolute; inset: 0; margin-inline: auto; width: fit-content; height: 100%;}
.cta .main .image img {width: 100%; height: 100%; object-fit: cover; border-radius: 40px;}
.cta .main .info {position: relative; max-width: 272px; z-index: 2;}
.cta .main .info * {color: var(--_c-sky-lght);}
.cta .main .info > :first-child {font-size: var(--fs-xs, 14px); margin-bottom: 22px;}
.cta .main .info .btn__primary {background-color: transparent; border: 1px solid #fff;}
.cta .main .info .btn__primary:hover {background-color: #fff; color: var(--c-primary-drk-900);}

/* ACCORDIONS */
.faq {padding-block: 2.5rem 3.5rem; background-color: #000; margin-bottom: 2.25rem; transition: var(--trans-6);}
.faq .container {padding-inline: 1.25rem;}
.faq .title {text-align: center; margin-bottom: 2.5rem; transition: var(--trans-4);}
.faq .title > :first-child {font-family: var(--ff-tertiary); font-size: var(--fs-xl, 50px); color: #fff; margin-bottom: 20px;}
.faq .accordion {background-color: rgba(255, 255, 255, 20%); border-radius: 100px;}
.faq .accordion * {color: #fff;}
.faq .accordion:not(:last-of-type) {margin-bottom: 1.25rem;}
.faq .accordion:has(.collapse.show) {border-radius: 30px;}
.faq .accordion button {position: relative; width: 100%; display: block; font-family: var(--ff-primary); font-size: calc(var(--fs-md, 28px) - 3px); text-align: left; padding: 1.25rem 5.3rem 1.25rem 1.875rem; border: 1px solid #fff; border-radius: 100px;}
.faq .accordion button::after {position: absolute; inset: 0 1.875rem 0 auto; width: 2.25rem; height: 2.25rem; background: no-repeat center/cover url('../images/icons/down-arrow.png'); filter: invert(1); margin-block: auto; z-index: 2; content: '';}
.faq .accordion:not(:has(.collapse.show)) button:hover {border-radius: 100px; box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 10%);}
.faq .accordion:has(.collapse.show) button::after {transform: rotate(180deg); transition: var(--trans-4);}
.faq .accordion .collapse {max-height: 0; display: none; padding-block: 1.25rem 3.75rem; border-top: 1px solid var(--_c-black-700); margin-inline: 1.875rem; opacity: 0; visibility: hidden; transition: max-height 0.5s ease, opacity 0.5s ease, visibility 0.5s ease;}
.faq .accordion .collapse.show {max-height: 100%; opacity: 1; visibility: visible; display: block;}
.faq .collapse h3 {font-size: calc(var(--fs-md, 28px) - 3px);}
.faq .collapse h4 {font-size: calc(var(--fs-sm, 20px) + 3px);}
.faq .collapse h5 {font-size: var(--fs-sm, 20px);}
.faq .collapse h6 {font-size: var(--fs-base, 16px);}
.faq .collapse :where(h3, h4, h5, h6) {font-weight: 500; margin-bottom: 1rem;}
.faq .collapse p {font-size: calc(var(--fs-md, 28px) - 3px); }
.faq .collapse p strong {font-weight: 500;}
.faq .collapse > p:not(:last-child) {margin-bottom: 2.5rem;}

@media only screen and (max-width: 1400px) {
    /* Cta */
	.cta .main::before {content: '';}
}

@media only screen and (max-width: 1200px) {
    /* Main */
    .main {padding-bottom: 5rem;}
    .main .plans form {grid-template-columns: 1fr;}
    /* Install*/
    .install .wrapper {gap: 1.25rem;}
    /* Choose */
    .choose .wrapper {display: flex;}
    .choose .card {margin-inline: 7px;}
}

@media only screen and (max-width: 991px) {
    /* Main */
    .main {padding-bottom: 4.25rem;}
    .main .image img {max-height: 40rem;}
    .main .wrapper {grid-template-columns: 1fr;}
    .main .image {position: static;}
    .main .plans form {grid-template-columns: repeat(2, 1fr);}
    /* Install*/
    .install {padding-block: 2.25rem 3.5rem;}
    .install .head {margin-bottom: 2.75rem;}
    .install .wrapper {grid-template-columns: repeat(2, 1fr); place-items: center;}
    .install .card:nth-of-type(3) {grid-column: span 2;}
    /* Choose */
    .choose {padding-top: 2.5rem;}
    .choose .card {padding: 1.5rem 2rem 1.5rem 1.25rem;}
    .choose .card > :nth-child(2) {max-width: 100%;}
    /* Cta */
    .cta {margin-block: 2rem;}
    .cta .container {max-width: calc(100% - 60px);}
    .cta .main {padding: 2rem;}
    /* Faq */
    .faq .collapse p {font-size: var(--fs-sm);}
}

@media only screen and (max-width: 767px) {
    /* Main */
    .main {padding-bottom: 3.5rem;}
    .main .image img {max-height: 25rem;}
    .main .head {margin-bottom: 3.125rem;}
    .main .head p {font-size: var(--fs-md);}
    /* Install*/
    .install .wrapper {grid-template-columns: 1fr;}
    .install .card:nth-of-type(3) {grid-column: auto;}
     /* Cta */
    .cta .container {max-width: calc(100% - 30px);}
    .cta .main {flex-direction: column; gap: 20px; text-align: center;}
    .cta .main::before {background-color: rgba(0, 0, 0, 80%);}
    .cta .main .btn__primary {margin-inline: auto;}
}

@media only screen and (max-width: 575px) {
    /* Main */
	.main {padding-bottom: 2.5rem;}
    .main .head {margin-bottom: 2.5rem;}
    .main .wrapper {gap: 1.125rem; padding-bottom: 1rem;}
    .main .packages {padding: 1.5rem;}
    .main .plans form {grid-template-columns: 1fr;}
    .main .btns {flex-direction: row; flex-wrap: wrap; justify-content: space-between; row-gap: 0.5rem;}
    .main .btns > .btn__primary {margin: 0;}
    .main .note {grid-template-columns: 1fr; gap: 0.625rem; padding-top: 0.5rem;}
    .main .note > :is(:first-child, ul) {padding: 0; margin: 0;}
    .main .note li {list-style-position: inside; line-height: 1.5;}
    .main .note li:not(:last-of-type) {margin: 0;}
    /* Install*/
    .install {padding-block: 1.875rem 2.5rem;}
    .install .head {margin-bottom: 1.875rem;}
    .install .card {padding: 1.875rem 1.25rem 0;}
    .install .card p {margin-bottom: 2rem;}
    /* Choose */
    .choose {padding-top: 36px;}
    .choose .title {margin-bottom: 20px;}
    .choose .card .icon {width: 42px; height: 42px; margin-bottom: 1.25rem;}
    .choose .card > :nth-child(2) {margin-bottom: 12px;}
    /* Cta */
    .cta {margin-block: 1.25rem;}
    .cta .container {max-width: 100%;}
    .cta .main,
    .cta .main::before,
    .cta .main .image img {border-radius: 30px;}
    .cta .main .info {max-width: 100%;}
    /* FAQ */
    .faq .title > :first-child {line-height: 1.2; margin-bottom: 10px;}
    .faq .accordion button,
    .faq .collapse .installation > :first-child,
    .faq .installation .device > :first-child {font-size: var(--fs-sm);}
    .faq .accordion button {padding: 1rem 3.25rem 1rem 1rem;}
    .faq .accordion button::after {right: 1rem; width: 1.875rem; height: 1.875rem;}
    .faq .accordion .collapse {padding-block: 1rem 2.25rem;}
    .faq .accordion .collapse {margin-inline: 1rem;}
    .faq .collapse > p:not(:last-child) {margin-bottom: 1.5rem;}
}

@media only screen and (max-width: 475px) {
    /* Main */
	.main {padding-bottom: 2rem;}
    .main .btns {flex-direction: column; flex-wrap: wrap; align-items: center; justify-content: center;}
}