.Resellers {
    --SkyHeight: clamp(24rem, 15rem + 22vw, 40rem);
    --TopSpace: calc(var(--SectionSpace) + 4.5rem);
    --EntranceDelay: 240ms;
    --ItemStagger: 40ms;
    --TileSize: 3.5rem;
    --TrackFill: rgb(255 255 255 / 0.04);
    --ThumbFill: rgb(255 255 255 / 0.1);
    --QuietFill: rgb(255 255 255 / 0.04);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    isolation: isolate;
}

.Resellers[data-entrance="done"] {
    --EntranceDelay: 0ms;
}

.ResellerSky {
    grid-area: 1 / 1;
    align-self: start;
    height: var(--SkyHeight);
    overflow: clip;
    opacity: 0.55;
    mask: linear-gradient(#000 25%, transparent);
    pointer-events: none;
    user-select: none;
}

.ResellerSky img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 100%;
    animation: ResellerSettle 1800ms var(--EaseOut) both;
}

.ResellerPage {
    grid-area: 1 / 1;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding-block: var(--TopSpace) var(--SectionSpace);
}

.ResellerLead {
    text-wrap: balance;
}

.PlanPicker {
    --RevealDelay: calc(var(--EntranceDelay) * 0.75);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "switch"
        "summary"
        "link";
    align-items: center;
    justify-items: center;
    row-gap: var(--SpaceSmall);
    margin-bottom: var(--HeaderGap);
}

.PlanSwitch {
    --PlanIndex: 0;
    grid-area: switch;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    min-width: 0;
    margin: 0;
    padding: var(--SpaceMicro);
    border: 1px solid var(--BorderSubtle);
    border-radius: var(--RadiusRound);
    background: var(--TrackFill);
}

.PlanSwitch:has([value="monthly"]:checked) {
    --PlanIndex: 1;
}

.PlanSwitch:has([value="quarterly"]:checked) {
    --PlanIndex: 2;
}

.PlanSwitch::before {
    content: "";
    grid-area: 1 / 1;
    border-radius: var(--RadiusRound);
    background: var(--ThumbFill);
    box-shadow: var(--InsetHighlight), 0 1px 2px rgb(0 0 0 / 0.18);
    translate: calc(var(--PlanIndex) * 100%) 0;
}

.PlanPicker[data-state="ready"] .PlanSwitch::before {
    transition: translate 420ms var(--EaseSmooth);
}

.PlanOption {
    grid-area: 1 / 1;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--SpaceTiny);
    height: var(--ControlSmall);
    padding-inline: 1.125rem;
    border-radius: var(--RadiusRound);
    font-size: var(--SizeSmall);
    font-weight: var(--WeightMedium);
    line-height: 1;
    white-space: nowrap;
    color: var(--InkMuted);
    cursor: pointer;
    user-select: none;
    transition: color var(--DurationBase) var(--EaseOut);
}

.PlanOption:nth-of-type(2) {
    grid-column: 2;
}

.PlanOption:nth-of-type(3) {
    grid-column: 3;
}

.PlanOption:hover,
.PlanOption:has(:checked) {
    color: var(--InkStrong);
}

.PlanSummary .SummarySave {
    color: var(--AccentBright);
}

.PlanOption:has(:focus-visible) {
    outline: 2px solid var(--AccentBright);
    outline-offset: 2px;
}

.PlanSummary {
    grid-area: summary;
    display: grid;
    justify-items: center;
    margin-top: var(--SpaceMicro);
    font-size: var(--SizeBody);
    line-height: var(--LeadingSnug);
    text-align: center;
    color: var(--InkMuted);
    font-variant-numeric: tabular-nums;
}

.SummaryText {
    grid-area: 1 / 1;
    transition:
        opacity 360ms var(--EaseOut) 120ms,
        translate 520ms var(--EaseOut) 120ms;
}

.SummaryText strong {
    font-weight: var(--WeightMedium);
    color: var(--InkStrong);
}

.SummaryText[data-state="below"] {
    opacity: 0;
    translate: 0 0.5rem;
}

.SummaryText[data-state="above"] {
    opacity: 0;
    translate: 0 -0.5rem;
    transition-duration: 180ms, 320ms;
    transition-delay: 0ms;
}

.PlanLink {
    grid-area: link;
}

.ResellerGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--GridGap);
}

.ResellerItem {
    --RevealDelay: calc(var(--EntranceDelay) + var(--RevealOrder, 0) * var(--ItemStagger));
    display: grid;
    container-type: inline-size;
}

.ResellerCard {
    --CardPadding: 1.125rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding: var(--CardPadding);
    box-shadow: none;
    transition:
        scale var(--DurationFast) var(--EaseOut),
        border-color 280ms var(--EaseOut),
        background-color 280ms var(--EaseOut);
}

.ResellerCard:focus-visible {
    border-color: var(--BorderStrong);
}

.ResellerCard:active {
    scale: 0.985;
    transition-duration: var(--DurationInstant);
}

.ResellerShot {
    display: grid;
    margin: calc(-1 * var(--CardPadding)) calc(-1 * var(--CardPadding)) var(--SpaceSmall);
    padding: var(--CardPadding) var(--CardPadding) 0;
    overflow: clip;
    border-radius: calc(var(--RadiusLarge) - 1px) calc(var(--RadiusLarge) - 1px) 0 0;
    mask-image: linear-gradient(#000 56%, rgb(0 0 0 / 0.74) 72%, rgb(0 0 0 / 0.32) 87%, transparent);
}

.ShotFrame {
    --LogoScale: 1;
    display: grid;
    place-items: center;
    height: 8rem;
    overflow: clip;
    border-radius: var(--RadiusMedium);
    background: linear-gradient(180deg, var(--SurfaceHover), var(--SurfaceRaised));
    box-shadow: 0 0 0 1px rgb(255 255 255 / 0.07), 0 1.5rem 3rem -1.25rem rgb(0 0 0 / 0.85);
}

.WyvShot {
    --LogoScale: 1.6;
}

.InfinityShot {
    --LogoScale: 1.05;
}

.BloxShot {
    --LogoScale: 1.15;
}

.ShotLogo {
    width: 4rem;
    height: 4rem;
    object-fit: contain;
    scale: var(--LogoScale);
    transition: translate 320ms var(--EaseOut);
}

.InfinityShot .ShotLogo {
    mix-blend-mode: screen;
}

.ResellerName {
    font-size: var(--SizeHeading);
    font-weight: var(--WeightMedium);
    line-height: var(--LeadingSnug);
    letter-spacing: var(--TrackingSnug);
    color: var(--InkStrong);
}

.ResellerDomain {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: var(--SpaceMicro);
    font-size: var(--SizeBody);
    line-height: var(--LeadingSnug);
    color: var(--InkMuted);
    transition: color 280ms var(--EaseOut);
}

.VisitIcon {
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: translate 240ms var(--EaseOut);
}

.ResellerCard:focus-visible .ResellerDomain {
    color: var(--InkStrong);
}

.ResellerCard:focus-visible .VisitIcon {
    translate: 0.125rem -0.125rem;
}

.KeyBand {
    display: grid;
    justify-items: center;
    margin-top: var(--SpaceHuge);
    padding: var(--SpaceLarge) var(--CardPadding);
    overflow: clip;
    text-align: center;
}

.BlockTitle {
    font-size: var(--SizeSubtitle);
    font-weight: var(--WeightRegular);
    line-height: var(--LeadingSnug);
    letter-spacing: var(--TrackingSnug);
    text-align: center;
    color: var(--InkStrong);
}

.KeyText {
    margin: var(--SpaceSmall) 0 var(--SpaceMedium);
    font-size: var(--SizeBody);
    line-height: var(--LeadingBody);
    color: var(--InkMuted);
}

.ResellerNote {
    margin-top: var(--SpaceLarge);
    font-size: var(--SizeCaption);
    line-height: 1.5;
    text-align: center;
    color: var(--InkSubtle);
}

.ResellerGrid > [data-reveal][data-revealed] {
    animation-name: ResellerRise;
    animation-duration: 760ms;
}

@keyframes ResellerRise {
    from {
        opacity: 0;
        translate: 0 0.75rem;
    }
}

@keyframes ResellerSettle {
    from {
        opacity: 0;
        scale: 1.04;
    }
}

@media (hover: hover) {
    .ResellerCard:hover {
        border-color: var(--BorderDefault);
    }

    .ResellerCard:hover .ShotLogo {
        translate: 0 -0.1875rem;
    }

    .ResellerCard:hover .ResellerDomain {
        color: var(--InkStrong);
    }

    .ResellerCard:hover .VisitIcon {
        translate: 0.125rem -0.125rem;
    }
}

@media (width < 56rem) {
    .ResellerGrid {
        grid-template-columns: minmax(0, 1fr);
        width: min(100%, 34rem);
        margin-inline: auto;
    }
}

@media (width < 44rem) {
    .KeyBand {
        padding-block: var(--SpaceLarge);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ResellerSky img {
        animation-name: FadeIn;
    }

    .ResellerGrid > [data-reveal][data-revealed] {
        animation-name: FadeIn;
        animation-duration: var(--DurationBase);
    }

    .PlanPicker[data-state="ready"] .PlanSwitch::before {
        transition-duration: var(--DurationFast);
    }

    .ResellerCard:active {
        scale: none;
    }

    .ResellerCard:hover .VisitIcon,
    .ResellerCard:focus-visible .VisitIcon,
    .ResellerCard:hover .ShotLogo {
        translate: none;
    }

    .SummaryText[data-state="below"],
    .SummaryText[data-state="above"] {
        translate: none;
    }
}