/*
 * Styles for procednew2.php
 * Extracted from the PHP page without changing selectors or declaration order.
 */

/* Extracted from procednew2.php - style block 1 */
/* =========================================================
   GLOBAL
   ========================================================= */

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    margin: 0;
    padding: 0;
}

body {
    overflow-x: hidden;
}


/* =========================================================
   HERO CONTAINER
   ========================================================= */

.hero-container {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}


/* =========================================================
   FLASH NEWS
   ========================================================= */

.top-nav {
    width: 100%;
    background: #212167;
    position: relative;
    overflow: hidden;
}

.breakingNews {
    width: 100%;
    height: 40px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.bn-title h2 {
    margin: 0;
    font-size: 20px;
    color: #fff;
    white-space: nowrap;
}

.bn-red .bn-title {
    background: #f44a56;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 15px;
    color: white;
    font-size: 16px;
    font-weight: bold;
    position: relative;
    z-index: 2;
    flex-shrink: 0;
}

.bn-title span {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 0 20px 10px;
    border-color:
        transparent
        transparent
        transparent
        #f44a56;
    position: absolute;
    right: -10px;
    top: 0;
}

.news-ticker {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
}

.news-track {
    white-space: nowrap;
    display: inline-block;
    padding-left: 100%;
    animation: ticker 40s linear infinite;
}

.news-track:hover {
    animation-play-state: paused;
}

.news-track a {
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    padding-left: 20px;
    white-space: nowrap;
}

@keyframes ticker {

    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }

}
/* =========================================================
   TOP HEADING
   LEFT TEXT + RIGHT TRUTH IMAGE
========================================================= */

.report-heading {

    width: 100%;

    flex: 0 0 auto;

    margin-bottom: 18px;

    padding: 10px 18px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    border-radius: 16px;

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

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

    box-shadow:
        0 8px 25px rgba(15,23,42,.05);
}


/* =========================================================
   HEADING LEFT CONTENT
========================================================= */

.report-heading-content {

    flex: 1 1 auto;

    min-width: 0;

    text-align: left;
}


.report-heading h1 {

    margin: 0;

    font-size:
        clamp(27px, 3vw, 44px);

    line-height: 1.05;

    font-weight: 800;

    letter-spacing: -1.2px;

    color: #14213d;
}


.report-heading h3 {

    margin: 6px 0 0;

    font-size:
        clamp(14px, 1.4vw, 19px);

    line-height: 1.2;

    font-weight: 600;

    color: #526078;
}


.report-heading p {

    margin: 4px 0 0;

    font-size: 12px;

    color: #8994a8;
}


/* =========================================================
   TRUTH IMAGE RIGHT
========================================================= */

.report-truth-link {

    flex: 0 0 auto;

    width:
        clamp(130px, 16vw, 210px);

    display: flex;

    align-items: center;

    justify-content: center;

    text-decoration: none !important;

    cursor: pointer;

    animation:
        truthFloat
        2.4s
        ease-in-out
        infinite;

    filter:
        drop-shadow(
            0 7px 12px
            rgba(15,23,42,.18)
        );

    transition:
        transform .25s ease,
        filter .25s ease;
}


.report-truth-link img {

    display: block;

    width: 100%;

    height: auto;

    max-height: 80px;

    object-fit: contain;

    user-select: none;

    -webkit-user-select: none;
}


.report-truth-link:hover {

    animation-play-state: paused;

    transform:
        scale(1.06);

    filter:
        drop-shadow(
            0 11px 19px
            rgba(15,23,42,.28)
        );
}


.report-truth-link:active {

    transform:
        scale(.95);
}


@keyframes truthFloat {

    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }

    100% {
        transform: translateY(0);
    }
}


/* =========================================================
   BOOTSTRAP GRID
========================================================= */

.report-cards {

    width: 100%;

    margin: 0;

    overflow: visible;
}


.card-column {

    min-height: 500px;

    display: flex;
}


.report-card {

    width: 100%;

    min-width: 0;

    min-height: 500px;

    display: flex;

    flex-direction: column;

    padding: 18px;

    border-radius: 22px;

    overflow: hidden;

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

    box-shadow:
        0 15px 38px
        rgba(15,23,42,.08),

        inset 0 1px 0
        rgba(255,255,255,.9);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


.report-card:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 20px 45px
        rgba(15,23,42,.13),

        inset 0 1px 0
        rgba(255,255,255,.95);
}


/* =========================================================
   CARD COLORS
========================================================= */

.problem-card {

    background:
        linear-gradient(
            145deg,
            #e1f7fb 0%,
            #c8eaf0 100%
        );
}


.solution-card {

    background:
        linear-gradient(
            145deg,
            #eaf8e4 0%,
            #d1ebc9 100%
        );
}


.action-card {

    background:
        linear-gradient(
            145deg,
            #fff3df 0%,
            #f8ddb4 100%
        );
}


/* =========================================================
   CARD HEADER
========================================================= */

.card-header {

    flex: 0 0 auto;

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 12px;
}

.card-header h2{
    font-size: 28px !important;
}

.card-number {

    width: 38px;

    height: 38px;

    min-width: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: #fff;

    font-size: 14px;

    font-weight: 800;

    box-shadow:
        0 6px 15px
        rgba(0,0,0,.15);
}


.problem-card .card-number {

    background: #159ab8;
}


.solution-card .card-number {

    background: #4ba548;
}


.action-card .card-number {

    background: #e69a25;
}


.card-title {

    margin: 0;

    font-size: 20px;

    line-height: 1.2;

    font-weight: 800;

    color: #172033;
}


/* =========================================================
   CARD CONTENT
========================================================= */

.card-content {

    flex: 1 1 auto;

    min-height: 0;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;
}


/* =========================================================
   ICON
========================================================= */

.card-icon {

    position: absolute;

    top: 5px;

    left: 5px;

    width: 54px;

    height: 54px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 16px;

    font-size: 27px;

    z-index: 2;
}


.problem-icon {

    background:
        rgba(21,154,184,.12);
}


.solution-icon {

    background:
        rgba(75,165,72,.12);
}


.action-icon {

    background:
        rgba(230,154,37,.12);
}


/* =========================================================
   PROBLEM CAROUSEL
========================================================= */

.problem-carousel {

    width: 100%;

    height: 100%;

    min-height: 0;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    padding:
        48px
        48px
        38px;

    overflow: hidden;
}


.problem-text-wrap {

    width: 100%;

    height: 100%;

    min-height: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    overflow: hidden;
}


#problemText {

    width: 100%;

    max-width: 100%;

    max-height: 100%;

    overflow: hidden;

    overflow-wrap: break-word;

    word-break: normal;

    white-space: normal;

    font-size:
        clamp(15px, 1.5vw, 21px);

    line-height: 1.5;

    font-weight: 600;

    color: #173840;

    transition:
        opacity .22s ease,
        transform .22s ease;
}


#problemText.fade-out {

    opacity: 0;

    transform:
        translateX(12px);
}


#problemText.fade-in {

    opacity: 1;

    transform:
        translateX(0);
}


/* =========================================================
   ARROWS
========================================================= */

.carousel-btn {

    position: absolute;

    top: 50%;

    transform:
        translateY(-50%);

    width: 40px;

    height: 40px;

    border: 0;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    color: #fff;

    font-size: 21px;

    z-index: 5;

    box-shadow:
        0 6px 16px
        rgba(0,0,0,.15);

    transition:
        transform .2s ease;
}


.carousel-btn:hover {

    transform:
        translateY(-50%)
        scale(1.08);
}


.carousel-btn:active {

    transform:
        translateY(-50%)
        scale(.94);
}


.prev-btn {

    left: 3px;

    background: #159ab8;
}


.next-btn {

    right: 3px;

    background: #159ab8;
}


/* =========================================================
   DOTS
========================================================= */

.carousel-dots {

    position: absolute;

    left: 50%;

    bottom: 3px;

    transform:
        translateX(-50%);

    display: flex;

    align-items: center;

    gap: 5px;
}


.carousel-dot {

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background:
        rgba(21,154,184,.28);

    cursor: pointer;

    transition:
        all .2s ease;
}


.carousel-dot.active {

    width: 18px;

    border-radius: 10px;

    background: #159ab8;
}


/* =========================================================
   SOLUTION / ACTION
========================================================= */

.value-box {

    width: 100%;

    height: 100%;

    min-height: 0;

    padding: 22px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    border-radius: 18px;

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

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

    overflow: hidden;
}


.value-text {

    width: 100%;

    max-height: 100%;

    overflow: hidden;

    overflow-wrap: break-word;

    word-break: normal;

    font-size:
        clamp(16px, 1.5vw, 20px);

    line-height: 1.45;

    font-weight: 600;

    color: #27372b;
}


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

@media (max-width: 992px) and (min-width: 768px) {

    .people-report-page {

        min-height: 100vh;

        padding:
            18px
            15px
            25px;
    }


    .report-heading {

        margin-bottom: 12px;
    }


    .report-cards {

        --bs-gutter-x: 10px;

        --bs-gutter-y: 0;
    }


    .card-column {

        min-height: 460px;
    }


    .report-card {

        min-height: 460px;

        padding: 13px;

        border-radius: 18px;
    }


    .card-number {

        width: 32px;

        height: 32px;

        min-width: 32px;

        font-size: 12px;
    }


    .card-title {

        font-size: 16px;
    }


    .card-icon {

        width: 44px;

        height: 44px;

        border-radius: 13px;

        font-size: 22px;
    }


    .problem-carousel {

        padding-left: 38px;

        padding-right: 38px;
    }


    .carousel-btn {

        width: 32px;

        height: 32px;

        font-size: 17px;
    }


    .value-box {

        padding: 14px;
    }


    .report-truth-link {

        width: 145px;
    }


    .report-truth-link img {

        max-height: 65px;
    }
}


/* =========================================================
   MOBILE
   ONE BY ONE CARDS
   NO VERTICAL SCROLL
========================================================= */

@media (max-width: 767px) {

    /* =====================================================
       MOBILE - MATCH REFERENCE IMAGE
       30% ICON AREA + 70% SCROLLABLE CONTENT AREA
       ===================================================== */

    html,
    body {
        width: 100%;
        min-height: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden !important;
    }

    .people-report-page {
        width: 100%;
        height: calc(100svh - 55px);
        min-height: 0;
        padding: 6px;
        overflow: hidden !important;
    }

    .report-container {
        width: 100%;
        height: 100%;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden !important;
    }

    /* =====================================================
       TOP HEADING
       ===================================================== */

    .report-heading {
        width: 100%;
        flex: 0 0 auto;
        margin-bottom: 6px;
        padding: 6px 8px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
        border-radius: 10px;
    }

    .report-heading-content {
        flex: 1 1 auto;
        min-width: 0;
        text-align: left;
    }

    .report-heading h1 {
        margin: 0;
        font-size: 18px;
        line-height: 1.05;
        letter-spacing: -.4px;
        white-space: nowrap;
    }

    .report-heading h3 {
        margin: 3px 0 0;
        font-size: 8px;
        line-height: 1.1;
        white-space: nowrap;
    }

    .report-heading p {
        display: none;
    }

    .report-truth-link {
        flex: 0 0 auto;
        width: 76px;
        max-width: 76px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .report-truth-link img {
        width: 100%;
        max-height: 38px;
        object-fit: contain;
    }

    /* =====================================================
       THREE MOBILE CARDS
       Each card gets equal vertical space.
       ===================================================== */

    .report-cards {
        width: 100%;
        flex: 1 1 auto;
        min-height: 0;
        height: 100%;
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        gap: 22px !important;
        margin: 0 !important;
        --bs-gutter-x: 0 !important;
        --bs-gutter-y: 0 !important;
        overflow: visible !important;
    }

    .report-cards > .card-column {
        position: relative;
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 0 !important;
        height: auto !important;
        min-height: 17vh;
        padding: 0 !important;
        display: flex;
        overflow: visible;
    }

    /* =====================================================
       CARD - IMAGE STYLE
       ===================================================== */

    .report-card {
        position: relative;
        width: 100%;
        height: 100%;
        min-height: 0;
        padding: 0 !important;
        border-radius: 16px;
        overflow: hidden;
        transform: none !important;
        display: block;
    }

    .report-card:hover {
        transform: none !important;
    }

    /* Hide desktop number/title header.
       Labels are recreated as image-style badges. */
    .report-card .card-header {
        display: none !important;
    }

    /* =====================================================
       30% ICON + 70% CONTENT
       ===================================================== */

    .report-card .card-content {
        width: 100%;
        height: 100%;
        min-height: 0;
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: 30% minmax(0, 70%);
        grid-template-rows: 100%;
        align-items: stretch;
        overflow: hidden;
        border: 2px solid #000;
                border-radius: 10px;
    }

    /* 30% icon section */
    .report-card .card-icon {
        position: relative;
        top: -16px;
        left: -11px !important;
        width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0;
        background: transparent !important;
        font-size: clamp(34px, 12vw, 64px);
        line-height: 1;
        z-index: 2;
        padding: 8px;
    }

    /* =====================================================
       70% CONTENT AREA
       ===================================================== */

    .problem-carousel,
    .value-box {
        grid-column: 2;
        grid-row: 1;
        width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 0;
        margin: 0;
    }

    /* Problem content */
    .problem-carousel {
        position: relative;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        padding: 14px 28px 14px 8px;
        overflow: hidden;
    }

    /* Problem text removed */
    .problem-card .problem-carousel {
        display: none !important;
    }

    .problem-text-wrap {
        width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 0;
        display: block;
        text-align: left;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 4px 2px 24px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    #problemText {
        width: 100%;
        max-width: none;
        max-height: none;
        min-height: 100%;
        padding: 0;
        margin: 0;
        overflow: visible;
        overflow-wrap: anywhere;
        word-break: normal;
        white-space: normal;
        text-align: left;
        font-size: 12px;
        line-height: 1.45;
        font-weight: 600;
        color: #173840;
    }

    /* Solution + Action content */
    .value-box {
        display: block;
        text-align: left;
        padding: 14px 12px 30px 8px;
        border: 0;
        border-radius: 0;
        background: transparent;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .value-text {
        width: 100%;
        max-height: none;
        min-height: 100%;
        display: block;
        overflow: visible;
        overflow-wrap: anywhere;
        word-break: normal;
        font-size: 12px;
        line-height: 1.45;
        font-weight: 600;
        color: #27372b;
        text-align: left;
    }

    /* =====================================================
       IMAGE-STYLE LABELS
       ===================================================== */

    .report-card::before {
        position: absolute;
        left: 8px;
        bottom: 8px;
        z-index: 20;
        padding: 7px 12px;
        border-radius: 7px;
        color: #fff;
        font-size: 12px;
        line-height: 1;
        font-weight: 800;
        letter-spacing: .2px;
        box-shadow: 0 5px 12px rgba(0,0,0,.14);
        pointer-events: none;
    }

    .problem-card::before {
        content: "PROBLEM";
        background: #ff3038;
    }

    .solution-card::before {
        content: "SOLUTION";
        background: #2454f4;
    }

    .action-card::before {
        content: "ACTION";
        background: #ffc52e;
    }

    /* =====================================================
       ARROW BETWEEN CARDS
       ===================================================== */

    .report-cards > .card-column:not(:last-child)::after {
        content: "↓";
        position: absolute;
        left: 23%;
        bottom: -22px;
        transform: translateX(-50%);
        z-index: 30;
        font-size: 28px;
        line-height: 1;
        font-weight: 800;
        color: #202020;
        text-shadow: 0 2px 4px rgba(0,0,0,.12);
        pointer-events: none;
    }

    /* =====================================================
       CAROUSEL BUTTONS
       ===================================================== */

    .carousel-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 24px;
        height: 24px;
        border: 0;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: #fff;
        font-size: 12px;
        z-index: 8;
        box-shadow: 0 4px 10px rgba(0,0,0,.14);
    }

    .carousel-btn:hover,
    .carousel-btn:active {
        transform: translateY(-50%);
    }

    .prev-btn {
        left: 2px;
        background: #159ab8;
    }

    .next-btn {
        right: 2px;
        background: #159ab8;
    }

    /* =====================================================
       DOTS
       ===================================================== */

    .carousel-dots {
        position: absolute;
        left: 50%;
        bottom: 5px;
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        gap: 3px;
        z-index: 8;
    }

    .carousel-dot {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: rgba(21,154,184,.35);
        cursor: pointer;
    }

    .carousel-dot.active {
        width: 12px;
        border-radius: 10px;
        background: #159ab8;
    }
}

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

@media (max-width: 390px) {

    .people-report-page {
        padding: 4px;
    }

    .report-heading {
        padding: 4px 6px;
        margin-bottom: 5px;
    }

    .report-heading h1 {
        font-size: 16px;
    }

    .report-heading h3 {
        font-size: 7px;
    }

    .report-truth-link {
        width: 68px;
        max-width: 68px;
    }

    .report-truth-link img {
        max-height: 34px;
    }

    .report-cards {
        gap: 21px !important;
    }

    .report-card {
        border-radius: 14px;
    }

    .report-card .card-icon {
        font-size: 34px;
        padding: 5px;
    }

    .problem-carousel {
        padding: 11px 25px 11px 7px;
    }

    .value-box {
        padding: 11px 9px 28px 7px;
    }

    #problemText,
    .value-text {
        font-size: 10px;
        line-height: 1.35;
    }

    .report-card::before {
        left: 6px;
        bottom: 6px;
        padding: 6px 10px;
        border-radius: 6px;
        font-size: 13px;
        line-height: 1.1;
        font-weight: 800;
    }

    .report-cards > .card-column:not(:last-child)::after {
        bottom: -21px;
        font-size: 25px;
    }

    .carousel-btn {
        width: 21px;
        height: 21px;
        font-size: 10px;
    }

    .carousel-dots {
        bottom: 3px;
    }
}

/* =========================================================
   VERY SHORT MOBILE
   ========================================================= */

@media (max-width: 767px) and (max-height: 650px) {

    .report-heading h1 {
        font-size: 15px;
    }

    .report-heading h3 {
        font-size: 7px;
    }

    .report-truth-link {
        width: 60px;
        max-width: 60px;
    }

    .report-truth-link img {
        max-height: 29px;
    }

    .report-cards {
        gap: 18px !important;
    }

    .report-card::before {
        padding: 6px 10px;
        font-size: 12px;
        line-height: 1.1;
        font-weight: 800;
    }

    .report-card .card-icon {
        font-size: 65px !important;
    }

    .problem-carousel {
        padding-top: 9px;
        padding-bottom: 9px;
    }

    .value-box {
        padding-top: 9px;
        padding-bottom: 24px;
    }

    #problemText,
    .value-text {
        font-size: 9px;
        line-height: 1.3;
    }

    .report-cards > .card-column:not(:last-child)::after {
        bottom: -18px;
        font-size: 22px;
    }
}


/* =========================================================
   FINAL DESIGN UPDATE
   ========================================================= */

/* WEB / DESKTOP */
@media (min-width: 993px) {
    .report-heading {
        justify-content: center !important;
        text-align: center !important;
        padding: 6px 10px !important;
        margin-bottom: 12px !important;
    }

    .report-heading-content {
        width: 100% !important;
        flex: 0 0 100% !important;
        text-align: center !important;
    }

    .report-heading h1 {
        font-size: clamp(24px, 2.5vw, 36px) !important;
    }

    .report-heading h3 {
        font-size: clamp(12px, 1.1vw, 16px) !important;
        margin-top: 4px !important;
    }

    .card-column {
        min-height: 390px !important;
    }

    .report-card {
        min-height: 390px !important;
        padding: 12px !important;
        border-radius: 17px !important;
    }

    .card-header {
        gap: 7px !important;
        margin-bottom: 8px !important;
    }

    .card-number {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        font-size: 11px !important;
    }

    .card-title {
        font-size: 16px !important;
    }

    .card-icon {
        width: 42px !important;
        height: 42px !important;
        border-radius: 12px !important;
        font-size: 21px !important;
    }

    .problem-carousel {
        padding: 38px 38px 30px !important;
    }

    .value-box {
        padding: 15px !important;
        border-radius: 14px !important;
    }
}

/* TABLET */
@media (max-width: 992px) and (min-width: 768px) {
    .report-heading {
        justify-content: center !important;
        text-align: center !important;
    }

    .report-heading-content {
        width: 100% !important;
        text-align: center !important;
    }

    .card-column {
        min-height: 400px !important;
    }

    .report-card {
        min-height: 400px !important;
        padding: 10px !important;
    }

    .card-number {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        font-size: 10px !important;
    }

    .card-title {
        font-size: 15px !important;
    }

    .card-icon {
        width: 38px !important;
        height: 38px !important;
        border-radius: 11px !important;
        font-size: 19px !important;
    }
}

/* MOBILE */
@media (max-width: 767px) {
    /* Mobile-only card labels */
    .report-card::before {
        left: 5px !important;
        bottom: 5px !important;
        padding: 7px 12px !important;
        font-size: 14px !important;
        line-height: 1.1 !important;
        font-weight: 800 !important;
    }

    .report-heading {
        justify-content: center !important;
        text-align: center !important;
        padding: 4px 5px !important;
        margin-bottom: 5px !important;
    }

    .report-heading-content {
        width: 100% !important;
        flex: 0 0 100% !important;
        text-align: center !important;
    }

    .report-heading h1 {
        font-size: 18px !important;
        text-align: center !important;
    }

    .report-heading h3 {
        font-size: 9px !important;
        text-align: center !important;
        margin-top: 3px !important;
    }

    .report-cards {
        gap: 14px !important;
    }

    .report-card {
        border-radius: 12px !important;
    }

    .report-card .card-icon {
        font-size: 27px !important;
        padding: 4px !important;
    }

    .report-card::before {
        left: 5px !important;
        bottom: 5px !important;
        padding: 7px 12px !important;
        font-size: 14px !important;
        line-height: 1.1 !important;
        font-weight: 800 !important;
    }
}
/* =========================================================
   FINAL RESPONSIVE SIZE CONTROL
   TRUTH + ICON + TEXT CONSISTENCY
========================================================= */

/* Truth Image All Screens */
.final-truth-image {
    width: 55px !important;
    height: 55px !important;
max-width: 130px !important;
    max-height: 98px !important;
    object-fit: contain !important;
}


/* Common Card Icons */
.card-icon {
    font-size: 22px !important;
}


/* Heading Same Size All Screens */
.report-heading h1 {
    font-size: 32px !important;
    line-height: 1.2 !important;
}

.report-heading h3 {
    font-size: 16px !important;
    line-height: 1.3 !important;
}


/* Card Titles */
.card-title {
    font-size: 18px !important;
}


/* Tablet */
@media(max-width:992px){

    .report-heading h1 {
        font-size:32px !important;
    }

    .report-heading h3 {
        font-size:16px !important;
    }

    .card-icon {
        font-size:22px !important;
    }

}


/* Mobile */
@media(max-width:767px){

    .final-truth-image {
        width:55px !important;
        height:122px !important;
    }


    .report-heading h1 {
        font-size:20px !important;
    }

    .report-heading h3 {
        font-size:11px !important;
    }


    .card-icon {
        font-size:22px !important;
    }


    .card-title {
        font-size:16px !important;
    }

}


/* Small Mobile */
@media(max-width:390px){

    .report-heading h1 {
        font-size:20px !important;
    }

    .report-heading h3 {
        font-size:11px !important;
    }

    .card-icon {
        font-size:22px !important;
    }

}
/* SMALL MOBILE */
@media (max-width: 390px) {
    .report-heading h1 {
        font-size: 25px !important;
    }

    .report-heading h3 {
        font-size: 15px !important;
    }

    .report-cards {
        gap: 12px !important;
    }

    .report-card .card-icon {
        font-size: 78px !important;
    }
}

/* VERY SHORT MOBILE */
@media (max-width: 767px) and (max-height: 650px) {
    .report-heading h1 {
        font-size: 19px !important;
    }

    .report-heading h3 {
        font-size: 11px !important;
    }

    .report-card .card-icon {
        font-size: 51px !important;
    }
}

/* =========================================================
   FINAL TRUTH IMAGE - 55px CENTER
   ========================================================= */
.final-truth-image-wrap {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 10px auto 0 !important;
}

.final-truth-image {
    width: 55px !important;
    height: 55px !important;
    max-width: 55px !important;
    max-height: 55px !important;
    object-fit: contain !important;
    display: block !important;
}


@media screen and (max-width: 768px) and (max-height: 700px) {
    .people-project-image {
        max-height: 55px !important;
        width: auto !important;
        max-width: 100% !important;
        object-fit: contain !important;
    }
}

/* =========================================================
   MOBILE FINAL SIZE UPDATE
   Bigger card icons + bigger bottom Truth hand
   ========================================================= */

@media (max-width: 767px) {

    /* Make the Problem / Solution / Action icons clearly larger */
    .report-card .card-icon {
        font-size: 64px !important;
        width: 100% !important;
        height: 100% !important;
        padding: 4px !important;
    }

    /* Bigger final Truth hand image */
    .final-truth-image-wrap {
        width: 100% !important;
        min-height: 105px !important;
        margin: 8px auto 0 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .final-truth-image {
        width: 115px !important;
        height: 115px !important;
        max-width: 115px !important;
        max-height: 115px !important;
        object-fit: contain !important;
        display: block !important;
    }
}

/* Extra-small mobile */
@media (max-width: 390px) {

    .report-card .card-icon {
        font-size: 58px !important;
    }

    .final-truth-image-wrap {
        min-height: 92px !important;
        margin-top: 6px !important;
    }

    .final-truth-image {
        width: 105px !important;
        height: 105px !important;
        max-width: 105px !important;
        max-height: 105px !important;
    }
}





/* =========================================================
   WEB / DESKTOP - TRUTH3 IMAGE SIZE
   Only affects screens wider than 992px.
   Mobile and tablet styles remain unchanged.
   ========================================================= */
@media (min-width: 993px) {
    .final-truth-image-wrap {
        width: 100% !important;
        min-height: 115px !important;
        margin: 10px auto 0 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .final-truth-image {
        width: 110px !important;
        height: 110px !important;
        max-width: 110px !important;
        max-height: 110px !important;
        object-fit: contain !important;
        display: block !important;
    }
}

/* =========================================================
   IMAGE
   ========================================================= */

.imagedata {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    display: block;
    overflow: visible;
}

.imagedata picture {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    display: block;
}

.imagedata img {
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    display: block;
}


/* =========================================================
   WELCOME SECTION
   ========================================================= */

.df-welcome {
    display: none;
}


/* =========================================================
   BUTTON
   ========================================================= */

.btn-log {
    width: 100%;
    margin: 0;
    padding: 15px 30px 20px;
    background: #fff;
    text-align: center;
}

.btn-log .btn-data {
    display: block;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    padding: 14px 10px;
}


/* =========================================================
   MOBILE - ALL DEVICES
   320px TO 768px
   ========================================================= */

@media screen and (max-width: 768px) {

    html,
    body {
        width: 100%;
        min-width: 100%;
        margin: 0;
        padding: 0;

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

    body {
        display: block;
        min-height: 100vh;
        background: #fff;
    }


    /* ---------------------------------------------------------
       HEADER
       --------------------------------------------------------- */

    body > header {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
    }


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

    .hero-container {
        width: 100% !important;
        max-width: 100% !important;

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

        overflow: visible !important;
    }


    /* ---------------------------------------------------------
       FLASH NEWS
       --------------------------------------------------------- */

    .top-nav {
        width: 100% !important;
        max-width: 100% !important;

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

        overflow: hidden;
    }

    .breakingNews {
        width: 100%;
        height: 60px;
    }

    .bn-red .bn-title {
        height: 60px;

        padding: 0 20px;

        font-size: clamp(16px, 5vw, 22px);
    }

    .bn-title h2 {
        font-size: clamp(18px, 5.5vw, 24px);
        line-height: 1;
    }

    .bn-title span {
        border-width: 30px 0 30px 15px;

        right: -15px;

        top: 0;
    }

    .news-ticker {
        height: 60px;
        min-width: 0;
    }

    .news-track a {
        font-size: clamp(13px, 4vw, 16px);
    }


    /* ---------------------------------------------------------
       FULL WIDTH IMAGE
       --------------------------------------------------------- */

    .imagedata {
        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;

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

        display: block !important;

        overflow: visible !important;
    }

    .imagedata picture {
        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;

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

        display: block !important;
    }

    .imagedata img {
        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;

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

        display: block !important;

        object-fit: initial !important;
    }


    /* ---------------------------------------------------------
       BUTTON
       --------------------------------------------------------- */

    .btn-log {
        width: 100% !important;

        margin: 0 !important;

        padding: 15px 20px 20px !important;

        background: #fff;

        position: relative !important;

        left: auto !important;
        right: auto !important;
        bottom: auto !important;

        z-index: 10;
    }

    .btn-log .btn-data {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 auto !important;

        padding: 14px 8px !important;

        font-size: clamp(16px, 4.5vw, 20px);

        line-height: 1.3;
    }

}


/* =========================================================
   VERY SMALL MOBILE
   320px - 359px
   ========================================================= */

@media screen and (max-width: 359px) {

    .breakingNews {
        height: 40px;
    }

    .bn-red .bn-title {
        height: 52px;
        padding: 0 14px;
    }

    .bn-title h2 {
        font-size: 17px;
    }

    .bn-title span {
        border-width: 26px 0 26px 12px;
        right: -12px;
    }

    .news-ticker {
        height: 52px;
    }

    .news-track a {
        font-size: 12px;
    }

    .btn-log {
        padding: 10px 12px 15px !important;
    }

}


/* =========================================================
   SMALL MOBILE
   360px - 389px
   ========================================================= */

@media screen and (min-width: 360px) and (max-width: 389px) {

    .breakingNews {
        height: 56px;
    }

    .bn-red .bn-title {
        height: 56px;
        padding: 0 16px;
    }

    .bn-title h2 {
        font-size: 19px;
    }

    .bn-title span {
        border-width: 28px 0 28px 13px;
        right: -13px;
    }

    .news-ticker {
        height: 56px;
    }

}


/* =========================================================
   NORMAL MOBILE
   390px - 430px
   ========================================================= */

@media screen and (min-width: 390px) and (max-width: 430px) {

    .breakingNews {
        height: 60px;
    }

    .bn-red .bn-title {
        height: 60px;
        padding: 0 20px;
    }

    .bn-title h2 {
        font-size: 21px;
    }

    .bn-title span {
        border-width: 30px 0 30px 15px;
        right: -15px;
    }

}


/* =========================================================
   LARGE MOBILE / SMALL TABLET
   431px - 600px
   ========================================================= */

@media screen and (min-width: 431px) and (max-width: 600px) {

    .breakingNews {
        height: 60px;
    }

    .bn-red .bn-title {
        height: 60px;
        padding: 0 22px;
    }

    .bn-title h2 {
        font-size: 22px;
    }

}


/* =========================================================
   TABLET PORTRAIT
   601px - 768px
   ========================================================= */

@media screen and (min-width: 601px) and (max-width: 768px) {

    .breakingNews {
        height: 60px;
    }

    .bn-red .bn-title {
        height: 60px;
        padding: 0 25px;
    }

    .bn-title h2 {
        font-size: 24px;
    }

    .news-track a {
        font-size: 16px;
    }
 

    .btn-log {
        padding: 15px 30px 20px !important;
    }

    .btn-log .btn-data {
        max-width: 500px !important;
    }

}


/* =========================================================
   EXTRA SAFETY FOR MOBILE
   ========================================================= */

@media screen and (max-width: 768px) {

    .container,
    .container-fluid {
        width: 100% !important;
        max-width: 100% !important;
    }

    img {
        max-width: 100%;
    }

}

/* =========================================================
   FINAL VIEWPORT FIX
   NO VERTICAL PAGE SCROLL + ANIMATED CTA BUTTON
   ========================================================= */

/* Keep the complete page inside the visible screen */
html,
body {
    width: 100%;
    height: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden !important;
}

body {
    height: 100vh;
    height: 100dvh;
    min-height: 0 !important;
    display: flex;
    flex-direction: column;
    background: #fff;
}

/* Header must keep only the space it actually needs */
body > header {
    flex: 0 0 auto;
}

/* Hero takes only the remaining viewport height */
.hero-container {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
}

.top-nav,
.breakingNews {
    flex: 0 0 auto;
}

/* Image area automatically fits the remaining free space */
.imagedata {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto;
    background: #001a32;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.imagedata picture {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

.imagedata img {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center center !important;
}

/* Bottom button area stays inside viewport */
.btn-log {
    width: 100% !important;
    flex: 0 0 auto;
    margin: 0 !important;
    padding: 10px 16px 12px !important;
    background: #fff;
    text-align: center;
    position: relative !important;
    z-index: 20;
}

/* Modern animated CTA */
.btn-log .btn-data {
    position: relative;
    isolation: isolate;
    width: min(100%, 500px) !important;
    min-height: 54px;
    margin: 0 auto !important;
    padding: 14px 58px 14px 28px !important;

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

    border: 0 !important;
    border-radius: 999px !important;
    overflow: hidden;

    color: #fff !important;
    text-decoration: none !important;
    font-size: clamp(15px, 2vw, 18px);
    font-weight: 700;
    letter-spacing: .25px;

    background:
        linear-gradient(120deg, #17175d 0%, #292993 48%, #f44a56 100%) !important;

    box-shadow:
        0 10px 24px rgba(33, 33, 103, .24),
        inset 0 1px 0 rgba(255, 255, 255, .22);

    transform: translateZ(0);
    transition:
        transform .28s ease,
        box-shadow .28s ease,
        filter .28s ease;
}

/* Soft moving shine */
.btn-log .btn-data::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -70%;
    left: -45%;
    width: 34%;
    height: 240%;
    transform: rotate(22deg);
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, .12),
        rgba(255, 255, 255, .72),
        rgba(255, 255, 255, .12),
        transparent
    );
    animation: buttonShine 3s ease-in-out infinite;
}

/* Animated arrow */
.btn-log .btn-data::after {
    content: "→";
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 25px;
    line-height: 1;
    font-weight: 700;
    animation: buttonArrow 1.15s ease-in-out infinite;
}

.btn-log .btn-data:hover,
.btn-log .btn-data:focus-visible {
    transform: translateY(-2px) scale(1.012);
    box-shadow:
        0 14px 30px rgba(33, 33, 103, .30),
        0 4px 14px rgba(244, 74, 86, .18);
    filter: saturate(1.08);
}

.btn-log .btn-data:active {
    transform: translateY(0) scale(.985);
}

.btn-log .btn-data:focus-visible {
    outline: 3px solid rgba(244, 74, 86, .28) !important;
    outline-offset: 3px;
}

@keyframes buttonShine {
    0%, 18% {
        left: -45%;
        opacity: 0;
    }

    28% {
        opacity: 1;
    }

    58% {
        left: 120%;
        opacity: 0;
    }

    100% {
        left: 120%;
        opacity: 0;
    }
}

@keyframes buttonArrow {
    0%, 100% {
        transform: translate(-2px, -50%);
    }

    50% {
        transform: translate(5px, -50%);
    }
}

/* Mobile viewport tuning */
@media screen and (max-width: 768px) {
    html,
    body {
        height: 100%;
        min-height: 100%;
        overflow: hidden !important;
    }

    body {
        height: 100vh;
        height: 100dvh;
        min-height: 0 !important;
    }

    .hero-container {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    .imagedata,
    .imagedata picture {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    .imagedata img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        object-position: center center !important;
    }

    .btn-log {
        flex: 0 0 auto !important;
        padding: 8px 14px calc(10px + env(safe-area-inset-bottom)) !important;
    }

    .btn-log .btn-data {
        width: 100% !important;
        max-width: 500px !important;
        min-height: 50px;
        padding: 12px 52px 12px 22px !important;
        font-size: clamp(14px, 4vw, 17px) !important;
        line-height: 1.2;
    }

    .btn-log .btn-data::after {
        right: 19px;
        font-size: 23px;
    }
}

/* Very short mobile screens */
@media screen and (max-width: 768px) and (max-height: 700px) {
    .breakingNews {
        height: 44px !important;
    }

    .bn-red .bn-title {
        height: 44px !important;
        padding: 0 14px !important;
    }

    .bn-title h2 {
        font-size: 17px !important;
    }

    .bn-title span {
        border-width: 22px 0 22px 11px !important;
        right: -11px !important;
    }

    .news-ticker {
        height: 44px !important;
    }

    .btn-log {
        padding-top: 6px !important;
        padding-bottom: calc(23px + env(safe-area-inset-bottom)) !important;
    }

    .btn-log .btn-data {
        min-height: 46px;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
}

/* Accessibility: avoid forced animation when user requests less motion */
@media (prefers-reduced-motion: reduce) {
    .btn-log .btn-data,
    .btn-log .btn-data::before,
    .btn-log .btn-data::after {
        animation: none !important;
        transition: none !important;
    }
}


/* =========================================================
   FINAL IMAGE NO-CROP SAFEGUARD
   Entire hero artwork remains visible on desktop + mobile.
   ========================================================= */
.hero-container,
.imagedata,
.imagedata picture {
    min-height: 0 !important;
}

.imagedata {
    /*display: flex !important;*/
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
}

.imagedata picture {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.imagedata img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
}

/* Mobile source also stays completely visible */
@media screen and (max-width: 768px) {
    .imagedata,
    .imagedata picture,
    .imagedata img {
        width: 100% !important;
        max-width: 100% !important;
    }

    .imagedata img {
        height: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
        object-position: center center !important;
    }
}


/* =========================================================
   DESKTOP / WEB RESTORE
   Keep web image/layout like the original code.
   Mobile (<= 768px) is intentionally NOT changed here.
   ========================================================= */
@media screen and (min-width: 769px) {

    html,
    body {
        width: 100% !important;
        height: auto !important;
        min-height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    body {
        display: block !important;
        background: #fff !important;
    }

    .hero-container {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        overflow: visible !important;
    }

    .top-nav,
    .breakingNews {
        flex: none !important;
    }

    .imagedata {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        overflow: visible !important;
        background: transparent !important;
    }

    .imagedata picture {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
    }

    .imagedata img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        object-fit: initial !important;
        object-position: initial !important;
    }

    /* Keep redesigned animated CTA, but let it sit normally after the image */
    .btn-log {
        width: 100% !important;
        margin: 0 !important;
        padding: 15px 30px 20px !important;
        position: relative !important;
    }
}


/* =========================================================
   THE PEOPLE PROJECT IMAGE BUTTON
   ========================================================= */

.btn-log {
    width: 100%;
    margin: 0;
    padding: 15px 30px 20px;
    background: #fff;
    text-align: center;
}

.people-project-btn {
    position: relative !important;

    display: inline-block !important;

    width: min(100%, 500px) !important;

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

    border: 0 !important;
    outline: none !important;

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

    text-decoration: none !important;

    overflow: hidden;

    /* Arrow completely removed */
    font-size: 0;
    line-height: 0;

    cursor: pointer;
}


/* =========================================================
   IMAGE
   ========================================================= */

.people-project-image {
    display: block;

    width: 25%;
    max-width: 500px;

    height: auto;

    margin: 0 auto;
    padding: 0;

    border: 0;
    outline: none;

    object-fit: contain;

    cursor: pointer;

    /* truth3.jpeg must remain static */
    animation: none !important;

    transform: none !important;
    transform-origin: center center;

    transition: none !important;
}


/* =========================================================
   IMAGE ANIMATION
   ========================================================= */

@keyframes peopleProjectAnimation {

    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }

}


/* Hover */
.people-project-btn:hover .people-project-image {
    transform: none !important;
}


/* =========================================================
   REMOVE ALL ARROW / PSEUDO ELEMENTS
   ========================================================= */

.people-project-btn::before,
.people-project-btn::after {
    content: none !important;
    display: none !important;
}


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

@media screen and (max-width: 768px) {

    .btn-log {
        width: 100% !important;

      
    }

    .people-project-btn {
        width: 100% !important;
        max-width: 500px !important;

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

    .people-project-image {
        /* Same clean size on all mobile screens */
        width: 150px !important;
        max-width: calc(100vw - 24px) !important;

        height: auto !important;
        max-height: none !important;

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

        display: block !important;
        object-fit: contain !important;
        object-position: center center !important;

        animation: none !important;
        transform: none !important;
        transition: none !important;
    }

}


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

@media screen and (max-width: 380px) {

    .btn-log {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .people-project-image {
        width: 150px !important;
        max-width: calc(100vw - 20px) !important;
        height: auto !important;
        margin: 0 auto !important;
    }

}


/* =========================================================
   VERY SHORT MOBILE
   ========================================================= */

@media screen and (max-width: 768px) and (max-height: 700px) {

    .btn-log {
        padding-top: 6px !important;
        padding-bottom:
            calc(7px + env(safe-area-inset-bottom))
            !important;
    }

    .people-project-image {
        width: 150px !important;
        max-width: calc(100vw - 20px) !important;
        height: auto !important;
        max-height: none !important;

        margin: 0 auto !important;
        object-fit: contain !important;

        animation: none !important;
        transform: none !important;
        transition: none !important;
    }

}


/* =========================================================
   MOBILE IMAGE - FULL WIDTH / NO BACKGROUND
   ========================================================= */
@media screen and (max-width: 768px) {
    .imagedata {
        width: 100% !important;
        height: auto !important;
        background: transparent !important;
        overflow: visible !important;
    }

    .imagedata picture {
        width: 100% !important;
        height: auto !important;
        display: block !important;
        background: transparent !important;
    }

    .imagedata img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: none !important;
        display: block !important;
        object-fit: contain !important;
        object-position: center center !important;
        background: transparent !important;
    }
}

/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .people-project-image {
        animation: none !important;
        transition: none !important;
    }

}


/* =========================================================
   FINAL RESPONSIVE truth3.jpeg FIX
   IMPORTANT: Keep this block at the VERY END of <style>.
   Mobile only. Desktop/tablet remain unchanged.
   ========================================================= */

/* Disable animation permanently for truth3.jpeg */
.people-project-image,
.people-project-btn:hover .people-project-image,
.people-project-btn:focus .people-project-image,
.people-project-btn:active .people-project-image {
    animation: none !important;
    transition: none !important;
    transform: none !important;
}

/* Extra Small Mobile - 320px and below */
@media screen and (max-width: 320px) {
    .btn-log {
        width: 100% !important;
        height: 92px !important;
        min-height: 92px !important;
        margin: 0 !important;
        padding: 0 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
    }

    .btn-log a,
    .people-project-btn {
        width: 140px !important;
        height: 72px !important;
        max-width: 140px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: visible !important;
    }

    .people-project-image {
        width: 140px !important;
        height: 72px !important;
        max-width: 140px !important;
        max-height: 72px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: block !important;
        object-fit: contain !important;
        object-position: center center !important;
    }
}

/* Small Mobile - 321px to 375px */
@media screen and (min-width: 321px) and (max-width: 375px) {
    .btn-log {
        width: 100% !important;
        height: 96px !important;
        min-height: 96px !important;
        margin: 0 !important;
        padding: 0 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
    }

    .btn-log a,
    .people-project-btn {
        width: 150px !important;
        height: 76px !important;
        max-width: 150px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: visible !important;
    }

    .people-project-image {
        width: 150px !important;
        height: 76px !important;
        max-width: 150px !important;
        max-height: 76px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: block !important;
        object-fit: contain !important;
        object-position: center center !important;
    }
}

/* Mobile - 376px to 425px */
@media screen and (min-width: 376px) and (max-width: 425px) {
    .btn-log {
        width: 100% !important;
        height: 100px !important;
        min-height: 100px !important;
        margin: 0 !important;
        padding: 0 12px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
    }

    .btn-log a,
    .people-project-btn {
        width: 160px !important;
        height: 80px !important;
        max-width: 160px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: visible !important;
    }

    .people-project-image {
        width: 160px !important;
        height: 80px !important;
        max-width: 160px !important;
        max-height: 80px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: block !important;
        object-fit: contain !important;
        object-position: center center !important;
    }
}

/* Large Mobile - 426px to 575px */
@media screen and (min-width: 426px) and (max-width: 575px) {
    .btn-log {
        width: 100% !important;
        height: 104px !important;
        min-height: 104px !important;
        margin: 0 !important;
        padding: 0 14px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
    }

    .btn-log a,
    .people-project-btn {
        width: 170px !important;
        height: 84px !important;
        max-width: 170px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: visible !important;
    }

    .people-project-image {
        width: 170px !important;
        height: 84px !important;
        max-width: 170px !important;
        max-height: 84px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: block !important;
        object-fit: contain !important;
        object-position: center center !important;
    }
}

/* Common safety for ALL mobile devices */
@media screen and (max-width: 575px) {
    body {
        overflow-x: hidden !important;
    }

    .btn-log {
        box-sizing: border-box !important;
        background: #fff !important;
        text-align: center !important;
    }

    .btn-log a,
    .people-project-btn {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        transform: none !important;
    }

    .people-project-image {
        position: static !important;
        float: none !important;
        border: 0 !important;
        outline: 0 !important;
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}


/* =========================================================
   FINAL MOBILE-ONLY FIX
   Remove the white area contained at the bottom of webdate.jpeg
   Desktop / Web view remains unchanged.
   ========================================================= */

@media screen and (max-width: 768px) {

    /* Crop only the mobile hero image */
    .imagedata {
        width: 100% !important;
        height: 138vw !important;
        max-height: none !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        background: #061a2e !important;
        display: block !important;
    }

    .imagedata picture {
        width: 100% !important;
        height: 100% !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        overflow: hidden !important;
        background: #061a2e !important;
    }

    .imagedata img {
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        object-fit: cover !important;
        object-position: top center !important;
        background: #061a2e !important;
    }

    /* Truth section */
    .btn-log {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 5px 0 7px !important;
        background: #061a2e !important;
        text-align: center !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .btn-log > a,
    .btn-log .people-project-btn {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        overflow: visible !important;
    }

    .people-project-image {
        width: 65px !important;
        height: auto !important;
        max-width: 65px !important;
        max-height: none !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: block !important;
        object-fit: contain !important;
        object-position: center center !important;
        animation: none !important;
        transform: none !important;
        transition: none !important;
    }
}

/* 320px - 380px */
@media screen and (max-width: 380px) {

    .imagedata {
        height: 138vw !important;
    }

    .btn-log {
        padding: 4px 0 6px !important;
        background: #061a2e !important;
    }

    .people-project-image {
        width: 60px !important;
        max-width: 60px !important;
    }
}

/* 381px - 768px */
@media screen and (min-width: 381px) and (max-width: 768px) {

    .imagedata {
        height: 138vw !important;
    }

    .btn-log {
        padding: 5px 0 7px !important;
        background: #061a2e !important;
    }

    .people-project-image {
        width: 65px !important;
        max-width: 65px !important;
    }
}


/* =========================================================
   FINAL MOBILE ONLY FIX
   - Keep 4-side border of webdate.jpeg visible
   - Crop only the unwanted bottom white area
   - Increase truth3.jpeg size
   - Desktop / Web view remains unchanged
   ========================================================= */

@media screen and (max-width: 768px) {

    /* Mobile hero: keep full width and crop only from bottom */
    .imagedata {
        width: 100% !important;
        height: 138vw !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        background: #061a2e !important;
        display: block !important;
    }

    .imagedata picture {
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        overflow: visible !important;
    }

    .imagedata img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;

        /* Do NOT use cover: it can cut the left/right border */
        object-fit: initial !important;
        object-position: top center !important;
    }

    /* Bottom truth section */
    .btn-log {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 6px 0 8px !important;
        background: #061a2e !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .btn-log > a,
    .btn-log .people-project-btn {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;

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

        background: transparent !important;
        overflow: visible !important;
    }

    /* Increased truth3.jpeg size */
    .people-project-image {
        width: 105px !important;
        height: auto !important;
        max-width: 105px !important;
        max-height: none !important;

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

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

        animation: none !important;
        transform: none !important;
        transition: none !important;
    }
}


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

@media screen and (max-width: 380px) {

    .imagedata {
        height: 138vw !important;
    }

    .btn-log {
        padding: 5px 0 7px !important;
        background: #b87612!important;
    }

    .people-project-image {
        width: 95px !important;
        max-width: 95px !important;
    }
}


/* =========================================================
   381px - 768px
   ========================================================= */

@media screen and (min-width: 381px) and (max-width: 768px) {

    .imagedata {
        height: 138vw !important;
    }

    .btn-log {
        padding: 6px 0 8px !important;
        background: #b87612 !important;
    }

    .people-project-image {
        width: 105px !important;
        max-width: 105px !important;
    }
}


/* =========================================================
   PEOPLE REPORT DATA - WEB + MOBILE
   Existing body images are replaced by report data.
   ========================================================= */

.people-report-content {
    width: 100% !important;
    max-width: 1180px !important;
    margin: 0 auto !important;
    padding: 18px 24px 24px !important;
    background: #fff !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.people-report-title {
    margin: 0 0 18px !important;
    padding: 0 !important;
    text-align: center !important;
    color: #fff !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: clamp(28px, 3vw, 42px) !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
}

.people-report-main {
    width: min(100%, 850px) !important;
    margin: 0 auto !important;
    /*display: grid !important;*/
    grid-template-columns: 1fr 1fr !important;
    align-items: center !important;
    column-gap: 40px !important;
}

.people-report-visual {
    min-height: 260px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.justice-icon {
    font-family: "Times New Roman", serif !important;
    font-size: clamp(150px, 18vw, 260px) !important;
    line-height: .8 !important;
    color: #a96d18 !important;
    transform: scaleX(.78) !important;
    user-select: none !important;
}

.people-report-score {
    text-align: center !important;
}

.people-report-percentage {
    color: #df2b21 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: clamp(56px, 7vw, 92px) !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.people-report-percentage span {
    /*font-size: .42em !important;*/
    vertical-align: top !important;
    margin-left: 2px !important;
}

.people-report-caption {
    margin-top: 8px !important;
    color: #14274a !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: clamp(14px, 1.5vw, 20px) !important;
    font-weight: 400 !important;
}

.people-report-options {
    width: min(100%, 850px) !important;
    margin: 18px auto 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.people-report-option {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #172747 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    cursor: pointer !important;
}

.people-report-option input {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 19px !important;
    height: 19px !important;
    min-width: 19px !important;
    margin: 0 !important;
    border: 2px solid #24395d !important;
    border-radius: 50% !important;
    background: #fff !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
}

.people-report-option input:checked {
    box-shadow: inset 0 0 0 4px #fff !important;
    background: #24395d !important;
}

/* Mobile */
@media screen and (max-width: 768px) {

    .people-report-content {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 12px 20px 18px !important;
        background: #fff !important;
        overflow: visible !important;
    }

    .people-report-title {
        margin: 0 0 14px !important;
        font-size: clamp(25px, 7vw, 32px) !important;
    }

    .people-report-main {
        width: 100% !important;
        max-width: 100% !important;
        grid-template-columns: 1fr 1fr !important;
        column-gap: 8px !important;
    }

    .people-report-visual {
        min-height: 215px !important;
    }

    .justice-icon {
        font-size: clamp(135px, 40vw, 185px) !important;
    }

    .people-report-percentage {
        font-size: clamp(50px, 15vw, 70px) !important;
    }

    .people-report-caption {
        margin-top: 6px !important;
        font-size: 12px !important;
    }

    .people-report-options {
        width: 100% !important;
        margin: 12px auto 0 !important;
        gap: 6px !important;
    }

    .people-report-option {
        gap: 9px !important;
        font-size: 14px !important;
    }

    .people-report-option input {
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
    }
}

/* Small mobile */
@media screen and (max-width: 380px) {

    .people-report-content {
        padding: 0px 2px 2px !important;
    }

    .people-report-title {
        font-size: 25px !important;
        margin-bottom: 12px !important;
    }

    .people-report-visual {
        min-height: 200px !important;
    }

    .justice-icon {
        font-size: 130px !important;
    }

    .people-report-percentage {
        font-size: 48px !important;
    }

    .people-report-caption {
        font-size: 11px !important;
    }

    .people-report-option {
        font-size: 13px !important;
    }
}

/* Desktop */
@media screen and (min-width: 769px) {
    .people-report-content {
        /*min-height: 430px !important;*/
    }
}


/* =========================================================
   NEW1.PNG - INCREASE IMAGE SIZE
   ========================================================= */

.mobile-report-logo {
    width: 280px !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
    object-fit: contain !important;
}

/* Mobile */
@media screen and (max-width: 768px) {
    .mobile-report-logo {
        width: 172px !important;
        max-width: calc(100vw - 30px) !important;
        height: auto !important;
        margin: 0 auto !important;
    }
}

/* Small mobile */
@media screen and (max-width: 380px) {
    .mobile-report-logo {
        width: 122px !important;
        max-width: calc(100vw - 24px) !important;
    }
}


/* =========================================================
   NEW1.PNG SIZE + VERTICAL LINE BETWEEN LOGO AND TITLE
   ========================================================= */

/* Smaller logo */
.mobile-report-logo {
    width: 190px !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
    object-fit: contain !important;
}

/* Center vertical line between top logo and The People Report */
.people-report-logo-divider {
    width: 2px !important;
    height: 28px !important;
    margin: 6px auto 8px !important;
    background: #000 !important;
    display: block !important;
}

/* Mobile */
@media screen and (max-width: 768px) {
    .mobile-report-logo {
        width: 150px !important;
        max-width: calc(100vw - 30px) !important;
        height: auto !important;
        margin: 0 auto !important;
    }

    .people-report-logo-divider {
        width: 2px !important;
        height: 24px !important;
        margin: 5px auto 7px !important;
    }
}

/* Small mobile */
@media screen and (max-width: 380px) {
    .mobile-report-logo {
        width: 140px !important;
        max-width: calc(100vw - 24px) !important;
    }

    .people-report-logo-divider {
        height: 22px !important;
        margin: 4px auto 6px !important;
    }
}


/* =========================================================
   HORIZONTAL LINE BETWEEN TOP LOGO AND THE PEOPLE REPORT
   ========================================================= */

.people-report-logo-divider {
    width: 220px !important;
    height: 2px !important;
    margin: 7px auto 9px !important;
    background: #000 !important;
    display: block !important;
}

@media screen and (max-width: 768px) {
    .people-report-logo-divider {
        width: 180px !important;
        height: 2px !important;
        margin: 5px auto 7px !important;
    }
}

@media screen and (max-width: 380px) {
    .people-report-logo-divider {
        width: 160px !important;
        height: 2px !important;
        margin: 4px auto 6px !important;
    }
}


/* =========================================================
   FULL VIEWPORT-WIDTH HORIZONTAL LINE BELOW TOP LOGO
   ========================================================= */

.people-report-logo-divider {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 2px !important;
    margin: 7px 0 9px !important;
    margin-left: calc(50% - 50vw) !important;
    padding: 0 !important;
    background: #000 !important;
    display: block !important;
    box-sizing: border-box !important;
}

@media screen and (max-width: 768px) {
    .people-report-logo-divider {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 2px !important;
        margin: 5px 0 7px !important;
        margin-left: calc(50% - 50vw) !important;
    }
}

@media screen and (max-width: 380px) {
    .people-report-logo-divider {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 2px !important;
        margin: 4px 0 6px !important;
        margin-left: calc(50% - 50vw) !important;
    }
}



/* =========================================================
   FINAL MOBILE UPDATE
   - Increase Assets/Logo/new1.png size on mobile
   - Increase radio button text size
   - Desktop/Web remains unchanged
   ========================================================= */

@media screen and (max-width: 768px) {
    .mobile-report-logo {
        width: 220px !important;
        max-width: calc(100vw - 24px) !important;
        height: auto !important;
        margin: 0 auto !important;
    }

    .people-report-option {
        font-size: 18px !important;
        line-height: 1.35 !important;
        gap: 11px !important;
    }

    .people-report-option input {
        width: 21px !important;
        height: 21px !important;
        min-width: 21px !important;
    }
}

@media screen and (max-width: 380px) {
    .mobile-report-logo {
        width: 205px !important;
        max-width: calc(100vw - 20px) !important;
    }

    .people-report-option {
        font-size: 17px !important;
        line-height: 1.35 !important;
    }

    .people-report-option input {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
    }
}



/* =========================================================
   FINAL PEOPLE REPORT BOX + TEXT SIZE UPDATE
   - The People Report + Truth in our Democracy in one box
   - Truth in our Democracy centered and bold
   - Radio text increased
   ========================================================= */

.people-report-heading-box {
    width: min(100%, 760px) !important;
    margin: 0 auto 22px !important;
    padding: 20px 24px 18px !important;
    text-align: center !important;
    background: #fff !important;
    border: 2px solid #172747 !important;
    border-radius: 14px !important;
    box-shadow: 0 5px 16px rgba(23, 39, 71, .12) !important;
    box-sizing: border-box !important;
}

.people-report-heading-box .people-report-title {
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    font-size: clamp(30px, 3.2vw, 42px) !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
}

.people-report-heading-box .people-report-caption {
    width: 100% !important;
    margin: 10px 0 0 !important;
    padding: 0 !important;
    text-align: center !important;
    color: #14274a !important;
    font-size: clamp(20px, 2vw, 27px) !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
}

.people-report-option {
    font-size: 21px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    gap: 12px !important;
}

.people-report-option input {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
}

@media screen and (max-width: 768px) {
    .people-report-heading-box {
        width: 70% !important;
        margin: 16px auto 18px !important;
        padding: 16px 14px 15px !important;
        border-width: 2px !important;
        border-radius: 12px !important;
    }

    .people-report-heading-box .people-report-title {
        font-size: clamp(27px, 8vw, 34px) !important;
    }

    .people-report-heading-box .people-report-caption {
        margin-top: 8px !important;
        font-size: clamp(19px, 5.5vw, 25px) !important;
        font-weight: 800 !important;
        text-align: center !important;
    }

    .people-report-option {
        font-size: 20px !important;
        font-weight: 700 !important;
        line-height: 1.35 !important;
        gap: 11px !important;
    }

    .people-report-option input {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
    }
}

@media screen and (max-width: 380px) {
    .people-report-heading-box {
        padding: 14px 10px 13px !important;
        margin-bottom: 16px !important;
    }

    .people-report-heading-box .people-report-title {
        font-size: 27px !important;
    }

    .people-report-heading-box .people-report-caption {
        font-size: 24px !important;
    }

    .people-report-option {
        font-size: 19px !important;
    }

    .people-report-option input {
        width: 21px !important;
        height: 21px !important;
        min-width: 21px !important;
    }
}



/* =========================================================
   FINAL PEOPLE REPORT DROPDOWN + DIVIDER SPACING
   ========================================================= */

/* Remove all top padding around the logo/divider area */
.people-report-content {
    padding-top: 0 !important;
}

/* Logo divider: no padding and minimum spacing */
.people-report-logo-divider {
    margin-top: 0 !important;
    margin-bottom: 3px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Dropdown below the percentage */
.people-report-dropdown {
    width: min(100%, 850px) !important;
    margin: 14px auto 0 !important;
    position: relative !important;
}

.people-report-dropdown-toggle {
    width: 100% !important;
    min-height: 52px !important;
    margin: 0 !important;
    padding: 10px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    border: 2px solid #172747 !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #172747 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-align: left !important;
    cursor: pointer !important;
    box-shadow: none !important;
}

/* Left-side dropdown icon */
.people-report-dropdown-icon {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: #172747 !important;
    color: #fff !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    transition: transform .2s ease !important;
}

/* Rotate icon when dropdown is open */
.people-report-dropdown-toggle[aria-expanded="true"] .people-report-dropdown-icon {
    transform: rotate(180deg) !important;
}

/* Hidden by default */
.people-report-options[hidden] {
    display: none !important;
}

/* Open radio options */
.people-report-dropdown .people-report-options {
    width: 100% !important;
    margin: 7px 0 0 !important;
    padding: 10px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    border: 1px solid #d7dce5 !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-sizing: border-box !important;
    box-shadow: 0 4px 12px rgba(23, 39, 71, .10) !important;
}

.people-report-dropdown .people-report-option {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 7px 4px !important;
    color: #172747 !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    text-align: left !important;
}

.people-report-dropdown .people-report-option input {
    width: 21px !important;
    height: 21px !important;
    min-width: 21px !important;
    margin: 0 !important;
}

@media screen and (max-width: 768px) {
    .people-report-content {
        padding-top: 0 !important;
    }

    .people-report-logo-divider {
        margin-top: 0 !important;
        margin-bottom: 2px !important;
        padding: 0 !important;
    }

    .people-report-dropdown {
        margin-top: 10px !important;
    }

    .people-report-dropdown-toggle {
        min-height: 48px !important;
        padding: 8px 12px !important;
        font-size: 18px !important;
    }

    .people-report-dropdown-icon {
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
        font-size: 20px !important;
    }

    .people-report-dropdown .people-report-options {
        padding: 8px 10px !important;
        gap: 5px !important;
    }

    .people-report-dropdown .people-report-option {
        padding: 6px 2px !important;
        font-size: 17px !important;
        gap: 9px !important;
    }
}

@media screen and (max-width: 380px) {
    .people-report-dropdown {
        margin-top: 8px !important;
    }

    .people-report-dropdown-toggle {
        min-height: 45px !important;
        font-size: 17px !important;
    }

    .people-report-dropdown .people-report-option {
        font-size: 16px !important;
    }
}



/* =========================================================
   FINAL MOBILE PEOPLE REPORT DESIGN
   ========================================================= */
.mobile-report-arrow-btn {
    display: none !important;
}

.people-report-modal-content {
    border: 0 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
}

.people-report-modal-content .modal-header {
    background: #172747 !important;
    color: #fff !important;
    border-bottom: 0 !important;
}

.people-report-modal-content .modal-title {
    font-weight: 700 !important;
}

.people-report-modal-content .btn-close {
    filter: brightness(0) invert(1);
}

.people-report-modal-content .modal-body {
    padding: 18px !important;
}

.people-report-modal-content .people-report-option {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 0 14px !important;
    padding: 10px 6px !important;
    font-size: 17px !important;
    font-weight: 600 !important;
}

@media screen and (max-width: 768px) {
    /* Better heading box */
    .people-report-heading-box {
        width: 80% !important;
        margin: 0 auto 14px !important;
        padding: 10px 12px !important;
        border: 1px solid #172747 !important;
        border-radius: 10px !important;
               background: linear-gradient(180deg, #172747 0%, #172747 100%) !important;
        box-shadow: 0 3px 10px rgba(23, 39, 71, .10) !important;
    }

    .people-report-heading-box .people-report-title {
        font-size: 22px !important;
        line-height: 1.15 !important;
        letter-spacing: .2px !important;
    }

    /* Keep logo centered and increase its size */
    .mobile-report-logo {
        width: 220px !important;
        max-width: calc(100vw - 30px) !important;
        height: auto !important;
        margin: 0 auto !important;
    }

    /* Image first, then percentage row */
    .people-report-main {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 6px !important;
    }

    .people-report-visual {
        width: 100% !important;
    }

    /* Arrow left + percentage/caption right */
    .people-report-score {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 54px 1fr !important;
        align-items: center !important;
        column-gap: 8px !important;
        text-align: right !important;
        padding: 4px 2px 0 !important;
    }

    .mobile-report-arrow-btn {
        display: inline-flex !important;
        width: 46px !important;
        height: 46px !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 50% !important;
        background: #172747 !important;
        color: #fff !important;
        box-shadow: 0 4px 10px rgba(23,39,71,.20) !important;
        cursor: pointer !important;
    }

    .mobile-report-arrow-btn span {
        display: block !important;
        font-size: 28px !important;
        line-height: 1 !important;
        transform: translateY(-2px) !important;
    }

    .people-report-percentage {
        text-align: right !important;
        font-size: 48px !important;
        line-height: .95 !important;
        margin: 0 !important;
    }

    .people-report-caption {
        grid-column: 2 !important;
        text-align: right !important;
        margin: 3px 0 0 !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        line-height: 1.15 !important;
    }

    /* Desktop dropdown stays available on desktop, hidden on mobile */
    .people-report-dropdown {
        display: none !important;
    }
}

@media screen and (max-width: 380px) {
    .people-report-heading-box .people-report-title {
        font-size: 20px !important;
    }

    .mobile-report-logo {
        width: 210px !important;
        max-width: calc(100vw - 24px) !important;
    }

    .people-report-score {
        grid-template-columns: 50px 1fr !important;
    }

    .mobile-report-arrow-btn {
        width: 43px !important;
        height: 43px !important;
    }

    .people-report-percentage {
        font-size: 44px !important;
    }

    .people-report-caption {
        font-size: 15px !important;
    }
}


/* FINAL MOBILE PEOPLE REPORT OVERRIDES */
@media screen and (max-width: 768px) {
    .mobile-report-logo { width: 220px !important; max-width: calc(100vw - 24px) !important; height: auto !important; }
    .mobile-people-report-controls { width:100% !important; display:flex !important; align-items:center !important; justify-content:space-between !important; gap:12px !important; }
    .mobile-people-report-arrow { width:34px !important; height:34px !important; min-width:34px !important; padding:0 !important; border:1px solid #222 !important; border-radius:4px !important; background:#fff !important; color:#222 !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; font-size:20px !important; line-height:1 !important; box-shadow:none !important; }
    .mobile-people-report-score { margin-left:auto !important; text-align:right !important; flex:0 0 auto !important; }
    .mobile-people-report-score .people-report-percentage { font-size:52px !important; line-height:.95 !important; }
    .mobile-people-report-score .people-report-caption { font-size:20px !important; line-height:1.2 !important; white-space:nowrap !important; }
}
@media screen and (max-width:380px) {
    .mobile-report-logo { width:205px !important; max-width:calc(100vw - 24px) !important; }
    .mobile-people-report-score .people-report-percentage { font-size:46px !important; }
    .mobile-people-report-score .people-report-caption { font-size:20px !important; }
}


/* =========================================================
   FINAL MOBILE PEOPLE REPORT POSITION + LOGO SIZE
   ========================================================= */
@media screen and (max-width: 768px) {

    /* Increase the People Report top logo */
    .mobile-report-logo {
        width: 230px !important;
        max-width: calc(100vw - 20px) !important;
        height: auto !important;
    }

    /* Percentage LEFT, simple dropdown arrow RIGHT */
    .mobile-people-report-controls {
        width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
    }

    .mobile-people-report-score {
        order: 1 !important;
        margin: 0 !important;
        text-align: left !important;
        flex: 1 1 auto !important;
    }

    .mobile-people-report-arrow {
        order: 2 !important;
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        padding: 0 !important;
        margin-left: auto !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: #222 !important;
        box-shadow: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 22px !important;
        line-height: 1 !important;
    }

    .mobile-people-report-arrow:focus,
    .mobile-people-report-arrow:active {
        outline: none !important;
        box-shadow: none !important;
    }

    .mobile-people-report-score .people-report-percentage {
        font-size: 55px !important;
        line-height: .95 !important;
        text-align: left !important;
    }

    .mobile-people-report-score .people-report-caption {
        font-size: 15px !important;
        line-height: 1.2 !important;
        text-align: left !important;
    }
}

@media screen and (max-width: 380px) {
    .mobile-report-logo {
        width: 215px !important;
        max-width: calc(100vw - 18px) !important;
    }

    .mobile-people-report-score .people-report-percentage {
        font-size: 48px !important;
    }
}



/* =========================================================
   FINAL MOBILE PEOPLE REPORT LAYOUT
   - Percentage LEFT
   - Arrow RIGHT
   - Truth in our Democracy CENTERED BELOW IMAGE
   - Mobile only; desktop unchanged
   ========================================================= */
@media screen and (max-width: 768px) {

    .people-report-main {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 6px !important;
    }

    .mobile-report-logo {
        width: 230px !important;
        max-width: calc(100vw - 20px) !important;
        height: auto !important;
        display: block !important;
        margin: 0 auto 4px !important;
    }

    .people-report-score {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        grid-template-rows: auto auto !important;
        align-items: center !important;
        column-gap: 10px !important;
        row-gap: 2px !important;
        margin: 0 !important;
        padding: 0 2px !important;
        text-align: left !important;
    }

    .people-report-percentage {
        grid-column: 1 !important;
        grid-row: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
        color: #df2b21 !important;
        font-family: Arial, Helvetica, sans-serif !important;
        font-size: 55px !important;
        font-weight: 800 !important;
        line-height: .95 !important;
        letter-spacing: -1px !important;
    }

    .mobile-report-arrow-btn {
        grid-column: 2 !important;
        grid-row: 1 !important;
        display: inline-flex !important;
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: #172747 !important;
        box-shadow: none !important;
        cursor: pointer !important;
        font-family: Arial, Helvetica, sans-serif !important;
    }

    .mobile-report-arrow-btn span {
        display: block !important;
        font-size: 34px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        transform: translateY(-3px) !important;
    }

    .people-report-caption {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        width: 100% !important;
        margin: 2px 0 0 !important;
        padding: 0 !important;
        text-align: center !important;
        color: #14274a !important;
        font-family: Arial, Helvetica, sans-serif !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        letter-spacing: .2px !important;
    }
}

@media screen and (max-width: 380px) {

    .mobile-report-logo {
        width: 215px !important;
        max-width: calc(100vw - 18px) !important;
    }

    .people-report-percentage {
        font-size: 48px !important;
    }

    .mobile-report-arrow-btn {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
    }

    .mobile-report-arrow-btn span {
        font-size: 30px !important;
    }

    .people-report-caption {
        font-size: 17px !important;
    }
}



/* =========================================================
   FINAL MOBILE FIX
   - Percentage CENTER
   - Arrow remains RIGHT
   - Everything else unchanged
   - Mobile only
   ========================================================= */
@media screen and (max-width: 768px) {

    .people-report-score {
        width: 100% !important;
        position: relative !important;
        margin: 0 !important;
        text-align: center !important;
        display: block !important;
    }

    .people-report-score .people-report-percentage {
        width: 100% !important;
        display: block !important;
        margin: 0 auto !important;
        text-align: center !important;
    }

    .mobile-report-arrow-btn {
        position: absolute !important;
        right: 0 !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
    }

    .mobile-report-arrow-btn span {
        display: inline-block !important;
    }
}

@media screen and (max-width: 380px) {

    .people-report-score .people-report-percentage {
        text-align: center !important;
    }

    .mobile-report-arrow-btn {
        right: 0 !important;
    }
}


/* =========================================================
   FINAL MOBILE PEOPLE REPORT SPACING + CAPTION SIZE
   ========================================================= */
@media screen and (max-width: 768px) {

    /* Add visible gap between the top line and the People Report title box */
    .people-report-heading-box {
        margin-top: 12px !important;
    }

    /* Increase Truth in our Democracy text */
    .people-report-caption {
        font-size: 20px !important;
        line-height: 1.25 !important;
        text-align: center !important;
    }
}

@media screen and (max-width: 380px) {
    .people-report-heading-box {
        margin-top: 10px !important;
    }

    .people-report-caption {
        font-size: 20px !important;
    }
}



/* =========================================================
   FINAL MOBILE FIX - TRUTH IN OUR DEMOCRACY TITLE 25PX
   Desktop / Web view remains unchanged.
   ========================================================= */
@media screen and (max-width: 768px) {
    .people-report-caption {
        font-size: 25px !important;
        line-height: 1.25 !important;
    }
}

@media screen and (max-width: 380px) {
    .people-report-caption {
        font-size: 25px !important;
        line-height: 1.25 !important;
    }
}



/* =========================================================
   FINAL MOBILE TRIANGLE DROPDOWN ICON
   Replace the old down-chevron with a clean triangle.
   ========================================================= */
@media screen and (max-width: 768px) {
    .mobile-report-arrow-btn span {
        width: 0 !important;
        height: 0 !important;
        display: block !important;
        border-left: 9px solid transparent !important;
        border-right: 9px solid transparent !important;
        border-top: 12px solid #172747 !important;
        font-size: 0 !important;
        line-height: 0 !important;
        transform: none !important;
    }
}

@media screen and (max-width: 380px) {
    .mobile-report-arrow-btn span {
        border-left-width: 8px !important;
        border-right-width: 8px !important;
        border-top-width: 10px !important;
    }
}


/* =========================================================
   PEOPLE REPORT / CHANGE MAKERS CSS FIX
   Added without removing the original design.
   ========================================================= */

.people-report-content {
    position: relative;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 18px 24px 24px;
    background: #fff;
    box-sizing: border-box;
}

.people-report-heading-box {
    width: min(100%, 850px);
    margin: 0 auto 16px;
    padding: 14px 20px;
    background: #212167;
    border-radius: 12px;
    box-sizing: border-box;
}

.people-report-title {
    margin: 0 !important;
    color: #fff !important;
    text-align: center !important;
    font-size: clamp(24px, 3vw, 38px) !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
}

.cm-search-panel {
    width: min(100%, 850px);
    margin: 0 auto 12px;
    position: relative;
    z-index: 5;
}

.cm-filter-toolbar {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: #f1f3f5;
    border: 1px solid #e1e5e8;
    border-radius: 12px;
    box-sizing: border-box;
}

.cm-az-nav {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 2px;
}

.cm-az-nav::-webkit-scrollbar {
    display: none;
}

.cm-az-btn {
    flex: 0 0 auto;
    min-width: 30px;
    height: 30px;
    padding: 0 7px;
    border: 0;
    border-radius: 7px;
    background: #fff;
    color: #334155;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: .18s ease;
}

.cm-az-btn:hover,
.cm-az-btn.active {
    background: #212167;
    color: #fff;
}

.cm-search-toggle,
.cm-search-back,
.cm-search-clear {
    border: 0;
    cursor: pointer;
}

.cm-search-toggle {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #212167;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.truism-search-wrap {
    width: 100%;
    display: none;
    align-items: center;
    gap: 8px;
}

.truism-search-wrap.active,
.truism-search-wrap.search-open {
    display: flex;
}

.cm-search-back {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 50%;
    background: #f1f3f5;
    color: #212167;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.truism-search-box {
    flex: 1;
    min-width: 0;
    height: 42px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    background: #f1f3f5;
    border: 1px solid #e1e5e8;
    border-radius: 22px;
}

.truism-search-icon {
    flex: 0 0 auto;
    color: #64748b;
}

.truism-search-input {
    width: 100%;
    min-width: 0;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    color: #172033;
    font-size: 14px;
}

.cm-search-clear {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 50%;
    background: transparent;
    color: #64748b;
    font-size: 22px;
    line-height: 1;
}

.truism-search-results {
    position: absolute;
    left: 48px;
    right: 0;
    top: 48px;
    display: none;
    max-height: 260px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e1e5e8;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    z-index: 50;
}

.truism-search-result-item,
.truism-search-empty {
    padding: 11px 14px;
    border-bottom: 1px solid #edf0f2;
    color: #172033;
    font-size: 13px;
    cursor: pointer;
}

.truism-search-result-item:hover {
    background: #f5f6f6;
}

.cm-groups-wrap {
    width: min(100%, 850px);
    margin: 0 auto;
    max-height: 58vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 2px 8px;
    scrollbar-width: thin;
}

.changemakers-section {
    width: 100%;
    margin: 0;
}

.changemakers-grid {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.truth-democracy-card {
    width: 100%;
    margin: 0;
    padding: 10px 12px;
    background: #fff;
    border-bottom: 2px solid #6c757da3;
    box-sizing: border-box;
    transition: background .15s ease;
}

.truth-democracy-card:hover {
    background: #f7f8f9;
}

.cm-person-row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
}

.truth-photo-box {
    position: relative;
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    border-radius: 50%;
    overflow: hidden;
    background: #e9eef5;
}

.truth-photo-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.photo-placeholder {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: #212167;
    color: #fff;
    font-size: 19px;
    font-weight: 700;
}

.cm-person-content {
    min-width: 0;
    flex: 1 1 auto;
}

.cm-person-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.truth-name-value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #172033;
    font-size: 15px;
    font-weight: 700;
}

.cm-percentage {
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 800;
}

.cm-progress-high-text { color: #159447; }
.cm-progress-medium-text { color: #d48714; }
.cm-progress-low-text { color: #df2b21; }

.truth-heading {
    margin: 3px 0 5px !important;
    color: #667781;
    font-size: 12px;
}

.cm-progress {
    height: 5px !important;
    margin: 0 0 7px;
    overflow: hidden;
    border-radius: 99px;
    background: #e9edef !important;
}

.cm-progress .progress-bar {
    border-radius: 99px;
}

.cm-progress-high {
    background: #159447 !important;
}

.cm-progress-medium {
    background: #d48714 !important;
}

.cm-progress-low {
    background: #df2b21 !important;
}

.truth-links-row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 5px;
    overflow-x: auto;
    scrollbar-width: none;
}

.truth-links-row::-webkit-scrollbar {
    display: none;
}

.truth-link {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: #2563eb;
    padding: 0;
    font-size: 11px;
    line-height: 1.4;
    font-weight: 600;
    cursor: pointer;
}

.truth-link span {
    font-weight: 800;
}

.truth-link:disabled {
    color: #a8b0b8;
    cursor: default;
}

@media screen and (max-width: 768px) {
    .people-report-content {
        /*padding: 10px 8px 14px !important;*/
    }

    .people-report-heading-box {
        width: 100%;
        margin-bottom: 9px;
        padding: 10px 12px;
        border-radius: 9px;
    }

    .people-report-title {
        font-size: 25px !important;
    }

    .cm-search-panel,
    .cm-groups-wrap {
        width: 100%;
    }

    .cm-filter-toolbar {
        padding: 6px;
        border-radius: 9px;
    }

    .cm-az-nav {
        gap: 3px;
    }

    .cm-az-btn {
        min-width: 27px;
        height: 28px;
        padding: 0 6px;
        font-size: 11px;
    }

    .cm-search-toggle,
    .cm-search-back {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
    }

    .cm-groups-wrap {
        max-height: 62vh;
        padding-bottom: 4px;
    }

    .truth-democracy-card {
        padding: 9px 8px;
    }

    .truth-photo-box {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
    }

    .cm-person-row {
        gap: 9px;
    }

    .truth-name-value {
        font-size: 14px;
    }

    .cm-percentage {
        font-size: 12px;
        margin-bottom: -49px;
    }

    .truth-heading {
        font-size: 11px;
    }

    .truth-link {
        font-size: 10.5px;
    }
}

@media screen and (max-width: 380px) {
    .people-report-content {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    .truth-photo-box {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
    }

    .truth-name-value {
        font-size: 13px;
    }

    .cm-groups-wrap {
        max-height: 64vh;
    }
}


/* =========================================================
   SEARCH + PEOPLE REPORT FONT SIZE UPDATE
   ========================================================= */

/* When search icon is clicked, hide A-Z letters completely */
.cm-search-panel.search-open .cm-filter-toolbar {
    display: none !important;
}

.cm-search-panel.search-open .truism-search-wrap {
    display: flex !important;
}

/* Keep search box open/visible until Back is clicked */
.cm-search-panel.search-open {
    display: block !important;
}

.cm-search-panel.search-open .truism-search-wrap {
    width: 100% !important;
}

/* Bigger person names */
.truth-name-value {
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
}

/* Bigger "Truth in Our Democracy" text */
.truth-heading {
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    margin: 4px 0 7px !important;
}

/* Bigger My Solution / My Action / My Ideas */
.truth-link {
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
}

/* Keep search input comfortable */
.truism-search-input {
    font-size: 16px !important;
    min-height: 40px !important;
}

@media screen and (max-width: 768px) {
    .truth-name-value {
        font-size: 17px !important;
    }

    .truth-heading {
        font-size: 14px !important;
    }

    .truth-link {
        font-size: 13px !important;
    }

    .truism-search-input {
        font-size: 16px !important;
    }
}

@media screen and (max-width: 380px) {
    .truth-name-value {
        font-size: 16px !important;
    }

    .truth-heading {
        font-size: 13.5px !important;
    }

    .truth-link {
        font-size: 12.5px !important;
    }
}



/* =========================================================
   DESKTOP = MOBILE DESIGN REFERENCE
   ---------------------------------------------------------
   Desktop-only override.
   IMPORTANT: Mobile styles are NOT changed.
   The desktop cards use the same visual language as the
   mobile cards: icon area + content area + bottom label.
   ========================================================= */

@media screen and (min-width: 769px) {

    /* Page/content sizing */
    .people-report-content {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 8px 12px 12px !important;
    }

    .people-report-heading-box {
        width: 100% !important;
        margin: 0 0 10px !important;
        padding: 7px 12px !important;
        border-radius: 10px !important;
        text-align: center !important;
    }

    .people-report-title {
        margin: 0 !important;
        font-size: 28px !important;
        line-height: 1.15 !important;
        font-weight: 800 !important;
        text-align: center !important;
    }

    /* Three cards stay in one row on web */
    .report-cards {
        width: 100% !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 14px !important;
        margin: 0 !important;
        --bs-gutter-x: 0 !important;
        --bs-gutter-y: 0 !important;
    }

    .report-cards > .card-column {
        position: relative !important;
        width: calc((100% - 28px) / 3) !important;
        max-width: calc((100% - 28px) / 3) !important;
        flex: 0 0 calc((100% - 28px) / 3) !important;
        min-height: 360px !important;
        height: 360px !important;
        padding: 0 !important;
        display: flex !important;
        overflow: visible !important;
    }

    /* Same mobile-style card */
    .report-card {
        position: relative !important;
        width: 100% !important;
        height: 87% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 16px !important;
        overflow: hidden !important;
        transform: none !important;
        display: block !important;
    }

    .report-card:hover {
        transform: none !important;
    }

    /* Hide old desktop number/title row.
       Mobile uses the bottom image-style label instead. */
    .report-card .card-header {
        display: none !important;
    }

    /* Exact mobile visual split: 30% icon + 70% content */
    .report-card .card-content {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: grid !important;
        grid-template-columns: 30% minmax(0, 70%) !important;
        grid-template-rows: 100% !important;
        align-items: stretch !important;
        overflow: hidden !important;
        border: 2px solid #000 !important;
        border-radius: 12px !important;
    }

    /* Same large icon treatment as mobile */
    .report-card .card-icon {
        position: relative !important;
        top: -8px !important;
        left: -5px !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 0 !important;
        background: transparent !important;
        font-size: clamp(58px, 6vw, 92px) !important;
        line-height: 1 !important;
        z-index: 2 !important;
        padding: 4px !important;
    }

    /* Keep action icon/font rendering consistent */
    .report-card .card-icon i {
        font-size: inherit !important;
    }

    /* Content occupies the same 70% side as mobile */
    .report-card .problem-carousel,
    .report-card .value-box {
        grid-column: 2 !important;
        grid-row: 1 !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
    }

    /* Problem card content area */
    .report-card .problem-carousel {
        position: relative !important;
        display: flex !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        padding: 18px 34px 38px 10px !important;
        overflow: hidden !important;
    }

    .report-card .problem-text-wrap {
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        display: block !important;
        text-align: left !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 4px 2px 24px !important;
    }

    .report-card #problemText {
        width: 100% !important;
        max-width: none !important;
        max-height: none !important;
        min-height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        overflow-wrap: anywhere !important;
        white-space: normal !important;
        text-align: left !important;
        font-size: 14px !important;
        line-height: 1.45 !important;
        font-weight: 600 !important;
    }

    /* Solution / Action content area */
    .report-card .value-box {
        display: block !important;
        text-align: left !important;
        padding: 18px 14px 38px 10px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    .report-card .value-text {
        width: 100% !important;
        max-height: none !important;
        min-height: 100% !important;
        display: block !important;
        overflow: visible !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
        font-size: 14px !important;
        line-height: 1.45 !important;
        font-weight: 600 !important;
        text-align: left !important;
    }

    /* Same mobile-style bottom labels */
    .report-card::before {
        position: absolute !important;
        left: 8px !important;
        bottom: 8px !important;
        z-index: 20 !important;
        padding: 7px 12px !important;
        border-radius: 7px !important;
        color: #fff !important;
        font-size: 13px !important;
        line-height: 1 !important;
        font-weight: 800 !important;
        letter-spacing: .2px !important;
        box-shadow: 0 5px 12px rgba(0,0,0,.14) !important;
        pointer-events: none !important;
    }

    .problem-card::before {
        content: "PROBLEM" !important;
        background: #ff3038 !important;
    }

    .solution-card::before {
        content: "SOLUTION" !important;
        background: #2454f4 !important;
    }

    .action-card::before {
        content: "ACTION" !important;
        background: #ffc52e !important;
        color: #202020 !important;
    }

    /* Desktop uses horizontal flow arrows between cards */
    .report-cards > .card-column:not(:last-child)::after {
        content: "→" !important;
        position: absolute !important;
        left: auto !important;
        right: -15px !important;
        bottom: 50% !important;
        transform: translateY(50%) !important;
        z-index: 30 !important;
        font-size: 28px !important;
        line-height: 1 !important;
        font-weight: 800 !important;
        color: #202020 !important;
        text-shadow: 0 2px 4px rgba(0,0,0,.12) !important;
        pointer-events: none !important;
    }

    /* Small carousel controls, same visual language */
    .report-card .carousel-btn {
        width: 26px !important;
        height: 26px !important;
        font-size: 12px !important;
        box-shadow: 0 4px 10px rgba(0,0,0,.14) !important;
    }

    .report-card .prev-btn {
        left: 2px !important;
    }

    .report-card .next-btn {
        right: 2px !important;
    }

    .report-card .carousel-dots {
        bottom: 6px !important;
        gap: 3px !important;
    }

    .report-card .carousel-dot {
        width: 5px !important;
        height: 5px !important;
    }

    .report-card .carousel-dot.active {
        width: 14px !important;
    }

    /* Bottom Truth/hand image remains visible and centered */
    .final-truth-image-wrap {
        width: 100% !important;
        min-height: 90px !important;
        margin: 8px auto 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .final-truth-image {
        width: 90px !important;
        height: 90px !important;
        max-width: 90px !important;
        max-height: 90px !important;
        object-fit: contain !important;
        display: block !important;
    }

    /* Change-maker/search section follows the same compact card language */
    .people-report-heading-box + .cm-search-panel,
    .cm-search-panel {
        width: 100% !important;
    }

    .cm-filter-toolbar {
        padding: 7px !important;
        border-radius: 9px !important;
    }

    .cm-groups-wrap {
        width: 100% !important;
        max-height: 52vh !important;
        padding-bottom: 4px !important;
    }

    .truth-democracy-card {
        padding: 9px 8px !important;
    }
}

/* Medium desktop: slightly smaller cards/text */
@media screen and (min-width: 769px) and (max-width: 1100px) {

    .people-report-content {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .report-cards {
        gap: 10px !important;
    }

    .report-cards > .card-column {
        width: calc((100% - 20px) / 3) !important;
        max-width: calc((100% - 20px) / 3) !important;
        flex-basis: calc((100% - 20px) / 3) !important;
        height: 320px !important;
    }

    .report-card .card-icon {
        font-size: 52px !important;
    }

    .report-card #problemText,
    .report-card .value-text {
        font-size: 12px !important;
    }

    .report-card::before {
        left: 6px !important;
        bottom: 6px !important;
        padding: 6px 10px !important;
        font-size: 12px !important;
    }
}

/* Large desktop */
@media screen and (min-width: 1400px) {

    .report-cards > .card-column {
        height: 400px !important;
    }

    .report-card .card-icon {
        font-size: 86px !important;
    }

    .report-card #problemText,
    .report-card .value-text {
        font-size: 15px !important;
    }
}


/* =========================================================
   FINAL WEB = MOBILE DESIGN
   Desktop/Web now uses the same visual layout as mobile.
   Mobile styles remain unchanged.
   ========================================================= */
@media screen and (min-width: 769px) {

    /* Keep the report compact and centered like mobile */
    .people-report-content {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 10px 18px 16px !important;
        background: #fff !important;
        overflow: visible !important;
    }

    .people-report-heading-box {
        width: min(80%, 760px) !important;
        margin: 12px auto 16px !important;
        padding: 10px 12px !important;
        border: 1px solid #172747 !important;
        border-radius: 10px !important;
        background: #172747 !important;
        box-shadow: 0 3px 10px rgba(23, 39, 71, .10) !important;
        text-align: center !important;
    }

    .people-report-title {
        margin: 0 !important;
        font-size: 25px !important;
        line-height: 1.15 !important;
        font-weight: 800 !important;
        text-align: center !important;
        color: #fff !important;
    }

    /* Web only: keep mobile card DESIGN, but show all 3 cards side by side */
    .report-cards {
        width: 100% !important;
        max-width: 1180px !important;
        margin: 0 auto !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        gap: 14px !important;
        --bs-gutter-x: 0 !important;
        --bs-gutter-y: 0 !important;
        overflow: visible !important;
    }

    .report-cards > .card-column {
        position: relative !important;
        width: calc((100% - 28px) / 3) !important;
        max-width: calc((100% - 28px) / 3) !important;
        flex: 0 0 calc((100% - 28px) / 3) !important;
        height: 360px !important;
        min-height: 360px !important;
        padding: 0 !important;
        display: flex !important;
        overflow: visible !important;
    }

    .report-card {
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        display: block !important;
        transform: none !important;
    }

    .report-card:hover {
        transform: none !important;
    }

    /* Hide desktop title row exactly like mobile */
    .report-card .card-header {
        display: none !important;
    }

    /* 30% icon area + 70% content area */
    .report-card .card-content {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: grid !important;
        grid-template-columns: 30% minmax(0, 70%) !important;
        grid-template-rows: 100% !important;
        align-items: stretch !important;
        overflow: hidden !important;
        border: 2px solid #000 !important;
        border-radius: 10px !important;
    }

    .report-card .card-icon {
        position: relative !important;
        top: -16px !important;
        left: -11px !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 0 !important;
        background: transparent !important;
        font-size: 64px !important;
        line-height: 1 !important;
        z-index: 2 !important;
        padding: 4px !important;
    }

    .report-card .card-icon i {
        font-size: inherit !important;
    }

    .report-card .problem-carousel,
    .report-card .value-box {
        grid-column: 2 !important;
        grid-row: 1 !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
    }

    /* Problem content is hidden on mobile, so keep it hidden on web too */
    .problem-card .problem-carousel {
        display: none !important;
    }

    .report-card .value-box {
        display: block !important;
        text-align: left !important;
        padding: 14px 12px 30px 8px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        scrollbar-width: thin;
    }

    .report-card .value-text {
        width: 100% !important;
        max-height: none !important;
        min-height: 100% !important;
        display: block !important;
        overflow: visible !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
        font-size: 14px !important;
        line-height: 1.45 !important;
        font-weight: 600 !important;
        text-align: left !important;
    }

    /* Same mobile labels */
    .report-card::before {
        position: absolute !important;
        left: 5px !important;
        bottom: 5px !important;
        z-index: 20 !important;
        padding: 7px 12px !important;
        border-radius: 7px !important;
        color: #fff !important;
        font-size: 14px !important;
        line-height: 1.1 !important;
        font-weight: 800 !important;
        letter-spacing: .2px !important;
        box-shadow: 0 5px 12px rgba(0,0,0,.14) !important;
        pointer-events: none !important;
    }

    .problem-card::before {
        content: "PROBLEM" !important;
        background: #ff3038 !important;
    }

    .solution-card::before {
        content: "SOLUTION" !important;
        background: #2454f4 !important;
    }

    .action-card::before {
        content: "ACTION" !important;
        background: #ffc52e !important;
        color: #202020 !important;
    }

    /* Web flow: arrows between side-by-side cards */
    .report-cards > .card-column:not(:last-child)::after {
        content: "→" !important;
        position: absolute !important;
        left: auto !important;
        right: -18px !important;
        top: 50% !important;
        bottom: auto !important;
        transform: translateY(-50%) !important;
        z-index: 30 !important;
        font-size: 28px !important;
        line-height: 1 !important;
        font-weight: 800 !important;
        color: #202020 !important;
        text-shadow: 0 2px 4px rgba(0,0,0,.12) !important;
        pointer-events: none !important;
    }

    /* Keep the hand image compact and centered like mobile */
    .btn-log {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 6px 0 8px !important;
        background: #b87612 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        overflow: hidden !important;
    }

    .btn-log > a,
    .btn-log .people-project-btn {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        overflow: visible !important;
    }

    .people-project-image {
        width: 105px !important;
        height: auto !important;
        max-width: 105px !important;
        max-height: none !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: block !important;
        object-fit: contain !important;
        object-position: center center !important;
        animation: none !important;
        transform: none !important;
        transition: none !important;
    }
}



/* =========================================================
   FINAL DESKTOP CARD HEADER FIX
   - Cards remain side-by-side on web
   - Icon + card name stay at the TOP of each card
   - Bottom mobile-style labels are removed on desktop only
   - Mobile view remains unchanged
   ========================================================= */
@media screen and (min-width: 769px) {

    .report-cards {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        gap: 22px !important;
    }

    .report-cards > .card-column {
        width: calc((100% - 44px) / 3) !important;
        max-width: calc((100% - 44px) / 3) !important;
        flex: 0 0 calc((100% - 44px) / 3) !important;
        min-height: 360px !important;
        height: 360px !important;
    }

    .report-card {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        height: 80% !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 2px solid #000 !important;
        border-radius: 16px !important;
    }

    /* Show original header on desktop */
    .report-card .card-header {
        position: relative !important;
        z-index: 5 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        flex: 0 0 auto !important;
        min-height: 92px !important;
        margin: 0 !important;
        padding: 14px 16px 14px 92px !important;
        border: 0 !important;
        background: transparent !important;
    }

    /* Number not needed when icon + title are used at top */
    .report-card .card-number {
        display: none !important;
    }

    .report-card .card-title,
    .report-card .card-header h2 {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #172033 !important;
        font-size: 24px !important;
        line-height: 1.1 !important;
        font-weight: 800 !important;
        text-transform: uppercase !important;
    }

    /* Content fills remaining card area */
    .report-card .card-content {
        position: relative !important;
        flex: 1 1 auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        border: 0 !important;
        border-radius: 0 !important;
        overflow: hidden !important;
    }

    /* Icon is placed in the top-left header area */
    .report-card .card-icon {
        position: absolute !important;
        top: 14px !important;
        left: 18px !important;
        width: 60px !important;
        height: 60px !important;
        min-width: 60px !important;
        min-height: 60px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 12px !important;
        background: transparent !important;
        font-size: 52px !important;
        line-height: 1 !important;
        z-index: 20 !important;
        transform: none !important;
    }

    .report-card .card-icon i {
        font-size: 48px !important;
        line-height: 1 !important;
    }

    /* Existing content now starts below the top header */
    .report-card .problem-carousel,
    .report-card .value-box {
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 18px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    /* Problem content is intentionally empty in the supplied HTML */
    .problem-card .problem-carousel {
        display: none !important;
    }

    .report-card .value-text {
        width: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        font-size: 15px !important;
        line-height: 1.5 !important;
        text-align: left !important;
    }

    /* Remove duplicate bottom labels on desktop */
    .report-card::before {
        content: none !important;
        display: none !important;
    }

    /* Keep arrows centered between the three web cards */
    .report-cards > .card-column:not(:last-child)::after {
        content: "→" !important;
        position: absolute !important;
        right: -22px !important;
        left: auto !important;
        top: 50% !important;
        bottom: auto !important;
        transform: translateY(-50%) !important;
        z-index: 40 !important;
        font-size: 28px !important;
        line-height: 1 !important;
        font-weight: 800 !important;
        color: #202020 !important;
    }
}



/* =========================================================
   FINAL WEB FIX - ICON + TITLE IN THE SAME TOP ROW
   Desktop only. Mobile design remains unchanged.
   ========================================================= */

/* Desktop-only duplicate header icon is hidden everywhere by default */
.desktop-card-icon {
    display: none;
}

@media screen and (min-width: 769px) {

    /* Header becomes one clean row: ICON + TITLE */
    .report-card .card-header {
        position: relative !important;
        z-index: 30 !important;
        width: 100% !important;
        min-height: 88px !important;
        height: 88px !important;
        margin: 0 !important;
        padding: 12px 18px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 14px !important;
        flex: 0 0 88px !important;
        border: 0 !important;
        background: transparent !important;
        overflow: visible !important;
    }

    /* Old number is not required */
    .report-card .card-number {
        display: none !important;
    }

    /* New icon placed directly inside the header */
    .desktop-card-icon {
        width: 58px !important;
        height: 58px !important;
        min-width: 58px !important;
        flex: 0 0 58px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        font-size: 48px !important;
        line-height: 1 !important;
    }

    .desktop-card-icon i {
        font-size: 48px !important;
        line-height: 1 !important;
    }

    .desktop-action-icon,
    .desktop-action-icon i {
        color: rgb(116, 192, 252) !important;
    }

    /* Title now sits immediately beside the icon */
    .report-card .card-title,
    .report-card .card-header h2 {
        flex: 0 1 auto !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        color: #102344 !important;
        font-size: 25px !important;
        line-height: 1.1 !important;
        font-weight: 800 !important;
        text-align: left !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
    }

    /* Hide the original content icon only on web so it is not duplicated */
    .report-card .card-content > .card-icon {
        display: none !important;
    }

    /* Remaining card body starts immediately below the top header */
    .report-card .card-content {
        position: relative !important;
        flex: 1 1 auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        overflow: hidden !important;
        border: 0 !important;
        border-radius: 0 !important;
    }

    .report-card .value-box,
    .report-card .problem-carousel {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 16px 18px 18px !important;
    }

    /* Keep the 3 web cards side-by-side */
    .report-cards {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        gap: 22px !important;
    }

    .report-cards > .card-column {
        width: calc((100% - 44px) / 3) !important;
        max-width: calc((100% - 44px) / 3) !important;
        flex: 0 0 calc((100% - 44px) / 3) !important;
    }
}

/* Extracted from procednew2.php - style block 2 */
/* =========================================================
   SYSTEMIC CHANGE - ACTIVE SURVEY LIVE DATA
   Solution / Action: scrollbar removed + horizontal web arrows.
   Problem remains unchanged.
   ========================================================= */

.systemic-value-box {
    align-items: stretch !important;
    justify-content: stretch !important;
    height: 350px !important;
    max-height: 350px !important;
    min-height: 0 !important;
    overflow: hidden !important;
    position: relative !important;
}

/* Only Solution + Action use arrow navigation */
.systemic-arrow-box {
    padding: 0 42px 0 2px !important;
}

/* Completely remove the visible scrollbar */
.systemic-arrow-box .systemic-value-text {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    overflow-y: hidden !important;
    overflow-x: hidden !important;
    text-align: left !important;
    padding: 4px 4px 28px 2px !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    scroll-behavior: smooth;
}

.systemic-arrow-box .systemic-value-text::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Arrow controls - desktop/web: right side, horizontal */
.systemic-nav-btn {
    position: absolute !important;
    top: 50% !important;
    width: 30px !important;
    height: 30px !important;
    border: 0 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    z-index: 20 !important;
    cursor: pointer !important;
    color: #fff !important;
    font-size: 12px !important;
    line-height: 1 !important;
    box-shadow: 0 4px 10px rgba(0,0,0,.16) !important;
    transition: transform .18s ease, opacity .18s ease, box-shadow .18s ease !important;
}

.systemic-nav-btn:hover {
    transform: translateY(-50%) scale(1.08) !important;
    box-shadow: 0 6px 14px rgba(0,0,0,.20) !important;
}

.systemic-nav-btn:active {
    transform: translateY(-50%) scale(.94) !important;
}

.systemic-nav-prev {
    right: 43px !important;
    left: auto !important;
    top: 50% !important;
}

.systemic-nav-next {
    right: 8px !important;
    left: auto !important;
    top: 50% !important;
}

.solution-card .systemic-nav-btn {
    background: #4ba548 !important;
}

.action-card .systemic-nav-btn {
    background: #e69a25 !important;
}

/* Disable arrows when there is no more data */
.systemic-nav-btn.is-disabled {
    opacity: .28 !important;
    cursor: default !important;
    pointer-events: none !important;
}

.systemic-list {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.systemic-list li {
    width: 100%;
    margin: 0 0 10px;
    padding: 10px 46px 10px 10px;
    position: relative;
    border-radius: 9px;
    background: rgba(255, 255, 255, .54);
    border: 1px solid rgba(23, 32, 51, .08);
    line-height: 1.38;
}

.systemic-list li:last-child {
    margin-bottom: 0;
}

.systemic-question-no {
    display: block;
    margin: 0 0 4px;
    color: #5b6472;
    font-size: 10px;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: .35px;
    text-transform: uppercase;
}

.systemic-question-title {
    display: block;
    margin: 0 0 4px;
    color: #172033;
    font-size: 12px;
    line-height: 1.3;
    font-weight: 800;
}

.systemic-label {
    display: block;
    color: #172033;
    overflow-wrap: anywhere;
    word-break: normal;
}

.systemic-count {
    position: absolute;
    top: 9px;
    right: 8px;
    min-width: 30px;
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(23, 32, 51, .10);
    color: #172033;
    font-size: 11px;
    line-height: 1.25;
    font-weight: 900;
    text-align: center;
}

.systemic-count-label {
    display: block;
    margin-top: 2px;
    color: #687386;
    font-size: 9px;
    font-weight: 700;
}

.systemic-empty {
    display: flex;
    min-height: 100%;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #6b7280;
    font-weight: 600;
    padding: 20px;
}

/* Mobile: arrows move to the left side, data stays on the right */
@media (max-width: 767px) {
    .systemic-value-box {
        height: 250px !important;
        max-height: 250px !important;
    }

    .systemic-arrow-box {
        padding: 0 5px 0 38px !important;
    }

    .systemic-arrow-box .systemic-value-text {
        padding: 3px 5px 24px 1px !important;
        font-size: 11px !important;
        line-height: 1.35 !important;
    }

    .systemic-nav-btn {
        left: 5px !important;
        right: auto !important;
        width: 24px !important;
        height: 24px !important;
        font-size: 10px !important;
        transform: none !important;
    }

    .systemic-nav-btn:hover {
        transform: scale(1.08) !important;
    }

    .systemic-nav-prev {
        top: calc(50% - 30px) !important;
    }

    .systemic-nav-next {
        top: calc(50% + 6px) !important;
    }

    .systemic-nav-prev {
        top: calc(50% - 30px) !important;
    }

    .systemic-nav-next {
        top: calc(50% + 6px) !important;
    }

    .systemic-list li {
        margin-bottom: 7px;
        padding: 8px 38px 8px 7px;
    }

    .systemic-question-title {
        font-size: 10px;
    }

    .systemic-count {
        top: 7px;
        right: 6px;
        min-width: 25px;
        padding: 2px 5px;
        font-size: 9px;
    }

    .systemic-count-label {
        font-size: 8px;
    }
}

/* Small mobile */
@media (max-width: 390px) {
    .systemic-arrow-box {
        padding-left: 34px !important;
    }

    .systemic-nav-btn {
        left: 4px !important;
        right: auto !important;
        width: 22px !important;
        height: 22px !important;
        font-size: 9px !important;
    }
}

/* =========================================================
   SOLUTION / ACTION ARROW NAVIGATION
   One item moves per arrow click.
   No scrollbar is shown.
   ========================================================= */
.systemic-arrow-box .systemic-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.systemic-arrow-box .systemic-list li {
    flex: 0 0 auto;
}

@media (max-width: 767px) {
    .systemic-arrow-box .systemic-list {
        gap: 7px;
    }
}

/* Extracted from procednew2.php - style block 3 */
/* =========================================================
   FINAL WEB UPDATE
   SOLUTION + ACTION ARROWS
   Move both navigation arrows to the TOP-RIGHT.
   Mobile positioning remains unchanged.
   ========================================================= */
@media (min-width: 768px) {

    .systemic-arrow-box {
        position: relative !important;
        padding-top: 42px !important;
        padding-right: 42px !important;
    }

    .systemic-arrow-box .systemic-nav-btn {
        top: 10px !important;
        bottom: auto !important;
        transform: none !important;
        width: 30px !important;
        height: 30px !important;
    }

    .systemic-arrow-box .systemic-nav-btn:hover {
        transform: scale(1.08) !important;
    }

    .systemic-arrow-box .systemic-nav-btn:active {
        transform: scale(.94) !important;
    }

    .systemic-arrow-box .systemic-nav-prev {
        right: 43px !important;
        left: auto !important;
        top: 10px !important;
    }

    .systemic-arrow-box .systemic-nav-next {
        right: 8px !important;
        left: auto !important;
        top: 10px !important;
    }
}

/* Extracted from procednew2.php - style block 4 */
/* =========================================================
   FINAL MOBILE FIX - SHOW BOTH SOLUTION / ACTION ARROWS
   Both UP and DOWN arrows remain visible on mobile.
   ========================================================= */
@media screen and (max-width: 767px) {

    .systemic-arrow-box {
        position: relative !important;
        padding-left: 36px !important;
        padding-right: 5px !important;
        overflow: hidden !important;
    }

    .systemic-arrow-box .systemic-nav-btn {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        left: 4px !important;
        right: auto !important;
        width: 24px !important;
        height: 24px !important;
        margin: 0 !important;
        z-index: 50 !important;
        transform: none !important;
        pointer-events: auto !important;
    }

    /* UP arrow */
    .systemic-arrow-box .systemic-nav-prev {
        top: calc(50% - 30px) !important;
        bottom: auto !important;
    }

    /* DOWN arrow */
    .systemic-arrow-box .systemic-nav-next {
        top: calc(50% + 6px) !important;
        bottom: auto !important;
    }

    /* Keep both arrows visible even when JS marks one as disabled */
    .systemic-arrow-box .systemic-nav-btn.is-disabled {
        visibility: visible !important;
        opacity: .45 !important;
        pointer-events: auto !important;
    }
}

@media screen and (max-width: 390px) {
    .systemic-arrow-box {
        padding-left: 34px !important;
    }

    .systemic-arrow-box .systemic-nav-btn {
        left: 4px !important;
        width: 22px !important;
        height: 22px !important;
        font-size: 9px !important;
    }

    .systemic-arrow-box .systemic-nav-prev {
        top: calc(50% - 28px) !important;
    }

    .systemic-arrow-box .systemic-nav-next {
        top: calc(50% + 5px) !important;
    }
}

/* Extracted from procednew2.php - style block 5 */
/* =========================================================
   FINAL SOLUTION / ACTION CAROUSEL
   One box per item.
   1st click = 2nd item.
   2nd click = 3rd item.
   Arrows stay BELOW the value box, LEFT + RIGHT.
   Works on WEB + MOBILE.
   ========================================================= */

.systemic-arrow-box {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 350px !important;
    max-height: 350px !important;
    min-height: 0 !important;
    padding: 8px 8px 48px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* The visible area acts as the viewport */
.systemic-arrow-box .systemic-value-text {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: block !important;
    position: relative !important;
}

/* Horizontal carousel */
.systemic-arrow-box .systemic-list {
    width: 100% !important;
    height: 40% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    transform: translateX(0);
    transition: transform .30s ease !important;
}

/* Every solution/action becomes one separate box */
.systemic-arrow-box .systemic-list > li {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 33% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 18px 52px 18px 18px !important;
    position: relative !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.62) !important;
    border: 1px solid rgba(23,32,51,.10) !important;
    overflow: hidden !important;
}

/* Text inside each item box */
.systemic-arrow-box .systemic-list > li .systemic-label {
    display: block !important;
    width: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
}

/* User count badge */
.systemic-arrow-box .systemic-list > li .systemic-count {
    top: 12px !important;
    right: 12px !important;
}

/* Arrows BELOW the value box */
.systemic-arrow-box .systemic-nav-btn {
    position: absolute !important;
    top: auto !important;
    bottom: 8px !important;
    width: 30px !important;
    height: 30px !important;
    border: 0 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 50 !important;
    cursor: pointer !important;
    color: #fff !important;
    font-size: 12px !important;
    line-height: 1 !important;
    box-shadow: 0 4px 10px rgba(0,0,0,.16) !important;
    transform: none !important;
    transition: transform .18s ease, opacity .18s ease !important;
}

.systemic-arrow-box .systemic-nav-btn:hover {
    transform: scale(1.08) !important;
}

.systemic-arrow-box .systemic-nav-btn:active {
    transform: scale(.94) !important;
}

/* LEFT arrow */
.systemic-arrow-box .systemic-nav-prev {
    left: 8px !important;
    right: auto !important;
}

/* RIGHT arrow */
.systemic-arrow-box .systemic-nav-next {
    left: auto !important;
    right: 8px !important;
}

/* Keep arrows usable at first/last item */
.systemic-arrow-box .systemic-nav-btn.is-disabled {
    opacity: .35 !important;
    pointer-events: none !important;
}

/* Solution arrows */
.solution-card .systemic-nav-btn {
    background: #4ba548 !important;
}

/* Action arrows */
.action-card .systemic-nav-btn {
    background: #e69a25 !important;
}

/* Hide arrows when only one item exists */
.systemic-arrow-box.single-item .systemic-nav-btn {
    visibility: hidden !important;
}

/* Empty state */
.systemic-arrow-box .systemic-empty {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* MOBILE */
@media (max-width: 767px) {
    .systemic-arrow-box {
        width: 100% !important;
        height: 250px !important;
        max-height: 250px !important;
        padding: 6px 6px 42px !important;
    }

    .systemic-arrow-box .systemic-list > li {
        padding: 12px 42px 12px 12px !important;
        border-radius: 10px !important;
    }

    .systemic-arrow-box .systemic-list > li .systemic-count {
        top: 21px !important;
        right: 8px !important;
        min-width: 26px !important;
        padding: 2px 5px !important;
        font-size: 9px !important;
    }

    .systemic-arrow-box .systemic-nav-btn {
        bottom: 5px !important;
        width: 26px !important;
        height: 26px !important;
        font-size: 10px !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
    }

    .systemic-arrow-box .systemic-nav-prev {
        left: 6px !important;
    }

    .systemic-arrow-box .systemic-nav-next {
        right: 6px !important;
    }

    .systemic-arrow-box .systemic-value-text {
        font-size: 11px !important;
        line-height: 1.35 !important;
    }
}

/* SMALL MOBILE */
@media (max-width: 390px) {
    .systemic-arrow-box {
        height: 235px !important;
        max-height: 235px !important;
        padding-bottom: 40px !important;
    }

    .systemic-arrow-box .systemic-list > li {
        padding: 10px 38px 10px 10px !important;
    }

    .systemic-arrow-box .systemic-nav-btn {
        width: 23px !important;
        height: 23px !important;
        bottom: 5px !important;
        font-size: 9px !important;
    }

    .systemic-arrow-box .systemic-nav-prev {
        left: 5px !important;
    }

    .systemic-arrow-box .systemic-nav-next {
        right: 5px !important;
    }
}

/* Extracted from procednew2.php - style block 6 */
/* =========================================================
   FINAL MOBILE ARROW FIX
   Solution + Action
   LEFT + RIGHT arrows below the data box.
   Works on all mobile widths.
   ========================================================= */

@media screen and (max-width: 767px) {

    .systemic-arrow-box {
        position: relative !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        padding-bottom: 48px !important;
    }

    .systemic-arrow-box .systemic-value-text {
        position: relative !important;
        width: 100% !important;
        height: calc(100% - 42px) !important;
        max-height: calc(100% - 42px) !important;
        overflow: hidden !important;
        z-index: 1 !important;
    }

    .systemic-arrow-box .systemic-nav-btn {
        position: absolute !important;
        top: auto !important;
        bottom: 7px !important;

        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;

        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;

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

        border: 0 !important;
        border-radius: 50% !important;
        padding: 0 !important;
        margin: 0 !important;

        z-index: 9999 !important;
        pointer-events: auto !important;
        transform: none !important;

        color: #fff !important;
        font-size: 11px !important;
        line-height: 1 !important;
        box-shadow: 0 4px 10px rgba(0,0,0,.18) !important;
    }

    /* LEFT arrow */
    .systemic-arrow-box .systemic-nav-prev {
        left: 8px !important;
        right: auto !important;
    }

    /* RIGHT arrow */
    .systemic-arrow-box .systemic-nav-next {
        right: 8px !important;
        left: auto !important;
    }

    /* Disabled = still visible, but slightly faded */
    .systemic-arrow-box .systemic-nav-btn.is-disabled {
        visibility: visible !important;
        display: flex !important;
        opacity: .45 !important;
        pointer-events: auto !important;
    }

    /* Hide only when there is genuinely one/no item */
    .systemic-arrow-box.single-item .systemic-nav-btn {
        visibility: hidden !important;
        display: none !important;
    }

    .solution-card .systemic-nav-btn {
        background: #4ba548 !important;
    }

    .action-card .systemic-nav-btn {
        background: #e69a25 !important;
    }
}

/* Extra-small mobile */
@media screen and (max-width: 390px) {

    .systemic-arrow-box {
        padding-bottom: 44px !important;
    }

    .systemic-arrow-box .systemic-nav-btn {
        bottom: 6px !important;
        width: 25px !important;
        height: 25px !important;
        min-width: 25px !important;
        min-height: 25px !important;
        font-size: 10px !important;
    }

    .systemic-arrow-box .systemic-nav-prev {
        left: 6px !important;
    }

    .systemic-arrow-box .systemic-nav-next {
        right: 6px !important;
    }
}

/* Extracted from procednew2.php - style block 7 */
/* =========================================================
   MOBILE-ONLY ARROW VISIBILITY FIX
   - Keeps desktop/web unchanged
   - Keeps arrows inside the visible mobile card
   - Shows disabled arrows even when there is only one item
   ========================================================= */
@media screen and (max-width: 767px) {

    /* Use the actual available mobile-card height instead of a fixed 250px. */
    .systemic-arrow-box {
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        min-height: 0 !important;
        padding: 6px 42px 6px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .systemic-arrow-box .systemic-value-text {
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    /* Keep both arrows inside the visible part of the card. */
    .systemic-arrow-box .systemic-nav-btn,
    .systemic-arrow-box.single-item .systemic-nav-btn {
        position: absolute !important;
        top: 50% !important;
        bottom: auto !important;
        display: inline-flex !important;
        visibility: visible !important;
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        min-height: 30px !important;
        margin: 0 !important;
        padding: 0 !important;
        align-items: center !important;
        justify-content: center !important;
        border: 0 !important;
        border-radius: 50% !important;
        z-index: 99999 !important;
        transform: translateY(-50%) !important;
        font-size: 11px !important;
        line-height: 1 !important;
        box-shadow: 0 4px 10px rgba(0,0,0,.18) !important;
    }

    .systemic-arrow-box .systemic-nav-prev {
        left: 6px !important;
        right: auto !important;
    }

    .systemic-arrow-box .systemic-nav-next {
        right: 6px !important;
        left: auto !important;
    }

    /* First/last/one-item state: visible but intentionally disabled. */
    .systemic-arrow-box .systemic-nav-btn.is-disabled,
    .systemic-arrow-box.single-item .systemic-nav-btn {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: .42 !important;
        pointer-events: none !important;
    }

    .solution-card .systemic-nav-btn {
        background: #4ba548 !important;
        color: #fff !important;
    }

    .action-card .systemic-nav-btn {
        background: #e69a25 !important;
        color: #fff !important;
    }
}

@media screen and (max-width: 390px) {
    .systemic-arrow-box {
        padding-left: 38px !important;
        padding-right: 38px !important;
    }

    .systemic-arrow-box .systemic-nav-btn,
    .systemic-arrow-box.single-item .systemic-nav-btn {
        width: 27px !important;
        height: 27px !important;
        min-width: 27px !important;
        min-height: 27px !important;
        font-size: 10px !important;
    }

    .systemic-arrow-box .systemic-nav-prev {
        left: 5px !important;
    }

    .systemic-arrow-box .systemic-nav-next {
        right: 5px !important;
    }
}

/* Extracted from procednew2.php - style block 8 */
/* =========================================================
   FINAL MOBILE-ONLY SOLUTION / ACTION FIX
   - Desktop/Web unchanged
   - White content panel fills the available area
   - Previous/Next arrows stay at the bottom
   - Only the selected content changes on mobile
   ========================================================= */
@media screen and (max-width: 767px) {

    /* Reserve a fixed strip at the bottom only for navigation. */
    .solution-card .systemic-arrow-box,
    .action-card .systemic-arrow-box {
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        min-height: 0 !important;
        padding: 6px 6px 44px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    /* The white panel itself never moves. */
    .solution-card .systemic-arrow-box .systemic-value-text,
    .action-card .systemic-arrow-box .systemic-value-text {
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 1px solid rgba(23, 32, 51, .10) !important;
        border-radius: 10px !important;
        background: #fff !important;
        box-sizing: border-box !important;
    }

    .solution-card .systemic-arrow-box .systemic-list,
    .action-card .systemic-arrow-box .systemic-list {
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        transform: none !important;
        transition: none !important;
        overflow: hidden !important;
    }

    /* One item occupies the complete white panel. */
    .solution-card .systemic-arrow-box .systemic-list > li,
    .action-card .systemic-arrow-box .systemic-list > li {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        margin: 0 !important;
        padding: 26px 42px 12px 12px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
        align-items: flex-start !important;
        justify-content: center !important;
        overflow: hidden !important;
    }

    .solution-card .systemic-arrow-box .systemic-list > li .systemic-label,
    .action-card .systemic-arrow-box .systemic-list > li .systemic-label {
        width: 100% !important;
        max-height: 100% !important;
        overflow: hidden !important;
    }

    /* Both arrows are always in the bottom strip. */
    .solution-card .systemic-arrow-box .systemic-nav-btn,
    .action-card .systemic-arrow-box .systemic-nav-btn,
    .solution-card .systemic-arrow-box.single-item .systemic-nav-btn,
    .action-card .systemic-arrow-box.single-item .systemic-nav-btn {
        position: absolute !important;
        top: auto !important;
        bottom: 7px !important;
        display: inline-flex !important;
        visibility: visible !important;
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        min-height: 30px !important;
        margin: 0 !important;
        padding: 0 !important;
        align-items: center !important;
        justify-content: center !important;
        border: 0 !important;
        border-radius: 50% !important;
        z-index: 99999 !important;
        transform: none !important;
        color: #fff !important;
        font-size: 12px !important;
        line-height: 1 !important;
        box-shadow: 0 4px 10px rgba(0,0,0,.18) !important;
    }

    .solution-card .systemic-arrow-box .systemic-nav-prev,
    .action-card .systemic-arrow-box .systemic-nav-prev {
        left: 8px !important;
        right: auto !important;
    }

    .solution-card .systemic-arrow-box .systemic-nav-next,
    .action-card .systemic-arrow-box .systemic-nav-next {
        right: 8px !important;
        left: auto !important;
    }

    /* White arrow icon stays fully visible. */
    .solution-card .systemic-arrow-box .systemic-nav-btn i,
    .action-card .systemic-arrow-box .systemic-nav-btn i {
        display: block !important;
        color: #fff !important;
        opacity: 1 !important;
        font-size: 12px !important;
        line-height: 1 !important;
    }

    .solution-card .systemic-nav-btn {
        background: #4ba548 !important;
    }

    .action-card .systemic-nav-btn {
        background: #e69a25 !important;
    }

    /* At first/last item keep the arrow visible, only disable the click. */
    .solution-card .systemic-arrow-box .systemic-nav-btn.is-disabled,
    .action-card .systemic-arrow-box .systemic-nav-btn.is-disabled,
    .solution-card .systemic-arrow-box.single-item .systemic-nav-btn,
    .action-card .systemic-arrow-box.single-item .systemic-nav-btn {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: .50 !important;
        pointer-events: none !important;
    }
}

@media screen and (max-width: 390px) {
    .solution-card .systemic-arrow-box,
    .action-card .systemic-arrow-box {
        padding: 5px 5px 40px !important;
    }

    .solution-card .systemic-arrow-box .systemic-nav-btn,
    .action-card .systemic-arrow-box .systemic-nav-btn,
    .solution-card .systemic-arrow-box.single-item .systemic-nav-btn,
    .action-card .systemic-arrow-box.single-item .systemic-nav-btn {
        bottom: 6px !important;
        width: 27px !important;
        height: 27px !important;
        min-width: 27px !important;
        min-height: 27px !important;
        font-size: 11px !important;
    }

    .solution-card .systemic-arrow-box .systemic-nav-prev,
    .action-card .systemic-arrow-box .systemic-nav-prev {
        left: 6px !important;
    }

    .solution-card .systemic-arrow-box .systemic-nav-next,
    .action-card .systemic-arrow-box .systemic-nav-next {
        right: 6px !important;
    }
}



/* =========================================================
   FINAL WEB PROBLEM = MOBILE PROBLEM DESIGN
   - Problem card only
   - Same compact percentage panel as mobile
   - Truth in Our Democracy stays below percentage
   - Democracy Deficit stays below white panel
   - Solution / Action and their arrows remain unchanged
   ========================================================= */
@media screen and (min-width: 768px) {

    /* Match the Problem mobile split on web too. */
    .problem-card .card-content {
        grid-template-columns: 26% minmax(0, 74%) !important;
        grid-template-rows: 100% !important;
        align-items: stretch !important;
        overflow: hidden !important;
    }

    .problem-card .card-icon {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 5px !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
    }

    /* Same structure as mobile:
       compact white percentage panel + Democracy Deficit below. */
    .problem-card .problem-percentage-box {
        grid-column: 2 !important;
        grid-row: 1 !important;
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 7px 5px 6px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 5px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
    }

    .problem-card .problem-percentage-wrap {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: 100% !important;
        height: auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: none !important;
        max-height: none !important;
        flex: 1 1 auto !important;
        margin: 0 !important;
        padding: 7px 8px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        background: #fff !important;
        border: 1px solid rgba(23, 32, 51, .10) !important;
        border-radius: 12px !important;
        box-shadow: 0 2px 7px rgba(23, 32, 51, .06) !important;
        transform: none !important;
        transition: none !important;
    }

    .problem-card .problem-percentage-wrap .people-report-percentage {
        width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        text-align: center !important;
        color: #df2b21 !important;
        font-size: clamp(42px, 4vw, 60px) !important;
        font-weight: 800 !important;
        line-height: .95 !important;
        white-space: nowrap !important;
    }

    .problem-card .problem-desktop-caption {
        display: block !important;
        width: 100% !important;
        margin: 5px 0 0 !important;
        padding: 0 !important;
        color: #14274a !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        line-height: 1.15 !important;
        text-align: center !important;
    }

    .problem-card .problem-mobile-title {
        display: block !important;
        width: 100% !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        padding: 1px 2px 0 !important;
        color: #14274a !important;
        font-size: 15px !important;
        font-weight: 800 !important;
        line-height: 1.1 !important;
        text-align: center !important;
        white-space: nowrap !important;
    }
}

/* Extracted from procednew2.php - style block 9 */
/* =========================================================
   FINAL MOBILE CONTENT LOCK - SOLUTION + ACTION ONLY
   This block MUST remain immediately before 
<style>
/* =========================================================
   FINAL MOBILE-ONLY SOLUTION / ACTION UPDATE
   - Full Solution / Action text inside the white panel
   - Larger readable content text
   - Original user badge removed from inside the white panel
   - User badge moved between Previous / Next arrows
   - Desktop / tablet design remains unchanged
   ========================================================= */
.systemic-mobile-count {
    display: none;
}

@media screen and (max-width: 767px) {

    /* Keep the right-side content area stable. */
    .solution-card .systemic-arrow-box,
    .action-card .systemic-arrow-box {
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    /* White content box: use maximum available area while keeping
       a small fixed navigation strip at the bottom. */
    .solution-card .systemic-arrow-box .systemic-value-text,
    .action-card .systemic-arrow-box .systemic-value-text {
        position: absolute !important;
        top: 5px !important;
        left: 5px !important;
        right: 5px !important;
        bottom: 48px !important;
        width: auto !important;
        height: auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        background: #fff !important;
        border: 1px solid rgba(23, 32, 51, .10) !important;
        border-radius: 12px !important;
        box-shadow: 0 2px 7px rgba(23, 32, 51, .06) !important;
        box-sizing: border-box !important;
    }

    .solution-card .systemic-arrow-box .systemic-list,
    .action-card .systemic-arrow-box .systemic-list {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        overflow: hidden !important;
    }

    /* Every active item can use the complete white box width.
       Vertical scrolling is enabled only if an unusually long value
       cannot fit, so text is never cut off. */
    .solution-card .systemic-arrow-box .systemic-list > li,
    .action-card .systemic-arrow-box .systemic-list > li {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 10px 12px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: thin !important;
    }

    /* Larger Solution / Action content. Remove the old 2-line clamp. */
    .solution-card .systemic-arrow-box .systemic-label,
    .action-card .systemic-arrow-box .systemic-label {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #172033 !important;
        font-family: Arial, Helvetica, sans-serif !important;
        font-size: 21px !important;
        font-weight: 700 !important;
        line-height: 1.30 !important;
        text-align: left !important;
        white-space: normal !important;
        overflow: visible !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
        -webkit-line-clamp: unset !important;
        -webkit-box-orient: initial !important;
    }

    /* Hide the old gray user circle from inside the white content box. */
    .solution-card .systemic-arrow-box .systemic-list > li .systemic-count,
    .action-card .systemic-arrow-box .systemic-list > li .systemic-count {
        display: none !important;
    }

    /* Choice text: fixed exactly in the middle of both arrows. */
    .solution-card .systemic-mobile-count,
    .action-card .systemic-mobile-count {
        position: absolute !important;
        left: 50% !important;
        right: auto !important;
        bottom: 7px !important;
        transform: translateX(-50%) !important;
        width: auto !important;
        height: 30px !important;
        min-width: 0 !important;
        min-height: 30px !important;
        margin: 0 !important;
        padding: 0 6px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        border-radius: 0 !important;
        background: transparent !important;
        border: 0 !important;
        color: #172033 !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
        z-index: 30 !important;
        pointer-events: none !important;
        white-space: nowrap !important;
    }

    .systemic-mobile-count-value {
        display: inline-block !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 12px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    .systemic-mobile-count-label {
        display: inline-block !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    /* Keep left/right arrows aligned with the centered users badge. */
    .solution-card .systemic-arrow-box .systemic-nav-btn,
    .action-card .systemic-arrow-box .systemic-nav-btn,
    .solution-card .systemic-arrow-box.single-item .systemic-nav-btn,
    .action-card .systemic-arrow-box.single-item .systemic-nav-btn {
        top: auto !important;
        bottom: 8px !important;
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        min-height: 30px !important;
        transform: none !important;
    }

    .solution-card .systemic-arrow-box .systemic-nav-prev,
    .action-card .systemic-arrow-box .systemic-nav-prev {
        left: 12px !important;
        right: auto !important;
    }

    .solution-card .systemic-arrow-box .systemic-nav-next,
    .action-card .systemic-arrow-box .systemic-nav-next {
        right: 12px !important;
        left: auto !important;
    }

    .solution-card .systemic-arrow-box .systemic-nav-btn:hover,
    .solution-card .systemic-arrow-box .systemic-nav-btn:focus,
    .solution-card .systemic-arrow-box .systemic-nav-btn:active,
    .action-card .systemic-arrow-box .systemic-nav-btn:hover,
    .action-card .systemic-arrow-box .systemic-nav-btn:focus,
    .action-card .systemic-arrow-box .systemic-nav-btn:active {
        top: auto !important;
        bottom: 8px !important;
        transform: none !important;
    }
}

@media screen and (max-width: 390px) {
    .solution-card .systemic-arrow-box .systemic-label,
    .action-card .systemic-arrow-box .systemic-label {
        font-size: 21px !important;
        line-height: 1.28 !important;
    }

    .solution-card .systemic-mobile-count,
    .action-card .systemic-mobile-count {
        width: auto !important;
        height: 28px !important;
        min-width: 0 !important;
        min-height: 28px !important;
        bottom: 6px !important;
        padding: 0 4px !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .systemic-mobile-count-value,
    .systemic-mobile-count-label {
        font-size: 11px !important;
    }

    .solution-card .systemic-arrow-box .systemic-nav-btn,
    .action-card .systemic-arrow-box .systemic-nav-btn {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        bottom: 8px !important;
    }
}

 Desktop / tablet >= 768px are untouched.
   ========================================================= */
@media screen and (max-width: 767px) {

    /* Give Solution/Action more room for the text on mobile. */
    .solution-card .card-content,
    .action-card .card-content {
        grid-template-columns: 26% minmax(0, 74%) !important;
        grid-template-rows: 100% !important;
        align-items: stretch !important;
        overflow: hidden !important;
    }

    .solution-card .card-icon,
    .action-card .card-icon {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 5px !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
    }

    /* Right side is a fixed viewport. Nothing inside can resize the card. */
    .solution-card .systemic-arrow-box,
    .action-card .systemic-arrow-box {
        grid-column: 2 !important;
        grid-row: 1 !important;
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
    }

    /* Full white content panel. Reserve a fixed 38px strip below it for arrows. */
    .solution-card .systemic-arrow-box .systemic-value-text,
    .action-card .systemic-arrow-box .systemic-value-text {
        position: absolute !important;
        top: 7px !important;
        left: 5px !important;
        right: 5px !important;
        bottom: 42px !important;
        width: auto !important;
        height: auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        background: #fff !important;
        border: 1px solid rgba(23, 32, 51, .10) !important;
        border-radius: 12px !important;
        box-shadow: 0 2px 7px rgba(23, 32, 51, .06) !important;
        z-index: 2 !important;
        transform: none !important;
        transition: none !important;
    }

    /* List and active item are absolute layers: content length cannot move the panel. */
    .solution-card .systemic-arrow-box .systemic-list,
    .action-card .systemic-arrow-box .systemic-list {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        display: block !important;
        overflow: hidden !important;
        transform: none !important;
        transition: none !important;
    }

    .solution-card .systemic-arrow-box .systemic-list > li,
    .action-card .systemic-arrow-box .systemic-list > li {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 10px 48px 10px 14px !important;
        box-sizing: border-box !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        align-items: center !important;
        justify-content: flex-start !important;
        overflow: hidden !important;
        transform: none !important;
        transition: none !important;
    }

    /* Birth of New / Appealing to / etc. */
    .solution-card .systemic-arrow-box .systemic-label,
    .action-card .systemic-arrow-box .systemic-label {
        display: -webkit-box !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #172033 !important;
        font-family: Arial, Helvetica, sans-serif !important;
        font-size: 21px !important;
        font-weight: 600 !important;
        line-height: 1.22 !important;
        text-align: left !important;
        white-space: normal !important;
        overflow: hidden !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
    }

    /* Fixed user-count badge. It does not affect text width or card height. */
    .solution-card .systemic-arrow-box .systemic-count,
    .action-card .systemic-arrow-box .systemic-count {
        position: absolute !important;
        top: 50% !important;
        right: 8px !important;
        transform: translateY(-50%) !important;
        width: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
        margin: 0 !important;
        padding: 4px 3px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        background: #eef0ea !important;
        color: #172033 !important;
        font-size: 11px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        box-sizing: border-box !important;
        z-index: 4 !important;
    }

    .solution-card .systemic-arrow-box .systemic-count-label,
    .action-card .systemic-arrow-box .systemic-count-label {
        display: block !important;
        margin-top: 2px !important;
        font-size: 7px !important;
        font-weight: 500 !important;
        line-height: 1 !important;
    }

    /* Arrows are permanently fixed in the bottom strip. */
    .solution-card .systemic-arrow-box .systemic-nav-btn,
    .action-card .systemic-arrow-box .systemic-nav-btn,
    .solution-card .systemic-arrow-box.single-item .systemic-nav-btn,
    .action-card .systemic-arrow-box.single-item .systemic-nav-btn {
        position: absolute !important;
        top: auto !important;
        bottom: 6px !important;
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        min-height: 30px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        visibility: visible !important;
        border: 0 !important;
        border-radius: 50% !important;
        color: #fff !important;
        font-size: 12px !important;
        line-height: 1 !important;
        z-index: 20 !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, .16) !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
        -webkit-tap-highlight-color: transparent !important;
        touch-action: manipulation !important;
    }

    .solution-card .systemic-arrow-box .systemic-nav-prev,
    .action-card .systemic-arrow-box .systemic-nav-prev {
        left: 12px !important;
        right: auto !important;
    }

    .solution-card .systemic-arrow-box .systemic-nav-next,
    .action-card .systemic-arrow-box .systemic-nav-next {
        right: 12px !important;
        left: auto !important;
    }

    .solution-card .systemic-nav-btn {
        background: #42a94f !important;
    }

    .action-card .systemic-nav-btn {
        background: #f39a13 !important;
    }

    .solution-card .systemic-arrow-box .systemic-nav-btn i,
    .action-card .systemic-arrow-box .systemic-nav-btn i {
        display: block !important;
        color: #fff !important;
        opacity: 1 !important;
        font-size: 12px !important;
        line-height: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    /* Absolutely no top/bottom movement on hover, focus, tap or disabled state. */
    .solution-card .systemic-arrow-box .systemic-nav-btn:hover,
    .solution-card .systemic-arrow-box .systemic-nav-btn:focus,
    .solution-card .systemic-arrow-box .systemic-nav-btn:focus-visible,
    .solution-card .systemic-arrow-box .systemic-nav-btn:active,
    .action-card .systemic-arrow-box .systemic-nav-btn:hover,
    .action-card .systemic-arrow-box .systemic-nav-btn:focus,
    .action-card .systemic-arrow-box .systemic-nav-btn:focus-visible,
    .action-card .systemic-arrow-box .systemic-nav-btn:active {
        top: auto !important;
        bottom: 6px !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
        outline: none !important;
    }

    .solution-card .systemic-arrow-box .systemic-nav-btn.is-disabled,
    .action-card .systemic-arrow-box .systemic-nav-btn.is-disabled,
    .solution-card .systemic-arrow-box .systemic-nav-btn:disabled,
    .action-card .systemic-arrow-box .systemic-nav-btn:disabled {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: .40 !important;
        transform: none !important;
        transition: none !important;
        pointer-events: none !important;
    }
}

/* Very small mobile: keep the larger readable content. */
@media screen and (max-width: 390px) {
    .solution-card .systemic-arrow-box .systemic-label,
    .action-card .systemic-arrow-box .systemic-label {
        font-size: 21px !important;
    }

    .solution-card .systemic-arrow-box .systemic-value-text,
    .action-card .systemic-arrow-box .systemic-value-text {
        left: 4px !important;
        right: 4px !important;
        top: 6px !important;
        bottom: 40px !important;
    }

    .solution-card .systemic-arrow-box .systemic-nav-btn,
    .action-card .systemic-arrow-box .systemic-nav-btn {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        bottom: 5px !important;
    }

    .solution-card .systemic-arrow-box .systemic-nav-btn:hover,
    .solution-card .systemic-arrow-box .systemic-nav-btn:focus,
    .solution-card .systemic-arrow-box .systemic-nav-btn:active,
    .action-card .systemic-arrow-box .systemic-nav-btn:hover,
    .action-card .systemic-arrow-box .systemic-nav-btn:focus,
    .action-card .systemic-arrow-box .systemic-nav-btn:active {
        bottom: 5px !important;
    }
}


/* Problem card: show welcome.php Truth percentage only. */
.problem-card .problem-percentage-box {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

.problem-card .problem-percentage-wrap {
    width: 100% !important;
    min-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

.problem-card .problem-percentage-wrap .people-report-percentage {
    margin: 0 !important;
    text-align: center !important;
}

.problem-card .problem-percentage-wrap .people-report-caption {
    margin-top: 8px !important;
    text-align: center !important;
    font-weight: 700 !important;
}

@media screen and (max-width: 768px) {
    .problem-card .problem-percentage-wrap .people-report-percentage {
        font-size: clamp(42px, 13vw, 60px) !important;
    }

    .problem-card .problem-percentage-wrap .people-report-caption {
        font-size: 14px !important;
        line-height: 1.2 !important;
    }
}

/* =========================================================
   MOBILE ONLY - PROBLEM PERCENTAGE EXACT CENTER
   Only centers the percentage block. Other design untouched.
   ========================================================= */
@media screen and (max-width: 767px) {
    .problem-card .problem-percentage-box {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        overflow: hidden !important;
    }

    .problem-card .problem-percentage-wrap {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .problem-card .problem-percentage-wrap .people-report-percentage {
        width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        text-align: center !important;
    }
}

/* Extracted from procednew2.php - style block 10 */
/* =========================================================
   FINAL MOBILE-ONLY PROBLEM WHITE PANEL
   - Match Solution mobile content width/layout
   - Percentage + Truth in our Democracy on white background
   - Desktop/Web remains unchanged
   ========================================================= */
@media screen and (max-width: 767px) {

    /* Match the Solution mobile split: 26% icon + 74% content. */
    .problem-card .card-content {
        grid-template-columns: 26% minmax(0, 74%) !important;
        grid-template-rows: 100% !important;
        align-items: stretch !important;
        overflow: hidden !important;
    }

    .problem-card .card-icon {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 5px !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
    }

    /* Right-side Problem viewport. */
    .problem-card .problem-percentage-box {
        grid-column: 2 !important;
        grid-row: 1 !important;
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
    }

    /* Same white panel treatment used in Solution. */
    .problem-card .problem-percentage-wrap {
        position: absolute !important;
        top: 7px !important;
        left: 20px !important;
        right: 5px !important;
        bottom: 7px !important;
        width: auto !important;
        height: auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 12px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        background: #fff !important;
        border: 1px solid rgba(23, 32, 51, .10) !important;
        border-radius: 12px !important;
        box-shadow: 0 2px 7px rgba(23, 32, 51, .06) !important;
        z-index: 2 !important;
        transform: none !important;
        transition: none !important;
    }

    .problem-card .problem-percentage-wrap .people-report-percentage {
        width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        text-align: center !important;
        color: #df2b21 !important;
        font-size: clamp(42px, 13vw, 60px) !important;
        font-weight: 800 !important;
        line-height: .95 !important;
        white-space: nowrap !important;
    }

    .problem-card .problem-percentage-wrap .people-report-caption {
        width: 100% !important;
        margin: 8px 0 0 !important;
        padding: 0 !important;
        text-align: center !important;
        color: #14274a !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        background: transparent !important;
    }
}

@media screen and (max-width: 390px) {
    .problem-card .problem-percentage-wrap {
        top: 6px !important;
        left: 18px !important;
        right: 4px !important;
        bottom: 6px !important;
        padding: 10px !important;
    }

    .problem-card .problem-percentage-wrap .people-report-percentage {
        font-size: 46px !important;
    }

    .problem-card .problem-percentage-wrap .people-report-caption {
        font-size: 13px !important;
    }
}

/* Extracted from procednew2.php - style block 11 */
/* =========================================================
   FINAL MOBILE-ONLY PROBLEM LABEL UPDATE
   - Keep percentage + Truth in Our Democracy together
   - Reduce the height of the white percentage panel
   - Show Democracy Deficit BELOW the percentage panel
   - Solution / Action arrows remain unchanged
   - Desktop / Web remains unchanged
   ========================================================= */

.problem-mobile-title {
    display: none !important;
}

@media screen and (max-width: 767px) {

    /* Right-side Problem area: compact white box + title below it. */
    .problem-card .problem-percentage-box {
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 7px 5px 6px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 5px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
    }

    /* Percentage + existing caption stay together, but panel height is reduced. */
    .problem-card .problem-percentage-wrap {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: 100% !important;
        height: auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: none !important;
        max-height: none !important;
        flex: 1 1 auto !important;
        margin: 0 !important;
        padding: 7px 8px !important;
        display: flex !important;
        flex-direction: column !important;
        /*align-items: center !important;*/
        /*justify-content: center !important;*/
        text-align: center !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        background: #fff !important;
        border: 1px solid rgba(23, 32, 51, .10) !important;
        border-radius: 12px !important;
        box-shadow: 0 2px 7px rgba(23, 32, 51, .06) !important;
        transform: none !important;
        transition: none !important;
    }

    .problem-card .problem-percentage-wrap .people-report-percentage {
        width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        text-align: center !important;
        color: #df2b21 !important;
        font-size: clamp(42px, 13vw, 60px) !important;
        font-weight: 800 !important;
        line-height: .95 !important;
        white-space: nowrap !important;
    }

    .problem-card .problem-desktop-caption {
        display: block !important;
        width: 100% !important;
        margin: 5px 0 0 !important;
        padding: 0 !important;
        color: #14274a !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        line-height: 1.15 !important;
        text-align: center !important;
    }

    /* New label BELOW the percentage panel. */
    .problem-card .problem-mobile-title {
        display: block !important;
        width: 100% !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        padding: 1px 2px 0 !important;
        color: #14274a !important;
        font-size: 15px !important;
        font-weight: 800 !important;
        line-height: 1.1 !important;
        text-align: center !important;
        white-space: nowrap !important;
    }
}

@media screen and (max-width: 390px) {
    .problem-card .problem-percentage-box {
        padding: 6px 4px 5px !important;
        gap: 4px !important;
    }

    .problem-card .problem-percentage-wrap {
        padding: 6px 7px !important;
    }

    .problem-card .problem-percentage-wrap .people-report-percentage {
        font-size: 46px !important;
    }

    .problem-card .problem-desktop-caption {
        margin-top: 4px !important;
        font-size: 13px !important;
    }

    .problem-card .problem-mobile-title {
        font-size: 14px !important;
    }
}

/* Extracted from procednew2.php - style block 12 */
/* =========================================================
   FINAL WEB-ONLY PROBLEM CUT FIX
   - Prevent the percentage panel from forcing 100% height
   - Keep Democracy Deficit fully visible below it
   - Everything else remains unchanged
   ========================================================= */
@media screen and (min-width: 768px) {
    .problem-card .problem-percentage-box {
        min-height: 0 !important;
        padding: 7px 5px 9px !important;
        gap: 5px !important;
        overflow: hidden !important;
    }

    .problem-card .problem-percentage-wrap {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        flex: 1 1 0 !important;
        padding: 7px 8px !important;
        overflow: hidden !important;
    }

    .problem-card .problem-mobile-title {
        display: block !important;
        flex: 0 0 auto !important;
        min-height: 18px !important;
        margin: 0 !important;
        padding: 0 2px 1px !important;
        line-height: 1.15 !important;
        overflow: visible !important;
    }
}

/* Extracted from procednew2.php - style block 13 */
/* =========================================================
   FINAL MOBILE-ONLY CHOICE TEXT UPDATE
   - "out of" stays lowercase
   - Slightly larger choice counter text
   - Desktop/Web remains unchanged
   ========================================================= */
@media screen and (max-width: 767px) {
    .solution-card .systemic-mobile-count-value,
    .action-card .systemic-mobile-count-value,
    .solution-card .systemic-mobile-count-label,
    .action-card .systemic-mobile-count-label {
        font-size: 14px !important;
        line-height: 1 !important;
    }
}

/* Extracted from procednew2.php - style block 14 */
/* =========================================================
   FINAL WEB + MOBILE ARROW ICON REMOVAL
   - Removes Solution / Action previous-next arrow buttons
   - Removes arrows between Problem / Solution / Action cards
   - Keeps all remaining design/content unchanged
   ========================================================= */

/* Solution / Action navigation arrows - WEB + MOBILE */
.solution-card .systemic-nav-btn,
.action-card .systemic-nav-btn,
.solution-card .systemic-arrow-box .systemic-nav-btn,
.action-card .systemic-arrow-box .systemic-nav-btn,
.solution-card .systemic-arrow-box.single-item .systemic-nav-btn,
.action-card .systemic-arrow-box.single-item .systemic-nav-btn {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Remove flow arrows between the three cards - WEB + MOBILE */
.report-cards > .card-column:not(:last-child)::after {
    content: none !important;
    display: none !important;
}

/* =========================================================
   arrows-fix.css
   Solution / Action arrows VISIBLE + WORKING (web + mobile)
   Include this file LAST (just before </body>) so it overrides
   the old "ARROW ICON REMOVAL" block. Nothing else changes.
   ========================================================= */

/* 1. Arrows visible */
.report-cards .solution-card .systemic-arrow-box .systemic-nav-btn,
.report-cards .action-card .systemic-arrow-box .systemic-nav-btn,
.report-cards .solution-card .systemic-arrow-box.single-item .systemic-nav-btn,
.report-cards .action-card .systemic-arrow-box.single-item .systemic-nav-btn {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    color: #fff !important;
    z-index: 99999 !important;
}

/* 2. First / last item (or only one item): visible but faded, no click */
.report-cards .solution-card .systemic-arrow-box .systemic-nav-btn.is-disabled,
.report-cards .action-card .systemic-arrow-box .systemic-nav-btn.is-disabled,
.report-cards .solution-card .systemic-arrow-box.single-item .systemic-nav-btn,
.report-cards .action-card .systemic-arrow-box.single-item .systemic-nav-btn {
    opacity: .40 !important;
    pointer-events: none !important;
}

/* 3. Web: keep space at the bottom so arrows don't cover the text */
@media screen and (min-width: 768px) {
    .report-cards .solution-card .systemic-arrow-box,
    .report-cards .action-card .systemic-arrow-box {
        padding: 8px 8px 48px !important;
    }
}

/* 4. Arrows between the 3 cards stay hidden (as before) */
.report-cards > .card-column:not(:last-child)::after {
    content: none !important;
    display: none !important;
}

/* =========================================================
   arrows-fix.css
   Solution / Action arrows VISIBLE + WORKING (web + mobile)
   Include this file LAST (just before </body>) so it overrides
   the old "ARROW ICON REMOVAL" block. Nothing else changes.
   ========================================================= */

/* 1. Arrows visible */
.report-cards .solution-card .systemic-arrow-box .systemic-nav-btn,
.report-cards .action-card .systemic-arrow-box .systemic-nav-btn,
.report-cards .solution-card .systemic-arrow-box.single-item .systemic-nav-btn,
.report-cards .action-card .systemic-arrow-box.single-item .systemic-nav-btn {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    color: #fff !important;
    z-index: 99999 !important;
}

/* 2. First / last item (or only one item): visible but faded, no click */
.report-cards .solution-card .systemic-arrow-box .systemic-nav-btn.is-disabled,
.report-cards .action-card .systemic-arrow-box .systemic-nav-btn.is-disabled,
.report-cards .solution-card .systemic-arrow-box.single-item .systemic-nav-btn,
.report-cards .action-card .systemic-arrow-box.single-item .systemic-nav-btn {
    opacity: .40 !important;
    pointer-events: none !important;
}

/* 3. Web: keep space at the bottom so arrows don't cover the text */
@media screen and (min-width: 768px) {
    .report-cards .solution-card .systemic-arrow-box,
    .report-cards .action-card .systemic-arrow-box {
        padding: 8px 8px 48px !important;
    }
}

/* 4. Arrows between the 3 cards stay hidden (as before) */
.report-cards > .card-column:not(:last-child)::after {
    content: none !important;
    display: none !important;
}

/* =========================================================
   5. WEB: Solution / Action full content visible
   Cause: each item box was only 33% of the card height, so the
   text got cut. Now each item uses the full white area and the
   cards are a little taller. Mobile is NOT changed.
   ========================================================= */
@media screen and (min-width: 768px) {

    /* Taller cards so the text has room */
    .report-cards > .card-column {
        height: 420px !important;
        min-height: 420px !important;
    }

    .report-cards .report-card {
        height: 100% !important;
    }

    /* One item = full viewport of the white area */
    .report-cards .systemic-arrow-box .systemic-list > li {
        height: 100% !important;
        min-height: 100% !important;
        padding: 18px 56px 18px 18px !important;
        justify-content: flex-start !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        scrollbar-width: thin;
    }

    /* Show the whole text (no clipping) */
    .report-cards .systemic-arrow-box .systemic-list > li .systemic-label {
        max-height: none !important;
        overflow: visible !important;
        font-size: 17px !important;
        line-height: 1.5 !important;
        font-weight: 600 !important;
    }
}

/* Extracted from procednew2.php - style block 15 */
/* =========================================================
   FINAL DATA + DESIGN POLISH
   Same Systemic Change design; only readability/data badges improved.
   ========================================================= */
.problem-basis {
    margin-top: 9px;
    color: #6b7280;
    font-size: 12px;
    line-height: 1.25;
    font-weight: 700;
    text-align: center;
}

.report-cards .systemic-arrow-box .systemic-list > li {
    padding-right: 70px !important;
}

.report-cards .systemic-arrow-box .systemic-count {
    top: 12px !important;
    right: 10px !important;
    min-width: 38px !important;
    max-width: 70px !important;
    padding: 4px 7px !important;
    background: rgba(23, 32, 51, .08) !important;
    border: 1px solid rgba(23, 32, 51, .08) !important;
    border-radius: 10px !important;
}

.report-cards .systemic-arrow-box .systemic-count-label {
    font-size: 8px !important;
    line-height: 1.12 !important;
}

.report-cards .systemic-custom-choice .systemic-label {
    color: #1e6240 !important;
    font-weight: 700 !important;
}

@media screen and (max-width: 767px) {
    .problem-basis {
        margin-top: 6px;
        font-size: 10px;
    }

    /* Mobile already has the choice-position badge at the bottom.
       Keep the per-choice user badge hidden so text stays clean. */
    .solution-card .systemic-count,
    .action-card .systemic-count {
        display: none !important;
    }

    .report-cards .systemic-arrow-box .systemic-list > li {
        padding-right: 12px !important;
    }
}

/* Extracted from procednew2.php - style block 16 */
/* =========================================================
   SYSTEMIC CHANGE WELCOME CONTENT
   Responsive for desktop, tablet and mobile.
   ========================================================= */

.systemic-welcome-section {
    width: 100% !important;
    max-width: 1180px !important;
    margin: 0 auto !important;
    padding: 0 24px 32px !important;
    box-sizing: border-box !important;
}

.systemic-welcome-heading {
    width: min(100%, 850px) !important;
    margin: 16px auto 0 !important;
    padding: 18px 22px !important;
    text-align: center !important;
}

.systemic-welcome-heading .people-report-title {
    margin: 0 !important;
}

.systemic-welcome-subtitle {
    margin: 8px 0 0 !important;
    padding: 0 !important;
    color: #fff !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: clamp(20px, 2vw, 28px) !important;
    font-weight: 700 !important;
    /*line-height: 1.25 !important;*/
    text-align: center !important;
}

.systemic-welcome-content {
    width: min(100%, 850px) !important;
    margin: 0 auto !important;
    padding: 30px 28px 32px !important;
    color: #172747 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

.systemic-welcome-content p {
    width: 100% !important;
    max-width: 820px !important;
    margin: 0 auto 24px !important;
    color: #172747 !important;
    font-size: clamp(17px, 1.45vw, 21px) !important;
  
    line-height: 1.7 !important;
}

.systemic-welcome-content .systemic-welcome-journey {
    margin-bottom: 22px !important;
}

.systemic-welcome-divider {
    width: 100% !important;
    height: 1px !important;
    margin: 0 auto 24px !important;
    background: #cbd2dc !important;
}

.systemic-welcome-content .systemic-welcome-highlight {
    margin-bottom: 0 !important;
    color: #172747 !important;
    font-size: clamp(18px, 1.6vw, 22px) !important;
    line-height: 1.65 !important;
}

.systemic-welcome-highlight strong {
    font-weight: 800 !important;
}

@media screen and (max-width: 992px) {
    .systemic-welcome-section {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .systemic-welcome-content {
        padding: 26px 22px 28px !important;
    }
}

@media screen and (max-width: 768px) {
    .systemic-welcome-section {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 12px 22px !important;
    }

    .systemic-welcome-heading {
        width: 100% !important;
        margin: 12px auto 0 !important;
        padding: 14px 12px !important;
        border-radius: 10px !important;
    }

    .systemic-welcome-heading .people-report-title {
        font-size: 27px !important;
        line-height: 1.15 !important;
    }

    .systemic-welcome-subtitle {
        margin-top: 7px !important;
        font-size: 20px !important;
        /*line-height: 1.25 !important;*/
    }

    .systemic-welcome-content {
        width: 100% !important;
        padding: 22px 8px 24px !important;
    }

    .systemic-welcome-content p {
        margin-bottom: 20px !important;
        font-size: 15px !important;
        line-height: 1.6 !important;
    }

    .systemic-welcome-content .systemic-welcome-highlight {
        font-size: 18px !important;
        line-height: 1.6 !important;
    }

    .systemic-welcome-divider {
        margin-bottom: 20px !important;
    }
}

@media screen and (max-width: 380px) {
    .systemic-welcome-section {
        padding-left: 9px !important;
        padding-right: 9px !important;
    }

    .systemic-welcome-heading {
        padding: 12px 9px !important;
    }

    .systemic-welcome-heading .people-report-title {
        font-size: 25px !important;
    }

    .systemic-welcome-subtitle {
        font-size: 18px !important;
    }

    .systemic-welcome-content {
        padding: 18px 5px 20px !important;
    }

    .systemic-welcome-content p {
        font-size: 16px !important;
        line-height: 1.55 !important;
    }

    .systemic-welcome-content .systemic-welcome-highlight {
        font-size: 17px !important;
    }
}

/* Extracted from procednew2.php - style block 17 */
/* =========================================================
   FINAL REQUESTED UPDATE
   1) Problem white panel height = Solution/Action white panel
      on both mobile and web.
   2) Solution/Action "1 out of N choices" is visible on web too,
      with the same bottom navigation layout used on mobile.
   3) Existing colors/content/card design remain unchanged.
   ========================================================= */

/* Keep all three right-side content viewports consistent. */
.problem-card .problem-percentage-box,
.solution-card .systemic-arrow-box,
.action-card .systemic-arrow-box {
    position: relative !important;
    height: 100% !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* PROBLEM: exact same white-panel top/bottom space as Solution/Action. */
.problem-card .problem-percentage-box {
    padding: 0 !important;
    display: block !important;
    background: transparent !important;
    border: 0 !important;
}

.problem-card .problem-percentage-wrap {
    position: absolute !important;
    top: 7px !important;
    left: 20px !important;
    right: 5px !important;
    bottom: 42px !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 7px 8px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    background: #fff !important;
    border: 1px solid rgba(23, 32, 51, .10) !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 7px rgba(23, 32, 51, .06) !important;
    transform: none !important;
}

/* Democracy Deficit stays below the white panel, inside the same
   bottom strip used by Solution/Action navigation. */
.problem-card .problem-mobile-title {
    position: absolute !important;
    left: 5px !important;
    right: 5px !important;
    bottom: 8px !important;
    width: auto !important;
    min-height: 26px !important;
    margin: 0 !important;
    padding: 0 2px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #14274a !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    text-align: center !important;
    white-space: nowrap !important;
    z-index: 20 !important;
}

/* WEB/TABLET: use the same white-box + arrows + choice-count layout
   that mobile already uses. */
@media screen and (min-width: 768px) {
    .solution-card .systemic-arrow-box,
    .action-card .systemic-arrow-box {
        padding: 0 !important;
    }

    .solution-card .systemic-arrow-box .systemic-value-text,
    .action-card .systemic-arrow-box .systemic-value-text {
        position: absolute !important;
        top: 7px !important;
        left: 5px !important;
        right: 5px !important;
        bottom: 42px !important;
        width: auto !important;
        height: auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        background: #fff !important;
        border: 1px solid rgba(23, 32, 51, .10) !important;
        border-radius: 12px !important;
        box-shadow: 0 2px 7px rgba(23, 32, 51, .06) !important;
    }

    .solution-card .systemic-mobile-count,
    .action-card .systemic-mobile-count {
        position: absolute !important;
        left: 50% !important;
        right: auto !important;
        bottom: 7px !important;
        transform: translateX(-50%) !important;
        width: auto !important;
        height: 30px !important;
        min-width: 0 !important;
        min-height: 30px !important;
        margin: 0 !important;
        padding: 0 6px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        color: #172033 !important;
        white-space: nowrap !important;
        pointer-events: none !important;
        z-index: 30 !important;
    }

    .solution-card .systemic-mobile-count-value,
    .action-card .systemic-mobile-count-value,
    .solution-card .systemic-mobile-count-label,
    .action-card .systemic-mobile-count-label {
        display: inline-block !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 14px !important;
        line-height: 1 !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    .solution-card .systemic-mobile-count-value,
    .action-card .systemic-mobile-count-value {
        font-weight: 800 !important;
    }

    .solution-card .systemic-mobile-count-label,
    .action-card .systemic-mobile-count-label {
        font-weight: 700 !important;
    }

    .solution-card .systemic-arrow-box .systemic-nav-btn,
    .action-card .systemic-arrow-box .systemic-nav-btn,
    .solution-card .systemic-arrow-box.single-item .systemic-nav-btn,
    .action-card .systemic-arrow-box.single-item .systemic-nav-btn {
        position: absolute !important;
        top: auto !important;
        bottom: 8px !important;
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        min-height: 30px !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
    }

    .solution-card .systemic-arrow-box .systemic-nav-prev,
    .action-card .systemic-arrow-box .systemic-nav-prev {
        left: 12px !important;
        right: auto !important;
    }

    .solution-card .systemic-arrow-box .systemic-nav-next,
    .action-card .systemic-arrow-box .systemic-nav-next {
        right: 12px !important;
        left: auto !important;
    }

    .solution-card .systemic-arrow-box .systemic-nav-btn:hover,
    .solution-card .systemic-arrow-box .systemic-nav-btn:focus,
    .solution-card .systemic-arrow-box .systemic-nav-btn:active,
    .action-card .systemic-arrow-box .systemic-nav-btn:hover,
    .action-card .systemic-arrow-box .systemic-nav-btn:focus,
    .action-card .systemic-arrow-box .systemic-nav-btn:active {
        top: auto !important;
        bottom: 8px !important;
        transform: none !important;
    }
}

/* Extra-small mobile follows the existing smaller mobile spacing. */
@media screen and (max-width: 390px) {
    .problem-card .problem-percentage-wrap {
        top: 6px !important;
        left: 20px !important;
        right: 4px !important;
        bottom: 40px !important;
    }

    .problem-card .problem-mobile-title {
        left: 4px !important;
        right: 4px !important;
        bottom: 6px !important;
        min-height: 28px !important;
        font-size: 14px !important;
    }
}

/* Extracted from procednew2.php - style block 18 */
/* =========================================================
   FINAL EQUAL WHITE CARD SIZE FIX - WEB + MOBILE
   Problem / Solution / Action white panels use the exact
   same width and height. Existing content/design is unchanged.
   ========================================================= */

/* All 3 cards use the same 30% icon + 70% content split. */
.report-cards .problem-card .card-content,
.report-cards .solution-card .card-content,
.report-cards .action-card .card-content {
    display: grid !important;
    grid-template-columns: 30% minmax(0, 70%) !important;
    grid-template-rows: 100% !important;
    align-items: stretch !important;
    overflow: hidden !important;
}

/* The right-side content holder is identical in all 3 cards. */
.report-cards .problem-card .problem-percentage-box,
.report-cards .solution-card .systemic-arrow-box,
.report-cards .action-card .systemic-arrow-box {
    grid-column: 2 !important;
    grid-row: 1 !important;
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
}

/* Exact same white-card rectangle for Problem, Solution and Action. */
.report-cards .problem-card .problem-percentage-wrap,
.report-cards .solution-card .systemic-arrow-box .systemic-value-text,
.report-cards .action-card .systemic-arrow-box .systemic-value-text {
    position: absolute !important;
    top: 7px !important;
    left: 5px !important;
    right: 5px !important;
    bottom: 42px !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    background: #fff !important;
    border: 1px solid rgba(23, 32, 51, .10) !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 7px rgba(23, 32, 51, .06) !important;
}

/* Keep the Problem percentage centered without affecting panel size. */
.report-cards .problem-card .problem-percentage-wrap {
    padding: 7px 8px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    transform: none !important;
}

/* Solution / Action content still fills the same white panel. */
.report-cards .solution-card .systemic-arrow-box .systemic-value-text,
.report-cards .action-card .systemic-arrow-box .systemic-value-text {
    padding: 0 !important;
}

/* Mobile and small-mobile: keep exactly the same dimensions too. */
@media screen and (max-width: 767px) {
    .report-cards .problem-card .problem-percentage-wrap,
    .report-cards .solution-card .systemic-arrow-box .systemic-value-text,
    .report-cards .action-card .systemic-arrow-box .systemic-value-text {
        top: 5px !important;
        left: 5px !important;
        right: 5px !important;
        bottom: 48px !important;
    }
}

@media screen and (max-width: 390px) {
    .report-cards .problem-card .problem-percentage-wrap,
    .report-cards .solution-card .systemic-arrow-box .systemic-value-text,
    .report-cards .action-card .systemic-arrow-box .systemic-value-text {
        top: 5px !important;
        left: 4px !important;
        right: 4px !important;
        bottom: 46px !important;
    }
}

/* Extracted from procednew2.php - style block 19 */
/* =========================================================
   FINAL DESKTOP-ONLY WHITE CARD FULL WIDTH FIX
   - Problem / Solution / Action white panels use full card width
   - Mobile view (<= 768px) is NOT changed
   ========================================================= */
@media screen and (min-width: 769px) {

    /* Cancel the later 30% / 70% split only on web. */
    .report-cards .problem-card .card-content,
    .report-cards .solution-card .card-content,
    .report-cards .action-card .card-content {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    /* Make the content holder occupy the complete card body width. */
    .report-cards .problem-card .problem-percentage-box,
    .report-cards .solution-card .systemic-arrow-box,
    .report-cards .action-card .systemic-arrow-box {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        grid-column: auto !important;
        grid-row: auto !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    /* Full-width white panel inside Problem / Solution / Action. */
    .report-cards .problem-card .problem-percentage-wrap,
    .report-cards .solution-card .systemic-arrow-box .systemic-value-text,
    .report-cards .action-card .systemic-arrow-box .systemic-value-text {
        position: absolute !important;
        top: 7px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 42px !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        background: #fff !important;
        border: 1px solid rgba(23, 32, 51, .10) !important;
        border-radius: 12px !important;
        box-shadow: 0 2px 7px rgba(23, 32, 51, .06) !important;
    }

    /* Keep Problem percentage centered in its full-width panel. */
    .report-cards .problem-card .problem-percentage-wrap {
        padding: 7px 12px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    /* Keep Solution / Action list content inside the full-width panel. */
    .report-cards .solution-card .systemic-arrow-box .systemic-value-text,
    .report-cards .action-card .systemic-arrow-box .systemic-value-text {
        padding: 0 !important;
    }
}

/* Extracted from procednew2.php - style block 20 */
/* =========================================================
   FINAL STATIC SYSTEMIC CHANGE CONTENT UPDATE
   ========================================================= */

/* Keep this section static and clean. */
.systemic-welcome-section {
    width: 100% !important;
    max-width: 1180px !important;
    margin: 0 auto !important;
    padding: 0 24px 34px !important;
    background: #fff !important;
    box-sizing: border-box !important;
}

/* Existing main heading design remains. */
.systemic-welcome-heading {
    width: min(100%, 850px) !important;
    margin: 16px auto 12px !important;
}

/* Strongly highlight World Citizens & Truth Seekers. */
.systemic-welcome-subtitle {
    width: min(100%, 850px) !important;
    margin: 0 auto 24px !important;
    padding: 13px 20px !important;
    display: block !important;

    color: #000 !important;
  

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

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: clamp(18px, 2.2vw, 20px) !important;
    font-weight: 800 !important;
    /*line-height: 1.25 !important;*/

    text-align: center !important;
    letter-spacing: 0 !important;
    word-spacing: normal !important;

 
    box-sizing: border-box !important;
}

/* Body text */
.systemic-welcome-content {
    width: min(100%, 900px) !important;
    margin: 0 auto !important;
    padding: 0 12px !important;

    color: #172747 !important;
    font-family: Arial, Helvetica, sans-serif !important;

    box-sizing: border-box !important;
}

/* All supplied content: justified + bold. */
.systemic-welcome-content p,
.systemic-welcome-content .systemic-welcome-journey,
.systemic-welcome-content .systemic-welcome-highlight {
    width: 100% !important;
    max-width: 100% !important;

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

    color: #172747 !important;

    font-size: clamp(15px, 1.45vw, 15px) !important;
   
    line-height: 1.7 !important;

  /*  text-align: justify !important;
    text-align-last: left !important;*/
    text-justify: auto !important;

    word-spacing: normal !important;
    letter-spacing: 0 !important;

    white-space: normal !important;
/*    overflow-wrap: break-word !important;
    word-break: normal !important;*/
    /*hyphens: auto !important;*/
}

/* No divider line between the content blocks. */
.systemic-welcome-divider {
    display: none !important;
}

/* Last paragraph should not add unnecessary space below. */
.systemic-welcome-content .systemic-welcome-highlight {
    margin-bottom: 0 !important;
}

/* Tablet */
@media screen and (max-width: 992px) {
    .systemic-welcome-section {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .systemic-welcome-content {
        width: min(100%, 860px) !important;
    }
}

/* Mobile */
@media screen and (max-width: 768px) {
    html,
    body {
        height: auto !important;
        min-height: 100% !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    body {
        display: block !important;
        min-height: 100vh !important;
    }

    .hero-container {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    .systemic-welcome-section {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 13px 26px !important;
        overflow: visible !important;
    }

    .systemic-welcome-heading {
        width: 100% !important;
        margin: 12px auto 10px !important;
    }

    .systemic-welcome-heading .people-report-title {
        font-size: 27px !important;
        line-height: 1.2 !important;
    }

    .systemic-welcome-subtitle {
        width: 100% !important;
        margin: 0 auto 20px !important;
        padding: 12px 10px !important;

        font-size: 24px !important;
        /*line-height: 1.25 !important;*/

        word-spacing: normal !important;
        letter-spacing: 0 !important;
    }

    .systemic-welcome-content {
        width: 100% !important;
        padding: 0 5px !important;
    }

    .systemic-welcome-content p,
    .systemic-welcome-content .systemic-welcome-journey,
    .systemic-welcome-content .systemic-welcome-highlight {
        margin-bottom: 20px !important;

        /* Slightly larger mobile text as requested */
        font-size: 19px !important;
        
        line-height: 1.6 !important;

        text-align: justify !important;
        text-align-last: left !important;

        /*
         * Prevent the large gaps that normal inter-word justification
         * can create on narrow screens.
         */
        text-justify: inter-character !important;
        word-spacing: 0 !important;
        letter-spacing: 0 !important;

        overflow-wrap: break-word !important;
        word-break: normal !important;
        /*hyphens: auto !important;*/
    }

    .systemic-welcome-content .systemic-welcome-highlight {
        margin-bottom: 0 !important;
    }
}

/* Small mobile */
@media screen and (max-width: 380px) {
    .systemic-welcome-section {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .systemic-welcome-heading .people-report-title {
        font-size: 26px !important;
    }

    .systemic-welcome-subtitle {
        font-size: 22px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .systemic-welcome-content p,
    .systemic-welcome-content .systemic-welcome-journey,
    .systemic-welcome-content .systemic-welcome-highlight {
        font-size: 15px !important;
        line-height: 1.58 !important;
    }
}

/* Extracted from procednew2.php - style block 21 */
/* =========================================================
   FINAL PAGE LAYOUT
   - Top/header stays fixed in the visible layout
   - Bottom Truth section stays fixed at the bottom
   - Only the middle body content scrolls when needed
   - If content is short, no unnecessary scrollbar appears
   ========================================================= */

html,
body {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

body {
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 0 !important;

    display: flex !important;
    flex-direction: column !important;

    background: #fff !important;
}

/* Header/top section keeps its own existing design and height */
body > header {
    flex: 0 0 auto !important;
    position: relative !important;
    z-index: 10000 !important;
}

/* Middle/body data uses only the free space between top and bottom */
body > .hero-container {
    width: 100% !important;
    max-width: 100% !important;

    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;

    margin: 0 !important;

    display: block !important;

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

    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* Do not create a second scrollbar inside the body content */
body > .hero-container .people-report-content,
body > .hero-container .systemic-welcome-section {
    overflow: visible !important;
}

/* Bottom Truth / hand.png section stays in the bottom row */
body > .btn-log {
    flex: 0 0 auto !important;

    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;

    width: 100% !important;
    margin: 0 !important;

    z-index: 10000 !important;

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

    box-sizing: border-box !important;
}

/* Keep existing Truth image/link centered */
body > .btn-log > a {
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Hidden empty section must not consume middle height */
body > .df-welcome {
    display: none !important;
}

/* Mobile keeps the exact same top/body/bottom behavior */
@media screen and (max-width: 768px) {
    html,
    body {
        height: 100% !important;
        min-height: 100% !important;
        overflow: hidden !important;
    }

    body {
        height: 100vh !important;
        height: 100dvh !important;
        min-height: 0 !important;
    }

    body > .hero-container {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: auto !important;

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

        -webkit-overflow-scrolling: touch;
    }

    body > .btn-log {
        flex: 0 0 auto !important;
        position: relative !important;
        bottom: auto !important;
        width: 100% !important;
    }
}

/* Former inline styles; page-prefixed classes prevent cross-page collisions. */
.uod-procednew2-inline-001 { width:70px; }
.uod-procednew2-inline-002 { display:none; }

/* =========================================================
   FINAL MOBILE FONT UPDATE
   Mobile only: bigger/bold heading + smaller content text
   Desktop and tablet remain unchanged.
   ========================================================= */

@media (max-width: 767px) {

    /* Main mobile heading */
    .report-heading h1 {
        font-size: 24px !important;
        font-weight: bold !important;
        line-height: 1.15 !important;
    }

    /* Mobile content text */
    #problemText,
    .value-text {
        font-size: 10px !important;
        line-height: 1.35 !important;
    }
}

/* Keep the same mobile heading/content sizes on very small devices */
@media (max-width: 390px) {

    .report-heading h1 {
        font-size: 24px !important;
        font-weight: 800 !important;
        line-height: 1.15 !important;
    }

    #problemText,
    .value-text {
        font-size: 10px !important;
        line-height: 1.35 !important;
    }
}