.hn-preview {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #111923;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    color: #fff;
    font: 13px Gilroy-SemiBold, Arial, sans-serif;
}

.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;
}

.hn-preview__inner,
.hn-preview__links,
.hn-preview__label,
.hn-heading,
.hn-rail-actions,
.hn-editorial-feed__top,
.hn-tabs {
    display: flex;
    align-items: center;
}

.hn-preview__inner {
    justify-content: space-between;
    gap: 24px;
    padding-top: 12px;
    padding-bottom: 12px;
}

.hn-preview__label {
    gap: 9px;
    flex: 0 0 auto;
    color: #c8d2d6;
}

.hn-preview__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4bc888;
    box-shadow: 0 0 0 4px rgba(75, 200, 136, .14);
}

.hn-preview__hint {
    display: none;
    color: #9aaca6;
    font: 11px Gilroy-Regular, Arial, sans-serif;
}

.hn-preview__links {
    gap: 5px;
    overflow-x: auto;
    scrollbar-width: none;
}

.hn-preview__links a {
    padding: 10px 13px;
    color: #d7e0df;
    white-space: nowrap;
    border-radius: 7px;
    transition: background .2s, color .2s;
}

.hn-preview__links a:hover,
.hn-preview__links a[aria-current="page"] {
    background: #39b978;
    color: #fff;
}

.home-news {
    padding: 64px 0 80px;
    color: #151c24;
    background: #fff;
    scroll-margin-top: 72px;
}

.home-news .container {
    padding-left: 20px;
    padding-right: 20px;
}

.hn-heading {
    justify-content: space-between;
    align-items: end;
    gap: 20px;
    margin-bottom: 28px;
}

.hn-kicker {
    display: block;
    color: #2eaf70;
    font: 12px Gilroy-SemiBold, Arial, sans-serif;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.hn-heading h2,
.hn-issue h2 {
    font: 42px/1.1 Gilroy-ExtraBold, Arial, sans-serif;
    letter-spacing: -.025em;
    margin: 0;
}

.hn-text-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    color: #208e59;
    font: 15px Gilroy-SemiBold, Arial, sans-serif;
    padding-bottom: 4px;
}

.hn-text-link span {
    font-size: 21px;
    line-height: 1;
}

.hn-lead-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(320px, 1fr);
    gap: 20px;
}

.hn-lead-story,
.hn-editorial-hero {
    display: block;
    position: relative;
    min-height: 495px;
    overflow: hidden;
    border-radius: 16px;
    color: #fff;
    isolation: isolate;
}

.hn-lead-story img,
.hn-editorial-hero img,
.hn-card__image img,
.hn-lead-list__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hn-lead-story img,
.hn-editorial-hero img {
    position: absolute;
    inset: 0;
    transition: transform .35s;
}

.hn-lead-story:hover img,
.hn-editorial-hero:hover img,
.hn-card:hover img {
    transform: scale(1.035);
}

.hn-lead-story__shade,
.hn-editorial-hero__shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(9, 19, 28, .02) 15%, rgba(9, 19, 28, .88) 100%);
}

.hn-lead-story__content,
.hn-editorial-hero__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: absolute;
    left: 36px;
    right: 36px;
    bottom: 34px;
    gap: 15px;
}

.hn-pill {
    display: inline-block;
    padding: 9px 12px 7px;
    border-radius: 6px;
    background: #37b776;
    color: #fff;
    font: 11px Gilroy-SemiBold, Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: .09em;
}

.hn-lead-story__title {
    font: 32px/1.17 Gilroy-ExtraBold, Arial, sans-serif;
    max-width: 620px;
}

.hn-lead-story__date,
.hn-card__date,
.hn-lead-list__item small,
.hn-editorial-hero__content small,
.hn-editorial-side small {
    color: #929ba2;
    font: 12px Gilroy-Regular, Arial, sans-serif;
}

.hn-lead-story__date,
.hn-editorial-hero__content small {
    color: rgba(255, 255, 255, .8);
}

.hn-lead-list {
    display: grid;
    grid-template-rows: repeat(4, minmax(0, 1fr));
    border: 1px solid #e7edef;
    border-radius: 16px;
    padding: 6px 19px;
    background: #fff;
}

.hn-lead-list__item {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    align-items: center;
    gap: 15px;
    padding: 11px 0;
    color: #17232b;
}

.hn-lead-list__item + .hn-lead-list__item {
    border-top: 1px solid #e9eeef;
}

.hn-lead-list__item img {
    height: 84px;
    border-radius: 8px;
}

.hn-lead-list__item strong,
.hn-lead-list__item small {
    display: block;
}

.hn-lead-list__item strong {
    font: 15px/1.25 Gilroy-SemiBold, Arial, sans-serif;
    margin-top: 7px;
}

.hn-issue {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    align-items: center;
    gap: 32px;
    margin-bottom: 60px;
    padding: 28px;
    border-radius: 18px;
    background: #f0f5f3;
}

.home-news--lead .hn-issue,
.home-news--showcase .hn-issue,
.home-news--editorial .hn-issue {
    margin-top: 32px;
    margin-bottom: 0;
}

.hn-issue__copy {
    padding: 15px 22px;
}

.hn-issue h2 {
    font-size: 31px;
    margin-bottom: 14px;
}

.hn-issue p {
    color: #536069;
    font: 17px/1.45 Gilroy-Regular, Arial, sans-serif;
    margin-bottom: 23px;
}

.hn-issue__player {
    aspect-ratio: 16 / 9;
    min-height: 240px;
    overflow: hidden;
    border-radius: 12px;
    background: #131a21;
}

.hn-showcase-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.hn-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    color: #17212a;
}

.hn-card__image {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    background: #dde5e4;
    aspect-ratio: 16 / 9;
}

.hn-card__image img {
    transition: transform .3s;
}

.hn-card__video {
    position: absolute;
    left: 15px;
    bottom: 15px;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding-left: 3px;
    background: #38b978;
    color: #fff;
    border-radius: 50%;
    font-size: 13px;
}

.hn-card__content,
.hn-card__date,
.hn-card__title {
    display: block;
}

.hn-card__content {
    padding: 14px 2px 0;
}

.hn-card__title {
    font: 18px/1.3 Gilroy-SemiBold, Arial, sans-serif;
    margin-top: 7px;
}

.hn-card--feature {
    grid-row: span 2;
}

.hn-card--feature .hn-card__image {
    flex: 1;
    min-height: 340px;
    aspect-ratio: auto;
}

.hn-card--feature .hn-card__title {
    font: 27px/1.2 Gilroy-ExtraBold, Arial, sans-serif;
}

.home-news--rail {
    background: #f2f6f5;
}

.hn-rail-actions {
    gap: 8px;
}

.hn-rail-actions button {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid #b7c9c0;
    border-radius: 50%;
    color: #1f4e39;
    background: #fff;
    cursor: pointer;
    font: 20px Arial, sans-serif;
}

.hn-rail-actions .hn-text-link {
    margin-left: 14px;
}

.hn-rail {
    display: grid;
    grid-auto-columns: minmax(260px, 30%);
    grid-auto-flow: column;
    gap: 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-bottom: 18px;
}

.hn-card--rail {
    scroll-snap-align: start;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(13, 43, 29, .05);
}

.hn-card--rail .hn-card__image {
    border-radius: 0;
}

.hn-card--rail .hn-card__content {
    padding: 18px 20px 25px;
}

.hn-card--rail .hn-card__title {
    font: 20px/1.27 Gilroy-SemiBold, Arial, sans-serif;
}

.hn-rail-hint {
    margin-top: 12px;
    color: #788780;
    font: 12px Gilroy-Regular, Arial, sans-serif;
}

.home-news--editorial {
    background: #fbfcfc;
}

.hn-editorial-top {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(290px, .8fr);
    gap: 20px;
}

.hn-editorial-hero {
    min-height: 450px;
}

.hn-editorial-hero__content strong {
    font: 31px/1.16 Gilroy-ExtraBold, Arial, sans-serif;
}

.hn-editorial-side {
    display: flex;
    flex-direction: column;
    padding: 25px 27px;
    border-radius: 16px;
    color: #fff;
    background: #17232b;
}

.hn-editorial-side a {
    display: grid;
    grid-template-columns: 30px 1fr;
    gap: 6px 12px;
    padding: 18px 0;
    color: #fff;
}

.hn-editorial-side a + a {
    border-top: 1px solid rgba(255, 255, 255, .13);
}

.hn-editorial-side a span {
    color: #4bc888;
    font: 18px Gilroy-ExtraBold, Arial, sans-serif;
}

.hn-editorial-side a strong {
    font: 17px/1.25 Gilroy-SemiBold, Arial, sans-serif;
}

.hn-editorial-side a small {
    grid-column: 2;
}

.hn-editorial-feed {
    margin-top: 50px;
}

.hn-editorial-feed__top {
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid #dce5e1;
}

.hn-editorial-feed h3 {
    font: 27px Gilroy-ExtraBold, Arial, sans-serif;
    margin: 0;
}

.hn-tabs {
    gap: 4px;
}

.hn-tabs button {
    padding: 9px 13px;
    color: #53645c;
    cursor: pointer;
    border-radius: 6px;
    font: 14px Gilroy-SemiBold, Arial, sans-serif;
}

.hn-tabs button[aria-selected="true"] {
    background: #2fad6d;
    color: #fff;
}

.hn-tab-panel {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    padding-top: 24px;
}

.hn-tab-panel[hidden] {
    display: none;
}

.hn-card--editorial .hn-card__title {
    font-size: 15px;
}

/* Client-requested homepage: news and the full issue take the former TV carousel's place. */
.hn-client {
    margin-top: 58px;
    padding: 28px 30px 34px;
    border: 1px solid rgba(255, 255, 255, .19);
    border-radius: 20px;
    background: rgba(13, 23, 31, .88);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .2);
    color: #fff;
    scroll-margin-top: 24px;
}

.hn-client__heading,
.hn-client__section-title {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
}

.hn-client__heading {
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(255, 255, 255, .19);
}

.hn-client__eyebrow {
    display: block;
    margin-bottom: 6px;
    color: #62d99b;
    font: 12px Gilroy-SemiBold, Arial, sans-serif;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.hn-client__heading h2 {
    margin: 0;
    color: #fff;
    font: 38px/1.1 Gilroy-ExtraBold, Arial, sans-serif;
}

.hn-client__heading h2 span {
    color: #4bc888;
}

.hn-client__heading a,
.hn-client__section-title a {
    flex: 0 0 auto;
    color: #68dea1;
    font: 14px Gilroy-SemiBold, Arial, sans-serif;
}

.hn-client__heading a span,
.hn-client__section-title a span {
    margin-left: 6px;
    font-size: 19px;
}

.hn-client__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr);
    gap: 34px;
    padding-top: 23px;
}

.hn-client__grid > *,
.hn-client__play-button,
.hn-client__feed-copy {
    min-width: 0;
}

.hn-client__section-title {
    min-height: 35px;
    margin-bottom: 16px;
    color: #fff;
    font: 17px Gilroy-SemiBold, Arial, sans-serif;
}

.hn-client__player,
.hn-client__poster {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 0;
    overflow: hidden;
    border-radius: 10px;
    background: #080d12;
}

.hn-client__player {
    height: 0;
    padding-top: 56.25%;
    aspect-ratio: auto;
}

.hn-client__player iframe {
    position: absolute;
    inset: 0;
}

.hn-client__play-button {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    height: 100%;
    max-width: none;
    padding: 0;
    overflow: hidden;
    color: #fff;
    cursor: pointer;
    text-align: center;
    font: 16px Gilroy-Regular, Arial, sans-serif;
}

.hn-client__play-button > img,
.hn-client__poster > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hn-client__play-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .08), rgba(0, 0, 0, .73));
}

.hn-client__play-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    margin-bottom: 24px;
}

.hn-client__play-content strong {
    font: 22px Gilroy-SemiBold, Arial, sans-serif;
}

.hn-client__play-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    padding-left: 4px;
    border-radius: 50%;
    background: #39b978;
}

.hn-client__play-content small {
    color: rgba(255, 255, 255, .85);
}

.hn-client__poster > span {
    position: absolute;
    left: 24px;
    bottom: 22px;
    color: #fff;
    font: 18px Gilroy-SemiBold, Arial, sans-serif;
    text-shadow: 0 2px 6px #111;
}

.hn-client__issue-name {
    display: block;
    margin-top: 14px;
    color: #fff;
    font: 21px/1.25 Gilroy-SemiBold, Arial, sans-serif;
}

.hn-client__date,
.hn-client__feed-item time {
    display: block;
    margin-top: 7px;
    color: #a5b4bb;
    font: 12px Gilroy-Regular, Arial, sans-serif;
}

.hn-client__feed-item {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    min-height: 82px;
    padding: 9px 0;
    color: #fff;
}

.hn-client__feed-item + .hn-client__feed-item {
    border-top: 1px solid rgba(255, 255, 255, .14);
}

.hn-client__feed-image {
    width: 96px;
    height: 64px;
    overflow: hidden;
    border-radius: 6px;
    background: #26333b;
}

.hn-client__feed-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hn-client__feed-copy strong {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font: 14px/1.27 Gilroy-SemiBold, Arial, sans-serif;
}

.hn-client__empty {
    color: #bcc9cf;
    font: 15px/1.5 Gilroy-Regular, Arial, sans-serif;
}

.home-live {
    padding: 45px 0 52px;
    background: #f4f7f6;
}

.home-live .in_live {
    margin: 0;
    padding: 0;
    border: 0;
}

.home-live .in_live .header {
    margin-bottom: 20px;
    color: #17242b;
    font: 30px Gilroy-ExtraBold, Arial, sans-serif;
}

.home-live .in_live .header .show {
    padding-right: 20px;
    color: #188c55;
    font: 15px Gilroy-SemiBold, Arial, sans-serif;
}

.home-live .in_live .header .show svg {
    right: 0;
    width: 13px;
    height: 13px;
}

.home-live .in_live .header .show path {
    fill: #188c55;
}

.home-live__items {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(320px, 47%);
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 5px 0 15px;
}

.home-live__items .in_live_item {
    display: block;
    width: 100%;
    min-height: 175px;
    scroll-snap-align: start;
    box-shadow: 0 8px 25px rgba(20, 46, 38, .08);
}

@media (max-width: 1020px) {
    .hn-client__grid {
        grid-template-columns: minmax(0, 1.2fr) minmax(270px, 1fr);
        gap: 22px;
    }

    .hn-preview__inner {
        display: block;
    }

    .hn-preview__label {
        margin-bottom: 8px;
    }

    .hn-showcase-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hn-card--feature {
        grid-column: span 2;
        grid-row: auto;
        display: grid;
        grid-template-columns: 1.2fr 1fr;
        gap: 20px;
        align-items: center;
    }

    .hn-card--feature .hn-card__image {
        min-height: 260px;
    }

    .hn-tab-panel {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .hn-client {
        margin-top: 35px;
        padding: 20px 18px 24px;
        border-radius: 12px;
    }

    .hn-client__heading h2 {
        font-size: 29px;
    }

    .hn-client__grid {
        grid-template-columns: 1fr;
        gap: 29px;
    }

    .hn-client__section-title {
        align-items: start;
        font-size: 15px;
    }

    .hn-client__section-title a {
        font-size: 12px;
    }

    .hn-client__play-content {
        margin-bottom: 12px;
    }

    .hn-client__play-content small {
        font-size: 10px;
    }

    .home-live {
        padding: 35px 0 45px;
    }

    .home-live .in_live .header {
        font-size: 25px;
    }

    .home-live__items {
        grid-auto-columns: minmax(290px, 83%);
    }

    .hn-preview__hint {
        display: inline;
    }

    .home-news {
        padding: 42px 0 55px;
        scroll-margin-top: 98px;
    }

    .hn-heading {
        align-items: start;
    }

    .hn-heading h2 {
        font-size: 31px;
    }

    .hn-lead-grid,
    .hn-issue,
    .hn-editorial-top {
        grid-template-columns: 1fr;
    }

    .hn-lead-story,
    .hn-editorial-hero {
        min-height: 370px;
    }

    .hn-lead-list {
        grid-template-rows: auto;
    }

    .hn-issue {
        padding: 14px;
        gap: 10px;
    }

    .hn-issue__copy {
        padding: 16px 10px;
    }

    .hn-issue__player {
        min-height: 200px;
    }

    .hn-showcase-grid {
        gap: 15px;
    }

    .hn-card--feature {
        display: flex;
        gap: 0;
    }

    .hn-card--feature .hn-card__image {
        min-height: 0;
        aspect-ratio: 16 / 9;
    }

    .hn-card--feature .hn-card__title {
        font-size: 23px;
    }

    .hn-rail {
        grid-auto-columns: minmax(260px, 75%);
    }

    .hn-tab-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hn-editorial-feed__top {
        display: block;
    }

    .hn-tabs {
        overflow-x: auto;
        margin-top: 15px;
    }
}

@media (max-width: 480px) {
    .hn-preview__links a {
        padding: 9px 10px;
        font-size: 12px;
    }

    .hn-heading {
        display: block;
    }

    .hn-heading .hn-text-link {
        margin-top: 15px;
    }

    .hn-lead-story__content,
    .hn-editorial-hero__content {
        left: 20px;
        right: 20px;
        bottom: 20px;
    }

    .hn-lead-story__title,
    .hn-editorial-hero__content strong {
        font-size: 25px;
    }

    .hn-issue h2 {
        font-size: 27px;
    }

    .hn-showcase-grid {
        grid-template-columns: 1fr;
    }

    .hn-card--feature {
        grid-column: auto;
    }

    .hn-rail-actions .hn-text-link {
        margin-left: 7px;
    }

    .hn-tab-panel {
        grid-template-columns: 1fr;
    }
}