/*
 * StriveX homepage (builder-driven) — section styles.
 *
 * Rules for this file (see the homepage builder contract):
 * - Builder overrides are compiled as `#hp-<uid> [data-hp="<element>"]`, so every selector here
 *   stays at or below (0,2,1) specificity for properties the builder can set, and puts those
 *   properties on the element that carries data-hp.
 * - Overlay strength is var(--hp-overlay-opacity, <design default>).
 * - Theme variables (--hp-brand, --hp-ink, --hp-font-heading, …) are set on .hp-theme inline.
 * - Breakpoints: tablet <= 991.98px, mobile <= 767.98px.
 */

/* Shared page gutter: identical in the header, homepage, footer and category pages so all
   content lines up with the logo (values follow the header's breakpoints). */
:root {
    --hp-gutter: clamp(18px, 3.15vw, 58px);
}

@media (max-width: 1350px) {
    :root {
        --hp-gutter: 24px;
    }
}

@media (max-width: 690px) {
    :root {
        --hp-gutter: 14px;
    }
}

/* ------------------------------------------------------------------ base */
.hp-page {
    --hp-cream: #f7f2e4;
    --hp-paper: #f9f3e5;
    --hp-soft: #fbf3f3;
    --hp-focus: #f98487;
    font-family: var(--hp-font-body, 'Poppins', Arial, sans-serif);
    color: var(--hp-ink, #17191c);
}

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

.hp-section {
    position: relative;
    padding-top: var(--hp-section-space, 88px);
    padding-bottom: var(--hp-section-space, 88px);
}

.hp-container {
    position: relative;
    z-index: 1;
    width: min(100%, calc(var(--hp-container, 1440px) + 2 * var(--hp-gutter, 24px)));
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--hp-gutter, 24px);
    padding-right: var(--hp-gutter, 24px);
}

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

.hp-anchor {
    display: block;
    height: 0;
    scroll-margin-top: 72px;
}

.hp-accent {
    color: var(--hp-brand, #f20519);
}

.hp-icon {
    display: inline-block;
    flex: none;
    vertical-align: middle;
}

.hp-page a:focus-visible,
.hp-page button:focus-visible {
    outline: 3px solid var(--hp-focus);
    outline-offset: 3px;
}

.hp-rich p {
    margin: 0 0 0.85em;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}

.hp-rich p:last-child {
    margin-bottom: 0;
}

.hp-preview-pill {
    position: fixed;
    bottom: 12px;
    left: 12px;
    z-index: 100000;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(23, 25, 28, 0.88);
    color: #fff;
    font: 600 11px/1.2 var(--hp-font-body, 'Poppins', sans-serif);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
    pointer-events: none;
}

/* Section background photo + tint (top picks, membership) */
.hp-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: #111;
}

.hp-bg__img {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
}

.hp-bg__shade {
    position: absolute;
    inset: 0;
    background-color: #111;
    opacity: var(--hp-overlay-opacity, 0.9);
}

.hp-on-dark {
    color: #fff;
}

/* ------------------------------------------------------------------ buttons (premium .btn family) */
.hp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 50px;
    padding: 0 23px;
    border: 2px solid transparent;
    border-radius: var(--hp-btn-radius, 8px);
    font-family: var(--hp-font-body, 'Poppins', sans-serif);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.055em;
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    transition:
        border-color 0.3s ease-in-out,
        color 0.3s ease-in-out,
        box-shadow 0.3s ease-in-out;
}

.hp-btn:hover {
    text-decoration: none;
}

.hp-btn__icon {
    font-size: 1.3em;
    line-height: 1;
}

/* Split fill (same as the cart's checkout button): two halves meet in the middle and slide out
   to the sides on hover. --hp-btn-fill is the fill colour; the builder's background colour sets
   it too, and its hover colours arrive as --hp-btn-hover-color / --hp-btn-hover-bg. */
.hp-btn--primary,
.hp-btn--dark,
.hp-btn--outline-light,
.hp-btn--outline-dark {
    position: relative;
    z-index: 1;
    overflow: hidden;
    background-color: transparent;
}

.hp-btn--primary::before,
.hp-btn--primary::after,
.hp-btn--dark::before,
.hp-btn--dark::after,
.hp-btn--outline-light::before,
.hp-btn--outline-light::after,
.hp-btn--outline-dark::before,
.hp-btn--outline-dark::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: -1;
    width: 51%;
    background-color: var(--hp-btn-fill);
    transition: width 0.3s ease-in-out;
}

.hp-btn--primary::before,
.hp-btn--dark::before,
.hp-btn--outline-light::before,
.hp-btn--outline-dark::before {
    left: 0;
}

.hp-btn--primary::after,
.hp-btn--dark::after,
.hp-btn--outline-light::after,
.hp-btn--outline-dark::after {
    right: 0;
}

/* Filled at rest → outline on hover. */
.hp-btn--primary {
    --hp-btn-fill: var(--hp-brand, #f20519);
    border-color: var(--hp-btn-fill);
    color: #fff;
}

.hp-btn--dark {
    --hp-btn-fill: var(--hp-ink, #17191c);
    border-color: var(--hp-btn-fill);
    color: #fff;
}

.hp-btn--primary:hover,
.hp-btn--primary:focus-visible,
.hp-btn--dark:hover,
.hp-btn--dark:focus-visible {
    /* !important so a builder background/text colour can't hide the label once the fill parts. */
    background-color: var(--hp-btn-hover-bg, transparent) !important;
    color: var(--hp-btn-hover-color, var(--hp-btn-fill)) !important;
}

.hp-btn--primary:hover::before,
.hp-btn--primary:hover::after,
.hp-btn--primary:focus-visible::before,
.hp-btn--primary:focus-visible::after,
.hp-btn--dark:hover::before,
.hp-btn--dark:hover::after,
.hp-btn--dark:focus-visible::before,
.hp-btn--dark:focus-visible::after {
    width: 0;
}

/* Outline at rest → the halves close in from the sides on hover. */
.hp-btn--outline-light,
.hp-btn--outline-dark {
    background-color: transparent;
}

.hp-btn--outline-light::before,
.hp-btn--outline-light::after,
.hp-btn--outline-dark::before,
.hp-btn--outline-dark::after {
    width: 0;
}

.hp-btn--outline-light {
    --hp-btn-fill: #fff;
    border-color: rgba(255, 255, 255, 0.63);
    color: #fff;
}

.hp-btn--outline-light:hover,
.hp-btn--outline-light:focus-visible {
    border-color: #fff;
    color: var(--hp-btn-hover-color, var(--hp-ink, #17191c)) !important;
}

.hp-btn--outline-dark {
    --hp-btn-fill: var(--hp-ink, #17191c);
    border-color: var(--hp-ink, #17191c);
    color: var(--hp-ink, #17191c);
}

.hp-btn--outline-dark:hover,
.hp-btn--outline-dark:focus-visible {
    color: var(--hp-btn-hover-color, #fff) !important;
}

.hp-btn--outline-light:hover::before,
.hp-btn--outline-light:hover::after,
.hp-btn--outline-light:focus-visible::before,
.hp-btn--outline-light:focus-visible::after,
.hp-btn--outline-dark:hover::before,
.hp-btn--outline-dark:hover::after,
.hp-btn--outline-dark:focus-visible::before,
.hp-btn--outline-dark:focus-visible::after {
    width: 51%;
}

@media (prefers-reduced-motion: reduce) {
    .hp-btn,
    .hp-btn::before,
    .hp-btn::after {
        transition: none;
    }
}

.hp-btn--link {
    min-height: 0;
    padding: 0 0 5px;
    border: 0;
    border-bottom: 2px solid var(--hp-brand, #f20519);
    border-radius: 0;
    background-color: transparent;
    color: var(--hp-ink, #17191c);
    font-weight: 900;
    letter-spacing: 0.05em;
}

.hp-btn--link:hover,
.hp-btn--link:focus-visible {
    transform: none;
    color: var(--hp-brand, #f20519);
}

.hp-btn--link .hp-btn__icon {
    color: var(--hp-brand, #f20519);
}

.hp-on-dark .hp-btn--link {
    color: #fff;
}

/* ------------------------------------------------------------------ shared headings */
.hp-sec-title {
    margin-bottom: 44px;
    text-align: center;
}

.hp-sec-title__heading {
    margin: 0;
    font-family: var(--hp-font-heading, 'Roboto', sans-serif);
    font-size: 34px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--hp-ink, #17191c);
    overflow-wrap: break-word;
}

.hp-sec-title__heading::after {
    content: '';
    display: block;
    width: 60px;
    height: 2px;
    margin: 14px auto 0;
    background: var(--hp-brand, #f20519);
}

.hp-sec-title__sub {
    margin: 8px 0 0;
    font-size: 15px;
    line-height: 1.6;
    color: #999;
}

.hp-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 35px;
}

.hp-head__main {
    min-width: 0;
}

.hp-head__aside {
    display: flex;
    flex: 0 1 370px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 5px;
}

.hp-head__aside:empty {
    display: none;
}

.hp-head__intro {
    font-size: 14px;
    line-height: 1.7;
    color: #68635d;
}

.hp-on-dark .hp-head__intro {
    font-size: 13px;
    color: #ccc;
}

.hp-head .hp-btn {
    min-height: 42px;
    padding: 0 17px;
    font-size: 10px;
}

.hp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--hp-font-body, 'Poppins', sans-serif);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: #eae4da;
}

.hp-eyebrow::before {
    content: '';
    flex: none;
    width: 28px;
    height: 2px;
    background: var(--hp-brand, #f20519);
}

.hp-eyebrow--dark {
    color: #5d514c;
}

.hp-display {
    margin: 13px 0 0;
    font-family: var(--hp-font-heading, 'Roboto', sans-serif);
    font-size: clamp(46px, 5.8vw, 83px);
    font-weight: 900;
    line-height: 0.94;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: #fff;
    overflow-wrap: break-word;
}

.hp-display--red {
    color: var(--hp-brand, #f20519);
}

.hp-display--red .hp-accent {
    color: var(--hp-ink, #17191c);
}

/* Card hover behaviours (render-only "hover_effect") */
.hp-fx-lift:hover {
    transform: translateY(-4px);
}

/* ------------------------------------------------------------------ hero */
.hp-hero {
    display: grid;
    min-height: 640px;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
    background: #111;
    color: #fff;
}

.hp-hero__slides {
    display: grid;
    min-height: inherit;
}

.hp-hero__slide {
    position: relative;
    grid-area: 1 / 1;
    display: flex;
    align-items: center;
    min-height: inherit;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.9s ease,
        visibility 0s linear 0.9s;
}

.hp-hero__slide.is-active {
    z-index: 1;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.9s ease;
}

.hp-hero__media {
    position: absolute;
    inset: 0;
    margin: 0;
}

.hp-hero__media img {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
}

.hp-hero__video {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
}

.hp-hero__video.is-playing {
    opacity: 1;
}

.hp-hero__slides {
    position: relative; /* anchors the video behind every slide */
}

.hp-hero__shade {
    position: absolute;
    inset: 0;
    background-color: #000;
    -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.49) 50%, transparent 80%);
    mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.49) 50%, transparent 80%);
    opacity: var(--hp-overlay-opacity, 0.72);
    pointer-events: none;
}

.hp-hero--center .hp-hero__shade {
    -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, rgba(0, 0, 0, 0.75) 60%, rgba(0, 0, 0, 0.55) 100%);
    mask-image: radial-gradient(ellipse at center, #000 0%, rgba(0, 0, 0, 0.75) 60%, rgba(0, 0, 0, 0.55) 100%);
}

.hp-hero .hp-container {
    z-index: 2;
}

.hp-hero__content {
    max-width: 620px;
    padding-top: 64px;
    padding-bottom: 88px;
    color: #fff;
}

.hp-hero--center .hp-hero__content {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.hp-hero__kicker {
    display: inline-block;
    margin-bottom: 18px;
    padding-left: 12px;
    border-left: 3px solid var(--hp-brand, #f20519);
    font-family: var(--hp-font-heading, 'Roboto', sans-serif);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #fff;
}

.hp-hero__heading {
    margin: 0 0 18px;
    font-family: var(--hp-font-heading, 'Roboto', sans-serif);
    font-size: 68px;
    font-weight: 900;
    line-height: 1.02;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    color: #fff;
    overflow-wrap: break-word;
}

.hp-hero__text {
    max-width: 480px;
    margin-bottom: 32px;
    font-size: 17px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
}

.hp-hero--center .hp-hero__text {
    margin-left: auto;
    margin-right: auto;
}

@keyframes hp-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.hp-hero--animate .is-active .hp-hero__content > * {
    animation: hp-up 0.8s both;
}

.hp-hero--animate .is-active .hp-hero__content > :nth-child(2) {
    animation-delay: 0.15s;
}

.hp-hero--animate .is-active .hp-hero__content > :nth-child(3) {
    animation-delay: 0.3s;
}

.hp-hero--animate .is-active .hp-hero__content > :nth-child(4) {
    animation-delay: 0.45s;
}

.hp-hero__dots {
    position: absolute;
    bottom: 24px;
    left: 50%;
    z-index: 3;
    display: flex;
    transform: translateX(-50%);
    color: #fff;
}

.hp-hero__dot {
    position: relative;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
}

.hp-hero__dot::before {
    content: '';
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.5;
    transition:
        transform 0.25s,
        opacity 0.25s;
}

.hp-hero__dot.is-active::before {
    background: transparent;
    box-shadow: inset 0 0 0 2px currentColor;
    opacity: 1;
    transform: scale(1.25);
}

.hp-hero__dot:hover::before {
    opacity: 0.85;
}

/* ------------------------------------------------------------------ categories (bento) */
.hp-categories {
    background: linear-gradient(180deg, #fff 0%, #f6f6f7 100%);
}

.hp-bento-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
}

.hp-bento-head__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hp-brand, #f20519);
}



/* Fills the row so the "Heading block" / heading alignment options have room to centre. */
.hp-bento-head__text {
    flex: 1 1 auto;
    min-width: 0;
}

.hp-bento-head__heading {
    margin: 10px 0 8px;
    font-family: var(--hp-font-heading, 'Roboto', sans-serif);
    font-size: 64px;
    font-weight: 900;
    line-height: 0.98;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--hp-ink, #17191c);
}

.hp-bento-head__heading .hp-accent {
    color: var(--hp-brand, #f20519);
}

.hp-bento-head__sub {
    margin: 0;
    font-size: 16px !important;
    color: #8a8d93;
}

.hp-bento-head__logo {
    flex: none;
    width: 160px;
    height: auto;
    margin-top: 6px;
}

.hp-bento {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 14px;
}

/* Row 1: one large card + two; row 2 onwards: three per row. */
.hp-bento__card {
    position: relative;
    isolation: isolate;
    display: flex;
    grid-column: span 4;
    min-width: 0;
    min-height: 270px;
    overflow: hidden;
    border-radius: 6px;
    background: #f1f1f2;
    color: var(--hp-ink, #17191c);
    text-decoration: none;
    box-shadow: 0 10px 26px rgba(16, 18, 22, 0.08);
    transition: transform 0.25s, box-shadow 0.25s;
}

.hp-bento__card:nth-child(2),
.hp-bento__card:nth-child(3) {
    grid-column: span 3;
}

.hp-bento__card--lead {
    grid-column: span 6;
}

/* Admin "Cards per row" (equal columns) and per-card width, both in twelfths of the row. */
.hp-bento--cols .hp-bento__card:nth-child(n) {
    grid-column: span var(--hp-card-span, var(--hp-bento-span, 4));
}

.hp-bento .hp-bento__card--sized:nth-child(n) {
    grid-column: span var(--hp-card-span);
}

.hp-bento__card:hover,
.hp-bento__card:focus-visible {
    color: inherit;
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(16, 18, 22, 0.16);
}

.hp-bento__card:focus-visible {
    outline: 3px solid var(--hp-brand, #f20519);
    outline-offset: 3px;
}

.hp-bento__img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}

.hp-bento__card--zoom:hover .hp-bento__img {
    transform: scale(1.05);
}

/* Keeps the text side readable whatever the photo is. */
.hp-bento__shade {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(243, 243, 244, 0.96) 0%, rgba(243, 243, 244, 0.75) 38%, rgba(243, 243, 244, 0) 62%);
}

.hp-bento__card--dark {
    background: #101113;
    color: #fff;
}

.hp-bento__card--dark .hp-bento__shade {
    background: linear-gradient(90deg, rgba(8, 8, 9, 0.92) 0%, rgba(8, 8, 9, 0.6) 40%, rgba(8, 8, 9, 0) 68%);
}

.hp-bento__body {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    max-width: 58%;
    padding: 26px 22px;
}

.hp-bento__card--lead .hp-bento__body {
    max-width: 50%;
    padding: 34px 26px;
}

.hp-bento__num {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--hp-brand, #f20519);
}

.hp-bento__num::after {
    content: '';
    width: 22px;
    height: 1px;
    background: currentColor;
}

.hp-bento__name {
    margin: 0 0 12px;
    font-family: var(--hp-font-heading, 'Roboto', sans-serif);
    font-size: 30px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.005em;
    text-transform: uppercase;
    color: inherit;
}

.hp-bento__card--lead .hp-bento__name {
    font-size: 48px;
}

/* Roboto is wider than the condensed reference face: size titles to the card width. */
.hp-bento__card:nth-child(2) .hp-bento__name,
.hp-bento__card:nth-child(3) .hp-bento__name {
    font-size: clamp(20px, 1.75vw, 26px);
}

.hp-bento__card:nth-child(n + 4) .hp-bento__name {
    font-size: clamp(22px, 2vw, 28px);
}

.hp-bento__card:not(.hp-bento__card--lead) .hp-bento__body {
    max-width: 64%;
}

.hp-bento__card--light:not(.hp-bento__card--lead) .hp-bento__shade {
    background: linear-gradient(90deg, rgba(243, 243, 244, 0.97) 0%, rgba(243, 243, 244, 0.85) 46%, rgba(243, 243, 244, 0) 72%);
}

.hp-bento__tagline {
    display: block;
    margin-bottom: 20px;
    font-size: 13px;
    line-height: 1.5;
    color: #4f5258;
}

.hp-bento__card--dark .hp-bento__tagline {
    color: rgba(255, 255, 255, 0.86);
}

.hp-bento__card--lead .hp-bento__tagline {
    font-size: 15px;
}

.hp-bento__btn {
    margin-top: auto; /* pinned to the card bottom so buttons line up across a row */
    min-height: 38px;
    padding: 0 16px;
    gap: 10px;
    font-size: 11px;
    text-transform: none;
    letter-spacing: 0.02em;
    border-radius: var(--hp-btn-radius, 8px);
}

.hp-bento__card--lead .hp-bento__btn {
    min-height: 44px;
    padding: 0 20px;
    font-size: 13px;
}

/* The button is a span inside the card link, so the card's hover runs its split fill. */
.hp-bento__card:hover .hp-bento__btn.hp-btn--primary,
.hp-bento__card:hover .hp-bento__btn.hp-btn--dark {
    background-color: var(--hp-btn-hover-bg, transparent) !important;
    color: var(--hp-btn-hover-color, var(--hp-btn-fill)) !important;
}

.hp-bento__card:hover .hp-bento__btn.hp-btn--primary::before,
.hp-bento__card:hover .hp-bento__btn.hp-btn--primary::after,
.hp-bento__card:hover .hp-bento__btn.hp-btn--dark::before,
.hp-bento__card:hover .hp-bento__btn.hp-btn--dark::after {
    width: 0;
}

.hp-bento__card:hover .hp-bento__btn.hp-btn--outline-light::before,
.hp-bento__card:hover .hp-bento__btn.hp-btn--outline-light::after,
.hp-bento__card:hover .hp-bento__btn.hp-btn--outline-dark::before,
.hp-bento__card:hover .hp-bento__btn.hp-btn--outline-dark::after {
    width: 51%;
}

.hp-bento__card:hover .hp-bento__btn.hp-btn--outline-light {
    color: var(--hp-ink, #17191c);
}

.hp-bento__card:hover .hp-bento__btn.hp-btn--outline-dark {
    color: #fff;
}

@media (max-width: 991.98px) {
    .hp-bento-head__heading {
        font-size: 52px;
    }

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

    .hp-bento__card,
    .hp-bento__card:nth-child(2),
    .hp-bento__card:nth-child(3) {
        grid-column: span 1;
    }

    .hp-bento__card--lead,
    .hp-bento__card:nth-child(even):last-child {
        grid-column: 1 / -1; /* the lead card, and a leftover last card, take the full row */
    }

    .hp-bento__card--lead .hp-bento__name {
        font-size: 40px;
    }

    .hp-bento__card:nth-child(n) .hp-bento__name {
        font-size: 26px;
    }

    .hp-bento__card--lead.hp-bento__card .hp-bento__name {
        font-size: 40px;
    }

    /* Chosen columns / widths fall back to two per row; "full row" cards stay full. */
    .hp-bento--cols .hp-bento__card:nth-child(n),
    .hp-bento .hp-bento__card--sized:nth-child(n) {
        grid-column: span 1;
    }

    .hp-bento .hp-bento__card--full:nth-child(n) {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767.98px) {
    .hp-bento-head {
        flex-direction: column-reverse;
        gap: 14px;
    }

    .hp-bento-head__logo {
        width: 120px;
        margin-top: 0;
    }

    .hp-bento-head__heading {
        font-size: 25px;
    }

    .hp-bento-head__eyebrow::after {
        width: 48px;
    }

    .hp-bento {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .hp-bento__card,
    .hp-bento__card--lead {
        grid-column: 1 / -1;
        min-height: 230px;
    }

    .hp-bento .hp-bento__card:nth-child(n) {
        grid-column: 1 / -1;
    }

    .hp-bento__body,
    .hp-bento__card--lead .hp-bento__body {
        max-width: 62%;
        padding: 22px 18px;
    }

    .hp-bento__name {
        font-size: 20px;
    }

    .hp-bento__card:nth-child(n) .hp-bento__name {
        font-size: 20px;
    }

    .hp-bento__card--lead.hp-bento__card .hp-bento__name {
        font-size: 34px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hp-bento__card,
    .hp-bento__img {
        transition: none;
    }
}

/* ------------------------------------------------------------------ top picks */
.hp-picks .hp-bg__shade {
    background-color: #170707;
    background-image: linear-gradient(90deg, rgba(9, 9, 9, 0.92), rgba(9, 9, 9, 0));
    opacity: var(--hp-overlay-opacity, 0.93);
}

.hp-picks .hp-head {
    margin-bottom: 0;
}

.hp-picks__head .hp-head__aside {
    flex: none;
    align-items: flex-end;
    padding-bottom: 8px;
}

.hp-picks__intro {
    max-width: 620px;
    margin: 16px 0 28px;
}

.hp-picks__bar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

/* Font settings go on the group (data-hp="filters"); the buttons inherit them. */
.hp-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 0;
    font-family: var(--hp-font-body, 'Poppins', sans-serif);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.hp-filter {
    padding: 10px 16px;
    border: 1px solid rgba(255, 255, 255, 0.23);
    border-radius: var(--hp-btn-radius, 0);
    background: transparent;
    color: #c5c1bb;
    font: inherit;
    line-height: 1.2;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
    transition:
        background-color 0.2s,
        border-color 0.2s,
        color 0.2s;
}

.hp-filter:hover,
.hp-filter.is-active {
    border-color: var(--hp-brand, #f20519);
    background: var(--hp-brand, #f20519);
    color: #fff;
}

/* Phones: one dropdown instead of the row of filter buttons. 16px stops iOS zooming in on tap. */
.hp-filters__select {
    display: none;
}

@media (max-width: 767.98px) {
    .hp-filters {
        flex: 1 1 auto;
    }

    .hp-filters .hp-filter {
        display: none;
    }

    .hp-filters__select {
        display: block;
        width: 100%;
        padding: 13px 44px 13px 16px;
        border: 1px solid rgba(255, 255, 255, 0.23);
        border-radius: var(--hp-btn-radius, 0);
        background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center / 12px 8px;
        color: #fff;
        font-family: inherit;
        font-size: 16px;
        font-weight: inherit;
        line-height: 1.2;
        letter-spacing: inherit;
        text-transform: inherit;
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
    }

    .hp-filters__select:focus-visible {
        border-color: var(--hp-brand, #f20519);
        outline: 2px solid var(--hp-focus, #f98487);
        outline-offset: 2px;
    }

    .hp-filters__select option {
        background: #fff;
        color: #17191c;
    }
}

.hp-products {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 13px;
}

/* Product card in the homepage theme: white card, light studio photo panel, red label + rule,
   red bar drawing in on hover (echoes the header underline). */
.hp-product {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border-radius: 8px;
    background-color: #fff;
    color: var(--hp-ink, #17191c);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
    transition:
        transform 0.25s,
        box-shadow 0.25s;
}

.hp-product::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--hp-brand, #f20519);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.hp-product:hover::after,
.hp-product:focus-within::after {
    transform: scaleX(1);
}

.hp-product[hidden] {
    display: none;
}

/* Top picks carousel (homepage-v2.js initCarousel, same motion as Team StriveX "Essentials"): more
   products than fit in one row slide one card left every 3s, looping forever. Clipped sideways
   only, so card shadows and lift still show. */
.hp-products.is-carousel {
    display: block !important;
    overflow: hidden;
    overflow-x: clip;
    overflow-y: visible;
}

.hp-products__track {
    display: flex;
    width: max-content;
    will-change: transform;
}

.hp-products.is-carousel .hp-product {
    flex: 0 0 var(--hp-car-w);
    width: var(--hp-car-w);
}

.hp-product.hp-fx-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 44px rgba(0, 0, 0, 0.35);
}

.hp-product__photo {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: linear-gradient(160deg, #f8f8f9 0%, #ebebec 100%);
}

.hp-product__photo img {
    position: relative;
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    padding: 10%;
    object-fit: contain;
    mix-blend-mode: multiply; /* white product backgrounds melt into the studio panel */
    transition: transform 0.45s ease;
}

.hp-product:hover .hp-product__photo img {
    transform: scale(1.06);
}

.hp-product__noimg {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    background: #1d1d1f;
    color: var(--hp-brand, #f20519);
}

.hp-product__noimg .hp-icon {
    width: 30%;
    height: 30%;
}

.hp-product__tag {
    position: absolute;
    top: 14px;
    left: 16px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: calc(100% - 32px);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--hp-brand, #f20519);
    pointer-events: none;
}

.hp-product__tag::after {
    content: '';
    width: 20px;
    height: 1px;
    background: currentColor;
}

.hp-product__tag--status {
    padding: 5px 8px;
    border-radius: 3px;
    background-color: var(--hp-ink, #17191c);
    color: #fff;
}

.hp-product__tag--status::after {
    content: none;
}

.hp-product__info {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 126px;
    padding: 16px 18px 18px;
}

.hp-product__subtitle {
    display: -webkit-box;
    order: 2;
    margin-bottom: 14px;
    overflow: hidden;
    font-size: 12px;
    line-height: 1.5;
    color: #6b6e74;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.hp-product__title {
    order: 1;
    margin: 0 0 6px;
    font-family: var(--hp-font-heading, 'Roboto', sans-serif);
    font-size: clamp(19px, 1.7vw, 24px);
    font-weight: 900;
    line-height: 1.05;
    text-transform: uppercase;
    color: var(--hp-ink, #17191c);
    overflow-wrap: break-word;
}

.hp-product__title a {
    color: inherit;
    text-decoration: none;
}

.hp-product__title a:hover {
    color: var(--hp-brand, #f20519);
}

.hp-product__bottom {
    display: flex;
    order: 3;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid #efeff1;
}

.hp-product__price {
    font-size: 15px;
    font-weight: 800;
    color: var(--hp-brand, #f20519);
}

/* "Buy now": a compact .hp-btn--primary, so it shares the split-fill hover. */
.hp-product__go {
    flex: none;
    min-height: 34px;
    padding: 0 14px;
    font-size: 11px;
    white-space: nowrap;
}

.hp-disclaimer {
    max-width: 960px;
    margin-top: 17px;
    font-size: 10px;
    line-height: 1.6;
    color: #b3aea5;
}

/* ------------------------------------------------------------------ events (story grid) */
/* The premium reference's "01 / The StriveX mindset" grid: copy column + four tiles
   (tall, wide, small, small). Rows use --hp-evx-row (Admin: tile row height). */
.hp-section.hp-evx {
    background: #fbf7eb;
}

.hp-evx__grid {
    --hp-evx-row: 238px;
    display: grid;
    grid-template-columns: 1.08fr 1.25fr 1fr 1fr;
    grid-template-rows: var(--hp-evx-row) var(--hp-evx-row);
    gap: 12px;
}

.hp-evx__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    grid-column: 1;
    grid-row: 1 / 3;
    padding: 4px 12px 6px 0;
}

.hp-evx__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: #5d514c;
}

.hp-evx__eyebrow::before {
    content: '';
    width: 30px;
    height: 3px;
    background: var(--hp-brand, #f20519);
}

.hp-evx__heading {
    margin: 13px 0 14px;
    font-family: var(--hp-font-heading, 'Roboto', sans-serif);
    font-size: 56px;
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--hp-brand, #f20519);
}

.hp-evx__heading .hp-accent {
    color: var(--hp-ink, #17191c);
}

.hp-evx__intro {
    max-width: 320px;
}

.hp-evx__intro p {
    margin: 0 0 15px;
    font-size: 14px;
    line-height: 1.65;
    color: #5f5b54;
}

.hp-evx__empty {
    margin: 0 0 15px;
    font-size: 14px;
    font-weight: 600;
    color: var(--hp-ink, #17191c);
}

.hp-evx__all {
    margin-top: auto;
}

/* ---- tiles */
.hp-evx__tile {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-width: 0;
    overflow: hidden;
    background: #17100e;
    color: #fff;
    text-decoration: none;
}

.hp-evx__tile::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255, 255, 255, 0.09);
    pointer-events: none;
}

.hp-evx__tile:hover,
.hp-evx__tile:focus-visible {
    color: #fff;
}

.hp-evx__tile:focus-visible {
    outline: 3px solid var(--hp-brand, #f20519);
    outline-offset: 3px;
}

.hp-evx__tile--tall {
    grid-column: 2;
    grid-row: 1 / 3;
}

.hp-evx__tile--wide {
    grid-column: 3 / 5;
    grid-row: 1;
}

.hp-evx__tile--small {
    grid-column: 3;
    grid-row: 2;
}

.hp-evx__tile--small-b {
    grid-column: 4;
    grid-row: 2;
}

/* Fewer events: the tiles grow to fill the grid. */
.hp-evx__grid--n1 .hp-evx__tile--tall {
    grid-column: 2 / 5;
}

.hp-evx__grid--n2 .hp-evx__tile--wide {
    grid-row: 1 / 3;
}

.hp-evx__grid--n3 .hp-evx__tile--small {
    grid-column: 3 / 5;
}

.hp-evx__grid--n0 {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
}

.hp-evx__grid--n0 .hp-evx__copy {
    grid-row: auto;
}

.hp-evx__media {
    position: absolute;
    inset: 0;
    z-index: -2;
    display: block;
}

.hp-evx__media img {
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.hp-fx-zoom:hover .hp-evx__media img {
    transform: scale(1.05);
}

/* No event image: a branded block with the date, never a stock photo. */
.hp-evx__media--none {
    display: grid;
    place-items: center;
    background:
        radial-gradient(ellipse at 80% 20%, rgba(242, 5, 25, 0.45), transparent 60%),
        linear-gradient(140deg, #1b1012, #0d0d0f);
}

.hp-evx__ghost {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: var(--hp-font-heading, 'Roboto', sans-serif);
    font-size: 96px;
    font-weight: 900;
    line-height: 0.85;
    color: rgba(255, 255, 255, 0.07);
}

.hp-evx__ghost small {
    font-size: 30px;
    letter-spacing: 0.2em;
}

.hp-evx__shade {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.88) 100%);
    opacity: var(--hp-overlay-opacity, 0.85);
}

.hp-evx__date {
    position: absolute;
    top: 14px;
    left: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 50px;
    padding: 7px 8px 6px;
    background: var(--hp-brand, #f20519);
    font-family: var(--hp-font-heading, 'Roboto', sans-serif);
    line-height: 1;
    color: #fff;
}

.hp-evx__date b {
    font-size: 22px;
    font-weight: 900;
}

.hp-evx__date span {
    margin-top: 3px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.hp-evx__status {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 9px;
    background: rgba(255, 255, 255, 0.94);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--hp-ink, #17191c);
}

.hp-evx__status::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #9a9da3;
}

.hp-evx__status--open::before {
    background: #16a34a;
}

.hp-evx__status--closed::before {
    background: var(--hp-brand, #f20519);
}

.hp-evx__status--finished {
    background: rgba(23, 25, 28, 0.85);
    color: #d6d7da;
}

.hp-evx__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 18px 18px 16px;
}

.hp-evx__title {
    margin: 0;
    font-family: var(--hp-font-heading, 'Roboto', sans-serif);
    font-size: 26px;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
    color: #fff;
    overflow-wrap: break-word;
}

.hp-evx__tile--small .hp-evx__title,
.hp-evx__tile--small-b .hp-evx__title {
    font-size: 19px;
}

.hp-evx__meta {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.82);
}

.hp-evx__summary {
    display: -webkit-box;
    max-width: 420px;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.78);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.hp-evx__cta {
    margin-top: 4px;
    padding-bottom: 3px;
    border-bottom: 2px solid var(--hp-brand, #f20519);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
}

.hp-evx__tile--finished .hp-evx__cta {
    border-bottom-color: rgba(255, 255, 255, 0.5);
}

/* ---- tablet: three columns, the second small slot drops (as in the reference) */
@media (max-width: 1080px) {
    .hp-evx__grid {
        grid-template-columns: 1fr 1.2fr 1fr;
        grid-template-rows: minmax(var(--hp-evx-row), auto) minmax(var(--hp-evx-row), auto);
    }

    .hp-evx__heading {
        font-size: 46px;
    }

    .hp-evx__tile--wide {
        grid-column: 3;
    }

    .hp-evx__tile--small {
        grid-column: 3;
    }

    .hp-evx__tile--small-b {
        display: none;
    }

    .hp-evx__grid--n1 .hp-evx__tile--tall {
        grid-column: 2 / 4;
    }

    .hp-evx__grid--n3 .hp-evx__tile--small {
        grid-column: 3;
    }
}

/* ---- phones / small tablets: copy on top, tall tile left, two stacked tiles right */
@media (max-width: 800px) {
    .hp-evx__grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto calc(var(--hp-evx-row) * 1.15) calc(var(--hp-evx-row) * 0.95);
        gap: 10px;
    }

    .hp-evx__copy {
        grid-column: 1 / 3;
        grid-row: 1;
        padding: 0 0 12px;
    }

    .hp-evx__intro {
        max-width: 560px;
    }

    .hp-evx__all {
        margin-top: 4px;
    }

    .hp-evx__tile--tall {
        grid-column: 1;
        grid-row: 2 / 4;
    }

    .hp-evx__tile--wide {
        grid-column: 2;
        grid-row: 2;
    }

    .hp-evx__tile--small {
        grid-column: 2;
        grid-row: 3;
    }

    .hp-evx__grid--n1 .hp-evx__tile--tall {
        grid-column: 1 / 3;
    }

    .hp-evx__grid--n2 .hp-evx__tile--wide {
        grid-row: 2 / 4;
    }

    .hp-evx__grid--n0 {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
    }

    .hp-evx__grid--n0 .hp-evx__copy {
        grid-column: 1;
    }
}

@media (max-width: 560px) {
    .hp-evx__heading {
        font-size: 40px;
    }

    .hp-evx__body {
        padding: 12px 12px 12px;
    }

    .hp-evx__title {
        font-size: 18px;
    }

    .hp-evx__tile--small .hp-evx__title {
        font-size: 15px;
    }

    .hp-evx__meta {
        font-size: 10.5px;
    }

    .hp-evx__summary {
        display: none;
    }

    .hp-evx__date {
        top: 10px;
        left: 10px;
        min-width: 42px;
        padding: 5px 6px;
    }

    .hp-evx__date b {
        font-size: 18px;
    }

    .hp-evx__status {
        top: auto;
        right: auto;
        bottom: calc(100% - 10px);
        position: static;
        margin: 0 12px -2px;
        align-self: flex-start;
        font-size: 8px;
    }

    .hp-evx__tile {
        justify-content: flex-end;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hp-evx__media img {
        transition: none;
    }
}

/* ---- phones: the tiles give way to a swipeable row of event pictures (as /strivex-events) */
.hp-evx__swipe {
    display: none;
}

@media (max-width: 767.98px) {
    .hp-evx__grid {
        display: block;
    }

    .hp-evx__tile {
        display: none;
    }

    .hp-evx__swipe {
        display: flex;
        gap: 12px;
        margin-top: 8px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }

    .hp-evx__swipe::-webkit-scrollbar {
        display: none;
    }

    .hp-evx__pic {
        display: block;
        flex: 0 0 82%;
        aspect-ratio: 2 / 1;
        overflow: hidden;
        border-radius: 8px;
        background: #eee;
        scroll-snap-align: start;
    }

    .hp-evx__pic:only-child {
        flex-basis: 100%;
    }

    .hp-evx__pic picture,
    .hp-evx__pic img {
        display: block;
        width: 100%;
        max-width: none;
        height: 100%;
        object-fit: cover;
    }

    .hp-evx__pic-none {
        display: grid;
        height: 100%;
        place-items: center;
        color: #c9c9cc;
        font-size: 40px;
        font-weight: 900;
    }
}

/* ------------------------------------------------------------------ membership (compact panel) */
.hp-section.hp-member {
    background: #fff;
    padding-top: 56px;
    padding-bottom: 56px;
}

.hp-member__panel {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    align-items: center;
    gap: clamp(28px, 4vw, 64px);
    overflow: hidden;
    padding: clamp(28px, 3.4vw, 48px);
    border-radius: 8px;
    background: #101113;
    color: #fff;
    box-shadow: 0 18px 44px rgba(16, 18, 22, 0.16);
}

.hp-member__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.hp-member__bg-img {
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    object-position: 30% center;
}

.hp-member__shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, #0b0b0c 0%, #0b0b0c 38%, rgba(20, 6, 8, 0.82) 100%);
    opacity: var(--hp-overlay-opacity, 0.9);
}

/* Red glow + diagonal accent, echoing the restringing section. */
.hp-member__panel::after {
    content: '';
    position: absolute;
    top: -40%;
    right: -6%;
    z-index: -1;
    width: 26%;
    height: 180%;
    background: linear-gradient(180deg, rgba(242, 5, 25, 0.55), rgba(242, 5, 25, 0.08));
    transform: skewX(-24deg);
    pointer-events: none;
}

.hp-member__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hp-brand, #f20519);
}

.hp-member__eyebrow::after {
    content: '';
    width: 64px;
    height: 2px;
    background: currentColor;
}

.hp-member__heading {
    margin: 10px 0 12px;
    font-family: var(--hp-font-heading, 'Roboto', sans-serif);
    font-size: 52px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: #fff;
}

.hp-member__heading .hp-accent {
    color: var(--hp-brand, #f20519);
}

.hp-member__intro {
    max-width: 440px;
    margin-bottom: 22px;
}

.hp-member__intro p {
    margin: 0;
    font-size: 15px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.78);
}

.hp-member__list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hp-member__row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    text-decoration: none;
    backdrop-filter: blur(2px);
    transition: background-color 0.2s, border-color 0.2s, transform 0.2s;
}

a.hp-member__row:hover,
a.hp-member__row:focus-visible {
    color: #fff;
    border-color: rgba(242, 5, 25, 0.6);
    background: rgba(255, 255, 255, 0.11);
    transform: translateX(4px);
}

a.hp-member__row:focus-visible {
    outline: 3px solid var(--hp-brand, #f20519);
    outline-offset: 2px;
}

.hp-member__icon {
    display: grid;
    flex: none;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 50%;
    background: #fdecee;
    color: var(--hp-brand, #f20519);
}

.hp-member__icon .hp-icon {
    width: 22px;
    height: 22px;
}

.hp-member__row-text {
    flex: 1;
    min-width: 0;
}

.hp-member__row-title {
    margin: 0 0 2px;
    font-family: var(--hp-font-heading, 'Roboto', sans-serif);
    font-size: 17px;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
    color: #fff;
}

.hp-member__row-desc {
    display: block;
    font-size: 13px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.7);
}

.hp-member__row-go {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.92);
}

.hp-member__row-go > [aria-hidden] {
    color: var(--hp-brand, #f20519);
    font-size: 15px;
    transition: transform 0.2s;
}

a.hp-member__row:hover .hp-member__row-go > [aria-hidden] {
    transform: translateX(3px);
}

@media (max-width: 991.98px) {
    .hp-member__panel {
        grid-template-columns: minmax(0, 1fr);
    }

    .hp-member__heading {
        font-size: 44px;
    }

    .hp-member__intro {
        max-width: 560px;
    }
}

@media (max-width: 767.98px) {
    .hp-section.hp-member {
        padding-top: 36px;
        padding-bottom: 36px;
    }

    .hp-member__panel {
        gap: 22px;
        padding: 26px 18px;
    }

    .hp-member__heading {
        font-size: 36px;
    }

    .hp-member__row {
        gap: 12px;
        padding: 12px 14px;
    }

    .hp-member__icon {
        width: 38px;
        height: 38px;
    }

    .hp-member__row-label {
        display: none; /* keep just the arrow on phones */
    }

    .hp-member__row-go > [aria-hidden] {
        color: #fff;
    }

    .hp-member__panel::after {
        width: 40%;
        opacity: 0.6;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hp-member__row {
        transition: none;
    }
}

/* ------------------------------------------------------------------ stringing */
.hp-string {
    overflow: hidden;
    background: linear-gradient(180deg, #fff 0%, #f5f5f6 100%);
}

.hp-string__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(40px, 5vw, 84px);
}

.hp-string--img-left .hp-string__copy {
    order: 2;
}

.hp-string__copy {
    min-width: 0;
}

.hp-string__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    font-family: var(--hp-font-body, 'Poppins', sans-serif);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hp-brand, #f20519);
}

.hp-string__eyebrow::after {
    content: '';
    flex: none;
    width: 64px;
    height: 2px;
    background: var(--hp-brand, #f20519);
}

.hp-string__heading {
    margin: 0 0 22px;
    font-family: var(--hp-font-heading, 'Roboto', sans-serif);
    font-size: clamp(40px, 3.9vw, 56px);
    font-weight: 900;
    line-height: 1.04;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    color: var(--hp-ink, #17191c);
    overflow-wrap: break-word;
}

.hp-string__body {
    max-width: 580px;
    font-size: 16px;
    line-height: 1.65;
    color: #5f6368;
}

.hp-string__features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 28px;
    max-width: 560px;
    margin: 32px 0 38px;
    padding: 0;
    font-size: 15px;
    color: var(--hp-ink, #17191c);
    list-style: none;
}

.hp-string__feature {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    list-style: none;
}

.hp-string__ficon {
    display: grid;
    flex: none;
    width: 46px;
    height: 46px;
    place-items: center;
    border-radius: 50%;
    background-color: #fdecee;
    color: var(--hp-brand, #f20519);
    font-size: 21px;
}

.hp-string__ficon .hp-icon {
    width: 1em;
    height: 1em;
}

.hp-string__flabel {
    font-size: inherit;
    font-weight: 600;
    line-height: 1.35;
    color: inherit;
}

/* Phones: the features glide sideways in one row, without stopping (homepage-v2.js initFeatureRail).
   The strip runs edge to edge of the screen; dragging it sideways moves it by hand. */
@media (max-width: 767.98px) {
    .hp-string__rail {
        margin: 26px calc(-1 * var(--hp-gutter, 24px)) 30px;
        padding: 6px 0 10px;
        overflow: hidden;
        touch-action: pan-y;
    }

    .hp-string__rail .hp-string__features {
        display: flex;
        flex-wrap: nowrap;
        gap: 12px;
        width: max-content;
        max-width: none;
        margin: 0;
        will-change: transform;
    }

    .hp-string__rail .hp-string__feature {
        flex: 0 0 auto;
        min-height: 78px;
        padding: 15px 18px;
        border: 1px solid #ececec;
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
    }
}

.hp-string__cta {
    min-height: 58px;
    padding: 0 32px;
    font-size: 13px;
    box-shadow: 0 14px 28px rgba(242, 5, 25, 0.26);
}

.hp-string__visual {
    position: relative;
    min-width: 0;
    padding: 30px 40px 60px 60px;
    isolation: isolate;
}

.hp-string__stripes {
    position: absolute;
    inset: -60% -45% -60% -20%;
    z-index: -1;
    pointer-events: none;
}

.hp-string__stripes::before,
.hp-string__stripes::after {
    content: '';
    position: absolute;
    border-radius: 999px;
    transform: rotate(32deg);
}

.hp-string__stripes::before {
    top: 0;
    right: 30%;
    width: 120px;
    height: 100%;
    background: linear-gradient(180deg, #ff4a55, var(--hp-brand, #f20519) 60%, #c8000f);
}

.hp-string__stripes::after {
    top: 22%;
    left: 22%;
    width: 64px;
    height: 70%;
    background: linear-gradient(180deg, rgba(242, 5, 25, 0.95), rgba(242, 5, 25, 0.5));
}

.hp-string__dot {
    position: absolute;
    top: 8px;
    left: 34%;
    z-index: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--hp-brand, #f20519);
    opacity: 0.55;
}

.hp-string__main {
    position: relative;
    z-index: 1;
    margin: 0;
    aspect-ratio: 1.06 / 1;
    overflow: hidden;
    border: 4px solid #fff;
    border-radius: 20px;
    box-shadow: 0 30px 60px rgba(20, 20, 30, 0.22);
}

.hp-string__main img,
.hp-string__inset img {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
}

.hp-string__main img {
    object-position: 62% center;
}

.hp-string__inset {
    position: absolute;
    bottom: 14px;
    left: 0;
    z-index: 2;
    display: block;
    width: 44%;
    max-width: 260px;
    margin: 0;
    aspect-ratio: 1.25 / 1;
    overflow: hidden;
    border: 4px solid #fff;
    border-radius: 16px;
    box-shadow: 0 18px 40px rgba(20, 20, 30, 0.28);
}

.hp-string__play {
    position: absolute;
    bottom: 14px;
    left: 14px;
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    color: var(--hp-brand, #f20519);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s;
}

.hp-string__play .hp-icon {
    width: 22px;
    height: 22px;
    margin-left: 3px;
    fill: currentColor;
}

.hp-string__inset--video:hover .hp-string__play {
    transform: scale(1.08);
}

/* Hover: the frame lifts and the photo slowly zooms inside it (mouse and trackpad only). */
.hp-string__main,
.hp-string__inset {
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.hp-string__main img,
.hp-string__inset img {
    transition: transform 0.6s ease;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .hp-string__main:hover,
    .hp-string__inset:hover {
        transform: translateY(-6px);
    }

    .hp-string__main:hover {
        box-shadow: 0 38px 70px rgba(20, 20, 30, 0.3);
    }

    .hp-string__inset:hover {
        box-shadow: 0 24px 48px rgba(20, 20, 30, 0.36);
    }

    .hp-string__main:hover img,
    .hp-string__inset:hover img {
        transform: scale(1.06);
    }
}

.hp-string__badge {
    position: absolute;
    top: 46%;
    right: 0;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    max-width: 190px;
    padding: 12px 20px 12px 12px;
    border-radius: 16px;
    background-color: #fff;
    color: var(--hp-ink, #17191c);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: 0 16px 36px rgba(20, 20, 30, 0.16);
}

.hp-string__badge-icon {
    display: grid;
    flex: none;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 50%;
    background: #fdecee;
    color: var(--hp-brand, #f20519);
}

.hp-string__badge-icon .hp-icon {
    width: 22px;
    height: 22px;
}

/* ------------------------------------------------------------------ reviews */
.hp-section.hp-reviews {
    background: #f6f6f7;
}

.hp-rev-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 26px;
}

.hp-rev-head__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hp-brand, #f20519);
}

.hp-rev-head__eyebrow::after {
    content: '';
    width: 64px;
    height: 2px;
    background: currentColor;
}

.hp-rev-head__heading {
    margin: 10px 0 8px;
    font-family: var(--hp-font-heading, 'Roboto', sans-serif);
    font-size: 56px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--hp-ink, #17191c);
}

.hp-rev-head__heading .hp-accent {
    color: var(--hp-brand, #f20519);
}

.hp-rev-head__intro {
    margin: 0;
    font-size: 15px;
    color: #6b6e74;
}

.hp-rev-nav {
    display: flex;
    flex: none;
    gap: 8px;
}

.hp-rev-nav__btn {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    padding: 0;
    border: 1px solid #d9dadd;
    border-radius: 4px;
    background: #fff;
    color: var(--hp-ink, #17191c);
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.hp-rev-nav__btn svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hp-rev-nav__btn:hover,
.hp-rev-nav__btn:focus-visible,
.hp-rev-nav__btn--next {
    border-color: var(--hp-brand, #f20519);
    background: var(--hp-brand, #f20519);
    color: #fff;
}

.hp-rev-nav__btn--next:hover {
    border-color: #0e0e0e;
    background: #0e0e0e;
}

/* Equal-height cards inside Owl; the outer stage gets room so card shadows aren't clipped. */
.hp-rev-track .owl-stage-outer {
    margin: -10px -12px -26px;
    padding: 10px 12px 26px;
}

.hp-rev-track .owl-stage {
    display: flex;
}

.hp-rev-track .owl-item {
    display: flex;
    height: auto;
}

.hp-rev-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 24px 24px 20px;
    overflow: hidden;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(16, 18, 22, 0.07);
    transition: transform 0.25s, box-shadow 0.25s;
}

.hp-rev-card::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--hp-brand, #f20519);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.hp-rev-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 38px rgba(16, 18, 22, 0.12);
}

.hp-rev-card:hover::after {
    transform: scaleX(1);
}

.hp-rev-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 10px;
}

.hp-rev-card__quote {
    font-family: Georgia, serif;
    font-size: 56px;
    font-weight: 700;
    line-height: 0.75;
    color: var(--hp-brand, #f20519);
}

.hp-rev-card__stars {
    font-size: 15px;
    letter-spacing: 2px;
    color: #f5a623;
}

.hp-rev-card__stars-off {
    color: #dedfe2;
}

.hp-rev-card__text {
    display: -webkit-box;
    flex: 1 0 auto; /* fills spare card height so "Read full review" lines up across cards */
    margin: 0 0 8px;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.7;
    color: #4f5258;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
}

.hp-rev-card__more {
    align-self: flex-start;
    margin-bottom: 18px;
    padding: 0 0 2px;
    border: 0;
    border-bottom: 2px solid var(--hp-brand, #f20519);
    background: none;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--hp-ink, #17191c);
    cursor: pointer;
}

.hp-rev-card__more:hover,
.hp-rev-card__more:focus-visible {
    color: var(--hp-brand, #f20519);
}

.hp-rev-card__foot {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid #efeff1;
}

.hp-rev-card__avatar {
    display: grid;
    flex: none;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: 50%;
    background: var(--hp-brand, #f20519);
    font-family: var(--hp-font-heading, 'Roboto', sans-serif);
    font-size: 17px;
    font-weight: 800;
    color: #fff;
}

.hp-rev-card__who {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.hp-rev-card__name {
    overflow: hidden;
    font-family: var(--hp-font-heading, 'Roboto', sans-serif);
    font-size: 15px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--hp-ink, #17191c);
}

.hp-rev-card__via {
    font-size: 12px;
    color: #8a8d93;
}

.hp-rev-card__logo {
    flex: none;
    width: 22px;
    height: 22px;
}

.hp-rev-track .owl-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 4px;
}

.hp-rev-track .owl-dot {
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
}

.hp-rev-track .owl-dot span {
    display: block;
    width: 8px;
    height: 8px;
    margin: 0 !important;
    border-radius: 999px;
    background: #cfd0d4 !important;
    transition: width 0.25s, background-color 0.25s;
}

.hp-rev-track .owl-dot.active span {
    width: 22px;
    background: var(--hp-brand, #f20519) !important;
}

/* "Read full review" dialog */
.hp-rev-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(10, 11, 13, 0.6);
}

.hp-rev-modal[hidden] {
    display: none;
}

.hp-rev-modal__box {
    position: relative;
    width: 100%;
    max-width: 540px;
    max-height: 85vh;
    padding: 30px 28px 26px;
    overflow-y: auto;
    border-top: 4px solid var(--hp-brand, #f20519);
    border-radius: 8px;
    background: #fff;
    font-family: var(--hp-font-body, 'Poppins', sans-serif);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
    animation: hp-rev-in 0.18s ease;
}

@keyframes hp-rev-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.hp-rev-modal__close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    background: none;
    font-size: 26px;
    line-height: 1;
    color: #6b6e74;
    cursor: pointer;
}

.hp-rev-modal__close:hover {
    color: var(--hp-brand, #f20519);
}

.hp-rev-modal__stars {
    display: block;
    margin-bottom: 12px;
    font-size: 18px;
    letter-spacing: 2px;
    color: #f5a623;
}

.hp-rev-modal__text {
    margin: 0 0 16px;
    font-size: 15px;
    line-height: 1.75;
    color: #3f4247;
    white-space: pre-line;
}

.hp-rev-modal__name {
    margin: 0 0 6px;
    font-family: var(--hp-font-heading, 'Roboto', sans-serif);
    font-size: 16px;
    font-weight: 800;
    color: var(--hp-ink, #17191c);
}

.hp-rev-modal__link {
    font-size: 13px;
    font-weight: 600;
    color: var(--hp-brand, #f20519);
}

body.hp-rev-modal-open {
    overflow: hidden;
}

@media (max-width: 991.98px) {
    .hp-rev-head__heading {
        font-size: 46px;
    }
}

@media (max-width: 767.98px) {
    .hp-rev-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 16px;
        margin-bottom: 18px;
    }

    .hp-rev-head__heading {
        font-size: 36px;
    }

    .hp-rev-nav__btn {
        width: 42px;
        height: 42px;
    }

    .hp-rev-card {
        padding: 20px 18px 18px;
    }
}

/* ------------------------------------------------------------------ separation: membership -> restringing */
/* The restringing section sits a layer above and casts a soft shadow up onto the section before it. */
.hp-section.hp-member + .hp-section.hp-string,
.hp-section.hp-string + .hp-section.hp-reviews {
    position: relative;
    z-index: 2;
    box-shadow: 0 -18px 36px -18px rgba(16, 18, 22, 0.16);
}

.hp-container--bare {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

/* ------------------------------------------------------------------ tablet */
@media (max-width: 991.98px) {

    .hp-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }

    .hp-head__aside {
        flex-basis: auto;
        max-width: 560px;
    }

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

    .hp-product__title {
        font-size: 26px;
    }


    .hp-string__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 56px;
    }

    .hp-string--img-left .hp-string__copy {
        order: 0;
    }

    .hp-string__visual {
        max-width: 680px;
        width: 100%;
        margin: 0 auto;
    }
}

/* ------------------------------------------------------------------ mobile */
@media (max-width: 767.98px) {
    /* Phones: the same 30px gap everywhere as the hero -> feature strip gap. */
    .hp-section,
    .hp-section.hp-member {
        padding-top: 30px;
        padding-bottom: 30px;
    }


    .hp-hero {
        min-height: 520px;
        padding-top: 0;
        padding-bottom: 0;
    }

    .hp-hero__shade {
        -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.78) 60%, rgba(0, 0, 0, 0.5) 100%);
        mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.78) 60%, rgba(0, 0, 0, 0.5) 100%);
    }

    .hp-hero__content {
        padding-top: 48px;
        padding-bottom: 76px;
    }

    .hp-hero__kicker {
        margin-bottom: 14px;
        font-size: 12px;
        letter-spacing: 0.22em;
    }

    .hp-hero__heading {
        font-size: 35px;
    }

    .hp-hero__text {
        margin-bottom: 26px;
        font-size: 15px;
    }

    .hp-sec-title {
        margin-bottom: 32px;
    }

    .hp-sec-title__heading {
        font-size: 28px;
    }

    .hp-display {
        font-size: 46px;
    }

    .hp-products {
        gap: 10px;
    }

    .hp-product__tag {
        top: 9px;
        left: 10px;
        font-size: 8px;
    }

    .hp-product__info {
        min-height: 0;
        padding: 12px 10px;
    }

    .hp-product__subtitle {
        margin-bottom: 10px;
        font-size: 11px;
    }

    .hp-product__title {
        margin: 0 0 4px;
        font-size: clamp(16px, 4.6vw, 20px);
    }

    .hp-product__price {
        font-size: 12px;
    }

    .hp-product__go {
        min-height: 30px;
        padding: 0 11px;
        font-size: 10px;
    }



    .hp-string__heading {
        font-size: 36px;
    }

    .hp-string__body {
        font-size: 15px;
    }

    .hp-string__features {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
        margin: 26px 0 30px;
    }

    .hp-string__cta {
        min-height: 54px;
        padding: 0 24px;
        font-size: 12px;
    }

    .hp-string__visual {
        padding: 18px 14px 44px 26px;
    }

    .hp-string__inset {
        width: 46%;
        border-width: 3px;
        border-radius: 12px;
    }

    .hp-string__play {
        bottom: 8px;
        left: 8px;
        width: 40px;
        height: 40px;
    }

    .hp-string__play .hp-icon {
        width: 18px;
        height: 18px;
    }

    .hp-string__badge {
        top: auto;
        right: 4px;
        bottom: 0;
        gap: 8px;
        padding: 8px 12px 8px 8px;
        font-size: 10px;
    }

    .hp-string__badge-icon {
        width: 32px;
        height: 32px;
    }

    .hp-string__badge-icon .hp-icon {
        width: 17px;
        height: 17px;
    }

    .hp-string__stripes::before {
        width: 70px;
    }

    .hp-string__stripes::after {
        width: 38px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hp-page *,
    .hp-page *::before,
    .hp-page *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}


/* ------------------------------------------------------------------ reviews: "more reviews" link */
.hp-rev-head__more {
    margin-top: 16px;
}

/* ------------------------------------------------------------------ FAQs */
/* Heading column left (sticky on desktop), accordion right. Native <details>, answers in the HTML. */
.hp-section.hp-faq {
    position: relative;
    z-index: 2;
    background: #fff;
    box-shadow: 0 -18px 36px -18px rgba(16, 18, 22, 0.16);
}

.hp-faq__grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 56px;
    align-items: start;
}

.hp-faq__intro {
    position: sticky;
    top: 96px;
}

.hp-faq__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hp-brand, #f20519);
}

.hp-faq__eyebrow::after {
    content: '';
    width: 64px;
    height: 2px;
    background: currentColor;
}

.hp-faq__heading {
    margin: 10px 0 16px;
    font-family: var(--hp-font-heading, 'Roboto', sans-serif);
    font-size: 56px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--hp-ink, #17191c);
}

.hp-faq__heading .hp-accent {
    color: var(--hp-brand, #f20519);
}

.hp-faq__lead {
    max-width: 440px;
    font-size: 15px;
    line-height: 1.65;
    color: #6b6e74;
}

.hp-faq__cta {
    margin-top: 24px;
}

.hp-faq__list {
    display: grid;
    gap: 0;
    border-top: 1px solid #e4e5e8;
}

.hp-faq__item {
    position: relative;
    border-bottom: 1px solid #e4e5e8;
    background: #fff;
    transition: background-color 0.2s ease;
}

.hp-faq__item::before {
    content: '';
    position: absolute;
    top: -1px;
    bottom: -1px;
    left: 0;
    width: 3px;
    background: var(--hp-brand, #f20519);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.25s ease;
}

.hp-faq__item[open] {
    background: #fafafa;
}

.hp-faq__item[open]::before {
    transform: scaleY(1);
}

.hp-faq__q {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 22px 20px 22px 22px;
    cursor: pointer;
    list-style: none;
}

.hp-faq__q::-webkit-details-marker {
    display: none;
}

.hp-faq__q:focus-visible {
    outline: 3px solid var(--hp-focus);
    outline-offset: -3px;
}

.hp-faq__num {
    min-width: 26px;
    font: 800 13px/1 var(--hp-font-heading, 'Roboto', sans-serif);
    letter-spacing: 0.04em;
    color: #b3b5ba;
    transition: color 0.2s ease;
}

.hp-faq__item[open] .hp-faq__num,
.hp-faq__q:hover .hp-faq__num {
    color: var(--hp-brand, #f20519);
}

.hp-faq__question {
    margin: 0;
    font-family: var(--hp-font-heading, 'Roboto', sans-serif);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--hp-ink, #17191c);
}

/* Plus that turns into a minus. */
.hp-faq__icon {
    position: relative;
    flex: none;
    width: 34px;
    height: 34px;
    border: 1.5px solid #d6d7db;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.hp-faq__icon::before,
.hp-faq__icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 2px;
    margin: -1px 0 0 -6px;
    background: var(--hp-ink, #17191c);
    transition: transform 0.25s ease, background-color 0.2s ease;
}

.hp-faq__icon::after {
    transform: rotate(90deg);
}

.hp-faq__q:hover .hp-faq__icon {
    border-color: var(--hp-brand, #f20519);
}

.hp-faq__item[open] .hp-faq__icon {
    border-color: var(--hp-brand, #f20519);
    background: var(--hp-brand, #f20519);
}

.hp-faq__item[open] .hp-faq__icon::before,
.hp-faq__item[open] .hp-faq__icon::after {
    background: #fff;
}

.hp-faq__item[open] .hp-faq__icon::after {
    transform: rotate(0deg);
}

.hp-faq__a {
    padding: 0 72px 24px 66px;
    font-size: 15px;
    line-height: 1.7;
    color: #4a4d53;
}

.hp-faq__a a {
    color: var(--hp-ink, #17191c);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--hp-brand, #f20519);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    overflow-wrap: anywhere;
}

.hp-faq__a a:hover {
    color: var(--hp-brand, #f20519);
}

@media (max-width: 991.98px) {
    .hp-faq__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 30px;
    }

    .hp-faq__intro {
        position: static;
    }

    .hp-faq__heading {
        font-size: 46px;
    }
}

@media (max-width: 767.98px) {
    .hp-faq__heading {
        font-size: 36px;
    }

    .hp-faq__q {
        gap: 12px;
        padding: 18px 4px 18px 14px;
    }

    .hp-faq__question {
        font-size: 16px;
    }

    .hp-faq__icon {
        width: 30px;
        height: 30px;
    }

    .hp-faq__a {
        padding: 0 8px 20px 14px;
        font-size: 14px;
    }

    .hp-faq__num {
        display: none;
    }
}

.hp-faq--nonum .hp-faq__q {
    grid-template-columns: minmax(0, 1fr) auto;
}

@media (min-width: 768px) {
    .hp-faq--nonum .hp-faq__a {
        padding-left: 22px;
    }
}

@media (max-width: 767.98px) {
    .hp-faq__q {
        grid-template-columns: minmax(0, 1fr) auto;
    }
}

/* Category cards with longer descriptions (SEO copy): a solid backing behind the text column so the
   words never sit on the product photo; the photo shows on the right. */
.hp-bento__card:not(.hp-bento__card--lead) .hp-bento__body {
    max-width: 56%;
}

.hp-bento__card--light:not(.hp-bento__card--lead) .hp-bento__shade {
    background: linear-gradient(90deg, rgba(243, 243, 244, 0.98) 0%, rgba(243, 243, 244, 0.95) 54%, rgba(243, 243, 244, 0) 76%);
}

.hp-bento__card--dark .hp-bento__shade {
    background: linear-gradient(90deg, rgba(8, 8, 9, 0.94) 0%, rgba(8, 8, 9, 0.82) 46%, rgba(8, 8, 9, 0) 72%);
}

@media (max-width: 767.98px) {
    .hp-bento__card .hp-bento__body,
    .hp-bento__card:not(.hp-bento__card--lead) .hp-bento__body,
    .hp-bento__card--lead .hp-bento__body {
        max-width: 62%;
    }

    .hp-bento__card--light:not(.hp-bento__card--lead) .hp-bento__shade {
        background: linear-gradient(90deg, rgba(243, 243, 244, 0.98) 0%, rgba(243, 243, 244, 0.95) 60%, rgba(243, 243, 244, 0) 84%);
    }

    .hp-bento__card--dark .hp-bento__shade {
        background: linear-gradient(90deg, rgba(8, 8, 9, 0.94) 0%, rgba(8, 8, 9, 0.85) 56%, rgba(8, 8, 9, 0) 82%);
    }
}

/* Light cards show the photo as-is: no whitish fade over the image. */
.hp-bento__card--light .hp-bento__shade {
    display: none;
}

/* Section background: the tint layer comes first in the markup and stacks above the photo. */
.hp-bg__shade {
    z-index: 1;
}

/* ------------------------------------------------------------------ feature strip (picture ads) */
/* The ads sit in one grid cell on top of each other, so the strip is as tall as the tallest
   picture; the one on screen fades in (homepage-v2.js initAds). */
.hp-ads {
    position: relative;
    overflow: hidden;
}

.hp-ads__track {
    display: grid;
}

.hp-ads__slide {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.6s ease,
        visibility 0s linear 0.6s;
}

.hp-ads__slide.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.6s ease;
}

.hp-ads__slide > a,
.hp-ads__slide > picture {
    display: block;
}

.hp-ads__slide img {
    display: block;
    width: 100%;
    height: auto;
}

.hp-ads__dots {
    position: absolute;
    right: 0;
    bottom: 8px;
    left: 0;
    display: flex;
    justify-content: center;
    gap: 8px;
    pointer-events: none;
}

.hp-ads__dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 1.5px solid #fff;
    border-radius: 50%;
    background: transparent;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    pointer-events: auto;
}

.hp-ads__dot[aria-current='true'] {
    background: #fff;
}

@media (prefers-reduced-motion: reduce) {
    .hp-ads__slide,
    .hp-ads__slide.is-active {
        transition: none;
    }
}

/* ------------------------------------------------------------------ feature strip (icons) */
.hp-strip {
    padding: 30px 0;
}

.hp-strip__box {
    border-top: 1px solid #ececec;
    border-bottom: 1px solid #ececec;
    background: #fff;
}

.hp-strip__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    padding: 26px 0;
    list-style: none;
}

.hp-strip__cell {
    position: relative;
    display: flex;
}

.hp-strip__item {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 14px;
    padding: 0 22px;
    color: inherit;
    text-align: left;
    text-decoration: none;
}

a.hp-strip__item:hover .hp-strip__title,
a.hp-strip__item:focus-visible .hp-strip__title {
    color: var(--hp-brand, #f20519);
}

.hp-strip__line {
    position: absolute;
    top: 50%;
    right: 0;
    width: 1px;
    height: 40px;
    background: #ececec;
    transform: translateY(-50%);
}

.hp-strip__cell:last-child .hp-strip__line {
    display: none;
}

.hp-strip__icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    min-width: 1.15em;
    font-size: 28px;
    color: var(--hp-ink, #17191c);
}

.hp-strip__icon .hp-icon {
    width: 1em;
    height: 1em;
}

.hp-strip__icon i {
    font-size: inherit;
}

.hp-strip__text {
    min-width: 0;
}

.hp-strip__title {
    display: block;
    margin-bottom: 3px;
    color: var(--hp-ink, #17191c);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.hp-strip__desc {
    display: block;
    color: #6b6f76;
    font-size: 12px;
    line-height: 1.35;
}

/* Tablet and mobile match the /strivex-events strip: two per row, smaller icons, tighter spacing. */
@media (max-width: 991.98px) {
    .hp-strip__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 20px;
    }

    /* Top-aligned, so the titles in each row line up however long the descriptions run. */
    .hp-strip__item {
        align-items: flex-start;
        gap: 10px;
        padding: 0 10px;
    }

    .hp-strip__icon {
        min-width: 26px;
        font-size: 22px;
    }

    .hp-strip__cell:nth-child(2n) .hp-strip__line {
        display: none;
    }
}

/* Phones: the strip glides sideways in one row like the restringing features (homepage-v2.js
   initFeatureRail), edge to edge of the screen, with a divider after every item. */
@media (max-width: 767.98px) {
    .hp-strip__rail {
        margin: 0 calc(-1 * var(--hp-gutter, 24px));
        overflow: hidden;
        touch-action: pan-y;
    }

    .hp-strip__rail .hp-strip__grid {
        display: flex;
        flex-wrap: nowrap;
        width: max-content;
        will-change: transform;
    }

    .hp-strip__rail .hp-strip__cell {
        flex: 0 0 250px;
    }

    .hp-strip__rail .hp-strip__cell .hp-strip__line {
        display: block;
    }
}

/* Top picks photo backdrop (admin image / colour): over the grey panel, under the photo. */
.hp-product__photo {
    isolation: isolate;
}

.hp-product__backdrop {
    position: absolute;
    z-index: -1;
    inset: 0;
    background-position: center;
    background-size: cover;
    pointer-events: none;
}

/* ------------------------------------------------------------------ phone type sizes */
/* Phones: section headings 25px, hero slide headings (h1 / h2) 35px, paragraphs 16px. The
   :not(#hp-none) adds an id's weight so these beat sizes the homepage builder sets for all devices
   or for tablet; a size set for phones in the builder still wins (HomepageStyles doubles its id). */
@media (max-width: 767.98px) {
    .hp-page h2:not(.hp-hero__heading):not(#hp-none) {
        font-size: 25px;
    }

    .hp-page .hp-hero__heading:not(#hp-none) {
        font-size: 35px;
    }

    .hp-page .hp-rich:not(#hp-none),
    .hp-page p:not(#hp-none) {
        font-size: 16px;
    }

    .hp-page .hp-rich p:not(#hp-none) {
        font-size: inherit;
    }
}