/* =========================================================
   LITTLE EXPLORERS LEARNING HUB
   CLASSROOM LABELS
   classroom-labels1.css

   STANDALONE RESOURCE CENTER THEME

   This file intentionally contains:
   • Global design system
   • Header
   • Navigation
   • Breadcrumbs
   • Buttons
   • Hero
   • Resource cards
   • Printable cards
   • Label builder
   • CTA
   • Footer
   • Responsive behavior
   • Animations

   No additional site stylesheet is required.
========================================================= */


/* =========================================================
   DESIGN SYSTEM
========================================================= */

:root {

    /* Primary */

    --primary:
        #65558F;

    --primary-dark:
        #4F4372;

    --primary-light:
        #F3F0FA;


    /* Secondary */

    --secondary:
        #8BB8E8;

    --secondary-dark:
        #6799CE;

    --secondary-light:
        #EEF6FE;


    /* Accent */

    --accent:
        #E6B94C;

    --accent-dark:
        #C99925;

    --accent-light:
        #FFF8E5;


    /* Support */

    --success:
        #6FA36A;

    --warning:
        #E89B3C;

    --danger:
        #C95D63;


    /* Surfaces */

    --background:
        #FAFBFD;

    --surface:
        #FFFFFF;

    --surface-alt:
        #F7F8FC;


    /* Typography */

    --text-dark:
        #2F2F3A;

    --text:
        #4A4E59;

    --text-light:
        #666B78;


    /* Borders */

    --border:
        #E4E7F0;


    /* Shadows */

    --shadow-sm:
        0 4px 12px rgba(101,85,143,.08);

    --shadow:
        0 12px 30px rgba(101,85,143,.12);

    --shadow-lg:
        0 22px 55px rgba(101,85,143,.18);


    /* Radius */

    --radius-sm:
        12px;

    --radius:
        18px;

    --radius-lg:
        28px;


    /* Animation */

    --transition:
        .3s ease;


    /* Layout */

    --container:
        1280px;

}


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

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

    margin:
        0;

    padding:
        0;

    box-sizing:
        border-box;

}


html {

    scroll-behavior:
        smooth;

}


body {

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

    font-size:
        16px;

    line-height:
        1.7;

    color:
        var(--text);

    background:
        var(--background);

    overflow-x:
        hidden;

    -webkit-font-smoothing:
        antialiased;

}


img {

    max-width:
        100%;

    display:
        block;

    height:
        auto;

}


a {

    color:
        inherit;

    text-decoration:
        none;

    transition:
        var(--transition);

}


button,
input,
select,
textarea {

    font:
        inherit;

}


button {

    cursor:
        pointer;

    border:
        none;

    background:
        none;

}


ul {

    list-style:
        none;

}


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

h1,
h2,
h3,
h4,
h5,
h6 {

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

    color:
        var(--text-dark);

    line-height:
        1.2;

    font-weight:
        800;

}


h1 {

    font-size:
        clamp(2.8rem, 5vw, 4.5rem);

}


h2 {

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

}


h3 {

    font-size:
        1.45rem;

}


p {

    color:
        var(--text-light);

}


/* =========================================================
   LAYOUT
========================================================= */

.container {

    width:
        min(92%, var(--container));

    margin-inline:
        auto;

}


section {

    padding:
        6rem 0;

}


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

.btn {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        .6rem;

    padding:
        1rem 2rem;

    border-radius:
        999px;

    font-weight:
        700;

    transition:
        var(--transition);

    white-space:
        nowrap;

}


.btn-primary {

    background:
        var(--primary);

    color:
        #fff;

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

}


.btn-primary:hover {

    background:
        var(--primary-dark);

    color:
        #fff;

    transform:
        translateY(-3px);

    box-shadow:
        var(--shadow);

}


.btn-secondary {

    background:
        #fff;

    color:
        var(--primary);

    border:
        2px solid var(--primary);

}


.btn-secondary:hover {

    background:
        var(--primary);

    color:
        #fff;

    transform:
        translateY(-3px);

}


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

.site-header {

    position:
        sticky;

    top:
        0;

    z-index:
        1000;

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

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    border-bottom:
        1px solid rgba(0,0,0,.06);

    box-shadow:
        0 4px 20px rgba(0,0,0,.04);

    transition:
        var(--transition);

}


.site-header.scrolled {

    box-shadow:
        0 8px 24px rgba(0,0,0,.08);

}


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

.nav-container {

    width:
        min(92%, var(--container));

    margin-inline:
        auto;

    min-height:
        90px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        28px;

}


/* =========================================================
   LOGO
========================================================= */

.logo {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    flex-shrink:
        0;

}


.logo img {

    width:
        64px;

    height:
        64px;

    display:
        block;

    flex-shrink:
        0;

    object-fit:
        contain;

}
.logo-text {

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

}


.logo-text h1 {

    margin:
        0;

    color:
        var(--primary-dark);

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

    font-size:
        1.35rem;

    font-weight:
        800;

    line-height:
        1.05;

    white-space:
        nowrap;

}


.logo-text span {

    display:
        block;

    margin-top:
        4px;

    color:
        var(--primary);

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

    font-size:
        .72rem;

    font-weight:
        700;

    letter-spacing:
        .08em;

    line-height:
        1.2;

    text-transform:
        uppercase;

}


/* =========================================================
   MAIN NAVIGATION
========================================================= */

.main-nav {

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        22px;

    margin-left:
        auto;

}


.main-nav a {

    position:
        relative;

    display:
        inline-flex;

    align-items:
        center;

    padding:
        8px 0;

    color:
        var(--text);

    font-size:
        .92rem;

    font-weight:
        600;

}


.main-nav a:hover {

    color:
        var(--primary);

}


.main-nav a.active {

    color:
        var(--primary);

}


.main-nav a::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    bottom:
        -4px;

    width:
        0;

    height:
        3px;

    border-radius:
        999px;

    background:
        var(--primary);

    transition:
        width var(--transition);

}


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

    width:
        100%;

}


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

.header-actions {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    flex-shrink:
        0;

}


.header-resource-link {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        .7rem 1rem;

    border-radius:
        999px;

    background:
        var(--primary-light);

    color:
        var(--primary);

    font-size:
        .82rem;

    font-weight:
        700;

}


.header-resource-link:hover {

    background:
        var(--primary);

    color:
        #fff;

}


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

.mobile-menu {

    display:
        none;

    width:
        48px;

    height:
        48px;

    align-items:
        center;

    justify-content:
        center;

    flex-direction:
        column;

    gap:
        5px;

    border-radius:
        12px;

    background:
        var(--primary);

    color:
        #fff;

    transition:
        var(--transition);

}


.mobile-menu span {

    display:
        block;

    width:
        21px;

    height:
        2px;

    border-radius:
        999px;

    background:
        #fff;

    transition:
        var(--transition);

}


.mobile-menu:hover {

    background:
        var(--primary-dark);

}


/* =========================================================
   MOBILE NAV STATE

   JS uses .open.
   .active is also supported for compatibility.
========================================================= */

@media (max-width:1100px) {

    .nav-container {

        position:
            relative;

    }


    .main-nav {

        position:
            absolute;

        top:
            100%;

        left:
            0;

        width:
            100%;

        display:
            none;

        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            0;

        margin:
            0;

        padding:
            .5rem 0;

        background:
            #fff;

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

        box-shadow:
            var(--shadow);

    }


    .main-nav.open,
    .main-nav.active {

        display:
            flex;

    }


    .main-nav a {

        display:
            block;

        width:
            100%;

        padding:
            1rem 1.5rem;

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

    }


    .main-nav a::after {

        display:
            none;

    }


    .mobile-menu {

        display:
            flex;

    }

}


@media (max-width:768px) {

    .nav-container {

        min-height:
            78px;

    }


    .logo img {

        width:
            52px;

        height:
            52px;

    }


    .logo-text h1 {

        font-size:
            1.15rem;

    }


    .logo-text span {

        font-size:
            .65rem;

    }


    .header-resource-link {

        display:
            none;

    }

}

/* =========================================================
   BREADCRUMB
========================================================= */

.breadcrumb-bar {

    background:
        var(--primary-light);

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

}


.breadcrumb {

    min-height:
        46px;

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        .55rem;

    color:
        var(--text-light);

    font-size:
        .8rem;

}


.breadcrumb a {

    color:
        var(--primary);

    font-weight:
        600;

}


.breadcrumb a:hover {

    color:
        var(--primary-dark);

}


.breadcrumb strong {

    color:
        var(--primary-dark);

}


/* =========================================================
   SECTION HEADING
========================================================= */

.section-heading {

    text-align:
        center;

    max-width:
        760px;

    margin:
        0 auto 4rem;

}


.section-heading span,
.section-eyebrow {

    display:
        inline-block;

    padding:
        .45rem 1rem;

    border-radius:
        999px;

    background:
        var(--primary-light);

    color:
        var(--primary);

    font-size:
        .75rem;

    font-weight:
        700;

    letter-spacing:
        .05em;

    text-transform:
        uppercase;

    margin-bottom:
        1rem;

}


.section-heading h2 {

    margin-bottom:
        1rem;

}


.section-heading p {

    max-width:
        700px;

    margin:
        auto;

}


/* =========================================================
   CLASSROOM LABELS HERO
========================================================= */

.labels-hero {

    position:
        relative;

    overflow:
        hidden;

    padding:
        7rem 0;

    background:
        radial-gradient(
            circle at top right,
            rgba(139,184,232,.14) 0%,
            transparent 42%
        ),

        radial-gradient(
            circle at bottom left,
            rgba(101,85,143,.12) 0%,
            transparent 45%
        ),

        linear-gradient(
            180deg,
            #ffffff 0%,
            var(--primary-light) 100%
        );

}


.labels-hero::before {

    content:
        "";

    position:
        absolute;

    width:
        420px;

    height:
        420px;

    right:
        -220px;

    top:
        -220px;

    border-radius:
        50%;

    background:
        rgba(139,184,232,.10);

}


.labels-hero::after {

    content:
        "";

    position:
        absolute;

    width:
        300px;

    height:
        300px;

    left:
        -170px;

    bottom:
        -190px;

    border-radius:
        50%;

    background:
        rgba(101,85,143,.08);

}


.labels-hero-content {

    position:
        relative;

    z-index:
        2;

    display:
        grid;

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

    gap:
        5rem;

    align-items:
        center;

}


.labels-hero-copy {

    position:
        relative;

    z-index:
        2;

}


.labels-hero .eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        .6rem;

    padding:
        .55rem 1.1rem;

    border-radius:
        999px;

    background:
        var(--primary-light);

    color:
        var(--primary);

    font-size:
        .75rem;

    font-weight:
        700;

    letter-spacing:
        .05em;

    text-transform:
        uppercase;

    margin-bottom:
        1.4rem;

}


.labels-hero h1 {

    margin-bottom:
        1.5rem;

    max-width:
        760px;

    color:
        var(--text-dark);

}


.labels-hero .hero-lead {

    max-width:
        650px;

    margin-bottom:
        1.5rem;

    color:
        var(--primary);

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

    font-size:
        1.2rem;

    font-weight:
        700;

    line-height:
        1.55;

}


.labels-hero .hero-description {

    max-width:
        650px;

    margin-bottom:
        2rem;

    font-size:
        1rem;

    line-height:
        1.75;

}


.labels-hero .hero-actions {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        1rem;

}


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

.labels-hero-visual {

    position:
        relative;

    min-height:
        390px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


.hero-label-stack {

    position:
        relative;

    width:
        100%;

    max-width:
        440px;

    height:
        350px;

}


.sample-label {

    position:
        absolute;

    width:
        310px;

    min-height:
        108px;

    display:
        flex;

    align-items:
        center;

    gap:
        1rem;

    padding:
        1.25rem 1.4rem;

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

    border:
        1px solid rgba(0,0,0,.05);

    border-radius:
        18px;

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

}


.sample-label:nth-child(1) {

    top:
        5px;

    left:
        10px;

    transform:
        rotate(-4deg);

    border-left:
        6px solid var(--primary);

}


.sample-label:nth-child(2) {

    top:
        120px;

    right:
        0;

    transform:
        rotate(3deg);

    border-left:
        6px solid var(--secondary);

}


.sample-label:nth-child(3) {

    top:
        235px;

    left:
        30px;

    transform:
        rotate(-2deg);

    border-left:
        6px solid var(--accent);

}


.sample-label-icon {

    width:
        58px;

    height:
        58px;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        15px;

    background:
        var(--primary-light);

    font-size:
        1.6rem;

}


.sample-label:nth-child(2)
.sample-label-icon {

    background:
        var(--secondary-light);

}


.sample-label:nth-child(3)
.sample-label-icon {

    background:
        var(--accent-light);

}


.sample-label-text {

    display:
        flex;

    flex-direction:
        column;

}


.sample-label-text strong {

    color:
        var(--primary-dark);

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

    font-size:
        1.15rem;

    font-weight:
        900;

    line-height:
        1.2;

}


.sample-label-text small {

    margin-top:
        .25rem;

    color:
        var(--text-light);

    font-size:
        .7rem;

}


/* =========================================================
   RESOURCE HIGHLIGHTS
========================================================= */

.resource-highlights {

    position:
        relative;

    z-index:
        5;

    margin-top:
        -2.5rem;

    padding:
        0 0 4rem;

}


.highlight-grid {

    display:
        grid;

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

    gap:
        1.25rem;

}


.highlight-card {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        1rem;

    min-height:
        130px;

    padding:
        1.5rem;

    background:
        #fff;

    border-radius:
        20px;

    border:
        1px solid rgba(0,0,0,.05);

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

    transition:
        var(--transition);

}


.highlight-card:hover {

    transform:
        translateY(-6px);

    box-shadow:
        var(--shadow);

}


.highlight-icon {

    width:
        45px;

    height:
        45px;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        13px;

    background:
        var(--primary-light);

    color:
        var(--primary);

}


.highlight-card h3 {

    margin-bottom:
        .35rem;

    color:
        var(--primary-dark);

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

    font-size:
        1rem;

    font-weight:
        800;

}


.highlight-card p {

    font-size:
        .72rem;

    line-height:
        1.55;

}


/* =========================================================
   LABEL CATEGORIES
========================================================= */

.label-categories {

    background:
        #fff;

}


.category-grid {

    display:
        grid;

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

    gap:
        2rem;

}


.label-category-card {

    position:
        relative;

    overflow:
        hidden;

    width:
        100%;

    min-height:
        150px;

    display:
        grid;

    grid-template-columns:
        58px 1fr 20px;

    align-items:
        center;

    gap:
        1rem;

    padding:
        1.75rem;

    background:
        #fff;

    border-radius:
        24px;

    border:
        1px solid rgba(0,0,0,.05);

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

    text-align:
        left;

    transition:
        var(--transition);

}


.label-category-card::before {

    content:
        "";

    position:
        absolute;

    left:
        0;

    top:
        0;

    width:
        100%;

    height:
        5px;

    background:
        linear-gradient(
            90deg,
            var(--primary),
            var(--secondary)
        );

    transform:
        scaleX(0);

    transform-origin:
        left;

    transition:
        .35s;

}


.label-category-card:hover {

    transform:
        translateY(-8px);

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

}


.label-category-card:hover::before {

    transform:
        scaleX(1);

}


.label-category-card .feature-icon {

    width:
        58px;

    height:
        58px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        15px;

    background:
        var(--primary-light);

    font-size:
        1.6rem;

}


.label-category-card:nth-child(2)
.feature-icon {

    background:
        var(--secondary-light);

}


.label-category-card:nth-child(3)
.feature-icon {

    background:
        var(--accent-light);

}


.label-category-card:nth-child(4)
.feature-icon {

    background:
        var(--secondary-light);

}


.label-category-card:nth-child(5)
.feature-icon {

    background:
        var(--accent-light);

}


.label-category-card:nth-child(6)
.feature-icon {

    background:
        var(--primary-light);

}


.label-category-card .feature-content {

    display:
        flex;

    flex-direction:
        column;

}


.label-category-card .feature-content strong {

    color:
        var(--text-dark);

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

    font-size:
        1.15rem;

    font-weight:
        800;

}


.label-category-card .feature-content small {

    margin-top:
        .35rem;

    color:
        var(--text-light);

    font-size:
        .75rem;

    line-height:
        1.5;

}


.label-category-card .feature-arrow {

    color:
        var(--primary);

    font-size:
        1.25rem;

    font-weight:
        800;

}


/* =========================================================
   RESOURCE LIBRARY
========================================================= */

.resource-library {

    background:
        var(--background);

}


.resource-library .section-heading {

    margin-bottom:
        3rem;

}


/* =========================================================
   PRINTABLE GRID
========================================================= */

.printable-grid {

    display:
        grid;

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

    gap:
        2rem;

}


/* =========================================================
   PRINTABLE CARD
========================================================= */

.printable-card {

    display:
        flex;

    flex-direction:
        column;

    background:
        #fff;

    border-radius:
        24px;

    overflow:
        hidden;

    border:
        1px solid rgba(0,0,0,.05);

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

    transition:
        var(--transition);

}


.printable-card:hover {

    transform:
        translateY(-10px);

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

}


/* =========================================================
   PRINT PREVIEW
========================================================= */

.print-preview {

    min-height:
        190px;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    padding:
        2rem;

    background:
        #EEF2F8;

}


.label-preview {

    width:
        100%;

    min-height:
        100px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        .65rem;

    padding:
        1rem;

    background:
        #fff;

    border:
        2px solid var(--primary);

    border-radius:
        14px;

    color:
        var(--primary-dark);

    box-shadow:
        0 10px 25px rgba(0,0,0,.10);

}


.label-preview strong {

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

    font-size:
        1rem;

    font-weight:
        900;

}


/* =========================================================
   PRINT CONTENT
========================================================= */

.print-content {

    display:
        flex;

    flex-direction:
        column;

    flex:
        1;

    padding:
        1.8rem;

}


.print-category {

    display:
        inline-flex;

    width:
        max-content;

    margin-bottom:
        .45rem;

    padding:
        .35rem .7rem;

    border-radius:
        999px;

    background:
        var(--primary-light);

    color:
        var(--primary);

    font-size:
        .68rem;

    font-weight:
        800;

    letter-spacing:
        .04em;

}


.print-content h3 {

    margin-bottom:
        .75rem;

    color:
        var(--text-dark);

}


.print-content p {

    flex:
        1;

    margin-bottom:
        1.5rem;

    line-height:
        1.75;

    font-size:
        .88rem;

}


/* =========================================================
   FILE TAGS
========================================================= */

.file-tags {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        .55rem;

    margin-bottom:
        1.25rem;

}


.file-tags span {

    padding:
        .4rem .75rem;

    border-radius:
        999px;

    background:
        var(--surface-alt);

    color:
        var(--text-light);

    font-size:
        .72rem;

    font-weight:
        700;

}


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

.download-meta {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        1rem;

    padding-top:
        1rem;

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

}


.download-meta > span {

    color:
        var(--text-light);

    font-size:
        .75rem;

}


.download-btn {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        36px;

    padding:
        .5rem .9rem;

    border-radius:
        999px;

    background:
        var(--primary);

    color:
        #fff;

    font-size:
        .72rem;

    font-weight:
        700;

    transition:
        var(--transition);

}


.download-btn:hover {

    background:
        var(--primary-dark);

    transform:
        translateY(-2px);

}


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

.label-builder-section {

    background:
        linear-gradient(
            180deg,
            var(--secondary-light) 0%,
            #fff 100%
        );

}


.builder-layout {

    display:
        grid;

    grid-template-columns:
        350px 1fr;

    gap:
        3rem;

    align-items:
        stretch;

}


.builder-card {

    padding:
        2rem;

    background:
        #fff;

    border-radius:
        24px;

    border:
        1px solid rgba(0,0,0,.05);

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

}


.form-group {

    margin-bottom:
        1.25rem;

}


.form-group label {

    display:
        block;

    margin-bottom:
        .45rem;

    color:
        var(--text-dark);

    font-size:
        .82rem;

    font-weight:
        700;

}


.form-group input,
.form-group select {

    width:
        100%;

    min-height:
        48px;

    padding:
        .8rem 1rem;

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

    border-radius:
        12px;

    background:
        var(--surface-alt);

    color:
        var(--text);

    outline:
        none;

    transition:
        var(--transition);

}


.form-group input:focus,
.form-group select:focus {

    border-color:
        var(--primary);

    background:
        #fff;

    box-shadow:
        0 0 0 4px rgba(101,85,143,.10);

}


.builder-card .btn {

    width:
        100%;

    margin-top:
        .5rem;

}


.builder-preview-card {

    min-height:
        390px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    padding:
        3rem;

    background:
        #fff;

    border-radius:
        24px;

    border:
        1px solid rgba(0,0,0,.05);

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

}


.preview-eyebrow {

    margin-bottom:
        1.5rem;

    color:
        var(--primary);

    font-size:
        .75rem;

    font-weight:
        800;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;

}


.classroom-label-preview {

    width:
        min(100%, 520px);

    min-height:
        125px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        1.2rem;

    padding:
        1.5rem 2rem;

    background:
        var(--background);

    border:
        3px solid var(--primary);

    border-radius:
        18px;

    box-shadow:
        var(--shadow);

    transition:
        var(--transition);

}


.classroom-label-icon {

    width:
        60px;

    height:
        60px;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        15px;

    background:
        var(--primary-light);

    font-size:
        1.7rem;

}


.classroom-label-content {

    display:
        flex;

    flex-direction:
        column;

}


.classroom-label-content strong {

    color:
        var(--primary-dark);

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

    font-size:
        1.7rem;

    font-weight:
        900;

    line-height:
        1.1;

}


.classroom-label-content small {

    margin-top:
        .3rem;

    color:
        var(--text-light);

    font-size:
        .75rem;

}


.classroom-label-preview.large {

    min-height:
        170px;

}


.classroom-label-preview.large
.classroom-label-icon {

    width:
        75px;

    height:
        75px;

    font-size:
        2rem;

}


.classroom-label-preview.large
.classroom-label-content strong {

    font-size:
        2.2rem;

}


.classroom-label-preview.small {

    min-height:
        90px;

    padding:
        1rem 1.25rem;

}


.classroom-label-preview.small
.classroom-label-icon {

    width:
        44px;

    height:
        44px;

    font-size:
        1.2rem;

}


.classroom-label-preview.small
.classroom-label-content strong {

    font-size:
        1.15rem;

}


.preview-help {

    max-width:
        500px;

    margin-top:
        1.25rem;

    text-align:
        center;

    font-size:
        .78rem;

}


/* =========================================================
   PREVIEW UPDATE ANIMATION
========================================================= */

.preview-updated {

    animation:
        labelUpdated .35s ease;

}


@keyframes labelUpdated {

    0% {

        transform:
            scale(1);

    }

    50% {

        transform:
            scale(1.025);

    }

    100% {

        transform:
            scale(1);

    }

}


/* =========================================================
   ORGANIZATION SECTION
========================================================= */

.organization-section {

    background:
        #fff;

}


.organization-grid {

    display:
        grid;

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

    gap:
        2rem;

}


.organization-grid .feature-card {

    position:
        relative;

    overflow:
        hidden;

    min-height:
        235px;

    padding:
        2.5rem;

    background:
        #fff;

    border-radius:
        24px;

    border:
        1px solid rgba(0,0,0,.05);

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

    transition:
        var(--transition);

}


.organization-grid .feature-card::before {

    content:
        "";

    position:
        absolute;

    left:
        0;

    top:
        0;

    width:
        100%;

    height:
        5px;

    background:
        linear-gradient(
            90deg,
            var(--primary),
            var(--secondary)
        );

    transform:
        scaleX(0);

    transform-origin:
        left;

    transition:
        .35s;

}


.organization-grid .feature-card:hover {

    transform:
        translateY(-10px);

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

}


.organization-grid .feature-card:hover::before {

    transform:
        scaleX(1);

}


.organization-grid .feature-icon {

    width:
        46px;

    height:
        46px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        1.25rem;

    border-radius:
        13px;

    background:
        var(--primary-light);

    color:
        var(--primary);

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

    font-size:
        .8rem;

    font-weight:
        900;

}


.organization-grid
.feature-card:nth-child(2)
.feature-icon {

    background:
        var(--secondary-light);

    color:
        var(--secondary-dark);

}


.organization-grid
.feature-card:nth-child(3)
.feature-icon {

    background:
        var(--accent-light);

    color:
        var(--accent-dark);

}


.organization-grid
.feature-card:nth-child(4)
.feature-icon {

    background:
        var(--primary-light);

}


.organization-grid
.feature-content h3 {

    margin-bottom:
        .9rem;

    color:
        var(--text-dark);

}


.organization-grid
.feature-content p {

    line-height:
        1.8;

}


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

.resources-cta {

    padding:
        6rem 0;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--secondary)
        );

    color:
        #fff;

    text-align:
        center;

}


.resources-cta .section-eyebrow {

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

    color:
        var(--accent-light);

}


.resources-cta h2 {

    color:
        #fff;

    margin-bottom:
        1rem;

}


.resources-cta p {

    max-width:
        700px;

    margin:
        0 auto 2.5rem;

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

}


.cta-actions {

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        1rem;

    margin-top:
        2rem;

}


.resources-cta .btn-primary {

    background:
        #fff;

    color:
        var(--primary);

}


.resources-cta .btn-primary:hover {

    background:
        var(--accent-light);

    color:
        var(--primary-dark);

}


.resources-cta .btn-secondary {

    background:
        transparent;

    color:
        #fff;

    border:
        2px solid rgba(255,255,255,.7);

}


.resources-cta .btn-secondary:hover {

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

    border-color:
        #fff;

}


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

.site-footer {

    background:
        #202431;

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

    padding:
        5rem 0 2rem;

}


.footer-grid {

    width:
        min(92%, var(--container));

    margin:
        0 auto 3rem;

    display:
        grid;

    grid-template-columns:
        2fr 1fr 1fr 1fr;

    gap:
        3rem;

}

.footer-brand {

    display:
        flex;

    flex-direction:
        column;

}


.footer-brand p {

    max-width:
        340px;

    margin:
        0;

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

    font-size:
        .9rem;

    line-height:
        1.7;

}


.footer-column {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

}


.footer-column h3 {

    margin:
        0 0 12px;

    color:
        #FFFFFF;

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

    font-size:
        16px;

    font-weight:
        800;

}


.footer-column a {

    display:
        block;

    margin-bottom:
        .7rem;

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

    font-size:
        .88rem;

}


.footer-column a:hover {

    color:
        var(--secondary);

}


.footer-bottom {

    width:
        min(92%, var(--container));

    margin:
        0 auto;

    padding-top:
        2rem;

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

    text-align:
        center;

}


.footer-bottom p {

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

    font-size:
        .85rem;

}


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

.fade-up {

    opacity:
        0;

    transform:
        translateY(30px);

    transition:
        opacity .6s ease,
        transform .6s ease;

}


.fade-up.visible {

    opacity:
        1;

    transform:
        translateY(0);

}


.highlight-card,
.label-category-card,
.printable-card,
.organization-grid .feature-card {

    will-change:
        transform;

}


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

@media (max-width:1100px) {

    .labels-hero-content {

        grid-template-columns:
            1fr;

        gap:
            3rem;

        text-align:
            center;

    }


    .labels-hero-copy {

        margin:
            0 auto;

    }


    .labels-hero h1,
    .labels-hero .hero-lead,
    .labels-hero .hero-description {

        margin-left:
            auto;

        margin-right:
            auto;

    }


    .labels-hero .hero-actions {

        justify-content:
            center;

    }


    .labels-hero-visual {

        max-width:
            600px;

        width:
            100%;

        margin:
            0 auto;

    }


    .highlight-grid {

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

    }


    .category-grid {

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

    }


    .printable-grid {

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

    }


    .organization-grid {

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

    }


    .builder-layout {

        grid-template-columns:
            1fr;

    }


    .footer-grid {

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

    }

}


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

@media (max-width:768px) {

    section {

        padding:
            4.5rem 0;

    }


    .labels-hero {

        padding:
            5rem 0;

    }


    .labels-hero h1 {

        font-size:
            clamp(2.5rem,10vw,3.5rem);

    }


    .labels-hero .hero-lead {

        font-size:
            1.05rem;

    }


    .labels-hero .hero-actions {

        flex-direction:
            column;

        width:
            100%;

    }


    .labels-hero .hero-actions .btn {

        width:
            100%;

    }


    .hero-label-stack {

        transform:
            scale(.9);

    }


    .resource-highlights {

        margin-top:
            0;

        padding-top:
            2rem;

    }


    .highlight-grid {

        grid-template-columns:
            1fr;

    }


    .category-grid {

        grid-template-columns:
            1fr;

    }


    .printable-grid {

        grid-template-columns:
            1fr;

    }


    .organization-grid {

        grid-template-columns:
            1fr;

    }


    .footer-grid {

        grid-template-columns:
            1fr;

        text-align:
            center;

    }


    .footer-brand {

        align-items:
            center;

    }


    .footer-brand p {

        margin:
            0 auto;

    }


    .footer-column {

        align-items:
            center;

    }


    .cta-actions {

        flex-direction:
            column;

    }


    .cta-actions .btn {

        width:
            100%;

    }

}


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

@media (max-width:480px) {

    .container {

        width:
            94%;

    }


    .nav-container {

        width:
            94%;

    }


    .logo {

        gap:
            8px;

    }


    .logo-icon {

        width:
            40px;

        height:
            40px;

        border-radius:
            11px;

    }


    .logo-text strong {

        font-size:
            1rem;

    }


    .logo-text small {

        font-size:
            .58rem;

    }


    .mobile-menu {

        width:
            44px;

        height:
            44px;

    }


    .breadcrumb {

        font-size:
            .7rem;

    }


    .hero-label-stack {

        height:
            290px;

        transform:
            scale(.72);

        transform-origin:
            center;

    }


    .sample-label {

        width:
            300px;

    }


    .sample-label:nth-child(1) {

        left:
            -10px;

    }


    .sample-label:nth-child(2) {

        right:
            -10px;

    }


    .sample-label:nth-child(3) {

        left:
            0;

    }


    .highlight-card {

        padding:
            1.25rem;

    }


    .label-category-card {

        grid-template-columns:
            50px 1fr 18px;

        padding:
            1.25rem;

    }


    .label-category-card .feature-icon {

        width:
            50px;

        height:
            50px;

    }


    .print-content {

        padding:
            1.5rem;

    }


    .download-meta {

        align-items:
            stretch;

        flex-direction:
            column;

    }


    .download-btn {

        width:
            100%;

    }


    .builder-preview-card {

        padding:
            1.5rem;

    }


    .classroom-label-preview {

        flex-direction:
            column;

        text-align:
            center;

    }


    .classroom-label-content {

        align-items:
            center;

    }


    .organization-grid .feature-card {

        padding:
            1.5rem;

    }

}

/* =========================================================
   CLASSROOM LABELS FOOTER
   FINAL DESKTOP OVERRIDE
========================================================= */

.classroom-labels-page .site-footer .footer-grid {

    display:
        grid !important;

    grid-template-columns:
        2fr 1fr 1fr 1fr !important;

    gap:
        3rem;

    align-items:
        start;

}


.classroom-labels-page .site-footer .footer-brand {

    max-width:
        420px;

}


.classroom-labels-page .site-footer .footer-brand h3 {

    margin:
        0 0 12px;

    color:
        #FFFFFF !important;

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

    font-size:
        20px;

    font-weight:
        900;

}


.classroom-labels-page .site-footer .footer-brand p {

    margin:
        0;

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

}


.classroom-labels-page .site-footer .footer-column {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

}


.classroom-labels-page .site-footer .footer-column h3 {

    margin:
        0 0 14px;

    color:
        #FFFFFF !important;

}


.classroom-labels-page .site-footer .footer-column a {

    display:
        block;

    margin:
        0 0 10px;

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

}


.classroom-labels-page .site-footer .footer-column a:hover {

    color:
        #FFFFFF !important;

}

/* =========================================================
   CLASSROOM LABELS FOOTER
   RESPONSIVE
========================================================= */

@media (max-width: 992px) {

    .classroom-labels-page .site-footer .footer-grid {

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

    }

}


@media (max-width: 680px) {

    .classroom-labels-page .site-footer .footer-grid {

        grid-template-columns:
            1fr !important;

    }

}


/* =========================================================
   PRINT
========================================================= */

@media print {

    .site-header,
    .breadcrumb-bar,
    .resource-highlights,
    .label-categories,
    .resource-library,
    .resources-cta,
    .site-footer,
    .hero-actions {

        display:
            none !important;

    }


    body {

        background:
            #fff;

    }


    .labels-hero {

        padding:
            2rem 0;

        background:
            #fff;

    }


    .labels-hero::before,
    .labels-hero::after {

        display:
            none;

    }


    .labels-hero-content {

        display:
            block;

    }


    .labels-hero-visual {

        display:
            none;

    }


    .builder-layout {

        display:
            block;

    }


    .builder-card {

        display:
            none;

    }


    .builder-preview-card {

        box-shadow:
            none;

        border:
            none;

    }

}