/* Shared Geared Kids colours and controls, with a calmer style for reading pages. */
body.brand-page {
    --primary: #6533bc;
    --primary-dark: #51259d;
    --secondary: #17698e;
    --shadow: 0 8px 20px rgba(33, 48, 64, 0.08);
}
.brand-page .topnav {
    background: #fff;
    border: 1px solid #eee5f9;
    box-shadow: 0 5px 0 #6533bc0c;
    gap: 6px;
}
.brand-page .topnav a:hover,
.brand-page .topnav a:focus-visible,
.brand-page .topnav a.is-active {
    color: #51259d;
    background: #eee5f9;
    box-shadow: none;
}
.brand-page .topnav a::after { background: #6533bc; }
.brand-page .button-primary {
    background: #6533bc;
    color: #fff;
    box-shadow: 0 5px 0 #482488;
}
.brand-page .button-accent {
    background: #b8e632;
    color: #183042;
    box-shadow: 0 5px 0 #93bf20;
}
.brand-page .button-secondary {
    background: #bdebf4;
    color: #153c5b;
    border: 1px solid #9ad9e5;
    box-shadow: 0 4px 0 #8dceda;
}
.brand-page .button { border-radius: 20px; }
.brand-page a:focus-visible { outline: 3px solid #6533bc; outline-offset: 5px; }
.brand-page .text-link { color: #51259d; }
.brand-page .phonics-play-copy .text-link { color: #fffdf4; }
.brand-page .eyebrow { color: #51259d; }
.brand-page .phonics-play-copy .eyebrow { color: #ffde66; }
.brand-page .phonics-hero .eyebrow { color: #62412c; }

body.home-page { background: #fffdf4; }
.home-page .hero-heading-colour { color: #6232b4; }
.home-page .hero-copy-block h1 { max-width: 14ch; font-size: clamp(3rem, 5.5vw, 4.8rem); line-height: 1.02; }
.home-page .hero-copy {
    background: #ffde66;
    border: 0;
    border-radius: 48px 28px 48px 28px;
    box-shadow: none;
    backdrop-filter: none;
}
.home-page .hero-media-stage { position: relative; padding: 100px 0 0; min-width: 0; }
.home-page .hero-media-stage .tile-a { top: 18px; left: 24px; right: auto; }
.home-page .hero-media-stage .tile-b { top: 0; right: 14px; }
.home-page .hero-media-stage .tile-c { top: auto; bottom: -84px; right: 40px; }
@media (max-width: 760px) {
    .home-page .hero-media-stage { padding: 0; }
}
.home-page .hero-media-panel {
    margin-top: 0;
    background: #fff;
    box-shadow: 7px 9px 0 #d1ad4740;
}
.home-page .hero-media-copy { background: #fff; }
.home-page .value-card,
.home-page .app-card,
.home-page .stat-card {
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    border-radius: 28px 42px 28px 28px;
}
.home-page .value-card:nth-child(1) { background: #bdebf4; }
.home-page .value-card:nth-child(2) { background: #fff0ad; }
.home-page .value-card:nth-child(3) { background: #e1efb7; }
.home-page .app-library-grid > .app-card:nth-child(1) { background: #d9c9fa; }
.home-page .app-library-grid > .app-card:nth-child(2) { background: #fff0ad; }
.home-page .app-library-grid > .app-card:nth-child(3) { background: #bdebf4; }
.home-page .app-library-grid > .app-card:nth-child(4) { background: #e1efb7; }
.home-page .app-card-art { box-shadow: none; background: #ffffff70; border-radius: 18px; }
.home-page .app-library-grid .app-card-actions { align-items: stretch; gap: 14px; padding-top: 22px; min-height: 124px; }
.home-page .app-library-grid .app-learn-more { min-height: 44px; padding: 10px 16px; background: #ffffffb3; border: 1px solid #51259d26; color: #51259d; box-shadow: none; font-size: 0.95rem; gap: 8px; }
.app-store-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 10px; }
.app-store-links .store-badge { min-height: 44px; justify-content: flex-start; }
.app-store-links .store-badge img { width: 100%; max-width: 120px; height: auto; }
.home-page .app-status-live { color: #51259d; background: #ffffffb3; }
.home-page .app-status-soon { color: #36532c; background: #ffffffb3; }
.home-page .stat-card { background: #f1ebfb; }
.home-page .stat-card::before { box-shadow: none; }
.home-page .cta-panel { background: #bdebf4; border: 0; box-shadow: none; }
.home-page .app-card-featured-jlpt { background: #fff3d4; }
.home-page .hero-text,
.home-page .hero-card-label,
.home-page .hero-media-copy p,
.home-page .value-card p,
.home-page .app-card-copy p { color: #354b5c; }

body.brand-page.simple-page { background: #fffdf4; }
.brand-page .simple-panel {
    background: #fff;
    border: 1px solid #eee5f9;
    border-top: 8px solid #ffde66;
    box-shadow: none;
    backdrop-filter: none;
}
.brand-page .form-panel { background: #f5f0fd; }
.brand-page .back-link { color: #51259d; }
.brand-page.guide-page .guide-toc,
.brand-page.guide-page .guide-sources { border-color: #eee5f9; box-shadow: none; }
.brand-page.guide-page .guide-next { background: #bdebf4; }
.grownups-section {
    width: min(calc(100% - 32px), var(--max-width));
    margin: 12px auto 0;
    padding: 40px 0 48px;
    border-top: 2px solid #eee5f9;
    scroll-margin-top: 24px;
}
.grownups-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.grownup-card { display: flex; flex-direction: column; padding: 28px; border-radius: 28px; background: #f1ebfb; }
.grownup-card:nth-child(2) { background: #eaf3f7; }
.grownup-card-heading { display: flex; align-items: center; gap: 20px; }
.grownup-card-heading > img { width: 76px; height: 76px; object-fit: contain; flex-shrink: 0; border-radius: 16px; }
.grownup-card-heading h3 { font-size: 1.8rem; line-height: 1.12; }
.grownup-card-heading .app-status { margin-bottom: 12px; }
.grownup-card > p { color: #354b5c; line-height: 1.7; margin: 20px 0 0; }
.grownup-card .grownup-note { font-size: 0.95rem; margin: 12px 0 24px; }
.grownup-actions { margin-top: auto; display: flex; align-items: center; }
.grownup-actions .store-badge img { height: 48px; width: auto; }
@media (max-width: 760px) {
    .grownups-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .brand-page .topnav { gap: 0; }
    .home-page .hero-copy { border-radius: 30px 20px 30px 20px; }
    .grownups-section { width: calc(100% - 20px); }
    .grownup-card { padding: 24px; }
    .grownup-card-heading { gap: 14px; }
    .grownup-card-heading > img { width: 60px; height: 60px; }
    .grownup-card-heading h3 { font-size: 1.6rem; }
}

/* Illustrated adventure scenes share an aligned space in the app shelf. */
.home-page .app-library-grid .adventure-shelf-scene { position: relative; aspect-ratio: 4 / 3; overflow: visible; background: transparent; border-radius: 0; }
.home-page .app-library-grid .adventure-shelf-world { display: block; width: 100%; height: 100%; object-fit: contain; }
.home-page .adventure-shelf-character { position: absolute; left: 50%; bottom: 7%; width: 56%; padding: 0; border: 0; border-radius: 20px; background: transparent; cursor: pointer; transform: translateX(-50%); }
.home-page .app-library-grid .adventure-shelf-character img { display: block; width: 100%; height: auto; aspect-ratio: auto; transform-origin: 50% 85%; filter: drop-shadow(0 5px 3px #51259d25); }
.home-page .adventure-shelf-character:focus-visible { outline: 3px solid #6232b4; outline-offset: 5px; }

.home-page .adventure-shelf-character-upright { width: 46%; }