/**
 * CGC Modular Sections - Stylesheet
 * Clean Green Cars modular section system
 *
 * Brand colours:
 *   Primary purple:    #5A3A6D
 *   Primary green:     #24544C
 *   Section bg peach:  #fff7ee
 *   Section bg green:  #f2fbdd
 *   Card border:       #e8e8e8
 *   Card bg:           #ffffff
 *   Text:              #333333
 *   Heading:           #000000
 *   Blockquote border: #5A3A6D
 *   Blockquote bg:     #f9f5fc
 *   Red bullet:        #dc3545
 *   Purple bullet:     #5A3A6D
 *   Green bullet:      #24544C
 *   Font:              inherit from theme
 */


/* ==========================================================================
   1. Section Wrapper
   ========================================================================== */

.cgc-section {
    width: 100%;
    padding: 0;
    margin-bottom: 0;
}

.cgc-section__inner {
    max-width: var(--global-content-width, 1290px);
    margin: 0 auto;
    padding: var(--global-kb-spacing-xl, 4rem) var(--global-content-edge-padding, 1rem);
}

/* Section background variants */
.cgc-section--bg-peach {
    background: #fff7ee;
}

.cgc-section--bg-green {
    background: #f2fbdd;
}

/* Kadence Element rows (related menu + guides) — continue alternating colours, XL padding */
.kb-row-layout-id275834_c65bda-75 {
    background-color: var(--cgc-next-section-bg, #fff7ee);
}
.kb-row-layout-id275834_c65bda-75 > .kt-row-column-wrap {
    padding-top: var(--global-kb-spacing-xl, 4rem);
    padding-bottom: var(--global-kb-spacing-xl, 4rem);
}
.kb-row-layout-id275834_3cf265-cf {
    background-color: var(--cgc-next-section-bg-2, #f2fbdd);
}
.kb-row-layout-id275834_3cf265-cf > .kt-row-column-wrap {
    padding-top: var(--global-kb-spacing-xl, 4rem);
    padding-bottom: var(--global-kb-spacing-xl, 4rem);
}

/* Hide guides section if slider is empty (JS adds this class) */
.kb-row-layout-id275834_3cf265-cf.cgc-hidden {
    display: none;
}

/* Remove gap between last section and footer */
.entry-content.element-single-replace {
    margin-bottom: 0;
    padding-bottom: 0;
}
.content-wrap {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* ==========================================================================
   Addon Accordion
   ========================================================================== */

/* Addon accordion — green bars with big plus, matches IN10 */
.cgc-addon-accordion {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cgc-addon-acc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    cursor: pointer;
    padding: 22px 24px;
    background: #D9F3A3;
    border: 1px solid #24544C;
    border-radius: 12px;
    transition: background 0.2s;
    text-align: left;
    font-family: inherit;
    color: #1a1a1a;
    outline: none;
    -webkit-appearance: none;
}

.cgc-addon-acc-header:focus,
.cgc-addon-acc-header:active,
.cgc-addon-acc-header:visited {
    outline: none;
    color: #1a1a1a;
    background: #D9F3A3;
    border-color: #24544C;
}

.cgc-addon-acc-header h3,
.cgc-addon-acc-header .cgc-addon-acc-title {
    color: #1a1a1a !important;
}

.cgc-addon-acc-header:hover {
    background: #c8eb85;
}

.cgc-addon-acc-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
}

.cgc-addon-acc-icon {
    font-size: 36px;
    font-weight: 300;
    color: #24544C;
    flex-shrink: 0;
    line-height: 1;
    transition: transform 0.3s;
}

.cgc-addon-acc-box.open .cgc-addon-acc-icon {
    transform: rotate(45deg);
}

.cgc-addon-acc-content {
    display: none;
    padding: 24px 24px;
    background: #fff;
    border: 1px solid #24544C;
    border-top: none;
    border-radius: 0 0 12px 12px;
    margin-top: -6px;
}

.cgc-addon-acc-box.open .cgc-addon-acc-content {
    display: block;
}

.cgc-addon-acc-content p {
    font-size: 15px;
    line-height: 1.6;
    color: #333;
    margin: 0;
}

@media (max-width: 1024px) {
    .cgc-addon-acc-title {
        font-size: 18px;
    }
    .cgc-addon-acc-icon {
        font-size: 30px;
    }
}

@media (max-width: 768px) {
    .cgc-addon-acc-title {
        font-size: 20px !important;
    }
    .cgc-addon-acc-icon {
        font-size: 24px;
    }
    .cgc-addon-acc-header {
        padding: 14px 16px;
    }
}

/* Large badge variant — for addon cards etc */
.cgc-card__badge--lg {
    width: 48px;
    height: 48px;
}
.cgc-card__badge--lg i {
    font-size: 22px;
}
.cgc-card__heading--lg {
    font-size: 22px;
}

/* Vertical card wrapper — 70% on desktop like single/table sections */
.cgc-vertical-wrap {
    max-width: 70%;
    margin-left: 0;
    margin-right: auto;
}

/* Clickable card link */
.cgc-card--link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

/* div-wrapped cards: inner <a> also flexes */
.cgc-card--link > a {
    display: flex;
    flex-direction: column;
    flex: 1;
    text-decoration: none;
    color: inherit;
}

.cgc-card--link:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.cgc-card--link .cgc-card__heading {
    color: #24544C;
}

.cgc-card--link p {
    color: #333;
    flex: 1;
}

/* Card CTA button */
.cgc-card__cta {
    display: inline-block;
    padding: 12px 24px;
    margin-top: 24px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    background: #5A3A6D;
    border-radius: 8px;
    text-decoration: none;
}

.cgc-card--link:hover .cgc-card__cta {
    text-decoration: underline;
}

/* Card watermark — large faded code in background */
.cgc-card--watermark {
    position: relative;
    overflow: hidden;
}

.cgc-card--watermark::after {
    content: attr(data-watermark);
    position: absolute;
    top: 50%;
    right: -5px;
    transform: translateY(-50%) rotate(-45deg);
    font-size: 130px;
    font-weight: 900;
    color: rgba(36, 84, 76, 0.04);
    line-height: 1;
    pointer-events: none;
    z-index: 0;
    white-space: nowrap;
}

.cgc-card--watermark > * {
    position: relative;
    z-index: 1;
}

/* Card header row — heading left, code badges right */
.cgc-card-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.cgc-card-header-row .cgc-card__heading {
    margin: 0 !important;
}

/* Code badge circles — conviction code letters in circles */
.cgc-code-badges {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    flex-shrink: 0;
    margin: 0 0 16px !important;
}

.cgc-code-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: #24544C;
    color: #fff;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-align: center;
    line-height: 1.2;
}

@media (max-width: 768px) {
    .cgc-code-badge {
        width: 52px;
        height: 52px;
        font-size: 11px;
    }
    /* Stack code letters/numbers on mobile */
    .cgc-code-badges {
        flex-wrap: wrap !important;
    }
}

/* Code finder — search box styling */
.cgc-section--code_finder input[type="text"],
.cgc-section--code_finder input[type="search"],
.cgc-section--code_finder .search-input,
.cgc-section--code_finder input.datasetFilter {
    max-width: 400px;
    border-radius: 12px;
    padding: 12px 20px;
    border: 1px solid #24544C;
}

/* Code finder — spacing between search/filters and card grid */
.cgc-section--code_finder .filter-buttons,
.cgc-section--code_finder .dataset-filters {
    margin-bottom: var(--global-kb-spacing-md, 2rem);
}

/* Code finder — spacing after the card grid before trailing text */
.cgc-section--code_finder .conviction-grid + p,
.cgc-section--code_finder .code-finder-grid + p,
.cgc-section--code_finder p:last-of-type {
    margin-top: var(--global-kb-spacing-md, 2rem);
}

/* Why Compare heading — same sizes as other H2s, centered */
.cgc-why-compare-heading {
    font-size: 32px;
}
@media (max-width: 1024px) {
    .cgc-why-compare-heading {
        font-size: 28px !important;
    }
}
@media (max-width: 768px) {
    .cgc-why-compare-heading {
        font-size: 24px !important;
    }
}

/* First section — no top padding (Quick Links or hero sits directly above) */
.cgc-section:first-child .cgc-section__inner {
    padding-top: 0;
}


/* ==========================================================================
   2. Section Heading
   (Removed - now using inline-styled headings from the existing site)
   ========================================================================== */


/* ==========================================================================
   3. Layouts
   ========================================================================== */

/* --- Single column, table & accordion layouts: 70% width on desktop ONLY when two-col with image --- */
/* Stacked content without images = full width */

.cgc-layout--single,
.cgc-layout--table {
    max-width: 70%;
    margin-left: 0;
    margin-right: auto;
}

/* Cost section wider to accommodate table */
.cgc-section--cost .cgc-layout--table {
    max-width: 80%;
}

.cgc-layout--accordion {
    max-width: 70%;
    margin-left: 0;
    margin-right: auto;
}

/* Two-col with image constrains to 70% */
.cgc-layout--two-col-photo,
.cgc-layout--two-col-text,
.cgc-layout--bullets-with-image {
    max-width: 100%;
}

.cgc-layout--cards,
.cgc-layout--cards-2,
.cgc-layout--cards-3,
.cgc-layout--cards-4 {
    max-width: 100%;
}

/* Single-layout sections that contain card grids — override 70% back to full width */
.cgc-section--code_finder .cgc-layout--single,
.cgc-section--shadow_12 .cgc-layout--single {
    max-width: 100%;
}

.cgc-steps-list {
    max-width: 100%;
}

@media (max-width: 1024px) {
    .cgc-layout--single,
    .cgc-layout--table,
    .cgc-layout--accordion,
    .cgc-vertical-wrap {
        max-width: 100%;
    }
    .cgc-expert-box {
        max-width: 100%;
    }
}

/* --- Cards grid (2/3/4 columns) --- */

.cgc-layout--cards {
    display: grid;
    gap: 20px;
    margin-bottom: 0;
}

.cgc-layout--cards-2 {
    grid-template-columns: repeat(2, 1fr);
}

.cgc-layout--cards-3 {
    grid-template-columns: repeat(3, 1fr);
}

.cgc-layout--cards-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* --- Card styling --- */

/* Card styling */
.cgc-card {
    background: #fff;
    border: 1px solid #24544C;
    border-radius: 20px;
    padding: 32px 28px 36px;
    transition: box-shadow 0.2s ease;
}

.cgc-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Card row layout — icon left, heading + body pushed in */
.cgc-card__row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
}

/* Card badge icon — green circle to the left */
.cgc-card__badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: #24544C;
    border-radius: 50%;
    margin-top: 2px;
}

.cgc-card__badge i {
    color: #fff;
    font-size: 18px;
    line-height: 1;
}

.cgc-card__text {
    flex: 1;
}

.cgc-card__text {
    flex-grow: 1;
}

/* Legacy icon class (for non-row layouts) */
.cgc-card__icon {
    font-size: 32px;
    color: #24544C;
    margin-bottom: 12px;
}

.cgc-card__title {
    font-size: 20px;
    font-weight: 700;
    color: #24544C;
    margin-bottom: 8px;
    line-height: 1.3;
}

.cgc-card__description {
    font-size: 16px;
    line-height: 1.6;
    color: #333;
}

.cgc-card p {
    margin: 0 0 4px;
    font-size: 15px;
    line-height: 1.6;
}

.cgc-card strong {
    color: #24544C;
    font-size: 16px;
    display: block;
    margin-bottom: 6px;
}

/* Card H3 headings — green, bold */
.cgc-card__heading,
.cgc-card h3,
.cgc-card__text h3 {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #24544C !important;
    padding: 0 !important;
    line-height: 1.3 !important;
}

/* Kill top margin on paragraphs in cards */
.cgc-card p,
.cgc-card__text p {
    margin-top: 0 !important;
    margin-bottom: 4px !important;
}

.cgc-card a {
    color: #5A3A6D;
    text-decoration: none;
    font-weight: inherit;
}

.cgc-card a:hover {
    text-decoration: underline;
    color: #5A3A6D;
}

.cgc-card__title a {
    color: #5A3A6D;
}

.cgc-card__title a:hover {
    text-decoration: underline;
}

/* --- Two-column layouts --- */

.cgc-layout--two-col {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

/* Text + sidebar (FAQ uses this) */
.cgc-layout--two-col-text {
    align-items: center;
}

.cgc-layout--two-col-text .cgc-layout__main {
    flex: 80%;
}

.cgc-layout--two-col-text .cgc-layout__side {
    flex: 20%;
}

/* Text + photo (image right) */
.cgc-layout--two-col-photo .cgc-layout__main {
    flex: 70%;
}

.cgc-layout--two-col-photo .cgc-layout__side {
    flex: 30%;
    text-align: center;
}

.cgc-layout--two-col-photo .cgc-layout__side img {
    max-width: 100%;
    height: auto;
}

/* Text + photo reversed (image left) */
.cgc-layout--two-col-photo-reverse {
    flex-direction: row-reverse;
}

.cgc-layout--two-col-photo-reverse .cgc-layout__main {
    flex: 80%;
}

.cgc-layout--two-col-photo-reverse .cgc-layout__side {
    flex: 20%;
    text-align: center;
}

.cgc-layout--two-col-photo-reverse .cgc-layout__side img {
    max-width: 100%;
    height: auto;
}

/* Table + tip */
.cgc-layout--two-col-table-tip .cgc-layout__main {
    flex: 70%;
}

.cgc-layout--two-col-table-tip .cgc-layout__side {
    flex: 30%;
    position: sticky;
    top: 20px;
    align-self: flex-start;
}

.cgc-layout--two-col-table-tip .cgc-layout__side .cgc-blockquote {
    border-left: none;
    background: #f9f5fc;
    border-radius: 8px;
    padding: 20px;
}

/* Icon sidebar */
.cgc-layout--two-col-icon .cgc-layout__main {
    flex: 70%;
}

.cgc-layout--two-col-icon .cgc-layout__side {
    flex: 30%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Bullets + image */
.cgc-layout--bullets-with-image .cgc-layout__main {
    flex: 80%;
}

.cgc-layout--bullets-with-image .cgc-layout__side {
    flex: 20%;
}

.cgc-layout--bullets-with-image .cgc-layout__side img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

@media (max-width: 768px) {
    /* Hide ALL image sides on mobile — no images on mobile */
    .cgc-layout--two-col .cgc-layout__side,
    .cgc-layout--bullets-with-image .cgc-layout__side {
        display: none !important;
    }
    /* Main column takes full width */
    .cgc-layout--two-col .cgc-layout__main,
    .cgc-layout--bullets-with-image .cgc-layout__main {
        flex: 100% !important;
        max-width: 100% !important;
    }
    /* Stack two-col vertically */
    .cgc-layout--two-col {
        flex-direction: column !important;
    }
}


/* ==========================================================================
   4. Tables
   ========================================================================== */

/* Tables full width within section container */

.cgc-modern-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: var(--global-kb-spacing-lg, 3rem) 0 0;
    margin-bottom: 0;
    border-radius: 12px;
    overflow: hidden;
}

.cgc-modern-table thead th {
    background: #5A3A6D;
    color: #fff;
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
}

.cgc-modern-table tbody tr {
    background: #fff;
}

.cgc-modern-table tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid #e8e8e8;
}

.cgc-modern-table tbody tr:nth-child(even) {
    background: #f5f3f7;
}

.cgc-modern-table tbody tr:hover {
    background: #ece8f0;
}

.cgc-modern-table tbody td:first-child {
    font-weight: 600;
}

/* Gap between consecutive tables */
.cgc-modern-table + .cgc-modern-table {
    margin-top: var(--global-kb-spacing-xl, 4rem);
}

/* Hero featured image with conviction code badge */
.cgc-hero-featured {
    max-width: var(--global-content-width, 1290px);
    margin: 0 auto var(--global-kb-spacing-lg, 3rem);
    padding: 0 var(--global-content-edge-padding, 1rem);
}

.cgc-hero-featured__inner {
    position: relative;
    display: inline-block;
    max-width: 400px;
}

.cgc-hero-featured__inner img {
    width: 100%;
    height: auto;
    border-radius: 12px;
}

.cgc-hero-featured__code {
    position: absolute;
    top: 16px;
    right: 16px;
    background: #dc3545;
    color: #fff;
    font-weight: 800;
    font-size: 22px;
    padding: 8px 18px;
    border-radius: 8px;
    letter-spacing: 1px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
    transform: rotate(3deg);
}

@media (max-width: 768px) {
    .cgc-hero-featured__inner {
        max-width: 280px;
    }
    .cgc-hero-featured__code {
        font-size: 16px;
        padding: 6px 12px;
        top: 10px;
        right: 10px;
    }
}

/* Licence image with conviction code overlay */
.cgc-licence-overlay {
    position: relative;
    display: inline-block;
}

.cgc-licence-overlay img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.cgc-licence-code {
    position: absolute;
    top: 12px;
    right: 12px;
    background: #dc3545;
    color: #fff;
    font-weight: 800;
    font-size: 18px;
    padding: 6px 14px;
    border-radius: 6px;
    letter-spacing: 1px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    transform: rotate(3deg);
}

@media (max-width: 768px) {
    .cgc-licence-code {
        font-size: 14px;
        padding: 4px 10px;
        top: 8px;
        right: 8px;
    }
}

/* Shadow_02 tables: clear separation between table groups */
.cgc-section--shadow_02 h3,
.cgc-section--shadow_02 h4,
.cgc-section--shadow_02 .cgc-section-intro h3,
.cgc-section--shadow_02 .cgc-section-intro h4 {
    margin-top: var(--global-kb-spacing-lg, 3rem);
    margin-bottom: 8px;
}

.cgc-section--shadow_02 h3 + p,
.cgc-section--shadow_02 h4 + p {
    margin-top: 0;
    margin-bottom: var(--global-kb-spacing-md, 2rem);
}

.cgc-section--shadow_02 .cgc-modern-table {
    margin-top: var(--global-kb-spacing-md, 2rem);
    margin-bottom: var(--global-kb-spacing-xl, 4rem);
}

/* Gap after tables before following text */
.cgc-section--shadow_02 .cgc-modern-table + p,
.cgc-section--shadow_02 .cgc-section-intro .cgc-modern-table + p {
    margin-top: var(--global-kb-spacing-lg, 3rem);
}

/* Mobile-friendly tables — horizontal scroll */
@media (max-width: 768px) {
    .cgc-modern-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}


/* ==========================================================================
   5. Bullet Lists
   ========================================================================== */

.cgc-bullets {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.cgc-bullets li {
    padding: 8px 0 8px 28px;
    position: relative;
    line-height: 1.6;
}

.cgc-bullets li::before {
    position: absolute;
    left: 0;
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 14px;
    top: 12px;
}

/* Purple check bullets */
.cgc-bullets--purple li::before {
    content: '\f058';
    color: #5A3A6D;
}

/* Red cross bullets */
.cgc-bullets--red li::before,
ul.red-bullets li::before {
    content: '\f057';
    color: #dc3545;
}

ul.red-bullets {
    list-style: none;
    padding: 0;
    margin: 16px 0;
}

ul.red-bullets li {
    padding: 8px 0 8px 28px;
    position: relative;
    line-height: 1.6;
    font-size: 16px;
    color: #333;
    margin-bottom: 8px;
}

ul.red-bullets li::before {
    position: absolute;
    left: 0;
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 14px;
    top: 12px;
}

/* Green check bullets */
.cgc-bullets--green li::before {
    content: '\f058';
    color: #24544C;
}

/* Purple bullets — filled circle style matching IN10 At A Glance */
ul.purple-bullets {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

ul.purple-bullets li {
    padding: 0 0 0 26px;
    position: relative;
    line-height: 1.65;
    font-size: 16px;
    color: #333;
    margin-bottom: 16px;
}

ul.purple-bullets li::before {
    content: '\f111';
    position: absolute;
    left: 0;
    font-family: 'Font Awesome 5 Free', 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 12px;
    top: 7px;
    color: #6B21A8;
}


/* ==========================================================================
   6. Blockquote
   ========================================================================== */

/* Custom blockquote (used when modern-blockquote class not available) */
.cgc-blockquote {
    border-left: 4px solid #5A3A6D;
    background: #f9f5fc;
    padding: 20px 24px;
    margin: 30px 0 0;
    border-radius: 0 8px 8px 0;
}

/* Blockquotes: top margin for breathing room, no bottom margin (section padding handles it) */
.cgc-section blockquote,
.cgc-section .modern-blockquote {
    margin-top: var(--global-kb-spacing-lg, 3rem) !important;
    margin-bottom: 0 !important;
}

/* Tip boxes inherit width from their layout wrapper — no separate max-width needed.
   Sections using single/table layouts are already 70%; full-width sections (cards etc)
   constrain tips via the layout. */

/* Tips now use .modern-blockquote from the existing site CSS —
   5px solid #5A3A6D left border, white bg, 64px left padding for quote icon,
   italic, #444 text, ::before pseudo with quote mark */

.cgc-blockquote p {
    margin: 0;
    line-height: 1.6;
    font-size: 15px;
}

.cgc-blockquote strong {
    color: #5A3A6D;
}


/* Blockquote spacing after tables and card grids */
.cgc-modern-table + blockquote,
.cgc-modern-table + .modern-blockquote,
table + blockquote,
table + .modern-blockquote,
.cgc-layout--cards + blockquote,
.cgc-layout--cards + .modern-blockquote,
.cgc-layout + blockquote,
.cgc-layout + .modern-blockquote {
    margin-top: var(--global-kb-spacing-lg, 3rem);
}


/* ==========================================================================
   7. Expert Panel — match IN10 design (dark green bg, white text, circular photo)
   ========================================================================== */

.cgc-expert-box {
    border: 1px solid #5A3A6D;
    border-radius: 20px;
    display: flex;
    overflow: hidden;
    box-shadow: 0 35px 30px -5px rgba(0, 0, 0, 0.15);
    max-width: 80%;
}

.cgc-expert-box__content {
    flex: 65%;
    background: #24544C;
    padding: 32px 36px;
    color: #fff;
}

.cgc-section--expert .cgc-expert-box h2,
.cgc-expert-box__content h2 {
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 16px;
}

.cgc-section--expert .cgc-expert-box p,
.cgc-expert-box__content p {
    color: #fff;
    line-height: 1.7;
    font-size: 16px;
    margin-bottom: 12px;
}

.cgc-section--expert .cgc-expert-box a,
.cgc-expert-box__content a {
    color: #D9F3A3;
    text-decoration: underline;
}

.cgc-section--expert .cgc-expert-box a:hover,
.cgc-expert-box__content a:hover {
    color: #fff;
}

.cgc-section--expert .cgc-expert-box strong {
    color: #fff;
}

.cgc-expert-box__attribution {
    font-weight: 700;
    margin-top: 16px;
    color: #fff;
    font-size: 15px;
}

.cgc-expert-box__attribution a {
    color: #fff;
    text-decoration: underline;
}

.cgc-expert-box__photo {
    flex: 35%;
    background: #D9F3A3;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
}

.cgc-expert-box__photo img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    object-fit: cover;
    border: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

@media (max-width: 768px) {
    .cgc-expert-box {
        flex-direction: column;
        max-width: 100%;
    }
    .cgc-expert-box__content {
        padding: 24px 20px;
    }
    .cgc-expert-box__photo {
        order: -1;
        padding: 24px 20px;
    }
    .cgc-expert-box__photo img {
        width: 150px;
        height: 150px;
    }
}


/* ==========================================================================
   8. FAQ Accordion
   (Removed - now using the existing site's faq-container/faq-item classes)
   ========================================================================== */


/* ==========================================================================
   9. Step Cards — match IN10 full-width numbered cards
   ========================================================================== */

/* Step list: full-width stacked cards (vertical default) */
.cgc-steps-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* No bottom margins on content elements — section padding controls all vertical gaps */
.cgc-section .cgc-steps-list,
.cgc-section .cgc-layout--cards,
.cgc-section .cgc-modern-table,
.cgc-section .cgc-addon-accordion,
.cgc-section .cgc-layout,
.cgc-section .cgc-vertical-wrap,
.cgc-section .cgc-expert-box {
    margin-bottom: 0 !important;
}

/* Horizontal variant — cards side by side on desktop, stacked on mobile */
.cgc-steps-list--horizontal {
    flex-direction: row;
}

@media (max-width: 768px) {
    .cgc-steps-list--horizontal {
        flex-direction: column;
    }
}

.cgc-steps-list--horizontal .cgc-step-card {
    flex: 1;
}

/* What You Need section — burgundy number blocks */
.cgc-section--what_you_need .cgc-step-card__number {
    background: #5A3A6D;
    color: #fff;
}

/* Each step card: number block LEFT + text RIGHT */
.cgc-step-card {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    background: #fff;
    border: 1px solid #24544C;
    border-radius: 20px;
    overflow: hidden;
    min-height: 100%;
}

/* ==========================================================================
   Cross-Link Callout (Criminal Convictions + Van Insurance)
   ========================================================================== */

.cgc-cross-link-callout {
    margin-top: var(--global-kb-spacing-lg, 3rem);
    padding: 28px 32px;
    background: #f9f5fc;
    border-left: 4px solid #5A3A6D;
    border-radius: 0 12px 12px 0;
}

.cgc-cross-link-callout__title {
    font-size: 16px;
    font-weight: 700;
    color: #333;
    margin: 0 0 16px 0;
}

.cgc-cross-link-callout__links {
    display: flex;
    gap: 20px;
}

.cgc-cross-link-callout__link {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    flex: 1;
    padding: 20px;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.cgc-cross-link-callout__link:hover {
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
    border-color: #5A3A6D;
    text-decoration: none;
    color: inherit;
}

.cgc-cross-link-callout__link i {
    font-size: 24px;
    margin-top: 2px;
    flex-shrink: 0;
}

.cgc-cross-link-callout__link strong {
    color: #5A3A6D;
    font-size: 15px;
}

.cgc-cross-link-callout__link span {
    font-size: 14px;
    line-height: 1.5;
    color: #555;
}

@media (max-width: 1024px) {
    .cgc-cross-link-callout__link i {
        font-size: 32px;
    }
    .cgc-cross-link-callout__link strong {
        font-size: 18px;
    }
    .cgc-cross-link-callout__link span {
        font-size: 15px;
    }
    .cgc-cross-link-callout__title {
        font-size: 18px;
    }
}

@media (max-width: 768px) {
    .cgc-cross-link-callout__links {
        flex-direction: column;
    }
    .cgc-cross-link-callout__link i {
        font-size: 36px;
    }
    .cgc-cross-link-callout__link strong {
        font-size: 19px;
    }
    .cgc-cross-link-callout__link span {
        font-size: 16px;
    }
    .cgc-cross-link-callout__title {
        font-size: 20px;
    }

    /* Code cards: more gap on mobile */
    .cgc-card__cta {
        margin-top: 32px;
    }
}

/* Number block: light green bg, large bold number */
.cgc-step-card__number {
    flex-shrink: 0;
    background: #D9F3A3;
    width: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    font-weight: bold;
    color: #24544C;
}

/* Text content */
.cgc-step-card__text {
    flex-grow: 1;
    padding: 20px;
}

.cgc-step-card__text h3 {
    margin-bottom: 8px !important;
}

.cgc-step-card__text p {
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    margin-bottom: 8px;
}


/* ==========================================================================
   10. Section Intro / Outro Text
   ========================================================================== */

/* Match Full Why template body text: 16px, #333, 1.6 line-height */
.cgc-section-intro {
    margin-bottom: 24px;
    line-height: 1.6;
    font-size: 16px;
    color: #333;
}

.cgc-section-intro p {
    margin-bottom: 12px;
}

.cgc-section-outro {
    margin-top: 24px;
}


/* ==========================================================================
   11. Prose Text Styling (content inside sections)
   ========================================================================== */

.cgc-section p {
    line-height: 1.6;
    margin-bottom: 16px;
    color: #333;
    font-size: 16px;
}

.cgc-section a {
    color: #5A3A6D;
}

.cgc-section a:hover {
    text-decoration: underline;
}

.cgc-section h3 {
    font-size: 20px;
    margin: 24px 0 12px;
    color: #333;
}

/* No top margin on content directly after headings */
.cgc-section h2 + p,
.cgc-section h2 + .cgc-section-intro,
.cgc-section h2 + .cgc-section-intro > p:first-child,
.cgc-section .icon-heading-block + p,
.cgc-section .icon-heading-block + .cgc-section-intro,
.cgc-section .icon-heading-block + .cgc-section-intro > p:first-child,
.cgc-section .icon-heading-block + .cgc-layout,
.cgc-section .icon-heading-block + .cgc-layout > p:first-child {
    margin-top: 0;
}

/* Responsive heading sizes — scale down for tablet and mobile */
@media (max-width: 1024px) {
    /* Tablet section padding — LG instead of XL */
    .cgc-section__inner {
        padding: var(--global-kb-spacing-lg, 3rem) var(--global-content-edge-padding, 1rem);
    }
    .icon-heading-block h2 {
        font-size: 28px !important;
    }
    .icon-heading-block i {
        font-size: 1.8em !important;
    }
    .cgc-section h3 {
        font-size: 18px;
    }
    .cgc-card__heading {
        font-size: 18px;
    }
    .cgc-card__heading--lg {
        font-size: 20px;
    }
    .cgc-card__badge {
        width: 36px;
        height: 36px;
    }
    .cgc-card__badge i {
        font-size: 16px;
    }
    .cgc-card__badge--lg {
        width: 42px;
        height: 42px;
    }
    .cgc-card__badge--lg i {
        font-size: 19px;
    }
    .cgc-expert-box__content h2 {
        font-size: 24px !important;
    }
}

@media (max-width: 768px) {
    .icon-heading-block h2 {
        font-size: 24px !important;
    }
    .icon-heading-block i {
        font-size: 1.5em !important;
    }
    .cgc-section h3 {
        font-size: 17px;
    }
    .cgc-card__heading,
    .cgc-card h3,
    .cgc-card__text h3,
    .cgc-step-card__text h3 {
        font-size: 20px !important;
    }
    .cgc-card__heading--lg {
        font-size: 20px !important;
    }
    .cgc-card__badge {
        width: 32px;
        height: 32px;
    }
    .cgc-card__badge i {
        font-size: 14px;
    }
    .cgc-card__badge--lg {
        width: 36px;
        height: 36px;
    }
    .cgc-card__badge--lg i {
        font-size: 16px;
    }
    .cgc-expert-box__content h2 {
        font-size: 22px !important;
    }
}

.cgc-section strong {
    color: #333;
}


/* ==========================================================================
   12. Disclaimer Text
   ========================================================================== */

.cgc-disclaimer {
    font-size: 13px;
    color: #666;
    font-style: italic;
    margin-top: 16px;
}


/* ==========================================================================
   13. Mobile Responsive
   ========================================================================== */

@media (max-width: 768px) {

    /* Cards grid collapses to single column */
    .cgc-layout--cards-2,
    .cgc-layout--cards-3,
    .cgc-layout--cards-4 {
        grid-template-columns: 1fr;
    }

    /* Two-column layouts stack vertically */
    .cgc-layout--two-col {
        flex-direction: column;
    }

    .cgc-layout--two-col .cgc-layout__main,
    .cgc-layout--two-col .cgc-layout__side {
        flex: 100% !important;
    }

    /* Steps collapse to single column */
    .cgc-steps {
        grid-template-columns: 1fr;
    }

    /* Mobile padding — LG, same as tablet */
    .cgc-section__inner {
        padding: var(--global-kb-spacing-lg, 3rem) var(--global-content-edge-padding, 1rem);
    }
}


/* ==========================================================================
   14. Numbered Steps (inline flow variant)
   ========================================================================== */

.cgc-steps-container {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.cgc-numbered-step {
    flex: 1;
    min-width: 250px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.cgc-step-number {
    width: 40px;
    height: 40px;
    background: #5A3A6D;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
    flex-shrink: 0;
}

.cgc-step-content strong {
    color: #5A3A6D;
    font-size: 16px;
}

.cgc-step-content p {
    margin: 4px 0 0;
    font-size: 14px;
    color: #333;
}


/* ==========================================================================
   15. Useful Links
   ========================================================================== */

.cgc-useful-links {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cgc-useful-link {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    line-height: 1.6;
    font-size: 16px;
    color: #333;
}

.cgc-useful-link i {
    color: #5A3A6D;
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 3px;
}

.cgc-useful-link a {
    color: #5A3A6D;
    font-weight: 600;
    text-decoration: underline;
}

.cgc-useful-link a:hover {
    color: #24544C;
}


/* ==========================================================================
   16. Addon Card Icons
   ========================================================================== */

.cgc-card__icon {
    font-size: 1.8em;
    color: #24544C;
    margin-bottom: 10px;
    display: block;
}


/* ==========================================================================
   17. FAQ Yellow Styling Override
   ========================================================================== */

.cgc-section--faq .faq-question {
    background: #FFF091;
    border: 1px solid #24544C;
    border-radius: 8px;
    margin-bottom: 8px;
}

.cgc-section--faq .faq-item {
    border: none;
    margin-bottom: 0;
}


/* ==========================================================================
   18. Mobile — Steps & Useful Links
   ========================================================================== */

@media (max-width: 768px) {
    .cgc-steps-container {
        flex-direction: column;
    }
    .cgc-numbered-step {
        min-width: 100%;
    }
}