.page--landing {
    max-width: none;
    padding: 0;
    overflow-x: clip;
}

.home {
    --home-page-bg: var(--bg);
    --home-night: #051424;
    --home-night-rgb: 5 20 36;
    --home-section-y: var(--space-16);
    position: relative;
}

.home-wrap {
    width: min(100% - 2 * var(--gutter), var(--frame) - 2 * var(--gutter));
    margin-inline: auto;
}

.home-hero,
.home-final {
    color: var(--text);
}

.home-photo,
.home-photo img {
    display: block;
    width: 100%;
    height: 100%;
}

.home-photo img {
    object-fit: cover;
}

.home-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 14px;
    color: var(--green-ink);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.home-eyebrow::before {
    content: '';
    flex: none;
    width: 18px;
    height: 2px;
    background: var(--green);
}

.home-title {
    margin: 0;
    color: var(--text-strong);
    font: 800 clamp(2.125rem, 1.4rem + 2.6vw, 3.25rem)/0.98 var(--display);
    text-transform: uppercase;
}

.home-lead {
    max-width: 34em;
    margin: 14px 0 0;
    color: var(--muted);
    font-size: 1.0625rem;
    line-height: 1.55;
}

.home .btn--ghost {
    border-color: var(--border-strong);
    background: transparent;
    box-shadow: none;
    color: var(--text-strong);
}

@media (hover: hover) {
    .home .btn--ghost:hover {
        border-color: var(--border-strong);
        background: var(--surface-3);
        color: var(--text-strong);
    }
}

.home-hero {
    --hero-end: var(--home-night);
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: max(600px, min(calc(100svh - var(--header-h)), 720px));
    overflow: clip;
    background: var(--home-night);
}

:root[data-theme="light"] .home-hero {
    --hero-end: rgb(var(--home-night-rgb) / 0.9);
}

.home-hero__media {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.home-hero__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgb(var(--home-night-rgb) / 0.55) 0%, rgb(var(--home-night-rgb) / 0.1) 30%, rgb(var(--home-night-rgb) / 0.6) 70%, var(--hero-end) 100%),
        linear-gradient(90deg, rgb(var(--home-night-rgb) / 0.75) 0%, rgb(var(--home-night-rgb) / 0.35) 45%, rgb(var(--home-night-rgb) / 0) 70%);
}

.home-hero__photo img {
    object-position: var(--hero-focus, 50% 32%);
    transform-origin: 50% 40%;
}

.home-hero__dim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: #01070f;
    opacity: 0;
    pointer-events: none;
}

.home-hero__body {
    position: relative;
    padding: var(--space-16) 0 var(--space-16);
}

.home-hero--overlap .home-hero__body {
    padding-bottom: 168px;
}

.home-hero__title {
    max-width: 9.5em;
    margin: 0;
    color: var(--text-strong);
    font: 800 clamp(3.375rem, 1.2rem + 6.4vw, 7rem)/0.95 var(--display);
    letter-spacing: 0.005em;
    text-transform: uppercase;
}

.home-hero__title em {
    color: var(--green);
    font-style: normal;
}

.home-hero__lead {
    max-width: 30em;
    margin: 18px 0 30px;
    color: #dbe7f5;
    font-size: 1.25rem;
    line-height: 1.5;
}

.home-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.home-hero__actions .btn--lg {
    --btn-h: 54px;
    padding: 0 26px;
    font-size: 1.0625rem;
}

.home-hero .home-hero__ghost {
    border-color: rgb(255 255 255 / 0.45);
}

.home-hero__free {
    margin: var(--space-4) 0 0;
    color: #dbe7f5;
    font-size: 0.9375rem;
}

.home-hero__free a {
    color: var(--green-ink);
    font-weight: 600;
    text-decoration: none;
}

@media (hover: hover) {
    .home-hero__free a:hover {
        text-decoration: underline;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .home-hero__photo img {
        animation: home-settle 1200ms cubic-bezier(0.3, 0, 0.2, 1) both;
    }

    .home-hero__dim {
        animation: home-lights 1200ms cubic-bezier(0.5, 0, 0.3, 1) both;
    }
}

@keyframes home-settle {
    from {
        transform: scale(1.04);
    }

    to {
        transform: scale(1);
    }
}

@keyframes home-lights {
    from {
        opacity: 0.55;
    }

    to {
        opacity: 0;
    }
}

.home-picks {
    position: relative;
    z-index: 2;
    margin-top: -120px;
}

#nas-vyber,
#odber {
    scroll-margin-top: calc(var(--header-h) + var(--space-4));
}

.home-picks .picks-hook,
.home-picks .picks-bar {
    border-radius: 20px;
    box-shadow: var(--shadow-3);
}

.home-picks .picks-hook__kicker {
    color: var(--text-strong);
    font: 800 1.625rem/1 var(--display);
    letter-spacing: 0;
}

.home-picks .picks-record__value {
    font-size: clamp(4rem, 2.6rem + 4.4vw, 6.5rem);
    line-height: 0.85;
}

.home-picks .picks-record__unit {
    font-size: 1.25rem;
}

.picks-ad__text {
    margin: var(--space-3) 0 var(--space-5);
    color: var(--muted);
}

@media (prefers-reduced-motion: no-preference) {
    .landing.is-observing .picks-form[data-reveal]:not(.picks-form--small, .is-inview) .picks-form__item {
        transform: scale(0.55);
    }

    .picks-form[data-reveal].is-inview .picks-form__item {
        transition: transform 320ms var(--ease-out);
        transition-delay: calc(var(--i, 0) * 45ms);
    }
}

.home-ext {
    padding: 96px 0;
    overflow-x: clip;
}

.home-ext__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
    align-items: center;
}

.home-ext__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 20px 0 28px;
    padding: 0;
    list-style: none;
}

.home-ext__chips li {
    padding: 6px 10px;
    border-radius: var(--radius-pill);
    background: var(--surface-3);
    color: var(--text);
    font-size: 0.8125rem;
}

.home-laptop {
    position: relative;
    width: 100%;
    margin: 0;
}

.home-laptop__screen {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border: 10px solid #0b0f14;
    border-bottom-width: 14px;
    border-radius: 14px 14px 0 0;
    background: #ffffff;
    box-shadow: var(--shadow-3);
    container-type: inline-size;
}

.home-laptop__base {
    height: 14px;
    margin: 0 -6%;
    border-radius: 0 0 14px 14px;
    background: linear-gradient(#2a3442, #11161d);
}

.home-laptop__base::before {
    content: '';
    display: block;
    width: 16%;
    height: 5px;
    margin: 0 auto;
    border-radius: 0 0 6px 6px;
    background: #0b0f14;
}

.home-bm {
    --u: calc(100cqi / 620);
    display: grid;
    grid-template-rows: calc(34 * var(--u)) 1fr;
    height: 100%;
    background: #f3f4f6;
    color: #1f2937;
    font: 500 calc(12 * var(--u))/1.3 var(--font);
}

.home-bm p {
    margin: 0;
}

.home-bm__bar {
    display: flex;
    align-items: center;
    gap: calc(8 * var(--u));
    padding: 0 calc(12 * var(--u));
    background: #2b3440;
}

.home-bm__bar i {
    width: calc(9 * var(--u));
    height: calc(9 * var(--u));
    border-radius: 50%;
    background: #4b5563;
}

.home-bm__url {
    display: flex;
    flex: 1;
    align-items: center;
    height: calc(20 * var(--u));
    margin-left: calc(10 * var(--u));
    padding: 0 calc(10 * var(--u));
    border-radius: calc(10 * var(--u));
    background: #1b222b;
    color: #9ca3af;
    font-size: calc(10 * var(--u));
    white-space: nowrap;
}

.home-bm__ext {
    display: grid;
    place-items: center;
    width: calc(20 * var(--u));
    height: calc(20 * var(--u));
    border-radius: calc(5 * var(--u));
    background: #051424;
    color: #ffffff;
    font: 800 calc(11 * var(--u))/1 var(--font);
}

.home-bm__ext span {
    color: #00e676;
}

.home-bm__body {
    display: grid;
    grid-template-columns: 22% 1fr;
    min-height: 0;
}

.home-bm__side {
    display: grid;
    align-content: start;
    gap: calc(9 * var(--u));
    padding: calc(14 * var(--u)) calc(10 * var(--u));
    background: #e5e7eb;
}

.home-bm__line {
    height: calc(8 * var(--u));
    border-radius: calc(4 * var(--u));
    background: #c7ccd3;
}

.home-bm__line--80 {
    width: 80%;
}

.home-bm__line--70 {
    width: 70%;
}

.home-bm__line--60 {
    width: 60%;
}

.home-bm__main {
    position: relative;
    display: grid;
    align-content: start;
    gap: calc(10 * var(--u));
    padding: calc(14 * var(--u)) calc(16 * var(--u));
    overflow: hidden;
}

.home-bm__match {
    font: 700 calc(14 * var(--u))/1.2 var(--font);
}

.home-bm__meta {
    color: #6b7280;
    font-size: calc(11 * var(--u));
}

.home-bm__market {
    display: grid;
    gap: calc(7 * var(--u));
    padding: calc(9 * var(--u)) calc(10 * var(--u));
    border: 1px solid #d9dde3;
    border-radius: calc(6 * var(--u));
    background: #ffffff;
}

.home-bm__title {
    font-size: calc(11.5 * var(--u));
    font-weight: 700;
}

.home-bm__odds {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(6 * var(--u));
}

.home-bm__odds--three {
    grid-template-columns: 1fr 1fr 1fr;
}

.home-bm__odd {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(6 * var(--u));
    height: calc(30 * var(--u));
    padding: 0 calc(9 * var(--u));
    border: 1px solid #d9dde3;
    border-radius: calc(5 * var(--u));
    background: #f3f4f6;
    font-size: calc(11.5 * var(--u));
    white-space: nowrap;
}

.home-bm__odd b {
    font-weight: 800;
}

.home-bm__price-bar {
    flex: none;
    width: calc(26 * var(--u));
    height: calc(8 * var(--u));
    margin-left: auto;
    border-radius: calc(4 * var(--u));
    background: #c7ccd3;
}

.home-bm__mark {
    position: absolute;
    inset: -2px;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    overflow: visible;
    pointer-events: none;
}

.home-bm__mark rect {
    fill: none;
    stroke: #00c863;
    stroke-width: 1.8;
    stroke-dasharray: 1 1.1;
    stroke-dashoffset: 0;
}

.home-bm__flag {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 0;
    height: 0;
    border-top: calc(10 * var(--u)) solid #00c863;
    border-left: calc(10 * var(--u)) solid transparent;
    transform-origin: 100% 0;
}

.home-pop {
    position: absolute;
    top: 13%;
    left: 45%;
    z-index: 2;
    width: 52%;
    padding: calc(10 * var(--u)) calc(12 * var(--u));
    border: 1px solid #22354c;
    border-radius: calc(10 * var(--u));
    background: #0d1c2d;
    box-shadow: 0 10px 30px rgb(0 0 0 / 0.35);
    color: #d4e4fa;
    font: 500 calc(11 * var(--u))/1.4 var(--font);
}

.home-pop::after {
    content: '';
    position: absolute;
    right: calc(44 * var(--u));
    bottom: calc(-6 * var(--u));
    width: calc(10 * var(--u));
    height: calc(10 * var(--u));
    border-right: 1px solid #22354c;
    border-bottom: 1px solid #22354c;
    background: #0d1c2d;
    transform: rotate(45deg);
}

.home-pop__badge {
    display: inline-block;
    padding: calc(3 * var(--u)) calc(7 * var(--u));
    border-radius: calc(4 * var(--u));
    background: rgb(0 230 118 / 0.14);
    color: #00e676;
    font: 800 calc(10 * var(--u))/1 var(--font);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.home-bm .home-pop__selection {
    margin: calc(6 * var(--u)) 0 calc(4 * var(--u));
    color: #ffffff;
    font: 700 calc(13 * var(--u))/1.2 var(--font);
}

.home-pop__row {
    display: flex;
    justify-content: space-between;
    color: #8ca3ba;
}

.home-pop__row b {
    color: #ffffff;
}

.home-pop__row .home-pop__chance {
    color: #00e676;
}

.home-laptop__track {
    position: absolute;
    inset: 0;
    visibility: hidden;
    pointer-events: none;
}

.home-laptop__scan {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 2px;
    background: #00c863;
    box-shadow: 0 0 10px rgb(0 200 99 / 0.8);
}

.home-laptop__cursor {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(18 * var(--u));
    height: calc(18 * var(--u));
    filter: drop-shadow(0 2px 3px rgb(0 0 0 / 0.35));
}

.home-laptop__cursor path {
    fill: #ffffff;
    stroke: #111111;
    stroke-width: 1.5;
}

.home-laptop__toggle {
    position: absolute;
    right: 16px;
    bottom: 26px;
    z-index: 4;
    display: none;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 14px;
    border: 0;
    border-radius: var(--radius-pill);
    background: rgb(var(--home-night-rgb) / 0.86);
    color: #ffffff;
    font: 600 0.8125rem/1 var(--font);
    cursor: pointer;
}

.home-laptop__tag {
    position: absolute;
    bottom: 30px;
    left: 14px;
    z-index: 4;
    padding: 3px 7px;
    border-radius: var(--radius-pill);
    background: rgb(var(--home-night-rgb) / 0.86);
    color: #ffffff;
    font: 700 0.625rem/1 var(--font);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    pointer-events: none;
}

.home-laptop.is-ready .home-laptop__toggle {
    display: inline-flex;
}

.home-laptop__icon {
    width: 12px;
    height: 12px;
    fill: currentColor;
}

.home-laptop__icon--play,
.home-laptop__state--play,
.home-laptop.is-paused .home-laptop__icon--pause,
.home-laptop.is-paused .home-laptop__state--pause {
    display: none;
}

.home-laptop.is-paused .home-laptop__icon--play,
.home-laptop.is-paused .home-laptop__state--play {
    display: inline;
}

@media (prefers-reduced-motion: no-preference) {
    .home-laptop[data-loop="run"] .home-laptop__track {
        visibility: visible;
    }

    .home-laptop[data-loop="run"] .home-laptop__track--cursor {
        animation: home-loop-cursor 8s cubic-bezier(0.45, 0, 0.2, 1) infinite;
    }

    .home-laptop[data-loop="run"] .home-laptop__track--scan {
        animation: home-loop-scan 8s linear infinite;
    }

    .home-laptop[data-loop="run"] .home-bm__ext {
        animation: home-loop-badge 8s var(--ease-out) infinite;
    }

    .home-laptop[data-loop="run"] .home-bm__mark rect {
        animation: home-loop-mark 8s var(--ease-out) infinite;
    }

    .home-laptop[data-loop="run"] .home-bm__flag {
        animation: home-loop-flag 8s var(--ease-out) infinite;
    }

    .home-laptop[data-loop="run"] .home-bm__odd--marked {
        animation: home-loop-press 8s ease-in-out infinite;
    }

    .home-laptop[data-loop="run"] .home-pop {
        animation: home-loop-pop 8s var(--ease-out) infinite;
    }

    .home-laptop[data-loop="run"]:is(.is-paused, .is-offscreen, .is-hidden) :is(.home-laptop__track, .home-bm__ext, .home-bm__mark rect, .home-bm__flag, .home-bm__odd--marked, .home-pop) {
        animation-play-state: paused;
    }
}

@keyframes home-loop-cursor {
    0% {
        transform: translate(92%, 96%);
    }

    16% {
        transform: translate(80%, 70%);
    }

    24%,
    84% {
        transform: translate(74%, 53%);
    }

    100% {
        transform: translate(92%, 96%);
    }
}

@keyframes home-loop-scan {
    0%,
    9% {
        visibility: hidden;
        transform: translateY(-4%);
    }

    10% {
        visibility: visible;
        transform: translateY(0);
    }

    24% {
        visibility: visible;
        transform: translateY(100%);
    }

    25%,
    100% {
        visibility: hidden;
        transform: translateY(100%);
    }
}

@keyframes home-loop-badge {
    0%,
    8% {
        transform: scale(1);
    }

    11% {
        transform: scale(1.3);
    }

    15%,
    100% {
        transform: scale(1);
    }
}

@keyframes home-loop-mark {
    0%,
    25% {
        stroke-dashoffset: 1.05;
    }

    35%,
    86% {
        stroke-dashoffset: 0;
    }

    94%,
    100% {
        stroke-dashoffset: 1.05;
    }
}

@keyframes home-loop-flag {
    0%,
    34% {
        transform: scale(0);
    }

    39%,
    86% {
        transform: scale(1);
    }

    90%,
    100% {
        transform: scale(0);
    }
}

@keyframes home-loop-press {
    0%,
    60% {
        transform: scale(1);
    }

    62% {
        transform: scale(0.97);
    }

    65%,
    100% {
        transform: scale(1);
    }
}

@keyframes home-loop-pop {
    0%,
    39% {
        visibility: hidden;
        transform: translateY(14px);
    }

    40% {
        visibility: visible;
        transform: translateY(14px);
    }

    47%,
    86% {
        visibility: visible;
        transform: none;
    }

    87%,
    100% {
        visibility: hidden;
        transform: translateY(14px);
    }
}

.home-stats {
    padding: var(--space-6) 0 96px;
    overflow-x: clip;
}

.home-stats__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
    align-items: center;
}

.home-stats__visual {
    position: relative;
    display: grid;
    justify-items: center;
    order: 2;
}

.home-stats__media {
    position: relative;
    width: calc(100% + 2 * var(--gutter));
    height: min(100vw, 560px);
    margin-inline: calc(-1 * var(--gutter));
    overflow: hidden;
}

.home-stats__photo img {
    object-position: var(--ball-focus-tall, 50% 30%);
}

.home-phone {
    position: relative;
    width: 230px;
    margin: calc(-1 * min(110px, 28vw)) 0 0;
    padding: 9px;
    aspect-ratio: 9 / 19;
    border-radius: 38px;
    background: #0b0f14;
    box-shadow: var(--shadow-3), inset 0 0 0 2px #2a3442;
}

.home-phone__screen {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 30px;
    background: var(--bg);
    container-type: inline-size;
}

.home-phone__screen::before {
    content: '';
    position: absolute;
    top: 3.6cqi;
    left: 50%;
    z-index: 2;
    width: 34cqi;
    height: 9cqi;
    border-radius: 5cqi;
    background: #0b0f14;
    transform: translateX(-50%);
}

.home-phone__page {
    --p: calc(100cqi / 278);
    display: grid;
    gap: calc(12 * var(--p));
    padding: calc(48 * var(--p)) calc(14 * var(--p)) calc(14 * var(--p));
    color: var(--text);
    font-size: calc(12 * var(--p));
}

.home-phone__page p {
    margin: 0;
}

.home-phone__league {
    color: var(--muted);
    font: 700 calc(10 * var(--p))/1.3 var(--font);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.home-phone__teams {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: calc(6 * var(--p));
    align-items: center;
    text-align: center;
}

.home-phone .mc-crest {
    --crest-size: calc(40 * var(--p));
    display: grid;
    place-items: center;
    margin: 0 auto calc(6 * var(--p));
    border: 0;
    border-radius: calc(10 * var(--p));
    background: var(--surface-3);
    color: var(--text-strong);
    font: 800 calc(14 * var(--p))/1 var(--display);
    letter-spacing: inherit;
}

.home-phone__team {
    display: block;
    overflow: hidden;
    color: var(--text-strong);
    font: 800 calc(15 * var(--p))/1.05 var(--display);
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.home-phone__vs {
    color: var(--muted);
    font-size: calc(10 * var(--p));
}

.home-phone__probs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.home-phone__probs--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.home-phone__prob {
    display: grid;
    color: var(--muted);
}

.home-phone__prob b {
    font: 800 calc(26 * var(--p))/1 var(--display);
}

.home-phone__prob small {
    color: var(--muted);
    font-size: calc(9 * var(--p));
    line-height: 1.4;
}

.home-phone__prob--a b {
    color: var(--green);
}

.home-phone__prob--draw {
    text-align: center;
}

.home-phone__prob--b {
    text-align: right;
}

.home-phone__prob--b b {
    color: var(--info);
}

.home-phone__bar {
    display: flex;
    gap: 2px;
    height: calc(6 * var(--p));
    overflow: hidden;
    border-radius: 3px;
}

.home-phone__seg {
    display: block;
    flex-basis: 0;
    height: 100%;
    background: var(--side-draw);
    transform-origin: var(--from, center);
}

.home-phone__seg--a {
    background: var(--green);
}

.home-phone__seg--b {
    background: var(--info);
}

.home-phone__tabs {
    display: flex;
    gap: calc(4 * var(--p));
    padding: calc(3 * var(--p));
    border-radius: calc(8 * var(--p));
    background: var(--surface-2);
}

.home-phone__tabs span {
    flex: 1;
    padding: calc(6 * var(--p)) 0;
    border-radius: calc(6 * var(--p));
    color: var(--muted);
    font-size: calc(11 * var(--p));
    font-weight: 600;
    text-align: center;
}

.home-phone__tabs .is-on {
    background: var(--btn-green);
    color: var(--on-green);
}

.home-phone__card {
    display: grid;
    gap: calc(6 * var(--p));
    padding: calc(10 * var(--p));
    border: 1px solid var(--border);
    border-radius: calc(10 * var(--p));
    background: var(--surface);
}

.home-phone__page .home-phone__card-title {
    color: var(--text-strong);
    font-size: calc(12 * var(--p));
    font-weight: 700;
}

.home-phone__split {
    display: flex;
    justify-content: space-between;
    font-size: calc(11 * var(--p));
    font-weight: 700;
}

.home-phone__more {
    color: var(--green-ink);
}

.home-phone__less {
    color: var(--info);
}

.home-phone__bar2 {
    display: flex;
    gap: 2px;
    height: calc(5 * var(--p));
}

.home-phone__bar2 span {
    flex-basis: 0;
    height: 100%;
    border-radius: 3px;
}

.home-phone__bar2-more {
    background: var(--green);
}

.home-phone__bar2-less {
    background: var(--info);
}

.home-phone__form {
    display: flex;
    gap: calc(3 * var(--p));
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-phone__form-item {
    display: grid;
    place-items: center;
    width: calc(18 * var(--p));
    height: calc(18 * var(--p));
    border-radius: calc(3 * var(--p));
    background: var(--surface-4);
    color: var(--muted);
    font: 800 calc(9 * var(--p))/1 var(--font);
}

.home-phone__form-item--w {
    background: var(--btn-green);
    color: var(--on-green);
}

.home-phone__form-item--l {
    background: var(--loss);
    color: #ffffff;
}

@media (prefers-reduced-motion: no-preference) {
    .landing.is-observing .home-phone:not(.is-inview) .home-phone__seg {
        transform: scaleX(0);
    }

    .home-phone.is-inview .home-phone__seg {
        transition: transform 650ms var(--ease-out) 150ms;
    }
}

.home-sports {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 22px 0 28px;
    padding: 0;
    list-style: none;
}

.home-sports__chip {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    color: var(--text-strong);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
}

@media (hover: hover) {
    .home-sports__chip:hover {
        border-color: var(--green-line);
        color: var(--green-ink);
    }
}

.home-today {
    margin: 0 0 28px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
}

.home-today__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-1) var(--space-3);
    padding: 14px var(--space-4) 10px;
}

.home-today__title {
    margin: 0;
    color: var(--text-strong);
    font: 700 0.9375rem/1.3 var(--font);
    text-transform: none;
}

.home-today__all,
.home-today__empty a {
    color: var(--green-ink);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
}

.home-today__empty {
    margin: 0;
    padding: 10px var(--space-4) 14px;
    border-top: 1px solid var(--border-subtle);
}

.home-today__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-today__row {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: var(--space-1) var(--space-3);
    align-items: baseline;
    padding: 10px var(--space-4);
    border-top: 1px solid var(--border-subtle);
    color: var(--text);
    font-size: 0.90625rem;
    text-decoration: none;
}

.home-today__time {
    color: var(--text-strong);
    font-weight: 700;
}

.home-today__teams {
    color: var(--text-strong);
    font-weight: 600;
}

.home-today__league {
    color: var(--muted);
    font-size: 0.78125rem;
    text-align: right;
}

@media (hover: hover) {
    .home-today__row:hover {
        background: var(--surface-2);
    }

    .home-today__all:hover,
    .home-today__empty a:hover {
        text-decoration: underline;
    }
}

.home-final {
    position: relative;
    isolation: isolate;
    padding: 0 0 calc(var(--space-12) + var(--tab-bar-space));
    background: var(--home-night);
}

.home-final__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.home-final__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgb(var(--home-night-rgb) / 0) 0%, rgb(var(--home-night-rgb) / 0) 55%, rgb(var(--home-night-rgb) / 0.7) 78%, var(--home-night) 100%);
}

.home-final__photo img {
    object-position: var(--crowd-focus, 50% 85%);
}

.home-final__body {
    position: relative;
    margin-top: -72px;
}

.home-final__title {
    color: var(--text-strong);
    text-align: center;
}

.home-final__lead {
    max-width: 32em;
    margin: 14px auto 32px;
    color: #dbe7f5;
    font-size: 1.0625rem;
    text-align: center;
}

.home-plans {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    max-width: 760px;
    margin: 0 auto;
}

.home-plans--one {
    max-width: 380px;
}

.home-plan {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 26px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: rgb(13 28 45 / 0.92);
    color: var(--text);
}

.home-plan--main {
    border-color: rgb(var(--green-rgb) / 0.55);
}

.home-plan__name {
    margin: 0;
    color: var(--muted);
    font: 600 0.9375rem/1.3 var(--font);
    text-transform: none;
}

.home-plan__price {
    margin: 0;
    color: var(--text-strong);
    font: 800 2.875rem/1 var(--display);
}

.home-plan__text {
    margin: 0 0 18px;
    font-size: 0.875rem;
}

.home-plan__cta {
    margin-top: auto;
}

.home-final__matches {
    margin: 0;
    text-align: center;
}

.home-final__mail {
    max-width: 760px;
    margin: 28px auto 0;
}

.home-final__mail:empty {
    display: none;
}

.home-final .match-of-the-day--band {
    max-width: none;
    margin: 0;
    padding: 20px 22px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: rgb(13 28 45 / 0.92);
    color: var(--text);
    text-align: left;
}

.match-of-the-day__band-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1) var(--space-3);
    margin: 0 0 var(--space-3);
}

.match-of-the-day--band .match-of-the-day__heading {
    margin: 0;
    color: var(--text-strong);
    font: 700 1.0625rem/1.3 var(--font);
    text-transform: none;
}

.match-of-the-day--band .match-of-the-day__band-head .match-of-the-day__lead {
    margin: 0;
    color: var(--muted);
    font-size: 0.875rem;
}

.match-of-the-day--band [data-match-of-the-day-email-form] > .match-of-the-day__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.match-of-the-day--band .match-of-the-day__submit {
    width: 100%;
}

@media (min-width: 640px) {
    .match-of-the-day--band [data-match-of-the-day-email-form] {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: var(--space-2) 10px;
    }

    .match-of-the-day--band [data-match-of-the-day-email-form] > * {
        grid-column: 1 / -1;
    }

    .match-of-the-day--band [data-match-of-the-day-email-form] > .hero-signup__row {
        grid-row: 1;
        grid-column: 1;
    }

    .match-of-the-day--band [data-match-of-the-day-email-form] > .match-of-the-day__submit {
        grid-row: 1;
        grid-column: 2;
        width: auto;
        padding-inline: var(--space-5);
    }

    .match-of-the-day--band [data-match-of-the-day-email-form] > .match-of-the-day__code-ahead {
        text-align: left;
    }

    .home-laptop__tag {
        bottom: 36px;
        left: 20px;
        padding: 5px 10px;
        font-size: 0.75rem;
    }

    .home-stats__media {
        height: min(52vw, 420px);
    }

    .home-stats__photo img {
        object-position: 50% 55%;
    }
}

@media (max-width: 899px) {
    .home-hero {
        min-height: 0;
    }

    .home-hero__media {
        bottom: auto;
        height: min(125vw, 640px);
    }

    .home-hero__media::after {
        background: linear-gradient(180deg, rgb(var(--home-night-rgb) / 0.25) 0%, rgb(var(--home-night-rgb) / 0) 16%, rgb(var(--home-night-rgb) / 0) 46%, rgb(var(--home-night-rgb) / 0.7) 62%, rgb(var(--home-night-rgb) / 0.92) 80%, var(--home-night) 100%);
    }

    .home-hero__photo img {
        object-position: var(--hero-focus-tall, 50% 0);
    }

    .home-hero__body {
        padding-top: calc(min(125vw, 640px) * 0.6);
        padding-bottom: var(--space-12);
    }

    .home-hero--overlap .home-hero__body {
        padding-bottom: 100px;
    }

    .home-hero__title {
        font-size: clamp(2.5rem, 1.6rem + 4.2vw, 3.375rem);
    }

    .home-hero__lead {
        margin: 14px 0 22px;
        font-size: 1.0625rem;
    }

    .home-hero__actions .btn {
        flex: 1 1 100%;
    }

    .home-picks {
        margin-top: -72px;
    }

    .home-ext {
        padding: var(--space-16) 0;
    }

    .home-ext__chips {
        margin: 18px 0 22px;
    }

    .home-ext__copy .btn {
        width: 100%;
    }

    .home-stats {
        padding: var(--space-6) 0 var(--space-16);
    }

    .home-stats__copy .btn {
        width: 100%;
    }
}

@media (min-width: 900px) {
    .home-ext__grid {
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
        gap: 64px;
    }

    .home-ext__grid .home-laptop {
        order: -1;
    }

    .home-laptop__toggle {
        min-height: 32px;
        padding: 0 12px;
        font-size: 0.75rem;
    }

    .home-stats__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 64px;
    }

    .home-stats__visual {
        display: block;
        order: 0;
        height: 560px;
    }

    .home-stats__visual--photo {
        height: 480px;
    }

    .home-stats__media {
        position: absolute;
        inset: 0 24% 0 calc((min(100vw - 2 * var(--gutter), var(--frame) - 2 * var(--gutter)) - 100vw) / 2);
        width: auto;
        height: auto;
        margin: 0;
        border-radius: 0 20px 20px 0;
    }

    .home-stats__visual--photo .home-stats__media {
        right: 0;
    }

    .home-stats__photo img {
        object-position: var(--ball-focus, 50% 45%);
    }

    .home-phone {
        position: absolute;
        top: 50%;
        right: 0;
        width: 270px;
        margin: 0;
        padding: 11px;
        border-radius: 42px;
        transform: translateY(-50%);
    }

    .home-phone__screen {
        border-radius: 32px;
    }

    .home-final {
        padding: 60px 0 calc(110px + var(--tab-bar-space));
        background: var(--home-night);
    }

    .home-final__media {
        position: absolute;
        inset: 0;
        z-index: -1;
        aspect-ratio: auto;
    }

    .home-final__media::after {
        background: linear-gradient(180deg, var(--home-page-bg) 0%, rgb(var(--home-night-rgb) / 0.45) 22%, rgb(var(--home-night-rgb) / 0.8) 100%);
    }

    :root[data-theme="light"] .home-final__media::after {
        background: linear-gradient(180deg, rgb(var(--home-night-rgb) / 0.6) 0%, rgb(var(--home-night-rgb) / 0.55) 30%, rgb(var(--home-night-rgb) / 0.85) 100%);
    }

    .home-final__body {
        margin-top: 0;
    }

    .home-final__lead {
        font-size: 1.125rem;
    }

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

    .home-plans--one {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (min-width: 1024px) {
    .home-picks .picks-hook {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    }

    .home-picks .picks-hook__panel {
        padding: 34px 36px;
    }
}