:root {
    --blue: #007aff;
    --blue-dark: #0068d8;

    --label: #f5f5f7;
    --label-secondary: rgba(235, 235, 245, .64);
    --label-tertiary: rgba(235, 235, 245, .36);

    --white-label: #f5f5f7;
    --white-secondary: rgba(245, 245, 247, .68);

    --bg: #000;
    --bg-secondary: #0b0b0d;
    --bg-tertiary: #111114;

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

    --glass: rgba(26, 26, 29, .72);
    --glass-dark: rgba(32, 32, 35, .62);

    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-pill: 999px;

    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;

    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-standard: cubic-bezier(.4, 0, .2, 1);

    --shadow-glass:
        0 1px 2px rgba(0, 0, 0, .08),
        0 10px 30px rgba(0, 0, 0, .12),
        0 30px 80px rgba(0, 0, 0, .14);

    --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 {
    scroll-behavior: smooth;
}


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

    background: #000;
    color: #f5f5f7;

    font-family: var(--font);
    font-size: 1rem;
    line-height: 1.4;

    font-optical-sizing: auto;

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

    overflow-x: hidden;
}


button,
a {
    font: inherit;
}


button {
    border: 0;
}


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


button,
a {
    -webkit-tap-highlight-color: transparent;
}


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


:focus-visible {
    outline: 3px solid rgba(0, 122, 255, .45);
    outline-offset: 3px;
}


/* MOBILE COMPOSITION DOES NOT EXIST ON DESKTOP */

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


/* NAV */

.topbar-wrap {
    position: fixed;

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

    z-index: 1000;

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

    pointer-events: none;
}


.topbar {
    width: min(46rem, calc(100% - 1rem));
    min-height: 3.5rem;

    margin: 0 auto;

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

    padding: .42rem .5rem .42rem 1.15rem;

    border-radius: var(--radius-pill);

    pointer-events: auto;

    transform: translateZ(0);

    transition:
        transform 220ms var(--ease-out),
        background 220ms var(--ease-out);
}


.glass {
    background: rgba(25, 25, 28, .72);

    -webkit-backdrop-filter:
        blur(20px)
        saturate(180%);

    backdrop-filter:
        blur(20px)
        saturate(180%);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .10),
        inset 0 0 0 .5px rgba(255, 255, 255, .045),
        0 0 0 .5px rgba(0, 0, 0, .55),
        0 8px 30px rgba(0, 0, 0, .32);
}


.topbar-wrap.scrolled .topbar {
    transform: scale(.97);

    background: rgba(25, 25, 28, .86);
}


.scroll-scrim {
    height: 1.6rem;

    margin-top: -.3rem;

    background:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, .28),
            transparent
        );

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent
        );

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent
        );

    opacity: 0;

    transition: opacity 200ms ease-out;
}


.topbar-wrap.scrolled .scroll-scrim {
    opacity: 1;
}


.brand {
    min-height: 44px;

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

    color: #f5f5f7;

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

    letter-spacing: -.014em;
}


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


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

    gap: .45rem;
}


.preview-state {
    display: flex;
    align-items: center;

    gap: .5rem;

    padding: 0 .7rem;

    color: var(--label-secondary);

    font-size: .73rem;
    font-weight: 500;

    letter-spacing: .01em;
}


.preview-state i {
    width: .38rem;
    height: .38rem;

    border-radius: 50%;

    background: #30d158;

    box-shadow:
        0 0 0 .22rem rgba(48, 209, 88, .12);
}


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

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

    padding: 0 1rem;

    border-radius: var(--radius-pill);

    background: var(--blue);
    color: white;

    font-size: .82rem;
    font-weight: 600;

    transition:
        transform 120ms var(--ease-out),
        filter 120ms var(--ease-out);
}


.nav-action:active {
    transform: scale(.96);
    filter: brightness(.92);
}


/* HERO */

.hero {
    position: relative;

    min-height: 100vh;

    padding:
        clamp(9rem, 15vh, 12rem)
        1.25rem
        8rem;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #000000 0%,
            #050506 66%,
            #0b0b0d 100%
        );

    color: var(--white-label);
}


.hero::after {
    content: "";

    position: absolute;
    inset: auto 0 0;

    height: 16rem;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(255, 255, 255, .025)
        );

    pointer-events: none;
}


.hero-glow {
    position: absolute;

    border-radius: 50%;

    filter: blur(9rem);

    pointer-events: none;

    opacity: .6;
}


.hero-glow-a {
    width: 30rem;
    height: 30rem;

    left: 12%;
    top: 27rem;

    background: rgba(0, 122, 255, .32);
}


.hero-glow-b {
    width: 28rem;
    height: 28rem;

    right: 10%;
    top: 35rem;

    background: rgba(94, 92, 230, .22);
}


.hero-copy {
    position: relative;
    z-index: 3;

    width: min(64rem, 100%);

    margin: 0 auto;

    text-align: center;
}


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

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

    font-weight: 600;

    letter-spacing: .055em;
}


.eyebrow {
    color: #64d2ff;
}


.hero h1 {
    max-width: 62rem;

    margin:
        1.45rem
        auto
        0;

    font-size:
        clamp(
            4.5rem,
            10.2vw,
            9.5rem
        );

    line-height: .88;

    font-weight: 700;

    letter-spacing: -.055em;

    font-optical-sizing: auto;

    text-wrap: balance;
}


.hero h1 span {
    display: block;

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


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

    margin:
        2rem
        auto
        0;

    color: var(--white-secondary);

    font-size:
        clamp(
            1.05rem,
            1.8vw,
            1.35rem
        );

    line-height: 1.48;

    font-weight: 400;

    letter-spacing: 0;

    text-wrap: balance;
}


.hero-actions {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: .65rem;

    margin-top: 2rem;
}


.button {
    min-height: 48px;

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

    gap: .45rem;

    padding: 0 1.25rem;

    border-radius: var(--radius-pill);

    cursor: pointer;

    font-size: .93rem;
    font-weight: 600;

    letter-spacing: 0;

    transition:
        transform 120ms var(--ease-out),
        filter 120ms var(--ease-out),
        background 180ms var(--ease-out);
}


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

    fill: currentColor;
}


.button:active {
    transform: scale(.97);
}


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


.button-primary:hover {
    background: #0a84ff;
}


.button-primary:active {
    filter: brightness(.91);
}


.button-secondary {
    background:
        rgba(
            255,
            255,
            255,
            .11
        );

    color: var(--white-label);

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


.button-secondary:hover {
    background:
        rgba(
            255,
            255,
            255,
            .16
        );
}


/* PRODUCT */

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


.product-stage-desktop {
    --pointer-x: 50%;
    --pointer-y: 50%;

    position: relative;
    z-index: 4;

    width: min(74rem, 100%);

    margin:
        clamp(5rem, 9vw, 8rem)
        auto
        0;

    perspective: 1400px;
}


.stage-light {
    position: absolute;

    width: 34rem;
    height: 22rem;

    top: 25%;
    left: 54%;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(0, 122, 255, .26),
            rgba(0, 122, 255, .07) 42%,
            transparent 72%
        );

    filter: blur(3rem);

    pointer-events: none;
}


.app-window {
    position: relative;

    min-height: 39rem;

    display: grid;

    grid-template-columns:
        12rem
        minmax(0, 1fr);

    overflow: hidden;

    border-radius: 1.8rem;

    background: #101012;
    color: #f5f5f7;

    box-shadow:
        0 0 0 .5px rgba(255, 255, 255, .08),
        0 2rem 7rem rgba(0, 0, 0, .7);

    -webkit-corner-smoothing: 60%;

    transform: translateZ(0);
}


.app-sidebar {
    display: flex;
    flex-direction: column;

    padding: 1.5rem 1rem;

    background: #09090b;

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


.fake-logo {
    width: 2rem;
    height: 2rem;

    display: grid;
    place-items: center;

    margin-left: .4rem;

    border-radius: .58rem;

    background: #f5f5f7;
    color: #111114;

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


.sidebar-items {
    display: flex;
    flex-direction: column;

    gap: .2rem;

    margin-top: 2rem;
}


.sidebar-item {
    min-height: 2.45rem;

    display: flex;
    align-items: center;

    gap: .65rem;

    padding: 0 .75rem;

    border-radius: .65rem;

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

    font-size: .76rem;
    font-weight: 500;
}


.sidebar-item i {
    width: .68rem;
    height: .68rem;

    border-radius: .22rem;

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


.sidebar-item.active {
    background: rgba(255, 255, 255, .09);
    color: #f5f5f7;

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


.sidebar-item.active i {
    background: var(--blue);
}


.sidebar-bottom {
    margin-top: auto;

    padding: .75rem;

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

    font-size: .69rem;
    font-weight: 500;
}


.app-content {
    padding:
        2rem
        clamp(2rem, 5vw, 4rem)
        4rem;
}


.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.app-kicker {
    color: rgba(235, 235, 245, .48);

    font-size: .7rem;
    font-weight: 500;

    letter-spacing: .01em;
}


.app-header h2 {
    margin: .3rem 0 0;

    font-size: 1.75rem;
    line-height: 1.15;

    letter-spacing: -.022em;

    font-weight: 650;
}


.fake-avatar {
    width: 2.7rem;
    height: 2.7rem;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #2c2c2e;
    color: #f5f5f7;

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


.app-summary {
    display: flex;

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

    gap: 2rem;

    margin-top: 3rem;
    padding-bottom: 2.25rem;

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


.small-label {
    color: rgba(235, 235, 245, .30);
}


.summary-copy > strong {
    display: block;

    margin-top: .6rem;

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

    letter-spacing: -.022em;
}


.summary-copy p {
    margin: .65rem 0 0;

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

    font-size: .82rem;
}


.seat-usage {
    width: 9rem;
}


.seat-usage > span {
    display: block;

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

    font-size: .7rem;
}


.seat-usage > strong {
    display: block;

    margin-top: .15rem;

    font-size: 1rem;
    font-weight: 600;
}


.seat-track {
    height: .28rem;

    margin-top: .65rem;

    overflow: hidden;

    border-radius: 1rem;

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


.seat-track i {
    display: block;

    width: 70%;
    height: 100%;

    border-radius: inherit;

    background: var(--blue);
}


.content-heading {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    margin-top: 2.5rem;
}


.content-heading h3 {
    margin: .35rem 0 0;

    font-size: 1.45rem;
    line-height: 1.15;

    font-weight: 650;

    letter-spacing: -.018em;
}


.fake-invite {
    min-height: 2.4rem;

    padding: 0 1rem;

    border-radius: var(--radius-pill);

    background: var(--blue);
    color: white;

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


.people-list {
    margin-top: 1.1rem;

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


.person {
    min-height: 4.4rem;

    display: grid;

    grid-template-columns:
        2.25rem
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: .8rem;

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


.person-avatar {
    width: 2.15rem;
    height: 2.15rem;

    display: grid;
    place-items: center;

    border-radius: 50%;

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

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


.person strong,
.person span {
    display: block;
}


.person strong {
    font-size: .76rem;
    font-weight: 600;
}


.person div > span {
    margin-top: .15rem;

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

    font-size: .64rem;
}


.person-role {
    color: rgba(235, 235, 245, .48);

    font-size: .67rem;
}


/* REESPONDER FLOATING LAYER */

.support-shell {
    position: absolute;

    width: min(23rem, 34%);

    min-width: 20rem;

    right: 2rem;
    bottom: 2rem;

    z-index: 20;

    transform-style: preserve-3d;

    will-change: transform;
}


.support-glass {
    position: relative;

    overflow: hidden;

    border-radius: 1.65rem;

    background: rgba(27, 27, 30, .72);

    -webkit-backdrop-filter:
        blur(24px)
        saturate(185%);

    backdrop-filter:
        blur(24px)
        saturate(185%);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .13),
        inset 0 0 0 .5px rgba(255, 255, 255, .045),
        0 0 0 .5px rgba(0, 0, 0, .52),
        0 16px 48px rgba(0, 0, 0, .48),
        0 35px 90px rgba(0, 0, 0, .42);

    -webkit-corner-smoothing: 60%;
}


.support-glass::before {
    content: "";

    position: absolute;

    inset: 0 0 auto;

    height: 35%;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, .10),
            rgba(255, 255, 255, .025),
            transparent
        );

    pointer-events: none;

    opacity: .7;
}


.support-glass::after {
    content: "";

    position: absolute;

    width: 12rem;
    height: 8rem;

    left: var(--pointer-x, 50%);
    top: var(--pointer-y, 30%);

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, .16),
            transparent 65%
        );

    opacity: .24;

    filter: blur(1.5rem);

    pointer-events: none;
}


.support-top {
    position: relative;
    z-index: 2;

    min-height: 4.5rem;

    display: flex;

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

    padding: 0 1rem;

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


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

    gap: .7rem;
}


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

    display: grid;
    place-items: center;

    border-radius: .75rem;

    background: #f5f5f7;
    color: #111114;

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

    letter-spacing: -.022em;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .24),
        0 2px 10px rgba(0, 0, 0, .25);
}


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


.support-identity strong {
    color: #f5f5f7;

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

    letter-spacing: 0;
}


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

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

    font-size: .64rem;

    letter-spacing: .01em;
}


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

    width: .35rem;
    height: .35rem;

    margin-right: .32rem;

    border-radius: 50%;

    background: #30d158;
}


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

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: transparent;

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

    cursor: pointer;

    transition:
        transform 100ms var(--ease-out),
        background 120ms var(--ease-out);
}


.support-menu svg {
    width: 1.2rem;
    height: 1.2rem;

    fill: currentColor;
}


.support-menu:active {
    transform: scale(.9);

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


/* CHAT */

.conversation {
    position: relative;
    z-index: 2;

    min-height: 20.5rem;

    display: flex;

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

    gap: .55rem;

    padding: 1rem;
}


.bubble {
    width: fit-content;

    max-width: 84%;

    padding:
        .66rem
        .82rem;

    font-size: .73rem;
    line-height: 1.42;

    letter-spacing: .01em;
}


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

    border-radius:
        1.05rem
        1.05rem
        .35rem
        1.05rem;

    background: var(--blue);

    color: white;
}


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

    border-radius:
        1.05rem
        1.05rem
        1.05rem
        .35rem;

    background: rgba(255, 255, 255, .09);

    color: #f5f5f7;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .035);
}


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


.typing {
    width: 3rem;
    height: 2rem;

    display: flex;

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

    gap: .22rem;

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

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


.typing i {
    width: .28rem;
    height: .28rem;

    border-radius: 50%;

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

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


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


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


@keyframes typing {
    0%,
    60%,
    100% {
        opacity: .35;

        transform: translateY(0);
    }

    30% {
        opacity: 1;

        transform: translateY(-2px);
    }
}


.support-composer {
    position: relative;
    z-index: 2;

    min-height: 3.25rem;

    display: flex;

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

    margin:
        0
        .65rem
        .65rem;

    padding:
        0
        .45rem
        0
        1rem;

    border-radius: var(--radius-pill);

    background: rgba(255, 255, 255, .07);

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

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

    font-size: .7rem;
}


.send-control {
    width: 2.35rem;
    height: 2.35rem;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: var(--blue);

    color: white;
}


.send-control svg {
    width: 1.05rem;
    height: 1.05rem;

    fill: currentColor;
}


/* DEMO STATE */

.demo-step {
    opacity: 1;

    transform:
        translate3d(
            0,
            0,
            0
        );
}


.conversation.demo-running .demo-step {
    opacity: 0;

    transform:
        translate3d(
            0,
            .5rem,
            0
        )
        scale(.985);
}


.conversation.demo-running .demo-step.visible {
    opacity: 1;

    transform:
        translate3d(
            0,
            0,
            0
        )
        scale(1);

    transition:
        opacity 240ms var(--ease-out),
        transform 380ms var(--ease-out);
}


/* ACTION SHEET */

.invite-sheet {
    position: absolute;

    z-index: 15;

    width: 19rem;

    right: 25rem;
    bottom: 2.3rem;

    padding: 1rem;

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

    border-radius: 1.35rem;

    background: rgba(28, 28, 30, .94);

    color: #f5f5f7;

    box-shadow:
        0 1px 2px rgba(0, 0, 0, .2),
        0 1.2rem 4rem rgba(0, 0, 0, .52);

    opacity: 0;

    transform:
        translate3d(
            1rem,
            .8rem,
            0
        )
        scale(.94);

    pointer-events: none;

    transition:
        opacity 220ms var(--ease-out),
        transform 420ms var(--ease-out);
}


.invite-sheet.visible {
    opacity: 1;

    transform:
        translate3d(
            0,
            0,
            0
        )
        scale(1);
}


.sheet-top {
    display: flex;

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


.sheet-top strong {
    font-size: .85rem;
    font-weight: 600;
}


.sheet-top span {
    color: rgba(235, 235, 245, .34);

    font-size: 1rem;
}


.sheet-input {
    height: 2.65rem;

    display: flex;
    align-items: center;

    margin-top: 1rem;

    padding: 0 .8rem;

    border-radius: .7rem;

    background: rgba(255, 255, 255, .07);

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

    font-size: .7rem;
}


.sheet-button {
    height: 2.6rem;

    display: grid;
    place-items: center;

    margin-top: .6rem;

    border-radius: .7rem;

    background: var(--blue);
    color: white;

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


/* IDEA */

.idea {
    padding:
        clamp(7rem, 12vw, 11rem)
        1.5rem
        clamp(7rem, 12vw, 11rem);

    background:
        linear-gradient(
            180deg,
            #000 0%,
            #08080a 48%,
            #0c0c0f 100%
        );

    color: #f5f5f7;
}


.idea-inner {
    width: min(70rem, 100%);

    display: grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(18rem, .7fr);

    gap:
        clamp(
            3rem,
            8vw,
            8rem
        );

    margin: 0 auto;
}


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


.idea h2 {
    max-width: 42rem;

    margin: 1.15rem 0 0;

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

    line-height: .94;

    font-weight: 700;

    letter-spacing: -.045em;

    text-wrap: balance;
}


.idea-description {
    align-self: end;

    padding-bottom: .45rem;
}


.idea-description p {
    margin: 0;

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

    font-size:
        clamp(
            1rem,
            1.4vw,
            1.15rem
        );

    line-height: 1.5;
}


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

    color: #f5f5f7;
}


.principles {
    width: min(70rem, 100%);

    margin:
        clamp(
            5rem,
            9vw,
            8rem
        )
        auto
        0;

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


.principle {
    min-height: 10rem;

    display: block;

    padding:
        2rem
        0;

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


.principle > div {
    width: 100%;

    display: grid;

    grid-template-columns:
        minmax(14rem, .72fr)
        minmax(18rem, 1fr);

    align-items: baseline;

    gap: 3rem;
}


.principle h3 {
    margin: 0;

    font-size:
        clamp(
            1.8rem,
            3vw,
            2.6rem
        );

    line-height: 1.05;

    letter-spacing: -.022em;

    font-weight: 650;
}


.principle p {
    max-width: 31rem;

    margin: 0;

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

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


/* FINAL */

.statement {
    position: relative;

    margin: 0 .75rem;

    padding:
        clamp(
            7rem,
            12vw,
            11rem
        )
        1.5rem;

    overflow: hidden;

    border-radius:
        clamp(
            2rem,
            5vw,
            4rem
        );

    background:
        linear-gradient(
            180deg,
            #0a0a0c,
            #000
        );

    color: var(--white-label);

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


.statement-light {
    position: absolute;

    width: 50rem;
    height: 35rem;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(0, 122, 255, .21),
            rgba(0, 122, 255, .06) 42%,
            transparent 70%
        );

    filter: blur(4rem);
}


.statement-inner {
    position: relative;
    z-index: 2;

    width: min(60rem, 100%);

    margin: 0 auto;

    text-align: center;
}


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


.statement h2 {
    max-width: 58rem;

    margin:
        1.3rem
        auto
        0;

    font-size:
        clamp(
            3.5rem,
            7vw,
            7rem
        );

    line-height: .92;

    font-weight: 700;

    letter-spacing: -.05em;

    text-wrap: balance;
}


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

    margin:
        2rem
        auto
        0;

    color: var(--white-secondary);

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


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

    background: #f5f5f7;

    color: #111114;
}


.statement-button:hover {
    background: white;
}


/* FOOTER */

footer {
    width: min(70rem, calc(100% - 3rem));

    min-height: 8rem;

    display: grid;

    grid-template-columns:
        1fr
        auto
        auto;

    align-items: center;

    gap: 2rem;

    margin: 0 auto;

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

    font-size: .72rem;

    letter-spacing: .01em;
}


.footer-brand {
    color: #f5f5f7;

    font-size: .88rem;
}


/* REVEAL */

.reveal {
    opacity: 0;

    transform:
        translate3d(
            0,
            1.5rem,
            0
        );

    transition:
        opacity 700ms var(--ease-out),
        transform 900ms var(--ease-out);
}


.reveal.visible {
    opacity: 1;

    transform:
        translate3d(
            0,
            0,
            0
        );
}


/* TABLET / NARROW DESKTOP */

@media (max-width: 900px) {

    .app-window {
        grid-template-columns:
            9rem
            minmax(0, 1fr);
    }


    .support-shell {
        min-width: 18.5rem;

        right: 1.2rem;
        bottom: 1.2rem;
    }


    .invite-sheet {
        right: 21rem;
    }


    .idea-inner {
        grid-template-columns: 1fr;

        gap: 2.5rem;
    }


    .idea-description {
        max-width: 34rem;
    }


    .principle > div {
        grid-template-columns: 1fr;

        gap: .85rem;
    }

}


/* BACKDROP FALLBACK */

@supports not (
    (backdrop-filter: blur(1px))
    or
    (-webkit-backdrop-filter: blur(1px))
) {

    .glass {
        background: #1c1c1e;
    }


    .support-glass {
        background: #1c1c1e;
    }

}


/* REDUCED TRANSPARENCY */

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

    .glass,
    .support-glass {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;

        background: #1c1c1e;
    }

}


/* HIGH CONTRAST */

@media (prefers-contrast: more) {

    .glass,
    .support-glass {
        box-shadow:
            inset 0 0 0 1px currentColor;
    }

}


/* REDUCED MOTION */

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

    html {
        scroll-behavior: auto;
    }


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

        transition-duration: .01ms !important;

        scroll-behavior: auto !important;
    }


    .reveal {
        opacity: 1;

        transform: none;
    }


    .conversation.demo-running .demo-step {
        transform: none;
    }

}