/*
 * PureCar Driving Tests Final UI Hardening v17
 * Master visual reference: /sell-my-car-northern-ireland
 * Palette: PureCar red + charcoal + white + soft grey.
 * This file intentionally contains no blue brand accents.
 */
:root{
  --pc17-red:#d7192a;
  --pc17-red-dark:#b51220;
  --pc17-red-soft:#fff3f4;
  --pc17-ink:#17191c;
  --pc17-text:#222b36;
  --pc17-muted:#596472;
  --pc17-line:#e4e8ed;
  --pc17-bg:#f7f9fb;
  --pc17-white:#fff;
  --pc17-green:#137a4a;
  --pc17-amber:#9a5a00;
}

/* Prevent horizontal breakage anywhere inside the learner platform. */
body:has(.dt-page){overflow-x:hidden}
.dt-page,.dt-page *{box-sizing:border-box}
.dt-page img,.dt-page svg,.dt-page video,.dt-page canvas{max-width:100%;height:auto}
.dt-page pre,.dt-page code{max-width:100%;overflow-wrap:anywhere;word-break:break-word}
.dt-page table{width:100%;max-width:100%}
.dt-page .table-responsive,.dt-page [class*="table-wrap"],.dt-page [class*="table-scroll"]{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* Readability: no tiny copy on the public driving-test pages. */
.dt-page p,.dt-page li,.dt-page label,.dt-page input,.dt-page select,.dt-page textarea,.dt-page button{line-height:1.55}
.dt-page p,.dt-page li{font-size:max(14px,1em)}
.dt-page small{font-size:12px;line-height:1.45}
.dt-page h1,.dt-page h2,.dt-page h3,.dt-page h4{color:var(--pc17-ink);text-wrap:balance}
.dt-page p,.dt-page li{color:var(--pc17-muted)}

/* Inputs and buttons stay usable on touch screens. */
.dt-page input:not([type="checkbox"]):not([type="radio"]),
.dt-page select,
.dt-page textarea,
.dt-page button,
.dt-page .dt-btn,
.dt-page a.dt-btn{
  min-height:44px;
}
.dt-page input:not([type="checkbox"]):not([type="radio"]),.dt-page select,.dt-page textarea{max-width:100%;border-radius:10px}
.dt-page textarea{min-height:110px;resize:vertical}

/* Consistent PureCar focus treatment. */
.dt-page a:focus-visible,.dt-page button:focus-visible,.dt-page input:focus-visible,.dt-page select:focus-visible,.dt-page textarea:focus-visible,
.pc-dt-localnav a:focus-visible{
  outline:3px solid rgba(215,25,42,.24)!important;
  outline-offset:3px!important;
  box-shadow:0 0 0 2px var(--pc17-white)!important;
}

/* Keep generic links within the platform on brand. Semantic success/warning states remain green/amber. */
.dt-page a:not(.dt-btn):not(.pc15-cta):not([class*="success"]):not([class*="warning"]){text-decoration-color:rgba(215,25,42,.28)}
.dt-page .dt-text-link,.dt-page .pc14-link,.dt-page .pc16-source-actions a,.dt-page .pc15-sourcebar a{color:var(--pc17-red)!important}

/* Stronger card rhythm and usable spacing on long authority pages. */
.dt-page .dt-card{overflow-wrap:anywhere}
.dt-page .dt-section{scroll-margin-top:80px}
.dt-page .dt-section + .dt-section{margin-top:18px}
.dt-page .dt-section-head{gap:16px}
.dt-page .dt-section-head h2{line-height:1.12}

/* Local navigation: horizontal on small screens without crushing labels. */
.pc-dt-localnav__inner{scroll-snap-type:x proximity;padding-block:7px}
.pc-dt-localnav__brand,.pc-dt-localnav__link{scroll-snap-align:start}
.pc-dt-localnav a.pc-dt-localnav__link{min-height:40px;font-size:13px}
.pc-dt-localnav__brand{min-height:40px}

/* Tool cards need entire-card clarity and comfortable tap areas. */
.pc15-tool,.pc15-hubnav a,.pc16-related__links a,.pc16-directory-grid a{min-width:0}
.pc15-tool h3,.pc15-hubnav a,.pc16-related__links a,.pc16-directory-grid a{overflow-wrap:anywhere}
.pc15-tool__go{min-height:24px}

/* Semantic feedback colours only. */
.dt-page .is-correct,.dt-page .correct,.dt-page [class*="success"]{--pc17-state:var(--pc17-green)}
.dt-page .is-warning,.dt-page [class*="warning"]{--pc17-state:var(--pc17-amber)}

/* Protect animations for users who request less motion. */
@media (prefers-reduced-motion:reduce){
  .dt-page *,.pc-dt-localnav *{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

@media(max-width:900px){
  .dt-page .dt-wrap{width:min(100%,calc(100% - 20px))!important}
  .dt-page .dt-card{border-radius:16px!important}
  .pc15-hero__main{padding:32px 26px 28px}
  .pc15-hubnav{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pc15-journey{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pc15-stage{border-bottom:1px solid var(--pc17-line)}
}

@media(max-width:650px){
  .dt-page{padding-top:0!important}
  .dt-page .dt-wrap{width:calc(100% - 14px)!important}
  .dt-page .dt-card{border-radius:14px!important}
  .dt-page .dt-section{padding:20px 16px!important}
  .dt-page .dt-section-head{display:block!important}
  .dt-page .dt-section-head>a{display:inline-flex;margin-top:10px}
  .dt-page h1{font-size:clamp(32px,10vw,44px)!important;line-height:1.02!important}
  .dt-page h2{font-size:clamp(23px,7vw,30px)!important}
  .dt-page h3{font-size:18px}
  .dt-page p,.dt-page li{font-size:15px!important;line-height:1.62!important}
  .dt-page small{font-size:12px!important}

  .pc-dt-localnav{position:relative!important;top:auto!important}
  .pc-dt-localnav__inner{width:100%!important;padding:8px 9px!important;gap:7px!important}
  .pc-dt-localnav__brand{padding-left:4px}
  .pc-dt-localnav a.pc-dt-localnav__link{font-size:13px!important;padding:0 13px!important;min-height:42px!important}

  .pc15-hero__main{padding:27px 18px 24px!important}
  .pc15-hero__panel{padding:22px 18px!important}
  .pc15-hero__actions{display:grid;grid-template-columns:1fr;gap:9px}
  .pc15-cta{width:100%;min-height:48px}
  .pc15-stats{grid-template-columns:1fr 1fr!important}
  .pc15-stat{padding:13px!important}
  .pc15-stat strong{font-size:23px!important}
  .pc15-stat span{font-size:11px!important}

  .pc15-hubnav,.pc15-tool-grid,.pc15-journey,.pc16-related__links,.pc16-directory-grid{grid-template-columns:1fr!important}
  .pc15-stage{min-height:auto!important;padding:17px!important;border-right:0!important}
  .pc15-tool{min-height:0!important;padding:18px!important}
  .pc15-tool p{font-size:14px!important}
  .pc15-hubnav a{min-height:68px!important;font-size:14px!important}
  .pc15-hubnav a span{font-size:12px!important}
  .pc15-sourcebar{padding:18px!important}
  .pc16-related{padding:0 7px 24px!important}
  .pc16-related__inner{border-radius:14px!important;padding:16px!important}
  .pc16-related__links a,.pc16-directory-grid a{font-size:14px!important;min-height:48px!important}

  /* Horizontal data structures remain readable instead of squeezing off-screen. */
  .dt-page table{font-size:13px}
  .dt-page table th,.dt-page table td{padding:10px 9px}
}

@media(max-width:390px){
  .pc15-stats{grid-template-columns:1fr!important}
  .dt-page .dt-wrap{width:calc(100% - 10px)!important}
}

/* =========================================================
   PURECAR DRIVING TESTS UX HARDENING V20
   Mobile spacing + desktop readability
   ========================================================= */

/* ---------- UNIVERSAL CONTAINMENT ---------- */

.dt-page,
.dt-page *,
.pc-dt-localnav,
.pc-dt-localnav *{
    box-sizing:border-box;
}

.dt-page{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
}

.dt-page .dt-wrap,
.dt-page .dt-card,
.dt-page section,
.dt-page article,
.dt-page form,
.dt-page fieldset,
.dt-page div{
    min-width:0;
}

.dt-page img,
.dt-page svg,
.dt-page video,
.dt-page canvas,
.dt-page iframe{
    max-width:100%;
}

.dt-page h1,
.dt-page h2,
.dt-page h3,
.dt-page h4,
.dt-page p,
.dt-page li,
.dt-page a,
.dt-page button,
.dt-page label,
.dt-page span,
.dt-page strong{
    overflow-wrap:anywhere;
}

.dt-page button,
.dt-page .dt-btn,
.dt-page a.dt-btn{
    white-space:normal;
    text-align:center;
}

/* ---------- BETTER LONG-FORM READING ---------- */

.dt-page .dt-section{
    padding:30px 30px;
}

.dt-page .dt-section-head{
    margin-bottom:22px;
}

.dt-page .dt-section-head h2{
    margin-bottom:7px;
}

.dt-page .dt-section > p,
.dt-page .dt-section > ul,
.dt-page .dt-section > ol,
.dt-page .dt-card > p,
.dt-page .dt-prose p,
.dt-page .dt-prose li{
    max-width:78ch;
}

.dt-page .dt-section > p,
.dt-page .dt-prose p{
    font-size:16px !important;
    line-height:1.75 !important;
    margin-top:0;
    margin-bottom:18px;
}

.dt-page .dt-section > ul,
.dt-page .dt-section > ol,
.dt-page .dt-prose ul,
.dt-page .dt-prose ol{
    line-height:1.72;
    padding-left:22px;
}

.dt-page .dt-section li + li,
.dt-page .dt-prose li + li{
    margin-top:8px;
}

.dt-page .dt-section h2{
    margin-top:0;
}

.dt-page .dt-section h3{
    margin-top:26px;
    margin-bottom:9px;
}

.dt-page .dt-note,
.dt-page .dt-result-panel,
.dt-page .pc14-result,
.dt-page .pc-pass-rate-callout{
    line-height:1.65 !important;
}

/* Do not force small feature cards to use long-form sizing */
.dt-page .dt-resource p,
.dt-page .dt-action p,
.dt-page .dt-topic p,
.dt-page .pc15-tool p,
.dt-page .pc14-type p,
.dt-page .pc-centre-card p{
    max-width:none;
}

/* ---------- CONSISTENT ACTION SPACING ---------- */

.dt-page .dt-btns,
.dt-page .hp-controls,
.dt-page .tt-controls,
.dt-page .dt-logbook-actions,
.dt-page .mp-footer-actions,
.dt-page .pcbook-actions,
.dt-page .psc-actions,
.dt-page .mp-actions{
    gap:10px !important;
}

.dt-page .dt-btns > *,
.dt-page .hp-controls > *,
.dt-page .tt-controls > *,
.dt-page .dt-logbook-actions > *,
.dt-page .mp-footer-actions > *,
.dt-page .pcbook-actions > *,
.dt-page .psc-actions > *{
    margin:0 !important;
}

/* ---------- GRID CHILDREN MUST SHRINK ---------- */

.dt-page .dt-grid > *,
.dt-page .dt-resource-grid > *,
.dt-page .dt-topic-grid > *,
.dt-page .dt-related-grid > *,
.dt-page .dt-sign-grid > *,
.dt-page .dt-stat-grid > *,
.dt-page .dt-topic-authority-grid > *,
.dt-page .dt-module-grid > *,
.dt-page .dt-visual-grid > *,
.dt-page .dt-form-grid > *,
.dt-page .dt-content-grid > *,
.dt-page .tt-start-grid > *,
.dt-page .hp-stat-grid > *,
.dt-page .mp-grid > *,
.dt-page .pc-centre-card-grid > *,
.dt-page .pc-centre-mini-grid > *,
.dt-page .pc-centre-priority-grid > *,
.dt-page .pc-choice-grid > *,
.dt-page .pc-compare-grid > *,
.dt-page .pc-pass-context-grid > *,
.dt-page .pc-road-env-grid > *,
.dt-page .pc14-type-grid > *,
.dt-page .pc14-choice-grid > *,
.dt-page .pcbook-grid > *,
.dt-page .psc-grid > *,
.dt-page .ps-grid > *,
.dt-page .st-grid > *{
    min-width:0;
    max-width:100%;
}

/* ---------- TABLES ---------- */

.dt-page table{
    display:block;
    width:100%;
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    border-collapse:collapse;
}

.dt-page th,
.dt-page td{
    vertical-align:top;
}

/* ---------- FORMS ---------- */

.dt-page input:not([type="checkbox"]):not([type="radio"]),
.dt-page select,
.dt-page textarea{
    width:100%;
    max-width:100%;
    min-width:0;
}

.dt-page label{
    max-width:100%;
}

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

@media(max-width:700px){

    html,
    body{
        max-width:100%;
        overflow-x:hidden;
    }

    .dt-page{
        padding-left:0 !important;
        padding-right:0 !important;
    }

    .dt-page .dt-wrap{
        width:100% !important;
        max-width:100% !important;
        padding-left:10px;
        padding-right:10px;
    }

    .dt-page .dt-card{
        width:100%;
        max-width:100%;
        border-radius:14px !important;
    }

    .dt-page .dt-section{
        padding:20px 16px !important;
    }

    .dt-page .dt-section + .dt-section{
        margin-top:12px !important;
    }

    .dt-page .dt-section-head{
        display:block !important;
        margin-bottom:17px !important;
    }

    .dt-page .dt-section-head h2{
        margin-bottom:8px !important;
    }

    .dt-page .dt-section-head > * + *{
        margin-top:9px;
    }

    .dt-page h1{
        font-size:clamp(30px,9vw,40px) !important;
        line-height:1.04 !important;
    }

    .dt-page h2{
        font-size:24px !important;
        line-height:1.12 !important;
    }

    .dt-page h3{
        font-size:18px !important;
        line-height:1.25 !important;
    }

    .dt-page p,
    .dt-page li{
        font-size:15px !important;
        line-height:1.65 !important;
    }

    /* Every common multi-column structure becomes one clean column */
    .dt-page .dt-grid,
    .dt-page .dt-resource-grid,
    .dt-page .dt-resource-grid.four-small,
    .dt-page .dt-topic-grid,
    .dt-page .dt-related-grid,
    .dt-page .dt-sign-grid,
    .dt-page .dt-stat-grid,
    .dt-page .dt-topic-authority-grid,
    .dt-page .dt-module-grid,
    .dt-page .dt-visual-grid,
    .dt-page .dt-form-grid,
    .dt-page .dt-content-grid,
    .dt-page .tt-start-grid,
    .dt-page .hp-stat-grid,
    .dt-page .mp-grid,
    .dt-page .pc-centre-card-grid,
    .dt-page .pc-centre-mini-grid,
    .dt-page .pc-centre-priority-grid,
    .dt-page .pc-choice-grid,
    .dt-page .pc-compare-grid,
    .dt-page .pc-pass-context-grid,
    .dt-page .pc-road-env-grid,
    .dt-page .pc14-type-grid,
    .dt-page .pc14-facts,
    .dt-page .pc14-choice-grid,
    .dt-page .pcbook-grid,
    .dt-page .psc-grid,
    .dt-page .ps-grid,
    .dt-page .ps-warning-grid,
    .dt-page .st-grid,
    .dt-page .grid-two,
    .dt-page .dfc-grid{
        grid-template-columns:1fr !important;
        gap:12px !important;
    }

    /* Cards */
    .dt-page .dt-resource,
    .dt-page .dt-action,
    .dt-page .dt-related,
    .dt-page .dt-topic,
    .dt-page .dt-topic-authority,
    .dt-page .dt-module-card,
    .dt-page .pc14-type,
    .dt-page .pc14-choice,
    .dt-page .pc-centre-card{
        width:100%;
        max-width:100%;
        min-width:0;
    }

    /* Module cards had a desktop 3-column inner layout */
    .dt-page .dt-module-card{
        grid-template-columns:42px minmax(0,1fr) !important;
    }

    .dt-page .dt-module-card > b{
        grid-column:2;
        justify-self:start;
    }

    /* Logbook headings */
    .dt-page .dt-logbook-title{
        grid-template-columns:40px minmax(0,1fr) !important;
    }

    .dt-page .dt-logbook-title > a{
        grid-column:2;
        margin-top:4px;
    }

    /* Buttons — stop them touching each other */
    .dt-page .dt-btns,
    .dt-page .hp-controls,
    .dt-page .tt-controls,
    .dt-page .mp-footer-actions,
    .dt-page .pcbook-actions,
    .dt-page .psc-actions{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:10px !important;
        width:100%;
    }

    .dt-page .dt-btns > *,
    .dt-page .hp-controls > *,
    .dt-page .tt-controls > *,
    .dt-page .mp-footer-actions > *,
    .dt-page .pcbook-actions > *,
    .dt-page .psc-actions > *{
        width:100% !important;
        max-width:100% !important;
        min-height:48px !important;
        margin:0 !important;
    }

    /* Pills/logbook actions can wrap, but need breathing room */
    .dt-page .dt-logbook-actions,
    .dt-page .dt-filter-row,
    .dt-page .dt-chip-row{
        display:flex !important;
        flex-wrap:wrap !important;
        gap:8px !important;
    }

    .dt-page .dt-logbook-actions button,
    .dt-page .dt-filter{
        min-height:42px;
        padding:9px 12px !important;
    }

    /* Mock practical fault buttons */
    .dt-page .mp-actions{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:8px !important;
    }

    .dt-page .mp-actions button{
        min-height:44px !important;
        width:100%;
        font-size:12px !important;
    }

    /* Progress toolbar */
    .dt-page .mp-toolbar{
        grid-template-columns:1fr !important;
        gap:10px !important;
    }

    /* Results/header rows should wrap vertically */
    .dt-page .mp-result-top,
    .dt-page .tvc-row,
    .dt-page .pc15-sourcebar{
        display:flex !important;
        flex-direction:column !important;
        align-items:flex-start !important;
        gap:10px !important;
    }

    /* Hero actions */
    .dt-page .pc15-hero__actions{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:10px !important;
    }

    .dt-page .pc15-cta{
        width:100% !important;
        min-height:48px !important;
    }

    /* Local nav stays scrollable rather than squeezing/off-screen */
    .pc-dt-localnav{
        max-width:100%;
        overflow:hidden;
    }

    .pc-dt-localnav__inner{
        width:100% !important;
        max-width:100% !important;
        overflow-x:auto !important;
        padding:8px 10px !important;
        gap:8px !important;
    }

    .pc-dt-localnav__brand,
    .pc-dt-localnav__link{
        flex:0 0 auto;
    }

    /* Related links often had nowrap arrows/text */
    .dt-page .dt-related{
        align-items:flex-start !important;
    }

    .dt-page .dt-related span{
        white-space:normal !important;
        flex:0 0 auto;
    }

    /* Long source URLs */
    .dt-page .dt-source,
    .dt-page .dt-source a{
        overflow-wrap:anywhere;
        word-break:break-word;
    }

    /* Remove fixed/min heights that create ugly empty cards */
    .dt-page .dt-resource,
    .dt-page .dt-action,
    .dt-page .dt-sign-card,
    .dt-page .mp-card{
        min-height:0 !important;
    }
}

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

    .dt-page .dt-wrap{
        padding-left:7px;
        padding-right:7px;
    }

    .dt-page .dt-section{
        padding:18px 14px !important;
    }

    .dt-page .pc15-stats{
        grid-template-columns:1fr !important;
    }

    .dt-page .tt-number-grid{
        grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    }
}

/* =========================================================
   DESKTOP READABILITY
   ========================================================= */

@media(min-width:901px){

    .dt-page .dt-section{
        padding:32px 34px !important;
    }

    .dt-page .dt-section > p,
    .dt-page .dt-section > ul,
    .dt-page .dt-section > ol,
    .dt-page .dt-prose{
        max-width:78ch;
    }

    .dt-page .dt-section > p{
        font-size:16px !important;
        line-height:1.78 !important;
    }

    .dt-page .dt-section > p + p{
        margin-top:16px;
    }

    /* Give information-heavy sections more visual separation */
    .dt-page .dt-section{
        border-color:#e4e8ed !important;
    }

    .dt-page .dt-section-head{
        padding-bottom:4px;
    }

    /* Avoid ultra-wide text cards */
    .dt-page .dt-note,
    .dt-page .dt-result-panel{
        max-width:880px;
    }
}


/* =========================================================
   PURECAR DRIVING TESTS MASTER UX V21
   Desktop + mobile + results overhaul
   Brand: red / charcoal / white / soft grey
   ========================================================= */

:root{
    --dt-v21-red:#d7192a;
    --dt-v21-red-dark:#b51220;
    --dt-v21-red-soft:#fff3f4;
    --dt-v21-ink:#17191c;
    --dt-v21-text:#29323c;
    --dt-v21-muted:#5f6975;
    --dt-v21-line:#e3e7eb;
    --dt-v21-soft:#f7f8fa;
    --dt-v21-green:#137a4a;
    --dt-v21-green-soft:#eff9f3;
}

/* =========================================================
   GLOBAL CONTAINMENT
   ========================================================= */

body:has(.dt-page){
    overflow-x:hidden !important;
}

.dt-page{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
}

.dt-page *,
.pc-dt-localnav *{
    box-sizing:border-box !important;
    min-width:0;
}

.dt-page img,
.dt-page svg,
.dt-page video,
.dt-page canvas,
.dt-page iframe{
    max-width:100% !important;
}

.dt-page .dt-wrap{
    width:min(1180px,calc(100% - 32px)) !important;
    max-width:1180px !important;
    margin-left:auto !important;
    margin-right:auto !important;
}

.dt-page .dt-card,
.dt-page section,
.dt-page article,
.dt-page form,
.dt-page fieldset{
    max-width:100%;
}

.dt-page h1,
.dt-page h2,
.dt-page h3,
.dt-page h4,
.dt-page p,
.dt-page li,
.dt-page a,
.dt-page button,
.dt-page label,
.dt-page span,
.dt-page strong{
    overflow-wrap:anywhere;
}

/* =========================================================
   TYPOGRAPHY — REMOVE THE TINY TEXT FEEL
   ========================================================= */

.dt-page{
    color:var(--dt-v21-text);
}

.dt-page h1{
    color:var(--dt-v21-ink) !important;
}

.dt-page h2{
    color:var(--dt-v21-ink) !important;
    font-size:clamp(27px,2.2vw,34px) !important;
    line-height:1.1 !important;
    letter-spacing:-.035em !important;
}

.dt-page h3{
    color:var(--dt-v21-ink);
    line-height:1.25;
}

.dt-page .dt-section-head p,
.dt-page .dt-section > p,
.dt-page .dt-prose p,
.dt-page .pc-centre-bodycopy{
    font-size:16px !important;
    line-height:1.75 !important;
    color:var(--dt-v21-muted) !important;
}

.dt-page .dt-section > p,
.dt-page .dt-section > ul,
.dt-page .dt-section > ol,
.dt-page .dt-prose{
    max-width:78ch;
}

.dt-page .dt-section > p + p,
.dt-page .dt-prose p + p{
    margin-top:17px !important;
}

.dt-page .dt-section li,
.dt-page .dt-prose li{
    font-size:16px !important;
    line-height:1.7 !important;
}

.dt-page .dt-section li + li{
    margin-top:7px;
}

/* Card copy should still be compact — but readable */
.dt-page .dt-action p,
.dt-page .dt-resource p,
.dt-page .pc15-tool p,
.dt-page .pc15-stage p,
.dt-page .pc-centre-card p,
.dt-page .pc-choice-grid p,
.dt-page .pc-road-env p,
.dt-page .pc-centre-priority p,
.dt-page .pcbook-card p,
.dt-page .pc14-type p,
.dt-page .pc14-fact p,
.dt-page .hp-guide-sections p,
.dt-page .hp-feedback article p{
    font-size:14.5px !important;
    line-height:1.62 !important;
}

/* Labels / secondary information */
.dt-page .dt-pill,
.dt-page .dt-source,
.dt-page .dt-muted-copy,
.dt-page small,
.dt-page .pcbook-small{
    font-size:12.5px !important;
    line-height:1.55 !important;
}

/* =========================================================
   SECTIONS — CLEARER PAGE HIERARCHY
   ========================================================= */

.dt-page .dt-section{
    padding:32px 34px !important;
    margin-top:20px !important;
    border-color:var(--dt-v21-line) !important;
}

.dt-page .dt-section-head{
    margin-bottom:23px !important;
    padding-bottom:2px;
}

.dt-page .dt-section-head h2{
    margin-bottom:8px !important;
}

.dt-page .dt-card{
    box-shadow:0 8px 28px rgba(20,25,32,.055) !important;
}

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

.dt-page .dt-btn,
.dt-page button{
    font-size:14px !important;
}

.dt-page .dt-btn{
    min-height:48px !important;
    padding:10px 18px !important;
    border-radius:11px !important;
}

.dt-page .dt-btn.primary,
.dt-page .pc15-cta--primary{
    background:var(--dt-v21-red) !important;
    border-color:var(--dt-v21-red) !important;
    color:#fff !important;
}

.dt-page .dt-btn.primary:hover,
.dt-page .pc15-cta--primary:hover{
    background:var(--dt-v21-red-dark) !important;
}

.dt-page .dt-btns,
.dt-page .hp-controls,
.dt-page .tt-controls,
.dt-page .pcbook-actions,
.dt-page .psc-actions,
.dt-page .dt-logbook-actions,
.dt-page .mp-footer-actions{
    gap:11px !important;
}

/* Theory buttons currently sit inside extra DIVs */
.dt-page .tt-controls > div{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

/* =========================================================
   DESKTOP GRID CLEANUP
   Too many old 4/5/6-column layouts made pages busy.
   ========================================================= */

@media(min-width:1001px){

    .dt-page .pc15-journey{
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    }

    .dt-page .pc15-stage{
        min-height:0 !important;
    }

    .dt-page .pc-centre-priority-grid,
    .dt-page .pc-road-env-grid,
    .dt-page .pc-choice-grid{
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    }

    .dt-page .pc15-tool-grid{
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    }

    .dt-page .dt-resource-grid{
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    }

    .dt-page .dt-grid.four{
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    }

    .dt-page .hp-stat-grid{
        grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    }

    /* Theory exam gets more room for the actual question */
    .dt-page .tt-shell{
        grid-template-columns:minmax(0,1fr) 300px !important;
    }
}

/* =========================================================
   THEORY RESULT — COMPLETE REDESIGN
   ========================================================= */

.dt-page .tt-results.show{
    display:grid !important;
    grid-template-columns:minmax(220px,280px) minmax(0,1fr);
    column-gap:28px;
    row-gap:14px;
    align-items:start;
}

.dt-page .tt-results > h2{
    grid-column:1/-1;
    margin:0 0 5px !important;
    font-size:18px !important;
    text-transform:uppercase;
    letter-spacing:.06em !important;
    color:#737d88 !important;
}

/* Score becomes a proper result card */
.dt-page .tt-score{
    grid-column:1;
    grid-row:2 / span 2;
    min-height:190px;
    margin:0 !important;
    padding:28px 20px !important;
    border-radius:22px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    text-align:center;
    font-size:54px !important;
    line-height:1 !important;
    letter-spacing:-.06em !important;
    border:1px solid var(--dt-v21-line);
    box-shadow:0 10px 26px rgba(20,25,32,.06);
}

.dt-page .tt-score:before{
    content:"YOUR SCORE";
    display:block;
    margin-bottom:14px;
    font-size:11px;
    line-height:1;
    letter-spacing:.1em;
    font-weight:950;
    color:#767f89;
}

.dt-page .tt-score.tt-pass{
    color:var(--dt-v21-green) !important;
    background:linear-gradient(145deg,#fff,var(--dt-v21-green-soft));
    border-color:#b9dfc8;
}

.dt-page .tt-score.tt-fail{
    color:var(--dt-v21-red) !important;
    background:linear-gradient(145deg,#fff,var(--dt-v21-red-soft));
    border-color:#efc3c8;
}

.dt-page #ttResultTitle{
    grid-column:2;
    margin:6px 0 0 !important;
    font-size:30px !important;
    line-height:1.1 !important;
    letter-spacing:-.035em;
}

.dt-page #ttResultCopy{
    grid-column:2;
    margin:0 !important;
    max-width:700px;
    padding:17px 19px;
    background:var(--dt-v21-soft);
    border:1px solid var(--dt-v21-line);
    border-radius:14px;
    font-size:16px !important;
    line-height:1.65 !important;
    color:#4d5864 !important;
}

/* Topic breakdown becomes meaningful visual cards */
.dt-page .tt-breakdown{
    grid-column:1/-1;
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:12px !important;
    margin:12px 0 6px !important;
}

.dt-page .tt-break-item{
    position:relative;
    overflow:hidden;
    padding:17px 18px !important;
    min-height:94px;
    border:1px solid var(--dt-v21-line) !important;
    border-radius:15px !important;
    background:#fff !important;
    box-shadow:0 5px 16px rgba(20,25,32,.035);
}

.dt-page .tt-break-item:before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:4px;
    background:var(--dt-v21-red);
}

.dt-page .tt-break-item b{
    display:block;
    margin-bottom:8px;
    font-size:15px !important;
    line-height:1.3;
    color:var(--dt-v21-ink);
}

.dt-page .tt-break-item span{
    font-size:14px !important;
    line-height:1.45 !important;
    color:var(--dt-v21-muted) !important;
}

/* Missed-question review */
.dt-page .tt-wrong-wrap{
    grid-column:1/-1;
    margin-top:10px !important;
    padding-top:25px !important;
}

.dt-page .tt-wrong-wrap h3{
    font-size:24px !important;
}

.dt-page .tt-wrong-item{
    padding:18px !important;
    gap:14px !important;
    border-radius:15px !important;
}

.dt-page .tt-wrong-item h4{
    font-size:16px !important;
    line-height:1.45 !important;
}

.dt-page .tt-wrong-item p{
    font-size:14.5px !important;
    line-height:1.65 !important;
}

.dt-page .tt-wrong-item a{
    color:var(--dt-v21-red) !important;
    font-size:13px !important;
}

.dt-page .tt-results > .dt-btns{
    grid-column:1/-1;
    padding-top:6px;
}

/* =========================================================
   THEORY EXAM UX
   ========================================================= */

.dt-page .tt-main{
    padding:28px !important;
}

.dt-page .tt-question{
    font-size:26px !important;
    line-height:1.3 !important;
}

.dt-page .tt-answer{
    padding:16px 17px !important;
    font-size:15px !important;
    line-height:1.55 !important;
    border-radius:13px !important;
}

.dt-page .tt-side h3{
    font-size:17px !important;
}

.dt-page .tt-side-meta{
    font-size:13px !important;
    line-height:1.55;
}

/* =========================================================
   HAZARD PERCEPTION
   ========================================================= */

.dt-page .hp-stat-grid span{
    font-size:14px !important;
}

.dt-page .hp-example-stage p{
    font-size:14px !important;
}

.dt-page .hp-label,
.dt-page .hp-scorebox span,
.dt-page .hp-feedback-head span{
    font-size:11.5px !important;
}

.dt-page .hp-clicks{
    font-size:13px !important;
}

.dt-page .hp-feedback article h3{
    font-size:17px !important;
}

.dt-page .hp-final-score p{
    font-size:15px !important;
    line-height:1.65 !important;
}

/* =========================================================
   TEST CENTRES
   ========================================================= */

.dt-page .pc-centre-card h3{
    font-size:19px !important;
}

.dt-page .pc-centre-card small,
.dt-page .pc-centre-tags span,
.dt-page .pc-centre-mini-grid span{
    font-size:12px !important;
}

.dt-page .pc-centre-type{
    font-size:11px !important;
}

.dt-page .pc-centre-priority b,
.dt-page .pc-road-env b{
    font-size:14.5px !important;
}

.dt-page .pc-pass-rate-callout p{
    font-size:15px !important;
    line-height:1.65 !important;
}

.dt-page .pc-compare-block p{
    font-size:14px !important;
    line-height:1.6 !important;
}

.dt-page .pc-compare-selects label span{
    font-size:13px !important;
}

/* =========================================================
   BOOKING
   ========================================================= */

.dt-page .pcbook-card p,
.dt-page .pcbook-result p{
    font-size:15px !important;
    line-height:1.65 !important;
}

.dt-page .pcbook-field label{
    font-size:14px !important;
}

.dt-page .pcbook-table th{
    font-size:12px !important;
}

.dt-page .pcbook-table td{
    font-size:14px !important;
}

/* =========================================================
   TEST TYPES
   ========================================================= */

.dt-page .pc14-type p,
.dt-page .pc14-fact p,
.dt-page .pc14-steps p{
    font-size:14.5px !important;
    line-height:1.62 !important;
}

.dt-page .pc14-link,
.dt-page .pc14-choice span{
    color:var(--dt-v21-red) !important;
    font-size:13px !important;
}

.dt-page .pc14-result{
    background:#fff8f8 !important;
    border-color:#efc5ca !important;
}

/* =========================================================
   TABLE / FORM OVERFLOW
   ========================================================= */

.dt-page table{
    max-width:100% !important;
}

.dt-page .pcbook-table,
.dt-page table{
    display:table;
}

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

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

@media(max-width:760px){

    .dt-page .dt-wrap{
        width:calc(100% - 14px) !important;
        max-width:calc(100% - 14px) !important;
    }

    .dt-page .dt-section{
        padding:20px 16px !important;
        margin-top:12px !important;
    }

    .dt-page .dt-section-head{
        display:block !important;
        margin-bottom:17px !important;
    }

    .dt-page h1{
        font-size:clamp(30px,9vw,40px) !important;
        line-height:1.05 !important;
    }

    .dt-page h2{
        font-size:24px !important;
    }

    .dt-page h3{
        font-size:18px !important;
    }

    .dt-page p,
    .dt-page li{
        font-size:15px !important;
        line-height:1.65 !important;
    }

    /* ALL COMMON GRIDS */
    .dt-page .dt-grid,
    .dt-page .dt-grid.four,
    .dt-page .dt-resource-grid,
    .dt-page .dt-resource-grid.four-small,
    .dt-page .dt-topic-grid,
    .dt-page .dt-related-grid,
    .dt-page .dt-stat-grid,
    .dt-page .dt-sign-grid,
    .dt-page .dt-module-grid,
    .dt-page .dt-visual-grid,
    .dt-page .dt-form-grid,
    .dt-page .dt-content-grid,
    .dt-page .tt-start-grid,
    .dt-page .hp-stat-grid,
    .dt-page .hp-example,
    .dt-page .pc15-tool-grid,
    .dt-page .pc15-journey,
    .dt-page .pc-centre-card-grid,
    .dt-page .pc-centre-mini-grid,
    .dt-page .pc-centre-priority-grid,
    .dt-page .pc-road-env-grid,
    .dt-page .pc-choice-grid,
    .dt-page .pc-pass-context-grid,
    .dt-page .pc-compare-grid,
    .dt-page .pc-compare-selects,
    .dt-page .pc-centre-filterbar,
    .dt-page .pcbook-grid,
    .dt-page .pcbook-form,
    .dt-page .pc14-type-grid,
    .dt-page .pc14-facts,
    .dt-page .pc14-choice-grid{
        grid-template-columns:1fr !important;
        gap:12px !important;
    }

    /* THEORY */
    .dt-page .tt-shell{
        grid-template-columns:1fr !important;
    }

    .dt-page .tt-main{
        padding:18px 15px !important;
    }

    .dt-page .tt-question{
        font-size:21px !important;
    }

    .dt-page .tt-answer{
        font-size:15px !important;
        padding:15px !important;
    }

    .dt-page .tt-controls{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:10px !important;
    }

    .dt-page .tt-controls > div{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:9px !important;
        width:100%;
    }

    .dt-page .tt-controls button,
    .dt-page .tt-controls .dt-btn{
        width:100% !important;
        margin:0 !important;
    }

    /* RESULT */
    .dt-page .tt-results.show{
        grid-template-columns:1fr !important;
        gap:12px !important;
    }

    .dt-page .tt-results > h2,
    .dt-page .tt-score,
    .dt-page #ttResultTitle,
    .dt-page #ttResultCopy,
    .dt-page .tt-breakdown,
    .dt-page .tt-wrong-wrap,
    .dt-page .tt-results > .dt-btns{
        grid-column:1 !important;
        grid-row:auto !important;
    }

    .dt-page .tt-score{
        min-height:150px !important;
        font-size:48px !important;
    }

    .dt-page #ttResultTitle{
        font-size:25px !important;
        margin-top:5px !important;
    }

    .dt-page .tt-breakdown{
        grid-template-columns:1fr !important;
    }

    .dt-page .tt-results > .dt-btns{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:9px !important;
    }

    .dt-page .tt-results > .dt-btns > *{
        width:100% !important;
        margin:0 !important;
    }

    /* ALL OTHER ACTION GROUPS */
    .dt-page .dt-btns,
    .dt-page .hp-controls,
    .dt-page .pcbook-actions,
    .dt-page .psc-actions,
    .dt-page .mp-footer-actions{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:9px !important;
        width:100%;
    }

    .dt-page .dt-btns > *,
    .dt-page .hp-controls > *,
    .dt-page .pcbook-actions > *,
    .dt-page .psc-actions > *,
    .dt-page .mp-footer-actions > *{
        width:100% !important;
        margin:0 !important;
    }

    /* MODULE / LOGBOOK LAYOUTS */
    .dt-page .dt-module-card{
        grid-template-columns:42px minmax(0,1fr) !important;
    }

    .dt-page .dt-module-card > b{
        grid-column:2;
    }

    .dt-page .dt-logbook-title{
        grid-template-columns:40px minmax(0,1fr) !important;
    }

    .dt-page .dt-logbook-title > a{
        grid-column:2;
    }

    /* NAV */
    .pc-dt-localnav{
        overflow:hidden !important;
        max-width:100%;
    }

    .pc-dt-localnav__inner{
        width:100% !important;
        max-width:100% !important;
        overflow-x:auto !important;
        gap:8px !important;
        padding:8px 9px !important;
    }

    .pc-dt-localnav__brand,
    .pc-dt-localnav__link{
        flex:0 0 auto !important;
        white-space:nowrap;
    }

    /* TABLES */
    .dt-page .pcbook-table,
    .dt-page table{
        display:block !important;
        width:100% !important;
        overflow-x:auto !important;
        -webkit-overflow-scrolling:touch;
    }
}

/* Mid-size desktop/tablet: stop grids becoming cramped */
@media(min-width:761px) and (max-width:1050px){

    .dt-page .pc15-tool-grid,
    .dt-page .dt-resource-grid,
    .dt-page .dt-grid.four,
    .dt-page .pc-centre-card-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }

    .dt-page .pc15-journey,
    .dt-page .pc-centre-priority-grid,
    .dt-page .pc-road-env-grid,
    .dt-page .pc-choice-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }

    .dt-page .tt-shell{
        grid-template-columns:1fr !important;
    }

    .dt-page .tt-side{
        position:static !important;
    }
}


/* ==========================================================
   PURECAR FULL DESKTOP UX PALETTE V23

   Master visual reference:
   /sell-my-car-northern-ireland

   Red + charcoal + warm cream + blush + off-white + soft grey.
   No random blue/green product styling.
   ========================================================== */

:root{
    --pc23-red:#e3192d;
    --pc23-red-dark:#bd1424;
    --pc23-red-soft:#fff0f2;

    --pc23-ink:#161719;
    --pc23-charcoal:#25272a;
    --pc23-copy:#525961;
    --pc23-muted:#737a82;

    --pc23-white:#ffffff;
    --pc23-paper:#fdfcf9;

    --pc23-cream:#fbf6ee;
    --pc23-cream-2:#f6ede2;
    --pc23-cream-3:#efe3d5;

    --pc23-blush:#fff4f3;
    --pc23-blush-2:#fce9e8;

    --pc23-grey:#f5f6f7;
    --pc23-grey-2:#eceef0;

    --pc23-line:#e2e3e4;
    --pc23-shadow:0 12px 36px rgba(23,24,26,.065);
}


/* ==========================================================
   1. COMPLETE PAGE CONTAINMENT
   Nothing on desktop is allowed to push outside the screen
   ========================================================== */

html,
body{
    max-width:100%;
}

body:has(.dt-page){
    overflow-x:hidden !important;
}

.dt-page,
.dt-page *{
    box-sizing:border-box !important;
}

.dt-page{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
    background:
        linear-gradient(
            180deg,
            #fafafa 0,
            var(--pc23-paper) 330px,
            #f8f7f5 100%
        ) !important;
}

.dt-page .dt-wrap{
    width:min(1180px,calc(100% - 48px)) !important;
    max-width:1180px !important;
    margin-left:auto !important;
    margin-right:auto !important;
}

.dt-page section,
.dt-page article,
.dt-page div,
.dt-page form,
.dt-page fieldset,
.dt-page header,
.dt-page footer{
    min-width:0;
    max-width:100%;
}

.dt-page img,
.dt-page video,
.dt-page iframe,
.dt-page canvas,
.dt-page svg{
    max-width:100% !important;
}

.dt-page h1,
.dt-page h2,
.dt-page h3,
.dt-page h4,
.dt-page p,
.dt-page li,
.dt-page span,
.dt-page strong,
.dt-page a,
.dt-page button,
.dt-page label{
    overflow-wrap:anywhere;
}


/* ==========================================================
   2. CENTRE THE ENTIRE DRIVING TESTS SUB HEADER
   ========================================================== */

.pc-dt-localnav{
    width:100% !important;
    max-width:100% !important;
    background:#fff !important;
    border-top:1px solid #f0f0f0 !important;
    border-bottom:1px solid var(--pc23-line) !important;
    box-shadow:0 5px 16px rgba(20,20,20,.04) !important;
}

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

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

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

    gap:5px !important;
}

.pc-dt-localnav__brand{
    display:inline-flex !important;
    align-items:center !important;

    flex:0 0 auto !important;

    gap:10px !important;
    margin-right:13px !important;

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

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

    white-space:nowrap !important;
}

.pc-dt-localnav__dot{
    width:9px !important;
    height:9px !important;

    flex:0 0 9px !important;

    background:var(--pc23-red) !important;
    box-shadow:0 0 0 5px var(--pc23-red-soft) !important;
}

.pc-dt-localnav a.pc-dt-localnav__link{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    flex:0 0 auto !important;

    min-height:41px !important;
    padding:0 12px !important;

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

    color:#505760 !important;
    background:transparent !important;

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

    white-space:nowrap !important;
}

.pc-dt-localnav a.pc-dt-localnav__link:hover{
    color:var(--pc23-ink) !important;
    background:var(--pc23-cream) !important;
    border-color:#eee4d8 !important;
}

.pc-dt-localnav a.pc-dt-localnav__link.is-active{
    color:var(--pc23-red) !important;
    background:var(--pc23-blush) !important;
    border-color:#efcfd2 !important;
}


/* MY PROGRESS: explicitly fix black button */
.pc-dt-localnav a.pc-dt-localnav__progress,
.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,
.pc-dt-localnav a.pc-dt-localnav__progress:active{
    margin-left:auto !important;

    min-height:42px !important;
    padding:0 17px !important;

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

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

    border-radius:11px !important;

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

    text-decoration:none !important;
}

.pc-dt-localnav a.pc-dt-localnav__progress:hover{
    background:#303235 !important;
    border-color:#303235 !important;
}


/* ==========================================================
   3. FIX ALL DARK BUTTON TEXT SITE-WIDE IN THIS SECTION
   ========================================================== */

.dt-page .dt-btn.primary,
.dt-page .dt-btn.dark,
.dt-page .pc15-cta--primary,
.dt-page .tt-start-button,
.dt-page button[class*="primary"],
.dt-page a[class*="primary"],
.dt-page button[class*="dark"],
.dt-page a[class*="dark"]{
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
}

.dt-page .dt-btn.primary *,
.dt-page .dt-btn.dark *,
.dt-page .pc15-cta--primary *,
.dt-page button[class*="primary"] *,
.dt-page a[class*="primary"] *,
.dt-page button[class*="dark"] *,
.dt-page a[class*="dark"] *{
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
}


/* ==========================================================
   4. RESTORE SELL-MY-CAR WARM COLOUR DEPTH
   ========================================================== */

/* Core cards */
.dt-page .dt-card{
    background:var(--pc23-white) !important;
    border-color:var(--pc23-line) !important;
    box-shadow:var(--pc23-shadow) !important;
}

/* Hero */
.dt-page .dt-hero,
.dt-page .pc15-hero{
    background:
        radial-gradient(
            circle at 91% 12%,
            rgba(227,25,45,.10),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #fff 0%,
            var(--pc23-paper) 56%,
            var(--pc23-blush) 100%
        ) !important;
}

/* alternate section warmth */
.dt-page .dt-section:nth-of-type(3n+1){
    background:#fff !important;
}

.dt-page .dt-section:nth-of-type(3n+2){
    background:var(--pc23-cream) !important;
}

.dt-page .dt-section:nth-of-type(3n+3){
    background:#fff !important;
}

/* Useful feature cards */
.dt-page .dt-resource:nth-child(4n+1),
.dt-page .pc15-tool:nth-child(4n+1),
.dt-page .pc15-stage:nth-child(4n+1),
.dt-page .pcbook-card:nth-child(4n+1),
.dt-page .pc14-type:nth-child(4n+1){
    background:var(--pc23-cream) !important;
}

.dt-page .dt-resource:nth-child(4n+2),
.dt-page .pc15-tool:nth-child(4n+2),
.dt-page .pc15-stage:nth-child(4n+2),
.dt-page .pcbook-card:nth-child(4n+2),
.dt-page .pc14-type:nth-child(4n+2){
    background:#fff !important;
}

.dt-page .dt-resource:nth-child(4n+3),
.dt-page .pc15-tool:nth-child(4n+3),
.dt-page .pc15-stage:nth-child(4n+3),
.dt-page .pcbook-card:nth-child(4n+3),
.dt-page .pc14-type:nth-child(4n+3){
    background:var(--pc23-blush) !important;
}

.dt-page .dt-resource:nth-child(4n),
.dt-page .pc15-tool:nth-child(4n),
.dt-page .pc15-stage:nth-child(4n),
.dt-page .pcbook-card:nth-child(4n),
.dt-page .pc14-type:nth-child(4n){
    background:var(--pc23-grey) !important;
}


/* Highlight boxes */
.dt-page .dt-note,
.dt-page .dt-callout,
.dt-page .pc-pass-rate-callout,
.dt-page .pcbook-note,
.dt-page .pc14-result{
    background:var(--pc23-cream) !important;
    border-color:#eadccc !important;
}


/* ==========================================================
   5. REMOVE RANDOM GREEN / BLUE VISUAL LANGUAGE
   ========================================================== */

/*
   Keep the WORDS "correct", "pass", etc.
   Remove the unrelated product colours.
*/

.dt-page .tt-score.tt-pass,
.dt-page .tt-score.tt-fail{
    color:var(--pc23-ink) !important;
}

.dt-page .tt-score.tt-pass{
    background:
        linear-gradient(145deg,#fff,var(--pc23-cream-2)) !important;

    border-color:#e3d4c2 !important;
}

.dt-page .tt-score.tt-fail{
    background:
        linear-gradient(145deg,#fff,var(--pc23-blush-2)) !important;

    border-color:#efc7ca !important;
}

.dt-page .tt-score.tt-pass:after{
    content:"PASSED";
    display:block;

    margin-top:15px;
    padding:6px 10px;

    background:var(--pc23-ink);
    color:#fff;

    border-radius:999px;

    font-size:10px;
    line-height:1;
    letter-spacing:.08em;
    font-weight:900;
}

.dt-page .tt-score.tt-fail:after{
    content:"KEEP PRACTISING";
    display:block;

    margin-top:15px;
    padding:6px 10px;

    background:var(--pc23-red);
    color:#fff;

    border-radius:999px;

    font-size:10px;
    line-height:1;
    letter-spacing:.08em;
    font-weight:900;
}


/* Generic success/green surfaces become warm neutral */
.dt-page .dt-success,
.dt-page .dt-status-success,
.dt-page [class*="green-soft"],
.dt-page [class*="success-box"]{
    background:var(--pc23-cream) !important;
    border-color:#eadccc !important;
    color:var(--pc23-ink) !important;
}


/* Blue-looking info surfaces */
.dt-page .dt-info,
.dt-page [class*="blue-soft"]{
    background:var(--pc23-grey) !important;
    border-color:var(--pc23-line) !important;
    color:var(--pc23-ink) !important;
}


/* ==========================================================
   6. BETTER DESKTOP READING
   ========================================================== */

@media(min-width:1000px){

    .dt-page .dt-section{
        padding:36px 38px !important;
    }

    .dt-page .dt-section-head{
        margin-bottom:25px !important;
    }

    .dt-page .dt-section > p,
    .dt-page .dt-section > ul,
    .dt-page .dt-section > ol,
    .dt-page .dt-prose{
        max-width:74ch !important;
    }

    .dt-page .dt-section > p,
    .dt-page .dt-prose p{
        font-size:16.5px !important;
        line-height:1.78 !important;
    }

    .dt-page .dt-section li{
        font-size:16px !important;
        line-height:1.72 !important;
    }

    /*
       Stop squeezing 4/5/6 information cards into rows.
       Three columns is the default maximum.
    */
    .dt-page .dt-resource-grid,
    .dt-page .pc15-tool-grid,
    .dt-page .pc15-journey,
    .dt-page .pc-centre-priority-grid,
    .dt-page .pc-road-env-grid,
    .dt-page .pc-choice-grid,
    .dt-page .pc14-type-grid{
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
        gap:16px !important;
    }

    .dt-page .dt-resource,
    .dt-page .pc15-tool,
    .dt-page .pc15-stage,
    .dt-page .pc-centre-priority,
    .dt-page .pc-road-env,
    .dt-page .pc14-type{
        padding:22px !important;
    }
}


/* ==========================================================
   7. THEORY RESULTS — WARM PURECAR STYLE
   ========================================================== */

.dt-page .tt-results.show{
    padding:28px !important;

    background:
        linear-gradient(
            135deg,
            #fff 0%,
            var(--pc23-paper) 55%,
            var(--pc23-cream) 100%
        ) !important;

    border:1px solid var(--pc23-line) !important;
    border-radius:20px !important;
}

.dt-page .tt-score{
    background:var(--pc23-cream) !important;
}

.dt-page #ttResultCopy{
    background:#fff !important;
    border-color:var(--pc23-line) !important;
}

.dt-page .tt-break-item{
    background:#fff !important;
}

.dt-page .tt-break-item:nth-child(3n+1){
    background:var(--pc23-cream) !important;
}

.dt-page .tt-break-item:nth-child(3n+2){
    background:var(--pc23-blush) !important;
}

.dt-page .tt-break-item:nth-child(3n+3){
    background:var(--pc23-grey) !important;
}

.dt-page .tt-break-item:before{
    background:var(--pc23-red) !important;
}


/* ==========================================================
   8. BREADCRUMBS / SMALL ELEMENTS
   ========================================================== */

.dt-page .dt-breadcrumbs{
    color:#7a8087 !important;
}

.dt-page .dt-breadcrumbs a{
    color:var(--pc23-red) !important;
}

.dt-page .dt-pill{
    background:#fff !important;
    border-color:#e3e4e5 !important;
    color:#535a63 !important;
}


/* ==========================================================
   9. DESKTOP OVERFLOW FAIL-SAFES
   ========================================================== */

@media(min-width:761px){

    .dt-page .dt-grid > *,
    .dt-page .dt-resource-grid > *,
    .dt-page .dt-topic-grid > *,
    .dt-page .dt-related-grid > *,
    .dt-page .dt-sign-grid > *,
    .dt-page .dt-stat-grid > *,
    .dt-page .dt-module-grid > *,
    .dt-page .dt-visual-grid > *,
    .dt-page .dt-form-grid > *,
    .dt-page .dt-content-grid > *,
    .dt-page .tt-start-grid > *,
    .dt-page .hp-stat-grid > *,
    .dt-page .pc15-tool-grid > *,
    .dt-page .pc15-journey > *,
    .dt-page .pc-centre-card-grid > *,
    .dt-page .pc-centre-mini-grid > *,
    .dt-page .pc-centre-priority-grid > *,
    .dt-page .pc-road-env-grid > *,
    .dt-page .pc-choice-grid > *,
    .dt-page .pc-compare-grid > *,
    .dt-page .pcbook-grid > *,
    .dt-page .pc14-type-grid > *,
    .dt-page .pc14-facts > *{
        min-width:0 !important;
        max-width:100% !important;
    }

    .dt-page table{
        width:100% !important;
        max-width:100% !important;
    }

    .dt-page input,
    .dt-page textarea,
    .dt-page select{
        max-width:100% !important;
    }
}


/* ==========================================================
   10. TABLET
   ========================================================== */

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

    .dt-page .dt-wrap{
        width:calc(100% - 28px) !important;
    }

    .pc-dt-localnav__inner{
        width:calc(100% - 28px) !important;
        overflow-x:auto !important;
        scrollbar-width:none;
    }

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

    .dt-page .dt-resource-grid,
    .dt-page .pc15-tool-grid,
    .dt-page .pc15-journey,
    .dt-page .pc-centre-priority-grid,
    .dt-page .pc-road-env-grid,
    .dt-page .pc-choice-grid,
    .dt-page .pc14-type-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }
}


/* ==========================================================
   11. MOBILE
   ========================================================== */

@media(max-width:760px){

    .dt-page .dt-wrap{
        width:calc(100% - 14px) !important;
    }

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

        padding:8px 10px !important;

        overflow-x:auto !important;

        scrollbar-width:none;
    }

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

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

    .dt-page .dt-section{
        padding:21px 16px !important;
    }

    .dt-page .tt-results.show{
        padding:18px 15px !important;
    }
}