@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* || CSS Reset */

/*
Josh's Custom CSS Reset
https://www.joshwcomeau.com/css/custom-css-reset/
*/

*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
}

body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html,
body {
    height: 100%;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

input,
button,
textarea,
select {
    font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

p {
    overflow-wrap: break-word;
    text-wrap: pretty;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    text-wrap: balance;
}

#root,
#__next {
    isolation: isolate;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        interpolate-size: allow-keywords;
    }

    :root {
        scroll-behavior: smooth;
    }
}

/* || Variables */

:root {

    /* ------------------ COLORS ------------------ */

    /* Base palette */

    --clr-orange: #F96C3B;
    --clr-orange-300: rgba(249, 108, 59, 0.3);
    --clr-orange-600: hsl(15, 94%, 53%);
    --clr-grey: #A6A6A6;
    --clr-white: #FFF;
    --clr-white-soft: #F8F8FA;
    --clr-white-500: #F9FAFB;
    --clr-black: #191A15;
    --clr-dark-blue: #161C28;
    --clr-dark-blue-300: #222938;

    /* ------------------ SEMANTIC COLOR ROLES ------------------ */

    /* Header */
    --clr-header-text-logo: var(--clr-orange);
    --clr-header-text-btn-login: var(--clr-grey);
    --clr-header-text-btn-login-active: var(--clr-black);
    --clr-header-text-nav-link: var(--clr-grey);
    --clr-header-text-nav-link-active: var(--clr-black);
    --clr-header-bg-nav-content: var(--clr-white);
    --clr-header-bg-nav-overlay: var(--clr-orange-300);
    --clr-header-bg-nav-btn-open-icon: var(--clr-orange);
    --clr-header-bg-nav-btn-close-icon: var(--clr-orange);
    --clr-header-text-btn-signup: var(--clr-white);
    --clr-header-bg-btn-signup: var(--clr-orange);
    --clr-header-bg-btn-signup-hover: var(--clr-orange-600);

    /* Hero */
    --clr-hero-text-headline: var(--clr-black);
    --clr-hero-bg-border-vector: var(--clr-orange);
    --clr-hero-text-btn-try-free-trial: var(--clr-white);
    --clr-hero-bg-btn-try-free-trial: var(--clr-orange);
    --clr-hero-bg-btn-try-free-trial-hover: var(--clr-orange-600);

    /* Social-proof */
    --clr-social-proof-text-headline: var(--clr-black);
    --clr-social-proof-text-company-name: var(--clr-grey);

    /* Support */
    --clr-support-text-headline: var(--clr-black);
    --clr-support-text-subheadline: var(--clr-grey);
    --clr-support-text-rater: var(--clr-grey);
    --clr-support-text-feature-title: var(--clr-black);
    --clr-support-text-feature-desc: var(--clr-grey);

    /* Features */
    --clr-features-text-headline: var(--clr-black);
    --clr-features-text-desc: var(--clr-grey);
    --clr-features-text-btn-get-started: var(--clr-white);
    --clr-features-bg-btn-get-started: var(--clr-orange);
    --clr-features-bg-btn-get-started-hover: var(--clr-orange-600);
    --clr-features-text-feature-title: var(--clr-black);
    --clr-features-text-feature-desc: var(--clr-grey);

    /* Benefits */
    --clr-benefits-text-headline: var(--clr-black);
    --clr-benefits-text-benefit: var(--clr-black);
    --clr-benefits-bg-benefit-icon: var(--clr-orange);

    /* Pricing */
    --clr-pricing-text-headline: var(--clr-black);
    --clr-pricing-text-subheadline: var(--clr-grey);
    --clr-pricing-bg-pricing-options: var(--clr-white-soft);
    --clr-pricing-bg-pricing-option: var(--clr-white-soft);
    --clr-pricing-bg-pricing-option-hover: var(--clr-white);
    --clr-pricing-bg-pricing-option-input-checked: var(--clr-orange);
    --clr-pricing-text-pricing-option: var(--clr-black);
    --clr-pricing-text-pricing-option-input-checked: var(--clr-white);

    --clr-pricing-text-pricing-plan-headline: var(--clr-black);
    --clr-pricing-text-pricing-plan-subheadline: var(--clr-grey);
    --clr-pricing-text-pricing-plan-price: var(--clr-black);
    --clr-pricing-text-pricing-plan-dollar-sign: var(--clr-grey);

    --clr-pricing-bg-pricing-plan-card: var(--clr-white-500);
    --clr-pricing-bg-pricing-plan-card-input-checked: var(--clr-white);
    --clr-pricing-bg-pricing-plan-feature-icon: var(--clr-orange);
    --clr-pricing-text-btn-pricing-plan: var(--clr-orange);
    --clr-pricing-text-btn-pricing-plan-input-checked: var(--clr-white);
    --clr-pricing-bg-btn-pricing-plan: var(--clr-white);
    --clr-pricing-bg-btn-pricing-plan-input-checked: var(--clr-orange);

    --clr-pricing-bg-pricing-plan-input-checked: var(--clr-orange);
    --clr-pricing-text-pricing-plan-input-checked: var(--clr-white);

    /* Testimonials-contact-form */
    --clr-testimonials-contact-form-bg: var(--clr-dark-blue);
    --clr-testimonials-text-headline: var(--clr-white);
    --clr-testimonials-text-subheadline: var(--clr-grey);
    --clr-testimonials-text-testimonial: var(--clr-grey);
    --clr-testimonials-text-testimonials-author: var(--clr-grey);

    --clr-contact-form-bg: var(--clr-dark-blue-300);
    --clr-contact-form-text: var(--clr-white);
    --clr-contact-form-text-placeholder: var(--clr-grey);
    --clr-contact-form-bg-submit-btn: var(--clr-orange);
    --clr-contact-form-bg-submit-btn-hover: var(--clr-orange-600);
    --clr-contact-form-text-submit-btn: var(--clr-white);
    --clr-contact-form-text-free-trial-link: var(--clr-grey);
    --clr-contact-form-text-free-trial: var(--clr-white);

    /* Footer */
    --clr-footer-bg: var(--clr-dark-blue);
    --clr-footer-text-logo: var(--clr-orange);
    --clr-footer-text-subheadline: var(--clr-grey);
    --clr-footer-text-email-placeholder: var(--clr-grey);
    --clr-footer-email-border: var(--clr-grey);
    --clr-footer-bg-email-submit-btn: var(--clr-orange);
    --clr-footer-bg-email-submit-btn-hover: var(--clr-orange-600);
    --clr-footer-text-link-headline: var(--clr-white);
    --clr-footer-text-link: var(--clr-grey);
    --clr-footer-text-link-hover: var(--clr-white-soft);
    --clr-footer-text-copyright-notice: var(--clr-white);
    --clr-footer-text-terms-and-conditions: var(--clr-white);

    /* ------------------ TYPOGRAPHY ------------------ */

    --ff-primary: "Inter", sans-serif;

    /* 14px (12–14px) */
    --fs-xs: clamp(0.75rem, 0.714rem + 0.179vw, 0.875rem);

    /* 16px (12–16px) */
    --fs-sm: clamp(0.75rem, 0.679rem + 0.357vw, 1rem);

    /* 18px (14–18px) */
    --fs-md: clamp(0.875rem, 0.804rem + 0.357vw, 1.125rem);

    /* 28px (18–28px) */
    --fs-lg: clamp(1.125rem, 0.946rem + 0.893vw, 1.75rem);

    /* 30px (18–30px) */
    --fs-xl: clamp(1.125rem, 0.911rem + 1.071vw, 1.875rem);

    /* 40px (24–40px) */
    --fs-2xl: clamp(1.5rem, 1.214rem + 1.429vw, 2.5rem);

    /* 50px (30–50px) */
    --fs-3xl: clamp(1.875rem, 1.518rem + 1.786vw, 3.125rem);

    /* 80px (28–80px) */
    --fs-4xl: clamp(1.75rem, 0.821rem + 4.643vw, 5rem);

    --fw-thin: 100;
    --fw-extra-light: 200;
    --fw-light: 300;
    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semi-bold: 600;
    --fw-bold: 700;
    --fw-extra-bold: 800;
    --fw-black: 900;
    --fw-extra-black: 950;

    /* ------------------ SPACING (paddings/gaps) ------------------ */

    /* 10px */
    --space-xs: .625rem;

    /* 20px (~12px to 20px) */
    --space-sm: clamp(0.75rem, 0.6071428571428572rem + 0.7142857142857143vw, 1.25rem);

    /* 30px (~16px to 30px) */
    --space-md: clamp(1rem, 0.75rem + 1.25vw, 1.875rem);

    /* 40px (~8px to 40px) */
    --space-md-plus: clamp(0.5rem, -0.0714285714285714rem + 2.857142857142857vw, 2.5rem);

    /* 50px (30px to 50px) */
    --space-lg: clamp(1.875rem, 1.5178571428571428rem + 1.7857142857142856vw, 3.125rem);

    /* 60px (30px to 60px) */
    --space-lg-2: clamp(1.875rem, 1.3392857142857144rem + 2.6785714285714284vw, 3.75rem);

    /* 70px (40px to 70px) */
    --space-lg-3: clamp(2.5rem, 1.9642857142857144rem + 2.6785714285714284vw, 4.375rem);

    /* 80px (50px to 80px) */
    --space-lg-4: clamp(3.125rem, 2.5892857142857144rem + 2.6785714285714284vw, 5rem);

    /* 100px */
    --space-lg-5: 6.25rem;

    /* 130px (60px to 130px) */
    --space-xl: clamp(3.75rem, 2.5rem + 6.25vw, 8.125rem);

    /* 160px (40px to 160px) */
    --space-2xl: clamp(2.5rem, 0.3571428571428572rem + 10.714285714285714vw, 10rem);

    /* ------------------ CUSTOM SPACING ------------------ */

    /* 6px */
    --spacing-button-input-pricing-option-top-bottom: clamp(0.375rem, 0.26785714285714285rem + 0.5357142857142857vw, 0.75rem);

    /* 8px */
    --spacing-button-input-pricing-options-padding: .5rem;

    --spacing-button-get-started-padding-top-bottom: clamp(0.5rem, 0.32142857142857145rem + 0.8928571428571428vw, 1.125rem);

    --spacing-footer-email-submit-btn-padding-all: clamp(0.5rem, 0.4285714285714286rem + 0.35714285714285715vw, 0.75rem);

    --spacing-gap-button-view-demo: clamp(0.5rem, 0.39285714285714285rem + 0.5357142857142857vw, 0.875rem);

    /* 12px */
    --spacing-header-nav-padding: clamp(0.75rem, 0.6785714285714286rem + 0.35714285714285715vw, 1rem);

    --spacing-pricing-plan-card-padding-top-bottom: clamp(0.75rem, 0.5178571428571428rem + 1.1607142857142858vw, 1.5625rem);

    /* 15px */
    --spacing-gap-pricing-plan-header: .9375rem;

    --spacing-footer-email-padding-top-bottom: .9375rem;

    /* 16px */
    --spacing-contact-form-padding-top-bottom: 1rem;

    --spacing-pricing-plan-card-padding-inline: clamp(1rem, 0.6607142857142858rem + 1.6964285714285714vw, 2.1875rem);

    /* 18px */
    --spacing-gap-support-rating: 1.125rem;

    --spacing-button-get-started-padding-inline: clamp(1.125rem, 0.9107142857142857rem + 1.0714285714285714vw, 1.875rem);

    --spacing-button-pricing-plan-padding-top-bottom: 1.125rem;

    /* 20px */
    --spacing-contact-form-padding-bottom: clamp(1.25rem, 0.4464285714285715rem + 4.017857142857142vw, 4.0625rem);

    --spacing-contact-form-padding-inline: clamp(1.25rem, 0.08928571428571441rem + 5.803571428571428vw, 5.3125rem);

    --spacing-gap-features-header: clamp(1.25rem, -0.4464285714285716rem + 8.482142857142858vw, 7.1875rem);

    /* 25px */
    --spacing-pricing-plan-padding-bottom: 1.5625rem;

    /* 32px */
    --spacing-testimonials-contact-form-padding-sm: 2rem;

    --spacing-benefits-benefit-padding-inline-start: calc(clamp(1.25rem, 1.0357142857142856rem + 1.0714285714285714vw, 2rem) + 1.25rem);

    --spacing-pricing-plan-feature-padding-inline-start: calc(clamp(1.25rem, 1.0357142857142856rem + 1.0714285714285714vw, 2rem) + 1.25rem);

    /* 35px */
    --spacing-gap-hero-section: 2.1875rem;

    /* 45px */
    --spacing-gap-features-content: 2.8125rem;

    /* 50px */
    --spacing-gap-benefits-section: clamp(3.125rem, 1.6071428571428572rem + 7.5892857142857135vw, 8.4375rem);

    --spacing-nav-close-btn-margin-bottom: clamp(3.125rem, 1.6071428571428572rem + 7.5892857142857135vw, 8.4375rem);

    /* 65px */
    --spacing-button-pricing-plan-padding-inline: 4.0625rem;

    --spacing-footer-links-container: 4.0625rem;

    /* 75px */
    --spacing-gap-features-section: 4.6875rem;

    /* ------------------ SPACING SEMANTICS ------------------ */

    /* Body */
    --spacing-wrapper: var(--space-xl);
    --spacing-sections: var(--space-xl);

    /* Header */
    --spacing-header-block-start-padding: var(--space-md-plus);
    --spacing-header-block-end-padding: var(--space-xl);
    --spacing-gap-header-nav-links: var(--space-lg-2);
    --spacing-header-nav-links-padding-inline-end: var(--space-xl);
    --spacing-header-nav-content-padding: var(--space-md);
    --spacing-header-nav-content-close-btn-margin-bottom: var(--spacing-nav-close-btn-margin-bottom);
    --spacing-header-nav-padding-inline: var(--spacing-header-nav-padding);
    --spacing-button-signup-padding: var(--space-xs);

    /* Main */

    /* Hero */
    --spacing-gap-hero-content: var(--space-lg);
    --spacing-gap-hero-cta-buttons: var(--space-md-plus);
    --spacing-button-try-free-trial-padding: var(--space-sm) var(--space-md);

    /* Social-Proof */
    --spacing-gap-social-proof-companies-sm: var(--space-xs);
    --spacing-gap-social-proof-companies-lg: var(--space-lg);
    --min-company-logo-width: 6.25rem;
    --spacing-gap-social-proof: var(--space-lg-2);

    /* Support */
    --spacing-support: var(--space-md);
    --spacing-support-headline-bottom-margin: var(--space-md);
    --spacing-support-subheadline-bottom-margin: var(--space-lg-3);
    --spacing-gap-support-ratings: var(--space-lg-4);
    --spacing-gap-support-features: var(--space-md);
    --spacing-gap-support-feature: var(--space-sm);
    --spacing-gap-support-feature-content: var(--space-xs);

    /* Features */
    --spacing-button-get-started-padding: var(--spacing-button-get-started-padding-top-bottom) var(--spacing-button-get-started-padding-inline);

    --spacing-gap-features-feature: var(--space-md);
    --spacing-gap-features-feature-text: var(--space-sm);

    /* Benefits */
    --spacing-gap-benefits-content: var(--space-lg);
    --spacing-gap-benefits-list: var(--space-md);

    /* Pricing */
    --spacing-gap-pricing-section: var(--space-lg-2);
    --spacing-gap-pricing-header: var(--space-md-plus);
    --spacing-button-input-pricing-option: var(--spacing-button-input-pricing-option-top-bottom) var(--space-md-plus);
    --spacing-pricing-options: var(--space-sm);

    --spacing-pricing-plan-padding: var(--space-md-plus) var(--space-sm) var(--spacing-pricing-plan-padding-bottom);

    --spacing-gap-pricing-plan: var(--space-md);
    --spacing-pricing-plan-card-padding: var(--spacing-pricing-plan-card-padding-top-bottom) var(--spacing-pricing-plan-card-padding-inline);

    --spacing-gap-pricing-plan-card: var(--space-md);
    --spacing-gap-pricing-list: var(--space-md);
    --spacing-button-pricing-plan: var(--spacing-button-pricing-plan-padding-top-bottom) var(--spacing-button-pricing-plan-padding-inline);

    --spacing-gap-pricing-plans: var(--space-lg);

    /* Testimonials/Contact-Form */
    --spacing-testimonials-contact-form-padding-top-bottom: var(--space-xl);
    --spacing-testimonials-contact-form-padding-inline-sm: var(--spacing-testimonials-contact-form-padding-sm);

    --spacing-testimonials-contact-form-padding-inline-lg: var(--space-xl);
    --spacing-gap-testimonials-contact-form: var(--space-lg-5);
    --spacing-gap-testimonials: var(--space-lg);
    --spacing-gap-testimonials-author-icons: var(--space-sm);
    --spacing-contact-form-padding: var(--space-md-plus) var(--spacing-contact-form-padding-inline) var(--spacing-contact-form-padding-bottom);

    --spacing-gap-contact-form: var(--space-sm);
    --spacing-gap-contact-form-form: var(--space-sm);
    --spacing-contact-form-input-padding: var(--spacing-contact-form-padding-top-bottom) 0 var(--spacing-contact-form-padding-top-bottom) var(--space-sm);

    --spacing-contact-form-submit-btn-padding-top-bottom: var(--space-sm);

    /* Footer */
    --spacing-gap-footer: var(--space-lg-2);
    --spacing-footer-padding-block-start: var(--space-lg);
    --spacing-footer-padding-inline-lg: var(--space-xl);
    --spacing-footer-cta: var(--space-md);
    --spacing-footer-email-padding: var(--spacing-footer-email-padding-top-bottom) 0 var(--spacing-footer-email-padding-top-bottom) var(--space-sm);

    --spacing-footer-email-submit-btn-padding: var(--spacing-footer-email-submit-btn-padding-all);
    --spacing-gap-footer-links-container: var(--spacing-footer-links-container);
    --spacing-gap-footer-links: var(--space-md);
    --spacing-gap-footer-links-list: var(--space-sm);
    --spacing-gap-footer-legal-info: var(--space-xs);
    --spacing-footer-block-end-padding: var(--space-md-plus);

    /* ------------------ LINE-HEIGHT  ------------------*/
    --lh-auto: auto;

    /* 30 */
    --lh-s: 1.875rem;

    /* 72 (40px to 72px) */
    --lh-m: clamp(2.5rem, 1.9285714285714286rem + 2.857142857142857vw, 4.5rem);

    /* 90 (45px to 90px) */
    --lh-l: clamp(2.8125rem, 2.0089285714285716rem + 4.017857142857142vw, 5.625rem);

    /* ------------------ BORDER-RADIUS ------------------ */
    /* 10 */
    --radius-sm: .625rem;

    /* 20 */
    --radius-md: 1.25rem;

    /* 40 */
    --radius-lg: 2.5rem;

    /* 70 */
    --radius-xl: 4.375rem;
}

/* --------------------------------------
Breakpoints Reference (for clarity)
--------------------------------------

Mobile (small)     : 0px     – 479px
Width sm : 480px

Mobile (medium)    : 480px   – 767px
Tablet (portrait)  : 768px   – 1023px
width md: 768px

Tablet (landscape) : 1024px  – 1199px
Laptop/Desktop     : 1200px  – 1439px
width lg: 1200px

Large screens      : 1440px+
width xl: 1440px

-------------------------------------- 
*/


/* || Globals */

body {
    position: relative;
    min-block-size: 100vh;
    font-family: var(--ff-primary);
    font-size: var(--fs-sm);
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

.wrapper {
    width: 100%;
    max-inline-size: 90rem;
    padding-inline: 1rem;
    margin: 0 auto;

    /* === Tablets === */
    @media screen and (width > 768px) {
        padding-inline: var(--spacing-wrapper);
        /* padding-inline: 0; */
    }
}

a {
    text-decoration: none;
}

button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
}

a,
button {
    -webkit-tap-highlight-color: transparent;
}

ul {
    list-style-type: none;
    padding: 0;
}

.no-scroll {
    overflow-y: hidden;
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

/* || Utility classes */

.btn {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    line-height: var(--lh-auto);
}

.hide-on-desktop {
    @media screen and (width >=75em) {
        display: none;
    }
}

.flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.flex-center-col {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.list-item--tick {
    position: relative;
}

.list-item--tick::before {
    content: "";
    position: absolute;
    left: 0;
    top: 15%;
    width: clamp(1.25rem, 1.0357142857142856rem + 1.0714285714285714vw, 2rem);
    height: clamp(1.25rem, 1.0357142857142856rem + 1.0714285714285714vw, 2rem);
    background: url("/assets/images/icon-orange-tick.png") no-repeat center;
    border-radius: 50%;

    /* === tablets === */
    @media screen and (width >=48rem) {
        top: 10%;
    }

    /* === desktops === */
    @media screen and (width >=75em) {
        top: 0;
    }
}

/* || Header */

.header {
    padding-block-start: var(--spacing-header-block-start-padding);
    padding-block-end: var(--spacing-header-block-end-padding);
}

.header__logo .header__logo-link {
    font-size: var(--fs-3xl);
    font-weight: var(--fw-semi-bold);
    line-height: var(--lh-s);
    color: var(--clr-header-text-logo);
}

.header__logo-img {
    width: var(--fs-xl);
}

.header__nav {
    flex: 1;
    display: flex;
    flex-direction: row-reverse;
    padding-inline: var(--spacing-header-nav-padding-inline);
}

.nav__button-icon {
    width: var(--fs-xl);
    height: var(--fs-xl);
}

.nav__button-open-icon {
    color: var(--clr-header-bg-nav-btn-open-icon);
}

.nav__button-close-icon {
    color: var(--clr-header-bg-nav-btn-close-icon);
}

.nav__button--open[aria-expanded="true"]~.nav__drawer {
    translate: 0;

    @media (prefers-reduced-motion) {
        opacity: 1;
    }
}

.nav__button--open[aria-expanded="true"]~.nav__overlay {
    opacity: 1;
}

.nav__button--close {
    margin-inline-start: auto;
    margin-block-end: var(--spacing-header-nav-content-close-btn-margin-bottom);
}


.nav__drawer {

    /* === Mobiles and up === */
    @media screen and (width <=75em) {
        display: none;
        flex-direction: column;
        position: fixed;
        inset: 0 0 0 120px;
        background-color: var(--clr-header-bg-nav-content);
        z-index: 1;
        padding: var(--spacing-header-nav-content-padding);
        translate: 100vw 0;
        transition: translate 0.5s ease-in-out;
    }
}

.nav__overlay {
    display: none;
    position: fixed;
    inset: 0;
    background-color: var(--clr-header-bg-nav-overlay);
    z-index: 1;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    pointer-events: none;
}

.header__nav-links {
    gap: var(--spacing-gap-header-nav-links);

    /*===Desktops===*/
    @media screen and (width >=75em) {
        flex-direction: row;
        padding-inline-end: var(--spacing-header-nav-links-padding-inline-end);
    }
}

.header__nav-link {
    color: var(--clr-header-text-nav-link);
    transition: color 0.2s ease-in-out;
}

.header__nav-link:hover,
.header__nav-link:active {
    color: var(--clr-header-text-nav-link-active);
}

.header__buttons {
    gap: var(--space-sm);
}

.header__buttons .header__button--login {
    color: var(--clr-header-text-btn-login);
    transition: color 0.2s ease-in-out;
}

.header__button--login:hover,
.header__button--login:active {
    color: var(--clr-header-text-btn-login-active);
}

.header__buttons .header__button--signup {
    color: var(--clr-header-text-btn-signup);
    background-color: var(--clr-header-bg-btn-signup);
    padding: var(--spacing-button-signup-padding);
    border-radius: var(--radius-sm);
}

.header__button--signup:hover,
.header__button--signup:active {
    background-color: var(--clr-header-bg-btn-signup-hover);
}

/* || Main */

.main {
    flex-direction: column;
    gap: var(--spacing-sections);
    width: 100%;
}

/* || section hero */

.hero {
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: var(--spacing-gap-hero-section);

    /* === Desktops === */
    @media screen and (width >=75em) {
        flex-direction: row;
        text-align: left;
    }
}

.hero__content {
    gap: var(--spacing-gap-hero-content);
    color: var(--clr-hero-text-headline);

    /* === Desktops === */
    @media screen and (width >=75em) {
        flex: 1;
        align-items: flex-start;
    }
}

.hero__headline {
    font-weight: var(--fw-bold);
    font-size: var(--fs-4xl);
    line-height: var(--lh-l);
}

.hero__vector-img {
    width: clamp(28.125rem, 27.589285714285715rem + 2.6785714285714284vw, 30rem);
    height: clamp(0.9375rem, 0.6696428571428572rem + 1.3392857142857142vw, 1.875rem);
    background-color: transparent;
}

.hero__subheadline {
    font-weight: var(--fw-medium);
    font-size: var(--fs-md);
    line-height: var(--lh-auto);
}

.hero__cta-buttons {
    gap: var(--spacing-gap-hero-cta-buttons);
}

.hero__cta-button {
    font-weight: var(--fw-medium);
    font-size: var(--fs-md);
    line-height: var(--lh-auto);
}

.hero__cta-button--try-free-trial {
    color: var(--clr-hero-text-btn-try-free-trial);
    background-color: var(--clr-hero-bg-btn-try-free-trial);
    padding: var(--spacing-button-try-free-trial-padding);
    border-radius: var(--radius-lg);
}

.hero__cta-button--try-free-trial:hover,
.hero__cta-button--try-free-trial:active {
    background-color: var(--clr-hero-bg-btn-try-free-trial-hover);
}

.hero__cta-button--view-demo {
    gap: var(--spacing-gap-button-view-demo);
}

.hero__visual {
    flex-direction: column;

    /* === Desktops === */
    @media screen and (width >=75em) {
        flex: 1;
    }
}

.hero__visual-main-container {
    position: relative;
    display: inline-block;
}

.hero__visual-main {
    display: block;
    width: clamp(12.5rem, 8.75rem + 18.75vw, 25.625rem);
}

/* === Floating Labels === */

.hero__visual-image {
    position: absolute;
}

.hero__visual .hero__visual-credit-card {
    top: 147px;
    right: -44px;
    width: clamp(5.625rem, 3.6964285714285716rem + 9.642857142857142vw, 12.375rem);

    /* === Tablets === */
    @media screen and (width >=48rem) {
        top: 200px;
        right: -75px;
    }

    /* === desktops === */
    @media screen and (width >=75em) {
        top: 290px;
        right: -111px;
    }
}

.hero__visual .hero__visual-amount {
    top: 12px;
    left: -43px;
    width: clamp(7.8125rem, 5.366071428571429rem + 12.232142857142856vw, 16.375rem);

    /* === Tablets === */
    @media screen and (width >=48rem) {
        left: -115px;
    }

    /* === desktops === */
    @media screen and (width >=75em) {
        top: 30px;
        right: -180px;
    }
}

.hero__visual .hero__visual-total-income {
    bottom: 12px;
    left: -45px;
    width: clamp(4.6875rem, 3.5625rem + 5.625vw, 8.625rem);

    /* === Tablets === */
    @media screen and (width >=48rem) {
        bottom: 20px;
        left: -55px;
    }

    /* === desktops === */
    @media screen and (width >=75em) {
        bottom: 35px;
        left: -76px;
    }
}

.hero__visual .hero__visual-tick,
.hero__visual .hero__visual-database,
.hero__visual .hero__visual-messages {
    width: clamp(1.25rem, 0.893rem + 1.786vw, 2.5rem);
}

.hero__visual .hero__visual-tick {
    top: 92px;
    left: -25px;

    /* === tablets === */
    @media screen and (width >=48rem) {
        top: 130px;
        left: -35px;
    }

    /* === desktops === */
    @media screen and (width >=75em) {
        top: 185px;
        left: -45px;
    }
}

.hero__visual .hero__visual-database {
    top: 12px;
    right: -12px;

    /* === tablets === */
    @media screen and (width >=48rem) {
        top: 12px;
        right: -15px;
    }

    /* === desktops === */
    @media screen and (width >=75em) {
        top: 26px;
        right: -26px;
    }
}

.hero__visual .hero__visual-messages {
    bottom: -12px;
    right: 36px;

    /* === tablets === */
    @media screen and (width >=48rem) {
        bottom: -15px;
        right: 45px;
    }

    /* === desktops === */
    @media screen and (width >=75em) {
        bottom: -32px;
        right: 55px;
    }
}

/* || section social-proof */

.social-proof {
    gap: var(--spacing-gap-social-proof);
    width: 100%;
    text-align: center;
}

.social-proof__headline {
    font-weight: var(--fw-bold);
    font-size: var(--fs-2xl);
    color: var(--clr-social-proof-text-headline);
}

.social-proof__companies {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--min-company-logo-width), 1fr));
    row-gap: var(--space-md);
    place-items: center;

    /* === tablets === */
    @media screen and (width >=48rem) {
        row-gap: 0;
    }
}

.social-proof__company {
    gap: var(--spacing-gap-social-proof-companies-sm);
}

.social-proof__company-logo {
    width: clamp(1.25rem, 1.0714285714285714rem + 0.8928571428571428vw, 1.875rem);
}

.social-proof__company-name {
    font-weight: var(--fw-semi-bold);
    font-size: var(--fs-xl);
    color: var(--clr-social-proof-text-company-name);
}

/* || section support */

.support {
    gap: var(--spacing-support);
    text-align: center;

    /* === desktops === */
    @media screen and (width >=75em) {
        flex-direction: row;
        align-items: flex-start;
        text-align: left;
    }
}

.support__content {

    /* === desktops === */
    @media screen and (width >=75em) {
        align-items: flex-start;
    }
}

.support__headline {
    font-weight: var(--fw-semi-bold);
    font-size: var(--fs-3xl);
    color: var(--clr-support-text-headline);
    margin-block-end: var(--spacing-support-headline-bottom-margin);
}

.support__subheadline {
    font-weight: var(--fw-medium);
    font-size: var(--fs-sm);
    line-height: var(--lh-s);
    color: var(--clr-support-text-subheadline);
    margin-block-end: var(--spacing-support-subheadline-bottom-margin);
}

.support__ratings {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: var(--spacing-gap-support-ratings);

    /* === desktops === */
    @media screen and (width >=75em) {
        justify-content: flex-start;
    }
}

.support__rating {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-gap-support-rating);
    font-size: var(--fs-md);
}

.support__rating-stars {
    display: flex;
}

.support__rating-star {
    width: clamp(1.125rem, 0.9821428571428572rem + 0.7142857142857143vw, 1.625rem);
}

.support__rating-stat {
    .rating {
        font-weight: var(--fw-bold);
    }

    font-weight: var(--fw-medium);
}

.support__rating-rater {
    font-weight: var(--fw-bold);
    font-size: var(--fs-md);
    color: var(--clr-support-text-rater);
}

.support-features {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-gap-support-features);
}

.support-feature {
    gap: var(--spacing-gap-support-feature);

    /* === desktops === */
    @media screen and (width >=75em) {
        flex-direction: row;
        align-items: flex-start;
        text-align: left;
    }
}

.support-feature__icon {
    width: clamp(2.5rem, 2.142857142857143rem + 1.7857142857142856vw, 3.75rem);
    flex-shrink: 0;
}

.support-feature__content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-gap-support-feature-content);
}

.support-feature__title {
    font-weight: var(--fw-bold);
    font-size: var(--fs-xl);
    color: var(--clr-support-text-feature-title);
}

.support-feature__description {
    font-weight: var(--fw-medium);
    font-size: var(--fs-md);
    line-height: var(--lh-s);
    color: var(--clr-support-text-feature-desc);
}

/* || section features */

.features {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-gap-features-section);
}

.features__header {
    gap: var(--spacing-gap-features-header);
    text-align: center;

    /* === desktops === */
    @media screen and (width >=75em) {
        flex-direction: row;
    }
}

.features__headline {
    font-weight: var(--fw-semi-bold);
    font-size: var(--fs-3xl);
    color: var(--clr-features-text-headline);

    /* === desktops === */
    @media screen and (width >=75em) {
        flex: 1;
    }
}

.features__description {
    font-weight: var(--fw-medium);
    font-size: var(--fs-md);
    line-height: var(--lh-s);
    color: var(--clr-features-text-desc);

    /* === desktops === */
    @media screen and (width >=75em) {
        flex: 1;
    }
}

.features__button {
    font-weight: var(--fw-medium);
    font-size: var(--fs-md);
    line-height: var(--lh-s);
    color: var(--clr-features-text-btn-get-started);
    background-color: var(--clr-features-bg-btn-get-started);
    padding: var(--spacing-button-get-started-padding);
    border-radius: var(--radius-xl);

    /* === desktops === */
    @media screen and (width >=75em) {
        flex: 1;
    }
}

.features__button:hover,
.features__button:active {
    background-color: var(--clr-features-bg-btn-get-started-hover);
}

.features__content {
    gap: var(--spacing-gap-features-content);

    /* === desktops === */
    @media screen and (width >=75em) {
        flex-direction: row;
        align-items: flex-start;
    }
}

.features__feature {
    gap: var(--spacing-gap-features-feature);
}

.features__feature-image {
    width: clamp(12.5rem, 9.571428571428571rem + 14.642857142857144vw, 22.75rem);
}

.features__feature-text {
    gap: var(--spacing-gap-features-feature-text);
}

.features__feature-title {
    font-weight: var(--fw-bold);
    font-size: var(--fs-xl);
    line-height: var(--lh-s);
    color: var(--clr-features-text-feature-title);
}

.features__feature-description {
    font-weight: var(--fw-medium);
    font-size: var(--fs-md);
    line-height: var(--lh-s);
    color: var(--clr-features-text-feature-desc);
}

/* || section benefits */

.benefits {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-gap-benefits-section);

    /* === desktops === */
    @media screen and (width >=75em) {
        flex-direction: row;
    }
}

.benefits__content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-gap-benefits-content);
}

.benefits__headline {
    font-weight: var(--fw-bold);
    font-size: var(--fs-3xl);
    text-align: center;
    color: var(--clr-benefits-text-headline);

    /* === desktops === */
    @media screen and (width >=75em) {
        text-align: left;
    }
}

.benefits__list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-gap-benefits-list);
}

.benefits__benefit {
    font-weight: var(--fw-medium);
    font-size: var(--fs-md);
    line-height: var(--lh-s);
    color: var(--clr-benefits-text-benefit);
    padding-inline-start: var(--spacing-benefits-benefit-padding-inline-start);
}

.benefits__visual {
    flex-direction: column;
}

.benefits__visual-main-container {
    position: relative;
    display: inline-block;
}

.benefits__visual-main {
    display: block;
    width: clamp(12.5rem, 8.035714285714286rem + 22.32142857142857vw, 28.125rem);
}

/* === Floating labels === */

.benefits__visual-image {
    position: absolute;
}

.benefits__visual .benefits__visual-user {
    top: 15px;
    left: -42px;
    width: clamp(10.625rem, 7.9107142857142865rem + 13.571428571428571vw, 20.125rem);

    /* === tablets === */
    @media screen and (width >=48rem) {
        left: -105px;
    }

    /* === desktops === */
    @media screen and (width >=75em) {
        top: 36px;
        left: -125px;
    }
}

.benefits__visual .benefits__visual-total-income {
    top: 50px;
    right: -42px;
    width: clamp(4.6875rem, 3.5625rem + 5.625vw, 8.625rem);

    /* === tablets === */
    @media screen and (width >=48rem) {
        top: 75px;
    }

    /* === desktops === */
    @media screen and (width >=75em) {
        top: 120px;
        right: -70px;
    }
}

.benefits__visual .benefits__visual-icon-image {
    top: 125px;
    left: -25px;
    width: clamp(1.25rem, 0.8928571428571429rem + 1.7857142857142856vw, 2.5rem);

    /* === tablets === */
    @media screen and (width >=48rem) {
        top: 200px;
        left: -35px;
    }

    /* === desktops === */
    @media screen and (width >=75em) {
        top: 290px;
        left: -55px;
    }
}

.benefits__visual .benefits__visual-money {
    bottom: -28px;
    left: -45px;
    width: clamp(9.375rem, 6.339285714285714rem + 15.178571428571427vw, 20rem);

    /* === tablets === */
    @media screen and (width >=48rem) {
        left: -78px;
    }

    /* === desktops === */
    @media screen and (width >=75em) {
        bottom: -33px;
        left: -112px;
    }
}

/* || section pricing */

.pricing {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-gap-pricing-section);
}

/* === Header === */

.pricing__header {
    text-align: center;
    gap: var(--spacing-gap-pricing-header);
}

.pricing__headline {
    font-weight: var(--fw-bold);
    font-size: var(--fs-3xl);
    line-height: var(--lh-m);
    color: var(--clr-pricing-text-headline);
}

.pricing__subheadline {
    font-weight: var(--fw-bold);
    font-size: var(--fs-md);
    color: var(--clr-pricing-text-subheadline);
}


/* === Options Toggle === */

.pricing__options {
    display: flex;
    align-items: center;
    gap: var(--spacing-pricing-options);
    padding: var(--spacing-button-input-pricing-options-padding);
    border-radius: var(--radius-sm);
    background-color: var(--clr-pricing-bg-pricing-options);
}

.pricing__option input[type="radio"] {
    display: none;
}

.pricing__option {
    cursor: pointer;
    padding: var(--spacing-button-input-pricing-option);
    border-radius: var(--radius-sm);
    font-weight: var(--fw-medium);
    font-size: var(--fs-md);
    line-height: var(--lh-s);
    color: var(--clr-pricing-text-pricing-option);
    background-color: var(--clr-pricing-bg-pricing-option);
    transition: background-color 0.2s ease-in-out;
}

.pricing__option:hover,
.pricing__option:active {
    background-color: var(--clr-pricing-bg-pricing-option-hover);
}

.pricing__option:has(input:checked) {
    background-color: var(--clr-pricing-bg-pricing-option-input-checked);
    color: var(--clr-pricing-text-pricing-option-input-checked);
}

/* === Plans === */

.pricing__plans {
    gap: var(--spacing-gap-pricing-plans);

    /* === desktops === */
    @media screen and (width >=75em) {
        flex-direction: row;
        align-items: flex-start;
    }
}

.pricing__plan-option input[type="radio"] {
    display: none;
}

.pricing__plan {
    gap: var(--spacing-gap-pricing-plan);
    text-align: center;
    padding: var(--spacing-pricing-plan-padding);
    box-shadow: 0 4px 4px 0 hsla(0, 0%, 0%, 0.25);
    border-radius: var(--radius-md);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}


/* === Plan Header === */

.pricing__plan-header {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-gap-pricing-plan-header);
}

.pricing__plan-headline {
    font-weight: var(--fw-semi-bold);
    font-size: var(--fs-2xl);
    color: var(--clr-pricing-text-pricing-plan-headline);
}

.pricing__plan-subheadline {
    font-weight: var(--fw-medium);
    font-size: var(--fs-md);
    line-height: var(--lh-s);
    color: var(--clr-pricing-text-pricing-plan-subheadline);
}

.pricing__plan-price {
    font-weight: var(--fw-semi-bold);
    font-size: var(--fs-3xl);
    line-height: var(--lh-s);
    color: var(--clr-pricing-text-pricing-plan-price);

    .dollar-sign {
        font-weight: var(--fw-medium);
        font-size: var(--fs-md);
        color: var(--clr-pricing-text-pricing-plan-dollar-sign);
        position: relative;
        top: -0.5em;
    }
}

/* === Save (if used later) === */
.pricing__plan-save {
    display: none;
}

/* === Plan Card Details === */

.pricing__plan-card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-gap-pricing-plan-card);
    padding: var(--spacing-pricing-plan-card-padding);
    background-color: var(--clr-pricing-bg-pricing-plan-card);
    border-radius: var(--radius-sm);
}

/* === Features List === */
.pricing__plan-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-gap-pricing-list);
    text-align: left;
}

.pricing__plan-feature {
    font-weight: var(--fw-medium);
    font-size: var(--fs-md);
    line-height: var(--lh-s);
    color: var(--clr-benefits-text-benefit);
    padding-inline-start: var(--spacing-pricing-plan-feature-padding-inline-start);
}

/* === CTA Button === */
.pricing__plan-button {
    font-weight: var(--fw-semi-bold);
    font-size: var(--fs-md);
    line-height: var(--lh-s);
    background-color: var(--clr-pricing-bg-btn-pricing-plan);
    color: var(--clr-pricing-text-btn-pricing-plan);
    padding: var(--spacing-button-pricing-plan);
    border-radius: var(--radius-md);
}

/* Pricing plan selected */
.pricing__plan-option:has(input:checked) {
    .pricing__plan {
        background-color: var(--clr-pricing-bg-pricing-plan-input-checked);
    }

    .pricing__plan-headline,
    .pricing__plan-subheadline,
    .pricing__plan-price,
    .dollar-sign {
        color: var(--clr-pricing-text-pricing-plan-input-checked);
    }

    .pricing__plan-card {
        background-color: var(--clr-pricing-bg-pricing-plan-card-input-checked);
    }

    .pricing__plan-button {
        background-color: var(--clr-pricing-bg-btn-pricing-plan-input-checked);
        color: var(--clr-pricing-text-btn-pricing-plan-input-checked);
    }
}

/* === tablets === */
@media screen and (width >=48rem) {
    .pricing__plan-option:has(input:checked) .pricing__plan {
        transform: scale(1.05);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    }
}

/* || section testimonials + contact-form */

.testimonials-contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-gap-testimonials-contact-form);
    width: 100%;
    background-color: var(--clr-testimonials-contact-form-bg);
    padding-block: var(--spacing-testimonials-contact-form-padding-top-bottom);
    padding-inline: var(--spacing-testimonials-contact-form-padding-inline-sm);

    @media screen and (width > 768px) {
        padding-inline: var(--spacing-testimonials-contact-form-padding-inline-lg);
    }

    /* === desktops === */
    @media screen and (width >=75em) {
        flex-direction: row;
    }
}

/* === Testimonials === */

.testimonials {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-gap-testimonials);

    /* === desktops === */
    @media screen and (width >=75em) {
        flex: 1;
    }
}

.testimonials__headline {
    font-weight: var(--fw-semi-bold);
    font-size: var(--fs-3xl);
    color: var(--clr-testimonials-text-headline);
}

.testimonials__subheadline {
    font-weight: var(--fw-medium);
    font-size: var(--fs-md);
    line-height: var(--lh-s);
    color: var(--clr-testimonials-text-subheadline);
}

.testimonials__quote-mark {
    img {
        width: clamp(1.5625rem, 1.2053571428571428rem + 1.7857142857142856vw, 2.8125rem);
    }
}

.testimonials__testimonial {
    font-weight: var(--fw-medium);
    font-size: var(--fs-md);
    line-height: var(--lh-s);
    color: var(--clr-testimonials-text-testimonial);
}

.testimonials__author {
    font-weight: var(--fw-medium);
    font-size: var(--fs-md);
    line-height: var(--lh-s);
    color: var(--clr-testimonials-text-testimonials-author);
}

.testimonials__author-icons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-gap-testimonials-author-icons);
}

.testimonials__author-icon {
    width: clamp(2.5rem, 2.0357142857142856rem + 2.3214285714285716vw, 4.125rem);
}

/* === Contact Form === */

.contact-form {
    gap: var(--spacing-gap-contact-form);
    text-align: center;
    padding: var(--spacing-contact-form-padding);
    border-radius: var(--radius-md);
    color: var(--clr-contact-form-text);
    background-color: var(--clr-contact-form-bg);

    /* === desktops === */
    @media screen and (width >=75em) {
        flex: 1;
    }
}

.contact-form__image {
    width: clamp(2.5rem, 1.9107142857142856rem + 2.946428571428571vw, 4.5625rem);
}

.contact-form__headline {
    font-weight: var(--fw-medium);
    font-size: var(--fs-xl);
}

.contact-form__form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-gap-contact-form);
    width: 100%;
    text-align: left;
}

.contact-form__label {
    font-weight: var(--fw-medium);
    font-size: var(--fs-md);
}

.contact-form__input {
    padding: var(--spacing-contact-form-input-padding);
    border-radius: var(--radius-sm);
}

.contact-form__input::placeholder {
    font-weight: var(--fw-medium);
    font-size: var(--fs-xs);
    color: var(--clr-contact-form-text-placeholder);
}

.contact-form__submit-btn {
    font-weight: var(--fw-semi-bold);
    font-size: var(--fs-sm);
    color: var(--clr-contact-form-text-submit-btn);
    background-color: var(--clr-contact-form-bg-submit-btn);
    padding-block: var(--spacing-contact-form-submit-btn-padding-top-bottom);
    border-radius: var(--radius-sm);
}

.contact-form__submit-btn:hover,
.contact-form__submit-btn:active {
    background-color: var(--clr-contact-form-bg-submit-btn-hover);
}

.contact-form__free-trial-link {
    align-self: flex-end;
    font-weight: var(--fw-medium);
    font-size: var(--fs-xs);
    color: var(--clr-contact-form-text-free-trial-link);

    .free-trial {
        color: var(--clr-contact-form-text-free-trial);
    }
}

/* || Footer */

.footer {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-gap-footer);
    background-color: var(--clr-footer-bg);
    padding-block: var(--spacing-footer-padding-block-start) var(--spacing-footer-block-end-padding);
    padding-inline: 1rem;

    @media screen and (width > 480px) {
        padding-inline: var(--spacing-footer-padding-inline-lg);
    }
}

/* === Main === */

.footer__main {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xl);

    /* === desktops === */
    @media screen and (width >=75em) {
        flex-direction: row;
    }
}

/* === CTA Column === */

.footer__cta {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-footer-cta);

    /* === desktops === */
    @media screen and (width >=75em) {
        flex: 1;
    }
}

.footer__logo {
    font-weight: var(--fw-semi-bold);
    font-size: var(--fs-3xl);
    line-height: var(--lh-s);
    color: var(--clr-footer-text-logo);
}

.footer__subheadline {
    font-weight: var(--fw-medium);
    font-size: var(--fs-md);
    color: var(--clr-footer-text-subheadline);
}


/* === Email Input === */

.footer__email-input {
    position: relative;
}

.footer__email {
    width: 100%;
    padding: var(--spacing-footer-email-padding);
    border-radius: var(--radius-xl);
    background-color: transparent;
    border: 2px solid var(--clr-footer-email-border);
}

.footer__email::placeholder {
    font-weight: var(--fw-medium);
    font-size: var(--fs-md);
    color: var(--clr-footer-text-email-placeholder);
}

.footer__email-submit-btn {
    position: absolute;
    right: 6px;
    top: 6px;
    padding: var(--spacing-footer-email-submit-btn-padding);
    border-radius: 50%;
    background-color: var(--clr-footer-bg-email-submit-btn);
}

.footer__email-submit-btn:hover,
.footer__email-submit-btn:active {
    background-color: var(--clr-footer-bg-email-submit-btn-hover);
}

/* === Links === */

.footer__links-container {
    flex-wrap: wrap;
    gap: var(--spacing-gap-footer-links-container);

    /* === desktops === */
    @media screen and (width >=75em) {
        flex: 1;
    }
}

.footer__links {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-gap-footer-links);
}

.footer__links-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-gap-footer-links-list);
}

.footer__link-headline {
    font-weight: var(--fw-medium);
    font-size: var(--fs-md);
    color: var(--clr-footer-text-link-headline);
}

.footer__link {
    font-weight: var(--fw-medium);
    font-size: var(--fs-md);
    color: var(--clr-footer-text-link);
}

.footer__link:hover {
    color: var(--clr-footer-text-link-hover);
}

/* === Legal Info === */

.footer__legal-info {
    gap: var(--spacing-gap-footer-legal-info);

    .copyright-notice {
        color: var(--clr-footer-text-copyright-notice);
    }

    .terms-and-conditions-privacy,
    .terms-and-conditions-privacy p,
    .terms-and-conditions-privacy a {
        color: var(--clr-footer-text-terms-and-conditions);
    }

    /* === desktops === */
    @media screen and (width >=75em) {
        flex-direction: row;
        justify-content: space-between;
    }
}

/* full bleed styles for screens smaller than 480px */
.full-bleed {
    width: 100vw;
}

.background-blur-ellipse {
    position: absolute;
    width: clamp(15.625rem, 8.839285714285714rem + 33.92857142857143vw, 39.375rem);
    height: clamp(15.625rem, 8.839285714285714rem + 33.92857142857143vw, 39.375rem);
    background-color: #FFD6D6;
    filter: blur(1000px);
    border-radius: 50%;
    pointer-events: none;
    display: none;

    @media screen and (width >=75rem) {
        display: block;
    }
}

.background-blur-ellipse-header-1 {
    top: -450px;
    left: -450px;
}

.background-blur-ellipse-header-2 {
    top: -534px;
    left: 492px;
}

.background-blur-ellipse-header-3 {
    background-color: transparent;
    top: 162px;
    left: 120px;
}

.background-blur-ellipse-header-4 {
    background-color: transparent;
    top: 162px;
    left: 660px;
}

.background-blur-ellipse-header-5 {
    background-color: #F96C3B;
    top: 140px;
    left: 1300px;
}

.background-blur-ellipse-features-1 {
    top: 1840px;
    left: -500px;
}

.background-blur-ellipse-pricing-1 {
    background-color: #F96C3B;
    top: 3000px;
    right: -300px;
}

/* ---------------------------------------------------------------------------------------------------------- */