/* =========================================================
   LITTLE EXPLORERS LEARNING HUB
   ALPHABET CARDS PRINTABLES
   ---------------------------------------------------------
   File:
   styles/alphabet-cards.css

   Design:
   Soft literacy palette
   Warm, calm, inviting classroom aesthetic
   Responsive desktop, tablet, and mobile layout
========================================================= */


/* =========================================================
   ROOT VARIABLES
========================================================= */

:root {

    --ink:
        #28343a;

    --ink-soft:
        #59676d;

    --cream:
        #fff9f1;

    --paper:
        #fffdf9;

    --white:
        #ffffff;

    --sage:
        #8ba995;

    --sage-soft:
        #edf4ee;

    --blue:
        #83afc7;

    --blue-soft:
        #edf5f9;

    --gold:
        #d8b866;

    --gold-soft:
        #fbf4df;

    --coral:
        #d98a7d;

    --coral-soft:
        #f8eae6;

    --lavender:
        #a99abf;

    --lavender-soft:
        #f1edf5;

    --border:
        #e6ddd2;

    --shadow:
        0 14px 35px rgba(40, 52, 58, .08);

    --shadow-soft:
        0 7px 20px rgba(40, 52, 58, .06);

    --radius:
        22px;

    --radius-small:
        14px;

    --max-width:
        1180px;

}


/* =========================================================
   RESET
========================================================= */

*,
*::before,
*::after {

    box-sizing:
        border-box;

}


html {

    scroll-behavior:
        smooth;

}


body {

    margin:
        0;

    background:
        var(--paper);

    color:
        var(--ink);

    font-family:
        "Nunito",
        sans-serif;

    line-height:
        1.7;

}


img {

    display:
        block;

    max-width:
        100%;

}


a {

    color:
        inherit;

    text-decoration:
        none;

}


button,
input {

    font:
        inherit;

}


button {

    cursor:
        pointer;

}


.container {

    width:
        min(100% - 40px, var(--max-width));

    margin:
        0 auto;

}


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

.site-header {

    position:
        sticky;

    top:
        0;

    z-index:
        1000;

    background:
        rgba(255, 253, 249, .96);

    border-bottom:
        1px solid var(--border);

    backdrop-filter:
        blur(12px);

}


.site-header .container {

    min-height:
        82px;

    display:
        flex;

    align-items:
        center;

    gap:
        28px;

}


.logo {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    flex-shrink:
        0;

}


.logo img {

    width:
        54px;

    height:
        54px;

    object-fit:
        contain;

}


.logo h2 {

    margin:
        0;

    color:
        var(--ink);

    font-family:
        "Baloo 2",
        sans-serif;

    font-size:
        1.35rem;

    font-weight:
        800;

    line-height:
        1;

}


.logo span {

    display:
        block;

    margin-top:
        3px;

    color:
        var(--coral);

    font-size:
        .72rem;

    font-weight:
        800;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;

}


.main-nav {

    margin-left:
        auto;

}


.main-nav ul {

    display:
        flex;

    align-items:
        center;

    gap:
        5px;

    margin:
        0;

    padding:
        0;

    list-style:
        none;

}


.main-nav a {

    display:
        inline-flex;

    align-items:
        center;

    min-height:
        40px;

    padding:
        8px 11px;

    border-radius:
        10px;

    color:
        var(--ink-soft);

    font-size:
        .86rem;

    font-weight:
        800;

    transition:
        background .2s ease,
        color .2s ease;

}


.main-nav a:hover {

    background:
        var(--sage-soft);

    color:
        var(--ink);

}


.main-nav a.active {

    background:
        var(--coral-soft);

    color:
        #a95e53;

}


.header-actions {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

}


.search-form {

    display:
        flex;

    align-items:
        center;

    overflow:
        hidden;

    width:
        210px;

    border:
        1px solid var(--border);

    border-radius:
        999px;

    background:
        var(--white);

}


.search-form input {

    width:
        100%;

    min-width:
        0;

    padding:
        9px 13px;

    border:
        0;

    outline:
        0;

    background:
        transparent;

    color:
        var(--ink);

    font-size:
        .78rem;

}


.search-form button {

    width:
        38px;

    height:
        38px;

    border:
        0;

    background:
        transparent;

    color:
        var(--coral);

}


.mobile-menu {

    display:
        none;

    width:
        44px;

    height:
        44px;

    border:
        1px solid var(--border);

    border-radius:
        12px;

    background:
        var(--white);

    color:
        var(--ink);

}


/* =========================================================
   GENERAL TYPOGRAPHY
========================================================= */

h1,
h2,
h3,
h4 {

    margin-top:
        0;

    color:
        var(--ink);

    font-family:
        "Baloo 2",
        sans-serif;

    line-height:
        1.15;

}


p {

    color:
        var(--ink-soft);

}


.section-heading {

    max-width:
        760px;

    margin:
        0 auto 46px;

    text-align:
        center;

}


.section-heading h2 {

    margin:
        10px 0 12px;

    font-size:
        clamp(2rem, 4vw, 3rem);

}


.section-heading p {

    margin:
        0;

    font-size:
        1rem;

}


.section-tag,
.page-tag {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    width:
        fit-content;

    padding:
        7px 13px;

    border:
        1px solid var(--border);

    border-radius:
        999px;

    background:
        var(--white);

    color:
        #63716f;

    font-size:
        .75rem;

    font-weight:
        800;

    letter-spacing:
        .04em;

}


.section-tag i,
.page-tag i {

    color:
        var(--coral);

}


/* =========================================================
   BUTTONS
========================================================= */

.btn {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    min-height:
        48px;

    padding:
        11px 20px;

    border:
        1px solid transparent;

    border-radius:
        999px;

    font-weight:
        800;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background .2s ease;

}


.btn:hover {

    transform:
        translateY(-2px);

}


.btn-primary {

    background:
        var(--coral);

    color:
        var(--white);

    box-shadow:
        0 8px 18px rgba(217, 138, 125, .2);

}


.btn-primary:hover {

    background:
        #c9786c;

}


.btn-secondary {

    border-color:
        var(--border);

    background:
        var(--white);

    color:
        var(--ink);

}


.btn-secondary:hover {

    background:
        var(--sage-soft);

}


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

.resource-hero {

    position:
        relative;

    overflow:
        hidden;

    padding:
        78px 0 72px;

    background:
        linear-gradient(
            135deg,
            var(--cream),
            var(--sage-soft) 55%,
            var(--blue-soft)
        );

}


.resource-hero::before {

    position:
        absolute;

    top:
        -110px;

    right:
        -90px;

    width:
        330px;

    height:
        330px;

    border-radius:
        50%;

    background:
        rgba(216, 184, 102, .16);

    content:
        "";

}


.resource-hero::after {

    position:
        absolute;

    bottom:
        -130px;

    left:
        -90px;

    width:
        300px;

    height:
        300px;

    border-radius:
        50%;

    background:
        rgba(169, 154, 191, .13);

    content:
        "";

}


.hero-grid {

    position:
        relative;

    z-index:
        1;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(360px, .95fr);

    align-items:
        center;

    gap:
        60px;

}


.hero-content h1 {

    max-width:
        700px;

    margin:
        18px 0;

    font-size:
        clamp(3rem, 6vw, 5rem);

    font-weight:
        800;

}


.hero-content h1 span {

    display:
        block;

    color:
        var(--coral);

}


.hero-content > p {

    max-width:
        700px;

    margin:
        0 0 26px;

    font-size:
        1.08rem;

}


.hero-buttons {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        12px;

    margin-bottom:
        28px;

}


.hero-features {

    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        10px 18px;

}


.hero-features div {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    color:
        var(--ink-soft);

    font-size:
        .82rem;

    font-weight:
        800;

}


.hero-features i {

    color:
        var(--sage);

}


.hero-image {

    position:
        relative;

}


.hero-image::before {

    position:
        absolute;

    inset:
        14px -14px -14px 14px;

    border:
        2px solid rgba(139, 169, 149, .35);

    border-radius:
        28px;

    content:
        "";

}


.hero-image img {

    position:
        relative;

    width:
        100%;

    max-height:
        500px;

    object-fit:
        cover;

    border:
        8px solid rgba(255, 255, 255, .9);

    border-radius:
        28px;

    box-shadow:
        var(--shadow);

}


/* =========================================================
   DEVELOPMENTAL NOTE
========================================================= */

.developmental-note {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        14px;

    margin-top:
        26px;

    padding:
        18px;

    border:
        1px solid rgba(139, 169, 149, .32);

    border-radius:
        var(--radius-small);

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

}


.developmental-note-icon {

    display:
        grid;

    place-items:
        center;

    flex:
        0 0 42px;

    width:
        42px;

    height:
        42px;

    border-radius:
        12px;

    background:
        var(--sage-soft);

    color:
        #62866d;

}


.developmental-note strong {

    display:
        block;

    margin-bottom:
        3px;

    color:
        var(--ink);

    font-family:
        "Baloo 2",
        sans-serif;

    font-size:
        1.05rem;

}


.developmental-note p {

    margin:
        0;

    font-size:
        .84rem;

    line-height:
        1.6;

}


/* =========================================================
   STATS
========================================================= */

.resource-stats {

    padding:
        30px 0;

    background:
        var(--white);

    border-bottom:
        1px solid var(--border);

}


.stats-grid {

    display:
        grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap:
        16px;

}


.stat-card {

    padding:
        22px 15px;

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-small);

    background:
        var(--paper);

    text-align:
        center;

}


.stat-card:nth-child(1) {

    background:
        var(--coral-soft);

}


.stat-card:nth-child(2) {

    background:
        var(--sage-soft);

}


.stat-card:nth-child(3) {

    background:
        var(--blue-soft);

}


.stat-card:nth-child(4) {

    background:
        var(--gold-soft);

}


.stat-card h2 {

    margin:
        0;

    font-size:
        2rem;

}


.stat-card p {

    margin:
        2px 0 0;

    font-size:
        .8rem;

    font-weight:
        800;

}


/* =========================================================
   MAIN SECTIONS
========================================================= */

.featured-resource,
.included-section,
.benefits-section,
.skills-section,
.classroom-applications,
.ideas-section,
.collections-section,
.related-resources,
.faq-section,
.teacher-tips,
.developmental-section {

    padding:
        82px 0;

}


.included-section,
.skills-section,
.related-resources {

    background:
        var(--cream);

}


/* =========================================================
   FEATURED RESOURCE
========================================================= */

.featured-grid {

    display:
        grid;

    grid-template-columns:
        minmax(0, .95fr)
        minmax(0, 1.05fr);

    gap:
        55px;

    align-items:
        center;

}


.featured-image img {

    width:
        100%;

    border:
        1px solid var(--border);

    border-radius:
        var(--radius);

    box-shadow:
        var(--shadow);

}


.featured-content h3 {

    margin:
        0 0 12px;

    font-size:
        2rem;

}


.featured-content > p {

    margin:
        0 0 22px;

}


.feature-list {

    display:
        grid;

    gap:
        14px;

}


.feature-item {

    display:
        grid;

    grid-template-columns:
        24px 1fr;

    gap:
        10px;

}


.feature-item > i {

    margin-top:
        4px;

    color:
        var(--sage);

}


.feature-item h4 {

    margin:
        0 0 3px;

    font-size:
        1rem;

}


.feature-item p {

    margin:
        0;

    font-size:
        .86rem;

}


/* =========================================================
   INCLUDED CARDS
========================================================= */

.included-grid {

    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        18px;

}


.study-card {

    padding:
        26px;

    border:
        1px solid var(--border);

    border-radius:
        var(--radius);

    background:
        var(--white);

    box-shadow:
        var(--shadow-soft);

    transition:
        transform .2s ease,
        box-shadow .2s ease;

}


.study-card:hover {

    transform:
        translateY(-4px);

    box-shadow:
        var(--shadow);

}


.study-icon {

    display:
        grid;

    place-items:
        center;

    width:
        48px;

    height:
        48px;

    margin-bottom:
        16px;

    border-radius:
        14px;

    font-size:
        1.1rem;

}


.study-icon.red {

    background:
        var(--coral-soft);

    color:
        var(--coral);

}


.study-icon.blue {

    background:
        var(--blue-soft);

    color:
        #5d8da8;

}


.study-icon.green {

    background:
        var(--sage-soft);

    color:
        #668b70;

}


.study-icon.orange {

    background:
        var(--gold-soft);

    color:
        #a88635;

}


.study-icon.purple {

    background:
        var(--lavender-soft);

    color:
        #85739c;

}


.study-icon.yellow {

    background:
        #fff7df;

    color:
        #b49137;

}


.study-card h3 {

    margin:
        0 0 8px;

    font-size:
        1.3rem;

}


.study-card p {

    margin:
        0;

    font-size:
        .88rem;

}


/* =========================================================
   BENEFITS
========================================================= */

.benefits-grid {

    display:
        grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap:
        16px;

}


.why-card {

    padding:
        25px 20px;

    border:
        1px solid var(--border);

    border-radius:
        var(--radius);

    background:
        var(--white);

    text-align:
        center;

}


.why-card > i {

    display:
        grid;

    place-items:
        center;

    width:
        48px;

    height:
        48px;

    margin:
        0 auto 14px;

    border-radius:
        50%;

    background:
        var(--sage-soft);

    color:
        #65876d;

}


.why-card h3 {

    margin:
        0 0 8px;

    font-size:
        1.15rem;

}


.why-card p {

    margin:
        0;

    font-size:
        .83rem;

}


/* =========================================================
   SKILLS
========================================================= */

.skills-grid {

    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        16px;

}


.skill-card {

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    padding:
        20px;

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-small);

    background:
        var(--white);

}


.skill-card > i {

    display:
        grid;

    place-items:
        center;

    flex:
        0 0 44px;

    width:
        44px;

    height:
        44px;

    border-radius:
        12px;

    background:
        var(--blue-soft);

    color:
        #5d8da8;

}


.skill-card h3 {

    margin:
        0;

    font-size:
        1rem;

}


/* =========================================================
   CLASSROOM APPLICATIONS
========================================================= */

.application-grid {

    display:
        grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap:
        16px;

}


.application-card {

    padding:
        25px;

    border:
        1px solid var(--border);

    border-radius:
        var(--radius);

    background:
        var(--white);

    box-shadow:
        var(--shadow-soft);

}


.application-icon {

    display:
        grid;

    place-items:
        center;

    width:
        46px;

    height:
        46px;

    margin-bottom:
        15px;

    border-radius:
        13px;

    background:
        var(--coral-soft);

    color:
        var(--coral);

}


.application-card h3 {

    margin:
        0 0 8px;

    font-size:
        1.1rem;

}


.application-card p {

    margin:
        0;

    font-size:
        .84rem;

}


/* =========================================================
   IDEAS
========================================================= */

.ideas-section {

    background:
        var(--sage-soft);

}


.ideas-grid {

    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        18px;

}


.idea-card {

    position:
        relative;

    padding:
        28px;

    border:
        1px solid rgba(139, 169, 149, .3);

    border-radius:
        var(--radius);

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

}


.idea-card > span {

    display:
        inline-grid;

    place-items:
        center;

    width:
        34px;

    height:
        34px;

    margin-bottom:
        15px;

    border-radius:
        50%;

    background:
        var(--white);

    color:
        #65876d;

    font-size:
        .75rem;

    font-weight:
        900;

}


.idea-card h3 {

    margin:
        0 0 7px;

    font-size:
        1.2rem;

}


.idea-card p {

    margin:
        0;

    font-size:
        .86rem;

}


/* =========================================================
   COLLECTIONS
========================================================= */

.collection-grid {

    display:
        grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap:
        18px;

}


.favorite-card {

    overflow:
        hidden;

    border:
        1px solid var(--border);

    border-radius:
        var(--radius);

    background:
        var(--white);

    box-shadow:
        var(--shadow-soft);

}


.favorite-card img {

    width:
        100%;

    aspect-ratio:
        4 / 3;

    object-fit:
        cover;

}


.favorite-content {

    padding:
        20px;

}


.favorite-content h3 {

    margin:
        0 0 7px;

    font-size:
        1.08rem;

}


.favorite-content p {

    margin:
        0;

    font-size:
        .82rem;

}


/* =========================================================
   DEVELOPMENTAL APPROACH
========================================================= */

.developmental-section {

    background:
        var(--paper);

}


.developmental-panel {

    padding:
        48px;

    border:
        1px solid var(--border);

    border-radius:
        30px;

    background:
        linear-gradient(
            135deg,
            var(--gold-soft),
            var(--cream)
        );

    box-shadow:
        var(--shadow-soft);

}


.developmental-panel-heading {

    max-width:
        700px;

    margin:
        0 auto 35px;

    text-align:
        center;

}


.developmental-panel-heading h2 {

    margin:
        10px 0 0;

    font-size:
        clamp(2rem, 4vw, 2.8rem);

}


.developmental-grid {

    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        18px;

}


.developmental-grid article {

    padding:
        24px;

    border:
        1px solid var(--border);

    border-radius:
        var(--radius);

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

}


.age-label {

    display:
        inline-block;

    margin-bottom:
        10px;

    color:
        #92762e;

    font-size:
        .72rem;

    font-weight:
        900;

    letter-spacing:
        .06em;

    text-transform:
        uppercase;

}


.developmental-grid h3 {

    margin:
        0 0 8px;

    font-size:
        1.25rem;

}


.developmental-grid p {

    margin:
        0;

    font-size:
        .87rem;

}


/* =========================================================
   TEACHER TIPS
========================================================= */

.teacher-tips {

    background:
        var(--cream);

}


.tips-wrapper {

    display:
        grid;

    grid-template-columns:
        1fr .85fr;

    align-items:
        center;

    gap:
        55px;

}


.tips-content h2 {

    margin:
        12px 0;

    font-size:
        clamp(2rem, 4vw, 2.8rem);

}


.tips-content p {

    margin:
        0 0 18px;

}


.tips-content ul {

    display:
        grid;

    gap:
        8px;

    margin:
        0;

    padding:
        0;

    list-style:
        none;

}


.tips-content li {

    position:
        relative;

    padding-left:
        25px;

    color:
        var(--ink-soft);

    font-size:
        .9rem;

    font-weight:
        700;

}


.tips-content li::before {

    position:
        absolute;

    left:
        0;

    top:
        .35em;

    color:
        var(--sage);

    content:
        "✓";

    font-weight:
        900;

}


.tips-image img {

    width:
        100%;

    border-radius:
        var(--radius);

    box-shadow:
        var(--shadow);

}


/* =========================================================
   DOWNLOAD
========================================================= */

.download-section {

    padding:
        82px 0;

    background:
        var(--coral-soft);

}


.download-card {

    max-width:
        850px;

    margin:
        0 auto;

    padding:
        52px;

    border:
        1px solid rgba(217, 138, 125, .25);

    border-radius:
        30px;

    background:
        var(--white);

    box-shadow:
        var(--shadow);

    text-align:
        center;

}


.download-tag {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    color:
        #a95e53;

    font-size:
        .78rem;

    font-weight:
        900;

    letter-spacing:
        .06em;

    text-transform:
        uppercase;

}


.download-card h2 {

    margin:
        12px 0;

    font-size:
        clamp(2rem, 4vw, 3rem);

}


.download-card p {

    max-width:
        650px;

    margin:
        0 auto 25px;

}


.download-buttons {

    display:
        flex;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        12px;

}


/* =========================================================
   RELATED RESOURCES
========================================================= */

.resource-grid {

    display:
        grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap:
        18px;

}


.resource-card {

    overflow:
        hidden;

    border:
        1px solid var(--border);

    border-radius:
        var(--radius);

    background:
        var(--white);

    box-shadow:
        var(--shadow-soft);

}


.resource-card img {

    width:
        100%;

    aspect-ratio:
        4 / 3;

    object-fit:
        cover;

}


.resource-content {

    padding:
        20px;

}


.resource-content h3 {

    margin:
        0 0 7px;

    font-size:
        1.1rem;

}


.resource-content p {

    margin:
        0 0 14px;

    font-size:
        .82rem;

}


.resource-content a {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    color:
        #668b70;

    font-size:
        .82rem;

    font-weight:
        900;

}


/* =========================================================
   FAQ
========================================================= */

.faq-section {

    background:
        var(--white);

}


.faq-container {

    max-width:
        850px;

    margin:
        0 auto;

}


.faq-item {

    margin-bottom:
        10px;

    overflow:
        hidden;

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-small);

    background:
        var(--paper);

}


.faq-question {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    width:
        100%;

    padding:
        20px 22px;

    border:
        0;

    background:
        transparent;

    color:
        var(--ink);

    text-align:
        left;

    font-family:
        "Baloo 2",
        sans-serif;

    font-size:
        1.05rem;

    font-weight:
        800;

}


.faq-question i {

    color:
        var(--coral);

    transition:
        transform .2s ease;

}


.faq-question[aria-expanded="true"] i {

    transform:
        rotate(45deg);

}


.faq-answer {

    padding:
        0 22px 20px;

}


.faq-answer p {

    margin:
        0;

    font-size:
        .9rem;

}


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

.newsletter-section {

    padding:
        70px 0;

    background:
        var(--blue-soft);

}


.newsletter-card {

    max-width:
        760px;

    margin:
        0 auto;

    padding:
        42px;

    border:
        1px solid var(--border);

    border-radius:
        28px;

    background:
        var(--white);

    text-align:
        center;

    box-shadow:
        var(--shadow-soft);

}


.newsletter-card > span {

    display:
        grid;

    place-items:
        center;

    width:
        52px;

    height:
        52px;

    margin:
        0 auto 12px;

    border-radius:
        50%;

    background:
        var(--blue-soft);

    color:
        #5d8da8;

}


.newsletter-card h2 {

    margin:
        0 0 8px;

    font-size:
        2rem;

}


.newsletter-card p {

    max-width:
        580px;

    margin:
        0 auto 22px;

}


.newsletter-form {

    display:
        flex;

    max-width:
        550px;

    margin:
        0 auto;

    padding:
        5px;

    border:
        1px solid var(--border);

    border-radius:
        999px;

    background:
        var(--paper);

}


.newsletter-form input {

    width:
        100%;

    min-width:
        0;

    padding:
        10px 14px;

    border:
        0;

    outline:
        0;

    background:
        transparent;

}


.newsletter-form button {

    padding:
        10px 19px;

    border:
        0;

    border-radius:
        999px;

    background:
        var(--sage);

    color:
        var(--white);

    font-weight:
        900;

}


/* =========================================================
   FINAL CTA
========================================================= */

.final-cta {

    padding:
        70px 0;

    background:
        var(--cream);

}


.cta-card {

    max-width:
        900px;

    margin:
        0 auto;

    padding:
        52px;

    border-radius:
        30px;

    background:
        linear-gradient(
            135deg,
            var(--sage-soft),
            var(--blue-soft)
        );

    text-align:
        center;

}


.cta-card h2 {

    margin:
        0 0 12px;

    font-size:
        clamp(2rem, 4vw, 3rem);

}


.cta-card p {

    max-width:
        650px;

    margin:
        0 auto 24px;

}


/* =========================================================
   FOOTER
========================================================= */

.site-footer {

    padding:
        55px 0 0;

    background:
        #28343a;

    color:
        rgba(255,255,255,.8);

}


.footer-grid {

    display:
        grid;

    grid-template-columns:
        1.5fr
        1fr
        1fr
        .7fr;

    gap:
        35px;

    padding-bottom:
        40px;

}


.site-footer h3,
.site-footer h4 {

    color:
        var(--white);

}


.site-footer h3 {

    margin-bottom:
        10px;

    font-size:
        1.35rem;

}


.site-footer h4 {

    margin-bottom:
        12px;

    font-size:
        1rem;

}


.site-footer p {

    color:
        rgba(255,255,255,.68);

    font-size:
        .84rem;

}


.site-footer ul {

    display:
        grid;

    gap:
        7px;

    margin:
        0;

    padding:
        0;

    list-style:
        none;

}


.site-footer a {

    color:
        rgba(255,255,255,.72);

    font-size:
        .82rem;

}


.site-footer a:hover {

    color:
        var(--white);

}


.social-links {

    display:
        flex;

    gap:
        8px;

}


.social-links a {

    display:
        grid;

    place-items:
        center;

    width:
        36px;

    height:
        36px;

    border-radius:
        50%;

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

}


.footer-bottom {

    padding:
        18px 0;

    border-top:
        1px solid rgba(255,255,255,.12);

    text-align:
        center;

}


.footer-bottom p {

    margin:
        0;

    font-size:
        .76rem;

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1080px) {

    .site-header .container {

        gap:
            15px;

    }


    .main-nav a {

        padding:
            8px 7px;

        font-size:
            .78rem;

    }


    .search-form {

        width:
            175px;

    }


    .hero-grid {

        gap:
            35px;

    }


    .benefits-grid,
    .application-grid,
    .collection-grid,
    .resource-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }

}


@media (max-width: 900px) {

    .site-header .container {

        min-height:
            72px;

    }


    .main-nav {

        display:
            none;

        position:
            absolute;

        top:
            72px;

        left:
            20px;

        right:
            20px;

        padding:
            12px;

        border:
            1px solid var(--border);

        border-radius:
            18px;

        background:
            var(--white);

        box-shadow:
            var(--shadow);

    }


    .main-nav.mobile-open {

        display:
            block;

    }


    .main-nav ul {

        display:
            grid;

        gap:
            3px;

    }


    .main-nav a {

        width:
            100%;

    }


    .header-actions {

        margin-left:
            auto;

    }


    .search-form {

        display:
            none;

    }


    .mobile-menu {

        display:
            grid;

        place-items:
            center;

    }


    .hero-grid,
    .featured-grid,
    .tips-wrapper {

        grid-template-columns:
            1fr;

    }


    .hero-image {

        max-width:
            700px;

        margin:
            0 auto;

    }


    .developmental-grid {

        grid-template-columns:
            1fr;

    }

}


@media (max-width: 700px) {

    .container {

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

    }


    .resource-hero {

        padding:
            55px 0;

    }


    .hero-content h1 {

        font-size:
            clamp(2.6rem, 13vw, 4rem);

    }


    .hero-content > p {

        font-size:
            .96rem;

    }


    .hero-features {

        grid-template-columns:
            1fr;

    }


    .stats-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }


    .included-grid,
    .skills-grid,
    .ideas-grid {

        grid-template-columns:
            1fr;

    }


    .benefits-grid,
    .application-grid,
    .collection-grid,
    .resource-grid {

        grid-template-columns:
            1fr;

    }


    .featured-resource,
    .included-section,
    .benefits-section,
    .skills-section,
    .classroom-applications,
    .ideas-section,
    .collections-section,
    .related-resources,
    .faq-section,
    .teacher-tips,
    .developmental-section {

        padding:
            58px 0;

    }


    .developmental-panel,
    .download-card,
    .newsletter-card,
    .cta-card {

        padding:
            30px 20px;

    }


    .newsletter-form {

        display:
            grid;

        border:
            0;

        padding:
            0;

        background:
            transparent;

        gap:
            8px;

    }


    .newsletter-form input {

        min-height:
            48px;

        border:
            1px solid var(--border);

        border-radius:
            999px;

        background:
            var(--paper);

    }


    .newsletter-form button {

        min-height:
            48px;

    }


    .footer-grid {

        grid-template-columns:
            1fr 1fr;

        gap:
            28px;

    }

}


@media (max-width: 460px) {

    .site-header .container {

        min-height:
            68px;

    }


    .logo img {

        width:
            46px;

        height:
            46px;

    }


    .logo h2 {

        font-size:
            1.08rem;

    }


    .logo span {

        font-size:
            .62rem;

    }


    .hero-buttons {

        display:
            grid;

    }


    .btn {

        width:
            100%;

    }


    .stats-grid {

        grid-template-columns:
            1fr;

    }


    .developmental-note {

        flex-direction:
            column;

    }


    .footer-grid {

        grid-template-columns:
            1fr;

    }

}


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

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

    html {

        scroll-behavior:
            auto;

    }


    *,
    *::before,
    *::after {

        transition:
            none !important;

        animation:
            none !important;

    }

}

/* =========================================================
   ALPHABET RESOURCE BUILDER
========================================================= */

.alphabet-builder {

    padding:
        86px 0;

    background:
        linear-gradient(
            135deg,
            var(--cream),
            var(--blue-soft)
        );

}


.builder-panel {

    max-width:
        980px;

    margin:
        0 auto;

    padding:
        38px;

    border:
        1px solid var(--border);

    border-radius:
        30px;

    background:
        var(--white);

    box-shadow:
        var(--shadow);

}


.builder-intro {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        16px;

    margin-bottom:
        30px;

}


.builder-icon {

    display:
        grid;

    place-items:
        center;

    flex:
        0 0 52px;

    width:
        52px;

    height:
        52px;

    border-radius:
        15px;

    background:
        var(--coral-soft);

    color:
        var(--coral);

    font-size:
        1.15rem;

}


.builder-intro h3 {

    margin:
        0 0 6px;

    font-size:
        1.55rem;

}


.builder-intro p {

    max-width:
        700px;

    margin:
        0;

    font-size:
        .9rem;

}


/* =========================================================
   BUILDER CONTROLS
========================================================= */

.builder-controls {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        20px;

    margin-bottom:
        20px;

}


.builder-control-group {

    padding:
        18px;

    border:
        1px solid var(--border);

    border-radius:
        16px;

    background:
        var(--paper);

}


.builder-control-group label {

    display:
        block;

    margin-bottom:
        9px;

    color:
        var(--ink);

    font-size:
        .78rem;

    font-weight:
        900;

}


/* =========================================================
   RESOURCE TYPE SELECT
========================================================= */

.builder-control-group select {

    width:
        100%;

    min-height:
        44px;

    padding:
        9px 12px;

    border:
        1px solid var(--border);

    border-radius:
        10px;

    outline:
        none;

    background:
        var(--white);

    color:
        var(--ink);

    font-size:
        .86rem;

    font-weight:
        700;

}


.builder-control-group select:focus {

    border-color:
        var(--blue);

    box-shadow:
        0 0 0 3px rgba(131, 175, 199, .18);

}


/* =========================================================
   LETTER ACTIONS
========================================================= */

.letter-actions {

    display:
        flex;

    gap:
        8px;

}


.builder-small-button {

    min-height:
        38px;

    padding:
        7px 13px;

    border:
        1px solid var(--border);

    border-radius:
        999px;

    background:
        var(--white);

    color:
        var(--ink-soft);

    font-size:
        .76rem;

    font-weight:
        900;

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease;

}


.builder-small-button:hover {

    transform:
        translateY(-1px);

    background:
        var(--sage-soft);

    border-color:
        var(--sage);

}


/* =========================================================
   ALPHABET SELECTOR
========================================================= */

.alphabet-selector {

    display:
        grid;

    grid-template-columns:
        repeat(13, 1fr);

    gap:
        8px;

    padding:
        20px;

    border:
        1px solid var(--border);

    border-radius:
        18px;

    background:
        var(--cream);

}


/* =========================================================
   INDIVIDUAL LETTER BUTTON
========================================================= */

.letter-choice {

    aspect-ratio:
        1;

    min-width:
        0;

    border:
        1px solid var(--border);

    border-radius:
        12px;

    background:
        var(--white);

    color:
        var(--ink);

    font-family:
        "Baloo 2",
        "Nunito",
        sans-serif;

    font-size:
        1.1rem;

    font-weight:
        800;

    transition:
        transform .18s ease,
        background .18s ease,
        border-color .18s ease,
        color .18s ease,
        box-shadow .18s ease;

}


.letter-choice:hover {

    transform:
        translateY(-2px);

    border-color:
        var(--sage);

    background:
        var(--sage-soft);

}


.letter-choice.selected {

    border-color:
        var(--coral);

    background:
        var(--coral);

    color:
        var(--white);

    box-shadow:
        0 6px 14px rgba(217, 138, 125, .22);

}


.letter-choice:focus-visible {

    outline:
        3px solid rgba(131, 175, 199, .35);

    outline-offset:
        2px;

}


/* =========================================================
   BUILDER STATUS
========================================================= */

.builder-status {

    min-height:
        24px;

    margin:
        14px 0;

    color:
        var(--ink-soft);

    font-size:
        .82rem;

    font-weight:
        800;

}


/* =========================================================
   BUILDER ACTIONS
========================================================= */

.builder-actions {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        10px;

    padding-top:
        8px;

}


.builder-actions .btn {

    min-height:
        48px;

}


/* =========================================================
   BUILDER NOTE
========================================================= */

.builder-note {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        10px;

    margin-top:
        22px;

    padding:
        15px 17px;

    border:
        1px solid rgba(
            131,
            175,
            199,
            .25
        );

    border-radius:
        14px;

    background:
        var(--blue-soft);

}


.builder-note > i {

    margin-top:
        4px;

    color:
        #5d8da8;

}


.builder-note p {

    margin:
        0;

    font-size:
        .8rem;

}


/* =========================================================
   RESOURCE CARD BUILDER BUTTONS
========================================================= */

.resource-select-button {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    margin-top:
        13px;

    padding:
        8px 12px;

    border:
        1px solid var(--border);

    border-radius:
        999px;

    background:
        var(--paper);

    color:
        #668b70;

    font-size:
        .75rem;

    font-weight:
        900;

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease;

}


.resource-select-button:hover {

    transform:
        translateY(-1px);

    background:
        var(--sage-soft);

    border-color:
        var(--sage);

}


/* =========================================================
   BUILDER RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .alphabet-selector {

        grid-template-columns:
            repeat(9, 1fr);

    }

}


@media (max-width: 700px) {

    .alphabet-builder {

        padding:
            60px 0;

    }


    .builder-panel {

        padding:
            24px 18px;

        border-radius:
            22px;

    }


    .builder-controls {

        grid-template-columns:
            1fr;

    }


    .alphabet-selector {

        grid-template-columns:
            repeat(7, 1fr);

        padding:
            14px;

    }


    .letter-choice {

        font-size:
            1rem;

    }


    .builder-actions {

        display:
            grid;

    }


    .builder-actions .btn {

        width:
            100%;

    }

}


@media (max-width: 460px) {

    .alphabet-selector {

        grid-template-columns:
            repeat(6, 1fr);

        gap:
            6px;

    }


    .letter-choice {

        border-radius:
            9px;

        font-size:
            .9rem;

    }


    .builder-intro {

        flex-direction:
            column;

    }

}