/*
=============================================================
PURECAR CAR TOOLS MASTER UI V26
Reference: /sell-my-car-northern-ireland

Palette:
- charcoal / black
- warm cream
- off-white
- soft grey
- white
- restrained PureCar red

This loads AFTER all older Car Tools / MOT / Driving Test CSS.
=============================================================
*/

.pc-tools-scope{
    --pct-ink:#17191c;
    --pct-charcoal:#292b2e;
    --pct-copy:#505860;
    --pct-muted:#6e757d;

    --pct-white:#fff;
    --pct-paper:#fcfbf8;

    --pct-cream:#f7f0e6;
    --pct-cream-2:#f1e6d8;
    --pct-cream-3:#ebe0d2;

    --pct-grey:#f4f5f5;
    --pct-grey-2:#e6e8ea;

    --pct-blush:#fff4f3;
    --pct-red:#d7192a;
    --pct-red-dark:#b51220;

    --pct-line:#dfe2e4;

    --pct-shadow:
        0 12px 34px rgba(20,22,25,.055);

    /*
      Neutralise old blue / green variables.
      Correct/pass remains understandable through
      copy and labels, not random green UI.
    */
    --dt-blue:var(--pct-ink);
    --dt-blue-dark:var(--pct-ink);
    --dt-navy:var(--pct-charcoal);

    --dt-green:var(--pct-ink);
    --dt-green-soft:var(--pct-cream);

    --pc15-green:var(--pct-ink);
    --pc15-green-soft:var(--pct-cream);

    --pc17-green:var(--pct-ink);

    --ct-blue:var(--pct-ink);
    --ct-blue-dark:var(--pct-ink);
    --ct-navy:var(--pct-ink);
    --ct-green:var(--pct-ink);
    --ct-green-soft:var(--pct-cream);

    width:100%;
    max-width:100%;
    overflow-x:hidden;

    color:var(--pct-ink);
    background:var(--pct-paper);
}

.pc-tools-scope,
.pc-tools-scope *{
    box-sizing:border-box;
}

.pc-tools-scope img,
.pc-tools-scope svg,
.pc-tools-scope video,
.pc-tools-scope canvas,
.pc-tools-scope iframe{
    max-width:100%;
}

.pc-tools-scope section,
.pc-tools-scope article,
.pc-tools-scope div,
.pc-tools-scope form,
.pc-tools-scope fieldset{
    min-width:0;
}

.pc-tools-scope h1,
.pc-tools-scope h2,
.pc-tools-scope h3,
.pc-tools-scope h4,
.pc-tools-scope p,
.pc-tools-scope li,
.pc-tools-scope label,
.pc-tools-scope button,
.pc-tools-scope a{
    overflow-wrap:anywhere;
}


/* =========================================================
   BASIC TYPE — NO MORE 9PX / 10PX PUBLIC UI
   ========================================================= */

.pc-tools-scope h1{
    color:var(--pct-ink)!important;
    text-wrap:balance;
}

.pc-tools-scope h2{
    color:var(--pct-ink)!important;
    text-wrap:balance;
}

.pc-tools-scope h3,
.pc-tools-scope h4{
    color:var(--pct-ink);
}

.pc-tools-scope p,
.pc-tools-scope li{
    color:var(--pct-copy);
    font-size:15.5px!important;
    line-height:1.68!important;
}

.pc-tools-scope label{
    font-size:14px!important;
    line-height:1.45!important;
}

.pc-tools-scope small{
    font-size:12.5px!important;
    line-height:1.5!important;
}

/*
Explicitly increase dozens of old tiny component labels.
*/
.pc-tools-scope :is(
    .dt-kicker,
    .dt-badge,
    .dt-count,
    .dt-source,
    .dt-muted-copy,
    .dt-result-kicker,
    .dt-result-source,
    .dt-check-progress span,
    .pc15-tool__tag,
    .pc15-stat span,
    .pc15-sourcebar span,
    .dt-sign-copy span,
    .dt-field small,
    .mp-toolbar span,
    .mp-summary span,
    .mp-actions button,
    .mp-counts,
    .st-label,
    .st-reveal,
    .psc-item>small,
    .psc-item>a,
    .psc-weak a,
    .tvc-status>span,
    .tvc-row p,
    .dt-source-note span,
    .dt-source-note a
){
    font-size:12.5px!important;
    line-height:1.5!important;
}


/* =========================================================
   BUTTONS — CONTRAST + SPACING
   ========================================================= */

.pc-tools-scope button,
.pc-tools-scope [class*="btn"],
.pc-tools-scope [class*="button"]{
    font-size:14px!important;
    line-height:1.25!important;
}

.pc-tools-scope :is(
    .dt-btn,
    .pc15-cta,
    button
){
    min-height:44px;
}

/* Dark buttons ALWAYS white text */
.pc-tools-scope :is(
    .dt-btn.dark,
    .pc15-cta--dark,
    [class*="dark"][class*="btn"],
    [class*="black"][class*="btn"],
    [class*="dark"][class*="button"]
),
.pc-tools-scope :is(
    .dt-btn.dark,
    .pc15-cta--dark,
    [class*="dark"][class*="btn"],
    [class*="black"][class*="btn"],
    [class*="dark"][class*="button"]
) *{
    background-color:var(--pct-ink)!important;
    border-color:var(--pct-ink)!important;

    color:#fff!important;
    -webkit-text-fill-color:#fff!important;
}

/* Primary action = charcoal by default, not red everywhere */
.pc-tools-scope .dt-btn.primary{
    background:var(--pct-ink)!important;
    border-color:var(--pct-ink)!important;

    color:#fff!important;
    -webkit-text-fill-color:#fff!important;
}

.pc-tools-scope .dt-btn.primary:hover{
    background:#303235!important;
}

/* PureCar red is reserved for selected/high-emphasis actions */
.pc-tools-scope .pc15-cta--red,
.pc-tools-scope .hp-hazard-btn{
    background:var(--pct-red)!important;
    border-color:var(--pct-red)!important;

    color:#fff!important;
    -webkit-text-fill-color:#fff!important;
}


/* =========================================================
   ALL CAR TOOLS PAGE WIDTHS
   ========================================================= */

.pc-tools-scope .dt-page,
.pc-tools-scope .ct-page{
    width:100%!important;
    max-width:100%!important;

    overflow-x:hidden!important;

    background:
        linear-gradient(
            180deg,
            #fafafa 0,
            var(--pct-paper) 380px,
            #f6f6f5 100%
        )!important;
}

.pc-tools-scope .dt-wrap,
.pc-tools-scope .ct-wrap{
    width:min(1180px,calc(100% - 40px))!important;
    max-width:1180px!important;

    margin-left:auto!important;
    margin-right:auto!important;
}


/* =========================================================
   DRIVING TEST SUBNAV
   ========================================================= */

.pc-dt-localnav{
    width:100%!important;
    max-width:100%!important;

    overflow:hidden!important;

    background:#fff!important;

    border-bottom:1px solid var(--pct-line)!important;

    box-shadow:
        0 5px 16px rgba(20,22,25,.04)!important;
}

.pc-dt-localnav__inner{
    width:min(1180px,calc(100% - 40px))!important;
    max-width:1180px!important;

    min-height:62px!important;

    margin:0 auto!important;
    padding:0!important;

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

    gap:5px!important;
}

.pc-dt-localnav__brand{
    flex:0 0 auto!important;

    margin-right:13px!important;

    font-size:15px!important;
    font-weight:900!important;

    color:var(--pct-ink)!important;

    white-space:nowrap!important;
}

.pc-dt-localnav__dot{
    background:var(--pct-red)!important;

    box-shadow:
        0 0 0 5px var(--pct-blush)!important;
}

.pc-dt-localnav a.pc-dt-localnav__link{
    flex:0 0 auto!important;

    min-height:40px!important;

    padding:0 12px!important;

    border-radius:10px!important;

    color:#535a62!important;
    background:transparent!important;

    font-size:13px!important;
    font-weight:800!important;

    white-space:nowrap!important;
}

.pc-dt-localnav a.pc-dt-localnav__link:hover{
    color:var(--pct-ink)!important;

    background:var(--pct-cream)!important;
    border-color:#ebdfd1!important;
}

.pc-dt-localnav a.pc-dt-localnav__link.is-active{
    color:var(--pct-ink)!important;

    background:var(--pct-cream)!important;
    border-color:#e8d9c7!important;
}

/*
Fix My Progress active state specifically.
It was becoming pale pink + white.
*/
.pc-dt-localnav a.pc-dt-localnav__progress,
.pc-dt-localnav a.pc-dt-localnav__progress.is-active,
.pc-dt-localnav a.pc-dt-localnav__progress:link,
.pc-dt-localnav a.pc-dt-localnav__progress:visited,
.pc-dt-localnav a.pc-dt-localnav__progress:hover,
.pc-dt-localnav a.pc-dt-localnav__progress:focus{
    margin-left:auto!important;

    min-height:42px!important;

    padding:0 17px!important;

    background:var(--pct-ink)!important;
    border:1px solid var(--pct-ink)!important;

    color:#fff!important;
    -webkit-text-fill-color:#fff!important;

    border-radius:11px!important;
}


/* =========================================================
   BREADCRUMBS
   ========================================================= */

.pc-tools-scope .dt-breadcrumb,
.pc-tools-scope .dt-breadcrumbs{
    margin-top:20px!important;
    margin-bottom:16px!important;

    padding:0 2px!important;

    font-size:13px!important;
    line-height:1.4!important;
}

.pc-tools-scope .dt-breadcrumb a,
.pc-tools-scope .dt-breadcrumbs a{
    color:var(--pct-red)!important;

    font-size:13px!important;
    font-weight:800!important;
}


/* =========================================================
   HERO / SECTION COLOUR DEPTH
   ========================================================= */

.pc-tools-scope .dt-card{
    border-color:var(--pct-line)!important;

    box-shadow:var(--pct-shadow)!important;
}

.pc-tools-scope .dt-hero,
.pc-tools-scope .pc15-hero{
    background:
        radial-gradient(
            circle at 92% 8%,
            rgba(215,25,42,.075),
            transparent 31%
        ),
        linear-gradient(
            135deg,
            #fff 0%,
            var(--pct-paper) 58%,
            var(--pct-cream) 100%
        )!important;
}

.pc-tools-scope .dt-section{
    margin-top:20px!important;

    padding:32px!important;

    background:#fff!important;

    border-color:var(--pct-line)!important;
}

/* warm section rhythm */
.pc-tools-scope .dt-section:nth-of-type(4n+2){
    background:var(--pct-cream)!important;
}

.pc-tools-scope .dt-section:nth-of-type(4n+3){
    background:var(--pct-grey)!important;
}

.pc-tools-scope .dt-section:nth-of-type(4n+4){
    background:#fff!important;
}

.pc-tools-scope .dt-section-head{
    margin-bottom:22px!important;
}

.pc-tools-scope .dt-section-head p,
.pc-tools-scope .dt-section>p,
.pc-tools-scope .dt-body-copy,
.pc-tools-scope .dt-prose p{
    max-width:76ch;

    color:var(--pct-copy)!important;

    font-size:16px!important;
    line-height:1.72!important;
}


/* =========================================================
   OLD BLUE / GREEN COMPONENTS -> PURECAR NEUTRALS
   ========================================================= */

.pc-tools-scope :is(
    .dt-icon,
    .pc-centre-priority span,
    .pc-choice-grid span,
    .pc14-steps li>span,
    .st-label
){
    background:var(--pct-cream)!important;
    color:var(--pct-ink)!important;
}

.pc-tools-scope :is(
    .ps-list span,
    .dt-fact:before,
    .tt-pass,
    .tt-number.done,
    .dt-result-good,
    .mp-result.pass
){
    color:var(--pct-ink)!important;
}

/* Roundabouts / practical check circles */
.pc-tools-scope .ps-list span{
    background:var(--pct-cream-2)!important;

    color:var(--pct-ink)!important;
}

/* correct answer */
.pc-tools-scope .tt-answer.correct{
    border-color:#d8c9b9!important;
    background:var(--pct-cream)!important;
}

/* completed question */
.pc-tools-scope .tt-number.done{
    background:var(--pct-cream)!important;
    border-color:#dfd2c4!important;
}

/* pass panels */
.pc-tools-scope :is(
    .dt-result-good,
    .mp-result.pass,
    .tt-score.tt-pass
){
    background:
        linear-gradient(
            145deg,
            #fff,
            var(--pct-cream)
        )!important;

    border-color:#dfd1c0!important;

    color:var(--pct-ink)!important;
}

/* fail/warning = restrained blush/red */
.pc-tools-scope :is(
    .dt-result-bad,
    .mp-result.fail,
    .tt-score.tt-fail
){
    background:var(--pct-blush)!important;
    border-color:#ecc5ca!important;

    color:var(--pct-ink)!important;
}


/* =========================================================
   KNOWN GRID OVERFLOW FIXES
   ========================================================= */

.pc-tools-scope :is(
    .dt-grid,
    .dt-resource-grid,
    .dt-topic-grid,
    .dt-related-grid,
    .dt-sign-grid,
    .dt-stat-grid,
    .dt-module-grid,
    .dt-visual-grid,
    .dt-form-grid,
    .dt-content-grid,
    .pc15-tool-grid,
    .pc15-journey,
    .pc16-related__links,
    .pc16-directory-grid,
    .ps-grid,
    .ps-list,
    .ps-warning-grid,
    .psc-grid,
    .tvc-list,
    .mp-grid,
    .st-grid,
    .pc-centre-card-grid,
    .pc-centre-mini-grid,
    .pc-centre-priority-grid,
    .pc-choice-grid,
    .pc-compare-grid,
    .pc-road-env-grid,
    .pc14-type-grid,
    .pc14-choice-grid,
    .pcbook-grid
){
    width:100%!important;
    max-width:100%!important;

    min-width:0!important;
}

.pc-tools-scope :is(
    .dt-grid,
    .dt-resource-grid,
    .dt-topic-grid,
    .dt-related-grid,
    .pc15-tool-grid,
    .pc15-journey,
    .pc16-related__links,
    .pc16-directory-grid,
    .ps-grid,
    .ps-list,
    .ps-warning-grid,
    .mp-grid,
    .pc-centre-card-grid,
    .pc-centre-priority-grid,
    .pc-choice-grid,
    .pc-road-env-grid,
    .pc14-type-grid
) > *{
    min-width:0!important;
    max-width:100%!important;
}

/*
Desktop maximum of three normal content cards per row.
*/
@media(min-width:1001px){

    .pc-tools-scope :is(
        .dt-grid,
        .dt-resource-grid,
        .dt-topic-grid,
        .dt-related-grid,
        .pc15-tool-grid,
        .pc15-journey,
        .pc16-related__links,
        .pc16-directory-grid,
        .ps-grid,
        .pc-centre-card-grid,
        .pc-centre-priority-grid,
        .pc-choice-grid,
        .pc-road-env-grid,
        .pc14-type-grid
    ){
        grid-template-columns:
            repeat(3,minmax(0,1fr))!important;

        gap:15px!important;
    }

    /* practical priority/problem list only needs 2 readable columns */
    .pc-tools-scope :is(
        .ps-list,
        .ps-warning-grid,
        .psc-grid,
        .tvc-list,
        .st-grid
    ){
        grid-template-columns:
            repeat(2,minmax(0,1fr))!important;

        gap:12px!important;
    }
}


/* =========================================================
   PRACTICAL SKILL PAGES
   This directly fixes the Roundabouts screenshot.
   ========================================================= */

.pc-tools-scope .ps-list>div,
.pc-tools-scope .ps-warning-grid>div{
    width:100%!important;
    max-width:100%!important;

    min-width:0!important;

    padding:16px!important;

    gap:12px!important;
}

.pc-tools-scope .ps-list p,
.pc-tools-scope .ps-warning-grid p{
    margin:1px 0 0!important;

    min-width:0!important;

    color:var(--pct-copy)!important;

    font-size:15px!important;
    line-height:1.6!important;
}

.pc-tools-scope .ps-warning-grid span{
    background:var(--pct-blush)!important;
    color:var(--pct-red)!important;
}


/* =========================================================
   RELATED RESOURCES
   Fixes third card running off-screen.
   ========================================================= */

.pc-tools-scope .dt-related-grid,
.pc-tools-scope .pc16-related__links{
    overflow:visible!important;
}

.pc-tools-scope .dt-related,
.pc-tools-scope .pc16-related__links a{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;

    padding:18px!important;

    background:#fff!important;

    border:1px solid var(--pct-line)!important;
    border-radius:15px!important;

    color:var(--pct-ink)!important;

    font-size:15px!important;
    line-height:1.4!important;
}

.pc-tools-scope .dt-related b{
    font-size:15px!important;
}

.pc-tools-scope .dt-related span{
    color:var(--pct-red)!important;
    font-size:16px!important;
}


/* =========================================================
   THEORY UI / RESULT
   ========================================================= */

.pc-tools-scope .tt-shell{
    width:100%!important;
    max-width:100%!important;

    grid-template-columns:
        minmax(0,1fr) 300px!important;
}

.pc-tools-scope .tt-main,
.pc-tools-scope .tt-side{
    min-width:0!important;
    max-width:100%!important;
}

.pc-tools-scope .tt-question{
    font-size:25px!important;
    line-height:1.32!important;
}

.pc-tools-scope .tt-answer{
    min-height:52px!important;

    padding:15px 16px!important;

    color:#343a40!important;

    font-size:15px!important;
    line-height:1.5!important;
}

.pc-tools-scope .tt-answer.selected{
    background:var(--pct-cream)!important;
    border-color:#dac9b6!important;
}

.pc-tools-scope .tt-progress{
    background:var(--pct-red)!important;
}

.pc-tools-scope .tt-number.current{
    background:var(--pct-blush)!important;
    border-color:#e7b5bb!important;

    color:var(--pct-red)!important;
}

.pc-tools-scope .tt-side-meta{
    font-size:13px!important;
}

.pc-tools-scope .tt-score{
    color:var(--pct-ink)!important;
}

.pc-tools-scope .tt-break-item:nth-child(3n+1){
    background:var(--pct-cream)!important;
}

.pc-tools-scope .tt-break-item:nth-child(3n+2){
    background:#fff!important;
}

.pc-tools-scope .tt-break-item:nth-child(3n+3){
    background:var(--pct-grey)!important;
}


/* =========================================================
   FORM / TOOL RESULT PANELS
   ========================================================= */

.pc-tools-scope input:not([type="checkbox"]):not([type="radio"]),
.pc-tools-scope select,
.pc-tools-scope textarea{
    width:100%!important;
    max-width:100%!important;

    min-width:0!important;

    font-size:16px!important;
}

.pc-tools-scope .dt-note,
.pc-tools-scope .tt-explain,
.pc-tools-scope .tt-readiness,
.pc-tools-scope .dt-result-neutral,
.pc-tools-scope .pc-pass-rate-callout,
.pc-tools-scope .pcbook-note{
    background:var(--pct-cream)!important;
    border-color:#e5d7c7!important;

    color:var(--pct-ink)!important;
}


/* =========================================================
   TABLES
   ========================================================= */

.pc-tools-scope table{
    width:100%!important;
    max-width:100%!important;
}

.pc-tools-scope .table-responsive,
.pc-tools-scope [class*="table-wrap"],
.pc-tools-scope [class*="table-scroll"]{
    max-width:100%!important;

    overflow-x:auto!important;

    -webkit-overflow-scrolling:touch;
}


/* =========================================================
   GENERAL MOT / OTHER CAR-TOOLS PAGES
   ========================================================= */

.pc-tools-scope main{
    max-width:100%;
}

.pc-tools-scope main>section{
    margin-block:18px;
}

.pc-tools-scope main>section + section{
    margin-top:20px!important;
}

/*
Any legacy "grid" in Car Tools must be able to shrink.
*/
.pc-tools-scope [class*="grid"]:not(.tt-number-grid):not(.tt-numbers){
    max-width:100%!important;
}

.pc-tools-scope [class*="grid"]:not(.tt-number-grid):not(.tt-numbers)>*{
    min-width:0!important;
}

/*
Common MOT / utility cards: increase tiny copy without
destroying headings.
*/
.pc-tools-scope [class*="card"] p{
    font-size:max(14.5px,1em)!important;
    line-height:1.62!important;
}

/*
Old green/success utility components.
*/
.pc-tools-scope [class*="success"],
.pc-tools-scope [class*="green"]{
    color:var(--pct-ink)!important;
}

.pc-tools-scope [class*="success"][class*="card"],
.pc-tools-scope [class*="green"][class*="card"],
.pc-tools-scope [class*="success"][class*="box"],
.pc-tools-scope [class*="green"][class*="box"]{
    background:var(--pct-cream)!important;
    border-color:#dfd1c2!important;
}


/* =========================================================
   MAIN /CAR-TOOLS PAGE
   ========================================================= */

.pct-page{
    padding:32px 20px 54px;

    background:
        linear-gradient(
            180deg,
            #fafafa,
            var(--pct-paper)
        );
}

.pct-wrap{
    width:min(1180px,100%);
    margin:0 auto;
}

.pct-hero{
    margin-bottom:24px;

    padding:42px 40px;

    background:
        linear-gradient(
            135deg,
            #fff,
            var(--pct-cream)
        );

    border:1px solid var(--pct-line);
    border-radius:24px;

    box-shadow:var(--pct-shadow);
}

.pct-eyebrow{
    margin-bottom:10px;

    color:var(--pct-red);

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

    letter-spacing:.07em;
    text-transform:uppercase;
}

.pct-hero h1{
    max-width:800px;

    margin:0 0 13px;

    color:var(--pct-ink);

    font-size:clamp(38px,5vw,58px);
    line-height:1;

    letter-spacing:-.045em;
}

.pct-hero p{
    max-width:760px;

    margin:0;

    color:var(--pct-copy);

    font-size:17px!important;
    line-height:1.68!important;
}

.pct-module{
    margin-top:24px;

    padding:30px;

    border:1px solid var(--pct-line);
    border-radius:22px;

    box-shadow:var(--pct-shadow);
}

.pct-module--mot{
    background:var(--pct-cream);
}

.pct-module--fuel{
    background:var(--pct-grey);
}

.pct-module--tests{
    background:#fff;
}

.pct-module--future{
    background:var(--pct-paper);
}

.pct-module-head{
    display:grid;

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

    gap:24px;

    align-items:start;

    margin-bottom:23px;
}

.pct-module-label{
    display:inline-flex;

    margin-bottom:9px;

    color:var(--pct-red);

    font-size:11px;
    font-weight:950;

    letter-spacing:.08em;
    text-transform:uppercase;
}

.pct-module h2{
    margin:0 0 9px;

    color:var(--pct-ink);

    font-size:31px;
    line-height:1.08;

    letter-spacing:-.03em;
}

.pct-module-head p{
    max-width:700px;

    margin:0;

    color:var(--pct-copy);

    font-size:15.5px!important;
}

.pct-module-main{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    min-height:48px;

    padding:0 18px;

    background:var(--pct-ink);

    border:1px solid var(--pct-ink);
    border-radius:11px;

    color:#fff!important;
    -webkit-text-fill-color:#fff!important;

    text-decoration:none;

    font-size:14px;
    font-weight:900;
}

.pct-links{
    display:grid;

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

    gap:12px;
}

.pct-link{
    min-width:0;

    min-height:126px;

    padding:18px;

    display:flex;

    flex-direction:column;
    justify-content:space-between;

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

    border:1px solid rgba(210,212,214,.95);
    border-radius:15px;

    color:var(--pct-ink);

    text-decoration:none;
}

.pct-module--tests .pct-link:nth-child(3n+2){
    background:var(--pct-cream);
}

.pct-module--tests .pct-link:nth-child(3n+3){
    background:var(--pct-grey);
}

.pct-link strong{
    display:block;

    color:var(--pct-ink);

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

.pct-link span{
    display:block;

    margin-top:8px;

    color:var(--pct-copy);

    font-size:14px;
    line-height:1.55;
}

.pct-link em{
    display:block;

    margin-top:14px;

    color:var(--pct-red);

    font-size:13px;
    font-style:normal;
    font-weight:900;
}

.pct-pending{
    display:flex;
    flex-wrap:wrap;

    gap:9px;
}

.pct-pending span{
    padding:9px 12px;

    background:#fff;

    border:1px solid var(--pct-line);
    border-radius:999px;

    color:#656b72;

    font-size:13px;
    font-weight:750;
}


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

@media(min-width:721px) and (max-width:1000px){

    .pc-tools-scope .dt-wrap,
    .pc-tools-scope .ct-wrap,
    .pc-dt-localnav__inner{
        width:calc(100% - 28px)!important;
    }

    .pc-dt-localnav__inner{
        overflow-x:auto!important;
        scrollbar-width:none;
    }

    .pc-dt-localnav__inner::-webkit-scrollbar{
        display:none;
    }

    .pc-dt-localnav__progress{
        margin-left:7px!important;
    }

    .pc-tools-scope :is(
        .dt-grid,
        .dt-resource-grid,
        .dt-topic-grid,
        .dt-related-grid,
        .pc15-tool-grid,
        .pc15-journey,
        .pc16-related__links,
        .pc16-directory-grid,
        .ps-grid,
        .pc-centre-card-grid,
        .pc-centre-priority-grid,
        .pc-choice-grid,
        .pc-road-env-grid,
        .pc14-type-grid
    ){
        grid-template-columns:
            repeat(2,minmax(0,1fr))!important;
    }

    .pc-tools-scope .tt-shell{
        grid-template-columns:1fr!important;
    }

    .pct-links{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }
}


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

@media(max-width:720px){

    .pc-tools-scope{
        overflow-x:hidden!important;
    }

    .pc-tools-scope .dt-wrap,
    .pc-tools-scope .ct-wrap{
        width:calc(100% - 14px)!important;
        max-width:calc(100% - 14px)!important;
    }

    .pc-dt-localnav__inner{
        width:100%!important;
        max-width:100%!important;

        min-height:58px!important;

        margin:0!important;

        padding:8px 10px!important;

        overflow-x:auto!important;
        overflow-y:hidden!important;

        scrollbar-width:none;
    }

    .pc-dt-localnav__inner::-webkit-scrollbar{
        display:none;
    }

    .pc-dt-localnav__brand{
        margin-left:3px!important;

        font-size:14px!important;
    }

    .pc-dt-localnav a.pc-dt-localnav__link{
        min-height:40px!important;

        padding:0 12px!important;

        font-size:13px!important;
    }

    .pc-dt-localnav a.pc-dt-localnav__progress,
    .pc-dt-localnav a.pc-dt-localnav__progress.is-active{
        margin-left:0!important;
    }

    .pc-tools-scope .dt-breadcrumb,
    .pc-tools-scope .dt-breadcrumbs{
        margin-top:20px!important;
        margin-bottom:16px!important;

        overflow-x:auto!important;

        white-space:nowrap!important;

        scrollbar-width:none;
    }

    .pc-tools-scope .dt-breadcrumb::-webkit-scrollbar,
    .pc-tools-scope .dt-breadcrumbs::-webkit-scrollbar{
        display:none;
    }

    .pc-tools-scope .dt-hero,
    .pc-tools-scope .pc15-hero{
        padding:23px 17px!important;

        border-radius:15px!important;
    }

    .pc-tools-scope h1{
        font-size:clamp(31px,9vw,42px)!important;
        line-height:1.04!important;
    }

    .pc-tools-scope h2{
        font-size:24px!important;
        line-height:1.12!important;
    }

    .pc-tools-scope h3{
        font-size:18px!important;
    }

    .pc-tools-scope p,
    .pc-tools-scope li{
        font-size:15px!important;
        line-height:1.65!important;
    }

    .pc-tools-scope .dt-section{
        margin-top:13px!important;

        padding:20px 15px!important;

        border-radius:15px!important;
    }

    .pc-tools-scope :is(
        .dt-grid,
        .dt-resource-grid,
        .dt-topic-grid,
        .dt-related-grid,
        .dt-sign-grid,
        .dt-stat-grid,
        .dt-module-grid,
        .dt-visual-grid,
        .dt-form-grid,
        .dt-content-grid,
        .pc15-tool-grid,
        .pc15-journey,
        .pc16-related__links,
        .pc16-directory-grid,
        .ps-grid,
        .ps-list,
        .ps-warning-grid,
        .psc-grid,
        .tvc-list,
        .mp-grid,
        .st-grid,
        .pc-centre-card-grid,
        .pc-centre-mini-grid,
        .pc-centre-priority-grid,
        .pc-choice-grid,
        .pc-compare-grid,
        .pc-road-env-grid,
        .pc14-type-grid,
        .pc14-choice-grid,
        .pcbook-grid
    ){
        grid-template-columns:
            minmax(0,1fr)!important;

        gap:11px!important;
    }

    .pc-tools-scope .tt-shell{
        grid-template-columns:1fr!important;
    }

    .pc-tools-scope .tt-main{
        padding:17px 14px!important;
    }

    .pc-tools-scope .tt-question{
        font-size:21px!important;
    }

    .pc-tools-scope .tt-controls,
    .pc-tools-scope .dt-btns,
    .pc-tools-scope .hp-controls,
    .pc-tools-scope .pcbook-actions,
    .pc-tools-scope .psc-actions,
    .pc-tools-scope .mp-footer-actions{
        display:grid!important;

        grid-template-columns:1fr!important;

        gap:9px!important;

        width:100%!important;
    }

    .pc-tools-scope .tt-controls>div{
        display:grid!important;

        grid-template-columns:1fr!important;

        gap:9px!important;

        width:100%!important;
    }

    .pc-tools-scope .tt-controls button,
    .pc-tools-scope .dt-btns>*,
    .pc-tools-scope .hp-controls>*,
    .pc-tools-scope .pcbook-actions>*,
    .pc-tools-scope .psc-actions>*,
    .pc-tools-scope .mp-footer-actions>*{
        width:100%!important;

        margin:0!important;
    }

    .pc-tools-scope table{
        display:block!important;

        width:100%!important;
        max-width:100%!important;

        overflow-x:auto!important;

        -webkit-overflow-scrolling:touch;
    }

    .pct-page{
        padding:16px 8px 34px;
    }

    .pct-hero{
        margin-bottom:14px;

        padding:26px 18px;

        border-radius:17px;
    }

    .pct-hero h1{
        font-size:35px;
    }

    .pct-hero p{
        font-size:15px!important;
    }

    .pct-module{
        margin-top:14px;

        padding:21px 15px;

        border-radius:17px;
    }

    .pct-module-head{
        grid-template-columns:1fr;

        gap:15px;
    }

    .pct-module h2{
        font-size:26px;
    }

    .pct-module-main{
        width:100%;
    }

    .pct-links{
        grid-template-columns:1fr;

        gap:10px;
    }

    .pct-link{
        min-height:0;

        padding:17px;
    }
}

/* =========================================================
   PURECAR FOOTER SEPARATION V26.2
   Final modules must never visually touch the footer.
   ========================================================= */

.pc24-seo-content{
    margin-bottom:32px !important;
}

/*
All Resources directory / related-resource sections also get
a proper final breathing space if they are the last module.
*/
.pc16-directory,
.pc16-related,
.dt-page{
    position:relative;
}

.pc16-directory:last-child,
.pc16-related:last-child{
    margin-bottom:30px !important;
}

/*
Do not allow the footer to visually merge with a cream,
grey or white information card.
*/
.pc-footer{
    margin-top:0 !important;
}

@media(max-width:720px){

    .pc24-seo-content{
        margin-bottom:20px !important;
    }

    .pc16-directory:last-child,
    .pc16-related:last-child{
        margin-bottom:18px !important;
    }
}


/* =========================================================
   PURECAR MASTER CONTRAST SPACING V26.3

   HARD RULES:
   - no major sections touching
   - no final section touching footer
   - no white/pale text on light cards
   - no tiny public UI copy
   - red = accent, not entire interface
   - cream / off-white / grey / charcoal create separation
   ========================================================= */


/* =========================================================
   1. GUARANTEED GAP BEFORE FOOTER — EVERY TOOLS PAGE
   ========================================================= */

/*
.pc-tools-scope wraps the complete page BODY content but not
the site footer, so padding-bottom here guarantees separation
regardless of the final Blade template.
*/
.pc-tools-scope{
    padding-bottom:36px !important;
}


/*
Final standalone content modules also get their own breathing
room so the page does not rely only on the wrapper padding.
*/
.pc-tools-scope :is(
    .pc16-related,
    .pc16-directory,
    .pc24-seo-content,
    .dt-section,
    .dt-card,
    .pc15-section,
    .pc15-tools,
    .pc15-journey,
    .pcbook-section,
    .pc14-section
):last-child{
    margin-bottom:0 !important;
}


/*
The footer itself must never visually merge with the final
white/cream card.
*/
body:has(.pc-tools-scope) .pc-footer{
    margin-top:0 !important;
}


/* =========================================================
   2. HARD GAP BETWEEN BOTTOM SEO + RELATED RESOURCES
   ========================================================= */

.pc-tools-scope .pc24-seo-content{
    margin-top:24px !important;
    margin-bottom:24px !important;
}

.pc-tools-scope .pc24-seo-content + .pc16-related{
    margin-top:0 !important;
}

.pc-tools-scope .pc16-related{
    padding-top:0 !important;
    padding-bottom:0 !important;

    margin-top:24px !important;
    margin-bottom:0 !important;
}


/*
If Related Resources sits inside another wrapper, guarantee
space using its inner container too.
*/
.pc-tools-scope .pc16-related__inner{
    margin-top:0 !important;
    margin-bottom:0 !important;
}


/* =========================================================
   3. ALL MAJOR DRIVING-TEST SECTIONS MUST BE SEPARATED
   ========================================================= */

.pc-tools-scope .dt-wrap > :is(
    .dt-card,
    .dt-section,
    .pc15-section,
    .pc16-directory,
    .pc16-related,
    .pc24-seo-content,
    .pcbook-section,
    .pc14-section
) + :is(
    .dt-card,
    .dt-section,
    .pc15-section,
    .pc16-directory,
    .pc16-related,
    .pc24-seo-content,
    .pcbook-section,
    .pc14-section
){
    margin-top:24px !important;
}


/* Ordinary stacked cards */
.pc-tools-scope .dt-section + .dt-section,
.pc-tools-scope .dt-card + .dt-card{
    margin-top:20px !important;
}


/* =========================================================
   4. FIX LIGHT CARD TEXT CONTRAST GLOBALLY
   ========================================================= */

/*
These are all LIGHT-SURFACE information cards.

Older phases left white text rules behind on some of them.
Force proper dark headings and readable body copy.
*/

.pc-tools-scope :is(
    .pc15-tool,
    .pc15-stage,
    .dt-resource,
    .dt-action,
    .dt-topic,
    .dt-topic-authority,
    .dt-related,
    .dt-sign-card,
    .dt-module-card,
    .dt-stat,
    .dt-fact,
    .dt-note,
    .dt-result-panel,
    .pc16-directory-card,
    .pc16-related__links a,
    .ps-list > div,
    .ps-warning-grid > div,
    .psc-item,
    .pc-centre-card,
    .pc-centre-priority,
    .pc-road-env,
    .pc-choice-grid > *,
    .pc14-type,
    .pc14-choice,
    .pc14-fact,
    .pcbook-card,
    .tt-break-item,
    .tt-wrong-item,
    .mp-card,
    .st-card,
    .tvc-row
){
    color:#17191c !important;
    -webkit-text-fill-color:initial !important;
}


/* Card headings */
.pc-tools-scope :is(
    .pc15-tool,
    .pc15-stage,
    .dt-resource,
    .dt-action,
    .dt-topic,
    .dt-topic-authority,
    .dt-related,
    .dt-sign-card,
    .dt-module-card,
    .dt-stat,
    .dt-fact,
    .pc16-directory-card,
    .pc16-related__links a,
    .ps-list > div,
    .ps-warning-grid > div,
    .psc-item,
    .pc-centre-card,
    .pc-centre-priority,
    .pc-road-env,
    .pc-choice-grid > *,
    .pc14-type,
    .pc14-choice,
    .pc14-fact,
    .pcbook-card,
    .tt-break-item,
    .tt-wrong-item,
    .mp-card,
    .st-card,
    .tvc-row
) :is(
    h2,
    h3,
    h4,
    strong,
    b
){
    color:#17191c !important;
    -webkit-text-fill-color:#17191c !important;
}


/* Card body copy */
.pc-tools-scope :is(
    .pc15-tool,
    .pc15-stage,
    .dt-resource,
    .dt-action,
    .dt-topic,
    .dt-topic-authority,
    .dt-related,
    .dt-sign-card,
    .dt-module-card,
    .dt-stat,
    .dt-fact,
    .pc16-directory-card,
    .ps-list > div,
    .ps-warning-grid > div,
    .psc-item,
    .pc-centre-card,
    .pc-centre-priority,
    .pc-road-env,
    .pc-choice-grid > *,
    .pc14-type,
    .pc14-choice,
    .pc14-fact,
    .pcbook-card,
    .tt-break-item,
    .tt-wrong-item,
    .mp-card,
    .st-card,
    .tvc-row
) p{
    color:#505860 !important;
    -webkit-text-fill-color:#505860 !important;

    font-size:14.5px !important;
    line-height:1.62 !important;
}


/*
The exact Driving Tests homepage cards shown in your
screenshot.
*/
.pc-tools-scope .pc15-tool h3,
.pc-tools-scope .pc15-tool strong{
    color:#17191c !important;
    -webkit-text-fill-color:#17191c !important;

    font-size:18px !important;
}

.pc-tools-scope .pc15-tool p{
    color:#59616a !important;
    -webkit-text-fill-color:#59616a !important;

    font-size:14.5px !important;
}

.pc-tools-scope .pc15-tool a:not(.pc15-cta){
    color:#d7192a !important;
    -webkit-text-fill-color:#d7192a !important;

    font-size:13px !important;
    font-weight:850 !important;
}


/* =========================================================
   5. RELATED RESOURCE CARDS
   ========================================================= */

.pc-tools-scope .pc16-related__links a,
.pc-tools-scope .dt-related{
    background:#fff !important;

    color:#17191c !important;
    -webkit-text-fill-color:#17191c !important;

    border-color:#dfe2e4 !important;
}

.pc-tools-scope .pc16-related__links a:hover,
.pc-tools-scope .dt-related:hover{
    background:#f7f0e6 !important;
}

.pc-tools-scope .pc16-related__links a *,
.pc-tools-scope .dt-related :is(
    b,
    strong
){
    color:#17191c !important;
    -webkit-text-fill-color:#17191c !important;
}


/* arrow/accent only */
.pc-tools-scope .dt-related > span:last-child{
    color:#d7192a !important;
    -webkit-text-fill-color:#d7192a !important;
}


/* =========================================================
   6. NO RANDOM GREEN CHECK CIRCLES
   ========================================================= */

.pc-tools-scope :is(
    .ps-list span,
    .dt-check,
    .dt-check-icon,
    .dt-checkmark,
    [class*="check-icon"],
    [class*="checkmark"]
){
    background:#f1e6d8 !important;

    color:#17191c !important;
    -webkit-text-fill-color:#17191c !important;

    border-color:#e2d3c2 !important;
}


/* =========================================================
   7. BUTTON CONTRAST — ALL STATES
   ========================================================= */

/*
Black/dark buttons can never inherit dark or pale-red text.
*/
.pc-tools-scope :is(
    a.dt-btn.dark,
    button.dt-btn.dark,
    a.pc-dt-localnav__progress,
    a.pc-dt-localnav__progress.is-active,
    [class*="btn"][class*="dark"],
    [class*="button"][class*="dark"]
),
.pc-tools-scope :is(
    a.dt-btn.dark,
    button.dt-btn.dark,
    a.pc-dt-localnav__progress,
    a.pc-dt-localnav__progress.is-active,
    [class*="btn"][class*="dark"],
    [class*="button"][class*="dark"]
) *{
    background:#17191c !important;

    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
}


/* active My Progress */
.pc-dt-localnav a.pc-dt-localnav__progress,
.pc-dt-localnav a.pc-dt-localnav__progress.is-active,
.pc-dt-localnav a.pc-dt-localnav__progress:hover,
.pc-dt-localnav a.pc-dt-localnav__progress:focus,
.pc-dt-localnav a.pc-dt-localnav__progress:active,
.pc-dt-localnav a.pc-dt-localnav__progress:visited{
    background:#17191c !important;
    border-color:#17191c !important;

    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
}


/* =========================================================
   8. NO TINY TEXT
   ========================================================= */

/*
Anything users have to READ or INTERACT WITH gets a floor.
*/
.pc-tools-scope :is(
    p,
    li,
    label,
    button,
    input,
    select,
    textarea,
    summary
){
    font-size:max(14px,1em) !important;
}


/*
Small supporting labels are still allowed smaller, but never
9px or 10px.
*/
.pc-tools-scope :is(
    small,
    .dt-kicker,
    .dt-badge,
    .dt-count,
    .dt-source,
    .pc15-tool__tag,
    .pc15-stat span,
    .pc-centre-type,
    .tt-side-meta,
    .hp-label
){
    font-size:12px !important;
    line-height:1.45 !important;
}


/* =========================================================
   9. DESKTOP CONTENT WIDTH
   ========================================================= */

@media(min-width:1000px){

    .pc-tools-scope .dt-section > p,
    .pc-tools-scope .dt-section > ul,
    .pc-tools-scope .dt-section > ol,
    .pc-tools-scope .dt-prose,
    .pc-tools-scope .pc24-seo-content__copy{
        max-width:76ch !important;
    }

    .pc-tools-scope .dt-section > p,
    .pc-tools-scope .dt-prose p,
    .pc-tools-scope .pc24-seo-content p{
        font-size:16px !important;
        line-height:1.74 !important;
    }
}


/* =========================================================
   10. MOBILE
   ========================================================= */

@media(max-width:720px){

    .pc-tools-scope{
        padding-bottom:22px !important;
    }

    .pc-tools-scope .pc24-seo-content{
        margin-top:16px !important;
        margin-bottom:16px !important;
    }

    .pc-tools-scope .pc16-related{
        margin-top:16px !important;
        margin-bottom:0 !important;

        padding-top:0 !important;
        padding-bottom:0 !important;
    }

    .pc-tools-scope .dt-wrap > :is(
        .dt-card,
        .dt-section,
        .pc15-section,
        .pc16-directory,
        .pc16-related,
        .pc24-seo-content,
        .pcbook-section,
        .pc14-section
    ) + :is(
        .dt-card,
        .dt-section,
        .pc15-section,
        .pc16-directory,
        .pc16-related,
        .pc24-seo-content,
        .pcbook-section,
        .pc14-section
    ){
        margin-top:16px !important;
    }

    .pc-tools-scope :is(
        .pc15-tool,
        .dt-resource,
        .dt-action,
        .dt-topic,
        .dt-related,
        .pc16-related__links a,
        .pc16-directory-card,
        .ps-list > div,
        .ps-warning-grid > div,
        .pc-centre-card,
        .pcbook-card,
        .pc14-type,
        .tt-break-item
    ){
        width:100% !important;
        max-width:100% !important;

        min-width:0 !important;
    }

    .pc-tools-scope :is(
        .pc15-tool,
        .dt-resource,
        .dt-action,
        .dt-topic,
        .dt-related,
        .pc16-related__links a,
        .pc16-directory-card,
        .ps-list > div,
        .ps-warning-grid > div,
        .pc-centre-card,
        .pcbook-card,
        .pc14-type,
        .tt-break-item
    ) p{
        font-size:15px !important;
        line-height:1.62 !important;
    }
}


/* =========================================================
   PURECAR GUARANTEED PAGE END V26.4

   A real dedicated separator between the final content module
   and the global PureCar footer.

   This deliberately overrides the older:
   .pc-footer { margin-top:0 !important; }
   ========================================================= */


/* ---------------------------------------------------------
   PAGE BACKGROUND AT THE VERY END
   --------------------------------------------------------- */

body:has(.pc-tools-scope){
    background:#f6f6f4 !important;
}


/* ---------------------------------------------------------
   FINAL CONTENT BLOCKS

   Do not try to manufacture footer spacing through the card
   itself. The footer separator below owns that spacing.
   --------------------------------------------------------- */

body:has(.pc-tools-scope) :is(
    .pc24-seo-content,
    .pc16-related,
    .pc16-directory
){
    position:relative;
}


/*
If SEO content and Related Resources sit beside each other,
they still need normal module spacing.
*/
body:has(.pc-tools-scope)
.pc24-seo-content + .pc16-related,

body:has(.pc-tools-scope)
.pc16-related + .pc24-seo-content,

body:has(.pc-tools-scope)
.pc16-directory + .pc24-seo-content,

body:has(.pc-tools-scope)
.pc16-directory + .pc16-related{
    margin-top:24px !important;
}


/*
The final content card does not need to carry an artificial
bottom margin because we now create a real page-end band.
*/
body:has(.pc-tools-scope) :is(
    .pc24-seo-content,
    .pc16-related,
    .pc16-directory
):last-of-type{
    margin-bottom:0 !important;
}


/* ---------------------------------------------------------
   GUARANTEED FOOTER SEPARATOR
   --------------------------------------------------------- */

body:has(.pc-tools-scope) .pc-footer{
    position:relative !important;

    /*
      This overrides the previous margin-top:0 rule.
    */
    margin-top:44px !important;
}


/*
This is the important part.

The separator is physically attached to the footer, meaning
it exists regardless of which Blade view or final component
is above it.
*/
body:has(.pc-tools-scope) .pc-footer::before{
    content:"";

    position:absolute;

    left:0;
    right:0;

    top:-44px;

    height:44px;

    background:#f6f6f4;

    pointer-events:none;
}


/* ---------------------------------------------------------
   AVOID DOUBLE SPACING FROM PREVIOUS PATCHES
   --------------------------------------------------------- */

body:has(.pc-tools-scope) .pc-tools-scope{
    padding-bottom:0 !important;
}


/* Driving Tests page endings */
body:has(.pc-tools-scope)
.dt-page > .dt-wrap > :last-child{
    margin-bottom:0 !important;
}


/* MOT / generic Car Tools page endings */
body:has(.pc-tools-scope)
.ct-page > .ct-wrap > :last-child{
    margin-bottom:0 !important;
}


/* Main Car Tools hub */
body:has(.pc-tools-scope)
.pct-page{
    padding-bottom:0 !important;
}

body:has(.pc-tools-scope)
.pct-page .pct-wrap > :last-child{
    margin-bottom:0 !important;
}


/* ---------------------------------------------------------
   FINAL TWO MODULES

   The last two actual CONTENT modules must still have their
   normal separation from one another.
   --------------------------------------------------------- */

body:has(.pc-tools-scope)
.dt-wrap > :nth-last-child(2){
    margin-bottom:24px !important;
}


/*
If Related Resources is injected outside .dt-wrap it gets
the same treatment.
*/
body:has(.pc-tools-scope)
.pc24-seo-content{
    margin-bottom:24px !important;
}

body:has(.pc-tools-scope)
.pc24-seo-content:last-of-type{
    margin-bottom:0 !important;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media(max-width:720px){

    body:has(.pc-tools-scope) .pc-footer{
        margin-top:28px !important;
    }

    body:has(.pc-tools-scope) .pc-footer::before{
        top:-28px;

        height:28px;
    }

    body:has(.pc-tools-scope)
    .pc24-seo-content + .pc16-related,

    body:has(.pc-tools-scope)
    .pc16-related + .pc24-seo-content,

    body:has(.pc-tools-scope)
    .pc16-directory + .pc24-seo-content,

    body:has(.pc-tools-scope)
    .pc16-directory + .pc16-related{
        margin-top:16px !important;
    }

    body:has(.pc-tools-scope)
    .dt-wrap > :nth-last-child(2){
        margin-bottom:16px !important;
    }

    body:has(.pc-tools-scope)
    .pc24-seo-content{
        margin-bottom:16px !important;
    }

    body:has(.pc-tools-scope)
    .pc24-seo-content:last-of-type{
        margin-bottom:0 !important;
    }
}


/* =========================================================
   PURECAR MOBILE THEORY EXAM V27
   Actual question-taking UX
   ========================================================= */

@media(max-width:720px){

    /*
     * -------------------------------------------------------
     * FOCUS MODE
     *
     * When the exam is actually running, remove everything
     * that isn't needed to answer the questions.
     * -------------------------------------------------------
     */

    body:has(#ttExam:not([hidden])) .pc-dt-localnav,
    body:has(#ttExam:not([hidden])) .dt-page .dt-breadcrumb,
    body:has(#ttExam:not([hidden])) .dt-page .dt-breadcrumbs,
    body:has(#ttExam:not([hidden])) .dt-page .dt-hero,
    body:has(#ttExam:not([hidden])) .pc24-seo-content,
    body:has(#ttExam:not([hidden])) .pc16-related,
    body:has(#ttExam:not([hidden])) .pc16-directory,
    body:has(#ttExam:not([hidden])) .pc-footer{
        display:none !important;
    }


    /*
     * Hide other information sections while answering.
     */
    body:has(#ttExam:not([hidden]))
    .dt-page
    .dt-section:has(#theoryApp)
    ~ .dt-section{
        display:none !important;
    }


    body:has(#ttExam:not([hidden]))
    .dt-page
    .dt-section:has(#theoryApp)
    > .dt-source{
        display:none !important;
    }


    body:has(#ttExam:not([hidden]))
    .pc-tools-scope{
        padding-bottom:8px !important;
    }


    body:has(#ttExam:not([hidden]))
    .dt-page .dt-wrap{
        width:calc(100% - 10px) !important;
        max-width:calc(100% - 10px) !important;

        margin-top:6px !important;
    }


    body:has(#ttExam:not([hidden]))
    .dt-page
    .dt-section:has(#theoryApp){
        margin-top:5px !important;

        padding:7px !important;

        border-radius:13px !important;

        box-shadow:none !important;
    }


    /*
     * -------------------------------------------------------
     * EXAM SHELL
     * -------------------------------------------------------
     */

    .pc-tools-scope .tt-shell{
        width:100% !important;
        max-width:100% !important;

        grid-template-columns:1fr !important;

        gap:10px !important;
    }


    .pc-tools-scope .tt-main{
        width:100% !important;
        max-width:100% !important;

        padding:13px 11px 12px !important;

        background:#fff !important;

        border:1px solid #dfe2e4 !important;
        border-radius:13px !important;
    }


    /*
     * Top line: question number + timer
     */
    .pc-tools-scope .tt-top{
        margin-bottom:8px !important;

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

        gap:10px !important;
    }


    .pc-tools-scope .tt-qnum,
    .pc-tools-scope .tt-timer{
        font-size:12.5px !important;
        line-height:1.2 !important;
        font-weight:850 !important;

        color:#4e555d !important;
    }


    .pc-tools-scope .tt-progress-wrap{
        height:5px !important;

        margin-bottom:13px !important;

        border-radius:999px !important;
    }


    /*
     * -------------------------------------------------------
     * QUESTION
     * -------------------------------------------------------
     */

    .pc-tools-scope .tt-question{
        margin:8px 0 13px !important;

        color:#17191c !important;
        -webkit-text-fill-color:#17191c !important;

        font-size:22px !important;
        line-height:1.28 !important;
        font-weight:850 !important;

        letter-spacing:-.015em !important;

        overflow-wrap:normal !important;
        word-break:normal !important;
    }


    /*
     * -------------------------------------------------------
     * ANSWERS
     * -------------------------------------------------------
     */

    .pc-tools-scope .tt-answers{
        display:grid !important;

        grid-template-columns:1fr !important;

        gap:8px !important;
    }


    .pc-tools-scope .tt-answer{
        width:100% !important;

        min-height:50px !important;

        padding:11px 12px !important;

        display:grid !important;
        grid-template-columns:34px minmax(0,1fr) !important;

        align-items:center !important;

        gap:10px !important;

        background:#fff !important;

        border:1.5px solid #d4d8dc !important;
        border-radius:11px !important;

        color:#272c31 !important;
        -webkit-text-fill-color:#272c31 !important;

        text-align:left !important;

        font-size:15.5px !important;
        line-height:1.42 !important;
        font-weight:650 !important;
    }


    .pc-tools-scope .tt-answer:hover{
        background:#faf8f4 !important;
    }


    .pc-tools-scope .tt-answer.selected{
        background:#f7f0e6 !important;

        border-color:#9e8f7d !important;

        color:#17191c !important;
        -webkit-text-fill-color:#17191c !important;
    }


    .pc-tools-scope .tt-answer.correct{
        background:#f7f0e6 !important;

        border-color:#b9a58e !important;

        color:#17191c !important;
        -webkit-text-fill-color:#17191c !important;
    }


    .pc-tools-scope .tt-answer.wrong{
        background:#fff4f3 !important;

        border-color:#dc8c95 !important;

        color:#17191c !important;
        -webkit-text-fill-color:#17191c !important;
    }


    .pc-tools-scope .tt-letter{
        width:34px !important;
        height:34px !important;

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

        background:#f1e6d8 !important;

        border-radius:9px !important;

        color:#17191c !important;
        -webkit-text-fill-color:#17191c !important;

        font-size:13px !important;
        line-height:1 !important;
        font-weight:900 !important;
    }


    .pc-tools-scope .tt-answer > span:last-child{
        min-width:0 !important;

        color:#272c31 !important;
        -webkit-text-fill-color:#272c31 !important;

        font-size:15.5px !important;
        line-height:1.42 !important;
    }


    /*
     * Visual questions
     */
    .pc-tools-scope .tt-image{
        margin:0 0 12px !important;

        border-radius:11px !important;

        overflow:hidden !important;
    }


    .pc-tools-scope .tt-image img{
        width:100% !important;
        height:auto !important;

        display:block !important;
    }


    /*
     * Explanation after topic-practice answers
     */
    .pc-tools-scope .tt-explain.show{
        margin-top:10px !important;

        padding:12px !important;

        background:#f7f0e6 !important;

        border:1px solid #e2d5c6 !important;
        border-radius:10px !important;

        color:#343a40 !important;
        -webkit-text-fill-color:#343a40 !important;

        font-size:14px !important;
        line-height:1.55 !important;
    }


    /*
     * -------------------------------------------------------
     * THE 3 CONTROLS
     *
     * Previous | Flag | Next
     *
     * The Blade has two wrapper DIVs. display:contents makes
     * the actual buttons participate in one three-column grid.
     * -------------------------------------------------------
     */

    .pc-tools-scope .tt-controls{
        width:100% !important;

        margin-top:11px !important;

        display:grid !important;

        grid-template-columns:
            repeat(3,minmax(0,1fr)) !important;

        gap:6px !important;
    }


    .pc-tools-scope .tt-controls > div{
        display:contents !important;
    }


    .pc-tools-scope .tt-controls button{
        width:100% !important;
        min-width:0 !important;

        min-height:38px !important;
        height:38px !important;

        margin:0 !important;

        padding:5px 4px !important;

        border-radius:8px !important;

        font-size:11.5px !important;
        line-height:1.05 !important;
        font-weight:850 !important;

        white-space:nowrap !important;
    }


    .pc-tools-scope #ttPrev{
        grid-column:1 !important;
    }


    .pc-tools-scope #ttFlag{
        grid-column:2 !important;

        background:#f7f0e6 !important;

        border-color:#d9cabb !important;

        color:#17191c !important;
        -webkit-text-fill-color:#17191c !important;
    }


    .pc-tools-scope #ttNext,
    .pc-tools-scope #ttFinish{
        grid-column:3 !important;

        background:#17191c !important;

        border-color:#17191c !important;

        color:#fff !important;
        -webkit-text-fill-color:#fff !important;
    }


    .pc-tools-scope #ttPrev:disabled{
        opacity:.45 !important;
    }


    /*
     * -------------------------------------------------------
     * QUESTION NUMBER PANEL
     * -------------------------------------------------------
     */

    .pc-tools-scope .tt-side{
        position:static !important;

        width:100% !important;

        padding:12px !important;

        background:#f7f0e6 !important;

        border:1px solid #e1d4c5 !important;
        border-radius:11px !important;
    }


    .pc-tools-scope .tt-side h3{
        margin:0 0 9px !important;

        font-size:14px !important;
    }


    .pc-tools-scope .tt-numbers{
        grid-template-columns:
            repeat(7,minmax(0,1fr)) !important;

        gap:5px !important;
    }


    .pc-tools-scope .tt-number{
        min-height:32px !important;
        height:32px !important;

        padding:0 !important;

        font-size:11px !important;
    }


    .pc-tools-scope .tt-side-meta{
        margin-top:9px !important;

        display:flex !important;
        flex-wrap:wrap !important;

        gap:5px 12px !important;

        font-size:11.5px !important;
        line-height:1.4 !important;
    }


    /*
     * Scroll targets should sit below the top of the screen.
     */
    #ttStart,
    #ttExam,
    #ttResults,
    #ttQuestion{
        scroll-margin-top:18px !important;
    }

}


/*
Very narrow phones
*/
@media(max-width:380px){

    .pc-tools-scope .tt-question{
        font-size:20.5px !important;
    }

    .pc-tools-scope .tt-answer,
    .pc-tools-scope .tt-answer > span:last-child{
        font-size:15px !important;
    }

    .pc-tools-scope .tt-controls button{
        font-size:10.8px !important;
    }

    .pc-tools-scope .tt-numbers{
        grid-template-columns:
            repeat(6,minmax(0,1fr)) !important;
    }
}


/* =========================================================
   PURECAR THEORY CONTROLS V27.1

   MOBILE:
   Previous | Next
       Flag
   ========================================================= */

@media(max-width:720px){

    .pc-tools-scope .tt-controls{
        display:grid !important;

        grid-template-columns:
            minmax(0,1fr)
            minmax(0,1fr) !important;

        grid-template-rows:
            38px
            34px !important;

        gap:7px 8px !important;

        width:100% !important;

        margin-top:11px !important;
    }


    /*
     Blade has wrapper divs around the controls.
     Remove them from the layout without changing HTML.
    */
    .pc-tools-scope .tt-controls > div{
        display:contents !important;
    }


    /*
     Previous
    */
    .pc-tools-scope #ttPrev{
        grid-column:1 !important;
        grid-row:1 !important;

        width:100% !important;
        height:38px !important;
        min-height:38px !important;

        margin:0 !important;
        padding:4px 8px !important;

        font-size:12px !important;
        font-weight:850 !important;

        border-radius:8px !important;
    }


    /*
     Next / Finish
    */
    .pc-tools-scope #ttNext,
    .pc-tools-scope #ttFinish{
        grid-column:2 !important;
        grid-row:1 !important;

        width:100% !important;
        height:38px !important;
        min-height:38px !important;

        margin:0 !important;
        padding:4px 8px !important;

        background:#17191c !important;
        border-color:#17191c !important;

        color:#fff !important;
        -webkit-text-fill-color:#fff !important;

        font-size:12px !important;
        font-weight:900 !important;

        border-radius:8px !important;
    }


    /*
     Flag is deliberately secondary.
     Smaller and centred underneath.
    */
    .pc-tools-scope #ttFlag{
        grid-column:1 / -1 !important;
        grid-row:2 !important;

        justify-self:center !important;

        width:auto !important;
        min-width:128px !important;
        max-width:165px !important;

        height:34px !important;
        min-height:34px !important;

        margin:0 !important;
        padding:3px 12px !important;

        background:#f7f0e6 !important;
        border:1px solid #d9cabb !important;

        color:#34383d !important;
        -webkit-text-fill-color:#34383d !important;

        font-size:11.5px !important;
        font-weight:800 !important;

        border-radius:8px !important;
    }

}


/* =========================================================
   PURECAR THEORY CONTROLS V28
   Real markup. No wrapper/grid hacks.
   ========================================================= */


/* DESKTOP */
.pc-tools-scope .tt-controls.tt-controls-v28{
    display:grid !important;

    grid-template-columns:
        auto
        auto
        minmax(0,1fr)
        auto !important;

    grid-template-areas:
        "prev flag spacer next" !important;

    align-items:center !important;

    gap:9px !important;

    width:100% !important;

    margin-top:18px !important;
}


.pc-tools-scope .tt-controls-v28 #ttPrev{
    grid-area:prev !important;
}


.pc-tools-scope .tt-controls-v28 #ttFlag{
    grid-area:flag !important;
}


.pc-tools-scope .tt-controls-v28 #ttNext,
.pc-tools-scope .tt-controls-v28 #ttFinish{
    grid-area:next !important;
}


.pc-tools-scope .tt-controls-v28 button{
    width:auto !important;

    margin:0 !important;

    min-height:40px !important;

    padding:7px 14px !important;

    border-radius:9px !important;

    font-size:13px !important;
    line-height:1 !important;
    font-weight:850 !important;
}


/* Previous = neutral */
.pc-tools-scope .tt-controls-v28 #ttPrev{
    background:#fff !important;

    border:1px solid #cfd4d8 !important;

    color:#343a40 !important;
    -webkit-text-fill-color:#343a40 !important;
}


/* Flag = deliberately secondary */
.pc-tools-scope .tt-controls-v28 #ttFlag{
    background:#f7f0e6 !important;

    border:1px solid #dacbbb !important;

    color:#3c4044 !important;
    -webkit-text-fill-color:#3c4044 !important;
}


/* Next / Finish = clear main navigation */
.pc-tools-scope .tt-controls-v28 #ttNext,
.pc-tools-scope .tt-controls-v28 #ttFinish{
    background:#17191c !important;

    border:1px solid #17191c !important;

    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
}


/* =========================================================
   MOBILE
   Previous | Next
       Flag
   ========================================================= */

@media(max-width:720px){

    .pc-tools-scope .tt-controls.tt-controls-v28{
        display:grid !important;

        grid-template-columns:
            minmax(0,1fr)
            minmax(0,1fr) !important;

        grid-template-areas:
            "prev next"
            "flag flag" !important;

        grid-template-rows:
            auto
            auto !important;

        gap:7px 8px !important;

        width:100% !important;

        margin-top:10px !important;
    }


    .pc-tools-scope .tt-controls-v28 #ttPrev{
        grid-area:prev !important;

        width:100% !important;

        height:38px !important;
        min-height:38px !important;

        padding:5px 8px !important;

        font-size:12.5px !important;
    }


    .pc-tools-scope .tt-controls-v28 #ttNext,
    .pc-tools-scope .tt-controls-v28 #ttFinish{
        grid-area:next !important;

        width:100% !important;

        height:38px !important;
        min-height:38px !important;

        padding:5px 8px !important;

        font-size:12.5px !important;
    }


    .pc-tools-scope .tt-controls-v28 #ttFlag{
        grid-area:flag !important;

        justify-self:center !important;

        width:auto !important;

        min-width:118px !important;
        max-width:150px !important;

        height:32px !important;
        min-height:32px !important;

        padding:4px 11px !important;

        font-size:12px !important;

        border-radius:8px !important;
    }


    .pc-tools-scope .tt-controls-v28 #ttPrev:disabled{
        opacity:.42 !important;
    }

}


/* =========================================================
   PURECAR THEORY FLAG FULL WIDTH V28.1
   Mobile:
   [ Previous ] [ Next ]
   [      Flag question      ]
   ========================================================= */

@media(max-width:720px){

    .pc-tools-scope .tt-controls-v28 #ttFlag{
        grid-area:flag !important;

        justify-self:stretch !important;

        width:100% !important;
        max-width:none !important;
        min-width:0 !important;

        height:34px !important;
        min-height:34px !important;

        margin:0 !important;
        padding:4px 10px !important;

        background:#fff1f2 !important;

        border:1px solid #e4aeb5 !important;

        color:#b51220 !important;
        -webkit-text-fill-color:#b51220 !important;

        font-size:12px !important;
        line-height:1 !important;
        font-weight:850 !important;

        border-radius:8px !important;
    }


    .pc-tools-scope .tt-controls-v28 #ttFlag:hover,
    .pc-tools-scope .tt-controls-v28 #ttFlag:focus{
        background:#ffe8ea !important;
        border-color:#d98994 !important;

        color:#9f101c !important;
        -webkit-text-fill-color:#9f101c !important;
    }

}


/* =========================================================
   PURECAR THEORY SELECTED GREEN V28.2
   Selected answer = subtle green, not bright green
   ========================================================= */

.pc-tools-scope .tt-answer.selected{
    background:#f0f7f2 !important;

    border-color:#a8c9b2 !important;

    color:#1f3326 !important;
    -webkit-text-fill-color:#1f3326 !important;
}

.pc-tools-scope .tt-answer.selected .tt-letter{
    background:#dfeee3 !important;

    color:#21442d !important;
    -webkit-text-fill-color:#21442d !important;
}


/* Correct answer after checking */
.pc-tools-scope .tt-answer.correct{
    background:#eaf5ed !important;

    border-color:#88b697 !important;

    color:#193522 !important;
    -webkit-text-fill-color:#193522 !important;
}


/* Wrong answer remains soft red */
.pc-tools-scope .tt-answer.wrong{
    background:#fff1f2 !important;

    border-color:#dfa1a9 !important;

    color:#4b2026 !important;
    -webkit-text-fill-color:#4b2026 !important;
}


/* =========================================================
   PURECAR JOURNEY TABS NO RED UNDERLINE V28.3
   ========================================================= */

.pc-tools-scope .pc15-stage,
.pc-tools-scope .pc15-stage:link,
.pc-tools-scope .pc15-stage:visited,
.pc-tools-scope .pc15-stage:hover,
.pc-tools-scope .pc15-stage:focus,
.pc-tools-scope .pc15-stage:active{
    text-decoration:none !important;

    color:#17191c !important;

    border-bottom-color:transparent !important;
}


/* Remove any inherited underline/pseudo underline */
.pc-tools-scope .pc15-stage::before,
.pc-tools-scope .pc15-stage::after,
.pc-tools-scope .pc15-stage h3::before,
.pc-tools-scope .pc15-stage h3::after{
    text-decoration:none !important;
    border-bottom:0 !important;

    box-shadow:none !important;
}


/* Headings stay plain charcoal */
.pc-tools-scope .pc15-stage h3{
    color:#17191c !important;
    -webkit-text-fill-color:#17191c !important;

    text-decoration:none !important;

    border:0 !important;
}


/* Supporting copy */
.pc-tools-scope .pc15-stage p{
    color:#59616a !important;
    -webkit-text-fill-color:#59616a !important;

    text-decoration:none !important;
}


/*
Keep only the numbered circle as the restrained red accent.
*/
.pc-tools-scope .pc15-stage b{
    background:#d7192a !important;

    color:#fff !important;
    -webkit-text-fill-color:#fff !important;

    text-decoration:none !important;
}


/* Hover = cream surface, no red underline */
.pc-tools-scope .pc15-stage:hover{
    background:#f7f0e6 !important;
}


/* Keyboard focus remains visible without red underline */
.pc-tools-scope .pc15-stage:focus-visible{
    outline:2px solid #17191c !important;
    outline-offset:-3px !important;

    text-decoration:none !important;
}


/* =========================================================
   PURECAR MOT ICONS V30.1
   ========================================================= */

/*
MOT hub icon tiles.
The existing card layout remains untouched.
*/

.pc-tools-scope
:is(
    .mot-tool-icon,
    .mot-icon,
    .ct-tool-icon,
    [class*="mot"][class*="icon"]
) svg{
    display:block;

    width:24px;
    height:24px;

    flex:none;

    color:#d7192a;

    overflow:visible;
}


/*
If the current MOT hub uses a generic icon wrapper, keep the
warm PureCar treatment rather than a flat red block.
*/
.pc-tools-scope
a[href*="/car-tools/mot"]
:is(
    [class*="icon"],
    [class*="ico"]
){
    color:#d7192a !important;
}


/*
Make sure SVG strokes are crisp and inherit the correct colour.
*/
.pc-tools-scope
a[href*="/car-tools/mot"]
:is(
    [class*="icon"],
    [class*="ico"]
) svg,

.pc-tools-scope
a[href="/car-tools"]
:is(
    [class*="icon"],
    [class*="ico"]
) svg{
    width:24px !important;
    height:24px !important;

    color:#d7192a !important;

    stroke-linecap:round;
    stroke-linejoin:round;
}


@media(max-width:720px){

    .pc-tools-scope
    a[href*="/car-tools/mot"]
    :is(
        [class*="icon"],
        [class*="ico"]
    ) svg,

    .pc-tools-scope
    a[href="/car-tools"]
    :is(
        [class*="icon"],
        [class*="ico"]
    ) svg{
        width:22px !important;
        height:22px !important;
    }

}


/* =========================================================
   PURECAR MOT ICON WRAPPER FIX V30.2
   ========================================================= */

.pc-tools-scope .pc-mot-icon{
    width:48px !important;
    height:48px !important;

    margin:0 0 17px !important;
    padding:0 !important;

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

    flex:none !important;

    background:
        linear-gradient(
            145deg,
            #fbf6ee,
            #f6ede2
        ) !important;

    border:1px solid #eadfd2 !important;
    border-radius:13px !important;

    color:#d7192a !important;

    box-shadow:
        0 5px 15px rgba(20,22,25,.045) !important;
}


.pc-tools-scope .pc-mot-icon svg{
    display:block !important;

    width:24px !important;
    height:24px !important;

    color:#d7192a !important;

    flex:none !important;

    overflow:visible !important;
}


.pc-tools-scope .pc-mot-icon svg path,
.pc-tools-scope .pc-mot-icon svg circle,
.pc-tools-scope .pc-mot-icon svg rect{
    vector-effect:
        non-scaling-stroke;
}


/*
Subtle card hover treatment.
*/
.pc-tools-scope a:hover .pc-mot-icon{
    background:#fff1f2 !important;

    border-color:#e7bcc2 !important;

    transform:translateY(-1px);
}


@media(max-width:720px){

    .pc-tools-scope .pc-mot-icon{
        width:44px !important;
        height:44px !important;

        margin-bottom:13px !important;

        border-radius:12px !important;
    }

    .pc-tools-scope .pc-mot-icon svg{
        width:22px !important;
        height:22px !important;
    }
}


/* =========================================================
   PURECAR HAZARD ENGINE V31
   ========================================================= */

.pc-tools-scope .hp-app [hidden]{
    display:none !important;
}

.pc-tools-scope .hp-stage{
    touch-action:manipulation;
}

.pc-tools-scope .hp-overlay{
    z-index:5;
}

.pc-tools-scope .hp-countdown{
    z-index:6;
}

.pc-tools-scope .hp-flash{
    z-index:7;
}

.pc-tools-scope .hp-system-error{
    margin:0 0 18px;

    padding:15px 16px;

    display:grid;

    gap:4px;

    background:#fff1f2;

    border:1px solid #e5abb2;
    border-radius:12px;

    color:#17191c;
}

.pc-tools-scope .hp-system-error strong{
    color:#b51220 !important;

    font-size:15px;
}

.pc-tools-scope .hp-system-error span{
    color:#4e555d !important;

    font-size:14px;
    line-height:1.5;
}

@media(max-width:720px){

    .pc-tools-scope .hp-stage{
        border-radius:12px !important;
    }

    .pc-tools-scope .hp-hazard-btn{
        width:100% !important;

        min-height:48px !important;

        font-size:14px !important;
    }

    .pc-tools-scope .hp-controls{
        gap:8px !important;
    }
}


/* =========================================================
   PURECAR HAZARD V32 MOBILE UX
   ========================================================= */

/*
High-DPI Canvas player
*/
.pc-tools-scope .hp-stage canvas{
    display:block !important;

    width:100% !important;
    height:auto !important;

    aspect-ratio:16 / 9 !important;

    background:#303438 !important;

    touch-action:none !important;

    user-select:none !important;
    -webkit-user-select:none !important;

    cursor:crosshair !important;
}


/*
Make sure the player itself receives touch/click input.
*/
.pc-tools-scope .hp-stage{
    position:relative !important;

    width:100% !important;
    max-width:100% !important;

    min-width:0 !important;

    overflow:hidden !important;

    touch-action:none !important;

    background:#17191c !important;
}


/*
Overlay must disappear COMPLETELY when hidden or it can block
mobile taps even though the video looks visible.
*/
.pc-tools-scope .hp-overlay[hidden],
.pc-tools-scope .hp-countdown[hidden]{
    display:none !important;

    pointer-events:none !important;
}


.pc-tools-scope .hp-overlay:not([hidden]),
.pc-tools-scope .hp-countdown:not([hidden]){
    pointer-events:auto !important;
}


/*
Clip transition screen.
*/
.pc-tools-scope .hp-overlay{
    backdrop-filter:blur(4px);

    background:rgba(17,19,22,.78) !important;
}


.pc-tools-scope .hp-overlay b{
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
}


.pc-tools-scope .hp-overlay p{
    color:#f0f1f2 !important;
    -webkit-text-fill-color:#f0f1f2 !important;
}


/*
Response button.
*/
.pc-tools-scope .hp-hazard-btn{
    background:#d7192a !important;

    border:1px solid #d7192a !important;

    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
}


/*
Auto-next means Next is now only a fallback.
*/
.pc-tools-scope #hpNext{
    display:none !important;
}


/*
A replay tap during the short practice transition still works.
*/
.pc-tools-scope #hpReplay:not(:disabled){
    background:#f7f0e6 !important;

    border-color:#dfd0be !important;

    color:#17191c !important;
    -webkit-text-fill-color:#17191c !important;
}


/* =========================================================
   MOBILE FOCUS MODE
   ========================================================= */

@media(max-width:720px){

    /*
    Once the 14-clip session begins, the user should be testing,
    not fighting the website navigation/footer.
    */
    body:has(#hazardApp.hp-session-active)
    .pc-dt-localnav,

    body:has(#hazardApp.hp-session-active)
    .dt-breadcrumb,

    body:has(#hazardApp.hp-session-active)
    .dt-breadcrumbs,

    body:has(#hazardApp.hp-session-active)
    .hp-sim-hero,

    body:has(#hazardApp.hp-session-active)
    .pc24-seo-content,

    body:has(#hazardApp.hp-session-active)
    .pc16-related,

    body:has(#hazardApp.hp-session-active)
    .pc-footer{
        display:none !important;
    }


    body:has(#hazardApp.hp-session-active)
    .pc-tools-scope{
        padding-bottom:8px !important;
    }


    body:has(#hazardApp.hp-session-active)
    .dt-page{
        padding-top:0 !important;
    }


    body:has(#hazardApp.hp-session-active)
    .dt-page .dt-wrap{
        width:calc(100% - 8px) !important;
        max-width:calc(100% - 8px) !important;

        margin-top:4px !important;
    }


    body:has(#hazardApp.hp-session-active)
    #hazardApp{
        margin-top:4px !important;

        padding:8px !important;

        border-radius:13px !important;

        box-shadow:none !important;
    }


    /*
    Player header.
    */
    .pc-tools-scope .hp-topbar{
        margin-bottom:8px !important;

        gap:8px !important;
    }


    .pc-tools-scope .hp-topbar strong{
        font-size:15px !important;
        line-height:1.25 !important;
    }


    .pc-tools-scope .hp-scorebox strong{
        font-size:18px !important;
    }


    .pc-tools-scope .hp-label,
    .pc-tools-scope .hp-scorebox span{
        font-size:11px !important;
    }


    /*
    Maximum screen width for the road scene.
    */
    .pc-tools-scope .hp-stage-wrap{
        width:100% !important;
        max-width:none !important;

        margin:0 !important;
    }


    .pc-tools-scope .hp-stage{
        width:100% !important;

        border-radius:11px !important;

        box-shadow:
            0 8px 25px rgba(15,18,20,.18) !important;
    }


    .pc-tools-scope .hp-stage canvas{
        width:100% !important;
        max-width:100% !important;

        aspect-ratio:16 / 9 !important;

        border-radius:11px !important;
    }


    /*
    Countdown must remain readable.
    */
    .pc-tools-scope .hp-countdown{
        font-size:48px !important;

        background:rgba(17,19,22,.62) !important;

        color:#fff !important;
        -webkit-text-fill-color:#fff !important;
    }


    /*
    Overlay text on small displays.
    */
    .pc-tools-scope .hp-overlay{
        padding:14px !important;
    }


    .pc-tools-scope .hp-overlay b{
        font-size:20px !important;
    }


    .pc-tools-scope .hp-overlay p{
        margin:7px 0 0 !important;

        font-size:13px !important;
        line-height:1.45 !important;
    }


    /*
    Thin progress bar immediately below footage.
    */
    .pc-tools-scope .hp-progress{
        height:5px !important;

        margin-top:7px !important;
    }


    .pc-tools-scope .hp-progress i{
        background:#d7192a !important;
    }


    /*
    Mobile controls remain directly below the video.
    This stays visible while the user works through a clip.
    */
    .pc-tools-scope .hp-controls{
        position:sticky !important;

        bottom:5px !important;
        z-index:30 !important;

        width:100% !important;

        margin-top:7px !important;
        padding:7px !important;

        display:grid !important;

        grid-template-columns:1fr !important;

        gap:6px !important;

        background:rgba(252,251,248,.96) !important;

        border:1px solid #e1e3e5 !important;
        border-radius:11px !important;

        box-shadow:
            0 8px 24px rgba(20,22,25,.12) !important;

        backdrop-filter:blur(8px);
    }


    .pc-tools-scope .hp-hazard-btn{
        width:100% !important;

        min-height:48px !important;

        margin:0 !important;
        padding:10px 12px !important;

        border-radius:9px !important;

        font-size:14px !important;
        line-height:1.15 !important;
        font-weight:900 !important;
    }


    .pc-tools-scope #hpReplay{
        width:100% !important;

        min-height:36px !important;

        margin:0 !important;
        padding:5px 10px !important;

        font-size:12px !important;
    }


    /*
    This is useful feedback but shouldn't consume the phone.
    */
    .pc-tools-scope .hp-clicks{
        margin-top:6px !important;

        font-size:11.5px !important;
    }


    /*
    Compact flash confirmation.
    */
    .pc-tools-scope .hp-flash{
        bottom:10px !important;

        max-width:calc(100% - 20px) !important;

        padding:7px 11px !important;

        font-size:11px !important;
    }

}


/*
Very narrow devices.
*/
@media(max-width:380px){

    .pc-tools-scope .hp-overlay b{
        font-size:18px !important;
    }

    .pc-tools-scope .hp-overlay p{
        font-size:12px !important;
    }

    .pc-tools-scope .hp-hazard-btn{
        min-height:46px !important;

        font-size:13px !important;
    }

}


/* =========================================================
   PURECAR HAZARD REAL VIDEO V33
   ========================================================= */


/*
Remove the previous animated visual layer.
*/
.pc-tools-scope #hpSvg,
.pc-tools-scope #hpStage > canvas{
    display:none !important;
}


/*
Real video stage.
*/
.pc-tools-scope #hpStage{
    position:relative !important;

    width:100% !important;
    max-width:100% !important;

    aspect-ratio:16 / 9 !important;

    overflow:hidden !important;

    background:#101214 !important;

    border-radius:16px !important;

    box-shadow:
        0 16px 40px rgba(20,22,25,.14) !important;

    isolation:isolate;

    touch-action:manipulation !important;
}


.pc-tools-scope #hpVideoV33{
    position:absolute !important;

    inset:0 !important;

    width:100% !important;
    height:100% !important;

    display:block !important;

    object-fit:cover !important;
    object-position:center !important;

    background:#101214 !important;

    z-index:1 !important;

    pointer-events:none !important;
}


/*
Entire screen becomes the hazard button.
*/
.pc-tools-scope #hpVideoHitV33{
    position:absolute !important;

    inset:0 !important;

    z-index:3 !important;

    display:block !important;

    width:100% !important;
    height:100% !important;

    margin:0 !important;
    padding:0 !important;

    border:0 !important;
    border-radius:0 !important;

    background:transparent !important;

    box-shadow:none !important;

    cursor:crosshair !important;

    touch-action:manipulation !important;

    -webkit-tap-highlight-color:
        transparent !important;
}


/*
Keep overlays above the click surface when shown.
*/
.pc-tools-scope #hpOverlay{
    position:absolute !important;

    inset:0 !important;

    z-index:8 !important;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    padding:28px !important;

    text-align:center;

    background:
        linear-gradient(
            180deg,
            rgba(13,15,17,.64),
            rgba(13,15,17,.76)
        ) !important;

    backdrop-filter:
        blur(3px);

    color:#fff !important;
}


.pc-tools-scope #hpOverlay[hidden]{
    display:none !important;

    pointer-events:none !important;
}


.pc-tools-scope #hpOverlay b{
    color:#fff !important;

    font-size:27px !important;
    font-weight:950 !important;

    -webkit-text-fill-color:#fff !important;
}


.pc-tools-scope #hpOverlay p{
    max-width:560px;

    margin:10px auto 0 !important;

    color:#f4f5f6 !important;

    font-size:16px !important;
    line-height:1.55 !important;

    -webkit-text-fill-color:#f4f5f6 !important;
}


/*
Visual confirmation of a screen tap.
*/
@keyframes pcHazardPulseV33{

    0%{
        box-shadow:
            inset 0 0 0 0
            rgba(215,25,42,0);
    }

    35%{
        box-shadow:
            inset 0 0 0 5px
            rgba(215,25,42,.75);
    }

    100%{
        box-shadow:
            inset 0 0 0 0
            rgba(215,25,42,0);
    }
}


.pc-tools-scope
#hpStage.hp-response-pulse{
    animation:
        pcHazardPulseV33
        .34s ease-out;
}


/*
Primary hazard button remains underneath for accessibility.
*/
.pc-tools-scope #hpHazardBtn{
    min-height:50px !important;

    background:#d7192a !important;

    border:1px solid #d7192a !important;

    border-radius:11px !important;

    color:#fff !important;

    font-weight:950 !important;

    -webkit-text-fill-color:#fff !important;
}


.pc-tools-scope #hpHazardBtn:disabled{
    opacity:.48 !important;

    cursor:not-allowed !important;
}


/*
Auto-next replaces manual Next.
*/
.pc-tools-scope #hpNext{
    display:none !important;
}


.pc-tools-scope .hp-auto-next{
    color:#575f67 !important;

    background:#f5f1e9 !important;

    border:1px solid #e2d8ca !important;

    border-radius:999px !important;

    padding:6px 10px !important;

    font-size:12px !important;

    -webkit-text-fill-color:#575f67 !important;
}


/*
Progress bar.
*/
.pc-tools-scope .hp-progress{
    overflow:hidden !important;
}


.pc-tools-scope .hp-progress i,
.pc-tools-scope #hpProgress{
    transition:
        width .15s linear !important;
}


/* =========================================================
   MOBILE HAZARD TEST MODE
   ========================================================= */

@media(max-width:720px){

    /*
    Remove distractions once the test starts.
    */
    body:has(#hazardApp.hp-session-active)
    .pc-dt-localnav,

    body:has(#hazardApp.hp-session-active)
    .dt-breadcrumb,

    body:has(#hazardApp.hp-session-active)
    .dt-breadcrumbs,

    body:has(#hazardApp.hp-session-active)
    .hp-sim-hero,

    body:has(#hazardApp.hp-session-active)
    .pc24-seo-content,

    body:has(#hazardApp.hp-session-active)
    .pc16-related,

    body:has(#hazardApp.hp-session-active)
    .pc-footer{
        display:none !important;
    }


    body:has(#hazardApp.hp-session-active){
        background:#f7f6f2 !important;
    }


    body:has(#hazardApp.hp-session-active)
    .pc-tools-scope{
        padding:
            0 0 10px !important;
    }


    body:has(#hazardApp.hp-session-active)
    .dt-page{
        padding:
            4px 0 0 !important;
    }


    body:has(#hazardApp.hp-session-active)
    .dt-wrap{
        width:
            calc(100% - 8px) !important;

        max-width:
            calc(100% - 8px) !important;
    }


    body:has(#hazardApp.hp-session-active)
    #hazardApp{
        margin:0 !important;

        padding:7px !important;

        border-radius:12px !important;

        box-shadow:none !important;
    }


    /*
    Proper widescreen player.
    */
    .pc-tools-scope #hpStage{
        width:100% !important;

        aspect-ratio:16 / 9 !important;

        margin:0 !important;

        border-radius:10px !important;

        box-shadow:
            0 8px 22px
            rgba(20,22,25,.16) !important;
    }


    .pc-tools-scope #hpVideoV33{
        width:100% !important;
        height:100% !important;

        object-fit:cover !important;
    }


    /*
    Overlay readable but does not hide most of the road.
    */
    .pc-tools-scope #hpOverlay{
        padding:16px !important;
    }


    .pc-tools-scope #hpOverlay b{
        font-size:20px !important;
    }


    .pc-tools-scope #hpOverlay p{
        margin-top:6px !important;

        font-size:13px !important;
        line-height:1.4 !important;
    }


    /*
    Compact information bar.
    */
    .pc-tools-scope .hp-topbar{
        margin-bottom:7px !important;

        gap:6px !important;
    }


    .pc-tools-scope .hp-topbar strong{
        font-size:14px !important;
        line-height:1.25 !important;
    }


    .pc-tools-scope .hp-label,
    .pc-tools-scope .hp-scorebox span{
        font-size:11px !important;
    }


    .pc-tools-scope .hp-scorebox strong{
        font-size:16px !important;
    }


    /*
    The controls stay immediately under the video.
    */
    .pc-tools-scope .hp-controls{
        position:sticky !important;

        bottom:5px !important;

        z-index:40 !important;

        width:100% !important;

        margin-top:7px !important;

        padding:7px !important;

        display:grid !important;

        grid-template-columns:
            1fr !important;

        gap:6px !important;

        background:
            rgba(
                252,
                251,
                248,
                .97
            ) !important;

        border:
            1px solid
            #dedfe1 !important;

        border-radius:11px !important;

        box-shadow:
            0 8px 24px
            rgba(20,22,25,.12) !important;

        backdrop-filter:
            blur(8px);
    }


    .pc-tools-scope #hpHazardBtn{
        width:100% !important;

        min-height:51px !important;

        margin:0 !important;

        padding:
            10px 12px !important;

        font-size:14px !important;
        line-height:1.2 !important;
    }


    .pc-tools-scope #hpReplay{
        width:100% !important;

        min-height:37px !important;

        margin:0 !important;

        padding:
            6px 10px !important;

        background:#f5efe6 !important;

        border:
            1px solid
            #e0d4c5 !important;

        color:#17191c !important;

        font-size:12px !important;

        -webkit-text-fill-color:
            #17191c !important;
    }


    /*
    Prevent accidental browser zoom/selection when tapping
    repeatedly for hazard responses.
    */
    .pc-tools-scope #hpVideoHitV33{
        touch-action:
            manipulation !important;

        user-select:none !important;

        -webkit-user-select:
            none !important;
    }


    .pc-tools-scope .hp-clicks{
        margin-top:5px !important;

        font-size:11px !important;
    }


    /*
    Feedback should not become a wall of text while auto-next
    is counting down.
    */
    .pc-tools-scope #hpFeedback{
        max-height:195px !important;

        overflow:auto !important;

        margin-top:8px !important;

        padding:11px !important;

        border-radius:10px !important;
    }


    .pc-tools-scope #hpFeedback article{
        padding:
            9px 0 !important;
    }


    .pc-tools-scope #hpFeedback article p{
        margin:
            5px 0 !important;

        font-size:12.5px !important;
        line-height:1.45 !important;
    }

}


@media(max-width:390px){

    .pc-tools-scope #hpHazardBtn{
        min-height:48px !important;

        font-size:13px !important;
    }


    .pc-tools-scope #hpOverlay b{
        font-size:18px !important;
    }


    .pc-tools-scope #hpOverlay p{
        font-size:12px !important;
    }

}


/* =========================================================
   PURECAR HAZARD STREAM V34
   ========================================================= */

#hazardApp.hp-buffering #hpStage::after{
    content:"Loading road footage…";

    position:absolute;

    left:50%;
    bottom:18px;

    z-index:20;

    transform:
        translateX(-50%);

    padding:
        8px 13px;

    background:
        rgba(17,19,22,.84);

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

    border-radius:
        999px;

    color:#fff;

    font-size:13px;
    line-height:1;
    font-weight:800;

    white-space:nowrap;

    pointer-events:none;

    -webkit-text-fill-color:#fff;
}


/*
The current video gets bandwidth priority.
Do not visually expose a stalled frame as if the test has
stopped responding.
*/
#hazardApp.hp-buffering
#hpVideoV33{
    opacity:.96;
}


/*
Smooth video should fill the player but never stretch.
*/
.pc-tools-scope
.hp-real-video{
    object-fit:cover !important;

    image-rendering:auto !important;

    transform:
        translateZ(0);

    backface-visibility:
        hidden;
}


/*
Keep the hazard tap layer usable while the browser buffers.
*/
#hazardApp.hp-buffering
#hpVideoHitV33{
    pointer-events:none !important;
}


@media(max-width:720px){

    #hazardApp.hp-buffering
    #hpStage::after{
        bottom:9px;

        padding:
            7px 10px;

        font-size:
            11px;
    }

}


/* =========================================================
   PURECAR HAZARD REAL EVENTS V35
   ========================================================= */

.pc-tools-scope #hpSvg,
.pc-tools-scope #hpStage > canvas{
    display:none !important;
}


.pc-tools-scope #hpStage{
    position:relative !important;

    width:100% !important;
    max-width:100% !important;

    aspect-ratio:16 / 9 !important;

    overflow:hidden !important;

    background:#111315 !important;

    border-radius:15px !important;

    box-shadow:
        0 15px 38px
        rgba(20,22,25,.14) !important;

    isolation:isolate;
}


.pc-tools-scope #hpVideoV35{
    position:absolute !important;

    inset:0 !important;

    width:100% !important;
    height:100% !important;

    display:block !important;

    object-fit:cover !important;
    object-position:center !important;

    background:#111315 !important;

    z-index:1 !important;

    pointer-events:none !important;
}


.pc-tools-scope #hpVideoHitV35{
    position:absolute !important;

    inset:0 !important;

    z-index:3 !important;

    width:100% !important;
    height:100% !important;

    margin:0 !important;
    padding:0 !important;

    border:0 !important;

    background:transparent !important;

    cursor:crosshair !important;

    touch-action:manipulation !important;

    -webkit-tap-highlight-color:
        transparent !important;
}


.pc-tools-scope #hpOverlay{
    position:absolute !important;

    inset:0 !important;

    z-index:10 !important;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    padding:25px !important;

    text-align:center;

    background:
        rgba(15,17,19,.72) !important;

    backdrop-filter:
        blur(3px);
}


.pc-tools-scope #hpOverlay[hidden]{
    display:none !important;

    pointer-events:none !important;
}


.pc-tools-scope #hpOverlay b{
    color:#fff !important;

    font-size:25px !important;
    font-weight:950 !important;

    -webkit-text-fill-color:#fff !important;
}


.pc-tools-scope #hpOverlay p{
    max-width:560px;

    margin:
        8px auto 0 !important;

    color:#f2f3f4 !important;

    font-size:15px !important;
    line-height:1.5 !important;

    -webkit-text-fill-color:#f2f3f4 !important;
}


#hazardApp.hp-buffering-v35
#hpStage::after{
    content:"Buffering…";

    position:absolute;

    left:50%;
    bottom:14px;

    z-index:20;

    transform:
        translateX(-50%);

    padding:
        8px 12px;

    background:
        rgba(15,17,19,.88);

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

    border-radius:
        999px;

    color:#fff;

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

    pointer-events:none;

    -webkit-text-fill-color:#fff;
}


#hazardApp.hp-buffering-v35
#hpVideoHitV35{
    pointer-events:none !important;
}


.pc-tools-scope #hpHazardBtn{
    min-height:50px !important;

    background:#d7192a !important;

    border:
        1px solid #d7192a !important;

    color:#fff !important;

    font-weight:950 !important;

    -webkit-text-fill-color:#fff !important;
}


.pc-tools-scope #hpNext{
    display:none !important;
}


.pc-tools-scope .hp-auto-next{
    padding:
        6px 10px !important;

    background:#f7f0e6 !important;

    border:
        1px solid #dfd3c4 !important;

    border-radius:
        999px !important;

    color:#4c535a !important;

    font-size:12px !important;

    -webkit-text-fill-color:#4c535a !important;
}


@keyframes pcHazardPulse35{

    0%{
        box-shadow:
            inset 0 0 0 0
            rgba(215,25,42,0);
    }

    35%{
        box-shadow:
            inset 0 0 0 5px
            rgba(215,25,42,.8);
    }

    100%{
        box-shadow:
            inset 0 0 0 0
            rgba(215,25,42,0);
    }
}


.pc-tools-scope
#hpStage.hp-response-pulse{
    animation:
        pcHazardPulse35
        .32s ease-out;
}


/* =========================================================
   PHONE TEST MODE
   ========================================================= */

@media(max-width:720px){

    body:has(#hazardApp.hp-session-active)
    .pc-dt-localnav,

    body:has(#hazardApp.hp-session-active)
    .dt-breadcrumb,

    body:has(#hazardApp.hp-session-active)
    .dt-breadcrumbs,

    body:has(#hazardApp.hp-session-active)
    .hp-sim-hero,

    body:has(#hazardApp.hp-session-active)
    .pc24-seo-content,

    body:has(#hazardApp.hp-session-active)
    .pc16-related,

    body:has(#hazardApp.hp-session-active)
    .pc-footer{
        display:none !important;
    }


    body:has(#hazardApp.hp-session-active)
    .pc-tools-scope{
        padding-bottom:
            8px !important;
    }


    body:has(#hazardApp.hp-session-active)
    .dt-page{
        padding-top:
            3px !important;
    }


    body:has(#hazardApp.hp-session-active)
    .dt-wrap{
        width:
            calc(100% - 8px) !important;

        max-width:
            calc(100% - 8px) !important;
    }


    body:has(#hazardApp.hp-session-active)
    #hazardApp{
        margin:0 !important;

        padding:
            7px !important;

        border-radius:
            11px !important;

        box-shadow:none !important;
    }


    .pc-tools-scope #hpStage{
        width:100% !important;

        aspect-ratio:
            16 / 9 !important;

        border-radius:
            10px !important;

        box-shadow:
            0 8px 22px
            rgba(20,22,25,.16) !important;
    }


    .pc-tools-scope #hpVideoV35{
        width:100% !important;
        height:100% !important;

        object-fit:cover !important;
    }


    .pc-tools-scope #hpOverlay{
        padding:
            14px !important;
    }


    .pc-tools-scope #hpOverlay b{
        font-size:
            19px !important;
    }


    .pc-tools-scope #hpOverlay p{
        margin-top:
            5px !important;

        font-size:
            12.5px !important;
        line-height:
            1.4 !important;
    }


    .pc-tools-scope .hp-topbar{
        margin-bottom:
            6px !important;

        gap:
            6px !important;
    }


    .pc-tools-scope .hp-topbar strong{
        font-size:
            14px !important;
    }


    .pc-tools-scope .hp-label,
    .pc-tools-scope .hp-scorebox span{
        font-size:
            11px !important;
    }


    .pc-tools-scope .hp-scorebox strong{
        font-size:
            16px !important;
    }


    .pc-tools-scope .hp-controls{
        position:sticky !important;

        bottom:5px !important;

        z-index:40 !important;

        width:100% !important;

        margin-top:
            7px !important;

        padding:
            7px !important;

        display:grid !important;

        grid-template-columns:
            1fr !important;

        gap:
            6px !important;

        background:
            rgba(
                252,
                251,
                248,
                .97
            ) !important;

        border:
            1px solid
            #dedfe1 !important;

        border-radius:
            11px !important;

        box-shadow:
            0 8px 24px
            rgba(20,22,25,.12) !important;

        backdrop-filter:
            blur(8px);
    }


    .pc-tools-scope #hpHazardBtn{
        width:100% !important;

        min-height:
            51px !important;

        margin:0 !important;

        padding:
            10px 12px !important;

        font-size:
            14px !important;
    }


    .pc-tools-scope #hpReplay{
        width:100% !important;

        min-height:
            37px !important;

        margin:0 !important;

        padding:
            6px 10px !important;

        background:
            #f5efe6 !important;

        border:
            1px solid
            #e0d4c5 !important;

        color:
            #17191c !important;

        font-size:
            12px !important;

        -webkit-text-fill-color:
            #17191c !important;
    }


    .pc-tools-scope #hpFeedback{
        max-height:
            185px !important;

        overflow:auto !important;

        margin-top:
            7px !important;

        padding:
            10px !important;

        border-radius:
            10px !important;
    }


    .pc-tools-scope
    #hpFeedback article p{
        margin:
            4px 0 !important;

        font-size:
            12px !important;

        line-height:
            1.42 !important;
    }


    #hazardApp.hp-buffering-v35
    #hpStage::after{
        bottom:
            8px;

        padding:
            6px 9px;

        font-size:
            11px;
    }

}



/* =========================================================
   PURECAR TRANSLINK — FOOTER JOIN
   The standard .pct-page has 54px bottom padding.
   Translink must join directly to the global footer.
   ========================================================= */

.pc-tools-scope .pct-page.pct-page--translink {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

.pc-tools-scope .pct-page.pct-page--translink > .pct-wrap {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.pc-tools-scope .pct-page.pct-page--translink
.pct-wrap > .pct-module:last-child {
    margin-bottom: 0 !important;
}