@font-face {
    font-family: 'Sequel Sans';
    src: url('/font/Sequel Sans Book Disp.otf') format('opentype'),
         url('/font/Sequel Sans Book Disp.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Sequel Sans';
    src: url('/font/Sequel Sans Medium Disp.otf') format('opentype'),
    url('/font/Sequel Sans Medium Disp.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Sequel Sans';
    src: url('/font/Sequel Sans Semi Bold Disp.otf') format('opentype'),
         url('/font/Sequel Sans Semi Bold Disp.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Lust Text Light';
    src: url('/font/Lust-Text-Light.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

:root {
    --bg-color: #FFFFFF;
    --bg-color-rgb: 255, 255, 255;
    --secondary-bg-color: #F9F9F6;
    --neutral50: #F1F5F9;
    --neutral100: #E2E8F0;
    --neutral200: #CBD5E1;
    --neutral300: #94A3B8;
    --neutral400: #64748B;
    --neutral500: #475569;
    --neutral600: #334155;
    --neutral900: #020617;
    --purple500: #4E325F;
    --blue25: #EBEBFC;
    --blue300: #4747E0;
    --blue400: #3333DD;
    --blue500: #0000D4;
    --primary-action: #394FFD;
    --primary-action-hover: #1A33FC;
    --primary-action-rgb: 57, 79, 253;
    --orange500: #FF7849;
    --bs-info: #4747E0;
    --bs-info-rgb: 71, 71, 224;

    /* Cookie banner */
    --ckb-bg: #212529;
    --ckb-color: #ffffff;
    --ckb-btn-bg: #394ffd;
    --ckb-btn-color: #ffffff;
    --ckb-reject-bg: transparent;
    --ckb-focus-color: #4299e1;
    --ckb-font: inherit;
    --ckb-padding: 12px 16px;
    --ckb-gap: 12px;
    --ckb-btn-padding: 10px 20px;
    --ckb-btn-radius: 4px;
    --ckb-z: 9999;
}

@media (min-width:992px) {
    .padded-lr-lg {
        padding-left: 12rem;
        padding-right: 12rem;
    }
}

body {
    background-color: var(--bg-color);
    color: var(--neutral600);
    font-family: 'Sequel Sans', sans-serif;
    padding-top: 5rem;
    letter-spacing: 0.03125rem;
}

.navbar.navbar-expand-lg.navbar-light.fixed-top {
    background-color: rgba(var(--bg-color-rgb), 0.97);
}

hr {
    display: block;
    border: 0;
    height: 1rem;
    background-image: url('/img/horizontal-ruler.svg');
    background-repeat: no-repeat;
    background-position: center;
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.light-text {
    font-family: 'Sequel Sans', sans-serif;
    font-size: 1.25rem;
    font-weight: normal;
    letter-spacing: 0.03125rem;
    line-height: 140%;
}

.light-text-color {
    color: var(--neutral400);
}

.medium-text {
    font-family: 'Sequel Sans', sans-serif;
    font-weight: 500;
    font-size: 1.25rem;
    letter-spacing: 0.03125rem;
    line-height: 140%;
}

.text-large {
    font-size: 1.125rem;
    line-height: 135%;
    letter-spacing: 0.03125rem;
}

.text-limited-width {
    max-width: 31ch;
}

.emphasized-text {
    color: var(--orange500);
    text-decoration: underline;
    text-decoration-thickness: 0.2rem;
    text-underline-offset: 0.5rem;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--purple500);
    font-family: 'Lust Text Light', sans-serif;
}

h1 {
    font-size: 4.5rem;
    line-height: 105%;
}

h2 {
    font-size: 4rem;
    line-height: 112%;
}

h3 {
    font-size: 3rem;
    line-height: 116%;
}

h3.subtle-header {
    line-height: 135%;
    font-size: 0.75rem;
    font-family: 'Sequel Sans', sans-serif;
    color: var(--neutral300);
}

h5.card-title {
    color: var(--purple500);
    font-size: 1.5rem;
    font-weight: 300;
}

.header-small {
    font-family: 'Sequel Sans', sans-serif;
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 115%;
    letter-spacing: 0.03125rem;
    color: var(--neutral900);
}

.text-purple {
    color: var(--purple500);
}

.header-subtext {
    font-size: 1.25rem;
    letter-spacing: 0.03125rem;
}

.btn {
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.03125rem;
    border-radius: 6.25rem;
}

.btn-primary {
    background-color: var(--primary-action);
    filter: drop-shadow(0 0.5rem 1rem rgba(var(--primary-action-rgb), 0.3));
}

.btn-primary:hover {
    background-color: var(--primary-action-hover);
}

.btn-primary .nav-link {
    color: var(--bg-color);
}

.btn-link {
    text-decoration-color: var(--neutral600);
}

.btn-link:hover, .btn-link:hover .nav-link {
    color: var(--primary-action);
    text-decoration-color: var(--primary-action-rgb);
}

.btn-outline-dark {
    border-color: var(--neutral200);
}

a.btn {
    font-size: 1.25rem;
    line-height: 250%;
    padding: 0.5rem 2rem;
    letter-spacing: 0.03125rem;
}

a.btn.btn-small {
    line-height: 140%;
    color: var(--blue400);
    background-color: var(--bg-color);
    padding-top: 1rem;
    padding-bottom: 1rem;
}

a.btn-subscription-choice {
    padding-top: 1rem;
    padding-bottom: 1rem;
    margin-top: 2rem;
    font-weight: 500;
    font-size: 1.125rem;
    line-height: 135%;
}

.bg-secondary-color {
    background-color: var(--secondary-bg-color);
}

.border-neutral {
    border-color: var(--neutral100);
}

.border-blue {
    border-color: var(--blue500) !important;
}

.text-blue {
    color: var(--blue500);
}

.text-light-blue {
    color: var(--blue300);
}

.bg-very-light-blue {
    background-color: var(--blue25);
}

.bg-light-blue {
    background-color: var(--blue300);
}

.bg-very-light-neutral {
    background-color: var(--neutral50);
}

.text-small-thick {
    font-size: 0.875rem;
    line-height: 145%;
    letter-spacing: 0.03125rem;
    font-weight: 500;
}

.ml-2 {
    margin-left: 0.5rem;
}

.fixed-height-image {
    height: 20rem;
}

footer .slogan {
    max-width: 28rem;
    color: var(--purple500);
    font-family: 'Lust Text Light', sans-serif;
    font-size: 2rem;
    line-height: 112%;
}

footer h2 {
    font-size: 0.875rem;
    line-height: 145%;
    letter-spacing: 0;
    font-family: 'Sequel Sans', sans-serif;
    font-weight: 600;
    color: var(--neutral900);
}

.subtle-text {
    font-size: 1.125rem;
    line-height: 135%;
    letter-spacing: 0.03125rem;
    color: var(--neutral300);
}

footer {
    margin-top: 10rem;
}

.footer-cta-row {
    margin-top: -10rem;
}

.footer-cta {
    position: relative;
    border-radius: 1.5rem;
    padding: 2rem 2rem 2.5rem 2rem;
    background: linear-gradient(270deg, #FAAF89 0%, #FF7849 100%);
    overflow: hidden;
}

.footer-cta::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('/img/footer-letters.svg');
    background-repeat: no-repeat;
    background-position: right top;
    background-size: 25rem auto;
    opacity: 1; /* SVG already has low fill opacity; keep this at 1 so it remains visible */
    pointer-events: none;
}

.footer-cta-content {
    position: relative;
    z-index: 1;
    max-width: 42rem;
    color: #fff;
}

.footer-cta-title {
    font-family: 'Lust Text Light', sans-serif;
    color: #fff;
    font-size: 1.75rem;
    line-height: 120%;
    margin: 0 0 0.75rem 0;
    max-width: 30ch;
}

.footer-cta-text {
    color: rgba(255,255,255,0.65);
    margin-bottom: 3rem;
    font-size: 1.25rem;
    line-height: 140%;
    letter-spacing: 0.03125rem;
}

.footer-social .social-circle {
    display: inline-flex;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background-color: #fff;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--neutral100);
}

.footer-social .social-circle img {
    width: 60%;
}

.footer-links a {
    color: var(--neutral600);
    text-decoration: none;
}

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

.footer-legal {
    text-decoration: none;
}

.subscription-price {
    font-size: 3rem;
    line-height: 116%;
    font-weight: 600;
    color: var(--neutral900);
}

body.minimal-body {
    background-color: var(--secondary-bg-color);
}

.minimal-body h1 {
    font-size: 4rem;
    color: var(--neutral900);
    line-height: 128%;
}

.minimal-body .btn-primary {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 140%;
}

label {
    color: var(--neutral500);
}

::placeholder {
    color: var(--neutral300) !important;
    opacity: 1;
}

.text-small-black {
    font-size: 0.875rem;
    color: black;
}

.link-orange {
    color: var(--orange500);
}

input[type=checkbox]:checked {
    background-color: var(--orange500);
    border-color: var(--orange500);
}

legend.col-form-label {
    padding: 0;
    margin-bottom: 0.5rem;
}

.dashboard-text {
    font-size: 1.5rem;
    line-height: 116%;
}

.dashboard-text b {
    color: var(--neutral900);
}

.progress-bar {
    background-color: var(--blue300);
    animation: 2s ease-in-out 0s progress-bar-animation;
}

@keyframes progress-bar-animation {
    from {
        width: 0;
    }
    to {
        width: 60%;
    }
}

.bg-opacity-40 {
    --bs-bg-opacity: 0.4;
}

#image-row img {
    height: auto;
    width: auto;
    object-fit: contain;
    flex-shrink: 1;
}

h1.modal-title {
    font-family: 'Sequel Sans', sans-serif;
    color: var(--neutral900);
}

@media (min-width: 992px) {
    .footer-cta {
        padding: 3rem 3rem 3.5rem 3rem;
        border-radius: 1.75rem;
    }
    .footer-cta-title { font-size: 2rem; }
    .footer-cta::after { background-size: 30rem auto; }
}

@media (min-width:992px) {
    .fixed-height-image {
        height: 47.8125rem;
    }
}

@media (max-width: 992px) {
    html {
        font-size: 32px;
    }

    body {
        padding-top: 0;
    }

    .text-small-black {
        font-size: 1rem;
    }

    img.round-icon {
        width: 5rem;
        margin: auto;
        display: block;
    }

    hr {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .footer-social .social-circle {
        width: 3rem;
        height: 3rem;
    }
}