/* ==========================================================================
   Resources section — shared components + Resources: Hub
   --------------------------------------------------------------------------
   2026-10-19 (Carlos): Resources rebuild, build phase. Loaded only on the
   Resources templates (include/resources.php → readi_res_hub_scripts()).
   Everything is scoped under .res-page (set on <main>), so nothing here
   can reach another page. Components (.res-panel, .res-card, .res-grid,
   .res-pagination, …) are reused as-is by the Collection and single
   templates; hub-only rules sit under .resources-hub-page.

   Values are Figma Y2Wxze54xrEMm3aZ05HjVC: desktop 6230:10282 (1920
   frame: 1632 panels, 1440 content), search 6252:34448, no results
   6252:36032, mobile 6252:36893 (402 frame, 354 content).
   Breakpoints: ≥1200 desktop · 768–1199 tablet · ≤767 mobile.
   ========================================================================== */

.res-page {
    --res-black: #2E2925;
    --res-blue: #3D6BEA;
    --res-blue-050: #EEF3FE;
    --res-blue-100: #D5DFFC;
    --res-blue-300: #7D9CF2;
    --res-grey-200: #E9ECEF;
    --res-grey-400: #ADB5BD;
    --res-grey-500: #8C959D;
    --res-grey-600: #6C757D;
    --res-grey-700: #495057;
    --res-pad: clamp(24px, 5vw, 96px);
    --res-gap: 48px;
    background: #FFFFFF;
    color: var(--res-black);
}

.res-page *,
.res-page *::before,
.res-page *::after {
    box-sizing: border-box;
}

.res-page .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Panels & sections ─────────────────────────────────────────────── */
.res-page .res-panel {
    width: 100%;
    max-width: 1632px;
    margin: 0 auto;
    padding-left: var(--res-pad);
    padding-right: var(--res-pad);
    border-radius: 15px;
}

.res-page .res-panel--blue {
    background: linear-gradient(180deg, rgba(213, 223, 252, 0.5) 0%, rgba(255, 255, 255, 0.5) 100%);
}

.res-page .res-panel--grey {
    background: linear-gradient(180deg, rgba(233, 236, 239, 0.5) 0%, rgba(248, 249, 250, 0) 100%);
}

.res-page .res-section {
    scroll-margin-top: 120px;
}

.res-page .res-section__inner {
    display: flex;
    flex-direction: column;
    gap: var(--res-gap);
    max-width: 1440px;
    margin: 0 auto;
}

.res-page .res-section__heading {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 30px;
    letter-spacing: 0;
    color: var(--res-black);
}

.res-page .res-section--topics   { padding-top: 96px; padding-bottom: 48px; }
.res-page .res-section--types    { padding-top: 48px; padding-bottom: 48px; }
.res-page .res-section--featured { padding-top: 48px; padding-bottom: 48px; }
.res-page .res-section--latest,
.res-page .res-section--results,
.res-page .res-section--empty    { padding-top: 48px; padding-bottom: 192px; }

.res-page ul.res-topic-grid,
.res-page ul.res-type-grid,
.res-page ol.res-pagination__pages {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ── Hero ──────────────────────────────────────────────────────────── */
.res-page .res-hero {
    background: radial-gradient(882px 257px at 50% 0, rgba(222, 226, 230, 0.86667) 0%, rgba(236, 240, 253, 0) 100%);
    padding: 96px 24px 86px; /* Figma: fixed 560px frame, 86px left under the jump links */
    min-height: 560px;
}

.res-page .res-hero__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
    max-width: 710px;
    margin: 0 auto;
}

.res-page .res-hero__text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 100%;
    padding-top: 38px; /* Figma: 14px spacer + 24px gap above the title */
    text-align: center;
}

.res-page .res-hero__title {
    margin: 0;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 400;
    font-size: 48px;
    line-height: 54px;
    letter-spacing: -0.48px;
    color: var(--res-black);
}

.res-page .res-hero__subtitle {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    color: var(--res-grey-600);
}

/* Search box — "search functionality - active" (6230:10561) */
.res-page .res-search {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 24px;
    background: #FFFFFF;
    border: 1px solid var(--res-blue-300);
    border-radius: 10px;
    filter: drop-shadow(0 4px 4px var(--res-blue-100));
    transition: box-shadow 0.2s ease;
}

.res-page .res-search:focus-within {
    box-shadow: 0 0 0 3px rgba(61, 107, 234, 0.15);
}

.res-page .res-search__box {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    cursor: text;
}

.res-page .res-search__icon {
    display: flex;
    flex: 0 0 auto;
    padding: 3px;
}

.res-page .res-search__icon img {
    display: block;
    width: 16px;
    height: 16px;
    transform: scaleX(-1);
}

.res-page .res-search__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 24px;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    box-shadow: none;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.32px;
    color: var(--res-grey-600);
    -webkit-appearance: none;
    appearance: none;
}

.res-page .res-search__input::placeholder {
    color: var(--res-grey-500);
    opacity: 1;
}

.res-page .res-search__input::-webkit-search-cancel-button,
.res-page .res-search__input::-webkit-search-decoration {
    -webkit-appearance: none;
}

.res-page .res-search__key {
    flex: 0 0 auto;
    min-width: 20px;
    margin: 0;
    padding: 0 6px;
    border: 0;
    border-radius: 5px;
    background: var(--res-blue-100);
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.32px;
    color: var(--res-blue);
    cursor: pointer;
}

.res-page .res-search__key:focus-visible {
    outline: 2px solid var(--res-blue);
    outline-offset: 2px;
}

.res-page .res-search__key--clear,
.res-page .res-search.has-value .res-search__key--submit {
    display: none;
}

.res-page .res-search.has-value .res-search__key--clear {
    display: block;
}

/* Jump links — "jump filters" (6230:10923) */
.res-page .res-jump {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

.res-page .res-jump__label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.32px;
    color: var(--res-grey-500);
}

.res-page .res-jump__label img,
.res-page .res-topic-card__cta img {
    display: block;
    width: 11.5px;
    height: 11.5px;
    margin: -0.75px;
}

.res-page .res-jump__links {
    display: flex;
    align-items: center;
    gap: 18px;
}

.res-page .res-jump__link {
    display: inline-flex;
    padding: 10px 24px;
    border-radius: 4px;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 16px; /* 2026-10-20 (Carlos): desktop small link, consistent with site styles (Figma had 12px) */
    line-height: 22px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--res-blue);
    transition: background-color 0.2s ease;
}

.res-page .res-jump__link:hover,
.res-page .res-jump__link:focus-visible {
    background: var(--res-blue-050);
    color: var(--res-blue);
}

/* ── Topic cards — "bento" (6230:10773) ────────────────────────────── */
.res-page .res-topic-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.res-page .res-topic-card {
    display: flex;
    background: #FFFFFF;
    border: 2px solid var(--res-blue-050);
    border-radius: 10px;
    transition: border-color 0.2s ease;
}

.res-page .res-topic-card:hover {
    border-color: var(--res-blue-100);
}

.res-page .res-topic-card__link {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    width: 100%;
    padding: 46px; /* 48px in Figma, minus the 2px border */
    text-decoration: none;
    color: inherit;
}

.res-page .res-topic-card__icon {
    display: flex;
    width: 100%;
    padding: 12px;
    border-radius: 5px;
    background: linear-gradient(90deg, rgba(171, 191, 247, 0.18) 0%, rgba(171, 191, 247, 0.06) 100%);
}

.res-page .res-topic-card__icon img {
    display: block;
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.res-page .res-topic-card__title,
.res-page .res-type-card__title {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 30px;
    color: var(--res-black);
    transition: color 0.2s ease;
}

.res-page .res-topic-card__text {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    color: var(--res-grey-600);
}

.res-page .res-topic-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding: 10px 0;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 16px; /* 2026-10-20 (Carlos): desktop small link, same as .res-jump__link (Figma had 12px) */
    line-height: 22px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--res-blue);
}

.res-page .res-topic-card__cta img {
    transition: transform 0.2s ease;
}

.res-page .res-topic-card:hover .res-topic-card__cta img {
    transform: translateX(4px);
}

/* ── Type cards — "By Format / By Type" (6230:10778) ───────────────── */
.res-page .res-type-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
}

.res-page .res-type-card {
    display: flex;
    min-height: 222px;
    background: #FFFFFF;
    border: 2px solid var(--res-grey-200);
    border-radius: 10px;
    transition: border-color 0.2s ease;
}

.res-page .res-type-card__link {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    width: 100%;
    padding: 46px; /* 48px in Figma, minus the 2px border */
    text-decoration: none;
    color: inherit;
}

.res-page .res-type-card__icon {
    display: flex;
    width: 100%;
    padding: 12px;
    border-radius: 5px;
    background: linear-gradient(90deg, #F5F5F5 0%, rgba(245, 245, 245, 0) 100%);
}

.res-page .res-type-card__icon img {
    display: block;
    width: auto;
    height: auto;
    max-width: 48px;
    max-height: 48px;
}

.res-page .res-type-card:hover {
    border-color: var(--res-blue-100);
}

.res-page .res-type-card:hover .res-type-card__title,
.res-page .res-topic-card:hover .res-topic-card__title {
    color: var(--res-blue);
}

/* ── Featured — "Blog Article" (6230:16064) ────────────────────────── */
.res-page .res-featured {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    padding: 46px; /* 48px in Figma, minus the 2px border */
    background: #FFFFFF;
    border: 2px solid var(--res-grey-200);
    border-radius: 10px;
}

.res-page .res-featured__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 48px;
    flex: 0 1 542px;
    min-width: 0;
}

.res-page .res-featured__copy {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

.res-page .res-featured__head {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.res-page .res-featured__tag,
.res-page .res-card__tag {
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--res-grey-400);
}

.res-page .res-featured__title {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 30px;
    color: var(--res-black);
}

.res-page .res-featured__title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.res-page .res-featured__title a:hover {
    color: var(--res-blue);
}

.res-page .res-featured__meta {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 0.36px;
    color: var(--res-grey-700);
}

.res-page .res-featured__summary {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    color: var(--res-grey-600);
}

.res-page .res-featured__media {
    display: block;
    flex: 0 1 663px;
    aspect-ratio: 663 / 382;
    overflow: hidden;
    border-radius: 15px;
    background: var(--res-grey-200);
}

.res-page .res-featured__media img,
.res-page .res-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.res-page .res-featured__media:hover img,
.res-page .res-card__link:hover .res-card__media img {
    transform: scale(1.03);
}

/* Placeholder when a resource has no featured image: its type icon. */
.res-page .res-featured__media.res-featured__media--empty,
.res-page .res-card__media.res-card__media--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #F1F3F5 0%, #F8F9FA 100%);
}

.res-page .res-featured__media--empty img.res-card__placeholder,
.res-page .res-card__media--empty img.res-card__placeholder {
    width: 48px;
    height: 48px;
    object-fit: contain;
    opacity: 0.6;
    transform: none;
}

/* ── Resource grid + card — "Resources listing" (6230:16211) ───────── */
.res-page .res-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 96px;
}

.res-page .res-card {
    min-width: 0;
}

.res-page .res-card__link {
    display: flex;
    flex-direction: column;
    gap: 24px;
    text-decoration: none;
    color: inherit;
}

.res-page .res-card__media {
    display: block;
    width: 100%;
    aspect-ratio: 464 / 266;
    overflow: hidden;
    border-radius: 10px;
    background: var(--res-grey-200);
}

.res-page .res-card__body {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.res-page .res-card__title {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 30px;
    color: var(--res-blue);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.res-page .res-card__link:hover .res-card__title {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.res-page .res-card__summary {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    color: var(--res-grey-600);
}

/* ── Pagination (6252:34413) ───────────────────────────────────────── */
.res-page .res-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 20px;
    border-top: 1px solid var(--res-grey-200);
}

.res-page .res-pagination__step {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: 0;
    background: none;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.32px;
    color: var(--res-grey-500);
    text-decoration: none;
    cursor: pointer;
}

.res-page .res-pagination__step img {
    display: block;
    width: 20px;
    height: 20px;
}

.res-page .res-pagination__step:hover:not(.is-disabled) {
    color: var(--res-blue);
}

.res-page .res-pagination__step.is-disabled {
    cursor: default;
    opacity: 0.5;
}

.res-page .res-pagination__pages {
    display: flex;
    align-items: flex-start;
    gap: 2px;
}

.res-page .res-pagination__page > a,
.res-page .res-pagination__page > span,
.res-page .res-pagination__page > button,
.res-page .res-pagination__page--gap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 20px;
    background: none;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.32px;
    color: var(--res-grey-500);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.res-page .res-pagination__page--gap {
    cursor: default;
}

.res-page .res-pagination__page > a:hover,
.res-page .res-pagination__page > button:hover {
    background: #F8F9FA;
    color: var(--res-blue);
}

.res-page .res-pagination__page.is-current > span,
.res-page .res-pagination__page.is-current > button {
    background: var(--res-blue-050);
    color: var(--res-blue);
    cursor: default;
}

/* ── Search results / no results / recommended (6252:34448, 6252:36032) */
.res-page .res-results[data-state="idle"],
.res-page .res-results[data-state="results"] [data-res-results-empty],
.res-page .res-results[data-state="empty"] [data-res-results-found] {
    display: none;
}

.res-page.is-searching [data-res-browse] {
    display: none;
}

.res-page .res-results[aria-busy="true"] .res-grid {
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.res-page .res-empty__message {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 30px;
    color: var(--res-black);
    text-align: center;
    overflow-wrap: anywhere;
}

.res-page .res-section--recommended {
    padding: 0;
}

.res-page .res-recommended__header {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 784px;
    margin: 0 auto;
    padding: 0 24px 48px;
    text-align: center;
}

.res-page .res-recommended__eyebrow {
    margin: 0;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--res-grey-500);
}

.res-page .res-recommended__heading {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 36px;
    line-height: 42px;
    color: var(--res-black);
}

.res-page .res-recommended__panel {
    padding-top: 96px;
    padding-bottom: 192px;
}

/* ── Tablet: 768–1199 ──────────────────────────────────────────────── */
@media (max-width: 1199px) {
    .res-page .res-topic-grid,
    .res-page .res-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .res-page .res-grid {
        row-gap: 64px;
    }

    .res-page .res-type-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Featured stacks (image on top) below 992px; side by side above. */
@media (max-width: 991px) {
    .res-page .res-featured {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .res-page .res-featured__text,
    .res-page .res-featured__media {
        flex: 0 0 auto;
        width: 100%;
    }
}

/* ── Mobile: ≤767 (Figma 6252:36893) ───────────────────────────────── */
@media (max-width: 767px) {
    .res-page {
        --res-pad: 24px;
        --res-gap: 24px;
    }

    .res-page .res-section__heading {
        font-weight: 600;
        font-size: 18px;
        line-height: 24px;
    }

    .res-page .res-section--topics   { padding-top: 48px; padding-bottom: 24px; }
    .res-page .res-section--types    { padding-top: 24px; padding-bottom: 24px; }
    .res-page .res-section--featured { padding-top: 24px; padding-bottom: 24px; }
    .res-page .res-section--latest,
    .res-page .res-section--results,
    .res-page .res-section--empty    { padding-top: 24px; padding-bottom: 96px; }

    /* Hero */
    .res-page .res-hero {
        background: radial-gradient(185px 235px at 50% 0, rgba(222, 226, 230, 0.86667) 0%, rgba(236, 240, 253, 0) 100%);
        min-height: 0;
        padding: 96px 24px;
    }

    .res-page .res-hero__inner {
        gap: 24px;
    }

    .res-page .res-hero__text {
        gap: 12px;
        padding-top: 26px; /* 14px spacer + 12px gap */
    }

    .res-page .res-hero__title {
        font-weight: 500;
        font-size: 36px;
        line-height: 38px;
        letter-spacing: 0;
    }

    .res-page .res-hero__subtitle {
        font-size: 14px;
        line-height: 22px;
        letter-spacing: 0.28px;
    }

    .res-page .res-search__input,
    .res-page .res-search__key {
        font-size: 12px;
        line-height: 18px;
        letter-spacing: 0.24px;
    }

    .res-page .res-search__input {
        height: 18px;
    }

    .res-page .res-jump {
        flex-direction: column;
        gap: 0;
    }

    .res-page .res-jump__label {
        font-size: 12px;
        line-height: 18px;
        letter-spacing: 0.24px;
    }

    .res-page .res-jump__links {
        gap: 0;
        flex-wrap: wrap;
        justify-content: center;
    }

    .res-page .res-jump__link {
        padding: 10px 16px;
        font-size: 12px; /* mobile keeps the Figma size */
        letter-spacing: 0.6px;
    }

    .res-page .res-topic-card__cta {
        font-size: 12px; /* mobile keeps the Figma size */
        letter-spacing: 0.6px;
    }

    /* Cards */
    .res-page .res-topic-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .res-page .res-type-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .res-page .res-topic-card__title,
    .res-page .res-type-card__title,
    .res-page .res-featured__title,
    .res-page .res-card__title {
        font-weight: 600;
        font-size: 18px;
        line-height: 24px;
    }

    .res-page .res-topic-card__text,
    .res-page .res-featured__summary,
    .res-page .res-card__summary {
        font-size: 14px;
        line-height: 22px;
        letter-spacing: 0.28px;
    }

    .res-page .res-featured__tag,
    .res-page .res-card__tag {
        font-size: 10px;
        line-height: 16px;
        letter-spacing: 0.5px;
    }

    /* Featured: image on top, full-width button */
    .res-page .res-featured {
        flex-direction: column-reverse;
        gap: 48px;
    }

    .res-page .res-featured__media {
        aspect-ratio: 258 / 148;
        border-radius: 10px; /* 2026-10-20 (Carlos): 10px on mobile (15px desktop) */
    }

    .res-page .res-featured__meta {
        font-weight: 600;
        font-size: 14px;
        line-height: 20px;
        letter-spacing: 0.28px;
        color: var(--res-black);
    }

    /* 2026-10-20 (Carlos): no extra space around the button -- cancels
       responsive_new.css's sitewide mobile .com-btn { margin: 20px 0 } here. */
    .res-page a.com-btn.res-featured__btn {
        width: 100%;
        justify-content: center;
        margin: 0;
    }

    /* Grid */
    .res-page .res-grid {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 24px;
    }

    .res-page .res-card {
        padding-bottom: 24px; /* 2026-10-20 (Carlos) */
    }

    .res-page .res-card__link {
        gap: 12px;
    }

    .res-page .res-card__media {
        aspect-ratio: 354 / 218;
    }

    .res-page .res-card__body {
        gap: 12px;
    }

    .res-page .res-card__summary {
        -webkit-line-clamp: 2;
    }

    /* Pagination: arrows only */
    .res-page .res-pagination__step span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }

    /* No results */
    .res-page .res-empty__message {
        font-weight: 600;
        font-size: 18px;
        line-height: 24px;
    }

    .res-page .res-recommended__header {
        padding-bottom: 24px;
    }

    .res-page .res-recommended__eyebrow {
        font-size: 10px;
        line-height: 16px;
        letter-spacing: 0.5px;
    }

    .res-page .res-recommended__heading {
        font-size: 24px;
        line-height: 30px;
    }

    .res-page .res-recommended__panel {
        padding-top: 48px;
        padding-bottom: 96px;
    }
}

/* ==========================================================================
   Resources: Collection (topic / type pages) — 2026-10-20
   Figma 6231:26670 (topic), 6237:30402 (type). Reuses every hub component;
   adds the breadcrumb, the search + filter pair, and "About this topic".
   ========================================================================== */

/* Hero: 948px column, breadcrumb takes the place of the 14px spacer */
.res-page .res-hero--wide .res-hero__inner {
    max-width: 948px;
}

.res-page .res-hero__text--crumbs {
    padding-top: 0;
}

.res-page .res-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 4px;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 10px;
    line-height: 14px;
    letter-spacing: 0.2px;
    color: var(--res-grey-500);
}

.res-page .res-breadcrumb__link {
    color: var(--res-blue);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.res-page .res-breadcrumb__link:hover {
    color: var(--res-black);
}

.res-page .res-breadcrumb__current {
    color: var(--res-grey-500);
}

/* Search + filter side by side (462px each, 24px gap) */
.res-page .res-controls {
    display: flex;
    gap: 24px;
    width: 100%;
}

.res-page .res-controls .res-search,
.res-page .res-controls .res-filter {
    flex: 1 1 0;
    min-width: 0;
}

.res-page .res-filter {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 24px;
    background: #FFFFFF;
    border: 1px solid var(--res-blue-300);
    border-radius: 10px;
    filter: drop-shadow(0 4px 4px var(--res-blue-100));
    cursor: pointer;
    transition: box-shadow 0.2s ease;
}

.res-page .res-filter:focus-within {
    box-shadow: 0 0 0 3px rgba(61, 107, 234, 0.15);
}

.res-page .res-filter .res-search__icon img {
    transform: none;
}

.res-page .res-filter__select {
    flex: 1 1 auto;
    min-width: 0;
    height: 24px;
    margin: 0;
    padding: 0 36px 0 0;
    border: 0;
    outline: 0;
    background: transparent;
    box-shadow: none;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.32px;
    color: var(--res-grey-500);
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.res-page .res-filter.is-active .res-filter__select {
    color: var(--res-grey-600);
}

.res-page .res-filter__chevron {
    position: absolute;
    top: 50%;
    right: 24px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    pointer-events: none;
}

/* "Jump to" label: 24px side padding on desktop/tablet (Figma 6278:38110;
   2026-10-21 Carlos: same on the hub). Mobile: no side padding. */
.res-page .res-jump__label {
    padding-left: 24px;
    padding-right: 24px;
}

/* First section under the hero gets the 96px top (Figma //Featured y+96) */
.res-page .res-section.res-section--first {
    padding-top: 96px;
}

/* No results: "Clear filter" link + empty list note */
.res-page .res-empty__clear {
    margin: 12px 0 0;
    text-align: center;
}

.res-page .res-empty__clear-link {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--res-blue);
}

.res-page .res-empty__clear-link:hover {
    text-decoration: underline;
}

.res-page .res-empty__note {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    line-height: 24px;
    color: var(--res-grey-600);
}

/* About this topic (6233:28558): header reuses .res-recommended__header */
.res-page .res-section--about {
    padding: 0;
}

.res-page .res-about__panel {
    padding-top: 96px;
    padding-bottom: 96px;
}

.res-page .res-about__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 96px;
    max-width: 950px;
    margin: 0 auto;
}

.res-page .res-about__body {
    width: 100%;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    color: var(--res-grey-600);
}

.res-page .res-about__body > * {
    margin: 0 0 24px;
}

.res-page .res-about__body > *:last-child {
    margin-bottom: 0;
}

.res-page .res-about__body h2,
.res-page .res-about__body h3,
.res-page .res-about__body h4 {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 30px;
    color: var(--res-onix, #343A40);
}

.res-page .res-about__body a {
    color: var(--res-blue);
}

.res-page .res-about__body ul,
.res-page .res-about__body ol {
    padding-left: 24px;
}

/* Sitewide ul li { list-style: none } (style_new.css) removes the markers
   (2026-10-23 audit). */
.res-page .res-about__body ul li { display: list-item; list-style: disc; }
.res-page .res-about__body ol li { display: list-item; list-style: decimal; }

/* Collection — mobile (same rules as the hub, 2026-10-20 mobile styles) */
@media (max-width: 767px) {
    .res-page .res-controls {
        flex-direction: column;
        gap: 12px;
    }

    .res-page .res-jump__label {
        padding-left: 0;
        padding-right: 0;
    }

    .res-page .res-filter__select {
        height: 18px;
        font-size: 12px;
        line-height: 18px;
        letter-spacing: 0.24px;
    }

    .res-page .res-section.res-section--first {
        padding-top: 48px;
    }

    .res-page .res-empty__clear-link {
        font-size: 12px;
        letter-spacing: 0.6px;
    }

    .res-page .res-empty__note,
    .res-page .res-about__body {
        font-size: 14px;
        line-height: 22px;
        letter-spacing: 0.28px;
    }

    .res-page .res-about__body h2,
    .res-page .res-about__body h3,
    .res-page .res-about__body h4 {
        font-weight: 600;
        font-size: 18px;
        line-height: 24px;
        letter-spacing: 0;
    }

    .res-page .res-about__panel {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .res-page .res-about__inner {
        gap: 48px;
    }

    .res-page a.com-btn.res-about__btn {
        width: 100%;
        justify-content: center;
        margin: 0;
    }
}

/* ==========================================================================
   Single resource pages — Resources: Free (2026-10-22)
   Figma 6238:30858 (page), 6238:30912 (resource card), 6238:30947 (About
   modules), 6246:33369 (quote), 6246:33381 (stat), 6243:33210 (related).
   The resource card reuses .res-featured; the Ask About It panel reuses
   assets/css/components/ask-readi.css (.ask-readi classes).
   ========================================================================== */

.res-page {
    --res-onix: #343A40;
}

.res-page .res-single-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding-top: 96px;
    padding-bottom: 48px;
    background: radial-gradient(882px 257px at 50% 0, rgba(222, 226, 230, 0.86667) 0%, rgba(236, 240, 253, 0) 100%) no-repeat;
    background-size: 100% 560px;
}

.res-page .res-single-hero__crumbs {
    padding: 0 24px;
    text-align: center;
}

/* 2026-10-22 (Carlos): the resource card has no fill on the single
   templates (Free + Gated), so the hero's grey glow shows through it.
   The hub/collection featured card keeps its white background. */
.res-page .res-featured.res-single-card {
    background: transparent;
}

/* Topic chips (6244:33331) */
.res-page ul.res-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.res-page .res-chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 11px; /* 6/12 in Figma, minus the 1px border */
    border: 1px solid var(--res-blue);
    border-radius: 5px;
    background: #ECF0FD;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 10px;
    line-height: 16px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--res-blue);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.res-page .res-chip:hover,
.res-page .res-chip:focus-visible {
    background: var(--res-blue);
    color: #FFFFFF;
}

/* Main button + "Ask about it" (6290:38131) */
.res-page .res-single-card__ctas {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch; /* both buttons share the sitewide .com-btn height */
    gap: 24px;
}

.res-page .res-ask-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0;
    padding: 10px 16px; /* 46px with the 2px border: matches the sitewide .com-btn beside it (Figma 42) */
    border: 2px solid var(--res-blue);
    border-radius: 30px;
    background: #ECF0FD;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--res-blue);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.res-page .res-ask-btn:hover {
    background: var(--res-blue-100);
}

.res-page .res-ask-btn:focus-visible {
    outline: 2px solid var(--res-blue);
    outline-offset: 2px;
}

.res-page .res-ask-btn img {
    display: block;
    width: 22px;
    height: 22px;
}

/* YouTube facade (hero media slot + video module) */
.res-page .res-video {
    position: relative;
    overflow: hidden;
    background: var(--res-black);
}

.res-page .res-video__play {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.res-page .res-video .res-video__thumb {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.res-page .res-video__icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 72px;
    height: 72px;
    margin: -36px 0 0 -36px;
    border-radius: 50%;
    background: var(--res-blue);
    box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.2);
    transition: transform 0.2s ease;
}

.res-page .res-video__icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -11px 0 0 -7px;
    border-style: solid;
    border-width: 11px 0 11px 18px;
    border-color: transparent transparent transparent #FFFFFF;
}

.res-page .res-video__play:hover .res-video__icon,
.res-page .res-video__play:focus-visible .res-video__icon {
    transform: scale(1.08);
}

.res-page .res-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* About modules (6238:30947) */
.res-page .res-section--modules {
    padding: 0;
}

.res-page .res-modules__header {
    padding-top: 48px;
}

.res-page .res-modules__panel {
    padding-top: 96px;
    padding-bottom: 192px;
}

.res-page .res-modules {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 950px; /* Figma "Article" column, 6238:30950 */
    margin: 0 auto;
}

.res-page .res-mod-heading {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    color: var(--res-black);
}

.res-page .res-mod-heading--h3 { font-size: 36px; line-height: 42px; }
.res-page .res-mod-heading--h4 { font-size: 24px; line-height: 30px; }

.res-page .res-mod-text {
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    line-height: 24px;
    color: var(--res-grey-600);
}

.res-page .res-mod-text > * { margin: 0 0 24px; }

/* 2026-10-22 (Carlos): module paragraphs match the card summary
   (.res-featured__summary). Set on the elements themselves: style_new.css's
   global p { font-size: 18px } otherwise wins over the inherited mobile size. */
.res-page .res-mod-text p,
.res-page .res-mod-text li {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 0;
    color: var(--res-grey-600);
}
.res-page .res-mod-text > *:last-child { margin-bottom: 0; }
.res-page .res-mod-text a { color: var(--res-blue); }
.res-page .res-mod-text ul,
.res-page .res-mod-text ol { padding-left: 24px; }
/* style_new.css removes list markers sitewide (ul li { list-style: none }). */
.res-page .res-mod-text ul li { display: list-item; list-style: disc; }
.res-page .res-mod-text ol li { display: list-item; list-style: decimal; }
.res-page .res-mod-text li + li { margin-top: 8px; }

.res-page .res-mod-images {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
}

.res-page .res-mod-images--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.res-page .res-mod-images__item {
    margin: 0;
    overflow: hidden;
    border-radius: 15px;
    aspect-ratio: 954 / 463;
    background: var(--res-grey-200);
}

.res-page .res-mod-images--two .res-mod-images__item {
    aspect-ratio: 1 / 1;
}

.res-page .res-mod-images__item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.res-page .res-mod-video {
    border-radius: 15px;
    aspect-ratio: 16 / 9;
}

.res-page .res-mod-callout {
    padding: 48px;
    border-radius: 15px;
    background: var(--res-blue-050);
}

.res-page .res-mod-callout p {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 0.36px;
    color: var(--res-blue);
}

.res-page .res-mod-quote {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin: 0;
    padding: 48px;
    border-radius: 10px;
    background: var(--res-grey-700);
    color: #F8F9FA;
}

.res-page .res-mod-quote blockquote,
.res-page .res-mod-quote blockquote p {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 36px;
    line-height: 42px;
    color: #F8F9FA;
}

.res-page .res-mod-quote figcaption {
    display: flex;
    flex-direction: column;
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    line-height: 24px;
}

.res-page .res-mod-quote__name {
    font-weight: 700;
    letter-spacing: 0.36px;
}

.res-page ul.res-mod-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.res-page ul.res-mod-stats--1 { grid-template-columns: minmax(0, 1fr); }
.res-page ul.res-mod-stats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.res-page .res-mod-stat {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    padding: 48px;
    border-radius: 15px;
    background: #FFFFFF;
    box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.1);
}

.res-page .res-mod-stat__body {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.res-page .res-mod-stat__value {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 36px;
    line-height: 42px;
    color: var(--res-blue);
}

.res-page .res-mod-stat__label {
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    line-height: 24px;
    color: var(--res-grey-600);
}

.res-page .res-mod-stat__source {
    font-family: 'Roboto', sans-serif;
    font-size: 10px;
    line-height: 14px;
    letter-spacing: 0.2px;
    color: var(--res-onix);
}

/* Related: directly under the modules panel; 96px from the card without them */
.res-page.resources-single-page--no-about .res-section--related {
    padding-top: 48px;
}

/* Single — tablet */
@media (max-width: 991px) {
    .res-page ul.res-mod-stats {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Single — mobile (hub patterns + 2026-10-20 mobile rules) */
@media (max-width: 767px) {
    .res-page .res-single-hero {
        padding-top: 48px;
        padding-bottom: 24px;
        background: radial-gradient(185px 235px at 50% 0, rgba(222, 226, 230, 0.86667) 0%, rgba(236, 240, 253, 0) 100%) no-repeat;
        background-size: 100% 512px;
    }

    /* 2026-10-22 (Carlos): buttons span the card's text column. */
    .res-page .res-single-card__ctas {
        flex-direction: column;
        align-items: stretch;
        align-self: stretch;
        width: 100%;
        gap: 12px;
    }

    .res-page .res-ask-btn {
        width: 100%;
        font-size: 14px;
        letter-spacing: 0.7px;
    }

    .res-page .res-featured__media.res-video {
        border-radius: 10px;
    }

    .res-page .res-modules__header {
        padding-top: 24px;
    }

    .res-page .res-modules__panel {
        padding-top: 48px;
        padding-bottom: 96px;
    }

    .res-page .res-mod-heading--h3 { font-size: 24px; line-height: 30px; }
    .res-page .res-mod-heading--h4 { font-weight: 600; font-size: 18px; line-height: 24px; }

    .res-page .res-mod-text,
    .res-page .res-mod-stat__label,
    .res-page .res-mod-quote figcaption {
        font-size: 14px;
        line-height: 22px;
        letter-spacing: 0.28px;
    }

    .res-page .res-mod-text p,
    .res-page .res-mod-text li {
        font-size: 14px;
        line-height: 22px;
        letter-spacing: 0.28px;
    }

    .res-page .res-mod-images--two {
        grid-template-columns: minmax(0, 1fr);
    }

    .res-page .res-mod-images__item,
    .res-page .res-mod-video {
        border-radius: 10px;
    }

    .res-page .res-mod-callout,
    .res-page .res-mod-quote,
    .res-page .res-mod-stat {
        padding: 24px;
    }

    .res-page .res-mod-callout p {
        font-size: 14px;
        line-height: 22px;
        letter-spacing: 0.28px;
    }

    .res-page .res-mod-quote blockquote,
    .res-page .res-mod-quote blockquote p,
    .res-page .res-mod-stat__value {
        font-size: 24px;
        line-height: 30px;
    }

    .res-page ul.res-mod-stats {
        gap: 12px;
    }

    .res-page.resources-single-page--no-about .res-section--related {
        padding-top: 24px;
    }
}

/* ==========================================================================
   Resources: Gated (2026-10-22) — Figma 6240:31356 (document), 6241:32394
   (webinar). Form card in the hero media slot (6240:31650), webinar date
   line (.res-featured__meta, above), Speakers module (6241:32441).
   Behaviour: assets/js/resources-gated.js.
   ========================================================================== */

/* Elements toggled with [hidden] that also have a display value here. */
.res-page .res-gate [hidden],
.res-page .res-single-card__ctas[hidden] {
    display: none;
}

.res-page .res-gate {
    position: relative;
    flex: 0 1 663px;
    min-width: 0;
}

.res-page .res-gate__card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px;
    border-radius: 15px;
    background: #FFFFFF;
    box-shadow: 0 20px 24px -4px rgba(16, 24, 40, 0.1); /* Shadow/xl */
}

.res-page .res-gate__form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
    margin: 0;
}

.res-page .res-gate__fields {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

.res-page .res-gate__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.res-page .res-gate__label {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: var(--res-grey-700);
}

.res-page .res-gate__input {
    width: 100%;
    height: 60px;
    margin: 0;
    padding: 10px 14px;
    border: 1px solid rgba(222, 226, 230, 0.87);
    border-radius: 5px;
    background: #FFFFFF;
    box-shadow: 0 1px 1px rgba(73, 80, 87, 0.1);
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    color: var(--res-onix);
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.res-page .res-gate__input:focus {
    outline: none;
    border-color: var(--res-blue);
    box-shadow: 0 0 0 3px rgba(61, 107, 234, 0.1);
}

.res-page .res-gate__field.is-error .res-gate__input {
    border-color: #E51F37;
}

.res-page .res-gate__error {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    line-height: 16px;
    color: #E51F37;
}

/* Honeypot: off-screen, never seen or tabbed to. */
.res-page .res-gate__hp {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.res-page .res-gate__check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: var(--res-grey-700);
    cursor: pointer;
}

.res-page .res-gate__check input {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    accent-color: var(--res-blue);
    cursor: pointer;
}

.res-page .res-gate__field.is-error .res-gate__check input {
    outline: 1px solid #E51F37;
    outline-offset: 1px;
}

.res-page .res-gate__captcha {
    min-height: 65px; /* Turnstile widget height, so nothing jumps when it loads */
}

.res-page .res-gate__status {
    margin: -24px 0 0;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    color: #E51F37;
}

/* Submit: the sitewide a.com-btn look (style_new.css) on a <button>. */
.res-page .res-gate__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 46px;
    margin: 0;
    padding: 7px 26px;
    border: 0;
    border-radius: 50px;
    background: var(--res-blue);
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    text-transform: uppercase;
    color: #FFFFFF;
    cursor: pointer;
    transition: background-color 0.2s ease, padding 0.3s ease;
}

.res-page .res-gate__submit i {
    transition: transform 0.3s ease;
}

.res-page .res-gate__submit:hover,
.res-page .res-gate__submit:focus-visible {
    padding-right: 40px;
    background: #1238A0;
}

.res-page .res-gate__submit:hover i,
.res-page .res-gate__submit:focus-visible i {
    transform: translateX(10px);
}

.res-page .res-gate__submit:focus-visible {
    outline: 2px solid var(--res-blue);
    outline-offset: 2px;
}

.res-page .res-gate.is-busy .res-gate__submit {
    opacity: 0.6;
    cursor: progress;
}

/* After the form */
.res-page .res-gate__done {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
}

.res-page .res-gate__done:focus {
    outline: none;
}

.res-page .res-gate__done-title {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 30px;
    color: var(--res-black);
}

.res-page .res-gate__done-text {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    color: var(--res-grey-600);
}

.res-page a.com-btn.res-gate__done-btn {
    justify-content: center;
    margin: 0;
}

/* Returning visitor: form hidden while the unlock is checked. */
.res-page .res-gate.is-checking .res-gate__form {
    visibility: hidden;
}

.res-page .res-gate.is-checking .res-gate__card::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 32px;
    height: 32px;
    margin: -16px 0 0 -16px;
    border: 3px solid var(--res-blue-100);
    border-top-color: var(--res-blue);
    border-radius: 50%;
    animation: res-gate-spin 0.8s linear infinite;
}

@keyframes res-gate-spin {
    to { transform: rotate(360deg); }
}

/* Speakers module (6241:32441) */
.res-page ul.res-mod-speakers {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.res-page .res-mod-speaker {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.res-page .res-mod-speaker__photo {
    display: block;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    border-radius: 15px;
    background: var(--res-grey-200);
}

.res-page .res-mod-speaker__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.res-page .res-mod-speaker__text {
    display: flex;
    flex-direction: column;
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    line-height: 24px;
}

.res-page .res-mod-speaker__name {
    font-weight: 700;
    letter-spacing: 0.36px;
    color: var(--res-black);
}

.res-page .res-mod-speaker__role {
    font-weight: 400;
    color: var(--res-grey-600);
}

.res-page hr.res-mod-divider {
    width: 100%;
    height: 0;
    margin: 0;
    border: 0;
    border-top: 1px solid var(--res-grey-500);
    background: none;
    opacity: 1;
}

/* Tablet: text first, then the form (the free page shows its image first). */
@media (max-width: 991px) {
    .res-page .res-featured.res-single-card--gated {
        flex-direction: column;
    }

    .res-page .res-gate {
        flex: 0 0 auto;
        width: 100%;
    }
}

/* Gated — mobile (hub patterns + 2026-10-20/22 mobile rules) */
@media (max-width: 767px) {
    .res-page .res-featured.res-single-card--gated {
        flex-direction: column;
        gap: 24px;
    }

    /* The form already sits in the bordered resource card: no second card. */
    .res-page .res-gate__card {
        padding: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .res-page .res-gate__form {
        align-items: stretch;
        gap: 24px;
    }

    .res-page .res-gate__fields {
        gap: 16px;
    }

    .res-page .res-gate__input {
        height: 52px; /* 16px text: no iOS zoom */
    }

    .res-page .res-gate__check {
        font-size: 12px;
        line-height: 18px;
    }

    .res-page .res-gate__status {
        margin-top: 0;
    }

    /* 2026-10-22 (Carlos): buttons fill the container. */
    .res-page .res-gate__submit,
    .res-page a.com-btn.res-gate__done-btn {
        width: 100%;
        font-size: 14px;
    }

    .res-page .res-gate__done-title {
        font-size: 18px;
        line-height: 24px;
    }

    .res-page .res-gate__done-text {
        font-size: 14px;
        line-height: 22px;
        letter-spacing: 0.28px;
    }

    .res-page ul.res-mod-speakers {
        gap: 12px;
    }

    .res-page .res-mod-speaker {
        gap: 12px;
    }

    .res-page .res-mod-speaker__photo {
        border-radius: 10px;
    }

    .res-page .res-mod-speaker__text {
        font-size: 14px;
        line-height: 22px;
    }

    .res-page .res-mod-speaker__name {
        letter-spacing: 0.28px;
    }

    .res-page .res-mod-speaker__role {
        letter-spacing: 0.28px;
    }
}

/* ==========================================================================
   Resources: Article + Success Story (2026-10-23) — Figma 6241:32741 and
   6252:33497. Hero byline + second button, article body with sticky
   sidebar, content styles (.res-prose), stat cards, At a glance cards.
   ========================================================================== */

/* Hero: author + date (6241:33041) */
.res-page .res-byline {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.res-page .res-byline__author {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 0.36px;
    color: var(--res-black);
}

.res-page .res-byline__author strong {
    font-weight: 700;
}

.res-page .res-byline__avatar {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    overflow: hidden;
    border-radius: 50%;
    background: #D9D9D9;
}

.res-page .res-byline__avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.res-page .res-byline__date {
    font-family: 'Roboto', sans-serif;
    font-size: 10px;
    line-height: 14px;
    letter-spacing: 0.2px;
    color: var(--res-black);
}

/* Second hero button ("Download"): the outlined light-blue button. */
.res-page a.res-ask-btn {
    text-decoration: none;
}

.res-page a.res-ask-btn i {
    font-size: 20px;
    line-height: 1;
}

/* Body: column + sidebar (6241:32788) */
.res-page .res-section--article {
    padding-top: 48px;
}

.res-page .res-article__panel {
    padding-top: 96px;
    padding-bottom: 192px;
}

.res-page .res-article {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 48px;
    max-width: 1440px;
    margin: 0 auto;
}

.res-page .res-article__main {
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex: 0 1 834px; /* 2026-10-23 (Carlos): 834px max (Figma 954) */
    min-width: 0;
}

.res-page .res-article__side {
    flex: 0 0 346px;
    align-self: stretch;
    min-width: 0; /* long table-of-contents titles must not widen it */
}

.res-page .res-article__side-inner {
    position: sticky;
    top: 128px; /* below the 96px sticky site header */
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.res-page .res-side-module {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.res-page .res-side-module__label {
    margin: 0;
    padding-bottom: 12px;
    border-bottom: 1px solid #DEE2E6;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--res-grey-500);
}

.res-page ul.res-toc {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.res-page ul.res-toc li {
    min-width: 0;
}

/* 2026-10-23 (Carlos): one line per entry; long titles end in "…"
   (full title on hover). */
.res-page .res-toc__link {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    color: var(--res-blue);
    text-decoration: none;
}

.res-page .res-toc__link:hover,
.res-page .res-toc__link:focus-visible {
    text-decoration: underline;
}

.res-page .res-toc__link[aria-current] {
    color: var(--res-black);
}

.res-page .res-share {
    display: flex;
    align-items: center;
    gap: 48px;
}

.res-page .res-share__btn {
    display: inline-flex;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.res-page .res-share__btn img {
    display: block;
}

.res-page .res-share__status {
    margin-left: -24px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: var(--res-grey-600);
}

.res-page .res-side-module__text {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 30px;
    color: var(--res-black);
}

.res-page a.com-btn.res-side-module__btn {
    width: 100%;
    justify-content: center;
    margin: 36px 0 0; /* 48px from the text in the Figma, minus the module gap */
}

/* Key takeaways (6241:32802) */
.res-page .res-takeaways {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 48px;
    border-radius: 15px;
    background: var(--res-onix);
}

.res-page .res-takeaways__title {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 30px;
    color: #FFFFFF;
}

.res-page .res-takeaways p.res-takeaways__text {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    color: #FFFFFF;
}

/* Post content */
.res-page .res-prose > * {
    margin-top: 0;
    margin-bottom: 0;
}

.res-page .res-prose > * + * {
    margin-top: 24px;
}

.res-page .res-prose h2,
.res-page .res-glance__heading {
    margin-bottom: 0;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 30px;
    color: var(--res-black);
    scroll-margin-top: 128px;
}

.res-page .res-glance__heading {
    margin: 0;
}

.res-page .res-prose h3,
.res-page .res-prose h4,
.res-page .res-prose h5 {
    margin-bottom: 0;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 0.36px;
    color: var(--res-black);
}

.res-page .res-prose > h2 + h3,
.res-page .res-prose > h2 + h4 {
    margin-top: 12px;
}

.res-page .res-prose p,
.res-page .res-prose li,
.res-page p.res-prose__dateline {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    color: var(--res-grey-600);
}

.res-page .res-prose p,
.res-page p.res-prose__dateline,
.res-page p.res-prose__pdf {
    margin-bottom: 0;
}

.res-page .res-prose strong,
.res-page .res-prose b {
    font-weight: 700;
    color: var(--res-grey-700);
}

.res-page .res-prose a {
    color: var(--res-blue);
    text-decoration: underline;
}

.res-page .res-prose ul,
.res-page .res-prose ol {
    padding-left: 24px;
    list-style: disc;
}

.res-page .res-prose ol {
    list-style: decimal;
}

.res-page .res-prose li {
    display: list-item;
    list-style: inherit; /* the sitewide styles drop list markers */
}

.res-page .res-prose li + li {
    margin-top: 8px;
}

.res-page .res-prose img {
    max-width: 100%;
    height: auto;
    border-radius: 15px;
}

.res-page .res-prose figure {
    margin-left: 0;
    margin-right: 0;
}

.res-page .res-prose figure img {
    display: block;
    width: 100%;
}

.res-page .res-prose figcaption {
    margin-top: 8px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: var(--res-grey-600);
    text-align: left;
}

.res-page .res-prose iframe {
    display: block;
    max-width: 100%;
    border: 0;
    border-radius: 15px;
}

.res-page .res-prose .wp-block-embed__wrapper {
    position: relative;
    aspect-ratio: 16 / 9;
}

.res-page .res-prose .wp-block-embed__wrapper iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.res-page .res-prose hr,
.res-page .res-prose .wp-block-separator {
    height: 0;
    border: 0;
    border-top: 1px solid #DEE2E6;
    background: none;
    opacity: 1;
}

.res-page .res-prose table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 22px;
    color: var(--res-grey-600);
}

.res-page .res-prose th,
.res-page .res-prose td {
    padding: 12px;
    border-bottom: 1px solid #DEE2E6;
    text-align: left;
}

.res-page .res-prose th {
    font-weight: 700;
    color: var(--res-black);
}

/* Quote block + story quote (6246:33369) */
.res-page .res-prose blockquote,
.res-page .res-quote {
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
    padding: 48px;
    border: 0;
    border-radius: 10px;
    background: var(--res-grey-700);
    color: #F8F9FA;
}

.res-page .res-quote blockquote {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
}

.res-page .res-prose blockquote p,
.res-page .res-quote blockquote p {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 36px;
    line-height: 42px;
    font-style: normal;
    color: #F8F9FA;
}

.res-page .res-prose blockquote p + p {
    margin-top: 24px;
}

.res-page .res-prose blockquote cite,
.res-page .res-quote figcaption {
    display: flex;
    flex-direction: column;
    margin-top: 24px;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 0.36px;
    font-style: normal;
    color: #F8F9FA;
}

.res-page .res-quote__role {
    font-weight: 400;
    letter-spacing: 0;
}

/* Pullquote block = callout (6242:33175) */
.res-page .res-prose .wp-block-pullquote {
    margin-left: 0;
    margin-right: 0;
    padding: 48px;
    border: 0;
    border-radius: 15px;
    background: var(--res-blue-050);
    text-align: left;
}

.res-page .res-prose .wp-block-pullquote blockquote {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
}

.res-page .res-prose .wp-block-pullquote p {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 0.36px;
    color: var(--res-blue);
}

.res-page .res-prose .wp-block-pullquote cite {
    margin-top: 12px;
    font-size: 14px;
    line-height: 20px;
    color: var(--res-blue);
}

/* Stat cards: [res_stats] and the story highlight (6246:33380, 6252:33579) */
.res-page .res-stats {
    display: flex;
    gap: 16px;
}

.res-page .res-stats > p,
.res-page .res-stats > br {
    display: none; /* stray wpautop wrappers around the shortcodes */
}

.res-page .res-stat {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
    padding: 48px;
    border-radius: 15px;
    background: #FFFFFF;
    box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.1); /* Shadow/lg */
}

.res-page .res-stat__body {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.res-page .res-stat__value {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 36px;
    line-height: 42px;
    color: var(--res-blue);
}

.res-page .res-stat__text {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    color: var(--res-grey-600);
}

.res-page .res-stat__source {
    font-family: 'Roboto', sans-serif;
    font-size: 10px;
    line-height: 14px;
    letter-spacing: 0.2px;
    color: var(--res-onix);
}

/* At a glance (6252:33913) */
.res-page ul.res-glance {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.res-page .res-glance__card {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 48px;
    border-radius: 15px;
    background: #FFFFFF;
}

.res-page .res-glance__label {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 0.36px;
    color: var(--res-blue);
}

.res-page .res-glance__text {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    color: var(--res-grey-600);
}

/* About the author (6241:33051) */
.res-page .res-author {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.res-page hr.res-author__line {
    width: 100%;
    height: 0;
    margin: 0;
    border: 0;
    border-top: 1px solid #DEE2E6;
    background: none;
    opacity: 1;
}

.res-page .res-author__title {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 0.36px;
    color: var(--res-black);
}

.res-page p.res-author__bio {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    color: var(--res-grey-600);
}

@media (max-width: 1199px) {
    .res-page .res-article__side {
        flex-basis: 280px;
    }
}

/* Tablet and mobile: one column; the sidebar follows the article and the
   table of contents is hidden (it would sit after the content). */
@media (max-width: 991px) {
    .res-page .res-article {
        flex-direction: column;
        align-items: stretch;
    }

    .res-page .res-article__main,
    .res-page .res-article__side {
        flex: 0 0 auto;
        width: 100%;
    }

    .res-page .res-article__side-inner {
        position: static;
    }

    .res-page .res-side-module--toc {
        display: none;
    }
}

@media (max-width: 767px) {
    .res-page .res-byline {
        gap: 12px;
    }

    .res-page .res-byline__author {
        font-size: 14px;
        line-height: 22px;
        letter-spacing: 0.28px;
    }

    .res-page a.res-ask-btn.res-single-card__btn2 {
        width: 100%;
        font-size: 14px;
        letter-spacing: 0.7px;
    }

    .res-page .res-section--article {
        padding-top: 24px;
    }

    .res-page .res-article__panel {
        padding-top: 48px;
        padding-bottom: 96px;
    }

    .res-page .res-side-module__label {
        font-size: 12px;
        line-height: 16px;
        letter-spacing: 0.6px;
    }

    .res-page .res-side-module__text {
        font-size: 18px;
        line-height: 24px;
    }

    .res-page a.com-btn.res-side-module__btn {
        margin-top: 12px;
        font-size: 14px;
    }

    .res-page .res-takeaways,
    .res-page .res-prose blockquote,
    .res-page .res-quote,
    .res-page .res-prose .wp-block-pullquote,
    .res-page .res-stat,
    .res-page .res-glance__card {
        padding: 24px;
    }

    .res-page .res-takeaways__title,
    .res-page .res-prose h2,
    .res-page .res-glance__heading {
        font-weight: 600;
        font-size: 18px;
        line-height: 24px;
    }

    .res-page .res-prose h3,
    .res-page .res-prose h4,
    .res-page .res-prose h5,
    .res-page .res-author__title {
        font-size: 16px;
        line-height: 22px;
        letter-spacing: 0.32px;
    }

    .res-page .res-takeaways p.res-takeaways__text,
    .res-page .res-prose p,
    .res-page .res-prose li,
    .res-page p.res-prose__dateline,
    .res-page p.res-author__bio,
    .res-page .res-stat__text,
    .res-page .res-glance__label,
    .res-page .res-glance__text,
    .res-page .res-prose .wp-block-pullquote p {
        font-size: 14px;
        line-height: 22px;
        letter-spacing: 0.28px;
    }

    .res-page .res-prose blockquote p,
    .res-page .res-quote blockquote p,
    .res-page .res-stat__value {
        font-size: 24px;
        line-height: 30px;
    }

    .res-page .res-prose blockquote cite,
    .res-page .res-quote figcaption {
        font-size: 14px;
        line-height: 22px;
        letter-spacing: 0.28px;
    }

    .res-page .res-prose img,
    .res-page .res-prose iframe,
    .res-page .res-takeaways,
    .res-page .res-prose .wp-block-pullquote,
    .res-page .res-stat,
    .res-page .res-glance__card {
        border-radius: 10px;
    }

    .res-page .res-stats {
        flex-direction: column;
        gap: 12px;
    }

    .res-page ul.res-glance {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .res-page a.com-btn.res-prose__pdf,
    .res-page .res-prose__pdf a.com-btn {
        width: 100%;
        justify-content: center;
        margin: 0;
    }
}

/* Article/Story body built from modules (2026-10-23): Large heading = H2
   section (table of contents), Small = H3 subheading (Figma 6241:33045). */
.res-page .res-mod-heading--h2 {
    font-size: 24px;
    line-height: 30px;
    scroll-margin-top: 128px;
}

.res-page .res-mod-heading--sub {
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 0.36px;
}

.res-page .res-mod-heading--h2 + .res-mod-heading--sub {
    margin-top: -12px; /* 12px under the heading inside the 24px column gap */
}

@media (max-width: 767px) {
    .res-page .res-mod-heading--h2 {
        font-weight: 600;
        font-size: 18px;
        line-height: 24px;
    }

    .res-page .res-mod-heading--sub {
        font-size: 16px;
        line-height: 22px;
        letter-spacing: 0.32px;
    }
}

/* 2026-10-23 (Carlos): 24px more space above each section heading
   (48px with the column gap), except at the very top of the content. */
.res-page .res-article__main > .res-mod-heading--h2,
.res-page .res-article__main > .res-glance__heading {
    margin-top: 24px;
}

.res-page .res-article__main > .res-mod-heading--h2:first-child,
.res-page .res-article__main > .res-glance__heading:first-child {
    margin-top: 0;
}

.res-page .res-prose > h2:not(:first-child) {
    margin-top: 48px;
}

/* 2026-10-23 audit: mobile rules applied consistently across templates. */
@media (max-width: 767px) {
    /* "About this topic" paragraphs and list items (sitewide p rule). */
    .res-page .res-about__body p,
    .res-page .res-about__body li {
        font-size: 14px;
        line-height: 22px;
        letter-spacing: 0.28px;
    }

    /* Shared final CTA: buttons fill the width, like every other CTA here. */
    .res-page .rd-final-cta__ctas a.com-btn,
    .res-page .rd-final-cta__ctas a.com-btn-outlined {
        width: 100%;
        justify-content: center;
        margin: 0;
    }
}