:root {
    --blue: #007aff;
    --blue-active: #0a84ff;

    --text: #f5f5f7;
    --text-secondary: rgba(235, 235, 245, .62);
    --text-tertiary: rgba(235, 235, 245, .36);

    --line: rgba(255, 255, 255, .09);

    --surface-0: #000;
    --surface-1: #08080a;
    --surface-2: #101012;
    --surface-3: #18181b;
    --surface-4: #202023;

    --ease-out: cubic-bezier(.16, 1, .3, 1);

    --font:
        -apple-system,
        BlinkMacSystemFont,
        "SF Pro Text",
        "SF Pro Display",
        "Helvetica Neue",
        "Segoe UI",
        system-ui,
        sans-serif;
}


*,
*::before,
*::after {
    box-sizing: border-box;
}


html {
    margin: 0;

    background: #000;

    scroll-behavior: auto;
}


body {
    margin: 0;
    min-width: 320px;

    background: #000;
    color: var(--text);

    font-family: var(--font);
    font-size: 16px;
    line-height: 1.4;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;

    overflow-x: hidden;
}


button,
a {
    font: inherit;

    -webkit-tap-highlight-color: transparent;
}


button {
    border: 0;
}


a {
    color: inherit;
    text-decoration: none;
}


::selection {
    background: rgba(0, 122, 255, .25);
}


:focus-visible {
    outline: 3px solid rgba(10, 132, 255, .55);
    outline-offset: 3px;
}



/* =========================================================
   HARD DESKTOP / MOBILE SEPARATION
   ========================================================= */

.product-stage-desktop {
    display: none !important;
}


.product-stage-mobile {
    display: block;
}



/* =========================================================
   SAFE BASELINE

   Content is fully visible by default.

   Scroll motion is an enhancement added farther below.
   Unsupported browsers therefore get a complete,
   immediately rendered page rather than invisible content.
   ========================================================= */

.reveal,
.reveal.visible {
    opacity: 1;
    transform: none;
}



/* =========================================================
   NAV
   ========================================================= */

.topbar-wrap {
    position: fixed;

    top: 0;
    left: 0;
    right: 0;

    z-index: 1000;

    padding:
        max(.65rem, env(safe-area-inset-top))
        .65rem
        0;

    pointer-events: none;
}


.topbar {
    width: 100%;
    min-height: 3.45rem;

    display: flex;
    align-items: center;
    justify-content: space-between;

    margin: 0 auto;

    padding:
        .38rem
        .4rem
        .38rem
        1rem;

    border:
        .5px solid
        rgba(255, 255, 255, .08);

    border-radius: 999px;

    background: rgba(22, 22, 25, .97);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .07),
        0 8px 24px rgba(0, 0, 0, .28);

    pointer-events: auto;

    transition:
        background
        180ms
        ease-out;
}


.topbar-wrap.scrolled .topbar {
    background: rgba(18, 18, 21, .99);
}


.scroll-scrim {
    display: none;
}


.brand {
    min-height: 44px;

    display: inline-flex;
    align-items: center;

    color: var(--text);

    font-size: 1rem;
    font-weight: 650;

    letter-spacing: -.014em;
}


.brand span {
    color: var(--blue);
}


.topbar-right {
    display: flex;
    align-items: center;

    gap: .4rem;
}


.preview-state {
    display: none;
}


.nav-action {
    min-height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding:
        0
        1rem;

    border-radius: 999px;

    background: var(--blue);
    color: #fff;

    font-size: .8rem;
    font-weight: 600;
}


.nav-action:active {
    background: var(--blue-active);
}



/* =========================================================
   HERO
   ========================================================= */

.hero {
    position: relative;

    width: 100%;

    padding:
        8.5rem
        1rem
        6rem;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 14% 26rem,
            rgba(0, 122, 255, .15) 0,
            rgba(0, 122, 255, .055) 19%,
            transparent 44%
        ),
        radial-gradient(
            circle at 88% 38rem,
            rgba(94, 92, 230, .09) 0,
            transparent 38%
        ),
        linear-gradient(
            180deg,
            #000 0%,
            #030304 54%,
            #09090b 100%
        );

    color: var(--text);
}


.hero::after,
.hero-glow {
    display: none;
}


.hero-copy {
    position: relative;

    width: 100%;
    max-width: 34rem;

    margin: 0 auto;

    text-align: center;
}


.eyebrow,
.section-eyebrow,
.small-label {
    margin: 0;

    font-size: .68rem;
    line-height: 1.25;

    font-weight: 600;

    letter-spacing: .055em;
}


.eyebrow {
    color: #64d2ff;
}


.hero h1 {
    max-width: 100%;

    margin:
        1.35rem
        auto
        0;

    font-size:
        clamp(
            3.8rem,
            19.5vw,
            6.2rem
        );

    line-height: .89;

    font-weight: 700;

    letter-spacing: -.057em;

    text-wrap: balance;
}


.hero h1 span {
    display: block;

    color: rgba(245, 245, 247, .47);
}


.hero-description {
    max-width: 29rem;

    margin:
        1.7rem
        auto
        0;

    color: var(--text-secondary);

    font-size: 1rem;
    line-height: 1.5;

    text-wrap: balance;
}


.hero-actions {
    width: 100%;

    display: flex;
    flex-direction: column;

    align-items: center;

    gap: .6rem;

    margin-top: 1.8rem;
}


.button {
    width: min(100%, 19rem);
    min-height: 49px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: .45rem;

    padding:
        0
        1.2rem;

    border-radius: 999px;

    cursor: pointer;

    font-size: .91rem;
    font-weight: 600;
}


.button svg {
    width: 1rem;
    height: 1rem;

    fill: currentColor;
}


.button-primary {
    background: var(--blue);
    color: #fff;
}


.button-primary:active {
    background: var(--blue-active);
}


.button-secondary {
    background: #18181b;
    color: var(--text);

    box-shadow:
        inset 0 0 0 .5px
        rgba(255, 255, 255, .11);
}



/* =========================================================
   PRODUCT PREVIEW
   ========================================================= */

.product-preview-wrap {
    position: relative;
}


.product-stage-mobile {
    position: relative;

    width: calc(100vw - 1rem);
    max-width: 31rem;

    margin:
        4.7rem
        auto
        0;
}


.mobile-stage-light {
    display: none;
}


.mobile-product-frame {
    position: relative;

    width: 100%;

    padding-bottom: .7rem;

    border:
        .5px solid
        rgba(255, 255, 255, .08);

    border-radius: 1.8rem;

    background: #0e0e10;

    box-shadow:
        0 20px 60px
        rgba(0, 0, 0, .45);
}



/* =========================================================
   FAKE APP

   Intentionally normal document flow.
   ========================================================= */

.mobile-app {
    position: relative;

    min-height: 31rem;

    padding:
        1.15rem
        1.1rem
        8rem;

    overflow: hidden;

    border-radius:
        1.8rem
        1.8rem
        1.3rem
        1.3rem;

    background:
        linear-gradient(
            180deg,
            #121214 0%,
            #0d0d0f 100%
        );
}


.mobile-app-top {
    min-height: 3.25rem;

    display: flex;
    align-items: center;
    justify-content: space-between;
}


.mobile-app-brand {
    display: flex;
    align-items: center;

    gap: .65rem;
}


.mobile-fake-logo {
    width: 2.1rem;
    height: 2.1rem;

    display: grid;
    place-items: center;

    flex: 0 0 auto;

    border-radius: .62rem;

    background: #f5f5f7;
    color: #111114;

    font-size: .92rem;
    font-weight: 700;
}


.mobile-app-brand strong,
.mobile-app-brand span {
    display: block;
}


.mobile-app-brand strong {
    font-size: .78rem;
    line-height: 1.1;

    font-weight: 620;
}


.mobile-app-brand span {
    margin-top: .16rem;

    color: rgba(235, 235, 245, .38);

    font-size: .61rem;
}


.mobile-fake-avatar {
    width: 2.25rem;
    height: 2.25rem;

    display: grid;
    place-items: center;

    flex: 0 0 auto;

    border-radius: 50%;

    background: #2c2c2e;
    color: rgba(245, 245, 247, .8);

    font-size: .58rem;
    font-weight: 600;
}


.mobile-app-heading {
    margin-top: 2rem;
}


.mobile-kicker {
    display: block;

    color: rgba(235, 235, 245, .32);

    font-size: .63rem;
    line-height: 1.2;

    font-weight: 600;

    letter-spacing: .055em;
}


.mobile-app-heading h2 {
    margin:
        .4rem
        0
        0;

    font-size: 2rem;
    line-height: 1;

    font-weight: 650;

    letter-spacing: -.035em;
}


.mobile-plan-card {
    position: relative;

    margin-top: 1.7rem;

    padding:
        1rem
        1rem
        .95rem;

    border:
        .5px solid
        rgba(255, 255, 255, .075);

    border-radius: 1rem;

    background: #171719;
}


.mobile-plan-copy > span,
.mobile-seat-count > span {
    display: block;

    color: rgba(235, 235, 245, .31);

    font-size: .58rem;
    line-height: 1.2;

    font-weight: 600;

    letter-spacing: .045em;
}


.mobile-plan-copy > strong {
    display: block;

    margin-top: .4rem;

    font-size: 1.25rem;
    line-height: 1;

    font-weight: 650;

    letter-spacing: -.02em;
}


.mobile-seat-count {
    position: absolute;

    top: 1rem;
    right: 1rem;

    text-align: right;
}


.mobile-seat-count > strong {
    display: block;

    margin-top: .36rem;

    font-size: .8rem;
    line-height: 1;

    font-weight: 600;
}


.mobile-seat-track {
    height: .25rem;

    margin-top: 1rem;

    overflow: hidden;

    border-radius: 999px;

    background: rgba(255, 255, 255, .08);
}


.mobile-seat-track i {
    display: block;

    width: 70%;
    height: 100%;

    border-radius: inherit;

    background: var(--blue);
}


.mobile-people {
    margin-top: 1.5rem;

    border-top:
        .5px solid
        rgba(255, 255, 255, .08);
}


.mobile-person {
    min-height: 4rem;

    display: flex;
    align-items: center;

    gap: .75rem;

    border-bottom:
        .5px solid
        rgba(255, 255, 255, .08);
}


.mobile-person .person-avatar {
    width: 2.05rem;
    height: 2.05rem;

    display: grid;
    place-items: center;

    flex: 0 0 auto;

    border-radius: 50%;

    background: #2c2c2e;
    color: rgba(245, 245, 247, .68);

    font-size: .57rem;
    font-weight: 600;
}


.mobile-person-copy strong,
.mobile-person-copy span {
    display: block;
}


.mobile-person-copy strong {
    font-size: .74rem;
    font-weight: 600;
}


.mobile-person-copy span {
    margin-top: .14rem;

    color: rgba(235, 235, 245, .39);

    font-size: .61rem;
}


.mobile-app-fade {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 8rem;

    background:
        linear-gradient(
            to bottom,
            transparent,
            #0d0d0f
        );

    pointer-events: none;
}



/* =========================================================
   MOBILE REESPONDER

   Normal flow with small visual overlap.
   No backdrop-filter.
   No filter blur.
   ========================================================= */

.mobile-support-shell {
    position: relative;
    z-index: 10;

    margin:
        -7rem
        .7rem
        0;
}


.mobile-support-material {
    position: relative;

    overflow: hidden;

    border:
        .5px solid
        rgba(255, 255, 255, .09);

    border-radius:
        1.45rem
        1.45rem
        1.25rem
        1.25rem;

    background: #1b1b1e;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .07),
        0 12px 32px rgba(0, 0, 0, .34);
}


.mobile-support-material::before {
    display: none;
}


.mobile-sheet-handle {
    height: 1.1rem;

    display: grid;
    place-items: center;
}


.mobile-sheet-handle i {
    width: 2.2rem;
    height: .2rem;

    border-radius: 999px;

    background: rgba(235, 235, 245, .18);
}


.mobile-support-top {
    min-height: 3.75rem;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding:
        0
        .7rem
        0
        .9rem;

    border-bottom:
        .5px solid
        rgba(255, 255, 255, .075);
}


.mobile-support-identity {
    display: flex;
    align-items: center;

    gap: .65rem;
}


.reesponder-icon {
    width: 2.25rem;
    height: 2.25rem;

    display: grid;
    place-items: center;

    flex: 0 0 auto;

    border-radius: .7rem;

    background: #f5f5f7;
    color: #111114;

    font-size: 1.08rem;
    font-weight: 700;

    letter-spacing: -.025em;
}


.mobile-support-identity strong,
.mobile-support-identity span {
    display: block;
}


.mobile-support-identity strong {
    font-size: .76rem;
    line-height: 1.1;

    font-weight: 600;
}


.mobile-support-identity span {
    margin-top: .18rem;

    color: rgba(235, 235, 245, .44);

    font-size: .6rem;
}


.mobile-support-identity span i {
    display: inline-block;

    width: .32rem;
    height: .32rem;

    margin-right: .3rem;

    border-radius: 50%;

    background: #30d158;
}


.mobile-support-menu {
    width: 44px;
    height: 44px;

    display: grid;
    place-items: center;

    padding: 0;

    border-radius: 50%;

    background: transparent;

    color: rgba(235, 235, 245, .42);
}


.mobile-support-menu svg {
    width: 1.15rem;
    height: 1.15rem;

    fill: currentColor;
}


.mobile-support-menu:active {
    background: rgba(255, 255, 255, .07);
}



/* =========================================================
   CHAT
   ========================================================= */

.mobile-conversation {
    min-height: 18rem;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    gap: .5rem;

    padding:
        .9rem
        .9rem
        .85rem;
}


.mobile-bubble {
    width: fit-content;

    max-width: 86%;

    padding:
        .63rem
        .76rem;

    font-size: .7rem;
    line-height: 1.42;
}


.mobile-bubble-user {
    align-self: flex-end;

    border-radius:
        1rem
        1rem
        .34rem
        1rem;

    background: var(--blue);
    color: #fff;
}


.mobile-bubble-ai {
    align-self: flex-start;

    border-radius:
        1rem
        1rem
        1rem
        .34rem;

    background: #29292c;
    color: var(--text);
}


.mobile-bubble-ai strong {
    font-weight: 650;
}


.mobile-typing {
    width: 2.85rem;
    height: 1.9rem;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: .2rem;

    border-radius:
        .95rem
        .95rem
        .95rem
        .34rem;

    background: #29292c;
}


.mobile-typing i {
    width: .26rem;
    height: .26rem;

    border-radius: 50%;

    background: rgba(235, 235, 245, .48);

    animation:
        mobileTyping
        900ms
        infinite
        ease-in-out;
}


.mobile-typing i:nth-child(2) {
    animation-delay: 110ms;
}


.mobile-typing i:nth-child(3) {
    animation-delay: 220ms;
}


@keyframes mobileTyping {

    0%,
    60%,
    100% {
        opacity: .35;
    }

    30% {
        opacity: 1;
    }

}


.mobile-support-composer {
    min-height: 3.1rem;

    display: flex;
    align-items: center;
    justify-content: space-between;

    margin:
        0
        .6rem
        .6rem;

    padding:
        0
        .4rem
        0
        .95rem;

    border:
        .5px solid
        rgba(255, 255, 255, .06);

    border-radius: 999px;

    background: #242427;

    color: rgba(235, 235, 245, .29);

    font-size: .67rem;
}


.mobile-send-control {
    width: 2.25rem;
    height: 2.25rem;

    display: grid;
    place-items: center;

    flex: 0 0 auto;

    border-radius: 50%;

    background: var(--blue);
    color: #fff;
}


.mobile-send-control svg {
    width: 1rem;
    height: 1rem;

    fill: currentColor;
}



/* =========================================================
   PRODUCT DEMO

   Message playback remains discrete.
   It does not participate in page-scroll compositing.
   ========================================================= */

.mobile-conversation.demo-running .demo-step {
    display: none;
}


.mobile-conversation.demo-running
.mobile-bubble.demo-step.visible {
    display: block;
}


.mobile-conversation.demo-running
.mobile-typing.demo-step.visible {
    display: flex;
}



/* =========================================================
   INVITE SHEET
   ========================================================= */

.mobile-invite-sheet {
    display: none;

    position: absolute;

    z-index: 50;

    left: .7rem;
    right: .7rem;
    bottom: .7rem;

    padding:
        .4rem
        .9rem
        .9rem;

    border:
        .5px solid
        rgba(255, 255, 255, .1);

    border-radius:
        1.45rem
        1.45rem
        1.25rem
        1.25rem;

    background: #1c1c1f;
    color: var(--text);

    box-shadow:
        0 14px 36px
        rgba(0, 0, 0, .46);

    pointer-events: none;
}


.mobile-invite-sheet.visible {
    display: block;

    pointer-events: auto;
}


.mobile-invite-handle {
    height: 1.1rem;

    display: grid;
    place-items: center;
}


.mobile-invite-handle i {
    width: 2.2rem;
    height: .2rem;

    border-radius: 999px;

    background: rgba(235, 235, 245, .18);
}


.mobile-invite-top {
    min-height: 3.5rem;

    display: flex;
    align-items: center;
    justify-content: space-between;
}


.mobile-invite-top > div > span {
    display: block;

    color: rgba(235, 235, 245, .31);

    font-size: .58rem;
    line-height: 1.2;

    font-weight: 600;

    letter-spacing: .05em;
}


.mobile-invite-top > div > strong {
    display: block;

    margin-top: .28rem;

    font-size: 1rem;
    line-height: 1.1;

    font-weight: 620;
}


.mobile-invite-close {
    width: 2rem;
    height: 2rem;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #29292c;

    color: rgba(235, 235, 245, .48);

    font-size: .92rem;
}


.mobile-invite-input {
    height: 2.8rem;

    display: flex;
    align-items: center;

    margin-top: .75rem;

    padding:
        0
        .85rem;

    border:
        .5px solid
        rgba(255, 255, 255, .06);

    border-radius: .75rem;

    background: #242427;

    color: rgba(235, 235, 245, .31);

    font-size: .68rem;
}


.mobile-invite-button {
    height: 2.8rem;

    display: grid;
    place-items: center;

    margin-top: .55rem;

    border-radius: .75rem;

    background: var(--blue);
    color: #fff;

    font-size: .72rem;
    font-weight: 600;
}



/* =========================================================
   IDEA
   ========================================================= */

.idea {
    position: relative;

    padding:
        6.6rem
        1.25rem
        7rem;

    background:
        linear-gradient(
            180deg,
            #000 0%,
            #070709 50%,
            #0b0b0e 100%
        );

    color: var(--text);
}


.idea-inner {
    width: 100%;
    max-width: 34rem;

    margin: 0 auto;
}


.section-eyebrow {
    color: var(--blue);
}


.idea h2 {
    max-width: 31rem;

    margin:
        1rem
        0
        0;

    font-size:
        clamp(
            2.9rem,
            13.5vw,
            4.5rem
        );

    line-height: .95;

    font-weight: 700;

    letter-spacing: -.046em;

    text-wrap: balance;
}


.idea-description {
    max-width: 31rem;

    margin-top: 2.35rem;
}


.idea-description p {
    margin: 0;

    color: rgba(235, 235, 245, .56);

    font-size: 1rem;
    line-height: 1.53;
}


.idea-description p + p {
    margin-top: 1rem;

    color: rgba(245, 245, 247, .94);
}


.principles {
    width: 100%;
    max-width: 34rem;

    margin:
        4.5rem
        auto
        0;

    border-top:
        .5px solid
        var(--line);
}


.principle {
    padding:
        2rem
        0
        2.15rem;

    border-bottom:
        .5px solid
        var(--line);
}


.principle > div {
    width: 100%;
}


.principle h3 {
    margin: 0;

    font-size: 1.82rem;
    line-height: 1.04;

    font-weight: 650;

    letter-spacing: -.028em;
}


.principle p {
    max-width: 30rem;

    margin:
        .85rem
        0
        0;

    color: rgba(235, 235, 245, .53);

    font-size: .94rem;
    line-height: 1.5;
}



/* =========================================================
   FINAL
   ========================================================= */

.statement {
    position: relative;

    margin:
        0
        .4rem;

    padding:
        6.4rem
        1.15rem
        6.6rem;

    overflow: hidden;

    border:
        .5px solid
        rgba(255, 255, 255, .075);

    border-radius: 2rem;

    background:
        radial-gradient(
            circle at 50% 48%,
            rgba(0, 122, 255, .09),
            transparent 44%
        ),
        linear-gradient(
            180deg,
            #0a0a0c,
            #000
        );

    color: var(--text);
}


.statement-light {
    display: none;
}


.statement-inner {
    position: relative;

    width: 100%;
    max-width: 34rem;

    margin: 0 auto;

    text-align: center;
}


.section-eyebrow-light {
    color: #64d2ff;
}


.statement h2 {
    max-width: 31rem;

    margin:
        1.15rem
        auto
        0;

    font-size:
        clamp(
            2.9rem,
            13.2vw,
            4.5rem
        );

    line-height: .93;

    font-weight: 700;

    letter-spacing: -.05em;

    text-wrap: balance;
}


.statement-description {
    max-width: 27rem;

    margin:
        1.8rem
        auto
        0;

    color: rgba(235, 235, 245, .58);

    font-size: .95rem;
    line-height: 1.5;
}


.statement-button {
    margin-top: 1.8rem;

    background: #f5f5f7;
    color: #111114;
}



/* =========================================================
   FOOTER
   ========================================================= */

footer {
    width: calc(100% - 2.5rem);
    max-width: 34rem;

    min-height: 9rem;

    display: grid;

    grid-template-columns:
        1fr
        auto;

    align-items: center;

    gap:
        1rem
        1.5rem;

    margin: 0 auto;

    padding-bottom:
        env(safe-area-inset-bottom);

    color: rgba(235, 235, 245, .32);

    font-size: .69rem;

    letter-spacing: .01em;
}


.footer-brand {
    color: var(--text);

    font-size: .86rem;
}


footer > p {
    margin: 0;
}


footer > p:nth-child(2) {
    display: none;
}



/* =========================================================
   APPLE / WEBKIT STYLE NATIVE SCROLL MOTION

   IMPORTANT:
   - no scroll event drives these animations
   - no requestAnimationFrame loop
   - no IntersectionObserver controls visibility
   - no backdrop-filter
   - no filter
   - only opacity + tiny transform
   - individual UI/text layers only
   - no giant section/container transforms

   Safari 26.4+ runs eligible scroll-driven animations
   on its threaded compositor path.
   ========================================================= */

@supports (animation-timeline: view()) {

    @media (prefers-reduced-motion: no-preference) {

        @keyframes td-reveal-soft {

            from {
                opacity: .08;

                transform:
                    translateY(16px)
                    scale(.992);
            }

            to {
                opacity: 1;

                transform:
                    translateY(0)
                    scale(1);
            }

        }


        @keyframes td-reveal-text {

            from {
                opacity: .12;

                transform:
                    translateY(13px);
            }

            to {
                opacity: 1;

                transform:
                    translateY(0);
            }

        }


        @keyframes td-reveal-small {

            from {
                opacity: .2;

                transform:
                    translateY(9px);
            }

            to {
                opacity: 1;

                transform:
                    translateY(0);
            }

        }



        /*
         * Product screen
         */

        .mobile-app-heading {
            animation-name:
                td-reveal-text;

            animation-fill-mode:
                both;

            animation-timing-function:
                var(--ease-out);

            animation-timeline:
                view();

            animation-range:
                0% 34%;
        }


        .mobile-plan-card {
            animation-name:
                td-reveal-soft;

            animation-fill-mode:
                both;

            animation-timing-function:
                var(--ease-out);

            animation-timeline:
                view();

            animation-range:
                0% 38%;
        }


        .mobile-people {
            animation-name:
                td-reveal-soft;

            animation-fill-mode:
                both;

            animation-timing-function:
                var(--ease-out);

            animation-timeline:
                view();

            animation-range:
                0% 40%;
        }


        .mobile-support-shell {
            animation-name:
                td-reveal-soft;

            animation-fill-mode:
                both;

            animation-timing-function:
                var(--ease-out);

            animation-timeline:
                view();

            animation-range:
                0% 34%;
        }



        /*
         * Difference section
         */

        .idea-copy .section-eyebrow {
            animation-name:
                td-reveal-small;

            animation-fill-mode:
                both;

            animation-timing-function:
                var(--ease-out);

            animation-timeline:
                view();

            animation-range:
                0% 34%;
        }


        .idea-copy h2 {
            animation-name:
                td-reveal-text;

            animation-fill-mode:
                both;

            animation-timing-function:
                var(--ease-out);

            animation-timeline:
                view();

            animation-range:
                0% 40%;
        }


        .idea-description p {
            animation-name:
                td-reveal-text;

            animation-fill-mode:
                both;

            animation-timing-function:
                var(--ease-out);

            animation-timeline:
                view();

            animation-range:
                0% 38%;
        }



        /*
         * Principles

         * h3 and p receive their own small compositor
         * animation instead of moving the entire row.
         */

        .principle h3 {
            animation-name:
                td-reveal-text;

            animation-fill-mode:
                both;

            animation-timing-function:
                var(--ease-out);

            animation-timeline:
                view();

            animation-range:
                0% 36%;
        }


        .principle p {
            animation-name:
                td-reveal-text;

            animation-fill-mode:
                both;

            animation-timing-function:
                var(--ease-out);

            animation-timeline:
                view();

            animation-range:
                0% 40%;
        }



        /*
         * Final statement
         */

        .statement-inner .section-eyebrow {
            animation-name:
                td-reveal-small;

            animation-fill-mode:
                both;

            animation-timing-function:
                var(--ease-out);

            animation-timeline:
                view();

            animation-range:
                0% 32%;
        }


        .statement-inner h2 {
            animation-name:
                td-reveal-text;

            animation-fill-mode:
                both;

            animation-timing-function:
                var(--ease-out);

            animation-timeline:
                view();

            animation-range:
                0% 39%;
        }


        .statement-description {
            animation-name:
                td-reveal-text;

            animation-fill-mode:
                both;

            animation-timing-function:
                var(--ease-out);

            animation-timeline:
                view();

            animation-range:
                0% 38%;
        }


        .statement-button {
            animation-name:
                td-reveal-small;

            animation-fill-mode:
                both;

            animation-timing-function:
                var(--ease-out);

            animation-timeline:
                view();

            animation-range:
                0% 34%;
        }



        /*
         * Footer stays extremely subtle.
         */

        footer > * {
            animation-name:
                td-reveal-small;

            animation-fill-mode:
                both;

            animation-timing-function:
                var(--ease-out);

            animation-timeline:
                view();

            animation-range:
                0% 34%;
        }

    }

}



/* =========================================================
   WIDER PHONES
   ========================================================= */

@media (min-width: 430px) {

    .topbar-wrap {
        padding-left: .8rem;
        padding-right: .8rem;
    }


    .hero {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }


    .product-stage-mobile {
        width:
            calc(
                100vw - 1.5rem
            );
    }


    .mobile-app {
        padding-left: 1.3rem;
        padding-right: 1.3rem;
    }


    .mobile-support-shell {
        margin-left: .85rem;
        margin-right: .85rem;
    }


    .mobile-invite-sheet {
        left: .85rem;
        right: .85rem;
        bottom: .85rem;
    }


    .mobile-conversation {
        padding-left: 1rem;
        padding-right: 1rem;
    }


    .idea {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }


    .statement {
        margin-left: .6rem;
        margin-right: .6rem;

        padding-left: 1.4rem;
        padding-right: 1.4rem;
    }

}



/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 360px) {

    .topbar-wrap {
        padding-left: .5rem;
        padding-right: .5rem;
    }


    .hero {
        padding-left: .8rem;
        padding-right: .8rem;
    }


    .hero h1 {
        font-size:
            clamp(
                3.55rem,
                19vw,
                4.25rem
            );
    }


    .hero-description {
        font-size: .95rem;
    }


    .product-stage-mobile {
        width:
            calc(
                100vw - .7rem
            );
    }


    .mobile-product-frame {
        border-radius: 1.65rem;
    }


    .mobile-app {
        padding-left: .9rem;
        padding-right: .9rem;

        border-radius:
            1.65rem
            1.65rem
            1.2rem
            1.2rem;
    }


    .mobile-support-shell {
        margin-left: .5rem;
        margin-right: .5rem;
    }


    .mobile-support-material {
        border-radius:
            1.3rem
            1.3rem
            1.15rem
            1.15rem;
    }


    .mobile-invite-sheet {
        left: .5rem;
        right: .5rem;
        bottom: .5rem;
    }


    .mobile-conversation {
        padding-left: .75rem;
        padding-right: .75rem;
    }


    .mobile-bubble {
        max-width: 89%;

        font-size: .68rem;
    }


    .idea {
        padding-left: 1rem;
        padding-right: 1rem;
    }


    .statement {
        margin-left: .3rem;
        margin-right: .3rem;
    }

}



/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        animation-timeline:
            auto !important;
    }


    .reveal,
    .reveal.visible,
    .mobile-app-heading,
    .mobile-plan-card,
    .mobile-people,
    .mobile-support-shell,
    .idea-copy .section-eyebrow,
    .idea-copy h2,
    .idea-description p,
    .principle h3,
    .principle p,
    .statement-inner .section-eyebrow,
    .statement-inner h2,
    .statement-description,
    .statement-button,
    footer > * {
        opacity: 1 !important;

        transform:
            none !important;
    }

}


@media (prefers-contrast: more) {

    .topbar,
    .mobile-product-frame,
    .mobile-support-material,
    .mobile-invite-sheet {
        border-color:
            rgba(
                255,
                255,
                255,
                .34
            );
    }

}