/* ═══════════════════════════════════════════════
   SHOEBOX OH Resource Hub — Styles
   /wp-content/plugins/shoebox-oh-resource-hub/assets/css/oh-hub.css
   ═══════════════════════════════════════════════ */

/* ── Variables ── */
:root {
    --oh-navy: #1B2A4A;
    --oh-blue: #1565A0;
    --oh-blue-dark: #1B7ABD;
    --oh-blue-light: #DCEEF9;
    --oh-accent: #E87722;
    --oh-gray-light: #F5F7FA;
    --oh-gray-mid: #6B7280;
    --oh-gray-dark: #333333;
    --oh-white: #FFFFFF;
    --oh-radius: 8px;
    --oh-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    --oh-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.12);
    --oh-transition: 0.2s ease;
    --oh-max-width: 1200px;
}

/* ── Breadcrumbs ── */
.oh-breadcrumbs {
    font-size: 14px;
    color: var(--oh-gray-mid);
    padding: 12px 0;
    margin-bottom: 0;
}
.oh-breadcrumbs a {
    color: var(--oh-blue-dark);
    text-decoration: none;
}
.oh-breadcrumbs a:hover {
    text-decoration: underline;
}
.oh-breadcrumb-sep {
    margin: 0 8px;
    color: #CBD5E1;
}
.oh-breadcrumb-current {
    color: var(--oh-gray-dark);
}


/* ═══════════════════════════════════════════════
   HUB LANDING PAGE (/occupational-health/)
   ═══════════════════════════════════════════════ */

/* ── Hero ── */
.oh-hub-hero {
    background: linear-gradient(135deg, #1B7ABD 0%, #2B97DF 100%);
    color: var(--oh-white);
    padding: 48px 24px 56px;
    text-align: center;
    border-radius: 0;
    /* 2026-05-21: full-bleed blue band, shorter — matches HS hub design */
    margin: 0 0 48px;
    position: relative;
    overflow: hidden;
    z-index: 0;
}
.oh-hub-hero h1 {
    font-size: 34px;
    line-height: 1.2;
    margin: 0 0 12px;
}
.oh-hub-hero p {
    font-size: 17px;
    max-width: 720px;
    margin: 0 auto 20px;
}

/* When a Featured Image is set, use it as background */
.oh-hub-hero--has-bg {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}
.oh-hub-hero--has-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(27, 122, 189, 0.90) 0%, rgba(43, 151, 223, 0.85) 100%);
    z-index: 1;
}
.oh-hub-hero--has-bg .oh-hub-hero-inner {
    position: relative;
    z-index: 2;
}
.oh-hub-hero h1 {
    font-size: 40px;
    font-weight: 700;
    margin: 0 0 16px;
    color: var(--oh-white);
}
.oh-hub-hero p {
    font-size: 19px;
    color: #fff;
    max-width: 640px;
    margin: 0 auto 32px;
    line-height: 1.6;
}
.oh-hub-search {
    max-width: 480px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    display: flex;
}
.oh-hub-landing .oh-hub-search input[type="text"] {
    width: 100%;
    padding: 14px 20px 14px 48px !important;
    border: 2px solid #fff;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.95);
    color: var(--oh-text);
    font-size: 16px;
    outline: none;
    transition: var(--oh-transition);
    box-sizing: border-box;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
.oh-hub-landing .oh-hub-search input[type="text"]::placeholder {
    color: #999;
}
.oh-hub-landing .oh-hub-search input[type="text"]:focus {
    border-color: var(--oh-accent);
    background: #fff;
}
.oh-hub-landing .oh-hub-search > svg {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    stroke: #999;
    fill: none;
    pointer-events: none;
    z-index: 3;
    display: block;
}

/* ── Content Type Nav Cards ── */
.oh-nav-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: var(--oh-max-width);
    margin: 0 auto 64px;
    padding: 0 24px;
}
@media (max-width: 1024px) {
    .oh-nav-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 600px) {
    .oh-nav-cards {
        grid-template-columns: 1fr;
    }
}
.oh-nav-card {
    background: var(--oh-white);
    border: 1px solid #E5E7EB;
    border-radius: var(--oh-radius);
    padding: 28px 24px;
    text-decoration: none;
    color: var(--oh-gray-dark);
    transition: var(--oh-transition);
    display: flex;
    flex-direction: column;
    box-shadow: var(--oh-shadow);
}
.oh-nav-card:hover {
    box-shadow: var(--oh-shadow-hover);
    border-color: var(--oh-blue);
    transform: translateY(-2px);
}
.oh-nav-card--empty {
    opacity: 0.55;
}
.oh-nav-card--empty:hover {
    opacity: 0.75;
    transform: none;
}
.oh-nav-card-icon {
    width: 44px;
    height: 44px;
    background: var(--oh-blue-light);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    color: var(--oh-blue);
}
.oh-nav-card-icon svg {
    width: 22px;
    height: 22px;
}
.oh-nav-card h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 8px;
    color: var(--oh-navy);
}
.oh-nav-card p {
    font-size: 15px;
    color: var(--oh-gray-mid);
    line-height: 1.55;
    margin: 0 0 12px;
    flex-grow: 1;
}
.oh-nav-card-count {
    font-size: 13px;
    font-weight: 600;
    color: var(--oh-blue-dark);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.oh-nav-card-count--soon {
    color: var(--oh-gray-mid);
}

/* ═══════════════════════════════════════════════
   FEATURED CAROUSEL
   ═══════════════════════════════════════════════ */
.oh-carousel {
    position: relative;
    /* 2026-05-21: 1200px outer (was 1152) + 24px padding restored so arrows + content don't clip */
    max-width: var(--oh-max-width, 1200px);
    margin: 0 auto 48px;
    padding: 0 24px;
}

/* ── Track & Slides ── */
.oh-carousel__track {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(27, 42, 74, 0.10);
    background: var(--oh-white);
    border: 1px solid #E2E8F0;
    /* 2026-05-21: bumped to 400px to fit orange CTA button without clipping */
    min-height: 400px;
}

.oh-carousel__slide {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 400px;
    color: var(--oh-gray-dark);
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}
.oh-carousel__slide.is-active {
    opacity: 1;
    pointer-events: auto;
    z-index: 2;
}

/* ── Image Panel ── */
.oh-carousel__image {
    position: relative;
    overflow: hidden;
    min-height: 400px;
    background: linear-gradient(135deg, #EDF2F7 0%, #E2E8F0 100%);
}
.oh-carousel__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.oh-carousel__slide:hover .oh-carousel__image img {
    transform: scale(1.04);
}
.oh-carousel__image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 18px;
    font-weight: 600;
    color: var(--oh-gray-mid);
    background: linear-gradient(135deg, #F0F4FF 0%, #E8EDF5 100%);
}

/* ── Body Panel ── */
.oh-carousel__body {
    padding: 44px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
}

/* ── Badge ── */
.oh-carousel__badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    padding: 5px 14px;
    border-radius: 50px;
    margin-bottom: 18px;
    /* Default: orange accent */
    color: var(--oh-accent);
    background: #FFF7ED;
}
/* Per-type badge colours */
.oh-carousel-badge--blog {
    color: #1D7A3F;
    background: #ECFDF5;
}
.oh-carousel-badge--case-study {
    color: var(--oh-accent);
    background: #FFF7ED;
}
.oh-carousel-badge--webinar {
    color: #7C3AED;
    background: #F5F3FF;
}
.oh-carousel-badge--ebook,
.oh-carousel-badge--guide {
    color: var(--oh-blue-dark);
    background: var(--oh-blue-light);
}
.oh-carousel-badge--faq {
    color: #B45309;
    background: #FFFBEB;
}
.oh-carousel-badge--video {
    color: #DC2626;
    background: #FEF2F2;
}

/* ── Title ── */
.oh-carousel__title {
    font-size: 26px;
    font-weight: 700;
    color: var(--oh-navy);
    margin: 0 0 14px;
    line-height: 1.3;
    letter-spacing: -0.02em;
}

/* ── Description ── */
.oh-carousel__desc {
    font-size: 15px;
    color: var(--oh-gray-mid);
    line-height: 1.65;
    margin: 0 0 24px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── CTA button (2026-05-21: orange-fill / white-text, mirrors "Hearing Testing, Evolved" core style) ── */
.oh-carousel__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    align-self: flex-start;
    margin-top: 4px;
    padding: 12px 22px;
    background: #FFFFFF;
    color: #1565A0 !important;
    font-size: 14px;
    font-weight: 700;
    font-family: var(--hpt-font-h, inherit);
    border: 2px solid #1565A0;
    border-radius: 50px;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(0,0,0,0.10), 0 1px 3px rgba(0,0,0,0.06);
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, gap 0.2s ease;
}
.oh-carousel__cta svg {
    transition: transform 0.25s ease;
}
.oh-carousel__cta:hover,
.oh-carousel__slide:hover .oh-carousel__cta {
    background: #1565A0;
    color: #FFFFFF !important;
    border-color: #1565A0;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(21,101,160,0.30), 0 2px 6px rgba(0,0,0,0.10);
    gap: 12px;
}
.oh-carousel__cta:hover svg,
.oh-carousel__slide:hover .oh-carousel__cta svg {
    transform: translateX(3px);
}

/* ── Featured grid — center variant for sparse card counts (2026-05-22) ────
   When there are only 1–2 cards, the default 3-col grid leaves them stuck
   to the left. .oh-featured-grid--center switches to a centered flex layout
   so the cards group visually in the middle of the section.
   ─────────────────────────────────────────────────────────────────────────── */
.oh-featured-grid.oh-featured-grid--center {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
}
.oh-featured-grid.oh-featured-grid--center > .oh-featured-card {
    flex: 0 1 360px;
    max-width: 420px;
}
@media (max-width: 600px) {
    .oh-featured-grid.oh-featured-grid--center > .oh-featured-card {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

/* ── Promo Carousel (2026-05-21) ───────────────────────────────────────────
   Combines eBook split banner + Events inline banner into a single rotating
   container. Fade transition; standalone JS in the page template.
   ─────────────────────────────────────────────────────────────────────────── */
.oh-promo-carousel {
    position: relative;
    padding: 0 24px;
}
/* Lock viewport to the natural eBook banner height — events slide stretches to match */
.oh-promo-carousel__viewport {
    position: relative;
    min-height: 380px;
}
.oh-promo-carousel__slide {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: stretch;
}
.oh-promo-carousel__slide.is-active {
    opacity: 1;
    pointer-events: auto;
}
/* Make the eBook split banner fill the slide height */
.oh-promo-carousel__slide .oh-cta-banner {
    width: 100%;
    margin: 0;
    height: 100%;
    min-height: 380px;
}
/* Event banner slot — match the same locked height as the eBook slide */
.oh-promo-carousel__event-wrap {
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    display: flex;
    align-items: stretch;
}
.oh-promo-carousel__event-wrap .oh-inline-event-banner {
    margin: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.oh-promo-carousel__event-wrap .oh-inline-event-banner__media {
    flex: 1 1 auto;
    overflow: hidden;
}
.oh-promo-carousel__event-wrap .oh-inline-event-banner__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.oh-promo-carousel__event-wrap .oh-inline-event-banner__cta {
    flex: 0 0 auto;
}
.oh-promo-carousel__dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 22px;
}
.oh-promo-carousel__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background: #D1D8E0;
    padding: 0;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}
.oh-promo-carousel__dot:hover {
    background: #A8B3BF;
}
.oh-promo-carousel__dot.is-active {
    background: var(--oh-blue, #2B97DF);
    transform: scale(1.2);
}
/* Tablet — eBook stacks to single column; bump viewport to match */
@media (max-width: 768px) {
    .oh-promo-carousel__viewport {
        min-height: 580px;
    }
    .oh-promo-carousel__slide .oh-cta-banner,
    .oh-promo-carousel__slide {
        min-height: 580px;
    }
}
@media (max-width: 640px) {
    .oh-promo-carousel {
        padding: 0 16px;
    }
    .oh-promo-carousel__viewport,
    .oh-promo-carousel__slide,
    .oh-promo-carousel__slide .oh-cta-banner {
        min-height: 560px;
    }
    .oh-promo-carousel__dots {
        margin-top: 16px;
    }
}

/* ── Topic pill filter — mobile kill (2026-05-21) ─────────────────────────
   Decision: no topic filter UI on mobile (≤640px). Desktop UX unchanged.
   Users discover content via the nav cards on mobile instead.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .oh-topic-filters,
    .hs-topic-filters,
    .topic-filters {
        display: none !important;
    }
    /* Hide the whole "Browse by Topic" section so we don't leave an empty heading.
       Safari 15.4+ supports :has() — covers our audience. */
    section:has(> .oh-topic-filters),
    section:has(> .hs-topic-filters),
    section:has(> .topic-filters) {
        display: none !important;
    }
}

/* ── Hero eyebrow (2026-05-21 mic-drop hero) ── */
.oh-hub-hero__eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 12px;
    font-weight: 700;
    color: var(--oh-accent, #E87722);
    margin: 0 0 12px;
}

/* ── 2026-05-21: Mobile polish for hero + carousel ── */
@media (max-width: 640px) {
    .oh-hub-hero {
        padding: 36px 20px 44px;
    }
    .oh-hub-hero h1 {
        font-size: 26px;
        line-height: 1.25;
    }
    .oh-hub-hero p {
        font-size: 15px;
        line-height: 1.55;
        padding: 0 4px;
    }
    .oh-hub-hero__eyebrow {
        font-size: 10px;
        letter-spacing: 0.05em;
        margin-bottom: 10px;
        padding: 0 12px;
    }
    .oh-carousel__track {
        min-height: 480px;
    }
    .oh-carousel__slide {
        min-height: 480px;
        grid-template-columns: 1fr;
        grid-template-rows: 200px 1fr;
    }
    .oh-carousel__image {
        min-height: 200px;
        max-height: 200px;
    }
    .oh-carousel__body {
        padding: 18px 20px 22px;
        gap: 8px;
        overflow: hidden;
        justify-content: flex-start; /* override desktop center so button stays in view */
    }
    .oh-carousel__title {
        font-size: 17px;
        line-height: 1.3;
        margin: 0 0 4px;
        /* line-clamp needs the -webkit-box display + box-orient */
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
    }
    .oh-carousel__desc {
        font-size: 13.5px;
        line-height: 1.5;
        margin: 0 0 4px;
        -webkit-line-clamp: 2;
    }
    .oh-carousel__cta {
        padding: 10px 16px;
        font-size: 13px;
        align-self: flex-start;
        max-width: 100%;
        margin-top: auto; /* push button to bottom of body — guarantees visible */
    }
    /* Push dots BELOW the card so they don't overlap content */
    .oh-carousel__dots {
        position: static;
        margin-top: 14px;
        justify-content: center;
    }
    .oh-bottom-cta {
        padding: 40px 24px;
    }
    .oh-bottom-cta h2 {
        font-size: 22px;
        line-height: 1.3;
    }
    .oh-bottom-cta p {
        font-size: 15px;
    }
    .oh-cta-buttons {
        flex-direction: column;
        align-items: stretch;
    }
    .oh-bottom-cta .oh-cta-button,
    .oh-bottom-cta .oh-cta-button-outline {
        width: 100%;
        padding: 14px 20px;
    }
}

/* ── Nav-card custom badge (e.g. "Free Download" on eBook card) ── */
.oh-nav-card-count--badge {
    background: var(--oh-accent, #E87722);
    color: #ffffff !important;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Nav-card icon CLS guard (2026-05-21) ── */
.oh-nav-card-icon--img {
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.oh-nav-card-icon--img img {
    width: 64px;
    height: 64px;
    object-fit: contain;
}

/* ── Arrow Navigation ── */
.oh-carousel__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--oh-navy);
    transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.oh-carousel__arrow:hover {
    background: var(--oh-white);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.16);
    transform: translateY(-50%) scale(1.08);
}
.oh-carousel__arrow--prev { left: 36px; }
.oh-carousel__arrow--next { right: 36px; }

/* ── Dot Indicators with Progress Ring ── */
.oh-carousel__dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}
.oh-carousel__dot {
    position: relative;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.oh-carousel__dot::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #CBD5E1;
    transition: background 0.3s, transform 0.3s;
}
.oh-carousel__dot.is-active::before {
    background: var(--oh-blue);
    transform: scale(1.15);
}
.oh-carousel__dot:hover::before {
    background: var(--oh-blue-dark);
}

/* Progress ring SVG on active dot */
.oh-carousel__dot-ring {
    position: absolute;
    inset: 0;
    width: 28px;
    height: 28px;
    transform: rotate(-90deg);
    opacity: 0;
    transition: opacity 0.3s;
}
.oh-carousel__dot-ring circle {
    fill: none;
    stroke: var(--oh-blue);
    stroke-width: 2;
    stroke-dasharray: 62.83; /* 2 * π * 10 */
    stroke-dashoffset: 62.83;
    stroke-linecap: round;
}
.oh-carousel__dot.is-active .oh-carousel__dot-ring {
    opacity: 1;
}
.oh-carousel__dot.is-active .oh-carousel__dot-ring circle {
    animation: oh-carousel-progress var(--carousel-speed, 6s) linear forwards;
}
@keyframes oh-carousel-progress {
    to { stroke-dashoffset: 0; }
}

/* ── Paused state (hover / focus) ── */
.oh-carousel[data-paused="true"] .oh-carousel__dot.is-active .oh-carousel__dot-ring circle {
    animation-play-state: paused;
}

/* ══════ RESPONSIVE ══════ */

/* Tablet */
@media (max-width: 900px) {
    .oh-carousel__track {
        min-height: 480px;
    }
    .oh-carousel__slide {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }
    .oh-carousel__image {
        min-height: 220px;
        max-height: 260px;
    }
    .oh-carousel__body {
        padding: 28px 28px 32px;
    }
    .oh-carousel__title {
        font-size: 22px;
    }
    .oh-carousel__arrow--prev { left: 12px; }
    .oh-carousel__arrow--next { right: 12px; }
}

/* Mobile (2026-05-21 rewrite — fits 3-line title + 2-line desc + orange CTA without clipping) */
@media (max-width: 600px) {
    .oh-carousel {
        padding: 0 16px;
        margin-bottom: 36px;
    }
    .oh-carousel__track {
        border-radius: 10px;
        min-height: 480px;
    }
    .oh-carousel__slide {
        min-height: 480px;
        grid-template-columns: 1fr;
        grid-template-rows: 200px 1fr;
    }
    .oh-carousel__image {
        min-height: 200px;
        max-height: 200px;
    }
    .oh-carousel__body {
        padding: 18px 20px 22px;
        gap: 8px;
        overflow: hidden;
        justify-content: flex-start;
    }
    .oh-carousel__title {
        font-size: 18px;
        line-height: 1.3;
        margin: 0 0 4px;
        /* line-clamp requires -webkit-box + box-orient to actually work */
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
    }
    .oh-carousel__desc {
        font-size: 13.5px;
        line-height: 1.5;
        margin: 0 0 4px;
        -webkit-line-clamp: 2;
    }
    .oh-carousel__cta {
        padding: 10px 16px;
        font-size: 13px;
        align-self: flex-start;
        max-width: 100%;
        margin-top: auto; /* pin to bottom of body — orange button always visible */
    }
    .oh-carousel__dots {
        position: static;
        margin-top: 14px;
        justify-content: center;
    }
    .oh-carousel__arrow {
        width: 36px;
        height: 36px;
    }
    .oh-carousel__arrow--prev { left: 8px; }
    .oh-carousel__arrow--next { right: 8px; }
    .oh-carousel__arrow svg {
        width: 16px;
        height: 16px;
    }
    .oh-carousel__dots {
        gap: 8px;
        margin-top: 16px;
    }
}

/* ── Topic Pill Count Badge ── */
.oh-topic-pill-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
    margin-left: 6px;
    padding: 0 6px;
}
.oh-topic-pill.active .oh-topic-pill-count,
.oh-topic-pill:hover .oh-topic-pill-count {
    background: rgba(255, 255, 255, 0.25);
}

/* ── Section Titles (px-based) ── */
.oh-section-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--oh-navy);
    margin: 0 0 8px;
}
.oh-section-subtitle {
    color: var(--oh-gray-mid);
    font-size: 16px;
    margin: 0 0 32px;
}

/* ── Featured Content Grid ── */
.oh-featured-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: var(--oh-max-width);
    margin: 0 auto 64px;
    padding: 0 24px;
}
@media (max-width: 768px) {
    .oh-featured-grid {
        grid-template-columns: 1fr;
    }
}
.oh-featured-card {
    background: var(--oh-white);
    border-radius: var(--oh-radius);
    overflow: hidden;
    box-shadow: var(--oh-shadow);
    text-decoration: none;
    color: var(--oh-gray-dark);
    transition: var(--oh-transition);
    display: flex;
    flex-direction: column;
}
.oh-featured-card:hover {
    box-shadow: var(--oh-shadow-hover);
    transform: translateY(-2px);
}
.oh-featured-card-image {
    width: 100%;
    height: 180px;
    object-fit: cover;
    background: var(--oh-gray-light);
}
.oh-featured-card-body {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.oh-featured-card-type {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #C45E10;
    margin-bottom: 8px;
}
.oh-featured-card-body h3 {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 10px;
    color: var(--oh-navy);
    line-height: 1.4;
}
.oh-featured-card-body p {
    font-size: 16px;
    color: var(--oh-gray-mid);
    line-height: 1.6;
    margin: 0;
    flex-grow: 1;
}

/* 2026-05-26: Hide the "X articles / X webinars" counter at the top of every
   category/archive page in the OH + HS hubs. The visible card grid is the
   answer to "how many?" — the counter adds noise without value. */
.oh-result-count,
.oh-result-count-wrap { display: none !important; }

/* 2026-05-26: Related Resources card title — match body text on the post
   (17px / 300 / #333 / Open Sans). Spec applies to every Related Resources
   section across OH + HS post types (single-post, single-oh-footer,
   single-oh_webinar, single-hs_webinar, single-roundtable, eBook/guide
   pages, etc. — all share .oh-webinar-related). */
.oh-webinar-related .oh-featured-card-body h3,
.oh-webinar-related .oh-featured-card-body h3 a {
    font-size: 17px;
    font-weight: 300;
    color: #333;
    line-height: 1.6;
    letter-spacing: 0;
    text-decoration: none;
}
.oh-webinar-related .oh-featured-card-body h3 a:hover {
    color: var(--oh-blue, #2B97DF);
    text-decoration: underline;
}

/* 2026-05-26: Kill the inline-CTA underline that .oh-article-content a was
   inheriting in OH single posts. Specificity-match the existing
   .oh-single-v2 .oh-article-content a rule. */
.oh-single-v2 .oh-article-content .oh-inline-demo-cta__btn,
.oh-single-v2 .oh-article-content .oh-inline-demo-cta__btn:hover {
    text-decoration: none;
}

/* ── Topic Filter Pills ── */
.oh-topic-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    max-width: var(--oh-max-width);
    margin: 0 auto 48px;
    padding: 0 24px;
}
.oh-topic-pill {
    padding: 8px 20px;
    border-radius: 50px;
    border: 1px solid #E5E7EB;
    background: var(--oh-white);
    color: var(--oh-gray-dark);
    font-size: 15px;
    text-decoration: none;
    transition: var(--oh-transition);
    cursor: pointer;
}
.oh-topic-pill:hover,
.oh-topic-pill.active {
    background: var(--oh-blue);
    color: var(--oh-white);
    border-color: var(--oh-blue);
}

/* ── CTA Banner ── */
.oh-cta-banner {
    background: linear-gradient(135deg, var(--oh-accent) 0%, #D4691E 100%);
    color: var(--oh-white);
    padding: 56px 24px;
    text-align: center;
    border-radius: var(--oh-radius);
    max-width: var(--oh-max-width);
    margin: 64px auto;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.oh-cta-banner:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.2);
}
.oh-cta-banner:hover .oh-cta-banner-image img {
    transform: scale(1.03);
}
.oh-cta-banner h2 {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 12px;
    color: var(--oh-white);
}
.oh-cta-banner p {
    font-size: 17px;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 auto 28px;
    max-width: 560px;
    line-height: 1.55;
}

/* ── Split CTA Banner (with ebook cover) ── */
.oh-cta-banner--split {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 0;
    padding: 0;
    text-align: left;
    overflow: hidden;
}
.oh-cta-banner--split .oh-cta-banner-content {
    padding: 48px 48px 48px 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.oh-cta-banner--split h2 {
    font-size: 26px;
}
.oh-cta-banner--split p {
    margin: 0 0 28px;
    max-width: none;
}
.oh-cta-banner-badge {
    display: inline-block;
    width: fit-content;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--oh-accent);
    background: rgba(255, 255, 255, 0.95);
    padding: 4px 14px;
    border-radius: 50px;
    margin-bottom: 16px;
}
.oh-cta-banner-image {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 40px;
    background: rgba(0, 0, 0, 0.1);
}
.oh-cta-banner-image img {
    max-width: 100%;
    max-height: 300px;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
}
@media (max-width: 768px) {
    .oh-cta-banner--split {
        grid-template-columns: 1fr;
    }
    .oh-cta-banner--split .oh-cta-banner-content {
        padding: 36px 24px;
        text-align: center;
    }
    .oh-cta-banner-image {
        padding: 0 24px 36px;
        justify-content: center;
    }
}
.oh-cta-button {
    display: inline-block;
    background: var(--oh-white);
    color: var(--oh-accent);
    padding: 14px 32px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    transition: var(--oh-transition);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.oh-cta-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.oh-cta-button-outline {
    display: inline-block;
    border: 2px solid var(--oh-white);
    color: var(--oh-white);
    background: transparent;
    padding: 12px 28px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    transition: var(--oh-transition);
}
.oh-cta-button-outline:hover {
    background: rgba(255, 255, 255, 0.15);
}
.oh-cta-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

/* ── Glossary Preview ── */
.oh-glossary-preview {
    max-width: var(--oh-max-width);
    margin: 0 auto 64px;
    padding: 0 24px;
}
.oh-glossary-az {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 24px;
}
.oh-glossary-az a {
    display: inline-flex;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--oh-blue);
    background: var(--oh-blue-light);
    text-decoration: none;
    transition: var(--oh-transition);
}
.oh-glossary-az a:hover {
    background: var(--oh-blue);
    color: var(--oh-white);
}
.oh-glossary-terms-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
@media (max-width: 600px) {
    .oh-glossary-terms-list {
        grid-template-columns: 1fr;
    }
}
.oh-glossary-term-card {
    padding: 20px;
    background: var(--oh-gray-light);
    border-radius: var(--oh-radius);
    text-decoration: none;
    color: var(--oh-gray-dark);
    transition: var(--oh-transition);
}
.oh-glossary-term-card:hover {
    background: var(--oh-blue-light);
}
.oh-glossary-term-card h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--oh-navy);
    margin: 0 0 6px;
}
.oh-glossary-term-card p {
    font-size: 0.85rem;
    color: var(--oh-gray-mid);
    margin: 0;
    line-height: 1.5;
}


/* ═══════════════════════════════════════════════
   ARCHIVE / INDEX PAGES
   ═══════════════════════════════════════════════ */

.oh-archive-header {
    background: linear-gradient(135deg, #1B7ABD 0%, #2B97DF 100%);
    padding: 48px 24px;
    text-align: center;
    margin-bottom: 48px;
}
.oh-archive-header--compact {
    padding: 32px 24px 28px;
    margin-bottom: 24px;
}
.oh-archive-header h1 {
    font-size: 32px;
    color: var(--oh-white);
    margin: 0 0 8px;
}
.oh-archive-header--compact h1 {
    margin: 0;
}
.oh-archive-header p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
    max-width: 560px;
    margin: 0 auto;
}

/* ── Result Count ── */
.oh-result-count {
    font-size: 14px;
    color: var(--oh-gray-mid);
    margin: 0;
    padding: 0;
}
.oh-result-count strong {
    color: var(--oh-navy);
}

/* ── Card Topic Tags ── */
.oh-card-tags {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.oh-card-tag {
    font-size: 13px;
    padding: 4px 12px;
    background: var(--oh-blue-light);
    color: var(--oh-blue);
    border-radius: 50px;
    line-height: 1.4;
}
.oh-archive-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: var(--oh-max-width);
    margin: 0 auto 64px;
    padding: 0 24px;
}
@media (max-width: 768px) {
    .oh-archive-grid {
        grid-template-columns: 1fr;
    }
}


/* ═══════════════════════════════════════════════
   SINGLE TEMPLATES
   ═══════════════════════════════════════════════ */

.oh-single-wrap {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 24px 64px;
}
.oh-single-header {
    margin-bottom: 32px;
}
.oh-single-header h1 {
    font-size: 2.2rem;
    color: var(--oh-navy);
    line-height: 1.25;
    margin: 0 0 12px;
}
.oh-single-meta {
    font-size: 0.88rem;
    color: var(--oh-gray-mid);
    margin-bottom: 24px;
}
/* 2026-06-08 simplify: removed dead .oh-single-content rules — superseded by
   .oh-single-v2; no PHP templates reference .oh-single-content anymore. */
.oh-single-content a {
    color: var(--oh-blue-dark);
}

/* ── OH Topics Tags ── */
.oh-single-topics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 32px 0;
}
.oh-single-topics a {
    padding: 6px 14px;
    border-radius: 50px;
    background: var(--oh-blue-light);
    color: var(--oh-blue);
    font-size: 0.82rem;
    font-weight: 500;
    text-decoration: none;
    transition: var(--oh-transition);
}
.oh-single-topics a:hover {
    background: var(--oh-blue);
    color: var(--oh-white);
}

/* ── Related Resources Module ── */
.oh-related {
    border-top: 2px solid #E5E7EB;
    padding-top: 40px;
    margin-top: 48px;
}
.oh-related h2 {
    font-size: 1.4rem;
    color: var(--oh-navy);
    margin: 0 0 24px;
}
.oh-related-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
@media (max-width: 600px) {
    .oh-related-grid {
        grid-template-columns: 1fr;
    }
}
.oh-related-card {
    padding: 20px;
    background: var(--oh-gray-light);
    border-radius: var(--oh-radius);
    text-decoration: none;
    color: var(--oh-gray-dark);
    transition: var(--oh-transition);
}
.oh-related-card:hover {
    background: var(--oh-blue-light);
}
.oh-related-card-type {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--oh-accent);
    margin-bottom: 4px;
}
.oh-related-card h3 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--oh-navy);
    margin: 0;
    line-height: 1.35;
}

/* ── Case Study CTA Banner (inline in eBook / webinar synopsis) ── */
.oh-inline-case-study {
    background: var(--oh-blue-light);
    border-left: 4px solid var(--oh-blue);
    padding: 24px 28px;
    border-radius: 0 var(--oh-radius) var(--oh-radius) 0;
    margin: 40px 0;
}
.oh-inline-case-study p {
    font-size: 1rem;
    color: var(--oh-navy);
    margin: 0 0 8px;
    font-weight: 500;
}
.oh-inline-case-study a {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--oh-blue-dark);
    text-decoration: none;
}
.oh-inline-case-study a:hover {
    text-decoration: underline;
}

/* ── Bottom CTA Module ── */
.oh-bottom-cta {
    background: linear-gradient(135deg, #1B7ABD 0%, #2B97DF 100%);
    color: var(--oh-white);
    padding: 56px 32px;
    border-radius: var(--oh-radius);
    text-align: center;
    margin: 64px 0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.oh-bottom-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.2);
}
.oh-bottom-cta h2 {
    font-size: 28px;
    font-weight: 700;
    color: var(--oh-white);
    margin: 0 0 12px;
}
.oh-bottom-cta p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 18px;
    margin: 0 0 28px;
    line-height: 1.5;
}
/* 2026-05-21: bottom-CTA buttons mirror "See It In Action" inline CTA — rounded rectangles (not pills), white-fill + SB blue text + white-outline */
.oh-bottom-cta .oh-cta-button,
.oh-bottom-cta .oh-cta-button-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-decoration: none;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.oh-bottom-cta .oh-cta-button {
    background: #ffffff;
    color: #1B7ABD !important;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.oh-bottom-cta .oh-cta-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
    color: #1B7ABD !important;
}
.oh-bottom-cta .oh-cta-button-outline {
    background: transparent;
    color: #ffffff !important;
    border: 2px solid #ffffff;
}
.oh-bottom-cta .oh-cta-button-outline:hover {
    background: rgba(255,255,255,0.15);
    color: #ffffff !important;
    transform: translateY(-1px);
}

/* ── Pagination ── */
.oh-archive .nav-links,
.oh-archive .page-numbers {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
}
.oh-archive .nav-links a,
.oh-archive .nav-links span,
.oh-archive a.page-numbers,
.oh-archive span.page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 14px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: var(--oh-transition);
    border: 1px solid #E5E7EB;
    color: var(--oh-navy);
    background: var(--oh-white);
}
.oh-archive .nav-links a:hover,
.oh-archive a.page-numbers:hover {
    background: var(--oh-blue-light);
    border-color: var(--oh-blue);
    color: var(--oh-blue);
}
.oh-archive .nav-links .current,
.oh-archive span.page-numbers.current {
    background: var(--oh-blue);
    color: var(--oh-white);
    border-color: var(--oh-blue);
    font-weight: 600;
}
.oh-archive .nav-links .prev,
.oh-archive .nav-links .next,
.oh-archive a.prev.page-numbers,
.oh-archive a.next.page-numbers {
    font-weight: 600;
    letter-spacing: 0.3px;
}
.oh-archive .nav-links .dots,
.oh-archive span.page-numbers.dots {
    border: none;
    background: none;
    color: var(--oh-gray-mid);
    min-width: auto;
    padding: 0 4px;
}



/* ═══════════════════════════════════════════════
   WEBINAR SINGLE & ARCHIVE
   ═══════════════════════════════════════════════ */

/* ── Page wrapper ─────────────────────────────────────────────────────────── */

.oh-hub-wrap {
    max-width: var(--oh-max-width);
    margin: 0 auto;
    padding: 0 24px 80px;
}
/* Override GeneratePress body overflow:hidden which breaks position:sticky.
   CSS spec: mixing visible + non-visible computes visible → auto, so BOTH axes
   must be visible on body. Move overflow-x:hidden to html instead. */
html:has(body.single-oh_blog),
html:has(body.single-oh_case_study),
html:has(body.single-oh_webinar),
html:has(body.single-oh_ebook),
html:has(body.single-oh_guide),
html:has(body.page-template-page-oh-ebook-guide-php) {
    overflow-x: hidden;
}
body.single-oh_blog,
body.single-oh_case_study,
body.single-oh_webinar,
body.single-oh_ebook,
body.single-oh_guide,
body.page-template-page-oh-ebook-guide-php {
    overflow: visible !important;
}
.oh-hub-wrap.oh-single-v2 {
    overflow: visible;
}
.oh-breadcrumbs-wrap {
    padding: 14px 0 0;
}


/* ── Hero — full-bleed image with dark overlay ────────────────────────────── */

.oh-webinar-hero {
    position: relative;
    background: linear-gradient(135deg, #1B7ABD 0%, #2B97DF 100%);
    border-radius: var(--oh-radius);
    overflow: hidden;
    padding: 56px 56px 48px;
    margin: 24px 0 0;
    color: var(--oh-white);
}
.oh-webinar-hero--has-image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.oh-webinar-hero--has-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(27, 122, 189, 0.92) 0%,
        rgba(43, 151, 223, 0.82) 60%,
        rgba(43, 151, 223, 0.70) 100%
    );
}
.oh-webinar-hero__inner {
    position: relative;
    z-index: 2;
    max-width: 760px;
}

/* Meta row */
.oh-webinar-hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    font-size: 13px;
    color: rgba(255,255,255,0.75);
}
.oh-webinar-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 4px 12px;
    border-radius: 50px;
}
.oh-webinar-badge--ondemand {
    background: rgba(220, 252, 231, 0.2);
    color: #86efac;
    border: 1px solid rgba(134, 239, 172, 0.3);
}
.oh-webinar-badge--soon {
    background: rgba(254, 249, 195, 0.15);
    color: #fde047;
    border: 1px solid rgba(253, 224, 71, 0.3);
}
/* Article and Case Study badge variants */
.oh-webinar-badge--article {
    background: rgba(219, 234, 254, 0.2);
    color: #93c5fd;
    border: 1px solid rgba(147, 197, 253, 0.3);
}
.oh-webinar-badge--case-study {
    background: rgba(220, 252, 231, 0.15);
    color: #86efac;
    border: 1px solid rgba(134, 239, 172, 0.25);
}
.oh-webinar-meta-sep {
    color: rgba(255,255,255,0.3);
}
.oh-webinar-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.oh-webinar-host-link {
    color: rgba(255,255,255,0.9);
    text-decoration: none;
    font-weight: 500;
}
.oh-webinar-host-link:hover {
    color: var(--oh-white);
    text-decoration: underline;
}

/* Title */
.oh-webinar-hero__title {
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--oh-white);
    line-height: 1.2;
    margin: 0 0 16px;
}

/* Synopsis */
/* 2026-05-20: Bigger + higher-contrast for WCAG AA. Pure white at 1.2rem
   on the dark blue hero gives ~12:1 contrast; previous 80% white at 1.05rem
   was below AA for body text. Light text-shadow improves legibility when
   the hero photo bleeds through behind the gradient. */
.oh-webinar-hero__synopsis {
    font-size: 1.2rem;
    color: #ffffff;
    line-height: 1.65;
    margin: 0 0 28px;
    max-width: 680px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.35);
}

/* Speaker card */
.oh-webinar-speaker-card {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 50px;
    padding: 8px 20px 8px 8px;
    backdrop-filter: blur(4px);
}
.oh-webinar-speaker-photo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid rgba(255,255,255,0.3);
}
.oh-webinar-speaker-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    color: var(--oh-white);
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.oh-webinar-speaker-avatar--logo {
    background: var(--oh-white);
    padding: 6px;
}
.oh-webinar-speaker-avatar--logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.oh-webinar-speaker-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.oh-webinar-speaker-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: rgba(255,255,255,0.55);
    font-weight: 600;
}
.oh-webinar-speaker-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--oh-white);
}
.oh-webinar-speaker-role {
    font-size: 12px;
    color: rgba(255,255,255,0.65);
}

@media (max-width: 768px) {
    .oh-webinar-hero {
        padding: 36px 24px 32px;
    }
    .oh-webinar-hero__title {
        font-size: 1.7rem;
    }
}


/* ── Two-column body layout ──────────────────────────────────────────────── */

.oh-webinar-body {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 48px;
    align-items: start;
    margin-top: 48px;
}
@media (max-width: 960px) {
    .oh-webinar-body {
        grid-template-columns: 1fr;
    }
}
.oh-webinar-main {
    min-width: 0;
}


/* ── Video embed ──────────────────────────────────────────────────────────── */

.oh-webinar-video-section {
    margin-bottom: 48px;
    border-radius: var(--oh-radius);
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}
.oh-webinar-video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    background: #000;
}
.oh-webinar-video-wrapper iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border: none;
}

/* ── Click-to-play poster ─────────────────────────────────────────────────── */
.oh-video-poster-wrap {
    cursor: pointer;
    overflow: hidden;
}
.oh-video-poster-img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
.oh-video-poster-fallback {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(135deg, var(--oh-navy, #1B2E4A) 0%, #2A4A7F 100%);
}
.oh-video-poster-play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 2;
    transition: transform 0.25s ease, opacity 0.25s ease;
}
.oh-video-poster-play svg circle {
    transition: fill 0.25s ease;
}
.oh-video-poster-wrap:hover .oh-video-poster-play {
    transform: translate(-50%, -50%) scale(1.1);
}
.oh-video-poster-wrap:hover .oh-video-poster-play svg circle {
    fill: rgba(232, 119, 34, 0.9);
}
/* Once activated, hide the poster layer */
.oh-video-poster-wrap.is-playing .oh-video-poster-img,
.oh-video-poster-wrap.is-playing .oh-video-poster-fallback,
.oh-video-poster-wrap.is-playing .oh-video-poster-play {
    display: none;
}

/* ── Webinar sidebar: ensure shared sidebar-card spacing ─────────────────── */
.oh-webinar-sidebar .oh-toc {
    margin-bottom: 28px;
}
.oh-webinar-sidebar .oh-sidebar-card {
    margin-bottom: 20px;
}
.oh-webinar-sidebar .oh-sidebar-card:last-child {
    margin-bottom: 0;
}
.oh-webinar-sidebar .oh-webinar-sidebar-meta {
    border-top: none;
    margin: 0;
    padding: 0;
}


/* ── No-video state ───────────────────────────────────────────────────────── */

.oh-webinar-no-video {
    background: var(--oh-gray-light);
    border-radius: var(--oh-radius);
    padding: 28px 32px;
    margin-bottom: 40px;
    color: var(--oh-gray-mid);
    font-size: 16px;
    line-height: 1.6;
}
.oh-webinar-no-video p { margin: 0 0 16px; }
.oh-webinar-no-video p:last-child { margin-bottom: 0; }


/* ── Content sections ────────────────────────────────────────────────────── */

.oh-webinar-section {
    margin-bottom: 48px;
    padding-bottom: 48px;
    border-bottom: 1px solid #E5E7EB;
}
.oh-webinar-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.oh-webinar-section-title {
    font-size: 26px;
    font-weight: 700;
    color: var(--oh-navy);
    margin: 0 0 24px;
}


/* ── Key Takeaways ───────────────────────────────────────────────────────── */

.oh-webinar-takeaways {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.oh-webinar-takeaway {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    /* 2026-05-20: 18px → 17px to match site-wide blog/post body. */
    font-size: 17px;
    line-height: 1.6;
    color: var(--oh-gray-dark);
}
.oh-webinar-takeaway-icon {
    flex-shrink: 0;
    margin-top: 3px;
    stroke: var(--oh-blue);
}


/* ── Chapter outline ─────────────────────────────────────────────────────── */

.oh-webinar-chapters {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.oh-webinar-chapter {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #F3F4F6;
    font-size: 17px;
    color: var(--oh-gray-dark);
    line-height: 1.4;
}
.oh-webinar-chapter:last-child { border-bottom: none; }
.oh-webinar-chapter::before {
    content: '';
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    background-color: var(--oh-blue-light);
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%232B97DF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}
.oh-webinar-chapter-time {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--oh-blue);
    font-variant-numeric: tabular-nums;
    background: var(--oh-blue-light);
    padding: 2px 8px;
    border-radius: 4px;
}
.oh-webinar-chapter-title { line-height: 1.4; }


/* ── Transcript body ─────────────────────────────────────────────────────── */

.oh-webinar-transcript-body,
.oh-webinar-transcript-body p {
    /* 2026-05-20: 18px → 17px to match site-wide .entry-content body. */
    font-size: 17px;
    line-height: 1.7;
    color: var(--oh-gray-dark);
}
.oh-webinar-transcript-body p { margin: 0 0 1.4em; }
.oh-webinar-transcript-body h2,
.oh-webinar-transcript-body h3 {
    color: var(--oh-navy);
    margin-top: 40px;
    margin-bottom: 16px;
}
.oh-webinar-transcript-body h2 { font-size: 24px; }
.oh-webinar-transcript-body h3 { font-size: 20px; color: var(--oh-blue); }
.oh-webinar-transcript-body a  { color: var(--oh-blue-dark); }
.oh-webinar-transcript-body blockquote {
    border-left: 4px solid var(--oh-blue);
    padding: 16px 24px;
    margin: 32px 0;
    background: var(--oh-gray-light);
    border-radius: 0 var(--oh-radius) var(--oh-radius) 0;
    font-style: italic;
    color: var(--oh-navy);
    font-size: 18px;
    line-height: 1.65;
}
.oh-webinar-transcript-body blockquote p { margin: 0; font-size: inherit; }


/* ── FAQ accordion ───────────────────────────────────────────────────────── */

.oh-webinar-faq-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.oh-webinar-faq-item {
    border: 1px solid #E5E7EB;
    border-radius: var(--oh-radius);
    overflow: hidden;
    background: var(--oh-white);
}
.oh-webinar-faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    /* 2026-05-20: 18px → 17px to match site-wide body. */
    font-size: 17px;
    font-weight: 600;
    color: var(--oh-navy);
    text-align: left;
    line-height: 1.4;
    transition: background var(--oh-transition);
}
.oh-webinar-faq-question:hover { background: var(--oh-gray-light); }
.oh-webinar-faq-question[aria-expanded="true"] {
    background: var(--oh-blue-light);
    color: var(--oh-blue);
}
.oh-webinar-faq-icon {
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
.oh-webinar-faq-question[aria-expanded="true"] .oh-webinar-faq-icon {
    transform: rotate(180deg);
}
.oh-webinar-faq-answer {
    padding: 0 24px 24px;
    /* 2026-05-20: 18px → 17px to match site-wide body. */
    font-size: 17px;
    color: var(--oh-gray-dark);
    line-height: 1.75;
}
.oh-webinar-faq-answer p { margin: 0 0 1em; }
.oh-webinar-faq-answer p:last-child { margin-bottom: 0; }


/* ── Sidebar ─────────────────────────────────────────────────────────────── */

.oh-webinar-sidebar {
    position: sticky;
    top: 24px;
}
.oh-webinar-sidebar-card {
    background: var(--oh-white);
    border: 1px solid #E5E7EB;
    border-radius: var(--oh-radius);
    padding: 28px 24px;
    box-shadow: var(--oh-shadow);
}
.oh-webinar-sidebar-eyebrow {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: var(--oh-accent);
    margin: 0 0 6px;
}
.oh-webinar-sidebar-body {
    font-size: 15px;
    color: var(--oh-gray-mid);
    line-height: 1.55;
    margin: 0 0 20px;
}
.oh-webinar-sidebar-meta {
    list-style: none;
    padding: 0;
    margin: 20px 0 0;
    border-top: 1px solid #E5E7EB;
    padding-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13px;
    color: var(--oh-gray-mid);
    line-height: 1.45;
}
.oh-webinar-sidebar-meta strong { color: var(--oh-navy); font-weight: 600; }
.oh-webinar-sidebar-meta a { color: var(--oh-blue-dark); text-decoration: none; }
.oh-webinar-sidebar-meta a:hover { text-decoration: underline; }
.oh-webinar-sidebar-browse {
    margin-top: 16px;
    text-align: center;
}
.oh-webinar-browse-link {
    font-size: 14px;
    color: var(--oh-blue-dark);
    text-decoration: none;
    font-weight: 500;
}
.oh-webinar-browse-link:hover { text-decoration: underline; }

@media (max-width: 960px) {
    .oh-webinar-sidebar { position: static; }
}


/* ── Buttons ─────────────────────────────────────────────────────────────── */

.oh-btn {
    display: inline-block;
    padding: 13px 28px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    text-align: center;
    transition: var(--oh-transition);
    cursor: pointer;
    border: none;
    line-height: 1.3;
}
.oh-btn--full { display: block; width: 100%; box-sizing: border-box; }
.oh-btn--primary {
    background: var(--oh-blue);
    color: var(--oh-white);
    box-shadow: 0 2px 8px rgba(43,151,223,0.25);
}
.oh-btn--primary:hover {
    background: var(--oh-navy);
    box-shadow: 0 4px 12px rgba(43,151,223,0.3);
    color: var(--oh-white);
}
.oh-btn--secondary {
    background: var(--oh-gray-light);
    color: var(--oh-navy);
    border: 1px solid #E5E7EB;
}
.oh-btn--secondary:hover {
    background: var(--oh-blue-light);
    border-color: var(--oh-blue);
    color: var(--oh-blue);
}
.oh-btn--white {
    background: var(--oh-white);
    color: var(--oh-navy);
    font-weight: 700;
}
.oh-btn--white:hover { background: var(--oh-blue-light); }


/* ── Related resources ───────────────────────────────────────────────────── */

.oh-webinar-related {
    margin-top: 64px;
    padding-top: 48px;
    border-top: 2px solid #E5E7EB;
}
.oh-webinar-related-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--oh-navy);
    margin: 0 0 28px;
    text-align: center;
}


/* ── Embedded demo form ──────────────────────────────────────────────────── */

.oh-webinar-form-section {
    margin-top: 64px;
    padding-top: 56px;
    border-top: 2px solid #E5E7EB;
    scroll-margin-top: 32px;
}
.oh-webinar-form-title {
    font-size: 26px;
    font-weight: 700;
    color: var(--oh-navy);
    margin: 0 0 12px;
}
.oh-webinar-form-intro {
    font-size: 18px;
    color: var(--oh-gray-mid);
    line-height: 1.7;
    max-width: 600px;
    margin: 0 0 32px;
}
.oh-webinar-form-embed {
    border-radius: var(--oh-radius);
    overflow: hidden;
    border: 1px solid #E5E7EB;
    box-shadow: var(--oh-shadow);
}
.oh-webinar-form-embed iframe {
    display: block;
    width: 100%;
    min-height: 750px;
    border: none;
}


/* ── Topic tags in meta bar ──────────────────────────────────────────────── */

.oh-webinar-topic-tag {
    text-decoration: none;
    transition: var(--oh-transition);
}
.oh-webinar-topic-tag:hover {
    background: var(--oh-blue);
    color: var(--oh-white);
}


/* ── Hero topic pills ────────────────────────────────────────────────────── */

.oh-webinar-hero-topic {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 50px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    transition: background 0.2s;
}
.oh-webinar-hero-topic:hover {
    background: rgba(255,255,255,0.22);
    color: var(--oh-white);
}


/* ── Section header with share row ──────────────────────────────────────── */

.oh-webinar-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.oh-webinar-section-header .oh-webinar-section-title {
    margin-bottom: 0;
}


/* ── Share row ───────────────────────────────────────────────────────────── */

.oh-share-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.oh-share-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--oh-gray-mid);
}
.oh-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid #E5E7EB;
    background: var(--oh-white);
    color: var(--oh-gray-dark);
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
    line-height: 1;
}
.oh-share-btn:hover {
    border-color: var(--oh-blue);
    color: var(--oh-blue);
    background: var(--oh-blue-light);
}
.oh-share-btn--li:hover { border-color: #0A66C2; color: #0A66C2; background: #EFF6FF; }
.oh-share-btn--tw:hover { border-color: #000; color: #000; background: #F5F5F5; }
.oh-share-btn--copy:hover { border-color: var(--oh-blue); color: var(--oh-blue); }

/* Single FAQ share row wrapper */
.oh-single-faq-share {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid #E5E7EB;
    margin-bottom: 28px;
}


/* ── Sticky mobile CTA bar ───────────────────────────────────────────────── */

.oh-mobile-cta-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--oh-white);
    border-top: 1px solid #E5E7EB;
    padding: 12px 20px;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    transition: transform 0.3s ease;
}
.oh-mobile-cta-bar--hidden {
    transform: translateY(100%);
}
.oh-mobile-cta-bar__text {
    font-size: 14px;
    font-weight: 600;
    color: var(--oh-navy);
    margin: 0;
    line-height: 1.3;
}
.oh-mobile-cta-bar__btn {
    flex-shrink: 0;
    padding: 10px 20px;
    font-size: 14px;
    white-space: nowrap;
}
@media (max-width: 960px) {
    .oh-mobile-cta-bar {
        display: flex;
    }
    /* add padding so content doesn't hide behind the sticky bar */
    .oh-hub-wrap {
        padding-bottom: 100px;
    }
}


/* ==========================================================================
   FAQ ARCHIVE — page-oh-faq.php
   ========================================================================== */

/* ── Hero ─────────────────────────────────────────────────────────────────── */

.oh-faq-hero {
    /* Centre-align all hero content */
    text-align: center;
    margin-bottom: 32px;
}

/* Centre h1 */
.oh-faq-hero h1,
.oh-faq-hero .oh-faq-hero__title {
    font-size: 40px;
    font-weight: 800;
    line-height: 1.15;
    color: #fff;
    margin: 0 0 16px;
    text-align: center;
}

/* Centre paragraphs */
.oh-faq-hero p,
.oh-faq-hero__eyebrow,
.oh-faq-hero__desc {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.oh-faq-hero__eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
    margin-bottom: 10px;
}

.oh-faq-hero__desc {
    font-size: 17px;
    line-height: 1.6;
    color: rgba(255,255,255,0.85);
    max-width: 640px;
    margin-bottom: 28px;
}

.oh-faq-hero .oh-hub-search,
.oh-faq-search-form {
    max-width: 560px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    position: relative;
}

/* The input takes the hub's pill style but leaves room for the Search button */
.oh-faq-search-form input[type="text"] {
    flex: 1;
    padding: 14px 20px 14px 48px !important;
    border: 2px solid #fff;
    border-radius: 50px !important;
    background: #fff;
    color: #333;
    font-size: 16px;
    outline: none;
    transition: border-color 0.15s ease, background 0.15s ease;
    box-sizing: border-box;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.oh-faq-search-form input[type="text"]::placeholder {
    color: #999;
}

.oh-faq-search-form input[type="text"]:focus {
    border-color: var(--oh-accent);
    background: #fff;
}

/* Search icon — absolute inside the form, like the hub */
.oh-faq-search-form > svg {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    stroke: #999;
    pointer-events: none;
    z-index: 3;
}

.oh-faq-search-btn {
    flex-shrink: 0;
    background: var(--oh-accent, #4A90D9);
    color: #fff;
    border: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    padding: 0 24px;
    height: 51px; /* match input height */
    cursor: pointer;
    border-radius: 0 50px 50px 0;
    transition: background 0.15s ease;
    white-space: nowrap;
    border: 2px solid transparent;
}

.oh-faq-search-btn:hover {
    background: #fff;
    color: var(--oh-navy, #1a3a5c);
}

.oh-faq-search-clear {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: rgba(255,255,255,0.65);
    text-decoration: none;
    transition: color 0.15s ease;
    margin-top: 10px;
}

.oh-faq-search-clear:hover {
    color: #fff;
}

.oh-faq-search-results-label {
    font-size: 14px;
    color: #6B7280;
    margin: 0 0 20px;
}

/* ── Archive Hero (shared across Blog, CS, Webinars, Glossary) ───────────── */

.oh-archive-hero {
    text-align: center;
    margin-bottom: 32px;
}
.oh-archive-hero__eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
    margin-bottom: 10px;
}
.oh-archive-hero__title {
    font-size: 40px;
    font-weight: 800;
    line-height: 1.15;
    color: #fff;
    margin: 0 0 16px;
    text-align: center;
}
.oh-archive-hero h1 {
    font-size: 40px;
    font-weight: 800;
    line-height: 1.15;
    color: #fff;
    margin: 0 0 16px;
    text-align: center;
}
.oh-archive-hero__desc {
    font-size: 17px;
    line-height: 1.6;
    color: rgba(255,255,255,0.85);
    max-width: 640px;
    margin: 0 auto 28px;
    text-align: center;
}
@media (max-width: 768px) {
    .oh-archive-hero h1,
    .oh-archive-hero__title {
        font-size: 28px;
    }
    .oh-archive-hero__desc {
        font-size: 15px;
    }
}

/* ── FAQ grouped sections ─────────────────────────────────────────────────── */

.oh-faq-group {
    margin-bottom: 48px;
}

.oh-faq-group-title {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--oh-blue, #2E75B6);
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--oh-blue, #2E75B6);
}

/* ── Accordion wrapper ────────────────────────────────────────────────────── */

.oh-faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 8px;
}

/* ── Individual FAQ item ──────────────────────────────────────────────────── */

.oh-faq-item {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.15s ease;
}

.oh-faq-item:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}

/* ── Question button ──────────────────────────────────────────────────────── */

.oh-faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 18px 20px;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: #111827;
    transition: background 0.12s ease;
}

.oh-faq-question:hover {
    background: #F9FAFB;
}

.oh-faq-question[aria-expanded="true"] {
    background: #F0F7FF;
    color: var(--oh-navy, #1a3a5c);
}

/* ── Chevron icon ─────────────────────────────────────────────────────────── */

.oh-faq-chevron {
    flex-shrink: 0;
    color: #9CA3AF;
    transition: transform 0.2s ease, color 0.15s ease;
}

.oh-faq-question[aria-expanded="true"] .oh-faq-chevron {
    transform: rotate(180deg);
    color: var(--oh-blue, #2E75B6);
}

/* ── Answer panel ─────────────────────────────────────────────────────────── */

.oh-faq-answer {
    padding: 0 20px 20px 20px;
    border-top: 1px solid #F3F4F6;
    animation: oh-faq-fadein 0.15s ease;
}

@keyframes oh-faq-fadein {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.oh-faq-answer-summary {
    font-size: 15px;
    line-height: 1.65;
    color: #374151;
    margin-top: 16px;
    margin-bottom: 0;
    font-weight: 500;
}

.oh-faq-answer-full {
    font-size: 15px;
    line-height: 1.65;
    color: #4B5563;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #F3F4F6;
}

.oh-faq-answer-full p:last-child {
    margin-bottom: 0;
}

/* ── Related resource cards ("Go deeper") ────────────────────────────────── */

.oh-faq-resources {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid #E5E7EB;
}

.oh-faq-resources-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #9CA3AF;
    margin: 0 0 10px;
}

.oh-faq-resource-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.oh-faq-resource-card {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.12s ease, border-color 0.12s ease;
    min-width: 0;
    max-width: 100%;
}

.oh-faq-resource-card:hover {
    background: #F0F7FF;
    border-color: var(--oh-blue, #2E75B6);
}

.oh-faq-resource-card__type {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #fff;
    background: var(--oh-blue, #2E75B6);
    border-radius: 4px;
    padding: 2px 7px;
    line-height: 1.6;
}

.oh-faq-resource-card__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--oh-navy, #1a3a5c);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.oh-faq-resource-card__arrow {
    flex-shrink: 0;
    color: #9CA3AF;
    transition: color 0.12s ease, transform 0.12s ease;
}

.oh-faq-resource-card:hover .oh-faq-resource-card__arrow {
    color: var(--oh-blue, #2E75B6);
    transform: translateX(2px);
}

/* ── Mobile ───────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
    .oh-faq-search-form {
        max-width: 100%;
    }

    .oh-faq-hero__title {
        font-size: 26px;
    }

    .oh-faq-hero__desc {
        font-size: 15px;
    }

    .oh-faq-search-btn {
        padding: 0 14px;
        font-size: 13px;
    }

    .oh-faq-question {
        font-size: 15px;
        padding: 15px 16px;
    }

    .oh-faq-answer {
        padding: 0 16px 16px;
    }

    .oh-faq-group-title {
        font-size: 13px;
    }

    .oh-faq-resource-cards {
        flex-direction: column;
    }

    .oh-faq-resource-card {
        max-width: 100%;
    }

    .oh-faq-resource-card__title {
        white-space: normal;
    }
}

/* ── Sticky Topic Filters (FAQ archive V3) ───────────────────────────────── */

.oh-topic-filters--sticky {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 50;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    padding: 12px 24px;
    justify-content: center;
    transition: box-shadow 0.2s ease;
}

/* ── FAQ V3 grid container ────────────────────────────────────────────────── */

.oh-archive--faq-grid {
    max-width: var(--oh-max-width, 1200px);
    margin: 0 auto;
    padding: 0 24px;
}

.oh-archive--faq .oh-faq-group {
    margin-bottom: 0;
}

/* ── Mid-page CTA spacing ────────────────────────────────────────────────── */

.oh-faq-mid-cta {
    margin-top: 40px !important;
    margin-bottom: 40px !important;
}

/* ── Related FAQs sidebar (single-oh_faq.php) ────────────────────────────── */

.oh-related-faqs {
    margin-top: 48px;
    padding: 24px;
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    max-width: 740px;
}

.oh-related-faqs-title {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #6B7280;
    margin: 0 0 14px;
}

.oh-related-faqs-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.oh-related-faqs-list li a {
    font-size: 15px;
    font-weight: 500;
    color: var(--oh-navy, #1a3a5c);
    text-decoration: none;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.oh-related-faqs-list li a::before {
    content: '→';
    color: var(--oh-blue, #2E75B6);
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 1px;
}

.oh-related-faqs-list li a:hover {
    color: var(--oh-blue, #2E75B6);
    text-decoration: underline;
}

.oh-faq-short-answer {
    font-size: 17px;
    color: #111827;
    margin-bottom: 20px;
}

/* ── Blog / Case Study share row ────────────────────────────────────────── */
/* Reuses .oh-share-row, .oh-share-btn etc. — only the wrapper differs */

.oh-article-share {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-top: 1px solid #E5E7EB;
    border-bottom: 1px solid #E5E7EB;
    margin: 32px 0;
}

.oh-article-share__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--oh-gray-mid, #6B7280);
}

/* ── Blog / Case Study single post layout ──────────────────────────────── */

.oh-article-hero {
    padding: 40px 0 32px;
    border-bottom: 1px solid #E5E7EB;
    margin-bottom: 40px;
}

.oh-article-hero__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    font-size: 13px;
}

.oh-article-type-badge {
    display: inline-block;
    background: var(--oh-blue-light, #EFF6FF);
    color: var(--oh-blue, #2563EB);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 3px 10px;
    border-radius: 50px;
}

.oh-article-hero__title {
    font-size: 36px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--oh-navy, #1a3a5c);
    margin: 0 0 20px;
}

.oh-article-hero__excerpt {
    font-size: 18px;
    line-height: 1.65;
    color: var(--oh-gray-mid, #6B7280);
    margin: 0 0 24px;
    max-width: 680px;
}

.oh-article-hero__byline {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--oh-gray-mid, #6B7280);
}

.oh-article-hero__date {
    font-size: 13px;
    color: var(--oh-gray-mid, #6B7280);
}

/* Two-column article body: content + sidebar */
.oh-article-body {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 48px;
    align-items: start;
    margin-bottom: 60px;
}

@media (max-width: 900px) {
    .oh-article-body {
        grid-template-columns: 1fr;
    }
    .oh-article-sidebar {
        order: -1;
    }
}

/* Featured image */
.oh-article-featured-image {
    margin-bottom: 32px;
    border-radius: 8px;
    overflow: hidden;
}
.oh-article-featured-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Post content */
.oh-article-content {
    font-size: 17px;
    line-height: 1.75;
    color: var(--oh-gray-dark, #111827);
}
.oh-article-content h2 {
    font-size: 24px;
    font-weight: 700;
    margin: 40px 0 16px;
    color: var(--oh-navy, #1a3a5c);
}
.oh-article-content h3 {
    font-size: 20px;
    font-weight: 700;
    margin: 32px 0 12px;
    color: var(--oh-navy, #1a3a5c);
}
.oh-article-content p { margin: 0 0 20px; }
.oh-article-content ul,
.oh-article-content ol { margin: 0 0 20px; padding-left: 24px; }
.oh-article-content li { margin-bottom: 6px; }
.oh-article-content blockquote {
    border-left: 4px solid var(--oh-blue, #2563EB);
    margin: 24px 0;
    padding: 12px 20px;
    background: var(--oh-blue-light, #EFF6FF);
    border-radius: 0 8px 8px 0;
    font-style: italic;
    color: var(--oh-navy, #1a3a5c);
}
.oh-article-content a {
    color: var(--oh-blue, #2563EB);
    text-decoration: underline;
}
.oh-article-content img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    margin: 8px 0;
}

/* Sidebar card */
.oh-article-sidebar-card {
    background: var(--oh-navy, #1a3a5c);
    color: #fff;
    border-radius: 12px;
    padding: 28px 24px;
    position: sticky;
    top: 24px;
    margin-top: 80px; /* Push below the share row so it starts alongside the content, not the top */
}
.oh-article-sidebar-card p { font-size: 14px; line-height: 1.5; color: rgba(255,255,255,0.8); margin: 0 0 16px; }
.oh-article-sidebar-card strong { color: #fff; display: block; font-size: 16px; margin-bottom: 8px; }
.oh-article-sidebar-browse {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.15);
}
.oh-article-browse-link {
    font-size: 13px;
    color: rgba(255,255,255,0.7);
    text-decoration: none;
}
.oh-article-browse-link:hover { color: #fff; }

@media (max-width: 640px) {
    .oh-article-hero__title { font-size: 26px; }
    .oh-article-hero__excerpt { font-size: 16px; }
    .oh-article-content { font-size: 16px; }
}

/* ── Inline FAQ Section (embedded in blog posts, case studies, pages) ─────── */
/* Reuses .oh-faq-accordion, .oh-faq-item, .oh-faq-question etc.             */

.oh-inline-faq-section {
    margin: 48px 0;
    padding: 40px 0 0;
    border-top: 2px solid #E5E7EB;
}

.oh-inline-faq-heading {
    font-size: 22px;
    font-weight: 700;
    color: var(--oh-navy, #1a3a5c);
    margin: 0 0 24px;
}

/* When used inside the article content column, constrain width to match */
.oh-article-content .oh-inline-faq-section,
.oh-article-main .oh-inline-faq-section {
    max-width: 100%;
}

/* When used on full-width pages (Solutions, Product pages) outside the 
   two-column layout — centre and max-width it */
.oh-hub-wrap > .oh-inline-faq-section {
    max-width: var(--oh-max-width, 900px);
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
}


/* ═══════════════════════════════════════════════
   V2 ARCHIVE REDESIGN
   Scoped under .oh-archive--v2 to avoid breaking
   existing Related Resources cards elsewhere.
   ═══════════════════════════════════════════════ */

/* ── V2 Archive Header (clean, white, left-aligned) ── */
.oh-archive--v2 .oh-archive-header {
    background: var(--oh-white);
    padding: 40px 24px 24px;
    text-align: left;
    margin-bottom: 24px;
    max-width: var(--oh-max-width);
    margin-left: auto;
    margin-right: auto;
    border-bottom: 2px solid #E5E7EB;
}
.oh-archive--v2 .oh-archive-header h1 {
    color: var(--oh-navy);
    font-size: 36px;
    font-weight: 700;
    margin: 0 0 8px;
    letter-spacing: -0.02em;
}
.oh-archive--v2 .oh-archive-header p {
    color: var(--oh-gray-mid);
    font-size: 16px;
    max-width: 640px;
    margin: 0;
    line-height: 1.6;
}
.oh-archive--v2 .oh-archive-header--compact {
    padding: 40px 24px 20px;
    border-bottom: 2px solid #E5E7EB;
}

/* ── V2 Card Enhancements ── */
.oh-archive--v2 .oh-featured-card {
    border-radius: 12px;
    border: 1px solid transparent;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.oh-archive--v2 .oh-featured-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
    border-color: var(--oh-blue-light);
}

/* Card image container */
.oh-archive--v2 .oh-featured-card .oh-card-image-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 12px 12px 0 0;
    height: 220px;
    background: var(--oh-gray-light);
}
.oh-archive--v2 .oh-featured-card .oh-card-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.oh-archive--v2 .oh-featured-card:hover .oh-card-image-wrap img {
    transform: scale(1.03);
}
/* Subtle gradient at bottom of image for depth */
.oh-archive--v2 .oh-featured-card .oh-card-image-wrap::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.04));
    pointer-events: none;
}

/* Card body */
.oh-archive--v2 .oh-featured-card .oh-featured-card-body {
    padding: 24px;
}

/* Category label */
.oh-archive--v2 .oh-featured-card-type {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #C45E10;
    margin-bottom: 10px;
    display: inline-block;
}

/* Title */
.oh-archive--v2 .oh-featured-card-body h3 {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--oh-navy);
    margin: 0 0 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Excerpt */
.oh-archive--v2 .oh-featured-card-body p {
    font-size: 15px;
    line-height: 1.55;
    color: var(--oh-gray-mid);
    margin: 0 0 12px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Card footer (reading time + tags) */
.oh-archive--v2 .oh-card-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
}

/* Reading time */
.oh-archive--v2 .oh-card-read-time {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: var(--oh-gray-mid);
    white-space: nowrap;
}
.oh-archive--v2 .oh-card-read-time svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Standardized card tags */
.oh-archive--v2 .oh-card-tags {
    margin-top: auto;
    padding-top: 12px;
}
.oh-archive--v2 .oh-card-tag {
    font-size: 12px;
    padding: 4px 10px;
    background: var(--oh-blue-light);
    color: var(--oh-blue-dark);
    border-radius: 50px;
    font-weight: 500;
    line-height: 1.3;
}

/* Branded gradient under every card image — transparent PNGs sit on brand canvas, opaque images fully cover */
.oh-archive--v2 .oh-card-image-wrap,
.oh-archive--v3 .oh-card-image-wrap {
    background: linear-gradient(135deg, #1565A0 0%, #1B2A4A 100%);
    position: relative;
    overflow: hidden;
}
/* Logo-style transparent PNGs (Safety Pod, etc.) — contain so logo sits centered on gradient */
.oh-archive--v2 .oh-card-image-wrap img[src*=".png"],
.oh-archive--v3 .oh-card-image-wrap img[src*=".png"] {
    object-fit: contain;
    padding: 16px;
}
.oh-archive--v2 .oh-card-image-wrap:has(.oh-card-image-placeholder),
.oh-archive--v3 .oh-card-image-wrap:has(.oh-card-image-placeholder) {
    /* Placeholder kept for true no-image cards */
}
.oh-archive--v2 .oh-card-image-wrap:has(.oh-card-image-placeholder)::before,
.oh-archive--v3 .oh-card-image-wrap:has(.oh-card-image-placeholder)::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,0.10) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(250,175,64,0.12) 0%, transparent 50%);
    pointer-events: none;
}
.oh-archive--v2 .oh-card-image-placeholder,
.oh-archive--v3 .oh-card-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 180px;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
}
.oh-archive--v2 .oh-card-image-placeholder::after,
.oh-archive--v3 .oh-card-image-placeholder::after {
    content: '';
    display: block;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
    height: 3px;
    background: #FAAF40;
    border-radius: 2px;
}

/* ── Read More CTA — visible affordance on every archive card (2026-06-10) ──
   Pseudo-element on the card body. Whole card is already a link wrap, so
   this is purely visual. White pill matching .oh-carousel__cta design. */
.oh-archive--v2 .oh-featured-card-body,
.oh-archive--v3 .oh-featured-card-body,
.oh-archive--v2 .oh-archive-card .oh-card-body,
.oh-archive--v3 .oh-archive-card .oh-card-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 20px;
}
.oh-archive--v2 .oh-featured-card-body::after,
.oh-archive--v3 .oh-featured-card-body::after,
.oh-archive--v2 .oh-archive-card .oh-card-body::after,
.oh-archive--v3 .oh-archive-card .oh-card-body::after {
    content: 'Read More \2192';
    align-self: flex-start;
    margin-top: auto;
    padding: 10px 20px;
    background: #FFFFFF;
    color: #1565A0;
    font-family: var(--hpt-font-h, inherit);
    font-size: 13px;
    font-weight: 700;
    border: 2px solid #1565A0;
    border-radius: 50px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.oh-archive--v2 .oh-featured-card:hover .oh-featured-card-body::after,
.oh-archive--v3 .oh-featured-card:hover .oh-featured-card-body::after,
.oh-archive--v2 .oh-archive-card:hover .oh-card-body::after,
.oh-archive--v3 .oh-archive-card:hover .oh-card-body::after {
    background: #1565A0;
    color: #FFFFFF;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(21,101,160,0.25);
}

/* ── V2 Filters (remove inline styles) ── */
.oh-archive--v2 .oh-topic-filters {
    max-width: var(--oh-max-width);
    margin: 0 auto 20px;
    padding: 0 24px;
}

/* ── V2 Result Count ── */
.oh-archive--v2 .oh-result-count-wrap {
    max-width: var(--oh-max-width);
    margin: 0 auto 20px;
    padding: 0 24px;
}

/* ── V2 Grid ── */
.oh-archive--v2 .oh-archive-grid {
    gap: 28px;
}
@media (max-width: 1024px) {
    .oh-archive--v2 .oh-archive-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 768px) {
    .oh-archive--v2 .oh-archive-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .oh-archive--v2 .oh-archive-header h1 {
        font-size: 28px;
    }
    .oh-archive--v2 .oh-featured-card .oh-card-image-wrap {
        height: 180px;
    }
}

/* ── V2 Magazine Layout: Featured Cards ── */
.oh-archive--v2 .oh-archive-grid .oh-featured-card:nth-child(7n+1) {
    grid-column: span 2;
    flex-direction: row;
}
.oh-archive--v2 .oh-archive-grid .oh-featured-card:nth-child(7n+1) .oh-card-image-wrap {
    width: 45%;
    flex-shrink: 0;
    height: auto;
    min-height: 260px;
    border-radius: 12px 0 0 12px;
}
.oh-archive--v2 .oh-archive-grid .oh-featured-card:nth-child(7n+1) .oh-card-image-wrap img {
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.oh-archive--v2 .oh-archive-grid .oh-featured-card:nth-child(7n+1) .oh-card-image-wrap {
    position: relative;
}
.oh-archive--v2 .oh-archive-grid .oh-featured-card:nth-child(7n+1) .oh-featured-card-body,
.oh-archive--v3 .oh-archive-grid .oh-featured-card:nth-child(7n+1) .oh-featured-card-body {
    padding: 32px;
    justify-content: center;
    gap: 14px;
}
/* Wide card: kill the margin-top: auto push so content stays centered as one block */
.oh-archive--v2 .oh-archive-grid .oh-featured-card:nth-child(7n+1) .oh-featured-card-body::after,
.oh-archive--v3 .oh-archive-grid .oh-featured-card:nth-child(7n+1) .oh-featured-card-body::after {
    margin-top: 4px;
}
/* Wide card: drop flex-grow from the paragraph so children all bunch + center together */
.oh-archive--v2 .oh-archive-grid .oh-featured-card:nth-child(7n+1) .oh-featured-card-body p,
.oh-archive--v3 .oh-archive-grid .oh-featured-card:nth-child(7n+1) .oh-featured-card-body p {
    flex-grow: 0;
}
/* Wide card: drop the margin-top: auto on tags so they don't push to bottom */
.oh-archive--v2 .oh-archive-grid .oh-featured-card:nth-child(7n+1) .oh-card-tags,
.oh-archive--v3 .oh-archive-grid .oh-featured-card:nth-child(7n+1) .oh-card-tags {
    margin-top: 0;
}
.oh-archive--v2 .oh-archive-grid .oh-featured-card:nth-child(7n+1) .oh-featured-card-body h3 {
    font-size: 22px;
    -webkit-line-clamp: 3;
}
.oh-archive--v2 .oh-archive-grid .oh-featured-card:nth-child(7n+1) .oh-featured-card-body p {
    -webkit-line-clamp: 4;
}
@media (max-width: 1024px) {
    .oh-archive--v2 .oh-archive-grid .oh-featured-card:nth-child(7n+1) {
        grid-column: span 2;
    }
}
@media (max-width: 768px) {
    .oh-archive--v2 .oh-archive-grid .oh-featured-card:nth-child(7n+1) {
        grid-column: span 1;
        flex-direction: column;
    }
    .oh-archive--v2 .oh-archive-grid .oh-featured-card:nth-child(7n+1) .oh-card-image-wrap {
        width: 100%;
        min-height: 180px;
        border-radius: 12px 12px 0 0;
        position: relative;
    }
    .oh-archive--v2 .oh-archive-grid .oh-featured-card:nth-child(7n+1) .oh-featured-card-body {
        padding: 24px;
    }
}

/* ── V2 Archive: eBook Promo Banner ── */
/* ── Archive eBook Banner: Orange gradient + cover image ── */
.oh-archive-ebook-banner {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, #E87722 0%, #D4691E 60%, #C25A14 100%);
    border-radius: 12px;
    padding: 40px 48px;
    gap: 40px;
    margin: 8px 0;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
}
/* Subtle decorative overlay for depth */
.oh-archive-ebook-banner::before {
    content: '';
    position: absolute;
    top: -60%;
    right: -10%;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    pointer-events: none;
}
.oh-archive-ebook-banner__badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--oh-accent);
    background: var(--oh-white);
    padding: 4px 12px;
    border-radius: 50px;
    margin-bottom: 12px;
}
.oh-archive-ebook-banner__title {
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--oh-white);
    margin: 0 0 8px;
    line-height: 1.3;
}
.oh-archive-ebook-banner__text {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.55;
    margin: 0 0 20px;
    max-width: 520px;
}
.oh-archive-ebook-banner .oh-btn--primary {
    background: var(--oh-white);
    color: var(--oh-accent);
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.oh-archive-ebook-banner .oh-btn--primary:hover {
    background: #F5F7FA;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.oh-archive-ebook-banner:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}
.oh-archive-ebook-banner__visual {
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}
.oh-archive-ebook-banner__visual img {
    width: 140px;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.15);
    transform: rotate(-3deg);
    transition: transform 0.3s ease;
}
.oh-archive-ebook-banner:hover .oh-archive-ebook-banner__visual img {
    transform: rotate(0deg) scale(1.03);
}
@media (max-width: 768px) {
    .oh-archive-ebook-banner {
        flex-direction: column;
        padding: 28px 24px;
        text-align: center;
    }
    .oh-archive-ebook-banner__visual {
        order: -1;
    }
    .oh-archive-ebook-banner__visual img {
        width: 100px;
        transform: rotate(0deg);
    }
    .oh-archive-ebook-banner__text {
        max-width: none;
    }
}

/* ── V2 Archive: Back-to-Hub Button ── */
.oh-archive--v2 .oh-back-link {
    text-align: center;
    margin-top: 8px;
    max-width: var(--oh-max-width);
    margin-left: auto;
    margin-right: auto;
    padding: 0 24px;
}
.oh-archive--v2 .oh-back-link a.oh-btn {
    display: inline-flex;
    align-items: center;
    font-size: 15px;
}

/* ── V2 Pagination ── */
.oh-archive--v2 .oh-pagination-wrap {
    max-width: var(--oh-max-width);
    margin: 0 auto 48px;
    padding: 0 24px;
    text-align: center;
}
.oh-archive--v2 .oh-pagination-wrap .page-numbers {
    display: inline-block;
    padding: 8px 14px;
    margin: 0 2px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--oh-gray-dark);
    font-size: 15px;
    transition: var(--oh-transition);
}
.oh-archive--v2 .oh-pagination-wrap .page-numbers.current,
.oh-archive--v2 .oh-pagination-wrap .page-numbers:hover {
    background: var(--oh-blue);
    color: var(--oh-white);
}

/* ── V2 Back Link ── */
.oh-archive--v2 .oh-back-link {
    text-align: center;
    margin-bottom: 48px;
}
.oh-archive--v2 .oh-back-link a {
    color: var(--oh-blue-dark);
    font-weight: 600;
    text-decoration: none;
    font-size: 15px;
    transition: var(--oh-transition);
}
.oh-archive--v2 .oh-back-link a:hover {
    color: var(--oh-blue);
    text-decoration: underline;
}


/* ═══════════════════════════════════════════════
   V2 SINGLE POST REDESIGN
   3-column layout, scroll progress bar,
   sticky sidebars, clean inline header
   ═══════════════════════════════════════════════ */

/* ── Scroll Progress Bar ── */
/* sits at the bottom edge of the fixed site header */
.oh-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 4px;
    width: 0%;
    background: linear-gradient(90deg, var(--oh-accent), #D4691E);
    z-index: 999999;
    transition: width 80ms linear;
    pointer-events: none;
    box-shadow: 0 1px 4px rgba(232, 119, 34, 0.35);
}

/* ── Article Header (clean, inline) ── */
.oh-single-v2 .oh-article-hero {
    max-width: var(--oh-max-width);
    margin: 0 auto;
    padding: 32px 24px 0;
}
.oh-single-v2 .oh-article-hero__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
    font-size: 14px;
    color: var(--oh-gray-mid);
}
.oh-single-v2 .oh-article-hero__badge {
    background: var(--oh-accent);
    color: var(--oh-white);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 3px 10px;
    border-radius: 4px;
}
.oh-single-v2 .oh-article-hero__sep {
    color: #D1D5DB;
}
.oh-single-v2 .oh-article-hero__read-time {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.oh-single-v2 .oh-article-hero__read-time svg {
    opacity: 0.6;
}
.oh-single-v2 .oh-article-hero__topics {
    display: inline-flex;
    gap: 6px;
}
.oh-single-v2 .oh-article-hero__topic,
.oh-single-v2 .oh-article-hero__topic-link {
    background: var(--oh-blue-light);
    color: var(--oh-blue);
    padding: 2px 10px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    transition: var(--oh-transition);
}
.oh-single-v2 .oh-article-hero__topic-link:hover {
    background: var(--oh-blue);
    color: var(--oh-white);
}
.oh-single-v2 .oh-article-hero__title {
    /* 2026-05-26: px not rem — legacy theme sets root to 10px (62.5%), so rem
       values render at 62.5% of intent. 2.4rem was computing to 24px. */
    font-size: 38px;
    font-weight: 800;
    color: var(--oh-navy);
    line-height: 1.2;
    margin: 0 0 16px;
    letter-spacing: -0.02em;
    max-width: 820px;
}
.oh-single-v2 .oh-article-hero__excerpt {
    /* 2026-05-26: px not rem (legacy 10px root made 1.1rem = 11px) */
    font-size: 18px;
    color: var(--oh-gray-mid);
    line-height: 1.6;
    margin: 0 0 28px;
    max-width: 720px;
}
.oh-single-v2 .oh-article-hero__image {
    margin: 0 0 0;
    border-radius: 12px;
    overflow: hidden;
    max-width: 100%;
}
.oh-single-v2 .oh-article-hero__image img {
    /* 2026-05-27: cap height so the hero reads as a banner, not a wall.
       Was aspect-ratio 16/9 (→621px tall on a 1104px frame, also upscaled
       narrow sources). Now full-width but max 420px, cropped via cover. */
    width: 100%;
    height: 420px;
    max-height: 420px;
    display: block;
    object-fit: cover;
}
@media (max-width: 640px) {
    .oh-single-v2 .oh-article-hero__image img { height: 240px; max-height: 240px; }
}

/* ── Three-Column Layout ── */
.oh-article-body--v2 {
    display: grid;
    grid-template-columns: 100px 1fr 320px;
    gap: 0 40px;
    max-width: var(--oh-max-width);
    margin: 0 auto;
    padding: 40px 24px 0;
    align-items: start;
    overflow: visible;
}

/* ── Left Sidebar ── */
.oh-article-left-sidebar {
    position: relative;
    align-self: stretch;  /* stretch grid cell so sticky inner has room */
}
.oh-left-sidebar__inner {
    position: sticky;
    top: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.oh-left-sidebar__label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--oh-gray-mid);
    font-weight: 600;
    margin-bottom: 6px;
}
.oh-left-sidebar__share {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.oh-share-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--oh-gray-light);
    color: var(--oh-navy);
    border: 1px solid #E5E7EB;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
}
.oh-share-icon:hover {
    background: var(--oh-blue);
    color: var(--oh-white);
    border-color: var(--oh-blue);
    transform: scale(1.08);
}
.oh-share-icon--li:hover { background: #0A66C2; border-color: #0A66C2; }
.oh-share-icon--tw:hover { background: #000; border-color: #000; }

.oh-left-sidebar__divider {
    width: 24px;
    border: none;
    border-top: 1px solid #E5E7EB;
    margin: 4px 0;
}

.oh-left-sidebar__author {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
}
.oh-left-sidebar__author-img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #E5E7EB;
}
.oh-left-sidebar__author-img--logo {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--oh-gray-light);
}
.oh-left-sidebar__author-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--oh-navy);
    line-height: 1.3;
    word-break: break-word;
}
.oh-left-sidebar__author-role {
    font-size: 12px;
    color: var(--oh-gray-mid);
    line-height: 1.3;
    word-break: break-word;
}

/* ── Mobile share row (hidden on desktop) ── */
.oh-article-share--mobile {
    display: none;
}

/* ── Article Content ── */
.oh-single-v2 .oh-article-content {
    font-size: 17px;
    line-height: 1.75;
    color: var(--oh-gray-dark);
}
.oh-single-v2 .oh-article-content h2 {
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    /* 2026-05-26: px not rem — legacy 10px root made rem subheads tiny.
       28px H2 / 22px H3 now stand clearly above the 17px body. */
    font-size: 28px;
    font-weight: 700;
    color: var(--oh-navy);
    margin: 2em 0 0.75em;
    line-height: 1.3;
}
.oh-single-v2 .oh-article-content h3 {
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--oh-navy);
    margin: 1.75em 0 0.5em;
    line-height: 1.35;
}
.oh-single-v2 .oh-article-content p {
    margin: 0 0 1.25em;
}
.oh-single-v2 .oh-article-content blockquote {
    border-left: 4px solid var(--oh-blue);
    background: var(--oh-blue-light);
    padding: 20px 24px;
    margin: 1.5em 0;
    border-radius: 0 8px 8px 0;
    font-style: italic;
    color: var(--oh-navy);
}
.oh-single-v2 .oh-article-content ul,
.oh-single-v2 .oh-article-content ol {
    margin: 0 0 1.25em;
    padding-left: 1.5em;
}
.oh-single-v2 .oh-article-content li {
    margin-bottom: 0.5em;
}
.oh-single-v2 .oh-article-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 1em 0;
}
.oh-single-v2 .oh-article-content a {
    color: var(--oh-blue);
    text-decoration: underline;
    text-decoration-color: rgba(43, 151, 223, 0.3);
    text-underline-offset: 2px;
    transition: var(--oh-transition);
}
.oh-single-v2 .oh-article-content a:hover {
    text-decoration-color: var(--oh-blue);
}

/* ── Right Sidebar ── */
.oh-article-sidebar--v2 {
    position: relative;
    align-self: stretch;
}
.oh-right-sidebar__inner {
    position: sticky;
    top: 80px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 20px;
}

/* Sidebar Cards (shared) */
.oh-sidebar-card {
    background: var(--oh-white);
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    flex-shrink: 0;
}
.oh-sidebar-card__heading {
    display: block;
    font-size: 17px;
    font-weight: 700;
    color: var(--oh-navy);
    line-height: 1.35;
    margin-bottom: 10px;
}
.oh-sidebar-card__text {
    font-size: 15px;
    color: var(--oh-gray-mid);
    line-height: 1.55;
    margin: 0 0 16px;
}

/* Demo CTA card */
.oh-sidebar-card--demo {
    background: linear-gradient(135deg, var(--oh-blue) 0%, #1E7BBF 100%);
    border: none;
    border-top: none;
}
.oh-sidebar-card--demo .oh-sidebar-card__heading {
    color: var(--oh-white);
    font-size: 19px;
}
.oh-sidebar-card--demo .oh-sidebar-card__text {
    color: var(--oh-white);
    font-size: 15px;
}
/* Sidebar demo card — dual pill buttons */
.oh-sidebar-card__buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.oh-cta-button--full,
.oh-cta-button-outline--full {
    display: block;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
}
.oh-sidebar-card--demo .oh-cta-button {
    background: var(--oh-white);
    color: var(--oh-blue-dark, #1A6DAA);
    font-weight: 600;
    font-size: 15px;
    padding: 12px 20px;
    border-radius: 50px;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: var(--oh-transition);
}
.oh-sidebar-card--demo .oh-cta-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.oh-sidebar-card--demo .oh-cta-button-outline {
    border: 2px solid rgba(255, 255, 255, 0.7);
    color: var(--oh-white);
    background: transparent;
    font-weight: 600;
    font-size: 14px;
    padding: 10px 20px;
    border-radius: 50px;
    text-decoration: none;
    transition: var(--oh-transition);
}
.oh-sidebar-card--demo .oh-cta-button-outline:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: var(--oh-white);
}

/* Event CTA card */
/* ── Event CTA: image-based or text-based ── */
.oh-sidebar-card--event {
    border-top: 3px solid var(--oh-accent);
}
/* Image-based event card */
.oh-sidebar-card--event-image {
    padding: 0;
    border: 1px solid #E5E7EB;
    border-top: 3px solid var(--oh-accent);
    overflow: hidden;
}
.oh-sidebar-card--event-image a {
    display: block;
    text-decoration: none;
}
.oh-sidebar-card--event-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}
.oh-sidebar-card--event-image__media {
    display: block;
    overflow: hidden;
}
.oh-sidebar-card--event-image:hover .oh-sidebar-card--event-image__media img {
    transform: scale(1.02);
}
/* 2026-05-20: "Come see us" button on event-image card */
.oh-sidebar-card--event-image__cta {
    padding: 14px 16px 16px;
    background: var(--oh-white);
}
.oh-sidebar-event-btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    padding: 12px 18px;
    border-radius: 50px;
    /* 2026-05-20: SB blue per Jason */
    background: var(--oh-blue);
    color: var(--oh-white) !important;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.2px;
    text-decoration: none;
    border: 2px solid var(--oh-blue);
    box-shadow: 0 2px 8px rgba(43,151,223,0.25);
    transition: all 0.2s ease;
}
.oh-sidebar-event-btn:hover {
    background: var(--oh-white);
    color: var(--oh-blue) !important;
    border-color: var(--oh-blue);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(43,151,223,0.30);
}

/* ── 2026-05-20: Video series badge + "Continue the series" block ──────── */
.oh-video-series-badge {
    margin: 0 0 16px;
}
.oh-video-series-badge__pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--oh-blue);
    color: #fff;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.2px;
    box-shadow: 0 2px 8px rgba(43,151,223,0.25);
}
.oh-video-series-badge__part { font-weight: 700; }
.oh-video-series-badge__sep { opacity: 0.6; }
.oh-video-series-badge__name { opacity: 0.95; }

.oh-video-series-block {
    max-width: 1100px;
    margin: 48px auto 64px;
    padding: 0 24px;
}
.oh-video-series-block__header {
    text-align: center;
    margin-bottom: 28px;
}
.oh-video-series-block__title {
    font-size: 24px;
    font-weight: 700;
    color: var(--oh-navy);
    margin: 0 0 6px;
}
.oh-video-series-block__sub {
    font-size: 15px;
    color: var(--oh-gray-mid);
    margin: 0;
}
.oh-video-series-block__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
@media (max-width: 768px) {
    .oh-video-series-block__grid { grid-template-columns: 1fr; }
}
.oh-video-series-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.oh-video-series-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.10);
    border-color: var(--oh-blue);
}
.oh-video-series-card.is-current {
    cursor: default;
    border-color: var(--oh-blue);
    box-shadow: 0 0 0 2px var(--oh-blue) inset, 0 4px 12px rgba(43,151,223,0.18);
}
.oh-video-series-card.is-current:hover { transform: none; }
.oh-video-series-card__thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000;
    overflow: hidden;
}
.oh-video-series-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.oh-video-series-card__part-pill {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(0,0,0,0.75);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 4px 10px;
    border-radius: 50px;
}
.oh-video-series-card__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}
.oh-video-series-card:hover .oh-video-series-card__play { opacity: 1; }
.oh-video-series-card__now-pill {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: var(--oh-blue);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 4px 10px;
    border-radius: 50px;
}
.oh-video-series-card__body {
    padding: 16px;
}
.oh-video-series-card__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--oh-navy);
    line-height: 1.4;
    margin: 0;
}

/* ── Featured Video Series block on the archive ────────────────────────
   2026-05-20: SBO purple (#6d0063) treatment. Cinematic, premium feel —
   gradient bg, white type, larger part thumbs, decorative pattern overlay,
   clear visual hierarchy. Future series can override --series-bg per
   container (e.g. `data-series-color="..."`). */
.oh-archive-series {
    max-width: var(--oh-max-width, 1200px);
    margin: 56px auto;
    padding: 0 24px;
}
.oh-archive-series__header {
    text-align: center;
    margin-bottom: 28px;
}
.oh-archive-series__eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    color: #6d0063;
    margin-bottom: 8px;
}
.oh-archive-series__title {
    font-size: 32px;
    font-weight: 700;
    color: var(--oh-navy);
    margin: 0 0 8px;
    letter-spacing: -0.01em;
}
.oh-archive-series__sub {
    font-size: 16px;
    color: var(--oh-gray-mid);
    margin: 0;
}

.oh-archive-series-card {
    position: relative;
    background: linear-gradient(135deg, #7d0073 0%, #6d0063 40%, #4a0042 100%);
    border: none;
    border-radius: 18px;
    padding: 40px 40px 36px;
    margin-bottom: 32px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(109, 0, 99, 0.20), 0 8px 16px rgba(0,0,0,0.08);
    color: #fff;
}
/* Soft decorative glow on the top-right */
.oh-archive-series-card::before {
    content: '';
    position: absolute;
    top: -100px;
    right: -100px;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 70%);
    pointer-events: none;
}
/* Subtle diagonal accent stripe on the bottom-left */
.oh-archive-series-card::after {
    content: '';
    position: absolute;
    bottom: -80px;
    left: -80px;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 70%);
    pointer-events: none;
}
.oh-archive-series-card__header {
    position: relative;
    z-index: 1;
    margin-bottom: 32px;
    max-width: 720px;
}
.oh-archive-series-card__pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.15);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    padding: 7px 14px;
    border-radius: 50px;
    margin-bottom: 16px;
    backdrop-filter: blur(8px);
}
.oh-archive-series-card__pill::before {
    content: '●';
    color: #ff8aef;
    font-size: 9px;
    line-height: 1;
}
.oh-archive-series-card__name {
    font-size: 30px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 12px;
    line-height: 1.2;
    letter-spacing: -0.015em;
}
.oh-archive-series-card__desc {
    font-size: 16px;
    color: rgba(255,255,255,0.85);
    margin: 0 0 22px;
    line-height: 1.6;
    max-width: 640px;
}
.oh-archive-series-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 26px;
    background: #fff;
    color: #6d0063 !important;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.2px;
    text-decoration: none;
    border: 2px solid #fff;
    transition: all 0.2s ease;
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}
.oh-archive-series-card__cta:hover {
    background: transparent;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0,0,0,0.25);
}
.oh-archive-series-card__parts {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
@media (max-width: 900px) {
    .oh-archive-series-card__parts { grid-template-columns: 1fr; }
    .oh-archive-series-card { padding: 32px 24px 28px; }
    .oh-archive-series-card__name { font-size: 24px; }
}

.oh-archive-series-part {
    display: flex;
    flex-direction: column;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    backdrop-filter: blur(6px);
    transition: all 0.25s ease;
}
.oh-archive-series-part:hover {
    transform: translateY(-4px);
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.30);
    box-shadow: 0 16px 32px rgba(0,0,0,0.25);
}
.oh-archive-series-part__thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000;
    overflow: hidden;
}
.oh-archive-series-part__thumb img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 0.4s ease;
}
.oh-archive-series-part:hover .oh-archive-series-part__thumb img { transform: scale(1.04); }
.oh-archive-series-part__num {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #6d0063;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    padding: 5px 11px;
    border-radius: 50px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.30);
}
.oh-archive-series-part__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.oh-archive-series-part:hover .oh-archive-series-part__play {
    opacity: 1;
    transform: scale(1.08);
}
.oh-archive-series-part__title {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    line-height: 1.45;
    margin: 0;
    padding: 14px 16px 18px;
    letter-spacing: -0.005em;
}

/* ──────────────────────────────────────────────────────────────────────
   PRACTITIONER GUIDES (hs_guide) — 2026-05-20
   Archive grid + two-column single hero + gated download form
   ────────────────────────────────────────────────────────────────────── */

/* Archive grid */
.oh-guide-archive {
    max-width: var(--oh-max-width, 1200px);
    margin: 32px auto 48px;
    padding: 0 24px;
}
.oh-guide-archive__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
@media (max-width: 960px) { .oh-guide-archive__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .oh-guide-archive__grid { grid-template-columns: 1fr; } }
.oh-guide-archive__empty {
    text-align: center;
    color: var(--oh-gray-mid);
    font-size: 17px;
    padding: 48px 0;
}
.oh-guide-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: all 0.25s ease;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.oh-guide-card:hover {
    transform: translateY(-4px);
    border-color: var(--oh-blue);
    box-shadow: 0 12px 32px rgba(0,0,0,0.10);
}
.oh-guide-card__cover {
    position: relative;
    aspect-ratio: 4 / 3;
    background: linear-gradient(135deg, #E0F2FE 0%, #C7E5F8 100%);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.oh-guide-card__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.oh-guide-card__cover-fallback {
    color: var(--oh-blue);
    opacity: 0.4;
}
.oh-guide-card__body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.oh-guide-card__type {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--oh-blue);
    margin-bottom: 8px;
}
.oh-guide-card__title {
    font-size: 19px;
    font-weight: 700;
    color: var(--oh-navy);
    line-height: 1.3;
    margin: 0 0 8px;
}
.oh-guide-card__subtitle {
    font-size: 14px;
    color: var(--oh-gray-mid);
    margin: 0 0 14px;
    line-height: 1.5;
    flex: 1;
}
.oh-guide-card__meta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.oh-guide-card__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--oh-gray-mid);
    font-weight: 500;
}
.oh-guide-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
    color: var(--oh-blue);
    margin-top: auto;
    transition: gap 0.2s ease;
}
.oh-guide-card:hover .oh-guide-card__cta { gap: 10px; }


/* Single guide page */
.oh-guide-single {
    padding-bottom: 64px;
    /* 2026-05-20: Page-wide soft tint so the hero panel feels intentional */
    background:
        radial-gradient(circle at 15% 0%, rgba(43,151,223,0.06) 0%, transparent 45%),
        radial-gradient(circle at 95% 10%, rgba(232,119,34,0.04) 0%, transparent 40%);
}
.oh-guide-hero {
    max-width: var(--oh-max-width, 1200px);
    margin: 40px auto 56px;
    padding: 0 24px;
}
.oh-guide-hero__panel {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 18px;
    padding: 40px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.04);
}
/* 2026-05-20: Two-column hero (cover + copy). Gate moved out into its own
   full-width section below — gives the form room to display every field
   without scrolling inside the iframe, and lets the hero copy breathe. */
.oh-guide-hero__inner {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 56px;
    align-items: start;
}
.oh-guide-hero__cover { min-width: 0; }
.oh-guide-hero__copy  { min-width: 0; }
@media (max-width: 860px) {
    .oh-guide-hero__inner { grid-template-columns: 1fr; gap: 32px; }
    .oh-guide-hero__cover { max-width: 260px; margin: 0 auto; }
}

/* "Get the free PDF ↓" jump CTA inside the copy column */
.oh-guide-hero__jump-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 28px;
    padding: 14px 28px;
    background: var(--oh-blue);
    color: #fff !important;
    border: 2px solid var(--oh-blue);
    border-radius: 50px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(43,151,223,0.25);
    transition: all 0.2s ease;
}
.oh-guide-hero__jump-cta:hover {
    background: #fff;
    color: var(--oh-blue) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(43,151,223,0.30);
}
.oh-guide-hero__jump-cta svg {
    transition: transform 0.2s ease;
}
.oh-guide-hero__jump-cta:hover svg { transform: translateY(2px); }
.oh-guide-hero__cover {
    position: relative;
    background: linear-gradient(135deg, #E0F2FE 0%, #C7E5F8 100%);
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    box-shadow:
        0 24px 60px -12px rgba(0,0,0,0.20),
        0 12px 28px -8px rgba(43,151,223,0.18),
        0 0 0 1px rgba(0,0,0,0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(-1.5deg);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease;
}
.oh-guide-hero__cover:hover {
    transform: rotate(0) translateY(-4px);
    box-shadow:
        0 32px 70px -12px rgba(0,0,0,0.25),
        0 16px 32px -8px rgba(43,151,223,0.22),
        0 0 0 1px rgba(0,0,0,0.05);
}
.oh-guide-hero__cover img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.oh-guide-hero__cover-fallback { color: var(--oh-blue); opacity: 0.4; }
/* "FREE" corner ribbon — gives the cover that "this is an asset, not just an image" feel */
.oh-guide-hero__ribbon {
    position: absolute;
    top: 18px;
    right: -36px;
    transform: rotate(45deg);
    background: linear-gradient(135deg, var(--oh-accent) 0%, #D4691E 100%);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 6px 44px;
    box-shadow: 0 4px 10px rgba(232,119,34,0.30);
    z-index: 2;
}
.oh-guide-hero__copy { min-width: 0; }
.oh-guide-hero__type {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, var(--oh-blue) 0%, #1B7ABD 100%);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    padding: 7px 16px;
    border-radius: 50px;
    margin-bottom: 18px;
    box-shadow: 0 4px 12px rgba(43,151,223,0.25);
}
.oh-guide-hero__type::before {
    content: "★";
    font-size: 10px;
    line-height: 1;
}
.oh-guide-hero__title {
    font-size: 36px;
    font-weight: 700;
    color: var(--oh-navy);
    line-height: 1.2;
    margin: 0 0 12px;
    letter-spacing: -0.015em;
}
@media (max-width: 720px) { .oh-guide-hero__title { font-size: 28px; } }
.oh-guide-hero__subtitle {
    font-size: 17px;
    color: var(--oh-gray-dark);
    line-height: 1.55;
    margin: 0 0 20px;
}
.oh-guide-hero__meta {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
}
.oh-guide-hero__meta li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--oh-gray-mid);
    font-weight: 600;
}
.oh-guide-hero__audience {
    background: var(--oh-gray-light);
    padding: 14px 18px;
    border-radius: 10px;
    margin-bottom: 24px;
    border-left: 3px solid var(--oh-blue);
}
.oh-guide-hero__audience-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--oh-blue);
    margin-bottom: 4px;
}
.oh-guide-hero__audience-text {
    font-size: 14px;
    color: var(--oh-gray-dark);
    line-height: 1.5;
}
.oh-guide-hero__inside-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--oh-navy);
    margin: 0 0 14px;
}
.oh-guide-hero__inside-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.oh-guide-hero__inside-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 15px;
    color: var(--oh-gray-dark);
    line-height: 1.55;
    margin-bottom: 10px;
}
.oh-guide-hero__inside-list li svg {
    flex-shrink: 0;
    color: var(--oh-blue);
    margin-top: 3px;
}

/* Gate sticky positioning is now handled inside the 3-col media query above. */
/* 2026-05-20: SB Blue gate box — matches the other blue panels site-wide */
.oh-guide-gate {
    background: linear-gradient(135deg, var(--oh-blue) 0%, #1B7ABD 100%);
    border: none;
    border-radius: 16px;
    overflow: hidden;
    box-shadow:
        0 20px 50px -12px rgba(43,151,223,0.30),
        0 8px 16px -4px rgba(0,0,0,0.06);
}
.oh-guide-gate__intro {
    padding: 28px 24px 24px;
    text-align: center;
    background: transparent;
    border-bottom: 1px solid rgba(255,255,255,0.15);
    margin-bottom: 0;
}
.oh-guide-gate__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: rgba(255,255,255,0.85);
    margin-bottom: 10px;
}
.oh-guide-gate__title {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 8px;
    letter-spacing: -0.01em;
}
.oh-guide-gate__sub {
    font-size: 14px;
    color: rgba(255,255,255,0.85);
    margin: 0;
    line-height: 1.55;
}
.oh-guide-gate__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    padding: 14px 20px 20px;
    border-top: 1px solid rgba(255,255,255,0.15);
    background: transparent;
}
.oh-guide-gate__trust-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 500;
    color: rgba(255,255,255,0.85);
}
.oh-guide-gate__trust-item svg {
    color: #6EE7B7;
    flex-shrink: 0;
}
.oh-guide-gate__form {
    padding: 0;
    background: #fff;
}
.oh-guide-gate__form iframe {
    display: block;
    width: 100%;
    border: 0;
    background: #fff;
}
/* Empty / placeholder state — looks intentional, not broken */
.oh-guide-gate__missing {
    margin: 8px 24px 24px;
    padding: 18px 20px;
    background: #F8FAFC;
    border: 1px dashed #CBD5E1;
    border-radius: 10px;
    color: var(--oh-gray-mid);
    font-size: 13px;
    line-height: 1.5;
    font-style: normal;
}
.oh-guide-gate__missing em { font-style: normal; }

/* Post-submit confirmation — celebratory, clear next step */
.oh-guide-gate__post-submit {
    padding: 28px 24px 30px;
    background: linear-gradient(180deg, #ECFDF5 0%, #D1FAE5 100%);
    border-top: 1px solid #A7F3D0;
    text-align: center;
}
.oh-guide-gate__post-submit::before {
    content: "";
    display: block;
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: #10B981 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/28px no-repeat;
    box-shadow: 0 6px 16px rgba(16,185,129,0.30);
    animation: ohGuideCheckPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes ohGuideCheckPop {
    0%   { transform: scale(0); opacity: 0; }
    60%  { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1); }
}
.oh-guide-gate__post-submit p {
    color: #065F46;
    font-weight: 700;
    font-size: 17px;
    margin: 0 0 6px;
    line-height: 1.4;
}
.oh-guide-gate__post-submit p + p {
    color: #047857;
    font-weight: 500;
    font-size: 14px;
    margin: 0 0 18px;
}
.oh-guide-gate__post-submit .oh-guide-gate__post-sub {
    color: #047857;
    font-weight: 500;
    font-size: 14px;
    margin: 0 0 18px;
}
.oh-guide-gate__dl-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    background: var(--oh-blue);
    color: #fff !important;
    border: 2px solid var(--oh-blue);
    border-radius: 50px;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(43,151,223,0.30);
    transition: all 0.2s ease;
}
.oh-guide-gate__dl-btn::after {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V3M5 10l7 7 7-7M3 21h18'/%3E%3C/svg%3E") center/contain no-repeat;
    transition: background 0.2s ease;
}
.oh-guide-gate__dl-btn:hover {
    background: #fff;
    color: var(--oh-blue) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(43,151,223,0.35);
}
.oh-guide-gate__dl-btn:hover::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B97DF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V3M5 10l7 7 7-7M3 21h18'/%3E%3C/svg%3E");
}

/* Body / back link */
.oh-guide-body {
    max-width: 760px;
    margin: 24px auto 40px;
    padding: 0 24px;
}

/* ── Dedicated download section (full-width gate) ───────────────────── */
.oh-guide-download {
    background: linear-gradient(180deg, transparent 0%, rgba(43,151,223,0.05) 30%, rgba(43,151,223,0.05) 100%);
    padding: 64px 24px 56px;
    margin-top: 24px;
    scroll-margin-top: 100px;  /* offset the jump anchor for sticky headers */
}
.oh-guide-download__inner {
    max-width: 720px;
    margin: 0 auto;
}
/* When the gate sits inside this section, give it full width + full form height */
.oh-guide-download .oh-guide-gate {
    width: 100%;
}
.oh-guide-download .oh-guide-gate__form { padding: 0; }
/* 2026-05-20: Right-sized iframe height. 720px fits a typical 8-field form
   without an empty whitespace tail. The JS in the render helper auto-resizes
   based on postMessage height events from Zoho when they fire. `height:` (not
   min-height) so this wins over the iframe's HTML height attribute. */
.oh-guide-download .oh-guide-gate__form iframe {
    height: 720px !important;
    min-height: 720px;
}

/* ── Related Free Guides ─────────────────────────────────────────────── */
.oh-guide-related {
    max-width: var(--oh-max-width, 1200px);
    margin: 64px auto 32px;
    padding: 0 24px;
}
.oh-guide-related__header {
    text-align: center;
    margin-bottom: 32px;
}
.oh-guide-related__eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    color: var(--oh-blue);
    margin-bottom: 8px;
}
.oh-guide-related__title {
    font-size: 28px;
    font-weight: 700;
    color: var(--oh-navy);
    margin: 0;
    letter-spacing: -0.01em;
}
/* 2026-05-20: Use flex with justify-center so 2-card layout doesn't leave
   an empty 3rd column slot — cards stay centered. Cards have max-width so
   they don't stretch when there are only 1-2. */
.oh-guide-related__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
}
.oh-guide-related-card {
    flex: 0 1 340px;
    max-width: 360px;
}
@media (max-width: 640px) {
    .oh-guide-related-card { flex: 0 1 100%; }
}

.oh-guide-related-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: all 0.25s ease;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.oh-guide-related-card:hover {
    transform: translateY(-4px);
    border-color: var(--oh-blue);
    box-shadow: 0 14px 36px rgba(0,0,0,0.10);
}
.oh-guide-related-card__cover {
    aspect-ratio: 4 / 3;
    background: linear-gradient(135deg, #E0F2FE 0%, #C7E5F8 100%);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.oh-guide-related-card__cover img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.oh-guide-related-card__cover-fallback {
    color: var(--oh-blue);
    opacity: 0.4;
}
.oh-guide-related-card__body {
    padding: 22px 22px 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
    text-align: center;  /* center the title, sub, and button */
}
.oh-guide-related-card__type {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--oh-blue);
    margin-bottom: 8px;
}
.oh-guide-related-card__title {
    font-size: 17px;
    font-weight: 700;
    color: var(--oh-navy);
    margin: 0 0 8px;
    line-height: 1.3;
}
.oh-guide-related-card__sub {
    font-size: 13px;
    color: var(--oh-gray-mid);
    margin: 0 0 14px;
    line-height: 1.55;
    flex: 1;
}
/* 2026-05-20: "Read Guide" is now a centered white pill button */
.oh-guide-related-card__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--oh-blue) !important;
    background: #fff;
    border: 2px solid var(--oh-blue);
    border-radius: 50px;
    padding: 9px 22px;
    margin-top: auto;
    align-self: center;  /* center the pill in the flex card */
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.oh-guide-related-card:hover .oh-guide-related-card__cta {
    background: var(--oh-blue);
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(43,151,223,0.25);
}

/* eBook CTA — same pattern as OH hub home, scoped spacing on guide page */
.oh-guide-ebook-cta {
    max-width: calc(var(--oh-max-width, 1200px) - 48px);
    margin: 48px auto 32px;
}

/* Orange back-to-guides button — matches the AMBER button family */
.oh-guide-back-wrap {
    text-align: center;
    margin: 32px auto 56px;
    padding: 0 24px;
}
/* 2026-05-20: Same recipe as .oh-guide-hero__jump-cta — solid SB Blue,
   white-text-inverse on hover. Keeps the two primary buttons on the guide
   page visually consistent. */
.oh-guide-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: var(--oh-blue);
    color: #fff !important;
    border: 2px solid var(--oh-blue);
    border-radius: 50px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(43,151,223,0.25);
    transition: all 0.2s ease;
}
.oh-guide-back-btn:hover {
    background: #fff;
    color: var(--oh-blue) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(43,151,223,0.30);
}
.oh-guide-back-btn svg {
    transition: transform 0.2s ease;
}
.oh-guide-back-btn:hover svg { transform: translateX(-3px); }

/* ═══ GUIDE DOWNLOAD THANK-YOU PAGE ═══════════════════════════════════
   /guide-download/?guide={slug} — dedicated conversion landing page.
   Big confirmation badge, cover + download CTA, "What's inside" reminder,
   then demo CTA + related guides. 2026-05-21 */
.oh-guide-download-page {
    background:
        radial-gradient(circle at 15% 0%, rgba(43,151,223,0.06) 0%, transparent 45%),
        radial-gradient(circle at 95% 10%, rgba(232,119,34,0.04) 0%, transparent 40%);
    padding-bottom: 64px;
}
.oh-gdl-hero {
    max-width: var(--oh-max-width, 1200px);
    margin: 0 auto;
    padding: 56px 24px 48px;
    text-align: center;
}
/* 2026-05-21: 88px → 52px → 32px. Quiet confirmation, not a confetti moment. */
.oh-gdl-hero__check {
    width: 32px;
    height: 32px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(16,185,129,0.25);
    animation: ohGdlCheckPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes ohGdlCheckPop {
    0%   { transform: scale(0); opacity: 0; }
    60%  { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1); }
}
.oh-gdl-hero__eyebrow {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    color: #10B981;
    margin-bottom: 12px;
}
.oh-gdl-hero__title {
    font-size: 38px;
    font-weight: 700;
    color: var(--oh-navy);
    margin: 0 0 12px;
    line-height: 1.2;
    letter-spacing: -0.015em;
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
}
.oh-gdl-hero__title em {
    display: block;
    font-style: normal;
    font-size: 14px;
    font-weight: 600;
    color: var(--oh-gray-mid);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 6px;
}
@media (max-width: 720px) { .oh-gdl-hero__title { font-size: 28px; } }
.oh-gdl-hero__sub {
    font-size: 17px;
    color: var(--oh-gray-mid);
    margin: 0 auto 36px;
    line-height: 1.55;
    max-width: 640px;
}
.oh-gdl-hero__grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 48px;
    align-items: start;
    max-width: 880px;
    margin: 0 auto;
    text-align: left;
}
@media (max-width: 720px) {
    .oh-gdl-hero__grid { grid-template-columns: 1fr; gap: 28px; }
    .oh-gdl-hero__cover { max-width: 240px; margin: 0 auto; }
}
.oh-gdl-hero__cover {
    aspect-ratio: 3 / 4;
    background: linear-gradient(135deg, #E0F2FE 0%, #C7E5F8 100%);
    border-radius: 14px;
    overflow: hidden;
    box-shadow:
        0 24px 60px -12px rgba(0,0,0,0.20),
        0 12px 28px -8px rgba(43,151,223,0.18);
    display: flex;
    align-items: center;
    justify-content: center;
}
.oh-gdl-hero__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.oh-gdl-hero__cover-fallback { color: var(--oh-blue); opacity: 0.4; }
.oh-gdl-hero__cta-col { min-width: 0; }
/* Centered download button — orange/white inverse pattern (matches eBook CTA) */
.oh-gdl-dl-wrap {
    display: flex;
    justify-content: center;
    margin-top: 8px;
}
.oh-gdl-dl-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    background: var(--oh-accent);
    color: #fff !important;
    border: 2px solid var(--oh-accent);
    border-radius: 50px;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(232,119,34,0.30);
    transition: all 0.2s ease;
}
.oh-gdl-dl-btn:hover {
    background: #fff;
    color: var(--oh-accent) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(232,119,34,0.35);
}
.oh-gdl-dl-note {
    font-size: 13px;
    color: var(--oh-gray-mid);
    margin: 16px 0 0;
    line-height: 1.55;
    text-align: center;
}
/* 2026-05-21: "What's inside" now sits ABOVE the download button. Removed
   the top border + padding-top (was a divider when the button was above). */
.oh-gdl-inside {
    margin-top: 0;
    margin-bottom: 24px;
    padding-top: 0;
    padding-bottom: 24px;
    border-top: 0;
    border-bottom: 1px solid #E5E7EB;
}
.oh-gdl-inside__title {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--oh-blue);
    margin: 0 0 14px;
}
.oh-gdl-inside__list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.oh-gdl-inside__list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: var(--oh-gray-dark);
    line-height: 1.55;
    margin-bottom: 10px;
}
.oh-gdl-inside__list li svg {
    flex-shrink: 0;
    color: var(--oh-blue);
    margin-top: 3px;
}

/* Subtitle under "While you're here" header */
.oh-gdl-related__sub {
    font-size: 15px;
    color: var(--oh-gray-mid);
    margin: 8px 0 0;
    line-height: 1.55;
}

/* Demo CTA — SB Blue gradient panel matching the gate + carousel feature design */
.oh-gdl-demo {
    position: relative;
    max-width: calc(var(--oh-max-width, 1200px) - 48px);
    margin: 56px auto 48px;
    padding: 56px 48px;
    background: linear-gradient(135deg, var(--oh-blue) 0%, #1B7ABD 100%);
    border-radius: 18px;
    box-shadow:
        0 20px 50px -12px rgba(43,151,223,0.30),
        0 8px 16px -4px rgba(0,0,0,0.08);
    overflow: hidden;
    text-align: center;
}
.oh-gdl-demo::before {
    content: '';
    position: absolute;
    top: -120px; right: -120px;
    width: 340px; height: 340px;
    background: radial-gradient(circle, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 70%);
    pointer-events: none;
}
.oh-gdl-demo::after {
    content: '';
    position: absolute;
    bottom: -100px; left: -100px;
    width: 280px; height: 280px;
    background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 70%);
    pointer-events: none;
}
.oh-gdl-demo__inner {
    position: relative;
    z-index: 1;
    max-width: 700px;
    margin: 0 auto;
}
.oh-gdl-demo__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: #fff;
    background: rgba(255,255,255,0.18);
    padding: 7px 16px;
    border-radius: 50px;
    margin-bottom: 16px;
    backdrop-filter: blur(8px);
}
.oh-gdl-demo__eyebrow::before {
    content: '●';
    color: #FFCB47;
    font-size: 9px;
    line-height: 1;
}
.oh-gdl-demo__title {
    font-size: 30px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 14px;
    line-height: 1.2;
    letter-spacing: -0.015em;
}
.oh-gdl-demo__sub {
    font-size: 17px;
    line-height: 1.55;
    color: rgba(255,255,255,0.92);
    margin: 0 0 28px;
}
.oh-gdl-demo__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    background: #fff;
    color: var(--oh-blue) !important;
    border: 2px solid #fff;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
    transition: all 0.2s ease;
}
.oh-gdl-demo__cta:hover {
    background: transparent;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(0,0,0,0.25);
}
.oh-gdl-demo__cta svg {
    transition: transform 0.2s ease;
}
.oh-gdl-demo__cta:hover svg { transform: translateX(3px); }
@media (max-width: 720px) {
    .oh-gdl-demo { padding: 40px 24px; margin: 36px auto; }
    .oh-gdl-demo__title { font-size: 24px; letter-spacing: 0; }
    .oh-gdl-demo__sub { font-size: 15px; }
}

.oh-gdl-related { margin: 32px auto 24px; }
.oh-sidebar-card__event-badge,
.oh-sidebar-card__awards-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--oh-gray-mid);
    margin-bottom: 14px;
}
.oh-sidebar-card__event-meta {
    font-size: 15px;
    color: var(--oh-gray-mid);
    line-height: 1.5;
    margin: 0 0 16px;
}

/* Awards card */
.oh-sidebar-card--awards {
    border-top: 3px solid #D4AF37;
    text-align: center;
}
.oh-sidebar-card__awards-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
    padding: 16px 8px;
    background: #FAFAFA;
    border-radius: 8px;
}
.oh-sidebar-card__awards-logos img {
    width: auto;
    height: 120px;
    object-fit: contain;
    flex-shrink: 0;
}
.oh-sidebar-card__awards-img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 12px;
}
.oh-sidebar-card__awards-list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}
.oh-sidebar-card__awards-list li {
    font-size: 14px;
    color: var(--oh-gray-dark);
    line-height: 1.5;
    padding: 8px 0;
    border-bottom: 1px solid #F3F4F6;
    position: relative;
    padding-left: 22px;
}
.oh-sidebar-card__awards-list li::before {
    content: '🏆';
    position: absolute;
    left: 0;
    font-size: 13px;
}
.oh-sidebar-card__awards-list li:last-child {
    border-bottom: none;
}

/* Browse link — All articles CTA */
.oh-sidebar-card__browse {
    text-align: center;
}
.oh-sidebar-card__browse .oh-btn--secondary {
    background: linear-gradient(135deg, var(--oh-navy) 0%, #243B5F 100%);
    color: var(--oh-white);
    border: none;
    font-size: 15px;
    font-weight: 600;
    padding: 14px 20px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(27, 42, 74, 0.2);
}
.oh-sidebar-card__browse .oh-btn--secondary:hover {
    background: linear-gradient(135deg, #243B5F 0%, var(--oh-navy) 100%);
    box-shadow: 0 4px 16px rgba(27, 42, 74, 0.3);
    transform: translateY(-1px);
}
.oh-sidebar-card__browse .oh-btn--secondary svg {
    opacity: 0.8;
}

/* Outline button */
.oh-btn--outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border: 2px solid var(--oh-blue);
    color: var(--oh-blue);
    background: transparent;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: var(--oh-transition);
    cursor: pointer;
}
.oh-btn--outline:hover {
    background: var(--oh-blue);
    color: var(--oh-white);
}
.oh-btn--full {
    width: 100%;
    text-align: center;
}

/* ── Demo Form Section ── */
.oh-demo-form-section {
    max-width: var(--oh-max-width);
    margin: 64px auto 0;
    padding: 0 24px;
    scroll-margin-top: 32px;
}
.oh-demo-form-section__inner {
    max-width: none;
    margin: 0 auto;
    background: linear-gradient(135deg, var(--oh-blue) 0%, #1E7BBF 100%);
    border-radius: 16px;
    padding: 48px;
    border: none;
    position: relative;
    overflow: hidden;
}
/* Decorative circle accents */
.oh-demo-form-section__inner::before {
    content: '';
    position: absolute;
    top: -80px;
    right: -40px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    pointer-events: none;
}
.oh-demo-form-section__inner::after {
    content: '';
    position: absolute;
    bottom: -60px;
    left: -30px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    pointer-events: none;
}
.oh-demo-form-section__title {
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: var(--oh-white);
    margin: 0 0 8px;
    text-align: center;
    position: relative;
    z-index: 1;
}
.oh-demo-form-section__intro {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    margin: 0 auto 24px;
    text-align: center;
    max-width: 600px;
    position: relative;
    z-index: 1;
}
.oh-demo-form-section__embed {
    max-width: 700px;
    margin: 0 auto;
    background: var(--oh-white);
    border: none;
    border-radius: 12px;
    padding: 24px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    position: relative;
    z-index: 1;
}

/* ── Responsive: Single V2 ── */
@media (max-width: 1024px) {
    .oh-article-body--v2 {
        grid-template-columns: 1fr 300px;
        gap: 0 32px;
    }
    .oh-article-left-sidebar {
        display: none;
    }
    .oh-article-share--mobile {
        display: flex;
    }
    .oh-single-v2 .oh-article-hero__title {
        font-size: 32px; /* px — legacy 10px root */
    }
}
@media (max-width: 900px) {
    .oh-article-body--v2 {
        grid-template-columns: 1fr;
        gap: 32px 0;
    }
    .oh-article-sidebar--v2 {
        order: 1;
    }
    .oh-article-sidebar--v2 .oh-right-sidebar__inner {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 16px;
    }
    .oh-sidebar-card {
        flex: 1 1 280px;
    }
}
@media (max-width: 640px) {
    .oh-single-v2 .oh-article-hero__title {
        font-size: 26px; /* px — legacy 10px root */
    }
    .oh-single-v2 .oh-article-hero__excerpt {
        font-size: 16px;
    }
    .oh-single-v2 .oh-article-content {
        font-size: 16px;
    }
    .oh-sidebar-card {
        flex: 1 1 100%;
    }
    .oh-demo-form-section {
        margin-top: 40px;
    }
    .oh-demo-form-section__inner {
        padding: 24px 16px;
    }
    .oh-demo-form-section__title {
        font-size: 22px;
    }
    .oh-single-v2 .oh-article-hero {
        padding: 24px 0 20px;
    }
}

/* ── Focus-visible states for V2 interactive elements ── */
.oh-share-icon:focus-visible,
.oh-share-btn:focus-visible {
    outline: 2px solid var(--oh-blue);
    outline-offset: 2px;
}
.oh-btn:focus-visible,
.oh-btn--outline:focus-visible {
    outline: 2px solid var(--oh-blue);
    outline-offset: 2px;
}
.oh-sidebar-card__browse .oh-article-browse-link:focus-visible {
    outline: 2px solid var(--oh-blue);
    outline-offset: 2px;
    border-radius: 4px;
}
.oh-single-v2 .oh-article-content a:focus-visible {
    outline: 2px solid var(--oh-blue);
    outline-offset: 1px;
    border-radius: 2px;
}
.oh-article-hero__topic:focus-visible {
    outline: 2px solid var(--oh-blue);
    outline-offset: 2px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   V3 ARCHIVE — Container & Layout
   ═══════════════════════════════════════════════════════════════════════════ */

.oh-archive--v3 .oh-topic-filters {
    max-width: var(--oh-max-width);
    margin: 0 auto 20px;
    padding: 0 24px;
}
.oh-archive--v3 .oh-result-count-wrap {
    max-width: var(--oh-max-width);
    margin: 0 auto 20px;
    padding: 0 24px;
}
.oh-archive--v3 .oh-archive-grid {
    max-width: var(--oh-max-width);
    margin: 0 auto;
    padding: 0 24px;
    gap: 28px;
}
.oh-archive--v3 .oh-back-link {
    max-width: var(--oh-max-width);
    margin: 0 auto;
    padding: 40px 24px;
    text-align: center;
}
.oh-archive--v3 .oh-back-link a {
    display: inline-flex;
    align-items: center;
    font-size: 16px;
    font-weight: 600;
    color: var(--oh-white);
    background: var(--oh-blue-dark);
    padding: 12px 28px;
    border-radius: 6px;
    text-decoration: none;
    border: none;
    transition: background 0.2s ease, transform 0.2s ease;
}
.oh-archive--v3 .oh-back-link a:hover {
    background: #156A9E;
    transform: translateY(-1px);
    color: var(--oh-white);
}
.oh-archive--v3 .oh-back-link a svg {
    stroke: currentColor;
}
@media (max-width: 1024px) {
    .oh-archive--v3 .oh-archive-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 768px) {
    .oh-archive--v3 .oh-archive-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   V3 ARCHIVE CARDS — Neil Patel-inspired with hover line animation
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Archive Card ── */
.oh-archive-card {
    display: flex;
    flex-direction: column;
    background: var(--oh-white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    text-decoration: none;
    color: var(--oh-gray-dark);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    position: relative;
    border: 1px solid #E5E7EB;
}
.oh-archive-card:hover,
.oh-archive-card:focus-within {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    transform: translateY(-4px);
}
.oh-archive-card:focus-visible {
    outline: 2px solid var(--oh-blue);
    outline-offset: 2px;
}

/* Featured image area */
.oh-archive-card__image {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
    background: var(--oh-gray-light);
}
.oh-archive-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.oh-archive-card:hover .oh-archive-card__image img {
    transform: scale(1.06);
}

/* Placeholder when no image */
.oh-archive-card__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--oh-gray-mid);
    opacity: 0.4;
}

/* Category badge overlay */
.oh-archive-card__category {
    position: absolute;
    top: 14px;
    left: 14px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 4px 12px;
    border-radius: 50px;
    background: var(--oh-blue);
    color: var(--oh-white);
    line-height: 1.4;
}
.oh-archive-card__category--case-study {
    background: var(--oh-navy);
}
.oh-archive-card__category--webinar {
    background: var(--oh-blue-dark);
}

/* Card body */
.oh-archive-card__body {
    padding: 20px 22px 22px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/* Meta row: clock + reading time */
.oh-archive-card__meta {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--oh-gray-mid);
    margin-bottom: 8px;
}
.oh-archive-card__clock {
    flex-shrink: 0;
}
.oh-archive-card__client {
    color: var(--oh-gray-mid);
}

/* Title */
.oh-archive-card__title {
    font-size: 17px;
    font-weight: 700;
    color: var(--oh-navy);
    line-height: 1.35;
    margin: 0 0 8px;
}

/* Excerpt */
.oh-archive-card__excerpt {
    font-size: 14px;
    color: var(--oh-gray-mid);
    line-height: 1.55;
    margin: 0 0 auto;
    flex-grow: 1;
}

/* Tags (within new card) */
.oh-archive-card .oh-card-tags {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #F3F4F6;
}

/* Hover line animation — blue gradient bar across bottom */
.oh-archive-card__hover-line {
    height: 3px;
    background: linear-gradient(90deg, var(--oh-blue) 0%, var(--oh-blue-dark) 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    flex-shrink: 0;
}
.oh-archive-card:hover .oh-archive-card__hover-line {
    transform: scaleX(1);
}

/* Empty state */
.oh-archive-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--oh-gray-mid);
    padding: 40px 0;
    font-size: 16px;
}


/* ── JS Filter Animation States ── */
.oh-card--visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.oh-card--hidden {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
}

/* Override card hover transform when using filter animation */
.oh-archive-card.oh-card--visible:hover,
.oh-featured-card.oh-card--visible:hover {
    transform: translateY(-4px);
}


/* ── Mobile: horizontal-scroll pills, smaller cards ── */
@media (max-width: 600px) {
    .oh-topic-filters[data-oh-filters] {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
        scrollbar-width: none;       /* Firefox */
    }
    .oh-topic-filters[data-oh-filters]::-webkit-scrollbar {
        display: none;               /* Chrome/Safari */
    }
    .oh-topic-filters[data-oh-filters] .oh-topic-pill {
        white-space: nowrap;
        flex-shrink: 0;
    }
}
@media (max-width: 768px) {
    .oh-archive-card__image {
        height: 170px;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   PROGRESS BAR — Override orange to blue (brand alignment)
   ═══════════════════════════════════════════════════════════════════════════ */

.oh-scroll-progress {
    background: linear-gradient(90deg, var(--oh-blue), var(--oh-blue-dark));
    box-shadow: 0 1px 4px rgba(43, 151, 223, 0.35);
}


/* ═══════════════════════════════════════════════════════════════════════════
   TABLE OF CONTENTS — Right sidebar, auto-generated from H2/H3
   ═══════════════════════════════════════════════════════════════════════════ */

.oh-toc {
    margin-bottom: 4px;
    flex-shrink: 0;
}
.oh-toc__heading {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--oh-navy);
    margin: 0 0 12px;
}
.oh-toc__list {
    list-style: none;
    padding: 0;
    margin: 0;
    border-left: 2px solid #E5E7EB;
}
.oh-toc__item {
    margin: 0;
}
.oh-toc__link {
    display: block;
    padding: 7px 0 7px 14px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--oh-gray-mid);
    text-decoration: none;
    border-left: 2px solid transparent;
    margin-left: -2px;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.oh-toc__link:hover {
    color: var(--oh-navy);
}
.oh-toc__link.is-active {
    color: var(--oh-blue);
    border-left-color: var(--oh-blue);
    font-weight: 600;
}
.oh-toc__item--sub .oh-toc__link {
    padding-left: 26px;
    font-size: 13px;
}

/* Hide TOC on mobile — stacks poorly */
@media (max-width: 1024px) {
    .oh-toc {
        display: none;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   SIDEBAR eBOOK CTA — Navy card with orange badge
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Sidebar eBook CTA: Orange gradient + cover ── */
.oh-sidebar-card--ebook {
    background: linear-gradient(135deg, #E87722 0%, #D4691E 100%);
    border: none;
    color: var(--oh-white);
    position: relative;
    overflow: hidden;
    text-align: center;
}
.oh-sidebar-card--ebook::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -20%;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.07);
    pointer-events: none;
}
.oh-sidebar-card--ebook .oh-sidebar-ebook-cover {
    width: 90px;
    height: auto;
    border-radius: 3px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
    margin: 0 auto 14px;
    display: block;
    position: relative;
    z-index: 1;
}
.oh-sidebar-card--ebook .oh-sidebar-card__badge {
    background: var(--oh-white);
    color: var(--oh-accent);
}
.oh-sidebar-card--ebook .oh-sidebar-card__heading {
    color: var(--oh-white);
    font-size: 15px;
    position: relative;
    z-index: 1;
}
.oh-sidebar-card--ebook .oh-sidebar-card__text {
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
    position: relative;
    z-index: 1;
}
.oh-sidebar-card--ebook .oh-btn--white {
    background: var(--oh-white);
    color: #1E3888;
    font-weight: 700;
    position: relative;
    z-index: 1;
}
.oh-sidebar-card--ebook .oh-btn--white:hover {
    background: #F5F7FA;
}
.oh-sidebar-card__badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 3px 10px;
    border-radius: 50px;
    background: var(--oh-accent);
    color: var(--oh-white);
    margin-bottom: 10px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   FAQ CARDS — Neil Patel style (visible, not accordion)
   ═══════════════════════════════════════════════════════════════════════════ */

.oh-inline-faq-section--cards .oh-faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.oh-faq-card {
    background: var(--oh-white);
    border: 1px solid #E5E7EB;
    border-left: 4px solid var(--oh-blue);
    border-radius: var(--oh-radius);
    padding: 24px 24px 20px;
}
.oh-faq-card__question {
    font-size: 17px;
    font-weight: 700;
    color: var(--oh-navy);
    margin: 0 0 10px;
    line-height: 1.4;
}
.oh-faq-card__answer {
    font-size: 15px;
    line-height: 1.7;
    color: var(--oh-gray-dark);
}
.oh-faq-card__answer p {
    margin: 0 0 10px;
}
.oh-faq-card__answer p:last-child {
    margin-bottom: 0;
}
.oh-faq-card__answer a {
    color: var(--oh-blue-dark);
}

/* Resource links within FAQ cards */
.oh-faq-card .oh-faq-resources {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #F3F4F6;
}


/* ═══════════════════════════════════════════════════════════════════════════
   INLINE CTAs — Injected mid-content (Demo + Event banner)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Inline Demo CTA — Concept B ── */
.oh-inline-demo-cta--b {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    margin: 40px 0;
    padding: 0;
    background: #006396;
    text-align: center;
}
.oh-inline-demo-cta--b::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -40px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    pointer-events: none;
}
.oh-inline-demo-cta--b::after {
    content: '';
    position: absolute;
    bottom: -40px;
    left: -30px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    pointer-events: none;
}
.oh-inline-demo-cta__inner {
    position: relative;
    z-index: 1;
    padding: 48px 36px;
}
.oh-inline-demo-cta--b .oh-inline-demo-cta__stat,
.oh-article-body--v2 .oh-inline-demo-cta__stat {
    font-family: 'Raleway', -apple-system, sans-serif !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    line-height: 1.25 !important;
    margin: 0 0 12px !important;
    letter-spacing: -0.02em;
}
.oh-inline-demo-cta--b .oh-inline-demo-cta__stat em,
.oh-article-body--v2 .oh-inline-demo-cta__stat em {
    color: #7DD3FC !important;
    font-style: normal;
}
.oh-inline-demo-cta--b .oh-inline-demo-cta__sub,
.oh-article-body--v2 .oh-inline-demo-cta__sub {
    font-size: 15px !important;
    color: rgba(255, 255, 255, 0.8) !important;
    margin: 0 0 28px !important;
    line-height: 1.6 !important;
    max-width: 480px;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Buttons — HPT-inspired modern style */
.oh-inline-demo-cta__btns {
    display: flex;
    gap: 14px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.oh-inline-demo-cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 32px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    letter-spacing: 0.01em;
}
.oh-inline-demo-cta__btn--primary {
    background: #FFFFFF;
    color: var(--oh-accent, #006396);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.oh-inline-demo-cta__btn--primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.oh-inline-demo-cta__btn--outline,
.oh-article-body--v2 .oh-inline-demo-cta__btn--outline {
    background: transparent !important;
    color: #FFFFFF !important;
    border: 2px solid #FFFFFF !important;
}
.oh-inline-demo-cta__btn--outline:hover,
.oh-article-body--v2 .oh-inline-demo-cta__btn--outline:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #FFFFFF !important;
}

/* Legacy fallback for non-B inline CTAs */
.oh-inline-demo-cta:not(.oh-inline-demo-cta--b) {
    background: linear-gradient(135deg, #006396 0%, #004F7A 100%);
    border-radius: 16px;
    padding: 36px 32px;
    margin: 40px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* ── Inline Horizontal Event Banner ── */
.oh-inline-event-banner {
    display: block;
    margin: 40px 0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid #E5E7EB;
    text-decoration: none;
    transition: box-shadow 0.3s ease, transform 0.2s ease;
}
.oh-inline-event-banner:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}
.oh-inline-event-banner img {
    width: 100%;
    height: auto;
    display: block;
}
/* 2026-05-20: Inline event banner now wraps image + "Come see us" button */
.oh-inline-event-banner__media {
    display: block;
    overflow: hidden;
}
.oh-inline-event-banner__cta {
    background: var(--oh-white);
    padding: 18px 24px;
    display: flex;
    justify-content: center;
    border-top: 1px solid #E5E7EB;
}
.oh-inline-event-banner__btn {
    display: inline-block;
    padding: 14px 36px;
    border-radius: 50px;
    /* 2026-05-20: SB blue per Jason */
    background: var(--oh-blue);
    color: var(--oh-white) !important;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.2px;
    text-decoration: none;
    border: 2px solid var(--oh-blue);
    box-shadow: 0 2px 8px rgba(43,151,223,0.25);
    transition: all 0.2s ease;
}
.oh-inline-event-banner__btn:hover {
    background: var(--oh-white);
    color: var(--oh-blue) !important;
    border-color: var(--oh-blue);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(43,151,223,0.30);
}

/* ── Responsive for inline CTAs ── */
@media (max-width: 640px) {
    .oh-inline-demo-cta__inner {
        padding: 36px 24px;
    }
    .oh-inline-demo-cta--b .oh-inline-demo-cta__stat,
    .oh-article-body--v2 .oh-inline-demo-cta__stat {
        font-size: 22px !important;
    }
    .oh-inline-demo-cta__btns {
        flex-direction: column;
    }
    .oh-inline-demo-cta__btn {
        width: 100%;
        box-sizing: border-box;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   VIDEO ARCHIVE — Thumbnail + Play Overlay + Duration Badge
   ═══════════════════════════════════════════════════════════════════════════ */

/* Video grid — 2 cards per row, no hero card override */
.oh-archive--videos .oh-archive-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    margin-bottom: 48px;
}
.oh-archive--videos .oh-archive-grid .oh-featured-card:nth-child(7n+1) {
    grid-column: span 1;
}
.oh-archive--videos .oh-featured-card {
    display: flex;
    flex-direction: row;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #E5E7EB;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    background: var(--oh-white, #fff);
}
.oh-archive--videos .oh-featured-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    transform: translateY(-4px);
}
.oh-archive--videos .oh-video-thumb-wrap {
    flex: 0 0 45%;
    aspect-ratio: auto;
    min-height: 200px;
}
@media (max-width: 1024px) {
    .oh-archive--videos .oh-archive-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 768px) {
    .oh-archive--videos .oh-archive-grid {
        grid-template-columns: 1fr;
    }
    .oh-archive--videos .oh-featured-card {
        flex-direction: column;
    }
    .oh-archive--videos .oh-video-thumb-wrap {
        flex: none;
        aspect-ratio: 16 / 9;
    }
}

/* Video thumbnail container */
.oh-archive--videos .oh-video-thumb-wrap {
    position: relative;
    overflow: hidden;
    background: #1a1a2e;
}
.oh-archive--videos .oh-video-thumb-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}
.oh-archive--videos .oh-featured-card:hover .oh-video-thumb-wrap img {
    transform: scale(1.05);
}

/* Play button overlay — centered circle */
.oh-video-play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    background: rgba(0, 0, 0, 0.55);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s ease, background 0.25s ease;
    pointer-events: none;
    z-index: 2;
}
.oh-video-play-overlay svg {
    margin-left: 3px; /* optical centering for play triangle */
}
.oh-archive--videos .oh-featured-card:hover .oh-video-play-overlay {
    transform: translate(-50%, -50%) scale(1.12);
    background: rgba(43, 151, 223, 0.85); /* SB blue on hover */
}

/* Duration badge — bottom-right */
.oh-video-duration {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.02em;
    z-index: 2;
    line-height: 1.4;
}

/* Card body adjustments for video cards */
.oh-archive--videos .oh-featured-card-body {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
}
.oh-archive--videos .oh-featured-card-type {
    color: var(--oh-blue);
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .oh-video-play-overlay {
        width: 52px;
        height: 52px;
    }
    .oh-video-play-overlay svg {
        width: 22px;
        height: 22px;
    }
}

/* Improved placeholder for missing video thumbnails */
.oh-archive--videos .oh-card-image-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: linear-gradient(135deg, #1a1a2e 0%, #2B97DF 100%);
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    gap: 8px;
}
.oh-archive--videos .oh-card-image-placeholder::before {
    content: '';
    display: block;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='white'%3E%3Cpolygon points='5 3 19 12 5 21 5 3'/%3E%3C/svg%3E") no-repeat center / 20px;
}


/* ═══════════════════════════════════════════════
   SINGLE VIDEO — Full-Width Layout (no sidebars)
   ═══════════════════════════════════════════════ */

/* Video embed — full-width hero position */
.oh-single-v2 .oh-video-embed--hero {
    max-width: var(--oh-max-width, 1200px);
    margin: 0 auto 32px;
    padding: 0 24px;
}
.oh-single-v2 .oh-video-embed--hero .oh-video-embed-inner {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: var(--oh-radius, 8px);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
}
.oh-single-v2 .oh-video-embed--hero iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Video body — single column, centered, readable width */
.oh-article-body--video {
    display: block;
    max-width: 780px;
    margin: 0 auto;
    padding: 0 24px;
}

@media (max-width: 640px) {
    .oh-single-v2 .oh-video-embed--hero {
        padding: 0 16px;
        margin-bottom: 24px;
    }
}


/* ═══════════════════════════════════════════════
   VIDEO CAROUSEL
   ═══════════════════════════════════════════════ */

.oh-video-carousel {
    max-width: var(--oh-max-width, 1200px);
    margin: 0 auto 32px;
    padding: 0 24px;
    position: relative;
}
.oh-video-carousel__track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 24px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.oh-video-carousel__track::-webkit-scrollbar { display: none; }

.oh-video-carousel__slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 0;
    align-items: stretch;
    background: var(--oh-gray-light, #f8f9fa);
    border-radius: 16px;
    overflow: hidden;
    min-height: 400px;
}
.oh-video-carousel__thumb {
    position: relative;
    overflow: hidden;
    background: #1a1a2e;
}
.oh-video-carousel__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.oh-video-carousel__info {
    padding: 40px 40px 40px 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.oh-video-carousel__info .oh-featured-card-type {
    color: var(--oh-blue);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.oh-video-carousel__info h3 {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--oh-navy, #1a1a2e);
    margin: 0 0 12px;
    line-height: 1.3;
}
.oh-video-carousel__info h3 a {
    color: inherit;
    text-decoration: none;
}
.oh-video-carousel__info h3 a:hover {
    color: var(--oh-blue);
}
.oh-video-carousel__info p {
    font-size: 15px;
    color: var(--oh-gray-mid, #6B7280);
    line-height: 1.6;
    margin: 0 0 16px;
}
.oh-video-carousel__info .oh-card-tags {
    margin-top: auto;
}

/* Navigation */
.oh-video-carousel__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
}
.oh-video-carousel__arrow {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #e0e0e0;
    background: var(--oh-white, #fff);
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    color: var(--oh-navy, #1a1a2e);
    line-height: 1;
}
.oh-video-carousel__arrow:hover {
    background: var(--oh-blue);
    color: var(--oh-white, #fff);
    border-color: var(--oh-blue);
}
.oh-video-carousel__dots {
    display: flex;
    gap: 8px;
}
.oh-video-carousel__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #d0d0d0;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
    padding: 0;
}
.oh-video-carousel__dot.active {
    background: var(--oh-blue);
}

/* Carousel mobile */
@media (max-width: 768px) {
    .oh-video-carousel__slide {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    .oh-video-carousel__thumb {
        aspect-ratio: 16 / 9;
    }
    .oh-video-carousel__info {
        padding: 20px;
    }
    .oh-video-carousel__info h3 {
        font-size: 1.15rem;
    }
}


/* ═══════════════════════════════════════════════
   FEATURED PLAYLIST
   ═══════════════════════════════════════════════ */

.oh-featured-playlist {
    max-width: var(--oh-max-width, 1200px);
    margin: 40px auto 48px;
    padding: 0 24px;
}
.oh-featured-playlist__inner {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 40px;
    align-items: center;
    background: linear-gradient(135deg, var(--oh-accent, #F26522) 0%, #D4691E 100%);
    border-radius: 16px;
    padding: 40px;
    overflow: hidden;
}
.oh-featured-playlist__iframe-wrap {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.oh-featured-playlist__iframe-wrap iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border: 0;
}
.oh-featured-playlist__badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.95);
    color: var(--oh-accent, #F26522);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 50px;
    margin-bottom: 12px;
}
.oh-featured-playlist__info h2 {
    color: var(--oh-white, #fff);
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.3;
    margin: 0 0 12px;
}
.oh-featured-playlist__info p {
    color: rgba(255, 255, 255, 0.75);
    font-size: 15px;
    line-height: 1.6;
    margin: 0 0 24px;
}
.oh-featured-playlist__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.oh-featured-playlist__actions .oh-cta-button {
    background: var(--oh-white, #fff);
    color: var(--oh-accent, #F26522);
}
.oh-featured-playlist__actions .oh-cta-button:hover {
    background: rgba(255, 255, 255, 0.9);
}
.oh-featured-playlist__actions .oh-cta-button-outline {
    border-color: rgba(255, 255, 255, 0.6);
    color: var(--oh-white, #fff);
}
.oh-featured-playlist__actions .oh-cta-button-outline:hover {
    border-color: var(--oh-white, #fff);
    background: rgba(255, 255, 255, 0.15);
}

/* Playlist mobile */
@media (max-width: 768px) {
    .oh-featured-playlist__inner {
        grid-template-columns: 1fr;
        padding: 24px;
        gap: 24px;
    }
    .oh-featured-playlist__info h2 {
        font-size: 1.25rem;
    }
}

/* ── 2026-05-20: Webinar CTA overrides ────────────────────────────────────
   (1) "Ready to see it in action?" sidebar demo card → orange button, white
       text. Hover inverts to white bg + orange text + lift.
   (2) "Complete Guide" ebook sidebar card → white button, orange text.
   (3) "See It In Action" inline CTA box → SB-blue background, white type,
       buttons mirror the site header (orange shimmering solid + ghost-white
       outline).
   Selectors are intentionally specific + use !important against the heavy
   pre-existing rules in this stylesheet (some of which already use !important).
   ───────────────────────────────────────────────────────────────────────── */

/* (1) Sidebar demo CTA — "Ready to see it in action?" */
.oh-sidebar-card--demo a.oh-btn.oh-btn--primary,
.oh-sidebar-card--demo .oh-btn--primary {
    background: var(--oh-accent) !important;
    color: var(--oh-white) !important;
    border: 2px solid var(--oh-accent) !important;
    box-shadow: 0 2px 8px rgba(232, 119, 34, 0.30) !important;
    transition: all 0.25s ease !important;
}
.oh-sidebar-card--demo a.oh-btn.oh-btn--primary:hover,
.oh-sidebar-card--demo .oh-btn--primary:hover {
    background: var(--oh-white) !important;
    color: var(--oh-accent) !important;
    border-color: var(--oh-white) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18) !important;
}

/* (2) Sidebar ebook CTA — "Complete Guide" */
.oh-sidebar-card--ebook a.oh-btn.oh-btn--white,
.oh-sidebar-card--ebook .oh-btn--white {
    background: var(--oh-white) !important;
    color: #1E3888 !important;
    font-weight: 700 !important;
}
.oh-sidebar-card--ebook a.oh-btn.oh-btn--white:hover,
.oh-sidebar-card--ebook .oh-btn--white:hover {
    background: #F5F7FA !important;
    color: #1E3888 !important;
}

/* (3) Inline CTA box — "See It In Action" */
.oh-inline-demo-cta--b {
    background: var(--oh-blue) !important;       /* SHOEBOX blue */
}
.oh-inline-demo-cta--b .oh-inline-demo-cta__sub,
.oh-article-body--v2 .oh-inline-demo-cta__sub {
    color: #FFFFFF !important;                   /* was 80% white — bump to 100% */
}
.oh-inline-demo-cta--b .oh-inline-demo-cta__stat em,
.oh-article-body--v2 .oh-inline-demo-cta__stat em {
    color: #FFFFFF !important;                   /* keep "In Action" white on SB blue */
}

/* Inline CTA buttons — on the SB Blue card, two inverse white treatments:
   • Get a Quote (--outline)  : transparent + white border + white text
                                → hover: solid white + blue text
   • Book a Demo  (--primary) : solid white + blue text
                                → hover: transparent + white border + white text
   They visually swap on hover, which gives the two CTAs equal weight while
   keeping the box background uncluttered. */
.oh-inline-demo-cta--b .hpt-hs-btn--outline {
    background: transparent !important;
    background-color: transparent !important;
    border-color: #FFFFFF !important;
    color: #FFFFFF !important;
    box-shadow: none !important;
}
.oh-inline-demo-cta--b .hpt-hs-btn--outline:hover {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    border-color: #FFFFFF !important;
    color: var(--oh-blue) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.18) !important;
}
.oh-inline-demo-cta--b .hpt-hs-btn--primary {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    border: 2px solid #FFFFFF !important;
    color: var(--oh-blue) !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.18), 0 1px 3px rgba(0,0,0,0.08) !important;
}
.oh-inline-demo-cta--b .hpt-hs-btn--primary:hover {
    background: transparent !important;
    background-color: transparent !important;
    border-color: #FFFFFF !important;
    color: #FFFFFF !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.25) !important;
}

/* ── Shared back-to-hub button (2026-05-22) ─────────────────────────────────
   Orange pill with white outline + white text. High-specificity overrides for
   the legacy .oh-archive--v3 .oh-back-link a {} rule. Use markup:
     <div class="oh-back-link oh-back-link--orange">
       <a class="oh-back-link__btn" href="…">…</a>
     </div>
   ─────────────────────────────────────────────────────────────────────────── */
.oh-back-link.oh-back-link--orange {
    max-width: calc(var(--oh-max-width, 1200px) - 48px);
    margin: 0 auto 64px;
    padding: 0 24px;
    text-align: center;
}
.oh-archive--v3 .oh-back-link a.oh-back-link__btn,
.oh-archive--v2 .oh-back-link a.oh-back-link__btn,
.oh-back-link a.oh-back-link__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 36px;
    background: var(--oh-accent, #E87722);
    color: #ffffff;
    font-family: var(--hpt-font-h, inherit);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.01em;
    border: 2px solid rgba(255, 255, 255, 0.6);
    border-radius: 50px;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
    transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.oh-archive--v3 .oh-back-link a.oh-back-link__btn:hover,
.oh-archive--v3 .oh-back-link a.oh-back-link__btn:focus,
.oh-archive--v2 .oh-back-link a.oh-back-link__btn:hover,
.oh-archive--v2 .oh-back-link a.oh-back-link__btn:focus,
.oh-back-link a.oh-back-link__btn:hover,
.oh-back-link a.oh-back-link__btn:focus {
    background: #D26617;
    color: #ffffff;
    border-color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.oh-back-link a.oh-back-link__btn svg { transition: transform 0.25s ease; }
.oh-back-link a.oh-back-link__btn:hover svg { transform: translateX(-3px); }

/* ── Free Guides feature panel (2026-05-22) ─────────────────────────────────
   Shared from eBook page (oh-guide-page.css) so the "Want something quicker?"
   section renders consistently on the OH hub and anywhere else it's dropped in.
   ─────────────────────────────────────────────────────────────────────────── */
.ohg-guides-feature {
    position: relative;
    margin: 48px auto;
    padding: 40px 36px 36px;
    background: linear-gradient(135deg, #2B97DF 0%, #1B7ABD 100%);
    border-radius: 18px;
    border: none;
    box-shadow: 0 20px 40px -10px rgba(43,151,223,0.30), 0 8px 16px -4px rgba(0,0,0,0.08);
    overflow: hidden;
}
.ohg-guides-feature::before {
    content: '';
    position: absolute;
    top: -120px; right: -120px;
    width: 340px; height: 340px;
    background: radial-gradient(circle, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 70%);
    pointer-events: none;
}
.ohg-guides-feature::after {
    content: '';
    position: absolute;
    bottom: -100px; left: -100px;
    width: 280px; height: 280px;
    background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 70%);
    pointer-events: none;
}
.ohg-guides-feature__header {
    position: relative;
    z-index: 1;
    text-align: center;
    margin: 0 auto 28px;
    max-width: 700px;
}
.ohg-guides-feature__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: #fff;
    background: rgba(255,255,255,0.18);
    padding: 7px 16px;
    border-radius: 50px;
    margin-bottom: 16px;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.ohg-guides-feature__eyebrow::before {
    content: '●';
    color: #FFCB47;
    font-size: 9px;
    line-height: 1;
}
.ohg-guides-feature__title {
    font-size: 32px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 10px;
    line-height: 1.2;
    letter-spacing: -0.3px;
}
.ohg-guides-feature__sub {
    font-size: 19px;
    line-height: 1.55;
    color: rgba(255,255,255,0.92);
    margin: 0;
    font-style: italic;
}
.ohg-guides-feature .ohg-guides-carousel {
    position: relative;
    z-index: 1;
    margin: 0;
}
.ohg-guides-feature .oh-carousel__slide {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}
/* 2026-06-22 v4: timer ring on the active dot — invert the top carousel's
   SB-Blue-on-white sweep to WHITE-on-SB-Blue. Static track is faint white,
   animated fill is solid white. JS sets the var(--sb-ring-dur) per slide. */
.ohg-guides-feature .oh-carousel__dot .sb-dot-ring-track {
    fill: none !important;
    stroke: rgba(255,255,255,0.30) !important;
    stroke-width: 2 !important;
}
.ohg-guides-feature .oh-carousel__dot .sb-dot-ring-fill {
    fill: none !important;
    stroke: #fff !important;
    stroke-width: 2.5 !important;
    stroke-linecap: round !important;
}
/* Catch-all for any bare <circle> that doesn't have the track/fill class
   yet (JS may not have wrapped this carousel) — keep as transparent stroke. */
.ohg-guides-feature .oh-carousel__dot circle:not([class]) {
    fill: transparent !important;
    stroke: rgba(255,255,255,0.55) !important;
}
/* 2026-06-22 v5: dots on SB-Blue — all dots WHITE (active + inactive).
   IMPORTANT: the JS replaces the dot's innerHTML with <span class="sb-dot-core">
   + an SVG ring, so ::before never renders. Target .sb-dot-core directly. */
.ohg-guides-feature .oh-carousel__dot .sb-dot-core {
    background: #fff !important;
    width: 10px !important;
    height: 10px !important;
}
.ohg-guides-feature .oh-carousel__dot.is-active .sb-dot-core,
.ohg-guides-feature .oh-carousel__dot[aria-current="true"] .sb-dot-core,
.ohg-guides-feature .oh-carousel__dot:hover .sb-dot-core {
    background: #fff !important;
    transform: scale(1.2) !important;
}
/* 2026-06-22: arrow controls on SB-Blue — translucent pill bg + WHITE chevron
   icon (was SB-Blue chevron, hard to see). Hover bumps opacity. */
.ohg-guides-feature .oh-carousel__arrow {
    background: rgba(255,255,255,0.18) !important;
    color: #fff !important;
    border: 1.5px solid rgba(255,255,255,0.6) !important;
}
.ohg-guides-feature .oh-carousel__arrow:hover {
    background: rgba(255,255,255,0.32) !important;
    border-color: #fff !important;
    color: #fff !important;
}
.ohg-guides-feature .oh-carousel__arrow svg {
    stroke: #fff !important;
}

/* 2026-06-22: Play/Pause button — INVERSE of the top-of-page carousel
   (which uses SB-Blue-on-white). Here we're on SB-Blue, so flip everything
   to white-on-blue. Mirrors the top carousel pill structure exactly. */
.ohg-guides-feature .oh-carousel__playpause {
    border: 1px solid rgba(255,255,255,0.6) !important;
    background: rgba(255,255,255,0.12) !important;
}
.ohg-guides-feature .oh-carousel__playpause:hover {
    background: rgba(255,255,255,0.28) !important;
    border-color: #fff !important;
}
.ohg-guides-feature .oh-carousel__playpause-pause span {
    background: #fff !important;
}
.ohg-guides-feature .oh-carousel__playpause-play {
    border-left-color: #fff !important;
}
@media (max-width: 720px) {
    .ohg-guides-feature {
        margin: 32px 16px;
        padding: 28px 20px 24px;
    }
    .ohg-guides-feature__title { font-size: 24px; letter-spacing: 0; }
    .ohg-guides-feature__sub  { font-size: 17px; }
}

/* ── Featured Product CTA (2026-05-22) ──────────────────────────────────────
   Lives between Related Resources and the Demo Form on single posts.
   OH defaults to PureTest; HS rotates SBO + QuickTest. Editor can override
   via ACF "Featured Product CTA (override)" field.
   ─────────────────────────────────────────────────────────────────────────── */
.oh-featured-product {
    max-width: calc(var(--oh-max-width, 1200px) - 48px);
    margin: 48px auto;
    padding: 0 24px;
}
.oh-featured-product__inner {
    position: relative;
    background: linear-gradient(135deg, #2B97DF 0%, #1B7ABD 100%);
    border-radius: 14px;
    padding: 22px 26px 24px;
    overflow: hidden;
    box-shadow: 0 14px 30px -10px rgba(43,151,223,0.28), 0 6px 12px -4px rgba(0,0,0,0.08);
}
.oh-featured-product__inner::before {
    content: '';
    position: absolute;
    top: -120px; right: -120px;
    width: 340px; height: 340px;
    background: radial-gradient(circle, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 70%);
    pointer-events: none;
}
.oh-featured-product__eyebrow {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: #fff;
    background: rgba(255,255,255,0.18);
    padding: 6px 14px;
    border-radius: 50px;
    margin-bottom: 14px;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.oh-featured-product__eyebrow::before { content: '★'; color: #FFCB47; font-size: 10px; line-height: 1; }

/* Single-product layout (no carousel wrap) — use same grid as carousel slides */
.oh-featured-product__slide {
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.14);
    overflow: hidden;
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    grid-template-rows: 220px;     /* explicit row height — Firefox grid + max-height fix */
    align-items: stretch;
}
/* Carousel wrapper inherits the same look */
.oh-featured-product__carousel {
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 0;
    max-width: none;
}
.oh-featured-product__carousel .oh-carousel__slide {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    /* 2026-05-26: match single-card height (OH default uses .__slide directly,
       HS carousel was free-flowing tall). Mirror the 220px grid row + 2-col
       layout so HS feels identical to OH. */
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    grid-template-rows: 220px;
    align-items: stretch;
    overflow: hidden;
}
.oh-featured-product__carousel .oh-carousel__dot circle { stroke: rgba(255,255,255,0.55); }
.oh-featured-product__carousel .oh-carousel__dot.is-active circle,
.oh-featured-product__carousel .oh-carousel__dot:hover circle { stroke: #fff; fill: #fff; }
.oh-featured-product__carousel .oh-carousel__arrow {
    background: rgba(255,255,255,0.95);
    color: #1B7ABD;
}
.oh-featured-product__carousel .oh-carousel__arrow:hover { background: #fff; }

/* Product image panel — white background so cropped PNGs sit cleanly.
   2026-05-22 Firefox fix: image cell gets a fixed height (not min-height) so
   the <img>'s max-height: 180px is computed against a defined container —
   Firefox otherwise stretches the image to its intrinsic size when the base
   .oh-carousel__image img { height: 100% } meets an indefinite parent. */
.oh-featured-product__slide .oh-carousel__image,
.oh-featured-product__carousel .oh-carousel__image {
    background: #F7FAFC;
    padding: 16px;
    min-height: 0;
    height: 220px;        /* explicit — Firefox needs this for child max-height to apply */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.oh-featured-product__slide .oh-carousel__image img,
.oh-featured-product__carousel .oh-carousel__image img {
    object-fit: contain;
    max-height: 180px;
    max-width: 100%;
    width: auto;
    height: auto;         /* explicit reset — overrides base rule's height: 100% */
}
.oh-featured-product__slide .oh-carousel__body,
.oh-featured-product__carousel .oh-carousel__body {
    padding: 20px 24px 22px;
    gap: 6px;
}
.oh-featured-product__slide .oh-carousel__title,
.oh-featured-product__carousel .oh-carousel__title {
    font-size: 20px;
    margin: 4px 0 8px;
    line-height: 1.25;
}
.oh-featured-product__slide .oh-carousel__desc,
.oh-featured-product__carousel .oh-carousel__desc {
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 10px;
}
.oh-carousel-badge--product {
    background: rgba(43, 151, 223, 0.12);
    color: #1565A0;
}

/* Orange "Learn more" button */
.oh-featured-product__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    margin-top: 4px;
    padding: 10px 20px;
    background: #FAAF40;
    color: #1E3888 !important;
    font-size: 14px;
    font-weight: 700;
    font-family: var(--hpt-font-h, inherit);
    border-radius: 6px;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(250,175,64,0.35), 0 1px 3px rgba(0,0,0,0.08);
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, gap 0.2s ease;
}
.oh-featured-product__btn:hover,
.oh-featured-product__btn:focus {
    background: #E89B1F;
    color: #1E3888 !important;
    transform: translateY(-2px);
    gap: 12px;
    box-shadow: 0 8px 24px rgba(250,175,64,0.45), 0 2px 6px rgba(0,0,0,0.10);
}
.oh-featured-product__btn svg { transition: transform 0.25s ease; }
.oh-featured-product__btn:hover svg { transform: translateX(3px); }

@media (max-width: 768px) {
    .oh-featured-product { padding: 0 16px; }
    .oh-featured-product__inner { padding: 28px 20px 24px; }
    .oh-featured-product__slide,
    .oh-featured-product__carousel .oh-carousel__slide {
        grid-template-columns: 1fr;
        min-height: 0;
    }
    .oh-featured-product__slide .oh-carousel__image,
    .oh-featured-product__carousel .oh-carousel__image {
        min-height: 200px;
        max-height: 220px;
    }
    .oh-featured-product__slide .oh-carousel__body,
    .oh-featured-product__carousel .oh-carousel__body { padding: 20px 22px 24px; }
    .oh-featured-product__slide .oh-carousel__title,
    .oh-featured-product__carousel .oh-carousel__title { font-size: 20px; }
}

/* ── Mobile/style polish (2026-06-26) ── */
/* Hub hero search: was inheriting white from the blue hero (var(--oh-text) undefined off landing). */
#oh-hub-search-input { color: #1B2A4A !important; }
#oh-hub-search-input::placeholder { color: #999 !important; opacity: 1; }
/* Hub nav-card icons: left-aligned (default) per Jason 2026-06-26 */