/* ============================================================
   SQL LEARNING PLATFORM — HOMEPAGE CSS
   ============================================================
   Page-specific styles only.
   Shared platform styles are loaded separately by home.html.
   ============================================================ */

:root {
    --home-bg: #07111f;
    --home-panel: rgba(14, 28, 48, 0.82);
    --home-border: rgba(120, 170, 230, 0.18);
    --home-text: #edf5ff;
    --home-muted: #9eb1c8;
    --home-blue: #35a7ff;
    --home-purple: #7773ff;
    --home-green: #55d99b;
}

html {
    scroll-behavior: smooth;
}

body,
.home-page {
    background:
        radial-gradient(
            circle at 10% 0%,
            rgba(53, 167, 255, 0.13),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 10%,
            rgba(119, 115, 255, 0.12),
            transparent 30%
        ),
        var(--home-bg);

    color: var(--home-text);
}


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

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;

    min-height: 72px;
    padding: 0 5vw;

    display: flex;
    align-items: center;
    justify-content: space-between;

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

    background:
        rgba(7, 17, 31, 0.90);

    backdrop-filter:
        blur(18px);
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;

    color: var(--home-text);
    text-decoration: none;
}

.brand-mark {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            var(--home-blue),
            var(--home-purple)
        );

    color: #04101e;
    font-weight: 900;
    font-size: 13px;
}

.brand strong {
    display: block;
}

.brand small {
    display: block;

    color: var(--home-muted);

    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.main-navigation {
    display: flex;
    align-items: center;
    gap: 20px;
}

.main-navigation a {
    color: var(--home-muted);
    text-decoration: none;
    font-size: 14px;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.main-navigation a:hover {
    color: #ffffff;
    transform: translateY(-1px);
}

.mobile-menu-button {
    display: none;

    border: 0;
    background: transparent;
    color: #ffffff;

    font-size: 24px;
    cursor: pointer;
}


/* ============================================================
   MOBILE HEADER — HOMEPAGE
   ------------------------------------------------------------
   Desktop is untouched. On mobile the logo remains at the top-left
   and the hamburger sits directly below the logo, matching the
   requested Playground-style mobile header position.
   ============================================================ */
@media (max-width: 800px) {
    .site-header {
        min-height: 112px;
        height: 112px;
        padding: 12px;
        align-items: flex-start;
        justify-content: flex-start;
        flex-wrap: nowrap;
    }

    .site-header .brand {
        margin: 0;
        flex: 0 0 auto;
    }

    .site-header .mobile-menu-button {
        position: absolute;
        left: 12px;
        top: 68px;
        width: 44px;
        height: 36px;
        margin: 0;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 0;
        background: transparent;
        color: #ffffff;
        font-size: 30px;
        line-height: 1;
        cursor: pointer;
        z-index: 1003;
    }

    .site-header .main-navigation {
        top: 112px;
    }
}

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

.hero-section {
    width: min(1180px, 90%);
    min-height: 600px;

    margin: auto;
    padding: 90px 0 70px;

    display: grid;
    grid-template-columns:
        1.08fr 0.92fr;

    align-items: center;
    gap: 70px;
}

.eyebrow {
    color: #72c3ff;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 0.14em;
}

.hero-content h1 {
    margin: 18px 0;

    font-size:
        clamp(42px, 5.4vw, 72px);

    line-height: 1.02;
    letter-spacing: -0.04em;
}

.hero-content h1 span {
    background:
        linear-gradient(
            90deg,
            #55c2ff,
            #8a86ff
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}

.hero-content > p {
    color: var(--home-muted);

    line-height: 1.75;
    font-size: 17px;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 12px;
    margin: 30px 0 18px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 46px;
    padding: 0 19px;

    border-radius: 11px;
    border: 1px solid transparent;

    text-decoration: none;
    font-weight: 800;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        opacity 0.2s ease;
}

.btn:hover {
    transform: translateY(-2px);
}

.btn:disabled {
    opacity: 0.65;
    cursor: wait;
    transform: none;
}

.btn-primary {
    color: #03101e;

    background:
        linear-gradient(
            135deg,
            #5fc7ff,
            #8e8aff
        );
}

.btn-secondary {
    color: #ffffff;

    border-color:
        var(--home-border);

    background:
        rgba(255, 255, 255, 0.04);
}

.hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;

    color: #b9cadc;
    font-size: 13px;
}

.sql-window {
    overflow: hidden;

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

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(22, 43, 72, 0.92),
            rgba(7, 18, 33, 0.96)
        );

    box-shadow:
        0 24px 70px
        rgba(0, 0, 0, 0.28);
}

.window-bar {
    height: 44px;
    padding: 0 17px;

    display: flex;
    align-items: center;
    gap: 7px;

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

.window-bar span {
    width: 9px;
    height: 9px;

    border-radius: 50%;
    background: #70849a;
}

.sql-window pre {
    min-height: 300px;

    margin: 0;
    padding: 32px;

    white-space: pre-wrap;

    font:
        15px/1.8
        "SFMono-Regular",
        Consolas,
        monospace;
}

.sql-window i {
    color: #647d99;
}

.sql-keyword {
    color: #6bc8ff;
}

.sql-string {
    color: #75dda9;
}

.sql-success {
    color: var(--home-green);
}


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

.stats-section {
    width: min(1100px, 90%);

    margin: 0 auto 70px;
    padding: 18px;

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

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

    border-radius: 18px;

    background:
        rgba(255, 255, 255, 0.025);
}

.stat-item {
    padding: 18px;
    text-align: center;
}

.stat-item strong {
    display: block;
    font-size: 28px;
}

.stat-item span {
    color: var(--home-muted);
    font-size: 13px;
}


/* ============================================================
   COMMON CONTENT
   ============================================================ */

.content-section {
    width: min(1180px, 90%);

    margin: auto;
    padding: 90px 0;
}

.section-alt {
    width: 100%;
    max-width: none;

    padding-left:
        max(
            5%,
            calc((100% - 1180px) / 2)
        );

    padding-right:
        max(
            5%,
            calc((100% - 1180px) / 2)
        );

    background:
        rgba(255, 255, 255, 0.018);

    border-block:
        1px solid
        rgba(255, 255, 255, 0.025);
}

.content-section h2,
.final-cta h2 {
    margin: 10px 0 14px;

    font-size:
        clamp(30px, 4vw, 48px);

    letter-spacing: -0.03em;
}

.section-intro {
    max-width: 800px;

    color: var(--home-muted);

    line-height: 1.75;
    font-size: 17px;
}


/* ============================================================
   LEARNING CARDS
   ============================================================ */

.learning-grid {
    display: grid;
    grid-template-columns:
        repeat(4, 1fr);

    gap: 16px;
    margin-top: 34px;
}

.learning-card {
    min-height: 265px;
    padding: 26px;

    color: inherit;
    text-decoration: none;

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

    border-radius: 18px;

    background:
        var(--home-panel);

    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        background 0.22s ease;
}

.learning-card:hover,
.practice-card:hover,
.database-card:hover {
    transform: translateY(-5px);

    border-color:
        rgba(100, 190, 255, 0.42);

    background:
        rgba(22, 46, 77, 0.88);
}

.card-icon,
.database-icon {
    font-size: 32px;
}

.learning-card h3 {
    margin: 20px 0 10px;
    font-size: 21px;
}

.learning-card p,
.practice-card p,
.database-card p {
    color: var(--home-muted);
    line-height: 1.65;
}

.learning-card strong,
.practice-card strong,
.database-card a {
    color: #72c3ff;
    font-size: 13px;
}


/* ============================================================
   PRACTICE / DATABASE / BENEFITS
   ============================================================ */

.practice-grid {
    display: grid;
    grid-template-columns:
        repeat(3, 1fr);

    gap: 16px;
    margin-top: 34px;
}

.practice-card {
    padding: 25px;

    display: flex;
    gap: 18px;

    color: inherit;
    text-decoration: none;

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

    border-radius: 18px;

    background:
        var(--home-panel);

    transition:
        0.22s ease;
}

.database-grid {
    display: grid;
    grid-template-columns:
        repeat(2, 1fr);

    gap: 16px;
    margin-top: 34px;
}

.database-card {
    padding: 30px;

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

    border-radius: 18px;

    background:
        var(--home-panel);

    transition:
        0.22s ease;
}

.database-card h3 {
    margin: 18px 0 10px;
    font-size: 27px;
}

.database-card a {
    text-decoration: none;
}

.benefit-grid {
    display: grid;
    grid-template-columns:
        repeat(2, 1fr);

    gap: 16px;
    margin-top: 34px;
}

.benefit-card {
    padding: 22px;

    display: flex;
    gap: 20px;

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

    border-radius: 18px;

    background:
        var(--home-panel);
}

.benefit-card > b {
    color: #62bfff;
}

.benefit-card h3 {
    margin: 0 0 6px;
}

.benefit-card p {
    margin: 0;

    color: var(--home-muted);

    line-height: 1.65;
}


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

.faq-list {
    max-width: 900px;

    display: grid;
    gap: 10px;

    margin-top: 30px;
}

.faq-list details {
    overflow: hidden;

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

    border-radius: 13px;

    background:
        rgba(255, 255, 255, 0.025);
}

.faq-list summary {
    padding: 20px;

    cursor: pointer;
    font-weight: 800;
}

.faq-list p {
    padding: 0 20px 20px;

    color: var(--home-muted);

    line-height: 1.7;
}


/* ============================================================
   FEEDBACK FORM
   ============================================================ */

.feedback-form {
    max-width: 900px;

    padding: 28px;

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

    border-radius: 20px;

    background:
        var(--home-panel);

    box-shadow:
        0 24px 70px
        rgba(0, 0, 0, 0.28);
}

.category-options {
    display: grid;
    grid-template-columns:
        repeat(3, 1fr);

    gap: 10px;
    margin-bottom: 20px;
}

.category-options label {
    position: relative;
    cursor: pointer;
}

.category-options input {
    position: absolute;
    opacity: 0;
}

.category-options span {
    display: block;

    padding: 14px;

    text-align: center;

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

    border-radius: 11px;

    transition:
        0.2s ease;
}

.category-options label:focus-within span {
    outline:
        2px solid
        rgba(100, 190, 255, 0.65);

    outline-offset: 2px;
}

.category-options input:checked + span {
    border-color:
        rgba(100, 190, 255, 0.6);

    background:
        rgba(53, 167, 255, 0.12);
}

.input-grid {
    display: grid;
    grid-template-columns:
        1fr 1fr;

    gap: 14px;
}

.feedback-form > label {
    display: grid;
    gap: 8px;

    color: #cbd8e7;

    font-size: 13px;
    font-weight: 700;

    margin-bottom: 18px;
}

.feedback-form input[type="text"],
.feedback-form input[type="email"],
.feedback-form textarea {
    width: 100%;

    border:
        1px solid
        rgba(145, 185, 225, 0.2);

    border-radius: 10px;

    padding: 13px 14px;

    color: #ffffff;

    background:
        rgba(0, 0, 0, 0.18);

    font: inherit;
}

.feedback-form textarea {
    resize: vertical;
    min-height: 130px;
}

.feedback-form input:focus,
.feedback-form textarea:focus {
    outline:
        2px solid
        rgba(100, 190, 255, 0.45);

    outline-offset: 1px;
}

.form-submit-row {
    display: flex;
    align-items: center;

    gap: 15px;
}

#feedbackStatus {
    color: var(--home-green);
    font-size: 13px;
}


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

.final-cta {
    width: min(1180px, 90%);

    margin:
        0 auto 90px;

    padding: 58px 40px;

    text-align: center;

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

    border-radius: 24px;

    background:
        linear-gradient(
            135deg,
            rgba(53, 167, 255, 0.11),
            rgba(119, 115, 255, 0.09)
        );
}

.final-cta p {
    max-width: 700px;
    margin: 0 auto;

    color: var(--home-muted);
    line-height: 1.7;
}


/* ============================================================
   FOOTER — MATCHES LOCKED PLAYGROUND FOOTER
   ============================================================ */

.challenge-site-footer {
    width: 100%;
    box-sizing: border-box;
    margin-top: 40px;
    padding: 32px 5vw 28px;
    background: #07111f;
    border-top: 1px solid rgba(120, 170, 230, 0.18);
}

.challenge-footer-inner {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    align-items: start;
    gap: 36px;
}

.challenge-footer-brand a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #edf5ff;
    text-decoration: none;
}

.challenge-footer-brand-mark {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: linear-gradient(135deg, #35a7ff, #7773ff);
    color: #04101e;
    font-size: 13px;
    font-weight: 900;
    box-shadow: 0 8px 22px rgba(53, 167, 255, 0.18);
}

.challenge-footer-brand strong {
    display: block;
    color: #ffffff;
    font-size: 16px;
    line-height: 1.2;
}

.challenge-footer-brand small {
    display: block;
    margin: 6px 0;
    color: #9eb1c8;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px;
    line-height: 1.4;
}

.challenge-footer-links {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 10px 22px;
    text-align: center;
}

.challenge-footer-links a {
    color: #cbd5e1;
    text-decoration: none;
    font-size: 14px;
    transition: color .2s ease, transform .2s ease;
}

.challenge-footer-links a:hover,
.challenge-footer-links a[aria-current="page"] {
    color: #ffffff;
    transform: translateX(2px);
}

.challenge-footer-copy {
    color: #9eb1c8;
    font-size: 13px;
    line-height: 1.6;
}

.challenge-footer-copy p {
    margin: 0 0 8px;
}

@media (max-width: 760px) {
    .challenge-site-footer {
        margin-top: 32px;
        padding: 28px 18px 24px;
    }

    .challenge-footer-inner {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .challenge-footer-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px 18px;
    }

    .challenge-footer-copy {
        padding-top: 4px;
    }
}

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

@media (max-width: 1000px) {

    .main-navigation {
        gap: 12px;
    }

    .hero-section {
        grid-template-columns: 1fr;
    }

    .learning-grid,
    .practice-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

}


@media (max-width: 800px) {

    /* Keep the mobile brand anchored to the left and the menu button to the right. */
    .site-header {
        justify-content:flex-start;
    }

    .site-header .brand {
        margin-right:auto;
    }

    .main-navigation {
        display: none;

        position: absolute;

        left: 5%;
        right: 5%;
        top: 66px;

        padding: 16px;

        flex-direction: column;
        align-items: stretch;

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

        border-radius: 14px;

        background:
            #0b1829;

        box-shadow:
            0 20px 60px
            rgba(0, 0, 0, 0.35);
    }

    .main-navigation.open {
        display: flex;
    }

    .mobile-menu-button {
        display: block;
    }

    .stats-section {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .database-grid,
    .benefit-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 620px) {

    .hero-section,
    .content-section,
    .final-cta {
        width: 92%;
    }

    .hero-section {
        padding-top: 60px;
    }

    .hero-content h1 {
        font-size: 42px;
    }

    .learning-grid,
    .practice-grid,
    .stats-section,
    .input-grid,
    .category-options {
        grid-template-columns: 1fr;
    }

    .final-cta {
        padding:
            45px 22px;
    }

    .site-footer {
        grid-template-columns: 1fr;
    }

    .site-footer nav {
        justify-content: flex-start;
    }

    .form-submit-row {
        align-items: flex-start;
        flex-direction: column;
    }

}


/* ============================================================
   HOMEPAGE V2 VISUAL ENHANCEMENTS
   Only homepage presentation/interaction is changed here.
   SQL demo is browser-only; it never calls the SQL API.
   ============================================================ */

.sql-demo-editor { padding: 0 0 20px; }
.sql-demo-topline { display:flex; justify-content:space-between; gap:16px; padding:14px 18px; border-bottom:1px solid var(--home-border); color:#8fa7bf; font-size:12px; font-family:monospace; }
.sql-demo-status { color:#68d6a1; }
.sql-demo-code { min-height:125px !important; padding:24px 28px 10px !important; margin:0 !important; }
.sql-cursor { display:inline-block; width:7px; height:19px; margin-left:2px; vertical-align:-3px; background:#62bfff; animation:sqlBlink .85s steps(1) infinite; }
.sql-demo-action { display:flex; align-items:center; gap:9px; margin:0 28px; padding:9px 12px; border:1px solid rgba(85,217,155,.16); border-radius:9px; color:#9fb4c9; background:rgba(85,217,155,.045); font-size:12px; }
.sql-demo-play { color:#55d99b; }
.sql-demo-results { margin:16px 28px 0; opacity:0; transform:translateY(12px); max-height:0; overflow:hidden; transition:opacity .45s ease, transform .45s ease, max-height .55s ease; }
.sql-demo-results.is-visible { opacity:1; transform:translateY(0); max-height:240px; }
.sql-result-heading { display:flex; justify-content:space-between; margin-bottom:8px; font-size:12px; font-weight:800; color:#b9cadc; }
.sql-result-table-wrap { overflow:auto; border:1px solid var(--home-border); border-radius:9px; }
.sql-result-table-wrap table { width:100%; border-collapse:collapse; font:12px/1.5 monospace; }
.sql-result-table-wrap th,.sql-result-table-wrap td { padding:8px 10px; text-align:left; border-bottom:1px solid rgba(120,170,230,.1); }
.sql-result-table-wrap th { color:#75caff; background:rgba(53,167,255,.06); }

.benefit-card { position:relative; transition:transform .45s ease, border-color .45s ease, background .45s ease, box-shadow .45s ease; }
.benefit-card::after { content:""; position:absolute; left:0; top:14px; bottom:14px; width:3px; border-radius:3px; background:transparent; transition:background .45s ease; }
.benefit-card.is-active { transform:translateY(-4px); border-color:rgba(98,191,255,.55); background:linear-gradient(135deg, rgba(53,167,255,.09), var(--home-panel)); box-shadow:0 18px 40px rgba(0,0,0,.16); }
.benefit-card.is-active::after { background:#62bfff; }

.faq-more-wrap { display:flex; justify-content:center; margin-top:18px; }
.faq-more-button { display:inline-flex; align-items:center; gap:12px; padding:11px 18px; border:1px solid var(--home-border); border-radius:999px; color:var(--home-text); background:rgba(255,255,255,.035); cursor:pointer; font:inherit; font-weight:800; transition:transform .25s ease, background .25s ease, border-color .25s ease; }
.faq-more-button:hover { transform:translateY(-2px); background:rgba(53,167,255,.08); border-color:rgba(98,191,255,.45); }
.faq-more-button span:last-child { transition:transform .3s ease; }
.faq-more-button[aria-expanded="true"] span:last-child { transform:rotate(180deg); }
.faq-more-content { display:grid; gap:10px; margin-top:10px; animation:faqReveal .4s ease both; }
/* The HTML hidden attribute must always win over the grid display rule. */
.faq-more-content[hidden] { display:none !important; }

.learning-journey { display:flex; align-items:stretch; justify-content:center; gap:10px; margin:32px auto 4px; max-width:1050px; }
.journey-step { flex:1; min-width:0; display:flex; align-items:center; gap:12px; padding:17px; text-align:left; text-decoration:none; color:var(--home-text); border:1px solid var(--home-border); border-radius:15px; background:rgba(255,255,255,.035); transition:transform .3s ease, border-color .3s ease, background .3s ease, box-shadow .3s ease; }
.journey-step:hover { transform:translateY(-5px); border-color:rgba(98,191,255,.5); background:rgba(53,167,255,.07); box-shadow:0 15px 32px rgba(0,0,0,.16); }
.journey-number { flex:0 0 34px; width:34px; height:34px; display:grid; place-items:center; border-radius:10px; color:#081525; background:linear-gradient(135deg,#62bfff,#8a86ff); font-size:11px; font-weight:900; }
.journey-step b,.journey-step small { display:block; }
.journey-step small { margin-top:4px; color:var(--home-muted); font-size:11px; }
.journey-arrow { align-self:center; color:#62bfff; font-size:22px; animation:journeyPulse 1.7s ease-in-out infinite; }
.journey-arrow:nth-of-type(2) { animation-delay:.25s; }
.journey-arrow:nth-of-type(3) { animation-delay:.5s; }

@keyframes sqlBlink { 50% { opacity:0; } }
@keyframes faqReveal { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
@keyframes journeyPulse { 0%,100% { opacity:.35; transform:translateX(0); } 50% { opacity:1; transform:translateX(4px); } }

@media (max-width:760px) {
    .learning-journey { flex-direction:column; gap:7px; }
    .journey-step { width:100%; }
    .journey-arrow { transform:rotate(90deg); margin:-2px auto; }
    .sql-demo-code { padding:20px 18px 8px !important; }
    .sql-demo-action,.sql-demo-results { margin-left:18px; margin-right:18px; }
}

@media (prefers-reduced-motion:reduce) {
    .sql-cursor,.journey-arrow { animation:none; }
    .benefit-card,.journey-step,.sql-demo-results { transition:none; }
}

/* ============================================================
   PLAYGROUND HEADER BRAND — EXACT HOME MATCH
   ------------------------------------------------------------
   Uses the same dimensions, typography, gradient, brightness,
   spacing and mobile scale as the locked Playground header.
   Only the Home header logo is affected by this block.
   Existing homepage layout, navigation and animation are untouched.
   ============================================================ */
.home-platform-header .home-platform-brand {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    color: #edf5ff !important;
    text-decoration: none !important;
    border-radius: 14px;
    line-height: 1;
    white-space: nowrap;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.home-platform-header .home-platform-brand:hover {
    transform: translateY(-1px);
    opacity: 0.96;
}

.home-platform-header .home-platform-brand:focus-visible {
    outline: 2px solid #55c2ff;
    outline-offset: 4px;
}

.home-platform-header .home-platform-brand-mark {
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px;
    display: grid !important;
    place-items: center;
    margin: 0;
    padding: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, #35a7ff, #7773ff) !important;
    color: #04101e !important;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: 0;
    text-decoration: none !important;
    box-shadow: 0 8px 22px rgba(53, 167, 255, 0.18);
}

.home-platform-header .home-platform-brand-text {
    display: block;
    margin: 0;
    padding: 0;
    line-height: 1.1;
}

.home-platform-header .home-platform-brand-text strong {
    display: block;
    margin: 0;
    padding: 0;
    color: #edf5ff !important;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em;
    line-height: 1.1;
    text-decoration: none !important;
}

.home-platform-header .home-platform-brand-text small {
    display: block;
    margin: 4px 0 0;
    padding: 0;
    color: #9eb1c8 !important;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none !important;
}

/* Playground uses the larger 48px brand mark in mobile mode. */
@media (max-width: 760px) {
    .home-platform-header .home-platform-brand-mark {
        width: 48px !important;
        height: 48px !important;
        flex-basis: 48px !important;
    }

    .home-platform-header .home-platform-brand-text strong {
        font-size: 16px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-platform-header .home-platform-brand {
        transition: none;
    }
}

/* ============================================================
   HOME HEADER LOGO — EXACT TUTORIAL BRAND MATCH
   ------------------------------------------------------------
   This block changes ONLY the Home header logo typography and
   dimensions to the same values used by the locked Tutorial logo.
   Existing Home layout, hamburger, navigation, footer and all
   other sections remain untouched.
   ============================================================ */
.home-platform-header .tutorial-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    min-width: 0;
    color: #edf5ff;
    text-decoration: none;
    border-radius: 14px;
}

.home-platform-header .tutorial-brand-mark {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: linear-gradient(135deg, #35a7ff, #7773ff);
    color: #04101e;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 8px 22px rgba(53, 167, 255, 0.18);
}

.home-platform-header .tutorial-brand-text {
    display: block;
    min-width: 0;
    line-height: 1.1;
}

.home-platform-header .tutorial-brand-text strong {
    display: block;
    color: #edf5ff;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.home-platform-header .tutorial-brand-text small {
    display: block;
    margin-top: 4px;
    color: #9eb1c8;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

@media (max-width: 760px) {
    .home-platform-header .tutorial-brand-mark {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
    }

    .home-platform-header .tutorial-brand-text strong {
        font-size: 16px;
    }
}

/* ============================================================
   PLAYGROUND FOOTER COPY — EXPLICIT TWO-LINE STACK
   ------------------------------------------------------------
   The Home footer already uses the locked Playground footer
   structure. These two declarations only guarantee that the
   copyright line and the "Built for SQL..." line stay directly
   one below the other.
   ============================================================ */
.home-page .challenge-footer-copy {
    display: block;
}

.home-page .challenge-footer-copy p {
    display: block;
    margin: 0 0 8px;
}

/* ============================================================
   LOCKED HOME HEADER — TUTORIAL LOGO + MOBILE HAMBURGER ONLY
   ------------------------------------------------------------
   No footer, hero, animation, navigation content, or other
   homepage styling is changed by this block.
   ============================================================ */

/* Exact Tutorial header logo branding. */
.home-page .home-platform-header .tutorial-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: #edf5ff;
    text-decoration: none;
}

.home-page .home-platform-header .tutorial-brand-mark {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: linear-gradient(135deg, #35a7ff, #7773ff);
    color: #04101e;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
}

.home-page .home-platform-header .tutorial-brand-text {
    min-width: 0;
}

.home-page .home-platform-header .tutorial-brand-text strong {
    display: block;
    color: #edf5ff;
    font-size: 16px;
    line-height: 1.1;
    font-weight: 800;
    white-space: nowrap;
}

.home-page .home-platform-header .tutorial-brand-text small {
    display: block;
    margin-top: 3px;
    color: #9eb1c8;
    font-size: 10px;
    line-height: 1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Exact Tutorial mobile arrangement: hamburger LEFT of logo. */
@media (max-width: 760px) {
    .home-page .home-platform-header {
        min-height: 64px;
        height: auto;
        padding: 10px 12px;
        display: grid;
        grid-template-columns: 44px minmax(0, max-content) 1fr;
        grid-template-rows: 44px;
        align-items: center;
        justify-content: start;
        gap: 10px;
        flex-wrap: nowrap;
        box-sizing: border-box;
    }

    .home-page .home-platform-header .home-mobile-menu-toggle {
        grid-column: 1;
        grid-row: 1;
        position: static !important;
        width: 44px;
        height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        margin: 0;
        border: 1px solid #334155;
        border-radius: 12px;
        background: #0f1b2e;
        color: #e2e8f0;
        font-size: 24px;
        line-height: 1;
        cursor: pointer;
        z-index: 2003;
        -webkit-tap-highlight-color: transparent;
    }

    .home-page .home-platform-header .home-platform-brand {
        grid-column: 2 / 4;
        grid-row: 1;
        width: max-content;
        max-width: 100%;
        margin: 0;
        justify-self: start;
        align-self: center;
        position: static;
        left: auto;
    }

    /* Exact Tutorial mobile logo dimensions. */
    .home-page .home-platform-header .tutorial-brand-mark {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
    }

    .home-page .home-platform-header .tutorial-brand-text strong {
        font-size: 16px;
    }
}

/* Exact Tutorial narrow-mobile values. */
@media (max-width: 420px) {
    .home-page .home-platform-header {
        grid-template-columns: 40px minmax(0, max-content) 1fr;
        gap: 10px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .home-page .home-platform-header .home-mobile-menu-toggle {
        width: 40px;
        height: 40px;
    }

    .home-page .home-platform-header .tutorial-brand-mark {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }

    .home-page .home-platform-header .tutorial-brand-text strong {
        font-size: 15px;
    }

    .home-page .home-platform-header .tutorial-brand-text small {
        font-size: 10px;
    }
}


/* LOGO-ONLY FINAL OVERRIDE — copied from the locked Tutorial brand values.
   IMPORTANT: This block intentionally targets ONLY the Home header logo.
   Hamburger, navigation, footer, hero and all other homepage styles are untouched. */
.home-page .home-platform-header .tutorial-brand {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
    color: #edf5ff !important;
    text-decoration: none !important;
}

.home-page .home-platform-header .tutorial-brand-mark {
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #35a7ff, #7773ff) !important;
    color: #04101e !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    box-shadow: 0 8px 22px rgba(53, 167, 255, 0.18) !important;
}

.home-page .home-platform-header .tutorial-brand-text {
    display: block !important;
    min-width: 0 !important;
    line-height: 1.1 !important;
}

.home-page .home-platform-header .tutorial-brand-text strong {
    display: block !important;
    color: #edf5ff !important;
    font-size: 16px !important;
    line-height: 1.1 !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
    white-space: nowrap !important;
}

.home-page .home-platform-header .tutorial-brand-text small {
    display: block !important;
    margin-top: 4px !important;
    color: #9eb1c8 !important;
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
}

@media (max-width: 760px) {
    .home-page .home-platform-header .tutorial-brand-mark {
        width: 48px !important;
        height: 48px !important;
        flex-basis: 48px !important;
    }

    .home-page .home-platform-header .tutorial-brand-text strong {
        font-size: 16px !important;
    }
}

@media (max-width: 420px) {
    .home-page .home-platform-header .tutorial-brand-mark {
        width: 40px !important;
        height: 40px !important;
        flex-basis: 40px !important;
    }

    .home-page .home-platform-header .tutorial-brand-text strong {
        font-size: 15px !important;
    }

    .home-page .home-platform-header .tutorial-brand-text small {
        font-size: 10px !important;
    }
}


/* ================================================================
   HOME — FINAL MOBILE HEADER ONLY
   ----------------------------------------------------------------
   Purpose:
   1. Keep the existing Home hamburger LEFT of the logo.
   2. Keep the header sticky while scrolling.
   3. Keep the existing JavaScript `.open` menu logic.
   4. Make the opened mobile navbar full viewport width.
   5. Do NOT alter footer, page content, logo styling, or navigation text.
   ================================================================= */
@media (max-width: 760px) {

    .home-page .home-platform-header {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 10000 !important;

        /* Preserve the existing left-side hamburger + logo arrangement. */
        display: grid !important;
        grid-template-columns: 44px minmax(0, max-content) 1fr !important;
        grid-template-rows: 64px !important;
        align-items: center !important;
        justify-content: start !important;

        height: 64px !important;
        min-height: 64px !important;
        padding: 0 12px !important;
        gap: 10px !important;

        box-sizing: border-box !important;
        overflow: visible !important;
        isolation: isolate !important;
    }

    .home-page .home-platform-header .home-mobile-menu-toggle {
        grid-column: 1 !important;
        grid-row: 1 !important;

        position: relative !important;
        left: auto !important;
        top: auto !important;

        width: 44px !important;
        height: 44px !important;
        margin: 0 !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        z-index: 10002 !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
    }

    .home-page .home-platform-header .home-platform-brand {
        grid-column: 2 / 4 !important;
        grid-row: 1 !important;

        width: max-content !important;
        max-width: 100% !important;
        margin: 0 !important;

        justify-self: start !important;
        align-self: center !important;

        position: static !important;
        transform: none !important;
    }

    /*
     * The menu is removed from normal document flow when opened.
     * Therefore opening it cannot push the page or footer downward.
     * `open` is the class already toggled by the existing home.js.
     */
    .home-page .home-platform-header .home-platform-navigation {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;

        width: 100vw !important;
        max-width: 100vw !important;
        margin: 0 !important;

        box-sizing: border-box !important;
        z-index: 10001 !important;

        display: none !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;

        padding: 10px 24px 14px !important;
        gap: 0 !important;

        border: 1px solid var(--home-border) !important;
        border-top: 0 !important;
        border-radius: 0 0 14px 14px !important;

        background: #0b1829 !important;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35) !important;

        pointer-events: auto !important;
    }

    .home-page .home-platform-header .home-platform-navigation.open {
        display: flex !important;
    }

    .home-page .home-platform-header .home-platform-navigation a {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;

        padding: 12px 10px !important;
        border-radius: 8px !important;
    }
}

/* Narrow phones: preserve the same left hamburger + logo alignment. */
@media (max-width: 420px) {
    .home-page .home-platform-header {
        grid-template-columns: 40px minmax(0, max-content) 1fr !important;
        grid-template-rows: 60px !important;
        height: 60px !important;
        min-height: 60px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        gap: 10px !important;
    }

    .home-page .home-platform-header .home-mobile-menu-toggle {
        width: 40px !important;
        height: 40px !important;
    }
}


/* ============================================================
   LOCKED SANDBOX-STYLE FOOTER — FOOTER ONLY
   ------------------------------------------------------------
   IMPORTANT:
   This patch changes ONLY the footer presentation.
   Existing Home/Playground HTML, JavaScript, page layout,
   editor, results, navigation and all other features remain
   untouched.
   ============================================================ */

@media (min-width: 761px) {

    .challenge-site-footer .challenge-footer-inner {
        grid-template-columns:
            minmax(220px, 1.15fr)
            minmax(320px, 1.7fr)
            minmax(220px, 0.95fr);
        align-items: start;
        gap: 28px;
    }

    .challenge-site-footer .challenge-footer-links {
        flex-wrap: wrap;
        justify-content: center;
        align-content: flex-start;
        row-gap: 10px;
        column-gap: 20px;
        min-width: 0;
        line-height: 1.4;
        white-space: normal;
    }

    .challenge-site-footer .challenge-footer-links a {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .challenge-site-footer .challenge-footer-copy {
        min-width: 0;
        text-align: right;
    }
}

@media (max-width: 900px) and (min-width: 761px) {

    .challenge-site-footer .challenge-footer-inner {
        grid-template-columns:
            minmax(190px, 1fr)
            minmax(280px, 1.4fr)
            minmax(190px, 0.9fr);
        gap: 22px;
    }

    .challenge-site-footer .challenge-footer-links {
        column-gap: 16px;
    }
}

@media (max-width: 760px) {

    .challenge-site-footer .challenge-footer-inner {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .challenge-site-footer .challenge-footer-links {
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        align-content: center;
        gap: 10px 18px;
        overflow: visible;
        white-space: normal;
        text-align: center;
    }

    .challenge-site-footer .challenge-footer-links a {
        flex: 0 0 auto;
        white-space: normal;
    }

    .challenge-site-footer .challenge-footer-copy {
        min-width: 0;
        padding-top: 4px;
        text-align: center;
    }
}