/* Welcome hero copy animation */
.section-media-hero .media {
    position: relative;
}

.section-media-hero .overview-welcome-welcome-hero-copy {
    --copy-text-color: #1d1d1f;
    --copy-ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);
    --copy-ease-out: cubic-bezier(0.33, 1, 0.68, 1);
    --copy-cap-height: 0.7045;
    --copy-eyebrow-size: 31.8px;
    --copy-eyebrow-tracking: 0em;
    --copy-headline-size: 53.8px;
    --copy-line-1-tracking: -0.0028em;
    --copy-line-1-word-spacing: 0.042em;
    --copy-line-2-tracking: 0.0056em;
    --copy-letter-tracking: 0.0025em;
    --copy-eyebrow-baseline: 33px;
    --copy-line-1-baseline: 107.85px;
    --copy-line-2-baseline: 166.6px;
    --copy-eyebrow-shift: 0.1px;
    --copy-line-1-shift: -1px;
    --copy-line-2-shift: 0.4px;
    --copy-rise-eyebrow: 9.2px;
    --copy-rise-line-1: 7.5px;
    --copy-rise-line-2: 4.1px;
    position: absolute;
    top: calc(var(--marquee-padding-reduced) + var(--copy-eyebrow-baseline) - var(--copy-eyebrow-size) * var(--copy-cap-height));
    inset-inline: 0;
    z-index: 5;
    pointer-events: none;
}

@media only screen and (max-width: 1068px) {
    .section-media-hero .overview-welcome-welcome-hero-copy {
        --copy-eyebrow-size: 19.9px;
        --copy-eyebrow-tracking: -0.0005em;
        --copy-headline-size: 39.6px;
        --copy-line-1-tracking: -0.0035em;
        --copy-line-1-word-spacing: 0.0403em;
        --copy-line-2-tracking: 0.0046em;
        --copy-letter-tracking: 0.003em;
        --copy-eyebrow-baseline: 19.2px;
        --copy-line-1-baseline: 69.45px;
        --copy-line-2-baseline: 113.6px;
        --copy-eyebrow-shift: 1.5px;
        --copy-line-1-shift: 0.8px;
        --copy-line-2-shift: 2.3px;
        --copy-rise-eyebrow: 10.5px;
    }
}

@media only screen and (max-width: 734px) {
    .section-media-hero .overview-welcome-welcome-hero-copy {
        --copy-eyebrow-size: 19.5px;
        --copy-eyebrow-tracking: -0.0048em;
        --copy-headline-size: 30.1px;
        --copy-line-1-tracking: -0.0059em;
        --copy-line-1-word-spacing: 0.0419em;
        --copy-line-2-tracking: 0.0025em;
        --copy-letter-tracking: 0.0011em;
        --copy-eyebrow-baseline: 18.2px;
        --copy-line-1-baseline: 60.5px;
        --copy-line-2-baseline: 94.15px;
        --copy-eyebrow-shift: -0.4px;
        --copy-line-1-shift: -1.4px;
        --copy-line-2-shift: -0.3px;
        --copy-rise-eyebrow: 8.6px;
        --copy-rise-line-1: 5px;
        --copy-rise-line-2: 2.7px;
    }
}

.overview-welcome-welcome-hero-copy .marquee-eyebrow, .overview-welcome-welcome-hero-copy .marquee-headline, .overview-welcome-welcome-hero-copy .marquee-headline-line {
    margin: 0;
    text-box: trim-both cap alphabetic;
}

.overview-welcome-welcome-hero-copy .marquee-eyebrow {
    position: relative;
    left: var(--copy-eyebrow-shift);
    font-size: var(--copy-eyebrow-size);
    letter-spacing: var(--copy-eyebrow-tracking);
}

.overview-welcome-welcome-hero-copy .marquee-headline {
    font-size: var(--copy-headline-size);
}

.overview-welcome-welcome-hero-copy .marquee-headline-line {
    display: block;
    position: relative;
}

.overview-welcome-welcome-hero-copy .marquee-headline-line-1 {
    margin-top: calc(var(--copy-line-1-baseline) - var(--copy-eyebrow-baseline) - var(--copy-headline-size) * var(--copy-cap-height));
    left: var(--copy-line-1-shift);
    letter-spacing: var(--copy-line-1-tracking);
    word-spacing: var(--copy-line-1-word-spacing);
}

.overview-welcome-welcome-hero-copy .marquee-headline-line-2 {
    margin-top: calc(var(--copy-line-2-baseline) - var(--copy-line-1-baseline) - var(--copy-headline-size) * var(--copy-cap-height));
    left: var(--copy-line-2-shift);
    letter-spacing: var(--copy-line-2-tracking);
}

html:not(.enhanced, .no-enhanced, .no-js) .overview-welcome-welcome-hero-copy {
    visibility: hidden;
}

/* SF Pro Display Semibold: "l" advance, half ink width, baseline offset from the middle of the line box */
.overview-welcome-welcome-hero-copy .marquee-headline-letter {
    --letter-width: calc(0.2285em + var(--copy-letter-tracking));
    --letter-ink-half: 0.061em;
    --letter-baseline: calc(50% + 0.3555em);
    --letter-pivot-left: calc(50% - var(--letter-ink-half)) var(--letter-baseline);
    --letter-pivot-right: calc(50% + var(--letter-ink-half)) var(--letter-baseline);
    display: inline-block;
    color: var(--letter-color);
    letter-spacing: var(--copy-letter-tracking);
    transform-origin: var(--letter-pivot-right);
}

.overview-welcome-welcome-hero-copy .marquee-headline-letter-added {
    display: inline-flex;
    justify-content: center;
    width: var(--letter-width);
}

/* "I" advance */
.overview-welcome-welcome-hero-copy:lang(it) .marquee-headline-letter, .overview-welcome-welcome-hero-copy:lang(pt) .marquee-headline-letter {
    --letter-width: calc(0.25em + var(--copy-letter-tracking));
}

.overview-welcome-welcome-hero-copy .marquee-headline-letter-1 {
    --letter-color: #2e7e44;
    --letter-tint-delay: 2.21s;
    --letter-settle-delay: 2.44s;
    --letter-grow-delay: 1.72s;
    --letter-fade-delay: 1.79s;
}

.overview-welcome-welcome-hero-copy .marquee-headline-letter-2 {
    --letter-color: #e3bd37;
    --letter-tint-delay: 2.21s;
    --letter-settle-delay: 2.507s;
    --letter-grow-delay: 1.84s;
    --letter-fade-delay: 1.955s;
}

.overview-welcome-welcome-hero-copy .marquee-headline-letter-3 {
    --letter-color: #ce5d3a;
    --letter-tint-delay: 2.285s;
    --letter-settle-delay: 2.574s;
    --letter-grow-delay: 1.96s;
    --letter-fade-delay: 2.12s;
}

.overview-welcome-welcome-hero-copy .marquee-headline-letter-4 {
    --letter-color: #d34767;
    --letter-tint-delay: 2.285s;
    --letter-settle-delay: 2.641s;
    --letter-grow-delay: 2.08s;
    --letter-fade-delay: 2.285s;
}

.overview-welcome-welcome-hero-copy .marquee-headline-letter-5 {
    --letter-color: #6560a0;
    --letter-tint-delay: 2.36s;
    --letter-settle-delay: 2.708s;
    --letter-grow-delay: 2.2s;
    --letter-fade-delay: 2.45s;
}

.overview-welcome-welcome-hero-copy .marquee-headline-letter-6 {
    --letter-color: #4270ab;
    --letter-tint-delay: 2.36s;
    --letter-settle-delay: 2.775s;
    --letter-grow-delay: 2.32s;
    --letter-fade-delay: 2.61s;
}

@media (prefers-reduced-motion: no-preference) {
    html.enhanced .overview-welcome-welcome-hero-copy .marquee-eyebrow, html.enhanced .overview-welcome-welcome-hero-copy .marquee-headline-line, html.enhanced .overview-welcome-welcome-hero-copy .marquee-headline-letter {
        animation-fill-mode: both;
        animation-play-state: paused;
    }

    html.enhanced .overview-welcome-welcome-hero-copy .marquee-eyebrow {
        --copy-rise: var(--copy-rise-eyebrow);
        animation-name: welcome-hero-fade-in, welcome-hero-rise;
        animation-duration: 0.18s, 0.683s;
        animation-delay: 1.496s, 1.433s;
        animation-timing-function: linear, var(--copy-ease-out);
    }

    html.enhanced .overview-welcome-welcome-hero-copy .marquee-headline-line-1 {
        --copy-rise: var(--copy-rise-line-1);
        animation-name: welcome-hero-fade-in, welcome-hero-rise;
        animation-duration: 0.165s, 0.517s;
        animation-delay: 1.503s, 1.433s;
        animation-timing-function: linear, cubic-bezier(0, 0, 0.58, 1);
    }

    html.enhanced .overview-welcome-welcome-hero-copy .marquee-headline-line-2 {
        --copy-rise: var(--copy-rise-line-2);
        animation-name: welcome-hero-fade-in, welcome-hero-rise;
        animation-duration: 0.18s, 0.483s;
        animation-delay: 1.669s, 1.608s;
        animation-timing-function: linear, var(--copy-ease-out);
    }

    html.enhanced .overview-welcome-welcome-hero-copy .marquee-headline-letter {
        animation-name: welcome-hero-tint, welcome-hero-straighten, welcome-hero-lean, welcome-hero-pivot;
        animation-duration: 0.23s, 0.42s, 0.587s, 0.587s;
        animation-delay: var(--letter-tint-delay), var(--letter-settle-delay), 1.933s, 1.933s;
        animation-timing-function: linear, var(--copy-ease-in-out), linear, linear;
    }

    html.enhanced .overview-welcome-welcome-hero-copy .marquee-headline-letter-added {
        animation-name: welcome-hero-tint, welcome-hero-straighten, welcome-hero-lean, welcome-hero-pivot, welcome-hero-grow, welcome-hero-fade-in;
        animation-duration: 0.23s, 0.42s, 0.587s, 0.587s, 0.6s, 0.17s;
        animation-delay: var(--letter-tint-delay), var(--letter-settle-delay), 1.933s, 1.933s, var(--letter-grow-delay), var(--letter-fade-delay);
        animation-timing-function: linear, var(--copy-ease-in-out), linear, linear, linear, linear;
    }

    .media:has(.inline-media-component-container.playing, .inline-media-component-container.ended) .overview-welcome-welcome-hero-copy :is(.marquee-eyebrow, .marquee-headline-line, .marquee-headline-letter) {
        animation-play-state: running;
    }

    html.no-inline-media .overview-welcome-welcome-hero-copy :is(.marquee-eyebrow, .marquee-headline-line, .marquee-headline-letter), .media:has(.inline-media-component-container.fallback, .inline-media-component-container.loading-error) .overview-welcome-welcome-hero-copy :is(.marquee-eyebrow, .marquee-headline-line, .marquee-headline-letter) {
        animation: none;
    }
}

@keyframes welcome-hero-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes welcome-hero-rise {
    from {
        translate: 0 var(--copy-rise);
    }
    to {
        translate: 0 0;
    }
}

@keyframes welcome-hero-tint {
    from {
        color: var(--copy-text-color);
    }
    to {
        color: var(--letter-color);
    }
}

@keyframes welcome-hero-lean {
    0% {
        rotate: 0deg;
        animation-timing-function: var(--copy-ease-in-out);
    }
    50.6% {
        rotate: -6deg;
        animation-timing-function: var(--copy-ease-in-out);
    }
    65.9% {
        rotate: 0deg;
        animation-timing-function: var(--copy-ease-in-out);
    }
    100% {
        rotate: 8deg;
    }
}

@keyframes welcome-hero-pivot {
    0% {
        transform-origin: var(--letter-pivot-right);
        animation-timing-function: step-end;
    }
    65.9%, 100% {
        transform-origin: var(--letter-pivot-left);
    }
}

@keyframes welcome-hero-straighten {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-8deg);
    }
}

@keyframes welcome-hero-grow {
    0% {
        width: 0;
        animation-timing-function: var(--copy-ease-in-out);
    }
    75% {
        width: calc(var(--letter-width) * 1.12);
        animation-timing-function: var(--copy-ease-in-out);
    }
    100% {
        width: var(--letter-width);
    }
}

/* Welcome hero marquee heights to match US  */
section.section-media-hero .marquee-primary-header {
    min-height: 54px;
}

section.section-media-hero .marquee .marquee-pricing {
    min-height: 36px;
}