html {
    scroll-behavior: auto;
}
body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.nav-link { position: relative; transition: color .2s ease; }
.nav-link:hover { color: #7A3FF2; }
.nav-link::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -10px; height: 2px; border-radius: 999px; background: #7A3FF2; transition: right .2s ease; }
.nav-link:hover::after { right: 0; }
.icon-btn { display: inline-flex; height: 42px; width: 42px; align-items: center; justify-content: center; border-radius: 999px; color: #152565; transition: background .2s ease, transform .2s ease; }
.icon-btn:hover { background: #f3f4ff; transform: translateY(-1px); }
.mobile-link { border-radius: 14px; padding: .85rem 1rem; }
.mobile-link:hover { background: #f6f4ff; color: #7A3FF2; }
.slider-btn { display: inline-flex; height: 42px; width: 42px; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid rgba(122,63,242,.16); background: rgba(255,255,255,.85); color: #7A3FF2; font-weight: 900; box-shadow: 0 10px 30px rgba(44,38,110,.08); transition: .2s ease; }
.slider-btn:hover { transform: translateY(-1px); background: white; }
.hero-dots { background-image: radial-gradient(circle at 1px 1px, rgba(122,63,242,.17) 1px, transparent 0); background-size: 28px 28px; }
.hero-art-card::before { content: ""; position: absolute; inset: -40% auto auto -15%; z-index: 2; width: 55%; height: 150%; transform: rotate(17deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); pointer-events: none; }
@media (max-width: 640px) { .hero-art-card { border-radius: 1.5rem; } }
/* ========================================
   THEMES
======================================== */

.themes-track {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.themes-track::-webkit-scrollbar {
    display: none;
}


.theme-card {
    text-decoration: none;
}


.theme-card img {
    display: block;
}


/*
 * Nema translate-a i nema scale-a.
 * Menjaju se samo border, shadow i boje.
 */
.theme-card > div {
    transition:
        border-color 220ms ease,
        box-shadow 220ms ease;
}


.themes-arrow {
    transition:
        background-color 200ms ease,
        border-color 200ms ease,
        color 200ms ease;
}


@media (max-width: 639px) {

    .themes-track {
        margin-left: -16px;
        margin-right: -16px;

        padding-left: 16px;
        padding-right: 16px;

        scroll-padding-left: 16px;
    }

}
/* ========================================
   HOMEPAGE PROMO BLOCKS
======================================== */

.homepage-promo-card {
    background: var(--promo-bg);
}


.promo-card-bg {
    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(255, 255, 255, 0.14),
            transparent 32%
        ),
        radial-gradient(
            circle at 80% 80%,
            rgba(255, 255, 255, 0.13),
            transparent 35%
        );
}


.promo-title {
    color: var(--promo-title);
}


.promo-description,
.promo-extra {
    color: var(--promo-text);
}


.promo-button {
    background-color: var(--promo-button);
    color: var(--promo-button-text);

    transition:
        background-color 220ms ease,
        box-shadow 220ms ease;
}


.promo-button:hover {
    background-color: var(--promo-button-hover);

    box-shadow:
        0 10px 28px
        rgba(42, 31, 96, 0.12);
}


/*
 * Newsletter input
 */
.homepage-promo-card input {
    transition:
        box-shadow 200ms ease,
        background-color 200ms ease;
}


.homepage-promo-card input::placeholder {
    color: #94a3b8;
}


/*
 * Mobile
 */
@media (max-width: 639px) {

    .homepage-promo-card {
        border-radius: 24px;
    }

}
/* ========================================
   TESTIMONIALS
======================================== */

.testimonials-dots-bg {
    opacity: 0.24;

    background-image:
        radial-gradient(
            circle,
            rgba(122, 63, 242, 0.13) 1px,
            transparent 1px
        );

    background-size: 28px 28px;
}


.testimonials-slider {
    position: relative;
}


.testimonials-track {
    scrollbar-width: none;
    -ms-overflow-style: none;

    scroll-snap-type: x mandatory;
}


.testimonials-track::-webkit-scrollbar {
    display: none;
}


.testimonial-card {
    scroll-snap-align: start;

    transition:
        border-color 250ms ease,
        box-shadow 300ms ease,
        opacity 500ms cubic-bezier(0.22, 1, 0.36, 1);
}


.testimonial-card:hover {
    border-color:
        rgba(122, 63, 242, 0.20);

    box-shadow:
        0 16px 40px
        rgba(41, 55, 130, 0.09);
}


.testimonials-arrow {
    transition:
        background-color 220ms ease,
        border-color 220ms ease,
        color 220ms ease,
        box-shadow 220ms ease;
}


.testimonials-arrow:hover {
    background-color: #f5f3ff;

    border-color:
        rgba(122, 63, 242, 0.25);

    box-shadow:
        0 10px 24px
        rgba(77, 45, 170, 0.14);
}


.testimonials-arrow:disabled {
    opacity: 0.3;
    cursor: default;
}


.testimonial-dot {
    height: 8px;
    width: 8px;

    border: 0;
    border-radius: 9999px;

    background-color: #ddd6fe;

    cursor: pointer;

    transition:
        width 450ms cubic-bezier(0.22, 1, 0.36, 1),
        background-color 300ms ease;
}


.testimonial-dot-active {
    width: 26px;

    background-color: #7A3FF2;
}


@media (max-width: 767px) {

    .testimonial-card {
        scroll-snap-align: center;
    }

}
/* ========================================
   STORY WIZARD
======================================== */

#storyWizard {
    opacity: 0;
    transition:
        opacity 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

#storyWizard.story-wizard-visible {
    opacity: 1;
}

#storyWizardPanel {
    opacity: 0;
    transform: scale(0.985);

    transition:
        opacity 350ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 450ms cubic-bezier(0.22, 1, 0.36, 1);
}

#storyWizard.story-wizard-visible #storyWizardPanel {
    opacity: 1;
    transform: scale(1);
}


.story-step {
    animation:
        storyStepFadeIn
        400ms
        cubic-bezier(0.22, 1, 0.36, 1);
}


@keyframes storyStepFadeIn {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }

}


/* Progress */

.story-progress-item.story-progress-active
.story-progress-circle {
    border-color: #7A3FF2;
    background-color: #7A3FF2;
    color: white;

    box-shadow:
        0 8px 20px
        rgba(122, 63, 242, 0.20);
}


.story-progress-item.story-progress-active
.story-progress-label {
    color: #7A3FF2;
}


.story-progress-item.story-progress-complete
.story-progress-circle {
    border-color: #7A3FF2;
    background-color: #7A3FF2;
    color: white;
}


.story-progress-item.story-progress-complete
.story-progress-line {
    background-color: #7A3FF2;
}


/* Category / Theme selection */

.story-category-option.story-option-selected,
.story-theme-option.story-option-selected {
    border-color: #7A3FF2;
    background-color: #faf7ff;

    box-shadow:
        0 12px 30px
        rgba(122, 63, 242, 0.12);
}


.story-category-option.story-option-selected
.story-selected-check,
.story-theme-option.story-option-selected
.story-selected-check {
    display: flex;
}


/* Disable page scroll when wizard is open */

body.story-wizard-open {
    overflow: hidden;
}


/* Mobile */

@media (max-width: 639px) {

    #storyWizardPanel {
        transform: none;
    }

    #storyWizard.story-wizard-visible #storyWizardPanel {
        transform: none;
    }

}
/* ========================================
   STORY WIZARD PREMIUM LOOK
======================================== */

.story-premium-upload:not(:disabled):hover {
    transform: translateY(-1px);
}

#storyWizardPanel {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,1) 0%,
            rgba(252,251,255,1) 100%
        );
}

#storyWizardFooter {
    box-shadow:
        0 -10px 30px rgba(20, 32, 88, 0.04);
}

#storyNextButton {
    min-width: 160px;
    box-shadow:
        0 14px 28px rgba(122, 63, 242, 0.22);
}

#storyNextButton:hover {
    box-shadow:
        0 18px 36px rgba(122, 63, 242, 0.28);
}
/* ========================================
   PERSONALIZED STORY BRIEF
======================================== */

.story-personalized-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(122, 63, 242, 0.16);
    border-radius: 18px;
    padding: 22px;
    background:
        radial-gradient(circle at 100% 0%, rgba(122, 63, 242, 0.09), transparent 32%),
        linear-gradient(145deg, #ffffff 0%, #fbf9ff 55%, #f7f3ff 100%);
    box-shadow:
        0 18px 45px rgba(51, 34, 92, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.story-personalized-card__glow {
    position: absolute;
    top: -90px;
    right: -70px;
    width: 210px;
    height: 210px;
    border-radius: 999px;
    background: rgba(122, 63, 242, 0.10);
    filter: blur(42px);
    pointer-events: none;
}

.story-personalized-icon {
    display: flex;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(122, 63, 242, 0.14);
    border-radius: 14px;
    background: linear-gradient(145deg, #ffffff, #f1eaff);
    box-shadow: 0 10px 24px rgba(122, 63, 242, 0.13);
    font-size: 22px;
}

.story-personalized-examples {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.story-personalized-example {
    display: flex;
    min-height: 58px;
    align-items: center;
    gap: 9px;
    border: 1px solid rgba(122, 63, 242, 0.10);
    border-radius: 13px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.76);
    color: #5f6676;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.45;
}

.story-personalized-example > span:first-child {
    flex: 0 0 auto;
    font-size: 18px;
}

.story-personalized-textarea-shell {
    overflow: hidden;
    border: 1px solid #e3d9fb;
    border-radius: 15px;
    background: #ffffff;
    box-shadow:
        0 8px 22px rgba(35, 28, 70, 0.05),
        0 0 0 0 rgba(122, 63, 242, 0);
    transition:
        border-color 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;
}

.story-personalized-textarea-shell:focus-within {
    border-color: rgba(122, 63, 242, 0.56);
    box-shadow:
        0 12px 30px rgba(35, 28, 70, 0.08),
        0 0 0 4px rgba(122, 63, 242, 0.08);
    transform: translateY(-1px);
}

.story-personalized-textarea {
    display: block;
    width: 100%;
    min-height: 152px;
    resize: vertical;
    border: 0;
    outline: 0;
    padding: 17px 18px 12px;
    background: transparent;
    color: #182452;
    font-size: 15px;
    font-weight: 650;
    line-height: 1.7;
}

.story-personalized-textarea::placeholder {
    color: #aeb4c3;
    font-weight: 500;
}

.story-personalized-textarea-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    border-top: 1px solid #f0ebfa;
    padding: 10px 14px 11px;
    background: #fcfbff;
    color: #9aa1b1;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.45;
}

.story-personalized-counter {
    flex: 0 0 auto;
    color: #7A3FF2;
    font-weight: 900;
    letter-spacing: 0.01em;
}

@media (max-width: 767px) {
    .story-personalized-card {
        padding: 18px;
        border-radius: 16px;
    }

    .story-personalized-examples {
        grid-template-columns: 1fr;
    }

    .story-personalized-example {
        min-height: auto;
    }

    .story-personalized-textarea-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }
}


/* =========================================
   SITE FOOTER
   ========================================= */
.site-footer {
    position: relative;
    overflow: hidden;
    margin-top: 0;
    background:
        radial-gradient(circle at 88% 18%, rgba(126, 91, 239, 0.20), transparent 30%),
        radial-gradient(circle at 6% 86%, rgba(45, 212, 191, 0.10), transparent 24%),
        #17213d;
    color: #fff;
    isolation: isolate;
}

.site-footer::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .16;
    background-image: radial-gradient(circle, rgba(255,255,255,.8) 1px, transparent 1.5px);
    background-size: 42px 42px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.75), transparent 86%);
}

.site-footer__glow {
    position: absolute;
    border-radius: 999px;
    filter: blur(4px);
    pointer-events: none;
}

.site-footer__glow--one {
    width: 280px;
    height: 280px;
    right: -90px;
    top: -120px;
    background: rgba(148, 101, 255, .12);
}

.site-footer__glow--two {
    width: 220px;
    height: 220px;
    left: -100px;
    bottom: -120px;
    background: rgba(45, 212, 191, .08);
}

.site-footer__inner {
    position: relative;
    z-index: 1;
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
    padding: 58px 0 42px;
    display: grid;
    grid-template-columns: 1.35fr .65fr 1fr 1.1fr;
    gap: 52px;
    align-items: center;
}

.site-footer__logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: white;
    text-decoration: none;
    font-size: 25px;
    line-height: 1;
    font-weight: 950;
    letter-spacing: -.05em;
}

.site-footer__logo > span:last-child > span {
    color: #c4a7ff;
}

.site-footer__logo-mark {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 14px;
    background: linear-gradient(135deg, #8b5cf6, #b98cff);
    box-shadow: 0 12px 28px rgba(139, 92, 246, .28);
    font-size: 19px;
}

.site-footer__tagline {
    max-width: 310px;
    margin-top: 16px;
    color: #b8c2da;
    font-size: 13px;
    line-height: 1.75;
    font-weight: 600;
}

.site-footer__socials {
    display: flex;
    gap: 10px;
    margin-top: 21px;
}

.site-footer__social {
    display: grid;
    place-items: center;
    width: 35px;
    height: 35px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 11px;
    background: rgba(255,255,255,.06);
    color: #dce3f5;
    transition: transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}

.site-footer__social:hover {
    transform: translateY(-2px);
    color: #fff;
    background: rgba(139, 92, 246, .28);
    border-color: rgba(196, 167, 255, .45);
}

.site-footer__social svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.site-footer__social svg path:not(.site-footer__social-play) {
    fill: none;
}

.site-footer__social .site-footer__social-play {
    fill: currentColor;
    stroke: none;
}

.site-footer__nav {
    align-self: start;
    padding-top: 3px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.site-footer__nav-title {
    margin-bottom: 5px;
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .13em;
}

.site-footer__nav a {
    width: fit-content;
    color: #b8c2da;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    transition: color .2s ease, transform .2s ease;
}

.site-footer__nav a:hover {
    color: #fff;
    transform: translateX(3px);
}

.site-footer__support {
    align-self: start;
    padding-top: 1px;
}

.site-footer__support-badge {
    display: inline-flex;
    padding: 6px 9px;
    border-radius: 999px;
    color: #8670b6;
    background: rgba(139, 92, 246, .15);
    border: 1px solid rgba(196, 167, 255, .17);
    font-size: 9px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.site-footer__support h3 {
    margin: 12px 0 0;
    color: #fff;
    font-size: 17px;
    font-weight: 900;
}

.site-footer__support p {
    margin-top: 8px;
    max-width: 270px;
    color: #9eabc7;
    font-size: 12px;
    line-height: 1.6;
    font-weight: 600;
}

.site-footer__email {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 13px;
    color: #e8eaf6;
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
}

.site-footer__email:hover {
    color: #cdb8ff;
}

.site-footer__email svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linejoin: round;
}

.site-footer__art {
    position: relative;
    min-height: 152px;
    align-self: end;
}

.site-footer__moon {
    position: absolute;
    right: 12px;
    top: 0;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #ffe37a;
    color: #8a64db;
    box-shadow: 0 0 30px rgba(255, 227, 122, .22);
    font-size: 12px;
}

.site-footer__cloud {
    position: absolute;
    height: 30px;
    border-radius: 999px;
    background: rgba(255,255,255,.93);
    box-shadow: 0 8px 24px rgba(5, 11, 29, .18);
}

.site-footer__cloud::before,
.site-footer__cloud::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: inherit;
}

.site-footer__cloud::before {
    width: 38px;
    height: 38px;
    left: 18px;
    top: -17px;
}

.site-footer__cloud::after {
    width: 48px;
    height: 48px;
    right: 18px;
    top: -24px;
}

.site-footer__cloud--one {
    width: 125px;
    right: 10px;
    bottom: 2px;
}

.site-footer__cloud--two {
    width: 92px;
    left: 0;
    bottom: 18px;
    transform: scale(.78);
    opacity: .66;
}

.site-footer__rocket {
    position: absolute;
    right: 82px;
    bottom: 34px;
    width: 68px;
    height: 100px;
    border-radius: 46% 54% 46% 54% / 64% 64% 36% 36%;
    transform: rotate(24deg);
    background: linear-gradient(145deg, #a77cff 0%, #8b5cf6 55%, #6d43d5 100%);
    border: 3px solid rgba(255,255,255,.6);
    box-shadow: 0 18px 35px rgba(4, 8, 24, .26);
}

.site-footer__rocket::before,
.site-footer__rocket::after {
    content: '';
    position: absolute;
    bottom: 12px;
    width: 27px;
    height: 38px;
    z-index: -1;
    background: #f76f7a;
}

.site-footer__rocket::before {
    left: -18px;
    border-radius: 80% 20% 70% 30%;
}

.site-footer__rocket::after {
    right: -18px;
    border-radius: 20% 80% 30% 70%;
}

.site-footer__rocket-window {
    position: absolute;
    left: 50%;
    top: 25px;
    transform: translateX(-50%);
    display: grid;
    place-items: center;
    width: 29px;
    height: 29px;
    border-radius: 50%;
    background: #c8f3ff;
    border: 3px solid #fff;
    color: #8b5cf6;
    font-size: 9px;
}

.site-footer__rocket-flame {
    position: absolute;
    left: 50%;
    bottom: -28px;
    transform: translateX(-50%);
    width: 22px;
    height: 35px;
    border-radius: 50% 50% 65% 65%;
    background: linear-gradient(#ffd45d, #ff7a64);
    clip-path: polygon(50% 100%, 5% 0, 95% 0);
}

.site-footer__bottom {
    position: relative;
    z-index: 1;
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
    padding: 17px 0 20px;
    border-top: 1px solid rgba(255,255,255,.09);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    color: #8390ad;
    font-size: 11px;
    font-weight: 700;
}

.site-footer__bottom-sparkles {
    color: #b899ff;
    letter-spacing: .35em;
}

@media (max-width: 900px) {
    .site-footer__inner {
        grid-template-columns: 1.2fr .8fr 1fr;
        gap: 38px 30px;
    }

    .site-footer__art {
        display: none;
    }
}

@media (max-width: 640px) {
    .site-footer__inner {
        width: min(100% - 32px, 1180px);
        padding: 42px 0 30px;
        grid-template-columns: 1fr 1fr;
        gap: 34px 24px;
    }

    .site-footer__brand {
        grid-column: 1 / -1;
    }

    .site-footer__support {
        grid-column: 1 / -1;
    }

    .site-footer__tagline {
        max-width: 390px;
    }

    .site-footer__bottom {
        width: min(100% - 32px, 1180px);
        padding: 16px 0 18px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}
html {
  scroll-behavior: auto;
  scroll-padding-top: 90px;
}

body {
  overscroll-behavior-y: none;
}
/* Chrome / Edge / Safari */

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

::-webkit-scrollbar-track {
  background: #f8f7ff;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    #9b7cf6,
    #6f4fe8
  );

  border-radius: 999px;

  border: 2px solid #f8f7ff;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    180deg,
    #8968ef,
    #5f3fd8
  );
}


/* Firefox */

html {
  scrollbar-width: thin;
  scrollbar-color:
    #8062e8
    #f8f7ff;
}
/* ========================================
   MAGIC PAGE LOADER
======================================== */

.magic-page-loader {
    position: fixed;

    inset: 0;

    z-index: 99999;

    display: grid;

    place-items: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(122, 63, 242, 0.12),
            transparent 28%
        ),
        radial-gradient(
            circle at 15% 20%,
            rgba(80, 140, 252, 0.08),
            transparent 24%
        ),
        linear-gradient(
            145deg,
            #fbfcff 0%,
            #f7f5ff 52%,
            #f3f7ff 100%
        );

    opacity: 0;

    visibility: hidden;

    transition:
        opacity
        440ms
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        ),

        visibility
        440ms
        ease;
}


.magic-page-loader--visible {
    opacity: 1;

    visibility: visible;
}


.magic-page-loader--hide {
    opacity: 0;

    visibility: hidden;

    pointer-events: none;
}


/* ========================================
   LOADER CONTENT
======================================== */

.magic-loader__content {
    position: relative;

    z-index: 4;

    display: flex;

    width: min(
        88vw,
        340px
    );

    flex-direction: column;

    align-items: center;

    text-align: center;
}


/* ========================================
   MAGIC BOOK
======================================== */

.magic-loader__book {
    position: relative;

    width: 104px;

    height: 74px;

    filter:
        drop-shadow(
            0
            18px
            28px
            rgba(
                68,
                43,
                145,
                0.18
            )
        );

    animation:
        magicBookFloat
        2.2s
        ease-in-out
        infinite;
}


.magic-loader__book-left,
.magic-loader__book-right {
    position: absolute;

    bottom: 5px;

    width: 50px;

    height: 58px;

    border:
        2px
        solid
        rgba(
            122,
            63,
            242,
            0.28
        );

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #efeaff
        );

    box-shadow:
        inset
        0
        0
        18px
        rgba(
            122,
            63,
            242,
            0.08
        ),

        0
        8px
        22px
        rgba(
            48,
            37,
            100,
            0.08
        );
}


.magic-loader__book-left {
    left: 3px;

    transform:
        perspective(180px)
        rotateY(12deg)
        rotateZ(-3deg);

    transform-origin:
        right
        bottom;

    border-radius: 14px 5px 10px 14px;
}


.magic-loader__book-right {
    right: 3px;

    transform:
        perspective(180px)
        rotateY(-12deg)
        rotateZ(3deg);

    transform-origin:
        left
        bottom;

    border-radius: 5px 14px 14px 10px;
}


.magic-loader__book::after {
    content: '';

    position: absolute;

    left: 50%;

    bottom: 7px;

    z-index: 5;

    width: 2px;

    height: 51px;

    background:
        linear-gradient(
            to bottom,
            rgba(
                122,
                63,
                242,
                0
            ),
            rgba(
                122,
                63,
                242,
                .35
            ),
            rgba(
                122,
                63,
                242,
                .08
            )
        );

    transform:
        translateX(-50%);
}


/* ========================================
   MAGIC STAR ABOVE BOOK
======================================== */

.magic-loader__wand {
    position: absolute;

    left: 50%;

    top: -13px;

    z-index: 8;

    color: #7A3FF2;

    font-size: 27px;

    line-height: 1;

    text-shadow:
        0
        0
        12px
        rgba(
            122,
            63,
            242,
            0.55
        ),

        0
        0
        26px
        rgba(
            122,
            63,
            242,
            0.22
        );

    transform:
        translateX(-50%);

    animation:
        magicWandPulse
        1.45s
        ease-in-out
        infinite;
}


/* ========================================
   LOADER TEXT
======================================== */

.magic-loader__title {
    margin-top: 16px;

    color: #152565;

    font-size: 22px;

    font-weight: 950;

    letter-spacing:
        -0.035em;
}


.magic-loader__subtitle {
    margin-top: 5px;

    color: #8992aa;

    font-size: 12px;

    font-weight: 700;

    letter-spacing:
        0.015em;
}


/* ========================================
   PROGRESS
======================================== */

.magic-loader__progress {
    position: relative;

    width: 170px;

    height: 5px;

    margin-top: 18px;

    overflow: hidden;

    border-radius: 10px;

    background:
        rgba(
            122,
            63,
            242,
            0.09
        );
}


.magic-loader__progress > span {
    position: absolute;

    inset:
        0
        auto
        0
        0;

    width: 44%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #9d7bf7,
            #7A3FF2,
            #8fa9ff
        );

    box-shadow:
        0
        0
        16px
        rgba(
            122,
            63,
            242,
            0.28
        );

    animation:
        magicLoaderProgress
        1.25s
        cubic-bezier(
            0.65,
            0,
            0.35,
            1
        )
        infinite;
}


/* ========================================
   STARS
======================================== */

.magic-loader__stars {
    position: absolute;

    left: 50%;

    top: 50%;

    z-index: 3;

    width: 260px;

    height: 190px;

    transform:
        translate(
            -50%,
            -58%
        );

    pointer-events: none;
}


.magic-loader__star {
    position: absolute;

    color: #8f6bf4;

    opacity: 0;

    text-shadow:
        0
        0
        13px
        rgba(
            122,
            63,
            242,
            .34
        );

    animation:
        magicStarTwinkle
        1.9s
        ease-in-out
        infinite;
}


.magic-loader__star--1 {
    left: 20px;

    top: 50px;

    font-size: 16px;

    animation-delay: .05s;
}


.magic-loader__star--2 {
    right: 27px;

    top: 31px;

    font-size: 19px;

    animation-delay: .42s;
}


.magic-loader__star--3 {
    left: 53px;

    bottom: 35px;

    font-size: 12px;

    animation-delay: .78s;
}


.magic-loader__star--4 {
    right: 45px;

    bottom: 42px;

    font-size: 14px;

    animation-delay: 1.08s;
}


.magic-loader__star--5 {
    left: 50%;

    top: 8px;

    font-size: 11px;

    animation-delay: 1.32s;
}


/* ========================================
   BACKGROUND GLOWS
======================================== */

.magic-loader__glow {
    position: absolute;

    width: 310px;

    height: 310px;

    border-radius: 50%;

    filter:
        blur(58px);

    pointer-events: none;
}


.magic-loader__glow--one {
    left:
        calc(
            50% - 260px
        );

    top:
        calc(
            50% - 250px
        );

    background:
        rgba(
            122,
            63,
            242,
            .10
        );

    animation:
        magicGlowDriftOne
        4.4s
        ease-in-out
        infinite
        alternate;
}


.magic-loader__glow--two {
    right:
        calc(
            50% - 270px
        );

    bottom:
        calc(
            50% - 270px
        );

    background:
        rgba(
            80,
            140,
            252,
            .09
        );

    animation:
        magicGlowDriftTwo
        5s
        ease-in-out
        infinite
        alternate;
}


/* ========================================
   ANIMATIONS
======================================== */

@keyframes magicBookFloat {

    0%,
    100% {

        transform:
            translateY(0);

    }


    50% {

        transform:
            translateY(-7px);

    }

}


@keyframes magicWandPulse {

    0%,
    100% {

        opacity: .68;

        transform:
            translateX(-50%)
            scale(.88)
            rotate(-7deg);

    }


    50% {

        opacity: 1;

        transform:
            translateX(-50%)
            scale(1.18)
            rotate(7deg);

    }

}


@keyframes magicStarTwinkle {

    0%,
    100% {

        opacity: 0;

        transform:
            translateY(5px)
            scale(.7);

    }


    45% {

        opacity: 1;

        transform:
            translateY(-3px)
            scale(1.08);

    }

}


@keyframes magicLoaderProgress {

    0% {

        left: -48%;

    }


    55% {

        left: 58%;

    }


    100% {

        left: 118%;

    }

}


@keyframes magicGlowDriftOne {

    from {

        transform:
            translate3d(
                -18px,
                -8px,
                0
            );

    }


    to {

        transform:
            translate3d(
                18px,
                10px,
                0
            );

    }

}


@keyframes magicGlowDriftTwo {

    from {

        transform:
            translate3d(
                18px,
                12px,
                0
            );

    }


    to {

        transform:
            translate3d(
                -18px,
                -10px,
                0
            );

    }

}


/* ========================================
   ACCESSIBILITY
======================================== */

@media (
    prefers-reduced-motion:
    reduce
) {

    .magic-loader__book,
    .magic-loader__wand,
    .magic-loader__star,
    .magic-loader__progress > span,
    .magic-loader__glow {

        animation:
            none
            !important;

    }

}

/* ========================================
   TINYKIDSTALE MAGICAL COLORED SECTIONS
   Purple-dominant, subtle and premium
======================================== */

.pattern-section {
    position: relative;
    isolation: isolate;
}


/* ========================================
   PURPLE-DOMINANT BACKGROUND
======================================== */

.pattern-section--hero,
.pattern-section--steps,
.pattern-section--testimonials {
    position: relative;
    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #f4efff 0%,
            #f1ecff 56%,
            #f6f2ff 100%
        ) !important;
}


/* ========================================
   REMOVE OLD HERO DOT LAYER
======================================== */

.hero-dots {
    display: none !important;
}


/* ========================================
   DECORATION LAYERS
======================================== */

.pattern-section::before,
.pattern-section::after {
    content: '';
    position: absolute;
    pointer-events: none;
}


/* ========================================
   SUBTLE STAR / SQUARE FIELD
======================================== */

.pattern-section--hero::before,
.pattern-section--steps::before,
.pattern-section--testimonials::before {
    inset: 0;
    z-index: 0;

    opacity: 0.50;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cpath d='M28 20 C29 27 33 31 40 32 C33 33 29 37 28 44 C27 37 23 33 16 32 C23 31 27 27 28 20Z' fill='%237A3FF2' fill-opacity='.27'/%3E%3Cpath d='M110 72 C111 77 114 80 119 81 C114 82 111 85 110 90 C109 85 106 82 101 81 C106 80 109 77 110 72Z' fill='%237A3FF2' fill-opacity='.20'/%3E%3Crect x='70' y='116' width='3' height='3' rx='1' fill='%237A3FF2' fill-opacity='.18'/%3E%3C/svg%3E"),

        radial-gradient(
            circle,
            rgba(122, 63, 242, 0.15) 0.8px,
            transparent 1.3px
        );

    background-size:
        150px 150px,
        62px 62px;

    background-position:
        18px 12px,
        0 0;
}


/* ========================================
   VERY SOFT PURPLE GLOW
======================================== */

.pattern-section--hero::after,
.pattern-section--steps::after,
.pattern-section--testimonials::after {
    inset: -18% -8%;
    z-index: 0;

    background:
        radial-gradient(
            circle at 17% 34%,
            rgba(122, 63, 242, 0.11),
            transparent 25%
        ),
        radial-gradient(
            circle at 84% 38%,
            rgba(122, 63, 242, 0.07),
            transparent 26%
        );

    opacity: 0.78;
}


/* ========================================
   HERO
======================================== */

.pattern-section--hero {
    background:
        linear-gradient(
            135deg,
            #f2ecff 0%,
            #eee8ff 58%,
            #f5f0ff 100%
        ) !important;
}

.pattern-section--hero::before {
    opacity: 0.54;
}

.pattern-section--hero::after {
    opacity: 0.82;
}


/* ========================================
   STEPS
======================================== */

.pattern-section--steps::before {
    opacity: 0.44;
}

.pattern-section--steps::after {
    opacity: 0.66;
}


/* ========================================
   TESTIMONIALS
======================================== */

.pattern-section--testimonials::before {
    opacity: 0.46;
}

.pattern-section--testimonials::after {
    opacity: 0.70;
}


/* ========================================
   WHITE SECTIONS
======================================== */

.pattern-section--category,
.pattern-section--themes,
.pattern-section--promo {
    background: #ffffff !important;
}

.pattern-section--category::before,
.pattern-section--category::after,
.pattern-section--themes::before,
.pattern-section--themes::after,
.pattern-section--promo::before,
.pattern-section--promo::after {
    display: none;
}


/* ========================================
   CONTENT ABOVE DECORATION
======================================== */

.pattern-section--hero > *,
.pattern-section--steps > *,
.pattern-section--testimonials > *,
.pattern-section--category > *,
.pattern-section--themes > *,
.pattern-section--promo > * {
    position: relative;
    z-index: 1;
}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 767px) {

    .pattern-section--hero::before,
    .pattern-section--steps::before,
    .pattern-section--testimonials::before {
        opacity: 0.34;

        background-size:
            135px 135px,
            70px 70px;
    }

    .pattern-section--hero::after,
    .pattern-section--steps::after,
    .pattern-section--testimonials::after {
        opacity: 0.55;
    }

}


/* ========================================
   ACCESSIBILITY
======================================== */

@media (prefers-reduced-motion: reduce) {

    .pattern-section::before,
    .pattern-section::after {
        transform: none !important;
    }

}

/* =========================================================
   CATEGORY POSTER CARDS ONLY
   Keeps the original site design everywhere else.
   ========================================================= */
.pattern-section--category {
    position: relative;
    padding-top: 70px !important;
    padding-bottom: 86px !important;
    background:
        linear-gradient(180deg, #ffffff 0%, #f8fcff 48%, #e9f8ff 100%) !important;
}

.pattern-section--category::before {
    content: "" !important;
    display: block !important;
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 10% 20%, rgba(255, 76, 165, .08) 0 3px, transparent 4px),
        radial-gradient(circle at 84% 16%, rgba(122, 63, 242, .09) 0 4px, transparent 5px),
        radial-gradient(circle at 68% 77%, rgba(255, 199, 42, .11) 0 3px, transparent 4px);
    background-size: 90px 90px, 118px 118px, 82px 82px;
    pointer-events: none;
}

.pattern-section--category .mb-10 {
    margin-bottom: 34px !important;
}

.pattern-section--category h2 {
    font-size: clamp(2rem, 4vw, 3rem) !important;
}

.category-showcase-grid {
    align-items: stretch;
    gap: 16px !important;
}

.category-poster-card {
    min-width: 0;
    padding: 10px !important;
    overflow: hidden;
    border-width: 2px !important;
    border-radius: 30px !important;
    background: var(--card-bg) !important;
    border-color: color-mix(in srgb, var(--card-border) 72%, white) !important;
    box-shadow: 0 16px 34px rgba(31, 66, 112, .12) !important;
    transition: box-shadow .22s ease, border-color .22s ease !important;
}

.category-poster-card:hover {
    box-shadow: 0 22px 46px rgba(31, 66, 112, .20) !important;
}

.category-poster-card > .flex {
    height: 100%;
}

.category-poster-card .mb-4 {
    margin-bottom: 14px !important;
    overflow: hidden;
    border-radius: 22px;
    background: #fff;
}

.category-poster-image {
    display: block;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 5 !important;
    object-fit: cover !important;
    object-position: center top !important;
    border-radius: 22px !important;
}

.category-poster-card h3 {
    padding: 0 8px;
    font-size: 1.2rem !important;
    text-align: center;
}

.category-poster-card p {
    margin-top: 7px !important;
    padding: 0 8px 8px !important;
    padding-right: 8px !important;
    text-align: center;
    font-size: .82rem !important;
    line-height: 1.45 !important;
    color: #52617b !important;
}

.category-poster-card .mt-auto,
.category-poster-card .category-card__cta {
    display: none !important;
}

@media (max-width: 639px) {
    .category-poster-card {
        max-width: 360px;
        margin-inline: auto;
        width: 100%;
    }
}


/* =========================================================
   STORY STYLE INFINITE SLIDER
   ========================================================= */

.story-style-strip {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 16px 0;
    border-top: 1px solid rgba(122, 63, 242, 0.10);
    border-bottom: 1px solid rgba(122, 63, 242, 0.10);
    background:
        linear-gradient(
            90deg,
            #0b0b18 0%,
            #101022 48%,
            #0b0b18 100%
        );
}

.story-style-strip::before,
.story-style-strip::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 5;
    width: 90px;
    pointer-events: none;
}

.story-style-strip::before {
    left: 0;
    background:
        linear-gradient(
            90deg,
            #0b0b18 0%,
            rgba(11, 11, 24, 0.90) 38%,
            rgba(11, 11, 24, 0) 100%
        );
}

.story-style-strip::after {
    right: 0;
    background:
        linear-gradient(
            270deg,
            #0b0b18 0%,
            rgba(11, 11, 24, 0.90) 38%,
            rgba(11, 11, 24, 0) 100%
        );
}

.story-style-scroller {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    cursor: grab;
    user-select: none;
    scrollbar-width: none;
    -ms-overflow-style: none;
    touch-action: pan-x;
}

.story-style-scroller::-webkit-scrollbar {
    display: none;
}

.story-style-scroller.is-dragging {
    cursor: grabbing;
}

.story-style-track {
    display: flex;
    width: max-content;
    align-items: center;
    gap: 10px;
    padding: 0 42px;
    will-change: scroll-position;
}

.story-style-pill {
    display: inline-flex;
    flex: 0 0 auto;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 16px;
    border: 1px solid rgba(103, 232, 249, 0.22);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.035);
    color: rgba(255, 255, 255, 0.82);
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    outline: none;
    transition:
        border-color 180ms ease,
        background-color 180ms ease,
        color 180ms ease,
        box-shadow 180ms ease;
}

.story-style-pill > span {
    color: #FFBF2F;
    font-size: 10px;
}

.story-style-pill:hover,
.story-style-pill:focus-visible {
    border-color: rgba(122, 63, 242, 0.95);
    background: rgba(122, 63, 242, 0.13);
    color: #ffffff;
}

.story-style-pill:focus-visible {
    box-shadow:
        0 0 0 3px rgba(122, 63, 242, 0.24);
}

.story-style-pill.is-active {
    border-color: #7A3FF2;
    background: rgba(122, 63, 242, 0.18);
    color: #ffffff;
    box-shadow:
        inset 0 0 0 1px rgba(122, 63, 242, 0.10),
        0 7px 22px rgba(122, 63, 242, 0.15);
}

@media (max-width: 768px) {
    .story-style-strip {
        padding: 13px 0;
    }

    .story-style-strip::before,
    .story-style-strip::after {
        width: 38px;
    }

    .story-style-track {
        gap: 8px;
        padding: 0 18px;
    }

    .story-style-pill {
        min-height: 38px;
        padding: 0 14px;
        font-size: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .story-style-pill {
        transition: none;
    }
}


/* =========================================================
   TINYKIDSTALE — MAGIC LANDING PAGE REFRESH
   Scrively-inspired direction, adapted to TinyKidsTale.
   Scoped to .home-magic-theme so internal/content pages stay safe.
   ========================================================= */

.home-magic-theme {
    --magic-bg-1: #08081a;
    --magic-bg-2: #111032;
    --magic-bg-3: #22134f;
    --magic-bg-4: #37165e;
    --magic-panel: rgba(18, 19, 52, 0.72);
    --magic-panel-soft: rgba(255, 255, 255, 0.075);
    --magic-border: rgba(255, 255, 255, 0.14);
    --magic-border-purple: rgba(167, 139, 250, 0.34);
    --magic-text: #ffffff;
    --magic-muted: #c9c7e8;
    --magic-purple: #9b6cff;
    --magic-pink: #ff5ba8;
    --magic-gold: #ffd76a;

    min-height: 100%;
    background:
        radial-gradient(circle at 10% 12%, rgba(79, 70, 229, 0.30), transparent 27rem),
        radial-gradient(circle at 90% 18%, rgba(219, 39, 119, 0.18), transparent 25rem),
        radial-gradient(circle at 50% 72%, rgba(126, 34, 206, 0.22), transparent 36rem),
        linear-gradient(
            180deg,
            var(--magic-bg-1) 0%,
            var(--magic-bg-2) 24%,
            var(--magic-bg-3) 58%,
            var(--magic-bg-4) 78%,
            #0c0922 100%
        );
    background-attachment: fixed;
    color: var(--magic-text);
}

.home-magic-theme::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.68;
    background-image:
        radial-gradient(circle, rgba(255,255,255,.90) 0 1px, transparent 1.5px),
        radial-gradient(circle, rgba(255,215,106,.65) 0 1px, transparent 1.5px),
        radial-gradient(circle, rgba(196,181,253,.72) 0 1px, transparent 1.5px);
    background-size: 72px 72px, 118px 118px, 155px 155px;
    background-position: 0 0, 24px 38px, 58px 12px;
    mask-image: linear-gradient(to bottom, black 0%, black 88%, transparent 100%);
}

/* ----- global landing-page surfaces ----- */

.home-magic-theme main {
    position: relative;
    isolation: isolate;
}

.home-magic-theme main::before,
.home-magic-theme main::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 380px;
    height: 380px;
    border-radius: 999px;
    filter: blur(80px);
    opacity: .22;
    pointer-events: none;
}

.home-magic-theme main::before {
    top: 540px;
    left: -160px;
    background: #5b5df6;
}

.home-magic-theme main::after {
    top: 1380px;
    right: -160px;
    background: #ec4899;
}

.home-magic-theme .pattern-section,
.home-magic-theme #hero,
.home-magic-theme #categories,
.home-magic-theme #how-it-works,
.home-magic-theme #testimonials,
.home-magic-theme .pattern-section--promo {
    background: transparent !important;
}

.home-magic-theme .hero-dots,
.home-magic-theme .steps-background,
.home-magic-theme .testimonials-dots-bg {
    opacity: .22 !important;
}

/* ----- header ----- */

.home-magic-theme header {
    border-bottom-color: rgba(255,255,255,.08) !important;
    background: rgba(7, 7, 22, .76) !important;
    box-shadow: 0 12px 45px rgba(0,0,0,.16);
    backdrop-filter: blur(22px) saturate(135%);
}

.home-magic-theme header img[alt="TinyKidsTale"] {
    background: rgba(255,255,255,.96);
    box-shadow: 0 8px 28px rgba(0,0,0,.16);
}

.home-magic-theme .nav-link {
    color: rgba(255,255,255,.78) !important;
}

.home-magic-theme .nav-link:hover {
    color: #fff !important;
}

.home-magic-theme header [data-open-story-wizard].bg-\[\#7A3FF2\],
.home-magic-theme header button[data-open-story-wizard] {
    border: 1px solid rgba(255,255,255,.18);
    background:
        linear-gradient(135deg, #7A3FF2 0%, #9c56ff 45%, #f044a2 100%) !important;
    box-shadow:
        0 10px 32px rgba(122,63,242,.30),
        inset 0 1px 0 rgba(255,255,255,.26) !important;
}

.home-magic-theme #mobileMenu {
    border-top-color: rgba(255,255,255,.08) !important;
    background: rgba(12,10,34,.98) !important;
}

.home-magic-theme .mobile-link {
    color: #f5f3ff !important;
}

/* ----- hero ----- */

.home-magic-theme #hero {
    min-height: 680px;
}

.home-magic-theme #hero > .mx-auto {
    padding-top: 5.25rem;
    padding-bottom: 5rem;
}

.home-magic-theme #hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 73% 36%, rgba(139,92,246,.18), transparent 26rem),
        linear-gradient(180deg, rgba(255,255,255,.02), transparent 76%);
}

.home-magic-theme #heroEyebrow {
    border-color: rgba(196,181,253,.32) !important;
    background: rgba(124,58,237,.12) !important;
    color: #ddd6fe !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 12px 30px rgba(0,0,0,.12) !important;
    backdrop-filter: blur(16px);
}

.home-magic-theme #hero h1 {
    max-width: 780px;
    color: #fff !important;
    text-wrap: balance;
    text-shadow:
        0 3px 0 rgba(12,9,34,.24),
        0 14px 42px rgba(100,65,210,.22);
}

.home-magic-theme #heroDescription {
    color: #d8d6ec !important;
}

.home-magic-theme #heroPrimary {
    border: 1px solid rgba(255,255,255,.18);
    background:
        linear-gradient(135deg, #7A3FF2 0%, #a855f7 50%, #ec4899 100%) !important;
    color: #fff !important;
    box-shadow:
        0 15px 38px rgba(139,92,246,.26),
        inset 0 1px 0 rgba(255,255,255,.28) !important;
}

.home-magic-theme #heroSecondary {
    border-color: rgba(255,255,255,.15) !important;
    background: rgba(255,255,255,.075) !important;
    color: #fff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
    backdrop-filter: blur(14px);
}

.home-magic-theme #heroSecondary:hover {
    border-color: rgba(196,181,253,.45) !important;
    background: rgba(139,92,246,.16) !important;
}

.home-magic-theme .hero-art-card {
    border-color: rgba(255,255,255,.20) !important;
    background: rgba(255,255,255,.05) !important;
    box-shadow:
        0 34px 90px rgba(0,0,0,.34),
        0 0 0 1px rgba(167,139,250,.16),
        0 0 80px rgba(124,58,237,.18) !important;
}

/* ----- art-style strip ----- */

.home-magic-theme .story-style-strip {
    border-top-color: rgba(255,255,255,.08);
    border-bottom-color: rgba(255,255,255,.08);
    background: rgba(7,7,22,.56);
    backdrop-filter: blur(18px);
}

.home-magic-theme .story-style-pill {
    border-color: rgba(167,139,250,.25);
    background: rgba(255,255,255,.045);
}

.home-magic-theme .story-style-pill.is-active {
    border-color: rgba(255,91,168,.80);
    background: linear-gradient(135deg, rgba(122,63,242,.24), rgba(236,72,153,.14));
    box-shadow:
        0 8px 26px rgba(0,0,0,.16),
        inset 0 1px 0 rgba(255,255,255,.10);
}

/* ----- section headings ----- */

.home-magic-theme #categories h2,
.home-magic-theme #how-it-works h2,
.home-magic-theme #testimonials h2 {
    color: #fff !important;
    text-shadow: 0 9px 28px rgba(0,0,0,.14);
}

.home-magic-theme #categories .text-slate-600,
.home-magic-theme #how-it-works .text-slate-600,
.home-magic-theme #testimonials .text-slate-600 {
    color: var(--magic-muted) !important;
}

/* ----- categories ----- */

.home-magic-theme #categories {
    padding-top: 5.5rem;
    padding-bottom: 5.5rem;
}

.home-magic-theme .category-poster-card {
    border-color: rgba(255,255,255,.13) !important;
    background: rgba(255,255,255,.07) !important;
    box-shadow:
        0 16px 42px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.09) !important;
    backdrop-filter: blur(18px);
}

.home-magic-theme .category-poster-card:hover {
    border-color: rgba(196,181,253,.35) !important;
    background: rgba(255,255,255,.10) !important;
    box-shadow:
        0 20px 58px rgba(0,0,0,.25),
        0 0 0 1px rgba(139,92,246,.15),
        0 0 44px rgba(122,63,242,.12) !important;
}

.home-magic-theme .category-poster-image {
    filter: saturate(1.03) contrast(1.02);
}

.home-magic-theme .category-card__cta {
    background:
        linear-gradient(135deg, #7A3FF2, #ec4899) !important;
    box-shadow: 0 9px 24px rgba(122,63,242,.28) !important;
}

/* ----- 3 steps ----- */

.home-magic-theme #how-it-works {
    padding-top: 5.5rem;
    padding-bottom: 5.5rem;
}

.home-magic-theme #how-it-works .step-item {
    border-color: rgba(255,255,255,.13) !important;
    background: rgba(255,255,255,.07) !important;
    box-shadow:
        0 18px 52px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.08) !important;
    backdrop-filter: blur(18px);
}

.home-magic-theme #how-it-works .step-item h3 {
    color: #fff !important;
}

.home-magic-theme #how-it-works .step-item p {
    color: #cbc8e4 !important;
}

.home-magic-theme #how-it-works .step-item .bg-slate-100 {
    background: rgba(255,255,255,.04) !important;
}

/* ----- promo / newsletter ----- */

.home-magic-theme .pattern-section--promo {
    padding-top: 5.75rem !important;
    padding-bottom: 5.75rem !important;
}

.home-magic-theme .pattern-section--promo > .mx-auto {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
}

/* Promo cards: 2 columns on desktop, 1 column on mobile/tablet */
@media (min-width: 1024px) {
    .home-magic-theme .pattern-section--promo > .mx-auto,
    .home-magic-theme .pattern-section--promo > .promo-two-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        align-items: stretch;
    }

    .home-magic-theme .pattern-section--promo
    .homepage-promo-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }
}

.home-magic-theme .homepage-promo-card {
    min-height: 320px !important;
    border-color: rgba(255,255,255,.13) !important;
    background: rgba(255,255,255,.07) !important;
    box-shadow:
        0 24px 70px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.09) !important;
    backdrop-filter: blur(20px);
}

.home-magic-theme .homepage-promo-card .promo-card-bg {
    background:
        radial-gradient(circle at 78% 20%, rgba(168,85,247,.20), transparent 18rem),
        radial-gradient(circle at 12% 100%, rgba(236,72,153,.12), transparent 22rem),
        linear-gradient(135deg, rgba(139,92,246,.12), rgba(255,255,255,.02)) !important;
}

.home-magic-theme .homepage-promo-card[data-promo-type="newsletter"] {
    overflow: hidden;
    min-height: 360px !important;
    border-color: rgba(196,181,253,.20) !important;
    background:
        linear-gradient(135deg, rgba(30,20,66,.88), rgba(48,22,82,.78)) !important;
}

.home-magic-theme .homepage-promo-card[data-promo-type="newsletter"]::before {
    content: "✦";
    position: absolute;
    top: 34px;
    right: 70px;
    z-index: 3;
    color: var(--magic-gold);
    font-size: 34px;
    text-shadow:
        0 0 14px rgba(255,215,106,.55),
        44px 55px 0 rgba(255,255,255,.16),
        -38px 110px 0 rgba(196,181,253,.22);
}

.home-magic-theme .promo-title {
    max-width: 760px;
    color: #fff !important;
}

.home-magic-theme .promo-description {
    max-width: 640px !important;
    color: #d5d2e8 !important;
}

.home-magic-theme .promo-extra {
    color: #d8d5eb !important;
}

.home-magic-theme .homepage-promo-card form > div {
    min-height: 52px;
    border: 1px solid rgba(255,255,255,.13);
    background: rgba(255,255,255,.09) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.07),
        0 10px 30px rgba(0,0,0,.12) !important;
    backdrop-filter: blur(12px);
}

.home-magic-theme .homepage-promo-card input {
    color: #fff !important;
}

.home-magic-theme .homepage-promo-card input::placeholder {
    color: rgba(255,255,255,.48) !important;
}

.home-magic-theme .promo-button {
    min-height: 48px;
    border: 1px solid rgba(255,255,255,.15);
    background:
        linear-gradient(135deg, #7A3FF2 0%, #a855f7 48%, #ec4899 100%) !important;
    color: #fff !important;
    box-shadow:
        0 12px 30px rgba(122,63,242,.28),
        inset 0 1px 0 rgba(255,255,255,.24) !important;
}

.home-magic-theme .promo-button:hover {
    background:
        linear-gradient(135deg, #6930d9 0%, #9333ea 50%, #db2777 100%) !important;
}

.home-magic-theme .homepage-promo-card[data-promo-type="order"] {
    min-height: 300px !important;
    background:
        linear-gradient(135deg, rgba(15,16,48,.90), rgba(61,24,83,.72)) !important;
}

/* ----- testimonials ----- */

.home-magic-theme #testimonials {
    padding-top: 5.5rem;
    padding-bottom: 6rem;
}

.home-magic-theme .testimonial-card {
    border-color: rgba(255,255,255,.12) !important;
    background: rgba(255,255,255,.07) !important;
    box-shadow:
        0 18px 50px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.08) !important;
    backdrop-filter: blur(18px);
}

.home-magic-theme .testimonial-card p {
    color: #d0cee5 !important;
}

.home-magic-theme .testimonial-card .text-tinyNavy {
    color: #fff !important;
}

.home-magic-theme .testimonial-card .text-slate-400 {
    color: #a9a5c8 !important;
}

.home-magic-theme .testimonials-arrow {
    border-color: rgba(255,255,255,.12) !important;
    background: rgba(255,255,255,.08) !important;
    color: #fff !important;
    backdrop-filter: blur(14px);
}

/* ----- footer ----- */

.home-magic-theme footer {
    border-top: 1px solid rgba(255,255,255,.08);
    background: rgba(5,5,18,.64) !important;
    color: #cbc9dd;
    backdrop-filter: blur(20px);
}

.home-magic-theme footer a {
    color: #dddaf0;
}

.home-magic-theme footer a:hover {
    color: #fff;
}

/* ----- preserve wizard readability ----- */

.home-magic-theme #storyWizard,
.home-magic-theme #storyWizardPanel {
    color: #1e293b;
}

.home-magic-theme #storyWizardPanel {
    background: #fff !important;
}

.home-magic-theme #storyWizard h2,
.home-magic-theme #storyWizard h3,
.home-magic-theme #storyWizard .text-tinyNavy {
    color: #152565 !important;
}

/* ----- mobile refinements ----- */

@media (max-width: 1023px) {
    .home-magic-theme {
        background-attachment: scroll;
    }

    .home-magic-theme #hero {
        min-height: auto;
    }

    .home-magic-theme #hero > .mx-auto {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    .home-magic-theme .homepage-promo-card {
        min-height: auto !important;
    }
}

@media (max-width: 640px) {
    .home-magic-theme #hero h1 {
        font-size: clamp(2.45rem, 12vw, 3.5rem) !important;
        line-height: .98 !important;
    }

    .home-magic-theme #categories,
    .home-magic-theme #how-it-works,
    .home-magic-theme #testimonials {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    .home-magic-theme .pattern-section--promo {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }

    .home-magic-theme .homepage-promo-card[data-promo-type="newsletter"]::before {
        right: 22px;
        opacity: .55;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-magic-theme * {
        scroll-behavior: auto !important;
    }
}


.home-magic-theme header.home-magic-header-scrolled {
    background: rgba(7, 7, 22, .91) !important;
    box-shadow:
        0 12px 42px rgba(0,0,0,.24),
        0 1px 0 rgba(255,255,255,.05);
}
.story-style-strip {
    overflow: hidden;
    background: linear-gradient(180deg, #3b0f73 0%, #5b1fa6 100%);
    padding: 18px 0;
}

.story-style-scroller {
    overflow: hidden;
    width: 100%;
    position: relative;
}

.story-style-track {
    display: flex;
    align-items: center;
    gap: 14px;
    width: max-content;
    white-space: nowrap;
    animation: storyStyleMarquee 35s linear infinite;
    will-change: transform;
}

.story-style-scroller:hover .story-style-track {
    animation-play-state: paused;
}

@keyframes storyStyleMarquee {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .story-style-track {
        animation: none;
    }
}

/* =========================================================
   RESPONSIVE SAFETY — PREVENT HORIZONTAL VIEWPORT OVERFLOW
   ========================================================= */

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

body {
    position: relative;
}

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

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

.home-magic-theme main,
.home-magic-theme main > section,
.home-magic-theme section,
.home-magic-theme .mx-auto,
.home-magic-theme [class*="grid"],
.home-magic-theme [class*="flex"] {
    min-width: 0;
}

.home-magic-theme .story-style-strip,
.home-magic-theme .story-style-scroller,
.home-magic-theme .story-style-track {
    max-width: 100vw;
}

.home-magic-theme .story-style-scroller {
    overflow: hidden;
}

.home-magic-theme .promo-two-grid,
.home-magic-theme .homepage-promo-card,
.home-magic-theme .newsletter-promo-content,
.home-magic-theme .story-promo-card,
.home-magic-theme .newsletter-promo-form,
.home-magic-theme .newsletter-promo-input-wrap {
    min-width: 0;
    max-width: 100%;
}

.home-magic-theme .newsletter-promo-form {
    flex-wrap: wrap;
}

.home-magic-theme .newsletter-promo-input-wrap {
    flex: 1 1 240px;
}

.home-magic-theme .newsletter-promo-submit {
    flex: 0 0 auto;
}

/* Only the body has the fixed magical background.
   Comic preview and page sections remain transparent. */
.home-magic-theme .comic-preview-section,
.home-magic-theme #comic-preview {
    background: transparent !important;
}

.home-magic-theme .comic-preview-section::before,
.home-magic-theme #comic-preview::before,
.home-magic-theme .comic-preview-section::after,
.home-magic-theme #comic-preview::after {
    display: none !important;
    content: none !important;
}

.home-magic-theme .comic-preview-inner {
    width: min(900px, calc(100% - 32px));
    max-width: 100%;
}

.home-magic-theme .comic-preview-card {
    width: 100%;
    max-width: 900px;
    margin-inline: auto;
}

.home-magic-theme .comic-preview-card img {
    width: 100%;
    max-height: 300px;
    object-fit: cover;
    object-position: center;
}

/* =========================================================
   NEWSLETTER FEEDBACK
   ========================================================= */

.newsletter-honeypot {
    position: absolute !important;
    left: -99999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.newsletter-status {
    min-height: 20px;
    margin-top: 9px;
    color: rgba(255,255,255,.74);
    font-size: 12px;
    font-weight: 750;
}

.newsletter-status.is-success {
    color: #86efac;
}

.newsletter-status.is-error {
    color: #fda4af;
}

.newsletter-promo-submit:disabled {
    cursor: wait;
    opacity: .68;
}

/* =========================================================
   STORY CREATION WIZARD — DARK MODE
   Layout/functionality stays exactly the same.
   Only surfaces, text, borders and inputs are restyled.
   ========================================================= */

.home-magic-theme #storyWizard {
    color: #eef2ff !important;
    background: rgba(3, 5, 18, .82) !important;
}

.home-magic-theme #storyWizardPanel {
    color: #eef2ff !important;
    background:
        linear-gradient(
            180deg,
            #12172a 0%,
            #0f1424 100%
        ) !important;
    border: 1px solid rgba(167,139,250,.18);
}

.home-magic-theme #storyWizardPanel > div:first-child,
.home-magic-theme #storyWizardFooter {
    border-color: rgba(255,255,255,.08) !important;
    background: #0d1221 !important;
}

.home-magic-theme #storyWizardPanel > div:nth-child(2) {
    border-color: rgba(255,255,255,.08) !important;
    background: #11172a !important;
}

.home-magic-theme #storyWizardBody {
    background: #101626 !important;
}

.home-magic-theme #storyWizard h1,
.home-magic-theme #storyWizard h2,
.home-magic-theme #storyWizard h3,
.home-magic-theme #storyWizard h4,
.home-magic-theme #storyWizard label,
.home-magic-theme #storyWizard .text-tinyNavy {
    color: #ffffff !important;
}

.home-magic-theme #storyWizard .text-slate-400 {
    color: #8f9bb3 !important;
}

.home-magic-theme #storyWizard .text-slate-500,
.home-magic-theme #storyWizard .text-slate-600 {
    color: #aeb8cc !important;
}

.home-magic-theme #storyWizard .bg-white {
    background: #171e31 !important;
}

.home-magic-theme #storyWizard .bg-slate-50,
.home-magic-theme #storyWizard .bg-\[\#f7f6ff\],
.home-magic-theme #storyWizard .bg-\[\#fff8e8\] {
    background: #151c2e !important;
}

.home-magic-theme #storyWizard .bg-purple-50,
.home-magic-theme #storyWizard .bg-purple-100 {
    background: rgba(122,63,242,.16) !important;
}

.home-magic-theme #storyWizard .border-slate-100,
.home-magic-theme #storyWizard .border-slate-200,
.home-magic-theme #storyWizard .border-purple-200,
.home-magic-theme #storyWizard .border-purple-300 {
    border-color: rgba(167,139,250,.22) !important;
}

.home-magic-theme #storyWizard input[type="text"],
.home-magic-theme #storyWizard input[type="email"],
.home-magic-theme #storyWizard input[type="number"],
.home-magic-theme #storyWizard input[type="tel"],
.home-magic-theme #storyWizard select,
.home-magic-theme #storyWizard textarea {
    border-color: rgba(167,139,250,.24) !important;
    background: #0c1220 !important;
    color: #f8fafc !important;
    caret-color: #c4b5fd;
}

.home-magic-theme #storyWizard input::placeholder,
.home-magic-theme #storyWizard textarea::placeholder {
    color: #66728a !important;
}

.home-magic-theme #storyWizard input:focus,
.home-magic-theme #storyWizard select:focus,
.home-magic-theme #storyWizard textarea:focus {
    border-color: rgba(167,139,250,.68) !important;
    box-shadow: 0 0 0 4px rgba(122,63,242,.12) !important;
}

.home-magic-theme #storyWizard .story-category-option,
.home-magic-theme #storyWizard .story-theme-option {
    border-color: rgba(255,255,255,.08) !important;
    background: #171e31 !important;
    color: #e9edfa !important;
}

.home-magic-theme #storyWizard .story-category-option:hover,
.home-magic-theme #storyWizard .story-theme-option:hover {
    border-color: rgba(167,139,250,.32) !important;
    background: #1b2439 !important;
}

.home-magic-theme #storyWizard
.story-category-option.story-option-selected,
.home-magic-theme #storyWizard
.story-theme-option.story-option-selected {
    border-color: #8b5cf6 !important;
    background: rgba(122,63,242,.18) !important;
    box-shadow:
        0 12px 30px rgba(0,0,0,.20),
        0 0 0 1px rgba(139,92,246,.14) !important;
}

.home-magic-theme #storyWizard
.story-personalized-card {
    border-color: rgba(167,139,250,.22) !important;
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(122,63,242,.12),
            transparent 32%
        ),
        #151c2e !important;
    box-shadow: none !important;
}

.home-magic-theme #storyWizard
.story-personalized-example {
    border-color: rgba(255,255,255,.08) !important;
    background: #111827 !important;
    color: #bac4d8 !important;
}

.home-magic-theme #storyWizard
.story-personalized-textarea-shell {
    border-color: rgba(167,139,250,.24) !important;
    background: #0c1220 !important;
    box-shadow: none !important;
}

.home-magic-theme #storyWizard
.story-personalized-textarea-footer {
    border-color: rgba(255,255,255,.07) !important;
    background: #111827 !important;
    color: #8995ab !important;
}

.home-magic-theme #storyWizard
.story-progress-circle {
    border-color: rgba(167,139,250,.30) !important;
    background: #151c2e !important;
    color: #929db2 !important;
}

.home-magic-theme #storyWizard
.story-progress-item.story-progress-active
.story-progress-circle,
.home-magic-theme #storyWizard
.story-progress-item.story-progress-complete
.story-progress-circle {
    border-color: #8b5cf6 !important;
    background: #7A3FF2 !important;
    color: #fff !important;
}

.home-magic-theme #storyBackButton {
    border-color: rgba(167,139,250,.24) !important;
    background: #171e31 !important;
    color: #f8fafc !important;
}

.home-magic-theme #storyBackButton:hover {
    background: #202a42 !important;
}

.home-magic-theme #storyNextButton {
    color: #fff !important;
    background:
        linear-gradient(
            135deg,
            #7A3FF2,
            #a855f7
        ) !important;
    box-shadow: 0 10px 26px rgba(122,63,242,.24) !important;
}

/* =========================================================
   MOBILE REFINEMENTS
   ========================================================= */

@media (max-width: 767px) {
    .home-magic-theme main::before,
    .home-magic-theme main::after {
        display: none;
    }

    .home-magic-theme .comic-preview-section {
        padding: 28px 0 !important;
    }

    .home-magic-theme .comic-preview-inner {
        width: calc(100% - 24px);
    }

    .home-magic-theme .comic-preview-heading {
        margin-bottom: 16px;
    }

    .home-magic-theme .comic-preview-heading h2 {
        font-size: 28px !important;
    }

    .home-magic-theme .comic-preview-heading p {
        padding-inline: 4px;
        font-size: 13px !important;
        line-height: 1.55 !important;
    }

    .home-magic-theme .comic-preview-card {
        border-radius: 10px;
    }

    .home-magic-theme .comic-preview-card img {
        height: 180px !important;
        max-height: 180px !important;
        object-fit: cover;
    }

    .home-magic-theme .comic-preview-open {
        right: 8px;
        bottom: 8px;
        min-height: 34px;
        padding-inline: 11px;
        font-size: 10px;
    }

    .home-magic-theme .newsletter-promo-form {
        flex-direction: column;
        flex-wrap: nowrap;
    }

    .home-magic-theme .newsletter-promo-input-wrap,
    .home-magic-theme .newsletter-promo-submit {
        width: 100%;
        flex: 0 0 auto;
    }

    .home-magic-theme #storyWizard {
        width: 100vw;
        max-width: 100vw;
        overflow: hidden;
    }

    .home-magic-theme #storyWizardPanel {
        width: 100%;
        max-width: 100%;
        border-left: 0;
        border-right: 0;
    }

    .home-magic-theme #storyWizardBody {
        overflow-x: hidden;
    }

    .home-magic-theme #storyWizardBody .grid {
        min-width: 0;
    }

    .home-magic-theme #storyWizardBody input,
    .home-magic-theme #storyWizardBody textarea,
    .home-magic-theme #storyWizardBody select {
        max-width: 100%;
    }
}



/* =========================================================
   TINYKIDSTALE — LIGHT STORYBOOK BACKGROUND
   Background file:
   public/assets/img/bg/bg.jpg

   app.css lives in:
   public/assets/css/app.css

   So the correct relative CSS path is:
   ../img/bg/bg.jpg
   ========================================================= */

.home-storybook-theme {
    --storybook-navy: #152565;
    --storybook-purple: #7A3FF2;
    --storybook-pink: #F85C8E;
    --storybook-yellow: #FFBF2F;
    --storybook-blue: #2456E6;

    min-height: 100%;

    background-color: #eef8ff;
    background-image:
        linear-gradient(
            180deg,
            rgba(255,255,255,.12) 0%,
            rgba(255,255,255,.30) 38%,
            rgba(255,255,255,.42) 100%
        ),
        url('../img/bg/bg.jpg');

    background-repeat:
        no-repeat,
        no-repeat;

    background-position:
        center top,
        center top;

    background-size:
        cover,
        cover;

    background-attachment:
        fixed,
        fixed;

    color: #334155;
}

/*
 * Soft veil only behind site content.
 * Keeps the illustration visible while making text readable.
 */
.home-storybook-theme main {
    position: relative;
    isolation: isolate;
}

.home-storybook-theme main::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.18) 0%,
            rgba(248,252,255,.34) 22%,
            rgba(255,255,255,.48) 56%,
            rgba(248,252,255,.62) 100%
        );
}


/* =========================================================
   HEADER
   ========================================================= */

.home-storybook-theme header {
    border-bottom: 1px solid rgba(255,255,255,.70) !important;

    background:
        rgba(255,255,255,.94) !important;

    box-shadow:
        0 10px 35px rgba(54,82,133,.15);

    backdrop-filter:
        blur(9px)
        saturate(125%);
}



.home-storybook-theme .nav-link {
    color: var(--storybook-navy) !important;
}

.home-storybook-theme .nav-link:hover {
    color: var(--storybook-purple) !important;
}

.home-storybook-theme #mobileMenu {
    border-top-color:
        rgba(122,63,242,.10) !important;

    background:
        rgba(255,255,255,.96) !important;
}

.home-storybook-theme .mobile-link {
    color: var(--storybook-navy) !important;
}


/* =========================================================
   TRANSPARENT HOMEPAGE SECTIONS
   ========================================================= */

.home-storybook-theme #hero,
.home-storybook-theme #categories,
.home-storybook-theme #how-it-works,
.home-storybook-theme #testimonials,
.home-storybook-theme .pattern-section,
.home-storybook-theme .pattern-section--hero,
.home-storybook-theme .pattern-section--category,
.home-storybook-theme .pattern-section--steps,
.home-storybook-theme .pattern-section--promo,
.home-storybook-theme .pattern-section--testimonials,
.home-storybook-theme .comic-preview-section {
    background:
        transparent !important;
}


/* =========================================================
   HERO
   ========================================================= */

.home-storybook-theme #hero {
    position: relative;
}

.home-storybook-theme #hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background:
        radial-gradient(
            circle at 21% 30%,
            rgba(255,255,255,.72),
            transparent 34rem
        ),
        radial-gradient(
            circle at 83% 31%,
            rgba(255,255,255,.38),
            transparent 27rem
        );
}

.home-storybook-theme #heroEyebrow {
    border-color:
        rgba(122,63,242,.24) !important;

    background:
        rgba(255,255,255,.72) !important;

    color:
        var(--storybook-purple) !important;

    box-shadow:
        0 10px 28px rgba(41,55,130,.08);

    backdrop-filter:
        blur(12px);
}

.home-storybook-theme #hero h1 {
    color:
        var(--storybook-navy) !important;

    text-shadow:
        0 2px 0 rgba(255,255,255,.70),
        0 12px 34px rgba(41,55,130,.12);
}

.home-storybook-theme #heroDescription {
    color:
        #56637c !important;

    text-shadow:
        0 1px 0 rgba(255,255,255,.90);
}

.home-storybook-theme #heroPrimary {
    border:
        1px solid rgba(255,255,255,.48);

    background:
        linear-gradient(
            135deg,
            #7A3FF2,
            #9c56ff
        ) !important;

    color:
        #fff !important;

    box-shadow:
        0 14px 30px rgba(122,63,242,.22) !important;
}

.home-storybook-theme #heroSecondary {
    border-color:
        rgba(122,63,242,.17) !important;

    background:
        rgba(255,255,255,.80) !important;

    color:
        var(--storybook-navy) !important;

    box-shadow:
        0 10px 28px rgba(41,55,130,.08);

    backdrop-filter:
        blur(12px);
}

.home-storybook-theme #heroSecondary:hover {
    border-color:
        rgba(122,63,242,.38) !important;

    background:
        rgba(255,255,255,.96) !important;

    color:
        var(--storybook-purple) !important;
}


/* =========================================================
   STORY STYLE SLIDER — LIGHT GLASS VERSION
   ========================================================= */

.home-storybook-theme .story-style-strip {
    border-top:
        1px solid rgba(122,63,242,.10);

    border-bottom:
        1px solid rgba(122,63,242,.10);

    background:
        rgba(255,255,255,.66) !important;

    box-shadow:
        0 8px 28px rgba(41,55,130,.07);

    backdrop-filter:
        blur(18px)
        saturate(120%);
}

.home-storybook-theme .story-style-strip::before {
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.96),
            rgba(255,255,255,0)
        ) !important;
}

.home-storybook-theme .story-style-strip::after {
    background:
        linear-gradient(
            270deg,
            rgba(255,255,255,.96),
            rgba(255,255,255,0)
        ) !important;
}

.home-storybook-theme .story-style-pill {
    border-color:
        rgba(122,63,242,.16) !important;

    background:
        rgba(255,255,255,.76) !important;

    color:
        #59627a !important;

    box-shadow:
        0 5px 15px rgba(41,55,130,.05);
}

.home-storybook-theme .story-style-pill:hover,
.home-storybook-theme .story-style-pill:focus-visible {
    border-color:
        rgba(122,63,242,.40) !important;

    background:
        #fff !important;

    color:
        var(--storybook-purple) !important;
}

.home-storybook-theme .story-style-pill.is-active {
    border-color:
        rgba(122,63,242,.54) !important;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.98),
            rgba(247,242,255,.98)
        ) !important;

    color:
        var(--storybook-purple) !important;

    box-shadow:
        0 8px 22px rgba(122,63,242,.12) !important;
}


/* =========================================================
   SECTION HEADINGS
   ========================================================= */

.home-storybook-theme #categories h2,
.home-storybook-theme #how-it-works h2,
.home-storybook-theme #testimonials h2,
.home-storybook-theme .comic-preview-heading h2 {
    color:
        var(--storybook-navy) !important;

    text-shadow:
        0 2px 0 rgba(255,255,255,.90),
        0 8px 24px rgba(41,55,130,.08) !important;
}

.home-storybook-theme #categories p,
.home-storybook-theme #how-it-works > div > div > p,
.home-storybook-theme #testimonials > div > div > p,
.home-storybook-theme .comic-preview-heading p {
    color:
        #59677e !important;

    text-shadow:
        0 1px 0 rgba(255,255,255,.90);
}


/* =========================================================
   CATEGORY CARDS
   ========================================================= */

.home-storybook-theme .category-card {
    border-color:
        rgba(255,255,255,.76) !important;

    background:
        rgba(255,255,255,.80) !important;

    box-shadow:
        0 15px 38px rgba(49,78,122,.10),
        inset 0 1px 0 rgba(255,255,255,.96) !important;

    backdrop-filter:
        blur(12px);
}

.home-storybook-theme .category-card:hover {
    border-color:
        rgba(122,63,242,.20) !important;

    background:
        rgba(255,255,255,.94) !important;

    box-shadow:
        0 20px 48px rgba(49,78,122,.15),
        inset 0 1px 0 #fff !important;
}


/* =========================================================
   HOW IT WORKS
   ========================================================= */

.home-storybook-theme #how-it-works h2.text-white {
    color:
        var(--storybook-navy) !important;
}

.home-storybook-theme #how-it-works p.text-white\/75 {
    color:
        #59677e !important;
}

.home-storybook-theme #how-it-works .step-item {
    border-color:
        rgba(255,255,255,.86) !important;

    background:
        rgba(255,255,255,.86) !important;

    box-shadow:
        0 18px 42px rgba(49,78,122,.11),
        inset 0 1px 0 rgba(255,255,255,1) !important;

    backdrop-filter:
        blur(14px);
}

.home-storybook-theme #how-it-works .step-item h3 {
    color:
        var(--storybook-navy) !important;
}

.home-storybook-theme #how-it-works .step-item p {
    color:
        #667085 !important;
}


/* =========================================================
   COMIC / LOOK INSIDE PREVIEW
   ========================================================= */

.home-storybook-theme .comic-preview-card {
    border-color:
        rgba(255,255,255,.82) !important;

    background:
        rgba(255,255,255,.80) !important;

    box-shadow:
        0 18px 46px rgba(49,78,122,.12) !important;

    backdrop-filter:
        blur(14px);
}


/* =========================================================
   PROMO / NEWSLETTER
   ========================================================= */

.home-storybook-theme .pattern-section--promo {
    position:
        relative;
}

.home-storybook-theme .homepage-promo-card {
    border-color:
        rgba(255,255,255,.86) !important;

    box-shadow:
        0 18px 48px rgba(49,78,122,.12) !important;

    backdrop-filter:
        blur(14px);
}

.home-storybook-theme .newsletter-promo-card {
    background:
        rgba(255,255,255,.86) !important;
}

.home-storybook-theme .newsletter-promo-overlay {
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.98) 0%,
            rgba(255,255,255,.90) 50%,
            rgba(255,255,255,.48) 100%
        ) !important;
}

.home-storybook-theme .newsletter-promo-input-wrap {
    border-color:
        rgba(122,63,242,.14) !important;

    background:
        rgba(255,255,255,.92) !important;

    box-shadow:
        0 8px 24px rgba(41,55,130,.07) !important;
}

.home-storybook-theme .newsletter-promo-input {
    color:
        var(--storybook-navy) !important;
}

.home-storybook-theme .newsletter-promo-input::placeholder {
    color:
        #9aa4b5 !important;
}

.home-storybook-theme .story-promo-card {
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.92),
            rgba(249,245,255,.88)
        ) !important;
}

.home-storybook-theme .story-promo-title {
    color:
        var(--storybook-navy) !important;
}

.home-storybook-theme .story-promo-description,
.home-storybook-theme .story-promo-extra {
    color:
        #59677e !important;
}


/* =========================================================
   TESTIMONIALS
   ========================================================= */

.home-storybook-theme .testimonial-card {
    border-color:
        rgba(255,255,255,.86) !important;

    background:
        rgba(255,255,255,.88) !important;

    box-shadow:
        0 16px 40px rgba(49,78,122,.10),
        inset 0 1px 0 #fff !important;

    backdrop-filter:
        blur(14px);
}

.home-storybook-theme .testimonials-arrow {
    border-color:
        rgba(122,63,242,.14) !important;

    background:
        rgba(255,255,255,.92) !important;

    color:
        var(--storybook-purple) !important;
}


/* =========================================================
   WIZARD — KEEP IT CLEAN AND LIGHT
   ========================================================= */

.home-storybook-theme #storyWizardPanel {
    background:
        linear-gradient(
            180deg,
            #ffffff,
            #fbfcff
        ) !important;

    color:
        #334155 !important;
}

.home-storybook-theme #storyWizardPanel .text-tinyNavy {
    color:
        var(--storybook-navy) !important;
}

.home-storybook-theme #storyWizardPanel .text-slate-500,
.home-storybook-theme #storyWizardPanel .text-slate-600 {
    color:
        #64748b !important;
}

.home-storybook-theme #storyWizardPanel input[type="text"],
.home-storybook-theme #storyWizardPanel input[type="email"],
.home-storybook-theme #storyWizardPanel input[type="number"],
.home-storybook-theme #storyWizardPanel input[type="tel"],
.home-storybook-theme #storyWizardPanel select,
.home-storybook-theme #storyWizardPanel textarea {
    background:
        #fff !important;

    color:
        var(--storybook-navy) !important;
}

.home-storybook-theme #storyWizardPanel .story-category-option,
.home-storybook-theme #storyWizardPanel .story-theme-option {
    background:
        #f8fafc !important;

    color:
        #334155 !important;
}


/* =========================================================
   FOOTER — LIGHT VERSION
   ========================================================= */

.home-storybook-theme .site-footer {
    border-top:
        1px solid rgba(255,255,255,.80) !important;

    background:
        rgba(255,255,255,.84) !important;

    color:
        #526078 !important;

    box-shadow:
        0 -14px 40px rgba(49,78,122,.08);

    backdrop-filter:
        blur(18px);
}

.home-storybook-theme .site-footer::before {
    opacity:
        .10 !important;

    background-image:
        radial-gradient(
            circle,
            rgba(122,63,242,.28) 1px,
            transparent 1.5px
        ) !important;
}

.home-storybook-theme .site-footer__logo,
.home-storybook-theme .site-footer__nav-title,
.home-storybook-theme .site-footer__support h3 {
    color:
        var(--storybook-navy) !important;
}

.home-storybook-theme .site-footer__tagline,
.home-storybook-theme .site-footer__nav a,
.home-storybook-theme .site-footer__support p,
.home-storybook-theme .site-footer__email {
    color:
        #66758c !important;
}

.home-storybook-theme .site-footer__nav a:hover,
.home-storybook-theme .site-footer__email:hover {
    color:
        var(--storybook-purple) !important;
}

.home-storybook-theme .site-footer__social {
    border-color:
        rgba(122,63,242,.13) !important;

    background:
        rgba(255,255,255,.72) !important;

    color:
        var(--storybook-purple) !important;
}

.home-storybook-theme .site-footer__bottom {
    border-top-color:
        rgba(21,37,101,.09) !important;

    color:
        #8190a5 !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 900px) {
    .home-storybook-theme {
        background-attachment:
            scroll,
            scroll;

        background-size:
            auto 1000px,
            auto 1000px;

        background-repeat:
            repeat-y,
            repeat-y;

        background-position:
            center top,
            center top;
    }
}

@media (max-width: 640px) {
    .home-storybook-theme main::before {
        background:
            rgba(255,255,255,.34);
    }

    .home-storybook-theme #hero::before {
        background:
            radial-gradient(
                circle at 50% 22%,
                rgba(255,255,255,.78),
                transparent 26rem
            );
    }
}



/* =========================================================
   LIGHT STORYBOOK — LAYOUT FIXES
   Final override layer after the light-background conversion.
   ========================================================= */

/* The background should remain decorative, not wash out content. */
.home-storybook-theme main::before {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.10) 0%,
            rgba(255,255,255,.18) 28%,
            rgba(255,255,255,.25) 62%,
            rgba(255,255,255,.34) 100%
        ) !important;
}

/* ----- How It Works ----- */

.home-storybook-theme #how-it-works .step-item {
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.88) !important;
    background: rgba(255,255,255,.90) !important;
    box-shadow:
        0 18px 46px rgba(49,78,122,.12),
        inset 0 1px 0 rgba(255,255,255,1) !important;
    backdrop-filter: blur(14px);
}

.home-storybook-theme #how-it-works .step-item > div:last-of-type {
    background: rgba(255,255,255,.92) !important;
    color: #152565 !important;
}

.home-storybook-theme #how-it-works .step-item h3 {
    color: #152565 !important;
}

.home-storybook-theme #how-it-works .step-item p {
    color: #64748b !important;
}

.home-storybook-theme #how-it-works .step-item img {
    display: block;
}

/* ----- Style scroller ----- */

.home-storybook-theme .story-style-strip {
    padding: 13px 0 !important;
    border-top: 1px solid rgba(122,63,242,.09) !important;
    border-bottom: 1px solid rgba(122,63,242,.09) !important;
    background: rgba(255,255,255,.58) !important;
    box-shadow:
        0 8px 28px rgba(49,78,122,.07) !important;
    backdrop-filter: blur(18px) saturate(125%);
}

.home-storybook-theme .story-style-track {
    gap: 10px;
}

.home-storybook-theme .story-style-pill {
    min-height: 39px;
    border-color: rgba(122,63,242,.14) !important;
    background: rgba(255,255,255,.76) !important;
    color: #566179 !important;
}

.home-storybook-theme .story-style-pill.is-active {
    border-color: rgba(122,63,242,.46) !important;
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.98),
            rgba(246,240,255,.98)
        ) !important;
    color: #7A3FF2 !important;
}

/* ----- Promo / newsletter ----- */

.home-storybook-theme .homepage-promo-card {
    min-height: 420px;
    border: 1px solid rgba(255,255,255,.90) !important;
    box-shadow:
        0 20px 52px rgba(49,78,122,.13),
        inset 0 1px 0 rgba(255,255,255,1) !important;
}

.home-storybook-theme .newsletter-promo-card {
    background: rgba(255,255,255,.90) !important;
}

.home-storybook-theme .newsletter-promo-bg {
    opacity: 1 !important;
    filter: saturate(1.03) contrast(1.01);
}

.home-storybook-theme .newsletter-promo-overlay {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.00) 0%,
            rgba(255,255,255,.02) 42%,
            rgba(255,255,255,.16) 68%,
            rgba(255,255,255,.78) 100%
        ) !important;
}

.home-storybook-theme .newsletter-promo-content {
    min-height: 420px;
}

.home-storybook-theme .newsletter-promo-input-wrap {
    border: 1px solid rgba(122,63,242,.14) !important;
    background: rgba(255,255,255,.96) !important;
    box-shadow:
        0 10px 28px rgba(49,78,122,.10) !important;
}

.home-storybook-theme .newsletter-promo-extra {
    color: #4f5f78 !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.90);
}

.home-storybook-theme .story-promo-card {
    border: 1px solid rgba(255,255,255,.92) !important;
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(248,92,142,.12),
            transparent 30%
        ),
        radial-gradient(
            circle at 12% 90%,
            rgba(122,63,242,.11),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            rgba(255,255,255,.96),
            rgba(248,244,255,.93)
        ) !important;
}

.home-storybook-theme .story-promo-title {
    color: #152565 !important;
}

.home-storybook-theme .story-promo-description,
.home-storybook-theme .story-promo-extra {
    color: #5f6f86 !important;
}

/* ----- Keep section content readable without turning the whole page white ----- */

.home-storybook-theme #categories,
.home-storybook-theme #how-it-works,
.home-storybook-theme #comic-preview,
.home-storybook-theme .pattern-section--promo,
.home-storybook-theme #testimonials {
    position: relative;
}

.home-storybook-theme #categories::before,
.home-storybook-theme #how-it-works::before,
.home-storybook-theme #comic-preview::before,
.home-storybook-theme .pattern-section--promo::before,
.home-storybook-theme #testimonials::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.06),
            rgba(255,255,255,.14)
        );
}

/* ----- Mobile ----- */

@media (max-width: 767px) {
    .home-storybook-theme #how-it-works .step-item > div:last-of-type {
        min-height: auto !important;
    }

    .home-storybook-theme .homepage-promo-card,
    .home-storybook-theme .newsletter-promo-content,
    .home-storybook-theme .story-promo-card {
        min-height: 360px !important;
    }
}



/* =========================================================
   SEPTEMBER LIGHT STORYBOOK POLISH
   Scroll + style marquee + preview + footer
   ========================================================= */

/* ---------------------------------------------------------
   1. PAGE SCROLL
   Native touch scrolling on phones/tablets.
   Desktop scrollbar stays subtle and clean.
   --------------------------------------------------------- */

html,
body {
    min-height: 100%;
    overflow-x: hidden;
}

html {
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: #a98cf2 rgba(245, 240, 255, .72);
}

body {
    overscroll-behavior-y: auto;
}

::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

::-webkit-scrollbar-track {
    background: rgba(245, 240, 255, .72);
}

::-webkit-scrollbar-thumb {
    border: 2px solid rgba(245, 240, 255, .72);
    border-radius: 999px;
    background:
        linear-gradient(
            180deg,
            #c8b7f8 0%,
            #9f82ee 100%
        );
}

::-webkit-scrollbar-thumb:hover {
    background:
        linear-gradient(
            180deg,
            #b49cf4 0%,
            #8765e7 100%
        );
}

@media (hover: none), (pointer: coarse), (max-width: 820px) {
    html,
    body {
        height: auto !important;
        min-height: 100% !important;
        overflow-y: auto !important;
        overscroll-behavior-y: auto !important;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y pinch-zoom;
    }

    body:not(.story-wizard-open) {
        position: static !important;
    }
}


/* ---------------------------------------------------------
   2. STORY STYLE TRACK
   One light-purple glass strip, no CSS marquee fighting JS.
   --------------------------------------------------------- */

.home-storybook-theme .story-style-strip {
    overflow: hidden;

    padding: 14px 0 !important;

    border-top:
        1px solid rgba(122, 63, 242, .20) !important;

    border-bottom:
        1px solid rgba(122, 63, 242, .22) !important;

    background:
        linear-gradient(
            90deg,
            rgba(230, 218, 255, .96) 0%,
            rgba(205, 185, 255, .97) 50%,
            rgba(230, 218, 255, .96) 100%
        ) !important;

    box-shadow:
        0 10px 30px rgba(122, 63, 242, .12) !important;

    backdrop-filter:
        blur(18px)
        saturate(120%);
}

.home-storybook-theme .story-style-strip::before {
    background:
        linear-gradient(
            90deg,
            #f2ebff 0%,
            rgba(242,235,255,.50) 38%,
            rgba(242,235,255,0) 100%
        ) !important;
}

.home-storybook-theme .story-style-strip::after {
    background:
        linear-gradient(
            270deg,
            #f2ebff 0%,
            rgba(242,235,255,.50) 38%,
            rgba(242,235,255,0) 100%
        ) !important;
}

.story-style-scroller,
.home-storybook-theme .story-style-scroller {
    overflow-x: auto !important;
    overflow-y: hidden !important;

    scrollbar-width: none;

    -ms-overflow-style: none;

    touch-action:
        pan-x
        pan-y
        pinch-zoom;
}

.story-style-scroller::-webkit-scrollbar {
    display: none;
}

.story-style-track,
.home-storybook-theme .story-style-track {
    animation: none !important;
    transform: none !important;
    gap: 10px !important;
}

.home-storybook-theme .story-style-pill {
    border:
        1px solid rgba(122, 63, 242, .17) !important;

    background:
        rgba(255,255,255,.78) !important;

    color:
        #5a6175 !important;

    box-shadow:
        0 5px 15px rgba(64, 47, 112, .05);
}

.home-storybook-theme .story-style-pill.is-active {
    border-color:
        rgba(122, 63, 242, .52) !important;

    background:
        rgba(255,255,255,.98) !important;

    color:
        #6d3fe0 !important;

    box-shadow:
        0 7px 20px rgba(122,63,242,.12) !important;
}


/* ---------------------------------------------------------
   3. FREE STORY PREVIEW
   Dark-purple badge + show the whole banner artwork.
   --------------------------------------------------------- */

.home-storybook-theme .comic-preview-section {
    overflow: visible;
}

.home-storybook-theme .comic-preview-badge {
    border:
        1px solid rgba(91, 33, 182, .20) !important;

    background:
        rgba(245, 240, 255, .88) !important;

    color:
        #5b21b6 !important;

    box-shadow:
        0 7px 18px rgba(91,33,182,.07);

    text-shadow:
        none !important;
}

.home-storybook-theme .comic-preview-card {
    overflow: hidden;

    border:
        1px solid rgba(255,255,255,.90) !important;

    background:
        rgba(255,255,255,.76) !important;

    box-shadow:
        0 18px 48px rgba(49,78,122,.14) !important;
}

.home-storybook-theme .comic-preview-card .comic-preview-image,
.home-storybook-theme .comic-preview-card > img {
    display: block;

    width: 100% !important;
    height: auto !important;
    max-height: none !important;

    aspect-ratio: auto !important;

    object-fit: contain !important;
    object-position: center top !important;

    transform: none !important;

    background:
        rgba(255,255,255,.72);
}

.home-storybook-theme .comic-preview-card:hover .comic-preview-image,
.home-storybook-theme .comic-preview-card:hover > img {
    transform: none !important;

    filter:
        saturate(1.03)
        brightness(1.01);
}

.home-storybook-theme .comic-preview-open {
    right: 16px;
    bottom: 16px;

    border:
        1px solid rgba(255,255,255,.30) !important;

    background:
        linear-gradient(
            90deg,
            #7A3FF2,
            #ec4899
        ) !important;

    box-shadow:
        0 10px 26px rgba(122,63,242,.24) !important;
}

@media (max-width: 640px) {
    .home-storybook-theme .comic-preview-inner {
        width:
            min(
                100% - 24px,
                900px
            ) !important;
    }

    .home-storybook-theme .comic-preview-open {
        right: 9px;
        bottom: 9px;
    }
}


/* ---------------------------------------------------------
   4. LIGHT STORYBOOK FOOTER
   --------------------------------------------------------- */

.home-storybook-theme .site-footer--storybook {
    position: relative;

    overflow: hidden;

    margin-top: 0;

    border-top:
        1px solid rgba(122,63,242,.10) !important;

    background:
        linear-gradient(
            180deg,
            rgba(249, 246, 255, .92) 0%,
            rgba(238, 248, 255, .96) 100%
        ) !important;

    color:
        #526078 !important;

    box-shadow:
        0 -18px 50px rgba(54,82,133,.08);

    backdrop-filter:
        blur(18px);

    isolation: isolate;
}

.home-storybook-theme .site-footer--storybook::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: -2;

    opacity: .42;

    background-image:
        radial-gradient(
            circle,
            rgba(122,63,242,.14) 1px,
            transparent 1.5px
        );

    background-size:
        34px 34px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent 88%
        );
}

.site-footer-storybook__sky {
    position: absolute;
    inset: 0;

    z-index: -1;

    overflow: hidden;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 13% 90%,
            rgba(80,140,252,.10),
            transparent 24rem
        ),
        radial-gradient(
            circle at 87% 15%,
            rgba(248,92,142,.11),
            transparent 22rem
        ),
        radial-gradient(
            circle at 50% 0%,
            rgba(122,63,242,.10),
            transparent 28rem
        );
}

.site-footer-storybook__spark {
    position: absolute;

    color:
        rgba(122,63,242,.26);

    font-size:
        24px;
}

.site-footer-storybook__spark--one {
    left: 7%;
    top: 24%;
}

.site-footer-storybook__spark--two {
    right: 12%;
    top: 14%;

    color:
        rgba(255,191,47,.46);
}

.site-footer-storybook__spark--three {
    right: 34%;
    bottom: 22%;
}

.site-footer-storybook__inner {
    position: relative;

    z-index: 1;

    display: grid;

    grid-template-columns:
        minmax(0, 1.45fr)
        minmax(130px, .65fr)
        minmax(150px, .75fr)
        minmax(260px, 1fr);

    gap:
        46px;

    width:
        min(
            1180px,
            calc(100% - 40px)
        );

    margin:
        0 auto;

    padding:
        58px 0 42px;
}

.site-footer-storybook__logo {
    display: inline-flex;

    overflow: hidden;

    width:
        190px;

    border:
        1px solid rgba(122,63,242,.09);

    border-radius:
        16px;

    background:
        rgba(255,255,255,.90);

    box-shadow:
        0 12px 30px rgba(49,78,122,.09);
}

.site-footer-storybook__logo img {
    display: block;

    width: 100%;
    height: auto;
}

.site-footer-storybook__tagline {
    max-width:
        350px;

    margin-top:
        17px;

    color:
        #64748b;

    font-size:
        13px;

    font-weight:
        650;

    line-height:
        1.75;
}

.site-footer-storybook__trust {
    display: flex;

    flex-wrap: wrap;

    gap:
        7px;

    margin-top:
        17px;
}

.site-footer-storybook__trust span {
    display: inline-flex;

    min-height:
        30px;

    align-items: center;

    padding:
        0 10px;

    border:
        1px solid rgba(122,63,242,.10);

    border-radius:
        999px;

    background:
        rgba(255,255,255,.66);

    color:
        #657087;

    font-size:
        10px;

    font-weight:
        850;
}

.home-storybook-theme .site-footer--storybook .site-footer__socials {
    margin-top:
        20px;
}

.home-storybook-theme .site-footer--storybook .site-footer__social {
    border:
        1px solid rgba(122,63,242,.13) !important;

    background:
        rgba(255,255,255,.74) !important;

    color:
        #7A3FF2 !important;

    box-shadow:
        0 5px 15px rgba(49,78,122,.05);
}

.home-storybook-theme .site-footer--storybook .site-footer__social:hover {
    border-color:
        rgba(122,63,242,.28) !important;

    background:
        #fff !important;

    color:
        #5f32d3 !important;
}

.site-footer-storybook__links {
    display: flex;

    flex-direction: column;

    gap:
        10px;

    padding-top:
        4px;
}

.site-footer-storybook__heading {
    margin-bottom:
        6px;

    color:
        #152565;

    font-size:
        11px;

    font-weight:
        950;

    letter-spacing:
        .13em;

    text-transform:
        uppercase;
}

.site-footer-storybook__links a {
    width:
        fit-content;

    color:
        #64748b;

    font-size:
        12px;

    font-weight:
        750;

    text-decoration:
        none;

    transition:
        color .18s ease;
}

.site-footer-storybook__links a:hover {
    color:
        #7A3FF2;
}

.site-footer-storybook__support {
    align-self: start;

    padding:
        22px;

    border:
        1px solid rgba(122,63,242,.11);

    border-radius:
        18px;

    background:
        rgba(255,255,255,.70);

    box-shadow:
        0 14px 36px rgba(49,78,122,.08);

    backdrop-filter:
        blur(12px);
}

.site-footer-storybook__support-badge {
    display: inline-flex;

    padding:
        6px 9px;

    border:
        1px solid rgba(122,63,242,.11);

    border-radius:
        999px;

    background:
        #f2ebff;

    color:
        #6d3fe0;

    font-size:
        9px;

    font-weight:
        950;

    letter-spacing:
        .10em;

    text-transform:
        uppercase;
}

.site-footer-storybook__support h3 {
    margin:
        11px 0 0;

    color:
        #152565;

    font-size:
        18px;

    font-weight:
        950;
}

.site-footer-storybook__support p {
    margin-top:
        8px;

    color:
        #6b778c;

    font-size:
        12px;

    font-weight:
        600;

    line-height:
        1.65;
}

.site-footer-storybook__email {
    display: inline-flex;

    align-items: center;

    gap:
        8px;

    margin-top:
        13px;

    color:
        #6d3fe0;

    font-size:
        12px;

    font-weight:
        850;

    text-decoration:
        none;
}

.site-footer-storybook__email svg {
    width:
        15px;

    height:
        15px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linejoin:
        round;
}

.site-footer-storybook__cta {
    display: inline-flex;

    min-height:
        42px;

    align-items: center;

    justify-content: center;

    gap:
        8px;

    margin-top:
        17px;

    padding:
        0 15px;

    border:
        0;

    border-radius:
        10px;

    background:
        linear-gradient(
            90deg,
            #7A3FF2,
            #9b4fe7
        );

    color:
        #fff;

    font-size:
        11px;

    font-weight:
        900;

    cursor:
        pointer;

    box-shadow:
        0 10px 24px rgba(122,63,242,.20);
}

.site-footer-storybook__bottom {
    position: relative;

    z-index: 1;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap:
        18px;

    width:
        min(
            1180px,
            calc(100% - 40px)
        );

    margin:
        0 auto;

    padding:
        16px 0 21px;

    border-top:
        1px solid rgba(21,37,101,.08);

    color:
        #8290a5;

    font-size:
        10px;

    font-weight:
        700;
}

@media (max-width: 920px) {
    .site-footer-storybook__inner {
        grid-template-columns:
            1fr
            1fr;

        gap:
            34px;
    }

    .site-footer-storybook__brand {
        grid-column:
            1 / -1;
    }
}

@media (max-width: 640px) {
    .site-footer-storybook__inner {
        grid-template-columns:
            1fr;

        width:
            min(
                100% - 28px,
                1180px
            );

        gap:
            28px;

        padding:
            42px 0 30px;
    }

    .site-footer-storybook__brand {
        grid-column:
            auto;
    }

    .site-footer-storybook__logo {
        width:
            170px;
    }

    .site-footer-storybook__support {
        padding:
            19px;
    }

    .site-footer-storybook__bottom {
        width:
            min(
                100% - 28px,
                1180px
            );

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            6px;

        padding:
            15px 0 20px;
    }
}



/* =========================================================
   FAQ — LIGHT STORYBOOK ACCORDION
   ========================================================= */

.faq-section {
    position: relative;
    overflow: hidden;
    padding: 68px 0 78px;
}

.faq-section::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(
            circle at 8% 18%,
            rgba(248, 92, 142, .10),
            transparent 24rem
        ),
        radial-gradient(
            circle at 92% 78%,
            rgba(122, 63, 242, .11),
            transparent 26rem
        ),
        linear-gradient(
            180deg,
            rgba(255,255,255,.10),
            rgba(255,255,255,.24)
        );
}

.faq-shell {
    position: relative;
    z-index: 1;
    width: min(900px, calc(100% - 32px));
    margin: 0 auto;
}

.faq-heading {
    max-width: 720px;
    margin: 0 auto 34px;
    text-align: center;
}

.faq-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0 12px;
    border: 1px solid rgba(122, 63, 242, .16);
    border-radius: 999px;
    background: rgba(245, 240, 255, .82);
    color: #6d3fe0;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .12em;
    text-transform: uppercase;
    box-shadow:
        0 7px 18px rgba(91, 33, 182, .06);
}

.faq-heading h2 {
    margin: 16px 0 0;
    color: #152565;
    font-size: clamp(30px, 4vw, 44px);
    font-weight: 950;
    line-height: 1.02;
    letter-spacing: -.045em;
    text-shadow:
        0 2px 0 rgba(255,255,255,.86),
        0 10px 28px rgba(41,55,130,.08);
}

.faq-heading p {
    max-width: 620px;
    margin: 13px auto 0;
    color: #64748b;
    font-size: 15px;
    line-height: 1.7;
}

.faq-list {
    display: grid;
    gap: 12px;
}

.faq-item {
    overflow: hidden;
    border: 1px solid rgba(122, 63, 242, .11);
    border-radius: 16px;
    background: rgba(255,255,255,.78);
    box-shadow:
        0 12px 34px rgba(49,78,122,.08),
        inset 0 1px 0 rgba(255,255,255,.96);
    backdrop-filter:
        blur(14px)
        saturate(115%);
    transition:
        border-color 260ms ease,
        background-color 260ms ease,
        box-shadow 300ms ease;
}

.faq-item:hover {
    border-color: rgba(122, 63, 242, .22);
    background: rgba(255,255,255,.88);
    box-shadow:
        0 16px 40px rgba(49,78,122,.11),
        inset 0 1px 0 #fff;
}

.faq-item.is-open {
    border-color: rgba(122, 63, 242, .28);
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.94),
            rgba(248,244,255,.92)
        );
    box-shadow:
        0 18px 46px rgba(76,54,140,.12),
        inset 0 1px 0 #fff;
}

.faq-question {
    display: flex;
    width: 100%;
    min-height: 72px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 18px;
    border: 0;
    background: transparent;
    color: #152565;
    text-align: left;
    cursor: pointer;
}

.faq-question-main {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 14px;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.35;
}

.faq-number {
    display: grid;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    place-items: center;
    border: 1px solid rgba(122,63,242,.13);
    border-radius: 11px;
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f1eaff
        );
    color: #7A3FF2;
    font-size: 10px;
    font-weight: 950;
    box-shadow:
        0 7px 18px rgba(122,63,242,.08);
}

/* =========================================================
   FAQ — LIGHT STORYBOOK ACCORDION
   ========================================================= */

.faq-section {
    position: relative;
    overflow: hidden;
    padding: 68px 0 78px;
}

.faq-section::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(
            circle at 8% 18%,
            rgba(248, 92, 142, .10),
            transparent 24rem
        ),
        radial-gradient(
            circle at 92% 78%,
            rgba(122, 63, 242, .11),
            transparent 26rem
        ),
        linear-gradient(
            180deg,
            rgba(255,255,255,.10),
            rgba(255,255,255,.24)
        );
}

.faq-shell {
    position: relative;
    z-index: 1;
    width: min(900px, calc(100% - 32px));
    margin: 0 auto;
}

.faq-heading {
    max-width: 720px;
    margin: 0 auto 34px;
    text-align: center;
}

.faq-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0 12px;
    border: 1px solid rgba(122, 63, 242, .16);
    border-radius: 999px;
    background: rgba(245, 240, 255, .82);
    color: #6d3fe0;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .12em;
    text-transform: uppercase;
    box-shadow:
        0 7px 18px rgba(91, 33, 182, .06);
}

.faq-heading h2 {
    margin: 16px 0 0;
    color: #152565;
    font-size: clamp(30px, 4vw, 44px);
    font-weight: 950;
    line-height: 1.02;
    letter-spacing: -.045em;
    text-shadow:
        0 2px 0 rgba(255,255,255,.86),
        0 10px 28px rgba(41,55,130,.08);
}

.faq-heading p {
    max-width: 620px;
    margin: 13px auto 0;
    color: #64748b;
    font-size: 15px;
    line-height: 1.7;
}

.faq-list {
    display: grid;
    gap: 12px;
}

.faq-item {
    overflow: hidden;
    border: 1px solid rgba(122, 63, 242, .11);
    border-radius: 16px;
    background: rgba(255,255,255,.78);
    box-shadow:
        0 12px 34px rgba(49,78,122,.08),
        inset 0 1px 0 rgba(255,255,255,.96);
    backdrop-filter:
        blur(14px)
        saturate(115%);
    transition:
        border-color 260ms ease,
        background-color 260ms ease,
        box-shadow 300ms ease;
}

.faq-item:hover {
    border-color: rgba(122, 63, 242, .22);
    background: rgba(255,255,255,.88);
    box-shadow:
        0 16px 40px rgba(49,78,122,.11),
        inset 0 1px 0 #fff;
}

.faq-item.is-open {
    border-color: rgba(122, 63, 242, .28);
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.94),
            rgba(248,244,255,.92)
        );
    box-shadow:
        0 18px 46px rgba(76,54,140,.12),
        inset 0 1px 0 #fff;
}

/* =========================================================
   QUESTION
   ========================================================= */

.faq-question {
    display: flex;
    width: 100%;
    min-height: 72px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 18px;
    border: 0;
    background: transparent;
    color: #152565;
    text-align: left;
    cursor: pointer;
}

.faq-question-main {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 14px;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.35;
}

/* =========================================================
   NUMBER
   ========================================================= */

.faq-number {
    display: grid;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    place-items: center;
    border: 1px solid rgba(122,63,242,.13);
    border-radius: 11px;
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f1eaff
        );
    color: #7A3FF2;
    font-size: 10px;
    font-weight: 950;
    box-shadow:
        0 7px 18px rgba(122,63,242,.08);
}

/* =========================================================
   PLUS / MINUS TOGGLE
   ========================================================= */

.faq-toggle {
    position: relative;

    display: grid;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;

    place-items: center;

    border:
        1px solid rgba(122,63,242,.14);

    border-radius: 11px;

    background:
        rgba(248,245,255,.88);

    color:
        #7A3FF2;

    box-shadow:
        0 4px 14px rgba(122,63,242,.08);

    transition:
        background-color 240ms ease,
        color 240ms ease,
        box-shadow 240ms ease,
        border-color 240ms ease;
}

/*
 * Horizontal and vertical strokes.
 */
.faq-toggle::before,
.faq-toggle::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 14px;
    height: 2px;

    border-radius: 999px;

    background:
        currentColor;

    transform-origin:
        center;

    transition:
        opacity 220ms ease,
        transform 300ms cubic-bezier(.22,1,.36,1);
}

/*
 * Horizontal line.
 */
.faq-toggle::before {
    transform:
        translate(-50%, -50%);
}

/*
 * Vertical line.
 *
 * Together they form +.
 */
.faq-toggle::after {
    transform:
        translate(-50%, -50%)
        rotate(90deg);
}

/*
 * When FAQ opens,
 * vertical stroke disappears.
 *
 * Horizontal stroke remains,
 * so + becomes −.
 */
.faq-item.is-open .faq-toggle::after {
    opacity: 0;

    transform:
        translate(-50%, -50%)
        rotate(90deg)
        scaleX(.25);
}

/*
 * Open button appearance.
 */
.faq-item.is-open .faq-toggle {
    border-color:
        #7A3FF2;

    background:
        #7A3FF2;

    color:
        #ffffff;

    box-shadow:
        0 8px 20px
        rgba(122,63,242,.22);
}

/* =========================================================
   ANSWER ANIMATION
   ========================================================= */

.faq-answer {
    display: grid;

    grid-template-rows:
        0fr;

    transition:
        grid-template-rows
        440ms
        cubic-bezier(.22,1,.36,1);
}

.faq-answer-inner {
    min-height: 0;
    overflow: hidden;
}

.faq-answer-content {
    padding:
        0
        72px
        0
        68px;

    opacity: 0;

    transform:
        translateY(-7px);

    transition:
        opacity
        260ms
        ease,

        transform
        380ms
        cubic-bezier(.22,1,.36,1),

        padding-bottom
        380ms
        cubic-bezier(.22,1,.36,1);
}

.faq-answer-content p {
    margin: 0;

    color:
        #5f6f86;

    font-size:
        14px;

    line-height:
        1.8;
}

.faq-item.is-open .faq-answer {
    grid-template-rows:
        1fr;
}

.faq-item.is-open .faq-answer-content {
    padding-bottom:
        23px;

    opacity:
        1;

    transform:
        translateY(0);
}

/* =========================================================
   FOCUS
   ========================================================= */

.faq-question:focus-visible {
    outline:
        3px solid
        rgba(122,63,242,.18);

    outline-offset:
        -3px;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

    .faq-section {
        padding:
            52px 0 60px;
    }

    .faq-heading {
        margin-bottom:
            26px;
    }

    .faq-heading h2 {
        font-size:
            32px;
    }

    .faq-heading p {
        font-size:
            14px;
    }

    .faq-item {
        border-radius:
            13px;
    }

    .faq-question {
        min-height:
            66px;

        gap:
            12px;

        padding:
            14px;
    }

    .faq-question-main {
        gap:
            11px;

        font-size:
            13px;
    }

    .faq-number {
        width:
            32px;

        height:
            32px;

        flex-basis:
            32px;

        border-radius:
            9px;
    }

    .faq-toggle {
        width:
            32px;

        height:
            32px;

        flex-basis:
            32px;

        border-radius:
            9px;
    }

    .faq-toggle::before,
    .faq-toggle::after {
        width:
            12px;
    }

    .faq-answer-content {
        padding-left:
            57px;

        padding-right:
            46px;
    }

    .faq-answer-content p {
        font-size:
            13px;

        line-height:
            1.7;
    }

    .faq-item.is-open
    .faq-answer-content {
        padding-bottom:
            19px;
    }

}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (
    prefers-reduced-motion:
    reduce
) {

    .faq-answer,
    .faq-answer-content,
    .faq-toggle,
    .faq-toggle::before,
    .faq-toggle::after {
        transition:
            none !important;
    }

}

/* =========================================================
   FOOTER MAGIC STORYBOOK ART
   ========================================================= */

.site-footer__art {
    position: relative;

    display: flex;

    width: 250px;
    height: 190px;

    flex: 0 0 250px;

    align-items: flex-end;
    justify-content: center;

    pointer-events: none;
}


/* =========================================================
   SCENE
   ========================================================= */

.site-footer__magic-scene {
    position: relative;

    width: 230px;
    height: 180px;
}


/* =========================================================
   GLOW
   ========================================================= */

.site-footer__magic-glow {
    position: absolute;

    left: 50%;
    bottom: 30px;

    width: 160px;
    height: 110px;

    transform: translateX(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 191, 47, .40) 0%,
            rgba(255, 218, 112, .18) 32%,
            rgba(122, 63, 242, .08) 58%,
            transparent 74%
        );

    filter: blur(7px);
}


/* =========================================================
   STARS
   ========================================================= */

.site-footer__magic-star {
    position: absolute;

    z-index: 5;

    color: #FFBF2F;

    text-shadow:
        0 3px 12px
        rgba(255, 191, 47, .30);

    animation:
        footerMagicStar
        3.2s
        ease-in-out
        infinite;
}


.site-footer__magic-star--1 {
    left: 30px;
    top: 43px;

    font-size: 18px;

    animation-delay: 0s;
}


.site-footer__magic-star--2 {
    right: 38px;
    top: 56px;

    font-size: 14px;

    animation-delay: .8s;
}


.site-footer__magic-star--3 {
    left: 65px;
    top: 15px;

    color: #7A3FF2;

    font-size: 12px;

    animation-delay: 1.5s;
}


.site-footer__magic-star--4 {
    right: 68px;
    top: 20px;

    color: #F85C8E;

    font-size: 10px;

    animation-delay: 2.1s;
}


@keyframes footerMagicStar {

    0%,
    100% {
        opacity: .55;

        transform:
            translateY(0)
            scale(.90);
    }

    50% {
        opacity: 1;

        transform:
            translateY(-5px)
            scale(1.08);
    }

}


/* =========================================================
   MINI ROCKET
   ========================================================= */

.site-footer__mini-rocket {
    position: absolute;

    z-index: 4;

    right: 22px;
    top: 16px;

    font-size: 30px;

    transform:
        rotate(-25deg);

    filter:
        drop-shadow(
            0 8px 10px
            rgba(36, 86, 230, .16)
        );

    animation:
        footerRocketFloat
        4s
        ease-in-out
        infinite;
}


@keyframes footerRocketFloat {

    0%,
    100% {
        transform:
            translate(0, 0)
            rotate(-25deg);
    }

    50% {
        transform:
            translate(-5px, -7px)
            rotate(-21deg);
    }

}


/* =========================================================
   CASTLE
   ========================================================= */

.site-footer__castle {
    position: absolute;

    z-index: 3;

    left: 50%;
    bottom: 72px;

    display: flex;

    align-items: flex-end;

    transform:
        translateX(-50%);
}


.site-footer__castle-center {
    position: relative;

    width: 56px;
    height: 64px;

    border:
        2px solid
        rgba(122, 63, 242, .15);

    border-radius:
        12px 12px 5px 5px;

    background:
        linear-gradient(
            180deg,
            #f0e6ff,
            #d9c6ff
        );

    box-shadow:
        0 10px 24px
        rgba(122, 63, 242, .12);
}


.site-footer__castle-center::before {
    content: "";

    position: absolute;

    left: 50%;
    top: -29px;

    width: 0;
    height: 0;

    transform:
        translateX(-50%);

    border-left:
        22px solid transparent;

    border-right:
        22px solid transparent;

    border-bottom:
        30px solid #9361ef;
}


.site-footer__castle-center::after {
    content: "★";

    position: absolute;

    left: 50%;
    top: 14px;

    transform:
        translateX(-50%);

    color:
        #FFBF2F;

    font-size:
        13px;
}


.site-footer__castle-door {
    position: absolute;

    left: 50%;
    bottom: 0;

    width: 17px;
    height: 23px;

    transform:
        translateX(-50%);

    border-radius:
        10px 10px 2px 2px;

    background:
        #ffffff;
}


/* SIDE TOWERS */

.site-footer__castle-tower {
    position: relative;

    width: 31px;
    height: 48px;

    border:
        2px solid
        rgba(122, 63, 242, .12);

    background:
        linear-gradient(
            180deg,
            #faf6ff,
            #e6d8ff
        );
}


.site-footer__castle-tower--left {
    margin-right: -4px;

    border-radius:
        9px 4px 4px 4px;
}


.site-footer__castle-tower--right {
    margin-left: -4px;

    border-radius:
        4px 9px 4px 4px;
}


.site-footer__castle-tower::before {
    content: "";

    position: absolute;

    left: 50%;
    top: -22px;

    width: 0;
    height: 0;

    transform:
        translateX(-50%);

    border-left:
        15px solid transparent;

    border-right:
        15px solid transparent;

    border-bottom:
        23px solid #b58af5;
}


.site-footer__castle-tower span {
    position: absolute;

    left: 50%;
    top: 16px;

    width: 8px;
    height: 13px;

    transform:
        translateX(-50%);

    border-radius:
        5px 5px 2px 2px;

    background:
        rgba(255,255,255,.95);
}


/* =========================================================
   MAGIC BOOK
   ========================================================= */

.site-footer__magic-book {
    position: absolute;

    z-index: 6;

    left: 50%;
    bottom: 13px;

    display: flex;

    width: 190px;
    height: 68px;

    transform:
        translateX(-50%);

    filter:
        drop-shadow(
            0 13px 16px
            rgba(41,55,130,.15)
        );
}


.site-footer__book-page {
    position: relative;

    width: 50%;
    height: 61px;

    padding:
        17px 18px;

    border:
        2px solid
        rgba(41,55,130,.10);

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #fffaf0
        );
}


.site-footer__book-page--left {
    border-radius:
        9px 4px 17px 8px;

    transform:
        perspective(130px)
        rotateY(7deg);
}


.site-footer__book-page--right {
    border-radius:
        4px 9px 8px 17px;

    transform:
        perspective(130px)
        rotateY(-7deg);
}


/* FAKE STORY TEXT */

.site-footer__book-page span {
    display: block;

    width: 78%;
    height: 3px;

    margin-bottom: 6px;

    border-radius: 999px;

    background:
        rgba(122,63,242,.14);
}


.site-footer__book-page span:nth-child(2) {
    width: 62%;
}


.site-footer__book-page span:nth-child(3) {
    width: 72%;
}


.site-footer__book-spine {
    position: absolute;

    z-index: 5;

    left: 50%;
    bottom: 0;

    width: 5px;
    height: 61px;

    transform:
        translateX(-50%);

    border-radius:
        999px;

    background:
        linear-gradient(
            180deg,
            #FFBF2F,
            #f6a91c
        );
}


/* GOLDEN MAGIC COMING FROM BOOK */

.site-footer__magic-book::before {
    content: "";

    position: absolute;

    z-index: -1;

    left: 50%;
    top: -25px;

    width: 135px;
    height: 62px;

    transform:
        translateX(-50%);

    border-radius:
        50%;

    background:
        radial-gradient(
            ellipse,
            rgba(255, 191, 47, .28),
            transparent 70%
        );

    filter:
        blur(5px);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 820px) {

    .site-footer__art {
        width: 210px;
        height: 165px;

        flex-basis: 210px;
    }

    .site-footer__magic-scene {
        transform:
            scale(.88);

        transform-origin:
            center bottom;
    }

}


@media (max-width: 640px) {

    .site-footer__art {
        width: 100%;
        height: 150px;

        margin-top: 18px;
    }

    .site-footer__magic-scene {
        transform:
            scale(.80);
    }

}



/* =========================================================
   TINYKIDSTALE — ONE CONTINUOUS SITE BACKGROUND
   =========================================================
   One background image + one uniform white veil for the
   entire page. Large homepage sections are transparent so
   there are no visible "white cuts" between sections.
   ========================================================= */

body.home-storybook-theme {
    position: relative;
    isolation: isolate;

    min-height: 100%;

    /*
     * Fallback only. The actual visual background is drawn
     * once by ::before below.
     */
    background: #f8fbff !important;

    color: #334155;
}


/*
 * ONE GLOBAL BACKGROUND LAYER
 *
 * The first layer is a single white veil at 68% opacity.
 * The second layer is the existing site background image.
 *
 * Because this layer is fixed to the viewport, sections no
 * longer get their own differently tinted pieces of the image.
 */
body.home-storybook-theme::before {
    content: "";

    position: fixed;
    inset: 0;

    z-index: -1;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(255,255,255,.68),
            rgba(255,255,255,.68)
        ),
        url('../img/bg/bg.jpg');

    background-repeat:
        no-repeat,
        no-repeat;

    background-position:
        center center,
        center center;

    background-size:
        cover,
        cover;
}


/* =========================================================
   REMOVE THE OLD PER-MAIN WHITE VEIL
   ========================================================= */

body.home-storybook-theme main {
    position: relative;

    background:
        transparent !important;
}

body.home-storybook-theme main::before {
    display:
        none !important;

    content:
        none !important;

    background:
        none !important;
}


/* =========================================================
   ALL LARGE HOMEPAGE SECTIONS USE THE SAME BACKGROUND
   =========================================================
   Cards, buttons and individual content surfaces keep their
   own backgrounds. Only the SECTION canvas is transparent.
   ========================================================= */

body.home-storybook-theme #hero,
body.home-storybook-theme #categories,
body.home-storybook-theme #tinykidstale-journey,
body.home-storybook-theme #how-it-works,
body.home-storybook-theme #comic-preview,
body.home-storybook-theme .pattern-section--promo,
body.home-storybook-theme #testimonials,
body.home-storybook-theme #faq {
    background:
        transparent !important;

    background-color:
        transparent !important;

    background-image:
        none !important;
}


/*
 * Remove large section-sized overlays and gradients which
 * previously caused a visible change when scrolling from one
 * section into another.
 */
body.home-storybook-theme #hero::before,
body.home-storybook-theme #hero::after,
body.home-storybook-theme #categories::before,
body.home-storybook-theme #categories::after,
body.home-storybook-theme #tinykidstale-journey::before,
body.home-storybook-theme #tinykidstale-journey::after,
body.home-storybook-theme #how-it-works::before,
body.home-storybook-theme #how-it-works::after,
body.home-storybook-theme #comic-preview::before,
body.home-storybook-theme #comic-preview::after,
body.home-storybook-theme .pattern-section--promo::before,
body.home-storybook-theme .pattern-section--promo::after,
body.home-storybook-theme #testimonials::before,
body.home-storybook-theme #testimonials::after,
body.home-storybook-theme #faq::before,
body.home-storybook-theme #faq::after {
    background:
        none !important;

    background-image:
        none !important;
}


/* =========================================================
   JOURNEY SECTION
   =========================================================
   Its cards stay glassy, but the large section wash is gone.
   ========================================================= */

body.home-storybook-theme .tkt-journey {
    background:
        transparent !important;
}

body.home-storybook-theme .tkt-journey::before {
    background:
        none !important;
}


/* =========================================================
   FAQ
   ========================================================= */

body.home-storybook-theme .faq-section {
    background:
        transparent !important;
}

body.home-storybook-theme .faq-section::before {
    background:
        none !important;
}


/* =========================================================
   FOOTER
   =========================================================
   Blend the footer into the same continuous canvas instead
   of placing another white panel behind it.
   ========================================================= */

body.home-storybook-theme .site-footer {
    border-top:
        1px solid rgba(122,63,242,.12) !important;

    background:
        #fff;



    background-image:
        none !important;

    box-shadow:
        none !important;

    backdrop-filter:
        none !important;
}

body.home-storybook-theme .site-footer::before {
    background:
        none !important;

    background-image:
        none !important;

    opacity:
        0 !important;
}


/* =========================================================
   KEEP THE STYLE TRACK AS AN INTENTIONAL UI BAND
   =========================================================
   This is not a section background; it remains a soft
   lavender control strip so it still matches the CTA.
   ========================================================= */

body.home-storybook-theme .story-style-strip {
    background:
        linear-gradient(
            90deg,
            rgba(230,218,255,.88) 0%,
            rgba(205,185,255,.90) 50%,
            rgba(230,218,255,.88) 100%
        ) !important;

    backdrop-filter:
        blur(12px)
        saturate(115%);
}


/* =========================================================
   MOBILE
   =========================================================
   The global fixed layer above works on mobile too, so do
   not repeat the background every 1000px like the old rule.
   ========================================================= */

@media (max-width: 900px) {

    body.home-storybook-theme {
        background:
            #f8fbff !important;
    }

    body.home-storybook-theme::before {
        background-image:
            linear-gradient(
                rgba(255,255,255,.68),
                rgba(255,255,255,.68)
            ),
            url('../img/bg/bg.jpg');

        background-repeat:
            no-repeat,
            no-repeat;

        background-position:
            center center,
            center center;

        background-size:
            cover,
            cover;
    }

}



/* =========================================================
   STORY WIZARD — MOBILE ADD-ON STABILITY FIX
   =========================================================
   Keeps the footer pinned to the bottom of the modal layout
   and gives only #storyWizardBody the vertical scroll.
   ========================================================= */

@media (max-width: 639px) {

    .home-storybook-theme #storyWizard {
        height: 100vh !important;
        height: 100dvh !important;

        min-height: 100vh !important;
        min-height: 100dvh !important;

        overflow: hidden !important;
    }

    .home-storybook-theme #storyWizardPanel {
        display: flex !important;
        flex-direction: column !important;

        height: 100vh !important;
        height: 100dvh !important;

        min-height: 0 !important;
        max-height: 100dvh !important;

        overflow: hidden !important;
    }

    .home-storybook-theme #storyWizardBody {
        flex: 1 1 0% !important;

        min-height: 0 !important;
        height: auto !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .home-storybook-theme #storyWizardFooter {
        position: relative !important;

        inset: auto !important;

        flex: 0 0 auto !important;

        width: 100% !important;
        margin: 0 !important;

        padding-bottom:
            calc(
                .5rem +
                env(safe-area-inset-bottom)
            );
    }

}