@import url('./hco_fonts/hco_fonts.css');

/* ==========================================================================
   Design Tokens
   ========================================================================== */

:root {
    /* Brand Colors */
    --brand-dark-blue:     #39499C;
    --brand-teal:          #00B4E4;
    --brand-lightest-blue: #DCECF2;
    --brand-light-blue:    #8BD5EE;
    --brand-yellow:        #FFDD35;
    --brand-blue-black:    #05142D;
    --brand-button-blue:   #257BD4;

    /* Gray Scale */
    --gray-25:  #FDFDFD;
    --gray-50:  #FAFAFA;
    --gray-100: #F5F5F5;
    --gray-200: #E9EAEB;
    --gray-300: #D5D7DA;
    --gray-400: #A4A7AE;
    --gray-500: #717680;
    --gray-600: #535862;
    --gray-700: #414651;
    --gray-800: #252B37;
    --gray-900: #181D27;
    --gray-950: #0A0D12;

    /* UI Tokens */
    --color-white:              #fff;
    --color-border:             #E7E5E4;
    --color-bg-section:         #F6F6F6;
    --color-bg-alt:             #F2F2F2;
    --color-utility-bar-bg:     #F5F5F4;
    --color-button-hover:       #1167C0;
    --color-body-text:          #474747;
    --color-footnote:           #6B6B6B;
    --color-text-dark:          #0F0F0F;
    --color-nav-link:           #3F3F3F;
    --color-hamburger:          #333;
    --color-callout-text:       #1D1D1F;
    --color-callout-highlight:  #44B9DB;
    --color-gradient-phone:     #2D7DD2;
    --color-placeholder-pink:   #F2BAC9;
}

/* ==========================================================================
   Reset & Base
   ========================================================================== */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

sup {
    font-size: 0.75em;
    line-height: 0;
    position: relative;
    top: -0.4em;
    vertical-align: baseline;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

html, body {
    /* `clip` (not `hidden`) prevents sideways scroll WITHOUT making these a scroll
       container — `hidden` here would break every `position: sticky` on the site. */
    overflow-x: clip;
}

body {
    font-family: 'Gotham', sans-serif;
    background: var(--color-white);
}

/* Form controls don't inherit font-family by default — force them to, so
   nothing ever falls back to the browser's Arial unless a rule explicitly sets it. */
button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
}

/* ==========================================================================
   Typography
   ========================================================================== */

h2 {
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--brand-teal);
    margin-bottom: 20px;
}

h2 sup {
    font-size: 1em;
    line-height: 0;
    position: relative;
    top: 0em;
    vertical-align: baseline;
}

h3 {
    font-weight: 500;
    font-size: 40px;
    line-height: 48px;
    letter-spacing: -2px;
    color: var(--brand-blue-black);
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    h3 { font-size: 38px; }
}

h4 {
    font-family: 'Gotham', sans-serif;
    font-weight: 500;
    font-size: 19px;
    line-height: 32px;
    color: var(--brand-blue-black);
}

p {
    font-weight: 400;
    font-size: 20px;
    line-height: 28px;
    color: var(--color-body-text);
}

/* ==========================================================================
   Header
   ========================================================================== */

/* --- Utility Bar --- */

.utility-bar {
    display: none;
    width: 100%;
    height: 36px;
    background: var(--color-utility-bar-bg);
}

.utility-bar__inner {
    max-width: 1440px;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 0 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;

}

.utility-bar__group {
    display: flex;
    align-items: stretch;
    align-self: stretch;
    gap: 36px;
}

.utility-link {
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    font-family: 'Gotham', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--gray-600);
}

.utility-link svg {
    flex-shrink: 0;
}

/* --- Main Nav Bar --- */

.main-nav {
    width: 100%;
    height: 67px;
    background: var(--color-white);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 1px 0 var(--color-border);
}

.main-nav__inner {
    max-width: 1440px;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 0 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;

}

.main-nav__left {
    display: flex;
    align-items: center;
    align-self: stretch;
    gap: 30px;
}

.main-nav__logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.main-nav__logo img {
    width: 147px;
    display: block;
}

.main-nav__links {
    display: none;
    list-style: none;
    gap: 10px;
}

.main-nav__links a {
    text-decoration: none;
    font-family: 'Gotham', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    color: var(--color-nav-link);
    padding: 8px 12px;
    border-radius: 12px;
    transition: background 0.15s ease;
}

.main-nav__links sup {
    font-size: 1em;
    line-height: 0;
    position: relative;
    top: 0em;
    vertical-align: baseline;
}

.main-nav__cta {
    display: none;
    flex-shrink: 0;
}

/* Hamburger button */

.nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}

.nav-toggle__bar {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--color-hamburger);
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Hamburger open state */

.nav-toggle.is-open .nav-toggle__bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.nav-toggle.is-open .nav-toggle__bar:nth-child(2) {
    opacity: 0;
}

.nav-toggle.is-open .nav-toggle__bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================================================
   Mobile Nav Drawer
   ========================================================================== */

.nav-drawer {
    display: none;
    position: fixed;
    top: 67px;
    left: 0;
    width: 100%;
    height: calc(100vh - 67px);
    height: calc(100dvh - 67px);
    background: var(--color-white);
    z-index: 99;
    flex-direction: column;
    overflow-y: auto;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.nav-drawer.nav-open {
    display: flex;
}

.nav-drawer__links {
    list-style: none;
    padding: 32px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex: 1 1 auto;
}

.nav-drawer__links a {
    font-family: 'Gotham', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: var(--gray-900);
    text-decoration: none;
}

.nav-drawer__utility {
    background: var(--color-bg-alt);
    padding: 32px 24px 16px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 16px;
}

.nav-drawer__util-link {
    font-family: 'Gotham', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 28px;
    color: var(--gray-600);
    text-decoration: none;
}

.nav-drawer__cta {
    padding: 12px 24px 24px;
    background: var(--color-bg-alt);
}

.nav-drawer__btn {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 16px;
    font-size: 16px;
    margin-top: 0;
}

/* ==========================================================================
   Callout
   ========================================================================== */

.callout {
    display: flex;
    align-items: center;
    gap: 28px;
    background: var(--color-bg-section);
    border-radius: 16px;
    padding: 36px 40px;
    margin: 35px 0 21px;
}

.callout__icon {
    flex-shrink: 0;
}

.callout__text {
    font-family: 'Gotham', sans-serif;
    font-weight: 700;
    font-size: 27px;
    line-height: 32px;
    color: var(--color-callout-text);
}

.callout__highlight {
    color: var(--color-callout-highlight);
}

@media (max-width: 768px) {
    .callout { padding: 26px 40px; }
    .callout__text { font-size: 20px; line-height: 24px; }
}



/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 11.5px 19px;
    border-radius: 980px;
    border: none;
    background: var(--brand-button-blue);
    font-family: 'Gotham', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 21px;
    color: var(--color-white);
    text-decoration: none;
    cursor: pointer;
    margin-top: 15px;
    gap: 6px;
    transition: background 0.25s ease, color 0.25s ease;
}

.main-nav__cta .btn {
    margin-top: 0;
    font-weight: 400;
}

.btn:hover {
    background: var(--color-button-hover);
}

.btn::after {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    background-image: url('../images/icon-button-arrow.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

.btn:hover::after {
    transform: translateX(3px);
}

/* Buttons that don't get the arrow */
.main-nav__cta .btn::after,
.nav-drawer__btn::after,
.cta-banner__btns .btn::after,
.newsletter__submit::after,
.patient-selection__header .btn::after,
.vns-hero__quote .btn::after {
    display: none;
}

.btn--white {
    background: var(--color-white);
    color: var(--brand-button-blue);
}

.btn--white:hover {
    background: var(--color-button-hover);
    color: var(--color-white);
}

.btn-transparent {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 11.5px 19px;
    border-radius: 980px;
    border: 1px solid var(--gray-300);
    background: transparent;
    font-family: 'Gotham', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 21px;
    color: var(--gray-600);
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.25s ease, color 0.25s ease;
}

.btn-transparent:hover {
    border-color: var(--gray-600);
    color: var(--brand-blue-black);
}

.btn-ghost {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 13.5px 19px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    background: transparent;
    font-family: 'Gotham', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 21px;
    text-decoration: none;
    cursor: pointer;
    color: var(--gray-700);
    transition: background 0.25s ease, color 0.25s ease, border 0.25s ease;
}

.btn-quote {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 11.5px 19px;
    border-radius: 980px;
    border: 1px solid var(--color-white);
    background: transparent;
    font-family: 'Gotham', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 21px;
    color: var(--color-white);
    text-decoration: none;
    cursor: pointer;
    margin-top: 15px;
    gap: 6px;
    transition: background 0.25s ease, color 0.25s ease;
}

@media (max-width: 768px) {
    .btn, .btn-ghost {
        width: 100%;
    }
}

/* ==========================================================================
   Life Changing Banner
   ========================================================================== */

.life-changing-banner {
    padding: 98px 0;
    overflow: hidden;
}

.life-changing-banner__inner {
    max-width: 980px;
    width: 100%;
    margin: 0 auto;
    padding: 0 72px;
    overflow: hidden;
}

.life-changing-banner__svg {
    display: block;
    width: 100%;
    height: auto;
}

@media (min-width: 769px) {
    .life-changing-banner__svg {
        height: 83px;
    }
}

.life-changing-banner__mobile {
    display: none;
    flex-direction: column;
    gap: 16px;
}

@media (max-width: 768px) {
    .life-changing-banner__svg--desktop {
        display: none;
    }
    .life-changing-banner__mobile {
        display: flex;
    }
}

@media (max-width: 900px) {
    .life-changing-banner__inner {
        padding: 0 24px;
    }
}

/* ==========================================================================
   Video Modal
   ========================================================================== */

.video-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 500;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.video-modal.is-open {
    display: flex;
}

.video-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.video-modal__dialog {
    position: relative;
    width: 100%;
    max-width: 900px;
    z-index: 1;
}

.video-modal__container {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.4);
}

.video-modal__close {
    position: absolute;
    top: -35px;
    right: 0;
    z-index: 2;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    line-height: 0;
    opacity: 0.85;
    transition: opacity 0.15s ease;
}

.video-modal__close:hover {
    opacity: 1;
}

.video-modal__ratio {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    background: #000;
}

.video-modal__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    object-fit: contain; /* letterbox non-16:9 clips inside the 16:9 ratio box */
    background: #000;
}

@media (max-width: 600px) {
    .video-modal {
        padding: 16px;
        align-items: flex-end;
    }
    .video-modal__close {
        top: -40px;
    }
}

/* ==========================================================================
   Video Thumbnail
   ========================================================================== */

.video-thumb {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    min-height: 550px;
    border-radius: 8px;
    background-image: url('../images/thumb-expert-discusses-rns.png');
    background-size: cover;
    background-position: center;
    padding: 24px;
    border: none;
    cursor: pointer;
    text-align: left;
    overflow: hidden;
}

.video-thumb__bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.video-thumb__copy {
    display: block;
    max-width: 55%;
    font-family: 'Gotham', sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -0.05em;
    color: var(--color-white);
}

.video-thumb__play-btn,
.list-video-thumb__play-btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 69px;
    height: 69px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: transform 0.25s ease;
}

.video-thumb:hover .video-thumb__play-btn,
.list-video-card__thumb:hover .list-video-thumb__play-btn {
    transform: scale(1.15);
}

.video-card {
    display: flex;
    align-items: stretch;
    width: 100%;
    height: 180px;
    margin: 25px 0 20px;
    border-radius: 16px;
    border: 1px solid var(--color-border);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    background: var(--color-white);
    padding: 10px;
    gap: 20px;
    cursor: pointer;
    text-align: left;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

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

.video-card__thumb {
    flex-shrink: 0;
    width: 65%;
    border-radius: 10px;
    background-image: url('../images/thumb-dr-kaye.png');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.video-card__copy {
    flex: 1;
    display: flex;
    align-items: center;
    font-family: 'Gotham', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: var(--gray-600);
}

.video-card:hover .video-thumb__play-btn {
    transform: scale(1.15);
}

.video-thumb__play,
.list-video-thumb__play {
    display: block;
    width: auto;
    height: 23px;
}

@media (max-width: 768px) {
    .video-card {
        height: 140px;
    }
    .video-card__thumb {
        width: 55%;
    }
}

@media (max-width: 768px) {
    .video-thumb { min-height: 0; aspect-ratio: 4 / 3; border-radius: 24px; margin-top: 32px; }
    .video-thumb__copy { font-size: 24px; line-height: 32px; font-weight: 500; max-width: 75%; }
    .video-thumb__bottom { gap: 10px; }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero-wrapper {
    width: 100%;
    height: calc(100vh - 67px); /* mobile: nav only */
    padding: 20px;
}

.hero-wrapper__inner {
    max-width: 1440px;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 0;
    position: relative;
    border-radius: 30px;
    overflow: hidden;
}

/* --- Hero background slideshow --- */

.hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.hero-slide.active { opacity: 1; }

/* Mobile: per-image background-position tweaks so the subject lands well in
   the narrow viewport crop. Adjust the percentage to taste. */
@media (max-width: 768px) {
    .hero-slide--img-1 {
        background-position: 54% center;
    }
    .hero-slide--img-3 {
        background-position: 40% center;
    }
}

.hero-dot { cursor: pointer; }

/* --- Hero absolute containers --- */

.hero-copy {
    position: absolute;
    top: 33%;
    width: 448px;
    height: 134px;
}

.hero-copy--left  { left: 27px; }
.hero-copy--right { right: 27px; }

@media (max-width: 768px) {
    .hero-copy {
        width: calc(100% - 32px);
        left: 16px;
        right: 16px;
        height: auto;
    }
    .hero-copy--left  { top: 7%; left: 16px; }
    .hero-copy--right { top: 60%; left: 16px; right: 16px; }
    .hero-copy p {
        font-size: 22px;
    }
}

.hero-copy p {
    font-weight: 500;
    font-size: 30px;
    line-height: 140%;
    letter-spacing: 3%;
    text-align: center;
    text-transform: uppercase;
    color: var(--color-white);
}

.hero-labels {
    position: absolute;
    left: 30px;
    bottom: 30px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hero-labels__text {
    font-weight: 700;
    font-size: 14px;
    line-height: 140%;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--color-white);
}

.hero-labels__disclaimer {
    font-family: 'Gotham', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 140%;
    color: var(--color-white);
}

.hero-reg {
    font-size: 0.7em;
    vertical-align: top;
    line-height: inherit;
}

.hero-labels__dots {
    display: flex;
    align-items: center;
    gap: 6px;
}

.hero-dot {
    display: block;
    height: 4px;
    width: 28px;
    background: var(--color-white);
    border-radius: 32px;
    opacity: 0.24;
}

.hero-dot--on {
    width: 55px;
    opacity: 1;
}

/* ==========================================================================
   Layout: Two Column
   ========================================================================== */
/*
 * Spec: max-width 1440px | padding 72px | gap 64px
 * Inner content width:  1440 - 144 = 1296px
 * Column space:         1296 - 64  = 1232px
 * Left column:  428px  → flex: 428  (34.7%)
 * Right column: 804px  → flex: 804  (65.3%)
 */

.two-col {
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    padding: 0 72px;
    display: flex;
    gap: 64px;
    align-items: flex-start;
}

.two-col--center {
    align-items: center;
}

.two-col-equal {
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    padding: 0 72px;
    display: flex;
    gap: 64px;
}

.two-col__left {
    flex: 428;
    min-width: 0;
}

.two-col__right {
    flex: 804;
    min-width: 0;
}

.col {
    /* min-width: 0; */
    flex: 1
}

/*
 * Intro variant: gap 16px (48px saved goes to left column)
 * Column space:  1296 - 16 = 1280px
 * Left column:   476px  → flex: 476  (428 + 48)
 * Right column:  804px  → flex: 804
 */

.two-col--intro {
    gap: 16px;
}

.two-col--intro .two-col__left {
    flex: 476;
}

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

.accordion__item {
    border-top: 1px solid var(--color-border);
}

.accordion__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
}

.accordion__header {
    flex: 1;
    min-width: 0;
}

.accordion__desc {
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    color: var(--color-body-text);
    margin-top: 6px;
}

/* Icon: colored box for now, swap for SVG later */

.accordion__icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

/* Body: grid trick for smooth height animation */

.accordion__body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.accordion__item.is-open .accordion__body {
    grid-template-rows: 1fr;
}

.accordion__body-inner {
    overflow: hidden;
}

.accordion__content {
    margin-bottom: 24px;
}

.accordion__content img {
    display: block;
    width: 100%;
}

.accordion__caption {
    font-weight: 400;
    font-style: italic;
    font-size: 14px;
    line-height: 22px;
    color: var(--color-body-text);
    text-align: center;
    margin: 20px auto;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 900px) {
    /* Two-column layout stacks vertically on smaller screens */
    .two-col,
    .two-col-equal {
        flex-direction: column;
        padding: 0 24px;
        gap: 32px;
    }

    .two-col__left,
    .two-col__right,
    .col {
        flex: none;
        width: 100%;
    }

    .two-col__right .accordion {
        margin-top: 28px;
    }

    .accordion__trigger {
        align-items: flex-start;
    }

    .accordion__icon {
        margin-top: 4px;
    }
}

@media (max-width: 979px) {
    .main-nav {
        box-shadow: none;
    }

    .main-nav__inner {
        padding: 0 20px;
    }
}

@media (min-width: 1035px) {
    .utility-bar {
        display: block;
    }

    /* Show nav links + CTA, hide hamburger */
    .main-nav__links {
        display: flex;
        align-items: center;
    }

    .main-nav__cta {
        display: flex;
    }

    .nav-toggle {
        display: none;
    }

    .nav-drawer {
        display: none !important;
    }

    .hero-wrapper {
        height: calc(100vh - 103px); /* 36px utility + 67px nav */
    }
}

.main-nav__links a:hover,
.main-nav__links a.is-active {
    background: #F5F5F5;
    border-radius: 8px;
    color: var(--color-nav-link);
}

.nav-drawer__links a:hover,
.nav-drawer__links a.is-active {
    color: var(--brand-button-blue);
}

.footer-nav__col a:hover,
.footer-nav__col a.is-active {
    color: var(--color-white);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
    width: 100%;
    background: var(--brand-blue-black);
}

.site-footer__inner {
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    padding: 0 64px;
}

/* --- Body --- */

.footer-body {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 72px 0 64px;
}

/* --- Left column --- */

.footer-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}

.footer-logo {
    display: block;
    margin-bottom: 20px;
}

.footer-legal-nav {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 40px;
}

.footer-legal-nav a {
    text-decoration: none;
    font-family: 'Gotham', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: var(--color-white);
}

.footer-support-label {
    font-family: 'Gotham', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: var(--gray-400);
    margin-bottom: 12px;
}

.footer-phone-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    border-radius: 980px;
    background: linear-gradient(90deg, var(--color-gradient-phone) 0%, var(--brand-button-blue) 100%);
    font-family: 'Gotham', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: var(--color-white);
    text-decoration: none;
}

/* --- Right nav --- */

.footer-nav {
    display: flex;
    gap: 80px;
    align-items: flex-start;
}

.footer-nav__col {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.footer-nav__col a {
    text-decoration: none;
    font-family: 'Gotham', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: var(--gray-400);
}

.footer-nav__group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-nav__group-label {
    font-family: 'Gotham', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: var(--gray-400);
}

.footer-nav__sublinks {
    list-style: none;
    margin: 0;
    padding: 0 0 0 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* --- Bottom bar --- */

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding: 28px 0;
}

.footer-copyright {
    font-family: 'Gotham', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: var(--gray-400);
}

.footer-bottom__link {
    text-decoration: none;
    font-family: 'Gotham', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: var(--gray-400);
}

.footer-social {
    display: flex;
    align-items: center;
    gap: 16px;
}

.footer-social__link {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

/* --- Mobile --- */

@media (max-width: 768px) {
    .site-footer__inner {
        padding: 0 24px;
    }

    .footer-body {
        flex-direction: column;
        gap: 48px;
        padding: 48px 0 40px;
    }

    .footer-nav {
        flex-direction: column;
        gap: 48px;
    }

    .footer-nav__col {
        gap: 16px;
    }

    .footer-bottom {
        flex-wrap: wrap;
        gap: 16px;
    }
    .resources-videos__filter, .resources-filter__list {
        overflow-x: auto;
    }

    .resources-videos__filter li, .resources-filter__list li {
        flex-shrink: 0;
    }


}

/* ==========================================================================
   RNS Links
   ========================================================================== */

.rns-links {
    padding: 60px 0 80px;
    background: var(--color-bg-section);
}

.rns-links__inner {
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    padding: 0 52px;
}

.rns-links__card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 48px 56px;
}

.rns-links__label {
    font-family: 'Gotham', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gray-500);
    margin-bottom: 20px;
}

.rns-links__item {
    display: flex;
    align-items: center;
    gap: 24px;
    text-decoration: none;
    padding: 36px 0;
    transition: opacity 0.25s ease;
}

.rns-links__item + .rns-links__item {
    border-top: 1px solid var(--color-border);
}

.rns-links__item:hover {
    opacity: 0.75;
}

.rns-links__icon {
    flex-shrink: 0;
    width: 116px;
    height: 116px;
    margin-right: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rns-links__icon img {
    width: 100%;
    height: 100%;
    display: block;
}

.rns-links__text {
    flex: 1;
    min-width: 0;
}

.rns-links__title {
    font-family: 'Gotham', sans-serif;
    font-weight: 500;
    font-size: 48px;
    line-height: 56px;
    color: var(--brand-blue-black);
    margin-bottom: 6px;
}

.rns-links__desc {
    font-family: 'Gotham', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: var(--gray-600);
}

.rns-links__arrow {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    align-self: flex-start;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rns-links__arrow img {
    width: 100%;
    height: 100%;
    display: block;
}

@media (max-width: 900px) {
    .rns-links__inner {
        padding: 0 24px;
    }

    .rns-links__card {
        padding: 32px 28px;
    }

    .rns-links__item {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 20px;
    }

    .rns-links__title {
        font-size: 32px;
        line-height: 36px;
    }

    .rns-links__icon {
        width: 83px;
        height: 83px;
        margin-right: 0;
    }

    .rns-links__arrow {
        align-self: center;
    }
}

/* ==========================================================================
   Patient Selection
   ========================================================================== */

.patient-selection {
    padding: 80px 0;
    background: var(--color-bg-section);
}

.patient-selection__inner {
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    padding: 0 52px;
}

.patient-selection__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 48px;
}

.patient-selection__heading-group {
    min-width: 0;
    max-width: 60%;
}

.patient-selection__header .btn {
    flex-shrink: 0;
}

.patient-selection__heading-group h2 {
    font-family: 'Gotham', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gray-500);
    margin-bottom: 20px;
}

.patient-selection__heading-group h3 {
    font-family: 'Gotham', sans-serif;
    font-weight: 325;
    font-size: 36px;
    line-height: 44px;
    letter-spacing: -0.02em;
    color: #111111;
}

.patient-selection__heading-group h3.patient-selection__heading--alt {
    font-weight: 500;
}

.patient-selection__body {
    display: flex;
    gap: 48px;
    align-items: flex-start;
}

.patient-selection__visual {
    flex: 0 0 40%;
    min-height: 480px;
    background-image: url('../images/patient-selection.png');
    background-size: cover;
    background-position: center;
    border-radius: 16px;
}

.patient-selection__cards {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    /* Single container; the two sections are split by an inner divider. */
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    overflow: hidden;
}

.patient-selection__card {
    padding: 32px 40px;
}

/* Full-width 1px divider between the two sections. */
.patient-selection__card + .patient-selection__card {
    border-top: 1px solid #E9EAEB;
}

.patient-selection__card-label {
    font-family: 'Gotham', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gray-600);
    margin-bottom: 20px;
}

.patient-selection__cta--mobile {
    display: none;
}

.patient-selection__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.patient-selection__list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.patient-selection__list li img {
    flex-shrink: 0;
    margin-top: 3px;
}

.patient-selection__list li span {
    font-family: 'Gotham', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 30px;
    color: var(--color-text-dark);
}

@media (max-width: 900px) {
    .patient-selection__inner {
        padding: 0 24px;
    }

    .patient-selection__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }

    .patient-selection__heading-group {
        max-width: 100%;
    }

    .patient-selection__heading-group h3 {
        font-size: 30px;
        line-height: 38px;
    }

    .patient-selection__body {
        flex-direction: column;
    }

    .patient-selection__visual {
        flex: none;
        width: 100%;
        min-height: 240px;
    }

    .patient-selection__card {
        padding: 24px;
        width: 100%;

    }

    .patient-selection__list li {
        align-items: center;
    }

    .patient-selection__list li img {
        margin-top: 0;
    }

    .patient-selection__list li span {
        font-size: 20px;
        line-height: 140%;
    }

    .patient-selection__cta--desktop {
        display: none;
    }

    .patient-selection__cta--mobile {
        display: inline-flex;
        align-self: flex-start;
        margin-top: 32px;
    }
}

/* ==========================================================================
   How It Works
   ========================================================================== */

.how-it-works {
    background: var(--color-bg-alt);
    padding: 80px 0;
}

.how-it-works__inner {
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    padding: 0 72px;
    display: flex;
    gap: 64px;
    align-items: center;
}

.how-it-works__visual {
    flex: 0 0 62%;
    height: 512px;
    background: var(--color-white);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.how-it-works__visual img {
    display: block;
    max-width: 100%;
}

.how-it-works__content {
    flex: 1;
    min-width: 0;
}


@media (max-width: 900px) {
    .how-it-works__inner {
        flex-direction: column;
        padding: 0 24px;
        gap: 40px;
    }

    .how-it-works__visual {
        flex: none;
        width: 100%;
        height: auto;
        padding: 30px 0;
    }

    .how-it-works__content h2 {
        margin-top: 20px;
    }

    .how-it-works__content .btn {
        margin-top: 35px;
    }
}

.dial-wrap {
    position: relative;
    width: 100%;
    max-width: 448px;
}

.dial-wrap svg {
    width: 100%;
    height: auto;
    display: block;
}

.dial-label {
    position: absolute;
    top: 71.2%;
    left: 0;
    width: 100%;
    text-align: center;
    font-family: 'Gotham', sans-serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 26px;
    text-transform: uppercase;
    color: #717680;
    pointer-events: none;
}

@media (max-width: 768px) {
    .dial-wrap {
        max-width: 274px;
    }
    .dial-label {
        font-size: 15px;
        line-height: 17px;
    }
}

/* ==========================================================================
   CTA Banner
   ========================================================================== */

.cta-banner {
    padding: 80px 0;
}

.cta-banner__wrap {
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    padding: 0 52px;
}

.cta-banner__card {
    background: linear-gradient(232.22deg, var(--brand-dark-blue) -10.6%, var(--brand-teal) 69.71%), var(--brand-light-blue);
    border-radius: 24px;
    display: flex;
    gap: 48px;
    align-items: stretch;
    padding: 25px;
}

.cta-banner__visual {
    flex: 1;
    min-height: 380px;
    border-radius: 16px;
    overflow: hidden;
}

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

.cta-banner__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px 24px 16px 0;
}

.cta-banner__card h3 {
    font-weight: 400;
    font-size: 56px;
    line-height: 110%;
    letter-spacing: -0.04em;
    color: var(--color-white);
}

.cta-banner__card p {
    color: rgba(255, 255, 255, 0.80);
}

.cta-banner__btns {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 24px;
}

.cta-banner__btns .btn {
    margin-top: 0;
}

/* ==========================================================================
   Newsletter
   ========================================================================== */

.newsletter {
    padding: 56px 0;
    border-top: 1px solid var(--color-border);
}

.newsletter__heading {
    font-size: 28px;
    line-height: 36px;
    letter-spacing: -1px;
    margin-bottom: 8px;
}

.newsletter__inner {
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    padding: 0 52px;
    display: flex;
    gap: 64px;
    align-items: center;
}

.newsletter__left {
    flex: 1;
    padding-right: 48px;
}

.newsletter__right {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.newsletter__form-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.newsletter__form {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    width: 100%;
    position: relative; /* no-op at rest; anchors AC's submission-error message */
}

/* --- ActiveCampaign form #86 (newsletter-ac.js) --------------------------------
   The resting newsletter design is unchanged; these rules only handle AC's
   required wrapper + its dynamic validation / success / error states. --------- */

/* AC's required wrapper must NOT create a box, so the field + button remain direct
   flex children of .newsletter__form and the layout is identical to before. */
.newsletter__form ._form-content {
    display: contents;
}

/* Invalid email state + AC's inline field error (shown only on a bad submit). */
.newsletter__input._has_error {
    border-color: #D92D20;
}
.newsletter__field ._error {
    margin-top: 6px;
}
.newsletter__field ._error-arrow {
    display: none;
}
.newsletter__form ._error-inner {
    font-family: 'Gotham', sans-serif;
    font-size: 13px;
    line-height: 18px;
    color: #D92D20;
}

/* Submission-level error (rare, e.g. network) — float below the row, don't disrupt it. */
.newsletter__form ._form-inner._show_be_error {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 8px;
}

/* AC success message, swapped in after a valid submit. */
.newsletter__form ._form-thank-you {
    font-family: 'Gotham', sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: var(--brand-blue-black);
}

.newsletter__field {
    flex: 0 0 340px;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.newsletter__input {
    width: 100%;
    height: 48px;
    padding: 0 16px;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-family: 'Gotham', sans-serif;
    font-size: 14px;
    line-height: 21px;
    color: var(--brand-blue-black);
    background: var(--color-white);
    outline: none;
}

.newsletter__input::placeholder {
    color: var(--gray-400);
}

.newsletter__input:focus {
    border-color: var(--brand-button-blue);
}

.newsletter__submit {
    flex-shrink: 0;
    margin-top: 0;
}

.newsletter__privacy-text {
    display: block;
    margin-top: 10px;
    margin-bottom: 6px;
    font-family: 'Gotham', sans-serif;
    font-size: 14px;
    line-height: 21px;
    color: var(--gray-600);
}

.newsletter__privacy {
    color: var(--gray-600);
    text-decoration: none;
    border-bottom: 1px solid var(--gray-600);
    padding-bottom: 0;
    transition: color 0.25s ease, border-color 0.25s ease;
}

.newsletter__privacy:hover {
    color: var(--color-button-hover);
    border-bottom-color: var(--color-button-hover);
}

/* ==========================================================================
   Page References / Footnotes
   ========================================================================== */

.page-refs {
    background: var(--color-bg-section);
    padding: 100px 0;
}

.page-refs__inner {
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    padding: 0 72px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.page-refs__inner p,
.page-refs__list li {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: var(--color-footnote);
}

.page-refs__list {
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.page-refs__note {
    font-style: italic;
    margin-top: 24px;
}

/* Footnote sits directly under the references (cancels the 20px flex gap). */
.page-refs__footnote {
    margin-top: -16px;
}

/* Document-control line (e.g. "NP 260046 Rev1 / Rev Date 2026-04"). */
.page-refs__rev {
    text-align: right;
}

.page-refs__code {
    white-space: pre;
}

/* ==========================================================================
   Responsive — CTA Banner / Newsletter / Refs
   ========================================================================== */

@media (max-width: 900px) {
    .cta-banner__wrap {
        padding: 0 24px;
    }

    .cta-banner__card {
        flex-direction: column;
        padding: 16px;
        gap: 32px;
    }

    .cta-banner__visual {
        min-height: 240px;
    }

    /* On mobile let the bottom block fill the parent so the stacked btns
       (width: 100%) span the full card width instead of hugging the left. */
    .cta-banner__bottom,
    .cta-banner__btns {
        width: 100%;
    }

    .newsletter__inner {
        flex-direction: column;
        padding: 0 24px;
        gap: 32px;
    }

    .newsletter__left {
        flex: none;
        width: 100%;
    }

    .newsletter__right {
        width: 100%;
        align-items: stretch;
    }

    .newsletter__form-group {
        width: 100%;
    }

    .newsletter__form {
        flex-wrap: wrap;
    }

    .newsletter__field {
        flex: none;
        width: 100%;
    }

    .page-refs {
        padding: 40px 0;
    }

    .page-refs__inner {
        padding: 0 24px;
    }
}

/* ==========================================================================
   News Section
   ========================================================================== */

.news-section {
    max-width: 1440px;
    margin: 0 auto;
    padding-top: 80px;
    padding-bottom: 80px;
}

/* --- Header row --- */

.news-section__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0 64px;
    margin-bottom: 40px;
}

.news-section__heading-group {
    flex: 1;
    min-width: 0;
}

.news-section__cta {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    margin-bottom: 16px;
    border-radius: 980px;
    border: 1px solid var(--gray-300);
    background: transparent;
    font-family: 'Gotham', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 21px;
    color: var(--gray-600);
    text-decoration: none;
    transition: border-color 0.25s ease, color 0.25s ease;
}

.news-section__cta:hover {
    border-color: var(--gray-600);
    color: var(--brand-blue-black);
}

/* --- Card track --- */

.news-track {
    display: flex;
    gap: 32px;
    padding-left: 64px;
    will-change: transform;
    touch-action: pan-y; /* let browser handle vertical scroll, JS owns horizontal */
    cursor: grab; /* swipe — remove if reverting drag */
}

.news-track.is-dragging {
    cursor: grabbing; /* swipe — remove if reverting drag */
}

/* --- Cards --- */

.news-card {
    flex: 0 0 384px;
    max-width: 384px;
    text-decoration: none;
    cursor: pointer;
    color: inherit;
    user-select: none;
}

.news-card__image {
    width: 100%;
    aspect-ratio: 384 / 411;
    border-radius: 16px;
    border: 1px solid var(--gray-300);
    overflow: hidden;
}

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

.news-card__footer {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-top: 16px;
}

.news-card__copy {
    flex: 1;
    font-family: 'Gotham', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: var(--gray-600);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-card__arrow {
    flex-shrink: 0;
    display: block;
    margin-top: 3px;
}

/* --- Nav buttons --- */

.news-section__nav {
    display: flex;
    gap: 12px;
    padding: 32px 64px 0;
}

.news-nav__btn {
    width: 56px;
    height: 56px;
    border: none;
    cursor: pointer;
    border-radius: 50%;
    background: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.2s ease;
}

.news-nav__btn:disabled {
    opacity: 0.2;
    cursor: default;
}

/* --- Mobile --- */

@media (max-width: 768px) {
    .news-section__head {
        padding: 0 24px;
        flex-direction: column;
        gap: 16px;
    }

    .news-section__heading-group h3 {
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .cta-banner__card h3 {
        font-size: 40px;
    }

    .cta-banner__card p {
        font-size: 16px;
        line-height: 22px;
    }

    .news-track {
        padding-left: 24px;
    }

    .news-card {
        flex: 0 0 min(384px, calc(100% - 64px));
        max-width: 384px;
        scroll-margin-left: 24px;
    }

    .news-section__nav {
        padding: 24px 24px 0;
    }
}

/* ==========================================================================
   About-DRE Hero — pinned horizontal-scroll chart
   ========================================================================== */

.dre-hero {
    background: var(--brand-blue-black);
    color: var(--color-white);
    overflow: hidden;
    padding: 58px 0 160px;
    position: relative;
}

.dre-hero__inner {
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    padding: 0 52px;
    display: flex;
    flex-direction: column;
    gap: 125px;
}

.dre-hero__intro {
    max-width: 1200px;
    padding: 0 32px;
}

.dre-hero__eyebrow {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--brand-yellow);
    margin-bottom: 20px;
}

.dre-hero__title {
    font-size: 60px;
    font-weight: 500;
    line-height: 72px;
    letter-spacing: -0.04em;
    color: #F5F5F7;
    margin-bottom: 24px;
}

.dre-hero__title--muted {
    color: #7E8592;
}

.dre-hero__title--accent {
    color: var(--brand-yellow);
}

.dre-hero__title sup {
    font-size: 0.55em;
    line-height: 0;
    position: relative;
    top: -0.6em;
}

.dre-hero__body {
    font-size: 20px;
    line-height: 30px;
    font-weight: 400;
    color: #D5D7DA;
    max-width: 840px;
}

.dre-hero__chart-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 16px;
}

.dre-hero__chart-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-white);
}

.dre-hero__chart-swatch {
    display: inline-block;
    width: 14px;
    height: 10px;
    background: rgba(255, 255, 255, 0.35);
}

.dre-hero__chart-hint {
    color: #CACAC8;
    letter-spacing: 0.04em;
    text-transform: none;
    font-weight: 400;
}

.dre-hero__chart-window {
    width: 100%;
    height: 620px;
    overflow: visible;
    position: relative;
}

.dre-hero__chart-img {
    height: 620px;
    width: auto;
    display: block;
    max-width: none;
    will-change: transform;
}

.dre-hero__footer {
    margin-top: 40px;
    text-align: center;
}

.dre-hero__footer-text {
    font-size: 40px;
    font-weight: 700;
    line-height: 48px;
    color: var(--color-white);
    margin: 0 auto 40px;
    max-width: 940px;
}

.dre-hero__footer-accent {
    color: var(--brand-yellow);
}

.dre-hero__footer-accent sup {
    color: var(--color-white);
}

.dre-hero__footer-caption {
    font-size: 20px;
    line-height: 30px;
    color: #E9EAEB;
    margin: 0 auto;
    max-width: 940px;
}

/* Mobile: pin disabled by JS; chart becomes a native horizontally-scrollable area */
@media (max-width: 900px) {
    .dre-hero {
        padding: 48px 0 64px;
    }

    .dre-hero__inner {
        padding: 0 20px;
        gap: 120px;
    }

    .dre-hero__intro {
        padding: 0;
    }

    .dre-hero__title {
        font-size: 24px;
        line-height: 32px;
    }

    .dre-hero__body {
        font-size: 18px;
        line-height: 28px;
    }

    .dre-hero__footer-text {
        font-size: 24px;
        line-height: 32px;
    }

    .dre-hero__chart-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        font-size: 18px;
    }

    .dre-hero__chart-hint {
        font-size: 16px;
        line-height: 21px;
    }

    .dre-hero__chart-window {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        width: calc(100% + 20px);
        margin-right: -20px;
    }
}

/* ==========================================================================
   About-DRE Stats / Testimonial Section
   ========================================================================== */

.dre-stats {
    background: var(--color-utility-bar-bg);
    padding: 90px 0 100px;
}

.dre-stats__inner {
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    padding: 0 52px;
}

.dre-stats__header {
    max-width: 1100px;
    margin-bottom: 56px;
}

.dre-stats__eyebrow {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gray-500);
    margin-bottom: 20px;
}

.dre-stats__title {
    font-size: 36px;
    font-weight: 500;
    line-height: 44px;
    letter-spacing: -0.02em;
    color: var(--brand-blue-black);
    text-transform: none;
    margin-bottom: 18px;
}

.dre-stats__title--accent {
    text-decoration: underline;
    text-decoration-color: #C0E5F1;
    text-decoration-thickness: 7px;
    text-decoration-skip-ink: none;
    text-underline-offset: -2px;
}

.dre-stats__sub {
    font-size: 20px;
    line-height: 30px;
    font-weight: 400;
    color: #535862;
}

/* 4-card stat row */
.dre-stats__cards {
    list-style: none;
    padding: 0;
    margin: 0 0 180px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.dre-stat-card {
    background: #fff;
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0px 9px 14px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.dre-stat-card__icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-teal), var(--brand-dark-blue));
}

img.dre-stat-card__icon {
    background: none;
    border-radius: 0;
    display: block;
}

.dre-stat-card__value {
    font-size: 46px;
    font-weight: 500;
    line-height: 60px;
    color: var(--brand-blue-black);
}

.dre-stat-card__caption {
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: #535862;
    margin-top: -6px;
}

/* Testimonial card */
.dre-testimonial {
    background: #fff;
    border-radius: 16px;
    padding: 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 56px;
    max-width: 930px;
    margin-inline: auto;
}

.dre-testimonial__quote {
    text-align: center;
}

.dre-testimonial__text {
    font-family: 'Gotham', sans-serif;
    font-size: 20px;
    line-height: 30px;
    font-weight: 400;
    color: #535862;
    margin: 0 32px 24px;
}

.dre-testimonial__attr {
    font-family: 'Gotham', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    color: #535862;
}

.dre-testimonial__attr strong {
    font-weight: 700;
}

.dre-testimonial__video {
    position: relative;
    aspect-ratio: 16 / 9;
    width: 100%;
    border: 0;
    border-radius: 12px;
    background: #1a2440 url('../images/dr-martha-morrell.png') center / cover no-repeat;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.dre-testimonial__video:hover .video-thumb__play-btn {
    transform: scale(1.15);
}

@media (max-width: 900px) {
    .dre-stats { padding: 60px 0 72px; }
    .dre-stats__inner { padding: 0 24px; }
    .dre-stats__title { font-size: 24px; line-height: 32px; }
    .dre-stats__cards { grid-template-columns: repeat(2, 1fr); gap: 32px; margin-bottom: 40px; }
    .dre-stat-card { padding: 24px; gap: 10px; }
    .dre-stat-card__value { font-size: 38px; }
    .dre-testimonial { grid-template-columns: 1fr; padding: 12px; gap: 28px; }
    .dre-testimonial__text { margin-top: 24px; }
}

@media (max-width: 600px) {
    .dre-stats__cards { grid-template-columns: 1fr; }
}

/* ==========================================================================
   rns-system Hero 
   ========================================================================== */

.rns-hero {
    background: var(--brand-lightest-blue);
    padding: 80px 0 100px;
}

.vns-hero {
    background: var(--brand-dark-blue);
    padding: 80px 0 100px;
}

.vns-hero .col:last-child {
    margin-top: auto;
    display: flex;
    justify-content: flex-end;
}

.vns-hero__quote {
    width: 100%;
    max-width: 430px;
}

.vns-hero__quote p {
    color: var(--gray-100);
    font-weight: 300;
    font-size: 20px;
    line-height: 30px;
    letter-spacing: 0%;
}

/* Keep this CTA inline-width; the global @media(max-width:768px) .btn{width:100%}
   makes it stretch full-width on mobile, which looks wrong here. */
.vns-hero__quote .btn {
    width: auto;
}

.vns-hero header h1 {
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--brand-light-blue);
    margin-bottom: 20px;
}

.vns-hero header h2 {
    color: var(--gray-50);
    font-weight: 500;
    font-size: 48px;
    line-height: 60px;
    letter-spacing: -3%;
    text-transform: initial;
    margin-bottom: 0;
}

@media (max-width: 900px) {
    .vns-hero {
        padding-bottom: 40px; /* was 100px — close the gap before the photo section */
    }

    .vns-hero .col:last-child {
        justify-content: flex-start;
        margin-top: 0; /* don't let flex push the quote column down */
    }

    .vns-hero__quote {
        max-width: 100%;
    }

    .vns-hero header h1 {
        font-size: 16px;
        line-height: 24px;
    }

    .vns-hero header h2 {
        font-size: 30px;
        line-height: 38px;
    }
}

/* ==========================================================================
   rns-system - Quote 
   ========================================================================== */

.rns-quote {
    background: var(--brand-dark-blue);
    height: 700px;
}

.rns-quote .hero-wrapper__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 24px;
}

.rns-quote .hero-slide {
    background-size: cover;
}

.rns-quote__quoteholder {
    background: var(--brand-blue-black);
    border-radius: 16px;
    padding: 24px;
    gap: 32px;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    z-index: 1;
    max-width: 465px;
}

.rns-quote__quoteholder p {
    color: var(--color-white);
    font-weight: 300;
    font-size: 20px;
    line-height: 140%;
    letter-spacing: -2%;
}

.rns-quote__quoteholder span {
    color: var(--color-white);
    font-weight: 500;
    font-size: 14px;
    line-height: 140%;
    letter-spacing: 3%;
    text-transform: uppercase;
}

/* Mobile: stack the quote card BELOW the photo instead of overlapping it.
   The photo is a background on .hero-slide (absolutely filling the frame on
   desktop); on mobile we put it back in flow with its own height. */
@media (max-width: 900px) {
    .rns-quote {
        height: auto;
        /* Drop the tall top frame so the photo sits right under the hero (no big gap). */
        padding: 0 20px 20px;
        margin-top: -1px; /* overlap the hairline seam against the hero above */
    }
    .rns-quote .hero-wrapper__inner {
        height: auto;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        overflow: visible;
        border-radius: 0;
        padding: 0;
        gap: 16px;
    }
    .rns-quote .hero-slide {
        position: relative;
        inset: auto;
        opacity: 1;
        height: 660px;                    /* taller portrait crop */
        border-radius: 16px;
        /* Portrait crop made for mobile. !important overrides the inline desktop
           background set on the element in page-rns-quote.php. */
        background-image: url('../images/vns-patient-mobile.png') !important;
        background-position: center;
    }
    .rns-quote__quoteholder {
        max-width: 100%;
    }
}

.btn-cta__quote {

}







.rns-hero__inner {
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    padding: 0 52px;
}

.rns-hero__head {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
    margin-bottom: 60px;
}

.rns-hero__eyebrow {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gray-500);
    margin-bottom: 20px;
}

.rns-hero__title {
    font-size: 48px;
    font-weight: 400;
    line-height: 110%;
    letter-spacing: -0.02em;
    color: #0F0F0F;
}

.rns-hero__body {
    font-size: 18px;
    line-height: 1.55;
    color: var(--gray-600);
    max-width: 460px;
    justify-self: end;
    margin-top: calc(12px * 1.2 + 18px);
}

.rns-hero__body-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
    padding: 0 40px;
}

.rns-hero__steps {
    list-style: none;
    padding: 0;
    margin: 0;
}

.rns-hero__step {
    position: relative;
    padding: 26px 0 26px 24px;
    border-left: 4px solid #D5D7DA;
    transition: border-color 0.4s ease;
}

.rns-hero__step.is-active[data-state="monitors"] {
    border-left-color: #315AA5;
}

.rns-hero__step.is-active[data-state="detects"] {
    border-left-color: #F5D32B;
}

.rns-hero__step.is-active[data-state="records"] {
    border-left-color: #00B4E4;
}

.rns-hero__step-title {
    font-size: 20px;
    line-height: 30px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: normal;
    color: var(--brand-blue-black);
    margin-bottom: 6px;
}

.rns-hero__step-body {
    font-size: 20px;
    line-height: 30px;
    color: var(--gray-600);
}

.rns-hero__visual {
    background: var(--color-white);
    border-radius: 16px;
    padding: 30px;
    height: 512px;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* ==========================================================================
   rns-system - Usp
   ========================================================================== */

.rns-usp {
    background: var(--gray-100);
    padding: 100px 0;
}   

.rns-usp__inner {
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    padding: 0 72px;
    display: flex;
    flex-direction: column;
    gap: 64px;
}

.rns-usp__inner header {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.rns-usp__inner header h2,
.rns-usp__inner header h3 {
    margin: 0;
}

.rns-usp__inner header p {
    color: var(--gray-600);
    font-weight: 300;
    font-size: 20px;
    line-height: 30px;
    letter-spacing: 0%;
}

.rns-usp__inner ul {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 32px;
}

.rns-usp__inner ul li {
    background-color: var(--color-white);
    border-radius: 16px;
    padding: 32px;
    gap: 32px;
    box-shadow: 0px 9px 14px 0px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.rns-usp__inner ul li h3 {
    color: var(--gray-900);
    font-weight: 500;
    font-size: 24px;
    line-height: 32px;
    letter-spacing: 0%;
    margin-bottom: 5px;
}

.rns-usp__inner ul li p {
    font-size: 18px;
    line-height: 28px;
    letter-spacing: 0%;
    color: var(--gray-600);
}

.rns-usp__inner ul li a {
    margin-top: auto;
}

@media (max-width: 900px) { 
    .rns-usp__inner {
        padding: 0 24px;
        gap: 32px;
    }

    .rns-usp__inner ul {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) { 
    .rns-usp__inner ul {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   rns-system - Faq
   ========================================================================== */

.rns-faq {
    background: var(--gray-100);
}

.rns-faq .two-col {
    align-items: stretch;
}

.rns-faq .video-card {
    margin-bottom: 0;
    /* margin-top: auto; */
    margin-top: 50px;
    width: 90%; /* ~10% narrower than the column, VNS only */
}

/* VNS-only thumbnail for this card (base .video-card__thumb uses thumb-dr-kaye.png). */
.rns-faq .video-card__thumb {
    background-image: url('../images/thumb-expert-discusses-rns.png');
}

@media (max-width: 900px) {
    /* Mobile: full-width card, less space above, a little more below. */
    .rns-faq .video-card {
        width: 100%;
        margin-top: 24px;
        margin-bottom: 32px;
    }
}

.rns-faq .faq-card {
    height: 100%;
    display: flex;
    width: 100%;
}

/* This list reuses .patient-selection__card on its own (no .patient-selection__cards
   wrapper), so restore the white card box the merge moved onto the wrapper. */
.faq-card .patient-selection__card {
    flex: 1;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 16px;
}

/* Wider spacing between the candidate bullets (base list is 16px). */
.faq-card .patient-selection__list {
    gap: 32px;
}

/* ==========================================================================
   rns-system - Features
   ========================================================================== */

.rns-features {
    background: var(--gray-100);
    display: flex;
}

/* Desktop only: vertically center the copy column against the chart — by centering
   the LEFT column's own content, so the chart column keeps stretching to full height
   (the bars draw into its height:100%; centering the whole row collapses them). */
@media (min-width: 901px) {
    .rns-features .two-col-equal > .col:first-child {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    /* The flex column would otherwise stretch the button full-width; keep it natural. */
    .rns-features .two-col-equal > .col:first-child .btn-transparent {
        align-self: flex-start;
    }
}

/* .rns-features .col:last-child {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
} */

.rns-features .btn-transparent {
    margin-top: 50px;
}

.rns-features__comparison {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 640px;
}

.rns-features__comparison header {
    /* margin-bottom: 100px; */
}

.rns-features__comparison header h2 {
    color: #676C73;
    text-align: center;
    margin-bottom: 0;
}

.rns-features__inner {
    display: flex;
    row-gap: 40px;
    margin-top: 40px;
    align-items: flex-end;
    height: 100%;
    /* border-left: 2px solid #D7E1E6;
    border-right: 2px solid #D7E1E6; */
}

.rns-features__inner > div:not(.rns_feature__divider) {
    flex: 1;
    height: 100%;
    display: flex;
    padding: 0 10px;
}

.rns-features__inner > div figure {
    display: flex;
    gap: 15px;
    flex-direction: column;
    width: 100%;
    height: 100%;
    justify-content: flex-end;
}

.rns-features__inner > div figure figcaption {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.rns-features__inner > div figure figcaption span {
    font-weight: 500;
    font-size: 18px;
    letter-spacing: 0%;
    color: #676C73;
}

.rns-features__inner > div figure figcaption small {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0%;
    color: #676C73;
}


.rns-features__inner > div figure .rns_feature__stat {
    height: 100%;
    border-radius: 16px;
}

.rns_feature__stat {
    clip-path: inset(100% 0 0 0);
}

.rns_feature__stat {
    background: #D7E1E6;
}

.rns_feature__stat.gradient {
    background: linear-gradient(176.04deg, var(--brand-dark-blue) -19.75%, var(--brand-teal) 107.1%);
}

.rns_feature__info {
    display: flex;
    flex-direction: column;
    font-weight: 400;
    font-size: 30px;
    line-height: 38px;
    letter-spacing: -2%;
}

.rns_feature__perc {
    font-weight: 700;
    font-size: 30px;
    line-height: 32px;
    letter-spacing: 0%;
}

.rns_feature__divider {
    flex:0; 
    width: 2px; 
    background: #D7E1E6; 
    height: 100%; 
    padding: 0;
}

/* Desktop: widen the chart column so the caption labels
   (e.g. "Study Group E01-E05") stay on one line. */
@media (min-width: 901px) {
    .slider__slide[data-slide="Effectiveness"] > .col:first-child {
        flex: 0.85;
    }
    .slider__slide[data-slide="Effectiveness"] > .col:last-child {
        flex: 1.15;
    }
    .rns-features__inner > div figure figcaption span {
        white-space: nowrap;
    }
}

@media (max-width: 900px) {
    .rns-features__comparison {
        height: 640px;
    }
}

/* Small phones: chart title drops 2px so it doesn't crowd. */
@media (max-width: 411px) {
    .rns-features__comparison header h2 {
        font-size: 14px;
    }
}





@media (max-width: 900px) {
    .rns-hero { padding: 56px 0 72px; }
    .rns-hero__inner { padding: 0 24px; }
    .rns-hero__head { grid-template-columns: 1fr; gap: 32px; margin-bottom: 48px; text-align: center; }
    .rns-hero__body { justify-self: center; }
    .rns-hero__title { font-size: 38px; }
    .rns-hero__body-row { grid-template-columns: 1fr; gap: 40px; padding: 0; }
    .rns-hero__visual { height: auto; padding: 24px; order: -1; }
    .rns-hero__step-title { font-size: 18px; }
    .rns-hero__step-body { font-size: 16px; line-height: 24px; }
}

/* ==========================================================================
   resources Hero — Search
   ========================================================================== */

.resources-hero {
    background: var(--brand-dark-blue);
}

.resources-hero__inner {
    max-width: 728px;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 95px 24px 65px 24px;
}

.resources-hero h1 {
    font-weight: 400;
    font-size: 48px;
    line-height: 60px;
    letter-spacing: -0.02em;
    color: var(--color-white);
    text-align: center;
}

.resources-filter {
    background: var(--color-white);
    box-shadow: 0 1px 0 var(--color-border);
}

.resources-filter__inner {
    max-width: 728px;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 0 24px;
}

.resources-filter__list {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

.resources-filter__list a {
    color: var(--gray-500);
    text-decoration: none;
    padding: 16px 8px;
    display: block;
    font-weight: 500;
    transition: color 0.25s ease;
    white-space: nowrap;
}

.resources-filter__list a.active {
    color: var(--brand-button-blue);
    border-bottom: 2px solid var(--brand-button-blue);
}

.resources-filter__list a:hover:not(.active) {
    color: var(--color-nav-link);
}

/* Mobile dropdown alternative to the filter tabs (shown ≤768px, see below). */
.resources-filter__select {
    display: none;
    width: 100%;
    margin: 16px 0;
    padding: 14px 48px 14px 16px;
    font-size: 16px;
    font-weight: 500;
    color: var(--brand-blue-black);
    background-color: #fff;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23676C73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    cursor: pointer;
}

/* Mobile: swap the scrolling tab list for the dropdown. Placed after the base
   rules above so it isn't overridden by .resources-filter__list's display. */
@media (max-width: 768px) {
    .resources-filter__list {
        display: none;
    }
    .resources-filter__select {
        display: block;
    }
    .resources-filter__inner {
        padding: 24px;
    }
    /* Category select fills the filter bar's own padding; drop its margin. */
    .resources-filter__inner .resources-filter__select {
        margin: 0;
    }
}

.search__form {
    padding-top: 40px;
}

.search__field {
    position: relative;
    height: 70px;
    background: #FFFFFF;
    border-radius: 16px;
    border: 2px solid #D1D5DC;
    box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -4px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    padding: 0 16px;
}

.search__submit {
    width: 25px;
    height: 25px;
    appearance: none;
    border: none;
    background: transparent;
    cursor: pointer;
}

.search__input {
    font-size: 18px;
    line-height: 100%;
    letter-spacing: 0px;
    flex: 1;
    margin-left: 20px;
    border: none;
}

.search__input:focus-visible {
    outline: none;
}

/* ==========================================================================
   resources — Content
   ========================================================================== */

/* Temporary: the Upcoming Events column is hidden until it's wired to the events
   plugin. With no events, hide that column and center the documents list. */
.resources-content--no-events .two-col__left {
    display: none;
}

.resources-content--no-events .two-col {
    justify-content: center;
}

.resources-content--no-events .two-col__right {
    flex: 1;
    max-width: 866px;
}

.resources-content {
    padding: 0 80px;
}

.resources-content__inner {

}

.resources-content__left {
    flex: 1;
}
.resources-content__right {
    flex: 1;
}

/* ==========================================================================
   resources — Events widget
   ========================================================================== */

.resources-events {
    border: 2px solid var(--color-border);
    border-radius: 14px;
}

.resources-events__inner {
    padding: 26px 18px;
    gap: 16px;
    display: flex;
    flex-direction: column;
}

.resources-events__inner .btn-ghost {
    margin-bottom: -10px;
}

.resources-events__header {
    display: flex;
    align-items: center;
    border-bottom: 2px solid var(--color-border);
    padding-bottom: 10px;
}

.resources-events__header h3 {
    font-weight: 500;
    font-size: 18px;
    letter-spacing: 0px;
    margin: 0;
    line-height: 18px;
    margin-left: 15px;
}

.resources-events__list {
    list-style: none;
    display: flex;
    gap: 16px;
    flex-direction: column;
}

.resources-events__list a {
    text-decoration: none;
}

.resources-events__list a > div {
    display: flex;
    align-items: center;
    gap: 12px;
}

.resources-events__list a > div div {
    background: var(--color-utility-bar-bg);
    width: 48px;
    height: 48px;
    border-radius: 10px;
    padding: 8px;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.resources-events__list a > div div time {
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0px;
    color: var(--gray-600);
}

.resources-events__list a > div p {
    color: var(--gray-600);
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0px;
}

.resources-events__list a > div div time span {
    color: var(--brand-dark-blue);
    font-weight: 700;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0px;
}

.resources-events__list a:hover > div div {
    background: var(--color-border);
    transition: background 0.25s ease;
}

/* ==========================================================================
   resources — Documents and videos widget
   ========================================================================== */

/* Stack the named sections with consistent breathing room. Flex gap only applies
   between *visible* sections, so search-hidden sections leave no empty space. */
.resources-documents-videos {
    display: flex;
    flex-direction: column;
    gap: 100px;
}

/* Shown only when a search matches nothing in any section (set by JS). */
.resources-documents-videos__empty {
    margin: 0;
    padding: 24px 0;
    font-size: 18px;
    line-height: 28px;
    color: var(--gray-900);
}

.resources-documents__inner,
.resources-videos__inner {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* The display:flex rules above (and on the pager) override the `hidden`
   attribute, so JS hiding needs these explicit overrides to take effect. */
.resources-documents__inner[hidden],
.resources-videos__inner[hidden],
.resources-pagination[hidden] {
    display: none;
}

.resources-documents__header h2,
.resources-videos__header h2 {
    font-weight: 500;
    font-size: 24px;
    line-height: 32px;
    letter-spacing: 0%;
    text-transform: initial;
    color: var(--brand-blue-black);
    margin: 0;
}

.resources-documents__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.resources-documents__list li {}

.resources-documents__list li a {
    text-decoration: none;
    color: var(--gray-900);
    display: flex;
    gap: 16px;
    padding: 26px;
    border: 2px solid var(--color-border);
    border-radius: 14px;
    transition: background 0.25s ease;
    align-items: center;
}

.resources-documents__list li a h3{
    font-weight: 500;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: 0%;
    margin: 0;
}

.resources-documents__list li a div {
    background: rgba(0, 102, 255, 0.1);
    width: 48px;
    height: 48px;
    border-radius: 10px;
    padding: 8px;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.resources-documents__list li a:hover {
    background: var(--color-border);
}

/* ==========================================================================
   resources — Video widget
   ========================================================================== */

.resources-videos__filter {
    display: flex;
    list-style: none;
    justify-content: space-between;
}

.resources-videos__filter li a {
    text-decoration: none;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    color: var(--gray-500);
    padding: 8px 12px;
    border-radius: 8px; 
    transition: background 0.25s ease, color 0.25s ease;
}

.resources-videos__filter li a.active {
    background: var(--gray-50);
    color: var(--gray-700);
} 

.resources-videos__filter li a:hover:not(.active) {
    background: var(--gray-50);
    color: var(--gray-700);
}

/* Mobile: the video filter tabs are replaced by the dropdown (after base rule
   above so display:none isn't overridden). */
@media (max-width: 768px) {
    .resources-videos__filter {
        display: none;
    }
}

.resources-videos__list {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.list-video-card {
    display: flex;
    align-items: stretch;
    width: 100%;
    height: 245px;
    border-radius: 16px;
    border: 1px solid var(--color-border);
    background: var(--color-white);
    cursor: pointer;
    text-align: left;
    overflow: hidden;
}

.list-video-card__thumb {
    flex-shrink: 0;
    border-radius: 10px;
    width: 100%;
    height: 100%;
    background-image: url('../images/thumb-dr-kaye.png');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.list-video-desc {  
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
}

.list-video-desc img {
    margin-top: 5px;
}

.list-video-desc h4 {
    color: var(--gray-900)
    font-weight: 500;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: 0%;
}

.list-video-desc p {
    color: var(--gray-600);
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
}

@media (max-width: 768px) { 
    .resources-videos__list {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   resources — Pagination
   ========================================================================== */

.resources-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--color-border);
    padding-top: 20px;
    gap: 32px;
}

.resources-pagination__pages {
    list-style: none;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
}

.resources-pagination__pages button,
.resources-pagination__ellipsis {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--gray-500);
    font-weight: 400;
    font-size: 14px;
    text-align: center;
    cursor: pointer;
    transition: color 0.25s ease;
}

.resources-pagination__pages button:hover:not(.active) {
    color: var(--gray-700);
}

.resources-pagination__pages button.active {
    background: var(--color-utility-bar-bg);
    color: var(--gray-700);
}

.resources-pagination__ellipsis {
    cursor: default;
}

.resources-pagination__status {
    display: none;
    font-weight: 500;
    font-size: 16px;
    color: var(--gray-700);
}

.btn-prev,
.btn-next {
    appearance: none;
    border: none;
    background: none;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--gray-600);
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
}

.btn-prev:disabled,
.btn-next:disabled {
    opacity: 0.4;
    cursor: default;
}

@media (max-width: 768px) {
    .resources-pagination__pages {
        display: none;
    }
    .resources-pagination__status {
        display: block;
    }
    .btn-prev span,
    .btn-next span {
        display: none;
    }
    .btn-prev,
    .btn-next {
        width: 48px;
        height: 48px;
        justify-content: center;
        border: 1px solid var(--color-border);
        border-radius: 12px;
    }
}

/* ==========================================================================
   outcomes — Hero
   ========================================================================== */

.outcomes-hero {
    width: 100%;
    min-height: calc(100vh - 103px);
    background: var(--gray-100);
    display: flex;
    position: relative;
}

.outcomes-hero__inner {
    padding-top: 100px;
    /* padding-bottom: 100px; */
    width: 100%;
    height: 100%;
    max-width: 960px;
    margin: 0 auto;
}

.outcomes-hero__inner > div:first-child {
    height: 70%;
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(176.04deg, var(--brand-dark-blue) -19.75%, var(--brand-teal) 107.1%);
}

.outcomes-hero__content {
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.outcomes-hero__content > div {
    width: 100%;
}

.outcomes-hero__content > div header {
    gap: 20px;
    display: flex;
    flex-direction: column;
}


.outcomes-hero__content > div header h1 {
    font-weight: 500;
    font-size: 16px;
    line-height: 16.8px;
    letter-spacing: 5%;
    text-align: center;
    color: var(--brand-lightest-blue);
    text-transform: uppercase;
}

.outcomes-hero__content > div header h2 {
    font-weight: 400;
    font-size: 60px;
    line-height: 72px;
    letter-spacing: -5%;
    text-align: center;
    color: var(--color-white);
    text-transform: initial;
    margin-bottom: 0;
}

@media (max-width: 900px) {
    .outcomes-hero__content > div header h2 {
        font-size: 48px;
        line-height: 60px;
    }
    /* Let the intro copy wrap naturally on mobile instead of the desktop <br>.
       Use `> p` (direct child) so this does NOT hit the video card's caption <p>
       deeper in the tree — collapsing its <br> there joined words with no space. */
    .outcomes-hero__content > div > p br {
        display: none;
    }
}

.outcomes-hero__content > div p {
    font-weight: 300;
    font-size: 20px;
    line-height: 30px;
    letter-spacing: 0%;
    text-align: center;
    color: var(--brand-lightest-blue);
    margin-top: 30px;
}

.outcomes-hero__content .list-video-card {
    width: 100%;
    height: 540px;
    border: none;
    margin-top: 70px;
}

.outcomes-hero__content .list-video-card .list-video-card__thumb {
    position: relative;
    background-image: url('../images/thumb-outcomes-hero.png');
    border-radius: 8px;
}

.outcomes-hero__content .list-video-card .list-video-card__thumb .list-video-thumb__desc {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.25));
    pointer-events: none;
}

.outcomes-hero__content .list-video-card .list-video-card__thumb .list-video-thumb__desc p {
    color: var(--color-white);
    padding: 24px;
    font-weight: 500;
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -3%;
    max-width: 360px;
    text-align: left;
}

.list-video-thumb__desc p sup {
    font-size: 0.55em;
    top: -0.6em;
}

@media (max-width: 900px) {
    .outcomes-hero__inner {
        padding-left: 24px;
        padding-right: 24px;
    }
}

/* Phones only: the hero video card goes portrait (~540px tall, narrow), so the
   wide desktop "3-person split" poster crops badly. Swap to the tall mobile crop.
   Kept at <=600px so tablets/desktop (where the card is landscape) keep the wide one. */
@media (max-width: 600px) {
    .outcomes-hero__content .list-video-card .list-video-card__thumb {
        background-image: url('../images/thumb-outcomes-mobile.png');
    }
}


/* ==========================================================================
   outcomes — Features
   ========================================================================== */

.outcomes-features {
    background: var(--gray-100);
}

.outcomes-features .two-col__left header h2 {
    color: #5F6E87;
    text-transform: uppercase;
}

.outcomes-features .two-col__left p {
    color: var(--gray-600);
}

.outcomes-features .two-col__left .video-card {
    flex-direction: column;
    height: auto;
    margin-top: 79px;
}

.outcomes-features .two-col__left .video-card .video-card__thumb {
    width: 100%;
    height: 187.88px;
    background-image: url('../images/thumb-rns-transformed.png');
}

/* Stacked card: copy flows as normal text (base rule is display:flex, which
   would split the text + <sup> into separate flex items). */
.outcomes-features .two-col__left .video-card .video-card__copy {
    display: block;
}

.outcomes-features__list {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.outcomes-features__list {
    display: flex;
    gap: 32px;
    list-style: none;
}

.features__item {
    background: var(--color-white);
    box-shadow: 0px 9px 14px 0px rgba(0, 0, 0, 0.05);
    border-radius: 24px;
    overflow: hidden;
}

.features__trigger {
    border: none;
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: space-between;
    flex-direction: row;
    width: 100%;
    padding: 32px;
    background: transparent;
}

.features__trigger h3 {
    color: var(--gray-900);
    font-weight: 500;
    font-size: 27.1px;
    line-height: 32px;
    letter-spacing: 0%;
    margin-bottom: 0;
}

.features__trigger .accordion__icon {
    align-self: flex-start;
}

.features__trigger h4 {
    color: var(--gray-600);
    font-weight: 300;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
}

.features__heading {
    display: flex;
    flex-direction: row;
    gap: 16px;
}

.features__heading div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    text-align: left;
}

.features__content {
    display: none;
    background: var(--gray-50);
}

.features__item.is-open .features__content {
    grid-template-rows: 1fr;
}


.features__content .features__content--inner {
    overflow: hidden;
    padding: 0 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.features__content .features__content--inner > p {
    font-style: italic;
    color: var(--gray-600);
    font-weight: 300;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: 0%;
    margin-top: 24px;
}

.features__content .features__content--inner ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.features__content .features__content--inner ul li:not(:last-child) {
    border-bottom: 1px solid #D3D3D3;
}

.features__content .features__content--inner ul li div {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    position: relative;
    padding-left: 24px;
}

.features__content .features__content--inner ul li div:before {
     content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--brand-button-blue);
    border-radius: 100%;
    top: 10px;
    left: 0;
    display: block; 
}


.features__content .features__content--inner ul li div h5 {
    color: var(--gray-900);
    font-weight: 500;
    font-size: 20px;
    line-height: 30px;
    letter-spacing: 0%;
}

.features__content .features__content--inner ul li div p {
    color: var(--gray-600);
    font-weight: 300;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
}

/* ==========================================================================
   outcomes — Stats
   ========================================================================== */

.outcomes-stats {
    background-color: var(--gray-100);
    padding: 100px 0;
}

.outcomes-stats__inner {
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    padding: 0 72px;
}

.outcomes-stats__inner .dre-stats__cards {
    padding: 0;
}


.outcomes-stats__inner .dre-stats__cards li h3 {
    font-weight: 700;
    font-size: 27.1px;
    line-height: 32px;
    letter-spacing: -2%;
    margin-bottom: 0;
}

.outcomes-stats__inner .dre-stats__cards li h3 span {
    color: var(--brand-teal);
}

@media (max-width: 900px) {
    .outcomes-stats { padding: 60px 0 72px; }
    .outcomes-stats__inner { padding: 0 24px; }
    .outcomes-stats__inner .dre-stats__cards li h3 { font-size: 32px; }
    .outcomes-stats__cards { grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 40px; }
    .outcomes-stat-card { padding: 24px; gap: 16px; }
}

@media (max-width: 600px) {
    .outcomes-stats__cards { grid-template-columns: 1fr; }
}

/* ==========================================================================
   outcomes — Safety
   ========================================================================== */

.outcomes-safety {
    background-color: var(--gray-100);
    padding: 100px 0;
    display: flex;
    flex-direction: column;
    gap: 64px;
}

.outcomes-safety__paragraph {
    margin-top: 45px;
}



.outcomes-safety header h2 {
    color: #5F6E87;
}

@media (min-width: 901px) {
    .outcomes-safety header .col {
        max-width: 70%;
    }
}

.outcomes-safety__title {
    margin-bottom: 0;
}

.outcomes-safety__list {

}

.outcomes-safety__list ul {
    display: flex;
    gap: 16px;
    flex-direction: column;
    list-style-type: none;
}

.outcomes-safety__list ul li:first-child {
    background: var(--brand-yellow);
}

.outcomes-safety__list ul li {
    padding: 24px;
    border-radius: 8px;
    background: var(--color-white);
    display: flex;
    align-items: center;
    gap: 16px;
}

.outcomes-safety__list ul li h3 {
    margin-bottom: 0;
    font-weight: 500;
    font-size: 27.1px;
    line-height: 32px;
    letter-spacing: -2%;
}

@media (max-width: 900px) {
    .outcomes-safety__paragraph {
        margin-top: 0;
    }
}

/* ==========================================================================
   outcomes — Video
   ========================================================================== */

.outcomes-video {
    background: var(--gray-100);
}

.outcomes-video .dre-testimonial__video {
    background-image: url('../images/thumb-john-rolston.png');
}

/* This testimonial: video fills the full card height so there's no empty space
   around it, and the quote sits centered with breathing room regardless of length. */
.outcomes-video .dre-testimonial {
    align-items: stretch;
}

.outcomes-video .dre-testimonial__quote {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 0;
}

.outcomes-video .dre-testimonial__video {
    align-self: stretch;
}

.outcomes-video__inner {
    max-width: 960px;
    width: 100%;
    margin: 0 auto;
    padding: 100px 0;
    /* padding: 0 72px; */
}

@media (max-width: 900px) {
    .outcomes-video__inner {
        padding: 0 24px;
    }
}

/* ==========================================================================
   outcomes — Carousel
   ========================================================================== */

.outcomes-slider {
    background-color: var(--gray-100);
    padding: 0 0 100px;
}

.outcomes-slider__inner {
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    padding: 0 72px;
    display: flex;
    flex-direction: column;
    gap: 100px;
}

.slider {
    position: relative;
}

.slider__track {
    position: relative;
}

.slider__slide {
    display: none;
    width: 100%;
}

.slider__slide.is-active {
    display: block;
}

/* Effectiveness slide keeps the gray card + two-column layout;
   Quality of Life and Safety slides render in their own native styling. */
.slider__slide[data-slide="Effectiveness"] {
    flex-direction: row;
    gap: 64px;
    background: #f5f5f5;
    border-radius: 12px;
    overflow: hidden;
}

.slider__slide[data-slide="Effectiveness"].is-active {
    display: flex;
}

.slider__slide[data-slide="Effectiveness"] header h2 {
    color: #5F6E87;
}

/* Sections nested as slides drop their own section padding/background so the
   slider's spacing applies and all three eyebrows align at the slide top. */
.slider__slide .outcomes-features,
.slider__slide .outcomes-safety {
    padding: 0;
    background: transparent;
}

/* The slider inner already provides the 72px gutter, so nested two-col
   wrappers drop their own padding/max-width to match the Effectiveness width. */
.slider__slide .two-col,
.slider__slide .two-col-equal {
    padding: 0;
    max-width: none;
}

/* All three tab headlines (the h3 in each slide's header) share one size. */
.slider__slide header h3 {
    font-size: 36px;
    line-height: 44px;
}

.outcomes-features .two-col__left {
    flex: 350;
}

.slider__paragraph {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.slider__paragraph a {
    width: fit-content;
    margin-bottom: 2px;
    margin-top: 50px;
}

.slider__nav {
    display: flex;
    justify-content: center;
    border-bottom: 2px solid var(--color-border);
    /* Sticky tab bar: pins to the top of the viewport (the site header scrolls away)
       and stays put until the slider container scrolls past. Full-width + matching bg
       so the content scrolling behind it can't peek around the tabs. */
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--gray-100);
    margin-top: 100px; /* was padding-top — margin keeps this gap out of the sticky box */
}

.slider__nav button {
    color: #5F6E87;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 10%;
    text-transform: uppercase;
    appearance: none;
    cursor: pointer;
    border: none;
    background: transparent;
    padding: 16px 24px;
    white-space: nowrap;
    flex-shrink: 0;
}

.slider__btn--active {
    position: relative;
}

.slider__btn--active:after {
    content:'';
    position: absolute;
    width: 100%;
    height: 6px;
    background: #5F6E87;
    left: 0;
    bottom: -2px;
}

@media (max-width: 900px) {
    .outcomes-slider__inner {
        padding: 0 24px;
    }

    .slider__nav {
        width: calc(100% + 48px);
        margin-left: -24px;
        margin-right: -24px;
        justify-content: space-between;
        gap: 8px;
    }

    .slider__nav button {
        padding: 16px 8px;
        font-size: 14px;
        letter-spacing: 0.08em;
        flex: 1 1 auto;
        text-align: center;
    }

    .slider__slide[data-slide="Effectiveness"] {
        flex-direction: column;
    }

    .slider__slide[data-slide="Effectiveness"] .col {
        flex: initial;
    }
}

/* ==========================================================================
   benefits — Hero
   ========================================================================== */

.benefits-hero {
    width: 100%;
    /* background: linear-gradient(176.04deg, var(--brand-dark-blue) -19.75%, var(--brand-teal) 107.1%); */
    background: linear-gradient(45deg, #82d3ed, #1dbbe6);
    display: flex;
    position: relative;
    overflow: hidden;
}

.benefits-hero__image {
    width: 65%;
    max-width: 980px;
    height: auto;
    max-height: 510px;
    position: absolute;
    right: -20%;
    bottom: -5%;
    z-index: 1;
}

.benefits-hero__image--mobile {
    display: none;
}

@media (max-width: 1045px) {
    .benefits-hero__image {
        right: -24%;
    }
}

.benefits-hero__inner {
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    padding: 100px 72px;
    display: flex;
    flex-direction: column;
    z-index: 2;
}

.benefits-hero__inner header {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    max-width: 520px;
}

.benefits-hero__inner header h1 {
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-white);
    margin-bottom: 0;
}

.benefits-hero__inner header h2 {
    font-weight: 400;
    font-size: 60px;
    line-height: 72px;
    letter-spacing: -2%;
    color: var(--color-white);
    text-transform: initial;
    margin-bottom: 0;
}

.benefits-hero__inner header h3 {
    font-weight: 300;
    font-size: 20px;
    line-height: 30px;
    letter-spacing: 0%;
    color: var(--color-white);
    margin-bottom: 0;
}

.benefits-hero__pattern {
    color: var(--color-white);
    background-image: radial-gradient(circle, currentColor 2px, transparent 2px);
    background-size: 24px 24px;
    background-position: 12px 12px;
    z-index: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    opacity: 0.2;
    /* Fade the dots toward the bottom so the pattern is weighted to the top. */
    -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 85%);
    mask-image: linear-gradient(to bottom, #000 40%, transparent 85%);
}

@media (max-width: 980px) {
    .benefits-hero__inner {
        padding: 70px 24px 0;
        align-items: center;
        text-align: center;
    }
    .benefits-hero__inner header h2 {
        font-size: 36px;
        line-height: 44px;
    }
    .benefits-hero__image {
        position: static;
        width: 140%;
        max-width: none;
        max-height: none;
        align-self: flex-start;
        margin-top: 56px;
        margin-bottom: -40px;
        margin-left: 30px;
    }
    .benefits-hero__image--desktop {
        display: none;
    }
    .benefits-hero__image--mobile {
        display: block;
    }
}

/* ==========================================================================
   benefits — Videos
   ========================================================================== */

.benefits-videos {
    background: var(--gray-100);
    position: relative;
}

.benefits-videos .video-card {
    flex-direction: column;
    text-align: center;
    height: 100%;
    margin-bottom: 0;
    margin-top: 0;
}

.benefits-videos .video-card .video-card__thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
}

.benefits-videos .video-card .video-card__thumb .video-thumb__play {
    width: auto;
    height: 23px;
}

.benefits-videos .video-card .video-card__copy {
    justify-content: center;
}

.video-card__quote {
    padding: 8px 0 24px;
}

.video-card__quote .dre-testimonial__attr {
    font-weight: 400;
}

.video-card__thumb--morrell {
    background-image: url('../images/dr-martha-morrell.png');
}

.video-card__thumb--expert {
    background-image: url('../images/thumb-expert-discusses-rns.png');
}

.video-card__thumb--kaye-alt {
    background-image: url('../images/thumb-dr-kaye-alt.png');
}

.video-card__thumb--morrell-alt {
    background-image: url('../images/dr-martha-morrell-alt.png');
}

.video-card__thumb--rolston-alt {
    background-image: url('../images/thumb-john-rolston-alt.png');
}

.benefits-videos__inner {
    max-width: 960px;
    width: 100%;
    margin: 0 auto;
    padding: 100px 0;
    z-index: 1;
    position: relative;
}

.benefits-videos__inner .two-col-equal {
    gap: 32px;
    padding: 0;
}

@media (max-width: 900px) {
    .benefits-videos__inner .two-col-equal {
        padding: 0 24px;
    }
    .benefits-videos__inner {
        padding: 50px 0;
    }
    .benefits-videos--last .benefits-videos__inner {
        padding-bottom: 150px;
    }
}

/* ==========================================================================
   benefits — Effects, triggers, cycles
   ========================================================================== */

.beneficts-effects {
    background: var(--gray-100);
    padding: 100px 0;
    position: relative;
    z-index: 2;
}

@media (max-width: 900px) {
    .beneficts-effects {
        padding: 50px 0;
    }
}

.beneficts-effects .two-col .two-col__left >div {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.beneficts-effects .two-col .two-col__left >div * {
    margin-bottom: 0;
}

.beneficts-effects .two-col .two-col__left >div header h2 {
    font-weight: 500;
    font-size: 30px;
    line-height: 38px;
    letter-spacing: 0%;
    text-transform: initial;
    color: var(--gray-900);
    margin-bottom: 32px;
}

.beneficts-effects .two-col .two-col__left >div header h3 {
    font-weight: 300;
    font-size: 20px;
    line-height: 30px;
    letter-spacing: 0%;
}

.beneficts-effects .two-col .two-col__left >div p {
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    letter-spacing: 0%;
    font-style: italic;
}

/* ==========================================================================
   benefits — features
   ========================================================================== */

.benefits-features {
    background: var(--color-white);
}

.benefits-features .benefits-features__inner {
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    padding: 100px 0;
}

@media (max-width: 900px) {
    .benefits-features .benefits-features__inner {
        padding: 50px 0;
    }
}

.benefits-features .benefits-features__inner .two-col-equal {
    gap: 16px;
}

.benefits-features .benefits-features__inner .two-col-equal .col {
    gap: 50px;
    display: flex;
    flex-direction: column;
}

/* Mobile: each label sits closer to its own card (and further from the card above),
   so "VNS" reads as belonging to the card below it. */
@media (max-width: 900px) {
    .benefits-features .benefits-features__inner .two-col-equal {
        gap: 48px;
    }
    .benefits-features .benefits-features__inner .two-col-equal .col {
        gap: 24px;
    }
}

.benefits-features .benefits-features__inner .two-col-equal .col header h2 {
    font-weight: 500;
    font-size: 24px;
    line-height: 32px;
    letter-spacing: 0%;
    text-align: center;
    margin-bottom: 0;
}

.benefits-features .benefits-features__inner .two-col-equal .col div {
    gap: 8px;
    background: var(--gray-100);
    padding: 32px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.benefits-features .benefits-features__inner .two-col-equal .col div h3 {
    font-weight: 500;
    font-size: 24px;
    line-height: 32px;
    letter-spacing: 0%;
    text-align: center;
}
.benefits-features .benefits-features__inner .two-col-equal .col div p {
    font-weight: 300;
}


/* ==========================================================================
   benefits — title
   ========================================================================== */

.benefits-title {
    background: var(--gray-100);
}

.benefits-title__inner {
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    padding: 0 72px;
    text-align: center;
    padding-top: 100px;
}
.benefits-title__inner h2 {
    font-weight: 400;
    font-size: 48px;
    line-height: 60px;
    letter-spacing: -5%;
    margin-bottom: 0;
    text-transform: initial;
    color: var(--brand-blue-black);
    position: relative;
    display: inline-block;
    z-index: 1;
}

.benefits-title__inner h2 .anim-bar {
    position: absolute;
    left: 0;
    bottom: 1px;
    width: 100%;
    height: 10px;
    background: #BFE7F1;
    z-index: -1;
    transform-origin: 0% 50%;
}

@media (max-width: 900px) {
    .benefits-title__inner {
        padding: 94px 24px 40px;
    }
    /* Headline wraps on mobile, so the single animated bar can't underline every
       line — use a per-line gradient highlight (clones onto each line) instead. */
    .benefits-title__inner h2 {
        font-size: 40px;
        line-height: 50px;
        display: inline;
        background-image: linear-gradient(transparent 82%, #BFE7F1 82%, #BFE7F1 98%, transparent 98%);
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
    }
    .benefits-title__inner h2 .anim-bar {
        display: none;
    }
}

.img {
    width: 100%;
    height: auto;
}



.pattern {
    color: var(--gray-900);
    background-image: radial-gradient(circle, currentColor 2px, transparent 2px);
    background-size: 24px 24px;
    background-position: 12px 12px;
    z-index: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    opacity: 0.075;
}

.pattern__gradient {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 0%, var(--gray-100) 100%);
}

/* ==========================================================================
   Nav dropdown (Benefits → Confident Care / ECoG Assistant)
   ========================================================================== */

.main-nav__links .has-dropdown {
    position: relative;
}

.main-nav__dropdown-trigger {
    background: transparent;
    border: 0;
    padding: 8px 12px;
    cursor: pointer;
    font-family: 'Gotham', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    color: var(--color-nav-link);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 8px;
    transition: background-color 150ms ease;
}

/* Active page (Benefits → Confident Care) — matches top-level nav active style */
.has-dropdown.is-active .main-nav__dropdown-trigger,
.main-nav__dropdown-trigger:hover {
    background: #F5F5F5;
}

.main-nav__dropdown-trigger img {
    transition: transform 200ms ease;
}

.has-dropdown:hover .main-nav__dropdown-trigger img,
.has-dropdown.is-open .main-nav__dropdown-trigger img {
    transform: rotate(180deg);
}

.main-nav__dropdown {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 336px;
    background: #FFFFFF;
    border: 1px solid #E9EAEB;
    border-radius: 16px;
    padding: 12px;
    display: none;
    z-index: 100;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
}

/* Invisible bridge — keeps :hover alive across the gap between trigger and panel. */
.main-nav__dropdown::before {
    content: '';
    position: absolute;
    top: -14px;
    left: 0;
    right: 0;
    height: 14px;
}

.has-dropdown:hover .main-nav__dropdown,
.has-dropdown.is-open .main-nav__dropdown {
    display: block;
}

.main-nav__dropdown-item {
    display: block;
    padding: 18px 20px;
    border-radius: 12px;
    text-decoration: none;
    transition: background-color 150ms ease;
}

.main-nav__dropdown-item:hover,
.main-nav__dropdown-item.is-active {
    background: #F5F5F5;
}

.main-nav__dropdown-item-title {
    display: block;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: #181D27;
}

.main-nav__dropdown-item-sub {
    display: block;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #535862;
    margin-top: 2px;
}

/* Mobile drawer — Benefits group with two sub-items */
.nav-drawer__group details {
    width: 100%;
}

.nav-drawer__group summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Match the sibling drawer links exactly */
    font-family: 'Gotham', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: var(--gray-900);
}

.nav-drawer__group summary::-webkit-details-marker {
    display: none;
}

.nav-drawer__group summary::after {
    content: '';
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 200ms ease;
    margin-right: 6px;
}

.nav-drawer__group details[open] summary::after {
    transform: rotate(-135deg);
}

/* Active state: matches .nav-drawer__links a.is-active */
.nav-drawer__group.is-active summary,
.nav-drawer__group summary:hover {
    color: var(--brand-button-blue);
}

.nav-drawer__sublinks {
    list-style: none;
    margin: 16px 0 0;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: #FFFFFF;
    border: 1px solid #E9EAEB;
    border-radius: 16px;
}

.nav-drawer__subitem {
    display: block;
    padding: 18px 20px;
    border-radius: 12px;
    text-decoration: none;
    transition: background-color 150ms ease;
}

.nav-drawer__subitem:hover,
.nav-drawer__subitem.is-active {
    background: #F5F5F5;
}

.nav-drawer__subitem-title {
    display: block;
    font-family: 'Gotham', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: #181D27;
}

.nav-drawer__subitem-sub {
    display: block;
    font-family: 'Gotham', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #535862;
    margin-top: 2px;
}

/* ==========================================================================
   Suppress the legacy "Mobile Menu" plugin (cssmobmenu) on the 2026 pages.
   It injects a mobile bar via a WP hook, so it reaches our templates even
   though they bypass Salient's header. Our pages have their own .nav-drawer,
   so hide the plugin's bar/overlay/panels. style.css only loads on the 2026
   templates, so this is scoped to our pages — the rest of the site is unaffected.
   ========================================================================== */
.mob-menu-header-holder,
.mobmenu-overlay,
.mobmenu-panel {
    display: none !important;
}

/* The plugin also pushes <body> down by the (now-hidden) 50px fixed bar via a
   body class. Remove that reserved gap so our pages start at the very top. */
body.mob-menu-overlay,
body.mob-menu-slideout,
body.mob-menu-slideout-over,
body.mob-menu-slideout-top {
    padding-top: 0 !important;
}

/* iPhone SE & small phones (~375px and under): the 3 Outcomes slider tabs
   (EFFECTIVENESS / QUALITY OF LIFE / SAFETY) overflow and clip "Safety".
   Shrink the type, tracking, and side padding so all three fit on one row. */
@media (max-width: 400px) {
    .slider__nav {
        gap: 4px;
    }
    .slider__nav button {
        padding: 16px 5px;
        font-size: 12px;
        letter-spacing: 0.02em;
    }
}