/* ======================================================
   CARS & DRIVING
   Loaded after main.css on Cars & Driving pages.
   ====================================================== */

/* Slightly tighter desktop hero */
.cars-driving-page .topic-hero {
    min-height: 415px;
}

.cars-driving-page .topic-hero-inner {
    padding-top: 58px;
    padding-bottom: 58px;
}

/* New heading is longer, so keep it controlled on desktop */
.cars-driving-page .topic-hero-content {
    max-width: 800px;
}

.cars-driving-page .topic-hero h1 {
    font-size: clamp(46px, 5.2vw, 66px);
    line-height: 1.01;
}

/* Tighten question cards without reducing readability */
.cars-driving-page .topic-question-card {
    min-height: 275px;
}

.cars-driving-page .topic-questions {
    padding-top: 66px;
    padding-bottom: 70px;
}

/* The new clean image has the car on the right */
.cars-driving-page .topic-hero-media img {
    object-position: center center;
}


@media (max-width: 900px) {

    .cars-driving-page .topic-hero {
        min-height: 405px;
    }

    .cars-driving-page .topic-hero h1 {
        font-size: clamp(43px, 7vw, 57px);
    }

}


@media (max-width: 760px) {

    .cars-driving-page .topic-hero {
        min-height: 0;
    }

    .cars-driving-page .topic-hero-inner {
        padding-top: 46px;
        padding-bottom: 48px;
    }

    .cars-driving-page .topic-hero-content {
        max-width: 100%;
    }

    .cars-driving-page .topic-hero h1 {
        font-size: clamp(39px, 9.5vw, 49px);
        line-height: 1.04;
        letter-spacing: -1.7px;
    }

    .cars-driving-page .topic-hero-desktop-break {
        display: none;
    }

    .cars-driving-page .topic-hero-content > p:last-child {
        margin-top: 18px;

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

    .cars-driving-page .topic-hero-media img {
        object-position: 67% center;
    }

    .cars-driving-page .topic-question-card {
        min-height: 0;
    }

    .cars-driving-page .topic-questions {
        padding-top: 48px;
        padding-bottom: 52px;
    }

    .cars-driving-page .topic-more-card {
        min-height: 112px;
        padding: 20px 23px;
    }

}


@media (max-width: 520px) {

    .cars-driving-page .topic-hero-inner {
        padding-top: 40px;
        padding-bottom: 42px;
    }

    .cars-driving-page .topic-hero h1 {
        font-size: 40px;
        line-height: 1.05;
        letter-spacing: -1.4px;
    }

    .cars-driving-page .topic-hero-content > p:last-child {
        font-size: 16px;
        line-height: 1.48;
    }

    .cars-driving-page .topic-hero-media img {
        object-position: 70% center;
    }

    .cars-driving-page .topic-more-card {
        min-height: 108px;
        padding: 19px 22px;
    }

    .cars-driving-page .topic-more-card > span {
        margin-bottom: 7px;
        font-size: 26px;
    }

}
/* ======================================================
   CARS & DRIVING — MOBILE HERO IMAGE
   Paste at the VERY END of /css/main.css
   Desktop continues to use /images/cars-driving-hero.jpg
   Mobile uses /images/cars-driving-hero-mobile.jpg
   ====================================================== */

@media (max-width: 760px) {

    .cars-driving-page .topic-hero-media img {
        content: url("/images/cars-driving-hero-mobile.jpg");
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
    }

    /* Stronger left-side readability over the brighter mobile photograph */
      .cars-driving-page .topic-hero-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(4, 31, 46, 0.72) 0%,
                rgba(4, 31, 46, 0.52) 55%,
                rgba(4, 31, 46, 0.20) 100%
            );
    }

}

@media (max-width: 520px) {

    .cars-driving-page .topic-hero-media img {
        object-position: 56% center;
    }

    .cars-driving-page .topic-hero-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(4, 31, 46, 0.74) 0%,
                rgba(4, 31, 46, 0.54) 58%,
                rgba(4, 31, 46, 0.18) 100%
            );
    }

}

/* =========================================================
   CARS & DRIVING — ARTICLE PAGES
   ========================================================= */


/* ---------------------------------------------------------
   ARTICLE COLOURS
   --------------------------------------------------------- */

.cars-article-page {
    --article-gold: #a87508;
    --article-gold-dark: #805800;
    --article-gold-light: #fff6df;
    --article-gold-soft: #f8edd1;

    --article-navy: #082f49;
    --article-text: #102a43;
    --article-muted: #5c7083;
    --article-border: #dbe5ea;
    --article-soft: #f5f8fa;
}


/* ---------------------------------------------------------
   ARTICLE CONTAINER
   --------------------------------------------------------- */

.article-container {
    width: min(1120px, calc(100% - 40px));
    margin: 0 auto;
}


/* ---------------------------------------------------------
   BREADCRUMBS
   --------------------------------------------------------- */

.article-breadcrumbs {
    padding: 18px 0 16px;
    font-size: 0.88rem;
    color: var(--article-muted);
}

.article-breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.article-breadcrumbs li {
    display: flex;
    align-items: center;
}

.article-breadcrumbs li:not(:last-child)::after {
    content: "›";
    margin-left: 8px;
    color: #8da0ae;
}

.article-breadcrumbs a {
    color: var(--article-gold-dark);
    text-decoration: none;
    font-weight: 700;
}

.article-breadcrumbs a:hover {
    text-decoration: underline;
}

.article-breadcrumbs [aria-current="page"] {
    color: var(--article-muted);
}


/* ---------------------------------------------------------
   ARTICLE HERO
   --------------------------------------------------------- */

.article-hero {
    padding: 0 0 38px;
}

.article-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
    gap: 42px;
    align-items: center;
}

.article-category-label {
    display: inline-block;
    margin-bottom: 12px;
    color: var(--article-gold-dark);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.article-hero h1 {
    max-width: 720px;
    margin: 0 0 18px;
    color: var(--article-navy);
    font-size: clamp(2.25rem, 4vw, 3.75rem);
    line-height: 1.05;
    letter-spacing: -0.035em;
}

.article-standfirst {
    max-width: 700px;
    margin: 0 0 20px;
    color: #40596d;
    font-size: 1.12rem;
    line-height: 1.7;
}

.article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 22px;
    margin-top: 20px;
    color: var(--article-muted);
    font-size: 0.9rem;
}

.article-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.article-meta-icon {
    color: var(--article-gold-dark);
    font-weight: 800;
}


/* ---------------------------------------------------------
   HERO IMAGE
   --------------------------------------------------------- */

.article-hero-image {
    position: relative;
    overflow: hidden;
    min-height: 470px;
    border-radius: 16px;
    background: #e7edf0;
    box-shadow: 0 18px 42px rgba(8, 47, 73, 0.12);
}
.article-hero-image picture {
    display: block;
    width: 100%;
    height: 100%;
}

.article-hero-image img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 470px;
    object-fit: cover;
}

.article-hero-image-caption {
    position: absolute;
    right: 18px;
    bottom: 18px;
    left: 18px;
    margin: 0;
    padding: 14px 16px;
    border-radius: 10px;
    background: rgba(8, 47, 73, 0.88);
    color: #ffffff;
    font-size: 0.92rem;
    line-height: 1.45;
}


/* ---------------------------------------------------------
   QUICK ANSWER
   --------------------------------------------------------- */

.article-quick-answer {
    margin: 10px 0 46px;
    padding: 25px 28px;
    border-left: 5px solid var(--article-gold);
    border-radius: 12px;
    background:
        linear-gradient(
            135deg,
            var(--article-gold-light),
            #ffffff
        );
    box-shadow: 0 8px 24px rgba(8, 47, 73, 0.07);
}

.article-quick-answer-header {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 10px;
}

.article-quick-answer-icon {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    border-radius: 50%;
    background: var(--article-gold);
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 800;
}

.article-quick-answer h2 {
    margin: 0;
    color: var(--article-navy);
    font-size: 1.35rem;
}

.article-quick-answer p {
    margin: 0;
    color: var(--article-text);
    font-size: 1rem;
    line-height: 1.7;
}


/* ---------------------------------------------------------
   MAIN ARTICLE LAYOUT
   --------------------------------------------------------- */

.article-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 55px;
    align-items: start;
}


/* ---------------------------------------------------------
   ON THIS PAGE
   --------------------------------------------------------- */

.article-toc {
    position: sticky;
    top: 25px;
    padding: 22px;
    border: 1px solid var(--article-border);
    border-radius: 12px;
    background: var(--article-soft);
}

.article-toc h2 {
    margin: 0 0 14px;
    color: var(--article-navy);
    font-size: 1rem;
}

.article-toc ol {
    margin: 0;
    padding-left: 20px;
}

.article-toc li {
    margin: 0 0 10px;
    color: var(--article-muted);
    font-size: 0.88rem;
    line-height: 1.4;
}

.article-toc li:last-child {
    margin-bottom: 0;
}

.article-toc a {
    color: var(--article-text);
    text-decoration: none;
}

.article-toc a:hover {
    color: var(--article-gold-dark);
    text-decoration: underline;
}


/* ---------------------------------------------------------
   ARTICLE CONTENT
   --------------------------------------------------------- */

.article-content {
    min-width: 0;
}

.article-section {
    margin-bottom: 52px;
    scroll-margin-top: 25px;
}

.article-section h2 {
    margin: 0 0 16px;
    color: var(--article-navy);
    font-size: clamp(1.65rem, 3vw, 2.15rem);
    line-height: 1.18;
    letter-spacing: -0.02em;
}

.article-section h3 {
    margin: 30px 0 12px;
    color: var(--article-navy);
    font-size: 1.25rem;
    line-height: 1.3;
}

.article-section p {
    margin: 0 0 18px;
    color: var(--article-text);
    font-size: 1rem;
    line-height: 1.8;
}

.article-section ul,
.article-section ol {
    margin: 0 0 22px;
    padding-left: 24px;
}

.article-section li {
    margin-bottom: 9px;
    line-height: 1.65;
}


/* ---------------------------------------------------------
   ARTICLE CALLOUT
   --------------------------------------------------------- */

.article-callout {
    margin: 28px 0;
    padding: 20px 22px;
    border-left: 4px solid var(--article-gold);
    border-radius: 0 10px 10px 0;
    background: var(--article-gold-light);
}

.article-callout p {
    margin: 0;
    color: var(--article-text);
    font-weight: 700;
}


/* =========================================================
   OIL JOURNEY / OIL STAGES
   ========================================================= */

.oil-journey {
    margin: 34px 0 50px;
    padding: 30px;
    border: 1px solid var(--article-border);
    border-radius: 14px;
    background: var(--article-soft);
}

.oil-journey-header {
    margin-bottom: 25px;
}

.oil-journey-header h2 {
    margin: 0 0 7px;
    color: var(--article-navy);
}

.oil-journey-header p {
    margin: 0;
    color: var(--article-muted);
    line-height: 1.6;
}

.oil-stages {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.oil-stage {
    position: relative;
    padding: 20px 14px;
    border: 1px solid var(--article-border);
    border-radius: 12px;
    background: #ffffff;
    text-align: center;
}

.oil-stage-number {
    display: grid;
    width: 30px;
    height: 30px;
    margin: 0 auto 14px;
    place-items: center;
    border-radius: 50%;
    background: var(--article-gold);
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 800;
}

.oil-stage-visual {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 145px;
    margin-bottom: 15px;
}

.oil-stage-visual img {
    display: block;
    max-width: 100%;
    max-height: 140px;
    object-fit: contain;
}

.oil-stage h3 {
    margin: 0 0 7px;
    color: var(--article-navy);
    font-size: 1rem;
}

.oil-stage p {
    margin: 0;
    color: var(--article-muted);
    font-size: 0.86rem;
    line-height: 1.5;
}


/* =========================================================
   INTERACTIVE OIL CHANGE GUIDE
   ========================================================= */

.oil-risk-tool {
    margin: 40px 0 52px;
    overflow: hidden;
    border: 1px solid var(--article-border);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 12px 34px rgba(8, 47, 73, 0.08);
}

.oil-risk-header {
    padding: 28px 30px 22px;
    background: var(--article-soft);
}

.oil-risk-header h2 {
    margin: 0 0 8px;
    color: var(--article-navy);
}

.oil-risk-header p {
    max-width: 720px;
    margin: 0;
    color: var(--article-muted);
    line-height: 1.6;
}


/* Time / Mileage buttons */

.oil-risk-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 18px 30px 0;
}

.oil-risk-tab {
    min-height: 48px;
    padding: 11px 16px;
    border: 1px solid var(--article-border);
    border-radius: 8px;
    background: #eef3f5;
    color: var(--article-navy);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}

.oil-risk-tab:hover {
    border-color: var(--article-gold);
}

.oil-risk-tab.is-active,
.oil-risk-tab[aria-selected="true"] {
    border-color: var(--article-gold-dark);
    background: var(--article-gold-dark);
    color: #ffffff;
}


/* Slider */

.oil-slider-panel {
    padding: 28px 30px;
}

.oil-slider-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.oil-slider-title {
    color: var(--article-navy);
    font-weight: 800;
}

.oil-slider-value {
    color: var(--article-gold-dark);
    font-size: 1.2rem;
    font-weight: 800;
}

.oil-slider {
    width: 100%;
    height: 8px;
    margin: 4px 0 12px;
    border-radius: 999px;
    accent-color: var(--article-gold);
    cursor: pointer;
}

.oil-slider-scale {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: var(--article-muted);
    font-size: 0.78rem;
}


/* ---------------------------------------------------------
   RISK RESULT
   --------------------------------------------------------- */

.oil-risk-result {
    margin: 0 30px 25px;
    padding: 22px;
    border-radius: 12px;
    background: var(--article-gold-light);
}

.oil-risk-result-label {
    margin: 0 0 5px;
    color: var(--article-muted);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.oil-risk-result h3 {
    margin: 0 0 8px;
    color: var(--article-gold-dark);
    font-size: 1.35rem;
}

.oil-risk-result p {
    margin: 0;
    color: var(--article-text);
    line-height: 1.65;
}


/* ---------------------------------------------------------
   THREE RISK INDICATORS
   --------------------------------------------------------- */

.oil-risk-indicators {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    padding: 0 30px 30px;
}

.oil-risk-indicator {
    padding: 20px 16px;
    border: 1px solid var(--article-border);
    border-radius: 11px;
    background: var(--article-soft);
    text-align: center;
}

.oil-risk-icon {
    display: grid;
    width: 45px;
    height: 45px;
    margin: 0 auto 11px;
    place-items: center;
    border-radius: 50%;
    background: var(--article-gold-light);
    color: var(--article-gold-dark);
    font-size: 1.25rem;
}

.oil-risk-indicator h3 {
    margin: 0 0 10px;
    color: var(--article-navy);
    font-size: 0.96rem;
}


/* Risk meter */

.risk-meter {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin: 0 auto 9px;
}

.risk-meter span {
    width: 16px;
    height: 7px;
    border-radius: 999px;
    background: #d8e1e6;
}

.risk-meter span.is-active {
    background: var(--article-gold);
}

.oil-risk-level {
    margin: 0;
    color: var(--article-muted);
    font-size: 0.82rem;
    font-weight: 700;
}


/* ---------------------------------------------------------
   TOOL DISCLAIMER
   --------------------------------------------------------- */

.oil-risk-note {
    margin: 0;
    padding: 17px 30px;
    border-top: 1px solid var(--article-border);
    background: #fbfcfd;
    color: var(--article-muted);
    font-size: 0.82rem;
    line-height: 1.55;
}


/* =========================================================
   BOTTOM LINE
   ========================================================= */

.article-bottom-line {
    margin: 48px 0;
    padding: 26px 28px;
    border: 1px solid #ead8aa;
    border-radius: 14px;
    background:
        linear-gradient(
            135deg,
            var(--article-gold-light),
            #ffffff
        );
}

.article-bottom-line-inner {
    display: grid;
    grid-template-columns: 50px 1fr;
    gap: 18px;
    align-items: start;
}

.article-bottom-line-icon {
    display: grid;
    width: 50px;
    height: 50px;
    place-items: center;
    border-radius: 12px;
    background: var(--article-gold);
    color: #ffffff;
    font-size: 1.35rem;
    font-weight: 800;
}

.article-bottom-line h2 {
    margin: 0 0 7px;
    color: var(--article-gold-dark);
    font-size: 1.35rem;
}

.article-bottom-line p {
    margin: 0;
    color: var(--article-text);
    line-height: 1.7;
}


/* =========================================================
   RELATED QUESTIONS
   ========================================================= */

.article-related {
    margin: 50px 0 20px;
}

.article-related-header {
    margin-bottom: 20px;
}

.article-related-header h2 {
    margin: 0 0 7px;
    color: var(--article-navy);
    font-size: 1.75rem;
}

.article-related-header p {
    margin: 0;
    color: var(--article-muted);
}

.article-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.article-related-card {
    display: flex;
    min-height: 110px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px;
    border: 1px solid var(--article-border);
    border-top: 4px solid var(--article-gold);
    border-radius: 11px;
    background: #ffffff;
    color: var(--article-navy);
    text-decoration: none;
    font-weight: 800;
    line-height: 1.4;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

.article-related-card:hover {
    transform: translateY(-3px);
    border-color: var(--article-gold);
    box-shadow: 0 9px 22px rgba(8, 47, 73, 0.09);
}

.article-related-arrow {
    flex: 0 0 auto;
    color: var(--article-gold-dark);
    font-size: 1.25rem;
}


/* =========================================================
   ARTICLE DIVIDER
   ========================================================= */

.article-divider {
    width: 100%;
    height: 1px;
    margin: 48px 0;
    border: 0;
    background: var(--article-border);
}


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

@media (max-width: 900px) {

    .article-hero-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .article-hero-image {
        min-height: 360px;
    }

    .article-hero-image img {
        min-height: 360px;
    }

    .article-layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .article-toc {
        position: static;
        order: -1;
    }

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

    .article-related-grid {
        grid-template-columns: 1fr 1fr;
    }
}


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

@media (max-width: 600px) {

    .article-container {
        width: min(100% - 30px, 1120px);
    }

    .article-breadcrumbs {
        padding: 14px 0;
        font-size: 0.78rem;
    }

    .article-hero {
        padding-bottom: 26px;
    }

    .article-hero-grid {
        gap: 22px;
    }

    .article-category-label {
        margin-bottom: 9px;
        font-size: 0.75rem;
    }

    .article-hero h1 {
        margin-bottom: 14px;
        font-size: clamp(2rem, 10vw, 2.65rem);
        line-height: 1.07;
    }

    .article-standfirst {
        font-size: 1rem;
        line-height: 1.65;
    }

    .article-meta {
        gap: 9px 16px;
        margin-top: 16px;
        font-size: 0.8rem;
    }


    /* Hero image */

    .article-hero-image {
        min-height: 280px;
        border-radius: 12px;
    }

    .article-hero-image img {
        min-height: 280px;
    }

    .article-hero-image-caption {
        right: 12px;
        bottom: 12px;
        left: 12px;
        padding: 11px 13px;
        font-size: 0.82rem;
    }


    /* Quick answer */

    .article-quick-answer {
        margin: 5px 0 34px;
        padding: 20px;
    }

    .article-quick-answer-header {
        align-items: flex-start;
    }

    .article-quick-answer-icon {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
        font-size: 1rem;
    }

    .article-quick-answer h2 {
        font-size: 1.2rem;
    }

    .article-quick-answer p {
        font-size: 0.95rem;
    }


    /* Article */

    .article-section {
        margin-bottom: 40px;
    }

    .article-section h2 {
        font-size: 1.55rem;
    }

    .article-section p {
        line-height: 1.72;
    }


    /* Oil stages — 2 x 2 on mobile */

    .oil-journey {
        margin: 28px 0 40px;
        padding: 20px 15px;
    }

    .oil-stages {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .oil-stage {
        padding: 16px 9px;
    }

    .oil-stage-visual {
        height: 105px;
    }

    .oil-stage-visual img {
        max-height: 100px;
    }

    .oil-stage h3 {
        font-size: 0.9rem;
    }

    .oil-stage p {
        font-size: 0.78rem;
    }


    /* Interactive tool */

    .oil-risk-tool {
        margin: 32px 0 42px;
        border-radius: 12px;
    }

    .oil-risk-header {
        padding: 22px 18px 18px;
    }

    .oil-risk-tabs {
        gap: 6px;
        padding: 14px 18px 0;
    }

    .oil-risk-tab {
        min-height: 50px;
        padding: 10px 8px;
        font-size: 0.84rem;
    }

    .oil-slider-panel {
        padding: 24px 18px;
    }

    .oil-slider-label-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
        margin-bottom: 18px;
    }

    .oil-slider {
        height: 10px;
    }

    .oil-slider-scale {
        font-size: 0.7rem;
    }

    .oil-risk-result {
        margin: 0 18px 18px;
        padding: 18px;
    }


    /* Keep 3 indicators visible on larger phones */

    .oil-risk-indicators {
        grid-template-columns: repeat(3, 1fr);
        gap: 7px;
        padding: 0 18px 22px;
    }

    .oil-risk-indicator {
        padding: 14px 6px;
    }

    .oil-risk-icon {
        width: 36px;
        height: 36px;
        margin-bottom: 8px;
        font-size: 1rem;
    }

    .oil-risk-indicator h3 {
        font-size: 0.76rem;
    }

    .risk-meter {
        gap: 2px;
    }

    .risk-meter span {
        width: 10px;
        height: 6px;
    }

    .oil-risk-level {
        font-size: 0.7rem;
    }

    .oil-risk-note {
        padding: 15px 18px;
        font-size: 0.76rem;
    }


    /* Bottom line */

    .article-bottom-line {
        margin: 38px 0;
        padding: 21px 18px;
    }

    .article-bottom-line-inner {
        grid-template-columns: 40px 1fr;
        gap: 13px;
    }

    .article-bottom-line-icon {
        width: 40px;
        height: 40px;
        font-size: 1.05rem;
    }

    .article-bottom-line h2 {
        font-size: 1.2rem;
    }


    /* Related questions */

    .article-related {
    margin: 40px 0 20px;
}

    .article-related-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .article-related-card {
        min-height: 82px;
        padding: 17px;
    }
}


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

@media (max-width: 390px) {

    .article-container {
        width: min(100% - 24px, 1120px);
    }

    .article-hero h1 {
        font-size: 1.9rem;
    }

    .oil-stages {
        gap: 7px;
    }

    .oil-stage {
        padding: 13px 6px;
    }

    /*
       On very narrow screens the three risk indicators
       stack vertically rather than becoming unreadable.
    */

    .oil-risk-indicators {
        grid-template-columns: 1fr;
    }

    .oil-risk-indicator {
        display: grid;
        grid-template-columns: 40px 1fr;
        column-gap: 12px;
        align-items: center;
        text-align: left;
    }

    .oil-risk-icon {
        grid-row: 1 / 4;
        margin: 0;
    }

    .oil-risk-indicator h3 {
        margin: 0 0 5px;
        font-size: 0.9rem;
    }

    .risk-meter {
        justify-content: flex-start;
        margin: 0 0 5px;
    }

    .oil-risk-level {
        font-size: 0.75rem;
    }
}

/* =========================================================
   ENGINE OIL — SIMPLE OIL STAGE VISUALS
   ========================================================= */

.oil-demo-jar {
    position: relative;
    width: 76px;
    height: 108px;
    overflow: hidden;
    border: 3px solid #aab8c1;
    border-top-width: 7px;
    border-radius: 7px 7px 15px 15px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow:
        inset 8px 0 12px rgba(255,255,255,0.55),
        0 7px 14px rgba(8,47,73,0.08);
}

.oil-demo-jar::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 10px;
    width: 50px;
    height: 7px;
    border-radius: 4px 4px 0 0;
    background: #7d8d97;
}

.oil-demo-jar span {
    position: absolute;
    right: 4px;
    bottom: 4px;
    left: 4px;
    height: 73%;
    border-radius: 2px 2px 10px 10px;
}

.oil-demo-fresh span {
    background:
        linear-gradient(
            180deg,
            #e6ad31,
            #b9750c
        );
}

.oil-demo-used span {
    background:
        linear-gradient(
            180deg,
            #76501e,
            #3f2a13
        );
}

.oil-demo-sludge span {
    height: 78%;
    background:
        linear-gradient(
            180deg,
            #3b3028,
            #171513
        );
}

.oil-demo-damage span {
    height: 82%;
    background:
        linear-gradient(
            180deg,
            #241e1b,
            #080808
        );
}

.oil-demo-sludge span::before,
.oil-demo-damage span::before {
    content: "";
    position: absolute;
    top: -5px;
    left: 3px;
    right: 3px;
    height: 10px;
    border-radius: 50%;
    background: inherit;
}

/* =========================================================
   ENGINE OIL ARTICLE — FINAL VISUAL REFINEMENTS
   ========================================================= */

/* Brown Quick Answer */
.cars-article-page .article-quick-answer {
    background: linear-gradient(135deg,#805800 0%,#a87508 100%);
    color:#fff; border:0; border-radius:12px; padding:25px 28px;
    box-shadow:0 10px 24px rgba(8,47,73,.12);
}
.cars-article-page .article-quick-answer-header {display:flex;align-items:center;gap:16px;margin-bottom:10px;}
.cars-article-page .article-quick-answer-icon {
    display:grid;width:52px;height:52px;flex:0 0 52px;place-items:center;
    border:2px solid rgba(255,255,255,.88);border-radius:50%;
    background:rgba(255,255,255,.08);color:#fff;
}
.cars-article-page .article-quick-answer-icon svg {
    display:block;width:27px;height:27px;fill:none;stroke:currentColor;
    stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
.cars-article-page .article-quick-answer h2,
.cars-article-page .article-quick-answer p {color:#fff;}

/* Brown sticky On This Page */
.cars-article-page .article-toc {
    background:linear-gradient(145deg,#805800 0%,#956a0b 100%);
    border:1px solid #a87508;color:#fff;
    box-shadow:0 8px 22px rgba(8,47,73,.12);
}
.cars-article-page .article-toc h2 {
    color:#fff;padding-bottom:11px;border-bottom:1px solid rgba(255,255,255,.24);
}
.cars-article-page .article-toc ol,
.cars-article-page .article-toc li {color:rgba(255,255,255,.78);}
.cars-article-page .article-toc a {color:#fff;}
.cars-article-page .article-toc a:hover,
.cars-article-page .article-toc a:focus-visible {color:#fff4cf;text-decoration:underline;}

/* Real oil-stage images */
.cars-article-page .oil-stage-visual {
    height:150px;display:flex;align-items:center;justify-content:center;margin:4px 0 14px;
}
.cars-article-page .oil-stage-visual img {
    display:block;width:auto;max-width:128px;max-height:145px;object-fit:contain;
    border-radius:6px;filter:drop-shadow(0 7px 7px rgba(8,47,73,.14));
}

/* 3D vertical slider handle */
.cars-article-page .oil-slider {
    -webkit-appearance:none;appearance:none;width:100%;height:44px;margin:0 0 4px;
    padding:0;background:transparent;accent-color:var(--article-gold);
    cursor:grab;touch-action:pan-y;
}
.cars-article-page .oil-slider:active {cursor:grabbing;}
.cars-article-page .oil-slider::-webkit-slider-runnable-track {
    height:7px;border:1px solid #c6d0d6;border-radius:999px;background:#dbe3e7;
    box-shadow:inset 0 1px 2px rgba(8,47,73,.16);
}
.cars-article-page .oil-slider::-webkit-slider-thumb {
    -webkit-appearance:none;appearance:none;width:24px;height:38px;margin-top:-16px;
    border:1px solid #704c00;border-radius:6px;
    background:linear-gradient(90deg,#8a5d00 0%,#bd8509 18%,#edc34f 45%,#f8d875 52%,#c98f0d 75%,#805800 100%);
    box-shadow:0 4px 7px rgba(8,47,73,.30),inset 2px 0 1px rgba(255,255,255,.35),inset -2px 0 1px rgba(80,50,0,.22);
    cursor:grab;
}
.cars-article-page .oil-slider:active::-webkit-slider-thumb {cursor:grabbing;box-shadow:0 2px 4px rgba(8,47,73,.34),inset 1px 1px 3px rgba(80,50,0,.22);}
.cars-article-page .oil-slider::-moz-range-track {
    height:7px;border:1px solid #c6d0d6;border-radius:999px;background:#dbe3e7;
    box-shadow:inset 0 1px 2px rgba(8,47,73,.16);
}
.cars-article-page .oil-slider::-moz-range-progress {height:7px;border-radius:999px;background:var(--article-gold);}
.cars-article-page .oil-slider::-moz-range-thumb {
    width:24px;height:38px;border:1px solid #704c00;border-radius:6px;
    background:linear-gradient(90deg,#8a5d00 0%,#bd8509 18%,#edc34f 45%,#f8d875 52%,#c98f0d 75%,#805800 100%);
    box-shadow:0 4px 7px rgba(8,47,73,.30),inset 2px 0 1px rgba(255,255,255,.35),inset -2px 0 1px rgba(80,50,0,.22);
    cursor:grab;
}
.cars-article-page .oil-slider:focus-visible {outline:3px solid rgba(168,117,8,.28);outline-offset:3px;}

/* Explore another topic */
.cars-article-page .article-explore {margin:50px 0 34px;}
.cars-article-page .article-explore-header {margin-bottom:20px;}
.cars-article-page .article-explore-header h2 {margin:0 0 7px;color:var(--article-navy);font-size:1.75rem;}
.cars-article-page .article-explore-header p {margin:0;color:var(--article-muted);}
.cars-article-page .article-explore-grid {
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;
}
.cars-article-page .article-explore-card {
    min-height:112px;padding:18px;border-radius:11px;display:flex;flex-direction:column;
    justify-content:space-between;gap:16px;color:#fff;text-decoration:none;
    box-shadow:0 5px 14px rgba(8,47,73,.10);
    transition:transform .18s ease,box-shadow .18s ease;
}
.cars-article-page .article-explore-card:hover,
.cars-article-page .article-explore-card:focus-visible {
    color:#fff;text-decoration:none;transform:translateY(-3px);
    box-shadow:0 9px 20px rgba(8,47,73,.16);
}
.cars-article-page .article-explore-card strong {display:block;color:#fff;font-size:1rem;line-height:1.3;}
.cars-article-page .article-explore-card small {display:block;color:rgba(255,255,255,.92);font-size:.82rem;line-height:1.35;}
.cars-article-page .article-explore-big {background:#087f8c;}
.cars-article-page .article-explore-home {background:#5b7f55;}
.cars-article-page .article-explore-travel {background:#4f76a8;}
.cars-article-page .article-explore-work {background:#8057a2;}

@media (max-width:900px) {
    .cars-article-page .article-explore-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
    .cars-article-page .article-toc {box-shadow:0 6px 18px rgba(8,47,73,.10);}
}
@media (max-width:600px) {
    .cars-article-page .article-quick-answer {padding:21px 19px;}
    .cars-article-page .article-quick-answer-header {align-items:center;gap:12px;}
    .cars-article-page .article-quick-answer-icon {width:42px;height:42px;flex-basis:42px;}
    .cars-article-page .article-quick-answer-icon svg {width:23px;height:23px;}
    .cars-article-page .oil-stage-visual {height:125px;}
    .cars-article-page .oil-stage-visual img {max-width:108px;max-height:120px;}
    .cars-article-page .oil-slider {height:48px;}
    .cars-article-page .article-explore {margin-top:40px;}
    .cars-article-page .article-explore-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
    .cars-article-page .article-explore-card {min-height:100px;padding:15px;}
}
@media (max-width:390px) {
    .cars-article-page .article-explore-grid {grid-template-columns:1fr;}
    .cars-article-page .article-explore-card {min-height:88px;}
}

/* =========================================================
   FULL-WIDTH ARTICLE HERO
   ========================================================= */

.cars-article-page .article-hero-full {
    position: relative;
    min-height: 525px;
    padding: 0;
    overflow: hidden;
    background: #082f49;
}


/* Background photograph */

.cars-article-page .article-hero-background {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.cars-article-page .article-hero-background img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 525px;
    object-fit: cover;
    object-position: center center;
}


/* Dark overlay */

.cars-article-page .article-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(5, 34, 51, 0.92) 0%,
            rgba(5, 34, 51, 0.82) 35%,
            rgba(5, 34, 51, 0.42) 62%,
            rgba(5, 34, 51, 0.12) 100%
        );
}


/* Text positioning */

.cars-article-page .article-hero-content {
    position: relative;
    z-index: 2;

    min-height: 525px;

    display: flex;
    align-items: center;
}


/* Limit text width */

.cars-article-page .article-hero-full .article-hero-copy {
    max-width: 690px;
    padding: 55px 0;
}


/* Category label */

.cars-article-page .article-hero-full .article-category-label {
    color: #ffffff;
    background: #a87508;
}


/* Main heading */

.cars-article-page .article-hero-full h1 {
    max-width: 680px;
    margin-top: 18px;

    color: #ffffff;

    font-size: clamp(2.7rem, 4.5vw, 4.25rem);
    line-height: 1.04;

    text-shadow:
        0 2px 12px rgba(0, 0, 0, 0.22);
}


/* Intro */

.cars-article-page .article-hero-full .article-standfirst {
    max-width: 650px;

    color: rgba(255, 255, 255, 0.94);

    font-size: 1.12rem;
    line-height: 1.7;
}


/* Metadata */

.cars-article-page .article-hero-full .article-meta {
    color: rgba(255, 255, 255, 0.92);
}

.cars-article-page .article-hero-full .article-meta-item {
    color: rgba(255, 255, 255, 0.92);
}

.cars-article-page .article-hero-full .article-meta-icon {
    color: #fbbf24;
}


/* Tablet */

@media (max-width: 900px) {

    .cars-article-page .article-hero-full,
    .cars-article-page .article-hero-content {
        min-height: 480px;
    }

    .cars-article-page .article-hero-background img {
        min-height: 480px;
    }

    .cars-article-page .article-hero-full .article-hero-copy {
        max-width: 620px;
    }

}


/* Mobile */

@media (max-width: 600px) {

    .cars-article-page .article-hero-full,
    .cars-article-page .article-hero-content {
        min-height: 560px;
    }

    .cars-article-page .article-hero-background img {
        min-height: 560px;
        object-position: center center;
    }

    .cars-article-page .article-hero-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(5, 34, 51, 0.42) 0%,
                rgba(5, 34, 51, 0.70) 45%,
                rgba(5, 34, 51, 0.94) 100%
            );
    }

    .cars-article-page .article-hero-content {
        align-items: flex-end;
    }

    .cars-article-page .article-hero-full .article-hero-copy {
        max-width: none;
        padding: 55px 0 38px;
    }

    .cars-article-page .article-hero-full h1 {
        font-size: 2.45rem;
        line-height: 1.06;
    }

    .cars-article-page .article-hero-full .article-standfirst {
        font-size: 1rem;
        line-height: 1.6;
    }

}
/* =========================================================
   CAR BATTERY ARTICLE
   /your-car-battery-dies/
   ========================================================= */


/* ---------------------------------------------------------
   IMAGE HOLDERS

   These remain in the HTML permanently.

   Before an image has been uploaded, the holder displays
   the placeholder label.

   Once the correctly named image is uploaded, it sits over
   the placeholder automatically.
   --------------------------------------------------------- */

.battery-article-page .article-image-block {
    margin: 42px 0;
}

.battery-article-page .article-image-holder {
    position: relative;

    min-height: 360px;

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

    overflow: hidden;

    border: 1px solid #dbe5ea;
    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            #eef3f5 0%,
            #f8fafb 100%
        );
}

.battery-article-page .article-image-holder img {
    position: absolute;
    inset: 0;
    z-index: 2;

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.battery-article-page .article-image-placeholder {
    position: relative;
    z-index: 1;

    padding: 20px;

    color: #6b7f8d;

    font-size: 0.92rem;
    font-weight: 700;
    text-align: center;
}

.battery-article-page .article-image-block figcaption {
    margin-top: 10px;

    color: #5c7083;

    font-size: 0.9rem;
    line-height: 1.55;
}


/* ---------------------------------------------------------
   WARNING SIGN CARDS
   --------------------------------------------------------- */

.battery-article-page .battery-sign-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 16px;

    margin: 28px 0 10px;
}

.battery-article-page .battery-sign-card {
    padding: 22px;

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

    background: #f7fafb;
}

.battery-article-page .battery-sign-card strong {
    display: block;

    margin-bottom: 8px;

    color: #805800;

    font-size: 1.03rem;
}

.battery-article-page .battery-sign-card p {
    margin: 0;
}


/* ---------------------------------------------------------
   WHAT TO DO - STEPS
   --------------------------------------------------------- */

.battery-article-page .battery-step-list {
    display: grid;

    gap: 16px;

    margin-top: 28px;
}

.battery-article-page .battery-step {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);

    gap: 17px;

    padding: 21px;

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

    background: #ffffff;
}

.battery-article-page .battery-step-number {
    width: 42px;
    height: 42px;

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

    border-radius: 50%;

    background: #916a12;
    color: #ffffff;

    font-size: 1rem;
    font-weight: 800;
}

.battery-article-page .battery-step h3 {
    margin: 0 0 6px;
}

.battery-article-page .battery-step p {
    margin: 0;
}


/* ---------------------------------------------------------
   JUMP-START SAFETY BOX
   --------------------------------------------------------- */

.battery-article-page .battery-safety-box {
    margin: 30px 0;

    padding: 26px 28px;

    border-left: 5px solid #a87508;
    border-radius: 0 12px 12px 0;

    background: #fff8e7;
}

.battery-article-page .battery-safety-box h3 {
    margin-top: 0;

    color: #6e4b00;
}

.battery-article-page .battery-safety-box ul {
    margin-bottom: 0;
    padding-left: 22px;
}

.battery-article-page .battery-safety-box li {
    margin: 9px 0;

    line-height: 1.65;
}


/* =========================================================
   INTERACTIVE BATTERY GUIDE
   ========================================================= */

.battery-article-page .battery-guide {
    margin: 48px 0;

    padding: 32px;

    border: 1px solid #dbe5ea;
    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            #f7fafb 0%,
            #ffffff 100%
        );

    box-shadow:
        0 12px 32px rgba(8, 47, 73, 0.07);
}

.battery-article-page .battery-guide-heading {
    margin-bottom: 25px;
}

.battery-article-page .battery-guide-heading h2 {
    margin-top: 7px;
    margin-bottom: 8px;
}

.battery-article-page .battery-guide-heading p {
    margin-bottom: 0;
}


/* Buttons */

.battery-article-page .battery-symptom-buttons {
    display: grid;

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

    gap: 12px;

    margin: 24px 0;
}

.battery-article-page .battery-symptom-button {
    min-height: 58px;

    padding: 13px 16px;

    border: 2px solid #d6e0e5;
    border-radius: 10px;

    background: #ffffff;
    color: #102a43;

    font: inherit;
    font-weight: 700;

    cursor: pointer;

    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

.battery-article-page .battery-symptom-button:hover {
    border-color: #a87508;

    transform: translateY(-1px);

    box-shadow:
        0 5px 14px rgba(8, 47, 73, 0.08);
}

.battery-article-page .battery-symptom-button:focus-visible {
    outline: 3px solid rgba(251, 191, 36, 0.42);
    outline-offset: 3px;
}

.battery-article-page
.battery-symptom-button.is-active {
    border-color: #916a12;

    background: #916a12;
    color: #ffffff;
}


/* Result */

.battery-article-page .battery-guide-result {
    margin-top: 22px;

    padding: 25px;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #805800 0%,
            #a87508 100%
        );

    color: #ffffff;
}

.battery-article-page .battery-result-label {
    display: inline-block;

    margin-bottom: 8px;

    color: #ffe7a1;

    font-size: 0.78rem;
    font-weight: 800;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.battery-article-page .battery-guide-result h3 {
    margin: 0 0 10px;

    color: #ffffff;
}

.battery-article-page .battery-guide-result p {
    color: rgba(255, 255, 255, 0.94);
}

.battery-article-page .battery-result-next {
    margin-top: 20px;

    padding-top: 18px;

    border-top:
        1px solid rgba(255, 255, 255, 0.25);
}

.battery-article-page .battery-result-next strong {
    display: block;

    margin-bottom: 5px;

    color: #ffffff;
}

.battery-article-page .battery-result-next p {
    margin-bottom: 0;
}

.battery-article-page .battery-guide-disclaimer {
    margin: 15px 3px 0;

    color: #5c7083;

    font-size: 0.84rem;
    line-height: 1.55;
}


/* ---------------------------------------------------------
   PREVENTION TIPS
   --------------------------------------------------------- */

.battery-article-page .article-tip-list {
    display: grid;

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

    gap: 16px;

    margin-top: 27px;
}

.battery-article-page .article-tip {
    padding: 22px;

    border-top: 4px solid #a87508;
    border-radius: 10px;

    background: #f7fafb;
}

.battery-article-page .article-tip strong {
    display: block;

    margin-bottom: 7px;

    color: #102a43;
}

.battery-article-page .article-tip p {
    margin: 0;
}


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

@media (max-width: 760px) {

    .battery-article-page .article-image-holder {
        min-height: 300px;
    }

    .battery-article-page .battery-guide {
        padding: 25px;
    }

}


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

@media (max-width: 600px) {

    .battery-article-page .battery-sign-grid,
    .battery-article-page .battery-symptom-buttons,
    .battery-article-page .article-tip-list {
        grid-template-columns: 1fr;
    }

    .battery-article-page .article-image-holder {
        min-height: 240px;
    }

    .battery-article-page .battery-step {
        grid-template-columns: 38px minmax(0, 1fr);

        gap: 13px;

        padding: 18px;
    }

    .battery-article-page .battery-step-number {
        width: 36px;
        height: 36px;
    }

    .battery-article-page .battery-safety-box {
        padding: 21px;
    }

    .battery-article-page .battery-guide {
        margin: 38px 0;

        padding: 20px;
    }

    .battery-article-page .battery-symptom-button {
        min-height: 54px;
    }

    .battery-article-page .battery-guide-result {
        padding: 21px;
    }

}
/* =========================================================
   CAR OVERHEATING ARTICLE
   ========================================================= */

.overheating-article-page .overheat-sign-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 28px 0 10px;
}

.overheating-article-page .overheat-sign-card {
    padding: 22px;
    border: 1px solid #dbe5ea;
    border-radius: 12px;
    background: #f7fafb;
}

.overheating-article-page .overheat-sign-card strong {
    display: block;
    margin-bottom: 8px;
    color: #805800;
    font-size: 1.03rem;
}

.overheating-article-page .overheat-sign-card p {
    margin: 0;
}
.overheating-article-page .article-image-block {
    margin: 42px 0;
}

.overheating-article-page .article-image-holder {
    position: relative;
    min-height: 360px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid #dbe5ea;
    border-radius: 14px;
    background: linear-gradient(135deg, #eef3f5, #f8fafb);
}

.overheating-article-page .article-image-holder img {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.overheating-article-page .article-image-placeholder {
    position: relative;
    z-index: 1;
    padding: 20px;
    color: #6b7f8d;
    font-size: 0.92rem;
    font-weight: 700;
    text-align: center;
}
.overheating-article-page .overheat-step-list {
    display: grid;
    gap: 16px;
    margin-top: 28px;
}

.overheating-article-page .overheat-step {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 17px;
    padding: 21px;
    border: 1px solid #dbe5ea;
    border-radius: 12px;
    background: #ffffff;
}

.overheating-article-page .overheat-step-number {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #916a12;
    color: #ffffff;
    font-weight: 800;
}

.overheating-article-page .overheat-step h3 {
    margin: 0 0 6px;
}

.overheating-article-page .overheat-step p {
    margin: 0;
}
.overheating-article-page .overheat-danger-box {
    margin: 34px 0;
    padding: 25px 28px;
    border-left: 5px solid #a33a2b;
    border-radius: 0 12px 12px 0;
    background: #fff1ee;
}

.overheating-article-page .overheat-danger-box strong {
    display: block;
    margin-bottom: 8px;
    color: #7d2b20;
    font-size: 1.08rem;
}

.overheating-article-page .overheat-danger-box p {
    margin: 0;
}
.overheating-article-page .overheat-guide {
    margin: 48px 0;
    padding: 32px;
    border: 1px solid #dbe5ea;
    border-radius: 16px;
    background: linear-gradient(145deg, #f7fafb, #ffffff);
    box-shadow: 0 12px 32px rgba(8, 47, 73, 0.07);
}

.overheating-article-page .overheat-guide-heading {
    margin-bottom: 25px;
}

.overheating-article-page .overheat-guide-heading h2 {
    margin: 7px 0 8px;
}

.overheating-article-page .overheat-guide-heading p {
    margin-bottom: 0;
}
.overheating-article-page .overheat-level-buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 24px 0;
}

.overheating-article-page .overheat-level-button {
    min-height: 58px;
    padding: 13px 16px;
    border: 2px solid #d6e0e5;
    border-radius: 10px;
    background: #ffffff;
    color: #102a43;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: 0.18s ease;
}

.overheating-article-page .overheat-level-button:hover {
    border-color: #a87508;
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(8,47,73,0.08);
}

.overheating-article-page .overheat-level-button.is-active {
    border-color: #916a12;
    background: #916a12;
    color: #ffffff;
}
.overheating-article-page .overheat-level-button:focus-visible {
    outline: 3px solid rgba(251,191,36,0.42);
    outline-offset: 3px;
}
.overheating-article-page .overheat-guide-result {
    margin-top: 22px;
    padding: 25px;
    border-radius: 12px;
    background: linear-gradient(135deg, #805800, #a87508);
    color: #ffffff;
}

.overheating-article-page .overheat-result-label {
    display: inline-block;
    margin-bottom: 8px;
    color: #ffe7a1;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.overheating-article-page .overheat-guide-result h3 {
    margin: 0 0 10px;
    color: #ffffff;
}

.overheating-article-page .overheat-guide-result p {
    color: rgba(255,255,255,0.94);
}
.overheating-article-page .overheat-result-action {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,0.25);
}

.overheating-article-page .overheat-result-action strong {
    display: block;
    margin-bottom: 5px;
    color: #ffffff;
}

.overheating-article-page .overheat-result-action p {
    margin-bottom: 0;
}

.overheating-article-page .overheat-guide-disclaimer {
    margin: 15px 3px 0;
    color: #5c7083;
    font-size: 0.84rem;
    line-height: 1.55;
}
.overheating-article-page .overheat-tip-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 27px;
}

.overheating-article-page .overheat-tip {
    padding: 22px;
    border-top: 4px solid #a87508;
    border-radius: 10px;
    background: #f7fafb;
}

.overheating-article-page .overheat-tip strong {
    display: block;
    margin-bottom: 7px;
    color: #102a43;
}

.overheating-article-page .overheat-tip p {
    margin: 0;
}
@media (max-width: 600px) {

    .overheating-article-page .overheat-sign-grid,
    .overheating-article-page .overheat-level-buttons,
    .overheating-article-page .overheat-tip-grid {
        grid-template-columns: 1fr;
    }

    .overheating-article-page .article-image-holder {
        min-height: 240px;
    }

    .overheating-article-page .overheat-step {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 13px;
        padding: 18px;
    }

    .overheating-article-page .overheat-step-number {
        width: 36px;
        height: 36px;
    }

}
@media (max-width: 600px) {

    .overheating-article-page .overheat-danger-box {
        padding: 21px;
    }

    .overheating-article-page .overheat-guide {
        margin: 38px 0;
        padding: 20px;
    }

    .overheating-article-page .overheat-level-button {
        min-height: 54px;
    }

    .overheating-article-page .overheat-guide-result {
        padding: 21px;
    }

}

/* =========================================================
   WRONG FUEL ARTICLE
   ========================================================= */

/* ---------- IMAGE HOLDERS ---------- */

.wrong-fuel-article-page .article-image-block {
    margin: 42px 0;
}

.wrong-fuel-article-page .article-image-holder {
    position: relative;
    min-height: 360px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid #dbe5ea;
    border-radius: 14px;
    background: linear-gradient(135deg, #eef3f5, #f8fafb);
}

.wrong-fuel-article-page .article-image-holder img {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wrong-fuel-article-page .article-image-placeholder {
    position: relative;
    z-index: 1;
    padding: 20px;
    color: #6b7f8d;
    font-size: 0.92rem;
    font-weight: 700;
    text-align: center;
}

.wrong-fuel-article-page .article-image-block figcaption {
    margin-top: 10px;
    color: #5c7083;
    font-size: 0.9rem;
    line-height: 1.55;
}


/* ---------- INTERACTIVE GUIDE ---------- */

.wrong-fuel-article-page .wrong-fuel-guide {
    margin: 38px 0 46px;
    padding: 32px;
    border: 1px solid #dbe5ea;
    border-radius: 16px;
    background: linear-gradient(145deg, #f7fafb, #ffffff);
    box-shadow: 0 12px 32px rgba(8, 47, 73, 0.07);
}

.wrong-fuel-article-page .wrong-fuel-guide-heading {
    margin-bottom: 26px;
}

.wrong-fuel-article-page .wrong-fuel-guide-heading h2 {
    margin: 7px 0 8px;
}

.wrong-fuel-article-page .wrong-fuel-guide-heading p {
    margin-bottom: 0;
}

.wrong-fuel-article-page .wrong-fuel-question {
    margin-top: 25px;
}

.wrong-fuel-article-page .wrong-fuel-question h3 {
    margin: 0 0 13px;
    color: #102a43;
    font-size: 1.05rem;
}

.wrong-fuel-article-page .wrong-fuel-buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.wrong-fuel-article-page .wrong-fuel-button {
    min-height: 58px;
    padding: 13px 16px;
    border: 2px solid #d6e0e5;
    border-radius: 10px;
    background: #ffffff;
    color: #102a43;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

.wrong-fuel-article-page .wrong-fuel-button:hover {
    border-color: #a87508;
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(8, 47, 73, 0.08);
}

.wrong-fuel-article-page .wrong-fuel-button.is-active {
    border-color: #916a12;
    background: #916a12;
    color: #ffffff;
}

.wrong-fuel-article-page .wrong-fuel-button:focus-visible {
    outline: 3px solid rgba(251, 191, 36, 0.42);
    outline-offset: 3px;
}


/* ---------- GUIDE RESULT ---------- */

.wrong-fuel-article-page .wrong-fuel-result {
    margin-top: 28px;
    padding: 25px;
    border-radius: 12px;
    background: linear-gradient(135deg, #805800, #a87508);
    color: #ffffff;
}

.wrong-fuel-article-page .wrong-fuel-result-label {
    display: inline-block;
    margin-bottom: 8px;
    color: #ffe7a1;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.wrong-fuel-article-page .wrong-fuel-result h3 {
    margin: 0 0 10px;
    color: #ffffff;
}

.wrong-fuel-article-page .wrong-fuel-result p {
    color: rgba(255, 255, 255, 0.94);
}

.wrong-fuel-article-page .wrong-fuel-result-action {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.wrong-fuel-article-page .wrong-fuel-result-action strong {
    display: block;
    margin-bottom: 5px;
    color: #ffffff;
}

.wrong-fuel-article-page .wrong-fuel-result-action p {
    margin-bottom: 0;
}

.wrong-fuel-article-page .wrong-fuel-guide-disclaimer {
    margin: 15px 3px 0;
    color: #5c7083;
    font-size: 0.84rem;
    line-height: 1.55;
}


/* ---------- ENGINE NOT STARTED CALLOUT ---------- */

.wrong-fuel-article-page .wrong-fuel-good-box {
    margin: 30px 0;
    padding: 24px 27px;
    border-left: 5px solid #5b7f55;
    border-radius: 0 12px 12px 0;
    background: #edf4eb;
}

.wrong-fuel-article-page .wrong-fuel-good-box strong {
    display: block;
    margin-bottom: 8px;
    color: #3f633b;
    font-size: 1.08rem;
}

.wrong-fuel-article-page .wrong-fuel-good-box p {
    margin: 0;
}


/* ---------- WHAT TO DO STEPS ---------- */

.wrong-fuel-article-page .wrong-fuel-step-list {
    display: grid;
    gap: 16px;
    margin-top: 28px;
}

.wrong-fuel-article-page .wrong-fuel-step {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 17px;
    padding: 21px;
    border: 1px solid #dbe5ea;
    border-radius: 12px;
    background: #ffffff;
}

.wrong-fuel-article-page .wrong-fuel-step-number {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #916a12;
    color: #ffffff;
    font-weight: 800;
}

.wrong-fuel-article-page .wrong-fuel-step h3 {
    margin: 0 0 6px;
}

.wrong-fuel-article-page .wrong-fuel-step p {
    margin: 0;
}


/* ---------- PREVENTION TIPS ---------- */

.wrong-fuel-article-page .wrong-fuel-tip-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 27px;
}

.wrong-fuel-article-page .wrong-fuel-tip {
    padding: 22px;
    border-top: 4px solid #a87508;
    border-radius: 10px;
    background: #f7fafb;
}

.wrong-fuel-article-page .wrong-fuel-tip strong {
    display: block;
    margin-bottom: 7px;
    color: #102a43;
}

.wrong-fuel-article-page .wrong-fuel-tip p {
    margin: 0;
}


/* ---------- TABLET ---------- */

@media (max-width: 760px) {

    .wrong-fuel-article-page .wrong-fuel-guide {
        padding: 25px;
    }

}


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

@media (max-width: 600px) {

    .wrong-fuel-article-page .wrong-fuel-buttons,
    .wrong-fuel-article-page .wrong-fuel-tip-grid {
        grid-template-columns: 1fr;
    }

    .wrong-fuel-article-page .article-image-holder {
        min-height: 240px;
    }

    .wrong-fuel-article-page .wrong-fuel-guide {
        margin: 32px 0 38px;
        padding: 20px;
    }

    .wrong-fuel-article-page .wrong-fuel-button {
        min-height: 54px;
    }

    .wrong-fuel-article-page .wrong-fuel-result {
        padding: 21px;
    }

    .wrong-fuel-article-page .wrong-fuel-good-box {
        padding: 21px;
    }

    .wrong-fuel-article-page .wrong-fuel-step {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 13px;
        padding: 18px;
    }

    .wrong-fuel-article-page .wrong-fuel-step-number {
        width: 36px;
        height: 36px;
    }

}
/* =========================================================
   ARTICLE ADVERTISING
   ========================================================= */

.cars-article-page .article-ad {
    width: 100%;
    margin: 42px 0;
    clear: both;
}

.cars-article-page .article-ad-inner {
    width: 100%;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 0;
    border-top: 1px solid #e5ecef;
    border-bottom: 1px solid #e5ecef;
}

.cars-article-page .article-ad-label {
    display: block;
    margin-bottom: 8px;
    color: #8293a0;
    font-size: 0.68rem;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

@media (max-width: 600px) {

    .cars-article-page .article-ad {
        margin: 34px 0;
    }

    .cars-article-page .article-ad-inner {
        min-height: 100px;
    }

}
/* =========================================================
   WORN TIRES ARTICLE
   ========================================================= */


/* ---------------------------------------------------------
   SIGNS / WARNING CARDS
   --------------------------------------------------------- */

.tires-article-page .tire-sign-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 28px 0 10px;
}

.tires-article-page .tire-sign-card {
    padding: 22px;
    border: 1px solid #dbe5ea;
    border-radius: 12px;
    background: #f7fafb;
}

.tires-article-page .tire-sign-card strong {
    display: block;
    margin-bottom: 8px;
    color: #805800;
    font-size: 1.03rem;
}

.tires-article-page .tire-sign-card p {
    margin: 0;
}


/* ---------------------------------------------------------
   ARTICLE IMAGES - ALL CARS & DRIVING ARTICLES
   --------------------------------------------------------- */

.cars-article-page .article-image-block {
    margin: 42px 0;
}

.cars-article-page .article-image-holder {
    position: relative;
    min-height: 360px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid #dbe5ea;
    border-radius: 14px;
    background: linear-gradient(135deg, #eef3f5, #f8fafb);
}

.cars-article-page .article-image-holder img {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cars-article-page .article-image-placeholder {
    position: relative;
    z-index: 1;
    padding: 20px;
    color: #6b7f8d;
    font-size: 0.92rem;
    font-weight: 700;
    text-align: center;
}

.cars-article-page .article-image-block figcaption {
    margin-top: 10px;
    color: #5c7083;
    font-size: 0.9rem;
    line-height: 1.55;
}


/* ---------------------------------------------------------
   INTERACTIVE TIRE CONDITION GUIDE
   --------------------------------------------------------- */

.tires-article-page .tire-guide {
    margin: 42px 0 48px;
    padding: 32px;
    border: 1px solid #dbe5ea;
    border-radius: 16px;
    background: linear-gradient(145deg, #f7fafb, #ffffff);
    box-shadow: 0 12px 32px rgba(8, 47, 73, 0.07);
}

.tires-article-page .tire-guide-heading {
    margin-bottom: 25px;
}

.tires-article-page .tire-guide-heading h2 {
    margin: 7px 0 8px;
}

.tires-article-page .tire-guide-heading p {
    margin-bottom: 0;
}

.tires-article-page .tire-condition-buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 24px 0;
}

.tires-article-page .tire-condition-button {
    min-height: 58px;
    padding: 13px 16px;
    border: 2px solid #d6e0e5;
    border-radius: 10px;
    background: #ffffff;
    color: #102a43;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

.tires-article-page .tire-condition-button:hover {
    border-color: #a87508;
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(8, 47, 73, 0.08);
}

.tires-article-page .tire-condition-button.is-active {
    border-color: #916a12;
    background: #916a12;
    color: #ffffff;
}

.tires-article-page .tire-condition-button:focus-visible {
    outline: 3px solid rgba(251, 191, 36, 0.42);
    outline-offset: 3px;
}


/* ---------------------------------------------------------
   INTERACTIVE RESULT
   --------------------------------------------------------- */

.tires-article-page .tire-guide-result {
    margin-top: 22px;
    padding: 25px;
    border-radius: 12px;
    background: linear-gradient(135deg, #805800, #a87508);
    color: #ffffff;
}

.tires-article-page .tire-result-label {
    display: inline-block;
    margin-bottom: 8px;
    color: #ffe7a1;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tires-article-page .tire-guide-result h3 {
    margin: 0 0 10px;
    color: #ffffff;
}

.tires-article-page .tire-guide-result > p {
    margin-bottom: 0;
    color: rgba(255, 255, 255, 0.94);
}

.tires-article-page .tire-result-action {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.tires-article-page .tire-result-action strong {
    display: block;
    margin-bottom: 5px;
    color: #ffffff;
}

.tires-article-page .tire-result-action p {
    margin-bottom: 0;
    color: rgba(255, 255, 255, 0.94);
}

.tires-article-page .tire-guide-disclaimer {
    margin: 15px 3px 0;
    color: #5c7083;
    font-size: 0.84rem;
    line-height: 1.55;
}


/* ---------------------------------------------------------
   KEEP DRIVING / RISK CARDS
   --------------------------------------------------------- */

.tires-article-page .tire-risk-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 28px;
}

.tires-article-page .tire-risk-card {
    padding: 22px;
    border: 1px solid #dbe5ea;
    border-radius: 12px;
    background: #ffffff;
}

.tires-article-page .tire-risk-card > span {
    display: inline-block;
    margin-bottom: 10px;
    color: #a87508;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.tires-article-page .tire-risk-card strong {
    display: block;
    margin-bottom: 8px;
    color: #102a43;
    font-size: 1.03rem;
}

.tires-article-page .tire-risk-card p {
    margin: 0;
}


/* ---------------------------------------------------------
   DAMAGE WARNING
   --------------------------------------------------------- */

.tires-article-page .tire-danger-box {
    margin: 30px 0;
    padding: 25px 28px;
    border-left: 5px solid #a33a2b;
    border-radius: 0 12px 12px 0;
    background: #fff1ee;
}

.tires-article-page .tire-danger-box strong {
    display: block;
    margin-bottom: 8px;
    color: #7d2b20;
    font-size: 1.08rem;
}

.tires-article-page .tire-danger-box p {
    margin: 0;
}


/* ---------------------------------------------------------
   PREVENTION / CARE TIPS
   --------------------------------------------------------- */

.tires-article-page .tire-tip-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 27px;
}

.tires-article-page .tire-tip {
    padding: 22px;
    border-top: 4px solid #a87508;
    border-radius: 10px;
    background: #f7fafb;
}

.tires-article-page .tire-tip strong {
    display: block;
    margin-bottom: 7px;
    color: #102a43;
}

.tires-article-page .tire-tip p {
    margin: 0;
}


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

@media (max-width: 760px) {

    .tires-article-page .tire-guide {
        padding: 25px;
    }

}


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

@media (max-width: 600px) {

    .tires-article-page .tire-sign-grid,
    .tires-article-page .tire-condition-buttons,
    .tires-article-page .tire-risk-grid,
    .tires-article-page .tire-tip-grid {
        grid-template-columns: 1fr;
    }

    .tires-article-page .article-image-holder {
        min-height: 240px;
    }

    .tires-article-page .tire-guide {
        margin: 34px 0 40px;
        padding: 20px;
    }

    .tires-article-page .tire-condition-button {
        min-height: 54px;
    }

    .tires-article-page .tire-guide-result {
        padding: 21px;
    }

    .tires-article-page .tire-danger-box {
        padding: 21px;
    }

}
/* =========================================================
   ENGINE WARNING LIGHT ARTICLE
   ========================================================= */


/* ---------------------------------------------------------
   INTERACTIVE GUIDE
   --------------------------------------------------------- */

.engine-light-article-page .engine-light-guide {
    margin: 38px 0 46px;
    padding: 32px;
    border: 1px solid #dbe5ea;
    border-radius: 16px;
    background: linear-gradient(145deg, #f7fafb, #ffffff);
    box-shadow: 0 12px 32px rgba(8, 47, 73, 0.07);
}

.engine-light-article-page .engine-light-guide-heading {
    margin-bottom: 24px;
}

.engine-light-article-page .engine-light-guide-heading h2 {
    margin: 7px 0 8px;
}

.engine-light-article-page .engine-light-guide-heading p {
    margin-bottom: 0;
}

.engine-light-article-page .engine-light-buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 24px 0;
}

.engine-light-article-page .engine-light-button {
    min-height: 58px;
    padding: 13px 16px;
    border: 2px solid #d6e0e5;
    border-radius: 10px;
    background: #ffffff;
    color: #102a43;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

.engine-light-article-page .engine-light-button:hover {
    border-color: #a87508;
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(8, 47, 73, 0.08);
}

.engine-light-article-page .engine-light-button.is-active {
    border-color: #916a12;
    background: #916a12;
    color: #ffffff;
}

.engine-light-article-page .engine-light-button:focus-visible {
    outline: 3px solid rgba(251, 191, 36, 0.42);
    outline-offset: 3px;
}


/* ---------------------------------------------------------
   GUIDE RESULT
   --------------------------------------------------------- */

.engine-light-article-page .engine-light-result {
    margin-top: 22px;
    padding: 25px;
    border-radius: 12px;
    background: linear-gradient(135deg, #805800, #a87508);
    color: #ffffff;
}

.engine-light-article-page .engine-light-result-label {
    display: inline-block;
    margin-bottom: 8px;
    color: #ffe7a1;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.engine-light-article-page .engine-light-result h3 {
    margin: 0 0 10px;
    color: #ffffff;
}

.engine-light-article-page .engine-light-result > p {
    margin-bottom: 0;
    color: rgba(255, 255, 255, 0.94);
}

.engine-light-article-page .engine-light-result-action {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.engine-light-article-page .engine-light-result-action strong {
    display: block;
    margin-bottom: 5px;
    color: #ffffff;
}

.engine-light-article-page .engine-light-result-action p {
    margin-bottom: 0;
    color: rgba(255, 255, 255, 0.94);
}

.engine-light-article-page .engine-light-guide-disclaimer {
    margin: 15px 3px 0;
    color: #5c7083;
    font-size: 0.84rem;
    line-height: 1.55;
}


/* ---------------------------------------------------------
   STEADY / FLASHING CARDS
   --------------------------------------------------------- */

.engine-light-article-page .engine-light-status-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 28px 0 12px;
}

.engine-light-article-page .engine-light-status-card {
    padding: 23px;
    border: 1px solid #dbe5ea;
    border-top: 4px solid #a87508;
    border-radius: 12px;
    background: #f7fafb;
}

.engine-light-article-page .engine-light-status-card-urgent {
    border-top-color: #a33a2b;
    background: #fff5f2;
}

.engine-light-article-page .engine-light-status-icon {
    display: flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    margin-bottom: 13px;
    border-radius: 50%;
    background: #916a12;
    color: #ffffff;
    font-weight: 800;
}

.engine-light-article-page
.engine-light-status-card-urgent
.engine-light-status-icon {
    background: #a33a2b;
}

.engine-light-article-page .engine-light-status-card strong {
    display: block;
    margin-bottom: 8px;
    color: #102a43;
    font-size: 1.04rem;
}

.engine-light-article-page .engine-light-status-card p {
    margin: 0;
}


/* ---------------------------------------------------------
   COMMON CAUSES
   --------------------------------------------------------- */

.engine-light-article-page .engine-light-cause-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 28px 0;
}

.engine-light-article-page .engine-light-cause-card {
    padding: 22px;
    border: 1px solid #dbe5ea;
    border-radius: 12px;
    background: #ffffff;
}

.engine-light-article-page .engine-light-cause-card strong {
    display: block;
    margin-bottom: 8px;
    color: #805800;
    font-size: 1.03rem;
}

.engine-light-article-page .engine-light-cause-card p {
    margin: 0;
}


/* ---------------------------------------------------------
   DANGER BOX
   --------------------------------------------------------- */

.engine-light-article-page .engine-light-danger-box {
    margin: 30px 0;
    padding: 25px 28px;
    border-left: 5px solid #a33a2b;
    border-radius: 0 12px 12px 0;
    background: #fff1ee;
}

.engine-light-article-page .engine-light-danger-box strong {
    display: block;
    margin-bottom: 8px;
    color: #7d2b20;
    font-size: 1.08rem;
}

.engine-light-article-page .engine-light-danger-box p {
    margin: 0;
}


/* ---------------------------------------------------------
   WHAT TO DO STEPS
   --------------------------------------------------------- */

.engine-light-article-page .engine-light-step-list {
    display: grid;
    gap: 16px;
    margin-top: 28px;
}

.engine-light-article-page .engine-light-step {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 17px;
    padding: 21px;
    border: 1px solid #dbe5ea;
    border-radius: 12px;
    background: #ffffff;
}

.engine-light-article-page .engine-light-step-number {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #916a12;
    color: #ffffff;
    font-weight: 800;
}

.engine-light-article-page .engine-light-step h3 {
    margin: 0 0 6px;
}

.engine-light-article-page .engine-light-step p {
    margin: 0;
}


/* ---------------------------------------------------------
   IGNORING WARNING / RISK CARDS
   --------------------------------------------------------- */

.engine-light-article-page .engine-light-risk-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 28px;
}

.engine-light-article-page .engine-light-risk-card {
    padding: 22px;
    border: 1px solid #dbe5ea;
    border-radius: 12px;
    background: #ffffff;
}

.engine-light-article-page .engine-light-risk-card > span {
    display: inline-block;
    margin-bottom: 10px;
    color: #a87508;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.engine-light-article-page .engine-light-risk-card strong {
    display: block;
    margin-bottom: 8px;
    color: #102a43;
    font-size: 1.03rem;
}

.engine-light-article-page .engine-light-risk-card p {
    margin: 0;
}


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

@media (max-width: 760px) {

    .engine-light-article-page .engine-light-guide {
        padding: 25px;
    }

}


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

@media (max-width: 600px) {

    .engine-light-article-page .engine-light-buttons,
    .engine-light-article-page .engine-light-status-grid,
    .engine-light-article-page .engine-light-cause-grid,
    .engine-light-article-page .engine-light-risk-grid {
        grid-template-columns: 1fr;
    }

    .engine-light-article-page .engine-light-guide {
        margin: 34px 0 40px;
        padding: 20px;
    }

    .engine-light-article-page .engine-light-button {
        min-height: 54px;
    }

    .engine-light-article-page .engine-light-result {
        padding: 21px;
    }

    .engine-light-article-page .engine-light-danger-box {
        padding: 21px;
    }

    .engine-light-article-page .engine-light-step {
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 14px;
        padding: 18px;
    }

    .engine-light-article-page .engine-light-step-number {
        width: 38px;
        height: 38px;
    }

}