.section-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    margin: 0 0 var(--space-6);
}

.section-head--center {
    align-items: center;
    text-align: center;
}

.section-head__title {
    margin: 0;
    font-size: clamp(1.75rem, 1.45rem + 1.2vw, 2.25rem);
    line-height: 1.1;
    overflow-wrap: anywhere;
    hyphens: auto;
}

.section-head__lead {
    max-width: var(--prose);
    margin: 0;
    color: var(--muted);
    font-size: 0.875rem;
    line-height: 1.55;
}

@media (min-width: 1024px) {
    .section-head {
        margin-bottom: var(--space-8);
    }
}

.card {
    position: relative;
    padding: var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
}

@media (min-width: 768px) {
    .card {
        padding: var(--space-6);
    }
}

a.card {
    display: block;
    text-decoration: none;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

@media (hover: hover) {
    a.card:hover {
        border-color: rgb(var(--green-rgb) / 0.5);
        color: var(--text);
        box-shadow: var(--shadow-2);
        transform: translateY(-2px);
    }
}

.cta-band {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-8) var(--space-6);
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: radial-gradient(600px circle at 50% 0, rgb(var(--green-rgb) / 0.10), transparent 60%), var(--surface);
    box-shadow: var(--shadow-3);
    text-align: center;
}

.cta-band__title {
    margin: 0;
    font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
    font-weight: 800;
    line-height: 1.05;
    text-transform: uppercase;
}

.cta-band__text {
    max-width: 36rem;
    margin: 0;
    color: var(--muted);
    font-size: 0.9375rem;
    line-height: 1.6;
}

.cta-band__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
    width: 100%;
    margin-top: var(--space-2);
}

@media (min-width: 640px) {
    .cta-band {
        padding: var(--space-12);
    }

    .cta-band__actions {
        flex-direction: row;
        justify-content: center;
        width: auto;
    }
}

.split-bar {
    display: flex;
    gap: 2px;
    height: 8px;
    padding: 1px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--bar-track);
}

.split-bar__seg {
    flex: 1 1 0;
    min-width: 3px;
    background: var(--side-a);
}

.split-bar__seg:first-child {
    border-radius: var(--radius-pill) 0 0 var(--radius-pill);
}

.split-bar__seg:last-child {
    border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
}

.split-bar__seg:only-child {
    border-radius: var(--radius-pill);
}

.split-bar__seg--a {
    transform-origin: right center;
}

.split-bar__seg--draw {
    background: var(--side-draw);
    transform-origin: center;
}

.split-bar__seg--b {
    background: var(--side-b);
    transform-origin: left center;
}

.sport-card {
    --sport-card-glow: drop-shadow(0 0 8px rgb(var(--green-rgb) / 0.25));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-1);
    min-height: 0;
    padding: var(--space-6) var(--space-4);
    overflow: visible;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text-strong);
    text-align: center;
    text-decoration: none;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

:root[data-theme="light"] .sport-card {
    --sport-card-glow: none;
    box-shadow: var(--shadow-1);
}

.sport-card::before,
.sport-card::after {
    content: none;
}

.sport-card__art {
    position: static;
    width: 96px;
    height: 58px;
    margin-bottom: var(--space-3);
    color: var(--green);
    opacity: 1;
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: var(--sport-card-glow);
    transform: none;
    transition: transform 0.2s ease;
}

.sport-card__name {
    color: var(--text-strong);
    font-family: var(--display);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;
    transition: color 0.2s ease;
}

.sport-card__meta {
    color: var(--muted);
    font-size: 0.75rem;
}

@media (hover: hover) {
    .sport-card:hover {
        border-color: rgb(var(--green-rgb) / 0.5);
        color: var(--text-strong);
        transform: none;
    }

    .sport-card:hover .sport-card__art {
        opacity: 1;
        transform: scale(1.05);
    }

    .sport-card:hover .sport-card__name {
        color: var(--green-ink);
    }
}

@media (prefers-reduced-motion: reduce) {
    a.card,
    .sport-card,
    .sport-card__art {
        transition: none;
    }

    @media (hover: hover) {
        a.card:hover,
        .sport-card:hover .sport-card__art {
            transform: none;
        }
    }
}

.sport-card:active {
    transform: scale(0.98);
    transition-duration: 80ms;
}

.split-bar.is-inview .split-bar__seg {
    animation: landing-grow 0.6s var(--ease-out) backwards;
}

:is(.sport-hero__svg, .today__promoted-art, .mc-fixtures-board__art):not(.is-pending) > [pathLength] {
    animation: landing-draw 0.8s var(--ease-out) backwards;
}

.mc-tabs__panel.is-from-right {
    animation: reveal-from-right 0.25s var(--ease-out) backwards;
}

.mc-tabs__panel.is-from-left {
    animation: reveal-from-left 0.25s var(--ease-out) backwards;
}

.mc-tabs__panel.is-entering :is(.split-bar__seg, .mc-probbar__seg, .mc-duel-gauge__fill, .mc-duel-compare__fill) {
    animation: reveal-regrow 0.5s var(--ease-out) 0.05s backwards;
}

.mc-probbar__seg,
.mc-duel-gauge__fill,
.mc-duel-compare__half--b .mc-duel-compare__fill {
    transform-origin: left center;
}

.mc-duel-compare__half--a .mc-duel-compare__fill {
    transform-origin: right center;
}

.mc-tabs__panel.is-entering :is(.num, [class*="__value"], .mc-scores__prob) {
    animation: landing-tick 0.3s var(--ease-out) 0.05s backwards;
}

.is-ticking {
    animation: landing-tick 0.3s var(--ease-out);
}

:where(span.is-ticking, b.is-ticking, strong.is-ticking, small.is-ticking, output.is-ticking) {
    display: inline-block;
}

:is(.faq__item, .mc-collapse, .mc-fold, .mc-details, .mc-howto, .legal__toc).is-opening > :not(summary) {
    animation: details-open 0.2s var(--ease-out);
}

.icon--arrow-right,
.icon--chevron-right,
.link-arrow {
    transition: transform 0.15s var(--ease-out);
}

.link-arrow {
    display: inline-block;
    margin-left: 0.3em;
}

@media (hover: hover) {
    a:hover :is(.icon--arrow-right, .icon--chevron-right, .link-arrow) {
        transform: translateX(3px);
    }
}

@keyframes landing-grow {
    from {
        transform: scaleX(0);
    }
}

@keyframes reveal-regrow {
    from {
        transform: scaleX(0);
    }
}

@keyframes landing-tick {
    from {
        transform: translateY(-4px);
    }
}

@keyframes landing-draw {
    from {
        stroke-dasharray: 1 2;
        stroke-dashoffset: 1.01;
    }

    to {
        stroke-dasharray: 1 2;
        stroke-dashoffset: 0;
    }
}

@keyframes reveal-from-right {
    from {
        transform: translateX(16px);
    }
}

@keyframes reveal-from-left {
    from {
        transform: translateX(-16px);
    }
}

@keyframes details-open {
    from {
        transform: translateY(-6px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sport-card:active {
        transform: none;
    }

    .split-bar.is-inview .split-bar__seg,
    :is(.sport-hero__svg, .today__promoted-art, .mc-fixtures-board__art):not(.is-pending) > [pathLength],
    .mc-tabs__panel.is-from-right,
    .mc-tabs__panel.is-from-left,
    .mc-tabs__panel.is-entering :is(.split-bar__seg, .mc-probbar__seg, .mc-duel-gauge__fill, .mc-duel-compare__fill, .num, [class*="__value"], .mc-scores__prob),
    .is-ticking,
    :is(.faq__item, .mc-collapse, .mc-fold, .mc-details, .mc-howto, .legal__toc).is-opening > :not(summary) {
        animation: none;
    }

    .icon--arrow-right,
    .icon--chevron-right,
    .link-arrow {
        transition: none;
    }

    @media (hover: hover) {
        a:hover :is(.icon--arrow-right, .icon--chevron-right, .link-arrow) {
            transform: none;
        }
    }
}