.hub-page-wrapper .hub-hero-fullwidth {
    --hub-hero-radius: 0;
    border-radius: 0;
}
.hub-page-wrapper .hub-hero.hub-hero-fit-image {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    clip-path: inset(0 round var(--hub-hero-radius));
}
.hub-page-wrapper .hub-hero.hub-hero-fit-image::after {
    display: none !important;
}
.hub-page-wrapper .hub-hero-fit-image .hub-hero-bgimg {
    border: 0 !important;
    box-shadow: none !important;
}
.hub-page-wrapper .hub-hero h1,
.hub-page-wrapper .hub-hero-fullwidth h1,
.hub-page-wrapper .hub-hero__title {
    font-family: var(--hub-font-display) !important;
    font-weight: 400 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    line-height: 0.95 !important;
}
.hub-page-wrapper .hub-hero__subtitle {
    font-weight: 400 !important;
}

.hub-hero .hub-hero-cta {
    --hero-cta-radius: 9px;
    position: relative;
    isolation: isolate;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    min-height: 3.25rem;
    overflow: hidden;
    padding: 0.65rem 0.7rem 0.65rem 1.2rem !important;
    border-radius: var(--hero-cta-radius, 12px) !important;
    font-family: var(--hub-font-display, var(--slms-font-heading)) !important;
    font-size: 1rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.065em !important;
    line-height: 1.1 !important;
    text-align: center;
    text-decoration: none !important;
    text-transform: uppercase;
    transition: transform var(--transition-smooth), box-shadow var(--transition-smooth), background var(--transition-smooth), color var(--transition-smooth), filter var(--transition-smooth);
}
.hub-hero .hub-hero-cta__label,
.hub-hero .hub-hero-cta__icon {
    position: relative;
    z-index: 1;
}
.hub-hero .hub-hero-cta__icon {
    flex: 0 0 auto;
    font-size: 1.1em;
    transition: transform var(--transition-smooth);
}
.hub-hero .hub-hero-cta__icon--trailing {
    display: grid;
    width: 1.95rem;
    height: 1.95rem;
    margin-left: 0.15rem;
    border-radius: max(4px, calc(var(--hero-cta-radius) - 3px));
    background: color-mix(in srgb, currentColor 10%, transparent);
    place-items: center;
}
.hub-hero .hub-hero-cta:hover .hub-hero-cta__icon--trailing,
.hub-hero .hub-hero-cta:focus-visible .hub-hero-cta__icon--trailing {
    transform: translateX(0.2rem);
}
.hub-hero .hub-hero-cta:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--hero-cta-accent, var(--slms-accent)) 58%, var(--slms-surface));
    outline-offset: 5px;
}
.hub-hero .hub-hero-cta[data-cta-shape='soft'] {
    --hero-cta-radius: 8px;
}
.hub-hero .hub-hero-cta[data-cta-shape='pill'] {
    --hero-cta-radius: 999px;
}
.hub-hero .hub-hero-cta[data-cta-shape='square'] {
    --hero-cta-radius: 0;
}
.hub-hero .hub-hero-cta-shape-soft {
    border-radius: 8px !important;
}
.hub-hero .hub-hero-cta::before,
.hub-hero .hub-hero-cta::after {
    content: '';
    position: absolute;
    pointer-events: none;
}
.hub-hero .hub-hero-cta--solid {
    background: var(--hero-cta-solid-bg, var(--slms-accent)) !important;
    border: 1px solid var(--hero-cta-edge) !important;
    color: var(--hero-cta-solid-color, var(--slms-button-color)) !important;
    box-shadow: 0 10px 28px var(--hero-cta-shadow) !important;
    transform: translateY(0);
}
.hub-hero .hub-hero-cta--solid::before {
    background: linear-gradient(115deg, color-mix(in srgb, var(--slms-surface) 22%, transparent), transparent 44%);
    inset: 0;
    z-index: 0;
}
.hub-hero .hub-hero-cta--solid:hover,
.hub-hero .hub-hero-cta--solid:focus-visible {
    background: var(--hero-cta-solid-bg, var(--slms-accent)) !important;
    color: var(--hero-cta-solid-color, var(--slms-button-color)) !important;
    filter: brightness(0.97) saturate(1.05);
    transform: translateY(-2px) !important;
    box-shadow: 0 14px 34px var(--hero-cta-shadow) !important;
}
.hub-hero .hub-hero-cta--solid:active {
    transform: translateY(0) !important;
    box-shadow: 0 7px 18px var(--hero-cta-shadow) !important;
}
.hub-hero .hub-hero-cta--outline {
    background: var(--hero-cta-outline-bg) !important;
    border: 1px solid var(--hero-cta-edge) !important;
    color: var(--hero-cta-outline-color) !important;
    box-shadow: 0 10px 28px var(--hero-cta-shadow) !important;
    transform: translateY(0);
}
.hub-hero .hub-hero-cta--outline::before {
    inset: 0 auto 0 0;
    width: 0.28rem;
    background: var(--slms-accent);
    transition: width var(--transition-smooth);
    z-index: 0;
}
.hub-hero .hub-hero-cta--outline:hover,
.hub-hero .hub-hero-cta--outline:focus-visible {
    background: var(--hero-cta-outline-hover-bg) !important;
    border-color: var(--hero-cta-edge) !important;
    color: var(--hero-cta-outline-hover-color) !important;
    filter: saturate(1.03);
    transform: translateY(-2px) !important;
    box-shadow: 0 14px 34px var(--hero-cta-shadow) !important;
}
.hub-hero .hub-hero-cta--outline:hover::before,
.hub-hero .hub-hero-cta--outline:focus-visible::before {
    width: 0.42rem;
}
.hub-hero .hub-hero-cta--outline:active {
    transform: translateY(0) !important;
    box-shadow: 0 7px 18px var(--hero-cta-shadow) !important;
}
.hub-hero .hub-hero-cta--ghost {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 2px solid currentColor !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--hero-text-color, var(--slms-surface)) !important;
    min-height: auto;
    padding: 0.55rem 0.15rem !important;
}
.hub-hero .hub-hero-cta--ghost:hover,
.hub-hero .hub-hero-cta--ghost:focus-visible {
    color: var(--hero-text-color, var(--slms-surface)) !important;
    transform: translateY(-2px) !important;
}
.hub-hero .hub-hero-cta--stadium-shadow {
    background: var(--slms-accent) !important;
    border: 2px solid var(--slms-text) !important;
    color: var(--slms-button-color, var(--slms-surface)) !important;
    box-shadow: 0 7px 0 var(--slms-text), 0 18px 28px color-mix(in srgb, var(--slms-text) 24%, transparent) !important;
    transform: translateY(-3px);
}
.hub-hero .hub-hero-cta--stadium-shadow:hover,
.hub-hero .hub-hero-cta--stadium-shadow:focus {
    background: color-mix(in srgb, var(--slms-accent) 90%, var(--slms-surface)) !important;
    color: var(--slms-button-color, var(--slms-surface)) !important;
    transform: translateY(-5px) !important;
    box-shadow: 0 9px 0 var(--slms-text), 0 22px 34px color-mix(in srgb, var(--slms-text) 26%, transparent) !important;
}
.hub-hero .hub-hero-cta--stadium-shadow:active {
    transform: translateY(1px) !important;
    box-shadow: 0 3px 0 var(--slms-text), 0 12px 20px color-mix(in srgb, var(--slms-text) 20%, transparent) !important;
}
.hub-hero .hub-hero-cta--ticket-stub {
    background: var(--slms-surface) !important;
    border: 2px dashed currentColor !important;
    color: var(--slms-text) !important;
    outline: 2px solid color-mix(in srgb, currentColor 24%, transparent);
    outline-offset: 4px;
    box-shadow: inset 16px 0 0 var(--slms-accent), 0 12px 24px color-mix(in srgb, var(--slms-text) 18%, transparent) !important;
}
.hub-hero .hub-hero-cta--ticket-stub:hover,
.hub-hero .hub-hero-cta--ticket-stub:focus {
    color: var(--slms-text) !important;
    transform: translateY(-2px) !important;
    box-shadow: inset 22px 0 0 var(--slms-accent), 0 16px 30px color-mix(in srgb, var(--slms-text) 22%, transparent) !important;
}
.hub-hero .hub-hero-cta--glass-plate {
    background: color-mix(in srgb, var(--slms-surface) 18%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--slms-surface) 46%, transparent) !important;
    color: var(--hero-text-color, var(--slms-surface)) !important;
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--slms-surface) 42%, transparent), 0 18px 36px color-mix(in srgb, var(--slms-text) 24%, transparent) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.hub-hero .hub-hero-cta--glass-plate::before {
    inset: 0;
    z-index: 0;
    background: linear-gradient(110deg, color-mix(in srgb, var(--slms-surface) 34%, transparent), transparent 42%, color-mix(in srgb, var(--slms-surface) 20%, transparent));
}
.hub-hero .hub-hero-cta--glass-plate:hover,
.hub-hero .hub-hero-cta--glass-plate:focus {
    background: color-mix(in srgb, var(--slms-surface) 28%, transparent) !important;
    color: var(--hero-text-color, var(--slms-surface)) !important;
    transform: translateY(-2px) !important;
}
.hub-hero .hub-hero-cta--diagonal-stripe {
    background: linear-gradient(135deg, var(--slms-primary) 0 48%, var(--slms-accent, var(--hub-accent)) 48% 100%) !important;
    border: 1px solid color-mix(in srgb, var(--slms-surface) 28%, transparent) !important;
    color: var(--slms-button-color, var(--slms-surface)) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--slms-surface) 18%, transparent), 0 14px 30px color-mix(in srgb, var(--slms-text) 22%, transparent) !important;
}
.hub-hero .hub-hero-cta--diagonal-stripe::after {
    inset: -40% -25%;
    z-index: 0;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--slms-surface) 26%, transparent), transparent);
    transform: translateX(-120%) skewX(-18deg);
    transition: transform 0.5s ease;
}
.hub-hero .hub-hero-cta--diagonal-stripe:hover,
.hub-hero .hub-hero-cta--diagonal-stripe:focus {
    color: var(--slms-button-color, var(--slms-surface)) !important;
    transform: translateY(-2px) !important;
}
.hub-hero .hub-hero-cta--diagonal-stripe:hover::after,
.hub-hero .hub-hero-cta--diagonal-stripe:focus::after {
    transform: translateX(120%) skewX(-18deg);
}

/* Fit-image actions hang from the media frame like a scoreboard pull-tab.
   The square top edge makes the relationship explicit without covering any
   pixels in the promotion itself. */
.hub-hero-fit-image .hub-hero-action-rail {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: flex-start;
    width: 100%;
    margin: 0;
    padding: 0 clamp(0.5rem, 1.5vw, 1rem);
}