/* =========================================================
   LITTLE EXPLORERS LEARNING HUB
   LETTER MATCHING
   FILE: styles/letter-matching.css

   Recognition • Alphabet Learning • Free Printables
   Soft, calm, classroom friendly design
========================================================= */


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

:root {

    --lm-cream:
        #fffaf3;

    --lm-paper:
        #fffdf9;

    --lm-white:
        #ffffff;

    --lm-ink:
        #29363d;

    --lm-soft:
        #637179;

    --lm-plum:
        #71688f;

    --lm-plum-soft:
        #f0eef7;

    --lm-sage:
        #8da58d;

    --lm-sage-soft:
        #edf3eb;

    --lm-blue:
        #88aebe;

    --lm-blue-soft:
        #edf5f8;

    --lm-peach:
        #d59a88;

    --lm-peach-soft:
        #faece7;

    --lm-gold:
        #d3b16c;

    --lm-gold-soft:
        #fbf4e4;

    --lm-border:
        #e4ddd4;

    --lm-shadow:
        0 18px 50px rgba(50, 60, 65, .09);

    --lm-shadow-small:
        0 8px 24px rgba(50, 60, 65, .07);

}


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

* {

    box-sizing:
        border-box;

}


html {

    scroll-behavior:
        smooth;

}


body {

    margin:
        0;

    background:
        var(--lm-paper);

    color:
        var(--lm-ink);

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

}


button,
select {

    font:
        inherit;

}


img {

    max-width:
        100%;

    height:
        auto;

}


a {

    color:
        inherit;

}


/* =========================================================
   CONTAINER
========================================================= */

.container {

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

    margin:
        0 auto;

}


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

.site-header {

    position:
        relative;

    z-index:
        50;

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

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

}


.nav-container {

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

    min-height:
        82px;

    margin:
        0 auto;

    display:
        flex;

    align-items:
        center;

    gap:
        28px;

}


.logo {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    flex-shrink:
        0;

    text-decoration:
        none;

}


.logo img {

    width:
        58px;

    height:
        58px;

    display:
        block;

    object-fit:
        contain;

}


.logo-text {

    display:
        flex;

    flex-direction:
        column;

}


.logo-text strong {

    color:
        #514779;

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

    font-size:
        1.25rem;

    font-weight:
        800;

    line-height:
        1;

}


.logo-text small {

    margin-top:
        3px;

    color:
        #6c628e;

    font-size:
        .68rem;

    font-weight:
        800;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;

}


.main-nav {

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        22px;

    flex:
        1;

}


.main-nav a {

    position:
        relative;

    padding:
        28px 0;

    color:
        #515762;

    font-size:
        .86rem;

    font-weight:
        800;

    text-decoration:
        none;

    transition:
        color .2s ease;

}


.main-nav a:hover,
.main-nav a.active {

    color:
        #66548f;

}


.main-nav a.active::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    right:
        0;

    bottom:
        14px;

    height:
        3px;

    border-radius:
        99px;

    background:
        #66548f;

}


.header-actions {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

}


.header-resource-link {

    padding:
        12px 18px;

    border-radius:
        999px;

    background:
        var(--lm-plum-soft);

    color:
        #66548f;

    font-size:
        .76rem;

    font-weight:
        900;

    text-decoration:
        none;

}


.mobile-menu {

    display:
        none;

    width:
        44px;

    height:
        44px;

    padding:
        0;

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

    border-radius:
        12px;

    background:
        white;

    cursor:
        pointer;

}


.mobile-menu span {

    display:
        block;

    width:
        20px;

    height:
        2px;

    margin:
        4px auto;

    background:
        var(--lm-ink);

}


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

.btn {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        48px;

    padding:
        11px 20px;

    border-radius:
        999px;

    font-size:
        .82rem;

    font-weight:
        900;

    text-decoration:
        none;

    cursor:
        pointer;

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

}


.btn:hover {

    transform:
        translateY(-2px);

}


.btn-primary {

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

    background:
        var(--lm-peach);

    color:
        white;

    box-shadow:
        0 8px 18px rgba(
            213,
            154,
            136,
            .18
        );

}


.btn-secondary {

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

    background:
        white;

    color:
        var(--lm-ink);

}


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

.matching-hero {

    padding:
        84px 0 78px;

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

}


.matching-hero-grid {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(380px, .85fr);

    align-items:
        center;

    gap:
        65px;

}


.matching-hero-content {

    min-width:
        0;

}


.page-tag {

    display:
        inline-flex;

    align-items:
        center;

    padding:
        8px 14px;

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

    border-radius:
        999px;

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

    color:
        var(--lm-plum);

    font-size:
        .73rem;

    font-weight:
        900;

    letter-spacing:
        .06em;

    text-transform:
        uppercase;

}


.matching-hero h1 {

    margin:
        20px 0 15px;

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

    font-size:
        clamp(
            3.4rem,
            7vw,
            6rem
        );

    font-weight:
        800;

    line-height:
        .88;

    letter-spacing:
        -.04em;

}


.matching-hero h1 span {

    display:
        block;

    color:
        var(--lm-plum);

}


.hero-description {

    max-width:
        670px;

    margin:
        0;

    color:
        var(--lm-soft);

    font-size:
        1.05rem;

    line-height:
        1.75;

}


.hero-buttons {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        11px;

    margin-top:
        27px;

}


.matching-features {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;

    margin-top:
        28px;

}


.matching-features span {

    padding:
        8px 12px;

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

    border-radius:
        999px;

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

    color:
        var(--lm-soft);

    font-size:
        .74rem;

    font-weight:
        900;

}


/* =========================================================
   HERO LETTER ART
========================================================= */

.matching-hero-art {

    min-height:
        430px;

    padding:
        28px;

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

    border-radius:
        32px;

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

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

}


.letter-scene {

    position:
        relative;

    width:
        100%;

    height:
        375px;

    overflow:
        hidden;

    border-radius:
        24px;

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

}


/* =========================================================
   LETTER TILES
========================================================= */

.letter-tile {

    position:
        absolute;

    display:
        grid;

    place-items:
        center;

    width:
        118px;

    height:
        118px;

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

    border-radius:
        24px;

    background:
        white;

    box-shadow:
        0 13px 28px rgba(
            50,
            60,
            65,
            .10
        );

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

    font-size:
        4rem;

    font-weight:
        800;

}


.tile-a {

    top:
        43px;

    left:
        55px;

    background:
        var(--lm-peach-soft);

    color:
        var(--lm-peach);

    transform:
        rotate(-8deg);

}


.tile-a-small {

    top:
        155px;

    left:
        115px;

    width:
        88px;

    height:
        88px;

    background:
        #fff5ef;

    color:
        #b87867;

    font-size:
        2.9rem;

    transform:
        rotate(7deg);

}


.tile-b {

    top:
        55px;

    right:
        55px;

    background:
        var(--lm-sage-soft);

    color:
        #71916f;

    transform:
        rotate(8deg);

}


.tile-b-small {

    top:
        170px;

    right:
        110px;

    width:
        88px;

    height:
        88px;

    background:
        #f5faf3;

    color:
        #688765;

    font-size:
        2.9rem;

    transform:
        rotate(-7deg);

}


.tile-c {

    bottom:
        40px;

    left:
        50%;

    width:
        100px;

    height:
        100px;

    background:
        var(--lm-blue-soft);

    color:
        #648ea3;

    transform:
        translateX(-50%)
        rotate(-4deg);

}


.matching-arrow {

    position:
        absolute;

    top:
        145px;

    left:
        50%;

    color:
        var(--lm-plum);

    font-size:
        2.2rem;

    font-weight:
        900;

    transform:
        translateX(-50%);

}


.scene-label {

    position:
        absolute;

    bottom:
        24px;

    right:
        28px;

    padding:
        7px 13px;

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

    border-radius:
        999px;

    background:
        white;

    color:
        var(--lm-plum);

    font-size:
        .67rem;

    font-weight:
        900;

    letter-spacing:
        .08em;

}


/* =========================================================
   DEVELOPMENTAL GUIDANCE
========================================================= */

.developmental-section {

    padding:
        34px 0;

    background:
        white;

}


.developmental-card {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        17px;

    padding:
        24px 28px;

    border:
        1px solid #dce6da;

    border-radius:
        21px;

    background:
        var(--lm-sage-soft);

}


.developmental-icon {

    display:
        grid;

    place-items:
        center;

    flex:
        0 0 48px;

    width:
        48px;

    height:
        48px;

    border-radius:
        15px;

    background:
        white;

    font-size:
        1.2rem;

}


.developmental-card strong {

    display:
        block;

    margin-bottom:
        5px;

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

    font-size:
        1.1rem;

}


.developmental-card p {

    margin:
        0;

    color:
        var(--lm-soft);

    font-size:
        .86rem;

    line-height:
        1.7;

}


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

.section-heading {

    max-width:
        760px;

    margin:
        0 auto 44px;

    text-align:
        center;

}


.section-heading > span {

    color:
        var(--lm-plum);

    font-size:
        .72rem;

    font-weight:
        900;

    letter-spacing:
        .09em;

    text-transform:
        uppercase;

}


.section-heading h2 {

    margin:
        10px 0 12px;

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

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

    font-weight:
        800;

    line-height:
        1;

}


.section-heading p {

    margin:
        0;

    color:
        var(--lm-soft);

    font-size:
        .94rem;

    line-height:
        1.75;

}


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

.resources-section {

    padding:
        94px 0;

    background:
        var(--lm-cream);

}


.resource-grid {

    display:
        grid;

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

    gap:
        18px;

}


.resource-card {

    display:
        flex;

    flex-direction:
        column;

    padding:
        28px;

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

    border-radius:
        24px;

    background:
        white;

    box-shadow:
        var(--lm-shadow-small);

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

}


.resource-card:hover {

    transform:
        translateY(-5px);

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

}


.resource-icon {

    display:
        grid;

    place-items:
        center;

    width:
        54px;

    height:
        54px;

    margin-bottom:
        19px;

    border-radius:
        16px;

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

    font-size:
        1.2rem;

    font-weight:
        800;

}


.resource-icon.uppercase {

    background:
        var(--lm-peach-soft);

    color:
        var(--lm-peach);

}


.resource-icon.memory {

    background:
        var(--lm-plum-soft);

    color:
        var(--lm-plum);

}


.resource-icon.puzzles {

    background:
        var(--lm-blue-soft);

    color:
        #648ea3;

}


.resource-icon.interactive {

    background:
        var(--lm-sage-soft);

    color:
        #71916f;

}


.resource-card h3 {

    margin:
        0 0 9px;

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

    font-size:
        1.32rem;

    line-height:
        1.1;

}


.resource-card p {

    margin:
        0;

    color:
        var(--lm-soft);

    font-size:
        .84rem;

    line-height:
        1.7;

}


.resource-card ul {

    display:
        grid;

    gap:
        7px;

    margin:
        20px 0;

    padding:
        0;

    list-style:
        none;

}


.resource-card li {

    position:
        relative;

    padding-left:
        18px;

    color:
        var(--lm-soft);

    font-size:
        .76rem;

}


.resource-card li::before {

    content:
        "✓";

    position:
        absolute;

    left:
        0;

    color:
        var(--lm-sage);

    font-weight:
        900;

}


.resource-button {

    width:
        100%;

    margin-top:
        auto;

    padding:
        11px 14px;

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

    border-radius:
        999px;

    background:
        var(--lm-paper);

    color:
        var(--lm-ink);

    font-size:
        .76rem;

    font-weight:
        900;

    cursor:
        pointer;

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

}


.resource-button:hover {

    border-color:
        var(--lm-sage);

    background:
        var(--lm-sage-soft);

}


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

.builder-section {

    padding:
        94px 0;

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

}


.builder-panel {

    max-width:
        1020px;

    margin:
        0 auto;

    padding:
        40px;

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

    border-radius:
        30px;

    background:
        white;

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

}


.builder-heading {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        17px;

    margin-bottom:
        30px;

}


.builder-icon {

    display:
        grid;

    place-items:
        center;

    flex:
        0 0 54px;

    width:
        54px;

    height:
        54px;

    border-radius:
        16px;

    background:
        var(--lm-plum-soft);

    color:
        var(--lm-plum);

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

    font-size:
        1.15rem;

    font-weight:
        800;

}


.builder-heading > div:last-child > span {

    color:
        var(--lm-plum);

    font-size:
        .71rem;

    font-weight:
        900;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;

}


.builder-heading h2 {

    margin:
        5px 0 7px;

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

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

    line-height:
        1;

}


.builder-heading p {

    margin:
        0;

    color:
        var(--lm-soft);

    font-size:
        .86rem;

}


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

.builder-controls {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        18px;

    margin-bottom:
        20px;

}


.control-box {

    padding:
        18px;

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

    border-radius:
        17px;

    background:
        var(--lm-paper);

}


.control-box label {

    display:
        block;

    margin-bottom:
        9px;

    font-size:
        .76rem;

    font-weight:
        900;

}


.control-box select {

    width:
        100%;

    min-height:
        44px;

    padding:
        8px 11px;

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

    border-radius:
        10px;

    background:
        white;

    color:
        var(--lm-ink);

    font-size:
        .82rem;

    font-weight:
        700;

}


.builder-actions-small {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;

}


.builder-actions-small button {

    padding:
        8px 14px;

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

    border-radius:
        999px;

    background:
        white;

    color:
        var(--lm-soft);

    font-size:
        .74rem;

    font-weight:
        900;

    cursor:
        pointer;

}


.builder-actions-small button:hover {

    border-color:
        var(--lm-sage);

    background:
        var(--lm-sage-soft);

}


/* =========================================================
   LETTER SELECTOR
========================================================= */

.letter-selector {

    padding:
        22px;

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

    border-radius:
        19px;

    background:
        var(--lm-cream);

}


.selector-heading {

    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;

    margin-bottom:
        17px;

}


.selector-heading span {

    color:
        var(--lm-ink);

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

    font-size:
        1rem;

    font-weight:
        800;

}


.selector-heading small {

    color:
        var(--lm-soft);

    font-size:
        .75rem;

}


.letter-grid {

    display:
        grid;

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

    gap:
        8px;

}


.letter-choice {

    aspect-ratio:
        1;

    display:
        grid;

    place-items:
        center;

    padding:
        0;

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

    border-radius:
        12px;

    background:
        white;

    color:
        var(--lm-ink);

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

    font-size:
        1.15rem;

    font-weight:
        800;

    cursor:
        pointer;

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

}


.letter-choice:hover {

    transform:
        translateY(-2px);

    border-color:
        var(--lm-blue);

    background:
        var(--lm-blue-soft);

}


.letter-choice.selected {

    border-color:
        var(--lm-plum);

    background:
        var(--lm-plum);

    color:
        white;

}


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

.builder-status {

    min-height:
        24px;

    margin:
        15px 0;

    color:
        var(--lm-soft);

    font-size:
        .8rem;

    font-weight:
        800;

}


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

.builder-buttons {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        10px;

}


.builder-note {

    margin-top:
        22px;

    padding:
        17px;

    border:
        1px solid rgba(
            136,
            174,
            190,
            .25
        );

    border-radius:
        15px;

    background:
        var(--lm-blue-soft);

}


.builder-note strong {

    display:
        block;

    margin-bottom:
        4px;

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

}


.builder-note p {

    margin:
        0;

    color:
        var(--lm-soft);

    font-size:
        .78rem;

    line-height:
        1.65;

}


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

.teaching-section {

    padding:
        94px 0;

    background:
        white;

}


.ideas-grid {

    display:
        grid;

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

    gap:
        18px;

}


.ideas-grid article {

    padding:
        26px;

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

    border-radius:
        22px;

    background:
        var(--lm-paper);

}


.ideas-grid strong {

    display:
        grid;

    place-items:
        center;

    width:
        37px;

    height:
        37px;

    margin-bottom:
        17px;

    border-radius:
        11px;

    background:
        var(--lm-sage-soft);

    color:
        #71916f;

    font-size:
        .72rem;

}


.ideas-grid h3 {

    margin:
        0 0 8px;

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

    font-size:
        1.23rem;

}


.ideas-grid p {

    margin:
        0;

    color:
        var(--lm-soft);

    font-size:
        .81rem;

    line-height:
        1.7;

}


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

.cta-section {

    padding:
        70px 0;

    background:
        var(--lm-cream);

}


.cta-card {

    max-width:
        820px;

    margin:
        0 auto;

    padding:
        55px 40px;

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

    border-radius:
        30px;

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

    text-align:
        center;

}


.cta-card > span {

    color:
        #71916f;

    font-size:
        .72rem;

    font-weight:
        900;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;

}


.cta-card h2 {

    margin:
        10px 0;

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

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

    line-height:
        1;

}


.cta-card p {

    max-width:
        620px;

    margin:
        0 auto 25px;

    color:
        var(--lm-soft);

    font-size:
        .9rem;

    line-height:
        1.7;

}


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

.site-footer {

    padding:
        70px 0 24px;

    background:
        #202532;

    color:
        #dce2e5;

}


.footer-grid {

    display:
        grid;

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

    gap:
        50px;

}


.footer-grid h3,
.footer-grid h4 {

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

}


.footer-grid h3 {

    margin:
        0 0 9px;

    color:
        #f1f3f4;

}


.footer-grid h4 {

    margin:
        0 0 13px;

    color:
        white;

}


.footer-grid p {

    max-width:
        330px;

    margin:
        0;

    color:
        #b9c4c9;

    font-size:
        .82rem;

    line-height:
        1.7;

}


.footer-grid a {

    display:
        block;

    margin-bottom:
        10px;

    color:
        #c9d2d6;

    font-size:
        .78rem;

    text-decoration:
        none;

}


.footer-grid a:hover {

    color:
        white;

}


.footer-bottom {

    margin-top:
        45px;

    padding-top:
        22px;

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

    text-align:
        center;

}


.footer-bottom p {

    max-width:
        none;

    margin:
        0;

    color:
        #aeb8bd;

}


/* =========================================================
   LARGE TABLETS
========================================================= */

@media (max-width: 1100px) {


    .main-nav {

        gap:
            15px;

    }


    .main-nav a {

        font-size:
            .78rem;

    }


    .matching-hero-grid {

        grid-template-columns:
            minmax(0, 1fr)
            410px;

        gap:
            35px;

    }


    .resource-grid {

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

    }


    .ideas-grid {

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

    }


    .letter-grid {

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

    }

}


/* =========================================================
   TABLET / MOBILE NAVIGATION
========================================================= */

@media (max-width: 850px) {


    .nav-container {

        min-height:
            74px;

    }


    .main-nav {

        position:
            absolute;

        top:
            74px;

        left:
            0;

        right:
            0;

        display:
            none;

        flex-direction:
            column;

        align-items:
            stretch;

        justify-content:
            flex-start;

        gap:
            0;

        padding:
            12px 20px 18px;

        background:
            white;

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

        box-shadow:
            var(--lm-shadow-small);

    }


    .main-nav.mobile-open {

        display:
            flex;

    }


    .main-nav a {

        padding:
            11px 8px;

    }


    .main-nav a.active::after {

        display:
            none;

    }


    .header-resource-link {

        display:
            none;

    }


    .mobile-menu {

        display:
            block;

    }


    .matching-hero-grid {

        grid-template-columns:
            1fr;

    }


    .matching-hero-content {

        text-align:
            center;

    }


    .hero-description {

        margin:
            0 auto;

    }


    .hero-buttons,
    .matching-features {

        justify-content:
            center;

    }


    .matching-hero-art {

        max-width:
            560px;

        width:
            100%;

        margin:
            0 auto;

    }


    .builder-controls {

        grid-template-columns:
            1fr;

    }


    .letter-grid {

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

    }

}


/* =========================================================
   SMALL TABLET
========================================================= */

@media (max-width: 650px) {


    .container,
    .nav-container {

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

    }


    .logo-text {

        display:
            none;

    }


    .matching-hero {

        padding:
            64px 0;

    }


    .matching-hero h1 {

        font-size:
            3.5rem;

    }


    .hero-description {

        font-size:
            .95rem;

    }


    .matching-features {

        display:
            grid;

        grid-template-columns:
            1fr 1fr;

    }


    .letter-scene {

        height:
            330px;

    }


    .letter-tile {

        width:
            94px;

        height:
            94px;

        border-radius:
            19px;

        font-size:
            3rem;

    }


    .tile-a {

        top:
            35px;

        left:
            25px;

    }


    .tile-a-small {

        top:
            135px;

        left:
            72px;

        width:
            72px;

        height:
            72px;

        font-size:
            2.3rem;

    }


    .tile-b {

        top:
            40px;

        right:
            25px;

    }


    .tile-b-small {

        top:
            145px;

        right:
            70px;

        width:
            72px;

        height:
            72px;

        font-size:
            2.3rem;

    }


    .tile-c {

        bottom:
            28px;

        width:
            82px;

        height:
            82px;

    }


    .matching-arrow {

        top:
            128px;

        font-size:
            1.8rem;

    }


    .scene-label {

        right:
            16px;

        bottom:
            17px;

    }


    .resource-grid,
    .ideas-grid {

        grid-template-columns:
            1fr;

    }


    .developmental-card {

        padding:
            20px;

    }


    .builder-panel {

        padding:
            27px 18px;

        border-radius:
            23px;

    }


    .letter-grid {

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

    }


    .builder-buttons {

        display:
            grid;

    }


    .builder-buttons .btn {

        width:
            100%;

    }


    .cta-card {

        padding:
            42px 22px;

    }


    .footer-grid {

        grid-template-columns:
            1fr 1fr;

        gap:
            30px;

    }

}


/* =========================================================
   VERY SMALL SCREENS
========================================================= */

@media (max-width: 430px) {


    .matching-hero h1 {

        font-size:
            2.9rem;

    }


    .matching-features {

        grid-template-columns:
            1fr;

    }


    .matching-hero-art {

        padding:
            17px;

    }


    .letter-scene {

        height:
            290px;

    }


    .letter-tile {

        width:
            75px;

        height:
            75px;

        font-size:
            2.3rem;

    }


    .tile-a {

        left:
            18px;

    }


    .tile-a-small {

        left:
            55px;

        top:
            115px;

        width:
            60px;

        height:
            60px;

        font-size:
            1.9rem;

    }


    .tile-b {

        right:
            18px;

    }


    .tile-b-small {

        right:
            50px;

        top:
            125px;

        width:
            60px;

        height:
            60px;

        font-size:
            1.9rem;

    }


    .tile-c {

        width:
            68px;

        height:
            68px;

    }


    .matching-arrow {

        top:
            112px;

    }


    .letter-grid {

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

    }


    .footer-grid {

        grid-template-columns:
            1fr;

    }

}


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

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


    html {

        scroll-behavior:
            auto;

    }


    * {

        transition:
            none !important;

    }

}