/* JOBCHAT /institutions landing page — SELF-CONTAINED styling.
 * Everything is scoped under .jd-institutions-page so it cannot leak into the rest of the site and does
 * NOT depend on the theme's jobdha-home.css. The --jd-* custom properties are copied from that theme's
 * index-page :root and redeclared HERE on our own scope (the theme defines them only under
 * body.ow.magic.base_index_page, which this page is not). The jd-institute-*, jd-primary, jd-secondary,
 * jd-kicker, jd-section rules are copied from jobdha-home.css and re-prefixed. Mobile-first.
 * TOKEN: bump institutions.css?v=<build>-iNN in controllers/institutions.php on every edit here. */

.jd-institutions-page {
    --jd-ink: #101322;
    --jd-muted: #596579;
    --jd-line: #e2e8f0;
    --jd-blue: #0d6efd;
    --jd-blue-dark: #0b5ed7;
    --jd-purple: #691cff;
    --jd-green: #0f9f6e;
    --jd-surface: #ffffff;
    --jd-soft: #f7f9fd;
    --jd-shadow: 0 18px 46px rgba(16, 19, 34, 0.12);

    color: var(--jd-ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    /* item 3: the base tone STARTS at the host container's ghostwhite (#F8F8FF) so the seam
       between this page and the .ow_page_container ghostwhite panel is invisible — no color jump.
       The soft radial tints are pulled slightly further from the very top edge so the top row
       reads as flat ghostwhite before the colour breathes in. */
    background:
        radial-gradient(circle at 6% 12%, rgba(13, 110, 253, 0.07), transparent 24rem),
        radial-gradient(circle at 94% 8%, rgba(15, 159, 110, 0.08), transparent 20rem),
        linear-gradient(180deg, #f8f8ff 0%, #eef5ff 52%, #ffffff 100%);
    margin: 0 -20px;   /* bleed to the page-padding edges under the general wrapper */
    padding: 0;
}

.jd-institutions-page,
.jd-institutions-page * {
    box-sizing: border-box;
}

.jd-institutions-page h1,
.jd-institutions-page h2,
.jd-institutions-page h3,
.jd-institutions-page p {
    margin: 0;
}

.jd-institutions-page a {
    text-decoration: none;
}

/* ---- shared width wrapper ---- */
.jd-institutions-page .jdi-wrap,
.jd-institutions-page .jd-section {
    margin: 0 auto;
    max-width: 1160px;
    width: calc(100% - 32px);
}

.jd-institutions-page .jd-section {
    padding: 56px 0;
}

/* ---- section head ---- */
.jd-institutions-page .jd-section-head {
    max-width: 780px;
    margin-bottom: 26px;
    text-align: center;              /* owner 2026-08-31: centre-align section heads */
    margin-left: auto;
    margin-right: auto;
}

.jd-institutions-page .jd-section-head h2 {
    font-size: clamp(28px, 4vw, 46px) !important;
    font-weight: 950 !important;
    letter-spacing: -0.035em !important;
    line-height: 1.02 !important;
    margin: 8px 0 12px !important;
}

.jd-institutions-page .jd-section-head p {
    color: var(--jd-muted);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.55;
}

/* ---- kicker (copied) ---- */
.jd-institutions-page .jd-kicker {
    align-items: center;
    color: #087866;
    display: inline-flex;
    font-size: 12px;
    font-weight: 950;
    gap: 8px;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
    text-transform: uppercase;
}

/* ---- buttons (copied) ---- */
.jd-institutions-page .jd-primary,
.jd-institutions-page .jd-secondary {
    align-items: center;
    border-radius: 8px;
    display: inline-flex;
    font-weight: 900;
    gap: 9px;
    justify-content: center;
    min-height: 44px;
    padding: 12px 18px;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.jd-institutions-page .jd-primary {
    background: linear-gradient(90deg, var(--jd-blue), var(--jd-purple));
    box-shadow: 0 13px 26px rgba(13, 110, 253, 0.24);
    color: #fff !important;
}

.jd-institutions-page .jd-primary:hover {
    box-shadow: 0 16px 32px rgba(105, 28, 255, 0.26);
    color: #fff !important;
    transform: translateY(-1px);
}

.jd-institutions-page .jd-secondary {
    background: #fff;
    border: 1px solid var(--jd-line);
    color: #172033;
}

.jd-institutions-page .jd-secondary:hover {
    border-color: rgba(13, 110, 253, 0.4);
    color: var(--jd-blue);
}

.jd-institutions-page .jd-secondary.dark {
    background: #111827;
    border-color: #111827;
    color: #fff !important;   /* site default link colour is blue; force the dark-button label white */
}

.jd-institutions-page .jd-secondary.dark:hover,
.jd-institutions-page .jd-secondary.dark:focus,
.jd-institutions-page .jd-secondary.dark:visited {
    color: #fff !important;
    opacity: 0.94;
}

/* ---- institute actions (copied) ---- */
.jd-institutions-page .jd-institute-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}

/* ============================ HERO ============================ */
/* item 3: no top padding on the hero — it sits FLUSH against the top of the ghostwhite
   .ow_page_container panel (whose own top padding is zeroed for this page below). Only a
   little bottom padding to separate it from the first section. */
.jd-institutions-page .jdi-hero {
    padding: 0 0 8px;
}

.jd-institutions-page .jdi-hero-inner {
    align-items: center;
    display: grid;
    gap: clamp(24px, 4vw, 48px);
    grid-template-columns: 1fr;
}

.jd-institutions-page .jdi-hero-copy h1 {
    font-size: clamp(34px, 6vw, 58px) !important;
    font-weight: 950 !important;
    letter-spacing: -0.04em !important;
    line-height: 0.98 !important;
    margin: 4px 0 16px;
}

.jd-institutions-page .jdi-lede {
    color: var(--jd-muted);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
    max-width: 620px;
}

.jd-institutions-page .jdi-trust {
    color: var(--jd-muted);
    font-size: 13px;
    font-weight: 700;
    margin-top: 18px;
}

.jd-institutions-page .jdi-trust i {
    color: var(--jd-green);
    margin-right: 6px;
}

/* ---- institute dashboard board (copied) ---- */
.jd-institutions-page .jd-institute-board {
    background: #101322;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    box-shadow: 0 24px 58px rgba(15, 23, 42, 0.2);
    color: #fff;
    padding: 18px;
}

.jd-institutions-page .jd-institute-board-head {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.jd-institutions-page .jd-institute-board-head span {
    color: #8ee8c0;
    display: block;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.jd-institutions-page .jd-institute-board-head strong {
    display: block;
    font-size: 24px;
    font-weight: 950;
    letter-spacing: -0.025em;
    margin-top: 3px;
}

.jd-institutions-page .jd-institute-board-head i {
    align-items: center;
    background: linear-gradient(90deg, var(--jd-blue), var(--jd-purple));
    border-radius: 8px;
    display: inline-flex;
    height: 48px;
    justify-content: center;
    width: 48px;
}

.jd-institutions-page .jd-institute-stats {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 18px;
}

.jd-institutions-page .jd-institute-stats article {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    min-height: 96px;
    padding: 14px;
}

.jd-institutions-page .jd-institute-stats i {
    align-items: center;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: #8ee8c0;
    display: inline-flex;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.jd-institutions-page .jd-institute-stats strong {
    color: #8ee8c0;
    display: block;
    font-size: 15px;
    font-weight: 950;
    margin-top: 14px;
}

.jd-institutions-page .jd-institute-flow {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 12px;
}

.jd-institutions-page .jd-institute-flow span {
    align-items: center;
    background: #fff;
    border-radius: 8px;
    color: #172033;
    display: flex;
    flex-direction: column;
    font-size: 12px;
    font-weight: 950;
    gap: 7px;
    justify-content: center;
    line-height: 1.15;
    min-height: 74px;
    padding: 10px;
    text-align: center;
}

.jd-institutions-page .jd-institute-flow i {
    color: var(--jd-blue);
    font-size: 18px;
}

/* ============================ blocks / soft bands ============================ */
.jd-institutions-page .jdi-block-soft {
    background: rgba(247, 249, 253, 0.72);
}

/* ---- stat grid (challenge) ---- */
.jd-institutions-page .jdi-stat-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.jd-institutions-page .jdi-stat {
    background: var(--jd-surface);
    border: 1px solid var(--jd-line);
    border-radius: 12px;
    box-shadow: 0 8px 22px rgba(16, 19, 34, 0.05);
    padding: 20px 18px;
}

.jd-institutions-page .jdi-stat strong {
    color: var(--jd-blue);
    display: block;
    font-size: clamp(26px, 4vw, 38px) !important;
    font-weight: 950 !important;
    letter-spacing: -0.03em !important;
    line-height: 1;
    margin-bottom: 8px;
}

.jd-institutions-page .jdi-stat span {
    color: var(--jd-muted);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
}

.jd-institutions-page .jdi-cite {
    color: var(--jd-muted);
    font-size: 12px;
    font-weight: 600;
    margin-top: 14px;
}

.jd-institutions-page sup {
    font-size: 0.7em;
}

/* ---- generic card grids (pain / pillar / value) ---- */
.jd-institutions-page .jdi-pain-grid,
.jd-institutions-page .jdi-pillar-grid,
.jd-institutions-page .jdi-value-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr;
}

.jd-institutions-page .jdi-card {
    background: var(--jd-surface);
    border: 1px solid var(--jd-line);
    border-radius: 12px;
    box-shadow: 0 8px 22px rgba(16, 19, 34, 0.05);
    padding: 22px 20px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.jd-institutions-page .jdi-card:hover {
    box-shadow: var(--jd-shadow);
    transform: translateY(-2px);
}

.jd-institutions-page .jdi-card > i {
    align-items: center;
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.12), rgba(105, 28, 255, 0.12));
    border-radius: 10px;
    color: var(--jd-blue);
    display: inline-flex;
    font-size: 20px;
    height: 46px;
    justify-content: center;
    margin-bottom: 14px;
    width: 46px;
}

.jd-institutions-page .jdi-pillar > i {
    background: linear-gradient(135deg, rgba(15, 159, 110, 0.14), rgba(13, 110, 253, 0.12));
    color: var(--jd-green);
}

/* item 1-4 (owner 2026-08-31): the four pillar cards are now whole-card links to
   live tool routes (job-scanner / job-market / salary-jasus / career-roadmap).
   As <a> they must render like the <article> cards did (block grid item) and keep
   the card's ink text colour (site default <a> is blue), with a subtle clickable
   affordance on hover. No layout change beyond making the <a> behave as the card. */
.jd-institutions-page a.jdi-pillar-link {
    color: var(--jd-ink);
    cursor: pointer;
    display: block;
    text-decoration: none;
}
.jd-institutions-page a.jdi-pillar-link h3 { color: var(--jd-ink); }
.jd-institutions-page a.jdi-pillar-link p  { color: var(--jd-muted); }
.jd-institutions-page a.jdi-pillar-link:hover h3 { color: var(--jd-blue); }

.jd-institutions-page .jdi-card h3 {
    font-size: 19px;
    font-weight: 900;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
}

.jd-institutions-page .jdi-card p {
    color: var(--jd-muted);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
}

/* ---- how-it-works flow line ---- */
.jd-institutions-page .jdi-flow-line {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.jd-institutions-page .jdi-flow-line span {
    align-items: center;
    background: var(--jd-surface);
    border: 1px solid var(--jd-line);
    border-radius: 10px;
    color: #172033;
    display: flex;
    flex-direction: column;
    font-size: 13px;
    font-weight: 900;
    gap: 8px;
    justify-content: center;
    line-height: 1.2;
    min-height: 82px;
    padding: 12px 8px;
    text-align: center;
}

.jd-institutions-page .jdi-flow-line i {
    color: var(--jd-blue);
    font-size: 18px;
}

/* ---- compare table (status-quo recap) ---- */
.jd-institutions-page .jdi-compare {
    background: var(--jd-surface);
    border: 1px solid var(--jd-line);
    border-radius: 12px;
    box-shadow: 0 8px 22px rgba(16, 19, 34, 0.05);
    overflow: hidden;
}

.jd-institutions-page .jdi-compare-row {
    display: grid;
    grid-template-columns: 1.1fr 1fr 1.2fr;
}

.jd-institutions-page .jdi-compare-row + .jdi-compare-row {
    border-top: 1px solid var(--jd-line);
}

.jd-institutions-page .jdi-compare-row span {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    padding: 14px 14px;
}

.jd-institutions-page .jdi-compare-row span:first-child {
    color: var(--jd-ink);
    font-weight: 900;
}

.jd-institutions-page .jdi-compare-row span:nth-child(2) {
    color: var(--jd-muted);
    border-left: 1px solid var(--jd-line);
}

.jd-institutions-page .jdi-compare-row span:nth-child(3) {
    color: var(--jd-blue-dark);
    border-left: 1px solid var(--jd-line);
}

.jd-institutions-page .jdi-compare-head span {
    background: #101322;
    color: #fff !important;
    font-weight: 950 !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 12px;
}

.jd-institutions-page .jdi-compare-head span:nth-child(2),
.jd-institutions-page .jdi-compare-head span:nth-child(3) {
    border-left-color: rgba(255, 255, 255, 0.14);
}

/* ---- final CTA band ---- */
.jd-institutions-page .jdi-cta-band {
    background:
        radial-gradient(circle at 84% 12%, rgba(15, 159, 110, 0.18), transparent 30%),
        linear-gradient(135deg, rgba(13, 110, 253, 0.1), rgba(105, 28, 255, 0.1)),
        #fff;
    border: 1px solid var(--jd-line);
    border-radius: 14px;
    box-shadow: 0 18px 54px rgba(15, 23, 42, 0.08);
    padding: clamp(28px, 5vw, 52px);
    text-align: center;
}

.jd-institutions-page .jdi-cta-band h2 {
    font-size: clamp(26px, 4vw, 44px) !important;
    font-weight: 950 !important;
    letter-spacing: -0.035em !important;
    line-height: 1.02 !important;
    margin-bottom: 10px !important;
}

.jd-institutions-page .jdi-cta-band > p {
    color: var(--jd-muted);
    font-size: 17px;
    font-weight: 700;
    margin: 0 auto 22px;
    max-width: 560px;
}

.jd-institutions-page .jdi-cta-actions {
    justify-content: center;
}

.jd-institutions-page .jdi-cta-foot {
    color: var(--jd-muted);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.04em;
    margin-top: 22px;
    text-transform: uppercase;
}

/* ============================ TABLET / DESKTOP ============================ */
@media (min-width: 700px) {
    .jd-institutions-page .jdi-pain-grid,
    .jd-institutions-page .jdi-pillar-grid,
    .jd-institutions-page .jdi-value-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .jd-institutions-page .jdi-flow-line {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 980px) {
    .jd-institutions-page .jd-section {
        padding: 72px 0;
    }

    .jd-institutions-page .jdi-hero {
        padding: 8px 0 12px;   /* item 3: flush at top on desktop too */
    }

    .jd-institutions-page .jdi-hero-inner {
        grid-template-columns: minmax(0, 1fr) minmax(360px, 480px);
    }

    .jd-institutions-page .jd-institute-stats,
    .jd-institutions-page .jd-institute-flow {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .jd-institutions-page .jdi-stat-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .jd-institutions-page .jdi-pillar-grid,
    .jd-institutions-page .jdi-value-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .jd-institutions-page .jdi-value-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ============================ SMALL PHONE ============================ */
@media (max-width: 420px) {
    .jd-institutions-page .jdi-stat-grid {
        grid-template-columns: 1fr;
    }

    .jd-institutions-page .jd-institute-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .jd-institutions-page .jd-primary,
    .jd-institutions-page .jd-secondary {
        width: 100%;
    }
}

/* ============================================================================
   POLISH PASS (owner 2026-08-31) — items 1,3,4,5,6. Page-scoped only.
   Item 4 is scoped to body.jobchat_ctrl_institutions_index so it can NEVER
   affect any other page's layout.
   ============================================================================ */

/* ---- item 1 (owner-corrected scope 2026-08-31) ----
   (a) the 124px-left / no-right-gutter page margin is a DESKTOP concern only: the theme's
       base rule (.ow_page{margin:0 260px 0px 124px}) applies at every width and leaves a
       260px right gap once the sidebar is hidden, so we re-close it ONLY at >=980px (the
       house desktop breakpoint; the theme's own per-page .ow_page overrides live in that
       same media query with !important). At <980px the theme already resets .ow_page to
       margin:0 auto with the sidebar stacked full-width, so we leave mobile untouched.
   (b) the 4px blanket page-padding is a MOBILE concern only — it gives breathing room on
       small screens; on desktop the shared wrappers own the spacing rhythm, so we do NOT
       want a 4px pad on every descendant there. */
@media (min-width: 980px) {
    body.jobchat_ctrl_institutions_index .ow_page {
        margin: 0 0 0 124px !important;
    }
    body.jobchat_ctrl_institutions_index .ow_sidebar {
        display: none !important;
    }
}

@media (max-width: 979px) {
    .jd-institutions-page,
    .jd-institutions-page * {
        padding: 4px;
    }
    /* the 4px base padding must NOT collapse the shared wrappers' own layout paddings;
       re-assert the wrappers the blanket rule above would otherwise override. */
    .jd-institutions-page .jd-section {
        padding-top: 52px;
        padding-bottom: 52px;
    }
    .jd-institutions-page .jdi-hero {
        padding-top: 8px;   /* item 3: flush at top on mobile too */
        padding-bottom: 4px;
    }
    .jd-institutions-page .jdi-cta-band {
        padding: clamp(28px, 5vw, 52px);
    }
}

/* ============================================================================
   item 3: HERO sits FLUSH inside the host ghostwhite panel — no top gap, no
   colour jump, no overflow past the panel's rounded corners.
   The theme wrapper .ow_page_container .ow_page has: padding:28px 16px 16px,
   background:ghostwhite (#F8F8FF), border-radius:1em (base.css:241). This page
   bleeds horizontally (margin:0 -20px) and its base tone now STARTS at ghostwhite
   (above), so:
     - zero the host panel's TOP padding for THIS route only -> hero is flush;
     - round the page's own TOP corners to match the panel's 1em and clip overflow
       so the -20px bleed can never spill past the rounded top corners.
   Page-scoped by the body class so no other route's .ow_page is affected. */
body.jobchat_ctrl_institutions_index .ow_page_container .ow_page {
    padding-top: 0 !important;
    overflow: hidden;                 /* clip the horizontal bleed to the 1em radius */
}
.jd-institutions-page {
    border-top-left-radius: 1em;
    border-top-right-radius: 1em;
}

/* ============================================================================
   item 4 + 5: STEP-WISE before/after reveal (one comparison at a time).
   Progressive enhancement: without JS the .jdi-compare-track shows every slide
   stacked (fully readable). institutions.js adds .jdi-is-enhanced -> slider mode.
   ============================================================================ */
.jd-institutions-page .jdi-compare {
    background: var(--jd-surface);
    border: 1px solid var(--jd-line);
    border-radius: 16px;
    box-shadow: 0 8px 22px rgba(16, 19, 34, 0.05);
    overflow: hidden;
    padding: 6px;
}

/* --- no-JS fallback: stacked slides, all visible --- */
.jd-institutions-page .jdi-compare-track {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 10px;
}
.jd-institutions-page .jdi-compare-slide {
    background: var(--jd-soft);
    border: 1px solid var(--jd-line);
    border-radius: 12px;
    padding: 16px;
}

/* topic header inside each slide */
.jd-institutions-page .jdi-slide-topic {
    align-items: center;
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}
.jd-institutions-page .jdi-slide-topic i {
    align-items: center;
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.14), rgba(105, 28, 255, 0.14));
    border-radius: 9px;
    color: var(--jd-blue);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 17px;
    height: 40px;
    justify-content: center;
    width: 40px;
}
.jd-institutions-page .jdi-slide-topic span {
    font-size: 17px;
    font-weight: 950;
    letter-spacing: -0.02em;
}

/* the two panes: mobile-first STACKED so before + after are each fully visible */
.jd-institutions-page .jdi-slide-panes {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr;
}
.jd-institutions-page .jdi-pane {
    border-radius: 10px;
    padding: 14px;
}
.jd-institutions-page .jdi-pane p {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.45;
    margin: 6px 0 0;
}
.jd-institutions-page .jdi-pane-tag {
    align-items: center;
    display: inline-flex;
    font-size: 11px;
    font-weight: 950;
    gap: 6px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.jd-institutions-page .jdi-pane-before {
    background: rgba(220, 53, 69, 0.06);
    border: 1px solid rgba(220, 53, 69, 0.18);
}
.jd-institutions-page .jdi-pane-before .jdi-pane-tag { color: #c62330; }
.jd-institutions-page .jdi-pane-before p { color: #6b3438; }
.jd-institutions-page .jdi-pane-after {
    background: rgba(15, 159, 110, 0.07);
    border: 1px solid rgba(15, 159, 110, 0.22);
}
.jd-institutions-page .jdi-pane-after .jdi-pane-tag { color: var(--jd-green); }
.jd-institutions-page .jdi-pane-after p { color: #14603f; }

/* nav (hidden until JS enables the slider) */
.jd-institutions-page .jdi-compare-nav {
    align-items: center;
    display: flex;
    gap: 14px;
    justify-content: center;
    padding: 4px 10px 12px;
}
.jd-institutions-page .jdi-compare-nav[hidden] { display: none; }
.jd-institutions-page .jdi-compare-arrow {
    align-items: center;
    background: #fff;
    border: 1px solid var(--jd-line);
    border-radius: 999px;
    color: var(--jd-ink);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 15px;
    height: 42px;
    justify-content: center;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, opacity 0.18s ease;
    width: 42px;
}
.jd-institutions-page .jdi-compare-arrow:hover {
    background: linear-gradient(90deg, var(--jd-blue), var(--jd-purple));
    border-color: transparent;
    color: #fff;
    transform: translateY(-1px);
}
.jd-institutions-page .jdi-compare-arrow:disabled {
    cursor: default;
    opacity: 0.35;
    transform: none;
}
.jd-institutions-page .jdi-compare-arrow:disabled:hover {
    background: #fff;
    border-color: var(--jd-line);
    color: var(--jd-ink);
}
.jd-institutions-page .jdi-compare-dots {
    align-items: center;
    display: flex;
    gap: 8px;
}
.jd-institutions-page .jdi-compare-dot {
    background: var(--jd-line);
    border: none;
    border-radius: 999px;
    cursor: pointer;
    height: 8px;
    padding: 0;
    transition: width 0.25s ease, background 0.25s ease;
    width: 8px;
}
.jd-institutions-page .jdi-compare-dot.jdi-dot-active {
    background: linear-gradient(90deg, var(--jd-blue), var(--jd-purple));
    width: 26px;
}

/* --- ENHANCED (JS on): one slide at a time, horizontal slider ---
   DRIFT-BUG FIX (2026-08-31): the track must have NO horizontal padding. Each slide is
   `flex:0 0 100%` (= 100% of the track's CONTENT box) while the JS steps the track by
   `translateX(-100% * index)` (= 100% of the track's BORDER box). Any left/right padding
   on the track makes content-box < border-box, so every step over-shifts by the padding
   amount — the transform drifts and a growing white gap opens on the right. Keep the
   track's content box exactly equal to its border box (padding: vertical only, width 100%
   of the clipping viewport) so one slide == one frame == exactly one translate step.
   The little side breathing-room is moved onto the clipping viewport instead. */
.jd-institutions-page .jdi-compare.jdi-is-enhanced .jdi-compare-track {
    display: flex;
    flex-direction: row;
    gap: 0;
    padding: 10px 0;                 /* vertical only — NEVER horizontal (see note above) */
    width: 100%;                     /* width-bounded to the viewport; slides can't widen it */
    transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform;
}
.jd-institutions-page .jdi-compare.jdi-is-enhanced .jdi-compare-slide {
    flex: 0 0 100%;
    max-width: 100%;                 /* clamp so a wide pane can never grow a slide past one frame */
    min-width: 100%;
    margin: 0;
    opacity: 0.35;
    transform: scale(0.98);
    transition: opacity 0.45s ease, transform 0.45s ease;
}
.jd-institutions-page .jdi-compare.jdi-is-enhanced .jdi-compare-slide.jdi-slide-active {
    opacity: 1;
    transform: scale(1);
}
/* wrap the track in a clipping viewport when enhanced.
   overflow-x hidden clips the off-screen slides; the side padding that used to sit on the
   track now lives here so the clip edge (not a shifting inner pad) bounds the frame. */
.jd-institutions-page .jdi-compare.jdi-is-enhanced {
    padding: 0;
}
.jd-institutions-page .jdi-compare-viewport {
    overflow: hidden;
    max-width: 100%;
    padding: 0 10px;
    width: 100%;
}

/* subtle entrance animation for panes as a slide becomes active */
@keyframes jdiPaneIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.jd-institutions-page .jdi-compare.jdi-is-enhanced .jdi-slide-active .jdi-pane-before {
    animation: jdiPaneIn 0.45s ease both;
}
.jd-institutions-page .jdi-compare.jdi-is-enhanced .jdi-slide-active .jdi-pane-after {
    animation: jdiPaneIn 0.45s ease 0.12s both;
}

/* respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .jd-institutions-page .jdi-compare.jdi-is-enhanced .jdi-compare-track,
    .jd-institutions-page .jdi-compare.jdi-is-enhanced .jdi-compare-slide,
    .jd-institutions-page .jdi-compare.jdi-is-enhanced .jdi-slide-active .jdi-pane-before,
    .jd-institutions-page .jdi-compare.jdi-is-enhanced .jdi-slide-active .jdi-pane-after {
        animation: none !important;
        transition: none !important;
    }
}

/* item 5: tablet/desktop, show before + after SIDE BY SIDE (each still full width of its half) */
@media (min-width: 640px) {
    .jd-institutions-page .jdi-slide-panes {
        grid-template-columns: 1fr 1fr;
    }
}

/* ============================================================================
   item 5 (cont): each stat now reads as a full sentence — a bold lead line
   (the deck's own sub-heading) then the context, so the number stands on its
   own with meaning. Give the cards a consistent height + top-align.
   ============================================================================ */
.jd-institutions-page .jdi-stat {
    display: flex;
    flex-direction: column;
}
.jd-institutions-page .jdi-stat span b {
    color: var(--jd-ink);
    display: block;
    font-weight: 900;
    margin-bottom: 3px;
}

/* ============================================================================
   item 6: subtle, tasteful ENTRANCE + HOVER motion. Refined, not gimmicky.
   Entrance uses the house .reveal feel (translateY 24px -> 0, 0.65s ease),
   driven by IntersectionObserver in institutions.js. The hidden start-state is
   only armed once JS confirms support (html.jdi-reveal-on), so a no-JS visitor
   never sees blank content. Everything is disabled under prefers-reduced-motion.
   ============================================================================ */
html.jdi-reveal-on .jd-institutions-page [data-jdi-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}
html.jdi-reveal-on .jd-institutions-page [data-jdi-reveal].jdi-in {
    opacity: 1;
    transform: translateY(0);
}
/* stagger the children of a revealed grid so cards cascade in gently */
html.jdi-reveal-on .jd-institutions-page .jdi-pain-grid [data-jdi-reveal].jdi-in,
html.jdi-reveal-on .jd-institutions-page .jdi-pillar-grid [data-jdi-reveal].jdi-in,
html.jdi-reveal-on .jd-institutions-page .jdi-value-grid [data-jdi-reveal].jdi-in,
html.jdi-reveal-on .jd-institutions-page .jdi-stat-grid [data-jdi-reveal].jdi-in {
    transition-duration: 0.7s;
}
html.jdi-reveal-on .jd-institutions-page [data-jdi-reveal]:nth-child(2) { transition-delay: 0.07s; }
html.jdi-reveal-on .jd-institutions-page [data-jdi-reveal]:nth-child(3) { transition-delay: 0.14s; }
html.jdi-reveal-on .jd-institutions-page [data-jdi-reveal]:nth-child(4) { transition-delay: 0.21s; }

/* refined hover on the stat cards + pillar cards + flow chips (cards already lift;
   extend the same restrained lift + border warmth to the rest for consistency). */
.jd-institutions-page .jdi-stat {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.jd-institutions-page .jdi-stat:hover {
    border-color: rgba(13, 110, 253, 0.28);
    box-shadow: var(--jd-shadow);
    transform: translateY(-2px);
}
.jd-institutions-page .jdi-flow-line span {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.jd-institutions-page .jdi-flow-line span:hover {
    border-color: rgba(13, 110, 253, 0.28);
    box-shadow: 0 10px 24px rgba(16, 19, 34, 0.08);
    transform: translateY(-2px);
}
/* the card icon nudges up as its card lifts — a small, tasteful touch */
.jd-institutions-page .jdi-card > i {
    transition: transform 0.2s ease;
}
.jd-institutions-page .jdi-card:hover > i {
    transform: translateY(-2px) scale(1.04);
}
/* CTA buttons already lift; add a gentle icon slide on the primary CTA */
.jd-institutions-page .jd-primary i {
    transition: transform 0.2s ease;
}
.jd-institutions-page .jd-primary:hover i {
    transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
    html.jdi-reveal-on .jd-institutions-page [data-jdi-reveal] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .jd-institutions-page .jdi-card,
    .jd-institutions-page .jdi-card > i,
    .jd-institutions-page .jdi-stat,
    .jd-institutions-page .jdi-flow-line span,
    .jd-institutions-page .jd-primary,
    .jd-institutions-page .jd-primary i,
    .jd-institutions-page .jd-secondary {
        transition: none !important;
    }
    .jd-institutions-page .jdi-card:hover,
    .jd-institutions-page .jdi-stat:hover,
    .jd-institutions-page .jdi-flow-line span:hover {
        transform: none !important;
    }
}

/* ============================================================================
   item 4 (owner 2026-08-31, deck S6): the "why a career LLM" section is now a
   SLIDE layout — a full-width sub-title on top, then a 50:50 two-column
   comparison stepped one parameter at a time. It REUSES the drift-fixed
   jdi-compare slider (same track / slide / pane classes as section 9), so no
   new slider code and no regression to the drift fix. Only additive, page-scoped
   styling for the wide header + the slide-6 line lives here.
   ============================================================================ */
.jd-institutions-page .jdi-head-wide {
    max-width: 900px;          /* wider than the default 780px so the section reads as a full-width lead */
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.jd-institutions-page .jdi-slide6-title {
    color: var(--jd-blue-dark) !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    letter-spacing: 0.01em;
    line-height: 1.4 !important;
    margin: 10px auto 0 !important;
    max-width: 640px;
}
/* give the "why" comparison a touch more vertical air so it reads as spacious slides */
.jd-institutions-page .jdi-compare-why {
    margin: 4px auto 0;
    max-width: 1000px;
}

/* ============================================================================
   item 7 (owner 2026-08-31): SUBTLE background differentiation for the two
   slider sections + their slider boxes, so each reads as visually distinct.
   Brand-aligned, LOW-contrast gradients built ONLY from the existing --jd-*
   blue / purple / green at very low alpha (max ~0.06) over the page's own
   base tones — no new hues. GPU-cheap CSS gradients (zero extra requests, no
   readability cost: text/panes keep their own opaque surfaces on top).
   The .jdi-slider-section class is added to the two <section>s in the view;
   -a = "Why JOBDHA" (section 8, cool blue→purple), -b = "Before & after"
   (section 9, cool green→teal). Both stay full-width bleed via jdi-block. */
.jd-institutions-page .jdi-slider-section {
    /* full-bleed to the page-padding edges so the tint reads as a band, not a card */
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;                /* owner 2026-08-31: breathing room above each slider band */
}
/* section 8 band — a diagonal blue→indigo→violet wash (cool family). Contrast
   lifted from the old ~0.05 to a clearly visible band while staying well within
   AA (all page ink/panes keep their own opaque surfaces on top). */
.jd-institutions-page .jdi-slider-a {
    background:
        linear-gradient(135deg, rgba(13, 110, 253, 0.12) 0%, rgba(79, 70, 229, 0.11) 55%, rgba(105, 28, 255, 0.12) 100%);
    border-radius: 18px;
}
/* section 9 band — a diagonal green→teal→cyan wash (a DIFFERENT coordinated
   family from section 8), layered over its existing soft ghost base so the two
   bands are unmistakably distinct yet both stay calm and on-brand. */
.jd-institutions-page .jdi-slider-b {
    background:
        linear-gradient(135deg, rgba(15, 159, 110, 0.14) 0%, rgba(13, 148, 136, 0.12) 55%, rgba(6, 148, 162, 0.12) 100%),
        rgba(247, 249, 253, 0.72);
    border-radius: 18px;
}

/* the slider BOXES: TWO SEPARATE coordinated SETS, one hue family per slider,
   each slide a STEPPED tint within its slider's scheme (a distinct modern tinted
   gradient per slide). Only one slide is on-screen at a time, so stepping the
   box tint gives each slide its own colour identity as the user advances.
   All tints are LIGHT washes -> the opaque before/after panes + ink on top keep
   AA contrast; pure CSS gradients = zero extra requests / no load-speed hit. */

/* --- slider-a scheme: BLUE -> INDIGO -> VIOLET progression (7 slides) --- */
.jd-institutions-page .jdi-slider-a .jdi-compare-slide:nth-of-type(1) { background: linear-gradient(160deg, #ffffff 0%, #eef4ff 100%); }
.jd-institutions-page .jdi-slider-a .jdi-compare-slide:nth-of-type(2) { background: linear-gradient(160deg, #ffffff 0%, #e9f0ff 100%); }
.jd-institutions-page .jdi-slider-a .jdi-compare-slide:nth-of-type(3) { background: linear-gradient(160deg, #ffffff 0%, #edeeff 100%); }
.jd-institutions-page .jdi-slider-a .jdi-compare-slide:nth-of-type(4) { background: linear-gradient(160deg, #ffffff 0%, #eeecff 100%); }
.jd-institutions-page .jdi-slider-a .jdi-compare-slide:nth-of-type(5) { background: linear-gradient(160deg, #ffffff 0%, #f0eafe 100%); }
.jd-institutions-page .jdi-slider-a .jdi-compare-slide:nth-of-type(6) { background: linear-gradient(160deg, #ffffff 0%, #f3e9fe 100%); }
.jd-institutions-page .jdi-slider-a .jdi-compare-slide:nth-of-type(7) { background: linear-gradient(160deg, #ffffff 0%, #f5eafe 100%); }

/* --- slider-b scheme: GREEN -> TEAL -> CYAN progression (5 slides) --- */
.jd-institutions-page .jdi-slider-b .jdi-compare-slide:nth-of-type(1) { background: linear-gradient(160deg, #ffffff 0%, #ecfaf3 100%); }
.jd-institutions-page .jdi-slider-b .jdi-compare-slide:nth-of-type(2) { background: linear-gradient(160deg, #ffffff 0%, #e9faf4 100%); }
.jd-institutions-page .jdi-slider-b .jdi-compare-slide:nth-of-type(3) { background: linear-gradient(160deg, #ffffff 0%, #e8f9f7 100%); }
.jd-institutions-page .jdi-slider-b .jdi-compare-slide:nth-of-type(4) { background: linear-gradient(160deg, #ffffff 0%, #e8f8fa 100%); }
.jd-institutions-page .jdi-slider-b .jdi-compare-slide:nth-of-type(5) { background: linear-gradient(160deg, #ffffff 0%, #e9f6fb 100%); }