:root {
        --primary: #4F5EDA;
        --secondary: #4F5EDA;
        --primaryFont: "Nunito", sans-serif;
        --primaryColor: #cb2cc8;
        --light: #F0FBFC;
        --dark: #434343;
        --primary-color: #cb2cc8; /* Main button and accent color */
        --background-color: #1a1a1a; /* Dark background */
        --form-background: #2c2c2c; /* Form container background */
        --text-color: #ffffff; /* Primary text color */
        --secondary-text-color: #b0b0b0; /* Secondary text color */
        --input-background: #3a3a3a; /* Input field background */
        --input-border: #4a4a4a; /* Input field border */
        --error-color: #ff4747; /* Error message color */
}

/* Text colours from the Real Reads Figma frames */
.hero-cta,
.hero-cta:hover {
    color: #000 !important;
}

.section-one-text a:hover {
    color: #fff !important;
}

.signup-button,
.login-button,
.cancel-button {
    color: #60278D !important;
}

/* Feature cards: Inter, 19px from the left, blue at 32%, as in the Real Reads frame */
.section-two-card {
    padding-left: 19px !important;
    padding-right: 12px !important;
    background-color: color-mix(in srgb, var(--primary) 32%, transparent) !important;
}

.section-two-card:hover {
    background-color: color-mix(in srgb, var(--primary) 48%, transparent) !important;
}

.section-two-card-title {
    padding-right: 0 !important;
    font-family: 'Inter', sans-serif !important;
}

/* Keeps "Premium Audiobooks" on one line in the 3-column grid; 32px from ~1333px up */
@media (min-width: 992px) {
    .section-two-card-title {
        font-size: clamp(22px, calc(2.8vw - 5px), 32px) !important;
    }
}

/* Hero title 64px in a 625px column, so it breaks after "Books" as in the frame */
@media (min-width: 1260px) {
    .hero-container {
        grid-template-columns: minmax(0, 419px) minmax(0, 567px) !important;
    }

    .hero-title {
        font-size: 64px !important;
        margin-right: -58px !important;
    }
}



    

.desktop-closed-message-avatar ~ div {
    color: var(--primaryColor, 161616) !important;
    font-weight: 500;
}