* {
    box-sizing:border-box;
}

:root {
    --navy:#10283d;
    --blue:#1769aa;
    --blue2:#2185d0;
    --red:#b52d34;
    --cream:#f5f1e8;
    --paper:#ffffff;
    --ink:#17242d;
    --muted:#61717c;
    --line:#d8e0e5;
    --green:#287a4b;
}

html {
    min-height:100%;
}

body {
    margin:0;
    min-height:100vh;
    font-family:Arial,Helvetica,sans-serif;
    color:var(--ink);
    background:
        linear-gradient(rgba(245,241,232,.94),rgba(245,241,232,.94)),
        repeating-linear-gradient(
            0deg,
            #e9e2d4 0px,
            #e9e2d4 1px,
            #f5f1e8 1px,
            #f5f1e8 4px
        );
}

.site-header {
    background:var(--navy);
    border-bottom:5px solid var(--red);
    padding:16px 24px;
    box-shadow:0 3px 12px rgba(0,0,0,.18);
}

.brand {
    max-width:1180px;
    margin:auto;
    display:flex;
    align-items:center;
    gap:13px;
    color:white;
}

.brand-mark {
    width:52px;
    height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:white;
    color:var(--navy);
    font-weight:900;
    font-size:22px;
    border-radius:5px;
    border:3px solid #d8e1e8;
}

.brand-name {
    font-size:25px;
    font-weight:900;
    letter-spacing:2px;
}

.brand-sub {
    font-size:12px;
    color:#c8d6df;
    letter-spacing:.5px;
    margin-top:2px;
}

main {
    width:min(1180px,calc(100% - 32px));
    margin:auto;
}

.screen {
    display:none;
}

.screen.active {
    display:block;
}

.hero {
    text-align:center;
    padding:65px 20px 42px;
}

.eyebrow,
.license,
.question-category {
    color:var(--red);
    font-weight:900;
    letter-spacing:1.8px;
    font-size:12px;
}

.hero h1 {
    font-size:clamp(38px,6vw,68px);
    line-height:1.02;
    margin:12px 0 20px;
    color:var(--navy);
    letter-spacing:-2px;
}

.hero h1 span {
    color:var(--blue);
}

.hero-copy {
    max-width:720px;
    margin:0 auto;
    font-size:18px;
    line-height:1.6;
    color:#4e606c;
}

.badges {
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:10px;
    margin-top:28px;
}

.badges span {
    background:#e3ebef;
    border:1px solid #c6d4dc;
    color:var(--navy);
    padding:9px 13px;
    border-radius:4px;
    font-size:12px;
    font-weight:800;
}

.section-title {
    text-align:center;
    margin:20px 0 25px;
}

.section-title h2 {
    color:var(--navy);
    font-size:30px;
    margin:0 0 6px;
}

.section-title p {
    margin:0;
    color:var(--muted);
}

.test-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

.test-card {
    appearance:none;
    text-align:left;
    border:1px solid #cdd7dd;
    border-top:5px solid var(--blue);
    border-radius:7px;
    padding:27px;
    background:rgba(255,255,255,.95);
    box-shadow:0 8px 22px rgba(16,40,61,.09);
    cursor:pointer;
    transition:.18s ease;
    color:var(--ink);
}

.test-card:hover {
    transform:translateY(-4px);
    box-shadow:0 13px 28px rgba(16,40,61,.16);
    border-top-color:var(--red);
}

.vehicle-icon {
    font-size:38px;
    margin-bottom:16px;
}

.test-card h3 {
    color:var(--navy);
    margin:6px 0 10px;
    font-size:22px;
}

.test-card p {
    min-height:76px;
    color:var(--muted);
    line-height:1.5;
    font-size:14px;
}

.card-bottom {
    border-top:1px solid var(--line);
    margin-top:20px;
    padding-top:18px;
    display:flex;
    justify-content:space-between;
    color:var(--blue);
    font-weight:900;
    font-size:13px;
}

.how-it-works {
    margin:60px 0;
    text-align:center;
}

.how-it-works > h2 {
    color:var(--navy);
    font-size:30px;
}

.steps {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    margin-top:28px;
}

.steps span {
    width:42px;
    height:42px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--navy);
    color:white;
    margin:0 auto 13px;
    font-weight:900;
}

.steps h3 {
    color:var(--navy);
    margin:5px 0;
}

.steps p {
    color:var(--muted);
    line-height:1.5;
    font-size:14px;
}

.panel {
    max-width:780px;
    margin:45px auto;
    background:rgba(255,255,255,.97);
    border:1px solid #ccd6dc;
    border-radius:8px;
    padding:42px;
    box-shadow:0 10px 35px rgba(16,40,61,.13);
}

.intro-panel {
    text-align:center;
}

.intro-panel h1 {
    color:var(--navy);
    font-size:36px;
    margin:8px 0 10px;
}

.intro-panel > p {
    color:var(--muted);
    font-size:17px;
}

.test-facts,
.result-stats {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
    margin:30px 0;
}

.test-facts div,
.result-stats div {
    background:#edf2f5;
    padding:18px 10px;
    border-radius:5px;
}

.test-facts strong,
.result-stats strong {
    display:block;
    color:var(--navy);
    font-size:25px;
}

.test-facts span,
.result-stats span {
    color:var(--muted);
    font-size:12px;
    text-transform:uppercase;
    font-weight:800;
}

.notice {
    text-align:left;
    background:#fff9e8;
    border-left:4px solid #d39b28;
    padding:17px 19px;
    margin:25px 0;
    color:#5f512c;
}

.notice p {
    margin:5px 0 0;
    line-height:1.5;
    font-size:14px;
}

.primary,
.secondary {
    width:100%;
    border:0;
    border-radius:5px;
    padding:16px 20px;
    font-size:14px;
    font-weight:900;
    letter-spacing:.5px;
    cursor:pointer;
}

.primary {
    background:var(--blue);
    color:white;
}

.primary:hover {
    background:#125b95;
}

.secondary {
    background:#e8eef1;
    color:var(--navy);
    margin-top:10px;
}

.back {
    border:0;
    background:none;
    color:var(--blue);
    font-weight:800;
    cursor:pointer;
    margin-top:28px;
}

.test-top {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:35px;
    color:var(--navy);
    font-size:13px;
    font-weight:900;
}

.timer {
    background:var(--navy);
    color:#c9d6df;
    padding:10px 15px;
    border-radius:4px;
}

.timer strong {
    color:white;
    margin-left:5px;
}

.progress-wrap {
    margin-top:18px;
}

.progress-info {
    display:flex;
    justify-content:space-between;
    color:var(--muted);
    font-size:12px;
    margin-bottom:7px;
}

.progress-bar {
    height:8px;
    background:#d8e1e6;
    border-radius:10px;
    overflow:hidden;
}

#progressFill {
    height:100%;
    width:0;
    background:var(--blue);
    transition:width .25s ease;
}

.question-panel {
    margin-top:24px;
}

.question-panel h2 {
    color:var(--navy);
    line-height:1.35;
    font-size:26px;
    margin:10px 0 25px;
}

.answers {
    display:grid;
    gap:11px;
}

.answer {
    width:100%;
    border:2px solid #d7e0e5;
    background:white;
    border-radius:6px;
    padding:15px 17px;
    text-align:left;
    cursor:pointer;
    font-size:15px;
    color:var(--ink);
}

.answer:hover:not(:disabled) {
    border-color:var(--blue);
    background:#f3f8fb;
}

.answer.correct {
    border-color:#2d8a55;
    background:#e8f6ed;
}

.answer.wrong {
    border-color:#b9363d;
    background:#fae9ea;
}

.answer:disabled {
    cursor:default;
}

.explanation {
    margin:20px 0;
    padding:17px;
    background:#edf3f6;
    border-left:4px solid var(--blue);
    line-height:1.55;
}

.hidden {
    display:none !important;
}

.results-panel {
    text-align:center;
}

.result-status {
    display:inline-block;
    background:var(--green);
    color:white;
    padding:7px 18px;
    border-radius:20px;
    font-weight:900;
    letter-spacing:1px;
}

.results-panel h1 {
    color:var(--navy);
}

.score-circle {
    width:180px;
    height:180px;
    border:12px solid var(--blue);
    border-radius:50%;
    margin:25px auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

.score-circle strong {
    color:var(--navy);
    font-size:44px;
}

.score-circle span {
    color:var(--muted);
}

.weak-areas {
    text-align:left;
    margin:25px 0;
}

footer {
    margin-top:60px;
    padding:30px 20px;
    text-align:center;
    background:var(--navy);
    color:#aebdca;
    line-height:1.6;
    font-size:12px;
}

footer strong {
    color:white;
}

@media(max-width:800px) {
    .test-grid,
    .steps {
        grid-template-columns:1fr;
    }

    .test-card p {
        min-height:auto;
    }

    .hero {
        padding-top:40px;
    }

    .hero h1 {
        letter-spacing:-1px;
    }

    .panel {
        padding:25px 18px;
    }
}

@media(max-width:500px) {
    main {
        width:min(100% - 20px,1180px);
    }

    .site-header {
        padding:12px;
    }

    .brand-sub {
        font-size:10px;
    }

    .test-facts,
    .result-stats {
        gap:5px;
    }

    .test-facts strong,
    .result-stats strong {
        font-size:20px;
    }

    .question-panel h2 {
        font-size:21px;
    }
}

/* ===== FORCE ASPHALT WALLPAPER — NO WHITE WASH ===== */

html {
    min-height:100% !important;
    background:#34332d url("/dpswp.png") center center / cover fixed no-repeat !important;
}

body {
    min-height:100vh !important;
    background:transparent !important;
}

/* All main page areas expose the asphalt */
main,
.screen,
#homeScreen,
#introScreen,
#testScreen,
#resultsScreen,
.hero,
.section-title,
.how-it-works,
.steps {
    background:transparent !important;
}

/* Readable content cards */
.test-card,
.panel {
    background:rgba(20,27,31,.94) !important;
    color:#edf2f4 !important;
    border-color:rgba(255,255,255,.16) !important;
}

.test-card h3,
.panel h1,
.panel h2,
.question-panel h2,
.section-title h2,
.how-it-works h2,
.steps h3 {
    color:#ffffff !important;
}

.hero h1 {
    color:#ffffff !important;
    text-shadow:0 2px 8px rgba(0,0,0,.75);
}

.hero h1 span {
    color:#68b9ef !important;
}

.hero-copy,
.section-title p,
.test-card p,
.steps p {
    color:#e0e6e9 !important;
    text-shadow:0 1px 3px rgba(0,0,0,.8);
}

.how-it-works {
    padding:25px;
    border-radius:8px;
    background:rgba(16,40,61,.82) !important;
}

@media(max-width:800px) {
    html {
        background-attachment:scroll !important;
    }
}

/* =========================================================
   ASPHALT READABILITY PASS
   Keep the road visible while making ALL copy easy to read
   ========================================================= */

/* Hero gets a subtle localized dark backing — not a page overlay */
.hero {
    position:relative;
    max-width:1000px;
    margin:0 auto;
    padding:58px 35px 48px !important;
    border-radius:0 0 18px 18px;
    background:
        radial-gradient(
            ellipse at center,
            rgba(0,0,0,.55) 0%,
            rgba(0,0,0,.32) 55%,
            rgba(0,0,0,0) 78%
        ) !important;
}

/* Main headline */
.hero h1 {
    color:#ffffff !important;
    font-weight:900 !important;
    text-shadow:
        0 3px 3px rgba(0,0,0,1),
        0 0 12px rgba(0,0,0,.95),
        0 0 24px rgba(0,0,0,.65) !important;
}

.hero h1 span {
    color:#70c8ff !important;
    text-shadow:
        0 3px 3px rgba(0,0,0,1),
        0 0 12px rgba(0,0,0,.95) !important;
}

/* Tiny red heading was disappearing into the asphalt */
.eyebrow {
    display:inline-block;
    color:#ff5961 !important;
    background:rgba(0,0,0,.72) !important;
    padding:7px 13px;
    border-radius:4px;
    font-size:13px !important;
    font-weight:900 !important;
    letter-spacing:2px !important;
    text-shadow:0 1px 2px #000 !important;
}

/* Hero description */
.hero-copy {
    color:#ffffff !important;
    font-size:18px !important;
    font-weight:600 !important;
    line-height:1.6 !important;
    text-shadow:
        0 2px 3px #000,
        0 0 8px #000 !important;
}

/* Free/account/results badges */
.badges span {
    background:rgba(245,249,251,.96) !important;
    color:#10283d !important;
    border:1px solid rgba(255,255,255,.9) !important;
    box-shadow:0 3px 9px rgba(0,0,0,.5);
    font-weight:900 !important;
}

/* "Choose Your Practice Test" area */
.section-title {
    width:max-content;
    max-width:95%;
    margin:16px auto 25px !important;
    padding:13px 28px !important;
    border-radius:8px;
    background:rgba(9,17,22,.72) !important;
    box-shadow:0 4px 16px rgba(0,0,0,.25);
}

.section-title h2 {
    color:#ffffff !important;
    font-weight:900 !important;
    text-shadow:0 2px 3px #000 !important;
}

.section-title p {
    color:#f3f6f7 !important;
    font-weight:600 !important;
    text-shadow:0 1px 2px #000 !important;
}

/* Test selection cards */
.test-card {
    background:rgba(17,25,30,.96) !important;
    border:1px solid rgba(255,255,255,.26) !important;
    border-top:5px solid #2997db !important;
    box-shadow:
        0 10px 28px rgba(0,0,0,.55),
        inset 0 1px 0 rgba(255,255,255,.05) !important;
}

.test-card:hover {
    border-top-color:#e9434d !important;
    background:rgba(20,30,36,.98) !important;
}

.test-card h3 {
    color:#ffffff !important;
    font-weight:900 !important;
}

.test-card p {
    color:#e9eef1 !important;
    font-size:15px !important;
    font-weight:500 !important;
    line-height:1.55 !important;
}

.test-card .license {
    color:#ff4d57 !important;
    font-weight:900 !important;
    text-shadow:0 1px 2px #000;
}

.card-bottom {
    border-top-color:rgba(255,255,255,.35) !important;
    color:#36aef5 !important;
}

.card-bottom span,
.card-bottom b {
    color:#36aef5 !important;
    font-weight:900 !important;
}

/* Lower "Practice. Learn. Pass." section */
.how-it-works {
    background:rgba(9,19,25,.88) !important;
    border:1px solid rgba(255,255,255,.16);
    box-shadow:0 10px 30px rgba(0,0,0,.45);
}

.how-it-works > h2,
.steps h3 {
    color:#ffffff !important;
    text-shadow:0 2px 3px #000;
}

.steps p {
    color:#e6ecef !important;
    text-shadow:none !important;
}

/* Intro/test/results panels */
.panel {
    background:rgba(15,23,28,.97) !important;
    border:1px solid rgba(255,255,255,.22) !important;
    box-shadow:0 12px 35px rgba(0,0,0,.58) !important;
}

.panel,
.panel p,
.question-panel,
.question-panel p {
    color:#e9eef1 !important;
}

.panel h1,
.panel h2,
.question-panel h2 {
    color:#ffffff !important;
}

/* Test fact/result boxes */
.test-facts div,
.result-stats div {
    background:rgba(255,255,255,.09) !important;
    border:1px solid rgba(255,255,255,.13);
}

.test-facts strong,
.result-stats strong {
    color:#74caff !important;
}

.test-facts span,
.result-stats span {
    color:#d9e2e7 !important;
}

/* Question answers remain bright enough to read */
.answer {
    background:#f5f7f8 !important;
    color:#17242d !important;
    border-color:#cbd6dc !important;
    font-weight:600;
}

.answer:hover:not(:disabled) {
    background:#ffffff !important;
    border-color:#2997db !important;
}

/* Correct/wrong feedback must override answer background */
.answer.correct {
    background:#dff3e6 !important;
    border-color:#2d8a55 !important;
    color:#173d28 !important;
}

.answer.wrong {
    background:#f8dfe1 !important;
    border-color:#c53b43 !important;
    color:#561a1e !important;
}

.explanation {
    background:rgba(255,255,255,.10) !important;
    color:#f0f4f6 !important;
    border-left-color:#45b6fa !important;
}

/* Back button and test status */
.back {
    color:#ffffff !important;
    background:rgba(0,0,0,.65) !important;
    padding:10px 15px;
    border-radius:5px;
}

.test-top {
    color:#ffffff !important;
    text-shadow:0 2px 3px #000;
}

.progress-info {
    color:#ffffff !important;
    text-shadow:0 1px 2px #000;
}

/* Footer */
footer {
    background:rgba(8,23,34,.97) !important;
    color:#d5e0e6 !important;
}

/* Mobile */
@media(max-width:800px) {
    .hero {
        padding:40px 16px 35px !important;
    }

    .section-title {
        width:auto;
        padding:12px 16px !important;
    }
}

/* ===== OFFICIAL TEXAS DRIVER HANDBOOK ===== */

.handbook-box {
    max-width: 1100px;
    margin: 38px auto;
    padding: 26px 30px;
    display: grid;
    grid-template-columns: 75px 1fr auto;
    gap: 24px;
    align-items: center;

    background: rgba(9, 23, 33, .96);
    border: 1px solid rgba(255,255,255,.22);
    border-left: 5px solid #e7b928;
    border-radius: 8px;

    box-shadow:
        0 12px 32px rgba(0,0,0,.55),
        inset 0 1px 0 rgba(255,255,255,.05);
}

.handbook-icon {
    font-size: 52px;
    text-align: center;
}

.handbook-copy h2 {
    margin: 3px 0 7px;
    color: #fff;
    font-size: 25px;
    font-weight: 900;
}

.handbook-copy p {
    margin: 0 0 8px;
    color: #e4ebef;
    line-height: 1.5;
}

.handbook-label {
    color: #f1c83f;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.5px;
}

.handbook-version {
    color: #9fb1bc;
    font-size: 12px;
    font-weight: 700;
}

.handbook-actions {
    display: flex;
    flex-direction: column;
    gap: 9px;
    min-width: 190px;
}

.handbook-btn {
    display: block;
    padding: 12px 18px;
    border-radius: 5px;
    text-align: center;
    text-decoration: none;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .4px;
    transition: .18s ease;
}

.handbook-btn.primary {
    background: #1777b7;
    color: #fff;
}

.handbook-btn.primary:hover {
    background: #2197e3;
    transform: translateY(-1px);
}

.handbook-btn.secondary {
    background: rgba(255,255,255,.10);
    color: #fff;
    border: 1px solid rgba(255,255,255,.25);
}

.handbook-btn.secondary:hover {
    background: rgba(255,255,255,.18);
}

@media(max-width:800px) {
    .handbook-box {
        margin: 25px 15px;
        grid-template-columns: 55px 1fr;
        padding: 22px 18px;
    }

    .handbook-icon {
        font-size: 40px;
    }

    .handbook-actions {
        grid-column: 1 / -1;
        width: 100%;
    }
}

/* =========================================================
   HANDBOOK FINAL READABILITY FIX
   ========================================================= */

.handbook-box {
    max-width:1100px !important;
    margin:38px auto !important;
    padding:28px 32px !important;

    display:grid !important;
    grid-template-columns:70px 1fr auto !important;
    align-items:center !important;
    gap:24px !important;

    background:rgba(9,23,33,.96) !important;
    border:1px solid rgba(255,255,255,.22) !important;
    border-left:5px solid #e6b82b !important;
    border-radius:8px !important;

    box-shadow:
        0 12px 32px rgba(0,0,0,.60),
        inset 0 1px 0 rgba(255,255,255,.05) !important;
}

.handbook-icon {
    color:#ffffff !important;
    opacity:1 !important;
    font-size:48px !important;
}

.handbook-copy {
    color:#ffffff !important;
}

.handbook-copy .handbook-label,
.handbook-label {
    color:#ffd447 !important;
    font-weight:900 !important;
    font-size:12px !important;
    letter-spacing:1.5px !important;
    text-shadow:0 2px 3px #000 !important;
}

.handbook-copy h2,
.handbook-box h2 {
    color:#ffffff !important;
    font-size:26px !important;
    font-weight:900 !important;
    margin:5px 0 8px !important;
    text-shadow:0 2px 3px rgba(0,0,0,.8) !important;
}

.handbook-copy p,
.handbook-box p {
    color:#edf3f6 !important;
    font-size:15px !important;
    font-weight:500 !important;
    line-height:1.55 !important;
    margin:0 0 8px !important;
}

.handbook-version {
    color:#b9cbd5 !important;
    font-size:12px !important;
    font-weight:700 !important;
}

.handbook-actions {
    display:block !important;
    min-width:270px !important;
}

.handbook-btn.primary {
    display:block !important;
    width:100% !important;
    box-sizing:border-box !important;

    background:#1777b7 !important;
    color:#ffffff !important;

    padding:15px 20px !important;
    border:1px solid #4eb7f5 !important;
    border-radius:5px !important;

    text-align:center !important;
    text-decoration:none !important;
    font-size:12px !important;
    font-weight:900 !important;
    letter-spacing:.35px !important;

    box-shadow:0 5px 14px rgba(0,0,0,.35) !important;
}

.handbook-btn.primary:hover {
    background:#2198e4 !important;
    color:#ffffff !important;
    transform:translateY(-1px);
}

/* Kill the second button if an old cached copy remains */
.handbook-btn.secondary {
    display:none !important;
}

/* =========================================================
   GLOBAL ASPHALT TEXT PROTECTION
   Text outside cards must never disappear into road texture
   ========================================================= */

.section-title,
.handbook-box,
.how-it-works {
    color:#ffffff !important;
}

.section-title *,
.how-it-works * {
    opacity:1;
}

.section-title h1,
.section-title h2,
.section-title h3,
.how-it-works h1,
.how-it-works h2,
.how-it-works h3 {
    color:#ffffff !important;
}

.section-title p {
    color:#f3f6f8 !important;
}

.how-it-works p,
.steps p {
    color:#e8eef1 !important;
}

@media(max-width:800px) {

    .handbook-box {
        margin:25px 15px !important;
        padding:22px 18px !important;
        grid-template-columns:50px 1fr !important;
    }

    .handbook-actions {
        grid-column:1 / -1 !important;
        min-width:0 !important;
        width:100% !important;
    }

    .handbook-btn.primary {
        width:100% !important;
    }
}

/* =========================================================
   TXDLT OFFICIAL LOGO HEADER
   ========================================================= */

header {
    background:#0b2638 !important;
    border-bottom:4px solid #c9323b !important;
    padding:0 !important;
}

.site-header-inner {
    max-width:1100px;
    margin:0 auto;
    height:118px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    padding:8px 20px;
    box-sizing:border-box;
}

.site-logo-link {
    display:inline-flex;
    align-items:center;
    text-decoration:none;
    height:100%;
}

.site-logo {
    display:block;
    width:auto;
    height:100px;
    max-width:430px;
    object-fit:contain;
    object-position:left center;
}

/* Remove any old brand pieces if old CSS still references them */
.brand-mark,
.brand-text,
.brand-title,
.brand-subtitle {
    display:none !important;
}

@media(max-width:800px) {

    .site-header-inner {
        height:92px;
        padding:7px 14px;
    }

    .site-logo {
        height:76px;
        max-width:320px;
    }
}

@media(max-width:450px) {

    .site-header-inner {
        height:78px;
    }

    .site-logo {
        height:64px;
        max-width:270px;
    }
}

/* =========================================================
   TXDLT HEADER FIX — COMPACT + FULLY TRANSPARENT
   ========================================================= */

header {
    height:auto !important;
    min-height:0 !important;
    padding:0 !important;
    margin:0 !important;

    background:transparent !important;
    background-color:transparent !important;
    background-image:none !important;

    border:0 !important;
    box-shadow:none !important;

    position:absolute !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    z-index:50 !important;

    pointer-events:none;
}

.site-header-inner {
    width:100% !important;
    max-width:1400px !important;
    height:auto !important;
    min-height:0 !important;

    margin:0 auto !important;
    padding:18px 28px !important;

    display:flex !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;

    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;

    box-sizing:border-box !important;
}

.site-logo-link {
    display:block !important;
    width:auto !important;
    height:auto !important;
    background:transparent !important;
    pointer-events:auto;
}

.site-logo {
    display:block !important;

    width:230px !important;
    height:auto !important;
    max-width:230px !important;
    max-height:none !important;

    object-fit:contain !important;

    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
}

/* Give hero just enough breathing room for floating logo */
#homeScreen {
    padding-top:105px !important;
}

/* Other screens also need room under floating logo */
#introScreen,
#testScreen,
#resultsScreen {
    padding-top:115px !important;
}

@media(max-width:800px) {

    .site-header-inner {
        padding:12px 16px !important;
    }

    .site-logo {
        width:175px !important;
        max-width:175px !important;
    }

    #homeScreen {
        padding-top:82px !important;
    }

    #introScreen,
    #testScreen,
    #resultsScreen {
        padding-top:90px !important;
    }
}

@media(max-width:450px) {

    .site-logo {
        width:145px !important;
        max-width:145px !important;
    }

    #homeScreen {
        padding-top:70px !important;
    }
}

/* ===== TXDLT LOGO — 2X SIZE ===== */

.site-logo {
    width:460px !important;
    max-width:460px !important;
    height:auto !important;
}

#homeScreen {
    padding-top:210px !important;
}

#introScreen,
#testScreen,
#resultsScreen {
    padding-top:220px !important;
}

@media(max-width:800px) {
    .site-logo {
        width:350px !important;
        max-width:350px !important;
    }

    #homeScreen {
        padding-top:165px !important;
    }

    #introScreen,
    #testScreen,
    #resultsScreen {
        padding-top:175px !important;
    }
}

@media(max-width:450px) {
    .site-logo {
        width:290px !important;
        max-width:290px !important;
    }

    #homeScreen {
        padding-top:140px !important;
    }
}

/* ===== TXDLT LOGO — REDUCE 25% ===== */

.site-logo {
    width:345px !important;
    max-width:345px !important;
    height:auto !important;
}

#homeScreen {
    padding-top:160px !important;
}

#introScreen,
#testScreen,
#resultsScreen {
    padding-top:170px !important;
}

@media(max-width:800px) {
    .site-logo {
        width:263px !important;
        max-width:263px !important;
    }

    #homeScreen {
        padding-top:125px !important;
    }

    #introScreen,
    #testScreen,
    #resultsScreen {
        padding-top:135px !important;
    }
}

@media(max-width:450px) {
    .site-logo {
        width:218px !important;
        max-width:218px !important;
    }

    #homeScreen {
        padding-top:105px !important;
    }
}

/* ===== REMOVE BLUE FOOTER BAR ===== */

footer {
    width:auto !important;
    max-width:700px !important;
    margin:35px auto 20px !important;
    padding:12px 24px !important;

    background:rgba(0,0,0,.62) !important;
    background-color:rgba(0,0,0,.62) !important;
    background-image:none !important;

    border:0 !important;
    border-radius:6px !important;
    box-shadow:none !important;

    color:#e8ecef !important;
    text-align:center !important;
}

footer,
footer p,
footer span,
footer div {
    color:#e8ecef !important;
}

@media(max-width:800px) {
    footer {
        margin:25px 15px 15px !important;
        padding:12px 16px !important;
    }
}

/* =========================================================
   TXDLT COMPACT HERO
   Logo left of main headline instead of above it
   ========================================================= */

/* Remove all artificial space previously reserved for logo */
#homeScreen {
    padding-top:0 !important;
}

/* Position logo alongside hero */
header {
    position:absolute !important;
    top:0 !important;
    left:50% !important;
    right:auto !important;

    width:330px !important;
    height:260px !important;

    margin-left:-555px !important;

    background:transparent !important;
    border:0 !important;
    pointer-events:none !important;
    z-index:20 !important;
}

.site-header-inner {
    width:100% !important;
    height:100% !important;
    margin:0 !important;
    padding:28px 15px !important;

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

    background:transparent !important;
}

.site-logo-link {
    pointer-events:auto !important;
}

.site-logo {
    width:285px !important;
    max-width:285px !important;
    height:auto !important;
}

/* Hero occupies right side of same row */
.hero {
    width:720px !important;
    max-width:calc(100% - 380px) !important;

    margin:0 calc((100% - 1100px)/2) 0 auto !important;
    padding:58px 20px 32px !important;

    min-height:245px !important;
    box-sizing:border-box !important;

    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;

    background:
        radial-gradient(
            ellipse at center,
            rgba(0,0,0,.55) 0%,
            rgba(0,0,0,.30) 55%,
            rgba(0,0,0,0) 78%
        ) !important;
}

/* Tighten vertical spacing beneath hero */
.section-title {
    margin-top:5px !important;
    margin-bottom:18px !important;
}

/* Intro/test/results still need normal top spacing */
#introScreen,
#testScreen,
#resultsScreen {
    padding-top:30px !important;
}

/* Tablet/mobile: stack logo above hero */
@media(max-width:900px) {

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

        width:100% !important;
        height:auto !important;
        margin:0 !important;
    }

    .site-header-inner {
        padding:14px 15px 0 !important;
    }

    .site-logo {
        width:230px !important;
        max-width:230px !important;
    }

    .hero {
        width:auto !important;
        max-width:100% !important;
        margin:0 auto !important;
        min-height:0 !important;
        padding:22px 18px 28px !important;
    }

    #homeScreen {
        padding-top:0 !important;
    }
}

@media(max-width:450px) {

    .site-logo {
        width:190px !important;
        max-width:190px !important;
    }

    .hero {
        padding-top:15px !important;
    }
}

/* =========================================================
   TXDLT MOBILE / PHONE FINAL PASS
   ========================================================= */

html {
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
}

body {
    width:100%;
    margin:0;
    overflow-x:hidden;
}

/* Prevent anything from forcing horizontal scrolling */
img,
svg,
video,
canvas,
iframe {
    max-width:100%;
}

/* Finger-friendly interactive controls */
button,
.answer,
.primary-btn,
.handbook-btn,
.test-card {
    touch-action:manipulation;
}

button,
.primary-btn,
.handbook-btn {
    min-height:44px;
}

/* PHONE */
@media(max-width:600px) {

    body {
        background-position:center top !important;
    }

    /* Logo centered and compact on phones */
    header {
        position:relative !important;
        width:100% !important;
        height:auto !important;
        left:auto !important;
        top:auto !important;
        margin:0 !important;
    }

    .site-header-inner {
        width:100% !important;
        height:auto !important;
        padding:12px 15px 2px !important;
        justify-content:center !important;
    }

    .site-logo {
        width:210px !important;
        max-width:72vw !important;
        height:auto !important;
    }

    /* Hero */
    .hero {
        width:100% !important;
        max-width:100% !important;
        min-height:0 !important;
        margin:0 !important;
        padding:15px 18px 24px !important;
        box-sizing:border-box !important;
    }

    .hero h1 {
        font-size:34px !important;
        line-height:1.04 !important;
        margin:10px 0 14px !important;
    }

    .hero-copy {
        font-size:15px !important;
        line-height:1.5 !important;
    }

    .eyebrow {
        font-size:10px !important;
        letter-spacing:1.2px !important;
    }

    .badges {
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:7px !important;
        max-width:290px;
        margin-left:auto !important;
        margin-right:auto !important;
    }

    .badges span {
        width:100%;
        box-sizing:border-box;
        text-align:center;
    }

    /* Test heading */
    .section-title {
        width:auto !important;
        max-width:none !important;
        margin:5px 15px 15px !important;
        padding:12px 15px !important;
    }

    .section-title h2 {
        font-size:23px !important;
    }

    /* Cards become one clean vertical stack */
    .test-grid,
    .tests-grid,
    .cards,
    .test-cards {
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:14px !important;
        width:auto !important;
        margin-left:15px !important;
        margin-right:15px !important;
    }

    .test-card {
        width:100% !important;
        min-width:0 !important;
        box-sizing:border-box !important;
        padding:22px !important;
    }

    /* Handbook */
    .handbook-box {
        display:block !important;
        width:auto !important;
        max-width:none !important;
        margin:18px 15px !important;
        padding:22px !important;
        box-sizing:border-box !important;
    }

    .handbook-icon {
        margin-bottom:8px;
    }

    .handbook-copy h2 {
        font-size:23px !important;
    }

    .handbook-actions {
        width:100% !important;
        min-width:0 !important;
        margin-top:16px !important;
    }

    .handbook-btn.primary {
        width:100% !important;
        box-sizing:border-box !important;
        padding:14px 12px !important;
    }

    /* Practice / Learn / Pass */
    .how-it-works {
        width:auto !important;
        margin:18px 15px !important;
        padding:22px 18px !important;
        box-sizing:border-box !important;
    }

    .steps {
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:22px !important;
    }

    /* Actual testing screens */
    #introScreen,
    #testScreen,
    #resultsScreen {
        padding:15px !important;
        box-sizing:border-box !important;
    }

    .panel {
        width:100% !important;
        max-width:100% !important;
        box-sizing:border-box !important;
        padding:20px 16px !important;
    }

    .panel h1,
    .question-panel h2 {
        font-size:25px !important;
        line-height:1.2 !important;
    }

    .test-facts,
    .result-stats {
        grid-template-columns:1fr !important;
        gap:8px !important;
    }

    .answer {
        width:100% !important;
        min-height:52px !important;
        padding:14px !important;
        box-sizing:border-box !important;
        font-size:16px !important;
        line-height:1.35 !important;
    }

    /* Small floating disclaimer rather than a footer stripe */
    footer {
        width:auto !important;
        max-width:none !important;
        margin:25px 15px 15px !important;
        box-sizing:border-box !important;
        font-size:11px !important;
        line-height:1.5 !important;
    }
}