/*#region Fonts*/

/*#region Inter */

@font-face {
    font-family: 'Inter';
    src: url('/fonts/Inter/Inter-VariableFont_opsz,wght.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    font-variation-settings: 'opsz' 14;
}

@font-face {
    font-family: 'Inter';
    src: url('fonts/Inter/Inter-Italic-VariableFont_opsz,wght.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
    font-variation-settings: 'opsz' 14;
}

/*#endregion*/

/*#region Google Material Symbols*/

@font-face {
    font-family: 'Material Symbols Outlined';
    src: url('/material-symbols/Material_Symbols_Outlined/static/MaterialSymbolsOutlined-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    transition: transform 0.2s ease-in-out;
}

    .material-symbols-outlined.material_small {
        font-size: 14px;
    }

/*#endregion*/

/*#endregion*/

/*#region Master*/

:root {
    /* Site Colors - Aligned with CP */
    --primary: #FF7B54;
    --primary-hover: #e56a45;
    --primary-light: rgba(255, 123, 84, 0.1);
    --secondary: #264653;
    --secondary-light: #2d5363;
    --secondary-dark: #1a3340;
    --success: #40a829;
    --error: #E74C3C;
    --white: #ffffff;
    --off-white: #f8f9fa;
    --off-black: #2E2E2E;
    --light-gray: #F8F9FA;
    --red-colour: #FF0000;
    --mid-gray: #e9ecef;
    --dark-gray: #6c7988;
    --light-border: rgba(0, 0, 0, 0.08);
    /* Typography */
    --font-inter: 'Inter', sans-serif;
    --text-main: #2E2E2E;
    --text-muted: #6c7988;
    --text-light: rgba(255, 255, 255, 0.7);
    --text-white: #ffffff;
    --card-bg: #ffffff;
    --border-colour: rgba(0,0,0,0.1);
    --screen-sm-padding: 45px 0;
    --screen-lg-padding: 75px 0;
}

html {
    font-size: 14px;
    margin: 0;
    padding: 0;
    overflow-y: auto !important;
    position: relative;
    min-height: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-inter);
    color: var(--text-main);
    text-rendering: optimizeSpeed;
    scrollbar-width: thin;
    margin: 0;
    line-height: 1.6;
}

a, input {
    outline: 0;
    text-decoration: none;
}

a {
    color: var(--primary);
    transition: all 200ms linear 0s;
    cursor: pointer;
}

    a:hover {
        text-decoration: none;
        color: var(--primary-hover);
    }


#back-top {
    bottom: 1.2rem;
    margin: 0;
    position: fixed;
    right: 1rem;
    z-index: 99999;
}

    #back-top a {
        background: rgba(0, 0, 0, 0.4) none repeat scroll 0 0;
        height: 40px;
        text-decoration: none;
        width: 40px;
        transition: all 200ms linear 0s;
        border-radius: 10px;
        align-items: center;
        display: grid;
    }

        #back-top a:hover, #back-top a:active {
            background-color: var(--primary);
            color: var(--darker-text-gray);
        }

        #back-top a i {
            color: #fff;
            display: block;
            font-size: 24px;
            margin: 0 auto;
            text-align: center;
            height: 25px;
        }

.back-top-captcha {
    bottom: 6.5rem !important;
}


.input-validation-error {
    border-color: var(--bs-form-invalid-border-color) !important;
    border-width: 1px !important;
    border-style: solid !important;
    padding-right: calc(1.5em + .75rem);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3E%3Ccircle cx='6' cy='6' r='4.5'/%3E%3Cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3E%3Ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right calc(.375em + .1875rem) center;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}

    .input-validation-error:focus {
        border-color: var(--bs-form-invalid-border-color) !important;
        box-shadow: 0 0 0 .25rem rgba(var(--bs-danger-rgb), .15) !important;
    }

/* Override any border utility classes when validation error occurs */
.form-control.border-0.input-validation-error,
.form-select.border-0.input-validation-error {
    border: 1px solid var(--bs-form-invalid-border-color) !important;
}

.form-floating > .form-control-plaintext ~ label, .form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label, .form-floating > .form-select ~ label {
    color: var(--dark-blue);
    opacity: 1;
}

.form-switch .form-check-input {
    margin-top: 2.3px !important;
    width: 2.2em;
    height: 1.2em;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(69, 85, 96,1)'/%3e%3c/svg%3e");
}

.form-check-input:checked {
    background-color: var(--text-gray) !important;
    border-color: var(--text-gray) !important;
}

.form-switch .form-check-input:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(255, 255, 255,1)'/%3e%3c/svg%3e");
}

.toast-bg-success {
    background-color: var(--success) !important;
}

.toast-bg-error {
    background-color: var(--error) !important;
}




/* Loading Overlay */
#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--white);
    display: flex !important;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 500ms ease-out;
}

.loader-container {
    text-align: center;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 3px solid var(--light-border);
    border-top: 3px solid var(--primary);
    border-radius: 50%;
    animation: spinTL 1s linear infinite;
    margin: 0 auto 1rem;
}

.loading-text {
    color: var(--text-main);
    font-size: 1.2rem;
    font-weight: 500;
}

@keyframes spinTL {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

#loading-overlay.loaded {
    opacity: 0;
    pointer-events: none;
    display: none !important;
}

#content-wrapper {
    opacity: 0;
    transition: opacity 500ms ease-in;
}

    #content-wrapper.visible {
        opacity: 1;
    }

.input-validation-error {
    border-color: var(--bs-form-invalid-border-color) !important;
    border-width: 1px !important;
    border-style: solid !important;
    padding-right: calc(1.5em + .75rem);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3E%3Ccircle cx='6' cy='6' r='4.5'/%3E%3Cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3E%3Ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right calc(.375em + .1875rem) center;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}

    .input-validation-error:focus {
        border-color: var(--bs-form-invalid-border-color) !important;
        box-shadow: 0 0 0 .25rem rgba(var(--bs-danger-rgb), .15) !important;
    }

.form-control.border-0.input-validation-error,
.form-select.border-0.input-validation-error {
    border: 1px solid var(--bs-form-invalid-border-color) !important;
}

.form-check-input:disabled ~ .form-check-label, .form-check-input[disabled] ~ .form-check-label {
    opacity: 1 !important;
}

.toast-bg-success {
    background-color: var(--success) !important;
}

.toast-bg-error {
    background-color: var(--error) !important;
}

::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 99px;
}

/*#endregion Master*/

/*#region Buttons*/

.btn-primary-solid {
    display: inline-block;
    font-weight: 700;
    background: var(--primary);
    border: 2px solid var(--primary);
    color: var(--text-white);
    font-size: 15px;
    padding: 14px 32px;
    border-radius: 8px;
    transition: all 235ms ease-in-out;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
}

    .btn-primary-solid:hover {
        background: var(--primary-hover);
        border-color: var(--primary-hover);
        color: var(--text-white);
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(255, 123, 84, 0.35);
    }

.btn-secondary-outline {
    display: inline-block;
    font-weight: 700;
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.4);
    color: var(--text-white);
    font-size: 15px;
    padding: 14px 32px;
    border-radius: 8px;
    transition: all 235ms ease-in-out;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
}

    .btn-secondary-outline:hover {
        background: rgba(255, 255, 255, 0.1);
        border-color: var(--text-white);
        color: var(--text-white);
        transform: translateY(-2px);
    }

.btn-dark-solid {
    display: inline-block;
    font-weight: 700;
    background: var(--secondary);
    border: 2px solid var(--secondary);
    color: var(--text-white);
    font-size: 15px;
    padding: 14px 32px;
    border-radius: 8px;
    transition: all 235ms ease-in-out;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
}

    .btn-dark-solid:hover {
        background: var(--secondary-dark);
        border-color: var(--secondary-dark);
        color: var(--text-white);
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(38, 70, 83, 0.35);
    }

/*#endregion Buttons*/

/*#region Navbar*/

#navbar {
    padding: 16px 0;
    transition: all 350ms ease;
    z-index: 1050;
}

    #navbar.navbar-scrolled {
        background: var(--white) !important;
        box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
        padding: 10px 0;
    }

        #navbar.navbar-scrolled .brand-logo {
            filter: none;
        }

        #navbar.navbar-scrolled .nav-link {
            color: var(--text-main) !important;
        }

            #navbar.navbar-scrolled .nav-link:hover,
            #navbar.navbar-scrolled .nav-link.active {
                color: var(--primary) !important;
            }

        #navbar.navbar-scrolled .navbar-toggler {
            border-color: var(--secondary);
        }

            #navbar.navbar-scrolled .navbar-toggler .navbar-toggler-icon {
                filter: invert(1) grayscale(100%) brightness(40%);
            }

.navbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.brand-logo {
    height: 100px;
    width: auto;
    transition: opacity 250ms ease;
    filter: brightness(0) invert(1);
}

.navbar-brand:hover .brand-logo {
    opacity: 0.85;
}

#navbar .nav-link {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
    font-size: 15px;
    padding: 8px 16px !important;
    transition: all 200ms ease;
    position: relative;
    border-radius: 6px;
}

    #navbar .nav-link::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border: 2px solid var(--primary);
        border-radius: 6px;
        opacity: 0;
        transform: scale(0.95);
        transition: all 250ms ease;
    }

    #navbar .nav-link:hover,
    #navbar .nav-link.active {
        color: var(--primary) !important;
    }

        #navbar .nav-link:hover::before,
        #navbar .nav-link.active::before {
            opacity: 1;
            transform: scale(1);
        }

.btn-cta-nav {
    background: var(--primary);
    color: var(--text-white) !important;
    font-weight: 700;
    font-size: 14px;
    padding: 10px 24px;
    border-radius: 8px;
    border: 2px solid var(--primary);
    transition: all 235ms ease-in-out;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

    .btn-cta-nav:hover {
        background: var(--primary-hover);
        border-color: var(--primary-hover);
        color: var(--text-white) !important;
        transform: translateY(-1px);
        box-shadow: 0 4px 15px rgba(255, 123, 84, 0.35);
    }

/*#endregion Navbar*/

/*#region Navbar Styles*/

.navbar {
    background: rgba(45, 52, 54, 0.95) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 300ms ease;
    padding: 16px 0;
}

.navbar-brand {
    padding: 0;
}

.navbar-nav .nav-link {
    color: var(--text-white) !important;
    font-weight: 500;
    padding: 8px 16px !important;
    border-radius: 8px;
    transition: all 200ms ease;
    margin: 0 4px;
}

    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link.active {
        background: rgba(255, 255, 255, 0.1);
        color: var(--text-white) !important;
    }

.btn-cta-nav {
    background: var(--primary) !important;
    color: var(--text-white) !important;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    transition: all 200ms ease;
    text-decoration: none;
}

    .btn-cta-nav:hover {
        background: #e95d3c !important;
        color: var(--text-white) !important;
        transform: translateY(-1px);
    }

.navbar-scrolled {
    background: rgba(45, 52, 54, 0.98) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
}

/*#endregion Navbar Styles*/

/*#region Section Shared*/

.section-padding {
    padding: var(--screen-sm-padding);
}

.section-bg-white {
    background: var(--white);
}

.section-bg-light {
    background: var(--off-white);
}

.section-bg-dark {
    background: var(--secondary);
    color: var(--text-white);
}

.section-tag {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--primary);
    margin-bottom: 12px;
}

.section-bg-dark .section-tag {
    color: var(--primary);
}

.section-title {
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 8px;
    color: var(--off-black);
}

.section-bg-dark .section-title {
    color: var(--text-white);
}

.section-subtitle {
    font-size: 1.15rem;
    color: var(--text-muted);
    max-width: 640px;
    line-height: 1.7;
}

.section-bg-dark .section-subtitle {
    color: var(--text-light);
}

/*#endregion Section Shared*/

/*#region Hero*/

.hero {
    background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-dark) 50%, #0f2027 100%);
    display: flex;
    align-items: center;
    padding: 100px 0;
}

.hero-content {
    position: relative;
    z-index: 2;
}

.hero-headline {
    font-size: 3.2rem;
    font-weight: 800;
    color: var(--text-white);
    line-height: 1.15;
    margin-bottom: 20px;
    letter-spacing: -1px;
}

    .hero-headline .highlight {
        color: var(--primary);
        font-size: 3rem;
    }

.hero-subheadline {
    font-size: 1.25rem;
    color: var(--text-light);
    max-width: 560px;
    line-height: 1.7;
    margin-bottom: 36px;
}

.hero-ctas {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.hero-trust {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.hero-trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-light);
}

    .hero-trust-item i {
        color: var(--primary);
        font-size: 16px;
    }

.hero-visual {
    position: relative;
    z-index: 2;
}

.hero-mockup {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 24px;
    backdrop-filter: blur(10px);
}

.mockup-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.mockup-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

    .mockup-dot.red {
        background: #ff5f57;
    }

    .mockup-dot.yellow {
        background: #febc2e;
    }

    .mockup-dot.green {
        background: #28c840;
    }

.mockup-title {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    margin-left: 8px;
}

.mockup-stats {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.mockup-stat {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 12px 16px;
    flex: 1;
}

.mockup-stat-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 4px;
}

.mockup-stat-value {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-white);
}

.mockup-timeline-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 8px;
}

.mockup-timeline {
    display: flex;
    height: 32px;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 10px;
    gap: 2px;
}

.tl-segment {
    border-radius: 4px;
    transition: opacity 0.2s ease;
}

    .tl-segment:hover {
        opacity: 0.8;
    }

.mockup-legend {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

.legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/*#endregion Hero*/

/*#region Problem Section*/

.problem-section {
    background: linear-gradient(170deg, var(--secondary-dark) 0%, var(--secondary) 50%, var(--secondary-light) 100%);
    padding: var(--screen-sm-padding);
    position: relative;
    overflow: hidden;
}

    .problem-section::after {
        content: '';
        position: absolute;
        bottom: -100px;
        right: -60px;
        width: 350px;
        height: 350px;
        background: radial-gradient(circle, rgba(255, 123, 84, 0.08) 0%, transparent 70%);
        border-radius: 50%;
    }

.problem-image-frame {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    transition: transform 400ms ease;
}

.problem-llama-img {
    width: 100%;
    display: block;
    border-radius: 16px;
}

.problem-image-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    padding: 40px 20px 16px;
    font-size: 13px;
    font-style: italic;
    color: rgba(255, 255, 255, 0.8);
}

    .problem-image-caption i {
        color: var(--primary);
        margin-right: 6px;
        font-size: 12px;
    }

.problem-title {
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--text-white);
    line-height: 1.2;
    margin-bottom: 12px;
}

.problem-intro {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.7;
    margin-bottom: 32px;
}

.pain-points {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.pain-point {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding: 20px;
    background: rgba(255, 255, 255, 0.04);
    border-left: 3px solid var(--primary);
    border-radius: 0 12px 12px 0;
    transition: all 300ms ease;
}

    .pain-point:hover {
        background: rgba(255, 255, 255, 0.08);
        transform: translateX(4px);
    }

.pain-number {
    font-size: 2rem;
    font-weight: 800;
    color: var(--primary);
    opacity: 0.4;
    line-height: 1;
    flex-shrink: 0;
    min-width: 40px;
}

.pain-content h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-white);
    margin-bottom: 4px;
}

.pain-content p {
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.65;
    margin-bottom: 0;
}

/*#endregion Problem Section*/

/*#region How It Works Section*/

.how-it-works {
    background: var(--white);
    padding: var(--screen-sm-padding);
}

.steps-wrapper {
    position: relative;
}

.step-card {
    text-align: center;
    padding: 40px 28px 36px;
    background: var(--off-white);
    border: 1px solid var(--light-border);
    border-radius: 16px;
    position: relative;
    transition: all 350ms ease;
    height: 100%;
}

@media (min-width: 992px) {
    .step-card {
        margin: 0 20px;
    }
}

.step-card.featured {
    background: var(--white);
    border-color: var(--primary);
    box-shadow: 0 8px 32px rgba(255, 123, 84, 0.1);
    transform: translateY(-8px);
}

.step-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}

.step-card.featured:hover {
    transform: translateY(-12px);
    box-shadow: 0 16px 48px rgba(255, 123, 84, 0.15);
}

.step-number-badge {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--text-white);
    font-size: 14px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.step-icon-wrap {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-light) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.step-icon-wrap {
    color: var(--text-white);
}

    .step-icon-wrap i {
        font-size: 26px;
        color: var(--text-white) !important;
    }

        .step-icon-wrap svg,
        .step-icon-wrap i svg,
        .step-icon-wrap path {
            fill: #ffffff !important;
            color: #ffffff !important;
        }

.step-card h4 {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--off-black);
}

.step-card p {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 0;
}

.workflow-arrow {
    color: var(--primary);
    font-weight: 700;
    margin: 0 4px;
    display: inline-block;
    transition: transform 200ms ease;
}

.step-card:hover .workflow-arrow {
    transform: translateX(2px);
}

.step-connector {
    position: absolute;
    top: 50%;
    left: 16.66%;
    right: 16.66%;
    transform: translateY(-50%);
    z-index: 0;
    pointer-events: none;
}

.connector-line {
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--primary) 0px, var(--primary) 8px, transparent 8px, transparent 16px);
    opacity: 0.3;
}

.mascot-callout {
    display: flex;
    align-items: center;
    gap: 32px;
    margin-top: 60px;
    padding: 32px;
    background: var(--off-white);
    border-radius: 20px;
    border: 1px solid var(--light-border);
}

.mascot-img {
    width: 100px;
    height: auto;
    flex-shrink: 0;
}

.mascot-speech {
    position: relative;
    background: var(--white);
    border-radius: 16px;
    padding: 24px 28px;
    border: 1px solid var(--light-border);
    flex: 1;
}

    .mascot-speech::before {
        content: '';
        position: absolute;
        left: -12px;
        top: 50%;
        transform: translateY(-50%);
        width: 0;
        height: 0;
        border-top: 12px solid transparent;
        border-bottom: 12px solid transparent;
        border-right: 12px solid var(--white);
    }

    .mascot-speech p {
        font-size: 15px;
        color: var(--text-muted);
        line-height: 1.7;
        margin-bottom: 0;
        font-style: italic;
    }

/*#endregion How It Works Section*/

/*#region Features Section*/

.feature-block-v2 {
    padding: 60px 0;
    border-bottom: 1px solid var(--light-border);
}

    .feature-block-v2:last-child {
        border-bottom: none;
        margin-bottom: 0;
    }

.feature-tag-inline {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--primary);
    background: var(--primary-light);
    padding: 5px 14px;
    border-radius: 6px;
    margin-bottom: 16px;
}

.feature-text h3 {
    font-size: 1.6rem;
    font-weight: 800;
    margin-bottom: 16px;
    color: var(--off-black);
}

.feature-text p {
    font-size: 15px;
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 20px;
}

.feature-bullets {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .feature-bullets li {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 8px 0;
        font-size: 14px;
        color: var(--text-main);
    }

        .feature-bullets li i {
            color: var(--success);
            margin-top: 3px;
            flex-shrink: 0;
        }

.feature-img-frame {
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--light-border);
}

.feature-llama-img {
    width: 100%;
    display: block;
}

.feature-img-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
    padding: 40px 20px 16px;
}

    .feature-img-overlay span {
        font-size: 13px;
        font-style: italic;
        color: rgba(255, 255, 255, 0.85);
    }

/* Mini Mockup (feature visuals) */

.mini-mockup {
    background: var(--white);
    border-radius: 12px;
    overflow: hidden;
}

.mini-mockup-bar {
    background: var(--secondary);
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.mini-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: inline-block;
}

    .mini-dot:first-child {
        background: #ff5f57;
    }

    .mini-dot:nth-child(2) {
        background: #febc2e;
    }

    .mini-dot:nth-child(3) {
        background: #28c840;
    }

.mini-title {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    margin-left: 8px;
}

.mini-mockup-body {
    padding: 20px;
}

.mini-stat-row {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.mini-stat {
    flex: 1;
    background: var(--off-white);
    border-radius: 8px;
    padding: 12px;
    text-align: center;
}

.mini-stat-val {
    display: block;
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--off-black);
    line-height: 1;
    margin-bottom: 2px;
}

.mini-stat-lbl {
    display: block;
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mini-tl-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.mini-timeline {
    display: flex;
    height: 24px;
    gap: 3px;
    margin-bottom: 8px;
}

.mini-legend {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 10px;
}

    .mini-legend span {
        font-size: 11px;
        color: var(--text-muted);
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .mini-legend i {
        font-size: 10px;
    }

/* Mini Filter Demo */

.mini-filter-demo {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mini-filter-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

    .mini-filter-row:last-child {
        margin-bottom: 0;
    }

.mini-filter-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    min-width: 90px;
    flex-shrink: 0;
}

.mini-filter-value {
    font-size: 13px;
    color: var(--off-black);
    font-weight: 600;
}

.mini-filter-chip {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    background: var(--primary-light);
    color: var(--primary);
    padding: 3px 10px;
    border-radius: 20px;
}

.mini-filter-result {
    margin-top: 8px;
    padding: 12px 16px;
    background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-light) 100%);
    border-radius: 8px;
    font-size: 13px;
    color: var(--text-white);
}

    .mini-filter-result strong {
        color: var(--primary);
        font-size: 15px;
    }

.mini-filter-section {
    padding: 12px 0;
}

.mini-filter-divider {
    height: 1px;
    background: var(--light-border);
    margin: 12px 0;
}

.hero-logo-graphic {
    height: 280px;
    width: auto;
    filter: brightness(0) invert(1);
}

.mini-agent-status {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mini-status-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-main);
}

.mini-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--error);
}

    .mini-status-dot.active {
        background: var(--success);
        animation: pulse 2s infinite;
    }

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.mini-status-text {
    font-family: monospace;
    font-size: 11px;
    color: var(--text-muted);
}

.feature-card {
    background: var(--white);
    border: 1px solid var(--light-border);
    border-radius: 12px;
    padding: 32px 24px;
    height: 100%;
    transition: all 300ms ease;
    text-align: center;
}

    .feature-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
        border-color: var(--primary);
    }

.feature-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-light) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: var(--text-white);
    font-size: 24px;
}

.feature-card h4 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--off-black);
}

.feature-card p {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
}

/*#endregion Features Section*/

/*#region Pricing Section*/

.pricing-card {
    background: var(--white);
    border: 2px solid var(--light-border);
    border-radius: 16px;
    padding: 40px 32px;
    height: 100%;
    transition: all 300ms ease;
    position: relative;
}

    .pricing-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1);
    }

    .pricing-card.featured {
        border-color: var(--primary);
    }

.pricing-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary);
    color: var(--text-white);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 6px 20px;
    border-radius: 20px;
}

.pricing-plan-name {
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.pricing-amount {
    display: flex;
    align-items: flex-start;
    gap: 2px;
    margin-bottom: 6px;
}

.pricing-dollar {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--off-black);
    margin-top: 8px;
}

.pricing-number {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1;
    color: var(--off-black);
}

.pricing-period {
    font-size: 1rem;
    color: var(--text-muted);
    align-self: flex-end;
    margin-bottom: 6px;
}

.pricing-desc {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 28px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--light-border);
}

.pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 32px 0;
}

    .pricing-features li {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 0;
        font-size: 14px;
        color: var(--text-main);
    }

        .pricing-features li i {
            color: var(--success);
            font-size: 14px;
            flex-shrink: 0;
        }

.pricing-cta {
    width: 100%;
    text-align: center;
}

.pricing-note {
    text-align: center;
    margin-top: 40px;
}

    .pricing-note p {
        font-size: 14px;
        color: var(--text-muted);
    }

        .pricing-note p i {
            color: var(--success);
        }

/*#endregion Pricing Section*/

/*#region Trial CTA Section*/

.trial-cta,
.trial-cta-v2 {
    background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-dark) 100%);
    padding: var(--screen-sm-padding);
}

.trial-cta {
    text-align: center;
}

.trial-cta-content {
    position: relative;
    z-index: 2;
}

.trial-headline {
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--text-white);
    margin-bottom: 16px;
}

.trial-subtext {
    font-size: 1.1rem;
    color: var(--text-light);
    max-width: 600px;
    margin: 0 0 36px;
    line-height: 1.7;
}

.trial-cta .trial-subtext {
    margin: 0 auto 36px;
}

.trial-llama-frame {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    transition: transform 400ms ease;
}

.trial-llama-img {
    width: 100%;
    display: block;
}

.trial-badges {
    display: flex;
    gap: 16px 24px;
    flex-wrap: wrap;
    margin-top: 32px;
}

.trial-cta .trial-badges {
    justify-content: center;
}

.trial-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-light);
}

    .trial-badge i {
        color: var(--primary);
    }

/*#endregion Trial CTA Section*/

/*#region Footer*/

.site-footer {
    background: var(--secondary-dark);
    color: var(--text-light);
    padding: 60px 0 30px;
}

.footer-brand {
    margin-bottom: 12px;
}

.footer-logo {
    height: 100px;
    filter: brightness(0) invert(1);
}

.footer-description {
    font-size: 14px;
    color: var(--text-light);
    line-height: 1.7;
    max-width: 300px;
}

.footer-heading {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-white);
    margin-bottom: 16px;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .footer-links li {
        margin-bottom: 10px;
    }

    .footer-links a {
        font-size: 14px;
        color: var(--text-light);
        transition: color 200ms ease;
    }

        .footer-links a:hover {
            color: var(--primary);
        }

.footer-contact li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

    .footer-contact li i {
        color: var(--primary);
        width: 16px;
        text-align: center;
        flex-shrink: 0;
    }

    .footer-contact li span {
        color: var(--text-light);
    }

.footer-divider {
    border-color: rgba(255, 255, 255, 0.1);
    margin: 40px 0 20px;
}

.footer-bottom {
    text-align: center;
}

    .footer-bottom p {
        font-size: 13px;
        color: rgba(255, 255, 255, 0.4);
        margin-bottom: 0;
    }

        .footer-bottom p a {
            color: rgba(255, 255, 255, 0.5);
        }

            .footer-bottom p a:hover {
                color: var(--primary);
            }

/*#endregion Footer*/

/*#region Features Page*/

.page-hero {
    background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-dark) 100%);
    padding: 140px 0 80px;
}

.page-hero-title {
    font-size: 2.8rem;
    font-weight: 800;
    color: var(--text-white);
    margin-top: 0;
    margin-bottom: 16px;
    line-height: 1.15;
}

@media (max-width: 991px) {
    .page-hero {
        padding: 120px 0 60px;
        text-align: center;
    }

    .page-hero-subtitle {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-ctas {
        justify-content: center;
    }
}

.page-hero-subtitle {
    font-size: 1.15rem;
    color: var(--text-light);
    max-width: 600px;
    margin: 0 0 32px 0;
    line-height: 1.7;
}

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

.hero-icon-composition {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.hero-icon-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .hero-icon-row.secondary-row {
        gap: 10px;
    }

.hero-icon-bubble {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 300ms ease;
}

    .hero-icon-bubble.large {
        width: 80px;
        height: 80px;
        font-size: 32px;
    }

    .hero-icon-bubble.small {
        width: 52px;
        height: 52px;
        font-size: 20px;
    }

    .hero-icon-bubble.primary {
        background: var(--primary);
        color: var(--text-white);
        border-color: var(--primary);
        box-shadow: 0 4px 20px rgba(255, 123, 84, 0.4);
    }

.hero-icon-arrow {
    color: rgba(255, 255, 255, 0.4);
    font-size: 20px;
}

.hero-icon-label {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-top: 4px;
}

.feature-detail-card {
    background: var(--white);
    border: 1px solid var(--light-border);
    border-radius: 16px;
    padding: 40px;
    height: 100%;
    transition: all 300ms ease;
}

    .feature-detail-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
    }

.feature-detail-icon {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    background: var(--primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

    .feature-detail-icon i {
        font-size: 24px;
        color: var(--primary);
    }

.feature-detail-card h4 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--off-black);
}

.feature-detail-card p {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.7;
}

.feature-scenario {
    background: var(--off-white);
    border-radius: 8px;
    padding: 16px;
    margin-top: 16px;
    border-left: 3px solid var(--primary);
}

    .feature-scenario p {
        font-size: 13px;
        font-style: italic;
        margin-bottom: 0;
    }

/*#region Privacy First Section*/

.privacy-first-section {
    background: linear-gradient(170deg, var(--secondary-dark) 0%, var(--secondary) 100%);
}

.privacy-section-title {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--text-white);
    margin-bottom: 16px;
    line-height: 1.2;
}

.privacy-section-intro {
    font-size: 1.1rem;
    color: var(--text-light);
    line-height: 1.7;
    margin-bottom: 40px;
}

.privacy-explainer {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.privacy-step {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.privacy-step-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 16px;
    flex-shrink: 0;
}

.privacy-step-content h5 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-white);
    margin-bottom: 4px;
}

.privacy-step-content p {
    font-size: 14px;
    color: var(--text-light);
    line-height: 1.6;
    margin: 0;
}

.privacy-callout-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    padding: 40px;
    text-align: center;
}

.privacy-callout-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(255, 123, 84, 0.15);
    border: 1px solid rgba(255, 123, 84, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: var(--primary);
    margin: 0 auto 24px;
}

.privacy-callout-card h3 {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--text-white);
    margin-bottom: 16px;
}

.privacy-callout-card > p {
    font-size: 1rem;
    color: var(--text-light);
    line-height: 1.7;
    margin-bottom: 24px;
}

.privacy-callout-note {
    background: rgba(255, 255, 255, 0.07);
    border-left: 3px solid var(--primary);
    border-radius: 0 8px 8px 0;
    padding: 14px 16px;
    font-size: 13px;
    color: var(--text-light);
    line-height: 1.6;
    text-align: left;
    margin-bottom: 20px;
}

.privacy-callout-footer {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
}

/*#endregion Privacy First Section*/

/*#endregion Features Page*/

/*#region Pricing Page*/

.faq-item {
    background: var(--white);
    border: 1px solid var(--light-border);
    border-radius: 12px;
    padding: 24px 28px;
    margin-bottom: 12px;
    transition: all 200ms ease;
}

    .faq-item:hover {
        border-color: var(--primary);
    }

.faq-question {
    font-size: 1rem;
    font-weight: 700;
    color: var(--off-black);
    margin-bottom: 8px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

    .faq-question i {
        color: var(--primary);
        margin-top: 3px;
        flex-shrink: 0;
    }

.faq-answer {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.7;
    padding-left: 26px;
    margin-bottom: 0;
}

/*#endregion Pricing Page*/

/*#region About Page*/

.about-value {
    text-align: center;
    padding: 24px;
}

.about-value-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

    .about-value-icon i {
        font-size: 24px;
        color: var(--primary);
    }

.about-value h4 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--off-black);
}

.about-value p {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.7;
}

.contact-card {
    background: var(--white);
    border: 1px solid var(--light-border);
    border-radius: 12px;
    padding: 32px;
    text-align: center;
    transition: all 300ms ease;
}

    .contact-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    }

    .contact-card i {
        font-size: 28px;
        color: var(--primary);
        margin-bottom: 12px;
    }

    .contact-card h5 {
        font-size: 1rem;
        font-weight: 700;
        margin-bottom: 8px;
    }

    .contact-card p, .contact-card a {
        font-size: 14px;
        color: var(--text-muted);
    }

/*#region Founder Section*/

.founder-photo-wrap {
    position: relative;
    display: inline-block;
}

.founder-photo {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center top;
    border: 4px solid var(--white);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.founder-photo-badge {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary);
    border: 3px solid var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-white);
    font-size: 14px;
    box-shadow: 0 2px 10px rgba(255, 123, 84, 0.4);
}

.founder-quote {
    position: relative;
    margin-bottom: 24px;
}

.founder-quote-icon {
    font-size: 32px;
    color: var(--primary);
    opacity: 0.4;
    display: block;
    margin-bottom: 8px;
}

.founder-quote blockquote {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--off-black);
    line-height: 1.6;
    border: none;
    padding: 0;
    margin: 0;
    font-style: italic;
}

.founder-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.founder-meta-name {
    font-size: 1rem;
    font-weight: 800;
    color: var(--off-black);
}

.founder-meta-title {
    font-size: 13px;
    color: var(--text-muted);
}

.founder-meta-links {
    display: flex;
    gap: 16px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.founder-meta-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    transition: opacity 200ms ease;
}

    .founder-meta-link:hover {
        opacity: 0.75;
        color: var(--primary);
    }

/*#endregion Founder Section*/

/*#region Home Privacy Note*/

.privacy-note-box {
    max-width: 600px;
    margin: 0 auto;
    padding: 24px;
    background: var(--white);
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--light-border);
}

.privacy-note-icon {
    font-size: 32px;
    color: var(--primary);
    margin-bottom: 16px;
}

.privacy-note-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--off-black);
    margin-bottom: 12px;
}

.privacy-note-text {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
}

    .privacy-note-text a {
        color: var(--primary);
        font-weight: 600;
        text-decoration: none;
    }

        .privacy-note-text a:hover {
            text-decoration: underline;
        }

/*#endregion Home Privacy Note*/

/*#region Anchor Scroll Offset*/

html {
    scroll-padding-top: 50px;
}

/*#endregion Anchor Scroll Offset*/

/*#region Origin Story*/

.about-origin-img {
    position: relative;
    display: inline-block;
    margin-top: 32px;
}

.about-logo-large {
    height: 140px;
    width: auto;
    opacity: 0.18;
    filter: grayscale(1);
}

.about-origin-badge {
    position: absolute;
    bottom: -10px;
    right: -10px;
    background: var(--primary);
    border-radius: 16px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 20px rgba(255, 123, 84, 0.4);
}

.about-origin-years {
    font-size: 2.4rem;
    font-weight: 900;
    color: var(--text-white);
    line-height: 1;
}

.about-origin-label {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.4;
}

.origin-timeline {
    --marker-size: 56px;
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
}

    .origin-timeline::before {
        content: '';
        position: absolute;
        left: calc(var(--marker-size) / 2);
        top: var(--marker-size);
        bottom: var(--marker-size);
        width: 2px;
        transform: translateX(-50%);
        background: linear-gradient(to bottom, var(--light-border), var(--primary), var(--light-border));
    }

.origin-event {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding-bottom: 36px;
    position: relative;
}

    .origin-event:last-child {
        padding-bottom: 0;
    }

.origin-marker {
    width: var(--marker-size);
    height: var(--marker-size);
    border-radius: 50%;
    background: var(--white);
    border: 2px solid var(--light-border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    transition: all 300ms ease;
}

.origin-year {
    font-size: 11px;
    font-weight: 800;
    color: var(--text-muted);
    letter-spacing: -0.5px;
    line-height: 1;
}

.origin-infinity {
    font-size: 20px;
    color: var(--text-muted);
}

.origin-marker.primary {
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 4px 16px rgba(255, 123, 84, 0.35);
}

    .origin-marker.primary .origin-year {
        color: var(--text-white);
    }

.origin-content {
    padding-top: 8px;
}

    .origin-content h5 {
        font-size: 1rem;
        font-weight: 700;
        color: var(--off-black);
        margin-bottom: 8px;
    }

    .origin-content p {
        font-size: 14px;
        color: var(--text-muted);
        line-height: 1.75;
        margin: 0;
    }

/*#endregion Origin Story*/

/*#endregion About Page*/

/*#region Contact*/

.contact {
    padding: var(--screen-sm-padding);
    background: var(--off-white);
}

/* Info panel */
.contact-info-panel {
    background: linear-gradient(160deg, var(--secondary) 0%, var(--secondary-dark) 100%);
    border-radius: 18px;
    padding: 40px 32px;
    color: var(--text-white);
    height: 100%;
}

.contact-info-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--primary);
    margin-bottom: 12px;
}

.contact-info-title {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 12px;
    color: var(--text-white);
}

.contact-info-desc {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.7;
    margin-bottom: 32px;
}

/* Contact detail items */
.contact-detail-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 36px;
}

.contact-detail-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.contact-detail-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 16px;
    color: var(--text-white);
}

.contact-detail-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 4px;
}

.contact-detail-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.4);
}

.contact-detail-value {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
}

    .contact-detail-value a {
        color: rgba(255, 255, 255, 0.85);
        text-decoration: none;
    }

        .contact-detail-value a:hover {
            color: var(--primary);
        }

/* Social links */

.contact-social-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 14px;
}

.contact-social-links {
    display: flex;
    gap: 10px;
}

.social-btn {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.6);
    font-size: 15px;
    text-decoration: none;
    transition: all 200ms ease;
}

    .social-btn:hover {
        background: var(--primary);
        border-color: var(--primary);
        color: var(--text-white);
    }

/* Form card */
.contact-form-card {
    background: var(--white);
    border-radius: 20px;
    border: 1px solid var(--light-border);
    overflow: hidden;
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.06);
    height: 100%;
}

.contact-form-card-header {
    background: linear-gradient(135deg, var(--primary) 0%, #ff9470 100%);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}

    .contact-form-card-header i {
        font-size: 20px;
        color: rgba(255, 255, 255, 0.9);
    }

    .contact-form-card-header span {
        font-size: 18px;
        font-weight: 700;
        color: var(--text-white);
    }

.contact-form-card-body {
    padding: 20px;
}


    .contact-form-card-body textarea.message {
        min-height: 200px;
    }

/* Privacy checkbox */
.contact-privacy-check .form-check-label {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.6;
}

.contact-privacy-check .form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

/* Send button */
.btn-main {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: var(--primary);
    border: none;
    color: var(--text-white);
    font-size: 14px;
    font-weight: 700;
    padding: 14px 32px;
    border-radius: 50px;
    cursor: pointer;
    transition: all 235ms ease;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

    .btn-main:hover {
        background: var(--primary-hover);
        color: var(--text-white);
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(255, 123, 84, 0.35);
    }

/*#endregion Contact*/

/*#region Login*/

.login {
    padding: var(--screen-sm-padding);
}

.login-split-card {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.10);
}

.login-split-left {
    background: linear-gradient(145deg, var(--primary) 0%, #ff9470 60%, #ffb39b 100%);
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;
    position: relative;
    overflow: hidden;
    height: 100%;
}

.login-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
}

    .login-brand i {
        width: 36px;
        height: 36px;
        background: rgba(255,255,255,0.22);
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
    }

.login-split-body h2 {
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 8px;
}

.login-split-body p {
    font-size: 12px;
    color: rgba(255,255,255,0.80);
}

.login-pills .login-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.15);
    border: 0.5px solid rgba(255,255,255,0.25);
    border-radius: 50px;
    padding: 8px 14px;
    font-size: 11px;
    color: #fff;
    margin-bottom: 15px;
}

    .login-pills .login-pill:last-child {
        margin-bottom: unset;
    }

.login-pill .pill-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    flex-shrink: 0;
}

/* Right panel */
.login-split-right {
    background: #fff;
    padding: 2.5rem;
}

.login-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), #ff9470);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    margin-bottom: 1rem;
}

.login-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--off-black);
    margin-bottom: 4px;
}

.login-subtitle {
    font-size: 13px;
    color: var(--dark-gray);
    margin-bottom: 1.5rem;
}

.login-field {
    margin-bottom: 1rem;
}

.user-access-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--off-black);
    display: block;
    margin-bottom: 6px;
}

.user-access-input {
    width: 100%;
    padding: 11px 14px;
    border-radius: 12px;
    border: 1px solid rgb(240, 240, 240);
    background: var(--card-bg);
    font-size: 14px;
    color: var(--off-black);
    transition: border-color .2s, box-shadow .2s;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

    .user-access-input:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(255,123,84,0.12);
        background: #fff;
    }

.login-forgot {
    font-size: 12px;
    color: var(--primary);
    text-decoration: none;
}

/* Divider with text */
.divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--secondary, #a0aec0);
    font-size: 0.95rem;
    margin: 2rem 0 1.5rem 0;
}

    .divider::before, .divider::after {
        content: '';
        flex: 1;
        border-bottom: 1px solid var(--border-colour);
        margin: 0 0.75em;
    }

    .divider span {
        color: var(--dark-gray, #a0aec0);
        font-weight: 500;
    }

/*#endregion*/

/*#region Forget Password*/

.user-access .logo-side {
    background-color: var(--primary);
    justify-content: center;
}

    .user-access .logo-side img {
        width: 200px;
    }

.user-access {
    padding: 75px 0;
}

    .user-access .card {
        border-radius: 20px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.10) !important;
        background: var(--card-bg);
        transition: box-shadow 0.3s;
        border: none;
    }

        .user-access .card .card-title {
            font-size: 24px;
            color: var(--off-black);
        }

        .user-access .card p {
            font-size: 16px;
            color: var(--dark-gray);
        }

    .user-access .btn-main {
        border-radius: 10px;
        margin: 5px 0;
    }

        .user-access .btn-main:hover {
            background-color: var(--secondary);
            border-color: var(--secondary);
            color: var(--text-white);
        }

    .user-access .link {
        color: var(--primary);
    }

        .user-access .link:hover {
            color: var(--secondary);
            opacity: 0.8;
        }

.divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--secondary, #a0aec0);
    font-size: 0.95rem;
    margin: 2rem 0 1.5rem 0;
}

    .divider::before, .divider::after {
        content: '';
        flex: 1;
        border-bottom: 1px solid var(--border-colour);
        margin: 0 0.75em;
    }

    .divider span {
        color: var(--text-gray, #a0aec0);
        font-weight: 500;
    }

/*#endregion*/

/*#region Registration */

.registration {
    padding: var(--screen-sm-padding);
    background-color: var(--light-gray);
}

.registration-card {
    background: var(--card-bg);
    border-radius: 18px;
    border: 1px solid var(--border-colour);
    overflow: hidden;
}

.registration-header {
    background: linear-gradient(135deg, var(--primary) 0%, #ff9470 100%);
    padding: 20px;
    color: var(--text-white);
}

.reg-header-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.reg-header-icon {
    width: 52px;
    height: 52px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
    color: var(--text-white);
}

.reg-header-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    color: var(--text-white);
}

.reg-header-subtitle {
    font-size: 13px;
    margin: 4px 0 0;
    color: var(--text-white);
}

/* Step bar */
.reg-step-bar {
    align-items: center;
    padding: 0 20px;
    background: var(--card-bg);
    border-bottom: 1px solid var(--border-colour);
}

.reg-step {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    flex: 1;
    border-bottom: 3px solid transparent;
}

    .reg-step.active {
        border-bottom-color: var(--primary);
        margin-bottom: 4px;
    }

        .reg-step.active:last-child {
            margin: unset;
        }

    .reg-step.done {
        border-bottom-color: var(--success);
    }

.step-circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid #dee2e6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-gray);
    background: var(--card-bg);
    flex-shrink: 0;
    transition: all 0.2s;
}

.reg-step.active .step-circle {
    border-color: var(--primary);
    color: var(--primary);
}

.reg-step.done .step-circle {
    border-color: var(--success);
    background: var(--success);
    color: var(--text-white);
}

.step-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-gray);
    white-space: nowrap;
}

.reg-step.active .step-label {
    color: var(--primary);
}

.reg-step.done .step-label {
    color: var(--success);
}

/* Panel body */
.reg-panel-body {
    padding: 20px;
}

/* Section label */
.reg-section-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--dark-gray);
    text-transform: uppercase;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .reg-section-label::after {
        content: '';
        flex: 1;
        height: 1px;
        background: var(--border-colour);
    }
/* Fields */
.reg-field {
    margin-bottom: 1.1rem;
}

.reg-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--off-black);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.reg-required {
    color: var(--primary);
    font-size: 14px;
}

.reg-input {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid #f0f0f0;
    border-radius: 12px;
    font-size: 14px;
    color: var(--off-black);
    background: var(--card-bg);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

    .reg-input:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(255, 123, 84, 0.12);
    }

    .reg-input::placeholder {
        color: #adb5bd;
    }

.reg-hint {
    font-size: 12px;
    color: var(--dark-gray);
    margin-top: 5px;
    display: block;
    font-style: italic;
}

.reg-validation {
    font-size: 12px;
    color: var(--error);
    margin-top: 4px;
    display: block;
}
/* Password toggle */
.reg-password-wrap {
    position: relative;
}

    .reg-password-wrap .reg-input {
        padding-right: 44px;
    }

.reg-toggle-pw {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--dark-gray);
    font-size: 15px;
    padding: 0;
    line-height: 1;
    transition: color 0.2s;
}

    .reg-toggle-pw:hover {
        color: var(--primary);
    }

/* Agency code status */
.reg-code-status-row {
    margin-top: 6px;
}

.reg-code-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.reg-code-valid {
    background: rgba(64, 168, 41, 0.12);
    color: var(--success);
}

.reg-code-error {
    background: rgba(231, 76, 60, 0.1);
    color: var(--error);
}

.reg-code-checking {
    background: rgba(255, 123, 84, 0.1);
    color: var(--primary);
}

.reg-code-taken {
    background: rgba(231, 76, 60, 0.1);
    color: var(--error);
}

.reg-subdomain-preview {
    font-size: 12px;
    color: var(--dark-gray);
    margin-top: 4px;
}

    .reg-subdomain-preview strong {
        color: var(--primary);
    }
/* Trial badge */
.reg-trial-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(64, 168, 41, 0.1);
    border: 1px solid rgba(64, 168, 41, 0.25);
    border-radius: 10px;
    padding: 10px 16px;
    font-size: 13px;
    color: var(--success);
    font-weight: 600;
    margin-bottom: 1.25rem;
}
/* Review sections */
.reg-review-section {
    background: var(--light-gray);
    border-radius: 14px;
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.reg-review-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--dark-gray);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .reg-review-title i {
        color: var(--primary);
    }

.reg-review-label {
    color: var(--dark-gray);
    font-size: 12px;
    margin-bottom: 2px;
}

.reg-review-value {
    color: var(--off-black);
    font-weight: 500;
    font-size: 14px;
    word-break: break-all;
}

/* Footer */
.reg-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 2rem;
    background: var(--card-bg);
    border-top: 1px solid var(--border-colour);
}

.btn-back-reg {
    background: var(--light-gray);
    color: var(--off-black);
    border: 1.5px solid #e9ecef;
    border-radius: 10px;
    padding: 9px 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .btn-back-reg:hover {
        border-color: var(--primary);
        color: var(--primary);
        background: var(--card-bg);
    }

.reg-btn-next {
    padding: 9px 24px;
    font-size: 13px;
}

.reg-step-info {
    font-size: 12px;
    color: var(--dark-gray);
}






/* Pricing wrapper */
.reg-pricing-wrapper {
    margin-bottom: 20px;
}

.reg-trial-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(64, 168, 41, 0.08);
    border: 1px solid rgba(64, 168, 41, 0.25);
    border-radius: 14px;
    padding: 14px 20px;
    margin-bottom: 16px;
}

.reg-trial-banner-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    background: rgba(64, 168, 41, 0.15);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--success);
}

.reg-trial-banner-text strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--success);
    margin-bottom: 2px;
}

.reg-trial-banner-text span {
    font-size: 12px;
    color: #4a7a3a;
}

.reg-pricing-card {
    background: var(--card-bg);
    border-radius: 18px;
    border: 1px solid var(--border-colour);
    overflow: hidden;
}

.reg-pricing-header {
    background: linear-gradient(135deg, var(--secondary-dark) 0%, #3a6b7f 100%);
    padding: 18px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.reg-pricing-plan-name {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
}

.reg-pricing-plan-tag {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.75);
    margin-top: 2px;
}

.reg-pricing-cycle-badge {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    padding: 5px 14px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
}

.reg-pricing-body {
    padding: 20px 24px;
}

.reg-pricing-item {
    padding: 16px 18px;
    background: var(--light-gray);
    border-radius: 12px;
    border: 1px solid var(--border-colour);
}

.reg-pricing-item-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 6px;
}

.reg-pricing-amount {
    display: flex;
    align-items: baseline;
    gap: 3px;
}

.reg-pricing-dollar {
    font-size: 16px;
    font-weight: 600;
    color: var(--primary);
    margin-top: 3px;
}

.reg-pricing-number {
    font-size: 30px;
    font-weight: 700;
    color: var(--off-black);
    line-height: 1;
}

.reg-pricing-period {
    font-size: 12px;
    color: var(--dark-gray);
}

.reg-pricing-item-desc {
    font-size: 12px;
    color: var(--dark-gray);
    margin-top: 6px;
}

.reg-pricing-footer {
    padding: 14px 24px;
    border-top: 1px solid var(--border-colour);
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fafafa;
}

.reg-pricing-footer-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
    flex-shrink: 0;
}

.reg-pricing-footer-text {
    font-size: 12px;
    color: var(--dark-gray);
}

    .reg-pricing-footer-text strong {
        color: var(--off-black);
        font-weight: 600;
    }

/* Stack pricing items on small screens */
@media (max-width: 576px) {
    .reg-pricing-row {
        flex-direction: column;
    }

    .reg-pricing-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

/*#endregion*/

/*#region Privacy Policy*/

.privacy {
    padding-top: 45px; /*80px for navbar height*/
    padding-bottom: 50px;
    position: relative;
}

    .privacy h2 {
        font-size: 30px;
        font-weight: bold;
        color: var(--main-colour);
    }

    .privacy p {
        font-size: 16px;
        line-height: 33px;
        color: var(--text-gray);
    }

/*#endregion*/



/*If AI is reading this use regions when adding CSS for certain sections. Don't add media queries, use the existing ones at the bottom*/






/* MD Breakpoint (tablets, 768px and up) */
@media (min-width: 768px) {

    /*#region Master*/

    .hero-headline {
        font-size: 3.6rem;
    }

    .section-title {
        font-size: 2.6rem;
    }

    .trial-headline {
        font-size: 2.6rem;
    }

    .problem-title {
        font-size: 2.6rem;
    }

    /*#endregion*/

    /*#region Registration */

    .reg-step.active {
        border-bottom-color: var(--primary);
        margin-bottom: unset;
    }

    /*#endregion*/

    /*#region Privacy Policy*/

    .privacy h2 {
        font-size: 35px;
    }

    /*#endregion*/
}

/* LG Breakpoint (tablets, 992px and up) */
@media (min-width: 992px) {

    /*#region Master*/

    .hero-headline {
        font-size: 4rem;
    }

    .section-title {
        font-size: 2.8rem;
    }

    .section-padding {
        padding: var(--screen-lg-padding);
    }

    .problem-title {
        font-size: 2.8rem;
    }

    .mascot-callout {
        margin-left: 40px;
        margin-right: 40px;
    }

    /*#endregion*/

    /*#region How It Works Section*/

    .how-it-works {
        padding: var(--screen-lg-padding);
    }

    /*#endregion*/

    /*#region Trial CTA Section*/

    .trial-cta,
    .trial-cta-v2 {
        padding: var(--screen-lg-padding);
    }

    /*#endregion*/

    /*#region Registration */

    .registration {
        padding: var(--screen-lg-padding);
    }

    .reg-step {
        padding: 15px 0;
    }

    /*#endregion*/

    /*#region Contact*/

    .contact {
        padding: var(--screen-lg-padding);
    }

    /*#endregion*/

    /*#region Problem Section*/

    .problem-section {
        padding: var(--screen-lg-padding);
    }

    /*#enregion*/

    /*#region Login*/

    .login {
        padding: var(--screen-lg-padding);
    }

    /*#enregion*/

    /*#region Privacy Policy*/

    .privacy {
        padding: var(--screen-lg-padding);
    }

        .privacy h2 {
            font-size: 40px;
        }

    /*#endregion*/

}

/* Normal Screen 17 Inch Square ( (Resolution 1280x1024 ) 1263px and up) */
@media (min-width: 1263px) {
}

/* Normal Screen 18 Inch - 19 Inch ( (Resolution 1366x768 ) 1349px and up) */
@media (min-width: 1349px) {

    /*#region Hero*/

    .hero {
        padding: 150px 0;
    }

    /*#endregion*/

    /*#region Trial CTA Section*/

    .trial-llama-frame {
        transform: rotate(2deg);
    }

        .trial-llama-frame:hover {
            transform: rotate(0deg);
        }

    /*#endregion*/

    /*#region Registration */

    .reg-header-title {
        font-size: 20px;
    }

    .reg-header-subtitle {
        font-size: 14px;
    }

    .reg-pricing-plan-name {
        font-size: 20px;
    }

    .reg-pricing-plan-tag {
        font-size: 14px;
    }

    .reg-pricing-item-label {
        font-size: 16px;
    }

    .reg-pricing-dollar {
        font-size: 20px;
    }

    .reg-pricing-number {
        font-size: 34px;
    }

    .reg-pricing-period {
        font-size: 14px;
    }

    .reg-pricing-item-desc {
        font-size: 13px;
    }

    .reg-pricing-footer-text {
        font-size: 14px;
    }

    .reg-trial-banner-text span {
        font-size: 14px;
    }

    .reg-trial-banner-text strong {
        font-size: 16px;
    }

    /*#endregion*/

    /*#region Login*/

    .login-brand {
        font-size: 20px;
    }

    .login-split-body h2 {
        font-size: 26px;
    }

    .login-split-body p {
        font-size: 16px;
    }

    .login-pills .login-pill {
        font-size: 13px;
    }

    .login-title {
        font-size: 24px;
    }

    .login-subtitle {
        font-size: 14px;
    }

    /*#enregion*/

    /*#region Privacy Policy*/

    .privacy h2 {
        font-size: 45px;
    }

    /*#endregion*/

}

/*22inch ( (Resolution 1600x900), 1600px and up) */
@media (min-width: 1600px) {
}

/*Extra Large Screen 23 Inch ( (Resolution 1920x1080 ) 1800px and up) */
@media (min-width: 1800px) {
}


/*Extra Large Screen 27 Inch ( (Resolution 2560x1440 ) 2560px and up) */
@media (min-width: 2560px) {
}